* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg: #06060f;
    --bg2: #0d121a;
    --bg3: #0d121a;
    --accent: #c9a84c;
    --accent2: #e8c76a;
    --text: #ccd6e8;
    --text2: #7a8a9e;
    --gold: #c9a84c;
    --gold2: #e8c76a;
    --gold3: #a07830;
    --water: #1a3a5c;
    --water2: #0d2137;
    --water3: #1a4a70;
    /* Light wave stroke — read against dark water-fills.  The
       canonical --water* trio is too dark to register as a stroke
       on the same surface (#1a4a70 stroke on #1a3a5c fill is
       invisible at small line widths), so the landing's header +
       hero water animations need a brighter blue.  Kept as a named
       var so future stroke surfaces don't drift into yet another
       hand-picked hex.  Documented in docs/visual-style.md alongside
       the canonical water set. */
    --water-stroke: #7ab3d4;

    /* Semantic status colours.  The brand palette carries no native
       success / warning / error hue, so pages historically borrowed
       whichever was at hand: Material (#4caf50 / #f44336 / #ffc107 /
       #2196f3 / #ff9800) and Tailwind (#4ade80 / #f87171) both ended
       up in the tree — three design systems answering one question in
       three different accents, next to a home-grown spread of six
       reds.  These vars are the single answer, expressed in brand
       terms and tuned to one luminance tier (7.9-8.5:1 on --bg2) so a
       row of mixed statuses reads as one family rather than a ransom
       note.

         --ok    verdigris, the patina aged bronze takes.  The nearest
                 thing to a green this brand can own: it sits beside
                 gold without fighting it and belongs to the same
                 workshop vocabulary as the Da Vinci layer.
         --warn  gold — the brand's natural attention accent.
         --err   the error red already established across the tree
                 (order badge "failed", impressum incomplete banner,
                 disk-full meter).  Solid tier: fills, badges, borders.
         --err-text  a lighter red for error TEXT.  --err is only
                 4.70:1 on --bg2 — passing, but the thinnest margin in
                 the palette; error copy sits on tinted red surfaces
                 where that margin disappears, so text takes this
                 brighter twin instead.
         --info  the light water-blue already canonical for readable
                 blue-on-dark.

       The -rgb twins carry the same colours as bare triplets so tinted
       surfaces can say rgba(var(--ok-rgb), 0.15) instead of
       re-hardcoding the hex.  Canvas contexts (Chart.js datasets)
       cannot resolve CSS vars and keep hex literals — those call sites
       are marked where they appear. */
    --ok: #7cbb9f;
    --ok-rgb: 124, 187, 159;
    --warn: #c9a84c;
    --warn-rgb: 201, 168, 76;
    --err: #dc503c;
    --err-rgb: 220, 80, 60;
    --err-text: #ef8f80;
    --info: #7ab3d4;
    --info-rgb: 122, 179, 212;
}
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    line-height: 1.75;
    color-scheme: dark;
    overflow-x: hidden;
}
h1, h2, h3, h4, .logo, .tagline { font-family: 'Cinzel', serif; }
a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--gold); }

/* Header */
.header {
    position: sticky; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 48px;
    background: rgba(6,6,15,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.55) 25%, rgba(201,168,76,0.9) 50%, rgba(201,168,76,0.55) 75%, transparent 100%) 1;
}
.logo-wrap {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
}
.logo-text {
    font-family: 'Cinzel Decorative', serif;
    font-size: 18px;
    color: #f0d878;
    letter-spacing: 0.12em;
    white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 32px; }
/* The header is a single flex row: wordmark, online badge, nav, language
   switch. It was sized against English. Every other language is longer —
   Dutch "PLATFORMEN", French "ACTUALITÉS", Russian "УЧАСТВОВАТЬ" — and at
   1280px, the width most laptops actually have, the row ran out of space:
   the wordmark broke onto two lines and the badge slid under the first nav
   item. Nothing here changes the English layout; it only gives the other
   three room before the row is forced to overflow. */
.logo-wrap, .online-dot, .lang-switch { flex-shrink: 0; }
@media (max-width: 1500px) {
    .header { padding: 16px 22px; gap: 14px; }
    .nav { gap: 16px; }
    .nav a:not(.btn) { font-size: 11px; letter-spacing: 0.08em; }
    .btn { padding: 7px 13px; letter-spacing: 0.08em; font-size: 10.5px; }
    .online-dot { font-size: 9.5px; padding: 3px 9px; gap: 5px; letter-spacing: 0.06em; }
    .lang-switch { gap: 4px; margin-left: 4px; }
    .lang-switch a { font-size: 10.5px; padding: 2px 4px; }
    .logo-text { font-size: 15px; letter-spacing: 0.07em; }
}
@media (max-width: 1240px) {
    .header { padding: 14px 16px; gap: 10px; }
    .nav { gap: 12px; }
    .nav a:not(.btn) { font-size: 10.5px; letter-spacing: 0.05em; }
    .btn { padding: 6px 10px; font-size: 10px; letter-spacing: 0.05em; }
    .online-dot { font-size: 9px; padding: 3px 7px; letter-spacing: 0.04em; }
    .logo-text { font-size: 14px; letter-spacing: 0.05em; }
}
.nav a:not(.btn) { font-family: 'Cinzel', serif; color: #a8bcd4; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.2s; text-decoration: none; }
.nav a:not(.btn):hover { color: var(--gold); }
.lang-switch { display: flex; gap: 8px; margin-left: 10px; }
.lang-switch a {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text2);
    text-transform: uppercase;
}
.lang-switch a:hover { color: var(--gold); }
.lang-switch a.active {
    color: var(--gold);
    border: 1px solid var(--gold);
}
.btn {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 9px 22px;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    font-weight: 700;
}
.btn:hover { background: var(--gold); color: #06060f; }
.btn:focus { outline: none; }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.35);
}
/* Password-toggle eye button — wraps any password <input> so the user
   can reveal what they typed. Two stacked SVGs (open eye / eye-slash)
   swap via the .on class set by the global click handler in
   page_header. Works on /login, /register, future /reset-password. */
.password-wrap {
    position: relative;
}
.password-wrap > input { padding-right: 40px; }
.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--text2);
    line-height: 0;
    display: inline-flex;
    transition: color 0.2s;
    border-radius: 4px;
}
.password-toggle:hover { color: var(--gold); }
.password-toggle:focus { outline: none; }
.password-toggle:focus-visible {
    outline: none;
    color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.35);
}
.password-toggle svg { display: block; }
.password-toggle .eye-off { display: none; }
.password-toggle.on .eye-on  { display: none; }
.password-toggle.on .eye-off { display: block; }
/* Button size/shape modifiers (canonical set, use instead of inline style=) */
.btn-sm { padding: 4px 12px; font-size: 10px; letter-spacing: 0.12em; }
.btn-lg { padding: 16px 52px; font-size: 13px; letter-spacing: 0.2em; }
.btn-full { width: 100%; text-align: center; display: block; }
.btn-danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger:hover { background: transparent; color: var(--err); }
.btn-row { display: flex; gap: 12px; max-width: 400px; margin: 30px auto 0; }
.btn-row .btn { flex: 1; text-align: center; width: auto; }

/* Hero */
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 40px 24px 80px;
    position: relative;
    overflow: hidden;
}
/* Canvas ambient — derives from coming-soon 37-tesseract.js (canonical
   pattern v4a-II) with the tesseract / heartbeat ring / corner flares /
   contact burst stripped. Renders: 150 twinkling stars, scenic
   water-blue → gold halo, 280 chaotic dust grains snapping to the SVG
   triangle's 3 edges on peak, 60 outer particles walking those edges
   with comet tails. 12s cycle, one peak in the middle. */
#ambient-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Brand text + triangle wrap stack above the canvas. */
.hero > * { position: relative; z-index: 2; }
#ambient-bg { z-index: 0; }
/* About-page mini-ambient banner (Variant B). Quieter sibling of the
   landing hero ambient: water-blue radial halo breathing on a 12s
   cycle + ~50 twinkling stars. No triangle anchor, no grains, no
   orbiters. Text remains primary. */
/* About page — same reset-password Position-Held card DNA as the
   physics page. Single outer .about-card box; title + 4 .about-box
   blocks (Mission / How / Open / Belgium) each with a small gold
   uppercase label + body text; CTA buttons; closing caption. Fixed
   ambient canvas behind, anchored on the card outline. */
#about-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.about-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.about-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.about-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.about-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.about-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.about-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.about-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.about-cta p {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.about-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .about-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .about-title { font-size: 22px; }
    .about-box p { font-size: 14.5px; }
    .about-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .about-cta p { font-size: 12.5px; }
}

/* Blog (list + single post) — same Position-Held card DNA as
   /about and /physics. List page: each post is a clickable
   .blog-box with label=date, title, preview, "read more". Single
   post: title + meta box + body box (with prose styling that
   tolerates <h2>/<p>/<a> generated by post body HTML). */
#blog-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.blog-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.blog-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.blog-meta {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 22px;
}
/* Single-post typography. The list page keeps the old title and meta
   treatment; these modifiers apply only to a post being read.

   Cinzel Decorative is a display face for short words — it carries "NEWS"
   on the list. A title that is a whole sentence ("A door opened before
   anyone knocked") falls apart in it at 0.1em tracking, so a post title
   drops to Cinzel and normal tracking and is allowed to wrap on balance.

   Measure is the real fix: .blog-card is 720px wide, so at the previous
   16px the prose ran ~90 characters per line, which is unreadable for
   400 words. 33em at 18px lands near 70. */
.blog-meta--kicker { margin-bottom: 10px; }
/* 26ch, not 20: at 20 the browser had only bad places to break. The Dutch
   title needed three lines, and the Russian one split "до | того" — the
   preposition stranded at the end of a line and its noun starting the next.
   Titles carry soft line-break control in the data: the phrases that must
   not split are joined with U+00A0, so `text-wrap: balance` can only choose
   from breaks the syntax allows. Anyone editing a post title should keep
   those non-breaking spaces or the break lands mid-phrase again.

   One measure cannot serve four languages: the same sentence is 35
   characters in English and 47 in Dutch, so a width that breaks Dutch well
   leaves Russian on a single line. Widths were read off the rendered page
   in each language, not computed — `ch` is the width of the font's zero, so
   it only means anything once Cinzel has actually loaded. */
.blog-title--post {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.03em;
    line-height: 1.25;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-wrap: balance;
}
/* Russian is the shortest of the four here: at 32ch the whole title fits on
   one line, which reads fine but leaves this page looking different from the
   other three. 26ch puts the break on the comma — the strongest break point
   the sentence has — giving "Дверь, открытая до того," / "как постучали"
   rather than stranding the preposition away from its noun. */
:lang(ru) .blog-title--post { max-width: 26ch; }
.blog-rule {
    display: flex;
    justify-content: center;
    margin: 18px auto 26px;
    opacity: 0.55;
}
.blog-rule svg { width: 160px; height: auto; }
/* The prose column, centred inside the card rather than filling it. */
.blog-card .blog-post-body {
    max-width: 33em;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
}
/* Lead paragraph — carries the opening line at a larger size instead of a
   drop cap. A drop cap was the obvious move and is unavailable: every
   bundled woff2 is latin + latin-ext only, so a Russian first letter would
   fall back to a system serif and the two languages would open in
   different faces. */
.blog-card .blog-post-body > p:first-child {
    font-size: 21px;
    line-height: 1.6;
    margin-bottom: 26px;
}
/* Signature. Set apart from the prose by a hairline, not by a box. */
.blog-post-body .blog-post-sig {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(201,168,76,0.25);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-align: right;
}
/* Figures — nothing uses these yet. They exist because the stylesheet has
   no global img reset: the only image rule in the whole file is
   .gallery-figure img, so the first <img> a post body ever carries would
   overflow the 720px card and scroll the phone sideways. */
.blog-post-body figure.blog-fig { margin: 26px 0; }
.blog-post-body figure.blog-fig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.25);
}
.blog-post-body figure.blog-fig figcaption {
    margin-top: 8px;
    font-family: 'Cinzel', serif;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text2);
    text-align: center;
}
.blog-box {
    display: block;
    text-decoration: none;
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
    transition: background 0.2s;
}
.blog-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
a.blog-box:hover {
    background: rgba(201,168,76,0.05);
}
.blog-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.blog-box-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    text-align: left;
}
.blog-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.blog-box-more {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
}
.blog-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.blog-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.blog-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
/* Single-post body — prose styles applied inside the body box.
   Post bodies are HTML (h2, p, a, ul, blockquote, etc.) — keep
   them readable but consistent with the gold/cinzel aesthetic. */
.blog-post-body {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: left;
}
.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3 {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.06em;
    margin: 26px 0 12px;
}
.blog-post-body h1 { font-size: 20px; }
.blog-post-body h2 { font-size: 17px; }
.blog-post-body h3 { font-size: 15px; }
.blog-post-body p { margin: 0 0 16px; }
.blog-post-body a {
    color: var(--accent2);
    text-decoration: underline;
}
.blog-post-body ul, .blog-post-body ol { margin: 0 0 16px 22px; padding: 0; }
.blog-post-body li { margin: 0 0 8px; }
.blog-post-body blockquote {
    margin: 0 0 16px;
    padding: 8px 16px;
    border-left: 2px solid rgba(201,168,76,0.55);
    color: var(--text2);
    font-style: italic;
}
.blog-post-body code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: rgba(201,168,76,0.08);
    padding: 1px 5px;
    border-radius: 3px;
}
@media (max-width: 720px) {
    .blog-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .blog-title { font-size: 22px; }
    .blog-box p { font-size: 14.5px; }
    .blog-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .blog-box-title { font-size: 16px; }
    .blog-box-more { font-size: 10px; letter-spacing: 0.18em; }
    .blog-cta p { font-size: 12.5px; }
    .blog-post-body { font-size: 15px; }
    .blog-title--post { font-size: 24px; max-width: none; }
    .blog-card .blog-post-body { max-width: none; font-size: 17px; }
    .blog-card .blog-post-body > p:first-child { font-size: 18.5px; }
    .blog-rule svg { width: 120px; }
    .blog-post-body .blog-post-sig { font-size: 12px; letter-spacing: 0.14em; }
    .blog-post-body h1 { font-size: 18px; }
    .blog-post-body h2 { font-size: 16px; }
}

/* Press / Media kit — same Position-Held card pattern. Body has a few
   richer slots than other pattern pages: a facts grid (label/value
   pairs), a pull-quote with attribution, and a colour-swatches block.
   Each lives inside a regular .press-box so the divider rhythm
   remains identical to /about, /physics, /news. */
#press-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.press-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.press-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.press-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.press-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.press-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.press-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.press-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: left;
}
.press-box p:last-child { margin-bottom: 0; }
.press-facts-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: 12px 18px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
}
.press-fact-key {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 600;
    align-self: center;
}
.press-fact-val {
    color: var(--text);
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.press-quote-text {
    font-family: 'Cinzel', serif;
    font-style: italic;
    color: var(--gold2);
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 12px;
    text-align: left;
}
.press-quote-author {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
    margin: 0;
    text-align: left;
}
.press-swatches {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 6px;
}
.press-swatch {
    flex: 1; min-width: 140px;
    background: var(--bg);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    padding: 14px;
    text-align: left;
}
.press-swatch-chip {
    height: 44px;
    border-radius: 2px;
    margin-bottom: 10px;
}
.press-swatch-label {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.press-swatch-hex {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--text2);
    letter-spacing: 0.04em;
}
.press-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.press-cta p {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.press-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .press-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .press-title { font-size: 22px; }
    .press-meta { font-size: 13px; }
    .press-box p { font-size: 14.5px; }
    .press-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .press-facts-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .press-fact-key { margin-top: 6px; }
    .press-quote-text { font-size: 16px; }
    .press-cta p { font-size: 12.5px; }
}

/* Gallery — Position-Held card pattern + wider card (820px) to fit
   the responsive photo grid. Photo grid is a free .gallery-grid
   section (not boxed) so tiles stay edge-to-edge inside the card;
   text boxes (Submit / What / Credit) follow the standard rhythm.
   Empty state replaces the grid with a dashed .gallery-empty box. */
#gallery-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.gallery-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.gallery-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.gallery-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.gallery-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 6px;
}
.gallery-figure {
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: left;
}
.gallery-figure img {
    width: 100%; height: 200px;
    object-fit: cover;
    display: block;
}
.gallery-figcap {
    padding: 12px 14px;
    font-family: 'Cinzel', serif;
}
.gallery-figcap-caption {
    color: var(--text);
    font-size: 14px;
    margin: 0 0 6px;
    letter-spacing: 0.04em;
}
.gallery-figcap-meta {
    color: var(--text2);
    font-size: 12px;
    margin: 0;
    letter-spacing: 0.04em;
}
.gallery-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 28px 22px;
    margin: 0 0 6px;
    text-align: center;
    font-family: 'Cinzel', serif;
}
.gallery-empty-title {
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.gallery-empty-text {
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
.gallery-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.gallery-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.gallery-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.gallery-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: left;
}
.gallery-box p:last-child { margin-bottom: 0; }
.gallery-box ul {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.75;
    margin: 6px 0 0 22px;
    padding: 0;
}
.gallery-box li { margin: 4px 0; }
.gallery-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.gallery-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.gallery-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 820px) {
    .gallery-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .gallery-title { font-size: 22px; }
    .gallery-meta { font-size: 13px; }
    .gallery-intro { font-size: 13px; }
    .gallery-box p { font-size: 14.5px; }
    .gallery-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .gallery-figure img { height: 160px; }
    .gallery-cta p { font-size: 12.5px; }
}

/* Gallery submission form (/gallery/submit) + admin moderation queue
   (/admin/gallery). Dark theme, gold/water-blue accents — reuses the
   .gallery-card shell; these rules cover the form fields, status
   banners, and the admin review grid. */
.gallery-banner {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    line-height: 1.6;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 18px 0 6px;
    border: 1px solid rgba(201,168,76,0.3);
}
.gallery-banner-ok {
    color: #bfe6ff;
    background: rgba(70,150,210,0.10);
    border-color: rgba(110,180,230,0.35);
}
.gallery-banner-error {
    color: var(--err-text);
    background: rgba(255,68,68,0.08);
    border-color: rgba(255,68,68,0.35);
}
.gallery-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}
.gallery-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gallery-field-label {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}
.gallery-field input[type="text"],
.gallery-field input[type="email"],
.gallery-field input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 11px 13px;
}
.gallery-field input:focus {
    outline: none;
    border-color: var(--gold);
}
.gallery-field-hint {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    line-height: 1.5;
}
.gallery-moderation-note {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    line-height: 1.6;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(201,168,76,0.14);
}
/* Admin moderation queue */
.admin-card {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 100px auto 40px;
    padding: 38px 34px 30px;
    background: rgba(13,18,26,0.92);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 6px;
    box-sizing: border-box;
}
.admin-card h1 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold);
    font-size: 26px;
    margin: 0 0 6px;
    /* Centred like every other page title on the site — the admin is
       not exempt from the pattern (operator, 2026-07-30). */
    text-align: center;
}
.admin-card > .admin-meta {
    text-align: center;
}
.admin-meta {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    margin: 4px 0;
}
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}
.admin-tab {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text2);
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    padding: 7px 14px;
}
.admin-tab.active,
.admin-tab:hover {
    color: var(--gold);
    border-color: var(--gold);
}
.admin-empty {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 28px 0;
    text-align: center;
}
.admin-back { margin-top: 24px; padding-bottom: 4px; }
.admin-back a {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.admin-back a:hover { color: var(--gold); }
.btn-small { font-size: 12px; padding: 8px 14px; }
.admin-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}
.admin-gallery-row {
    display: flex;
    gap: 16px;
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.16);
    border-radius: 5px;
    padding: 14px;
}
.admin-gallery-thumb {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
    background: #000;
}
.admin-gallery-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Cinzel', serif;
    color: var(--text);
    font-size: 13px;
    min-width: 0;
}
.admin-gallery-caption { color: var(--text); font-size: 14px; }
.admin-gallery-meta { color: var(--text2); font-size: 12px; line-height: 1.5; }
.admin-gallery-status {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid currentColor;
}
.admin-gallery-status-pending  { color: var(--gold); }
.admin-gallery-status-approved { color: #6ec5a0; }
.admin-gallery-status-rejected { color: #ff6b6b; }
.admin-gallery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.admin-gallery-actions form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.admin-gallery-order { width: 70px; }
.admin-gallery-reason { width: 200px; max-width: 100%; }
.admin-gallery-order,
.admin-gallery-reason {
    background: rgba(6,6,15,0.9);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    padding: 7px 10px;
}
@media (max-width: 820px) {
    .admin-gallery-row { flex-direction: column; }
    .admin-gallery-thumb { width: 100%; height: 200px; }
    .admin-gallery-reason { width: 100%; }
}

/* Changelog — Position-Held card pattern; each release becomes a
   .changelog-box whose label carries version + date + scope pill,
   and whose body is a stack of grouped sub-sections (Added / Fixed
   / ...) with their bullet lists. Subscribe to release-notes is the
   closing CTA. Scope pill colour preserves the original water /
   gold / gold-light coding (server / firmware / both). */
#changelog-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.changelog-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.changelog-lang-note {
    margin-top: -6px;
    font-size: 12.5px;
    opacity: 0.62;
}
.changelog-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.changelog-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.changelog-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.changelog-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 28px 22px;
    margin: 0 0 6px;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
}
.changelog-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.changelog-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.changelog-box-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 12px;
}
.changelog-version {
    font-family: Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold2);
    letter-spacing: 0.04em;
}
.changelog-date {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.changelog-scope {
    margin-left: auto;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 2px 12px;
}
.changelog-group {
    margin-top: 12px;
}
.changelog-group-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--accent2);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.changelog-box ul {
    list-style: none;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
    padding: 0;
}
.changelog-box li {
    position: relative;
    padding-left: 18px;
    margin: 4px 0;
}
.changelog-box li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.changelog-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.changelog-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.changelog-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .changelog-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .changelog-title { font-size: 22px; }
    .changelog-meta { font-size: 13px; }
    .changelog-intro { font-size: 13px; }
    .changelog-version { font-size: 16px; }
    .changelog-scope { margin-left: 0; }
    .changelog-cta p { font-size: 12.5px; }
}

/* Credits — Position-Held card pattern. Entries grouped by category;
   each category becomes a .credits-box (label = category name); the
   box body lists per-dep entries with name + clickable site + license
   pill + role description. Closing boxes for License Note + Thanks. */
#credits-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.credits-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.credits-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.credits-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.credits-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.credits-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.credits-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.credits-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.credits-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.credits-entry {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.credits-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.credits-entry:first-child { padding-top: 4px; }
.credits-entry-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.credits-entry-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold2);
    text-decoration: none;
}
.credits-entry-name:hover {
    color: var(--gold);
    text-decoration: underline;
}
.credits-license {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
}
.credits-role {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 6px 0 0;
}
@media (max-width: 720px) {
    .credits-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .credits-title { font-size: 22px; }
    .credits-meta { font-size: 13px; }
    .credits-intro { font-size: 13px; }
    .credits-box p { font-size: 14.5px; }
    .credits-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .credits-entry-name { font-size: 14px; }
    .credits-license { font-size: 10px; }
    .credits-role { font-size: 12.5px; }
}

/* FAQ — Position-Held card pattern. Questions grouped by category;
   each category becomes a .faq-box (label = category name); the box
   body lists per-question accordion entries (button + collapsible
   answer panel). Buttons keep aria-expanded for keyboard / SR; arrow
   SVG rotates 180deg on open. CTA points to /catalog. */
#faq-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.faq-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.faq-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.faq-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.faq-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.faq-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.faq-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.faq-entry {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.faq-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-entry:first-of-type { padding-top: 0; }
.faq-q {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    text-align: left;
    width: 100%;
    transition: color 0.2s;
}
.faq-q:hover { color: #ffffff; }
.faq-q:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 2px;
}
.faq-q .arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s;
    flex-shrink: 0;
}
.faq-q[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.faq-q[aria-expanded="true"] { color: #ffffff; }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 4px;
}
.faq-a.open {
    max-height: 800px;
    padding: 0 4px 14px;
}
.faq-a p {
    color: var(--text2);
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 14.5px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    margin: 0;
}
.faq-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.faq-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.faq-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .faq-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .faq-title { font-size: 22px; }
    .faq-box-label { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 10px; }
    .faq-box p { font-size: 14.5px; }
    .faq-q { font-size: 13.5px; padding: 10px 2px; }
    .faq-a p { font-size: 13.5px; }
    .faq-cta p { font-size: 12.5px; }
}/* Getting Started — Position-Held card pattern. Each onboarding step is
   a .gs-box whose label row carries "STEP N — TITLE" (gs-step-num is the
   small gold-tinted prefix). Closing .gs-cta holds the Dashboard primary
   button plus a muted FAQ / Contact help line. */
#gs-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.gs-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.gs-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.gs-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.gs-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.gs-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.gs-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.gs-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.gs-step-num {
    color: var(--gold3);
    font-weight: 700;
    letter-spacing: 0.22em;
}
.gs-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.gs-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 18px;
}
.gs-help {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}
.gs-help-link {
    color: var(--accent2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(122,179,212,0.4);
}
.gs-help-link:hover {
    color: var(--gold);
    border-bottom-color: rgba(201,168,76,0.6);
}
@media (max-width: 720px) {
    .gs-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .gs-title { font-size: 22px; }
    .gs-meta { font-size: 13px; }
    .gs-box p { font-size: 14.5px; }
    .gs-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .gs-step-num { letter-spacing: 0.18em; }
    .gs-cta p, .gs-help { font-size: 12.5px; }
}/* Contact — Position-Held card pattern. The whole card is wrapped in
   a single <form> so the .contact-cta submit posts every field with
   the CSRF token. Boxes (top-divided, last bottom-divided): optional
   status banner, Sender (name+email row), Message (textarea), optional
   reCAPTCHA. CTA holds the submit button. */
#contact-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.contact-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.contact-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.contact-form { margin: 0; }
.contact-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.contact-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.contact-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.contact-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.contact-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.contact-status-ok {
    color: var(--ok);
    background: rgba(var(--ok-rgb),0.10);
    border: 1px solid rgba(var(--ok-rgb),0.35);
}
.contact-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.contact-field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.contact-field-row .contact-field { flex: 1; min-width: 220px; }
.contact-field { display: block; }
.contact-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
.contact-input,
.contact-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* Form inputs use the platform sans-serif stack — Cinzel and
       IM Fell English render lowercase as small-caps-ish glyphs at
       form sizes, which made typed text look ALL CAPS and broke
       password recall.  System fonts have a clean lowercase/upper
       distinction. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}
.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
.contact-captcha {
    display: flex;
    justify-content: center;
}
.contact-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.contact-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .contact-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .contact-title { font-size: 22px; }
    .contact-box p { font-size: 14.5px; }
    .contact-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .contact-field-row { gap: 12px; }
    .contact-field-row .contact-field { min-width: 100%; }
    .contact-label { font-size: 11px; }
    .contact-input, .contact-textarea { font-size: 13.5px; padding: 10px 12px; }
    .contact-status { font-size: 12.5px; }
}/* Shipping — Position-Held card pattern. Three boxes (Production /
   Shipping / After Purchase) with a closing CTA to the catalog. The
   middle box is one muted caption, not a rate table: nothing ships
   yet, and the zone rows that used to sit here quoted delivery
   windows and prices that no checkout would ever have charged.
   Carriers note + returns line are muted captions inside their host
   boxes. */
#shipping-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.shipping-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.shipping-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.shipping-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.shipping-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.shipping-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.shipping-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.shipping-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.shipping-box p + p,
.shipping-box .shipping-returns {
    margin-top: 12px;
}
.shipping-carriers {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.6;
    margin: 14px 0 0;
    text-align: left;
}
.shipping-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.shipping-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.shipping-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .shipping-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .shipping-title { font-size: 22px; }
    .shipping-meta { font-size: 13px; }
    .shipping-box p { font-size: 14.5px; }
    .shipping-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .shipping-carriers { font-size: 11.5px; }
    .shipping-cta p { font-size: 12.5px; }
}/* Status — Position-Held card pattern. Live dashboard:
   four .status-box sections (Overall / Components / Metrics /
   Automation endpoints). Overall banner keeps its colored fill
   to carry severity at a glance; component rows use a small dot
   + uppercase badge in the same level colors. Metrics grid is a
   two-up Consolas readout. CTA = manual refresh link. */
#status-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.status-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.status-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.status-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 600px;
}
.status-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.status-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.status-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.status-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: left;
}
/* Overall banner — colored fill set inline via level_bg/border */
.status-overall {
    border: 1px solid rgba(201,168,76,0.30);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.status-overall-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-overall-text { min-width: 0; }
.status-overall-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    letter-spacing: 0.04em;
}
.status-overall-meta {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text2);
    margin-top: 4px;
    letter-spacing: 0.04em;
}
/* Component rows */
.status-row {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.status-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.status-row:first-of-type { padding-top: 4px; }
.status-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.status-row-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-row-text { min-width: 0; }
.status-row-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--gold2);
    letter-spacing: 0.04em;
}
.status-row-extra {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text2);
    margin-top: 3px;
    letter-spacing: 0.04em;
}
.status-row-badge {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    white-space: nowrap;
}
/* Metrics grid */
.status-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.status-metric {
    background: rgba(6,6,15,0.45);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 10px;
    padding: 14px 18px;
}
.status-metric-label {
    font-family: 'Cinzel', serif;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.status-metric-value {
    font-family: Consolas, monospace;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 0.04em;
}
/* API endpoint list */
.status-api-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.status-api-link {
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--gold2);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.status-api-link:hover {
    color: var(--gold);
    text-decoration: underline;
}
/* CTA */
.status-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.status-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.status-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .status-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .status-title { font-size: 22px; }
    .status-meta { font-size: 13px; }
    .status-box p { font-size: 14.5px; }
    .status-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .status-overall { padding: 14px 16px; gap: 12px; }
    .status-overall-title { font-size: 15px; }
    .status-overall-meta { font-size: 11.5px; }
    .status-row { gap: 10px; }
    .status-row-name { font-size: 13.5px; }
    .status-row-extra { font-size: 11.5px; }
    .status-row-badge { font-size: 10px; letter-spacing: 0.18em; }
    .status-metric-value { font-size: 16px; }
    .status-metric-label { font-size: 10px; letter-spacing: 0.18em; }
    .status-api-link { font-size: 12px; }
}

/* Developers — Position-Held card pattern. Card carries an endpoint
   overview box (compact .developers-endpoint-row list with method +
   path + rate pill anchored to per-endpoint detail boxes), then one
   box per endpoint with request/response examples as gold/silver
   Consolas .developers-pre blocks separated by uppercase
   .developers-sublabel rows, followed by Authentication / Versioning
   / Rate Limiting / Terms boxes. Closing .developers-cta exposes the
   mailto:api@chronogate.io primary button. */
#developers-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.developers-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.developers-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.developers-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.developers-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.developers-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.developers-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.developers-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}
.developers-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.developers-box p:last-child { margin-bottom: 0; }
.developers-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.developers-endpoint-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    text-decoration: none;
}
.developers-endpoint-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.developers-endpoint-row:first-child { padding-top: 4px; }
.developers-endpoint-row:hover .developers-path { color: var(--gold); }
.developers-method {
    font-family: Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 2px 8px;
}
.developers-path {
    font-family: Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold2);
    letter-spacing: 0.02em;
}
.developers-rate {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--text2);
    border: 1px solid rgba(138,138,154,0.4);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
}
.developers-endpoint-desc {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text2);
    letter-spacing: 0.04em;
    margin-left: auto;
    text-align: right;
}
.developers-endpoint-title {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-left: auto;
}
.developers-sublabel {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
    margin: 16px 0 6px;
}
.developers-pre {
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 8px;
    padding: 14px 18px;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
}
.developers-pre code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}
.developers-pre-gold {
    background: rgba(201,168,76,0.08);
    border-left: 3px solid var(--gold);
    color: var(--gold2);
}
.developers-pre-silver {
    background: rgba(138,138,154,0.08);
    border-left: 3px solid rgba(138,138,154,0.4);
    color: var(--text2);
}
.developers-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.developers-cta-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.developers-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.developers-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .developers-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .developers-title { font-size: 22px; }
    .developers-meta { font-size: 13px; }
    .developers-intro { font-size: 13px; }
    .developers-box p { font-size: 14.5px; }
    .developers-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .developers-method { font-size: 10px; }
    .developers-path { font-size: 13px; }
    .developers-rate { font-size: 10px; }
    .developers-endpoint-desc { font-size: 12px; margin-left: 0; text-align: left; flex-basis: 100%; }
    .developers-endpoint-title { font-size: 10px; letter-spacing: 0.16em; margin-left: 0; flex-basis: 100%; }
    .developers-sublabel { font-size: 9.5px; letter-spacing: 0.2em; }
    .developers-pre { font-size: 12px; padding: 12px 14px; }
    .developers-cta-title { font-size: 13px; letter-spacing: 0.16em; }
    .developers-cta p { font-size: 12.5px; }
}/* Partners — Position-Held card pattern. Four boxes (Tracks / Offer /
   Looking-for / SLA) with a closing Apply CTA carrying a mailto button.
   Tracks box hosts a responsive .partners-tracks grid (auto-fit, 220px
   min) where each .partners-track tile keeps a gold left-stripe to read
   as a discrete partnership path; offer + looking-for boxes use a
   bulleted .partners-list with gold markers; SLA box is plain prose. */
#partners-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.partners-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.partners-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.partners-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.partners-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.partners-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.partners-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.partners-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.partners-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.partners-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 4px 0 0;
}
.partners-track {
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    padding: 14px 16px;
}
.partners-track-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--gold2);
    margin: 0 0 6px;
}
.partners-track-desc {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin: 0;
}
.partners-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.partners-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.partners-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.partners-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.partners-cta-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.partners-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 0 auto 18px;
    line-height: 1.6;
    max-width: 540px;
}
.partners-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .partners-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .partners-title { font-size: 22px; }
    .partners-meta { font-size: 13px; }
    .partners-intro { font-size: 13px; }
    .partners-box p { font-size: 14.5px; }
    .partners-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .partners-tracks { grid-template-columns: 1fr; gap: 10px; }
    .partners-track { padding: 12px 14px; }
    .partners-track-title { font-size: 13px; }
    .partners-track-desc { font-size: 12.5px; }
    .partners-list { font-size: 13.5px; }
    .partners-cta-title { font-size: 12px; letter-spacing: 0.16em; }
    .partners-cta p { font-size: 12.5px; }
}/* Stand Base — Position-Held card pattern. Boxes: What it is, Status
   (gold uppercase .standbase-badge pill in the label row — honest R&D
   state, mirrors community "planned" badge DNA), Engineering
   (.standbase-list gold-dot bullets), Monolit and the base. Closing
   .standbase-cta carries newsletter + catalog buttons. */
#standbase-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.standbase-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.standbase-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.standbase-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.standbase-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.standbase-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.standbase-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.standbase-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.standbase-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.standbase-badge {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.45);
    border-radius: 999px;
    padding: 3px 12px;
}
.standbase-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.standbase-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.standbase-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.standbase-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.standbase-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 0 auto 18px;
    line-height: 1.6;
    max-width: 540px;
}
.standbase-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .standbase-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .standbase-title { font-size: 22px; }
    .standbase-meta { font-size: 13px; }
    .standbase-intro { font-size: 13px; }
    .standbase-box p { font-size: 14.5px; }
    .standbase-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .standbase-list { font-size: 13.5px; }
}/* Community — Position-Held card pattern. Boxes: Channels (custom
   .community-channel rows with gold/silver tint by availability, name
   link + uppercase pill badge + description), Guidelines paragraph,
   Showcase paragraph, Volunteer .community-list bullets. Showcase
   mailto promoted into closing .community-cta as primary action. */
#community-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.community-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.community-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.community-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.community-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.community-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.community-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.community-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.community-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.community-channel {
    padding: 12px 14px;
    margin: 10px 0;
    border-radius: 6px;
    border-left: 3px solid var(--gold);
    background: rgba(201,168,76,0.06);
}
.community-channel.planned {
    border-left-color: rgba(138,138,154,0.4);
    background: rgba(138,138,154,0.06);
}
.community-channel:first-of-type { margin-top: 0; }
.community-channel:last-of-type { margin-bottom: 0; }
.community-channel-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.community-channel-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold2);
    text-decoration: none;
}
a.community-channel-name:hover {
    color: var(--gold);
    text-decoration: underline;
}
.community-channel.planned .community-channel-name {
    color: var(--text2);
}
.community-channel-badge {
    font-family: Consolas, monospace;
    font-size: 10px;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.community-channel.planned .community-channel-badge {
    color: var(--text2);
    border-color: rgba(138,138,154,0.5);
}
.community-channel-desc {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}
.community-list {
    list-style: none;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
}
.community-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.community-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.community-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.community-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .community-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .community-title { font-size: 22px; }
    .community-meta { font-size: 13px; }
    .community-intro { font-size: 13px; }
    .community-box p { font-size: 14.5px; }
    .community-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .community-channel { padding: 10px 12px; }
    .community-channel-name { font-size: 14px; }
    .community-channel-badge { font-size: 9px; padding: 2px 8px; }
    .community-channel-desc { font-size: 12.5px; }
    .community-list { font-size: 13.5px; }
    .community-cta { margin-top: 22px; padding-top: 18px; }
}

/* Terms of Service — Position-Held card pattern. Five .terms-box sections
   (General / Platforms / Refund / Damaged / Payment); each box label is the
   numbered section title. General gets .terms-box-emphasized (gold left
   stripe) and Payment gets .terms-box-muted (dimmer top divider) to keep
   the original tonal hierarchy. Lists inside the boxes use .terms-list
   with custom gold-dot ::before markers — no default disc bullets. No
   CTA. */
#terms-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.terms-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.terms-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.terms-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.terms-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
/* Box modifiers retired — operator wants uniform box rhythm across
   all sections. Classes kept as no-ops in case markup still emits
   them; the box-level border-top/border-bottom rule below carries
   the entire divider system. */
.terms-box-emphasized,
.terms-box-muted { }
.terms-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.terms-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.terms-box p:last-child { margin-bottom: 0; }
.terms-box strong {
    color: var(--gold2);
    font-weight: 700;
}
.terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.terms-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.terms-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
@media (max-width: 720px) {
    .terms-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .terms-title { font-size: 22px; }
    .terms-box p { font-size: 14.5px; }
    .terms-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .terms-list { font-size: 13.5px; }
}/* Privacy — Position-Held card pattern. Long-form GDPR document distilled
   into one gold-bordered card. Key Points + Contents open the card as
   summary/index, then 11 numbered sections each become a .privacy-box with
   scroll-margin anchor (#privacy-1 ... #privacy-11). Section 2 (Data We
   Collect) splits into 5 .privacy-sub blocks. Section 3 (Processors) keeps
   its 3-column GDPR Art.30 strip as .privacy-processor-row flex (matches
   flex rows, not <table>). Lists everywhere = .privacy-list with
   gold-dot ::before markers; .privacy-list-strong adds bold lead-in for
   Rights section. CTA = single "Back to top" button. */
#privacy-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.privacy-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.privacy-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.privacy-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 13.5px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 14px;
}
.privacy-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
    scroll-margin-top: 80px;
}
.privacy-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.privacy-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.privacy-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.privacy-box p + p {
    margin-top: 10px;
}
.privacy-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.35);
}
.privacy-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.privacy-box strong {
    color: var(--gold2);
    font-weight: 600;
}
.privacy-link {
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
}
.privacy-caption-italic {
    color: var(--text2) !important;
    font-style: italic;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
}
/* Bulleted lists (Key Points, TOC, Retention, Rights) — list-style:none +
   gold-dot ::before markers. Operator wants gold dots everywhere — no
   browser-default disc bullets allowed on any pattern page. */
.privacy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.privacy-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.privacy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.privacy-list-strong li strong {
    color: var(--gold2);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.privacy-toc {
    margin: 0;
}
.privacy-toc-link {
    color: var(--gold2) !important;
    text-decoration: none;
    border-bottom: 0 !important;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
}
.privacy-toc-link:hover {
    color: var(--gold) !important;
    text-decoration: underline;
}
/* Section 2 — sub-block per data category. Each block = small uppercase
   accent2 label + body paragraph, separated by dashed inner divider. */
.privacy-sub {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.privacy-sub:last-child { border-bottom: 0; padding-bottom: 0; }
.privacy-sub:first-of-type { padding-top: 2px; }
.privacy-sub-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--accent2);
    text-transform: uppercase;
    margin-bottom: 6px;
}
/* Section 3 — GDPR Art.30 processor strip. Flex rows replace <table>;
   each row holds Service (gold lead), Purpose, Data Shared. Header row
   is uppercase Cinzel, the same treatment every column header on the
   site gets. */
.privacy-processors {
    margin-top: 4px;
}
.privacy-processor-head,
.privacy-processor-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.privacy-processor-row:last-child { border-bottom: 0; }
.privacy-processor-head {
    border-bottom: 1px solid rgba(201,168,76,0.35);
    padding-top: 2px;
    padding-bottom: 8px;
}
.privacy-processor-head .privacy-processor-service,
.privacy-processor-head .privacy-processor-purpose,
.privacy-processor-head .privacy-processor-data {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
}
.privacy-processor-service {
    flex: 0 0 22%;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--gold2);
    letter-spacing: 0.04em;
    font-weight: 600;
}
.privacy-processor-purpose {
    flex: 1 1 32%;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    color: var(--text);
    letter-spacing: 0.04em;
}
.privacy-processor-data {
    flex: 1 1 36%;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    color: var(--text2);
    letter-spacing: 0.04em;
}
.privacy-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.privacy-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .privacy-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .privacy-title { font-size: 22px; }
    .privacy-meta { font-size: 12.5px; }
    .privacy-box p { font-size: 14.5px; }
    .privacy-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .privacy-list { font-size: 13.5px; }
    .privacy-sub-label { font-size: 11px; letter-spacing: 0.16em; }
    .privacy-processor-head,
    .privacy-processor-row {
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 10px 0;
    }
    .privacy-processor-head .privacy-processor-service,
    .privacy-processor-head .privacy-processor-purpose,
    .privacy-processor-head .privacy-processor-data { font-size: 10px; letter-spacing: 0.18em; }
    .privacy-processor-service { flex-basis: 100%; font-size: 13.5px; }
    .privacy-processor-purpose { flex-basis: 100%; font-size: 12.5px; }
    .privacy-processor-data    { flex-basis: 100%; font-size: 12.5px; }
    .privacy-processor-head .privacy-processor-service,
    .privacy-processor-head .privacy-processor-purpose,
    .privacy-processor-head .privacy-processor-data { flex-basis: auto; }
    .privacy-caption-italic { font-size: 12px !important; }
}/* Cookies — Position-Held card pattern. Card width 720px. Boxes:
   Key Points (gold-dot summary), one per policy section (Essential w/
   single-row .cookies-table; Contextual third-party w/ two
   .cookies-subcard rows; What we do NOT use + Managing browsers w/
   .cookies-list gold-dot bullets; Managing also carries a red-tint
   .cookies-warning panel; Changes paragraph), and Preferences (status
   banner + intro + .cookies-form toggle rows OR login CTA). Closing
   .cookies-cta exposes Privacy Policy + Back-to-top buttons. */
#cookies-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.cookies-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.cookies-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.cookies-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.cookies-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.cookies-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
    scroll-margin-top: 80px;
}
.cookies-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.cookies-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.cookies-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.cookies-box p:last-child { margin-bottom: 0; }
.cookies-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.cookies-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.cookies-box strong { color: var(--text); }
.cookies-box code {
    font-family: Consolas, Menlo, monospace;
    font-size: 0.9em;
    color: var(--gold2);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 4px;
    padding: 1px 6px;
}
/* Gold-dot bullet list (mirrors .partners-list) */
.cookies-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.cookies-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.cookies-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
/* Essential-cookies mini-table */
.cookies-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
}
.cookies-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    text-align: left;
}
.cookies-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border-bottom: 1px solid rgba(201,168,76,0.25);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.cookies-table td {
    padding: 10px 12px;
    color: var(--text2);
    vertical-align: top;
    line-height: 1.6;
}
/* Per-third-party mini-card */
.cookies-subcard {
    background: rgba(201,168,76,0.06);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 10px;
}
.cookies-subcard-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.05em;
    color: var(--gold2);
    margin-bottom: 4px;
}
.cookies-subcard p {
    color: var(--text2);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}
/* Red-tint blocker-warning panel (managing cookies box) */
.cookies-warning {
    background: rgba(var(--err-rgb),0.06);
    border: 1px solid rgba(var(--err-rgb),0.25);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 12px;
}
.cookies-warning p {
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}
/* Status banner inside the Preferences box */
.cookies-banner {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    text-align: left;
}
.cookies-banner-ok {
    color: var(--ok);
    background: rgba(var(--ok-rgb),0.10);
    border: 1px solid rgba(var(--ok-rgb),0.35);
}
.cookies-banner-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.cookies-banner-warn {
    color: #fbbf77;
    background: rgba(251,191,119,0.10);
    border: 1px solid rgba(251,191,119,0.35);
}
/* Granular consent toggle rows */
.cookies-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
}
.cookies-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(201,168,76,0.04);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    text-align: left;
}
.cookies-toggle input[type=checkbox] {
    margin-top: 3px;
    accent-color: var(--gold);
}
.cookies-toggle-locked {
    cursor: not-allowed;
    background: rgba(201,168,76,0.07);
    border-color: rgba(201,168,76,0.3);
    color: var(--text2);
}
.cookies-form-submit {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 8px;
    align-self: flex-start;
}
.cookies-anon-cta {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* CTA — Privacy + Back-to-top */
.cookies-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.cookies-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cookies-cta-secondary {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}
@media (max-width: 720px) {
    .cookies-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .cookies-title { font-size: 22px; }
    .cookies-meta { font-size: 13px; }
    .cookies-intro { font-size: 13px; }
    .cookies-box p { font-size: 14.5px; }
    .cookies-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .cookies-list { font-size: 13.5px; }
    .cookies-table { font-size: 12.5px; }
    .cookies-table th { font-size: 10px; letter-spacing: 0.14em; padding: 8px 10px; }
    .cookies-table td { padding: 8px 10px; }
    .cookies-subcard-title { font-size: 13px; }
    .cookies-subcard p { font-size: 12.5px; }
    .cookies-warning p { font-size: 12.5px; }
    .cookies-banner { font-size: 12.5px; }
    .cookies-toggle { font-size: 13px; }
}/* Legal Notice (Impressum) — Position-Held card pattern. Each
   statutory section becomes a .legal-box (Company / Contact / Legal
   Representation / Dispute / Hosting). Field rows use a 2-col grid
   (.legal-fields with .legal-field-key + .legal-field-val) replacing
   the old inline <table>. No CTA. */
#legal-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.legal-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.legal-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.legal-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.legal-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.legal-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.legal-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.legal-box p:last-child { margin-bottom: 0; }

/* Field rows — 2-col grid mirroring .press-facts-grid. Key column
   (~140px) is the small uppercase gold label; value column carries
   the actual statutory value with normal Cinzel weight. */
.legal-fields {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: 10px 18px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    text-align: left;
}
.legal-field-key {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 600;
    align-self: start;
    padding-top: 2px;
}
.legal-field-val {
    color: var(--text);
    letter-spacing: 0.04em;
    line-height: 1.6;
    word-break: break-word;
}
.legal-link {
    color: var(--accent2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(122,179,212,0.4);
    transition: color 0.18s ease, border-color 0.18s ease;
}
.legal-link:hover {
    color: var(--gold);
    border-bottom-color: rgba(201,168,76,0.7);
}
.legal-link-row { margin-top: 6px; }

/* Last-updated meta — sits below the boxes.
   No box border; small italic muted line, mirrors /credits closing
   meta lines. */
.legal-updated {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--text2);
    letter-spacing: 0.06em;
    margin-top: 22px;
    text-align: center;
}


@media (max-width: 720px) {
    .legal-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .legal-title { font-size: 22px; }
    .legal-box p { font-size: 14.5px; }
    .legal-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .legal-fields {
        grid-template-columns: 1fr;
        gap: 4px 0;
        font-size: 13.5px;
    }
    .legal-field-key { margin-top: 8px; padding-top: 0; font-size: 10px; letter-spacing: 0.16em; }
    .legal-field-val { line-height: 1.55; }
    .legal-updated { font-size: 11px; }
}/* Accessibility — Position-Held card pattern. Public legal statement
   (Belgian Web Accessibility Directive + EN 301 549 + WCAG 2.1 AA).
   Eight .accessibility-box sections framed by gold dividers; status
   box carries a gold pill (.accessibility-badge) marking partial
   compliance. Bullet lists in Measures + Limitations use
   .accessibility-list (gold-dot ::before, no native disc). Closing
   .accessibility-cta holds the mailto to accessibility@chronogate.io. */
#accessibility-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.accessibility-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.accessibility-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.accessibility-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.accessibility-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.accessibility-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.accessibility-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.accessibility-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.accessibility-box p + p {
    margin-top: 10px;
}
.accessibility-badge-row {
    margin: 0 0 12px;
    text-align: left;
}
.accessibility-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--bg);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.accessibility-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.accessibility-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.accessibility-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.accessibility-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.accessibility-cta-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.accessibility-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 0 auto 18px;
    line-height: 1.6;
    max-width: 540px;
}
.accessibility-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .accessibility-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .accessibility-title { font-size: 22px; }
    .accessibility-meta { font-size: 13px; }
    .accessibility-box p { font-size: 14.5px; }
    .accessibility-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .accessibility-badge { font-size: 10px; letter-spacing: 0.14em; padding: 3px 12px; }
    .accessibility-list { font-size: 13.5px; }
    .accessibility-cta-title { font-size: 12px; letter-spacing: 0.16em; }
    .accessibility-cta p { font-size: 12.5px; }
}/* Security disclosures — Position-Held card pattern. Eight boxes (Scope
   with in+out sub-blocks / Report / PGP / Timeline / Rules / Safe harbor /
   Recognition / Machine-readable policy) closed by a CTA carrying the
   security@chronogate.io mailto button. Scope box hosts two .security-scope-*
   sub-blocks with gold (in) + silver (out) tint preserved from the legacy
   design. All bullet + ordered lists use .security-list with custom
   gold-dot ::before markers — no default disc/decimal bullets. */
#security-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.security-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.security-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.security-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.security-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.security-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.security-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.security-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.security-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.security-box p + p { margin-top: 10px; }
.security-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.security-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.security-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
.security-list-silver li { color: var(--text2); }
.security-list-silver li::before { background: rgba(138,138,154,0.7); }
.security-list-ordered {
    counter-reset: sec-step;
}
.security-list-ordered li {
    counter-increment: sec-step;
    padding-left: 28px;
}
.security-list-ordered li::before {
    content: counter(sec-step);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    width: 18px; height: 18px;
    top: 0.3em;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
}
.security-scope-in {
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    padding: 14px 16px;
    margin: 4px 0 12px;
}
.security-scope-out {
    background: rgba(138,138,154,0.06);
    border: 1px solid rgba(138,138,154,0.2);
    border-left: 3px solid rgba(138,138,154,0.5);
    border-radius: 4px;
    padding: 14px 16px;
}
.security-scope-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.security-scope-label-in { color: var(--gold2); }
.security-scope-label-out { color: var(--text2); }
.security-hall-empty {
    font-style: italic;
    color: var(--text2) !important;
    font-size: 14px !important;
}
.security-txt-link-row {
    margin-top: 10px !important;
}
.security-txt-link {
    color: var(--gold2);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding-bottom: 1px;
}
.security-txt-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.security-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.security-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .security-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .security-title { font-size: 22px; }
    .security-meta { font-size: 13px; }
    .security-intro { font-size: 13px; }
    .security-box p { font-size: 14.5px; }
    .security-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .security-list { font-size: 13.5px; }
    .security-list-ordered li { padding-left: 26px; }
    .security-scope-in,
    .security-scope-out { padding: 12px 14px; }
    .security-scope-label { font-size: 11px; letter-spacing: 0.14em; }
    .security-txt-link { font-size: 12.5px; }
}

#catalog-ambient-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.catalog-card{width:100%;max-width:820px;background:rgba(13,18,26,0.85);border:1.5px solid rgba(201,168,76,0.55);box-shadow:0 0 60px rgba(201,168,76,0.12),inset 0 0 30px rgba(201,168,76,0.04);padding:48px 44px 40px;text-align:center;backdrop-filter:blur(2px);position:relative;z-index:2;margin:120px auto 60px}
.catalog-title{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:26px;letter-spacing:0.1em;background:linear-gradient(135deg,var(--gold3) 0%,var(--gold) 40%,var(--gold2) 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:14px}
.catalog-meta{font-family:'Cinzel',serif;font-style:italic;font-size:14px;color:var(--gold2);line-height:1.6;margin-bottom:8px}
.catalog-intro{font-family:'Cinzel',serif;color:var(--text2);font-size:13.5px;line-height:1.7;margin:0 auto 22px;max-width:640px}

/* Configurator — free 2-col section inside the card (mirrors gallery-grid pattern). */
.catalog-configurator{display:grid;grid-template-columns:minmax(300px,1fr) minmax(260px,340px);gap:22px;align-items:start;margin:0 0 10px;text-align:left}
@media (max-width:780px){.catalog-configurator{grid-template-columns:1fr}}
.catalog-stage{display:flex;flex-direction:column;gap:12px}
.catalog-heading{padding:14px 16px}
.catalog-segments-section{padding:14px 16px}
.catalog-picker-section{padding:14px 16px}
.catalog-segment-chip.active{border:2px solid var(--gold);background:rgba(201,168,76,0.08);padding:7px 11px}
.catalog-viewer{background:radial-gradient(ellipse at 50% 40%,var(--water2) 0%,#101a28 45%,var(--bg3) 100%);border:1px solid rgba(201,168,76,0.2);border-radius:6px;overflow:hidden;position:relative;aspect-ratio:1/1}
.catalog-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.catalog-canvas:active{cursor:grabbing}
.catalog-viewer-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text2);font-family:'Cinzel',serif;font-size:13px;pointer-events:none;padding:20px;text-align:center}
.catalog-hint{text-align:center;font-family:'Cinzel',serif;font-size:12px;color:var(--text2);margin-top:10px;letter-spacing:0.04em}
.catalog-panel{display:flex;flex-direction:column;gap:14px}
.catalog-section{background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.18);border-radius:6px;padding:16px 18px;text-align:left}
.catalog-section h3{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;margin:0 0 12px}
.catalog-product-name{font-family:'Cinzel Decorative',serif;font-size:26px;color:var(--gold);letter-spacing:0.08em;margin:0 0 6px}
.catalog-product-sub{font-family:'Cinzel',serif;font-size:13px;color:var(--text2);line-height:1.6;margin:0}
.catalog-main-note{font-family:'Cinzel',serif;font-size:11px;color:var(--text2);margin:0 0 10px;font-style:italic;letter-spacing:0.04em}
.catalog-color-swatches{display:flex;gap:8px;flex-wrap:wrap}
.catalog-color-swatches .color-option{width:28px;height:28px;margin:0;cursor:pointer}
.catalog-color-swatches .color-option input{display:none}
.catalog-seg-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(201,168,76,0.08)}
.catalog-seg-row:last-child{border-bottom:none}
.catalog-seg-label{flex:1;font-family:'Cinzel',serif;font-size:12px;color:var(--text);letter-spacing:0.04em}
/* Painter-mode UI */
.catalog-presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.catalog-preset{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(201,168,76,0.25);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font-family:'Cinzel',serif;font-size:12px;color:var(--text);letter-spacing:0.04em;transition:border-color 0.15s,background 0.15s}
.catalog-preset.unavailable{opacity:.35;filter:grayscale(1);cursor:not-allowed;pointer-events:none}
.catalog-preset:hover{border-color:var(--gold);background:rgba(201,168,76,0.05)}
.catalog-preset:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,0.35)}
.catalog-preset-dots{display:inline-flex;gap:2px;padding:2px 4px}
.catalog-preset-dot{display:inline-block;width:14px;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,0.18)}
.catalog-preset-name{font-weight:600}
.catalog-painter-hint{font-family:'Cinzel',serif;font-style:italic;font-size:11px;color:var(--text2);letter-spacing:0.04em;margin:0 0 8px}
.catalog-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px 4px;padding:10px 0;border-top:1px solid rgba(201,168,76,0.12);border-bottom:1px solid rgba(201,168,76,0.12);margin:0 0 14px}
.catalog-palette-cell{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.catalog-palette .color-option{width:32px;height:32px;margin:0;cursor:pointer;border-radius:50%;position:relative;transition:transform 0.15s}
.catalog-palette .color-option:hover{transform:scale(1.08)}
.catalog-palette .color-option.armed{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 12px rgba(201,168,76,0.55)}
.catalog-palette .color-option input{display:none}
.catalog-palette-name{font-family:'Cinzel',serif;font-weight:600;font-size:9.5px;letter-spacing:0.08em;color:var(--gold);text-transform:uppercase;line-height:1.2;margin-top:4px}
.catalog-palette-desc{font-family:'Cinzel',serif;font-style:italic;font-size:9px;color:var(--text2);line-height:1.25;letter-spacing:0.02em;max-width:80px}
.catalog-segments-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.catalog-segment-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;background:transparent;border:1px solid rgba(201,168,76,0.15);border-radius:6px;cursor:pointer;transition:border-color 0.15s,background 0.15s}
.catalog-segment-chip:hover{border-color:var(--gold);background:rgba(201,168,76,0.05)}
.catalog-segment-chip:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,0.35)}
.catalog-segment-name{flex:1;font-family:'Cinzel',serif;font-size:12px;color:var(--text);letter-spacing:0.04em}
.catalog-segment-color{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);flex-shrink:0;display:inline-block}
.catalog-price-row{display:flex;align-items:baseline;justify-content:space-between;padding:2px 2px 12px}
.catalog-price-label{font-family:'Cinzel',serif;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:0.22em}
.catalog-price{font-family:'Cinzel',serif;font-size:30px;color:var(--gold);font-weight:700}
.catalog-availability{display:flex;gap:1.6rem;padding:0 2px 14px}
.cav-stat{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.cav-num{font-family:'Cinzel',serif;font-size:22px;color:var(--silver);font-weight:700}
.cav-stat:first-child .cav-num{color:var(--gold)}
.cav-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:0.18em;margin-top:3px}
.catalog-actions{display:flex;gap:10px}
.catalog-actions .btn{flex:1}
.catalog-reset{background:transparent!important;border:1px solid var(--gold)!important;color:var(--gold)!important;flex:0 0 auto!important;padding:0 16px!important}
.catalog-waitlist{text-align:center;margin:14px 0 0;font-family:'Cinzel',serif;font-size:13px}
.catalog-waitlist a{color:var(--text2);text-decoration:none;border-bottom:1px dashed var(--text2)}
.catalog-waitlist a:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* Pre-launch: price to be announced + notify-me as the primary CTA. */
.catalog-price-tba{font-family:'Cinzel',serif;font-size:20px;color:var(--text);font-weight:600;letter-spacing:0.04em}
.catalog-notify{text-align:center;margin:16px 0 0}
.btn-notify{display:inline-block;text-decoration:none}
/* Why the Add-to-Cart above is dead. Quiet by design — an explanation, not
   an announcement: hairline gold rule, muted body, no box and no colour of
   its own, so it reads as the footnote to the button rather than a banner
   competing with it. */
.catalog-closed{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(201,168,76,0.28);text-align:left}
.catalog-closed-label{font-family:'Cinzel',serif;font-weight:600;font-size:10.5px;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.catalog-closed p{margin:0;font-family:'IM Fell English',Georgia,serif;font-weight:400;font-size:14.5px;letter-spacing:0.01em;line-height:1.7;color:var(--text2)}

/* Position-Held narrative boxes — same DNA as every other Position-Held page. */
.catalog-box{border-top:1px solid rgba(201,168,76,0.55);padding:22px 0;margin:0;text-align:left}
.catalog-box:first-of-type{margin-top:18px}
.catalog-box:last-of-type{border-bottom:1px solid rgba(201,168,76,0.55)}
.catalog-box-label{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;text-align:left}
.catalog-box p{color:var(--text);font-family:'IM Fell English',Georgia,serif;font-weight:400;font-size:16px;letter-spacing:0.01em;line-height:1.75;margin:0 0 12px;text-align:left}
.catalog-box p:last-child{margin-bottom:0}
/* Inline links inside box bodies get dashed-gold underline; .btn anchors are
   explicitly excluded so the CTA buttons never get a phantom dashed line. */
.catalog-box a:not(.btn){color:var(--gold);text-decoration:none;border-bottom:1px dashed rgba(201,168,76,0.55)}
.catalog-box a:not(.btn):hover{border-bottom-color:var(--gold)}
/* Gold-dot bullets (mirror .partners-list). */
.catalog-box ul{list-style:none;padding:0;margin:6px 0 0}
.catalog-box ul li{color:var(--text);font-family:'IM Fell English',Georgia,serif;font-size:15px;line-height:1.75;letter-spacing:0.01em;padding-left:18px;position:relative;margin:4px 0}
.catalog-box ul li::before{content:'';position:absolute;left:4px;top:0.7em;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0.85}
/* Specifications table — label column in muted silver, value column in body text. */
.catalog-specs{width:100%;border-collapse:collapse;margin:6px 0 0}
.catalog-specs th{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:0.14em;color:var(--text2);text-transform:uppercase;text-align:left;vertical-align:top;padding:7px 18px 7px 0;white-space:nowrap;border-bottom:1px solid rgba(201,168,76,0.15)}
.catalog-specs td{font-family:'Cinzel',serif;font-weight:400;font-size:14px;letter-spacing:0.04em;line-height:1.6;color:var(--text);text-align:left;padding:7px 0;border-bottom:1px solid rgba(201,168,76,0.15)}
.catalog-specs tr:last-child th,.catalog-specs tr:last-child td{border-bottom:none}


@media (max-width:820px){
    .catalog-card{padding:32px 24px 28px;margin:80px auto 40px}
    .catalog-title{font-size:22px}
    .catalog-meta{font-size:13px}
    .catalog-intro{font-size:13px}
    .catalog-product-name{font-size:22px}
    .catalog-price{font-size:26px}
    .catalog-box p{font-size:14.5px}
    .catalog-box-label{font-size:10px;letter-spacing:0.18em}
    .catalog-specs th{white-space:normal;padding-right:10px;font-size:10px}
    .catalog-specs td{font-size:13px}
}/* Experiment Log — Position-Held card pattern. Public hash-chained
   ledger of platform registrations. Single .log-box "Ledger"
   container wraps a stack of .log-entry rows; each row carries a
   head line (id + UTC date + platform-id pill) above a hash line
   (label + 64-char SHA-256 in Consolas). Card widened to 820px so
   the chain hash gets enough horizontal room before wrapping. Empty
   state rendered as dashed .log-empty block in place of the entries
   list. No CTA — log is read-only public evidence. */
#log-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.log-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.log-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.log-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.log-meta .log-count {
    font-family: 'Bebas Neue', sans-serif;
    font-style: normal;
    font-size: 22px;
    color: var(--gold);
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.log-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.log-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.log-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.log-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.log-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.log-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.log-entries {
    display: flex;
    flex-direction: column;
}
.log-entry {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.log-entry:last-child { border-bottom: 0; padding-bottom: 4px; }
.log-entry:first-child { padding-top: 4px; }
.log-entry-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.log-entry-id {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 0.04em;
    min-width: 56px;
}
.log-entry-date {
    font-family: Consolas, monospace;
    font-size: 12.5px;
    color: var(--text2);
    letter-spacing: 0.02em;
}
.log-entry-platform {
    font-family: Consolas, monospace;
    font-size: 11.5px;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
    margin-left: auto;
}
.log-entry-hash-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}
.log-entry-hash-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--gold2);
    text-transform: uppercase;
    min-width: 56px;
}
.log-entry-hash {
    font-family: Consolas, monospace;
    font-size: 12px;
    color: var(--text2);
    letter-spacing: 0.02em;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}
.log-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 8px;
    padding: 36px 20px;
    text-align: center;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
@media (max-width: 720px) {
    .log-card { padding: 32px 24px 28px; margin: 80px auto 40px; max-width: 100%; }
    .log-title { font-size: 22px; }
    .log-meta { font-size: 13px; }
    .log-meta .log-count { font-size: 19px; }
    .log-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .log-box p { font-size: 14.5px; }
    .log-entry { padding: 12px 0; }
    .log-entry-head { gap: 10px; }
    .log-entry-id { font-size: 16px; min-width: 48px; }
    .log-entry-date { font-size: 11.5px; }
    .log-entry-platform { font-size: 10.5px; margin-left: 0; }
    .log-entry-hash-label { font-size: 9.5px; letter-spacing: 0.18em; min-width: 48px; }
    .log-entry-hash { font-size: 11px; }
    .log-empty { padding: 28px 14px; font-size: 13px; }
}/* Map — Position-Held card pattern + wider card (960px) so the Leaflet
   tile layer reads as a world map rather than a strip. Map canvas is a
   free .map-canvas section (not boxed) mirroring .gallery-grid; legend
   sits in a single .map-box with gold (online) / water-blue (offline)
   dots. .map-leaflet carries the height contract Leaflet requires —
   480px desktop, 360px under 960px breakpoint. Never zero this height
   or the tile layer collapses on init. */
#map-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.map-card {
    width: 100%;
    max-width: 960px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.map-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.map-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 720px;
}
/* Free section (not boxed) hosting the Leaflet container. Keeps tiles
   edge-to-edge inside the card. */
.map-canvas {
    margin: 0 0 6px;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg2);
}
/* Leaflet container — the height contract. Leaflet measures this on
   init so it MUST be non-zero. Inline 100% width + explicit min-height. */
.map-leaflet {
    width: 100%;
    height: 480px;
    min-height: 480px;
    background: var(--bg);
}
.map-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    border-bottom: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.map-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.map-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
/* Inline links inside box bodies — dashed gold underline, never on .btn. */
.map-box a:not(.btn) {
    color: var(--gold);
    text-decoration: underline dashed rgba(201,168,76,0.55);
    text-underline-offset: 3px;
}
/* Legend — gold-dot bullet list mirroring .partners-list shape, but
   with two semantic dot variants. list-style:none kills default disc. */
.map-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    justify-content: center;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: left;
}
.map-legend li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.map-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.map-dot-online {
    background: var(--ok);
    border-color: var(--ok);
    box-shadow: 0 0 8px rgba(var(--ok-rgb),0.5);
}
/* Sleeping — water-blue, calm. Reads as a live platform keeping its
   coordinate between wakes, not as a fault. */
.map-dot-sleeping {
    background: #7ab3d4;
    border-color: #4d7f99;
    box-shadow: 0 0 6px rgba(122,179,212,0.35);
}
.map-dot-offline {
    background: #c9a84c;
    border-color: #a07830;
    box-shadow: 0 0 6px rgba(201,168,76,0.35);
}
@media (max-width: 960px) {
    .map-card { padding: 32px 24px 28px; margin: 80px auto 40px; max-width: 100%; }
    .map-title { font-size: 22px; }
    .map-meta { font-size: 13px; }
    .map-leaflet { height: 360px; min-height: 360px; }
    .map-box p { font-size: 14.5px; }
    .map-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .map-legend { font-size: 13px; gap: 10px 20px; }
}/* Login — Position-Held card pattern. The whole card is wrapped in a
   single <form> so the .login-cta submit posts email + password (plus
   the optional hidden `next` redirect path). Boxes (top-divided, last
   bottom-divided): optional error banner, Credentials (email + password
   stacked + Forgot-password inline link), No-account cross-link to
   /register. CTA holds the submit button. */
#login-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.login-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.login-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.login-form { margin: 0; }
.login-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.login-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.login-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.login-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.login-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.login-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.login-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.login-box strong { color: var(--text); }
/* Error banner */
.login-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.login-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.login-field {
    display: block;
    margin-bottom: 14px;
}
.login-field:last-of-type { margin-bottom: 6px; }
.login-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
.login-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Forgot-password inline link row */
.login-forgot {
    margin: 6px 0 0;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    text-align: left;
}
/* CTA — submit + caption */
.login-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.login-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .login-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .login-title { font-size: 22px; }
    .login-box p { font-size: 14.5px; }
    .login-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .login-label { font-size: 11px; }
    .login-input { font-size: 13.5px; padding: 10px 12px; }
    .login-status { font-size: 12.5px; }
    .login-forgot { font-size: 12.5px; }
}/* Register — Position-Held card pattern. The page is a single <form>
   wrapped around three logical boxes (Identity / Credentials / Date of
   Birth) so the POST + CSRF state stays atomic. The datepicker widget
   keeps its global `.datepicker-wrap` / `.datepicker-input` / `.datepicker`
   classes — the existing global CSS + inline script bind to those without
   any rewiring; we only add `.register-input` to the visible input so it
   inherits the card's input styling. */
#register-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.register-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.register-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.register-form {
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
}
.register-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.register-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.register-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.register-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
/* Inline links inside box bodies — dashed gold underline.
   `a:not(.btn)` so the CTA button never inherits the dashed line. */
.register-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.register-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Status banner — used for the server-side `error` payload. */
.register-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.register-status-err {
    color: var(--err-text);
    background: rgba(220, 80, 80, 0.10);
    border: 1px solid rgba(220, 80, 80, 0.35);
}
/* Field grid — two columns on desktop, stacked on mobile. */
.register-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.register-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.register-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
}
.register-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(6, 6, 15, 0.55);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 10px 12px;
    transition: border-color 0.2s, background 0.2s;
}
.register-input:hover {
    border-color: rgba(201,168,76,0.45);
}
.register-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(6, 6, 15, 0.75);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.10);
}
/* Datepicker — visible input inherits .register-input styling; the
   floating .datepicker panel is positioned by the global CSS rules. */
.register-box .datepicker-wrap { width: 100%; }
.register-box .datepicker-input {
    /* re-apply card input look on top of the global .datepicker-input cursor rule */
    cursor: pointer;
}
/* CTA — primary submit button + sign-in cross-link beneath. */
.register-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.register-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.register-cta-help {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 18px 0 0;
    line-height: 1.6;
}
.register-cta-help a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.register-cta-help a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
    .register-card {
        margin: 90px 16px 40px;
        padding: 34px 22px 30px;
    }
    .register-title { font-size: 22px; }
    .register-field-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .register-input { font-size: 14px; }
    .register-cta-help { font-size: 12.5px; }
}

/* Forgot Password — Position-Held card pattern. Mirrors /login DNA:
   single ambient canvas + gold-bordered card + per-section boxes with
   divider rhythm + Cinzel Decorative title. Inputs
   pinned to system sans-serif so the small-caps brand serif lowercase
   doesn't trick the user into mistyping the email they want reset
   instructions sent to. */
#forgot-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.forgot-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.forgot-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.forgot-form { margin: 0; }
.forgot-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.forgot-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.forgot-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.forgot-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.forgot-box p:last-child { margin-bottom: 0; }
/* Muted intro line above the email field — gives the user the
   "if the account exists we'll email instructions" framing without
   competing visually with the input. */
.forgot-intro {
    color: var(--text2) !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.forgot-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.forgot-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.forgot-box strong { color: var(--text); }
/* Status banners — error (red) + success (water-blue/gold). Success
   uses gold-accent because operator's palette is gold + silver +
   water-blue (no green). Banners render inside their own .forgot-box
   row so the divider rhythm stays uniform. */
.forgot-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.forgot-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.forgot-status-ok {
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
/* Form field — single email input, mirrors .login-field. */
.forgot-field {
    display: block;
    margin-bottom: 6px;
}
.forgot-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — the brand Cinzel/IM Fell serif renders
       lowercase as small-caps glyphs which makes users mistype
       email/password. Same fix as /login + /register + /reset. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.forgot-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — submit + caption */
.forgot-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.forgot-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .forgot-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .forgot-title { font-size: 22px; }
    .forgot-box p { font-size: 14.5px; }
    .forgot-intro { font-size: 12.5px !important; }
    .forgot-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .forgot-input { font-size: 13.5px; padding: 10px 12px; }
    .forgot-status { font-size: 12.5px; }
}/* Reset Password — Position-Held card pattern. The whole card is
   wrapped in a single <form> so the .reset-cta submit posts the
   hidden token + new password + confirm password atomically. Boxes
   (top-divided, last bottom-divided): optional error banner, and
   Credentials (new password + confirm password stacked, each in a
   .password-wrap with eye toggle). Inputs force the system sans-serif
   stack so the brand serif's small-caps-style lowercase can't mislead
   the user about the characters they typed. CTA holds submit. */
#reset-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.reset-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.reset-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.reset-form { margin: 0; }
.reset-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.reset-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.reset-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.reset-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.reset-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.reset-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.reset-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.reset-box strong { color: var(--text); }
/* Error banner */
.reset-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.reset-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.reset-field {
    display: block;
    margin-bottom: 14px;
}
.reset-field:last-of-type { margin-bottom: 6px; }
.reset-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
/* Inputs use system sans-serif — the brand serif (Cinzel / IM Fell)
   renders some lowercase glyphs as small-caps and users have entered
   the wrong password as a result (verified on /login, /register and
   the old /reset-password). Keep this in sync with .login-input. */
.reset-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.reset-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Make room for the eye-toggle button on the right edge of the input
   so the typed text doesn't slide under the icon. */
.reset-field .password-wrap > input { padding-right: 40px; }
/* CTA — submit + caption */
.reset-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.reset-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .reset-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .reset-title { font-size: 22px; }
    .reset-box p { font-size: 14.5px; }
    .reset-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .reset-label { font-size: 11px; }
    .reset-input { font-size: 13.5px; padding: 10px 12px; }
    .reset-status { font-size: 12.5px; }
}/* Dashboard — Position-Held card pattern. Authenticated landing for
   signed-in customers. Card 820px (not 720px) because each platform
   row carries UID + size + colour swatch + status pill + action (set
   location / live coords / status link), and 720px caused two-line
   wraps on EN labels. Boxes: optional ok/err banner, Welcome (greeting
   in .dashboard-meta under title), Platforms (rows or empty-state),
   CTA (four account actions). */
#dashboard-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.dashboard-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.dashboard-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.dashboard-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.dashboard-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.dashboard-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.dashboard-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
/* Paragraph prose, not labels. Cinzel has no true lowercase — its lowercase
   renders as small capitals — so anything longer than a line read as one
   uninterrupted block of capitals. IM Fell English is the body face already
   set on <body> and used by the landing narrative; headings, buttons and
   .dashboard-box-label stay Cinzel. Letter-spacing drops with it: capitals
   need tracking to breathe, lowercase does not. */
.dashboard-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.dashboard-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.dashboard-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Status banner box (ok / err) — coloured left stripe variant. */
.dashboard-banner-ok {
    border-left: 3px solid var(--gold);
    padding-left: 14px;
}
.dashboard-banner-err {
    border-left: 3px solid #c98a4c;
    padding-left: 14px;
}
/* Empty-state — dashed dim box with inline catalog CTA. */
.dashboard-empty {
    border: 1px dashed rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
}
.dashboard-empty p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    margin: 0 0 14px;
    text-align: center;
}
/* Platform rows — same DNA as credits-entry / log-entry. */
.dashboard-rows {
    display: flex;
    flex-direction: column;
}
.dashboard-row {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.dashboard-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.dashboard-row:first-child { padding-top: 4px; }
.dashboard-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.dashboard-uid {
    font-family: Consolas, monospace;
    font-size: 15px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.dashboard-sep { color: var(--text2); }
.dashboard-size {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.04em;
}
.dashboard-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,0.15);
}
.dashboard-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Cinzel', serif;
}
/* Status pills — semantic colour by status_class. */
.dashboard-pill {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 2px 10px;
    text-transform: uppercase;
}
.dashboard-pill-active {
    color: var(--gold);
    border: 1px solid var(--gold);
}
.dashboard-pill-ordered {
    color: rgba(160,176,192,0.85);
    border: 1px solid rgba(160,176,192,0.55);
}
/* Journey tones from the unified status presenter, on the semantic
   palette: shipped keeps the calm ordered look (parcel in motion),
   delivered warns (device waiting for its owner to power it up),
   inactive is terminal. */
.dashboard-pill-shipped {
    color: var(--info);
    border: 1px solid var(--info);
}
.dashboard-pill-delivered {
    color: var(--warn);
    border: 1px solid var(--warn);
}
.pubplat-point-name {
    text-align: center;
    color: var(--gold2);
    font-style: italic;
    font-size: 17px;
    margin: -6px 0 14px;
}
.log-entry-point-name {
    color: var(--gold2);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85em;
}
.dashboard-point-name {
    color: var(--gold2);
    font-style: italic;
    font-size: 13px;
    margin-left: 8px;
}
.dashboard-pill-inactive {
    color: var(--err-text);
    border: 1px solid rgba(var(--err-rgb),0.55);
}
.dashboard-row-note {
    color: var(--text2);
    font-size: 12px;
}
.dashboard-row-coord {
    color: var(--gold);
    font-family: Consolas, monospace;
    font-size: 12px;
}
.dashboard-row-seen {
    color: var(--text2);
    font-family: Consolas, monospace;
    font-size: 11px;
}
.dashboard-row-link {
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
}
.dashboard-row-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.dashboard-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.dashboard-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 820px) {
    .dashboard-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .dashboard-title { font-size: 22px; }
    .dashboard-meta { font-size: 13px; }
    .dashboard-box p { font-size: 14.5px; }
    .dashboard-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .dashboard-uid { font-size: 14px; }
    .dashboard-size { font-size: 13px; }
    .dashboard-pill { font-size: 10px; }
    .dashboard-row-coord,
    .dashboard-row-seen { font-size: 10.5px; }
    .dashboard-row-link { font-size: 11px; }
    .dashboard-row-meta { gap: 8px; }
}/* Orders — Position-Held card pattern. Card width 720px. Each order
   is a .orders-box (which is itself an <a>) — the label row carries
   ref + date + semantic status pill + total in gold; the row meta
   line carries the item count. Empty state is a dashed-border block
   inside a single .orders-box with a catalog CTA. Status pill colour
   is owned by order_status_badge() (inline style) — kept as-is. */
#orders-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.orders-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.orders-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.orders-box {
    display: block;
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.orders-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.orders-row {
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease;
    padding: 22px 14px;
    margin: 0 -14px;
}
.orders-row:hover {
    background: rgba(64, 160, 255, 0.06);
}
.orders-row:focus-visible {
    outline: 1px solid var(--water3);
    outline-offset: -2px;
}
.orders-box-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 8px;
}
.orders-ref {
    font-family: Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold2);
    letter-spacing: 0.04em;
}
.orders-date {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.orders-status-slot {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.orders-total {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.orders-row-meta {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text2);
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.orders-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 28px 22px;
    margin: 0 0 18px;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
}
.orders-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 4px;
}
.orders-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.orders-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
    .orders-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .orders-title { font-size: 22px; }
    .orders-ref { font-size: 15px; }
    .orders-total { font-size: 16px; }
    .orders-status-slot { margin-left: 0; }
    .orders-row-meta { font-size: 12.5px; }
    .orders-row { padding: 18px 10px; margin: 0 -10px; }
    .orders-empty { font-size: 13px; padding: 24px 18px; }
}/* Change Email — Position-Held card pattern. The whole card is wrapped
   in a single <form> so the submit posts new_email + password + CSRF
   atomically. Boxes (top-divided, last bottom-divided): optional error
   banner, Intro, Current address (disabled readonly), New address,
   Confirm with password (password-wrap + eye toggle). CTA holds the
   submit + muted back-to-dashboard link. Inputs
   use system sans-serif so the brand serif's small-caps lowercase
   glyphs cannot mislead the user about what they typed. */
#changeemail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.changeemail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.changeemail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.changeemail-form { margin: 0; }
.changeemail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.changeemail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.changeemail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.changeemail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.changeemail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.changeemail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.changeemail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.changeemail-box strong { color: var(--text); }
/* Status banner — error variant carries red palette. */
.changeemail-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.changeemail-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.changeemail-field {
    display: block;
    margin-bottom: 0;
}
/* Inputs MUST be system sans-serif so brand serif's small-caps lowercase
   glyphs cannot mislead about typed characters (password / email). */
.changeemail-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.changeemail-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
.changeemail-input:disabled,
.changeemail-input[readonly] {
    color: var(--text2);
    background: rgba(13,18,26,0.5);
    border-color: rgba(201,168,76,0.18);
    cursor: not-allowed;
}
/* Reserve right-side padding for the eye toggle (mirrors global rule). */
.changeemail-field .password-wrap > input { padding-right: 40px; }
/* CTA — submit + muted back link */
.changeemail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.changeemail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .changeemail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .changeemail-title { font-size: 22px; }
    .changeemail-box p { font-size: 14.5px; }
    .changeemail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .changeemail-input { font-size: 13.5px; padding: 10px 12px; }
    .changeemail-status { font-size: 12.5px; }
    .changeemail-back { font-size: 12.5px; }
}/* Change Password — Position-Held card pattern. Single <form> wraps the
   three labelled boxes (Current / New / Confirm) so the POST + CSRF +
   optional error banner stay atomic. Every password input sits inside
   .password-wrap with the canonical eye-toggle button; .changepw-input
   uses the system sans-serif stack so the brand serif's small-caps-style
   lowercase doesn't trick the user into resubmitting a mistyped password
   (same fix as /login, /register, /reset-password). */
#changepw-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.changepw-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.changepw-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.changepw-intro {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    margin: 0 0 22px;
    text-align: center;
}
.changepw-form { margin: 0; }
.changepw-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.changepw-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.changepw-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.changepw-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.changepw-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.changepw-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.changepw-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.changepw-box strong { color: var(--text); }
/* Error banner */
.changepw-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.changepw-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.changepw-field {
    display: block;
    margin-bottom: 4px;
}
.changepw-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — brand serif renders some lowercase glyphs as
       small-caps which previously caused mistyped passwords. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.changepw-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Reserve room for the eye-toggle button so the dot mask isn't clipped. */
.changepw-field .password-wrap > input { padding-right: 40px; }
/* CTA — submit + back-to-dashboard help row + caption */
.changepw-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.changepw-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .changepw-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .changepw-title { font-size: 22px; }
    .changepw-intro { font-size: 13px; }
    .changepw-box p { font-size: 14.5px; }
    .changepw-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .changepw-input { font-size: 13.5px; padding: 10px 12px; }
    .changepw-status { font-size: 12.5px; }
    .changepw-cta-help { font-size: 12.5px; }
}/* Cart — Position-Held card pattern. Optional .cart-box-banner at top
   carries the server message (info icon label). Empty state renders a
   dashed .cart-empty block inside a single box, then a CTA pointing
   to /catalog. Populated state renders one box for line items
   (.cart-lines stack of .cart-line rows with size + color dot + qty
   stepper forms + per-line price + trailing "remove all" row) and a
   second box for the total, then the Checkout CTA. Existing color
   swatches reuse the global .color-option class; .cart-color-dot just
   constrains the size inside the line row. */
#cart-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.cart-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.cart-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.cart-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.cart-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.cart-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.cart-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.cart-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cart-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.cart-box-banner .cart-box-label {
    color: var(--accent2);
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.cart-box-banner p {
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.6;
}
.cart-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 8px;
    padding: 36px 20px;
    text-align: center;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.cart-lines {
    display: flex;
    flex-direction: column;
}
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.cart-line:last-child { border-bottom: 0; padding-bottom: 4px; }
.cart-line:first-child { padding-top: 4px; }
.cart-line-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cart-line-size {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold2);
}
.cart-line-color {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-color-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.cart-line-color-name {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13px;
    letter-spacing: 0.04em;
}
.cfg-finish { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cfg-seg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cfg-seg-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.cfg-seg-lbl { font-size: 9px; color: var(--text2); letter-spacing: 0.02em; text-transform: uppercase; }
/* Read-only order-finish viewer on the order detail page — same canvas
   proportions the founders viewer uses so the model is framed alike. */
.orddetail-viewer { position: relative; }
.orddetail-viewer canvas {
    display: block;
    width: 100%;
    height: 340px;
}
.orddetail-viewer-status {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text2);
}

/* Full per-part list on the order detail page (render_config_finish full
   shape): dot + segment label + colour name per row. The blank dot keeps
   the engraving / point-name rows on the same grid as the painted ones. */
.cfg-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cfg-list-row { display: flex; align-items: center; gap: 8px; }
.cfg-list-row .cfg-seg-dot { flex: none; border: 1px solid rgba(255,255,255,0.18); }
.cfg-dot-blank { background: transparent; border-style: dashed !important; }
.cfg-list-seg { font-size: 11px; color: var(--text2); letter-spacing: 0.05em; text-transform: uppercase; min-width: 110px; }
.cfg-list-col { font-size: 12px; color: var(--text); }
.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-qty-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.cart-qty-btn {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.55);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cart-qty-btn:hover {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
}
.cart-qty-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.cart-qty-num {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--gold);
    font-size: 20px;
    letter-spacing: 0.04em;
    min-width: 22px;
    text-align: center;
}
.cart-line-price {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-align: right;
    min-width: 70px;
}
.cart-clear-row {
    text-align: right;
    margin-top: 12px;
}
.cart-clear-form {
    display: inline-block;
    margin: 0;
}
.cart-clear-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cart-clear-btn:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.cart-clear-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}
.cart-total-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.cart-total-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--gold);
}
.cart-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.cart-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .cart-card { padding: 32px 24px 28px; margin: 80px auto 40px; max-width: 100%; }
    .cart-title { font-size: 22px; }
    .cart-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .cart-box p { font-size: 14.5px; }
    .cart-empty { padding: 28px 14px; font-size: 13px; }
    .cart-line {
        grid-template-columns: 1fr auto;
        grid-template-areas: "info price" "qty qty";
        gap: 10px;
    }
    .cart-line-info { grid-area: info; }
    .cart-line-price { grid-area: price; min-width: 0; }
    .cart-line-qty { grid-area: qty; justify-content: flex-start; }
    .cart-line-size { font-size: 14px; }
    .cart-line-color-name { font-size: 12.5px; }
    .cart-qty-btn { width: 28px; height: 28px; font-size: 15px; }
    .cart-qty-num { font-size: 18px; }
    .cart-line-price { font-size: 15px; }
    .cart-clear-btn { font-size: 11px; letter-spacing: 0.16em; }
    .cart-total-label { font-size: 14px; }
    .cart-total-value { font-size: 22px; }
}

/* Platform Status — Position-Held card pattern. Card width 820px to
   give the telemetry metrics grid (auto-fill, minmax(180px, 1fr)) room
   for two columns of mono-spaced numerics without two-line wraps on EN
   labels ("CPU Temperature", "WiFi Signal"). Boxes: Header (size +
   colour swatch + online/offline pill + last_seen), Telemetry (empty
   state OR metrics grid + timestamp), optional OTA Report (status pill
   in label row + key/value grid), CTA (four sub-page links + muted
   back-to-dashboard). */
#platstatus-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.platstatus-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.platstatus-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.platstatus-meta {
    font-family: Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--gold2);
    margin-bottom: 8px;
}
.platstatus-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.platstatus-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.platstatus-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.platstatus-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.platstatus-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.platstatus-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Header row — size + colour swatch + status pill. */
.platstatus-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.platstatus-size {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--text);
    letter-spacing: 0.04em;
}
.platstatus-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    vertical-align: middle;
}
.platstatus-pill {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 3px 12px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.platstatus-pill-online {
    color: var(--gold);
    border: 1px solid var(--gold);
    background: rgba(201,168,76,0.08);
}
.platstatus-pill-offline {
    color: rgba(160,176,192,0.85);
    border: 1px solid rgba(160,176,192,0.55);
}
/* Sleeping — the battery rhythm, not a fault: water-blue, calm. */
.platstatus-pill-sleeping {
    color: #7ab3d4;
    border: 1px solid rgba(122,179,212,0.55);
    background: rgba(122,179,212,0.07);
}
.platstatus-nextwake {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-left: 8px;
}
.platstatus-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.6);
    display: inline-block;
}
.platstatus-seen {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.platstatus-mono {
    font-family: Consolas, monospace;
    color: var(--text);
}
/* Empty telemetry state — dashed dim block. */
.platstatus-empty {
    border: 1px dashed rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    color: var(--text2);
}
.platstatus-empty-icon {
    color: var(--gold);
    opacity: 0.5;
    margin-bottom: 10px;
}
.platstatus-empty p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    margin: 0;
    text-align: center;
}
/* Metrics grid — preserves auto-fill responsive layout. */
.platstatus-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.platstatus-metric {
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 10px;
    padding: 16px;
}
.platstatus-metric-label {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.platstatus-metric-value {
    font-family: Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.platstatus-metric-sub {
    color: var(--text2);
    font-family: Consolas, monospace;
    font-size: 12px;
    margin-top: 4px;
}
.platstatus-metric-bar {
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.platstatus-metric-bar-fill {
    height: 100%;
    border-radius: 3px;
}
.platstatus-tele-ts {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: right;
    margin-top: 12px;
}
/* OTA Report block — header row with label + status pill, 2-col key/val grid. */
.platstatus-ota-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.platstatus-ota-head .platstatus-box-label { margin-bottom: 0; }
.platstatus-ota-pill {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 2px 10px;
    text-transform: uppercase;
}
.platstatus-ota-pill-ok {
    color: var(--gold);
    border: 1px solid var(--gold);
    background: rgba(201,168,76,0.08);
}
.platstatus-ota-pill-fail {
    color: #d97a5c;
    border: 1px solid #d97a5c;
    background: rgba(217,122,92,0.08);
}
.platstatus-ota-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 16px;
    align-items: baseline;
}
.platstatus-ota-key {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.platstatus-ota-val {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
/* CTA — four sub-page buttons + muted back-link. */
/* Sleep-mode preset picker */
.platstatus-sleepmode h2 { margin-bottom: 12px; }
.sleepmode-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(160,176,192,0.25);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.sleepmode-option:hover { border-color: rgba(201,168,76,0.5); }
.sleepmode-current {
    border-color: var(--gold);
    background: rgba(201,168,76,0.06);
}
.sleepmode-name {
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.sleepmode-note {
    font-size: 13px;
    color: var(--muted);
}
.sleepmode-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.sleepmode-hint {
    font-size: 12px;
    color: var(--muted);
}
.platstatus-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.platstatus-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 820px) {
    .platstatus-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .platstatus-title { font-size: 22px; }
    .platstatus-meta { font-size: 13px; }
    .platstatus-box p { font-size: 14.5px; }
    .platstatus-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .platstatus-size { font-size: 13.5px; }
    .platstatus-pill { font-size: 10px; padding: 2px 10px; }
    .platstatus-seen { font-size: 12px; }
    .platstatus-metrics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .platstatus-metric { padding: 12px; }
    .platstatus-metric-label { font-size: 10px; letter-spacing: 0.14em; }
    .platstatus-metric-value { font-size: 18px; }
    .platstatus-metric-sub { font-size: 11px; }
    .platstatus-ota-grid { grid-template-columns: 110px 1fr; gap: 5px 12px; }
    .platstatus-ota-key { font-size: 11px; letter-spacing: 0.1em; }
    .platstatus-ota-val { font-size: 12.5px; }
    .platstatus-ota-pill { font-size: 10px; }
}/* ============================================================
   Platform History — Position-Held card pattern
   Card width 820px (charts + alerts timeline need horizontal room,
   same exception as /catalog and /log). Chart canvases get explicit
   200px height via .plathistory-chart-canvas so Chart.js initialises
   with a non-zero bbox. All bullet lists use gold-dot ::before
   (no native disc markers). Period tabs reuse .btn-like pill styling
   but kept local (active = filled gold). Alert deltas colour-coded:
   positive = gold (placed), negative = water-blue (removed).
   ============================================================ */
#plathistory-ambient-bg {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.plathistory-card {
    width: 100%; max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative; z-index: 2;
    margin: 120px auto 60px;
}
.plathistory-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700; font-size: 26px; letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin-bottom: 6px;
}
.plathistory-meta {
    font-family: Consolas, monospace;
    font-size: 13px; letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
    margin-bottom: 22px;
}
.plathistory-intro {
    color: var(--text2);
    font-family: 'Cinzel', serif; font-style: italic;
    font-size: 13px; letter-spacing: 0.04em;
    text-align: center;
    margin: 0 0 18px;
}
.plathistory-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0; margin: 0; text-align: left;
}
.plathistory-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.plathistory-box-label {
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: 11px; letter-spacing: 0.22em;
    color: var(--gold); text-transform: uppercase;
    margin-bottom: 12px; text-align: left;
}
.plathistory-box p {
    color: var(--text); font-family: 'IM Fell English', Georgia, serif; font-weight: 400;
    font-size: 16px; letter-spacing: 0.01em; line-height: 1.75;
    margin: 0; text-align: left;
}
/* Inline links inside boxes — dashed underline; .btn excluded so primary
   buttons stay clean (cookies-bug fix mirror). */
.plathistory-box a:not(.btn) {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.plathistory-box a:not(.btn):hover {
    color: var(--gold2);
    border-bottom-color: var(--gold2);
}

/* Period tab pills */
/* Range selector — canonical pill switcher (same recipe as .prod-switch:
   one bordered capsule, quiet pills, gold-gradient active). A row of
   individually-boxed buttons is off-pattern (operator, 2026-07-30). */
.plathistory-tabs {
    display: inline-flex; gap: 2px; padding: 3px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 999px;
    background: rgba(6,6,15,0.5);
}
.plathistory-tab {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.plathistory-tab:hover { color: var(--text); }
.plathistory-tab-active {
    color: var(--bg);
    background: linear-gradient(135deg, var(--gold3), var(--gold2));
    font-weight: 700;
}
.plathistory-tab-active:hover { color: var(--bg); }

/* Empty-state block (mirrors /gallery + /log empty pattern) */
.plathistory-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    color: var(--text2);
    background: rgba(6,6,15,0.4);
}
.plathistory-empty p {
    text-align: center !important;
    color: var(--text2);
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* Chart wrapper — gold-tinted card around each <canvas> */
.plathistory-chart-wrap {
    background: rgba(6,6,15,0.45);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}
.plathistory-chart-wrap:last-of-type { margin-bottom: 0; }
.plathistory-chart-title {
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: 11px; letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Explicit height — Chart.js needs a non-zero bbox at init. NOT % height. */
.plathistory-chart-canvas {
    position: relative;
    height: 200px;
    width: 100%;
}

/* Alerts timeline */
.plathistory-alert-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: 10px; letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
}
.plathistory-alert-head-time { text-align: left; }
.plathistory-alert-head-delta { text-align: right; }
.plathistory-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.plathistory-alert-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.18);
}
.plathistory-alert-row:last-child { border-bottom: none; }
.plathistory-alert-row::before { content: none; }
.plathistory-alert-time {
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.04em;
}
/* Arrival seal — the event's Da Vinci emblem (same one the device
   rendered), pulled from the shared /static/emblems.svg pool. */
.plathistory-seal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.plathistory-seal svg {
    width: 34px;
    height: 34px;
    flex: none;
}
.plathistory-seal-name {
    font-family: Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--gold);
    text-transform: uppercase;
}
.plathistory-seal-none { color: var(--muted); }

/* Generic gold-dot bullets for any free <ul>/<ol> inside boxes */
.plathistory-box ul:not(.plathistory-alert-list),
.plathistory-box ol {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0;
}
.plathistory-box ul:not(.plathistory-alert-list) li,
.plathistory-box ol li {
    position: relative;
    padding-left: 20px;
    margin: 6px 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    line-height: 1.7;
    letter-spacing: 0.03em;
}
.plathistory-box ul:not(.plathistory-alert-list) li::before,
.plathistory-box ol li::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.75em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.5);
}

/* CTA + caption */
.plathistory-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.plathistory-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 860px) {
    .plathistory-card {
        max-width: calc(100% - 24px);
        padding: 36px 26px 30px;
        margin: 90px auto 50px;
    }
    .plathistory-title { font-size: 22px; }
    .plathistory-meta { font-size: 12px; letter-spacing: 0.14em; }
    .plathistory-box p { font-size: 14px; }
    .plathistory-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .plathistory-chart-canvas { height: 180px; }
    .plathistory-tab { padding: 5px 12px; font-size: 11px; }
    .plathistory-alert-time { font-size: 12px; }
    .plathistory-seal svg { width: 28px; height: 28px; }
}
@media (max-width: 540px) {
    .plathistory-card {
        padding: 28px 18px 24px;
        margin: 70px auto 40px;
    }
    .plathistory-title { font-size: 19px; letter-spacing: 0.08em; }
    .plathistory-chart-canvas { height: 160px; }
    .plathistory-chart-wrap { padding: 12px 12px 14px; }
    .plathistory-tabs { gap: 6px; }
    .plathistory-tab { padding: 6px 12px; }
    .plathistory-alert-head { font-size: 9px; letter-spacing: 0.18em; }
    .plathistory-alert-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .plathistory-seal { align-self: flex-end; }
}/* Platform Command — Position-Held card pattern. Card width 720px:
   the page hosts 3 stacked command-action forms + a per-command
   history timeline (UID is the short CG-N, no 820 widening needed
   like /dashboard). Boxes: optional ok banner (coloured left-stripe
   .platcommand-box variant), Connection (online dot OR offline amber
   warning), Commands (stacked action-buttons — each a real <button>
   inside a CSRF-bearing POST <form> so the confirm dialog and form
   submission survive CSP), History (timeline of issued commands with
   per-status pill colour). CTA = "Back to status" button. */
#platcommand-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.platcommand-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.platcommand-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.platcommand-meta {
    font-family: Consolas, monospace;
    font-size: 14px;
    color: var(--gold2);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.platcommand-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.platcommand-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.platcommand-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.platcommand-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.platcommand-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.platcommand-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Bullets inside the card use gold-dot pseudo-element, never default
   disc / decimal — mirrors the .partners-list / .credits-list shape. */
.platcommand-box ul,
.platcommand-box ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.platcommand-box ul li,
.platcommand-box ol li {
    position: relative;
    padding-left: 16px;
    margin: 6px 0;
}
.platcommand-box ul li::before,
.platcommand-box ol li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
}
/* Status banner box (server-driven ok message) — coloured left stripe. */
.platcommand-banner-ok {
    border-left: 3px solid var(--gold);
    padding-left: 14px;
}

/* Connection block — online green dot OR offline amber warning. */
.platcommand-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.platcommand-status-row-offline {
    background: rgba(var(--warn-rgb),0.06);
    border: 1px solid rgba(var(--warn-rgb),0.28);
    border-radius: 8px;
    padding: 10px 14px;
}
.platcommand-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.platcommand-status-dot-online {
    background: var(--ok);
    box-shadow: 0 0 8px rgba(var(--ok-rgb),0.6);
}
.platcommand-status-dot-offline {
    background: var(--warn);
}
.platcommand-status-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.platcommand-status-label-online  { color: var(--ok); }
.platcommand-status-label-offline { color: var(--warn); }

/* Command actions — stacked POST <form> rows. Buttons keep their
   real <button type=submit> so JS-disabled clients still submit. */
.platcommand-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.platcommand-action-form {
    margin: 0;
}
.platcommand-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    /* System sans for the inputs/buttons — Cinzel renders lowercase
       as small-caps glyphs which would deform desc rows. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.platcommand-action:hover {
    border-color: rgba(201,168,76,0.55);
    background: rgba(201,168,76,0.04);
}
.platcommand-action:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.platcommand-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.platcommand-action-icon-warn { background: rgba(var(--warn-rgb),0.12);  color: var(--warn); }
.platcommand-action-icon-info { background: rgba(var(--info-rgb),0.12); color: var(--info); }
.platcommand-action-icon-gold { background: rgba(201,168,76,0.12); color: var(--gold); }
.platcommand-action-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.platcommand-action-label {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.platcommand-action-desc {
    color: var(--text2);
    font-size: 12px;
    line-height: 1.4;
}

/* History timeline — empty state mirrors /gallery dashed dim block. */
.platcommand-empty {
    border: 1px dashed rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
}
.platcommand-empty p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    margin: 0;
    text-align: center;
}
.platcommand-hist {
    display: flex;
    flex-direction: column;
}
.platcommand-hist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.platcommand-hist-row:last-child  { border-bottom: 0; padding-bottom: 4px; }
.platcommand-hist-row:first-child { padding-top: 4px; }
.platcommand-hist-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.platcommand-hist-cmd {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--gold2);
    letter-spacing: 0.04em;
}
.platcommand-hist-time {
    font-family: Consolas, monospace;
    font-size: 11.5px;
    color: var(--text2);
    letter-spacing: 0.04em;
}

/* Status pills — semantic colour per command lifecycle stage. */
.platcommand-pill {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 2px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}
.platcommand-pill-pending {
    color: var(--warn);
    border: 1px solid rgba(var(--warn-rgb),0.6);
}
.platcommand-pill-delivered {
    color: var(--info);
    border: 1px solid rgba(var(--info-rgb),0.6);
}
.platcommand-pill-ack {
    color: var(--ok);
    border: 1px solid rgba(var(--ok-rgb),0.6);
}
.platcommand-pill-failed {
    color: var(--err);
    border: 1px solid rgba(var(--err-rgb),0.6);
}
.platcommand-pill-expired {
    color: rgba(160,176,192,0.85);
    border: 1px solid rgba(160,176,192,0.55);
}

.platcommand-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.platcommand-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .platcommand-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .platcommand-title { font-size: 22px; }
    .platcommand-meta { font-size: 13px; }
    .platcommand-box p { font-size: 14.5px; }
    .platcommand-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .platcommand-status-label { font-size: 12px; }
    .platcommand-action { padding: 12px 14px; gap: 12px; }
    .platcommand-action-icon { width: 36px; height: 36px; }
    .platcommand-action-label { font-size: 14px; }
    .platcommand-action-desc { font-size: 11.5px; }
    .platcommand-hist-cmd { font-size: 13px; }
    .platcommand-hist-time { font-size: 10.5px; }
    .platcommand-pill { font-size: 10px; }
}/* Platform Config — Position-Held card pattern. Each tunable group
   (Display name / Heartbeat / Sleep / Night mode) becomes a
   .platconfig-box; inputs use a system sans-serif stack via
   .platconfig-input so numeric values do not get garbled by the
   brand serif's small-caps glyphs. Optional success banner sits as
   its own .platconfig-box at the top. CTA = save button + muted
   back-to-status link beneath. */
#platconfig-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.platconfig-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.platconfig-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 10px;
}
.platconfig-meta {
    font-family: Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--gold2);
    margin-bottom: 18px;
}
.platconfig-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.platconfig-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.platconfig-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.platconfig-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.platconfig-desc {
    color: var(--text2) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px !important;
}
.platconfig-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
    transition: color 0.18s ease, border-color 0.18s ease;
}
.platconfig-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.platconfig-box ul, .platconfig-box ol { list-style: none; margin: 0; padding: 0; }
.platconfig-box li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
    line-height: 1.6;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
}
.platconfig-box li::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.7em;
    width: 5px; height: 5px;
    background: var(--gold);
    border-radius: 50%;
}
/* Form inputs — sans-serif so users can read what they typed. */
.platconfig-field { margin-top: 4px; }
.platconfig-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.28);
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.platconfig-input:focus {
    outline: none;
    border-color: rgba(201,168,76,0.7);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.12);
}
.platconfig-input-num { width: 130px; }
.platconfig-select {
    width: auto;
    min-width: 110px;
    appearance: auto;
    padding-right: 10px;
}
.platconfig-num-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.platconfig-unit {
    color: var(--text2);
    font-family: Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.platconfig-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 4px 0 14px;
}
.platconfig-check {
    accent-color: var(--gold);
    width: 18px; height: 18px;
    margin: 0;
    cursor: pointer;
}
.platconfig-check-label {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
}
.platconfig-sub {
    margin-top: 10px;
}
.platconfig-sublabel {
    display: block;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.platconfig-hour-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
}
/* Status banner — success message after a save. */
.platconfig-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 8px;
    text-align: left;
}
.platconfig-status-ok {
    color: #8fd19e;
    background: rgba(var(--ok-rgb),0.08);
    border: 1px solid rgba(var(--ok-rgb),0.35);
}
.platconfig-status-err {
    color: #f08a8a;
    background: rgba(220,80,80,0.08);
    border: 1px solid rgba(220,80,80,0.35);
}
.platconfig-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.platconfig-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.platconfig-cta .btn {
    min-width: 200px;
}
@media (max-width: 720px) {
    .platconfig-card { padding: 32px 22px 28px; margin: 80px auto 40px; }
    .platconfig-title { font-size: 22px; }
    .platconfig-meta { font-size: 12px; }
    .platconfig-box p { font-size: 14.5px; }
    .platconfig-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .platconfig-desc { font-size: 12.5px !important; }
    .platconfig-input { font-size: 13.5px; padding: 9px 11px; }
    .platconfig-input-num { width: 110px; }
    .platconfig-hour-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .platconfig-num-row { gap: 8px; }
    .platconfig-cta .btn { min-width: 0; width: 100%; }
}/* Platform Diagnostics — Position-Held card pattern.
   Card width 820px (vs default 720px) so the System / Network
   two-column field grid and the Consolas kernel-log pre block
   render without wrap pressure on mono lines (IPv6 addresses,
   MAC, kernel paths). Visual DNA mirrors /dashboard + /status. */

#platdiag-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.platdiag-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201, 168, 76, 0.55);
    box-shadow: 0 0 60px rgba(201, 168, 76, 0.12),
                inset 0 0 30px rgba(201, 168, 76, 0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}

.platdiag-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}

.platdiag-title-uid {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 22px;
    letter-spacing: 0.05em;
}

/* Recorded-at meta line — sits between title and first box */
.platdiag-meta {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

.platdiag-meta-ts {
    color: var(--gold);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: none;
    margin-left: 6px;
}

.platdiag-box {
    border-top: 1px solid rgba(201, 168, 76, 0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}

.platdiag-box:last-of-type {
    border-bottom: 1px solid rgba(201, 168, 76, 0.55);
}

.platdiag-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}

.platdiag-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}

.platdiag-box a:not(.btn) {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.5);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.platdiag-box a:not(.btn):hover {
    color: var(--gold2);
    border-bottom-color: var(--gold2);
}

/* List markers — gold dot ::before (mirror .partners-list) */
.platdiag-box ul,
.platdiag-box ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.platdiag-box ul li,
.platdiag-box ol li {
    position: relative;
    padding-left: 18px;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 6px;
}

.platdiag-box ul li::before,
.platdiag-box ol li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* Field grid — two-column key/value strip for System + Network rows */
.platdiag-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platdiag-field {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.15);
}

.platdiag-field:last-child {
    border-bottom: none;
}

.platdiag-field-key {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
}

.platdiag-field-val {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--text);
    word-break: break-word;
}

/* Kernel log — scrollable Consolas pre block */
.platdiag-log {
    color: var(--text2);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(6, 6, 15, 0.7);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    padding: 14px;
    margin: 0;
}

.platdiag-log::-webkit-scrollbar { width: 8px; }
.platdiag-log::-webkit-scrollbar-track { background: rgba(6, 6, 15, 0.4); }
.platdiag-log::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.35); border-radius: 4px; }
.platdiag-log::-webkit-scrollbar-thumb:hover { background: rgba(201, 168, 76, 0.55); }

/* Empty state — centred icon + message inside the single box */
.platdiag-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--text2);
}

.platdiag-empty-icon {
    display: block;
    margin: 0 auto 14px;
    opacity: 0.4;
}

.platdiag-empty-text {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--text2);
    margin: 0;
}

/* CTA — Back to status */
.platdiag-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201, 168, 76, 0.18);
}

.platdiag-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Closing slogan */

/* Responsive — 820px breakpoint matches card width */
@media (max-width: 820px) {
    .platdiag-card {
        max-width: calc(100vw - 32px);
        padding: 36px 24px 32px;
        margin: 90px auto 40px;
    }

    .platdiag-title {
        font-size: 22px;
    }

    .platdiag-title-uid {
        font-size: 18px;
        display: block;
        margin-top: 4px;
    }

    .platdiag-field {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .platdiag-field-val {
        font-size: 12px;
    }

    .platdiag-log {
        font-size: 10px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .platdiag-card {
        padding: 28px 18px 26px;
    }

    .platdiag-title {
        font-size: 19px;
        letter-spacing: 0.06em;
    }

    .platdiag-box-label {
        font-size: 10px;
        letter-spacing: 0.18em;
    }
}

/* Account Settings — Position-Held card pattern. Card width 720px.
   Boxes: optional success banner, Profile (read-only key/value),
   Marketing (state copy + inline toggle form), Actions (gold-dot
   bullet list with delete tinted red). CTA carries only the muted
   back-to-dashboard link — each box owns its own action surface. */
#acctsettings-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.acctsettings-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.acctsettings-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.acctsettings-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.acctsettings-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.acctsettings-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.acctsettings-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: left;
}
.acctsettings-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline. Explicitly
   excludes .btn so any future button-shaped link stays clean. */
.acctsettings-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.acctsettings-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.acctsettings-box strong { color: var(--text); }
/* Status banner — success variant carries gold-tinted palette
   (account settings only surfaces success messages today; error
   variant scaffolded for symmetry with sibling card patterns). */
.acctsettings-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.acctsettings-status-ok {
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
.acctsettings-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Profile key/value rows — read-only, dashed dim divider between rows. */
.acctsettings-kv {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.acctsettings-kv-row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.acctsettings-kv-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.acctsettings-kv-row:first-child { padding-top: 2px; }
.acctsettings-kv dt {
    flex: 0 0 40%;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
}
.acctsettings-kv dd {
    flex: 1;
    margin: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    word-break: break-word;
}
/* Marketing inline form — submit aligned left under the state copy. */
.acctsettings-inline-form {
    margin: 0;
    display: flex;
    justify-content: flex-start;
}
.acctsettings-inline-form .btn {
    font-size: 14px;
    padding: 8px 20px;
}
/* Actions — gold-dot bullet list (mirrors .partners-list DNA). */
.acctsettings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.acctsettings-list li {
    position: relative;
    padding: 8px 0 8px 22px;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.acctsettings-list li:last-child { border-bottom: 0; }
.acctsettings-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.55);
}
.acctsettings-list a {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.acctsettings-list a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Delete account — destructive tint variant. */
.acctsettings-list a.acctsettings-danger {
    color: var(--err-text);
    border-bottom-color: rgba(var(--err-rgb),0.45);
}
.acctsettings-list a.acctsettings-danger:hover {
    color: var(--err-text);
    border-bottom-color: var(--err-text);
}
.acctsettings-list li:has(> a.acctsettings-danger)::before {
    background: var(--err-text);
    box-shadow: 0 0 6px rgba(var(--err-rgb),0.55);
}
/* CTA — muted back link only (no primary submit at card level). */
.acctsettings-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
@media (max-width: 720px) {
    .acctsettings-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .acctsettings-title { font-size: 22px; }
    .acctsettings-box p { font-size: 14.5px; }
    .acctsettings-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .acctsettings-kv-row { flex-direction: column; gap: 4px; padding: 8px 0; }
    .acctsettings-kv dt { flex: 1 1 auto; font-size: 12.5px; }
    .acctsettings-kv dd { font-size: 13.5px; }
    .acctsettings-list li { font-size: 13.5px; padding: 7px 0 7px 20px; }
    .acctsettings-list li::before { top: 14px; }
    .acctsettings-status { font-size: 12.5px; }
    .acctsettings-back { font-size: 12.5px; }
}

/* Account Delete — Position-Held card pattern. Destructive flow:
   title + warning banner + confirm CTA carry a red palette via
   variant classes (-title-danger / -status-danger / -btn-danger);
   everything else stays on the canonical gold/blue Chrono Gate
   palette so the page reads as part of the system, not a one-off.
   Password input uses system sans-serif so the brand serif's
   small-caps lowercase glyphs cannot mislead the user about what
   they typed. Soft-exits box stacks alternative actions below the
   destructive CTA as a gentle off-ramp. */
#accountdelete-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.accountdelete-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.accountdelete-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
/* Danger variant — red gradient for the destructive page title. */
.accountdelete-title-danger {
    background: linear-gradient(135deg, #ff8a8a 0%, #ff4444 50%, #c92a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.accountdelete-form { margin: 0; }
.accountdelete-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.accountdelete-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.accountdelete-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.accountdelete-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.accountdelete-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so soft-exit buttons stay clean. */
.accountdelete-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.accountdelete-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.accountdelete-box strong { color: var(--text); }
/* Status banner — error variant (auth/validation) and danger variant
   (irreversible-action warning) share shape, differ in tone. */
.accountdelete-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.accountdelete-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.accountdelete-status-danger {
    color: #ff8a8a;
    background: rgba(255,68,68,0.10);
    border: 1px solid rgba(255,68,68,0.40);
}
/* Form fields */
.accountdelete-field {
    display: block;
    margin-bottom: 0;
}
/* Inputs MUST be system sans-serif so brand serif's small-caps lowercase
   glyphs cannot mislead about typed characters (password). */
.accountdelete-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.accountdelete-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Reserve right-side padding for the eye toggle (mirrors global rule). */
.accountdelete-field .password-wrap > input { padding-right: 40px; }
/* Confirm understanding — required checkbox row. */
.accountdelete-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: left;
}
.accountdelete-checkbox {
    margin-top: 3px;
    accent-color: var(--err);
    flex-shrink: 0;
}
/* CTA — destructive submit button */
.accountdelete-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.accountdelete-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
/* Danger variant — red destructive submit button. */
.accountdelete-btn-danger {
    background: linear-gradient(135deg, #c92a2a 0%, #ff4444 100%);
    border-color: rgba(255,68,68,0.65);
    color: #fff;
}
.accountdelete-btn-danger:hover {
    background: linear-gradient(135deg, var(--err) 0%, #ff6666 100%);
    border-color: #ff6666;
    color: #fff;
}
/* Soft-exits box — stacked gentler alternatives outside the form so the
   user has an off-ramp before deleting (export data, change email,
   change password). Re-applies top divider via .accountdelete-box. */
.accountdelete-box-exits {
    /* inherits .accountdelete-box rhythm; no overrides */
}
.accountdelete-exits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.accountdelete-exits .btn {
    text-align: center;
}
@media (max-width: 720px) {
    .accountdelete-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .accountdelete-title { font-size: 22px; }
    .accountdelete-box p { font-size: 14.5px; }
    .accountdelete-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .accountdelete-input { font-size: 13.5px; padding: 10px 12px; }
    .accountdelete-status { font-size: 12.5px; }
    .accountdelete-confirm { font-size: 13px; }
    .accountdelete-back { font-size: 12.5px; }
}

/* Account Consents — Position-Held card pattern. GDPR Art.7 user
   history of consent grants/withdrawals. Optional success banner
   renders as the first .consents-box with .consents-status-ok tint.
   Actions box groups four management buttons (withdraw marketing +
   analytics POST forms, export GET link, delete-account GET link with
   danger variant). History box wraps a real <table> for the time /
   type / status / policy / source columns; status cell carries a
   tinted variant class instead of inline style. Card width 820px to
   fit the 5-column table without wrap (same exception as /log). */
#consents-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.consents-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.consents-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.consents-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.consents-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 640px;
}
.consents-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.consents-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.consents-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.consents-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.consents-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.consents-box a:not(.btn):hover {
    color: var(--gold);
    text-decoration-style: solid;
}
/* Success banner variant — green tint mirroring contact-status-ok. */
.consents-status-ok {
    background: rgba(var(--ok-rgb),0.06);
}
.consents-status-ok .consents-box-label { color: var(--ok); }
.consents-status-ok p { color: var(--ok); }
/* Actions row — four buttons + forms, wrap on narrow viewports. */
.consents-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.consents-action-form { margin: 0; padding: 0; display: inline; }
/* Danger variant for the delete-account link. Preserves the original
   red tint without inline style (so :hover from .btn can still win). */
.consents-btn-danger {
    border-color: #d33 !important;
    color: var(--err-text) !important;
}
.consents-btn-danger:hover {
    background: rgba(var(--err-rgb),0.10) !important;
    color: #fca5a5 !important;
}
/* Empty-state for the history box — dashed gold-tinted card mirroring
   .log-empty / .gallery-empty. */
.consents-empty {
    border: 1px dashed rgba(201,168,76,0.30);
    border-radius: 8px;
    padding: 28px 18px;
    text-align: center;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
/* History table — real <table> for screen readers + horizontal scroll
   on narrow viewports. Mono Consolas in data cells preserves the
   "audit log" feel from the original render. */
.consents-table-wrap {
    overflow-x: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
.consents-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.consents-th {
    text-align: left;
    padding: 10px 10px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201,168,76,0.30);
}
.consents-th-nowrap { white-space: nowrap; }
.consents-td {
    padding: 10px 10px;
    font-size: 12.5px;
    color: var(--text2);
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    vertical-align: top;
}
.consents-table tbody tr:last-child .consents-td { border-bottom: 0; }
.consents-td-mono {
    font-family: Consolas, monospace;
    letter-spacing: 0.02em;
}
.consents-td-nowrap { white-space: nowrap; }
.consents-td-type { color: var(--gold); }
.consents-status-pill-ok  { color: var(--ok); }
.consents-status-pill-off { color: var(--err-text); }
@media (max-width: 820px) {
    .consents-card { padding: 36px 26px 30px; margin: 90px auto 44px; max-width: calc(100% - 24px); }
}
@media (max-width: 720px) {
    .consents-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .consents-title { font-size: 22px; }
    .consents-meta { font-size: 13px; }
    .consents-intro { font-size: 13px; }
    .consents-box p { font-size: 14.5px; }
    .consents-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .consents-actions { gap: 10px; }
    .consents-th { font-size: 10px; letter-spacing: 0.16em; padding: 8px 8px; }
    .consents-td { font-size: 11.5px; padding: 8px 8px; }
    .consents-empty { font-size: 12.5px; padding: 22px 14px; }
}

/* Sessions — Position-Held card pattern. One .sessions-box per active
   session (top-divided, last bottom-divided); label flips between
   "THIS DEVICE" for the current session and a numbered "SESSION N" tag
   for the rest. Inside each box: a small key/value table (IP / device
   / signed in) and a per-row revoke-one form for non-current sessions.
   Optional success banner ("Session revoked.") slots in as the first
   box with the status-ok tint. CTA at the bottom holds either the
   destructive "revoke all" submit or the muted "no other sessions"
   note + muted back link. */
#sessions-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.sessions-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.sessions-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.sessions-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.sessions-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.sessions-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.sessions-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.sessions-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline; exclude .btn
   so the CTA button stays clean (mirrors changeemail rule). */
.sessions-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.sessions-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.sessions-box strong { color: var(--text); }
/* Current-device box — soft gold glow so the user can spot which row
   represents their browser at a glance. */
.sessions-box-current {
    box-shadow: inset 0 0 24px rgba(201,168,76,0.06);
}
.sessions-box-current .sessions-box-label {
    color: var(--gold);
}
/* Status banner — success variant for "Session revoked." message. */
.sessions-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.sessions-status-ok {
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
/* Per-session metadata table — 35% key column / 65% value column. */
.sessions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.sessions-table td {
    padding: 6px 0;
    vertical-align: top;
}
.sessions-key {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    width: 35%;
    white-space: nowrap;
}
.sessions-val {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    word-break: break-word;
}
/* Monospace variant for the IP column — sticks numbers to a fixed grid. */
.sessions-val-mono {
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--gold2);
}
/* Per-row revoke form — small button aligned right inside the box. */
.sessions-row-form {
    margin: 12px 0 0;
    text-align: right;
}
.sessions-row-form .btn {
    font-size: 12px;
    padding: 6px 16px;
}
/* CTA — bottom area holding either the destructive submit or the
   muted "no other sessions" note, plus the back link. */
.sessions-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
    text-align: center;
}
.sessions-cta-form {
    margin: 0 0 6px;
    display: flex;
    justify-content: center;
}
.sessions-empty {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: var(--text2);
    text-align: center;
}
@media (max-width: 720px) {
    .sessions-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .sessions-title { font-size: 22px; }
    .sessions-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .sessions-box p { font-size: 14.5px; }
    .sessions-key { font-size: 12px; width: 38%; }
    .sessions-val { font-size: 12.5px; }
    .sessions-val-mono { font-size: 12px; }
    .sessions-row-form .btn { font-size: 11.5px; padding: 5px 14px; }
    .sessions-status { font-size: 12.5px; }
    .sessions-empty { font-size: 12.5px; }
    .sessions-back { font-size: 12.5px; }
}

/* Notifications — Position-Held card pattern. Card width 720px.
   Single .notifications-box "Inbox" containing per-record .notifications-entry
   rows (unread → gold pip + brighter row tint; read → muted). Entry title
   carries a semantic colour applied inline by the renderer (security red /
   order green / platform blue / default gold). Optional success banner is
   tinted green via .notifications-status-ok and rendered as the FIRST box
   so it slots into the divider rhythm. Empty state is a dashed
   .notifications-empty inside the inbox box. CTA holds the mark-all-read
   form (only when there are unread items) + muted back-to-dashboard link.
   Inline "View →" deep-links styled via .notifications-box a:not(.btn) so
   the dashed underline never lands on the CTA button. */
#notifications-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.notifications-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.notifications-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.notifications-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.notifications-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.notifications-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.notifications-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.notifications-status-ok {
    background: rgba(var(--ok-rgb),0.06);
    border-top-color: rgba(var(--ok-rgb),0.45);
    padding: 14px 16px;
}
.notifications-status-ok + .notifications-box {
    border-top-color: rgba(201,168,76,0.55);
}
.notifications-status-ok p {
    color: #b3e0b6;
    font-size: 13.5px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.notifications-entries {
    display: block;
}
.notifications-entry {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    position: relative;
}
.notifications-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.notifications-entry:first-child { padding-top: 4px; }
.notifications-entry-unread {
    padding-left: 14px;
    margin-left: -14px;
    background: rgba(201,168,76,0.04);
}
.notifications-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}
.notifications-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.6);
    flex-shrink: 0;
    align-self: center;
}
.notifications-entry-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
}
.notifications-entry-date {
    margin-left: auto;
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--text2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.notifications-entry-body {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.65;
    letter-spacing: 0.02em;
    margin: 6px 0 0;
    text-align: left;
}
.notifications-entry-link-row {
    margin-top: 6px;
}
.notifications-entry-link {
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    letter-spacing: 0.04em;
}
.notifications-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 28px 22px;
    margin: 0;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
}
.notifications-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.notifications-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.notifications-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 22px;
}
.notifications-cta-form {
    margin: 0;
}
@media (max-width: 720px) {
    .notifications-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .notifications-title { font-size: 22px; }
    .notifications-box p { font-size: 14.5px; }
    .notifications-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .notifications-entry-title { font-size: 14px; }
    .notifications-entry-date { font-size: 10.5px; margin-left: 0; }
    .notifications-entry-body { font-size: 12.5px; }
    .notifications-entry-link { font-size: 11.5px; }
    .notifications-empty { font-size: 13px; padding: 24px 18px; }
    .notifications-entry-unread { padding-left: 10px; margin-left: -10px; }
    .notifications-status-ok p { font-size: 12.5px; }
    .notifications-back { font-size: 10.5px; letter-spacing: 0.14em; }
}

/* Order Detail — Position-Held card pattern. Title slot carries the
   order ref + status pill (status pill colour owned by
   order_status_badge() inline style — preserved verbatim). Boxes
   (top-divided, last bottom-divided): Header meta (2x2 grid: date,
   total, address, payment), optional Actions (invoice + tracking),
   Items (size/colour x qty per row, gold price total), optional
   Platforms (gold uid pills). Back-to-orders muted link sits below
   boxes. Card width 720px. */
#orderdetail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.orderdetail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.orderdetail-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.orderdetail-title-ref {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.orderdetail-title-status {
    display: inline-flex;
    align-items: center;
}
.orderdetail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.orderdetail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.orderdetail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.orderdetail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.orderdetail-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}
.orderdetail-meta-cell {
    text-align: left;
}
.orderdetail-meta-key {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 6px;
}
.orderdetail-meta-val {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    letter-spacing: 0.03em;
}
.orderdetail-meta-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.orderdetail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.orderdetail-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.orderdetail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    flex-wrap: wrap;
}
.orderdetail-item:last-child { border-bottom: 0; padding-bottom: 0; }
.orderdetail-item:first-child { padding-top: 4px; }
.orderdetail-item-desc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}
.orderdetail-item-size {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--gold2);
    letter-spacing: 0.04em;
    text-transform: capitalize;
}
.orderdetail-item-color {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    color: var(--text2);
    letter-spacing: 0.04em;
    text-transform: capitalize;
}
.orderdetail-item-qty {
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--text2);
}
.orderdetail-item-price {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.orderdetail-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.orderdetail-uid {
    display: inline-block;
    font-family: Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 4px 12px;
}
/* Site-wide muted back link (operator decisions 2026-07-29/30): forward
   actions are gold .btn rectangles, the way BACK is always this quiet
   arrow row — top-left AND bottom-left on every page, admin and user
   alike. Left-aligned explicitly because most cards centre their text. */
.page-back { padding: 4px 0 14px; text-align: left; }
.page-back a {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text2);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.page-back a:hover { color: var(--gold); }
.page-back-link {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text2) !important;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
    align-self: center;
}
.page-back-link:hover { color: var(--gold) !important; }
.orderdetail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.orderdetail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
    .orderdetail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .orderdetail-title-ref { font-size: 22px; }
    .orderdetail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .orderdetail-meta-grid { grid-template-columns: 1fr; gap: 14px; }
    .orderdetail-meta-key { font-size: 10px; letter-spacing: 0.16em; }
    .orderdetail-meta-val { font-size: 13px; }
    .orderdetail-meta-total { font-size: 18px; }
    .orderdetail-item-size { font-size: 14px; }
    .orderdetail-item-color { font-size: 12.5px; }
    .orderdetail-item-qty { font-size: 12px; }
    .orderdetail-item-price { font-size: 15px; }
    .orderdetail-uid { font-size: 12px; padding: 3px 10px; }
}

/* Referral — Position-Held card pattern. Boxes: status banner (only
   when flash/error present), code, share-link, how-it-works (gold-dot
   list), invite-by-email form, invites table or empty-state, reward
   explainer, legal small print. The email <input> and the readonly
   share-link <input> use system sans-serif so the brand Cinzel /
   IM Fell small-caps lowercase glyphs don't trick the user into
   misreading their address or the share URL. The mono <code> for the
   referral code itself stays Consolas because it's all-uppercase by
   convention. Banners render inside their own .referral-box with a
   colour-tinted variant (ok = gold/water-blue palette, err = red)
   so the divider rhythm stays uniform. */
#referral-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.referral-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.referral-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.referral-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.referral-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.referral-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.referral-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.referral-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.referral-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline. Explicitly
   excludes .btn so CTA buttons stay clean (cookies-page bug fix). */
.referral-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.referral-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.referral-box strong { color: var(--text); }
/* Muted explanatory line above an input — matches .forgot-intro. */
.referral-muted {
    color: var(--text2) !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}
/* Legal small print — kept readable but de-emphasised. */
.referral-legal {
    color: var(--text2) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
/* Empty-state — italic muted line for the invites table. */
.referral-empty {
    color: var(--text2) !important;
    font-style: italic;
    font-size: 13.5px !important;
    margin: 0 !important;
}
/* Status banners — error (red) + success (gold/water-blue, no green:
   operator's palette is gold + silver + water-blue). Inside their
   own .referral-box so the divider rhythm stays uniform. */
.referral-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.referral-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.referral-status-ok {
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
/* Copy row — flex line that hosts the code/share pill + Copy button. */
.referral-copy-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.referral-code {
    flex: 1 1 240px;
    font-family: Consolas, monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.12em;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 10px 14px;
    overflow-wrap: anywhere;
}
.referral-link {
    flex: 1 1 240px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.28);
    color: var(--gold2);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 10px 14px;
    /* System sans-serif — Cinzel/IM Fell renders URL lowercase as
       small-caps glyphs which makes the share link harder to read. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.referral-link:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Invite-by-email row — input + submit button side by side. */
.referral-form { margin: 0; }
.referral-field-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    margin: 0 0 8px;
}
.referral-invite-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.referral-input {
    flex: 1 1 240px;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — the brand Cinzel/IM Fell serif renders
       lowercase as small-caps glyphs which makes users mistype
       email. Same fix as /login + /register + /forgot. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.referral-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Gold-dot bullet list (mirrors .partners-list). */
.referral-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    text-align: left;
}
.referral-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
}
.referral-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 999px;
}
/* Invites table — gold-tinted dividers, mono email column, muted
   date column. Horizontal scroll wrapper for narrow viewports. */
.referral-table-wrap {
    overflow-x: auto;
    margin: 0;
}
.referral-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    margin: 0;
}
.referral-th {
    text-align: left;
    padding: 10px 8px;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    border-bottom: 1px solid rgba(201,168,76,0.45);
}
.referral-th-right { text-align: right; }
.referral-td {
    padding: 10px 8px;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    color: var(--text);
    vertical-align: top;
}
.referral-td-mono {
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--gold2);
    overflow-wrap: anywhere;
}
.referral-td-right { text-align: right; }
.referral-td-muted { color: var(--text2); font-family: Consolas, monospace; font-size: 12px; }
/* CTA — Back-to-Dashboard secondary link. */
@media (max-width: 720px) {
    .referral-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .referral-title { font-size: 22px; }
    .referral-intro { font-size: 13px; }
    .referral-box p { font-size: 14.5px; }
    .referral-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .referral-muted { font-size: 12.5px !important; }
    .referral-legal { font-size: 11.5px !important; }
    .referral-empty { font-size: 12.5px !important; }
    .referral-status { font-size: 12.5px; }
    .referral-code { font-size: 17px; letter-spacing: 0.1em; padding: 9px 12px; }
    .referral-link { font-size: 12.5px; padding: 9px 12px; }
    .referral-input { font-size: 13.5px; padding: 10px 12px; }
    .referral-list { font-size: 13.5px; }
    .referral-table { font-size: 12.5px; }
    .referral-th { font-size: 10px; letter-spacing: 0.14em; }
    .referral-td-mono { font-size: 12px; }
    .referral-td-muted { font-size: 11px; }
}

/* Search — Position-Held card pattern. The query form sits in its
   own .search-box (label = page title); an optional status banner
   (.search-status-err / .search-status-empty) renders as the first
   box when present. Result groups (blog / FAQ) become per-section
   .search-box blocks with the section heading as the gold label +
   a count pill; each result is a .search-entry row (linked title +
   dashed bottom divider + snippet line). Form input uses the
   system sans-serif stack (Cinzel renders lowercase as small-caps,
   which mangles search terms). */
#search-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.search-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.search-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 18px;
}
.search-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.search-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.search-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.search-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.search-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.search-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.search-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s, border-color 0.2s;
}
.search-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.search-count {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--text2);
    letter-spacing: 0.04em;
    text-transform: none;
    margin-left: 6px;
}
.search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.search-input {
    flex: 1;
    min-width: 220px;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* Form inputs use the platform sans-serif stack — Cinzel renders
       lowercase as small-caps, which made typed search queries look
       ALL-CAPS and obscured what the user actually typed. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
.search-submit { flex: 0 0 auto; }
.search-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.search-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.search-status-empty {
    color: var(--text2);
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.25);
}
.search-entry {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.search-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.search-entry:first-child { padding-top: 4px; }
.search-entry-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold2);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    /* Override the generic .search-box a dashed underline — the
       title is its own block-level anchor, the snippet describes it,
       so the dashed underline reads as noise here. */
    border-bottom: 0;
}
.search-entry-title:hover {
    color: var(--gold);
    text-decoration: underline;
    border-bottom: 0;
}
.search-snippet {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}
@media (max-width: 720px) {
    .search-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .search-title { font-size: 22px; }
    .search-meta { font-size: 13px; }
    .search-intro { font-size: 13px; }
    .search-box p { font-size: 14.5px; }
    .search-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .search-form { gap: 8px; }
    .search-input { font-size: 13.5px; padding: 10px 12px; min-width: 100%; }
    .search-submit { width: 100%; }
    .search-status { font-size: 12.5px; }
    .search-entry-title { font-size: 14px; }
    .search-snippet { font-size: 12.5px; }
    .search-count { font-size: 10px; }
}

/* Platform Public View — Position-Held card pattern. Shareable
   /p/{uid} profile, no auth. Card width 720px. Title = UID in
   gold gradient (small-caps Cinzel Decorative); meta line carries
   "Platform — Size" + colour swatch dot. Boxes: Status (online /
   offline pill + registered date), Map (full-bleed Leaflet tile,
   dark CartoDB basemap, gold marker). Closing CTA: Share +
   Get-your-own. Caption = slogan. */
#pubplat-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.pubplat-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.pubplat-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 10px;
}
.pubplat-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.pubplat-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    vertical-align: middle;
    margin-left: 4px;
}
.pubplat-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.pubplat-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.pubplat-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.pubplat-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.pubplat-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.pubplat-pill {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 3px 12px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pubplat-pill-online {
    color: var(--gold);
    border: 1px solid var(--gold);
    background: rgba(201,168,76,0.08);
}
.pubplat-pill-sleeping {
    color: #7ab3d4;
    border: 1px solid rgba(122,179,212,0.55);
    background: rgba(122,179,212,0.07);
}
.pubplat-pill-offline {
    color: rgba(160,176,192,0.85);
    border: 1px solid rgba(160,176,192,0.55);
}
.pubplat-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.6);
    display: inline-block;
}
.pubplat-seen {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.pubplat-mono {
    font-family: Consolas, monospace;
    color: var(--text);
}
.pubplat-map {
    margin: 4px 0 0;
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 4px;
    overflow: hidden;
}
.pubplat-map #pmap {
    height: 240px;
    width: 100%;
}
.pubplat-map .leaflet-container {
    background: var(--bg2) !important;
}
.pubplat-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.pubplat-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.pubplat-btn-ghost {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}
.pubplat-share-msg {
    display: none;
    text-align: center;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-top: 10px;
}
@media (max-width: 720px) {
    .pubplat-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .pubplat-title { font-size: 22px; }
    .pubplat-meta { font-size: 13px; }
    .pubplat-box p { font-size: 14.5px; }
    .pubplat-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .pubplat-pill { font-size: 10px; padding: 2px 10px; }
    .pubplat-seen { font-size: 12.5px; }
    .pubplat-map #pmap { height: 200px; }
    .pubplat-share-msg { font-size: 11px; }
}

/* Platform Not Found — Position-Held card pattern. Single-box short
   confirmation: crossed-circle glyph + explanatory message + CTA to
   /catalog. Default 720px width. */
#platnotfound-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.platnotfound-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.platnotfound-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.platnotfound-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    border-bottom: 1px solid rgba(201,168,76,0.55);
    padding: 26px 0;
    margin: 0;
    text-align: left;
}
.platnotfound-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.platnotfound-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: center;
}
.platnotfound-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
}
.platnotfound-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.platnotfound-glyph {
    text-align: center;
    margin: 4px 0 18px;
    opacity: 0.55;
}
.platnotfound-cta {
    margin-top: 22px;
    text-align: center;
}
@media (max-width: 720px) {
    .platnotfound-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .platnotfound-title { font-size: 22px; }
    .platnotfound-box p { font-size: 14.5px; }
    .platnotfound-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .platnotfound-glyph svg { width: 48px; height: 48px; }
}

/* Checkout Address — Position-Held card pattern. Step 1 of checkout
   (address collection). Card 720px. Boxes: optional error banner,
   order summary (line items + total + back-to-cart link), street
   address field, city + zip side-by-side, country autocomplete,
   optional VAT ID with hint. Closes with submit-button CTA + slogan
   caption. Inputs use system sans-serif (Cinzel small-caps would
   confuse users typing addresses); autocomplete widget DOM
   (.autocomplete-wrap / #country-input / #country-list) preserved
   verbatim so the existing inline script keeps binding. */
#checkout-address-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.checkout-address-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.checkout-address-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.checkout-address-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.checkout-address-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.checkout-address-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: left;
}
.checkout-address-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.checkout-address-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.checkout-address-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Error banner */
.checkout-address-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.checkout-address-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Order summary — gold-dot bullet list mirroring .partners-list. */
.checkout-address-summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.checkout-address-summary-row {
    position: relative;
    padding: 8px 0 8px 20px;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}
.checkout-address-summary-row:last-child { border-bottom: 0; }
.checkout-address-summary-row::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.5);
}
.checkout-address-summary-item {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.checkout-address-summary-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--gold);
}
.checkout-address-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(201,168,76,0.25);
}
.checkout-address-summary-total-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.checkout-address-summary-total-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 0.04em;
    color: var(--gold);
}
/* Form fields */
.checkout-address-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.checkout-address-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}
.checkout-address-field:last-child { margin-bottom: 0; }
.checkout-address-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
    text-align: left;
}
/* Inputs use system sans-serif — the brand serif (Cinzel / IM Fell)
   renders some lowercase glyphs as small-caps and users have entered
   wrong values as a result. Pinned across all card pages. */
.checkout-address-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(6, 6, 15, 0.55);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 10px 12px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.checkout-address-input:hover {
    border-color: rgba(201,168,76,0.45);
}
.checkout-address-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(6, 6, 15, 0.75);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.10);
}
.checkout-address-hint {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-top: 4px;
    text-align: left;
}
/* CTA */
.checkout-address-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.checkout-address-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .checkout-address-card { padding: 32px 24px 28px; margin: 80px auto 40px; max-width: 100%; }
    .checkout-address-title { font-size: 22px; }
    .checkout-address-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .checkout-address-box p { font-size: 14.5px; }
    .checkout-address-status { font-size: 12.5px; }
    .checkout-address-summary-item { font-size: 13px; }
    .checkout-address-summary-price { font-size: 15px; }
    .checkout-address-summary-total-label { font-size: 14px; }
    .checkout-address-summary-total-value { font-size: 20px; }
    .checkout-address-field-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .checkout-address-label { font-size: 10px; }
    .checkout-address-input { font-size: 14px; padding: 10px 12px; }
    .checkout-address-hint { font-size: 11.5px; }
}

/* Checkout Payment — Position-Held card pattern. Card width 820px to
   fit the per-size summary row (size / nav-color / price / remove) and
   the wide pay-tabs / Stripe Element on one line. Each meaningful
   section (address review, summary, coupon, total, terms, payment
   method, secure-back) becomes a .checkout-payment-box. Variant
   tinted banner boxes (.checkout-payment-status-ok /
   .checkout-payment-status-err) hold Stripe / coupon
   success/error messages so they slot into the divider rhythm. The
   pay-tab / pay-summary helper classes are CSS-only — they don't
   override the load-bearing JS ids (#tab-card, #tab-revolut,
   #section-card, #section-revolut, #card-element, #card-loading,
   #card-errors, #pay-btn, #revolut-form, #revolut-btn,
   #revolut-terms-field, #btn-card-pay, #terms-agree, #terms-wrap,
   #sr-<size>). */
#checkout-payment-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.checkout-payment-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.checkout-payment-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.checkout-payment-meta {
    font-family: 'Cinzel', serif;
    color: var(--gold2);
    margin-bottom: 14px;
}
.checkout-payment-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.7;
    margin: 0 auto 6px;
}
.checkout-payment-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.checkout-payment-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.checkout-payment-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.checkout-payment-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.checkout-payment-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.checkout-payment-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Tinted variant boxes for Stripe / coupon banners */
.checkout-payment-status-ok {
    background: rgba(var(--ok-rgb),0.06);
}
.checkout-payment-status-ok .checkout-payment-box-label {
    color: #6fd47a;
}
.checkout-payment-status-ok p {
    color: #c7e9c9;
}
.checkout-payment-status-err {
    background: rgba(var(--err-rgb),0.06);
}
.checkout-payment-status-err .checkout-payment-box-label {
    color: var(--err-text);
}
.checkout-payment-status-err p {
    color: var(--err-text);
}
/* Coupon / Stripe status banners: icon + message on ONE line, with breathing
   room from the tinted edge. The base box has vertical padding only (22px 0),
   which left the content flush against the tint and stacked the icon above the
   text. Scoped to the status variants so the plain payment-method boxes keep
   their divider-row heading layout. */
.checkout-payment-status-ok,
.checkout-payment-status-err {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    margin: 14px 0;
    border-top: none;
    border-radius: 8px;
}
.checkout-payment-status-ok:last-of-type,
.checkout-payment-status-err:last-of-type {
    border-bottom: none;
}
.checkout-payment-status-ok .checkout-payment-box-label,
.checkout-payment-status-err .checkout-payment-box-label {
    margin: 0;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
}
.checkout-payment-status-ok p,
.checkout-payment-status-err p {
    margin: 0;
    line-height: 1.4;
}

/* Order summary rows */
.pay-summary-lines {
    display: flex;
    flex-direction: column;
}
.pay-summary-row {
    display: grid;
    grid-template-columns: 140px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.pay-summary-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.pay-summary-row:first-child { padding-top: 4px; }
.pay-summary-size {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold2);
    white-space: nowrap;
}
.pay-summary-color {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.pay-summary-color .color-option {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
}
.pay-summary-color .sr-color-name {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13px;
    letter-spacing: 0.04em;
}
.pay-summary-color .sr-counter {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--text2);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.pay-summary-nav-btn {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.55);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pay-summary-nav-btn:hover {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
}
.pay-summary-nav-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.pay-summary-price {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-align: right;
    min-width: 60px;
}
.pay-summary-remove-form {
    display: inline;
    margin: 0;
}
.pay-summary-remove-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.pay-summary-remove-btn:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Coupon */
.pay-coupon-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pay-coupon-code {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--gold);
    font-size: 16px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.pay-coupon-amount {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.pay-coupon-remove-form { margin: 0; }
.pay-coupon-remove-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--err-text);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 1px dashed rgba(var(--err-rgb),0.45);
}
.pay-coupon-remove-btn:hover {
    color: var(--err-text);
    border-bottom-color: var(--err-text);
}
.pay-coupon-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
}
.pay-coupon-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg2);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pay-coupon-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}
.pay-coupon-apply-btn {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
}

/* Total */
.pay-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
}
.pay-total-original {
    text-decoration: line-through;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 16px;
}
.pay-total-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--gold);
}

/* Terms */
.pay-terms-wrap {
    padding: 14px;
    background: var(--bg2);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.pay-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 0;
}
.pay-terms-check {
    margin-top: 3px;
    accent-color: var(--gold);
    min-width: 16px;
    width: 16px;
    height: 16px;
}

/* Payment tabs */
.pay-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201,168,76,0.35);
}
.pay-tab {
    flex: 1;
    padding: 12px;
    background: var(--bg2);
    color: var(--text2);
    border: none;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}
.pay-tab-active {
    background: var(--gold);
    color: #000;
}
.pay-tab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}
.pay-section-hidden { display: none; }

/* Stripe card element */
.pay-card-element {
    padding: 14px;
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    margin-bottom: 12px;
    min-height: 44px;
}
.pay-card-loading {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    text-align: center;
    line-height: 44px;
    letter-spacing: 0.04em;
}
.pay-card-errors {
    color: var(--err-text);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 18px;
}

/* Revolut block */
.pay-revolut-note {
    color: var(--text2) !important;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    margin-bottom: 16px !important;
    text-align: center !important;
}
.pay-revolut-btn {
    background: #0075EB !important;
    border-color: #0075EB !important;
    color: #fff !important;
}

/* CTA + Back */
.pay-cta-wrap { margin-top: 4px; }
.pay-secure-note {
    text-align: center;
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.pay-secure-line { margin-bottom: 4px; }
.pay-secure-line:last-child { margin-bottom: 0; }

/* Caption */

@media (max-width: 720px) {
    .checkout-payment-card { padding: 32px 22px 28px; margin: 80px auto 40px; max-width: 100%; }
    .checkout-payment-title { font-size: 22px; }
    .checkout-payment-meta { font-size: 12px; }
    .checkout-payment-intro { font-size: 11.5px; letter-spacing: 0.18em; }
    .checkout-payment-box p { font-size: 14.5px; }
    .checkout-payment-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .pay-summary-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "size price"
            "color color"
            "remove remove";
        gap: 8px;
        padding: 14px 0;
    }
    .pay-summary-size { grid-area: size; font-size: 14px; }
    .pay-summary-color { grid-area: color; justify-content: flex-start; flex-wrap: wrap; }
    .pay-summary-price { grid-area: price; min-width: 0; font-size: 15px; }
    .pay-summary-remove-form { grid-area: remove; text-align: right; }
    .pay-coupon-form { flex-direction: column; align-items: stretch; }
    .pay-coupon-apply-btn { width: 100%; }
    .pay-coupon-applied { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pay-total-value { font-size: 22px; }
    .pay-total-original { font-size: 14px; }
    .pay-tab { font-size: 12.5px; padding: 10px 8px; }
    .pay-terms-label { font-size: 13px; }
    .pay-secure-note { font-size: 12px; }
}

/* Checkout Success — Position-Held card pattern. Confirmation box
   (UIDs + email-sent note) → optional summary box (items + total) →
   optional address box → CTA back to /dashboard. UIDs render large
   mono gold so the buyer can transcribe them from the page if the
   confirmation email fails. */
#checkoutsuccess-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.checkoutsuccess-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.checkoutsuccess-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.checkoutsuccess-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 22px;
}
.checkoutsuccess-meta strong {
    font-style: normal;
    color: var(--text);
    letter-spacing: 0.08em;
}
.checkoutsuccess-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.checkoutsuccess-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.checkoutsuccess-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.checkoutsuccess-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.checkoutsuccess-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline dashed rgba(201,168,76,0.5);
    text-underline-offset: 3px;
}
.checkoutsuccess-box a:not(.btn):hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}
.checkoutsuccess-uids {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin: 6px 0 14px;
}
.checkoutsuccess-uid {
    font-family: Consolas, monospace;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.18em;
    color: var(--gold);
    border: 1px solid rgba(201,168,76,0.45);
    border-radius: 8px;
    padding: 10px 18px;
    background: rgba(201,168,76,0.06);
}
.checkoutsuccess-email-note {
    text-align: center !important;
    color: var(--text2) !important;
    font-size: 13.5px !important;
    margin: 6px 0 0 !important;
}
.checkoutsuccess-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.checkoutsuccess-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    color: var(--text);
    padding: 8px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.checkoutsuccess-line:last-child { border-bottom: 0; }
.checkoutsuccess-line-info {
    text-transform: capitalize;
}
.checkoutsuccess-line-color {
    color: var(--text2);
    text-transform: capitalize;
}
.checkoutsuccess-line-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: var(--gold);
    letter-spacing: 0.04em;
}
.checkoutsuccess-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(201,168,76,0.25);
}
.checkoutsuccess-total-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.checkoutsuccess-total-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--gold);
}
.checkoutsuccess-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.checkoutsuccess-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .checkoutsuccess-card { padding: 32px 24px 28px; margin: 80px auto 40px; max-width: 100%; }
    .checkoutsuccess-title { font-size: 22px; }
    .checkoutsuccess-meta { font-size: 13px; }
    .checkoutsuccess-box p { font-size: 14.5px; }
    .checkoutsuccess-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .checkoutsuccess-uid { font-size: 20px; letter-spacing: 0.14em; padding: 8px 14px; }
    .checkoutsuccess-email-note { font-size: 12.5px !important; }
    .checkoutsuccess-line { font-size: 13px; gap: 10px; }
    .checkoutsuccess-line-price { font-size: 15px; }
    .checkoutsuccess-total-label { font-size: 14px; }
    .checkoutsuccess-total-value { font-size: 22px; }
}

/* Payment Cancelled — Position-Held card pattern. Short confirmation
   surface after Stripe/Revolut returns the user to /payment/cancel.
   Single .payment-cancel-box with reassurance copy + gold X glyph;
   CTA strip with retry + catalog + contact. Mirrors /forgot-password
   DNA (single ambient canvas + gold-bordered card + box divider
   rhythm + Cinzel Decorative title). */
#payment-cancel-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.payment-cancel-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.payment-cancel-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.payment-cancel-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.payment-cancel-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.payment-cancel-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.payment-cancel-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.payment-cancel-box p:last-child { margin-bottom: 0; }
/* Inline links inside the box body — dashed gold underline, mirrors
   the /credits + /forgot-password rule. Explicitly excludes .btn so
   the CTA anchors stay clean (no dashed line under the buttons). */
.payment-cancel-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.payment-cancel-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.payment-cancel-box strong { color: var(--text); }
/* Cancel glyph — small gold X centered inside the box, sits above
   the reassurance copy as a quiet visual anchor for the cancel state. */
.payment-cancel-glyph {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}
/* CTA strip — primary retry + secondary catalog/contact ghost
   buttons share the closing border rhythm of the card. */
.payment-cancel-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.payment-cancel-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .payment-cancel-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .payment-cancel-title { font-size: 22px; }
    .payment-cancel-box p { font-size: 14.5px; }
    .payment-cancel-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .payment-cancel-glyph svg { width: 40px; height: 40px; }
    .payment-cancel-cta-buttons { gap: 10px; }
}

/* Invoice — Position-Held card pattern. Card width 820px to give the
   items table + totals grid room. Boxes (top-divided, last bottom-
   divided): Seller, Buyer, Items (themed table inside .invoice-items-
   wrap), Totals (right-aligned numerics with gold grand-total rule),
   Payment + legal notice. CTA holds Print primary + muted back link.
   Print @media (kept inline in the function) strips chrome to black-
   on-white for paper output. */
#invoice-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.invoice-card {
    width: 100%;
    max-width: 820px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.invoice-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.invoice-meta {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.7;
    letter-spacing: 0.03em;
    margin: 0 auto 4px;
}
.invoice-meta strong {
    color: var(--gold2);
    font-weight: 700;
}
.invoice-brand {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.28em;
    color: var(--gold);
    margin: 14px auto 8px;
}
.invoice-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.invoice-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.invoice-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.invoice-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.invoice-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.invoice-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.invoice-party {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.75;
    letter-spacing: 0.03em;
}
.invoice-party strong {
    color: var(--gold2);
    font-weight: 700;
}
.invoice-items-wrap {
    overflow-x: auto;
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 4px;
}
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cinzel', serif;
}
.invoice-th {
    padding: 12px 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border-bottom: 1px solid rgba(201,168,76,0.35);
    font-weight: 600;
}
.invoice-th-left   { text-align: left; }
.invoice-th-center { text-align: center; }
.invoice-th-right  { text-align: right; }
.invoice-td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    letter-spacing: 0.03em;
}
.invoice-td-left   { text-align: left; }
.invoice-td-center { text-align: center; }
.invoice-td-right  { text-align: right; font-family: Consolas, monospace; }
.invoice-tr-last .invoice-td { border-bottom: 0; }
.invoice-totals-wrap {
    display: flex;
    justify-content: flex-end;
}
.invoice-totals {
    border-collapse: collapse;
    min-width: 320px;
    font-family: 'Cinzel', serif;
}
.invoice-totals-key {
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--text2);
    text-align: left;
    letter-spacing: 0.04em;
}
.invoice-totals-val {
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--text);
    text-align: right;
    font-family: Consolas, monospace;
}
.invoice-totals-discount { color: var(--ok); }
.invoice-totals-vat {
    border-bottom: 1px solid rgba(201,168,76,0.35);
    padding-bottom: 10px;
}
.invoice-totals-grand {
    padding-top: 12px;
    font-size: 18px;
    font-weight: 700;
    border-top: 2px solid var(--gold);
    color: var(--gold);
    letter-spacing: 0.04em;
}
td.invoice-totals-grand.invoice-totals-val {
    font-family: Consolas, monospace;
    color: var(--gold);
}
.invoice-pay {
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    color: var(--text);
    letter-spacing: 0.03em;
}
.invoice-legal {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin-top: 10px;
}
.invoice-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
    text-align: center;
}
.invoice-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 820px) {
    .invoice-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .invoice-title { font-size: 22px; }
    .invoice-meta { font-size: 12.5px; }
    .invoice-brand { font-size: 12px; letter-spacing: 0.22em; }
    .invoice-box-label { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 10px; }
    .invoice-party { font-size: 13px; }
    .invoice-th { font-size: 10px; letter-spacing: 0.14em; padding: 10px 10px; }
    .invoice-td { font-size: 13px; padding: 10px 10px; }
    .invoice-totals { min-width: 0; width: 100%; }
    .invoice-totals-key, .invoice-totals-val { font-size: 12.5px; padding: 7px 10px; }
    .invoice-totals-grand { font-size: 16px; }
    .invoice-pay { font-size: 13.5px; }
    .invoice-legal { font-size: 11.5px; }
    .invoice-back a { font-size: 12px; }
}

/* Refund Request — Position-Held card pattern. Card width 720px.
   Boxes: status banner (err/ok), Intro, New Request form (select +
   select + textarea + fine-print + submit), empty-state when no
   eligible orders, My Requests (list of .refund-entry with status
   pill + key/value grid). Form inputs use system sans-serif so the
   brand serif's small-caps glyphs do not trick the user about what
   they typed; description preserves resize:vertical so the legacy
   reflow behaviour survives. muted
   back-to-orders link sits as post-card meta. */
#refund-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.refund-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.refund-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.refund-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.refund-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.refund-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.refund-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
/* Inline links inside box bodies — dashed gold underline.
   `a:not(.btn)` so the CTA button never inherits the dashed line. */
.refund-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
    transition: color 0.2s, border-color 0.2s;
}
.refund-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Status banner — variant classes pick the colour. */
.refund-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.refund-status-ok {
    color: var(--ok);
    background: rgba(var(--ok-rgb),0.10);
    border: 1px solid rgba(var(--ok-rgb),0.35);
}
.refund-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form layout — stacked fields with gold label + system-sans input. */
.refund-form {
    margin: 0;
    padding: 0;
    display: block;
}
.refund-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.refund-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
}
.refund-select,
.refund-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(6, 6, 15, 0.55);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    color: var(--text);
    /* System sans — Cinzel/IM Fell render lowercase as small-caps-ish
       glyphs at form sizes, which made typed text look ALL CAPS and
       broke recognition of what the user typed. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 10px 12px;
    transition: border-color 0.2s, background 0.2s;
}
.refund-select {
    appearance: auto;
}
.refund-textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.6;
}
.refund-select:hover,
.refund-textarea:hover {
    border-color: rgba(201,168,76,0.45);
}
.refund-select:focus,
.refund-textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(6, 6, 15, 0.75);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.10);
}
.refund-fineprint {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin: 0 0 18px;
    text-align: left;
}
.refund-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 4px;
}
.refund-cta .btn { min-width: 220px; }
.refund-empty {
    font-family: 'Cinzel', serif;
    font-style: italic;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    margin: 0;
    padding: 12px 0;
}
/* My Requests entry — ref + status pill row, then a definition-list
   grid for the structured fields. */
.refund-entry {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.refund-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.refund-entry:first-child { padding-top: 4px; }
.refund-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.refund-entry-ref {
    font-family: Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold2);
    text-decoration: none;
    letter-spacing: 0.04em;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
    transition: color 0.2s, border-color 0.2s;
}
.refund-entry-ref:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.refund-pill {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    line-height: 1.4;
}
.refund-pill-ok      { color: var(--ok); background: rgba(var(--ok-rgb),0.10); }
.refund-pill-err     { color: var(--err-text); background: rgba(var(--err-rgb),0.10); }
.refund-pill-pending { color: #f4c430; background: rgba(244,196,48,0.10); }
.refund-pill-review  { color: #60a5fa; background: rgba(96,165,250,0.10); }
.refund-kv {
    display: grid;
    grid-template-columns: minmax(120px, 35%) 1fr;
    column-gap: 14px;
    row-gap: 4px;
    margin: 0;
}
.refund-kv dt {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 12.5px;
    letter-spacing: 0.04em;
}
.refund-kv dd {
    font-family: 'Cinzel', serif;
    color: var(--text);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.55;
    word-break: break-word;
}
@media (max-width: 720px) {
    .refund-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .refund-title { font-size: 22px; }
    .refund-box p { font-size: 14.5px; }
    .refund-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .refund-label { font-size: 10px; letter-spacing: 0.16em; }
    .refund-select, .refund-textarea { font-size: 13.5px; padding: 10px 12px; }
    .refund-status { font-size: 12.5px; }
    .refund-fineprint { font-size: 11.5px; }
    .refund-cta .btn { min-width: 0; width: 100%; }
    .refund-entry-ref { font-size: 13px; }
    .refund-pill { font-size: 10px; letter-spacing: 0.12em; }
    .refund-kv {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
    .refund-kv dt {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 6px;
    }
    .refund-kv dd { font-size: 13px; }
    .refund-back { font-size: 12.5px; margin-top: -28px; }
}

/* Verify Sent — Position-Held card pattern. Short confirmation flow
   after /register. The whole card is wrapped in a single <form
   action="/resend-verify"> so the .verify-sent-cta submit re-fires
   the verification mail atomically. Boxes: Sent (intro + email +
   spam note), optional Resend (only when email is unknown — single
   email input), Sign-in cross-link back to /login. CTA submit at
   the bottom. Inputs use system
   sans-serif so the brand serif's small-caps-style lowercase
   doesn't trick the user into mistyping their email. Mirrors the
   /forgot-password rhythm. */
#verify-sent-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.verify-sent-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.verify-sent-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.verify-sent-form { margin: 0; }
.verify-sent-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.verify-sent-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.verify-sent-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.verify-sent-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.verify-sent-box p:last-child { margin-bottom: 0; }
/* Muted intro line — spam-folder reminder + (when email unknown)
   the resend explanation above the input field. */
.verify-sent-intro {
    color: var(--text2) !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.verify-sent-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.verify-sent-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.verify-sent-box strong { color: var(--text); }
/* Form field — single email input, only rendered when the email is
   unknown. Mirrors .forgot-input. */
.verify-sent-field {
    display: block;
    margin-bottom: 6px;
}
.verify-sent-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — brand Cinzel/IM Fell serif renders
       lowercase as small-caps glyphs which makes users mistype
       email. Same fix as /login + /register + /reset + /forgot. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.verify-sent-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — resend submit + caption */
.verify-sent-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.verify-sent-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .verify-sent-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .verify-sent-title { font-size: 22px; }
    .verify-sent-box p { font-size: 14.5px; }
    .verify-sent-intro { font-size: 12.5px !important; }
    .verify-sent-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .verify-sent-input { font-size: 13.5px; padding: 10px 12px; }
}

/* Email Verified — Position-Held card pattern. Short confirmation page
   after the one-time verification link is consumed. Single
   .verify-success-box carries the confirmation message; CTA holds the
   "continue to sign-in" link. Mirrors
   .forgot/.reset rhythm so the post-link landing feels visually
   continuous with the recovery flow. */
#verify-success-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.verify-success-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.verify-success-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.verify-success-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.verify-success-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.verify-success-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.verify-success-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.verify-success-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean. */
.verify-success-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.verify-success-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.verify-success-box strong { color: var(--text); }
/* CTA — primary "continue to sign-in" button + caption */
.verify-success-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.verify-success-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .verify-success-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .verify-success-title { font-size: 22px; }
    .verify-success-box p { font-size: 14.5px; }
    .verify-success-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Verify Failed — Position-Held card pattern. Card width 720px.
   Boxes (top-divided, last bottom-divided): error status banner,
   Resend (wraps the /resend-verify <form> with a system sans-serif
   email input), Sign in cross-link. CTA row holds a primary "Back
   to sign in" anchor. */
#verify-fail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.verify-fail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.verify-fail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.verify-fail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.verify-fail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.verify-fail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.verify-fail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.verify-fail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so CTA / button-anchors stay clean. */
.verify-fail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.verify-fail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.verify-fail-box strong { color: var(--text); }
/* Status banner — red error tint (verification link invalid/expired).
   Mirrors .forgot-status-err so the visual language stays consistent
   across the auth flow. */
.verify-fail-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.verify-fail-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.verify-fail-form { margin: 0; }
.verify-fail-field {
    display: block;
    margin-bottom: 12px;
}
.verify-fail-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — brand Cinzel/IM Fell serif renders lowercase
       as small-caps glyphs which makes users mistype their email.
       Same fix as /login + /register + /forgot-password + /reset. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.verify-fail-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
.verify-fail-form-actions {
    display: flex; gap: 12px;
    justify-content: flex-start; flex-wrap: wrap;
    margin-top: 4px;
}
@media (max-width: 720px) {
    .verify-fail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .verify-fail-title { font-size: 22px; }
    .verify-fail-box p { font-size: 14.5px; }
    .verify-fail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .verify-fail-status { font-size: 12.5px; }
    .verify-fail-input { font-size: 13.5px; padding: 10px 12px; }
}

/* Reset Sent — Position-Held card pattern. Short confirmation page
   shown after /forgot-password POST; mirrors /forgot DNA (same
   gold-bordered card + ambient halo + divider rhythm) but with a
   single acknowledgement box and a back-to-login CTA. No <input>
   elements so no system-sans override needed; bold echo of the
   email address uses the regular body Cinzel weight. */
#reset-sent-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.reset-sent-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.reset-sent-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.reset-sent-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.reset-sent-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.reset-sent-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.reset-sent-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.reset-sent-box p:last-child { margin-bottom: 0; }
.reset-sent-box strong { color: var(--text); }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean (cookies bug
   guard: dashed underline on .btn looks broken on hover). */
.reset-sent-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.reset-sent-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* CTA — single back-to-login button. */
.reset-sent-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.reset-sent-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .reset-sent-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .reset-sent-title { font-size: 22px; }
    .reset-sent-box p { font-size: 14.5px; }
    .reset-sent-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Reset Success — Position-Held card pattern. Short confirmation
   page shown after a successful password reset POST. A single
   .reset-success-box (with the .reset-success-status-ok tint so the
   success state reads at a glance) carries the confirmation copy;
   CTA below sends the user back to /login. Mirrors the /reset-password box
   rhythm so the two pages
   read as one flow. */
#reset-success-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.reset-success-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.reset-success-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.reset-success-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.reset-success-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.reset-success-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.reset-success-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.reset-success-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA anchor stays clean. */
.reset-success-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.reset-success-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.reset-success-box strong { color: var(--text); }
/* Success tint — green-gold edge so the confirmation reads at a
   glance without breaking the divider rhythm (variant only — keeps
   the same top/bottom dividers, just adds a soft gold-leaf wash). */
.reset-success-status-ok {
    background: linear-gradient(180deg,
        rgba(201,168,76,0.04) 0%,
        rgba(201,168,76,0.00) 100%);
}
.reset-success-status-ok .reset-success-box-label { color: var(--gold); }
.reset-success-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.reset-success-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .reset-success-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .reset-success-title { font-size: 22px; }
    .reset-success-box p { font-size: 14.5px; }
    .reset-success-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Change Email Sent — Position-Held confirmation card. Short pattern:
   single .chgemailsent-box with the "verification dispatched" message
   (masked new address in monospace) + a muted hint to check the OLD
   inbox + CTA back to dashboard. Mirrors change-email's parent card
   chrome (border, gold halo, ambient canvas) so the flow reads as
   continuous. */
#chgemailsent-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.chgemailsent-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.chgemailsent-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.chgemailsent-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    border-bottom: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.chgemailsent-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.chgemailsent-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.chgemailsent-box p:last-child { margin-bottom: 0; }
.chgemailsent-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.chgemailsent-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.chgemailsent-box strong { color: var(--text); }
/* Masked new email — monospace + gold so the user can confirm the
   destination address at a glance without serif small-caps confusion. */
.chgemailsent-email {
    color: var(--gold) !important;
    font-family: Consolas, "SF Mono", Menlo, Monaco, monospace;
    font-size: 14.5px;
    letter-spacing: 0.02em;
}
/* Secondary hint paragraph — dimmer so it reads as a footnote
   ("check your OLD inbox if it doesn't arrive"). */
.chgemailsent-muted {
    color: var(--text2) !important;
    font-size: 13.5px !important;
}
/* CTA — single dashboard return */
.chgemailsent-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.chgemailsent-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .chgemailsent-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .chgemailsent-title { font-size: 22px; }
    .chgemailsent-box p { font-size: 14.5px; }
    .chgemailsent-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .chgemailsent-email { font-size: 13px; }
    .chgemailsent-muted { font-size: 12.5px !important; }
}

/* Change Email Success — Position-Held card pattern. Short confirmation
   page: single .ces-box with the success message + CTA back to dashboard.
   Slug "ces" instead of "change-email-success" to keep selectors short. */
#ces-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.ces-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.ces-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.ces-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.ces-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.ces-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.ces-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.ces-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.ces-box a:not(.btn):hover {
    color: var(--gold);
}
.ces-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.ces-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .ces-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .ces-title { font-size: 22px; }
    .ces-box p { font-size: 14.5px; }
    .ces-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Change Email Failed — Position-Held card pattern. Short confirmation
   page surfaced when the email-change verification token is invalid or
   expired. Single .changeemailfail-box wraps the err-tinted status
   banner; CTA row sends the user back to /login. Card width 720px. */
#changeemailfail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.changeemailfail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.changeemailfail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.changeemailfail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.changeemailfail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.changeemailfail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.changeemailfail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.changeemailfail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA anchor stays clean. */
.changeemailfail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.changeemailfail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.changeemailfail-box strong { color: var(--text); }
/* Status banner — error variant carries red palette. */
.changeemailfail-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.changeemailfail-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* CTA — back-to-login button row */
.changeemailfail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.changeemailfail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .changeemailfail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .changeemailfail-title { font-size: 22px; }
    .changeemailfail-box p { font-size: 14.5px; }
    .changeemailfail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .changeemailfail-status { font-size: 12.5px; }
}

/* Change Password Success — Position-Held card pattern. Short
   confirmation page: single .changepwok-box carrying the success
   message (gold-tinted status variant) + CTA back to dashboard.
   Mirrors the sibling .changepw-* form page so the two screens read
   as one flow. */
#changepwok-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.changepwok-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.changepwok-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.changepwok-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.changepwok-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.changepwok-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.changepwok-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.changepwok-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.changepwok-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.changepwok-box p:last-child { margin-bottom: 0; }
.changepwok-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.changepwok-box a:not(.btn):hover {
    color: var(--gold);
}
.changepwok-box strong { color: var(--text); }
.changepwok-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.changepwok-status-ok {
    color: var(--gold2);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
.changepwok-cta {
    margin-top: 28px;
    text-align: center;
}
.changepwok-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.changepwok-cta-help {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13px;
    line-height: 1.6;
    margin: 14px 0 0;
}
.changepwok-cta-help a {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.changepwok-cta-help a:hover {
    color: var(--gold);
}
@media (max-width: 720px) {
    .changepwok-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .changepwok-title { font-size: 22px; }
    .changepwok-meta { font-size: 13px; }
    .changepwok-intro { font-size: 13px; }
    .changepwok-box p { font-size: 14.5px; }
    .changepwok-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .changepwok-status { font-size: 12.5px; }
    .changepwok-cta-help { font-size: 12.5px; }
}

/* Magic Link Request — Position-Held card pattern. The whole card is
   wrapped in a single <form> so the .mlr-cta submit posts email +
   CSRF token atomically. Boxes (top-divided, last bottom-divided):
   optional error banner (.mlr-status-err), Intro, Email (system
   sans-serif input), Password cross-link. CTA holds the submit
   button; muted legal note. */
#mlr-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.mlr-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.mlr-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.mlr-form { margin: 0; }
.mlr-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.mlr-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.mlr-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.mlr-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.mlr-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.mlr-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.mlr-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.mlr-box strong { color: var(--text); }
/* Error banner */
.mlr-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.mlr-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.mlr-field {
    display: block;
    margin-bottom: 6px;
}
.mlr-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mlr-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — submit + legal note + caption */
.mlr-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.mlr-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
.mlr-legal {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin: 18px 0 0;
    text-align: center;
}
@media (max-width: 720px) {
    .mlr-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .mlr-title { font-size: 22px; }
    .mlr-box p { font-size: 14.5px; }
    .mlr-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .mlr-input { font-size: 13.5px; padding: 10px 12px; }
    .mlr-status { font-size: 12.5px; }
    .mlr-legal { font-size: 11px; }
}

/* Magic Link Sent — Position-Held card pattern. Short confirmation
   landing after POST /login/magic. Two boxes: Inbox (masked email +
   spam/retry link) and Legal (small-print closer). No form, no inputs
   — just the in-context retry anchor styled with the canonical dashed
   gold underline via .magic-link-sent-box a:not(.btn). Mirrors the
   /credits + /forgot rhythm at the 720px default width. */
#magic-link-sent-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.magic-link-sent-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.magic-link-sent-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.magic-link-sent-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.magic-link-sent-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.magic-link-sent-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.magic-link-sent-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.magic-link-sent-box p:last-child { margin-bottom: 0; }
.magic-link-sent-box strong { color: var(--gold2); }
/* Spam-note line — muted secondary paragraph under the Inbox confirmation,
   so it doesn't compete visually with the masked email line. */
.magic-link-sent-spam {
    color: var(--text2) !important;
    font-size: 13.5px !important;
}
/* Legal small-print closer — even more muted than the spam line. */
.magic-link-sent-legal {
    color: var(--text2) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so any future CTA stays clean. */
.magic-link-sent-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.magic-link-sent-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
    .magic-link-sent-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .magic-link-sent-title { font-size: 22px; }
    .magic-link-sent-box p { font-size: 14.5px; }
    .magic-link-sent-spam { font-size: 12.5px !important; }
    .magic-link-sent-legal { font-size: 11.5px !important; }
    .magic-link-sent-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Magic-link fail — Position-Held card pattern. Generic landing for
   a sign-in link that is expired, already consumed, or unknown. Single
   body box (intentionally vague wording so the response is identical
   for any failure cause — no oracle for token existence), CTA back to
   /login/magic. */
#magic-link-fail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.magic-link-fail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.magic-link-fail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.magic-link-fail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.magic-link-fail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.magic-link-fail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.magic-link-fail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.magic-link-fail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA anchor stays clean. */
.magic-link-fail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.magic-link-fail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.magic-link-fail-box strong { color: var(--text); }
/* CTA — single retry button */
.magic-link-fail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.magic-link-fail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .magic-link-fail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .magic-link-fail-title { font-size: 22px; }
    .magic-link-fail-box p { font-size: 14.5px; }
    .magic-link-fail-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Unsubscribe Confirm — Position-Held card pattern. The whole card
   is wrapped in a single <form> so the .unsubscribe-confirm-cta submit
   posts the hidden one-time token atomically. One .unsubscribe-confirm-box
   carries the explanation text — short confirmation flow, no extra
   subdivisions. CTA holds the submit button. */
#unsubscribe-confirm-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.unsubscribe-confirm-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.unsubscribe-confirm-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.unsubscribe-confirm-form { margin: 0; }
.unsubscribe-confirm-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.unsubscribe-confirm-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.unsubscribe-confirm-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.unsubscribe-confirm-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.unsubscribe-confirm-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.unsubscribe-confirm-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.unsubscribe-confirm-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.unsubscribe-confirm-box strong { color: var(--text); }
/* CTA — submit + caption */
.unsubscribe-confirm-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.unsubscribe-confirm-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .unsubscribe-confirm-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .unsubscribe-confirm-title { font-size: 22px; }
    .unsubscribe-confirm-box p { font-size: 14.5px; }
    .unsubscribe-confirm-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Unsubscribe-success — Position-Held card pattern. Short confirmation
   page after POST /unsubscribe completes: single .unsubscribe-success-box
   restates that the address has been removed, CTA returns the visitor to
   the home page. No multi-section split
   because the original was a one-line message — we keep the rhythm short. */
#unsubscribe-success-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.unsubscribe-success-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.unsubscribe-success-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.unsubscribe-success-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.unsubscribe-success-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.unsubscribe-success-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.unsubscribe-success-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.unsubscribe-success-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean. */
.unsubscribe-success-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.unsubscribe-success-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.unsubscribe-success-box strong { color: var(--text); }
/* CTA — primary action back to home. */
.unsubscribe-success-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.unsubscribe-success-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .unsubscribe-success-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .unsubscribe-success-title { font-size: 22px; }
    .unsubscribe-success-box p { font-size: 14.5px; }
    .unsubscribe-success-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Unsubscribe Fail — Position-Held card pattern. Short error
   confirmation reached when the unsubscribe token is invalid /
   expired / already used. Single .unsubscribe-fail-box carries an
   error-tinted status banner with the idempotent fail message, then
   a CTA linking to /contact for users who genuinely need a human. */
#unsubscribe-fail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.unsubscribe-fail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.unsubscribe-fail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.unsubscribe-fail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.unsubscribe-fail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.unsubscribe-fail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.unsubscribe-fail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.unsubscribe-fail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean. */
.unsubscribe-fail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.unsubscribe-fail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.unsubscribe-fail-box strong { color: var(--text); }
/* Error banner — tinted variant for the idempotent fail message.
   Sits in the only box on the page so it slots into the divider
   rhythm rather than floating above. */
.unsubscribe-fail-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.7;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.unsubscribe-fail-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* CTA — contact link. */
.unsubscribe-fail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.unsubscribe-fail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .unsubscribe-fail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .unsubscribe-fail-title { font-size: 22px; }
    .unsubscribe-fail-box p { font-size: 14.5px; }
    .unsubscribe-fail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .unsubscribe-fail-status { font-size: 12.5px; }
}

/* Newsletter Signup — Position-Held card pattern. The whole card is
   wrapped in a single <form> so the .newsletter-signup-cta submit posts
   the hidden CSRF token + email atomically. Boxes (top-divided, last
   bottom-divided): optional error banner (.newsletter-signup-status-err),
   Subscribe (intro + email field), Legal (small-print consent line).
   Input pinned to system sans-serif so the brand serif's small-caps
   lowercase doesn't trick the user into mistyping the address. */
#newsletter-signup-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.newsletter-signup-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.newsletter-signup-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.newsletter-signup-form { margin: 0; }
.newsletter-signup-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.newsletter-signup-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.newsletter-signup-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.newsletter-signup-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.newsletter-signup-box p:last-child { margin-bottom: 0; }
/* Muted intro line above the email field — gives the user the
   subscription framing without competing visually with the input. */
.newsletter-signup-intro {
    color: var(--text2) !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}
/* Legal small-print — quieter than body text, mirrors footer-style
   fine-print used elsewhere for consent disclosures. */
.newsletter-signup-legal {
    color: var(--text2) !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.newsletter-signup-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.newsletter-signup-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.newsletter-signup-box strong { color: var(--text); }
/* Status banners — error (red) + success (water-blue/gold). Success
   uses gold-accent because operator's palette is gold + silver +
   water-blue (no green). Banners render inside their own
   .newsletter-signup-box row so the divider rhythm stays uniform. */
.newsletter-signup-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.newsletter-signup-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
.newsletter-signup-status-ok {
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.35);
}
/* Form field — single email input, mirrors .forgot-field /
   .login-field. */
.newsletter-signup-field {
    display: block;
    margin-bottom: 6px;
}
.newsletter-signup-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — the brand Cinzel/IM Fell serif renders
       lowercase as small-caps glyphs which makes users mistype
       email/password. Same fix as /login + /register + /forgot. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-signup-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — submit + caption */
.newsletter-signup-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.newsletter-signup-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .newsletter-signup-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .newsletter-signup-title { font-size: 22px; }
    .newsletter-signup-box p { font-size: 14.5px; }
    .newsletter-signup-intro { font-size: 12.5px !important; }
    .newsletter-signup-legal { font-size: 11.5px !important; }
    .newsletter-signup-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .newsletter-signup-input { font-size: 13.5px; padding: 10px 12px; }
    .newsletter-signup-status { font-size: 12.5px; }
}

/* Newsletter submitted — Position-Held card pattern. Single
   confirmation .newsletter-submitted-box (border-top + border-bottom
   divider) carries the masked email; CTA returns to home. Mirrors
   verify_sent / reset confirmation rhythm. */
#newsletter-submitted-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.newsletter-submitted-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.newsletter-submitted-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 18px;
}
.newsletter-submitted-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.newsletter-submitted-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.newsletter-submitted-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.newsletter-submitted-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.newsletter-submitted-email {
    color: var(--gold2);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.newsletter-submitted-cta {
    margin-top: 26px;
    text-align: center;
}
.newsletter-submitted-cta .btn {
    display: inline-block;
}
@media (max-width: 720px) {
    .newsletter-submitted-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .newsletter-submitted-title { font-size: 22px; }
    .newsletter-submitted-box p { font-size: 14.5px; }
    .newsletter-submitted-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .newsletter-submitted-email { font-size: 13.5px; }
}

/* Newsletter Confirmed — Position-Held card pattern. Short success
   landing after opt-in token is consumed. Single .newsletter-confirmed-box
   carrying the gold checkmark + confirmation copy; CTA back home. Card
   width 720px (default). */
#newsletter-confirmed-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.newsletter-confirmed-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.newsletter-confirmed-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.newsletter-confirmed-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.newsletter-confirmed-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.newsletter-confirmed-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.newsletter-confirmed-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.newsletter-confirmed-check {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0 18px;
}
.newsletter-confirmed-cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
@media (max-width: 720px) {
    .newsletter-confirmed-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .newsletter-confirmed-title { font-size: 22px; }
    .newsletter-confirmed-box p { font-size: 14.5px; }
    .newsletter-confirmed-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .newsletter-confirmed-check svg { width: 52px; height: 52px; }
}

/* Newsletter Unsubscribed — Position-Held card pattern. Short
   confirmation page: single .newsletter-unsubscribed-box with the
   status message + CTA back to home. */
#newsletter-unsubscribed-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.newsletter-unsubscribed-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.newsletter-unsubscribed-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.newsletter-unsubscribed-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.newsletter-unsubscribed-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.newsletter-unsubscribed-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.newsletter-unsubscribed-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.newsletter-unsubscribed-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.newsletter-unsubscribed-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.55);
}
.newsletter-unsubscribed-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.newsletter-unsubscribed-status-ok {
    background: rgba(86,196,196,0.05);
}
.newsletter-unsubscribed-status-ok .newsletter-unsubscribed-box-label {
    color: var(--water-blue, #56c4c4);
}
.newsletter-unsubscribed-cta {
    padding: 24px 0 4px;
    text-align: center;
}
.newsletter-unsubscribed-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .newsletter-unsubscribed-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .newsletter-unsubscribed-title { font-size: 22px; }
    .newsletter-unsubscribed-meta { font-size: 13px; }
    .newsletter-unsubscribed-box p { font-size: 14.5px; }
    .newsletter-unsubscribed-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Newsletter Fail — Position-Held card pattern. Invalid / expired /
   already-used confirmation token landing. Single .newsletter-fail-box
   carries the generic status text (we intentionally do not leak which
   of the three failure modes occurred); .newsletter-fail-cta gives a
   single button back to /newsletter to start a fresh subscription. */
#newsletter-fail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.newsletter-fail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.newsletter-fail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.newsletter-fail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.newsletter-fail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.newsletter-fail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.newsletter-fail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.newsletter-fail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.newsletter-fail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .newsletter-fail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .newsletter-fail-title { font-size: 22px; }
    .newsletter-fail-box p { font-size: 14.5px; }
    .newsletter-fail-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Waitlist — Position-Held card pattern. Single <form> wraps the
   whole card so CSRF + hidden size/color + email submit atomically
   (mirrors /forgot-password). Boxes: optional error banner →
   optional SKU variant row → email field with muted intro line.
   Input forced to system sans-serif so the brand Cinzel/IM Fell
   serif's small-caps-style lowercase doesn't trick the user into
   mistyping the address that will receive the restock ping. */
#waitlist-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.waitlist-form { margin: 0; }
.waitlist-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.waitlist-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.waitlist-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.waitlist-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.waitlist-box strong { color: var(--text); }
/* Muted intro line above the email field — gives the user the
   "we'll email you when this variant restocks" framing without
   competing visually with the input. */
.waitlist-intro {
    color: var(--text2) !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}
/* SKU variant pill — gold-tinted readout of which Monolit
   size/color the user is watching. Bold so it reads as the
   identifying value, not body copy. */
.waitlist-sku {
    color: var(--gold2) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em;
}
/* Status banners — error (red). Success path leaves /waitlist
   for /waitlist confirm-sent page so we only need the err
   variant here. Sits inside its own .waitlist-box row to keep
   divider rhythm uniform. */
.waitlist-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.waitlist-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form field — single email input, mirrors .forgot-field. */
.waitlist-field {
    display: block;
    margin-bottom: 6px;
}
.waitlist-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    /* System sans-serif — the brand Cinzel/IM Fell serif renders
       lowercase as small-caps glyphs which makes users mistype
       email. Same fix as /login + /register + /forgot. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.waitlist-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — submit + privacy note + caption */
.waitlist-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.waitlist-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
.waitlist-privacy {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 16px auto 0;
    max-width: 560px;
}
@media (max-width: 720px) {
    .waitlist-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-title { font-size: 22px; }
    .waitlist-box p { font-size: 14.5px; }
    .waitlist-intro { font-size: 12.5px !important; }
    .waitlist-sku { font-size: 14px !important; }
    .waitlist-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-input { font-size: 13.5px; padding: 10px 12px; }
    .waitlist-status { font-size: 12.5px; }
    .waitlist-privacy { font-size: 11px; }
}

/* Waitlist Confirm Sent — Position-Held card pattern. Short double-opt-in
   landing rendered after POST /waitlist succeeds. Single .waitlist-confirm-
   sent-box carries the masked-email confirmation copy; optional SKU-alert
   line sits inside the same box as a muted note. CTA = back to home. */
#waitlist-confirm-sent-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-confirm-sent-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-confirm-sent-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.waitlist-confirm-sent-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-confirm-sent-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-confirm-sent-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-confirm-sent-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.waitlist-confirm-sent-box p:last-child { margin-bottom: 0; }
.waitlist-confirm-sent-box strong {
    color: var(--gold2);
    font-weight: 700;
}
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean. */
.waitlist-confirm-sent-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.waitlist-confirm-sent-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* SKU-alert line — muted supplement under the main confirmation copy.
   Smaller + dimmer than .waitlist-confirm-sent-box p so it reads as a
   note ("Alert for: <sku>") rather than competing with the primary
   "check your inbox" message. */
.waitlist-confirm-sent-sku {
    color: var(--text2) !important;
    font-size: 13px !important;
    margin-top: 12px !important;
}
.waitlist-confirm-sent-sku-value {
    color: var(--gold);
    font-weight: 600;
}
/* CTA — back-to-home button. */
.waitlist-confirm-sent-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.waitlist-confirm-sent-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .waitlist-confirm-sent-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-confirm-sent-title { font-size: 22px; }
    .waitlist-confirm-sent-box p { font-size: 14.5px; }
    .waitlist-confirm-sent-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-confirm-sent-sku { font-size: 12px !important; }
}

/* Waitlist Confirmed — Position-Held card pattern. Short confirmation
   page: single .waitlist-confirmed-box with "Confirmed" label + body
   text + optional small gold SKU meta line, closing CTA back to
   /catalog. .waitlist-confirmed-status-ok variant tints
   the success box with a subtle gold left stripe to flag positive
   outcome without breaking the divider rhythm. */
#waitlist-confirmed-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-confirmed-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-confirmed-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.waitlist-confirmed-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.waitlist-confirmed-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-confirmed-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-confirmed-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-confirmed-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.waitlist-confirmed-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.waitlist-confirmed-box a:not(.btn):hover {
    color: var(--gold);
}
.waitlist-confirmed-status-ok {
    background: linear-gradient(90deg, rgba(201,168,76,0.06), rgba(201,168,76,0));
    box-shadow: inset 3px 0 0 rgba(201,168,76,0.45);
    padding-left: 16px;
}
.waitlist-confirmed-sku {
    font-family: Consolas, monospace !important;
    font-size: 13px !important;
    color: var(--gold) !important;
    letter-spacing: 0.05em !important;
    margin-top: 10px !important;
}
.waitlist-confirmed-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.waitlist-confirmed-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .waitlist-confirmed-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-confirmed-title { font-size: 22px; }
    .waitlist-confirmed-intro { font-size: 13px; }
    .waitlist-confirmed-box p { font-size: 14.5px; }
    .waitlist-confirmed-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-confirmed-sku { font-size: 12px !important; }
    .waitlist-confirmed-cta { margin-top: 22px; padding-top: 18px; }
}

/* Waitlist Already — Position-Held card pattern. Duplicate-signup
   confirmation: single .waitlist-already-box reassures the visitor
   their prior subscription is still active. Optional SKU pill renders
   inside the box body. CTA returns home. */
#waitlist-already-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-already-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-already-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.waitlist-already-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-already-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-already-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-already-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.waitlist-already-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline. Explicitly
   excludes .btn so the CTA stays clean. */
.waitlist-already-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.waitlist-already-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.waitlist-already-box strong { color: var(--text); }
/* SKU pill — small gold tag echoing the product context the visitor
   just re-tried (e.g. "Monolit Receiver — Ø80mm"). Mirrors the
   .credits-license pill so the visual rhythm stays consistent. */
.waitlist-already-sku {
    font-family: Consolas, monospace !important;
    display: inline-block;
    font-size: 12px !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 3px 12px !important;
    letter-spacing: 0.04em;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
}
/* CTA — return home + caption */
.waitlist-already-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.waitlist-already-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .waitlist-already-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-already-title { font-size: 22px; }
    .waitlist-already-box p { font-size: 14.5px; }
    .waitlist-already-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-already-sku { font-size: 10.5px !important; padding: 2px 10px !important; }
}

/* Waitlist Fail — Position-Held card pattern. Short confirmation page:
   single .waitlist-fail-box carries the generic invalid/expired notice,
   CTA row points back to /waitlist so the user can request a fresh
   alert. Closing caption = brand slogan. */
#waitlist-fail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-fail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-fail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.waitlist-fail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-fail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-fail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-fail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.waitlist-fail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.waitlist-fail-box a:not(.btn):hover {
    color: var(--gold);
}
.waitlist-fail-cta {
    padding-top: 24px;
    text-align: center;
}
.waitlist-fail-cta-buttons {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 720px) {
    .waitlist-fail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-fail-title { font-size: 22px; }
    .waitlist-fail-box p { font-size: 14.5px; }
    .waitlist-fail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-fail-cta { padding-top: 20px; }
}

/* Waitlist Unsubscribed — Position-Held card pattern. Short
   confirmation page: single .waitlist-unsub-box with the removal
   message + optional SKU label dimmer line, CTA back home, slogan
   caption. Mirrors /credits geometry exactly. */
#waitlist-unsub-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.waitlist-unsub-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.waitlist-unsub-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.waitlist-unsub-meta {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold2);
    line-height: 1.6;
    margin-bottom: 8px;
}
.waitlist-unsub-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.waitlist-unsub-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.waitlist-unsub-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.waitlist-unsub-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.waitlist-unsub-box p + p {
    margin-top: 10px;
}
.waitlist-unsub-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.waitlist-unsub-box a:not(.btn):hover {
    color: var(--gold);
}
.waitlist-unsub-sku {
    font-family: Consolas, monospace !important;
    font-size: 12.5px !important;
    color: var(--text2) !important;
    letter-spacing: 0.06em !important;
}
.waitlist-unsub-cta {
    margin-top: 26px;
    text-align: center;
}
.waitlist-unsub-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 14px;
}
.waitlist-unsub-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .waitlist-unsub-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .waitlist-unsub-title { font-size: 22px; }
    .waitlist-unsub-meta { font-size: 13px; }
    .waitlist-unsub-box p { font-size: 14.5px; }
    .waitlist-unsub-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .waitlist-unsub-sku { font-size: 11.5px !important; }
    .waitlist-unsub-cta p { font-size: 12.5px; }
}

/* Return Status — Position-Held card pattern. Per-RMA progress page.
   Boxes: Summary (key-value rows) + Progress (vertical timeline with
   dot-coloured steps: gold reached / muted pending / red denied) +
   optional Our-notes + optional Refund or Denial. Denial reuses a
   .ret-status-box-denied tint variant so dividers stay uniform.
   CTA = Back to orders button + muted support cross-link beneath. */
#ret-status-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.ret-status-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.ret-status-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.ret-status-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.ret-status-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.ret-status-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.ret-status-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.ret-status-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.ret-status-box a:not(.btn):hover {
    color: var(--gold);
    text-decoration-style: solid;
}
/* Summary key-value grid */
.ret-status-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ret-status-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}
.ret-status-meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ret-status-meta-row:first-child { padding-top: 0; }
.ret-status-meta-key {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
}
.ret-status-meta-val {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.04em;
    text-align: right;
}
.ret-status-meta-mono {
    font-family: Consolas, monospace;
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 700;
}
/* Timeline rows */
.ret-status-timeline {
    display: flex;
    flex-direction: column;
    border-left: 1px dashed rgba(201,168,76,0.25);
    padding-left: 14px;
    margin-left: 7px;
}
.ret-status-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.10);
}
.ret-status-step:last-child { border-bottom: 0; padding-bottom: 4px; }
.ret-status-step:first-child { padding-top: 4px; }
.ret-status-step-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -21px;
    border: 2px solid;
    box-sizing: border-box;
}
.ret-status-step-reached .ret-status-step-dot {
    background: var(--gold);
    border-color: var(--gold);
}
.ret-status-step-pending .ret-status-step-dot {
    background: transparent;
    border-color: rgba(201,168,76,0.30);
}
.ret-status-step-denied .ret-status-step-dot {
    background: var(--err);
    border-color: var(--err);
}
.ret-status-step-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.ret-status-step-label {
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    letter-spacing: 0.04em;
}
.ret-status-step-reached .ret-status-step-label {
    color: var(--gold2);
    font-weight: 600;
}
.ret-status-step-pending .ret-status-step-label {
    color: var(--text2);
    font-weight: 400;
}
.ret-status-step-denied .ret-status-step-label {
    color: var(--err);
    font-weight: 700;
}
.ret-status-step-ts {
    font-family: Consolas, monospace;
    font-size: 12.5px;
    color: var(--text);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ret-status-step-ts-pending {
    font-family: 'Cinzel', serif;
    font-style: italic;
    color: var(--text2);
}
/* Denial-tinted box variant — left stripe + faint red wash so the
   visual weight matches its severity without breaking the divider rhythm. */
.ret-status-box-denied {
    background: rgba(var(--err-rgb),0.06);
    box-shadow: inset 3px 0 0 var(--err);
    padding-left: 16px;
    padding-right: 16px;
}
.ret-status-box-denied .ret-status-box-label {
    color: var(--err);
}
/* Refund row */
.ret-status-refund-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
}
.ret-status-refund-key {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text2);
    text-transform: uppercase;
}
.ret-status-refund-amount {
    font-family: Consolas, monospace;
    font-size: 18px;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ret-status-refund-pending {
    color: var(--text2) !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    font-style: italic;
}
/* CTA */
.ret-status-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.ret-status-support {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}
.ret-status-support a {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.ret-status-support a:hover {
    color: var(--gold);
    text-decoration-style: solid;
}
@media (max-width: 720px) {
    .ret-status-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .ret-status-title { font-size: 22px; }
    .ret-status-box p { font-size: 14.5px; }
    .ret-status-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .ret-status-meta-key { font-size: 10px; letter-spacing: 0.18em; }
    .ret-status-meta-val { font-size: 13px; }
    .ret-status-meta-mono { font-size: 12.5px; }
    .ret-status-step-label { font-size: 13.5px; }
    .ret-status-step-ts { font-size: 11.5px; }
    .ret-status-refund-key { font-size: 10px; letter-spacing: 0.18em; }
    .ret-status-refund-amount { font-size: 16px; }
    .ret-status-refund-pending { font-size: 12px !important; }
    .ret-status-support { font-size: 12px; }
}

/* Deletion Scheduled — Position-Held card pattern. Two states share the
   same card shell: "not scheduled" renders a single reassurance box + a
   legal footnote box + CTA to /account/settings; "scheduled" stacks
   countdown, request meta, what-will-be-erased, what-is-retained, cancel
   copy + legal footnote boxes, then the POST cancel form CTA. Meta rows
   use a key/value grid; the days-remaining glyph is gold mono; bullet
   list uses gold-dot ::before (no default disc). Inline link styling
   excludes .btn so the cancel submit stays clean. */
#dscheduled-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.dscheduled-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.dscheduled-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.dscheduled-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
    text-align: center;
}
.dscheduled-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.dscheduled-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.dscheduled-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.dscheduled-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.dscheduled-box p:last-child { margin-bottom: 0; }
.dscheduled-box strong { color: var(--text); }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the cancel submit stays clean. */
.dscheduled-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.dscheduled-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Countdown glyph — gold mono days-remaining, centered. */
.dscheduled-countdown {
    text-align: center;
    padding: 8px 0 4px;
}
.dscheduled-countdown-num {
    font-family: Consolas, monospace;
    font-size: 56px;
    font-weight: 700;
    color: var(--gold2);
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 0 20px rgba(201,168,76,0.18);
}
.dscheduled-countdown-unit {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text2);
    margin-top: 10px;
}
/* Request metadata — key/value grid. */
.dscheduled-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: baseline;
}
.dscheduled-meta-row {
    display: contents;
}
.dscheduled-meta-key {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dscheduled-meta-val {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-align: right;
}
.dscheduled-meta-gold {
    color: var(--gold2);
    font-weight: 700;
}
.dscheduled-mono {
    font-family: Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
}
/* Bullet list — gold dot ::before, no default disc. */
.dscheduled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dscheduled-list li {
    position: relative;
    padding-left: 22px;
    margin: 8px 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-align: left;
}
.dscheduled-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.45);
}
/* Legal footnote — slightly muted body. */
.dscheduled-legal {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    margin: 0;
    text-align: left;
}
/* CTA — submit / link button row. */
.dscheduled-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.dscheduled-cta form { margin: 0; }
.dscheduled-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .dscheduled-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .dscheduled-title { font-size: 22px; }
    .dscheduled-intro { font-size: 13px; }
    .dscheduled-box p { font-size: 14.5px; }
    .dscheduled-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .dscheduled-countdown-num { font-size: 44px; }
    .dscheduled-countdown-unit { font-size: 11px; letter-spacing: 0.16em; }
    .dscheduled-meta { grid-template-columns: 1fr; gap: 2px 0; }
    .dscheduled-meta-val { text-align: left; }
    .dscheduled-meta-key { margin-top: 8px; }
    .dscheduled-list li { font-size: 13px; }
    .dscheduled-legal { font-size: 11.5px; }
}

/* 2FA Verify — Position-Held card pattern. The whole card is wrapped
   in a single <form> posting the verification code; a sibling
   .twofa-verify-email-form lives outside (action=request_email) when
   not on the email screen. Boxes (top-divided, last bottom-divided):
   optional success banner (email_sent), optional error banner,
   Challenge (intro + code input), mode-toggle (cross-link + warning),
   help + legal. CTA holds the submit. OTP input
   uses system sans-serif (not Cinzel) so users can read the code. */
#twofa-verify-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.twofa-verify-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.twofa-verify-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.twofa-verify-form { margin: 0; }
.twofa-verify-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.twofa-verify-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.twofa-verify-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.twofa-verify-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.twofa-verify-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.twofa-verify-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.twofa-verify-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.twofa-verify-box strong { color: var(--text); }
/* Status banners — share padding/typography; color-tinted variants. */
.twofa-verify-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.twofa-verify-status-ok {
    color: var(--gold2);
    background: rgba(201,168,76,0.10);
    border: 1px solid rgba(201,168,76,0.35);
}
.twofa-verify-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.twofa-verify-field {
    display: block;
    margin-bottom: 6px;
}
.twofa-verify-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
/* Base input — system sans-serif per project rule for OTP / 2FA inputs
   so users can read the digits they type (Cinzel renders small-caps). */
.twofa-verify-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.twofa-verify-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* 6-digit OTP: large centred glyphs + wide tracking for scan-ability. */
.twofa-verify-input-otp {
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.3em;
    padding: 14px 14px;
}
/* Backup code: alphanumeric, narrower tracking, may include hyphens. */
.twofa-verify-input-backup {
    letter-spacing: 0.1em;
}
/* Secondary "Send me an email code" form — outside the main verify
   form, transparent button with gold outline. Lives between the CTA
   and the mode-toggle box; small breathing margin top/bottom. */
.twofa-verify-email-form {
    margin: 18px 0 0;
    text-align: center;
}
.twofa-verify-btn-secondary {
    display: inline-block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--gold3);
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.twofa-verify-btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.06);
}
/* Mode-specific warning paragraph — amber-tinted, slightly smaller. */
.twofa-verify-warning {
    color: #f0b73c !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    padding: 10px 12px;
    background: rgba(240,183,60,0.08);
    border-radius: 6px;
    margin: 10px 0 0 !important;
}
.twofa-verify-legal {
    color: var(--text2) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
}
/* CTA — submit + caption */
.twofa-verify-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.twofa-verify-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .twofa-verify-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .twofa-verify-title { font-size: 22px; }
    .twofa-verify-box p { font-size: 14.5px; }
    .twofa-verify-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .twofa-verify-label { font-size: 11px; }
    .twofa-verify-input { font-size: 13.5px; padding: 10px 12px; }
    .twofa-verify-input-otp { font-size: 20px; letter-spacing: 0.25em; padding: 12px 12px; }
    .twofa-verify-status { font-size: 12.5px; }
    .twofa-verify-btn-secondary { font-size: 12px; letter-spacing: 0.14em; padding: 10px 14px; }
    .twofa-verify-warning { font-size: 11.5px !important; }
    .twofa-verify-legal { font-size: 11px !important; }
}

/* 2FA Verify Expired — Position-Held card pattern. Short confirmation
   landing surfaced when the 2FA challenge session lapsed before the
   user submitted the code. Single .twofa-verify-expired-box carries
   the reassurance text + CTA back to /login. No form on this state. */
#twofa-verify-expired-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.twofa-verify-expired-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.twofa-verify-expired-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.twofa-verify-expired-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.twofa-verify-expired-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.twofa-verify-expired-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.twofa-verify-expired-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.twofa-verify-expired-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline. Excludes
   .btn so the CTA stays clean (cookies bug fix carried forward). */
.twofa-verify-expired-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.twofa-verify-expired-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.twofa-verify-expired-box strong { color: var(--text); }
/* CTA row — Back-to-login button. */
.twofa-verify-expired-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.twofa-verify-expired-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .twofa-verify-expired-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .twofa-verify-expired-title { font-size: 22px; }
    .twofa-verify-expired-box p { font-size: 14.5px; }
    .twofa-verify-expired-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Return Status Not Found — Position-Held card pattern. Generic IDOR /
   unknown-RMA landing: two boxes (Not Found + Support) plus CTA back to
   /orders. Inline /contact link inside Support box uses
   .returnstatusnf-box a:not(.btn) so the closing button stays clean. */
#returnstatusnf-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.returnstatusnf-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.returnstatusnf-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.returnstatusnf-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.returnstatusnf-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.returnstatusnf-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.returnstatusnf-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.returnstatusnf-box p + p { margin-top: 10px; }
.returnstatusnf-box ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.returnstatusnf-box ul li {
    position: relative;
    padding-left: 18px;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    line-height: 1.7;
}
.returnstatusnf-box ul li::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.7em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
}
.returnstatusnf-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
}
.returnstatusnf-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.returnstatusnf-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.returnstatusnf-cta p {
    color: var(--text2);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    line-height: 1.6;
}
.returnstatusnf-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .returnstatusnf-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .returnstatusnf-title { font-size: 22px; }
    .returnstatusnf-box p { font-size: 14.5px; }
    .returnstatusnf-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .returnstatusnf-cta p { font-size: 12.5px; }
}

/* Deletion Cancelled — Position-Held card pattern. Single confirmation
   landing shown after a successful POST cancel of an account-deletion
   request. Gold checkmark anchors the title; one outcome box restates the
   "your account will not be deleted" copy; CTA returns to dashboard. No
   forms, no inline links — the page exists only to acknowledge. */
#delcancelled-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.delcancelled-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.delcancelled-check {
    margin-bottom: 18px;
    line-height: 0;
}
.delcancelled-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.delcancelled-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.delcancelled-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.delcancelled-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.delcancelled-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.delcancelled-box p:last-child { margin-bottom: 0; }
.delcancelled-box strong { color: var(--text); }
/* Inline links inside box bodies — dashed gold underline. Explicitly
   excludes .btn so the dashboard CTA stays clean. */
.delcancelled-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.delcancelled-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Bullet list — gold dot ::before, no default disc. */
.delcancelled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.delcancelled-list li {
    position: relative;
    padding-left: 22px;
    margin: 8px 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-align: left;
}
.delcancelled-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.45);
}
/* CTA — Back to Dashboard button row. */
.delcancelled-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.delcancelled-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .delcancelled-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .delcancelled-title { font-size: 22px; }
    .delcancelled-box p { font-size: 14.5px; }
    .delcancelled-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .delcancelled-list li { font-size: 13px; }
}

/* Cart Recover Fail — Position-Held card pattern. Short confirmation
   page: single .cartrecoverfail-box carries the generic invalid/expired
   notice plus a dimmer help line with inline /contact link, CTA row
   offers Catalog as the primary action.
   Mirrors /credits geometry exactly. */
#cartrecoverfail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.cartrecoverfail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.cartrecoverfail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.cartrecoverfail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.cartrecoverfail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.cartrecoverfail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.cartrecoverfail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.cartrecoverfail-box p + p {
    margin-top: 10px;
}
.cartrecoverfail-help {
    color: var(--text2) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}
.cartrecoverfail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.cartrecoverfail-box a:not(.btn):hover {
    color: var(--gold);
}
.cartrecoverfail-cta {
    padding-top: 24px;
    text-align: center;
}
.cartrecoverfail-cta-buttons {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 720px) {
    .cartrecoverfail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .cartrecoverfail-title { font-size: 22px; }
    .cartrecoverfail-box p { font-size: 14.5px; }
    .cartrecoverfail-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .cartrecoverfail-help { font-size: 12.5px !important; }
    .cartrecoverfail-cta { padding-top: 20px; }
}

/* Warranty Claim — Position-Held card pattern. Single <form> wraps the
   entire card. Boxes (top-divided, last bottom-divided): order metadata
   row stack (.warrclaim-meta-row) with eligibility pill, optional error
   banner, then either ineligibility explanation OR the interactive
   category-radio + description-textarea form. Legal statute reference
   sits as a muted .warrclaim-legal line inside the CTA box (eligible)
   or the ineligibility box (read-only). Textarea pinned to system
   sans-serif so long descriptions don't render as small-caps glyphs. */
#warrclaim-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.warrclaim-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.warrclaim-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.warrclaim-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.warrclaim-form { margin: 0; }
.warrclaim-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.warrclaim-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.warrclaim-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.warrclaim-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.warrclaim-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.warrclaim-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.warrclaim-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.warrclaim-box strong { color: var(--text); }
/* Order metadata rows — flex key/value pairs with dashed dividers,
   rendered as a vertical list rather than columns. */
.warrclaim-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    flex-wrap: wrap;
}
.warrclaim-meta-row:last-of-type { border-bottom: 0; }
.warrclaim-meta-key {
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--text2);
    text-transform: uppercase;
}
.warrclaim-meta-val {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.04em;
}
.warrclaim-meta-mono {
    font-family: Consolas, monospace;
    color: var(--gold2);
    letter-spacing: 0.06em;
}
/* Eligibility pill — gold-bordered capsule (ok / err variants). */
.warrclaim-pill-row {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}
.warrclaim-pill {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(0,0,0,0.25);
}
.warrclaim-pill-ok { color: var(--ok); }
.warrclaim-pill-err { color: var(--err-text); }
/* Status banner — error tint (success path redirects elsewhere so
   only the err variant is needed). Mirrors .contact-status-err. */
.warrclaim-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.warrclaim-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Category radios — stacked list, hover/focus state echoes input
   borders elsewhere on the page. */
.warrclaim-radios {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.warrclaim-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.03em;
    line-height: 1.5;
    cursor: pointer;
}
.warrclaim-radio input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--gold);
    flex-shrink: 0;
}
/* Description field — textarea pinned to system sans-serif so long
   typed text doesn't render as small-caps glyphs. Same fix as
   /contact + /waitlist. */
.warrclaim-field {
    display: block;
    margin-bottom: 10px;
}
.warrclaim-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    min-height: 140px;
    line-height: 1.6;
    resize: vertical;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.warrclaim-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* Hint line — muted helper text under the textarea + photos note. */
.warrclaim-hint {
    color: var(--text2) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.03em !important;
    margin: 6px 0 0 !important;
}
/* Legal statute reference — muted italic meta line, smaller than
   body copy, appears at the bottom of the CTA / ineligibility box. */
.warrclaim-legal {
    color: var(--text2) !important;
    font-family: 'Cinzel', serif !important;
    font-style: italic !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.03em !important;
    margin-top: 14px !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* CTA — submit + legal note + caption */
.warrclaim-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.warrclaim-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .warrclaim-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .warrclaim-title { font-size: 22px; }
    .warrclaim-intro { font-size: 13px; }
    .warrclaim-box p { font-size: 14.5px; }
    .warrclaim-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .warrclaim-meta-key { font-size: 11.5px; }
    .warrclaim-meta-val { font-size: 13px; }
    .warrclaim-pill { font-size: 10px; letter-spacing: 0.16em; }
    .warrclaim-status { font-size: 12.5px; }
    .warrclaim-radio { font-size: 13px; }
    .warrclaim-textarea { font-size: 13.5px; padding: 10px 12px; }
    .warrclaim-hint { font-size: 11.5px !important; }
    .warrclaim-legal { font-size: 11px !important; }
}

/* Warranty Claim Success — Position-Held card pattern. Single
   .warrclaimok-box carries the confirmation message; optional order
   reference renders as a .warrclaimok-ref mono row inside the same box
   so the divider rhythm stays uniform. CTA = back-to-orders button. */
#warrclaimok-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.warrclaimok-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.warrclaimok-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.warrclaimok-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    border-bottom: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.warrclaimok-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.warrclaimok-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.warrclaimok-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
}
.warrclaimok-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.warrclaimok-ref {
    font-family: Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--gold);
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 12px !important;
    display: inline-block;
}
.warrclaimok-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.warrclaimok-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .warrclaimok-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .warrclaimok-title { font-size: 22px; }
    .warrclaimok-box p { font-size: 14.5px; }
    .warrclaimok-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .warrclaimok-ref { font-size: 12px; padding: 7px 10px; }
}

/* Warranty Policy — Position-Held card pattern. Two .warrpolicy-box
   sections (Overview / Legal Basis); CTA = back to orders + home.
   Mirrors /credits exactly with the
   warrpolicy- slug prefix. */
#warrpolicy-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.warrpolicy-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.warrpolicy-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.warrpolicy-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.warrpolicy-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.warrpolicy-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.warrpolicy-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.warrpolicy-box p + p { margin-top: 10px; }
.warrpolicy-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.45);
}
.warrpolicy-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.warrpolicy-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.warrpolicy-list li {
    position: relative;
    padding-left: 18px;
    margin: 6px 0;
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    line-height: 1.7;
}
.warrpolicy-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
}
.warrpolicy-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.warrpolicy-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .warrpolicy-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .warrpolicy-title { font-size: 22px; }
    .warrpolicy-box p { font-size: 14.5px; }
    .warrpolicy-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .warrpolicy-list li { font-size: 12.5px; }
    .warrpolicy-cta p { font-size: 12.5px; }
}

/* 2FA Setup — Position-Held card pattern. Two states (disabled / enabled)
   share one card shell. Status box uses a coloured dot (green = active,
   silver = disabled) paired with text label so the cue is not colour-only.
   Inputs use system sans-serif (not Cinzel) so users can read the
   password / 6-digit OTP they type. Amber confirmation-email warning
   sub-block + gold-bordered pending caption sit inside their respective
   action boxes. CTA = back to Account Settings. */
#twofasetup-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.twofasetup-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.twofasetup-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.twofasetup-form { margin: 0; }
.twofasetup-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.twofasetup-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.twofasetup-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.twofasetup-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.twofasetup-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline; .btn excluded. */
.twofasetup-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.twofasetup-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.twofasetup-box strong { color: var(--text); }
/* Status row — dot + label inside the status box. */
.twofasetup-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.twofasetup-status-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.twofasetup-status-dot-on  { background: var(--ok); }
.twofasetup-status-dot-off { background: #8a8a8a; }
.twofasetup-status-text {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.twofasetup-status-text-on { color: var(--ok); }
/* Error banner reused as a status block inside its own box. */
.twofasetup-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.twofasetup-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form fields */
.twofasetup-field {
    display: block;
    margin-bottom: 12px;
}
.twofasetup-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
/* Base input — system sans-serif so users can read what they type
   (Cinzel renders small-caps which obscures passwords / OTP digits). */
.twofasetup-input,
.twofasetup-box input[type="text"],
.twofasetup-box input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.twofasetup-input:focus,
.twofasetup-box input[type="text"]:focus,
.twofasetup-box input[type="password"]:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* 6-digit OTP: large centred glyphs + wide tracking for scan-ability. */
.twofasetup-input-otp {
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.3em;
    padding: 14px 14px;
}
/* Pending-backend caption — gold left stripe, subtle background. */
.twofasetup-pending {
    color: var(--text2) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    padding: 10px 12px !important;
    border-left: 2px solid var(--gold) !important;
    background: rgba(201,168,76,0.05) !important;
    margin: 14px 0 0 !important;
}
/* Amber confirmation-email warning. */
.twofasetup-warning {
    color: #f0b73c !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    padding: 10px 12px !important;
    background: rgba(240,183,60,0.08) !important;
    border-radius: 6px !important;
    margin: 10px 0 14px !important;
}
/* CTA — back-link button row. */
@media (max-width: 720px) {
    .twofasetup-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .twofasetup-title { font-size: 22px; }
    .twofasetup-box p { font-size: 14.5px; }
    .twofasetup-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .twofasetup-status-text { font-size: 14.5px; }
    .twofasetup-label { font-size: 11px; }
    .twofasetup-input,
    .twofasetup-box input[type="text"],
    .twofasetup-box input[type="password"] { font-size: 13.5px; padding: 10px 12px; }
    .twofasetup-input-otp { font-size: 20px; letter-spacing: 0.25em; padding: 12px 12px; }
    .twofasetup-status { font-size: 12.5px; }
    .twofasetup-pending { font-size: 11.5px !important; }
    .twofasetup-warning { font-size: 11.5px !important; }
}

/* 2FA Enrol — Position-Held card pattern. One-shot reveal of TOTP
   secret + authenticator URI + ten backup codes. The whole card is
   wrapped in a single POST <form> so CSRF + action + the typed
   6-digit code submit atomically. Boxes: optional error banner,
   Intro, Manual entry key (gold mono), Authenticator URI (silver
   mono), Backup codes (two-column grid + warn), Verify (system
   sans-serif field shell with a Consolas-mono input override —
   the only place where mono > sans-serif because the user is
   reading individual digits, not a password), Legal footnote.
   CTA holds the submit button + dashed-underline cancel link
   back to /account/settings. */
#twofaenrol-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.twofaenrol-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.twofaenrol-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.twofaenrol-form { margin: 0; }
.twofaenrol-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.twofaenrol-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.twofaenrol-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.twofaenrol-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.twofaenrol-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA submit stays clean. */
.twofaenrol-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.twofaenrol-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.twofaenrol-box strong { color: var(--text); }
/* Legal footnote — muted italic copy in the closing box. */
.twofaenrol-legal {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.6;
    margin: 0;
}
/* Error banner */
.twofaenrol-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.twofaenrol-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Mono reveal blocks — manual entry key (gold) + otpauth URI (silver).
   Selectable, word-break so long values wrap inside the box. */
/* QR block. White plate under the code regardless of theme — a scanner
   needs the light modules light, and this card is dark. */
.twofaenrol-qr {
    display: flex;
    justify-content: center;
    padding: 14px 0 2px;
}
.twofaenrol-qr svg {
    width: 220px;
    height: 220px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
@media (max-width: 560px) {
    .twofaenrol-qr svg { width: 180px; height: 180px; }
}
.twofaenrol-mono {
    font-family: Consolas, monospace;
    background: var(--bg);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    word-break: break-all;
    letter-spacing: 0.02em;
    line-height: 1.55;
    user-select: all;
}
.twofaenrol-mono-gold {
    color: var(--gold);
    font-size: 16px;
}
.twofaenrol-mono-silver {
    color: var(--text2);
    font-size: 12.5px;
}
/* Backup codes — two-column Consolas grid + warn footnote. */
.twofaenrol-codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--bg);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 4px;
}
.twofaenrol-code-cell {
    font-family: Consolas, monospace;
    font-size: 15px;
    color: var(--gold);
    letter-spacing: 0.04em;
    padding: 4px 6px;
    user-select: all;
}
.twofaenrol-warn {
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    color: #f0b73c;
    background: rgba(240,183,60,0.08);
    border: 1px solid rgba(240,183,60,0.25);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 12px;
    line-height: 1.6;
}
/* Verify form — field shell mirrors /login + /reset-password DNA. */
.twofaenrol-field {
    display: block;
    margin-bottom: 14px;
}
.twofaenrol-field:last-of-type { margin-bottom: 6px; }
.twofaenrol-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text2);
    margin-bottom: 6px;
    text-align: left;
}
/* Inputs use system sans-serif by default — keep in sync with
   .login-input / .reset-input so users don't misread serif glyphs. */
.twofaenrol-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.twofaenrol-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* The 6-digit code input itself uses Consolas mono — the only place
   where mono > sans-serif because the user is reading individual
   digits, not a password. Centered + spaced like the original. */
.twofaenrol-code {
    text-align: center;
    font-family: Consolas, monospace;
    font-size: 24px;
    letter-spacing: 0.3em;
}
/* CTA — submit + dashed-underline cancel help line beneath. */
.twofaenrol-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.twofaenrol-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .twofaenrol-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .twofaenrol-title { font-size: 22px; }
    .twofaenrol-box p { font-size: 14.5px; }
    .twofaenrol-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .twofaenrol-label { font-size: 11px; }
    .twofaenrol-input { font-size: 13.5px; padding: 10px 12px; }
    .twofaenrol-code { font-size: 20px; letter-spacing: 0.24em; }
    .twofaenrol-mono-gold { font-size: 14px; }
    .twofaenrol-mono-silver { font-size: 11.5px; }
    .twofaenrol-code-cell { font-size: 13.5px; }
    .twofaenrol-warn { font-size: 11.5px; }
    .twofaenrol-legal { font-size: 11.5px; }
    .twofaenrol-status { font-size: 12.5px; }
    .twofaenrol-cta-help { font-size: 11.5px; }
}


/* 2FA Enrol Success — Position-Held card pattern. Single success-
   confirmation box (label + body), CTA back to /account/settings. Mirror
   of /credits DNA with twofaenrolok- prefix. */
#twofaenrolok-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.twofaenrolok-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.twofaenrolok-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.twofaenrolok-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.twofaenrolok-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.twofaenrolok-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.twofaenrolok-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.twofaenrolok-box a:not(.btn) {
    color: var(--accent2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(122,179,212,0.4);
}
.twofaenrolok-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: rgba(201,168,76,0.6);
}
.twofaenrolok-box ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.twofaenrolok-box li {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    line-height: 1.75;
    padding-left: 18px;
    position: relative;
}
.twofaenrolok-box li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.75em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.55);
}
.twofaenrolok-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.twofaenrolok-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .twofaenrolok-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .twofaenrolok-title { font-size: 22px; }
    .twofaenrolok-box p { font-size: 14.5px; }
    .twofaenrolok-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .twofaenrolok-box li { font-size: 13px; }
}

/* Transfer Initiate — Position-Held card pattern. The page is a single
   <form> wrapping the whole card so CSRF + platform UID + recipient
   email post atomically. Boxes (top-divided, last bottom-divided):
   optional error banner, Platform (gold mono UID), Warning, Recipient
   (email input), Legal. CTA holds the submit + back-to-dashboard. Inputs
   use system sans-serif (not Cinzel). */
#xferinit-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.xferinit-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.xferinit-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
.xferinit-intro {
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 600px;
}
.xferinit-form { margin: 0; }
.xferinit-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.xferinit-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.xferinit-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.xferinit-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
    position: relative;
    padding-left: 18px;
}
.xferinit-box p:last-child { margin-bottom: 0; }
/* Gold-dot bullet — applied to body paragraphs so each line picks up the
   shared visual rhythm even when the box is single-statement. */
.xferinit-box p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(201,168,76,0.45);
}
/* Inline links inside box bodies — dashed gold underline. Explicitly
   excludes .btn so the CTA submit + back-to-dashboard stay clean. */
.xferinit-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.xferinit-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.xferinit-box strong { color: var(--text); }
/* Platform UID — gold mono so the identifier reads as a hardware token,
   not body copy. Centred so it doesn't compete with the box label. */
.xferinit-uid {
    font-family: Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-align: center;
    padding: 8px 0 2px;
    word-break: break-all;
}
/* Error banner */
.xferinit-status {
    font-family: 'Cinzel', serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
}
.xferinit-status-err {
    color: var(--err-text);
    background: rgba(var(--err-rgb),0.10);
    border: 1px solid rgba(var(--err-rgb),0.35);
}
/* Form field — single email input. */
.xferinit-field {
    display: block;
    margin-bottom: 6px;
}
.xferinit-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.xferinit-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
/* CTA — submit + secondary back link. */
.xferinit-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.xferinit-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .xferinit-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .xferinit-title { font-size: 22px; }
    .xferinit-intro { font-size: 13px; }
    .xferinit-box p { font-size: 14.5px; }
    .xferinit-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .xferinit-uid { font-size: 16px; }
    .xferinit-input { font-size: 13.5px; padding: 10px 12px; }
    .xferinit-status { font-size: 12.5px; }
}

/* Transfer Initiated — Position-Held card pattern. Short confirmation
   page shown after /transfer POST. Two boxes: invitation echo (masked
   recipient) + platform UID receipt pill. CTA = Back to Dashboard.
   Mirrors /reset-sent DNA. */
#xferinitiated-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.xferinitiated-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.xferinitiated-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.xferinitiated-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.xferinitiated-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.xferinitiated-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.xferinitiated-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.xferinitiated-box p:last-child { margin-bottom: 0; }
.xferinitiated-box strong { color: var(--gold2); font-weight: 700; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA stays clean. */
.xferinitiated-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.xferinitiated-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
/* Platform UID receipt — gold-bordered Consolas pill, system-mono so
   the operator can copy/sanity-check the identifier. */
.xferinitiated-uid-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.xferinitiated-uid {
    font-family: Consolas, monospace;
    font-size: 13px;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.06em;
    background: rgba(201,168,76,0.04);
}
/* CTA — single Back-to-Dashboard button. */
.xferinitiated-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.xferinitiated-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .xferinitiated-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .xferinitiated-title { font-size: 22px; }
    .xferinitiated-box p { font-size: 14.5px; }
    .xferinitiated-box-label { font-size: 10px; letter-spacing: 0.18em; }
    .xferinitiated-uid { font-size: 12px; }
}

/* Transfer Failed — Position-Held card pattern. Single body box holds
   the generic failure copy (t.tr_fail_text); CTA is one retry button
   back to /dashboard. Short flow — no
   extra subdivisions, just the canonical title + box + cta + caption
   rhythm. Inline links (.xferfail-box a:not(.btn)) get the dashed gold
   underline so the CTA anchor stays clean. */
#xferfail-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.xferfail-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.xferfail-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.xferfail-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.xferfail-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.xferfail-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}
.xferfail-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0 0 10px;
    text-align: left;
}
.xferfail-box p:last-child { margin-bottom: 0; }
/* Inline links inside box bodies — dashed gold underline.
   Explicitly excludes .btn so the CTA anchor stays clean. */
.xferfail-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.4);
}
.xferfail-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.xferfail-box strong { color: var(--text); }
/* CTA — single retry button */
.xferfail-cta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.xferfail-cta-buttons {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .xferfail-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .xferfail-title { font-size: 22px; }
    .xferfail-box p { font-size: 14.5px; }
    .xferfail-box-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Shipping Track — Position-Held card pattern. Card width 720px.
   Boxes: Order summary (ref + address two-cell grid), Timeline
   (4-milestone progress rail with completed/pending dots), Status
   meta (status pill + service + carrier + tracking link). CTA = back
   to Orders. When the shipment row doesn't exist yet (paid/fulfilled
   awaiting label, or order stuck pending/expired/cancelled), the
   page collapses to the order summary + a single friendly note box
   + the back-to-orders CTA. Status pill colour stays inline (driven
   by status code, palette owned by the handler). Inputs / tracking
   number stay in Consolas mono so order refs and carrier IDs line
   up. Inline links inside boxes pick up the standard gold-dashed
   underline via .shiptrack-box a:not(.btn). */
#shiptrack-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.shiptrack-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
.shiptrack-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 22px;
}
.shiptrack-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.shiptrack-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
.shiptrack-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
.shiptrack-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
.shiptrack-box a:not(.btn) {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.shiptrack-box a:not(.btn):hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.shiptrack-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.shiptrack-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shiptrack-meta-key {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text2);
    text-transform: uppercase;
}
.shiptrack-meta-val {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.shiptrack-ref {
    font-family: Consolas, monospace;
    color: var(--gold);
    font-size: 15px;
    letter-spacing: 0.04em;
}
.shiptrack-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 4px 0 0;
}
.shiptrack-rail-bg {
    position: absolute;
    top: 14px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: rgba(201,168,76,0.18);
    z-index: 0;
}
.shiptrack-rail-fill {
    position: absolute;
    top: 14px;
    left: 6%;
    height: 2px;
    background: var(--gold);
    z-index: 1;
    transition: width 0.3s ease;
}
.shiptrack-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}
.shiptrack-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 auto 10px;
    background: var(--bg);
    border: 2px solid rgba(201,168,76,0.28);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
}
.shiptrack-step-done .shiptrack-step-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #06060f;
}
.shiptrack-step-label {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.shiptrack-step-done .shiptrack-step-label {
    color: var(--gold);
}
.shiptrack-step-date {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--text2);
    margin-top: 4px;
    height: 14px;
    letter-spacing: 0.02em;
}
.shiptrack-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.shiptrack-tracking-link,
.shiptrack-tracking-text {
    font-family: Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.shiptrack-tracking-link {
    color: var(--gold2);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201,168,76,0.5);
    transition: color 0.2s, border-color 0.2s;
}
.shiptrack-tracking-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.shiptrack-tracking-text {
    color: var(--text);
}
.shiptrack-empty {
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 22px 18px;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--text2);
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
}
@media (max-width: 720px) {
    .shiptrack-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .shiptrack-title { font-size: 22px; }
    .shiptrack-meta-grid { grid-template-columns: 1fr; }
    .shiptrack-meta-val { font-size: 13.5px; }
    .shiptrack-ref { font-size: 14px; }
    .shiptrack-step-label { font-size: 11px; letter-spacing: 0.06em; }
    .shiptrack-step-date { font-size: 10px; }
    .shiptrack-step-dot { width: 24px; height: 24px; }
    .shiptrack-rail-bg, .shiptrack-rail-fill { top: 12px; }
    .shiptrack-empty { font-size: 13px; padding: 18px 14px; }
}

/* Physics page — restructured in the coming-soon /en/reset-password
   "Position Held" card style. One big outer .physics-card box (gold
   border, soft glow, blur backdrop). Inside: title (gradient gold) →
   lead (Site-reveal "date" style) → existing 3 inner content cards →
   closing lead → small uppercase caption (token-label style). Fixed
   ambient canvas behind, anchored to the card box (halo + grains +
   orbiters circling the card). */
#physics-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* .physics-card mirrors coming-soon /en/reset-password .card exactly:
   same proportions, padding, border, glow, blur. Slightly wider
   (640px vs 480px) to fit 3 .physics-box stacked content blocks. */
.physics-card {
    width: 100%;
    max-width: 720px;
    background: rgba(13, 18, 26, 0.85);
    border: 1.5px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 60px rgba(201,168,76,0.12),
                inset 0 0 30px rgba(201,168,76,0.04);
    padding: 48px 44px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    margin: 120px auto 60px;
}
/* Mirrors reset-password .title verbatim. */
.physics-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold3) 0%, var(--gold) 40%, var(--gold2) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 14px;
}
/* Mirrors reset-password .lead verbatim. Used for both opening
   thesis ("Physics does not forbid...") and closing ("What is
   missing is not theory."). */
.physics-lead {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold);
    line-height: 1.75;
    margin: 18px 0;
}
/* Three stacked .physics-box blocks share a single border between
   adjacent boxes (one divider, not two stacked). Top + bottom of the
   whole group are still bordered so it reads as a contained block.
   .emphasis intensifies its own top divider (when applicable). */
.physics-box {
    border-top: 1px solid rgba(201,168,76,0.55);
    padding: 22px 0;
    margin: 0;
    text-align: left;
}
.physics-box:last-of-type {
    border-bottom: 1px solid rgba(201,168,76,0.55);
}
/* Section label inside each box — mirrors reset-password .label
   (small gold uppercase with wide tracking). */
.physics-box-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}
/* Bullet list for the Foundations box (one line per scientist). */
.physics-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.physics-bullets li {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    line-height: 1.65;
    padding: 6px 0 6px 18px;
    position: relative;
}
.physics-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 16px;
    width: 8px; height: 1px;
    background: var(--gold);
    opacity: 0.7;
}
.physics-bullets li strong {
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.physics-box p {
    color: var(--text);
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.75;
    margin: 0;
    text-align: left;
}
/* Mirrors reset-password .token-label: small gold uppercase footer
   caption with a top divider. */
@media (max-width: 720px) {
    .physics-card { padding: 32px 24px 28px; margin: 80px auto 40px; }
    .physics-title { font-size: 22px; }
    .physics-lead  { font-size: 13.5px; }
    .physics-box p { font-size: 14.5px; }
}
.hero-triangle-wrap {
    position: relative; margin-bottom: 36px;
}
.hero-tri {
    width: 260px; height: 260px;
    filter: drop-shadow(0 0 40px rgba(201,168,76,0.2));
    animation: triFloat 9s ease-in-out infinite,
               triGlow 15s ease-in-out infinite;
}
@keyframes triFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-14px) rotate(0.4deg); }
}
/* On peak, the triangle's drop-shadow warms from ambient gold (0.2 opacity,
   40px) to a stronger warm-gold glow (0.55 opacity, 60px). Combined with
   the canvas scenic halo's water-blue → gold lerp this gives the canonical
   teaser feel: cool ambient → warm core lock at peak → relax. */
@keyframes triGlow {
    0%, 100% { filter: drop-shadow(0 0 40px rgba(201,168,76,0.20)); }
    50%      { filter: drop-shadow(0 0 60px rgba(232,199,106,0.55)); }
}
/* A11y: prefers-reduced-motion strips the triangle glow + float anims.
   Canvas ambient is gated inside its own JS — also skips on reduce. */
@media (prefers-reduced-motion: reduce) {
    .hero-tri { animation: none; }
}
.htw1 { animation: htW1 3.4s ease-in-out infinite; }
.htw2 { animation: htW2 4.3s ease-in-out infinite; }
.htw3 { animation: htW3 2.9s ease-in-out infinite; }
.htr  { animation: htRise 7s ease-in-out infinite; }
.htp1 { animation: htP 3.6s linear infinite 0s; opacity:0; }
.htp2 { animation: htP 4.4s linear infinite 1.2s; opacity:0; }
.htp3 { animation: htP 3.9s linear infinite 2.5s; opacity:0; }
.htp4 { animation: htP 5.1s linear infinite 0.7s; opacity:0; }
@keyframes htW1  { 0%{transform:translateX(0)} 100%{transform:translateX(-120px)} }
@keyframes htW2  { 0%{transform:translateX(-60px)} 100%{transform:translateX(60px)} }
@keyframes htW3  { 0%{transform:translateX(30px)} 100%{transform:translateX(-90px)} }
@keyframes htRise { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes htP {
    0%   { transform:translateY(0); opacity:0; }
    10%  { opacity:0.8; }
    90%  { opacity:0.3; }
    100% { transform:translateY(-70px); opacity:0; }
}
.hero h1 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 58px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    /* Palindrome gradient (equal gold endpoints) so the repeated tile has no
       hard colour step at its boundary — the shimmer scroll (0%->200% over a
       200% tile = exactly one period) then loops perfectly seamless. The old
       gold3->gold ramp left a gold|gold3 discontinuity that swept across the
       text as a visible hard line once per cycle. */
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 25%, var(--gold3) 50%, var(--gold2) 75%, var(--gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.hero-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--text2);
    max-width: 560px;
    margin-bottom: 44px;
    line-height: 1.6;
}
/* The operator's line, hanging at the foot of the hero. Quiet by
   construction: it is a quotation closing the section, not a headline
   opening one. Narrow measure so it never runs the full width of a
   desktop hero, and a hairline above it to separate it from the steps
   row without adding another visible divider to the page. */
.hero-manifesto {
    max-width: 46ch;
    margin: 34px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(201,168,76,0.16);
    text-align: center;
}
.hero-manifesto-line {
    margin: 0;
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.7;
    color: #8fa3bb;
}
.hero-manifesto-link {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Cinzel', serif;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    opacity: 0.82;
    transition: opacity 0.2s ease;
}
.hero-manifesto-link:hover { opacity: 1; }
@media (max-width: 560px) {
    .hero-manifesto { max-width: none; margin-top: 28px; padding-top: 18px; }
    .hero-manifesto-line { font-size: 14.5px; }
}
.counter-block { margin-bottom: 44px; }
.counter-num {
    font-family: 'Cinzel', serif;
    font-size: 80px;
    font-weight: 900;
    color: #f0d878;
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
}
.counter-label {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #a8bcd4;
    margin-top: 8px;
}
.hero-steps {
    display: flex; align-items: center; gap: 12px;
    margin-top: 28px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a8bcd4;
}
.hero-steps-arrow { color: var(--gold); font-size: 16px; }

/* Divider */
.tri-divider {
    text-align: center;
    padding: 12px 0;
    opacity: 0.9;
}
.footer .tri-divider { padding: 0 0 24px; }

/* Sections */
.section-wrap { width: 100%; }
.section-wrap.alt { background: var(--bg2); }
/* Section ambient: a calm starfield (stars + dust grains trembling in
   place on the shared 12s breath) behind every data-ambient="calm"
   section. No orbiters, no snap-to-lines — operator decision
   2026-07-30. Phase clock is shared globally with HERO so every
   section breathes on the same 12s cycle. Canvas sits behind content
   via z-index; pointer-events:none keeps clicks unaffected. */
.section-wrap[data-ambient] { position: relative; overflow: hidden; }
.section-wrap[data-ambient] > .section { position: relative; z-index: 2; }
.section-ambient {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.section {
    max-width: 920px;
    margin: 0 auto;
    padding: 90px 24px;
}
.section.wide { max-width: 1120px; }
.section-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #f0d878;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 16px;
}
.section-title::before, .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240,216,120,0.45));
}
.section-title::after {
    background: linear-gradient(90deg, rgba(240,216,120,0.45), transparent);
}
.section h2 {
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 600;
    color: #f0d878;
    margin-bottom: 32px;
    text-align: center;
}
.section p {
    font-size: 18px;
    color: var(--text2);
    margin-bottom: 20px;
    text-align: center;
}

/* Hawking block */
.fact-block {
    display: flex; gap: 48px; align-items: flex-start;
    max-width: 720px; margin: 0 auto 0;
}
.fact-year {
    font-family: 'Cinzel', serif;
    font-size: 72px;
    font-weight: 900;
    color: var(--gold);
    opacity: 0.12;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.fact-text p {
    font-family: 'IM Fell English', serif;
    font-size: 19px;
    color: var(--text2);
    margin-bottom: 16px;
    line-height: 1.7;
}
.fact-text p.highlight {
    color: var(--text);
    font-style: italic;
    font-weight: 500;
}
.tagline {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 700;
    color: #f0d878;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.5;
    max-width: 900px;
    margin: 60px auto 0;
}
.tagline.large { font-size: 30px; margin-top: 80px; }

/* Truth cards */
.truth-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.truth-card {
    /* Translucent over the section starfield — the trembling stars must
       stay visible through the card (operator decision 2026-07-30). */
    background: rgba(13, 18, 26, 0.4);
    border: 1px solid rgba(201,168,76,0.12);
    padding: 32px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}
.truth-card::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 1px;
    background: var(--gold);
    opacity: 0.4;
}
.truth-card:hover {
    border-color: rgba(201,168,76,0.35);
    transform: translateY(-4px);
}
.truth-card:hover .truth-icon svg {
    filter: drop-shadow(0 0 14px rgba(201,168,76,0.45));
}
.truth-icon { margin-bottom: 20px; }
.truth-icon svg { width: 90px; height: 90px; transition: filter 0.4s; filter: drop-shadow(0 0 6px rgba(201,168,76,0.2)); }

/* Da Vinci truth icons are static ink-on-parchment by design (multiple
   stroke offsets emulate hand tremor). No CSS animation needed — keeps
   the section reading like a notebook page rather than a tech HUD. */

.truth-card p {
    font-family: 'IM Fell English', serif;
    font-size: 16px;
    color: var(--text);
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* Scale row */
.scale-row {
    display: flex; justify-content: center; gap: 0;
    margin-top: 48px;
}
.scale-item {
    flex: 1; text-align: center;
    padding: 32px 20px;
    border-left: 1px solid rgba(201,168,76,0.1);
    max-width: 280px;
}
.scale-item:first-child { border-left: none; }
.scale-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    font-weight: 400;
    color: #f0d878;
    line-height: 1;
}
.scale-word {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-top: 10px;
}
.scale-desc {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text2);
    margin-top: 6px;
    line-height: 1.5;
}

/* Steps grid */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}
.step-card {
    /* Translucent for the same starfield read-through as .truth-card. */
    background: rgba(13, 18, 26, 0.4);
    border: 1px solid rgba(201,168,76,0.1);
    padding: 28px 20px;
    position: relative;
    transition: border-color 0.3s;
}
.step-card:hover { border-color: rgba(201,168,76,0.3); }
.step-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: rgba(201,168,76,0.07);
    position: absolute;
    top: 8px; right: 14px;
    line-height: 1;
}
.step-card h4 {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #f0d878;
    margin-bottom: 12px;
}
.step-card p {
    font-family: 'IM Fell English', serif;
    font-size: 14px;
    color: var(--text2);
    margin: 0;
    text-align: left;
    line-height: 1.6;
}

/* Call section */
.call-quote {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    color: #f0d878;
    text-align: center;
    letter-spacing: 0.05em;
    margin: 48px auto;
    max-width: 800px;
    line-height: 1.5;
    position: relative;
    padding: 0 40px;
}
.call-quote::before {
    content: '\25BD';
    display: block;
    font-size: 18px;
    color: var(--gold);
    opacity: 0.4;
    margin-bottom: 20px;
}

/* Online dot */
.online-dot {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ok);
    margin-left: auto;
    margin-right: auto;
    padding: 4px 14px;
    border: 1px solid rgba(var(--ok-rgb),0.2);
    border-radius: 20px;
    background: rgba(var(--ok-rgb),0.05);
}
.pulse-dot {
    width: 7px; height: 7px;
    background: var(--ok);
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 20px auto;
    position: relative;
}

/* Catalog */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Forms */
.form-container {
    max-width: 400px;
    margin: 120px auto 40px;
    padding: 40px;
    background: var(--bg2);
    border-radius: 12px;
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.form-container h2 { text-align: center; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 6px;
}
.form-group input {
    width: 100%;
    padding: 12px;
    background: var(--bg);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 6px;
    color: var(--text);
    font-size: 16px;
}
.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}
.form-container .btn { width: 100%; text-align: center; }
.form-container .btn-row .btn { width: auto; }
.error { color: #f55; font-size: 14px; text-align: center; margin-bottom: 15px; }
.form-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text2); }
.form-select {
    width: 100%;
    padding: 12px;
    background: var(--bg);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 6px;
    color: var(--text);
    font-size: 16px;
    appearance: none;
    cursor: pointer;
}
.form-select:focus { outline: none; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Autocomplete */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 200;
    background: var(--bg2);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.autocomplete-item {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.active {
    background: rgba(201, 168, 76, 0.2);
    color: var(--gold);
}

/* Date picker */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(1) hue-rotate(200deg);
    cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit { color: var(--text); }
::-webkit-calendar-picker { background: var(--bg2); color: var(--text); }

/* Chromium date picker popup */
::-webkit-datetime-edit-fields-wrapper { color: var(--text); }

/* Dashboard */
.dashboard { max-width: 900px; margin: 100px auto 40px; padding: 20px; }
.dashboard h1 { margin-bottom: 30px; }
.dash-msg { padding: 10px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; }
.dash-msg-ok { background: rgba(var(--ok-rgb),0.15); border: 1px solid rgba(var(--ok-rgb),0.4); color: var(--ok); }
.dash-msg-err { background: rgba(220,50,50,0.15); border: 1px solid rgba(220,50,50,0.4); color: #e57373; }
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.stat-card {
    background: var(--bg2);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.stat-card .value { font-size: 36px; font-weight: 700; color: var(--gold); }
.stat-card .label { font-size: 14px; color: var(--text2); margin-top: 8px; }
.platform-list { margin-top: 20px; list-style: none; padding: 0; margin-left: 0; }
.platform-item {
    background: var(--bg2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(201, 168, 76, 0.08);
}
.platform-item .uid { font-family: monospace; color: var(--gold); font-size: 16px; }
.platform-item .status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    text-transform: uppercase;
}
.status-active { background: rgba(var(--ok-rgb), 0.2); color: var(--ok); }
.status-ordered { background: rgba(245, 200, 66, 0.2); color: #f5c842; }

/* Platform Log */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 30px;
}
.log-table th {
    text-align: left;
    padding: 12px 16px;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(201, 168, 76, 0.25);
}
.log-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.06);
    color: var(--text);
}
.log-table tr:hover td {
    background: rgba(201, 168, 76, 0.04);
}
.log-table .hash {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--text2);
    word-break: break-all;
}
.log-table .platform-id {
    font-family: monospace;
    color: var(--gold);
    font-weight: 600;
}
.log-table .row-num {
    color: var(--text2);
    font-weight: 600;
    font-family: 'Bebas Neue', sans-serif;
}
.log-info {
    background: var(--bg2);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    color: var(--text2);
    font-size: 15px;
    line-height: 1.6;
}
.log-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--gold);
    margin-right: 16px;
}

/* Cart */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg2);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 8px;
    margin-bottom: 10px;
}
.cart-item-info { flex: 1; }
.cart-item-info .item-size { font-weight: 600; color: var(--text); }
.cart-item-info .item-color { font-size: 13px; color: var(--text2); margin-top: 4px; }
.cart-item-price { font-size: 18px; font-weight: 700; color: var(--gold); margin: 0 20px; }
.cart-item-remove { background: none; border: none; color: #f55; cursor: pointer; font-size: 13px; }
.cart-item-remove:hover { text-decoration: underline; }
.cart-qty-controls {
    display: flex;
    align-items: center;
    gap: 0;
}
.cart-qty-btn {
    background: none;
    border: 1px solid rgba(201, 168, 76, 0.25);
    color: var(--text);
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.cart-qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.cart-qty-btn.minus { border-radius: 6px 0 0 6px; }
.cart-qty-btn.plus { border-radius: 0 6px 6px 0; }
.cart-qty-num {
    min-width: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Bebas Neue', sans-serif;
    color: var(--text);
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    height: 30px;
    line-height: 30px;
}
.cart-total {
    text-align: right;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    margin: 20px 0;
    padding: 16px;
    border-top: 1px solid rgba(201, 168, 76, 0.2);
}
.cart-actions { text-align: center; margin-top: 20px; }
.cart-message {
    background: rgba(201, 168, 76, 0.12);
    color: var(--accent2);
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Checkout steps */
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 100px auto 30px;
    max-width: 600px;
}
.checkout-step {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text2);
    border-bottom: 2px solid rgba(201, 168, 76, 0.12);
    opacity: 0.5;
}
.checkout-step.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    opacity: 1;
}
.checkout-step.done {
    color: var(--gold);
    border-bottom-color: var(--gold);
    opacity: 0.8;
}

/* Color picker */
.color-options { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 20px; }
.color-option {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}
.color-option:hover { border-color: var(--accent2); }
.color-option:focus-within { border-color: var(--accent2); outline: 2px solid var(--accent2); outline-offset: 2px; }
.color-option.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(201, 168, 76, 0.4); }
.color-option input { display: none; }
/* Legacy swatch colours — kept for backward-compat with carts/orders
   placed before the catalog palette expansion. New product colours are
   the 11-entry SUNLU PETG palette below. */
.color-black { background: #1a1a2e; }
.color-white { background: #e8e8e8; }
.color-silver { background: linear-gradient(135deg,#b8bcc4 0%,#8a8a9a 50%,#b8bcc4 100%); }
.color-gold { background: linear-gradient(135deg,#c9a84c 0%,#e8c76a 50%,#a07830 100%); }

/* Catalog palette — flat swatches generated from monolit_palette.h at
   startup (monolit_palette_swatch_css splice below); Bright Yellow reads
   as gold under warm light, so it serves as the brand-gold option, and
   Glow Blue carries a soft outer halo so it reads as "lit" even in the
   daylight viewer — both stay hand-made gradients, they are artistic. */
.color-midnight-black { background: #060606; }
.color-bone-white { background: #f5f0e6; }
.color-grey { background: #6a6a6a; }
.color-coffee-brown { background: #4a2f1c; }
.color-olive-green { background: #4a5028; }
.color-cyan { background: #00b8c0; }
.color-light-blue { background: #88c0d8; }
.color-bright-orange { background: #f08020; }

.color-bright-yellow  { background: linear-gradient(135deg,#d8b048 0%,#f0d870 50%,#b88830 100%); }
.color-glow-blue {
    background: radial-gradient(circle at 50% 50%, #e8f4fa 0%, #b8d8e8 70%, #88b8d0 100%);
    box-shadow: 0 0 10px rgba(120,200,240,0.6), inset 0 0 4px rgba(255,255,255,0.5);
}

/* Custom date picker */
.datepicker-wrap { position: relative; }
.datepicker-input { cursor: pointer; }
.datepicker {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    background: var(--bg2);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 8px;
    padding: 16px;
    width: 280px;
    display: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.datepicker.open { display: block; }
.dp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dp-header button {
    background: none;
    border: none;
    color: var(--accent2);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.dp-header button:hover { color: var(--gold); }
.dp-title {
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.dp-title:hover { color: var(--gold); }
.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    color: var(--text2);
    margin-bottom: 4px;
}
.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-day {
    text-align: center;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: none;
}
.dp-day:hover { background: rgba(201, 168, 76, 0.2); }
.dp-day.other { color: var(--text2); opacity: 0.4; }
.dp-day.selected { background: var(--accent); color: white; }
.dp-day.today { border: 1px solid var(--gold); }
.dp-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.dp-month-btn, .dp-year-btn {
    background: none;
    border: none;
    color: var(--text);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.dp-month-btn:hover, .dp-year-btn:hover { background: rgba(201, 168, 76, 0.2); }
.dp-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

/* Footer */
.footer {
    text-align: center;
    padding: 52px 24px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.55) 25%, rgba(201,168,76,0.9) 50%, rgba(201,168,76,0.55) 75%, transparent 100%) 1;
    position: relative;
    z-index: 2;
    background: var(--bg);
}
.footer-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 20px; }
.footer-links a {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text2);
    text-decoration: none;
}
.footer-links a:hover { color: var(--gold); }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 32px; max-width: 920px; margin: 0 auto 28px; text-align: left; }
@media (max-width: 900px) { .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
@media (max-width: 480px) { .footer-nav { grid-template-columns: 1fr; gap: 24px; text-align: center; } }
.footer-col h4 {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 14px;
    font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--text2);
    text-decoration: none;
    transition: color 0.15s;
}
.footer-col a:hover { color: var(--gold); }
.footer-copy {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text2);
    opacity: 0.5;
}

/* Mini-cart */
.cart-icon-wrap {
    position: relative;
    cursor: pointer;
}
.cart-icon-wrap svg { width: 24px; height: 24px; vertical-align: middle; }
.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mini-cart {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: var(--bg2);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 10px;
    width: 300px;
    padding: 16px;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.cart-icon-wrap:hover .mini-cart { display: block; }
.mini-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.08);
    font-size: 13px;
}
.mini-cart-item:last-of-type { border-bottom: none; }
.mini-cart-item .mc-name { color: var(--text); }
.mini-cart-item .mc-qty { color: var(--text2); font-size: 12px; }
.mini-cart-item .mc-price { color: var(--gold); font-weight: 600; }
.mini-cart-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(201, 168, 76, 0.2);
    margin-top: 4px;
    font-weight: 700;
    color: var(--gold);
    font-size: 15px;
}
.mini-cart-actions {
    display: flex;
    gap: 8px;
}
.mini-cart-actions .btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 8px 12px;
}
.mini-cart-empty {
    color: var(--text2);
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 110;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: all 0.3s;
    border-radius: 1px;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Emblem pool — 6 viewport-fixed slots cycle through a shared library of
   20 Da Vinci-paradigm SVG <symbol>s. JS-driven per-slot rotation:
   idle 4..9s → fade-in 0.6s → hold 1.5s → fade-out 0.8s → next. Slots
   are independent, so 1-2 are usually visible at any moment. Hidden on
   small viewports and under prefers-reduced-motion. */
.emblem-slot {
    position: fixed;
    width: 56px; height: 56px;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    will-change: opacity;
    filter: drop-shadow(0 0 4px rgba(201,168,76,0.18));
}
.emblem-slot[data-pos="tl"] { top: 10%; left: 4%; }
.emblem-slot[data-pos="tr"] { top: 10%; right: 4%; }
.emblem-slot[data-pos="ml"] { top: 48%; left: 3%; }
.emblem-slot[data-pos="mr"] { top: 48%; right: 3%; }
.emblem-slot[data-pos="bl"] { bottom: 14%; left: 4%; }
.emblem-slot[data-pos="br"] { bottom: 14%; right: 4%; }
.emblem-slot svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .emblem-slot { display: none; } }
@media (prefers-reduced-motion: reduce) { .emblem-slot { display: none; } }

/* Responsive */
@media (max-width: 768px) {
    .header { padding: 14px 20px; }
    .hamburger { display: block; }
    .nav {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(10, 10, 26, 0.97);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        z-index: 105;
    }
    .nav.open { display: flex; }
    .nav a { font-size: 18px; }
    .lang-switch { margin-left: 0; margin-top: 10px; }

    .hero { padding: 100px 16px 60px; min-height: auto; }
    .hero h1 { font-size: 36px; }
    .hero-subtitle { font-size: 17px; }
    .counter-num { font-size: 52px; }
    .hero-tri { width: 180px; height: 180px; }
    .hero-steps { flex-wrap: wrap; justify-content: center; }
    .tagline { font-size: 20px; }

    .section { padding: 50px 16px; }
    .section h2 { font-size: 26px; }
    .section p { font-size: 16px; }

    .steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .scale-row { flex-direction: column; align-items: center; }
    .scale-item { border-left: none; border-top: 1px solid rgba(201,168,76,0.1); }
    .truth-cards { grid-template-columns: 1fr; gap: 16px; }
    .fact-block { flex-direction: column; gap: 16px; }
    .fact-year { font-size: 40px; }

    .platforms-grid { grid-template-columns: 1fr; gap: 20px; }

    .form-container { margin: 80px 16px 30px; padding: 24px; }
    .form-row { grid-template-columns: 1fr; }

    .dashboard { margin: 80px 16px 30px; padding: 16px; }
    .dashboard-stats { grid-template-columns: 1fr; }
    .platform-item { flex-direction: column; gap: 8px; text-align: center; }
    #activate-modal .coord-controls { flex-direction: column; }
    #activate-modal .coord-controls > * { min-width: 100%; }

    .log-table { display: block; overflow-x: auto; }

    .checkout-steps { margin-top: 70px; }
    .checkout-step { font-size: 11px; letter-spacing: 0; }

    .cart-item { flex-direction: column; gap: 8px; text-align: center; }
    .cart-item-price { margin: 0; }

    .pay-summary-row { grid-template-columns: 1fr !important; gap: 4px !important; text-align: center; }
    .pay-tabs { flex-direction: column !important; }
    .pay-tabs button { font-size: 13px !important; padding: 10px !important; }

    .datepicker { left: auto; right: 0; }
    .mini-cart { width: 260px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 28px; }
    .counter-num { font-size: 40px; }
    .steps-grid { grid-template-columns: 1fr; }
    .tagline { font-size: 20px; }
    .mini-cart { width: 240px; right: -40px; }
}