/* ============================================================
 * sir.gg · visual system copied from vex.rip/swag
 *
 * Pitch-black nebula (four fixed parallax layers), shooting-star
 * meteors, floating liquid-glass top pill, Metal Mania display
 * font for the big title, Space Grotesk for body, JetBrains Mono
 * for kicker/mono labels. Pure white on black — no colored tint.
 * ============================================================ */
:root{
    --text:     #eaf1ff;
    --muted:    #a0a8b5;
    --muted-2:  #6b7280;
    --line:     rgba(255,255,255,.14);
    --line-2:   rgba(255,255,255,.22);
    --ok:       #7dff5c;
    --warn:     #ffbe63;
    --err:      #ff6a6a;
    --radius:   14px;
    --radius-lg:22px;
    --font-sans: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-anton:'Anton', 'Bebas Neue', sans-serif;
    --font-disp: 'Metal Mania', 'Anton', serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{
    min-height:100vh;
    background:#000;
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    /* clip, not hidden: hidden turns body into a scroll container and
       position: sticky (the top bar) silently stops working */
    overflow-x: clip;
}
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; background: none; border: none; outline: none; }
::selection{ background: rgba(255,255,255,.25); color:#000; }

/* ============ backdrop · four fixed parallax layers ============ */
.o{ position: fixed; inset: 0; pointer-events: none; }
.o1{
    background:
        radial-gradient(1200px 800px at 50% 15%, rgba(20, 24, 46, .5), transparent 65%),
        radial-gradient(1000px 700px at 15% 90%, rgba(10, 12, 30, .55), transparent 60%),
        #000;
    z-index: 0;
}
.o2{
    background: url('/img/space/stars.png') repeat;
    background-size: 1500px auto;
    z-index: 1; opacity: .55;
    animation: nebScroll 240s linear infinite;
    mix-blend-mode: screen;
}
/* nebula + cloud overlays retired at user's request — the star
   field alone reads cleaner on this site. Keep the CSS around so
   the o3/o4 divs in the markup don't blow up. */
.o3, .o4{ display: none; }
@keyframes nebScroll{     to{ background-position: -3000px 0; } }
@keyframes nebScrollBack{ to{ background-position:  3000px 0; } }

/* ============ shooting stars ============ */
.shooter{
    position: fixed;
    width: 200px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(200,230,255,.9) 60%, #fff);
    filter: drop-shadow(0 0 6px rgba(180,220,255,.9)) drop-shadow(0 0 14px rgba(120,180,255,.6));
    opacity: 0;
    transform-origin: right center;
    transform: rotate(18deg) translateX(0);
    animation: shoot 7s linear infinite;
    pointer-events: none;
    border-radius: 999px;
    z-index: 4;
}
.shooter::after{
    content:'';
    position:absolute; right:-4px; top:50%;
    width:8px; height:8px;
    border-radius:50%;
    background: radial-gradient(circle, #fff 0%, rgba(200,230,255,.9) 40%, transparent 70%);
    transform: translateY(-50%);
    box-shadow: 0 0 14px rgba(200,230,255,.95), 0 0 30px rgba(140,190,255,.7);
}
.shooter.s1{ top:  8%; left: -20%; animation-delay: 1.5s;  animation-duration: 6.5s; }
.shooter.s2{ top: 34%; left: -20%; animation-delay: 4.2s;  animation-duration: 7.2s; }
.shooter.s3{ top: 62%; left: -20%; animation-delay: 8.1s;  animation-duration: 8s;   }
.shooter.s4{ top: 20%; left: -20%; animation-delay: 12.4s; animation-duration: 6.8s; }
.shooter.s5{ top: 76%; left: -20%; animation-delay: 16s;   animation-duration: 7.5s; }
@keyframes shoot{
    0%   { opacity: 0; transform: rotate(18deg) translateX(0); }
    2%   { opacity: 0; }
    4%   { opacity: 1; }
    18%  { opacity: 1; }
    22%  { opacity: 0; transform: rotate(18deg) translateX(140vw); }
    100% { opacity: 0; transform: rotate(18deg) translateX(140vw); }
}

/* ============ top nav · liquid-glass pill, sticks on scroll ============ */
.tnav{
    position: sticky; top: 14px; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    max-width: 1180px; margin: 14px auto 0;
    padding: 10px 12px 10px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.28) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 20px 50px rgba(0,0,0,.55);
    overflow: hidden;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tnav.scrolled{
    background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.55) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 26px 60px rgba(0,0,0,.65);
}
.tnav::before{
    content:''; position:absolute; top:0; left:14%; right:14%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    pointer-events:none;
}
.tnav .brand{
    display: inline-flex; align-items: center; gap: 10px;
    color: #ffffff;
    text-decoration: none;
    line-height: 0;
    flex-shrink: 0;
}
.tnav .brand img{
    height: 34px; width: auto;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.35)) drop-shadow(0 0 22px rgba(255,255,255,.15));
    transition: transform .18s ease, filter .18s ease;
}
.tnav .brand:hover img{ transform: scale(1.03); filter: drop-shadow(0 0 12px rgba(255,255,255,.55)) drop-shadow(0 0 30px rgba(255,255,255,.28)); }
.tnav .grow{ flex: 1; }

/* ---- admin-authored site notice, rendered inside the nav pill ----
   Sits in the dead space between the logo and the links. A .grow on
   each side keeps it optically centred, and it collapses cleanly when
   there's no notice set. Truncates rather than wrapping so it can
   never change the pill's height. */
.tnav-notice{
    display: inline-flex; align-items: center; gap: 9px;
    min-width: 0;                       /* lets the ellipsis actually engage */
    padding: 0 6px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1;
    color: #c4cad5;
    animation: noticeIn .5s cubic-bezier(.2,.7,.2,1) both;
}
.tnav-notice[hidden]{ display: none; }
.tnav-notice .txt{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnav-notice .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,.75);
    flex-shrink: 0;
    animation: noticePulse 2.6s ease-in-out infinite;
}
@keyframes noticePulse{ 0%,100%{ opacity:.35; transform: scale(.82); } 50%{ opacity:1; transform: scale(1); } }
@keyframes noticeIn{ from{ opacity:0; transform: translateY(-3px); } to{ opacity:1; transform:none; } }
/* the pill gets tight before the links wrap — drop the notice first */
@media (max-width: 900px){ .tnav-notice{ display: none; } }
@media (prefers-reduced-motion: reduce){ .tnav-notice .dot{ animation: none; opacity: .9; } }
.tnav .nav-link{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #d0d5df; text-decoration: none;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    transition: color .18s, background .18s, border-color .18s;
    /* never let a long site notice squeeze these into wrapping —
       the notice ellipsizes instead, so the pill keeps its height */
    flex-shrink: 0;
    white-space: nowrap;
}
.tnav .nav-link:hover{ color:#fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.tnav .nav-link.primary{
    background: linear-gradient(180deg, #fff, #eaf2ff 55%, #d5e4ff);
    color: #0a1220;
    border-color: #ffffff;
    box-shadow: 0 0 22px rgba(220,235,255,.55), inset 0 1px 0 rgba(255,255,255,.9);
    text-shadow: none;
}

/* ============ layout ============ */
main.wrap{ position: relative; z-index: 10; max-width: 1180px; margin: 0 auto; padding: 60px 26px 120px; }

/* ============ hero ============ */
.hero{ text-align: center; padding: 20px 0 40px; }
.hero h1{
    font-family: var(--font-disp);
    font-weight: 400;
    font-size: clamp(120px, 18vw, 280px);
    line-height: .9;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
        0 0 8px  rgba(255,255,255,.6),
        0 0 20px rgba(255,255,255,.35);
    margin: 0 auto 14px;
    display: inline-block;
}
.hero .lede{
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.55;
    color: #c0c0c0;
    max-width: 920px;
    margin: 12px auto 0;
    text-align: center;
}
.hero .lede b{ color:#fff; }
.hero .lede .mono{ font-family: var(--font-mono); font-size: 15px; }

/* ---- hero feature bullets ----
   Two columns on desktop so six short lines stay compact instead of
   pushing the search box below the fold. */
.hero-feats{
    list-style: none;
    display: grid;
    /* Four columns, stepping to two then one. Never three: the list is
       twelve items, so an odd column count leaves a ragged final row. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 26px;
    max-width: 1160px;
    margin: 22px auto 0;
    text-align: left;
    padding: 0;
}
.hero-feats li{
    position: relative;
    padding-left: 19px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: #b9c0cc;
}
.hero-feats li b{ color: #fff; }
.hero-feats li::before{
    content: '';
    position: absolute;
    left: 2px; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px rgba(255,255,255,.65);
}
@media (max-width: 1160px){
    .hero-feats{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
}
@media (max-width: 680px){
    .hero-feats{ grid-template-columns: 1fr; gap: 8px; max-width: 460px; }
    .hero-feats li{ font-size: 13px; }
}

/* ============ big search bar ============ */
.searchbox{
    display: flex; align-items: center; gap: 12px;
    max-width: 720px; margin: 30px auto 0;
    padding: 10px 10px 10px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, rgba(0,0,0,.20));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 20px 50px rgba(0,0,0,.45);
}
.searchbox .prefix{ font-family: var(--font-anton); font-size: 26px; color: #a0a8b5; letter-spacing: .04em; text-transform: uppercase; }
.searchbox input{ flex: 1; font-size: 18px; font-family: var(--font-sans); color: #fff; padding: 10px 0; }
.searchbox input::placeholder{ color: var(--muted-2); }
.searchbox .go{
    padding: 12px 22px; border-radius: 999px;
    background: linear-gradient(180deg, #fff, #eaf2ff 55%, #d5e4ff);
    color: #0a1220;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.18),
        0 8px 20px rgba(255,255,255,.35),
        0 0 30px rgba(255,255,255,.6),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .15s, box-shadow .15s;
    border: 1px solid #ffffff;
}
.searchbox .go:hover{ transform: translateY(-1px); }

/* ---- search box availability state ----
   A tight ring plus a close glow — small blur radius on purpose, so it
   reads as a state change on the control rather than a light source. */
.searchbox{ transition: border-color .22s ease, box-shadow .22s ease; }
.searchbox.is-free{
    border-color: rgba(125,255,92,.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 0 0 1px rgba(125,255,92,.30),
        0 0 16px rgba(125,255,92,.22),
        0 20px 50px rgba(0,0,0,.45);
}
.searchbox.is-taken{
    border-color: rgba(255,106,106,.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 0 0 1px rgba(255,106,106,.30),
        0 0 16px rgba(255,106,106,.22),
        0 20px 50px rgba(0,0,0,.45);
}
#searchStatus.free { color: var(--ok)  !important; }
#searchStatus.taken{ color: var(--err) !important; }
/* the animated placeholder shouldn't shout — it's a hint, not content */
.searchbox input::placeholder{ color: var(--muted-2); opacity: 1; }

/* ---- legal fine print ----
   Deliberately quiet: small, low-contrast, below the fold. Present for
   the legal record without competing with anything on the page. */
.fineprint{
    max-width: 760px;
    margin: 26px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: .01em;
    text-transform: none;
    color: #5a616e;
    text-align: left;
}
.fineprint b{ color: #7b828f; font-weight: 700; }
.fineprint a{ color: #7b828f; text-decoration: underline; text-underline-offset: 2px; }
.fineprint a:hover{ color: #c0c6d2; }
.fineprint + .fineprint{ margin-top: 10px; border-top: none; padding-top: 0; }

/* one-line version shown on the redirect splash */
.splash-fine{
    margin-top: 14px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    line-height: 1.5;
    color: #5f6674;
    text-align: center;
    max-width: 460px;
}
.splash-fine a{ color: #79808e; text-decoration: underline; text-underline-offset: 2px; }

/* ============ stat strip · no boxes, hairline dividers ============ */
.stats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin: 30px 0 46px;
    padding: 22px 4px;
    position: relative;
}
.stats::before{
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 60%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
    border-radius: 22px;
}
.stat{ position: relative; padding: 8px 22px; background: none; border: none; box-shadow: none; text-align: left; }
.stat + .stat::before{
    content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent);
}
.stat .k{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.stat .v{
    font-family: var(--font-anton);
    font-size: clamp(44px, 5.6vw, 68px);
    letter-spacing: -.02em;
    line-height: .9;
    background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 28px rgba(255,255,255,.28), 0 0 60px rgba(255,255,255,.14);
    filter: drop-shadow(0 4px 20px rgba(255,255,255,.18));
}

/* Landing feed counts read as the headline of each row, so they get a
   step up in size over the uppercase HITS / UNIQUE labels around them. */
.list .row .hits .num{ font-size: 12.5px; letter-spacing: .06em; }

/* ============ section head ============ */
.section-head{ display: flex; align-items: baseline; gap: 12px; margin: 32px 0 14px; padding-left: 4px; }
.section-head h2{
    font-family: var(--font-anton);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255,255,255,.22);
}
.section-head .kicker{
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .3em;
    color: var(--muted);
    text-transform: uppercase;
}
.section-head .bar{
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.05));
}

/* ============ list rows · transparent, hairline separators ============ */
.list{ padding: 6px 22px; position: relative; }
.list .row{
    position: relative;
    display: grid; align-items: center; gap: 12px;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
}
.list .row + .row::before{
    content:''; position: absolute; top: -1px; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    pointer-events: none;
}
.list .row .slug{ font-family: var(--font-mono); font-size: 15px; color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,.15); }
.list .row .slug .prefix{ color: var(--muted); }
.list .row .target{ color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .row .hits{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; text-align: right; }
.list .row .actions{ display: inline-flex; gap: 6px; }
.list .row .actions button{
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
    font-size: 10px; font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #d0d5df;
    transition: background .15s, color .15s, border-color .15s;
}
.list .row .actions button:hover{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.28); }
.list .row .actions .del{ color:#ff9d9d; border-color: rgba(255,110,110,.35); }
.list .row .actions .del:hover{ background: rgba(255,110,110,.15); color:#fff; }
.list .empty{ text-align: center; padding: 22px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }

/* ============================================================
 * milestone tiers
 * Applied to a hit or unique-visitor count once it crosses a
 * threshold. Thresholds: 1k white, 5k red, 10k purple, 50k animated.
 * The 50k tier has three treatments so the same number doesn't look
 * identical in three places: -a and -b on the dashboard (hits vs
 * uniques), and -elite on the landing page.
 * ============================================================ */
.num{ color: #fff; font-weight: 700; }
.tier{ font-weight: 700; transition: color .35s ease, text-shadow .35s ease; }

.tier-1k{
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255,255,255,.60), 0 0 15px rgba(255,255,255,.28);
}
.tier-5k{
    color: #ffdede;
    text-shadow: 0 0 6px rgba(255,92,92,.80), 0 0 17px rgba(255,54,54,.45), 0 0 34px rgba(255,40,40,.20);
}
.tier-10k{
    color: #ead9ff;
    text-shadow: 0 0 6px rgba(181,110,255,.85), 0 0 18px rgba(150,72,255,.55), 0 0 38px rgba(130,50,255,.25);
}

/* 50k, dashboard type A (total hits) - spectrum sweeping through the glyphs */
.tier-50k-a{
    background: linear-gradient(90deg,
        #ffffff 0%, #74d6ff 20%, #b58cff 40%, #ff8fd4 60%, #ffd98a 80%, #ffffff 100%);
    background-size: 170% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tierSweep 3.4s linear infinite;
    filter: drop-shadow(0 0 7px rgba(190,140,255,.55));
}
@keyframes tierSweep{ from{ background-position: 0 0; } to{ background-position: -220% 0; } }

/* 50k, dashboard type B (unique visitors) - vertical shimmer.
   Deliberately a different AXIS from type A's horizontal sweep, so the
   two sit side by side and read as two effects. The earlier version was
   a white halo pulse, which in any still frame was indistinguishable
   from the plain 1k white tier. */
.tier-50k-b{
    background: linear-gradient(180deg,
        #ffffff 0%, #6fd9ff 26%, #ffffff 50%, #bb8cff 74%, #ffffff 100%);
    background-size: 100% 240%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tierRise 2.8s linear infinite;
    filter: drop-shadow(0 0 8px rgba(130,215,255,.55))
            drop-shadow(0 0 20px rgba(185,140,255,.32));
}
@keyframes tierRise{ from{ background-position: 0 0; } to{ background-position: 0 -240%; } }

/* 50k, landing page - a single clean shine passing across, long pause
   between passes so a list of them never looks busy */
.tier-50k-elite{
    /* Shoulders are dimmed so the white core reads as a specular
       highlight travelling across the glyphs, rather than white-on-white
       which was invisible at list font sizes. */
    background: linear-gradient(100deg,
        #cfd8e6 0%, #cfd8e6 24%,
        #5cc4ff 36%, #ffffff 46%, #c79bff 56%, #cfd8e6 68%,
        #cfd8e6 100%);
    background-size: 190% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: eliteShine 5s cubic-bezier(.45,0,.2,1) infinite;
    /* two-stop glow so 50k unmistakably outranks the 10k purple */
    filter: drop-shadow(0 0 10px rgba(255,255,255,.70))
            drop-shadow(0 0 24px rgba(184,144,255,.38));
}
@keyframes eliteShine{
    0%      { background-position: 128% 0; }
    50%,100%{ background-position: -56% 0; }
}

@media (prefers-reduced-motion: reduce){
    .tier-50k-a, .tier-50k-b, .tier-50k-elite{
        animation: none !important;
        -webkit-text-fill-color: #fff; color: #fff;
        background: none;
        text-shadow: 0 0 8px rgba(255,255,255,.6);
    }
}

/* ============ dead Discord invite indicator ============
 * Deliberately quiet: a 6px dot for a healthy invite, and a small
 * amber pill only when something is actually broken and worth acting
 * on. A green "all good" badge on every row would be noise. */
.inv-dot{
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    margin-left: 9px;
    vertical-align: middle;
    background: rgba(125,255,92,.55);
    box-shadow: 0 0 6px rgba(125,255,92,.45);
    cursor: help;
}
.inv-dot.unknown{ background: rgba(255,255,255,.22); box-shadow: none; }
.inv-dead{
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 9px;
    padding: 2px 9px; border-radius: 999px;
    vertical-align: middle;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #ffcf8f;
    background: rgba(255,190,99,.10);
    border: 1px solid rgba(255,190,99,.42);
    cursor: help;
}
.inv-dead::before{
    content:''; width: 5px; height: 5px; border-radius: 50%;
    background: #ffbe63; box-shadow: 0 0 6px rgba(255,190,99,.8);
}

/* ============ form · glass card ============ */
.card{
    padding: 30px 32px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 55%, rgba(0,0,0,.08) 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 24px 46px rgba(0,0,0,.5);
    position: relative;
    overflow: hidden;
}
.card::before{
    content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    pointer-events:none;
}
.card + .card{ margin-top: 18px; }
.card .kicker{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.form{ display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.field input, .field select, .field textarea{
    padding: 12px 14px; border-radius: 12px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 15px;
    transition: border-color .15s, background .15s;
}
.field input:focus{ border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.5); }
.field .hint{ font-size: 11.5px; color: var(--muted-2); }
.form-error{ font-size: 13px; color: var(--err); background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.35); padding: 10px 14px; border-radius: 10px; }
.form-ok   { font-size: 13px; color: var(--ok);  background: rgba(80,220,120,.08); border: 1px solid rgba(80,220,120,.35); padding: 10px 14px; border-radius: 10px; }

/* ============ turnstile ============ */
.ts-box{ margin: 2px 0 2px; min-height: 66px; display: flex; align-items: center; }
.ts-box:empty{ min-height: 0; }
.ts-warn{
    font-size: 12.5px; line-height: 1.5;
    color: var(--warn);
    background: rgba(255,190,99,.06);
    border: 1px solid rgba(255,190,99,.35);
    padding: 10px 12px; border-radius: 10px;
    width: 100%;
}
/* Honeypot. Off-screen rather than display:none — headless browsers
   increasingly skip hidden inputs, but still fill positioned ones. */
.hp{
    position: absolute !important;
    left: -9999px !important; top: auto !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ============ button ============ */
.btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #eaf2ff 55%, #d5e4ff);
    color: #0a1220;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid #ffffff;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.18),
        0 8px 20px rgba(255,255,255,.35),
        0 0 30px rgba(255,255,255,.6),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .15s;
}
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{ background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: none; text-shadow: 0 0 10px rgba(255,255,255,.25); }
.btn.ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); }
.btn.danger{ background: rgba(255,110,110,.10); color:#ff9d9d; border:1px solid rgba(255,110,110,.4); box-shadow: none; }
.btn.danger:hover{ background: rgba(255,110,110,.20); color:#fff; }

/* ============ pill ============ */
.pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #d0d5df;
}
.pill.ok  { color:#7dff5c; border-color: rgba(125,255,92,.45); background: rgba(125,255,92,.08); }
.pill.err { color: var(--err); border-color: rgba(255,106,106,.5); background: rgba(255,106,106,.10); }

/* ============ auth (centered) ============ */
.auth-shell{ min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; position: relative; z-index: 10; }
.auth-shell > div{ width: 100%; max-width: 440px; }
.auth-shell .auth-title{ text-align: center; margin-bottom: 24px; }
.auth-shell .auth-title .brand{ font-family: var(--font-disp); font-size: 68px; text-transform: uppercase; color:#fff; text-shadow: 0 0 10px rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.3); }
.auth-shell .auth-title p{ color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; margin-top: 8px; }
.auth-shell .foot-links{ text-align: center; margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.auth-shell .foot-links a{ color: #fff; }

/* ============================================================
 * charts (per-slug stats page)
 * Categorical pair validated against the dark surface: lightness band,
 * chroma floor, CVD separation (protan/deutan/tritan), normal-vision
 * floor and contrast all pass. Blue+orange survives red-green colour
 * blindness; the blue/violet pair I tried first collapsed to dE 1.2
 * under deuteranopia, which is why these are the values here.
 * ============================================================ */
.viz-root{
    /* Validated against the dark surface: lightness band, chroma floor,
       CVD separation (protan/deutan/tritan), normal-vision floor and
       contrast all pass. Assigned in this fixed order, never cycled. */
    --series-1: #3987e5;   /* clicks / first slice  */
    --series-2: #e06a2e;   /* unique / second slice */
    --series-3: #1baf7a;   /* third slice           */
    --series-4: #c0559f;   /* fourth slice          */
}
.sw-1{ background: var(--series-1); }
.sw-2{ background: var(--series-2); }
.chart-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
.chart-legend .lg{
    display:inline-flex; align-items:center; gap:7px;
    font-family: var(--font-mono); font-size:10px; letter-spacing:.2em;
    text-transform:uppercase; color: var(--muted);   /* text token, never the series colour */
}
.chart-legend .lg i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.chart-legend .cx-s1f{ background: var(--series-1); }
.chart-legend .cx-s2f{ background: var(--series-2); }

.chart-wrap{ position: relative; width: 100%; }
.cx-svg{ width: 100%; height: auto; display: block; overflow: visible; }
.cx-grid{ stroke: rgba(255,255,255,.08); stroke-width: 1; }      /* recessive */
.cx-tick{ fill: var(--muted-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.cx-line{ fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-s1{ stroke: var(--series-1); }
.cx-s2{ stroke: var(--series-2); }
.cx-hair{ stroke: rgba(255,255,255,.30); stroke-width: 1; stroke-dasharray: 3 3; }
/* 2px surface ring so an overlapping dot still reads as two marks */
.cx-dot{ stroke: #0a0c12; stroke-width: 2; }
.cx-d1{ fill: var(--series-1); }
.cx-d2{ fill: var(--series-2); }
.cx-tip{
    position: absolute; top: 6px; pointer-events: none;
    padding: 8px 11px; border-radius: 10px;
    background: rgba(13,15,23,.97); border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
    font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: #eaf1ff;
    white-space: nowrap;
}
.cx-tip b{ display:block; color:#fff; margin-bottom:2px; }

/* horizontal bars — single series, so one recessive fill, no legend */
.bars{ display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.bar-row{ display: grid; grid-template-columns: minmax(0,1fr) 42% auto; align-items: center; gap: 12px; }
.bar-label{ font-family: var(--font-mono); font-size: 12px; color: #c4cad5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track{ height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.bar-fill{ height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.88)); border-radius: 999px; }
.bar-n{ font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); min-width: 44px; text-align: right; }

.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.two-col .card{ margin-top: 0; }
@media (max-width: 760px){ .two-col{ grid-template-columns: 1fr; } }

.dt{ width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.dt th{ text-align: left; color: var(--muted); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); }
.dt td{ padding: 6px 12px 6px 0; color: #d9dfe9; border-bottom: 1px solid rgba(255,255,255,.05); }

/* ============ transfer requests ============ */
.bell{ position: relative; }
.bell .badge{
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #ff6a6a; color: #12060a;
    font-family: var(--font-mono); font-size: 9px; font-weight: 800;
    display: grid; place-items: center; box-shadow: 0 0 10px rgba(255,106,106,.7);
}
.notif-panel{
    position: fixed; top: 84px; right: 24px; z-index: 120;
    width: min(400px, calc(100vw - 32px));
    padding: 18px 20px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(24,27,38,.98), rgba(12,14,22,.99));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 26px 60px rgba(0,0,0,.7);
    animation: splashIn .22s ease both;
}
.notif-panel h3{ font-family: var(--font-anton); font-size: 18px; text-transform: uppercase; letter-spacing:.03em; color:#fff; margin-bottom: 4px; }
.notif-item{ padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); }
.notif-item:first-of-type{ border-top: none; }
.notif-item .who{ font-size: 13px; color: var(--muted); line-height: 1.5; }
.notif-item .who b{ color: #fff; }
.code-chip{
    display: inline-block; margin-top: 10px; padding: 9px 16px;
    border-radius: 12px; background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.18);
    font-family: var(--font-mono); font-size: 22px; font-weight: 700;
    letter-spacing: .34em; color: #fff; text-indent: .34em;
}
.notif-empty{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); padding: 10px 0; }

/* cert badge on a dashboard row */
.cert-bad{
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 9px; padding: 2px 9px; border-radius: 999px; vertical-align: middle;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #ffcf8f; background: rgba(255,190,99,.10); border: 1px solid rgba(255,190,99,.42);
}

/* ============================================================
 * browse directory
 * ============================================================ */
.browse-hero{ text-align: center; padding: 26px 0 30px; }
.browse-hero h1{
    font-family: var(--font-anton);
    font-size: clamp(38px, 6vw, 62px);
    letter-spacing: .01em; text-transform: uppercase; color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,.3);
    line-height: 1;
}
.browse-hero p{ color: var(--muted); font-size: 15px; margin: 14px auto 20px; max-width: 620px; }
.browse-hero p .mono{ color: #fff; font-size: 12.5px; }

.browse-bar{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.browse-search{
    flex: 1; min-width: 240px;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 18px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 55%, rgba(0,0,0,.20));
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 34px rgba(0,0,0,.4);
    color: var(--muted-2);
    transition: border-color .2s, box-shadow .2s;
}
.browse-search:focus-within{ border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.45); }
.browse-search input{ flex: 1; font-size: 14.5px; color: #fff; }
.browse-search input::placeholder{ color: var(--muted-2); }

.tagrow{ display: flex; flex-wrap: wrap; gap: 8px; }
.tagchip{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: #c4cad5;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.tagchip span{ color: var(--muted-2); font-size: 9.5px; }
.tagchip:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: #fff; transform: translateY(-1px); }
.tagchip.on{ background: #fff; color: #0a1220; border-color: #fff; box-shadow: 0 0 16px rgba(255,255,255,.35); }
.tagchip.on span{ color: #55606f; }

.cardgrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 18px;
    margin-top: 6px;
}
.bcard{
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden;
    text-decoration: none; color: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 55%, rgba(0,0,0,.18) 100%);
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px rgba(0,0,0,.42);
    transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s;
}
.bcard:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 46px rgba(0,0,0,.55);
}
.c-art{ position: relative; height: 104px; flex-shrink: 0; }
.c-art::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(8,10,16,.75)); }
.c-clicks, .c-trend{
    position: absolute; top: 10px; z-index: 2;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(0,0,0,.66);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.c-clicks{ right: 10px; }
.c-trend{ left: 10px; color: #a4ff8f; border-color: rgba(125,255,92,.34); }

.c-body{ padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.c-head{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.c-logo{
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    object-fit: cover; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
}
.c-logo-ph{
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #aeb6c2;
}
.c-title{ font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-slug{ font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.c-desc{
    font-size: 12.5px; line-height: 1.5; color: #b0b7c3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-live{
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: #c4cad5;
}
.c-sep{ color: var(--muted-2); }
.dot-live{
    width: 7px; height: 7px; border-radius: 50%; background: #23a55a;
    box-shadow: 0 0 8px rgba(35,165,90,.85); flex-shrink: 0;
}
.c-foot{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.c-tags{ display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.c-tag{
    padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.c-owner{ font-size: 10px; letter-spacing: .1em; color: var(--muted-2); flex-shrink: 0; }

/* live preview inside the listing editor */
.pv-wrap{ max-width: 300px; margin: 4px auto 0; pointer-events: none; }
.pv-wrap .bcard{ transform: none !important; }

@media (max-width: 640px){
    .cardgrid{ grid-template-columns: 1fr; }
    .browse-bar{ flex-direction: column; align-items: stretch; }
}

/* ============================================================
 * link analytics page
 * ============================================================ */
.an-head{ display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.an-head h1{
    font-family: var(--font-anton); font-size: clamp(30px, 4vw, 44px);
    letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1;
    text-shadow: 0 0 18px rgba(255,255,255,.22);
}
.an-head p{ font-size: 12px; color: var(--muted); margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-actions{ margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tilerow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.tile{
    padding: 20px 22px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 55%, rgba(0,0,0,.18) 100%);
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(20px) saturate(155%); backdrop-filter: blur(20px) saturate(155%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px rgba(0,0,0,.4);
    position: relative; overflow: hidden;
}
.tile::before{
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
}
.t-k{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.t-v{
    font-family: var(--font-anton); font-size: clamp(34px, 4.4vw, 48px); line-height: 1.05;
    margin-top: 10px; letter-spacing: -.01em;
    background: linear-gradient(180deg, #ffffff, #c9cfda);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 3px 16px rgba(255,255,255,.18));
    font-variant-numeric: tabular-nums;
}
.t-s{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-top: 6px; }

.an-grid{ display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.an-grid .card{ margin-top: 0; }
.an-cardhead{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }

/* ---- bar chart ---- */
.barchart{ position: relative; height: 230px; padding: 4px 0 26px 44px; }
.bc-grid{
    position: absolute; left: 44px; right: 0; height: 1px;
    background: rgba(255,255,255,.08);
}
.bc-grid span{
    position: absolute; right: calc(100% + 9px); top: -7px;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2);
}
.bc-cols{ position: relative; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.bc-col{ flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: default; }
.bc-col::after{ content:''; position:absolute; inset: 0 -1px -22px; border-radius: 6px; }
.bc-col:hover::after{ background: rgba(255,255,255,.045); }
.bc-pair{ display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.bc-bar{
    flex: 1; min-width: 2px;
    /* 4px rounded data-end, square against the baseline */
    border-radius: 4px 4px 0 0;
    height: var(--h);
    transform-origin: bottom;
    animation: barGrow .62s cubic-bezier(.2,.75,.25,1) both;
    animation-delay: var(--d);
}
@keyframes barGrow{ from{ transform: scaleY(0); opacity: .35; } to{ transform: scaleY(1); opacity: 1; } }
.bc-x{
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); white-space: nowrap;
}
.bc-tip{
    position: absolute; top: 2px; z-index: 5; pointer-events: none;
    padding: 8px 11px; border-radius: 10px;
    background: rgba(13,15,23,.97); border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
    font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: #eaf1ff; white-space: nowrap;
}
.bc-tip b{ display:block; color:#fff; margin-bottom:2px; }
.barchart.no-anim .bc-bar{ animation: none; }

/* ---- donut ---- */
.donut-row{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut{ width: 152px; height: 152px; flex-shrink: 0; transform: rotate(-90deg); }
.dn-track{ fill: none; stroke: rgba(255,255,255,.06); stroke-width: 15; }
.dn-arc{
    fill: none; stroke-width: 15; stroke-linecap: butt;
    stroke-dasharray: var(--len) var(--gap);
    stroke-dashoffset: var(--off);
    animation: arcDraw .85s cubic-bezier(.25,.8,.3,1) both;
    animation-delay: var(--d);
}
/* spins up from nothing: the dash grows to length while the whole ring
   rotates into place, so it reads as one sweep rather than four pops */
@keyframes arcDraw{
    from{ stroke-dasharray: 0 var(--c); opacity: 0; }
    to  { stroke-dasharray: var(--len) var(--gap); opacity: 1; }
}
.donut.no-anim .dn-arc{ animation: none; }
.dn-total, .dn-cap{ transform: rotate(90deg); transform-origin: 70px 70px; text-anchor: middle; }
.dn-total{ fill: #fff; font-family: var(--font-anton); font-size: 21px; }
.dn-cap{ fill: var(--muted-2); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; }

.donut-legend{ flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
.dn-row{ display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.dn-row i{ width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dn-label{ flex: 1; color: #c4cad5; text-transform: capitalize; }
.dn-n{ font-family: var(--font-mono); font-size: 11.5px; color: #fff; }
.dn-pct{ font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); min-width: 32px; text-align: right; }

/* horizontal bars sweep in too, so the whole page settles as one move */
.bar-fill{ width: var(--w, 0); animation: barWipe .6s cubic-bezier(.2,.75,.25,1) both; animation-delay: var(--d, 0ms); }
@keyframes barWipe{ from{ width: 0; opacity: .4; } to{ width: var(--w); opacity: 1; } }

@media (prefers-reduced-motion: reduce){
    .bc-bar, .dn-arc, .bar-fill{ animation: none !important; }
}
@media (max-width: 900px){
    .an-grid{ grid-template-columns: 1fr; }
    .tilerow{ grid-template-columns: 1fr; }
}

/* ============ embed editor + Discord embed mock ============ */
.embed-editor{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 16px; }
.ee-fields .field{ margin-bottom: 4px; }
.ee-color{ display: flex; align-items: center; gap: 10px; }
.ee-color input[type="color"]{
    width: 46px; height: 38px; padding: 2px; border-radius: 10px; cursor: pointer;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
}
.ee-color input[type="text"], .ee-color #emHex{
    flex: 1; padding: 11px 13px; border-radius: 10px;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 13px;
}
.ee-note{ font-size: 11px; line-height: 1.5; color: var(--muted-2); margin-top: 12px; }

/* Approximates Discord's embed chrome closely enough to judge a colour
   and a line length against, without pretending to be a real client. */
.dc-msg{ background: #313338; border-radius: 10px; padding: 14px; }
.dc-embed{
    background: #2b2d31; border-left: 4px solid #ffffff;
    border-radius: 4px; padding: 12px 15px 13px; max-width: 420px;
}
.dc-site{ font-size: 11px; color: #b5bac1; margin-bottom: 6px; font-family: var(--font-sans); }
.dc-body{ display: flex; gap: 14px; align-items: flex-start; }
.dc-title{ font-size: 14.5px; font-weight: 600; color: #00a8fc; line-height: 1.3; word-break: break-word; }
.dc-desc{ font-size: 13px; color: #dbdee1; line-height: 1.45; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.dc-thumb{ width: 74px; height: 74px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

@media (max-width: 760px){ .embed-editor{ grid-template-columns: 1fr; } }

/* ============ Discord account link ============ */
.dc-link{
    display: flex; align-items: center; gap: 14px;
    padding: 13px 18px; margin-bottom: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.22) 100%);
    border: 1px solid rgba(255,255,255,.13);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 34px rgba(0,0,0,.4);
    position: relative; overflow: hidden;
}
.dc-link::before{
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
.dc-link.linked{ border-color: rgba(88,101,242,.34); }
.dc-av{
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    object-fit: cover; background: rgba(88,101,242,.16);
    border: 1px solid rgba(255,255,255,.14);
}
.dc-av-ph{ display: grid; place-items: center; color: #8d9aff; }
.dc-text{ flex: 1; min-width: 0; }
.dc-title{ display: flex; align-items: center; font-size: 14px; font-weight: 700; color: #fff; }
.dc-sub{ font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-btn{ flex-shrink: 0; padding: 9px 16px; font-size: 10px; }

/* "or" divider on the sign-in card */
.or-rule{ display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.or-rule::before, .or-rule::after{ content:''; flex:1; height:1px; background: rgba(255,255,255,.12); }
.or-rule span{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--muted-2);
}
.dc-oauth{
    display: flex; width: 100%; gap: 10px;
    background: linear-gradient(180deg, #5865f2, #4a56d6);
    color: #fff; border-color: #5865f2;
    box-shadow: 0 0 0 3px rgba(88,101,242,.16), 0 8px 22px rgba(88,101,242,.4),
                inset 0 1px 0 rgba(255,255,255,.28);
    text-shadow: none;
}
.dc-oauth:hover{ transform: translateY(-1px); }
.dc-hint{ font-size: 11px; color: var(--muted-2); text-align: center; margin-top: 10px; line-height: 1.5; }

@media (max-width: 560px){
    .dc-link{ flex-wrap: wrap; }
    .dc-btn{ width: 100%; justify-content: center; }
}

/* ============ footer ============ */
footer.foot{ position: relative; z-index: 10; padding: 30px 24px 60px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); }
footer.foot a{ color: var(--muted); text-decoration: none; }
footer.foot a:hover{ color: #fff; }
.mono{ font-family: var(--font-mono); }
.hidden{ display: none !important; }

/* ============ auth-gated pages: hide until check completes ============
 * body.gate-check keeps everything invisible until an inline script
 * decides where to send you. Prevents the flash-of-content the user
 * was seeing on dashboard/admin. */
body.gate-check{ visibility: hidden; }
body.gate-ready{ visibility: visible; }

/* ============ entrance animations ============
 * .rise fades in from below. Apply .d1..d6 for stagger. */
.rise{ opacity: 0; transform: translateY(14px); animation: rise .55s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }
.rise.d1{ animation-delay: .05s; }
.rise.d2{ animation-delay: .15s; }
.rise.d3{ animation-delay: .25s; }
.rise.d4{ animation-delay: .35s; }
.rise.d5{ animation-delay: .45s; }
.rise.d6{ animation-delay: .55s; }

/* soft float applied to the SIR.GG title.
   IMPORTANT: the h1 also carries .rise for the entrance stagger.
   Rule ordering: .hero h1 (0,1,1) beats .rise (0,1,0), so if we
   only put `animation: titleFloat` here it wipes out `animation: rise`
   and the title stays permanently at opacity:0. Same trap that
   bit vex.rip. Fix: composite both animations in one shorthand
   AND force opacity:1 so any leftover .rise start-state can't
   strand the title invisible. */
@keyframes titleFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.hero h1{
    opacity: 1;
    animation: titleFloat 6s ease-in-out infinite;
}
.hero h1.rise{
    opacity: 1 !important;
    transform: none !important;
    animation: titleFloat 6s ease-in-out infinite;
}

/* pill hover animation shared by nav-link + go button */
.tnav .nav-link, .btn, .searchbox .go{ transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.tnav .nav-link:active, .btn:active, .searchbox .go:active{ transform: translateY(0) scale(.98); }
.list .row{ transition: background .18s ease, transform .18s ease; border-radius: 10px; }
.list .row:hover{ background: rgba(255,255,255,.03); }

@media (prefers-reduced-motion: reduce){
    .rise, .hero h1{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============ responsive ============ */
@media (max-width: 640px){
    .tnav{ top: 12px; margin: 0 12px; padding: 8px 8px 8px 14px; }
    .tnav .brand{ font-size: 22px; }
    .hero h1{ font-size: 96px; }
    .card{ padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce){
    .o2, .o3, .o4, .shooter{ animation: none !important; }
    .shooter{ display: none; }
}

/* ============================================================
 * redirect splash · rendered by public/splash.js at /<slug>
 * (also /preview for the demo). Glass card, scanning bar,
 * destination readout, skip link in the corner.
 * ============================================================ */
.splash{
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px;
}
.splash-card{
    width: min(560px, 100%);
    padding: 32px 34px 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 55%, rgba(0,0,0,.35));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 26px;
    -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 30px 70px rgba(0,0,0,.6);
    text-align: center;
    position: relative; overflow: hidden;
    animation: splashIn .5s cubic-bezier(.2,.7,.2,1) both;
}
.splash-card::before{
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}
.splash-kicker{ font-size: 10px; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-bottom: 20px; }
.splash-slug{
    font-family: var(--font-disp);
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,255,255,.45), 0 0 30px rgba(255,255,255,.25);
    margin-bottom: 18px;
}
.splash-slug span{ color: #fff; }
.splash-arrow{
    display: inline-flex; gap: 6px; margin: 4px 0 14px;
}
.splash-arrow span{
    display:inline-block; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
    animation: arrowFlow 1.4s infinite;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.splash-arrow span:nth-child(2){ animation-delay: .18s; }
.splash-arrow span:nth-child(3){ animation-delay: .36s; }
@keyframes arrowFlow{ 0%{opacity:0; transform: rotate(-45deg) translate(-4px,-4px);} 40%{opacity:1;} 100%{opacity:0; transform: rotate(-45deg) translate(6px,6px);} }
.splash-dest{
    font-family: var(--font-mono);
    font-size: 14px;
    color: #eaf1ff;
    padding: 10px 14px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    margin: 4px auto 20px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.splash-bar{
    height: 3px; width: 100%;
    background: rgba(255,255,255,.08);
    border-radius: 999px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.splash-fill{
    height: 100%; width: 0%;
    background: linear-gradient(90deg, rgba(255,255,255,.6), #fff, rgba(255,255,255,.6));
    box-shadow: 0 0 12px rgba(255,255,255,.6);
    border-radius: 999px;
}
.splash-meta{
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.splash-meta .grow{ flex: 1; }
.splash-skip{
    position: absolute; bottom: 24px; right: 24px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff; text-decoration: none;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    transition: background .18s, border-color .18s;
}
.splash-skip:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
@keyframes splashIn{ from{ opacity:0; transform: translateY(12px) scale(.98);} to{ opacity:1; transform: none;} }

/* ============================================================
 * privacy toggle switch (dashboard + admin)
 * green when "on/public/allow", red when "off/private/deny".
 * ============================================================ */
.switch{ position: relative; display: inline-flex; align-items: center; gap: 10px; user-select: none; cursor: pointer; }
.switch input{ position: absolute; opacity: 0; pointer-events: none; }
.switch .track{
    width: 44px; height: 24px; border-radius: 999px;
    background: rgba(255,110,110,.30);
    border: 1px solid rgba(255,110,110,.5);
    position: relative; transition: background .18s, border-color .18s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    flex: 0 0 44px;
}
.switch .track::after{
    content:''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: transform .18s;
}
.switch input:checked + .track{
    background: rgba(125,255,92,.30);
    border-color: rgba(125,255,92,.5);
}
.switch input:checked + .track::after{ transform: translateX(20px); }
.switch .lbl{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.switch .state{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #ff9d9d; }
.switch input:checked ~ .state{ color: #a4ff8f; }

/* Tri-state selector (admin default / on / off) used for the
   per-slug show-animation control. Three tiny pills, one is-on. */
.tri{ display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.tri button{
    padding: 6px 12px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); background: transparent; border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.tri button:hover{ color: #fff; }
.tri button.on{ color: #0a1220; background: #fff; border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.5); }

/* .card clips to its rounded corners (overflow:hidden), which slices the
   top off any tooltip that opens upward out of it. Cards that actually
   contain a (?) opt out — scoped with :has() so every other card keeps
   its clipping. This, not the horizontal anchor, was why the tooltip
   looked cut off. */
.card:has(.q-tip){ overflow: visible; }

/* ---- (?) help marker + glass tooltip ----
   The panel borrows the same recipe as .card (gradient fill, hairline
   top highlight, blur, deep shadow) so it reads as part of the system
   instead of a browser-default box. It anchors its LEFT edge just left
   of the marker so it flows rightward and can't clip off the card. */
.q-tip{
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    margin-left: 9px;
    flex-shrink: 0;
    cursor: help;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 700; line-height: 1;
    letter-spacing: 0; text-transform: none;
    color: var(--muted);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.q-tip:hover, .q-tip:focus-visible, .q-tip:focus{
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 0 14px rgba(255,255,255,.16);
    transform: translateY(-1px);
    outline: none;
}

.q-tip .body{
    position: absolute;
    bottom: calc(100% + 12px);
    left: -12px; right: auto;
    z-index: 200;
    width: max-content; max-width: 290px;
    padding: 13px 15px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28,31,42,.97) 0%, rgba(13,15,23,.98) 100%);
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
            backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 18px 44px rgba(0,0,0,.60),
        0 2px 8px rgba(0,0,0,.40);
    font-family: var(--font-sans);
    font-size: 12.5px; font-weight: 400; line-height: 1.55;
    letter-spacing: .005em; text-transform: none;
    text-align: left; white-space: normal;
    color: #d9dfe9;
    pointer-events: none;
    /* opacity/visibility rather than display, so it can animate */
    opacity: 0; visibility: hidden;
    transform: translateY(5px) scale(.985);
    transform-origin: 26px 100%;
    transition: opacity .18s ease,
                transform .18s cubic-bezier(.2,.7,.2,1),
                visibility 0s linear .18s;
}
.q-tip:hover .body, .q-tip:focus-visible .body, .q-tip:focus .body{
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease,
                transform .18s cubic-bezier(.2,.7,.2,1),
                visibility 0s;
}
/* hairline top highlight, same as .card::before */
.q-tip .body::before{
    content:''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    pointer-events: none;
}
/* arrow as a rotated square, so it inherits the panel's border + fill */
.q-tip .body::after{
    content:''; position: absolute;
    top: 100%; left: 21px; margin-top: -5px;
    width: 10px; height: 10px;
    background: rgba(13,15,23,.98);
    border-right:  1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16);
    border-radius: 0 0 3px 0;
    transform: rotate(45deg);
}
/* Variant: flip to the right of the marker, for a (?) sitting near the
   right edge of its container. Add class q-tip-right. */
.q-tip-right .body{ left: auto; right: -12px; transform-origin: calc(100% - 26px) 100%; }
.q-tip-right .body::after{ left: auto; right: 21px; }
@media (prefers-reduced-motion: reduce){
    .q-tip, .q-tip .body{ transition: none !important; }
    .q-tip:hover{ transform: none; }
}

/* ============================================================
 * banner slots on the landing page
 * Two liquid-glass cards; if a slot is empty, an "advertise here"
 * CTA fills it and opens the contact modal.
 * ============================================================ */
.banners{
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin: 36px 0 8px;
}
.banner{
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%, rgba(0,0,0,.20));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 18px 36px rgba(0,0,0,.4);
    min-height: 110px;
    text-decoration: none; color: inherit;
    transition: transform .18s, border-color .18s;
    position: relative; overflow: hidden;
}
.banner:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.banner::before{
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.banner .b-body{ flex: 1; }
.banner .b-kicker{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .28em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.banner .b-title{ font-family: var(--font-anton); font-size: 22px; letter-spacing: .02em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.banner .b-sub{ font-size: 13px; color: var(--muted); }
.banner .b-cta{
    padding: 8px 14px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); color: #fff;
    white-space: nowrap;
}
.banner.empty{ cursor: pointer; }
.banner.empty .b-title{ color: #d5d5d5; }
.banner.empty .b-sub{ color: var(--muted-2); }
@media (max-width: 640px){
    .banners{ grid-template-columns: 1fr; }
}

/* ============================================================
 * modal (banner request, admin edit)
 * ============================================================ */
.modal-bg{
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.65);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: grid; place-items: center; padding: 24px;
    animation: fadeIn .18s ease both;
}
/* Width modifiers. The base rule sets `width`, so an inline max-width
   can never widen a modal past 520px - which silently squashed the
   embed editor's preview column to one word per line. */
.modal.mid { width: min(660px, 100%) !important; }
.modal.wide{ width: min(880px, 100%) !important; }
.modal{
    width: min(520px, 100%);
    padding: 30px 32px;
    background: linear-gradient(180deg, rgba(20,22,32,.98), rgba(10,12,20,.98));
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(0,0,0,.7);
    position: relative;
    animation: splashIn .22s ease both;
}
.modal h3{ font-family: var(--font-anton); font-size: 22px; letter-spacing: .03em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.modal .close{
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-family: var(--font-mono); cursor: pointer;
}
.modal .close:hover{ background: rgba(255,255,255,.15); }
.modal p{ font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 10px; }
.modal .mono-chunk{ font-family: var(--font-mono); background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); padding: 10px 12px; border-radius: 10px; color: #fff; font-size: 13px; margin: 8px 0; word-break: break-all; }
.modal .warn-chunk{ font-size: 12px; color: var(--warn); background: rgba(255,190,99,.06); border: 1px solid rgba(255,190,99,.35); padding: 10px 12px; border-radius: 10px; margin: 10px 0; }
.modal .actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* ============ top bar · compact state ============
   The pill has a fixed height. When it shrinks, its bottom margin
   grows by exactly the same amount over the same curve, so the page
   underneath never moves while the bar animates (no jump, no
   scroll-anchoring flicker). nav.js toggles .compact. */
.tnav{
    --nav-h: 56px;
    --nav-h-compact: 44px;
    --nav-ease: cubic-bezier(.2, .7, .2, 1);
    height: var(--nav-h);
    padding-top: 0; padding-bottom: 0;
    margin-bottom: 0;
    transition:
        height .4s var(--nav-ease),
        margin-bottom .4s var(--nav-ease),
        max-width .5s var(--nav-ease),
        top .4s var(--nav-ease),
        padding .4s var(--nav-ease),
        background .25s ease,
        box-shadow .25s ease;
}
.tnav .brand img{ transition: height .4s var(--nav-ease), transform .18s ease, filter .18s ease; }
.tnav.compact{
    height: var(--nav-h-compact);
    margin-bottom: calc(var(--nav-h) - var(--nav-h-compact));
    max-width: 900px;
    top: 10px;
    padding-left: 14px; padding-right: 8px;
}
.tnav.compact .brand img{ height: 26px; }
.tnav.compact .nav-link{ padding: 6px 12px; }
.tnav.no-anim, .tnav.no-anim *{ transition: none !important; }

@media (max-width: 640px){
    .tnav{ --nav-h: 52px; --nav-h-compact: 44px; }
    .tnav.compact{ top: 8px; padding-left: 12px; padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce){
    .tnav, .tnav .brand img{ transition: background .2s ease, box-shadow .2s ease; }
}


/* ============ watermark stamp (landing page) ============
   Sits outside the site's look on purpose: a tilted white paper seal in the
   corner that leads to /watermark/, the GFX signature page. */
.wm-stamp{
    position: fixed; z-index: 45;
    left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
    width: 92px; height: 92px; border-radius: 50%;
    display: grid; place-items: center;
    background: #f4f1ea; color: #111;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.08);
    rotate: -9deg;
    transition: rotate .35s cubic-bezier(.2,.7,.2,1), scale .35s cubic-bezier(.2,.7,.2,1);
    text-decoration: none;
}
.wm-stamp:hover{ rotate: 0deg; scale: 1.06; }
.wm-stamp:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
.wm-stamp svg{ width: 100%; height: 100%; overflow: visible; }
.wm-stamp text{ font-family: var(--font-mono); fill: currentColor; }
.wm-stamp textPath{ font-size: 8.6px; font-weight: 700; letter-spacing: .5px; }
.wm-stamp .wm-mid{ font-size: 10.5px; font-weight: 700; }
.wm-stamp .wm-ring{ transform-origin: 50px 50px; animation: wmSpin 22s linear infinite; }
@keyframes wmSpin{ to{ transform: rotate(360deg); } }
/* phones: a floating corner badge would sit on top of the feature list, so
   it becomes a sticker beside the wordmark instead and scrolls with the page */
@media (max-width: 640px){
    .wm-stamp{ position: absolute; width: 64px; height: 64px; left: auto; bottom: auto;
               right: 10px; top: calc(92px + env(safe-area-inset-top)); rotate: 12deg; }
}
@media (prefers-reduced-motion: reduce){ .wm-stamp .wm-ring{ animation: none; } .wm-stamp{ transition: none; } }