/* ================================================================== *
   EYEWATCH — extreme dark mode, Swiss-minimal, terminal-grade.
   Obsidian blacks · charcoal grays · stark-white monospace.
 * ================================================================== */

:root {
    --obsidian:   #0f0f12;
    --black:      #141417;
    --charcoal:   #1a1a1f;
    --charcoal-2: #202026;
    --gray:       #2b2b32;
    --bg-glow:    #2a2a31;
    --line:       rgba(245, 245, 245, 0.13);
    --line-soft:  rgba(245, 245, 245, 0.07);
    --white:      #f5f5f5;
    --dim:        #8a8a92;
    --dimmer:     #5a5a62;
    --ghost:      rgba(245, 245, 245, 0.28);
    --glow:       rgba(245, 245, 245, 0.85);
    /* a little colour — restrained electric-cyan accent */
    --accent:     #38d0ee;
    --accent-2:   #6ee7ff;
    --accent-dim: rgba(56, 208, 238, 0.16);
    --accent-line:rgba(56, 208, 238, 0.40);
    --mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

/* OBSIDIAN / OVERSEER — "True Black": a black backdrop, but keep enough grey on
   the surfaces (cards, panels, nav) that they read as distinct, not a void. */
body.true-black {
    --black:      #0a0a0c;
    --charcoal:   #131316;
    --charcoal-2: #191920;
    --gray:       #24242b;
    --obsidian:   #000000;
    --bg-glow:    #141417;
}

/* Slate — a cooler, lighter neutral grey. */
body.theme-slate {
    --obsidian:   #1b1e23;
    --black:      #21252b;
    --charcoal:   #272b32;
    --charcoal-2: #2e333c;
    --gray:       #3a404a;
    --bg-glow:    #3b4150;
}

/* Midnight — deep blue-tinted dark. */
body.theme-midnight {
    --obsidian:   #0a0e18;
    --black:      #0d1320;
    --charcoal:   #121a2c;
    --charcoal-2: #182238;
    --gray:       #233150;
    --bg-glow:    #1b2949;
}

/* Ember — a warm, dark wine/rose charcoal (red-leaning, never olive). */
body.theme-ember {
    --obsidian:   #161013;
    --black:      #1c1418;
    --charcoal:   #23191d;
    --charcoal-2: #2b1f24;
    --gray:       #3a2730;
    --bg-glow:    #3a2630;
}

* { box-sizing: border-box; }

html { background: #000; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.68;
    color: var(--white);
    background:
        radial-gradient(120% 80% at 50% -10%, var(--bg-glow) 0%, var(--obsidian) 58%) fixed;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
}

/* --- CRT scanline overlay + faint pulse ------------------------------ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    animation: flicker 6s infinite steps(60);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
@keyframes flicker {
    0%, 97%, 100% { opacity: 0.55; }
    98%           { opacity: 0.30; }
    99%           { opacity: 0.70; }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* --- isometric stage: page reflects off dark glass ------------------- */
.stage {
    width: 94%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 40px 36px 110px;
}

a { color: var(--white); text-decoration: none; }
a:hover { color: #fff; }

/* --- masthead -------------------------------------------------------- */
.mast {
    text-align: center;
    padding: 18px 0 26px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.mast .eye {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(245,245,245,0.18));
    opacity: 0.96;
}
.mast h1 {
    margin: 8px 0 3px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.42em;
    padding-left: 0.42em;
    background: linear-gradient(90deg, var(--white) 60%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mast .tag {
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* --- nav ------------------------------------------------------------- */
nav.top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 28px 0 10px;
}
nav.top a, .btn, button.btn {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 10px 18px;
    border: 1px solid var(--line);
    background: var(--charcoal);
    border-radius: 1px;
    transition: color .18s, border-color .18s, box-shadow .18s, background .18s;
    cursor: pointer;
}
nav.top a:hover, .btn:hover, button.btn:hover {
    color: var(--white);
    border-color: var(--ghost);
    box-shadow: 0 0 10px -1px var(--glow), inset 0 0 8px -6px var(--glow);
}
/* Log out sits in the same nav row — give it more presence so it doesn't read as
   smaller than the link buttons beside it. Double class beats `button.btn`. */
.btn.btn-logout { padding: 13px 28px; font-size: 14px; }
.btn.solid { background: var(--white); color: #000; border-color: var(--white); }
.btn.solid:hover { box-shadow: 0 0 16px -2px var(--glow); }
nav.top a.active { color: var(--white); border-color: var(--accent-line); box-shadow: inset 0 -2px 0 -1px var(--accent); }
nav.top a i, .btn i { font-style: normal; color: var(--accent); margin-right: 6px; opacity: .85; }
nav.top a:hover i { opacity: 1; }

/* The nav holds up to ~11 items (owner sees Console too). Keep it on a single
   row at desktop widths — with enough slack that wider font rendering (Firefox
   vs Chromium) still fits — and let it wrap evenly/centred on smaller screens
   instead of orphaning the last button. Scoped to nav.top so buttons elsewhere
   (forms, cards) keep their original size. */
/* Reclaim the stage's 36px side padding so the nav spans the full frame (1680px),
   giving the larger tabs room to stay on one row at desktop widths. */
nav.top { gap: 7px; margin-left: -36px; margin-right: -36px; }
nav.top a, nav.top .btn, nav.top button.btn {
    padding: 10px 15px;
    font-size: 13px;
    letter-spacing: 0.1em;
}
nav.top a i, nav.top .btn i { margin-right: 6px; }
nav.top .btn.btn-logout { padding: 10px 18px; font-size: 13px; }

.session-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

/* --- flash ----------------------------------------------------------- */
.flash {
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ghost);
    border-left-width: 2px;
    background: var(--charcoal-2);
    color: var(--white);
    font-size: 12.5px;
    letter-spacing: 0.06em;
}

/* --- ad slots (shown to non-subscribers only) ------------------------ */
.ad {
    margin: 18px 0;
    padding: 22px;
    text-align: center;
    border: 1px dashed var(--line);
    color: var(--dimmer);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    background:
        repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 9px),
        var(--charcoal);
}
.ad small { display:block; margin-top:6px; color: var(--dimmer); letter-spacing:0.14em; }
/* in-feed ad variant — slimmer, sits between posts/threads */
.ad.ad-inline { margin: 12px 0; padding: 14px; font-size: 10px; }

/* Far-side skyscraper rails (non-subscribers). Each rail stacks two ad units
   pinned to the screen edge. To make room we shrink the otherwise near-full-
   width stage (94% / 1680px) so the centered content never runs under a rail;
   below the threshold there's no gutter to spare, so the rails stay hidden. */
.ad-rail { display: none; }
@media (min-width: 1450px) {
    /* Reserve gutter on each side for the 120px rails + margin + clearance. */
    .stage { max-width: min(1680px, calc(100vw - 330px)); }
    .ad-rail {
        display: flex; flex-direction: column; gap: 14px;
        align-items: center; justify-content: center;
        position: fixed; top: 90px; bottom: 24px; z-index: 50;
        width: 120px; margin: 0;
    }
    .ad-rail-l { left: 14px; }
    .ad-rail-r { right: 14px; }
    .ad-rail .ad {
        margin: 0; width: 120px; height: 300px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
}

/* --- modals (confirm / gift / incoming gift) ------------------------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(8, 8, 10, 0.74);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal-backdrop[hidden] { display: none; }
.modal {
    width: 100%; max-width: 430px;
    background: var(--charcoal);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 22px 18px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}
.modal-title { margin: 0 0 10px; font-size: 1.02rem; color: var(--white); letter-spacing: .03em; }
.modal-body { margin: 0 0 18px; color: var(--dim); line-height: 1.55; }
.modal-body b { color: var(--white); }
.modal-label { display: block; font-size: .82rem; color: var(--dim); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .12em; }
.modal-label input { width: 100%; margin-top: 7px; text-transform: none; letter-spacing: normal; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.gift-btn { margin-top: 8px; }
body.modal-open { overflow: hidden; }

/* --- section headers ------------------------------------------------- */
.section-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 42px 0 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.section-h h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.26em;
}
.section-h h2::before { content: "▍"; color: var(--accent); margin-right: 9px; opacity: .9; }
.section-h .code { color: var(--dimmer); font-size: 11px; letter-spacing: 0.2em; }

/* --- the vertical thread/category list, hair-thin dividers ----------- */
.list { list-style: none; margin: 0 0 8px; padding: 0; }
.list li {
    border-bottom: 1px solid var(--line-soft);
}
.list li:last-child { border-bottom: 0; }
.row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 19px 10px;
    transition: background .15s, padding-left .15s;
}
.row:hover { background: var(--charcoal); padding-left: 12px; }
.row .lead { flex: 1; min-width: 0; }
.row .title { color: var(--white); font-size: 14px; letter-spacing: 0.04em; }
.row .sub { color: var(--dim); font-size: 11.5px; margin-top: 3px; letter-spacing: 0.04em; }
.row .meta { color: var(--dimmer); font-size: 11px; text-align: right; white-space: nowrap; letter-spacing: 0.08em; }
.row .meta b { color: var(--dim); font-weight: 500; }

.locked { opacity: 0.55; }
.lock-pill {
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--dim);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: 1px;
    white-space: nowrap;
}

/* --- badges / avatars ------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 1px;
    color: var(--dim);
    white-space: nowrap;
}
.badge .g { color: var(--white); }
.badge.t-spectre  { border-color: rgba(245,245,245,0.30); color: #d8d8da; }
.badge.t-sentinel { border-color: rgba(245,245,245,0.45); color: #eaeaec; }
.badge.t-obsidian { border-color: var(--white); color: #fff; box-shadow: inset 0 0 8px -5px var(--glow); }
.badge.t-overseer { border-color: var(--white); color: #fff; box-shadow: 0 0 10px -3px var(--glow), inset 0 0 8px -5px var(--glow); }

.avatar {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--white);
    font-size: 13px;
    background: var(--charcoal-2);
    border-radius: 1px;
}
.avatar.empty { color: var(--dimmer); }

/* --- thread / posts -------------------------------------------------- */
.post {
    display: flex;
    gap: 16px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--line-soft);
}
.post .who { width: 150px; flex: 0 0 150px; }
.post .who .handle { display:block; margin-top:8px; font-size:12px; letter-spacing:0.08em; }
.post .who .stamp { color: var(--dimmer); font-size: 10.5px; letter-spacing: 0.06em; }
.post .body { flex: 1; white-space: pre-wrap; word-break: break-word; color: #e6e6e8; }

/* --- forms ----------------------------------------------------------- */
.card {
    border: 1px solid var(--line);
    background: var(--charcoal);
    padding: 30px;
    margin: 26px 0;
}
.card h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0.2em; }
.card p.muted { color: var(--dim); font-size: 12px; margin-top: 0; }

label.fld { display: block; margin: 16px 0 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
input[type=text], input[type=email], input[type=password], textarea, select {
    width: 100%;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--white);
    background: var(--obsidian);
    border: 1px solid var(--line);
    padding: 11px 12px;
    border-radius: 1px;
    transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--ghost);
    box-shadow: 0 0 0 1px var(--ghost), 0 0 14px -4px var(--glow);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.actions { margin-top: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* "Remember me" opt-in on the login card. */
.remember-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--dim);
    cursor: pointer;
    user-select: none;
}
.remember-row input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: var(--ghost);
    cursor: pointer;
}

/* Online indicator dot next to a friend's name. */
.friend-dot { color: #46d17a; font-size: 10px; vertical-align: middle; margin-left: 4px; }

/* Moderation console / search: operator & thread search box. */
.mod-search { display: flex; gap: 8px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.mod-search input[type=text] { flex: 1; min-width: 220px; max-width: 420px; }

/* ✦ marker beside a friend's name, wherever it appears. */
.friend-tag { color: var(--accent); font-size: 0.78em; margin-left: 4px; opacity: .9; vertical-align: middle; }

/* Friends activity feed rows. */
.feed-row .feed-ic { color: var(--accent); font-size: 14px; width: 20px; flex-basis: 20px; text-align: center; }
.feed-row .lead .title b { color: var(--white); }
.feed-row .lead .sub { color: var(--dim); }

/* Presence panel header: count badge + 'view all' link grouped on the right. */
.panel-meta { display: inline-flex; align-items: center; gap: 8px; }
.panel-meta .ann-all { color: var(--accent); font-size: 10.5px; letter-spacing: .02em; text-transform: none; }
.panel-meta .ann-all:hover { text-decoration: underline; }
.more-link { width: 100%; color: var(--accent); font-size: 11px; letter-spacing: .04em; padding-top: 4px; }
.more-link:hover { text-decoration: underline; }

/* Collapsible panels (click the header to fold to just the count). */
.panel-h.collapsible { cursor: pointer; user-select: none; }
.panel-h.collapsible:hover { color: var(--accent-2); }
.panel-h.collapsible::after { content: '▾'; color: var(--dim); font-size: 10px; margin-left: 6px; transition: transform .15s; }
[data-collapsible].collapsed .panel-h.collapsible::after { transform: rotate(-90deg); }
[data-collapsible].collapsed .taglist { display: none; }

/* Presence directory pages (online friends / online users / offline friends). */
.online-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.online-tab {
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--dim); padding: 8px 13px; border: 1px solid var(--line); background: var(--charcoal);
}
.online-tab:hover { color: var(--white); border-color: var(--ghost); }
.online-tab.active { color: var(--white); border-color: var(--accent-line); box-shadow: inset 0 -2px 0 -1px var(--accent); }
.online-tab .cnt { color: var(--accent); border: 1px solid var(--accent-line); border-radius: 1px; padding: 0 6px; font-size: 10px; margin-left: 4px; }
.act-cell { color: var(--dim); }
.act-link { color: var(--accent); }
.act-link:hover { text-decoration: underline; }
.act-time { color: var(--dimmer); }
.act-none { color: var(--dimmer); font-style: italic; }

/* Pager (friends list pagination). */
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 16px 0; }
.pager-at { color: var(--dim); font-size: 12px; letter-spacing: .08em; }

/* --- subscription tiers --------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 26px 0; }
.tier {
    border: 1px solid var(--line);
    background: var(--charcoal);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tier:hover { border-color: var(--ghost); box-shadow: 0 0 22px -8px var(--glow); transform: translateY(-2px); }
.tier .roman { color: var(--dimmer); font-size: 11px; letter-spacing: 0.3em; }
.tier h3 { margin: 8px 0 2px; font-size: 18px; letter-spacing: 0.22em; }
.tier .clr { color: var(--dim); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.tier .price { margin: 16px 0 4px; font-size: 22px; }
.tier .price span { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; }
.tier ul { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
.tier ul li { padding: 7px 0; border-top: 1px solid var(--line-soft); color: #d4d4d6; font-size: 12px; }
.tier ul li::before { content: "› "; color: var(--dim); }
.tier.current { border-color: var(--white); box-shadow: inset 0 0 24px -16px var(--glow); }
.tier.current .h3 { color:#fff; }
.tier .obsidian-mark { box-shadow: 0 0 18px -6px var(--glow); }

/* --- misc ------------------------------------------------------------ */
.crumbs { color: var(--dim); font-size: 11px; letter-spacing: 0.12em; margin: 26px 0 0; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--white); }
.empty-note { color: var(--dimmer); font-size: 12px; padding: 24px 6px; letter-spacing: 0.06em; }
.foot {
    margin-top: 60px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--dimmer);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.err { color: #ffd9d9; }

/* --- name tags ------------------------------------------------------- */
.ntag-wrap { text-decoration: none; white-space: nowrap; }
.ntag { font-weight: 600; letter-spacing: 0.03em; color: var(--dim); }
.ntag-wrap:hover .ntag { filter: brightness(1.18); }
.ntag-ico { margin-left: 5px; font-size: 0.92em; opacity: 0.95; }
.ntag-grad {
    background: linear-gradient(92deg, var(--white) 0%, var(--accent-2) 55%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ntag-glow { text-shadow: 0 0 12px rgba(110,231,255,0.35); }

/* --- paid username effects ------------------------------------------
   filter:drop-shadow is used (not text-shadow) so glow-type effects are
   visible even on gradient names, whose text fill is transparent.       */
/* Effects use the user's own effect colour (--fx) and base colour (--nc),
   never the viewer's global UI accent — so a green name can carry a blue wave. */
.nfx-glow    { filter: drop-shadow(0 0 4px rgba(245,245,245,0.9)) drop-shadow(0 0 9px var(--fx, #fff)); }
.nfx-pulse   { animation: fx-pulse 1.6s ease-in-out infinite; }
.nfx-flicker { animation: fx-flicker 3s linear infinite; }
.nfx-sparkle { animation: fx-sparkle 1.5s ease-in-out infinite; }

.nfx-rainbow, .nfx-wave {
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.nfx-rainbow {
    background-image: linear-gradient(90deg,#ff5d73,#f0b24a,#39d98a,#38d0ee,#9d7bf0,#e85cc4,#ff5d73) !important;
    background-size: 300% 100% !important;
    animation: fx-rainbow 5s linear infinite;
}
.nfx-wave {
    background-image: linear-gradient(90deg, var(--nc,#fff) 0%, var(--fx,#38d0ee) 50%, var(--nc,#fff) 100%) !important;
    background-size: 220% 100% !important;
    animation: fx-wave 2.6s linear infinite;
}

@keyframes fx-pulse   { 0%,100% { opacity:1; filter:drop-shadow(0 0 2px currentColor); } 50% { opacity:.75; filter:drop-shadow(0 0 12px currentColor); } }
@keyframes fx-flicker { 0%,100%{opacity:1} 8%{opacity:.35} 9%{opacity:1} 12%{opacity:.6} 13%{opacity:1} 41%{opacity:1} 42%{opacity:.2} 43%{opacity:1} 70%{opacity:1} 71%{opacity:.5} 72%{opacity:1} }
@keyframes fx-rainbow { to { background-position: 300% 50%; } }
@keyframes fx-wave    { to { background-position: 220% 50%; } }
@keyframes fx-sparkle { 0%,100% { filter:drop-shadow(0 0 3px var(--fx,#fff)); } 50% { filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 15px var(--fx,#fff)); } }
/* locked effect options stay fully visible (so you can see what they look like) */
.fx-opt.is-locked { cursor: not-allowed; border-style: dashed; }

/* in-place navigation: brief dim while the next view loads */
.stage.pjax-busy { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

/* ---- logged-out PREVIEW (read-only) mode ---------------------------- */
.preview-bar {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 12px; margin: 18px 0 6px;
    padding: 12px 16px; border: 1px solid var(--accent-line);
    background: linear-gradient(160deg, var(--accent-dim), var(--charcoal) 70%);
    font-size: 12.5px; letter-spacing: .04em; color: var(--dim);
}
.preview-bar .preview-tag {
    color: var(--accent); border: 1px solid var(--accent-line);
    padding: 2px 9px; font-size: 10px; letter-spacing: .22em; border-radius: 1px;
}
nav.top.guest-nav .disabled {
    font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dimmer);
    padding: 10px 18px; border: 1px dashed var(--line); background: var(--charcoal);
    border-radius: 1px; cursor: not-allowed; user-select: none;
}
nav.top.guest-nav .disabled i { color: var(--dimmer); margin-right: 6px; }
/* Inside preview, nothing in the content/nav is clickable except auth buttons. */
body.preview .mast,
body.preview main a, body.preview main button, body.preview main input,
body.preview main textarea, body.preview main select, body.preview main form,
body.preview .sidebar a:not(.auth-allowed),
body.preview .sidebar button, body.preview .sidebar form {
    pointer-events: none;
}
body.preview .shout-locked a.auth-allowed { pointer-events: auto; }
body.preview main, body.preview .sidebar { opacity: .92; }

/* user-posted external links (SENTINEL+ authors) */
a.extlink { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* @mentions */
.mention { color: var(--accent); font-weight: 600; }

/* nav unread badge */
.notif-badge {
    display: inline-block; min-width: 16px; padding: 0 5px;
    background: var(--accent); color: #04121a; border-radius: 8px;
    font-size: 10px; line-height: 16px; text-align: center; margin-left: 4px;
}

/* notifications list */
.notif-list .row.notif { display: block; padding: 0; }
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px; }
.notif-row.unread { box-shadow: inset 3px 0 0 0 var(--accent); background: var(--charcoal); }
.notif-ic {
    width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
    border: 1px solid var(--accent-line); color: var(--accent); border-radius: 2px; font-size: 14px;
}
.notif-text { color: #e6e6e8; font-size: 13px; }
.notif-time { color: var(--dimmer); font-size: 11px; margin-top: 2px; }

/* credits earn list */
.earn-list { list-style: none; margin: 12px 0 0; padding: 0; }
.earn-list li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--dim); }
.earn-list li b { color: var(--accent); }
a.extlink:hover { color: var(--accent-2); }

/* private thread marker */
.priv-pill {
    font-size: 9.5px; letter-spacing: .16em; vertical-align: middle;
    color: var(--accent); border: 1px solid var(--accent-line);
    padding: 1px 6px; border-radius: 1px;
}

/* --- forum post layout (author card + body) ------------------------- */
.post {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 0 0 24px; margin-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
}
.author {
    width: 200px; flex: 0 0 200px;
    border: 1px solid var(--line); background: var(--charcoal);
    padding: 16px 14px; text-align: center;
}
.author-name { font-size: 14px; margin-bottom: 12px; word-break: break-word; }
.avatar.author-av { width: 66px; height: 66px; flex-basis: 66px; margin: 0 auto; font-size: 24px; }
.author-staff {
    margin-top: 10px; color: var(--accent);
    border: 1px solid var(--accent-line); padding: 4px 0;
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.author-rl { display: flex; justify-content: center; gap: 22px; margin: 14px 0 4px; }
.author-rl b { display: block; font-size: 17px; color: #fff; }
.author-rl span { font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.author-stats { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); text-align: left; }
.author-stats li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.author-stats li b { color: #e6e6e8; font-weight: 500; }
.author-awards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.aw-ico {
    width: 27px; height: 27px; display: grid; place-items: center;
    border: 1px solid var(--ac, var(--accent)); color: var(--ac, var(--accent));
    font-size: 13px; border-radius: 2px;
    background: color-mix(in srgb, var(--ac, var(--accent)) 10%, transparent);
}
.post-col { flex: 1; min-width: 0; }
.post-head { display: flex; align-items: center; gap: 12px; color: var(--dimmer); font-size: 11px; letter-spacing: .08em; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.op-tag { color: var(--accent); border: 1px solid var(--accent-line); padding: 1px 7px; font-size: 10px; letter-spacing: .16em; }
.post-id { margin-left: auto; }
.post-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.like-btn {
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    color: var(--dim); background: var(--charcoal); border: 1px solid var(--line);
    padding: 6px 14px; cursor: pointer; border-radius: 1px; transition: color .15s, border-color .15s, box-shadow .15s;
}
.like-btn:hover { color: #fff; border-color: var(--accent-line); }
.like-btn.liked { color: var(--accent); border-color: var(--accent-line); box-shadow: inset 0 0 10px -6px var(--accent); }
.dislike-btn {
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    color: var(--dim); background: var(--charcoal); border: 1px solid var(--line);
    padding: 6px 14px; cursor: pointer; border-radius: 1px; margin-left: 6px;
    transition: color .15s, border-color .15s, box-shadow .15s;
}
.dislike-btn:hover { color: #fff; border-color: var(--bad, #ef5a6f); }
.dislike-btn.disliked { color: var(--bad, #ef5a6f); border-color: var(--bad, #ef5a6f); box-shadow: inset 0 0 10px -6px var(--bad, #ef5a6f); }
.foot-link { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.foot-link:hover { color: var(--accent); }
@media (max-width: 680px) {
    .post { flex-direction: column; }
    .author { width: 100%; flex-basis: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; text-align: left; }
    .author-stats { width: 100%; }
}

/* --- awards ---------------------------------------------------------- */
.award-row { display: flex; flex-wrap: wrap; gap: 9px; }
.award-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--ac, var(--accent)); color: var(--ac, var(--accent));
    padding: 4px 11px; border-radius: 1px; font-size: 11px; letter-spacing: .08em;
    background: color-mix(in srgb, var(--ac, var(--accent)) 9%, transparent);
}
.award-chip.big { font-size: 12.5px; padding: 7px 13px; }
.award-chip .ag { font-size: 1.15em; }
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px,1fr)); gap: 14px; margin: 22px 0; }
.award-card {
    border: 1px solid var(--line); background: var(--charcoal); padding: 18px 16px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.award-card:hover { border-color: var(--ac); box-shadow: 0 0 20px -8px var(--ac); transform: translateY(-2px); }
.award-card-g { font-size: 28px; color: var(--ac); line-height: 1; text-shadow: 0 0 14px color-mix(in srgb, var(--ac) 55%, transparent); }
.award-card-n { font-size: 14px; letter-spacing: .06em; color: #fff; margin-top: 4px; }
.award-card-b { font-size: 11.5px; color: var(--dim); flex: 1; }
.award-card-f { display: flex; align-items: center; gap: 10px; margin-top: 10px; width: 100%; }
.award-price { color: var(--accent); font-size: 13px; }
.award-card-f form { margin: 0; }
.grant-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* award requirements + perk chips */
.award-reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; width: 100%; }
.req-chip {
    font-size: 10.5px; letter-spacing: .03em; padding: 2px 7px; border-radius: 2px;
    border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.req-chip.ok   { border-color: color-mix(in srgb, var(--good, #39d98a) 55%, transparent); color: var(--good, #39d98a); }
.req-chip.no   { border-color: color-mix(in srgb, var(--bad, #ef5a6f) 55%, transparent); color: var(--bad, #ef5a6f); }
.req-chip.perk { border-color: var(--ac); color: var(--ac); }

/* award-unlocked name glyphs in the profile picker */
.glyph.award-glyph { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.glyph.award-glyph::after { content: "★"; font-size: 8px; color: var(--accent); margin-left: 3px; vertical-align: super; }

/* --- achievements ---------------------------------------------------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.ach-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.ach {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--line); background: var(--charcoal);
}
.ach .ach-g { font-size: 20px; }
.ach .ach-n { font-size: 12.5px; color: #eaeaec; letter-spacing: .04em; }
.ach .ach-b { font-size: 11px; color: var(--dim); margin-top: 2px; }
.ach.got { border-color: var(--accent-line); box-shadow: inset 0 0 16px -12px var(--accent); }
.ach.got .ach-g { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.ach.locked { opacity: .5; }

/* --- vouches --------------------------------------------------------- */
.vouch-list { display: flex; flex-direction: column; gap: 10px; }
.vouch { border-left: 2px solid var(--accent-line); padding: 6px 0 6px 12px; }
.vouch-h { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; }
.vouch-t { color: var(--dimmer); font-size: 10.5px; }
.vouch-b { color: #d4d4d6; font-size: 12px; margin-top: 3px; }

/* --- nav dropdown ---------------------------------------------------- */
.nav-drop { position: relative; display: inline-flex; align-items: stretch; }
.nav-drop > .drop-toggle { display: inline-flex; align-items: center; }
.nav-drop .drop-menu {
    display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 50;
    min-width: 180px; background: var(--charcoal-2); border: 1px solid var(--ghost);
    box-shadow: 0 8px 24px -8px #000;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: block; }
.nav-drop .drop-menu a {
    display: block; padding: 10px 14px; border: 0; background: transparent;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
    border-bottom: 1px solid var(--line-soft);
}
.nav-drop .drop-menu a:last-child { border-bottom: 0; }
.nav-drop .drop-menu a:hover { color: var(--white); background: var(--gray); box-shadow: none; }

/* --- home two-column layout ----------------------------------------- */
.home-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.sidebar {
    display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: 18px;
    /* Keep the sidebar within the viewport and let it scroll as its own column,
       so the bottom panels (and the bottom of Announcements) are always reachable
       no matter how tall the stack gets. */
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding-right: 4px;
}

.panel { border: 1px solid var(--line); background: var(--charcoal); }
.panel-h {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
    display: flex; justify-content: space-between; align-items: center;
}
.panel-h { flex-wrap: wrap; gap: 4px; }
.panel-h .cnt { color: var(--accent); border: 1px solid var(--accent-line); border-radius: 1px; padding: 0 7px; font-size: 10px; }
.panel-h .ann-all { border: 0; padding: 0; text-transform: none; letter-spacing: .02em; font-size: 10.5px; }
.panel-h .ann-all:hover { text-decoration: underline; }
.panel .mini { list-style: none; margin: 0; padding: 6px 0; }
.panel .mini li { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
.panel .mini li:last-child { border-bottom: 0; }
.scroll-cap { max-height: 300px; overflow-y: auto; }
.mini-t { font-size: 12.5px; color: #e6e6e8; }
.mini-s { font-size: 10.5px; color: var(--dimmer); margin-top: 3px; }
.taglist { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.staff-line { display: inline-flex; align-items: baseline; gap: 7px; width: 100%; }
.staff-line em { font-style: normal; color: var(--accent); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.panel.promo {
    border-color: var(--accent-line);
    background: linear-gradient(160deg, var(--accent-dim), var(--charcoal) 60%);
    padding: 18px 16px; text-align: center;
}
.promo-h { font-size: 17px; letter-spacing: 0.08em; }
.promo-h b { color: var(--accent); }
.panel.promo p { color: var(--dim); font-size: 11.5px; margin: 8px 0 14px; }
.btn.block { display: block; text-align: center; }

/* --- shoutbox -------------------------------------------------------- */
.shoutbox { border: 1px solid var(--line); background: var(--charcoal); }
.shout-tabs { display: flex; border-bottom: 1px solid var(--line); }
.shout-tab {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dim); background: transparent; border: 0;
    border-right: 1px solid var(--line); padding: 9px 16px; cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
}
.shout-tab:hover { color: var(--white); background: var(--charcoal-2); }
.shout-tab.active { color: var(--accent); box-shadow: inset 0 -2px 0 -1px var(--accent); background: var(--charcoal-2); }
.shouts { padding: 10px 14px; max-height: 320px; overflow-y: auto; }

/* subforum chips under each channel */
.subforums { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 10px 12px 10px; }
.subforum { color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.subforum:hover { color: var(--accent); }
.shout { display: flex; align-items: baseline; gap: 9px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid var(--line-soft); }
.shout:last-child { border-bottom: 0; }
.shout .t { color: var(--dimmer); font-size: 10.5px; flex: 0 0 auto; }
.shout .msg { color: #dcdce0; word-break: break-word; flex: 1 1 auto; }
.shout-reply {
    flex: 0 0 auto; margin-left: auto; align-self: center;
    background: none; border: 0; cursor: pointer; line-height: 1;
    color: var(--dimmer); font-size: 13px; padding: 2px 5px; border-radius: 2px;
    opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.shout:hover .shout-reply { opacity: .65; }
.shout-reply:hover { color: var(--accent); opacity: 1; background: var(--charcoal-2); }

/* Live character counter shown after any .counted field. */
.charcount {
    display: block; text-align: right; margin-top: 4px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
    color: var(--dimmer);
}
.charcount.full { color: var(--accent); }
/* Inside the single-row shout form it sits inline between input and Send. */
.shout-form .charcount { flex: 0 0 auto; align-self: center; margin: 0; }
.shout-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.shout-form input { flex: 1; }
.shout-locked { padding: 14px; color: var(--dim); font-size: 12px; border-top: 1px solid var(--line); text-align: center; }
.shout-locked a { color: var(--accent); }

/* --- name-tag customiser (profile) ---------------------------------- */
.swatches, .glyphs { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch, .glyph {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); background: var(--obsidian);
    padding: 6px 11px; font-size: 11px; color: var(--dim); cursor: pointer;
    letter-spacing: 0.06em; transition: border-color .15s, color .15s, box-shadow .15s;
}
.swatch input, .glyph input { display: none; }
.swatch:hover, .glyph:hover { border-color: var(--ghost); color: var(--white); }
.swatch.sel, .glyph.sel { border-color: var(--accent); color: var(--white); box-shadow: inset 0 0 10px -6px var(--accent); }
.glyph { min-width: 40px; justify-content: center; font-size: 14px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-grad { background: linear-gradient(92deg, var(--white), var(--accent)); }

a { transition: color .15s; }
.row .title a, .crumbs a:hover, .empty-note a, .shout-locked a { color: var(--accent); }
.empty-note a:hover { color: var(--accent-2); }

/* --- moderation console --------------------------------------------- */
.btn.danger { color: #ffb3bd; border-color: rgba(239,90,111,0.45); }
.btn.danger:hover { color: #fff; border-color: #ef5a6f; box-shadow: 0 0 12px -2px rgba(239,90,111,0.7); background: rgba(239,90,111,0.12); }
.badge.role-owner       { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 9px -5px var(--accent); }
.badge.role-admin       { border-color: #f0b24a; color: #ffd28a; box-shadow: inset 0 0 9px -5px #f0b24a; }
.badge.role-staff       { border-color: var(--accent-line); color: var(--accent-2); }
.badge.role-contributor { border-color: rgba(57,217,138,0.45); color: #7af0b8; }
.badge.role-donator     { border-color: rgba(232,92,196,0.5); color: #ff96e0; }
.badge.st-ban  { border-color: #ef5a6f; color: #ff8a98; }
.badge.st-mute { border-color: #f0b24a; color: #f3c373; }
.mod-list li { padding-bottom: 12px; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 6px; align-items: center; }
.mod-actions form { display: flex; gap: 6px; margin: 0; }
.mod-ban input[type=text] { width: 220px; padding: 6px 10px; font-size: 12px; }

/* Unread-DM summary chip on the notifications page. */
.dm-summary {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    padding: 12px 14px; margin: 0 0 18px;
    border: 1px solid var(--line); border-radius: 2px; background: var(--charcoal);
    transition: border-color .15s, background .15s;
}
.dm-summary:hover { border-color: var(--ghost); background: var(--charcoal-2); }
.dm-summary.has-unread { border-color: var(--accent-line); box-shadow: inset 3px 0 0 0 var(--accent); }
.dm-summary-ic {
    width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
    border: 1px solid var(--accent-line); color: var(--accent); border-radius: 2px; font-size: 14px;
}
.dm-summary-txt { flex: 1; color: var(--dim); font-size: 13px; letter-spacing: .03em; }
.dm-summary.has-unread .dm-summary-txt { color: #e6e6e8; }
.dm-summary-txt strong { color: var(--accent); }
.dm-summary-go { color: var(--accent); font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }

/* --- direct messages ------------------------------------------------- */
/* Inbox: settings + compose forms */
.dm-prefs .dm-check {
    display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
    color: var(--dim); letter-spacing: .02em; line-height: 1.5; cursor: pointer;
}
.dm-prefs .dm-check input { width: auto; margin-top: 2px; }
.dm-prefs .dm-check strong { color: var(--white); }
.dm-filter-row {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px;
}
.dm-filter-row .fld { margin: 0; }
.dm-filter-row select { min-width: 200px; }
.dm-new { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.dm-new input[name="target_handle"] { flex: 0 0 160px; }
.dm-new input[name="body"] { flex: 1 1 240px; }

/* Inbox: conversation list */
.dm-row.unread { box-shadow: inset 3px 0 0 0 var(--accent); background: var(--charcoal); }
.dm-row.unread .title, .dm-row.unread .sub { color: var(--white); }
.dm-row .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
.dm-you { color: var(--dimmer); }
.dm-row .meta .notif-badge { margin: 0 0 4px; }
.dm-dnd-mini { color: #f0b24a; font-size: 11px; }

/* Conversation view */
.dm-convo { padding: 0; overflow: hidden; }
.dm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--charcoal);
}
.dm-peer { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.dm-peer:hover .ntag { filter: brightness(1.18); }
.dm-dnd-tag {
    font-size: 10px; letter-spacing: .16em; color: #f3c373;
    border: 1px solid rgba(240,178,74,0.45); padding: 2px 8px; border-radius: 1px; white-space: nowrap;
}
.dm-thread {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 16px; max-height: 56vh; min-height: 200px; overflow-y: auto;
}
.dm-msg { display: flex; flex-direction: column; max-width: 76%; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-msg.theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble {
    padding: 9px 13px; font-size: 13px; line-height: 1.5; letter-spacing: .01em;
    border: 1px solid var(--line); border-radius: 3px; color: #e6e6e8;
    background: var(--charcoal-2); word-break: break-word; white-space: pre-wrap;
}
.dm-msg.mine .dm-bubble {
    background: var(--accent-dim); border-color: var(--accent-line); color: #eafbff;
}
.dm-stamp { font-size: 10px; color: var(--dimmer); margin-top: 4px; letter-spacing: .08em; }
.dm-send { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.dm-send input[name="body"] { flex: 1; }
.dm-send .charcount { flex: 0 0 auto; align-self: center; margin: 0; }
.dm-locked {
    padding: 14px; color: var(--dim); font-size: 12px; text-align: center;
    border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
    .home-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; }
}
@media (max-width: 560px) {
    .post .who { width: 96px; flex-basis: 96px; }
    .mast h1 { font-size: 20px; letter-spacing: 0.3em; }
}