@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   SKIN: darkwhite  ·  "DRAWNCODES / developer-terminal"
   Minimal high-contrast MONOSPACE theme — near-black canvas, crisp thin
   borders, tight sharp corners, a single LIME accent (#C5FB45).
   Every rule scoped under [data-skin="darkwhite"] so it can never leak
   into other skins or the ACP.
   ===================================================================== */

/* ---------- design tokens ---------- */
:root[data-skin="darkwhite"] {
    /* canvas / surfaces — near-black paper */
    --bg-0: #08090a;
    --bg-1: #0b0c0e;
    --bg-2: #101113;
    --surface: #101113;
    --surface-2: #17181b;
    --surface-3: #1f2024;
    --elev: #131417;

    /* crisp thin lines */
    --border: #26272c;
    --border-soft: #1b1c20;

    /* ink */
    --text: #f3f4ef;
    --text-dim: #a6a79f;
    --text-mute: #6b6c65;

    /* lime accent — the only chroma in the system */
    --primary: #c5fb45;
    --primary-rgb: 197, 251, 69;
    --primary-2: #d6ff70;
    --accent: #c5fb45;
    --accent-2: #d6ff70;
    --accent-rgb: 197, 251, 69;
    --on-accent: #0a0c05;

    /* semantic (kept muted, terminal-ish) */
    --pink: #e88bb4;
    --green: #9be564;
    --amber: #e7b54b;
    --red: #ff5c6a;

    /* gradients — nearly flat, techwear */
    --grad-primary: linear-gradient(135deg, #c5fb45 0%, #a9e229 100%);
    --grad-pink: linear-gradient(135deg, #e88bb4 0%, #c5fb45 100%);
    --grad-cyan: linear-gradient(135deg, #d6ff70 0%, #c5fb45 100%);
    --grad-surface: linear-gradient(180deg, rgba(197,251,69,.05), rgba(197,251,69,0));

    /* tight sharp corners */
    --radius: 7px;
    --radius-sm: 5px;
    --radius-lg: 9px;

    /* flat — rely on borders, not glow */
    --shadow: 0 2px 10px rgba(0,0,0,.55);
    --shadow-glow: 0 0 0 1px rgba(197,251,69,.35), 0 0 18px -8px rgba(197,251,69,.55);
    --ring: 0 0 0 2px rgba(197,251,69,.55);
    --primary-glow: rgba(197,251,69,.14);

    /* monospace-first typography */
    --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --skin-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --header-h: 62px;
}

/* ---------- base ---------- */
[data-skin="darkwhite"] body {
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}
[data-skin="darkwhite"] ::selection { background: var(--primary); color: #0a0c05; }

/* long-form prose reverts to a readable sans */
[data-skin="darkwhite"] .post-content,
[data-skin="darkwhite"] .fi-desc,
[data-skin="darkwhite"] .fi-desc p,
[data-skin="darkwhite"] .forum-desc-html,
[data-skin="darkwhite"] .fi-hero p,
[data-skin="darkwhite"] .hero p,
[data-skin="darkwhite"] .auth-card .sub,
[data-skin="darkwhite"] .post-sig {
    font-family: var(--skin-sans);
    letter-spacing: 0;
}

/* visible focus everywhere */
[data-skin="darkwhite"] a:focus-visible,
[data-skin="darkwhite"] button:focus-visible,
[data-skin="darkwhite"] input:focus-visible,
[data-skin="darkwhite"] select:focus-visible,
[data-skin="darkwhite"] textarea:focus-visible,
[data-skin="darkwhite"] .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* headings get the mono, condensed treatment */
[data-skin="darkwhite"] h1,
[data-skin="darkwhite"] h2,
[data-skin="darkwhite"] h3,
[data-skin="darkwhite"] h4 {
    font-family: var(--font);
    letter-spacing: -0.03em;
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
[data-skin="darkwhite"] .site-header {
    background: color-mix(in srgb, var(--bg-0) 84%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
}
[data-skin="darkwhite"] .brand { color: var(--text); font-weight: 700; letter-spacing: .04em; }
[data-skin="darkwhite"] .brand b {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary);
}
[data-skin="darkwhite"] .main-nav a {
    font-family: var(--font);
    font-weight: 500;
    font-size: 13px;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    letter-spacing: -.01em;
}
[data-skin="darkwhite"] .main-nav a:hover { background: var(--surface-2); color: var(--text); }
[data-skin="darkwhite"] .main-nav a.active {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 0 -2px 0 var(--primary);
}
[data-skin="darkwhite"] .search-mini {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .search-mini:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(197,251,69,.2);
}
[data-skin="darkwhite"] .search-mini input { font-family: var(--font); font-size: 13px; }
[data-skin="darkwhite"] .icon-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
[data-skin="darkwhite"] .icon-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-skin="darkwhite"] .badge-count {
    background: var(--primary);
    color: #0a0c05;
    font-family: var(--font);
    font-weight: 700;
    border: 1.5px solid var(--bg-0);
}
[data-skin="darkwhite"] .user-menu .trigger { border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .user-menu .trigger span { font-family: var(--font); }
[data-skin="darkwhite"] .user-menu .trigger:hover { background: var(--surface-2); }
[data-skin="darkwhite"] .dropdown,
[data-skin="darkwhite"] .hdr-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
[data-skin="darkwhite"] .dropdown a,
[data-skin="darkwhite"] .dropdown button {
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .dropdown a:hover,
[data-skin="darkwhite"] .dropdown button:hover { background: var(--surface-2); color: var(--text); }
[data-skin="darkwhite"] .dropdown .divider { background: var(--border); }
[data-skin="darkwhite"] .hdr-panel-head b { color: var(--text); }
[data-skin="darkwhite"] .hdr-panel-head a { color: var(--primary); }
[data-skin="darkwhite"] .announce-bar {
    background: linear-gradient(90deg, rgba(197,251,69,.14), rgba(197,251,69,.04));
    border-bottom: 1px solid rgba(197,251,69,.3);
    color: var(--text);
    font-family: var(--font);
}
[data-skin="darkwhite"] .announce-bar span a { color: var(--primary); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
[data-skin="darkwhite"] .btn {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -.01em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
[data-skin="darkwhite"] .btn-primary {
    background: var(--primary);
    color: #0a0c05;
    border-color: var(--primary);
    box-shadow: none;
}
[data-skin="darkwhite"] .btn-primary:hover {
    background: var(--primary-2);
    color: #0a0c05;
    box-shadow: 0 0 18px -6px rgba(197,251,69,.6);
    transform: translateY(-1px);
}
[data-skin="darkwhite"] .btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
[data-skin="darkwhite"] .btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--text);
}
[data-skin="darkwhite"] .btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
[data-skin="darkwhite"] .btn-sm { border-radius: var(--radius-sm); }

/* =====================================================================
   CARDS / CONTAINERS / MISC
   ===================================================================== */
[data-skin="darkwhite"] .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
[data-skin="darkwhite"] .card-head,
[data-skin="darkwhite"] .card__header { border-bottom: 1px solid var(--border); }
[data-skin="darkwhite"] .card__title { font-family: var(--font); letter-spacing: -.01em; color: var(--text); }
[data-skin="darkwhite"] .card__header::before { background: var(--primary); }
[data-skin="darkwhite"] .empty-state { color: var(--text-mute); font-family: var(--font); }
[data-skin="darkwhite"] .breadcrumbs { font-family: var(--font); font-size: 12px; }
[data-skin="darkwhite"] .breadcrumbs a { color: var(--text-dim); }
[data-skin="darkwhite"] .breadcrumbs a:hover { color: var(--primary); }
[data-skin="darkwhite"] .breadcrumbs .sep { color: var(--border); }

/* pagination — sharp mono chips */
[data-skin="darkwhite"] .pagination a,
[data-skin="darkwhite"] .pagination span {
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(197,251,69,.08);
}
[data-skin="darkwhite"] .pagination .current {
    background: var(--primary);
    color: #0a0c05;
    border-color: var(--primary);
}
[data-skin="darkwhite"] .pagination .dots { border: none; background: none; }

/* alerts */
[data-skin="darkwhite"] .alert { border-radius: var(--radius); font-family: var(--font); }
[data-skin="darkwhite"] .alert-info {
    background: rgba(197,251,69,.08);
    border-color: rgba(197,251,69,.3);
    color: var(--primary);
}

/* =====================================================================
   FORMS
   ===================================================================== */
[data-skin="darkwhite"] .input,
[data-skin="darkwhite"] input[type=text],
[data-skin="darkwhite"] input[type=email],
[data-skin="darkwhite"] input[type=password],
[data-skin="darkwhite"] input[type=number],
[data-skin="darkwhite"] input[type=url],
[data-skin="darkwhite"] input[type=search],
[data-skin="darkwhite"] select,
[data-skin="darkwhite"] textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
}
[data-skin="darkwhite"] .input:focus,
[data-skin="darkwhite"] input:focus,
[data-skin="darkwhite"] select:focus,
[data-skin="darkwhite"] textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}
[data-skin="darkwhite"] .form-label {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
[data-skin="darkwhite"] .form-hint { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .editor-toolbar button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .editor-toolbar button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* =====================================================================
   PILLS / BADGES / TAGS / CHIPS
   ===================================================================== */
[data-skin="darkwhite"] .tag,
[data-skin="darkwhite"] .chip {
    font-family: var(--font);
    font-size: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .tag:hover,
[data-skin="darkwhite"] .chip:hover { border-color: var(--primary); color: var(--text); }
[data-skin="darkwhite"] .badge { font-family: var(--font); border-radius: var(--radius-sm); font-size: 11px; }
[data-skin="darkwhite"] .role-pill,
[data-skin="darkwhite"] .status-pill {
    font-family: var(--font);
    border-radius: var(--radius-sm);
    font-size: 11px;
    letter-spacing: -.01em;
}
[data-skin="darkwhite"] .prefix {
    font-family: var(--font);
    border-radius: var(--radius-sm);
    letter-spacing: .02em;
}
[data-skin="darkwhite"] .new-pill {
    background: var(--primary);
    color: #0a0c05;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    box-shadow: none;
}

/* =====================================================================
   HERO (board index)
   ===================================================================== */
[data-skin="darkwhite"] .fi-hero {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(760px 300px at 8% -40%, rgba(197,251,69,.08), transparent 70%),
        var(--surface);
}
[data-skin="darkwhite"] .fi-hero h1 { letter-spacing: -.04em; }
[data-skin="darkwhite"] .fi-hero h1 .grad {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
    position: relative;
    z-index: 0;
}
[data-skin="darkwhite"] .fi-hero h1 .grad::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .08em; height: .3em;
    background: var(--primary);
    opacity: .55;
    z-index: -1;
    border-radius: 2px;
}
[data-skin="darkwhite"] .fi-eyebrow {
    font-family: var(--font);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-mute);
    font-size: 10.5px;
}
[data-skin="darkwhite"] .fi-eyebrow-dot { background: var(--primary); box-shadow: 0 0 8px rgba(197,251,69,.6); }
[data-skin="darkwhite"] .fi-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
[data-skin="darkwhite"] .fi-stat:hover { border-color: var(--primary); transform: translateY(-2px); }
[data-skin="darkwhite"] .fi-stat b {
    font-family: var(--font);
    letter-spacing: -.03em;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    background: none;
}
[data-skin="darkwhite"] .fi-stat span {
    font-family: var(--font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="darkwhite"] .fi-stat.fi-stat-online b { color: var(--primary); -webkit-text-fill-color: currentColor; }

/* toolbar + resume cards */
[data-skin="darkwhite"] .fi-toolbar,
[data-skin="darkwhite"] .fi-resume {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .fi-toolbar-label,
[data-skin="darkwhite"] .fi-resume-head { font-family: var(--font); }
[data-skin="darkwhite"] .fi-resume-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .fi-resume-card:hover { border-color: var(--primary); }

/* =====================================================================
   BOARD INDEX — categories + forum rows
   ===================================================================== */
[data-skin="darkwhite"] .fi-cat-bar {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
[data-skin="darkwhite"] .fi-cat-accent { background: var(--primary); }
[data-skin="darkwhite"] .fi-cat-title {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}
[data-skin="darkwhite"] .fi-cat-count {
    font-family: var(--font);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="darkwhite"] .fi-forum-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
[data-skin="darkwhite"] .fi-row { border-top: 1px solid var(--border); }
/* Row hover flattened to match the default theme: no background change on hover
   (the `background` override wiped per-forum banner images). Icon-only. */
[data-skin="darkwhite"] .fi-icon {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .fi-info h3 { font-family: var(--font); letter-spacing: -.01em; }
[data-skin="darkwhite"] .fi-info h3 a { color: var(--text); }
[data-skin="darkwhite"] .fi-info h3 a:hover { color: var(--primary); }
[data-skin="darkwhite"] .fi-row.is-unread .fi-info h3 a::before { background: var(--primary); }
[data-skin="darkwhite"] .fi-sf-chip {
    font-family: var(--font);
    font-size: 10.5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .fi-sf-chip:hover { border-color: var(--primary); color: var(--text); }
[data-skin="darkwhite"] .fi-sf-dot { background: var(--primary); }
[data-skin="darkwhite"] .fi-sf-more { border-style: dashed; color: var(--text-mute); }
[data-skin="darkwhite"] .fi-stats-row b { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .fi-stats-row span {
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="darkwhite"] .fi-stats-sep { background: var(--border); }
[data-skin="darkwhite"] .fi-last-ava { border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .fi-last-topic b { color: var(--text); }
[data-skin="darkwhite"] .fi-last-topic:hover b { color: var(--primary); }
[data-skin="darkwhite"] .fi-last-by,
[data-skin="darkwhite"] .fi-last-empty { font-family: var(--font); font-size: 10.5px; color: var(--text-mute); }
[data-skin="darkwhite"] .fi-last-author:hover { color: var(--primary); }

/* =====================================================================
   SIDEBAR WIDGETS
   ===================================================================== */
[data-skin="darkwhite"] .fi-widget,
[data-skin="darkwhite"] .widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
[data-skin="darkwhite"] .widget-head,
[data-skin="darkwhite"] .fi-widget-head {
    font-family: var(--font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -.01em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
[data-skin="darkwhite"] .fi-pill,
[data-skin="darkwhite"] .pill-count {
    font-family: var(--font);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 10px;
}
[data-skin="darkwhite"] .online-dot.on,
[data-skin="darkwhite"] .fi-bs-val.online { color: var(--primary); }
[data-skin="darkwhite"] .online-dot.on { background: var(--primary); box-shadow: 0 0 8px rgba(197,251,69,.6); }

/* board statistics grid */
[data-skin="darkwhite"] .fi-bs-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .fi-bs-val { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .fi-bs-label {
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="darkwhite"] .fi-divider { background: var(--border); }
[data-skin="darkwhite"] .mini-user .name a:hover { color: var(--primary); }

/* rank rows */
[data-skin="darkwhite"] .rank-row { border-top: 1px solid var(--border); border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .rank-row:hover { background: var(--surface-2); }
[data-skin="darkwhite"] .rank-row .rk {
    font-family: var(--font);
    color: var(--text-mute);
    background: transparent;
}
[data-skin="darkwhite"] .rank-row .rk.gold { color: #e7b54b; }
[data-skin="darkwhite"] .rank-row .rk.silver { color: #c9cbc2; }
[data-skin="darkwhite"] .rank-row .rk.bronze { color: #c98a5a; }
[data-skin="darkwhite"] .rank-row .nm { font-family: var(--font); font-weight: 600; color: var(--text); }
[data-skin="darkwhite"] .rank-row .val { font-family: var(--font); color: var(--text-dim); }
[data-skin="darkwhite"] .rank-row:hover .nm { color: var(--primary); }

/* activity feed (achievements / latest) */
[data-skin="darkwhite"] .act-item { border-top: 1px solid var(--border); }
[data-skin="darkwhite"] .ai-ico { border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .ai-txt a b { color: var(--text); }
[data-skin="darkwhite"] .ai-txt a:hover b { color: var(--primary); }
[data-skin="darkwhite"] .ai-time { font-family: var(--font); font-size: 10.5px; color: var(--text-mute); }
[data-skin="darkwhite"] .online-strip img { border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* shoutbox */
[data-skin="darkwhite"] .shout-messages { font-family: var(--skin-sans); }
[data-skin="darkwhite"] .shout-form input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
}

/* group legend (inline-styled in template — override its vars/surfaces) */
[data-skin="darkwhite"] .fi-legend {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .fi-legend-title { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .fi-legend-sub { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .fi-legend-item { border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; }
[data-skin="darkwhite"] .fi-legend-count { border-radius: var(--radius-sm); font-family: var(--font); }

/* =====================================================================
   FORUM VIEW — topic list
   ===================================================================== */
[data-skin="darkwhite"] .forum-banner {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="darkwhite"] .forum-banner h1 { font-family: var(--font); letter-spacing: -.03em; }
[data-skin="darkwhite"] .forum-banner .fb-icon { border-radius: var(--radius); }
[data-skin="darkwhite"] .subforum-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .subforum-card:hover { border-color: var(--primary); }
[data-skin="darkwhite"] .subforum-card .sc-icon { border-radius: var(--radius-sm); background: var(--surface-3); }
[data-skin="darkwhite"] .subforum-card .sc-title { font-family: var(--font); }
[data-skin="darkwhite"] .subforum-card .sc-count { font-family: var(--font); color: var(--text-mute); }

[data-skin="darkwhite"] .topic-controls {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .topic-controls .tc-count { font-family: var(--font); color: var(--text-dim); }

[data-skin="darkwhite"] .topic-list { border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="darkwhite"] .topic-list-head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--font);
    color: var(--text-mute);
}
[data-skin="darkwhite"] .topic-list .topic-row {
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
}
[data-skin="darkwhite"] .topic-list .topic-row:hover { background: var(--surface-2); }
[data-skin="darkwhite"] .topic-list .topic-row.unread::before { background: var(--primary); box-shadow: 2px 0 10px -1px rgba(197,251,69,.7); }
[data-skin="darkwhite"] .topic-icon { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="darkwhite"] .topic-row.unread .topic-icon { box-shadow: 0 0 0 2px rgba(197,251,69,.5); }
[data-skin="darkwhite"] .topic-icon .ti-ava { border-radius: calc(var(--radius) - 2px); }
[data-skin="darkwhite"] .topic-icon .unread-dot { background: var(--primary); border-color: var(--surface); box-shadow: 0 0 8px rgba(197,251,69,.7); }
[data-skin="darkwhite"] .topic-icon .ti-badge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .topic-main .tm-title { font-family: var(--font); font-weight: 700; }
[data-skin="darkwhite"] .topic-row.unread .tm-title { color: var(--text); }
[data-skin="darkwhite"] .topic-main .tm-title:hover { color: var(--primary); }
[data-skin="darkwhite"] .topic-main .tm-meta { font-family: var(--font); font-size: 11px; color: var(--text-mute); }
[data-skin="darkwhite"] .topic-main .tm-meta a:hover { color: var(--primary); }
[data-skin="darkwhite"] .topic-stat .ts-val { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .topic-stat span:last-child { font-family: var(--font); text-transform: uppercase; letter-spacing: .06em; }
[data-skin="darkwhite"] .topic-last .tl-title { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .topic-last .tl-title:hover,
[data-skin="darkwhite"] .topic-last a:hover { color: var(--primary); }
[data-skin="darkwhite"] .topic-last .tl-lastby { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .topic-last .tl-lastby-ava { border-radius: var(--radius-sm); }

/* =====================================================================
   TOPIC VIEW — hero + posts
   ===================================================================== */
[data-skin="darkwhite"] .topic-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="darkwhite"] .topic-hero h1 { font-family: var(--font); letter-spacing: -.03em; }
[data-skin="darkwhite"] .topic-hero-meta,
[data-skin="darkwhite"] .topic-hero-meta .thm { font-family: var(--font); color: var(--text-dim); }
[data-skin="darkwhite"] .topic-hero-meta a:hover { color: var(--primary); }
[data-skin="darkwhite"] .viewers-bar { border-top: 1px solid var(--border); }
[data-skin="darkwhite"] .vb-label,
[data-skin="darkwhite"] .vb-count { font-family: var(--font); color: var(--text-mute); }

[data-skin="darkwhite"] .mod-bar {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .mod-bar-label { font-family: var(--font); color: var(--primary); }

/* poll */
[data-skin="darkwhite"] .poll-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .poll-head { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .poll-bar { background: var(--primary); }
[data-skin="darkwhite"] .poll-bar-wrap { background: var(--surface-3); border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .poll-vote { border-radius: var(--radius-sm); }

/* post card */
[data-skin="darkwhite"] .post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .post.is-op { border-color: rgba(197,251,69,.4); }
[data-skin="darkwhite"] .post.is-best { border-color: var(--primary); }
[data-skin="darkwhite"] .best-banner {
    background: rgba(197,251,69,.12);
    color: var(--primary);
    font-family: var(--font);
    border-bottom: 1px solid rgba(197,251,69,.3);
}
[data-skin="darkwhite"] .post-author {
    background: var(--surface-2);
    border-right: 1px solid var(--border);
}
[data-skin="darkwhite"] .pa-name { font-family: var(--font); }
[data-skin="darkwhite"] .pa-role,
[data-skin="darkwhite"] .pa-title,
[data-skin="darkwhite"] .pa-level,
[data-skin="darkwhite"] .pa-srv-rank {
    font-family: var(--font);
    font-size: 10.5px;
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .pa-xp-track { background: var(--surface-3); border-radius: var(--radius-sm); }
[data-skin="darkwhite"] .pa-xp-fill { background: var(--primary); }
[data-skin="darkwhite"] .pa-stats-row { border-top: 1px solid var(--border); }
[data-skin="darkwhite"] .pa-stats b { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .pa-stats span,
[data-skin="darkwhite"] .pa-joined { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .post-top { border-bottom: 1px solid var(--border-soft); }
[data-skin="darkwhite"] .post-num { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .post-num a:hover { color: var(--primary); }
[data-skin="darkwhite"] .op-badge {
    background: var(--primary);
    color: #0a0c05;
    font-family: var(--font);
    border-radius: var(--radius-sm);
}
[data-skin="darkwhite"] .ptool {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .ptool:hover { border-color: var(--primary); color: var(--primary); }
[data-skin="darkwhite"] .post-content { color: var(--text); line-height: 1.65; }
[data-skin="darkwhite"] .post-content a { color: var(--primary); }
[data-skin="darkwhite"] .post-content a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* code + quotes — terminal blocks */
[data-skin="darkwhite"] .post-content pre,
[data-skin="darkwhite"] .code-block,
[data-skin="darkwhite"] .post-content code {
    font-family: var(--font);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--primary-2);
}
[data-skin="darkwhite"] .post-content code { padding: 1px 6px; }
[data-skin="darkwhite"] .post-content pre { padding: 14px 16px; overflow-x: auto; }
[data-skin="darkwhite"] .post-content pre code { background: none; border: none; padding: 0; color: var(--text); }
[data-skin="darkwhite"] .post-content blockquote,
[data-skin="darkwhite"] .post-quote {
    background: var(--surface-2);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dim);
}
[data-skin="darkwhite"] .post-sig { border-top: 1px dashed var(--border); color: var(--text-mute); }
[data-skin="darkwhite"] .post-foot { border-top: 1px solid var(--border-soft); }

/* reactions */
[data-skin="darkwhite"] .react-main,
[data-skin="darkwhite"] .react-summary,
[data-skin="darkwhite"] .report-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .react-main.reacted { border-color: var(--primary); color: var(--primary); }
[data-skin="darkwhite"] .react-main:hover,
[data-skin="darkwhite"] .report-btn:hover { border-color: var(--primary); color: var(--primary); }
[data-skin="darkwhite"] .react-picker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
[data-skin="darkwhite"] .rp-btn:hover { background: var(--surface-2); }

/* =====================================================================
   LEADERBOARD / MEMBERS
   ===================================================================== */
[data-skin="darkwhite"] .leaderboard-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="darkwhite"] .lb-period { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .leaderboard-tabs .lb-tab {
    font-family: var(--font);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
[data-skin="darkwhite"] .leaderboard-tabs .lb-tab.active {
    background: var(--primary);
    color: #0a0c05;
    border-color: var(--primary);
}
[data-skin="darkwhite"] .podium-block {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="darkwhite"] .podium-rank-num,
[data-skin="darkwhite"] .podium-score { font-family: var(--font); }
[data-skin="darkwhite"] .podium-name { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .podium-avatar-wrap { border-radius: var(--radius); }
[data-skin="darkwhite"] .leaderboard-table { font-family: var(--font); }
[data-skin="darkwhite"] .leaderboard-table th {
    font-family: var(--font);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
[data-skin="darkwhite"] .leaderboard-table td { border-bottom: 1px solid var(--border-soft); }
[data-skin="darkwhite"] .leaderboard-table tr:hover td { background: var(--surface-2); }
[data-skin="darkwhite"] .lb-rank-num { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .lb-username { font-family: var(--font); color: var(--text); }
[data-skin="darkwhite"] .lb-username:hover { color: var(--primary); }
[data-skin="darkwhite"] .lb-subtitle { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .lb-posts,
[data-skin="darkwhite"] .lb-rep { font-family: var(--font); }

/* generic data tables (public-facing) */
[data-skin="darkwhite"] .table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
[data-skin="darkwhite"] table.data { font-family: var(--font); }
[data-skin="darkwhite"] table.data th {
    background: var(--surface-2);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10.5px;
    border-bottom: 1px solid var(--border);
}
[data-skin="darkwhite"] table.data td { border-bottom: 1px solid var(--border-soft); }
[data-skin="darkwhite"] table.data tr:hover td { background: var(--surface-2); }

/* =====================================================================
   FOOTER
   ===================================================================== */
[data-skin="darkwhite"] .site-footer {
    background: var(--bg-0);
    border-top: 1px solid var(--border);
}
[data-skin="darkwhite"] .footer-grid h4 {
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="darkwhite"] .footer-grid a { color: var(--text-dim); }
[data-skin="darkwhite"] .footer-grid a:hover { color: var(--primary); }
[data-skin="darkwhite"] .footer-bottom {
    border-top: 1px solid var(--border);
    font-family: var(--font);
    color: var(--text-mute);
}
[data-skin="darkwhite"] .footer-brand { color: var(--text-dim); }
[data-skin="darkwhite"] .lang-switch a.on { color: var(--primary); }

/* =====================================================================
   AUTH PAGES (login / register)
   ===================================================================== */
[data-skin="darkwhite"] .auth-wrap {
    background-color: var(--bg-0);
    background-image:
        linear-gradient(rgba(197,251,69,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,251,69,.045) 1px, transparent 1px);
    background-size: 46px 46px;
}
[data-skin="darkwhite"] .auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
[data-skin="darkwhite"] .auth-card h1 { font-family: var(--font); letter-spacing: -.03em; }
[data-skin="darkwhite"] .auth-foot { font-family: var(--font); color: var(--text-mute); }
[data-skin="darkwhite"] .auth-foot a,
[data-skin="darkwhite"] .auth-card a { color: var(--primary); }

/* =====================================================================
   PARTNERS strip
   ===================================================================== */
[data-skin="darkwhite"] .partner,
[data-skin="darkwhite"] .partners a {
    font-family: var(--font);
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    [data-skin="darkwhite"] * { transition: none !important; }
}

/* ── Wide masthead hero (theme-example style): remove the video/image background,
   stretch the content full-width like the example designs. Text effects above are
   preserved; the top header/nav is untouched. ── */
[data-skin="darkwhite"] .fi-hero--media { min-height: 0; display: block; align-items: stretch; }
[data-skin="darkwhite"] .fi-hero-inner {
    max-width: var(--maxw, 1760px);
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(40px, 5vw, 68px) clamp(20px, 3vw, 52px);
}
[data-skin="darkwhite"] .fi-hero-inner > div:first-child {
    align-items: flex-start;
    text-align: left;
    max-width: 64ch;
    margin: 0;
}
[data-skin="darkwhite"] .fi-eyebrow { margin-left: 0; margin-right: auto; }
[data-skin="darkwhite"] .fi-hero p { margin-left: 0; margin-right: 0; }
@media (max-width: 860px) {
    [data-skin="darkwhite"] .fi-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* Themed hero background (replaces the hidden default video). Optional /assets/img/hero-darkwhite.jpg */
[data-skin="darkwhite"] .fi-hero {
    background:
        linear-gradient(180deg, rgba(8,9,10,.55), rgba(8,9,10,.90)),
        url('/assets/img/hero-darkwhite.jpg') center/cover no-repeat,
        radial-gradient(80% 120% at 18% 0%, rgba(197,251,69,.08), transparent 48%),
        linear-gradient(180deg, #0d0e10, #08090a) !important;
}