/* ==========================================================================
   fedora.meme v3 — Royal Light
   One stylesheet for the v3 generation. Loaded only by v3.layouts.app, so
   nothing here can leak into (or be overridden by) the old global.css.
   Tokens first, then base, shell, components. Class prefix: v3-.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --v3-brand:        #8B5CF6;
    --v3-brand-deep:   #6D28D9;
    --v3-brand-ink:    #5B21B6;
    --v3-brand-grad:   linear-gradient(135deg, var(--v3-brand), var(--v3-brand-deep));
    --v3-brand-glow:   0 4px 14px rgba(139, 92, 246, .30);

    --v3-bg:           #FFFFFF;
    --v3-surface:      #FFFFFF;
    --v3-surface-2:    #FBFAFD;
    --v3-tint:         #F7F2FC;
    --v3-border:       #EFEAF6;
    --v3-divider:      #F1EDF8;
    --v3-border-dash:  #D9D3E6;

    --v3-text:         #17131F;
    --v3-text-2:       #4A4555;
    --v3-text-3:       #6B6478;
    --v3-muted:        #8A849A;
    --v3-faint:        #A8A2B5;
    --v3-faintest:     #B6B0C2;

    --v3-hot:          #E0365A;
    --v3-hot-bg:       #FFE8EC;
    --v3-ok:           #15803D;
    --v3-ok-bg:        #DCFCE7;
    --v3-warn:         #B45309;
    --v3-warn-bg:      #FEF3C7;

    --v3-shadow-card:  0 1px 3px rgba(23, 19, 31, .04);
    --v3-shadow-pop:   0 12px 32px rgba(23, 19, 31, .12), 0 2px 6px rgba(23, 19, 31, .06);

    --v3-font:         'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Varela Round ships one weight (400); heavier heading weights are
       browser-synthesised, which is the look Ken picked on /v3-kit. */
    --v3-font-display: 'Varela Round', var(--v3-font);
    /* Numbers use the body font with fixed-width digits (Ken: no monospace face anywhere). */
    --v3-font-mono:    var(--v3-font);

    --v3-r-sm: 9px;
    --v3-r-md: 12px;
    --v3-r-lg: 16px;
    --v3-r-xl: 18px;
    --v3-r-pill: 999px;

    --v3-topbar-h: 65px;
    --v3-tabbar-h: 64px;
    --v3-max:      clamp(1240px, 75vw, 1680px);
    --v3-rail-l:   clamp(240px, 15vw, 280px);
    --v3-rail-r:   clamp(324px, 19vw, 360px); /* 324 = a 300x250 ad + the rail's 24px gutter (Ken, Oct 12) */

    color-scheme: light;
}

/* Dark: explicit choice, or "system" (no data-theme) on a dark OS. */
:root[data-theme="dark"] {
    --v3-brand:       #A78BFA;
    --v3-brand-deep:  #7C3AED;
    --v3-brand-ink:   #C4B5FD;
    --v3-bg:          #0F0C15;
    --v3-surface:     #17131F;
    --v3-surface-2:   #1D1826;
    --v3-tint:        #241C33;
    --v3-border:      #2A2338;
    --v3-divider:     #231D30;
    --v3-border-dash: #3A3249;
    --v3-text:        #F4F1FA;
    --v3-text-2:      #CFC8DC;
    --v3-text-3:      #A79FB6;
    --v3-muted:       #8F88A0;
    --v3-faint:       #6F6880;
    --v3-faintest:    #5E5870;
    --v3-hot-bg:      #3A1620;
    --v3-ok:          #4ADE80;
    --v3-ok-bg:       #11291B;
    --v3-warn:        #FBBF24;
    --v3-warn-bg:     #2E220A;
    --v3-shadow-card: none;
    --v3-shadow-pop:  0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --v3-brand:       #A78BFA;
        --v3-brand-deep:  #7C3AED;
        --v3-brand-ink:   #C4B5FD;
        --v3-bg:          #0F0C15;
        --v3-surface:     #17131F;
        --v3-surface-2:   #1D1826;
        --v3-tint:        #241C33;
        --v3-border:      #2A2338;
        --v3-divider:     #231D30;
        --v3-border-dash: #3A3249;
        --v3-text:        #F4F1FA;
        --v3-text-2:      #CFC8DC;
        --v3-text-3:      #A79FB6;
        --v3-muted:       #8F88A0;
        --v3-faint:       #6F6880;
        --v3-faintest:    #5E5870;
        --v3-hot-bg:      #3A1620;
        --v3-ok:          #4ADE80;
        --v3-ok-bg:       #11291B;
        --v3-warn:        #FBBF24;
        --v3-warn-bg:     #2E220A;
        --v3-shadow-card: none;
        --v3-shadow-pop:  0 12px 32px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v3 {
    margin: 0;
    background: var(--v3-bg);
    color: var(--v3-text);
    font-family: var(--v3-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
:where(.v3) a { color: inherit; text-decoration: none; }
:where(.v3) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.v3) img { max-width: 100%; display: block; }
:where(.v3) :is(h1, h2, h3, h4) { font-family: var(--v3-font-display); margin: 0; line-height: 1.2; letter-spacing: -.01em; }
:where(.v3) :focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.v3-mono { font-family: var(--v3-font); font-variant-numeric: tabular-nums; }
.v3-stat__value, .v3-leader__rank, .v3-leader__xp, .v3-chip__count, .v3-dsec__count, .v3-tip-preset { font-variant-numeric: tabular-nums; }
.v3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-icon { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.v3-topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--v3-bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--v3-border);
}
.v3-topbar__inner {
    max-width: var(--v3-max); margin: 0 auto;
    height: var(--v3-topbar-h);
    padding: 0 32px;
    display: flex; align-items: center; gap: 16px;
}
.v3-topbar__brand { flex: 0 0 calc(var(--v3-rail-l) - 24px); }
.v3-topbar__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.v3-topbar__end { flex: 0 0 auto; min-width: 200px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.v3-logo { display: inline-flex; align-items: center; gap: 9px; }
.v3-logo img { height: 25px; width: auto; }
.v3-logo__word { font-family: var(--v3-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--v3-text); }
.v3-logo__word span { font-size: 13px; color: var(--v3-brand); margin-left: 1px; }

/* Search pill + typeahead */
.v3-search { position: relative; width: 100%; max-width: 440px; }
.v3-search__field {
    display: flex; align-items: center; gap: 9px;
    background: var(--v3-tint); border: 1px solid transparent;
    border-radius: var(--v3-r-pill); padding: 0 14px 0 16px; height: 40px;
    transition: border-color .15s, background .15s;
}
.v3-search__field:focus-within { border-color: var(--v3-brand); background: var(--v3-surface); }
.v3-search__field .v3-icon { color: var(--v3-muted); font-size: 15px; }
.v3-search__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--v3-text); }
.v3-search__input::placeholder { color: var(--v3-muted); }
.v3-search__kbd { font-family: var(--v3-font-mono); font-size: 10.5px; color: var(--v3-faint); border: 1px solid var(--v3-border); border-radius: 6px; padding: 1px 6px; }
.v3-search__drop {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
    background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg);
    box-shadow: var(--v3-shadow-pop); overflow: hidden; max-height: min(70vh, 520px); overflow-y: auto;
}
.v3-search__group { padding: 10px 16px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-faintest); }
.v3-search__row { display: flex; align-items: center; gap: 11px; padding: 8px 16px; }
.v3-search__row:hover, .v3-search__row[aria-selected="true"] { background: var(--v3-tint); }
.v3-search__thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: var(--v3-surface-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--v3-muted); }
.v3-search__title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-search__sub { font-size: 11.5px; color: var(--v3-muted); }
.v3-search__title mark { background: none; color: var(--v3-brand); font-weight: 700; }
.v3-search__all { display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 700; color: var(--v3-brand); border-top: 1px solid var(--v3-divider); }
.v3-search__empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--v3-muted); }

/* Round icon buttons + count badge */
.v3-iconbtn {
    position: relative; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--v3-border); background: var(--v3-surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v3-text-2); font-size: 17px; flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.v3-iconbtn:hover { background: var(--v3-tint); border-color: color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-count {
    position: absolute; top: -4px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--v3-brand); color: #fff; border: 2px solid var(--v3-bg);
    font: 700 10px/14px var(--v3-font-mono); text-align: center;
}

/* ── Shell grid ─────────────────────────────────────────────────────────── */
.v3-shell {
    max-width: var(--v3-max); margin: 0 auto;
    padding: 24px 32px 48px;
    display: grid;
    grid-template-columns: var(--v3-rail-l) minmax(0, 1fr) var(--v3-rail-r);
    align-items: start;
}
.v3-rail-left {
    position: sticky; top: calc(var(--v3-stick) + 24px);
    max-height: calc(100vh - var(--v3-topbar-h) - 48px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding-right: 24px;
    display: flex; flex-direction: column;
}
.v3-rail-left::-webkit-scrollbar { display: none; }
.v3-rail-left > *, .v3-rail-right > * { flex-shrink: 0; }
.v3-acct-card { display: block; }
.v3-main { min-width: 0; }
.v3-main--wide { grid-column: 2 / 4; }
.v3-rail-right {
    position: sticky; top: calc(var(--v3-stick) + 24px);
    max-height: calc(100vh - var(--v3-topbar-h) - 48px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding-left: 24px;
    display: flex; flex-direction: column; gap: 18px;
}
.v3-rail-right::-webkit-scrollbar { display: none; }

/* Left-rail navigation */
.v3-nav { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px; }
.v3-nav--tools { gap: 1px; }
.v3-nav-item {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; border-radius: var(--v3-r-pill);
    font-size: 14.5px; font-weight: 500; color: var(--v3-text-2);
    transition: background .15s, color .15s;
    width: 100%; text-align: left;
}
.v3-nav-item .v3-icon { font-size: 19px; }
.v3-nav-item:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-nav-item.is-active { background: var(--v3-tint); color: var(--v3-text); font-weight: 700; }
.v3-nav-item.is-active .v3-icon { color: var(--v3-brand); }
.v3-nav--tools .v3-nav-item { padding: 8px 14px; font-size: 13.5px; }
.v3-nav--tools .v3-nav-item .v3-icon { font-size: 17px; }
.v3-nav-item__label { flex: 1; min-width: 0; }
.v3-nav-item--danger { color: var(--v3-hot); font-weight: 600; }
.v3-nav-item--danger:hover { color: var(--v3-hot); background: var(--v3-hot-bg); }
.v3-pill-hot { font-size: 9px; font-weight: 700; letter-spacing: .04em; background: var(--v3-hot-bg); color: var(--v3-hot); border-radius: 999px; padding: 3px 7px; }
.v3-nav-heading { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-faintest); padding: 0 14px; margin: 0 0 8px; }
.v3-footer-links { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 14px; margin-bottom: 16px; }
.v3-footer-links a { font-size: 12px; color: var(--v3-faint); }
.v3-footer-links a:hover { color: var(--v3-text-2); }
.v3-copyright { font-size: 10.5px; color: var(--v3-faintest); text-align: center; margin-top: 2px; }
.v3-copyright a:hover { color: var(--v3-text-2); }

/* Theme selector */
.v3-theme { display: flex; gap: 7px; padding: 0 14px; }
.v3-theme button {
    width: 30px; height: 30px; border-radius: var(--v3-r-sm);
    border: 1px solid var(--v3-border); background: var(--v3-surface-2);
    display: inline-flex; align-items: center; justify-content: center; color: var(--v3-text-2); font-size: 14px;
}
.v3-theme button[aria-pressed="true"] { background: var(--v3-brand-grad); color: #fff; border-color: transparent; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.v3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: var(--v3-r-pill);
    font-size: 14px; font-weight: 700; white-space: nowrap; line-height: 1;
    border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s, box-shadow .15s;
}
.v3-btn .v3-icon { font-size: 15px; }
.v3-btn--primary { background: var(--v3-brand-grad); color: #fff; box-shadow: var(--v3-brand-glow); }
.v3-btn--primary:hover { filter: brightness(1.06); }
.v3-btn--secondary { background: var(--v3-surface); color: var(--v3-text); border-color: var(--v3-border); }
.v3-btn--secondary:hover { background: var(--v3-surface-2); border-color: color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-btn--soft { background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-btn--soft:hover { background: color-mix(in srgb, var(--v3-brand) 16%, var(--v3-tint)); }
.v3-btn--ghost { color: var(--v3-text-2); }
.v3-btn--ghost:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-btn--danger { background: var(--v3-hot); color: #fff; }
.v3-btn--sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.v3-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }
.v3-btn--block { display: flex; width: 100%; }
.v3-btn[disabled], .v3-btn.is-busy { opacity: .6; pointer-events: none; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.v3-avatar {
    --s: 38px;
    width: var(--s); height: var(--s); border-radius: 50%;
    background: var(--v3-brand-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    font: 700 calc(var(--s) * .34) / 1 var(--v3-font); letter-spacing: .02em;
}
.v3-avatar img { width: 100%; height: 100%; object-fit: cover; }
.v3-avatar--group { border-radius: 28%; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.v3-card {
    background: var(--v3-surface); border: 1px solid var(--v3-border);
    border-radius: var(--v3-r-lg); padding: 18px; box-shadow: var(--v3-shadow-card);
}
.v3-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.v3-card__title { font-family: var(--v3-font); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.v3-card__link { font-size: 12px; font-weight: 600; color: var(--v3-brand); }
.v3-card__link:hover { text-decoration: underline; }

/* Account card (left rail) */
.v3-acct { display: flex; align-items: center; gap: 10px; }
.v3-acct__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.v3-acct__name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-acct__meta { font-size: 12px; color: var(--v3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-progress { height: 5px; border-radius: 999px; background: var(--v3-tint); overflow: hidden; margin-top: 12px; }
.v3-progress > span { display: block; height: 100%; background: var(--v3-brand-grad); border-radius: inherit; }
.v3-progress-label { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--v3-muted); }

/* Leaderboard rows */
.v3-leader { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.v3-leader + .v3-leader { border-top: 1px solid var(--v3-divider); }
.v3-leader__rank { width: 18px; font: 700 13px var(--v3-font-mono); color: var(--v3-faintest); }
.v3-leader__rank.is-1 { color: #D4A017; } .v3-leader__rank.is-2 { color: #9CA3AF; } .v3-leader__rank.is-3 { color: #B4793E; }
.v3-leader__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-leader__xp { font: 700 12px var(--v3-font-mono); color: var(--v3-brand); }
.v3-leader--me { margin-top: 6px; padding: 8px 10px; border-radius: var(--v3-r-md); background: var(--v3-tint); border-top: 0 !important; }

/* Chips */
.v3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--v3-r-pill);
    background: var(--v3-brand-grad); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    transition: filter .15s, transform .15s;
}
.v3-chip:hover { filter: brightness(1.08); }
.v3-chip--soft { background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-chip__count { font-family: var(--v3-font-mono); font-size: 10px; opacity: .8; }

/* User name + badges */
.v3-uname { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.v3-uname__name { font-weight: 700; color: var(--v3-text); }
.v3-uname__handle { color: var(--v3-muted); font-weight: 400; font-size: .86em; white-space: nowrap; }
.v3-tag {
    display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px; border-radius: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
    background: var(--v3-tint); color: var(--v3-brand-ink);
}
.v3-tag .v3-icon { font-size: 10px; }
.v3-tag--admin { background: #FEE2E2; color: #991B1B; }
.v3-tag--mod { background: #DCFCE7; color: #166534; }
.v3-tag--verified { background: #DBEAFE; color: #1D4ED8; }
:root[data-theme="dark"] .v3-tag--admin { background: #3B1515; color: #FCA5A5; }
:root[data-theme="dark"] .v3-tag--mod { background: #0F2A1A; color: #86EFAC; }
:root[data-theme="dark"] .v3-tag--verified { background: #102040; color: #93C5FD; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .v3-tag--admin { background: #3B1515; color: #FCA5A5; }
    :root:not([data-theme="light"]) .v3-tag--mod { background: #0F2A1A; color: #86EFAC; }
    :root:not([data-theme="light"]) .v3-tag--verified { background: #102040; color: #93C5FD; }
}

/* ── Ad slot ────────────────────────────────────────────────────────────── */
.v3-ad { border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); overflow: hidden; }
.v3-ad__label { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-bottom: 1px solid var(--v3-divider); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-faint); }
.v3-ad__body { display: block; padding: 14px; }
.v3-ad__thumb { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; background: var(--v3-surface-2); }
.v3-ad__title { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.v3-ad__sub { font-size: 12px; color: var(--v3-muted); line-height: 1.5; }
.v3-ad__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--v3-brand); }
.v3-ad__stats { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--v3-muted); }
.v3-ad__stats span { display: inline-flex; align-items: center; gap: 4px; }
.v3-ad--placeholder { border: 1.5px dashed var(--v3-border-dash); background: var(--v3-surface-2); text-align: center; padding: 22px; }

/* ── Banners ────────────────────────────────────────────────────────────── */
.v3-banner {
    position: sticky; top: var(--v3-stick); z-index: 39;
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 16px; font-size: 13px; font-weight: 600; text-align: center;
    background: var(--v3-warn-bg); color: var(--v3-warn); border-bottom: 1px solid color-mix(in srgb, var(--v3-warn) 25%, transparent);
}
.v3-banner a { text-decoration: underline; }
.v3-banner--brand { background: var(--v3-tint); color: var(--v3-brand-ink); border-bottom-color: var(--v3-border); }

/* ── Menu (dropdown) ────────────────────────────────────────────────────── */
.v3-menu-wrap { position: relative; }
.v3-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px;
    background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg);
    box-shadow: var(--v3-shadow-pop); padding: 6px; transform-origin: top right;
    animation: v3-pop .14s ease-out;
}
.v3-menu__head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--v3-divider); margin-bottom: 6px; }
.v3-menu__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--v3-text-2); text-align: left; }
.v3-menu__item .v3-icon { font-size: 16px; color: var(--v3-muted); }
.v3-menu__item:hover { background: var(--v3-tint); color: var(--v3-text); }
.v3-menu__item--danger, .v3-menu__item--danger .v3-icon { color: var(--v3-hot); }
.v3-menu__sep { height: 1px; background: var(--v3-divider); margin: 6px 4px; }
@keyframes v3-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Sheets (mobile drawer, create, search) ─────────────────────────────── */
.v3-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15, 12, 21, .45); animation: v3-fade .18s ease-out; }
.v3-sheet {
    position: fixed; z-index: 81; background: var(--v3-surface); color: var(--v3-text);
    display: flex; flex-direction: column; box-shadow: var(--v3-shadow-pop);
}
.v3-sheet--side { top: 0; bottom: 0; right: 0; width: min(340px, 88vw); border-left: 1px solid var(--v3-border); animation: v3-slide-l .22s cubic-bezier(.2,.8,.2,1); }
.v3-sheet--bottom {
    left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom); animation: v3-slide-u .24s cubic-bezier(.2,.8,.2,1);
}
.v3-sheet--full { inset: 0; animation: v3-fade .15s ease-out; }
@media (min-width: 700px) {
    .v3-sheet--bottom { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; transform: translate(-50%, -50%); border-radius: 22px; animation: v3-fade .15s ease-out; }
}
.v3-sheet__grip { position: relative; flex-shrink: 0; width: 40px; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--v3-text) 22%, transparent); margin: 9px auto 3px; touch-action: none; }
.v3-sheet__grip::after { content: ""; position: absolute; inset: -12px -60px; } /* bigger thumb target for pull-to-close (v3.js) */
@media (min-width: 700px) { .v3-sheet__grip { display: none; } }
.v3-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--v3-divider); }
.v3-sheet__title { font-family: var(--v3-font-display); font-size: 18px; font-weight: 700; }
.v3-sheet__body { padding: 16px 18px 22px; overflow-y: auto; }
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-slide-l { from { transform: translateX(100%); } to { transform: none; } }
@keyframes v3-slide-u { from { transform: translateY(100%); } to { transform: none; } }
body.v3-lock { overflow: hidden; }

/* Create sheet options */
.v3-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v3-create-opt {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--v3-r-lg);
    border: 1px solid var(--v3-border); background: var(--v3-surface-2); text-align: left;
    transition: border-color .15s, background .15s, transform .15s;
}
.v3-create-opt:hover { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-create-opt__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--v3-brand-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: var(--v3-brand-glow); }
.v3-create-opt__title { font-size: 14px; font-weight: 700; }
.v3-create-opt__sub { font-size: 12px; color: var(--v3-muted); line-height: 1.4; }

/* ── Mobile tab bar ─────────────────────────────────────────────────────── */
.v3-tabbar {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--v3-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--v3-bg) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--v3-border);
}
.v3-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--v3-faint); font-size: 20px; position: relative; }
.v3-tab::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.v3-tab.is-active { color: var(--v3-brand); }
.v3-tab.is-active::after { background: var(--v3-brand); }
.v3-tab__create { width: 42px; height: 42px; border-radius: 50%; background: var(--v3-brand-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(139,92,246,.35); font-size: 19px; }
.v3-tab .v3-avatar { --s: 24px; }
.v3-tab.is-active .v3-avatar { box-shadow: 0 0 0 2px var(--v3-bg), 0 0 0 4px var(--v3-brand); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.v3-toasts { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
/* Toasts follow the theme (Ken, Oct 13): a raised card in the page's colors,
   with the icon on a tinted chip in the message's color. */
.v3-toast {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px;
    background: var(--v3-surface); color: var(--v3-text); border: 1px solid var(--v3-border);
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    box-shadow: 0 12px 32px rgba(15, 12, 21, .18), 0 2px 6px rgba(15, 12, 21, .08);
    pointer-events: auto; animation: v3-toast-in .22s cubic-bezier(.2,.8,.2,1);
}
.v3-toast .v3-icon { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; font-size: 16px; background: var(--v3-tint); color: var(--v3-brand); }
.v3-toast--error { border-color: color-mix(in srgb, var(--v3-hot) 35%, var(--v3-border)); }
.v3-toast--error .v3-icon { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-toast--success .v3-icon { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes v3-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Misc components ────────────────────────────────────────────────────── */
.v3-empty { text-align: center; padding: 40px 20px; color: var(--v3-muted); }
.v3-empty__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; background: var(--v3-tint); color: var(--v3-brand); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.v3-empty__title { font-family: var(--v3-font-display); font-size: 17px; font-weight: 700; color: var(--v3-text); margin-bottom: 4px; }
.v3-empty__text { font-size: 13.5px; max-width: 340px; margin: 0 auto 16px; }

/* Shimmer tones derive from the text colour, so they read on white cards and dark surfaces alike. */
.v3-skel, .v3-post__media.is-pending, .v3-embed--inline.is-pending, .v3-share__code.is-loading {
    --v3-skel-a: color-mix(in srgb, var(--v3-text) 8%, transparent);
    --v3-skel-b: color-mix(in srgb, var(--v3-text) 3%, transparent);
}
.v3-skel { background: linear-gradient(90deg, var(--v3-skel-a) 0%, var(--v3-skel-b) 50%, var(--v3-skel-a) 100%); background-size: 200% 100%; animation: v3-shimmer 1.3s linear infinite; border-radius: 8px; }
@keyframes v3-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.v3-stat { display: flex; flex-direction: column; gap: 2px; }
.v3-stat__value { font: 600 22px/1.1 var(--v3-font-mono); font-variant-numeric: tabular-nums; color: var(--v3-text); }
.v3-stat__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }

.v3-input {
    width: 100%; height: 42px; padding: 0 14px; border-radius: var(--v3-r-md);
    border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text); font: inherit; font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.v3-input:focus { outline: 0; border-color: var(--v3-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--v3-text-2); margin-bottom: 6px; }

.v3-segment { display: flex; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); padding: 5px; gap: 4px; }
.v3-segment__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13.5px; font-weight: 500; color: var(--v3-muted); border-radius: var(--v3-r-md); transition: color .15s, background .15s; }
.v3-segment__item:hover { color: var(--v3-text); }
.v3-segment__item.is-active { background: var(--v3-brand-grad); color: #fff; font-weight: 700; }

/* Page header used inside .v3-main */
.v3-page-head { margin-bottom: 18px; }
.v3-page-title { font-size: 26px; font-weight: 800; }
.v3-page-sub { color: var(--v3-muted); font-size: 14px; margin-top: 4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* ≤1199: drop the right rail; page content gets the space. */
@media (max-width: 1199px) {
    .v3-shell { grid-template-columns: 240px minmax(0, 680px); justify-content: center; }
    .v3-rail-right { display: none; }
    .v3-main--wide { grid-column: 2 / 3; }
}
/* ≤1023: left rail collapses to icons. */
@media (max-width: 1023px) {
    .v3-shell { grid-template-columns: 76px minmax(0, 680px); justify-content: center; padding: 20px 24px 40px; }
    .v3-topbar__inner { padding: 0 24px; }
    .v3-topbar__brand { flex-basis: auto; }
    .v3-topbar__end { min-width: 0; }
    .v3-rail-left { padding-right: 16px; align-items: center; }
    .v3-rail-left .v3-nav-item { padding: 11px; justify-content: center; }
    .v3-rail-left .v3-nav-item__label, .v3-rail-left .v3-pill-hot, .v3-rail-left .v3-nav-heading,
    .v3-rail-left .v3-footer-links, .v3-rail-left .v3-theme, .v3-rail-left .v3-acct-card,
    .v3-rail-left .v3-copyright, .v3-rail-left .v3-create-label { display: none; }
    .v3-rail-left .v3-create-btn { width: 46px; height: 46px; padding: 0; }
}
/* <700: mobile. Top bar + bottom tab bar, no rails. */
@media (max-width: 699px) {
    body.v3 { padding-bottom: calc(var(--v3-tabbar-h) + env(safe-area-inset-bottom)); }
    .v3-topbar__inner { padding: 0 14px 0 16px; height: 60px; gap: 10px; }
    :root { --v3-topbar-h: 61px; }
    .v3-topbar__center, .v3-topbar__desktop { display: none !important; }
    .v3-topbar__brand { flex: 1; }
    .v3-topbar__end { gap: 8px; }
    .v3-iconbtn { width: 36px; height: 36px; font-size: 16px; }
    .v3-logo img { height: 23px; }
    .v3-logo__word { font-size: 21px; }
    .v3-topbar__login { padding-inline: 10px; }
    .v3-shell { display: block; padding: 14px 14px 28px; }
    .v3-rail-left, .v3-rail-right { display: none; }
    .v3-tabbar { display: flex; }
    .v3-toasts { bottom: calc(var(--v3-tabbar-h) + 16px + env(safe-area-inset-bottom)); }
}
@media (min-width: 700px) { .v3-topbar__mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .v3 *, .v3 *::before, .v3 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── /v3-kit staff page ─────────────────────────────────────────────────── */
.v3-kit-section { margin-bottom: 28px; }
.v3-kit-section > h2 { font-size: 13px; font-family: var(--v3-font); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-faintest); margin-bottom: 12px; }
.v3-kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v3-kit-row:has(.v3-kit-swatch) { align-items: flex-start; }
.v3-kit-swatch { width: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--v3-border); font-size: 10.5px; }
.v3-kit-swatch > div { height: 44px; }
.v3-kit-swatch > span { display: block; padding: 6px 8px; font-family: var(--v3-font-mono); color: var(--v3-text-2); }


/* ── Notifications panel (popover ≥700px, bottom sheet below) ───────────── */
.v3-notif-panel {
    position: fixed; z-index: 60;
    top: calc(var(--v3-stick) + 8px);
    right: max(16px, calc((100vw - var(--v3-max)) / 2 + 24px));
    width: 400px; max-height: min(75vh, 620px); display: flex; flex-direction: column;
    background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl);
    box-shadow: var(--v3-shadow-pop); overflow: hidden; animation: v3-pop .14s ease-out; transform-origin: top right;
}
.v3-notif-panel .v3-sheet__grip { display: none; }
.v3-notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 18px; border-bottom: 1px solid var(--v3-divider); }
.v3-notif-panel__head h2 { font-size: 17px; }
.v3-notif-panel__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px; min-height: 120px; }
.v3-notif-panel__foot { display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 700; color: var(--v3-brand); border-top: 1px solid var(--v3-divider); }
.v3-notif-backdrop { display: none; }
.v3-notif { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; position: relative; }
.v3-notif:hover { background: var(--v3-surface-2); }
.v3-notif.is-unread { background: color-mix(in srgb, var(--v3-tint) 70%, transparent); }
.v3-notif.is-unread::after { content: ''; position: absolute; top: 18px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-brand); }
.v3-notif__who { position: relative; flex-shrink: 0; }
.v3-notif__type { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--v3-surface); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; background: var(--v3-brand); }
.v3-notif__type--heart { background: #E11D48; }
.v3-notif__type--message-circle, .v3-notif__type--message-square, .v3-notif__type--reply { background: #0891B2; }
.v3-notif__type--at-sign { background: #059669; }
.v3-notif__type--bookmark, .v3-notif__type--wand-sparkles { background: #D97706; }
.v3-notif__type--triangle-alert { background: var(--v3-hot); }
.v3-notif__type--users { background: #DB2777; }
.v3-notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 14px; }
.v3-notif__text { font-size: 13.5px; line-height: 1.4; color: var(--v3-text-2); }
.v3-notif__text strong { color: var(--v3-text); }
.v3-notif__preview { font-size: 12.5px; color: var(--v3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-notif__time { font-size: 10.5px; color: var(--v3-faint); }
.v3-notif__thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
@media (max-width: 699px) {
    .v3-notif-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); z-index: 81; animation: v3-slide-u .24s cubic-bezier(.2,.8,.2,1); }
    .v3-notif-panel .v3-sheet__grip { display: block; }
    .v3-notif-backdrop { display: block; }
    .v3-notif-backdrop[hidden] { display: none; }
}

/* ── Ctrl K palette rows (inside the search dropdown) ───────────────────── */
.v3-search__cmd .v3-search__thumb { background: var(--v3-tint); color: var(--v3-brand); font-size: 17px; }
.v3-search__hint { margin-left: auto; font: 500 10.5px var(--v3-font-mono); color: var(--v3-faint); border: 1px solid var(--v3-border); border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }

/* ── Mobile: top bar hides while scrolling down, returns on scroll up ───── */
:root { --v3-stick: var(--v3-topbar-h); }
@media (max-width: 699px) {
    .v3-topbar { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
    .v3-topbar.is-hidden { transform: translateY(-100%); }
    /* Sticky bars follow it up instead of leaving a gap where it was. */
    html.v3-bar-up { --v3-stick: 0px; }
    .v3-ptabs, .v3-feed-tabs, .v3-sbar, .v3-banner { transition: top .22s cubic-bezier(.2,.8,.2,1); }
}

/* ── Page transitions (Chrome/Edge cross-document view transitions) ─────── */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .v3-topbar     { view-transition-name: v3-topbar; }
    .v3-rail-left  { view-transition-name: v3-rail-left; }
    .v3-rail-right { view-transition-name: v3-rail-right; }
    .v3-tabbar     { view-transition-name: v3-tabbar; }
    ::view-transition-old(root) { animation: v3-vt-out .16s ease-in both; }
    ::view-transition-new(root) { animation: v3-vt-in .22s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes v3-vt-out { to { opacity: 0; } }
@keyframes v3-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Phase 1 — homepage / feed
   ========================================================================== */

/* Old shared scripts (mention.js, server-rendered bodies) use the old
   variable names - alias them so they look native inside v3. */
body.v3 {
    --brand: var(--v3-brand); --brand-light: var(--v3-tint); --brand-dark: var(--v3-brand-deep);
    --brand-deeper: var(--v3-brand-deep); --surface: var(--v3-surface); --surface-2: var(--v3-surface-2);
    --border: var(--v3-border); --text-primary: var(--v3-text); --text-secondary: var(--v3-text-2); --text-muted: var(--v3-muted);
}
.v3 .mention-textarea-wrap { position: relative; }
.v3 .mention-dropdown { position: absolute; z-index: 95; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 14px; box-shadow: var(--v3-shadow-pop); max-height: 260px; overflow-y: auto; }
.v3 .mention-link, .v3 .body-link, .v3 .post-tag { color: var(--v3-brand); font-weight: 600; }
.v3 .mention-link:hover, .v3 .body-link:hover, .v3 .post-tag:hover { text-decoration: underline; }
.v3 .body-link { word-break: break-all; }

/* Guest hero */
.v3-hero {
    position: relative; overflow: hidden; margin-bottom: 18px; padding: 30px 24px 24px; border-radius: 22px; color: #fff; text-align: center;
    background: radial-gradient(120% 90% at 85% 0%, #B794F6 0%, transparent 55%), linear-gradient(140deg, var(--v3-brand) 0%, var(--v3-brand-deep) 70%, #4C1D95 100%);
    box-shadow: 0 14px 40px rgba(109, 40, 217, .28);
}
.v3-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v3-hero__title { font-size: clamp(30px, 5vw, 40px); margin: 14px 0 6px !important; color: #fff; }
.v3-hero__title span { color: #FDE68A; }
.v3-hero__sub { margin: 0 0 18px; opacity: .9; font-size: 15px; }
.v3-hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.v3-hero__cta .v3-btn--secondary { border: 0; color: var(--v3-brand-deep); }
.v3-hero__ghost { color: #fff !important; background: rgba(255,255,255,.14) !important; }
.v3-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.v3-hero__stat { padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 2px; }
.v3-hero__stat .v3-mono { font-size: 20px; font-weight: 600; }
.v3-hero__stat small { font-size: 10.5px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
@media (max-width: 520px) { .v3-hero__stats { grid-template-columns: repeat(2, 1fr); } }

/* Composer */
.v3-composer { margin-bottom: 16px; padding: 14px 16px; }
.v3-composer__row { display: flex; gap: 12px; align-items: flex-start; }
.v3-composer__field { flex: 1; min-width: 0; }
.v3-composer__input { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--v3-text); font: inherit; font-size: 16px; line-height: 1.5; padding: 8px 0; min-height: 40px; max-height: 320px; }
.v3-composer__input::placeholder { color: var(--v3-faint); }
.v3-composer__gif { position: relative; display: inline-block; margin: 8px 0 0 52px; }
.v3-composer__gif img { max-width: 240px; max-height: 220px; border-radius: 12px; }
.v3-composer__gif-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(15,12,21,.7) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.v3-composer__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v3-divider); }
.v3-composer__tool { width: 34px; height: 34px; font-size: 16px; }
.v3-gif-badge { font: 800 9.5px/1 var(--v3-font); letter-spacing: .04em; border: 1.6px solid currentColor; border-radius: 4px; padding: 2px 3px; }
.v3-composer__count { margin-left: auto; font-size: 11px; color: var(--v3-muted); }
.v3-composer__count.is-warn { color: var(--v3-hot); }
.v3-composer__post { margin-left: auto; }
.v3-composer__count:not([hidden]) + .v3-composer__post { margin-left: 8px; }
@media (max-width: 699px) { .v3-composer__gif { margin-left: 0; } }

/* Feed tabs + new-posts pill */
.v3-feed-tabs { margin-bottom: 16px; position: sticky; top: calc(var(--v3-stick) + 8px); z-index: 20; box-shadow: var(--v3-shadow-card); }
.v3-feed-tabs .v3-segment__item { padding: 10px 0; }
@media (max-width: 699px) { .v3-feed-tabs { top: 8px; transition: top .22s; } .v3-topbar:not(.is-hidden) ~ .v3-shell .v3-feed-tabs { top: calc(var(--v3-stick) + 8px); } }
.v3-newpill {
    position: sticky; top: calc(var(--v3-stick) + 72px); z-index: 21; display: flex !important; align-items: center; gap: 6px; margin: -6px auto 10px; width: max-content;
    padding: 9px 16px; border-radius: 999px; background: var(--v3-brand-grad) !important; color: #fff !important; font-size: 13px; font-weight: 700; box-shadow: var(--v3-brand-glow);
    animation: v3-pop .2s ease-out;
}
.v3-newpill[hidden] { display: none !important; }
.v3-feed { display: flex; flex-direction: column; gap: 16px; }
.v3-feed.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.v3-feed-end { display: flex; justify-content: center; padding: 24px 0 8px; color: var(--v3-muted); font-size: 13px; font-weight: 600; }
.v3-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--v3-tint); border-top-color: var(--v3-brand); display: inline-block; animation: v3-spin .7s linear infinite; }
@keyframes v3-spin { to { transform: rotate(360deg); } }

/* ── Post card ── */
.v3-post { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); box-shadow: var(--v3-shadow-card); overflow: hidden; }
.v3-post__promo, .v3-post__activity { display: flex; align-items: center; gap: 6px; padding: 12px 18px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand); }
.v3-post__promo { color: var(--v3-warn); }
.v3-post__activity a { text-decoration: underline; }
.v3-post__head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 0; }
.v3-post__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.v3-post__name { font-size: 14.5px; min-width: 0; }
.v3-post__name:hover .v3-uname__name { text-decoration: underline; }
.v3-post__meta { font-size: 12.5px; color: var(--v3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.v3-post__meta a:hover { color: var(--v3-text-2); text-decoration: underline; }
.v3-post__more { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--v3-muted); font-size: 18px; flex-shrink: 0; }
.v3-post__more:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-post__body { display: block; padding: 12px 18px 0; }
.v3-post__thread:hover .v3-post__title { color: var(--v3-brand); }
.v3-post__cat { margin-bottom: 8px; font-size: 10.5px; line-height: 1; height: 24px; padding: 0 10px; vertical-align: top; }
.v3-post__cat + .v3-post__remixof { margin-left: 4px; }
.v3-post__remixof { gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v3-post__remixof .v3-icon { width: 12px; height: 12px; flex: none; }
.v3-post__title { font-size: 18px; line-height: 1.3; margin: 0 0 6px !important; }
.v3-post__title a:hover { color: var(--v3-brand); }
.v3-post__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--v3-text-2); white-space: pre-wrap; word-wrap: break-word; }
.v3-post__status { font-size: 15.5px; color: var(--v3-text); }
.v3-post__text--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.v3-post__thread .v3-chip { margin-bottom: 10px; font-size: 10.5px; padding: 4px 10px; }
.v3-post__tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.v3-post__tags a { color: var(--v3-brand); }
.v3-post__tags a:hover { text-decoration: underline; }

/* Media: rounded inset on desktop, edge-to-edge on phones */
.v3-post__media { position: relative; display: block; width: calc(100% - 36px); margin: 14px 18px 0; border-radius: 14px; overflow: hidden; background: var(--v3-surface-2); max-height: 640px; }
.v3-post__media img { width: 100%; height: 100%; max-height: 640px; object-fit: contain; }
/* Tall memes are never cropped: in feeds they sit letterboxed over a blurred copy; the post page shows them full size. */
.v3-post__media .v3-post__media-bg { position: absolute; inset: 0; max-height: none; object-fit: cover; filter: blur(22px) saturate(1.2); transform: scale(1.15); opacity: .55; pointer-events: none; }
.v3-post__media-bg + a, .v3-post__media-bg + picture { position: relative; z-index: 1; display: block; height: 100%; }
.v3-post__media .v3-heart-burst { z-index: 2; }
.v3-post--detail .v3-post__media, .v3-post--detail .v3-post__media img { max-height: none; }
.v3-post__media picture { display: block; }
@media (max-width: 699px) {
    .v3-shell .v3-post { border-radius: 16px; }
    .v3-post__media { width: 100%; margin: 12px 0 0; border-radius: 0; }
}
.v3-heart-burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; font-size: 96px; opacity: 0; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }
.v3-heart-burst .v3-icon { fill: currentColor; }
.v3-heart-burst.is-on { animation: v3-burst .8s cubic-bezier(.2,.8,.2,1); }
@keyframes v3-burst { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }

/* Click-to-load video embeds (no third-party iframe until asked) */
.v3-embed { display: block; aspect-ratio: 16 / 9; padding: 0; cursor: pointer; background: #000 !important; }
.v3-embed--vertical { aspect-ratio: 9 / 16; max-width: 380px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 699px) { .v3-embed--vertical { max-width: none; } }
.v3-embed img { opacity: .85 !important; }
.v3-embed__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(15,12,21,.65); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: transform .15s, background .15s; }
.v3-embed__play svg { width: 30px; height: 30px; margin-left: 4px; }
.v3-embed:hover .v3-embed__play { transform: translate(-50%, -50%) scale(1.08); background: var(--v3-brand); }
.v3-embed--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important; }
.v3-embed__brand { position: absolute; left: 0; right: 0; top: 18px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 700; }
.v3-embed__brand .v3-icon { font-size: 18px; }
.v3-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v3-embed--auto { cursor: default; }
.v3-embed iframe { transition: opacity .2s; }
/* Instagram: same box as the old site (Ken), cropped so Instagram's own
   header and footer don't show. Up to 520px wide, 475px tall (425 on phones);
   the embed is shifted up 105px and 110px taller than the box. */
.v3-embed.v3-embed--igclip { aspect-ratio: 9 / 14; max-width: 520px; max-height: 475px; border-radius: 12px; overflow: hidden; }
.v3-embed--igclip iframe { inset: auto; top: -105px; left: 0; width: 100%; height: calc(100% + 110px); }
@media (max-width: 767px) { .v3-embed.v3-embed--igclip { max-height: 425px; } }
.v3-embed--inline { position: relative; width: 100%; max-width: 480px; margin-top: 10px; border-radius: 12px; overflow: hidden; white-space: normal; }
.v3-embed--inline img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-embed--inline .v3-embed__play { width: 54px; height: 54px; }

/* Promoted meme teaser */
.v3-post__promo-card { display: flex; align-items: center; gap: 12px; margin: 12px 18px 0; padding: 8px; border: 1px solid var(--v3-border); border-radius: 14px; background: var(--v3-surface-2); }
.v3-post__promo-card img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.v3-post__promo-card span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--v3-brand); }

/* Quoted / embedded post */
.v3-quote { display: block; margin: 12px 18px 0; padding: 12px 14px; border: 1px solid var(--v3-border); border-radius: 14px; transition: background .15s, border-color .15s; }
.v3-quote:hover { background: var(--v3-surface-2); border-color: color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-quote__head { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.v3-quote__ctx { color: var(--v3-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-quote__time { margin-left: auto; font-size: 10.5px; color: var(--v3-faint); flex-shrink: 0; }
.v3-quote__img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; margin-top: 10px; }
.v3-quote__title { display: block; font-weight: 700; font-size: 14.5px; margin-top: 8px; }
.v3-quote__text { display: block; font-size: 13.5px; color: var(--v3-text-2); margin-top: 4px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.v3-quote--gone { display: flex; align-items: center; gap: 8px; color: var(--v3-muted); font-size: 13px; background: var(--v3-surface-2); }

/* Link preview (status posts) */
.v3-og-slot:empty { display: none; }
.v3-og { display: flex; margin: 12px 18px 0; border: 1px solid var(--v3-border); border-radius: 14px; overflow: hidden; }
.v3-og:hover { border-color: color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-og img { width: 120px; min-height: 90px; object-fit: cover; flex-shrink: 0; background: var(--v3-surface-2); }
.v3-og__body { padding: 10px 14px; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.v3-og__site { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--v3-muted); font-weight: 700; }
.v3-og__title { font-size: 14px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-og__desc { font-size: 12.5px; color: var(--v3-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Action row */
.v3-post__actions { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 6px 10px; border-top: 1px solid var(--v3-divider); }
.v3-act { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 999px; color: var(--v3-text-3); font-size: 18px; transition: background .15s, color .15s; }
.v3-act .v3-mono { font-size: 12px; min-width: 1ch; }
.v3-act:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-act--static { cursor: default; } .v3-act--static:hover { background: none; color: var(--v3-text-3); }
.v3-act__spacer { flex: 1; }
.v3-act--like:hover, .v3-act--like.is-on { color: #E11D48; }
.v3-act--like.is-on .v3-icon { fill: currentColor; }
.v3-act--like.is-pop .v3-icon { animation: v3-like-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes v3-like-pop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.v3-act--save:hover, .v3-act--save.is-on { color: var(--v3-brand); }
.v3-act--save.is-on .v3-icon { fill: currentColor; }
.v3-act.is-reposted { color: #059669; }
@media (max-width: 420px) { .v3-act { padding: 0 8px; } .v3-post__actions { padding: 4px 6px; } }

/* Top comment preview */
.v3-post__top { display: flex; align-items: flex-start; gap: 9px; margin: 0 18px; padding: 10px 0 2px; border-top: 1px solid var(--v3-divider); font-size: 13.5px; color: var(--v3-text-2); }
.v3-post__top-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.v3-post__top-text strong { color: var(--v3-text); }
.v3-post__more-comments { display: block; margin: 4px 18px 0 51px; font-size: 12.5px; font-weight: 600; color: var(--v3-muted); }
.v3-post__more-comments:hover { color: var(--v3-brand); }
.v3-post > :last-child:not(.v3-post__actions) { margin-bottom: 14px; }

/* Sheets used by cards */
.v3-sheet--menu .v3-sheet__body { padding: 8px; }
.v3-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--v3-text); text-align: left; }
.v3-sheet-item .v3-icon { font-size: 19px; color: var(--v3-text-3); }
.v3-sheet-item:hover { background: var(--v3-surface-2); }
.v3-sheet-item--danger, .v3-sheet-item--danger .v3-icon { color: var(--v3-hot); }
.v3-sheet-item--warn .v3-icon { color: var(--v3-warn); }
.v3-sheet-sep { height: 1px; background: var(--v3-divider); margin: 6px 8px; }
.v3-sheet-label { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-faintest); }
.v3-privacy-row { display: flex; gap: 6px; padding: 4px 8px 8px; }
.v3-privacy-row button { flex: 1; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--v3-border) !important; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.v3-privacy-row button .v3-icon { font-size: 17px; }
.v3-privacy-row button[aria-pressed="true"] { border-color: var(--v3-brand) !important; background: var(--v3-tint) !important; color: var(--v3-brand-ink); }
.v3-textarea { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.v3-repost-preview:empty { display: none; }
.v3-repost-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--v3-border); border-radius: 12px; font-size: 13px; color: var(--v3-text-2); }
.v3-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.v3-choice { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--v3-border); border-radius: 12px; font-size: 14px; cursor: pointer; }
.v3-choice:has(input:checked) { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-choice input { accent-color: var(--v3-brand); }

/* GIF / emoji picker */
.v3-gif-sheet { max-height: 80vh; }
@media (min-width: 700px) { .v3-gif-sheet { width: 520px !important; } }
.v3-gif-body { padding: 10px 12px 12px; min-height: 300px; }
.v3-gif-grid { columns: 3 140px; column-gap: 6px; }
.v3-gif-grid button { display: block; width: 100%; margin-bottom: 6px; border-radius: 10px; overflow: hidden; background: var(--v3-surface-2); break-inside: avoid; }
.v3-gif-grid img { width: 100%; height: auto; display: block; }
.v3-gif-grid button:hover { outline: 2px solid var(--v3-brand); outline-offset: -2px; }
.v3-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.v3-emoji-grid button { font-size: 26px; height: 46px; border-radius: 10px; }
.v3-emoji-grid button:hover { background: var(--v3-surface-2); }
.v3-gif-credit { margin: 10px 0 0; text-align: center; font-size: 10.5px; color: var(--v3-faint); font-weight: 600; letter-spacing: .04em; }

/* "+5 XP" moment */
/* XP earned (Ken, Oct 13): a gradient chip with a bolt that pops in, a ring
   and sparks that burst out of it, a shine sweep and a count-up, then it
   floats away. v3.xp(amount, label) in v3.js builds it. */
.v3-xp-pop { position: fixed; z-index: 120; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; display: grid; place-items: center; }
.v3-xp-pop__ring { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; left: 0; top: 0; border-radius: 50%; border: 3px solid var(--v3-brand); opacity: 0; animation: v3-xp-ring .9s ease-out .08s forwards; }
.v3-xp-pop__ring + .v3-xp-pop__ring { animation-delay: .22s; border-color: #F5B83D; }
.v3-xp-pop__spark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; animation: v3-xp-spark .85s cubic-bezier(.15,.7,.3,1) .1s forwards; }
.v3-xp-pop__spark--star { width: 14px; height: 14px; border-radius: 2px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; }
.v3-xp-pop__chip { position: absolute; transform: translate(-50%, -50%); left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; white-space: nowrap; background: linear-gradient(120deg, #6D28D9 0%, #8B5CF6 45%, #D946EF 100%); color: #fff; box-shadow: 0 16px 44px rgba(124, 58, 237, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 1px 0 rgba(255, 255, 255, .35) inset; overflow: hidden; animation: v3-xp-chip 2.1s cubic-bezier(.2,.8,.2,1) forwards; }
.v3-xp-pop__chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-130%); animation: v3-xp-shine .8s ease-out .4s forwards; }
.v3-xp-pop__bolt { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #F5B83D; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 0 18px rgba(245, 184, 61, .7); animation: v3-xp-bolt .65s cubic-bezier(.3,1.6,.5,1) .1s both; }
.v3-xp-pop__bolt svg { width: 22px; height: 22px; fill: currentColor; stroke: #E39B12; stroke-width: 1; }
.v3-xp-pop__txt { display: flex; flex-direction: column; gap: 3px; }
.v3-xp-pop__txt b { font: 800 26px/1 var(--v3-font-display, var(--v3-font)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(40, 10, 90, .35); }
.v3-xp-pop__txt span { font-size: 12px; font-weight: 700; opacity: .92; }
@keyframes v3-xp-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; border-width: 1px; } }
@keyframes v3-xp-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); } }
@keyframes v3-xp-chip { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 24% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(.94); } }
@keyframes v3-xp-shine { to { transform: translateX(130%); } }
@keyframes v3-xp-bolt { 0% { transform: rotate(-40deg) scale(.3); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .v3-xp-pop__ring, .v3-xp-pop__spark, .v3-xp-pop__chip::after { display: none; }
    .v3-xp-pop__chip, .v3-xp-pop__bolt { animation: v3-fade .25s ease-out both; }
}
/* Phones: feed cards go edge to edge (Instagram/X style). */
@media (max-width: 699px) {
    .v3-feed { margin-inline: -14px; gap: 8px; }
    .v3-feed > .v3-post { border-radius: 0 !important; border-left: 0; border-right: 0; box-shadow: none; }
    .v3-feed > .v3-ad { border-radius: 0; border-left: 0; border-right: 0; }
    .v3-feed > .v3-empty { margin-inline: 14px; }
}

/* ── Create sheet: upload flows ── */
.v3-create { max-height: 92vh; }
@media (min-width: 700px) { .v3-create { width: 540px !important; max-height: 88vh; } }
.v3-create .v3-sheet__head { justify-content: flex-start; }
.v3-create .v3-sheet__head [data-v3-close] { margin-left: auto; }
.v3-create-form { display: grid; gap: 14px; }
.v3-create-type .v3-segment__item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.v3-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 18px; border: 2px dashed var(--v3-border-dash); border-radius: 18px; background: var(--v3-surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; overflow: hidden; }
.v3-drop:hover, .v3-drop.is-over { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-drop__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--v3-text-2); }
.v3-drop__empty strong { font-size: 14px; }
.v3-drop__empty small { font-size: 12px; color: var(--v3-muted); }
.v3-drop.has-file { padding: 0; border-style: solid; background: #000; }
.v3-drop.has-file .v3-drop__empty { display: none; }
.v3-drop__preview { max-width: 100%; max-height: 360px; object-fit: contain; }
.v3-drop__clear { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(15,12,21,.7) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.v3-create-fields { display: grid; gap: 12px; }
.v3-req { color: var(--v3-hot); }
.v3-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A849A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.v3-create-progress { height: 8px; border-radius: 999px; background: var(--v3-tint); overflow: hidden; }
.v3-create-progress > span { display: block; height: 100%; width: 0; background: var(--v3-brand-grad); transition: width .2s; }
.v3-create-progress.is-processing > span { width: 100% !important; animation: v3-shimmer 1.2s linear infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--v3-brand), #C4B5FD, var(--v3-brand)); }
.v3-create-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--v3-hot-bg); color: var(--v3-hot); font-size: 13px; font-weight: 600; }
.v3-create-done { text-align: center; padding: 28px 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v3-create-done__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--v3-brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: var(--v3-brand-glow); margin-bottom: 6px; animation: v3-pop .3s ease-out; }
.v3-create-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* ── Tip sheet ── */
.v3-act--tip:hover { color: #D97706; }
.v3-tip-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.v3-tip-preset { padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--v3-border) !important; background: var(--v3-surface-2) !important; font-size: 15px; font-weight: 700; font-family: var(--v3-font-mono); }
.v3-tip-preset.is-on { border-color: var(--v3-brand) !important; background: var(--v3-brand-grad) !important; color: #fff; }
.v3-tip-custom { position: relative; display: block; margin-bottom: 12px; }
.v3-tip-custom span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--v3-muted); }
.v3-tip-custom .v3-input { padding-left: 28px; }
.v3-tip-preview { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--v3-tint); font-size: 13px; color: var(--v3-text-2); }
.v3-tip-preview strong { font-size: 15px; color: var(--v3-text); }
.v3-tip-preview small { width: 100%; font-size: 11px; color: var(--v3-muted); }
.v3-tip-big { font-family: var(--v3-font-display); font-size: 34px; font-weight: 800; }
.v3-tip-row { display: flex; justify-content: space-between; padding: 10px 2px; border-top: 1px solid var(--v3-divider); font-size: 14px; }
.v3-tip-row span { color: var(--v3-muted); }

/* ── Presence dot: anchored to the avatar circle, not the text line ────── */
.v3-post__avatar, .v3-presence { position: relative; display: block; flex-shrink: 0; line-height: 0; border-radius: 50%; }
/* Online dot, sized to its avatar (--av on the wrapper): about a quarter of
   the avatar across (10px on a 40px avatar, as on the current site), centred
   on the circle's edge at 45 degrees - that point sits 14.64% of the avatar
   size in from the corner - so it lands on the rim at any size. */
.v3-online {
    --d: clamp(8px, calc(var(--av, 40px) * .25), 16px);
    position: absolute; width: var(--d); height: var(--d);
    right: calc(var(--av, 40px) * .1464 - var(--d) / 2); bottom: calc(var(--av, 40px) * .1464 - var(--d) / 2);
    box-sizing: border-box; border-radius: 50%; background: #22C55E;
    border: clamp(1.5px, calc(var(--av, 40px) * .05), 3px) solid var(--v3-surface);
}

/* ── Inline comments ───────────────────────────────────────────────────── */
.v3-act.is-open { color: var(--v3-brand); background: var(--v3-tint); }
.v3-post.is-cmts-open .v3-post__top, .v3-post.is-cmts-open .v3-post__more-comments { display: none; }
.v3-cmts { margin: 0 18px 14px; padding: 12px 0 0; border-top: 1px solid var(--v3-divider); }
.v3-cmts[hidden] { display: none; }
.v3-cmts__loading { display: flex; justify-content: center; padding: 18px 0; }
.v3-cmts__list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.v3-cmts__list:empty { display: none; }
.v3-cmts__empty { font-size: 13px; color: var(--v3-muted); text-align: center; padding: 6px 0 4px; }
.v3-cmts__note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v3-muted); padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); }
.v3-cmts__login { color: var(--v3-brand); font-weight: 600; }
.v3-cmts__login:hover { background: var(--v3-tint); }
.v3-cmts__all { display: inline-block; margin: 12px 0 0 42px; font-size: 13px; font-weight: 600; color: var(--v3-muted); }
.v3-cmts__all:hover { color: var(--v3-brand); }

.v3-cmt-form { display: flex; gap: 10px; align-items: flex-start; }
.v3-cmt-form__box { flex: 1; min-width: 0; border: 1px solid var(--v3-border); border-radius: 18px; background: var(--v3-surface-2); padding: 4px 6px 4px 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
.v3-cmt-form__box:focus-within { border-color: var(--v3-brand); background: var(--v3-surface); box-shadow: 0 0 0 3px var(--v3-brand-glow); }
.v3-cmt-form__input { display: block; width: 100%; min-height: 34px; max-height: 200px; padding: 8px 0 4px; border: 0; outline: 0; resize: none; background: transparent; color: var(--v3-text); font: 400 14px/1.45 var(--v3-font); }
.v3-cmt-form__input::placeholder { color: var(--v3-muted); }
.v3-cmt-form__bar { display: flex; align-items: center; gap: 2px; }
.v3-cmt-form__tool { width: 32px; height: 32px; font-size: 17px; color: var(--v3-text-3); }
.v3-cmt-form__spacer { flex: 1; }
.v3-cmt-form__gif { position: relative; display: inline-block; margin: 4px 0; }
.v3-cmt-form__gif[hidden] { display: none; }
.v3-cmt-form__gif img { max-width: 180px; max-height: 160px; border-radius: 10px; display: block; }
.v3-cmt-form--reply { margin-top: 10px; }
.v3-cmt-form--reply .v3-avatar { --s: 26px !important; }

.v3-cmt { display: flex; gap: 10px; align-items: flex-start; }
.v3-cmt.is-hidden .v3-cmt__bubble { opacity: .6; }
.v3-cmt__main { flex: 1; min-width: 0; }
.v3-cmt__bubble { display: inline-block; max-width: 100%; padding: 8px 13px 9px; border-radius: 4px 16px 16px 16px; background: var(--v3-surface-2); }
.v3-cmt__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 1.3; }
.v3-cmt__name:hover .v3-uname__name { text-decoration: underline; }
.v3-cmt__time { font-size: 12px; color: var(--v3-muted); }
.v3-cmt__body { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--v3-text); overflow-wrap: anywhere; white-space: pre-line; }
.v3-cmt__body a { color: var(--v3-brand); }
.v3-cmt__body a:hover { text-decoration: underline; }
.v3-cmt__body .yt-embed-wrap { white-space: normal; }
.v3-cmt__gif { display: block; max-width: 220px; max-height: 220px; margin-top: 6px; border-radius: 10px; }
.v3-cmt__actions { display: flex; align-items: center; gap: 2px; margin: 2px 0 0 4px; }
.v3-cmt__act { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--v3-muted); }
.v3-cmt__act:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-cmt__act .v3-icon { font-size: 14px; }
.v3-cmt__like:hover, .v3-cmt__like.is-on { color: #E11D48; }
.v3-cmt__like.is-on .v3-icon { fill: currentColor; }
.v3-cmt__like.is-pop .v3-icon { animation: v3-like-pop .45s cubic-bezier(.2,.8,.2,1); }
.v3-cmt__more { padding: 0 6px; }
.v3-cmt__replies { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.v3-cmt__replies[hidden], .v3-cmt__replies:empty { display: none; }
.v3-cmt__toggle { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--v3-muted); }
.v3-cmt__toggle:hover { color: var(--v3-brand); }
.v3-cmt__toggle-line { width: 22px; height: 1px; background: var(--v3-border); }
.v3-cmt__edit { margin-top: 4px; }
.v3-cmt__edit textarea { display: block; width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--v3-brand); border-radius: 12px; background: var(--v3-surface); color: var(--v3-text); font: 400 14px/1.45 var(--v3-font); resize: vertical; outline: 0; box-shadow: 0 0 0 3px var(--v3-brand-glow); }
.v3-cmt__edit-bar { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.v3-cmt.is-flash .v3-cmt__bubble { animation: v3-cmt-flash 1.6s ease-out; }
@keyframes v3-cmt-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--v3-brand); } 100% { box-shadow: 0 0 0 2px transparent; } }
@media (max-width: 699px) { .v3-cmts { margin: 0 14px 14px; } }

/* ── Share sheet ───────────────────────────────────────────────────────── */
/* The share sheet has no inner scroll body, so the sheet itself scrolls (Ken, Oct 13:
   the invite card at the bottom couldn't be reached on phones). Header stays put. */
.v3-share { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.v3-share > .v3-sheet__head { position: sticky; top: 0; z-index: 1; background: var(--v3-surface); }
.v3-share > :last-child { margin-bottom: 12px; }
.v3-share__qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 18px 6px; }
.v3-share__code { width: 180px; height: 180px; padding: 10px; box-sizing: content-box; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(15, 12, 21, .08); display: flex; align-items: center; justify-content: center; }
.v3-share__code canvas { display: block; max-width: 100%; }
.v3-share__qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v3-share__qr-actions [hidden] { display: none; }
.v3-share__nets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 14px 12px 6px; }
.v3-share__net { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 14px; font-size: 11.5px; font-weight: 600; color: var(--v3-text-2); }
.v3-share__net:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-share__ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--net); color: var(--net-ink, #fff); transition: transform .15s; }
.v3-share__net:hover .v3-share__ico { transform: translateY(-2px); }
.v3-share__ico svg { width: 22px; height: 22px; }
.v3-share__copy { display: flex; gap: 8px; padding: 10px 18px 18px; }
.v3-share__copy input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-pill); background: var(--v3-surface-2); color: var(--v3-text-2); font: 400 13px var(--v3-font); outline: 0; }
.v3-share__copy input:focus { border-color: var(--v3-brand); }
@media (max-width: 420px) { .v3-share__nets { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } }

.v3-link { color: var(--v3-brand); font-weight: 600; }
.v3-link:hover { text-decoration: underline; }

.v3-post__privacy { display: inline-flex; align-items: center; gap: 4px; }
.v3-post__privacy:empty { display: none; }

/* Topbar avatar: flex (not inline) so it centres with the icon buttons
   instead of sitting on the text baseline. */
.v3-topbar__end > .v3-menu-wrap { display: flex; align-items: center; }
.v3-topbar__me { display: flex; padding: 0; border-radius: 50%; line-height: 0; }
.v3-topbar__brand { display: flex; align-items: center; }
.v3-logo { line-height: 1; }

/* ── Skeletons (v3.skeleton(kind, n) in v3.js) ─────────────────────────────
   Every region loaded after first paint shows the outline of its own
   content: post cards, comments, notifications, search rows, GIF tiles. */
.v3-skel--circle { flex: none; border-radius: 50% !important; }
.v3-skel-lines { flex: 1; min-width: 0; display: grid; gap: 7px; align-content: center; }
.v3-skel-list { display: grid; gap: 14px; padding: 12px; }
.v3-skel-list--search { gap: 10px; padding: 8px 12px 12px; border-top: 1px solid var(--v3-divider); }
.v3-skel-row { display: flex; align-items: center; gap: 12px; }
.v3-post--skel { pointer-events: none; }
.v3-post--skel .v3-post__head { align-items: center; }
.v3-post--skel .v3-post__body { padding-top: 2px; }
.v3-post--skel .v3-post__actions { gap: 22px; padding: 14px 18px; }
.v3-skel--media { display: block; width: 100%; height: 300px; aspect-ratio: auto !important; border-radius: 0; margin-top: 12px; }
.v3-cmts__skel { display: grid; gap: 14px; }
.v3-cmt-form--skel { align-items: center; }
.v3-cmt--skel .v3-skel--bubble { display: block; height: 46px; border-radius: 4px 16px 16px 16px; }
.v3-skel--tile { display: block; width: 100%; border-radius: 8px; break-inside: avoid; margin-bottom: 6px; }
.v3-feed-more { display: grid; gap: 16px; width: 100%; }
.v3-feed-more[hidden] { display: none; }
.v3-post__media.is-pending, .v3-embed--inline.is-pending { background: linear-gradient(90deg, var(--v3-skel-a) 0%, var(--v3-skel-b) 50%, var(--v3-skel-a) 100%) !important; background-size: 200% 100% !important; animation: v3-shimmer 1.3s linear infinite; }
.v3-share__code.is-loading { background: linear-gradient(90deg, var(--v3-skel-a) 0%, var(--v3-skel-b) 50%, var(--v3-skel-a) 100%); background-size: 200% 100%; animation: v3-shimmer 1.3s linear infinite; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .v3-skel, .v3-post__media.is-pending, .v3-embed--inline.is-pending, .v3-share__code.is-loading { animation: none; }
}
.v3-feed-end { flex-direction: column; align-items: center; }
.v3-feed-end .v3-feed-more { margin-top: -8px; }
@media (max-width: 699px) { .v3-feed-more { width: auto; align-self: stretch; margin-inline: -14px; gap: 8px; } }

/* ── Post detail page (v3/post.blade.php) ─────────────────────────────── */
.v3-back-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.v3-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--v3-r-pill); font-size: 14px; font-weight: 600; color: var(--v3-text-2); }
.v3-back:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-back .v3-icon { font-size: 18px; }
.v3-post__title--lg { font-size: 22px; line-height: 1.25; }
.v3-post--detail .v3-post__text { font-size: 15.5px; }
.v3-post--detail .v3-post__status { font-size: 17px; line-height: 1.5; }
.v3-cmts--detail { padding-top: 16px; }
.v3-cmts__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.v3-cmts__title { font-family: var(--v3-font-display); font-size: 17px; font-weight: 700; }
.v3-cmts__total { margin-left: 4px; font: 500 14px var(--v3-font); color: var(--v3-muted); }
.v3-cmts__sort { display: inline-flex; padding: 3px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); }
.v3-cmts__sort button { height: 28px; padding: 0 12px; border-radius: var(--v3-r-pill); font-size: 12.5px; font-weight: 600; color: var(--v3-muted); }
.v3-cmts__sort button[aria-selected="true"] { background: var(--v3-surface); color: var(--v3-text); box-shadow: var(--v3-shadow-card); }
.v3-cmts__more { display: flex; margin: 16px auto 2px; }
.v3-cmts__more[hidden] { display: none; }
.v3-cmts__list > .v3-cmts__skel { margin-top: 4px; }

.v3-more { margin-top: 16px; padding: 16px 18px 18px; }
.v3-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.v3-more__head h2 { font-family: var(--v3-font-display); font-size: 16px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-more__head a { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 600; color: var(--v3-brand); }
.v3-more__head a:hover { text-decoration: underline; }
.v3-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-mgrid__item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--v3-surface-2); }
.v3-mgrid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.v3-mgrid__item:hover img { transform: scale(1.04); }
.v3-mgrid__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 22px 9px 8px; background: linear-gradient(transparent, rgba(10, 8, 16, .78)); color: #fff; }
.v3-mgrid__title { font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v3-mgrid__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-mgrid__meta .v3-icon { font-size: 11px; }
.v3-mgrid__badge { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 16, .6); color: #fff; }
.v3-mgrid__badge svg { width: 13px; height: 13px; margin-left: 2px; }
@media (max-width: 699px) {
    .v3-back-row { margin: 0 0 8px; }
    .v3-more { border-radius: 0; margin-inline: -14px; }
    .v3-mgrid { gap: 4px; }
    .v3-mgrid__item { border-radius: 8px; }
    .v3-post__title--lg { font-size: 20px; }
}

.v3-author { padding: 18px; }
.v3-author__top { display: flex; align-items: center; gap: 12px; }
.v3-author__top:hover .v3-uname__name { text-decoration: underline; }
.v3-author__who { display: grid; gap: 2px; min-width: 0; }
.v3-author__handle { font-size: 13px; color: var(--v3-muted); }
.v3-author__bio { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v3-text-2); overflow-wrap: anywhere; }
.v3-author__bio a { color: var(--v3-brand); }
.v3-author__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 12px 0; border-block: 1px solid var(--v3-divider); text-align: center; }
.v3-author__stats dt { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--v3-muted); }
.v3-author__stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--v3-text); }

/* Author card: rail on wide screens, under the post when the rail is hidden. */
.v3-author--inline { display: none; margin-top: 16px; }
@media (max-width: 1199px) { .v3-author--inline { display: block; } }
@media (max-width: 699px) {
    .v3-post--detail, .v3-author--inline { margin-inline: -14px; border-radius: 0; border-inline: 0; }
}

/* ── Profile page (v3/profile.blade.php) ──────────────────────────────── */
.v3-profile { padding: 0; overflow: hidden; }
.v3-profile__banner { position: relative; height: 200px; background: var(--v3-brand-grad); background-size: cover; background-position: center; }
.v3-profile__cam { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 16, .55); color: #fff; font-size: 18px; backdrop-filter: blur(6px); }
.v3-profile__cam:hover { background: rgba(10, 8, 16, .75); }
.v3-profile__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 20px; margin-top: -52px; }
.v3-profile__avatar { border-radius: 50%; box-shadow: 0 0 0 4px var(--v3-surface); background: var(--v3-surface); }
.v3-profile__actions { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.v3-iconbtn--outline { border: 1px solid var(--v3-border); background: var(--v3-surface); }
.v3-iconbtn--outline:hover { background: var(--v3-surface-2); }
.v3-profile__body { padding: 12px 20px 18px; }
.v3-profile__name { font-size: 21px; line-height: 1.25; }
.v3-profile__name .v3-uname__name { font-family: var(--v3-font-display); }
.v3-profile__handle { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 14px; color: var(--v3-muted); }
.v3-profile__handle .v3-chip { height: 20px; font-size: 11px; }
.v3-profile__bio { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--v3-text); white-space: pre-line; overflow-wrap: anywhere; }
.v3-profile__bio a { color: var(--v3-brand); }
.v3-profile__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--v3-muted); }
.v3-profile__meta li { display: inline-flex; align-items: center; gap: 5px; }
.v3-profile__meta a { color: var(--v3-brand); }
.v3-profile__meta a:hover { text-decoration: underline; }
.v3-profile__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--v3-divider); text-align: center; }
.v3-profile__stats > div > * { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; padding: 6px 4px; border-radius: 12px; }
.v3-profile__stats button:hover, .v3-profile__stats a:hover { background: var(--v3-surface-2); }
.v3-profile__stats dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--v3-text); }
.v3-profile__stats dt { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--v3-muted); }
.v3-profile__xp { color: var(--v3-brand) !important; }

.v3-ptabs { position: sticky; top: calc(var(--v3-stick) + 8px); z-index: 5; display: flex; gap: 4px; margin: 16px 0; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); }
.v3-ptabs::-webkit-scrollbar { display: none; }
.v3-ptabs__item { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--v3-r-pill); font-size: 13.5px; font-weight: 600; color: var(--v3-muted); white-space: nowrap; }
.v3-ptabs__item:hover { color: var(--v3-text); background: var(--v3-surface-2); }
.v3-ptabs__item.is-active { background: var(--v3-brand-grad); color: #fff; }
.v3-ptabs__count { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--v3-surface-2); color: var(--v3-text-2); }
.v3-ptabs__item.is-active .v3-ptabs__count { background: rgba(255, 255, 255, .22); color: #fff; }
.v3-ptabs__lock { font-size: 12px; opacity: .8; }

.v3-ppanel__bar { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.v3-ppanel__sort { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-text-2); font-size: 13px; }
.v3-ppanel__sort select { appearance: none; border: 0; background: transparent; color: var(--v3-text); font: 600 13px var(--v3-font); padding-right: 4px; cursor: pointer; outline: 0; }
.v3-ppanel__sort select option { color: #111; }
.v3-ppanel > .v3-composer { margin-bottom: 16px; }
.v3-mgrid--profile { gap: 6px; }
.v3-skel--gridtile { display: block; aspect-ratio: 1 / 1; border-radius: 12px; }
.v3-pmore { margin-top: 6px; }
.v3-pmore[hidden] { display: none; }
.v3-psentinel { height: 1px; }
.v3-plist { display: flex; flex-direction: column; gap: 10px; }
.v3-prow { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); transition: border-color .15s; }
.v3-prow:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-prow--skel { align-items: center; }
.v3-prow__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 17px; }
.v3-prow__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.v3-prow__ctx { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-prow__title { font-size: 15px; font-weight: 600; color: var(--v3-text); line-height: 1.35; }
.v3-prow__to { font-size: 12.5px; color: var(--v3-brand); }
.v3-prow__body { font-size: 14px; line-height: 1.5; color: var(--v3-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v3-prow__gif { max-width: 200px; max-height: 160px; border-radius: 10px; }
.v3-prow__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--v3-muted); }
.v3-prow__meta span { display: inline-flex; align-items: center; gap: 4px; }
.v3-pempty { padding: 44px 20px; text-align: center; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); }
.v3-mgrid .v3-pempty, .v3-feed .v3-pempty { grid-column: 1 / -1; }
.v3-pempty__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 16px; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 24px; margin-bottom: 10px; }
.v3-pempty__title { margin: 0; font-family: var(--v3-font-display); font-size: 17px; font-weight: 700; color: var(--v3-text); }
.v3-pempty__text { margin: 6px auto 0; max-width: 340px; font-size: 13.5px; color: var(--v3-muted); }
.v3-composer__wallnote { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); font-size: 12.5px; font-weight: 600; color: var(--v3-text-2); }

.v3-flist { display: grid; gap: 4px; max-height: min(70vh, 560px); overflow-y: auto; }
.v3-urow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.v3-urow__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.v3-urow__who:hover .v3-uname__name { text-decoration: underline; }
.v3-urow__names { min-width: 0; display: grid; gap: 1px; }
.v3-urow__handle { font-size: 12.5px; color: var(--v3-muted); }
.v3-flist__more { justify-self: center; margin: 8px 0 4px; }

.v3-sheet--tall { max-height: 92vh; overflow-y: auto; }
.v3-pedit__media { position: relative; margin-bottom: 52px; }
.v3-pedit__banner { display: block; height: 130px; border-radius: 14px; background: var(--v3-brand-grad); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; }
.v3-pedit__cam { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--v3-r-pill); background: rgba(10, 8, 16, .6); color: #fff; font-size: 12.5px; font-weight: 600; }
.v3-pedit__rmbanner { position: absolute; right: 10px; top: 48px; height: 28px; padding: 0 10px; border-radius: var(--v3-r-pill); background: rgba(10, 8, 16, .45); color: #fff; font-size: 12px; }
.v3-pedit__avatar { position: absolute; left: 16px; bottom: -44px; border-radius: 50%; box-shadow: 0 0 0 4px var(--v3-surface); cursor: pointer; }
.v3-pedit__avcam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10, 8, 16, .35); color: #fff; font-size: 22px; opacity: 0; transition: opacity .15s; }
.v3-pedit__avatar:hover .v3-pedit__avcam, .v3-pedit__avatar:focus-within .v3-pedit__avcam { opacity: 1; }
@media (hover: none) { .v3-pedit__avcam { opacity: 1; background: rgba(10, 8, 16, .25); } }
.v3-pedit__hint { margin: 0 0 14px; font-size: 12px; color: var(--v3-muted); }
.v3-pedit .v3-input { margin-bottom: 12px; }
.v3-pedit__count { float: right; font-weight: 500; color: var(--v3-muted); }
.v3-pedit__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v3-pedit__social { margin: 2px 0 12px; padding: 10px 12px; border: 1px solid var(--v3-border); border-radius: 12px; }
.v3-pedit__social summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--v3-text); }
.v3-pedit__social summary span { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--v3-muted); }
.v3-pedit__social[open] summary { margin-bottom: 10px; }
.v3-pedit__foot { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: -1px; margin: 4px -18px -18px; padding: 12px 18px; background: var(--v3-surface); border-top: 1px solid var(--v3-divider); }
.v3-form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--v3-hot) 10%, transparent); color: var(--v3-hot); font-size: 13px; font-weight: 600; }
.v3-form-error[hidden] { display: none; }
.v3-punavail { padding: 30px 20px; }

@media (max-width: 699px) {
    .v3-profile { margin-inline: -14px; margin-top: -14px; border-radius: 0; border-inline: 0; border-top: 0; }
    .v3-profile__banner { height: 130px; }
    .v3-profile__top { padding: 0 14px; margin-top: -40px; }
    /* Buttons sit fully below the banner, not on its edge. */
    .v3-profile__actions { align-self: flex-start; margin-top: 52px; padding-bottom: 0; }
    .v3-profile__avatar { --av: 80px !important; }
    .v3-profile__avatar .v3-avatar { --s: 80px !important; width: 80px; height: 80px; }
    .v3-profile__body { padding: 10px 14px 14px; }
    .v3-profile__stats dd { font-size: 16px; }
    .v3-ptabs { margin-inline: -14px; border-radius: 0; border-inline: 0; top: var(--v3-stick); }
    .v3-ptabs__item { flex: 0 0 auto; padding: 0 12px; }
    .v3-mgrid--profile { gap: 3px; margin-inline: -14px; }
    .v3-mgrid--profile .v3-mgrid__item { border-radius: 0; }
    .v3-pedit__row { grid-template-columns: 1fr; gap: 0; }
}
/* Profile tabs: all six fit without scrolling at common desktop widths by
   dropping the leading icons there; wide screens keep them, and phones
   scroll the bar sideways. */
@media (min-width: 700px) and (max-width: 1599px) {
    .v3-ptabs__item > .v3-icon:first-child { display: none; }
    .v3-ptabs__item { padding: 0 10px; gap: 5px; font-size: 13px; }
}

/* ── Explore / Trending (v3/explore, v3/trending) ─────────────────────── */
.v3-dhead { margin: 0 0 18px; }
.v3-dhead__title { font-family: var(--v3-font-display); font-size: 28px; font-weight: 700; line-height: 1.15; }
.v3-dhead__sub { margin: 6px 0 0; font-size: 14.5px; color: var(--v3-muted); }
.v3-chipbar { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v3-chipbar::-webkit-scrollbar { display: none; }
.v3-chipbar__item { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--v3-r-pill); border: 1px solid var(--v3-border); background: var(--v3-surface); font-size: 13.5px; font-weight: 600; color: var(--v3-text-2); white-space: nowrap; }
.v3-chipbar__item:hover { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); color: var(--v3-text); }
.v3-chipbar__item.is-active { background: var(--v3-brand-grad); border-color: transparent; color: #fff; }

.v3-dsec { margin: 0 0 26px; }
.v3-dsec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.v3-dsec__head h2 { font-family: var(--v3-font-display); font-size: 18px; font-weight: 700; min-width: 0; flex: none; }
.v3-dsec__head > a { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 600; color: var(--v3-brand); }
.v3-dsec__head > a:hover { text-decoration: underline; }
.v3-dsec__count { margin-left: 6px; font: 500 14px var(--v3-font-mono); color: var(--v3-muted); }
.v3-dsec__hint { display: block; margin: -6px 0 12px; font-size: 13px; color: var(--v3-muted); }
.v3-dsec__head .v3-dsec__hint { margin: 0; }
.v3-dsec__tag { color: var(--v3-brand); }
.v3-mgrid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .v3-mgrid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v3-dmore { margin-top: 8px; }
.v3-dmore[hidden] { display: none; }
.v3-mgrid__rank { position: absolute; top: 8px; left: 8px; min-width: 30px; height: 24px; padding: 0 7px; border-radius: var(--v3-r-pill); display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 8, 16, .65); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); }
.v3-mgrid__item:nth-child(-n+3) .v3-mgrid__rank { background: var(--v3-brand-grad); }

.v3-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 170px); gap: 8px; }
.v3-mosaic__item { position: relative; overflow: hidden; border-radius: 16px; background: var(--v3-surface-2); }
.v3-mosaic__item--lead { grid-row: 1 / span 2; }
.v3-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.v3-mosaic__item:hover img { transform: scale(1.03); }
.v3-mosaic__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; justify-items: start; padding: 32px 12px 10px; background: linear-gradient(transparent, rgba(10, 8, 16, .82)); color: #fff; }
.v3-mosaic__title { font-size: 13.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-mosaic__item--lead .v3-mosaic__title { font-family: var(--v3-font-display); font-size: 20px; }
.v3-mosaic__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: .9; }
.v3-mosaic__item:not(.v3-mosaic__item--lead) .v3-mosaic__meta { display: none; }
.v3-chip--glass { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); border: 0; }

.v3-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-tagcloud__tag { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); font-size: 13.5px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-tagcloud__tag span { font-size: 11.5px; color: var(--v3-muted); }
.v3-tagcloud__tag:hover { background: var(--v3-tint); }

.v3-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-spot { display: grid; gap: 12px; padding: 14px; }
.v3-spot__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v3-spot__who:hover .v3-uname__name { text-decoration: underline; }
.v3-spot__names { min-width: 0; display: grid; gap: 2px; }
.v3-spot__sub { font-size: 12.5px; color: var(--v3-muted); }
.v3-spot__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.v3-spot__thumbs a { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--v3-surface-2); }
.v3-spot__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.v3-forumtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-forumtile { display: grid; gap: 4px; padding: 14px 16px; transition: border-color .15s; }
.v3-forumtile:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-forumtile__icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 16px; margin-bottom: 4px; }
.v3-forumtile__name { font-weight: 700; color: var(--v3-text); }
.v3-forumtile__desc { font-size: 13px; color: var(--v3-muted); line-height: 1.45; }
.v3-forumtile__meta { font-size: 12px; color: var(--v3-text-2); }

.v3-hero-rot { position: relative; margin: 0 0 16px; border-radius: 20px; overflow: hidden; background: #0d0b12; }
.v3-hero-rot__slide { position: relative; display: block; height: 340px; }
.v3-hero-rot__slide[hidden] { display: none; }
.v3-hero-rot__slide img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
@media (prefers-reduced-motion: no-preference) { .v3-hero-rot__slide:not([hidden]) img { animation: v3-fade .5s ease-out; } }
.v3-hero-rot__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px; justify-items: start; padding: 60px 20px 20px; background: linear-gradient(transparent, rgba(10, 8, 16, .88)); color: #fff; }
.v3-hero-rot__title { font-family: var(--v3-font-display); font-size: 24px; font-weight: 700; line-height: 1.2; max-width: 90%; }
.v3-hero-rot__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; }
.v3-hero-rot__dots { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.v3-hero-rot__dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .45); transition: width .2s, background .2s; }
.v3-hero-rot__dots button[aria-selected="true"] { width: 22px; background: #fff; }

.v3-dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.v3-dstats > .v3-card { padding: 14px 16px; }
.v3-dcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v3-ranklist { margin: 0; padding: 6px; list-style: none; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); }
.v3-ranklist a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.v3-ranklist a:hover { background: var(--v3-surface-2); }
.v3-ranklist__n { width: 22px; text-align: right; font-size: 13px; color: var(--v3-muted); }
.v3-ranklist li:nth-child(-n+3) .v3-ranklist__n { color: var(--v3-brand); font-weight: 700; }
.v3-ranklist__name { flex: 1; min-width: 0; font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-ranklist__val { font-size: 12px; color: var(--v3-muted); }
.v3-userlist { padding: 6px 12px; }

@media (max-width: 699px) {
    .v3-dhead__title { font-size: 24px; }
    .v3-chipbar { margin-inline: -14px; padding-inline: 14px; }
    .v3-mgrid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 130px 130px; }
    .v3-mosaic__item--lead { grid-column: 1 / -1; grid-row: auto; }
    .v3-spots, .v3-forumtiles, .v3-dcols { grid-template-columns: 1fr; }
    .v3-hero-rot { margin-inline: -14px; border-radius: 0; }
    .v3-hero-rot__slide { height: 260px; }
    .v3-hero-rot__title { font-size: 19px; }
    .v3-dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v3-hero-rot__slide img, .v3-mosaic__item--lead img { object-position: center top; }

/* ── Explore v3.1: header, radar, masonry wall ────────────────────────── */
.v3-xhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.v3-xhead__title { font-family: var(--v3-font-display); font-size: 28px; font-weight: 700; line-height: 1.15; }
.v3-xsearch { flex: 0 1 340px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-muted); transition: border-color .15s, box-shadow .15s; }
.v3-xsearch:focus-within { border-color: var(--v3-brand); box-shadow: 0 0 0 3px var(--v3-brand-glow); }
.v3-xsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v3-text); font: 400 14px var(--v3-font); }
.v3-chipbar--moods { margin: 0 0 20px; }

.v3-radar { margin: 0 0 24px; }
.v3-radar .v3-dsec__head { flex-wrap: wrap; row-gap: 2px; }
.v3-radar__strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; }
.v3-radar__strip .v3-mtile { flex: none; height: 250px; width: auto; aspect-ratio: clamp(.55, var(--ar), 1.6); margin: 0; scroll-snap-align: start; }

.v3-masonry { columns: 3 180px; column-gap: 10px; }
.v3-masonry.is-laid { columns: auto; display: flex; gap: 10px; align-items: flex-start; }
.v3-masonry__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-mtile { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--v3-surface-2); aspect-ratio: var(--ar, 1); break-inside: avoid; margin-bottom: 10px; isolation: isolate; }
.v3-masonry.is-laid .v3-mtile { margin-bottom: 0; }
.v3-mtile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.v3-mtile:hover img { transform: scale(1.03); }
.v3-mtile__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; }
.v3-mtile__ph .v3-icon { font-size: 34px; }
.v3-mtile__ph--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.v3-mtile__ph--yt { background: linear-gradient(135deg, #FF3D3D, #B5001E); }
.v3-mtile__ph--none { background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-mgrid__item .v3-mtile__ph span { display: none; }
.v3-mtile.is-broken img, .v3-mgrid__item.is-broken img { visibility: hidden; }
.v3-mtile.is-broken::before, .v3-mgrid__item.is-broken::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--v3-surface-2) center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
.v3-mtile.is-broken .v3-mtile__cap { opacity: 1; transform: none; }
.v3-mtile:focus-visible { outline: 3px solid var(--v3-brand); outline-offset: 2px; }
.v3-mtile__play { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 16, .6); color: #fff; }
.v3-mtile__play svg { width: 14px; height: 14px; margin-left: 2px; }
.v3-mtile__heat { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: var(--v3-r-pill); background: linear-gradient(135deg, #F97316, #E11D48); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px rgba(225, 29, 72, .35); }
.v3-mtile__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 30px 10px 9px; background: linear-gradient(transparent, rgba(10, 8, 16, .8)); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.v3-mtile:hover .v3-mtile__cap, .v3-mtile:focus-visible .v3-mtile__cap { opacity: 1; transform: none; }
@media (hover: none) { .v3-mtile__cap { opacity: 1; transform: none; padding-top: 22px; } .v3-mtile__title { display: none; } }
.v3-mtile__title { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-mtile__meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .92; min-width: 0; }
.v3-mtile__meta .v3-avatar { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.v3-mtile__who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-mtile__likes { display: inline-flex; align-items: center; gap: 3px; flex: none; font-variant-numeric: tabular-nums; }
.v3-mtile__likes .v3-icon { font-size: 12px; }
.v3-masonry-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.v3-masonry-more[hidden] { display: none; }
.v3-skel--mtile { display: block; aspect-ratio: var(--ar); border-radius: 14px; }
@media (max-width: 699px) {
    .v3-xhead { flex-direction: column; align-items: stretch; gap: 10px; }
    .v3-xhead__title { font-size: 24px; }
    .v3-xsearch { flex: none; }
    .v3-radar__strip { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; scrollbar-width: none; }
    .v3-radar .v3-dsec__head, .v3-wall .v3-dsec__head { flex-direction: column; align-items: flex-start; gap: 2px; }
    .v3-radar__strip .v3-mtile { height: 210px; }
    .v3-masonry, .v3-masonry.is-laid, .v3-masonry__col { gap: 6px; }
    .v3-mtile { border-radius: 10px; }
    .v3-masonry-more { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ── Full-screen swipe viewer (v3/partials/viewer, js/v3-viewer.js) ───── */
.v3-viewer { position: fixed; inset: 0; z-index: 90; background: #07060b; color: #fff; }
.v3-viewer[hidden] { display: none; }
.v3-viewer__track { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.v3-viewer__track::-webkit-scrollbar { display: none; }
.v3-viewer__top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; pointer-events: none; }
.v3-viewer__top > * { pointer-events: auto; }
.v3-viewer__count { font-size: 13px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.v3-viewer__btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; backdrop-filter: blur(8px); }
.v3-viewer__btn:hover { background: rgba(255, 255, 255, .22); }
.v3-viewer__nav { margin-left: auto; display: flex; gap: 8px; }
@media (hover: none), (max-width: 699px) { .v3-viewer__nav { display: none; } }
@media (min-width: 700px) { .v3-viewer:has(.v3-vpost.is-cmts-open) .v3-viewer__nav { margin-right: 420px; } }
.v3-vslide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.v3-vslide__skel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.v3-vslide__skel .v3-skel { width: min(420px, 80vw); height: min(520px, 70vh); border-radius: 18px; --v3-text: #fff; }
.v3-vslide__ph { position: absolute; inset: 64px 90px 24px 24px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.v3-vslide__ph img { height: 100%; max-height: calc(100dvh - 120px); max-width: 100%; width: auto; object-fit: contain; border-radius: 12px; }
@media (max-width: 699px) { .v3-vslide__ph { inset: 0; } .v3-vslide__ph img { border-radius: 0; max-height: 100dvh; } }
.v3-vslide__gone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, .8); }

.v3-vpost { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
.v3-vpost__stage { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; padding: 64px 90px 24px 24px; min-height: 0; }
.v3-vpost__media { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.v3-vpost__media picture { display: contents; }
.v3-vpost__media img, .v3-vpost__fallback { max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 12px; user-select: none; -webkit-user-drag: none; }
.v3-vpost__embed { width: min(900px, 100%); border-radius: 12px; overflow: hidden; position: relative; }
.v3-vpost__embed.v3-embed--vertical { width: auto; height: min(78dvh, 720px); aspect-ratio: 9 / 16; max-width: 100%; }
.v3-vpost__embed.v3-embed--igclip { width: min(520px, 100%); height: 475px; max-height: 475px; aspect-ratio: auto; }
@media (max-width: 767px) { .v3-vpost__embed.v3-embed--igclip { height: 425px; } }
.v3-vpost__rail { position: absolute; z-index: 2; right: 18px; bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.v3-vpost__author { margin-bottom: 4px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.v3-vpost__author .v3-online { border-color: #07060b; }
.v3-vact { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.v3-vact__ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); font-size: 22px; backdrop-filter: blur(8px); transition: background .15s, transform .15s; }
.v3-vact:hover .v3-vact__ico { background: rgba(255, 255, 255, .22); }
.v3-vact:active .v3-vact__ico { transform: scale(.92); }
.v3-vact.v3-act--like.is-on .v3-vact__ico { color: #FB3B5F; }
.v3-vact.v3-act--like.is-on .v3-icon, .v3-vact.v3-act--save.is-on .v3-icon { fill: currentColor; }
.v3-vact.v3-act--save.is-on .v3-vact__ico { color: #C4B5FD; }
.v3-vact.is-open .v3-vact__ico { background: var(--v3-brand); }
.v3-vpost__info { position: absolute; z-index: 2; left: 0; right: 90px; bottom: 0; padding: 60px 24px 22px; background: linear-gradient(transparent, rgba(7, 6, 11, .85)); display: grid; gap: 4px; justify-items: start; pointer-events: none; }
.v3-vpost__info > * { pointer-events: auto; }
.v3-vpost__who .v3-uname__name { color: #fff; font-size: 15px; }
.v3-vpost__who:hover .v3-uname__name { text-decoration: underline; }
.v3-vpost__time { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.v3-vpost__title { margin: 4px 0 0; font-family: var(--v3-font-display); font-size: 19px; font-weight: 700; line-height: 1.25; max-width: 720px; }
.v3-vpost__caption { margin: 2px 0 0; max-width: 720px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; white-space: pre-line; }
.v3-vpost__caption.is-open { -webkit-line-clamp: unset; display: block; }
.v3-vpost__caption a, .v3-vpost__tags a { color: #C4B5FD; }
.v3-vpost__tags { margin: 2px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.v3-vpost .v3-heart-burst { z-index: 2; }

/* comments: side panel on desktop, bottom sheet on phones */
.v3-vpost__cpanel { display: none; position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: min(420px, 100%); flex-direction: column; background: var(--v3-surface); color: var(--v3-text); box-shadow: -12px 0 40px rgba(0, 0, 0, .4); }
.v3-vpost.is-cmts-open .v3-vpost__cpanel { display: flex; animation: v3-vpanel .2s ease-out; }
@keyframes v3-vpanel { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.v3-vpost__chead { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--v3-divider); font-family: var(--v3-font-display); font-weight: 700; font-size: 16px; }
.v3-vpost__cmts { flex: 1; overflow-y: auto; margin: 0 !important; padding: 14px 16px 18px !important; border-top: 0 !important; }
@media (min-width: 1000px) { .v3-vpost.is-cmts-open .v3-vpost__stage { padding-right: 520px; } .v3-vpost.is-cmts-open .v3-vpost__rail { right: 438px; } .v3-vpost.is-cmts-open .v3-vpost__info { right: 520px; } }

@media (max-width: 699px) {
    .v3-viewer__top { padding: 10px 12px; }
    .v3-vpost__stage { padding: 0; }
    .v3-vpost__media img, .v3-vpost__fallback { max-height: 100dvh; border-radius: 0; }
    .v3-vpost__media { width: 100%; justify-content: center; }
    .v3-vpost__rail { right: 10px; bottom: 140px; gap: 14px; }
    .v3-vact__ico { width: 44px; height: 44px; font-size: 21px; }
    .v3-vpost__info { right: 70px; padding: 70px 16px 18px; }
    .v3-vpost__title { font-size: 17px; }
    .v3-vpost__cpanel { top: auto; height: 72dvh; width: 100%; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
    .v3-vpost.is-cmts-open .v3-vpost__cpanel { animation-name: v3-vsheet; }
    @keyframes v3-vsheet { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .v3-vpost.is-cmts-open .v3-vpost__cpanel { animation: none; } .v3-mtile img { transition: none; } }
/* Sheets opened from inside the viewer (share, GIF picker, report, menus) sit above it. */
.v3-viewer-open .v3-backdrop { z-index: 92; }
.v3-viewer-open .v3-sheet, .v3-viewer-open .mention-dropdown { z-index: 93 !important; }

/* ══ v3.1 Community: hub, thread cards, thread page, reply box, polls ═════ */
.v3-chead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 4px; }
.v3-chead__title { font-family: var(--v3-font-display); font-size: 28px; font-weight: 700; line-height: 1.15; }
.v3-chead__sub { margin: 4px 0 0; color: var(--v3-muted); font-size: 14.5px; }
.v3-chead .v3-btn { flex: none; }
.v3-cfeed { margin-top: 14px; }
.v3-space-head { margin: 4px 0 12px; }
.v3-space-head__title { font-family: var(--v3-font-display); font-size: 20px; font-weight: 700; }
.v3-space-head__text { margin: 4px 0 0; color: var(--v3-text-3); font-size: 14px; line-height: 1.5; }

.v3-ttabs { display: flex; gap: 2px; border-bottom: 1px solid var(--v3-border); margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.v3-ttabs::-webkit-scrollbar { display: none; }
.v3-ttab { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--v3-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.v3-ttab:hover { color: var(--v3-text); }
.v3-ttab.is-active { color: var(--v3-text); border-bottom-color: var(--v3-brand); }

.v3-tlist { display: grid; gap: 12px; }
.v3-tlist--more:empty { display: none; }
.v3-tlist[aria-busy="true"] { pointer-events: none; }

/* Thread card: the whole card is one link (.v3-tcard__link stretched over it);
   inner links (space chip, Vote) sit above it. */
.v3-tcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); box-shadow: var(--v3-shadow-card); transition: border-color .15s, box-shadow .15s; }
.v3-tcard:hover { border-color: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-border)); }
.v3-tcard:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 30%, transparent); }
.v3-tcard.is-open { border-style: dashed; border-color: var(--v3-border-dash); }
.v3-tcard__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.v3-tcard__link:focus-visible { outline: none; }
.v3-tcard a:not(.v3-tcard__link) { position: relative; z-index: 2; }
.v3-tcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--v3-muted); }
.v3-tcard__by { min-width: 0; }
.v3-tcard__main { display: flex; gap: 16px; align-items: flex-start; }
.v3-tcard__text { flex: 1; min-width: 0; }
.v3-tcard__title { font-family: var(--v3-font-display); font-size: 17.5px; font-weight: 700; line-height: 1.3; color: var(--v3-text); overflow-wrap: anywhere; }
.v3-tcard__excerpt { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--v3-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-tcard__thumb { flex: none; width: 120px; height: 80px; object-fit: cover; border-radius: var(--v3-r-md); background: var(--v3-surface-2); }
.v3-tcard__poll { display: grid; gap: 6px; max-width: 520px; }
.v3-tcard__pollfoot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--v3-muted); }
.v3-tcard__vote { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 700; color: var(--v3-brand); }
.v3-tcard__answer { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--v3-r-md); background: color-mix(in srgb, var(--v3-ok) 11%, var(--v3-surface)); color: var(--v3-text-2); font-size: 13.5px; line-height: 1.45; }
.v3-tcard__answer b { color: var(--v3-text); }
.v3-tcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--v3-text-3); }
.v3-tcard__stat { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.v3-tcard__stat .v3-icon { font-size: 15px; }
.v3-tcard__rx { display: inline-flex; gap: 8px; font-variant-numeric: tabular-nums; }
.v3-tcard__last { margin-left: auto; font-size: 12.5px; color: var(--v3-muted); }
.v3-tnew { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--v3-r-pill); background: var(--v3-brand); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.v3-tcard--skel { gap: 14px; }
.v3-tcard--skel .v3-tcard__foot { gap: 8px; }

.v3-tbadge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--v3-text-2); background: var(--v3-surface-2); white-space: nowrap; }
.v3-tbadge .v3-icon { font-size: 13px; }
.v3-tbadge--pin { color: var(--v3-brand-ink); background: var(--v3-tint); }
.v3-tbadge--ok { color: var(--v3-ok); background: color-mix(in srgb, var(--v3-ok) 14%, transparent); }
.v3-tbadge--poll { color: var(--v3-brand-ink); background: var(--v3-tint); }
.v3-tbadge--open { color: var(--v3-warn); background: color-mix(in srgb, var(--v3-warn) 14%, transparent); }
.v3-tbadge--warn { color: var(--v3-warn); background: color-mix(in srgb, var(--v3-warn) 14%, transparent); }
.v3-tspace { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--v3-r-pill); background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 12px; font-weight: 600; }
.v3-tspace:hover { text-decoration: underline; }

.v3-stack { display: inline-flex; align-items: center; }
.v3-stack > *, .v3-stack .v3-avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--v3-surface); border-radius: 50%; }
.v3-stack > :first-child { margin-left: 0; }
.v3-stack--lg > * { margin-left: -9px; }

/* Poll bars (cards + results) */
.v3-pollbar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--v3-surface-2); overflow: hidden; font-size: 14px; font-weight: 600; color: var(--v3-text); list-style: none; }
.v3-pollbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--v3-brand) 16%, transparent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.v3-pollbar.is-mine::before { background: color-mix(in srgb, var(--v3-brand) 28%, transparent); }
.v3-pollbar > * { position: relative; }
.v3-pollbar__label { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.v3-pollbar__label .v3-icon { color: var(--v3-brand); }
.v3-pollbar__pct { font-variant-numeric: tabular-nums; color: var(--v3-text-2); }

/* Rails */
.v3-rail-note { margin: 0 0 8px; font-size: 13px; color: var(--v3-muted); line-height: 1.45; }
.v3-rthread { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; color: var(--v3-text); border-top: 1px solid var(--v3-divider); }
.v3-rthread:first-of-type { border-top: 0; }
.v3-rthread:hover .v3-rthread__title { color: var(--v3-brand); }
.v3-rthread__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-rthread__meta { flex: none; font-size: 12px; color: var(--v3-muted); }
.v3-rthread .v3-tnew { margin-left: 0; }
.v3-rperson { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.v3-rperson__name { flex: 1; min-width: 0; font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-rperson__stat { flex: none; font-size: 12.5px; color: var(--v3-muted); }
.v3-rperson__stat .is-ok { color: var(--v3-ok); font-weight: 700; margin-right: 4px; }
.v3-rspace { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--v3-text-2); }
.v3-rspace:hover { color: var(--v3-brand); }
.v3-rspace__n { flex: none; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-rspace__n .is-open { color: var(--v3-warn); }
.v3-tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--v3-text-2); line-height: 1.45; }

/* ── Thread page ── */
.v3-thread { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.v3-top { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); box-shadow: var(--v3-shadow-card); }
.v3-top__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3-top__views { font-size: 12.5px; color: var(--v3-muted); }
.v3-top__title { font-family: var(--v3-font-display); font-size: 27px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.v3-top__head { display: flex; align-items: center; gap: 12px; }
.v3-top__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-top__time { font-size: 13px; color: var(--v3-muted); }
.v3-top__body { font-size: 15.5px; }
.v3-top__acts { border-top: 1px solid var(--v3-divider); padding-top: 10px; }
.v3-follow-thread { flex: none; gap: 6px; border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text-2); }
.v3-follow-thread.is-on { background: var(--v3-tint); border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); color: var(--v3-brand-ink); }
.v3-follow-thread__n:empty { display: none; }
.v3-follow-thread__n { font-variant-numeric: tabular-nums; opacity: .75; }
.v3-ttags { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-ttag { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 13px; font-weight: 600; }
.v3-ttag:hover { color: var(--v3-brand); }

.v3-poll { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--v3-r-lg); background: var(--v3-surface-2); border: 1px solid var(--v3-border); scroll-margin-top: 90px; }
.v3-poll__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-brand-ink); }
.v3-poll__results { margin: 0; padding: 0; display: grid; gap: 6px; }
.v3-poll__results .v3-pollbar { background: var(--v3-surface); }
.v3-poll__form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.v3-poll__form .v3-btn { margin-top: 10px; }
.v3-poll__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--v3-r-md); border: 1.5px solid var(--v3-border); background: var(--v3-surface); font-size: 15px; font-weight: 600; cursor: pointer; }
.v3-poll__opt:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-poll__opt:has(input:checked) { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-poll__opt input { accent-color: var(--v3-brand); width: 18px; height: 18px; margin: 0; }
.v3-poll__foot { margin: 0; font-size: 12.5px; color: var(--v3-muted); }

.v3-answer { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-radius: var(--v3-r-xl); background: var(--v3-surface); border: 1.5px solid color-mix(in srgb, var(--v3-ok) 45%, var(--v3-border)); scroll-margin-top: 90px; }
.v3-answer__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v3-ok); }

.v3-rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; scroll-margin-top: 90px; }
.v3-rhead__title { flex: 1; font-family: var(--v3-font-display); font-size: 18px; font-weight: 700; }
.v3-rsort { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-rsort__item { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--v3-r-pill); font-size: 13px; font-weight: 600; color: var(--v3-text-3); }
.v3-rsort__item.is-active { background: var(--v3-surface); color: var(--v3-text); box-shadow: var(--v3-shadow-card); }

.v3-replies { display: flex; flex-direction: column; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); box-shadow: var(--v3-shadow-card); }
.v3-replies:empty { display: none; }
.v3-replies > .v3-fpost { padding: 18px 20px; border-top: 1px solid var(--v3-divider); }
.v3-replies > .v3-fpost:first-child, .v3-replies > .v3-newline + .v3-fpost { border-top: 0; }
.v3-replies-more { align-self: center; }
.v3-replies-empty { margin: 0; padding: 24px; text-align: center; color: var(--v3-muted); background: var(--v3-surface); border: 1px dashed var(--v3-border-dash); border-radius: var(--v3-r-xl); }
.v3-newline { display: flex; align-items: center; gap: 10px; padding: 6px 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand); scroll-margin-top: 120px; }
.v3-newline::before, .v3-newline::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--v3-brand) 45%, transparent); }

/* One post (reply, nested reply or the best-answer copy) */
.v3-fpost { display: flex; gap: 12px; scroll-margin-top: 110px; }
.v3-fpost__av { position: relative; display: block; flex: none; align-self: flex-start; width: var(--av); height: var(--av); line-height: 0; border-radius: 50%; }
.v3-fpost__main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v3-fpost__main > .v3-fpost__head { padding-right: 34px; }
.v3-fpost__main > .v3-fpost__head > .v3-fpost__more { position: absolute; top: -6px; right: -6px; }
.v3-fpost__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
.v3-fpost__name { font-weight: 700; color: var(--v3-text); min-width: 0; }
.v3-fpost__time { font-size: 12.5px; color: var(--v3-muted); }
.v3-fpost__time:hover { text-decoration: underline; }
.v3-fpost__edited { font-size: 12px; color: var(--v3-faint); }
.v3-fpost__more { margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--v3-text-3); font-size: 18px; }
.v3-fpost__more:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-top__head .v3-fpost__more { margin-left: 0; }
.v3-fpost__body { font-size: 15px; line-height: 1.6; color: var(--v3-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.v3-fpost__body a { color: var(--v3-brand); }
.v3-fpost__body a:hover { text-decoration: underline; }
.v3-fpost__body .yt-embed-wrap, .v3-fpost__body iframe { white-space: normal; max-width: 100%; }
.v3-fpost__gone { color: var(--v3-muted); }
.v3-fquote { display: block; margin: 2px 0 6px; padding: 8px 12px; border-left: 3px solid color-mix(in srgb, var(--v3-brand) 55%, transparent); border-radius: 0 10px 10px 0; background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 14px; }
.v3-fpost__gif { max-width: min(320px, 100%); border-radius: var(--v3-r-md); display: block; }
.v3-fpost__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: -8px; }
.v3-fact { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: var(--v3-r-pill); font-size: 13px; font-weight: 600; color: var(--v3-text-3); font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.v3-fact .v3-icon { font-size: 16px; }
.v3-fact:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-fact.is-on { color: var(--v3-brand); }
.v3-fact--like:hover, .v3-fact--like.is-on { color: #E11D48; }
.v3-fact--like.is-on .v3-icon { fill: currentColor; }
.v3-fact--like.is-pop .v3-icon { animation: v3-like-pop .45s cubic-bezier(.2,.8,.2,1); }
.v3-fact--solve.is-on { color: var(--v3-ok); }
.v3-fpost__kids { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--v3-divider); }
.v3-fpost__kids:empty { display: none; }
.v3-fpost.is-nested .v3-fpost__body { font-size: 14.5px; }
.v3-fpost.is-hidden > .v3-fpost__main { opacity: .6; }
.v3-fpost.is-flash, .v3-top.is-flash { animation: v3-flash 1.6s ease-out; }
@keyframes v3-flash { 0%, 30% { background-color: color-mix(in srgb, var(--v3-brand) 12%, transparent); } 100% { background-color: transparent; } }
.v3-fpost--skel { padding: 18px 20px; }
.v3-fedit { display: grid; gap: 8px; }
.v3-fedit__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* Reactions */
.v3-rx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.v3-rx__pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: var(--v3-r-pill); border: 1px solid var(--v3-border); background: var(--v3-surface); font-size: 13px; font-weight: 600; color: var(--v3-text-2); font-variant-numeric: tabular-nums; }
.v3-rx__pill:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-rx__pill.is-on { background: var(--v3-tint); border-color: color-mix(in srgb, var(--v3-brand) 50%, var(--v3-border)); color: var(--v3-brand-ink); }
.v3-rx__add { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v3-r-pill); color: var(--v3-text-3); font-size: 16px; }
.v3-rx__add:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-rxpop { position: absolute; z-index: 80; display: flex; gap: 2px; padding: 5px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); animation: v3-rxpop .14s ease-out; }
.v3-rxpop button { width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; transition: transform .12s, background .12s; }
.v3-rxpop button:hover, .v3-rxpop button:focus-visible { background: var(--v3-surface-2); transform: scale(1.18); outline: none; }
@keyframes v3-rxpop { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* Reply box: sticks to the bottom of the column while you read */
.v3-rbox { position: sticky; bottom: 12px; z-index: 5; display: grid; gap: 8px; padding: 10px 12px; background: var(--v3-surface); border: 1px solid color-mix(in srgb, var(--v3-brand) 35%, var(--v3-border)); border-radius: var(--v3-r-xl); box-shadow: var(--v3-shadow-pop); }
.v3-rbox--note { display: flex; align-items: center; gap: 8px; color: var(--v3-text-2); font-size: 14px; font-weight: 600; justify-content: center; min-height: 48px; }
a.v3-rbox--note:hover { color: var(--v3-brand); }
.v3-rbox__row { display: flex; align-items: flex-end; gap: 8px; }
.v3-rbox__me { flex: none; margin-bottom: 4px; }
.v3-rbox__field { flex: 1; min-width: 0; position: relative; }
.v3-rbox__input { width: 100%; min-height: 40px; max-height: 260px; resize: none; overflow-y: auto; scrollbar-width: none; border: 0; outline: 0; background: transparent; padding: 9px 4px; font: inherit; font-size: 15px; line-height: 1.45; color: var(--v3-text); }
.v3-rbox__tool { flex: none; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 10px; color: var(--v3-text-3); font-size: 18px; margin-bottom: 2px; }
.v3-rbox__tool:hover, .v3-rbox__tool.is-on { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-rbox__tool--wide { font-size: 13.5px; font-weight: 600; }
.v3-rbox__tool--wide .v3-icon { font-size: 16px; }
.v3-rbox__gifword { font-size: 11px; font-weight: 800; letter-spacing: .03em; border: 1.5px solid currentColor; border-radius: 5px; padding: 1px 4px; }
.v3-rbox .v3-btn { margin-bottom: 2px; }
.v3-rbox__to { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v3-text-3); padding: 0 4px; }
.v3-rbox__to b { color: var(--v3-text); }
.v3-rbox__x { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--v3-text-3); }
.v3-rbox__x:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-rbox__to .v3-rbox__x { margin-left: auto; }
.v3-rbox__gif { position: relative; display: inline-flex; justify-self: start; }
.v3-rbox__gif[hidden] { display: none; }
.v3-rbox__gif img { max-height: 120px; border-radius: 10px; }
.v3-rbox__gif .v3-rbox__x { position: absolute; top: 4px; right: 4px; background: rgba(15, 12, 21, .7); color: #fff; }

.v3-newpill { position: fixed; z-index: 30; left: 50%; bottom: 96px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--v3-r-pill); background: var(--v3-text); color: var(--v3-bg); font-size: 13.5px; font-weight: 700; box-shadow: var(--v3-shadow-pop); animation: v3-rxpop .2s ease-out; }
.v3-newpill[hidden] { display: none; }

/* New thread form */
.v3-tnew-form { display: grid; gap: 18px; padding: 22px 24px; }
.v3-tnew-form__title { font-family: var(--v3-font-display); font-size: 24px; font-weight: 700; }
.v3-field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.v3-field[hidden] { display: none; }
.v3-field__hint { margin: 0; font-size: 12px; color: var(--v3-muted); text-align: right; font-variant-numeric: tabular-nums; }
.v3-field__err { margin: 0; font-size: 13px; font-weight: 600; color: var(--v3-hot); }
.v3-label__opt { font-weight: 500; color: var(--v3-muted); }
.v3-spacepick { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-spacepick__opt { position: relative; cursor: pointer; }
.v3-spacepick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.v3-spacepick__opt span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--v3-r-pill); border: 1.5px solid var(--v3-border); background: var(--v3-surface); font-size: 14px; font-weight: 600; color: var(--v3-text-2); }
.v3-spacepick__opt:hover span { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-spacepick__opt input:checked + span { background: var(--v3-brand-grad); border-color: transparent; color: #fff; }
.v3-spacepick__opt input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 35%, transparent); }
.v3-tnew-form__tools { display: flex; gap: 4px; }
.v3-pollbuild__opts { display: grid; gap: 8px; }
.v3-pollbuild__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.v3-pollbuild__len { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--v3-text-2); }
.v3-input--sm { height: 36px; padding: 0 10px; width: auto; }
.v3-tnew-form__foot { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 699px) {
    .v3-chead { align-items: center; }
    .v3-chead__title { font-size: 24px; }
    .v3-chead__sub { display: none; }
    .v3-chead .v3-btn { height: 40px; padding: 0 14px; }
    .v3-tcard { padding: 14px; border-radius: var(--v3-r-md); }
    .v3-tcard__title { font-size: 16.5px; }
    .v3-tcard__thumb { width: 84px; height: 64px; }
    .v3-tcard__last { display: none; }
    .v3-top { padding: 16px; border-radius: var(--v3-r-lg); }
    .v3-top__title { font-size: 22px; }
    .v3-follow-thread .v3-follow-thread__n { display: none; }
    /* Phone: icon-only Follow (label stays for screen readers) so the author line keeps its width. */
    .v3-follow-thread { width: 36px; padding: 0; justify-content: center; }
    .v3-follow-thread [data-v3-tfollow-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .v3-top__head { flex-wrap: nowrap; }
    .v3-top__who .v3-uname__handle { display: none; }
    .v3-rbox__me, .v3-rbox [data-v3-emoji-open] { display: none; }
    .v3-rbox__row { gap: 4px; }
    .v3-replies > .v3-fpost { padding: 14px; }
    .v3-fpost__kids { padding-left: 10px; }
    .v3-answer { padding: 14px; }
    .v3-rbox { bottom: calc(var(--v3-tabbar-h) + 8px); margin-inline: -6px; }
    .v3-newpill { bottom: calc(var(--v3-tabbar-h) + 84px); }
    .v3-tnew-form { padding: 16px; border-radius: var(--v3-r-md); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-fpost.is-flash, .v3-top.is-flash, .v3-rxpop, .v3-newpill { animation: none; }
    .v3-pollbar::before { transition: none; }
}

/* ══ v3.1 Search ═══════════════════════════════════════════════════════════ */
.v3-sbar { position: sticky; top: calc(var(--v3-stick) + 10px); z-index: 6; margin: 0 0 14px; }
.v3-sbar__field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 18px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1.5px solid var(--v3-border); box-shadow: var(--v3-shadow-card); color: var(--v3-text-3); font-size: 20px; transition: border-color .15s, box-shadow .15s; }
.v3-sbar__field:focus-within { border-color: var(--v3-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-sbar__field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 500; color: var(--v3-text); }
.v3-sbar__field input::-webkit-search-cancel-button { display: none; }
.v3-sbar__field input::placeholder { color: var(--v3-faint); font-weight: 400; }
.v3-sbar__clear { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--v3-text-3); font-size: 18px; }
.v3-sbar__clear:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-sbar__clear[hidden] { display: none; }

.v3-sresults { display: flex; flex-direction: column; gap: 22px; min-height: 40vh; }
.v3-sresults > .v3-stabs { margin-bottom: -8px; }
.v3-sresults__skel { display: grid; gap: 16px; }
.v3-sresults[aria-busy="true"] .v3-sdisc { opacity: .55; transition: opacity .2s; }
.v3-stab__n { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-ttab.is-active .v3-stab__n { color: var(--v3-brand); }
.v3-ttab.is-empty { color: var(--v3-faint); }

.v3-ssort { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); border: 1px solid var(--v3-border); margin-bottom: -8px; }
.v3-ssort__item { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--v3-r-pill); font-size: 13px; font-weight: 600; color: var(--v3-text-3); }
.v3-ssort__item.is-active { background: var(--v3-surface); color: var(--v3-text); box-shadow: var(--v3-shadow-card); }

/* Discovery (no query) */
.v3-sdisc { display: flex; flex-direction: column; gap: 26px; }
.v3-sdisc__sec[hidden] { display: none; }
.v3-sdisc__clear { font-size: 13px; font-weight: 600; color: var(--v3-brand); }
.v3-sdisc__clear:hover { text-decoration: underline; }
.v3-schips { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-schip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); font-size: 14px; font-weight: 600; color: var(--v3-text); }
.v3-schip:hover { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); color: var(--v3-brand-ink); }
.v3-schip > span { font-size: 12px; font-weight: 600; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-schip--soft { background: var(--v3-tint); border-color: transparent; color: var(--v3-brand-ink); }
.v3-schip--recent { padding: 0 4px 0 14px; }
.v3-schip--recent a { color: inherit; }
.v3-schip--recent button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--v3-text-3); font-size: 14px; }
.v3-schip--recent button:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-schip mark, .v3-srow mark, .v3-search__title mark, .v3-search__sub mark { background: color-mix(in srgb, var(--v3-brand) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Top tab */
.v3-stop { display: flex; flex-direction: column; }
.v3-stop .v3-dsec__head { margin-bottom: 10px; }
.v3-stop__tags { margin-bottom: -6px; }
.v3-shero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--v3-surface); border: 1px solid color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); border-radius: var(--v3-r-xl); box-shadow: var(--v3-shadow-card); }
.v3-shero--skel { border-color: var(--v3-border); }
.v3-shero__av { flex: none; }
.v3-shero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v3-shero__name { font-size: 18px; }
.v3-shero__name .v3-uname__name { font-family: var(--v3-font-display); }
.v3-shero__bio { margin: 0; font-size: 14px; color: var(--v3-text-2); line-height: 1.45; }
.v3-shero__stats { margin: 0; display: flex; gap: 14px; font-size: 13px; color: var(--v3-muted); }
.v3-shero__stats b { color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-shero__acts { flex: none; display: flex; flex-direction: column; gap: 8px; }

/* Rows (people, posts, collectives) */
.v3-slist { display: flex; flex-direction: column; }
.v3-slist--card, .v3-sresults > .v3-slist { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); box-shadow: var(--v3-shadow-card); }
.v3-srow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--v3-divider); color: var(--v3-text); }
.v3-srow:first-child { border-top: 0; }
a.v3-srow:hover, .v3-srow--person:hover { background: var(--v3-surface-2); }
.v3-slist > .v3-srow:first-child { border-radius: var(--v3-r-lg) var(--v3-r-lg) 0 0; }
.v3-slist > .v3-srow:last-child { border-radius: 0 0 var(--v3-r-lg) var(--v3-r-lg); }
.v3-srow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.v3-srow__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 15px; }
.v3-srow__sub { font-size: 13px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-srow__head { font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.v3-srow__head span { font-size: 12.5px; color: var(--v3-muted); }
.v3-srow__text { font-size: 14.5px; line-height: 1.5; color: var(--v3-text-2); overflow-wrap: anywhere; }
.v3-srow--post { align-items: flex-start; }
.v3-smore:empty, .v3-smore[hidden] { display: none; }
.v3-smore .v3-urow, .v3-sresults__skel .v3-urow { padding: 12px 16px; }

@media (max-width: 699px) {
    .v3-sbar { top: 8px; margin-inline: -4px; }
    .v3-topbar:not(.is-hidden) ~ .v3-shell .v3-sbar { top: calc(var(--v3-stick) + 8px); }
    .v3-sbar__field { height: 48px; padding-left: 14px; }
    .v3-sbar__field input { font-size: 16px; }
    .v3-shero { flex-wrap: wrap; padding: 14px; }
    .v3-shero__acts { flex-direction: row; width: 100%; }
    .v3-shero__acts > * { flex: 1; justify-content: center; }
    .v3-srow { padding: 12px; }
}

/* ══ v3.1 Leaderboard / Saved / Notifications ════════════════════════════ */
.v3-chead__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.v3-lb, .v3-saved, .v3-notifs { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; min-height: 40vh; }
.v3-region-skel { display: grid; gap: 12px; }
.v3-region-skel .v3-skel-row, .v3-region-skel .v3-urow { padding: 10px 14px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); }

/* Leaderboard: your standing */
.v3-lbme { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--v3-r-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--v3-brand) 14%, var(--v3-surface)), var(--v3-surface)); border: 1px solid color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-lbme__main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.v3-lbme__rank b { font-family: var(--v3-font-display); font-size: 26px; color: var(--v3-text); }
.v3-lbme__rank span { font-size: 13.5px; color: var(--v3-text-3); }
.v3-lbme__gap { margin: 0; font-size: 14px; color: var(--v3-text-2); }
.v3-lbme__gap b { color: var(--v3-brand-ink); }
.v3-lbme__lvl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v3-text-3); }
.v3-lbme__lvlname { font-weight: 700; color: var(--v3-text-2); }
.v3-lbme__bar { height: 8px; border-radius: 999px; background: var(--v3-surface-2); overflow: hidden; }
.v3-lbme__bar span { display: block; height: 100%; border-radius: inherit; background: var(--v3-brand-grad); }

/* Podium: 2 · 1 · 3 */
.v3-podium { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; }
.v3-podium__spot { display: flex; flex-direction: column; align-items: stretch; }
.v3-podium__who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px 12px; text-align: center; color: var(--v3-text); position: relative; }
.v3-podium__medal { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.v3-podium__spot.is-1 .v3-podium__medal { background: none; color: #F5B301; font-size: 30px; width: 36px; height: 36px; }
.v3-podium__spot.is-2 .v3-podium__medal { background: #9AA4B2; }
.v3-podium__spot.is-3 .v3-podium__medal { background: #B7743D; }
.v3-podium__av { border-radius: 50%; box-shadow: 0 0 0 3px var(--v3-surface), 0 0 0 6px var(--ring, var(--v3-border)); margin-bottom: 6px; }
.v3-podium__spot.is-1 { --ring: #F5B301; }
.v3-podium__spot.is-2 { --ring: #9AA4B2; }
.v3-podium__spot.is-3 { --ring: #B7743D; }
.v3-podium__name { font-weight: 800; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-podium__lvl { font-size: 11.5px; font-weight: 700; color: var(--v3-brand-ink); }
.v3-podium__xp { font-family: var(--v3-font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-podium__xp small { font-size: 12px; color: var(--v3-muted); font-family: var(--v3-font); }
.v3-podium__step { display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; border-radius: 14px 14px 6px 6px; font-family: var(--v3-font-display); font-size: 22px; font-weight: 700; color: color-mix(in srgb, var(--ring) 80%, var(--v3-text)); background: linear-gradient(180deg, color-mix(in srgb, var(--ring) 26%, var(--v3-surface)), color-mix(in srgb, var(--ring) 8%, var(--v3-surface))); border: 1px solid color-mix(in srgb, var(--ring) 35%, var(--v3-border)); }
.v3-podium__spot.is-1 .v3-podium__step { height: 92px; }
.v3-podium__spot.is-2 .v3-podium__step { height: 64px; }
.v3-podium__spot.is-3 .v3-podium__step { height: 46px; }
.v3-podium__spot.is-me .v3-podium__name::after { content: " (you)"; color: var(--v3-brand); font-weight: 700; }

/* Ranked list */
.v3-lbl { list-style: none; margin: 0; padding: 0; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); box-shadow: var(--v3-shadow-card); overflow: hidden; }
.v3-lbl__row + .v3-lbl__row { border-top: 1px solid var(--v3-divider); }
.v3-lbl__row.is-me { background: color-mix(in srgb, var(--v3-brand) 9%, var(--v3-surface)); }
.v3-lbl__link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--v3-text); }
.v3-lbl__link:hover { background: var(--v3-surface-2); }
.v3-lbl__rank { width: 32px; flex: none; text-align: center; font-weight: 800; font-size: 15px; color: var(--v3-text-3); font-variant-numeric: tabular-nums; }
.v3-lbl__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v3-lbl__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; }
.v3-lbl__sub { font-size: 12.5px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-lbl__you { height: 18px; padding: 0 6px; border-radius: 5px; background: var(--v3-brand); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; }
.v3-lbl__xp { flex: none; font-weight: 800; font-size: 15px; color: var(--v3-brand-ink); font-variant-numeric: tabular-nums; }
.v3-lbl__xp small { font-size: 11px; color: var(--v3-muted); font-weight: 600; }
.v3-lbl__gap { padding: 4px 0; text-align: center; color: var(--v3-faint); letter-spacing: .3em; border-top: 1px solid var(--v3-divider); }

.v3-earn { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
.v3-earn li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--v3-text-2); }
.v3-earn b { color: var(--v3-ok); font-variant-numeric: tabular-nums; }
.v3-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.v3-ladder li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 13px; color: var(--v3-text-3); }
.v3-ladder li.is-done { color: var(--v3-faint); }
.v3-ladder li.is-me { background: var(--v3-tint); color: var(--v3-brand-ink); font-weight: 700; }
.v3-ladder__lvl { font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.v3-ladder__xp { font-variant-numeric: tabular-nums; font-size: 12px; }

/* Saved */
.v3-savedbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; }
.v3-savedbar__search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-text-3); font-size: 16px; }
.v3-savedbar__search:focus-within { border-color: var(--v3-brand); }
.v3-savedbar__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--v3-text); }
.v3-savedbar .v3-ssort { margin: 0; }
.v3-saved-list { display: flex; flex-direction: column; gap: 10px; }
.v3-saved-item { position: relative; }
.v3-saved-item--row { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); }
.v3-saved-item--row .v3-srow { padding-right: 56px; border-radius: inherit; }
.v3-saved-x { position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--v3-brand); background: var(--v3-surface); font-size: 18px; }
.v3-saved-x .v3-icon { fill: currentColor; }
.v3-saved-x:hover { background: var(--v3-tint); }
.v3-saved-x:hover .v3-icon { fill: none; }
.v3-saved-gone { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--v3-r-lg); border: 1px dashed var(--v3-border-dash); color: var(--v3-muted); font-size: 14px; }
.v3-saved-gone span { flex: 1; }
.v3-saved-clean { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 13.5px; }
.v3-saved-clean span { flex: 1 1 240px; }
.v3-saved-note { margin: 8px 0 0; font-size: 13px; color: var(--v3-muted); }
.v3-saved-note a { color: var(--v3-brand); font-weight: 600; }

/* Notifications */
.v3-nbar { margin-bottom: -6px; }
.v3-ndot { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.v3-nlist { display: flex; flex-direction: column; gap: 2px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); padding: 6px; box-shadow: var(--v3-shadow-card); }
.v3-nday { margin: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-muted); font-family: var(--v3-font); }
.v3-nday:first-child { margin-top: 4px; }
.v3-nrow { position: relative; display: flex; align-items: center; gap: 8px; }
.v3-nrow > .v3-notif { flex: 1; min-width: 0; }
.v3-nrow__follow { flex: none; margin-right: 8px; }
.v3-nlist .v3-notif { padding: 12px; }
.v3-notif__stack { position: relative; display: block; width: 40px; height: 40px; }
.v3-notif__stack .v3-avatar { position: absolute; box-shadow: 0 0 0 2px var(--v3-surface); border-radius: 50%; }
.v3-notif__stack .v3-avatar:first-child { left: 0; top: 0; }
.v3-notif__stack .v3-avatar:last-child { right: 0; bottom: 0; }
.v3-notif__type--circle-check { background: var(--v3-ok); }
.v3-notif__type--repeat-2 { background: #059669; }

@media (max-width: 699px) {
    .v3-podium { gap: 6px; }
    .v3-podium__name { font-size: 13.5px; }
    .v3-podium__xp { font-size: 16px; }
    .v3-podium__lvl { display: none; }
    .v3-lbme { padding: 14px; gap: 12px; align-items: flex-start; }
    .v3-lbme__lvl { grid-template-columns: 1fr; gap: 4px; }
    .v3-lbl__link { padding: 10px 12px; gap: 10px; }
}

/* Leaderboard: rail content folded under the board when the rail is hidden */
.v3-lbinfo { display: none; margin-top: 18px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); }
.v3-lbinfo > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14.5px; color: var(--v3-text); }
.v3-lbinfo > summary::-webkit-details-marker { display: none; }
.v3-lbinfo > summary .v3-icon:last-child { margin-left: auto; transition: transform .2s; color: var(--v3-muted); }
.v3-lbinfo[open] > summary .v3-icon:last-child { transform: rotate(180deg); }
.v3-lbinfo__body { display: grid; gap: 12px; padding: 0 12px 12px; }
.v3-lbinfo__body .v3-card { box-shadow: none; background: var(--v3-surface-2); border-color: transparent; padding: 14px; }
.v3-lbinfo__body .v3-ladder { max-height: none; }
@media (max-width: 1199px) { .v3-lbinfo { display: block; } }
.v3-lbme--guest { align-items: center; }
.v3-lbme__guesticon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--v3-tint); color: var(--v3-brand); font-size: 22px; }
@media (max-width: 699px) { .v3-lbme--guest { flex-wrap: wrap; } .v3-lbme--guest .v3-lbme__main { flex-basis: calc(100% - 60px); } }

/* ══ v3.1 Messages ═══════════════════════════════════════════════════════ */
/* Fill pages: the main column takes the rail's space and the screen height. */
.v3-shell:has(.v3-main--fill) { padding-bottom: 24px; }
@media (max-width: 1199px) { .v3-shell:has(.v3-main--fill) { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 1023px) { .v3-shell:has(.v3-main--fill) { grid-template-columns: 76px minmax(0, 1fr); } }

.v3-dm {
    display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
    height: calc(var(--v3-dm-vh, 100dvh) - var(--v3-topbar-h) - 48px); min-height: 460px;
    background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl);
    box-shadow: var(--v3-shadow-card); overflow: hidden;
}
.v3-dm__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--v3-divider); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.v3-dm__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* Inbox pane */
.v3-dml__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 10px 20px; background: var(--v3-surface); }
.v3-dml__title { font-family: var(--v3-font-display); font-size: 22px; font-weight: 800; }
.v3-dml__search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 14px 10px; padding: 0 14px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); border: 1px solid transparent; color: var(--v3-text-3); font-size: 15px; }
.v3-dml__search:focus-within { border-color: var(--v3-brand); background: var(--v3-surface); }
.v3-dml__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--v3-text); }
.v3-dml__tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--v3-divider); }
.v3-dml__tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--v3-r-pill); font-size: 14px; font-weight: 700; color: var(--v3-text-3); }
.v3-dml__tab:hover { background: var(--v3-surface-2); }
.v3-dml__tab.is-active { background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-dml__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.v3-dml__rows { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.v3-dml__rows .v3-empty { margin: 24px 8px; }
.v3-dml__more { padding: 0 6px; }

.v3-dmrow { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--v3-text); }
.v3-dmrow:hover { background: var(--v3-surface-2); }
.v3-dmrow.is-active { background: var(--v3-tint); }
.v3-dmrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-dmrow__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v3-dmrow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.v3-dmrow__muted { flex: none; font-size: 13px; color: var(--v3-muted); }
.v3-dmrow__time { flex: none; margin-left: auto; font-size: 12px; color: var(--v3-muted); }
.v3-dmrow__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--v3-muted); }
.v3-dmrow__typing { color: var(--v3-brand-ink); font-weight: 600; }
.v3-dmrow__seen { color: var(--v3-faint); }
.v3-dmrow__badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.v3-dmrow.is-unread .v3-dmrow__name { font-weight: 800; }
.v3-dmrow.is-unread .v3-dmrow__sub { color: var(--v3-text); font-weight: 600; }
.v3-dmrow.is-unread .v3-dmrow__time { color: var(--v3-brand-ink); font-weight: 700; }
.v3-dmrow--skel:hover { background: none; }

/* Chat pane */
.v3-dm-welcome { margin: auto; max-width: 360px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.v3-dm-welcome__art { width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--v3-brand); background: var(--v3-tint); }
.v3-dm-welcome h2 { font-family: var(--v3-font-display); font-size: 21px; }
.v3-dm-welcome p { margin: 0 0 6px; font-size: 14px; color: var(--v3-muted); }

.v3-dmt { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.v3-dmt__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--v3-divider); background: var(--v3-surface); }
.v3-dmt__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--v3-text); }
.v3-dmt__id { min-width: 0; display: flex; flex-direction: column; }
.v3-dmt__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15.5px; font-weight: 700; }
.v3-dmt__status { font-size: 12.5px; color: var(--v3-muted); }
.v3-dmt__muted { flex: none; color: var(--v3-muted); font-size: 16px; }
@media (min-width: 900px) { .v3-dmt__back { display: none; } }

.v3-dmt__scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.v3-dmt__scroll::before { content: ''; margin-top: auto; } /* few messages sit at the bottom */
.v3-dmt__intro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 26px; text-align: center; }
.v3-dmt__introname { margin-top: 8px; font-size: 18px; font-weight: 800; }
.v3-dmt__introhandle { margin-bottom: 10px; font-size: 13.5px; color: var(--v3-muted); }
.v3-dmt__older { height: 1px; flex: none; }
.v3-dmt__msgs { display: flex; flex-direction: column; gap: 2px; }
.v3-dmt__msgs--skel { gap: 10px; margin-top: auto; }
.v3-dmsk { display: flex; }
.v3-dmsk.is-mine { justify-content: flex-end; }
.v3-dmday { margin: 16px 0 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--v3-muted); }
.v3-dmnew { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--v3-brand-ink); }
.v3-dmnew::before, .v3-dmnew::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--v3-brand) 35%, transparent); }
.v3-dmt__seen { align-self: flex-end; margin: 4px 4px 0; font-size: 12px; color: var(--v3-muted); }
.v3-dmt__pill { position: absolute; left: 50%; bottom: 86px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--v3-shadow-pop); }

/* Bubbles */
.v3-msg { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.v3-msg.is-first { margin-top: 8px; }
.v3-msg.is-mine { flex-direction: row-reverse; }
.v3-msg__av { flex: none; width: 28px; align-self: flex-end; visibility: hidden; line-height: 0; }
.v3-msg.is-last .v3-msg__av, .v3-msg.is-typing .v3-msg__av { visibility: visible; }
.v3-msg__col { display: flex; flex-direction: column; min-width: 0; max-width: min(72%, 520px); }
.is-mine > .v3-msg__col { align-items: flex-end; }
.is-theirs > .v3-msg__col { align-items: flex-start; }
.v3-msg__stack { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.is-mine .v3-msg__stack { align-items: flex-end; }
.is-theirs .v3-msg__stack { align-items: flex-start; }
.v3-msg__bubble { max-width: 100%; padding: 9px 14px; border-radius: 20px; background: var(--v3-surface-2); color: var(--v3-text); font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.v3-msg__bubble iframe { display: block; max-width: 100%; border-radius: 12px; margin: 4px 0; }
.is-mine .v3-msg__bubble { background: var(--v3-brand-grad); color: #fff; }
.is-mine .v3-msg__bubble a, .is-mine .v3-msg__bubble .mention-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.is-theirs .v3-msg__bubble a { color: var(--v3-brand-ink); }
.is-theirs:not(.is-first) .v3-msg__bubble { border-top-left-radius: 6px; }
.is-theirs:not(.is-last) .v3-msg__bubble { border-bottom-left-radius: 6px; }
.is-mine:not(.is-first) .v3-msg__bubble { border-top-right-radius: 6px; }
.is-mine:not(.is-last) .v3-msg__bubble { border-bottom-right-radius: 6px; }
.v3-msg__photo { display: block; max-width: min(320px, 100%); padding: 0; border-radius: 18px; overflow: hidden; background: var(--v3-surface-2); cursor: zoom-in; }
.v3-msg__photo img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; }
.v3-msg__gif { display: block; max-width: min(260px, 100%); border-radius: 18px; }
.v3-msg__meme { display: flex; flex-direction: column; width: 240px; max-width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text); }
.v3-msg__meme:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-msg__meme img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--v3-surface-2); }
.v3-msg__memeinfo { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; min-width: 0; }
.v3-msg__memeinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.v3-msg__memeinfo span { font-size: 12.5px; color: var(--v3-muted); }
.v3-msg__meme.is-gone { flex-direction: row; align-items: center; gap: 8px; width: auto; padding: 12px 14px; font-size: 13.5px; color: var(--v3-muted); border-style: dashed; }
.v3-msg__quote { display: flex; flex-direction: column; gap: 2px; max-width: 100%; margin-bottom: -12px; padding: 6px 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--v3-surface-2) 70%, transparent); border: 1px solid var(--v3-divider); font-size: 12.5px; color: var(--v3-text-3); text-align: left; }
.is-mine .v3-msg__quote { align-items: flex-end; text-align: right; }
.v3-msg__qlabel { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--v3-muted); }
.v3-msg__qtext { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v3-text-2); }
.v3-msg__reacts { position: relative; z-index: 1; display: flex; gap: 4px; margin-top: -8px; padding: 0 10px; }
.v3-msg__react { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-size: 13px; animation: v3-rxpop .18s ease-out; }
.v3-msg__react span { font-size: 11px; font-weight: 700; color: var(--v3-text-3); }
.v3-msg__react.is-mine { background: var(--v3-tint); border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); }
.v3-msg__tools { flex: none; align-self: center; display: flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.v3-msg:hover .v3-msg__tools, .v3-msg.is-menu .v3-msg__tools, .v3-msg__tools:focus-within { opacity: 1; pointer-events: auto; }
.v3-msg__tools button { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--v3-text-3); }
.v3-msg__tools button:hover { background: var(--v3-surface-2); color: var(--v3-text); }
@media (hover: none) { .v3-msg__tools { display: none; } .v3-msg__stack { -webkit-touch-callout: none; } }
.v3-msg.is-sending { opacity: .6; }
.v3-msg.is-failed .v3-msg__stack { opacity: .55; }
.v3-msg__fail { margin-top: 4px; font-size: 12px; color: var(--v3-hot); }
.v3-msg__fail button { color: inherit; font-weight: 700; text-decoration: underline; }
.v3-msg.is-reacting .v3-msg__reacts { opacity: .6; }
.v3-msg.is-flash .v3-msg__stack { animation: v3-like-pop .5s ease-out; }
.v3-msg.is-flash .v3-msg__bubble { animation: v3-cmt-flash 1.4s ease-out; }
.v3-msg__burst { position: absolute; left: 50%; top: 50%; z-index: 2; font-size: 42px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); animation: v3-xp .7s ease-out forwards; }
.v3-msg.is-typing { margin-top: 8px; }
.v3-msg__dots { display: inline-flex; gap: 4px; padding: 13px 14px; }
.v3-msg__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--v3-muted); animation: v3-dm-dot 1.2s infinite ease-in-out; }
.v3-msg__dots i:nth-child(2) { animation-delay: .15s; }
.v3-msg__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes v3-dm-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Request / pending / can't-send notes */
.v3-dmt__gate { display: grid; gap: 6px; padding: 16px 20px 18px; border-top: 1px solid var(--v3-divider); text-align: center; }
.v3-dmt__gate p { margin: 0; }
.v3-dmt__gatesub { font-size: 13px; color: var(--v3-muted); }
.v3-dmt__gatebtns { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.v3-dmt__danger { color: var(--v3-hot); }
.v3-dmt__note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--v3-divider); font-size: 13.5px; color: var(--v3-text-3); text-align: center; }
.v3-dmt__note--soft { padding: 6px 16px 0; border-top: 0; font-size: 12.5px; color: var(--v3-muted); }

/* Composer */
.v3-dmc { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
.v3-dmc--skel { flex-direction: row; }
.v3-dmc__bar { display: flex; align-items: flex-end; gap: 4px; }
.v3-dmc__tool { flex: none; width: 40px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; color: var(--v3-brand); }
.v3-dmc__tool:hover { background: var(--v3-tint); }
.v3-dmc__gif { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.v3-dmc__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; margin-left: 4px; border-radius: 22px; background: var(--v3-surface-2); border: 1px solid transparent; }
.v3-dmc__field:focus-within { background: var(--v3-surface); border-color: color-mix(in srgb, var(--v3-brand) 50%, var(--v3-border)); }
.v3-dmc__field textarea { flex: 1; min-width: 0; max-height: 150px; padding: 10px 4px 10px 16px; border: 0; outline: 0; background: none; resize: none; font: inherit; font-size: 15px; line-height: 1.4; color: var(--v3-text); }
.v3-dmc__emoji { flex: none; width: 40px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: var(--v3-text-3); }
.v3-dmc__emoji:hover { color: var(--v3-brand); }
.v3-dmc__send { flex: none; width: 42px; height: 42px; margin-left: 4px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: var(--v3-brand-grad); transition: transform .12s, opacity .12s; }
.v3-dmc__send:disabled { opacity: .35; cursor: default; }
.v3-dmc__send:not(:disabled):active { transform: scale(.92); }
.v3-dmc__ctx { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--v3-surface-2); font-size: 13px; color: var(--v3-text-3); }
.v3-dmc__ctxtext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-dmc__ctxtext b { color: var(--v3-text); }
.v3-dmc__ctx .v3-iconbtn { width: 30px; height: 30px; font-size: 15px; }
.v3-dmc__att { position: relative; align-self: flex-start; margin-left: 48px; }
.v3-dmc__att img { display: block; height: 88px; max-width: 180px; object-fit: cover; border-radius: 12px; border: 1px solid var(--v3-border); }
.v3-dmc__att button { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--v3-surface); background: var(--v3-text); }
.v3-dmt.is-drop::after { content: 'Drop to send a photo'; position: absolute; inset: 8px; z-index: 5; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--v3-brand); border-radius: 18px; background: color-mix(in srgb, var(--v3-tint) 88%, transparent); font-weight: 700; color: var(--v3-brand-ink); pointer-events: none; }
.v3-dmc .mention-dropdown { bottom: 100%; top: auto; }

/* Message popover (popover on wide screens, bottom sheet on phones) */
.v3-dmpop { position: fixed; z-index: 85; min-width: 230px; padding: 6px; border-radius: 16px; background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); animation: v3-pop .12s ease-out; }
.v3-dmpop__reacts { display: flex; gap: 2px; padding: 2px; }
.v3-dmpop__reacts button { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .1s; }
.v3-dmpop__reacts button:hover { transform: scale(1.18); background: var(--v3-surface-2); }
.v3-dmpop__reacts button.is-mine { background: var(--v3-tint); }
.v3-dmpop__reacts:not([hidden]) + .v3-dmpop__items:not([hidden]) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--v3-divider); }
.v3-dmpop .v3-sheet-item { padding: 10px 12px; font-size: 14.5px; }
.v3-dmpop.is-sheet { left: 0; right: 0; bottom: 0; top: auto; min-width: 0; padding: 14px 10px calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; animation: v3-slide-u .22s cubic-bezier(.2,.8,.2,1); }
.v3-dmpop.is-sheet .v3-dmpop__reacts { justify-content: space-around; padding-bottom: 6px; }
.v3-dmpop.is-sheet .v3-dmpop__reacts button { width: 46px; height: 46px; font-size: 27px; }
.v3-dmpop-backdrop { position: fixed; inset: 0; z-index: 84; background: rgba(15, 12, 21, .45); animation: v3-fade .15s ease-out; }

/* Photo viewer */
.v3-dmlight { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 6, 12, .92); animation: v3-fade .15s ease-out; }
.v3-dmlight img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.v3-dmlight__x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: rgba(255, 255, 255, .14); }

/* New message / send sheet */
.v3-dms { max-height: min(86vh, 640px); }
.v3-dms__to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--v3-divider); }
.v3-dms__tolabel { margin-right: 4px; font-weight: 700; color: var(--v3-text-2); }
.v3-dms__chips { display: contents; }
.v3-dms__chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 13px; font-weight: 700; }
.v3-dms__to input { flex: 1 1 120px; min-width: 0; height: 34px; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--v3-text); }
.v3-dms__list { flex: 1; min-height: 240px; padding: 6px 8px; overflow-y: auto; }
.v3-dms__label { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-muted); }
.v3-dms__empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--v3-muted); }
.v3-dms__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; color: var(--v3-text); }
.v3-dms__row:hover { background: var(--v3-surface-2); }
.v3-dms__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-dms__name { font-size: 14.5px; font-weight: 600; }
.v3-dms__handle { font-size: 12.5px; color: var(--v3-muted); }
.v3-dms__check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--v3-border); display: none; align-items: center; justify-content: center; font-size: 14px; color: transparent; }
.v3-dms.is-share .v3-dms__check { display: flex; }
.v3-dms__row.is-picked .v3-dms__check { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-dms__foot { display: flex; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--v3-divider); }
.v3-dms__foot .v3-input { flex: 1; min-width: 0; }

/* One pane at a time below 900px; phones get the full screen. */
@media (max-width: 899px) {
    .v3-dm { grid-template-columns: minmax(0, 1fr); }
    .v3-dm.is-thread .v3-dm__list { display: none; }
    .v3-dm:not(.is-thread) .v3-dm__thread { display: none; }
    .v3-dm__list { border-right: 0; }
}
@media (max-width: 699px) {
    .v3-shell:has(.v3-main--fill) { padding: 0; }
    .v3-dm { height: calc(var(--v3-dm-vh, 100dvh) - var(--v3-topbar-h) - var(--v3-tabbar-h) - env(safe-area-inset-bottom)); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
    body.v3:has(.v3-dm.is-thread) { padding-bottom: 0; }
    body.v3:has(.v3-dm.is-thread) .v3-topbar, body.v3:has(.v3-dm.is-thread) .v3-tabbar { display: none; }
    .v3-dm.is-thread { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--v3-dm-vh, 100dvh); }
    .v3-dml__head { padding-top: 12px; }
    .v3-dmt__head { padding: 8px 8px 8px 6px; }
    .v3-dmt__scroll { padding: 10px 10px 6px; }
    .v3-msg__col { max-width: 80%; }
    .v3-dmc { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
    .v3-dmc__tool { width: 36px; }
    .v3-dmt__pill { bottom: 76px; }
}

/* Account avatar: down-arrow badge (it opens a menu) */
.v3-topbar__me { position: relative; }
.v3-topbar__caret { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--v3-surface-2); color: var(--v3-text); border: 2px solid var(--v3-surface); font-size: 10px; line-height: 0; transition: transform .15s; }
.v3-topbar__me[aria-expanded="true"] .v3-topbar__caret .v3-icon { transform: rotate(180deg); }
/* Inbox: someone typing */
.v3-dmrow__dots { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 2px; vertical-align: middle; }
.v3-dmrow__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--v3-brand); animation: v3-dm-dot 1.2s infinite ease-in-out; }
.v3-dmrow__dots i:nth-child(2) { animation-delay: .15s; }
.v3-dmrow__dots i:nth-child(3) { animation-delay: .3s; }

/* ══ v3.1 Collectives ════════════════════════════════════════════════════ */
.v3-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #15803D; }
.v3-live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: block; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: v3-live 2s infinite; }
@keyframes v3-live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
:root[data-theme="dark"] .v3-live { color: #4ADE80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v3-live { color: #4ADE80; } }
.v3-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--v3-text-2); cursor: pointer; }
.v3-check input { margin-top: 3px; accent-color: var(--v3-brand); }
.v3-avatar--group:not(:has(img)) { background: var(--acc, var(--v3-brand-grad)); }

/* Directory */
.v3-cmine { margin: 18px 0 6px; }
.v3-cmine__title { margin: 0 0 10px; font-family: var(--v3-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-cmine__row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.v3-cmine__row::-webkit-scrollbar { display: none; }
.v3-cmine__item { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: var(--v3-text); }
.v3-cmine__av { position: relative; line-height: 0; }
.v3-cmine__av--dash { width: 60px; height: 60px; border-radius: 28%; border: 2px dashed var(--v3-border); display: flex; align-items: center; justify-content: center; color: var(--v3-muted); font-size: 20px; }
.v3-cmine__n { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--v3-brand); color: #fff; border: 2px solid var(--v3-bg); font-size: 11px; font-weight: 800; line-height: 16px; display: flex; align-items: center; justify-content: center; }
.v3-cmine__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.v3-cmine__item .v3-live { font-size: 11px; }
.v3-colls { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; min-height: 40vh; }
.v3-cfilters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v3-cfilters .v3-ssort { margin: 0; }
.v3-fchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v3-fchips::-webkit-scrollbar { display: none; }
.v3-fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v3-border); background: var(--v3-surface); font-size: 13px; font-weight: 600; color: var(--v3-text-2); }
.v3-fchip:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-fchip.is-active { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v3-region-skel--ccard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v3-region-skel--tile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v3-region-skel--tile .v3-skel--gridtile { aspect-ratio: 4 / 5; }
.v3-ccard { position: relative; display: flex; flex-direction: column; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); overflow: hidden; box-shadow: var(--v3-shadow-card); transition: transform .15s, box-shadow .15s; }
.v3-ccard:hover { transform: translateY(-2px); box-shadow: var(--v3-shadow-pop); }
.v3-ccard--skel:hover { transform: none; box-shadow: var(--v3-shadow-card); }
.v3-ccard__ban { display: block; height: 84px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 55%, #000), var(--acc)); background-size: cover; background-position: center; }
.v3-ccard__body { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; flex: 1; }
.v3-ccard__av { position: relative; z-index: 1; margin-top: -28px; line-height: 0; align-self: flex-start; }
.v3-ccard__av .v3-avatar, .v3-chero__av .v3-avatar { box-shadow: 0 0 0 3px var(--v3-surface); }
.v3-ccard__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-ccard__name { font-family: var(--v3-font-display); font-size: 17px; font-weight: 700; color: var(--v3-text); }
.v3-ccard__desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--v3-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-ccard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--v3-muted); }
.v3-ccard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.v3-ctier { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc, var(--v3-brand)) 14%, var(--v3-surface)); color: color-mix(in srgb, var(--acc, var(--v3-brand)) 70%, var(--v3-text)); font-size: 11.5px; font-weight: 700; }
.v3-faces { display: flex; }
.v3-faces .v3-avatar { box-shadow: 0 0 0 2px var(--v3-surface); }
.v3-faces .v3-avatar + .v3-avatar { margin-left: -8px; }
.v3-cjoin-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--v3-muted); }
.v3-cjoined { pointer-events: none; }
.v3-crail { display: flex; flex-direction: column; gap: 10px; }
.v3-crail__row { display: flex; align-items: center; gap: 10px; color: var(--v3-text); font-size: 14px; }
.v3-crail__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.v3-crail__up { font-weight: 800; color: var(--v3-ok); font-size: 13px; }
.v3-crail__theme { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }

/* A collective: header */
.v3-coll { display: flex; flex-direction: column; gap: 16px; }
.v3-chero { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); overflow: hidden; box-shadow: var(--v3-shadow-card); }
.v3-chero__ban { height: 160px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 55%, #000), var(--acc)); background-size: cover; background-position: center; }
.v3-chero__main { padding: 0 22px; display: flex; flex-direction: column; gap: 8px; }
.v3-chero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -46px; }
.v3-chero__av { position: relative; z-index: 1; line-height: 0; }
.v3-chero__av .v3-avatar { box-shadow: 0 0 0 4px var(--v3-surface); }
.v3-chero__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 4px; }
.v3-chero__name { margin: 4px 0 0; font-family: var(--v3-font-display); font-size: 28px; font-weight: 800; line-height: 1.15; }
.v3-chero__desc { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v3-text-2); }
.v3-chero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--v3-text-3); }
.v3-chero__meta b { color: var(--v3-text); }
.v3-chero__genre { padding: 2px 10px; border-radius: 999px; background: var(--v3-surface-2); color: var(--v3-text-2); font-size: 12.5px; font-weight: 600; }
.v3-cnote { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 10%, var(--v3-surface)); color: var(--v3-text-2); font-size: 13.5px; }
.v3-ctabs { display: flex; gap: 2px; margin: 6px -22px 0; padding: 0 12px; border-top: 1px solid var(--v3-divider); overflow-x: auto; scrollbar-width: none; }
.v3-ctabs::-webkit-scrollbar { display: none; }
.v3-ctab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; font-size: 14.5px; font-weight: 600; color: var(--v3-text-3); border-bottom: 2px solid transparent; }
.v3-ctab:hover { color: var(--v3-text); }
.v3-ctab.is-active { color: var(--v3-text); border-bottom-color: var(--acc); }
.v3-ctab__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.v3-coll__body { display: flex; flex-direction: column; gap: 14px; min-height: 40vh; }
.v3-cgate { padding: 24px 0; }
.v3-crole { flex: none; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; }
.v3-crole--owner { background: #FEF3C7; color: #B45309; }
.v3-crole--moderator { background: #CCFBF1; color: #0F766E; }
.v3-ctop { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v3-ctop li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.v3-ctop__rank { width: 18px; text-align: center; font-weight: 800; color: var(--v3-muted); }
.v3-ctop__rank--1 { color: #F5B301; } .v3-ctop__rank--2 { color: #9AA4B2; } .v3-ctop__rank--3 { color: #B7743D; }
.v3-ctop__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--v3-text); font-weight: 600; }
.v3-ctop__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-ctop__n { font-weight: 700; color: var(--v3-text-3); font-variant-numeric: tabular-nums; }
.v3-crules { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--v3-text-2); }

/* Feed tab */
.v3-ctheme { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--v3-r-lg); border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--v3-border)); background: linear-gradient(0deg, var(--v3-surface), color-mix(in srgb, var(--acc) 10%, var(--v3-surface))); }
.v3-ctheme__label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 75%, var(--v3-text)); }
.v3-ctheme__label span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v3-muted); }
.v3-ctheme__title { margin: 0; font-family: var(--v3-font-display); font-size: 21px; }
.v3-ctheme__body { margin: 0; font-size: 14.5px; color: var(--v3-text-2); line-height: 1.5; }
.v3-ctheme__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--v3-text-3); }
.v3-ctheme__foot a { font-weight: 700; color: var(--v3-brand); }
.v3-ctheme__foot .v3-btn--primary { margin-left: auto; }
.v3-ctheme-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--v3-r-lg); border: 1px dashed var(--v3-border); background: none; color: var(--v3-text-2); font-weight: 700; font-size: 14px; text-align: left; }
.v3-ctheme-add span { font-weight: 500; color: var(--v3-muted); font-size: 13px; }
.v3-ctheme-add:hover { border-color: var(--acc); color: var(--v3-text); }
.v3-cpostbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); text-align: left; box-shadow: var(--v3-shadow-card); }
.v3-cpostbar > span:nth-child(2) { flex: 1; color: var(--v3-muted); font-size: 15px; }
.v3-cpostbar:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--v3-border)); }
.v3-cfeedbar, .v3-cboardbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.v3-cfeedbar .v3-ssort, .v3-cboardbar .v3-ssort { margin: 0; }

/* Live chat */
.v3-chat { display: flex; height: calc(var(--v3-dm-vh, 100dvh) - var(--v3-topbar-h) - 120px); min-height: 460px; max-height: 820px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); overflow: hidden; box-shadow: var(--v3-shadow-card); }
.v3-chat__main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-chat__scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 8px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.v3-chat__scroll::before { content: ''; margin-top: auto; }
.v3-chat__older { height: 1px; flex: none; }
.v3-chat__intro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 22px; text-align: center; font-size: 13.5px; color: var(--v3-muted); }
.v3-chat__intro b { font-size: 16px; color: var(--v3-text); }
.v3-chat__msgs { display: flex; flex-direction: column; }
.v3-chat__typing { display: flex; align-items: center; gap: 8px; padding: 0 18px 4px; font-size: 12.5px; color: var(--v3-muted); }
.v3-chat__form { border-top: 1px solid var(--v3-divider); }
.v3-chat .v3-dmt__note { border-top: 1px solid var(--v3-divider); }
.v3-chat .v3-dmt__note .v3-btn { margin-left: 8px; }
.v3-chat__people { flex: none; width: 220px; padding: 14px; border-left: 1px solid var(--v3-divider); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.v3-chat__ptitle { margin: 0 0 6px; font-family: var(--v3-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-chat__person { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 10px; color: var(--v3-text); font-size: 14px; }
.v3-chat__person:hover { background: var(--v3-surface-2); }
.v3-chat__pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-chat__alone { margin: 0; font-size: 13px; color: var(--v3-muted); }
/* Focus mode (Ken, Oct 13): the chat fills the screen over a dimmed page. Sits under sheets
   (80+) so the GIF / emoji picker and message menu still open on top of it. */
.v3-chat__fs { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 16px; background: color-mix(in srgb, var(--v3-surface) 85%, transparent); border: 1px solid var(--v3-border); backdrop-filter: blur(6px); }
.v3-chat__fhead { display: none; }
/* Who's in chat (Ken, Oct 13): green dot on the avatars of people in the chat right now. */
.v3-cm__av { position: relative; align-self: flex-start; height: 36px; }
.v3-cm__here { --av: 36px; display: none; }
.v3-cm.is-here:not(.is-cont) .v3-cm__here { display: block; }
/* Phones/tablets have no side list: a face pile bar ("3 in chat") drops the list down over the messages. */
.v3-chat__here { display: none; }
@media (max-width: 1199px) {
    .v3-chat { position: relative; }
    .v3-chat__here { display: flex; align-items: center; gap: 10px; flex: none; width: 100%; min-height: 48px; padding: 8px 56px 8px 12px; border: 0; border-bottom: 1px solid var(--v3-divider); background: none; font: inherit; color: var(--v3-text-2); text-align: left; cursor: pointer; }
    .v3-chat.is-focus .v3-chat__here { padding-right: 12px; }
    .v3-chat__faces { display: flex; flex: none; }
    .v3-chat__faces:empty { display: none; }
    .v3-chat__faces .v3-avatar { box-shadow: 0 0 0 2px var(--v3-surface); }
    .v3-chat__faces .v3-avatar + .v3-avatar { margin-left: -8px; }
    .v3-chat__heretxt { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
    .v3-chat__heretxt b { color: var(--v3-text); font-variant-numeric: tabular-nums; }
    .v3-chat__heretxt i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: v3-here-ping 2s ease-out infinite; }
    .v3-chat__herechev { margin-left: auto; color: var(--v3-muted); transition: transform .2s; }
    .v3-chat.is-people .v3-chat__herechev { transform: rotate(180deg); }
    .v3-chat__fs { top: 7px; }
    .v3-chat.is-people .v3-chat__people { display: flex; position: absolute; z-index: 6; top: var(--here-top, 54px); left: 8px; width: min(320px, calc(100% - 16px)); max-height: min(60%, 420px); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); box-shadow: var(--v3-shadow-pop); animation: v3-pop .15s ease-out; }
}
@keyframes v3-here-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .v3-chat__heretxt i { animation: none; } }
.v3-chat-fsbd { position: fixed; inset: 0; z-index: 77; background: rgba(10, 7, 18, .7); animation: v3-fade .18s ease-out; }
.v3-chat.is-focus { position: fixed; z-index: 78; inset: 24px max(24px, calc((100vw - 1280px) / 2)); height: auto; min-height: 0; max-height: none; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: v3-fade .18s ease-out; }
.v3-chat.is-focus .v3-chat__fs { display: none; }
.v3-chat.is-focus .v3-chat__fhead { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--v3-divider); }
.v3-chat.is-focus .v3-chat__fhead b { flex: 1; min-width: 0; font-family: var(--v3-font-display); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 699px) {
    .v3-chat.is-focus { inset: 0; border-radius: 0; border: 0; height: var(--v3-dm-vh, 100dvh); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}
.v3-skel-row--chat { padding: 10px 14px; }

.v3-cm { position: relative; display: flex; gap: 12px; padding: 6px 10px; border-radius: 10px; margin-top: 8px; }
.v3-cm.is-cont { margin-top: 0; padding-top: 2px; }
.v3-cm:hover, .v3-cm.is-menu { background: var(--v3-surface-2); }
.v3-cm__av { flex: none; width: 36px; line-height: 0; }
.v3-cm.is-cont .v3-cm__av { visibility: hidden; height: 0; }
.v3-cm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v3-cm__head { display: flex; align-items: baseline; gap: 6px; }
.v3-cm.is-cont .v3-cm__head { display: none; }
.v3-cm__name { font-weight: 700; font-size: 14.5px; color: var(--v3-text); }
.v3-cm__time { font-size: 12px; color: var(--v3-muted); }
.v3-cm__body { font-size: 15px; line-height: 1.45; color: var(--v3-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.v3-cm__body iframe { display: block; max-width: 100%; border-radius: 12px; margin: 4px 0; }
.v3-cm__gif { display: block; max-width: min(260px, 100%); border-radius: 12px; }
.v3-cm__meme { margin-top: 2px; }
.v3-cm__quote { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border-left: 3px solid color-mix(in srgb, var(--acc, var(--v3-brand)) 60%, var(--v3-border)); border-radius: 0 8px 8px 0; background: none; font-size: 12.5px; color: var(--v3-text-3); text-align: left; overflow: hidden; }
.v3-cm__quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-cm__blocked { font-size: 13px; font-style: italic; color: var(--v3-muted); }
.v3-cm__reacts { display: flex; gap: 4px; flex-wrap: wrap; }
.v3-cm__tools { position: absolute; top: -14px; right: 12px; display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); opacity: 0; pointer-events: none; transition: opacity .12s; }
.v3-cm:hover .v3-cm__tools, .v3-cm.is-menu .v3-cm__tools, .v3-cm__tools:focus-within { opacity: 1; pointer-events: auto; }
.v3-cm__tools button { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--v3-text-3); }
.v3-cm__tools button:hover { background: var(--v3-surface-2); color: var(--v3-text); }
@media (hover: none) { .v3-cm__tools { display: none; } }
.v3-cm.is-sending { opacity: .6; }
.v3-cm.is-failed .v3-cm__body { opacity: .6; }
.v3-cm.is-flash { animation: v3-flash 1.4s ease-out; }

/* Members / about */
.v3-csec { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); box-shadow: var(--v3-shadow-card); }
.v3-csec__title { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--v3-font-display); font-size: 17px; }
.v3-csec__sub { margin: 6px 0 0; font-size: 14px; font-family: var(--v3-font); font-weight: 700; }
.v3-clist { display: flex; flex-direction: column; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); overflow: visible; }
.v3-csec .v3-clist { border: 0; }
.v3-crow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.v3-crow + .v3-crow { border-top: 1px solid var(--v3-divider); }
.v3-crow__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v3-crow__name { color: var(--v3-text); font-size: 14.5px; font-weight: 600; }
.v3-crow__sub { font-size: 12.5px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-crow__msg { font-size: 13px; color: var(--v3-text-2); font-style: italic; }
.v3-cabout__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v3-text-2); }
.v3-cfacts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-cfacts div { padding: 10px 12px; border-radius: 12px; background: var(--v3-surface-2); }
.v3-cfacts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-muted); }
.v3-cfacts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.v3-cset { gap: 16px; }
.v3-cfield { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.v3-cfield--row { flex-direction: row; gap: 16px; align-items: flex-start; }
.v3-cfield__hint { margin: 2px 0 0; font-size: 12.5px; color: var(--v3-muted); }
.v3-label small { font-weight: 500; color: var(--v3-muted); }
.v3-cupload { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; cursor: pointer; color: #fff; font-size: 13.5px; font-weight: 700; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 55%, #000), var(--acc)); }
.v3-cupload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.v3-cupload img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-cupload span { display: contents; }
.v3-cupload--av { width: 88px; height: 88px; border-radius: 28%; font-size: 24px; }
.v3-cupload--ban { height: 88px; border-radius: 14px; }
.v3-cupload:focus-within { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-cswatches { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-cswatch { position: relative; width: 34px; height: 34px; cursor: pointer; }
.v3-cswatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.v3-cswatch span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.v3-cswatch input:checked + span { box-shadow: 0 0 0 3px var(--v3-surface), 0 0 0 5px var(--sw); }
.v3-cswatch input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 4px; }
.v3-cradios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-cradio { position: relative; display: block; cursor: pointer; }
.v3-cradio input { position: absolute; opacity: 0; }
.v3-cradio span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--v3-border); }
.v3-cradio b { font-size: 14px; }
.v3-cradio small { font-size: 12px; color: var(--v3-muted); line-height: 1.35; }
.v3-cradio input:checked + span { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-cradio input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-cerr { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--v3-hot) 10%, var(--v3-surface)); color: var(--v3-hot); font-size: 13.5px; font-weight: 600; }
.v3-cset__foot { display: flex; justify-content: flex-end; gap: 8px; }
.v3-cform { display: flex; flex-direction: column; gap: 12px; }
.v3-cdanger { border-color: color-mix(in srgb, var(--v3-hot) 35%, var(--v3-border)); }
.v3-cdanger p { margin: 0; font-size: 14px; color: var(--v3-text-2); }
.v3-cdanger .v3-btn { align-self: flex-start; }

@media (max-width: 1199px) {
    .v3-cgrid, .v3-region-skel--ccard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-chat__people { display: none; }
}
@media (max-width: 699px) {
    .v3-cgrid, .v3-region-skel--ccard { grid-template-columns: minmax(0, 1fr); }
    .v3-region-skel--tile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-chero { border-radius: var(--v3-r-lg); }
    .v3-chero__ban { height: 110px; }
    .v3-chero__main { padding: 0 14px; }
    .v3-chero__top { margin-top: -36px; }
    /* Buttons sit fully below the banner, not on its edge (same as the profile). */
    .v3-chero__acts { align-self: flex-start; margin-top: 46px; padding-bottom: 0; }
    .v3-chero__av .v3-avatar { --s: 72px !important; }
    .v3-chero__name { font-size: 22px; }
    .v3-ctabs { margin: 4px -14px 0; padding: 0 4px; }
    .v3-ctab { padding: 0 11px; height: 44px; font-size: 14px; }
    .v3-chat { height: calc(var(--v3-dm-vh, 100dvh) - var(--v3-topbar-h) - var(--v3-tabbar-h) - 24px); border-radius: var(--v3-r-lg); min-height: 380px; }
    .v3-cfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-cradios { grid-template-columns: minmax(0, 1fr); }
    .v3-csec { padding: 14px; }
    .v3-cfield--row { flex-direction: column; }
    .v3-cfield--row > div { width: 100%; }
}

/* v3.1 Collectives: on touch screens the chat sits inside a scrolling page, so
   let a swipe that reaches the top/bottom of the chat (or a short chat with
   nothing to scroll) carry on to the page instead of being swallowed. */
@media (hover: none), (max-width: 767px) {
    .v3-chat__scroll { overscroll-behavior: auto; }
}

/* v3.1 Collectives: posts in the Feed (All / Posts / Memes / Threads). */
.v3-ckinds { margin: 0 0 12px; }
.v3-coll .v3-composer { margin-bottom: 12px; }
.v3-composer__meme { margin-left: 2px; }
.v3-cfeed { margin-top: 4px; }
.v3-post__coll a { display: inline-flex; align-items: center; gap: 3px; color: var(--v3-brand-ink); font-weight: 600; }
.v3-post__coll a:hover { text-decoration: underline; }
.v3-post__coll .v3-icon { width: 12px; height: 12px; }
.v3-region-skel--post { display: flex; flex-direction: column; gap: 16px; }

.v3-composer__wallnote { white-space: nowrap; }

/* ── v3.1 Templates ─────────────────────────────────────────────────────── */
.v3-tlib { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.v3-tsearch { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-muted); }
.v3-tsearch:focus-within { border-color: var(--v3-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-tsearch .v3-icon { font-size: 20px; flex: none; }
.v3-tsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: 16px; color: var(--v3-text); }
.v3-tsec { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.v3-tsec__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v3-tsec__title { margin: 0; font-family: var(--v3-font-display); font-size: 19px; font-weight: 700; }
.v3-tsec__head .v3-ssort { margin-left: auto; }
.v3-tsec__note { font-size: 13px; color: var(--v3-muted); }
.v3-tsec__more { margin-left: auto; font-size: 13px; font-weight: 600; }
.v3-ttrend { display: flex; flex-direction: column; gap: 10px; }
.v3-ttrend__row, .v3-tsimilar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.v3-ttrend__item { display: flex; flex-direction: column; gap: 4px; color: var(--v3-text); min-width: 0; }
.v3-ttrend__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--v3-tint); }
.v3-ttrend__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.v3-ttrend__item:hover img { transform: scale(1.04); }
.v3-ttrend__rank { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(23, 19, 31, .82); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.v3-tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v3-tbar__sort { margin-left: auto; }
.v3-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.v3-smore.v3-tgrid[hidden] { display: none; }
.v3-ttile { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v3-ttile__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--v3-tint); }
.v3-ttile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.v3-ttile__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #FEF3C7; color: #92400E; }
.v3-ttile__badge--rejected { background: #FEE2E2; color: #991B1B; }
.v3-ttile__media { position: relative; }
.v3-ttile__use { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: #17131F; box-shadow: 0 6px 18px rgba(23, 19, 31, .25); opacity: 0; pointer-events: none; transition: opacity .15s; }
@media (hover: hover) {
    .v3-ttile:hover .v3-ttile__img img { transform: scale(1.04); }
    .v3-ttile:hover .v3-ttile__use, .v3-ttile:focus-within .v3-ttile__use { opacity: 1; pointer-events: auto; }
}
.v3-ttile__foot { display: flex; align-items: flex-start; gap: 8px; }
.v3-ttile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-ttile__name { font-size: 14px; font-weight: 600; color: var(--v3-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-ttile__name:hover { color: var(--v3-brand-ink); }
.v3-ttile__meta { font-size: 12.5px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-ttile__save { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
.v3-ttile__save:hover { color: var(--v3-brand-ink); border-color: var(--v3-brand); }
.v3-ttile__save[aria-pressed="true"] { background: var(--v3-tint); color: var(--v3-brand-ink); border-color: transparent; }
.v3-ttile__save[aria-pressed="true"] .v3-icon, [data-v3-tsave][aria-pressed="true"] .v3-icon { fill: currentColor; }
.v3-ttile--skel .v3-ttile__img { aspect-ratio: 4 / 3; border-radius: 12px; display: block; }
.v3-region-skel--ttile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
/* rail */
.v3-tchart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-tchart__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--v3-divider); font-size: 14px; }
.v3-tchart__row:last-child { border-bottom: 0; }
.v3-tchart__rank { width: 16px; font-weight: 700; text-align: center; }
.v3-tchart__move { width: 40px; display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 700; color: var(--v3-muted); }
.v3-tchart__move .v3-icon { font-size: 14px; }
.v3-tchart__move--up { color: #15803D; }
.v3-tchart__move--down { color: #B91C1C; }
.v3-tchart__move--new { color: var(--v3-brand-ink); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.v3-tchart__name { flex: 1; min-width: 0; font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-tchart__n { color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-trecent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v3-trecent__item { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--v3-text); min-width: 0; }
.v3-trecent__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--v3-tint); }
.v3-trecent__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a template's page */
.v3-tcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--v3-muted); margin-bottom: 14px; }
.v3-tcrumbs .v3-icon { font-size: 13px; }
.v3-tcrumbs span { color: var(--v3-text); font-weight: 600; }
.v3-tbanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: #FEF3C7; color: #78350F; font-size: 14px; }
.v3-tbanner--rejected { background: #FEE2E2; color: #7F1D1D; }
.v3-tbanner > .v3-icon { font-size: 18px; flex: none; }
.v3-tbanner__text { flex: 1 1 260px; }
.v3-tbanner__acts { display: flex; gap: 8px; }
.v3-tpl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.v3-tpl__media { border-radius: var(--v3-r-lg); overflow: hidden; background: var(--v3-tint); border: 1px solid var(--v3-border); display: flex; justify-content: center; }
.v3-tpl__media img { display: block; max-width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.v3-tpl__info { display: flex; flex-direction: column; gap: 16px; }
.v3-tpl__title { margin: 0; font-family: var(--v3-font-display); font-size: 28px; line-height: 1.15; }
.v3-tpl__title span { color: var(--v3-muted); font-weight: 500; font-size: .7em; display: block; margin-top: 4px; }
.v3-tpl__by { margin: 6px 0 0; font-size: 14px; color: var(--v3-muted); }
.v3-tpl__stats { display: flex; gap: 26px; margin: 0; padding: 14px 0; border-top: 1px solid var(--v3-divider); border-bottom: 1px solid var(--v3-divider); }
.v3-tpl__stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.v3-tpl__stats dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-tpl__stats dt { font-size: 12.5px; color: var(--v3-muted); }
.v3-tpl__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-tpl__acts .v3-btn { justify-content: center; }
.v3-tpl__about { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 14px; padding: 14px 16px; }
.v3-tpl__about h2 { margin: 0 0 6px; font-size: 14px; }
.v3-tpl__about p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--v3-text); white-space: pre-line; }
.v3-tpl__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-ttag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 12.5px; font-weight: 600; }
.v3-ttag:hover { background: color-mix(in srgb, var(--v3-brand) 16%, var(--v3-tint)); }
.v3-tpl__manage { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--v3-divider); }
.v3-tpl__del { color: #B91C1C; }
/* upload sheet */
.v3-tdrop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 170px; border: 2px dashed var(--v3-border); border-radius: 14px; background: var(--v3-tint); cursor: pointer; overflow: hidden; text-align: center; }
.v3-tdrop.is-over { border-color: var(--v3-brand); }
.v3-tdrop.has-file { border-style: solid; background: #17131F; }
.v3-tdrop__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; color: var(--v3-text); }
.v3-tdrop__empty .v3-icon { font-size: 26px; color: var(--v3-brand-ink); }
.v3-tdrop__empty small { color: var(--v3-muted); font-size: 12.5px; }
.v3-tdrop img { display: block; max-width: 100%; max-height: 260px; object-fit: contain; }
.v3-tdrop:focus-within { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-tdup { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 13.5px; }
.v3-tdup[hidden] { display: none; }
.v3-tdup img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.v3-tdup__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1100px) {
    .v3-tgrid, .v3-region-skel--ttile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v3-ttrend__row, .v3-tsimilar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v3-ttrend__row > :nth-child(5), .v3-tsimilar > :nth-child(5) { display: none; }
}
@media (max-width: 860px) {
    .v3-tpl { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
    .v3-chead { flex-wrap: wrap; align-items: flex-start; }
    .v3-chead__acts { width: 100%; }
    .v3-chead__acts .v3-btn { flex: 1; justify-content: center; }
    .v3-tgrid, .v3-region-skel--ttile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
    .v3-ttrend__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
    .v3-ttrend__row::-webkit-scrollbar { display: none; }
    .v3-ttrend__row > * { flex: 0 0 42%; scroll-snap-align: start; }
    .v3-ttrend__row > :nth-child(5) { display: flex; }
    .v3-tsimilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-tsimilar > :nth-child(5) { display: none; }
    .v3-tbar__sort { margin-left: 0; }
    .v3-tpl__title { font-size: 24px; }
    .v3-tpl__stats { gap: 18px; }
    .v3-tsec__head .v3-ssort { margin-left: 0; }
}
.v3-ttile__name, .v3-ttrend__item .v3-ttile__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ==========================================================================
   Phase 11 — Creator Studio: home (/studio) and the editor (/studio/new, /studio/edit/{id})
   ========================================================================== */

/* ── Studio home ─────────────────────────────────────────────────────────── */
.v3-sstart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 28px; }
.v3-sstart__tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-text); box-shadow: var(--v3-shadow-card); min-width: 0; transition: border-color .15s, transform .15s; }
a.v3-sstart__tile:hover { border-color: var(--v3-brand); transform: translateY(-1px); }
.v3-sstart__tile b { font-size: 15px; }
.v3-sstart__tile > span:not(.v3-sstart__ico) { font-size: 13px; color: var(--v3-text-3); line-height: 1.4; }
.v3-sstart__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--v3-tint); color: var(--v3-brand-deep); margin-bottom: 4px; }
.v3-sstart__ico .v3-icon { width: 20px; height: 20px; }
.v3-sstart__ico--teal { background: #DDF6F1; color: #0F766E; }
.v3-sstart__ico--amber { background: #FEF3C7; color: #B45309; }
.v3-sstart__ico--blue { background: #E0EDFF; color: #1D4ED8; }
:root[data-theme="dark"] .v3-sstart__ico--teal { background: #0F2E2A; color: #5EEAD4; }
:root[data-theme="dark"] .v3-sstart__ico--amber { background: #2E220A; color: #FBBF24; }
:root[data-theme="dark"] .v3-sstart__ico--blue { background: #14213D; color: #93C5FD; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .v3-sstart__ico--teal { background: #0F2E2A; color: #5EEAD4; }
    :root:not([data-theme="light"]) .v3-sstart__ico--amber { background: #2E220A; color: #FBBF24; }
    :root:not([data-theme="light"]) .v3-sstart__ico--blue { background: #14213D; color: #93C5FD; }
}
.v3-sstart__tile--blank { grid-column: 1 / -1; background: var(--v3-tint); border-color: transparent; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.v3-sstart__tile--blank .v3-sstart__ico { margin-bottom: 0; }
.v3-sstart__tile--blank .v3-sstart__sizes { flex: 1 1 360px; margin-top: 0; }
.v3-sstart__sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.v3-sstart__size { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 4px 8px; border-radius: var(--v3-r-md); background: var(--v3-surface); border: 1px solid var(--v3-border); font-size: 12px; font-weight: 600; color: var(--v3-text-2); min-height: 92px; }
.v3-sstart__size:hover { border-color: var(--v3-brand); color: var(--v3-brand-deep); }
.v3-sstart__shape { display: block; height: 44px; max-width: 70px; border: 2px solid currentColor; border-radius: 5px; opacity: .7; }

.v3-swork { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.v3-swork__tabs { margin-bottom: 0; }
.v3-swork__n { margin-left: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--v3-r-pill); background: var(--v3-tint); color: var(--v3-brand-deep); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.v3-swork__list { container-type: inline-size; display: flex; flex-direction: column; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); overflow: hidden; }
.v3-swrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--v3-divider); min-width: 0; }
.v3-swrow:first-child { border-top: 0; }
.v3-swrow__thumb { flex: none; width: 56px; height: 56px; border-radius: var(--v3-r-sm); overflow: hidden; background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-swrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-swrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-swrow__title { font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-swrow__title:hover { color: var(--v3-brand-deep); }
.v3-swrow__meta { font-size: 12.5px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-swrow__pill { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); color: var(--v3-text-3); border: 1px solid var(--v3-border); }
.v3-swrow__pill--scheduled { background: var(--v3-warn-bg); color: var(--v3-warn); border-color: transparent; }
.v3-swrow__pill--published { background: var(--v3-ok-bg); color: var(--v3-ok); border-color: transparent; }
.v3-swrow__acts { flex: none; display: flex; align-items: center; gap: 6px; }
@container (max-width: 640px) {
    .v3-swrow { flex-wrap: wrap; }
    .v3-swrow__acts { width: 100%; padding-left: 68px; flex-wrap: wrap; }
    .v3-swrow__acts .v3-btn--primary { margin-left: auto; }
}
.v3-skel-row + .v3-skel-row { border-top: 1px solid var(--v3-divider); }

.v3-stpls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.v3-stips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--v3-text-2); line-height: 1.45; }
.v3-stips b { color: var(--v3-text); }

@media (max-width: 1199px) {
    .v3-stpls { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .v3-sstart { gap: 10px; margin-top: 12px; }
    .v3-sstart__tile { padding: 12px; }
    .v3-sstart__tile > span:not(.v3-sstart__ico) { font-size: 12px; }
    .v3-sstart { grid-template-columns: 1fr 1fr; }
    .v3-sstart > a.v3-sstart__tile:last-child { grid-column: 1 / -1; }
    .v3-sstart__tile--blank .v3-sstart__sizes { flex-basis: 100%; }
    .v3-sstart__size { min-height: 80px; }
    .v3-sstart__shape { height: 36px; }
    .v3-swrow { padding: 12px; }
    .v3-swrow__pill { display: none; }
}

/* ── Bare layout (the editor is full-screen) ─────────────────────────────── */
.v3--bare { overflow: hidden; }
.v3-bare { display: block; height: 100vh; height: 100dvh; }

/* ── Editor shell ────────────────────────────────────────────────────────── */
.v3-ed { --ed-bar: 56px; --ed-tools: 76px; --ed-panel: 324px; --ed-stage: #ECE8F3;
    height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--ed-bar) auto minmax(0, 1fr); background: var(--v3-bg); color: var(--v3-text); overflow: hidden; }
:root[data-theme="dark"] .v3-ed { --ed-stage: #0A0810; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v3-ed { --ed-stage: #0A0810; } }

.v3-ed__bar { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--v3-border); background: var(--v3-surface); min-width: 0; }
.v3-ed__brand { font-family: var(--v3-font-display); font-weight: 700; font-size: 18px; color: var(--v3-text); white-space: nowrap; letter-spacing: -.01em; }
.v3-ed__brand small { font-family: var(--v3-font); font-size: 12px; font-weight: 700; color: var(--v3-brand-deep); background: var(--v3-tint); padding: 2px 7px; border-radius: var(--v3-r-pill); margin-left: 3px; vertical-align: 2px; }
.v3-ed__ctx { font-size: 13px; color: var(--v3-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 280px; padding-left: 10px; border-left: 1px solid var(--v3-border); }
.v3-ed__ctx b { color: var(--v3-text); font-weight: 600; }
.v3-ed__saved { font-size: 12px; color: var(--v3-muted); white-space: nowrap; }
.v3-ed__grow { flex: 1; }
.v3-ed__ib { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border-radius: var(--v3-r-sm); color: var(--v3-text-2); background: transparent; border: 0; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1; }
.v3-ed__clear.is-armed { background: var(--v3-hot); color: #fff; }
.v3-ed__ib:hover:not(:disabled) { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-ed__ib:disabled { opacity: .35; cursor: default; }
.v3-ed__ib .v3-icon { width: 20px; height: 20px; }
.v3-ed__ib--sm { width: 30px; height: 30px; }
.v3-ed__zoom { display: inline-flex; align-items: center; border: 1px solid var(--v3-border); border-radius: var(--v3-r-sm); padding: 1px; }
.v3-ed__zoomval { min-width: 52px; height: 30px; border: 0; background: none; color: var(--v3-text-2); font: 600 12.5px var(--v3-font); cursor: pointer; border-radius: 7px; font-variant-numeric: tabular-nums; }
.v3-ed__zoomval:hover { background: var(--v3-surface-2); }

.v3-ed__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--v3-r-sm); border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text); font: 600 13.5px var(--v3-font); cursor: pointer; white-space: nowrap; position: relative; }
.v3-ed__btn:hover:not(:disabled) { border-color: var(--v3-brand); color: var(--v3-brand-deep); }
.v3-ed__btn:disabled { opacity: .55; cursor: default; }
.v3-ed__btn .v3-icon { width: 17px; height: 17px; }
.v3-ed__btn--primary { background: var(--v3-brand-grad); border-color: transparent; color: #fff; box-shadow: var(--v3-brand-glow); }
.v3-ed__btn--primary:hover:not(:disabled) { color: #fff; filter: brightness(1.06); }
.v3-ed__btn--danger { color: var(--v3-hot); }
.v3-ed__btn--danger:hover:not(:disabled) { border-color: var(--v3-hot); color: var(--v3-hot); background: var(--v3-hot-bg); }
.v3-ed__btn--block { display: flex; width: 100%; margin-top: 10px; }
.v3-ed__link { background: none; border: 0; padding: 4px 0; color: var(--v3-brand-deep); font: 600 13px var(--v3-font); cursor: pointer; }
.v3-ed__link:hover { text-decoration: underline; }

.v3-ed__restore { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--v3-warn-bg); color: var(--v3-text); font-size: 13.5px; border-bottom: 1px solid var(--v3-border); flex-wrap: wrap; }
.v3-ed__restore[hidden] { display: none; }
.v3-ed__restore > .v3-icon { width: 18px; height: 18px; color: var(--v3-warn); flex: none; }
.v3-ed__restore > span { flex: 1; min-width: 180px; }
.v3-ed__restore .v3-ed__btn { height: 32px; }

/* Explicit rows: the restore banner is often hidden, and the body must stay in the 1fr row. */
.v3-ed__bar { grid-row: 1; } .v3-ed__restore { grid-row: 2; }
.v3-ed__body { grid-row: 3; display: grid; grid-template-columns: var(--ed-tools) minmax(0, 1fr) var(--ed-panel); min-height: 0; }

/* tool rail */
.v3-ed__tools { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--v3-surface); border-right: 1px solid var(--v3-border); overflow-y: auto; scrollbar-width: none; }
.v3-ed__tools::-webkit-scrollbar { display: none; }
.v3-ed__tool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: var(--v3-r-md); background: none; color: var(--v3-text-3); font: 600 11px var(--v3-font); cursor: pointer; flex: none; }
.v3-ed__tool .v3-icon { width: 21px; height: 21px; }
.v3-ed__tool:hover { color: var(--v3-text); background: var(--v3-surface-2); }
.v3-ed__tool[aria-pressed="true"] { color: var(--v3-brand-deep); background: var(--v3-tint); }
:root[data-theme="dark"] .v3-ed__tool[aria-pressed="true"] { color: var(--v3-brand-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v3-ed__tool[aria-pressed="true"] { color: var(--v3-brand-ink); } }

/* stage */
.v3-ed__stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background-color: var(--ed-stage);
    background-image: radial-gradient(circle, rgba(127, 110, 160, .16) 1px, transparent 1px); background-size: 18px 18px; touch-action: none; display: block; }
.v3-ed__stage .canvas-container { position: absolute !important; inset: 0; }
.v3-ed__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--v3-text-3); font-size: 14px; background: var(--ed-stage); z-index: 3; }
.v3-ed__loading[hidden] { display: none; }
.v3-ed__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--v3-border); border-top-color: var(--v3-brand); animation: v3-ed-spin .8s linear infinite; }
@keyframes v3-ed-spin { to { transform: rotate(360deg); } }
.v3-ed__hud { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 9px; border-radius: var(--v3-r-pill); background: rgba(23, 19, 31, .7); color: #fff; font-size: 11.5px; font-weight: 600; pointer-events: none; font-variant-numeric: tabular-nums; }
.v3-ed__hud:empty { display: none; }

/* start chooser */
.v3-ed__start { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--ed-stage) 82%, transparent); overflow-y: auto; }
.v3-ed__start[hidden] { display: none; }
.v3-ed__startcard { width: min(520px, 100%); padding: 24px; border-radius: var(--v3-r-xl); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.v3-ed__startcard h1 { margin: 0; font-family: var(--v3-font-display); font-size: 22px; }
.v3-ed__sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v3-ed__size { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 12px 4px 10px; min-height: 104px; border-radius: var(--v3-r-md); border: 1px solid var(--v3-border); background: var(--v3-surface-2); color: var(--v3-text); font: 600 12.5px var(--v3-font); cursor: pointer; }
.v3-ed__size:hover { border-color: var(--v3-brand); color: var(--v3-brand-deep); }
.v3-ed__size > span { display: block; height: 44px; max-width: 72px; border: 2px solid currentColor; border-radius: 5px; opacity: .65; margin-bottom: 4px; }
.v3-ed__size small { font-size: 10.5px; color: var(--v3-muted); font-weight: 500; }
.v3-ed__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border-radius: var(--v3-r-lg); border: 2px dashed var(--v3-border-dash); background: var(--v3-surface-2); color: var(--v3-text-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.v3-ed__drop:hover, .v3-ed__drop.is-hot, .v3-ed__drop:focus-within { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-ed__drop.is-hot { animation: v3-ed-pulse 1.6s ease-in-out 2; }
@keyframes v3-ed-pulse { 50% { box-shadow: 0 0 0 6px rgba(139, 92, 246, .18); } }
.v3-ed__drop .v3-icon { width: 26px; height: 26px; color: var(--v3-brand); }
.v3-ed__drop b { color: var(--v3-text); font-size: 14.5px; }
.v3-ed__drop small { font-size: 12px; color: var(--v3-muted); }
.v3-ed__drop--sm { padding: 16px 12px; }

/* side panel */
.v3-ed__panel { background: var(--v3-surface); border-left: 1px solid var(--v3-border); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.v3-ed__grip { display: none; }
.v3-ed__pane { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.v3-ed__pane[hidden], .v3-ed__pane [hidden] { display: none !important; }
.v3-ed__pane > [data-ed-ctx]:not([hidden]), [data-ed-base-tools]:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
.v3-ed__h { margin: 0; font-size: 15px; font-weight: 700; }
.v3-ed__h3 { margin: 8px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--v3-muted); }
.v3-ed__note { margin: 0; font-size: 12.5px; color: var(--v3-muted); line-height: 1.45; list-style: none; }
.v3-ed__row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.v3-ed__lbl { flex: none; width: 84px; font-size: 12.5px; font-weight: 600; color: var(--v3-text-3); }
.v3-ed__row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--v3-brand); }
.v3-ed__input { width: 100%; padding: 8px 10px; border-radius: var(--v3-r-sm); border: 1px solid var(--v3-border); background: var(--v3-surface-2); color: var(--v3-text); font: 14px var(--v3-font); resize: vertical; }
.v3-ed__input:focus { outline: none; border-color: var(--v3-brand); box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
.v3-ed__select { flex: 1; width: auto; min-width: 0; height: 34px; padding: 0 8px; }
.v3-ed__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v3-ed__grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.v3-ed__grid2 .v3-ed__btn, .v3-ed__grid4 .v3-ed__btn { padding: 0 8px; font-size: 13px; }
.v3-ed__objacts { border-top: 1px solid var(--v3-divider); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.v3-ed__adjust { display: flex; flex-direction: column; gap: 4px; }
.v3-ed__adjust .v3-ed__link { align-self: flex-start; }

/* segmented controls */
.v3-ed__seg { display: flex; padding: 3px; gap: 2px; border-radius: var(--v3-r-sm); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-ed__seg button { flex: 1; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--v3-text-3); font: 600 12.5px var(--v3-font); cursor: pointer; padding: 0 6px; white-space: nowrap; }
.v3-ed__seg button[aria-pressed="true"] { background: var(--v3-surface); color: var(--v3-text); box-shadow: 0 1px 3px rgba(23, 19, 31, .1); }
.v3-ed__seg--wrap { flex-wrap: wrap; }
.v3-ed__seg--wrap button { flex: 1 0 auto; }

/* swatches */
.v3-ed__swatches { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.v3-ed__sw { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid rgba(23, 19, 31, .15); cursor: pointer; padding: 0; position: relative; }
.v3-ed__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--v3-surface), 0 0 0 4px var(--v3-brand); }
.v3-ed__sw--none { background: var(--v3-surface) linear-gradient(135deg, transparent 45%, var(--v3-hot) 45%, var(--v3-hot) 55%, transparent 55%); }
.v3-ed__sw--pick { background: conic-gradient(#EF4444, #F59E0B, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #EF4444); overflow: hidden; }
.v3-ed__sw--pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

/* text presets */
.v3-ed__presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v3-ed__presets:empty { display: none; }
.v3-ed__preset { height: 46px; border-radius: var(--v3-r-sm); border: 1px solid var(--v3-border); background: #6B7280 linear-gradient(135deg, #8B8FA0, #4B4F5E); cursor: pointer; display: grid; place-items: center; padding: 0 4px; overflow: hidden; }
.v3-ed__preset span { font-size: 15px; line-height: 1.1; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.v3-ed__preset[data-ed-preset="dark"] { background: #F4F1FA; }
.v3-ed__preset[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--v3-surface), 0 0 0 4px var(--v3-brand); }

/* stickers */
.v3-ed__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v3-ed__chips::-webkit-scrollbar { display: none; }
.v3-ed__chip { flex: none; height: 30px; padding: 0 12px; border-radius: var(--v3-r-pill); border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text-2); font: 600 12.5px var(--v3-font); cursor: pointer; }
.v3-ed__chip[aria-pressed="true"] { background: var(--v3-text); border-color: var(--v3-text); color: var(--v3-bg); }
.v3-ed__stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.v3-ed__st { aspect-ratio: 1; border-radius: var(--v3-r-md); border: 1px solid transparent; background: var(--v3-surface-2); display: grid; place-items: center; cursor: pointer; padding: 6px; }
.v3-ed__st:hover { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-ed__st img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* layouts */
.v3-ed__layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v3-ed__layout { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 6px; border-radius: var(--v3-r-md); border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text-3); cursor: pointer; font: 600 11px var(--v3-font); }
.v3-ed__layout:hover, .v3-ed__layout[aria-pressed="true"] { border-color: var(--v3-brand); color: var(--v3-brand-deep); background: var(--v3-tint); }
.v3-ed__layoutbox { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; }
.v3-ed__layoutbox i { position: absolute; box-sizing: border-box; border: 2px solid var(--v3-surface); background: currentColor; opacity: .55; border-radius: 4px; }

/* templates */
.v3-ed__tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v3-ed__tskel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v3-ed__tpl { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--v3-text); min-width: 0; }
.v3-ed__tpl img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); transition: border-color .15s; }
.v3-ed__tpl:hover img { border-color: var(--v3-brand); }
.v3-ed__tpl span { font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* layers */
.v3-ed__layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v3-ed__layer { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 2px; border-radius: var(--v3-r-sm); border: 1px solid var(--v3-border); background: var(--v3-surface); }
.v3-ed__layer.is-active { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-ed__layer.is-hidden .v3-ed__layername { opacity: .45; text-decoration: line-through; }
.v3-ed__layername { flex: 1; min-width: 0; text-align: left; padding: 8px; border: 0; background: none; color: var(--v3-text); font: 600 13px var(--v3-font); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-ed__layerbtn { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: none; color: var(--v3-text-3); font: 600 13px var(--v3-font); cursor: pointer; }
.v3-ed__layerbtn:hover { background: var(--v3-surface-2); color: var(--v3-text); }

/* post sheet */
.v3-edpost { max-width: 560px; }
.v3-edpost__top { display: flex; gap: 14px; align-items: flex-start; }
.v3-edpost__top img, .v3-edpost__guest img { flex: none; width: 112px; max-height: 160px; object-fit: contain; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-edpost__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-edpost__when { display: flex; flex-direction: column; gap: 8px; }
.v3-edpost__when .v3-ed__seg { max-width: 280px; }
.v3-edpost__when .v3-input[hidden], .v3-edpost__when small[hidden] { display: none; }
.v3-edpost__guest { align-items: center; text-align: center; }
.v3-edpost__guest img { width: 160px; max-height: 200px; }
.v3-edpost__guest p { margin: 0; color: var(--v3-text-2); line-height: 1.5; }

/* ── Editor: tablet and phone ────────────────────────────────────────────── */
@media (max-width: 1099px) { .v3-ed { --ed-panel: 288px; } .v3-ed__ctx { display: none; } }
@media (max-width: 899px) {
    .v3-ed { --ed-bar: 52px; }
    .v3-ed__bar { gap: 4px; padding: 0 6px; }
    .v3-ed__brand { font-size: 16px; }
    .v3-ed__brand small { display: none; }
    .v3-ed__saved { display: none; }
    .v3-ed__hide-sm { display: none; }
    .v3-ed__zoom { display: none; }
    .v3-ed__btn--primary { padding: 0 16px; }

    .v3-ed__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
    .v3-ed__stage { grid-row: 1; }
    .v3-ed__panel { grid-row: 2; display: none; border-left: 0; border-top: 1px solid var(--v3-border); max-height: 44dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(23, 19, 31, .08); position: relative; }
    .v3-ed.is-sheet .v3-ed__panel { display: block; }
    .v3-ed__grip { display: block; position: sticky; top: 0; z-index: 1; height: 18px; background: var(--v3-surface); }
    .v3-ed__grip::after { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--v3-border-dash); }
    .v3-ed__pane { padding: 0 14px 16px; }
    .v3-ed__tools { grid-row: 3; flex-direction: row; justify-content: space-between; border-right: 0; border-top: 1px solid var(--v3-border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; }
    .v3-ed__tool { flex: 1 0 58px; padding: 6px 2px 5px; font-size: 10.5px; }
    .v3-ed__tool .v3-icon { width: 20px; height: 20px; }
    .v3-ed__lbl { width: 76px; }
    .v3-ed__stickers { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
    .v3-ed__tgrid, .v3-ed__tskel { grid-template-columns: repeat(3, 1fr); }
    .v3-ed__layouts { grid-template-columns: repeat(6, 1fr); }
    .v3-ed__layout small { display: none; }
    .v3-ed__presets { grid-template-columns: repeat(6, minmax(64px, 1fr)); overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: none; }
    .v3-ed__grid4 { grid-template-columns: repeat(4, 1fr); }
    .v3-ed__grid4 .v3-ed__btn { font-size: 12px; padding: 0 4px; }
    .v3-ed__sizes { grid-template-columns: 1fr 1fr; }
    .v3-ed__startcard { padding: 18px; }
    .v3-edpost__top img { width: 84px; }
}
@media (max-width: 420px) {
    .v3-ed__ib { width: 34px; }
    .v3-ed__grid4 { grid-template-columns: 1fr 1fr; }
}

/* Post detail: where a meme came from, and a way to remix it */
.v3-post__origin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.v3-post__origin .v3-chip { display: inline-flex; align-items: center; gap: 5px; }
.v3-post__origin .v3-icon { width: 14px; height: 14px; }
.v3-post__remix { margin-left: auto; }
.v3-post__remix .v3-icon { width: 15px; height: 15px; }

/* ==========================================================================
   Phase 12 — Settings (/settings/{section}) and the two-factor login step
   ========================================================================== */
.v3-set { display: flex; flex-direction: column; gap: 18px; }
.v3-set__head { display: flex; flex-direction: column; gap: 6px; }
.v3-set__back { display: none; align-items: center; gap: 4px; align-self: flex-start; height: 36px; padding: 0 10px 0 4px; margin-left: -4px; border-radius: var(--v3-r-sm); color: var(--v3-text-2); font-weight: 600; font-size: 14px; }
.v3-set__back:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-set__back .v3-icon { width: 18px; height: 18px; }
.v3-set__body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }

/* section list */
.v3-set__nav { position: sticky; top: calc(var(--v3-stick) + 16px); display: flex; flex-direction: column; gap: 2px; }
.v3-set__group { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-set__group:first-child { margin-top: 0; }
.v3-set__links { display: flex; flex-direction: column; gap: 2px; }
.v3-set__link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: var(--v3-r-md); color: var(--v3-text-2); font-size: 14.5px; font-weight: 500; }
.v3-set__link:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-set__link.is-active { background: var(--v3-tint); color: var(--v3-brand-ink); font-weight: 600; }
.v3-set__ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: inherit; }
.v3-set__ico .v3-icon { width: 18px; height: 18px; }
.v3-set__lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-set__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--v3-r-pill); background: var(--v3-warn-bg); color: var(--v3-warn); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.v3-set__val, .v3-set__chev { display: none; }
.v3-set__logout { display: none; margin-top: 18px; }

/* panel */
.v3-set__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v3-set__intro { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.v3-set__intro--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
.v3-set__title { margin: 0; font-family: var(--v3-font-display); font-size: 22px; font-weight: 700; color: var(--v3-text); }
.v3-set__lead { margin: 2px 0 0; font-size: 14px; color: var(--v3-text-3); }
.v3-set__card { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--v3-shadow-card); min-width: 0; }
.v3-set__card--flush { padding: 0; overflow: hidden; gap: 0; }
.v3-set__card--danger { border-color: color-mix(in srgb, var(--v3-hot) 28%, var(--v3-border)); }
.v3-set__chead { display: flex; flex-direction: column; gap: 3px; }
.v3-set__chead--row { flex-direction: row; align-items: flex-start; gap: 12px; }
.v3-set__chead-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-set__chead h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--v3-text); }
.v3-set__chead p { margin: 0; font-size: 13.5px; color: var(--v3-text-3); line-height: 1.45; }
.v3-set__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.v3-set__rmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--v3-text); font-size: 14.5px; }
.v3-set__rmain--col { flex-direction: column; align-items: flex-start; gap: 2px; flex-wrap: nowrap; }
.v3-set__rmain--col > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.v3-set__strong { font-weight: 600; word-break: break-all; }
.v3-set__muted { font-size: 13px; color: var(--v3-muted); line-height: 1.45; margin: 0; }
.v3-set__fine { margin: 0; font-size: 12.5px; color: var(--v3-muted); line-height: 1.45; }
.v3-set__warntext { color: var(--v3-warn); font-weight: 600; }
.v3-set__okico { width: 18px; height: 18px; color: var(--v3-ok); flex: none; }
.v3-set__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-set__list > .v3-set__row { padding: 10px 0; border-top: 1px solid var(--v3-divider); }
.v3-set__list > .v3-set__row:first-child { border-top: 0; padding-top: 0; }
.v3-set__list > .v3-set__row:last-child { padding-bottom: 0; }
.v3-set__devico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--v3-tint); color: var(--v3-brand-deep); }
.v3-set__devico .v3-icon { width: 18px; height: 18px; }
.v3-set__pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--v3-r-pill); font-size: 11.5px; font-weight: 700; background: var(--v3-surface-2); color: var(--v3-text-3); border: 1px solid var(--v3-border); white-space: nowrap; flex: none; }
.v3-set__pill--ok { background: var(--v3-ok-bg); color: var(--v3-ok); border-color: transparent; }
.v3-set__pill--brand { background: var(--v3-tint); color: var(--v3-brand-ink); border-color: transparent; }
.v3-set__pill--wait { background: var(--v3-warn-bg); color: var(--v3-warn); border-color: transparent; }
.v3-set__pill--bad { background: var(--v3-hot-bg); color: var(--v3-hot); border-color: transparent; }
.v3-set__note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--v3-r-md); font-size: 13.5px; background: var(--v3-surface-2); color: var(--v3-text-2); }
.v3-set__note .v3-icon { width: 18px; height: 18px; flex: none; }
.v3-set__note > span { flex: 1; min-width: 0; }
.v3-set__note--warn { background: var(--v3-warn-bg); color: var(--v3-text); }
.v3-set__note--warn .v3-icon { color: var(--v3-warn); }
.v3-set__linkbtn { border: 0; background: none; padding: 4px 2px; font: 600 13px var(--v3-font); color: var(--v3-brand-deep); cursor: pointer; }
.v3-set__linkbtn:hover { text-decoration: underline; }
.v3-set__form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.v3-set__form[hidden] { display: none; }
.v3-set__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-set__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-set__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.v3-set__actions--start { justify-content: flex-start; }
.v3-set__check { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13.5px; color: var(--v3-text-2); cursor: pointer; }
.v3-set__check input { width: 16px; height: 16px; accent-color: var(--v3-brand); }
.v3-set__meter { height: 4px; margin-top: -4px; border-radius: 2px; background: var(--v3-divider); overflow: hidden; }
.v3-set__meter span { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .25s, background .25s; background: var(--v3-hot); }
.v3-set__meter span[data-level="2"] { background: #F59E0B; }
.v3-set__meter span[data-level="3"] { background: #22C55E; }
.v3-set__meter span[data-level="4"] { background: var(--v3-ok); }
.v3-set__dl { margin: 0; display: flex; flex-direction: column; }
.v3-set__dl > div { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--v3-divider); font-size: 14px; }
.v3-set__dl > div:first-child { border-top: 0; padding-top: 0; }
.v3-set__dl dt { width: 110px; flex: none; color: var(--v3-text-3); }
.v3-set__dl dd { margin: 0; min-width: 0; color: var(--v3-text); font-weight: 500; overflow-wrap: anywhere; }
.v3-set__dl a { color: var(--v3-brand-deep); }
.v3-btn--dangerline { background: var(--v3-surface); color: var(--v3-hot); border-color: color-mix(in srgb, var(--v3-hot) 35%, var(--v3-border)); }
.v3-btn--dangerline:hover { background: var(--v3-hot-bg); }

/* switch */
.v3-switch { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border: 0; border-radius: var(--v3-r-pill); background: var(--v3-border-dash); cursor: pointer; transition: background .18s; }
.v3-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 19, 31, .25); transition: transform .18s; }
.v3-switch[aria-checked="true"] { background: var(--v3-brand); }
.v3-switch[aria-checked="true"]::after { transform: translateX(18px); }
.v3-switch:disabled { opacity: .4; cursor: default; }
.v3-switch.is-busy { opacity: .75; }
.v3-switch:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }

/* notification matrix */
.v3-set__row--master { padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); }
.v3-set__matrix { display: flex; flex-direction: column; }
.v3-set__mrow { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--v3-divider); }
.v3-set__mrow > span:not(.v3-set__mwhat) { display: flex; justify-content: center; }
.v3-set__mrow--head { border-top: 0; padding: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-muted); }
.v3-set__mrow--head > span:first-child { justify-content: flex-start; }
.v3-set__mwhat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v3-set__mwhat b { display: block; font-size: 14px; font-weight: 600; color: var(--v3-text); }
.v3-set__mwhat small { display: block; font-size: 12.5px; color: var(--v3-muted); line-height: 1.35; }
.v3-set__mico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--v3-tint); color: var(--v3-brand-deep); }
.v3-set__mico .v3-icon { width: 16px; height: 16px; }
.v3-set__seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); align-self: flex-start; }
.v3-set__seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--v3-text-3); font: 600 13px var(--v3-font); cursor: pointer; }
.v3-set__seg button[aria-pressed="true"] { background: var(--v3-surface); color: var(--v3-text); box-shadow: 0 1px 3px rgba(23, 19, 31, .1); }
.v3-set__seg button:disabled { opacity: .6; }

/* wallet */
.v3-set__wallet { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); min-width: 0; }
.v3-set__walico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #9945FF, #14F195); color: #fff; font-size: 18px; }
.v3-set__addr { flex: 1; min-width: 0; font-family: var(--v3-font); font-size: 13.5px; font-weight: 600; color: var(--v3-text); overflow-wrap: anywhere; }
.v3-set__big { font-size: 22px; font-weight: 700; color: var(--v3-text); }
.v3-set__big small { font-size: 13px; font-weight: 600; color: var(--v3-muted); }
.v3-set__walletlink .btn-wallet-connect { height: 44px; padding: 0 18px; border-radius: var(--v3-r-pill); border: 0; background: var(--v3-brand-grad); color: #fff; box-shadow: var(--v3-brand-glow); font: 600 14px var(--v3-font); width: auto; display: inline-flex; }
.v3-set__walletlink .btn-wallet-connect:hover { color: #fff; background: var(--v3-brand-grad); filter: brightness(1.06); }

/* payments */
.v3-set__pays { list-style: none; margin: 0; padding: 0; }
.v3-set__pays > li + li { border-top: 1px solid var(--v3-divider); }
.v3-set__pay { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--v3-text); }
.v3-set__pay:hover { background: var(--v3-surface-2); }
.v3-set__payico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--v3-tint); color: var(--v3-brand-deep); }
.v3-set__payico--in { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-set__payico .v3-icon { width: 17px; height: 17px; }
.v3-set__payamt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.v3-set__payamt b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.v3-set__payamt b.is-in { color: var(--v3-ok); }
.v3-set__payamt b.is-void { color: var(--v3-muted); text-decoration: line-through; font-weight: 600; }
.v3-set__more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--v3-divider); }
.v3-set__card--flush .v3-empty { padding: 36px 20px; }

/* appearance */
.v3-set__themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-set__theme { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--v3-r-lg); border: 1.5px solid var(--v3-border); background: var(--v3-surface); cursor: pointer; text-align: left; color: var(--v3-text); }
.v3-set__theme:hover { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); }
.v3-set__theme[aria-pressed="true"] { border-color: var(--v3-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-set__themeprev { position: relative; display: block; height: 84px; border-radius: 10px; overflow: hidden; background: #FBFAFD; border: 1px solid #EFEAF6; }
.v3-set__themeprev i { position: absolute; display: block; border-radius: 5px; background: #fff; border: 1px solid #EFEAF6; }
.v3-set__themeprev i:nth-child(1) { left: 8px; top: 8px; bottom: 8px; width: 22%; background: #F7F2FC; }
.v3-set__themeprev i:nth-child(2) { left: 30%; right: 8px; top: 8px; height: 30%; }
.v3-set__themeprev i:nth-child(3) { left: 30%; right: 30%; top: calc(30% + 16px); bottom: 8px; background: #8B5CF6; border-color: transparent; opacity: .85; }
.v3-set__theme--dark .v3-set__themeprev { background: #0F0C15; border-color: #2A2338; }
.v3-set__theme--dark .v3-set__themeprev i { background: #17131F; border-color: #2A2338; }
.v3-set__theme--dark .v3-set__themeprev i:nth-child(1) { background: #241C33; }
.v3-set__theme--dark .v3-set__themeprev i:nth-child(3) { background: #A78BFA; }
.v3-set__theme--system .v3-set__themeprev { background: linear-gradient(90deg, #FBFAFD 50%, #0F0C15 50%); }
.v3-set__theme--system .v3-set__themeprev i:nth-child(1) { background: #F7F2FC; }
.v3-set__theme--system .v3-set__themeprev i:nth-child(2) { background: linear-gradient(90deg, #fff 50%, #17131F 50%); }
.v3-set__themename { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.v3-set__themename .v3-icon { width: 16px; height: 16px; }

/* standing */
.v3-set__clean { flex-direction: row; align-items: center; gap: 14px; }
.v3-set__cleanico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-set__cleanico .v3-icon { width: 22px; height: 22px; }
.v3-set__strikes { list-style: none; margin: 0; padding: 0; }
.v3-set__strike { display: flex; gap: 12px; padding: 14px 18px; }
.v3-set__strike + .v3-set__strike { border-top: 1px solid var(--v3-divider); }
.v3-set__strike .v3-set__rmain--col > span:not(.v3-set__muted) { font-size: 14px; color: var(--v3-text-2); line-height: 1.45; }
.v3-set__strikeico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-set__strike.is-warn .v3-set__strikeico { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-set__strikeico .v3-icon { width: 17px; height: 17px; }

/* profile form on the page */
.v3-pedit--page { display: flex; flex-direction: column; gap: 2px; }
.v3-pedit--page .v3-label { margin-top: 10px; }
.v3-pedit--page .v3-set__actions { margin-top: 12px; }

/* skeleton */
.v3-set__skel { display: flex; flex-direction: column; gap: 0; }
.v3-set__skel .v3-set__card { margin-top: 14px; }
.v3-set__card--skel { gap: 0; }

/* sheets */
.v3-set-sheet { max-width: 520px; }
.v3-set__sheettext { margin: 0; font-size: 14px; color: var(--v3-text-2); line-height: 1.5; }
.v3-set__steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--v3-text-2); line-height: 1.6; }
.v3-set__qrwrap { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-set__qr { width: 184px; height: 184px; flex: none; padding: 8px; background: #fff; border-radius: 12px; box-sizing: content-box; display: grid; place-items: center; }
.v3-set__qr img, .v3-set__qr canvas { display: block; width: 184px !important; height: 184px !important; }
.v3-set__key { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.v3-set__key code { font-family: var(--v3-font); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--v3-text); overflow-wrap: anywhere; }
.v3-set__codein { font-size: 20px; font-weight: 700; letter-spacing: .3em; text-align: center; }
.v3-set__codes { margin: 0; padding: 14px 14px 14px 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; border-radius: var(--v3-r-lg); background: var(--v3-surface-2); border: 1px dashed var(--v3-border-dash); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--v3-text); }
.v3-set__codes li::marker { color: var(--v3-muted); font-weight: 500; }

/* the two-factor login step */
.v3-tfa { display: flex; justify-content: center; padding: 40px 0; }
.v3-tfa__card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: center; padding: 28px 24px; border-radius: var(--v3-r-xl); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); }
.v3-tfa__ico { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--v3-tint); color: var(--v3-brand-deep); }
.v3-tfa__ico .v3-icon { width: 26px; height: 26px; }
.v3-tfa__title { margin: 0; font-family: var(--v3-font-display); font-size: 24px; }
.v3-tfa__sub { margin: 0; font-size: 14px; color: var(--v3-text-3); line-height: 1.5; }
.v3-tfa__code { height: 56px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .3em; }
.v3-tfa__alt { border: 0; background: none; color: var(--v3-brand-deep); font: 600 13.5px var(--v3-font); cursor: pointer; padding: 4px; }
.v3-tfa__alt:hover { text-decoration: underline; }

@media (max-width: 1099px) {
    .v3-set__body { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
    .v3-set__grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-set__grid3 > :first-child { grid-column: 1 / -1; }
}

/* phone: the grouped list, then a section on its own screen */
@media (max-width: 767px) {
    .v3-set { gap: 14px; }
    .v3-set__body { display: block; }
    .v3-set:not(.is-open) .v3-set__panel { display: none; }
    .v3-set.is-open .v3-set__nav, .v3-set.is-open .v3-set__heading { display: none; }
    .v3-set.is-open .v3-set__back { display: inline-flex; }
    .v3-set__nav { position: static; gap: 0; }
    .v3-set__group { margin: 16px 6px 6px; }
    .v3-set__links { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); overflow: hidden; gap: 0; }
    .v3-set__link { min-height: 54px; padding: 0 12px; border-radius: 0; color: var(--v3-text); font-size: 15px; }
    .v3-set__link + .v3-set__link { border-top: 1px solid var(--v3-divider); }
    .v3-set__link.is-active { background: none; color: var(--v3-text); font-weight: 500; }
    .v3-set__ico { width: 32px; height: 32px; border-radius: 10px; background: var(--v3-tint); color: var(--v3-brand-deep); }
    .v3-set__ico--security { background: #F1ECF8; color: #5B21B6; }
    .v3-set__ico--notifications { background: var(--v3-warn-bg); color: var(--v3-warn); }
    .v3-set__ico--privacy { background: #DDF6F1; color: #0F766E; }
    .v3-set__ico--wallet { background: #E0EDFF; color: #1D4ED8; }
    .v3-set__ico--standing { background: var(--v3-ok-bg); color: var(--v3-ok); }
    .v3-set__val { display: block; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--v3-muted); }
    .v3-set__chev { display: block; width: 16px; height: 16px; color: var(--v3-faint); flex: none; }
    .v3-set__logout { display: block; }
    .v3-set__card { padding: 16px; border-radius: 16px; }
    .v3-set__card--flush { padding: 0; }
    .v3-set__grid2, .v3-set__grid3 { grid-template-columns: minmax(0, 1fr); }
    .v3-set__mrow { grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 6px; }
    .v3-set__mrow--head { font-size: 10px; letter-spacing: .02em; }
    .v3-set__mico { display: none; }
    .v3-set__themes { grid-template-columns: minmax(0, 1fr); }
    .v3-set__theme { flex-direction: row; align-items: center; }
    .v3-set__themeprev { width: 96px; height: 60px; flex: none; }
    .v3-set__qrwrap { flex-direction: column; }
    .v3-set__pay { padding: 12px 14px; }
    .v3-set__chead--row { flex-wrap: wrap; }
    .v3-set__intro--row { align-items: flex-start; }
}
@media (max-width: 767px) {
    :root[data-theme="dark"] .v3-set__ico--security { background: #241C33; color: #C4B5FD; }
    :root[data-theme="dark"] .v3-set__ico--privacy { background: #0F2E2A; color: #5EEAD4; }
    :root[data-theme="dark"] .v3-set__ico--wallet { background: #14213D; color: #93C5FD; }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .v3-set__ico--security { background: #241C33; color: #C4B5FD; }
    :root:not([data-theme="light"]) .v3-set__ico--privacy { background: #0F2E2A; color: #5EEAD4; }
    :root:not([data-theme="light"]) .v3-set__ico--wallet { background: #14213D; color: #93C5FD; }
}

/* ==========================================================================
   Phase 13 — Analytics (/analytics)
   ========================================================================== */
.v3-an { display: flex; flex-direction: column; gap: 16px; }
.v3-an__head { align-items: flex-end; }
.v3-an__xp .v3-icon { width: 15px; height: 15px; }
.v3-an__region { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v3-an__region[aria-busy="true"] { pointer-events: none; }
.v3-an__tabs { margin-bottom: 0; }
.v3-an__n { margin-left: 5px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--v3-r-pill); background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.v3-an__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-an__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-an__seg a { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 9px; color: var(--v3-text-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.v3-an__seg a:hover { color: var(--v3-text); }
.v3-an__seg a.is-active { background: var(--v3-surface); color: var(--v3-text); box-shadow: 0 1px 3px rgba(23, 19, 31, .1); }
.v3-an__cmp { font-size: 13px; color: var(--v3-muted); }

/* headline numbers */
.v3-an__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v3-an__kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 12px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); min-width: 0; }
.v3-an__kl { font-size: 13px; font-weight: 600; color: var(--v3-text-3); }
.v3-an__kv { font-family: var(--v3-font-display); font-size: 28px; line-height: 1.15; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-an__kd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 18px; }
.v3-an__kx { font-size: 12px; color: var(--v3-muted); }
.v3-an__delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: var(--v3-r-pill); }
.v3-an__delta--up { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-an__delta--down { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-an__delta--flat { background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-an__spark { width: 100%; height: 28px; margin-top: 4px; color: var(--v3-brand); overflow: visible; }
.v3-an__also { margin: -4px 2px 0; font-size: 13px; color: var(--v3-text-3); }
.v3-an__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); font-size: 13px; color: var(--v3-text-2); line-height: 1.45; }
.v3-an__note .v3-icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--v3-brand); }

/* cards */
.v3-an__card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); min-width: 0; }
.v3-an__chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v3-an__chead h2 { margin: 0; flex: 1; font-family: var(--v3-font-display); font-size: 17px; color: var(--v3-text); }
.v3-an__hint { font-size: 12.5px; color: var(--v3-muted); }
.v3-an__live { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--v3-r-pill); background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-an__empty { margin: 0; font-size: 13.5px; color: var(--v3-muted); line-height: 1.5; }
.v3-an__fine { margin: 6px 0 0; font-size: 12px; color: var(--v3-muted); }
.v3-an__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v3-an__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* chart */
.v3-an__metrics { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-an__metrics button { height: 30px; padding: 0 11px; border-radius: var(--v3-r-pill); border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text-2); font: 600 12.5px var(--v3-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.v3-an__metrics button span { color: var(--v3-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.v3-an__metrics button[aria-selected="true"] { background: var(--v3-text); border-color: var(--v3-text); color: var(--v3-bg); }
.v3-an__metrics button[aria-selected="true"] span { color: color-mix(in srgb, var(--v3-bg) 70%, transparent); }
.v3-an__metrics--sm button { height: 28px; font-size: 12px; }
.v3-an__chart { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 220px auto; column-gap: 6px; row-gap: 6px; min-height: 220px; }
.v3-an__chart > .v3-skel { grid-column: 1 / -1; }
.v3-an__chart--sm { grid-template-rows: 130px auto; min-height: 130px; }
.v3-an__yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; color: var(--v3-muted); font-variant-numeric: tabular-nums; padding: 2px 0; }
.v3-an__plot { position: relative; min-width: 0; border-bottom: 1px solid var(--v3-border); touch-action: pan-y; }
.v3-an__plot svg { display: block; width: 100%; height: 100%; }
.v3-an__grid { stroke: var(--v3-divider); stroke-width: 1; stroke-dasharray: 3 4; }
.v3-an__barrect { fill: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-surface)); }
.v3-an__barrect.is-last { fill: var(--v3-brand); }
.v3-an__xaxis { grid-column: 2; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--v3-muted); }
.v3-an__cursor { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); background: color-mix(in srgb, var(--v3-brand) 12%, transparent); border-radius: 4px; pointer-events: none; }
.v3-an__tip { position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 10px; background: var(--v3-text); color: var(--v3-bg); font-size: 12.5px; white-space: nowrap; pointer-events: none; box-shadow: var(--v3-shadow-pop); z-index: 2; }
.v3-an__tip span { display: block; font-size: 11px; opacity: .75; }
.v3-an__tip[hidden], .v3-an__cursor[hidden] { display: none; }

/* best memes */
.v3-an__thead, .v3-an__brow { display: grid; grid-template-columns: minmax(0, 1fr) 64px 56px 72px; align-items: center; gap: 8px; }
.v3-an__thead { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-muted); text-align: right; margin-bottom: -6px; }
.v3-an__best { list-style: none; margin: 0; padding: 0; }
.v3-an__best li + li { border-top: 1px solid var(--v3-divider); }
.v3-an__brow { width: 100%; padding: 8px 0; border: 0; background: none; cursor: pointer; color: var(--v3-text); text-align: left; font: inherit; grid-template-columns: 48px minmax(0, 1fr) 64px 56px 72px; }
.v3-an__thead { grid-template-columns: 48px minmax(0, 1fr) 64px 56px 72px; }
.v3-an__thead span:first-child { grid-column: 1 / 3; }
.v3-an__brow:hover .v3-an__btitle b { color: var(--v3-brand-deep); }
.v3-an__brow img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--v3-surface-2); }
.v3-an__btitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-an__btitle b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__btitle small { font-size: 12px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__bnum { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--v3-text-2); }
.v3-an__more { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--v3-brand-deep); }
.v3-an__more .v3-icon { width: 14px; height: 14px; }

/* heatmap */
.v3-an__heatlead { margin: -4px 0 0; font-size: 13.5px; color: var(--v3-text-2); }
.v3-an__heat { display: grid; grid-template-columns: 34px repeat(8, minmax(0, 1fr)); gap: 3px; align-items: center; }
.v3-an__hx { font-size: 10.5px; color: var(--v3-muted); text-align: center; }
.v3-an__hy { font-size: 11px; color: var(--v3-muted); }
.v3-an__hc { height: 20px; border-radius: 5px; background: var(--v3-surface-2); }
.v3-an__hc--1 { background: color-mix(in srgb, var(--v3-brand) 18%, var(--v3-surface)); }
.v3-an__hc--2 { background: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-surface)); }
.v3-an__hc--3 { background: color-mix(in srgb, var(--v3-brand) 55%, var(--v3-surface)); }
.v3-an__hc--4 { background: color-mix(in srgb, var(--v3-brand) 78%, var(--v3-surface)); }
.v3-an__hc--5 { background: var(--v3-brand-deep); }
.v3-an__legend { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: 11px; color: var(--v3-muted); }
.v3-an__legend i { width: 14px; height: 10px; border-radius: 3px; }
.v3-an__legend i:nth-of-type(1) { background: color-mix(in srgb, var(--v3-brand) 18%, var(--v3-surface)); }
.v3-an__legend i:nth-of-type(2) { background: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-surface)); }
.v3-an__legend i:nth-of-type(3) { background: color-mix(in srgb, var(--v3-brand) 55%, var(--v3-surface)); }
.v3-an__legend i:nth-of-type(4) { background: color-mix(in srgb, var(--v3-brand) 78%, var(--v3-surface)); }
.v3-an__legend i:nth-of-type(5) { background: var(--v3-brand-deep); }
.v3-an__legend span { margin: 0 4px; }

/* fans, genres, boosts, stats */
.v3-an__fans, .v3-an__genres, .v3-an__boosts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-an__fans .v3-avatar { flex: none; }
.v3-an__fans a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--v3-text); }
.v3-an__fans li + li a { border-top: 1px solid var(--v3-divider); }
.v3-an__fname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-an__fans b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__fans small { font-size: 12px; color: var(--v3-muted); }
.v3-an__fans em { font-style: normal; font-size: 12px; color: var(--v3-text-3); white-space: nowrap; }
.v3-an__genres { gap: 10px; }
.v3-an__genres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 13.5px; }
.v3-an__genres li { min-width: 0; }
.v3-an__gname { font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__gval { color: var(--v3-text-3); font-size: 12.5px; }
.v3-an__gval small { color: var(--v3-muted); }
.v3-an__gbar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--v3-surface-2); overflow: hidden; }
.v3-an__gbar i { display: block; height: 100%; border-radius: 3px; background: var(--v3-brand); }
.v3-an__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-an__stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-an__stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v3-an__stats b { font-family: var(--v3-font-display); font-size: 21px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-an__stats span { font-size: 12.5px; color: var(--v3-muted); }
.v3-an__boosts a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--v3-divider); color: var(--v3-text); font-size: 13.5px; }
.v3-an__boosts a:hover span:not(.v3-an__bdot) { color: var(--v3-brand-deep); }
.v3-an__boosts small { grid-column: 2; font-size: 12px; color: var(--v3-muted); }
.v3-an__bdot { width: 8px; height: 8px; border-radius: 50%; background: var(--v3-faint); }
.v3-an__bdot--active { background: var(--v3-ok); box-shadow: 0 0 0 3px var(--v3-ok-bg); }
.v3-an__bdot--cancelled, .v3-an__bdot--failed { background: var(--v3-hot); }

/* Your memes */
.v3-an__bar--memes { gap: 10px; }
.v3-an__search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--v3-r-pill); background: var(--v3-surface); border: 1px solid var(--v3-border); }
.v3-an__search:focus-within { border-color: var(--v3-brand); }
.v3-an__search .v3-icon { width: 16px; height: 16px; color: var(--v3-muted); flex: none; }
.v3-an__search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 14px var(--v3-font); color: var(--v3-text); }
.v3-an__sortlbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v3-text-3); font-weight: 600; }
.v3-an__table { border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); overflow: hidden; }
.v3-an__trow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 92px); align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--v3-divider); background: none; font: inherit; color: var(--v3-text); text-align: left; cursor: pointer; }
.v3-an__trow:hover { background: var(--v3-surface-2); }
.v3-an__trow--head { border-top: 0; cursor: default; padding-top: 12px; padding-bottom: 10px; background: var(--v3-surface-2); }
.v3-an__trow--head:hover { background: var(--v3-surface-2); }
.v3-an__trow--head span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-muted); text-align: right; }
.v3-an__trow--head span:first-child { text-align: left; }
.v3-an__trow--head a { color: inherit; }
.v3-an__trow--head a:hover, .v3-an__trow--head a.is-sorted { color: var(--v3-brand-deep); }
.v3-an__tmeme { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3-an__tmeme img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--v3-surface-2); }
.v3-an__tmeme > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-an__tmeme b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__tmeme small { font-size: 12px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an__tnum { text-align: right; font-size: 13.5px; color: var(--v3-text-2); font-variant-numeric: tabular-nums; }
.v3-an__morewrap { display: flex; justify-content: center; }
.v3-an__skel { display: flex; flex-direction: column; gap: 16px; }
.v3-an__kpi--skel { gap: 0; }

/* one meme sheet */
.v3-an-sheet { max-width: 560px; }
@media (min-width: 700px) { .v3-an-sheet.v3-sheet--bottom { width: 560px; max-height: 88vh; } }
.v3-an-m { display: flex; flex-direction: column; gap: 14px; }
.v3-an-m__head { display: flex; gap: 14px; align-items: center; }
.v3-an-m__img img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; display: block; background: var(--v3-surface-2); }
.v3-an-m__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; color: var(--v3-text-3); }
.v3-an-m__meta a { color: var(--v3-brand-deep); }
.v3-an-m__title { font-family: var(--v3-font-display); font-size: 18px; color: var(--v3-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-an-m__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v3-an-m__stats > div { padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); display: flex; flex-direction: column; }
.v3-an-m__stats b { font-family: var(--v3-font-display); font-size: 19px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-an-m__stats span { font-size: 12px; color: var(--v3-muted); }
.v3-an-m__eng { margin: 0; font-size: 13.5px; color: var(--v3-text-2); }
.v3-an-m__eng b { color: var(--v3-ok); }
.v3-an-m__chart { display: flex; flex-direction: column; gap: 10px; }
.v3-an-m__h { margin: 4px 0 0; font-size: 14px; color: var(--v3-text); }
.v3-an-m__fans { display: flex; gap: 12px; flex-wrap: wrap; }
.v3-an-m__fans a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--v3-text-3); max-width: 72px; }
.v3-an-m__fans span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; }

@media (max-width: 1199px) {
    .v3-an__grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-an__grid3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
    .v3-an__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-an__grid2 { grid-template-columns: minmax(0, 1fr); }
    .v3-an__trow { grid-template-columns: minmax(0, 1fr) repeat(3, 72px); }
    .v3-an__trow > :nth-child(5), .v3-an__trow > :nth-child(6) { display: none; }
}
@media (max-width: 767px) {
    .v3-an__xp { display: none; }
    .v3-an__seg { width: 100%; }
    .v3-an__seg a { flex: 1; justify-content: center; padding: 0 6px; }
    .v3-an__kpi { padding: 12px 12px 10px; }
    .v3-an__kv { font-size: 23px; }
    .v3-an__card { padding: 14px; }
    .v3-an__grid3 { grid-template-columns: minmax(0, 1fr); }
    .v3-an__stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-an__chart { grid-template-rows: 170px auto; min-height: 170px; grid-template-columns: 30px minmax(0, 1fr); }
    .v3-an__thead, .v3-an__brow { grid-template-columns: 40px minmax(0, 1fr) 48px 44px 0; }
    .v3-an__thead span:last-child, .v3-an__brow > :last-child { display: none; }
    .v3-an__brow img { width: 40px; height: 40px; }
    .v3-an__trow { grid-template-columns: minmax(0, 1fr) 58px 48px; padding: 10px 12px; }
    .v3-an__trow > :nth-child(4) { display: none; }
    .v3-an__tmeme img { width: 42px; height: 42px; }
    .v3-an-m__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .v3-an__sortlbl { flex: 1; }
}

/* ==========================================================================
   Phase 14 — XP & Levels (/xp) + the level-up moment
   Cards, chart and "more" link reuse the Analytics pieces (.v3-an__card …).
   ========================================================================== */
.v3-xp { display: flex; flex-direction: column; gap: 16px; }
.v3-xp__head { align-items: flex-end; }
.v3-xp__head .v3-btn .v3-icon { width: 15px; height: 15px; }

/* level */
.v3-xp__hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 24px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-card); }
.v3-xp__ring { position: relative; width: 104px; height: 104px; flex: none; }
.v3-xp__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v3-xp__ringbg { fill: none; stroke: var(--v3-tint); stroke-width: 9; }
.v3-xp__ringfg { fill: none; stroke: var(--v3-brand); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.v3-xp__ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.v3-xp__ring b { font-family: var(--v3-font-display); font-size: 32px; line-height: 1; color: var(--v3-text); }
.v3-xp__ring small { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v3-muted); }
.v3-xp__lvl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-xp__name { font-family: var(--v3-font-display); font-size: 26px; line-height: 1.15; color: var(--v3-text); }
.v3-xp__to { margin: 0; font-size: 14px; color: var(--v3-text-2); }
.v3-xp__to b { color: var(--v3-text); }
.v3-xp__bar { height: 9px; border-radius: 5px; background: var(--v3-tint); overflow: hidden; }
.v3-xp__bar i { display: block; height: 100%; min-width: 9px; border-radius: 5px; background: var(--v3-brand-grad, var(--v3-brand)); }
.v3-xp__fine { font-size: 12px; color: var(--v3-muted); }
.v3-xp__stats { display: grid; grid-template-columns: repeat(3, minmax(120px, 170px)); gap: 20px; margin: 0; padding-left: 22px; border-left: 1px solid var(--v3-border); }
.v3-xp__stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-xp__stats dt { order: 1; font-size: 13px; font-weight: 600; color: var(--v3-text-3); }
.v3-xp__stats dd { order: 0; margin: 0; font-family: var(--v3-font-display); font-size: 26px; line-height: 1.15; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-xp__stats span { order: 2; font-size: 12px; line-height: 1.4; color: var(--v3-muted); }
.v3-xp__stats a { color: var(--v3-brand-deep); font-weight: 600; }
.v3-xp__statnote { display: none; margin: 0; font-size: 12px; line-height: 1.45; color: var(--v3-muted); }

.v3-xp__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v3-xp__grid21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Around you stays in view while the history scrolls (Ken, Oct 13). */
.v3-xp__around { position: sticky; top: calc(var(--v3-topbar-h) + 16px); }
.v3-xp__left { font-size: 13px; font-weight: 700; color: var(--v3-brand-ink); background: var(--v3-tint); padding: 3px 10px; border-radius: var(--v3-r-pill); font-variant-numeric: tabular-nums; }

/* today's limits */
.v3-xp__caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.v3-xp__caps li { display: flex; flex-direction: column; gap: 5px; }
.v3-xp__capline { display: flex; align-items: baseline; gap: 10px; }
.v3-xp__capname { flex: 1; min-width: 0; font-size: 14px; color: var(--v3-text); }
.v3-xp__capname small { margin-left: 4px; font-size: 12px; color: var(--v3-muted); }
.v3-xp__capnum { font-size: 13px; font-weight: 600; color: var(--v3-text-2); font-variant-numeric: tabular-nums; }
.v3-xp__capbar { height: 7px; border-radius: 4px; background: var(--v3-tint); overflow: hidden; }
.v3-xp__capbar i { display: block; height: 100%; border-radius: 4px; background: var(--v3-brand); }
.v3-xp__caps li.is-maxed .v3-xp__capbar i { background: var(--v3-ok); }
.v3-xp__capnote { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--v3-ok); font-weight: 600; }
.v3-xp__capnote .v3-icon { width: 13px; height: 13px; }
.v3-xp__capnote time { font-weight: 700; }
.v3-xp__capcta { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--v3-brand-deep); }
.v3-xp__capcta .v3-icon { width: 13px; height: 13px; }

/* 30 days */
.v3-xp__chart { flex: 1; grid-template-rows: minmax(170px, 1fr) auto; min-height: 170px; }
.v3-xp__spentmark { fill: var(--v3-warn); }
.v3-xp__src { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--v3-muted); }
.v3-xp__src b { color: var(--v3-text); font-weight: 600; }

/* ladder */
.v3-xp__ladder { list-style: none; margin: 0 -20px; padding: 6px 20px 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); overflow-x: auto; scrollbar-width: thin; position: relative; }
.v3-xp__ladder li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 4px; text-align: center; }
.v3-xp__ladder li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--v3-tint); z-index: 0; }
.v3-xp__ladder li:first-child::before { display: none; }
.v3-xp__ladder li.is-done::before, .v3-xp__ladder li.is-now::before { background: var(--v3-brand); }
.v3-xp__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--v3-surface-2); border: 2px solid var(--v3-border); color: var(--v3-muted); font-size: 12.5px; font-weight: 800; }
.v3-xp__dot .v3-icon { width: 15px; height: 15px; }
.is-done .v3-xp__dot { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.is-now .v3-xp__dot { background: var(--v3-text); border-color: var(--v3-text); color: var(--v3-bg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v3-brand) 25%, transparent); }
.v3-xp__rname { font-size: 12.5px; font-weight: 600; color: var(--v3-text-3); line-height: 1.2; }
.v3-xp__rneed { font-size: 11.5px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.is-now .v3-xp__rname { color: var(--v3-text); font-weight: 800; }
.is-done .v3-xp__rname { color: var(--v3-text-2); }

/* history */
.v3-xp__hist[aria-busy="true"] { pointer-events: none; }
.v3-xp__filters { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-xp__filters a { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; color: var(--v3-text-3); font-size: 13px; font-weight: 600; }
.v3-xp__filters a:hover { color: var(--v3-text); }
.v3-xp__filters a.is-active { background: var(--v3-surface); color: var(--v3-text); box-shadow: 0 1px 3px rgba(23, 19, 31, .1); }
.v3-xp__days { display: flex; flex-direction: column; gap: 14px; }
.v3-xp__dayh { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-muted); }
.v3-xp__rows { list-style: none; margin: 0; padding: 0; }
.v3-xp__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.v3-xp__row + .v3-xp__row { border-top: 1px solid var(--v3-divider); }
.v3-xp__ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--v3-tint); color: var(--v3-brand-deep); }
.v3-xp__ico .v3-icon { width: 16px; height: 16px; }
.v3-xp__ico--spend { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-xp__ico--minus { background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-xp__what { flex: 1; min-width: 0; font-size: 14px; color: var(--v3-text); line-height: 1.4; overflow-wrap: anywhere; }
.v3-xp__what a { color: var(--v3-brand-deep); font-weight: 600; }
.v3-xp__what em { font-style: normal; color: var(--v3-text-3); }
.v3-xp__what time { display: block; font-size: 12px; color: var(--v3-muted); }
.v3-xp__amt { flex: none; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.v3-xp__amt--plus { color: var(--v3-ok); }
.v3-xp__amt--spend { color: var(--v3-warn); }
.v3-xp__amt--minus { color: var(--v3-text-3); }
.v3-xp__morebtn { align-self: center; }
.v3-xp__skel { display: flex; flex-direction: column; gap: 10px; }

/* around you */
.v3-xp__gap { margin: 0; font-size: 13.5px; color: var(--v3-text-2); }
.v3-xp__gap b { color: var(--v3-text); }
.v3-xp__lbl { margin: 0 -20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; border-top: 1px solid var(--v3-divider); border-bottom: 1px solid var(--v3-divider); }
.v3-xp__lbl .v3-lbl__link { padding: 9px 20px; gap: 10px; }
.v3-xp__lbl .v3-lbl__rank { width: 26px; font-size: 14px; }
.v3-xp__lbl .v3-lbl__xp { font-size: 14px; }
.v3-xp__lbl .v3-tag { display: none; }   /* level is in the line below; keeps the narrow card on one line */
.v3-xp__lbl .v3-uname { min-width: 0; }
.v3-xp__lbl .v3-uname__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1099px) {
    .v3-xp__hero { grid-template-columns: auto minmax(0, 1fr); }
    .v3-xp__stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--v3-border); }
    .v3-xp__grid21 { grid-template-columns: minmax(0, 1fr); }
    .v3-xp__around { position: static; }
}
@media (max-width: 899px) {
    .v3-xp__grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .v3-xp__head .v3-btn { display: none; }
    .v3-xp__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; gap: 14px; }
    .v3-xp__lvl { width: 100%; align-items: center; }
    .v3-xp__bar { width: 100%; }
    .v3-xp__stats { gap: 10px; }
    .v3-xp__stats dd { font-size: 21px; }
    .v3-xp__stats span { display: none; }
    .v3-xp__statnote { display: block; max-width: 300px; }
    .v3-xp__ladder, .v3-xp__lbl { margin: 0 -14px; }
    .v3-xp__ladder { padding: 6px 14px 4px; grid-auto-columns: 78px; }
    .v3-xp__lbl .v3-lbl__link { padding: 9px 14px; }
    .v3-xp__hist .v3-an__chead h2 { flex: 1 1 100%; }
    .v3-xp__filters { width: 100%; }
    .v3-xp__filters a { flex: 1; justify-content: center; }
}

/* level-up moment (v3.js levelUp) */
.v3-lvlup__back { position: fixed; inset: 0; z-index: 400; background: rgba(15, 10, 25, .45); opacity: 0; transition: opacity .2s; }
.v3-lvlup { position: fixed; z-index: 401; left: 50%; top: 50%; width: min(360px, calc(100vw - 32px)); padding: 30px 24px 22px; border-radius: var(--v3-r-xl); background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); text-align: center; transform: translate(-50%, -46%) scale(.94); opacity: 0; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), opacity .2s; overflow: hidden; }
.v3-lvlup__back.is-on { opacity: 1; }
.v3-lvlup.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.v3-lvlup h2 { margin: 14px 0 4px; font-family: var(--v3-font-display); font-size: 26px; color: var(--v3-text); }
.v3-lvlup__name { margin: 0; font-size: 15px; color: var(--v3-text-2); }
.v3-lvlup__name b { color: var(--v3-brand-deep); }
.v3-lvlup__sub { margin: 6px 0 18px; font-size: 13px; color: var(--v3-muted); }
.v3-lvlup__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.v3-lvlup__badge { position: relative; z-index: 1; width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--v3-brand-grad, var(--v3-brand)); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--v3-brand) 40%, transparent); }
.v3-lvlup__badge .v3-icon { position: absolute; top: 14px; width: 22px; height: 22px; opacity: .9; }
.v3-lvlup__badge b { margin-top: 16px; font-family: var(--v3-font-display); font-size: 34px; line-height: 1; }
.v3-lvlup__burst { position: absolute; left: 50%; top: 76px; width: 0; height: 0; }
.v3-lvlup__burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--v3-brand); opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0); animation: v3-lvlup-pop 1s ease-out .15s forwards; }
.v3-lvlup__burst i:nth-child(3n) { background: #F59E0B; border-radius: 50%; }
.v3-lvlup__burst i:nth-child(3n+1) { background: #22C55E; }
@keyframes v3-lvlup-pop {
    0% { opacity: 1; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(.6); }
    100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(-120px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-lvlup, .v3-lvlup__back, .v3-xp__ringfg { transition: none; }
    .v3-lvlup__burst { display: none; }
}

/* ==========================================================================
   Phase 15 — Boosts & Tips (/boost/{type}/{id}, /boosts, receipts, tips received)
   Cards reuse the Analytics pieces (.v3-an__card, .v3-an__chead, .v3-an__seg).
   ========================================================================== */
.v3-spinner--sm { width: 15px; height: 15px; border-width: 2px; vertical-align: -2px; }
.v3-btn[aria-disabled] { opacity: .55; }

/* boost page */
.v3-bst { display: flex; flex-direction: column; gap: 16px; }
.v3-bst__head { align-items: flex-end; }
.v3-bst__back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--v3-brand-deep); }
.v3-bst__back .v3-icon { width: 14px; height: 14px; }
.v3-bst__hub .v3-icon { width: 15px; height: 15px; }
.v3-bst__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.v3-bst__preview { gap: 10px; }
.v3-bst__where { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--v3-text-3); margin-top: 4px; }
.v3-bst__where .v3-icon { width: 14px; height: 14px; }
.v3-bst__card { pointer-events: none; user-select: none; max-width: 560px; }
.v3-bst__card .v3-post { margin: 0; box-shadow: none; }
.v3-bst__ad { pointer-events: none; user-select: none; width: 300px; max-width: 100%; }
.v3-bst__form { position: sticky; top: calc(var(--v3-stick) + 16px); gap: 12px; }
.v3-bst__h { margin: 0; font-family: var(--v3-font-display); font-size: 17px; color: var(--v3-text); }
.v3-bst__h + .v3-bst__chips { margin-top: -2px; }
.v3-bst__form > .v3-bst__h:not(:first-child) { margin-top: 6px; }
.v3-bst__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v3-bst__chip { height: 46px; border-radius: 12px; border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text); font: 700 15px var(--v3-font); cursor: pointer; }
.v3-bst__chip:hover { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); }
.v3-bst__chip[aria-checked="true"] { border: 2px solid var(--v3-brand); background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-bst__custom { position: relative; display: block; }
.v3-bst__custom span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--v3-muted); font-weight: 600; pointer-events: none; }
.v3-bst__custom .v3-input { padding-left: 28px; height: 46px; width: 100%; }
.v3-bst__est { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--v3-tint); }
.v3-bst__est b { font-family: var(--v3-font-display); font-size: 19px; color: var(--v3-brand-ink); }
.v3-bst__est span { font-size: 12.5px; color: var(--v3-text-2); line-height: 1.45; }
.v3-bst__pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.v3-bst__pay { position: relative; display: block; cursor: pointer; }
.v3-bst__pay[hidden] { display: none; }
.v3-bst__pay input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.v3-bst__pay > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--v3-border); background: var(--v3-surface); }
.v3-bst__pay b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--v3-text); }
.v3-bst__pay b .v3-icon { width: 16px; height: 16px; color: var(--v3-brand); }
.v3-bst__pay small { font-size: 12px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-bst__pay input:checked + span { border: 2px solid var(--v3-brand); background: var(--v3-tint); padding: 10px 11px; }
.v3-bst__pay input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-bst__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--v3-text-3); }
.v3-bst__hint.is-warn { color: var(--v3-warn); font-weight: 600; }
.v3-bst__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--v3-text-2); }
.v3-bst__label summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--v3-brand-deep); list-style: none; }
.v3-bst__label summary::-webkit-details-marker { display: none; }
.v3-bst__label summary::before { content: "+ "; }
.v3-bst__label[open] summary::before { content: "− "; }
.v3-bst__label[open] { display: flex; flex-direction: column; gap: 6px; }
.v3-bst__label .v3-input { height: 42px; }
.v3-bst__fine { font-size: 12px; color: var(--v3-muted); }
.v3-bst__err { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--v3-warn-bg); color: var(--v3-warn); font-size: 13px; font-weight: 600; }
.v3-bst__err[hidden] { display: none; }
.v3-bst__foot { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--v3-divider); }
.v3-bst__total { display: flex; flex-direction: column; flex: none; }
.v3-bst__total small { font-size: 12px; color: var(--v3-muted); }
.v3-bst__total b { font-family: var(--v3-font-display); font-size: 22px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-bst__foot .v3-btn { flex: 1; }

/* Your boosts */
.v3-bhub { display: flex; flex-direction: column; gap: 16px; }
.v3-bhub__head { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.v3-bhub__tabs a { cursor: pointer; }
.v3-bhub__panel { display: flex; flex-direction: column; gap: 14px; }
.v3-bhub__panel[hidden] { display: none; }
.v3-bhub__banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--v3-r-lg); background: var(--v3-ok-bg); color: var(--v3-text); font-size: 14px; line-height: 1.45; }
.v3-bhub__banner.is-pending { background: var(--v3-warn-bg); }
.v3-bhub__banner > span:nth-child(2) { flex: 1; }
.v3-bhub__bico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--v3-surface); color: var(--v3-ok); }
.v3-bhub__banner.is-pending .v3-bhub__bico { color: var(--v3-warn); }
.v3-bhub__bico .v3-icon { width: 18px; height: 18px; }
.v3-bhub__card.is-focus, .v3-bhub__erow.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 35%, transparent); }
.v3-bhub__top { display: flex; align-items: center; gap: 14px; }
.v3-bhub__thumb { width: 60px; height: 60px; flex: none; border-radius: 12px; object-fit: cover; background: var(--v3-surface-2); }
.v3-bhub__thumb--sm { width: 44px; height: 44px; border-radius: 10px; }
.v3-bhub__thumb--none { display: grid; place-items: center; color: var(--v3-brand); background: var(--v3-tint); }
.v3-bhub__thumb--none .v3-icon { width: 22px; height: 22px; }
.v3-bhub__what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-bhub__title { font-size: 15.5px; font-weight: 700; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.v3-bhub__title:hover { color: var(--v3-brand-deep); }
.v3-bhub__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--v3-muted); }
.v3-bhub__pill { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-bhub__pill.is-run { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-bhub__pill.is-wait { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-bhub__lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--v3-text-2); }
.v3-bhub__lbl [data-v3-boost-label]:empty { display: none; }
.v3-bhub__lbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--v3-brand-deep); font: 600 12.5px var(--v3-font); cursor: pointer; }
.v3-bhub__lbtn .v3-icon { width: 12px; height: 12px; }
.v3-bhub__acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.v3-bhub__acts .v3-icon { width: 15px; height: 15px; }
.v3-bhub__spend { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--v3-text-2); }
.v3-bhub__spend b { color: var(--v3-text); }
.v3-bhub__left { color: var(--v3-muted); }
.v3-bhub__bar { height: 8px; border-radius: 4px; background: var(--v3-tint); overflow: hidden; }
.v3-bhub__bar i { display: block; height: 100%; min-width: 4px; border-radius: 4px; background: var(--v3-brand); }
.v3-bhub__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.v3-bhub__stats div { display: flex; flex-direction: column; gap: 1px; }
.v3-bhub__stats dt { order: 1; font-size: 12.5px; color: var(--v3-muted); }
.v3-bhub__stats dd { margin: 0; font-family: var(--v3-font-display); font-size: 21px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-bhub__thead, .v3-bhub__erow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 80px 70px 36px; gap: 10px; align-items: center; }
.v3-bhub__thead { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-muted); text-align: right; margin-bottom: -6px; }
.v3-bhub__ended { list-style: none; margin: 0; padding: 0; }
.v3-bhub__erow { padding: 10px 0; border-radius: 8px; }
.v3-bhub__erow + .v3-bhub__erow { border-top: 1px solid var(--v3-divider); }
.v3-bhub__ewhat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3-bhub__num { text-align: right; font-size: 14px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-bhub__num small { color: var(--v3-muted); font-size: 11.5px; }
.v3-bhub__rcpt { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--v3-text-3); }
.v3-bhub__rcpt:hover { background: var(--v3-surface-2); color: var(--v3-brand-deep); }
.v3-bhub__rcpt .v3-icon { width: 17px; height: 17px; }
.v3-bhub__empty { align-items: center; text-align: center; padding: 36px 24px; }
.v3-bhub__empty h2 { margin: 4px 0 0; font-family: var(--v3-font-display); font-size: 20px; color: var(--v3-text); }
.v3-bhub__empty p { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--v3-text-2); }
.v3-bhub__eico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--v3-tint); color: var(--v3-brand); }
.v3-bhub__eico .v3-icon { width: 24px; height: 24px; }
.v3-bsheet__body { display: flex; flex-direction: column; gap: 12px; }
.v3-bsheet__row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (min-width: 700px) {
    .v3-bsheet.v3-sheet--bottom { width: 460px; }
    .v3-bsheet--sm.v3-sheet--bottom { width: 400px; }
}

/* receipts (bare layout, printable) */
.v3--bare:has(.v3-rcpt) { overflow: auto; }
.v3-bare:has(.v3-rcpt) { height: auto; min-height: 100vh; min-height: 100dvh; background: var(--v3-bg); }
.v3-rcpt { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.v3-rcpt__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v3-rcpt__back { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--v3-brand-deep); }
.v3-rcpt__back .v3-icon { width: 15px; height: 15px; }
.v3-rcpt__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v3-font-display); font-size: 16px; color: var(--v3-text); }
.v3-rcpt__brand img { width: 28px; height: 28px; object-fit: contain; }
.v3-rcpt__card { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl, 22px); box-shadow: var(--v3-shadow-card); padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.v3-rcpt__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.v3-rcpt__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--v3-tint); color: var(--v3-brand); margin-bottom: 6px; }
.v3-rcpt__ico.is-ok { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-rcpt__ico .v3-icon { width: 24px; height: 24px; }
.v3-rcpt__kind { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-rcpt__amt { margin: 0; font-family: var(--v3-font-display); font-size: 40px; line-height: 1.1; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-rcpt__what { margin: 0; font-size: 14.5px; color: var(--v3-text-2); overflow-wrap: anywhere; }
.v3-rcpt__status { margin-top: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--v3-r-pill); background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-rcpt__status.is-ok { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-rcpt__status.is-warn { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-rcpt__rows { margin: 0; display: flex; flex-direction: column; }
.v3-rcpt__rows div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--v3-divider); }
.v3-rcpt__rows dt { font-size: 13.5px; color: var(--v3-muted); }
.v3-rcpt__rows dd { margin: 0; font-size: 14px; color: var(--v3-text); text-align: right; overflow-wrap: anywhere; }
.v3-rcpt__rows a { color: var(--v3-brand-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.v3-rcpt__rows a .v3-icon { width: 13px; height: 13px; }
.v3-rcpt__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.v3-rcpt__foot .v3-icon { width: 16px; height: 16px; }
.v3-rcpt__foot p { margin: 0; font-size: 12px; color: var(--v3-muted); }
@media print {
    .v3--bare:has(.v3-rcpt) { background: #fff; }
    .v3-rcpt__back, .v3-rcpt__foot .v3-btn, .v3-toasts { display: none !important; }
    .v3-rcpt__card { box-shadow: none; border-color: #ddd; }
    .v3-rcpt__rows a { color: #111; }
}

/* Settings > Wallet: tips received */
.v3-tipsr__tot { display: flex; gap: 28px; }
.v3-tipsr__tot div { display: flex; flex-direction: column; }
.v3-tipsr__tot b { font-family: var(--v3-font-display); font-size: 24px; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-tipsr__tot span { font-size: 12.5px; color: var(--v3-muted); }
.v3-tipsr { list-style: none; margin: 0; padding: 0; }
.v3-tipsr li + li { border-top: 1px solid var(--v3-divider); }
.v3-tipsr__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--v3-text); }
.v3-tipsr__row:hover .v3-tipsr__who b { color: var(--v3-brand-deep); }
.v3-tipsr__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-tipsr__who b { font-size: 14px; }
.v3-tipsr__who small { font-size: 12.5px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-tipsr__amt { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; color: var(--v3-ok); font-variant-numeric: tabular-nums; }
.v3-tipsr__amt small { font-size: 11.5px; font-weight: 500; color: var(--v3-muted); }

@media (max-width: 1099px) {
    .v3-bst__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-bst__form { position: static; order: -1; }
}
@media (max-width: 767px) {
    .v3-bst__hub { display: none; }
    .v3-bst__foot { position: sticky; bottom: calc(var(--v3-tabbar-h, 64px) + 8px); margin: 0 -14px -14px; padding: 12px 14px; background: var(--v3-surface); border-radius: 0 0 var(--v3-r-lg) var(--v3-r-lg); z-index: 2; }
    .v3-bst__chip { height: 44px; font-size: 14.5px; }
    .v3-bhub__top { flex-wrap: wrap; }
    .v3-bhub__acts { width: 100%; justify-content: stretch; }
    .v3-bhub__acts > * { flex: 1; justify-content: center; }
    .v3-bhub__thead { display: none; }
    .v3-bhub__erow { grid-template-columns: repeat(3, minmax(0, 1fr)) 36px; row-gap: 6px; }
    .v3-bhub__ewhat { grid-column: 1 / -1; }
    .v3-bhub__num { text-align: left; font-size: 13.5px; }
    .v3-bhub__num::before { content: attr(data-label); display: block; font-size: 11px; color: var(--v3-muted); }
    .v3-rcpt__rows div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .v3-rcpt__rows dd { text-align: left; }
}

/* ==========================================================================
   Phase 16 — Sign-in, static and error pages (login, sign up, guest sheet, help, legal, contact, errors, email links)
   ========================================================================== */
/* Full-screen pages (auth, email links) scroll normally; the bare layout was made for the Studio editor. */
.v3--bare:has(.v3-auth, .v3-mail) { overflow: auto; }
.v3-bare:has(.v3-auth, .v3-mail) { height: auto; min-height: 100vh; min-height: 100dvh; background: var(--v3-bg); }

/* ── split screen: brand panel + form ──────────────────────────────────── */
.v3-auth { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 100vh; min-height: 100dvh; }
.v3-auth__brand {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column; gap: 28px; padding: 40px clamp(32px, 4vw, 64px);
    background: radial-gradient(120% 80% at 0% 0%, #A78BFA 0%, transparent 60%), linear-gradient(150deg, #7C3AED 0%, #5B21B6 55%, #2E1065 100%);
    color: #fff;
}
.v3-auth__logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--v3-font-display); color: #fff; }
.v3-auth__logo img { width: auto; height: 34px; filter: drop-shadow(0 2px 6px rgba(20, 6, 48, .3)); }
.v3-auth__pitch { max-width: 440px; }
.v3-auth__tag { font: 700 clamp(30px, 2.6vw, 42px)/1.1 var(--v3-font-display); letter-spacing: -.01em; margin: 0 0 12px; }
.v3-auth__pitch p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0; }
.v3-auth__memes {
    flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 12px;
    transform: rotate(-4deg) scale(1.08); transform-origin: 30% 40%; margin: 8px -40px 0 -8px;
    mask-image: linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.v3-auth__memes img { width: 100%; height: 100%; min-height: 120px; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 30px rgba(20, 6, 48, .35); background: rgba(255, 255, 255, .1); }
.v3-auth__memes img:nth-child(3n+2) { transform: translateY(28px); }
.v3-auth__nums { margin: auto 0 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .86); }

.v3-auth__main { display: flex; flex-direction: column; align-items: center; padding: 40px 24px 24px; background: var(--v3-bg); }
.v3-auth__mlogo { display: none; align-items: center; gap: 9px; font: 700 18px/1 var(--v3-font-display); color: var(--v3-text); }
.v3-auth__mlogo img { width: auto; height: 30px; }
.v3-auth__form { width: 100%; max-width: 400px; margin: auto 0; padding: 24px 0; }
.v3-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; }
.v3-auth__foot a { color: var(--v3-muted); }
.v3-auth__foot a:hover { color: var(--v3-text); }

.v3-auth__title { font: 700 28px/1.15 var(--v3-font-display); color: var(--v3-text); margin: 0 0 6px; }
.v3-auth__sub { font-size: 14.5px; line-height: 1.5; color: var(--v3-text-3); margin: 0 0 22px; }
.v3-auth__sub a, .v3-auth__legal a, .v3-auth__fine a, .v3-auth__lrow a { color: var(--v3-brand-ink); font-weight: 600; }
.v3-auth__sub a:hover, .v3-auth__legal a:hover, .v3-auth__fine a:hover, .v3-auth__lrow a:hover { text-decoration: underline; }
.v3-auth__sub--end { margin: 20px 0 0; text-align: center; }
.v3-auth__fine { font-size: 12.5px; line-height: 1.5; color: var(--v3-muted); margin: 14px 0 0; text-align: center; }
.v3-auth__badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 24px; margin-bottom: 16px; }
.v3-auth__badge--ok { background: var(--v3-ok-bg); color: var(--v3-ok); }

.v3-auth__ok, .v3-auth__err { display: flex; gap: 8px; padding: 11px 14px; border-radius: var(--v3-r-md); font-size: 13.5px; line-height: 1.45; margin: 0 0 16px; }
.v3-auth__ok { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-auth__err { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-auth__err[hidden], .v3-auth__ok[hidden] { display: none; }

/* social + wallet buttons */
.v3-auth__social { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.v3-auth__sbtn, .v3-wal__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 14px;
    border: 1px solid var(--v3-border); border-radius: var(--v3-r-md); background: var(--v3-surface);
    font-size: 14px; font-weight: 600; color: var(--v3-text); transition: border-color .15s, background .15s;
}
.v3-auth__sbtn:hover, .v3-wal__btn:hover { background: var(--v3-surface-2); border-color: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-border)); }
.v3-auth__smark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 700 13px/1 var(--v3-font); color: #fff; background: var(--v3-text-3); }
.v3-auth__smark--google { background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.v3-auth__smark--discord { background: #5865F2; }
.v3-auth__smark--x { background: #000; }
.v3-auth__smark--reddit { background: #FF4500; }
.v3-auth__smark--facebook { background: #1877F2; }
.v3-wal__btn { width: 100%; }
.v3-wal__btn .v3-icon { font-size: 19px; color: var(--v3-brand); }
.v3-wal__btn[disabled] { opacity: .6; pointer-events: none; }
.v3-wal__name { display: grid; gap: 8px; margin-top: 14px; padding: 16px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface-2); }
.v3-wal__name[hidden] { display: none; }
.v3-wal__name .v3-auth__hint { margin: -4px 0 2px; }
.v3-wal__status { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; color: var(--v3-text-3); }
.v3-wal__status[hidden] { display: none; }
.v3-wal .v3-auth__err { margin: 10px 0 0; }

.v3-auth__or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12.5px; color: var(--v3-muted); }
.v3-auth__or::before, .v3-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--v3-divider); }

/* form fields */
.v3-auth__fields { display: grid; gap: 16px; }
.v3-auth__field { display: grid; gap: 6px; }
.v3-auth__label { font-size: 13px; font-weight: 600; color: var(--v3-text-2); }
.v3-auth__hint { font-size: 12.5px; color: var(--v3-muted); margin: 0; }
.v3-auth__lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.v3-auth__fields .v3-input { height: 46px; font-size: 15px; }
.v3-input.is-bad { border-color: var(--v3-hot); }
.v3-input.is-bad:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-hot) 18%, transparent); }
.v3-auth__pw { position: relative; display: block; }
.v3-auth__pw .v3-input { padding-right: 48px; }
.v3-auth__eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 38px; border-radius: 10px; color: var(--v3-muted); font-size: 18px; }
.v3-auth__eye:hover { color: var(--v3-text); background: var(--v3-surface-2); }
.v3-auth__eye[aria-pressed="true"] { color: var(--v3-brand); }
.v3-auth__check { min-height: 17px; font-size: 12.5px; line-height: 1.4; color: var(--v3-muted); }
.v3-auth__check.is-ok { color: var(--v3-ok); }
.v3-auth__check.is-bad { color: var(--v3-hot); }
.v3-auth__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.v3-auth__meter i { height: 4px; border-radius: 4px; background: var(--v3-divider); transition: background .2s; }
.v3-auth__meter[data-s="1"] i:nth-child(-n+1) { background: var(--v3-hot); }
.v3-auth__meter[data-s="2"] i:nth-child(-n+2) { background: var(--v3-warn); }
.v3-auth__meter[data-s="3"] i:nth-child(-n+3) { background: #65A30D; }
.v3-auth__meter[data-s="4"] i { background: var(--v3-ok); }
.v3-auth__check-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--v3-text-2); cursor: pointer; }
.v3-auth__check-row input { width: 18px; height: 18px; accent-color: var(--v3-brand); }
.v3-auth__legal { font-size: 12.5px; line-height: 1.5; color: var(--v3-muted); margin: 0; }
.v3-auth__code { text-align: center; font-size: 24px !important; font-weight: 600; letter-spacing: .18em; font-variant-numeric: tabular-nums; height: 56px !important; }
.v3-auth__link { display: block; width: 100%; padding: 6px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-auth__link:hover { text-decoration: underline; }
.v3-auth .g-recaptcha { min-height: 78px; }

@media (max-width: 1023px) {
    .v3-auth { grid-template-columns: 1fr; }
    .v3-auth__brand { display: none; }
    .v3-auth__mlogo { display: inline-flex; }
    .v3-auth__main { padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
    .v3-auth__form { padding: 28px 0 24px; }
}
@media (max-width: 420px) {
    .v3-auth__title { font-size: 25px; }
    .v3-auth__social { grid-template-columns: 1fr 1fr; }
}

/* ── wallet picker sheet (phones) ──────────────────────────────────────── */
.v3-walsheet__lead { font-size: 14px; line-height: 1.5; color: var(--v3-text-3); margin: 0 0 14px; }
.v3-walsheet__app { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); font-size: 15px; font-weight: 600; color: var(--v3-text); }
.v3-walsheet__app + .v3-walsheet__app { margin-top: 8px; }
.v3-walsheet__app:hover { background: var(--v3-surface-2); }
.v3-walsheet__app img { border-radius: 10px; }
.v3-walsheet__wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: 13.5px; color: var(--v3-text-3); }
.v3-walsheet__wait[hidden] { display: none; }

/* ── guest sign-in sheet ───────────────────────────────────────────────── */
.v3-signin__head { position: relative; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 24px 0; border-bottom: 0; text-align: center; }
.v3-signin__head .v3-iconbtn { position: absolute; top: 12px; right: 12px; }
.v3-signin__mark { height: 30px; width: auto; }
.v3-signin .v3-sheet__title { font-size: 21px; line-height: 1.25; }
.v3-signin__body { padding: 6px 24px 24px; }
.v3-signin .v3-auth__sub { margin: 0 0 18px; text-align: center; font-size: 14px; }
.v3-signin .v3-auth__sub--end { margin: 16px 0 0; }
.v3-signin .v3-auth__fields { gap: 12px; }
.v3-signin .v3-auth__or { margin: 16px 0; }
.v3-signin .v3-auth__check-row { font-size: 13.5px; }
.v3-signin .v3-auth__check-row input { width: 16px; height: 16px; }
@media (min-width: 700px) { .v3-signin.v3-sheet--bottom { width: 420px; } }

/* ── long-read pages: terms, privacy, about ────────────────────────────── */
.v3-doc { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: 48px; justify-content: center; padding: 28px 24px 64px; }
.v3-doc__toc { position: sticky; top: calc(var(--v3-stick) + 24px); align-self: start; display: grid; gap: 4px; max-height: calc(100vh - var(--v3-topbar-h) - 48px); overflow-y: auto; }
.v3-doc__toc[hidden] { display: none; }
.v3-doc__tochead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-muted); padding: 0 12px 6px; }
.v3-doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v3-doc__toc a { display: block; padding: 7px 12px; border-radius: 10px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--v3-text-3); }
.v3-doc__toc a:hover { color: var(--v3-text); background: var(--v3-surface-2); }
.v3-doc__toc a.is-on { color: var(--v3-brand-ink); background: var(--v3-tint); font-weight: 600; }
.v3-doc__head { margin-bottom: 26px; }
.v3-doc__mtoc { display: none; }
.v3-doc__mtoc summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--v3-text); cursor: pointer; list-style: none; }
.v3-doc__mtoc summary::-webkit-details-marker { display: none; }
.v3-doc__mtoc summary::after { content: '+'; font-size: 18px; color: var(--v3-muted); }
.v3-doc__mtoc[open] summary::after { content: '\2212'; }
.v3-doc__body .v3-doc__mtoc ol { list-style: none; margin: 0; padding: 0 8px 10px; display: grid; gap: 2px; }
.v3-doc__body .v3-doc__mtoc li { margin: 0; }
.v3-doc__body .v3-doc__mtoc a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--v3-text-2); font-weight: 500; }
.v3-doc__body .v3-doc__mtoc a:hover { background: var(--v3-surface-2); text-decoration: none; }
.v3-doc__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand-ink); margin-bottom: 8px; }
.v3-doc__title { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--v3-font-display); color: var(--v3-text); margin: 0; letter-spacing: -.01em; }
.v3-doc__updated { display: block; margin-top: 10px; font-size: 13px; color: var(--v3-muted); }
.v3-doc__body { font-size: 15.5px; line-height: 1.7; color: var(--v3-text-2); }
.v3-doc__body h2 { font: 700 22px/1.25 var(--v3-font-display); color: var(--v3-text); margin: 40px 0 12px; scroll-margin-top: calc(var(--v3-stick) + 20px); }
.v3-doc__body h3 { font-size: 16.5px; font-weight: 700; color: var(--v3-text); margin: 26px 0 8px; }
.v3-doc__body p { margin: 0 0 14px; }
.v3-doc__body ul, .v3-doc__body ol { margin: 0 0 16px; padding-left: 22px; }
.v3-doc__body li { margin-bottom: 8px; }
.v3-doc__body li::marker { color: var(--v3-brand); }
.v3-doc__body a { color: var(--v3-brand-ink); font-weight: 600; }
.v3-doc__body a:hover { text-decoration: underline; }
.v3-doc__body b, .v3-doc__body strong { color: var(--v3-text); }
.v3-doc__lead { font-size: 18px; line-height: 1.55; color: var(--v3-text); margin: 0 0 18px !important; }
.v3-doc__caps { font-size: 13px; line-height: 1.6; letter-spacing: .01em; padding: 14px 16px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); border: 1px solid var(--v3-border); }
.v3-doc__short { padding: 18px 20px; border-radius: var(--v3-r-lg); background: var(--v3-tint); color: var(--v3-text); line-height: 1.6; margin-bottom: 8px; }
.v3-doc__draft { padding: 10px 14px; border-radius: var(--v3-r-md); background: var(--v3-warn-bg); color: var(--v3-warn); font-weight: 600; font-size: 14px; }
.v3-doc__table { overflow-x: auto; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); margin: 0 0 18px; }
.v3-doc__table:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-doc__table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.v3-doc__table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-muted); background: var(--v3-surface-2); padding: 10px 16px; }
.v3-doc__table td { vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--v3-divider); width: 50%; }
.v3-doc__foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--v3-divider); font-size: 14px; color: var(--v3-muted); }

.v3-about__values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 8px; }
.v3-about__values > div { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); }
.v3-about__values b { font-size: 15.5px; color: var(--v3-text); margin-top: 6px; }
.v3-about__values p { margin: 0; font-size: 14px; line-height: 1.55; }
.v3-about__nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 6px 0 8px; }
.v3-about__nums > div { padding: 18px; border-radius: var(--v3-r-lg); background: var(--v3-tint); text-align: center; }
.v3-about__nums b { display: block; font: 700 30px/1.1 var(--v3-font-display); color: var(--v3-brand-ink); font-variant-numeric: tabular-nums; }
.v3-about__nums span { font-size: 13px; font-weight: 600; color: var(--v3-text-3); }

@media (max-width: 1023px) {
    .v3-doc { grid-template-columns: minmax(0, 720px); gap: 0; padding: 20px 18px 48px; }
    .v3-doc__toc { display: none !important; }
    .v3-doc__mtoc { display: block; margin: 0 0 24px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); }
}
@media (max-width: 560px) {
    .v3-doc__body { font-size: 15px; }
    .v3-doc__lead { font-size: 16.5px; }
    .v3-about__values { grid-template-columns: 1fr; }
    .v3-about__nums b { font-size: 24px; }
    .v3-about__nums > div { padding: 14px 8px; }
}
@media print {
    .v3-doc { display: block; padding: 0; }
    .v3-doc__toc, .v3-doc__foot, .v3-doc__draft { display: none !important; }
    .v3-doc__body { color: #000; font-size: 11pt; }
    .v3-doc__body a { color: #000; }
}

/* ── help center ───────────────────────────────────────────────────────── */
.v3-help { max-width: 860px; margin: 0 auto; padding: 28px 24px 64px; }
.v3-help__head { text-align: center; margin-bottom: 26px; }
.v3-help__search { position: relative; display: block; max-width: 560px; margin: 20px auto 0; }
.v3-help__search > .v3-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--v3-muted); pointer-events: none; }
.v3-help__search .v3-input { height: 54px; padding: 0 92px 0 46px; font-size: 16px; border-radius: var(--v3-r-pill); box-shadow: var(--v3-shadow-card); }
.v3-help__count { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--v3-muted); }
.v3-help__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.v3-help__tile { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); transition: border-color .15s, transform .15s; }
.v3-help__tile:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); transform: translateY(-1px); }
.v3-help__tile b { display: block; font-size: 15px; color: var(--v3-text); }
.v3-help__tile small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--v3-text-3); }
.v3-help__tico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--v3-tint); color: var(--v3-brand-ink); font-size: 19px; }
.v3-help__group { margin-bottom: 26px; scroll-margin-top: calc(var(--v3-stick) + 16px); }
.v3-help__group[hidden] { display: none; }
.v3-help__gh { display: flex; align-items: center; gap: 9px; font: 700 19px/1.2 var(--v3-font-display); color: var(--v3-text); margin: 0 0 10px; }
.v3-help__gh .v3-icon { color: var(--v3-brand); }
.v3-help__list { border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); overflow: hidden; }
.v3-help__q + .v3-help__q { border-top: 1px solid var(--v3-divider); }
.v3-help__q[hidden] { display: none; }
.v3-help__q summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--v3-text); cursor: pointer; list-style: none; scroll-margin-top: calc(var(--v3-stick) + 16px); }
.v3-help__q summary::-webkit-details-marker { display: none; }
.v3-help__q summary:hover { background: var(--v3-surface-2); }
.v3-help__q summary .v3-icon { flex: none; color: var(--v3-muted); transition: transform .2s; }
.v3-help__q[open] summary .v3-icon { transform: rotate(180deg); }
.v3-help__q:target summary, .v3-help__q.is-hit summary { background: var(--v3-tint); }
.v3-help__a { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.65; color: var(--v3-text-2); }
.v3-help__a p { margin: 0 0 10px; }
.v3-help__a p:last-child { margin-bottom: 0; }
.v3-help__a ul { margin: 0 0 10px; padding-left: 20px; }
.v3-help__a a { color: var(--v3-brand-ink); font-weight: 600; }
.v3-help__a a:hover { text-decoration: underline; }
.v3-help__a mark, .v3-help__q summary mark { background: color-mix(in srgb, var(--v3-brand) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.v3-help__empty { text-align: center; padding: 36px 16px; color: var(--v3-text-3); font-size: 15px; }
.v3-help__empty[hidden] { display: none; }
.v3-help__empty a { color: var(--v3-brand-ink); font-weight: 600; }
.v3-help__more { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding: 20px; border-radius: var(--v3-r-lg); background: var(--v3-tint); }
.v3-help__more > div { flex: 1; }
.v3-help__more b { font-size: 16px; color: var(--v3-text); }
.v3-help__more p { margin: 2px 0 0; font-size: 14px; color: var(--v3-text-3); }
.v3-help.is-searching .v3-help__tiles { display: none; }
@media (max-width: 760px) {
    .v3-help { padding: 18px 16px 48px; }
    .v3-help__tiles { grid-template-columns: 1fr 1fr; }
    .v3-help__tile { flex-direction: column; gap: 8px; padding: 14px; }
    .v3-help__tile small { display: none; }
    .v3-help__more { flex-wrap: wrap; }
    .v3-help__more .v3-btn { width: 100%; }
}

/* ── contact ───────────────────────────────────────────────────────────── */
.v3-contact { max-width: 640px; margin: 0 auto; padding: 28px 24px 64px; }
.v3-contact__head { margin-bottom: 22px; }
.v3-contact__head .v3-doc__lead { margin: 12px 0 6px !important; }
.v3-contact__help { font-size: 14px; color: var(--v3-text-3); margin: 0; }
.v3-contact__help a { color: var(--v3-brand-ink); font-weight: 600; }
.v3-contact__form { padding: 22px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); background: var(--v3-surface); }
.v3-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v3-contact__reasons { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.v3-contact__reasons legend { margin-bottom: 8px; padding: 0; }
.v3-contact__reason input { position: absolute; opacity: 0; pointer-events: none; }
.v3-contact__reason span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-pill); font-size: 13.5px; font-weight: 600; color: var(--v3-text-2); cursor: pointer; transition: all .15s; }
.v3-contact__reason span:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-contact__reason input:checked + span { background: var(--v3-tint); border-color: var(--v3-brand); color: var(--v3-brand-ink); }
.v3-contact__reason input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-contact__msg { height: auto !important; min-height: 160px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.v3-contact__done { display: flex; align-items: flex-start; gap: 14px; padding: 22px; border-radius: var(--v3-r-xl); background: var(--v3-ok-bg); color: var(--v3-ok); font-size: 15px; line-height: 1.55; }
.v3-contact__done .v3-help__tico { background: var(--v3-ok); color: #fff; }
.v3-contact__done p { margin: 8px 0 0; }
@media (max-width: 600px) {
    .v3-contact { padding: 18px 16px 48px; }
    .v3-contact__form { padding: 16px; }
    .v3-contact__row { grid-template-columns: 1fr; }
    .v3-contact .v3-btn--lg { width: 100%; }
}

/* ── error pages and maintenance (standalone) ──────────────────────────── */
.v3-err, .v3-maint { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; margin: 0; background: radial-gradient(90% 60% at 50% 0%, var(--v3-tint), var(--v3-bg) 70%); color: var(--v3-text); font-family: var(--v3-font); }
.v3-err__card, .v3-maint__card { width: 100%; max-width: 480px; text-align: center; }
.v3-err__logo { display: inline-flex; align-items: center; gap: 9px; font: 700 17px/1 var(--v3-font-display); color: var(--v3-text); margin-bottom: 26px; }
.v3-err__logo img, .v3-mail__logo img { width: auto; height: 30px; }
.v3-err__code { display: block; font: 700 clamp(84px, 18vw, 128px)/1 var(--v3-font-display); letter-spacing: -.03em; background: var(--v3-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.v3-err__title, .v3-maint__title { font: 700 26px/1.2 var(--v3-font-display); margin: 0 0 10px; }
.v3-err__text, .v3-maint__msg { font-size: 15.5px; line-height: 1.6; color: var(--v3-text-3); margin: 0 0 22px; }
.v3-err__search { display: flex; gap: 8px; margin: 0 0 14px; }
.v3-err__search .v3-input { height: 46px; }
.v3-err__search .v3-btn { height: 46px; }
.v3-err__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.v3-err__memes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; }
.v3-err__memes a { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--v3-surface-2); }
.v3-err__memes img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.v3-err__memes a:hover img { transform: scale(1.04); }
.v3-err__fine { font-size: 12.5px; color: var(--v3-muted); margin: 10px 0 0; }

.v3-maint__logo { display: block; width: auto; height: 56px; margin: 0 auto 20px; filter: drop-shadow(0 6px 16px rgba(139, 92, 246, .35)); }
.v3-maint__team { margin-top: 30px; font-size: 13.5px; color: var(--v3-muted); }
.v3-maint__team summary { cursor: pointer; display: inline-block; padding: 6px 10px; border-radius: 8px; }
.v3-maint__team summary:hover { color: var(--v3-text); }
.v3-maint__form { display: flex; gap: 8px; margin-top: 10px; }
.v3-maint__err { color: var(--v3-hot); margin: 10px 0 0; }

/* ── email preferences + unsubscribe (signed links) ────────────────────── */
.v3-mail { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 48px 18px; background: radial-gradient(90% 50% at 50% 0%, var(--v3-tint), var(--v3-bg) 70%); }
.v3-mail__card { width: 100%; max-width: 560px; padding: 30px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); background: var(--v3-surface); box-shadow: var(--v3-shadow-pop); }
.v3-mail__card--sm { max-width: 440px; text-align: center; }
.v3-mail__card--sm .v3-auth__badge { margin-left: auto; margin-right: auto; }
.v3-mail__logo { display: inline-flex; margin-bottom: 22px; }
.v3-mail__group { border: 0; margin: 0; padding: 0; transition: opacity .15s; }
.v3-mail__group:disabled { opacity: .45; }
.v3-mail__row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--v3-divider); cursor: pointer; }
.v3-mail__group:disabled .v3-mail__row { cursor: default; }
.v3-mail__row > span:not(.v3-mail__ico):not(.v3-mail__sw) { flex: 1; min-width: 0; }
.v3-mail__row b { display: block; font-size: 14.5px; color: var(--v3-text); }
.v3-mail__row small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--v3-text-3); }
.v3-mail__row--master { padding: 16px; margin-bottom: 6px; border: 0; border-radius: var(--v3-r-lg); background: var(--v3-tint); }
.v3-mail__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--v3-surface-2); color: var(--v3-text-3); font-size: 17px; }
.v3-mail__cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.v3-mail__sw { position: relative; flex: none; width: 42px; height: 24px; border-radius: var(--v3-r-pill); background: var(--v3-border-dash); transition: background .18s; }
.v3-mail__sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 19, 31, .25); transition: transform .18s; }
.v3-mail__cb:checked + .v3-mail__sw { background: var(--v3-brand); }
.v3-mail__cb:checked + .v3-mail__sw::after { transform: translateX(18px); }
.v3-mail__cb:focus-visible + .v3-mail__sw { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-mail__acts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid var(--v3-divider); }
.v3-mail__unsub { font-size: 13.5px; color: var(--v3-muted); text-decoration: underline; }
.v3-mail__unsub:hover { color: var(--v3-hot); }
.v3-mail .v3-auth__fine { text-align: left; margin-top: 18px; }
.v3-mail__card--sm .v3-auth__fine, .v3-mail__card--sm .v3-auth__link { text-align: center; }
.v3-mail__card--sm form { margin-bottom: 8px; }
@media (max-width: 560px) {
    .v3-mail { padding: 18px 12px; }
    .v3-mail__card { padding: 20px 16px; }
    .v3-mail__acts .v3-btn { width: 100%; }
    .v3-mail__acts { justify-content: center; }
}

/* ==========================================================================
   Phase 17 — Staff console (/staff): queue, users, hidden, bans, online, log, guide
   ========================================================================== */
.v3--bare:has(.v3-staff) { overflow: hidden; }
.v3-bare:has(.v3-staff) { height: 100vh; height: 100dvh; background: var(--v3-surface-2); }
.v3-staff { display: flex; flex-direction: column; height: 100vh; height: 100dvh; color: var(--v3-text); }
.v3-staff__top { flex: none; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; background: var(--v3-surface); border-bottom: 1px solid var(--v3-border); z-index: 30; }
.v3-staff__menu { display: none; }
.v3-staff__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 17px/1 var(--v3-font-display); color: var(--v3-text); white-space: nowrap; }
.v3-staff__brand img { height: 20px; width: auto; }
.v3-staff__tag { font: 700 11px/1 var(--v3-font); letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand-ink); background: var(--v3-tint); padding: 4px 8px; border-radius: 999px; }
.v3-staff__find { position: relative; flex: 1; max-width: 460px; margin-left: 18px; display: flex; align-items: center; }
.v3-staff__find > .v3-icon { position: absolute; left: 13px; color: var(--v3-muted); pointer-events: none; }
.v3-staff__find input { width: 100%; height: 38px; padding: 0 40px 0 38px; border: 1px solid transparent; border-radius: var(--v3-r-pill); background: var(--v3-tint); font: inherit; font-size: 13.5px; color: var(--v3-text); }
.v3-staff__find input:focus { outline: 0; border-color: var(--v3-brand); background: var(--v3-surface); }
.v3-staff__find kbd { position: absolute; right: 12px; font: 500 11px var(--v3-font); color: var(--v3-faint); border: 1px solid var(--v3-border-dash); border-radius: 6px; padding: 1px 6px; }
.v3-staff__me { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.v3-staff__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); position: relative; }
.v3-staff__nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--v3-surface); border-right: 1px solid var(--v3-border); overflow-y: auto; }
.v3-staff__group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-muted); padding: 14px 12px 6px; }
.v3-staff__group:first-child { padding-top: 4px; }
.v3-staff__link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--v3-text-2); }
.v3-staff__link .v3-icon { font-size: 17px; color: var(--v3-muted); }
.v3-staff__link:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-staff__link.is-on { background: var(--v3-tint); color: var(--v3-brand-ink); font-weight: 700; }
.v3-staff__link.is-on .v3-icon { color: var(--v3-brand); }
.v3-staff__badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--v3-brand); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.v3-staff__badge[hidden] { display: none; }
.v3-staff__home { display: none; }
.v3-staff__who { margin: auto 0 0; padding: 16px 12px 4px; font-size: 12px; color: var(--v3-muted); }
.v3-staff__main { min-width: 0; min-height: 0; overflow-y: auto; }
.v3-staff__flash { margin: 16px 24px 0; padding: 11px 14px; border-radius: var(--v3-r-md); font-size: 13.5px; }
.v3-staff__flash--bad { background: var(--v3-hot-bg); color: var(--v3-hot); }

/* page furniture */
.v3-spage { max-width: 1040px; padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 16px; }
.v3-staff__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v3-staff__title { margin: 0; font: 700 26px/1.15 var(--v3-font-display); }
.v3-staff__sub { margin: 5px 0 0; font-size: 13.5px; color: var(--v3-text-3); }
.v3-staff__keys { padding: 0; border: 0; background: none; font: inherit; color: var(--v3-brand-ink); font-weight: 600; cursor: pointer; }
.v3-staff__keys:hover { text-decoration: underline; }
.v3-staff__search { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.v3-staff__search > .v3-icon { position: absolute; left: 12px; color: var(--v3-muted); pointer-events: none; }
.v3-staff__search .v3-input { padding-left: 36px; }
.v3-staff__label { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-staff__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; text-align: center; color: var(--v3-text-3); font-size: 14px; }
.v3-staff__empty b { font-size: 16px; color: var(--v3-text); }
.v3-staff__empty p { margin: 0; }
.v3-staff__emptyico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--v3-tint); color: var(--v3-brand); font-size: 22px; margin-bottom: 4px; }
.v3-scard { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); overflow: hidden; }
.v3-muted { color: var(--v3-muted); }
.v3-bad { color: var(--v3-hot); }
.v3-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--v3-text); cursor: pointer; }
.v3-linkbtn:hover { color: var(--v3-brand-ink); text-decoration: underline; }
.v3-btn--danger-soft { background: var(--v3-surface); color: var(--v3-hot); border: 1px solid color-mix(in srgb, var(--v3-hot) 35%, var(--v3-border)); }
.v3-btn--danger-soft:hover { background: var(--v3-hot-bg); }
kbd { font: 600 11px var(--v3-font); border: 1px solid var(--v3-border-dash); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--v3-text-2); background: var(--v3-surface); }

.v3-sbadge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--v3-surface-2); color: var(--v3-text-3); white-space: nowrap; vertical-align: 1px; }
.v3-sbadge--bad { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-sbadge--warn { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-sbadge--ok { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-sbadge--brand { background: var(--v3-tint); color: var(--v3-brand-ink); }

/* rows (users, hidden, bans, online) */
.v3-srows { display: flex; flex-direction: column; }
.v3-srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--v3-divider); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: opacity .2s; }
.v3-srows > .v3-srow:first-child, .v3-srows > :first-child .v3-srow { border-top: 0; }
.v3-srow:hover { background: var(--v3-surface-2); }
.v3-srow--static { cursor: default; }
.v3-srow--static:hover { background: none; }
.v3-srow > .v3-icon { color: var(--v3-faint); flex: none; }
.v3-srow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-srow__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.v3-srow__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-srow__title a { color: var(--v3-text); }
.v3-srow__title a:hover { color: var(--v3-brand-ink); }
.v3-srow__sub { font-size: 12.5px; color: var(--v3-text-3); overflow-wrap: anywhere; }
.v3-srow__sub a { color: var(--v3-brand-ink); }
.v3-srow__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.v3-srow.is-leaving, .v3-sqr.is-leaving { opacity: 0; }
.v3-slist__more { display: flex; justify-content: center; }
.v3-slist__more[hidden] { display: none; }
.v3-spager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; }

/* ── Queue ──────────────────────────────────────────────────────────────── */
.v3-sq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); height: 100%; }
.v3-sq__list { min-width: 0; overflow-y: auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 12px; }
.v3-sq__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-sq__bar .v3-fchips { flex: 1; min-width: 0; }
.v3-fchip span { font-weight: 700; opacity: .8; }
.v3-sq__all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--v3-text-3); cursor: pointer; }
.v3-sq__all input, .v3-sqr__check { width: 17px; height: 17px; accent-color: var(--v3-brand); }
.v3-sq__bulk { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--v3-r-lg); background: var(--v3-text); color: var(--v3-bg); box-shadow: var(--v3-shadow-pop); }
.v3-sq__bulk[hidden] { display: none; }
.v3-sq__bulk b { margin-right: auto; font-size: 13.5px; }
.v3-sq__rows { display: flex; flex-direction: column; gap: 8px; }
.v3-sqr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); cursor: pointer; transition: border-color .15s, box-shadow .15s, opacity .2s; }
.v3-sqr:hover { border-color: color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); }
.v3-sqr:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-sqr.is-current { border-color: var(--v3-brand); box-shadow: 0 0 0 1px var(--v3-brand), 0 6px 18px color-mix(in srgb, var(--v3-brand) 14%, transparent); }
.v3-sqr.is-picked { background: var(--v3-tint); }
.v3-sqr__thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--v3-surface-2); display: grid; place-items: center; color: var(--v3-muted); font-size: 20px; }
.v3-sqr__thumb img { width: 100%; height: 100%; object-fit: cover; }
.v3-sqr__thumb--text { background: var(--v3-tint); color: var(--v3-brand); }
.v3-sqr__thumb--round { width: 40px; height: 40px; border-radius: 50%; font-size: 17px; }
.v3-sqr__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-sqr__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--v3-text-3); }
.v3-sqr__title { font-size: 14.5px; font-weight: 600; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-sqr__why { font-size: 12.5px; color: var(--v3-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-sqr__time { flex: none; align-self: flex-start; font-size: 12px; color: var(--v3-muted); }

.v3-sq__panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--v3-surface); border-left: 1px solid var(--v3-border); }
.v3-sq__panel:focus { outline: 0; }
.v3-sq__pick { margin: auto; padding: 30px; text-align: center; color: var(--v3-text-3); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v3-sq__pick > .v3-icon { font-size: 30px; color: var(--v3-faint); }
.v3-sq__pick p { margin: 0; max-width: 260px; }
.v3-sq__keymap { display: grid; gap: 10px; margin: 0; }
.v3-sq__keymap div { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.v3-sq__keymap dt { width: 84px; display: flex; gap: 4px; }
.v3-sq__keymap dd { margin: 0; color: var(--v3-text-2); }

/* item panel */
.v3-sitem { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.v3-sitem__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--v3-divider); font-size: 14.5px; }
.v3-sitem__back { display: none; }
.v3-sitem__open { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-sitem__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.v3-sitem--skel .v3-sitem__scroll { gap: 16px; }
.v3-sitem__note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); font-size: 13px; color: var(--v3-text-2); line-height: 1.45; }
.v3-sitem__note .v3-icon { flex: none; margin-top: 1px; color: var(--v3-muted); }
.v3-sitem__note--warn { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-sitem__note--warn .v3-icon { color: currentColor; }
.v3-sitem__note--bad { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-sitem__note--bad .v3-icon { color: currentColor; }
.v3-sitem__preview { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-border); overflow: hidden; background: var(--v3-surface-2); }
.v3-sitem__preview img { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #0f0c15; }
.v3-sitem__text { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; font-size: 13px; color: var(--v3-text-3); }
.v3-sitem__text b { font-size: 15px; color: var(--v3-text); overflow-wrap: anywhere; }
.v3-sitem__text p { margin: 0; font-size: 14px; color: var(--v3-text-2); line-height: 1.5; overflow-wrap: anywhere; }
.v3-sitem__tpl { border-radius: var(--v3-r-lg); overflow: hidden; background: #0f0c15; }
.v3-sitem__tpl img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.v3-sitem__msg { white-space: pre-line; padding: 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface-2); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.v3-sowner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: var(--v3-r-lg); border: 1px solid var(--v3-border); background: var(--v3-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.v3-sowner:hover { border-color: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-border)); }
.v3-sowner--static { cursor: default; }
.v3-sowner--static:hover { border-color: var(--v3-border); }
.v3-sowner__txt { flex: 1; min-width: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.v3-sowner__txt small { flex-basis: 100%; font-size: 12.5px; color: var(--v3-text-3); }
.v3-sowner__go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-sitem__reports { display: flex; flex-direction: column; gap: 8px; }
.v3-sitem__reports .v3-staff__label { margin: 0; }
.v3-srep { padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.v3-srep.is-done { opacity: .6; }
.v3-srep__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--v3-text-3); }
.v3-srep__top b { color: var(--v3-text); }
.v3-srep__note { white-space: pre-line; color: var(--v3-text-2); line-height: 1.45; overflow-wrap: anywhere; }
.v3-sitem__act { flex: none; padding: 14px 18px 16px; border-top: 1px solid var(--v3-divider); display: flex; flex-direction: column; gap: 10px; background: var(--v3-surface); }
.v3-sitem__act .v3-staff__label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--v3-text-2); }
.v3-sitem__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-sitem__opts:empty { display: none; }
.v3-sitem__opts .v3-input--sm, .v3-sdr__row .v3-input--sm { width: 100%; font-size: 13px; }
.v3-sitem__ban { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--v3-r-md); background: var(--v3-hot-bg); }
.v3-sitem__ban[hidden] { display: none; }
.v3-sitem__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-sitem__btns .v3-btn { width: 100%; justify-content: center; height: 42px; }

/* ── Member drawer ──────────────────────────────────────────────────────── */
.v3-sdrawer { width: min(480px, 100vw); z-index: 85; }
.v3-sdrawer + .v3-backdrop, [data-v3-backdrop="v3StaffDrawer"] { z-index: 84; }
.v3-sdrawer__body { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.v3-sdr { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.v3-sdr--skel { padding: 18px; gap: 10px; }
.v3-sdr__head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-bottom: 1px solid var(--v3-divider); }
.v3-sdr__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--v3-text-3); overflow-wrap: anywhere; }
.v3-sdr__who h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 19px/1.2 var(--v3-font-display); color: var(--v3-text); }
.v3-sdr__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 16px; }
.v3-sdr__scroll > * { flex-shrink: 0; }
.v3-sdr__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.v3-sdr__stats > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); text-align: center; }
.v3-sdr__stats dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-sdr__stats dt { font-size: 11px; color: var(--v3-text-3); }
.v3-sdr__links { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-sdr__links form { display: contents; }
.v3-sdr__box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--v3-r-lg); border: 1px solid var(--v3-border); }
.v3-sdr__box .v3-staff__label { margin: 0; }
.v3-sdr__seg { padding: 4px; }
.v3-sdr__seg .v3-segment__item { padding: 8px 0; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; }
.v3-sdr__seg .v3-segment__item.is-active { background: var(--v3-brand-grad); color: #fff; }
.v3-sdr__form { display: flex; flex-direction: column; gap: 8px; }
.v3-sdr__form[hidden] { display: none; }
.v3-sdr__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-sdr__hint { margin: 0; font-size: 12.5px; color: var(--v3-text-3); line-height: 1.45; }
.v3-sdr__roles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.v3-sdr__roles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.v3-sdr__roles input { accent-color: var(--v3-brand); }
.v3-sdr__roles .v3-btn { margin-left: auto; }
.v3-sdr__note { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.v3-sdr__note textarea { width: 100%; height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

/* timeline (drawer + activity log) */
.v3-stl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-stl__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--v3-divider); font-size: 13.5px; line-height: 1.45; }
.v3-stl__item:first-child { border-top: 0; }
.v3-stl--log .v3-stl__item { padding: 12px 16px; }
.v3-stl__item.is-off { opacity: .62; }
.v3-stl__item p { margin: 3px 0 0; color: var(--v3-text-2); overflow-wrap: anywhere; }
.v3-stl__item p a { color: var(--v3-brand-ink); }
.v3-stl__item time { font-size: 12px; color: var(--v3-muted); white-space: nowrap; }
.v3-stl__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--v3-surface-2); color: var(--v3-text-3); font-size: 15px; }
.v3-stl__ico--warn { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-stl__ico--bad { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-stl__ico--muted { background: var(--v3-surface-2); color: var(--v3-text-3); }
.v3-stl__body { white-space: pre-line; }
.v3-stl__acts { display: inline-flex; gap: 12px; margin-top: 4px; font-size: 12.5px; }
.v3-stl__acts .v3-linkbtn { color: var(--v3-brand-ink); font-weight: 600; }
.v3-stl__empty { padding: 24px 16px; text-align: center; color: var(--v3-text-3); font-size: 13.5px; }

/* log filters */
.v3-slog__filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.v3-slog__filters label { display: flex; flex-direction: column; min-width: 170px; flex: 1; }
.v3-slog__filters .v3-btn { height: 42px; }

/* reason sheet: above the drawer */
.v3-sask { z-index: 92; }
.v3-sask__bd { z-index: 91; }
.v3-sask__form { display: flex; flex-direction: column; gap: 12px; }
.v3-sask__hint { margin: 0; font-size: 13.5px; color: var(--v3-text-3); line-height: 1.5; }
.v3-sask__hint[hidden], .v3-sask__text[hidden] { display: none; }
.v3-sask__text { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.v3-sask__acts { display: flex; justify-content: flex-end; gap: 8px; }

/* guide */
.v3-sguide__card { padding: 18px 20px; font-size: 14.5px; line-height: 1.6; color: var(--v3-text-2); }
.v3-sguide__card h2 { margin: 0 0 8px; font: 700 18px/1.3 var(--v3-font-display); color: var(--v3-text); }
.v3-sguide__card p { margin: 0 0 8px; }
.v3-sguide__card ol, .v3-sguide__card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.v3-sguide__card b { color: var(--v3-text); }
.v3-sguide__dl { margin: 0; display: grid; gap: 10px; }
.v3-sguide__dl dt { font-weight: 700; color: var(--v3-text); }
.v3-sguide__dl dd { margin: 2px 0 0; }

/* ── phones and narrow screens ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .v3-sq { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 899px) {
    .v3-staff__keys { display: none; }
    .v3-staff__top { gap: 8px; padding: 0 10px; }
    .v3-staff__menu { display: inline-grid; }
    .v3-staff__brand span:not(.v3-staff__tag) { display: none; }
    .v3-staff__find { margin-left: 4px; }
    .v3-staff__find kbd, .v3-staff__me .v3-btn { display: none; }
    .v3-staff__home { display: flex; flex: none; margin-bottom: 6px; background: var(--v3-tint); color: var(--v3-brand-ink); font-weight: 600; }
    .v3-staff__body { grid-template-columns: minmax(0, 1fr); }
    .v3-staff__nav { position: absolute; inset: 0 auto 0 0; width: min(280px, 84vw); z-index: 40; transform: translateX(-105%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: var(--v3-shadow-pop); }
    .v3-staff__nav.is-open { transform: none; }
    .v3-staff__scrim { position: absolute; inset: 0; z-index: 39; background: rgba(15, 12, 21, .45); }
    .v3-staff__scrim[hidden] { display: none; }
    .v3-spage { padding: 16px 14px 40px; }
    .v3-staff__title { font-size: 22px; }
    .v3-staff__search { width: 100%; }
    .v3-sq { grid-template-columns: minmax(0, 1fr); }
    .v3-sq__list { padding: 16px 14px 40px; }
    .v3-sq__panel { position: fixed; inset: 0; z-index: 60; border: 0; transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
    .v3-sq.is-open .v3-sq__panel { transform: none; visibility: visible; }
    .v3-sitem__back { display: inline-grid; }
    .v3-sitem__act { padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(23, 19, 31, .06); }
    .v3-sqr { padding: 10px 12px; gap: 10px; }
    .v3-sqr__thumb { width: 48px; height: 48px; }
    .v3-sqr__check { display: none; }
    .v3-sq__all { display: none; }
    .v3-srow { padding: 12px; }
    .v3-srow--static { flex-wrap: wrap; }
    .v3-srow__acts { width: 100%; justify-content: flex-end; }
    .v3-sdrawer { width: 100vw; }
    .v3-stl--log .v3-stl__item { padding: 12px; grid-template-columns: 28px minmax(0, 1fr); }
    .v3-stl--log .v3-stl__item time { grid-column: 2; }
}
@media (max-width: 420px) {
    .v3-sdr__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-sitem__opts, .v3-sdr__row { grid-template-columns: minmax(0, 1fr); }
}

/* impersonation banner: leave by POST */
.v3-banner__form { display: inline; }
.v3-staff > .v3-banner { position: static; flex: none; }
.v3-banner__form button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
/* Settings › Standing: warnings that no longer count */
.v3-set__strike.is-off { opacity: .6; }

/* ==========================================================================
   Phase 17b — Staff admin
   Overview, Inbox, Content, Templates, Boosts, Announcements, Site settings,
   Site errors. Builds on the Phase 17 staff console block.
   ========================================================================== */

/* shared bits */
.v3-scard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.v3-scard__head h2, .v3-sbars header h2, .v3-sset__box h2, .v3-serd__box h2 { margin: 0; font: 700 15px/1.3 var(--v3-font-display); }
.v3-scard__head a { font-size: 13px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-btn--dangertext { color: var(--v3-hot); }
.v3-btn--dangertext:hover { background: var(--v3-hot-bg); }
.v3-staff code, .v3-staff pre { font-family: var(--v3-font); }
.v3-sdr__fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.v3-sdr__fold > summary::-webkit-details-marker { display: none; }
.v3-sdr__fold > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; transition: transform .15s; }
.v3-sdr__fold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.v3-sdr__fold[open] > summary { margin-bottom: 10px; }
.v3-sdr__account { display: flex; flex-direction: column; gap: 8px; }
.v3-sdr__account .v3-btn { align-self: flex-start; }
.v3-sdr__lbl { font-size: 12.5px; font-weight: 600; color: var(--v3-text-2); }
.v3-srow.is-muted { opacity: .62; }
.v3-staff textarea.v3-input { height: auto; min-height: 84px; padding-top: 10px; padding-bottom: 10px; line-height: 1.45; }

/* KPI cards */
.v3-skpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.v3-skpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); min-width: 0; }
.v3-skpi > span { font-size: 12.5px; font-weight: 600; color: var(--v3-text-3); }
.v3-skpi > b { font: 700 26px/1.15 var(--v3-font-display); color: var(--v3-text); }
.v3-skpi > small { font-size: 12px; color: var(--v3-muted); }
.v3-skpi > small a { color: var(--v3-brand-ink); }
.v3-skpi--bad { border-color: color-mix(in srgb, var(--v3-hot) 35%, var(--v3-border)); }
.v3-skpi--bad > b { color: var(--v3-hot); }

/* CSS bar charts */
.v3-sbars { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.v3-sbars header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.v3-sbars__plot { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding-bottom: 1px; border-bottom: 1px solid var(--v3-divider); }
.v3-sbars__col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.v3-sbars__col i { display: block; width: 100%; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--v3-brand) 55%, transparent); min-height: 0; }
.v3-sbars__col.is-today i { background: var(--v3-brand); }
.v3-sbars__col:hover i { background: var(--v3-brand-ink); }
.v3-sbars__x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--v3-muted); }
.v3-sbars--wide .v3-sbars__plot { height: 120px; gap: 3px; }

/* Overview */
.v3-sov__need { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.v3-sov__needi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); color: var(--v3-text); font-size: 14px; font-weight: 600; transition: border-color .15s; }
.v3-sov__needi:hover { border-color: color-mix(in srgb, var(--v3-brand) 35%, var(--v3-border)); }
.v3-sov__needi > b { font: 700 18px var(--v3-font-display); }
.v3-sov__needi > .v3-icon:last-child { color: var(--v3-faint); }
.v3-sov__needtxt { flex: 1; min-width: 0; }
.v3-sov__needico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--v3-surface-2); color: var(--v3-text-3); flex: none; }
.v3-sov__needi--warn .v3-sov__needico { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-sov__needi--bad .v3-sov__needico { background: var(--v3-hot-bg); color: var(--v3-hot); }
.v3-sov__needi--bad { border-color: color-mix(in srgb, var(--v3-hot) 30%, var(--v3-border)); }
.v3-sov__clear { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14px; color: var(--v3-text-2); }
.v3-sov__clear .v3-icon { color: var(--v3-ok); font-size: 20px; }
.v3-sov__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-sov__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.v3-sov__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v3-stl--compact .v3-stl__item { padding: 10px 16px; font-size: 13.5px; }
.v3-sov .v3-srows .v3-stl__empty { padding: 16px; }

/* Inbox */
.v3-sinbox .v3-sqr.is-current { border-color: var(--v3-brand); box-shadow: 0 0 0 1px var(--v3-brand); }
.v3-sinbox .v3-sitem__act textarea { resize: vertical; min-height: 92px; }
.v3-sreplies { display: flex; flex-direction: column; gap: 8px; }
.v3-sreplies .v3-staff__label { margin: 0; }
.v3-sreply { padding: 12px 14px; border-radius: var(--v3-r-lg); background: var(--v3-tint); border: 1px solid color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-sreply__who { display: block; font-size: 12px; color: var(--v3-text-3); margin-bottom: 4px; }
.v3-sreply__body { white-space: pre-line; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.v3-sinbox__note { display: flex; flex-direction: column; gap: 8px; }
.v3-sinbox__note .v3-btn { align-self: flex-start; }

/* Content */
.v3-scontent__tabs { max-width: 520px; }
.v3-scontent__tabs .v3-segment__item { padding: 8px 0; }
.v3-scontent__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-scontent__bar .v3-fchips { flex: 1; min-width: 0; }
.v3-scontent__sort select { min-width: 150px; }
.v3-sgrid__in { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.v3-sgrid__empty { grid-column: 1 / -1; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); }
.v3-scc { display: flex; flex-direction: column; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid var(--v3-border); overflow: hidden; transition: opacity .2s; min-width: 0; }
.v3-scc.is-leaving { opacity: 0; }
.v3-scc.is-hidden .v3-scc__img img { opacity: .45; filter: grayscale(.6); }
.v3-scc__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--v3-surface-2); color: var(--v3-faint); font-size: 28px; overflow: hidden; }
.v3-scc__img img { width: 100%; height: 100%; object-fit: cover; }
.v3-scc__img--contain { background: #0f0c15; }
.v3-scc__img--contain img { object-fit: contain; }
.v3-scc__tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.v3-scc__tags .v3-sbadge { box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.v3-scc__tags .v3-sbadge:not([class*="--"]) { background: rgba(15, 12, 21, .72); color: #fff; }
.v3-scc__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 4px; min-width: 0; }
.v3-scc__title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-scc__meta { font-size: 12px; color: var(--v3-text-3); overflow-wrap: anywhere; }
.v3-scc__acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 12px; margin-top: auto; }
.v3-scc__acts .v3-btn { flex: 1 1 auto; }
.v3-sspace__row { flex-wrap: wrap; }
.v3-sspace { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.v3-sspace--new { padding: 16px; }
.v3-sspace[hidden] { display: none; }
.v3-sspace__row > .v3-sspace { padding: 12px 0 4px 68px; }
.v3-sspace__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v3-sspace__grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--v3-text-2); }
.v3-sspace__wide { grid-column: 1 / -1; }
.v3-sspace__acts { display: flex; justify-content: flex-end; gap: 8px; }

/* Boosts */
.v3-sbudget { display: block; height: 5px; border-radius: 99px; background: var(--v3-surface-2); overflow: hidden; max-width: 280px; margin-top: 2px; }
.v3-sbudget i { display: block; height: 100%; border-radius: inherit; background: var(--v3-brand-grad); }

/* Announcements */
.v3-sann__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.v3-sann__form { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.v3-sann__form textarea { resize: vertical; }
.v3-sann__form > .v3-staff__label:not(:first-child) { margin-top: 10px; }
.v3-sann__count { align-self: flex-end; font-size: 11.5px; color: var(--v3-muted); }
.v3-sann__aud { margin: 10px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.v3-sann__opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--v3-r-md); border: 1px solid var(--v3-border); cursor: pointer; font-size: 14px; }
.v3-sann__opt:has(input:checked) { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-sann__opt input { margin-top: 3px; accent-color: var(--v3-brand); width: 16px; height: 16px; flex: none; }
.v3-sann__opt small { display: block; font-size: 12.5px; color: var(--v3-text-3); margin-top: 2px; }
.v3-sann__email { margin-top: 8px; }
.v3-sann__go { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v3-divider); font-size: 13px; }
.v3-sann__preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.v3-sann__preview .v3-staff__label { margin: 0; }
.v3-sann__notif { display: flex; gap: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.v3-sann__notif small { display: block; font-size: 12px; color: var(--v3-muted); margin-top: 2px; }
.v3-sann__ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--v3-tint); color: var(--v3-brand); flex: none; }
.v3-sann__mail { padding: 16px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.v3-sann__mail[hidden] { display: none; }
.v3-sann__mail p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.v3-sann__text { font-size: 14px; color: var(--v3-text); overflow-wrap: anywhere; }

/* Site settings */
.v3-sset__box { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.v3-sset__box.is-on { border-color: color-mix(in srgb, var(--v3-hot) 40%, var(--v3-border)); }
.v3-sset__box textarea { resize: vertical; }
.v3-sset__row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--v3-divider); }
.v3-sset__box > .v3-sset__row:first-child, .v3-sset__box > h2 + .v3-sdr__hint + .v3-sset__row { border-top: 0; }
.v3-sset__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.v3-sset__txt small { font-size: 12.5px; color: var(--v3-text-3); }
.v3-sset__closed { font-style: italic; }
.v3-sswitch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.v3-sswitch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v3-sswitch > span[aria-hidden] { position: absolute; inset: 0; border-radius: 99px; background: var(--v3-border-dash); transition: background .18s; }
.v3-sswitch > span[aria-hidden]::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 19, 31, .25); transition: transform .18s; }
.v3-sswitch input:checked + span { background: var(--v3-brand); }
.v3-sswitch input:checked + span::after { transform: translateX(18px); }
.v3-sswitch input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
[data-v3-sset-maint]:checked + span { background: var(--v3-hot); }
.v3-sset__code { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.v3-sset__code .v3-staff__label { margin: 0; }
.v3-sset__seg { max-width: 420px; }
.v3-sset__seg .v3-segment__item { position: relative; cursor: pointer; padding: 8px 6px; }
.v3-sset__seg input { position: absolute; opacity: 0; pointer-events: none; }
.v3-sset__seg .v3-segment__item:has(input:checked) { background: var(--v3-brand-grad); color: #fff; font-weight: 700; }
.v3-sset__seg .v3-segment__item:has(input:focus-visible) { outline: 2px solid var(--v3-brand); outline-offset: 1px; }
.v3-sset__newcode { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 520px; }
.v3-sset__newcode[hidden] { display: none; }
.v3-sset__newcode .v3-input { flex: 1; min-width: 200px; letter-spacing: .04em; }
.v3-sset__svc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-sset__svc li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--v3-divider); font-size: 14px; }
.v3-sset__svc li:first-child { border-top: 0; }
.v3-sset__svc li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-sset__svc small { font-size: 12px; color: var(--v3-text-3); }
.v3-sset__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v3-border-dash); flex: none; }
.v3-sset__dot.is-ok { background: var(--v3-ok); }
.v3-sset__bar { display: flex; justify-content: flex-end; }

/* Site errors: list */
.v3-serr__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.v3-serr__filters { display: flex; flex-direction: column; gap: 10px; }
.v3-serr__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v3-serr__form .v3-staff__search { flex: 1; min-width: 220px; width: auto; }
.v3-serr__form select { width: auto; min-width: 140px; }
.v3-serow { position: relative; align-items: flex-start; padding-left: 20px; color: inherit; }
.v3-serow__lvl { position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--v3-border-dash); }
.v3-serow--critical .v3-serow__lvl { background: var(--v3-hot); }
.v3-serow--high .v3-serow__lvl { background: color-mix(in srgb, var(--v3-hot) 70%, var(--v3-warn)); }
.v3-serow--medium .v3-serow__lvl { background: var(--v3-warn); }
.v3-serow__title { font-size: 14.5px; color: var(--v3-text); }
.v3-serow__msg { font-size: 13px; color: var(--v3-text-2); overflow-wrap: anywhere; }
.v3-serow .v3-srow__sub { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.v3-serow__where { display: inline-flex; align-items: center; gap: 5px; }
.v3-serow__code { font-size: 12px; color: var(--v3-text-3); overflow-wrap: anywhere; }
.v3-serow__stats { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; color: var(--v3-muted); text-align: right; }
.v3-serow__stats b { font: 700 16px var(--v3-font-display); color: var(--v3-text); }

/* Site errors: one error */
.v3-serd__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--v3-text-3); align-self: flex-start; }
.v3-serd__back:hover { color: var(--v3-brand-ink); }
.v3-serd__head { display: flex; flex-direction: column; gap: 8px; }
.v3-serd__badges, .v3-serd__acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.v3-serd__acts { margin-top: 4px; }
.v3-serd__plain { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--v3-warn); }
.v3-serd__plain--bad { border-left-color: var(--v3-hot); }
.v3-serd__plain--ok { border-left-color: var(--v3-ok); }
.v3-serd__plain h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 16px var(--v3-font-display); }
.v3-serd__plain h2 .v3-icon { color: var(--v3-brand); }
.v3-serd__plain .v3-staff__label { margin: 4px 0 0; }
.v3-serd__dl { margin: 0; display: grid; gap: 10px; }
.v3-serd__dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; }
.v3-serd__dl dt { font-weight: 700; color: var(--v3-text-2); }
.v3-serd__dl dd { margin: 0; color: var(--v3-text); }
.v3-serd__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.v3-serd__steps li::marker { font-weight: 700; color: var(--v3-brand-ink); }
.v3-serd__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-serd__box { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v3-serd__box > .v3-scard__head { padding: 0; }
.v3-serd__pre { margin: 0; padding: 12px 14px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--v3-text-2); }
.v3-serd__pre--trace { max-height: 420px; overflow: auto; }
.v3-serd__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.v3-serd__facts--1 { grid-template-columns: minmax(0, 1fr); }
.v3-serd__facts div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v3-serd__facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-muted); }
.v3-serd__facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.v3-serd__facts code { font-size: 13px; }
.v3-serd__who { margin: 0; font-size: 14px; color: var(--v3-text-2); }
.v3-serd__crumbs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.v3-serd__crumbs .v3-sbadge { margin-right: 4px; }
.v3-serd__raw summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-serd__raw[open] summary { margin-bottom: 10px; }

/* maintenance page: staff log-in */
.v3-maint__staff { margin: 12px 0 0; font-size: 13px; color: var(--v3-text-3); }
.v3-maint__staff a { font-weight: 700; color: var(--v3-brand-ink); }

@media (max-width: 1100px) {
    .v3-sov__cols, .v3-sann__cols { grid-template-columns: minmax(0, 1fr); }
    .v3-sann__preview { position: static; }
}
@media (max-width: 899px) {
    .v3-sov__charts, .v3-serd__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-skpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-skpi > b { font-size: 22px; }
    .v3-sgrid__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .v3-scc__acts .v3-btn { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
    .v3-sspace__row > .v3-sspace { padding-left: 0; }
    .v3-scontent__bar .v3-fchips { flex: 1 1 100%; }
    .v3-scontent__sort, .v3-scontent__sort select { width: 100%; }
    .v3-sspace__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-serd__dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .v3-serow { flex-wrap: wrap; }
    .v3-serow__stats { flex-direction: row; gap: 8px; align-items: baseline; width: 100%; padding-left: 0; }
    .v3-serow__stats b { font-size: 14px; }
    .v3-serr__form .v3-staff__search { flex: 1 1 100%; }
    .v3-serr__form select { flex: 1 1 0; min-width: 0; font-size: 13px; padding-left: 10px; padding-right: 24px; }
    .v3-serd__facts { grid-template-columns: minmax(0, 1fr); }
    .v3-sset__row { align-items: flex-start; }
}
@media (max-width: 420px) {
    .v3-sgrid__in { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Phase 18 — Growth readiness (share cards, skeleton gaps)
   ========================================================================== */
/* Older messages loading (DMs + collective chat): skeleton rows above the thread. */
.v3-dmt__older.is-loading, .v3-chat__older.is-loading { height: auto; padding: 4px 0 8px; }
/* Studio: canvas-shaped placeholder while the editor or a saved draft loads. */
.v3-ed__skelcanvas { display: block; width: min(62%, 440px); aspect-ratio: 1 / 1; border-radius: 14px; }
.v3-ed__skeltools { display: flex; justify-content: center; }

/* ==========================================================================
   Phase 20 — Badges (marks next to names, popover, shop, buy sheet,
   settings arranger, staff catalogue and drawer fold)
   ========================================================================== */

/* --- The mark itself ----------------------------------------------------- */
/* Flat scalloped seals like offtheave.com's badges; staff get a shield. */
.v3-bdg {
    --b: #7C3AED; --g: #fff;
    position: relative; isolation: isolate; flex: none;
    display: inline-grid; place-items: center;
    width: 1.15em; height: 1.15em;
    vertical-align: -.2em; color: var(--g); line-height: 0;
    -webkit-tap-highlight-color: transparent;
}
.v3-bdg::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--b);
    -webkit-mask: var(--v3-bdg-shape) center / 100% 100% no-repeat;
            mask: var(--v3-bdg-shape) center / 100% 100% no-repeat;
}
.v3-bdg--seal, .v3-bdg--img {
    --v3-bdg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8Q16.14-.74 18 3.75Q22.84 4.12 21.7 8.85Q25.4 12 21.7 15.15Q22.84 19.88 18 20.25Q16.14 24.74 12 22.2Q7.86 24.74 6 20.25Q1.16 19.88 2.3 15.15Q-1.4 12 2.3 8.85Q1.16 4.12 6 3.75Q7.86-.74 12 1.8Z'/%3E%3C/svg%3E");
}
.v3-bdg--shield {
    --v3-bdg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .8 21.6 4.4v7.2c0 5.6-4 9.9-9.6 11.6C6.4 21.5 2.4 17.2 2.4 11.6V4.4Z'/%3E%3C/svg%3E");
}
.v3-bdg__g { width: 54%; height: 54%; }
.v3-bdg--shield .v3-bdg__g { width: 50%; height: 50%; margin-top: -6%; }
/* Uploaded artwork is cut to the same seal. */
.v3-bdg--img::before { display: none; }
.v3-bdg--img > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-mask: var(--v3-bdg-shape) center / 100% 100% no-repeat;
            mask: var(--v3-bdg-shape) center / 100% 100% no-repeat;
}

/* Finishes (match App\Services\V3\Badges::FINISHES). */
.v3-bdg--sky     { --b: #2563EB; }
.v3-bdg--violet  { --b: #7C3AED; }
.v3-bdg--rose    { --b: #E11D74; }
.v3-bdg--ember   { --b: #DC2626; }
.v3-bdg--gold    { --b: #D99A0B; }
.v3-bdg--yellow  { --b: #F5C211; --g: #1F1A0A; }
.v3-bdg--emerald { --b: #16A34A; }
.v3-bdg--teal    { --b: #0F8C7E; }
.v3-bdg--frost   { --b: #0EA5E9; }
.v3-bdg--bronze  { --b: #B4632A; }
.v3-bdg--silver  { --b: #8B9099; }
.v3-bdg--onyx    { --b: #3F3F46; }
/* Staff shields: admins red, moderators green. */
.v3-bdg--staff-admin { --b: #DC2626; }
.v3-bdg--staff-mod   { --b: #16A34A; }

/* Fixed sizes for tiles outside a line of text. */
.v3-bdg--lg { width: 26px; height: 26px; }
.v3-bdg--xl { width: 56px; height: 56px; }

/* Tappable marks next to names. */
.v3-bdg[data-v3-badge] { cursor: pointer; transition: transform .12s ease; }
.v3-bdg[data-v3-badge]:hover { transform: scale(1.1); }
.v3-bdg[data-v3-badge]:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .v3-bdg[data-v3-badge] { transition: none; } .v3-bdg[data-v3-badge]:hover { transform: none; } }

.v3-uname__badges { display: inline-flex; align-items: center; gap: .18em; line-height: 1; }
.v3-uname__badges .v3-bdg { vertical-align: 0; }

/* The soft square a badge sits on in the shop, popover and buy sheet. */
.v3-bdg-tile {
    display: inline-grid; place-items: center; flex: none;
    width: 76px; height: 76px; border-radius: 18px; background: var(--v3-surface-2);
}
.v3-bdg-tile--sm { width: 56px; height: 56px; border-radius: 14px; }
.v3-bdg-tile--sm .v3-bdg--xl { width: 40px; height: 40px; }

/* --- Popover (desktop) / sheet (phone) ----------------------------------- */
.v3-bpop {
    position: fixed; z-index: 1200; width: 260px; padding: 18px 16px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    background: var(--v3-surface); color: var(--v3-text);
    border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); box-shadow: var(--v3-shadow-pop);
    animation: v3-bpop-in .14s ease-out;
}
.v3-bpop__x { position: absolute; top: 6px; right: 6px; }
.v3-bpop__art { margin-bottom: 4px; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: var(--v3-surface-2); }
.v3-bpop__name { margin: 0; font-family: var(--v3-font-display); font-size: 17px; font-weight: 700; text-wrap: balance; }
.v3-bpop__line { margin: 0; font-size: 13.5px; color: var(--v3-text-2); line-height: 1.45; }
.v3-bpop__when { margin: 2px 0 0; font-size: 12.5px; color: var(--v3-muted); }
.v3-bpop .v3-btn { margin-top: 8px; }
.v3-bpop.is-sheet {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--v3-r-xl) var(--v3-r-xl) 0 0; border-bottom: 0;
    animation-name: v3-bpop-up;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45);
}
.v3-bpop.is-sheet .v3-btn { align-self: stretch; height: 44px; }
@keyframes v3-bpop-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes v3-bpop-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .v3-bpop, .v3-bpop.is-sheet { animation: none; } }

/* --- Shop (/badges) ------------------------------------------------------- */
.v3-bshop { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.v3-bshop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v3-bshop__me {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--v3-r-lg);
    background: var(--v3-surface); border: 1px solid var(--v3-border);
}
.v3-bshop__me .v3-uname { font-size: 15px; }
.v3-bshop__mehint { margin-left: auto; font-size: 12.5px; color: var(--v3-muted); }
.v3-bshop__got {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--v3-r-lg);
    background: var(--v3-ok-bg); color: var(--v3-text);
}
.v3-bshop__got > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; font-size: 13.5px; }
.v3-bshop__got b { font-size: 14.5px; }
.v3-bshop__got span { color: var(--v3-text-2); }
.v3-bshop__chips .v3-fchip span { font-variant-numeric: tabular-nums; }

.v3-bshop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.v3-bcard {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 20px 14px 14px;
    background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg);
    scroll-margin-top: calc(var(--v3-topbar-h, 60px) + 16px);
    transition: border-color .15s, box-shadow .15s;
}
.v3-bcard[hidden] { display: none; }
.v3-bcard.is-showing { border-color: var(--v3-brand); box-shadow: 0 0 0 1px var(--v3-brand); }
.v3-bcard:target, .v3-bcard.is-focus { border-color: var(--v3-brand); box-shadow: 0 0 0 3px var(--v3-brand-glow, var(--v3-tint)); }
.v3-bcard__on {
    position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; background: var(--v3-ok); color: #fff; font-size: 13px;
}
.v3-bcard__on .v3-icon { stroke-width: 3; }
.v3-bcard .v3-bdg-tile { margin-bottom: 4px; }
.v3-bcard__name { margin: 0; font-family: var(--v3-font-display); font-size: 16px; font-weight: 700; text-wrap: balance; }
.v3-bcard__kind {
    display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--v3-r-pill);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--v3-surface-2); color: var(--v3-text-2);
}
.v3-bcard__kind--shop { background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-bcard__kind--award { background: var(--v3-warn-bg); color: var(--v3-warn); }
.v3-bcard__line { margin: 0; font-size: 13px; color: var(--v3-text-2); line-height: 1.45; text-wrap: pretty; }
.v3-bcard__foot { margin-top: auto; padding-top: 6px; align-self: stretch; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.v3-bcard__price { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--v3-text); font-variant-numeric: tabular-nums; }
.v3-bcard__price small { display: block; font-size: 11.5px; font-weight: 500; color: var(--v3-muted); }
.v3-bcard__go { height: 40px; }
.v3-bcard__off { font-size: 12.5px; color: var(--v3-muted); padding: 10px 0; }
.v3-bshop__fine { margin: 4px 0 0; max-width: 68ch; font-size: 12.5px; color: var(--v3-muted); line-height: 1.5; }

@media (max-width: 520px) {
    .v3-bshop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .v3-bcard { padding: 16px 10px 12px; }
    .v3-bcard .v3-bdg-tile { width: 64px; height: 64px; border-radius: 16px; }
    .v3-bcard .v3-bdg--xl { width: 46px; height: 46px; }
    .v3-bcard__line { font-size: 12.5px; }
    .v3-bshop__mehint { margin-left: 0; flex-basis: 100%; }
}

/* --- Buy sheet ------------------------------------------------------------ */
.v3-bbuy__body { display: flex; flex-direction: column; gap: 14px; }
.v3-bbuy__top { display: flex; align-items: center; gap: 14px; }
.v3-bbuy__top > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v3-bbuy__top b { font-family: var(--v3-font-display); font-size: 18px; }
.v3-bbuy__top span { font-size: 13.5px; color: var(--v3-text-2); line-height: 1.4; }
.v3-bbuy__art { flex: none; line-height: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--v3-surface-2); }
.v3-bbuy__art .v3-bdg--xl { width: 44px; height: 44px; }
.v3-bbuy__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); }
.v3-bbuy__tabs button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px;
    border: 0; border-radius: calc(var(--v3-r-md) - 3px); background: transparent;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--v3-text-2); cursor: pointer;
}
.v3-bbuy__tabs button[aria-checked="true"] { background: var(--v3-tint); color: var(--v3-brand-ink); box-shadow: inset 0 0 0 1.5px var(--v3-brand); }
.v3-bbuy__tabs button:disabled, .v3-bbuy__tabs button[hidden] { display: none; }
.v3-bbuy__tabs button:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 1px; }
.v3-bbuy__sum { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--v3-border); border-radius: var(--v3-r-md); }
.v3-bbuy__sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 13.5px; }
.v3-bbuy__sum > div + div { border-top: 1px solid var(--v3-divider); }
.v3-bbuy__sum dt { color: var(--v3-text-2); }
.v3-bbuy__sum dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.v3-bbuy__sum .is-total dt, .v3-bbuy__sum .is-total dd { color: var(--v3-text); font-weight: 700; }
.v3-bbuy__hint { margin: 0; font-size: 12.5px; color: var(--v3-muted); line-height: 1.45; }
.v3-bbuy__hint:empty { display: none; }
.v3-bbuy__hint.is-warn { color: var(--v3-warn); font-weight: 600; }
.v3-bbuy__err { margin: 0; padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-hot-bg); color: var(--v3-hot); font-size: 13px; font-weight: 600; }

/* --- Settings > Badges ---------------------------------------------------- */
.v3-bset { display: flex; flex-direction: column; gap: 14px; }
.v3-bset__preview {
    display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--v3-r-md);
    background: var(--v3-surface-2); font-size: 15px; min-width: 0;
}
.v3-bset__label { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v3-text-3); }
.v3-bset__label span { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v3-muted); }
.v3-bset__slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-bset__slot {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 116px; padding: 12px 8px 8px; border-radius: var(--v3-r-md);
    border: 1.5px dashed var(--v3-border-dash, var(--v3-border)); text-align: center;
}
.v3-bset__slot.is-filled { border-style: solid; border-color: var(--v3-border); background: var(--v3-surface); cursor: grab; }
.v3-bset__slot.is-drag { opacity: .45; }
.v3-bset__slot.is-over { border-color: var(--v3-brand); box-shadow: 0 0 0 3px var(--v3-tint); }
.v3-bset__n {
    position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 700; color: var(--v3-muted);
    font-variant-numeric: tabular-nums;
}
.v3-bset__empty { font-size: 12.5px; color: var(--v3-muted); }
.v3-bset__sname { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-bset__ctrl { display: flex; gap: 2px; }
.v3-bset__ctrl .v3-iconbtn { width: 30px; height: 30px; }
.v3-bset__ctrl .v3-iconbtn:disabled { opacity: .3; pointer-events: none; }
.v3-bset__owned { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-bset__item {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 8px;
    border-radius: var(--v3-r-pill); border: 1px solid var(--v3-border); background: var(--v3-surface);
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--v3-text); cursor: pointer;
}
.v3-bset__item .v3-bdg { font-size: 20px; }
.v3-bset__item small { font-size: 11.5px; font-weight: 600; color: var(--v3-brand-ink); }
.v3-bset__item[aria-pressed="true"] { border-color: var(--v3-brand); background: var(--v3-tint); }
.v3-bset__item:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-bset__item.is-fixed { cursor: default; background: var(--v3-surface-2); }
.v3-bset__item.is-fixed small { color: var(--v3-muted); }
.v3-bset__none { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--v3-text-2); }
.v3-bset__none p { margin: 0; line-height: 1.5; }
@media (max-width: 520px) {
    .v3-bset__slots { gap: 6px; }
    .v3-bset__slot { min-height: 108px; padding: 10px 4px 6px; }
    .v3-bset__ctrl .v3-iconbtn { width: 28px; height: 28px; }
}

/* --- Profile: all owned badges -------------------------------------------- */
.v3-podium__name .v3-uname { flex-wrap: nowrap; justify-content: center; max-width: 100%; }
.v3-podium__name .v3-uname__name { overflow: hidden; text-overflow: ellipsis; }
.v3-profile__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 20px; }

/* --- Staff: catalogue ------------------------------------------------------ */
.v3-sbform { display: flex; flex-direction: column; gap: 18px; padding: 18px; overflow: visible; }
.v3-sbform__head { display: flex; align-items: center; gap: 16px; }
.v3-sbform__preview { flex: none; line-height: 0; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: var(--v3-surface-2); }
.v3-sbform__title { margin: 0 0 4px; font-family: var(--v3-font-display); font-size: 18px; }
.v3-sbform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.v3-sbform__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.v3-sbform__f > span, .v3-sbform__f > legend { font-size: 13px; font-weight: 700; color: var(--v3-text); padding: 0; margin-bottom: 6px; }
.v3-sbform__f > span { margin-bottom: 0; }
.v3-sbform__f small { font-weight: 500; color: var(--v3-muted); margin-left: 4px; }
.v3-sbform__f--wide { grid-column: 1 / -1; }
.v3-sbform__check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; align-self: center; }
.v3-sbform__check input { margin-top: 2px; accent-color: var(--v3-brand); }
.v3-sbform__check small { display: block; color: var(--v3-muted); }
.v3-sbform__check[hidden], .v3-sbform__f[hidden] { display: none; }
.v3-sbform__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); align-self: flex-start; }
.v3-sbform__seg label { position: relative; }
.v3-sbform__seg input { position: absolute; opacity: 0; pointer-events: none; }
.v3-sbform__seg span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: calc(var(--v3-r-md) - 3px); font-size: 13px; font-weight: 600; color: var(--v3-text-2); cursor: pointer; }
.v3-sbform__seg input:checked + span { background: var(--v3-brand); color: #fff; box-shadow: var(--v3-shadow-card); }
.v3-sbform__seg input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 1px; }
.v3-sbform__glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.v3-sbform__glyphs label, .v3-sbform__finishes label { position: relative; cursor: pointer; }
.v3-sbform__glyphs input, .v3-sbform__finishes input { position: absolute; opacity: 0; pointer-events: none; }
.v3-sbform__glyphs span {
    display: grid; place-items: center; height: 40px; border-radius: var(--v3-r-md);
    border: 1px solid var(--v3-border); color: var(--v3-text-2); font-size: 18px;
}
.v3-sbform__glyphs input:checked + span { border-color: var(--v3-brand); background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-sbform__glyphs input:focus-visible + span, .v3-sbform__finishes input:focus-visible + .v3-bdg { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-sbform__finishes { display: flex; flex-wrap: wrap; gap: 12px; }
.v3-sbform__finishes label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.v3-sbform__finishes .v3-bdg { width: 34px; height: 34px; border-radius: 50%; }
.v3-sbform__finishes small { font-size: 11.5px; color: var(--v3-muted); }
.v3-sbform__finishes input:checked + .v3-bdg { box-shadow: 0 0 0 2px var(--v3-surface), 0 0 0 4px var(--v3-brand); }
.v3-sbform__finishes input:checked ~ small { color: var(--v3-text); font-weight: 700; }
.v3-sbform__btns { display: flex; justify-content: flex-end; gap: 8px; }

.v3-sbtable__scroll { overflow-x: auto; }
.v3-sbtable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.v3-sbtable th { text-align: left; padding: 10px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-text-3); border-bottom: 1px solid var(--v3-border); white-space: nowrap; }
.v3-sbtable td { padding: 10px 12px; border-bottom: 1px solid var(--v3-divider); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; }
.v3-sbtable tr:last-child td { border-bottom: 0; }
.v3-sbtable__name { display: inline-flex; align-items: center; gap: 10px; }
.v3-sbtable__name > span { display: flex; flex-direction: column; line-height: 1.25; }
.v3-sbtable__name small { color: var(--v3-muted); font-size: 12px; }

.v3-sbrecent { display: flex; flex-direction: column; padding: 14px 16px; gap: 2px; }
.v3-sbrecent .v3-staff__label { margin: 0 0 6px; }
.v3-sbrecent > p { margin: 0; font-size: 13.5px; }
.v3-sbrecent__row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 8px 6px; margin: 0 -6px; border-radius: var(--v3-r-md);
    color: var(--v3-text); text-decoration: none; font-size: 13.5px;
}
.v3-sbrecent__row:hover { background: var(--v3-surface-2); }
.v3-sbrecent__row .v3-bdg { font-size: 20px; }
.v3-sbrecent__row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .v3-sbform__grid { grid-template-columns: minmax(0, 1fr); }
    .v3-sbrecent__row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .v3-sbrecent__row > :nth-child(3) { grid-column: 2 / -1; grid-row: 2; font-size: 12.5px; }
}

/* --- Staff: member drawer fold -------------------------------------------- */
.v3-sdr__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-sdr__badges li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.v3-sdr__badges li + li { border-top: 1px solid var(--v3-divider); }
.v3-sdr__badges li > .v3-bdg { font-size: 22px; }
.v3-sdr__badges li > span:not(.v3-bdg) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.v3-sdr__badges small { color: var(--v3-muted); font-size: 12px; }
.v3-sdr__give { display: flex; gap: 8px; }
.v3-sdr__give select { flex: 1; min-width: 0; }

/* ==========================================================================
   Phase 21 — Staff overview landing (/staff for mods and admins)
   ========================================================================== */
a.v3-skpi--link { color: inherit; text-decoration: none; transition: border-color .15s; }
a.v3-skpi--link:hover { border-color: color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); }
.v3-skpi--warn { border-color: color-mix(in srgb, var(--v3-warn) 35%, var(--v3-border)); }
.v3-skpi--warn > b { color: var(--v3-warn); }

.v3-sreasons { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.v3-sreasons header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.v3-sreasons header h2 { margin: 0; font: 700 15px/1.3 var(--v3-font-display); }
.v3-sreasons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v3-sreasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.v3-sreasons__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v3-text-2); }
.v3-sreasons li b { font-variant-numeric: tabular-nums; }
.v3-sreasons li i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--v3-brand) 55%, transparent); }

/* ==========================================================================
   Phase 22 — Staff console uses the full width; item panels are drawers
   ========================================================================== */
.v3-spage { max-width: none; }

/* Queue and Inbox: the item panel slides in from the right when you open
   an item, instead of holding an empty column. */
.v3-sq { grid-template-columns: minmax(0, 1fr); position: relative; overflow: hidden; }
.v3-sq__panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: min(480px, 100%);
    border-left: 1px solid var(--v3-border); box-shadow: -24px 0 48px -16px rgb(0 0 0 / .35);
    transform: translateX(104%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
}
.v3-sq.is-open .v3-sq__panel { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.v3-sitem__back { display: inline-grid; }
.v3-leader__name .v3-uname { flex-wrap: nowrap; gap: 4px; max-width: 100%; vertical-align: middle; }
.v3-leader__name .v3-uname__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3-sqr { text-align: left; }
@media (max-width: 1100px) { .v3-sq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
    .v3-sq__panel { position: fixed; inset: 0; width: auto; border: 0; box-shadow: none; transform: translateY(100%); }
    .v3-sq.is-open .v3-sq__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .v3-sq__panel, .v3-sq.is-open .v3-sq__panel { transition: none; } }

/* ==========================================================================
   Phase 23 — Account menu wallet, Creator Studio hub
   ========================================================================== */
.v3-menu:has(.v3-mwallet) { min-width: 268px; }
.v3-mwallet { margin: 0 0 6px; padding: 10px; border-radius: var(--v3-r-md); background: var(--v3-surface-2); display: flex; flex-direction: column; gap: 10px; }
.v3-mwallet__top { display: flex; align-items: center; gap: 10px; }
.v3-mwallet__ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #9945FF, #14F195); color: #fff; font-size: 15px; }
.v3-mwallet__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.v3-mwallet__who small, .v3-mwallet__stats small { font-size: 11px; font-weight: 600; color: var(--v3-muted); }
.v3-mwallet__who b { font-size: 13px; font-weight: 700; color: var(--v3-text); letter-spacing: .02em; }
.v3-mwallet__link { flex: none; font-size: 12px; font-weight: 700; color: var(--v3-brand-ink); background: var(--v3-tint); padding: 5px 10px; border-radius: 8px; text-decoration: none; }
.v3-mwallet__link:hover { background: var(--v3-brand); color: #fff; }
.v3-mwallet__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-mwallet__stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--v3-surface); }
.v3-mwallet__stats b { font: 700 16px/1.2 var(--v3-font-display); color: var(--v3-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-mwallet__stats span { font-size: 11px; color: var(--v3-muted); min-height: 1em; }
.v3-mwallet.is-loading [data-v3-mwallet-dora], .v3-mwallet.is-loading [data-v3-mwallet-usd] {
    --v3-skel-a: color-mix(in srgb, var(--v3-text) 8%, transparent); --v3-skel-b: color-mix(in srgb, var(--v3-text) 3%, transparent);
    color: transparent; border-radius: 6px; align-self: flex-start; min-width: 64px;
    background: linear-gradient(90deg, var(--v3-skel-a) 0%, var(--v3-skel-b) 50%, var(--v3-skel-a) 100%); background-size: 200% 100%; animation: v3-shimmer 1.3s linear infinite;
}
.v3-stabs { margin-bottom: 18px; }
.v3-stabs .v3-ttab { gap: 7px; }
.v3-stabs .v3-ttab .v3-icon { font-size: 16px; }

/* ==========================================================================
   Phase 24 — Left rail: Create + account card pinned to the bottom
   ========================================================================== */
.v3-rail-left { height: calc(100vh - var(--v3-topbar-h) - 48px); overflow: hidden; }
.v3-rail-left > .v3-rail-left__main {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    display: flex; flex-direction: column;
}
.v3-rail-left__main::-webkit-scrollbar { display: none; }
.v3-rail-left__main > * { flex-shrink: 0; }
.v3-rail-left__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.v3-rail-left__foot .v3-create-btn { margin: 0; }

.v3-acct-card { position: relative; padding: 14px; color: inherit; text-decoration: none; }
.v3-acct-card .v3-acct { padding-right: 0; }
.v3-acct-card .v3-acct__body { gap: 3px; }
.v3-acct__uname { flex-wrap: nowrap; gap: 4px; max-width: 100%; font-size: 14px; }
.v3-acct__uname .v3-uname__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-acct-card .v3-acct__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v3-acct-card .v3-acct__meta > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.v3-acct-card .v3-acct__meta .v3-tag { flex: none; }
.v3-acct__xp {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 700; color: var(--v3-brand-ink); font-variant-numeric: tabular-nums;
}
.v3-acct__xp .v3-icon { font-size: 12px; color: #F5B50A; }
.v3-acct-card .v3-acct__uname { flex-wrap: wrap; row-gap: 3px; }
.v3-acct-card .v3-acct__uname .v3-tag { flex: none; }
.v3-acct-card .v3-progress { display: block; margin-top: 12px; height: 6px; }
.v3-acct__track { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-acct__track > span:last-child { font-weight: 700; color: var(--v3-text-2); }
.v3-acct__track .v3-acct__xp { font-size: 11.5px; }
.v3-rail-left__foot .v3-copyright { margin: 0; }

/* Icon-only rail (≤1023): just the Create button stays at the bottom. */
@media (max-width: 1023px) {
    .v3-rail-left__main { align-items: center; }
    .v3-rail-left__foot { align-items: center; }
}

/* Two-factor QR: same card as the share sheet's QR (Ken, Oct 12). */
.v3-set__qr { width: 184px; height: 184px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(15, 12, 21, .08); }
.v3-set__qr canvas { display: block; width: 184px !important; height: 184px !important; }

/* Studio › Drafts & Scheduled jumps to "Your work" below the sticky top bar. */
#v3SWorkTitle { scroll-margin-top: calc(var(--v3-topbar-h) + 20px); }

/* Site links sit just above the © line at the bottom of the left rail (Ken, Oct 12). */
.v3-rail-left__foot .v3-footer-links { justify-content: center; margin: 0; padding: 0; gap: 4px 9px; }
.v3-rail-left__foot .v3-footer-links a { font-size: 11.5px; }
.v3-rail-left__foot .v3-footer-links + .v3-copyright { margin-top: -6px; }

/* Mobile menu: site links + © pinned to the bottom (Ken, Oct 12). */
#v3Drawer .v3-sheet__body { flex: 1 1 auto; min-height: 0; }
.v3-drawer__foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--v3-divider); }
.v3-drawer__foot .v3-footer-links { justify-content: center; margin: 0; padding: 0; gap: 4px 12px; }
.v3-drawer__foot .v3-copyright { margin: 0; }
.v3-acct__meta--tag { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v3-acct__meta--tag > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.v3-acct__meta--tag .v3-tag { flex: none; }

/* Badge art that keeps its own shape ("mark-*", e.g. the fedora.foundation mark for $DORA Presale). */
.v3-bdg--own > img { -webkit-mask: none; mask: none; object-fit: contain; }

/* Search box before you type: Recent, Trending now, Trending searches (Ken, Oct 12). */
.v3-search__group--row { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; }
.v3-search__group--hot { display: flex; align-items: center; gap: 5px; }
.v3-search__group--hot .v3-icon { font-size: 12px; color: #F97316; }
.v3-search__clear { border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--v3-brand); cursor: pointer; }
.v3-search__clear:hover { text-decoration: underline; }
.v3-search__recent { cursor: pointer; }
.v3-search__recent .v3-search__title { flex: 1; min-width: 0; }
.v3-search__thumb--ico { font-size: 17px; color: var(--v3-text-3); }
.v3-search__x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--v3-muted); cursor: pointer; font-size: 15px; }
.v3-search__x:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-search__trend .v3-search__title { font-weight: 600; }

/* Hidden posts, as staff see them (Ken, Oct 12). */
.v3-post--hidden { border-color: color-mix(in srgb, var(--v3-warn) 45%, var(--v3-border)); border-style: dashed; }
.v3-post--hidden > :not(.v3-post__hidden) { opacity: .72; }
.v3-post__hidden { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; padding: 8px 12px; border-radius: var(--v3-r-md); background: var(--v3-warn-bg); color: var(--v3-warn); font-size: 12.5px; }
.v3-post__hidden .v3-icon { flex: none; font-size: 15px; }
.v3-post__hidden span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-post__hidden time { flex: none; font-size: 11.5px; opacity: .8; }

/* Staff › Spaces: Q&A switch (Ken, Oct 12). */
.v3-sspace__grid .v3-sspace__check { display: flex; flex-direction: row; align-items: flex-start; font-weight: 500; gap: 8px; font-size: 13.5px; cursor: pointer; }
.v3-sspace__grid .v3-sspace__check input[type=checkbox] { margin-top: 3px; accent-color: var(--v3-brand); }

/* AdSense units (Ken, Oct 12): skeleton while loading, no box if unfilled. */
.v3-ad--adsense .v3-ad__unit {
    --v3-skel-a: color-mix(in srgb, var(--v3-text) 8%, transparent);
    --v3-skel-b: color-mix(in srgb, var(--v3-text) 3%, transparent);
    min-height: 100px;
    background: linear-gradient(90deg, var(--v3-skel-a) 0%, var(--v3-skel-b) 50%, var(--v3-skel-a) 100%); background-size: 200% 100%; animation: v3-shimmer 1.3s linear infinite;
}
.v3-ad--rail .v3-ad__unit { min-height: 250px; }
.v3-ad--adsense:has(ins[data-ad-status="filled"]) .v3-ad__unit { min-height: 0; background: none; animation: none; }
.v3-ad--adsense:has(ins[data-ad-status="unfilled"]) { display: none; }
.v3-ad--adsense ins.adsbygoogle { width: 100%; }
.v3-ad--banner .v3-ad__unit { min-height: 90px; }
@media (max-width: 699px) { .v3-ad--banner .v3-ad__unit { min-height: 50px; } }
.v3-ad--banner ins.adsbygoogle { text-align: center; }

/* Names with badges in community thread cards + top contributors (Ken, Oct 12). */
.v3-tcard__by .v3-uname { font-size: inherit; vertical-align: -1px; }
.v3-tcard__by .v3-uname__name { font-weight: 600; color: inherit; }
.v3-tcard__answer .v3-uname { display: inline-flex; vertical-align: -2px; }
.v3-rperson__name .v3-uname { flex-wrap: nowrap; max-width: 100%; }
.v3-rperson__name .v3-uname__name { overflow: hidden; text-overflow: ellipsis; }
/* Names with badges in rows that truncate (collective rail/members/chat, DMs, account menu, fans). */
:is(.v3-crail__name, .v3-chat__pname, .v3-crow__name, .v3-dmrow__name, .v3-acct__name, .v3-ctop__who, .v3-cm__name, .v3-an__fname) .v3-uname { flex-wrap: nowrap; max-width: 100%; min-width: 0; }
:is(.v3-crail__name, .v3-chat__pname, .v3-crow__name, .v3-dmrow__name, .v3-acct__name, .v3-ctop__who, .v3-cm__name, .v3-an__fname) .v3-uname__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: inherit; color: inherit; }
.v3-uname__badges { flex: none; }
.v3-post__top-text .v3-uname, .v3-srow__head .v3-uname { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.v3-hero-rot__meta .v3-uname__name { color: inherit; font-weight: inherit; }
/* Collective About > Owner: display name (trimmed) + badges + @handle on one line. */
.v3-cfacts__owner { min-width: 0; }
.v3-cfacts__owner .v3-uname { flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.v3-cfacts__owner .v3-uname__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--v3-text); }
.v3-cfacts__owner .v3-uname__handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Image lightbox (profile banner / avatar). */
[data-v3-zoom] { cursor: zoom-in; }
.v3-lightbox { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 6, 12, .92); animation: v3-fade .15s ease-out; cursor: zoom-out; }
.v3-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: default; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.v3-lightbox__x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .14); }
.v3-lightbox__x:hover { background: rgba(255, 255, 255, .24); }
/* Boosted video in an ad slot: play mark over the thumbnail. */
.v3-ad__media { position: relative; display: block; }
.v3-ad__media .v3-ad__thumb { display: block; }
.v3-ad__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(15, 12, 21, .65); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: transform .15s, background .15s; pointer-events: none; }
.v3-ad__play svg { width: 24px; height: 24px; margin-left: 3px; }
.v3-ad a:hover .v3-ad__play { transform: translate(-50%, -50%) scale(1.08); background: var(--v3-brand); }
/* Pill inputs: genre (one) and tags (many) - v3.js data-v3-pills. */
.v3-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 42px; padding: 6px 8px; border-radius: var(--v3-r-md); border: 1px solid var(--v3-border); background: var(--v3-surface); cursor: text; transition: border-color .15s, box-shadow .15s; }
.v3-pills:focus-within { border-color: var(--v3-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-brand) 18%, transparent); }
.v3-pills.is-full { animation: v3-pills-shake .3s; border-color: var(--v3-hot); }
@keyframes v3-pills-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.v3-pills__list { display: contents; }
.v3-pills__entry { flex: 1 1 120px; min-width: 120px; height: 28px; padding: 0 6px; border: 0; outline: 0; background: transparent; color: var(--v3-text); font: inherit; font-size: 14px; }
.v3-pills__entry::placeholder { color: var(--v3-faint); }
.v3-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; max-width: 100%; padding: 0 4px 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--v3-brand) 14%, var(--v3-surface)); color: var(--v3-brand); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-pills--one .v3-pill { padding-left: 12px; }
.v3-pill__x { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .75; }
.v3-pill__x:hover, .v3-pill__x:focus-visible { opacity: 1; background: color-mix(in srgb, var(--v3-brand) 22%, transparent); }
/* Instagram cover image drop (create sheet). */
.v3-drop--thumb { min-height: 130px; }
.v3-drop--thumb .v3-drop__preview { max-height: 240px; }
/* Pill input suggestions. */
.v3-pills { position: relative; }
.v3-pills__drop { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 30; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: var(--v3-r-md); border: 1px solid var(--v3-border); background: var(--v3-surface); box-shadow: var(--v3-shadow-pop); }
.v3-pills__opt { display: block; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--v3-text); }
.v3-pills__opt:hover, .v3-pills__opt.is-hi { background: var(--v3-surface-2); color: var(--v3-brand); }
.v3-pills.is-up .v3-pills__drop { top: auto; bottom: calc(100% + 4px); }

/* ── Explore hub (Ken, Oct 12): sections above the endless wall ─────────── */
.v3-chipbar--moods .v3-chipbar__item { gap: 6px; }
.v3-chipbar--moods .v3-chipbar__item .v3-icon { font-size: 15px; color: var(--v3-brand); }
.v3-chipbar--moods .v3-chipbar__item.is-active .v3-icon { color: #fff; }
.v3-xsec__ico { font-size: 17px; color: var(--v3-brand); vertical-align: -2px; margin-right: 2px; }
.v3-xsec__ico--hot { color: #F26B1D; }
.v3-xsec { margin: 0 0 28px; }
.v3-xsec .v3-dsec__head h2 { display: inline-flex; align-items: center; gap: 4px; }

/* Creator Studio pitch */
.v3-xstudio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center; margin: 0 0 28px; padding: 22px; border-radius: var(--v3-r-xl); overflow: hidden;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--v3-brand) 26%, var(--v3-surface)) 0%, var(--v3-surface) 62%); border: 1px solid color-mix(in srgb, var(--v3-brand) 28%, var(--v3-border)); }
.v3-xstudio__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-brand); }
.v3-xstudio h2 { margin: 8px 0 8px; font-family: var(--v3-font-display); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.v3-xstudio p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--v3-text-2); max-width: 46ch; }
.v3-xstudio p b { color: var(--v3-text); }
.v3-xstudio__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-xstudio__tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-xtpl { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--v3-surface-2); box-shadow: var(--v3-shadow-card); }
/* Stagger the whole middle column (not every even tile, which pushed #2 into #5). */
.v3-xstudio__tpls { padding-bottom: 10px; }
.v3-xtpl:nth-child(3n+2) { transform: translateY(10px); }
.v3-xtpl img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.v3-xtpl:hover img { transform: scale(1.05); }
.v3-xtpl__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(10, 8, 16, .82)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-xtpl__use { position: absolute; top: 6px; right: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--v3-brand-grad); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.v3-xtpl:hover .v3-xtpl__use, .v3-xtpl:focus-visible .v3-xtpl__use { opacity: 1; transform: none; }
@media (max-width: 860px) {
    .v3-xstudio { grid-template-columns: 1fr; }
    .v3-xstudio__tpls { grid-template-columns: repeat(6, 108px); overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
    .v3-xtpl:nth-child(3n+2) { transform: none; }
}

/* Creators to watch */
.v3-xspot { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.v3-xspot__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--v3-r-lg); border: 1px solid var(--v3-border); background: var(--v3-surface); box-shadow: var(--v3-shadow-card); }
.v3-xspot__who { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.v3-xspot__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-xspot__id .v3-uname { font-size: 14px; }
.v3-xspot__handle { font-size: 12px; color: var(--v3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-xspot__memes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 10px; overflow: hidden; }
.v3-xspot__m { aspect-ratio: 1; background: var(--v3-surface-2); }
.v3-xspot__m img { width: 100%; height: 100%; object-fit: cover; }
.v3-xspot__card .v3-btn { margin-top: auto; }

/* Rabbit holes */
.v3-xholes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-xhole { display: flex; flex-direction: column; border-radius: var(--v3-r-lg); overflow: hidden; border: 1px solid var(--v3-border); background: var(--v3-surface); color: inherit; transition: border-color .15s, transform .15s; }
.v3-xhole:hover { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); transform: translateY(-2px); }
.v3-xhole__art { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--v3-surface-2); }
.v3-xhole__art img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.v3-xhole__art img:first-child { grid-row: 1 / 3; }
.v3-xhole__art img:only-child { grid-column: 1 / 3; }
.v3-xhole__text { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.v3-xhole__tag { font-weight: 700; font-size: 14.5px; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-xhole__n { flex: none; font-size: 12px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }

/* Collectives */
.v3-xcolls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.v3-xcoll { display: flex; flex-direction: column; min-width: 0; border-radius: var(--v3-r-lg); overflow: hidden; border: 1px solid var(--v3-border); background: var(--v3-surface); box-shadow: var(--v3-shadow-card); }
.v3-xcoll__ban { display: block; height: 64px; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #000)); background-size: cover; background-position: center; }
.v3-xcoll__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 14px 14px; }
.v3-xcoll__av { margin-top: -22px; width: max-content; border-radius: 12px; box-shadow: 0 0 0 3px var(--v3-surface); }
.v3-xcoll__name { font-weight: 700; font-size: 15px; color: var(--v3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-xcoll__desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--v3-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-xcoll__meta { font-size: 11.5px; color: var(--v3-muted); }
.v3-xcoll .v3-btn { margin-top: auto; }

/* How memes pay you back */
.v3-xearn { margin: 0 0 32px; padding: 20px; border-radius: var(--v3-r-xl); border: 1px dashed color-mix(in srgb, var(--v3-brand) 40%, var(--v3-border)); background: var(--v3-tint); }
.v3-xearn h2 { margin: 0 0 14px; font-family: var(--v3-font-display); font-size: 18px; }
.v3-xearn__steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: xe; }
/* Desktop: three tiles, icon on top. Phones: rows with the icon on the left (below). */
.v3-xearn__steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 14px; border-radius: var(--v3-r-lg); background: var(--v3-surface); border: 1px solid color-mix(in srgb, var(--v3-brand) 14%, var(--v3-border)); font-size: 13px; line-height: 1.45; color: var(--v3-text-2); }
.v3-xearn__steps b { font-size: 14.5px; color: var(--v3-text); }
.v3-xearn__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; font-size: 18px; color: #fff; background: var(--v3-brand-grad); }
.v3-xearn__links { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 699px) {
    .v3-xstudio { padding: 18px 16px; }
    .v3-xspot, .v3-xcolls { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -14px; padding: 0 14px 6px; }
    .v3-xspot__card { flex: 0 0 72%; scroll-snap-align: start; }
    .v3-xcoll { flex: 0 0 64%; scroll-snap-align: start; }
    .v3-xholes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .v3-xearn__steps { grid-template-columns: 1fr; gap: 14px; }
    .v3-xearn__steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 0; border: 0; background: none; }
    .v3-xearn__steps li > b, .v3-xearn__steps li > span:not(.v3-xearn__ico) { grid-column: 2; }
    .v3-xearn__ico { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
}
/* Profile stats: same space under the numbers as above the labels (Ken, Oct 12). */
.v3-profile__body:has(> .v3-profile__stats:last-child) { padding-bottom: 10px; }
.v3-profile__stats dd { line-height: 1.15; }

/* ── Welcome: set up your profile (Ken, Oct 12) ─────────────────────────── */
.v3-bare:has(.v3-welcome) { height: auto; min-height: 100vh; min-height: 100dvh; background: var(--v3-bg); }
.v3-welcome { display: flex; justify-content: center; padding: 32px 16px 48px; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--v3-brand) 16%, transparent), transparent 70%); min-height: 100vh; min-height: 100dvh; }
.v3-welcome__card { width: 100%; max-width: 620px; padding: 22px 24px 20px; border-radius: 22px; background: var(--v3-surface); border: 1px solid var(--v3-border); box-shadow: var(--v3-shadow-pop); display: flex; flex-direction: column; gap: 16px; align-self: flex-start; }
.v3-welcome__head { display: flex; align-items: center; gap: 12px; }
.v3-welcome__logo { height: 30px; width: auto; }
.v3-welcome__dots { display: flex; gap: 6px; margin: 0 auto; padding: 0; list-style: none; }
.v3-welcome__dots li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--v3-muted); background: var(--v3-surface-2); }
.v3-welcome__dots li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: var(--v3-border); color: var(--v3-text-2); }
.v3-welcome__dots li.is-on span { background: var(--v3-brand-grad); color: #fff; }
.v3-welcome__dots li.is-now { color: var(--v3-text); }
.v3-welcome__skip { font-size: 13px; font-weight: 600; color: var(--v3-muted); white-space: nowrap; }
.v3-welcome__skip:hover { color: var(--v3-text); text-decoration: underline; }
.v3-welcome__title { margin: 4px 0 6px; font-family: var(--v3-font-display); font-size: clamp(22px, 4vw, 28px); line-height: 1.15; text-wrap: balance; outline: 0; }
.v3-welcome__lead { margin: 0 0 16px; color: var(--v3-text-2); font-size: 14.5px; line-height: 1.5; max-width: 52ch; }
.v3-welcome__media { position: relative; margin-bottom: 44px; }
.v3-welcome__banner { display: flex; align-items: flex-start; justify-content: flex-end; height: 132px; padding: 10px; border-radius: 16px; cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, var(--v3-brand) 55%, #1a1030), color-mix(in srgb, var(--v3-brand) 20%, #0e0a16)); background-size: cover; background-position: center; }
.v3-welcome__cam { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(10, 8, 16, .55); backdrop-filter: blur(6px); }
.v3-welcome__avatar { position: absolute; left: 18px; bottom: -40px; cursor: pointer; border-radius: 50%; box-shadow: 0 0 0 4px var(--v3-surface); }
.v3-welcome__avatar .v3-avatar img { width: 100%; height: 100%; object-fit: cover; }
.v3-welcome__avcam { position: absolute; right: -2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--v3-brand-grad); box-shadow: 0 0 0 3px var(--v3-surface); font-size: 15px; }
.v3-welcome__banner:focus-within, .v3-welcome__avatar:focus-within { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-welcome__hint { margin: 0 0 12px; font-size: 12px; color: var(--v3-muted); }
.v3-welcome__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.v3-welcome__full { grid-column: 1 / -1; }
.v3-welcome__help { display: block; margin-top: 4px; font-size: 12px; color: var(--v3-muted); }
.v3-welcome__check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.v3-welcome__check input { margin-top: 3px; accent-color: var(--v3-brand); }
.v3-welcome__check small { display: block; font-weight: 400; color: var(--v3-muted); }
.v3-welcome__genres { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-gpick { position: relative; cursor: pointer; }
.v3-gpick input { position: absolute; opacity: 0; pointer-events: none; }
.v3-gpick span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--v3-border); background: var(--v3-surface); font-size: 14px; font-weight: 600; color: var(--v3-text-2); transition: border-color .15s, background .15s, color .15s; }
.v3-gpick span .v3-icon { font-size: 16px; color: var(--v3-brand); }
.v3-gpick:hover span { border-color: color-mix(in srgb, var(--v3-brand) 50%, var(--v3-border)); }
.v3-gpick input:checked + span { background: var(--v3-brand-grad); border-color: transparent; color: #fff; }
.v3-gpick input:checked + span .v3-icon { color: #fff; }
.v3-gpick input:focus-visible + span { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-welcome__count { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--v3-muted); }
.v3-welcome__people { display: flex; flex-direction: column; gap: 10px; }
.v3-welcome__person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--v3-border); }
.v3-welcome__pid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v3-welcome__pid small { font-size: 12px; color: var(--v3-muted); }
.v3-welcome__pmemes { display: flex; gap: 4px; }
.v3-welcome__pmemes img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--v3-surface-2); }
.v3-welcome__foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--v3-divider); }
.v3-welcome__spacer { flex: 1; }
@media (max-width: 560px) {
    .v3-welcome { padding: 0; background: var(--v3-surface); }
    .v3-welcome__card { border: 0; border-radius: 0; box-shadow: none; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }
    .v3-welcome__dots li { padding: 4px; }
    .v3-welcome__dots li:not(.is-now) { font-size: 0; gap: 0; }
    .v3-welcome__fields { grid-template-columns: 1fr; }
    .v3-welcome__pmemes { display: none; }
    .v3-welcome__foot { position: sticky; bottom: 0; background: var(--v3-surface); margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }
}
.v3-pedit__check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.v3-pedit__check input[type=checkbox] { margin-top: 3px; accent-color: var(--v3-brand); }
.v3-pedit__check small { display: block; font-weight: 400; color: var(--v3-muted); }

/* Invite card + share-sheet invite row + Settings interests (Ken, Oct 12). */
.v3-invite { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--v3-r-lg); border: 1px solid color-mix(in srgb, var(--v3-brand) 30%, var(--v3-border)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--v3-brand) 14%, var(--v3-surface)), var(--v3-surface) 70%); }
.v3-invite__top { display: flex; gap: 12px; align-items: flex-start; padding-right: 22px; }
.v3-invite__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; font-size: 18px; color: #fff; background: var(--v3-brand-grad); }
.v3-invite__text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--v3-text-2); }
.v3-invite__text > b { font-size: 15px; color: var(--v3-text); }
.v3-invite__text span b { color: var(--v3-brand); }
.v3-invite__link { display: flex; gap: 6px; align-items: center; }
.v3-invite [data-v3-invite-copy].is-copied { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-invite__link input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--v3-border); background: var(--v3-surface-2); color: var(--v3-text-2); font: inherit; font-size: 12.5px; }
.v3-invite__stats { margin: 0; font-size: 12px; color: var(--v3-muted); }
.v3-invite__x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--v3-muted); }
.v3-invite__x:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-invite--rail .v3-invite__link { flex-wrap: wrap; }
.v3-invite--rail .v3-invite__link input { flex-basis: 100%; }
.v3-invite--rail .v3-invite__link .v3-btn { flex: 1; }
.v3-invite--inline { margin: 0 0 16px; }
.v3-invite--settings { margin-bottom: 16px; }
@media (min-width: 1200px) { .v3-invite--inline { display: none !important; } }
@media (max-width: 699px) { .v3-invite--inline { margin: 0 0 10px; border-radius: 16px; } .v3-invite--inline .v3-invite__link input { display: none; } }
.v3-share__invite { display: flex; align-items: center; gap: 10px; width: calc(100% - 36px); margin: -6px 18px 18px; padding: 12px 14px; border-radius: 14px; text-align: left; font-size: 13px; color: var(--v3-text-2); background: color-mix(in srgb, var(--v3-brand) 10%, var(--v3-surface)); border: 1px solid color-mix(in srgb, var(--v3-brand) 25%, var(--v3-border)); }
.v3-share__invite > .v3-icon:first-child { font-size: 18px; color: var(--v3-brand); flex: none; }
.v3-share__invite span { flex: 1; min-width: 0; }
.v3-share__invite b { display: block; font-size: 14px; color: var(--v3-text); }
.v3-share__invite[hidden] { display: none; }
.v3-set__interests .v3-welcome__genres { margin-bottom: 14px; }
.v3-set__acts { display: flex; gap: 8px; margin-top: 10px; }
.v3-set__row--link { padding: 8px 0; border-top: 1px solid var(--v3-divider); color: inherit; }
.v3-set__row--link:first-of-type { border-top: 0; }

/* ── Member tour (Ken, Oct 12) ─────────────────────────────────────────── */
.v3-tour { position: fixed; inset: 0; z-index: 120; }
.v3-tour__hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10, 7, 18, .62), 0 0 0 2px var(--v3-brand) inset; transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.v3-tour__card { position: fixed; padding: 16px 16px 14px; border-radius: 18px; background: var(--v3-surface); color: var(--v3-text); border: 1px solid var(--v3-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: left .25s, top .25s; animation: v3-fade .2s ease-out; }
.v3-tour__card.is-center { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--v3-brand) 18%, var(--v3-surface)), var(--v3-surface) 65%); }
.v3-tour__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.v3-tour__n { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand); }
.v3-tour__close { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--v3-muted); }
.v3-tour__close:hover { background: var(--v3-surface-2); color: var(--v3-text); }
.v3-tour__t { margin: 0 0 6px; font-family: var(--v3-font-display); font-size: 18px; line-height: 1.2; }
.v3-tour__b { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--v3-text-2); }
.v3-tour__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-tour__sp { flex: 1; }
.v3-tour__skip { font-size: 13px; font-weight: 600; color: var(--v3-muted); }
.v3-tour__skip:hover { color: var(--v3-text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .v3-tour__hole, .v3-tour__card { transition: none; animation: none; } }
.v3-auth__invited { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: var(--v3-text-2); background: color-mix(in srgb, var(--v3-brand) 10%, var(--v3-surface)); border: 1px solid color-mix(in srgb, var(--v3-brand) 25%, var(--v3-border)); }
.v3-auth__invited b { color: var(--v3-text); }

/* ── Default banners (no upload) ─────────────────────────────────────
   v3's look: a rich gradient with a soft dotted-circle pattern and a light
   sweep. Only applies while no banner image is set, so live previews in the
   editor/welcome screen drop it as soon as an image is chosen. */
:root {
    --v3-ban-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='20' fill='%23fff' fill-opacity='.06'/%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23fff' fill-opacity='.14'/%3E%3Ccircle cx='64' cy='0' r='2.5' fill='%23fff' fill-opacity='.14'/%3E%3Ccircle cx='0' cy='64' r='2.5' fill='%23fff' fill-opacity='.14'/%3E%3Ccircle cx='64' cy='64' r='2.5' fill='%23fff' fill-opacity='.14'/%3E%3C/svg%3E");
    --v3-ban-sheen: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(0, 0, 0, .28), transparent 60%);
}
.v3-profile__banner:not([style*="background-image"]),
.v3-pedit__banner:not([style*="background-image"]) {
    background-image: var(--v3-ban-sheen), var(--v3-ban-pattern),
        linear-gradient(135deg, var(--v3-brand-deep) 0%, var(--v3-brand) 45%, color-mix(in srgb, var(--v3-brand) 55%, #e879f9) 75%, color-mix(in srgb, var(--v3-brand) 25%, #f0abfc) 100%);
    background-size: auto, auto, 64px 64px, auto; background-repeat: no-repeat, no-repeat, repeat, no-repeat; background-position: 0 0, 0 0, center, 0 0;
}
.v3-welcome__banner:not([style*="background-image"]) {
    background-image: var(--v3-ban-sheen), var(--v3-ban-pattern),
        linear-gradient(135deg, color-mix(in srgb, var(--v3-brand) 55%, #1a1030), color-mix(in srgb, var(--v3-brand) 20%, #0e0a16));
    background-size: auto, auto, 64px 64px, auto; background-repeat: no-repeat, no-repeat, repeat, no-repeat; background-position: 0 0, 0 0, center, 0 0;
}
.v3-chero__ban:not([style*="background-image"]),
.v3-ccard__ban:not([style*="background-image"]),
.v3-xcoll__ban:not([style*="background-image"]) {
    background-image: var(--v3-ban-sheen), var(--v3-ban-pattern),
        linear-gradient(135deg, color-mix(in srgb, var(--acc, var(--v3-brand)) 50%, #000) 0%, var(--acc, var(--v3-brand)) 55%, color-mix(in srgb, var(--acc, var(--v3-brand)) 70%, #fff) 100%);
    background-size: auto, auto, 64px 64px, auto; background-repeat: no-repeat, no-repeat, repeat, no-repeat; background-position: 0 0, 0 0, center, 0 0;
}
.v3-ccard__ban:not([style*="background-image"]), .v3-xcoll__ban:not([style*="background-image"]) { background-size: auto, auto, 48px 48px, auto; }

/* ── Battles module (Ken, Oct 12) ─────────────────────────────────────── */
.v3-preview-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 999px; font-family: var(--v3-font-body, inherit); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 3px; background: var(--v3-warn-bg); color: var(--v3-warn); }

/* hub */
.v3-bth__head { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 20px; border-radius: var(--v3-r-xl); overflow: hidden; color: #fff;
    background-image: var(--v3-ban-sheen), var(--v3-ban-pattern), linear-gradient(135deg, var(--v3-brand-deep), var(--v3-brand) 55%, color-mix(in srgb, var(--v3-brand) 55%, #F26B1D));
    background-size: auto, auto, 64px 64px, auto; background-repeat: no-repeat, no-repeat, repeat, no-repeat; }
.v3-bth__head h1 { margin: 0; font-family: var(--v3-font-display); font-size: 26px; line-height: 1.15; }
.v3-bth__head p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; opacity: .9; }
.v3-bth__head > div { flex: 1; min-width: 0; }
.v3-bth__head .v3-btn { flex: none; background: rgba(255, 255, 255, .18); color: #fff; border-color: transparent; }
.v3-bth__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .18); font-size: 26px; }
.v3-bth__sec { margin: 0 0 28px; }
.v3-bth__sub { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-bth__empty { margin: 0; padding: 18px; border: 1px dashed var(--v3-border); border-radius: var(--v3-r-lg); color: var(--v3-muted); font-size: 14px; text-align: center; }
.v3-btcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.v3-btcard { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); overflow: hidden; background: var(--v3-surface); box-shadow: var(--v3-shadow-card); color: var(--v3-text); transition: transform .15s, box-shadow .15s; }
.v3-btcard:hover { transform: translateY(-2px); }
.v3-btcard__img { display: block; aspect-ratio: 16 / 9; background: var(--v3-surface-2); overflow: hidden; }
.v3-btcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-btcard__vs { display: grid; place-items: center; aspect-ratio: 16 / 9; font-size: 44px; color: #fff;
    background-image: var(--v3-ban-sheen), var(--v3-ban-pattern), linear-gradient(135deg, #1a1030, var(--v3-brand) 60%, #F26B1D);
    background-size: auto, auto, 48px 48px, auto; background-repeat: no-repeat, no-repeat, repeat, no-repeat; }
.v3-btcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.v3-btcard__t { font-size: 15.5px; line-height: 1.3; }
.v3-btcard__sub { font-size: 13px; color: var(--v3-text-2); line-height: 1.4; }
.v3-bpast { display: flex; flex-direction: column; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); overflow: hidden; background: var(--v3-surface); }
.v3-bpast__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--v3-divider); color: var(--v3-text); }
.v3-bpast__row:first-child { border-top: 0; }
.v3-bpast__row:hover { background: var(--v3-surface-2); }
.v3-bpast__row > img, .v3-bpast__noimg { flex: none; width: 52px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--v3-surface-2); }
.v3-bpast__noimg { display: grid; place-items: center; color: var(--v3-muted); }
.v3-bpast__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-bpast__txt b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-bpast__txt > span { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--v3-muted); }
.v3-bpast__txt .v3-icon { color: #E3A008; }
.v3-bpast__row > .v3-icon { flex: none; color: var(--v3-faint); }

/* state + prize */
.v3-bstate { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--v3-surface-2); color: var(--v3-text-2); white-space: nowrap; }
.v3-bstate--live { background: var(--v3-ok-bg); color: var(--v3-ok); }
.v3-bstate--live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: v3-bpulse 1.6s ease-in-out infinite; }
.v3-bstate--soon { background: var(--v3-tint); color: var(--v3-brand-ink); }
@keyframes v3-bpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .v3-bstate--live i { animation: none; } }
.v3-bprize { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 13px; color: var(--v3-text-2); }
.v3-bprize > .v3-icon { color: var(--v3-brand); }
.v3-bprize b { color: var(--v3-text); }

/* battle page */
.v3-battle { display: flex; flex-direction: column; gap: 18px; }
.v3-battle__back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--v3-muted); }
.v3-battle__back:hover { color: var(--v3-text); }
.v3-battle__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.v3-battle__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.v3-battle__chips .v3-preview-tag { margin-left: 0; vertical-align: 0; }
.v3-battle__kind { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-battle__title { margin: 0; font-family: var(--v3-font-display); font-size: 26px; line-height: 1.2; text-wrap: balance; }
.v3-battle__blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--v3-text-2); }
.v3-battle__when { margin: 0; font-size: 14px; color: var(--v3-muted); line-height: 1.5; }
.v3-battle__note { margin: 0; padding: 16px; border: 1px dashed var(--v3-border); border-radius: var(--v3-r-lg); color: var(--v3-muted); font-size: 14px; text-align: center; }
.v3-battle__sec { display: flex; flex-direction: column; gap: 12px; }
.v3-battle__sechead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.v3-battle__sechead h2 { margin: 0; font-family: var(--v3-font-display); font-size: 18px; }
.v3-battle__secnote { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--v3-muted); }
.v3-battle__cta { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); }
.v3-battle__cta > .v3-capimg { flex: none; width: 120px; }
.v3-battle__cta > div:not(.v3-capimg) { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.v3-battle__cta b { font-size: 15.5px; }
.v3-battle__cta p { margin: 0 0 6px; font-size: 13.5px; color: var(--v3-text-2); line-height: 1.45; }
.v3-battle__cta--meme > div { margin-right: auto; }
.v3-battle__cta--meme > div p { margin: 0; }
.v3-battle__ctaico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--v3-tint); color: var(--v3-brand); font-size: 24px; }
.v3-battle__champ { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--v3-r-xl); border: 1px solid color-mix(in srgb, #E3A008 45%, var(--v3-border)); background: linear-gradient(135deg, color-mix(in srgb, #E3A008 14%, var(--v3-surface)), var(--v3-surface) 70%); }
.v3-battle__champ > .v3-capimg { flex: none; width: min(46%, 280px); }
.v3-battle__champimg { flex: none; width: min(40%, 220px); aspect-ratio: 1; border-radius: var(--v3-r-md); overflow: hidden; background: var(--v3-surface-2); }
.v3-battle__champimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-battle__champinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.v3-battle__crown { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #B7791F; }
.v3-battle__champt { font-family: var(--v3-font-display); font-size: 18px; font-weight: 700; color: var(--v3-text); line-height: 1.25; }
.v3-battle__champwho { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.v3-battle__champvotes { font-size: 13.5px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }

/* caption overlay (classic meme text, sized to the picture) */
.v3-capimg { position: relative; container-type: inline-size; border-radius: var(--v3-r-md); overflow: hidden; background: #000; line-height: 0; }
.v3-capimg img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.v3-capimg__t, .v3-capimg__b { position: absolute; left: 4%; right: 4%; font-family: 'Anton', 'Impact', 'Arial Black', sans-serif; font-size: clamp(14px, 8.5cqi, 46px); line-height: 1.08; color: #fff; text-align: center; text-transform: uppercase; overflow-wrap: anywhere;
    -webkit-text-stroke: .06em #000; paint-order: stroke fill; text-shadow: 0 0 .08em #000, 0 .04em .04em #000; pointer-events: none; }
.v3-capimg__t { top: 3%; }
.v3-capimg__b { bottom: 3%; }
.v3-capimg__t:empty, .v3-capimg__b:empty { display: none; }

.v3-capcomp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-xl); background: var(--v3-surface); box-shadow: var(--v3-shadow-card); align-items: start; }
.v3-capcomp__fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-capcomp__h { margin: 0 0 6px; font-family: var(--v3-font-display); font-size: 17px; }
.v3-capcomp__fields .v3-input { margin-bottom: 6px; }
.v3-capcomp__hint { margin: 0; font-size: 12.5px; color: var(--v3-muted); }
.v3-capcomp__acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.v3-capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.v3-capcard { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.v3-capcard .v3-capimg { border-radius: 0; }
.v3-capcard.is-voted { border-color: var(--v3-brand); box-shadow: 0 0 0 1px var(--v3-brand); }
.v3-capcard.is-win { border-color: #E3A008; box-shadow: 0 0 0 1px #E3A008; }
.v3-capcard.is-mine { border-style: dashed; }
.v3-capcard__rank { flex: none; padding: 2px 7px; border-radius: 999px; font-family: var(--v3-font-display); font-size: 12px; font-weight: 700; line-height: 1.3; background: var(--v3-surface-2); color: var(--v3-text-2); font-variant-numeric: tabular-nums; }
.v3-capcard.is-win .v3-capcard__rank { background: color-mix(in srgb, #E3A008 20%, transparent); color: #B7791F; }
.v3-capcard__foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-width: 0; }
.v3-capcard__who { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; overflow: hidden; }
.v3-capcard__votes { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-capcard__votes .v3-icon { color: #E3A008; }
.v3-capcard__mine, .v3-match__mine { flex: none; font-size: 12px; font-weight: 700; color: var(--v3-brand-ink); background: var(--v3-tint); padding: 3px 8px; border-radius: 999px; }
.v3-capcard__vote, .v3-match__vote { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--v3-border); background: var(--v3-surface); color: var(--v3-text); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.v3-capcard__vote:hover, .v3-match__vote:hover { border-color: var(--v3-brand); color: var(--v3-brand); }
.v3-capcard__vote[aria-pressed="true"], .v3-match__vote[aria-pressed="true"] { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-capcard__hide, .v3-bgrid__hide { flex: none; width: 30px; height: 30px; font-size: 15px; color: var(--v3-muted); }
.v3-capcard__hide.is-armed, .v3-bgrid__hide.is-armed { background: var(--v3-hot-bg); color: var(--v3-hot); }

/* meme battle: entry + entrants */
.v3-bentry { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--v3-brand); border-radius: var(--v3-r-lg); background: color-mix(in srgb, var(--v3-brand) 6%, var(--v3-surface)); }
.v3-bentry__img { flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--v3-surface-2); }
.v3-bentry__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-bentry__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-bentry__txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-bentry__txt > span:last-child { font-size: 12.5px; color: var(--v3-muted); }
.v3-bentry__lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-brand); }
.v3-bentry__acts { flex: none; display: flex; gap: 6px; }
.v3-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.v3-bgrid__item { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-bgrid__img { display: block; aspect-ratio: 1; border-radius: var(--v3-r-md); overflow: hidden; background: var(--v3-surface-2); }
.v3-bgrid__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-bgrid__item.is-mine .v3-bgrid__img { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-bgrid__who { font-size: 13px; min-width: 0; overflow: hidden; }
.v3-bgrid__hide { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: #fff; }

/* bracket */
.v3-bround__next { margin: -4px 0 0; font-size: 13px; color: var(--v3-muted); }
.v3-bround { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.v3-bround + .v3-bround { border-top: 1px solid var(--v3-divider); padding-top: 16px; }
.v3-bround:not(.is-live) .v3-match { opacity: .92; }
.v3-bround__h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-muted); }
.v3-bround.is-live .v3-bround__h { color: var(--v3-text); }
.v3-bround__h .v3-bstate { letter-spacing: 0; text-transform: none; }
.v3-bround__matches { display: flex; flex-direction: column; gap: 12px; }
.v3-match { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; padding: 10px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-lg); background: var(--v3-surface); }
.v3-match__vs { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--v3-font-display); font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--v3-brand), #F26B1D); }
.v3-match__side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; padding: 6px; border-radius: var(--v3-r-md); transition: background .15s; }
.v3-match__side.is-voted { background: color-mix(in srgb, var(--v3-brand) 10%, transparent); }
.v3-match__side.is-win { background: color-mix(in srgb, #E3A008 12%, transparent); }
.v3-match__side.is-out { opacity: .5; }
.v3-match__side--bye { align-items: center; justify-content: center; color: var(--v3-muted); font-size: 13px; border: 1px dashed var(--v3-border); }
.v3-match__img { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--v3-surface-2); }
.v3-match__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-match__img--gone { display: grid; place-items: center; color: var(--v3-muted); font-size: 13px; }
.v3-match__seed { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, .6); color: #fff; }
.v3-match__who { font-size: 13px; min-width: 0; overflow: hidden; }
.v3-match__bar { position: relative; display: block; padding: 4px 8px; border-radius: 8px; font-size: 12.5px; color: var(--v3-text-2); background: var(--v3-surface-2); overflow: hidden; isolation: isolate; font-variant-numeric: tabular-nums; }
.v3-match__bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: color-mix(in srgb, var(--v3-brand) 22%, transparent); z-index: -1; }
.v3-match__bar b { color: var(--v3-text); }
.v3-match__vote, .v3-match__mine { align-self: stretch; text-align: center; }
.v3-match__adv { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #B7791F; }

/* pick sheet */
.v3-bpick__hint { margin: 0 0 12px; font-size: 13.5px; color: var(--v3-muted); }
.v3-bpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 10px; }
.v3-bpick__item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; text-align: left; font: inherit; color: var(--v3-text); cursor: pointer; }
.v3-bpick__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--v3-surface-2); display: block; }
.v3-bpick__item.is-on { border-color: var(--v3-brand); }
.v3-bpick__item:disabled { opacity: .6; cursor: default; }
.v3-bpick__t { padding: 0 4px; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-bpick__stats { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 4px 4px; font-size: 12px; color: var(--v3-muted); font-variant-numeric: tabular-nums; }
.v3-bpick__stats > span { display: inline-flex; align-items: center; gap: 3px; }
.v3-bpick__tools { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.v3-bpick__search { position: relative; flex: 1; min-width: 0; }
.v3-bpick__search > .v3-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--v3-muted); pointer-events: none; }
.v3-bpick__search .v3-input { width: 100%; padding-left: 34px; height: 38px; }
.v3-bpick__sort, .v3-bpick__genres { display: flex; gap: 4px; }
.v3-bpick__sort { flex: none; padding: 3px; border-radius: 999px; background: var(--v3-surface-2); }
.v3-bpick__sort button, .v3-bpick__genres button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--v3-text-2); cursor: pointer; white-space: nowrap; }
.v3-bpick__sort button.is-on { background: var(--v3-surface); color: var(--v3-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.v3-bpick__genres { overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding-bottom: 2px; }
.v3-bpick__genres::-webkit-scrollbar { display: none; }
.v3-bpick__genres button { flex: none; border: 1px solid var(--v3-border); background: var(--v3-surface); }
.v3-bpick__genres button small { font-size: 11.5px; font-weight: 600; color: var(--v3-muted); }
.v3-bpick__genres button.is-on { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-bpick__genres button.is-on small { color: rgba(255, 255, 255, .8); }
.v3-bpick__none { margin: 18px 0; text-align: center; font-size: 14px; color: var(--v3-muted); }
.v3-bpick__more { display: flex; margin: 14px auto 0; }
.v3-bpick__sk { display: block; aspect-ratio: 1; border-radius: 10px; }
.v3-bpick__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px; text-align: center; color: var(--v3-text-2); }
.v3-bpick__empty > .v3-icon { font-size: 34px; color: var(--v3-brand); }
.v3-bpick__empty p { margin: 0 0 6px; font-size: 14px; color: var(--v3-muted); }

/* rail: how it works */
.v3-brules { list-style: none; counter-reset: br; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.v3-brules li { counter-increment: br; position: relative; padding-left: 34px; display: flex; flex-direction: column; gap: 2px; }
.v3-brules li::before { content: counter(br); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--v3-tint); color: var(--v3-brand-ink); }
.v3-brules b { font-size: 14px; }
.v3-brules span { font-size: 13px; color: var(--v3-text-2); line-height: 1.45; }

/* staff › battles */
.v3-sbt__new { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-sbt__mods { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; font-size: 13px; }
.v3-sbt__modlink { color: var(--v3-brand); font-weight: 600; }
.v3-sbt__modlink:hover { text-decoration: underline; }
.v3-sbt__form { padding: 18px; margin: 0 0 20px; display: flex; flex-direction: column; gap: 16px; overflow: visible; }
.v3-sbt__tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; margin-bottom: 10px; }
.v3-sbt__tpl { position: relative; display: block; cursor: pointer; }
.v3-sbt__tpl input { position: absolute; opacity: 0; pointer-events: none; }
.v3-sbt__tpl img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid transparent; background: var(--v3-surface-2); }
.v3-sbt__tpl input:checked + img { border-color: var(--v3-brand); box-shadow: 0 0 0 2px var(--v3-tint); }
.v3-sbt__tpl input:focus-visible + img { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-sbt__upload { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--v3-border); border-radius: var(--v3-r-md); font-size: 13.5px; color: var(--v3-text-2); cursor: pointer; }
.v3-sbt__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.v3-sbt__upload:focus-within { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-sbt__err { margin: 0; padding: 10px 12px; border-radius: var(--v3-r-md); background: var(--v3-hot-bg); color: var(--v3-hot); font-size: 13.5px; }
.v3-sbt__acts { display: flex; justify-content: flex-end; gap: 8px; }
.v3-sbt__list { margin: 0 0 20px; }
.v3-sbt__list .v3-srow__title a { color: inherit; }
.v3-sbt__list .v3-srow__title a:hover { text-decoration: underline; }
.v3-sbt__list .v3-srow__sub { white-space: normal; }
.v3-sbt__thumb { flex: none; width: 52px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--v3-surface-2); }
.v3-sbt .v3-srow.is-muted { opacity: .65; }

@media (max-width: 699px) {
    .v3-bth__head { padding: 16px; gap: 12px; flex-wrap: wrap; }
    .v3-bth__head h1 { font-size: 22px; }
    .v3-bth__ico { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }
    .v3-battle__title { font-size: 22px; }
    .v3-capcomp { grid-template-columns: 1fr; padding: 12px; }
    .v3-capcomp__acts .v3-btn { flex: 1; justify-content: center; }
    .v3-capgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .v3-capimg__t, .v3-capimg__b { font-size: clamp(12px, 9cqi, 40px); }
    .v3-capcard__foot { flex-wrap: wrap; padding: 8px; gap: 6px; }
    .v3-capcard__who { flex: 1 1 0; }
    .v3-capcard__vote { flex: 1 1 100%; }
    .v3-battle__cta { flex-wrap: wrap; }
    .v3-battle__cta > .v3-capimg { width: 96px; }
    .v3-battle__cta--meme .v3-btn { width: 100%; justify-content: center; }
    .v3-battle__champ { flex-direction: column; align-items: stretch; }
    .v3-battle__champ > .v3-capimg, .v3-battle__champimg { width: 100%; }
    .v3-battle__champimg { aspect-ratio: 16 / 10; }
    .v3-bentry { flex-wrap: wrap; }
    .v3-bentry__acts { width: 100%; }
    .v3-bentry__acts .v3-btn { flex: 1; justify-content: center; }
    .v3-match { gap: 6px; padding: 8px; }
    .v3-match__vs { width: 28px; height: 28px; font-size: 10px; }
    .v3-match__side { padding: 4px; }
    .v3-sbt .v3-srow { flex-wrap: wrap; }
    .v3-sbt .v3-srow__acts { width: 100%; display: flex; gap: 8px; }
    .v3-sbt .v3-srow__acts .v3-btn { flex: 1; justify-content: center; }
}
@media (max-width: 699px) {
    .v3-bpick__tools { flex-wrap: wrap; }
    .v3-bpick__search { flex-basis: 100%; }
}

/* ── App: install offer + "update ready" drawer (Ken, Oct 13; v3.js) ──────── */
.v3-appbar {
    position: fixed; z-index: 70; left: 12px; right: 12px;
    bottom: calc(var(--v3-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px;
    background: var(--v3-surface); color: var(--v3-text); border: 1px solid var(--v3-border); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 12, 21, .28);
    transform: translateY(calc(100% + 40px)); opacity: 0;
    transition: transform .34s cubic-bezier(.2, .9, .25, 1.1), opacity .2s ease-out;
}
.v3-appbar.is-in { transform: none; opacity: 1; }
.v3-appbar__icon { width: 46px; height: 46px; border-radius: 12px; flex: none; box-shadow: 0 4px 12px rgba(124, 58, 237, .25); }
.v3-appbar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-appbar__body b { font: 700 14.5px/1.25 var(--v3-font-display, var(--v3-font)); }
.v3-appbar__body span { font-size: 12.5px; line-height: 1.4; color: var(--v3-muted); }
.v3-appbar__body svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--v3-brand); }
.v3-appbar .v3-btn, .v3-appbar__x { flex: none; }
.v3-appbar--update { border-color: color-mix(in srgb, var(--v3-brand) 45%, var(--v3-border)); }
.v3-appbar--update .v3-appbar__icon { animation: v3-appbar-nudge 1.6s ease-in-out .5s 2; }
@keyframes v3-appbar-nudge { 0%, 100% { transform: none; } 20% { transform: rotate(-8deg) scale(1.06); } 40% { transform: rotate(6deg) scale(1.06); } 60% { transform: none; } }
@media (min-width: 700px) { .v3-appbar { left: auto; right: 24px; bottom: 24px; width: 400px; } }
@media (prefers-reduced-motion: reduce) { .v3-appbar { transform: none; transition: opacity .2s; } .v3-appbar--update .v3-appbar__icon { animation: none; } }
.v3-appget { background: none; border: 0; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }
.v3-appget--rail { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--v3-border); border-radius: var(--v3-r-pill, 999px); font-size: 13px; font-weight: 600; color: var(--v3-text-2); }
.v3-appget--rail:hover { color: var(--v3-brand); border-color: var(--v3-brand); }
.v3-appget[hidden] { display: none !important; }

/* Related threads under a thread's reply box (Ken, Oct 13). */
.v3-related { margin-top: 20px; padding-bottom: 6px; }
.v3-related__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--v3-divider); color: var(--v3-text); }
.v3-related__item:first-of-type { border-top: 0; }
.v3-related__item > .v3-icon { flex: none; color: var(--v3-faint); }
.v3-related__item:hover .v3-related__title { color: var(--v3-brand); }
.v3-related__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-related__title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-related__meta { font-size: 12.5px; color: var(--v3-muted); }

/* Composer placeholder overlay (v3.js): one line, fades between ideas. */
.v3-ph { position: absolute; left: 0; right: 0; top: 8px; z-index: 1; pointer-events: none; font-size: 16px; line-height: 1.5; color: var(--v3-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .38s ease; }
.v3-ph.is-out { opacity: 0; }
.v3-ph[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .v3-ph { transition: none; } }