/* Vazir v27.2.2 (Fontjo build), bundled locally so the UI never waits on a
   font CDN. The variable face covers the weights the stylesheet uses. */
@font-face {
    font-family: "Vazir";
    src: url("fonts/vazir/Vazir-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #070b12;
    --bg-2: #0a101a;
    --panel: #0d1522;
    --panel-2: #111b2b;
    --line: #1b2739;
    --line-2: #293a52;
    --text: #e8eef8;
    --muted: #8c9bb2;
    --gold: #e8b84b;
    --gold-2: #f6d98b;
    --green: #25d39c;
    --red: #f15b70;
    --blue: #6b9bff;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 18px 45px rgba(0, 0, 0, .35);
    --sidebar: 264px;
    --side-scroll-shadow: rgba(0, 0, 0, .45);
}

* {
    box-sizing: border-box;
}

/* Class rules such as .alert set display:flex, which would otherwise override
   the browser's default for the hidden attribute. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    font-family: "Vazir", "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI", Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

body.app-body,
body.guest-body {
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(232, 184, 75, .08), transparent 60%),
        radial-gradient(700px 500px at 0% 0%, rgba(37, 211, 156, .05), transparent 55%),
        var(--bg);
    min-height: 100vh;
}

a {
    color: var(--gold-2);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: #fff;
}

h1, h2, h3, h4 {
    margin: 0 0 .45rem;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.2px;
}

h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }

p {
    margin: 0 0 .75rem;
}

ul, ol {
    margin: 0;
    padding-inline-start: 1.2rem;
}

img, svg {
    max-width: 100%;
}

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    /* No `display` here on purpose: `.ltr` is also applied to <td>, and
       inline-block turns the cell into a non-cell box, which collapses the
       table layout. Amounts must not break between the sign and the number
       (`+` on one line and `$17,599.67` on the next), so the whole value stays
       on one line; wide tables scroll instead. */
    white-space: nowrap;
    /* Vazirmatn's locl feature renders ASCII digits as Persian glyphs under
       lang="fa"; numeric values must stay Latin. */
    font-feature-settings: "locl" 0;
    font-variant-numeric: lining-nums tabular-nums;
}

input[data-numeric="decimal"] {
    font-feature-settings: "locl" 0;
    font-variant-numeric: lining-nums tabular-nums;
}

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.small-note { margin-top: 1rem; font-size: .85rem; }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }

.container {
    width: min(1200px, calc(100% - 2.5rem));
    margin-inline: auto;
}

.container-narrow {
    width: min(920px, calc(100% - 2rem));
    margin-inline: auto;
}

.section {
    padding-block: 4.5rem;
}

.section-head {
    max-width: 660px;
    margin: 0 auto 2.4rem;
    text-align: center;
}

.section-head p {
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--gold);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
}

/* ---------- Buttons, chips, badges ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: .62rem 1.1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: #1b1305;
    box-shadow: 0 8px 22px rgba(232, 184, 75, .18);
}

.btn-primary:hover { color: #120d02; box-shadow: 0 10px 28px rgba(232, 184, 75, .3); }

.btn-gold {
    background: rgba(232, 184, 75, .14);
    border-color: rgba(232, 184, 75, .4);
    color: var(--gold-2);
}

.btn-ghost {
    background: rgba(255, 255, 255, .03);
    border-color: var(--line);
    color: var(--text);
}

.btn-ghost:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .06); }

.btn-danger {
    background: rgba(241, 91, 112, .12);
    border-color: rgba(241, 91, 112, .35);
    color: #ff8c9c;
}

.btn-danger:hover { background: rgba(241, 91, 112, .2); }

.btn-buy {
    background: linear-gradient(135deg, #2ee5aa, #12a97b);
    color: #04140f;
}

.btn-sell {
    background: linear-gradient(135deg, #ff7789, #cf344c);
    color: #fff;
}

.btn-hedge {
    background: linear-gradient(135deg, #b9a2ff, #6d4fd8);
    color: #fff;
}

.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: 13px; }
.btn-sm { padding: .4rem .8rem; font-size: .85rem; border-radius: 9px; }
.btn-xs { padding: .22rem .55rem; font-size: .76rem; border-radius: 7px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; min-height: 1.85rem; padding: .28rem; }
.btn-icon svg { display: block; width: 15px; height: 15px; }
.btn-block { display: flex; width: 100%; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-size: .82rem;
    color: var(--muted);
}

.chip strong { color: var(--text); }
.chip-gold { border-color: rgba(232, 184, 75, .32); background: rgba(232, 184, 75, .08); color: var(--gold-2); }
.chip-gold strong { color: var(--gold-2); }

/* Manual recipient chips in the broadcast composer. The raw textarea stays
   the form field and is hidden only once the script has taken over, so the
   form keeps working without JavaScript. */
.recipient-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.recipient-chips:empty { display: none; }
.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border: 1px solid var(--line, rgba(255, 255, 255, .14));
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-size: .85rem;
    max-width: 100%;
}
.recipient-chip .chip-mark { font-weight: 700; line-height: 1; }
.recipient-chip .recipient-chip-label { direction: ltr; overflow-wrap: anywhere; }
.recipient-chip small { color: var(--muted, #8a93a6); font-size: .72rem; }
.recipient-chip.is-user { border-color: rgba(72, 199, 130, .5); background: rgba(72, 199, 130, .10); }
.recipient-chip.is-user .chip-mark { color: #57d68d; }
.recipient-chip.is-unknown,
.recipient-chip.is-invalid { border-color: rgba(226, 86, 101, .55); background: rgba(226, 86, 101, .10); }
.recipient-chip.is-unknown .chip-mark,
.recipient-chip.is-invalid .chip-mark { color: #ff8792; }
.recipient-chip.is-error { border-color: rgba(232, 184, 75, .45); }
.recipient-chip.is-error .chip-mark { color: var(--gold-2, #e8b84b); }
.recipient-chip.is-pending { opacity: .7; }
.recipient-chip-actions { display: inline-flex; align-items: center; gap: .1rem; }
.recipient-chip-actions button {
    border: 0;
    background: none;
    color: var(--muted, #8a93a6);
    cursor: pointer;
    padding: 0 .12rem;
    font-size: .9rem;
    line-height: 1;
}
.recipient-chip-actions button:hover { color: var(--text, #e8eef8); }
.recipient-chip-input {
    width: 12rem;
    max-width: 100%;
    padding: .15rem .35rem;
    font-size: .85rem;
    direction: ltr;
}
.recipient-entry { display: flex; gap: .4rem; margin-bottom: .45rem; }
.recipient-entry input { flex: 1; direction: ltr; }
#manual-field.chips-on .recipient-raw { display: none; }
.recipient-legend { font-weight: 700; }
.recipient-legend.is-user { color: #57d68d; }
.recipient-legend.is-unknown { color: #ff8792; }

.demo-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1px dashed rgba(232, 184, 75, .4);
    color: var(--gold-2);
    background: rgba(232, 184, 75, .06);
    font-size: .72rem;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
}

.badge-stack { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.badge-ok { color: #7ff0c8; border-color: rgba(37, 211, 156, .35); background: rgba(37, 211, 156, .08); }
.badge-warn { color: var(--gold-2); border-color: rgba(232, 184, 75, .35); background: rgba(232, 184, 75, .08); }
.badge-bad { color: #ff9aaa; border-color: rgba(241, 91, 112, .35); background: rgba(241, 91, 112, .08); }

.pill {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(232, 184, 75, .3);
    background: rgba(232, 184, 75, .07);
    color: var(--gold-2);
    font-size: .78rem;
    font-weight: 600;
}

/* ---------- Guest header / footer ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Opaque exactly like the app topbar: a solid surface lifted onto its own
       layer, so scrolled content never shows through and nothing translucent
       can paint over the bar. Keep this surface identical to .topbar's. */
    background: var(--bg);
    isolation: isolate;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 26px -24px rgba(0, 0, 0, .85);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: 72px;
    transition: min-height .18s ease;
}

/* Scrolling down compacts the bar instead of hiding it: the brand mark and the
   tagline give their height back first, while every navigation link stays in
   place. `site-header.js` only toggles the class; the geometry lives here. */
.site-header.is-compact .site-header-inner { min-height: 52px; }
.site-header.is-compact .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1rem;
}
.site-header.is-compact .brand-text small { display: none; }
.site-header.is-compact .brand-text strong { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
    .site-header-inner { transition: none; }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--text);
}

.brand:hover { color: var(--text); }

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--gold-2), #b9821a);
    color: #180f02;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(232, 184, 75, .22);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong { font-size: 1.02rem; letter-spacing: .3px; }
.brand-text small { color: var(--muted); font-size: .7rem; }

.site-nav {
    display: flex;
    gap: 1.4rem;
    font-size: .9rem;
}

.site-nav a { color: var(--muted); }
.site-nav a:hover, .site-nav a.is-active { color: var(--gold-2); }

.site-actions { display: flex; align-items: center; gap: .55rem; }

/* Site clock: the header/footer label that follows the zone chosen in settings. */
.site-clock {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .22rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-clock.is-compact { padding: 0; border: 0; background: none; }
.site-clock-icon { color: var(--gold-2); font-size: .8rem; line-height: 1; }
.site-clock-time { color: var(--text); font-weight: 700; letter-spacing: .03em; }
.site-clock-zone { color: var(--gold-2); font-size: .7rem; }

@media (max-width: 640px) {
    .site-clock-date, .site-clock-icon { display: none; }
    .footer-bottom { flex-wrap: wrap; gap: .5rem; }
}

.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--line);
    /* Solid on every palette: the translucent bar let the page background and
       whatever ended against the footer show through it. */
    background: #080c13;
    padding-top: 2.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
}

.footer-grid h4 { font-size: .9rem; margin-bottom: .8rem; color: var(--text); }
.footer-grid a, .footer-grid span { display: block; color: var(--muted); font-size: .86rem; margin-bottom: .35rem; }
.footer-grid a:hover { color: var(--gold-2); }
.footer-note { font-size: .82rem; margin-top: .8rem; max-width: 360px; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-block: 1rem;
    color: var(--muted);
    font-size: .8rem;
}

/* ---------- Hero / landing ---------- */

.hero {
    position: relative;
    padding-top: 4rem;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    inset-inline-end: -10%;
    top: -30%;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(232, 184, 75, .13), transparent 62%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 3rem;
}

.hero-copy h1 { margin: 1rem 0 1rem; }
.grad-text {
    background: linear-gradient(120deg, var(--gold-2), #f0a93f 60%, #fff1c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    color: var(--muted);
    font-size: 1.02rem;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 1.3rem;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: .84rem;
}

.hero-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(165deg, rgba(24, 35, 54, .9), rgba(11, 17, 28, .96));
    box-shadow: var(--shadow);
    padding: 1.3rem;
    overflow: hidden;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 200px at 85% 0%, rgba(232, 184, 75, .15), transparent 70%);
    pointer-events: none;
}

.panel-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.panel-head > div { display: flex; flex-direction: column; gap: .1rem; }
.panel-head strong { font-size: 1rem; }
.panel-head .muted { font-size: .78rem; }

.live-dot {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--green);
    font-size: .75rem;
    font-weight: 700;
}

.live-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(37, 211, 156, .12);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.market-list { display: flex; flex-direction: column; gap: .55rem; }

.market-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 90px minmax(90px, auto);
    align-items: center;
    gap: .8rem;
    padding: .65rem .7rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .02);
}

.market-id { display: flex; align-items: center; gap: .6rem; }
.market-id div { display: flex; flex-direction: column; line-height: 1.35; }
.market-id small { color: var(--muted); font-size: .68rem; }

.market-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 800;
}

.market-gold { background: rgba(232, 184, 75, .14); color: var(--gold-2); border: 1px solid rgba(232, 184, 75, .3); }
.market-crypto { background: rgba(107, 155, 255, .12); color: #a9c3ff; border: 1px solid rgba(107, 155, 255, .28); }

.spark { width: 100%; height: 32px; }

.market-price { text-align: end; display: flex; flex-direction: column; line-height: 1.3; }
.market-price strong { font-size: .94rem; }
.market-price small { font-size: .72rem; }

.panel-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.panel-foot > div { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.panel-foot small { color: var(--muted); font-size: .7rem; }
.panel-foot strong { font-size: .9rem; }

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
}

.stats-strip > div { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.stats-strip strong { font-size: 1.35rem; color: var(--gold-2); }
.stats-strip span { color: var(--muted); font-size: .8rem; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.feature-card {
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(170deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .005));
    transition: border-color .18s ease, transform .18s ease;
}

.feature-card:hover { border-color: rgba(232, 184, 75, .3); transform: translateY(-3px); }
.feature-card p { color: var(--muted); font-size: .9rem; margin: 0; }

.feature-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .9rem;
    border-radius: 12px;
    background: rgba(232, 184, 75, .1);
    border: 1px solid rgba(232, 184, 75, .25);
    color: var(--gold-2);
    font-weight: 800;
    font-size: .82rem;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.step-num {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-bottom: .8rem;
    background: rgba(232, 184, 75, .12);
    border: 1px solid rgba(232, 184, 75, .3);
    color: var(--gold-2);
    font-weight: 800;
}

.step p { color: var(--muted); font-size: .9rem; margin: 0; }

/* Hero background: the candle strip and the faint symbol watermarks are pure
   decoration. The mask fades them out before the copy so contrast and reading
   order stay unaffected. */
.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .5) 55%, transparent 92%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .5) 55%, transparent 92%);
}

.hero-candles {
    position: absolute;
    inset-inline: 0;
    bottom: -2rem;
    width: 100%;
    height: 100%;
    opacity: .55;
}

.hero-candle.is-up rect { fill: rgba(37, 211, 156, .34); }
.hero-candle.is-up line { stroke: rgba(37, 211, 156, .42); }
.hero-candle.is-down rect { fill: rgba(240, 82, 106, .26); }
.hero-candle.is-down line { stroke: rgba(240, 82, 106, .36); }

.hero-symbols {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4vw;
    padding: 2.2rem 3vw 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(2.2rem, 6.5vw, 5.4rem);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: rgba(232, 184, 75, .05);
    white-space: nowrap;
    user-select: none;
}

.hero-grid, .stats-strip { position: relative; z-index: 1; }

.hero-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: .82rem;
}

.hero-trust-list li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.trust-card {
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(170deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .005));
}

.trust-index {
    color: var(--gold-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.trust-card h3 { margin: .6rem 0 .5rem; font-size: 1.02rem; }
.trust-card p { color: var(--muted); font-size: .88rem; line-height: 1.95; margin: 0 0 .9rem; }
.trust-card a { font-size: .82rem; color: var(--gold-2); }
.trust-card a:hover { color: #f5cd70; }

@media (max-width: 960px) {
    .trust-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hero-symbols { display: none; }
    .hero-candles { opacity: .35; }
}

/* ---------- Plans ---------- */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.plan-slot {
    display: flex;
    min-width: 0;
}

.plan-slot[hidden] { display: none !important; }

.plan-slot > .plan-card {
    flex: 1;
    min-width: 0;
    transition: opacity .16s ease, transform .16s ease;
}

.plan-grid.is-filtering-out > .plan-slot:not([hidden]) > .plan-card {
    opacity: 0;
    transform: translateY(8px) scale(.985);
}

.plan-slot.is-entering > .plan-card {
    animation: plan-filter-in .3s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: var(--plan-enter-delay, 0ms);
}

@keyframes plan-filter-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .plan-slot > .plan-card { transition: none; }
    .plan-slot.is-entering > .plan-card { animation: none; }
    .plan-grid.is-filtering-out > .plan-slot:not([hidden]) > .plan-card { opacity: 1; transform: none; }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(175deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
}

.plan-featured {
    border-color: rgba(232, 184, 75, .45);
    box-shadow: 0 20px 45px rgba(232, 184, 75, .09);
    background: linear-gradient(175deg, rgba(232, 184, 75, .09), rgba(255, 255, 255, .01));
}

.plan-ribbon {
    position: absolute;
    top: -11px;
    inset-inline-end: 1rem;
    padding: .12rem .6rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1a1203;
    font-size: .68rem;
    font-weight: 800;
}

.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.plan-code { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .5px; }
.plan-size { font-size: 1.85rem; margin: .25rem 0 .1rem; }
.plan-head .muted { font-size: .74rem; margin: 0; }
.plan-fee { text-align: end; display: flex; flex-direction: column; }
.plan-fee span { font-size: 1.05rem; font-weight: 800; color: var(--gold-2); }
.plan-fee small { color: var(--muted); font-size: .65rem; }

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    border-top: 1px solid var(--line);
    padding-top: .9rem;
}

.plan-features li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .82rem;
    color: var(--muted);
}

.plan-features strong { color: var(--text); font-weight: 700; }
.plan-card .btn { margin-top: auto; }

.plan-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
}

.plan-category-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.plan-category-tab:hover { border-color: rgba(232, 184, 75, .45); color: var(--text); }
.plan-category-tab.is-active { border-color: rgba(232, 184, 75, .55); background: rgba(232, 184, 75, .12); color: var(--gold-2); }
.plan-category-tab span { padding: .05rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .7rem; }
.plan-category-badge { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: .35rem; padding: .16rem .55rem; border: 1px solid rgba(232, 184, 75, .28); border-radius: 999px; color: var(--gold-2); background: rgba(232, 184, 75, .08); font-size: .7rem; font-weight: 700; }

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

.table-wide { min-width: 780px; }

.rules-note {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-top: 1.2rem;
}

.rule-chip {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .02);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.rule-chip strong { color: var(--gold-2); font-size: .88rem; }
.rule-chip span { color: var(--muted); font-size: .8rem; line-height: 1.7; }

.faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .6rem; }

.faq details {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel);
    padding: .2rem 1rem;
}

.faq summary {
    cursor: pointer;
    padding: .85rem 0;
    font-weight: 700;
    font-size: .94rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq summary::after { content: "+"; color: var(--gold); font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 2.2rem;
    border: 1px solid rgba(232, 184, 75, .28);
    border-radius: 22px;
    background:
        radial-gradient(500px 200px at 85% 0%, rgba(232, 184, 75, .14), transparent 70%),
        linear-gradient(160deg, #111a2a, #0b111b);
}

.cta-band h2 { margin-bottom: .2rem; }
.cta-band p { color: var(--muted); margin: 0; }

.page-hero {
    padding: 3.4rem 0 1.6rem;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(600px 300px at 85% 0%, rgba(232, 184, 75, .08), transparent 70%);
}

.page-hero p { color: var(--muted); max-width: 620px; }
.page-hero .hero-actions { margin-top: 1rem; }

/* ---------- Auth ---------- */

.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 2.5rem;
    width: min(1050px, calc(100% - 2.5rem));
    margin: 3.5rem auto;
    align-items: stretch;
}

.auth-card {
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(170deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow);
}

.auth-head { margin-bottom: 1.4rem; }
.auth-head p { color: var(--muted); font-size: .88rem; }

.auth-aside {
    padding: 2.4rem;
    border: 1px solid rgba(232, 184, 75, .22);
    border-radius: 22px;
    background:
        radial-gradient(420px 240px at 90% 0%, rgba(232, 184, 75, .14), transparent 65%),
        linear-gradient(165deg, rgba(18, 28, 45, .9), rgba(10, 16, 26, .95));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
}

.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.check-list li { position: relative; padding-inline-start: 1.6rem; color: #cfdbeb; font-size: .92rem; }
.check-list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--green);
    font-weight: 800;
}

.step-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.step-list li { display: flex; align-items: center; gap: .7rem; color: #d5e0ef; font-size: .92rem; }
.step-list span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(232, 184, 75, .13);
    border: 1px solid rgba(232, 184, 75, .3);
    color: var(--gold-2);
    font-size: .78rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.auth-quote {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    color: var(--muted);
    font-size: .84rem;
}

.auth-quote span { color: var(--gold-2); font-size: .8rem; }
.auth-alt { text-align: center; color: var(--muted); font-size: .85rem; margin: 1rem 0 0; }
.passkey-login-block { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.auth-divider { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .78rem; margin: .15rem 0 .55rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.passkey-status { line-height: 1.7; }
.passkey-status[data-state="error"] { color: var(--red); }
.passkey-status[data-state="success"] { color: var(--green); }
.passkey-status[data-state="muted"] { color: var(--muted); }
.passkey-register-form { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }

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

.form { display: flex; flex-direction: column; gap: .9rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.checkbox-field { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text); }
.checkbox-field input { width: auto; min-width: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: .35rem; }
.divider { border: 0; border-top: 1px solid var(--line); margin: .9rem 0; }
.field > span { font-size: .82rem; color: var(--muted); font-weight: 600; }

.field input,
.field select,
.filter-form select,
.select-field select {
    width: 100%;
    padding: .62rem .8rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus,
.field select:focus,
.filter-form select:focus,
.select-field select:focus {
    border-color: rgba(232, 184, 75, .55);
    box-shadow: 0 0 0 3px rgba(232, 184, 75, .1);
}

.field input::placeholder { color: #5f6d82; }
.check-inline { display: flex; align-items: flex-start; gap: .45rem; font-size: .8rem; line-height: 1.6; color: var(--text); }
.check-inline input[type="checkbox"] { width: 1rem; height: 1rem; min-width: 1rem; padding: 0; margin-top: .18rem; accent-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.details-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.details-summary::-webkit-details-marker { display: none; }
.details-summary small { display: block; font-weight: 400; margin-top: .15rem; }
.form-hint { color: var(--muted); font-size: .76rem; margin: 0; }
/* The live stop-loss gap sits directly under the stop field and fills it on
   click, so it reads as part of that field rather than another hint line. */
.edit-gap-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.edit-gap-hint {
    align-self: flex-start; max-width: 100%; margin: 0; padding: .1rem 0;
    border: 0; background: none; color: var(--accent, #3b6fd4);
    font: inherit; font-size: .74rem; line-height: 1.5; text-align: start;
    cursor: pointer; text-decoration: underline dotted; overflow-wrap: anywhere;
}
.edit-tp-ratio {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; line-height: 1.5; color: var(--muted);
}
.edit-tp-ratio select,
.edit-tp-ratio input[type="number"] {
    width: auto; min-width: 4.4rem; padding: .12rem .35rem;
    font: inherit; font-size: .74rem; line-height: 1.4;
}
.edit-tp-ratio input[type="number"] {
    width: 5.4rem; text-align: center;
}
.edit-gap-hint:hover { text-decoration: underline; }
.edit-gap-hint:focus-visible { outline: 2px solid var(--accent, #3b6fd4); outline-offset: 2px; border-radius: 4px; }
.edit-gap-hint[hidden] { display: none; }

/* Minimum-hold countdown in the position actions: red while the anti-scalp
   window is open, green and sticky at zero. Tabular digits keep it from
   jittering as the seconds change. */
.scalp-timer {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.1rem; padding: .1rem .35rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1.4;
    font-variant-numeric: tabular-nums; direction: ltr;
}
.scalp-timer.is-waiting { color: var(--danger, #e5484d); background: rgba(229, 72, 77, .1); }
.scalp-timer.is-ready { color: var(--success, #2fb344); background: rgba(47, 179, 68, .12); }
.input-xs { width: 74px; padding: .28rem .4rem; font-size: .78rem; border-radius: 7px; }

.select-field { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--muted); }
.select-field select { padding: .4rem 2rem .4rem .6rem; font-size: .82rem; min-width: 170px; }

.filter-form select { min-width: 190px; padding: .45rem .7rem; font-size: .84rem; }

/* Accounting filters keep their labels attached to real form controls. */
.accounting-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .65rem;
}
.accounting-filter .field { flex: 1 1 170px; min-width: 150px; }
.accounting-filter .field input,
.accounting-filter .field select { min-width: 0; }
.accounting-filter .filter-actions { display: flex; gap: .4rem; }
@media (max-width: 720px) {
    .accounting-filter .field { flex: 1 1 100%; }
    .accounting-filter .filter-actions { width: 100%; }
}

.inline-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }

.users-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.users-filter input,
.users-filter select {
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.users-filter input:focus,
.users-filter select:focus {
    border-color: rgba(232, 184, 75, .55);
    box-shadow: 0 0 0 3px rgba(232, 184, 75, .1);
}

.users-filter input::placeholder { color: #5f6d82; }
.users-filter .users-search { flex: 1 1 220px; max-width: 340px; }
.users-filter select { min-width: 150px; }

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    margin-bottom: .9rem;
}

.referral-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.ref-metric {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    padding: .65rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ref-metric span { font-size: .72rem; color: var(--muted); }
.ref-metric strong { font-size: 1.05rem; }

@media (max-width: 700px) {
    .referral-summary { grid-template-columns: 1fr; }
}

.referral-link-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.referral-link-row input { flex: 1 1 260px; }
.ref-code {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gold-2);
    padding: .25rem .55rem;
    border: 1px dashed rgba(232, 184, 75, .35);
    border-radius: 9px;
}

.bulk-state { font-size: .8rem; color: var(--muted); }
.table-check { width: 34px; }
.check-sm { width: 16px; height: 16px; accent-color: var(--gold-2); cursor: pointer; }

.users-table { min-width: 1080px; }
.users-table td { vertical-align: top; }
.users-table td .badge + .badge { margin-inline-start: .2rem; }
.user-row-actions { display: grid; gap: .35rem; justify-items: start; }
.service-row-actions { display: grid; gap: .35rem; justify-items: start; }

/* ---------- Alerts / flash ---------- */

.flash-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.app-body .flash-stack { margin-inline: 0; width: 100%; }

.flash {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-2);
    font-size: .86rem;
    transition: opacity .3s ease, transform .3s ease;
}

.flash.is-dismissing { opacity: 0; transform: translateY(-4px); }

/* The flash lives inside the content column, so a message about a form sits
   in the same rhythm as the page instead of floating under the top bar. */
.content > .flash-stack { margin-top: 0; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .flash { transition: none; }
}

.flash-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    font-size: .72rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.flash-success { border-color: rgba(37, 211, 156, .35); background: rgba(37, 211, 156, .07); }
.flash-success .flash-icon { background: rgba(37, 211, 156, .15); color: #7ff0c8; }
.flash-error { border-color: rgba(241, 91, 112, .35); background: rgba(241, 91, 112, .07); }
.flash-error .flash-icon { background: rgba(241, 91, 112, .15); color: #ff9aaa; }
.flash-info { border-color: rgba(107, 155, 255, .35); background: rgba(107, 155, 255, .07); }

.flash-close {
    margin-inline-start: auto;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.15rem;
    cursor: pointer;
    line-height: 1;
}

.alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-size: .88rem;
    margin-bottom: 1rem;
}

.alert a { color: inherit; text-decoration: underline; }
.alert-inline { margin: .8rem 0 0; }
.alert-bad { border-color: rgba(241, 91, 112, .35); background: rgba(241, 91, 112, .08); color: #ffb1bc; }
.alert-warn { border-color: rgba(232, 184, 75, .35); background: rgba(232, 184, 75, .07); color: var(--gold-2); }

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

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1rem;
    background: linear-gradient(180deg, #0c1420, #080d15);
    border-inline-end: 1px solid var(--line);
    z-index: 50;
    overflow-y: auto;
}

.sidebar .brand { padding: .3rem .3rem 1rem; border-bottom: 1px solid var(--line); }

.side-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: .2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.side-label { color: #5f7088; font-size: .68rem; font-weight: 700; padding: .4rem .6rem; }

.side-group { flex: 0 0 auto; }
.side-group + .side-group { margin-top: .15rem; }
.side-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    color: #7286a0;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.side-group-head::-webkit-details-marker { display: none; }
.side-group-head:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.side-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.side-group[open] .side-chevron { transform: rotate(-135deg); }
.side-group-body { display: flex; flex-direction: column; gap: .15rem; padding: .2rem 0 .3rem; }
.side-link-row { display: flex; align-items: center; gap: .35rem; }
.side-link-row > .side-link { flex: 1 1 auto; min-width: 0; }
.side-link-row > .side-count { flex: 0 0 auto; margin-inline-start: 0; }

.side-group-tail { display: inline-flex; align-items: center; gap: .4rem; }
.side-count,
.side-group-count {
    min-width: 19px;
    padding: .02rem .34rem;
    border-radius: 999px;
    background: rgba(232, 184, 75, .16);
    border: 1px solid rgba(232, 184, 75, .32);
    color: var(--gold-2);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}
.side-count { margin-inline-start: auto; }
.side-count-link { text-decoration: none; }
.side-count-link:hover,
.side-count-link:focus-visible {
    background: rgba(232, 184, 75, .30);
    border-color: rgba(232, 184, 75, .55);
    color: #fff;
}
.side-count-link:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.side-group-count { font-size: .62rem; }

.side-count.is-count-pulsing,
.side-group-count.is-count-pulsing {
    animation: side-count-pulse .55s ease-out;
}
@keyframes side-count-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 184, 75, .35); }
    45% { transform: scale(1.22); box-shadow: 0 0 0 5px rgba(232, 184, 75, .12); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 184, 75, 0); }
}

.side-search { flex: 0 0 auto; }
.side-search-field { position: relative; display: flex; align-items: center; }
.side-search-input {
    width: 100%;
    padding: .5rem 1.9rem .5rem .7rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    color: #dfe7f2;
    font-size: .8rem;
    font-family: inherit;
}
.side-search-input::-webkit-search-cancel-button { display: none; }
.side-search-input:focus {
    outline: none;
    border-color: rgba(232, 184, 75, .45);
    box-shadow: 0 0 0 2px rgba(232, 184, 75, .12);
}
.side-search-input::placeholder { color: #6a7c93; }
.side-search-clear {
    position: absolute;
    inset-inline-end: .35rem;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #c7d3e3;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}
.side-search-clear:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.side-search-empty { margin: .3rem .2rem 0; color: #7286a0; font-size: .72rem; }

.side-refresh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: 0 .2rem .55rem;
}
.side-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: .28rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #a9bbd1;
    font-family: inherit;
    font-size: .68rem;
    cursor: pointer;
}
.side-refresh-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.side-refresh-btn[aria-busy="true"] { opacity: .55; cursor: progress; }
.btn[aria-busy="true"] { cursor: progress; }

/* A batch close empties the open-position table at once, so the count is
   announced above it in place and fades out on its own. */
.positions-closed-flash {
    margin: 0 0 .55rem;
    padding: .4rem .7rem;
    border: 1px solid rgba(37, 211, 156, .45);
    border-radius: 8px;
    background: rgba(37, 211, 156, .12);
    color: #a9f0d8;
    font-size: .74rem;
}
.positions-closed-flash[hidden] { display: none; }
.positions-closed-flash[data-tone="neutral"] {
    border-color: var(--line-2);
    background: rgba(255, 255, 255, .03);
    color: var(--muted);
}
.positions-closed-flash.is-visible { animation: positions-closed-in .28s ease-out; }
@keyframes positions-closed-in {
    from { opacity: 0; transform: translateY(-5px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.side-refresh-btn:disabled { opacity: .45; cursor: not-allowed; }
.side-refresh-time { color: #5f7088; font-size: .65rem; text-align: end; }
.side-refresh.is-error .side-refresh-time { color: #f0a38a; }

.side-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .65rem;
    border-radius: 10px;
    color: #a9b7ca;
    font-size: .87rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.side-link:hover { background: rgba(255, 255, 255, .04); color: #fff; }

.side-link.is-active {
    background: linear-gradient(135deg, rgba(232, 184, 75, .14), rgba(232, 184, 75, .04));
    border-color: rgba(232, 184, 75, .26);
    color: var(--gold-2);
}

.side-icon { display: inline-flex; width: 19px; height: 19px; opacity: .9; }
.side-icon svg { width: 100%; height: 100%; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: .9rem; display: flex; flex-direction: column; gap: .7rem; }

.side-user { display: flex; align-items: center; gap: .6rem; }
.side-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.side-user-meta strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-meta small { color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }

.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(232, 184, 75, .3), rgba(232, 184, 75, .08));
    border: 1px solid rgba(232, 184, 75, .3);
    color: var(--gold-2);
    font-weight: 800;
    flex: 0 0 auto;
}

.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }

.main {
    margin-inline-start: var(--sidebar);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.6rem;
    /* Opaque on purpose: the old translucent bar let page content show
       through while scrolling, which reads as content sliding under the
       header. Nothing may paint over the bar while the page moves. */
    background: var(--bg);
    isolation: isolate;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 26px -24px rgba(0, 0, 0, .85);
}

.topbar-start { display: flex; align-items: center; gap: .8rem; }
.topbar-end { display: flex; align-items: center; gap: .6rem; }
.page-title { font-size: 1.02rem; margin: 0; }
.page-sub { margin: 0; color: var(--muted); font-size: .7rem; }
.icon-btn { display: none; background: none; border: 0; color: var(--text); padding: .3rem; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }

.content {
    flex: 1;
    padding: 1.4rem 1.6rem 2.5rem;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.6rem;
    border-top: 1px solid var(--line);
    color: #5f7088;
    font-size: .72rem;
}

.sidebar-backdrop { display: none; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.page-head h2 { font-size: 1.45rem; margin-bottom: .15rem; }
.page-head p { color: var(--muted); font-size: .85rem; margin: 0; }

/* Latest closing source next to the account status, with a two-event trail.
   Every part wraps, so the strip stays inside a 390px viewport. */
.account-exit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .55rem;
    margin-top: .45rem;
    max-width: 42rem;
    font-size: .78rem;
    color: var(--muted);
}

.account-exit-title {
    padding: .1rem .45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .68rem;
    white-space: nowrap;
}

.account-exit-source {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.account-exit-actor { color: var(--muted); }
.account-exit-at { color: var(--muted); font-size: .74rem; }
.account-exit-empty { font-size: .78rem; }

.account-exit-reason {
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-exit-history {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-exit-history li {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .12rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    font-size: .72rem;
}

.back-link { display: inline-block; color: var(--muted); font-size: .78rem; margin-bottom: .2rem; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1.4rem;
}

.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stat-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(170deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006));
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.stat-card strong { font-size: 1.3rem; line-height: 1.4; }
.stat-card small { color: var(--muted); font-size: .72rem; }

.stat-card-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.stat-card-link:hover,
.stat-card-link:focus-visible {
    border-color: rgba(232, 184, 75, .38);
    background: linear-gradient(170deg, rgba(232, 184, 75, .07), rgba(255, 255, 255, .006));
}

.stat-card-link:focus-visible {
    outline: 2px solid rgba(232, 184, 75, .65);
    outline-offset: 2px;
}

.stat-card-link .stat-card-cta {
    color: var(--gold-2);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Optional profile completion meter. Width comes from the server-rendered
   percentage; the track is only a visual aid, not a form control. */
.progress {
    height: .45rem;
    margin: .2rem 0 .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
.progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-2), var(--gold));
}
.stat-label { color: var(--muted); font-size: .76rem; }

.stat-gold {
    border-color: rgba(232, 184, 75, .3);
    background: linear-gradient(160deg, rgba(232, 184, 75, .13), rgba(255, 255, 255, .01));
}

.stat-gold strong { color: var(--gold-2); }

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .004)), var(--panel);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-title h3 { margin: 0; font-size: .98rem; }
.panel-title p { margin: .1rem 0 0; font-size: .78rem; }

/* ---------- Collapsible terminal panels ---------- */
/* The six terminal sections can be minimized; the panel title stays visible. */
.panel.has-collapse > .panel-title { justify-content: flex-start; }
.panel.has-collapse > .panel-title > .panel-collapse { margin-inline-start: auto; }
.panel-collapse {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
.panel-collapse:hover { color: var(--text); border-color: rgba(232, 184, 75, .45); }
.panel-collapse:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.panel-collapse-icon { display: inline-block; transition: transform .18s ease; }
.panel.is-collapsed > .panel-title { margin-bottom: 0; }
.panel.is-collapsed > :not(.panel-title) { display: none; }
.panel.is-collapsed .panel-collapse-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .panel-collapse-icon { transition: none; }
}

.two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.2rem; align-items: start; }
.two-col > * { min-width: 0; }

.sub-heading { margin-top: 1.1rem; font-size: .88rem; }

/* ---------- Empty states ---------- */

.empty-state {
    text-align: center;
    padding: 2.4rem 1rem;
    color: var(--muted);
}

.empty-state h4 { color: var(--text); margin-bottom: .3rem; }
.empty-state p { font-size: .86rem; margin-bottom: 1rem; }
.empty-state .btn { margin-top: .2rem; }
.empty-icon { font-size: 2.1rem; margin-bottom: .5rem; }
.empty-compact { padding: 1.2rem 1rem; }
.empty-compact p { margin: 0; }
.empty-cell { text-align: center; color: var(--muted); padding: 1.4rem !important; }

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

.small-title { margin: 1.1rem 0 .55rem; font-size: .82rem; color: var(--muted, #94a3b8); letter-spacing: .02em; }

.table-wrap { width: 100%; overflow-x: auto; }

.hedge-summary {
    display: grid;
    gap: .55rem;
    margin: 0 0 .85rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}
.hedge-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .74rem;
}
.hedge-summary-head strong { color: var(--text); font-size: .82rem; }
.hedge-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: .5rem;
}
.hedge-symbol {
    display: grid;
    gap: .35rem;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}
.hedge-symbol-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.hedge-symbol-head strong { font-size: .8rem; }
.hedge-status {
    padding: .1rem .42rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.6;
    white-space: nowrap;
}
.hedge-status.is-full {
    border-color: rgba(37, 211, 156, .35);
    background: rgba(37, 211, 156, .08);
    color: var(--green);
}
.hedge-status.is-partial {
    border-color: rgba(232, 184, 75, .35);
    background: rgba(232, 184, 75, .08);
    color: var(--gold);
}
.hedge-status.is-single {
    border-color: rgba(107, 155, 255, .35);
    background: rgba(107, 155, 255, .08);
    color: var(--blue);
}
.hedge-status.is-off { color: var(--muted); }
.hedge-symbol-metrics {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .71rem;
}
.hedge-symbol-metrics strong { color: var(--text); }
.hedge-free { color: var(--gold-2); font-size: .69rem; }
.hedge-released { color: var(--gold-2); font-size: .69rem; }
.hedge-released[hidden] { display: none; }
.hedge-savings { color: var(--green); font-size: .69rem; }
.hedge-savings[hidden] { display: none; }
.hedge-symbol-sides {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .68rem;
}
.hedge-symbol-sides strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
    .hedge-summary-list { grid-template-columns: 1fr; }
}

/* A mouse has no horizontal scroll gesture and overlay scrollbars are often
   invisible, so a scrollable table advertises drag-to-pan and shows it. */
.table-wrap.is-pannable, .table-card.is-pannable { cursor: grab; }
.table-wrap.is-panning, .table-card.is-panning { cursor: grabbing; user-select: none; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
    min-width: 620px;
}

.table th {
    text-align: start;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    padding: .6rem .65rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table td {
    padding: .68rem .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    vertical-align: middle;
}

.table tbody tr:hover { background: rgba(255, 255, 255, .018); }
.table tbody tr:last-child td { border-bottom: 0; }

/* A queued or expired cooperative restart must be visible in the live list
   without hiding the row's real state, so the tint stays subtle and the badge
   remains the source of the status text. */
.table tbody tr.service-row-restart-pending > td { background: rgba(232, 184, 75, .10); }
.table tbody tr.service-row-restart-expired > td { background: rgba(241, 91, 112, .12); }
.table tbody tr.service-row-restart-pending > td:first-child { box-shadow: inset -3px 0 0 var(--gold); }
.table tbody tr.service-row-restart-expired > td:first-child { box-shadow: inset -3px 0 0 var(--red); }
.table tbody tr.service-row-restart-pending:hover > td { background: rgba(232, 184, 75, .14); }
.table tbody tr.service-row-restart-expired:hover > td { background: rgba(241, 91, 112, .16); }
.table .small { font-size: .72rem; }

/* Long trade explanations stay out of the row height and appear only while
   the operator points at (or focuses) the status or a price. The node is
   fixed to the viewport so a horizontally scrolling table cannot clip it. */
[data-tooltip] { cursor: help; }
[data-tooltip]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }
span.has-tooltip { text-decoration: underline dotted rgba(140, 155, 178, .65); text-underline-offset: .2em; }
.badge.has-tooltip { text-decoration: none; }
/* Long panel explanations sit behind a question-mark trigger so dense trading
   panels stay readable; the shared floating tooltip renders the full text. */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-inline-start: .3rem;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex: none;
}
.help-tip:hover { color: var(--text); border-color: var(--gold-2); }
.floating-tooltip {
    position: fixed;
    z-index: 1200;
    width: max-content;
    max-width: min(24rem, calc(100vw - 1rem));
    padding: .55rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: #0b1421;
    color: var(--text);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .5);
    font-size: .76rem;
    line-height: 1.75;
    text-align: right;
    direction: rtl;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.side-pill {
    display: inline-flex;
    align-items: center;
    padding: .08rem .5rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.side-buy { color: #7ff0c8; background: rgba(37, 211, 156, .1); }
.side-sell { color: #ff9aaa; background: rgba(241, 91, 112, .1); }

.action-stack { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

.filter-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* Negative-balance review: disclosure rows keep long audit notes usable. */
.inline-details { flex: 1 1 100%; }
.inline-details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details[open] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.negative-action-form .input-xs { width: 180px; }
@media (max-width: 700px) {
    .negative-action-form .input-xs { width: 100%; }
}

.filter-tab {
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .8rem;
    background: rgba(255, 255, 255, .02);
}

.filter-tab:hover { color: var(--text); border-color: var(--line-2); }
.filter-tab.is-active { color: var(--gold-2); border-color: rgba(232, 184, 75, .35); background: rgba(232, 184, 75, .08); }

/* ---------- Account cards ---------- */

.account-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
}

.account-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
}

.account-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.account-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.account-plan { font-weight: 800; font-size: .95rem; }
.account-login { color: var(--muted); font-size: .78rem; }

.account-equity { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.account-equity > div { display: flex; flex-direction: column; gap: .1rem; }
.account-equity small { color: var(--muted); font-size: .68rem; }
.account-equity strong { font-size: .9rem; }

.meter-group { display: flex; flex-direction: column; gap: .55rem; }
.meter-row { display: flex; flex-direction: column; gap: .25rem; }
.meter-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--muted); }
.meter-label strong { color: var(--text); font-weight: 700; font-size: .72rem; }

.meter {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    transition: width .4s ease;
}

.meter-warn span { background: linear-gradient(90deg, #d99a2b, #ffcf6a); }

/* Attempt history prints the target percentage as text; this bar only mirrors
   it, so it stays narrow instead of stretching the table column. */
.attempt-progress { max-width: 8rem; margin-top: .3rem; }
.meter-bad span { background: linear-gradient(90deg, #b83249, #ff7c8f); }

.account-actions { display: flex; gap: .5rem; margin-top: auto; }
.account-actions .btn { flex: 1; }

/* ---------- Account detail ---------- */

.rule-meter { padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.rule-meter:last-of-type { border-bottom: 0; }
.meter-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--muted); margin-top: .3rem; }

.rule-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    padding-top: .9rem;
    margin-top: .4rem;
    border-top: 1px solid var(--line);
}

.rule-inline > div { display: flex; flex-direction: column; gap: .1rem; }
.rule-inline small { color: var(--muted); font-size: .7rem; }
.rule-inline strong { font-size: .85rem; }

.payout-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    padding: .8rem;
    border: 1px dashed var(--line-2);
    border-radius: 11px;
    margin-bottom: .9rem;
}

.payout-summary > div { display: flex; flex-direction: column; gap: .1rem; }
.payout-summary small { color: var(--muted); font-size: .7rem; }
.payout-summary strong { font-size: 1rem; }

.mini-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.mini-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; padding: .35rem 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }

/* ---------- Wallet / payouts ---------- */

.wallet-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.6rem;
    border: 1px solid rgba(232, 184, 75, .28);
    border-radius: var(--radius);
    background:
        radial-gradient(500px 200px at 90% 0%, rgba(232, 184, 75, .16), transparent 70%),
        linear-gradient(160deg, #111b2a, #0b111b);
    margin-bottom: 1.2rem;
}

.wallet-hero > div:first-child { display: flex; flex-direction: column; gap: .2rem; }
.wallet-hero strong { font-size: 2.1rem; color: var(--gold-2); line-height: 1.3; }
.wallet-hero p { color: var(--muted); font-size: .82rem; margin: 0; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.funded-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.funded-card { margin-bottom: 0; }
.funded-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.funded-stats > div { display: flex; flex-direction: column; gap: .1rem; }
.funded-stats small { color: var(--muted); font-size: .68rem; }
.funded-stats strong { font-size: .88rem; }
.payout-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .7rem; }
.payout-form .field { flex: 1 1 11rem; min-width: 0; }
.payout-form .btn { flex: 0 0 auto; }
.payout-blockers { margin: .9rem 0 0; }
.payout-reject-form { align-items: flex-end; }
.payout-reject-reason { margin: 0; }
.payout-reject-reason span { font-size: .72rem; }
.payout-reject-reason input {
    min-width: 0;
    width: 15rem;
    max-width: 100%;
    padding: .35rem .5rem;
    font-size: .8rem;
}
.payout-reject-reason-text { color: var(--danger, #ff6b6b); margin-top: .25rem; line-height: 1.6; }
.payout-reject-reason-cell strong { color: var(--danger, #ff6b6b); font-weight: 600; }
@media (max-width: 768px) {
    .payout-reject-reason input { width: 100%; }
}


/* ---------- Terminal ---------- */

.terminal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.terminal-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 1.3rem; margin: 0; }
.terminal-head-actions { display: flex; align-items: center; gap: .8rem; }
.feed-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--green); }

.terminal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}

.terminal-main { min-width: 0; }
.terminal-side { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 1rem; }

.terminal-scope {
    margin: 0 0 .7rem;
}

.terminal-scope-tabs {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
}

.terminal-scope-tab {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    padding: .38rem .7rem;
    font: inherit;
    font-size: .75rem;
    white-space: nowrap;
    cursor: pointer;
}

.terminal-scope-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .055);
}

.terminal-scope-tab.is-active {
    color: var(--gold-2);
    background: rgba(232, 184, 75, .13);
}

.terminal-scope-tab .ltr {
    margin-inline-start: .2rem;
    font-size: .72rem;
}

.terminal-scope-tab .terminal-scope-count {
    margin-inline-start: .2rem;
    font-size: .68rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.terminal-scope-tab.is-active .terminal-scope-count {
    color: var(--gold-2);
}

@media (max-width: 640px) {
    .terminal-scope-tabs { width: 100%; }
    .terminal-scope-tab { flex: 1; }
}

.symbol-tabs {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    margin-bottom: .7rem;
    cursor: grab;
    user-select: none;
    overscroll-behavior-x: contain;
}

.symbol-tabs.is-dragging { cursor: grabbing; }
.symbol-tabs .symbol-tab { cursor: inherit; -webkit-user-drag: none; }
.symbol-tabs.is-dragging .symbol-tab { cursor: grabbing; }

.symbol-tab {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    color: var(--muted);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
}

.symbol-tab:hover { border-color: var(--line-2); color: var(--text); }
.symbol-tab.is-active { border-color: rgba(232, 184, 75, .4); background: rgba(232, 184, 75, .08); color: var(--text); }
.symbol-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-gold { background: var(--gold); }
.dot-crypto { background: var(--blue); }
.dot-index { background: #7dd3fc; }
.symbol-tab-price { color: var(--muted); font-size: .76rem; }

.chart-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: .85rem 1rem 1rem;
    margin-bottom: 1rem;
}

.chart-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .55rem;
    padding-bottom: .65rem;
    margin-bottom: .65rem;
    border-bottom: 1px solid var(--line);
}

.tf-tabs {
    display: flex;
    gap: .1rem;
    padding: .18rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
}

.tf-btn {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .7rem;
    padding: .2rem .48rem;
    cursor: pointer;
}

.tf-btn:hover { color: var(--text); }
.tf-btn.is-active { background: rgba(232, 184, 75, .15); color: var(--gold-2); }

.chart-indicators { display: flex; flex-wrap: wrap; gap: .28rem; }

.chart-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .18rem .55rem;
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    font: inherit;
    font-size: .68rem;
    cursor: pointer;
}

.chart-chip:hover { color: var(--text); border-color: var(--line-2); }
.chart-chip.is-active {
    border-color: rgba(232, 184, 75, .35);
    background: rgba(232, 184, 75, .09);
    color: var(--gold-2);
}

.chart-indicators { position: relative; }
.indicator-menu { position: relative; }
.indicator-menu-trigger { display: inline-flex; align-items: center; gap: .38rem; }
.indicator-menu-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .28rem;
    border-radius: 999px;
    background: rgba(232, 184, 75, .14);
    color: var(--gold-2);
    font-size: .6rem;
    line-height: 1;
}
.indicator-menu-caret { font-size: .6rem; opacity: .7; }
.indicator-menu-panel {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    top: calc(100% + .45rem);
    width: min(340px, calc(100vw - 2rem));
    padding: .8rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #0d1522;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}
.indicator-menu-panel[hidden] { display: none; }
.indicator-menu-head { display: flex; flex-direction: column; gap: .12rem; margin-bottom: .65rem; }
.indicator-menu-head strong { font-size: .8rem; }
.indicator-menu-head span { color: var(--muted); font-size: .64rem; }
.indicator-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .28rem .5rem; }
.indicator-option {
    display: flex;
    align-items: center;
    gap: .38rem;
    min-width: 0;
    padding: .3rem .35rem;
    border-radius: 7px;
    color: var(--text);
    font-size: .7rem;
    cursor: pointer;
}
.indicator-option:hover { background: rgba(255, 255, 255, .04); }
.indicator-option input { accent-color: var(--gold); width: 14px; height: 14px; flex: 0 0 auto; }
.indicator-option-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--indicator-color, var(--muted)); flex: 0 0 auto; }
.indicator-custom-ema { margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.indicator-custom-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.indicator-custom-head strong { font-size: .74rem; }
.indicator-custom-head span { color: var(--muted); font-size: .62rem; }
.indicator-ema-form { display: flex; gap: .35rem; }
.indicator-ema-form input {
    width: 100%;
    min-width: 0;
    padding: .3rem .45rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font: inherit;
    font-size: .72rem;
}
.indicator-ema-form input:focus { outline: none; border-color: rgba(232, 184, 75, .55); }
.indicator-ema-error { margin: .35rem 0 0; color: #ff9b9b; font-size: .63rem; }
.indicator-ema-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .42rem; }
.indicator-ema-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .38rem .16rem .45rem;
    border: 1px solid color-mix(in srgb, var(--indicator-color) 45%, var(--line));
    border-radius: 999px;
    color: var(--text);
    font-size: .62rem;
}
.indicator-ema-chip button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    padding: 0 .1rem;
}
.indicator-ema-chip button:hover { color: #ff9b9b; }
.indicator-ema-empty { color: var(--muted); font-size: .62rem; }
.indicator-menu-hint { margin: .65rem 0 0; color: var(--muted); font-size: .6rem; line-height: 1.65; }
.indicator-cloud-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.chart-tools { display: flex; gap: .3rem; }

.chart-tool {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    font: inherit;
    font-size: .68rem;
    padding: .2rem .5rem;
    cursor: pointer;
    min-width: 30px;
}

.chart-tool:hover { color: var(--text); border-color: var(--line-2); }
.chart-tool.is-active {
    border-color: rgba(232, 184, 75, .35);
    background: rgba(232, 184, 75, .09);
    color: var(--gold-2);
}

.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.quote-block h3 { margin: 0 0 .1rem; font-size: .88rem; color: var(--muted); }
.quote-line { display: flex; align-items: baseline; gap: .6rem; }
.quote-line strong { font-size: 1.9rem; line-height: 1.25; }
.quote-line span { font-size: .85rem; color: var(--green); }
.quote-block .muted { font-size: .72rem; }

.quote-meta { display: flex; gap: 1.2rem; }
.quote-meta > div { display: flex; flex-direction: column; gap: .05rem; text-align: end; }
.quote-meta small { color: var(--muted); font-size: .68rem; }
.quote-meta strong { font-size: .82rem; }
.quote-meta .quote-spread-pct { font-size: .62rem; }
.quote-meta .quote-spread {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .18rem .45rem;
    margin: -.18rem -.45rem;
}
.quote-meta .quote-spread.is-spread-wide {
    border-color: rgba(232, 184, 75, .55);
    background: rgba(232, 184, 75, .09);
}
.quote-meta .quote-spread.is-spread-wide strong,
.quote-meta .quote-spread.is-spread-wide .quote-spread-pct { color: var(--gold-2); }
.quote-meta .quote-spread-warn {
    align-self: flex-end;
    margin-top: .1rem;
    padding: .08rem .35rem;
    font-size: .58rem;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .85rem;
    min-height: 24px;
    padding: .45rem 0 .5rem;
    font-size: .7rem;
    color: var(--muted);
}

.chart-legend b { color: var(--text); font-weight: 600; margin-inline-start: .2rem; }
.chart-legend i { font-style: normal; color: #5f7088; font-size: .62rem; }
.chart-legend-symbol { color: var(--gold-2); font-weight: 700; }
.chart-legend-change { font-weight: 700; }
.chart-legend-time { color: #66758c; }

.quick-trade {
    display: grid;
    gap: .55rem;
    margin: .5rem 0 .15rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(232, 184, 75, .24);
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(232, 184, 75, .075), rgba(13, 21, 34, .25) 58%),
        rgba(255, 255, 255, .018);
}

.quick-trade[hidden] { display: none; }

.quick-trade-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .45rem .8rem;
}

.quick-trade-title { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.quick-trade-title strong { color: var(--gold-2); font-size: .8rem; }
.quick-trade-title span { color: var(--muted); font-size: .68rem; line-height: 1.65; }

.quick-trade-prices {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    font-size: .68rem;
    color: var(--muted);
}
.quick-trade-prices b { color: var(--text); margin-inline-start: .22rem; font-weight: 600; }
.quick-trade-prices > span:last-child b { color: var(--gold-2); }

.quick-trade-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(6rem, .7fr)) minmax(13rem, 1.2fr);
    gap: .5rem;
    align-items: end;
}

.quick-field { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.quick-field > span { color: var(--muted); font-size: .66rem; font-weight: 600; }
.quick-field input {
    width: 100%;
    min-width: 0;
    padding: .42rem .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    outline: none;
}
.quick-field input:focus { border-color: rgba(232, 184, 75, .55); box-shadow: 0 0 0 2px rgba(232, 184, 75, .1); }
.quick-field input::placeholder { color: #5f6d82; }
.quick-field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px rgba(241, 91, 112, .12); }
.quick-field-error { margin: 0; color: #ff9b9b; font-size: .62rem; line-height: 1.6; }

.quick-trade-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.quick-trade-actions .btn { padding: .55rem .6rem; border-radius: 8px; font-size: .78rem; }
.quick-trade-actions .btn-hedge { grid-column: 1 / -1; }.quick-trade-actions .btn-hedge { grid-column: 1 / -1; }

/* The hedge ticket is not offered in the browser. The control stays in the DOM
   as a silent canary: removing this rule (or the element's hidden attribute)
   reveals it and hedge-canary.js reports the reveal to the server. */
#quick-hedge,
.quick-trade-actions .btn-hedge {
    display: none !important;
}

.quick-trade-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.quick-hedge-note {
    margin: 0;
    padding: 0;
    color: var(--gold-2);
    font-size: .66rem;
    line-height: 1.65;
}

.quick-trade-note {
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.65;
}
.quick-trade-note.is-pending { color: var(--gold-2); }
.quick-trade-note.is-success { color: #73e0b4; }
.quick-trade-note.is-error { color: #ff9b9b; }

.quick-trade-feedback {
    flex: 1 1 12rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    font-size: .74rem;
    line-height: 1.7;
}
.quick-trade-feedback.is-pending { background: rgba(232, 184, 75, .12); color: var(--gold-2); }
.quick-trade-feedback.is-success { background: rgba(60, 200, 140, .14); color: #73e0b4; }
.quick-trade-feedback.is-error { background: rgba(239, 90, 90, .14); color: #ff9b9b; }
.quick-trade-retry { flex: 0 0 auto; }
.quick-trade-gate { margin-top: -.1rem; }

/* Action feedback from the open-positions table and the one-click ticket is
   an overlay, not part of either form. Keeping it fixed means a rejected
   order cannot push the ticket, table or sidebar out of place. */
.terminal-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1250;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: min(540px, calc(100vw - 1.5rem));
    max-height: min(45vh, 20rem);
    overflow-y: auto;
    padding: .7rem .85rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #101827;
    color: var(--text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    text-align: start;
    animation: toast-in .18s ease-out;
}
.terminal-toast[hidden] { display: none; }
.terminal-toast[data-tone="success"] { border-color: rgba(37, 211, 156, .5); color: #a9f0d8; }
.terminal-toast[data-tone="error"] { border-color: rgba(241, 91, 112, .55); color: #ffb9c2; }
.terminal-toast[data-tone="pending"] { border-color: rgba(232, 184, 75, .5); color: var(--gold-2); }
.terminal-toast-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
}
.terminal-toast[data-tone="success"] .terminal-toast-mark::before { content: "✓"; }
.terminal-toast[data-tone="error"] .terminal-toast-mark::before { content: "!"; }
.terminal-toast[data-tone="pending"] .terminal-toast-mark::before { content: "…"; }
.terminal-toast-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.terminal-toast-title { color: var(--muted); font-size: .66rem; font-weight: 700; }
.terminal-toast-message,
.terminal-toast .quick-trade-feedback {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: .78rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.terminal-toast .quick-trade-feedback.is-pending,
.terminal-toast .quick-trade-feedback.is-success,
.terminal-toast .quick-trade-feedback.is-error { background: transparent; color: inherit; }
.terminal-toast-close {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.terminal-toast-close:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.terminal-toast .quick-trade-retry { align-self: flex-start; margin-top: .2rem; }
@media (max-width: 520px) {
    .terminal-toast {
        width: calc(100vw - 1rem);
        bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .terminal-toast { animation: none; }
}

.chart-shell {
    height: 470px;
    width: 100%;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 10px;
    overflow: hidden;
    background: #0d1522;
}

.chart-canvas { width: 100%; height: 100%; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .7rem; flex-wrap: wrap; margin-top: .55rem; }
.chart-protection-warning { color: #e8b84b; font-size: .68rem; }

/* ---------- Chart drawing engine ---------- */

.drawing-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.drawing-hint {
    position: absolute;
    inset-inline-start: .6rem;
    bottom: .5rem;
    z-index: 4;
    padding: .25rem .55rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(9, 15, 25, .9);
    color: var(--muted);
    font-size: .68rem;
    pointer-events: none;
}

.drawing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .8rem;
    flex-wrap: wrap;
    padding: .5rem 0 .6rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: .55rem;
}

.drawing-tools,
.drawing-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.drawing-tool,
.drawing-action,
.drawing-menu summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 30px;
    padding: .25rem .55rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
    color: var(--muted);
    font: inherit;
    font-size: .7rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.drawing-tool:hover,
.drawing-action:hover,
.drawing-menu summary:hover {
    color: var(--text);
    border-color: rgba(232, 184, 75, .45);
}

.drawing-tool.is-active,
.drawing-action.is-active,
.drawing-action[aria-pressed="true"] {
    color: #0b1019;
    border-color: var(--gold);
    background: var(--gold);
    font-weight: 700;
}

.drawing-tool-icon { font-size: .9rem; line-height: 1; }

.drawing-menu { position: relative; }
.drawing-menu summary { list-style: none; }
.drawing-menu summary::-webkit-details-marker { display: none; }
.drawing-menu summary::after { content: '▾'; font-size: .6rem; opacity: .7; }
.drawing-menu[open] summary { color: var(--text); border-color: rgba(232, 184, 75, .45); }

.drawing-menu-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    inset-inline-start: 0;
    min-width: 180px;
    padding: .35rem;
    display: grid;
    gap: .15rem;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: #101827;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .45);
}

.drawing-menu-panel button {
    padding: .45rem .55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    text-align: start;
    cursor: pointer;
}

.drawing-menu-panel button:hover { background: rgba(232, 184, 75, .12); color: var(--text); }

.drawing-sep { width: 1px; height: 20px; background: var(--line-2); margin-inline: .15rem; }

.drawing-save-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    color: var(--muted);
    white-space: nowrap;
}

.drawing-save-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
}

.drawing-save-status[data-state="saved"] i { background: #25d39c; }
.drawing-save-status[data-state="saving"] i { background: var(--gold); animation: drawing-pulse 1s infinite; }
.drawing-save-status[data-state="dirty"] i { background: #e8b84b; }
.drawing-save-status[data-state="error"] i,
.drawing-save-status[data-state="conflict"] i { background: #f15b70; }
@keyframes drawing-pulse { 50% { opacity: .35; } }

.drawing-conflict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(241, 91, 112, .5);
    border-radius: 8px;
    background: rgba(241, 91, 112, .08);
    color: var(--text);
    font-size: .72rem;
}

.drawing-conflict > div { display: flex; gap: .3rem; flex-wrap: wrap; }

.drawing-objects {
    margin-top: .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .015);
    overflow: hidden;
}

.drawing-objects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--line);
    font-size: .75rem;
}

.drawing-objects-head strong { color: var(--text); }
.drawing-objects-head span { margin-inline-start: .4rem; }
.drawing-objects-close { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.drawing-object-list { max-height: 260px; overflow: auto; }

.drawing-object-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .035);
    font-size: .72rem;
}

.drawing-object-row:last-child { border-bottom: 0; }
.drawing-object-row.is-selected { background: rgba(232, 184, 75, .1); }
.drawing-object-main { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.drawing-object-name { border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.drawing-object-meta { color: var(--muted); font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-object-btn { width: 25px; height: 25px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--muted); font-size: .72rem; line-height: 1; cursor: pointer; padding: 0; }
.drawing-object-btn:hover { color: var(--text); border-color: rgba(232, 184, 75, .45); }
.drawing-object-btn.is-off { opacity: .42; }
.drawing-object-tools { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: flex-end; }
.drawing-object-row .drawing-object-tools { grid-column: auto; }

.drawing-dialog { width: min(720px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.drawing-dialog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.drawing-dialog-grid .field { margin: 0; }
.drawing-tf-fieldset { margin: .65rem 0; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .72rem; }
.drawing-tf-fieldset legend { padding: 0 .3rem; color: var(--muted); font-size: .68rem; }
.drawing-template-row { display: flex; align-items: end; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.drawing-template-row .field { flex: 1 1 180px; margin: 0; }
.drawing-dialog-actions { justify-content: flex-end; flex-wrap: wrap; }
.drawing-toast { position: fixed; inset-inline-start: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 80; max-width: min(430px, calc(100vw - 2rem)); padding: .55rem .8rem; border: 1px solid var(--line-2); border-radius: 9px; background: #101827; color: var(--text); font-size: .75rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); transition: opacity .2s ease, transform .2s ease; }
.drawing-toast.is-hiding { opacity: 0; transform: translateX(-50%) translateY(6px); }
@media (prefers-reduced-motion: reduce) { .drawing-toast { transition: none; } }

.terminal-live-notice { position: fixed; inset-inline-start: 50%; bottom: 4.5rem; transform: translateX(-50%); z-index: 85; max-width: min(520px, calc(100vw - 2rem)); padding: .7rem 1rem; border: 1px solid rgba(37, 211, 156, .45); border-radius: 10px; background: #101827; color: #a9f0d8; font-size: .8rem; line-height: 1.7; text-align: center; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); animation: toast-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .terminal-live-notice { animation: none; } }

.chart-card.is-drawing .chart-canvas canvas { cursor: crosshair !important; }

/* ---------- Chart context menu ---------- */
.chart-context-menu {
    position: fixed;
    z-index: 1300;
    width: min(270px, calc(100vw - 1rem));
    padding: .45rem;
    border: 1px solid rgba(232, 184, 75, .34);
    border-top: 2px solid var(--gold);
    border-radius: 0 0 12px 12px;
    background: rgba(13, 21, 34, .985);
    color: var(--text);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .025) inset;
    direction: rtl;
}
.chart-context-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    inset-inline-start: 16px;
    width: 54px;
    height: 8px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg, var(--gold), rgba(232, 184, 75, .45));
}
.chart-context-menu[hidden] { display: none; }
.chart-context-head,
.chart-context-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .35rem .45rem;
}
.chart-context-head span {
    color: var(--gold-2);
    font-size: .66rem;
    font-weight: 700;
}
.chart-context-head b {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 600;
}
.chart-context-price-row {
    margin: .15rem 0 .3rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}
.chart-context-price-row span { color: var(--muted); font-size: .66rem; }
.chart-context-price-row strong { color: var(--gold-2); font-size: .76rem; font-weight: 700; }
.chart-context-actions { display: grid; gap: .12rem; }
.chart-context-action {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: .05rem .45rem;
    width: 100%;
    padding: .45rem .45rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.chart-context-action:hover { background: rgba(232, 184, 75, .1); }
.chart-context-action:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .6); background: rgba(232, 184, 75, .1); }
.chart-context-action:disabled { opacity: .42; cursor: not-allowed; }
.chart-context-action:disabled:hover { background: transparent; }
.chart-context-icon {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.chart-context-action.is-buy .chart-context-icon { color: #25d39c; }
.chart-context-action.is-sell .chart-context-icon { color: #f15b70; }
.chart-context-action.is-danger .chart-context-icon { color: #ff9b9b; }
.chart-context-copy { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.chart-context-copy strong { font-size: .72rem; font-weight: 600; }
.chart-context-copy small { color: var(--muted); font-size: .62rem; line-height: 1.5; }
.chart-context-sep { height: 1px; margin: .25rem .35rem; background: var(--line); }
.chart-context-feedback {
    margin: .35rem .4rem .05rem;
    color: #73e0b4;
    font-size: .64rem;
    line-height: 1.6;
}
.chart-context-feedback.is-error { color: #ff9b9b; }
.chart-context-feedback[hidden] { display: none; }
@media (max-width: 620px) {
    .chart-context-menu { width: min(250px, calc(100vw - .75rem)); }
    .chart-context-copy strong { font-size: .69rem; }
}
@media (prefers-reduced-motion: reduce) {
    .chart-context-action { transition: none; }
}

@media (max-width: 760px) {
    .drawing-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drawing-bar { align-items: flex-start; }
    .drawing-tools, .drawing-actions { width: 100%; }
}

@media (max-width: 520px) {
    .drawing-dialog-grid { grid-template-columns: 1fr; }
    .drawing-tool span:last-child { display: none; }
    .drawing-tool { padding-inline: .4rem; }
    .drawing-object-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .drawing-object-tools { grid-column: 1 / -1; justify-content: flex-start; }
}


#chart-card:fullscreen {
    border-radius: 0;
    background: var(--panel);
    padding: 1.1rem;
    overflow: auto;
}

/* The drawing toolbar and the one-click ticket are minimizable from the chart
   toolbar in the normal terminal and in chart fullscreen alike, because a
   trader who wants more chart space wants it in both modes. Hiding a bar is
   visual only: polling, the trade gate and the chart keep running. */
#chart-card.drawing-tools-collapsed .drawing-bar { display: none; }
#chart-card.quick-trade-collapsed .quick-trade { display: none; }
#chart-card:fullscreen .chart-shell { height: clamp(260px, calc(100vh - 420px), 760px); }
#chart-card:fullscreen.quick-trade-collapsed .chart-shell { height: clamp(300px, calc(100vh - 230px), 900px); }
#chart-card.chart-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    background: var(--panel);
    padding: max(.85rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) max(.85rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body.chart-fullscreen-lock { overflow: hidden; }
#chart-card.chart-fullscreen-fallback .chart-shell { height: clamp(240px, calc(100dvh - 420px), 760px); }
#chart-card.chart-fullscreen-fallback.quick-trade-collapsed .chart-shell { height: clamp(280px, calc(100dvh - 230px), 900px); }

.account-live .panel-title { margin-bottom: .6rem; }
.live-equity { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.live-equity small { color: var(--muted); font-size: .72rem; }
.live-equity strong { font-size: 1.7rem; line-height: 1.3; }
.live-equity span { font-size: .78rem; color: var(--muted); }

.live-rows { display: flex; flex-direction: column; gap: .35rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.live-rows > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.live-rows span { color: var(--muted); }
.live-rows strong { font-size: .82rem; }
.pending-margin-cell { min-width: 7.5rem; }
.pending-margin-cell .small { margin-top: .1rem; }

.live-rules { padding-top: .7rem; display: flex; flex-direction: column; gap: .6rem; }
.live-rule { display: flex; flex-direction: column; gap: .25rem; }
.live-target-amounts { display: flex; flex-wrap: wrap; gap: .2rem .85rem; font-size: .76rem; color: var(--muted); }
.live-target-amounts strong { color: var(--text); font-weight: 600; }

/* تفکیک سود/زیان هر پوزیشن زیر عدد خالص ریسک شناور */
.risk-breakdown {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .45rem;
    padding: .5rem .6rem;
    border: 1px dashed var(--line-2);
    border-radius: 9px;
}
.risk-breakdown-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2rem .6rem;
    font-size: .72rem;
    color: var(--text);
}
.risk-breakdown-head .muted { font-size: .68rem; }
.risk-breakdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.risk-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .15rem 0;
    border-bottom: 1px solid var(--line-2);
    font-size: .74rem;
}
.risk-breakdown-row:last-child { border-bottom: 0; }
.risk-breakdown-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--text);
}
.risk-breakdown-name strong { font-size: .76rem; }
.risk-breakdown-qty { color: var(--muted); font-size: .72rem; margin-inline-start: auto; }
.risk-breakdown-pnl { font-weight: 600; }
.risk-breakdown-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .3rem;
    border-top: 1px solid var(--line-2);
    font-size: .76rem;
    color: var(--muted);
}
.risk-breakdown-total strong { font-size: .82rem; }
.risk-breakdown-empty { margin: 0; font-size: .74rem; color: var(--muted); }
.risk-breakdown-note { margin: 0; font-size: .7rem; }
.live-days { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--muted); padding-top: .3rem; }
.live-days strong { color: var(--text); font-size: .82rem; }

.order-panel .panel-title { margin-bottom: .7rem; }
.order-quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .7rem;
    border: 1px dashed var(--line-2);
    border-radius: 9px;
    font-size: .78rem;
    color: var(--muted);
}

.order-quote strong { color: var(--gold-2); font-size: .95rem; }
.order-estimate { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--muted); }
.order-estimate strong { color: var(--text); }
.order-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.order-buttons .btn { padding-block: .7rem; }
.order-buttons .btn:disabled { opacity: .45; cursor: not-allowed; }
.order-gate-note {
    margin: 0;
    padding: .45rem .6rem;
    border-radius: 8px;
    font-size: .72rem;
    line-height: 1.7;
}
.order-gate-note.is-warn { background: rgba(245, 185, 66, .12); color: #f5c76a; }
.order-gate-note.is-bad { background: rgba(239, 90, 90, .14); color: #ff9b9b; }
.order-feedback {
    padding: .5rem .65rem;
    border-radius: 8px;
    font-size: .76rem;
    line-height: 1.7;
}
.order-feedback.is-success { background: rgba(60, 200, 140, .14); color: #73e0b4; }
.order-feedback.is-error { background: rgba(239, 90, 90, .14); color: #ff9b9b; }
.order-feedback.is-info { background: rgba(232, 184, 75, .12); color: var(--gold-2, #e8b84b); }
.order-feedback-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.order-feedback-row .order-feedback { flex: 1 1 12rem; }
.order-retry { flex: 0 0 auto; }
.position-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.position-actions .inline-form { margin: 0; }
/* A single close keeps its progress on the row itself; the batch close puts
   the same wording on its button, but here the action is icon-only. */
.position-actions .position-closing {
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .14rem .42rem; border-radius: 999px;
    background: rgba(232, 184, 75, .12); color: var(--gold-2, #e8b84b);
    font-size: .68rem; line-height: 1.4; white-space: nowrap;
}
.position-actions .position-closing[hidden] { display: none; }
.position-actions .position-closing::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    border: 1.5px solid currentColor; border-right-color: transparent;
    animation: position-closing-spin .7s linear infinite;
}
@keyframes position-closing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .position-actions .position-closing::before { animation: none; }
}
.trade-dialog {
    width: min(560px, calc(100vw - 2rem));
    padding: 1.1rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow);
}
.trade-dialog::backdrop { background: rgba(3, 6, 12, .72); }
.trade-dialog .panel-title { margin-bottom: .85rem; }

/* ---------- Conditional-order guide ---------- */
.panel-title.pending-panel-title { flex-wrap: wrap; row-gap: .55rem; }
.panel-title .pending-guide-open { flex: 0 0 auto; align-self: flex-start; }
.panel-title .pending-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 0 0 auto;
    align-self: flex-start;
}
/* ---------- Conditional-order builder ---------- */
.pending-builder-dialog {
    width: min(720px, calc(100vw - 1.5rem));
    max-height: 88vh;
    overflow: auto;
}
.pending-builder-lead { font-size: .86rem; line-height: 1.95; }
.pending-builder-quote {
    margin: .2rem 0 .7rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(140, 155, 178, .3);
    border-radius: .6rem;
    background: rgba(232, 184, 75, .06);
    font-size: .84rem;
    line-height: 1.8;
}
.pending-builder-result { display: grid; gap: .45rem; }
.pending-builder-result p { margin: 0; line-height: 1.9; }
.pending-builder-badge {
    justify-self: start;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(140, 155, 178, .3);
    font-size: .82rem;
}
.pending-builder-badge.is-buy {
    color: var(--green);
    border-color: rgba(37, 211, 156, .45);
    background: rgba(37, 211, 156, .1);
}
.pending-builder-badge.is-sell {
    color: var(--red);
    border-color: rgba(241, 91, 112, .45);
    background: rgba(241, 91, 112, .1);
}
.pending-builder-dollar-risk {
    color: var(--gold, #e8b84b);
    font-weight: 600;
}
@media (max-width: 520px) {
    .panel-title .pending-panel-actions { width: 100%; }
    .panel-title .pending-panel-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 520px) {
    /* The title copy owns the full row on a phone; the guide button drops below it. */
    .panel-title .pending-guide-open { width: 100%; }
}
.pending-guide-dialog {
    width: min(760px, calc(100vw - 1.5rem));
    max-height: 88vh;
    overflow: auto;
}
.pending-guide-lead { font-size: .86rem; line-height: 1.95; }
.pending-guide-figure {
    margin: .9rem 0 1rem;
    padding: .7rem .85rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(232, 184, 75, .07), rgba(13, 21, 34, 0));
}
.pending-guide-figure svg { display: block; width: 100%; height: auto; }
.pending-guide-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-top: .45rem;
    font-size: .72rem;
    color: var(--muted);
}
.pending-guide-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.pending-guide-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.pending-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .55rem;
    margin: .35rem 0 1rem;
}
.pending-guide-card {
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
    font-size: .78rem;
    line-height: 1.85;
}
.pending-guide-card strong { display: block; color: var(--gold-2); margin-bottom: .1rem; }
.pending-guide-card.is-buy { border-inline-start: 3px solid var(--green); }
.pending-guide-card.is-sell { border-inline-start: 3px solid var(--red); }
.pending-guide-steps {
    counter-reset: pending-guide;
    list-style: none;
    padding: 0;
    margin: .35rem 0 1rem;
    display: grid;
    gap: .5rem;
}
.pending-guide-steps li {
    position: relative;
    padding: .55rem .8rem;
    padding-inline-start: 2.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
    font-size: .8rem;
    line-height: 1.9;
}
.pending-guide-steps li::before {
    counter-increment: pending-guide;
    content: counter(pending-guide);
    position: absolute;
    inset-inline-start: .7rem;
    inset-block-start: .6rem;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(232, 184, 75, .16);
    color: var(--gold-2);
    font-size: .72rem;
    font-weight: 700;
}
.pending-guide-note { font-size: .78rem; color: var(--muted); line-height: 1.9; }
.pending-guide-dialog h4 { margin: .9rem 0 .25rem; font-size: .92rem; color: var(--gold-2); }
.table-positions { min-width: 700px; }

/* ---------- Error pages ---------- */

.error-page {
    max-width: 560px;
    margin: 4rem auto;
    padding: 3rem 2rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
}

.error-code {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(120deg, var(--gold-2), #b9821a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-page p { color: var(--muted); }
.error-page .hero-actions { justify-content: center; }

/* ---------- Notices, payments and KYC ---------- */

.notice {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1.05rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
    font-size: .84rem;
    line-height: 1.85;
}

.notice strong { color: var(--text); }
.notice-info { border-color: rgba(107, 155, 255, .35); background: rgba(107, 155, 255, .06); }
.notice-warn { border-color: rgba(232, 184, 75, .35); background: rgba(232, 184, 75, .06); }
.notice-error { border-color: rgba(241, 91, 112, .35); background: rgba(241, 91, 112, .06); }
.notice-list { display: flex; flex-direction: column; gap: .3rem; margin: .15rem 0 0; padding-inline-start: 1.1rem; }
.notice-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.demo-cleanup { border-color: rgba(241, 91, 112, .3); }
.demo-cleanup .referral-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo-cleanup-note { margin: .9rem 0 0; line-height: 1.9; }
.demo-cleanup-details { margin-top: .7rem; font-size: .8rem; color: var(--muted); }
.demo-cleanup-details summary { cursor: pointer; color: var(--gold-2); }
.demo-email-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.demo-email-list code {
    padding: .12rem .45rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
    font-size: .72rem;
}
.demo-cleanup-form { display: grid; gap: .8rem; margin-top: .9rem; }
@media (max-width: 700px) {
    .demo-cleanup .referral-summary { grid-template-columns: 1fr; }
}
.stat-warn { border-color: rgba(232, 184, 75, .35); }
.stat-warn .stat-label { color: var(--gold-2); }
.small-strong { font-size: .92rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filter-row .chip { cursor: pointer; }

.wallet-grid { align-items: start; }
.wallet-demo {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line-2);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.wallet-demo .wallet-actions { margin-top: .3rem; }

.checkout-summary,
.kyc-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: 1rem;
}

.checkout-summary > div,
.kyc-summary > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

.checkout-summary small,
.kyc-summary small { color: var(--muted); font-size: .72rem; }
.checkout-summary strong,
.kyc-summary strong { font-size: .9rem; }
.checkout-summary .big { font-size: 1.2rem; color: var(--gold-2); }

.upload-field input[type="file"] {
    padding: .5rem .6rem;
    font-size: .78rem;
    cursor: pointer;
}

.upload-field input[type="file"]::file-selector-button {
    margin-inline-end: .6rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.doc-links,
.review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.kyc-layout .kyc-aside { align-self: start; }
.kyc-aside h3 { margin-top: .9rem; }
.kyc-aside h3:first-child { margin-top: 0; }

.secret-box {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 1rem 0 1.2rem;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.secret-box code {
    color: var(--gold-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .18em;
    word-break: break-all;
}

.secret-box .small { font-size: .78rem; }
.totp-setup {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1rem;
}
.totp-qr-box { text-align: center; }
.totp-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    padding: .55rem;
    border-radius: 14px;
    background: #fff;
}
.totp-qr img, .totp-qr canvas { display: block; max-width: 100%; height: auto; }
.totp-setup .secret-box { margin-top: 0; }
.secret-actions, .recovery-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.recovery-actions { margin-top: .75rem; }
.security-details { margin: .9rem 0; }
.security-details summary { cursor: pointer; color: var(--gold-2); }
@media (max-width: 640px) {
    .totp-setup { grid-template-columns: 1fr; }
    .totp-qr-box { justify-self: center; }
}
.narrow-form { max-width: 380px; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .35em; text-align: center; }
.setup-steps { margin-bottom: 1rem; }

.code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-bottom: .8rem;
}

.code-grid code {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .02);
    color: var(--gold-2);
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .08em;
}

/* ---------- Admin audit and sessions ---------- */

.audit-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.audit-filter .select-field { min-width: 210px; }
.audit-filter .audit-user-field { flex: 1 1 240px; max-width: 380px; }
.audit-filter .audit-date-field { flex: 0 0 155px; }
.audit-filter-actions { display: flex; gap: .4rem; margin-inline-start: auto; }

.audit-action { font-size: .84rem; }

.audit-details {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .72rem;
    color: var(--muted);
    line-height: 1.7;
}

.audit-details b { color: var(--text); font-weight: 600; }

.audit-settings-change {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: .2rem 0 .4rem;
}

.audit-setting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2rem .7rem;
    padding: .35rem .5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.audit-setting-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
}

.audit-setting-name code {
    color: var(--gold-2);
    font-size: .72rem;
    word-break: break-all;
}

.audit-setting-values {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    direction: ltr;
    unicode-bidi: plaintext;
}

.audit-setting-old {
    color: var(--muted);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.audit-setting-arrow { color: var(--muted); }
.audit-setting-new { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .audit-setting-row { align-items: flex-start; flex-direction: column; }
}

.system-grid { align-items: start; }

.system-list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.system-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .48rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: .82rem;
}

.system-list > div:last-child { border-bottom: 0; }
.system-list span { color: var(--muted); }
.system-list strong { font-weight: 600; text-align: left; word-break: break-word; }

@media (max-width: 560px) {
    .service-run-list > div { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .service-run-list strong { text-align: start; }
}

.system-command {
    margin: .2rem 0 .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: var(--gold-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    text-align: left;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-output {
    max-height: 360px;
    overflow: auto;
    margin: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(0, 0, 0, .24);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bridge-debug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.bridge-debug-grid .unit-block { min-width: 0; }
.bridge-debug-grid h4 { margin: 0 0 .45rem; }
.bridge-debug-grid .log-output { min-height: 10rem; max-height: 420px; }
#bridge-quote-test-result > .table-wrap { margin-top: .75rem; }
#bridge-quote-test-quotes td { vertical-align: top; }

.session-device { font-size: .84rem; }
.session-agent {
    direction: ltr;
    text-align: right;
    max-width: 260px;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .account-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .terminal-grid { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .22s ease;
        box-shadow: -20px 0 50px rgba(0, 0, 0, .45);
    }

    .sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(3, 6, 10, .6);
        backdrop-filter: blur(2px);
    }

    .main { margin-inline-start: 0; }
    .icon-btn.menu-btn { display: inline-flex; }
    .topbar { padding: .7rem 1rem; }
    .content { padding: 1.1rem 1rem 2rem; }
    .app-footer { padding: .8rem 1rem; }
    .app-body .flash-stack { margin-top: .8rem; padding-inline: 1rem; }
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero { padding-top: 2.5rem; }
    .terminal-grid { grid-template-columns: 1fr; }
    .terminal-side { position: static; }
    .funded-grid { grid-template-columns: 1fr; }
    .auth-wrap { grid-template-columns: 1fr; margin-block: 2rem; }
    .auth-aside { order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .rules-note { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr; }
    .site-nav { display: none; }
    .plan-grid { grid-template-columns: 1fr 1fr; }
    .market-row { grid-template-columns: 1fr auto; }
    .market-row .spark { display: none; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .terminal-head { flex-direction: column; }
    .quote-meta { gap: .9rem; }
    .auth-wrap { width: calc(100% - 2rem); }
    .chart-shell { height: 430px; }
    #chart-card:fullscreen .chart-shell { height: clamp(240px, calc(100vh - 430px), 700px); }
    #chart-card:fullscreen.quick-trade-collapsed .chart-shell { height: clamp(280px, calc(100vh - 230px), 820px); }
    #chart-card.chart-fullscreen-fallback .chart-shell { height: clamp(220px, calc(100dvh - 430px), 700px); }
    #chart-card.chart-fullscreen-fallback.quick-trade-collapsed .chart-shell { height: clamp(260px, calc(100dvh - 230px), 820px); }
    .quick-trade-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-trade-actions { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    body { font-size: 14px; }
    .container { width: calc(100% - 1.6rem); }
    .section { padding-block: 3rem; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: 1fr; }
    .plan-grid { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: 1fr; }
    .rules-note { grid-template-columns: 1fr; }
    .stat-grid { gap: .6rem; }
    .page-head { flex-direction: column; }
    .topbar-end .chip { display: none; }
    .quote-line strong { font-size: 1.55rem; }
    .chart-shell { height: 350px; }
    .chart-toolbar { justify-content: flex-start; }
    .chart-indicators { order: 3; width: 100%; }
    .indicator-menu-panel { width: min(340px, calc(100vw - 1.6rem)); }
    .quick-trade-head { flex-direction: column; }
    .quick-trade-prices { width: 100%; }
    .quick-trade-body { grid-template-columns: minmax(0, 1fr); }
    .quick-trade-actions { grid-column: auto; }
    .account-equity { grid-template-columns: 1fr 1fr; }
    .funded-stats { grid-template-columns: 1fr 1fr; }
    .payout-form { flex-direction: column; align-items: stretch; }
    .footer-grid { grid-template-columns: 1fr; }
    .site-header-inner { flex-wrap: nowrap; gap: .6rem; padding-block: .6rem; }
    .site-header .brand { min-width: 0; }
    .site-header .brand-text { min-width: 0; }
    .site-header .brand-text small { display: none; }
    .site-header .brand-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-actions { flex-shrink: 0; gap: .35rem; }
    .field-row,
    .field-row.three { grid-template-columns: 1fr; }
    .checkout-summary, .kyc-summary { grid-template-columns: 1fr; }
    .page-actions { width: 100%; }
    .audit-filter .audit-user-field { max-width: none; }
    .audit-filter .audit-date-field { flex: 1 1 100%; }
    .audit-filter-actions { margin-inline-start: 0; width: 100%; }
    .rule-inline { grid-template-columns: 1fr 1fr; }
    .app-footer { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Notifications */
.bell-btn {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
}
.bell-btn svg { width: 19px; height: 19px; }
.bell-btn:hover { border-color: var(--line-2); }
.bell-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold);
    color: #101010;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}
.notification-item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .015);
}
.notification-item.is-alert {
    border-color: rgba(239, 68, 68, .55);
    background: rgba(239, 68, 68, .08);
}

.notification-item.is-alert strong { color: #ffb4b4; }

.notification-item.is-unread {
    border-color: rgba(232, 184, 75, .38);
    background: rgba(232, 184, 75, .045);
}
.notification-body { display: grid; gap: .35rem; }
.notification-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notification-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.notification-body p { margin: 0; }

/* Legal pages and consent */
.check-field {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.9;
}
.check-field input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: .25rem;
    accent-color: var(--gold);
    flex-shrink: 0;
}
.check-field a { color: var(--gold-2); text-decoration: none; }
.check-field a:hover { text-decoration: underline; }

.legal-page { max-width: 900px; padding-block: 2rem 3rem; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.legal-tabs .is-active { border-color: rgba(232, 184, 75, .45); color: var(--gold-2); }
.legal-content { display: grid; gap: 1.4rem; }
.legal-content h2 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--gold-2); }
.legal-content p { margin: .35rem 0; color: #c4cfe0; font-size: .9rem; line-height: 2; }

.footer-links { display: inline-flex; flex-wrap: wrap; gap: .9rem; }
.footer-links a { color: #7d8ea6; text-decoration: none; }
.footer-links a:hover { color: var(--gold-2); }

/* Admin market, plan and settings editors */
.radio-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .015);
}
.radio-row input { margin-top: .35rem; accent-color: var(--gold); flex-shrink: 0; }
.radio-row span { display: flex; flex-direction: column; gap: .1rem; }
.radio-row small { color: var(--muted); line-height: 1.8; }

.symbol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}
.symbol-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: rgba(255, 255, 255, .015);
}
/* A spread wider than the configured threshold is a warning, not an error:
   the card stays usable but the border and badge make it impossible to miss. */
.symbol-card.is-spread-wide {
    border-color: rgba(232, 184, 75, .55);
    background: rgba(232, 184, 75, .045);
    box-shadow: 0 0 0 1px rgba(232, 184, 75, .2);
}
.table tbody tr.is-spread-wide > td {
    background: rgba(232, 184, 75, .045);
}
.table tbody tr.is-spread-wide > td:first-child {
    border-inline-start: 3px solid rgba(232, 184, 75, .55);
}
.symbol-head .symbol-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.symbol-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .8rem;
}
.symbol-head small { display: block; }
.symbol-card .form { gap: .55rem; }

/* Bulk selection and collapsed symbol cards. The controls live outside the
   grid; every checkbox is associated with the bulk form by its form=""
   attribute so it can sit inside its own card without nesting forms. */
.symbol-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .2rem 0 .95rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}
.symbol-bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-inline-start: auto;
}
.symbol-bulk-hint { flex: 1 1 100%; margin: 0; }
.symbol-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    cursor: pointer;
}
.symbol-select input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--gold);
    cursor: pointer;
}
.symbol-head-main { flex: 1 1 auto; min-width: 0; }
.symbol-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.symbol-toggle-icon {
    display: inline-block;
    transition: transform .15s ease;
}
.symbol-card.is-collapsed { padding-bottom: .9rem; }
.symbol-card.is-collapsed .symbol-head { margin-bottom: 0; }
.symbol-card.is-collapsed .symbol-toggle-icon { transform: rotate(180deg); }
.symbol-card-body { min-width: 0; }
.symbol-card-body[hidden] { display: none; }
.symbol-card.is-selected {
    border-color: rgba(232, 184, 75, .6);
    box-shadow: 0 0 0 1px rgba(232, 184, 75, .22);
}
@media (max-width: 620px) {
    .symbol-bulk-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-inline-start: 0;
    }
    .symbol-bulk-actions .btn { width: 100%; }
    .symbol-head { flex-wrap: wrap; }
    .symbol-head-main { flex: 1 1 calc(100% - 2.2rem); }
    .symbol-head .symbol-badges {
        width: 100%;
        justify-content: flex-start;
        padding-inline-start: 1.9rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .symbol-toggle-icon { transition: none; }
}

.plan-admin-grid { display: grid; gap: 1rem; }
.plan-admin-card .form { gap: .55rem; }
.form-section-title {
    margin: .8rem 0 0;
    font-size: .85rem;
    color: var(--gold-2);
    border-top: 1px solid var(--line);
    padding-top: .8rem;
}

.close-trade-form { display: flex; flex-direction: column; gap: .4rem; min-width: 260px; }
.close-trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.close-trade-grid .field span { font-size: .68rem; }
.close-trade-grid .field input,
.close-trade-grid .field select { padding: .3rem .45rem; font-size: .78rem; }
.close-trade-note { grid-column: 1 / -1; }

.device-accounts { display: flex; flex-direction: column; gap: .35rem; }
.device-account {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .35rem .5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.device-account:hover { border-color: rgba(232, 184, 75, .45); }

.device-ban-form { display: flex; flex-direction: column; gap: .35rem; min-width: 190px; }
.device-ban-form .field > span { font-size: .68rem; }
.device-ban-form .field input,
.device-ban-form .field select { padding: .3rem .45rem; font-size: .76rem; border-radius: 8px; }
.gate-days { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 320px; }
.gate-days .badge { font-size: .68rem; white-space: nowrap; }
.ban-form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 165px; }
.ban-form select { padding: .28rem .4rem; font-size: .72rem; border-radius: 8px; }
.abuse-decisions { display: flex; flex-direction: column; gap: .3rem; min-width: 170px; }

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.pager-info { color: var(--muted); font-size: .78rem; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: .34rem .6rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
    color: var(--text);
    font-size: .8rem;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pager-btn:hover { border-color: rgba(232, 184, 75, .45); background: rgba(232, 184, 75, .08); }
.pager-btn.is-active {
    border-color: rgba(232, 184, 75, .55);
    background: rgba(232, 184, 75, .14);
    color: var(--gold-2);
    font-weight: 700;
}
.pager-btn.is-disabled { color: var(--muted); opacity: .5; pointer-events: none; }
.pager-gap { color: var(--muted); padding: 0 .2rem; font-size: .8rem; }

/* ---- Trading analytics ---- */
.analytics-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    padding: .9rem 1rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .006));
}

.analytics-filter .field { flex: 1 1 170px; min-width: 150px; }
.analytics-filter .field input,
.analytics-filter .field select { padding: .5rem .7rem; font-size: .84rem; }
.analytics-filter-actions { display: flex; gap: .4rem; margin-inline-start: auto; }

.analytics-chart-panel { margin-bottom: 1.2rem; }
.equity-curve { display: block; width: 100%; height: auto; margin-top: .6rem; }
.equity-line { fill: none; stroke: var(--gold-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.equity-zero { stroke: rgba(255, 255, 255, .16); stroke-dasharray: 4 4; }
.equity-axis { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .35rem; color: var(--muted); font-size: .72rem; }

.slippage-chart { display: block; width: 100%; height: auto; margin-top: .6rem; }
.slippage-zero { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 4 4; }
.slippage-bar.is-cost { fill: var(--red); opacity: .82; }
.slippage-bar.is-gain { fill: var(--green); opacity: .82; }
.slippage-bar.is-flat { fill: var(--muted); opacity: .4; }
.slippage-bar:hover { opacity: 1; }
.slippage-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .45rem; color: var(--muted); font-size: .72rem; }
.slippage-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-inline-end: .25rem; vertical-align: middle; }
.slippage-dot.is-cost { background: var(--red); }
.slippage-dot.is-gain { background: var(--green); }

.analytics-side { display: flex; flex-direction: column; gap: 1.2rem; }
.analytics-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.9; }

@media (max-width: 620px) {
    .analytics-filter .field { flex: 1 1 100%; }
    .analytics-filter-actions { width: 100%; margin-inline-start: 0; }
    .analytics-filter-actions .btn { flex: 1; }
    .equity-axis { flex-wrap: wrap; }
    .slippage-legend { align-items: flex-start; }
}

/* ---- Payout status history ---- */
.payout-events { margin-top: .3rem; font-size: .72rem; }
.payout-events summary { cursor: pointer; color: var(--gold-2); }
.payout-events .mini-list li { flex-direction: column; align-items: flex-start; gap: .1rem; }
.payout-events .mini-list small { line-height: 1.7; }

/* ---- Payout request details (click a history row) ---- */
.payout-details-hint { margin: -.4rem 0 .8rem; }
/* A trade row opens its details page; trade-rows.js delegates the click so rows
   refreshed by polling keep working. Links inside cells stay usable. */
tr[data-trade-url] { cursor: pointer; }
tr[data-trade-url]:hover > td { background: rgba(232, 184, 75, .05); }
tr[data-trade-url]:focus-within > td { background: rgba(232, 184, 75, .07); }

.payout-row { cursor: pointer; }
.payout-row:hover > td { background: rgba(232, 184, 75, .05); }
.payout-row.is-open > td { background: rgba(232, 184, 75, .09); }
.payout-row:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.payout-row-hint { display: block; margin-top: .15rem; color: var(--gold-2); }
.payout-details-row > td { background: rgba(255, 255, 255, .02); }
.payout-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem .9rem; }
.payout-details-grid > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.payout-details-grid small { color: var(--muted); font-size: .72rem; }
.payout-details-note { margin: .7rem 0 .2rem; }
.payout-timeline { margin: .4rem 0 0; }
.payout-timeline li { flex-direction: column; align-items: flex-start; gap: .1rem; }

/* ---- Account risk audit ---- */
.decision-stack { display: flex; flex-direction: column; gap: .7rem; }
.decision-card { padding: .85rem 1rem; }
.decision-card .details-summary { gap: .7rem; }
.decision-card .details-summary strong { font-size: .92rem; }
.decision-card .system-list { margin-top: .7rem; }
.audit-json {
    max-height: 18rem;
    overflow: auto;
    margin: .5rem 0 0;
    padding: .65rem .8rem;
    border-radius: .5rem;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.7;
}
.audit-subtitle { margin: 1rem 0 .45rem; font-size: .84rem; color: var(--gold-2); }
.table-compact td, .table-compact th { padding: .45rem .5rem; font-size: .78rem; }
.audit-replay { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.audit-replay p { margin: 0; flex: 1 1 16rem; line-height: 1.9; }

/* ---- Manual stage review queue ---- */
.review-action-form { display: flex; flex-direction: column; gap: .35rem; min-width: 14rem; }
.review-action-form textarea { width: 100%; min-height: 2.8rem; resize: vertical; }
.review-action-form .action-stack { align-items: stretch; }
@media (max-width: 620px) {
    .review-action-form { min-width: 11rem; }
}

/* ---- Crypto payments ---- */
.notice-success { border-color: rgba(37, 211, 156, .35); background: rgba(37, 211, 156, .07); }

/* A wallet-check result stays on the checkout page until the customer closes
   it: the page refreshes itself every 15 seconds, so nothing auto-hides it. */
.crypto-check-notice {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.crypto-check-notice-text { flex: 1 1 auto; }
.crypto-check-notice-close { flex: 0 0 auto; margin: 0; }
.crypto-check-notice-close .btn { line-height: 1; padding-inline: .45rem; }

.check-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; margin-block: .55rem; cursor: pointer; }
.check-row input { margin-top: .35rem; accent-color: var(--gold); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-block: .8rem 1rem; }
.field-inline { flex-direction: row; align-items: center; gap: .5rem; }
.field-inline select { min-width: 12rem; }
.crypto-pay-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .8rem;
    padding: .85rem 1rem;
    margin-block: .55rem;
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    background: var(--panel-2);
}
.crypto-pay-box small { flex: 1 1 100%; color: var(--muted); font-size: .76rem; }
.crypto-pay-box strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.crypto-address { word-break: break-all; font-size: .95rem; }
.crypto-provider-card { margin-top: 1rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.crypto-provider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.crypto-provider-head strong { display: block; font-size: .86rem; }
.crypto-provider-head small { display: block; margin-top: .15rem; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.crypto-provider-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin-top: .65rem; }
.crypto-provider-facts > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.crypto-provider-facts span { color: var(--muted); font-size: .68rem; }
.crypto-provider-facts strong { font-size: .78rem; overflow-wrap: anywhere; }
.crypto-provider-card .form-hint { margin: .6rem 0 0; }
.crypto-checkout .panel:first-child { min-width: 0; }
.kv-list { display: flex; flex-direction: column; gap: .35rem; margin: 1rem 0; }
.kv-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding-block: .3rem; border-bottom: 1px dashed var(--line); }
.kv-list dt { color: var(--muted); font-size: .8rem; margin: 0; }
.kv-list dd { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.crypto-network { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-block: 1rem; min-width: 0; }
.crypto-network legend { padding-inline: .55rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.crypto-review-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 1rem 1.1rem; margin-block: 1rem; min-width: 0; }
.crypto-review-card > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.crypto-review-form { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.crypto-order-details summary { cursor: pointer; color: var(--gold-2); font-size: .82rem; margin-block: .5rem; }
.crypto-order-details code { white-space: pre-wrap; word-break: break-word; }
.crypto-order-details .notice-list { margin-top: .6rem; }
@media (max-width: 620px) {
    .crypto-pay-box strong { font-size: .96rem; }
    .crypto-provider-facts { grid-template-columns: 1fr; }
    .field-inline { flex-direction: column; align-items: flex-start; }
    .field-inline select { width: 100%; min-width: 0; }
}

/* Phase 2 referral reward configuration and claim cards */
.reward-config-grid {
    display: grid;
    gap: 14px;
    margin: 18px 0;
}
.reward-config-card {
    border: 1px solid var(--border, #243044);
    border-radius: 12px;
    padding: 14px 16px 6px;
    background: rgba(10, 18, 32, 0.35);
}
.reward-config-card legend {
    padding: 0 8px;
    font-weight: 700;
}
.check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.inline-check-field {
    align-self: end;
}
.form-notice {
    margin: 8px 0 16px;
}
.referral-entitlements {
    display: grid;
    gap: 14px;
}
.referral-entitlement {
    padding: 16px;
    border: 1px solid var(--border, #243044);
    border-radius: 12px;
}
.referral-claim-form {
    margin-top: 10px;
}
.plan-discount-field {
    margin: 10px 0;
}
.plan-discount-field input {
    font-family: monospace;
    direction: ltr;
    text-align: left;
}
.d-block {
    display: block;
}

/* Phase 4 support inbox */
.ticket-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
    margin-bottom: 1.4rem;
}
.ticket-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .8rem;
}
.ticket-tab {
    padding: .4rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .78rem;
}
.ticket-tab:hover,
.ticket-tab.is-active {
    color: var(--gold-2);
    border-color: rgba(232, 184, 75, .4);
    background: rgba(232, 184, 75, .08);
}
.ticket-list {
    display: grid;
    gap: .55rem;
}
.ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .85rem .95rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    color: inherit;
}
.ticket-row:hover {
    border-color: rgba(232, 184, 75, .35);
    background: rgba(232, 184, 75, .04);
}
.ticket-main {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.ticket-main strong {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
}
.ticket-unread {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--gold-2);
    flex: 0 0 auto;
}
.ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    margin-bottom: 1rem;
}
.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.ticket-message {
    max-width: 88%;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}
.ticket-message.is-user {
    align-self: flex-start;
    border-start-start-radius: 4px;
}
.ticket-message.is-support {
    align-self: flex-end;
    border-color: rgba(232, 184, 75, .28);
    background: rgba(232, 184, 75, .06);
    border-start-end-radius: 4px;
}
.ticket-message.is-internal {
    max-width: 100%;
    align-self: stretch;
    border-style: dashed;
    border-color: rgba(241, 91, 112, .35);
    background: rgba(241, 91, 112, .045);
}
.ticket-message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .45rem;
    font-size: .8rem;
}
.ticket-message-body {
    font-size: .88rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
}
.ticket-attachment {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
    font-size: .76rem;
    color: var(--text);
}
.ticket-attachment span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-attachment:hover {
    border-color: rgba(232, 184, 75, .4);
}
.ticket-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr);
    gap: 1rem;
    align-items: start;
}
.ticket-admin-grid > * { min-width: 0; }
.ticket-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ticket-side .panel { margin-bottom: 0; }
.ticket-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.7fr) repeat(3, minmax(120px, .8fr)) auto auto;
    gap: .55rem;
    align-items: end;
    margin-bottom: 1rem;
}
.ticket-filter-form .field { min-width: 0; }
.ticket-filter-form .btn { white-space: nowrap; }
.ticket-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .7rem;
    margin: 0;
    font-size: .8rem;
}
.ticket-facts dt { color: var(--muted); }
.ticket-facts dd { margin: 0; overflow-wrap: anywhere; }
.is-unread-row td { background: rgba(232, 184, 75, .035); }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 1100px) {
    .ticket-admin-grid { grid-template-columns: minmax(0, 1fr); }
    .ticket-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-filter-form .btn { justify-self: start; }
}

@media (max-width: 760px) {
    .ticket-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-row { flex-direction: column; align-items: flex-start; }
    .ticket-message { max-width: 100%; }
    .ticket-filter-form { grid-template-columns: minmax(0, 1fr); }
    .ticket-filter-form .btn { width: 100%; }
}


/* Custom plan builder and user intelligence report */
.plan-builder-grid { align-items: start; }
.builder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .8rem; }
.builder-fields .field { min-width: 0; }
.builder-fields .field small { margin-inline-start: .3rem; font-size: .68rem; }
.builder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; margin-top: .9rem; }
.builder-actions form { margin: 0; }
.builder-price { display: flex; flex-direction: column; gap: .15rem; margin: .5rem 0 1rem; }
.builder-price strong { font-size: 1.9rem; color: var(--gold, #e8b84b); }
.builder-price small { color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.builder-summary { display: grid; gap: .4rem; margin: 0 0 1rem; font-size: .8rem; }
.builder-summary > div { display: flex; justify-content: space-between; gap: .6rem; padding-bottom: .35rem; border-bottom: 1px dashed var(--line); }
.builder-summary dt { color: var(--muted); }
.builder-summary dd { margin: 0; text-align: end; }
.builder-price-breakdown { display: grid; gap: .35rem; margin: .6rem 0 1rem; font-size: .78rem; }
.builder-price-breakdown > div { display: flex; justify-content: space-between; gap: .6rem; }
.builder-price-breakdown span { color: var(--muted); }
.plan-builder-summary { position: sticky; top: 1rem; }
.report-bars { display: grid; gap: .45rem; }
.report-bar-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 100px; align-items: center; gap: .6rem; font-size: .74rem; }
.report-bar-row > strong { text-align: end; }
.report-bar-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.report-bar-track i { display: block; height: 100%; border-radius: inherit; }
.report-bar-track i.is-pos { background: #25d39c; }
.report-bar-track i.is-neg { background: #ef6a6a; }
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .plan-builder-grid { grid-template-columns: minmax(0, 1fr); }
    .plan-builder-summary { position: static; }
    .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .builder-fields { grid-template-columns: minmax(0, 1fr); }
    .report-bar-row { grid-template-columns: 76px minmax(0, 1fr) 84px; gap: .35rem; }
    .stat-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Advanced custom plan builder: staged fields, tariff editor and breakdown */
.builder-step { margin: 0 0 1rem; padding: .7rem .8rem .4rem; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.builder-step legend { padding: 0 .35rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.builder-step legend .small { font-weight: 400; }
.builder-field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.hint { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); font-size: .65rem; color: var(--muted); cursor: help; }
.builder-lines { display: grid; gap: .45rem; margin: .4rem 0 1rem; font-size: .76rem; }
.builder-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; padding-bottom: .35rem; border-bottom: 1px dashed var(--line); }
.builder-lines > div > span { overflow-wrap: anywhere; }
.builder-line-hint { grid-column: 1 / -1; font-size: .66rem; }
.builder-warnings { margin: 0 0 1rem; padding-inline-start: 1.1rem; color: #efc46a; display: grid; gap: .25rem; }
.tariff-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.tariff-metric { min-width: 0; margin: 0; }
.tariff-metric-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.tariff-metric .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tariff-rules { display: grid; gap: .7rem; margin-bottom: 1rem; }
.tariff-rule { min-width: 0; margin: 0; }
.tariff-rule-flags { display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; min-width: 0; }
.tariff-conditions { margin-top: .5rem; }
.tariff-condition { display: grid; grid-template-columns: minmax(0, 1.2fr) 70px minmax(0, .9fr); gap: .35rem; min-width: 0; }
.tariff-condition select, .tariff-condition input { min-width: 0; }
.tariff-preview-line { display: flex; justify-content: space-between; gap: .6rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); font-size: .76rem; }
.tight-list { margin: .3rem 0 0; padding-inline-start: 1.05rem; display: grid; gap: .4rem; font-size: .8rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 1100px) {
    .tariff-metrics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .tariff-metric .field-row.three { grid-template-columns: minmax(0, 1fr); }
    .tariff-condition { grid-template-columns: minmax(0, 1fr); }
    .builder-step { padding: .6rem .55rem .3rem; }
}

/* Progressive AJAX forms */
.form.is-ajax-busy { opacity: .82; }
.form.is-ajax-busy button[type="submit"] { cursor: progress; }
.field-error { margin-top: .3rem; color: var(--red); font-size: .74rem; line-height: 1.6; }
.form-error { margin: 0 0 .85rem; padding: .65rem .8rem; border: 1px solid rgba(241, 91, 112, .4); border-radius: 10px; background: rgba(241, 91, 112, .08); color: #ffb9c2; font-size: .8rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(241, 91, 112, .12); }
.ajax-toast-stack { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 90; display: grid; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.ajax-toast { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); box-shadow: var(--shadow); font-size: .8rem; animation: toast-in .18s ease-out; }
.ajax-toast > span { flex: 1; }
.ajax-toast-close { border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .1rem; cursor: pointer; opacity: .75; }
.ajax-toast-close:hover { opacity: 1; }
.symbol-save-state { min-height: 1.2rem; margin: .45rem 0 0; color: var(--muted); }
.symbol-save-state.is-saved { color: #7ff0c8; }
.symbol-save-state.is-error { color: #ff9aaa; }
.captcha-error { margin: .35rem 0 0; color: #ff9aaa; font-size: .78rem; }
.ajax-toast.is-success { border-color: rgba(37, 211, 156, .45); color: #a9f0d8; }
.ajax-toast.is-error { border-color: rgba(241, 91, 112, .5); color: #ffb9c2; }
.ajax-toast.is-leaving {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ajax-toast.is-leaving { transition: none; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* CMS public pages and editor */
.cms-body { font-size: .92rem; line-height: 1.95; }
.cms-body h1, .cms-body h2, .cms-body h3, .cms-body h4 { margin: 1.35em 0 .55em; line-height: 1.5; }
.cms-body h2 { color: var(--gold-2); font-size: 1.08rem; }
.cms-body p { margin: 0 0 .9em; color: var(--text); }
.cms-body ul, .cms-body ol { margin: .4em 0 1em; padding-inline-start: 1.3rem; }
.cms-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cms-body blockquote { margin: 1em 0; padding: .6rem 1rem; border-inline-start: 3px solid var(--gold); background: rgba(232, 184, 75, .06); border-radius: 8px; }
.cms-body img { max-width: 100%; height: auto; border-radius: 12px; }
.cms-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .8rem; }
.cms-body th, .cms-body td { border: 1px solid var(--line); padding: .45rem .55rem; text-align: start; }
.cms-hero-image { width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; margin-bottom: 1.1rem; }

/* Ready-made blocks inserted by the shared HTML editor. */
.cms-body .cms-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 1.1rem; }
.cms-body .cms-grid > * { min-width: 0; }
.cms-body .cms-card { padding: 1rem 1.1rem; border: 1px solid var(--line-2, #293a52); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.cms-body .cms-card h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.cms-body .cms-card p:last-child { margin-bottom: 0; }
.cms-body .cms-cta { padding: 1.1rem 1.2rem; border: 1px solid rgba(232, 184, 75, .35); border-radius: 16px; background: rgba(232, 184, 75, .07); margin: 0 0 1.1rem; }
.cms-body .cms-cta h3 { margin: 0 0 .45rem; }
.cms-body .cms-cta p:last-child { margin-bottom: 0; }
.cms-body .cms-cta .btn { margin-top: .2rem; }
.cms-link-list { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: center; }
.cms-link-list a { color: var(--muted); font-size: .76rem; }
.cms-link-list a:hover { color: var(--gold); }
.cms-editor { min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.7; direction: ltr; text-align: left; }
.cms-version-list { display: grid; gap: .45rem; max-height: 360px; overflow: auto; }
.cms-version { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; justify-content: space-between; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 10px; font-size: .75rem; }
.cms-preview-bar { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: .6rem .8rem; border: 1px dashed var(--gold); border-radius: 12px; background: rgba(232, 184, 75, .06); font-size: .78rem; }
.cms-message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: .82rem; }
.attempt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.attempt-stat { padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.attempt-stat small { display: block; color: var(--muted); font-size: .66rem; margin-bottom: .2rem; }
.attempt-stat strong { font-size: .86rem; overflow-wrap: anywhere; }
@media (max-width: 900px) { .attempt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Admin role editor, settings registry and inline re-authentication. */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.35rem 0.9rem;
    margin: 0.6rem 0;
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    line-height: 1.5;
}
.check-row code {
    display: block;
    font-size: 0.72rem;
    opacity: 0.7;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem 1.2rem;
}
.settings-field {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.settings-field.is-sensitive {
    border-inline-start: 3px solid rgba(232, 184, 75, 0.55);
}
.settings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    font-size: 0.72rem;
    color: #8c9bb2;
    margin: 0.2rem 0 0;
}
.settings-warning {
    margin: 0.4rem 0 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.8;
}
.settings-warning[hidden] { display: none; }
.inline-password {
    width: 8.5rem;
    min-width: 0;
    padding-block: 0.25rem;
    font-size: 0.8rem;
}
.inline-editor summary {
    cursor: pointer;
    display: inline-block;
}
.inline-editor[open] > summary {
    margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
    .settings-grid,
    .permission-grid {
        grid-template-columns: 1fr;
    }
    .inline-form {
        flex-wrap: wrap;
    }
}

/* -------------------------------------------------------------------------
   API documentation
   ------------------------------------------------------------------------- */
.api-docs-wrap {
    display: grid;
    gap: 1rem;
    min-width: 0;
}
.api-docs-head .eyebrow {
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.api-docs-head p { max-width: 760px; }
.api-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
.api-stat {
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    display: grid;
    gap: .2rem;
}
.api-stat span { color: var(--muted); font-size: .8rem; }
.api-stat strong { font-size: 1.45rem; color: var(--gold-2); }
.api-doc-toc {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(13, 21, 34, .82);
    position: sticky;
    top: .4rem;
    z-index: 5;
    backdrop-filter: blur(12px);
}
.api-doc-toc a {
    font-size: .8rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    color: var(--muted);
}
.api-doc-toc a:hover { background: var(--panel-2); color: var(--text); }
.api-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
.api-info-card {
    border: 1px solid var(--line);
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    padding: .8rem;
    display: grid;
    gap: .3rem;
    min-width: 0;
}
.api-info-card > span { color: var(--muted); font-size: .78rem; }
.api-info-card code { overflow-wrap: anywhere; }
.api-info-card small { color: var(--muted); font-size: .74rem; line-height: 1.6; }
.api-doc-prose { color: var(--text); }
.api-doc-prose p { margin: .3rem 0 .7rem; }
.api-doc-prose ul { margin: .3rem 0 .7rem; padding-inline-start: 1.25rem; }
.api-doc-prose li { margin-bottom: .35rem; }
.api-code-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.api-code-pair h4 { color: var(--muted); font-size: .82rem; }
.api-code {
    margin: .35rem 0 .9rem;
    padding: .85rem 1rem;
    background: #060a11;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-width: 100%;
    font-size: .78rem;
    line-height: 1.65;
    tab-size: 2;
}
.api-code code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; white-space: pre; }
.api-reference { display: grid; gap: .7rem; scroll-margin-top: 4rem; }
.api-reference-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.api-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, .7fr)) auto auto auto;
    gap: .5rem;
    align-items: center;
    padding: .65rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    position: sticky;
    top: 3.4rem;
    z-index: 4;
}
.api-toolbar input,
.api-toolbar select {
    width: 100%;
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    padding: .45rem .6rem;
    font: inherit;
    font-size: .82rem;
}
.api-toolbar input:focus,
.api-toolbar select:focus { outline: 2px solid rgba(232, 184, 75, .35); border-color: var(--gold); }
.api-result-count { white-space: nowrap; }
.api-empty {
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-sm);
}
.api-endpoint {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    scroll-margin-top: 4.5rem;
}
.api-endpoint[open] { border-color: var(--line-2); }
.api-endpoint > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .85rem;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.api-endpoint > summary::-webkit-details-marker { display: none; }
.api-endpoint > summary:hover { background: var(--panel-2); }
.api-path { font-size: .78rem; overflow-wrap: anywhere; color: var(--gold-2); }
.api-endpoint-title { color: var(--text); font-size: .88rem; font-weight: 700; }
.api-chevron { margin-inline-start: auto; color: var(--muted); transition: transform .15s ease; }
.api-endpoint[open] .api-chevron { transform: rotate(180deg); }
.method-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: .1rem .45rem;
    border-radius: 6px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    border: 1px solid currentColor;
}
.method-get { color: #63d6b0; background: rgba(37, 211, 156, .08); }
.method-post { color: #7fb0ff; background: rgba(107, 155, 255, .08); }
.method-patch { color: #f0c66a; background: rgba(232, 184, 75, .08); }
.method-delete { color: #ff8798; background: rgba(241, 91, 112, .08); }
.access-pill {
    font-size: .66rem;
    border-radius: 999px;
    padding: .05rem .45rem;
    border: 1px solid var(--line-2);
    color: var(--muted);
}
.access-public { color: #8fe3c9; border-color: rgba(37, 211, 156, .35); }
.access-user { color: #9cbcff; border-color: rgba(107, 155, 255, .35); }
.access-admin, .access-super { color: #f3d58b; border-color: rgba(232, 184, 75, .35); }
.access-internal { color: #c6a6ff; border-color: rgba(160, 120, 255, .35); }
.api-endpoint-body {
    padding: .25rem .9rem 1rem;
    border-top: 1px solid var(--line);
    min-width: 0;
}
.api-description { color: var(--text); font-size: .88rem; }
.api-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin: .6rem 0 .9rem;
}
.api-meta-grid > div {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .45rem .6rem;
    min-width: 0;
}
.api-meta-grid span { display: block; color: var(--muted); font-size: .7rem; }
.api-meta-grid strong { font-size: .8rem; overflow-wrap: anywhere; }
.api-subhead { margin: .9rem 0 .35rem; color: var(--gold-2); font-size: .85rem; }
.api-sample-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.api-param-table { font-size: .8rem; }
.api-param-table code { overflow-wrap: anywhere; }
.api-notes { color: var(--muted); font-size: .8rem; padding-inline-start: 1.15rem; }
.api-code-tabs { margin-top: .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.api-code-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .4rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.api-code-tabbar button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: 6px;
    padding: .25rem .6rem;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}
.api-code-tabbar button:hover { color: var(--text); background: var(--panel-2); }
.api-code-tabbar button.is-active { color: var(--gold-2); background: var(--panel); border-color: var(--line); }
.api-code-tabbar .api-copy-code { margin-inline-start: auto; color: var(--gold-2); }
.api-code-pane { margin: 0; border: 0; border-radius: 0; }
.api-doc-foot { text-align: center; }

@media (max-width: 1100px) {
    .api-toolbar { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, .7fr)); }
    .api-stat-grid, .api-info-grid, .api-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .api-code-pair { grid-template-columns: 1fr; }
    .api-toolbar {
        grid-template-columns: 1fr;
        position: static;
    }
    .api-doc-toc { position: static; }
    .api-stat-grid, .api-info-grid, .api-meta-grid { grid-template-columns: 1fr; }
    .api-endpoint > summary { align-items: flex-start; }
    .api-endpoint-title { width: 100%; }
    .api-chevron { margin-inline-start: 0; }
}

/* -------------------------------------------------------------------------
   Advanced & emergency configuration guide
   ------------------------------------------------------------------------- */
.config-guide-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.config-guide-toc {
    flex-direction: column;
    align-items: stretch;
    position: sticky;
    top: .5rem;
}
.config-guide-toc a {
    border-radius: var(--radius-sm);
    padding: .4rem .6rem;
    font-size: .8rem;
    overflow-wrap: anywhere;
}
.config-guide-main { display: grid; gap: 1rem; min-width: 0; }
.config-guide-search { display: grid; gap: .4rem; }
.config-guide-search .field { margin: 0; }
.config-guide-section { scroll-margin-top: 4.5rem; min-width: 0; }
.config-guide-section h4 { margin: 1rem 0 .45rem; color: var(--gold-2); font-size: .9rem; }
.config-guide-list { margin: .2rem 0 .8rem; padding-inline-start: 1.2rem; }
.config-guide-list li { margin-bottom: .35rem; line-height: 1.8; }
.config-guide-steps { margin: .2rem 0 .8rem; }
.config-guide-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    padding: .8rem .9rem;
    margin-top: .7rem;
    min-width: 0;
}
.config-guide-item[hidden] { display: none; }
.config-guide-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.config-guide-item-head h4 { margin: 0; }
.config-guide-item > p { color: var(--muted); font-size: .84rem; margin: .35rem 0 .6rem; }
.config-guide-table { font-size: .8rem; }
.config-guide-table th {
    width: 185px;
    color: var(--muted);
    font-weight: 500;
    vertical-align: top;
    white-space: normal;
}
.config-guide-table td { vertical-align: top; }
.config-guide-sample {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    background: var(--panel-2);
    border-radius: 6px;
    padding: .1rem .4rem;
}
.config-guide-code {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .7rem .85rem;
    background: #060a11;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin: .4rem 0 .6rem;
    min-width: 0;
}
.config-guide-code pre {
    margin: 0;
    flex: 1;
    overflow-x: auto;
    font-size: .78rem;
    line-height: 1.7;
}
.config-guide-code pre code { white-space: pre; }
.text-warn { color: #f0b56a; }

@media (max-width: 1000px) {
    .config-guide-layout { grid-template-columns: 1fr; }
    .config-guide-toc { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 720px) {
    .config-guide-table th { width: auto; }
    .config-guide-table th,
    .config-guide-table td { display: block; width: 100%; }
    .config-guide-table tr { display: block; border-bottom: 1px solid var(--line); padding: .3rem 0; }
    .config-guide-table tr:last-child { border-bottom: 0; }
}

/* Personal API tokens: the raw value is long and must stay readable and
   selectable without stretching the panel. */
.token-reveal { border: 1px solid var(--gold, #d4af37); }
.token-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    letter-spacing: .01em;
}
.token-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.token-reveal .api-code { max-width: 100%; overflow-x: auto; }
@media (max-width: 620px) {
    .token-value { font-size: .7rem; }
    .token-actions { flex-direction: column; align-items: flex-start; }
}

/* ---------- Native select popups ----------
   A styled <select> inherits the dark surface for its closed box, but Chromium
   paints the *popup list* with the platform default background. Because the
   text colour was still inherited as the near-white --text, options appeared
   white-on-white and were unreadable. Options and optgroups must therefore set
   an explicit background and colour of their own. */

select {
    color-scheme: dark;
}

select option,
select optgroup {
    background-color: #101a2b;
    color: #e8eef8;
}

select option:checked,
select option:hover,
select option:focus {
    background-color: #22314a;
    color: #ffffff;
}

select option:disabled {
    color: #6d7a90;
}

/* Force the contrast colours where a browser ignores the inherited scheme. */
.field select option,
.filter-form select option,
.select-field select option,
.users-filter select option,
.inline-form select option {
    background-color: #101a2b;
    color: #e8eef8;
}

/* ---------- Captcha ----------
   The artwork sits on its own card so the glyphs are never squeezed by the
   form's column width, and the input keeps the platform's LTR direction for a
   latin answer. */

.captcha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(232, 184, 75, .05), rgba(255, 255, 255, .012));
}

.captcha-art {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #0a111d;
    line-height: 0;
}

.captcha-art svg {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.captcha-fields { display: flex; flex-direction: column; gap: .45rem; }

.captcha-fields .field input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .28em;
    text-align: center;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.captcha-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.captcha-hint { margin: 0; color: var(--muted); font-size: .76rem; }

.captcha-refresh {
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .03);
    color: var(--gold-2);
    border-radius: 999px;
    padding: .3rem .8rem;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.captcha-refresh:hover:not(:disabled) {
    border-color: rgba(232, 184, 75, .6);
    background: rgba(232, 184, 75, .08);
}

.captcha-refresh:disabled { opacity: .6; cursor: progress; }

@media (min-width: 520px) {
    .captcha { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
    .captcha-art svg { max-width: none; }
}

/* ---------- Contact inbox with email reply ---------- */

.message-list { display: grid; gap: .8rem; }

.contact-message {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.contact-message-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}

.contact-message-head h3 { margin: 0 0 .2rem; font-size: .98rem; }
.contact-message-head p { margin: 0; }
.contact-message-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.cms-message-body {
    white-space: pre-wrap;
    color: var(--text);
    font-size: .88rem;
    line-height: 1.85;
    padding: .65rem .8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    border-inline-start: 3px solid var(--line-2);
}

.contact-reply-sent {
    font-size: .84rem;
    line-height: 1.8;
    padding: .6rem .8rem;
    border-radius: 10px;
    border: 1px dashed rgba(37, 211, 156, .35);
    background: rgba(37, 211, 156, .06);
}

.contact-reply summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--gold-2);
    list-style: none;
    padding: .25rem 0;
}

.contact-reply summary::-webkit-details-marker { display: none; }
.contact-reply summary::before { content: '✉ '; }
.contact-reply .form { margin-top: .5rem; }

.contact-reply-preview-wrap { display: grid; gap: .6rem; }

.contact-reply-preview {
    display: grid;
    gap: .5rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.contact-reply-preview[hidden] { display: none; }
.contact-reply-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.contact-reply-preview-head p { margin: 0; }
.contact-reply-preview-subject strong { font-size: .88rem; }

.contact-reply-preview-frame {
    width: 100%;
    height: 460px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: #0d1420;
}

.contact-reply-preview-status { margin: 0; min-height: 1.2em; }
.contact-reply-preview-status.is-error { color: #ff8f8f; }

@media (max-width: 640px) {
    .contact-reply-preview-frame { height: 360px; }
}

/* ---------- Leaderboard and payout transparency ---------- */

.leaderboard-page { display: flex; flex-direction: column; gap: 1rem; }

.leaderboard-filter {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.leaderboard-filter fieldset.field { display: flex; flex-direction: column; gap: .45rem; }

.segmented {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: .22rem;
    gap: .15rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    max-width: 100%;
    overflow-x: auto;
}

.segmented-wrap { flex-wrap: wrap; overflow: visible; }

.segmented-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .42rem .85rem;
    border-radius: 9px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.segmented-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-item:hover { color: var(--text); background: rgba(255, 255, 255, .04); }

.segmented-item:has(input:checked) {
    background: linear-gradient(180deg, rgba(232, 184, 75, .22), rgba(232, 184, 75, .1));
    color: var(--gold-2);
    box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .35);
}

.segmented-item:has(input:focus-visible) {
    outline: 2px solid rgba(232, 184, 75, .6);
    outline-offset: 1px;
}

.leaderboard-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    max-width: 460px;
}

.leaderboard-table { display: flex; flex-direction: column; }

.leaderboard-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 84px minmax(120px, 150px) minmax(120px, 150px);
    align-items: center;
    gap: .6rem;
    padding: .58rem .5rem;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
}

.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row:not(.leaderboard-head):hover { background: rgba(255, 255, 255, .02); }

.leaderboard-head {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .02em;
}

.leaderboard-rank { display: flex; align-items: center; justify-content: center; }
.leaderboard-medal { font-size: 1.15rem; line-height: 1; }
.leaderboard-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    font-size: .74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.leaderboard-user { display: flex; align-items: center; gap: .55rem; min-width: 0; }

.leaderboard-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-2);
}

.leaderboard-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(232, 184, 75, .28), rgba(107, 155, 255, .18));
    color: var(--gold-2);
    font-size: .72rem;
    font-weight: 700;
}

.leaderboard-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.leaderboard-primary {
    font-weight: 700;
    color: var(--gold-2);
    font-variant-numeric: tabular-nums;
}

.leaderboard-row .ltr { font-variant-numeric: tabular-nums; }

/* Home-page leaderboard: the same rows, with linked tabs instead of form
   controls so day/month/quarter/year and the two sort orders are shareable
   URLs that also work without JavaScript. */
.segmented-item.is-active {
    background: linear-gradient(180deg, rgba(232, 184, 75, .22), rgba(232, 184, 75, .1));
    color: var(--gold-2);
    box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .35);
}

.home-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .75rem;
}

.home-board-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    margin-bottom: .85rem;
    color: var(--muted);
    font-size: .8rem;
}

.home-board-meta strong { color: var(--text); }

.home-board-panel { padding: .35rem .7rem; overflow: hidden; }

.home-board-table .leaderboard-row { padding-inline: .25rem; }

.home-board-note { margin-top: .8rem; }

/* The public leaderboard offers the top, loss and breach boards as real tabs;
   each tab is a plain link so the board stays shareable and works without
   JavaScript, and the page shell/filters stay identical between boards. */
.leaderboard-board-tabs { margin: 0; }
.leaderboard-board-tabs .segmented-item { flex: 0 1 auto; }

/* Secondary public boards under the top-users table: biggest realised losses
   and users whose challenge accounts were stopped by a rule breach. */
.leaderboard-extras { display: grid; gap: 2.5rem; margin-top: 2rem; }
.leaderboard-extras .section-head { margin-bottom: 1rem; }
.leaderboard-extras .stat-grid { margin-bottom: 1rem; }
.leaderboard-board > .home-board-panel { padding: .35rem .7rem; }

.leaderboard-loss { color: var(--red); font-weight: 700; }

.leaderboard-row.breach-row {
    grid-template-columns: 52px minmax(0, 1fr) 92px minmax(150px, 1.4fr) 128px;
}

.breach-reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: .8rem;
}

.leaderboard-bar-cell { display: block; }

.leaderboard-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(232, 184, 75, .85) var(--fill, 0%), rgba(255, 255, 255, .06) var(--fill, 0%));
}

.payout-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.payout-feed-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .015);
}

.payout-feed-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.payout-feed-main strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payout-feed-amount { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

/* ---------- Profile ---------- */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    text-align: center;
}

.profile-card h3 { margin: .2rem 0 0; font-size: 1rem; }
.profile-card p { margin: 0; }

.profile-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(232, 184, 75, .25), rgba(107, 155, 255, .16));
    border: 2px solid rgba(232, 184, 75, .35);
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-avatar-fallback {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--gold-2);
    letter-spacing: .04em;
}

.form-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.form-actions .form-hint { margin: 0; }

@media (min-width: 900px) {
    .profile-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .leaderboard-head { display: none; }
    .leaderboard-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        grid-template-areas:
            'rank user primary'
            '.    meta meta';
        row-gap: .2rem;
    }
    .leaderboard-rank { grid-area: rank; }
    .leaderboard-user { grid-area: user; }
    .leaderboard-primary { grid-area: primary; justify-self: end; }
    .leaderboard-row > span:nth-child(3) { grid-area: meta; }
    .leaderboard-row > span:nth-child(5) { display: none; }
    .leaderboard-extras #most-losses .leaderboard-row > span:nth-child(4),
    .leaderboard-page #board-loss .leaderboard-row > span:nth-child(4) {
        grid-area: primary;
        justify-self: end;
    }
    .leaderboard-bar-cell { display: none; }
    .leaderboard-range { grid-template-columns: 1fr; }

    .leaderboard-row.breach-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            'rank user count'
            '.    reason reason'
            '.    date   date';
        row-gap: .2rem;
    }
    .breach-row > span:nth-child(1) { grid-area: rank; }
    .breach-row > span:nth-child(2) { grid-area: user; }
    .breach-row > span:nth-child(3) { grid-area: count; justify-self: end; }
    .breach-row > span:nth-child(4) {
        grid-area: reason;
        display: block;
        white-space: normal;
    }
    .breach-row > span:nth-child(5) { grid-area: date; display: block; }
}

/* ---------- Terminal symbol search ----------
   A TradingView-style combobox: typing filters the catalog, arrow keys move the
   highlight and Enter (or a click) switches the chart and the order ticket.
   The tab strip below stays as the no-JavaScript fallback. */

.symbol-picker { position: relative; margin-bottom: .55rem; }

.symbol-picker-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.symbol-picker-field:focus-within {
    border-color: rgba(232, 184, 75, .55);
    box-shadow: 0 0 0 3px rgba(232, 184, 75, .12);
}

.symbol-picker-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    outline: none;
    padding: .1rem 0;
}

.symbol-picker-field input::placeholder { color: var(--muted); }

.symbol-picker-clear {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .15rem;
}

.symbol-picker-clear:hover { color: var(--text); }

.symbol-options {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    top: calc(100% + .3rem);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: .3rem;
    list-style: none;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #0d1626;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.symbol-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .55rem;
    border-radius: 9px;
    cursor: pointer;
}

.symbol-option.is-highlighted,
.symbol-option:hover {
    background: rgba(232, 184, 75, .12);
}

.symbol-option-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.symbol-option-main strong { font-size: .84rem; }
.symbol-option-main small {
    font-size: .68rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-option-price { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.symbol-option-empty { justify-content: center; color: var(--muted); font-size: .78rem; cursor: default; }
.symbol-option-empty:hover { background: transparent; }

.symbol-commission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    border: 1px dashed rgba(232, 184, 75, .32);
    border-radius: 10px;
    background: rgba(232, 184, 75, .05);
    font-size: .78rem;
}

.symbol-commission div { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.symbol-commission span { color: var(--muted); }
.symbol-commission strong { color: var(--gold-2); font-size: .8rem; }
.symbol-commission small { color: var(--muted); font-size: .7rem; }
.symbol-commission .commission-total strong {
    color: var(--gold-2);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}
.symbol-commission .spread-cost-estimate {
    flex: 1 1 100%;
    justify-content: space-between;
    padding-top: .38rem;
    border-top: 1px dashed rgba(232, 184, 75, .18);
}
.symbol-commission .spread-cost-estimate strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.symbol-commission .spread-cost-note {
    flex: 1 1 100%;
    margin-top: -.2rem;
    color: var(--muted);
    font-size: .68rem;
}

/* ---------- First-run installer ---------- */

.setup-page { max-width: 880px; }

.setup-form { display: flex; flex-direction: column; gap: 1rem; }

.setup-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

.setup-mode-card {
    position: relative;
    display: flex;
    gap: .6rem;
    padding: .8rem .85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.setup-mode-card:hover { border-color: var(--line-2); }

.setup-mode-card input {
    margin-top: .2rem;
    accent-color: #e8b84b;
}

/* The selected data-mode card takes its border and wash from the palette
   accent. --gold is the accent slot every theme remaps (dark gold keeps
    #e8b84b, light and graphite blue make it blue), so color-mix replaces the
   literal gold tint that ignored the blue palettes. */
.setup-mode-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--gold) 50%, transparent);
    background: color-mix(in srgb, var(--gold) 6%, transparent);
}

.setup-mode-body { display: flex; flex-direction: column; gap: .2rem; }
.setup-mode-body strong { font-size: .88rem; }
.setup-mode-body small { color: var(--muted); font-size: .76rem; line-height: 1.7; }

@media (min-width: 760px) {
    .setup-mode { grid-template-columns: 1fr 1fr; }
}

/* Service details: copy command / log path next to their values. */
.copy-row { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.copy-row .system-command { flex: 1 1 320px; margin: 0; }
.copy-inline { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.copy-inline strong { margin: 0; }

/* Service details: systemd unit sample blocks. */
.unit-block { margin-top: 1rem; }
.unit-block .panel-title { margin-bottom: .4rem; }
.unit-block .panel-title h4 { margin: 0; }

/* Service details: copyable systemd/journalctl snippets. */
.snippet-list { display: grid; gap: .75rem; }
.snippet-row { align-items: center; }
.snippet-row > div { flex: 1 1 320px; min-width: 0; }
.snippet-row .system-command { margin: .25rem 0 0; }

/* Admin plans: a compact toolbar that collapses every plan card, plus the
   shared .panel.is-collapsed rules used by each card's own toggle. */
.plan-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .2rem 0 .95rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}
.plan-bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-inline-start: auto;
}
.plan-admin-card.has-collapse > .panel-title { align-items: center; }
.plan-admin-card.is-collapsed > .panel-title { margin-bottom: 0; }
@media (max-width: 620px) {
    .plan-bulk-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-inline-start: 0;
    }
    .plan-bulk-actions .btn { width: 100%; }
}

/* Audit-mode cancellation lists: dated sessions, expandable order rows and
   their event timeline. */
tr[data-audit-order-row] { cursor: pointer; }
tr[data-audit-order-row]:hover { background: rgba(255, 255, 255, .03); }
tr[data-audit-order-row].is-open { background: rgba(232, 184, 75, .07); }
tr[data-audit-order-row]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.audit-session {
    margin-top: .9rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .012);
}
.audit-session-head {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-start;
    justify-content: space-between;
}
.audit-session-head p { margin: .15rem 0 0; }
.audit-session-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}
.audit-session .table-wrap { margin-top: .6rem; }
.audit-details-row td { background: rgba(255, 255, 255, .02); }
.audit-order-details { display: grid; gap: .7rem; }
.audit-order-details .system-list { margin: 0; }
.audit-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
.audit-timeline li {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    font-size: .8rem;
    border-inline-start: 2px solid rgba(232, 184, 75, .35);
    padding-inline-start: .6rem;
}
.audit-timeline-time { color: var(--muted); }
@media (max-width: 620px) {
    .audit-session-head { flex-direction: column; }
    .audit-session-meta { width: 100%; }
    .audit-session-meta .btn { width: 100%; }
}

/* Installments page: clickable payment and loan-request rows with an inline
   details panel. */
tr[data-loan-row] { cursor: pointer; }
tr[data-loan-row]:hover { background: rgba(255, 255, 255, .03); }
tr[data-loan-row].is-open { background: rgba(232, 184, 75, .07); }
tr[data-loan-row]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.loan-details-row td { background: rgba(255, 255, 255, .02); }
.loan-detail-grid { display: grid; gap: .6rem; }
.loan-detail-grid .system-list { margin: 0; }

/* Comprehensive user report: one expandable details row per summary row. */
tr[data-report-row] { cursor: pointer; }
tr[data-report-row]:hover { background: rgba(255, 255, 255, .03); }
tr[data-report-row].is-open { background: rgba(232, 184, 75, .07); }
tr[data-report-row]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.report-details-row td { background: rgba(255, 255, 255, .02); }
.report-detail-grid { display: grid; gap: .6rem; }
.report-detail-grid .system-list { margin: 0; }

/* The account holder's name in the discount report is the control that opens
   that account's inline details, so it must read as text that is clickable. */
.user-detail-toggle {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.user-detail-toggle:hover { color: var(--gold-2); text-decoration: underline; }
.user-detail-toggle:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }
.user-detail-toggle span { display: block; font-weight: 400; }
.user-cell-link { color: inherit; font-weight: 600; text-decoration: none; }
.user-cell-link:hover, .user-cell-link:focus-visible { color: var(--gold-2); text-decoration: underline; }
.user-detail-toggle-compact { display: inline-block; margin-top: 2px; padding: 0; font-size: 12px; font-weight: 400; opacity: .85; }
.user-detail-toggle-compact span { display: inline; }

.discount-user-details td { background: rgba(255, 255, 255, .02); }
.trade-user-details td, .kyc-user-details td { background: rgba(255, 255, 255, .02); }
.report-user-details td { background: rgba(255, 255, 255, .02); }
.report-audit-details {
    display: block;
    max-width: 100%;
    padding: .45rem .55rem;
    background: rgba(0, 0, 0, .18);
    border-radius: 8px;
    color: var(--muted);
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
    direction: ltr;
    text-align: left;
}

/* Administrator transaction ledger: each transaction expands its own details. */
tr[data-transaction-row] { cursor: pointer; }
tr[data-transaction-row]:hover { background: rgba(255, 255, 255, .03); }
tr[data-transaction-row].is-open { background: rgba(232, 184, 75, .07); }
tr[data-transaction-row]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.transaction-details-row td { background: rgba(255, 255, 255, .02); }
.transaction-detail-grid { display: grid; gap: .8rem; }
.transaction-detail-grid .system-list { margin: 0; }
.transaction-events { border-top: 1px solid var(--line); padding-top: .7rem; }
.transaction-events h4 { margin: 0 0 .5rem; font-size: .85rem; }
.transaction-event-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.transaction-event-list li { padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .12); }
.transaction-event-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem; }

/* Administrator payments: each row expands its full record. */
.payment-details-hint { margin: -.4rem 0 .8rem; }
.payment-row { cursor: pointer; }
.payment-row:hover > td { background: rgba(232, 184, 75, .05); }
.payment-row.is-open > td { background: rgba(232, 184, 75, .09); }
.payment-row:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.payment-row-hint { display: block; margin-top: .15rem; color: var(--gold-2); }
.payment-details-row > td { background: rgba(255, 255, 255, .02); }
.payment-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem .9rem; }
.payment-detail-grid > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.payment-detail-grid small { color: var(--muted); font-size: .72rem; }
.payment-detail-grid strong { overflow-wrap: anywhere; }

/* Platform accounting: the whole user row opens the user statement. */
.accounting-user-hint { margin: -.4rem 0 .8rem; }
.accounting-user-row { cursor: pointer; }
.accounting-user-row:hover > td { background: rgba(232, 184, 75, .05); }
.accounting-user-row:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.accounting-user-link { color: inherit; text-decoration: none; }
.accounting-user-row:hover .accounting-user-link,
.accounting-user-link:focus-visible { color: var(--gold-2); text-decoration: underline; }

/* Public-display switches in admin settings. */
.settings-toggle { align-items: flex-start; gap: .55rem; padding: .2rem 0; }
.settings-toggle input[type="checkbox"] { margin-top: .2rem; }


/* Rows that open a detail page: wallet transactions and conditional orders. */
.table tbody tr[data-row-url] {
    cursor: pointer;
}


/* Settings save bar: the page is long enough that scrolling to the submit
   button was the main reason a change stayed unsaved. The bar sticks under the
   admin topbar (z-index 30) without covering it. */
.settings-savebar {
    position: sticky;
    top: 74px;
    z-index: 20;
    border-color: rgba(56, 189, 248, .35);
    box-shadow: 0 18px 30px -28px rgba(0, 0, 0, .9);
}
.settings-savebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.settings-savebar-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.settings-savebar-badges [data-settings-dirty] {
    border: 1px solid rgba(251, 191, 36, .55);
}
.settings-savebar-head h3 { margin: 0; }
.settings-savebar-head .form-hint { margin: .2rem 0 .8rem; }
.settings-savebar-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .8rem;
}
.settings-savebar-fields .field { flex: 1 1 16rem; margin: 0; }
.settings-savebar-fields .btn { flex: 0 0 auto; }
.settings-savebar-error { margin: .6rem 0 0; }
@media (max-width: 860px) {
    .settings-savebar { top: 62px; }
    .settings-savebar-head { flex-direction: column; }
    .settings-savebar-fields .btn { width: 100%; }
}

/* Report Studio — Database Explorer + read-only SQL runner */
.report-studio {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.report-studio .rs-main { display: grid; gap: 1rem; min-width: 0; }
.report-studio .rs-side {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}
.report-studio .rs-table-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 58vh;
    overflow: auto;
    display: grid;
    gap: .15rem;
}
.report-studio .rs-table-list button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .38rem .5rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .84rem;
    text-align: start;
    cursor: pointer;
}
.report-studio .rs-table-list button:hover,
.report-studio .rs-table-list button:focus-visible {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}
.report-studio .rs-table-list button.is-active {
    background: rgba(232, 184, 75, .12);
    border-color: rgba(232, 184, 75, .35);
}
.report-studio .rs-form { display: grid; gap: .6rem; }
.report-studio .rs-sql {
    width: 100%;
    min-height: 9rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .6rem;
    background: rgba(0, 0, 0, .35);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.7;
    resize: vertical;
}
.report-studio .rs-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}
.report-studio .rs-form-row .field { display: grid; gap: .2rem; }
.report-studio .rs-form-row .rs-params { flex: 1 1 220px; min-width: 0; }
.report-studio .rs-error {
    margin: .6rem 0 0;
    padding: .6rem .8rem;
    border: 1px solid rgba(241, 91, 112, .35);
    border-radius: .55rem;
    background: rgba(241, 91, 112, .08);
    color: #ff9aaa;
    font-size: .85rem;
}
.report-studio .rs-result { margin-top: .6rem; min-width: 0; }
.report-studio .rs-table-wrap { max-height: 60vh; overflow: auto; }
.report-studio .rs-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.report-studio .rs-relations ul { margin: .2rem 0 0; padding-inline-start: 1.1rem; }
@media (max-width: 900px) {
    .report-studio { grid-template-columns: minmax(0, 1fr); }
    .report-studio .rs-side { position: static; }
    .report-studio .rs-table-list { max-height: 40vh; }
}

/* Report Studio — page manager and PHP code viewer. */
.rs-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rs-stack { display: grid; gap: 16px; }
.rs-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rs-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rs-error { border-color: #f0b4b4; background: #fff5f5; color: #9b1c1c; }
.rs-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-list th, .rs-list td { padding: 8px 10px; border-bottom: 1px solid var(--border, #e6e9ef); text-align: start; vertical-align: middle; }
.rs-list th { font-weight: 600; color: var(--muted, #6b7280); font-size: 12px; }
.rs-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef1f6; font-size: 11.5px; }
.rs-badge-ok { background: #e7f6ec; color: #17663a; }
.rs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rs-tab { border: 1px solid var(--border, #d8dee9); background: transparent; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.rs-tab.is-active { background: var(--accent-soft, #eef4ff); border-color: var(--accent, #3b6fd4); font-weight: 600; }
.rs-file-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.rs-code { direction: ltr; text-align: left; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px; overflow: auto; max-height: 640px; font-size: 12.5px; line-height: 1.65; }
.rs-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.rs-code .tok-com { color: #7f8ea3; font-style: italic; }
.rs-code .tok-str { color: #9ae6b4; }
.rs-code .tok-kw { color: #8ab4f8; }
.rs-code .tok-var { color: #f6c177; }
.rs-code .tok-num { color: #f28b82; }
.rs-file-panel[hidden] { display: none; }
.rs-deps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rs-json { direction: ltr; text-align: left; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; min-height: 320px; width: 100%; }
.rs-preview { border: 1px dashed var(--border, #d8dee9); border-radius: 10px; padding: 12px; min-height: 120px; max-height: 520px; overflow: auto; }
@media (max-width: 1000px) { .rs-two-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .rs-code { max-height: 420px; font-size: 12px; } }

/* Page Studio designer. */
.ps-studio { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.ps-pane { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.ps-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ps-canvas-wrap { overflow: auto; background: #f8fafc; border: 1px dashed #d8dee9; border-radius: 10px; padding: 10px; }
.ps-canvas { width: 100%; max-width: 100%; transition: width .15s ease; }
.ps-canvas-list { display: grid; gap: 6px; }
.ps-canvas-node { border: 1px solid #e3e8f0; border-radius: 9px; padding: 6px 8px; background: #fff; }
.ps-canvas-node.is-selected { border-color: #3b6fd4; box-shadow: 0 0 0 2px rgba(59,111,212,.15); }
.ps-canvas-node.is-drop { border-color: #0ea5a4; }
.ps-canvas-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 12.5px; }
.ps-canvas-tag { font-family: ui-monospace, Menlo, monospace; background: #eef2f8; border-radius: 6px; padding: 1px 6px; font-size: 11.5px; }
.ps-canvas-actions { display: flex; gap: 4px; }
.ps-canvas-actions .rs-tab { padding: 2px 7px; font-size: 11px; }
.ps-devices { display: flex; gap: 6px; margin-bottom: 10px; }
.ps-preview-panel { margin-top: 12px; }
.ps-preview-frame { border: 1px solid #e3e8f0; border-radius: 10px; padding: 10px; max-height: 640px; overflow: auto; margin: 0 auto; }
.ps-inspector-field { display: grid; gap: 3px; margin-bottom: 8px; font-size: 12px; color: #4b5563; }
.ps-inspector-field input, .ps-inspector-field select { border: 1px solid #d8dee9; border-radius: 7px; padding: 5px 8px; font: inherit; background: #fff; }
.ps-check { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.ps-dataset { border: 1px solid #e3e8f0; border-radius: 9px; padding: 8px; margin-bottom: 8px; background: #fff; }
@media (max-width: 1200px) { .ps-studio { grid-template-columns: minmax(0, 1fr); } .ps-pane { position: static; max-height: none; } }

/* Page Studio — grouped palette */
.ps-palette-groups { display: grid; gap: 6px; margin-bottom: 8px; }
.ps-palette-title { margin: 8px 0 0; font-size: 11.5px; color: #6b7280; font-weight: 600; }

.ps-nav-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.ps-nav-list li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px}

/* In-place result lines for the market bulk actions (no page reload). */
[data-bridge-all-result].is-saved,
[data-market-history-result].is-saved { color: #6fcf97; }
[data-bridge-all-result].is-error,
[data-market-history-result].is-error { color: #ff9b9b; }

/* ---------- Collapsible sidebar (desktop) ---------- */

/* The control ships hidden: app.js reveals it, so a browser without JavaScript
   never shows a button that cannot fold anything. */
.sidebar-collapse-btn {
    display: none;
    position: absolute;
    inset-block-start: .9rem;
    inset-inline-end: .9rem;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
    color: var(--muted);
    cursor: pointer;
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }

@media (min-width: 1025px) {
    body.has-sidebar-collapse .sidebar-collapse-btn { display: inline-flex; }
    body.has-sidebar-collapse .sidebar .brand { padding-inline-end: 2.2rem; }
    .sidebar { transition: transform .22s ease, visibility .22s ease; }

    /* The sidebar sits on the inline start edge; 100% moves it off that edge in
       both directions, the same direction the mobile drawer already uses. */
    body.has-sidebar-collapse.sidebar-collapsed .sidebar {
        transform: translateX(100%);
        visibility: hidden;
    }
    body.has-sidebar-collapse.sidebar-collapsed .main { margin-inline-start: 0; }
    body.has-sidebar-collapse.sidebar-collapsed .icon-btn.menu-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* ---------------------------------------------------------------- Page builder */
.pb-page { position: relative; }
.pb-canvas {
    display: grid;
    grid-template-columns: repeat(var(--pb-cols, 12), minmax(0, 1fr));
    grid-auto-rows: var(--pb-row, 28px);
    gap: var(--pb-gap, 12px);
    min-height: calc(var(--pb-rows, 30) * (var(--pb-row, 28px) + var(--pb-gap, 12px)));
    align-content: start;
}
.pb-comp { position: relative; min-width: 0; }
.pb-design .pb-comp {
    outline: 1px dashed var(--border, #d5d9e2);
    outline-offset: 2px;
    border-radius: 8px;
    padding: 4px;
    cursor: grab;
    user-select: none;
}
.pb-design .pb-comp:hover { outline-color: var(--accent, #5b7cfa); }
.pb-design .pb-comp.pb-selected { outline: 2px solid var(--accent, #5b7cfa); background: rgba(91, 124, 250, .05); }
.pb-comp-tag {
    position: absolute; inset-inline-start: 6px; top: -9px;
    background: var(--panel, #fff); border: 1px solid var(--border, #d5d9e2);
    border-radius: 999px; padding: 0 8px; font-size: 10px; color: var(--muted, #6b7280);
    z-index: 2; line-height: 16px;
}
.pb-resize {
    position: absolute; inset-inline-end: -4px; bottom: -4px; width: 14px; height: 14px;
    background: var(--accent, #5b7cfa); border-radius: 3px; cursor: nwse-resize; z-index: 3;
}
.pb-heading h2 { margin: 0 0 4px; font-size: 1.15rem; }
.pb-heading p, .pb-text, .pb-card p { margin: 0; color: var(--muted, #6b7280); font-size: .85rem; line-height: 1.9; }
.pb-field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; }
.pb-field > span { color: var(--muted, #6b7280); }
.pb-field input, .pb-field select, .pb-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border, #d5d9e2);
    border-radius: 8px; background: var(--panel, #fff); color: inherit; font: inherit;
}
.pb-card { border: 1px solid var(--border, #d5d9e2); border-radius: 12px; padding: 12px; height: 100%; }
.pb-kpi { border: 1px solid var(--border, #d5d9e2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pb-kpi-label { font-size: .78rem; color: var(--muted, #6b7280); }
.pb-kpi-value { font-size: 1.4rem; }
.pb-table { border: 1px solid var(--border, #d5d9e2); border-radius: 12px; overflow: hidden; background: var(--panel, #fff); }
.pb-table-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border, #d5d9e2); }
.pb-count { font-size: .75rem; color: var(--muted, #6b7280); }
.pb-table-scroll { overflow: auto; }
.pb-grid { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pb-grid th, .pb-grid td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--border, #eef0f4); white-space: nowrap; }
.pb-grid th { background: rgba(0,0,0,.02); font-weight: 600; }
.pb-row-clickable { cursor: pointer; }
.pb-row-clickable:hover, .pb-row-clickable:focus-visible { background: rgba(91, 124, 250, .07); outline: none; }
.pb-empty { padding: 14px; text-align: center; color: var(--muted, #6b7280); }
.pb-error { color: #b42318; }
.pb-skeleton td { color: var(--muted, #6b7280); text-align: center; }
/* Canvas headers are the drag handle for column order; published pages do not
   carry the draggable attribute, so a live table never becomes draggable. */
.pb-canvas .pb-grid thead th[draggable="true"] { cursor: grab; user-select: none; }
.pb-canvas .pb-grid thead th[draggable="true"]:active { cursor: grabbing; }
.pb-col-dragging { opacity: .45; }
.pb-col-over { box-shadow: inset 3px 0 0 var(--accent, #5b7cfa); }
.pb-col-over-after { box-shadow: inset -3px 0 0 var(--accent, #5b7cfa); }
/* A wide table is dragged horizontally; the mode is stored per table. */
.pb-table[data-builder-drag-scroll] .pb-table-scroll { cursor: grab; }
.pb-table[data-builder-drag-scroll] .pb-table-scroll:active { cursor: grabbing; }
.pb-modal-item { display: grid; gap: 2px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border, #eef0f4); }
.pb-modal-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pb-modal-triggers { font-size: .72rem; color: var(--muted, #6b7280); line-height: 1.8; }
.pb-modal-source-item { color: inherit; }
.pb-modal-source-none { color: var(--muted, #6b7280); }
/* The canvas modal marker is a control, not just a caption. */
.pb-design-link-action { cursor: pointer; }
.pb-design-link-action:hover, .pb-design-link-action:focus-visible {
    border-color: var(--accent, #5b7cfa);
    outline: 2px solid rgba(91, 124, 250, .35);
    outline-offset: 2px;
}
.pb-pager { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px; border-top: 1px solid var(--border, #d5d9e2); }
.pb-modal-stack { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.pb-modal-stack[hidden] { display: none; }
.pb-modal-layer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pb-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 16, 28, .55); }
.pb-modal-dialog {
    position: relative; z-index: 1; background: var(--panel, #fff); border-radius: 16px;
    width: min(100%, 720px); max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); outline: none;
}
.pb-modal-sm { width: min(100%, 480px); }
.pb-modal-lg { width: min(100%, 1040px); }
.pb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border, #d5d9e2); }
.pb-modal-head h3 { margin: 0; font-size: 1rem; }
.pb-modal-close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; }
.pb-modal-body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.pb-modal-item { min-width: 0; }
html.pb-modal-open, html.pb-modal-open body { overflow: hidden; }

/* designer */
.pb-designer-head p { max-width: 70ch; }
.pb-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border, #d5d9e2); border-radius: 12px; background: var(--panel, #fff); }
.pb-name-field { flex: 1 1 240px; }
.pb-save-status { font-size: .78rem; color: var(--muted, #6b7280); }
.pb-design-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 14px; margin-top: 14px; align-items: start; }
.pb-panel { border: 1px solid var(--border, #d5d9e2); border-radius: 12px; background: var(--panel, #fff); padding: 12px; max-height: 78vh; overflow: auto; }
.pb-panel h3 { margin: 4px 0 10px; font-size: .9rem; }
.pb-palette-list { display: grid; gap: 6px; margin-bottom: 16px; }
.pb-palette-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border, #d5d9e2); border-radius: 8px; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: start; }
.pb-palette-item:hover { border-color: var(--accent, #5b7cfa); }
.pb-palette-icon { color: var(--accent, #5b7cfa); }
.pb-wide { width: 100%; }
.pb-modal-list { display: grid; gap: 6px; margin-top: 8px; }
.pb-modal-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pb-modal-row button { border: 0; background: transparent; padding: 4px 0; cursor: pointer; color: inherit; font: inherit; text-align: start; }
.pb-modal-row button.pb-selected { color: var(--accent, #5b7cfa); font-weight: 600; }
.pb-hint { margin-top: 12px; line-height: 1.9; }
.pb-canvas-host { border: 1px solid var(--border, #d5d9e2); border-radius: 12px; background: var(--panel, #fff); padding: 14px; overflow: auto; min-height: 320px; }
.pb-inspector-section { border-bottom: 1px solid var(--border, #eef0f4); padding-bottom: 10px; margin-bottom: 10px; display: grid; gap: 8px; }
.pb-inspector-section h4 { margin: 0; font-size: .82rem; }
.pb-auto-relation { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border, #eef0f4); border-radius: 8px; }
.pb-auto-relation .badge { justify-self: start; }
.pb-auto-relation p { margin: 0; }
.pb-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 160px; overflow: auto; }
.pb-check { display: flex; align-items: center; gap: 6px; font-size: .76rem; }
.pb-condition { display: grid; grid-template-columns: 1fr 70px 1fr 28px; gap: 4px; align-items: center; }
.pb-condition select, .pb-condition input { min-width: 0; padding: 5px 6px; border: 1px solid var(--border, #d5d9e2); border-radius: 6px; background: var(--panel, #fff); color: inherit; font-size: .75rem; }
.pb-condition button { padding: 2px 6px; }
.pb-child-row { display: block; width: 100%; text-align: start; border: 1px solid var(--border, #d5d9e2); border-radius: 8px; background: transparent; padding: 6px 8px; margin-bottom: 4px; cursor: pointer; color: inherit; font: inherit; font-size: .78rem; }
.pb-child-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pb-danger { color: #b42318; }
.pb-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pb-create-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.pb-create-form .pb-field { flex: 1 1 220px; }
@media (max-width: 1100px) {
    .pb-design-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .pb-inspector { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 760px) {
    .pb-design-layout { grid-template-columns: 1fr; }
    .pb-panel { max-height: none; }
}

/* Expanded P&L decomposition under one trade row */
.pnl-cell { display: inline-flex; align-items: center; gap: .3rem; }
.pnl-breakdown-toggle { padding: 0 .35rem; line-height: 1; }
.pnl-breakdown-toggle.is-open { transform: rotate(180deg); }
.pnl-breakdown { display: grid; gap: .35rem; padding: .6rem .75rem; border: 1px solid var(--border, #eef0f4); border-radius: 8px; background: rgba(0, 0, 0, .02); }
.pnl-breakdown-head { font-weight: 700; font-size: .8rem; }
.pnl-breakdown-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .78rem; }
.pnl-breakdown-row span small { display: block; }
.pnl-breakdown-row strong { white-space: nowrap; }

/* Designer: per-table tools and table details */
.pb-comp-tools {
    position: absolute; inset-inline-end: 6px; top: -12px; display: flex; gap: 4px; z-index: 4;
    opacity: 0; transition: opacity .15s;
}
.pb-design .pb-comp:hover .pb-comp-tools,
.pb-design .pb-comp.pb-selected .pb-comp-tools,
.pb-comp-tools:focus-within { opacity: 1; }
.pb-comp-tool {
    width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--border, #d5d9e2); border-radius: 6px;
    background: var(--panel, #fff); color: inherit; font-size: 12px; line-height: 1;
    cursor: pointer;
}
.pb-comp-tool:hover { border-color: var(--accent, #5b7cfa); color: var(--accent, #5b7cfa); }
.pb-comp-tool-danger:hover { border-color: #b42318; color: #b42318; }
.pb-design-meta {
    display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; margin-bottom: 6px;
    border: 1px dashed var(--border, #d5d9e2); border-radius: 8px;
    font-size: .72rem; color: var(--muted, #6b7280);
}
/* Canvas marker for a table that opens a modal: which modal it opens and the
 * column pair (child.column ← parent.id) the modal is filtered by. */
.pb-design-link {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 6px 8px; margin-bottom: 6px;
    border: 1px dashed rgba(212, 160, 23, .65);
    border-inline-start: 3px solid #d4a017;
    border-radius: 8px; background: rgba(212, 160, 23, .10);
    font-size: .72rem; color: #4b5563;
}
.pb-design-link-icon { color: #b8860b; font-size: .9rem; line-height: 1; }
.pb-design-link-title { color: #1f2937; }
.pb-design-link-rel {
    padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(212, 160, 23, .45); font-size: .7rem;
}
.pb-design-link-norel { border-style: dashed; color: #9a3412; }
.pb-design-link-missing { border-color: #dc2626; color: #b91c1c; border-inline-start-color: #dc2626; background: rgba(220, 38, 38, .08); }

.pb-source-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
    border: 1px solid var(--border, #eef0f4); border-radius: 8px; background: rgba(0, 0, 0, .02);
}
.pb-check-grid-tall { max-height: 280px; }
/* Column order in the table inspector: the list is the real order of the
 * table's columns. Rows are draggable and the arrows repeat the same move with
 * a click, so the order is also reachable without a drag (touch/keyboard). */
.pb-sort-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-sort-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 26px 26px; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border, #eef0f4); border-radius: 8px; background: var(--panel, #fff); cursor: grab; }
.pb-sort-row.pb-sort-dragging { opacity: .45; }
.pb-sort-row.pb-sort-over { border-color: #d4a017; }
.pb-sort-row.pb-sort-over-bottom { box-shadow: 0 2px 0 #d4a017; }
.pb-sort-handle { color: #9aa4b2; letter-spacing: -2px; cursor: grab; text-align: center; }
.pb-sort-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.pb-sort-label { font-size: .72rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-sort-btn { border: 1px solid var(--border, #eef0f4); background: transparent; border-radius: 6px; cursor: pointer; line-height: 1; padding: 3px 0; }
.pb-sort-btn:disabled { opacity: .35; cursor: default; }
.pb-sort-empty { padding: 4px 2px; }
@media (max-width: 640px) { .pb-sort-label { display: none; } }

.pb-canvas-hint { margin: 0 0 10px; }

/* Email template list: rendered subject next to its event */
.email-subject-preview { font-weight: 600; line-height: 1.8; min-width: 180px; }

/* Page builder: custom column labels and readable foreign-key values. */
.pb-label-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; }
.pb-label-field { min-width: 0; }
.pb-label-field > span { font-size: .68rem; }
.pb-label-grid-all { max-height: 280px; overflow-y: auto; padding-inline-end: .25rem; }
.pb-label-field-off > span { color: var(--muted, #6b7280); }
.pb-label-off { font-size: .6rem; border: 1px solid var(--line-2, #e5e7eb); border-radius: 999px; padding: 0 .3rem; white-space: nowrap; }
.pb-related { border-bottom: 1px dotted var(--line-2); cursor: help; }
@media (max-width: 760px) {
    .pb-label-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Page builder: choose which cell opens the modal. */
.pb-cell-clickable { cursor: pointer; }
.pb-cell-clickable:hover, .pb-cell-clickable:focus-visible {
    background: rgba(91, 124, 250, .07);
    outline: none;
}

/* Page Studio inspector: KPI conditions and the live number preview */
.ps-condition-row{display:flex;gap:6px;align-items:center;margin:4px 0}
.ps-condition-row select,.ps-condition-row input{flex:1 1 auto;min-width:0}
.ps-kpi-preview{background:rgba(232,184,75,.12);border-radius:8px;padding:8px}
.ps-kpi-preview strong{display:block;font-size:20px;margin:2px 0}

/* Builder: a modal KPI with no relation to the clicked row */
.pb-kpi-unrelated{border-style:dashed}
.pb-kpi-state{font-size:1rem;color:var(--muted,#6b7280)}
.pb-kpi-note{font-size:.75rem;color:var(--muted,#6b7280);line-height:1.5}

/* Builder inspector: a modal table's domain is locked to the clicked row */
.pb-locked-scope{border-style:dashed;background:#fafbfd}

/* Builder: identity strip at the top of a modal */
.pb-modal-summary{display:grid;gap:6px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--border,#eef0f4);border-radius:10px;background:#f8fafc}
.pb-modal-summary-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-modal-summary-source{font-weight:600;font-size:.82rem}
.pb-modal-summary-id{font-size:.78rem;color:var(--muted,#6b7280)}
.pb-modal-summary-fields{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.pb-modal-summary-fields div{display:flex;align-items:baseline;gap:6px;margin:0}
.pb-modal-summary-fields dt{font-size:.72rem;color:var(--muted,#6b7280)}
.pb-modal-summary-fields dd{margin:0;font-size:.82rem}
.pb-modal-summary-note{margin:0;font-size:.76rem;color:var(--muted,#6b7280)}

/* Builder: a record's details as label/value cards instead of a grid */
.pb-details{display:grid;gap:10px}
.pb-detail-card{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--border,#eef0f4);border-radius:10px;background:#fff}
.pb-detail-row{display:grid;grid-template-columns:minmax(90px,34%) 1fr;gap:8px;align-items:baseline;margin:0}
.pb-detail-row dt{font-size:.76rem;color:var(--muted,#6b7280);overflow-wrap:anywhere}
.pb-detail-row dd{margin:0;font-size:.85rem;overflow-wrap:anywhere}
@media (max-width:520px){.pb-detail-row{grid-template-columns:1fr;gap:2px}}

/* Admin bulk close: the reason/note fields sit in the panel title, so they
   wrap under the heading on narrower screens instead of squeezing the button. */
.close-all-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
}
.close-all-bulk .field {
    margin: 0;
    min-width: 10rem;
}

/* Paused bridge: the reason and reopen instant stay readable under the badge. */
.service-gate-note {
    margin-top: 0.35rem;
    display: grid;
    gap: 0.15rem;
}


/* ---------- Server clock drift (admin settings) ---------- */

.clock-drift {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
}

.clock-drift-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.clock-drift-head h4 { margin: 0 0 .3rem; font-size: .95rem; }
.clock-drift-head p { margin: 0; max-width: 720px; }
.clock-drift .notice { margin-top: .75rem; }
.clock-drift .notice p { margin: .35rem 0 0; }


/* ---------- Positions panel: full batch and minimum-hold batch ---------- */

.positions-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
}

.positions-actions form { margin: 0; }
.positions-actions .badge { font-size: .68rem; padding: .05rem .4rem; }

/* ---------- Display themes ----------
   Dark gold is the historical palette defined in :root. The other two themes
   override the same variables plus the few surfaces that still use literal
   colours, so every page follows the user's choice without a second sheet. */
[data-theme="dark-gold"] { color-scheme: dark; }

[data-theme="light-blue"] {
    color-scheme: light;
    --bg: #e7ecf2;
    --bg-2: #dde5ee;
    --panel: #f4f6fa;
    --panel-2: #e9eef5;
    --line: #cfd9e5;
    --line-2: #b4c2d3;
    --text: #16283c;
    --muted: #556a80;
    --gold: #3569b5;
    --gold-2: #25528f;
    --green: #12815a;
    --red: #c43b4d;
    --blue: #3569b5;
    --shadow: 0 14px 30px rgba(23, 52, 84, .10);
}

[data-theme="graphite-blue"] {
    color-scheme: dark;
    --bg: #0f1316;
    --bg-2: #141a21;
    --panel: #171d25;
    --panel-2: #1d252f;
    --line: #27313d;
    --line-2: #3a4757;
    --text: #e6edf5;
    --muted: #93a4b7;
    --gold: #7fa9d9;
    --gold-2: #b7d0ee;
    --green: #35c79a;
    --red: #ef6b7c;
    --blue: #7fa9d9;
    --shadow: 0 18px 40px rgba(0, 0, 0, .4);
}

[data-theme="light-blue"] body.app-body,
[data-theme="light-blue"] body.guest-body {
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(47, 111, 208, .07), transparent 60%),
        radial-gradient(700px 500px at 0% 0%, rgba(47, 111, 208, .045), transparent 55%),
        var(--bg);
}
[data-theme="graphite-blue"] body.app-body,
[data-theme="graphite-blue"] body.guest-body {
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(127, 169, 217, .10), transparent 60%),
        radial-gradient(700px 500px at 0% 0%, rgba(127, 169, 217, .05), transparent 55%),
        var(--bg);
}

[data-theme="light-blue"] .sidebar { background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
[data-theme="graphite-blue"] .sidebar { background: linear-gradient(180deg, #171d25, #10151b); }
/* Guest and auth pages carry their own dark surfaces; give the two blue
   palettes matching versions instead of leaving a dark card on a light page. */
[data-theme="light-blue"] .site-header { border-bottom-color: rgba(16, 38, 61, .08); }
[data-theme="light-blue"] .site-footer { background: #f4f6fa; }
[data-theme="graphite-blue"] .site-footer { background: #0f1316; }
[data-theme="light-blue"] .page-hero { background: radial-gradient(600px 300px at 85% 0%, rgba(47, 111, 208, .08), transparent 70%); }
[data-theme="graphite-blue"] .page-hero { background: radial-gradient(600px 300px at 85% 0%, rgba(127, 169, 217, .10), transparent 70%); }
[data-theme="light-blue"] .auth-aside {
    border-color: rgba(47, 111, 208, .18);
    background:
        radial-gradient(420px 240px at 90% 0%, rgba(47, 111, 208, .10), transparent 65%),
        linear-gradient(165deg, var(--panel), var(--bg-2));
}
[data-theme="graphite-blue"] .auth-aside {
    border-color: rgba(127, 169, 217, .22);
    background:
        radial-gradient(420px 240px at 90% 0%, rgba(127, 169, 217, .14), transparent 65%),
        linear-gradient(165deg, #1d252f, #121820);
}
[data-theme="light-blue"] .check-list li,
[data-theme="light-blue"] .step-list li { color: #35516f; }
[data-theme="graphite-blue"] .check-list li,
[data-theme="graphite-blue"] .step-list li { color: #c4d2e1; }

/* Pricing cards and the closing call-to-action used translucent white or a
   fixed dark gradient; on the light palette they either vanished into the page
   or stayed dark. Give both blue palettes explicit surfaces and ribbon text. */
[data-theme="light-blue"] .brand-mark { color: #fff; }
/* The live market card sits on the hero and used a fixed dark surface, which
   read as a hole in the light palette. Each palette now gets its own surface,
   glow and candle tint so the market stays readable on every background. */
[data-theme="light-blue"] .hero-panel {
    background: linear-gradient(165deg, var(--panel), var(--panel-2));
    border-color: var(--line);
}

[data-theme="light-blue"] .hero-panel::before {
    background: radial-gradient(420px 200px at 85% 0%, rgba(47, 111, 208, .10), transparent 70%);
}

[data-theme="light-blue"] .market-row { background: rgba(16, 38, 61, .025); }
[data-theme="light-blue"] .market-icon.market-crypto {
    background: rgba(47, 111, 208, .10);
    border-color: rgba(47, 111, 208, .28);
    color: #2b5ea8;
}
[data-theme="light-blue"] .hero-glow { background: radial-gradient(circle, rgba(47, 111, 208, .10), transparent 62%); }
[data-theme="light-blue"] .hero-candle.is-up rect { fill: rgba(15, 157, 107, .30); }
[data-theme="light-blue"] .hero-candle.is-up line { stroke: rgba(15, 157, 107, .38); }
[data-theme="light-blue"] .hero-candle.is-down rect { fill: rgba(210, 58, 80, .24); }
[data-theme="light-blue"] .hero-candle.is-down line { stroke: rgba(210, 58, 80, .32); }
[data-theme="light-blue"] .hero-symbols { color: rgba(31, 90, 180, .08); }

[data-theme="graphite-blue"] .hero-panel {
    background: linear-gradient(165deg, #1b222b, #121820);
    border-color: var(--line);
}

[data-theme="graphite-blue"] .hero-panel::before {
    background: radial-gradient(420px 200px at 85% 0%, rgba(127, 169, 217, .12), transparent 70%);
}

[data-theme="graphite-blue"] .market-row { background: rgba(255, 255, 255, .03); }
[data-theme="graphite-blue"] .hero-glow { background: radial-gradient(circle, rgba(127, 169, 217, .12), transparent 62%); }
[data-theme="graphite-blue"] .hero-candle.is-up rect { fill: rgba(53, 199, 154, .34); }
[data-theme="graphite-blue"] .hero-candle.is-up line { stroke: rgba(53, 199, 154, .42); }
[data-theme="graphite-blue"] .hero-candle.is-down rect { fill: rgba(239, 107, 124, .28); }
[data-theme="graphite-blue"] .hero-candle.is-down line { stroke: rgba(239, 107, 124, .36); }
[data-theme="graphite-blue"] .hero-symbols { color: rgba(183, 208, 238, .07); }

[data-theme="light-blue"] .plan-card {
    background: linear-gradient(175deg, var(--panel), var(--bg-2));
    box-shadow: 0 10px 26px rgba(23, 60, 110, .06);
}
[data-theme="light-blue"] .plan-featured {
    border-color: rgba(47, 111, 208, .45);
    box-shadow: 0 20px 45px rgba(47, 111, 208, .12);
    background: linear-gradient(175deg, var(--panel-2), var(--panel));
}
[data-theme="light-blue"] .plan-ribbon { color: #fff; }
[data-theme="light-blue"] .feature-card { background: linear-gradient(170deg, var(--panel), var(--bg-2)); }
[data-theme="light-blue"] .stats-strip { background: linear-gradient(180deg, rgba(23, 60, 110, .035), transparent); }
[data-theme="light-blue"] .cta-band {
    border-color: rgba(47, 111, 208, .25);
    background:
        radial-gradient(500px 200px at 85% 0%, rgba(47, 111, 208, .10), transparent 70%),
        linear-gradient(160deg, var(--panel), var(--bg-2));
}
[data-theme="graphite-blue"] .plan-card { background: linear-gradient(175deg, #1b222b, #161c24); }
[data-theme="graphite-blue"] .plan-featured {
    border-color: rgba(127, 169, 217, .45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
    background: linear-gradient(175deg, rgba(127, 169, 217, .12), #171d25);
}
[data-theme="graphite-blue"] .plan-ribbon { color: #0d1420; }
[data-theme="light-blue"] .plan-category-tab:hover { border-color: rgba(47, 111, 208, .45); }
[data-theme="light-blue"] .plan-category-tab.is-active {
    border-color: rgba(47, 111, 208, .55);
    background: rgba(47, 111, 208, .12);
}
[data-theme="light-blue"] .plan-category-tab span { background: rgba(16, 38, 61, .06); }
[data-theme="light-blue"] .plan-category-badge {
    border-color: rgba(47, 111, 208, .28);
    background: rgba(47, 111, 208, .08);
}
[data-theme="graphite-blue"] .plan-category-tab:hover { border-color: rgba(127, 169, 217, .45); }
[data-theme="graphite-blue"] .plan-category-tab.is-active {
    border-color: rgba(127, 169, 217, .55);
    background: rgba(127, 169, 217, .14);
}
[data-theme="graphite-blue"] .plan-category-tab span { background: rgba(255, 255, 255, .08); }
[data-theme="graphite-blue"] .plan-category-badge {
    border-color: rgba(127, 169, 217, .28);
    background: rgba(127, 169, 217, .1);
}
[data-theme="graphite-blue"] .feature-card { background: linear-gradient(170deg, #1b222b, #151b23); }
[data-theme="graphite-blue"] .cta-band {
    border-color: rgba(127, 169, 217, .28);
    background:
        radial-gradient(500px 200px at 85% 0%, rgba(127, 169, 217, .12), transparent 70%),
        linear-gradient(160deg, #1d252f, #121820);
}
[data-theme="light-blue"] .topbar { background: #f4f6fa; }
[data-theme="graphite-blue"] .topbar { background: #0f1316; }
[data-theme="light-blue"] .panel { background: var(--panel); }
[data-theme="graphite-blue"] .panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .005)), var(--panel);
}

[data-theme="light-blue"] .brand-mark {
    background: linear-gradient(145deg, #5a95e8, #1f5ab4);
    color: #fff;
    box-shadow: 0 8px 20px rgba(47, 111, 208, .25);
}
[data-theme="graphite-blue"] .brand-mark {
    background: linear-gradient(145deg, #b7d0ee, #4f7fae);
    color: #0b1117;
    box-shadow: 0 8px 20px rgba(127, 169, 217, .22);
}

[data-theme="light-blue"] .side-label { color: #6b7f96; }
[data-theme="graphite-blue"] .side-label { color: #8fa1b5; }
[data-theme="light-blue"] .side-group-head { color: #4c6480; }
[data-theme="graphite-blue"] .side-group-head { color: #9db0c4; }
[data-theme="light-blue"] .side-link { color: #39536f; }
[data-theme="graphite-blue"] .side-link { color: #b7c6d6; }
[data-theme="light-blue"] .side-link:hover,
[data-theme="light-blue"] .side-group-head:hover {
    background: rgba(15, 42, 74, .06);
    color: var(--text);
}
[data-theme="graphite-blue"] .side-link:hover,
[data-theme="graphite-blue"] .side-group-head:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}
[data-theme="light-blue"] .side-link.is-active {
    background: linear-gradient(135deg, rgba(47, 111, 208, .16), rgba(47, 111, 208, .05));
    border-color: rgba(47, 111, 208, .28);
    color: #17467f;
}
[data-theme="graphite-blue"] .side-link.is-active {
    background: linear-gradient(135deg, rgba(127, 169, 217, .18), rgba(127, 169, 217, .06));
    border-color: rgba(127, 169, 217, .3);
    color: #dce9f8;
}

[data-theme="light-blue"] .floating-tooltip {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 16px 34px rgba(23, 60, 110, .18);
}
[data-theme="graphite-blue"] .floating-tooltip { background: #1b222b; color: var(--text); }

[data-theme="light-blue"] .field input,
[data-theme="light-blue"] .field select,
[data-theme="light-blue"] .filter-form select,
[data-theme="light-blue"] .select-field select { background: #f7f9fc; }
[data-theme="graphite-blue"] .field input,
[data-theme="graphite-blue"] .field select,
[data-theme="graphite-blue"] .filter-form select,
[data-theme="graphite-blue"] .select-field select { background: rgba(255, 255, 255, .03); }
[data-theme="light-blue"] .field input:focus,
[data-theme="light-blue"] .field select:focus,
[data-theme="light-blue"] .filter-form select:focus,
[data-theme="light-blue"] .select-field select:focus {
    border-color: rgba(47, 111, 208, .55);
    box-shadow: 0 0 0 3px rgba(47, 111, 208, .12);
}
[data-theme="graphite-blue"] .field input:focus,
[data-theme="graphite-blue"] .field select:focus,
[data-theme="graphite-blue"] .filter-form select:focus,
[data-theme="graphite-blue"] .select-field select:focus {
    border-color: rgba(127, 169, 217, .55);
    box-shadow: 0 0 0 3px rgba(127, 169, 217, .12);
}
[data-theme="light-blue"] .field input::placeholder { color: #7c90a8; }

[data-theme="light-blue"] .btn-primary { color: #fff; box-shadow: 0 10px 26px rgba(47, 111, 208, .28); }
[data-theme="light-blue"] .btn-primary:hover { color: #fff; box-shadow: 0 10px 28px rgba(47, 111, 208, .32); }
[data-theme="graphite-blue"] .btn-primary { color: #08111a; }
[data-theme="graphite-blue"] .btn-primary:hover { color: #08111a; box-shadow: 0 10px 28px rgba(127, 169, 217, .28); }
[data-theme="light-blue"] .btn-ghost:hover { background: rgba(15, 42, 74, .06); }
[data-theme="light-blue"] .table tbody tr:hover { background: rgba(15, 42, 74, .035); }

[data-theme="light-blue"] .chip-gold,
[data-theme="light-blue"] .badge-gold {
    background: rgba(47, 111, 208, .12);
    border-color: rgba(47, 111, 208, .28);
    color: #1f5ab4;
}
[data-theme="graphite-blue"] .chip-gold,
[data-theme="graphite-blue"] .badge-gold {
    background: rgba(127, 169, 217, .14);
    border-color: rgba(127, 169, 217, .3);
    color: #cfe0f4;
}

/* One-button palette menu. The trigger is a disclosure summary, so it opens
   without JavaScript; choosing a palette stays a normal CSRF-protected POST
   and app.js upgrades it to JSON so the page does not reload. */
.theme-picker { position: relative; margin: 0; min-width: 0; }
.theme-picker-details { position: relative; }
.theme-picker-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-width: 0;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    font: inherit;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
    list-style: none;
}
.theme-picker-trigger::-webkit-details-marker { display: none; }
.theme-picker-trigger:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .055); }
.theme-picker-trigger:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.theme-picker-details[open] .theme-picker-trigger { border-color: var(--gold); }
.theme-picker-swatch,
.theme-picker-option-swatch {
    flex: 0 0 auto;
    display: block;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--panel-2);
}
.theme-picker-option-swatch { width: 30px; height: 22px; padding: 2px; }
.theme-picker-swatch > span,
.theme-picker-option-swatch > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.theme-picker-swatch[data-theme-key="dark-gold"] > span,
.theme-swatch-dark-gold > span { background: linear-gradient(135deg, #1a2436, #e8b84b); }
.theme-picker-swatch[data-theme-key="light-blue"] > span,
.theme-swatch-light-blue > span { background: linear-gradient(135deg, #e7ecf2, #3569b5); }
.theme-picker-swatch[data-theme-key="graphite-blue"] > span,
.theme-swatch-graphite-blue > span { background: linear-gradient(135deg, #171d25, #7fa9d9); }
.theme-picker-swatch[data-theme-key="paper-warm"] > span,
.theme-swatch-paper-warm > span { background: linear-gradient(135deg, #f4ecdd, #a9711f); }
.theme-picker-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.theme-picker-label { color: var(--muted); font-size: .62rem; font-weight: 700; }
.theme-picker-copy strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-inline-end: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.theme-picker-details[open] .theme-picker-chevron { transform: rotate(-135deg); }
.theme-picker-menu {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + .4rem);
    z-index: 60;
    min-width: 15rem;
    max-height: min(70vh, 24rem);
    padding: .6rem;
    overflow-y: auto;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.theme-picker-panel .theme-picker-menu,
.theme-picker-inline .theme-picker-menu {
    top: calc(100% + .4rem);
    bottom: auto;
}
/* app.js flips a downward menu when the trigger is too close to the bottom of
   the viewport (the profile panel on a phone is a typical case). */
.theme-picker-menu.is-up { top: auto; bottom: calc(100% + .4rem); }
.theme-picker-panel .theme-picker-menu { width: 100%; }
.theme-picker-inline .theme-picker-menu {
    inset-inline: auto 0;
    width: min(18rem, calc(100vw - 2rem));
}
.theme-picker-menu-title { margin: 0 0 .4rem; color: var(--muted); font-size: .66rem; font-weight: 700; }
.theme-picker-options { display: grid; gap: .2rem; }
.theme-picker-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .42rem .45rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.theme-picker-option:hover { background: rgba(255, 255, 255, .055); }
.theme-picker-option:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.theme-picker-option.is-active { border-color: var(--gold); background: rgba(232, 184, 75, .08); }
.theme-picker-option-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.theme-picker-option-copy strong { font-size: .8rem; }
.theme-picker-option-copy small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker-option-check { margin-inline-start: auto; color: var(--gold-2); font-weight: 800; opacity: 0; }
.theme-picker-option.is-active .theme-picker-option-check { opacity: 1; }
.theme-picker-brightness { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.theme-picker-inline .theme-picker-trigger { width: auto; padding: .38rem .5rem; }
.theme-picker-inline .theme-picker-label { display: none; }
.theme-picker-inline .theme-picker-swatch { width: 24px; height: 24px; }
.theme-picker-inline .theme-picker-copy strong { max-width: 7.5rem; }
.theme-picker.is-theme-busy .theme-picker-trigger,
.theme-picker.is-theme-busy .theme-picker-menu { opacity: .7; }
.theme-picker.is-theme-busy .theme-picker-trigger { cursor: progress; }
.theme-toast {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 200;
    width: fit-content;
    max-width: min(24rem, calc(100vw - 2rem));
    margin-inline: auto;
    padding: .55rem .85rem;
    border: 1px solid rgba(37, 211, 156, .4);
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: .82rem;
    line-height: 1.6;
    text-align: center;
}
.theme-toast.is-error { border-color: rgba(241, 91, 112, .5); }
@media (max-width: 620px) {
    /* Keep a written cue next to the swatch on phones: a bare colour square
       does not tell a visitor that it opens the palette menu. */
    .theme-picker-inline .theme-picker-copy { display: flex; }
    .theme-picker-inline .theme-picker-copy strong { display: none; }
    .theme-picker-inline .theme-picker-label { display: block; font-size: .6rem; line-height: 1.1; }
    .theme-picker-inline .theme-picker-trigger { gap: .35rem; padding: .36rem .45rem; }
    /* The trigger sits mid-header on a phone, so a menu anchored to its left
       edge used to run past the viewport. Pin the panel to the viewport
       instead; it stays below the sticky header and scrolls if short. */
    .theme-picker-inline .theme-picker-menu {
        position: fixed;
        inset-inline: .8rem;
        top: 4.6rem;
        width: auto;
        max-height: calc(100dvh - 5.4rem);
        overflow-y: auto;
    }
}


/* نشان گپ Stop کنار قیمت ورود در تاریخچه و ترمینال */
.stop-gap-chip {
    display: inline-flex;
    align-items: center;
    margin-inline-start: .3rem;
    padding: 0 .3rem;
    border: 1px solid var(--red);
    border-radius: 5px;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--red);
    vertical-align: middle;
}

/* Policy revision history: the compare view pairs rendered text with a
   line-level diff, so both the wording and the exact changed lines are visible. */
.policy-revision-body { max-height: 32rem; overflow: auto; }
.diff-view {
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.75;
    background: rgba(8, 13, 22, .55);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: .55rem .75rem;
    overflow-x: auto;
}
.diff-line { display: flex; gap: .55rem; white-space: pre-wrap; word-break: break-word; padding: 0 .35rem; border-radius: 4px; }
.diff-line .diff-mark { flex: 0 0 .8rem; color: #8c9bb2; user-select: none; }
.diff-line.is-add { background: rgba(64, 196, 120, .13); color: #a9e7c2; }
.diff-line.is-del { background: rgba(240, 92, 92, .13); color: #f2b3b3; }
.diff-line.is-same { color: #aab7c9; }

/* ---------- Light palette: native selects and the symbol combobox ----------
   The global select rules force the dark scheme for the popup list, which is
   correct for the two dark palettes. On light-blue it produced a dark control,
   white-on-white options and a dark symbol dropdown. These rules are scoped to
   the light palette and appended last, so they win over the literal dark
   colours without touching either dark theme. */
[data-theme="light-blue"] select {
    color-scheme: light;
    background-color: #f7f9fc;
    color: #16283c;
}

[data-theme="light-blue"] select option,
[data-theme="light-blue"] select optgroup {
    background-color: #f7f9fc;
    color: #16283c;
}

[data-theme="light-blue"] select option:checked,
[data-theme="light-blue"] select option:hover,
[data-theme="light-blue"] select option:focus {
    background-color: #d9e4f2;
    color: #16283c;
}

[data-theme="light-blue"] select option:disabled {
    color: #6f849b;
}

[data-theme="light-blue"] .symbol-picker-field {
    background: #f7f9fc;
    border-color: var(--line-2);
}

[data-theme="light-blue"] .symbol-options {
    background: #f7f9fc;
    border-color: var(--line-2);
    box-shadow: 0 16px 34px rgba(23, 60, 110, .18);
}

[data-theme="light-blue"] .symbol-option {
    color: var(--text);
}

[data-theme="light-blue"] .symbol-option.is-highlighted,
[data-theme="light-blue"] .symbol-option:hover {
    background: #e2eaf4;
    color: #16283c;
}

[data-theme="light-blue"] .symbol-option-main strong {
    color: #16283c;
}

[data-theme="light-blue"] .symbol-option-main small,
[data-theme="light-blue"] .symbol-option-price {
    color: #556a80;
}

[data-theme="light-blue"] .symbol-option-empty,
[data-theme="light-blue"] .symbol-option-empty:hover {
    background: transparent;
    color: #6f849b;
}

/* ---------- Silent decoy tripwires and the red security badge ----------
   The decoy controls are never offered; the hidden attribute alone is one DOM
   edit away from revealing them, so the class is hidden twice. The alert badge
   and the review banner use the danger colour of the active palette. */
.decoy-trap { display: none !important; }

.side-count.is-alert,
.side-count-link.is-alert {
    background: var(--red);
    border-color: transparent;
    color: #fff;
}

.admin-security-alert {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: baseline;
    margin: 0 1.25rem .5rem;
    text-decoration: none;
}

.admin-security-alert strong { color: var(--red); }

/* The admin conditional-order history labels a failure with a short chip and
   keeps the verbatim worker reason in its tooltip. */
.pending-not-executed { cursor: help; }
.pending-not-executed strong { color: var(--red); font-weight: 600; }

/* ---------- Independent terminal column scrolling ----------
   Above the stacked breakpoint the account/order column keeps its own scroll
   area: a wheel over it scrolls that column only, and a wheel over the chart
   never moves it. `overscroll-behavior: contain` stops the chain at the edges
   so the page (and the panels under the chart) stay put. */
@media (min-width: 1025px) {
    .terminal-side {
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding-inline-end: .15rem;
    }

    /* A soft edge shadow marks the column as its own scroll area. The shadows
       are sticky pseudo-elements so they stay pinned over the cards while the
       content moves; their height and the flex gap are cancelled by negative
       margins, so no card inside the column shifts by a pixel. Each one only
       appears once the script confirms there is hidden content that way. */
    .terminal-side::before,
    .terminal-side::after {
        content: '';
        position: sticky;
        z-index: 3;
        flex: 0 0 14px;
        height: 14px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .16s ease;
    }
    .terminal-side::before {
        top: 0;
        margin-block-end: calc(-14px - 1rem);
        background: linear-gradient(to bottom, var(--side-scroll-shadow), transparent);
    }
    .terminal-side::after {
        bottom: 0;
        margin-block-start: calc(-14px - 1rem);
        background: linear-gradient(to top, var(--side-scroll-shadow), transparent);
    }
    .terminal-side[data-scroll-top='more']::before,
    .terminal-side[data-scroll-bottom='more']::after { opacity: 1; }
}

/* The scrim is only as strong as the palette needs: near-black on the dark
   surfaces and a faint ink wash on the two paper palettes. */
[data-theme="light-blue"],
[data-theme="paper-warm"] { --side-scroll-shadow: rgba(23, 52, 84, .16); }

@media (prefers-reduced-motion: reduce) {
    .terminal-side::before,
    .terminal-side::after { transition: none; }
}

/* Per-level Fibonacci appearance inside the drawing settings dialog. */
.drawing-fib-fieldset {
    display: grid;
    gap: .45rem;
    padding: .55rem .7rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
}
.drawing-fib-fieldset[hidden] { display: none; }
.drawing-fib-fieldset legend { padding: 0 .35rem; color: var(--muted); font-size: .78rem; }
.fib-level-list { display: grid; gap: .3rem; max-height: 240px; overflow-y: auto; }
.drawing-fib-reset-row { display: flex; justify-content: flex-end; margin: .2rem 0 .45rem; }
.fib-level-row {
    display: grid;
    grid-template-columns: 4.2rem 2.6rem 4.2rem minmax(6rem, 1fr);
    align-items: center;
    gap: .4rem;
}
.fib-level-name { color: var(--muted); font-size: .78rem; }
.fib-level-row input[type="color"] { width: 2.4rem; height: 1.9rem; padding: 0; border-radius: 6px; }
.fib-level-row input[type="number"],
.fib-level-row select { width: 100%; }

/* In-place review on the security alert queue: a hidden form must not keep the
   flex layout of .inline-actions alive. */
.alert-review-form[hidden] { display: none; }

/* SEO panel: Google result preview, score badge and the audit checklist. */
.seo-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.seo-card { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.seo-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.seo-card-head strong { display: block; font-size: .86rem; }
.seo-score-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.seo-score { display: inline-grid; place-items: center; min-width: 58px; padding: .3rem .45rem; border: 1px solid transparent; border-radius: 10px; font-size: .95rem; font-weight: 700; line-height: 1.2; }
.seo-score small { font-size: .55rem; font-weight: 400; opacity: .75; }
.seo-score-good { background: rgba(37, 211, 156, .13); border-color: rgba(37, 211, 156, .35); color: #59e6b6; }
.seo-score-ok { background: rgba(232, 184, 75, .13); border-color: rgba(232, 184, 75, .35); color: var(--gold-2); }
.seo-score-weak { background: rgba(241, 91, 112, .12); border-color: rgba(241, 91, 112, .35); color: #ff8f9e; }
.seo-result { display: grid; gap: .15rem; padding: .7rem .8rem; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.seo-result-url { color: #8ab4f8; font-size: .68rem; overflow-wrap: anywhere; }
.seo-result-title { color: #8ab4f8; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.seo-result-desc { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.7; overflow-wrap: anywhere; }
.seo-checks { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .72rem; }
.seo-check { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .45rem; align-items: start; }
.seo-check-dot { width: 8px; height: 8px; margin-top: .5rem; border-radius: 999px; background: var(--muted); }
.seo-check.is-pass .seo-check-dot { background: #25d39c; }
.seo-check.is-warn .seo-check-dot { background: var(--gold-2); }
.seo-check.is-fail .seo-check-dot { background: #f15b70; }
.seo-check-label { font-weight: 600; }
.seo-check-detail { color: var(--muted); }

/* ---------- Light palette: native controls ----------
   Checkbox, radio, range and progress keep the palette blue instead of the
   literal gold that a few components pinned, and the platform widgets of
   date/time/file inputs (calendar popup, spinner, file button) are forced to
   the light scheme inside every container, not only inside .field. Dark gold
   keeps the platform gold; the graphite palette gets the same treatment below. */
[data-theme="light-blue"] input[type="checkbox"],
[data-theme="light-blue"] input[type="radio"],
[data-theme="light-blue"] input[type="range"],
[data-theme="light-blue"] progress {
    accent-color: var(--blue);
    color-scheme: light;
}

[data-theme="light-blue"] .setup-mode-card input,
[data-theme="light-blue"] .check-inline input[type="checkbox"],
[data-theme="light-blue"] .check-field input[type="checkbox"],
[data-theme="light-blue"] .check-sm,
[data-theme="light-blue"] .check-row input,
[data-theme="light-blue"] .radio-row input,
[data-theme="light-blue"] .symbol-select input,
[data-theme="light-blue"] .indicator-option input {
    accent-color: var(--blue);
}

[data-theme="light-blue"] input[type="checkbox"]:focus-visible,
[data-theme="light-blue"] input[type="radio"]:focus-visible {
    outline: 2px solid rgba(47, 111, 208, .55);
    outline-offset: 2px;
}

[data-theme="light-blue"] input[type="checkbox"]:disabled,
[data-theme="light-blue"] input[type="radio"]:disabled {
    opacity: .55;
    cursor: not-allowed;
}

[data-theme="light-blue"] input[type="date"],
[data-theme="light-blue"] input[type="time"],
[data-theme="light-blue"] input[type="datetime-local"],
[data-theme="light-blue"] input[type="month"],
[data-theme="light-blue"] input[type="week"] {
    color-scheme: light;
    background-color: #f7f9fc;
    color: #16283c;
}

[data-theme="light-blue"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light-blue"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light-blue"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light-blue"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light-blue"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .6;
    cursor: pointer;
}

[data-theme="light-blue"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="light-blue"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="light-blue"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="light-blue"] input[type="month"]::-webkit-calendar-picker-indicator:hover,
[data-theme="light-blue"] input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

[data-theme="light-blue"] input[type="file"] {
    color-scheme: light;
    color: #16283c;
}

[data-theme="light-blue"] input[type="file"]::file-selector-button {
    margin-inline-end: .6rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: #e9eef5;
    color: #16283c;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

[data-theme="light-blue"] input[type="color"] {
    color-scheme: light;
    border: 1px solid var(--line-2);
    background: #f7f9fc;
}

/* Account risk panel: total margin the opposite hedge leg released. */
.risk-hedge-release .meter-label strong { color: var(--green); }
.risk-hedge-release.is-off .meter-label strong { color: var(--muted); }

/* Collapsed sidebar group: a security alarm keeps the red treatment of the
   row badge so it cannot be mistaken for ordinary pending work. */
.side-group-count.is-alert {
    background: var(--red);
    border-color: transparent;
    color: #fff;
}
.side-group-count.is-alert:hover,
.side-group-count.is-alert:focus-visible {
    background: var(--red);
    color: #fff;
    filter: brightness(1.08);
}

/* ---------- Warm paper palette ----------
   A light theme that reads like warm stock rather than a screen: cream paper,
   sepia ink and a bronze accent instead of the blue of light-blue. It is a
   light palette, so the native controls and the chart grid follow the same
   light-scheme rules; only the tints change. Appended last so it wins over the
   literal colours of the earlier palettes. */
[data-theme="paper-warm"] {
    color-scheme: light;
    --bg: #f4ecdd;
    --bg-2: #ece1cd;
    --panel: #fbf5e9;
    --panel-2: #f3e9d7;
    --line: #ddcdb0;
    --line-2: #c9b58f;
    --text: #3a2d1c;
    --muted: #7a6650;
    --gold: #a9711f;
    --gold-2: #8a5a12;
    --green: #2f7d4f;
    --red: #b2412f;
    --blue: #3f6f8f;
    --shadow: 0 14px 30px rgba(92, 68, 34, .12);
}

[data-theme="paper-warm"] body.app-body,
[data-theme="paper-warm"] body.guest-body {
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(169, 113, 31, .08), transparent 60%),
        radial-gradient(700px 500px at 0% 0%, rgba(169, 113, 31, .05), transparent 55%),
        var(--bg);
}

[data-theme="paper-warm"] .sidebar { background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
[data-theme="paper-warm"] .topbar { background: var(--panel); }
[data-theme="paper-warm"] .panel { background: var(--panel); }
[data-theme="paper-warm"] .site-header { border-bottom-color: rgba(74, 52, 26, .10); }
[data-theme="paper-warm"] .site-footer { background: #fbf5e9; }
[data-theme="paper-warm"] .page-hero { background: radial-gradient(600px 300px at 85% 0%, rgba(169, 113, 31, .09), transparent 70%); }
[data-theme="paper-warm"] .auth-aside {
    border-color: rgba(169, 113, 31, .20);
    background:
        radial-gradient(420px 240px at 90% 0%, rgba(169, 113, 31, .10), transparent 65%),
        linear-gradient(165deg, var(--panel), var(--bg-2));
}
[data-theme="paper-warm"] .check-list li,
[data-theme="paper-warm"] .step-list li { color: #6a563d; }

[data-theme="paper-warm"] .brand-mark {
    background: linear-gradient(145deg, #c99a54, #8a5a12);
    color: #fff;
    box-shadow: 0 8px 20px rgba(169, 113, 31, .25);
}

[data-theme="paper-warm"] .hero-panel {
    background: linear-gradient(165deg, var(--panel), var(--panel-2));
    border-color: var(--line);
}
[data-theme="paper-warm"] .hero-panel::before {
    background: radial-gradient(420px 200px at 85% 0%, rgba(169, 113, 31, .11), transparent 70%);
}
[data-theme="paper-warm"] .market-row { background: rgba(74, 52, 26, .03); }
[data-theme="paper-warm"] .market-icon.market-crypto {
    background: rgba(169, 113, 31, .10);
    border-color: rgba(169, 113, 31, .28);
    color: #8a5a12;
}
[data-theme="paper-warm"] .hero-glow { background: radial-gradient(circle, rgba(169, 113, 31, .11), transparent 62%); }
[data-theme="paper-warm"] .hero-candle.is-up rect { fill: rgba(47, 125, 79, .28); }
[data-theme="paper-warm"] .hero-candle.is-up line { stroke: rgba(47, 125, 79, .36); }
[data-theme="paper-warm"] .hero-candle.is-down rect { fill: rgba(178, 65, 47, .24); }
[data-theme="paper-warm"] .hero-candle.is-down line { stroke: rgba(178, 65, 47, .32); }
[data-theme="paper-warm"] .hero-symbols { color: rgba(138, 90, 18, .09); }

[data-theme="paper-warm"] .plan-card {
    background: linear-gradient(175deg, var(--panel), var(--bg-2));
    box-shadow: 0 10px 26px rgba(92, 68, 34, .07);
}
[data-theme="paper-warm"] .plan-featured {
    border-color: rgba(169, 113, 31, .45);
    box-shadow: 0 20px 45px rgba(169, 113, 31, .14);
    background: linear-gradient(175deg, var(--panel-2), var(--panel));
}
[data-theme="paper-warm"] .plan-ribbon { color: #fff; }
[data-theme="paper-warm"] .feature-card { background: linear-gradient(170deg, var(--panel), var(--bg-2)); }
[data-theme="paper-warm"] .stats-strip { background: linear-gradient(180deg, rgba(92, 68, 34, .04), transparent); }
[data-theme="paper-warm"] .cta-band {
    border-color: rgba(169, 113, 31, .25);
    background:
        radial-gradient(500px 200px at 85% 0%, rgba(169, 113, 31, .11), transparent 70%),
        linear-gradient(160deg, var(--panel), var(--bg-2));
}
[data-theme="paper-warm"] .plan-category-tab:hover { border-color: rgba(169, 113, 31, .45); }
[data-theme="paper-warm"] .plan-category-tab.is-active {
    border-color: rgba(169, 113, 31, .55);
    background: rgba(169, 113, 31, .12);
}
[data-theme="paper-warm"] .plan-category-tab span { background: rgba(74, 52, 26, .06); }
[data-theme="paper-warm"] .plan-category-badge {
    border-color: rgba(169, 113, 31, .28);
    background: rgba(169, 113, 31, .09);
}

[data-theme="paper-warm"] .side-label { color: #8a7760; }
[data-theme="paper-warm"] .side-group-head { color: #6a563d; }
[data-theme="paper-warm"] .side-link { color: #5b4832; }
[data-theme="paper-warm"] .side-link:hover,
[data-theme="paper-warm"] .side-group-head:hover {
    background: rgba(74, 52, 26, .06);
    color: var(--text);
}
[data-theme="paper-warm"] .side-link.is-active {
    background: linear-gradient(135deg, rgba(169, 113, 31, .16), rgba(169, 113, 31, .05));
    border-color: rgba(169, 113, 31, .30);
    color: #7a4f0c;
}

[data-theme="paper-warm"] .floating-tooltip {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 16px 34px rgba(92, 68, 34, .20);
}

[data-theme="paper-warm"] .field input,
[data-theme="paper-warm"] .field select,
[data-theme="paper-warm"] .filter-form select,
[data-theme="paper-warm"] .select-field select { background: #fdf8ee; }
[data-theme="paper-warm"] .field input:focus,
[data-theme="paper-warm"] .field select:focus,
[data-theme="paper-warm"] .filter-form select:focus,
[data-theme="paper-warm"] .select-field select:focus {
    border-color: rgba(169, 113, 31, .55);
    box-shadow: 0 0 0 3px rgba(169, 113, 31, .14);
}
[data-theme="paper-warm"] .field input::placeholder { color: #94805f; }

[data-theme="paper-warm"] .btn-primary {
    color: #fff;
    box-shadow: 0 10px 26px rgba(169, 113, 31, .28);
}
[data-theme="paper-warm"] .btn-primary:hover {
    color: #fff;
    box-shadow: 0 10px 28px rgba(169, 113, 31, .32);
}
[data-theme="paper-warm"] .btn-ghost:hover { background: rgba(74, 52, 26, .06); }
[data-theme="paper-warm"] .table tbody tr:hover { background: rgba(74, 52, 26, .04); }

[data-theme="paper-warm"] .chip-gold,
[data-theme="paper-warm"] .badge-gold {
    background: rgba(169, 113, 31, .13);
    border-color: rgba(169, 113, 31, .30);
    color: #8a5a12;
}

/* Native controls: light-scheme widgets with the bronze accent instead of the
   blue one, so the paper palette never shows a dark form control. */
[data-theme="paper-warm"] input[type="checkbox"],
[data-theme="paper-warm"] input[type="radio"],
[data-theme="paper-warm"] input[type="range"],
[data-theme="paper-warm"] progress {
    accent-color: var(--gold);
    color-scheme: light;
}
[data-theme="paper-warm"] input[type="checkbox"]:focus-visible,
[data-theme="paper-warm"] input[type="radio"]:focus-visible {
    outline: 2px solid rgba(169, 113, 31, .55);
    outline-offset: 2px;
}
[data-theme="paper-warm"] input[type="date"],
[data-theme="paper-warm"] input[type="time"],
[data-theme="paper-warm"] input[type="datetime-local"],
[data-theme="paper-warm"] input[type="month"],
[data-theme="paper-warm"] input[type="week"] {
    color-scheme: light;
    background-color: #fdf8ee;
    color: #3a2d1c;
}
[data-theme="paper-warm"] input[type="file"] { color-scheme: light; color: #3a2d1c; }
[data-theme="paper-warm"] input[type="file"]::file-selector-button {
    margin-inline-end: .6rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: #f3e9d7;
    color: #3a2d1c;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
[data-theme="paper-warm"] input[type="color"] {
    color-scheme: light;
    border: 1px solid var(--line-2);
    background: #fdf8ee;
}

/* Native selects and the symbol combobox on the paper surface. */
[data-theme="paper-warm"] select {
    color-scheme: light;
    background-color: #fdf8ee;
    color: #3a2d1c;
}
[data-theme="paper-warm"] select option,
[data-theme="paper-warm"] select optgroup {
    background-color: #fdf8ee;
    color: #3a2d1c;
}
[data-theme="paper-warm"] select option:checked,
[data-theme="paper-warm"] select option:hover,
[data-theme="paper-warm"] select option:focus {
    background-color: #f0e2c9;
    color: #3a2d1c;
}
[data-theme="paper-warm"] select option:disabled { color: #94805f; }
[data-theme="paper-warm"] .symbol-picker-field {
    background: #fdf8ee;
    border-color: var(--line-2);
}
[data-theme="paper-warm"] .symbol-options {
    background: #fdf8ee;
    border-color: var(--line-2);
    box-shadow: 0 16px 34px rgba(92, 68, 34, .20);
}
[data-theme="paper-warm"] .symbol-option { color: var(--text); }
[data-theme="paper-warm"] .symbol-option.is-highlighted,
[data-theme="paper-warm"] .symbol-option:hover {
    background: #f3e7d0;
    color: #3a2d1c;
}
[data-theme="paper-warm"] .symbol-option-main strong { color: #3a2d1c; }
[data-theme="paper-warm"] .symbol-option-main small,
[data-theme="paper-warm"] .symbol-option-price { color: #7a6650; }
[data-theme="paper-warm"] .symbol-option-empty,
[data-theme="paper-warm"] .symbol-option-empty:hover {
    background: transparent;
    color: #94805f;
}

/* The chart is focusable so the vertical zoom has a keyboard path; the ring
   only appears for keyboard focus and never while dragging the canvas. */
#price-chart:focus { outline: none; }
#price-chart:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Brightness tuning for the light palettes. The slider sets --paper-keep (how
   much of the base colour survives) and --paper-tone (what it mixes toward),
   so soft/bright is a palette value rather than a page-wide filter, which would
   break the sticky header and the fixed mobile drawer. Browsers without
   color-mix keep the untouched palette below. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    :root {
        --paper-keep: 100%;
        --paper-tone: #ffffff;
    }
    [data-theme="light-blue"] {
        --paper-soft: #c7d1dd;
        --bg: color-mix(in srgb, #e7ecf2 var(--paper-keep), var(--paper-tone));
        --bg-2: color-mix(in srgb, #dde5ee var(--paper-keep), var(--paper-tone));
        --panel: color-mix(in srgb, #f4f6fa var(--paper-keep), var(--paper-tone));
        --panel-2: color-mix(in srgb, #e9eef5 var(--paper-keep), var(--paper-tone));
        --line: color-mix(in srgb, #cfd9e5 var(--paper-keep), var(--paper-tone));
        --line-2: color-mix(in srgb, #b4c2d3 var(--paper-keep), var(--paper-tone));
    }
    [data-theme="paper-warm"] {
        --paper-soft: #e2d3b8;
        --bg: color-mix(in srgb, #f4ecdd var(--paper-keep), var(--paper-tone));
        --bg-2: color-mix(in srgb, #ece1cd var(--paper-keep), var(--paper-tone));
        --panel: color-mix(in srgb, #fbf5e9 var(--paper-keep), var(--paper-tone));
        --panel-2: color-mix(in srgb, #f3e9d7 var(--paper-keep), var(--paper-tone));
        --line: color-mix(in srgb, #ddcdb0 var(--paper-keep), var(--paper-tone));
        --line-2: color-mix(in srgb, #c9b58f var(--paper-keep), var(--paper-tone));
    }
}

/* Compact brightness slider under the palette swatches. It is hidden on the
   two dark palettes, where the setting has nothing to tune. */
.theme-brightness {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: .45rem;
}
.theme-brightness input[type="range"] {
    width: 100%;
    height: 18px;
    margin: 0;
    accent-color: var(--gold);
    cursor: pointer;
}
.theme-brightness output {
    align-self: flex-end;
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.3;
}
[data-theme="dark-gold"] .theme-brightness,
[data-theme="graphite-blue"] .theme-brightness { display: none; }

/* ---------- Bulk review of the security alert queue ---------- */
.alert-select-col { width: 2.2rem; text-align: center; }
.alert-select-col input { width: 1rem; height: 1rem; accent-color: var(--gold); cursor: pointer; }
.alert-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: rgba(232, 184, 75, .06);
}
.alert-bulk-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.alert-bulk-count strong { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.alert-bulk-bar input[type="text"] { flex: 1 1 12rem; min-width: 9rem; }

/* Score badge inside the SEO comparison table: same colours as the cards,
   sized down so the column stays scannable next to seven other columns. */
.seo-table-score { display: inline-flex; align-items: center; gap: .45rem; }
.seo-table-score .seo-score { min-width: 46px; padding: .2rem .35rem; font-size: .8rem; border-radius: 8px; }

/* ---------- Graphite palette: native controls ----------
   Graphite-blue is a dark palette, so its widgets stay on the dark scheme, but
   its accent is the palette blue while a few components pinned the literal
   dark-gold #e8b84b and the platform default still painted the pickers, the
   file button and the select popup. They now follow the same blue accent as the
   rest of the palette; dark gold is deliberately left alone. */
[data-theme="graphite-blue"] input[type="checkbox"],
[data-theme="graphite-blue"] input[type="radio"],
[data-theme="graphite-blue"] input[type="range"],
[data-theme="graphite-blue"] progress {
    accent-color: var(--blue);
    color-scheme: dark;
}

[data-theme="graphite-blue"] .setup-mode-card input,
[data-theme="graphite-blue"] .check-inline input[type="checkbox"],
[data-theme="graphite-blue"] .check-field input[type="checkbox"],
[data-theme="graphite-blue"] .check-sm,
[data-theme="graphite-blue"] .check-row input,
[data-theme="graphite-blue"] .radio-row input,
[data-theme="graphite-blue"] .symbol-select input,
[data-theme="graphite-blue"] .indicator-option input,
[data-theme="graphite-blue"] .alert-select-col input {
    accent-color: var(--blue);
}

[data-theme="graphite-blue"] input[type="checkbox"]:focus-visible,
[data-theme="graphite-blue"] input[type="radio"]:focus-visible {
    outline: 2px solid rgba(127, 169, 217, .55);
    outline-offset: 2px;
}

[data-theme="graphite-blue"] input[type="checkbox"]:disabled,
[data-theme="graphite-blue"] input[type="radio"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

[data-theme="graphite-blue"] input[type="date"],
[data-theme="graphite-blue"] input[type="time"],
[data-theme="graphite-blue"] input[type="datetime-local"],
[data-theme="graphite-blue"] input[type="month"],
[data-theme="graphite-blue"] input[type="week"] {
    color-scheme: dark;
    background-color: #121820;
    color: #e6edf5;
}

[data-theme="graphite-blue"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="graphite-blue"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="graphite-blue"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="graphite-blue"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="graphite-blue"] input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: .65;
    cursor: pointer;
}

[data-theme="graphite-blue"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="graphite-blue"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="graphite-blue"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="graphite-blue"] input[type="month"]::-webkit-calendar-picker-indicator:hover,
[data-theme="graphite-blue"] input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

[data-theme="graphite-blue"] input[type="file"] {
    color-scheme: dark;
    color: #e6edf5;
}

[data-theme="graphite-blue"] input[type="file"]::file-selector-button {
    margin-inline-end: .6rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: #1d252f;
    color: #e6edf5;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

[data-theme="graphite-blue"] input[type="color"] {
    color-scheme: dark;
    border: 1px solid var(--line-2);
    background: #121820;
}

/* The select popup is an OS surface, so it is painted explicitly: the dark
   scheme alone still shows the platform highlight on some browsers. */
[data-theme="graphite-blue"] select {
    color-scheme: dark;
    background-color: #121820;
    color: #e6edf5;
}
[data-theme="graphite-blue"] select option,
[data-theme="graphite-blue"] select optgroup {
    background-color: #121820;
    color: #e6edf5;
}
[data-theme="graphite-blue"] select option:checked,
[data-theme="graphite-blue"] select option:hover,
[data-theme="graphite-blue"] select option:focus {
    background-color: #223042;
    color: #e6edf5;
}
[data-theme="graphite-blue"] select option:disabled { color: #6d7d8f; }

/* ---------- Native control preview: four palettes side by side ----------
   Each panel carries its own data-theme, so the palette overrides apply inside
   the card and all four can be compared on one screen. Plain controls only, no
   component classes, so what is shown is exactly what the platform draws. */
.theme-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
}
@media (min-width: 900px) {
    .theme-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.theme-demo-panel {
    display: grid;
    gap: .6rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
}
.theme-demo-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.theme-demo-head code { font-size: .7rem; color: var(--muted); }
.theme-demo-accent { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .68rem; }
.theme-demo-swatch {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--gold);
}
.theme-demo-group { display: grid; gap: .35rem; min-width: 0; }
.theme-demo-caption { color: var(--muted); font-size: .68rem; font-weight: 700; }
.theme-demo-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.theme-demo-option { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text); }
.theme-demo-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; min-width: 0; }
@media (min-width: 560px) {
    .theme-demo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.theme-demo-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.theme-demo-panel select,
.theme-demo-panel textarea,
.theme-demo-panel progress,
.theme-demo-panel meter {
    width: 100%;
    min-width: 0;
}

/* Display preferences on the account profile: the shared one-button theme
   menu plus a roomier brightness track. */
.display-preferences { display: grid; gap: .85rem; }
.theme-picker-panel { width: min(24rem, 100%); }
.display-brightness { display: grid; gap: .35rem; max-width: 440px; }
.display-brightness input[type="range"] { width: 100%; accent-color: var(--gold); }
.display-brightness output { color: var(--muted); font-size: .75rem; }

/* ── کاشی‌های زندهٔ بازار در داشبورد ─────────────────────────────────────── */
.market-tiles .panel-title { margin-bottom: .8rem; }

.tiles-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .65rem;
    padding: .75rem;
    margin-bottom: .85rem;
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 12px;
    background: var(--panel-2, #111b2b);
}

.tiles-field { display: flex; flex-direction: column; gap: .3rem; min-width: 150px; }
.tiles-field > span { color: var(--muted, #8c9bb2); font-size: .72rem; }
.tiles-field input,
.tiles-field select {
    min-height: 34px;
    padding: .35rem .55rem;
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    font: inherit;
    font-size: .82rem;
}
.tiles-hint { font-size: .72rem; padding-bottom: .45rem; }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .7rem;
}

.tile-grid:empty { display: none; }

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem .75rem .6rem;
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    overflow: hidden;
}
.tile::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold, #e8b84b);
    opacity: .8;
}
.tile.is-up::before { background: #26a69a; }
.tile.is-down::before { background: #ef5350; }

/* A price tick restarts this class from dashboard-tiles.js. The inset shadow
   keeps the tile's gradient and accent bar intact while the whole card blinks. */
.tile.flash { animation: tileFlash .45s ease; }

@keyframes tileFlash {
    0% {
        box-shadow: inset 0 0 0 999px rgba(232, 184, 75, .2), 0 0 0 1px rgba(232, 184, 75, .5);
    }
    100% {
        box-shadow: inset 0 0 0 999px rgba(232, 184, 75, 0), 0 0 0 1px rgba(232, 184, 75, 0);
    }
}

.tile-head { display: flex; align-items: center; gap: .35rem; }
.tile-symbol { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.tile-title {
    color: var(--muted, #8c9bb2);
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tile-remove {
    margin-inline-start: auto;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--muted, #8c9bb2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.tile-remove:hover { color: #ef5350; border-color: rgba(239, 83, 80, .4); }

.tile-price { font-size: 1.05rem; font-weight: 700; }
.tile-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.tile-change { font-size: .75rem; font-weight: 600; }
.tile-change.is-up { color: #26a69a; }
.tile-change.is-down { color: #ef5350; }
.tile-frame { color: var(--muted, #8c9bb2); font-size: .68rem; }

.tile-spark { width: 100%; height: 46px; display: block; }

.tile-select {
    margin-top: .15rem;
    width: 100%;
    padding: .25rem .4rem;
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    font: inherit;
    font-size: .72rem;
}

.tiles-empty {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px dashed var(--border, rgba(255, 255, 255, .12));
    border-radius: 12px;
    color: var(--muted, #8c9bb2);
    font-size: .8rem;
    text-align: center;
}

.tiles-status { margin: .55rem 0 0; font-size: .72rem; }
.tiles-status.is-error { color: #ef5350; }

@media (max-width: 640px) {
    .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .tiles-field { min-width: 120px; flex: 1 1 120px; }
}

@media (max-width: 480px) {
    /* Two 150px charts leave the price axis unreadable on a phone; one column
       keeps the sparkline and its labels legible. */
    .tile-grid { grid-template-columns: minmax(0, 1fr); }
    /* The wordmark cannot shrink without turning into an ellipsis; the mark
       alone identifies the site and leaves room for the header actions. */
    .site-header .brand-text { display: none; }
}