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

/* =====================================================================
   ESAForum SKIN · "nightclub" — neon nightlife / after-dark club
   Edgy 18+ nightlife aesthetic: near-black club canvas, HOT-MAGENTA
   primary with electric-cyan + UV-violet accents, tasteful neon glows,
   condensed "Bebas Neue" club-flyer display type, a perspective neon
   floor in the board hero, and cocktail-lounge depth. A steady bass BEAT
   drives synchronized pulses on the live accents (§19) + the EQ strip (§21).
   Interactive club effects (drifting spotlight blobs, a spinning disco ball
   casting drifting light dots, rolling haze, colored laser sweeps, a bottom-
   of-nav equalizer, a hero club scene — dancer silhouettes, flickering neon
   signs, a VIP velvet rope and an 18+ neon stamp — and a neon-sign flicker
   on the hero heading) live in skin-nightclub.js.
   Every rule scoped under [data-skin="nightclub"] — never leaks to other
   skins or the ACP.  Edgy vibe only: stylish club, no explicit content.
   ===================================================================== */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root[data-skin="nightclub"] {
    /* Near-black club canvas → deep-purple velvet panels */
    --bg-0: #0a0510;
    --bg-1: #0e0716;
    --bg-2: #160a24;
    --surface: #160a24;
    --surface-2: #1e1030;
    --surface-3: #281640;
    --elev: #1a0c28;
    --border: #3a1f5c;
    --border-soft: #2c1745;

    /* Text — UV-white on black-light purple */
    --text: #f4ecff;
    --text-dim: #c9b6e6;
    --text-mute: #8f7aad;

    /* Neon signage: hot magenta primary, cyan + violet accents */
    --primary: #ff2d95;
    --primary-rgb: 255, 45, 149;
    --primary-2: #ff5bad;
    --accent: #00e5ff;
    --accent-2: #b026ff;
    --accent-rgb: 0, 229, 255;
    --on-accent: #0a0510;

    /* Signals — mint "alive/VIP", amber, hot-pink alert */
    --pink: #ff2d95;
    --green: #2ee6a6;
    --amber: #ffcc33;
    --red: #ff5bad;

    --grad-primary: linear-gradient(135deg, #ff2d95 0%, #b026ff 100%);
    --grad-pink: linear-gradient(135deg, #ff2d95 0%, #ff5bad 100%);
    --grad-cyan: linear-gradient(135deg, #00e5ff 0%, #b026ff 100%);
    --grad-surface: linear-gradient(180deg, rgba(255,45,149,.06), rgba(0,229,255,0));

    /* Sleek, modern-lounge geometry */
    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 16px;

    --shadow: 0 18px 50px rgba(0,0,0,.66);
    --shadow-glow: 0 0 0 1px rgba(255,45,149,.30), 0 16px 48px rgba(255,45,149,.24);
    --ring: 0 0 0 3px rgba(255,45,149,.34);
    --primary-glow: rgba(255,45,149,.24);

    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --type: 'Bebas Neue', 'Oswald', 'Inter', system-ui, sans-serif;
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="nightclub"] body {
    background:
        /* two neon room-glows bleeding in from the corners + black floor */
        radial-gradient(1100px 640px at 84% -150px, rgba(255,45,149,.14), transparent 60%),
        radial-gradient(900px 560px at 6% 4%, rgba(0,229,255,.08), transparent 62%),
        radial-gradient(860px 620px at 50% 128%, rgba(176,38,255,.12), transparent 64%),
        var(--bg-0);
    /* NOTE: no 'background-attachment: fixed' — a fixed background layer makes
       Chromium drop the <video>/banner layers on repaint (hover), which would
       flicker the hero and forum banner images away. */
    letter-spacing: -.002em;
}
/* club-room vignette + faint smoke haze over everything (decorative only) */
[data-skin="nightclub"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(135% 115% at 50% 26%, transparent 58%, rgba(6,3,10,.55) 100%);
}
/* Lift ONLY the page body + footer above the vignette overlay (z-index 1). The
   header is already sticky at z-index 100; do NOT put its inner .container into a
   z-index:2 stacking context — that traps the user/nav dropdowns behind <main>. */
[data-skin="nightclub"] main,
[data-skin="nightclub"] .site-footer { position: relative; z-index: 2; }

[data-skin="nightclub"] ::selection { background: rgba(255,45,149,.42); color: #fff; }
[data-skin="nightclub"] ::-webkit-scrollbar-thumb { background: #3a1f5c; border-radius: 10px; }
[data-skin="nightclub"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
[data-skin="nightclub"] ::-webkit-scrollbar-track { background: var(--bg-1); }
[data-skin="nightclub"] a { color: var(--primary-2); }
[data-skin="nightclub"] a:hover { color: var(--accent); text-shadow: 0 0 10px rgba(0,229,255,.45); }
[data-skin="nightclub"] :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* Club-flyer display headings */
[data-skin="nightclub"] h1,
[data-skin="nightclub"] h2,
[data-skin="nightclub"] h3,
[data-skin="nightclub"] h4 {
    font-family: var(--type);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--text);
}

/* ── 3. HEADER / NAV ────────────────────────────────────────────────── */
[data-skin="nightclub"] .site-header {
    background: rgba(10,5,16,.90);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,45,149,.18), 0 12px 38px rgba(0,0,0,.55);
    backdrop-filter: blur(12px) saturate(1.15);
}
[data-skin="nightclub"] .brand,
[data-skin="nightclub"] .brand-logo,
[data-skin="nightclub"] .brand .name {
    font-family: var(--type);
    letter-spacing: .06em;
    color: var(--text);
}
[data-skin="nightclub"] .brand-logo {
    border: 1px solid var(--primary);
    background: linear-gradient(135deg, rgba(255,45,149,.20), rgba(176,38,255,.14));
    color: var(--primary-2);
    border-radius: 10px;
    box-shadow: 0 0 18px -4px rgba(255,45,149,.65);
}
[data-skin="nightclub"] .main-nav a {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 8px;
    color: var(--text-mute);
    position: relative;
}
[data-skin="nightclub"] .main-nav a:hover { background: var(--surface-2); color: var(--text); }
[data-skin="nightclub"] .main-nav a.active { color: var(--primary-2); background: transparent; }
[data-skin="nightclub"] .main-nav a.active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
    background: var(--grad-primary); border-radius: 2px;
    box-shadow: 0 0 10px rgba(255,45,149,.7);
}
[data-skin="nightclub"] .icon-btn {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="nightclub"] .icon-btn:hover { color: var(--accent); border-color: rgba(0,229,255,.45); background: var(--surface-2); }
[data-skin="nightclub"] .search-mini {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="nightclub"] .search-mini:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
[data-skin="nightclub"] .badge-count {
    background: var(--grad-primary);
    color: #fff;
    border-radius: 8px;
    font-family: var(--mono);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(255,45,149,.6);
}

/* Dropdowns / header panels */
[data-skin="nightclub"] .dropdown,
[data-skin="nightclub"] .hdr-panel,
[data-skin="nightclub"] .hdr-dd {
    background: rgba(22,10,36,.97);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}
[data-skin="nightclub"] .dropdown a,
[data-skin="nightclub"] .dropdown button { border-radius: 9px; }
[data-skin="nightclub"] .dropdown a:hover,
[data-skin="nightclub"] .dropdown button:hover { background: var(--surface-2); color: var(--accent); }
[data-skin="nightclub"] .hdr-panel-head { border-bottom: 1px solid var(--border); font-family: var(--type); letter-spacing: .05em; }
[data-skin="nightclub"] .user-menu .trigger { border-radius: 10px; }
[data-skin="nightclub"] .user-menu .trigger:hover { background: var(--surface-2); }
[data-skin="nightclub"] .mini-user .name { font-weight: 700; }

/* Announcement bar */
[data-skin="nightclub"] .announce-bar {
    background: linear-gradient(90deg, rgba(255,45,149,.16), rgba(0,229,255,.04) 72%);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    letter-spacing: .04em;
    color: var(--text-dim);
}

/* ── 4. BUTTONS (club-flyer mono caps + neon primary) ───────────────── */
[data-skin="nightclub"] .btn {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text);
}
[data-skin="nightclub"] .btn:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="nightclub"] .btn:active { transform: translateY(1px); }
[data-skin="nightclub"] .btn-primary {
    background: var(--grad-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px -4px rgba(255,45,149,.5), 0 0 16px -2px rgba(255,45,149,.4);
}
[data-skin="nightclub"] .btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
    box-shadow: 0 10px 28px -6px rgba(255,45,149,.65), 0 0 22px -2px rgba(176,38,255,.5);
    transform: translateY(-1px);
}
[data-skin="nightclub"] .btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
}
[data-skin="nightclub"] .btn-ghost:hover { color: var(--accent); border-color: rgba(0,229,255,.5); background: var(--surface); }
[data-skin="nightclub"] .btn-danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(255,91,173,.5);
}
[data-skin="nightclub"] .btn-danger:hover { background: rgba(255,45,149,.16); color: #fff; }

/* ── 5. CARDS / CONTAINERS ──────────────────────────────────────────── */
[data-skin="nightclub"] .card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 34px rgba(0,0,0,.45);
}
[data-skin="nightclub"] .card-head,
[data-skin="nightclub"] .card__header { border-bottom: 1px solid var(--border); }
[data-skin="nightclub"] .card__title { font-family: var(--type); letter-spacing: .04em; font-weight: 400; }
[data-skin="nightclub"] .card__header::before { background: var(--grad-primary); box-shadow: 0 0 10px rgba(255,45,149,.7); }
[data-skin="nightclub"] .empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
}
[data-skin="nightclub"] .breadcrumbs {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="nightclub"] .breadcrumbs a:hover { color: var(--accent); }
[data-skin="nightclub"] .pagination a,
[data-skin="nightclub"] .pagination span {
    border-radius: 9px;
    font-family: var(--mono);
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="nightclub"] .pagination a:hover { border-color: var(--primary); color: var(--primary-2); }
[data-skin="nightclub"] .pagination .current {
    background: var(--grad-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(255,45,149,.5);
}

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

/* ── 6. BOARD-INDEX HERO (after-dark club floor) ────────────────────── */
/* The board hero ALWAYS carries .fi-hero--media; when a tenant sets no custom
   media it renders as .fi-hero.fi-hero--media.fi-hero--off, when it DOES it is
   .fi-hero--video / .fi-hero--image (with an absolute <video>/<div> .fi-hero-bg,
   an overlay, and z-index:2 copy — the core full-bleed layout).
   IMPORTANT: every club-floor LAYOUT + DECORATION rule below is scoped to
   .fi-hero--off ONLY. Applying our opaque background / haze ::before / perspective
   floor-grid ::after to the bare .fi-hero used to bleed onto custom-media heroes
   (the z-index:0 floor grid paints AFTER the video in tree order → a neon/black
   band over the lower video), so --video / --image now keep the pristine core
   layout: the video fills, the welcome panel sits right, no band. Only the
   typography (h1 / p / eyebrow, further down) styles both. */
[data-skin="nightclub"] .fi-hero--off {
    min-height: 300px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    background:
        radial-gradient(78% 92% at 50% 32%, transparent 40%, rgba(10,5,16,.72) 100%),
        radial-gradient(900px 440px at 80% 4%, rgba(255,45,149,.22), transparent 60%),
        radial-gradient(760px 420px at 16% 16%, rgba(0,229,255,.14), transparent 62%),
        radial-gradient(760px 520px at 50% 122%, rgba(176,38,255,.24), transparent 60%),
        linear-gradient(180deg, #160a24 0%, #0e0716 58%, #0a0510 100%);
    box-shadow: inset 0 1px 0 rgba(255,45,149,.10), 0 24px 60px rgba(0,0,0,.55);
}
/* upper neon-haze bloom (decorative, never intercepts clicks) — --off only */
[data-skin="nightclub"] .fi-hero--off::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(600px 300px at 82% -12%, rgba(255,45,149,.16), transparent 60%),
        radial-gradient(520px 260px at 12% -6%, rgba(0,229,255,.10), transparent 62%);
}
/* perspective neon FLOOR grid + reflection glow along the bottom — --off only */
[data-skin="nightclub"] .fi-hero--off::after {
    content: "";
    position: absolute;
    left: -25%; right: -25%; bottom: 0;
    height: 48%;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0,229,255,.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,45,149,.22) 1px, transparent 1px);
    background-size: 100% 26px, 46px 100%;
    background-position: center bottom;
    transform: perspective(320px) rotateX(64deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 62%, #000 100%);
    opacity: .55;
}
[data-skin="nightclub"] .fi-hero h1 {
    font-family: var(--type);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1.02;
    color: var(--text);
    text-shadow: 0 0 34px rgba(255,45,149,.30);
}
[data-skin="nightclub"] .fi-hero h1 .grad {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-2);
    filter: drop-shadow(0 0 18px rgba(255,45,149,.5));
}
[data-skin="nightclub"] .fi-hero p { color: var(--text-dim); }
[data-skin="nightclub"] .fi-eyebrow {
    border-radius: 999px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 10px;
    background: rgba(255,45,149,.12);
    border: 1px solid rgba(255,45,149,.4);
    color: var(--primary-2);
}
[data-skin="nightclub"] .fi-eyebrow-dot {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(0,229,255,.8);
    border-radius: 50%;
}
/* discreet after-dark "18+" chip riding the eyebrow */
[data-skin="nightclub"] .fi-eyebrow::after {
    content: "18+";
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--accent);
    border: 1px solid rgba(0,229,255,.5);
    box-shadow: 0 0 10px -2px rgba(0,229,255,.5);
}

/* Hero stat cells — VIP glass tiles */
[data-skin="nightclub"] .fi-stat {
    border-radius: var(--radius);
    background: rgba(22,10,36,.62);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
[data-skin="nightclub"] .fi-stat:hover { background: rgba(255,45,149,.12); border-color: rgba(255,45,149,.45); }
[data-skin="nightclub"] .fi-stat b { font-family: var(--type); font-weight: 400; letter-spacing: .01em; color: var(--text); }
[data-skin="nightclub"] .fi-stat span { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }
[data-skin="nightclub"] .fi-stat.fi-stat-online b { color: var(--green); text-shadow: 0 0 14px rgba(46,230,166,.5); }

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

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

/* Board-index misc */
[data-skin="nightclub"] .fi-toolbar-label,
[data-skin="nightclub"] .fi-resume-head,
[data-skin="nightclub"] .fi-resume-meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--text-mute); }
[data-skin="nightclub"] .fi-resume-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="nightclub"] .fi-resume-card:hover { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(255,45,149,.25); }
[data-skin="nightclub"] .fi-resume-title { font-weight: 700; }
[data-skin="nightclub"] .fi-divider { border-color: var(--border); }
[data-skin="nightclub"] .fi-discord-cta { border-radius: var(--radius); }

/* ── 8. SIDEBAR WIDGETS ─────────────────────────────────────────────── */
[data-skin="nightclub"] .widget,
[data-skin="nightclub"] .fi-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="nightclub"] .widget-head,
[data-skin="nightclub"] .fi-widget-head {
    font-family: var(--type);
    font-weight: 400;
    letter-spacing: .06em;
    font-size: 15px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(255,45,149,.08), transparent);
}
[data-skin="nightclub"] .widget-head::before,
[data-skin="nightclub"] .fi-widget-head::before {
    content: "\266A  ";   /* eighth note — beats */
    color: var(--accent);
}
[data-skin="nightclub"] .fi-pill,
[data-skin="nightclub"] .pill-count {
    font-family: var(--mono);
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--primary-2);
}
[data-skin="nightclub"] .fi-board-stats { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
[data-skin="nightclub"] .fi-bs-item { border-color: var(--border) !important; background: var(--bg-1); }
[data-skin="nightclub"] .fi-bs-val { font-family: var(--type); font-weight: 400; letter-spacing: .01em; color: var(--text); }
[data-skin="nightclub"] .fi-bs-val.online { color: var(--green); text-shadow: 0 0 12px rgba(46,230,166,.55); }
[data-skin="nightclub"] .fi-bs-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: 8.5px; color: var(--text-mute); }

/* Rank rows (top members / trending / contributors) */
[data-skin="nightclub"] .rank-row { border-radius: 9px; }
[data-skin="nightclub"] .rank-row:hover { background: var(--surface-2); }
[data-skin="nightclub"] .rank-row .rk {
    border-radius: 8px;
    font-family: var(--mono);
    background: var(--surface-3);
    color: var(--text-dim);
}
[data-skin="nightclub"] .rank-row .rk.gold { background: var(--grad-primary); color: #fff; box-shadow: 0 0 14px -2px rgba(255,45,149,.6); }
[data-skin="nightclub"] .rank-row .rk.silver { background: var(--surface-3); color: var(--primary-2); }
[data-skin="nightclub"] .rank-row .rk.bronze { background: var(--surface-3); color: var(--text-dim); }
[data-skin="nightclub"] .rank-row .val { font-family: var(--mono); font-weight: 600; color: var(--text-dim); }
[data-skin="nightclub"] .rank-row .name { color: var(--text); }

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

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

/* TeamSpeak / generic chip */
[data-skin="nightclub"] .chip {
    border-radius: 999px;
    font-family: var(--font);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
[data-skin="nightclub"] .chip:hover { border-color: var(--accent); color: var(--accent); }

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

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

/* ── 10. TOPIC VIEW: hero + posts ───────────────────────────────────── */
[data-skin="nightclub"] .topic-hero {
    background:
        radial-gradient(700px 300px at 90% -40%, rgba(255,45,149,.18), transparent 60%),
        radial-gradient(560px 300px at 6% 120%, rgba(176,38,255,.12), transparent 64%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
[data-skin="nightclub"] .topic-hero-main h1 {
    font-family: var(--type);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--text);
    text-shadow: 0 0 28px rgba(255,45,149,.3);
}
[data-skin="nightclub"] .topic-hero-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text-mute); }
[data-skin="nightclub"] .post,
[data-skin="nightclub"] .reply-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="nightclub"] .post.is-op { border-color: rgba(255,45,149,.4); box-shadow: 0 0 0 1px rgba(255,45,149,.16); }
[data-skin="nightclub"] .post-author {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-right: 1px solid var(--border);
}
[data-skin="nightclub"] .post-author .avatar,
[data-skin="nightclub"] .pa-avatar { border-radius: 10px !important; }
[data-skin="nightclub"] .pa-name { font-family: var(--type); font-weight: 400; letter-spacing: .02em; }
[data-skin="nightclub"] .pa-role,
[data-skin="nightclub"] .pa-title { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-2); }
[data-skin="nightclub"] .pa-xp-track { background: var(--bg-1); border-radius: 999px; }
[data-skin="nightclub"] .pa-xp-fill { background: var(--grad-primary); border-radius: 999px; }
[data-skin="nightclub"] .post-num { font-family: var(--mono); color: var(--text-mute); }
[data-skin="nightclub"] .post-top,
[data-skin="nightclub"] .post-foot { border-color: var(--border); }
[data-skin="nightclub"] .post-content { color: var(--text); }
[data-skin="nightclub"] .post-content .post-quote {
    border-left: 3px solid var(--primary);
    background: var(--bg-1);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dim);
}
[data-skin="nightclub"] .post-content .post-quote cite { color: var(--accent); font-family: var(--mono); }
[data-skin="nightclub"] .post-content .code-block,
[data-skin="nightclub"] .post-content pre {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--mono);
    color: var(--text);
}
[data-skin="nightclub"] .post-sig { border-top: 1px solid var(--border); color: var(--text-mute); }
[data-skin="nightclub"] .edited { color: var(--text-mute); font-family: var(--mono); font-size: 10.5px; }
[data-skin="nightclub"] .locked-note { border: 1px solid rgba(255,45,149,.3); background: rgba(255,45,149,.06); border-radius: var(--radius); }

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

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

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

/* ── 11. PILLS / BADGES / TAGS / PREFIX ─────────────────────────────── */
[data-skin="nightclub"] .badge,
[data-skin="nightclub"] .status-pill,
[data-skin="nightclub"] .role-pill,
[data-skin="nightclub"] .tag,
[data-skin="nightclub"] .prefix,
[data-skin="nightclub"] .new-pill,
[data-skin="nightclub"] .op-badge,
[data-skin="nightclub"] .ti-badge {
    border-radius: 999px;
    font-family: var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
}
[data-skin="nightclub"] .new-pill {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 0 12px rgba(255,45,149,.6);
}
[data-skin="nightclub"] .badge-pin { background: rgba(255,204,51,.16); color: var(--amber); }
[data-skin="nightclub"] .badge-lock { background: rgba(255,45,149,.14); color: var(--primary-2); }
[data-skin="nightclub"] .role-pill { background: rgba(255,45,149,.14); color: var(--primary-2); border: 1px solid rgba(255,45,149,.3); }
[data-skin="nightclub"] .op-badge { background: rgba(0,229,255,.14); color: var(--accent); }
[data-skin="nightclub"] .prefix { color: var(--accent); }

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

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

/* Podium */
[data-skin="nightclub"] .podium-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
[data-skin="nightclub"] .podium-place.gold .podium-block { border-color: rgba(255,45,149,.5); box-shadow: 0 0 28px -6px rgba(255,45,149,.4); }
[data-skin="nightclub"] .podium-avatar-wrap img { border-radius: 10px; }
[data-skin="nightclub"] .podium-crown { color: var(--amber); filter: drop-shadow(0 0 10px rgba(255,204,51,.7)); }
[data-skin="nightclub"] .podium-name { font-family: var(--type); font-weight: 400; letter-spacing: .02em; }
[data-skin="nightclub"] .podium-rank-num { font-family: var(--type); font-weight: 400; color: var(--text-mute); }
[data-skin="nightclub"] .podium-score { font-family: var(--mono); color: var(--primary-2); }

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

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

/* ── 15. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="nightclub"] .site-footer {
    background: linear-gradient(180deg, rgba(14,7,22,0), var(--bg-1));
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,45,149,.16);
}
[data-skin="nightclub"] .footer-grid h4 {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 9px;
    color: var(--primary-2);
}
[data-skin="nightclub"] .footer-grid a { color: var(--text-dim); }
[data-skin="nightclub"] .footer-grid a:hover { color: var(--accent); }
[data-skin="nightclub"] .footer-brand { color: var(--text-dim); }
[data-skin="nightclub"] .footer-brand .brand-logo,
[data-skin="nightclub"] .footer-brand .name { font-family: var(--type); letter-spacing: .05em; }
[data-skin="nightclub"] .footer-bottom {
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-mute);
}
[data-skin="nightclub"] .lang-switch a.on { background: var(--grad-primary); color: #fff; border-radius: 8px; }
[data-skin="nightclub"] .lang-switch a:hover { color: var(--accent); }

/* ── 16. AUTH / LOGIN PAGES ─────────────────────────────────────────── */
[data-skin="nightclub"] .auth-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
}
[data-skin="nightclub"] .auth-card h1,
[data-skin="nightclub"] .auth-card h2 {
    font-family: var(--type);
    font-weight: 400;
    letter-spacing: .03em;
    text-shadow: 0 0 24px rgba(255,45,149,.35);
}

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

/* Keep wide/scrolling content contained */
[data-skin="nightclub"] .table-wrap,
[data-skin="nightclub"] .post-content pre,
[data-skin="nightclub"] .post-content .code-block { max-width: 100%; overflow-x: auto; }

/* ── 19. BEAT / BASS PULSE (one steady tempo, synchronized & subtle) ── */
/* One tempo shared by the CSS accents + the JS light dots. Every pulse uses
   the same duration & no delay ⇒ they all stay in phase → a soft bass "thump"
   on the room's live signals. Fast attack, gentle decay — NEVER a strobe. */
:root[data-skin="nightclub"] { --nc-beat: .92s; }

@keyframes nc-thump {
    0%   { transform: scale(1);    filter: brightness(1); }
    9%   { transform: scale(1.16); filter: brightness(1.4); }
    38%  { transform: scale(1);    filter: brightness(1); }
    100% { transform: scale(1);    filter: brightness(1); }
}
@keyframes nc-thump-glow {
    0%, 38%, 100% { box-shadow: 0 0 8px rgba(255,45,149,.5); }
    9%            { box-shadow: 0 0 16px rgba(255,45,149,.9), 0 0 30px rgba(255,45,149,.45); }
}
@keyframes nc-thump-soft {
    0%, 100% { filter: brightness(1); }
    9%       { filter: brightness(1.3); }
    40%      { filter: brightness(1); }
}
/* live status dots gently pump to the beat */
[data-skin="nightclub"] .fi-eyebrow-dot,
[data-skin="nightclub"] .online-dot,
[data-skin="nightclub"] .online-dot.on {
    transform-origin: center;
    animation: nc-thump var(--nc-beat) ease-out infinite;
}
[data-skin="nightclub"] .badge-count {
    animation: nc-thump-glow var(--nc-beat) ease-out infinite;
}
[data-skin="nightclub"] .fi-cat-accent {
    animation: nc-thump-soft var(--nc-beat) ease-out infinite;
}

/* ── 20. DISCO BALL · LIGHT DOTS · HAZE ──────────────────────────────── */
/* The mirror BALL hangs in the hero scene (§22, z-index:1 — visible above the
   hero, behind the text). The drifting LIGHT DOTS + rolling HAZE ride the
   full-page .nc-disco / .nc-haze layers, built in JS as position:fixed +
   pointer-events:none + z-index:-1, so they sit BEHIND all in-flow content
   and never intercept clicks or cover text. Only the look/motion is here. */
[data-skin="nightclub"] .nc-ball-hang {
    position: absolute;
    top: 0; left: 50%;
    width: 2px; height: 24px;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
    transform-origin: top center;
    animation: nc-ball-sway 9s ease-in-out infinite;
}
[data-skin="nightclub"] .nc-ball {
    position: absolute;
    top: 24px; left: 50%;
    width: 54px; height: 54px;
    margin-left: -27px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 34%),
        repeating-conic-gradient(from 0deg,
            rgba(255,45,149,.55) 0 11deg, rgba(0,229,255,.5) 11deg 22deg, rgba(176,38,255,.55) 22deg 33deg),
        radial-gradient(circle at 50% 45%, #35204f, #0a0510 78%);
    background-blend-mode: screen, normal, normal;
    box-shadow:
        0 0 22px rgba(255,45,149,.55), 0 0 46px rgba(0,229,255,.26),
        inset -9px -11px 22px rgba(0,0,0,.65), inset 8px 8px 16px rgba(255,255,255,.14);
    animation: nc-ball-spin 14s linear infinite;
}
[data-skin="nightclub"] .nc-ball::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 9px);
    mix-blend-mode: overlay;
}
@keyframes nc-ball-spin { to { transform: rotate(360deg); } }
@keyframes nc-ball-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

[data-skin="nightclub"] .nc-dot {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    mix-blend-mode: screen;
}

[data-skin="nightclub"] .nc-haze i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    will-change: transform;
}
[data-skin="nightclub"] .nc-haze .h1 {
    width: 60vw; height: 44vh; left: -12vw; top: 34vh;
    background: radial-gradient(circle, rgba(176,38,255,.20), transparent 68%);
    animation: nc-haze-a 34s ease-in-out infinite;
}
[data-skin="nightclub"] .nc-haze .h2 {
    width: 66vw; height: 50vh; right: -14vw; top: 6vh;
    background: radial-gradient(circle, rgba(255,45,149,.16), transparent 68%);
    animation: nc-haze-b 44s ease-in-out infinite;
}
[data-skin="nightclub"] .nc-haze .h3 {
    width: 54vw; height: 40vh; left: 20vw; bottom: -12vh;
    background: radial-gradient(circle, rgba(0,229,255,.12), transparent 70%);
    animation: nc-haze-a 52s ease-in-out infinite reverse;
}
@keyframes nc-haze-a { 0%, 100% { transform: translate3d(-4%, 0, 0) scale(1.05); } 50% { transform: translate3d(6%, -3%, 0) scale(1.2); } }
@keyframes nc-haze-b { 0%, 100% { transform: translate3d(4%, 2%, 0) scale(1.1); } 50% { transform: translate3d(-6%, -2%, 0) scale(1.25); } }

/* ── 21. EQUALIZER / VU STRIP (persistent chrome, under the nav bar) ── */
/* Injected as a click-through child of the sticky .site-header, hugging its
   bottom edge (below the vertically-centered nav text). Bars bounce to the
   tempo; edges fade so it reads as an ambient waveform, not a hard bar. */
[data-skin="nightclub"] .nc-eq {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 12px;
    pointer-events: none;
    opacity: .8;
    z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
[data-skin="nightclub"] .nc-eq-bar {
    flex: 1 1 auto;
    height: 100%;
    transform-origin: bottom center;
    transform: scaleY(.42);
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent-2) 60%, rgba(0,229,255,.25) 100%);
    box-shadow: 0 0 6px rgba(255,45,149,.55);
    animation: nc-eq-bounce var(--dur, .8s) ease-in-out var(--dly, 0s) infinite alternate;
}
@keyframes nc-eq-bounce { from { transform: scaleY(.18); } to { transform: scaleY(1); } }

/* ── 22. HERO CLUB SCENE (dancers · neon signs · 18+ stamp · VIP rope) ─ */
/* Injected into .fi-hero at z-index:1 — ABOVE the hero glow/floor grid
   (::before/::after at z-index:0) but BEHIND .fi-hero-inner (z-index:2), so it
   never sits over the heading/stats text. Signs live in the top padding band,
   dancers/stamp/rope in the bottom band — clear of the centered copy. */
[data-skin="nightclub"] .nc-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
[data-skin="nightclub"] .nc-dancer {
    position: absolute;
    bottom: 0;
    width: 50px; height: 94px;
    opacity: .5;
    color: var(--primary);
    filter: drop-shadow(0 0 6px rgba(255,45,149,.7));
    transform-origin: bottom center;
}
[data-skin="nightclub"] .nc-dancer svg { width: 100%; height: 100%; display: block; }
[data-skin="nightclub"] .nc-dancer.d1 { left: 32%; animation: nc-dance-a 2.4s ease-in-out infinite; }
[data-skin="nightclub"] .nc-dancer.d2 { left: 49%; color: var(--accent);   filter: drop-shadow(0 0 6px rgba(0,229,255,.7));  animation: nc-dance-b 2.4s ease-in-out infinite; }
[data-skin="nightclub"] .nc-dancer.d3 { left: 65%; color: var(--accent-2); filter: drop-shadow(0 0 6px rgba(176,38,255,.7)); animation: nc-dance-a 2.4s ease-in-out .6s infinite; }
@keyframes nc-dance-a { 0%, 100% { transform: translateY(0) rotate(-4deg) scaleY(1); } 50% { transform: translateY(-4px) rotate(4deg) scaleY(1.04); } }
@keyframes nc-dance-b { 0%, 100% { transform: translateY(-3px) rotate(5deg); } 50% { transform: translateY(1px) rotate(-5deg); } }

[data-skin="nightclub"] .nc-sign {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--type);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    background: rgba(10,5,16,.35);
    opacity: 1;
    animation: nc-flicker-on 1.5s var(--on, 0s) both,
               nc-sign-live 7s calc(var(--on, 0s) + 1.5s) ease-in-out infinite;
}
[data-skin="nightclub"] .nc-sign svg { width: 15px; height: 15px; display: block; }
[data-skin="nightclub"] .nc-sign--bar  { top: 12px; left: 4%;   color: var(--accent);   text-shadow: 0 0 10px rgba(0,229,255,.8);  box-shadow: 0 0 14px -2px rgba(0,229,255,.6),  inset 0 0 10px -4px rgba(0,229,255,.6); }
[data-skin="nightclub"] .nc-sign--kiss { top: 12px; left: 27%;  color: var(--primary);  text-shadow: 0 0 10px rgba(255,45,149,.85); box-shadow: 0 0 14px -2px rgba(255,45,149,.6),  inset 0 0 10px -4px rgba(255,45,149,.6); }
[data-skin="nightclub"] .nc-sign--vip  { top: 12px; right: 5%;  color: var(--amber);    text-shadow: 0 0 10px rgba(255,204,51,.85); box-shadow: 0 0 14px -2px rgba(255,204,51,.55), inset 0 0 10px -4px rgba(255,204,51,.5); }

[data-skin="nightclub"] .nc-stamp {
    position: absolute;
    right: 5%; bottom: 12px;
    width: 78px; height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: rgba(10,5,16,.35);
    box-shadow: 0 0 18px -2px rgba(255,45,149,.7), inset 0 0 14px -4px rgba(255,45,149,.6);
    color: var(--primary);
    text-align: center;
    transform: rotate(-9deg);
    opacity: 1;
    animation: nc-flicker-on 1.7s .5s both, nc-sign-live 8s 2.2s ease-in-out infinite;
}
[data-skin="nightclub"] .nc-stamp::before {
    content: "";
    position: absolute; inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255,45,149,.55);
}
[data-skin="nightclub"] .nc-stamp b { font-family: var(--type); font-size: 26px; line-height: 1; text-shadow: 0 0 12px rgba(255,45,149,.9); }
[data-skin="nightclub"] .nc-stamp span { display: block; font-family: var(--mono); font-size: 7px; letter-spacing: .18em; margin-top: 2px; color: var(--primary-2); }

[data-skin="nightclub"] .nc-rope {
    position: absolute;
    left: 3%; bottom: 4px;
    width: 122px; height: 58px;
    opacity: .82;
    color: var(--primary);
    filter: drop-shadow(0 0 6px rgba(255,45,149,.55));
}
[data-skin="nightclub"] .nc-rope svg { width: 100%; height: 100%; display: block; }

@keyframes nc-flicker-on {
    0%   { opacity: 0; }
    6%   { opacity: .75; }
    9%   { opacity: .1; }
    13%  { opacity: 1; }
    16%  { opacity: .25; }
    20%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes nc-sign-live {
    0%, 46%, 100% { opacity: 1; }
    47% { opacity: .68; }
    48% { opacity: 1; }
    73% { opacity: 1; }
    74% { opacity: .84; }
    75% { opacity: 1; }
}

/* keep the hero scene tidy on small screens (signs off, dancers subtle) */
@media (max-width: 720px) {
    [data-skin="nightclub"] .nc-sign,
    [data-skin="nightclub"] .nc-stamp,
    [data-skin="nightclub"] .nc-rope,
    [data-skin="nightclub"] .nc-ball-hang { display: none; }
    [data-skin="nightclub"] .nc-dancer { opacity: .35; }
}

/* ── 23. NEON-OUTLINED BROWSE CARDS — bloom on hover ─────────────────── */
[data-skin="nightclub"] .subforum-card,
[data-skin="nightclub"] .member-card,
[data-skin="nightclub"] .fi-resume-card {
    transition: border-color .2s ease, box-shadow .28s ease, transform .2s ease;
}
[data-skin="nightclub"] .subforum-card:hover,
[data-skin="nightclub"] .member-card:hover,
[data-skin="nightclub"] .fi-resume-card:hover {
    border-color: rgba(255,45,149,.6);
    box-shadow:
        0 0 0 1px rgba(255,45,149,.4),
        0 0 20px -3px rgba(255,45,149,.5),
        0 0 46px -8px rgba(176,38,255,.45),
        0 20px 44px -20px rgba(0,0,0,.85);
    transform: translateY(-3px);
}
/* generic panels / widgets: neon glow bloom (no lift, no layout shift) */
[data-skin="nightclub"] .card,
[data-skin="nightclub"] .widget,
[data-skin="nightclub"] .fi-widget,
[data-skin="nightclub"] .poll-card {
    transition: border-color .2s ease, box-shadow .28s ease;
}
[data-skin="nightclub"] .card:hover,
[data-skin="nightclub"] .widget:hover,
[data-skin="nightclub"] .fi-widget:hover,
[data-skin="nightclub"] .poll-card:hover {
    border-color: rgba(255,45,149,.5);
    box-shadow:
        0 0 0 1px rgba(255,45,149,.3),
        0 0 22px -4px rgba(255,45,149,.42),
        0 0 48px -10px rgba(176,38,255,.4),
        0 12px 34px rgba(0,0,0,.5);
}

/* ── 24. NEON BRAND SIGN — flickers on with the room ────────────────── */
[data-skin="nightclub"] .brand-logo {
    animation: nc-flicker-on 1.2s .15s both, nc-sign-live 9s 1.4s ease-in-out infinite;
}

/* Pause the ambient CSS motion while the tab is hidden (JS sets .nc-idle;
   the rAF loop + laser/flicker timers are torn down separately in JS). */
html.nc-idle[data-skin="nightclub"] .nc-disco *,
html.nc-idle[data-skin="nightclub"] .nc-haze i,
html.nc-idle[data-skin="nightclub"] .nc-eq-bar,
html.nc-idle[data-skin="nightclub"] .nc-stage *,
html.nc-idle[data-skin="nightclub"] .fi-eyebrow-dot,
html.nc-idle[data-skin="nightclub"] .online-dot,
html.nc-idle[data-skin="nightclub"] .badge-count,
html.nc-idle[data-skin="nightclub"] .fi-cat-accent,
html.nc-idle[data-skin="nightclub"] .brand-logo { animation-play-state: paused !important; }

/* ── 25. REDUCED MOTION ─────────────────────────────────────────────── */
/* Kill every transition/animation (beat, disco spin, haze, EQ, dancers,
   flicker-on, laser & hero flicker). The JS overlay also renders a STATIC
   frame (blobs & dots placed, no drift/lasers/flicker). Ensure the neon
   signs/stamp/logo end fully ON and the club scene rests in a calm pose. */
@media (prefers-reduced-motion: reduce) {
    [data-skin="nightclub"] * { transition: none !important; animation: none !important; }
    [data-skin="nightclub"] .nc-sign,
    [data-skin="nightclub"] .nc-stamp,
    [data-skin="nightclub"] .brand-logo { opacity: 1 !important; }
    [data-skin="nightclub"] .nc-eq-bar { transform: scaleY(.42) !important; }
    [data-skin="nightclub"] .nc-dancer { transform: none !important; }
    [data-skin="nightclub"] .nc-ball-hang { transform: rotate(0) !important; }
}

/* ── 26. BOARD IMMERSION — let the club bleed through + rest-state neon ── */
/* The ambient light-show (spotlight blobs · disco light dots · haze · lasers)
   rides fixed z-index:-1 layers BEHIND everything, so on the board it was
   masked by the opaque panels and only peeked through the gaps — the board read
   clean but flat next to the landing. Here the main board surfaces go subtly
   TRANSLUCENT so that soft light reads THROUGH them (no backdrop-filter — the
   ambient layers are already blurred and this keeps large panels cheap), and
   every panel gets a resting NEON RIM-LIGHT so edges catch club light even
   without hover. Everything is STATIC (no strobe), palette-true (magenta/
   violet/cyan), and the surfaces stay near-black so text keeps full contrast.
   Hover blooms (§23) have higher specificity, so they still win on hover. */

/* Frosted club-glass surfaces — soft ambiance drifts through the board */
[data-skin="nightclub"] .fi-forum-list { background: rgba(22,10,36,.80); }
[data-skin="nightclub"] .card { background: linear-gradient(180deg, rgba(30,16,48,.82), rgba(22,10,36,.82)); }
[data-skin="nightclub"] .widget,
[data-skin="nightclub"] .fi-widget { background: rgba(22,10,36,.80); }

/* Resting neon rim-light — top edge catches magenta, faint violet outer glow */
[data-skin="nightclub"] .fi-forum-list,
[data-skin="nightclub"] .card,
[data-skin="nightclub"] .widget,
[data-skin="nightclub"] .fi-widget {
    box-shadow:
        inset 0 1px 0 rgba(255,45,149,.16),
        0 0 0 1px rgba(255,45,149,.05),
        0 14px 40px rgba(0,0,0,.5),
        0 0 34px -14px rgba(176,38,255,.34);
}

/* Category header reads like a lit neon marquee shelf */
[data-skin="nightclub"] .fi-cat-bar {
    box-shadow:
        inset 0 1px 0 rgba(255,45,149,.22),
        0 6px 22px -12px rgba(255,45,149,.45);
}