/* 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. */
.model-workspace {
  align-items: flex-start;
}

.model-input-panel {
  /* Sticky children need visible overflow; the decorative panel border still
     uses pointer-events:none, so this keeps the action bar usable without
     changing form behavior. */
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.model-run-sticky-area {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 10px;
  padding: 14px 0 10px;
}

.model-run-sticky-area::before {
  content: "";
  position: absolute;
  inset: 0 -14px 1px -16px;
  z-index: -1;
  border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
  background: rgba(12, 12, 18, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body[data-theme-mode="light"] .model-run-sticky-area::before {
  background: rgba(255, 255, 255, 0.84);
  border-top-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 -14px 30px rgba(20, 24, 34, 0.14);
}

@media (min-width: 992px) {
  .model-output-col {
    position: sticky;
    top: 88px;
    align-self: flex-start;
    max-height: calc(100vh - 104px);
    overflow: hidden;
  }

  .model-output-col .output-panel {
    max-height: calc(100vh - 104px);
    overflow: auto;
  }
}

@media (max-width: 991.98px) {
  .model-output-col,
  .model-output-col .output-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .model-run-sticky-area {
    margin-left: 0;
    margin-right: 0;
  }
}

#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)); }

/* =========================================================
   SweetAlert2 theming
   SweetAlert2 v11 reads --swal2-* custom properties (declared on :root by its
   own stylesheet, whether loaded via <link> or injected by the .all bundle).
   Swal appends its container to <body>, so re-declaring those variables on
   body[data-theme-mode] / body[data-theme] retints every dialog through normal
   CSS inheritance — no !important fights with the CDN stylesheet, and future
   Swal updates keep working. Each theme maps its existing palette (panel
   surface, field styling, accent focus ring, button treatment) onto Swal.
   Note: a couple of JS calls pass confirmButtonColor inline (pricing modals);
   inline styles intentionally keep winning for those specific buttons.
   ========================================================= */

/* Geometry shared by all themes: dialogs round like theme panels, controls
   round like theme fields. Falls back sanely for legacy (no radius tokens). */
body[data-theme] {
  --swal2-border-radius: var(--radius-lg, 16px);
  --swal2-input-border-radius: var(--radius-sm, 8px);
  --swal2-confirm-button-border-radius: var(--radius-sm, 8px);
  --swal2-cancel-button-border-radius: var(--radius-sm, 8px);
  --swal2-deny-button-border-radius: var(--radius-sm, 8px);
}

/* Dark-mode baseline. Neutral charcoal surfaces so any dark theme without a
   dedicated block below (currently legacy) still gets a coherent dark dialog
   instead of Swal's stock white. Specific themes override surface + accents. */
body[data-theme-mode="dark"] {
  --swal2-background: #1b1b22;
  --swal2-color: var(--text, #f0f0f0);
  --swal2-border: 1px solid rgba(255, 255, 255, 0.14);
  --swal2-backdrop: rgba(0, 0, 0, 0.6);
  --swal2-footer-border-color: rgba(255, 255, 255, 0.1);
  --swal2-footer-color: var(--text-dim, rgba(255, 255, 255, 0.7));
  --swal2-close-button-color: rgba(255, 255, 255, 0.55);
  --swal2-input-background: rgba(255, 255, 255, 0.07);
  --swal2-input-border: 1px solid rgba(255, 255, 255, 0.18);
  --swal2-input-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --swal2-input-hover-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --swal2-input-focus-border: 1px solid rgba(255, 255, 255, 0.45);
  --swal2-input-focus-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
  --swal2-validation-message-background: rgba(0, 0, 0, 0.25);
  --swal2-validation-message-color: var(--text-dim, rgba(255, 255, 255, 0.75));
}

/* Light-mode baseline: Swal's defaults are already light, just align text and
   soften the backdrop so it feels native to the airy light themes. */
body[data-theme-mode="light"] {
  --swal2-color: var(--text, var(--ink, #1e293b));
  --swal2-backdrop: rgba(15, 23, 42, 0.4);
  --swal2-footer-border-color: rgba(15, 23, 42, 0.1);
  --swal2-close-button-color: rgba(15, 23, 42, 0.45);
  --swal2-validation-message-background: rgba(15, 23, 42, 0.05);
  --swal2-validation-message-color: rgba(15, 23, 42, 0.7);
}

body[data-theme="cosmic"] {
  --swal2-background: rgba(22, 14, 52, 0.92);
  --swal2-border: 1px solid var(--glass-border-strong, rgba(180, 140, 255, 0.32));
  --swal2-input-background: rgba(40, 28, 80, 0.55);
  --swal2-input-border: 1px solid var(--glass-border-strong, rgba(180, 140, 255, 0.32));
  --swal2-input-focus-border: 1px solid var(--accent-cyan, #5dd8ff);
  --swal2-input-focus-box-shadow: 0 0 0 3px rgba(93, 216, 255, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --swal2-confirm-button-background-color: #4ab9ff;
  --swal2-confirm-button-color: #0a0420;
  --swal2-cancel-button-background-color: rgba(180, 140, 255, 0.18);
  --swal2-cancel-button-color: var(--text, #f0eaff);
  --swal2-timer-progress-bar-background: rgba(93, 216, 255, 0.6);
}

body[data-theme="glass"] {
  --swal2-background: rgba(22, 30, 48, 0.88);
  --swal2-border: 1px solid var(--glass-border-strong, rgba(255, 255, 255, 0.18));
  --swal2-input-background: rgba(255, 255, 255, 0.07);
  --swal2-input-border: 1px solid var(--glass-border-strong, rgba(255, 255, 255, 0.18));
  --swal2-input-focus-border: 1px solid var(--accent, #0a84ff);
  --swal2-input-focus-box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
  --swal2-confirm-button-background-color: var(--accent, #0a84ff);
  --swal2-confirm-button-color: #fff;
  --swal2-cancel-button-background-color: rgba(255, 255, 255, 0.1);
  --swal2-cancel-button-color: var(--text, #f5f7fb);
  --swal2-timer-progress-bar-background: rgba(10, 132, 255, 0.6);
}

body[data-theme="neon"] {
  --swal2-background: rgba(20, 6, 42, 0.96);
  --swal2-border: 1px solid rgba(255, 46, 146, 0.4);
  --swal2-input-background: rgba(255, 255, 255, 0.06);
  --swal2-input-border: 1px solid rgba(255, 46, 146, 0.5);
  --swal2-input-focus-border: 1px solid var(--cyan, #00f0ff);
  --swal2-input-focus-box-shadow: 0 0 0 1px var(--cyan, #00f0ff), 0 0 20px rgba(0, 240, 255, 0.3);
  --swal2-confirm-button-background-color: var(--pink, #ff2e92);
  --swal2-confirm-button-color: #fff;
  --swal2-cancel-button-background-color: rgba(255, 255, 255, 0.1);
  --swal2-cancel-button-color: #fff;
  --swal2-timer-progress-bar-background: var(--cyan, #00f0ff);
}

body[data-theme="mono"] {
  --swal2-background: var(--bg-elev-2, #161616);
  --swal2-border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  /* One step lighter than the popup so fields read as recessed wells, same
     trick the page uses (--bg → --bg-elev-2). */
  --swal2-input-background: #1f1f1f;
  --swal2-input-border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  --swal2-input-focus-border: 1px solid var(--accent, #ffd54a);
  --swal2-input-focus-box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 213, 74, 0.18));
  --swal2-confirm-button-background-color: var(--accent, #ffd54a);
  --swal2-confirm-button-color: #111;
  --swal2-cancel-button-background-color: #2a2a2a;
  --swal2-cancel-button-color: var(--text, #f5f5f5);
  --swal2-timer-progress-bar-background: rgba(255, 213, 74, 0.6);
}

/* legacy: intentionally no dedicated block — the dark baseline above plus
   Swal's stock purple/grey buttons match its plain pre-theme look. */

body[data-theme="tailwind"] {
  --swal2-background: #fff;
  --swal2-border: 1px solid var(--border, #e2e8f0);
  --swal2-input-background: #fff;
  --swal2-input-border: 1px solid var(--border-strong, #cbd5e1);
  --swal2-input-focus-border: 1px solid var(--accent, #4f46e5);
  --swal2-input-focus-box-shadow: 0 0 0 3px var(--accent-glow, rgba(79, 70, 229, 0.18));
  --swal2-confirm-button-background-color: var(--accent, #4f46e5);
  --swal2-confirm-button-color: #fff;
  --swal2-cancel-button-background-color: #e2e8f0;
  --swal2-cancel-button-color: #334155;
  --swal2-timer-progress-bar-background: rgba(79, 70, 229, 0.5);
}

body[data-theme="cloud"] {
  --swal2-background: rgba(255, 255, 255, 0.92);
  --swal2-border: 1px solid var(--glass-border-strong, rgba(255, 255, 255, 0.9));
  --swal2-input-background: rgba(255, 255, 255, 0.75);
  /* The theme's white glass field border vanishes on an opaque white dialog,
     so use a soft slate edge here instead. */
  --swal2-input-border: 1px solid rgba(15, 23, 42, 0.14);
  --swal2-input-focus-border: 1px solid var(--accent, #0284c7);
  --swal2-input-focus-box-shadow: 0 0 0 3px var(--accent-glow, rgba(2, 132, 199, 0.16));
  --swal2-confirm-button-background-color: var(--accent, #0284c7);
  --swal2-confirm-button-color: #fff;
  --swal2-cancel-button-background-color: #e2e8f0;
  --swal2-cancel-button-color: var(--text, #0f172a);
  --swal2-timer-progress-bar-background: rgba(2, 132, 199, 0.5);
}

body[data-theme="editorial"] {
  --swal2-background: var(--bg-elev, #fdfaf3);
  --swal2-color: var(--ink, #1a1410);
  --swal2-border: 1px solid var(--rule-strong, #d4c5ac);
  --swal2-input-background: var(--bg, #f7f1e6);
  --swal2-input-border: 1px solid var(--rule-strong, #d4c5ac);
  --swal2-input-focus-border: 1px solid var(--accent, #c2410c);
  --swal2-input-focus-box-shadow: 0 0 0 3px var(--accent-glow, rgba(194, 65, 12, 0.18));
  --swal2-confirm-button-background-color: var(--accent, #c2410c);
  --swal2-confirm-button-color: #fff;
  --swal2-cancel-button-background-color: var(--bg-soft, #f1e9d9);
  --swal2-cancel-button-color: var(--ink-soft, #3d3127);
  --swal2-footer-color: var(--ink-mid, #6b5b4e);
  --swal2-timer-progress-bar-background: rgba(194, 65, 12, 0.5);
}

/* Frosted-glass dialogs for the glassmorphism themes: their --swal2-background
   values above are translucent on purpose, the blur supplies the body. Kept
   opaque enough (≥0.88) that text stays readable if backdrop-filter is
   unsupported. Toasts share .swal2-popup and get the same treatment. */
body[data-theme="cosmic"] .swal2-popup,
body[data-theme="glass"] .swal2-popup,
body[data-theme="cloud"] .swal2-popup {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Synthwave glow so neon dialogs match the page's pink-halo cards. */
body[data-theme="neon"] .swal2-popup {
  box-shadow: 0 0 36px rgba(255, 46, 146, 0.22), 0 24px 60px rgba(0, 0, 0, 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;
}