/* 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;
}

/* The input header icons are tiny admin/advanced-settings affordances. Dark
   themes intentionally use faint panel icon colors elsewhere, but that makes
   these controls look disabled against dark panels. Scope this to the Input
   panel title so output navigation/reaction overlays keep their own treatment. */
body[data-theme-mode="dark"] .input-panel .panel-title .panel-icon-btn {
  color: var(--model-panel-icon-color, #f8fbff) !important;
  opacity: 0.7;
  text-shadow: 0 0 10px var(--model-panel-icon-glow, rgba(93, 216, 255, 0.34));
}

body[data-theme-mode="dark"] .input-panel .panel-title .panel-icon-btn:hover,
body[data-theme-mode="dark"] .input-panel .panel-title .panel-icon-btn:focus {
  color: var(--model-panel-icon-hover-color, var(--model-action-hover-color, #fff)) !important;
  background: var(--model-panel-icon-hover-bg, var(--model-action-hover-bg, rgba(93, 216, 255, 0.16)));
  opacity: 1;
}

/* 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;
}