/* ===========================================================================
   ui-5.css — the blood.bid visual system.

   Loaded last on every page except profiles, so it retunes the whole product
   on top of the legacy layer instead of forking it. Two jobs:

     1. Tokens. The Dracula-inspired palette is mapped onto the existing
        --background/--blood/... names, which means every component written
        against them re-skins at once. Nothing here is page-specific unless it
        has to be.
     2. Primitives. Buttons, surfaces, forms, chips, skeletons, toasts and
        the ambient background are defined once, here, for every page.

   The rule followed throughout: colour carries meaning, motion carries
   feedback, and neither is allowed to slow the page down. Only transform and
   opacity animate; every effect is opt-out under prefers-reduced-motion.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
    /* Dracula-inspired core, recast around blood.bid's crimson identity:
       deep charcoal-violet fields, acid accents, muted blue-gray text. */
    --bg-0: #07060c;
    --bg-1: #0d0b15;
    --bg-2: #151222;
    --surface: rgba(26, 22, 43, .58);
    --surface-2: rgba(33, 28, 54, .78);
    --ink: #f8f8f2;
    --ink-dim: #c9c4dc;
    --muted: #8d88a8;

    --crimson: #ff2d55;
    --crimson-deep: #a3123f;
    --purple: #bd93f9;
    --pink: #ff79c6;
    --cyan: #8be9fd;
    --green: #50fa7b;
    --yellow: #f1fa8c;
    --orange: #ffb86c;
    --red: #ff5555;

    --line: rgba(189, 147, 249, .16);
    --line-strong: rgba(189, 147, 249, .34);

    --grad-hot: linear-gradient(115deg, #ff2d55, #ff79c6);
    --grad-cool: linear-gradient(115deg, #8be9fd, #bd93f9);
    --grad-mix: linear-gradient(115deg, #bd93f9, #ff79c6 52%, #ffb86c);

    --glow-crimson: 0 0 42px -10px rgba(255, 45, 85, .55);
    --glow-purple: 0 0 42px -12px rgba(189, 147, 249, .55);
    --glow-cyan: 0 0 42px -14px rgba(139, 233, 253, .45);
    --shadow-card: 0 24px 60px -34px rgba(0, 0, 0, .9);
    --shadow-pop: 0 32px 90px -40px rgba(0, 0, 0, .95);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .15s;
    --t: .28s;
    --t-slow: .6s;

    --font-ui: "mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-display: "mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-mono: "mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --font-brand: "gothic", "UnifrakturCook", "Old English Text MT", serif;

    /* Spatial system. Four levels, one scale:
       page gutter (--gutter), section air (--s-9/10), component gap
       (--s-3/4), internal padding (--s-3/4). Nothing invents its own. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --gutter: 24px;
    --w-page: 76rem;
    --w-reading: 62rem;

    /* Stacking order. One ladder, no improvisation. */
    --z-base: 0;
    --z-rail: 30;
    --z-header: 60;
    --z-dropdown: 80;
    --z-tooltip: 200;
    --z-modal: 400;
    --z-toast: 500;
    --z-loader: 2147483000;

    /* Surface ladder: each step is one deliberate notch. */
    --surface-recessed: #08070e;
    --surface-base: #0d0b15;
    --surface-raised: #14111f;
    --surface-overlay: #171425;

    /* Legacy names, re-pointed. */
    --background: var(--bg-1);
    --background-deep: var(--bg-0);
    --foreground: var(--ink);
    --card: var(--bg-2);
    --muted-foreground: var(--muted);
    --border: var(--line);
    --border-blood: rgba(255, 45, 85, .32);
    --blood: var(--crimson-deep);
    --blood-bright: var(--crimson);
    --blood-dark: #4a0a20;
    --blood-glow: rgba(255, 45, 85, .28);
    --emerald: var(--green);
    --emerald-deep: #1d8a52;
    --emerald-line: rgba(80, 250, 123, .35);
    --emerald-soft: rgba(80, 250, 123, .14);
    --radius: var(--r-md);
}

/* ---------------------------------------------------------------------------
   2. Base field
   --------------------------------------------------------------------------- */
body {
    font-family: var(--font-ui);
    background-color: var(--bg-0);
    background-image:
        radial-gradient(1100px 520px at 12% -8%, rgba(189, 147, 249, .16), transparent 60%),
        radial-gradient(900px 480px at 96% 4%, rgba(255, 45, 85, .13), transparent 62%),
        radial-gradient(1000px 700px at 50% 118%, rgba(139, 233, 253, .09), transparent 64%);
    background-attachment: fixed;
    color: var(--ink);
    letter-spacing: .002em;
}

/* A whisper of texture: scanlines + grain, fixed, non-interactive. Keeps the
   flat fills from looking like a template. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
        radial-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: auto, 3px 3px;
    mix-blend-mode: screen;
    opacity: .5;
}

::selection {
    background: rgba(189, 147, 249, .35);
    color: var(--ink);
}

.main { position: relative; z-index: 1; }

.page {
    max-width: 72rem;
    padding: 0 1.5rem 6rem;
}

/* ---------------------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -.03em;
    line-height: 1.06;
    text-wrap: balance;
}

.display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: .98;
    text-wrap: balance;
}

/* The one place gradients are allowed to shout. */
.display em,
.gradient-text {
    font-style: normal;
    background: var(--grad-hot);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ui5-pan 9s var(--ease) infinite alternate;
}

@keyframes ui5-pan {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cyan);
}
.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
    opacity: .8;
}

.hero-sub {
    max-width: 44rem;
    margin-inline: auto;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
    text-wrap: pretty;
}

.muted-link {
    color: var(--purple);
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.muted-link:hover { border-color: currentColor; }

/* Technical labels and numerals share the mono face. */
.account-id,
.code-input,
.market-stat-val,
.listing-price,
.promo-price,
.credit-pack-price,
.ui-stat-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* The wordmark. Blackletter is blood.bid's own, not Dracula's. */
.brand-word {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: .01em;
    background: linear-gradient(100deg, var(--ink), var(--pink) 55%, var(--crimson));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glitch treatment, used sparingly: hero emphasis and the loader. */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    pointer-events: none;
}
.glitch:hover::before {
    opacity: .8;
    transform: translate(2px, -1px);
    filter: hue-rotate(35deg);
    animation: ui5-flicker 1.4s steps(2) infinite;
}
.glitch:hover::after {
    opacity: .6;
    transform: translate(-2px, 1px);
    filter: hue-rotate(-45deg);
    animation: ui5-flicker 1.1s steps(2) infinite reverse;
}
@keyframes ui5-flicker {
    0%, 100% { clip-path: inset(0 0 62% 0); }
    35% { clip-path: inset(38% 0 22% 0); }
    70% { clip-path: inset(72% 0 0 0); }
}

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */
.start-btn,
.pill-solid,
.pill-outline,
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-weight: 650;
    line-height: 1;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition:
        transform var(--t-fast) var(--ease),
        box-shadow var(--t) ease,
        border-color var(--t) ease,
        background-color var(--t) ease,
        color var(--t) ease,
        filter var(--t) ease;
}
.start-btn:active,
.pill-solid:active,
.pill-outline:active,
.btn:active { transform: scale(.975); }
.start-btn:focus-visible,
.pill-solid:focus-visible,
.pill-outline:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.start-btn:disabled,
.pill-solid:disabled,
.pill-outline:disabled,
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.start-btn {
    padding: .95rem 1.7rem;
    font-size: .92rem;
    color: #fff;
    background: var(--grad-hot);
    background-size: 180% 100%;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--glow-crimson), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.start-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 0 54px -10px rgba(255, 121, 198, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.pill-solid {
    padding: .62rem 1.15rem;
    font-size: .8rem;
    color: #fff;
    background: var(--grad-hot);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.pill-solid:hover { transform: translateY(-1px); box-shadow: var(--glow-crimson); }

.pill-outline {
    padding: .6rem 1.1rem;
    font-size: .8rem;
    color: var(--ink-dim);
    background: rgba(255, 255, 255, .028);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pill-outline:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: rgba(189, 147, 249, .1);
    transform: translateY(-1px);
}

.btn {
    padding: .7rem 1.15rem;
    font-size: .84rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* ---------------------------------------------------------------------------
   5. Surfaces
   --------------------------------------------------------------------------- */
.account-card,
.feature-card,
.listing-card,
.promo-card,
.user-card,
.credit-pack,
.plan-grid > *,
.market-stat,
.account-panel,
.bundle-bar,
.fans-panel,
.inbox-popup,
.auction-row {
    position: relative;
    background: linear-gradient(165deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%), var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    overflow: hidden;
}

/* A travelling highlight on card hover — CSS only, one pseudo-element. */
.feature-card,
.listing-card,
.user-card,
.promo-card,
.credit-pack,
.plan-grid > * {
    transition:
        transform var(--t) var(--ease),
        border-color var(--t) ease,
        box-shadow var(--t) ease;
}
.feature-card::after,
.listing-card::after,
.user-card::after,
.promo-card::after,
.credit-pack::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left var(--t-slow) var(--ease);
}
.feature-card:hover,
.listing-card:hover,
.user-card:hover,
.promo-card:hover,
.credit-pack:hover,
.plan-grid > *:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-pop), var(--glow-purple);
}
.feature-card:hover::after,
.listing-card:hover::after,
.user-card:hover::after,
.promo-card:hover::after,
.credit-pack:hover::after { left: 120%; }

.feature-card { padding: 1.5rem 1.5rem 1.6rem; }
.feature-card h3 {
    font-size: 1.12rem;
    margin-bottom: .55rem;
    background: var(--grad-cool);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.feature-card p { color: var(--muted); font-size: .92rem; line-height: 1.7; }

.account-card { padding: 1.6rem 1.7rem; }
.account-heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.02em;
}
.account-text, .account-empty { color: var(--muted); }
.account-empty { font-size: .92rem; line-height: 1.7; }
.account-empty-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font: inherit;
    font-size: .92rem;
    color: var(--ink);
    background: rgba(7, 6, 12, .66);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .8rem 1rem;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
input::placeholder, textarea::placeholder { color: rgba(141, 136, 168, .75); }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--purple);
    background: rgba(7, 6, 12, .85);
    box-shadow: 0 0 0 4px rgba(189, 147, 249, .16);
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: rgba(255, 85, 85, .6);
    box-shadow: 0 0 0 4px rgba(255, 85, 85, .12);
}
.field-label, .auth-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .45rem;
}

/* ---------------------------------------------------------------------------
   7. Chips, tags, state
   --------------------------------------------------------------------------- */
.badge,
.account-badge,
.promo-tag,
.your-tag,
.new-badge,
.mock-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.badge {
    color: #fff;
    background: var(--grad-mix);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--glow-purple);
}
.new-badge {
    color: var(--green);
    background: rgba(80, 250, 123, .1);
    border: 1px solid rgba(80, 250, 123, .35);
}
.your-tag, .promo-tag {
    color: var(--cyan);
    background: rgba(139, 233, 253, .1);
    border: 1px solid rgba(139, 233, 253, .32);
}

/* State language: colour plus a dot, never colour alone. */
.state-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.state-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}
.state-chip--available { color: var(--green); }
.state-chip--listed { color: var(--cyan); }
.state-chip--auction { color: var(--purple); }
.state-chip--ending { color: var(--orange); animation: ui5-pulse 1.6s ease-in-out infinite; }
.state-chip--sold { color: var(--muted); }
.state-chip--owned { color: var(--yellow); }
.state-chip--outbid { color: var(--red); }

@keyframes ui5-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ---------------------------------------------------------------------------
   8. Navigation
   --------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: .75rem;
    z-index: 60;
    width: calc(100% - 2rem);
    max-width: 74rem;
    margin: .75rem auto 0;
    padding: .5rem .65rem .5rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgba(11, 9, 19, .72);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .95);
    transition: border-color var(--t) ease, background var(--t) ease, box-shadow var(--t) ease;
}
.header.is-scrolled {
    border-color: var(--line-strong);
    background: rgba(11, 9, 19, .88);
    box-shadow: 0 22px 60px -28px rgba(0, 0, 0, .98), 0 0 0 1px rgba(189, 147, 249, .06);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-logo {
    height: 1.65rem;
    width: auto;
    filter: drop-shadow(0 0 14px rgba(255, 45, 85, .55));
    transition: transform var(--t) var(--ease-spring);
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.header-actions { gap: .35rem; }

/* Dark surface lock: themes must never repaint the chrome. */
.header {
    --foreground: var(--ink);
    --muted-foreground: var(--muted);
    --border-blood: rgba(255, 45, 85, .32);
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------------------- */
.footer {
    margin-top: 6rem;
    border-top: 1px solid var(--line);
    background: radial-gradient(900px 260px at 50% 100%, rgba(189, 147, 249, .1), transparent 66%);
}
.footer-col h3 {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .24em;
    color: var(--purple);
}
.footer-col a { transition: color var(--t-fast) ease, transform var(--t-fast) ease; }
.footer-col a:hover { color: var(--pink); }
.footer-underline {
    background: linear-gradient(90deg, transparent, rgba(189, 147, 249, .45), rgba(255, 45, 85, .45), transparent);
}

/* ---------------------------------------------------------------------------
   10. Marketplace
   --------------------------------------------------------------------------- */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.listing-card { padding: 0; }
.listing-body { padding: 1rem 1.1rem 1.15rem; }
.listing-name {
    font-family: var(--font-display);
    font-weight: 750;
    letter-spacing: -.02em;
}
.listing-price {
    font-size: .95rem;
    font-weight: 600;
    color: var(--green);
}
.listing-img { border-radius: var(--r-md); }
.listing-card.is-promoted,
.listing-card.listing-spotlight {
    border-color: rgba(255, 121, 198, .45);
    box-shadow: var(--shadow-card), var(--glow-crimson);
}
.listing-card.is-promoted::before,
.listing-card.listing-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-hot);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.market-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.market-stat { padding: 1.1rem 1.2rem; }
.market-stat-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}
.bundle-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 40;
    border-color: var(--line-strong);
    background: rgba(11, 9, 19, .86);
}

/* ---------------------------------------------------------------------------
   11. Vault / account
   --------------------------------------------------------------------------- */
.account-hero { padding-top: 3.5rem; }
.account-grid { display: grid; gap: 1rem; }
.account-name {
    font-family: var(--font-display);
    font-weight: 750;
    letter-spacing: -.02em;
}
.account-name-row { display: flex; align-items: center; gap: .6rem; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.account-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.account-badge {
    color: var(--ink-dim);
    background: rgba(189, 147, 249, .1);
    border: 1px solid var(--line);
}
.account-card--callout {
    border-color: rgba(241, 250, 140, .35);
    box-shadow: var(--shadow-card), 0 0 44px -16px rgba(241, 250, 140, .35);
}
.account-success { color: var(--green); }
.account-warn { color: var(--orange); }
.account-error, .auth-error, .account-error-banner {
    color: var(--red);
    border-color: rgba(255, 85, 85, .4);
}

/* ---------------------------------------------------------------------------
   12. Loading, empty, toasts
   --------------------------------------------------------------------------- */
.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .05);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(189, 147, 249, .16), transparent);
    animation: ui5-shimmer 1.5s var(--ease) infinite;
}
@keyframes ui5-shimmer { to { transform: translateX(100%); } }

.toast-stack {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-width: min(92vw, 360px);
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: rgba(13, 11, 21, .94);
    color: var(--ink);
    font-size: .84rem;
    line-height: 1.5;
    box-shadow: var(--shadow-pop);
    animation: ui5-toast-in .38s var(--ease-spring) both;
}
.toast::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 12px currentColor;
}
.toast--success { border-color: rgba(80, 250, 123, .4); }
.toast--success::before { background: var(--green); }
.toast--error { border-color: rgba(255, 85, 85, .45); }
.toast--error::before { background: var(--red); }
.toast--info::before { background: var(--cyan); }
.toast.is-leaving { animation: ui5-toast-out .3s ease both; }

@keyframes ui5-toast-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes ui5-toast-out {
    to { opacity: 0; transform: translateY(8px); }
}

/* ---------------------------------------------------------------------------
   13. Motion utilities
   --------------------------------------------------------------------------- */
.hover-lift { transition: transform var(--t) var(--ease); }
.hover-lift:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------------------
   14. Landing page
   --------------------------------------------------------------------------- */
.hero {
    text-align: center;
    padding-top: 4.5rem;
}
.hero .display {
    font-size: clamp(2.8rem, 7.2vw, 5.4rem);
    /* `margin-inline: auto` is load-bearing: the display block is capped at
       16ch, so without it the centred text sits inside a left-flush box and
       the whole headline drifts left of the paragraph below it. */
    margin: 1.1rem auto 0;
}
.hero .hero-sub { margin-top: 1.5rem; }
.address-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 2.3rem auto 0;
    width: auto;
    max-width: none;
}
.address-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: .92rem;
    padding: .9rem 1.2rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: rgba(7, 6, 12, .7);
    box-shadow: inset 0 0 40px -20px rgba(189, 147, 249, .6);
}
.address-type {
    display: inline-block;
    min-width: 0;
    max-width: 10ch;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
}
.address-prefix { color: var(--muted); }
.address-type { color: var(--cyan); }
.cursor {
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    background: var(--pink);
    animation: ui5-blink 1s steps(2) infinite;
}
@keyframes ui5-blink { 50% { opacity: 0; } }

.ui-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 3.4rem auto 0;
    max-width: 56rem;
}
.ui-stat {
    position: relative;
    padding: 1.2rem 1rem 1.15rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent), var(--surface);
    overflow: hidden;
}
.ui-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: var(--grad-cool);
    opacity: .7;
}
.ui-stat-val {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--ink);
}
.ui-stat-label {
    margin-top: .35rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.features-section { margin-top: 6rem; }
.features-head { text-align: center; margin-bottom: 2.4rem; }
.features-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-top: .8rem; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.bp-pitch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 4.5rem;
    padding: 2.4rem 2rem;
    text-align: center;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 121, 198, .35);
    background:
        radial-gradient(600px 200px at 50% 0%, rgba(189, 147, 249, .18), transparent 70%),
        var(--surface);
    box-shadow: var(--shadow-card), var(--glow-purple);
}
.bp-pitch-text { max-width: 40rem; color: var(--muted); line-height: 1.75; }
.bp-pitch-text strong { color: var(--pink); }
.bp-pitch-btn { margin-top: .3rem; }

.news-section { margin-top: 5rem; }
.updates-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.updates-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-top: .7rem; }
.music-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.6rem;
    align-items: center;
    padding: 1.8rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(150deg, rgba(139, 233, 253, .08), rgba(189, 147, 249, .1) 45%, transparent), var(--surface);
    box-shadow: var(--shadow-card);
}
.music-info { display: flex; align-items: center; gap: 1.1rem; }
.music-art {
    width: 84px;
    height: 84px;
    border-radius: var(--r-md);
    object-fit: cover;
    border: 1px solid var(--line-strong);
    box-shadow: var(--glow-purple);
}
.music-label {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cyan);
}
.music-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 750; margin-top: .3rem; }
.music-artist { color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.music-note { color: var(--muted); font-size: .92rem; line-height: 1.75; }
.music-note strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   14b. INTERACTION LANGUAGE — precision instruments

   Everything above is the visual shell; this is the control vocabulary.
   One geometry (8px), one border (1px hairline), one motion ramp
   (120/180/250ms), and a strict intensity ladder:

     L1 ordinary   recessed dark, hairline borders, muted text
     L2 interactive border + text illuminate on hover/focus
     L3 important  accent glow, gradient edge, travelling highlight
     L4 brand      gradient fill / display typography (lander, blood+ only)

   Only transform, opacity, border-color, background and box-shadow animate.
   --------------------------------------------------------------------------- */
:root {
    --r-btn: 8px;
    --t-1: 120ms;
    --t-2: 180ms;
    --t-3: 250ms;
    --t-page: 420ms;
    --field-bg: #08070e;
    --field-bg-focus: #0b0916;
}

/* ---- buttons: illuminated instruments ---- */
.start-btn,
.btn,
.pill-solid,
button[type="submit"] {
    border-radius: var(--r-btn);
}

.start-btn,
.btn {
    padding: .72rem 1.05rem;
    font-size: .84rem;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 46%),
        rgba(20, 17, 34, .72);
    border: 1px solid rgba(189, 147, 249, .32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 8px 22px -16px rgba(0, 0, 0, .9);
}
.start-btn:hover,
.btn:hover {
    color: var(--ink);
    border-color: var(--purple);
    background:
        linear-gradient(180deg, rgba(189, 147, 249, .12), rgba(189, 147, 249, 0) 60%),
        rgba(24, 20, 40, .82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 0 1px rgba(189, 147, 249, .12),
        0 12px 30px -18px rgba(0, 0, 0, .95),
        0 0 30px -12px rgba(189, 147, 249, .5);
    transform: translateY(-1px);
}
.start-btn:active,
.btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 18px -14px rgba(189, 147, 249, .6);
}
/* Brand-grade primary: gradient fill, reserved for Level 4 moments. */
.btn-accent {
    color: #fff;
    background: var(--grad-hot);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--glow-crimson);
}
.btn-accent:hover {
    background: var(--grad-hot);
    background-size: 180% 100%;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 46px -10px rgba(255, 121, 198, .6);
}
/* A travelling hairline around an important button, on hover only. */
.btn-edge { position: relative; isolation: isolate; }
.btn-edge::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--edge-angle, 0deg),
        transparent 0 70%, rgba(189, 147, 249, .1) 76%, var(--pink) 84%, var(--cyan) 88%, transparent 94%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    z-index: -1;
    transition: opacity var(--t-2) ease;
    animation: ui5-edge 3.2s linear infinite paused;
}
.btn-edge:hover::before { opacity: 1; animation-play-state: running; }
@property --edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ui5-edge { to { --edge-angle: 360deg; } }

/* Secondary: technical control. Recedes behind primary. */
.pill-outline {
    border-radius: var(--r-btn);
    padding: .62rem .95rem;
    font-size: .78rem;
    color: var(--ink-dim);
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--line);
}
.pill-outline:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: rgba(189, 147, 249, .08);
}
/* Destructive: dark until you reach for it. */
.btn-danger, .pill-danger {
    color: var(--ink-dim);
    border-color: rgba(255, 85, 85, .28);
    background: rgba(255, 85, 85, .05);
}
.btn-danger:hover, .pill-danger:hover {
    color: #fff;
    border-color: var(--red);
    background: rgba(255, 85, 85, .14);
    box-shadow: 0 0 26px -12px rgba(255, 85, 85, .7);
}

/* Icons inside buttons move with intent. */
.btn .btn-arrow, .start-btn .btn-arrow {
    display: inline-block;
    transition: transform var(--t-2) var(--ease-spring);
}
.start-btn:hover .btn-arrow, .btn:hover .btn-arrow { transform: translateX(3px); }

/* Loading state: label quiets, a hairline spinner takes over. */
.btn.is-loading, .start-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
.btn.is-loading::after, .start-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(189, 147, 249, .3);
    border-top-color: var(--purple);
    animation: ui5-spin .7s linear infinite;
}
@keyframes ui5-spin { to { transform: rotate(360deg); } }

/* ---- inputs: terminal fields ---- */
.main .field-label,
.main label.field-label {
    color: var(--muted);
    transition: color var(--t-1) ease, text-shadow var(--t-1) ease;
}
.field-wrap { position: relative; display: block; }
.field-wrap:focus-within > .field-label,
.field-wrap:focus-within > label {
    color: var(--purple);
    text-shadow: 0 0 18px rgba(189, 147, 249, .5);
}
.main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.main textarea,
.main select {
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    transition:
        border-color var(--t-1) ease,
        box-shadow var(--t-2) ease,
        background var(--t-2) ease;
}
.main input:focus,
.main textarea:focus,
.main select:focus {
    border-color: var(--purple);
    background: var(--field-bg-focus);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, .14), 0 0 34px -18px rgba(189, 147, 249, .8);
}
/* The focus sweep: a light that travels the top edge once. */
.field-sweep { position: relative; }
.field-sweep::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0;
    pointer-events: none;
}
.field-sweep:focus-within::after { opacity: .9; animation: ui5-sweep .9s var(--ease) both; }
@keyframes ui5-sweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(260%); }
}

/* ---- search: command surface ---- */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .7rem;
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    transition: border-color var(--t-1) ease, box-shadow var(--t-2) ease;
}
.search-field:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, .14);
}
.search-field svg { flex: none; opacity: .6; }
.search-field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .68rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.search-field .kbd {
    flex: none;
    font-family: var(--font-mono);
    font-size: .62rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
}
.search-field .search-count {
    flex: none;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--cyan);
}

/* ---- selects: dark floating menus (JS-enhanced) ---- */
.ui-select { position: relative; }
.ui-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}
.ui-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    padding: .68rem .8rem;
    font: inherit;
    font-size: .84rem;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-1) ease, box-shadow var(--t-2) ease;
}
.ui-select-btn:hover { border-color: var(--line-strong); }
.ui-select-btn .chev {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: .7;
    transition: transform var(--t-2) var(--ease);
}
.ui-select[data-open] .ui-select-btn { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(189, 147, 249, .14); }
.ui-select[data-open] .ui-select-btn .chev { transform: rotate(180deg); }
.ui-select-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: .3rem;
    background: rgba(13, 11, 21, .96);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform-origin: top;
    animation: ui5-menu .16s var(--ease) both;
}
@keyframes ui5-menu {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.ui-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    font-size: .84rem;
    color: var(--ink-dim);
    cursor: pointer;
}
.ui-select-option:hover, .ui-select-option[data-active] {
    background: rgba(189, 147, 249, .12);
    color: var(--ink);
}
.ui-select-option[aria-selected="true"] {
    background: rgba(189, 147, 249, .18);
    color: var(--ink);
}
.ui-select-option[aria-selected="true"]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 10px var(--purple);
}
.ui-select-option[data-disabled] { opacity: .4; pointer-events: none; }

/* ---- tabs: one sliding rail ---- */
.tabs {
    position: relative;
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    all: unset;
    box-sizing: border-box;
    padding: .6rem .9rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-1) ease;
}
.tab:hover { color: var(--ink-dim); }
.tab[aria-selected="true"] { color: var(--ink); }
.tabs-rail {
    position: absolute;
    bottom: -1px;
    height: 1px;
    background: var(--grad-hot);
    box-shadow: 0 0 14px rgba(255, 45, 85, .7);
    transition: transform var(--t-3) var(--ease), width var(--t-3) var(--ease);
    pointer-events: none;
}

/* ---- checkbox / radio / switch / range ---- */
.main input[type="checkbox"]:not(.bundle-pick input),
.main input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--field-bg);
    cursor: pointer;
    position: relative;
    transition: border-color var(--t-1) ease, background var(--t-1) ease, box-shadow var(--t-1) ease;
}
.main input[type="radio"] { border-radius: 50%; }
.main input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--t-2) var(--ease-spring);
}
.main input[type="radio"]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform var(--t-2) var(--ease-spring);
}
.main input[type="checkbox"]:checked,
.main input[type="radio"]:checked {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 16px -4px rgba(189, 147, 249, .8);
}
.main input[type="checkbox"]:checked::after,
.main input[type="radio"]:checked::after { transform: rotate(45deg) scale(1); }
.main input[type="radio"]:checked::after { transform: scale(1); }
.main input[type="checkbox"]:focus-visible,
.main input[type="radio"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Switch: compact track, luminous handle. */
.switch { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: #07060c;
    border: 1px solid var(--line);
    transition: border-color var(--t-1) ease, background var(--t-1) ease;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform var(--t-2) var(--ease-spring), background var(--t-1) ease;
}
.switch input:checked + .switch-track { border-color: rgba(189, 147, 249, .6); background: rgba(189, 147, 249, .12); }
.switch input:checked + .switch-track::after {
    transform: translateX(18px);
    background: var(--purple);
    box-shadow: 0 0 12px rgba(189, 147, 249, .9);
}
.switch input:focus-visible + .switch-track { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Range: measurement control. ui-5.js writes --fill. */
.main input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--purple) 0 var(--fill, 0%), rgba(255, 255, 255, .09) var(--fill, 0%) 100%);
    cursor: pointer;
}
.main input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--ink);
    border: 1px solid var(--purple);
    box-shadow: 0 0 10px -2px rgba(189, 147, 249, .8);
}
.main input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--ink);
    border: 1px solid var(--purple);
}

/* ---- tooltips ---- */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: .3rem .5rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--ink);
    background: rgba(10, 8, 17, .97);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-1) ease, transform var(--t-1) var(--ease);
    z-index: 200;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---- modal: focused system panel ---- */
.ui-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: rgba(4, 3, 8, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ui5-fade .18s ease both;
}
.ui-modal-panel {
    width: min(100%, 460px);
    background: linear-gradient(170deg, rgba(255, 255, 255, .04), transparent 40%), #0d0b15;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop), 0 0 80px -40px rgba(189, 147, 249, .5);
    animation: ui5-modal .22s var(--ease) both;
}
.ui-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
}
.ui-modal-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.01em;
}
.ui-modal-body { padding: 1.2rem; color: var(--ink-dim); font-size: .9rem; line-height: 1.65; }
.ui-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--line);
}
.ui-modal-close {
    all: unset;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--muted);
    transition: color var(--t-1) ease, background var(--t-1) ease;
}
.ui-modal-close:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
@keyframes ui5-fade { from { opacity: 0; } }
@keyframes ui5-modal {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ---- cards: four deliberate weights ---- */
.panel--recessed {
    background: rgba(6, 5, 11, .7);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.panel--line {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
}
.panel--accent {
    border-color: rgba(189, 147, 249, .45);
    box-shadow: var(--shadow-card), 0 0 60px -30px rgba(189, 147, 249, .8);
}

/* ---- page headers & structure ---- */
.page-head { padding: 2.2rem 0 1.4rem; text-align: left; }
.page-head .eyebrow { margin-bottom: .7rem; }
.page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.035em;
}
.page-head p {
    max-width: 46rem;
    margin-top: .6rem;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.7;
}
.page-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-top: .7rem;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.meta-row .sep { opacity: .4; }
.meta-row strong { color: var(--ink-dim); font-weight: 600; }
.rule { border: 0; height: 1px; background: var(--line); margin: 1.6rem 0; }
.rule--accent {
    background: linear-gradient(90deg, var(--purple), var(--pink) 40%, transparent);
    opacity: .55;
}

/* ---- empty / error / success panels ---- */
.panel-empty, .panel-error, .panel-success {
    padding: 1.5rem 1.6rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: rgba(8, 7, 14, .6);
}
.panel-empty h3, .panel-error h3, .panel-success h3 {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.panel-empty h3 { color: var(--muted); }
.panel-error { border-color: rgba(255, 85, 85, .35); }
.panel-error h3 { color: var(--red); }
.panel-success { border-color: rgba(80, 250, 123, .32); }
.panel-success h3 { color: var(--green); }
.panel-empty p, .panel-error p, .panel-success p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.7;
}

/* ---- listings: information-dense tiles ---- */
.listing-card { border-radius: var(--r-md); }
.listing-body { display: flex; flex-direction: column; gap: .3rem; }
.listing-name {
    font-size: 1.02rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.listing-price { display: flex; align-items: baseline; gap: .4rem; }
.listing-price span {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.listing-price strong { font-size: 1.05rem; color: var(--green); }
.listing-actions { padding: 0 1.1rem 1.1rem; }
.listing-card:hover .listing-price strong { text-shadow: 0 0 18px rgba(80, 250, 123, .5); }

/* ---- auction states ---- */
.auction-clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.auction-clock.is-ending { color: var(--orange); text-shadow: 0 0 18px rgba(255, 184, 108, .5); }
.auction-current.winning { color: var(--green); }
.auction-current.losing { color: var(--red); }

/* ---- market toolbar ---- */
.market-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) auto auto;
    gap: .6rem;
    align-items: center;
    margin: 1.4rem 0 1rem;
}
.market-toolbar .search-field { height: 42px; }
.market-toolbar .ui-select-btn { height: 42px; }
.market-toolbar .toolbar-count {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
@media (max-width: 720px) {
    .market-toolbar { grid-template-columns: 1fr; }
}
.listing-card.is-filtered { display: none; }

/* ---- contextual section nav (account / functional pages) ---- */
.section-nav {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(8, 7, 14, .6);
    margin: 1.2rem 0 1.6rem;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
    padding: .5rem .8rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: color var(--t-1) ease, background var(--t-1) ease;
}
.section-nav a:hover { color: var(--ink); background: rgba(189, 147, 249, .1); }
.section-nav a.is-active {
    color: var(--ink);
    background: rgba(189, 147, 249, .16);
    box-shadow: inset 0 -1px 0 var(--purple);
}

/* ---- micro-typography helpers ---- */
.tagline-mono {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- account / vault density ---- */
.auth-hero,
.account-hero { padding-top: 2.6rem; }
.account-hero .auth-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.account-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(8, 7, 14, .6);
    transition:
        border-color var(--t-1) ease,
        transform var(--t-2) var(--ease),
        box-shadow var(--t-2) ease;
}
.stat-tile:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--glow-purple);
}
.stat-num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
}
.stat-label {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}
.account-section { margin-top: 2.2rem; }
.account-section .account-heading { font-size: 1.05rem; }
.auction-form { display: flex; flex-direction: column; gap: .65rem; max-width: 36rem; }
.start-panel { margin-top: 1.4rem; }
@media (max-width: 720px) {
    .account-stats { grid-template-columns: 1fr; }
}

/* ===========================================================================
   14c. LAYOUT SHELL + TERMINAL LANGUAGE

   Two structural commitments:

   1. The page shell. body → .main → .page → footer, sized by flex so the
      footer rests on the viewport floor on short pages and follows content
      on long ones. No fixed heights, no positioning tricks.

   2. The terminal grammar. Monospace drives the interface; hierarchy comes
      from type scale, rules and spacing rather than boxes. Thin top rules,
      dotted key/value leaders, bordered tables, bracket buttons, status dots.
   =========================================================================== */

/* ---- 1. page shell ---- */
html { min-height: 100%; }
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body > .main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    /* Was `overflow: hidden`; that both clipped nothing useful and killed
       the sticky header. The document owns its own scrolling. */
    overflow: visible;
    min-height: 0;
}
body .main > .page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 var(--gutter) var(--s-8);
}
body .page > .footer { margin-top: auto; }
/* The footer owns the bottom edge: with one present, the page's own bottom
   padding would lift the footer off the viewport floor. */
body .page:has(> .footer) { padding-bottom: 0; }

/* ---- 2. terminal typography ---- */
body {
    font-family: var(--font-ui);
    font-size: .92rem;
    letter-spacing: -.005em;
}
.display,
.page-head h1,
.hero .display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.03em;
}
.hero-sub,
.page-head p,
.account-text,
.music-note {
    font-family: var(--font-ui);
    letter-spacing: -.005em;
}
/* Metadata is the terminal voice: tiny, tracked, uppercase. */
.eyebrow,
.meta-row,
.stat-label,
.ui-stat-label,
.market-stat span,
.account-eyebrow,
.field-label,
.tagline-mono,
.state-chip {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* ---- 3. unified page header ---- */
.hero:not(#home-hero),
.page-head,
.auth-hero,
.account-hero {
    text-align: left;
    padding: var(--s-7) 0 var(--s-4);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
}
.hero:not(#home-hero) .display,
.page-head h1,
.auth-title,
.account-hero .auth-title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.04;
}
.hero:not(#home-hero) .hero-sub,
.page-head p,
.auth-hero .hero-sub {
    margin: var(--s-3) 0 0;
    max-width: var(--w-reading);
    font-size: .9rem;
    line-height: 1.7;
    color: var(--muted);
}
/* The prompt line: the header's breadcrumb, e.g. MARKET / BROWSE. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: var(--s-2);
    color: var(--cyan);
}
.eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
}

/* ---- 4. section rhythm ---- */
.features-section,
.news-section,
.market-stats,
.market-grid,
.promo-carousel,
.start-panel,
.account-section,
.accont-section { margin-top: var(--s-8); }
.account-section + .account-section { margin-top: var(--s-6); }
.section-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple);
}
.section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.rule { margin: var(--s-6) 0; }

/* ---- 5. terminal primitives ---- */
.term-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-base);
    padding: var(--s-5) var(--s-5) var(--s-4);
}
.term-panel > .term-title {
    position: absolute;
    top: -11px;
    left: var(--s-4);
    padding: 1px 8px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--purple);
}
.term-kv {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .8rem;
}
.term-kv:last-child { border-bottom: 0; }
.term-kv > .k {
    color: var(--muted);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.term-kv > .leader {
    flex: 1;
    border-bottom: 1px dotted rgba(189, 147, 249, .25);
    transform: translateY(-4px);
}
.term-kv > .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.term-kv > .v.is-success { color: var(--green); }
.term-kv > .v.is-info { color: var(--cyan); }
.term-kv > .v.is-warn { color: var(--orange); }
.term-kv > .v.is-danger { color: var(--red); }

/* Bordered data table: the terminal's native shape. */
.term-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: .82rem;
}
.term-table th {
    padding: .55rem .7rem;
    text-align: left;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
}
.term-table td {
    padding: .7rem;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.term-table tbody tr { transition: background var(--t-1) ease; }
.term-table tbody tr:hover { background: rgba(189, 147, 249, .05); }
.term-table tbody tr:hover td { color: var(--ink); }
.term-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 6. buttons: terminal controls ---- */
.start-btn,
.btn,
.pill-solid,
.pill-outline {
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
}
.start-btn,
.btn { position: relative; padding: .66rem 1.15rem; }
/* The hover brackets: [ ACTION ], drawn without reflowing the label. */
.start-btn::before,
.btn::before {
    content: "[";
    position: absolute;
    left: .4rem;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity var(--t-1) ease, transform var(--t-2) var(--ease);
}
.start-btn::after,
.btn::after {
    content: "]";
    position: absolute;
    right: .4rem;
    opacity: 0;
    transform: translateX(3px);
    transition: opacity var(--t-1) ease, transform var(--t-2) var(--ease);
}
.start-btn:hover::before,
.start-btn:hover::after,
.btn:hover::before,
.btn:hover::after { opacity: .85; transform: none; }

/* ---- 7. inputs: prompt fields ---- */
.field-label { display: block; margin-bottom: var(--s-2); }
.main .field-label::before { content: "> "; color: var(--purple); opacity: .7; }
.field-error {
    margin-top: var(--s-2);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--red);
}
.field-help {
    margin-top: var(--s-2);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--muted);
}

/* ---- 8. status dots ---- */
.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    vertical-align: 1px;
}
.dot--green { color: var(--green); }
.dot--cyan { color: var(--cyan); }
.dot--purple { color: var(--purple); }
.dot--orange { color: var(--orange); }
.dot--red { color: var(--red); }
.dot--muted { color: var(--muted); }

/* ---- 8b. system header: terminal nav ---- */
.header-nav {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-wrap: wrap;
}
.nav-link {
    position: relative;
    padding: .42rem .58rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--t-1) ease, background var(--t-1) ease;
}
.nav-link:hover { color: var(--ink); background: rgba(189, 147, 249, .08); }
.nav-link.is-active {
    color: var(--ink);
    background: rgba(189, 147, 249, .14);
    box-shadow: inset 0 -1px 0 var(--purple);
}
.pill-solid {
    border-radius: var(--r-btn);
    font-size: .68rem;
    padding: .55rem .8rem;
}
.footer-logo {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    max-width: 1.35rem;
    max-height: 1.35rem;
}
@media (max-width: 720px) {
    .header-nav { order: 3; width: 100%; justify-content: flex-start; }
}

/* ---- 8c. blood+ strip: a system notice, not a pill ---- */
.bp-banner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    max-width: none;
    margin: var(--s-5) 0 0;
    padding: .6rem var(--s-4);
    border: 1px solid var(--line);
    border-left: 2px solid var(--pink);
    border-radius: var(--r-btn);
    background: rgba(189, 147, 249, .05);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--ink-dim);
}
.bp-banner-badge {
    flex: none;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 121, 198, .4);
    color: var(--pink);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bp-banner-text { color: var(--muted); min-width: 0; }
.bp-banner-text strong { color: var(--ink-dim); font-weight: 600; }
.bp-banner-cta { margin-left: auto; color: var(--pink); white-space: nowrap; }
@media (max-width: 720px) {
    .bp-banner { flex-wrap: wrap; }
    .bp-banner-cta { margin-left: 0; }
}

/* ---- 9. market: terminal table ---- */
.market-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) auto;
    gap: .6rem;
    align-items: center;
    margin: var(--s-5) 0 var(--s-4);
}
.term-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(8, 7, 14, .5);
}
/* The legacy listing card set rows to flex columns; a table row is a row. */
.market-table tr.listing-card {
    display: table-row;
    position: static;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    overflow: visible;
}
.market-table tr.listing-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
.market-table .listing-name {    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    text-transform: none;
}
.market-table .listing-sub {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--muted);
}
.market-table th.tt-pick,
.market-table td.tt-pick { width: 46px; padding-left: var(--s-4); }
.market-table .tt-badges { width: 150px; }
.market-table .tt-badges .badge-icon { width: 18px; height: 18px; }
.market-table .listing-price { white-space: nowrap; text-align: right; }
.market-table .listing-price strong { font-size: .95rem; color: var(--green); }
.market-table .listing-price span {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.market-table .tt-action { text-align: right; white-space: nowrap; }
.market-table .listing-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
}
.market-table .listing-actions .start-btn,
.market-table .listing-actions .pill-outline,
.market-table .listing-actions .pill-solid,
.market-table .listing-actions .watch-bell { padding: .42rem .7rem; font-size: .64rem; }
.market-table .listing-actions form { display: inline; }
.market-table .auction-result { display: inline-block; margin-left: .5rem; font-size: .68rem; }
.market-table .bundle-pick {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    top: auto;
    right: auto;
}
.market-table .bundle-pick .bundle-mark { width: 13px; height: 13px; }
.market-table tr.is-promoted td:first-child { box-shadow: inset 2px 0 0 var(--pink); }
.market-table tr.listing-spotlight td:first-child { box-shadow: inset 2px 0 0 var(--purple); }
.market-table tr.your-listing .listing-name { color: var(--yellow); }
.market-table tbody tr { transition: background var(--t-1) ease; }
.market-table tbody tr:hover { background: rgba(189, 147, 249, .05); }
.market-table tbody tr:hover .listing-name { color: var(--ink); }
.promo-tag,
.your-tag {
    display: inline-block;
    margin-left: .4rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .54rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.promo-tag { color: var(--pink); border: 1px solid rgba(255, 121, 198, .4); }
.your-tag { color: var(--yellow); border: 1px solid rgba(241, 250, 140, .35); }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 900px) {
    .market-table .tt-badges { display: none; }
    .market-table th.tt-badges { display: none; }
    .market-table .listing-sub { display: none; }
    .market-table .listing-actions .bio-link { display: none; }
}
@media (max-width: 720px) {
    .market-toolbar { grid-template-columns: 1fr; }
    .market-table th, .market-table td { padding: .6rem .5rem; }
    .market-table .tt-pick { width: 34px; padding-left: .6rem; }
}

/* ---- 10. stat strips (market + account) ---- */
.market-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(8, 7, 14, .5);
}
.market-stat {
    padding: var(--s-4) var(--s-5);
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.market-stat:last-child { border-right: 0; }
.market-stat span {
    display: block;
    margin-bottom: var(--s-1);
    color: var(--muted);
}
.market-stat strong {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}
@media (max-width: 720px) {
    .market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-stat { border-bottom: 1px solid var(--line); }
    .market-stat:nth-child(2n) { border-right: 0; }
}

/* ---- 11. footer: the final line ---- */
.footer {
    margin-top: auto;
    border-top: 1px solid var(--line);
    background: transparent;
    padding: 0;
    font-size: inherit;
    text-align: left;
    color: var(--muted);
}
.footer-inner {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: var(--s-6) var(--gutter) var(--s-7);
}
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.footer-logo {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 45, 85, .5));
}
.footer-brand .brand-word { font-size: 1rem; }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
}
.footer-links a {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--t-1) ease;
}
.footer-links a:hover { color: var(--pink); }
.footer-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.footer-tag { opacity: .7; }

/* ---- 12. responsive gutters ---- */
@media (max-width: 1100px) { :root { --gutter: 20px; } }
@media (max-width: 720px) {
    :root { --gutter: 16px; }
    body .main > .page { padding-bottom: var(--s-7); }
}

/* ---- 13. error / not-found headers sit on the same left boundary ---- */
.notfound-logo {
    width: 56px;
    height: 56px;
    margin: 0 0 var(--s-4);
    border-radius: 16px;
}

/* ---------------------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .features-grid { grid-template-columns: 1fr; }
    .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .music-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .header {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        border-width: 0 0 1px;
        padding: .55rem .8rem;
    }
    .hero { padding-top: 3rem; }
    .hero .display { font-size: clamp(2.3rem, 10vw, 3.2rem); }
    .address-row { flex-direction: column; }
    .address-pill { width: 100%; justify-content: center; }
    .ui-stats { grid-template-columns: 1fr 1fr; }
    .updates-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
    .ui-stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   16. Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .glitch::before,
    .glitch::after { display: none; }
    body::after { opacity: .35; }
}