/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/theme/fonts.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* =====================================================
   LATO - Local Font Loading (from Print OS v4)
   Weights: 300 (light), 400 (regular), 700 (bold), 900 (black)
   No CDN dependency. Files in ../fonts/
   ===================================================== */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/_next/static/media/lato-300.d10ac5eb.woff2) format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/lato-400.a45560e6.woff2) format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/lato-700.dd7c6404.woff2) format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/_next/static/media/lato-900.b3e09518.woff2) format('woff2');
}
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/theme/core.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/

/* ==== GLOBAL UI SCALE SYSTEM ==== */
:root { --ui-scale: 0.85; }  /* tiny default */
html[data-size="tiny"]  { --ui-scale: 0.85; }
html[data-size="small"] { --ui-scale: 0.95; }
html[data-size="medium"]{ --ui-scale: 1.0; }
html[data-size="large"] { --ui-scale: 1.1; }
html {
    height: 100%;
    zoom: var(--ui-scale, 1);
}
/* ==== END UI SCALE ==== */

/* =====================================================
   KODI APPS THEME - CORE.CSS
   Structural foundation: resets, typography, spacing, grid
   Always loaded. Uses var() only - no hardcoded colors.
   ===================================================== */

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================== UI SCALE VARS ===================== */

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    background-color: var(--body-bg, var(--bg-primary));
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100dvh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===================== TYPOGRAPHY ===================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-4xl, 2.25rem); }
h2 { font-size: var(--font-size-3xl, 1.875rem); }
h3 { font-size: var(--font-size-2xl, 1.5rem); }
h4 { font-size: var(--font-size-xl, 1.25rem); }
h5 { font-size: var(--font-size-lg, 1.125rem); }
h6 { font-size: var(--font-size-base, 1rem); }

p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover { opacity: 0.85; }

small { font-size: var(--font-size-sm, 0.875rem); color: var(--text-tertiary); }
strong { font-weight: 700; }
code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: var(--font-size-sm, 0.875rem);
    background: var(--bg-secondary);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--border-primary);
}

pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md, 0.5rem);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}
pre code { background: none; border: none; padding: 0; }

blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--bg-secondary);
    border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
    color: var(--text-secondary);
}

hr {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 1.5rem 0;
}

/* Lists */
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; color: var(--text-secondary); }

/* ===================== LAYOUT ===================== */

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section { padding: 2rem 0; }

/* Grid System */
.grid { display: grid; gap: var(--spacing-md, 1rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--spacing-xs, 0.25rem); }
.gap-sm { gap: var(--spacing-sm, 0.5rem); }
.gap-md { gap: var(--spacing-md, 1rem); }
.gap-lg { gap: var(--spacing-lg, 1.5rem); }
.gap-xl { gap: var(--spacing-xl, 2rem); }

/* ===================== SPACING ===================== */

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; }
.mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pt-1 { padding-top: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ===================== DISPLAY ===================== */

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.invisible { visibility: hidden; }

/* ===================== TEXT ===================== */

.text-xs { font-size: var(--font-size-xs, 0.75rem); }
.text-sm { font-size: var(--font-size-sm, 0.875rem); }
.text-base { font-size: var(--font-size-base, 1rem); }
.text-lg { font-size: var(--font-size-lg, 1.125rem); }
.text-xl { font-size: var(--font-size-xl, 1.25rem); }
.text-2xl { font-size: var(--font-size-2xl, 1.5rem); }
.text-3xl { font-size: var(--font-size-3xl, 1.875rem); }
.text-4xl { font-size: var(--font-size-4xl, 2.25rem); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-tertiary); opacity: 0.7; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== BORDERS ===================== */

.rounded-sm { border-radius: var(--radius-sm, 0.25rem); }
.rounded { border-radius: var(--radius-md, 0.5rem); }
.rounded-lg { border-radius: var(--radius-lg, 0.75rem); }
.rounded-xl { border-radius: var(--radius-xl, 1rem); }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--border-primary); }
.border-2 { border: 2px solid var(--border-primary); }
.border-accent { border-color: var(--accent); }
.border-none { border: none; }

/* ===================== SHADOWS ===================== */

.shadow-sm { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1)); }
.shadow { box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15)); }
.shadow-lg { box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.2)); }
.shadow-none { box-shadow: none; }

/* ===================== TRANSITIONS ===================== */

.transition { transition: all 0.2s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.3s ease; }

/* Theme transition class (added during theme switch) */
.theme-transitioning,
.theme-transitioning * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 640px) {
    .sm\:hidden { display: none; }
    .sm\:block { display: block; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
}

/* ===================== ACCESSIBILITY ===================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===================== SCROLLBAR ===================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ===================== SELECTION ===================== */

::selection {
    background: var(--accent);
    color: var(--bg-primary);
}

/* ===================== PRINT ===================== */

@media print {
    body { background: #fff; color: #000; }
    .no-print { display: none; }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./styles/theme/themes.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/

/* =====================================================
   KODI APPS THEME - THEMES.CSS
   Complete theme system sourced from Print OS v4.
   4 themes + 11 colorways + glow token system.
   Switch via data-theme and data-colorway on <html>.
   ===================================================== */

/* ============= SHARED SIZING (all themes) ============= */
:root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-display-4: 2.75rem;
    --font-size-display-3: 3.5rem;
    --font-size-display-2: 4.5rem;
    --font-size-display-1: 6rem;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;

    /* --- Z-Index Scale (overlay stacking order) --- */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-popover:        1030;
    --z-tooltip:        1040;
    --z-toast:          1050;
    --z-modal-backdrop: 1060;
    --z-modal:          1070;
    --z-lightbox:       1080;

    /* --- Animation Timing --- */
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* =============================================================
   BLACK GLASS THEME (Default) — Dark frosted glass + Purple glow
   Merged from Print OS v4 dark + glass-pro themes.
   Colorways: ENABLED (only theme that supports colorway switching)
   ============================================================= */
:root,
[data-theme="black-glass"] {
    color-scheme: dark;

    /* --- Glow Tokens --- */
    --glow-purple: #8a53f9;
    --glow-blue:   #3b82f6;
    --glow-pink:   #ec4899;
    --glow-yellow: #facc15;
    --glow-grey:   rgba(148, 163, 184, 0.6);
    --glow-white:  rgba(255, 255, 255, 0.7);
    --ol-thick: 4px;
    --ol-med:   1px;
    --ol-btn:   3px;
    --glow-soft: 0 0 10px;
    --glow-med:  0 0 16px;

    /* --- Core Backgrounds (LOCKED 2026-04-21 — uniform 0.30 alpha, option 1) --- */
    --body-bg:          #0d1015;
    --bg-primary:       rgba(0, 0, 0, 0.55);
    --bg-secondary:     rgba(0, 0, 0, 0.55);
    --bg-tertiary:      rgba(0, 0, 0, 0.55);
    --bg-elevated:      rgba(0, 0, 0, 0.55);
    --bg-card:          rgba(0, 0, 0, 0.55);
    --bg-hover:         rgba(0, 0, 0, 0.55);
    --bg-overlay:       rgba(0, 0, 0, 0.5);
    --bg-input:         rgba(0, 0, 0, 0.55);
    --bg-accent-subtle: rgba(138, 83, 249, 0.08);

    /* --- Text --- */
    /* FIX 2026-04-21: body copy is WHITE on dark glass. Crimson is ACCENT only. */
    --text-primary:   #ffffff;
    --text-secondary: #c8cfda;
    --text-tertiary:  #8b95a8;
    --text-disabled:  #4b5468;
    --text-inverse:   #000000;

    /* --- Accent (purple default, overridden by colorway) --- */
    --accent:       #8a53f9;
    --accent-rgb:   138, 83, 249;
    --accent-hover: #a67bfa;
    --accent-dark:  #6c35d4;
    --accent-light: #c5a8fc;
    --accent-bg:    rgba(138, 83, 249, 0.12);

    /* --- Secondary Accent --- */
    --accent-2:     #8a53f9;
    --accent-2-rgb: 138, 83, 249;

    /* --- Borders (accent-tinted glass) --- */
    --border-primary:   rgba(var(--accent-rgb), 0.15);
    --border-secondary: rgba(255, 255, 255, 0.06);
    --border-input:     rgba(255, 255, 255, 0.12);

    /* --- Shadows --- */
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:     0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg:     0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-card:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 0 15px rgba(var(--accent-rgb), 0.3);
    --shadow-inset:  inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-hover:  0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-rgb), 0.15);

    /* --- Accent Glows --- */
    --glow-accent-sm: 0 0 4px rgba(var(--accent-rgb), 0.2);
    --glow-accent-md: 0 0 8px rgba(var(--accent-rgb), 0.3);
    --glow-accent-lg: 0 0 16px rgba(var(--accent-rgb), 0.4);
    --glow-accent-xl: 0 0 24px rgba(var(--accent-rgb), 0.5);

    /* --- Status Glows --- */
    --glow-danger:  0 0 8px rgba(239, 68, 68, 0.3);
    --glow-warning: 0 0 8px rgba(250, 204, 21, 0.3);
    --glow-info:    0 0 8px rgba(59, 130, 246, 0.3);
    --glow-success: 0 0 8px rgba(34, 197, 94, 0.3);

    /* --- Alerts --- */
    --alert-success-bg:     rgba(34, 197, 94, 0.12);
    --alert-success-border: #22c55e;
    --alert-success-text:   #86efac;
    --alert-info-bg:        rgba(59, 130, 246, 0.12);
    --alert-info-border:    #3b82f6;
    --alert-info-text:      #93c5fd;
    --alert-warning-bg:     rgba(250, 204, 21, 0.12);
    --alert-warning-border: #facc15;
    --alert-warning-text:   #fde047;
    --alert-error-bg:       rgba(239, 68, 68, 0.12);
    --alert-error-border:   #ef4444;
    --alert-error-text:     #fca5a5;

    /* --- Buttons --- */
    --btn-primary-bg:      var(--accent);
    --btn-primary-text:    #ffffff;
    --btn-primary-hover:   var(--accent-hover);
    --btn-secondary-bg:    #1c2029;
    --btn-secondary-text:  #e5e7eb;
    --btn-secondary-hover: #242934;
    --btn-outline-border:  var(--accent);
    --btn-outline-text:    var(--accent);
    --btn-ghost-text:      var(--text-secondary);
    --btn-ghost-hover:     rgba(255, 255, 255, 0.06);
    --btn-success-bg:      #22c55e;
    --btn-success-text:    #ffffff;
    --btn-danger-bg:       #ef4444;
    --btn-danger-text:     #ffffff;

    /* --- Badge Text Colors (light on dark) --- */
    --badge-text-blue:   #93c5fd;
    --badge-text-green:  #86efac;
    --badge-text-red:    #fca5a5;
    --badge-text-yellow: #fde047;
    --badge-text-purple: #c4b5fd;
    --badge-text-pink:   #f9a8d4;
    --badge-text-orange: #fdba74;
    --badge-opacity:     0.15;

    /* --- Tables --- */
    --table-bg:        transparent;
    --table-border:    var(--glow-white);
    --table-glow:      var(--glow-soft) var(--glow-white);
    --table-header-bg: rgba(0, 0, 0, 0.3);
    --table-row-hover: rgba(var(--accent-rgb), 0.08);
    --table-row-border: var(--glow-grey);
    --table-row-glow:  inset 0 -1px 8px var(--glow-grey);
    --table-radius:    12px;

    /* --- Forms --- */
    --input-bg:           rgba(0, 0, 0, 0.5);
    --input-border:       rgba(255, 255, 255, 0.12);
    --input-focus-border: var(--accent);
    --input-focus-glow:   0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.35);
    --input-placeholder:  #5b647a;
    --option-bg:          #1c2029;
    --toggle-bg:          #3b4255;

    /* --- Navigation --- */
    --nav-bg:           transparent;
    --nav-btn-border:   var(--glow-white);
    --nav-btn-glow:     0 0 15px var(--glow-white);
    --nav-btn-radius:   var(--radius-lg);

    /* --- Cards (medusa baseline 2026-04-21) --- */
    --container-bg:     rgba(0, 0, 0, 0.65);
    --container-blur:   none;
    --container-border: rgba(255, 255, 255, 0.08);
    --container-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-bg:     rgba(0, 0, 0, 0.65);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-blur:   none;
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-radius: var(--radius-xl);

    /* --- Misc --- */
    --divider:         rgba(148, 163, 184, 0.2);
    --scrollbar-thumb: #2a3040;
    --scrollbar-track: #000000;

    /* --- Status Colors --- */
    --color-success: #22c55e;
    --color-warning: #facc15;
    --color-danger:  #ef4444;
    --color-info:    #3b82f6;

    /* --- Chart Colors (Print OS v4) --- */
    --chart-1: hsl(220, 70%, 55%);
    --chart-2: #4ade80;
    --chart-3: hsl(30, 80%, 60%);
    --chart-4: hsl(280, 65%, 65%);
    --chart-5: hsl(340, 75%, 60%);

    /* --- Status Button Colors --- */
    --status-booked:   var(--glow-purple);
    --status-printing: var(--glow-blue);
    --status-packing:  var(--glow-pink);
    --status-done:     var(--glow-yellow);

    /* --- Summary Cells --- */
    --summary-red-bg:    rgba(127, 29, 29, 0.2);
    --summary-red-border: rgba(239, 68, 68, 0.5);
    --summary-red-text:  #fca5a5;
    --summary-blue-bg:   rgba(30, 58, 138, 0.2);
    --summary-blue-border: rgba(59, 130, 246, 0.5);
    --summary-blue-text: #93c5fd;
    --summary-green-bg:  rgba(20, 83, 45, 0.2);
    --summary-green-border: rgba(34, 197, 94, 0.5);
    --summary-green-text: #86efac;

    /* --- Badge Color Variants --- */
    --badge-blue-bg:           rgba(59, 130, 246, 0.15);
    --badge-blue-border:       rgba(59, 130, 246, 0.3);
    --badge-blue-shadow:       0 0 8px rgba(59, 130, 246, 0.2);
    --badge-blue-shadow-hover: 0 0 12px rgba(59, 130, 246, 0.35);
    --badge-green-bg:          rgba(34, 197, 94, 0.15);
    --badge-green-border:      rgba(34, 197, 94, 0.3);
    --badge-green-shadow:      0 0 8px rgba(34, 197, 94, 0.2);
    --badge-green-shadow-hover:0 0 12px rgba(34, 197, 94, 0.35);
    --badge-red-bg:            rgba(239, 68, 68, 0.15);
    --badge-red-border:        rgba(239, 68, 68, 0.3);
    --badge-red-shadow:        0 0 8px rgba(239, 68, 68, 0.2);
    --badge-red-shadow-hover:  0 0 12px rgba(239, 68, 68, 0.35);
    --badge-yellow-bg:         rgba(250, 204, 21, 0.15);
    --badge-yellow-border:     rgba(250, 204, 21, 0.3);
    --badge-yellow-shadow:     0 0 8px rgba(250, 204, 21, 0.2);
    --badge-yellow-shadow-hover:0 0 12px rgba(250, 204, 21, 0.35);
    --badge-purple-bg:         rgba(138, 83, 249, 0.15);
    --badge-purple-border:     rgba(138, 83, 249, 0.3);
    --badge-purple-shadow:     0 0 8px rgba(138, 83, 249, 0.2);
    --badge-purple-shadow-hover:0 0 12px rgba(138, 83, 249, 0.35);
    --badge-pink-bg:           rgba(236, 72, 153, 0.15);
    --badge-pink-border:       rgba(236, 72, 153, 0.3);
    --badge-pink-shadow:       0 0 8px rgba(236, 72, 153, 0.2);
    --badge-pink-shadow-hover: 0 0 12px rgba(236, 72, 153, 0.35);

    /* --- Badge Button Variants --- */
    --badge-btn-primary-bg:    rgba(var(--accent-rgb), 0.15);
    --badge-btn-primary-border:rgba(var(--accent-rgb), 0.3);
    --badge-btn-primary-text:  var(--accent-light);
    --badge-btn-primary-glow:  0 0 8px rgba(var(--accent-rgb), 0.25);
    --badge-btn-success-bg:    rgba(34, 197, 94, 0.15);
    --badge-btn-success-border:rgba(34, 197, 94, 0.3);
    --badge-btn-success-text:  #86efac;
    --badge-btn-success-glow:  0 0 8px rgba(34, 197, 94, 0.25);
    --badge-btn-info-bg:       rgba(59, 130, 246, 0.15);
    --badge-btn-info-border:   rgba(59, 130, 246, 0.3);
    --badge-btn-info-text:     #93c5fd;
    --badge-btn-info-glow:     0 0 8px rgba(59, 130, 246, 0.25);
    --badge-btn-danger-bg:     rgba(239, 68, 68, 0.15);
    --badge-btn-danger-border: rgba(239, 68, 68, 0.3);
    --badge-btn-danger-text:   #fca5a5;
    --badge-btn-danger-glow:   0 0 8px rgba(239, 68, 68, 0.25);
    --badge-btn-warning-bg:    rgba(250, 204, 21, 0.15);
    --badge-btn-warning-border:rgba(250, 204, 21, 0.3);
    --badge-btn-warning-text:  #fde047;
    --badge-btn-warning-glow:  0 0 8px rgba(250, 204, 21, 0.25);
    --badge-btn-orange-bg:     rgba(249, 115, 22, 0.15);
    --badge-btn-orange-border: rgba(249, 115, 22, 0.3);
    --badge-btn-orange-text:   #fdba74;
    --badge-btn-orange-glow:   0 0 8px rgba(249, 115, 22, 0.25);
    --badge-btn-pink-bg:       rgba(236, 72, 153, 0.15);
    --badge-btn-pink-border:   rgba(236, 72, 153, 0.3);
    --badge-btn-pink-text:     #f9a8d4;
    --badge-btn-pink-glow:     0 0 8px rgba(236, 72, 153, 0.25);

    /* --- Stat Card Variants --- */
    --stat-blue-bg:            rgba(59, 130, 246, 0.40);
    --stat-blue-border:        rgba(59, 130, 246, 0.2);
    --stat-blue-shadow:        0 0 12px rgba(59, 130, 246, 0.15);
    --stat-blue-shadow-hover:  0 0 20px rgba(59, 130, 246, 0.25);
    --stat-green-bg:           rgba(34, 197, 94, 0.40);
    --stat-green-border:       rgba(34, 197, 94, 0.2);
    --stat-green-shadow:       0 0 12px rgba(34, 197, 94, 0.15);
    --stat-green-shadow-hover: 0 0 20px rgba(34, 197, 94, 0.25);
    --stat-red-bg:             rgba(239, 68, 68, 0.40);
    --stat-red-border:         rgba(239, 68, 68, 0.2);
    --stat-red-shadow:         0 0 12px rgba(239, 68, 68, 0.15);
    --stat-red-shadow-hover:   0 0 20px rgba(239, 68, 68, 0.25);

    /* --- KPI Circle Variants --- */
    --kpi-blue-bg:             rgba(59, 130, 246, 0.1);
    --kpi-blue-border:         rgba(59, 130, 246, 0.25);
    --kpi-blue-shadow:         0 0 10px rgba(59, 130, 246, 0.2);
    --kpi-blue-shadow-hover:   0 0 16px rgba(59, 130, 246, 0.3);
    --kpi-green-bg:            rgba(34, 197, 94, 0.1);
    --kpi-green-border:        rgba(34, 197, 94, 0.25);
    --kpi-green-shadow:        0 0 10px rgba(34, 197, 94, 0.2);
    --kpi-green-shadow-hover:  0 0 16px rgba(34, 197, 94, 0.3);
    --kpi-purple-bg:           rgba(138, 83, 249, 0.1);
    --kpi-purple-border:       rgba(138, 83, 249, 0.25);
    --kpi-purple-shadow:       0 0 10px rgba(138, 83, 249, 0.2);
    --kpi-purple-shadow-hover: 0 0 16px rgba(138, 83, 249, 0.3);
    --kpi-red-bg:              rgba(239, 68, 68, 0.1);
    --kpi-red-border:          rgba(239, 68, 68, 0.25);
    --kpi-red-shadow:          0 0 10px rgba(239, 68, 68, 0.2);
    --kpi-red-shadow-hover:    0 0 16px rgba(239, 68, 68, 0.3);
    --kpi-yellow-bg:           rgba(250, 204, 21, 0.1);
    --kpi-yellow-border:       rgba(250, 204, 21, 0.25);
    --kpi-yellow-shadow:       0 0 10px rgba(250, 204, 21, 0.2);
    --kpi-yellow-shadow-hover: 0 0 16px rgba(250, 204, 21, 0.3);

    /* --- Background System --- */
    --overlay-bg:      rgba(0, 0, 0, 0.7);
    --theme-overlay:   rgba(0, 0, 0, 0.20);
}
/* =============================================================
   WHITE GLASS THEME — White frosted glass + Crimson primary
   Sourced from Print OS v4 :is(.white-glass, .light)
   Colorways: LOCKED (accent fixed to crimson)
   ============================================================= */
[data-theme="white-glass"] {
    color-scheme: light;

    /* --- Glow Tokens (subtle for light) --- */
    --glow-purple: var(--accent);
    --glow-blue:   #3b82f6;
    --glow-pink:   #ec4899;
    --glow-yellow: #facc15;
    --glow-grey:   rgba(0, 0, 0, 0.1);
    --glow-white:  rgba(0, 0, 0, 0.15);
    --ol-thick: 1px;
    --ol-med:   1px;
    --ol-btn:   2px;
    --glow-soft: 0 0 4px;
    --glow-med:  0 0 8px;

    /* --- Core Backgrounds --- */
    /* body overlay lightened again from #fbfbfb → #fefefe (2026-04-21, Miguel) — cards unchanged */
    --body-bg:          #fefefe;
    --bg-primary:       rgba(255, 255, 255, 0.60);
    --bg-secondary:     rgba(255, 255, 255, 0.60);
    --bg-tertiary:      rgba(255, 255, 255, 0.60);
    --bg-elevated:      rgba(255, 255, 255, 0.60);
    --bg-card:          rgba(255, 255, 255, 0.60);
    --bg-hover:         rgba(255, 255, 255, 0.60);
    --bg-overlay:       rgba(0, 0, 0, 0.5);
    --bg-input:         rgba(255, 255, 255, 0.60);
    --bg-accent-subtle: rgba(196, 30, 58, 0.04);

    /* --- Glass tokens (canonical aliases for shell/topbar) --- */
    --glass-bg:    rgba(255, 255, 255, 0.60);
    --glass-blur:  blur(20px) saturate(160%);
    --border-soft: rgba(0, 0, 0, 0.08);

    /* --- Text --- */
    --text-primary:   #1a1a1a;
    --text-secondary: #3f3f3f;
    --text-tertiary:  #3f3f3f;
    --text-disabled:  #cccccc;
    --text-inverse:   #ffffff;

    /* --- Accent (crimson default for light) --- */
    --accent:       #c41e3a;
    --accent-rgb:   196, 30, 58;
    --accent-hover: #d42c4d;
    --accent-dark:  #9a1830;
    --accent-light: #e57589;
    --accent-bg:    rgba(196, 30, 58, 0.06);

    /* --- Secondary Accent --- */
    --accent-2:     hsl(25, 90%, 55%);
    --accent-2-rgb: 242, 142, 38;

    /* --- Borders --- */
    --border-primary:   rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.06);
    --border-input:     rgba(0, 0, 0, 0.1);

    /* --- Shadows (subtle) --- */
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:     0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:     0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-card:   none;
    --shadow-accent: 0 2px 12px rgba(var(--accent-rgb), 0.15);
    --shadow-inset:  inset 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-hover:  0 4px 16px rgba(0, 0, 0, 0.12);

    /* --- Accent Glows (very subtle on light) --- */
    --glow-accent-sm: 0 0 4px rgba(var(--accent-rgb), 0.1);
    --glow-accent-md: 0 0 8px rgba(var(--accent-rgb), 0.15);
    --glow-accent-lg: 0 0 16px rgba(var(--accent-rgb), 0.2);
    --glow-accent-xl: 0 0 24px rgba(var(--accent-rgb), 0.25);

    /* --- Status Glows --- */
    --glow-danger:  0 0 6px rgba(239, 68, 68, 0.15);
    --glow-warning: 0 0 6px rgba(250, 204, 21, 0.15);
    --glow-info:    0 0 6px rgba(59, 130, 246, 0.15);
    --glow-success: 0 0 6px rgba(34, 197, 94, 0.15);

    /* --- Alerts --- */
    --alert-success-bg:     #e8f5e9;
    --alert-success-border: #22c55e;
    --alert-success-text:   #166534;
    --alert-info-bg:        #e3f2fd;
    --alert-info-border:    #3b82f6;
    --alert-info-text:      #1e40af;
    --alert-warning-bg:     #fff8e1;
    --alert-warning-border: #facc15;
    --alert-warning-text:   #854d0e;
    --alert-error-bg:       #ffebee;
    --alert-error-border:   #ef4444;
    --alert-error-text:     #991b1b;

    /* --- Buttons --- */
    --btn-primary-bg:      var(--accent);
    --btn-primary-text:    #ffffff;
    --btn-primary-hover:   var(--accent-hover);
    --btn-secondary-bg:    #f0f0f0;
    --btn-secondary-text:  #333333;
    --btn-secondary-hover: #e5e5e5;
    --btn-outline-border:  var(--accent);
    --btn-outline-text:    var(--accent);
    --btn-ghost-text:      var(--text-secondary);
    --btn-ghost-hover:     rgba(0, 0, 0, 0.04);
    --btn-success-bg:      #16a34a;
    --btn-success-text:    #ffffff;
    --btn-danger-bg:       #dc2626;
    --btn-danger-text:     #ffffff;

    /* --- Badge Text Colors (dark on light) --- */
    --badge-text-blue:   #1e40af;
    --badge-text-green:  #166534;
    --badge-text-red:    #991b1b;
    --badge-text-yellow: #854d0e;
    --badge-text-purple: #6b21a8;
    --badge-text-pink:   #9d174d;
    --badge-text-orange: #9a3412;
    --badge-opacity:     0.08;

    /* --- Tables --- */
    --table-bg:         transparent;
    --table-border:     rgba(0, 0, 0, 0.08);
    --table-glow:       0 2px 8px rgba(0, 0, 0, 0.06);
    --table-header-bg:  rgba(255, 255, 255, 0.3);
    --table-row-hover:  rgba(255, 255, 255, 0.3);
    --table-row-border: rgba(0, 0, 0, 0.06);
    --table-row-glow:   none;
    --table-radius:     12px;

    /* --- Forms --- */
    --input-bg:           rgba(255, 255, 255, 0.6);
    --input-border:       rgba(0, 0, 0, 0.1);
    --input-focus-border: var(--accent);
    --input-focus-glow:   0 0 0 3px rgba(var(--accent-rgb), 0.15);
    --input-placeholder:  #999999;
    --option-bg:          #f9f9f9;
    --toggle-bg:          #dddddd;

    /* --- Navigation --- */
    --nav-bg:         transparent;
    --nav-btn-border: rgba(0, 0, 0, 0.08);
    --nav-btn-glow:   0 2px 8px rgba(0, 0, 0, 0.08);
    --nav-btn-radius: var(--radius-lg);

    /* --- Cards --- */
    /* --container-* tokens kept as canonical defaults for new components (not forced on existing cards) */
    --container-bg:     rgba(255, 255, 255, 0.12);
    --container-blur:   blur(40px) saturate(180%);
    --container-border: rgba(255, 255, 255, 0.22);
    --container-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
    --card-bg:     rgba(255, 255, 255, 0.65);
    --card-border: rgba(255, 255, 255, 0.4);
    --card-blur:   blur(24px) saturate(1.4);
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
    --card-radius: var(--radius-xl);

    /* --- Misc --- */
    --divider:         rgba(0, 0, 0, 0.08);
    --scrollbar-thumb: #cccccc;
    --scrollbar-track: #f5f5f5;

    /* --- Status Colors --- */
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-danger:  #dc2626;
    --color-info:    #2563eb;

    /* --- Chart Colors --- */
    --chart-1: hsl(220, 70%, 55%);
    --chart-2: #4ade80;
    --chart-3: hsl(30, 80%, 60%);
    --chart-4: hsl(280, 65%, 65%);
    --chart-5: hsl(340, 75%, 60%);

    /* --- Status Buttons (solid fills on light) --- */
    --status-booked:   var(--accent);
    --status-printing: #2563eb;
    --status-packing:  #db2777;
    --status-done:     #facc15;

    /* --- Summary Cells (translucent tint on white-glass) --- */
    --summary-red-bg:      rgba(220, 38, 38, 0.1);
    --summary-red-border:  rgba(239, 68, 68, 0.35);
    --summary-red-text:    #991b1b;
    --summary-blue-bg:     rgba(37, 99, 235, 0.1);
    --summary-blue-border: rgba(59, 130, 246, 0.35);
    --summary-blue-text:   #1e40af;
    --summary-green-bg:    rgba(22, 163, 74, 0.1);
    --summary-green-border: rgba(34, 197, 94, 0.35);
    --summary-green-text:  #166534;

    /* --- Badge Color Variants (solid on light) --- */
    --badge-blue-bg:           rgba(59, 130, 246, 0.1);
    --badge-blue-border:       rgba(59, 130, 246, 0.2);
    --badge-blue-shadow:       0 2px 6px rgba(59, 130, 246, 0.1);
    --badge-blue-shadow-hover: 0 2px 8px rgba(59, 130, 246, 0.15);
    --badge-green-bg:          rgba(34, 197, 94, 0.1);
    --badge-green-border:      rgba(34, 197, 94, 0.2);
    --badge-green-shadow:      0 2px 6px rgba(34, 197, 94, 0.1);
    --badge-green-shadow-hover:0 2px 8px rgba(34, 197, 94, 0.15);
    --badge-red-bg:            rgba(239, 68, 68, 0.1);
    --badge-red-border:        rgba(239, 68, 68, 0.2);
    --badge-red-shadow:        0 2px 6px rgba(239, 68, 68, 0.1);
    --badge-red-shadow-hover:  0 2px 8px rgba(239, 68, 68, 0.15);
    --badge-yellow-bg:         rgba(250, 204, 21, 0.1);
    --badge-yellow-border:     rgba(250, 204, 21, 0.2);
    --badge-yellow-shadow:     0 2px 6px rgba(250, 204, 21, 0.1);
    --badge-yellow-shadow-hover:0 2px 8px rgba(250, 204, 21, 0.15);
    --badge-purple-bg:         rgba(138, 83, 249, 0.1);
    --badge-purple-border:     rgba(138, 83, 249, 0.2);
    --badge-purple-shadow:     0 2px 6px rgba(138, 83, 249, 0.1);
    --badge-purple-shadow-hover:0 2px 8px rgba(138, 83, 249, 0.15);
    --badge-pink-bg:           rgba(236, 72, 153, 0.1);
    --badge-pink-border:       rgba(236, 72, 153, 0.2);
    --badge-pink-shadow:       0 2px 6px rgba(236, 72, 153, 0.1);
    --badge-pink-shadow-hover: 0 2px 8px rgba(236, 72, 153, 0.15);

    --badge-btn-primary-bg:    rgba(var(--accent-rgb), 0.1);
    --badge-btn-primary-border:rgba(var(--accent-rgb), 0.2);
    --badge-btn-primary-text:  var(--accent);
    --badge-btn-primary-glow:  0 2px 6px rgba(var(--accent-rgb), 0.12);
    --badge-btn-success-bg:    rgba(22, 163, 74, 0.1);
    --badge-btn-success-border:rgba(22, 163, 74, 0.2);
    --badge-btn-success-text:  #166534;
    --badge-btn-success-glow:  none;
    --badge-btn-info-bg:       rgba(37, 99, 235, 0.1);
    --badge-btn-info-border:   rgba(37, 99, 235, 0.2);
    --badge-btn-info-text:     #1e40af;
    --badge-btn-info-glow:     none;
    --badge-btn-danger-bg:     rgba(220, 38, 38, 0.1);
    --badge-btn-danger-border: rgba(220, 38, 38, 0.2);
    --badge-btn-danger-text:   #991b1b;
    --badge-btn-danger-glow:   none;
    --badge-btn-warning-bg:    rgba(202, 138, 4, 0.1);
    --badge-btn-warning-border:rgba(202, 138, 4, 0.2);
    --badge-btn-warning-text:  #854d0e;
    --badge-btn-warning-glow:  none;
    --badge-btn-orange-bg:     rgba(234, 88, 12, 0.1);
    --badge-btn-orange-border: rgba(234, 88, 12, 0.2);
    --badge-btn-orange-text:   #9a3412;
    --badge-btn-orange-glow:   none;
    --badge-btn-pink-bg:       rgba(219, 39, 119, 0.1);
    --badge-btn-pink-border:   rgba(219, 39, 119, 0.2);
    --badge-btn-pink-text:     #9d174d;
    --badge-btn-pink-glow:     none;

    --stat-blue-bg:            rgba(59, 130, 246, 0.60);
    --stat-blue-border:        rgba(59, 130, 246, 0.15);
    --stat-blue-shadow:        0 2px 8px rgba(59, 130, 246, 0.40);
    --stat-blue-shadow-hover:  0 4px 12px rgba(59, 130, 246, 0.12);
    --stat-green-bg:           rgba(34, 197, 94, 0.60);
    --stat-green-border:       rgba(34, 197, 94, 0.15);
    --stat-green-shadow:       0 2px 8px rgba(34, 197, 94, 0.40);
    --stat-green-shadow-hover: 0 4px 12px rgba(34, 197, 94, 0.12);
    --stat-red-bg:             rgba(239, 68, 68, 0.60);
    --stat-red-border:         rgba(239, 68, 68, 0.15);
    --stat-red-shadow:         0 2px 8px rgba(239, 68, 68, 0.40);
    --stat-red-shadow-hover:   0 4px 12px rgba(239, 68, 68, 0.12);

    --kpi-blue-bg:             rgba(59, 130, 246, 0.40);
    --kpi-blue-border:         rgba(59, 130, 246, 0.15);
    --kpi-blue-shadow:         0 2px 6px rgba(59, 130, 246, 0.40);
    --kpi-blue-shadow-hover:   0 2px 10px rgba(59, 130, 246, 0.12);
    --kpi-green-bg:            rgba(34, 197, 94, 0.40);
    --kpi-green-border:        rgba(34, 197, 94, 0.15);
    --kpi-green-shadow:        0 2px 6px rgba(34, 197, 94, 0.40);
    --kpi-green-shadow-hover:  0 2px 10px rgba(34, 197, 94, 0.12);
    --kpi-purple-bg:           rgba(138, 83, 249, 0.06);
    --kpi-purple-border:       rgba(138, 83, 249, 0.15);
    --kpi-purple-shadow:       0 2px 6px rgba(138, 83, 249, 0.08);
    --kpi-purple-shadow-hover: 0 2px 10px rgba(138, 83, 249, 0.12);
    --kpi-red-bg:              rgba(239, 68, 68, 0.40);
    --kpi-red-border:          rgba(239, 68, 68, 0.15);
    --kpi-red-shadow:          0 2px 6px rgba(239, 68, 68, 0.40);
    --kpi-red-shadow-hover:    0 2px 10px rgba(239, 68, 68, 0.12);
    --kpi-yellow-bg:           rgba(250, 204, 21, 0.06);
    --kpi-yellow-border:       rgba(250, 204, 21, 0.15);
    --kpi-yellow-shadow:       0 2px 6px rgba(250, 204, 21, 0.08);
    --kpi-yellow-shadow-hover: 0 2px 10px rgba(250, 204, 21, 0.12);

    /* --- Background System --- */
    /* MEDUSA RESTORE 2026-04-21: white tint over video on white-glass. */
    --overlay-bg:      rgba(255, 255, 255, 0.7);
    --theme-overlay:   rgba(255, 255, 255, 0.65);
}
/* =============================================================
   HOMEBREW THEME — Terminal green on dark
   Sourced from Print OS v4 .homebrew
   ============================================================= */
[data-theme="homebrew"] {
    color-scheme: dark;

    /* --- Glow Tokens (all green) --- */
    --glow-purple: #00ff00;
    --glow-blue:   #00cc00;
    --glow-pink:   #00ff00;
    --glow-yellow: #00cc00;
    --glow-grey:   rgba(0, 255, 0, 0.15);
    --glow-white:  rgba(0, 255, 0, 0.2);
    --ol-thick: 1px;
    --ol-med:   1px;
    --ol-btn:   1px;
    --glow-soft: 0 0 6px;
    --glow-med:  0 0 12px;

    /* --- Core --- */
    --bg-primary:       #0d1117;
    --bg-secondary:     #0a0e14;
    --bg-tertiary:      #111820;
    --bg-elevated:      #151d27;
    --bg-card:          rgba(0, 255, 0, 0.03);
    --bg-hover:         rgba(0, 255, 0, 0.06);
    --bg-overlay:       #0d1117;
    --bg-input:         rgba(0, 0, 0, 0.6);
    --bg-accent-subtle: rgba(0, 255, 0, 0.04);

    /* --- Text (green) --- */
    --text-primary:   #00ff00;
    --text-secondary: #00cc00;
    --text-tertiary:  #008800;
    --text-disabled:  #005500;
    --text-inverse:   #000000;

    /* --- Accent (green) --- */
    --accent:       #00ff00;
    --accent-rgb:   0, 255, 0;
    --accent-hover: #33ff33;
    --accent-dark:  #00aa00;
    --accent-light: #66ff66;
    --accent-bg:    rgba(0, 255, 0, 0.12);
    --accent-2:     #00cc00;
    --accent-2-rgb: 0, 204, 0;

    /* --- Borders --- */
    --border-primary:   rgba(0, 255, 0, 0.2);
    --border-secondary: rgba(0, 255, 0, 0.1);
    --border-input:     rgba(0, 255, 0, 0.3);

    /* --- Shadows --- */
    --shadow-sm:     0 0 4px rgba(0, 255, 0, 0.05);
    --shadow-md:     0 0 8px rgba(0, 255, 0, 0.08);
    --shadow-lg:     0 0 16px rgba(0, 255, 0, 0.1);
    --shadow-card:   0 0 8px rgba(0, 255, 0, 0.05);
    --shadow-accent: 0 0 12px rgba(0, 255, 0, 0.2);
    --shadow-inset:  none;
    --shadow-hover:  0 0 12px rgba(0, 255, 0, 0.1);

    --glow-accent-sm: 0 0 4px rgba(0, 255, 0, 0.15);
    --glow-accent-md: 0 0 8px rgba(0, 255, 0, 0.25);
    --glow-accent-lg: 0 0 16px rgba(0, 255, 0, 0.35);
    --glow-accent-xl: 0 0 24px rgba(0, 255, 0, 0.45);
    --glow-danger:    0 0 8px rgba(255, 0, 0, 0.3);
    --glow-warning:   0 0 8px rgba(0, 204, 0, 0.3);
    --glow-info:      0 0 8px rgba(0, 255, 0, 0.3);
    --glow-success:   0 0 8px rgba(0, 255, 0, 0.3);

    /* --- Alerts --- */
    --alert-success-bg:     rgba(0, 255, 0, 0.08);
    --alert-success-border: rgba(0, 255, 0, 0.3);
    --alert-success-text:   #00ff00;
    --alert-info-bg:        rgba(0, 204, 0, 0.08);
    --alert-info-border:    rgba(0, 204, 0, 0.3);
    --alert-info-text:      #00cc00;
    --alert-warning-bg:     rgba(0, 170, 0, 0.08);
    --alert-warning-border: rgba(0, 170, 0, 0.3);
    --alert-warning-text:   #00aa00;
    --alert-error-bg:       rgba(255, 0, 0, 0.08);
    --alert-error-border:   rgba(255, 0, 0, 0.3);
    --alert-error-text:     #ff4444;

    /* --- Buttons --- */
    --btn-primary-bg:      transparent;
    --btn-primary-text:    #00ff00;
    --btn-primary-hover:   rgba(0, 255, 0, 0.06);
    --btn-secondary-bg:    rgba(0, 0, 0, 0.3);
    --btn-secondary-text:  #00ff00;
    --btn-secondary-hover: rgba(0, 255, 0, 0.06);
    --btn-outline-border:  rgba(0, 255, 0, 0.4);
    --btn-outline-text:    #00ff00;
    --btn-ghost-text:      #00cc00;
    --btn-ghost-hover:     rgba(0, 255, 0, 0.04);
    --btn-success-bg:      rgba(0, 255, 100, 0.12);
    --btn-success-text:    #00ff64;
    --btn-danger-bg:       rgba(255, 0, 0, 0.12);
    --btn-danger-text:     #ff4444;

    /* --- Badges (all green variants) --- */
    --badge-text-blue:   #00cc00;
    --badge-text-green:  #00ff00;
    --badge-text-red:    #ff4444;
    --badge-text-yellow: #00cc00;
    --badge-text-purple: #00ff00;
    --badge-text-pink:   #00aa00;
    --badge-text-orange: #00cc00;
    --badge-opacity:     0.1;

    /* --- Tables --- */
    --table-bg:         transparent;
    --table-border:     rgba(0, 255, 0, 0.2);
    --table-glow:       0 0 6px rgba(0, 255, 0, 0.05);
    --table-header-bg:  rgba(0, 255, 0, 0.04);
    --table-row-hover:  rgba(0, 255, 0, 0.06);
    --table-row-border: rgba(0, 255, 0, 0.1);
    --table-row-glow:   none;
    --table-radius:     0px;

    /* --- Forms --- */
    --input-bg:           rgba(0, 0, 0, 0.6);
    --input-border:       rgba(0, 255, 0, 0.3);
    --input-focus-border: #00ff00;
    --input-focus-glow:   0 0 8px rgba(0, 255, 0, 0.3), 0 0 16px rgba(0, 255, 0, 0.1);
    --input-placeholder:  #005500;
    --option-bg:          rgba(0, 0, 0, 0.6);
    --toggle-bg:          rgba(0, 255, 0, 0.2);

    /* --- Navigation --- */
    --nav-bg:         transparent;
    --nav-btn-border: rgba(0, 255, 0, 0.2);
    --nav-btn-glow:   0 0 6px rgba(0, 255, 0, 0.1);
    --nav-btn-radius: 0px;

    /* --- Cards --- */
    /* --container-* tokens kept as canonical defaults (not forced on existing cards) */
    --container-bg:     rgba(0, 0, 0, 0.30);
    --container-blur:   none;
    --container-border: rgba(0, 255, 0, 0.20);
    --container-shadow: 0 0 8px rgba(0, 255, 0, 0.08);
    --card-bg:     rgba(0, 255, 0, 0.03);
    --card-border: rgba(0, 255, 0, 0.20);
    --card-blur:   none;
    --card-shadow: 0 0 8px rgba(0, 255, 0, 0.08);
    --card-radius: 0px;

    /* --- Misc --- */
    --divider:         rgba(0, 255, 0, 0.15);
    --scrollbar-thumb: rgba(0, 255, 0, 0.3);
    --scrollbar-track: #0d1117;

    /* --- Status Colors --- */
    --color-success: #00ff00;
    --color-warning: #00cc00;
    --color-danger:  #ff4444;
    --color-info:    #00ff00;

    /* --- Status Buttons (green variants) --- */
    --status-booked:   rgba(0, 255, 0, 0.4);
    --status-printing: rgba(0, 204, 0, 0.4);
    --status-packing:  rgba(0, 170, 0, 0.4);
    --status-done:     rgba(0, 255, 100, 0.4);

    /* --- Summary Cells --- */
    --summary-red-bg:      rgba(0, 255, 0, 0.08);
    --summary-red-border:  rgba(0, 255, 0, 0.3);
    --summary-red-text:    #00ff00;
    --summary-blue-bg:     rgba(0, 204, 0, 0.08);
    --summary-blue-border: rgba(0, 204, 0, 0.3);
    --summary-blue-text:   #00cc00;
    --summary-green-bg:    rgba(0, 255, 100, 0.08);
    --summary-green-border: rgba(0, 255, 100, 0.3);
    --summary-green-text:  #00ff64;

    /* --- Badge/Stat/KPI (green terminal) --- */
    --badge-blue-bg: rgba(0,255,0,0.08); --badge-blue-border: rgba(0,255,0,0.2); --badge-blue-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-blue-shadow-hover: 0 0 8px rgba(0,255,0,0.2);
    --badge-green-bg: rgba(0,255,0,0.08); --badge-green-border: rgba(0,255,0,0.2); --badge-green-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-green-shadow-hover: 0 0 8px rgba(0,255,0,0.2);
    --badge-red-bg: rgba(255,0,0,0.08); --badge-red-border: rgba(255,0,0,0.2); --badge-red-shadow: 0 0 4px rgba(255,0,0,0.1); --badge-red-shadow-hover: 0 0 8px rgba(255,0,0,0.2);
    --badge-yellow-bg: rgba(0,204,0,0.08); --badge-yellow-border: rgba(0,204,0,0.2); --badge-yellow-shadow: 0 0 4px rgba(0,204,0,0.1); --badge-yellow-shadow-hover: 0 0 8px rgba(0,204,0,0.2);
    --badge-purple-bg: rgba(0,255,0,0.08); --badge-purple-border: rgba(0,255,0,0.2); --badge-purple-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-purple-shadow-hover: 0 0 8px rgba(0,255,0,0.2);
    --badge-pink-bg: rgba(0,170,0,0.08); --badge-pink-border: rgba(0,170,0,0.2); --badge-pink-shadow: 0 0 4px rgba(0,170,0,0.1); --badge-pink-shadow-hover: 0 0 8px rgba(0,170,0,0.2);
    --badge-btn-primary-bg: rgba(0,255,0,0.08); --badge-btn-primary-border: rgba(0,255,0,0.3); --badge-btn-primary-text: #00ff00; --badge-btn-primary-glow: 0 0 6px rgba(0,255,0,0.2);
    --badge-btn-success-bg: rgba(0,255,0,0.08); --badge-btn-success-border: rgba(0,255,0,0.3); --badge-btn-success-text: #00ff00; --badge-btn-success-glow: 0 0 6px rgba(0,255,0,0.2);
    --badge-btn-info-bg: rgba(0,204,0,0.08); --badge-btn-info-border: rgba(0,204,0,0.3); --badge-btn-info-text: #00cc00; --badge-btn-info-glow: 0 0 6px rgba(0,204,0,0.2);
    --badge-btn-danger-bg: rgba(255,0,0,0.08); --badge-btn-danger-border: rgba(255,0,0,0.3); --badge-btn-danger-text: #ff4444; --badge-btn-danger-glow: 0 0 6px rgba(255,0,0,0.2);
    --badge-btn-warning-bg: rgba(0,170,0,0.08); --badge-btn-warning-border: rgba(0,170,0,0.3); --badge-btn-warning-text: #00aa00; --badge-btn-warning-glow: 0 0 6px rgba(0,170,0,0.2);
    --badge-btn-orange-bg: rgba(0,204,0,0.08); --badge-btn-orange-border: rgba(0,204,0,0.3); --badge-btn-orange-text: #00cc00; --badge-btn-orange-glow: 0 0 6px rgba(0,204,0,0.2);
    --badge-btn-pink-bg: rgba(0,170,0,0.08); --badge-btn-pink-border: rgba(0,170,0,0.3); --badge-btn-pink-text: #00aa00; --badge-btn-pink-glow: 0 0 6px rgba(0,170,0,0.2);
    --stat-blue-bg: rgba(0,255,0,0.04); --stat-blue-border: rgba(0,255,0,0.15); --stat-blue-shadow: 0 0 6px rgba(0,255,0,0.08); --stat-blue-shadow-hover: 0 0 10px rgba(0,255,0,0.15);
    --stat-green-bg: rgba(0,255,0,0.04); --stat-green-border: rgba(0,255,0,0.15); --stat-green-shadow: 0 0 6px rgba(0,255,0,0.08); --stat-green-shadow-hover: 0 0 10px rgba(0,255,0,0.15);
    --stat-red-bg: rgba(255,0,0,0.04); --stat-red-border: rgba(255,0,0,0.15); --stat-red-shadow: 0 0 6px rgba(255,0,0,0.08); --stat-red-shadow-hover: 0 0 10px rgba(255,0,0,0.15);
    --kpi-blue-bg: rgba(0,204,0,0.06); --kpi-blue-border: rgba(0,204,0,0.2); --kpi-blue-shadow: 0 0 6px rgba(0,204,0,0.1); --kpi-blue-shadow-hover: 0 0 10px rgba(0,204,0,0.2);
    --kpi-green-bg: rgba(0,255,0,0.06); --kpi-green-border: rgba(0,255,0,0.2); --kpi-green-shadow: 0 0 6px rgba(0,255,0,0.1); --kpi-green-shadow-hover: 0 0 10px rgba(0,255,0,0.2);
    --kpi-purple-bg: rgba(0,255,0,0.06); --kpi-purple-border: rgba(0,255,0,0.2); --kpi-purple-shadow: 0 0 6px rgba(0,255,0,0.1); --kpi-purple-shadow-hover: 0 0 10px rgba(0,255,0,0.2);
    --kpi-red-bg: rgba(255,0,0,0.06); --kpi-red-border: rgba(255,0,0,0.2); --kpi-red-shadow: 0 0 6px rgba(255,0,0,0.1); --kpi-red-shadow-hover: 0 0 10px rgba(255,0,0,0.2);
    --kpi-yellow-bg: rgba(0,204,0,0.06); --kpi-yellow-border: rgba(0,204,0,0.2); --kpi-yellow-shadow: 0 0 6px rgba(0,204,0,0.1); --kpi-yellow-shadow-hover: 0 0 10px rgba(0,204,0,0.2);

    /* --- Force square corners --- */
    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-xl:   0;
    --radius-2xl:  0;
    --radius-full: 0;
}

/* =============================================================
   JUST-GLASS THEME — pure translucent, no tint, heavy blur.
   Source pattern: kodi-apps-theme-medusa/templates/dark-glass.html
   + kodi-apps-theme-html/templates/light-glass.html — merged as
   neutral "just glass" with no color push.
   ============================================================= */
[data-theme="just-glass"] {
    color-scheme: dark;
    --bg-primary:   #2a2e38;
    --bg-secondary: #1f232c;
    --bg-tertiary:  #242833;
    --bg-elevated:  rgba(255, 255, 255, 0.08);
    --bg-card:      rgba(255, 255, 255, 0.06);
    --bg-hover:     rgba(255, 255, 255, 0.10);
    --bg-overlay:   rgba(0, 0, 0, 0.4);
    --bg-input:     rgba(255, 255, 255, 0.06);
    --bg-accent-subtle: rgba(255, 255, 255, 0.05);

    --text-primary:   #ffffff;
    --text-secondary: rgba(255,255,255,0.75);
    --text-tertiary:  rgba(255,255,255,0.55);
    --text-disabled:  rgba(255,255,255,0.30);
    --text-inverse:   #000000;

    --accent:       #c41e3a;
    --accent-rgb:   196, 30, 58;
    --accent-hover: #d42c4d;
    --accent-dark:  #9a1830;
    --accent-light: #e57589;
    --accent-bg:    rgba(255, 255, 255, 0.08);
    --accent-2:     #ffffff;
    --accent-2-rgb: 255, 255, 255;

    --border-primary:   rgba(255, 255, 255, 0.15);
    --border-secondary: rgba(255, 255, 255, 0.08);
    --border-input:     rgba(255, 255, 255, 0.18);

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.45);
    --shadow-card: 0 10px 40px rgba(0,0,0,0.45);
    --shadow-accent: 0 0 20px rgba(255,255,255,0.15);
    --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.15);
    --shadow-hover:  0 12px 48px rgba(0,0,0,0.55);

    --glass-blur: 28px;
    /* --container-* tokens kept as canonical defaults (not forced on existing cards) */
    --container-bg:     rgba(255, 255, 255, 0.06);
    --container-blur:   blur(28px) saturate(140%);
    --container-border: rgba(255, 255, 255, 0.15);
    --container-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.15);
    --card-blur: blur(28px) saturate(140%);
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    --card-radius: var(--radius-xl);
    --nav-btn-radius: var(--radius-lg);

    --btn-primary-bg:      rgba(255,255,255,0.14);
    --btn-primary-text:    #ffffff;
    --btn-primary-hover:   rgba(255,255,255,0.22);
    --btn-outline-border:  rgba(255,255,255,0.35);
    --btn-outline-text:    #ffffff;

    --input-focus-border: rgba(255,255,255,0.55);
    --input-focus-glow:   0 0 0 3px rgba(255,255,255,0.10);
}
[data-theme="just-glass"] body {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(255,255,255,0.05) 0%, transparent 50%),
        var(--bg-primary);
}
[data-theme="just-glass"] .card,
[data-theme="just-glass"] .glass-card,
[data-theme="just-glass"] .module-card,
[data-theme="just-glass"] .stat-card,
[data-theme="just-glass"] .kpi-card,
[data-theme="just-glass"] .nav-card,
[data-theme="just-glass"] .app-card,
[data-theme="just-glass"] .product-card,
[data-theme="just-glass"] .v4-module,
[data-theme="just-glass"] .data-table,
[data-theme="just-glass"] .people-card,
[data-theme="just-glass"] .machine-card,
[data-theme="just-glass"] .wizard-card {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* JUST-GLASS container glow-outline (match black-glass treatment).
   Accent-tinted 1px ring + soft outer accent glow on all container classes.
   Keeps translucent base, only adds outline + glow. */
[data-theme="just-glass"] .card,
[data-theme="just-glass"] .glass-card,
[data-theme="just-glass"] .module-card,
[data-theme="just-glass"] .depth-card,
[data-theme="just-glass"] .depth-panel,
[data-theme="just-glass"] .stat-card,
[data-theme="just-glass"] .kpi-card,
[data-theme="just-glass"] .nav-card,
[data-theme="just-glass"] .app-card,
[data-theme="just-glass"] .product-card,
[data-theme="just-glass"] .v4-module {
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(var(--accent-rgb), 0.25),
        0 0 20px rgba(var(--accent-rgb), 0.25),
        0 8px 32px rgba(0, 0, 0, 0.45);
}
[data-theme="just-glass"] .card:hover,
[data-theme="just-glass"] .glass-card:hover,
[data-theme="just-glass"] .module-card:hover,
[data-theme="just-glass"] .depth-card:hover,
[data-theme="just-glass"] .depth-panel:hover,
[data-theme="just-glass"] .stat-card:hover,
[data-theme="just-glass"] .kpi-card:hover,
[data-theme="just-glass"] .nav-card:hover,
[data-theme="just-glass"] .app-card:hover,
[data-theme="just-glass"] .product-card:hover,
[data-theme="just-glass"] .v4-module:hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(var(--accent-rgb), 0.45),
        0 0 28px rgba(var(--accent-rgb), 0.4),
        0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   JUST-GLASS depth treatments — ports visionOS depth features
   (specular top-edge, parallax stack, glow orb, HUD tile) onto
   just-glass's neutral base. No prismatic backdrop — Miguel wants
   just-glass to keep its clean translucent feel + gain depth polish.
   ============================================================ */
[data-theme="just-glass"] .depth-card,
[data-theme="just-glass"] .depth-panel,
[data-theme="just-glass"] .depth-pill,
[data-theme="just-glass"] .glass-card,
[data-theme="just-glass"] .module-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(var(--accent-rgb), 0.25),
        0 0 20px rgba(var(--accent-rgb), 0.20),
        0 8px 32px rgba(0, 0, 0, 0.55);
}
/* Specular top-edge highlight via ::before on containers */
[data-theme="just-glass"] .depth-card,
[data-theme="just-glass"] .depth-panel,
[data-theme="just-glass"] .glass-card,
[data-theme="just-glass"] .module-card {
    position: relative;
    overflow: hidden;
}
[data-theme="just-glass"] .depth-card::before,
[data-theme="just-glass"] .depth-panel::before,
[data-theme="just-glass"] .glass-card::before,
[data-theme="just-glass"] .module-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--bg-card) 0%, transparent 42%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="just-glass"] .depth-card > *,
[data-theme="just-glass"] .depth-panel > *,
[data-theme="just-glass"] .glass-card > *,
[data-theme="just-glass"] .module-card > * {
    position: relative;
    z-index: 1;
}
/* depth-stack parallax layers on just-glass */
[data-theme="just-glass"] .depth-stack > .depth-stack-layer {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 0 0 1px rgba(var(--accent-rgb), 0.20),
        0 20px 60px rgba(0, 0, 0, 0.35);
}
[data-theme="just-glass"] .depth-stack > .depth-stack-layer:nth-child(3) {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 0 1px rgba(var(--accent-rgb), 0.35),
        0 0 22px rgba(var(--accent-rgb), 0.28),
        0 30px 80px rgba(0, 0, 0, 0.45);
}
/* depth-orb glowing radial on just-glass (accent-tinted) */
[data-theme="just-glass"] .depth-orb {
    background:
        radial-gradient(circle at 32% 30%,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.25) 30%,
            rgba(var(--accent-rgb), 0.18) 60%,
            rgba(var(--accent-rgb), 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 -6px 10px rgba(var(--accent-rgb), 0.25),
        0 0 0 1px rgba(var(--accent-rgb), 0.40),
        0 0 22px rgba(var(--accent-rgb), 0.50),
        0 0 40px rgba(var(--accent-rgb), 0.30),
        0 8px 24px rgba(0, 0, 0, 0.35);
}
[data-theme="just-glass"] .depth-orb:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -6px 10px rgba(var(--accent-rgb), 0.35),
        0 0 0 1px rgba(var(--accent-rgb), 0.60),
        0 0 28px rgba(var(--accent-rgb), 0.70),
        0 0 56px rgba(var(--accent-rgb), 0.50),
        0 12px 32px rgba(0, 0, 0, 0.45);
}
/* depth-HUD-tile on just-glass */
[data-theme="just-glass"] .depth-HUD-tile {
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

/* UNIFIED CONTAINER RADIUS — port visionOS 22px roundness to the other glass
   themes so all container classes read as one family. */
[data-theme="black-glass"] .card,
[data-theme="black-glass"] .glass-card,
[data-theme="black-glass"] .module-card,
[data-theme="black-glass"] .stat-card,
[data-theme="black-glass"] .kpi-card,
[data-theme="black-glass"] .nav-card,
[data-theme="black-glass"] .app-card,
[data-theme="black-glass"] .product-card,
[data-theme="black-glass"] .v4-module,
[data-theme="white-glass"] .card,
[data-theme="white-glass"] .glass-card,
[data-theme="white-glass"] .module-card,
[data-theme="white-glass"] .stat-card,
[data-theme="white-glass"] .kpi-card,
[data-theme="white-glass"] .nav-card,
[data-theme="white-glass"] .app-card,
[data-theme="white-glass"] .product-card,
[data-theme="white-glass"] .v4-module,
[data-theme="just-glass"] .card,
[data-theme="just-glass"] .glass-card,
[data-theme="just-glass"] .module-card,
[data-theme="just-glass"] .stat-card,
[data-theme="just-glass"] .kpi-card,
[data-theme="just-glass"] .nav-card,
[data-theme="just-glass"] .app-card,
[data-theme="just-glass"] .product-card,
[data-theme="just-glass"] .v4-module {
    border-radius: 22px;
}

/* =============================================================
   WHITE-GLASS / BLACK-GLASS container overrides STRIPPED 2026-04-21.
   Cards fall back to var(--bg-card) from the theme token block.
   No backdrop-filter on cards per medusa baseline.
   ============================================================= */

/* =============================================================
   Reusable depth components (visionOS-pattern modules)
   Translucent white glass. Bright specular top edge. Ambient halo.
   ============================================================= */
.depth-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.10);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 0 0 1px rgba(255,255,255,0.08),
        0 8px 22px rgba(120,120,220,0.22);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    font-weight: 600;
    font-size: 0.8125rem;
    position: relative;
    overflow: hidden;
}
.depth-pill::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 45%);
    pointer-events: none;
}
.depth-panel {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px;
    padding: 1rem;
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 0 1px rgba(255,255,255,0.10),
        0 20px 60px rgba(120,120,220,0.25);
    color: var(--text-primary, #fff);
}
.depth-panel::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--bg-card) 0%, transparent 38%);
    pointer-events: none;
}
.depth-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px;
    padding: 1rem;
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 0 1px rgba(255,255,255,0.10),
        0 22px 64px rgba(120,120,220,0.28);
    color: var(--text-primary, #fff);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.depth-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--bg-card) 0%, transparent 42%);
    pointer-events: none;
}
.depth-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.50),
        0 0 0 1px rgba(255,255,255,0.18),
        0 30px 90px rgba(140,120,240,0.40);
}

/* =============================================================
   SIGNATURE DEPTH MODULES (base styling — active under just-glass)
   ============================================================= */

/* 1. Stacked depth-stack — 3 layered translucent panels with parallax spacing */
.depth-stack {
    position: relative;
    padding: 2.25rem 1.5rem;
    min-height: 190px;
    isolation: isolate;
}
.depth-stack > .depth-stack-layer {
    position: absolute;
    left: 50%;
    border-radius: 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 0 0 1px rgba(255,255,255,0.08),
        0 20px 60px rgba(120,120,220,0.22);
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.depth-stack > .depth-stack-layer:nth-child(1) {
    width: 72%; height: 54%;
    top: 10%;
    transform: translateX(-50%) translateZ(0) scale(0.88);
    opacity: 0.55;
    filter: blur(0.5px);
}
.depth-stack > .depth-stack-layer:nth-child(2) {
    width: 84%; height: 70%;
    top: 22%;
    transform: translateX(-50%) scale(0.95);
    opacity: 0.8;
}
.depth-stack > .depth-stack-layer:nth-child(3) {
    width: 92%; height: 82%;
    top: 16%;
    transform: translateX(-50%) scale(1);
    background: rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 0 0 1px rgba(255,255,255,0.14),
        0 30px 80px rgba(140,120,240,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
}
.depth-stack:hover > .depth-stack-layer:nth-child(1) { transform: translateX(-50%) scale(0.82) translateY(-6px); }
.depth-stack:hover > .depth-stack-layer:nth-child(2) { transform: translateX(-50%) scale(0.93) translateY(-3px); }
.depth-stack:hover > .depth-stack-layer:nth-child(3) { transform: translateX(-50%) scale(1.02) translateY(0); }

/* 2. Glow orb control (like visionOS window handles) */
.depth-orb {
    display: inline-block;
    width: 44px; height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 30%, rgba(200,180,255,0.18) 60%, rgba(120,100,220,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.80),
        inset 0 -6px 10px rgba(120,100,220,0.25),
        0 0 18px rgba(200,180,255,0.55),
        0 0 38px rgba(140,120,240,0.35),
        0 8px 24px rgba(80,60,160,0.30);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.depth-orb::after {
    content: "";
    position: absolute;
    top: 18%; left: 22%;
    width: 36%; height: 22%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.9) 0%, transparent 70%);
    pointer-events: none;
}
.depth-orb:hover {
    transform: scale(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -6px 10px rgba(140,120,240,0.35),
        0 0 26px rgba(220,200,255,0.75),
        0 0 56px rgba(160,140,255,0.55),
        0 12px 32px rgba(100,80,200,0.40);
}

/* =============================================================
   COLORWAYS — Independent accent color overrides
   Applied on top of any theme via data-colorway attribute.
   ============================================================= */

/* Crimson (June brand red) */
[data-colorway="crimson"] {
    --accent:       #c41e3a;
    --accent-rgb:   196, 30, 58;
    --accent-hover: #d42c4d;
    --accent-dark:  #9a1830;
    --accent-light: #e57589;
    --accent-bg:    rgba(196, 30, 58, 0.12);
}

/* NOTE: Month-named colorways (february/march/july/october/december) removed
   2026-04-21. Use season-named equivalents: valentine, spring, summer, autumn,
   holiday. See data/colorway_audit.md. */

/* Navy Professional */
[data-colorway="navy"] {
    --accent:       #2563eb;
    --accent-rgb:   37, 99, 235;
    --accent-hover: #3b82f6;
    --accent-dark:  #1d4ed8;
    --accent-light: #93c5fd;
    --accent-bg:    rgba(37, 99, 235, 0.12);
}

/* Forest Green */
[data-colorway="forest"] {
    --accent:       #16a34a;
    --accent-rgb:   22, 163, 74;
    --accent-hover: #22c55e;
    --accent-dark:  #15803d;
    --accent-light: #86efac;
    --accent-bg:    rgba(22, 163, 74, 0.12);
}

/* Sunset Orange */
[data-colorway="sunset"] {
    --accent:       #f97316;
    --accent-rgb:   249, 115, 22;
    --accent-hover: #fb923c;
    --accent-dark:  #ea580c;
    --accent-light: #fdba74;
    --accent-bg:    rgba(249, 115, 22, 0.12);
}

/* Gold */
[data-colorway="gold"] {
    --accent:       #eab308;
    --accent-rgb:   234, 179, 8;
    --accent-hover: #facc15;
    --accent-dark:  #ca8a04;
    --accent-light: #fde047;
    --accent-bg:    rgba(234, 179, 8, 0.12);
}

/* Rose */
[data-colorway="rose"] {
    --accent:       #e11d48;
    --accent-rgb:   225, 29, 72;
    --accent-hover: #fb7185;
    --accent-dark:  #be123c;
    --accent-light: #fda4af;
    --accent-bg:    rgba(225, 29, 72, 0.12);
}




/* ===================== AMBIENT GLOW ===================== */
/* Layered radial gradients on body background (Print OS v4 signature).
   Adapts to colorways via --accent-rgb. Three-point glow for depth. */

[data-theme="black-glass"] body {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%),
        var(--bg-primary);
}

/* White glass: accent ambient glow (reversed to 0.04/0.03 — Miguel: MORE translucent) */
[data-theme="white-glass"] body {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--accent-rgb), 0.04) 0%, transparent 50%),
        var(--bg-primary);
}

/* Retro + Homebrew: solid bg only, no glow */
/* =============================================================
   BACKGROUND SYSTEM — Image/Video backgrounds for glass themes
   Controlled via data-bg-mode attribute on <html>.
   Both Black Glass and White Glass support bg image/video.
   ============================================================= */
.theme-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.theme-bg-image,
.theme-bg-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: none;
}

.theme-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--theme-overlay);
    pointer-events: none;
}

/* Show media based on bg mode */
[data-bg-mode="image"] .theme-bg-image { display: block; }
[data-bg-mode="video"] .theme-bg-video { display: block; }
[data-bg-mode="solid"] .theme-bg { display: none; }

/* Body must be transparent when a media backdrop is active, otherwise
   the video/image sits behind an opaque body and the glass looks solid.
   Uses `background:` shorthand + html+data-theme+data-colorway selectors to
   beat the colorway body-gradient rules that also use the shorthand. */
html[data-bg-mode="video"] body,
html[data-bg-mode="image"] body,
html[data-bg-mode="video"][data-theme] body,
html[data-bg-mode="image"][data-theme] body,
html[data-bg-mode="video"][data-theme][data-colorway] body,
html[data-bg-mode="image"][data-theme][data-colorway] body {
    background: transparent !important;
}


/* Black-glass auto video: always show video layer when black-glass is active
   (regardless of data-bg-mode, unless explicitly solid) */
[data-theme="black-glass"]:not([data-bg-mode="image"]) .theme-bg { display: block; }
[data-theme="black-glass"]:not([data-bg-mode="image"]) .theme-bg-video {
    display: block;
    opacity: 0.70;
}
[data-theme="black-glass"]:not([data-bg-mode="image"]) .theme-bg-overlay {
    background: rgba(0, 0, 0, 0.20);
}



/* =============================================================
   SEASONAL COLORWAYS — Layer on top of white-glass
   Pattern: [data-colorway="X"] sets accent tokens.
   Base-theme specific body backgrounds via combo selectors.
   ============================================================= */

/* --- Spring: soft pastels (sage / peach / butter) --- */
[data-colorway="spring"] {
    --accent:       #84b98c;
    --accent-rgb:   132, 185, 140;
    --accent-hover: #9bc9a2;
    --accent-dark:  #5e9a68;
    --accent-light: #c7e2cc;
    --accent-bg:    rgba(132, 185, 140, 0.12);
    --accent-2:     #f8b890;
    --accent-2-rgb: 248, 184, 144;
    --accent-3:     #f9e89a;
}
[data-theme="white-glass"][data-colorway="spring"] body {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(132, 185, 140, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(248, 184, 144, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(249, 232, 154, 0.18) 0%, transparent 55%),
        #fdfaf3;
}
/* --- Summer: bright aqua / coral / sun-yellow --- */
[data-colorway="summer"] {
    --accent:       #06b6d4;
    --accent-rgb:   6, 182, 212;
    --accent-hover: #22d3ee;
    --accent-dark:  #0891b2;
    --accent-light: #67e8f9;
    --accent-bg:    rgba(6, 182, 212, 0.12);
    --accent-2:     #fb7185;
    --accent-2-rgb: 251, 113, 133;
    --accent-3:     #fcd34d;
}
[data-theme="white-glass"][data-colorway="summer"] body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(6, 182, 212, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(251, 113, 133, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(252, 211, 77, 0.22) 0%, transparent 55%),
        #f0fbfd;
}
/* --- Autumn: burnt-orange / rust / olive / amber --- */
[data-colorway="autumn"] {
    --accent:       #c2410c;
    --accent-rgb:   194, 65, 12;
    --accent-hover: #ea580c;
    --accent-dark:  #9a3412;
    --accent-light: #fdba74;
    --accent-bg:    rgba(194, 65, 12, 0.12);
    --accent-2:     #a16207;
    --accent-2-rgb: 161, 98, 7;
    --accent-3:     #84cc16;
}
[data-theme="white-glass"][data-colorway="autumn"] body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(194, 65, 12, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(161, 98, 7, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(132, 204, 22, 0.15) 0%, transparent 55%),
        #fbf6ef;
}
/* --- Winter: icy-blue / silver / frost-white / navy --- */
[data-colorway="winter"] {
    --accent:       #60a5fa;
    --accent-rgb:   96, 165, 250;
    --accent-hover: #93c5fd;
    --accent-dark:  #1e3a8a;
    --accent-light: #dbeafe;
    --accent-bg:    rgba(96, 165, 250, 0.12);
    --accent-2:     #94a3b8;
    --accent-2-rgb: 148, 163, 184;
    --accent-3:     #1e3a8a;
}
[data-theme="white-glass"][data-colorway="winter"] body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(96, 165, 250, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(148, 163, 184, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(30, 58, 138, 0.10) 0%, transparent 55%),
        #f5f9fd;
}
/* --- Holiday: crimson / evergreen / gold (December) --- */
[data-colorway="holiday"] {
    --accent:       #b91c1c;
    --accent-rgb:   185, 28, 28;
    --accent-hover: #dc2626;
    --accent-dark:  #7f1d1d;
    --accent-light: #fca5a5;
    --accent-bg:    rgba(185, 28, 28, 0.12);
    --accent-2:     #166534;
    --accent-2-rgb: 22, 101, 52;
    --accent-3:     #ca8a04;
}
[data-theme="white-glass"][data-colorway="holiday"] body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(185, 28, 28, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(22, 101, 52, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(202, 138, 4, 0.18) 0%, transparent 55%),
        #fbf5ef;
}
/* --- Valentine: rose / pink / blush (February) --- */
[data-colorway="valentine"] {
    --accent:       #e11d48;
    --accent-rgb:   225, 29, 72;
    --accent-hover: #f43f5e;
    --accent-dark:  #9f1239;
    --accent-light: #fecdd3;
    --accent-bg:    rgba(225, 29, 72, 0.12);
    --accent-2:     #f472b6;
    --accent-2-rgb: 244, 114, 182;
    --accent-3:     #fda4af;
}
[data-theme="white-glass"][data-colorway="valentine"] body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(225, 29, 72, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(244, 114, 182, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(253, 164, 175, 0.20) 0%, transparent 55%),
        #fdf5f7;
}

/* ============================================================
   MEDUSA GLASS-FAMILY NORMALIZATION — 2026-04-21 (expanded)
   Only GLASS-family containers get forced to --bg-card. Solid-fill
   components (buttons, pills, badges, stat-card, product-card,
   kpi-card, machine-card, wizard-card, avatars,
   status chips, colored summary cells) keep their intentional
   solid colors — they're visual hierarchy, not glass.
   people-card moved to glass list 2026-04-21 (Miguel).

   Role-based tokens:
     --bg-card    = 0.65 glass (cards, table surfaces)
     --bg-input   = lighter glass (inputs, search, code blocks)
     --bg-overlay = darker glass (modals, dropdowns, popovers)
   ============================================================ */

/* -- Glass containers → --bg-card ---------------------------- */
[data-theme="white-glass"] .card,
[data-theme="white-glass"] .glass-card,
[data-theme="white-glass"] .module-card,
[data-theme="white-glass"] .v4-module,
[data-theme="white-glass"] .nav-card,
[data-theme="white-glass"] .app-card,
[data-theme="white-glass"] .depth-card,
[data-theme="white-glass"] .depth-panel,
[data-theme="white-glass"] .kanban-column,
[data-theme="white-glass"] .kanban-card.glass,
[data-theme="white-glass"] .table-frame,
[data-theme="white-glass"] .spreadsheet-wrapper,
[data-theme="white-glass"] .people-card,
[data-theme="black-glass"] .card,
[data-theme="black-glass"] .glass-card,
[data-theme="black-glass"] .module-card,
[data-theme="black-glass"] .v4-module,
[data-theme="black-glass"] .nav-card,
[data-theme="black-glass"] .app-card,
[data-theme="black-glass"] .depth-card,
[data-theme="black-glass"] .depth-panel,
[data-theme="black-glass"] .kanban-column,
[data-theme="black-glass"] .kanban-card.glass,
[data-theme="black-glass"] .table-frame,
[data-theme="black-glass"] .spreadsheet-wrapper,
[data-theme="black-glass"] .people-card {
    background: var(--bg-card) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* -- Tables → --bg-card surface; cells inherit transparent -- */
[data-theme="white-glass"] .data-table,
[data-theme="white-glass"] .spreadsheet,
[data-theme="white-glass"] table.glass,
[data-theme="black-glass"] .data-table,
[data-theme="black-glass"] .spreadsheet,
[data-theme="black-glass"] table.glass {
    background: var(--bg-card) !important;
}
/* 2026-04-21: plain .table inside .table-frame is transparent — frame carries the 0.55 bg */
[data-theme="white-glass"] .table,
[data-theme="black-glass"] .table {
    background: transparent !important;
}
[data-theme="white-glass"] .data-table thead,
[data-theme="white-glass"] .data-table tbody tr,
[data-theme="black-glass"] .data-table thead,
[data-theme="black-glass"] .data-table tbody tr {
    background: var(--bg-card) !important;
}
[data-theme="white-glass"] .data-table th,
[data-theme="white-glass"] .data-table td,
[data-theme="white-glass"] .spreadsheet th,
[data-theme="white-glass"] .spreadsheet td,
[data-theme="black-glass"] .data-table th,
[data-theme="black-glass"] .data-table td,
[data-theme="black-glass"] .spreadsheet th,
[data-theme="black-glass"] .spreadsheet td {
    background: transparent !important;
}
[data-theme="white-glass"] .data-table tbody tr:nth-child(even),
[data-theme="black-glass"] .data-table tbody tr:nth-child(even) {
    background: rgba(var(--accent-rgb), 0.03) !important;
}

/* -- Inputs / textareas / selects / code → --bg-input -------- */
[data-theme="white-glass"] input[type="text"],
[data-theme="white-glass"] input[type="email"],
[data-theme="white-glass"] input[type="password"],
[data-theme="white-glass"] input[type="search"],
[data-theme="white-glass"] input[type="number"],
[data-theme="white-glass"] input[type="url"],
[data-theme="white-glass"] input[type="tel"],
[data-theme="white-glass"] textarea,
[data-theme="white-glass"] select,
[data-theme="white-glass"] .input,
[data-theme="white-glass"] .form-input,
[data-theme="white-glass"] .text-field,
[data-theme="white-glass"] .search-bar,
[data-theme="white-glass"] .filter-pill.glass,
[data-theme="white-glass"] pre.code,
[data-theme="white-glass"] pre.glass,
[data-theme="white-glass"] code.block,
[data-theme="black-glass"] input[type="text"],
[data-theme="black-glass"] input[type="email"],
[data-theme="black-glass"] input[type="password"],
[data-theme="black-glass"] input[type="search"],
[data-theme="black-glass"] input[type="number"],
[data-theme="black-glass"] input[type="url"],
[data-theme="black-glass"] input[type="tel"],
[data-theme="black-glass"] textarea,
[data-theme="black-glass"] select,
[data-theme="black-glass"] .input,
[data-theme="black-glass"] .form-input,
[data-theme="black-glass"] .text-field,
[data-theme="black-glass"] .search-bar,
[data-theme="black-glass"] .filter-pill.glass,
[data-theme="black-glass"] pre.code,
[data-theme="black-glass"] pre.glass,
[data-theme="black-glass"] code.block {
    background: var(--bg-input) !important;
}

/* -- Overlays (modals, dropdowns, popovers) → --bg-overlay --- */
[data-theme="white-glass"] .modal,
[data-theme="white-glass"] .modal-content,
[data-theme="white-glass"] .dialog,
[data-theme="white-glass"] .lightbox-content,
[data-theme="white-glass"] .dropdown-menu,
[data-theme="white-glass"] .popover,
[data-theme="white-glass"] .tooltip,
[data-theme="white-glass"] .context-menu,
[data-theme="black-glass"] .modal,
[data-theme="black-glass"] .modal-content,
[data-theme="black-glass"] .dialog,
[data-theme="black-glass"] .lightbox-content,
[data-theme="black-glass"] .dropdown-menu,
[data-theme="black-glass"] .popover,
[data-theme="black-glass"] .tooltip,
[data-theme="black-glass"] .context-menu {
    background: var(--bg-overlay) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* -- White-glass heading/title enforcement → pure black -------- */
[data-theme="white-glass"] h1,
[data-theme="white-glass"] h2,
[data-theme="white-glass"] h3,
[data-theme="white-glass"] h4,
[data-theme="white-glass"] h5,
[data-theme="white-glass"] h6,
[data-theme="white-glass"] .section-title,
[data-theme="white-glass"] .card-title,
[data-theme="white-glass"] .module-title,
[data-theme="white-glass"] .demo-section-title,
[data-theme="white-glass"] .page-title,
[data-theme="white-glass"] .module-grid-title,
[data-theme="white-glass"] .heading,
[data-theme="white-glass"] .header-title,
[data-theme="white-glass"] .modal-title,
[data-theme="white-glass"] .alert-title,
[data-theme="white-glass"] .toast-title,
[data-theme="white-glass"] .confirm-title,
[data-theme="white-glass"] .bottom-sheet-title,
[data-theme="white-glass"] .notification-popup-title,
[data-theme="white-glass"] .sidebar-section-title,
[data-theme="white-glass"] .settings-group-title,
[data-theme="white-glass"] .widget-title,
[data-theme="white-glass"] .activity-title,
[data-theme="white-glass"] .item-title,
[data-theme="white-glass"] .mini-card-title,
[data-theme="white-glass"] .mock-card-title,
[data-theme="white-glass"] .mock-title,
[data-theme="white-glass"] .modules-showcase-title,
[data-theme="white-glass"] .hf-heading,
[data-theme="white-glass"] .v3-heading,
[data-theme="white-glass"] .view-heading,
[data-theme="white-glass"] .selector-heading,
[data-theme="white-glass"] [class*="-title"],
[data-theme="white-glass"] [class*="-heading"] {
  color: #000000 !important;
}

/* =========================================================
   LOCKED 2026-04-22 — Black-glass card borders REMOVED (option B).
   Covers every card/panel/frame/column class-like container.
   Buttons, badges, chips, tags, pills keep their borders (sized ui elements).
   ========================================================= */
[data-theme="black-glass"] .card,
[data-theme="black-glass"] .module-card,
[data-theme="black-glass"] .stat-card,
[data-theme="black-glass"] .kpi-card,
[data-theme="black-glass"] .nav-card,
[data-theme="black-glass"] .app-card,
[data-theme="black-glass"] .glass-card,
[data-theme="black-glass"] .people-card,
[data-theme="black-glass"] .machine-card,
[data-theme="black-glass"] .spinner-card,
[data-theme="black-glass"] .depth-card,
[data-theme="black-glass"] .depth-panel,
[data-theme="black-glass"] .v4-module,
[data-theme="black-glass"] .kanban-column,
[data-theme="black-glass"] .kanban-card,
[data-theme="black-glass"] .table-frame,
[data-theme="black-glass"] .spreadsheet-wrapper,
[data-theme="black-glass"] .product-card {
    border: none !important;
}

/* Extend option B — stragglers pass 2026-04-22 */
[data-theme="black-glass"] .tsc-row,
[data-theme="black-glass"] .prompt-block,
[data-theme="black-glass"] .appshell-demo,
[data-theme="black-glass"] .heroframe-demo,
[data-theme="black-glass"] .skeleton-card { border: none !important; }

/* Kill inline-styled inner mockup borders inside cards by nulling
   --border-primary within the card context on black-glass. Buttons/chips use
   solid rgb() directly and are unaffected. Popover/modal/dropdown live
   outside cards and keep their borders. */
[data-theme="black-glass"] .card,
[data-theme="black-glass"] .module-card {
    --border-primary:   transparent;
    --border-secondary: transparent;
}

/* Remove white/grey outlines + colored glows on black-glass containers 2026-04-22 */
[data-theme="black-glass"] .depth-pill,
[data-theme="black-glass"] .depth-card,
[data-theme="black-glass"] .depth-panel,
[data-theme="black-glass"] .depth-orb,
[data-theme="black-glass"] .depth-stack-layer,
[data-theme="black-glass"] .depth-hud-tile,
[data-theme="black-glass"] .user-chip,
[data-theme="black-glass"] .settings-row { border: none !important; }

/* Remove colored ambient glows on container-level elements */
[data-theme="black-glass"] .stat-card,
[data-theme="black-glass"] .kpi-card,
[data-theme="black-glass"] .table-frame,
[data-theme="black-glass"] .machine-card,
[data-theme="black-glass"] .machine-card.online,
[data-theme="black-glass"] .tr-glow,
[data-theme="black-glass"] .depth-pill,
[data-theme="black-glass"] .depth-card,
[data-theme="black-glass"] .depth-panel,
[data-theme="black-glass"] .depth-orb,
[data-theme="black-glass"] .depth-stack-layer,
[data-theme="black-glass"] .people-card,
[data-theme="black-glass"] .app-card,
[data-theme="black-glass"] .nav-card,
[data-theme="black-glass"] .module-card,
[data-theme="black-glass"] .card { box-shadow: none !important; }

/* Null border-secondary inside cards too (catches 0.06 white inner divs) */
[data-theme="black-glass"] .card,
[data-theme="black-glass"] .module-card { --border-secondary: transparent; }

/* Pass 3 — kill remaining red outlines on plain divs (color swatches, demo sections) on black-glass.
   Nulls --border-primary at theme root. Buttons/chips using raw rgb() stay intact.
   Also kills 3px white ring on .btn-icon. */
[data-theme="black-glass"] {
    --border-primary: transparent !important;
}
[data-theme="black-glass"] .btn.btn-icon { border: none !important; }

/* Pass 4 — final white outline: .modal-color .color-swatch 2px ring (modals.css:120) */
[data-theme="black-glass"] .modal-color .color-swatch { border: none !important; }



/* Pass 7 FINAL — the actual thick white outline: .spreadsheet th/td grid cells
   were using --table-border = rgba(255,255,255,0.7) on black-glass. Kill it. */
[data-theme="black-glass"] { --table-glow: none !important; --table-row-glow: none !important; --table-border: rgba(255,255,255,0.15) !important; }

/* White-glass: match black-glass — kill outer table-frame + spreadsheet-wrapper border */
[data-theme="white-glass"] .table-frame,
[data-theme="white-glass"] .spreadsheet-wrapper { border: none !important; box-shadow: none !important; }

/* KPI-mini uniform 0.30 on both glass themes (Miguel 2026-04-22) */
[data-theme="white-glass"] .kpi-mini.red   { background: rgba(220, 38, 38, 0.60) !important; }
[data-theme="white-glass"] .kpi-mini.blue  { background: rgba(37, 99, 235, 0.60) !important; }
[data-theme="white-glass"] .kpi-mini.green { background: rgba(22, 163, 74, 0.60) !important; }

/* KPI uniformity pass 2026-04-22 — Analytics section alphas matched */
/* kpi-circle + summary-cell + bar-chart bars all match stat-card alpha */

/* black-glass → 0.40 across all KPI-family bgs */
[data-theme="black-glass"] .kpi-circle.blue   { background: rgba(37, 99, 235, 0.40) !important; }
[data-theme="black-glass"] .kpi-circle.green  { background: rgba(22, 163, 74, 0.40) !important; }
[data-theme="black-glass"] .kpi-circle.purple { background: rgba(var(--accent-rgb), 0.40) !important; }
[data-theme="black-glass"] .kpi-circle.red    { background: rgba(220, 38, 38, 0.40) !important; }
[data-theme="black-glass"] .kpi-circle.yellow { background: rgba(245, 158, 11, 0.40) !important; }
[data-theme="black-glass"] .summary-red   { background: rgba(220, 38, 38, 0.40) !important; }
[data-theme="black-glass"] .summary-blue  { background: rgba(37, 99, 235, 0.40) !important; }
[data-theme="black-glass"] .summary-green { background: rgba(22, 163, 74, 0.40) !important; }
[data-theme="black-glass"] .bar-chart .bar.red,
[data-theme="black-glass"] .bar-chart .bar-red    { background: rgba(220, 38, 38, 0.40) !important; }
[data-theme="black-glass"] .bar-chart .bar.blue,
[data-theme="black-glass"] .bar-chart .bar-blue   { background: rgba(37, 99, 235, 0.40) !important; }
[data-theme="black-glass"] .bar-chart .bar.green,
[data-theme="black-glass"] .bar-chart .bar-green  { background: rgba(22, 163, 74, 0.40) !important; }

/* white-glass → 0.60 across all KPI-family bgs */
[data-theme="white-glass"] .summary-red   { background: rgba(220, 38, 38, 0.60) !important; }
[data-theme="white-glass"] .summary-blue  { background: rgba(37, 99, 235, 0.60) !important; }
[data-theme="white-glass"] .summary-green { background: rgba(22, 163, 74, 0.60) !important; }
[data-theme="white-glass"] .bar-chart .bar.red,
[data-theme="white-glass"] .bar-chart .bar-red    { background: rgba(220, 38, 38, 0.60) !important; }
[data-theme="white-glass"] .bar-chart .bar.blue,
[data-theme="white-glass"] .bar-chart .bar-blue   { background: rgba(37, 99, 235, 0.60) !important; }
[data-theme="white-glass"] .bar-chart .bar.green,
[data-theme="white-glass"] .bar-chart .bar-green  { background: rgba(22, 163, 74, 0.60) !important; }

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#000;--bg2:#0a0a0a;--bg3:#161616;
  --purple:#8b5cf6;--pb:#a78bfa;--ph:#c084fc;--pd:#5b21b6;
  --gold:#d4af37;--cyan:#22d3ee;--green:#4ade80;--red:#ef4444;
  --text:#fff;--t2:#aaa;--t3:#666;
  --brd:rgba(255,255,255,0.1);--brd2:rgba(255,255,255,0.05);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-theme="black-glass"],html[data-theme="black"]{
  --bg:#000;--bg2:#0a0a0a;--bg3:#161616;
  --text:#fff;--t2:#aaa;--t3:#666;
  --brd:rgba(255,255,255,0.1);--brd2:rgba(255,255,255,0.05);
}
html[data-theme="light"]{
  --bg:#f7f7fb;--bg2:#fff;--bg3:#ececf4;
  --text:#08080b;--t2:#3f3f4a;--t3:#777786;
  --brd:rgba(0,0,0,0.12);--brd2:rgba(0,0,0,0.06);
}
html,body{height:100%;margin:0}
body{background:var(--bg-primary,var(--bg,#000));color:var(--text-primary,var(--text,#fff));font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow:hidden}
html[data-theme] body{background:var(--bg-primary,var(--bg,#000)) !important;color:var(--text-primary,var(--text,#fff))}
button,input,textarea{font:inherit}
a{color:inherit}
.app{height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.top{height:28px;flex-shrink:0;display:flex;align-items:center;padding:0 10px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--brd2);position:relative}
.top-back{font-size:10px;font-weight:700;color:var(--purple);cursor:pointer;position:absolute;left:10px;text-decoration:none}
.top-logo{font-size:12px;font-weight:800;letter-spacing:0;margin:0 auto;text-decoration:none}.top-logo span{color:var(--purple)}
.top-r{position:absolute;right:10px;display:flex;align-items:center;gap:6px}
.top-i{font-size:11px;cursor:pointer;color:var(--t2)}
.gpu-btn{font-size:6px;font-weight:700;padding:2px 5px;border-radius:3px;border:none;cursor:pointer;background:rgba(239,68,68,.1);color:var(--red)}
.theme-pill{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--bg3);border:1px solid var(--brd2)}
.theme-pill button{border:0;border-radius:999px;background:transparent;color:var(--t3);font-size:6px;font-weight:800;padding:2px 5px;cursor:pointer}
.theme-pill button.active{background:var(--purple);color:#fff}
.pages{flex:1 1;overflow:hidden;position:relative}
.pg{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(80px + var(--safe-b))}
.pg::-webkit-scrollbar{display:none}.pad{padding:10px 12px}.gen-page-wrap{max-width:880px;margin:0 auto}
.gen-page,[data-route="sfw"] .pad,[data-route="nsfw"] .pad,[data-route="generate"] .pad{max-width:880px;margin:0 auto}
.sh{font-size:8px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin:8px 0 4px}
.dot{width:5px;height:5px;border-radius:50%}.dot.done{background:var(--green)}.dot.miss{background:var(--t3)}.dot.gen{background:var(--cyan);animation:pulse 1.5s infinite}.dot.q{background:var(--gold)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.btn-p{padding:5px 12px;border-radius:7px;font-size:9px;font-weight:700;border:none;cursor:pointer;background:var(--purple);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-s{padding:5px 12px;border-radius:7px;font-size:9px;font-weight:700;cursor:pointer;background:var(--bg3);border:1px solid var(--brd);color:var(--text);text-decoration:none}
.stats{display:flex;gap:1px;border-radius:10px;overflow:hidden;background:var(--brd2)}
.sc{flex:1 1;padding:10px 6px;text-align:center;background:var(--bg2)}.sc .n{font-size:16px;font-weight:900;letter-spacing:0}.sc .l{font-size:6px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}.sc .n.pu{color:var(--pb)}.sc .n.gr{color:var(--green)}.sc .n.cy{color:var(--cyan)}.sc .n.go{color:var(--gold)}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hc{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;border-radius:14px;background:var(--bg2);border:1px solid var(--brd2);cursor:pointer;transition:all .12s;text-decoration:none}.hc:active{transform:scale(.96);background:var(--bg3)}.hc-i{font-size:24px;margin-bottom:4px}.hc-l{font-size:9px;font-weight:700}.hc-s{font-size:6px;color:var(--t3);margin-top:1px}
.cr{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}.cr::-webkit-scrollbar{display:none}.ch{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;cursor:pointer;text-decoration:none}.ch-ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.ch-ring-bg{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--purple) var(--prog),var(--bg3) var(--prog));padding:2.5px}.ch-ring-bg::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--bg)}.ch-inner{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:17px}.ch-n{font-size:7px;font-weight:600;color:var(--t2);text-align:center}.ch.add .ch-ring-bg{background:none;border:1.5px dashed var(--t3)}.ch.add .ch-ring-bg::after{display:none}.ch.add .ch-inner{background:transparent;font-size:18px;color:var(--purple)}
.ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}.ch-g{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;text-decoration:none}.ch-g-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.ch-g-ring .bg{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--purple) var(--prog),var(--bg3) var(--prog));padding:3px}.ch-g-ring .bg::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg)}.ch-g-inner{width:54px;height:54px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:22px}.ch-g-n{font-size:8px;font-weight:700;color:var(--text);text-align:center}.ch-g-ct{font-size:6px;color:var(--t3)}.ch-g.add .bg{background:none;border:2px dashed rgba(139,92,246,.3)}.ch-g.add .bg::after{display:none}.ch-g.add .ch-g-inner{background:var(--bg3);font-size:26px;color:var(--purple)}
@media(min-width:1024px){.ch-grid{grid-template-columns:repeat(5,1fr);gap:14px}}
@media(min-width:1280px){.ch-grid{grid-template-columns:repeat(6,1fr)}}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.gc{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--bg3)}.gc:not(:has(img)){aspect-ratio:1;background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--t3)}.gc:not(:has(img))::before{content:"no image"}.gc .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--t3);text-align:center;line-height:1.2}.gc .bd{position:absolute;top:3px;right:3px;font-size:6px;font-weight:800;padding:1px 3px;border-radius:2px}.gc .bd.ok{background:rgba(74,222,128,.8);color:#000}.gc .bd.pe{background:rgba(212,175,55,.8);color:#000}
.pf-header{display:flex;gap:12px;align-items:center;margin-bottom:6px}.pf-pic{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative}.pf-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--purple) var(--prog),rgba(255,255,255,.06) var(--prog))}.pf-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg)}.pf-pic .em{position:relative;z-index:1;width:58px;height:58px;margin:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:26px}.pf-right{flex:1 1}.pf-stats{display:flex;gap:0;margin-bottom:3px}.pf-si{flex:1 1;text-align:center}.pf-sn{font-size:14px;font-weight:800}.pf-sl{font-size:6px;color:var(--t3)}.pf-btns{display:flex;gap:4px}.pf-b{flex:1 1;padding:5px;border-radius:6px;font-size:8px;font-weight:700;text-align:center;cursor:pointer;border:none;text-decoration:none}.pf-b.pri{background:var(--purple);color:#fff}.pf-b.sec{background:var(--bg3);color:var(--text)}.pf-name{font-size:12px;font-weight:800}.pf-bio{font-size:9px;color:var(--t2);line-height:1.3;margin-top:1px}
.id-section{margin-top:8px;padding:8px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd2)}.id-title{font-size:8px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.id-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.id-card{padding:6px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid var(--brd2)}.id-card-l{font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--purple);margin-bottom:2px}.id-card-v{font-size:8px;color:var(--t2);line-height:1.2}
.stack-section{margin-top:6px;padding:8px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd2)}.stack-title{font-size:8px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}.stack-item{display:flex;justify-content:space-between;padding:3px 6px;border-radius:4px;background:rgba(255,255,255,.02);border:1px solid var(--brd2)}.stack-item-name{font-size:7px;font-weight:600;color:var(--t2)}.stack-item-val{font-size:7px;font-weight:800;color:var(--pb)}.stack-item.locked{border-color:rgba(212,175,55,.2)}.stack-item.locked .stack-item-val{color:var(--gold)}
.prompt-box{padding:6px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid var(--brd2);font-size:7px;color:var(--t3);line-height:1.3;max-height:30px;overflow:hidden;cursor:pointer;margin-top:4px}.prompt-box.exp{max-height:none}.ptabs{display:flex;border-bottom:1px solid var(--brd2);margin:6px 0 4px}.ptab{flex:1 1;padding:6px;text-align:center;font-size:8px;font-weight:700;color:var(--t3);cursor:pointer;border:0;border-bottom:1.5px solid transparent;background:transparent}.ptab.a{color:var(--text);border-color:var(--text)}
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pk{padding:8px 6px;border-radius:8px;background:var(--bg2);border:1px solid var(--brd2);cursor:pointer;text-align:center}.pk:active{transform:scale(.97);border-color:var(--purple)}.pk-e{font-size:18px;margin-bottom:2px}.pk-n{font-size:8px;font-weight:800;margin-bottom:1px}.pk-m{font-size:6px;color:var(--t3)}.pk-bar{height:2px;border-radius:1px;background:var(--bg3);margin-top:4px;overflow:hidden}.pk-fl{height:100%;background:var(--purple)}
.qi{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--brd2)}.qi-th{width:28px;height:28px;border-radius:6px;background:var(--bg3);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px}.qi-inf{flex:1 1;min-width:0}.qi-t{font-size:8px;font-weight:700}.qi-s{font-size:6px;color:var(--t3);margin-top:1px}.qi-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.qi-st{font-size:6px;font-weight:700;display:flex;align-items:center;gap:2px;color:var(--t3)}.qi-acts{display:flex;gap:3px}.qi-a{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;border:none;cursor:pointer;background:var(--bg3);color:#fff}
.gen-char{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd2);margin-bottom:8px;cursor:pointer}.gen-char-pic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:14px;border:2px solid rgba(139,92,246,.2);flex-shrink:0}.gen-char-nm{font-size:10px;font-weight:800}.gen-char-sub{font-size:7px;color:var(--t2)}.gen-char-change{font-size:7px;color:var(--purple);font-weight:700;margin-left:auto}.gen-prompt-wrap,.gen-neg-wrap{margin-bottom:8px}.gen-prompt-label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;color:var(--purple)}.gen-neg-label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;color:var(--red)}.gen-prompt,.gen-neg{width:100%;padding:8px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--brd);color:var(--text);font-size:9px;line-height:1.4;resize:none;min-height:56px}.gen-prompt:focus,.gen-neg:focus{outline:none;border-color:var(--purple)}.gen-prompt::placeholder,.gen-neg::placeholder{color:var(--t3)}.gen-neg{border-color:rgba(239,68,68,.12);color:var(--t2)}.gen-row{margin-bottom:8px}.gen-label{font-size:7px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.opt-circles{display:flex;gap:8px;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}.opt-circles::-webkit-scrollbar{display:none}.oc{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;cursor:pointer;background:transparent;border:0;color:inherit}.oc-img{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid var(--bg3);display:flex;align-items:center;justify-content:center;background:var(--bg3);transition:all .12s}.oc-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;background:linear-gradient(135deg,rgba(139,92,246,.08),var(--bg3))}.oc.sel .oc-img{border-color:var(--purple);box-shadow:0 0 8px rgba(139,92,246,.2)}.oc-n{font-size:6px;font-weight:600;color:var(--t3);text-align:center;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc.sel .oc-n{color:var(--pb)}.gen-btn{width:100%;padding:12px;border-radius:10px;font-size:13px;font-weight:800;text-align:center;cursor:pointer;border:none;background:var(--purple);color:#fff;box-shadow:0 4px 16px rgba(139,92,246,.25)}
.wiz{display:flex;flex-direction:column;height:100%}.wiz-bar{height:2px;background:var(--bg3);flex-shrink:0}.wiz-fl{height:100%;background:var(--purple);transition:width .3s}.wiz-body{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 14px;text-align:center;min-height:calc(100dvh - 120px)}.wiz-step{font-size:7px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}.wiz-q{font-size:18px;font-weight:900;letter-spacing:0;margin-bottom:12px;line-height:1.2}.wiz-opts{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:320px}.wo{padding:7px 13px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;background:var(--bg2);border:1.5px solid var(--brd);color:var(--t2);transition:all .1s}.wo:active{transform:scale(.97)}.wo.sel{background:rgba(139,92,246,.08);border-color:var(--purple);color:var(--pb)}.wiz-input{width:100%;max-width:280px;padding:10px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd);color:var(--text);font-size:14px;font-weight:700;text-align:center}.wiz-input:focus{outline:none;border-color:var(--purple)}.wiz-foot{flex-shrink:0;padding:8px 14px calc(8px + var(--safe-b));display:flex;gap:6px;border-top:1px solid var(--brd2)}.wiz-btn{flex:1 1;padding:10px;border-radius:10px;font-size:11px;font-weight:800;text-align:center;cursor:pointer;border:none}.wiz-btn.bk{background:var(--bg3);color:var(--t2)}.wiz-btn.nx{background:var(--purple);color:#fff}
.build-wrap{height:100%;overflow:auto;padding:10px 12px}.build-lock{margin-top:10px}
.chooser-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}.chooser-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:132px;padding:14px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd2);text-decoration:none}.chooser-tile:active{transform:scale(.98);border-color:var(--purple)}.chooser-title{font-size:22px;font-weight:900;letter-spacing:0;color:var(--text)}.chooser-detail{font-size:10px;line-height:1.35;color:var(--t2);max-width:230px}.age-gate{min-height:calc(100dvh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}.age-kicker{font-size:11px;font-weight:900;color:var(--red);padding:4px 8px;border-radius:999px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.24)}.age-title{font-size:22px;font-weight:900;letter-spacing:0}.age-copy{max-width:280px;font-size:10px;line-height:1.45;color:var(--t2)}.age-link{font-size:9px;font-weight:800;color:var(--purple);text-decoration:none}.gen-status{margin-top:6px;font-size:8px;font-weight:800;color:var(--pb);text-align:center}
@media (min-width:520px){.chooser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chooser-tile{min-height:180px}.chooser-title{font-size:28px}.chooser-detail{font-size:11px}}