/* ============================================================
   LikeeDiamond — Design System v3 ("Option A", enhanced)
   Light-first content area + a permanently dark sidebar (brand
   anchor, visible in both themes), solid bordered cards instead
   of glass/glow, garnet accent, proper contrast on every badge.
   Theme is driven by CSS variables remapped onto Tailwind's
   slate/white/status scales, so one toggle restyles the whole
   app (static markup + every JS-rendered row). The sidebar is
   deliberately NOT part of that toggle — see the scoped block
   near the bottom.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- Theme tokens ---------- */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Brand (garnet) — fixed, not theme-toggled; reads well on both
       light cards and the always-dark sidebar at different lightness. */
    --brand-500: #B3184E;
    --brand-600: #9D174D;
    --brand-700: #7C1440;
    --on-dark-accent: #F472B6; /* bright rose, for text on near-black surfaces */

    /* LIGHT theme (default) */
    --s-50:  20 24 33;
    --s-100: 24 28 38;
    --s-200: 32 37 48;
    --s-300: 51 58 71;
    --s-400: 100 116 139;
    --s-500: 138 143 153;
    --s-600: 180 185 196;
    --s-700: 226 232 240;
    --s-800: 237 240 246;
    --s-900: 255 255 255;
    --s-950: 247 248 252;
    --c-white: 20 23 31;

    /* Status/accent text shades — theme-split for contrast */
    --pk-400: 157 23 77;    /* #9D174D on light */
    --em-400: 4 120 87;     /* #047857 */
    --rs-400: 185 28 28;    /* #B91C1C */
    --am-400: 180 83 9;     /* #B45309 */
    --cy-400: 14 116 144;   /* #0E7490 */
    --pu-400: 109 40 217;   /* #6D28D9 */

    --radius: 14px;
    --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -16px rgba(15,23,42,.16);
    --card-border: rgba(15, 23, 42, 0.09);
    --ring: rgba(179, 24, 78, 0.22);
}

html.dark {
    --s-50:  248 250 252;
    --s-100: 241 245 249;
    --s-200: 226 232 240;
    --s-300: 203 213 225;
    --s-400: 148 163 184;
    --s-500: 100 116 139;
    --s-600: 71 85 105;
    --s-700: 51 65 85;
    --s-800: 30 41 59;
    --s-900: 17 24 39;
    --s-950: 8 11 22;
    --c-white: 255 255 255;

    --pk-400: 244 114 182;  /* #F472B6 on dark */
    --em-400: 52 211 153;   /* #34D399 */
    --rs-400: 251 113 133;  /* #FB7185 */
    --am-400: 251 191 36;   /* #FBBF24 */
    --cy-400: 34 211 238;   /* #22D3EE */
    --pu-400: 167 139 250;  /* #A78BFA */

    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
    --card-border: rgba(148, 163, 184, 0.14);
    --ring: rgba(244, 114, 182, 0.3);
}

/* ============================================================
   DIRECT COLOR OVERRIDES (the fix)
   Tailwind's CDN build does not reliably pick up a theme.extend.colors
   override for already-generated utility classes at runtime — confirmed
   live (cards remapped correctly via plain CSS below, but page background
   and headline text stayed on Tailwind's stock dark palette even in light
   mode). These rules bypass that entirely: every Tailwind color utility
   actually used anywhere in index.html or app.js is overridden here with
   a literal, theme-correct value via !important, so the result does not
   depend on Tailwind's config system working at all.
   Auto-generated by scratchpad/gen_overrides.js from the real class list —
   regenerate that script's output if new utility classes are introduced.
   ============================================================ */
html:not(.dark) .bg-amber-500\/10 { background-color: rgba(217, 119, 6, 0.1) !important; }
html:not(.dark) .bg-amber-950 { background-color: rgb(255 251 235) !important; }
html:not(.dark) .bg-cyan-400 { background-color: rgb(14 116 144) !important; }
html:not(.dark) .bg-cyan-500\/10 { background-color: rgba(6, 182, 212, 0.1) !important; }
html:not(.dark) .bg-emerald-400 { background-color: rgb(4 120 87) !important; }
html:not(.dark) .bg-emerald-500 { background-color: rgb(16 185 129) !important; }
html:not(.dark) .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
html:not(.dark) .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
html:not(.dark) .bg-emerald-600 { background-color: rgb(5 150 105) !important; }
html:not(.dark) .bg-emerald-950 { background-color: rgb(236 253 245) !important; }
html:not(.dark) .bg-pink-500 { background-color: rgb(179 24 78) !important; }
html:not(.dark) .bg-pink-500\/10 { background-color: rgba(179, 24, 78, 0.1) !important; }
html:not(.dark) .bg-pink-500\/20 { background-color: rgba(179, 24, 78, 0.2) !important; }
html:not(.dark) .bg-pink-600 { background-color: rgb(157 23 77) !important; }
html:not(.dark) .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.1) !important; }
html:not(.dark) .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1) !important; }
html:not(.dark) .bg-rose-950 { background-color: rgb(254 242 242) !important; }
html:not(.dark) .bg-slate-700\/40 { background-color: rgba(226, 232, 240, 0.4) !important; }
html:not(.dark) .bg-slate-800 { background-color: rgb(237 240 246) !important; }
html:not(.dark) .bg-slate-800\/80 { background-color: rgba(237, 240, 246, 0.8) !important; }
html:not(.dark) .bg-slate-900 { background-color: rgb(255 255 255) !important; }
html:not(.dark) .bg-slate-900\/40 { background-color: rgba(255, 255, 255, 0.4) !important; }
html:not(.dark) .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.6) !important; }
html:not(.dark) .bg-slate-900\/70 { background-color: rgba(255, 255, 255, 0.7) !important; }
html:not(.dark) .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
html:not(.dark) .bg-slate-900\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }
html:not(.dark) .bg-slate-950 { background-color: rgb(247 248 252) !important; }
html:not(.dark) .bg-slate-950\/50 { background-color: rgba(247, 248, 252, 0.5) !important; }
html:not(.dark) .bg-slate-950\/60 { background-color: rgba(247, 248, 252, 0.6) !important; }
html:not(.dark) .bg-slate-950\/70 { background-color: rgba(247, 248, 252, 0.7) !important; }
html:not(.dark) .bg-slate-950\/80 { background-color: rgba(247, 248, 252, 0.8) !important; }
html:not(.dark) .bg-slate-950\/85 { background-color: rgba(247, 248, 252, 0.85) !important; }
html:not(.dark) .border-amber-500\/20 { border-color: rgba(217, 119, 6, 0.2) !important; }
html:not(.dark) .border-amber-500\/40 { border-color: rgba(217, 119, 6, 0.4) !important; }
html:not(.dark) .border-cyan-500 { border-color: rgb(6 182 212) !important; }
html:not(.dark) .border-cyan-500\/20 { border-color: rgba(6, 182, 212, 0.2) !important; }
html:not(.dark) .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.2) !important; }
html:not(.dark) .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3) !important; }
html:not(.dark) .border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4) !important; }
html:not(.dark) .border-pink-500 { border-color: rgb(179 24 78) !important; }
html:not(.dark) .border-pink-500\/20 { border-color: rgba(179, 24, 78, 0.2) !important; }
html:not(.dark) .border-pink-500\/30 { border-color: rgba(179, 24, 78, 0.3) !important; }
html:not(.dark) .border-pink-500\/40 { border-color: rgba(179, 24, 78, 0.4) !important; }
html:not(.dark) .border-red-500\/20 { border-color: rgba(239, 68, 68, 0.2) !important; }
html:not(.dark) .border-rose-500\/20 { border-color: rgba(244, 63, 94, 0.2) !important; }
html:not(.dark) .border-rose-500\/40 { border-color: rgba(244, 63, 94, 0.4) !important; }
html:not(.dark) .border-slate-600\/40 { border-color: rgba(180, 185, 196, 0.4) !important; }
html:not(.dark) .border-slate-700 { border-color: rgb(226 232 240) !important; }
html:not(.dark) .border-slate-700\/60 { border-color: rgba(226, 232, 240, 0.6) !important; }
html:not(.dark) .border-slate-800 { border-color: rgb(237 240 246) !important; }
html:not(.dark) .border-slate-800\/60 { border-color: rgba(237, 240, 246, 0.6) !important; }
html:not(.dark) .border-slate-800\/80 { border-color: rgba(237, 240, 246, 0.8) !important; }
html:not(.dark) .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(237, 240, 246, 0.6) !important; }
html:not(.dark) .divide-slate-800\/70 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(237, 240, 246, 0.7) !important; }
html:not(.dark) .from-emerald-600 { --tw-gradient-from: rgb(5 150 105) !important; }
html:not(.dark) .from-pink-500 { --tw-gradient-from: rgb(179 24 78) !important; }
html:not(.dark) .from-pink-600 { --tw-gradient-from: rgb(157 23 77) !important; }
html:not(.dark) .from-pink-950\/40 { --tw-gradient-from: rgba(253, 242, 246, 0.4) !important; }
html:not(.dark) .from-purple-600 { --tw-gradient-from: rgb(124 58 237) !important; }
html:not(.dark) .hover\:bg-amber-500\/20:hover { background-color: rgba(217, 119, 6, 0.2) !important; }
html:not(.dark) .hover\:bg-cyan-500\/20:hover { background-color: rgba(6, 182, 212, 0.2) !important; }
html:not(.dark) .hover\:bg-emerald-500:hover { background-color: rgb(16 185 129) !important; }
html:not(.dark) .hover\:bg-emerald-500\/20:hover { background-color: rgba(16, 185, 129, 0.2) !important; }
html:not(.dark) .hover\:bg-pink-500:hover { background-color: rgb(179 24 78) !important; }
html:not(.dark) .hover\:bg-pink-500\/20:hover { background-color: rgba(179, 24, 78, 0.2) !important; }
html:not(.dark) .hover\:bg-rose-500\/10:hover { background-color: rgba(244, 63, 94, 0.1) !important; }
html:not(.dark) .hover\:bg-rose-500\/20:hover { background-color: rgba(244, 63, 94, 0.2) !important; }
html:not(.dark) .hover\:bg-slate-700:hover { background-color: rgb(226 232 240) !important; }
html:not(.dark) .hover\:bg-slate-800:hover { background-color: rgb(237 240 246) !important; }
html:not(.dark) .hover\:bg-slate-800\/60:hover { background-color: rgba(237, 240, 246, 0.6) !important; }
html:not(.dark) .hover\:bg-slate-900\/50:hover { background-color: rgba(255, 255, 255, 0.5) !important; }
html:not(.dark) .hover\:from-emerald-500:hover { --tw-gradient-from: rgb(16 185 129) !important; }
html:not(.dark) .hover\:from-pink-500:hover { --tw-gradient-from: rgb(179 24 78) !important; }
html:not(.dark) .hover\:text-cyan-400:hover { color: rgb(14 116 144) !important; }
html:not(.dark) .hover\:text-pink-400:hover { color: rgb(157 23 77) !important; }
html:not(.dark) .hover\:text-slate-200:hover { color: rgb(32 37 48) !important; }
html:not(.dark) .hover\:text-white:hover { color: rgb(20 23 31) !important; }
html:not(.dark) .hover\:to-rose-500:hover { --tw-gradient-to: rgb(244 63 94) !important; }
html:not(.dark) .hover\:to-teal-500:hover { --tw-gradient-to: rgb(20 184 166) !important; }
html:not(.dark) .text-amber-400 { color: rgb(180 83 9) !important; }
html:not(.dark) .text-amber-500 { color: rgb(217 119 6) !important; }
html:not(.dark) .text-cyan-400 { color: rgb(14 116 144) !important; }
html:not(.dark) .text-emerald-400 { color: rgb(4 120 87) !important; }
html:not(.dark) .text-pink-400 { color: rgb(157 23 77) !important; }
html:not(.dark) .text-pink-500 { color: rgb(179 24 78) !important; }
html:not(.dark) .text-purple-400 { color: rgb(109 40 217) !important; }
html:not(.dark) .text-rose-400 { color: rgb(185 28 28) !important; }
html:not(.dark) .text-slate-100 { color: rgb(24 28 38) !important; }
html:not(.dark) .text-slate-200 { color: rgb(32 37 48) !important; }
html:not(.dark) .text-slate-300 { color: rgb(51 58 71) !important; }
html:not(.dark) .text-slate-400 { color: rgb(100 116 139) !important; }
html:not(.dark) .text-slate-500 { color: rgb(138 143 153) !important; }
html:not(.dark) .text-slate-600 { color: rgb(180 185 196) !important; }
html:not(.dark) .text-white { color: rgb(20 23 31) !important; }
html:not(.dark) .to-amber-400 { --tw-gradient-to: rgb(180 83 9) !important; }
html:not(.dark) .to-emerald-400 { --tw-gradient-to: rgb(4 120 87) !important; }
html:not(.dark) .to-pink-500 { --tw-gradient-to: rgb(179 24 78) !important; }
html:not(.dark) .to-rose-500 { --tw-gradient-to: rgb(244 63 94) !important; }
html:not(.dark) .to-slate-900 { --tw-gradient-to: rgb(255 255 255) !important; }
html:not(.dark) .to-teal-500 { --tw-gradient-to: rgb(20 184 166) !important; }
html:not(.dark) .to-teal-600 { --tw-gradient-to: rgb(13 148 136) !important; }
html.dark .bg-amber-500\/10 { background-color: rgba(217, 119, 6, 0.1) !important; }
html.dark .bg-amber-950 { background-color: rgb(69 26 3) !important; }
html.dark .bg-cyan-400 { background-color: rgb(34 211 238) !important; }
html.dark .bg-cyan-500\/10 { background-color: rgba(6, 182, 212, 0.1) !important; }
html.dark .bg-emerald-400 { background-color: rgb(52 211 153) !important; }
html.dark .bg-emerald-500 { background-color: rgb(16 185 129) !important; }
html.dark .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
html.dark .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-emerald-600 { background-color: rgb(5 150 105) !important; }
html.dark .bg-emerald-950 { background-color: rgb(2 44 34) !important; }
html.dark .bg-pink-500 { background-color: rgb(179 24 78) !important; }
html.dark .bg-pink-500\/10 { background-color: rgba(179, 24, 78, 0.1) !important; }
html.dark .bg-pink-500\/20 { background-color: rgba(179, 24, 78, 0.2) !important; }
html.dark .bg-pink-600 { background-color: rgb(157 23 77) !important; }
html.dark .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.1) !important; }
html.dark .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1) !important; }
html.dark .bg-rose-950 { background-color: rgb(76 5 25) !important; }
html.dark .bg-slate-700\/40 { background-color: rgba(51, 65, 85, 0.4) !important; }
html.dark .bg-slate-800 { background-color: rgb(30 41 59) !important; }
html.dark .bg-slate-800\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
html.dark .bg-slate-900 { background-color: rgb(17 24 39) !important; }
html.dark .bg-slate-900\/40 { background-color: rgba(17, 24, 39, 0.4) !important; }
html.dark .bg-slate-900\/60 { background-color: rgba(17, 24, 39, 0.6) !important; }
html.dark .bg-slate-900\/70 { background-color: rgba(17, 24, 39, 0.7) !important; }
html.dark .bg-slate-900\/80 { background-color: rgba(17, 24, 39, 0.8) !important; }
html.dark .bg-slate-900\/90 { background-color: rgba(17, 24, 39, 0.9) !important; }
html.dark .bg-slate-950 { background-color: rgb(8 11 22) !important; }
html.dark .bg-slate-950\/50 { background-color: rgba(8, 11, 22, 0.5) !important; }
html.dark .bg-slate-950\/60 { background-color: rgba(8, 11, 22, 0.6) !important; }
html.dark .bg-slate-950\/70 { background-color: rgba(8, 11, 22, 0.7) !important; }
html.dark .bg-slate-950\/80 { background-color: rgba(8, 11, 22, 0.8) !important; }
html.dark .bg-slate-950\/85 { background-color: rgba(8, 11, 22, 0.85) !important; }
html.dark .border-amber-500\/20 { border-color: rgba(217, 119, 6, 0.2) !important; }
html.dark .border-amber-500\/40 { border-color: rgba(217, 119, 6, 0.4) !important; }
html.dark .border-cyan-500 { border-color: rgb(6 182 212) !important; }
html.dark .border-cyan-500\/20 { border-color: rgba(6, 182, 212, 0.2) !important; }
html.dark .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3) !important; }
html.dark .border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4) !important; }
html.dark .border-pink-500 { border-color: rgb(179 24 78) !important; }
html.dark .border-pink-500\/20 { border-color: rgba(179, 24, 78, 0.2) !important; }
html.dark .border-pink-500\/30 { border-color: rgba(179, 24, 78, 0.3) !important; }
html.dark .border-pink-500\/40 { border-color: rgba(179, 24, 78, 0.4) !important; }
html.dark .border-red-500\/20 { border-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .border-rose-500\/20 { border-color: rgba(244, 63, 94, 0.2) !important; }
html.dark .border-rose-500\/40 { border-color: rgba(244, 63, 94, 0.4) !important; }
html.dark .border-slate-600\/40 { border-color: rgba(71, 85, 105, 0.4) !important; }
html.dark .border-slate-700 { border-color: rgb(51 65 85) !important; }
html.dark .border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .border-slate-800 { border-color: rgb(30 41 59) !important; }
html.dark .border-slate-800\/60 { border-color: rgba(30, 41, 59, 0.6) !important; }
html.dark .border-slate-800\/80 { border-color: rgba(30, 41, 59, 0.8) !important; }
html.dark .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(30, 41, 59, 0.6) !important; }
html.dark .divide-slate-800\/70 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(30, 41, 59, 0.7) !important; }
html.dark .from-emerald-600 { --tw-gradient-from: rgb(5 150 105) !important; }
html.dark .from-pink-500 { --tw-gradient-from: rgb(179 24 78) !important; }
html.dark .from-pink-600 { --tw-gradient-from: rgb(157 23 77) !important; }
html.dark .from-pink-950\/40 { --tw-gradient-from: rgba(80, 7, 36, 0.4) !important; }
html.dark .from-purple-600 { --tw-gradient-from: rgb(124 58 237) !important; }
html.dark .hover\:bg-amber-500\/20:hover { background-color: rgba(217, 119, 6, 0.2) !important; }
html.dark .hover\:bg-cyan-500\/20:hover { background-color: rgba(6, 182, 212, 0.2) !important; }
html.dark .hover\:bg-emerald-500:hover { background-color: rgb(16 185 129) !important; }
html.dark .hover\:bg-emerald-500\/20:hover { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .hover\:bg-pink-500:hover { background-color: rgb(179 24 78) !important; }
html.dark .hover\:bg-pink-500\/20:hover { background-color: rgba(179, 24, 78, 0.2) !important; }
html.dark .hover\:bg-rose-500\/10:hover { background-color: rgba(244, 63, 94, 0.1) !important; }
html.dark .hover\:bg-rose-500\/20:hover { background-color: rgba(244, 63, 94, 0.2) !important; }
html.dark .hover\:bg-slate-700:hover { background-color: rgb(51 65 85) !important; }
html.dark .hover\:bg-slate-800:hover { background-color: rgb(30 41 59) !important; }
html.dark .hover\:bg-slate-800\/60:hover { background-color: rgba(30, 41, 59, 0.6) !important; }
html.dark .hover\:bg-slate-900\/50:hover { background-color: rgba(17, 24, 39, 0.5) !important; }
html.dark .hover\:from-emerald-500:hover { --tw-gradient-from: rgb(16 185 129) !important; }
html.dark .hover\:from-pink-500:hover { --tw-gradient-from: rgb(179 24 78) !important; }
html.dark .hover\:text-cyan-400:hover { color: rgb(34 211 238) !important; }
html.dark .hover\:text-pink-400:hover { color: rgb(244 114 182) !important; }
html.dark .hover\:text-slate-200:hover { color: rgb(226 232 240) !important; }
html.dark .hover\:text-white:hover { color: rgb(255 255 255) !important; }
html.dark .hover\:to-rose-500:hover { --tw-gradient-to: rgb(244 63 94) !important; }
html.dark .hover\:to-teal-500:hover { --tw-gradient-to: rgb(20 184 166) !important; }
html.dark .text-amber-400 { color: rgb(251 191 36) !important; }
html.dark .text-amber-500 { color: rgb(217 119 6) !important; }
html.dark .text-cyan-400 { color: rgb(34 211 238) !important; }
html.dark .text-emerald-400 { color: rgb(52 211 153) !important; }
html.dark .text-pink-400 { color: rgb(244 114 182) !important; }
html.dark .text-pink-500 { color: rgb(179 24 78) !important; }
html.dark .text-purple-400 { color: rgb(167 139 250) !important; }
html.dark .text-rose-400 { color: rgb(251 113 133) !important; }
html.dark .text-slate-100 { color: rgb(241 245 249) !important; }
html.dark .text-slate-200 { color: rgb(226 232 240) !important; }
html.dark .text-slate-300 { color: rgb(203 213 225) !important; }
html.dark .text-slate-400 { color: rgb(148 163 184) !important; }
html.dark .text-slate-500 { color: rgb(100 116 139) !important; }
html.dark .text-slate-600 { color: rgb(71 85 105) !important; }
html.dark .text-white { color: rgb(255 255 255) !important; }
html.dark .to-amber-400 { --tw-gradient-to: rgb(251 191 36) !important; }
html.dark .to-emerald-400 { --tw-gradient-to: rgb(52 211 153) !important; }
html.dark .to-pink-500 { --tw-gradient-to: rgb(179 24 78) !important; }
html.dark .to-rose-500 { --tw-gradient-to: rgb(244 63 94) !important; }
html.dark .to-slate-900 { --tw-gradient-to: rgb(17 24 39) !important; }
html.dark .to-teal-500 { --tw-gradient-to: rgb(20 184 166) !important; }
html.dark .to-teal-600 { --tw-gradient-to: rgb(13 148 136) !important; }

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: rgb(var(--s-200));
    background-color: rgb(var(--s-950));
    transition: background-color .3s ease, color .3s ease;
}
html.dark body {
    background-image:
        radial-gradient(1100px 560px at 10% -10%, rgba(244, 114, 182, 0.08), transparent 60%),
        radial-gradient(1000px 520px at 100% 0%, rgba(139, 92, 246, 0.08), transparent 55%);
    background-attachment: fixed;
}

.font-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(179, 24, 78, 0.55); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
::selection { background: var(--brand-500); color: #fff; }

/* ---------- Cards: solid, bordered, restrained shadow (no glass/glow) ---------- */
.glass-card {
    background: rgb(var(--s-900));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .25s;
}
.glass-card:hover { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 16px 34px -16px rgba(15,23,42,.22); }
html.dark .glass-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 38px -16px rgba(0,0,0,.65); }

.glass-card-hover { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.glass-card-hover:hover { transform: translateY(-3px); }

/* ---------- Buttons ---------- */
button { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease; }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.bg-pink-600, a.bg-pink-600, button.bg-pink-500 {
    background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    box-shadow: 0 8px 18px -8px rgba(179, 24, 78, 0.45);
    color: #fff;
}
button.bg-pink-600:hover, button.bg-pink-500:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(179, 24, 78, 0.55); }

/* Keep literal white on solid-colored / gradient elements (text-white is
   remapped to dark ink for ordinary headings, so these need a carve-out).
   !important + placed AFTER the generated .text-white override above, so
   this wins the tie for any element that carries both classes at once
   (e.g. a button with bg-pink-600 AND text-white together). */
html:not(.dark) [class*="bg-pink-600"],
html:not(.dark) [class*="bg-pink-700"],
html:not(.dark) [class*="bg-emerald-600"],
html:not(.dark) [class*="bg-rose-600"],
html:not(.dark) [class*="bg-cyan-600"],
html:not(.dark) [class*="bg-amber-600"],
html:not(.dark) [class*="bg-purple-600"],
html:not(.dark) [class*="bg-indigo-600"],
html:not(.dark) [class*="bg-gradient-to"] { color: #fff !important; }

/* ---------- Forms ---------- */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
    border-color: var(--brand-500) !important;
}
::placeholder { color: rgb(var(--s-400)); opacity: .85; }
select option { background: rgb(var(--s-900)); color: rgb(var(--s-100)); }

/* ---------- Tables ---------- */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
table thead th { position: sticky; top: 0; z-index: 1; background: rgb(var(--s-900)); }
tbody tr { transition: background-color .15s ease; }
tbody tr { animation: rowIn .3s ease both; }
tbody tr:nth-child(1){animation-delay:.01s} tbody tr:nth-child(2){animation-delay:.03s}
tbody tr:nth-child(3){animation-delay:.05s} tbody tr:nth-child(4){animation-delay:.07s}
tbody tr:nth-child(5){animation-delay:.09s} tbody tr:nth-child(6){animation-delay:.11s}
tbody tr:nth-child(7){animation-delay:.13s} tbody tr:nth-child(8){animation-delay:.15s}
@keyframes rowIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- Nav items (content-independent; colors below in SIDEBAR block) ---------- */
.nav-item { position: relative; transition: background-color .18s, color .18s, transform .15s; }
.nav-item:hover { transform: translateX(3px); }

/* ---------- Modals ---------- */
[id^="modal"]:not(.hidden) { animation: fadeIn .2s ease; }
[id^="modal"]:not(.hidden) > div { animation: popIn .26s cubic-bezier(.2,.8,.2,1); background: rgb(var(--s-900)); }

/* ---------- Page + card entrance animations ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }

section[id^="view-"]:not(.hidden) { animation: fadeUp .4s ease both; }
section[id^="view-"]:not(.hidden) .grid > * { animation: fadeUp .5s ease both; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(1){ animation-delay: .03s; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(2){ animation-delay: .08s; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(3){ animation-delay: .13s; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(4){ animation-delay: .18s; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(5){ animation-delay: .23s; }
section[id^="view-"]:not(.hidden) .grid > *:nth-child(6){ animation-delay: .28s; }

/* ---------- Misc animations ---------- */
@keyframes softPulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .7; transform: scale(.97);} }
.animate-soft-pulse { animation: softPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 4s linear infinite; }

.skeleton {
    background: linear-gradient(90deg, rgba(148,163,184,.1) 25%, rgba(148,163,184,.22) 37%, rgba(148,163,184,.1) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

#themeToggle i { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#themeToggle:hover i { transform: rotate(-20deg) scale(1.1); }

/* ============================================================
   SIDEBAR — permanently dark, same look in both themes, so it
   is always legible and the project stays visually anchored no
   matter which content theme is active. Overrides win via
   !important against Tailwind's own (theme-toggled) utilities,
   with zero HTML/JS changes needed to the existing markup.
   ============================================================ */
.app-sidebar { background: #0B0E14; border-right: 1px solid rgba(255,255,255,.07); }

#sidebar .text-slate-500,
#sidebar .text-slate-400 { color: rgba(255,255,255,.55) !important; }
#sidebar .text-slate-300 { color: rgba(255,255,255,.8) !important; }
#sidebar .hover\:text-slate-200:hover { color: #F3F4F8 !important; }
#sidebar .hover\:bg-slate-800\/60:hover { background-color: rgba(255,255,255,.065) !important; }

#sidebar .bg-pink-500\/10 { background-color: rgba(244,114,182,.14) !important; }
#sidebar .border-pink-500\/20 { border-color: rgba(244,114,182,.3) !important; }
#sidebar .text-pink-400 { color: var(--on-dark-accent) !important; }
#sidebar .bg-pink-500\/20 { background-color: rgba(244,114,182,.22) !important; }
#sidebar .text-pink-300 { color: #F9A8D4 !important; }

#sidebar .bg-slate-800 { background-color: rgba(255,255,255,.1) !important; }
#sidebar .text-emerald-400 { color: #34D399 !important; }
#sidebar .to-emerald-400 { --tw-gradient-to: #34D399 !important; }

#sidebar .border-slate-800 { border-color: rgba(255,255,255,.08) !important; }
#sidebar .bg-slate-900\/40 { background-color: transparent !important; }
#sidebar .bg-slate-950\/70 { background-color: rgba(255,255,255,.05) !important; }

/* Active nav item: a crisp left accent bar instead of a translucent chip,
   avoids the generic "pink glow pill" look while staying unmistakable. */
#sidebar .nav-item.bg-pink-500\/10 { border-left: 3px solid var(--on-dark-accent) !important; padding-left: 9px !important; }

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */
body.sidebar-open { overflow: hidden; }

@media (max-width: 1023px) {
    #sidebar { box-shadow: 0 20px 60px -10px rgba(0,0,0,.5); width: 82vw; max-width: 20rem; }
    main { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 640px) {
    h1 { font-size: 1.05rem; }
    .nav-item { padding-top: .7rem; padding-bottom: .7rem; }
    section[id^="view-"] h2 { font-size: 1.25rem; line-height: 1.6rem; }
    table th, table td { padding-left: .85rem !important; padding-right: .85rem !important; padding-top: .7rem !important; padding-bottom: .7rem !important; }
    table { font-size: 12px; }
    button { min-height: 36px; }
    .backdrop-blur-md, .backdrop-blur-lg { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    [id^="modal"] > div { max-width: 100% !important; }
}

@supports (padding: max(0px)) {
    header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}