/* ==========================================================================
   TOKEN MARKETPLACE - DESIGN SYSTEM
   ==========================================================================
   Dark by default, with an explicit light theme.

   Theme resolution has three states, and all three are handled:
     - :root                              the complete DARK palette (the default)
     - :root[data-theme="light"]          an explicit light choice
     - @media (prefers-color-scheme:light) system light, unless dark was chosen

   Every colour is defined once on :root. Nothing gets its ONLY definition
   inside a media query, so a token can never resolve to nothing.
   ========================================================================== */

/* --- Tokens: dark (default) ----------------------------------------------
   The surface ladder is spaced on purpose.

   It used to step by 5-7 points of luminance: --surface against --bg was a
   1.10 contrast ratio, and --rule-soft against --surface was 1.11. A 1px
   border at 1.11 does not resolve at all on a dark screen, so every card, row,
   table and panel in the product read as the same flat rectangle. That, and
   not the choice of hue, is what "looks simple" actually was.

   Now: --surface vs --bg is 1.228 (dL* 10.0), --rule-soft vs --surface is
   1.487, --rule is 2.02, and --rule-strong is 3.21 - which clears WCAG 1.4.11
   for a border that carries meaning. --ink-3 now clears 4.5:1 on --surface.

   --surface-3 is FILL ONLY. --ink-3 on it is 3.01:1, so no text goes there.
   It is used by .step-bar and .swap-arrow; keep it that way.

   --accent and --violet must stay 6-DIGIT HEX. admin.js appends '22' to build
   a translucent chart fill, and that only yields a valid colour from 6 digits.
   ------------------------------------------------------------------------- */
:root {
    --bg:            #04070B;
    --bg-soft:       #0D141D;
    --surface:       #16202C;
    --surface-2:     #222F40;
    --surface-3:     #2E3E52;   /* fill only - no text on this */
    --glass:         rgb(255 255 255 / 0.05);
    --glass-strong:  rgb(255 255 255 / 0.09);
    --rule-soft:     #2E3D50;
    --rule:          #3E5168;
    --rule-strong:   #55708F;
    --scrim:         rgb(2 5 9 / 0.62);

    --ink:           #EAF1F8;
    --ink-2:         #A7B6C6;
    --ink-3:         #78889C;
    --ink-invert:    #04070B;
    --on-brand:      #FFFFFF;

    --accent:        #34D6E8;
    --accent-2:      #7BE9F6;
    --accent-3:      #12909F;
    --accent-vivid:  #3EE3F2;
    --accent-ink:    #04161B;
    --accent-wash:   rgb(52 214 232 / 0.16);
    --accent-line:   rgb(52 214 232 / 0.42);
    --accent-glow:   rgb(52 214 232 / 0.45);

    --violet:        #A98CFF;
    --violet-2:      #CDBCFF;
    --violet-wash:   rgb(169 140 255 / 0.16);
    --violet-line:   rgb(169 140 255 / 0.42);
    --violet-glow:   rgb(169 140 255 / 0.40);

    --ok:            #3FDD9A;
    --ok-wash:       rgb(63 221 154 / 0.16);
    --ok-line:       rgb(63 221 154 / 0.42);
    --warn:          #F0B440;
    --warn-wash:     rgb(240 180 64 / 0.16);
    --warn-line:     rgb(240 180 64 / 0.42);
    --crit:          #FF8E80;
    --crit-wash:     rgb(255 142 128 / 0.16);
    --crit-line:     rgb(255 142 128 / 0.42);
    --info:          #5FB6F5;
    --info-wash:     rgb(95 182 245 / 0.16);
    --info-line:     rgb(95 182 245 / 0.42);

    --shadow-sm:     0 1px 2px rgb(0 0 0 / 0.5);
    --shadow:        0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
    --shadow-lg:     0 28px 56px -14px rgb(0 0 0 / 0.72), 0 8px 20px -8px rgb(0 0 0 / 0.5);
    --shadow-glow:   0 18px 44px -18px var(--accent-glow);
    --ring:          0 0 0 3px var(--accent-wash), 0 0 0 1px var(--accent);

    --grad-hero:     radial-gradient(1100px 560px at 12% -12%, rgb(52 214 232 / 0.22), transparent 62%),
                     radial-gradient(880px 480px at 88% -4%, rgb(169 140 255 / 0.18), transparent 58%);
    --grad-accent:   linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
    --grad-line:     linear-gradient(90deg, transparent, var(--accent), transparent);
    --grad-edge:     linear-gradient(120deg, var(--accent) 0%, var(--violet) 45%, var(--accent-2) 100%);
    --grad-sheen:    linear-gradient(100deg, transparent 34%, rgb(255 255 255 / 0.08) 50%, transparent 66%);

    /* The select chevron is a data URI, so its colour cannot follow a palette
       change unless it is a token. It is one now, redefined per theme. */
    --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378889C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

    --f-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    --space: 4px;
    --gutter: clamp(16px, 4vw, 32px);
    --page-max: 1240px;
    --header-h: 68px;

    --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t:        200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-spring: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --lift:    -4px;
    --lift-sm: -2px;

    color-scheme: dark;
}

/* --- Tokens: light ------------------------------------------------------- */
:root[data-theme="light"] {
    --bg:            #E5E9F0;
    --bg-soft:       #F6F9FC;
    --surface:       #FFFFFF;
    --surface-2:     #EEF3F9;
    --surface-3:     #E0E8F2;
    --glass:         rgb(9 15 22 / 0.035);
    --glass-strong:  rgb(9 15 22 / 0.07);
    --rule-soft:     #D1DAE6;
    --rule:          #AEBDCE;
    --rule-strong:   #8296AE;
    --scrim:         rgb(14 22 33 / 0.42);

    --ink:           #0C1622;
    --ink-2:         #44566B;
    --ink-3:         #657890;
    --ink-invert:    #FFFFFF;
    --on-brand:      #FFFFFF;

    --accent:        #0A7F8F;
    --accent-2:      #086573;
    --accent-3:      #34D6E8;
    --accent-vivid:  #0A7F8F;
    --accent-ink:    #FFFFFF;
    --accent-wash:   rgb(10 127 143 / 0.11);
    --accent-line:   rgb(10 127 143 / 0.38);
    --accent-glow:   rgb(10 127 143 / 0.28);

    --violet:        #5B44C7;
    --violet-2:      #7C68DE;
    --violet-wash:   rgb(91 68 199 / 0.11);
    --violet-line:   rgb(91 68 199 / 0.38);
    --violet-glow:   rgb(91 68 199 / 0.26);

    --ok:            #12734B;
    --ok-wash:       rgb(18 115 75 / 0.12);
    --ok-line:       rgb(18 115 75 / 0.38);
    --warn:          #8A5A05;
    --warn-wash:     rgb(138 90 5 / 0.13);
    --warn-line:     rgb(138 90 5 / 0.38);
    --crit:          #B0322A;
    --crit-wash:     rgb(176 50 42 / 0.12);
    --crit-line:     rgb(176 50 42 / 0.38);
    --info:          #12609E;
    --info-wash:     rgb(18 96 158 / 0.12);
    --info-line:     rgb(18 96 158 / 0.38);

    --shadow-sm:     0 1px 2px rgb(16 24 32 / 0.07);
    --shadow:        0 6px 16px -4px rgb(16 24 32 / 0.13), 0 2px 6px rgb(16 24 32 / 0.07);
    --shadow-lg:     0 28px 56px -14px rgb(16 24 32 / 0.22), 0 8px 20px -8px rgb(16 24 32 / 0.12);
    --shadow-glow:   0 18px 44px -18px var(--accent-glow);
    --ring:          0 0 0 3px var(--accent-wash), 0 0 0 1px var(--accent);

    --grad-hero:     radial-gradient(1100px 560px at 12% -12%, rgb(10 127 143 / 0.13), transparent 62%),
                     radial-gradient(880px 480px at 88% -4%, rgb(91 68 199 / 0.10), transparent 58%);
    --grad-edge:     linear-gradient(120deg, var(--accent) 0%, var(--violet) 45%, var(--accent-3) 100%);
    --grad-sheen:    linear-gradient(100deg, transparent 34%, rgb(9 15 22 / 0.06) 50%, transparent 66%);

    --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23657890' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

    color-scheme: light;
}

/* System light, unless the visitor explicitly chose dark. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:            #E5E9F0;
        --bg-soft:       #F6F9FC;
        --surface:       #FFFFFF;
        --surface-2:     #EEF3F9;
        --surface-3:     #E0E8F2;
        --glass:         rgb(9 15 22 / 0.035);
        --glass-strong:  rgb(9 15 22 / 0.07);
        --rule-soft:     #D1DAE6;
        --rule:          #AEBDCE;
        --rule-strong:   #8296AE;
        --scrim:         rgb(14 22 33 / 0.42);

        --ink:           #0C1622;
        --ink-2:         #44566B;
        --ink-3:         #657890;
        --ink-invert:    #FFFFFF;
        --on-brand:      #FFFFFF;

        --accent:        #0A7F8F;
        --accent-2:      #086573;
        --accent-3:      #34D6E8;
        --accent-vivid:  #0A7F8F;
        --accent-ink:    #FFFFFF;
        --accent-wash:   rgb(10 127 143 / 0.11);
        --accent-line:   rgb(10 127 143 / 0.38);
        --accent-glow:   rgb(10 127 143 / 0.28);

        --violet:        #5B44C7;
        --violet-2:      #7C68DE;
        --violet-wash:   rgb(91 68 199 / 0.11);
        --violet-line:   rgb(91 68 199 / 0.38);
        --violet-glow:   rgb(91 68 199 / 0.26);

        --ok:            #12734B;
        --ok-wash:       rgb(18 115 75 / 0.12);
        --ok-line:       rgb(18 115 75 / 0.38);
        --warn:          #8A5A05;
        --warn-wash:     rgb(138 90 5 / 0.13);
        --warn-line:     rgb(138 90 5 / 0.38);
        --crit:          #B0322A;
        --crit-wash:     rgb(176 50 42 / 0.12);
        --crit-line:     rgb(176 50 42 / 0.38);
        --info:          #12609E;
        --info-wash:     rgb(18 96 158 / 0.12);
        --info-line:     rgb(18 96 158 / 0.38);

        --shadow-sm:     0 1px 2px rgb(16 24 32 / 0.07);
        --shadow:        0 6px 16px -4px rgb(16 24 32 / 0.13), 0 2px 6px rgb(16 24 32 / 0.07);
        --shadow-lg:     0 28px 56px -14px rgb(16 24 32 / 0.22), 0 8px 20px -8px rgb(16 24 32 / 0.12);
        --shadow-glow:   0 18px 44px -18px var(--accent-glow);
        --ring:          0 0 0 3px var(--accent-wash), 0 0 0 1px var(--accent);

        --grad-hero:     radial-gradient(1100px 560px at 12% -12%, rgb(10 127 143 / 0.13), transparent 62%),
                         radial-gradient(880px 480px at 88% -4%, rgb(91 68 199 / 0.10), transparent 58%);
        --grad-edge:     linear-gradient(120deg, var(--accent) 0%, var(--violet) 45%, var(--accent-3) 100%);
        --grad-sheen:    linear-gradient(100deg, transparent 34%, rgb(9 15 22 / 0.06) 50%, transparent 66%);

        --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23657890' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

        color-scheme: light;
    }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections must clear the sticky header. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* The single most effective guard against a stray wide element breaking
       the whole page layout on a phone. */
    overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-2); }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
h4 { font-size: 1.02rem; }

p { text-wrap: pretty; }

::selection { background: var(--accent-wash); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* --- Layout -------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap-narrow { max-width: 780px; }
.wrap-mid    { max-width: 1000px; }

.site-main { flex: 1 0 auto; }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section-tight { padding-block: clamp(32px, 5vw, 56px); }

/* grid-template-columns: minmax(0, 1fr) is load-bearing, not decoration.
   A grid track defaults to auto, which sizes to MAX-CONTENT and refuses to
   shrink below it - so on a phone a long word or a wide child pushed the
   track past its own container and the page scrolled sideways. minmax(0,
   1fr) lets the track shrink; the child then wraps instead of overflowing. */
.stack   { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stack-8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.stack-24{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.stack-32{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.row-tight { gap: 8px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.grid-sidebar { display: grid; gap: 32px; }
@media (min-width: 940px) {
    .grid-sidebar { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .grid-sidebar-left { grid-template-columns: 240px minmax(0, 1fr); }
}

.sticky-side { position: sticky; top: calc(var(--header-h) + 20px); }

/* --- Typography helpers -------------------------------------------------- */
.eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 64ch; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.8rem; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.nums { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

.gradient-text {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r);
    transition: top var(--t);
}
.skip-link:focus { top: 12px; color: var(--accent-ink); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r);
    font-size: 0.94rem;
    font-weight: 550;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t), border-color var(--t), transform var(--t-fast), box-shadow var(--t), color var(--t);
    text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 6px 20px -8px var(--accent-glow);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-2);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.14) inset, 0 10px 28px -8px var(--accent-glow);
}

.btn-ghost {
    background: var(--glass);
    color: var(--ink);
    border-color: var(--rule);
}
.btn-ghost:hover:not(:disabled) { background: var(--glass-strong); border-color: var(--accent); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: 12px; }
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--glass); }

.btn-danger { background: var(--crit-wash); color: var(--crit); border-color: transparent; }
.btn-danger:hover:not(:disabled) { background: var(--crit); color: var(--on-brand); }

.btn-sm { padding: 7px 13px; font-size: 0.84rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-icon {
    padding: 8px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    line-height: 0;
}
.btn-icon:hover { background: var(--glass-strong); color: var(--ink); }

/* --- Cards & panels ------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.card-glass {
    background: linear-gradient(180deg, var(--glass-strong), var(--glass));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
}

.card-hover { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.card-hover:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

.card-pad-lg { padding: clamp(20px, 4vw, 36px); }
.card-flush { padding: 0; overflow: hidden; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule-soft);
}
.panel-head h2, .panel-head h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

/* --- Chips & badges ------------------------------------------------------ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    line-height: 1.5;
}
.chip-ok    { background: var(--ok-wash);     color: var(--ok); }
.chip-warn  { background: var(--warn-wash);   color: var(--warn); }
.chip-crit  { background: var(--crit-wash);   color: var(--crit); }
.chip-info  { background: var(--info-wash);   color: var(--info); }
.chip-accent{ background: var(--accent-wash); color: var(--accent); }
.chip-muted { background: var(--glass-strong);color: var(--ink-3); }

.chip-dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* A pulsing dot for anything genuinely live. */
.chip-live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

/* --- Forms --------------------------------------------------------------- */
.field { display: grid; gap: 6px; }

.label {
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.label .req { color: var(--crit); }

.input, .select, .textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 0.95rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.input:disabled, .select:disabled, .textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.input-mono { font-family: var(--f-mono); font-size: 0.88rem; }

.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7885' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.input-invalid, .input.is-invalid { border-color: var(--crit); }
.input-valid, .input.is-valid { border-color: var(--ok); }

.field-error { font-size: 0.82rem; color: var(--crit); }
.field-hint  { font-size: 0.82rem; color: var(--ink-3); }

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
}
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r) 0 0 var(--r); }
.input-group .btn { border-radius: 0 var(--r) var(--r) 0; }

/* --- Tables -------------------------------------------------------------- */
/* Wide tables scroll inside their own container - the page body never does. */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.table th, .table td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
}

.table thead th {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--glass); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.table .tight { white-space: nowrap; }

/* --- Empty & loading states ---------------------------------------------- */
.empty {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    padding: clamp(40px, 8vw, 72px) 20px;
    color: var(--ink-2);
}
.empty-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: var(--r-lg);
    background: var(--glass-strong);
    color: var(--ink-3);
}
.empty h3 { color: var(--ink); }
.empty p { max-width: 46ch; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--r-sm);
    color: transparent;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 12px; margin-block: 6px; }
.skeleton-card { height: 200px; border-radius: var(--r-lg); }

.spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--glass-strong);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Inline notice -------------------------------------------------------
   A finding stated in one line. No fill, no heading, no icon - just a hairline
   rule and slightly dimmer text. Used where the information must reach the
   reader but must not take over the page. */
.notice-inline {
    border-left: 2px solid var(--rule);
    padding: 2px 0 2px 12px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.notice-inline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.notice-inline a:hover { color: var(--ink); }
.notice-inline-ok   { border-left-color: var(--ok); }
.notice-inline-warn { border-left-color: var(--warn); }
.notice-inline-crit { border-left-color: var(--crit); color: var(--ink); }

/* --- Alerts & notes ------------------------------------------------------ */
.note {
    border-left: 3px solid var(--accent);
    background: var(--surface);
    padding: 14px 18px;
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 0.92rem;
}
.note-ok   { border-left-color: var(--ok);   background: var(--ok-wash); }
.note-warn { border-left-color: var(--warn); background: var(--warn-wash); }
.note-crit { border-left-color: var(--crit); background: var(--crit-wash); }
.note-info { border-left-color: var(--info); background: var(--info-wash); }
.note .h {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 5px;
}

.flash-stack {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    right: 16px;
    z-index: 120;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
}

.flash {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    animation: flash-in var(--t-slow) both;
}
.flash-success { border-left: 3px solid var(--ok); }
.flash-error   { border-left: 3px solid var(--crit); }
.flash-warning { border-left: 3px solid var(--warn); }
.flash-info    { border-left: 3px solid var(--info); }
.flash button { color: var(--ink-3); margin-left: auto; line-height: 1; }

@keyframes flash-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

/* --- Message thread ------------------------------------------------------
   The support conversation, rendered identically for a customer reading
   their own ticket and for an operator answering it. Defined here for the
   same reason as the figure tiles above. The .message-internal variant is
   deliberately NOT here - see admin.css. */
.thread { display: grid; gap: 12px; }
.message {
    padding: 13px 16px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--rule-soft);
}
.message-staff { background: var(--accent-wash); border-color: transparent; }

.message-head {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.message-body { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }

/* --- Header -------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--rule-soft);
}

.site-header .wrap { display: flex; align-items: center; gap: 20px; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-weight: 650;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    flex: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--grad-accent);
    display: grid;
    place-items: center;
    color: var(--on-brand);
    font-size: 15px;
    flex: none;
    box-shadow: 0 4px 14px -4px var(--accent-glow);
}

.nav { display: none; gap: 4px; margin-left: auto; align-items: center; }
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
    padding: 8px 13px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--ink); background: var(--glass); }
.nav a.active { color: var(--accent); background: var(--accent-wash); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 900px) { .header-actions { margin-left: 0; } }

.nav-toggle { display: grid; place-items: center; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 99;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 12px var(--gutter) 20px;
    display: grid;
    gap: 2px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
    padding: 12px 14px;
    border-radius: var(--r);
    color: var(--ink);
    font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav a.active { background: var(--glass-strong); color: var(--accent); }
.mobile-nav hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 8px 0; }

.cart-count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 10px;
    font-weight: 650;
    display: grid;
    place-items: center;
    line-height: 1;
}
.has-badge { position: relative; }

/* --- Account side nav ----------------------------------------------------
   The storefront nav treatment, turned vertical. Derived from .mobile-nav a
   and .nav a.active above - NOT from the admin sidebar - so a customer
   moving from the shop to their account does not feel like they changed
   sites. The markup used to borrow .admin-nav-link, which was a lie in two
   directions: customer chrome claiming to be admin chrome, and a future
   restyle of the operator sidebar silently restyling the customer area. */
.account-nav { display: grid; gap: 2px; align-content: start; }

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--r);
    color: var(--ink-2);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    transition: color var(--t-fast), background var(--t-fast);
}
.account-nav-link:hover { background: var(--glass); color: var(--ink); }
.account-nav-link.active { background: var(--accent-wash); color: var(--accent); }
.account-nav-signout { color: var(--ink-3); }
.account-nav-signout:hover { color: var(--crit); background: var(--crit-wash); }

/* --- Ticker -------------------------------------------------------------- */
.ticker {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--rule-soft);
    overflow: hidden;
    font-family: var(--f-mono);
    font-size: 12px;
    padding-block: 7px;
}
.ticker-track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: ticker 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; gap: 7px; color: var(--ink-2); white-space: nowrap; }
.ticker-item b { color: var(--ink); font-weight: 550; }
.ticker-up   { color: var(--ok); }
.ticker-down { color: var(--crit); }

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(56px, 10vw, 112px);
    background: var(--grad-hero);
    overflow: hidden;
}

.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) {
    .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; }
}

.hero h1 { margin-bottom: 18px; }
.hero .lede { font-size: clamp(1rem, 1.6vw, 1.14rem); margin-bottom: 28px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 1px;
    margin-top: 40px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.hero-stat { background: var(--surface); padding: 15px 18px; }
.hero-stat dt {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.hero-stat dd {
    font-family: var(--f-mono);
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    /* A long value used to wrap to three lines here and drag every other
       cell tall with it, because grid rows stretch to their tallest item. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.hero-stat dd small {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--ink-3);
    margin-left: 4px;
}

/* Decorative background orbs. Purely atmospheric, hidden from AT. */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.orb-1 { width: 320px; height: 320px; background: var(--accent); top: -80px; right: -60px; animation: drift 22s ease-in-out infinite; }
.orb-2 { width: 260px; height: 260px; background: var(--violet); bottom: -60px; left: -40px; animation: drift 28s ease-in-out infinite reverse; }

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, -28px) scale(1.08); }
}

/* --- Figure tiles --------------------------------------------------------
   Shared by the admin panel and the customer account, so defined HERE, once.

   They used to live in admin.css, which layouts/account.php does not link -
   so the customer dashboard rendered .stat-label and .stat-value as bare
   inline spans and read "Points 0 Bronze tier" as running text. Nothing
   errored; it just looked broken. One definition, in the sheet every layout
   loads, is the only arrangement that cannot come apart again. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    padding: 15px 17px;
    display: grid;
    gap: 5px;
    align-content: start;
}
.stat-label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.stat-value {
    font-family: var(--f-mono);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.stat-note { font-size: 0.78rem; color: var(--ink-3); }
.stat-ok   .stat-value { color: var(--ok); }
.stat-warn .stat-value { color: var(--warn); }
.stat-crit .stat-value { color: var(--crit); }

/* --- Scroll reveal ------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Nothing may stay invisible if JS never runs. */
.no-js .reveal { opacity: 1; transform: none; }

/* --- Token cards --------------------------------------------------------- */
.token-card {
    display: grid;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    padding: 20px;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
    position: relative;
    overflow: hidden;
}
.token-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--grad-accent);
    opacity: 0;
    transition: opacity var(--t);
}
.token-card:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: var(--shadow-lg); }
.token-card:hover::before { opacity: 1; }

.token-head { display: flex; gap: 12px; align-items: center; }

.token-logo {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    font-family: var(--f-display);
    font-weight: 650;
    font-size: 0.94rem;
    color: var(--accent);
    flex: none;
    overflow: hidden;
    border: 1px solid var(--rule-soft);
}
.token-logo img { width: 100%; height: 100%; object-fit: cover; }

.token-name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.token-symbol { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3); }

.token-price {
    font-family: var(--f-mono);
    font-size: 1.32rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.token-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
}

/* --- Address / hash display ---------------------------------------------- */
.addr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 0.82rem;
    background: var(--surface-2);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    padding: 5px 9px;
    max-width: 100%;
}
.addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-block { display: flex; width: 100%; }

.copy-btn { color: var(--ink-3); line-height: 0; flex: none; transition: color var(--t-fast); }
.copy-btn:hover { color: var(--accent); }
.copy-btn.copied { color: var(--ok); }

/* --- Amount callout ------------------------------------------------------ */
/* The one number a customer must send EXACTLY. Deliberately the loudest
   element on the payment page. */
.amount-callout {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    padding: 26px 20px;
    border-radius: var(--r-lg);
    background: var(--accent-wash);
    border: 1px solid var(--accent);
}
.amount-value {
    font-family: var(--f-mono);
    font-size: clamp(1.9rem, 6vw, 2.9rem);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.05;
    word-break: break-all;
}
.amount-warning { font-size: 0.88rem; color: var(--ink-2); max-width: 42ch; }

/* --- Progress rail ------------------------------------------------------- */
.rail { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.rail li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}
.rail li:last-child { padding-bottom: 0; }
.rail li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px; top: 26px; bottom: 0;
    width: 1px;
    background: var(--rule);
}
.rail .dot {
    width: 33px; height: 24px;
    display: grid; place-items: center;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 650;
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--r-sm);
    z-index: 1;
}
.rail b { display: block; font-weight: 600; margin-bottom: 2px; }
.rail p { margin: 0; color: var(--ink-2); font-size: 0.9rem; }

/* Horizontal 4-step order progress. */
.steps { display: flex; gap: 4px; margin-block: 8px; }
.step { flex: 1; display: grid; gap: 7px; min-width: 0; }
.step-bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.step-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width var(--t-slow); }
.step.done .step-bar i { width: 100%; }
.step.active .step-bar i { width: 55%; animation: step-pulse 1.9s ease-in-out infinite; }
.step.failed .step-bar i { width: 100%; background: var(--crit); }
.step-label { font-size: 0.76rem; color: var(--ink-3); text-align: center; }
.step.done .step-label, .step.active .step-label { color: var(--ink); }
.step.failed .step-label { color: var(--crit); }

@keyframes step-pulse {
    0%, 100% { width: 45%; opacity: 0.85; }
    50%      { width: 72%; opacity: 1; }
}

/* --- Accordion ----------------------------------------------------------- */
.accordion { display: grid; gap: 8px; }
.acc-item {
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
}
.acc-item summary {
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 550;
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    transition: background var(--t-fast);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { background: var(--glass); }
.acc-item summary::after {
    content: "+";
    font-family: var(--f-mono);
    font-size: 1.1rem;
    color: var(--ink-3);
    transition: transform var(--t);
    flex: none;
}
.acc-item[open] summary::after { transform: rotate(45deg); }
.acc-body { padding: 0 18px 16px; color: var(--ink-2); font-size: 0.93rem; }

/* --- Quantity chooser ---------------------------------------------------- */
.qty-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qty-chip {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
    background: var(--glass);
    font-family: var(--f-mono);
    font-size: 0.8rem;
    color: var(--ink-2);
    transition: all var(--t-fast);
}
.qty-chip:hover { border-color: var(--accent); color: var(--accent); }
.qty-chip.active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

.qty-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    background: var(--surface-2);
    border-radius: var(--r);
    font-family: var(--f-mono);
}
.qty-total b { font-size: 1.4rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Field-hint tones, for inline validation feedback. */
.field-hint.is-ok  { color: var(--ok); }
.field-hint.is-bad { color: var(--crit); }

/* --- Tabular tables (volume bands, facts) --------------------------------- */
.table.tabular td, .table.tabular th { font-variant-numeric: tabular-nums; }
.table tr.is-active-tier td {
    background: var(--accent-wash);
    color: var(--ink);
    font-weight: 600;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination { display: flex; gap: 5px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 36px;
    height: 36px;
    padding-inline: 10px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    color: var(--ink-2);
    border: 1px solid transparent;
}
.pagination a:hover { background: var(--glass-strong); color: var(--ink); }
.pagination .current { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.pagination .gap { color: var(--ink-3); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    flex: none;
    border-top: 1px solid var(--rule-soft);
    background: var(--bg-soft);
    padding-block: 44px 28px;
    margin-top: 64px;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 12px; font-family: var(--f-mono); font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--ink-2); font-size: 0.9rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--ink-3);
}

/* --- Error page ---------------------------------------------------------- */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter); background: var(--bg); }
.error-shell { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 30rem; }
.error-code {
    font-family: var(--f-mono);
    font-size: clamp(4rem, 16vw, 7rem);
    font-weight: 700;
    line-height: 1;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.error-title { font-size: 1.5rem; }
.error-message { color: var(--ink-2); }
.error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.error-hint { font-size: 0.86rem; color: var(--ink-3); margin-top: 6px; }

/* --- Utilities ----------------------------------------------------------- */
.hr { border: 0; border-top: 1px solid var(--rule-soft); margin-block: 20px; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.flex-1 { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.full { width: 100%; }
.gap-6 { gap: 6px; }

/* --- Depth & motion ------------------------------------------------------
   Everything below is why the product stopped reading as one flat plane.

   The palette fixed the contrast; these fix the behaviour. Previously 95% of
   cards used the flat variant with NO hover state - .card-hover was opt-in and
   two views had opted in - and .btn had no hover transform at all. A surface
   that never responds to the pointer reads as a screenshot.

   Every lift is transform-only so it composites on the GPU, and every one is
   switched off under prefers-reduced-motion at the foot of this file. */

/* Cards lift by default now. .card-hover survives as an alias so the two views
   that opt in explicitly keep working. */
.card,
.card-hover {
    transition: transform var(--t-spring), border-color var(--t), box-shadow var(--t);
}

.card:hover,
.card-hover:hover {
    transform: translateY(var(--lift));
    border-color: var(--rule);
    box-shadow: var(--shadow-lg);
}

/* A card that contains a focused control must not bob while someone types. */
.card:focus-within {
    transform: none;
    border-color: var(--rule);
}

/* Panels that are pure layout should not lift - a whole page section rising
   under the pointer is noise, not feedback. */
.card-flush:hover,
.card-static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* --- Animated gradient edge ----------------------------------------------
   For the one or two surfaces per page that deserve emphasis: the buy panel,
   the amount to send. A 1px gradient ring that drifts, drawn with a masked
   pseudo-element so it sits OUTSIDE the padding box and cannot shift layout. */
.card-edge { position: relative; }

.card-edge::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-edge);
    background-size: 220% 220%;
    animation: edge-drift 9s ease-in-out infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.card-edge > * { position: relative; z-index: 1; }

@keyframes edge-drift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* --- Buttons -------------------------------------------------------------
   .btn:active { translateY(1px) } was the only transform on any button. */
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(var(--lift-sm));
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary {
    background: var(--grad-accent);
    color: var(--on-brand);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.16) inset, 0 8px 24px -10px var(--accent-glow);
}

.btn-primary:hover:not(:disabled) {
    background: var(--grad-accent);
    filter: saturate(1.15) brightness(1.06);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset, 0 14px 34px -10px var(--accent-glow);
}

.btn-ghost { border-color: var(--rule); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 8px 20px -12px var(--accent-glow); }

/* --- Chips get an edge ---------------------------------------------------
   Every tone was a 12% wash with no border, so a chip read as tinted text
   rather than a badge. */
.chip { border: 1px solid transparent; }
.chip-ok     { border-color: var(--ok-line); }
.chip-warn   { border-color: var(--warn-line); }
.chip-crit   { border-color: var(--crit-line); }
.chip-info   { border-color: var(--info-line); }
.chip-accent { border-color: var(--accent-line); }
.chip-muted  { border-color: var(--rule); }

/* --- Notes get one too ---------------------------------------------------- */
.note      { border: 1px solid var(--rule-soft); border-left-width: 3px; }
.note-ok   { border-color: var(--ok-line);     border-left-color: var(--ok); }
.note-warn { border-color: var(--warn-line);   border-left-color: var(--warn); }
.note-crit { border-color: var(--crit-line);   border-left-color: var(--crit); }
.note-info { border-color: var(--info-line);   border-left-color: var(--info); }

/* --- Tables --------------------------------------------------------------- */
.table tbody tr { transition: background var(--t-fast), box-shadow var(--t-fast); }

.table tbody tr:hover {
    background: var(--glass-strong);
    box-shadow: inset 3px 0 0 var(--accent);
}

.table thead th { background: var(--surface-2); border-bottom: 1px solid var(--rule); }

/* Rows arrive in sequence when the table is marked for it. The delay is
   inline (--i) from the template; without it every row shares delay 0, which
   is a correct fallback rather than a broken one. */
.table-stagger tbody tr {
    animation: row-in 300ms ease-out both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Figure tiles arrive in sequence too ---------------------------------- */
.stat-grid .stat {
    animation: tile-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
    transition: transform var(--t-spring), border-color var(--t), box-shadow var(--t);
}

.stat-grid .stat:hover {
    transform: translateY(var(--lift-sm));
    border-color: var(--rule);
    box-shadow: var(--shadow);
}

@keyframes tile-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- The amount callout breathes -----------------------------------------
   It is the single most important figure on the payment page. */
.amount-callout {
    border: 1px solid var(--accent-line);
    animation: glow-breathe 4.5s ease-in-out infinite;
}

@keyframes glow-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgb(0 0 0 / 0), 0 10px 30px -18px var(--accent-glow); }
    50%      { box-shadow: 0 0 0 4px var(--accent-wash), 0 16px 40px -16px var(--accent-glow); }
}

/* --- Accordion ------------------------------------------------------------ */
.acc-item[open] > *:not(summary) { animation: acc-in 260ms ease-out both; }

@keyframes acc-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* --- Inputs --------------------------------------------------------------- */
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.select { background-image: var(--select-caret); }

/* --- Token logos pick up the brand ---------------------------------------- */
.token-logo { border-color: var(--rule); }
.token-card:hover .token-logo { border-color: var(--accent-line); }

/* --- Motion preferences --------------------------------------------------
   Honour the setting properly: kill the decorative loops outright rather than
   speeding them up, and keep transitions instant so nothing appears to hang. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* The clamp above still lets a LOOP run once and park in its final
       keyframe, which is why anything `infinite` has to be named here. A
       one-shot is safe without naming, provided its 100% frame is the
       resting appearance - every one above is written that way. */
    .ticker-track, .orb, .chip-live::before,
    .skeleton, .spinner,
    .card-edge::before, .amount-callout { animation: none !important; }

    /* Park the gradient edge somewhere sensible rather than mid-drift. */
    .card-edge::before { background-position: 0 50%; }

    /* A hover lift is motion too. */
    .card:hover, .card-hover:hover, .btn:hover,
    .token-card:hover, .stat-grid .stat:hover { transform: none !important; }

    .reveal { opacity: 1; transform: none; }
    .orb { display: none; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .ticker, .flash-stack, .btn, .nav { display: none !important; }
    body { background: #fff; color: #000; }
    .card { border: 1px solid #ccc; box-shadow: none; }
}