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

/* =====================================================================
   ESAForum SKIN · "developer"
   A professional DARK IDE / dev-docs surface — think GitHub-dark meets a
   VS Code documentation site. Near-black #0d1117 canvas, crisp 1px hairline
   borders (#30363d), calm structured layout, a function-blue primary with a
   green "alive" accent and a purple decorative accent. Code blocks are
   first-class IDE windows (chrome bar + three dots + a filename tab).
   Monospace is used ONLY for code and for meta/kickers/labels; body and
   headings stay the system sans. Restrained, precise, premium — never flashy.
   Every rule is scoped under [data-skin="developer"] so nothing leaks to
   other skins or the ACP.
   ===================================================================== */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root[data-skin="developer"] {
    /* GitHub-dark canvas → charcoal panels */
    --bg-0: #0d1117;
    --bg-1: #0a0e15;   /* recessed wells — softened from near-black #010409 (read as black-on-black on the canvas) */
    --bg-2: #161b22;
    --surface: #161b22;
    --surface-2: #1c2129;
    --surface-3: #21262d;
    --elev: #1c2129;
    --border: #30363d;
    --border-soft: #21262d;

    /* Text — soft off-white on graphite */
    --text: #e6edf3;
    --text-dim: #adbac7;
    --text-mute: #8b949e;

    /* Function-blue primary + green "alive" + purple decor */
    --primary: #4c8dff;
    --primary-rgb: 76, 141, 255;
    --primary-2: #6ba4ff;
    --accent: #3fb950;
    --accent-2: #a371f7;
    --accent-rgb: 63, 185, 80;
    --on-accent: #0d1117;

    /* Signals */
    --green: #3fb950;
    --pink: #f85149;
    --amber: #d29922;
    --red: #f85149;

    /* Syntax palette — for code showcases / decorative dots ONLY */
    --syn-string: #3fb950;
    --syn-keyword: #a371f7;
    --syn-function: #4c8dff;
    --syn-number: #d29922;
    --syn-cyan: #56d4dd;
    --syn-error: #f85149;
    --syn-comment: #8b949e;

    --grad-primary: linear-gradient(135deg, #4c8dff 0%, #6ba4ff 100%);
    --grad-accent: linear-gradient(135deg, #4c8dff 0%, #a371f7 100%);
    --grad-pink: linear-gradient(135deg, #4c8dff 0%, #a371f7 100%);
    --grad-cyan: linear-gradient(135deg, #4c8dff 0%, #56d4dd 100%);
    --grad-surface: linear-gradient(180deg, rgba(76,141,255,.05), rgba(76,141,255,0));

    /* Precise, engineered geometry */
    --radius: 6px;
    --radius-sm: 4px;
    --radius-lg: 10px;

    --shadow: 0 12px 34px rgba(1, 4, 9, .6);
    --shadow-glow: 0 0 0 1px rgba(76,141,255,.30), 0 12px 34px rgba(1,4,9,.7);
    --ring: 0 0 0 3px rgba(76,141,255,.30);
    --primary-glow: rgba(76,141,255,.20);

    --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --type: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="developer"] body {
    background:
        radial-gradient(1000px 600px at 84% -180px, rgba(76,141,255,.055), transparent 60%),
        radial-gradient(760px 460px at 6% 114%, rgba(163,113,247,.04), transparent 66%),
        var(--bg-0);
    /* NOTE: no 'background-attachment: fixed' — a fixed background layer makes
       Chromium drop the <video>/banner layers on repaint (hover), which would
       flicker the hero and forum banner images away. */
    color: var(--text);
    letter-spacing: -.003em;
}
[data-skin="developer"] ::selection { background: rgba(76,141,255,.32); color: #fff; }
[data-skin="developer"] ::-webkit-scrollbar-thumb { background: #2d333b; border-radius: 6px; border: 2px solid var(--bg-0); }
[data-skin="developer"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
[data-skin="developer"] ::-webkit-scrollbar-track { background: var(--bg-1); }
[data-skin="developer"] a { color: var(--primary-2); }
[data-skin="developer"] a:hover { color: var(--primary); }
[data-skin="developer"] :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Clean, tightly-tracked sans headings — the dev-docs hierarchy */
[data-skin="developer"] h1,
[data-skin="developer"] h2,
[data-skin="developer"] h3,
[data-skin="developer"] h4 {
    font-family: var(--type);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}

/* ── 3. HEADER / NAV ────────────────────────────────────────────────── */
[data-skin="developer"] .site-header {
    background: rgba(13,17,23,.86);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(48,54,61,.6), 0 10px 30px rgba(1,4,9,.4);
    backdrop-filter: blur(10px) saturate(1.05);
}
[data-skin="developer"] .brand,
[data-skin="developer"] .brand .name {
    font-family: var(--type);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}
[data-skin="developer"] .brand-logo {
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--primary-2);
    border-radius: var(--radius);
    font-family: var(--mono);
    box-shadow: inset 0 0 0 1px rgba(76,141,255,.12);
}
[data-skin="developer"] .main-nav a {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    position: relative;
}
[data-skin="developer"] .main-nav a:hover { background: var(--surface-2); color: var(--text); }
[data-skin="developer"] .main-nav a.active { color: var(--primary-2); background: transparent; }
[data-skin="developer"] .main-nav a.active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
    background: var(--primary); border-radius: 2px;
}
[data-skin="developer"] .icon-btn {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="developer"] .icon-btn:hover { color: var(--primary-2); border-color: rgba(76,141,255,.5); background: var(--surface-2); }
[data-skin="developer"] .search-mini {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-1);
    font-family: var(--mono);
    font-size: 12px;
}
[data-skin="developer"] .search-mini:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
[data-skin="developer"] .badge-count {
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-family: var(--mono);
    font-weight: 700;
}

/* Dropdowns / header panels */
[data-skin="developer"] .dropdown,
[data-skin="developer"] .hdr-panel,
[data-skin="developer"] .hdr-dd {
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
[data-skin="developer"] .dropdown a,
[data-skin="developer"] .dropdown button { border-radius: var(--radius-sm); }
[data-skin="developer"] .dropdown a:hover,
[data-skin="developer"] .dropdown button:hover { background: var(--surface-2); color: var(--primary-2); }
[data-skin="developer"] .hdr-panel-head { border-bottom: 1px solid var(--border); font-family: var(--type); font-weight: 700; }
[data-skin="developer"] .user-menu .trigger { border-radius: var(--radius-sm); }
[data-skin="developer"] .user-menu .trigger:hover { background: var(--surface-2); }
[data-skin="developer"] .mini-user .name { font-weight: 700; }

/* Announcement bar */
[data-skin="developer"] .announce-bar {
    background: linear-gradient(90deg, rgba(76,141,255,.10), transparent 72%);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--text-dim);
}

/* ── 4. BUTTONS (clean sans, precise 1px chrome) ────────────────────── */
[data-skin="developer"] .btn {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
[data-skin="developer"] .btn:hover { border-color: #444c56; background: var(--surface-2); color: var(--text); }
[data-skin="developer"] .btn:active { transform: translateY(1px); }
[data-skin="developer"] .btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: rgba(76,141,255,.7);
    box-shadow: 0 1px 0 rgba(1,4,9,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-skin="developer"] .btn-primary:hover {
    background: #5c9aff;
    border-color: rgba(76,141,255,.9);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(76,141,255,.55);
    transform: translateY(-1px);
}
[data-skin="developer"] .btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
}
[data-skin="developer"] .btn-ghost:hover { color: var(--primary-2); border-color: rgba(76,141,255,.5); background: var(--surface); }
[data-skin="developer"] .btn-danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(248,81,73,.5);
}
[data-skin="developer"] .btn-danger:hover { background: rgba(248,81,73,.14); color: #ff7b74; border-color: rgba(248,81,73,.7); }

/* ── 5. CARDS / CONTAINERS ──────────────────────────────────────────── */
[data-skin="developer"] .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 22px rgba(1,4,9,.35);
}
[data-skin="developer"] .card-head,
[data-skin="developer"] .card__header { border-bottom: 1px solid var(--border); }
[data-skin="developer"] .card__title { font-family: var(--type); letter-spacing: -.01em; font-weight: 700; }
[data-skin="developer"] .card__header::before { background: var(--primary); box-shadow: 0 0 8px rgba(76,141,255,.5); }
[data-skin="developer"] .empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-dim);
}
[data-skin="developer"] .breadcrumbs {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--text-mute);
}
[data-skin="developer"] .breadcrumbs a:hover { color: var(--primary-2); }
[data-skin="developer"] .pagination a,
[data-skin="developer"] .pagination span {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="developer"] .pagination a:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="developer"] .pagination .current {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

/* Alerts — left hairline accent bar */
[data-skin="developer"] .alert {
    border-radius: var(--radius);
    border-width: 1px 1px 1px 3px;
}

/* ── 6. BOARD-INDEX HERO (docs banner + technical grid) ─────────────── */
/* This "blank themed panel" treatment (flex-centred, decorative grid + bloom
   fill) is for the NO-MEDIA hero — the one the JS takes over as a living IDE.
   A tenant that configures a hero VIDEO/IMAGE ships .fi-hero--media, whose
   core layout (absolute media/overlay + its own centred .fi-hero-inner) must
   NOT be turned into a flex row here: forcing display:flex collapsed the
   headline to a ~54px sliver behind the video. Media heroes are handled by a
   dedicated rule below that only keeps the rounded 1px chrome. */
[data-skin="developer"] .fi-hero:not(.fi-hero--media):not(.fi-hero--image):not(.fi-hero--video),
[data-skin="developer"] .fi-hero--off {
    min-height: 300px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    /* Subtle dark gradient + a faint technical grid + a soft blue bloom.
       The two grid layers sit ON TOP of the fills; background-size 34px gives
       the calm blueprint feel without noise. Never flashy. */
    background:
        linear-gradient(rgba(139,148,158,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,148,158,.045) 1px, transparent 1px),
        radial-gradient(900px 420px at 86% -12%, rgba(76,141,255,.10), transparent 60%),
        radial-gradient(700px 380px at 4% 120%, rgba(163,113,247,.07), transparent 62%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    box-shadow: inset 0 1px 0 rgba(230,237,243,.03), 0 20px 50px rgba(1,4,9,.5);
    overflow: hidden;
}
/* Media (video/image) hero: leave the core's layered layout intact so the
   headline renders over the media — only apply the skin's rounded chrome. */
[data-skin="developer"] .fi-hero.fi-hero--media,
[data-skin="developer"] .fi-hero.fi-hero--image,
[data-skin="developer"] .fi-hero.fi-hero--video {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(230,237,243,.03), 0 20px 50px rgba(1,4,9,.5);
    overflow: hidden;
}
/* Core (forum-index.css) caps .fi-hero-inner at `max-width: var(--maxw,1760px)`
   for EVERY non-default skin. On a flex media hero that definite max-width
   trips a Chromium intrinsic-sizing quirk that collapses the centred <h1> to
   its min-content width (~54px) — leaving the title an invisible sliver over
   the video. Drop the cap (and belt-and-braces stretch the headline) so the
   title sizes to its content and stays legible, exactly like the default skin.
   The higher specificity (html + two hero classes) is deliberate — it must
   outrank the core rule. */
html[data-skin="developer"] .fi-hero.fi-hero--media .fi-hero-inner,
html[data-skin="developer"] .fi-hero.fi-hero--image .fi-hero-inner,
html[data-skin="developer"] .fi-hero.fi-hero--video .fi-hero-inner {
    max-width: none;
}
[data-skin="developer"] .fi-hero.fi-hero--media h1,
[data-skin="developer"] .fi-hero.fi-hero--image h1,
[data-skin="developer"] .fi-hero.fi-hero--video h1 {
    align-self: stretch;
}
[data-skin="developer"] .fi-hero h1 {
    font-family: var(--type);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--text);
}
/* Pure-CSS blinking terminal caret after the headline — the one "effect".
   Scoped to the NON-media hero only: a media hero can carry an admin-configured
   `h1::after` wordmark (e.g. a branded title), and this decorative caret would
   otherwise out-specificity and blank it out. */
[data-skin="developer"] .fi-hero:not(.fi-hero--media):not(.fi-hero--image):not(.fi-hero--video) h1::after {
    content: "";
    display: inline-block;
    width: .58ch;
    height: .96em;
    margin-left: .12em;
    vertical-align: -.08em;
    background: var(--primary);
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(76,141,255,.45);
    animation: devCaretBlink 1.1s steps(1) infinite;
}
@keyframes devCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
[data-skin="developer"] .fi-hero h1 .grad {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-skin="developer"] .fi-hero p { color: var(--text-dim); }
/* Eyebrow → a monospace source-comment kicker (e.g. "// community board") */
[data-skin="developer"] .fi-eyebrow {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    text-transform: lowercase;
    letter-spacing: .02em;
    font-size: 12px;
    background: transparent;
    border: 0;
    padding-left: 0;
    color: var(--syn-comment);
}
[data-skin="developer"] .fi-eyebrow::before { content: "// "; color: var(--syn-comment); }
[data-skin="developer"] .fi-eyebrow-dot { display: none; }

/* Hero stat cells — mono readouts on hairline tiles */
[data-skin="developer"] .fi-stat {
    border-radius: var(--radius);
    background: rgba(22,27,34,.72);
    border: 1px solid var(--border);
    backdrop-filter: blur(4px);
}
[data-skin="developer"] .fi-stat:hover { background: rgba(76,141,255,.10); border-color: rgba(76,141,255,.45); }
[data-skin="developer"] .fi-stat b { font-family: var(--mono); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
[data-skin="developer"] .fi-stat span { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; font-size: 9.5px; color: var(--text-mute); }
[data-skin="developer"] .fi-stat.fi-stat-online b { color: var(--green); text-shadow: 0 0 12px rgba(63,185,80,.4); }

/* ── 7. BOARD INDEX: categories + forum rows ────────────────────────── */
[data-skin="developer"] .fi-category { background: transparent; }
[data-skin="developer"] .fi-cat-bar {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border-soft);
}
[data-skin="developer"] .fi-cat-accent { background: var(--primary); box-shadow: 0 0 8px rgba(76,141,255,.5); }
[data-skin="developer"] .fi-cat-title { font-family: var(--type); letter-spacing: -.01em; font-weight: 700; color: var(--text); }
[data-skin="developer"] .fi-cat-count,
[data-skin="developer"] .fi-cat-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="developer"] .fi-forum-list {
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--surface);
}
[data-skin="developer"] .fi-row {
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    position: relative;
    transition: background .15s;
}
[data-skin="developer"] .fi-row::before { background: var(--border); width: 2px; transition: background .15s, box-shadow .15s; }
/* Row hover is icon-only + accent-stripe recolor. NEVER set the `background`
   shorthand on .fi-row:hover — it wipes per-forum banner images (--forum-bg)
   and the repaint drops the hero video. */
[data-skin="developer"] .fi-row:hover::before { background: var(--primary); box-shadow: 0 0 8px rgba(76,141,255,.6); }
[data-skin="developer"] .fi-icon,
[data-skin="developer"] .fi-icon-emoji {
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
[data-skin="developer"] .fi-row:hover .fi-icon { border-color: rgba(76,141,255,.5); box-shadow: 0 0 14px -5px rgba(76,141,255,.5); }
[data-skin="developer"] .fi-info h3 { font-weight: 700; letter-spacing: -.01em; color: var(--text); }
[data-skin="developer"] .fi-info h3 a:hover { color: var(--primary-2); }
[data-skin="developer"] .fi-desc { color: var(--text-dim); }
[data-skin="developer"] .fi-sf-chip {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .01em;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
}
[data-skin="developer"] .fi-sf-chip:hover { border-color: rgba(76,141,255,.5); color: var(--primary-2); background: rgba(76,141,255,.10); }
[data-skin="developer"] .fi-sf-dot { background: var(--primary); }
[data-skin="developer"] .fi-sf-more { border-style: dashed; color: var(--text-mute); }
[data-skin="developer"] .fi-stats b,
[data-skin="developer"] .fi-stats-row b { font-family: var(--mono); font-weight: 700; letter-spacing: -.01em; color: var(--primary-2); }
[data-skin="developer"] .fi-stats-row span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: var(--text-mute); }
[data-skin="developer"] .fi-last-topic b { font-weight: 700; color: var(--text-dim); }
[data-skin="developer"] .fi-last-by,
[data-skin="developer"] .fi-last-empty,
[data-skin="developer"] .fi-last-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="developer"] .fi-last-ava { border-radius: var(--radius-sm); }

/* Board-index legend */
[data-skin="developer"] .fi-legend {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .fi-legend-title { font-family: var(--type); letter-spacing: -.01em; font-weight: 700; }
[data-skin="developer"] .fi-legend-sub { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
[data-skin="developer"] .fi-legend-item { border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); }
[data-skin="developer"] .fi-legend-item:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="developer"] .fi-legend-count { border-radius: var(--radius-sm); font-family: var(--mono); color: var(--text-mute); }
[data-skin="developer"] .fi-legend-dot { box-shadow: 0 0 6px currentColor; }

/* Board-index misc */
[data-skin="developer"] .fi-toolbar-label,
[data-skin="developer"] .fi-resume-head,
[data-skin="developer"] .fi-resume-meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--text-mute); }
[data-skin="developer"] .fi-resume-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="developer"] .fi-resume-card:hover { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(76,141,255,.22); }
[data-skin="developer"] .fi-resume-title { font-weight: 700; }
[data-skin="developer"] .fi-divider { border-color: var(--border); }
[data-skin="developer"] .fi-discord-cta { border-radius: var(--radius-lg); }
[data-skin="developer"] .fi-featured-badge {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9px;
    color: var(--amber);
    background: rgba(210,153,34,.14);
    border: 1px solid rgba(210,153,34,.3);
    border-radius: var(--radius-sm);
}

/* ── 8. SIDEBAR WIDGETS ─────────────────────────────────────────────── */
[data-skin="developer"] .widget,
[data-skin="developer"] .fi-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .widget-head,
[data-skin="developer"] .fi-widget-head {
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(76,141,255,.06), transparent);
}
[data-skin="developer"] .widget-head::before,
[data-skin="developer"] .fi-widget-head::before {
    content: "$ ";            /* shell prompt */
    color: var(--accent);
    font-weight: 700;
}
[data-skin="developer"] .fi-pill,
[data-skin="developer"] .pill-count {
    font-family: var(--mono);
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--primary-2);
}
[data-skin="developer"] .fi-board-stats { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
[data-skin="developer"] .fi-bs-item { border-color: var(--border) !important; background: var(--surface-2); }
[data-skin="developer"] .fi-bs-val { font-family: var(--mono); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
[data-skin="developer"] .fi-bs-val.online { color: var(--green); text-shadow: 0 0 12px rgba(63,185,80,.45); }
[data-skin="developer"] .fi-bs-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 8.5px; color: var(--text-mute); }

/* Rank rows (top members / trending / contributors) */
[data-skin="developer"] .rank-row { border-radius: var(--radius-sm); }
[data-skin="developer"] .rank-row:hover { background: var(--surface-2); }
[data-skin="developer"] .rank-row .rk {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    background: var(--surface-3);
    color: var(--text-dim);
}
[data-skin="developer"] .rank-row .rk.gold { background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: #fff; }
[data-skin="developer"] .rank-row .rk.silver { background: var(--surface-3); color: var(--primary-2); }
[data-skin="developer"] .rank-row .rk.bronze { background: var(--surface-3); color: var(--text-dim); }
[data-skin="developer"] .rank-row .val { font-family: var(--mono); font-weight: 600; color: var(--text-dim); }
[data-skin="developer"] .rank-row .name { color: var(--text); }

/* Online strip + activity feed */
[data-skin="developer"] .online-strip img { border-radius: var(--radius-sm); }
[data-skin="developer"] .online-dot.on,
[data-skin="developer"] .online-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
[data-skin="developer"] .act-item .avatar { border-radius: var(--radius-sm) !important; }
[data-skin="developer"] .ai-ico { border-radius: var(--radius-sm); background: var(--surface-2); }
[data-skin="developer"] .ai-time { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-mute); }
[data-skin="developer"] .ai-txt a:hover { color: var(--primary-2); }

/* Champion block */
[data-skin="developer"] .fi-champion { border-bottom: 1px solid var(--border) !important; }

/* TeamSpeak / generic chip */
[data-skin="developer"] .chip {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
[data-skin="developer"] .chip:hover { border-color: var(--primary); color: var(--primary-2); }

/* Shoutbox */
[data-skin="developer"] .shoutbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-skin="developer"] .shout-messages { font-family: var(--mono); font-size: 12px; }

/* ── 9. FORUM VIEW + TOPIC LIST ─────────────────────────────────────── */
[data-skin="developer"] .forum-banner {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(600px 300px at 86% -30%, rgba(76,141,255,.12), transparent 60%),
        radial-gradient(500px 280px at 8% 120%, rgba(163,113,247,.08), transparent 64%),
        linear-gradient(135deg, var(--surface-2), var(--surface));
}
[data-skin="developer"] .fb-icon,
[data-skin="developer"] .fb-icon-emoji { border-radius: var(--radius); }
[data-skin="developer"] .forum-desc-html { color: var(--text-dim); }
[data-skin="developer"] .subforum-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="developer"] .subforum-card:hover { border-color: rgba(76,141,255,.5); box-shadow: 0 0 0 1px rgba(76,141,255,.16); }
[data-skin="developer"] .sc-icon { border-radius: var(--radius-sm); }
[data-skin="developer"] .sc-title { font-weight: 700; }
[data-skin="developer"] .sc-count { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
[data-skin="developer"] .topic-list,
[data-skin="developer"] .topic-list-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .topic-list-head {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10.5px;
    color: var(--text-mute);
}
[data-skin="developer"] .topic-row {
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    position: relative;
}
[data-skin="developer"] .topic-row::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
    background: transparent; transition: background .15s, box-shadow .15s;
}
/* Icon-only hover: recolor the accent stripe only — never the `background`
   shorthand (keeps banner-safe parity with .fi-row). */
[data-skin="developer"] .topic-row:hover::before { background: var(--primary); box-shadow: 0 0 8px rgba(76,141,255,.6); }
[data-skin="developer"] .topic-row.unread { border-left: 2px solid rgba(76,141,255,.55); }
[data-skin="developer"] .topic-icon,
[data-skin="developer"] .ti-ava { border-radius: var(--radius-sm); }
[data-skin="developer"] .tm-title,
[data-skin="developer"] .tl-title { font-weight: 700; letter-spacing: -.01em; color: var(--text); }
[data-skin="developer"] .tm-title:hover,
[data-skin="developer"] .tl-title:hover { color: var(--primary-2); }
[data-skin="developer"] .tm-meta,
[data-skin="developer"] .topic-last,
[data-skin="developer"] .tl-lastby { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--text-mute); }
[data-skin="developer"] .topic-stat b,
[data-skin="developer"] .ts-val { font-family: var(--mono); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
[data-skin="developer"] .tl-lastby-ava { border-radius: var(--radius-sm); }
[data-skin="developer"] .unread-dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }

/* ── 10. TOPIC VIEW: hero + posts ───────────────────────────────────── */
[data-skin="developer"] .topic-hero {
    background:
        radial-gradient(700px 300px at 90% -40%, rgba(76,141,255,.12), transparent 60%),
        radial-gradient(560px 300px at 6% 120%, rgba(163,113,247,.07), transparent 64%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .topic-hero-main h1 {
    font-family: var(--type);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
[data-skin="developer"] .topic-hero-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text-mute); }
[data-skin="developer"] .post,
[data-skin="developer"] .reply-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .post.is-op { border-color: rgba(76,141,255,.4); box-shadow: 0 0 0 1px rgba(76,141,255,.14); }
[data-skin="developer"] .post-author {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-right: 1px solid var(--border);
}
[data-skin="developer"] .post-author .avatar,
[data-skin="developer"] .pa-avatar { border-radius: var(--radius) !important; }
[data-skin="developer"] .pa-name { font-family: var(--type); font-weight: 700; letter-spacing: -.01em; }
[data-skin="developer"] .pa-role,
[data-skin="developer"] .pa-title { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
[data-skin="developer"] .pa-xp-track { background: var(--bg-1); border-radius: 999px; }
[data-skin="developer"] .pa-xp-fill { background: var(--grad-primary); border-radius: 999px; }
[data-skin="developer"] .post-num { font-family: var(--mono); color: var(--text-mute); }
[data-skin="developer"] .post-top,
[data-skin="developer"] .post-foot { border-color: var(--border); }
[data-skin="developer"] .post-content { color: var(--text); }
[data-skin="developer"] .post-content .post-quote {
    border-left: 3px solid var(--primary);
    background: var(--bg-1);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-dim);
}
[data-skin="developer"] .post-content .post-quote cite { color: var(--primary-2); font-family: var(--mono); }

/* ── IDE code block — first-class editor window (chrome + dots + tab) ── */
[data-skin="developer"] .post-content pre,
[data-skin="developer"] .post-content .code-block {
    position: relative;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 44px 16px 16px;            /* room for the window chrome bar */
    margin: 14px 0;
    overflow: hidden;                   /* pre holds the chrome; inner <code> scrolls */
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    box-shadow: 0 10px 30px rgba(1,4,9,.4);
    -webkit-tab-size: 4; tab-size: 4;
}
/* Window chrome bar with three "traffic-light" dots (syntax palette) */
[data-skin="developer"] .post-content pre::before,
[data-skin="developer"] .post-content .code-block::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 36px;
    background:
        radial-gradient(circle at 18px 18px, var(--syn-error) 0 4.5px, transparent 5.5px),
        radial-gradient(circle at 36px 18px, var(--syn-number) 0 4.5px, transparent 5.5px),
        radial-gradient(circle at 54px 18px, var(--syn-string) 0 4.5px, transparent 5.5px),
        var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 1;
}
/* Filename tab, docked left of the code area after the dots */
[data-skin="developer"] .post-content pre::after,
[data-skin="developer"] .post-content .code-block::after {
    content: "code";
    position: absolute;
    top: 8px; left: 74px;
    height: 28px;
    line-height: 27px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--text-dim);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-bottom-color: var(--bg-0);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    z-index: 2;
    pointer-events: none;
}
/* Inner <code> is the horizontal scroller so the chrome never scrolls away */
[data-skin="developer"] .post-content pre > code,
[data-skin="developer"] .post-content .code-block > code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--mono);
    color: var(--text);
    background: none;
    border: 0;
    padding: 0;
}
/* Inline code — a subtle syntax chip */
[data-skin="developer"] .post-content code {
    font-family: var(--mono);
    background: rgba(76,141,255,.12);
    color: var(--primary-2);
    border: 1px solid rgba(76,141,255,.20);
    border-radius: var(--radius-sm);
}
[data-skin="developer"] .post-sig { border-top: 1px solid var(--border); color: var(--text-mute); }
[data-skin="developer"] .edited { color: var(--text-mute); font-family: var(--mono); font-size: 10.5px; }
[data-skin="developer"] .locked-note { border: 1px solid rgba(248,81,73,.3); background: rgba(248,81,73,.07); border-radius: var(--radius); }

/* Reactions */
[data-skin="developer"] .react-main,
[data-skin="developer"] .react-summary,
[data-skin="developer"] .quote-btn,
[data-skin="developer"] .post-tools button,
[data-skin="developer"] .ptool,
[data-skin="developer"] .rs-count { border-radius: var(--radius-sm); }
[data-skin="developer"] .react-main {
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font);
    letter-spacing: 0;
    color: var(--text-dim);
}
[data-skin="developer"] .react-main:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="developer"] .rs-count { background: var(--surface-2); border: 1px solid var(--border); font-family: var(--mono); }
[data-skin="developer"] .rs-count.reacted,
[data-skin="developer"] .react-summary .reacted { border-color: var(--primary); color: var(--primary-2); background: rgba(76,141,255,.12); }
[data-skin="developer"] .react-picker { background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
[data-skin="developer"] .ptool-danger:hover { color: var(--red); }

/* Best-answer box */
[data-skin="developer"] .best-answer-box {
    border: 1px solid rgba(63,185,80,.4);
    border-left: 3px solid var(--green);
    background: rgba(63,185,80,.07);
    border-radius: 0 var(--radius) var(--radius) 0;
}
[data-skin="developer"] .ba-head { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--green); }
[data-skin="developer"] .best-btn:hover,
[data-skin="developer"] .best-banner { color: var(--green); }

/* Poll */
[data-skin="developer"] .poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-skin="developer"] .poll-bar-wrap { background: var(--bg-1); border-radius: 999px; }
[data-skin="developer"] .poll-bar { background: var(--grad-primary); border-radius: 999px; }
[data-skin="developer"] .poll-q { font-family: var(--type); letter-spacing: -.01em; font-weight: 700; }
[data-skin="developer"] .poll-status,
[data-skin="developer"] .poll-total { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }

/* ── 11. PILLS / BADGES / TAGS / PREFIX ─────────────────────────────── */
[data-skin="developer"] .badge,
[data-skin="developer"] .status-pill,
[data-skin="developer"] .role-pill,
[data-skin="developer"] .tag,
[data-skin="developer"] .prefix,
[data-skin="developer"] .new-pill,
[data-skin="developer"] .op-badge,
[data-skin="developer"] .ti-badge {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
}
[data-skin="developer"] .new-pill { background: var(--primary); color: #fff; }
[data-skin="developer"] .badge-pin { background: rgba(210,153,34,.16); color: var(--amber); }
[data-skin="developer"] .badge-lock { background: rgba(248,81,73,.14); color: #ff7b74; }
[data-skin="developer"] .role-pill { background: rgba(163,113,247,.14); color: #c8a6ff; border: 1px solid rgba(163,113,247,.3); }
[data-skin="developer"] .op-badge { background: rgba(76,141,255,.14); color: var(--primary-2); }
[data-skin="developer"] .prefix { color: var(--primary-2); }

/* ── 12. FORMS ──────────────────────────────────────────────────────── */
[data-skin="developer"] .input,
[data-skin="developer"] input[type="text"],
[data-skin="developer"] input[type="email"],
[data-skin="developer"] input[type="password"],
[data-skin="developer"] input[type="search"],
[data-skin="developer"] input[type="number"],
[data-skin="developer"] input[type="url"],
[data-skin="developer"] textarea,
[data-skin="developer"] select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
[data-skin="developer"] .input::placeholder,
[data-skin="developer"] textarea::placeholder { color: var(--text-mute); }
[data-skin="developer"] .input:focus,
[data-skin="developer"] input:focus,
[data-skin="developer"] textarea:focus,
[data-skin="developer"] select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
    outline: none;
}
[data-skin="developer"] textarea { font-family: var(--mono); }
[data-skin="developer"] .form-label,
[data-skin="developer"] .ff-label,
[data-skin="developer"] .tf-label,
[data-skin="developer"] .bm-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="developer"] .form-hint,
[data-skin="developer"] .input-help { color: var(--text-mute); font-size: 12px; }
[data-skin="developer"] .editor-toolbar,
[data-skin="developer"] .esa-editor .editor-toolbar {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-skin="developer"] .editor-toolbar button {
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    background: transparent;
}
[data-skin="developer"] .editor-toolbar button:hover { background: var(--surface-3); color: var(--primary-2); }
[data-skin="developer"] .attach-btn:hover { color: var(--primary-2); }

/* ── 13. TABLES (members / leaderboard) ─────────────────────────────── */
[data-skin="developer"] .table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
[data-skin="developer"] .data,
[data-skin="developer"] .leaderboard-table { background: var(--surface); }
[data-skin="developer"] .data th,
[data-skin="developer"] .leaderboard-table th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="developer"] .data td,
[data-skin="developer"] .leaderboard-table td { border-bottom: 1px solid var(--border-soft); }
[data-skin="developer"] .data tr:hover td,
[data-skin="developer"] .leaderboard-table tr:hover td { background: rgba(76,141,255,.06); }
[data-skin="developer"] .lb-username { font-weight: 700; color: var(--text); }
[data-skin="developer"] .lb-rank-num { font-family: var(--mono); font-weight: 700; color: var(--primary-2); }
[data-skin="developer"] .lb-rep,
[data-skin="developer"] .lb-posts { font-family: var(--mono); }
[data-skin="developer"] .leaderboard-hero {
    background:
        radial-gradient(800px 320px at 80% -40%, rgba(76,141,255,.13), transparent 60%),
        radial-gradient(600px 300px at 10% 120%, rgba(163,113,247,.08), transparent 64%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .lb-subtitle { font-family: var(--mono); color: var(--text-mute); }
[data-skin="developer"] .leaderboard-tabs .lb-tab,
[data-skin="developer"] .lb-tab {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="developer"] .lb-tab:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="developer"] .lb-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

/* Podium */
[data-skin="developer"] .podium-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
[data-skin="developer"] .podium-place.gold .podium-block { border-color: rgba(76,141,255,.5); box-shadow: 0 0 26px -8px rgba(76,141,255,.4); }
[data-skin="developer"] .podium-avatar-wrap img { border-radius: var(--radius); }
[data-skin="developer"] .podium-crown { color: var(--amber); filter: drop-shadow(0 0 10px rgba(210,153,34,.6)); }
[data-skin="developer"] .podium-name { font-family: var(--type); font-weight: 700; letter-spacing: -.01em; }
[data-skin="developer"] .podium-rank-num { font-family: var(--mono); font-weight: 700; color: var(--text-mute); }
[data-skin="developer"] .podium-score { font-family: var(--mono); color: var(--primary-2); }

/* Member cards */
[data-skin="developer"] .member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="developer"] .member-card:hover { border-color: rgba(76,141,255,.5); box-shadow: 0 0 0 1px rgba(76,141,255,.16), 0 14px 30px -16px rgba(1,4,9,.9); }

/* ── 14. PARTNERS ───────────────────────────────────────────────────── */
[data-skin="developer"] .partners-section {
    background: transparent;
    border: 0;
    border-radius: 0;
}
[data-skin="developer"] .partners-section__label,
[data-skin="developer"] .partners-section__heading {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="developer"] .partner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="developer"] .partner-card:hover { border-color: var(--primary); background: var(--surface-2); }
[data-skin="developer"] .partner-card__type { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; color: var(--text-mute); }
[data-skin="developer"] .partner-card__name { font-weight: 700; color: var(--text); }

/* ── 15. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="developer"] .site-footer {
    background: linear-gradient(180deg, rgba(1,4,9,0), var(--bg-1));
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(48,54,61,.6);
}
[data-skin="developer"] .footer-grid h4 {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 9px;
    color: var(--primary-2);
}
[data-skin="developer"] .footer-grid a { color: var(--text-dim); }
[data-skin="developer"] .footer-grid a:hover { color: var(--primary-2); }
[data-skin="developer"] .footer-brand { color: var(--text-dim); }
[data-skin="developer"] .footer-brand .brand-logo,
[data-skin="developer"] .footer-brand .name { font-family: var(--type); }
[data-skin="developer"] .footer-bottom {
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--text-mute);
}
[data-skin="developer"] .lang-switch a.on { background: var(--primary); color: #fff; border-radius: var(--radius-sm); }
[data-skin="developer"] .lang-switch a:hover { color: var(--primary-2); }

/* ── 16. AUTH / LOGIN PAGES ─────────────────────────────────────────── */
[data-skin="developer"] .auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
}
[data-skin="developer"] .auth-card h1,
[data-skin="developer"] .auth-card h2 {
    font-family: var(--type);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ── 17. MISC POLISH ────────────────────────────────────────────────── */
[data-skin="developer"] .avatar { border-radius: var(--radius); }
[data-skin="developer"] .divider,
[data-skin="developer"] .sep,
[data-skin="developer"] .tb-sep { border-color: var(--border); background: var(--border); }
[data-skin="developer"] .mod-bar {
    background: linear-gradient(90deg, rgba(210,153,34,.12), transparent);
    border: 1px solid rgba(210,153,34,.3);
    border-radius: var(--radius);
}
[data-skin="developer"] .mod-bar-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--amber); }
[data-skin="developer"] .viewers-bar,
[data-skin="developer"] .vb-label { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text-mute); }
[data-skin="developer"] .cookie-bar { background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-skin="developer"] .text-mute,
[data-skin="developer"] .muted { color: var(--text-mute); }

/* Keep wide/scrolling content contained (page body never scrolls sideways) */
[data-skin="developer"] .table-wrap,
[data-skin="developer"] .post-content pre > code,
[data-skin="developer"] .post-content .code-block > code { max-width: 100%; overflow-x: auto; }

/* ── 18. LIVING IDE — injected by skin-developer.js into the board hero ─
   The developer skin ships no hero video/image, so the board hero renders as
   a blank themed panel; the JS takes it over with a real editor + terminal.
   Every layer here is decorative (aria-hidden) and sits behind or beside the
   headline — it never covers the hero text/stats or blocks a click. */

/* When the IDE is present the hero stacks vertically: [headline + stats] on
   top, the full-width editor panel below (never squeezed beside the text). */
[data-skin="developer"] .fi-hero.has-dev-ide {
    flex-direction: column;
    align-items: stretch;
}

/* Code-rain canvas — subtle, screen-blended, BEHIND all hero content
   (.fi-hero-inner is z-index:2 in core; this is z-index:0). pointer-events
   are off so it can never intercept a click. */
[data-skin="developer"] .dev-hero-rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: screen;
}

/* The editor window itself */
[data-skin="developer"] .dev-ide {
    position: relative;
    z-index: 1;
    align-self: stretch;
    width: 100%;
    max-width: 760px;
    margin: 6px clamp(16px, 4vw, 48px) 40px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(1,4,9,.6), inset 0 1px 0 rgba(230,237,243,.03);
    overflow: hidden;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
}

/* Window chrome bar — traffic dots + file tabs + a "live" pulse */
[data-skin="developer"] .dev-ide-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-bottom: 1px solid var(--border);
}
[data-skin="developer"] .dev-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
[data-skin="developer"] .dev-dot.r { background: var(--syn-error); }
[data-skin="developer"] .dev-dot.y { background: var(--syn-number); }
[data-skin="developer"] .dev-dot.g { background: var(--syn-string); }
[data-skin="developer"] .dev-tabs { display: flex; gap: 2px; margin-left: 10px; overflow: hidden; }
[data-skin="developer"] .dev-tab {
    padding: 5px 12px;
    font-size: 11.5px;
    color: var(--text-mute);
    border: 1px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    white-space: nowrap;
}
[data-skin="developer"] .dev-tab.active {
    color: var(--text);
    background: var(--bg-0);
    border-color: var(--border);
    border-bottom-color: var(--bg-0);
}
[data-skin="developer"] .dev-chrome-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-mute);
}
[data-skin="developer"] .dev-chrome-live i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px var(--green);
    animation: devLivePulse 2s ease-in-out infinite;
}
@keyframes devLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Body: code area + decorative minimap. min-height reserves space so the
   panel does NOT reflow the page as lines type in. */
[data-skin="developer"] .dev-ide-body { display: flex; align-items: stretch; min-height: 212px; }
[data-skin="developer"] .dev-code {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 10px 14px 0;
    overflow-x: auto;                 /* own horizontal scroller — page never scrolls sideways */
    overflow-y: hidden;
}
[data-skin="developer"] .dev-code::-webkit-scrollbar { height: 8px; }
[data-skin="developer"] .dev-row { display: flex; white-space: pre; }
[data-skin="developer"] .dev-ln {
    flex: 0 0 auto;
    width: 3em;
    padding-right: 16px;
    text-align: right;
    color: var(--syn-comment);
    opacity: .55;
    user-select: none;
}
[data-skin="developer"] .dev-lc { white-space: pre; color: var(--text); }

/* Minimap — tiny faint bars hinting at code density */
[data-skin="developer"] .dev-minimap {
    flex: 0 0 54px;
    padding: 14px 10px;
    border-left: 1px solid var(--border-soft);
    background: rgba(1,4,9,.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
[data-skin="developer"] .dev-mm-row { height: 3px; display: flex; }
[data-skin="developer"] .dev-mm-row i { display: block; height: 100%; border-radius: 1px; opacity: .5; }

/* Syntax token colours (typed into .dev-lc) */
[data-skin="developer"] .dev-tok-kw   { color: var(--syn-keyword); }
[data-skin="developer"] .dev-tok-str  { color: var(--syn-string); }
[data-skin="developer"] .dev-tok-fn   { color: var(--syn-function); }
[data-skin="developer"] .dev-tok-num  { color: var(--syn-number); }
[data-skin="developer"] .dev-tok-com  { color: var(--syn-comment); font-style: italic; }
[data-skin="developer"] .dev-tok-var  { color: var(--text); }
[data-skin="developer"] .dev-tok-punct{ color: var(--text-dim); }

/* Blinking caret that follows the typing cursor (reuses devCaretBlink) */
[data-skin="developer"] .dev-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin: 0 1px -0.18em;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(76,141,255,.6);
    border-radius: 1px;
    animation: devCaretBlink 1.05s steps(1) infinite;
}

/* Terminal pane */
[data-skin="developer"] .dev-term {
    min-height: 128px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(600px 120px at 0% 0%, rgba(76,141,255,.06), transparent 70%),
        var(--bg-1);
    font-size: 12.5px;
    line-height: 1.65;
    overflow-x: auto;
}
[data-skin="developer"] .dev-term-line { white-space: pre; color: var(--text-dim); }
[data-skin="developer"] .dev-prompt { color: var(--accent); font-weight: 700; }
[data-skin="developer"] .dev-term-cmd { color: var(--text); }
[data-skin="developer"] .dev-term-dim { color: var(--text-mute); }
[data-skin="developer"] .dev-term-add { color: var(--green); }
[data-skin="developer"] .dev-term-ok {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(63,185,80,.35);
}
[data-skin="developer"] .dev-progress {
    display: inline-block;
    width: 160px;
    height: 7px;
    vertical-align: middle;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
[data-skin="developer"] .dev-progress i { display: block; height: 100%; width: 0; background: var(--grad-primary); transition: width .12s linear; }
[data-skin="developer"] .dev-progress-pct { color: var(--text-mute); }

/* Status bar — VS-Code-style bottom strip with a cycling build state */
[data-skin="developer"] .dev-ide-status {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="developer"] .dev-st { display: inline-flex; align-items: center; padding: 5px 12px; white-space: nowrap; }
[data-skin="developer"] .dev-st-branch { background: var(--primary); color: #fff; font-weight: 700; }
[data-skin="developer"] .dev-st-build.st-run { color: var(--amber); }
[data-skin="developer"] .dev-st-build.st-ok { color: var(--green); }
[data-skin="developer"] .dev-st-spacer { flex: 1 1 auto; padding: 0; }
[data-skin="developer"] .dev-st-mut { color: var(--text-mute); }

@media (max-width: 720px) {
    [data-skin="developer"] .dev-minimap { display: none; }
    [data-skin="developer"] .dev-ide { margin: 6px 14px 28px; }
    [data-skin="developer"] .dev-ide-body { min-height: 200px; }
}

/* ── 19. CODE-BLOCK IDE CHROME + GIT-DIFF (post content, all pages) ────
   The window chrome + filename tab already exist; here we add a subtle
   line-number GUTTER band and diff accents so pasted code reads as an IDE. */
[data-skin="developer"] .post-content pre,
[data-skin="developer"] .post-content .code-block {
    padding-left: 52px;                 /* room for the gutter band */
    background:
        linear-gradient(90deg, rgba(139,148,158,.05) 0 42px, transparent 42px),
        linear-gradient(90deg, transparent 41px, var(--border-soft) 41px 42px, transparent 42px),
        var(--bg-0);
}
/* git-diff accents (used when content ships ins/del or .diff-add/.diff-del) */
[data-skin="developer"] .post-content ins,
[data-skin="developer"] .post-content .diff-add {
    background: rgba(63,185,80,.14);
    color: #7ee787;
    text-decoration: none;
    box-shadow: inset 2px 0 0 var(--green);
}
[data-skin="developer"] .post-content del,
[data-skin="developer"] .post-content .diff-del {
    background: rgba(248,81,73,.13);
    color: #ff9d96;
    text-decoration: none;
    box-shadow: inset 2px 0 0 var(--red);
}

/* ── 21. SITE-WIDE IDE AMBIANCE (board + every page, behind content) ────
   The living-IDE feel used to live ONLY in the board hero — and never showed
   at all on tenants that ship a custom hero video/image (csdark, redline),
   whose board therefore read as "just dark colors". To make the WHOLE board an
   immersive editor, the JS now injects two decorative, aria-hidden,
   pointer-events:none layers on every page: a very faint code-rain canvas
   pinned behind all content, and a VS-Code-style status bar along the bottom.
   Neither can ever cover text or block a click. */

/* Faint code-rain pinned behind everything. It is a dedicated fixed <canvas>
   (NOT background-attachment:fixed) so it never forces the hero <video>/banner
   layers to drop on repaint. The root has no background of its own (body's
   background propagates), so a z-index:-1 fixed layer paints ABOVE that base
   fill and BEHIND all content — visible only in the page's negative space. */
[data-skin="developer"] .dev-ambient {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: .42;                 /* very faint — never a bright matrix */
}

/* Reserve the status-bar strip so it never hides page content / the footer. */
[data-skin="developer"] body { padding-bottom: 27px; }

/* VS-Code-style bottom status bar — subtle, translucent, non-interactive. */
[data-skin="developer"] .dev-statusbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: stretch;
    height: 27px;
    z-index: 40;
    pointer-events: none;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    background: rgba(22,27,34,.82);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px) saturate(1.05);
    box-shadow: 0 -6px 20px rgba(1,4,9,.35);
}
[data-skin="developer"] .dev-sb-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="developer"] .dev-sb-live i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: devLivePulse 2s ease-in-out infinite;
}
[data-skin="developer"] .dev-sb-mut { color: var(--text-mute); }
@media (max-width: 620px) {
    /* keep only the essentials on narrow screens */
    [data-skin="developer"] .dev-sb-host,
    [data-skin="developer"] .dev-sb-enc { display: none; }
}

/* Editor "diff gutter" on board + topic rows: a faint monospace + marker in
   the left gutter so every row reads like an added line in a diff, brightening
   on hover. Uses the free ::after pseudo — the row's own `background` shorthand
   is never touched (banner-safe, parity with the ::before accent-stripe rule). */
[data-skin="developer"] .fi-row::after,
[data-skin="developer"] .topic-row::after {
    content: "+";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--syn-string);
    opacity: .15;
    transition: opacity .15s ease;
    pointer-events: none;
}
[data-skin="developer"] .fi-row::after { left: 9px; }
[data-skin="developer"] .topic-row::after { left: 6px; }
[data-skin="developer"] .fi-row:hover::after,
[data-skin="developer"] .topic-row:hover::after { opacity: .7; }

/* ── 20. REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-skin="developer"] * { transition: none !important; animation: none !important; }
    /* Freeze the caret(s) in the visible state rather than mid-blink */
    [data-skin="developer"] .fi-hero h1::after,
    [data-skin="developer"] .dev-caret { opacity: 1; }
    /* No ambient/hero code-rain when motion is reduced (JS also skips building it) */
    [data-skin="developer"] .dev-hero-rain,
    [data-skin="developer"] .dev-ambient { display: none; }
}