/* =====================================================================
   Fossil Stats — Distinctive Design System
   =====================================================================
   Eight FULLY distinct aesthetics, each with light + dark mode. The
   pages use Tailwind v2 utilities; a semantic CSS-variable layer remaps
   those utilities so colors/typography always work, then each design
   layers its own structure, layout, background atmosphere, fonts and
   decorative detail on top.

      Active design  -> html[data-design="1".."8"]
      Dark mode      -> html.dark

   Designs:
     1 Brutalist   2 Editorial   3 CRT Terminal   4 Cyber Glass
     5 Claymorph   6 Swiss       7 Organic        8 Art Deco
   ===================================================================== */

/* --------------------------------------------------------------------- */
/* 0. Semantic variable contract + Tailwind utility remap (all designs)  */
/* --------------------------------------------------------------------- */
html[data-design] {
    --font: ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-heading: var(--font);

    --bg-page: #f3f4f6;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f9fafb;
    --bg-inverse: #1f2937;

    --text-strong: #111827;
    --text-primary: #374151;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-faint: #9ca3af;

    --border: #e5e7eb;
    --border-width: 1px;

    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-contrast: #ffffff;
    --accent-soft-bg: #dbeafe;

    --positive: #16a34a;
    --positive-soft: #bbf7d0;
    --negative: #dc2626;
    --warning: #d97706;
    --warning-soft: #fefce8;

    --hover-bg: #f3f4f6;

    /* status / ranking highlights (online players, top-3 killers) */
    --hl-online-bg: #1f9d57;
    --hl-online-text: #ffffff;
    --medal-gold: #e0b341;
    --medal-silver: #aab1ba;
    --medal-bronze: #cd7f47;
    --hl-gold-tint: rgba(224, 179, 65, .18);
    --hl-silver-tint: rgba(170, 177, 186, .18);
    --hl-bronze-tint: rgba(205, 127, 71, .18);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px -2px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 28px -6px rgba(0,0,0,.14);

    --sidebar-bg: var(--bg-surface);
}
html[data-design].dark {
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 14px -2px rgba(0,0,0,.6);
    --shadow-lg: 0 14px 34px -6px rgba(0,0,0,.7);
    --hl-online-bg: #23a85d;
    --hl-gold-tint: rgba(224, 179, 65, .26);
    --hl-silver-tint: rgba(170, 177, 186, .24);
    --hl-bronze-tint: rgba(205, 127, 71, .26);
}

/* ---- utility remap ---- */
html[data-design] body {
    font-family: var(--font);
    background-color: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}
html[data-design] h1, html[data-design] h2, html[data-design] h3 { font-family: var(--font-heading); }

html[data-design] .bg-gray-100 { background-color: var(--bg-page); }
html[data-design] .bg-white    { background-color: var(--bg-surface); }
html[data-design] .bg-gray-50  { background-color: var(--bg-surface-alt); }
html[data-design] .bg-gray-800 { background-color: var(--bg-inverse); }
html[data-design] .bg-blue-50,
html[data-design] .bg-blue-100 { background-color: var(--accent-soft-bg); }
html[data-design] .bg-blue-500,
html[data-design] .bg-blue-600 { background-color: var(--accent); color: var(--accent-contrast); }
html[data-design] .bg-green-600,
html[data-design] .bg-green-700 { background-color: var(--positive); }
html[data-design] .bg-green-200 { background-color: var(--positive-soft); }
html[data-design] .bg-yellow-50 { background-color: var(--warning-soft); }

html[data-design] .text-gray-900,
html[data-design] .text-gray-800 { color: var(--text-strong); }
html[data-design] .text-gray-700 { color: var(--text-primary); }
html[data-design] .text-gray-600 { color: var(--text-secondary); }
html[data-design] .text-gray-500,
html[data-design] .text-gray-400 { color: var(--text-muted); }
html[data-design] .text-gray-300 { color: var(--text-faint); }
html[data-design] .text-blue-800,
html[data-design] .text-blue-700,
html[data-design] .text-blue-600 { color: var(--accent-strong); }
html[data-design] .text-blue-500 { color: var(--accent); }
html[data-design] .text-green-700,
html[data-design] .text-green-600 { color: var(--positive); }
html[data-design] .text-red-700,
html[data-design] .text-red-600 { color: var(--negative); }
html[data-design] .text-amber-600 { color: var(--warning); }

html[data-design] .border-gray-100,
html[data-design] .border-gray-200,
html[data-design] .border-gray-300 { border-color: var(--border); }
html[data-design] .border-blue-500 { border-color: var(--accent); }
html[data-design] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-design] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

html[data-design] .hover\:bg-gray-100:hover,
html[data-design] .hover\:bg-gray-50:hover { background-color: var(--hover-bg); }
html[data-design] .hover\:text-gray-900:hover { color: var(--text-strong); }
html[data-design] .hover\:text-gray-700:hover { color: var(--text-primary); }
html[data-design] .hover\:bg-blue-700:hover,
html[data-design] .hover\:bg-blue-600:hover { background-color: var(--accent-strong); }

html[data-design] .rounded    { border-radius: var(--radius-sm); }
html[data-design] .rounded-md { border-radius: var(--radius-md); }
html[data-design] .rounded-lg { border-radius: var(--radius-lg); }

html[data-design] .shadow-sm { box-shadow: var(--shadow-sm); }
html[data-design] .shadow,
html[data-design] .shadow-md { box-shadow: var(--shadow-md); }
html[data-design] .shadow-lg { box-shadow: var(--shadow-lg); }

html[data-design] input, html[data-design] select, html[data-design] textarea {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
html[data-design] input::placeholder { color: var(--text-faint); }
html[data-design] input:focus, html[data-design] select:focus, html[data-design] textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft-bg);
}
html[data-design] table { color: var(--text-primary); }
html[data-design] thead { color: var(--text-secondary); }
html[data-design] .ui-autocomplete {
    background: var(--bg-surface); border-color: var(--border);
    color: var(--text-primary); box-shadow: var(--shadow-md);
}
html[data-design] .ui-menu-item { border-bottom-color: var(--border); }
html[data-design] .ui-state-active { background: var(--accent) !important; color: var(--accent-contrast) !important; }

/* sidebar surface + a soft page-load reveal shared by all designs */
html[data-design] .mobile-menu,
html[data-design] .lg\:w-64 { background-color: var(--sidebar-bg); }
html[data-design] main > div { animation: fv-rise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html[data-design] main > div { animation: none; }
}
html[data-design] main { padding-bottom: 2rem; }

/* ---- status / ranking highlights (theme-aware, guaranteed contrast) ---- */
/* "currently online" chip — solid so text is always readable */
html[data-design] .fv-online {
    background-color: var(--hl-online-bg);
    color: var(--hl-online-text) !important;
    border-radius: var(--radius-sm);
}
html[data-design] .fv-online a { color: var(--hl-online-text) !important; }

/* top-3 podium rows — translucent medal tint keeps cell text legible */
html[data-design] .fv-rank-1 { background-color: var(--hl-gold-tint); }
html[data-design] .fv-rank-2 { background-color: var(--hl-silver-tint); }
html[data-design] .fv-rank-3 { background-color: var(--hl-bronze-tint); }
html[data-design] .fv-rank-1:hover { background-color: var(--hl-gold-tint); }
html[data-design] .fv-rank-2:hover { background-color: var(--hl-silver-tint); }
html[data-design] .fv-rank-3:hover { background-color: var(--hl-bronze-tint); }
html[data-design] .fv-rank-1 > td:first-child { border-left: 4px solid var(--medal-gold); }
html[data-design] .fv-rank-2 > td:first-child { border-left: 4px solid var(--medal-silver); }
html[data-design] .fv-rank-3 > td:first-child { border-left: 4px solid var(--medal-bronze); }

/* medal rank badge */
.fv-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 9999px;
    font-weight: 700; font-size: .8rem; line-height: 1; color: #1a1a1a;
}
.fv-medal-1 { background: var(--medal-gold); }
.fv-medal-2 { background: var(--medal-silver); }
.fv-medal-3 { background: var(--medal-bronze); color: #fff; }

/* ---- online-highlight green, tuned to each theme's palette ---- */
/* warm/earthy and pastel themes get a green that sits in-palette rather
   than a generic emerald; placed after the design blocks via specificity. */
html[data-design="2"] { --hl-online-bg: #4f7a43; --hl-online-text: #fbf7ec; }   /* editorial sage */
html[data-design="2"].dark { --hl-online-bg: #6b9456; --hl-online-text: #16140f; }
html[data-design="3"] { --hl-online-bg: #5f7d2a; --hl-online-text: #fbf6e3; }   /* terminal olive (amber paper) */
html[data-design="3"].dark { --hl-online-bg: #86efac; --hl-online-text: #02140a; }  /* bright phosphor, pops on dark */
html[data-design="5"] { --hl-online-bg: #3fbf94; --hl-online-text: #ffffff; }   /* clay mint */
html[data-design="5"].dark { --hl-online-bg: #4bcb9f; --hl-online-text: #102a22; }
html[data-design="7"] { --hl-online-bg: #5a7d3c; --hl-online-text: #fbf7ec; }   /* organic leaf */
html[data-design="7"].dark { --hl-online-bg: #7aa353; --hl-online-text: #161d15; }
html[data-design="8"] { --hl-online-bg: #2f6f4f; --hl-online-text: #fbf7ec; }   /* deco emerald */
html[data-design="8"].dark { --hl-online-bg: #3f8a64; --hl-online-text: #07211c; }

/* ---- section header bar (e.g. highscores vocation columns) ---- */
/* Uses the theme accent + its contrast so it's always legible — the old
   bg-gray-800 + literal white text became unreadable in dark mode on themes
   whose inverse surface is light (editorial, swiss, ...). */
html[data-design] .section-header { background-color: var(--accent); color: var(--accent-contrast); }
html[data-design] .section-header a { color: var(--accent-contrast); }

/* ---- grouped navigation (Stats / Calculators / Wiki) ---- */
[x-cloak] { display: none !important; }
html[data-design] .nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; text-align: left; cursor: pointer; background: transparent;
    font: inherit; border: 0;
}
html[data-design] .nav-caret { width: 1rem; height: 1rem; flex-shrink: 0; opacity: .55; transition: transform .2s; }
html[data-design] .nav-caret.is-open { transform: rotate(180deg); }
html[data-design] .nav-submenu { display: block; }
html[data-design] .nav-submenu > li > a { padding-left: 2rem; font-size: .95em; }

/* masthead themes set `nav a { padding: .. 0 !important }`, which kills the
   submenu indent in the mobile accordion — restore it on small screens */
@media (max-width: 1024px) {
    html[data-design="2"] .nav-submenu > li > a,
    html[data-design="6"] .nav-submenu > li > a,
    html[data-design="8"] .nav-submenu > li > a {
        padding: .4rem 1rem .4rem 2rem !important;
    }
}

/* Top-level group labels should read as the header. On themes that uppercase
   their nav links, the toggle (a <button>, not an <a>) missed that styling and
   ended up looking less important than its uppercased subitems — match it. */
html[data-design="1"] .nav-group-toggle,
html[data-design="2"] .nav-group-toggle,
html[data-design="3"] .nav-group-toggle,
html[data-design="4"] .nav-group-toggle,
html[data-design="6"] .nav-group-toggle,
html[data-design="8"] .nav-group-toggle {
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}

/* Editorial marks the active submenu item with a left accent bar instead of a
   full-row bottom underline (which spanned the whole accordion row). */
html[data-design="2"] .nav-submenu > li > a { border-bottom: none !important; border-left: 3px solid transparent; }
html[data-design="2"] .nav-submenu > li > a.bg-blue-100 { border-left-color: var(--accent); }

@media (min-width: 1024px) {
    /* masthead designs: top-level groups in a row, submenus as dropdowns */
    html[data-design="2"] .nav-group,
    html[data-design="6"] .nav-group,
    html[data-design="8"] .nav-group { position: relative; }
    html[data-design="2"] .nav-group-toggle,
    html[data-design="6"] .nav-group-toggle,
    html[data-design="8"] .nav-group-toggle {
        width: auto; justify-content: flex-start; gap: .3rem;
        text-transform: uppercase; white-space: nowrap;
    }
    html[data-design="2"] .mobile-menu .nav-submenu,
    html[data-design="6"] .mobile-menu .nav-submenu,
    html[data-design="8"] .mobile-menu .nav-submenu {
        display: block; position: absolute; top: 100%; left: 0; z-index: 60;
        min-width: 12rem; padding: .4rem; margin-top: .4rem;
        background-color: var(--bg-surface);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    /* transparent bridge over the gap so moving cursor down keeps it open */
    html[data-design="2"] .mobile-menu .nav-submenu::before,
    html[data-design="6"] .mobile-menu .nav-submenu::before,
    html[data-design="8"] .mobile-menu .nav-submenu::before {
        content: ""; position: absolute; left: 0; right: 0; top: -.4rem; height: .4rem;
    }
    html[data-design="2"] .mobile-menu .nav-submenu > li > a,
    html[data-design="6"] .mobile-menu .nav-submenu > li > a,
    html[data-design="8"] .mobile-menu .nav-submenu > li > a {
        padding: .4rem .6rem !important; white-space: nowrap; border-bottom: none !important;
    }
}

/* ---- unified data table (shared by every page with a data grid) ---- */
/* One readable, theme-aware style so all tables match and headers stay
   legible in dark mode (replaces ad-hoc bg-gray-800/bg-gray-50/bordered
   variants). Cell text colour/alignment is left to utility classes so
   coloured values and links keep their colours. */
html[data-design] table.data-table { width: 100%; border-collapse: collapse; }
html[data-design] table.data-table thead { background-color: var(--bg-surface-alt); }
html[data-design] table.data-table th {
    padding: .5rem 1rem; border: 1px solid var(--border);
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-secondary);
}
html[data-design] table.data-table td { padding: .5rem 1rem; border: 1px solid var(--border); }
html[data-design] table.data-table tbody tr:hover { background-color: var(--hover-bg); }

/* ---- unified page scaffolding (shared by every page) ---- */
html[data-design] .page-container { width: 100%; max-width: 72rem; margin-inline: auto; }
html[data-design] .page-header { margin: 0 0 1.5rem; }
html[data-design] .page-title { font-size: 1.875rem; line-height: 1.15; font-weight: 700; color: var(--text-strong); margin: 0; }
html[data-design] .page-subtitle { margin: .45rem 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 768px) { html[data-design] .page-title { font-size: 1.5rem; } }


/* ===================================================================== */
/* 1. BRUTALIST — raw mono, hard offset shadows, grid paper              */
/* ===================================================================== */
html[data-design="1"] {
    --font: "JetBrains Mono", ui-monospace, monospace;
    --font-heading: "Archivo Black", "JetBrains Mono", sans-serif;
    --bg-page: #ecebe6;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f4f3ee;
    --bg-inverse: #111111;
    --text-strong: #111111;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #555555;
    --text-faint: #888888;
    --border: #111111;
    --border-width: 3px;
    --accent: #ff4d00;
    --accent-strong: #d93f00;
    --accent-contrast: #ffffff;
    --accent-soft-bg: #ffe14d;
    --positive: #007a3d;
    --negative: #c81d11;
    --warning: #b45309;
    --hover-bg: #ffe14d;
    --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
}
html[data-design="1"].dark {
    --bg-page: #0d0d0d;
    --bg-surface: #161616;
    --bg-surface-alt: #1d1d1d;
    --bg-inverse: #ffe14d;
    --text-strong: #f5f5f5;
    --text-primary: #ededed;
    --text-secondary: #cfcfcf;
    --text-muted: #9a9a9a;
    --text-faint: #6a6a6a;
    --border: #f5f5f5;
    --accent: #ffe14d;
    --accent-strong: #ffd000;
    --accent-contrast: #111111;
    --accent-soft-bg: #2a2a2a;
    --hover-bg: #2a2a2a;
    --positive: #4ade80;
    --negative: #f87171;
}
html[data-design="1"] body {
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
    background-attachment: fixed;
}
html[data-design="1"].dark body { background-image:
        linear-gradient(rgba(245,245,245,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,245,245,.06) 1px, transparent 1px); }
html[data-design="1"] .shadow,
html[data-design="1"] .shadow-md { box-shadow: 6px 6px 0 0 var(--border); border: 3px solid var(--border); }
html[data-design="1"] .shadow-lg { box-shadow: 10px 10px 0 0 var(--border); border: 3px solid var(--border); }
html[data-design="1"] .shadow-sm { box-shadow: 3px 3px 0 0 var(--border); border: 2px solid var(--border); }
html[data-design="1"] .mobile-menu, html[data-design="1"] .lg\:w-64 {
    border-right: 3px solid var(--border); box-shadow: none !important;
}
html[data-design="1"] h1 { text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
html[data-design="1"] .p-6 > h1 + div { width: 100% !important; height: 6px !important; background: var(--accent) !important; }
html[data-design="1"] nav a {
    text-transform: uppercase; font-weight: 700; letter-spacing: .03em;
    border: 2px solid transparent;
}
html[data-design="1"] nav a:hover { border-color: var(--border); }
html[data-design="1"] nav a.bg-blue-100 { background: var(--accent) !important; color: var(--accent-contrast) !important; box-shadow: 4px 4px 0 var(--border); }
html[data-design="1"] input { border-width: 2px !important; }


/* ===================================================================== */
/* 2. EDITORIAL — magazine masthead (top nav), serif, airy columns       */
/* ===================================================================== */
html[data-design="2"] {
    --font: "Newsreader", Georgia, serif;
    --font-heading: "Fraunces", Georgia, serif;
    --bg-page: #f7f3ea;
    --bg-surface: #fffdf8;
    --bg-surface-alt: #f3eee2;
    --bg-inverse: #1c1a17;
    --text-strong: #1a1714;
    --text-primary: #2c2823;
    --text-secondary: #4a443c;
    --text-muted: #7a7264;
    --text-faint: #a89e8c;
    --border: #ddd3c0;
    --accent: #9c2b1b;
    --accent-strong: #7a1f12;
    --accent-contrast: #fffdf8;
    --accent-soft-bg: #f0e4d6;
    --positive: #3f6b2f;
    --negative: #9c2b1b;
    --hover-bg: #f0e7d8;
    --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px;
}
html[data-design="2"].dark {
    --bg-page: #16140f;
    --bg-surface: #1f1c16;
    --bg-surface-alt: #242019;
    --bg-inverse: #f0e9da;
    --text-strong: #f3ecdd;
    --text-primary: #e2dac9;
    --text-secondary: #c4baa6;
    --text-muted: #968c79;
    --text-faint: #6b6356;
    --border: #3a352b;
    --accent: #e0856f;
    --accent-strong: #eaa18e;
    --accent-contrast: #16140f;
    --accent-soft-bg: #2c2820;
    --hover-bg: #2a261e;
}
/* turn the sidebar into a full-width masthead (desktop only — the mobile
   drawer override at the end of the file keeps small screens working) */
html[data-design="2"] .lg\:flex-row { flex-direction: column; }
html[data-design="2"] .mobile-menu,
html[data-design="2"] .lg\:w-64 { width: 100% !important; box-shadow: none !important; border-bottom: 1px solid var(--border); }
@media (min-width: 1024px) {
    html[data-design="2"] .mobile-menu .p-6 {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1.25rem 2rem;
        max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem;
    }
    html[data-design="2"] .mobile-menu .p-6 > h1 { grid-column: 1; margin: 0; }
    html[data-design="2"] .mobile-menu .p-6 > h1 + div { display: none; }
    html[data-design="2"] .mobile-menu .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; width: auto; margin: 0; }
    html[data-design="2"] .mobile-menu .p-6 > .mb-6 { grid-column: 2; grid-row: 1; margin: 0; max-width: 280px; justify-self: end; }
    html[data-design="2"] .mobile-menu .p-6 > nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--border); padding-top: 1rem; }
    html[data-design="2"] .mobile-menu nav ul { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
    html[data-design="2"] .mobile-menu nav a { white-space: nowrap; }
    html[data-design="2"] .mobile-menu nav > ul > * + * { margin-top: 0 !important; }
    /* match the content width to the masthead so the nav lines up with it */
    html[data-design="2"] main > div { max-width: 1280px; margin: 0 auto; }
    html[data-design="2"] .page-container { max-width: none; }
}
html[data-design="2"] h1 { font-weight: 600; font-style: italic; letter-spacing: -.01em; }
html[data-design="2"] nav a {
    text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
    padding: .35rem 0 !important; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent !important;
}
html[data-design="2"] nav a:hover { border-bottom-color: var(--accent); color: var(--accent) !important; }
html[data-design="2"] nav a.bg-blue-100 { color: var(--accent) !important; border-bottom-color: var(--accent); }
html[data-design="2"] h2 { font-weight: 600; }
html[data-design="2"] .shadow, html[data-design="2"] .shadow-md, html[data-design="2"] .shadow-lg {
    box-shadow: none; border-top: 3px solid var(--text-strong);
}


/* ===================================================================== */
/* 3. CRT TERMINAL — scanlines, phosphor glow, box frames, $ prompt      */
/* ===================================================================== */
html[data-design="3"] {
    --font: "VT323", "JetBrains Mono", ui-monospace, monospace;
    --font-heading: "VT323", monospace;
    --bg-page: #f3ecd2;
    --bg-surface: #fbf6e3;
    --bg-surface-alt: #efe6c6;
    --bg-inverse: #2a2410;
    --text-strong: #2a2410;
    --text-primary: #3a3214;
    --text-secondary: #4c421c;
    --text-muted: #7a6c38;
    --text-faint: #a89a60;
    --border: #cfc08a;
    --accent: #9a6a00;
    --accent-strong: #6f4d00;
    --accent-contrast: #fbf6e3;
    --accent-soft-bg: #ece0b0;
    --positive: #4d7c0f;
    --negative: #a01b1b;
    --hover-bg: #ece0b0;
    --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
    --crt-glow: rgba(154,106,0,.25);
}
html[data-design="3"].dark {
    --bg-page: #020a04;
    --bg-surface: #04140a;
    --bg-surface-alt: #061c0d;
    --bg-inverse: #4ade80;
    --text-strong: #86efac;
    --text-primary: #4ade80;
    --text-secondary: #34d56b;
    --text-muted: #1f9d4f;
    --text-faint: #157a3a;
    --border: #14532d;
    --accent: #39ff14;
    --accent-strong: #86efac;
    --accent-contrast: #020a04;
    --accent-soft-bg: #052e16;
    --positive: #39ff14;
    --negative: #ff5555;
    --hover-bg: #08240f;
    --crt-glow: rgba(57,255,20,.55);
}
html[data-design="3"] { font-size: 1.05rem; }
html[data-design="3"] body { letter-spacing: .02em; }
html[data-design="3"] body::after {
    content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}
html[data-design="3"].dark body::after {
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.45) 0 1px, transparent 1px 3px);
    mix-blend-mode: normal;
}
html[data-design="3"].dark body::before {
    content: ""; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
html[data-design="3"] h1, html[data-design="3"] h2 { text-shadow: 0 0 8px var(--crt-glow); text-transform: uppercase; }
html[data-design="3"] .shadow, html[data-design="3"] .shadow-md, html[data-design="3"] .shadow-lg, html[data-design="3"] .shadow-sm {
    box-shadow: none; border: 1px solid var(--border); position: relative;
}
html[data-design="3"] nav a { text-transform: uppercase; }
html[data-design="3"] nav a::before { content: "$ "; color: var(--accent); }
html[data-design="3"] h1::after {
    content: "_"; animation: fv-blink 1.1s steps(1) infinite; color: var(--accent);
}
@keyframes fv-blink { 50% { opacity: 0; } }
html[data-design="3"].dark { text-shadow: 0 0 2px var(--crt-glow); }


/* ===================================================================== */
/* 4. CYBER GLASS — animated mesh, neon glass panels, clipped corners     */
/* ===================================================================== */
html[data-design="4"] {
    --font: "Rajdhani", ui-sans-serif, sans-serif;
    --font-heading: "Orbitron", sans-serif;
    --bg-page: #e9ecff;
    --bg-surface: rgba(255,255,255,.65);
    --bg-surface-alt: rgba(255,255,255,.45);
    --bg-inverse: #0a0e27;
    --text-strong: #15123a;
    --text-primary: #2a2660;
    --text-secondary: #4b46a0;
    --text-muted: #7b76c0;
    --text-faint: #a9a4dd;
    --border: rgba(120,90,255,.35);
    --accent: #d400ff;
    --accent-strong: #00d4ff;
    --accent-contrast: #ffffff;
    --accent-soft-bg: rgba(212,0,255,.12);
    --positive: #00b894;
    --negative: #ff3d71;
    --hover-bg: rgba(212,0,255,.10);
    --radius-md: 2px; --radius-lg: 2px;
}
html[data-design="4"].dark {
    --bg-page: #05030f;
    --bg-surface: rgba(20,16,48,.55);
    --bg-surface-alt: rgba(28,22,64,.45);
    --bg-inverse: #00d4ff;
    --text-strong: #f0f4ff;
    --text-primary: #d2d8ff;
    --text-secondary: #a9b0ee;
    --text-muted: #7a82c8;
    --text-faint: #565d96;
    --border: rgba(0,212,255,.35);
    --accent: #ff00e5;
    --accent-strong: #00f0ff;
    --accent-contrast: #05030f;
    --accent-soft-bg: rgba(255,0,229,.15);
    --hover-bg: rgba(0,212,255,.12);
}
html[data-design="4"] body {
    background-color: var(--bg-page);
    background-image:
        radial-gradient(40% 50% at 12% 18%, rgba(212,0,255,.30), transparent 60%),
        radial-gradient(45% 55% at 88% 22%, rgba(0,212,255,.28), transparent 60%),
        radial-gradient(50% 60% at 50% 100%, rgba(120,0,255,.25), transparent 60%);
    background-attachment: fixed;
    background-size: 200% 200%;
    animation: fv-mesh 18s ease-in-out infinite alternate;
}
@keyframes fv-mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { html[data-design="4"] body { animation: none; } }
html[data-design="4"] .bg-white, html[data-design="4"] .shadow, html[data-design="4"] .shadow-md, html[data-design="4"] .shadow-lg,
html[data-design="4"] .mobile-menu, html[data-design="4"] .lg\:w-64 {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(80,0,160,.20), inset 0 1px 0 rgba(255,255,255,.25);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
html[data-design="4"] h1, html[data-design="4"] h2 { text-transform: uppercase; letter-spacing: .08em; }
html[data-design="4"] h1 { text-shadow: 0 0 16px var(--accent); }
html[data-design="4"] nav a { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; position: relative; }
html[data-design="4"] nav a:hover { box-shadow: inset 0 0 0 1px var(--accent); text-shadow: 0 0 8px var(--accent); }
html[data-design="4"] nav a.bg-blue-100 { box-shadow: inset 0 0 0 1px var(--accent-strong); text-shadow: 0 0 10px var(--accent-strong); }


/* ===================================================================== */
/* 5. CLAYMORPHISM — soft pastel, puffy extruded shapes, rounded font     */
/* ===================================================================== */
html[data-design="5"] {
    --font: "Quicksand", ui-sans-serif, sans-serif;
    --font-heading: "Baloo 2", "Quicksand", sans-serif;
    --bg-page: #eef0ff;
    --bg-surface: #f5f3ff;
    --bg-surface-alt: #ebe8fb;
    --bg-inverse: #4c3f8f;
    --text-strong: #3d3473;
    --text-primary: #4a4185;
    --text-secondary: #635aa3;
    --text-muted: #8d85c0;
    --text-faint: #b3aede;
    --border: #ddd8f7;
    --accent: #ff7eb6;
    --accent-strong: #f368a3;
    --accent-contrast: #ffffff;
    --accent-soft-bg: #ffe1ef;
    --positive: #45c4a0;
    --negative: #ff6b6b;
    --hover-bg: #e7e3fb;
    --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px;
    --clay-light: rgba(255,255,255,.9);
    --clay-dark: rgba(80,60,160,.18);
}
html[data-design="5"].dark {
    --bg-page: #1c1830;
    --bg-surface: #262040;
    --bg-surface-alt: #2c2548;
    --bg-inverse: #c9bdff;
    --text-strong: #efeaff;
    --text-primary: #ddd5ff;
    --text-secondary: #bcb2ee;
    --text-muted: #8c83c0;
    --text-faint: #635a92;
    --border: #383058;
    --accent: #ff8ec4;
    --accent-strong: #ffa6d2;
    --accent-contrast: #1c1830;
    --accent-soft-bg: #3a2f55;
    --hover-bg: #322a52;
    --clay-light: rgba(150,130,230,.18);
    --clay-dark: rgba(0,0,0,.4);
}
html[data-design="5"] .shadow, html[data-design="5"] .shadow-md, html[data-design="5"] .shadow-lg,
html[data-design="5"] .mobile-menu, html[data-design="5"] .lg\:w-64 {
    box-shadow: 8px 8px 18px var(--clay-dark), -8px -8px 18px var(--clay-light);
    border: none;
}
html[data-design="5"] .shadow-sm { box-shadow: 4px 4px 10px var(--clay-dark), -4px -4px 10px var(--clay-light); }
html[data-design="5"] input {
    border: none !important;
    box-shadow: inset 3px 3px 7px var(--clay-dark), inset -3px -3px 7px var(--clay-light);
}
html[data-design="5"] nav a { font-weight: 600; }
html[data-design="5"] nav a:hover { box-shadow: 4px 4px 10px var(--clay-dark), -4px -4px 10px var(--clay-light); }
html[data-design="5"] nav a.bg-blue-100 {
    background: var(--accent) !important; color: var(--accent-contrast) !important;
    box-shadow: 4px 4px 12px var(--clay-dark), -4px -4px 12px var(--clay-light);
}
html[data-design="5"] .p-6 > h1 + div { background: var(--accent) !important; height: 6px !important; width: 36px !important; border-radius: 9999px; }
html[data-design="5"] h1 { font-weight: 700; }


/* ===================================================================== */
/* 6. SWISS — strict grid, Anton display, numbered nav, black/white/red   */
/* ===================================================================== */
html[data-design="6"] {
    --font: "Archivo", ui-sans-serif, sans-serif;
    --font-heading: "Anton", "Archivo", sans-serif;
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f5f5f5;
    --bg-inverse: #111111;
    --text-strong: #0a0a0a;
    --text-primary: #1a1a1a;
    --text-secondary: #404040;
    --text-muted: #6b6b6b;
    --text-faint: #a3a3a3;
    --border: #111111;
    --border-width: 1px;
    --accent: #e60023;
    --accent-strong: #c4001d;
    --accent-contrast: #ffffff;
    --accent-soft-bg: #ffe3e6;
    --positive: #0a0a0a;
    --negative: #e60023;
    --hover-bg: #f0f0f0;
    --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
}
html[data-design="6"].dark {
    --bg-page: #0a0a0a;
    --bg-surface: #0a0a0a;
    --bg-surface-alt: #161616;
    --bg-inverse: #fafafa;
    --text-strong: #fafafa;
    --text-primary: #e8e8e8;
    --text-secondary: #b5b5b5;
    --text-muted: #808080;
    --text-faint: #555555;
    --border: #fafafa;
    --accent: #ff3b30;
    --accent-strong: #ff6259;
    --accent-contrast: #0a0a0a;
    --accent-soft-bg: #2a0d0d;
    --hover-bg: #1a1a1a;
    /* light mode uses near-black for "increase" (mono aesthetic); on dark that
       vanished — use light for increase, red for decrease, both readable */
    --positive: #fafafa;
    --negative: #ff5c54;
}
html[data-design="6"] .lg\:flex-row { flex-direction: column; }
html[data-design="6"] .mobile-menu,
html[data-design="6"] .lg\:w-64 { width: 100% !important; box-shadow: none !important; border-bottom: 1px solid var(--border); }
@media (min-width: 1024px) {
    html[data-design="6"] .mobile-menu .p-6 {
        display: grid; grid-template-columns: 1fr auto auto; align-items: center;
        gap: 0 2rem; padding: 1rem 2.5rem;
    }
    html[data-design="6"] .mobile-menu .p-6 > h1 + div { display: none; }
    html[data-design="6"] .mobile-menu .p-6 > .mb-6 { grid-row: 1; grid-column: 2; margin: 0; width: 220px; }
    html[data-design="6"] .mobile-menu .theme-toggle { grid-row: 1; grid-column: 3; width: auto; margin: 0; }
    html[data-design="6"] .mobile-menu .p-6 > nav { grid-row: 2; grid-column: 1 / -1; margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .5rem; }
    html[data-design="6"] .mobile-menu nav ul { display: flex; flex-wrap: wrap; gap: 0 2rem; counter-reset: nav; }
    html[data-design="6"] .mobile-menu nav > ul > * + * { margin-top: 0 !important; }
}
html[data-design="6"] h1 { font-size: 2rem; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; }
html[data-design="6"] nav { counter-reset: nav; }
html[data-design="6"] nav a {
    text-transform: uppercase; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
    background: transparent !important; padding: .3rem 0 !important; display: flex; gap: .5rem; align-items: baseline;
}
html[data-design="6"] nav a::before {
    counter-increment: nav; content: counter(nav, decimal-leading-zero);
    color: var(--accent); font-size: .65rem; font-weight: 700;
}
html[data-design="6"] nav a:hover { color: var(--accent) !important; }
html[data-design="6"] nav a.bg-blue-100 { color: var(--accent) !important; }
html[data-design="6"] .shadow, html[data-design="6"] .shadow-md, html[data-design="6"] .shadow-lg, html[data-design="6"] .shadow-sm {
    box-shadow: none; border: 1px solid var(--border);
}
html[data-design="6"] h2 { text-transform: uppercase; letter-spacing: .01em; }


/* ===================================================================== */
/* 7. ORGANIC — earthy, blob shapes, grain, serif + handwritten accents   */
/* ===================================================================== */
html[data-design="7"] {
    --font: "Karla", ui-sans-serif, sans-serif;
    --font-heading: "DM Serif Display", Georgia, serif;
    --bg-page: #f4efe4;
    --bg-surface: #fbf7ec;
    --bg-surface-alt: #efe8d6;
    --bg-inverse: #2e3b2a;
    --text-strong: #2c3326;
    --text-primary: #3c4434;
    --text-secondary: #586049;
    --text-muted: #847c64;
    --text-faint: #b3a98c;
    --border: #ddd1b4;
    --accent: #c2683a;
    --accent-strong: #a4512a;
    --accent-contrast: #fbf7ec;
    --accent-soft-bg: #ecdcc4;
    --positive: #5a7d3c;
    --negative: #b04a2f;
    --hover-bg: #ebe2cd;
    --radius-sm: 14px; --radius-md: 20px; --radius-lg: 30px;
}
html[data-design="7"].dark {
    --bg-page: #161d15;
    --bg-surface: #1e271c;
    --bg-surface-alt: #232d20;
    --bg-inverse: #e7dcc4;
    --text-strong: #ece4d2;
    --text-primary: #d8cfb9;
    --text-secondary: #b3ad95;
    --text-muted: #847e68;
    --text-faint: #5a5644;
    --border: #353f30;
    --accent: #e08a52;
    --accent-strong: #eda069;
    --accent-contrast: #161d15;
    --accent-soft-bg: #2c3526;
    --hover-bg: #28311f;
}
html[data-design="7"] body {
    background-image:
        radial-gradient(60% 50% at 100% 0%, rgba(90,125,60,.16), transparent 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(194,104,58,.14), transparent 60%);
    background-attachment: fixed;
}
html[data-design="7"] .mobile-menu, html[data-design="7"] .lg\:w-64 {
    border-radius: 0 32px 32px 0; box-shadow: var(--shadow-md);
}
html[data-design="7"] .shadow, html[data-design="7"] .shadow-md {
    border-radius: 24px 30px 26px 32px / 30px 26px 32px 24px;
}
html[data-design="7"] h1 { font-weight: 400; }
html[data-design="7"] .p-6 > h1 + div {
    height: 4px !important; width: 60px !important; background: var(--accent) !important;
    border-radius: 9999px; transform: rotate(-1.5deg);
}
html[data-design="7"] nav a:hover { background: var(--accent-soft-bg) !important; }
html[data-design="7"] nav a.bg-blue-100 { background: var(--accent-soft-bg) !important; color: var(--accent-strong) !important; }


/* ===================================================================== */
/* 8. ART DECO — gold + emerald, geometric pattern, ornamented frames     */
/* ===================================================================== */
html[data-design="8"] {
    --font: "Jost", ui-sans-serif, sans-serif;
    --font-heading: "Marcellus", Georgia, serif;
    --bg-page: #f3ede0;
    --bg-surface: #fbf7ec;
    --bg-surface-alt: #efe6d2;
    --bg-inverse: #0e3b32;
    --text-strong: #123c33;
    --text-primary: #1d463c;
    --text-secondary: #356055;
    --text-muted: #6f8a80;
    --text-faint: #a8b8af;
    --border: #c9a85f;
    --accent: #b8902f;
    --accent-strong: #95721f;
    --accent-contrast: #fbf7ec;
    --accent-soft-bg: #ece0c0;
    --positive: #2f6f4f;
    --negative: #9c3b2f;
    --hover-bg: #ece2cb;
    --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
}
html[data-design="8"].dark {
    --bg-page: #07211c;
    --bg-surface: #0c2c25;
    --bg-surface-alt: #103730;
    --bg-inverse: #d4af52;
    --text-strong: #f1e7cd;
    --text-primary: #e0d3b0;
    --text-secondary: #c2b78f;
    --text-muted: #8a936f;
    --text-faint: #5d6b52;
    --border: #c9a85f;
    --accent: #e6c46a;
    --accent-strong: #f0d488;
    --accent-contrast: #07211c;
    --accent-soft-bg: #123730;
    --hover-bg: #103a31;
}
html[data-design="8"] .lg\:flex-row { flex-direction: column; }
html[data-design="8"] .mobile-menu,
html[data-design="8"] .lg\:w-64 { width: 100% !important; box-shadow: none !important; border-bottom: 2px solid var(--accent); }
@media (min-width: 1024px) {
    /* compact, symmetric masthead: wordmark centred, toggle parked right,
       search + a single-row nav beneath */
    html[data-design="8"] .mobile-menu .p-6 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 1rem; row-gap: .55rem;
        padding: .9rem 2rem 1rem; max-width: 1280px; margin: 0 auto;
    }
    html[data-design="8"] .mobile-menu .p-6 > h1 { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
    html[data-design="8"] .mobile-menu .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; width: auto; margin: 0; }
    html[data-design="8"] .mobile-menu .p-6 > .mb-6 { grid-column: 1 / -1; grid-row: 2; width: 260px; margin: 0 auto; }
    html[data-design="8"] .mobile-menu .p-6 > nav { grid-column: 1 / -1; grid-row: 3; }
    html[data-design="8"] .mobile-menu nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; }
    html[data-design="8"] .mobile-menu nav a { white-space: nowrap; }
    html[data-design="8"] .mobile-menu nav > ul > * + * { margin-top: 0 !important; }
}
html[data-design="8"] body {
    background-image: repeating-linear-gradient(45deg, transparent 0 22px, rgba(184,144,47,.05) 22px 23px),
                      repeating-linear-gradient(-45deg, transparent 0 22px, rgba(184,144,47,.05) 22px 23px);
    background-attachment: fixed;
}
html[data-design="8"] h1 {
    text-transform: uppercase; letter-spacing: .22em; font-weight: 400;
    border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    padding: .35rem 0; display: inline-block;
}
html[data-design="8"] .p-6 > h1 + div { display: none; }
html[data-design="8"] nav a {
    text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
    background: transparent !important; border-radius: 0;
}
html[data-design="8"] nav a:hover, html[data-design="8"] nav a.bg-blue-100 { color: var(--accent) !important; }
html[data-design="8"] .shadow, html[data-design="8"] .shadow-md, html[data-design="8"] .shadow-lg {
    box-shadow: none; border: 1px solid var(--accent); position: relative;
}
/* corner ornaments on cards */
html[data-design="8"] .shadow-md::before, html[data-design="8"] .shadow-lg::before {
    content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid var(--accent); opacity: .35; pointer-events: none;
}
html[data-design="8"] h2 { text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }


/* ===================================================================== */
/* Mobile shell guarantees (must win over per-design overrides)          */
/* --------------------------------------------------------------------- */
/* Several designs restyle .shadow-lg / .lg:relative, which the sidebar  */
/* carries — that leaked position:relative and broke the off-canvas      */
/* drawer. Force the drawer back to a fixed overlay on small screens,    */
/* and reserve top space so the floating hamburger never covers content. */
@media (max-width: 1024px) {
    html[data-design] .mobile-menu {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 90vw !important;
        max-width: 24rem;
        z-index: 50;
    }
    /* reserve room for the drawer's close button so big-font wordmarks
       (brutalist, swiss, ...) don't run under it */
    html[data-design] .mobile-menu .p-6 > h1 { padding-right: 2.75rem; }
}

/* ===================================================================== */
/* Dark-mode toggle switch (sidebar)                                     */
/* ===================================================================== */
.theme-toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.theme-toggle-track {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
    background-color: var(--border); border-radius: 9999px; transition: background-color .2s;
}
html.dark .theme-toggle-track { background-color: var(--accent); }
.theme-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    background-color: #fff; border-radius: 9999px; transition: transform .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
html.dark .theme-toggle-thumb { transform: translateX(20px); }

/* ===================================================================== */
/* Theme picker (the "Theme" menu group: swatch + name + votes + +1)     */
/* ===================================================================== */
html[data-design] .theme-row { display: flex; align-items: center; gap: .5rem; }
html[data-design] .theme-pick {
    display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0;
    padding: .4rem .75rem; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--radius-md); text-align: left; color: var(--text-primary);
    font: inherit;
}
html[data-design] .theme-pick:hover { background-color: var(--hover-bg); }
html[data-design] .theme-pick.is-active { color: var(--accent-strong); font-weight: 700; }
html[data-design] .theme-swatch {
    width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
html[data-design] .theme-name { flex: 1 1 auto; white-space: nowrap; }
html[data-design] .theme-votes { color: var(--text-muted); font-size: .85em; }
html[data-design] .theme-vote {
    flex-shrink: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700;
    line-height: 1; padding: .25rem .55rem; border-radius: 9999px;
    border: 1px solid var(--border); color: var(--text-secondary); background: transparent;
    transition: color .15s, border-color .15s;
}
html[data-design] .theme-vote:hover { border-color: var(--accent); color: var(--accent); }
html[data-design] .theme-vote.voted { color: var(--positive); border-color: var(--positive); }
html[data-design] .theme-vote.voted:hover { color: var(--negative); border-color: var(--negative); }