/* =====================================================================
   ESAForum SKIN · "obsidian"
   Layered dark surfaces, hairlines instead of borders, a single meaningful
   accent (interaction) and a mono HUD micro-typography layer. Depth comes
   from stacked tones (void → bg → surface → surface-2 → surface-3), not from
   glow. Effects are discovered on interaction, never announced.

   Design contract (shared with landing-obsidian.css — same tokens, same
   seven motions: hairline sweep, corner ticks, status pulse, index numerals,
   reveal-on-hover meta, counter tick, single scanline pass).

   Every rule is scoped to [data-skin="obsidian"]. Nothing leaks.
   Production guards honoured (see the notes at .fi-row / .topic-row / .fi-hero).
   ===================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root[data-skin="obsidian"] {
    --ob-void: #0a0c0f;
    --ob-bg: #0e1116;
    --ob-surface: #141920;
    --ob-surface-2: #1a2028;
    --ob-surface-3: #212932;
    --ob-line: rgba(255,255,255,.06);
    --ob-line-2: rgba(255,255,255,.11);
    --ob-text: #e7ecf3;
    --ob-dim: #9aa7b8;
    --ob-mute: #64707f;
    --ob-accent: #46c6b8;                 /* INTERACTION. Brand-swappable (override here + --primary-rgb). */
    --ob-accent-soft: rgba(70,198,184,.14);
    --ob-accent-line: rgba(70,198,184,.35);
    --ob-metal: #8a97a8;
    --ob-online: #56d364;
    --ob-warn: #e3b341;
    --ob-danger: #f06666;
    --ob-r: 10px;
    --ob-r-lg: 16px;
    --ob-ease: cubic-bezier(.4,0,.2,1);
    --ob-fast: 140ms;
    --ob-med: 220ms;
    --ob-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ob-accent-2: #6fd6ca;               /* link / hover tint of the accent */
    --ob-on-accent: #0a0c0f;

    /* Base-theme variable map — untouched components inherit the look. */
    --bg-0: var(--ob-bg);
    --bg-1: var(--ob-void);
    --bg-2: var(--ob-surface);
    --surface: var(--ob-surface);
    --surface-2: var(--ob-surface-2);
    --surface-3: var(--ob-surface-3);
    --elev: var(--ob-surface-2);
    --border: var(--ob-line-2);
    --border-soft: var(--ob-line);
    --text: var(--ob-text);
    --text-dim: var(--ob-dim);
    --text-mute: var(--ob-mute);
    --primary: var(--ob-accent);
    --primary-rgb: 70, 198, 184;
    --primary-2: var(--ob-accent-2);
    --accent: var(--ob-accent);
    --accent-2: var(--ob-accent-2);
    --accent-rgb: 70, 198, 184;
    --on-accent: var(--ob-on-accent);
    --green: var(--ob-online);
    --amber: var(--ob-warn);
    --red: var(--ob-danger);
    --pink: var(--ob-danger);
    --grad-primary: linear-gradient(135deg, var(--ob-accent), var(--ob-accent));
    --grad-cyan: linear-gradient(135deg, var(--ob-accent-2), var(--ob-accent));
    --grad-pink: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
    --radius: var(--ob-r);
    --radius-sm: 8px;
    --radius-lg: var(--ob-r-lg);
    --shadow: 0 18px 44px -22px rgba(0,0,0,.75);
    --shadow-glow: 0 0 0 1px var(--ob-accent-line);
    --ring: 0 0 0 3px var(--ob-accent-soft);
    --primary-glow: var(--ob-accent-soft);
    --transition: var(--ob-fast) var(--ob-ease);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: var(--ob-mono);
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="obsidian"] body {
    color: var(--ob-text);
    font-family: var(--font);
    letter-spacing: -.004em;
    /* Alive but almost imperceptible: two cool radials + a 1px grid fragment
       fading out from the top-left. No background-attachment (Chromium drops
       hero video / banners on repaint when a fixed layer is present). */
    background-color: var(--ob-bg);
    background-image:
        radial-gradient(900px 520px at 18% -140px, rgba(70,198,184,.055), transparent 62%),
        radial-gradient(760px 520px at 100% 8%, rgba(138,151,168,.045), transparent 60%),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: auto, auto, 56px 56px, 56px 56px;
    background-position: 0 0, 0 0, 0 -1px, -1px 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}
/* Grain: SVG turbulence as a fixed, non-interactive veil. Sits above the canvas
   and below every block (negative z-index inside the root context). */
[data-skin="obsidian"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}
/* The grid fragment should fade away below the fold instead of tiling forever. */
[data-skin="obsidian"] body::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0, transparent 360px, var(--ob-bg) 1040px);
}
[data-skin="obsidian"] body { position: relative; }

[data-skin="obsidian"] ::selection { background: var(--ob-accent-line); color: #fff; }
[data-skin="obsidian"] ::-webkit-scrollbar { width: 9px; height: 9px; }
[data-skin="obsidian"] ::-webkit-scrollbar-track { background: var(--ob-void); }
[data-skin="obsidian"] ::-webkit-scrollbar-thumb { background: var(--ob-surface-3); border: 2px solid var(--ob-void); border-radius: 8px; }
[data-skin="obsidian"] ::-webkit-scrollbar-thumb:hover { background: var(--ob-metal); }
[data-skin="obsidian"] :focus-visible { outline: 1px solid var(--ob-accent); outline-offset: 3px; border-radius: 4px; }
[data-skin="obsidian"] a { color: var(--ob-accent-2); transition: color var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] a:hover { color: var(--ob-text); }
[data-skin="obsidian"] hr { border-top: 1px solid var(--ob-line-2); }

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────── */
[data-skin="obsidian"] h1,
[data-skin="obsidian"] h2,
[data-skin="obsidian"] h3,
[data-skin="obsidian"] h4 {
    font-family: var(--font);
    color: var(--ob-text);
    letter-spacing: -.022em;
    font-weight: 700;
}
[data-skin="obsidian"] h1 { letter-spacing: -.03em; font-weight: 800; }

/* HUD micro-labels: JetBrains Mono, 11px, uppercase, .12em tracking. This is
   the one accent that makes the theme feel tactical without any imagery. */
[data-skin="obsidian"] .panel-title,
[data-skin="obsidian"] .widget-head,
[data-skin="obsidian"] .fi-widget-head,
[data-skin="obsidian"] .fi-eyebrow,
[data-skin="obsidian"] .fi-toolbar-label,
[data-skin="obsidian"] .fi-cat-title,
[data-skin="obsidian"] .fi-cat-count,
[data-skin="obsidian"] .fi-stat span,
[data-skin="obsidian"] .fi-stats-row span,
[data-skin="obsidian"] .fi-bs-label,
[data-skin="obsidian"] .fi-resume-head,
[data-skin="obsidian"] .fi-legend-sub,
[data-skin="obsidian"] .topic-list-head,
[data-skin="obsidian"] .topic-stat span:last-child,
[data-skin="obsidian"] .topic-controls .tc-count,
[data-skin="obsidian"] .post-num,
[data-skin="obsidian"] .pa-level,
[data-skin="obsidian"] .pa-stats span,
[data-skin="obsidian"] .pa-joined,
[data-skin="obsidian"] .mod-bar-label,
[data-skin="obsidian"] .poll-head,
[data-skin="obsidian"] .poll-total,
[data-skin="obsidian"] .viewers-bar .vb-label,
[data-skin="obsidian"] .best-banner,
[data-skin="obsidian"] .profile-stat span,
[data-skin="obsidian"] .profile-username,
[data-skin="obsidian"] .xp-bar-labels,
[data-skin="obsidian"] .xp-lvl-badge span,
[data-skin="obsidian"] .ach-trophy-time,
[data-skin="obsidian"] .member-count,
[data-skin="obsidian"] .member-card .mc-join,
[data-skin="obsidian"] .leaderboard-table th,
[data-skin="obsidian"] .settings-nav .nav-section,
[data-skin="obsidian"] .session-meta,
[data-skin="obsidian"] .footer-grid h4,
[data-skin="obsidian"] .footer-bottom,
[data-skin="obsidian"] .partners-section__label,
[data-skin="obsidian"] .partner-card__type,
[data-skin="obsidian"] .hdr-panel-head b,
[data-skin="obsidian"] .hp-time,
[data-skin="obsidian"] .act-item .ai-time,
[data-skin="obsidian"] .fi-last-by,
[data-skin="obsidian"] .topic-last .tl-title,
[data-skin="obsidian"] .new-pill,
[data-skin="obsidian"] .op-badge,
[data-skin="obsidian"] .badge-pin,
[data-skin="obsidian"] .badge-lock,
[data-skin="obsidian"] .fi-featured-badge,
[data-skin="obsidian"] .shout-time,
[data-skin="obsidian"] .edited,
[data-skin="obsidian"] .lang-switch a,
[data-skin="obsidian"] .th-topic,
[data-skin="obsidian"] .th-stat,
[data-skin="obsidian"] .th-last {
    font-family: var(--ob-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}
/* Numbers everywhere align on a grid */
[data-skin="obsidian"] .fi-stat b,
[data-skin="obsidian"] .fi-stats-row b,
[data-skin="obsidian"] .fi-bs-val,
[data-skin="obsidian"] .topic-stat .ts-val,
[data-skin="obsidian"] .pa-stats b,
[data-skin="obsidian"] .profile-stat b,
[data-skin="obsidian"] .rank-row .val,
[data-skin="obsidian"] .rank-row .rk,
[data-skin="obsidian"] .lb-rank-num,
[data-skin="obsidian"] .lb-posts,
[data-skin="obsidian"] .lb-rep,
[data-skin="obsidian"] .pagination a,
[data-skin="obsidian"] .pagination span,
[data-skin="obsidian"] .badge-count,
[data-skin="obsidian"] .react-summary .rs-count,
[data-skin="obsidian"] .fi-legend-count,
[data-skin="obsidian"] .fi-pill,
[data-skin="obsidian"] .mc-stats b { font-variant-numeric: tabular-nums; }

/* ── 4. MOTION VOCABULARY (keyframes) ───────────────────────────────── */
@keyframes obPulse {
    0%   { box-shadow: 0 0 0 0 rgba(86,211,100,.45); }
    70%  { box-shadow: 0 0 0 7px rgba(86,211,100,0); }
    100% { box-shadow: 0 0 0 0 rgba(86,211,100,0); }
}
@keyframes obTick {
    0%   { transform: scale(1.22); opacity: .35; color: var(--ob-accent); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes obScan {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translate3d(0, var(--ob-scan-h, 320px), 0); opacity: 0; }
}
@keyframes obIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
[data-skin="obsidian"] .ob-tick { animation: obTick var(--ob-med) var(--ob-ease) 1; display: inline-block; }
[data-skin="obsidian"] .ob-scanline {
    position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(70,198,184,.55) 30%, rgba(231,236,243,.7) 50%, rgba(70,198,184,.55) 70%, transparent);
    animation: obScan 1100ms var(--ob-ease) 1 both;
}
/* JS-driven one-shot reveal (progressive: .ob-reveal is only ever set by JS) */
html[data-skin="obsidian"].ob-js .ob-reveal { opacity: 0; transform: translateY(8px); }
html[data-skin="obsidian"].ob-js .ob-reveal.ob-in {
    opacity: 1; transform: none;
    transition: opacity 320ms var(--ob-ease), transform 320ms var(--ob-ease);
    transition-delay: calc(var(--ob-i, 0) * 45ms);
}

/* ── 5. HEADER / NAV ────────────────────────────────────────────────── */
[data-skin="obsidian"] .site-header {
    background: rgba(14,17,22,.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--ob-line);
    box-shadow: none;
    transition: background-color var(--ob-med) var(--ob-ease), box-shadow var(--ob-med) var(--ob-ease), border-color var(--ob-med) var(--ob-ease);
}
[data-skin="obsidian"] .site-header.ob-scrolled {
    background: rgba(10,12,15,.86);
    border-bottom-color: var(--ob-line-2);
    box-shadow: 0 12px 30px -20px rgba(0,0,0,.8);
}
[data-skin="obsidian"] .brand { color: var(--ob-text); font-weight: 800; letter-spacing: -.03em; }
[data-skin="obsidian"] .brand .logo-mark { background: var(--ob-surface-3); box-shadow: 0 0 0 1px var(--ob-line-2); color: var(--ob-text); border-radius: 9px; }
[data-skin="obsidian"] .brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--ob-accent); }

[data-skin="obsidian"] .main-nav { gap: 2px; }
[data-skin="obsidian"] .main-nav > a {
    position: relative;
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--ob-dim);
    font-weight: 500;
    font-size: 13.5px;
    background: transparent;
    box-shadow: none;
    transition: color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease);
}
/* Hairline sweep */
[data-skin="obsidian"] .main-nav > a::after {
    content: '';
    position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
    background: var(--ob-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ob-med) var(--ob-ease);
    pointer-events: none;
}
[data-skin="obsidian"] .main-nav > a:hover { color: var(--ob-text); background: rgba(255,255,255,.035); box-shadow: none; }
[data-skin="obsidian"] .main-nav > a:hover::after,
[data-skin="obsidian"] .main-nav > a.active::after { transform: scaleX(1); }
[data-skin="obsidian"] .main-nav > a.active { color: var(--ob-text); background: transparent; box-shadow: none; }
[data-skin="obsidian"] #moreMenu .trigger,
[data-skin="obsidian"] .main-nav .user-menu .trigger {
    color: var(--ob-dim); font-weight: 500; font-size: 13.5px; border-radius: 7px; padding: 8px 12px;
}
[data-skin="obsidian"] #moreMenu .trigger:hover,
[data-skin="obsidian"] .main-nav .user-menu .trigger:hover { color: var(--ob-text); background: rgba(255,255,255,.035); }

/* Search: open field, hairline, corner ticks on focus */
[data-skin="obsidian"] .search-mini {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--ob-line-2);
    border-radius: 8px;
    width: 250px;
    transition: border-color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .search-mini::before,
[data-skin="obsidian"] .search-mini::after {
    content: ''; position: absolute; width: 7px; height: 7px; pointer-events: none;
    opacity: 0; transition: opacity var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
    transform: scale(.6);
}
[data-skin="obsidian"] .search-mini::before { left: -1px; top: -1px; border-top: 1px solid var(--ob-accent); border-left: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .search-mini::after  { right: -1px; bottom: -1px; border-bottom: 1px solid var(--ob-accent); border-right: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .search-mini:focus-within { border-color: var(--ob-accent-line); background: var(--ob-void); box-shadow: none; }
[data-skin="obsidian"] .search-mini:focus-within::before,
[data-skin="obsidian"] .search-mini:focus-within::after { opacity: 1; transform: none; }
[data-skin="obsidian"] .search-mini .icon { color: var(--ob-mute); }
[data-skin="obsidian"] .search-mini:focus-within .icon { color: var(--ob-accent); }
[data-skin="obsidian"] .search-mini input { color: var(--ob-text); font-size: 13px; }
[data-skin="obsidian"] .search-mini input::placeholder { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="obsidian"] .search-mini .search-results { border-radius: var(--ob-r); padding: 6px; }
[data-skin="obsidian"] .search-mini .search-results a { border-radius: 6px; font-size: 13px; }
[data-skin="obsidian"] .search-mini .search-results a:hover { background: var(--ob-surface-3); color: var(--ob-text); }

[data-skin="obsidian"] .icon-btn {
    width: 36px; height: 36px; border-radius: 8px; color: var(--ob-dim);
    transition: color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease), border-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .icon-btn:hover { color: var(--ob-text); background: rgba(255,255,255,.05); border-color: var(--ob-line-2); }
[data-skin="obsidian"] .badge-count {
    background: var(--ob-accent); color: var(--ob-on-accent);
    font-family: var(--ob-mono); font-size: 10px; font-weight: 600; min-width: 16px; height: 16px;
    border: 2px solid var(--ob-bg); top: -3px; right: -3px; border-radius: 8px;
}
[data-skin="obsidian"] .user-menu .trigger { border-radius: 8px; padding: 3px 8px 3px 3px; gap: 8px; }
[data-skin="obsidian"] .user-menu .trigger:hover { background: rgba(255,255,255,.05); }
[data-skin="obsidian"] .user-menu .trigger span { font-weight: 600; font-size: 13.5px; }
[data-skin="obsidian"] .user-menu .trigger .avatar.sm { box-shadow: 0 0 0 1px var(--ob-line-2); }

/* Dropdowns + header panels: one elevated tone, hairline-2, soft deep shadow */
[data-skin="obsidian"] .dropdown,
[data-skin="obsidian"] .hdr-panel,
[data-skin="obsidian"] .mention-dd,
[data-skin="obsidian"] .tb-pop {
    background: var(--ob-surface-2);
    border: 1px solid var(--ob-line-2);
    border-radius: var(--ob-r);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -20px rgba(0,0,0,.85);
    transform: translateY(-4px);
    transition: opacity var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease), visibility var(--ob-fast);
}
[data-skin="obsidian"] .dropdown.open { transform: translateY(0); }
[data-skin="obsidian"] .dropdown a,
[data-skin="obsidian"] .dropdown button { border-radius: 6px; font-size: 13.5px; color: var(--ob-dim); padding: 8px 10px; }
[data-skin="obsidian"] .dropdown a:hover,
[data-skin="obsidian"] .dropdown button:hover { background: rgba(255,255,255,.05); color: var(--ob-text); }
[data-skin="obsidian"] .dropdown .divider { background: var(--ob-line); }
[data-skin="obsidian"] .hdr-panel { padding: 0; }
[data-skin="obsidian"] .hdr-panel-head { border-bottom: 1px solid var(--ob-line); padding: 12px 14px; }
[data-skin="obsidian"] .hdr-panel-head b { color: var(--ob-dim); }
[data-skin="obsidian"] .hdr-panel-head a { font-size: 12px; color: var(--ob-accent); }
[data-skin="obsidian"] .hdr-panel-body { padding: 6px; gap: 2px; }
[data-skin="obsidian"] .hp-item { border-radius: 7px; padding: 9px 10px; border-color: transparent; }
[data-skin="obsidian"] .hp-item:hover { background: rgba(255,255,255,.04); border-color: var(--ob-line); }
[data-skin="obsidian"] .hp-item.unread { background: var(--ob-accent-soft); }
[data-skin="obsidian"] .hp-item.unread::after { background: var(--ob-accent); box-shadow: none; width: 6px; height: 6px; }
[data-skin="obsidian"] .hp-ic { background: var(--ob-surface-3); border-color: var(--ob-line); border-radius: 8px; }
[data-skin="obsidian"] .hp-ava { border-radius: 8px; }
[data-skin="obsidian"] .hp-title { font-size: 13px; }
[data-skin="obsidian"] .hp-time { color: var(--ob-mute); font-size: 10px; opacity: .8; transition: opacity var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .hp-item:hover .hp-time { opacity: 1; color: var(--ob-dim); }
[data-skin="obsidian"] .hdr-loading, [data-skin="obsidian"] .hdr-empty { font-family: var(--ob-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-mute); }

/* Announcement + cookie */
[data-skin="obsidian"] .announce-bar {
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-line-2);
    color: var(--ob-dim);
    font-weight: 500;
    font-size: 13px;
    position: relative;
}
[data-skin="obsidian"] .announce-bar::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ob-accent); pointer-events: none;
}
[data-skin="obsidian"] .announce-bar span a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .cookie-bar {
    background: var(--ob-surface-2);
    border: 1px solid var(--ob-line-2);
    border-radius: var(--ob-r);
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.9);
    color: var(--ob-dim);
    font-size: 13px;
}
[data-skin="obsidian"] .nav-progress { background: var(--ob-accent) !important; height: 2px !important; box-shadow: none !important; }

/* ── 6. BUTTONS ─────────────────────────────────────────────────────── */
[data-skin="obsidian"] .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -.005em;
    transition: color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease), border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease), box-shadow var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .btn:active { transform: translateY(1px); }
[data-skin="obsidian"] .btn-primary {
    background: var(--ob-accent);
    color: var(--ob-on-accent);
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -12px rgba(70,198,184,.6);
}
[data-skin="obsidian"] .btn-primary:hover {
    background: var(--ob-accent-2);
    color: var(--ob-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 24px -12px rgba(70,198,184,.7);
}
[data-skin="obsidian"] .btn-ghost {
    background: transparent;
    color: var(--ob-dim);
    border-color: var(--ob-line-2);
}
[data-skin="obsidian"] .btn-ghost:hover {
    background: var(--ob-accent-soft);
    border-color: var(--ob-accent-line);
    color: var(--ob-text);
}
[data-skin="obsidian"] .btn-danger {
    background: rgba(240,102,102,.12);
    color: var(--ob-danger);
    border-color: rgba(240,102,102,.3);
}
[data-skin="obsidian"] .btn-danger:hover { background: var(--ob-danger); color: #0a0c0f; border-color: transparent; filter: none; }
[data-skin="obsidian"] .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
[data-skin="obsidian"] .btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 10px; }
[data-skin="obsidian"] .topic-follow.following,
[data-skin="obsidian"] .forum-follow.following {
    background: var(--ob-accent-soft) !important; border-color: var(--ob-accent-line) !important; color: var(--ob-accent-2) !important;
}
[data-skin="obsidian"] .bookmark-btn.saved { color: var(--ob-warn) !important; border-color: rgba(227,179,65,.4) !important; background: rgba(227,179,65,.1) !important; }

/* ── 7. FORMS ───────────────────────────────────────────────────────── */
[data-skin="obsidian"] .input,
[data-skin="obsidian"] input[type=text],
[data-skin="obsidian"] input[type=email],
[data-skin="obsidian"] input[type=password],
[data-skin="obsidian"] input[type=number],
[data-skin="obsidian"] input[type=url],
[data-skin="obsidian"] input[type=search],
[data-skin="obsidian"] select,
[data-skin="obsidian"] textarea {
    background: var(--ob-void);
    border: 1px solid var(--ob-line-2);
    color: var(--ob-text);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color var(--ob-fast) var(--ob-ease), box-shadow var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .input:focus,
[data-skin="obsidian"] input:focus,
[data-skin="obsidian"] select:focus,
[data-skin="obsidian"] textarea:focus {
    border-color: var(--ob-accent-line);
    box-shadow: 0 0 0 3px var(--ob-accent-soft);
    background: var(--ob-void);
    outline: none;
}
[data-skin="obsidian"] ::placeholder { color: var(--ob-mute); }
[data-skin="obsidian"] select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
[data-skin="obsidian"] select option { background: var(--ob-surface-2); color: var(--ob-text); }
[data-skin="obsidian"] input[type=checkbox],
[data-skin="obsidian"] input[type=radio],
[data-skin="obsidian"] input[type=range] { accent-color: var(--ob-accent); }
[data-skin="obsidian"] input[type=file].input { padding: 9px 12px; color: var(--ob-dim); font-family: var(--ob-mono); font-size: 12px; }
[data-skin="obsidian"] input[type=file].input::file-selector-button {
    background: var(--ob-surface-2); color: var(--ob-text); border: 1px solid var(--ob-line-2); border-radius: 6px;
    padding: 6px 10px; margin-right: 12px; font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
[data-skin="obsidian"] .input--color,
[data-skin="obsidian"] input[type=color].input { width: 48px; height: 36px; padding: 3px; }
[data-skin="obsidian"] .form-group { position: relative; }
[data-skin="obsidian"] .form-group label,
[data-skin="obsidian"] .form-group .form-label { color: var(--ob-dim); font-size: 12.5px; font-weight: 600; }
[data-skin="obsidian"] .form-hint,
[data-skin="obsidian"] .form-group small { color: var(--ob-mute); font-size: 12px; }
/* Corner ticks on the focused field group (JS toggles .ob-focus; CSS can't reach
   a parent from :focus alone in every browser, :has() where supported). */
[data-skin="obsidian"] .form-group::before,
[data-skin="obsidian"] .form-group::after {
    content: ''; position: absolute; width: 8px; height: 8px; pointer-events: none;
    opacity: 0; transform: scale(.6); transition: opacity var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .form-group::before { left: -8px; top: -6px; border-top: 1px solid var(--ob-accent); border-left: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .form-group::after { right: -8px; bottom: -6px; border-bottom: 1px solid var(--ob-accent); border-right: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .form-group.ob-focus::before,
[data-skin="obsidian"] .form-group.ob-focus::after,
[data-skin="obsidian"] .form-group:has(:focus-visible)::before,
[data-skin="obsidian"] .form-group:has(:focus-visible)::after { opacity: 1; transform: none; }
[data-skin="obsidian"] .checkbox { color: var(--ob-dim); }

/* ── 8. PANELS, CARDS, WIDGETS ──────────────────────────────────────── */
/* Anti-card: real panels are the exception. .card stays a panel (posts, forms,
   settings) but loses the shadow; sidebar widgets become OPEN sections
   separated by hairlines with a mono index numeral. */
[data-skin="obsidian"] .card {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-lg);
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
[data-skin="obsidian"] .card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; transform: none; }
[data-skin="obsidian"] .card-head { border-bottom: 1px solid var(--ob-line); padding: 14px 20px; }
[data-skin="obsidian"] .card-head::before { display: none; }
[data-skin="obsidian"] .card-head h2, [data-skin="obsidian"] .card-head h3 { font-size: 15px; }
[data-skin="obsidian"] .panel-title { color: var(--ob-mute); }

[data-skin="obsidian"] .col-side { counter-reset: obw; }
[data-skin="obsidian"] .profile-sidebar { counter-reset: obw; }
[data-skin="obsidian"] .widget,
[data-skin="obsidian"] .fi-widget {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ob-line-2);
    border-radius: 0;
    margin-bottom: 6px;
    overflow: visible;
    box-shadow: none;
}
[data-skin="obsidian"] .fi-widget:hover { border-color: var(--ob-line-2); }
[data-skin="obsidian"] .widget-head,
[data-skin="obsidian"] .fi-widget-head {
    background: none;
    border-bottom: 0;
    padding: 14px 0 10px;
    color: var(--ob-dim);
    gap: 8px;
}
[data-skin="obsidian"] .col-side .widget-head::before,
[data-skin="obsidian"] .col-side .fi-widget-head::before,
[data-skin="obsidian"] .profile-sidebar .widget-head::before {
    counter-increment: obw;
    content: counter(obw, decimal-leading-zero);
    color: var(--ob-accent);
    font-family: var(--ob-mono);
    font-size: 10px;
    letter-spacing: .1em;
    opacity: .9;
    margin-right: 2px;
}
[data-skin="obsidian"] .widget-body,
[data-skin="obsidian"] .fi-widget .widget-body { padding: 2px 0 18px; }
[data-skin="obsidian"] .widget-head .pill-count,
[data-skin="obsidian"] .fi-widget-head .fi-pill {
    background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim);
    font-family: var(--ob-mono); font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border-radius: 4px;
}
/* A few widgets ARE panels — the ones that need containment */
[data-skin="obsidian"] .widget.shoutbox,
[data-skin="obsidian"] .fi-discord-cta,
[data-skin="obsidian"] .fi-steam {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-lg);
    margin-bottom: 18px;
    overflow: hidden;
}
[data-skin="obsidian"] .widget.shoutbox .widget-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--ob-line); }
[data-skin="obsidian"] .fi-discord-cta { border-color: rgba(88,101,242,.28); }
[data-skin="obsidian"] .fi-discord-cta:hover { border-color: rgba(88,101,242,.5); }
[data-skin="obsidian"] .fi-discord-cta .widget-body { padding: 20px 16px; }
[data-skin="obsidian"] .fi-discord-cta h4 { color: var(--ob-text); }

/* Shoutbox internals */
[data-skin="obsidian"] .shout-messages { background: var(--ob-void); }
[data-skin="obsidian"] .shout-form { border-top: 1px solid var(--ob-line); background: var(--ob-surface); }
[data-skin="obsidian"] .shout-form input { background: transparent; border: 0; }
[data-skin="obsidian"] .shout-form input:focus { box-shadow: none; }
[data-skin="obsidian"] .shout-time { color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .shout-login { color: var(--ob-mute); font-size: 12.5px; }
[data-skin="obsidian"] .shout-expand { color: var(--ob-mute); }
[data-skin="obsidian"] .shout-expand:hover { color: var(--ob-accent); }

/* Board statistics — 2×2 grid separated by hairlines, no boxes */
[data-skin="obsidian"] .fi-board-stats { gap: 0; padding: 2px 0 14px; }
[data-skin="obsidian"] .fi-bs-item {
    background: transparent; border: 0; border-radius: 0; padding: 12px 10px 10px;
    transition: background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .fi-bs-item:nth-child(odd) { border-right: 1px solid var(--ob-line); }
[data-skin="obsidian"] .fi-bs-item:nth-child(-n+2) { border-bottom: 1px solid var(--ob-line); }
[data-skin="obsidian"] .fi-bs-item:hover { background-color: rgba(255,255,255,.025); }
[data-skin="obsidian"] .fi-bs-val { color: var(--ob-text); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
[data-skin="obsidian"] .fi-bs-val.online { color: var(--ob-online); text-shadow: none; }
[data-skin="obsidian"] .fi-bs-label { color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .fi-divider { background: var(--ob-line); margin: 10px 0; }
[data-skin="obsidian"] .fi-widget > div[style*="padding:0 16px"] { padding: 0 0 14px !important; }
[data-skin="obsidian"] .fi-champion { padding-left: 0 !important; padding-right: 0 !important; }

/* Mini user, online strip, rank rows, activity feed */
[data-skin="obsidian"] .mini-user .name a { color: var(--ob-text); }
[data-skin="obsidian"] .mini-user .sub { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="obsidian"] .online-strip { gap: 5px; }
[data-skin="obsidian"] .online-strip a img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 0 0 1px var(--ob-line-2); transition: transform var(--ob-fast) var(--ob-ease), box-shadow var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .online-strip a:hover img { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ob-accent-line); }
[data-skin="obsidian"] .rank-list { gap: 0; }
[data-skin="obsidian"] .rank-row { padding: 8px 4px; border-radius: 6px; border-top: 1px solid var(--ob-line); transition: background-color var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .rank-row:first-child { border-top: 0; }
[data-skin="obsidian"] .rank-row:hover { background-color: rgba(255,255,255,.03); }
[data-skin="obsidian"] .rank-row .rk {
    background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-mute);
    font-family: var(--ob-mono); font-size: 11px; font-weight: 500; border-radius: 5px; width: 26px; height: 22px;
}
[data-skin="obsidian"] .rank-row .rk.gold   { background: var(--ob-warn); border-color: transparent; color: #1a1300; }
[data-skin="obsidian"] .rank-row .rk.silver { background: #c9d3de; border-color: transparent; color: #0b0e16; }
[data-skin="obsidian"] .rank-row .rk.bronze { background: #c78a5b; border-color: transparent; color: #1a0e00; }
[data-skin="obsidian"] .rank-row .nm { font-weight: 600; font-size: 13.5px; }
[data-skin="obsidian"] .rank-row .val { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 11px; font-weight: 500; transition: color var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .rank-row:hover .val { color: var(--ob-dim); }
[data-skin="obsidian"] .rank-row .avatar.sm { border-radius: 7px; }
[data-skin="obsidian"] .fi-champion { border-bottom-color: var(--ob-line) !important; }
[data-skin="obsidian"] .fi-champion a { color: var(--ob-text) !important; }
[data-skin="obsidian"] .act-feed { gap: 0; }
[data-skin="obsidian"] .act-item { padding: 9px 0; border-top: 1px solid var(--ob-line); font-size: 13px; }
[data-skin="obsidian"] .act-item:first-child { border-top: 0; }
[data-skin="obsidian"] .act-item .ai-ico { background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: 7px; width: 28px; height: 28px; }
[data-skin="obsidian"] .act-item .ai-txt { color: var(--ob-dim); }
[data-skin="obsidian"] .act-item .ai-txt b { color: var(--ob-text); font-weight: 600; }
[data-skin="obsidian"] .act-item .ai-txt a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .act-item .ai-time { color: var(--ob-mute); font-size: 10px; letter-spacing: .06em; text-transform: none; }
[data-skin="obsidian"] .act-item .avatar.sm { border-radius: 7px !important; }

/* Badges, chips, tags, pills */
[data-skin="obsidian"] .badge { border-radius: 4px; font-size: 11px; padding: 2px 8px; }
[data-skin="obsidian"] .badge-pin  { background: rgba(227,179,65,.12); color: var(--ob-warn); }
[data-skin="obsidian"] .badge-lock { background: rgba(240,102,102,.12); color: var(--ob-danger); }
[data-skin="obsidian"] .badge-new  { background: rgba(86,211,100,.12); color: var(--ob-online); }
[data-skin="obsidian"] .chip { background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim); border-radius: 6px; }
[data-skin="obsidian"] .tag { background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim); border-radius: 5px; font-family: var(--ob-mono); font-size: 11px; letter-spacing: .04em; }
[data-skin="obsidian"] .tag:hover { border-color: var(--ob-accent-line); color: var(--ob-text); }
[data-skin="obsidian"] .role-pill { background: var(--ob-accent-soft); border: 1px solid var(--ob-accent-line); color: var(--ob-accent-2); border-radius: 5px; font-size: 11px; }
[data-skin="obsidian"] .prefix { border-radius: 4px; font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
[data-skin="obsidian"] .avatar { background: var(--ob-surface-2); }

/* Alerts — semantic colour = meaning; a 2px left tick, no fills louder than 8% */
[data-skin="obsidian"] .alert { border-radius: 8px; border: 1px solid var(--ob-line-2); background: var(--ob-surface); color: var(--ob-dim); position: relative; padding-left: 18px; }
[data-skin="obsidian"] .alert::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ob-metal); pointer-events: none; }
[data-skin="obsidian"] .alert-success { color: var(--ob-online); background: rgba(86,211,100,.06); border-color: rgba(86,211,100,.22); }
[data-skin="obsidian"] .alert-success::before { background: var(--ob-online); }
[data-skin="obsidian"] .alert-error { color: var(--ob-danger); background: rgba(240,102,102,.06); border-color: rgba(240,102,102,.22); }
[data-skin="obsidian"] .alert-error::before { background: var(--ob-danger); }
[data-skin="obsidian"] .alert-warn { color: var(--ob-warn); background: rgba(227,179,65,.06); border-color: rgba(227,179,65,.22); }
[data-skin="obsidian"] .alert-warn::before { background: var(--ob-warn); }
[data-skin="obsidian"] .alert-info { color: var(--ob-accent-2); background: var(--ob-accent-soft); border-color: var(--ob-accent-line); }
[data-skin="obsidian"] .alert-info::before { background: var(--ob-accent); }

/* Status pulse — green means online, and only online */
[data-skin="obsidian"] .online-dot.on,
[data-skin="obsidian"] .fi-eyebrow-dot,
[data-skin="obsidian"] .profile-avatar-wrap .online-dot {
    background: var(--ob-online);
    box-shadow: 0 0 0 0 rgba(86,211,100,.45);
    animation: obPulse 2.6s var(--ob-ease) infinite;
}

/* Breadcrumbs, page head, empty state, pagination, stat cards */
[data-skin="obsidian"] .breadcrumbs { font-size: 12.5px; color: var(--ob-mute); gap: 8px; margin-bottom: 20px; }
[data-skin="obsidian"] .breadcrumbs a { color: var(--ob-dim); }
[data-skin="obsidian"] .breadcrumbs a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .breadcrumbs .sep { color: var(--ob-mute); opacity: .55; font-family: var(--ob-mono); }
[data-skin="obsidian"] .page-head h1 { font-size: 24px; }
[data-skin="obsidian"] .page-head .sub { color: var(--ob-mute); }
[data-skin="obsidian"] .empty-state { color: var(--ob-mute); }
[data-skin="obsidian"] .empty-state .ico { opacity: .45; filter: grayscale(.4); }
[data-skin="obsidian"] .empty-state h1 { font-family: var(--ob-mono); font-weight: 500; letter-spacing: .08em; color: var(--ob-text); }
[data-skin="obsidian"] .empty-state h3 { color: var(--ob-dim); font-weight: 600; }
[data-skin="obsidian"] .empty-state.card { border-style: dashed; }
[data-skin="obsidian"] .pagination { gap: 4px; }
[data-skin="obsidian"] .pagination a,
[data-skin="obsidian"] .pagination span {
    background: transparent; border: 1px solid var(--ob-line); color: var(--ob-dim);
    font-family: var(--ob-mono); font-size: 12px; font-weight: 500; min-width: 34px; height: 34px; border-radius: 6px;
    transition: border-color var(--ob-fast) var(--ob-ease), color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .pagination a:hover { border-color: var(--ob-accent-line); color: var(--ob-text); background-color: var(--ob-accent-soft); }
[data-skin="obsidian"] .pagination .current { background: var(--ob-accent); color: var(--ob-on-accent); border-color: transparent; }
[data-skin="obsidian"] .pagination .dots { border: 0; color: var(--ob-mute); }
[data-skin="obsidian"] .stat-card { background: var(--ob-surface); border-color: var(--ob-line); border-radius: var(--ob-r); }
[data-skin="obsidian"] .stat-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--ob-line-2); }
[data-skin="obsidian"] .stat-card .stat-ico { background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: 8px; }
[data-skin="obsidian"] .stat-card .stat-val { color: var(--ob-text); font-variant-numeric: tabular-nums; }
[data-skin="obsidian"] .stat-card .stat-label { font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-mute); }
[data-skin="obsidian"] .skeleton { background: linear-gradient(90deg, var(--ob-surface-2), var(--ob-surface-3), var(--ob-surface-2)); }
[data-skin="obsidian"] .divider-line { background: var(--ob-line); }

/* ── 9. FORUM HOME ──────────────────────────────────────────────────── */
/* Hero chrome only — layout rules live under .fi-hero--off (tenants with a
   video/image hero keep the media layout untouched). */
[data-skin="obsidian"] .fi-hero {
    border: 0;
    border-bottom: 1px solid var(--ob-line-2);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 34px;
}
[data-skin="obsidian"] .fi-hero--off {
    min-height: 320px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(720px 360px at 12% 110%, rgba(70,198,184,.10), transparent 62%),
        radial-gradient(560px 300px at 92% -20%, rgba(138,151,168,.08), transparent 60%),
        linear-gradient(180deg, var(--ob-surface) 0%, var(--ob-bg) 100%);
    overflow: hidden;
}
/* Grid fragment, parallax-driven (JS sets --ob-px/--ob-py in [-1,1]; ≤2px). */
[data-skin="obsidian"] .fi-hero--off::before {
    content: '';
    position: absolute; inset: -12px;
    right: 0; width: 60%; left: auto;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 40px 40px;
    mask-image: radial-gradient(70% 90% at 70% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 90% at 70% 50%, #000 20%, transparent 75%);
    transform: translate3d(calc(var(--ob-px, 0) * 2px), calc(var(--ob-py, 0) * 2px), 0);
    transition: transform 400ms var(--ob-ease);
}
/* Scanline pass — fires once per page load when JS adds .ob-scan */
[data-skin="obsidian"] .fi-hero--off::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    width: auto; border-radius: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(70,198,184,.5) 35%, rgba(231,236,243,.75) 50%, rgba(70,198,184,.5) 65%, transparent);
}
[data-skin="obsidian"] .fi-hero--off.ob-scan::after { animation: obScan 1300ms var(--ob-ease) 1 both; }
[data-skin="obsidian"] .fi-hero--off .fi-hero-inner { padding-top: 56px; padding-bottom: 56px; gap: 48px; }
[data-skin="obsidian"] .fi-hero--off > * { position: relative; z-index: 1; }
[data-skin="obsidian"] .fi-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--ob-text); }
[data-skin="obsidian"] .fi-hero--off h1 .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--ob-text); position: relative; }
[data-skin="obsidian"] .fi-hero--off h1 .grad::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ob-accent); pointer-events: none;
    transform: scaleX(.18); transform-origin: left; transition: transform 600ms var(--ob-ease) 200ms;
}
[data-skin="obsidian"] .fi-hero--off.fade-up h1 .grad::after { transform: scaleX(1); }
[data-skin="obsidian"] .fi-hero p { color: var(--ob-dim); font-size: 15px; max-width: 520px; }
[data-skin="obsidian"] .fi-eyebrow {
    background: transparent; border: 0; padding: 0; color: var(--ob-accent); gap: 9px; margin-bottom: 18px; border-radius: 0;
}
[data-skin="obsidian"] .fi-eyebrow-dot { width: 6px; height: 6px; }
/* Hero stats: open figures divided by vertical hairlines */
[data-skin="obsidian"] .fi-hero-stats { gap: 0; }
[data-skin="obsidian"] .fi-stat {
    background: transparent; border: 0; border-left: 1px solid var(--ob-line-2); border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    align-items: flex-start; min-width: 0; padding: 4px 26px 4px 18px; position: relative;
    transition: none;
}
[data-skin="obsidian"] .fi-stat:hover { background: transparent; border-color: var(--ob-line-2); }
[data-skin="obsidian"] .fi-stat::before {
    content: ''; position: absolute; left: -1px; top: 0; height: 100%; width: 1px; background: var(--ob-accent);
    transform: scaleY(0); transform-origin: top; transition: transform var(--ob-med) var(--ob-ease); pointer-events: none;
}
[data-skin="obsidian"] .fi-stat:hover::before { transform: scaleY(1); }
[data-skin="obsidian"] .fi-stat b { color: var(--ob-text); font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
[data-skin="obsidian"] .fi-stat span { color: var(--ob-mute); margin-top: 6px; font-size: 10px; }
[data-skin="obsidian"] .fi-stat.fi-stat-online b { color: var(--ob-online); text-shadow: none; display: inline-flex; align-items: center; gap: 9px; }
[data-skin="obsidian"] .fi-stat.fi-stat-online b::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-online); flex-shrink: 0;
    animation: obPulse 2.6s var(--ob-ease) infinite;
}

/* Toolbar + resume */
[data-skin="obsidian"] .fi-toolbar { background: transparent; border: 0; border-bottom: 1px solid var(--ob-line-2); border-radius: 0; padding: 4px 0 12px; margin-bottom: 20px; }
[data-skin="obsidian"] .fi-toolbar-label { color: var(--ob-mute); }
[data-skin="obsidian"] .fi-resume-head { color: var(--ob-mute); }
[data-skin="obsidian"] .fi-resume-card {
    background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r); position: relative;
    transition: border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .fi-resume-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ob-accent);
    transform: scaleX(0); transform-origin: left; transition: transform var(--ob-med) var(--ob-ease); pointer-events: none;
}
[data-skin="obsidian"] .fi-resume-card:hover { border-color: var(--ob-line-2); transform: translateY(-1px); }
[data-skin="obsidian"] .fi-resume-card:hover::after { transform: scaleX(1); }
[data-skin="obsidian"] .fi-resume-title { color: var(--ob-text); font-weight: 600; }
[data-skin="obsidian"] .fi-resume-meta { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10px; letter-spacing: .06em; }

/* Categories: open headers with index numerals, rows separated by hairlines */
[data-skin="obsidian"] .col-main { counter-reset: obc; }
[data-skin="obsidian"] .fi-category { margin-bottom: 40px; }
[data-skin="obsidian"] .fi-cat-bar {
    background: transparent; border: 0; border-bottom: 1px solid var(--ob-line-2); border-radius: 0; overflow: visible; align-items: center;
}
[data-skin="obsidian"] .fi-cat-bar.has-banner { background: var(--cat-bg) center / cover no-repeat; border-radius: var(--ob-r) var(--ob-r) 0 0; }
[data-skin="obsidian"] .fi-cat-accent { width: 3px; height: 14px; align-self: center; background: var(--ob-accent); border-radius: 1px; }
[data-skin="obsidian"] .fi-cat-label { padding: 12px 12px 12px 14px; gap: 10px; }
[data-skin="obsidian"] .fi-cat-label::before {
    counter-increment: obc;
    content: counter(obc, decimal-leading-zero);
    font-family: var(--ob-mono); font-size: 11px; letter-spacing: .12em; color: var(--ob-mute);
    padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--ob-line-2); line-height: 1;
}
[data-skin="obsidian"] .fi-cat-title { color: var(--ob-text); font-size: 12px; font-weight: 500; }
[data-skin="obsidian"] .fi-cat-count { background: transparent; border: 0; color: var(--ob-mute); padding: 0; margin-right: 4px; font-size: 10px; }
[data-skin="obsidian"] .fi-cat-ico { border-radius: 5px; opacity: .85; }
[data-skin="obsidian"] .fi-forum-list { background: transparent; border: 0; border-radius: 0; overflow: visible; }
[data-skin="obsidian"] .fi-row {
    background-color: transparent;
    border-top: 1px solid var(--ob-line);
    padding: 16px 12px 16px 18px;
    grid-template-columns: 56px 1fr 140px 250px;
    transition: background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .fi-row:first-child { border-top: 0; }
/* HARD RULE: never the `background` shorthand on .fi-row:hover — per-forum
   banner images (--forum-bg) live in the background layers. Colour only. */
[data-skin="obsidian"] .fi-row:hover { background-color: rgba(255,255,255,.025); }
[data-skin="obsidian"] .fi-row::before { width: 2px; opacity: .35; border-radius: 0; transition: opacity var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .fi-row:hover::before { opacity: 1; }
[data-skin="obsidian"] .fi-row.is-unread::before { opacity: 1; box-shadow: none; width: 2px; }
[data-skin="obsidian"] .fi-row.is-read::before { opacity: .2; }
/* Hairline sweep along the bottom edge */
[data-skin="obsidian"] .fi-row::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--ob-accent-line); transform: scaleX(0); transform-origin: left;
    transition: transform var(--ob-med) var(--ob-ease); pointer-events: none;
}
[data-skin="obsidian"] .fi-row:hover::after { transform: scaleX(1); }
[data-skin="obsidian"] .fi-row.has-banner { border-radius: var(--ob-r); border-top-color: transparent; margin-top: 1px; }
[data-skin="obsidian"] .fi-icon {
    width: 46px; height: 46px; border-radius: 9px;
    border: 1px solid var(--ob-line-2);
    transition: transform var(--ob-fast) var(--ob-ease), border-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .fi-row:hover .fi-icon { transform: translateY(-1px); border-color: var(--ob-accent-line); }
[data-skin="obsidian"] .fi-row.is-unread .fi-icon { box-shadow: 0 0 0 1px var(--ob-accent-line); }
[data-skin="obsidian"] .fi-row.is-read .fi-icon { opacity: .85; }
[data-skin="obsidian"] .fi-icon-emoji { font-size: 22px; }
[data-skin="obsidian"] .fi-info h3 { font-size: 15px; font-weight: 600; }
[data-skin="obsidian"] .fi-info h3 a { color: var(--ob-text); }
[data-skin="obsidian"] .fi-info h3 a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .fi-row.is-unread .fi-info h3 a { color: var(--ob-text); font-weight: 700; }
[data-skin="obsidian"] .fi-row.is-unread .fi-info h3 a::before { width: 6px; height: 6px; background: var(--ob-accent); box-shadow: none; }
[data-skin="obsidian"] .fi-row.is-read .fi-info h3 a { color: var(--ob-dim); font-weight: 500; }
[data-skin="obsidian"] .fi-desc { color: var(--ob-mute); font-size: 12.5px; }
[data-skin="obsidian"] .fi-desc a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .fi-sf-chip {
    background: transparent; border: 1px solid var(--ob-line); color: var(--ob-dim); border-radius: 5px; font-weight: 500; font-size: 11.5px;
    transition: border-color var(--ob-fast) var(--ob-ease), color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .fi-sf-chip:hover { background: transparent; border-color: var(--ob-accent-line); color: var(--ob-text); transform: none; box-shadow: none; }
[data-skin="obsidian"] .fi-sf-dot { box-shadow: none; opacity: .9; }
[data-skin="obsidian"] .fi-sf-more { color: var(--ob-mute); }
[data-skin="obsidian"] .fi-stats { padding: 8px 6px; }
[data-skin="obsidian"] .fi-stats-row b { color: var(--ob-text); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
[data-skin="obsidian"] .fi-stats-row span { color: var(--ob-mute); font-size: 9.5px; }
[data-skin="obsidian"] .fi-stats-sep { background: var(--ob-line); width: 40%; }
/* Reveal-on-hover meta: the last-post block rests at 70% and steps forward */
[data-skin="obsidian"] .fi-last { opacity: .72; transform: translateX(2px); transition: opacity var(--ob-med) var(--ob-ease), transform var(--ob-med) var(--ob-ease); padding: 8px 12px; }
[data-skin="obsidian"] .fi-row:hover .fi-last { opacity: 1; transform: none; }
[data-skin="obsidian"] .fi-last-ava { border-radius: 7px; box-shadow: 0 0 0 1px var(--ob-line-2); width: 32px; height: 32px; }
[data-skin="obsidian"] .fi-last-topic { color: var(--ob-text); font-weight: 600; font-size: 12.5px; }
[data-skin="obsidian"] .fi-last-topic:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .fi-last-by { color: var(--ob-mute); font-size: 10px; letter-spacing: .06em; text-transform: none; }
[data-skin="obsidian"] .fi-last-author { color: var(--ob-dim); font-family: var(--ob-mono); font-size: 10px; }
[data-skin="obsidian"] .fi-last-empty { color: var(--ob-mute); font-size: 12px; }
[data-skin="obsidian"] .fi-featured-badge { border-radius: 4px; }

/* Legend + partners (partners must stay transparent / borderless) */
[data-skin="obsidian"] .fi-legend { background: transparent; border: 0; border-top: 1px solid var(--ob-line-2); border-radius: 0; padding: 20px 0 6px; margin-top: 30px; }
[data-skin="obsidian"] .fi-legend-title { font-size: 14px; color: var(--ob-text); }
[data-skin="obsidian"] .fi-legend-item { border-radius: 6px; font-weight: 600; font-size: 12.5px; transition: border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .fi-legend-item:hover { transform: translateY(-1px); box-shadow: none; }
[data-skin="obsidian"] .fi-legend-dot { box-shadow: none; width: 7px; height: 7px; }
[data-skin="obsidian"] .fi-legend-count { border-radius: 4px; font-family: var(--ob-mono); font-weight: 500; }
[data-skin="obsidian"] .partners-section { background: transparent; border: 0; }
[data-skin="obsidian"] .partners-section__label { background: none; -webkit-text-fill-color: currentColor; color: var(--ob-mute); font-size: 11px; }
[data-skin="obsidian"] .partners-section__heading { font-size: 12px; }
[data-skin="obsidian"] .partners-section__ico { color: var(--ob-accent); }
[data-skin="obsidian"] .partner-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r); }
[data-skin="obsidian"] .partner-card:hover { border-color: var(--ob-line-2); }
[data-skin="obsidian"] .partner-card__type { font-size: 10px; }
[data-skin="obsidian"] .partner-card--hosting .partner-card__type { color: var(--ob-accent); }
[data-skin="obsidian"] .partner-card--community .partner-card__type { color: var(--ob-metal); }

/* ── 10. CATEGORY / FORUM PAGE ──────────────────────────────────────── */
[data-skin="obsidian"] .forum-banner { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); }
[data-skin="obsidian"] .forum-banner .fb-bg { opacity: .3; }
[data-skin="obsidian"] .forum-banner .fb-icon { border-radius: 10px; }
[data-skin="obsidian"] .forum-banner h1 { font-size: 24px; }
[data-skin="obsidian"] .forum-desc-html { color: var(--ob-dim); }
[data-skin="obsidian"] .forum-desc-html a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .subforum-card { background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r); transition: border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .subforum-card:hover { border-color: var(--ob-accent-line); transform: translateY(-1px); box-shadow: none; }
[data-skin="obsidian"] .subforum-card .sc-icon { background: var(--ob-surface-3); border-radius: 7px; }
[data-skin="obsidian"] .subforum-card .sc-title { color: var(--ob-text); }
[data-skin="obsidian"] .subforum-card .sc-count { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="obsidian"] .topic-controls { background: transparent; border: 0; border-bottom: 1px solid var(--ob-line-2); border-radius: 0; padding: 4px 0 12px; margin-bottom: 0; }
[data-skin="obsidian"] .topic-controls .tc-count { color: var(--ob-mute); }
[data-skin="obsidian"] .topic-list { border: 0; border-radius: 0; overflow: visible; }
[data-skin="obsidian"] .topic-list-head { background: transparent; border-bottom: 1px solid var(--ob-line); color: var(--ob-mute); padding: 10px 14px; font-size: 10px; }
[data-skin="obsidian"] .topic-list .topic-row {
    background-color: transparent;
    border-bottom: 1px solid var(--ob-line);
    padding: 13px 14px;
    transition: background-color var(--ob-fast) var(--ob-ease);
}
/* HARD RULE: colour-only hover on .topic-row (no `background` shorthand). */
[data-skin="obsidian"] .topic-list .topic-row:hover { background-color: rgba(255,255,255,.025); }
[data-skin="obsidian"] .topic-list .topic-row::before { width: 2px; }
[data-skin="obsidian"] .topic-list .topic-row.unread::before { background: var(--ob-accent); width: 2px; box-shadow: none; }
[data-skin="obsidian"] .topic-list .topic-row::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ob-accent-line);
    transform: scaleX(0); transform-origin: left; transition: transform var(--ob-med) var(--ob-ease); pointer-events: none;
}
[data-skin="obsidian"] .topic-list .topic-row:hover::after { transform: scaleX(1); }
[data-skin="obsidian"] .topic-icon { background: var(--ob-surface-2); border: 1px solid var(--ob-line-2); border-radius: 9px; width: 38px; height: 38px; transition: transform var(--ob-fast) var(--ob-ease), box-shadow var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .topic-icon .ti-ava { border-radius: 8px; }
[data-skin="obsidian"] .topic-list .topic-row:hover .topic-icon { box-shadow: 0 0 0 1px var(--ob-accent-line); transform: translateY(-1px); }
[data-skin="obsidian"] .topic-row.unread .topic-icon { box-shadow: 0 0 0 1px var(--ob-accent-line); }
[data-skin="obsidian"] .topic-icon .ti-badge { background: var(--ob-surface-3); border-color: var(--ob-line-2); box-shadow: none; }
[data-skin="obsidian"] .topic-icon .unread-dot,
[data-skin="obsidian"] .unread-dot { background: var(--ob-accent); border: 2px solid var(--ob-bg); box-shadow: none; width: 10px; height: 10px; }
[data-skin="obsidian"] .topic-main .tm-title { color: var(--ob-text); font-weight: 600; font-size: 14px; }
[data-skin="obsidian"] .topic-main .tm-title:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .topic-row.unread .tm-title { color: var(--ob-text); font-weight: 700; }
[data-skin="obsidian"] .topic-row:not(.unread) .tm-title { color: var(--ob-dim); font-weight: 500; }
[data-skin="obsidian"] .topic-row:not(.unread) .topic-icon .ti-ava { opacity: .8; }
[data-skin="obsidian"] .topic-main .tm-meta { color: var(--ob-mute); font-size: 11.5px; }
[data-skin="obsidian"] .topic-main .tm-meta a { color: var(--ob-dim); }
[data-skin="obsidian"] .topic-main .tm-meta a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .new-pill { background: var(--ob-accent); color: var(--ob-on-accent); box-shadow: none; border-radius: 3px; font-size: 9px; padding: 2px 5px; letter-spacing: .1em; }
[data-skin="obsidian"] .badge-pin, [data-skin="obsidian"] .badge-lock { font-size: 9.5px; padding: 2px 6px; border-radius: 3px; }
[data-skin="obsidian"] .topic-stat { color: var(--ob-dim); }
[data-skin="obsidian"] .topic-stat .ts-val { color: var(--ob-text); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
[data-skin="obsidian"] .topic-stat span:last-child { color: var(--ob-mute); font-size: 9.5px; }
[data-skin="obsidian"] .topic-last { opacity: .75; transition: opacity var(--ob-med) var(--ob-ease); }
[data-skin="obsidian"] .topic-list .topic-row:hover .topic-last { opacity: 1; }
[data-skin="obsidian"] .topic-last .tl-title { color: var(--ob-dim); font-size: 10.5px; font-weight: 500; }
[data-skin="obsidian"] .topic-last .tl-title:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .topic-last .tl-lastby { color: var(--ob-mute); }
[data-skin="obsidian"] .topic-last .tl-lastby-ava { border-radius: 5px; }
[data-skin="obsidian"] .topic-list .empty-state { padding: 60px 20px; }

/* ── 11. THREAD ─────────────────────────────────────────────────────── */
[data-skin="obsidian"] .topic-hero { background: transparent; border: 0; border-bottom: 1px solid var(--ob-line-2); border-radius: 0; padding: 4px 0 20px; margin-bottom: 22px; box-shadow: none; }
[data-skin="obsidian"] .topic-hero h1 { font-size: 26px; letter-spacing: -.03em; }
[data-skin="obsidian"] .topic-hero h1 .prefix { border-radius: 4px; vertical-align: middle; }
[data-skin="obsidian"] .topic-hero-meta { color: var(--ob-mute); font-size: 12.5px; gap: 14px; }
[data-skin="obsidian"] .topic-hero-meta .thm a { color: var(--ob-dim); }
[data-skin="obsidian"] .topic-hero-meta .thm a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .topic-hero-meta .avatar.sm { border-radius: 6px; }
[data-skin="obsidian"] .viewers-bar { background: transparent; border: 0; padding: 4px 0 0; margin-top: 12px; }
[data-skin="obsidian"] .viewers-bar .vb-label { color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .viewers-bar .vb-list a img { border-color: var(--ob-bg); border-radius: 6px; }
[data-skin="obsidian"] .viewers-bar .vb-count { color: var(--ob-dim); font-family: var(--ob-mono); font-size: 11px; font-weight: 500; }
[data-skin="obsidian"] .mod-bar { background: rgba(240,102,102,.05); border: 1px solid rgba(240,102,102,.2); border-radius: var(--ob-r); }
[data-skin="obsidian"] .mod-bar-label { color: var(--ob-danger); }
[data-skin="obsidian"] .mod-subform label { color: var(--ob-dim); font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="obsidian"] .poll-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); }
[data-skin="obsidian"] .poll-head { color: var(--ob-mute); }
[data-skin="obsidian"] .poll-status { color: var(--ob-warn); }
[data-skin="obsidian"] .poll-q { font-size: 17px; }
[data-skin="obsidian"] .poll-bar-wrap { background: var(--ob-void); box-shadow: inset 0 0 0 1px var(--ob-line); height: 6px; border-radius: 3px; }
[data-skin="obsidian"] .poll-bar { background: var(--ob-accent); border-radius: 3px; }
[data-skin="obsidian"] .poll-res-top b { font-family: var(--ob-mono); font-size: 11.5px; font-weight: 500; color: var(--ob-dim); }
[data-skin="obsidian"] .poll-res-top .poll-mine { color: var(--ob-accent-2); }
[data-skin="obsidian"] .poll-vote { border: 1px solid var(--ob-line-2); border-radius: 8px; }
[data-skin="obsidian"] .poll-vote:hover { border-color: var(--ob-accent-line); background: var(--ob-accent-soft); }
[data-skin="obsidian"] .best-answer-box { background: rgba(86,211,100,.05); border: 1px solid rgba(86,211,100,.25); border-radius: var(--ob-r-lg); }
[data-skin="obsidian"] .ba-head { color: var(--ob-online); font-family: var(--ob-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
[data-skin="obsidian"] .ba-head a { color: var(--ob-text); text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 13px; }
[data-skin="obsidian"] .ba-jump { color: var(--ob-online); }

/* Posts — the one place a true panel earns its keep */
[data-skin="obsidian"] .posts-list { gap: 14px; }
[data-skin="obsidian"] .post {
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-r-lg);
    position: relative;
    transition: border-color var(--ob-med) var(--ob-ease);
}
[data-skin="obsidian"] .post:hover { border-color: var(--ob-line-2); }
[data-skin="obsidian"] .post.is-op { border-color: var(--ob-accent-line); box-shadow: none; }
[data-skin="obsidian"] .post.is-best { border-color: rgba(86,211,100,.4); box-shadow: none; }
/* Corner ticks (top-right / bottom-left) fade in on hover */
[data-skin="obsidian"] .post::before,
[data-skin="obsidian"] .post::after {
    content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 2;
    opacity: 0; transform: scale(.6); transition: opacity var(--ob-med) var(--ob-ease), transform var(--ob-med) var(--ob-ease);
}
[data-skin="obsidian"] .post::before { right: 7px; top: 7px; border-top: 1px solid var(--ob-accent); border-right: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .post::after { left: 7px; bottom: 7px; border-bottom: 1px solid var(--ob-accent); border-left: 1px solid var(--ob-accent); }
[data-skin="obsidian"] .post:hover::before, [data-skin="obsidian"] .post:hover::after { opacity: 1; transform: none; }
[data-skin="obsidian"] .post.post-flash { animation: none; border-color: var(--ob-accent); }
[data-skin="obsidian"] .best-banner { background: rgba(86,211,100,.08); color: var(--ob-online); border-bottom: 1px solid rgba(86,211,100,.2); font-weight: 500; }
[data-skin="obsidian"] .post-author { background: transparent; border-right: 1px solid var(--ob-line); padding: 22px 16px; }
[data-skin="obsidian"] .post-author::before { height: 2px; opacity: .9; }
[data-skin="obsidian"] .pa-avatar .avatar { border-radius: 12px; box-shadow: 0 0 0 1px var(--ob-line-2), 0 0 0 3px color-mix(in srgb, var(--gc, var(--ob-accent)) 22%, transparent); width: 76px; height: 76px; }
[data-skin="obsidian"] .pa-name { color: var(--ob-text); font-weight: 700; }
[data-skin="obsidian"] .pa-name:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .pa-role { border-radius: 4px; font-size: 10.5px; padding: 2px 8px; }
[data-skin="obsidian"] .pa-title { color: var(--ob-mute); font-size: 12px; font-style: italic; }
[data-skin="obsidian"] .pa-level { color: var(--ob-metal); background: transparent; border: 1px solid var(--ob-line-2); border-radius: 4px; padding: 2px 7px; font-size: 10px; }
[data-skin="obsidian"] .pa-srv-rank { border-radius: 4px; }
[data-skin="obsidian"] .pa-xp-track { background: var(--ob-void); box-shadow: inset 0 0 0 1px var(--ob-line); height: 3px; border-radius: 2px; }
[data-skin="obsidian"] .pa-xp-fill { background: var(--ob-accent); box-shadow: none; border-radius: 2px; }
[data-skin="obsidian"] .pa-stats { border-top: 1px solid var(--ob-line); gap: 22px; }
[data-skin="obsidian"] .pa-stats b { color: var(--ob-text); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
[data-skin="obsidian"] .pa-stats span { color: var(--ob-mute); font-size: 9.5px; }
[data-skin="obsidian"] .pa-joined { color: var(--ob-mute); font-size: 9.5px; }
[data-skin="obsidian"] .post-body { padding: 18px 24px 20px; }
[data-skin="obsidian"] .post-top { border-bottom: 1px solid var(--ob-line); padding-bottom: 12px; margin-bottom: 16px; }
[data-skin="obsidian"] .post-num { color: var(--ob-mute); font-size: 10.5px; gap: 8px; }
[data-skin="obsidian"] .post-num a { color: var(--ob-dim); }
[data-skin="obsidian"] .post-num a:hover { color: var(--ob-accent-2); }
[data-skin="obsidian"] .post-num .edited { color: var(--ob-warn); font-size: 9.5px; }
[data-skin="obsidian"] .op-badge { background: var(--ob-accent); color: var(--ob-on-accent); border-radius: 3px; font-size: 9.5px; padding: 2px 6px; font-weight: 600; }
/* Reveal-on-hover meta: tools rest quiet and step forward with the post */
[data-skin="obsidian"] .post-tools { opacity: .55; transition: opacity var(--ob-med) var(--ob-ease); gap: 2px; }
[data-skin="obsidian"] .post:hover .post-tools, [data-skin="obsidian"] .post:focus-within .post-tools { opacity: 1; }
[data-skin="obsidian"] .ptool { width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--ob-dim); font-size: 12.5px; transition: color var(--ob-fast) var(--ob-ease), border-color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .ptool:hover { border-color: var(--ob-line-2); background-color: rgba(255,255,255,.04); color: var(--ob-text); }
[data-skin="obsidian"] .ptool.active { color: var(--ob-online); border-color: rgba(86,211,100,.35); }
[data-skin="obsidian"] .ptool-danger:hover { color: var(--ob-danger); border-color: rgba(240,102,102,.35); }
[data-skin="obsidian"] .post-content { color: var(--ob-text); font-size: 15px; line-height: 1.72; }
[data-skin="obsidian"] .post-content a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .post-content a:hover { color: var(--ob-text); }
[data-skin="obsidian"] .post-content .post-quote { border-left: 2px solid var(--ob-accent); background: var(--ob-surface-2); border-radius: 0 8px 8px 0; color: var(--ob-dim); }
[data-skin="obsidian"] .post-content .post-quote cite { color: var(--ob-accent-2); font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
[data-skin="obsidian"] .post-content .post-quote::before { color: var(--ob-accent-line); }
[data-skin="obsidian"] .post-content .code-block,
[data-skin="obsidian"] .post-content pre { background: var(--ob-void); border: 1px solid var(--ob-line-2); border-radius: 8px; font-family: var(--ob-mono); font-size: 12.5px; }
[data-skin="obsidian"] .post-content code { background: var(--ob-void); border: 1px solid var(--ob-line); border-radius: 4px; font-family: var(--ob-mono); font-size: .9em; padding: 1px 5px; }
[data-skin="obsidian"] .post-content .spoiler { background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: 8px; }
[data-skin="obsidian"] .post-content .spoiler summary { font-family: var(--ob-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-dim); }
[data-skin="obsidian"] .post-content .mention { color: var(--ob-accent-2); background: var(--ob-accent-soft); border-radius: 4px; }
[data-skin="obsidian"] .post-content .post-video { border-color: var(--ob-line-2); border-radius: 8px; }
[data-skin="obsidian"] .post-content hr { border-top: 1px solid var(--ob-line-2); }
[data-skin="obsidian"] .post-sig { border-top: 1px solid var(--ob-line); color: var(--ob-mute); font-style: normal; font-size: 12.5px; }
[data-skin="obsidian"] .post-sig::before { color: var(--ob-mute); }
[data-skin="obsidian"] .post-foot { border-top: 1px solid var(--ob-line); }
[data-skin="obsidian"] .react-main { background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim); border-radius: 7px; min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
[data-skin="obsidian"] .react-main:hover { border-color: var(--ob-accent-line); color: var(--ob-text); background: rgba(255,255,255,.03); }
[data-skin="obsidian"] .react-main.reacted { background: var(--ob-accent-soft); border-color: var(--ob-accent-line); color: var(--ob-accent-2); }
[data-skin="obsidian"] .react-picker { background: var(--ob-surface-3); border: 1px solid var(--ob-line-2); border-radius: 10px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
[data-skin="obsidian"] .rp-btn { border-radius: 6px; transition: transform var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .rp-btn:hover { transform: translateY(-2px) scale(1.15); }
[data-skin="obsidian"] .react-summary { background: transparent; border: 1px solid var(--ob-line); border-radius: 6px; }
[data-skin="obsidian"] .react-summary .rs-count { color: var(--ob-dim); font-family: var(--ob-mono); font-size: 11px; font-weight: 500; }
[data-skin="obsidian"] .report-btn { color: var(--ob-mute); min-height: 36px; min-width: 36px; }
[data-skin="obsidian"] .report-btn:hover { color: var(--ob-danger); }
[data-skin="obsidian"] .att-chip { background: transparent; border: 1px solid var(--ob-line-2); border-radius: 5px; font-family: var(--ob-mono); font-size: 11px; color: var(--ob-dim); }
[data-skin="obsidian"] .reply-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); box-shadow: none; }
[data-skin="obsidian"] .reply-card h3 { color: var(--ob-text); font-size: 15px; }
[data-skin="obsidian"] .reply-actions .text-mute { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="obsidian"] .locked-note { background: transparent; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r); color: var(--ob-dim); }
[data-skin="obsidian"] .locked-note a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .esa-toast { background: var(--ob-surface-3); border: 1px solid var(--ob-line-2); color: var(--ob-text); border-radius: 8px; font-family: var(--ob-mono); font-size: 11.5px; letter-spacing: .06em; box-shadow: 0 20px 40px -16px rgba(0,0,0,.9); }

/* Editor */
[data-skin="obsidian"] .esa-editor,
[data-skin="obsidian"] .form-group [data-editor] { background: var(--ob-void); border: 1px solid var(--ob-line-2); border-radius: 8px; position: relative; transition: border-color var(--ob-fast) var(--ob-ease), box-shadow var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .esa-editor:focus-within,
[data-skin="obsidian"] .form-group [data-editor]:focus-within { border-color: var(--ob-accent-line); box-shadow: 0 0 0 3px var(--ob-accent-soft); }
[data-skin="obsidian"] .esa-editor.drag { border-color: var(--ob-accent); border-style: dashed; }
[data-skin="obsidian"] .editor-toolbar,
[data-skin="obsidian"] .form-group [data-editor] .editor-toolbar { background: var(--ob-surface); border-bottom: 1px solid var(--ob-line); padding: 7px 9px; gap: 2px; }
[data-skin="obsidian"] .editor-toolbar button,
[data-skin="obsidian"] .form-group [data-editor] .editor-toolbar button,
[data-skin="obsidian"] .editor-toolbar .tb-menu > button { color: var(--ob-dim); border-radius: 5px; font-size: 12.5px; font-weight: 500; min-height: 30px; padding: 4px 9px; }
[data-skin="obsidian"] .editor-toolbar button:hover,
[data-skin="obsidian"] .form-group [data-editor] .editor-toolbar button:hover { background: rgba(255,255,255,.05); border-color: var(--ob-line-2); color: var(--ob-text); }
[data-skin="obsidian"] .editor-toolbar button:active { background: var(--ob-accent-soft); border-color: var(--ob-accent-line); color: var(--ob-accent-2); }
[data-skin="obsidian"] .editor-toolbar .tb-sep { background: var(--ob-line-2); }
[data-skin="obsidian"] .esa-editor textarea,
[data-skin="obsidian"] .form-group [data-editor] textarea { background: transparent; border: 0; box-shadow: none; color: var(--ob-text); font-size: 14.5px; }
[data-skin="obsidian"] .esa-editor textarea:focus,
[data-skin="obsidian"] .form-group [data-editor] textarea:focus { box-shadow: none; }
[data-skin="obsidian"] .esa-editor textarea::placeholder { color: var(--ob-mute); }
[data-skin="obsidian"] .emoji-picker { background: var(--ob-surface); border-bottom: 1px solid var(--ob-line); }
[data-skin="obsidian"] .emoji-picker span:hover { background: var(--ob-surface-3); transform: scale(1.15); }
[data-skin="obsidian"] .tb-pop { padding: 8px; }
[data-skin="obsidian"] .tb-size-pop button { color: var(--ob-dim); border-radius: 5px; }
[data-skin="obsidian"] .tb-size-pop button:hover { background: rgba(255,255,255,.05); color: var(--ob-text); }
[data-skin="obsidian"] .tb-swatch { border-radius: 4px; box-shadow: 0 0 0 1px var(--ob-line-2); }
[data-skin="obsidian"] .tb-color-pop .tb-custom { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="obsidian"] .attach-btn { color: var(--ob-accent-2) !important; }

/* Lightbox + modals */
[data-skin="obsidian"] .esa-lightbox { background: rgba(10,12,15,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-skin="obsidian"] .esa-lightbox img { border-radius: 6px; box-shadow: 0 0 0 1px var(--ob-line-2), 0 40px 80px -30px rgba(0,0,0,.9); }
[data-skin="obsidian"] .esa-lightbox-close { color: var(--ob-dim); font-size: 26px; }
[data-skin="obsidian"] .esa-lightbox-close:hover { color: var(--ob-text); }
[data-skin="obsidian"] #report-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-skin="obsidian"] #report-modal > div { border-radius: var(--ob-r-lg) !important; border-color: var(--ob-line-2) !important; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
[data-skin="obsidian"] #report-modal h3 { font-size: 16px; }
[data-skin="obsidian"] .mdd-item { border-radius: 6px; color: var(--ob-dim); font-size: 13px; }
[data-skin="obsidian"] .mdd-item.on, [data-skin="obsidian"] .mdd-item:hover { background: rgba(255,255,255,.05); color: var(--ob-text); }

/* ── 12. PROFILE ────────────────────────────────────────────────────── */
[data-skin="obsidian"] .profile-cover {
    border-radius: var(--ob-r-lg) var(--ob-r-lg) 0 0;
    background:
        radial-gradient(600px 300px at 10% 120%, rgba(70,198,184,.14), transparent 60%),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(180deg, var(--ob-surface-2), var(--ob-surface));
    box-shadow: none;
    border: 1px solid var(--ob-line); border-bottom: 0;
}
[data-skin="obsidian"] .profile-cover-overlay { background: linear-gradient(to bottom, transparent 40%, rgba(14,17,22,.85) 100%); }
[data-skin="obsidian"] .profile-banner { border-radius: var(--ob-r-lg) var(--ob-r-lg) 0 0; box-shadow: none; }
[data-skin="obsidian"] .profile-head-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-top: 0; border-radius: 0 0 var(--ob-r-lg) var(--ob-r-lg); box-shadow: none; position: relative; }
[data-skin="obsidian"] .profile-avatar-wrap img.avatar.xl { border: 3px solid var(--ob-surface); box-shadow: 0 0 0 1px var(--ob-line-2), 0 12px 30px -14px rgba(0,0,0,.9); border-radius: 22px; }
[data-skin="obsidian"] .profile-avatar-wrap .online-dot { border-color: var(--ob-surface); }
[data-skin="obsidian"] .profile-name { color: var(--ob-text); font-weight: 800; letter-spacing: -.03em; }
[data-skin="obsidian"] .profile-username { color: var(--ob-mute); font-size: 12px; text-transform: none; letter-spacing: .04em; }
[data-skin="obsidian"] .profile-username span { font-family: var(--font); letter-spacing: 0; text-transform: none; }
[data-skin="obsidian"] .profile-stats-row { border-top: 1px solid var(--ob-line); }
[data-skin="obsidian"] .profile-stat { border-right: 1px solid var(--ob-line); transition: background-color var(--ob-fast) var(--ob-ease); }
[data-skin="obsidian"] .profile-stat:hover { background-color: rgba(255,255,255,.02); }
[data-skin="obsidian"] .profile-stat b { color: var(--ob-text); font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
[data-skin="obsidian"] .profile-stat span { color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .profile-stat a:hover b { color: var(--ob-accent-2); }
[data-skin="obsidian"] .xp-premium-wrap { background: transparent; border: 0; border-top: 1px solid var(--ob-line); border-radius: 0; padding: 16px 0 0; margin-top: 0; box-shadow: none; }
[data-skin="obsidian"] .xp-lvl-badge { background: transparent; border: 1px solid var(--ob-line-2); border-radius: 10px; box-shadow: none; color: var(--ob-text); }
[data-skin="obsidian"] .xp-lvl-badge span { color: var(--ob-mute); font-size: 9px; }
[data-skin="obsidian"] .xp-lvl-badge strong { color: var(--ob-text); font-weight: 700; }
[data-skin="obsidian"] .xp-bar-labels { color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .xp-bar-labels .xp-total { color: var(--ob-dim); }
[data-skin="obsidian"] .xp-bar-track { background: var(--ob-void); box-shadow: inset 0 0 0 1px var(--ob-line); height: 4px; border-radius: 2px; }
[data-skin="obsidian"] .xp-bar-track::before { display: none; }
[data-skin="obsidian"] .xp-bar-fill { background: var(--ob-accent); box-shadow: none; border-radius: 2px; }
[data-skin="obsidian"] .xp-bar-fill::after { display: none; }
[data-skin="obsidian"] .xp-streak-chip { background: rgba(227,179,65,.08); border-color: rgba(227,179,65,.25); border-radius: 5px; color: var(--ob-warn); font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .06em; }
[data-skin="obsidian"] .profile-bio-card { background: var(--ob-surface); border-color: var(--ob-line); }
[data-skin="obsidian"] .profile-meta-list li { color: var(--ob-dim); font-size: 13.5px; }
[data-skin="obsidian"] .profile-meta-list a { color: var(--ob-accent-2); }
[data-skin="obsidian"] .trophy-case-card .card-head span,
[data-skin="obsidian"] .profile-main .card-head span { background: transparent !important; border-color: var(--ob-line-2) !important; border-radius: 4px !important; font-family: var(--ob-mono); font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-mute) !important; }
[data-skin="obsidian"] .ach-trophy-card, [data-skin="obsidian"] .trophy-item, [data-skin="obsidian"] .achievement-badge {
    background: var(--ob-surface-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r);
    transition: border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .ach-trophy-card::before { opacity: .35; }
[data-skin="obsidian"] .ach-trophy-card:hover, [data-skin="obsidian"] .trophy-item:hover, [data-skin="obsidian"] .achievement-badge:hover { transform: translateY(-2px); border-color: var(--ob-line-2); box-shadow: none; }
[data-skin="obsidian"] .ach-trophy-name, [data-skin="obsidian"] .trophy-label, [data-skin="obsidian"] .achievement-name { color: var(--ob-text); }
[data-skin="obsidian"] .ach-trophy-desc, [data-skin="obsidian"] .achievement-desc { color: var(--ob-mute); }
[data-skin="obsidian"] .ach-trophy-time { color: var(--ob-mute); font-size: 9.5px; }
[data-skin="obsidian"] .ach-empty { color: var(--ob-mute); }
[data-skin="obsidian"] .recent-post-item { border-bottom-color: var(--ob-line); }
[data-skin="obsidian"] .recent-post-excerpt { color: var(--ob-mute); }
[data-skin="obsidian"] .wall-post-form .input { background: var(--ob-void); }
[data-skin="obsidian"] .social-icon-btn { border-radius: 8px; }
[data-skin="obsidian"] .social-icon-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: none; }
[data-skin="obsidian"] .social-discord-text { border-radius: 8px; }
[data-skin="obsidian"] .profile-music-btn { background: var(--ob-surface-3); border: 1px solid var(--ob-line-2); color: var(--ob-text); border-radius: 8px; font-family: var(--ob-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
[data-skin="obsidian"] .profile-music-btn:hover { border-color: var(--ob-accent-line); background: var(--ob-surface-3); transform: none; }
[data-skin="obsidian"] .profile-music-btn.playing { border-color: var(--ob-online); color: var(--ob-online); }
[data-skin="obsidian"] .activity-item .activity-card { background: var(--ob-surface); border-color: var(--ob-line); border-radius: var(--ob-r); }
[data-skin="obsidian"] .activity-type-label { font-family: var(--ob-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
[data-skin="obsidian"] .bookmarks-row:hover { background-color: rgba(255,255,255,.025); }

/* ── 13. MEMBERS + LEADERBOARD ──────────────────────────────────────── */
[data-skin="obsidian"] .member-count { color: var(--ob-mute); }
[data-skin="obsidian"] .member-count a { color: var(--ob-accent-2) !important; text-transform: none; letter-spacing: 0; font-family: var(--font); }
[data-skin="obsidian"] .member-toolbar .search-box input { border-radius: 8px 0 0 8px; }
[data-skin="obsidian"] .member-toolbar .search-box button { border-radius: 0 8px 8px 0; }
/* Segmented tabs: quiet at rest, accent-tinted when active, no solid fill */
[data-skin="obsidian"] .sort-tab, [data-skin="obsidian"] .lb-tab {
    background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim); border-radius: 7px; min-height: 36px; font-size: 12.5px; font-weight: 500;
    transition: border-color var(--ob-fast) var(--ob-ease), color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .sort-tab:hover, [data-skin="obsidian"] .lb-tab:hover { border-color: var(--ob-accent-line); color: var(--ob-text); }
[data-skin="obsidian"] .sort-tab.active, [data-skin="obsidian"] .lb-tab.active { background: var(--ob-accent-soft); border-color: var(--ob-accent-line); color: var(--ob-accent-2); box-shadow: none; }
[data-skin="obsidian"] .member-grid { gap: 12px; }
[data-skin="obsidian"] .member-card {
    background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: 24px 14px 18px;
    transition: border-color var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
}
/* ::before = hairline sweep along the top edge · ::after = a corner tick */
[data-skin="obsidian"] .member-card::before { height: 1px; background: var(--ob-accent); opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform var(--ob-med) var(--ob-ease); }
[data-skin="obsidian"] .member-card::after {
    top: 8px; right: 8px; left: auto; bottom: auto; width: 8px; height: 8px; background: none;
    border-top: 1px solid var(--ob-accent); border-right: 1px solid var(--ob-accent);
    opacity: 0; transform: scale(.6); transition: opacity var(--ob-fast) var(--ob-ease), transform var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .member-card:hover { transform: translateY(-2px); border-color: var(--ob-line-2); box-shadow: none; }
[data-skin="obsidian"] .member-card:hover::before { transform: scaleX(1); opacity: 1; }
[data-skin="obsidian"] .member-card:hover::after { opacity: 1; transform: none; }
[data-skin="obsidian"] .member-card img.avatar { border-radius: 16px; box-shadow: 0 0 0 1px var(--ob-line-2); }
[data-skin="obsidian"] .member-card:hover img.avatar { box-shadow: 0 0 0 1px var(--ob-accent-line); transform: none; }
[data-skin="obsidian"] .member-card .mc-name { color: var(--ob-text); font-weight: 700; }
[data-skin="obsidian"] .member-card .mc-title { color: var(--ob-mute); }
[data-skin="obsidian"] .member-card .mc-stats { color: var(--ob-dim); }
[data-skin="obsidian"] .member-card .mc-stats span b { color: var(--ob-text); }
[data-skin="obsidian"] .member-card .mc-join { color: var(--ob-mute); font-size: 9.5px; opacity: .8; }
[data-skin="obsidian"] .leaderboard-hero { background: transparent; border: 0; padding: 12px 0 8px; }
[data-skin="obsidian"] .leaderboard-hero::after { display: none; }
[data-skin="obsidian"] .leaderboard-hero h1 { font-size: 30px; }
[data-skin="obsidian"] .leaderboard-hero p { color: var(--ob-mute); }
[data-skin="obsidian"] .podium-place:hover { transform: translateY(-2px); filter: none; }
[data-skin="obsidian"] .podium-name { color: var(--ob-text); }
[data-skin="obsidian"] .podium-score { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 11px; letter-spacing: .06em; }
[data-skin="obsidian"] .podium-rank-num { border-color: var(--ob-bg); font-family: var(--ob-mono); font-size: 11px; }
/* Podium metals mean rank — keep them, drop the glow, blocks become open hairline shelves */
[data-skin="obsidian"] .podium-place.p1 .podium-avatar-wrap img { box-shadow: 0 0 0 4px rgba(227,179,65,.18); border-color: var(--ob-warn); border-radius: 22px; }
[data-skin="obsidian"] .podium-place.p2 .podium-avatar-wrap img { box-shadow: 0 0 0 4px rgba(201,211,222,.14); border-color: #c9d3de; border-radius: 20px; }
[data-skin="obsidian"] .podium-place.p3 .podium-avatar-wrap img { box-shadow: 0 0 0 4px rgba(199,138,91,.14); border-color: #c78a5b; border-radius: 18px; }
[data-skin="obsidian"] .podium-place.p1 .podium-rank-num { background: var(--ob-warn); }
[data-skin="obsidian"] .podium-place.p2 .podium-rank-num { background: #c9d3de; }
[data-skin="obsidian"] .podium-place.p3 .podium-rank-num { background: #c78a5b; color: #1a0e00; }
[data-skin="obsidian"] .podium-block { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ob-line-2) !important; border-radius: 0; color: var(--ob-mute); font-family: var(--ob-mono); font-weight: 500; font-size: 22px; align-items: flex-start; padding-top: 12px; }
[data-skin="obsidian"] .podium-place.p1 .podium-block { border-top-color: rgba(227,179,65,.5) !important; color: var(--ob-warn); }
[data-skin="obsidian"] .leaderboard-tabs { border-bottom: 1px solid var(--ob-line); padding-bottom: 14px; }
[data-skin="obsidian"] .lb-section .card { border-radius: var(--ob-r); }
[data-skin="obsidian"] .leaderboard-table th { background: transparent; border-bottom: 1px solid var(--ob-line-2); color: var(--ob-mute); font-size: 10px; }
[data-skin="obsidian"] .leaderboard-table td { border-bottom: 1px solid var(--ob-line); color: var(--ob-dim); }
[data-skin="obsidian"] .leaderboard-table tbody tr:hover td { background-color: rgba(255,255,255,.025); }
[data-skin="obsidian"] .lb-rank-num { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 13px; font-weight: 500; }
[data-skin="obsidian"] .lb-username { color: var(--ob-text); font-weight: 600; }
[data-skin="obsidian"] .lb-subtitle { color: var(--ob-mute); }
[data-skin="obsidian"] .lb-user-cell img.avatar { border-radius: 7px; }
[data-skin="obsidian"] .lb-rep, [data-skin="obsidian"] .lb-posts { font-family: var(--ob-mono); font-size: 12px; }
[data-skin="obsidian"] .lb-posts[style*="color"] { color: var(--ob-accent-2) !important; }

/* ── 14. SETTINGS ───────────────────────────────────────────────────── */
[data-skin="obsidian"] .settings-nav { background: transparent; border: 0; border-radius: 0; border-left: 1px solid var(--ob-line-2); overflow: visible; counter-reset: obs; }
[data-skin="obsidian"] .settings-nav a {
    border-left: 2px solid transparent; margin-left: -1px; color: var(--ob-dim); font-weight: 500; font-size: 13.5px; padding: 10px 16px; border-radius: 0 6px 6px 0; gap: 12px;
    transition: color var(--ob-fast) var(--ob-ease), background-color var(--ob-fast) var(--ob-ease), border-color var(--ob-fast) var(--ob-ease);
}
[data-skin="obsidian"] .settings-nav a::before { counter-increment: obs; content: counter(obs, decimal-leading-zero); font-family: var(--ob-mono); font-size: 10px; letter-spacing: .1em; color: var(--ob-mute); }
[data-skin="obsidian"] .settings-nav a:hover { background: rgba(255,255,255,.03); color: var(--ob-text); }
[data-skin="obsidian"] .settings-nav a.active { border-left-color: var(--ob-accent); border-left-width: 2px; background: var(--ob-accent-soft); color: var(--ob-text); font-weight: 600; }
[data-skin="obsidian"] .settings-nav a.active::before { color: var(--ob-accent); }
[data-skin="obsidian"] .settings-nav .nav-section { border-top: 1px solid var(--ob-line); color: var(--ob-mute); font-size: 10px; padding: 12px 16px 4px; }
[data-skin="obsidian"] .settings-panel.card { padding: 26px 28px; }
[data-skin="obsidian"] .settings-panel-head { border-bottom: 1px solid var(--ob-line); }
[data-skin="obsidian"] .settings-panel-head h2 { font-size: 19px; }
[data-skin="obsidian"] .settings-panel-head p { color: var(--ob-mute); }
[data-skin="obsidian"] .settings-panel h3 { color: var(--ob-text) !important; font-size: 14px !important; }
[data-skin="obsidian"] .settings-panel [style*="border-top"] { border-top-color: var(--ob-line) !important; }
[data-skin="obsidian"] .avatar-preview { border: 1px solid var(--ob-line-2); box-shadow: 0 0 0 4px var(--ob-surface-2); border-radius: 24px; }
[data-skin="obsidian"] .cover-preview { border-color: var(--ob-line-2); border-radius: var(--ob-r); }
[data-skin="obsidian"] .session-row { border-bottom-color: var(--ob-line); }
[data-skin="obsidian"] .session-ua { color: var(--ob-text); font-weight: 500; }
[data-skin="obsidian"] .session-meta { color: var(--ob-mute); font-size: 10px; text-transform: none; letter-spacing: .04em; }
[data-skin="obsidian"] .twofa-status { border-radius: 8px; font-weight: 500; font-size: 13px; }
[data-skin="obsidian"] .twofa-on { background: rgba(86,211,100,.08); color: var(--ob-online); border-color: rgba(86,211,100,.28); }
[data-skin="obsidian"] .twofa-off { background: rgba(240,102,102,.08); color: var(--ob-danger); border-color: rgba(240,102,102,.28); }
[data-skin="obsidian"] .twofa-code-input, [data-skin="obsidian"] .input-2fa { font-family: var(--ob-mono) !important; letter-spacing: .4em !important; font-size: 20px !important; text-align: center; }
[data-skin="obsidian"] .warning-item { background: rgba(240,102,102,.05); border-color: rgba(240,102,102,.2); border-radius: 8px; }
[data-skin="obsidian"] .warning-item .reason { color: var(--ob-text); }
[data-skin="obsidian"] .cos-banner-swatch, [data-skin="obsidian"] .cos-frame-ava-wrap, [data-skin="obsidian"] .cos-fx-preview { border-color: var(--ob-line-2); border-radius: 8px; }
[data-skin="obsidian"] .cos-banner-opt input:checked ~ .cos-banner-swatch,
[data-skin="obsidian"] .cos-frame-opt input:checked ~ .cos-frame-ava-wrap,
[data-skin="obsidian"] .cos-fx-opt input:checked ~ .cos-fx-preview { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-soft); }
[data-skin="obsidian"] .cos-ach-opt { background: transparent; border-color: var(--ob-line-2); border-radius: 7px; }
[data-skin="obsidian"] .cos-ach-opt.selected { border-color: var(--ob-accent-line); background: var(--ob-accent-soft); }
[data-skin="obsidian"] .cos-ach-name, [data-skin="obsidian"] .cos-fx-preview { color: var(--ob-text); }
[data-skin="obsidian"] .cos-banner-none { background: var(--ob-surface-2); }

/* ── 15. AUTH ───────────────────────────────────────────────────────── */
[data-skin="obsidian"] .auth-wrap {
    background-color: var(--ob-bg);
    background-image:
        radial-gradient(800px 480px at 20% -10%, rgba(70,198,184,.08), transparent 62%),
        radial-gradient(700px 500px at 100% 100%, rgba(138,151,168,.06), transparent 60%),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
}
[data-skin="obsidian"] .auth-wrap::before { display: none; }
[data-skin="obsidian"] .auth-card {
    background: var(--ob-surface);
    background-image: none;
    border: 1px solid var(--ob-line-2);
    border-radius: var(--ob-r-lg);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 80px -40px rgba(0,0,0,.9);
    padding: 36px 36px 30px;
    position: relative;
}
/* Permanent faint corner ticks; brighten while the form has focus */
[data-skin="obsidian"] .auth-card::before,
[data-skin="obsidian"] .auth-card::after {
    content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
    opacity: .35; transition: opacity var(--ob-med) var(--ob-ease);
}
[data-skin="obsidian"] .auth-card::before { left: -1px; top: -1px; border-top: 1px solid var(--ob-accent); border-left: 1px solid var(--ob-accent); border-top-left-radius: 3px; }
[data-skin="obsidian"] .auth-card::after { right: -1px; bottom: -1px; border-bottom: 1px solid var(--ob-accent); border-right: 1px solid var(--ob-accent); border-bottom-right-radius: 3px; }
[data-skin="obsidian"] .auth-card:focus-within::before, [data-skin="obsidian"] .auth-card:focus-within::after { opacity: 1; }
[data-skin="obsidian"] .auth-card h1 { font-size: 22px; letter-spacing: -.03em; }
[data-skin="obsidian"] .auth-card .sub { color: var(--ob-mute); font-size: 13.5px; }
[data-skin="obsidian"] .auth-card .input { background: var(--ob-void); border-color: var(--ob-line-2); border-radius: 8px; }
[data-skin="obsidian"] .auth-card .input:focus { border-color: var(--ob-accent-line); box-shadow: 0 0 0 3px var(--ob-accent-soft); }
[data-skin="obsidian"] .oauth-btn { background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-dim); border-radius: 8px; font-weight: 500; }
[data-skin="obsidian"] .oauth-btn:hover { background: rgba(255,255,255,.03); border-color: var(--ob-line-2); color: var(--ob-text); transform: none; box-shadow: none; }
[data-skin="obsidian"] .oauth-btn.oauth-steam:hover { border-color: #66c0f4; box-shadow: none; }
[data-skin="obsidian"] .oauth-btn.oauth-discord:hover { border-color: #5865f2; box-shadow: none; }
[data-skin="obsidian"] .oauth-btn.oauth-google:hover { border-color: #4285f4; box-shadow: none; }
[data-skin="obsidian"] .oauth-sep { color: var(--ob-mute); font-family: var(--ob-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
[data-skin="obsidian"] .oauth-sep::before, [data-skin="obsidian"] .oauth-sep::after { background: var(--ob-line); }
[data-skin="obsidian"] .auth-remember { color: var(--ob-dim); }
[data-skin="obsidian"] .auth-forgot { color: var(--ob-accent-2); }
[data-skin="obsidian"] .auth-forgot:hover { color: var(--ob-text); }
[data-skin="obsidian"] .auth-foot, [data-skin="obsidian"] .auth-terms, [data-skin="obsidian"] .twofa-hint, [data-skin="obsidian"] .input-help { color: var(--ob-mute); }
[data-skin="obsidian"] .auth-foot a { color: var(--ob-accent-2); font-weight: 600; }
[data-skin="obsidian"] .auth-card .btn-block { margin-top: 6px; }

/* ── 16. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="obsidian"] .site-footer { background: transparent; border-top: 1px solid var(--ob-line-2); margin-top: 72px; padding: 44px 0 28px; position: relative; }
[data-skin="obsidian"] .footer-grid h4 { color: var(--ob-mute); margin-bottom: 12px; }
[data-skin="obsidian"] .footer-grid a { color: var(--ob-dim); font-size: 13.5px; padding: 3px 0; position: relative; width: max-content; max-width: 100%; }
[data-skin="obsidian"] .footer-grid a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--ob-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--ob-med) var(--ob-ease); pointer-events: none; }
[data-skin="obsidian"] .footer-grid a:hover { color: var(--ob-text); }
[data-skin="obsidian"] .footer-grid a:hover::after { transform: scaleX(1); }
[data-skin="obsidian"] .site-footer .text-mute { color: var(--ob-mute); }
[data-skin="obsidian"] .footer-bottom { border-top: 1px solid var(--ob-line); color: var(--ob-mute); font-size: 10.5px; letter-spacing: .08em; }
[data-skin="obsidian"] .footer-brand { color: var(--ob-dim); font-weight: 500; }
[data-skin="obsidian"] .footer-brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--ob-accent); }
[data-skin="obsidian"] .lang-switch a { border-color: var(--ob-line-2); color: var(--ob-mute); border-radius: 4px; font-size: 10px; padding: 2px 6px; }
[data-skin="obsidian"] .lang-switch a.on { background: var(--ob-accent-soft); border-color: var(--ob-accent-line); color: var(--ob-accent-2); }

/* ── 17. RESPONSIVE — a redesign per breakpoint, not a shrink ───────── */
/* 981–1180px: the full nav + search must share one row without wrapping */
@media (max-width: 1180px) and (min-width: 981px) {
    [data-skin="obsidian"] .main-nav > a,
    [data-skin="obsidian"] #moreMenu .trigger { padding: 8px 8px; font-size: 13px; white-space: nowrap; }
    [data-skin="obsidian"] .main-nav > a::after { left: 8px; right: 8px; }
    [data-skin="obsidian"] .search-mini { width: 170px; }
    [data-skin="obsidian"] .site-header .container { gap: 12px; }
    [data-skin="obsidian"] .header-actions { gap: 6px; }
    [data-skin="obsidian"] .header-actions .btn-sm { padding: 6px 10px; }
}
@media (max-width: 1100px) {
    [data-skin="obsidian"] .fi-row { grid-template-columns: 50px 1fr 128px; }
    [data-skin="obsidian"] .fi-hero h1 { font-size: 32px; }
}
@media (max-width: 1024px) {
    [data-skin="obsidian"] .fi-hero--off { min-height: 280px; }
    [data-skin="obsidian"] .fi-hero--off .fi-hero-inner { padding-top: 44px; padding-bottom: 44px; gap: 32px; }
    [data-skin="obsidian"] .fi-stat b { font-size: 26px; }
    [data-skin="obsidian"] .post-author { padding: 18px 12px; }
    [data-skin="obsidian"] .settings-panel.card { padding: 22px; }
}
/* Tablet + phone: the nav is a drawer; header panels become sheets */
@media (max-width: 980px) {
    [data-skin="obsidian"] .main-nav {
        background: var(--ob-surface); border-bottom: 1px solid var(--ob-line-2);
        box-shadow: 0 30px 50px -20px rgba(0,0,0,.9); padding: 8px 10px 14px; gap: 0;
    }
    [data-skin="obsidian"] .main-nav > a { border-radius: 8px; font-size: 15px; padding: 12px 14px; border-top: 1px solid var(--ob-line); }
    [data-skin="obsidian"] .main-nav > a:first-of-type { border-top: 0; }
    [data-skin="obsidian"] .main-nav > a::after { left: 14px; right: auto; width: 14px; bottom: auto; top: 50%; height: 1px; transform: scaleX(0); }
    [data-skin="obsidian"] .main-nav > a.active { padding-left: 34px; color: var(--ob-accent-2); }
    [data-skin="obsidian"] .main-nav > a.active::after { transform: scaleX(1); }
    [data-skin="obsidian"] .main-nav > a:hover::after { transform: scaleX(0); }
    [data-skin="obsidian"] .main-nav .user-menu .trigger { border-radius: 8px; font-size: 15px; padding: 12px 14px; border-top: 1px solid var(--ob-line); }
    [data-skin="obsidian"] .main-nav .user-menu .dropdown a { border-radius: 6px; font-size: 14px; color: var(--ob-dim); }
    [data-skin="obsidian"] .nav-mobile-search form { background: var(--ob-void); border: 1px solid var(--ob-line-2); border-radius: 8px; }
    [data-skin="obsidian"] .nav-mobile-search input { background: transparent; border: 0; }
    [data-skin="obsidian"] .nav-mobile-search input:focus { box-shadow: none; }
    [data-skin="obsidian"] .nav-mobile-divider { background: var(--ob-line); }
    [data-skin="obsidian"] .nav-mobile-auth .btn { flex: 1; }
    [data-skin="obsidian"] .nav-toggle { font-size: 18px; }
    [data-skin="obsidian"] .site-header .container { gap: 12px; }
    [data-skin="obsidian"] .fi-hero--off::before { width: 100%; opacity: .7; }
    [data-skin="obsidian"] .post-author { border-right: 0; border-bottom: 1px solid var(--ob-line); }
    [data-skin="obsidian"] .post-author::before { height: 2px; }
}
@media (max-width: 768px) {
    [data-skin="obsidian"] .fi-hero { margin-bottom: 24px; }
    [data-skin="obsidian"] .fi-hero--off { min-height: 0; }
    [data-skin="obsidian"] .fi-hero--off .fi-hero-inner { padding-top: 34px; padding-bottom: 28px; gap: 24px; }
    [data-skin="obsidian"] .fi-hero h1 { font-size: 26px; }
    [data-skin="obsidian"] .fi-hero p { font-size: 14px; }
    /* Hero stats become a 2×2 hairline grid, left-aligned figures */
    [data-skin="obsidian"] .fi-hero-stats { gap: 0; border-top: 1px solid var(--ob-line-2); }
    [data-skin="obsidian"] .fi-stat { border-left: 0; border-right: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); padding: 14px 12px 12px; }
    [data-skin="obsidian"] .fi-stat:nth-child(even) { border-right: 0; }
    [data-skin="obsidian"] .fi-stat:nth-child(n+3) { border-bottom: 0; }
    [data-skin="obsidian"] .fi-stat::before { display: none; }
    [data-skin="obsidian"] .fi-stat b { font-size: 24px; }
    [data-skin="obsidian"] .fi-row { padding: 14px 10px 14px 14px; grid-template-columns: 48px 1fr; }
    [data-skin="obsidian"] .fi-row::after { display: none; }
    [data-skin="obsidian"] .fi-stats { padding: 4px 0 0; }
    [data-skin="obsidian"] .fi-cat-label { padding-left: 12px; }
    [data-skin="obsidian"] .topic-hero-actions { width: 100%; flex-wrap: wrap; gap: 6px; }
    [data-skin="obsidian"] .topic-hero-actions .btn { flex: 1 1 auto; }
    [data-skin="obsidian"] .topic-hero h1 { font-size: 21px; }
    [data-skin="obsidian"] .post-body { padding: 16px 16px 18px; }
    [data-skin="obsidian"] .post::before, [data-skin="obsidian"] .post::after { display: none; }
    [data-skin="obsidian"] .settings-nav { border-left: 0; border-bottom: 1px solid var(--ob-line-2); padding-bottom: 2px; }
    [data-skin="obsidian"] .settings-nav a { border-left: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; margin-left: 0; padding: 10px 12px; }
    [data-skin="obsidian"] .settings-nav a.active { border-left: 0; border-bottom-color: var(--ob-accent); background: transparent; }
    [data-skin="obsidian"] .settings-nav a::before { display: none; }
    [data-skin="obsidian"] .profile-head-card { padding: 0 16px 18px; }
    [data-skin="obsidian"] .profile-stat { border-bottom: 1px solid var(--ob-line); }
    [data-skin="obsidian"] .profile-stat:nth-child(even) { border-right: 0; }
    [data-skin="obsidian"] .xp-premium-wrap { gap: 12px; padding-top: 14px; }
    [data-skin="obsidian"] .site-footer { margin-top: 48px; padding: 32px 0 22px; }
    [data-skin="obsidian"] .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    [data-skin="obsidian"] .leaderboard-hero h1 { font-size: 24px; }
}
@media (max-width: 680px) {
    /* Header panels: full-width sheets pinned under the bar */
    [data-skin="obsidian"] .hdr-panel { position: fixed; left: 8px; right: 8px; top: calc(var(--header-h, 64px) + 6px); width: auto; max-width: none; }
    [data-skin="obsidian"] .hdr-panel-body { max-height: min(60vh, 460px); }
    [data-skin="obsidian"] .cookie-bar { left: 8px; right: 8px; bottom: 8px; flex-direction: column; align-items: stretch; text-align: center; padding: 14px; }
    [data-skin="obsidian"] .cookie-bar .btn { width: 100%; }
    [data-skin="obsidian"] .topic-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    [data-skin="obsidian"] .topic-controls .flex { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    [data-skin="obsidian"] .topic-controls .flex .btn { width: 100%; }
    [data-skin="obsidian"] .topic-list .topic-row { padding: 12px 10px; }
    [data-skin="obsidian"] .topic-list .topic-row::after { display: none; }
    [data-skin="obsidian"] .post-top { flex-wrap: wrap; gap: 8px; }
    [data-skin="obsidian"] .post-tools { opacity: 1; }
    [data-skin="obsidian"] .reply-card { padding: 16px 14px; }
    [data-skin="obsidian"] .editor-toolbar { padding: 6px; gap: 1px; }
    [data-skin="obsidian"] .editor-toolbar button { padding: 4px 7px; font-size: 12px; }
    [data-skin="obsidian"] .member-grid { gap: 8px; }
    [data-skin="obsidian"] .member-card { padding: 18px 10px 14px; }
    [data-skin="obsidian"] .sort-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    [data-skin="obsidian"] .pagination a, [data-skin="obsidian"] .pagination span { min-width: 32px; height: 32px; }
    [data-skin="obsidian"] .fi-legend-grid { gap: 6px; }
    [data-skin="obsidian"] .auth-wrap { padding: 20px 12px; align-items: start; }
    [data-skin="obsidian"] .auth-card { padding: 26px 20px 22px; border-radius: 12px; }
    [data-skin="obsidian"] .esa-toast { left: 12px; right: 12px; transform: none; text-align: center; }
}
@media (max-width: 480px) {
    [data-skin="obsidian"] .fi-hero--off .fi-hero-inner { padding-top: 26px; padding-bottom: 20px; }
    [data-skin="obsidian"] .fi-hero h1 { font-size: 23px; }
    [data-skin="obsidian"] .fi-eyebrow { margin-bottom: 12px; font-size: 10px; }
    [data-skin="obsidian"] .fi-stat b { font-size: 20px; }
    [data-skin="obsidian"] .fi-stat span { font-size: 9px; }
    [data-skin="obsidian"] .fi-cat-label::before { display: none; }
    [data-skin="obsidian"] .fi-cat-count { display: none; }
    [data-skin="obsidian"] .fi-icon { width: 40px; height: 40px; }
    [data-skin="obsidian"] .fi-info h3 { font-size: 14px; }
    [data-skin="obsidian"] .fi-sf-chip { font-size: 11px; }
    [data-skin="obsidian"] .topic-icon { width: 34px; height: 34px; }
    [data-skin="obsidian"] .pa-avatar .avatar { width: 46px; height: 46px; border-radius: 9px; }
    [data-skin="obsidian"] .profile-avatar-wrap img.avatar.xl { border-radius: 18px; }
    [data-skin="obsidian"] .profile-stat { border-right: 0; }
    [data-skin="obsidian"] .profile-actions .btn { font-size: 12px; }
    [data-skin="obsidian"] .settings-panel.card { padding: 16px 14px; }
    [data-skin="obsidian"] .react-main { padding: 6px 10px; }
    [data-skin="obsidian"] .breadcrumbs { font-size: 12px; margin-bottom: 14px; }
    [data-skin="obsidian"] .page-head h1 { font-size: 21px; }
    [data-skin="obsidian"] .empty-state h1 { font-size: 34px !important; }
}
@media (max-width: 390px) {
    [data-skin="obsidian"] .fi-hero h1 { font-size: 21px; }
    [data-skin="obsidian"] .fi-hero-stats { grid-template-columns: 1fr 1fr; }
    [data-skin="obsidian"] .fi-stat { padding: 12px 10px 10px; }
    [data-skin="obsidian"] .fi-row { padding: 12px 8px 12px 12px; gap: 10px; grid-template-columns: 40px 1fr; }
    [data-skin="obsidian"] .topic-controls .flex { grid-template-columns: 1fr; }
    [data-skin="obsidian"] .member-grid { grid-template-columns: 1fr 1fr; }
    [data-skin="obsidian"] .site-header .container { padding: 0 12px; }
    [data-skin="obsidian"] .icon-btn { width: 34px; height: 34px; }
}

/* Touch: nothing may hide behind a hover state */
@media (hover: none) {
    [data-skin="obsidian"] .fi-last,
    [data-skin="obsidian"] .topic-last,
    [data-skin="obsidian"] .post-tools,
    [data-skin="obsidian"] .hp-time { opacity: 1; transform: none; }
    [data-skin="obsidian"] .fi-row::after,
    [data-skin="obsidian"] .topic-list .topic-row::after,
    [data-skin="obsidian"] .main-nav > a::after { display: none; }
}

/* ── 18. REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-skin="obsidian"] *,
    [data-skin="obsidian"] *::before,
    [data-skin="obsidian"] *::after { animation: none !important; transition: none !important; }
    [data-skin="obsidian"] .fi-hero--off::before { transform: none !important; }
    [data-skin="obsidian"] .fi-hero--off.ob-scan::after,
    [data-skin="obsidian"] .ob-scanline { display: none !important; }
    [data-skin="obsidian"] .fi-hero--off h1 .grad::after { transform: scaleX(1); }
    [data-skin="obsidian"] .online-dot.on,
    [data-skin="obsidian"] .fi-eyebrow-dot,
    [data-skin="obsidian"] .fi-stat.fi-stat-online b::before,
    [data-skin="obsidian"] .profile-avatar-wrap .online-dot { box-shadow: 0 0 0 3px rgba(86,211,100,.18); }
    html[data-skin="obsidian"].ob-js .ob-reveal { opacity: 1; transform: none; }
    [data-skin="obsidian"] .fi-last,
    [data-skin="obsidian"] .topic-last,
    [data-skin="obsidian"] .post-tools { opacity: 1; transform: none; }
}