/* Shared theme baseline. Theme files override colors, surfaces, and typography. */
:root { color-scheme: dark; }
html, body { min-height: 100%; }
body { overflow-x: hidden; }
body[data-theme-mode="light"] { color-scheme: light; }
body[data-theme-mode="dark"] { color-scheme: dark; }
.theme-chrome-layer { position: fixed; pointer-events: none; z-index: 0; }
body > nav, body > section, body > .container, body > main, footer, .sample-footer { position: relative; z-index: 1; }
/* The navbar must create a higher stacking context than page panels. Bootstrap's
   dropdown z-index cannot beat a later sibling stacking context, which let the
   model output panel cover the project menu on some themes. Keep this below
   Bootstrap modals/offcanvas so dialogs still behave normally. */
body > nav.navbar {
  z-index: 1040;
}

body > nav.navbar .dropdown-menu {
  z-index: 1041;
}

/* Logged-in desktop account menu. Mobile keeps these links flat inside the
   hamburger so users see all destinations in one expanded menu. */
body > nav.navbar .nav-account-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  font-size: 1.35rem;
  line-height: 1;
}

@media (max-width: 991.98px) {
  body > nav.navbar > .container-fluid {
    /* Reserve a fixed lane for the hamburger so long page titles cannot push it
       onto a second line. The collapse still gets the next full row below. */
    position: relative;
    align-items: center;
    padding-right: 64px;
  }

  body > nav.navbar .navbar-toggler {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 1042;
  }

  body > nav.navbar .navbar-brand {
    flex: 0 0 auto;
    max-width: 52%;
    overflow: hidden;
    white-space: nowrap;
  }

  body > nav.navbar .h1-nav-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  body > nav.navbar .h1-nav-title .nav-link {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  body > nav.navbar .navbar-collapse {
    flex-basis: 100%;
    margin-top: 8px;
  }
}

/* Production model-page compatibility.
   The live model page still contains legacy inline CSS and loader markup. These
   rules are loaded again from footer.php after page-local styles so every theme
   can keep its own controls without changing JS timing or output behavior. */
#input-form .super-button,
#generate-button.super-button {
  isolation: isolate;
}

body:not([data-theme="cosmic"]):not([data-theme="neon"]) #generate-button.super-button::before,
body:not([data-theme="cosmic"]):not([data-theme="neon"]) #generate-button.super-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body:not([data-theme="cosmic"]) #generate-button.super-button::before,
body:not([data-theme="cosmic"]) #generate-button.super-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

body:not([data-theme="cosmic"]) #generate-button.super-button {
  overflow: visible !important;
}

body:not([data-theme="cosmic"]) .super-button--3d.super-button--clicked {
  animation: none !important;
}

.loader-container .loader-3,
.loader-container .loader-18 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 auto 54px !important;
}

.loader-container .loader-3 {
  width: 50px;
  height: 38px;
}

.loader-container .loader-3 .dot {
  background: currentColor !important;
}

.loader-container .loader-18 {
  width: 64px;
  height: 64px;
}

body:not([data-theme="cosmic"]) .loader-18 .css-star {
  display: none !important;
}

body:not([data-theme="cosmic"]) .loader-18::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  border: 4px solid rgba(127, 127, 127, 0.22);
  border-top-color: currentColor;
  animation: theme-loader-spin 0.85s linear infinite;
}

body[data-theme="cosmic"] .loader-18 .css-star,
body[data-theme="cosmic"] .loader-18 .css-star::before,
body[data-theme="cosmic"] .loader-18 .css-star::after {
  border-bottom-color: var(--accent-cyan, #5dd8ff) !important;
}

body[data-theme="cosmic"] .loader-18 {
  color: var(--accent-cyan, #5dd8ff);
  filter: drop-shadow(0 0 10px rgba(93,216,255,0.5));
}

@keyframes theme-loader-spin {
  to { transform: rotate(360deg); }
}

#q-message,
#loader-regular > div:last-child {
  position: static !important;
  top: auto !important;
  margin-top: 8px;
  text-align: center;
}

body[data-theme="cosmic"] .loader-3,
body[data-theme="cosmic"] .loader-18,
body[data-theme="cosmic"] .run-button-spinner-circle {
  color: var(--accent-cyan, #5dd8ff);
}

body[data-theme="glass"] .loader-3,
body[data-theme="glass"] .loader-18,
body[data-theme="glass"] .run-button-spinner-circle {
  color: var(--accent, #0a84ff);
}

body[data-theme="neon"] .loader-3,
body[data-theme="neon"] .loader-18,
body[data-theme="neon"] .run-button-spinner-circle {
  color: var(--cyan, #00f0ff);
}

body[data-theme="mono"] .loader-3,
body[data-theme="mono"] .loader-18,
body[data-theme="mono"] .run-button-spinner-circle {
  color: var(--accent, #ffd54a);
}

body[data-theme="tailwind"] .loader-3,
body[data-theme="tailwind"] .loader-18,
body[data-theme="tailwind"] .run-button-spinner-circle {
  color: var(--accent, #4f46e5);
}

body[data-theme="cloud"] .loader-3,
body[data-theme="cloud"] .loader-18,
body[data-theme="cloud"] .run-button-spinner-circle {
  color: var(--accent, #0284c7);
}

body[data-theme="editorial"] .loader-3,
body[data-theme="editorial"] .loader-18,
body[data-theme="editorial"] .run-button-spinner-circle {
  color: var(--accent, #c2410c);
}

/* Home-page cards always sit on real thumbnail artwork. Even light/editorial
   themes should not restyle these captions to dark text, because the image
   itself is the contrast surface. */
.a-card .caption,
.a-card .caption h3,
.a-card .caption p {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}

.a-card .caption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.16), transparent) !important;
}

.a-card .project-pin-toggle {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Light themes need to win back text colors from older pages that were written
   for the original dark/cosmic styling. Keep this narrow to known production
   surfaces so image captions and media overlays keep their intended contrast. */
body[data-theme-mode="light"] .pricing-card {
  background: var(--bg-elev, #fff) !important;
  border: 1px solid var(--rule, #d8dee9) !important;
  color: var(--ink, #111827) !important;
  box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, 0.08)) !important;
}

body[data-theme-mode="light"] .pricing-card h1,
body[data-theme-mode="light"] .pricing-card h2,
body[data-theme-mode="light"] .pricing-card h3,
body[data-theme-mode="light"] .pricing-card h4,
body[data-theme-mode="light"] .pricing-card h5,
body[data-theme-mode="light"] .pricing-card h6,
body[data-theme-mode="light"] .pricing-card p,
body[data-theme-mode="light"] .pricing-card li,
body[data-theme-mode="light"] .pricing-card small,
body[data-theme-mode="light"] .pricing-card strong {
  color: inherit !important;
}

body[data-theme-mode="light"] .pricing-card .btn-primary,
body[data-theme-mode="light"] .alert.alert-info .btn-info {
  background: var(--accent, #2563eb) !important;
  border-color: var(--accent, #2563eb) !important;
  color: var(--bg-elev, #fff) !important;
}

body[data-theme-mode="light"] .pricing-card .btn-primary:hover,
body[data-theme-mode="light"] .alert.alert-info .btn-info:hover {
  background: var(--accent-strong, var(--accent, #1d4ed8)) !important;
  border-color: var(--accent-strong, var(--accent, #1d4ed8)) !important;
}

body[data-theme-mode="light"] .container > h2,
body[data-theme-mode="light"] .container > .text-center,
body[data-theme-mode="light"] .container > p.text-center {
  color: var(--ink, #111827) !important;
}

body[data-theme-mode="light"] .alert.alert-info {
  background: var(--bg-elev, #fff) !important;
  border-color: var(--rule, #d8dee9) !important;
  color: var(--ink, #111827) !important;
  box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, 0.08)) !important;
}

body[data-theme-mode="light"] .alert.alert-info p,
body[data-theme-mode="light"] .alert.alert-info h5,
body[data-theme-mode="light"] .alert.alert-info strong {
  color: inherit !important;
}

body[data-theme-mode="light"] .output-panel .output-container.text-white {
  color: var(--ink, #111827) !important;
}

body[data-theme-mode="light"] .output-panel #delete-btn,
body[data-theme-mode="light"] .output-panel #submit-example-btn {
  background: var(--model-action-bg, var(--accent, #2563eb)) !important;
  border: 1px solid var(--model-action-border, var(--accent, #2563eb)) !important;
  border-radius: 999px;
  color: var(--model-action-color, var(--bg-elev, #fff)) !important;
  padding: 8px 13px;
  line-height: 1;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.12));
}

body[data-theme-mode="light"] .output-panel #delete-btn:hover,
body[data-theme-mode="light"] .output-panel #submit-example-btn:hover {
  background: var(--model-action-hover-bg, var(--accent-strong, var(--accent, #1d4ed8))) !important;
  border-color: var(--model-action-hover-border, var(--model-action-hover-bg, var(--accent-strong, var(--accent, #1d4ed8)))) !important;
  color: var(--model-action-hover-color, var(--model-action-color, var(--bg-elev, #fff))) !important;
}

/* Real model output controls are icon-only overlays. On light themes, pale
   Bootstrap buttons can disappear against the panel/page, so force a compact
   filled treatment unless a specific theme provides an even stronger version. */
body[data-theme-mode="light"] #output-nav-buttons .panel-icon-btn,
body[data-theme-mode="light"] .reaction-control.reaction-control-overlay .btn {
  background: var(--model-action-bg, var(--accent, #2563eb)) !important;
  border: 1px solid var(--model-action-border, var(--accent, #2563eb)) !important;
  color: var(--model-action-color, var(--bg-elev, #fff)) !important;
  box-shadow: var(--shadow-md, 0 10px 28px rgba(15, 23, 42, 0.18)) !important;
}

body[data-theme-mode="light"] #output-nav-buttons .panel-icon-btn:hover,
body[data-theme-mode="light"] .reaction-control.reaction-control-overlay .btn:hover {
  background: var(--model-action-hover-bg, var(--accent-strong, var(--accent, #1d4ed8))) !important;
  border-color: var(--model-action-hover-border, var(--model-action-hover-bg, var(--accent-strong, var(--accent, #1d4ed8)))) !important;
  color: var(--model-action-hover-color, var(--model-action-color, var(--bg-elev, #fff))) !important;
}

/* Models-page secondary/action buttons.
   These controls are emitted by PHP/JS as Bootstrap btn-light because they
   predate the theme system. Keep the old markup stable for JS, but route the
   actual colors through theme tokens so cloud/ai770 does not get black buttons
   and dark themes do not get generic white Bootstrap buttons. */
body[data-theme="cosmic"] {
  --model-action-bg: rgba(180, 140, 255, 0.12);
  --model-action-border: rgba(180, 140, 255, 0.34);
  --model-action-color: var(--text, #f0eaff);
  --model-action-hover-bg: rgba(93, 216, 255, 0.18);
  --model-action-hover-border: var(--accent-cyan, #5dd8ff);
  --model-action-hover-color: #fff;
}

body[data-theme="glass"] {
  --model-action-bg: var(--glass-bg-strong, rgba(255, 255, 255, 0.08));
  --model-action-border: var(--glass-border, rgba(255, 255, 255, 0.18));
  --model-action-color: var(--text, #f5f7fb);
  --model-action-hover-bg: rgba(10, 132, 255, 0.16);
  --model-action-hover-border: var(--accent, #0a84ff);
  --model-action-hover-color: #fff;
}

body[data-theme="neon"] {
  --model-action-bg: rgba(0, 0, 0, 0.38);
  --model-action-border: var(--cyan, #00f0ff);
  --model-action-color: var(--cyan, #00f0ff);
  --model-action-hover-bg: var(--cyan, #00f0ff);
  --model-action-hover-border: var(--cyan, #00f0ff);
  --model-action-hover-color: var(--bg-deep, #080312);
}

body[data-theme="mono"] {
  --model-action-bg: var(--bg, #111);
  --model-action-border: var(--border-strong, #444);
  --model-action-color: var(--text, #f5f5f5);
  --model-action-hover-bg: var(--bg-elev-2, #222);
  --model-action-hover-border: var(--accent, #ffd54a);
  --model-action-hover-color: var(--accent, #ffd54a);
}

body[data-theme="tailwind"] {
  --model-action-bg: #fff;
  --model-action-border: var(--border-strong, #cbd5e1);
  --model-action-color: var(--accent, #4f46e5);
  --model-action-hover-bg: var(--accent-tint, #eef2ff);
  --model-action-hover-border: var(--accent, #4f46e5);
  --model-action-hover-color: var(--accent, #4f46e5);
}

body[data-theme="cloud"] {
  --model-action-bg: rgba(255, 255, 255, 0.72);
  --model-action-border: var(--glass-border-strong, rgba(255, 255, 255, 0.9));
  --model-action-color: var(--accent-strong, #075985);
  --model-action-hover-bg: var(--accent, #0284c7);
  --model-action-hover-border: var(--accent, #0284c7);
  --model-action-hover-color: #fff;
}

body[data-theme="editorial"] {
  --model-action-bg: var(--bg-elev, #fffaf0);
  --model-action-border: var(--ink-faint, #8a7768);
  --model-action-color: var(--ink, #271b15);
  --model-action-hover-bg: var(--ink, #271b15);
  --model-action-hover-border: var(--ink, #271b15);
  --model-action-hover-color: var(--bg-elev, #fffaf0);
}

body[data-theme="legacy"] {
  --model-action-bg: rgba(255, 255, 255, 0.1);
  --model-action-border: rgba(255, 255, 255, 0.28);
  --model-action-color: #fff;
  --model-action-hover-bg: rgba(93, 216, 255, 0.18);
  --model-action-hover-border: #5dd8ff;
  --model-action-hover-color: #fff;
}

.input-panel .btn.btn-light,
.output-panel #output-content .btn.btn-light,
.output-panel .output-container .btn.btn-light,
.creation-bulk-bar .btn.btn-light {
  background: var(--model-action-bg, var(--accent, #2563eb)) !important;
  border-color: var(--model-action-border, var(--accent, #2563eb)) !important;
  color: var(--model-action-color, #fff) !important;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.12));
}

.input-panel .btn.btn-light:hover,
.input-panel .btn.btn-light:focus,
.output-panel #output-content .btn.btn-light:hover,
.output-panel #output-content .btn.btn-light:focus,
.output-panel .output-container .btn.btn-light:hover,
.output-panel .output-container .btn.btn-light:focus,
.creation-bulk-bar .btn.btn-light:hover,
.creation-bulk-bar .btn.btn-light:focus {
  background: var(--model-action-hover-bg, var(--model-action-bg, var(--accent, #2563eb))) !important;
  border-color: var(--model-action-hover-border, var(--model-action-border, var(--accent, #2563eb))) !important;
  color: var(--model-action-hover-color, var(--model-action-color, #fff)) !important;
}

.input-panel .btn.btn-light i,
.output-panel #output-content .btn.btn-light i,
.output-panel .output-container .btn.btn-light i,
.creation-bulk-bar .btn.btn-light i {
  color: inherit;
}

/* Creation thumbnails: output-count badge. Page CSS pins left; theme CSS pins right.
   Without clearing the other edge, both win and the badge stretches full width. */
/* Sign-in page: anchor-as-button (JS uses #googleSigninLink on <a>, not wrap+button). */
.signin-card .google-signin-wrap {
  width: 100%;
  margin: 0 0 4px;
}
.signin-card a.google-signin-link.login-with-google-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  border: none;
}
.signin-card a.google-signin-link.login-with-google-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
  pointer-events: auto;
}
.signin-terms-hint {
  display: block;
  font-size: 0.92em;
  opacity: 0.85;
  margin-top: 4px;
}
.signin-terms-reminder {
  display: none;
  color: #ffb3b3;
  font-size: 0.9em;
  margin-top: 6px;
}
/* legacy theme has no signin block — minimal card so layout never looks broken */
body[data-theme="legacy"] .signin-section { padding: 48px 0 80px; }
body[data-theme="legacy"] .signin-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 28px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="legacy"] .signin-title { font-size: 1.6rem; margin-bottom: 0.5rem; }
body[data-theme="legacy"] .signin-sub { opacity: 0.85; margin-bottom: 1.25rem; }
body[data-theme="legacy"] .brand-star-lg { color: #5dd8ff; filter: drop-shadow(0 0 16px rgba(93, 216, 255, 0.5)); }

.thumbnail-wrapper .thumbnail-output-count,
.library-card .thumbnail-output-count {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px;
  padding: 0 5px !important;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  z-index: 2;
}