/* ==========================================================================
   Trend at a glance - single stylesheet for the whole workspace.

   Every colour comes from the tokens below, so `html[data-theme="light"]` switches
   the whole site (charts included - the ECharts options read these variables too).

   Layout rule for every page: the viewport is the canvas. html/body never scroll,
   and no inner region is allowed to draw a scrollbar either, so the UI stays a
   fixed, clean frame at any window size.
   ========================================================================== */

:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b0e13;
    --bg-elev: #11151d;
    --bg-sunken: #0d1117;
    --bg-row: #0b0f16;
    --line: #1e2531;
    --line-soft: #171d27;

    --text: #e7ecf3;
    --text-dim: #c6cfdd;
    --muted: #8b95a7;
    --muted-strong: #9aa6ba;
    --muted-deep: #61708a;
    --label: #7f8ba0;
    --placeholder: #55617a;

    --up: #16c784;
    --down: #f0616d;
    --accent: #4c8dff;
    --accent-hover: #3f7ff0;
    --gold: #ffb02e;
    --gold-text: #ffd479;

    --hover: rgba(255, 255, 255, .05);
    --hover-strong: rgba(255, 255, 255, .08);
    --chip: #233047;
    --chip-strong: #1b2432;
    --chip-line: #33405a;
    --chip-text: #ffffff;
    --focus-line: #3a5f9e;
    --icon-idle: #4a566e;
    --avatar-text: #cfe0ff;

    --topbar-from: #121722;
    --topbar-to: #0e1219;
    --veil: rgba(11, 14, 19, .82);
    --veil-strong: rgba(6, 8, 12, .72);
    --shadow: 0 18px 48px rgba(0, 0, 0, .45);
    --shadow-strong: 0 24px 60px rgba(0, 0, 0, .55);

    --ok-text: #9ff0cb;
    --ok-bg: rgba(22, 199, 132, .1);
    --ok-line: rgba(22, 199, 132, .26);
    --ok-dot: #2f7d5c;
    --danger-text: #ffb3ba;
    --danger-bg: rgba(240, 97, 109, .1);
    --danger-line: rgba(240, 97, 109, .28);
    --danger-panel: #2a1420;

    --scroll-track: #161d28;
    --scroll-thumb: #3a4761;
    --scroll-thumb-hover: #4c5b74;
    --seg-glow: rgba(76, 141, 255, .45);

    --radius: 12px;
    --topbar-h: 52px;
}

html[data-theme="light"] {
    color-scheme: light;

    --bg: #eef1f6;
    --bg-elev: #ffffff;
    --bg-sunken: #f6f8fb;
    --bg-row: #f4f7fb;
    --line: #d9e0ea;
    --line-soft: #e8edf4;

    --text: #101828;
    --text-dim: #344054;
    --muted: #5b6a80;
    --muted-strong: #4a5769;
    --muted-deep: #7a8798;
    --label: #6b7789;
    --placeholder: #98a2b3;

    --up: #0d9f6e;
    --down: #d92d20;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --gold: #e08a00;
    --gold-text: #9a5b00;

    --hover: rgba(16, 24, 40, .05);
    --hover-strong: rgba(16, 24, 40, .09);
    --chip: #dbe7ff;
    --chip-strong: #eef2f8;
    --chip-line: #c3cede;
    --chip-text: #123a8a;
    --focus-line: #93b4f5;
    --icon-idle: #98a2b3;
    --avatar-text: #1d4ed8;

    --topbar-from: #ffffff;
    --topbar-to: #f4f7fb;
    --veil: rgba(238, 241, 246, .84);
    --veil-strong: rgba(16, 24, 40, .38);
    --shadow: 0 14px 34px rgba(16, 24, 40, .12);
    --shadow-strong: 0 24px 54px rgba(16, 24, 40, .18);

    --ok-text: #0b6b4a;
    --ok-bg: rgba(13, 159, 110, .12);
    --ok-line: rgba(13, 159, 110, .3);
    --ok-dot: #0d9f6e;
    --danger-text: #b42318;
    --danger-bg: rgba(217, 45, 32, .1);
    --danger-line: rgba(217, 45, 32, .3);
    --danger-panel: #fdecea;

    --scroll-track: #e7ecf4;
    --scroll-thumb: #b3bfd0;
    --scroll-thumb-hover: #94a3b8;
    --seg-glow: rgba(37, 99, 235, .32);
}

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

/* Scrollbars stay hidden everywhere by default ... */
*:not(.scroller) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*:not(.scroller)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ... except inner lists that opt in with .scroller: they get a slim, themed, visible
   vertical scrollbar. The page around them still never scrolls. */
.scroller {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.scroller::-webkit-scrollbar {
    width: 10px;
    height: 0;
    display: block;
}

.scroller::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 999px;
}

.scroller::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.scroller::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}

#app,
.shell {
    height: 100%;
}

h1:focus,
button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: none;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 3px rgba(76, 141, 255, .25);
}

a {
    color: var(--accent);
}

/* ---------- shell / top bar ---------- */

.shell {
    display: grid;
    /* A fixed single column: the nav can never stretch the shell past the viewport. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--topbar-from), var(--topbar-to));
    overflow: hidden;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
    font-weight: 650;
    font-size: 14px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.brand-mark {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--up), var(--accent));
    box-shadow: 0 0 12px rgba(76, 141, 255, .45);
}

.brand-text em {
    font-style: normal;
    color: var(--muted);
    font-weight: 500;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.nav-link:hover {
    color: var(--text);
    background: var(--hover);
}

.nav-link.active {
    color: var(--text);
    background: var(--hover-strong);
}

.nav-link.account {
    padding: 4px 6px 4px 10px;
}

/* Rightmost nav control: the avatar that opens the profile / subscription page. */
.nav-avatar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 4px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-elev);
    text-decoration: none;
    transition: border-color .12s ease, background .12s ease;
}

.nav-avatar:hover,
.nav-avatar.active {
    border-color: var(--chip-line);
    background: var(--chip-strong);
}

.nav-avatar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-avatar-name {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-avatar-slots {
    font-size: 10px;
    color: var(--muted-deep);
    white-space: nowrap;
}

.avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--chip);
    color: var(--avatar-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

.avatar.lg {
    width: 46px;
    height: 46px;
    font-size: 15px;
    flex: 0 0 auto;
}

.plan-chip {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.plan-chip.free {
    color: var(--muted-strong);
    background: var(--chip-strong);
    border-color: var(--chip-line);
}

.plan-chip.pro {
    color: #201703;
    background: linear-gradient(135deg, #ffd479, var(--gold));
    border-color: #ffc95c;
}

.content {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* ---------- market board ---------- */

.market {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
    min-height: 0;
}

.mkt-id {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mkt-symbol {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .4px;
}

.mkt-name {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.mkt-venue {
    font-size: 9.5px;
    letter-spacing: .5px;
    color: var(--muted-deep);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

.mkt-quote {
    display: flex;
    align-items: baseline;
    gap: 9px;
    white-space: nowrap;
}

.mkt-price,
.mkt-change,
.wl-price,
.wl-chg,
.mkt-stats dd {
    font-variant-numeric: tabular-nums;
}

.mkt-price {
    font-size: 19px;
    font-weight: 700;
}

.mkt-change {
    font-size: 13px;
    font-weight: 600;
}

.up {
    color: var(--up);
}

.down {
    color: var(--down);
}

.flat,
.muted {
    color: var(--muted);
}

.mkt-stats {
    display: flex;
    gap: 16px;
    margin: 0 0 0 auto;
    min-width: 0;
    overflow: hidden;
}

.mkt-stats div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mkt-stats dt {
    font-size: 9.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.mkt-stats dd {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-dim);
}

.seg-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

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

/* The active interval must read at a glance in both themes: solid accent fill, bold
   white label and a soft glow, instead of a subtle chip. */
.seg.on,
.seg.on:hover {
    background: var(--accent);
    color: #fff;
    font-weight: 750;
    box-shadow: 0 0 0 1px var(--accent), 0 2px 10px var(--seg-glow);
}

.seg.on::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
}

.seg:not(.on) {
    opacity: .82;
}

/* ---------- stock picker (add to watchlist) ---------- */

.picker-veil {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--veil-strong);
    backdrop-filter: blur(2px);
}

.picker {
    width: min(620px, 100%);
    /* Fixed height: the search field must not move when the result count changes. */
    height: min(520px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 60px var(--shadow-strong);
    overflow: hidden;
}

.picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.picker-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 11px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    outline: none;
}

.picker-input:focus {
    border-color: var(--focus-line);
}

.picker-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.picker-close:hover {
    color: #fff;
    border-color: var(--chip-line);
}

.picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 12px 46px;
    align-items: center;
    gap: 10px;
    padding: 2px 6px;
    border-radius: 9px;
}

.picker-row:hover {
    background: var(--hover);
}

.picker-pick {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.picker-pick:disabled {
    cursor: default;
    opacity: .45;
}

.picker-symbol {
    flex: 0 0 66px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
}

.picker-name {
    min-width: 0;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-venue {
    font-size: 9.5px;
    letter-spacing: .5px;
    color: var(--muted-deep);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
}

.picker-flag {
    font-size: 9px;
    color: var(--ok-dot);
    text-align: center;
}

.picker-action {
    font-size: 11px;
    font-weight: 650;
    color: var(--accent);
}

.picker-note,
.picker-foot {
    margin: 0;
    padding: 12px;
    font-size: 12px;
    color: var(--muted);
}

.picker-foot {
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    color: var(--muted-deep);
}

.picker-note.center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.picker-note.center p {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
}

.picker-limit a {
    color: var(--gold-text);
}

.mkt-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 12px;
    transition: grid-template-columns .22s ease, gap .22s ease;
}

/* The collapsed watchlist leaves a narrow rail instead of a second column. */
.mkt-body.watch-hidden {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 10px;
}

.mkt-body.watch-hidden .watch-card {
    display: none;
}

/* ---------- theme switch ---------- */

.theme-toggle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-left: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-elev);
    color: var(--text-dim);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.theme-toggle:hover {
    background: var(--chip-strong);
    border-color: var(--chip-line);
    color: var(--text);
}

/* ---------- avatars (built-in SVG characters) ---------- */

.avatar-art {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--chip-strong);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.avatar-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.avatar-art.sm {
    width: 26px;
    height: 26px;
}

.avatar-art.lg {
    width: 46px;
    height: 46px;
}

.avatar-art.xl {
    width: 84px;
    height: 84px;
    border-width: 2px;
}

.avatar.sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

/* ---------- profile page (full width, no dialog) ---------- */

.profile-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 18px;
    min-height: 0;
    overflow: hidden;
}

.profile-hero {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.hero-id {
    min-width: 0;
    flex: 0 1 auto;
}

.hero-id h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .2px;
}

.hero-email {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.hero-meta {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.hero-facts {
    margin: 0 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    gap: 22px;
}

.hero-facts dt {
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.hero-facts dd {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero-facts dd em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 4px;
}

.profile-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
}

/* Avatar + watched stocks side by side, using the whole page. */
.profile-grid-simple {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
}

.profile-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.profile-card.wide {
    grid-column: 1 / -1;
}

.profile-card h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.card-lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}

.card-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.profile-card .field > span {
    font-size: 12px;
}

.profile-card .field input {
    font-size: 15px;
    padding: 10px 12px;
}

.slot-row {
    display: grid;
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.slot-save {
    width: auto;
    padding: 11px 18px;
    font-size: 14px;
}

.plan-cost {
    margin: 0;
    font-size: 14px;
    color: var(--text-dim);
}

.profile-card .form-msg {
    font-size: 13.5px;
}

.avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.avatar-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-sunken);
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.avatar-choice:hover {
    border-color: var(--chip-line);
    background: var(--chip-strong);
    color: var(--text);
}

.avatar-choice.on {
    border-color: var(--accent);
    background: var(--chip-strong);
    color: var(--text);
}

.profile-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

.profile-foot .btn-quiet {
    width: auto;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 13.5px;
}

.watch-table li {
    font-size: 14px;
}

.watch-table .wt-symbol {
    font-size: 15px;
}

.watch-table .wt-name {
    font-size: 13.5px;
}

.watch-table .wt-date {
    font-size: 12.5px;
}

.chart-card,
.watch-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: opacity .2s ease, transform .2s ease;
}

.chart-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Identity, price, interval selector and the daily snapshot share the strip above the
   candles - the board has no separate toolbar row. */
.chart-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.chart-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.chart-host {
    position: absolute;
    inset: 0;
}

.chart-veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--veil);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}

.chart-veil.err {
    color: var(--down);
}

.watch-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.watch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.watch-title {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted-strong);
}

.watch-state {
    margin-left: auto;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* `+ Add` and the hide button stay pinned to the right edge of the panel header:
   the auto margin lives on `+ Add`, which is the first element of that group. */
.watch-add {
    margin-left: auto;
}

/* Slots used / subscribed, sitting next to the watchlist title. */
.watch-quota {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.watch-quota em {
    font-style: normal;
    color: var(--muted-deep);
    padding: 0 1px;
}

/* Reminder under the watchlist header for visitors without an account. */
.watch-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
}

/* Slides the watchlist in and out. */
.watch-toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-dim);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.watch-toggle:hover {
    background: var(--chip-strong);
    border-color: var(--chip-line);
    color: var(--text);
}

/* Collapsed state: a slim vertical rail where the panel used to be. */
.watch-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.watch-rail:hover {
    background: var(--chip-strong);
    border-color: var(--chip-line);
    color: var(--text);
}

.watch-rail-icon {
    font-size: 16px;
    line-height: 1;
}

.watch-rail-text {
    writing-mode: vertical-rl;
}

.wl-row.readonly {
    grid-template-columns: minmax(0, 1fr) auto;
    cursor: pointer;
}

/* Signed-out or empty watchlist panel. */
.watch-empty {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    text-align: center;
}

.watch-empty p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.watch-empty-alt {
    font-size: 11.5px;
    color: var(--muted-deep);
    text-decoration: none;
}

.watch-empty-alt:hover {
    color: var(--text-dim);
}

.btn-primary.inline {
    display: inline-block;
    width: auto;
    padding: 8px 18px;
    text-decoration: none;
}

.watch-add {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text-dim);
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.watch-add:hover {
    background: var(--chip-strong);
    border-color: var(--chip-line);
    color: #fff;
}

.watch-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 2px 6px 6px;
}

.wl-row {
    display: grid;
    /* symbol + name | price + change | remove */
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.wl-row:hover {
    background: var(--hover);
}

.wl-row.sel {
    background: rgba(76, 141, 255, .11);
    border-color: rgba(76, 141, 255, .32);
}

.wl-star,
.wl-remove {
    border: 0;
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
    transition: color .12s ease, background .12s ease, opacity .12s ease;
}

.wl-star {
    font-size: 13px;
    color: var(--icon-idle);
}

.wl-star:hover {
    color: var(--gold);
    background: rgba(255, 176, 46, .12);
}

.wl-star.on {
    color: var(--gold);
}

.wl-remove {
    font-size: 14px;
    color: var(--icon-idle);
    opacity: .35;
}

.wl-row:hover .wl-remove {
    opacity: 1;
}

.wl-remove:hover {
    color: var(--down);
    background: rgba(240, 97, 109, .14);
}

.wl-id,
.wl-num {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wl-num {
    align-items: flex-end;
}

.wl-sym {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.wl-name {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-price {
    font-size: 13.5px;
    font-weight: 650;
}

.wl-chg {
    font-size: 11.5px;
    font-weight: 600;
}

/* ECharts tooltip (markup is produced in market-chart.js) */
.bfps-tip {
    padding: 8px 10px;
    min-width: 172px;
}

.bfps-tip-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.bfps-tip-head span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 5px;
    margin-left: 5px;
}

.bfps-tip-time {
    font-size: 10.5px;
    color: var(--muted);
    margin-bottom: 6px;
}

.bfps-tip dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}

.bfps-tip dl div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.bfps-tip dt {
    color: var(--muted);
    font-size: 10.5px;
}

.bfps-tip dd {
    margin: 0;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

/* ---------- auth + profile ---------- */

.auth-wrap {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: hidden;
}

.auth-card,
.panel {
    width: min(520px, 100%);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 18px 48px var(--shadow);
}

.auth-card.center {
    text-align: center;
}

.auth-title {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field > span {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--label);
}

.field input,
.field textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.field textarea {
    resize: none;
    line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--placeholder);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--focus-line);
}

.field > span em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted-deep);
}

.btn-primary,
.btn-ghost,
.btn-quiet {
    width: 100%;
    padding: 10px 14px;
    border-radius: 9px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.btn-primary {
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.btn-ghost:hover:not(:disabled) {
    border-color: var(--chip-line);
    color: var(--text);
}

.btn-quiet {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-weight: 550;
}

.btn-quiet:hover {
    color: var(--down);
}

.btn-primary:disabled,
.btn-ghost:disabled {
    opacity: .6;
    cursor: default;
}

.form-msg {
    margin: 0;
    font-size: 12.5px;
    border-radius: 8px;
    padding: 7px 10px;
}

.form-msg.err {
    color: var(--danger-text);
    background: var(--danger-bg);
    border: 1px solid var(--danger-line);
}

.auth-alt,
.auth-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}

.auth-note {
    font-size: 11px;
    color: var(--muted-deep);
}

.panel {
    width: min(430px, 100%);
    gap: 16px;
}

.panel.wide {
    width: min(560px, 100%);
}

.profile-wrap {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-id {
    min-width: 0;
    flex: 1 1 auto;
}

.panel-id h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-id p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--muted);
    white-space: normal;
    overflow-wrap: anywhere;
}

.panel-id .panel-meta {
    font-size: 11px;
    color: var(--muted-deep);
}

.plan-box {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.plan-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.plan-name {
    font-size: 14px;
    font-weight: 700;
}

.plan-price {
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.plan-empty {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.plan-line.total {
    padding-top: 9px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--text-dim);
}

/* Subscription slots: how many stocks the account may keep on the watchlist. */
.slot-row {
    display: grid;
    grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.slot-field input {
    text-align: center;
}

.slot-save {
    width: auto;
}

.plan-cost {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}

.plan-cost em {
    font-style: normal;
    color: var(--muted-deep);
}

/* Watched stocks with add time and expiry. */
.watch-table-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.watch-table {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
}

.watch-table li {
    /* symbol | name | renews | actions: the renews column has a fixed width, so the
       dates line up vertically across rows */
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 132px 284px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-row);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.watch-table .wt-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "renews YYYY-MM-DD" sits in its own left aligned column, never glued to the name */
.watch-table .wt-renew {
    min-width: 0;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* right hand side of a watched row: plan badge and the action buttons */
.wt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    justify-self: end;
}

.watch-table .wt-actions .btn-mini,
.watch-table .wt-actions .btn-pro {
    white-space: nowrap;
}

.sub-plan {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: rgba(255, 176, 46, .12);
    color: var(--gold-text);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wt-symbol {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.wt-name {
    min-width: 0;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-date {
    font-size: 11px;
    color: var(--muted-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wt-date.soon {
    color: var(--gold);
}

.btn-mini {
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.btn-mini:hover:not(:disabled) {
    color: var(--down);
    border-color: rgba(240, 97, 109, .4);
}

/* ---------- guest book ---------- */

.board {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px 14px;
    min-height: 0;
}

.board-form,
.board-card {
    min-height: 0;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.board-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px;
    overflow: hidden;
}

.board-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.board-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 4px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-foot {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    color: var(--muted-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-msg.ok {
    color: var(--ok-text);
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
}

.msg {
    position: relative;
    padding: 10px 12px;
    background: var(--bg-sunken);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
}

/* Delete affordance: hidden until the mouse is over its message. */
.msg-del {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-elev);
    color: var(--muted-deep);
    cursor: pointer;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .12s ease, transform .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}

.msg-del svg {
    width: 15px;
    height: 15px;
    display: block;
}

.msg:hover .msg-del,
.msg-del:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.msg-del:hover:not(:disabled) {
    color: var(--down);
    background: var(--danger-bg);
    border-color: var(--danger-line);
}

.msg-del:disabled {
    cursor: default;
    opacity: .35;
}

/* Name and email on the message page: displayed from the account, not editable. */
.field-ro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    background: var(--bg-sunken);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
}

.ro-label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--label);
}

.ro-value {
    font-size: 13.5px;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.msg header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.msg-name {
    font-size: 12.5px;
    font-weight: 700;
}

.msg-time {
    font-size: 10.5px;
    color: var(--muted-deep);
}

.msg-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- boot + error UI ---------- */

.boot-pad {
    height: 100%;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 50;
    padding: 9px 14px;
    border-radius: 9px;
    background: var(--danger-panel);
    border: 1px solid rgba(240, 97, 109, .4);
    color: var(--danger-text);
    font-size: 12.5px;
}

#blazor-error-ui .reload {
    color: #fff;
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 10px;
    color: var(--danger-text);
}

/* ---------- responsive: keep everything inside the viewport ---------- */

@media (max-width: 1080px) {
    .mkt-stats {
        display: none;
    }
}

@media (max-width: 900px) {
    .mkt-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 156px;
    }

    .watch-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .wl-row {
        flex: 0 0 auto;
        min-width: 176px;
    }

    .wl-name {
        max-width: 118px;
    }

    /* Guest book stacks: form on top, message list fills the rest. */
    .board {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        padding: 10px;
        gap: 10px;
    }

    .board-form {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    /* The avatar keeps its circle, drops the name and slot text. */
    .nav-avatar-text {
        display: none;
    }

    .nav-avatar {
        padding: 4px;
    }
}

@media (max-width: 520px) {
    .topnav {
        gap: 2px;
    }

    .nav-link {
        padding: 6px 7px;
        font-size: 12.5px;
    }

    /* Narrowest screens keep "Sign in"; the sign-in page links to registration. */
    .topnav .nav-link.solid,
    .topnav .nav-link:not(.active):last-child {
        display: none;
    }
}

@media (max-width: 620px) {
    .market {
        padding: 10px;
        gap: 8px;
    }

    /* The toolbar wraps instead of squeezing: a flex item that shrinks below its
       content would otherwise overflow and visually collide with its neighbour. */
    .mkt-bar {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .mkt-id,
    .mkt-quote {
        flex: 0 0 auto;
    }

    .mkt-id {
        overflow: hidden;
    }

    .mkt-controls {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 8px;
    }

    .mkt-name,
    .mkt-venue {
        display: none;
    }

    .brand-text em {
        display: none;
    }
}

@media (max-height: 560px) {
    .auth-card,
    .panel {
        padding: 16px;
        gap: 9px;
    }

    .sub-list {
        max-height: 108px;
    }

    .board-form .field textarea {
        height: 62px;
    }
}

/* ---------- per stock subscription: gold Pro button, indicator panel ---------- */

.btn-pro {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #ffc95c;
    border-radius: 9px;
    background: linear-gradient(135deg, #ffd479, var(--gold));
    color: #201703;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 176, 46, .22);
    transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}

.btn-pro:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 3px 14px rgba(255, 176, 46, .34);
}

.btn-pro:disabled {
    opacity: .6;
    cursor: default;
}

.btn-pro em {
    font-style: normal;
    font-weight: 600;
    opacity: .8;
}

.btn-pro.small {
    padding: 4px 9px;
    font-size: 11px;
    white-space: nowrap;
}

.pro-star {
    font-size: 11px;
    line-height: 1;
}

.pro-chip {
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd479, var(--gold));
    color: #201703;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    white-space: nowrap;
}

.wl-free {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--chip-strong);
    border: 1px solid var(--chip-line);
    color: var(--muted-strong);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .5px;
    vertical-align: middle;
}

.wl-pro {
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd479, var(--gold));
    color: #201703;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
    vertical-align: middle;
}

.ind-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--chip-line);
    border-radius: 9px;
    background: var(--bg-sunken);
    color: var(--text-dim);
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ind-btn:hover,
.ind-btn.on {
    background: var(--chip-strong);
    border-color: var(--accent);
    color: var(--text);
}

.ind-btn-icon {
    font-style: italic;
    font-weight: 800;
    color: var(--accent);
}

/* The title bar is precious: on narrower windows the indicator button collapses to its
   glyph (the tooltip still explains it) so the Open/High/Low/Prev/Vol figures keep full size. */
@media (max-width: 1500px) {
    .ind-btn-label {
        display: none;
    }

    .ind-btn {
        padding: 5px 8px;
    }

    .mkt-stats {
        gap: 12px;
    }
}

@media (max-width: 1180px) {
    .mkt-stats div:nth-child(5) {
        display: none;
    }
}

.ind-panel {
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 20;
    width: min(430px, calc(100% - 16px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
}

.ind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted-strong);
}

.ind-close,
.ind-reset {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.ind-close {
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.ind-close:hover,
.ind-reset:hover {
    color: var(--text);
}

.ind-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.ind-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 96px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
}

.ind-toggle input {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
}

.ind-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.ind-field > span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--label);
}

.ind-field input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-sunken);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    outline: none;
}

.ind-field input:focus {
    border-color: var(--accent);
}

.ind-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line-soft);
}

.ind-note {
    font-size: 10.5px;
    color: var(--muted-deep);
}

.ind-reset {
    font-size: 10.5px;
    font-weight: 650;
    color: var(--muted-strong);
    padding: 0;
}
.picker-error {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--danger-text);
    background: var(--danger-bg);
}

/* ---------- Pro subscription dialog (monthly / yearly) ---------- */

.plan-veil {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--veil-strong);
    backdrop-filter: blur(2px);
}

.plan-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 18px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

.plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.plan-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
}

.plan-symbol {
    color: var(--gold);
}

.plan-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.plan-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.plan-close:hover {
    color: var(--text);
    border-color: var(--chip-line);
}

.plan-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.plan-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg-sunken);
    color: var(--text-dim);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.plan-option:hover {
    border-color: var(--chip-line);
    background: var(--chip-strong);
}

.plan-option.on {
    border-color: var(--gold);
    background: var(--chip-strong);
    box-shadow: 0 0 0 1px var(--gold), 0 4px 16px var(--seg-glow);
}

.plan-option-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.plan-name {
    font-size: 13.5px;
    font-weight: 750;
    color: var(--text);
}

.plan-badge {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd479, var(--gold));
    color: #201703;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    vertical-align: middle;
}

.plan-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.plan-price em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

.plan-detail {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
}

.plan-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted-deep);
}

.plan-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.plan-actions .btn-quiet.plan-cancel,
.plan-actions .btn-pro.plan-confirm {
    width: auto;
    font-size: 13px;
}

.plan-actions .plan-cancel {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.plan-actions .plan-confirm {
    padding: 10px 18px;
}

/* (the profile plan badge lives in .sub-plan above) */

.plan-renew {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 620px) {
    .plan-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .watch-table li {
        grid-template-columns: 58px minmax(0, 1fr);
        row-gap: 6px;
    }

    .watch-table .wt-renew {
        grid-column: 2;
    }

    .wt-actions {
        grid-column: 1 / -1;
        justify-self: end;
    }
}
/* =========================================================================
   Round 23
   1. softer gold treatment for the Pro / Unsubscribe / plan controls
   2. icon navigation
   3. inline watchlist search panel
   4. compliance strip + legal page
   5. message kinds + larger message text
   6. hidden operations console
   ========================================================================= */

/* ---------- 1. softer gold ---------- */

.btn-pro,
.btn-pro.small,
.plan-actions .plan-confirm {
    border: 1px solid rgba(255, 176, 46, .38);
    background: rgba(255, 176, 46, .13);
    color: var(--gold-text);
    box-shadow: none;
    font-weight: 650;
}

.btn-pro:hover:not(:disabled),
.plan-actions .plan-confirm:hover:not(:disabled) {
    background: rgba(255, 176, 46, .2);
    border-color: rgba(255, 176, 46, .55);
    filter: none;
}

.btn-pro .pro-star {
    color: var(--gold-text);
    opacity: .9;
}

.wl-pro,
.pro-chip {
    border: 1px solid rgba(255, 176, 46, .34);
    background: rgba(255, 176, 46, .14);
    color: var(--gold-text);
    box-shadow: none;
}

.sub-plan {
    border-color: rgba(255, 176, 46, .34);
    background: rgba(255, 176, 46, .1);
    color: var(--gold-text);
    font-weight: 650;
}

.plan-option.on {
    border-color: rgba(255, 176, 46, .55);
    background: rgba(255, 176, 46, .08);
    box-shadow: none;
}

.plan-badge {
    background: rgba(255, 176, 46, .2);
    color: var(--gold-text);
}

.plan-price {
    color: var(--text);
}

/* ---------- 2. icon navigation ---------- */

.nav-icon-link {
    padding: 6px 9px;
}

.nav-icon {
    width: 23px;
    height: 23px;
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 3. inline watchlist search panel ---------- */

.watch-search-btn {
    margin-left: auto;
    width: 30px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
}

.watch-search-btn.on {
    border-color: rgba(120, 160, 255, .5);
    color: var(--text);
    background: var(--hover-strong);
}

.watch-search-icon {
    width: 15px;
    height: 15px;
    display: block;
}

.watch-search-panel {
    position: absolute;
    top: 44px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 44px var(--shadow-strong, rgba(0, 0, 0, .5));
    overflow: hidden;
}

.ws-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.ws-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.ws-input:focus {
    outline: none;
    border-color: var(--focus-line);
}

.ws-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ws-close:hover {
    color: var(--text);
    border-color: var(--chip-line);
}

.ws-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ws-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 14px 40px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.ws-row:hover:not(:disabled) {
    background: var(--hover-strong);
    border-color: var(--line-soft);
}

.ws-row:disabled {
    cursor: default;
    opacity: .55;
}

.ws-symbol {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-text);
    white-space: nowrap;
}

.ws-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-venue {
    display: none;
}

.ws-flag,
.ws-added {
    font-size: 10.5px;
    color: var(--muted-deep);
    white-space: nowrap;
}

.ws-added {
    text-align: right;
    color: var(--muted);
    font-weight: 650;
}

.ws-note {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.ws-note p {
    margin: 0 0 8px;
}

.ws-note.single {
    margin: 0;
}

.ws-link {
    margin-right: 12px;
    color: var(--gold-text);
    font-weight: 650;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.ws-link.muted {
    color: var(--muted);
}

.ws-error {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--danger-text, #ff9b9b);
    background: var(--danger-bg, rgba(255, 80, 80, .08));
}

/* ---------- 4. compliance strip + legal page ---------- */

.legal-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-top: 1px solid var(--line);
    background: var(--bg-sunken);
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--muted);
}

.legal-strip-icon {
    flex: 0 0 auto;
    color: var(--gold-text);
    font-size: 11px;
}

.legal-strip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legal-strip-text b {
    color: var(--text-dim);
    font-weight: 700;
}

.legal-strip-link {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--gold-text);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.legal-strip-link:hover {
    text-decoration: underline;
}

.legal {
    height: 100%;
    min-height: 0;
    display: flex;
    padding: 14px;
    overflow: hidden;
}

.legal-card {
    width: min(880px, 100%);
    margin: 0 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 26px 32px 30px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.legal-card h1 {
    margin: 0 0 10px;
    font-size: 24px;
}

.legal-card h2 {
    margin: 22px 0 8px;
    font-size: 15.5px;
}

.legal-card p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dim);
}

.legal-lead {
    font-size: 14px !important;
    color: var(--text) !important;
}

.legal-back {
    margin-top: 26px !important;
}

.legal-back a {
    color: var(--gold-text);
    text-decoration: none;
    font-weight: 650;
}

/* ---------- 5. message kinds + larger message text ---------- */

.board-form .field > span,
.board-form .ro-label {
    font-size: 12.5px;
}

.board-list {
    gap: 10px;
}

.msg {
    padding: 12px 14px;
    border-radius: 11px;
}

.msg header {
    gap: 8px;
    margin-bottom: 6px;
}

.msg-name {
    font-size: 13.5px;
}

.msg-time {
    font-size: 11.5px;
}

.msg-text {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--text-dim);
}

.msg-kind {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--chip-line);
    background: var(--chip-strong);
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
    white-space: nowrap;
}

.msg-kind.user {
    border-color: transparent;
    background: var(--hover-strong);
    color: var(--muted);
}

.msg-system {
    border-color: rgba(255, 176, 46, .42);
    background: rgba(255, 176, 46, .07);
}

.msg-system .msg-kind {
    border-color: rgba(255, 176, 46, .34);
    background: rgba(255, 176, 46, .16);
    color: var(--gold-text);
}

.msg-system .msg-text {
    color: var(--text);
}

/* ---------- 6. operations console (/ops-console) ---------- */

.ops {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    overflow: hidden;
}

.ops-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ops-head h1 {
    margin: 0;
    font-size: 19px;
}

.ops-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.ops-head-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ops-who {
    font-size: 11.5px;
    color: var(--muted);
}

.ops-stats {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.ops-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.ops-stat span {
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.ops-stat b {
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.ops-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 330px;
    gap: 10px;
}

.ops-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.ops-card-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted);
}

.ops-search {
    margin-left: auto;
    width: 190px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-sunken);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.ops-table {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ops-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) 84px 62px 46px 82px;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--text-dim);
}

.ops-row.ops-sub-row {
    grid-template-columns: minmax(0, 1.4fr) 64px 108px 78px;
}

.ops-row-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-elev);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.ops-row:not(.ops-row-head):hover {
    background: var(--hover);
}

.ops-row.is-admin {
    background: rgba(255, 176, 46, .06);
}

.ops-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.ops-badge {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 176, 46, .4);
    background: rgba(255, 176, 46, .14);
    color: var(--gold-text);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ops-row-action {
    text-align: right;
}

.ops-foot {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
}

.ops-empty {
    margin: 10px;
    font-size: 12px;
    color: var(--muted);
}

.ops-composer {
    padding: 0 12px 12px;
    gap: 9px;
    overflow-y: auto;
}

.ops-composer .ops-card-head {
    margin: 0 -12px 2px;
}

.ops-composer .field > span {
    font-size: 11.5px;
}

.ops-note {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted-deep);
}

.ops-composer textarea {
    min-height: 74px;
}

@media (max-width: 1240px) {
    .ops-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 300px;
    }
}

/* =========================================================================
   Round 25
   1. brand icon (rising trend line instead of the colour block)
   2. chart loading spinner
   3. calmer interval buttons (smaller text, no dot on the active one)
   4. search rows: check icon instead of "Added", wider company name
   5. admin console: clearer recipient picker
   ========================================================================= */

/* ---------- 1. brand icon ---------- */

.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--up);
    flex: 0 0 auto;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, .25));
}

/* ---------- 2. chart loading spinner ---------- */

.chart-loading {
    gap: 12px;
    background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
    backdrop-filter: blur(1.5px);
}

.spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid var(--chip-line);
    border-top-color: var(--accent);
    animation: bfps-spin .8s linear infinite;
}

.chart-loading .loading-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-strong);
    letter-spacing: .2px;
}

@keyframes bfps-spin {
    to { transform: rotate(360deg); }
}

/* ---------- 3. interval buttons ---------- */

.seg {
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--muted);
}

.seg.on,
.seg.on:hover {
    background: var(--hover-strong);
    color: var(--text);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--chip-line);
}

.seg.on::after {
    content: none;
}

.seg:not(.on) {
    opacity: .72;
}

/* ---------- 4. search rows ---------- */

.ws-row {
    grid-template-columns: 52px minmax(0, 1fr) 12px 18px;
    gap: 7px;
}

.ws-symbol {
    font-size: 11.5px;
}

.ws-name {
    font-size: 12px;
}

.ws-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--up);
}

.ws-check svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* ---------- 5. admin console recipient picker ---------- */

.ops-audience {
    display: flex;
    gap: 6px;
}

.ops-audience button {
    flex: 1 1 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-sunken);
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.ops-audience button.on {
    border-color: var(--chip-line);
    background: var(--hover-strong);
    color: var(--text);
}

.ops-all-note {
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg-sunken);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

.ops-all-note b {
    color: var(--text);
}

.ops-flash {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--ok-line);
    border-radius: 8px;
    background: var(--ok-bg);
    color: var(--ok-text);
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================================
   Round 26: registration email, C# rendered watchlist, indicator lines
   ========================================================================= */

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted-deep);
}

.hero-mail {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.ops-email {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ops-mail {
    display: block;
    overflow: hidden;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    color: var(--muted-deep);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Watchlist rows are rendered by Blazor now; keep the old affordances. */
.wl-row {
    cursor: pointer;
}

.wl-row.sel {
    background: var(--hover-strong);
    outline: 1px solid var(--chip-line);
    outline-offset: -1px;
}

.wl-row.readonly {
    cursor: default;
}

/* =========================================================================
   Round 27
   1. centred loading overlay (spinner + label sit together)
   2. unread message badge + unread dot
   3. "Reserve" row inside the Pro dialog
   4. reservations card in the operations console
   ========================================================================= */

/* ---------- 2. unread messages ---------- */

.nav-icon-link {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg);
    pointer-events: none;
}

.msg-unread-dot {
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
}

/* ---------- 3. reserve row in the Pro dialog ---------- */

.plan-reserve {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
}

.plan-reserve-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.plan-reserve-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.plan-reserve-sub {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}

.plan-confirm {
    margin-top: 20px;
    margin-bottom: 12px;
}

.plan-reserve-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 6px 12px;
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.plan-reserve-btn.is-reserved {
    color: var(--up);
    border-color: color-mix(in srgb, var(--up) 45%, var(--line));
    opacity: 1;
}

.plan-reserve-flash {
    margin: 0;
    font-size: 11.5px;
    color: var(--up);
}

/* ---------- 4. reservations in the operations console ---------- */

.ops-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ops-res-card {
    grid-column: 1 / span 2;
    min-height: 0;
}

.ops-composer {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.ops-row.ops-res-row {
    grid-template-columns: minmax(0, 1.5fr) 82px 108px;
}

/* =========================================================================
   Round 28
   1. dialog: two clear paths (Subscribe vs Reserve), gated by Stocks.json Ready
   ========================================================================= */

.plan-dialog {
    overflow-y: auto;
}

/* Locked billing options (stock not ready yet). */
.plan-options.is-locked .plan-option {
    opacity: .45;
}

.plan-option:disabled {
    cursor: not-allowed;
}

.plan-paths {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.plan-path {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 15px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-sunken);
}

.plan-path.is-muted {
    opacity: .62;
}

.plan-path-tag {
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.plan-path.is-active .plan-path-tag {
    color: var(--gold-text);
}

.plan-path-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.plan-path-text {
    flex: 1 1 auto;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

.plan-path .plan-confirm,
.plan-path .plan-reserve-btn {
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: normal;
}

.plan-path .plan-confirm {
    border: 1px solid rgba(255, 176, 46, .4);
    background: rgba(255, 176, 46, .13);
    color: var(--gold-text);
    font-weight: 650;
}

.plan-path .plan-confirm:hover:not(:disabled) {
    background: rgba(255, 176, 46, .2);
    border-color: rgba(255, 176, 46, .55);
}

.plan-path .plan-reserve-btn {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-weight: 600;
}

.plan-path .plan-reserve-btn:hover:not(:disabled) {
    border-color: var(--up);
    color: var(--up);
}

.plan-path .plan-confirm:disabled,
.plan-path .plan-reserve-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    filter: none;
}

.plan-reserve-flash {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--up);
}

@media (max-width: 520px) {
    .plan-paths {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   Round 29
   1. Messages: plain "Signed in as" line + pagination
   2. Profile watched table: # | symbol | name | plan | renews | actions
   ========================================================================= */

/* ---------- 1. messages identity + pager ---------- */

.board-who {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.board-who-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.board-who-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.board-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--line-soft);
}

.pager-btn {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.pager-btn:hover:not(:disabled) {
    border-color: var(--line-strong);
    color: var(--text);
}

.pager-btn:disabled {
    opacity: .35;
    cursor: default;
}

.pager-info {
    font-size: 11px;
    color: var(--muted-deep);
    font-variant-numeric: tabular-nums;
}

/* ---------- 2. profile watched table ---------- */

.watch-table-head,
.watch-table li {
    display: grid;
    grid-template-columns: 26px 64px minmax(0, 1.2fr) 68px 108px minmax(170px, 1fr);
    align-items: center;
    column-gap: 8px;
}

.watch-table-head {
    padding: 0 8px 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.watch-table-head span:nth-child(6) {
    text-align: right;
}

.watch-table li {
    padding: 6px 8px;
    background: var(--bg-row);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.wt-index {
    font-size: 10.5px;
    color: var(--muted-deep);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.watch-table .wt-plan {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
}

.watch-table .wt-plan.none {
    color: var(--muted-deep);
    font-weight: 500;
}

/* The plan is plain text now: no price, no gold pill. */
.watch-table .sub-plan {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 650;
}

.watch-table .wt-renew {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--accent);
    white-space: nowrap;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.watch-table .wt-renew.none {
    color: var(--muted-deep);
    font-weight: 500;
}

.watch-table .wt-actions {
    justify-self: stretch;
    justify-content: flex-end;
    padding-left: 14px;
}

@media (max-width: 760px) {
    .watch-table-head,
    .watch-table li {
        grid-template-columns: 24px 58px minmax(0, 1fr) 58px 92px minmax(136px, auto);
        column-gap: 6px;
    }

    .watch-table .wt-actions .btn-mini,
    .watch-table .wt-actions .btn-pro {
        padding: 3px 7px;
        font-size: 10.5px;
    }
}

/* =========================================================================
   Round 29 (cont.)
   3. Pro dialog: cleaner two column layout, billing options inside Subscribe
   ========================================================================= */

.plan-dialog {
    width: min(680px, calc(100vw - 32px));
    gap: 12px;
}

.plan-paths {
    align-items: stretch;
    gap: 12px;
}

.plan-path {
    padding: 14px;
    gap: 8px;
}

.plan-path-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plan-path-state {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-deep);
}

.plan-path.is-active .plan-path-state {
    color: var(--muted-strong);
}

.plan-path-subscribe.is-active {
    border-color: rgba(255, 176, 46, .3);
    background: linear-gradient(180deg, rgba(255, 176, 46, .05), transparent 60%), var(--bg-sunken);
}

.plan-path-reserve.is-active {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--bg-sunken);
}

.plan-path-reserve.is-active .plan-path-tag {
    color: var(--accent);
}

.plan-path.is-muted {
    opacity: .58;
}

/* Billing options live inside the Subscribe column: compact rows, price on the right. */
.plan-path .plan-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 2px;
}

.plan-path .plan-option {
    padding: 8px 10px;
    gap: 2px;
    text-align: left;
    border-radius: 9px;
}

.plan-path .plan-option-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.plan-path .plan-name {
    font-size: 12px;
}

.plan-path .plan-price {
    font-size: 12px;
}

.plan-path .plan-detail {
    display: none;
}

.plan-path .plan-confirm,
.plan-path .plan-reserve-btn {
    margin-top: auto;
    padding: 9px 10px;
    font-size: 12px;
}

.plan-reserve-hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-deep);
    letter-spacing: .02em;
}

.plan-note {
    margin: 0;
}

.plan-actions {
    padding-top: 0;
}

/* =========================================================================
   Round 30
   1. Profile: small "up to 100" next to the title
   2. Pro dialog: billing options side by side inside Subscribe; distinct badge colour
   ========================================================================= */

.watch-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    height:40px;
}

.watch-title-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

/* Monthly / Yearly sit next to each other inside the Subscribe column. */
.plan-path .plan-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.plan-path .plan-option {
    padding: 7px 8px;
    gap: 3px;
}

.plan-path .plan-option-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.plan-path .plan-name {
    font-size: 11.5px;
}

.plan-path .plan-price {
    font-size: 11.5px;
}

/* "2 months free" uses the site accent (blue), not the gold Subscribe colour. */
.plan-path .plan-badge {
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 8.5px;
    padding: 1px 4px;
}

/* =========================================================================
   Round 31
   1. larger, easier to read Pro panel
   2. Pro preview note above the chart
   ========================================================================= */

.plan-dialog {
    width: min(780px, calc(100vw - 32px));
    gap: 14px;
    padding: 22px 24px 20px;
}

.plan-head h2 {
    font-size: 20px;
}

.plan-sub {
    font-size: 13px;
    line-height: 1.5;
}

.plan-paths {
    gap: 14px;
}

.plan-path {
    padding: 16px;
    gap: 10px;
    border-radius: 14px;
}

.plan-path-tag {
    font-size: 11px;
}

.plan-path-state {
    font-size: 11px;
}

.plan-path-title {
    font-size: 15px;
}

.plan-path-text {
    font-size: 12.5px;
    line-height: 1.55;
}

.plan-path .plan-option {
    padding: 10px 11px;
    gap: 4px;
}

.plan-path .plan-name {
    font-size: 13px;
}

.plan-path .plan-price {
    font-size: 13px;
}

.plan-path .plan-badge {
    font-size: 9.5px;
    padding: 1px 5px;
}

.plan-path .plan-confirm,
.plan-path .plan-reserve-btn {
    padding: 11px 12px;
    font-size: 13.5px;
}

.plan-reserve-hint {
    font-size: 11px;
}

.plan-note {
    font-size: 12px;
    line-height: 1.5;
}

.plan-actions .plan-cancel {
    padding: 9px 18px;
    font-size: 13.5px;
}

/* Preview note: only the Pro call to action, no implementation detail. */
/* =========================================================================
   Round 32
   1. operations console: Messages card + message-history dialog
   2. broadcast audience excludes admins
   ========================================================================= */

.ops-grid {
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.25fr);
}

.ops-row.ops-user-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) 84px 62px 46px;
}

.ops-row.ops-msg-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

.ops-msg-row .ops-msg-action {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ops-msg-card {
    grid-column: 1 / span 2;
}

.ops-composer {
    grid-column: 3;
    grid-row: 1 / span 3;
}

/* Message history dialog */
.ops-msg-veil {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 9, 14, .62);
    backdrop-filter: blur(2px);
}

.ops-msg-dialog {
    width: min(760px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-strong);
}

.ops-msg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ops-msg-head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ops-msg-head-main > div {
    min-width: 0;
}

.ops-msg-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 750;
}

.ops-msg-sub {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--muted);
}

.ops-msg-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.ops-msg-close:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.ops-msg-list {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.ops-msg {
    padding: 7px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--bg-row);
}

.ops-msg.is-system {
    border-color: rgba(255, 176, 46, .3);
    background: rgba(255, 176, 46, .06);
}

.ops-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
}

.ops-msg-kind {
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.ops-msg.is-system .ops-msg-kind {
    color: var(--gold-text);
}

.ops-msg-name {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--text);
}

.ops-msg-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ops-msg-text {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* =========================================================================
   Round 33
   Admin layout: one full-width accounts row, subscriptions + reservations
   side by side, paginated lists, themed native select, reservation cancel.
   ========================================================================= */

.ops-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
}

.ops-accounts-card {
    grid-column: 1;
    grid-row: 1;
}

.ops-two {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.ops-composer {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.ops-row.ops-user-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.65fr) 70px 52px 38px 124px 112px;
}

.ops-user-row .btn-mini {
    white-space: nowrap;
}

.ops-user-row .ops-msg-action {
    display: flex;
    align-items: center;
}

.ops-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ops-pager-btn {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 10.5px;
    cursor: pointer;
}

.ops-pager-btn:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--line-strong);
}

.ops-pager-btn:disabled {
    opacity: .35;
    cursor: default;
}

.ops-pager-info {
    font-size: 10px;
    color: var(--muted-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Native select, themed to match the rest of the console. */
.ops-select {
    width: 100%;
    padding: 9px 30px 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background-color: var(--bg-sunken);
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.ops-select:hover {
    border-color: var(--line-strong);
}

.ops-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ops-select option {
    background: var(--bg-elev);
    color: var(--text);
    font-weight: 500;
}

/* Cancel reservation link inside the Pro dialog. */
.plan-reserve-cancel {
    margin-top: 2px;
    align-self: flex-start;
    padding: 1px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.plan-reserve-cancel:hover:not(:disabled) {
    color: var(--down);
}

.plan-reserve-cancel:disabled {
    opacity: .45;
    cursor: default;
}

/* Reserved stocks show their status in the Profile Plan column. */
.watch-table .wt-plan.is-reserved {
    /*color: var(--accent);*/
}

/* =========================================================================
   Round 34
   1. subscriptions + reservations really side by side
   2. avatars in the operations console and on Messages
   3. official system-notification avatar
   ========================================================================= */

/* Round 25 gave .ops-res-card a two-column span; inside the new .ops-two wrapper
   it must stay in its own half of the row. */
.ops-two .ops-res-card {
    grid-column: auto;
    grid-row: auto;
}

.ops-two .ops-card {
    min-height: 0;
}

/* Account cells: avatar first, then the name / email (operations console). */
.ops-account-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ops-account-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.ops-user-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-account-cell .avatar,
.ops-account-cell .avatar-art {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.ops-msg-head > .avatar,
.ops-msg-head > .avatar-art {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.ops-msg-meta .avatar,
.ops-msg-meta .avatar-art {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

.ops-msg-meta {
    align-items: center;
}

/* Official avatar for system notifications (gold shield, matches the console icon). */
.avatar-art.system-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(239, 184, 79, .38);
    background: #161c26;
    box-shadow: 0 0 0 2px rgba(239, 184, 79, .08);
}

.system-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Messages page: avatar before the author badge / name. */
.msg header {
    align-items: center;
}

.msg-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.msg-avatar .avatar,
.msg-avatar .avatar-art {
    width: 26px;
    height: 26px;
}

.msg-avatar .avatar {
    font-size: 10px;
}

.board-who .avatar,
.board-who .avatar-art {
    flex: 0 0 auto;
}

/* =========================================================================
   Round 35
   1. Profile page adapted to phones and tablets
   2. legal pages used by the payment provider review
   ========================================================================= */

@media (max-width: 900px) {
    .profile-page {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px;
        gap: 12px;
    }

    .profile-hero {
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 14px 16px;
    }

    .profile-hero > .avatar-art,
    .profile-hero > .avatar {
        width: 56px;
        height: 56px;
        font-size: 16px;
    }

    .hero-id {
        flex: 1 1 180px;
    }

    .hero-id h1 {
        font-size: 21px;
    }

    .hero-email {
        font-size: 13.5px;
    }

    .hero-facts {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line-soft);
    }

    .hero-facts dd {
        font-size: 18px;
    }

    .profile-grid-simple {
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        gap: 12px;
    }

    .profile-card {
        flex: 0 0 auto;
        padding: 14px 16px;
    }

    .profile-card .watch-table {
        flex: 0 0 auto;
        overflow: visible;
        padding-right: 0;
    }

    .avatar-picker {
        gap: 8px;
    }

    .avatar-choice {
        padding: 8px 10px;
    }

    .avatar-choice .avatar.lg,
    .avatar-choice .avatar-art.lg {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 620px) {
    .profile-page {
        padding: 10px;
        gap: 10px;
    }

    .profile-hero {
        padding: 12px;
        gap: 10px 12px;
    }

    .profile-hero > .avatar-art,
    .profile-hero > .avatar {
        width: 48px;
        height: 48px;
        font-size: 14px;
    }

    .hero-id {
        flex: 1 1 140px;
    }

    .hero-id h1 {
        font-size: 19px;
    }

    .hero-email {
        font-size: 12.5px;
    }

    .hero-meta {
        font-size: 12px;
    }

    .hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    .hero-facts dd {
        font-size: 16px;
    }

    .hero-facts dd em {
        font-size: 11px;
    }

    .profile-card {
        padding: 12px;
    }

    .profile-card h2 {
        font-size: 16px;
    }

    .watch-table-head {
        display: none;
    }

    .watch-table li {
        grid-template-columns: minmax(0, 1fr) 64px 94px;
        row-gap: 5px;
        padding: 7px 8px;
    }

    .watch-table .wt-index,
    .watch-table .wt-name {
        display: none;
    }

    .watch-table .wt-plan {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }

    .watch-table .wt-renew {
        grid-column: 3;
        grid-row: 1;
    }

    .watch-table .wt-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
    }

    .profile-foot {
        justify-content: stretch;
    }

    .profile-foot .btn-quiet {
        width: 100%;
    }
}

/* Legal pages: same card as /legal, slightly tighter on phones. */
.legal-kicker {
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.legal h2 + p,
.legal h2 + ul {
    margin-top: 2px;
}

.legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.65;
}

.legal li + li {
    margin-top: 4px;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.legal-links a {
    color: var(--gold-text);
    font-weight: 650;
    text-decoration: none;
}

.legal-links a:hover {
    text-decoration: underline;
}

.legal-strip-links {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-strip-links a {
    color: var(--gold-text);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    font-size: 10.5px;
}

.legal-strip-links a:hover {
    text-decoration: underline;
}

@media (max-width: 620px) {
    .legal {
        padding: 10px;
    }

    .legal-card {
        padding: 16px 14px;
    }

    .legal h1 {
        font-size: 22px;
    }

    .legal-strip {
        flex-wrap: wrap;
    }

    .legal-strip-text {
        flex: 1 1 100%;
        white-space: normal;
    }

    .legal-strip-links {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}


/* =========================================================================
   Round 36
   1. blurred placeholder for a stock without price history
   2. roomier Pro setting panel, aligned to the chart area
   ========================================================================= */

.chart-veil.chart-empty {
    padding: 0;
    overflow: hidden;
    background: var(--bg-elev);
    color: var(--text);
}

.chart-empty-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}

.chart-empty-copy {
    position: relative;
    z-index: 1;
    width: min(520px, 84%);
    padding: 22px 26px;
    text-align: center;
    background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(5px);
}

.chart-empty-copy strong {
    display: block;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: .1px;
}

.chart-empty-copy p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim);
}

.chart-empty-copy b {
    color: var(--gold-text);
    font-weight: 750;
}

/* =========================================================================
   Round 36 (cont.)
   3. avatar picker inside the profile hero (next to name, not next to facts)
   4. messages: history on the left, send form on the right; HELLO before avatar
   ========================================================================= */

.avatar.md {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.avatar-art.md {
    width: 34px;
    height: 34px;
}

.hero-avatar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-right: 0;
}

.hero-avatar-label {
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-deep);
}

.hero-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 372px;
}

.hero-picker .avatar-choice {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-sunken);
    color: var(--muted);
    cursor: pointer;
}

.hero-picker .avatar-choice:hover {
    border-color: var(--chip-line);
    background: var(--chip-strong);
}

.hero-picker .avatar-choice.on {
    border-color: var(--accent);
    background: var(--chip-strong);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-picker .avatar-choice .avatar.md,
.hero-picker .avatar-choice .avatar-art.md {
    width: 32px;
    height: 32px;
}

@media (max-width: 1180px) {
    .profile-hero {
        flex-wrap: wrap;
    }

    .hero-avatar {
        order: 3;
        flex: 1 1 100%;
        margin-right: 0;
    }

    .hero-facts {
        order: 4;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .hero-picker {
        max-width: none;
    }
}

/* Messages: history fills the left, the send form sits on the right. */
.board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.board-card {
    grid-column: 1;
    grid-row: 1;
}

.board-form {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 900px) {
    .board-form {
        grid-column: 1;
        grid-row: 1;
    }

    .board-card {
        grid-column: 1;
        grid-row: 2;
    }
}


/* Round 37: the no-data placeholder reads better slightly above the vertical centre. */
.chart-veil.chart-empty {
    padding: 0 0 104px;
}

/* Round 37 final overrides (later legacy rules set margin-top:auto / gap:10,
   so these need to be last in the cascade). */
.plan-path {
    padding: 16px 16px 20px;
    gap: 10px;
}

.plan-path .plan-confirm,
.plan-path .plan-reserve-btn {
    margin-top: 20px;
    margin-bottom: 12px;
}

/* =========================================================================
   Round 40
   1. choose-avatar grid (12 presets = 2 rows of 6) + separate initials option
   2. preview watermark / banner on Profile and in the Pro dialog
   3. subscriber / reservation counters in the Pro dialog
   4. read-only indicator settings with small iOS-style switches
   ========================================================================= */

.hero-picker {
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 6px;
    max-width: none;
}

.avatar-initials {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.avatar-initials .avatar.md {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

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

.avatar-initials.on {
    color: var(--text);
    font-weight: 650;
}

.avatar-initials.on .avatar {
    border: 2px solid var(--accent);
}

.preview-banner {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px dashed color-mix(in srgb, var(--gold) 32%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold) 5%, transparent);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
}

.preview-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 176, 46, .35);
    background: rgba(255, 176, 46, .1);
    color: var(--gold-text);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.profile-page {
    position: relative;
}

.profile-page::before {
    content: "PREVIEW";
    position: absolute;
    top: 20%;
    right: 2%;
    z-index: 0;
    font-size: clamp(80px, 11vw, 150px);
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--text);
    opacity: .025;
    transform: rotate(-16deg);
    pointer-events: none;
    white-space: nowrap;
}

.profile-page > * {
    position: relative;
    z-index: 1;
}

.plan-dialog::after {
    content: "PREVIEW";
    position: absolute;
    right: 18px;
    bottom: 54px;
    font-size: 60px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--text);
    opacity: .03;
    transform: rotate(-12deg);
    pointer-events: none;
}

.plan-preview-note {
    display: block;
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
}

.plan-count {
    margin: 7px 0 0;
    font-size: 11px;
    text-align: center;
    color: var(--muted);
}

.plan-reserve-btn + .plan-count {
    text-align: left;
}

.ind-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: .9;
}

.ind-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text);
}

.ind-switch.on {
    background: var(--accent);
}

.ind-switch.on::after {
    left: 14px;
}

.ind-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-sunken);
    color: var(--text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ind-value + span,
.ind-field .ind-value {
    width: 100%;
}

/* Round 40: the desktop board columns were re-declared after the old 900px media query,
   which squeezed Messages into two tiny columns on phones. Restore the single column here. */
@media (max-width: 900px) {
    .board {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
}