/* ================================================================
   Aurora Core Design System v5.4.0 — Component Showcase
   The portal IS the design system. Every section demonstrates it.
   ================================================================ */

/* ─── Design Tokens ─── */
:root {
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;
  --text-xs:.694rem;--text-sm:.833rem;--text-base:1rem;--text-md:1.125rem;--text-lg:1.25rem;--text-xl:1.563rem;--text-2xl:1.953rem;--text-3xl:2.441rem;
  --leading-tight:1.2;--leading-normal:1.5;--leading-relaxed:1.65;
  --font-body:'Outfit',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;
  --ease-out:cubic-bezier(.2,0,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:150ms;--duration-normal:250ms;--duration-slow:400ms;
  --sidebar-w:220px;--topbar-h:44px;
  --glass-depth-1-blur:blur(8px) saturate(1.1);--glass-depth-1-border:rgba(255,255,255,.05);
  --glass-depth-2-blur:blur(20px) saturate(1.3);--glass-depth-2-border:rgba(255,255,255,.10);
  --glass-depth-3-blur:blur(32px) saturate(1.5);--glass-depth-3-border:rgba(255,255,255,.16);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --gold-200:#F0E4B8;--gold-300:#E8D080;--gold-400:#D4B850;--gold-500:#B8A040;--gold-600:#907828;
  --silver-200:#D8DAE0;--silver-300:#B0B4BE;--silver-400:#8A8F9C;--silver-500:#6B7080;--silver-600:#4A4E5A;
  --purple-200:#D4B8FF;--purple-300:#B07AFF;--purple-400:#9254F0;--purple-500:#7638D8;--purple-600:#5A20B0;
  --blue-200:#A8CFFF;--blue-300:#60A0F0;--blue-400:#3878E0;--blue-500:#2060C8;--blue-600:#1048A0;
  --green-200:#A0F0C4;--green-300:#4ADE80;--green-400:#2ABB5E;--green-500:#1A9A48;--green-600:#107838;
  --red-200:#FFBABA;--red-300:#F87171;--red-400:#E04848;--red-500:#C83030;--red-600:#A01818;
  --amber-200:#D4A870;--amber-300:#C7923A;--amber-400:#A8742A;--amber-500:#865C1F;--amber-600:#6A4818;
  --grey-900:#0D0E12;--grey-800:#181A24;--grey-700:#22252F;--grey-600:#2E3240;--grey-500:#3A3F50;
  --grey-400:#6B7186;--grey-300:#8E94A8;--grey-200:#B0B6C8;--grey-100:#D0D4E0;
  --surface-base:var(--grey-900);--surface-raised:#14151C;
  --surface-glass:rgba(255,255,255,.06);--surface-glass-solid:#1A1C26;
  --surface-glass-border:rgba(255,255,255,.10);--surface-glass-hover:rgba(255,255,255,.09);
  --text-primary:#E4E6EE;--text-secondary:#B0B6C8;--text-muted:#8E94A8;--text-disabled:#5A5F70;--text-inverse:#0D0E12;
  --accent-gold:#E8D080;--accent-purple:#D4B8FF;--accent-blue:#A8CFFF;--accent-green:#A0F0C4;--accent-red:#FFBABA;--accent-amber:#D4A870;
  --value-gold:#E8D080;--value-purple:#D4B8FF;--value-blue:#A8CFFF;--value-green:#A0F0C4;--value-red:#FFBABA;--value-amber:#D4A870;
  --focus-color:var(--accent-gold);--glow-strength:1;
  --warning-bg:rgba(199,146,58,.10);--warning-border:rgba(199,146,58,.22);
}

/* ─── Light Theme ─── */
[data-theme="light"] {
  --gold-200:#6E6020;--gold-300:#8A7830;--gold-400:#A89040;--gold-500:#C8B060;--gold-600:#E0D090;
  --purple-200:#4A1890;--purple-300:#6428C0;--purple-400:#8040E0;--purple-500:#A870F0;--purple-600:#D0B8FF;
  --blue-200:#0C3878;--blue-300:#1850B0;--blue-400:#2868D0;--blue-500:#5898F0;--blue-600:#A0C8FF;
  --green-200:#0A5828;--green-300:#127838;--green-400:#1A9848;--green-500:#40C878;--green-600:#90F0B8;
  --red-200:#801818;--red-300:#A82020;--red-400:#D03838;--red-500:#F06060;--red-600:#FFB0B0;
  --amber-200:#5A3810;--amber-300:#7A5818;--amber-400:#987020;--amber-500:#B89040;--amber-600:#D8B870;
  --silver-200:#3A3E48;--silver-300:#585C68;--silver-400:#787E8C;--silver-500:#98A0B0;--silver-600:#C0C4D0;
  --grey-900:#F6F7FA;--grey-800:#E8EAF0;--grey-700:#D8DAE4;--grey-600:#C0C4D0;--grey-500:#A8AEC0;
  --grey-400:#808898;--grey-300:#606878;--grey-200:#484E5C;--grey-100:#1A2038;
  --surface-base:#F2F3F8;--surface-raised:#FFFFFF;
  --surface-glass:rgba(255,255,255,.65);--surface-glass-solid:#F0F1F6;
  --surface-glass-border:rgba(0,0,0,.08);--surface-glass-hover:rgba(255,255,255,.80);
  --text-primary:#1A1E2E;--text-secondary:#484E5C;--text-muted:#808898;--text-disabled:#B0B4C0;--text-inverse:#F2F3F8;
  --accent-gold:#6E6020;--accent-purple:#6428C0;--accent-blue:#1850B0;--accent-green:#127838;--accent-red:#A82020;--accent-amber:#7A5818;
  --value-gold:#6E6020;--value-purple:#6428C0;--value-blue:#1850B0;--value-green:#127838;--value-red:#A82020;--value-amber:#7A5818;
  --focus-color:var(--accent-gold);--glow-strength:.3;
  --warning-bg:rgba(122,88,24,.06);--warning-border:rgba(122,88,24,.18);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;height:100vh;overflow:hidden;background:var(--surface-base);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}

/* ─── Atmosphere ─── */
body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 50% at 25% 15%,rgba(212,192,88,calc(.08*var(--glow-strength))),transparent),
             radial-gradient(ellipse 55% 45% at 75% 75%,rgba(56,120,224,calc(.06*var(--glow-strength))),transparent),
             radial-gradient(ellipse 45% 35% at 50% 45%,rgba(146,84,240,calc(.03*var(--glow-strength))),transparent);
  animation:nebulaDrift 30s ease-in-out infinite alternate}

/* ─── App Shell ─── */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);height:100vh;position:relative;z-index:1}
.app.sidebar-collapsed{grid-template-columns:0px minmax(0,1fr)}
.app.sidebar-collapsed .sidebar{transform:translateX(calc(var(--sidebar-w)*-1));opacity:0;pointer-events:none}
.app.sidebar-collapsed .menu-btn{opacity:1;width:auto;pointer-events:auto}

/* ─── Sidebar ─── */
.sidebar{display:flex;flex-direction:column;height:100vh;background:var(--surface-glass);border-right:1px solid var(--surface-glass-border);
  backdrop-filter:var(--glass-depth-2-blur);-webkit-backdrop-filter:var(--glass-depth-2-blur);
  transition:transform 300ms var(--ease-out),opacity 200ms ease;z-index:100;overflow:hidden}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--surface-glass-border)}
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;
  color:var(--accent-gold);background:rgba(212,192,88,calc(.12*var(--glow-strength)));border:1px solid rgba(212,192,88,.2)}
.brand-name{font-size:var(--text-sm);font-weight:600}
.brand-version{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.sidebar-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-sm);
  border:none;background:none;color:var(--text-muted);cursor:pointer;transition:color 150ms,background 150ms}
.sidebar-close:hover{color:var(--text-primary);background:var(--surface-glass)}

/* ─── Sidebar Nav ─── */
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
.nav-section{margin-bottom:12px}
.nav-label{padding:4px 8px 4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);user-select:none}
.nav-link{display:block;padding:5px 8px;border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:500;
  transition:color 150ms,background 150ms,box-shadow 250ms}
.nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,.03)}
.nav-link.active{color:var(--accent-gold);background:rgba(212,192,88,calc(.06*var(--glow-strength)));box-shadow:inset 2px 0 0 var(--accent-gold)}

.sidebar-foot{padding:8px 14px;border-top:1px solid var(--surface-glass-border);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-gold);box-shadow:0 0 6px rgba(212,192,88,calc(.4*var(--glow-strength)));animation:pulse 3s ease-in-out infinite}

/* ─── Main ─── */
.main{display:flex;flex-direction:column;height:100vh;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);padding:0 16px;flex-shrink:0;
  border-bottom:1px solid var(--surface-glass-border);background:var(--surface-glass);backdrop-filter:var(--glass-depth-1-blur)}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:6px}
.topbar-title{margin:0;font-size:var(--text-sm);font-weight:600}
.icon-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);
  border:none;background:none;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:color 150ms,background 150ms}
.icon-btn:hover{color:var(--text-primary);background:var(--surface-glass)}
.menu-btn{opacity:0;width:0;pointer-events:none;overflow:hidden;transition:opacity 200ms,width 200ms}

/* Theme toggle */
.theme-pills{display:flex;border-radius:var(--radius-full);background:var(--surface-glass);border:1px solid var(--surface-glass-border);overflow:hidden}
.theme-pill{border:none;background:none;padding:4px 10px;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:color 150ms,background 150ms}
.theme-pill.active{color:var(--accent-gold);background:rgba(212,192,88,calc(.1*var(--glow-strength)))}

/* ─── Content ─── */
.content{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.page{max-width:1100px;margin:0 auto;padding:var(--space-7) var(--space-6) 160px}

/* ─── Section Layout ─── */
.demo-section{margin-bottom:var(--space-11);padding-top:var(--space-4)}
.section-title{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.section-heading{font-size:var(--text-xl);font-weight:700;margin:0 0 var(--space-3);letter-spacing:-.5px}
.section-desc{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--space-7);max-width:64ch;line-height:var(--leading-relaxed)}

/* ─── Grid ─── */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ─── Glass ─── */
.glass{background:var(--surface-glass);backdrop-filter:var(--glass-depth-2-blur);-webkit-backdrop-filter:var(--glass-depth-2-blur);
  border:1px solid var(--surface-glass-border);border-radius:var(--radius-lg);
  box-shadow:0 0 20px rgba(255,255,255,calc(.02*var(--glow-strength))),inset 0 1px 0 rgba(255,255,255,.05);transition:border-color var(--duration-normal),box-shadow var(--duration-normal)}
.glass:hover{border-color:rgba(255,255,255,.15);box-shadow:0 0 40px rgba(255,255,255,calc(.04*var(--glow-strength))),inset 0 1px 0 rgba(255,255,255,.09)}
.glass-depth-1{backdrop-filter:var(--glass-depth-1-blur);border-color:var(--glass-depth-1-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.glass-depth-3{backdrop-filter:var(--glass-depth-3-blur);border-color:var(--glass-depth-3-border);
  box-shadow:0 0 40px rgba(255,255,255,calc(.04*var(--glow-strength))),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.03)}
.card-panel{padding:var(--space-6)}
.card-panel-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-4)}

/* ─── Color Swatches ─── */
.token-swatch{aspect-ratio:1;border-radius:var(--radius-sm);display:flex;align-items:flex-end;padding:4px;
  font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.05);
  transition:transform var(--duration-fast) var(--ease-spring)}
.token-swatch:hover{transform:scale(1.08);z-index:2}
.token-swatch.light-text{color:rgba(0,0,0,.5)}

/* ─── Stat Cards ─── */
.stat-card{position:relative;padding:var(--space-6);overflow:hidden}
.stat-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;transition:height var(--duration-normal),filter var(--duration-normal)}
.stat-card:hover::after{height:3px;filter:brightness(1.3) blur(.5px)}
.stat-aura{position:absolute;top:-10px;left:-10px;width:100px;height:70px;border-radius:50%;filter:blur(35px);pointer-events:none;transition:opacity var(--duration-normal)}
.stat-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:var(--space-2)}
.stat-value{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.5px;margin-bottom:var(--space-1)}
.stat-change{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}
.stat-change .up{color:var(--accent-green)}.stat-change .down{color:var(--accent-red)}
.stat-card.gold .stat-value{color:var(--value-gold)}.stat-card.gold::after{background:linear-gradient(90deg,var(--gold-400),transparent)}
.stat-card.gold .stat-aura{background:rgba(212,192,88,.15);opacity:calc(.1*var(--glow-strength))}
.stat-card.blue .stat-value{color:var(--value-blue)}.stat-card.blue::after{background:linear-gradient(90deg,var(--blue-400),transparent)}
.stat-card.blue .stat-aura{background:rgba(56,120,224,.15);opacity:calc(.1*var(--glow-strength))}
.stat-card.green .stat-value{color:var(--value-green)}.stat-card.green::after{background:linear-gradient(90deg,var(--green-400),transparent)}
.stat-card.green .stat-aura{background:rgba(42,187,94,.15);opacity:calc(.1*var(--glow-strength))}
.stat-card.purple .stat-value{color:var(--value-purple)}.stat-card.purple::after{background:linear-gradient(90deg,var(--purple-400),transparent)}
.stat-card.purple .stat-aura{background:rgba(146,84,240,.15);opacity:calc(.1*var(--glow-strength))}
.stat-card.red .stat-value{color:var(--value-red)}.stat-card.red::after{background:linear-gradient(90deg,var(--red-400),transparent)}
.stat-card.red .stat-aura{background:rgba(224,72,72,.15);opacity:calc(.1*var(--glow-strength))}
.stat-card.silver .stat-value{color:var(--text-primary)}.stat-card.silver::after{background:linear-gradient(90deg,var(--silver-400),transparent)}
.stat-card.silver .stat-aura{background:rgba(176,182,200,.1);opacity:.05}
.stat-card.amber .stat-value{color:var(--value-amber)}.stat-card.amber::after{background:linear-gradient(90deg,var(--amber-400),transparent)}
.stat-card.amber .stat-aura{background:rgba(199,146,58,.1);opacity:.03}
.stat-card:hover .stat-aura{opacity:calc(.2*var(--glow-strength))}
.stat-card.amber:hover .stat-aura{opacity:.05}

/* ─── Buttons ─── */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--space-4)}
.btn{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;padding:10px 22px;border-radius:var(--radius-md);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;letter-spacing:.2px;position:relative;transition:transform var(--duration-fast),box-shadow var(--duration-normal),border-color var(--duration-normal),background var(--duration-normal)}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-primary{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:var(--text-inverse);border-color:var(--gold-500);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(212,192,88,calc(.2*var(--glow-strength)))}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 28px rgba(212,192,88,calc(.4*var(--glow-strength)))}
.btn-secondary{background:rgba(146,84,240,.12);color:var(--accent-purple);border-color:rgba(146,84,240,.2)}
.btn-secondary:hover{background:rgba(146,84,240,.18);box-shadow:0 0 20px rgba(146,84,240,calc(.15*var(--glow-strength)))}
.btn-tertiary{background:var(--surface-glass);color:var(--text-primary);border-color:var(--surface-glass-border)}
.btn-tertiary:hover{background:var(--surface-glass-hover);box-shadow:0 0 16px rgba(255,255,255,calc(.03*var(--glow-strength)))}
.btn-ghost{background:transparent;color:var(--accent-blue);border-color:transparent}
.btn-ghost:hover{background:rgba(56,120,224,.08);border-color:rgba(56,120,224,.15)}
.btn-success{background:rgba(42,187,94,.12);color:var(--accent-green);border-color:rgba(42,187,94,.2)}
.btn-success:hover{box-shadow:0 0 20px rgba(42,187,94,calc(.15*var(--glow-strength)))}
.btn-warning{background:var(--warning-bg);color:var(--accent-amber);border-color:var(--warning-border)}
.btn-warning:hover{border-color:rgba(199,146,58,.35)}
.btn-danger{background:rgba(224,72,72,.1);color:var(--accent-red);border-color:rgba(224,72,72,.2)}
.btn-danger:hover{box-shadow:0 0 20px rgba(224,72,72,calc(.15*var(--glow-strength)))}
.btn-icon{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);
  background:var(--surface-glass);border:1px solid var(--surface-glass-border);color:var(--text-secondary);font-size:var(--text-md);cursor:pointer;
  transition:transform var(--duration-fast),color var(--duration-fast),border-color var(--duration-normal),box-shadow var(--duration-normal)}
.btn-icon:hover{transform:translateY(-1px);color:var(--text-primary);box-shadow:0 0 16px rgba(255,255,255,calc(.04*var(--glow-strength)))}

/* ─── Badges ─── */
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full);border:1px solid transparent;
  transition:border-color var(--duration-normal),box-shadow var(--duration-normal)}
.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:transform var(--duration-fast),box-shadow var(--duration-normal)}
.badge-gold{background:rgba(212,192,88,.12);color:var(--accent-gold);border-color:rgba(212,192,88,.2)}
.badge-gold .badge-dot{background:var(--accent-gold);box-shadow:0 0 6px rgba(212,192,88,calc(.4*var(--glow-strength)))}
.badge-gold:hover{box-shadow:0 0 12px rgba(212,192,88,calc(.15*var(--glow-strength)))}
.badge-purple{background:rgba(146,84,240,.12);color:var(--accent-purple);border-color:rgba(146,84,240,.2)}
.badge-purple .badge-dot{background:var(--accent-purple);box-shadow:0 0 6px rgba(146,84,240,calc(.4*var(--glow-strength)))}
.badge-blue{background:rgba(56,120,224,.12);color:var(--accent-blue);border-color:rgba(56,120,224,.2)}
.badge-blue .badge-dot{background:var(--accent-blue);box-shadow:0 0 6px rgba(56,120,224,calc(.4*var(--glow-strength)))}
.badge-green{background:rgba(42,187,94,.12);color:var(--accent-green);border-color:rgba(42,187,94,.2)}
.badge-green .badge-dot{background:var(--accent-green);box-shadow:0 0 6px rgba(42,187,94,calc(.4*var(--glow-strength)))}
.badge-amber{background:rgba(199,146,58,.12);color:var(--accent-amber);border-color:rgba(199,146,58,.2)}
.badge-amber .badge-dot{background:var(--accent-amber)}
.badge-red{background:rgba(224,72,72,.1);color:var(--accent-red);border-color:rgba(224,72,72,.2)}
.badge-red .badge-dot{background:var(--accent-red);box-shadow:0 0 6px rgba(224,72,72,calc(.4*var(--glow-strength)))}
.badge-silver{background:rgba(176,180,190,.08);color:var(--text-muted);border-color:rgba(176,180,190,.12)}

/* ─── Form Controls ─── */
.input-group{margin-bottom:var(--space-4)}
.input-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);margin-bottom:4px}
.input-field{width:100%;padding:10px 14px;background:var(--surface-glass);border:1px solid var(--surface-glass-border);border-radius:var(--radius-md);
  color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.input-field:focus{outline:none;border-color:var(--accent-gold);box-shadow:0 0 0 3px rgba(212,192,88,.12)}
.input-field::placeholder{color:var(--text-disabled)}
.input-field.error{border-color:var(--accent-red)}
.input-field.error:focus{box-shadow:0 0 0 3px rgba(224,72,72,.12)}
.input-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px}
.input-hint.error{color:var(--accent-red)}

/* ─── Progress Bars ─── */
.progress-bar{height:6px;border-radius:var(--radius-full);overflow:hidden;background:var(--grey-700);margin-bottom:var(--space-4)}
.progress-bar.gold-track{background:rgba(212,192,88,.12)}
.progress-bar.purple-track{background:rgba(146,84,240,.12)}
.progress-bar.blue-track{background:rgba(56,120,224,.12)}
.progress-bar.green-track{background:rgba(42,187,94,.12)}
.progress-fill{height:100%;border-radius:var(--radius-full);position:relative;transition:width 1.2s var(--ease-out)}
.progress-fill.gold{background:linear-gradient(90deg,var(--gold-600),var(--gold-400),var(--gold-300))}
.progress-fill.purple{background:linear-gradient(90deg,var(--purple-600),var(--purple-400),var(--purple-300))}
.progress-fill.blue{background:linear-gradient(90deg,var(--blue-600),var(--blue-400),var(--blue-300))}
.progress-fill.green{background:linear-gradient(90deg,var(--green-600),var(--green-400),var(--green-300))}

/* ─── Tabs ─── */
.tab-bar{display:inline-flex;background:var(--surface-glass);border-radius:var(--radius-md);padding:3px;border:1px solid var(--surface-glass-border)}
.tab-item{padding:7px 18px;font-size:var(--text-sm);font-weight:500;color:var(--text-muted);background:none;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  font-family:var(--font-body);transition:color var(--duration-fast),background var(--duration-fast)}
.tab-item:hover{color:var(--text-secondary)}
.tab-item.active{background:var(--surface-glass-hover);color:var(--text-primary);border-color:var(--glass-depth-1-border)}

/* ─── Toasts ─── */
.toast{display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-3);
  border:1px solid transparent}
.toast-icon{font-size:var(--text-md);flex-shrink:0}
.toast-success{background:rgba(42,187,94,.1);border-color:rgba(42,187,94,.2);color:var(--accent-green)}
.toast-warning{background:rgba(199,146,58,.1);border-color:rgba(199,146,58,.2);color:var(--accent-amber)}
.toast-error{background:rgba(224,72,72,.1);border-color:rgba(224,72,72,.2);color:var(--accent-red)}

/* ─── Gauges ─── */
.gauge-wrap{text-align:center}
.gauge{position:relative;width:100px;height:100px;display:inline-block}
.gauge svg{transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:var(--grey-700);stroke-width:6}
.gauge-fill{fill:none;stroke-width:6;stroke-linecap:round}
.gauge-fill.gold{stroke:var(--gold-400);filter:drop-shadow(0 0 4px rgba(212,192,88,calc(.3*var(--glow-strength))))}
.gauge-fill.blue{stroke:var(--blue-400);filter:drop-shadow(0 0 4px rgba(56,120,224,calc(.3*var(--glow-strength))))}
.gauge-fill.green{stroke:var(--green-400);filter:drop-shadow(0 0 4px rgba(42,187,94,calc(.3*var(--glow-strength))))}
.gauge-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:700}
.gauge-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-top:var(--space-2)}

/* ─── Avatars ─── */
.avatar-stack{display:flex}
.avatar-stack-item{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;
  border:2px solid var(--surface-base);margin-left:-8px;transition:transform var(--duration-fast)}
.avatar-stack-item:first-child{margin-left:0}
.avatar-stack-item:hover{transform:translateY(-2px);z-index:2}
.avatar-stack-more{background:var(--grey-600);color:var(--text-secondary)}

/* ─── Divider ─── */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--surface-glass-border),transparent);margin:var(--space-2) 0;border:none}

/* ─── Doc Elements ─── */
.doc-note{padding:12px 16px;background:rgba(212,192,88,calc(.06*var(--glow-strength)));border-left:3px solid var(--accent-gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}

/* ─── Doc Tables ─── */
.doc-table{width:100%;border-collapse:collapse;margin-bottom:var(--space-6)}
.doc-table th{text-align:left;padding:8px 12px;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);
  border-bottom:2px solid var(--surface-glass-border)}
.doc-table td{padding:8px 12px;border-bottom:1px solid var(--surface-glass-border);font-size:var(--text-sm);color:var(--text-secondary)}
.doc-table code{font-family:var(--font-mono);font-size:var(--text-xs);background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;color:var(--accent-gold)}
.doc-table tr:hover td{background:rgba(255,255,255,.02)}

/* ─── Rule Cards ─── */
.rule-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 20px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.02);border:1px solid var(--surface-glass-border);transition:border-color var(--duration-normal)}
.rule-card:hover{border-color:rgba(212,192,88,.18)}
.rule-index{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(212,192,88,calc(.08*var(--glow-strength)));
  color:var(--accent-gold);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;border:1px solid rgba(212,192,88,.12)}
.rule-card strong{display:block;margin-bottom:2px;font-weight:600;color:var(--text-primary)}
.rule-card p{margin:0;font-size:var(--text-sm);color:var(--text-muted)}

/* ─── Doc Links ─── */
.doc-link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}
.doc-link{display:block;padding:12px 16px;border-radius:var(--radius-md);background:var(--surface-glass);border:1px solid var(--surface-glass-border);
  text-decoration:none;color:var(--text-primary);font-size:var(--text-sm);font-weight:500;
  transition:border-color var(--duration-normal),background var(--duration-normal),box-shadow var(--duration-normal),transform var(--duration-fast)}
.doc-link:hover{border-color:rgba(212,192,88,.2);background:rgba(212,192,88,calc(.04*var(--glow-strength)));transform:translateY(-1px);
  box-shadow:0 0 16px rgba(212,192,88,calc(.06*var(--glow-strength)))}
.doc-link-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.doc-link-title{color:var(--text-primary)}

/* ─── Editor Mockup ─── */
.editor-mockup{display:flex;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--surface-glass-border);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.8;min-height:160px}
.editor-gutter{width:52px;padding:var(--space-6) var(--space-2) var(--space-3);background:rgba(255,255,255,.03);border-right:1px solid var(--surface-glass-border);display:flex;flex-direction:column;align-items:flex-end;position:relative}
.editor-gutter-label{position:absolute;top:var(--space-1);left:var(--space-1);font-size:9px;color:var(--accent-purple);opacity:.7;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);letter-spacing:.5px}
.editor-line-num{color:var(--text-disabled);padding-right:var(--space-2)}
.editor-line-num.active{color:var(--accent-gold)}
.editor-body{flex:1;padding:var(--space-6) var(--space-4) var(--space-3);background:var(--surface-glass-solid);position:relative;overflow-x:auto}
.editor-body-label{position:absolute;top:var(--space-1);right:var(--space-2);font-size:9px;color:var(--text-disabled);opacity:.7}
.editor-line{white-space:nowrap;position:relative}
.editor-active-line{background:rgba(232,208,128,.06);margin:0 calc(var(--space-4) * -1);padding:0 var(--space-4);border-left:2px solid var(--accent-gold)}
.editor-active-label{position:absolute;right:var(--space-2);top:0;font-size:9px;color:var(--accent-gold);opacity:.6}
.editor-kw{color:var(--accent-purple)}
.editor-var{color:var(--accent-blue)}
.editor-str{color:var(--accent-green)}
.editor-fn{color:var(--accent-gold)}
.editor-selection{background:rgba(146,84,240,.18);padding:1px 2px;border-radius:2px;position:relative}
.editor-selection-label{position:absolute;bottom:100%;left:0;font-size:9px;color:var(--accent-purple);opacity:.6;white-space:nowrap}
.editor-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-6)}
.editor-swatch-item{display:flex;align-items:center;gap:var(--space-3)}
.editor-swatch-item code{font-family:var(--font-mono);font-size:9px;color:var(--text-muted)}
.editor-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--surface-glass-border);flex-shrink:0}
.token-val{font-family:var(--font-mono);font-size:9px;color:var(--text-disabled);margin-left:auto}

/* ─── App Shell Wireframe ─── */
.shell-wireframe{border:1px solid var(--surface-glass-border);border-radius:var(--radius-lg);overflow:hidden;min-height:280px;display:flex;flex-direction:column}
.shell-titlebar{height:44px;background:rgba(168,207,255,.06);border-bottom:1px solid var(--surface-glass-border);display:flex;align-items:center;justify-content:center;position:relative}
.shell-token-tag{font-family:var(--font-mono);font-size:9px;color:var(--text-disabled);letter-spacing:.5px}
.shell-body{flex:1;display:flex;min-height:200px}
.shell-sidebar-area{width:120px;background:rgba(146,84,240,.04);border-right:1px solid var(--surface-glass-border);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);position:relative}
.shell-nav-placeholder{height:10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.06)}
.shell-nav-placeholder.short{width:60%}
.shell-main-area{flex:1;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);position:relative}
.shell-content-row{display:flex;gap:var(--space-4);position:relative}
.shell-card-placeholder{flex:1;height:60px;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px dashed var(--surface-glass-border)}
.shell-panel-placeholder{flex:1;border-radius:var(--radius-md);background:rgba(255,255,255,.03);border:1px dashed var(--surface-glass-border);min-height:60px;display:flex;align-items:center;justify-content:center;position:relative}
.shell-pad-tag{position:absolute;top:var(--space-1);left:var(--space-2)}
.shell-gap-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap}

/* ─── Input Surfaces ─── */
.input-demo-hover{background:var(--surface-glass-hover)}
.input-demo-active{border-color:var(--accent-gold);box-shadow:0 0 0 3px rgba(212,192,88,.12)}

/* ─── Scroll Demo ─── */
.scroll-demo{height:140px;overflow-y:auto;border:1px solid var(--surface-glass-border);border-radius:var(--radius-md);background:var(--surface-glass);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.scroll-demo::-webkit-scrollbar{width:8px}
.scroll-demo::-webkit-scrollbar-track{background:transparent}
.scroll-demo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--radius-full)}
.scroll-demo::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
.scroll-demo:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}
.scroll-item{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.04)}
.scroll-item:last-child{border-bottom:none}

/* ─── Glass Card Demos ─── */
.glass-card-demo{display:flex;flex-direction:column;gap:var(--space-3)}
.glass-card-tier{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}
.glass-card-title{font-size:var(--text-lg);font-weight:600}
.glass-card-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);flex:1}
.glass-card-footer{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--surface-glass-border)}

/* ─── Modal ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 250ms var(--ease-out);padding:var(--space-6)}
.modal-overlay.active{opacity:1}
.modal-overlay[hidden]{display:none}
.modal-dialog{width:100%;max-width:480px;border-radius:var(--radius-xl);overflow:hidden;transform:translateY(16px) scale(.97);transition:transform 250ms var(--ease-out);padding:0}
.modal-overlay.active .modal-dialog{transform:translateY(0) scale(1)}
.modal-dialog-sm{max-width:380px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6) var(--space-3)}
.modal-title{margin:0;font-size:var(--text-lg);font-weight:600}
.modal-body{padding:var(--space-2) var(--space-6) var(--space-4)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5);border-top:1px solid var(--surface-glass-border)}

/* ─── Sidebar Demo ─── */
.sidebar-demo-container{display:flex;border:1px solid var(--surface-glass-border);border-radius:var(--radius-md);overflow:hidden;min-height:240px}
.sidebar-demo-panel{width:180px;border-radius:0;border:none;border-right:1px solid var(--surface-glass-border);display:flex;flex-direction:column;transition:width 250ms var(--ease-out),opacity 250ms}
.sidebar-demo-panel.collapsed{width:0;opacity:0;overflow:hidden;border-right:none}
.sidebar-demo-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);border-bottom:1px solid var(--surface-glass-border)}
.sidebar-demo-nav{flex:1;padding:var(--space-2);overflow:hidden}
.sidebar-demo-link{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);
  transition:color 150ms,background 150ms,box-shadow 250ms;cursor:pointer}
.sidebar-demo-link:hover{color:var(--text-primary);background:rgba(255,255,255,.03)}
.sidebar-demo-link.active{color:var(--accent-gold);background:rgba(212,192,88,calc(.06*var(--glow-strength)));box-shadow:inset 2px 0 0 var(--accent-gold)}
.sidebar-demo-content{flex:1;padding:var(--space-4);display:flex;align-items:center;justify-content:center}

/* ─── Search Bar ─── */
.search-bar-demo{position:relative;margin-bottom:var(--space-4)}
.search-bar-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.search-bar-input{width:100%;padding:12px 48px 12px 40px;background:var(--surface-glass);border:1px solid var(--surface-glass-border);border-radius:var(--radius-md);
  color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.search-bar-input:focus{outline:none;border-color:var(--accent-gold);box-shadow:0 0 0 3px rgba(212,192,88,.12)}
.search-bar-input::placeholder{color:var(--text-disabled)}
.search-bar-kbd{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-disabled);background:rgba(255,255,255,.06);border:1px solid var(--surface-glass-border);border-radius:4px;padding:2px 8px;pointer-events:none}

/* ─── Filter Pills ─── */
.filter-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.filter-pill{padding:6px 14px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-full);border:1px solid var(--surface-glass-border);
  background:var(--surface-glass);color:var(--text-muted);cursor:pointer;transition:color 150ms,background 150ms,border-color 150ms,box-shadow 250ms}
.filter-pill:hover{color:var(--text-primary);background:var(--surface-glass-hover)}
.filter-pill.active{color:var(--accent-gold);background:rgba(212,192,88,calc(.08*var(--glow-strength)));border-color:rgba(212,192,88,.2);
  box-shadow:0 0 12px rgba(212,192,88,calc(.1*var(--glow-strength)))}

/* ─── Tag Chips ─── */
.tag-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tag-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:4px 10px;font-family:var(--font-mono);font-size:var(--text-xs);
  background:rgba(146,84,240,.1);color:var(--accent-purple);border:1px solid rgba(146,84,240,.2);border-radius:var(--radius-full);transition:opacity 200ms,transform 200ms}
.tag-chip-remove{background:none;border:none;color:var(--accent-purple);cursor:pointer;font-size:var(--text-sm);padding:0 2px;opacity:.6;transition:opacity 150ms}
.tag-chip-remove:hover{opacity:1}

/* ─── Status Badges (Extended) ─── */
.status-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.status-badge-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--surface-glass-border);background:rgba(255,255,255,.02);
  transition:border-color var(--duration-normal),background var(--duration-normal)}
.status-badge-item:hover{background:rgba(255,255,255,.04)}
.status-badge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-badge-label{font-size:var(--text-sm);font-weight:600;flex-shrink:0}
.status-badge-meta{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto}
.status-ok .status-badge-dot{background:var(--accent-green);box-shadow:0 0 6px rgba(42,187,94,calc(.4*var(--glow-strength)))}
.status-ok .status-badge-label{color:var(--accent-green)}
.status-ok:hover{border-color:rgba(42,187,94,.2)}
.status-warn .status-badge-dot{background:var(--accent-amber)}
.status-warn .status-badge-label{color:var(--accent-amber)}
.status-warn:hover{border-color:rgba(199,146,58,.2)}
.status-error .status-badge-dot{background:var(--accent-red);box-shadow:0 0 6px rgba(224,72,72,calc(.4*var(--glow-strength)))}
.status-error .status-badge-label{color:var(--accent-red)}
.status-error:hover{border-color:rgba(224,72,72,.2)}
.status-neutral .status-badge-dot{background:var(--text-muted)}
.status-neutral .status-badge-label{color:var(--text-muted)}
.status-neutral:hover{border-color:rgba(176,180,190,.15)}

/* ─── Context Menu ─── */
.ctx-menu-demo-area{display:flex;justify-content:center;padding:var(--space-6) 0}
.ctx-menu{width:220px;padding:var(--space-1) 0;border-radius:var(--radius-md)}
.ctx-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px var(--space-4);background:none;border:none;color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;transition:background 100ms,color 100ms}
.ctx-menu-item:hover{background:rgba(212,192,88,calc(.06*var(--glow-strength)));color:var(--accent-gold)}
.ctx-menu-item:focus-visible{outline:2px solid var(--accent-gold);outline-offset:-2px;border-radius:var(--radius-sm)}
.ctx-menu-item kbd{font-family:var(--font-mono);font-size:10px;color:var(--text-disabled)}
.ctx-menu-item:hover kbd{color:var(--text-muted)}
.ctx-menu-item-danger:hover{color:var(--accent-red);background:rgba(224,72,72,.06)}
.ctx-menu-item-danger:hover kbd{color:rgba(224,72,72,.5)}
.ctx-submenu-arrow{font-size:10px;color:var(--text-disabled)}
.ctx-menu-item:hover .ctx-submenu-arrow{color:var(--text-muted)}
.ctx-menu-separator{height:1px;background:var(--surface-glass-border);margin:var(--space-1) var(--space-3)}

/* ─── Tab Strip ─── */
.tab-strip{display:flex;background:rgba(255,255,255,.03);border:1px solid var(--surface-glass-border);border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom:none;overflow-x:auto;scrollbar-width:none}
.tab-strip::-webkit-scrollbar{display:none}
.tab-strip-tab{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--space-4);border-right:1px solid var(--surface-glass-border);font-size:var(--text-sm);
  color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color 150ms,background 150ms,opacity 200ms,max-width 200ms,padding 200ms;max-width:200px;overflow:hidden;user-select:none}
.tab-strip-tab:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
.tab-strip-tab.active{color:var(--accent-gold);background:rgba(212,192,88,calc(.06*var(--glow-strength)));box-shadow:inset 0 2px 0 var(--accent-gold)}
.tab-strip-tab:focus-visible{outline:2px solid var(--accent-gold);outline-offset:-2px}
.tab-strip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:transparent}
.tab-strip-dot.dirty{background:var(--accent-gold);box-shadow:0 0 4px rgba(212,192,88,calc(.3*var(--glow-strength)))}
.tab-strip-label{font-family:var(--font-mono);font-size:var(--text-xs)}
.tab-strip-close{background:none;border:none;color:var(--text-disabled);font-size:var(--text-sm);cursor:pointer;padding:0 2px;border-radius:2px;
  opacity:0;transition:opacity 150ms,color 150ms,background 150ms;line-height:1}
.tab-strip-tab:hover .tab-strip-close,.tab-strip-tab.active .tab-strip-close{opacity:1}
.tab-strip-close:hover{color:var(--text-primary);background:rgba(255,255,255,.08)}
.tab-strip-content{padding:var(--space-4);border-radius:0 0 var(--radius-md) var(--radius-md);min-height:60px}

/* ─── Banners ─── */
.banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;
  font-size:var(--text-sm);transition:opacity 250ms,transform 250ms}
.banner-icon{font-size:var(--text-lg);flex-shrink:0}
.banner-text{flex:1;line-height:var(--leading-relaxed)}
.banner-dismiss{background:none;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:var(--text-lg);padding:0 var(--space-1);transition:opacity 150ms}
.banner-dismiss:hover{opacity:1}
.banner-info{background:rgba(96,160,240,.08);border-color:rgba(96,160,240,.2);color:var(--accent-blue)}
.banner-warn{background:rgba(199,146,58,.08);border-color:rgba(199,146,58,.2);color:var(--accent-amber)}
.banner-error{background:rgba(224,72,72,.08);border-color:rgba(224,72,72,.2);color:var(--accent-red)}

/* ─── Split Panes ─── */
.split-container{display:flex;border:1px solid var(--surface-glass-border);border-radius:var(--radius-md);overflow:hidden;min-height:160px}
.split-pane{padding:var(--space-4);overflow:hidden}
.split-pane-left{flex-basis:50%;flex-shrink:0;border-right:none;min-width:0}
.split-pane-right{flex:1;min-width:0}
.split-pane-header{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--surface-glass-border)}
.split-handle{width:6px;flex-shrink:0;background:rgba(255,255,255,.04);cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background 150ms;position:relative}
.split-handle:hover,.split-handle:active{background:rgba(212,192,88,calc(.1*var(--glow-strength)))}
.split-handle:focus-visible{outline:2px solid var(--accent-gold);outline-offset:-1px}
.split-handle-grip{width:2px;height:32px;border-radius:var(--radius-full);background:rgba(255,255,255,.15);transition:background 150ms,height 150ms}
.split-handle:hover .split-handle-grip{background:var(--accent-gold);height:48px}

/* ─── Animations ─── */
@keyframes nebulaDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-20px) scale(1.05)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ─── Responsive ─── */
@media(max-width:1024px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .app{grid-template-columns:0 minmax(0,1fr)}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:min(84vw,var(--sidebar-w));max-width:320px;
    transform:translateX(-100%);opacity:1;pointer-events:none;
    box-shadow:12px 0 40px rgba(0,0,0,.4);z-index:1100
  }
  .sidebar.sidebar-open{transform:translateX(0);pointer-events:auto}

  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity 220ms var(--ease-out);z-index:1050
  }
  .sidebar-backdrop.active{opacity:1;pointer-events:auto}

  .menu-btn{opacity:1;width:auto;pointer-events:auto}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}

  body{font-size:15px}
  body::after{display:none!important}
  .topbar{height:40px;padding:0 var(--space-3)}
  .topbar-title{font-size:var(--text-xs)}
  .page{padding:var(--space-4) var(--space-3) 96px}
  .demo-section{margin-bottom:var(--space-8)}
  .section-heading{font-size:var(--text-lg)}
  .section-desc{font-size:var(--text-xs);margin-bottom:var(--space-5)}
  .card-panel,.stat-card{padding:var(--space-4)}
  .btn{font-size:var(--text-xs);padding:8px 14px}

  #colors .glass.card-panel > div[style*="repeat(8,minmax(64px,1fr))"]{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    min-width:0!important;
    gap:12px!important
  }
  .sidebar-demo-container{flex-direction:column}
  .sidebar-demo-panel{width:100%;border-right:none;border-bottom:1px solid var(--surface-glass-border)}
  .sidebar-demo-panel.collapsed{height:0;width:100%}
  .split-container{flex-direction:column}
  .split-handle{width:100%;height:6px;cursor:row-resize}
  .split-handle-grip{width:32px;height:2px}
  .split-pane-left{flex-basis:auto}
  .editor-mockup{flex-direction:column}
  .editor-gutter{width:100%;flex-direction:row;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-right:none;border-bottom:1px solid var(--surface-glass-border)}
  .editor-gutter-label{writing-mode:horizontal-tb;transform:none;position:static}
  .editor-swatch-grid{grid-template-columns:1fr}
  .shell-body{flex-direction:column}
  .shell-sidebar-area{width:100%;border-right:none;border-bottom:1px solid var(--surface-glass-border)}
  .status-badge-grid{grid-template-columns:1fr}
  .ctx-menu{width:100%}
}
@media(max-width:400px){
  .sidebar{width:min(90vw,280px)}
  .topbar{padding:0 var(--space-2)}
  .page{padding:var(--space-3) var(--space-2) 72px}
  .card-panel,.stat-card{padding:var(--space-3)}
  #colors .glass.card-panel > div[style*="repeat(8,minmax(64px,1fr))"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}