/* ---------------------------------------------------------------------------
   VUTT Optical — design tokens.
   Restyling the site should mean editing this block and little else.
   The palette follows the storefront at night: near-black ground, chrome type,
   and the red from the signage as the one accent that carries weight.
   --------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Brand */
    --brand: #9e1b28;
    --brand-strong: #7c111c;
    --brand-bright: #d1414d;
    --brand-soft: rgba(158, 27, 40, .18);
    --brand-line: rgba(200, 60, 72, .45);

    /* Ground */
    --bg: #0b0a0a;
    --surface: #161413;
    --surface-raised: #1e1b1a;
    --surface-sunken: #100e0e;
    --line: #2d2827;
    --line-strong: #443d3b;

    /* Type */
    --ink: #f3eeea;
    --ink-muted: #a79e99;
    --ink-faint: #7b716d;

    /* Status */
    --ok: #4fc98d;
    --ok-soft: rgba(79, 201, 141, .13);
    --ok-line: rgba(79, 201, 141, .35);
    --warn: #e3a94a;
    --warn-soft: rgba(227, 169, 74, .13);
    --warn-line: rgba(227, 169, 74, .35);
    --stop: #f0705f;
    --stop-soft: rgba(240, 112, 95, .13);
    --stop-line: rgba(240, 112, 95, .35);

    /* Shape & type.
       The storefront is all straight edges and squared signage — the UI follows it.
       Everything that used to be a pill or a circle now uses --radius-tag / --radius-mark,
       so the whole site's roundness is still a three-line change. */
    --radius: 3px;
    --radius-sm: 2px;
    --radius-tag: 2px;
    --radius-mark: 3px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --content-width: 720px;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
}

h1, h2, h3 { line-height: 1.22; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.35rem); letter-spacing: -.022em; }
h2 { font-size: 1.22rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-bright); }
a:hover { color: #e4626d; }

.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Public chrome ------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: 2;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 118px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }

/* The logo art is mid-grey chrome; a touch of lift keeps it crisp on black. */
.brand img {
    display: block;
    height: 86px;
    width: auto;
    filter: brightness(1.18) contrast(1.06);
}

@media (max-width: 560px) {
    .brand img { height: 60px; }
    .site-header .container { min-height: 88px; }
}

.header-links {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: .92rem;
}

.header-links a { color: var(--ink-muted); text-decoration: none; }
.header-links a:hover { color: var(--ink); }

.header-links .phone {
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
}

.header-links .phone:hover { color: var(--brand-bright); }

/* --- Hero ----------------------------------------------------------------
   The storefront shot is the reason anyone recognises the place, so the hero is
   sized to actually show it: tall enough for the signage and the windows, with
   the scrim kept off the building and concentrated behind the words instead. */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(360px, 44vw, 560px);
    background-color: #000;
    background-image: url("../img/store-hero.jpg");
    background-size: cover;
    /* Biased past centre: trims dead night sky off the top and brings the
       entrance and windows up behind the words, leaving the lit signage in the
       clear air above them. */
    background-position: center 62%;
    border-bottom: 1px solid var(--line);
}

/* Scrim as its own layer: a soft pool under the text, and a fade into the page
   at the bottom so the form card lands on the background rather than the photo. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 10, 10, .62) 0%, rgba(11, 10, 10, .12) 26%, rgba(11, 10, 10, .06) 46%, rgba(11, 10, 10, .74) 82%, var(--bg) 100%),
        radial-gradient(120% 78% at 30% 100%, rgba(11, 10, 10, .82) 0%, rgba(11, 10, 10, .34) 45%, transparent 72%);
}

.hero .container { position: relative; z-index: 1; }

/* Pages with no hero copy (Thanks, Error) get a slim band instead — the card
   covers most of it, so the photo is held right back to read as texture rather
   than as a stray slice of building. */
.hero.is-slim {
    min-height: 150px;
    background-position: center 58%;
}

.hero.is-slim::before {
    background: linear-gradient(180deg, rgba(11, 10, 10, .8) 0%, rgba(11, 10, 10, .88) 55%, var(--bg) 100%);
}

@media (max-width: 700px) {
    .hero {
        min-height: clamp(300px, 76vw, 420px);
        background-image: url("../img/store-hero-small.jpg");
        background-position: center 44%;
    }

    .hero::before {
        background:
            linear-gradient(180deg, rgba(11, 10, 10, .58) 0%, rgba(11, 10, 10, .18) 24%, rgba(11, 10, 10, .34) 52%, rgba(11, 10, 10, .86) 84%, var(--bg) 100%);
    }
}

/* A thin red seam picks up the signage colour. */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand) 30%, var(--brand-bright) 50%, var(--brand) 70%, transparent);
    opacity: .85;
}

.hero .container { padding-top: 52px; padding-bottom: 56px; }
.hero.is-slim .container { padding-top: 34px; padding-bottom: 34px; }

.hero h1 { margin-bottom: .35rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }

.hero .lede {
    max-width: 46ch;
    margin-bottom: 0;
    color: #d8d0cb;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .85);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 11px;
    border-radius: var(--radius-tag);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: #f0aab0;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    margin-top: 46px;
    color: var(--ink-faint);
    font-size: .85rem;
    text-align: center;
    border-top: 1px solid var(--line);
    background: var(--surface-sunken);
}

.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--brand-bright); }

.brand-strip { padding: 34px 0 30px; border-bottom: 1px solid var(--line); }

.brand-strip-label {
    margin: 0 0 18px;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- Brand marquee ---
   One belt drifting edge to edge. The row contains the same list twice and
   shifts by exactly half its own width, so the loop is seamless without
   measuring anything in JS. The duration is set for the whole list: 62 cells at
   136px is an 8432px lap, so ~54px/s lands at about 156s. Change it if you add
   or remove brands and want the speed to stay put. */
.brand-marquee {
    --marquee-duration: 156s;
    position: relative;
    overflow: hidden;
}

.marquee-row {
    display: flex;
    width: max-content;
    animation: brand-marquee var(--marquee-duration) linear infinite;
    will-change: transform;
}

@keyframes brand-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Let someone stop a logo to actually read it. */
.brand-marquee:hover .marquee-row,
.brand-marquee:focus-within .marquee-row { animation-play-state: paused; }

/* Soften both ends so logos arrive and leave rather than popping at the edge. */
.brand-marquee::before,
.brand-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(40px, 8vw, 110px);
    pointer-events: none;
}

.brand-marquee::before { left: 0; background: linear-gradient(90deg, var(--surface-sunken), rgba(16, 14, 14, 0)); }
.brand-marquee::after { right: 0; background: linear-gradient(270deg, var(--surface-sunken), rgba(16, 14, 14, 0)); }

/* 4px of padding either side of a list makes the seam gap match the 8px between
   cells, which the half-width translate depends on. */
.brand-list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

.brand-list li {
    flex: none;
    width: 128px;
    height: 56px;
    padding: 2px 7px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: background .15s;
}

.brand-list li:hover { background: var(--surface-raised); }

/* The logo files are dark artwork on a solid white plate, which is the wrong way
   round for this palette. invert() flips them to white-on-black, brightness()
   lifts the paler wordmarks, and screen blending drops the now-black plate out
   entirely — screening black leaves the backdrop untouched — so what is left is
   the wordmark alone, with no visible tile edge. */
.brand-list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .78;
    filter: grayscale(1) invert(1) brightness(1.45);
    mix-blend-mode: screen;
    transition: opacity .15s;
}

.brand-list li:hover img { opacity: 1; }

@media (max-width: 560px) {
    /* Smaller cells shorten the lap, so the duration comes down to match. */
    .brand-marquee { --marquee-duration: 128s; }
    .brand-list li { width: 104px; height: 46px; }
}

/* No drifting for anyone who has asked motion to stop — the belt becomes a
   plain horizontal scroller, and the duplicate list is dropped. */
@media (prefers-reduced-motion: reduce) {
    .brand-marquee { overflow-x: auto; }
    .marquee-row { animation: none; }
    .marquee-row .brand-list[aria-hidden="true"] { display: none; }
}

/* Fallback until an official logo file is dropped into wwwroot/img/brands. */
.brand-word {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    transition: color .15s;
}

.brand-list li:hover .brand-word { color: var(--ink); }

.footer-info { padding: 34px 20px 46px; }

/* Address/phone on one side, the week on the other; stacked and centred on a phone. */
.footer-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 64px;
    text-align: left;
    margin-bottom: 30px;
}

.footer-col { min-width: 232px; }

.footer-heading {
    margin: 0 0 10px;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.footer-address {
    margin: 0 0 8px;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-address a { font-weight: 600; white-space: nowrap; }

.footer-phone { margin: 0 0 4px; }

.footer-phone a {
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
}

.footer-phone a:hover { color: var(--brand-bright); }

.footer-site { margin: 0; }

.hours { margin: 0; color: var(--ink-muted); }

.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line);
}

.hours-row:last-child { border-bottom: 0; }
.hours-row dt { margin: 0; }
.hours-row dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-row.is-closed dd { color: var(--ink-faint); }

.hours-note { margin: 10px 0 0; font-size: .78rem; color: var(--ink-faint); }

@media (max-width: 560px) {
    .footer-cols { gap: 26px; }
    .footer-col { min-width: 0; width: 100%; max-width: 300px; }
}

.footer-copy { margin: 0; font-size: .8rem; }

main { padding: 0 0 24px; }
main.plain { padding-top: 40px; }

/* Pull the form card up over the hero seam. */
.card-lift { margin-top: -34px; position: relative; z-index: 1; }

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

.lede { color: var(--ink-muted); font-size: 1.05rem; margin-bottom: 28px; }

/* --- Wizard -------------------------------------------------------------- */
.steps {
    display: flex;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    font-size: .79rem;
    letter-spacing: .01em;
    color: var(--ink-faint);
}

.steps li {
    flex: 1;
    padding-top: 9px;
    border-top: 3px solid var(--line);
    transition: border-color .2s, color .2s;
}

.steps li.is-active { border-top-color: var(--brand-bright); color: var(--ink); font-weight: 650; }
.steps li.is-done { border-top-color: var(--brand); color: var(--ink-muted); }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step + .step { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }

/* With JS on, only the active step shows and the dividers are unnecessary. */
[data-wizard="on"] .step { display: none; }
[data-wizard="on"] .step.is-active { display: block; }
[data-wizard="on"] .step + .step { margin-top: 0; padding-top: 0; border-top: 0; }

.step legend {
    padding: 0;
    margin-bottom: 4px;
    font-size: 1.24rem;
    font-weight: 650;
    letter-spacing: -.012em;
}

.step-hint { color: var(--ink-muted); font-size: .93rem; margin-bottom: 20px; }

/* --- Form controls ------------------------------------------------------- */
.field { margin-bottom: 18px; }

.field > label,
.field-label {
    display: block;
    font-size: .88rem;
    font-weight: 650;
    margin-bottom: 6px;
}

.field .hint { display: block; font-weight: 400; color: var(--ink-muted); font-size: .85rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: .97rem;
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}

textarea { min-height: 96px; resize: vertical; }

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

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-bright);
    box-shadow: 0 0 0 3px rgba(209, 65, 77, .22);
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error { border-color: var(--stop); }

.field-validation-error,
.validation-message {
    display: block;
    margin-top: 5px;
    color: var(--stop);
    font-size: .85rem;
}

.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* Radio cards */
.choice-grid { display: grid; gap: 10px; }
.choice-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--surface-raised);
    transition: border-color .15s, background .15s;
}

.choice:hover { border-color: var(--brand-line); }
.choice input { margin: 2px 0 0; accent-color: var(--brand-bright); flex: none; }
.choice:has(input:checked) { border-color: var(--brand-bright); background: var(--brand-soft); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(209, 65, 77, .22); }
.choice .choice-text { font-size: .95rem; font-weight: 550; }
.choice .choice-sub { display: block; font-size: .82rem; color: var(--ink-muted); font-weight: 400; }

/* --- Coverage callout ---------------------------------------------------- */
.callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: .95rem;
}

.callout .callout-icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-mark);
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    margin-top: 1px;
}

.callout p { margin: 0; }
.callout[hidden] { display: none; }

.callout.is-accepted { background: var(--ok-soft); border-color: var(--ok-line); color: #9ee6c3; }
.callout.is-accepted .callout-icon { background: var(--ok); color: #06301d; }
.callout.is-verify { background: var(--warn-soft); border-color: var(--warn-line); color: #f0d29a; }
.callout.is-verify .callout-icon { background: var(--warn); color: #3a2703; }
.callout.is-not-accepted { background: var(--stop-soft); border-color: var(--stop-line); color: #f7b3a8; }
.callout.is-not-accepted .callout-icon { background: var(--stop); color: #431409; }
.callout.is-info { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink-muted); }
.callout.is-info .callout-icon { background: var(--line-strong); color: var(--ink); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font: inherit;
    font-size: .97rem;
    font-weight: 650;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-primary { background: var(--brand); color: #fff; border-color: #b62c39; }
.btn-primary:hover { background: #b12331; color: #fff; }
.btn-secondary { background: var(--surface-raised); color: var(--ink-muted); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn-danger { background: transparent; color: var(--stop); border-color: var(--stop-line); }
.btn-danger:hover { background: var(--stop-soft); }
.btn-sm { padding: 7px 13px; font-size: .87rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.step-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
}

.step-actions .spacer { flex: 1; }

/* --- Emergency notice ----------------------------------------------------
   Deliberately not styled as an error: it must read as standing safety copy
   that is always true, not as something the visitor just did wrong. */
.emergency-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    text-align: left;
    margin: 26px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--stop-line);
    border-left: 3px solid var(--stop);
    border-radius: var(--radius-sm);
    background: var(--stop-soft);
    color: #f6c3ba;
    font-size: .88rem;
    line-height: 1.5;
}

/* [hidden] has to beat the flex display above. */
.emergency-note[hidden] { display: none; }

/* In the hero it sits over the storefront photo, where the translucent wash used on
   the card would turn to mud. Near-opaque backdrop, sized to the lede beside it. */
.hero .emergency-note {
    max-width: 52ch;
    margin: 0 0 20px;
    background: rgba(44, 12, 10, .88);
    border-color: rgba(240, 112, 95, .5);
    color: #f8d2cb;
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

.emergency-mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-mark);
    background: var(--stop);
    color: #431409;
    font-size: .8rem;
    font-weight: 700;
}

/* The confirmation card centres its text; the notice stays a readable block. */
.confirmation .emergency-note { margin: 30px auto 0; max-width: 46ch; }

/* --- Honeypot: off-screen, never displayed to a human --------------------- */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Confirmation -------------------------------------------------------- */
.confirmation { text-align: center; padding: 44px 28px; }

.confirmation .mark {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: var(--radius-mark);
    background: var(--ok-soft);
    border: 1px solid var(--ok-line);
    color: var(--ok);
    display: grid;
    place-items: center;
    font-size: 1.7rem;
}

.confirmation .contact-back { margin-top: 22px; font-size: .93rem; color: var(--ink-muted); }

/* --- Admin --------------------------------------------------------------- */
.admin-header {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.admin-header .container {
    max-width: 1080px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 86px;
}

.admin-header .brand img { height: 60px; }
.admin-header .brand-tag {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--line-strong);
    color: var(--ink-faint);
    font-size: .84rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-header form { margin: 0; display: flex; align-items: center; gap: 14px; }

.admin-header .logout {
    background: none;
    border: 0;
    color: var(--ink-muted);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    padding: 0;
}

.admin-header .logout:hover { color: var(--brand-bright); }

.admin-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.admin-nav .container {
    max-width: 1080px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.admin-nav a {
    padding: 12px 14px;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.admin-nav a:hover { color: var(--ink); }
.admin-nav a.is-active { color: var(--ink); font-weight: 650; border-bottom-color: var(--brand-bright); }

.admin-main { padding-top: 30px; }
.admin-main .container { max-width: 1080px; }

.page-head { margin-bottom: 22px; }
.page-head p { color: var(--ink-muted); margin: 0; }

.admin-card { margin-bottom: 22px; }
.admin-card h2 { margin-bottom: 2px; }
.admin-card .card-hint { color: var(--ink-muted); font-size: .9rem; margin-bottom: 20px; }

.grid-2 { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.stat-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 22px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.stat .stat-value { font-size: 1.95rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.stat .stat-label { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.stat.is-brand .stat-value { color: var(--brand-bright); }
.stat.is-warn .stat-value { color: var(--stop); }

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

table.data th {
    text-align: left;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--line);
}

table.data td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.actions { text-align: right; white-space: nowrap; padding-right: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-tag);
    font-size: .77rem;
    font-weight: 650;
    border: 1px solid transparent;
}

.pill.is-accepted { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.pill.is-verify { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.pill.is-not-accepted { background: var(--stop-soft); border-color: var(--stop-line); color: var(--stop); }
.pill.is-off { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink-faint); }
.pill.is-brand { background: var(--brand-soft); border-color: var(--brand-line); color: #ef9aa2; }

.alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: .93rem;
    border: 1px solid transparent;
}

.alert.is-success { background: var(--ok-soft); border-color: var(--ok-line); color: #9ee6c3; }
.alert.is-error { background: var(--stop-soft); border-color: var(--stop-line); color: #f7b3a8; }
.alert.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: #f0d29a; }
.alert p:last-child { margin-bottom: 0; }
.alert a { color: inherit; }

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.check input { margin: 3px 0 0; accent-color: var(--brand-bright); flex: none; }
.check label { font-weight: 550; font-size: .94rem; }

.login-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(1100px 520px at 50% -8%, rgba(158, 27, 40, .22), transparent 70%),
        var(--bg);
}

.login-card { width: 100%; max-width: 400px; }
.login-card .login-logo { display: block; height: 88px; width: auto; margin: 0 auto 22px; filter: brightness(1.18); }
.login-card .sub { text-align: center; color: var(--ink-muted); font-size: .92rem; margin-bottom: 26px; }

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

.muted { color: var(--ink-muted); }
.small { font-size: .87rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.nowrap { white-space: nowrap; }