/*
  Shiny Dash back office.

  A tool for one operator who needs to find an account fast and be sure of what a destructive button
  will do. The frame is the app's night navy; the working surface stays quiet — white cards on a cool
  grey page, one blue accent, and red reserved for things that destroy data (the app's own red only
  appears as the brand mark and the recording dot). Numbers use the UI face's
  tabular figures so columns line up without monospace.
*/

:root {
    color-scheme: light dark;

    --bg: #EEF0F5;
    --surface: #FFFFFF;
    --sunken: #F6F7FA;
    --hover: #ECEEF4;
    --line: #E0E3EB;
    --line-strong: #C9CEDA;
    --text: #151826;
    --muted: #5B6175;
    --faint: #8E93A5;

    --accent: #0F3460;
    --accent-hover: #0A2647;
    --accent-ink: #FFFFFF;
    --accent-soft: #E4EAF4;
    --accent-mid: #9DB0CF;

    --good: #1F7A4D;
    --good-soft: #E5F4EC;
    --danger: #B3263A;
    --danger-soft: #FBEAEC;

    /* The frame: the app's night navy. Same in both schemes. */
    --brand: #E94560;
    --rail: #1A1A2E;
    --rail-text: #C9CCDA;
    --rail-dim: #7E849C;
    --rail-active: #2A2E4A;
    --rail-mark: #FFFFFF;

    --shadow: 0 1px 2px rgb(21 24 38 / .05), 0 1px 1px rgb(21 24 38 / .03);
    --radius: 12px;
    --radius-sm: 8px;

    --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --code: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Shiny.Blazor.Controls (TableView, dialogs, toasts) pick up the same palette. */
    --shiny-color-primary: var(--accent);
    --shiny-color-on-primary: var(--accent-ink);
    --shiny-color-primary-container: var(--accent-soft);
    --shiny-color-background: var(--bg);
    --shiny-color-surface: var(--surface);
    --shiny-color-on-surface: var(--text);
    --shiny-color-on-background: var(--text);
    --shiny-color-on-surface-variant: var(--muted);
    --shiny-color-surface-container-lowest: var(--surface);
    --shiny-color-surface-container-low: var(--sunken);
    --shiny-color-surface-container: var(--sunken);
    --shiny-color-outline-variant: var(--line);
    --shiny-color-error: var(--danger);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0A0E14;
        --surface: #141925;
        --sunken: #1A2030;
        --hover: #20283A;
        --line: #262E40;
        --line-strong: #343E55;
        --text: #E8EAF0;
        --muted: #9AA2B8;
        --faint: #6E7790;

        --accent: #8FB0E8;
        --accent-hover: #A9C3F0;
        --accent-ink: #0A1428;
        --accent-soft: #1A2A48;
        --accent-mid: #3E5A8C;

        --good: #6FD39D;
        --good-soft: #12291F;
        --danger: #F2929C;
        --danger-soft: #3A1A20;

        --rail: #0C0C18;
        --rail-active: #23263E;

        --shadow: none;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.boot { padding: 3rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Shell ─────────────────────────────────────────────────────────────────────────────────── */

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.admin-shell.bare { display: block; }

.admin-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 0.85rem 1rem;
    background: var(--rail);
    color: var(--rail-text);
}

.admin-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.5rem; color: #FFF; }
.admin-brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14); }
.admin-brand span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.admin-brand small { color: var(--rail-dim); font-weight: 500; font-size: 0.76rem; letter-spacing: 0; }

.admin-nav { display: flex; flex-direction: column; gap: 2px; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--rail-text);
    font-weight: 550;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}

.admin-nav a svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.admin-nav a:hover { background: rgb(255 255 255 / .06); color: #FFF; }
.admin-nav a.active { background: var(--rail-active); color: #FFF; box-shadow: inset 3px 0 0 var(--rail-mark); }
.admin-nav a.active svg { opacity: 1; }

.admin-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.5rem 0;
    border-top: 1px solid rgb(255 255 255 / .08);
    font-size: 0.85rem;
}

.admin-user .avatar { background: var(--rail-active); color: var(--rail-mark); }
.admin-user .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user button.linkish { color: var(--rail-dim); font-size: 0.8rem; }
.admin-user button.linkish:hover { color: #FFF; }

.admin-main { padding: 2rem 2.25rem 5rem; max-width: 1200px; width: 100%; margin: 0 auto; }

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

    .admin-rail {
        position: sticky;
        height: auto;
        z-index: 5;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
    }

    .admin-brand small { display: none; }
    .admin-brand img { width: 28px; height: 28px; }

    .admin-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
    .admin-nav a { white-space: nowrap; padding: 0.4rem 0.6rem; }
    .admin-nav a svg { display: none; }
    .admin-nav a.active { box-shadow: inset 0 -2px 0 var(--rail-mark); }

    .admin-user { margin: 0; padding: 0; border: none; }
    .admin-user .who, .admin-user .avatar { display: none; }

    .admin-main { padding: 1.25rem 1rem 4rem; }
}

/* ── Sign-in ───────────────────────────────────────────────────────────────────────────────── */

.admin-empty { min-height: 100vh; }

/* The sign-in: the dash cam's own view on the left — a night road running at the viewer under the burned-in
   HUD — and the card on a calm panel beside it. On a narrow screen the view shrinks to a band above. */
.signin {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
    background: var(--bg);
}

/* Grid items default to min-width: auto; without this the view's SVG and the card push a phone-width
   page wider than the screen. */
.signin > * { min-width: 0; }

.signin-board {
    --hud: #E8EAF0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem 2.75rem 2.75rem;
    color: var(--hud);
    background:
        radial-gradient(60rem 30rem at 50% 115%, #2A1A3A 0%, transparent 60%),
        linear-gradient(#0B0B18, #1A1A2E 55%, #10101E);
    overflow: hidden;
}

.signin-brand { display: flex; align-items: center; gap: 0.75rem; }
.signin-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.signin-brand span {
    font-family: "Big Shoulders Display", var(--sans);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.road-view { width: min(100%, 640px); align-self: center; height: auto; overflow: visible; }
.road-surface { fill: url(#road-fade); }
.road-edge { stroke: rgb(232 234 240 / .55); stroke-width: .5; fill: none; }
.road-lane { stroke: #F0A22E; stroke-width: .9; stroke-dasharray: 4 5; animation: road-run .9s linear infinite; }
.road-glow { fill: url(#beam); }
.road-lights circle { fill: #FFD9A0; animation: city-blink 3.2s ease-in-out infinite; }
.road-lights circle:nth-child(2n) { animation-delay: 1.1s; }
.road-lights circle:nth-child(3n) { animation-delay: 2s; }
.hud-corner { stroke: var(--hud); stroke-width: .5; fill: none; opacity: .7; }
.hud-text { fill: var(--hud); font: 600 3px var(--code); letter-spacing: .08em; }
.hud-big { fill: #FFFFFF; font: 700 7px var(--sans); letter-spacing: -.02em; }
.hud-unit { fill: rgb(232 234 240 / .7); font: 600 2.4px var(--sans); letter-spacing: .1em; }
.hud-rec { fill: var(--brand); animation: rec-blink 1.4s steps(2, start) infinite; }
.hud-ok { fill: #00FF88; }

@keyframes road-run { to { stroke-dashoffset: -9; } }
@keyframes city-blink { 50% { opacity: .35; } }
@keyframes rec-blink { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    .road-lane, .road-lights circle, .hud-rec { animation: none; }
}

.signin-pitch { max-width: 32rem; }
.signin-eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
}
.signin-pitch h2 {
    margin: 0;
    font-family: "Big Shoulders Display", var(--sans);
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--hud);
}

.signin-panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; }

.login-card { width: min(380px, 100%); }
.login-card h1 { font-size: 1.9rem; margin: 0 0 0.3rem; letter-spacing: -0.03em; }
.login-card .hint { color: var(--muted); margin: 0 0 2rem; }
.login-card label { display: block; margin-bottom: 1.1rem; }
.login-card input { margin-top: 0.4rem; min-height: 46px; font-size: 1rem; }
.login-card button[type="submit"] { width: 100%; min-height: 46px; margin-top: 0.5rem; font-size: 1rem; }

@media (max-width: 860px) {
    .signin { grid-template-columns: 1fr; }
    .signin-board { padding: 1.5rem 1.5rem 1.75rem; gap: 1.25rem; }
    .road-view { width: min(100%, 420px); }
    .signin-pitch h2 { font-size: 1.8rem; }
    .signin-panel { place-items: start stretch; padding: 2rem 1.25rem; }
    .login-card { width: 100%; max-width: 420px; margin: 0 auto; }
}

/* ── Type ──────────────────────────────────────────────────────────────────────────────────── */

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 0.92rem; font-weight: 650; margin: 1.5rem 0 0.5rem; }

.muted { color: var(--muted); }
.error {
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin: 0.75rem 0;
}

.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.page-head > :last-child:not(h1) { margin-left: auto; }
.page-head .back { flex-basis: 100%; order: -1; margin: 0 0 -0.4rem; }
.page-sub { color: var(--muted); font-size: 0.85rem; }

.empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
}

/* ── Controls ──────────────────────────────────────────────────────────────────────────────── */

label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }

input, select {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

a:focus-visible,
button:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
tr.clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1:focus, h1:focus-visible { outline: none; }

.search { position: relative; max-width: 380px; margin-bottom: 1rem; }
.search svg { position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; margin-top: 0.15rem; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.search input { padding-left: 2.2rem; }

.check { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); font-weight: 550; cursor: pointer; }

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    min-height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

button:hover:not(:disabled) { background: var(--hover); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: transparent; }
button.danger:hover:not(:disabled) { background: var(--danger-soft); }
button.linkish { border: none; background: none; color: var(--accent); padding: 0.2rem; min-height: 0; font-weight: 600; }
button.linkish:hover:not(:disabled) { background: none; text-decoration: underline; text-underline-offset: 2px; }
button.linkish.danger { color: var(--danger); }
button:disabled { opacity: .45; cursor: default; }
button svg { width: 16px; height: 16px; }
button.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0; }
.actions .danger:first-of-type { margin-left: auto; }

/* ── Tables: the back office's real interface ──────────────────────────────────────────────── */

.table-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

table.grid { width: 100%; border-collapse: collapse; }

table.grid th, table.grid td {
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.grid thead th {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 600;
    background: var(--sunken);
    white-space: nowrap;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

table.grid tbody tr:last-child > * { border-bottom: none; }
table.grid tr.clickable { cursor: pointer; transition: background-color .1s; }
table.grid tr.clickable:hover { background: var(--hover); }

/* Counts line up so an outlier is visible without reading every row. */
table.grid .num { text-align: right; white-space: nowrap; }
table.grid .email { color: var(--muted); }
table.grid .when { white-space: nowrap; color: var(--muted); }
table.grid .strong { font-weight: 600; }

.person { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; white-space: nowrap; }

.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.row-actions { display: flex; gap: 0.85rem; justify-content: flex-end; }

/* State, said in words with a dot — never colour alone. */
.state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state.ok { color: var(--good); background: var(--good-soft); }
.state.none { color: var(--danger); background: var(--danger-soft); }
.state.info { color: var(--accent); background: var(--accent-soft); }

.candidates { list-style: none; padding: 0; margin: 0.5rem 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 520px; box-shadow: var(--shadow); overflow: hidden; }
.candidates li { display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); }
.candidates li:last-child { border-bottom: none; }
.candidates li > :first-child { flex: 1; }
.candidates em { color: var(--muted); font-style: normal; margin-left: 0.5rem; }

.add-member input { max-width: 380px; }

/* Shiny TableView forms sit in the same card language as the tables. */
.form-card { max-width: 720px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    padding: 0.7rem 1.1rem;
    background: var(--danger);
    color: #FFF;
}
#blazor-error-ui a { color: #FFF; text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }


/* ── Summary strip (AI requests, sign-ins) ─────────────────────────────────────────────────── */

.totals {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.totals > div { padding: 0.8rem 1.25rem; border-right: 1px solid var(--line); }
.totals > div:last-child { border-right: none; }
.totals dt { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.totals dd { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.totals dd.bad { color: var(--danger); }
.totals .shown { align-self: center; margin-left: auto; color: var(--muted); font-size: 0.8rem; border: none; }


/* --- AI requests ---------------------------------------------------------------------------- */

table.grid.ai-facts th { width: 11rem; color: var(--muted); font-weight: 600; font-size: 0.82rem; background: var(--sunken); vertical-align: top; }
.ai-role { margin: 1.25rem 0 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.ai-text {
    margin: 0;
    padding: 0.9rem 1.1rem;
    max-height: 36rem;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--code);
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ai-error { color: var(--danger); background: var(--danger-soft); border-color: transparent; }


/* --- Stats ---------------------------------------------------------------------------------- */

/* Rises are only coloured on the activity tiles, where more is plainly better. In the tables a rise in
   refusals or AI errors is not good news, so the change stays neutral there. */
.stats-caveat { margin: -1rem 0 1.5rem; font-size: 0.85rem; max-width: 70ch; }

/* The four headline tiles each carry their own 30-day chart: one number, one series. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

.stat-tile {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem 0.9rem;
}

.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.stat-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.stat-hero { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin: 0.2rem 0 0.3rem; }
.stat-windows { display: flex; gap: 1.1rem; font-size: 0.82rem; color: var(--muted); }
.stat-windows strong { color: var(--text); font-weight: 650; }

.delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
    color: var(--muted);
    background: var(--sunken);
}
.delta.up { color: var(--good); background: var(--good-soft); }
.delta.down { color: var(--danger); background: var(--danger-soft); }

.trend { margin: 1rem 0 0; }
.trend svg { display: block; width: 100%; height: 72px; overflow: visible; }
.trend-base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend-hit { fill: transparent; }
.trend-bar { fill: var(--accent-mid); transition: fill .1s; }
.trend-bar.today { fill: var(--accent); }
.trend-slot:hover .trend-bar { fill: var(--accent); }
.trend-slot:hover .trend-hit { fill: var(--hover); }
.trend-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--faint); margin-top: 0.35rem; }


.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* The funnel really is a sequence, so its steps are numbered. */
.funnel { list-style: none; margin: 0; padding: 0.5rem 1.2rem; counter-reset: step; }
.funnel li { display: grid; grid-template-columns: 1.6rem 7rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); counter-increment: step; }
.funnel li:last-child { border-bottom: none; }
.funnel li::before { content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.75rem; font-weight: 700; }
.funnel-label { font-weight: 600; }
.funnel-track { height: 12px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.funnel-bar { height: 100%; min-width: 4px; background: var(--accent); border-radius: 999px; }
.funnel-value { display: flex; align-items: baseline; gap: 0.6rem; justify-content: flex-end; min-width: 9rem; }
.funnel-value strong { font-size: 1rem; }
.funnel-value span { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 600px) {
    .funnel li { grid-template-columns: 1.6rem 1fr auto; }
    .funnel-track { grid-column: 2 / -1; grid-row: 2; }
    .funnel-value { min-width: 0; }
}

.funnel-caveat { margin: -0.4rem 0 0.9rem; font-size: 0.85rem; }
.table-scroll { overflow-x: auto; }

.stat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 1rem; align-items: start; margin-top: 2.25rem; }
.stat-groups h2 { margin: 0; padding: 0.9rem 1rem 0.2rem; }

table.stats-grid thead th { background: none; padding-top: 0.4rem; }
table.stats-grid td:first-child { width: 42%; }
table.stats-grid td strong { font-weight: 700; }
.stat-sub { padding-left: 2rem !important; color: var(--muted); font-size: 0.85rem; }
.stat-sub + td, .stat-sub ~ td { font-size: 0.85rem; }
.stat-note { color: var(--faint); font-size: 0.74rem; line-height: 1.35; margin-top: 0.1rem; }
table.grid .stat-snapshot { color: var(--faint); font-size: 0.74rem; text-align: right; }

/* ── Catalog ───────────────────────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 1rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip input { display: none; }

.generate { padding: 1.25rem 1.4rem; margin-bottom: 1.75rem; }
.generate h2 { margin-top: 0; }
.generate .field-label { display: block; margin-top: 0.75rem; }
.generate textarea {
    width: 100%;
    min-height: 5.5rem;
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.generate .summary { color: var(--muted); font-size: 0.85rem; margin: 0.75rem 0; }
.generate input, .generate select { width: 100%; max-width: 480px; }
.generate .actions { margin-bottom: 0; }

.play-notes { color: var(--muted); font-size: 0.85rem; max-width: 70ch; }
table.grid .ua { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cloud ─────────────────────────────────────────────────────────────────────────────────── */

.head-actions { display: flex; gap: 0.6rem; margin-left: auto; }
table.grid .pick { width: 2.25rem; padding-right: 0; }

.meter { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.meter-track { width: 84px; height: 6px; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.meter.over .meter-fill { background: var(--danger); }
.meter.over .meter-text { color: var(--danger); font-weight: 650; }
.meter-text { font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.quota-card { padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; max-width: 720px; }
.quota-card h2 { margin: 0 0 0.75rem; }
.quota-big { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.quota-big .muted { font-size: 1rem; font-weight: 500; }
.quota-bar { display: flex; height: 10px; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; margin: 0.75rem 0; }
.quota-bar .kept { background: var(--accent); }
.quota-bar .unkept { background: var(--accent-mid); }
.quota-bar.over .kept { background: var(--danger); }
.quota-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.82rem; color: var(--muted); }
.quota-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.quota-legend .kept i { background: var(--accent); }
.quota-legend .unkept i { background: var(--accent-mid); }
.quota-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.quota-edit input[type="number"] { width: 8rem; }
.quota-note { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; max-width: 64ch; }

/* ── Email ─────────────────────────────────────────────────────────────────────────────────── */

.compose { padding: 1.25rem 1.4rem; max-width: 820px; margin-bottom: 2rem; }
.compose h2 { margin-top: 0; }
.compose .field { display: block; margin-top: 1rem; }
.compose input[type="text"], .compose textarea { width: 100%; margin-top: 0.4rem; }
.compose textarea {
    min-height: 14rem;
    resize: vertical;
    font: inherit;
    line-height: 1.5;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.recipients { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.recipient { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.3rem 0.2rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.recipient button { border: none; background: none; padding: 0 0.3rem; min-height: 0; color: inherit; font-size: 1rem; line-height: 1; }
.recipient-search { position: relative; max-width: 420px; }
.recipient-search ul { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 0.3rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .35); }
.recipient-search li button { width: 100%; justify-content: flex-start; border: none; text-align: left; min-height: 0; padding: 0.45rem 0.6rem; }
.recipient-search li small { color: var(--muted); margin-left: 0.5rem; }
.preview { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); padding: 1rem 1.25rem; }
.preview-subject { font-weight: 700; margin-bottom: 0.6rem; }
.preview-body p { margin: 0 0 0.8rem; }
.mail-off { padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); max-width: 820px; }