/* ============================================================================
   EXCHANGE — "AFTER HOURS"  ·  design system
   A gold-on-ink trading terminal. One accent (gold = money); green/red are
   reserved strictly for market direction. Dark theme = after-hours terminal,
   light theme = a warm financial-broadsheet. Type: Bricolage Grotesque
   (display), Hanken Grotesk (UI/body), IBM Plex Mono (all numerics).
   Structural layout rules (grids / overflow / chart sizing) are preserved from
   the original; only the visual layer is reimagined.
   ========================================================================== */

:root,
[data-theme="dark"] {
    --bg-primary:     #0b0b0f;
    --bg-secondary:   #131319;
    --bg-tertiary:    #1c1c24;
    --bg-elevated:    #20202a;
    --border:         #2a2a35;
    --border-strong:  #3b3b49;
    --text-primary:   #f3efe7;
    --text-secondary: #9c968b;
    --text-muted:     #5d594f;

    --green:        #2fd28a;
    --green-dim:    rgba(47, 210, 138, .14);
    --red:          #ff5a54;
    --red-dim:      rgba(255, 90, 84, .14);

    /* Gold is the single brand accent. `--blue` is kept as an alias pointing at
       the accent so every legacy link/primary in markup turns gold for free. */
    --accent:       #f7b500;
    --accent-hi:    #ffc62e;
    --accent-soft:  rgba(247, 181, 0, .14);
    --accent-ink:   #15120a;            /* text that sits ON the gold accent   */
    --blue:         var(--accent);

    --grid-line:    rgba(255, 255, 255, .025);
    --glow:         rgba(247, 181, 0, .35);
    --shadow-card:  0 10px 30px -12px rgba(0, 0, 0, .7);
    --shadow-pop:   0 16px 48px -8px rgba(0, 0, 0, .72);

    --mono:         'IBM Plex Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --display:      'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
    --body:         'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="light"] {
    --bg-primary:     #f4eee1;   /* warm broadsheet paper */
    --bg-secondary:   #fbf7ee;
    --bg-tertiary:    #ece4d3;
    --bg-elevated:    #fffdf7;
    --border:         #ddd2bc;
    --border-strong:  #c8bca0;
    --text-primary:   #1b1813;
    --text-secondary: #6c6555;
    --text-muted:     #a59c87;

    --green:        #0e8a4f;
    --green-dim:    rgba(14, 138, 79, .14);
    --red:          #c5362c;
    --red-dim:      rgba(197, 54, 44, .12);

    --accent:       #a86f00;
    --accent-hi:    #c98700;
    --accent-soft:  rgba(168, 111, 0, .12);
    --accent-ink:   #fdf8ec;
    --blue:         var(--accent);

    --grid-line:    rgba(0, 0, 0, .03);
    --glow:         rgba(168, 111, 0, .28);
    --shadow-card:  0 10px 26px -14px rgba(60, 44, 8, .5);
    --shadow-pop:   0 18px 46px -10px rgba(60, 44, 8, .42);
}

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

html, body {
    height: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.5;
    /* Layered atmosphere: a faint gold bloom up top + a hairline terminal grid,
       all over the ink base. Subtle enough to keep dense data legible. */
    background:
        radial-gradient(1100px 520px at 82% -12%, var(--accent-soft), transparent 62%),
        linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 34px,
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 34px 100%,
        var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#app { height: 100vh; display: flex; flex-direction: column; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ── Custom scrollbars ───────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* ── Splash ─────────────────────────────── */
.splash {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.splash-logo {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.01em;
    text-shadow: 0 0 32px var(--glow);
    animation: splash-pulse 2.2s ease-in-out infinite;
}
.splash-tag {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .34em;
    color: var(--text-secondary);
}
.splash-loader {
    width: 120px; height: 2px;
    margin-top: 6px;
    background: var(--bg-tertiary);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.splash-loader::after {
    content: "";
    position: absolute; inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: splash-sweep 1.1s ease-in-out infinite;
}
@keyframes splash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes splash-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ── Blazor error UI ─────────────────────── */
#blazor-error-ui {
    background: #2a0d0d;
    bottom: 0;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, .5);
    color: #ffb3ad;
    display: none;
    padding: .7rem 1rem;
    position: fixed;
    left: 0; right: 0;
    z-index: 1000;
    border-top: 1px solid var(--red);
    font-size: 12px;
}
#blazor-error-ui .reload { color: var(--accent); margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
#blazor-error-ui.blazor-error-boundary { display: block; }

/* ── App shell layout ────────────────────── */
.app-shell {
    display: grid;
    grid-template-rows: 48px 1fr;
    height: 100vh;
    overflow: hidden;
    animation: shell-in .5s ease both;
}
@keyframes shell-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Ticker bar ──────────────────────────── */
.ticker-bar {
    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    padding: 0 16px;
    position: relative;
}
.ticker-bar::after {
    /* thin gold underline that reads as the terminal's status rail */
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
}
.ticker-logo {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.01em;
    margin-right: 22px;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0 18px var(--glow);
}
.ticker-items {
    display: flex;
    overflow: hidden;
    flex: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}
/* Seamless marquee: the track holds two identical passes and slides -50%. */
.ticker-track {
    display: flex;
    gap: 4px;
    width: max-content;
    animation: ticker-scroll 48s linear infinite;
}
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background .12s, border-color .12s;
}
.ticker-item:hover { background: var(--bg-tertiary); border-color: var(--border); }
.ticker-symbol { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.ticker-price  { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ticker-change { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Auth section ────────────────────────── */
.auth-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-right: 8px;
    margin-left: 16px;
}
.auth-profile {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 8px 3px 4px;
    border-radius: 99px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background .12s, border-color .12s;
}
.auth-profile:hover { background: var(--bg-tertiary); border-color: var(--border-strong); }
.auth-user {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-btn {
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 13px;
    background: transparent;
    color: var(--text-primary);
    transition: transform .1s, background .12s, border-color .12s, box-shadow .12s;
}
.auth-btn:hover { transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0); }
.auth-btn-primary {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
    box-shadow: 0 2px 14px -4px var(--glow);
}
.auth-btn-primary:hover { background: var(--accent-hi); box-shadow: 0 4px 20px -4px var(--glow); }
.auth-btn-secondary { background: transparent; color: var(--text-primary); }
.auth-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.auth-btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.theme-toggle {
    flex-shrink: 0;
    margin-left: 4px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 6px 9px;
    transition: background .12s, color .12s, border-color .12s, transform .2s;
}
.theme-toggle:hover { background: var(--bg-tertiary); color: var(--accent); border-color: var(--accent); transform: rotate(18deg); }

/* ── Nav links ───────────────────────────── */
.ticker-nav { display: flex; gap: 2px; margin-right: 6px; flex-shrink: 0; }
.ticker-nav-link {
    position: relative;
    background: none;
    border: none;
    border-radius: 7px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.ticker-nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ticker-nav-link.active { color: var(--accent); }
.ticker-nav-link.active::after {
    content: "";
    position: absolute; left: 11px; right: 11px; bottom: 1px; height: 2px;
    background: var(--accent); border-radius: 2px;
    box-shadow: 0 0 10px var(--glow);
}
.ticker-nav-yolo { font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.ticker-nav-yolo:hover { color: var(--accent-hi); }

/* ── Page body ───────────────────────────── */
.page-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* ── Section labels (shared eyebrow style) ── */
.trending-header,
.watchlist-header,
.chart-section h3,
.book-section h3,
.chat-section h3,
.portfolio-section-header,
.chart-section-label,
.onboarding-picker-label {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-secondary);
}

/* ── Home page ───────────────────────────── */
.home-page {
    padding: 26px 30px 40px;
    overflow-y: auto;
    flex: 1;
}
.trending-header {
    margin: 22px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.trending-header::before {
    /* small gold tick that anchors the eyebrow */
    content: "";
    width: 18px; height: 2px; background: var(--accent); border-radius: 2px;
    box-shadow: 0 0 8px var(--glow);
}
.trending-header::after {
    content: "";
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* ── Home hero + market pulse ────────────── */
.hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 26px;
    align-items: stretch;
    margin-bottom: 30px;
}
.hero-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-eyebrow {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 9px;
}
.hero-eyebrow::before {
    content: "\25B2"; /* ▲ */
    font-size: 10px;
    filter: drop-shadow(0 0 8px var(--glow));
}
.hero-title {
    font-family: var(--display);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.03em;
    margin: 0 0 14px;
    color: var(--text-primary);
}
.hero-accent {
    color: var(--accent);
    text-shadow: 0 0 38px var(--glow);
}
.hero-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 52ch;
    margin: 0 0 22px;
}
.hero-main .search-wrap { max-width: 440px; }

.market-pulse {
    background:
        radial-gradient(120% 90% at 100% 0, var(--accent-soft), transparent 55%),
        var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-card);
}
.pulse-head { display: flex; align-items: center; justify-content: space-between; }
.pulse-title {
    font-family: var(--display);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--text-secondary);
}
.pulse-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .12em; color: var(--green);
}
.pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 0 var(--green);
    animation: pulse-blink 1.8s ease-out infinite;
}
@keyframes pulse-blink {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.pulse-index { display: flex; flex-direction: column; gap: 2px; }
.pulse-index-value {
    font-family: var(--mono);
    font-size: 36px; font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pulse-index.up .pulse-index-value   { color: var(--green); }
.pulse-index.down .pulse-index-value { color: var(--red); }
.pulse-index-label { font-size: 11px; color: var(--text-muted); }

.pulse-breadth { display: flex; flex-direction: column; gap: 7px; }
.breadth-bar {
    display: flex; height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}
.breadth-up   { background: var(--green); transition: width .4s ease; }
.breadth-down { background: var(--red);   transition: width .4s ease; }
.breadth-legend {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
}
.pulse-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--border);
}
.pulse-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pulse-stat-label {
    font-family: var(--display); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
}
.pulse-stat-value {
    font-family: var(--mono); font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Home movers ─────────────────────────── */
.movers {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-bottom: 30px;
}
.movers-col { display: flex; flex-direction: column; }
.movers-col .trending-header { margin: 0 0 10px; }
/* Pack each group's rows into compact tiles that fill the column width, instead
   of one sparse full-width row each (which stranded space mid-column). */
.mover-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.mover-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.mover-row:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.mover-thumb {
    width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}
.mover-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); color: var(--text-secondary);
    font-family: var(--display); font-weight: 800; font-size: 14px;
}
.mover-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mover-ticker { font-family: var(--display); font-weight: 800; font-size: 14px; }
.mover-name { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-nums { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; flex-shrink: 0; }
.mover-price { font-family: var(--mono); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.mover-pct { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .movers { grid-template-columns: 1fr; }
}

/* ── Stock card ──────────────────────────── */
.stock-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.stock-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-soft);
}
/* terminal corner-tick that appears on hover */
.stock-card::after {
    content: "";
    position: absolute; top: 9px; right: 9px;
    width: 11px; height: 11px;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    opacity: 0;
    transition: opacity .16s;
}
.stock-card:hover::after { opacity: 1; }
.stock-card-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
}
.stock-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120px 120px at 50% 30%, var(--accent-soft), transparent 70%),
        var(--bg-tertiary);
    color: var(--text-muted);
    font-family: var(--display);
    font-size: 44px;
    font-weight: 800;
}
.stock-card-info {
    padding: 12px 14px 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.stock-card-ticker { font-family: var(--display); font-weight: 800; font-size: 15px; flex: 1; letter-spacing: -.01em; }
.stock-card-price  { font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-card-pct    { font-family: var(--mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-card-chart  { padding: 0 14px 12px; }

/* ── Search bar ──────────────────────────── */
.search-wrap {
    position: relative;
    max-width: 480px;
    width: 100%;
}
.search-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--body);
    font-size: 13px;
    padding: 9px 14px 9px 34px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239c968b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-overlay {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    overflow: hidden;
    z-index: 200;
    box-shadow: var(--shadow-pop);
}
.search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .1s;
}
.search-result:hover { background: var(--accent-soft); }
.search-result-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.search-result-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: var(--display);
    font-weight: 800;
    font-size: 13px;
}
.search-result-ticker { font-family: var(--display); font-weight: 800; font-size: 13px; min-width: 60px; }
.search-result-name   { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.search-result-price  { font-family: var(--mono); font-size: 12px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Watchlist page ──────────────────────── */
.watchlist-page {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
}
.watchlist-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.watchlist-panels {
    display: grid;
    grid-template-columns: 240px 1fr;
    overflow: hidden;
    min-height: 0;
}

/* ── Stock detail page ───────────────────── */
.stock-detail-page {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
}
.stock-detail-search {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* ── Watchlist ───────────────────────────── */
.watchlist {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.watchlist-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.watchlist-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background .1s, border-color .1s;
}
.watchlist-item:hover { background: var(--bg-tertiary); }
.watchlist-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
.watchlist-thumb {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    align-self: center;
}
.watchlist-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
}
.watchlist-ticker { font-family: var(--display); font-weight: 800; font-size: 13px; grid-row: 1; grid-column: 2; }
.watchlist-name   { font-size: 11px; color: var(--text-secondary); grid-row: 2; grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watchlist-price  { font-family: var(--mono); font-size: 13px; font-weight: 600; grid-row: 1; grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.watchlist-pct    { font-family: var(--mono); font-size: 11px; grid-row: 2; grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Detail panel ────────────────────────── */
.detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Symbol header ───────────────────────── */
.symbol-header {
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px 24px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, var(--bg-secondary), transparent);
}
.symbol-identity {
    order: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.symbol-name-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.symbol-ticker { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.symbol-full-name { font-size: 12px; color: var(--text-secondary); }
.symbol-price-block { order: 2; display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
.symbol-price  { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.symbol-change { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.symbol-meme {
    flex-shrink: 0;
    height: 66px;
    width: 66px;
    border-radius: 13px;
    object-fit: cover;
    border: 1px solid var(--border);
}
.symbol-meme-large { height: 84px; width: 84px; }

/* Terminal stats sit inline, just right of the ticker/name (order: 1, between
   the identity and the right-aligned price). */
.symbol-stats {
    order: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 4px;
}
.symbol-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 13px;
    min-width: 72px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.symbol-stat-label {
    font-family: var(--display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}
.symbol-stat-value {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.symbol-about {
    order: 3;
    flex-basis: 100%;
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 2px;
}
.symbol-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 78ch;
}
.symbol-lore-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.symbol-lore-link:hover { text-decoration: underline; }

/* ── Chart + book area ───────────────────── */
.chart-section {
    padding: 16px 20px 16px 26px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
}
.book-section {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.book-section h3 { margin-bottom: 10px; flex-shrink: 0; }
/* The table fills the remaining height; its rows distribute that height so the
   ladder scales to fit — no scrollbar, no empty padding rows. */
.book-section .book { flex: 1 1 0; min-height: 0; }

/* ── Chat section ────────────────────────── */
.chat-section {
    padding: 16px 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.chat-section h3 { flex-shrink: 0; }

.chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}
.chat-msg { display: flex; gap: 9px; align-items: flex-start; }
.chat-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-msg-body { min-width: 0; flex: 1; }
.chat-msg-head { display: flex; align-items: baseline; gap: 7px; }
.chat-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.chat-time { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.chat-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-gif {
    margin-top: 5px;
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    display: block;
    border: 1px solid var(--border);
}

.chat-composer {
    flex-shrink: 0;
    display: flex;
    gap: 7px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.chat-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-family: var(--body);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.chat-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-input::placeholder { color: var(--text-muted); }
.chat-gif-btn, .chat-send {
    flex-shrink: 0;
    padding: 8px 13px;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .12s, color .12s, transform .1s;
}
.chat-gif-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat-gif-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chat-send { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chat-send:hover:not(:disabled) { background: var(--accent-hi); transform: translateY(-1px); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }

.chat-gif-popover {
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    margin-bottom: 8px;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.chat-locked {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border);
}
.chat-locked-text { font-size: 12px; color: var(--text-secondary); }
.chat-locked-actions { display: flex; gap: 8px; }

/* "$TICKER" cashtag + hover overlay */
.cashtag-wrap { position: relative; display: inline-block; }
.cashtag {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.cashtag:hover { text-decoration: underline; }
.cashtag-overlay {
    position: fixed;
    transform: translateY(calc(-100% - 6px));
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
}
.cashtag-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.cashtag-overlay-body { display: flex; flex-direction: column; gap: 1px; }
.cashtag-overlay-ticker { font-family: var(--display); font-size: 13px; font-weight: 800; color: var(--text-primary); }
.cashtag-overlay-name {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.cashtag-overlay-prices { display: flex; gap: 6px; align-items: baseline; margin-top: 2px; }
.cashtag-overlay-price { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cashtag-overlay-change { font-size: 11px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Skeleton loading ────────────────────── */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}
.skeleton-block {
    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-elevated), var(--bg-tertiary));
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Color utilities ─────────────────────── */
.up   { color: var(--green); }
.down { color: var(--red); }
.muted, .text-muted { color: var(--text-secondary); }

/* ── Sparkline ───────────────────────────── */
.sparkline-wrap { width: 100%; overflow: hidden; }

/* ── Order book ──────────────────────────────
   Three flex sections so the SPREAD bar is pinned to the vertical centre:
   asks fill the top half (hugging the spread from above), bids the bottom
   half (hugging it from below). No scrollbar — deepest levels clip past the
   half if the book is unusually deep for the height. */
.book {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.book-head {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 0 4px 7px;
}
.book-asks, .book-bids {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.book-asks { justify-content: flex-end; }    /* best ask rests against the spread */
.book-bids { justify-content: flex-start; }  /* best bid rests against the spread */
.book-row {
    display: flex;
    justify-content: space-between;
    padding: 2.5px 4px;
    flex-shrink: 0;
}
.book-row-ask { color: var(--red); }
.book-row-bid { color: var(--green); }
.book-divider {
    flex-shrink: 0;
    text-align: center;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .18em;
    padding: 5px 4px;
    margin: 3px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Balance display ─────────────────────── */
.balance-display {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--accent-soft);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Watchlist account summary ───────────── */
.watchlist-search-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.watchlist-account-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    flex-shrink: 0;
    margin-left: auto;
}
.watchlist-balance {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Order section ───────────────────────── */
.detail-panel {
    display: grid;
    grid-template-rows: auto 1fr;   /* symbol header, then the trading body */
    overflow: hidden;
    background: var(--bg-primary);
}

/* Trading body: a wide main column (chart on top, trade strip below) beside a
   tall, narrow chat rail — the message feed shows many lines without scrolling
   while the order ticket + book sit together under the chart. */
.detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;   /* main | chat rail */
    min-height: 0;
    overflow: hidden;
}
.detail-center {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;  /* chart+book row fills; order bar is short */
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border);
    overflow: hidden;
}
/* Top of the main column: the price chart paired with the order book beside it
   (they share height, so the chart stays tall). */
.chart-book-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
/* Right rail now hosts the chat, filling its full height. */
.detail-rail {
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}
.detail-chat { display: flex; flex-direction: column; }
.detail-chat .chat-section { flex: 1; min-height: 0; }

.order-section {
    background: var(--bg-secondary);
    min-height: 0;
    overflow: visible;   /* let the floating confirmation pill rise above the bar */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* As a full-width bar under the chart, the ticket spreads horizontally to use the
   width: side/type toggles, qty/price inputs, total, then submit anchored right. */
.order-section .order-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
.order-section .order-panel .order-submit { margin-left: auto; }
.order-locked { position: relative; }
.order-locked-preview {
    filter: grayscale(1);
    opacity: .3;
    pointer-events: none;
    user-select: none;
}
/* Horizontal layout matches the short order-bar's shape so the prompt fits inside
   it (copy on the left, actions on the right) instead of overflowing below. */
.order-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    text-align: left;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
    backdrop-filter: blur(2px);
}
.order-locked-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.order-locked-title { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--text-primary); }
.order-locked-subtitle { font-size: 12px; color: var(--text-secondary); }
.order-locked-actions { display: flex; gap: 8px; flex-shrink: 0; }
.order-locked-actions .auth-btn { padding: 7px 16px; font-size: 13px; }
.holdings-badge {
    align-self: flex-start;   /* size to content instead of stretching the bar width */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin: 12px 26px 0;
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}
/* Placeholder state (no shares yet) — keeps the slot so a first buy doesn't shift. */
.holdings-badge-empty {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--border);
}
.order-panel {
    position: relative;   /* anchor for the floating confirmation pill */
    padding: 12px 26px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.order-toggle-group {
    display: flex;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
}
.order-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    transition: background .1s, color .1s;
}
.order-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.order-toggle-buy-active  { background: var(--green-dim) !important; color: var(--green) !important; font-weight: 700; }
.order-toggle-sell-active { background: var(--red-dim)   !important; color: var(--red)   !important; font-weight: 700; }
.order-toggle-kind-active { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 700; }
.order-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.order-field { display: flex; align-items: center; gap: 6px; }
.order-field-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.order-input {
    width: 96px;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--mono);
    font-size: 12px;
    padding: 6px 9px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-variant-numeric: tabular-nums;
}
.order-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.order-input::-webkit-inner-spin-button,
.order-input::-webkit-outer-spin-button { opacity: .5; }
.order-submit {
    align-self: flex-start;
    min-width: 168px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 9px 20px;
    color: #fff;
    transition: opacity .12s, transform .1s, box-shadow .12s;
}
.order-submit:disabled { opacity: .5; cursor: default; }
.order-submit:hover:not(:disabled) { transform: translateY(-1px); }
.order-submit-buy  { background: var(--green); box-shadow: 0 4px 16px -6px var(--green); }
.order-submit-sell { background: var(--red);   box-shadow: 0 4px 16px -6px var(--red); }
.order-total-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-height: 18px;
    flex-wrap: wrap;
}
.order-total-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.order-total-value { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.order-total-fetching { color: var(--text-muted); }
.order-total-warning { font-size: 11px; color: var(--red); margin-left: 4px; }
/* Floating confirmation/error pill — absolutely positioned above the bar so it
   never reflows the controls while the user is interacting. */
.order-message {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 24px;
    margin: 0;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    white-space: nowrap;
    box-shadow: var(--shadow-pop);
    z-index: 30;
    pointer-events: none;
    animation: order-toast .26s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes order-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.order-success { background: var(--green-dim); border: 1px solid color-mix(in srgb, var(--green) 42%, transparent); color: var(--green); }
.order-error   { background: var(--red-dim);   border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);   color: var(--red); }

/* ── Portfolio page ──────────────────────── */
.portfolio-page {
    padding: 26px 30px 40px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.portfolio-loading { color: var(--text-secondary); padding: 40px 0; text-align: center; }

/* ── Portfolio hero ──────────────────────── */
.pf-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 22px;
    align-items: stretch;
}
.pf-hero-main {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 24px 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(130% 120% at 0 0, var(--accent-soft), transparent 55%),
        var(--bg-secondary);
    box-shadow: var(--shadow-card);
}
.pf-hero-label {
    font-family: var(--display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: var(--text-secondary);
}
.pf-hero-value {
    font-family: var(--mono); font-size: clamp(34px, 4vw, 48px); font-weight: 700;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-primary);
}
.pf-hero-pnl {
    font-family: var(--mono); font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pf-hero-pnl.up { color: var(--green); }
.pf-hero-pnl.down { color: var(--red); }
.pf-hero-pnl-pct { font-size: 13px; opacity: .85; }
.pf-hero-pnl-tag {
    font-family: var(--display); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-muted); border: 1px solid var(--border); border-radius: 99px;
    padding: 2px 8px;
}
.pf-hero-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

/* ── Portfolio allocation bar ────────────── */
.pf-alloc { display: flex; flex-direction: column; gap: 12px; }
.alloc-bar {
    display: flex; height: 16px; border-radius: 99px; overflow: hidden;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.alloc-seg { height: 100%; transition: width .4s ease, filter .12s; }
.alloc-seg:hover { filter: brightness(1.15); }
.alloc-seg.alloc-cash { background: repeating-linear-gradient(45deg, var(--text-muted), var(--text-muted) 4px, transparent 4px, transparent 8px); opacity: .55; }
.alloc-legend {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.alloc-legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.alloc-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.alloc-swatch.alloc-cash { background: repeating-linear-gradient(45deg, var(--text-muted), var(--text-muted) 3px, transparent 3px, transparent 6px); }
.alloc-legend-label { font-family: var(--display); font-weight: 700; }
.alloc-legend-pct { font-family: var(--mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .pf-hero { grid-template-columns: 1fr; }
    .pf-hero-cards { grid-template-columns: 1fr; }
}

.portfolio-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}
.portfolio-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}
.portfolio-card::before {
    /* gold spine on the left edge of each metric tile */
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent); opacity: .5;
}
.portfolio-card-label {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-secondary);
}
.portfolio-card-value { font-family: var(--mono); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.portfolio-card-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.portfolio-empty { color: var(--text-secondary); padding: 40px 0; text-align: center; }
.portfolio-empty a { color: var(--accent); text-decoration: none; font-weight: 600; }
.portfolio-empty a:hover { text-decoration: underline; }
.portfolio-section-header { margin-bottom: 12px; }
.portfolio-holdings { display: flex; flex-direction: column; }
.holdings-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.holdings-table thead th {
    color: var(--text-muted);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 0 8px 9px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.holdings-table thead th:first-child { text-align: left; }
.holdings-table tbody td {
    padding: 11px 8px;
    text-align: right;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.holdings-table tbody tr { transition: background .1s; }
.holdings-table tbody tr:hover { background: var(--bg-secondary); }
.holdings-table tbody td:first-child { text-align: left; }
.holdings-ticker { font-family: var(--display); font-weight: 800; color: var(--accent); text-decoration: none; }
.holdings-ticker:hover { text-decoration: underline; }

/* ── Orders header + filter tabs ─────────── */
.orders-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.orders-head .portfolio-section-header { margin: 0; }
.seg-tabs {
    display: inline-flex; gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 9px; padding: 3px;
}
.seg-tab {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; border-radius: 6px;
    color: var(--text-secondary); cursor: pointer;
    font-family: var(--body); font-size: 12px; font-weight: 600;
    padding: 5px 12px; transition: background .1s, color .1s;
}
.seg-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.seg-tab.active { background: var(--accent-soft); color: var(--accent); }
.seg-tab-count {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 99px;
    background: var(--bg-tertiary); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.seg-tab.active .seg-tab-count { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }

/* ── Side + status badges ────────────────── */
.side-badge, .status-badge {
    display: inline-block; font-family: var(--display);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 9px; border-radius: 99px; border: 1px solid transparent;
}
.side-badge.up   { color: var(--green); background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.side-badge.down { color: var(--red);   background: var(--red-dim);   border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.status-open      { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.status-filled    { color: var(--green);  background: var(--green-dim);  border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.status-cancelled { color: var(--red);    background: var(--red-dim);    border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.status-other     { color: var(--text-secondary); background: var(--bg-tertiary); border-color: var(--border); }

/* ── Orders table: thumbnail + row actions ── */
.order-thumb-cell { width: 32px; padding-right: 0 !important; }
.order-thumb { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; display: block; }
.order-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
}
.order-actions-cell { position: relative; width: 32px; }
.order-kebab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 7px;
}
.order-kebab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.order-menu-backdrop { position: fixed; inset: 0; z-index: 90; }
.order-menu {
    position: absolute;
    top: 100%;
    right: 8px;
    z-index: 100;
    min-width: 144px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    padding: 5px;
}
.order-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--body);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 7px;
}
.order-menu-item:hover { background: var(--bg-tertiary); }
.order-menu-danger { color: var(--red); }

/* ── Confirm modal ─────────────────────────── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    backdrop-filter: blur(6px);
    animation: fade-in .18s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.confirm-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: var(--shadow-pop);
    animation: pop-in .2s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.confirm-title { font-family: var(--display); font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: .5rem; }
.confirm-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.25rem; }
.confirm-body strong { color: var(--text-primary); }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.confirm-actions .auth-btn { padding: 9px 15px; font-size: 13px; }

/* ── Trades table ────────────────────────── */
.trades-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 12px;
    overflow-y: auto;
    font-variant-numeric: tabular-nums;
}
.trades-table thead th {
    color: var(--text-muted);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 0 6px 6px;
    text-align: right;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
}
.trades-table thead th:first-child { text-align: left; }
.trades-table tbody td {
    padding: 3px 6px;
    text-align: right;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.trades-table tbody td:first-child { text-align: left; color: var(--text-secondary); }
.trades-scroll { overflow-y: auto; flex: 1; min-height: 0; }

/* ── Candle / portfolio charts ───────────── */
.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.chart-controls { display: flex; align-items: center; gap: 10px; }
.chart-type-btns,
.chart-window-btns {
    display: flex;
    gap: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 2px;
}
.chart-window-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    transition: background .1s, color .12s;
}
.chart-window-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.chart-window-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.tv-chart { width: 100%; }
.tv-chart-candle    { flex: 1; min-height: 0; }
.tv-chart-area      { height: 160px; }
.tv-chart-sparkline { height: 80px;  }
.portfolio-chart-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Mobile / narrow viewports ───────────────
   Desktop locks to 100vh; below the tablet breakpoint we switch to natural
   document scrolling and single-column stacking. */
@media (max-width: 768px) {
    html, body { overflow: auto; height: auto; background-attachment: fixed; }
    #app { height: auto; min-height: 100vh; }
    .app-shell {
        height: auto;
        min-height: 100vh;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        overflow: visible;
    }
    .page-body { overflow: visible; min-width: 0; }

    /* Phone header redesigned into three tidy rows instead of a wrapping jumble:
         row 1 — logo (left) + compact account cluster + theme toggle (right)
         row 2 — nav as a single horizontally-scrollable strip (no wrap)
         row 3 — the live ticker, still rolling like on desktop */
    .ticker-bar { flex-wrap: wrap; gap: 8px 8px; padding: 8px 12px; overflow: hidden; }
    .ticker-logo { margin-right: auto; font-size: 1rem; order: 0; }

    .auth-section { margin-left: 0; margin-right: 0; order: 1; gap: 6px; }
    .theme-toggle { margin-left: 2px; order: 2; }
    /* Trim the account cluster so the whole thing fits on row 1: the avatar alone
       identifies the user (standard mobile pattern), so drop the name text. */
    .balance-display { font-size: 12px; padding: 4px 8px; }
    .auth-user { display: none; }
    .auth-profile { padding: 3px; }
    .auth-btn { padding: 6px 10px; }

    .ticker-nav {
        order: 3;
        flex: 0 0 100%;
        flex-wrap: nowrap;
        margin-right: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;            /* Firefox: hide the scrollbar, keep scroll */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .ticker-nav::-webkit-scrollbar { display: none; }   /* WebKit/Blink */
    .ticker-nav-link { flex-shrink: 0; }

    /* Keep the marquee rolling on phones (matches desktop); the mask edges stay. */
    .ticker-items {
        order: 4;
        flex: 0 0 100%;
        min-width: 0;
        overflow: hidden;
    }

    .watchlist-page, .stock-detail-page { height: auto; overflow: visible; }
    .watchlist-panels { grid-template-columns: 1fr; overflow: visible; }
    .watchlist { max-height: 280px; border-right: none; border-bottom: 1px solid var(--border); }
    .watchlist-search-row { flex-wrap: wrap; gap: 8px 16px; }
    .watchlist-account-summary { margin-left: 0; }

    .detail-panel { display: block; overflow: visible; }
    .symbol-header { padding: 16px 16px 12px; }
    .symbol-meme { height: 54px; width: 54px; }
    .symbol-meme-large { height: 62px; width: 62px; }
    .order-submit { align-self: stretch; }

    /* Header on phones: price rides on row 1 next to the ticker; the stat tiles
       drop to their own full-width row as a tidy 2×2 grid. */
    .symbol-price-block { order: 1; }
    .symbol-stats { order: 2; width: 100%; margin-left: 0; }
    .symbol-stat { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .symbol-about { order: 3; }
    .symbol-price { font-size: 24px; }

    /* Flatten the nested body/area/rail so the sections stack in a sensible
       reading order: chart → order ticket → book → chat. */
    .detail-body { display: flex; flex-direction: column; }
    .detail-center, .chart-book-area, .detail-rail { display: contents; }
    .chart-section { order: 1; border-right: none; border-bottom: 1px solid var(--border); padding: 16px; }
    .order-section { order: 2; justify-content: flex-start; }
    .book-section  { order: 3; border-bottom: 1px solid var(--border); padding: 16px; }
    /* The stacked column has no definite height, so the book's flex:1/height:100%
       collapses to 0 — pin an explicit height so the ladder is visible. */
    .book-section .book { flex: none; height: 320px; }
    .chat-section  { order: 4; padding: 14px 16px; }
    /* Stacked phone width is too narrow for the horizontal trade bar — go vertical. */
    .order-section .order-panel { flex-direction: column; align-items: stretch; }
    .order-section .order-panel .order-submit { margin-left: 0; }
    /* The locked preview is tall on phones, so stack the prompt (the horizontal
       desktop layout clips the buttons at this width). */
    .order-locked-overlay { flex-direction: column; text-align: center; gap: 10px; }
    .order-locked-copy { align-items: center; }
    .tv-chart-candle { flex: none; height: 240px; }
    .chat-scroll { max-height: 360px; }

    .home-page { padding: 18px 16px; }
    .portfolio-page { padding: 18px 16px; overflow: auto; }
    .holdings-table, .trades-table { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track, .splash-logo, .splash-loader::after, .app-shell { animation: none !important; }
    * { scroll-behavior: auto; }
}

/* ── YOLO page ───────────────────────────── */
.yolo-page {
    flex: 1;
    overflow-y: auto;
    padding: 46px 28px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.yolo-title {
    margin: 0;
    font-family: var(--display);
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: .95;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px var(--glow));
}
.yolo-tagline { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 36ch; }
.yolo-loading { color: var(--text-secondary); padding: 40px 0; }

.yolo-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.yolo-chip {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 99px;
    border: 1px solid var(--border-strong); color: var(--text-secondary);
    background: var(--bg-secondary);
}
.yolo-chip strong { color: var(--accent); margin-left: 4px; font-variant-numeric: tabular-nums; }
.yolo-chip-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: var(--green-dim); }
.yolo-chip-locked { color: var(--text-muted); }

.yolo-stage {
    margin-top: 22px;
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 26px 24px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background:
        radial-gradient(120% 80% at 50% 0, var(--accent-soft), transparent 60%),
        var(--bg-secondary);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.yolo-reel {
    position: relative;
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    border-radius: 16px;
    background: var(--bg-secondary);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.yolo-reel.spinning {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 40px -4px var(--glow);
}
.yolo-reel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .4;
    z-index: 0;
}
.yolo-reel-text {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .95);
}

.yolo-status { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.yolo-status-line { font-size: 16px; color: var(--text-primary); }
.yolo-status-sub  { font-size: 13px; color: var(--text-secondary); }

.yolo-spinner {
    width: 28px;
    height: 28px;
    margin-top: 6px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: yolo-spin .8s linear infinite;
}
@keyframes yolo-spin { to { transform: rotate(360deg); } }

.yolo-result-headline { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--text-primary); }
.yolo-result-amount { font-family: var(--mono); font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.yolo-result-amount.up   { color: var(--green); }
.yolo-result-amount.down { color: var(--red); }
.yolo-result-detail { font-size: 13px; color: var(--text-secondary); }
.yolo-result-muted { color: var(--text-muted); }
.yolo-won  .yolo-result-headline { color: var(--green); }
.yolo-lost .yolo-result-headline { color: var(--red); }
.yolo-error { color: var(--red); font-size: 13px; }

.yolo-btn {
    margin-top: 8px;
    padding: 18px 56px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    color: var(--accent-ink);
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform .1s, box-shadow .15s, filter .15s;
    box-shadow: 0 8px 30px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.yolo-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 40px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4); filter: brightness(1.04); }
.yolo-btn:active:not(:disabled) { transform: translateY(0); }
.yolo-btn:disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
.yolo-gate { font-size: 13px; color: var(--text-secondary); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ── Onboarding (display-name) gate ─────────── */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
    backdrop-filter: blur(8px);
    animation: fade-in .2s ease;
}
.onboarding-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: var(--shadow-pop);
    text-align: center;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: pop-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
.onboarding-logo { font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; text-shadow: 0 0 18px var(--glow); }
.onboarding-title { margin: 1rem 0 .35rem; font-family: var(--display); font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.onboarding-subtitle { margin-bottom: 1.25rem; font-size: 13px; color: var(--text-secondary); }
.onboarding-input {
    width: 100%;
    padding: .7rem .8rem;
    font-family: var(--body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.onboarding-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.onboarding-input::placeholder { color: var(--text-muted); }
.onboarding-input:disabled { opacity: .6; cursor: not-allowed; }
.onboarding-error { margin-top: .6rem; font-size: 12px; color: var(--red); text-align: left; }
.onboarding-btn {
    width: 100%;
    margin-top: 1rem;
    padding: .72rem;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--accent-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, transform .1s, box-shadow .12s;
    box-shadow: 0 4px 18px -6px var(--glow);
}
.onboarding-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--accent-hi); }
.onboarding-btn:active:not(:disabled) { transform: translateY(0); }
.onboarding-btn:disabled { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; box-shadow: none; }

.onboarding-avatar {
    width: 76px;
    height: 76px;
    margin: 1rem auto .25rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--accent);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px -6px var(--glow);
}
.onboarding-avatar img { width: 100%; height: 100%; object-fit: cover; }
.onboarding-avatar.empty { border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
.onboarding-avatar-placeholder { font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--text-muted); }
.onboarding-picker-label { margin: 1rem 0 .5rem; text-align: left; }

/* ── Profile page ───────────────────────── */
.profile-page { display: flex; justify-content: center; padding: 2.5rem 1rem; overflow-y: auto; }
.profile-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    height: fit-content;
}
.profile-title { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.profile-subtitle { margin-bottom: .5rem; font-size: 13px; color: var(--text-secondary); }
.profile-loading { padding: 2rem 0; font-size: 13px; color: var(--text-secondary); }
.profile-saved { margin-top: .6rem; font-size: 12px; color: var(--green); text-align: left; font-weight: 600; }

/* ── KLIPY GIF picker ───────────────────────── */
.gif-picker { text-align: left; }
.gif-search {
    width: 100%;
    padding: .55rem .7rem;
    margin-bottom: .6rem;
    font-family: var(--body);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.gif-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gif-search::placeholder { color: var(--text-muted); }
.gif-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    height: 216px;
    overflow-y: auto;
    padding: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.gif-grid-msg { width: 100%; margin: auto; text-align: center; color: var(--text-muted); font-size: 12px; }
.gif-cell {
    position: relative;
    flex: 0 0 calc((100% - 12px) / 3);
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    cursor: pointer;
}
.gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-cell:hover { border-color: var(--text-secondary); }
.gif-cell.selected { border-color: var(--accent); }
.gif-attribution {
    margin-top: .5rem;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
}

/* Avatar chip in the ticker bar. */
.auth-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-strong);
    vertical-align: middle;
}
.auth-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ── IPOs ─────────────────────────────────────────────────────────────────── */
.ipo-page { max-width: 920px; margin: 0 auto; padding: 28px 18px 64px; overflow-y: auto; width: 100%; }
.ipo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ipo-title { font-family: var(--display); font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.ipo-tagline { color: var(--text-secondary); margin: 4px 0 0; }
.ipo-loading, .ipo-empty { color: var(--text-secondary); padding: 32px 0; text-align: center; }

.ipo-btn {
    padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--bg-tertiary); color: var(--text-primary); font-family: var(--body); font-weight: 700;
    cursor: pointer; transition: background .12s, transform .1s, box-shadow .12s;
}
.ipo-btn:hover:not(:disabled) { background: var(--bg-elevated); transform: translateY(-1px); }
.ipo-btn:disabled { opacity: .5; cursor: not-allowed; }
.ipo-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 16px -6px var(--glow); }
.ipo-btn-primary:hover:not(:disabled) { background: var(--accent-hi); }
.ipo-btn-danger  { background: transparent; border-color: var(--red); color: var(--red); }

.ipo-gate {
    margin: 16px 0; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-left-width: 3px; border-left-color: var(--accent);
    border-radius: 10px; background: var(--accent-soft); color: var(--text-secondary);
    font-size: 14px;
}
.ipo-gate strong { color: var(--text-primary); }

.ipo-grid { margin-top: 22px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ipo-card {
    position: relative; display: block; padding: 16px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-secondary); text-decoration: none; color: inherit;
    transition: border-color .14s, transform .12s, box-shadow .14s;
}
.ipo-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.ipo-card-head { display: flex; align-items: center; gap: 10px; }
.ipo-card-icon { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.ipo-card-id { display: flex; flex-direction: column; }
.ipo-card-ticker { font-family: var(--display); font-weight: 800; }
.ipo-card-name { font-size: 12px; color: var(--text-secondary); }
.ipo-card-stats { display: flex; justify-content: space-between; margin-top: 14px; }
.ipo-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ipo-stat-label { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.ipo-stat-value { font-family: var(--mono); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.ipo-form-card, .ipo-detail { margin-top: 16px; }
.ipo-field { margin-top: 14px; display: flex; flex-direction: column; }
.ipo-field-row { display: flex; gap: 14px; }
.ipo-field-row .ipo-field { flex: 1; }
.ipo-label { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.ipo-optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ipo-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.ipo-input {
    padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--bg-primary); color: var(--text-primary); font-family: var(--body); font-size: 14px; width: 100%;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.ipo-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ipo-textarea { resize: vertical; min-height: 64px; font-family: var(--body); }
.ipo-icon-preview { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; margin-bottom: 8px; }
.ipo-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ipo-error { color: var(--red); font-size: 13px; margin-top: 12px; }

.ipo-detail-head { display: flex; gap: 14px; align-items: center; }
.ipo-detail-icon { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; }
.ipo-detail-titlerow { display: flex; align-items: center; gap: 10px; }
.ipo-detail-titlerow .ipo-title { font-size: 26px; }
.ipo-detail-name { color: var(--text-secondary); margin: 2px 0 0; }
.ipo-detail-desc { margin-top: 14px; color: var(--text-primary); line-height: 1.55; }
.ipo-detail-stats { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.ipo-detail-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ipo-section-title { font-family: var(--display); font-size: 16px; font-weight: 800; margin: 26px 0 10px; }

.ipo-badge {
    font-family: var(--display); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary);
}
.ipo-badge-published { color: var(--accent); border-color: var(--accent); }
.ipo-badge-executed  { color: var(--green); border-color: var(--green); }
.ipo-badge-executing { color: var(--accent); border-color: var(--accent); }
.ipo-badge-cancelled { color: var(--red); border-color: var(--red); }

.ipo-listed {
    margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    border-radius: 12px; background: var(--green-dim); color: var(--text-primary);
}
.ipo-link { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 8px; }
.ipo-link:hover { text-decoration: underline; }

.ipo-captable { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ipo-captable-head, .ipo-captable-row {
    display: grid; grid-template-columns: var(--ipo-cols, 1fr 120px 80px);
    align-items: center; gap: 8px; padding: 11px 14px;
}
.ipo-captable:has(.ipo-col-pick) .ipo-captable-head,
.ipo-captable:has(.ipo-col-pick) .ipo-captable-row { --ipo-cols: 32px 1fr 120px 80px; }
.ipo-captable-head { background: var(--bg-tertiary); font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ipo-captable-row { border-top: 1px solid var(--border); }
.ipo-captable-row:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 50%, transparent); }
.ipo-col-num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.ipo-tag-founder, .ipo-tag {
    margin-left: 8px; font-family: var(--display); font-size: 10px; font-weight: 800; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 1px 5px;
}

.ipo-pie-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.ipo-pie { width: 156px; height: 156px; flex: none; border-radius: 50%; }
.ipo-pie-legend { list-style: none; margin: 0; padding: 0; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.ipo-pie-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.ipo-pie-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ipo-pie-legend-label { color: var(--text-secondary); }
.ipo-pie-legend-pct { margin-left: auto; font-family: var(--mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }

.ipo-panel {
    margin-top: 22px; padding: 18px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--bg-secondary);
}

/* ── Global focus-visible ring (a11y) ─────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}