/* Razor standardized UI components — canonical styles for the rz-* custom
 * elements.
 *
 * The rz-* components render in LIGHT DOM (no shadow root), so their styles
 * cannot live inside the component and must be here, in one shared stylesheet
 * loaded by every page. This is the single source of truth for how each
 * standardized element looks; per-page inline copies are removed as sections
 * migrate. Colors come from client/styles/tokens.css.
 */

/* Material Symbols — the icon font used by rz-* components (.ms). Previously
 * @import-ed inside nav-drawer's shadow root, which is why it worked on pages
 * that don't otherwise load it (chart.html loads Material *Icons*). Now that
 * components render in light DOM the font must be available globally. */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0");

.ms {
    font-family: "Material Symbols Rounded";
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    user-select: none;
    vertical-align: middle;
}

/* ── Page header logo ───────────────────────────────────────────────────────
 * The logo + instance name in a page's <h1>, wrapping a link back to THIS
 * instance's root. The href is set in JS from RzAuth.base — a literal "/"
 * always lands on the root instance, which is wrong behind the port-prefix
 * proxy (see docs/UI-ARCHITECTURE.md §4). */
.logo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
.logo-link:hover {
    color: var(--blue);
}

/* ── rz-stat-card ──────────────────────────────────────────────────────────
 * KPI card: label / value / optional sub. Unifies the old .stat-card (account)
 * and .stat-block (screen) markup. The custom-element tag itself is the card
 * box, so it also styles correctly before the JS upgrades it. */
rz-stat-card {
    display: block;
    flex: 1;
    min-width: 130px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}
rz-stat-card .stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
}
rz-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    font-family: monospace;
}
rz-stat-card .stat-value.pos {
    color: var(--green);
}
rz-stat-card .stat-value.neg {
    color: var(--red);
}
rz-stat-card .stat-value.neu {
    color: var(--text);
}
rz-stat-card .stat-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
@media (max-width: 700px) {
    rz-stat-card {
        min-width: calc(50% - 5px);
        flex: none;
        padding: 10px 12px;
    }
    rz-stat-card .stat-value {
        font-size: 17px;
    }
}
@media (max-width: 380px) {
    rz-stat-card {
        min-width: 100%;
    }
}
/* variant="plain": compact label/value for an inline stats bar (no card chrome).
 * Used by the screener monitor; overrides the card box above. */
rz-stat-card[variant="plain"] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    flex: 0 0 auto;
    min-width: 0;
}
rz-stat-card[variant="plain"] .stat-label {
    letter-spacing: 0.07em;
    margin-bottom: 0;
}
rz-stat-card[variant="plain"] .stat-value {
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}

/* ── rz-collapsible ─────────────────────────────────────────────────────────
 * A card with a clickable header that grid-collapses its body. Body content is
 * hosted in light DOM (children captured on connect), so page JS can still
 * reach elements inside it by id. Children marked data-rz-slot="actions" render
 * as header actions (and don't trigger the collapse toggle). */
rz-collapsible {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}
rz-collapsible .collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
rz-collapsible .collapsible-header:hover {
    background: rgba(255, 255, 255, 0.03);
}
rz-collapsible .collapsible-header.is-closed {
    border-bottom: none;
}
rz-collapsible .collapsible-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
rz-collapsible .rz-collapsible-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
rz-collapsible .chevron {
    font-family: "Material Symbols Rounded";
    font-size: 18px;
    line-height: 1;
    color: var(--muted);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
rz-collapsible .chevron.rotated {
    transform: rotate(-180deg);
}
/* Grid-based collapse — works for any content height */
rz-collapsible .collapsible-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.25s ease;
}
rz-collapsible .collapsible-body.is-closed {
    grid-template-rows: 0fr;
}
rz-collapsible .collapsible-body > div {
    overflow: hidden;
    min-height: 0;
}

/* ── rz-data-list ───────────────────────────────────────────────────────────
 * A configurable data table: set .columns and .rows from page JS. Optional
 * header-click sorting (sortable attribute). Styling mirrors the old .sym-table.
 * columns: [{ key, label, align:'r'|'l', mono, cls, format(v,row), trend(v,row) }] */
rz-data-list {
    display: block;
}
rz-data-list .rz-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
rz-data-list .rz-list th {
    padding: 5px 10px;
    background: #2a2118;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
rz-data-list .rz-list th.r {
    text-align: right;
}
rz-data-list .rz-list th.sortable {
    cursor: pointer;
    user-select: none;
}
rz-data-list .rz-list th.sortable:hover {
    color: var(--text);
}
rz-data-list .rz-list .sort-caret {
    font-size: 8px;
    margin-left: 3px;
    vertical-align: middle;
}
rz-data-list .rz-list td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(77, 61, 51, 0.35);
    white-space: nowrap;
}
rz-data-list .rz-list tr:last-child td {
    border-bottom: none;
}
rz-data-list .rz-list tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
rz-data-list .rz-list .mono {
    font-family: monospace;
}
rz-data-list .rz-list .r {
    text-align: right;
}
/* Symbol cells use the canonical .sym treatment below (see "symbols"). */
rz-data-list .rz-list td.pos {
    color: var(--green);
}
rz-data-list .rz-list td.neg {
    color: var(--red);
}
rz-data-list .rz-list td.neu {
    color: var(--text);
}
rz-data-list .rz-list .empty-row {
    color: var(--muted);
    font-style: italic;
    text-align: center;
    padding: 14px 10px;
}

/* Action-column buttons (rendered from a column's `actions(row)` descriptor).
 * `btn-close` / `btn-clean-close` are the two concrete uses today (positions
 * table: close a position / arm a clean close), kept as named classes rather
 * than a generic `.rz-list-action` so page code can still target them. */
rz-data-list .rz-list .btn-close {
    background: transparent;
    border: 1px solid #5c2a1a;
    color: var(--red);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
rz-data-list .rz-list .btn-close:hover {
    background: #3d1a0e;
    border-color: var(--red);
}
rz-data-list .rz-list .btn-clean-close {
    background: transparent;
    border: 1px solid #1a5c1a;
    color: var(--green);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background 0.15s, border-color 0.15s;
}
rz-data-list .rz-list .btn-clean-close:hover {
    background: #0a2b0a;
}
rz-data-list .rz-list .btn-clean-close.active {
    background: #0a2b0a;
    border-color: var(--green);
}
rz-data-list .rz-list .btn-clean-close.active .ms {
    animation: rz-list-pulse-icon 1.5s ease-in-out infinite;
}
@keyframes rz-list-pulse-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Expandable rows (list.expandable = true) — a toggle-arrow lead column and a
 * following detail row whose single cell is filled by list.expandRender(row)
 * (an HTML string, injected via innerHTML — see data-list.js for why). */
rz-data-list .rz-list .rz-list-toggle {
    width: 26px;
    text-align: center;
    color: var(--muted);
    font-size: 9px;
}
rz-data-list .rz-list tr.rz-list-row--expandable {
    cursor: pointer;
    user-select: none;
}
rz-data-list .rz-list tr.rz-list-row--expandable:hover td {
    background: rgba(77, 61, 51, 0.25);
}
rz-data-list .rz-list tr.rz-list-row--expanded td {
    background: rgba(77, 61, 51, 0.18);
}
rz-data-list .rz-list .rz-list-detail-cell {
    padding: 0 !important;
    border-bottom: 1px solid rgba(77, 61, 51, 0.5) !important;
}

/* ── buttons (.btn system) ──────────────────────────────────────────────────
 * Canonical button styles, shared by every page and rendered by <rz-button>.
 * Usable directly as classes too (e.g. buttons built in innerHTML strings).
 * Variants map to the old per-page classes (set-btn/sync-btn/btn-cancel =
 * ghost; btn-confirm = danger; icon-btn = icon). */
.btn {
    font: inherit;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
.btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.btn--sm {
    font-size: 11px;
    padding: 4px 10px;
}
.btn--xs {
    padding: 2px 4px;
    border-radius: 4px;
}
.btn--ghost {
    border-color: var(--border);
    color: var(--muted);
}
.btn--ghost:hover:not(:disabled) {
    border-color: var(--blue);
    color: var(--blue);
}
/* Toggle buttons carry their state in aria-pressed, not a class. */
.btn--ghost[aria-pressed="true"] {
    border-color: var(--blue);
    color: var(--blue);
}
.btn--danger {
    background: #5c1e0e;
    color: #fff;
    font-weight: 600;
}
.btn--danger:hover:not(:disabled) {
    background: var(--red);
}
.btn--danger-outline {
    border-color: #5c2a1a;
    color: var(--red);
}
.btn--danger-outline:hover:not(:disabled) {
    background: #3d1a0e;
    border-color: var(--red);
}
.btn--success-outline {
    border-color: #1a5c1a;
    color: var(--green);
}
.btn--success-outline:hover:not(:disabled) {
    background: #0a2b0a;
}
.btn--icon {
    border: none;
    color: var(--muted);
    padding: 6px;
    border-radius: 6px;
}
.btn--icon:hover:not(:disabled) {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

/* ── rz-toasts ──────────────────────────────────────────────────────────────
 * Fixed bottom-right stack. Call push(msg, ok) on the element; each toast
 * auto-dismisses. Replaces the per-page showToast()/.toast-container. */
rz-toasts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 300;
}
rz-toasts .toast {
    font-size: 12px;
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    max-width: 300px;
    animation: rz-toast-in 0.2s ease;
}
rz-toasts .toast-ok {
    background: #0a2b0a;
    border-color: var(--green);
    color: var(--green);
}
rz-toasts .toast-err {
    background: #2b150a;
    border-color: var(--red);
    color: var(--red);
}
@keyframes rz-toast-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── rz-badge ───────────────────────────────────────────────────────────────
 * Status pill: a colored dot + label. tone = green | red | yellow | muted. */
rz-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
rz-badge .rz-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}
rz-badge[tone="green"] .rz-dot {
    background: var(--green);
}
rz-badge[tone="red"] .rz-dot {
    background: var(--red);
}
rz-badge[tone="yellow"] .rz-dot {
    background: var(--yellow);
    animation: rz-pulse-dot 2s infinite;
}
rz-badge[tone="muted"] .rz-dot {
    background: var(--muted);
}
@keyframes rz-pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* ── rz-tabs ────────────────────────────────────────────────────────────────
 * variant="underline": blue underline on the active tab (panel switcher).
 * variant="segmented": joined button group (mode toggle).
 * [compact]: segmented strip sized to sit in a card header. */
rz-tabs {
    display: flex;
    flex-shrink: 0;
}
rz-tabs .rz-tab {
    flex: 1;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
}
/* Optional per-tab icon. Sized to the 12px tab text (the shared .ms is 20px). */
rz-tabs .rz-tab .ms {
    font-size: 15px;
}
rz-tabs[variant="underline"] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
rz-tabs[variant="underline"] .rz-tab {
    padding: 8px;
    border: none;
    border-bottom: 2px solid transparent;
}
rz-tabs[variant="underline"] .rz-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}
rz-tabs[variant="underline"] .rz-tab:hover {
    color: var(--text);
}
rz-tabs[variant="segmented"] {
    padding: 10px 14px 0;
    gap: 0;
}
rz-tabs[variant="segmented"] .rz-tab {
    padding: 5px 0;
    border: 1px solid var(--border);
}
rz-tabs[variant="segmented"] .rz-tab:first-child {
    border-radius: 6px 0 0 6px;
}
rz-tabs[variant="segmented"] .rz-tab:last-child {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}
rz-tabs[variant="segmented"] .rz-tab.active {
    background: var(--border);
    color: var(--text);
}
/* Header-sized segmented strip: no page padding, tabs hug their content. */
rz-tabs[variant="segmented"][compact] {
    padding: 0;
}
rz-tabs[variant="segmented"][compact] .rz-tab {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 10px;
}

/* ── rz-modal ───────────────────────────────────────────────────────────────
 * Overlay + centered card. Body content is the element's light-DOM children,
 * captured on connect. open toggles visibility; closes on overlay-click, the ×,
 * or Escape (unless dismissable="false"). Emits `close`. */
rz-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 10, 6, 0.75);
}
rz-modal[open] {
    display: flex;
}
rz-modal .rz-modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    width: 340px;
    max-width: 90vw;
}
rz-modal .rz-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
rz-modal .rz-modal-title {
    font-size: 13px;
    font-weight: 600;
}
rz-modal .rz-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ── rz-nav-drawer ──────────────────────────────────────────────────────────
 * Slide-in nav drawer + overlay. Ported from the old shadow-DOM nav-drawer.js
 * (its styles had to live inside the component; now they're shared here, and
 * chart.html's separate hand-rolled drawer is gone). The host is display:
 * contents so the fixed-position overlay/drawer sit against the viewport. */
rz-nav-drawer {
    display: contents;
}
rz-nav-drawer .rz-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
rz-nav-drawer[open] .rz-nav-overlay {
    opacity: 1;
    pointer-events: auto;
}
rz-nav-drawer .rz-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 250;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: var(--text);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
rz-nav-drawer[open] .rz-nav-panel {
    transform: translateX(0);
}
/* Matches the main dashboard header exactly: 10px vertical padding + a 34px
 * logo block (24px logo + 5px glow padding each side) + 1px border = 55px.
 * Horizontal padding stays 16px so the header aligns with the nav items below. */
rz-nav-drawer .d-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
rz-nav-drawer .d-logo-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 32%;
}
rz-nav-drawer .d-logo img {
    height: 24px;
    display: block;
}
rz-nav-drawer .d-name {
    font-size: 16px;
    font-weight: 600;
}
/* The drawer's logo + instance name is a link home, like the page header's. */
rz-nav-drawer .d-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
rz-nav-drawer .d-logo:hover .d-name {
    color: var(--blue);
}
rz-nav-drawer .d-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s;
}
rz-nav-drawer .d-close:hover {
    color: var(--text);
}
rz-nav-drawer nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}
rz-nav-drawer .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition:
        background 0.15s,
        color 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
rz-nav-drawer .item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}
rz-nav-drawer .item.active {
    color: var(--blue);
}
rz-nav-drawer .item svg,
rz-nav-drawer .item .ms {
    flex-shrink: 0;
}
rz-nav-drawer .divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}
rz-nav-drawer .item.is-halt {
    color: var(--red);
}
rz-nav-drawer .item.is-authed {
    color: var(--green);
}

/* Spinner state for refresh-style buttons: page JS toggles .spinning on the
 * button (by id), the icon inside rotates. */
.btn.spinning .ms {
    animation: rz-spin 0.6s linear infinite;
}
@keyframes rz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* rz-data-list variant="bare": no header background, slightly larger text —
 * matches the old .pos-table look (positions / candidates panels). */
rz-data-list[variant="bare"] .rz-list {
    font-size: 13px;
}
rz-data-list[variant="bare"] .rz-list th {
    background: none;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 6px 8px;
}
rz-data-list[variant="bare"] .rz-list td {
    padding: 6px 8px;
}
rz-data-list[variant="bare"] .rz-list .empty-row {
    text-align: left;
    padding: 16px 8px;
}


/* ── symbols ────────────────────────────────────────────────────────────────
 * ONE canonical symbol treatment for every page, matching the open-positions
 * style: monospace 600 / 14px / --text, hover --blue, never underlined.
 *
 * Symbols are links (to /chart?symbol=...), so the UA default link styling
 * (rgb(0,0,238) + underline) MUST be overridden — otherwise a symbol column
 * with no explicit rule renders as a raw browser link, which is exactly what
 * happened to winners/losers. :visited is pinned for the same reason.
 */
.sym,
.pos-symbol,
.symbol {
    font-family: monospace;
    font-weight: 600;
    font-size: 14px;
}
.sym a,
.pos-symbol a,
.symbol a,
a.sym-link {
    color: var(--text);
    text-decoration: none;
}
.sym a:visited,
.pos-symbol a:visited,
.symbol a:visited,
a.sym-link:visited {
    color: var(--text);
}
.sym a:hover,
.pos-symbol a:hover,
.symbol a:hover,
a.sym-link:hover {
    color: var(--blue);
    text-decoration: none;
}

/* ── rz-auth-modal ──────────────────────────────────────────────────────────
 * The sign-in dialog, shared by every page (account + screen each used to have
 * their own, and only account's showed the success popover). Higher z-index than
 * rz-modal: sign-in can be raised from on top of another dialog. */
rz-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 10, 6, 0.92);
    transition: opacity 0.4s ease; /* FADE_MS in auth-modal.js */
}
rz-auth-modal[open] {
    display: flex;
}
rz-auth-modal.fade-out {
    opacity: 0;
}
rz-auth-modal .rz-auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    width: 340px;
    max-width: 90vw;
    text-align: center;
}
rz-auth-modal h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
rz-auth-modal p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
}
rz-auth-modal .login-logo-wrap {
    display: inline-flex;
    margin: 0 auto 16px;
}
rz-auth-modal .modal-pw-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 16px;
    outline: none;
    transition: border-color 0.15s;
}
rz-auth-modal .modal-pw-input:focus {
    border-color: var(--blue);
}
rz-auth-modal .login-error {
    color: var(--red);
    font-size: 11px;
    min-height: 14px;
    margin-top: -12px;
    margin-bottom: 12px;
    text-align: left;
}
rz-auth-modal .rz-auth-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
rz-auth-modal .auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 4px;
}
rz-auth-modal .auth-success .ms {
    font-size: 46px;
    color: var(--green);
}
rz-auth-modal .auth-success p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
}

/* Optional subtitle under a collapsible's heading (note attribute). */
rz-collapsible .card-note {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    font-style: italic;
}

/* ── Chart overlays (TradingView Lightweight Charts) ──────────────────────────
 * Lightweight Charts has no declarative tooltip and no HTML annotations, so the
 * crosshair tooltip, the Heikin-Ashi caption, and the required TradingView
 * attribution are DOM overlays positioned inside the position:relative .chart-wrap.
 * Shared by the /chart monitor chart and account.html's equity chart. */
.chart-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.chart-tip.hidden {
    display: none;
}
/* Fixed placement: pinned to the top-left of the plot area (TradingView-style
 * legend) rather than tracking the cursor, so the readout never covers the bars
 * under the crosshair and never moves while you scrub. Offsets are relative to
 * the .chart-wrap; a page whose chart canvas is inset inside the wrap (padding)
 * overrides them to match its own plot edge. */
.chart-tip--fixed {
    top: 8px;
    left: 8px;
}
.chart-tip .tip-t {
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 3px;
}
.chart-tip .tip-sep {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.chart-tip b {
    color: var(--text);
    font-weight: 600;
}

/* HA-mode caption (top-right, clear of the right price axis + the ORB box label). */
.chart-caption {
    position: absolute;
    top: 10px;
    right: 62px;
    z-index: 4;
    pointer-events: none;
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(40, 33, 28, 0.6);
    padding: 1px 5px;
    border-radius: 4px;
}
.chart-caption.hidden {
    display: none;
}
/* The required TradingView attribution is rendered by Lightweight Charts itself
 * (a #tv-attr-logo corner link to tradingview.com) -- no page-level style needed. */