/* ==========================================================================
   Bestclick.lol — site.css
   1.  Design tokens
   2.  Base & typography
   3.  Buttons
   4.  Header
   5.  Claim hero  (the whole product, above the fold)
   6.  Amount stepper & presets
   7.  Panels (trending / activity)
   8.  Leaderboard
   9.  Stats
   10. How it works / CTA / footer
   11. Modal, toast, success
   12. Skeletons, empty & error states
   13. Page-specific (detail, rules, about, promote)
   14. Utilities & motion
   ========================================================================== */

/* 1. Design tokens ========================================================= */
:root {
    /* Brand */
    --brand-primary: #ff5000;
    --brand-primary-hover: #e64600;
    --brand-primary-press: #cc3f00;
    /* Accessible orange for small text on light surfaces (5.1:1) */
    --brand-text: #c93a00;
    --brand-soft: #fff0e8;
    --brand-soft-2: #ffe2d3;
    --brand-line: #ffcdb4;
    --brand-dark: #1a1310;

    /* Warm neutrals */
    --text-primary: #1a1310;
    --text-secondary: #6b5b54;
    --text-muted: #9a8880;
    --border-color: #f2e6e0;
    --border-strong: #e4d3ca;
    --surface: #ffffff;
    --surface-sunken: #fbf5f2;
    --background: #fffcfa;

    /* Functional */
    --up: #0f7a4a;
    --up-soft: #e6f5ee;
    --down: #c0392b;
    --down-soft: #fdeceb;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(26, 19, 16, .05);
    --shadow-md: 0 8px 28px -16px rgba(26, 19, 16, .22);
    --shadow-pop: 0 22px 56px -28px rgba(26, 19, 16, .32);

    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Bootstrap overrides */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--background);
    --bs-border-color: var(--border-color);
    --bs-border-radius: var(--radius);
    --bs-link-color: var(--brand-text);
    --bs-link-hover-color: var(--brand-primary-press);
    --bs-focus-ring-color: rgba(255, 80, 0, .3);
}

/* 2. Base & typography ===================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display-face {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--text-primary);
}
p { color: var(--text-secondary); }
a { text-decoration: none; }

:focus-visible {
    outline: 3px solid rgba(255, 80, 0, .45);
    outline-offset: 2px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 2000;
    background: var(--brand-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* Numerals — ranks, money, counts. Always mono, always tabular. */
.num, .amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}
.amount { font-weight: 700; color: var(--text-primary); }

.eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }

.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: clamp(1.4rem, 3.2vw, 1.85rem); margin-bottom: 5px; }
.section-head p { margin-bottom: 0; font-size: .93rem; }

.hairline { border: 0; border-top: 1px solid var(--border-color); opacity: 1; margin: 0; }

/* 3. Buttons =============================================================== */
.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--radius-pill);
    transition: transform .12s var(--ease), background-color .15s var(--ease),
                box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-brand {
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(255, 80, 0, .85);
}
.btn-brand:disabled { background: var(--brand-soft-2); border-color: var(--brand-soft-2); color: var(--text-muted); }

.btn-ghost {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-weight: 600;
}
.btn-ghost:hover, .btn-ghost:focus {
    border-color: var(--brand-primary);
    color: var(--brand-text);
    background: var(--surface);
}

.btn-quiet {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
}
.btn-quiet:hover { color: var(--brand-text); background: var(--brand-soft); }

.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-xl { padding: 16px 34px; font-size: 1.06rem; }

/* 4. Header ================================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 252, 250, .88);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border-color); }
.site-header .navbar { padding: 0; }
.site-header .container { min-height: 64px; }

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.035em;
    color: var(--text-primary);
    padding: 0;
}
.navbar-brand:hover { color: var(--text-primary); }
/* The mark is an SVG that carries its own tile and radius. The background is
   kept only so the brand colour is there while the file loads. */
.brand-mark {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--brand-primary);
    display: block;
    flex: none;
}
.brand-tld { color: var(--brand-primary); }

.site-nav .nav-link {
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 8px 13px;
    border-radius: var(--radius-pill);
}
.site-nav .nav-link:hover { color: var(--text-primary); background: var(--surface-sunken); }
.site-nav .nav-link.active { color: var(--brand-text); font-weight: 600; }

.navbar-toggler {
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 6px 10px;
    color: var(--text-primary);
    line-height: 1;
}
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
    .site-nav { padding: 8px 0 14px; }
    .site-nav .nav-link { padding: 11px 13px; font-size: 1rem; }
    .header-cta { width: 100%; margin-top: 6px; }
}

/* 5. Claim hero ============================================================ */
.claim {
    padding: 40px 0 52px;
    text-align: center;
    background:
        radial-gradient(760px 340px at 50% -12%, rgba(255, 80, 0, .10), transparent 70%),
        var(--background);
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-size: .82rem;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    margin-bottom: 26px;
}
.live-pill b { color: var(--text-primary); font-weight: 600; }
.live-pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
    animation: pulse-dot 2.4s infinite;
}
.live-pill a { color: var(--brand-text); font-weight: 600; }
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
    50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

.claim-title {
    font-size: clamp(1.9rem, 6.4vw, 3.4rem);
    line-height: 1.08;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35em;
}
.claim-rank { color: var(--text-primary); }

/* The headline price is the control — ± flank it inline. */
.claim-price {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.claim-step {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand-text);
    display: grid; place-items: center;
    font-size: .85rem;
    flex: none;
    transition: background-color .15s var(--ease), transform .12s var(--ease), color .15s var(--ease);
}
.claim-step:hover:not(:disabled) { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.claim-step:active:not(:disabled) { transform: scale(.92); }
.claim-step:disabled { opacity: .45; cursor: not-allowed; }

.claim-amount {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.045em;
    color: var(--brand-primary);
    font-size: 1em;
}
.claim-amount .cur { font-size: .78em; margin-right: .02em; }
.claim-input-amount {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    width: 3.4ch;
    text-align: left;
    -moz-appearance: textfield;
    appearance: textfield;
}
.claim-input-amount:focus { outline: none; box-shadow: 0 3px 0 var(--brand-line); }
.claim-input-amount::-webkit-outer-spin-button,
.claim-input-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.claim-amount.bump { animation: bump .26s var(--ease); }
@keyframes bump {
    0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); }
}

.claim-sub {
    max-width: 54ch;
    margin: 0 auto 26px;
    font-size: .95rem;
    color: var(--text-secondary);
}
.claim-sub b { color: var(--brand-text); font-weight: 600; }

/* One field, one button. */
.claim-form {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 576px) {
    .claim-form { grid-template-columns: minmax(0, 1fr) auto; }
}
.claim-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0 20px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.claim-field:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(255, 80, 0, .14);
}
.claim-field.is-invalid { border-color: var(--down); box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.claim-field > i { color: var(--text-muted); font-size: 1.05rem; flex: none; }
.claim-field input {
    border: 0;
    background: transparent;
    padding: 17px 14px;
    font-size: 1.02rem;
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
}
.claim-field input:focus { outline: none; }
.claim-field input::placeholder { color: var(--text-muted); }

.claim-note {
    margin: 16px 0 0;
    font-size: .87rem;
    color: var(--text-muted);
}
.claim-note a, .claim-note button { color: var(--brand-text); font-weight: 600; }

.claim-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.preset {
    font-family: var(--font-mono);
    font-size: .84rem;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-secondary);
    transition: all .15s var(--ease);
}
.preset:hover { border-color: var(--brand-primary); color: var(--brand-text); }
.preset.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.preset.top-spot { font-family: var(--font-body); }

/* Inline result of the current amount */
.claim-result {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 9px 18px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-pill);
    font-size: .9rem;
    color: var(--brand-text);
    font-weight: 500;
}
.claim-result .num { font-weight: 700; }
.claim-result.tick { animation: tick .3s var(--ease); }
@keyframes tick {
    0% { opacity: .35; transform: translateY(3px); }
    100% { opacity: 1; transform: none; }
}

/* Found-product card under the field */
.found-card {
    max-width: 720px;
    margin: 18px auto 0;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: var(--shadow-sm);
}
.found-card .fc-name { font-weight: 600; font-size: .96rem; }
.found-card .fc-meta { font-size: .84rem; color: var(--text-secondary); }
.found-card .fc-right { margin-left: auto; text-align: right; flex: none; }

/* 6. Amount stepper (modal / promote page) ================================= */
.stepper {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 8px;
}
.stepper-btn {
    border: 1px solid var(--border-color);
    background: var(--surface);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1.05rem;
    display: grid; place-items: center;
    transition: all .15s var(--ease);
}
.stepper-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-text); }
.stepper-btn:active:not(:disabled) { transform: scale(.94); }
.stepper-btn:disabled { opacity: .4; cursor: not-allowed; }

.stepper-value {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.stepper-value .currency {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
}
.stepper-input {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.035em;
    border: 0;
    background: transparent;
    width: 4.4ch;
    padding: 10px 0;
    color: var(--text-primary);
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-value.bump { animation: bump .26s var(--ease); }

.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.field-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 7px;
}
.field-hint { font-size: .8rem; color: var(--text-muted); margin-top: 8px; }

.form-control, .form-select {
    border-radius: 12px;
    border-color: var(--border-strong);
    padding: 11px 14px;
    font-size: .95rem;
    background: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(255, 80, 0, .13);
}
.form-control::placeholder { color: var(--text-muted); }
.input-group-text {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-secondary);
    border-radius: 12px 0 0 12px;
}

/* 7. Panels (trending / activity) ========================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 8px 8px 6px;
    height: 100%;
    box-shadow: var(--shadow-sm);
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px 12px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-primary);
}
.panel-head i { color: var(--brand-primary); }
.panel-head .panel-link { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--brand-text); }

.panel-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: .9rem;
    transition: background-color .15s var(--ease);
}
.panel-row + .panel-row { border-top: 1px solid var(--border-color); border-radius: 0; }
.panel-row:hover { background: var(--surface-sunken); }
.panel-name { font-weight: 500; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-name:hover { color: var(--brand-text); }
.panel-meta { margin-left: auto; flex: none; font-size: .82rem; color: var(--text-muted); }
.panel-row.is-new { animation: slide-in .5s var(--ease); }
@keyframes slide-in {
    0% { opacity: 0; transform: translateY(-6px); background: var(--brand-soft); }
    100% { opacity: 1; transform: none; }
}

.activity-icon {
    width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: .82rem;
    flex: none;
}
.activity-icon.promote { background: var(--brand-soft); color: var(--brand-text); }
.activity-icon.climb { background: var(--up-soft); color: var(--up); }
.activity-icon.join { background: var(--surface-sunken); color: var(--text-secondary); }
.activity-text { min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-text strong { color: var(--text-primary); font-weight: 600; }

/* Logo tiles — generated, so the prototype ships no binary assets */
.logo-tile {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    flex: none;
    letter-spacing: -.02em;
}
.logo-tile-sm { width: 28px; height: 28px; border-radius: 9px; font-size: .68rem; }
.logo-tile-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 1.45rem; }
.logo-tile-xl { width: 82px; height: 82px; border-radius: 26px; font-size: 1.95rem; }

/* 8. Leaderboard =========================================================== */
.board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.board-search { position: relative; flex: 1 1 240px; min-width: 0; }
.board-search i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.board-search .form-control { padding-left: 42px; border-radius: var(--radius-pill); padding-block: 12px; }

.filter-chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
    white-space: nowrap;
    font-size: .83rem;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-secondary);
    transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.active { background: var(--text-primary); border-color: var(--text-primary); color: #fff; }

.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* Each row is a card, not a table line. */
.board-row {
    display: grid;
    grid-template-columns: 46px 44px minmax(0, 1fr) auto;
    grid-template-areas:
        "rank logo main   amount"
        "meta meta meta   meta"
        "act  act  act    act";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color .18s var(--ease), transform .45s var(--ease), box-shadow .18s var(--ease);
}
.board-row:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); }

/* Top three carry the brand tint; #1 carries it hardest. */
.board-row[data-rank="1"] { background: var(--brand-soft); border-color: var(--brand-line); }
.board-row[data-rank="2"], .board-row[data-rank="3"] { background: #fffaf7; }

.board-rank { grid-area: rank; }
.board-rank .r {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 34px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text-secondary);
}
.board-row[data-rank="1"] .r,
.board-row[data-rank="2"] .r,
.board-row[data-rank="3"] .r {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.board-row[data-rank="2"] .r { background: #ff7433; border-color: #ff7433; }
.board-row[data-rank="3"] .r { background: #ffa06b; border-color: #ffa06b; }

.board-logo { grid-area: logo; }
.board-main { grid-area: main; min-width: 0; }
.board-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    letter-spacing: -.02em;
}
.board-name:hover { color: var(--brand-text); }
.board-desc {
    font-size: .88rem;
    color: var(--text-secondary);
    margin: 3px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.board-meta { grid-area: meta; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.board-amount { grid-area: amount; text-align: right; }
.board-amount .amount { font-size: 1.15rem; color: var(--brand-text); }
.board-row[data-rank="1"] .board-amount .amount { color: var(--brand-primary); }
.board-action { grid-area: act; }
.board-action .btn { width: 100%; }

.metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--text-secondary);
}
.metric i { color: var(--text-muted); font-size: .85rem; }
.metric .num { font-weight: 600; color: var(--text-primary); font-size: .82rem; }
.metric.hot i { color: var(--brand-primary); }

/* Gap-to-#1 ladder */
.ladder { display: none; grid-area: ladder; }
.ladder-track { height: 5px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.board-row[data-rank="1"] .ladder-track { background: #ffd9c4; }
.ladder-fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    transition: width .6s var(--ease);
}
.ladder-caption { font-size: .72rem; color: var(--text-muted); margin-top: 6px; display: block; }

.delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 7px;
}
.delta.up { background: var(--up-soft); color: var(--up); }
.delta.down { background: var(--down-soft); color: var(--down); }
.delta.new { background: var(--brand-soft-2); color: var(--brand-text); }
.delta.pop { animation: pop-in .45s var(--ease); }
@keyframes pop-in {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.board-row.moving { position: relative; z-index: 2; box-shadow: var(--shadow-pop); }
.board-row.highlight { animation: row-highlight 1.8s var(--ease); }
@keyframes row-highlight {
    0% { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(255, 80, 0, .16); }
    100% { border-color: var(--border-color); box-shadow: none; }
}

.board-foot {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .85rem;
    color: var(--text-muted);
}

@media (min-width: 576px) {
    .board-row {
        grid-template-columns: 50px 44px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "rank logo main main   amount"
            "rank logo meta action action";
        column-gap: 14px;
    }
    .board-action { justify-self: end; }
    .board-action .btn { width: auto; }
}
@media (min-width: 992px) {
    .board-row {
        grid-template-columns: 54px 44px minmax(0, 1fr) 150px 104px 112px;
        grid-template-areas:
            "rank logo main ladder amount action"
            "rank logo meta ladder amount action";
        padding: 18px 20px;
        row-gap: 6px;
    }
    .board-meta { justify-content: flex-start; }
    .ladder { display: block; align-self: center; }
    .board-amount { align-self: center; }
    .board-action { align-self: center; justify-self: end; }
}

/* 9. Stats ================================================================= */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}
.stat { padding: 18px 20px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat-icon {
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--brand-soft);
    display: grid; place-items: center;
    color: var(--brand-text);
    font-size: .82rem;
    margin-bottom: 10px;
}
.stat-value { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 5px; }
.stat-label { font-size: .8rem; color: var(--text-secondary); }
@media (min-width: 768px) {
    .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat { border-bottom: 0; }
    .stat:nth-child(2n) { border-right: 1px solid var(--border-color); }
    .stat:last-child { border-right: 0; }
}

/* 10. How it works / CTA / footer =========================================== */
.step {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 22px;
    height: 100%;
}
.step-num {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-text);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .9rem; margin-bottom: 0; }

/* --- Homepage FAQ ----------------------------------------------------------- */
.faq { display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
.faq details {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 18px;
}
.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0;
    font-weight: 600; font-size: .93rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--text-muted); transition: transform .15s var(--ease); flex-shrink: 0; }
.faq details[open] summary i { transform: rotate(180deg); }
.faq details p { font-size: .87rem; color: var(--text-secondary); margin: -4px 0 16px; }

.cta-band {
    background: var(--brand-dark);
    border-radius: var(--radius-lg);
    padding: 46px 26px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-band::after {
    content: "";
    position: absolute; inset: auto -10% -70% -10%;
    height: 240px;
    background: radial-gradient(closest-side, rgba(255, 80, 0, .55), transparent);
    pointer-events: none;
}
.cta-band h2 { color: #fff; font-size: clamp(1.45rem, 4vw, 2.1rem); margin-bottom: 10px; position: relative; }
.cta-band p { color: rgba(255, 255, 255, .72); max-width: 46ch; margin: 0 auto 24px; position: relative; }
.cta-band .btn { position: relative; }

.site-footer {
    border-top: 1px solid var(--border-color);
    background: var(--surface);
    padding: 42px 0 26px;
    margin-top: 56px;
}
.site-footer .footer-title {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.site-footer .footer-link { display: block; font-size: .9rem; color: var(--text-secondary); padding: 5px 0; }
.site-footer .footer-link:hover { color: var(--brand-text); }
.footer-bottom {
    margin-top: 30px; padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: space-between; align-items: center;
    font-size: .82rem; color: var(--text-muted);
}

/* 11. Modal, toast, success ================================================= */
.modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.modal-header { border-bottom: 1px solid var(--border-color); padding: 18px 20px; }
.modal-title { font-size: 1.1rem; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 16px 20px; }
.modal.fade .modal-dialog { transform: translateY(14px) scale(.985); transition: transform .22s var(--ease); }
.modal.show .modal-dialog { transform: none; }

.summary-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 0; font-size: .9rem; color: var(--text-secondary);
}
.summary-line + .summary-line { border-top: 1px dashed var(--border-color); }
.summary-line.total {
    border-top: 1px solid var(--border-color);
    margin-top: 4px; padding-top: 13px;
    font-size: 1rem; color: var(--text-primary); font-weight: 600;
}
.summary-line.total .amount { font-size: 1.25rem; color: var(--brand-text); }

.compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--surface-sunken);
    border-radius: var(--radius);
}
.compare-cell { text-align: center; }
.compare-cell .k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.compare-cell .v { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; }
.compare-cell.now .v { color: var(--brand-primary); }
.compare-arrow { color: var(--text-muted); }
.compare:has([data-pm-base][hidden]) { grid-template-columns: 1fr; }

.secure-note { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); margin-top: 14px; }
.demo-note {
    display: flex; gap: 9px;
    font-size: .8rem;
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.success-state { text-align: center; padding: 10px 4px 4px; }
.success-badge {
    width: 62px; height: 62px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: var(--brand-soft);
    color: var(--brand-primary);
    display: grid; place-items: center;
    font-size: 1.7rem;
    animation: lift 2.6s var(--ease) infinite;
}
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.success-state h3 { font-size: 1.5rem; margin-bottom: 6px; }
.success-rank {
    font-family: var(--font-mono);
    font-size: 3rem; font-weight: 700; letter-spacing: -.055em;
    color: var(--brand-primary); line-height: 1; margin: 14px 0 6px;
}

.toast-container { z-index: 1090; }
.bc-toast {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    min-width: 290px;
}
.bc-toast .toast-body { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; }
.bc-toast .t-icon {
    width: 32px; height: 32px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-text);
}
.bc-toast .t-icon.ok { background: var(--up-soft); color: var(--up); }
.bc-toast .t-title { font-weight: 600; font-size: .92rem; margin-bottom: 1px; }
.bc-toast .t-text { font-size: .84rem; color: var(--text-secondary); }

/* 12. Skeletons, empty & error states ======================================= */
.skeleton {
    background: linear-gradient(90deg, #f4ebe6 25%, #fbf6f3 37%, #f4ebe6 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-tile { width: 44px; height: 44px; border-radius: 14px; }
.skeleton-line { height: 11px; }
.skeleton-line.short { width: 34%; }
.skeleton-line.mid { width: 58%; }
.skeleton-line.long { width: 82%; }

.empty-state {
    text-align: center;
    padding: 52px 22px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}
.empty-icon {
    width: 52px; height: 52px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--brand-text);
    display: grid; place-items: center;
    font-size: 1.3rem;
}
.empty-state h2, .empty-state h3 { font-size: 1.15rem; margin-bottom: 6px; }
.empty-state p { font-size: .92rem; max-width: 38ch; margin: 0 auto 18px; }

.alert { border-radius: 14px; border-width: 1px; font-size: .9rem; padding: 13px 15px; }
.alert-danger { --bs-alert-bg: var(--down-soft); --bs-alert-border-color: rgba(192, 57, 43, .25); --bs-alert-color: #96271c; }
.alert-warning { --bs-alert-bg: var(--brand-soft); --bs-alert-border-color: var(--brand-line); --bs-alert-color: #a33200; }
.alert .alert-title { font-family: var(--font-body); font-size: .92rem; font-weight: 700; margin-bottom: 3px; color: inherit; }
.alert p { color: inherit; opacity: .9; margin-bottom: 0; font-size: .86rem; }

/* 13. Page-specific ======================================================== */
.page-head { padding: 36px 0 24px; }
.page-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); margin-bottom: 8px; }
.page-head p { margin-bottom: 0; max-width: 54ch; }

.breadcrumb-mini { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb-mini a { color: var(--text-secondary); }
.breadcrumb-mini a:hover { color: var(--brand-text); }

.detail-hero { padding: 30px 0 28px; }
.detail-title { font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 8px; }
.detail-lede { font-size: 1.04rem; max-width: 48ch; }
.rank-callout {
    display: flex; align-items: center; gap: 14px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    padding: 14px 18px;
}
.rank-callout .big { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; letter-spacing: -.055em; line-height: 1; color: var(--brand-primary); }
.rank-callout .cap { font-size: .78rem; color: var(--text-secondary); }

.rank-chip {
    font-family: var(--font-mono);
    font-size: .76rem; font-weight: 700;
    padding: 5px 10px; border-radius: var(--radius-pill);
    background: var(--surface-sunken); color: var(--text-secondary);
    white-space: nowrap;
}
.rank-chip.top { background: var(--brand-soft); color: var(--brand-text); }

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px;
    height: 100%;
}
.metric-card .k { font-size: .74rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; }
.metric-card .v { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.metric-card .s { font-size: .8rem; color: var(--text-secondary); margin-top: 6px; }

.spark { width: 100%; height: 56px; display: block; }
.spark path { fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: rgba(255, 80, 0, .1); stroke: none; }

.rule-card {
    display: flex; gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px 20px;
    height: 100%;
}
.rule-index {
    font-family: var(--font-mono);
    font-size: .84rem; font-weight: 700;
    color: var(--brand-text); background: var(--brand-soft);
    width: 32px; height: 32px; border-radius: 11px;
    display: grid; place-items: center; flex: none;
}
.rule-card h2, .rule-card h3 { font-size: 1rem; margin-bottom: 4px; }
.rule-card p { font-size: .9rem; margin-bottom: 0; }

.preview-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px; }
.preview-card.found { border-color: var(--brand-line); background: var(--brand-soft); }
.preview-kv { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: .88rem; color: var(--text-secondary); }
.preview-kv + .preview-kv { border-top: 1px dashed var(--border-color); }

.aside-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px; }
.aside-card h2, .aside-card h3 { font-size: .95rem; margin-bottom: 10px; }
.aside-card li { font-size: .87rem; color: var(--text-secondary); padding: 5px 0; }

/* 14. Utilities & motion =================================================== */
.text-muted-2 { color: var(--text-muted) !important; }
.text-brand { color: var(--brand-text) !important; }
.bg-surface { background: var(--surface) !important; }
.border-hair { border: 1px solid var(--border-color) !important; }
.fw-600 { font-weight: 600; }

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. Homepage — the click board
   The page exists to send clicks to listed products; the board is therefore
   the main column and every row is a link out. The claim console is a compact
   rail beside it, driving a ghost row so a founder can see what a spot buys.
   Type here runs a step smaller than the rest of the site: this screen is for
   scanning, not for reading.
   ========================================================================== */

.stage { padding: 18px 0 34px; }
@media (min-width: 768px) { .stage { padding: 26px 0 40px; } }

.stage-top {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.stage-title { font-size: clamp(1.5rem, 3.2vw, 2.05rem); line-height: 1.1; margin: 8px 0 6px; }
.stage-title em { font-style: normal; color: var(--brand-primary); }
.stage-sub { font-size: .9rem; margin: 0; max-width: 52ch; }
.stage-opportunity {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .84rem; font-weight: 600; color: var(--brand-text);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-pill);
    padding: 6px 13px;
    margin: 10px 0 0;
}
.stage-opportunity i { font-size: .78rem; }

.live-dot {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted);
}
.live-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
    animation: pulse-dot 2.4s infinite;
}
.stage-counts { display: flex; gap: 18px; flex-wrap: wrap; }
.stage-count { font-size: .82rem; color: var(--text-secondary); white-space: nowrap; }
.stage-count .v { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: .88rem; }

/* Board first in the document: it is both the product and the proof, so it
   leads on a phone. Desktop shows the console alongside it in the rail. */
.stage-grid { display: grid; gap: 18px; align-items: start; }
@media (min-width: 992px) {
    .stage-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; }
    .stage-rail { position: sticky; top: 84px; }
}

/* --- The click board ------------------------------------------------------ */
.cb {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cb-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
}
.cb-title { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0; }
.cb-hint { font-size: .78rem; color: var(--text-muted); }
.cb-tabs { margin-left: auto; display: flex; gap: 3px; background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 3px; }
.cb-tab {
    font-size: .74rem; font-weight: 600;
    padding: 5px 12px;
    border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--text-secondary);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cb-tab:hover { color: var(--text-primary); }
.cb-tab.active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.cb-list { list-style: none; margin: 0; padding: 0; }

.cb-row {
    position: relative;
    display: grid;
    grid-template-columns: 22px 34px minmax(0, 1fr) auto;
    grid-template-areas:
        "rank logo main  amount"
        "rank logo meta  meta";
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color .15s var(--ease), transform .45s var(--ease);
}
.cb-row:last-child { border-bottom: 0; }
.cb-row:hover { background: var(--brand-soft); }
.cb-row[data-rank="1"] { background: linear-gradient(90deg, var(--brand-soft), transparent 70%); }
.cb-row[data-rank="1"]:hover { background: var(--brand-soft); }

.cb-rank {
    grid-area: rank;
    font-family: var(--font-mono);
    font-size: .78rem; font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.cb-row[data-rank="1"] .cb-rank,
.cb-row[data-rank="2"] .cb-rank,
.cb-row[data-rank="3"] .cb-rank { color: var(--brand-primary); }
.cb-logo { grid-area: logo; }
.cb-main { grid-area: main; min-width: 0; }

/* The name is the click target and it covers the whole row. */
.cb-name {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .92rem; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.cb-name i { font-size: .72rem; color: var(--text-muted); transition: transform .15s var(--ease), color .15s var(--ease); }
.cb-row:hover .cb-name { color: var(--brand-text); }
.cb-row:hover .cb-name i { color: var(--brand-primary); transform: translate(1px, -1px); }
.cb-name::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
}
.cb-desc {
    font-size: .8rem; color: var(--text-secondary);
    margin: 1px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-meta { grid-area: meta; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cb-clicks { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--text-secondary); }
.cb-clicks i { font-size: .7rem; color: var(--text-muted); }
.cb-clicks .num { font-weight: 600; color: var(--text-primary); font-size: .76rem; }
.cb-clicks.hot i { color: var(--brand-primary); }
.cb-clicks.counted { animation: count-pop .5s var(--ease); }
@keyframes count-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); color: var(--brand-primary); }
    100% { transform: scale(1); }
}
.cb-host { font-size: .74rem; color: var(--text-muted); font-family: var(--font-mono); }

.cb-amount { grid-area: amount; text-align: right; display: flex; align-items: center; gap: 10px; }
.cb-amount .amount { font-size: .9rem; color: var(--brand-text); }
.cb-outrank {
    position: relative; z-index: 2;
    font-size: .74rem; font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.cb-row:hover .cb-outrank, .cb-outrank:focus-visible { opacity: 1; }
.cb-outrank:hover { border-color: var(--brand-primary); color: var(--brand-text); }
@media (max-width: 767.98px) { .cb-outrank { display: none; } }

/* Ghost row — where the amount in the console would land you. */
.cb-ghost {
    background: var(--surface);
    border: 1px dashed var(--brand-primary);
    border-radius: 12px;
    margin: 4px 6px;
    padding: 11px 8px;
}
.cb-ghost:hover { background: var(--surface); }
.cb-ghost .cb-rank { color: var(--brand-primary); }
.cb-ghost .cb-name { color: var(--brand-text); }
.cb-ghost .cb-amount .amount { color: var(--brand-primary); }
.cb-ghost-mark {
    grid-area: logo;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-primary);
    font-size: .78rem;
}
.cb-you {
    font-size: .56rem; font-weight: 700; letter-spacing: .1em;
    padding: 2px 6px; border-radius: 6px;
    background: var(--brand-primary); color: #fff;
    margin-left: 6px;
}
.cb-you-row {
    border: 1px dashed var(--brand-primary);
    border-radius: 12px;
    margin: 4px 6px;
}
.cb-you-row:hover { background: var(--surface); }
.cb-gap {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    font-size: .74rem; color: var(--text-muted);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-color);
}
.cb-row.settling { position: relative; z-index: 3; }

.cb-categories {
    padding: 12px 14px;
    border-top: 1px solid var(--border-color);
}

.cb-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-sunken);
    font-size: .78rem; color: var(--text-secondary);
}

/* --- Compact claim console (the rail) ------------------------------------- */
.console {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.console-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px 0;
}
.console-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
}
.console-price {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 2px 14px 10px;
}
.console-amount {
    display: inline-flex; align-items: baseline;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--brand-primary);
    line-height: 1;
}
.console-amount .cur { font-size: .55em; margin-right: .05em; }
.console-input {
    font: inherit; color: inherit; letter-spacing: inherit;
    border: 0; background: transparent; padding: 0;
    width: 4ch; text-align: left;
    -moz-appearance: textfield; appearance: textfield;
}
.console-input:focus { outline: none; box-shadow: 0 3px 0 var(--brand-line); }
.console-input::-webkit-outer-spin-button,
.console-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.console-amount.bump { animation: bump .26s var(--ease); }

.console-steps { display: flex; gap: 6px; flex: none; }
.console-step {
    width: 34px; height: 34px;
    border-radius: 11px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    display: grid; place-items: center;
    font-size: .85rem;
    transition: background-color .15s var(--ease), border-color .15s var(--ease),
                color .15s var(--ease), transform .12s var(--ease);
}
.console-step:hover:not(:disabled) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.console-step:active:not(:disabled) { transform: scale(.93); }
.console-step:disabled { opacity: .4; cursor: not-allowed; }

.console-presets { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 12px; }
.console-presets .preset { font-size: .74rem; padding: 5px 11px; }
.console-sep { border: 0; border-top: 1px solid var(--border-color); margin: 0; opacity: 1; }
.console-form { padding: 12px 14px; display: grid; gap: 8px; }
.console-form .claim-field { padding: 0 14px; }
/* 16px is a hard floor, not a taste call: iOS Safari zooms the viewport when a
   focused input is smaller, which throws a phone visitor out of the layout on
   the one field this page needs them to fill. */
.console-form .claim-field input { padding: 11px 10px; font-size: 1rem; }
.console-form .btn { font-size: .92rem; padding: 11px 18px; }

.console-result {
    padding: 10px 14px;
    background: var(--brand-soft);
    border-top: 1px solid var(--brand-line);
    font-size: .8rem;
    color: var(--brand-text);
    display: flex; align-items: center; gap: 8px;
    margin: 0;
}
.console-result .num { font-weight: 700; }
.console-result.tick { animation: tick .3s var(--ease); }

.rail-note {
    font-size: .76rem; color: var(--text-muted);
    margin: 10px 2px 0; line-height: 1.5;
}
.rail-note button { color: var(--brand-text); font-weight: 600; }

/* --- Mobile: keep the claim action one tap away --------------------------- */
.claim-dock {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 1040;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px 9px 16px;
    background: var(--brand-dark);
    border-radius: var(--radius-pill);
    box-shadow: 0 14px 34px -14px rgba(26, 19, 16, .6);
    transform: translateY(140%);
    transition: transform .28s var(--ease);
}
.claim-dock.show { transform: none; }
.claim-dock-text { font-size: .82rem; color: rgba(255, 255, 255, .78); }
.claim-dock-text b { color: #fff; font-weight: 600; }
.claim-dock .btn { margin-left: auto; font-size: .84rem; padding: 8px 18px; }
@media (min-width: 992px) { .claim-dock { display: none; } }

/* --- Slim stat bar --------------------------------------------------------
   Lives at the top of the home page now: the proof strip a first-time visitor
   reads before deciding the board is real. Mobile-first: two compact columns
   on phones, three on tablets, one slim six-across row on wide screens. */
.stat-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.stat-bar-item {
    display: flex; align-items: baseline; gap: 6px;
    flex-wrap: wrap;
    padding: 10px 13px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.stat-bar-item:nth-child(2n) { border-right: 0; }
.stat-bar-item:nth-last-child(-n+2) { border-bottom: 0; }
.stat-bar-item .v { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; letter-spacing: -.04em; }
.stat-bar-item .k { font-size: .74rem; color: var(--text-secondary); white-space: nowrap; }
@media (min-width: 768px) {
    /* Six tiles — three columns keeps every row full instead of leaving a
       ragged last row and a stray edge border. */
    .stat-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-bar-item { padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
    .stat-bar-item:nth-child(2n) { border-right: 1px solid var(--border-color); }
    .stat-bar-item:nth-child(3n) { border-right: 0; }
    .stat-bar-item:nth-last-child(-n+3) { border-bottom: 0; }
    .stat-bar-item .v { font-size: 1rem; }
}
@media (min-width: 1200px) {
    /* One slim row: reads as a ticker, spends no vertical space above the board. */
    .stat-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .stat-bar-item { border-bottom: 0; }
    .stat-bar-item:nth-child(2n),
    .stat-bar-item:nth-child(3n) { border-right: 1px solid var(--border-color); }
    .stat-bar-item:last-child { border-right: 0; }
}

/* The hero copy sits above it; the claim strip and board sit below. */
.stage-stats { margin-bottom: 14px; }

/* ==========================================================================
   Phone claim strip
   The console is a full form — on a phone it fills the first screen, which
   buries the board. But the board IS what a founder is buying, and what a
   visitor came to click: hiding it to show a price field asks for money
   before showing the thing being sold. So the phone gets the offer as one
   compact row that jumps to the console, and keeps the board in view.
   ========================================================================== */
.claim-strip { display: none; }

/* ==========================================================================
   Mobile refinements
   The desktop board is deliberately dense — it is built for scanning with a
   mouse. A finger is not a mouse, so below the two-column breakpoint every
   control is grown to a 44px minimum (Apple HIG / WCAG 2.5.5) and spacing
   between adjacent controls is opened to 8px. Density returns at 992px,
   where the pointer does too.
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Above the fold: headline, proof, the offer, then the board -------- */
    .stage { padding: 14px 0 30px; }
    .stage-top { margin-bottom: 12px; }
    .stage-sub { font-size: .88rem; }

    /* One line instead of three, which lifts the listings ~80px up the screen.
       Six tiles cannot fit 375px legibly, so the row scrolls — and research on
       horizontal content is blunt that hidden items get missed, so two things
       make it honest: the strongest proof leads, and the next tile is left
       deliberately clipped, which is the cue that tells a thumb there is more. */
    .stage-stats {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .stage-stats::-webkit-scrollbar { display: none; }
    .stage-stats .stat-bar-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 11px 14px;
        gap: 5px;
        white-space: nowrap;      /* stops "total promoted" wrapping to line 2 */
        border-bottom: 0;
        border-right: 1px solid var(--border-color);
    }
    .stage-stats .stat-bar-item .v { font-size: .92rem; }
    .stage-stats .stat-bar-item .k { font-size: .72rem; }

    /* What a founder weighs before paying, in order: the traffic they would
       get, what others have paid, and who they are up against. The softer
       liveness counters follow. Keyed off data-stat rather than position so
       reordering the markup cannot silently scramble this. */
    .stage-stats .stat-bar-item:has([data-stat="clicks"])         { order: 1; }
    .stage-stats .stat-bar-item:has([data-stat="totalPromoted"])  { order: 2; }
    .stage-stats .stat-bar-item:has([data-stat="products"])       { order: 3; }
    .stage-stats .stat-bar-item:has([data-stat="online"])         { order: 4; }
    .stage-stats .stat-bar-item:has([data-stat="visitorsToday"])  { order: 5; }
    .stage-stats .stat-bar-item:has([data-stat="todayCollected"]) { order: 6; border-right: 0; }

    .claim-strip {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 12px 10px 14px;
        margin-bottom: 14px;
        background: var(--brand-soft);
        border: 1px solid var(--brand-line);
        border-radius: var(--radius);
        color: var(--text-primary);
        text-decoration: none;
    }
    .claim-strip-copy { display: grid; gap: 1px; min-width: 0; }
    .claim-strip-copy b { font-size: .9rem; font-weight: 700; line-height: 1.25; }
    .claim-strip-copy > span { font-size: .76rem; color: var(--text-secondary); }
    .claim-strip-copy .num { font-family: var(--font-mono); font-weight: 700; color: var(--brand-text); }
    .claim-strip-go {
        margin-left: auto; flex: none;
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 44px; padding: 0 16px;
        background: var(--brand-primary); color: #fff;
        border-radius: var(--radius-pill);
        font-size: .88rem; font-weight: 600;
    }
    .claim-strip-go i { font-size: .78rem; }
    .claim-strip:active .claim-strip-go { background: var(--brand-primary-press); }

    .console-label { font-size: .72rem; }

    /* --- 44px touch targets ------------------------------------------------ */
    .console-step { width: 44px; height: 44px; border-radius: 13px; font-size: 1rem; }
    /* The amount is typed into directly, so it is a target too. */
    .console-input { min-height: 44px; }
    /* All five on one line: two rows of pills made the card taller than it
       needed to be. "Take #1" gets the wider track because it carries a word,
       not a short number. */
    .console-presets {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) 1.5fr;
        gap: 6px;
        padding: 0 14px 12px;
    }
    .console-presets .preset {
        min-height: 44px;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; padding: 0 4px;
    }

    .console-form .btn { min-height: 48px; font-size: 1rem; }

    /* The board head cost 144px — more than a row of the board itself (90px).
       Its hint repeats the sub-heading above, so on a phone the head is just
       the title and the two views, which buys back a whole listing. */
    .cb-hint { display: none; }
    .cb-head { padding: 9px 12px; gap: 8px; }

    .cb-tabs { gap: 4px; }
    .cb-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: .8rem; }

    .cb-categories .chip { min-height: 44px; display: inline-flex; align-items: center; font-size: .82rem; }

    .navbar-toggler { min-width: 44px; min-height: 44px; }

    /* --- Sticky dock ------------------------------------------------------- */
    .claim-dock .btn { min-height: 44px; padding: 10px 22px; font-size: .92rem; }
    /* The dock floats over the page, so the document needs room to scroll
       clear of it — without this the last footer links sit under the bar. */
    body { padding-bottom: 76px; }
}

/* --- Three-step rail ------------------------------------------------------ */
.rail { display: grid; gap: 18px; position: relative; }
.rail-item { text-align: center; }
.rail-dot {
    width: 30px; height: 30px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    color: var(--brand-text);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
    position: relative; z-index: 1;
}
.rail-item h3 { font-size: .94rem; margin-bottom: 4px; }
.rail-item p { font-size: .84rem; margin-bottom: 0; }
@media (min-width: 768px) {
    .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .rail::before {
        content: "";
        position: absolute;
        top: 15px; left: 16%; right: 16%;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
    }
}

/* --- Activity timeline ---------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 2px 0; border-left: 2px solid var(--border-color); }
.act-row {
    position: relative;
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 0 9px 24px;
    font-size: .84rem;
}
.act-row::before {
    content: "";
    position: absolute;
    left: -6px; top: 14px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    border: 2px solid var(--background);
}
.act-row.promote::before { background: var(--brand-primary); }
.act-row.climb::before { background: var(--up); }
.act-row .activity-text { flex: 1; min-width: 0; color: var(--text-secondary); }
.act-row .activity-text strong { color: var(--text-primary); font-weight: 600; }
.act-time { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); flex: none; }
.act-row.is-new { animation: slide-in .5s var(--ease); }

/* Browse screens (home, leaderboard) run a step smaller than the rest. */
.compact .section { padding: 44px 0; }
.compact .section-head h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.compact .section-head p { font-size: .88rem; }
.compact .cta-band { padding: 36px 24px; }
.compact .cta-band h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); }
.compact .cta-band p { font-size: .9rem; margin-bottom: 20px; }
.compact .btn-xl { padding: 13px 28px; font-size: .98rem; }

/* Board toolbar — search and category filters inside the card head. */
.cb-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}
.cb-toolbar .board-search { flex: 1 1 230px; }
.cb-toolbar .board-search .form-control { padding-block: 9px; font-size: .88rem; }
.cb-toolbar .board-search i { left: 14px; font-size: .9rem; }
.cb-toolbar .filter-chips .chip { font-size: .77rem; padding: 6px 12px; }
.cb .empty-state { border: 0; background: transparent; padding: 44px 20px; }

/* The board pages reuse .stage-title inside .page-head — keep the smaller
   scale, and let the counts row carry a button. */
.page-head .stage-title { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin: 8px 0 6px; }
.stage-counts { align-items: center; }

/* ==========================================================================
   16. Confirm your listing
   What the crawler returns is a draft, not the truth. These fields sit under
   the URL input in the claim rail (and in the centred hero on /promote), and
   they own the two lines a visitor reads before deciding to click.
   ========================================================================== */
.confirm-card {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    padding: 13px 14px;
    box-shadow: var(--shadow-sm);
}
.cc-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.cc-eyebrow {
    font-size: .66rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
}
.cc-head .delta { margin-left: auto; }

.cc-note {
    display: flex; gap: 7px;
    font-size: .78rem; line-height: 1.45;
    color: var(--brand-text);
    background: var(--brand-soft);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0 0 12px;
}
.cc-note i { flex: none; margin-top: 1px; }

.cc-summary { margin-bottom: 10px; }
.cc-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: .82rem; color: var(--text-secondary);
    padding: 5px 0;
}
.cc-row + .cc-row { border-top: 1px dashed var(--border-color); }
.cc-row .amount { font-size: .85rem; }

.cc-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    color: var(--brand-text);
    background: transparent;
    border: 0; padding: 4px 0;
}
.cc-toggle:hover { color: var(--brand-primary-press); }

.cc-fields .form-control { font-size: .88rem; padding: 9px 11px; }
.cc-fields .field-label { font-size: .76rem; margin-bottom: 5px; }

.cc-logo-row {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.cc-logo-row .btn { font-size: .76rem; padding: 5px 12px; }
.cc-hint { font-size: .7rem; color: var(--text-muted); margin: 5px 0 0; }

.cc-meter { font-size: .7rem; color: var(--text-muted); margin: 6px 0 0; line-height: 1.4; }
.cc-meter.near { color: var(--brand-text); }
.cc-meter [data-cc-count] { font-family: var(--font-mono); font-weight: 700; }

.cc-error {
    font-size: .78rem;
    color: var(--down);
    background: var(--down-soft);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 10px 0 0;
}

/* A fetched or uploaded logo replaces the initials tile. */
/* The image is an <img> rather than a background, so a public URL never lands
   in a style attribute. The tile keeps the sunken fill underneath, which is
   what shows while it loads or if it never does. */
.logo-tile.has-img {
    background-color: var(--surface-sunken);
    color: transparent;
    border: 1px solid var(--border-color);
    overflow: hidden;
    padding: 0;
}
.logo-tile.has-img > .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* In the centred hero the card follows the width of the field above it. */
.claim .confirm-card { max-width: 720px; margin: 18px auto 0; }

/* 20. Legal pages ========================================================== */
.legal { max-width: 760px; }
.legal h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 32px 0 10px;
    color: var(--text-primary);
}
.legal h3 {
    font-size: .98rem;
    font-weight: 700;
    margin: 20px 0 6px;
    color: var(--text-primary);
}
.legal p, .legal li { color: var(--text-secondary); line-height: 1.65; }
.legal ul { padding-left: 20px; margin-bottom: 14px; }
.legal li { margin-bottom: 7px; }
.legal code {
    background: var(--surface-sunken);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: .86em;
}
.legal-meta {
    font-size: .84rem;
    color: var(--text-muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}
.legal-warning {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--down-soft);
    border: 1px solid var(--down);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-size: .9rem;
}
.legal-warning i { color: var(--down); font-size: 1.1rem; line-height: 1.4; }
.legal-nav {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: 40px; padding-top: 18px;
    border-top: 1px solid var(--border-color);
    font-size: .88rem;
}

/* 21. Reporting ============================================================ */
.report-slot { margin-top: 14px; text-align: center; }
.report-link {
    background: none; border: 0; padding: 6px;
    color: var(--text-muted);
    font-size: .84rem;
}
.report-link:hover { color: var(--down); text-decoration: underline; }
.report-form {
    text-align: left;
    background: var(--surface-sunken);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    margin-top: 8px;
}
.report-note { font-size: .78rem; color: var(--text-muted); margin: 10px 0; }
.report-thanks {
    font-size: .86rem; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.report-thanks i { color: var(--up); }
.report-thanks.is-error i { color: var(--down); }

/* 22. Moderation console =================================================== */
.admin-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tabs a {
    padding: 7px 14px; border-radius: 10px;
    font-size: .88rem; font-weight: 600;
    color: var(--text-secondary); text-decoration: none;
}
.admin-tabs a:hover { background: var(--surface-sunken); }
.admin-tabs a.active { background: var(--brand-primary); color: #fff; }
.admin-badge {
    display: inline-block; min-width: 19px;
    margin-left: 6px; padding: 0 6px;
    border-radius: 9px; background: var(--down); color: #fff;
    font-size: .72rem; text-align: center;
}
.admin-tabs a.active .admin-badge { background: rgba(255,255,255,.28); }
.admin-flash {
    background: var(--up-soft); border: 1px solid var(--up);
    border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
    font-size: .88rem; color: var(--text-primary);
}
.admin-card {
    border: 1px solid var(--border-color);
    border-radius: 16px; padding: 16px;
    margin-bottom: 12px; background: var(--surface);
}
.admin-card-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.admin-reason { font-weight: 700; color: var(--text-primary); margin-right: 8px; }
.admin-listing { font-size: .9rem; margin-right: 8px; }
.admin-url { margin: 8px 0; font-size: .84rem; word-break: break-all; }
.admin-detail {
    border-left: 3px solid var(--border-color);
    padding: 4px 0 4px 12px; margin: 10px 0;
    font-size: .88rem; color: var(--text-secondary);
}
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.admin-actions form { display: flex; gap: 6px; align-items: center; }
.admin-actions.compact { margin-top: 0; }
.admin-actions input[type=text] { max-width: 210px; }
.admin-status {
    display: inline-block; padding: 2px 9px; border-radius: 8px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em;
}
.admin-status.s-active { background: var(--up-soft); color: var(--up); }
.admin-status.s-paused { background: var(--down-soft); color: var(--down); }
.admin-status.s-removed { background: var(--surface-sunken); color: var(--text-muted); }
.admin-status.s-awaitingfirstpayment { background: var(--surface-sunken); color: var(--text-muted); }
.admin-time { font-size: .8rem; color: var(--text-muted); }
.admin-resolved { font-size: .85rem; color: var(--text-muted); margin: 10px 0 0; }
.admin-host { display: block; font-size: .78rem; color: var(--text-muted); }
.admin-field { font-family: var(--font-mono); font-size: .8rem; }
.admin-was { color: var(--text-muted); text-decoration: line-through; font-size: .85rem; }
.admin-now { color: var(--text-primary); font-size: .85rem; }
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th {
    text-align: left; padding: 9px 12px;
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.admin-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.admin-table .num-col { text-align: right; font-family: var(--font-mono); white-space: nowrap; }