/* ==========================================================================
   Trovewall — design system
   --------------------------------------------------------------------------
   MagicUI's design language, ported to vanilla CSS.

   MagicUI (github.com/magicuidesign/magicui) is React + Tailwind + Framer
   Motion. This project has no build step by design, so rather than bolting on
   a toolchain the *language* was ported: dark-first near-black surfaces, hair-
   line borders with an inset top highlight, generous radii, gradient display
   type, and a motion layer built from the real components — border beam,
   magic-card spotlight, shimmer and rainbow buttons, dot/grid/retro-grid
   backgrounds, marquee, bento grid, meteors, number ticker, animated beam.

   The motion layer lives in effects.css. This file is structure and
   components. Colours are Trovewall's: the navy ink is the dark ground and
   the cyan from the gem in the logo mark is the beam.

   Contents
     01  Fonts
     02  Tokens — dark (default)
     03  Tokens — light
     04  Reset and base
     05  Typography
     06  Layout primitives
     07  App shell — sidebar, topbar, content
     08  Public header and footer
     09  Buttons
     10  Forms
     11  Cards, panels, bento
     12  Tables
     13  Badges, pills, status dots
     14  Alerts
     15  Stat tiles and metrics
     16  Charts
     17  Tabs, dropdowns, modals, tooltips
     18  Pagination, breadcrumbs, empty states
     19  Code, key/value, copy fields, terminal
     20  Offer cards and wall preview
     21  Marketing sections
     22  Utilities
     23  Motion and print
   ========================================================================== */


/* 01  Fonts ---------------------------------------------------------------
   Space Grotesk as a variable font (wght 300–700), self-hosted in three
   unicode subsets so a Latin page never downloads the Vietnamese glyphs. */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/space-grotesk-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
                   U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
                   U+0329, U+1EA0-1EF9, U+20AB;
}


/* 02  Tokens — dark (default) ---------------------------------------------
   MagicUI is dark-first, so dark is the bare :root and light is the override.
   The ground is the brand navy pushed almost to black; surfaces climb toward
   it in lightness so elevation still reads without heavy shadows. */

:root {
    /* Brand constants — identical in both schemes. */
    --brand-ink:        #0B1E33;
    --brand-accent:     #22D3EE;
    --brand-accent-ink: #04202A;
    --brand-violet:     #7C3AED;
    --brand-violet-lt:  #A78BFA;
    --brand-pink:       #FE8BBB;   /* MagicUI's spotlight terminator */
    --brand-amber:      #FFAA40;   /* MagicUI's border-beam origin */

    /* Surfaces. */
    --bg:             #060D16;
    --bg-sunken:      #04090F;
    --surface:        #0B1524;
    --surface-raised: #0F1D2F;
    --surface-muted:  #16273D;
    --surface-inset:  #081222;
    --surface-invert: #FFFFFF;
    /* Translucent card fill — the MagicUI "white at 2%" over a dark ground. */
    --surface-glass:  rgba(255, 255, 255, 0.024);
    --surface-hover:  rgba(255, 255, 255, 0.045);

    /* Text. */
    --text:           #F2F6FA;
    --text-muted:     #98A6B8;
    --text-subtle:    #7E8CA0;
    --text-faint:     #5F6E82;
    --text-invert:    #0B1E33;
    --text-on-accent: #04202A;

    /* Lines. Hairlines, not borders — MagicUI leans on 1px at low alpha. */
    --border:        rgba(255, 255, 255, 0.085);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-focus:  #22D3EE;
    /* The inset top highlight that makes a dark card look lit from above. */
    --edge-light:    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

    /* Intent. */
    --success:      #34D399;
    --success-bg:   rgba(52, 211, 153, 0.12);
    --success-text: #6EE7B7;
    --warning:      #FBBF24;
    --warning-bg:   rgba(251, 191, 36, 0.12);
    --warning-text: #FCD34D;
    --danger:       #F87171;
    --danger-bg:    rgba(248, 113, 113, 0.12);
    --danger-text:  #FCA5A5;
    --info:         #60A5FA;
    --info-bg:      rgba(96, 165, 250, 0.12);
    --info-text:    #93C5FD;
    --neutral-bg:   rgba(255, 255, 255, 0.07);
    --neutral-text: #98A6B8;

    /* Data series. */
    --series-1: #22D3EE;
    --series-2: #A78BFA;
    --series-3: #34D399;
    --series-4: #FBBF24;
    --series-5: #60A5FA;
    --series-6: #F87171;
    --series-7: #94A3B8;

    /* Type. */
    --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    --text-2xs: 0.6875rem;
    --text-xs:  0.75rem;
    --text-sm:  0.8125rem;
    --text-md:  0.9375rem;
    --text-base:1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;
    --text-6xl: 4.5rem;

    /* Spacing — 4 px base. */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
    --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Radii — MagicUI is noticeably rounder than a stock admin theme. */
    --radius-xs: 6px;  --radius-sm: 8px;   --radius:    12px;
    --radius-lg: 16px; --radius-xl: 24px;  --radius-2xl: 32px;
    --radius-full: 999px;

    /* Elevation. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow:    0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.62);
    --ring:        0 0 0 3px rgba(34, 211, 238, 0.35);
    --ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.3);
    --glow-accent: 0 0 40px -8px rgba(34, 211, 238, 0.5);
    --glow-violet: 0 0 40px -8px rgba(124, 58, 237, 0.55);

    /* Structure. */
    --sidebar-w:       256px;
    --topbar-h:        60px;
    --container:       1200px;
    --container-wide:  1440px;
    --container-prose: 68ch;

    --speed-fast: 120ms;
    --speed:      200ms;
    --speed-slow: 340ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: dark;
}


/* 03  Tokens — light -------------------------------------------------------
   MagicUI ships a light mode too; it is the same structure with the values
   inverted, not a different design. */

:root[data-scheme='light'] {
    --bg:             #FFFFFF;
    --bg-sunken:      #F7F9FB;
    --surface:        #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-muted:  #F0F3F6;
    --surface-inset:  #F7F9FB;
    --surface-invert: #0B1E33;
    --surface-glass:  rgba(11, 30, 51, 0.018);
    --surface-hover:  rgba(11, 30, 51, 0.04);

    --text:           #0B1E33;
    --text-muted:     #5B6B7C;
    --text-subtle:    #7E8CA0;
    --text-faint:     #9AA6B4;
    --text-invert:    #FFFFFF;

    --border:        rgba(11, 30, 51, 0.1);
    --border-strong: rgba(11, 30, 51, 0.18);
    --edge-light:    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);

    --success:      #0E9F6E;
    --success-bg:   #E7F7F1;
    --success-text: #07523A;
    --warning:      #D97706;
    --warning-bg:   #FEF4E4;
    --warning-text: #7A4C02;
    --danger:       #D14343;
    --danger-bg:    #FBEBEB;
    --danger-text:  #7A1F1F;
    --info:         #2A7FD4;
    --info-bg:      #E8F1FB;
    --info-text:    #123C68;
    --neutral-bg:   #F0F3F6;
    --neutral-text: #5B6B7C;

    --series-2: #7C3AED;
    --series-3: #0E9F6E;
    --series-4: #F59E0B;
    --series-5: #2A7FD4;
    --series-6: #D14343;

    --shadow-xs: 0 1px 2px rgba(11, 30, 51, 0.06);
    --shadow-sm: 0 1px 3px rgba(11, 30, 51, 0.08);
    --shadow:    0 4px 16px rgba(11, 30, 51, 0.09);
    --shadow-lg: 0 16px 40px rgba(11, 30, 51, 0.12);
    --shadow-xl: 0 32px 72px rgba(11, 30, 51, 0.16);

    color-scheme: light;
}

/*
 * There is deliberately no `prefers-color-scheme: light` auto-switch.
 *
 * MagicUI's design language is dark-first and so is this brand: the navy
 * ground, the cyan beams and the glow layers are the identity, and most
 * browsers report `light` by default, which would mean almost nobody ever
 * saw it. Dark is therefore the default for everyone, and light is a
 * deliberate choice made with the toggle in the header — remembered in
 * localStorage and in the tw_scheme cookie.
 *
 * If the site should follow the operating system instead, add a
 * `@media (prefers-color-scheme: light)` block that repeats the token
 * overrides above under `:root:not([data-scheme='dark'])`.
 */


/* 04  Reset and base ------------------------------------------------------ */

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

/* The browser's own `[hidden] { display: none }` is a user-agent rule, so any
   author rule that sets `display` beats it — `.hint { display: block }` left a
   hidden element on screen. Scripts here toggle `hidden` rather than a class,
   so this has to win. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + var(--sp-4));
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.6;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--text);
    text-decoration-color: color-mix(in srgb, var(--brand-accent) 55%, transparent);
    text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--brand-accent); }

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

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

::selection {
    background: color-mix(in srgb, var(--brand-accent) 30%, transparent);
    color: var(--text);
}

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: var(--radius-full);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--sp-2);
    z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { left: var(--sp-2); }


/* 05  Typography ---------------------------------------------------------- */

/* Vertical rhythm — the spec is SPACING_AUDIT.md §2 and this block is where it
 * lives. Every value is a --sp-* token; nothing here may be a raw length.
 *
 * Two things this block gets right that the previous version did not:
 *
 *   Bottom margins descend h1 → h6. They used to be flat at --sp-3, so an h4
 *   pushed as hard as an h1 and the hierarchy was carried by font size alone.
 *
 *   h2–h6 have a top margin larger than their own bottom margin, so a heading
 *   sits closer to the content it introduces than to the content it follows.
 *   Only `.prose` had that before, which meant the rhythm existed on the docs
 *   and legal pages and nowhere else.
 *
 * h1 is deliberately exempt from the top margin: it opens a document, and a
 * top margin on it fights every page header in the application. */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text);
    text-wrap: balance;
}

h1 { margin: 0 0 var(--sp-5);            font-size: var(--text-3xl); letter-spacing: -0.035em; }
h2 { margin: var(--sp-10) 0 var(--sp-4); font-size: var(--text-2xl); letter-spacing: -0.03em; }
h3 { margin: var(--sp-8) 0 var(--sp-3);  font-size: var(--text-xl);  line-height: 1.2; }
h4 { margin: var(--sp-6) 0 var(--sp-2);  font-size: var(--text-lg);  line-height: 1.25; }
h5 { margin: var(--sp-5) 0 var(--sp-2);  font-size: var(--text-base); line-height: 1.3; }
h6 {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--text-sm);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* A heading that opens its container has nothing above it to separate from, so
 * the top margin is noise — and without this, rule 3 above would put 2.5rem of
 * air over every card title in the product. This selector list is the whole
 * reason the rhythm can be global instead of scoped to .prose. */
.card > :first-child,
.card__head > :first-child,
.card__body > :first-child,
.card__foot > :first-child,
.panel > :first-child,
.section > :first-child,
.section-head > :first-child,
.container > :first-child,
.empty > :first-child,
.modal__body > :first-child,
.page-head__text > :first-child,
.stat > :first-child,
.prose > :first-child,
li > :first-child,
td > :first-child,
th > :first-child,
figure > :first-child,
blockquote > :first-child {
    margin-top: 0;
}

p { margin: 0 0 var(--sp-4); line-height: 1.6; }
p:last-child { margin-bottom: 0; }

small { font-size: var(--text-sm); }
strong, b { font-weight: 600; }

.lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-muted);
}

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-violet-lt);
    margin-bottom: var(--sp-3);
}

/* Lists get the same rhythm as paragraphs. This used to be scoped to `.prose`;
 * it is promoted because a list in a card body wants it just as much, and a
 * second set of numbers for the same job is how the two drift apart.
 *
 * `:not([class])` is doing real work, and it is not a trick. In this codebase a
 * bare <ul> is prose and a classed one is a component — .nav__list, .breadcrumb,
 * .site-footer__links, .feed, .price-card__list, .wall-steps — and every one of
 * those styles its own spacing. Without the guard, the first version of this
 * rule put 8px under every navigation <li> except the last one, which has the
 * reset, so the header's links sat 4px above "Docs" and "Get started". If you
 * add a list that needs this rhythm AND a class, add `.list--flow`. */
ul:not([class]), ol:not([class]), .list--flow {
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-6);
    line-height: 1.6;
}
ul:not([class]) > li, ol:not([class]) > li, .list--flow > li { margin-bottom: var(--sp-2); }
ul:not([class]) > li:last-child,
ol:not([class]) > li:last-child,
.list--flow > li:last-child { margin-bottom: 0; }
ul:not([class]):last-child, ol:not([class]):last-child, .list--flow:last-child { margin-bottom: 0; }

/* Nested lists sit inside their parent item, so the outer gap is already there. */
li > ul:not([class]), li > ol:not([class]) { margin-top: var(--sp-2); margin-bottom: 0; }

/* A list that is the whole content of a panel: closer indent, tighter items,
   no trailing gap. Two views were doing this with `padding-left:1.1rem;margin:0`
   inline, which is both a raw length and a duplicate. */
.list--tight { padding-left: var(--sp-5); margin-bottom: 0; }
.list--tight li { margin-bottom: var(--sp-1); }
.list--tight li:last-child { margin-bottom: 0; }

.prose { max-width: var(--container-prose); }

.mono { font-family: var(--font-mono); font-size: 0.92em; }
.tabular { font-variant-numeric: tabular-nums; }

/* Section heading block, centred — the MagicUI section rhythm. */
.section-head {
    max-width: 640px;
    margin: 0 auto var(--sp-12);
    text-align: center;
}
.section-head h2 { font-size: clamp(1.75rem, 4vw, var(--text-4xl)); }
.section-head .lead { margin-top: var(--sp-4); }


/* 06  Layout primitives --------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}
.container--wide   { max-width: var(--container-wide); }
.container--prose  { max-width: var(--container-prose); }
.container--narrow { max-width: 760px; }

.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-8); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}
.cluster--sm { gap: var(--sp-2); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--center { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }
/* A grid that should not run the full container width — two cards centred under
   a section heading rather than stretched across 1100px. */
.grid--narrow { max-width: 840px; margin-inline: auto; }

/* Sidebar + content, for the documentation and legal sets. This exact
   declaration was inline in eight views — the most duplicated piece of layout
   in the codebase, and eight places to forget when the sidebar width changes.
   minmax(0,1fr) rather than 1fr so a wide table in the content column scrolls
   inside itself instead of widening the whole grid. */
.grid--docs {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
}
/* 1100px is not a free choice: it must match `.u-hide-md`, which is what hides
 * the sidebar. When it did not, the sidebar disappeared at 1100 while the 250px
 * track stayed, so between 900 and 1100 the article was auto-placed into that
 * track and rendered 250px wide next to 758px of nothing — on every docs and
 * legal page. Change one of these two and you must change the other. */
/* `minmax(0, 1fr)` and not `1fr`: a bare 1fr track is min-content-floored, so
 * one long line in a <pre> widened the column past the viewport and the whole
 * page scrolled sideways on a phone — the code block's own overflow-x never
 * got a chance to scroll. */
@media (max-width: 1100px) { .grid--docs { grid-template-columns: minmax(0, 1fr); } }

/* Two columns with generous air between them, vertically centred — the
   alternating feature rows on the marketing pages. */
.grid--feature { gap: var(--sp-12); align-items: center; }

/* Composable overrides, so a one-off row does not need an inline style. Gaps
   use the same token scale as everything else; there is no `gap: 14px` here or
   anywhere. */
.grid--gap-4  { gap: var(--sp-4); }
.grid--gap-8  { gap: var(--sp-8); }
.grid--gap-12 { gap: var(--sp-12); }
.grid--top    { align-items: start; }
.grid--middle { align-items: center; }

/* A row of headline counters: big number, small label, both centred.
   `.stat__label` is display:flex, so text-align does nothing to it — which is
   why eleven of these carried an inline `justify-content:center` and a `u-center`
   that could never have worked. One class on the row does both. */
.counters { text-align: center; }
.counters .stat__label { justify-content: center; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

@media (max-width: 1100px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.section { position: relative; padding-block: var(--sp-24); }
.section--tight { padding-block: var(--sp-16); }
.section--sunken { background: var(--bg-sunken); }

.divider { height: 1px; background: var(--border); margin-block: var(--sp-6); }

/* A hairline that fades out at both ends — used between marketing sections. */
.rule-fade {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
}


/* 07  App shell ----------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-inset);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-h);
    padding-inline: var(--sp-5);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.sidebar__brand img { width: 26px; height: 26px; }
.sidebar__brand-name {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}
.sidebar__brand-role {
    display: block;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-accent);
    font-weight: 600;
}

.sidebar__scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3) var(--sp-6); }
.sidebar__group + .sidebar__group { margin-top: var(--sp-5); }

.sidebar__label {
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.sidebar__link:hover { background: var(--surface-hover); color: var(--text); }
.sidebar__link.is-active {
    background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
    color: var(--text);
    box-shadow: inset 2px 0 0 var(--brand-accent);
}
.sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.sidebar__link.is-active .sidebar__icon { opacity: 1; color: var(--brand-accent); }

.sidebar__count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    color: var(--text);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-align: center;
}
.sidebar__count--alert { background: var(--danger); color: #FFFFFF; }

.sidebar__foot { flex-shrink: 0; padding: var(--sp-4); border-top: 1px solid var(--border); }

.sidebar__balance {
    display: block;
    padding: var(--sp-3);
    border-radius: var(--radius);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    box-shadow: var(--edge-light);
    text-decoration: none;
}
.sidebar__balance-label {
    display: block;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.sidebar__balance-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-h);
    padding-inline: var(--sp-6);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.topbar__title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.topbar__spacer { flex: 1; }
.topbar__toggle {
    display: none;
    padding: var(--sp-2);
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
}

.main { min-width: 0; display: flex; flex-direction: column; }

.content {
    flex: 1;
    padding: var(--sp-6);
    max-width: var(--container-wide);
    width: 100%;
}
.content--flush { padding: 0; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.page-head__text { flex: 1; min-width: 260px; }
.page-head h1 { font-size: var(--text-2xl); margin-bottom: var(--sp-1); }
.page-head__sub { color: var(--text-muted); font-size: var(--text-md); margin: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 960px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sidebar-w);
        z-index: 60;
        transform: translateX(-100%);
        transition: transform var(--speed) var(--ease);
        box-shadow: var(--shadow-xl);
    }
    .sidebar.is-open { transform: translateX(0); }
    .topbar__toggle { display: block; }
    .content { padding: var(--sp-4); }
    .shell__scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(4, 9, 15, 0.7);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--speed) var(--ease);
    }
    .shell__scrim.is-visible { opacity: 1; pointer-events: auto; }
}


/* 08  Public header and footer -------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 66px;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--text);
}
.nav__brand img { width: 28px; height: 28px; }

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__list--end { margin-left: auto; }

.nav__link {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-hover); }
.nav__link.is-active { color: var(--text); }
.nav__link--button { border: 0; background: none; cursor: pointer; font-family: inherit; }
.nav__form { display: contents; }

.nav__burger {
    display: none;
    margin-left: auto;
    padding: var(--sp-2);
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
}

@media (max-width: 900px) {
    .nav__burger { display: block; }
    .nav__list {
        display: none;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-3);
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .nav.is-open .nav__list { display: flex; }
    .nav__list--end { margin-left: 0; }
    .nav__link { padding: var(--sp-3); }
}

.site-footer {
    position: relative;
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-muted);
    padding-block: var(--sp-16) var(--sp-8);
    font-size: var(--text-md);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer h4 {
    color: var(--text);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-4);
}
/* Brand column, then one per link group. minmax(0,1fr) rather than 1fr so a
   long link ("Geographic restrictions") widens its own column instead of
   pushing the whole row past the container. */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: var(--sp-8);
    margin-bottom: var(--sp-12);
}
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: var(--sp-2); }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
}
@media (max-width: 1080px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .site-footer__grid { grid-template-columns: 1fr; } }


/* 09  Buttons -------------------------------------------------------------
   Plain buttons here; the shimmer and rainbow variants are in effects.css. */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--edge-light);
    transition: background var(--speed-fast) var(--ease),
                border-color var(--speed-fast) var(--ease),
                color var(--speed-fast) var(--ease),
                transform var(--speed-fast) var(--ease),
                box-shadow var(--speed-fast) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Primary is a light pill on dark, inverted in light mode — the MagicUI
   "high contrast, no colour" primary. */
.btn--primary {
    background: var(--text);
    border-color: transparent;
    color: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn--primary:hover { background: var(--text); filter: brightness(0.92); border-color: transparent; }

.btn--accent {
    background: var(--brand-accent);
    border-color: transparent;
    color: var(--brand-accent-ink);
    box-shadow: var(--glow-accent);
}
.btn--accent:hover { background: #5CE1F5; border-color: transparent; }

.btn--violet {
    background: var(--brand-violet);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: var(--glow-violet);
}
.btn--violet:hover { background: #8B5CF6; border-color: transparent; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); border-color: transparent; }

.btn--outline { background: transparent; border-color: var(--border-strong); }
.btn--outline:hover { background: var(--surface-hover); }

.btn--danger { background: var(--danger); border-color: transparent; color: #FFFFFF; }
.btn--danger:hover { filter: brightness(0.92); }
.btn--danger:focus-visible { box-shadow: var(--ring-danger); }

.btn--success { background: var(--success); border-color: transparent; color: #04241A; }
.btn--success:hover { filter: brightness(0.94); }

.btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn--xs { height: 26px; padding: 0 var(--sp-2); font-size: var(--text-xs); border-radius: var(--radius-xs); }
.btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--text-base); border-radius: var(--radius); }
.btn--block { width: 100%; }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }

.btn-group {
    display: inline-flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.btn-group .btn { border-radius: 0; border: 0; box-shadow: none; background: transparent; }
.btn-group .btn + .btn { border-left: 1px solid var(--border); }
.btn-group .btn.is-active { background: var(--surface-hover); color: var(--text); }


/* 10  Forms --------------------------------------------------------------- */

.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}
.label__optional { font-weight: 400; color: var(--text-faint); }
.label__required { color: var(--danger); }

.input, .select, .textarea {
    display: block;
    width: 100%;
    padding: 0 var(--sp-3);
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
    transition: border-color var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}
.input[disabled], .select[disabled], .textarea[disabled] {
    background: var(--surface-muted);
    color: var(--text-faint);
    cursor: not-allowed;
}
.input[readonly] { background: var(--surface-muted); }

.textarea {
    height: auto;
    min-height: 100px;
    padding: var(--sp-3);
    line-height: 1.6;
    resize: vertical;
}

.select {
    appearance: none;
    padding-right: var(--sp-8);
    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='%2398A6B8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    cursor: pointer;
}

/* Compact controls, for the inline forms in a table cell. */
.input--sm, .select--sm {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--text-sm);
    min-height: 0;
}
.select--sm { padding-right: var(--sp-6); background-position: right var(--sp-2) center; }

.input--error, .select--error, .textarea--error { border-color: var(--danger); }
.input--error:focus { box-shadow: var(--ring-danger); }

.hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.error-text {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--danger);
    font-weight: 500;
}

/* Ad-format picker — a radio group that reads as cards.
 *
 * The radio itself is kept in the layout but visually hidden rather than
 * display:none, so it stays focusable and the keyboard arrow-key behaviour of
 * a radio group is the browser's, not ours. :focus-visible on the input draws
 * the ring on the card via a sibling selector. */
.formats { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
.formats legend { padding: 0; }
.formats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--sp-3);
}

.format { display: block; cursor: pointer; }
.format__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.format__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.format:hover .format__body { border-color: var(--border-strong); }
.format__radio:checked + .format__body {
    border-color: var(--brand-accent);
    background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-inset));
}
.format__radio:focus-visible + .format__body {
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}

.format__head { display: flex; align-items: center; gap: var(--sp-2); }
.format__icon { display: inline-flex; color: var(--brand-accent); }
.format__name { font-weight: 600; font-size: var(--text-md); color: var(--text); }
.format__abbr { margin-left: auto; font-size: var(--text-xs); }
.format__summary { font-size: var(--text-sm); color: var(--text); line-height: 1.5; }
.format__example { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.format__converts {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
.format__converts svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.input-group > :last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.input-group > * + * { margin-left: -1px; }
.input-group .input:focus { position: relative; z-index: 1; }
.input-group__addon {
    display: flex;
    align-items: center;
    padding-inline: var(--sp-3);
    border: 1px solid var(--border-strong);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: var(--text-md);
    white-space: nowrap;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: var(--text-md);
}
.check + .check { margin-top: var(--sp-3); }
.check input[type='checkbox'], .check input[type='radio'] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--brand-accent);
    cursor: pointer;
}
.check__text { line-height: 1.45; }
.check__hint { display: block; font-size: var(--text-sm); color: var(--text-muted); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    transition: background var(--speed) var(--ease);
    flex-shrink: 0;
}
.switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--speed) var(--ease), background var(--speed) var(--ease);
}
.switch input:checked + .switch__track { background: var(--brand-accent); border-color: transparent; }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: var(--brand-accent-ink); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    gap: 2px;
}
.segmented__item {
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active { background: var(--surface-hover); color: var(--text); }

.swatch { display: flex; align-items: center; gap: var(--sp-2); }
.swatch input[type='color'] {
    width: 38px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    cursor: pointer;
}
.swatch .input { font-family: var(--font-mono); text-transform: uppercase; }

.fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin: 0 0 var(--sp-5);
}
.fieldset legend {
    padding-inline: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
}

/* A field that takes the whole row: a textarea, or a checkbox whose label is
   a sentence rather than a word. The row is a grid, so this is grid-column —
   flex-basis does nothing here. */
.form-row > .field--wide { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border);
}


/* 11  Cards, panels, bento ------------------------------------------------ */

.card {
    position: relative;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--edge-light);
    backdrop-filter: blur(4px);
}
.card--solid { background: var(--surface); backdrop-filter: none; }
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--edge-light), var(--shadow); }
.card--accent { border-color: color-mix(in srgb, var(--brand-accent) 40%, transparent); }

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.card__title { margin: 0; font-size: var(--text-base); font-weight: 600; }
.card__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.card__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
.card__body { padding: var(--sp-5); }
.card__body--tight { padding: var(--sp-4); }
.card__body--flush { padding: 0; }
/* For a card that is the whole screen's content — the auth forms — where the
   default padding reads as cramped against all that empty space around it. */
.card__body--roomy { padding: var(--sp-8); }
@media (max-width: 480px) { .card__body--roomy { padding: var(--sp-5); } }
.card__foot {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-inset);
    border-radius: 0 0 var(--radius) var(--radius);
}

.panel {
    padding: var(--sp-5);
    border-radius: var(--radius);
    background: var(--surface-inset);
    border: 1px solid var(--border);
}
.panel--accent {
    background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
}
.panel--violet {
    background: color-mix(in srgb, var(--brand-violet) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-violet) 30%, transparent);
}
.panel--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.panel--danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

/* -- Bento grid --
   MagicUI's asymmetric feature layout: a 3-column grid where individual cells
   claim extra columns or rows. Cells collapse to one column on small screens. */

.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, auto);
    gap: var(--sp-4);
}
.bento__cell {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
    box-shadow: var(--edge-light);
    transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.bento__cell:hover { border-color: var(--border-strong); }
.bento__cell--wide { grid-column: span 2; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--full { grid-column: 1 / -1; }

.bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
    color: var(--brand-accent);
}
.bento__icon--violet {
    background: color-mix(in srgb, var(--brand-violet) 16%, transparent);
    border-color: color-mix(in srgb, var(--brand-violet) 30%, transparent);
    color: var(--brand-violet-lt);
}
.bento__title { font-size: var(--text-lg); font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.bento__text { color: var(--text-muted); font-size: var(--text-md); margin: 0; max-width: 46ch; }

/* Decorative artwork filling a bento cell behind its text.
   The fade is left to the pattern's own --center mask: stacking a second
   gradient mask on this wrapper collapsed the visible area to a single row of
   dots, which read as a rendering artefact rather than a texture. */
.bento__art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.7;
}

@media (max-width: 1000px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__cell--tall { grid-row: span 1; }
}
@media (max-width: 700px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento__cell--wide, .bento__cell--full { grid-column: span 1; }
}


/* 12  Tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }

/* Inline code breaks anywhere by default, which is right for a long URL in a
   paragraph and wrong in a table cell: a narrow column split TWSESSID across
   two lines as "TWSE / SSID", which reads as a different cookie. In a table
   the identifier is the column, so it keeps itself whole and widens instead —
   .table-wrap already scrolls if the total gets too wide for the page. */
.table td code, .table th code { white-space: nowrap; word-break: normal; }
/* …except inside a block. A <pre> in a cell is a quoted document — a response
   body, a stack trace — not an identifier, and keeping it on one line pushed
   the columns after it off the side of the table. */
.table td pre code, .table th pre code { white-space: inherit; word-break: inherit; }
.table th, .table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-inset);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--speed-fast) var(--ease); }
.table--hover tbody tr:hover { background: var(--surface-hover); }
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; }
.table tfoot td {
    background: var(--surface-inset);
    font-weight: 600;
    border-top: 2px solid var(--border-strong);
    border-bottom: 0;
}
.table__sort { display: inline-flex; align-items: center; gap: var(--sp-1); color: inherit; text-decoration: none; }
.table__sort:hover { color: var(--text); }
.table__sort.is-active { color: var(--brand-accent); }
.table__primary { font-weight: 600; color: var(--text); }
.table__meta { display: block; font-size: var(--text-xs); color: var(--text-faint); }

.cell-media { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell-media__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-muted);
    flex-shrink: 0;
}
.cell-media__text { min-width: 0; }
.cell-media__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* 13  Badges, pills, status dots ------------------------------------------ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-xs);
    background: var(--neutral-bg);
    color: var(--neutral-text);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.badge--success { background: var(--success-bg); color: var(--success-text); }
.badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge--info    { background: var(--info-bg);    color: var(--info-text); }
.badge--accent  { background: color-mix(in srgb, var(--brand-accent) 16%, transparent); color: var(--brand-accent); }
.badge--violet  { background: color-mix(in srgb, var(--brand-violet) 18%, transparent); color: var(--brand-violet-lt); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 500;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.dot--success { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }
.dot--warning { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent); }
.dot--danger  { background: var(--danger);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.dot--muted   { background: var(--text-faint); }

.dot--live { position: relative; background: var(--success); }
.dot--live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--success);
    animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}


/* 14  Alerts -------------------------------------------------------------- */

.alerts { margin-bottom: var(--sp-5); }
.alerts:empty { display: none; }

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--text-md);
    line-height: 1.5;
}
.alert + .alert { margin-top: var(--sp-2); }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert--success { background: var(--success-bg); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.alert--info    { background: var(--info-bg);    color: var(--info-text);    border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert--warning { background: var(--warning-bg); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.alert--danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert__title { font-weight: 600; display: block; }
.alert__body { flex: 1; min-width: 0; }


/* 15  Stat tiles and metrics ---------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.stat {
    position: relative;
    overflow: hidden;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--edge-light);
}
.stat__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.stat__value {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.stat__value small { font-size: var(--text-base); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.stat__foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.delta--up   { color: var(--success); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--text-faint); }

.stat--accent { border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
.stat--accent::before {
    content: '';
    position: absolute;
    inset: -40% 40% 60% -20%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%);
    pointer-events: none;
}
.stat--violet { border-color: color-mix(in srgb, var(--brand-violet) 30%, transparent); }
.stat--violet::before {
    content: '';
    position: absolute;
    inset: -40% 40% 60% -20%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-violet) 24%, transparent), transparent 70%);
    pointer-events: none;
}
.stat > * { position: relative; }

.metrics { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.metric__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.metric__value { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- Work queue --
   The control panel's first row: one tile per thing waiting on a human. A tile
   at zero stays visible but recedes, so the row reads as a checklist rather
   than appearing and disappearing under the operator. */

.queue-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.queue {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.queue:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.queue__icon { color: var(--text-faint); }
.queue__count {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}
.queue__label { font-size: var(--text-sm); }

.queue--waiting { background: var(--surface-glass); border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.queue--waiting .queue__icon,
.queue--waiting .queue__count { color: var(--warning); }
.queue--waiting .queue__label { color: var(--text); }

/* -- Activity feed --
   A vertical list of events with a severity-tinted glyph. Used for fraud
   flags and anywhere else a table would be more structure than the content
   deserves. */

.feed { list-style: none; margin: 0; padding: 0; }
.feed__item {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.feed__item:last-child { border-bottom: 0; }
.feed__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    color: var(--text-muted);
}
.feed__icon--low,
.feed__icon--info     { background: var(--info-bg);    color: var(--info); }
.feed__icon--medium,
.feed__icon--warning  { background: var(--warning-bg); color: var(--warning); }
.feed__icon--high,
.feed__icon--critical,
.feed__icon--danger   { background: var(--danger-bg);  color: var(--danger); }
.feed__icon--success  { background: var(--success-bg); color: var(--success); }
.feed__body { min-width: 0; flex: 1; }
.feed__title { display: block; font-size: var(--text-md); color: var(--text); }
.feed__text  { display: block; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.feed__meta { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.feed__action { flex-shrink: 0; }

/* An unread notice earns a marker in the gutter — enough to find at a glance,
   not so much that a full inbox reads as an emergency. */
.feed__item--unread { background: var(--surface-glass); box-shadow: inset 2px 0 0 var(--brand-accent); }
.feed__item--unread .feed__title { font-weight: 600; }


/* 16  Charts --------------------------------------------------------------
   Inline SVG rendered server-side by the Chart class. */

.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart__grid line { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis text { fill: var(--text-faint); font-size: 11px; font-family: var(--font-sans); }
.chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__area { opacity: 0.16; }
.chart__bar { rx: 3; transition: opacity var(--speed-fast) var(--ease); }
.chart__bar:hover { opacity: 0.8; }
.chart__point { r: 3; stroke: var(--bg); stroke-width: 2; }

.chart__s1 { stroke: var(--series-1); fill: var(--series-1); }
.chart__s2 { stroke: var(--series-2); fill: var(--series-2); }
.chart__s3 { stroke: var(--series-3); fill: var(--series-3); }
.chart__s4 { stroke: var(--series-4); fill: var(--series-4); }
.chart__s5 { stroke: var(--series-5); fill: var(--series-5); }
.chart__s6 { stroke: var(--series-6); fill: var(--series-6); }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chart-legend__key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.sparkline { height: 34px; margin-top: var(--sp-2); }

.bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 2fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: var(--text-md);
}
.bar-row + .bar-row { border-top: 1px solid var(--border); }
/* These are <span>s, and width and height do not apply to an inline box. The
   track survives only because it is a grid item, which blockifies it; the fill
   is not, so without this it rendered 0px wide at every value and the bars
   were invisible on every breakdown panel in the product. Anything given an
   inline style="width:…" needs to be told it is a block. */
.bar-row__track { display: block; height: 7px; border-radius: var(--radius-full); background: var(--surface-muted); overflow: hidden; }
.bar-row__fill  { display: block; height: 100%; border-radius: var(--radius-full); background: var(--series-1); }
.bar-row__value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.progress { display: block; height: 6px; border-radius: var(--radius-full); background: var(--surface-muted); overflow: hidden; }
.progress__fill { display: block; height: 100%; background: var(--brand-accent); border-radius: var(--radius-full); transition: width var(--speed-slow) var(--ease); }
.progress__fill--warning { background: var(--warning); }
.progress__fill--danger  { background: var(--danger); }
.progress__fill--success { background: var(--success); }
/* A progress bar used as a small meter in a table cell rather than a full-width
   bar: fixed width, pushed to the right edge of its column. */
.progress--meter { width: 80px; margin-left: auto; }

/* A QR code has to sit on white whatever the page theme is, or a scanner cannot
   read it. This is functional, not decorative — do not make it themeable. */
.qr-frame {
    display: inline-block;
    padding: var(--sp-3);
    border-radius: var(--radius);
    background: #fff;
}


/* 17  Tabs, dropdowns, modals, tooltips ----------------------------------- */

.tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-5);
    overflow-x: auto;
}
.tabs__item {
    position: relative;
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--speed-fast) var(--ease);
}
.tabs__item:hover { color: var(--text); }
.tabs__item.is-active { color: var(--text); }
.tabs__item.is-active::after {
    content: '';
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: -1px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 2px 2px 0 0;
}

.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 210px;
    padding: var(--sp-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--speed-fast) var(--ease),
                transform var(--speed-fast) var(--ease),
                visibility var(--speed-fast);
}
.dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__menu--left { right: auto; left: 0; }

/* Wide enough for a notice title and a timestamp without wrapping to three
   lines, capped so it cannot outgrow a phone. */
.dropdown__menu--wide { min-width: min(340px, calc(100vw - var(--sp-8))); }

.dropdown__empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* A notice in the bell menu: the whole row is the submit button, because the
   action is "read this and go to it" and a separate link would be a second
   target for the same intent. */
.dropdown__notice {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    width: 100%;
    padding: var(--sp-3);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
}
.dropdown__notice:hover { background: var(--surface-hover); color: var(--text); }
.dropdown__notice.is-unread { color: var(--text); }
.dropdown__notice.is-unread .dropdown__notice-title { font-weight: 600; }
.dropdown__notice-text { min-width: 0; }
.dropdown__notice-title {
    display: block;
    font-size: var(--text-sm);
    line-height: 1.4;
}
.dropdown__notice-meta { display: block; font-size: var(--text-xs); color: var(--text-faint); }

/* The unread count on the bell. Positioned on the button, which is why the
   button needs a containing block of its own. */
.bell { position: relative; overflow: visible; }
.bell__dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.dropdown__item:hover { background: var(--surface-hover); }
.dropdown__item--danger { color: var(--danger); }
.dropdown__divider { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-violet), var(--brand-accent));
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}
.avatar--sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-base); }

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(4, 9, 15, 0.72);
    backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }
.modal__dialog {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--sp-8));
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: modal-in var(--speed) var(--ease-out);
}
.modal__dialog--wide { max-width: 860px; }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.modal__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); border-bottom: 1px solid var(--border); }
.modal__title { margin: 0; font-size: var(--text-lg); }
.modal__close { margin-left: auto; }
.modal__body { padding: var(--sp-5); }
.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-inset);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.tooltip { position: relative; }
.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-xs);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed-fast) var(--ease);
}
.tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }


/* 18  Pagination, breadcrumbs, empty states ------------------------------- */

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.pagination__info { color: var(--text-muted); font-size: var(--text-sm); margin-right: auto; }
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding-inline: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}
.pagination__link:hover { border-color: var(--border-strong); color: var(--text); }
.pagination__link.is-active { background: var(--text); border-color: transparent; color: var(--bg); }
.pagination__link.is-disabled { opacity: 0.4; pointer-events: none; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--sp-2); color: var(--text-faint); }

.empty { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--text-muted); }
.empty__icon { width: 44px; height: 44px; margin: 0 auto var(--sp-4); color: var(--text-faint); opacity: 0.7; }
.empty__title { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.empty__text { max-width: 42ch; margin-inline: auto; margin-bottom: var(--sp-5); }

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--edge-light);
}
.filters .field { margin: 0; min-width: 150px; }
.filters .label { margin-bottom: var(--sp-1); font-size: var(--text-xs); }
.filters__actions { margin-left: auto; display: flex; gap: var(--sp-2); }


/* 19  Code, key/value, copy fields, terminal ------------------------------ */

code {
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: var(--surface-muted);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.88em;
    word-break: break-word;
}

pre {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--radius);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    overflow-x: auto;
}
pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
pre .tok-key { color: var(--brand-accent); }
pre .tok-str { color: #86EFAC; }
pre .tok-num { color: var(--brand-amber); }
pre .tok-com { color: var(--text-faint); font-style: italic; }
pre .tok-fn  { color: var(--brand-violet-lt); }

/* MagicUI's terminal block — a window chrome around a monospace transcript. */
.terminal {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-inset);
    overflow: hidden;
    box-shadow: var(--edge-light), var(--shadow);
}
.terminal__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-glass);
}
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal__dot--red { background: #FF5F57; }
.terminal__dot--amber { background: #FEBC2E; }
.terminal__dot--green { background: #28C840; }
.terminal__name {
    margin-left: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: var(--font-mono);
}
.terminal__body {
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.8;
    overflow-x: auto;
}
.terminal__line { display: block; white-space: pre; }
.terminal__prompt { color: var(--brand-accent); }
.terminal__out { color: var(--text-muted); }
.terminal__ok { color: var(--success); }

.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--sp-2) var(--sp-5); font-size: var(--text-md); }
.kv__key { color: var(--text-muted); }
.kv__value { font-weight: 500; word-break: break-word; }

.copy-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    overflow: hidden;
}
.copy-field__value {
    flex: 1;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: nowrap;
    overflow-x: auto;
    background: none;
    border: 0;
    color: var(--text);
}
.copy-field__value:focus { outline: none; }
.copy-field__btn {
    flex-shrink: 0;
    padding-inline: var(--sp-3);
    border: 0;
    border-left: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.copy-field__btn:hover { background: var(--surface-hover); color: var(--text); }
.copy-field__btn.is-copied { background: var(--success); color: #04241A; }

.secret { font-family: var(--font-mono); letter-spacing: 0.04em; }
.secret[data-masked='true'] { color: transparent; text-shadow: 0 0 7px var(--text-muted); user-select: none; }


/* 20  Offer cards and wall preview ---------------------------------------- */

.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }

.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--edge-light);
    transition: transform var(--speed-fast) var(--ease),
                box-shadow var(--speed-fast) var(--ease),
                border-color var(--speed-fast) var(--ease);
}
.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--edge-light), var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand-accent) 40%, transparent);
}

.offer-card__top { display: flex; gap: var(--sp-3); padding: var(--sp-4); }
.offer-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--surface-muted);
    flex-shrink: 0;
}
.offer-card__name {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.offer-card__meta { font-size: var(--text-xs); color: var(--text-faint); }
.offer-card__body { padding: 0 var(--sp-4) var(--sp-4); flex: 1; }
.offer-card__desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.offer-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface-inset);
}
.offer-card__payout {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--success);
}
.offer-card__badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.offer-card__ribbon { position: absolute; top: var(--sp-3); right: var(--sp-3); }

.wall-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-inset);
    box-shadow: var(--edge-light), var(--shadow);
}
.wall-preview__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-glass);
    border-bottom: 1px solid var(--border);
}
.wall-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.wall-preview__url {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wall-preview iframe { display: block; width: 100%; height: 620px; border: 0; background: #FFFFFF; }
.wall-preview--phone { max-width: 380px; }
.wall-preview--phone iframe { height: 700px; }


/* -- The offerwall customiser: controls beside a sticky live preview. -- */

.customiser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--sp-6);
    align-items: start;
}
.customiser__preview {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-4));
}
@media (max-width: 1200px) {
    .customiser { grid-template-columns: minmax(0, 1fr); }
    .customiser__preview { position: static; }
}


/* 21  Marketing sections -------------------------------------------------- */

.hero {
    position: relative;
    padding-block: var(--sp-32) var(--sp-24);
    overflow: hidden;
    isolation: isolate;
}
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 860px; margin-inline: auto; }
.hero h1 {
    font-size: clamp(2.5rem, 6.5vw, var(--text-6xl));
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: var(--sp-6);
}
.hero .lead { font-size: var(--text-xl); max-width: 58ch; margin-inline: auto; margin-bottom: var(--sp-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.hero__note { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-faint); }

.hero--split .hero__inner { text-align: left; margin-inline: 0; }
.hero--split .hero .lead { margin-inline: 0; }
.hero--split .hero__actions { justify-content: flex-start; }

/* The screenshot/preview that sits under a hero, tilted into the page. */
.hero__showcase {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: var(--sp-16) auto 0;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--edge-light), var(--shadow-xl);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.feature {
    padding: var(--sp-6);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--edge-light);
    transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.feature:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
    color: var(--brand-accent);
}
/* Beside a line of text rather than above a paragraph: smaller, and without the
   bottom margin that separates it from a heading underneath. */
.feature__icon--sm { width: 36px; height: 36px; margin-bottom: 0; }
/* Centred in an empty state or a centred card. */
.feature__icon--center { margin-inline: auto; }

.feature__icon--violet {
    background: color-mix(in srgb, var(--brand-violet) 16%, transparent);
    border-color: color-mix(in srgb, var(--brand-violet) 30%, transparent);
    color: var(--brand-violet-lt);
}
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.feature p { color: var(--text-muted); font-size: var(--text-md); margin: 0; }

.steps { counter-reset: step; display: grid; gap: var(--sp-6); }
.step { display: flex; gap: var(--sp-4); }
.step__num {
    counter-increment: step;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 32%, transparent);
    color: var(--brand-accent);
    font-weight: 600;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--text-base); margin-bottom: var(--sp-1); }
.step p { color: var(--text-muted); margin: 0; font-size: var(--text-md); }

.cta {
    position: relative;
    overflow: hidden;
    padding: var(--sp-16) var(--sp-8);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--surface-glass);
    box-shadow: var(--edge-light);
    text-align: center;
}
.cta h2 { font-size: clamp(1.75rem, 4vw, var(--text-4xl)); }
.cta p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }

.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-5) 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq__q svg { flex-shrink: 0; color: var(--text-faint); transition: transform var(--speed) var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--sp-5); color: var(--text-muted); max-width: 72ch; }
.faq__a[hidden] { display: none; }

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
    box-shadow: var(--edge-light);
}
.price-card--featured { border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent); }
.price-card__price {
    font-size: var(--text-4xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}
/*
 * The card is a column flexbox, so a badge — which is display:flex — stretches
 * to the full card width unless it is told not to. The buttons below it do want
 * that stretch, which is why this is on the badge and not on the container.
 */
.price-card > .badge { align-self: flex-start; }
.price-card__unit {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-muted);
    /* The price sets -0.04em, which at 48px computes to -1.92px and inherits
       verbatim into this 15px span — nearly the whole width of its spaces. */
    letter-spacing: normal;
}
.price-card__list { list-style: none; margin: var(--sp-5) 0; padding: 0; flex: 1; }
.price-card__list li {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-2) 0;
    font-size: var(--text-md);
    color: var(--text-muted);
}
.price-card__list li svg { color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* Error pages — 404, 500 and the rest, one template.
 *
 * Centred and given real vertical space, because the previous version had none
 * of either: it used the skeleton theme's `.page__title` and rendered flush
 * against the left edge of the viewport. */
.error-page { padding: var(--sp-12) 0 var(--sp-16); text-align: center; }
.error-page__code {
    display: block;
    margin-bottom: var(--sp-4);
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    /* Large enough to be the graphic, quiet enough not to be the message. */
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.error-page__title { margin: 0 0 var(--sp-3); font-size: var(--text-2xl); }
.error-page__hint {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.6;
}
.error-page__actions { justify-content: center; margin-top: var(--sp-8); }

@media (max-width: 480px) {
    .error-page { padding: var(--sp-8) 0 var(--sp-12); }
    .error-page__code { font-size: var(--text-4xl); }
}

/* Auth card. */
.auth {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-6) var(--sp-4);
    overflow: hidden;
}
.auth__card { position: relative; z-index: 2; width: 100%; max-width: 430px; }
.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--text);
}
.auth__brand img { width: 30px; height: 30px; }
.auth__title { text-align: center; font-size: var(--text-xl); margin-bottom: var(--sp-1); }
.auth__sub { text-align: center; color: var(--text-muted); font-size: var(--text-md); margin-bottom: var(--sp-6); }
.auth__foot { margin-top: var(--sp-5); text-align: center; font-size: var(--text-md); color: var(--text-muted); }
.auth__terms {
    margin: var(--sp-4) 0 0;
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-faint);
}
.auth__split {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block: var(--sp-5);
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.auth__split::before, .auth__split::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* A label with something on the right of it — "Password ......... Forgot it?".
   The link belongs on the label line, not under the input, where it competes
   with the hint text and gets missed. */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.label-row__link { font-size: var(--text-sm); color: var(--text-muted); }
.label-row__link:hover { color: var(--brand-accent); }

/* Checkbox with its own label beside it. The input keeps its native look and
   size — a restyled checkbox that loses the focus ring or the indeterminate
   state is a worse checkbox. */
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-md);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.checkbox input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--brand-accent); cursor: pointer; }

.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.role-picker__option { position: relative; }
.role-picker__option input { position: absolute; opacity: 0; }
.role-picker__box {
    display: block;
    height: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.role-picker__box:hover { border-color: var(--text-faint); }
.role-picker__option input:checked + .role-picker__box {
    border-color: var(--brand-accent);
    background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
}
.role-picker__option input:focus-visible + .role-picker__box { box-shadow: var(--ring); }
.role-picker__title { font-weight: 600; display: block; margin-bottom: 2px; }
.role-picker__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }
@media (max-width: 480px) { .role-picker { grid-template-columns: 1fr; } }


/* 22  Utilities ----------------------------------------------------------- */

.u-hidden { display: none !important; }
.u-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.u-muted   { color: var(--text-muted); }
.u-subtle  { color: var(--text-subtle); }
.u-faint   { color: var(--text-faint); }
.u-success { color: var(--success); }
.u-danger  { color: var(--danger); }
.u-warning { color: var(--warning); }
.u-accent  { color: var(--brand-accent); }

.u-xs { font-size: var(--text-xs); }
.u-sm { font-size: var(--text-sm); }
.u-lg { font-size: var(--text-lg); }
.u-bold { font-weight: 600; }
.u-normal { font-weight: 400; }
.u-upper { text-transform: uppercase; letter-spacing: 0.08em; }
.u-nowrap { white-space: nowrap; }
.u-break { word-break: break-word; overflow-wrap: anywhere; }

/* Keep the newlines somebody typed, without trusting their markup. Paired with
   e(), this is how user-written text is shown with its shape intact — the
   contact inbox would otherwise run every paragraph together. */
.u-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-block  { display: block; }

.u-mt-0 { margin-top: 0; }              .u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }    .u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }    .u-mt-12 { margin-top: var(--sp-12); }
.u-mb-0 { margin-bottom: 0; }           .u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-4 { margin-bottom: var(--sp-4); } .u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-8 { margin-bottom: var(--sp-8); } .u-mb-12 { margin-bottom: var(--sp-12); }

.u-flex { display: flex; }
.u-grow { flex: 1; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-4 { gap: var(--sp-4); }
.u-items-center { align-items: center; }
.u-full { width: 100%; }
.u-relative { position: relative; }

@media (max-width: 780px)  { .u-hide-sm { display: none !important; } }
@media (max-width: 1100px) { .u-hide-md { display: none !important; } }


/* 23  Motion and print ---------------------------------------------------- */

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

/* The readiness checklist on an offer ------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__mark { color: var(--warning); display: flex; }
.checklist__item.is-done .checklist__mark { color: var(--success); }
.checklist__item.is-done { color: var(--text-muted); }
.checklist__hint {
    display: block;
    margin-top: var(--sp-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* One format, as a link on the chooser rather than a radio in a form. */
.format--link { display: block; text-decoration: none; color: inherit; }
.format--link:hover { border-color: var(--border-strong); }
.format__setup {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    margin-top: var(--sp-2);
    color: var(--brand-accent);
    font-size: var(--text-xs);
}

/* The multi-select that replaced <select multiple> ------------------------ */

.picker {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-inset);
    padding: var(--sp-3);
}
.picker__search { margin-bottom: var(--sp-2); }
.picker__presets { margin-bottom: var(--sp-2); }
.picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.picker__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 2px var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-xs);
}
.picker__chip button {
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    padding: 0;
}
.picker__chip button:hover { color: var(--danger); }
.picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px var(--sp-3);
    max-height: 220px;
    overflow-y: auto;
}
.picker__opt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    cursor: pointer;
}
.picker__opt:hover { background: var(--surface-hover); }
.picker__opt input { accent-color: var(--brand-accent); }
.picker__count { font-size: var(--text-xs); color: var(--text-muted); }

/* Recovery codes: ten of them, meant to be read aloud or printed ---------- */

.codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
}
.codes li {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    letter-spacing: .06em;
    text-align: center;
}

/* An invoice, on screen and on paper -------------------------------------- */

.invoice {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--sp-8);
}
.invoice__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}
.invoice__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.invoice__issuer { margin-top: var(--sp-3); line-height: 1.5; }
.invoice__meta { min-width: 240px; }
.invoice__title { margin: 0 0 var(--sp-3); font-size: var(--text-2xl); }
.invoice__parties {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    padding: var(--sp-6) 0;
    line-height: 1.6;
}
.invoice__label {
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--sp-2);
}
.invoice__lines tfoot th { border-top: 2px solid var(--border-strong); }
.invoice__foot { margin-top: var(--sp-6); line-height: 1.6; }
.invoice__foot p { margin: 0 0 var(--sp-2); }

@media (max-width: 640px) {
    .invoice { padding: var(--sp-5); }
    .invoice__parties { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

@media print {
    .sidebar, .topbar, .site-header, .site-footer,
    .page-head__actions, .filters, .pagination, .btn { display: none !important; }
    .shell { grid-template-columns: 1fr; }
    body { background: #FFFFFF; color: #000000; }
    .card { border-color: #CCCCCC; box-shadow: none; break-inside: avoid; background: none; }
    .table thead th { background: #F2F2F2; }

    /* The document IS the page: no card chrome, no rounded corners, no dark
       ground, and nothing clipped at a page break. */
    .invoice {
        border: 0;
        border-radius: 0;
        background: none;
        padding: 0;
        color: #000000;
    }
    .invoice__head, .invoice__parties { border-color: #CCCCCC; }
    .invoice__issuer, .invoice__label, .u-muted, .kv__key { color: #444444 !important; }

    /* Display headings are painted with a clipped gradient, which prints as
       almost nothing — the word "Invoice" came out a pale ghost. On paper they
       are just black text. */
    h1, h2, h3, .invoice__title {
        background: none !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000;
    }
    .invoice__actions { display: none !important; }
    .table-wrap { overflow: visible; }
    a { color: #000000; text-decoration: none; }
}

/* -- Viewing as somebody else -------------------------------------------- */
/* Deliberately the loudest thing on the page. Staff reading a partner's
   numbers must never wonder whose they are, and the failure mode of a quiet
   badge is that it stops being seen. */
.impersonation {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    background: var(--warning);
    color: #0b1220;
    font-size: var(--text-sm);
}
.impersonation__icon { display: flex; }
.impersonation__text { flex: 1 1 16rem; }
.impersonation__meta { display: block; opacity: 0.75; font-size: var(--text-xs); }
.impersonation__stop { margin-left: auto; }
.impersonation .btn {
    background: #0b1220;
    color: #fff;
    border-color: #0b1220;
}
@media print { .impersonation { display: none; } }