/* ================================== */
/*           General Styles           */
/* ================================== */

body {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

.vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
}

.homepage-ad-zone {
    width: 100%;
    margin: 4px 0 18px;
}

.homepage-ad-zone--top {
    margin: 8px 0 16px;
}

.homepage-ad-zone--mid {
    margin: 2px 0 10px;
}

.homepage-charts-layout {
    display: block;
}

.homepage-charts-layout__main {
    min-width: 0;
}

/* Ad gating: hide every ad surface unless the server flagged the user as
   ad-eligible (public + free). Pro/admin pages render with data-ads-enabled="0". */
body:not([data-ads-enabled="1"]) .ad-zone {
    display: none !important;
}

/* Wide horizontal banner separator between chart rows / page sections. */
.ad-zone--separator {
    width: 100%;
    max-width: 970px;
    margin: 5px auto 5px;
}
.ad-zone--separator .ad-slot {
    padding: 0;
}
.ad-zone--separator .ad-slot__header {
    justify-content: center;
}

/* In-charts banner: #chartsContainer is a flex-wrap row, so force the ad onto
   its OWN full-width flex line (flex-basis 100%) — it must never share a row with
   charts. The banner itself stays centered and capped so it doesn't stretch edge
   to edge on ultra-wide screens. Result: charts row, ad row, charts row, ... */
#chartsContainer > .ad-zone--chart-row {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 12px;
}
#chartsContainer > .ad-zone--chart-row .ad-slot {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
}

/* Rectangle ad inside the detached watchlist News / Analyst panels. */
.watchlist-detached-symbol__section > .ad-zone--mid {
    width: 100%;
    max-width: 336px;
    margin: 12px auto 2px;
}

ad-slot {
    display: block;
    width: 100%;
    min-height: calc(var(--ad-slot-min-height, 152px) + 54px);
}

ad-slot[data-bare="true"] {
    min-height: 50px;
}

.ad-slot {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-sizing: border-box;
}

.ad-slot__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.ad-slot__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
}

/* Bare slot — outer wrapper has no grey box; inner surface keeps its dashed outline */
.ad-slot--bare {
    --ad-slot-min-height: 50px;
    border: none;
    background: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    min-height: var(--ad-slot-min-height);
}

.ad-slot--bare .ad-slot__surface {
    background: none;
    min-height: var(--ad-slot-min-height);
    padding: 4px 8px;
}

/* Branded top slot — logo pinned left, surface centred across full width */
.ad-slot--branded {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--ad-slot-min-height, 90px) + 28px);
    flex-direction: row;
    gap: 0;
}

.ad-slot__brand-link {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    line-height: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
    z-index: 1;
}

.ad-slot__brand-link:hover {
    opacity: 1;
}

.ad-slot__brand-logo {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
}

.ad-slot__surface {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 8px;
    width: min(100%, var(--ad-slot-max-width, 100%));
    max-width: 100%;
    min-height: var(--ad-slot-min-height, 152px);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid var(--border, #475569);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel, #0f172a) 92%, transparent);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Branded surface — centred by parent justify-content; logo is absolutely positioned so it doesn't shift this */
.ad-slot--branded .ad-slot__surface {
    flex: none;
    width: min(100%, var(--ad-slot-max-width, 970px));
    min-width: 0;
    margin: 0;
    min-height: var(--ad-slot-min-height, 90px);
    max-height: calc(var(--ad-slot-min-height, 90px) + 36px);
    align-self: center;
    padding: 0;
}

.ad-slot[data-ad-state="preview"] .ad-slot__surface {
    border-style: solid;
    border-color: var(--border, #334155);
    background: color-mix(in srgb, var(--panel-muted, #1f2937) 60%, transparent);
}

.ad-slot[data-ad-state="requested"] .ad-slot__surface {
    background: transparent;
}

.ad-slot__ins {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--ad-slot-min-height, 152px);
    margin: 0 auto;
    box-sizing: border-box;
}

.ad-slot__ins--side {
    width: min(100%, 300px);
}

.ad-slot__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    pointer-events: none;
}

.ad-slot[data-ad-state="requested"] .ad-slot__fallback {
    display: none;
}

.ad-slot__placeholder {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    opacity: 0.5;
}

.ad-slot__size-hint {
    font-size: 0.68rem;
    color: var(--text-muted, #94a3b8);
    opacity: 0.4;
}

ad-slot[position="top"],
ad-slot[position="separator"] {
    --ad-slot-min-height: 90px;
    --ad-slot-max-width: 970px;
}

ad-slot[position="mid"] {
    --ad-slot-min-height: 250px;
    --ad-slot-max-width: 336px;
}

@media (max-width: 767px) {
    .homepage-ad-zone {
        margin: 8px 0 14px;
    }

    ad-slot[position="top"],
    ad-slot[position="separator"] {
        --ad-slot-min-height: 100px;
        --ad-slot-max-width: 320px;
    }

    ad-slot[position="mid"] {
        --ad-slot-max-width: 300px;
    }

    .ad-slot__surface {
        padding: 16px;
    }
}

:root {
    --chart-bg-color: #ffffff;
    --accent-on: #0f172a;
}

/* ================================== */
/*       Alpaca Dashboard Window      */
/* ================================== */

.alpaca-dashboard-body {
    margin: 0;
    background: radial-gradient(circle at top left, #f6f2ea, #f0f4f8 55%, #e6eef5 100%);
    color: #1f2a3a;
}

.alpaca-dashboard {
    max-width: 1100px;
    margin: 24px auto 40px;
    padding: 24px 28px 32px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(25, 42, 70, 0.15);
}

.alpaca-dashboard__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e1e7ef;
    padding-bottom: 18px;
}

.alpaca-dashboard__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    color: #6b7c93;
    margin: 0 0 6px;
}

.alpaca-dashboard__title {
    font-size: 1.8rem;
    margin: 0 0 6px;
    color: #1a2b44;
}

.alpaca-dashboard__subtitle {
    margin: 0;
    color: #5a6b80;
    font-size: 0.95rem;
}

.alpaca-dashboard__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alpaca-dashboard .btn-primary {
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 6px 14px;
    font-size: 0.85rem;
}

.alpaca-dashboard__status {
    font-size: 0.85rem;
    color: #2b4b6f;
}

.alpaca-dashboard__status--error {
    color: #b42318;
}

.alpaca-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.alpaca-dashboard__card {
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(145deg, #f7fafc, #eef3f8);
    border: 1px solid #e5edf5;
}

.alpaca-dashboard__card-label {
    margin: 0 0 6px;
    font-size: 0.8rem;
    color: #5c6b80;
}

.alpaca-dashboard__card-value {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2a3a;
}

.alpaca-dashboard__section {
    margin-top: 28px;
}

.alpaca-dashboard__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.alpaca-dashboard__section-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #1f2a3a;
}

.alpaca-dashboard__section-header span {
    font-size: 0.85rem;
    color: #607086;
}

.alpaca-dashboard__table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e3e9f1;
    margin-top: 10px;
}

.alpaca-dashboard__watchlist-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.alpaca-dashboard__table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    min-width: 720px;
}

#positionsTable {
    min-width: 980px;
}

#positionsTable th.alpaca-dashboard__table-actions,
#positionsTable td:last-child {
    min-width: 360px;
}

.alpaca-dashboard__table th,
.alpaca-dashboard__table td {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.85rem;
    border-bottom: 1px solid #edf1f6;
}

.alpaca-dashboard__table th {
    background: #f3f6fb;
    color: #334155;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alpaca-dashboard__table-actions {
    text-align: right;
    white-space: nowrap;
}

.alpaca-dashboard__table tr:last-child td {
    border-bottom: none;
}

.alpaca-dashboard__news-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    min-height: 220px;
}

.alpaca-dashboard__news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.alpaca-dashboard__news-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #1f2a3a;
}

.alpaca-dashboard__news-header span {
    font-size: 0.8rem;
    color: #607086;
}

.alpaca-dashboard__news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
}

.alpaca-dashboard__news-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.alpaca-dashboard__news-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2a3a;
    text-decoration: none;
    line-height: 1.4;
}

.alpaca-dashboard__news-title:hover {
    color: #1d4ed8;
}

.alpaca-dashboard__news-meta {
    margin: 0;
    font-size: 0.75rem;
    color: #607086;
}

.alpaca-dashboard__news-empty {
    font-size: 0.85rem;
    color: #607086;
    text-align: left;
    padding: 8px 0;
}

.alpaca-dashboard__empty {
    text-align: center;
    padding: 18px;
    color: #73829a;
}

.alpaca-dashboard__value--positive {
    color: #15803d;
    font-weight: 600;
}

.alpaca-dashboard__value--negative {
    color: #b42318;
    font-weight: 600;
}

.alpaca-dashboard__trade-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.alpaca-dashboard__trade-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.alpaca-dashboard__trade-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #1f2a3a;
}

.alpaca-dashboard__trade-meta {
    margin: 6px 0 16px;
    font-size: 0.85rem;
    color: #64748b;
}

.alpaca-dashboard__trade-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.alpaca-dashboard__trade-row label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
}

.alpaca-dashboard__trade-row input,
.alpaca-dashboard__trade-row select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
    color: #1f2a3a;
    background: #ffffff;
}

.trade-risk-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trade-atr-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.trade-atr-row input {
    flex: 1 1 auto;
}

.trade-atr-row select {
    flex: 0 0 auto;
    min-width: 64px;
}

.trade-risk-button {
    border-radius: 999px;
    border: 1px solid #d7dee8;
    padding: 6px 12px;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2a3a;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.trade-risk-button:hover,
.trade-risk-button:focus {
    background: #f1f5f9;
    border-color: #cbd5f5;
    transform: translateY(-1px);
}

.trade-risk-button.is-active {
    background: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
}

.alpaca-dashboard__trade-row input:disabled,
.alpaca-dashboard__trade-row select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.alpaca-dashboard__trade-flags {
    margin: 12px 0 10px;
}

.alpaca-dashboard__trade-warning {
    font-size: 0.8rem;
    color: #b42318;
    margin-bottom: 12px;
    display: none;
}

.alpaca-dashboard__trade-warning--active {
    display: block;
}

.alpaca-dashboard__trade-flag {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #1f2a3a;
    padding: 6px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.alpaca-dashboard__trade-flag:last-child {
    border-bottom: none;
}

.alpaca-dashboard__trade-validation {
    font-size: 0.8rem;
    color: #1f2a3a;
    margin-bottom: 12px;
}

.alpaca-dashboard__trade-validation--error {
    color: #b42318;
}

.alpaca-dashboard__table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.alpaca-dashboard__table tbody tr:hover {
    background: #f1f5fb;
}

.alpaca-dashboard__row--selected {
    background: #e4f0ff;
}

.alpaca-dashboard__action-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.alpaca-dashboard__action-btn--buy {
    background: #d9f0e2;
    color: #0f5132;
    border-color: #b7e2c8;
}

.alpaca-dashboard__action-btn--sell {
    background: #fde2e2;
    color: #842029;
    border-color: #f7bcbc;
}

.alpaca-dashboard__action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
}

@media (max-width: 768px) {
    .alpaca-dashboard {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }

    .alpaca-dashboard__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .alpaca-dashboard__watchlist-layout {
        grid-template-columns: 1fr;
    }
}

/* ================================== */
/*        Header and Title Section    */
/* ================================== */

#headerSection {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 56px;
    padding: 0;
    background-color: var(--panel, #111827);
    border-bottom: 1px solid var(--border, #1e293b);
    color: var(--text-primary, #e2e8f0);
}

/* Sector tabs — center zone, grows to fill available space */
#menuTabsContainer {
    order: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    min-width: 0;
    overflow: hidden;
}

#menuTabsContainer:empty {
    flex: 0 0 0;
    padding: 0;
}

/* Pill capsule that wraps the individual tab buttons */
.tab-group {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, #1e293b);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    flex-shrink: 1;
}

.tab-group::-webkit-scrollbar {
    display: none;
}

.tab-group__btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: 'Space Grotesk', 'Roboto', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 14px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tab-group__btn:hover {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.07);
}

.tab-group__btn.is-active {
    background: #0891b2;
    color: #fff;
    font-weight: 700;
}

/* Dynamic content — right action zone */
#dynamic-content {
    display: flex;
    align-items: center;
    order: 3;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0 12px 0 0;
}

/* Wrapper for the action buttons */
.top-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.header-actions .theme-switcher {
    margin-top: 0;
}

.header-actions .login-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}


/* Plan badge — small chip next to account button */
.header-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.header-plan-badge--neutral {
    background: rgba(100, 116, 139, 0.18);
    color: var(--text-muted, #94a3b8);
    border-color: rgba(100, 116, 139, 0.25);
}

.header-plan-badge--warning {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.28);
}

.header-plan-badge--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.25);
}

.header-plan-badge--info {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.25);
}

.app-toolbar-button {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a;
    border-radius: 12px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.app-toolbar-button:hover,
.app-toolbar-button:focus-visible {
    transform: translateY(-1px);
    border-color: #93c5fd;
    background: #eef4ff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    outline: none;
}

.app-toolbar-button--primary,
.app-toolbar-button.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.app-toolbar-button--primary:hover,
.app-toolbar-button--primary:focus-visible,
.app-toolbar-button.is-active:hover,
.app-toolbar-button.is-active:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Header action buttons — compact ghost style (overrides app-toolbar-button defaults) */
.header-actions .app-toolbar-button {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted, #64748b);
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    box-shadow: none;
}

.header-actions .app-toolbar-button:hover,
.header-actions .app-toolbar-button:focus-visible {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border, #1e293b);
    transform: none;
    box-shadow: none;
}

.header-actions .app-toolbar-button--primary,
.header-actions .app-toolbar-button--primary:hover,
.header-actions .app-toolbar-button--primary:focus-visible {
    background: rgba(8, 145, 178, 0.18);
    border-color: rgba(8, 145, 178, 0.4);
    color: #22d3ee;
    transform: none;
}

/* Logout button — subtle red tint */
#logout-btn {
    color: #f87171 !important;
}

#logout-btn:hover {
    color: #fca5a5 !important;
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.2) !important;
}

/* Token balance — cyan chip (not a typical button) */
#headerTokenBalance {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(34, 211, 238, 0.1) !important;
    border: 1px solid rgba(34, 211, 238, 0.28) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #22d3ee !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    margin-right: 4px;
}

#headerTokenBalance:hover {
    background: rgba(34, 211, 238, 0.18) !important;
    transform: none !important;
    box-shadow: none !important;
}

.header-action-button {
    position: relative;
}

/* Token balance chip — teal pill in the header action row */
.token-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.25);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #22d3ee;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.token-chip:hover {
    background: rgba(34, 211, 238, 0.18);
}

.token-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    flex-shrink: 0;
}

.token-chip__count,
.token-chip__label {
    line-height: 1;
}

.header-action-button__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

/* ── Alert notification toasts ────────────────────────────────────────────── */

.alert-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: 300px;
    pointer-events: none;
}

.alert-toast {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 14px;
    background: rgba(15, 15, 22, 0.96);
    border: 1px solid rgba(251, 146, 60, 0.35);
    border-left: 3px solid #fb923c;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    animation: alert-toast-in 0.22s ease-out;
}

@keyframes alert-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.alert-toast__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.alert-toast__symbol {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fb923c;
    text-transform: uppercase;
}

.alert-toast__dismiss {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.15s;
}

.alert-toast__dismiss:hover {
    color: rgba(255, 255, 255, 0.7);
}

.alert-toast__message {
    margin: 0;
    font-size: 0.79rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
}

/* ── Alerts bell popup panel ─────────────────────────────────────────────── */

.alerts-popup {
    position: fixed;
    z-index: 9200;
    width: 320px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--panel, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
}
.alerts-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border, #334155);
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--panel, #1e293b);
}
.alerts-popup__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}
.alerts-popup__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}
.alerts-popup__close:hover { color: var(--text-primary, #e2e8f0); }
.alerts-popup__body {
    padding: 8px 0;
    flex: 1;
}
.alerts-popup__section {
    padding: 4px 14px 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
}
.alerts-popup__notif-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 14px;
    border-left: 3px solid #f59e0b;
    margin: 4px 10px;
    border-radius: 0 6px 6px 0;
    background: rgba(245, 158, 11, 0.07);
}
.alerts-popup__notif-symbol {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
}
.alerts-popup__notif-msg {
    font-size: 0.75rem;
    color: var(--text-primary, #e2e8f0);
}
.alerts-popup__alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 14px;
    font-size: 0.8rem;
}
.alerts-popup__alert-symbol {
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}
.alerts-popup__alert-cond {
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
}
.alerts-popup__empty {
    padding: 20px 14px;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    text-align: center;
}
.alerts-popup__loading {
    padding: 20px 14px;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    text-align: center;
}
.alerts-popup__footer {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border, #334155);
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    text-align: right;
}
.alerts-popup__footer a {
    color: var(--accent, #7c3aed);
    text-decoration: none;
}
.alerts-popup__footer a:hover { text-decoration: underline; }

.theme-switcher--header {
    justify-content: flex-end;
}

.theme-switcher--header .theme-switcher__toggle {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted, #64748b);
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.theme-switcher--header .theme-switcher__toggle:hover {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border, #1e293b);
}

.theme-switcher--header .theme-switcher__toggle-label {
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.theme-switcher--header .theme-switcher__toggle-value,
.theme-switcher--header .theme-switcher__chevron {
    color: inherit;
}

/* Category Title (below the news navigation) */
.category-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    color: #007bff;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ================================== */
/*             Title Box              */
/* ================================== */

.title-box {
    order: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 4px;
    background-color: var(--panel, #111827);
    border-right: 1px solid var(--border, #1e293b);
}

.title-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.title-nav__link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    font-family: 'Space Grotesk', 'Roboto', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.title-nav__link:hover {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.07);
}

.title-nav__link .header-action-button__badge {
    margin-left: 6px;
}

body[data-theme] .title-nav__link {
    color: var(--text-muted);
}

body[data-theme] .title-nav__link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
}

/* Header brand wordmark — always visible in the nav bar */
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 12px 0 14px;
    height: 100%;
    text-decoration: none;
    flex-shrink: 0;
    order: 1;
    transition: opacity 0.15s;
}
.header-brand:hover {
    opacity: 0.75;
}
.header-brand__wordmark {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.header-brand__signal {
    color: var(--text-primary, #f1f5f9);
}
.header-brand__atlas {
    color: #22d3ee;
}

/* Page brand wordmark — suppressed now that .header-brand covers all pages */
.page-brand-title {
    display: none;
}

.page-brand-title__signal {
    color: var(--text-primary, #f1f5f9);
}

.page-brand-title__atlas {
    color: #22d3ee;
}

/* ── Homepage market status strip ────────────────────────────────────────── */
.home-market-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0 8px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    user-select: none;
}

.home-market-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.5;
}

.home-market-status--open .home-market-status__dot {
    background: #22c55e;
    opacity: 1;
}

.home-market-status--closed .home-market-status__dot {
    background: #f59e0b;
    opacity: 1;
}

.home-market-status__label {
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

.home-market-status__detail {
    color: var(--text-muted, #64748b);
}

.home-market-status__detail::before {
    content: '·';
    margin-right: 7px;
}

.website-logo-link {
    display: inline-block;
    line-height: 0;
    outline-offset: 3px;
}

.website-logo-link:focus-visible {
    outline: 2px solid #00d4aa;
    border-radius: 4px;
}

.site-logo {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 6px;
}

.support-center {
    display: grid;
    gap: 20px;
    padding: 20px 0 32px;
}

.support-center__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #2563eb) 12%, var(--bg, #0a0a12)) 0%, var(--panel, #0f0f1a) 100%);
}

.support-center__hero h1 {
    margin: 0 0 8px;
    font-size: 2rem;
}

.support-center__hero p {
    margin: 0;
    max-width: 760px;
    color: var(--text-muted, #64748b);
}

.support-center__eyebrow {
    margin: 0 0 8px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #2563eb);
}

.support-center__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.support-center__meta-pill,
.support-status-pill,
.support-priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.support-center__meta-pill,
.support-status-pill {
    background: var(--panel-muted, #f8fafc);
    border: 1px solid var(--border, #dbe3ee);
    color: var(--text-primary, #0f172a);
}

.support-status-pill[data-status="closed"] {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-muted, #94a3b8);
}

.support-priority-pill--normal {
    background: color-mix(in srgb, var(--accent, #2563eb) 15%, transparent);
    color: var(--accent-muted, #818cf8);
}

.support-priority-pill--high {
    background: rgba(217, 119, 6, 0.18);
    color: #f59e0b;
}

.support-priority-pill--urgent {
    background: rgba(220, 38, 38, 0.18);
    color: var(--negative, #ef4444);
}

.support-center__layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 20px;
}

.support-card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    background: var(--panel, #ffffff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 18px;
}

.support-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.support-card__header h2,
.support-thread-empty h3,
.support-thread-panel__header h3 {
    margin: 0 0 6px;
}

.support-card__header p,
.support-thread-empty p,
.support-thread-panel__meta,
.support-thread-list__empty,
.support-reply-form__hint {
    margin: 0;
    color: var(--text-muted, #64748b);
}

.support-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
}

.support-alert[data-tone="success"] {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.22);
    color: var(--positive, #22c55e);
}

.support-alert[data-tone="error"] {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.22);
    color: var(--negative, #ef4444);
}

.support-form,
.support-reply-form {
    display: grid;
    gap: 14px;
}

.support-form__field {
    display: grid;
    gap: 6px;
}

.support-form__field span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

/* Character counter label row */
.support-form__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.support-form__counter {
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    transition: color 0.18s;
    white-space: nowrap;
}
.support-form__counter[data-warn="true"] {
    color: #b91c1c;
}

/* Improved empty state */
.support-thread-empty__icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 14px;
}
.support-thread-empty__response-hint {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

/* Meta line truncates with ellipsis; parent flex child must have
   min-width:0 (set on .support-thread-panel__header > div:first-child). */
.support-thread-panel__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.support-form input,
.support-form select,
.support-form textarea,
.support-reply-form textarea {
    width: 100%;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 12px;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
    font: inherit;
    padding: 11px 12px;
    box-sizing: border-box;
}
.support-form select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.support-form textarea,
.support-reply-form textarea {
    min-height: 132px;
    resize: vertical;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus,
.support-reply-form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border, #cbd5e1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
}

.support-btn {
    appearance: none;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 12px;
    min-height: 42px;
    padding: 0 16px;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.support-btn:hover {
    transform: translateY(-1px);
}
.support-btn:focus-visible {
    transform: translateY(-1px);
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

.support-btn--primary {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #ffffff;
}

.support-btn--primary:hover,
.support-btn--primary:focus-visible {
    background: color-mix(in srgb, var(--accent, #2563eb) 90%, #000000);
}

.support-btn--ghost:hover,
.support-btn--ghost:focus-visible {
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--panel, #ffffff));
    border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border, #cbd5e1));
}

.support-center__threads-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: 18px;
    min-height: 620px;
}

.support-thread-list {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: 700px;
    overflow: auto;
}

.support-thread-item {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border, #dbe3ee);
    border-radius: 14px;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
    padding: 12px;
    cursor: pointer;
    appearance: none;
}

.support-thread-item.is-active,
.support-thread-item:hover {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, var(--border, #dbe3ee));
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--panel, #ffffff));
    color: var(--text-primary, #0f172a);
}
.support-thread-item:focus-visible {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 60%, var(--border, #dbe3ee));
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--panel, #ffffff));
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

.support-thread-item__top,
.support-thread-item__meta,
.support-reply-form__actions,
.support-thread-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Header left column (title + meta) must be able to shrink so the
   right-side pills don't get pushed outside the panel. */
.support-thread-panel__header > div:first-child {
    flex: 1;
    min-width: 0;
}

/* Pills + toggle button should never shrink or wrap onto a new line
   unless the whole header wraps (handled by flex-wrap below). */
.support-thread-panel__header > div:last-child {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Allow the header row itself to wrap on very narrow panels so nothing
   overflows outside the modal boundary. */
.support-thread-panel__header {
    flex-wrap: wrap;
    align-items: flex-start;
}

.support-thread-item__meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
}

.support-thread-item__preview {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-secondary, #334155);
    line-height: 1.45;
}

.support-thread-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}
body[data-theme] .support-thread-item__badge {
    background: color-mix(in srgb, var(--accent) 85%, #ef4444);
    color: #ffffff;
}

.support-thread-panel {
    border: 1px solid var(--border, #dbe3ee);
    border-radius: 16px;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* Thread view fills the panel when open */
.support-thread-panel__view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.support-thread-empty {
    display: grid;
    place-items: center;
    min-height: 100%;
    text-align: center;
    padding: 40px 20px;
}

.support-thread-messages {
    display: grid;
    gap: 12px;
    margin: 16px 0;
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: var(--border, #dbe3ee) transparent;
}
.support-thread-messages::-webkit-scrollbar { width: 4px; }
.support-thread-messages::-webkit-scrollbar-thumb { background: var(--border, #dbe3ee); border-radius: 2px; }
.support-thread-messages::-webkit-scrollbar-track { background: transparent; }

.support-thread-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border, #dbe3ee) transparent;
}
.support-thread-list::-webkit-scrollbar { width: 4px; }
.support-thread-list::-webkit-scrollbar-thumb { background: var(--border, #dbe3ee); border-radius: 2px; }
.support-thread-list::-webkit-scrollbar-track { background: transparent; }

.support-message {
    max-width: 84%;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--panel, #ffffff);
    border: 1px solid var(--border, #dbe3ee);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    color: var(--text-primary, #0f172a);
}

.support-message.is-user {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--panel, #ffffff));
    color: var(--text-primary, #0f172a);
}

.support-message.is-admin {
    margin-right: auto;
    color: var(--text-primary, #0f172a);
}

.support-message__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
}

.support-message__body {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--text-primary, #0f172a);
}

.support-reply-form textarea {
    min-height: 112px;
}

.support-reply-form__actions {
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .support-center__layout,
    .support-center__threads-grid {
        grid-template-columns: 1fr;
    }

    .support-thread-list,
    .support-thread-messages {
        max-height: none;
    }
}

@media (max-width: 720px) {
    .support-center__hero,
    .support-thread-item__top,
    .support-thread-panel__header,
    .support-reply-form__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-message {
        max-width: 100%;
    }
}

/* ================================== */
/*          Web Tabs Section          */
/* ================================== */

#web-tabs {
    margin-top: 0;
    margin-right: auto;
}

.web-tabs ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

.web-tabs ul li a {
    text-decoration: none;
    color: var(--text-muted, #007bff);
    font-weight: 600;
    font-family: inherit;
    transition: color 0.2s ease;
}

.web-tabs ul li a:hover {
    color: var(--accent, #0056b3);
    text-decoration: underline;
}

/* ================================== */
/*       Button Styling Consistency   */
/* ================================== */

.button-style:hover {
    background-color: #0056b3;
}

.button-style:focus {
    outline: none;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
}

/* ================================== */
/*         Login and User Sections    */
/* ================================== */

#loginContainer {
    display: flex;
    align-items: center;
    width: auto;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    width: auto;
    white-space: nowrap;
}

#user-greeting {
    font-size: 1rem;
    color: var(--text-primary, #333);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.username-style {
    font-weight: bold;
    color: var(--accent, #007bff);
}

.user-status-wrapper, .login-form {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

.login-form__recovery-link {
    color: var(--accent, #007bff);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.login-form__recovery-link:hover {
    text-decoration: underline;
}

.button-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#user-greeting, .login-form label {
    font-size: 12.5px;
    color: var(--text-primary, #333);
    font-weight: bold;
}

.login-form input {
    height: 26px;
    font-size: 12px;
    padding: 0 7px;
    border-radius: 5px;
    width: 100px;
    box-sizing: border-box;
}

/* ================================== */
/*             Theme Picker           */
/* ================================== */

.theme-switcher {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.theme-switcher--header {
    justify-content: flex-end;
}

.theme-switcher__label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}

.theme-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.theme-switcher__toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.theme-switcher__toggle-value {
    font-weight: 700;
    color: var(--text-primary);
}

.theme-switcher__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.theme-switcher.is-open .theme-switcher__chevron {
    transform: rotate(180deg);
}

.theme-switcher__options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    min-width: 200px;
    z-index: 40;
}

.theme-switcher.is-open .theme-switcher__options {
    display: flex;
}

.theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    width: 100%;
}

.theme-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.theme-option.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.theme-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.theme-swatch--signal {
    background: linear-gradient(135deg, #0f172a, #f59e0b);
}

.theme-swatch--nightwatch {
    background: linear-gradient(135deg, #0f172a, #38bdf8);
}

.theme-swatch--glacier {
    background: linear-gradient(135deg, #0ea5e9, #ecfeff);
}

.theme-swatch--terminal-green {
    background: linear-gradient(135deg, #22c55e, #052e16);
}

.theme-swatch--copper-tape {
    background: linear-gradient(135deg, #a24b24, #fcd9b8);
}

.theme-swatch--blueprint {
    background: linear-gradient(135deg, #38bdf8, #0f172a);
}

.theme-swatch--citrus {
    background: linear-gradient(135deg, #ea580c, #fef3c7);
}

.theme-swatch--zen-mono {
    background: linear-gradient(135deg, #1c1917, #e7e5e4);
}

.theme-swatch--deep-space {
    background: linear-gradient(135deg, #6366f1, #0a0a12);
}

/* ================================== */
/*          Register Form Section     */
/* ================================== */

.register-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 600px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.form-group, .form-control, .btn-primary {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.form-group {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.form-group label {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.form-control {
    font-size: 1em;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.btn-primary {
    background-color: #007bff;
    color: #fff;
    font-size: 0.75em; /* Further reduced font size */
    padding: 3px 7px; /* Reduced padding */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px; /* Reduced margin for better fit */
    display: block;
    text-align: center;
    width: 100%;
    height: 30px; /* Reduced height */
}

.button-style {
    line-height: 1.2; /* Reduced line height for a more compact appearance */
    margin-left: 5px;
}

.form-check {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.form-check-input {
    margin-right: 10px;
}

.form-check-label {
    font-size: 0.9em;
    color: #333;
}

/* Responsive form layout for smaller screens */
@media (max-width: 768px) {
    .register-form {
        padding: 10px;
        max-width: 100%;
    }

    .btn-primary {
        font-size: 1em;
    }

    .form-group {
        margin-bottom: 10px;
    }
}

/* ================================== */
/*       New Stories Message Styling  */
/* ================================== */

.new-stories-message {
    font-weight: 700;
    font-style: italic;
    background-color: #eef2ff;
    padding: 8px 14px;
    border-radius: 999px;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c7d2fe;
    font-size: 1.6em;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

body[data-theme] .new-stories-message {
    background-color: var(--panel-muted);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* ================================== */
/*          News Section Styling      */
/* ================================== */

#news-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
    grid-auto-rows: 1fr;            /* even row heights */
    gap: 12px;                      /* spacing between cards */
    margin-top: 15px;
}

.news-container--stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-item {
    border: 1px solid #ddd;
    padding: 8px 10px;            /* equal padding on top/bottom and sides */
    background-color: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* keeps title + meta spaced cleanly */
    min-height: auto;              /* remove forced height */
}

.news-item--new {
    border-color: #f59e0b;
    background-color: #fff7ed;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-badge {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #f59e0b;
    color: #1f2937;
    border: 1px solid #d97706;
}

.news-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 14px 16px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.news-section-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #172033;
}

.news-section-new-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f59e0b;
    color: #1f2937;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #d97706;
}

body[data-theme] .news-section-header {
    border-bottom-color: var(--border);
}

body[data-theme] .news-section-title {
    color: var(--text-primary);
}

body[data-theme] .news-section-new-badge {
    background-color: var(--accent);
    border-color: var(--accent-muted);
    color: #ffffff;
}

.news-title {
    font-size: 1.35em;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.news-meta {
    font-size: 0.85em;
    color: #777;
    display: flex;
    gap: 8px;
    align-items: center;
}

body[data-theme] .news-item--new {
    background-color: var(--panel-muted);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

body[data-theme] .news-badge {
    background-color: var(--accent);
    border-color: var(--accent-muted);
    color: #ffffff;
}

body[data-theme] .earnings-panel {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] #earnings-meta {
    color: var(--text-muted);
}

body[data-theme] .category-score {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .category-score-help {
    color: var(--text-muted);
}

body[data-theme] .category-score-range {
    color: var(--text-muted);
}

body[data-theme] .category-score-sparkline canvas {
    background: var(--panel-muted);
}

body[data-theme] .earnings-item {
    background-color: var(--panel-muted);
    border-color: var(--border);
}

body[data-theme] .earnings-item__symbol {
    color: var(--text-primary);
}

body[data-theme] .earnings-item__name {
    color: var(--text-muted);
}

body[data-theme] .earnings-item__date {
    color: var(--text-muted);
}

/* Responsive: stack to 1 column on small screens */
@media (max-width: 992px) {
    #news-container {
        grid-template-columns: 1fr;
    }
}

.news-earnings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.news-earnings-grid.is-watchlist-mode {
    grid-template-columns: 1fr;
}

.earnings-panel {
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.earnings-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.earnings-header__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.earnings-header h3 {
    font-size: 1.05rem;
    margin: 0;
}

#earnings-meta {
    font-size: 0.8rem;
    color: #64748b;
}

.sector-hooks-panel {
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sector-hooks-panel__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sector-hooks-panel__header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.sector-hooks-panel__header span {
    font-size: 0.8rem;
    color: #64748b;
}

.sector-hooks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sector-hooks-grid.is-watchlist-mode {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sector-hook-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 248px;
}

.sector-hook-card__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sector-hook-card__header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
}

.sector-hook-card__meta {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

.sector-hook-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.sector-hook-card__empty {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    padding-top: 6px;
}

.sector-hook-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 10px;
}

.sector-hook-row--interactive {
    appearance: none;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.sector-hook-row--interactive:hover,
.sector-hook-row--interactive:focus-visible {
    border-color: #94a3b8;
    background: #eef2ff;
    transform: translateY(-1px);
    outline: none;
}

.sector-hook-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sector-hook-row__label,
.sector-hook-row__value {
    font-size: 0.83rem;
    font-weight: 700;
}

.sector-hook-row__label {
    color: #1e293b;
}

.sector-hook-row__value {
    color: #475569;
    white-space: nowrap;
}

.sector-hook-row__meta {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

.sector-hook-row__track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.sector-hook-row__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}

.sector-hook-row__fill.is-gain {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.sector-hook-row__fill.is-loss {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.sector-hook-row__fill.is-volume {
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
}

body[data-theme] .sector-hooks-panel {
    background-color: var(--panel);
    border-color: var(--border);
}

body[data-theme] .sector-hooks-panel__header h3,
body[data-theme] .sector-hook-card__header h4,
body[data-theme] .sector-hook-row__label {
    color: var(--text-primary);
}

body[data-theme] .sector-hooks-panel__header span,
body[data-theme] .sector-hook-card__meta,
body[data-theme] .sector-hook-card__empty,
body[data-theme] .sector-hook-row__value,
body[data-theme] .sector-hook-row__meta {
    color: var(--text-muted);
}

body[data-theme] .sector-hook-card {
    background: var(--panel-muted);
    border-color: var(--border);
}

body[data-theme] .sector-hook-row {
    background: color-mix(in srgb, var(--panel) 78%, transparent);
    border-color: var(--border);
}

body[data-theme] .sector-hook-row--interactive:hover,
body[data-theme] .sector-hook-row--interactive:focus-visible {
    background: color-mix(in srgb, var(--accent) 18%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

body[data-theme] .sector-hook-row__track {
    background: color-mix(in srgb, var(--border) 70%, transparent);
}

@media (max-width: 1200px) {
    .sector-hooks-grid.is-watchlist-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.category-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
}

.category-score-help {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

.category-score-range {
    font-size: 0.72rem;
    color: #64748b;
}

.category-score-sparkline {
    margin-top: 8px;
}

.category-score-sparkline canvas {
    width: 100%;
    height: 120px;
    display: block;
    border-radius: 8px;
    background: #f1f5f9;
}

.earnings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.earnings-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 8px;
    align-items: center;
}

.earnings-item__symbol {
    font-weight: 700;
    color: #0f172a;
}

.earnings-item__name {
    font-size: 0.9rem;
    color: #334155;
}

.earnings-item__date {
    font-size: 0.85rem;
    color: #64748b;
    text-align: right;
}

.earnings-empty {
    font-size: 0.9rem;
    color: #64748b;
    padding: 8px 0;
}

@media (max-width: 992px) {
    .news-earnings-grid {
        grid-template-columns: 1fr;
    }

    .sector-hooks-grid,
    .sector-hooks-grid.is-watchlist-mode {
        grid-template-columns: 1fr;
    }

    .earnings-item {
        grid-template-columns: minmax(0, 1fr);
    }
    .earnings-item__date {
        text-align: left;
    }
}


/* Force News (left) above Charts (right) */
.horizontal-container {
  display: flex;
  flex-direction: column !important;
  gap: 20px;
}
.left-side-container,
.right-side-container {
  width: 100% !important;
  padding-left: 10px;
  padding-right: 10px;
}



/* ================================== */
/*           News Navigation          */
/* ================================== */

.news-navigation {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 20px 0;
}

.news-navigation button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.news-navigation button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* ── Market clock bar ──────────────────────────────────────────────────────── */

.market-clock-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 10px;
}

.market-clock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.market-clock-face {
    display: block;
    flex-shrink: 0;
}

.market-clock-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    line-height: 1;
}

.market-clock-sep {
    width: 1px;
    height: 34px;
    background: var(--border, #1e293b);
    margin: 0 4px;
    flex-shrink: 0;
}

.market-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.market-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color 0.4s, border-color 0.4s, background 0.4s;
}

.market-status-time {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.market-status-next {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────── */


/* ================================== */
/*            Footer Styling          */
/* ================================== */

.footer {
    background-color: #f8f9fa;
    padding: 15px;
    border-top: 1px solid #ddd;
    text-align: center;
    color: #777;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    display: inline;
    margin-right: 15px;
}

.footer ul li a {
    text-decoration: none;
    color: #007bff;
}

/* ================================== */
/*     Charts and Watchlist Section   */
/* ================================== */

/* Adjust the layout for news and charts side by side */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Parent flex container for the layout */
.horizontal-container {
    display: flex;
    flex-wrap: nowrap; /* Keep news and charts side by side */
    width: 100%;
}

/* Left side container (News and Watchlist) */
.left-side-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

/* Right side container (Charts) */
.right-side-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}


/* Charts Container */
#chartsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

/* Wrapper for each chart and its title */
.chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--panel, #fff);
    border: 1px solid var(--border, #ccc);
    box-sizing: border-box;
    margin-bottom: 24px;      /* spacing between rows */
    padding-bottom: 8px;
}

.chart-wrapper.is-pulse-focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}


.chart-title-box.chart-hover-border {
    background-color: #333; /* Dark background for hover effect */
    color: #fff; /* Inverted text color for readability */
}

body[data-theme] .chart-wrapper {
    background-color: var(--panel);
    border-color: var(--border);
}

body[data-theme] .chart-wrapper.is-pulse-focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

body[data-theme] .chart-container {
    background-color: var(--panel);
}

body[data-theme] .chart-title-box.chart-hover-border {
    background-color: var(--accent);
    color: #ffffff;
}


.plus-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

.plus-watchlist-grid {
    display: grid;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.plus-watchlist-row {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.8fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.plus-watchlist-header {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.plus-watchlist-row--data {
    border-top: 1px solid #e2e8f0;
    cursor: pointer;
}

.plus-watchlist-row--data:hover {
    background: #f1f5f9;
}

.plus-watchlist-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plus-watchlist-cell--symbol {
    font-weight: 600;
}

.plus-watchlist-cell--muted {
    color: #64748b;
    font-size: 0.85rem;
}

.plus-action-button {
    background: #0f172a;
    border: 1px solid #0f172a;
    color: #ffffff;
}

.plus-action-button:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.plus-secondary-button {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.plus-secondary-button:hover {
    background: #e2e8f0;
}

.regular-chart {
    width: calc(33.33% - 20px); /* Approximately 3 per row */
    height: auto; /* Regular chart height */
}

/* Title box styling */
.chart-title-box {
    background-color: var(--chart-bg-color);
    padding: 14px 20px;
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    min-height: 54px;
    line-height: 1.2;
}

.chart-title-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.chart-title-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.chart-title-hint {
    font-size: 0.78em;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    position: static;
    transform: none;
    white-space: normal;
    pointer-events: none;
    transition: opacity 0.15s ease;
    margin-top: 2px;
}

.chart-title-box.chart-hover-border .chart-title-hint {
    opacity: 1;
    visibility: visible;
}

.chart-title-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.chart-view-tab {
    border: 1px solid #c9d3df;
    background: #f5f8fb;
    color: #314156;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chart-view-tab:hover {
    background: #ebf2f8;
    border-color: #9fb4cc;
}

.chart-view-tab.is-active {
    background: #172033;
    border-color: #172033;
    color: #ffffff;
}

body[data-theme] .chart-view-tab {
    background: var(--panel-muted);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .chart-view-tab:hover {
    background: var(--panel);
    border-color: var(--accent);
}

body[data-theme] .chart-view-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body[data-theme] .chart-title-hint {
    color: var(--text-muted);
}

.chart-info-panel {
    width: calc(100% - 20px);
    margin: 10px 10px 6px;
    border: 1px solid #d9e1ea;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    padding: 14px;
    box-sizing: border-box;
}

.chart-info-panel__status {
    color: #2d3a4f;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.chart-info-panel__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.chart-info-panel__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #dde6f0;
}

.chart-info-panel__detail-label {
    color: #5b687a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.chart-info-panel__detail-value {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 600;
}

.chart-info-panel__summary {
    color: #243246;
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
}

.chart-info-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.chart-info-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e9f1f8;
    color: #0f4c81;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.chart-info-panel__link:hover {
    background: #dceaf7;
}

body[data-theme] .chart-info-panel {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-muted) 100%);
    border-color: var(--border);
}

body[data-theme] .chart-info-panel__status,
body[data-theme] .chart-info-panel__detail-value,
body[data-theme] .chart-info-panel__summary {
    color: var(--text-primary);
}

body[data-theme] .chart-info-panel__detail-label {
    color: var(--text-muted);
}

body[data-theme] .chart-info-panel__detail {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}

body[data-theme] .chart-info-panel__link {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}

body[data-theme] .chart-info-panel__link:hover {
    background: rgba(255, 255, 255, 0.12);
}

.chart-profile-teaser {
    width: calc(100% - 20px);
    margin: 8px 10px 2px;
    border: 1px solid #d9e1ea;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f4eb 100%);
    padding: 12px 14px;
    box-sizing: border-box;
}

.chart-profile-teaser__header {
    color: #5b4a1f;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.chart-profile-teaser__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.chart-profile-teaser__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #efe4bf;
    color: #5a4814;
    font-size: 0.74rem;
    font-weight: 700;
}

.chart-profile-teaser__summary {
    margin: 0;
    color: #4b5563;
    font-size: 0.86rem;
    line-height: 1.5;
}

.chart-profile-teaser__summary.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chart-profile-teaser__toggle {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #8a6d1f;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.chart-profile-teaser__toggle:hover {
    text-decoration: underline;
}

.chart-profile-teaser__toggle:focus-visible {
    outline: 2px solid #c79a2f;
    outline-offset: 2px;
    border-radius: 4px;
}

.chart-profile-teaser.is-error .chart-profile-teaser__header {
    color: #8a3b2f;
}

body[data-theme] .chart-profile-teaser {
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, #f59e0b 12%) 0%, var(--panel-muted) 100%);
    border-color: var(--border);
}

body[data-theme] .chart-profile-teaser__header,
body[data-theme] .chart-profile-teaser__summary {
    color: var(--text-primary);
}

body[data-theme] .chart-profile-teaser__chip {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

body[data-theme] .chart-profile-teaser__toggle {
    color: #fbbf24;
}

.chart-news-panel {
    width: calc(100% - 20px);
    margin: 10px 10px 6px;
    border-top: 1px solid #d9e1ea;
}

.chart-news-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 6px;
    font-weight: 600;
}

.chart-news-panel__label {
    color: #172033;
}

.chart-news-panel__count,
.chart-news-panel__meta,
.chart-news-panel__empty {
    color: #5b687a;
    font-size: 0.84rem;
}

.chart-news-panel__body {
    display: grid;
    gap: 8px;
    padding: 0 0 8px;
}

.chart-news-panel__item {
    display: block;
    padding: 10px 12px;
    border: 1px solid #d9e1ea;
    border-radius: 10px;
    background: #f7fafc;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.chart-news-panel__item:hover {
    transform: translateY(-1px);
    border-color: #9fb4cc;
    background: #eef5fb;
}

.chart-news-panel__title {
    color: #172033;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
}

.chart-news-panel__empty {
    padding: 0 4px 6px;
}

body[data-theme] .chart-news-panel {
    border-top-color: var(--border);
}

body[data-theme] .chart-news-panel__label,
body[data-theme] .chart-news-panel__title {
    color: var(--text-primary);
}

body[data-theme] .chart-news-panel__count,
body[data-theme] .chart-news-panel__meta,
body[data-theme] .chart-news-panel__empty {
    color: var(--text-muted);
}

body[data-theme] .chart-news-panel__item {
    background: var(--panel-muted);
    border-color: var(--border);
}

body[data-theme] .chart-news-panel__item:hover {
    background: var(--panel);
    border-color: var(--accent);
}

.chart-container {
    width: 100%;      /* Full width of the chart wrapper */
    height: 100%;     /* Full height of the chart wrapper */
    box-sizing: border-box;
    position: relative;
}

.chart-zoom-controls {
    position: absolute;
    bottom: 4px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.chart-zoom-controls:hover,
.chart-zoom-controls:focus-within {
    opacity: 1;
}

.chart-zoom-button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.12);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.chart-zoom-button:hover {
    background: var(--panel);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.watchlist-upgrades {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    flex: 1 1 122px;
    min-width: 122px;
}

.watchlist-upgrades-button {
    width: 100%;
    cursor: pointer;
}

.watchlist-upgrades-listbox {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 420px;
    max-width: min(640px, calc(100vw - 32px));
    width: max-content;
    max-height: 500px;
    overflow: hidden;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    background-color: var(--panel, #ffffff);
    color: var(--text-primary, #222);
    border: 1px solid var(--border, #cfcfcf);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    outline: none;
}

.watchlist-upgrades-listbox.open-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.watchlist-upgrades-listbox.is-visible {
    display: flex;
}

.watchlist-upgrades-listbox.is-fixed {
    position: fixed;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

/* Embedded variant (Focus window) — restore block flow, no two-zone needed */
.watchlist-upgrades-listbox--embedded {
    display: block;
    overflow-y: auto;
}

/* Ad sits above the scroll zone — no longer sticky, content never scrolls behind it. */
.watchlist-upgrades-listbox__ad,
.watchlist-news-popover__ad {
    flex-shrink: 0;
    margin: 0;
    background-color: var(--panel, #ffffff);
}

/* Scrollable content zone inside the analyst listbox */
.watchlist-upgrades-listbox__scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 6px;
}

/* Full-width top banner across the Focus (detached symbol) window. */
.watchlist-detached-symbol__ad {
    flex: 0 0 auto;
    padding: 4px 16px 4px;
    background-color: transparent;
}

/* ── Focus window keyboard shortcut hint strip ──────────────────────────── */
.wds-shortcut-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 4px 12px;
    background: rgba(241, 245, 249, 0.72);
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    user-select: none;
}

.wds-shortcut-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wds-shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 1px 0 #b0bec5;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #334155;
    white-space: nowrap;
}

.wds-shortcut-desc {
    font-size: 0.63rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

/* Dark theme */
body[data-theme] .wds-shortcut-bar {
    background: rgba(15, 23, 42, 0.38);
    border-bottom-color: var(--border);
}

body[data-theme] .wds-shortcut-key {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.30);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.40);
    color: #e2e8f0;
}

body[data-theme] .wds-shortcut-desc { color: #64748b; }

/* Bloomberg skin */
.watchlist-detached-symbol.wds-style--bloomberg .wds-shortcut-bar {
    background: rgba(5, 7, 10, 0.6);
    border-bottom-color: #2a2010;
}

.watchlist-detached-symbol.wds-style--bloomberg .wds-shortcut-key {
    background: #0b0905;
    border-color: #3a3020;
    box-shadow: 0 1px 0 #000;
    color: #ffa028;
}

.watchlist-detached-symbol.wds-style--bloomberg .wds-shortcut-desc { color: #5a4a30; }

/* Cockpit skin */
.watchlist-detached-symbol.wds-style--cockpit .wds-shortcut-bar {
    background: rgba(2, 8, 18, 0.55);
    border-bottom-color: rgba(0, 212, 170, 0.15);
}

.watchlist-detached-symbol.wds-style--cockpit .wds-shortcut-key {
    background: rgba(0, 212, 170, 0.06);
    border-color: rgba(0, 212, 170, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.60);
    color: #00d4aa;
}

.watchlist-detached-symbol.wds-style--cockpit .wds-shortcut-desc { color: rgba(0, 212, 170, 0.35); }

/* Mainframe skin */
.watchlist-detached-symbol.wds-style--mainframe .wds-shortcut-bar {
    background: rgba(0, 10, 0, 0.55);
    border-bottom-color: rgba(0, 255, 65, 0.12);
}

.watchlist-detached-symbol.wds-style--mainframe .wds-shortcut-key {
    background: rgba(0, 255, 65, 0.05);
    border-color: rgba(0, 255, 65, 0.22);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.60);
    color: #00ff41;
}

.watchlist-detached-symbol.wds-style--mainframe .wds-shortcut-desc { color: rgba(0, 255, 65, 0.30); }

/* Tearsheet skin */
.watchlist-detached-symbol.wds-style--tearsheet .wds-shortcut-bar {
    background: rgba(250, 248, 242, 0.80);
    border-bottom-color: #ddd8c8;
}

.watchlist-detached-symbol.wds-style--tearsheet .wds-shortcut-key {
    background: #faf8f2;
    border-color: #c8c0a8;
    box-shadow: 0 1px 0 #b8b0a0;
    color: #5a4a2a;
}

.watchlist-detached-symbol.wds-style--tearsheet .wds-shortcut-desc { color: #b0a080; }

/* ── Tearsheet newspaper ──────────────────────────────────────────────────── */

/* Body keeps its flex layout; position:relative anchors the overlay */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__body {
    position: relative;
}

/* Hide Analyst Changes panel in Tearsheet — news mode owns the narrative */
.watchlist-detached-symbol.wds-style--tearsheet [data-wds-section="analyst"] {
    display: none;
}

/* Newspaper overlay — bleeds over chart + right panel, slides in from right */
.ts-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 260px; /* default; overridden by JS to match left-panel width */
    z-index: 10;
    background: #faf8f2;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ts-overlay.is-open {
    transform: translateX(0);
}

/* Newspaper button active state (Tearsheet only) */
.watchlist-detached-symbol.wds-style--tearsheet .ts-newspaper-btn.is-active {
    background: #1a1208;
    color: #faf8f2;
    border-color: #1a1208;
}

/* ── Newspaper typography — Financial Times register ─────────────────────── */
/* Headline face: Georgia Bold approximates FT's Financier Display.           */
/* Body face:     Georgia / Times gives the compact editorial feel.           */
/* Palette:       FT salmon masthead (#FFF1E5), dark ink (#33302E).           */

.ts-newspaper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #FFF1E5;
    font-family: Georgia, 'Times New Roman', serif;
    color: #33302E;
    /* The front page's nameplate and narrow-window rules key off this
       window's own width, not the viewport — it's often a detached panel. */
    container-type: inline-size;
}

/* ── Masthead ── */
.ts-masthead {
    background: #33302E;
    color: #FFF1E5;
    padding: 8px 16px 6px;
    flex-shrink: 0;
    border-bottom: 3px solid #c9a96e;
}

.ts-masthead__flag {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: Georgia, 'Times New Roman', serif;
    color: #FFF1E5;
    display: block;
    line-height: 1.1;
}

.ts-masthead__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.ts-masthead__date {
    font-size: 10px;
    color: #c8bfb0;
    font-style: italic;
    flex: 1;
}

.ts-masthead__counter {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: #c8bfb0;
    white-space: nowrap;
}

/* ── Front page (page 1 only) — a full nameplate cover, not a folio strip.
   Pages 2+ keep .ts-masthead above unchanged. ── */
.ts-front {
    flex-shrink: 0;
    background: #FFF1E5;
    color: #33302E;
}

.ts-front__ears {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 6px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ts-front__ear {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ts-front__ear--left { align-items: flex-start; }
.ts-front__ear--center { align-self: center; color: #9a8060; white-space: nowrap; }
.ts-front__ear--right { align-items: flex-end; text-align: right; }

.ts-front__ear-date { color: #33302E; }
.ts-front__ear-count { color: #9a8060; }

/* Signature element — the cover "price" is the live share price. Set in
   Georgia so it reads like a price, not a monospace badge. */
.ts-front__price {
    display: block;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: #1a1208;
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

.ts-front__outlook { display: block; margin-top: 2px; }
.ts-front__outlook--positive { color: #1a5a1a; }
.ts-front__outlook--negative { color: #5a1a1a; }
.ts-front__outlook--neutral  { color: #5a4a2a; }

.ts-front__nameplate {
    text-align: center;
    padding: 2px 16px 10px;
}

.ts-front__kicker {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a6030;
    margin: 0 0 4px;
}

.ts-front__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(30px, 7cqw, 52px);
    letter-spacing: 0.04em;
    line-height: 1;
    color: #1a1208 !important;
    margin: 0;
}

/* Classic Oxford double rule beneath a nameplate. */
.ts-front__rule {
    border-top: 3px solid #33302E;
    border-bottom: 1px solid #33302E;
    height: 2px;
    margin: 0 0 8px;
}

/* Scrollable front-page flow: banner headline → deck → byline → body →
   In Brief, in a single column — unlike the two-pane spread inside. */
.ts-front__page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 14px;
}

.ts-front__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
    text-wrap: balance;
    color: #1a1208 !important;
    margin: 4px auto 8px;
    max-width: 44ch;
}

.ts-front__headline--xl { font-size: 44px; }
.ts-front__headline--lg { font-size: 34px; }
.ts-front__headline--sm { font-size: 27px; }

.ts-front__deck {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: #4a3f2f;
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 10px;
}

.ts-front__deck-rule {
    height: 1px;
    background: #c9a96e;
    margin: 0 0 10px;
}

.ts-front__page > .ts-col-byline { margin-bottom: 8px; }

.ts-front__body {
    column-width: 34ch;
    column-gap: 22px;
    column-rule: 1px solid #e8d8b0;
}

.ts-front__body .ts-body { margin: 0 0 9px; }

.ts-front__briefs-rule {
    border-top: 2px solid #33302E;
    margin: 14px 0 10px;
}

.ts-front__briefs {
    columns: 3;
    column-gap: 20px;
}

.ts-front__briefs .ts-brief {
    break-inside: avoid;
    width: 100%;
}

.ts-front__empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.ts-front__empty-dateline {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 11px;
    color: #9a8060;
}

.ts-front__empty-notice {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 14px;
    color: #33302E;
    border: 1px solid #33302E;
    padding: 16px 26px;
}

/* Narrow Focus window — a container query against .ts-newspaper's own
   inline size, since this newspaper is often a resizable detached panel
   rather than the full viewport. */
@container (max-width: 700px) {
    .ts-front__briefs { columns: 2; }
}

@container (max-width: 520px) {
    .ts-front__ear--center { display: none; }
    .ts-front__ear-count,
    .ts-front__outlook { display: none; }
    .ts-front__briefs { columns: 1; }
    .ts-front__headline--xl { font-size: 34px; }
    .ts-front__headline--lg { font-size: 27px; }
    .ts-front__headline--sm { font-size: 22px; }
}

/* ── Two-column broadsheet spread ── */
.ts-spread {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    min-height: 0;
    overflow: hidden;
}

.ts-col-divider {
    background: #c9a96e;
    width: 1px;
    margin: 10px 0;
}

/* ── Per-article column content ── */
.ts-col-byline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ts-col-date {
    font-size: 10px;
    color: #9a8060;
    font-style: italic;
}

.ts-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 1px 5px;
    font-family: 'Courier New', monospace;
    border-radius: 2px;
}

.ts-badge--positive { background: #d4edda; color: #1a5a1a; }
.ts-badge--negative { background: #f8d7da; color: #5a1a1a; }
.ts-badge--neutral  { background: #e8e0d0; color: #5a4a2a; }
.ts-badge--event    { background: #fff3cd; color: #5a4a00; }

.ts-body {
    font-size: 13px;
    line-height: 1.68;
    color: #33302E;
    margin: 0 0 10px;
    /* Justified + hyphenated columns are the single strongest "newspaper"
       signal. hyphens:auto needs the document lang set (base template is en). */
    text-align: justify;
    hyphens: auto;
}

.ts-body:last-child {
    margin-bottom: 0;
}

/* End-of-article tombstone — visually closes an article so short items read
   as finished rather than truncated. Appended inline to the last paragraph. */
.ts-endmark {
    color: #9a6030;
    font-size: 0.85em;
    padding-left: 2px;
}

/* Drop cap belongs to the opening paragraph only, AND only when that
   paragraph carries real weight — the ts-body--lead class is added by JS
   solely to first paragraphs past a length threshold, so a 10-word stub no
   longer gets an accidental oversized leading letter. */
.ts-body--lead::first-letter {
    font-size: 3em;
    font-weight: 700;
    float: left;
    line-height: 0.82;
    margin: 3px 5px 0 0;
    color: #1a1208;
    font-family: Georgia, 'Times New Roman', serif;
}

.ts-body strong {
    font-weight: 700;
    color: #1a1208;
}

.ts-body em {
    font-style: italic;
    color: #4a3f2f;
}

.ts-badge--claude {
    background: #33302E;
    color: #c9a96e;
    border: 1px solid #c9a96e;
}

/* ── Weight-based layout: features vs briefs ─────────────────────────────── */
/* A feature leads the page and takes the larger share so its body can flow in
   multiple columns; the brief rail sits beside it. */
.ts-spread--feature { grid-template-columns: 1.9fr 1px 1fr; }

/* Only story in the edition — spans the full width, no empty second column. */
.ts-spread--solo { grid-template-columns: 1fr; }

.ts-feature {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 16px 10px;
    min-height: 0;
}

.ts-feature__headline {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.14;
    margin: 3px 0 7px;
    color: #1a1208 !important;
    font-family: Georgia, 'Times New Roman', serif;
    text-wrap: balance;
}

/* Short, punchy headline = display headline, one size step up. */
.ts-feature__headline--short { font-size: 29px; }

.ts-feature__deck {
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
    color: #4a3f2f;
    margin: 0 0 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #c9a96e;
}

/* Multi-column body — the strongest broadsheet signal; lets a medium digest
   fill the page horizontally instead of leaving a tall skinny column. */
.ts-feature__body {
    column-width: 34ch;
    column-gap: 22px;
    column-rule: 1px solid #e8d8b0;
}

.ts-feature__body .ts-body { margin: 0 0 9px; }

/* Brief rail — FT "In Brief" register: stacked short items, thin rules. */
.ts-rail {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 14px 10px;
    min-height: 0;
}

.ts-rail__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a6030;
    border-bottom: 2px solid #33302E;
    padding-bottom: 4px;
    margin: 0 0 8px;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

.ts-brief {
    padding: 9px 0;
    border-top: 1px solid #e0d2b8;
}

.ts-brief:first-of-type { border-top: none; padding-top: 2px; }

.ts-brief__hd {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    margin: 3px 0 4px;
    color: #1a1208 !important;
    font-family: Georgia, 'Times New Roman', serif;
}

.ts-brief__text {
    font-size: 12px;
    line-height: 1.5;
    color: #33302E;
    margin: 0;
    text-align: justify;
    hyphens: auto;
}

.ts-brief__note {
    font-size: 10px;
    font-style: italic;
    color: #9a8060;
    margin-top: 4px;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Claude-digest loading indicator — shown in a brief rail item while its
   on-demand digest fetch is in flight (removed on success or failure). */
.ts-digest-loading {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}

.ts-digest-loading__text {
    font-size: 10px;
    font-style: italic;
    color: #9a8060;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.02em;
}

.ts-digest-loading__bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ts-digest-loading__bar {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #e8d8b0 0%, #c9a96e 40%, #e8d8b0 100%);
    background-size: 200% 100%;
    animation: ts-shimmer 1.6s ease-in-out infinite;
    border-radius: 1px;
}

.ts-digest-loading__bar:nth-child(2) {
    width: 82%;
    animation-delay: 0.13s;
}

.ts-digest-loading__bar:nth-child(3) {
    width: 60%;
    animation-delay: 0.26s;
}

@keyframes ts-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Contents box — fills a genuinely empty column and doubles as navigation. */
.ts-contents {
    overflow-y: auto;
    padding: 12px 14px 10px;
    min-height: 0;
}

.ts-contents__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a6030;
    border-bottom: 2px solid #33302E;
    padding-bottom: 4px;
    margin: 0 0 8px;
    font-family: 'Courier New', monospace;
}

.ts-contents__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-contents__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px solid #e0d2b8;
    padding: 8px 0;
    cursor: pointer;
    text-align: left;
    font-family: Georgia, 'Times New Roman', serif;
}

.ts-contents__list li:first-child .ts-contents__item { border-top: none; }

.ts-contents__hd {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1208;
}

.ts-contents__item:hover .ts-contents__hd { color: #9a6030; text-decoration: underline; text-underline-offset: 2px; }

.ts-contents__pg {
    font-size: 10px;
    color: #9a8060;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Navigation bar ── */
.ts-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 8px;
    border-top: 2px solid #33302E;
    background: #33302E;
    flex-shrink: 0;
    gap: 8px;
}

.ts-nav__btn {
    background: transparent;
    color: #FFF1E5;
    border: 1px solid #c9a96e;
    padding: 4px 14px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ts-nav__btn:hover:not(:disabled) { background: #c9a96e; color: #33302E; }
.ts-nav__btn:disabled { opacity: 0.25; cursor: default; }

.ts-nav__btn:focus-visible,
.ts-contents__item:focus-visible {
    outline: 2px solid #33302E;
    outline-offset: 2px;
}

.ts-nav__page {
    font-size: 11px;
    color: #c8bfb0;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.06em;
}

.ts-empty,
.ts-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
    color: #9a8060;
    font-style: italic;
    font-family: Georgia, serif;
    background: #FFF1E5;
}

.watchlist-upgrades-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: default;
}

.watchlist-upgrades-item + .watchlist-upgrades-item {
    margin-top: 2px;
}

.watchlist-upgrades-item:hover,
.watchlist-upgrades-item.is-focused {
    outline: 2px solid var(--accent, #1a73e8);
    outline-offset: -2px;
}

.watchlist-upgrades-item.is-positive {
    background-color: #e7f6ed;
    color: #0f5132;
}

.watchlist-upgrades-item.is-negative {
    background-color: #fdecea;
    color: #842029;
}

.watchlist-upgrades-item.is-neutral {
    background-color: #f7f7f7;
    color: #2f2f2f;
}

.watchlist-upgrades-item.is-empty {
    background-color: transparent;
    color: var(--text-primary, #666);
    justify-content: center;
    font-style: italic;
    padding: 16px 10px;
}

.watchlist-upgrades-item__badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--accent, #1a73e8);
    color: #ffffff;
    align-self: center;
    visibility: hidden;
}

.watchlist-upgrades-item.is-new .watchlist-upgrades-item__badge {
    visibility: visible;
}

.watchlist-upgrades-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.watchlist-upgrades-item__target-delta {
    flex: 0 0 auto;
    align-self: center;
    min-width: 56px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
}

.watchlist-upgrades-item__line1 {
    font-weight: 600;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.watchlist-upgrades-item__line1-sep {
    opacity: 0.5;
}

.watchlist-upgrades-item__line2,
.watchlist-upgrades-item__line3 {
    white-space: normal;
    word-break: break-word;
    margin-top: 2px;
}

.watchlist-upgrades-item__action {
    font-size: 0.85em;
    opacity: 0.75;
    margin-left: 4px;
}

.chart-pair{
  display: flex;
  padding: 8px 12px;
  gap: 16px;
  width: 100%;
}

.chart-half{
  flex: 1 1 0;
  height: 400px;
  min-width: 0;         /* prevents flex overflow issues */
}

.chart-pair:only-child .chart-half:only-child,
.chart-pair .chart-half:only-child {
  height: 420px;
}

/* vertical divider between halves */
.chart-half + .chart-half {
    border-left: 1px solid #e3e3e3;
    padding-left: 16px;
}

body[data-theme] .chart-title-box {
    background-color: var(--panel-muted);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .watchlist-upgrades-button {
    color: var(--text-primary);
}

body[data-theme] .watchlist-upgrades-listbox {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .watchlist-upgrades-item.is-positive {
    background-color: color-mix(in srgb, #2ecc71 22%, var(--panel));
    color: color-mix(in srgb, #2ecc71 70%, var(--text-primary));
}

body[data-theme] .watchlist-upgrades-item.is-negative {
    background-color: color-mix(in srgb, #e74c3c 22%, var(--panel));
    color: color-mix(in srgb, #e74c3c 70%, var(--text-primary));
}

body[data-theme] .watchlist-upgrades-item.is-neutral {
    background-color: var(--panel-muted);
    color: var(--text-primary);
}

body[data-theme] .chart-half + .chart-half {
    border-left-color: var(--border);
}

/* sector-tab-button inherits all styling from .tab-group__btn */
.sector-tab-button {
    margin: 0;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    #headerSection {
        height: auto;
        flex-wrap: wrap;
    }

    .title-box {
        height: 48px;
        padding: 0 14px;
    }

    #menuTabsContainer {
        order: 3;
        flex: 0 0 100%;
        border-top: 1px solid var(--border, #1e293b);
        padding: 6px 12px;
        justify-content: flex-start;
    }

    #menuTabsContainer:empty {
        display: none;
    }

    #dynamic-content {
        order: 2;
        flex: 1;
        padding: 0 8px 0 0;
    }

    .tab-group {
        max-width: 100%;
    }
}

@media (max-width: 540px) {
    .tab-group__btn {
        font-size: 11.5px;
        padding: 0 10px;
    }

    .header-actions .app-toolbar-button {
        font-size: 11.5px;
        padding: 0 8px;
    }
}

.nav-item {
    display: inline-block;
    margin-right: 10px;
}

.nav-link {
    color: #007bff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    background-color: #007bff;
    color: #fff;
}

.nav-link.active {
    background-color: #0056b3;
    color: #fff;
}

/* ================================== */
/*         Miscellaneous Styles       */
/* ================================== */

/* Checkbox grid layout */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.checkbox-item label {
    margin-left: 5px;
}

/* Calendar grid styling */
.week-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    align-items: start;
}

.current-day {
    border: 2px solid #007bff;
    background-color: #e7f5ff;
}

/* Market data and chart container styling */
#market-data {
    background-color: #f5f5f5;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#chart {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Panel container styling */
.panel-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

.panel {
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.tooltip {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
}

canvas {
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .horizontal-container {
        flex-direction: column;
    }

    .left-side-container,
    .right-side-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .chart-wrapper {
        flex: 1 1 200px;
    }

    .chart-title-box {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .chart-title-main,
    .chart-title-text {
        width: 100%;
    }

    .chart-info-panel__details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .chart-wrapper {
        flex: 1 1 100%;
    }

    .chart-title-tabs {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ================================== */
/*            Clock Styles            */
/* ================================== */

#clocksContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.clock {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clock:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.clock img {
    width: 24px;
    height: 18px;
    border-radius: 2px;
}

.clock h5 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.clock .time {
    font-size: 24px;
    color: #333;
    margin-bottom: 5px;
}

.clock .date {
    font-size: 14px;
    color: #777;
}

.clock .status {
    font-size: 14px;
    margin-top: 5px;
    color: #555;
}



.mini-chart {
    width: 100px;
    height: 40px; /* Adjust as necessary to fit within table row */
}



.watchlist-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.watchlist-header__copy {
    position: relative;
    padding-left: 14px;
}

.watchlist-header__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: #2563eb;
}

.watchlist-header__copy h5 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.watchlist-header__copy p {
    margin: 6px 0 0;
    max-width: 760px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #64748b;
}

.watchlist-header__count {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #d7e0ea;
    background: #f8fafc;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.symbol-search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

#symbolSearchInput {
    flex: 1 1 240px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.98rem;
}

#symbolSearchInput:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

#symbolSearchButton,
#deleteWatchlistButton {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

#symbolSearchButton:hover,
#deleteWatchlistButton:hover {
    transform: translateY(-1px);
    background: #eef2ff;
    border-color: #93c5fd;
}

#deleteWatchlistButton {
    margin-top: 14px;
}

/* ── "Preparing data" UX for newly added watchlist symbols ───────────────── */
.watchlist-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--accent, #1a73e8) 28%, transparent);
    border-top-color: var(--accent, #1a73e8);
    border-radius: 50%;
    animation: watchlist-spin 0.7s linear infinite;
    flex: none;
}
.watchlist-spinner--lg { width: 20px; height: 20px; border-width: 3px; }

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

.watchlist-pending-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary, #64748b);
    font-size: 0.85em;
}
.watchlist-pending-cell__label { font-style: italic; }

.watchlist-summary-row.is-data-pending {
    background: color-mix(in srgb, var(--accent, #1a73e8) 5%, transparent);
}
/* Dim the not-yet-available cells, but keep symbol/price/focus legible. */
.watchlist-summary-row.is-data-pending td:not(.watchlist-select-cell):not(.watchlist-focus-cell):not(.watchlist-company-cell):not(.watchlist-price-cell) {
    opacity: 0.4;
}

.watchlist-pending-banner {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent, #1a73e8) 35%, var(--border, #d1d5db));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #1a73e8) 8%, var(--panel, #ffffff));
    color: var(--text-primary, #111827);
}
.watchlist-pending-banner__head { display: flex; align-items: center; gap: 12px; }
.watchlist-pending-banner__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.watchlist-pending-banner__title { font-size: 0.95rem; font-weight: 700; }
.watchlist-pending-banner__warn {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
}

.watchlist-pending-progress {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary, #111827) 10%, transparent);
    overflow: hidden;
}
.watchlist-pending-progress__bar {
    height: 100%;
    width: 2%;
    border-radius: inherit;
    background: var(--accent, #1a73e8);
    transition: width 0.9s linear;
}
.watchlist-pending-banner.is-overrun .watchlist-pending-progress__bar { background: var(--warn, #d97706); }
.watchlist-pending-progress__caption {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}

@media (prefers-reduced-motion: reduce) {
    .watchlist-spinner { animation-duration: 1.8s; }
    .watchlist-pending-progress__bar { transition: none; }
}

.financial-summary-table {
    /* Fixed layout makes the per-column widths below authoritative and stable
       (content no longer reflows the grid as symbols/data change). The table
       is simply width:100% so columns always squeeze to fill the container and
       there is NO horizontal scrollbar at normal widths. A px floor (and thus a
       scrollbar) is only introduced at a genuinely tight width via media query
       below, so squeezing is always preferred over scrolling. */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.financial-summary-table th,
.financial-summary-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.financial-summary-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Clip a long header in a squeezed column so its nowrap text can't spill
       past the table edge and re-trigger a horizontal scrollbar. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.financial-summary-table td {
    font-size: 0.97rem;
    color: #0f172a;
}

.financial-summary-table a,
.financial-summary-table a:visited {
    color: inherit;
}

/* Column width budget — sums to 100% under table-layout: fixed (see the table
   rule above). Tuned so each column fits its content at the 1400px min-width:
   Signals holds three chips + the news pill, Earnings Snapshot holds the 3-up
   metric grid, AI Report holds its tag row + descriptor. */
.financial-summary-table .col-select {
    width: 3%;
    text-align: center;
}

.financial-summary-table .col-focus {
    width: 3%;
    text-align: left;
}

.financial-summary-table td.col-focus {
    text-align: center;
}

.financial-summary-table .col-company {
    width: 10%;
}

/* Left-align both header and value so "PRICE" stacks over the price. */
.financial-summary-table th.col-price,
.financial-summary-table .col-price {
    width: 7%;
    text-align: left;
}

.financial-summary-table .col-earnings-date {
    width: 10%;
}

.financial-summary-table .col-earnings {
    width: 16%;
}

.financial-summary-table .col-signals {
    width: 27%;
}

.financial-summary-table .col-ai-report {
    width: 12%;
    text-align: left;
}

.financial-summary-table .col-alerts {
    width: 12%;
    text-align: left;
}

.watchlist-alerts-cell {
    text-align: left;
    vertical-align: middle;
}

.watchlist-price-cell {
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

@keyframes price-flash {
    0%   { color: #4ade80; }
    25%  { color: #22c55e; }
    100% { color: var(--text-primary, #0f172a); }
}

.watchlist-price-cell.price-updated {
    animation: price-flash 1.8s ease-in forwards;
}

@keyframes alert-badge-flash {
    0%   { background: rgba(22,163,74,0.65); }
    25%  { background: rgba(22,163,74,0.50); }
    100% { background: rgba(34,197,94,0.10); }
}

.watchlist-alert-level.is-active.badge-updated {
    animation: alert-badge-flash 1.8s ease-in forwards;
}

/* ────────────────────────────────────────────────────────────────────────── */

.watchlist-alerts-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.watchlist-alert-levels {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    min-width: 0;
    /* Was `flex: none` (= 0 0 auto), which pins this row to its natural
       content width and blocks it from ever shrinking below that — so the
       max-width/flex:1 on .watchlist-alert-level chips (below) could never
       actually take effect. `1 1 auto` lets the row itself shrink with its
       column, which is what lets the chips shrink in turn. */
    flex: 1 1 auto;
    cursor: pointer;
    align-items: center;
}

/* flex (not a hard width) so a two-alert row can shrink with its column
   instead of forcing table overflow — max-width keeps the roomy-layout look
   unchanged, min-width:0 lets it go narrower than content once squeezed, and
   the inner __main label's own ellipsis (below) absorbs the difference. */
.watchlist-alert-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 148px;
    /* min-height (+ unitless line-height, instead of relying on the font's
       own 'normal' metrics) locks the badge to one height regardless of
       which Focus skin's font-family is active — serif/monospace fonts
       otherwise report different natural line heights at the same font-size,
       which is why badges looked "flat" in some skins and roomier in others. */
    min-height: 30px;
    line-height: 1.3;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1px solid rgba(124,58,237,0.22);
    background: rgba(124,58,237,0.10);
    color: #7c3aed;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.watchlist-alert-level__main {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.watchlist-alert-level__pct {
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    opacity: 0.85;
}

.watchlist-alert-level__pct--above { color: #15803d; }
.watchlist-alert-level__pct--below { color: #dc2626; }
.watchlist-alert-level.is-paused .watchlist-alert-level__pct { color: inherit; opacity: 0.55; }

.watchlist-alert-level.is-active {
    border-color: rgba(34,197,94,0.28);
    background: rgba(34,197,94,0.10);
    color: #15803d;
}

.watchlist-alert-level.is-paused {
    border-color: rgba(148,163,184,0.24);
    background: rgba(148,163,184,0.10);
    color: #64748b;
}

.watchlist-alert-level--empty {
    width: auto;
    opacity: 0.55;
}

/* ── Alert delivery channel toggles (Focus window Alerts section) ────── */

.watchlist-alert-channel-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.watchlist-alert-channel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(148,163,184,0.08);
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.watchlist-alert-channel-toggle:hover {
    border-color: rgba(148,163,184,0.45);
}

.watchlist-alert-channel-toggle__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}

.watchlist-alert-channel-toggle.is-on {
    border-color: rgba(34,197,94,0.32);
    background: rgba(34,197,94,0.12);
    color: #15803d;
}

.watchlist-alert-channel-toggle.is-on .watchlist-alert-channel-toggle__dot {
    opacity: 1;
}

.watchlist-alert-channel-edit-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.watchlist-alert-channel-edit-btn:hover {
    color: #475569;
}

.watchlist-alert-channel-number-row {
    display: none;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.watchlist-alert-channel-number-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.03);
    font-size: 0.8rem;
}

.watchlist-alert-channel-number-save {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(34,197,94,0.32);
    background: rgba(34,197,94,0.12);
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Draggable alert line handles (inside chart containers) ────── */

.alert-drag-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

.alert-drag-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    transform: translateY(-50%);
    cursor: ns-resize;
    pointer-events: auto;
    user-select: none;
}

.alert-drag-handle__line {
    position: absolute;
    left: 7.5%;
    right: 4.5%;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    border-top: 2px dashed currentColor;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.12s;
}

.alert-drag-handle:hover .alert-drag-handle__line { opacity: 1; }

.alert-drag-handle__label {
    position: absolute;
    left: 8%;
    top: 50%;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.alert-drag-handle__grip {
    position: absolute;
    right: 5.5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.12s;
}

.alert-drag-handle:hover .alert-drag-handle__grip { opacity: 1; }

/* Active state (amber) */
.alert-drag-handle--active { color: #d97706; }
.alert-drag-handle--active .alert-drag-handle__label {
    background: rgba(255, 237, 213, 0.96);
    color: #92400e;
}

/* Paused state (slate) */
.alert-drag-handle--paused { color: #94a3b8; }
.alert-drag-handle--paused .alert-drag-handle__label {
    background: rgba(241, 245, 249, 0.96);
    color: #475569;
}

/* Dark theme */
body[data-theme] .alert-drag-handle--active { color: #fbbf24; }
body[data-theme] .alert-drag-handle--active .alert-drag-handle__label {
    background: rgba(120, 53, 15, 0.90);
    color: #fde68a;
}
body[data-theme] .alert-drag-handle--paused .alert-drag-handle__label {
    background: rgba(30, 41, 59, 0.90);
    color: #94a3b8;
}

/* ── ──────────────────────────────────────────────────────────── */

.watchlist-alert-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(124,58,237,0.28);
    background: transparent;
    color: #7c3aed;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background 0.13s, border-color 0.13s;
}

.watchlist-alert-add-btn:hover {
    background: rgba(124,58,237,0.10);
    border-color: rgba(124,58,237,0.45);
}

.watchlist-alert-add-btn.is-disabled,
.watchlist-alert-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Alert quick-add popover ─────────────────────────────── */
.watchlist-alert-popover {
    display: none;
    position: fixed;
    z-index: 9100;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 36px rgba(15,23,42,0.18);
    padding: 18px;
    min-width: 320px;
}

.watchlist-alert-popover.is-visible { display: block; }

.watchlist-alert-popover__sym {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #7c3aed;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.watchlist-alert-popover__existing {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

.wap-existing-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.wap-existing-row__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}

.wap-existing-row__dot--is-active { background: #22c55e; }
.wap-existing-row__dot--is-paused { background: #94a3b8; }

.wap-existing-row__label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wap-existing-row__del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}

.wap-existing-row__del:hover { color: #ef4444; background: rgba(239,68,68,0.10); }
.wap-existing-row__del:disabled { opacity: 0.5; cursor: not-allowed; }

.watchlist-alert-popover__sep {
    height: 1px;
    background: #e2e8f0;
    margin: 12px 0;
}

.watchlist-alert-popover__row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.watchlist-alert-popover__input {
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 0 10px;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    transition: border-color 0.13s;
    -webkit-appearance: none;
    appearance: none;
}

.watchlist-alert-popover__input:focus { border-color: #7c3aed; }
.watchlist-alert-popover__input--cond { flex: 1; min-width: 0; }
.watchlist-alert-popover__input--val  { width: 72px; }

.watchlist-alert-popover__add {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border: none;
    background: #7c3aed;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.13s;
}

.watchlist-alert-popover__add:hover:not(:disabled) { opacity: 0.84; }
.watchlist-alert-popover__add:disabled { opacity: 0.5; cursor: not-allowed; }

/* Dark-theme overrides */
body[data-theme] .watchlist-alert-level {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent, #7c3aed);
}

body[data-theme] .watchlist-alert-level.is-active {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.24);
    color: #4ade80;
}

body[data-theme] .watchlist-alert-level.is-active .watchlist-alert-level__pct--above { color: #4ade80; }
body[data-theme] .watchlist-alert-level.is-active .watchlist-alert-level__pct--below { color: #f87171; }

body[data-theme] .watchlist-alert-level.is-paused {
    background: rgba(148,163,184,0.12);
    border-color: rgba(148,163,184,0.22);
    color: #cbd5e1;
}

body[data-theme] .watchlist-alert-add-btn {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent, #7c3aed);
}

body[data-theme] .watchlist-alert-add-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

body[data-theme] .watchlist-alert-popover {
    background: var(--panel, #1e1e2e);
    border-color: var(--border, #334155);
    color: var(--text-primary, #f1f5f9);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

body[data-theme] .watchlist-alert-popover__input {
    background: var(--panel-muted, #1f2937);
    border-color: var(--border, #334155);
    color: var(--text-primary, #f1f5f9);
}

body[data-theme] .watchlist-alert-popover__sym {
    color: var(--accent, #7c3aed);
}

body[data-theme] .watchlist-alert-popover__sep {
    background: var(--border, #334155);
}

body[data-theme] .wap-existing-row {
    background: color-mix(in srgb, var(--panel-muted, #1f2937) 90%, transparent);
    border-color: var(--border, #334155);
}

body[data-theme] .wap-existing-row__label {
    color: var(--text-primary, #f1f5f9);
}

body[data-theme] .wap-existing-row__del {
    color: var(--text-muted, #64748b);
}

.watchlist-summary-row {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.watchlist-summary-row:nth-child(odd) {
    background-color: #ffffff;
}

.watchlist-summary-row:nth-child(even) {
    background-color: #fbfdff;
}

.watchlist-summary-row:hover {
    background-color: #f5f8fc;
}

.watchlist-summary-row.is-selected {
    background-color: #eff6ff;
}

.watchlist-summary-row--flash {
    background-color: #fff7ed !important;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.watchlist-select-cell {
    text-align: center;
}

.watchlist-row-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2563eb;
}

.watchlist-company-cell {
    min-width: 0;
}

.watchlist-company-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.watchlist-focus-cell {
    text-align: center;
    vertical-align: middle;
}

.watchlist-company-symbol {
    font-size: 1.04rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.watchlist-company-name {
    display: block;
    margin-top: 4px;
    max-width: 240px;
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.watchlist-row-detach-btn {
    appearance: none;
    /* Track the Focus column width like every other cell's content: fill the
       cell and shrink with it (no fixed min-width) so the button never spills
       into the next column at tight widths. Text clips with an ellipsis. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.watchlist-row-detach-btn:hover,
.watchlist-row-detach-btn:focus-visible {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #2563eb;
    color: #1d4ed8;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 8px 18px rgba(37, 99, 235, 0.18);
}

.watchlist-row-detach-btn.is-open {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.watchlist-row-detach-btn.is-open:hover,
.watchlist-row-detach-btn.is-open:focus-visible {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1e40af;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 6px 16px rgba(37, 99, 235, 0.30);
}

body[data-theme] .watchlist-row-detach-btn.is-open {
    background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, #000000) 100%);
    border-color: color-mix(in srgb, var(--accent) 80%, #000000);
    color: #ffffff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

body[data-theme] .watchlist-row-detach-btn.is-open:hover,
body[data-theme] .watchlist-row-detach-btn.is-open:focus-visible {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #000000) 0%, color-mix(in srgb, var(--accent) 68%, #000000) 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.watchlist-earnings-date-cell {
    min-width: 0;
}

.watchlist-date-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
}

.watchlist-date-badge.is-urgent {
    background: #fee2e2;
    color: #991b1b;
}

.watchlist-date-badge.is-soon {
    background: #fef3c7;
    color: #92400e;
}

.watchlist-date-badge.is-scheduled {
    background: #dbeafe;
    color: #1d4ed8;
}

.watchlist-date-badge.is-past,
.watchlist-date-badge.is-muted {
    background: #e2e8f0;
    color: #475569;
}

.watchlist-earnings-relative,
.watchlist-earnings-quarter {
    font-size: 0.88rem;
    line-height: 1.35;
    color: #64748b;
    white-space: nowrap;
}

.watchlist-earnings-quarter {
    margin-top: 2px;
}

.watchlist-earnings-snapshot-cell {
    min-width: 0;
}

.watchlist-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.watchlist-metric {
    min-width: 0;
    overflow: hidden;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.watchlist-metric__label {
    display: block;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-metric__value {
    display: block;
    margin-top: 6px;
    font-size: 0.93rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-metric__value.is-positive {
    color: #047857;
}

.watchlist-metric__value.is-negative {
    color: #be123c;
}

.watchlist-metric__value.is-neutral,
.watchlist-metric__value.is-muted {
    color: #475569;
}

.watchlist-signals-cell {
    min-width: 0;
}

.watchlist-signals-group {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-width: 340px;
}

.watchlist-signal-chip {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    padding: 9px 11px;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.watchlist-signal-chip__label {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.watchlist-signal-chip__value {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.watchlist-signal-chip.is-positive {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.watchlist-signal-chip.is-negative {
    background: #fff1f2;
    border-color: #fda4af;
    color: #9f1239;
}

.watchlist-signal-chip.is-neutral {
    background: #f8fafc;
    border-color: #d7e0ea;
    color: #0f172a;
}

/* Caution tone — used by Trend "Flat" and Financials "Mixed" verdicts. */
.watchlist-signal-chip.is-caution {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

/* Read-only deterministic badges (Trend / Financials) are not clickable. */
.watchlist-signal-chip--readonly {
    cursor: default;
}

/* Color only the verdict value by tone so the category label stays muted —
   makes it obvious at a glance what each badge judges and how it reads. */
.watchlist-signal-chip.is-positive .watchlist-signal-chip__value { color: #047857; }
.watchlist-signal-chip.is-negative .watchlist-signal-chip__value { color: #be123c; }
.watchlist-signal-chip.is-caution  .watchlist-signal-chip__value { color: #b45309; }

/* ── Watchlist layout skin switcher (Standard / Compact / Terminal) ──────── */
.watchlist-skin-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #d7e0ea;
    border-radius: 9px;
    background: #f1f5f9;
    margin-right: 8px;
}

.watchlist-skin-btn {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 7px;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.watchlist-skin-btn:hover { color: #0f172a; }

.watchlist-skin-btn.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Ticker avatar + stacked company text (matches watchlist_designs). */
.watchlist-company-inner {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.watchlist-company-text { min-width: 0; }
.watchlist-company-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--wl-avatar-bg, #334155);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: -0.02em;
}

/* Monospaced, tabular price across skins (as in the mockups). */
.watchlist-price-cell {
    font-variant-numeric: tabular-nums;
}

/* Analyst chip shows consensus; unseen upgrade/downgrade activity is a dot. */
.watchlist-upgrades-button { position: relative; }
.watchlist-upgrades-button.has-analyst-updates::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 0 2px var(--panel, #ffffff);
}

/* ════════════════════════════════════════════════════════════════════════
   WATCHLIST SKINS — match the three watchlist_designs layouts (Standard /
   Compact / Terminal). Shape/typography/density differ per skin; all COLOR
   comes from the active theme tokens, so the theme selector drives the palette.
   DOM is identical across skins, so no data columns are lost.
   ════════════════════════════════════════════════════════════════════════ */

/* ── STANDARD (Design 1) — spacious, avatar-led, rounded chips ──────────── */
#watchlistContainer.wl-skin--standard .financial-summary-table th,
#watchlistContainer.wl-skin--standard .financial-summary-table td {
    padding: 15px 14px;
}
#watchlistContainer.wl-skin--standard .watchlist-price-cell,
#watchlistContainer.wl-skin--standard .watchlist-company-symbol {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
#watchlistContainer.wl-skin--standard .watchlist-signal-chip {
    border-radius: 10px;
}

/* ── COMPACT (Design 2) — dense scanning tape, no avatar, mono numerics ──── */
#watchlistContainer.wl-skin--compact .watchlist-company-avatar { display: none; }
#watchlistContainer.wl-skin--compact .financial-summary-table th {
    padding: 7px 10px;
    font-size: 0.64rem;
}
#watchlistContainer.wl-skin--compact .financial-summary-table td {
    padding: 7px 10px;
    font-size: 0.84rem;
}
#watchlistContainer.wl-skin--compact .watchlist-price-cell {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
#watchlistContainer.wl-skin--compact .watchlist-company-symbol { font-size: 0.86rem; }
#watchlistContainer.wl-skin--compact .watchlist-company-name {
    font-size: 0.72rem;
    margin-top: 1px;
}
#watchlistContainer.wl-skin--compact .watchlist-signals-group {
    gap: 5px;
    max-width: 300px;
}
#watchlistContainer.wl-skin--compact .watchlist-signal-chip {
    padding: 3px 7px;
    border-radius: 6px;
    gap: 1px;
}
#watchlistContainer.wl-skin--compact .watchlist-signal-chip__label { font-size: 0.58rem; }
#watchlistContainer.wl-skin--compact .watchlist-signal-chip__value { font-size: 0.76rem; }
#watchlistContainer.wl-skin--compact .watchlist-metrics-grid { gap: 8px; }
#watchlistContainer.wl-skin--compact .watchlist-metric__value { font-size: 0.78rem; }
#watchlistContainer.wl-skin--compact .watchlist-tier-pill {
    padding: 2px 8px;
    font-size: 0.68rem;
}

/* ── TERMINAL (Design 3) — monospace desk, uppercase, square chips ──────── */
#watchlistContainer.wl-skin--terminal .financial-summary-table {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
#watchlistContainer.wl-skin--terminal .watchlist-company-avatar { display: none; }
#watchlistContainer.wl-skin--terminal .financial-summary-table th {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 10px;
}
#watchlistContainer.wl-skin--terminal .financial-summary-table td {
    padding: 9px 10px;
    font-size: 0.8rem;
}
#watchlistContainer.wl-skin--terminal .watchlist-company-symbol {
    letter-spacing: 0.04em;
    font-size: 0.9rem;
}
#watchlistContainer.wl-skin--terminal .watchlist-company-name { font-size: 0.68rem; }
#watchlistContainer.wl-skin--terminal .watchlist-signals-group { gap: 6px; }
#watchlistContainer.wl-skin--terminal .watchlist-signal-chip {
    border-radius: 3px;
    padding: 5px 8px;
}
#watchlistContainer.wl-skin--terminal .watchlist-signal-chip__label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
}
#watchlistContainer.wl-skin--terminal .watchlist-signal-chip__value {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}
#watchlistContainer.wl-skin--terminal .watchlist-tier-pill {
    border-radius: 3px;
    font-size: 0.68rem;
}
#watchlistContainer.wl-skin--terminal .watchlist-date-badge {
    border-radius: 3px;
}
/* Square every remaining badge/button so the terminal skin reads as one
   intentional sharp-cornered desk rather than a mix of radii. Small status
   dots (border-radius: 50%) are left alone — they're indicators, not chrome. */
#watchlistContainer.wl-skin--terminal .watchlist-ai-report-button,
#watchlistContainer.wl-skin--terminal .watchlist-alert-level,
#watchlistContainer.wl-skin--terminal .watchlist-alert-add-btn,
#watchlistContainer.wl-skin--terminal .watchlist-upgrades-button,
#watchlistContainer.wl-skin--terminal .watchlist-news-cell,
#watchlistContainer.wl-skin--terminal .watchlist-row-detach-btn,
#watchlistContainer.wl-skin--terminal .watchlist-metric {
    border-radius: 3px;
}

.watchlist-upgrades-button,
.watchlist-news-cell {
    border: 1px solid #d7e0ea;
}

.watchlist-upgrades-button:hover,
.watchlist-upgrades-button:focus-visible,
.watchlist-news-cell:hover,
.watchlist-news-cell:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.watchlist-row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 88px;
}

.watchlist-ai-report-button {
    appearance: none;
    width: 100%;
    max-width: 130px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.watchlist-ai-report-button:hover,
.watchlist-ai-report-button:focus-visible {
    background: rgba(124, 58, 237, 0.16);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

body[data-theme] .watchlist-ai-report-button {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent);
}

body[data-theme] .watchlist-ai-report-button:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.watchlist-ai-report-cell {
    text-align: left;
    vertical-align: middle;
}

/* .watchlist-tier-pills is shared with the AI-report modal's tier dropdown
   (templates/base.html), where flex-wrap:nowrap is fine since that trigger
   always has room. In this table, the AI Report column can be squeezed well
   below the width all three pills need on one line — wrap here instead of
   letting them force the column past its budget. */
.watchlist-ai-report-cell .watchlist-tier-pills {
    flex-wrap: wrap;
    row-gap: 4px;
}

.ai-report-cell-desc {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.watchlist-row-tooltip {
    position: relative;
}

.watchlist-tooltip-anchor {
    position: relative;
    cursor: help;
}

.watchlist-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    transform: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
    padding: 14px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
    white-space: normal;
    font-size: 18px;
    line-height: 1.35;
    max-width: 520px;
    width: min(520px, 90vw);
    display: none;
    z-index: 2000;
    pointer-events: none;
}

.watchlist-tooltip-key {
    font-weight: 700;
}

.watchlist-tooltip-anchor {
    text-align: left;
}

.watchlist-tooltip.is-visible {
    display: block;
}

.watchlist-news-cell {
    cursor: pointer;
}

.watchlist-news-popover {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--panel, #ffffff);
    border: 1px solid var(--border, #d1d5db);
    color: var(--text-primary, #111827);
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
    max-width: 460px;
    width: min(460px, 90vw);
    max-height: 500px;
    overflow: hidden;
    z-index: 2100;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Scrollable zone: header + list scroll together below the ad */
.watchlist-news-popover__inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 14px 16px;
}

.watchlist-news-popover__header {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 10px;
}

.watchlist-news-popover__list {
    display: grid;
    gap: 6px;
}

.watchlist-news-popover__item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary, #111827);
    background-color: var(--panel-muted, #f8fafc);
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.watchlist-news-popover__item:hover,
.watchlist-news-popover__item:focus-visible {
    background-color: color-mix(in srgb, var(--accent, #1a73e8) 10%, var(--panel-muted, #eef2f7));
    border-color: color-mix(in srgb, var(--accent, #1a73e8) 30%, transparent);
    outline: none;
}

.watchlist-news-popover__title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--text-primary, #111827);
}

.watchlist-news-popover__meta {
    font-size: 0.82rem;
    color: var(--text-muted, #4b5563);
}

.watchlist-news-popover__empty {
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
    padding: 8px 2px;
}

body[data-theme] .watchlist-news-popover {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .watchlist-news-popover__item {
    background-color: var(--panel-muted);
    color: var(--text-primary);
}

body[data-theme] .watchlist-news-popover__item:hover,
body[data-theme] .watchlist-news-popover__item:focus-visible {
    background-color: color-mix(in srgb, var(--accent) 18%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

body[data-theme] .watchlist-news-popover__title {
    color: var(--text-primary);
}

body[data-theme] .watchlist-news-popover__meta,
body[data-theme] .watchlist-news-popover__empty {
    color: var(--text-muted);
}

.watchlist-detached-symbol {
    position: fixed;
    left: 100px;
    top: 5px;
    width: 1480px;
    height: calc(100vh - 48px);
    min-width: 720px;
    min-height: 540px;
    max-width: calc(100vw - 20px);
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: 0 18px 56px rgba(15, 23, 42, 0.26);
    overflow: hidden;
    /* Native `resize: both` is unreliable here — the grip is clipped by the
       rounded corner and swallowed by the chart iframe — so the window uses a
       custom corner handle (.watchlist-detached-symbol__resize) instead. */
}

.watchlist-detached-symbol__resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    z-index: 6;
    cursor: nwse-resize;
    touch-action: none;
    color: #94a3b8;
}
.watchlist-detached-symbol__resize::before {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 13px;
    height: 13px;
    background: repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 4px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.watchlist-detached-symbol__resize:hover::before { opacity: 1; }

.watchlist-detached-symbol__shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.watchlist-detached-symbol__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #dbe3ee;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    cursor: grab;
    user-select: none;
}

.watchlist-detached-symbol__header:active {
    cursor: grabbing;
}

.watchlist-detached-symbol__title-wrap {
    min-width: 0;
}

.watchlist-detached-symbol__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f172a;
}

.watchlist-detached-symbol__subtitle {
    margin-top: 4px;
    font-size: 0.82rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-detached-symbol__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watchlist-detached-symbol__header-btn {
    appearance: none;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.watchlist-detached-symbol__header-btn:hover,
.watchlist-detached-symbol__header-btn:focus-visible {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    outline: none;
}

.watchlist-detached-symbol__header-btn--close:hover,
.watchlist-detached-symbol__header-btn--close:focus-visible {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
}

/* ── Focus style selector (segmented control in the header) ───────────── */
.watchlist-detached-symbol__style-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #eef2f7;
    flex-shrink: 0;
    cursor: default;
}

.wds-style-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.wds-style-btn:hover,
.wds-style-btn:focus-visible {
    color: #1d4ed8;
    background: #ffffff;
    outline: none;
}

.wds-style-btn.is-active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Pro-only theme: shown (not hidden) so the lock is the upsell, but visibly
   gated — dimmed, with a small lock badge. Still focusable/clickable; the click
   routes to the upgrade prompt rather than switching the theme. */
.wds-style-btn.is-locked {
    color: #94a3b8;
    opacity: 0.75;
}
.wds-style-btn.is-locked:hover,
.wds-style-btn.is-locked:focus-visible {
    color: #64748b;
    background: #f1f5f9;
}
.wds-style-btn__lock {
    margin-left: 4px;
    font-size: 0.62rem;
    vertical-align: baseline;
}

/* Width mode switcher — same pill/button pattern as the style switcher */
.wds-switcher-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watchlist-detached-symbol__width-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #eef2f7;
    flex-shrink: 0;
    cursor: default;
}

.wds-width-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 9px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.wds-width-btn:hover,
.wds-width-btn:focus-visible {
    color: #1d4ed8;
    background: #ffffff;
    outline: none;
}

.wds-width-btn.is-active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.wds-width-btn.is-locked {
    color: #94a3b8;
    opacity: 0.75;
}
.wds-width-btn.is-locked:hover,
.wds-width-btn.is-locked:focus-visible {
    color: #64748b;
    background: #f1f5f9;
}

/* Wide / Extra-wide Focus window sizes */
.watchlist-detached-symbol.wds-width--wide  { width: 2400px; }
.watchlist-detached-symbol.wds-width--xwide { width: 3300px; }

/* Minimized Focus window — hidden, represented by a tab strip tab */
.watchlist-detached-symbol.wds-minimized { display: none !important; }

/* ── Focus window tab strip (shown when any window is minimized) ─────────── */
.focus-tab-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    align-items: flex-end;
    gap: 3px;
    padding: 0 12px;
    z-index: 1400;
    pointer-events: none;
}

.focus-tab-strip.is-visible {
    display: flex;
    pointer-events: auto;
}

.focus-tab {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 14px 8px;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    color: #334155;
    cursor: pointer;
    box-shadow: 0 -3px 10px rgba(15, 23, 42, 0.10);
    transition: background 0.12s, transform 0.10s;
    max-width: 130px;
    min-width: 64px;
}

.focus-tab:hover {
    background: linear-gradient(180deg, #ffffff, #e2e8f0);
    transform: translateY(-3px);
}

.focus-tab__sym {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.focus-tab__name {
    font-size: 0.62rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Dark-theme overrides */
body[data-theme] .focus-tab {
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.30);
}

body[data-theme] .focus-tab:hover {
    background: linear-gradient(180deg, #334155, #1e293b);
}

body[data-theme] .focus-tab__sym { color: #e2e8f0; }
body[data-theme] .focus-tab__name { color: #94a3b8; }

/* Live-data status chip in the Focus header. Pro = pulsing green "LIVE";
   free = muted, clickable "SNAPSHOT 🔒" that routes to the upgrade prompt. */
.wds-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    user-select: none;
}
.wds-live--on {
    color: #1f9d57;
    background: rgba(34, 197, 94, 0.14);
}
.wds-live--off {
    color: #64748b;
    background: rgba(100, 116, 139, 0.12);
    cursor: pointer;
}
.wds-live--off:hover,
.wds-live--off:focus-visible {
    color: #475569;
    background: rgba(100, 116, 139, 0.2);
    outline: none;
}
.wds-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: wdsLivePulse 1.8s ease-out infinite;
}
.wds-live__lock {
    margin-left: 4px;
    font-size: 0.6rem;
}
@keyframes wdsLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .wds-live__dot { animation: none; }
}
/* Brighten the chip on the dark terminal themes so it stays legible. */
.watchlist-detached-symbol.wds-style--bloomberg .wds-live--on,
.watchlist-detached-symbol.wds-style--cockpit .wds-live--on,
.watchlist-detached-symbol.wds-style--mainframe .wds-live--on {
    color: #3fe08a;
    background: rgba(63, 224, 138, 0.16);
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-live--off,
.watchlist-detached-symbol.wds-style--cockpit .wds-live--off,
.watchlist-detached-symbol.wds-style--mainframe .wds-live--off {
    color: #8aa0b3;
    background: rgba(138, 160, 179, 0.16);
}

.watchlist-detached-symbol__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
}

/* ── 3-panel layout ────────────────────────────────────── */
.watchlist-detached-symbol__left-panel {
    /* Fluid width so the panel scales with the window on resize instead of
       staying a fixed size while only the chart grows/shrinks. Clamp keeps it
       near its previous 252px at the default window and within sane bounds. */
    width: clamp(200px, 17%, 300px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    border-right: 1px solid #dbe3ee;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.watchlist-detached-symbol__center-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.watchlist-detached-symbol__center-panel::-webkit-scrollbar {
    width: 4px;
}
.watchlist-detached-symbol__center-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}
.watchlist-detached-symbol__center-panel::-webkit-scrollbar-track {
    background: transparent;
}

.watchlist-detached-symbol__right-panel {
    /* Fluid width — scales with the window on resize (see left panel note). */
    width: clamp(230px, 20%, 340px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    border-left: 1px solid #dbe3ee;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.watchlist-detached-symbol__left-panel::-webkit-scrollbar,
.watchlist-detached-symbol__right-panel::-webkit-scrollbar {
    width: 4px;
}
.watchlist-detached-symbol__left-panel::-webkit-scrollbar-thumb,
.watchlist-detached-symbol__right-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}
.watchlist-detached-symbol__left-panel::-webkit-scrollbar-track,
.watchlist-detached-symbol__right-panel::-webkit-scrollbar-track {
    background: transparent;
}

.watchlist-detached-symbol__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.watchlist-detached-symbol__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.watchlist-detached-symbol__price-block,
.watchlist-detached-symbol__hero-badges {
    display: grid;
    gap: 10px;
}

.watchlist-detached-symbol__section {
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.watchlist-detached-symbol__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.watchlist-detached-symbol__section-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #334155;
}

.watchlist-detached-symbol__section-subtitle {
    margin: 0;
    font-size: 0.72rem;
    color: #94a3b8;
}

.watchlist-detached-symbol__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.watchlist-detached-symbol__stat {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.watchlist-detached-symbol__stat-label {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
}

.watchlist-detached-symbol__stat-value {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    word-break: break-word;
}

.watchlist-detached-symbol__mini-metrics .watchlist-metric {
    padding: 8px 9px;
}

.watchlist-detached-symbol__mini-metrics .watchlist-metric__label {
    font-size: 0.64rem;
}

.watchlist-detached-symbol__mini-metrics .watchlist-metric__value {
    font-size: 0.82rem;
    margin-top: 5px;
}

/* Window-relative label sizing for the Alerts and Earnings panels. A
   ResizeObserver on the panel (see main.js) sets two scale variables from the
   window width: --wds-scale shrinks the TEXT labels harder, while
   --wds-scale-val keeps the NUMERIC values (prices, % surprise, alert levels)
   larger — so the figures stay readable and take precedence over their labels
   as the window is made smaller. Defaults to 1 so default-size windows are
   unchanged. Base sizes are nudged down slightly to stop labels overlapping.
   Placed after the base/mini-metrics rules, with the shell ancestor, so these
   win the cascade; per-style overrides only touch colour/font-family. */
.watchlist-detached-symbol__shell .watchlist-detached-symbol__mini-metrics .watchlist-metric__label {
    font-size: calc(9.5px * var(--wds-scale, 1));
}
.watchlist-detached-symbol__shell .watchlist-detached-symbol__stat-label {
    font-size: calc(9px * var(--wds-scale, 1));
}
.watchlist-detached-symbol__shell .watchlist-detached-symbol__mini-metrics .watchlist-metric__value {
    font-size: calc(13px * var(--wds-scale-val, 1));
}
.watchlist-detached-symbol__shell .watchlist-detached-symbol__stat-value {
    font-size: calc(12.5px * var(--wds-scale-val, 1));
}
.watchlist-detached-symbol__shell .watchlist-detached-symbol__alert-levels .watchlist-alert-level {
    font-size: calc(13px * var(--wds-scale-val, 1));
}

.watchlist-detached-symbol__signals-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.watchlist-detached-symbol__signal-card {
    min-width: 0;
}

.watchlist-detached-symbol__alerts-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Stack alert badges vertically in the Focus window.
   Double-class selector beats the single-class media-query override. */
.watchlist-detached-symbol__alert-levels.watchlist-alert-levels {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
}

.watchlist-detached-symbol__alert-levels .watchlist-alert-level {
    width: auto;
    min-width: 160px;
    max-width: 100%;
}

.watchlist-detached-symbol__lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr);
    gap: 14px;
}

.watchlist-detached-symbol__side-column {
    display: grid;
    gap: 14px;
    min-height: 0;
}

.watchlist-detached-symbol__chart-frame {
    width: 100%;
    flex: 1;
    /* min-height:0 lets the iframe shrink to the panel so the 2x2 chart grid
       fits instead of bleeding past the bottom; the charts inside resize with
       it (chart_preview re-fits on its own resize). */
    min-height: 0;
    border: none;
    border-radius: 12px;
    background: #ffffff;
}

/* chart section fills the center panel; the iframe flexes to fit it (no scroll) */
.watchlist-detached-symbol__center-panel .watchlist-detached-symbol__section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* stats grid: 2-col in narrow panels */
.watchlist-detached-symbol__left-panel .watchlist-detached-symbol__stats-grid,
.watchlist-detached-symbol__right-panel .watchlist-detached-symbol__stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* embedded analyst listbox: uncapped in right panel */
.watchlist-detached-symbol__right-panel .watchlist-upgrades-listbox--embedded {
    max-height: none;
}

.watchlist-upgrades-listbox--embedded {
    position: relative;
    inset: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    max-height: 320px;
    box-shadow: none;
    border-radius: 12px;
}

.watchlist-detached-symbol__news-list {
    display: grid;
    gap: 6px;
}

.watchlist-detached-symbol__news-item {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.watchlist-detached-symbol__news-item:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
.watchlist-detached-symbol__news-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}
.watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1e293b;
}
.watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
}

.watchlist-detached-symbol__news-expand-hint {
    font-weight: 600;
    color: #2563eb;
}

.watchlist-detached-symbol__news-digest {
    margin: -3px 0 0;
    padding: 8px 10px 10px;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
}

.watchlist-detached-symbol__news-digest-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: #ede9fe;
    color: #6d28d9;
    margin-bottom: 5px;
}

.watchlist-detached-symbol__news-digest-body {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #1e293b;
    margin: 0 0 6px;
}

.watchlist-detached-symbol__news-digest-source {
    font-size: 0.76rem;
    color: #2563eb;
    text-decoration: none;
}
.watchlist-detached-symbol__news-digest-source:hover {
    text-decoration: underline;
}

.watchlist-detached-symbol__news-digest-loading {
    font-size: 0.78rem;
    font-style: italic;
    color: #64748b;
}

.watchlist-detached-symbol__empty {
    padding: 10px 4px 4px;
    font-size: 0.8rem;
    color: #64748b;
}

body[data-theme] .watchlist-row-detach-btn {
    background: var(--panel-muted);
    border-color: var(--border);
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 10%, transparent);
}

body[data-theme] .watchlist-row-detach-btn:hover,
body[data-theme] .watchlist-row-detach-btn:focus-visible {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 32%, var(--panel)) 100%);
    border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
    color: var(--text-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

body[data-theme] .watchlist-detached-symbol {
    border-color: var(--border);
    background: var(--bg, var(--panel));
}

body[data-theme] .watchlist-detached-symbol__header {
    border-bottom-color: var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel-muted) 80%, var(--panel)) 0%, color-mix(in srgb, var(--panel-muted) 96%, var(--panel)) 100%);
}

body[data-theme] .watchlist-detached-symbol__title,
body[data-theme] .watchlist-detached-symbol__stat-value,
body[data-theme] .watchlist-detached-symbol__section-title {
    color: var(--text-primary);
}

body[data-theme] .watchlist-detached-symbol__subtitle,
body[data-theme] .watchlist-detached-symbol__section-subtitle,
body[data-theme] .watchlist-detached-symbol__empty,
body[data-theme] .watchlist-detached-symbol__stat-label {
    color: var(--text-muted);
}

body[data-theme] .watchlist-detached-symbol__section,
body[data-theme] .watchlist-detached-symbol__stat,
body[data-theme] .watchlist-detached-symbol__header-btn,
body[data-theme] .watchlist-detached-symbol__chart-frame {
    background: var(--panel);
    border-color: var(--border);
}

body[data-theme] .watchlist-detached-symbol__header-btn {
    color: var(--text-primary);
}

body[data-theme] .watchlist-detached-symbol__header-btn:hover,
body[data-theme] .watchlist-detached-symbol__header-btn:focus-visible {
    background: var(--panel-muted);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

body[data-theme] .watchlist-detached-symbol__header-btn--close:hover,
body[data-theme] .watchlist-detached-symbol__header-btn--close:focus-visible {
    background: color-mix(in srgb, #ef4444 15%, var(--panel));
    border-color: color-mix(in srgb, #ef4444 45%, var(--border));
}

body[data-theme] .watchlist-detached-symbol__left-panel,
body[data-theme] .watchlist-detached-symbol__right-panel,
body[data-theme] .watchlist-detached-symbol__center-panel {
    scrollbar-color: var(--border) transparent;
}
body[data-theme] .watchlist-detached-symbol__left-panel,
body[data-theme] .watchlist-detached-symbol__right-panel {
    border-color: var(--border);
}
body[data-theme] .watchlist-detached-symbol__left-panel::-webkit-scrollbar-thumb,
body[data-theme] .watchlist-detached-symbol__right-panel::-webkit-scrollbar-thumb,
body[data-theme] .watchlist-detached-symbol__center-panel::-webkit-scrollbar-thumb {
    background: var(--border);
}

body[data-theme] .watchlist-detached-symbol__section {
    box-shadow: none;
}

body[data-theme] .watchlist-detached-symbol__news-item {
    background: var(--panel-muted);
    border-color: var(--border);
    color: var(--text-primary);
}
body[data-theme] .watchlist-detached-symbol__news-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
body[data-theme] .watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    color: var(--text-primary);
}
body[data-theme] .watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    color: var(--text-muted);
}
body[data-theme] .watchlist-detached-symbol__news-digest {
    background: var(--panel);
    border-color: var(--border);
}
body[data-theme] .watchlist-detached-symbol__news-digest-body {
    color: var(--text-primary);
}
body[data-theme] .watchlist-detached-symbol__news-digest-source,
body[data-theme] .watchlist-detached-symbol__news-expand-hint {
    color: var(--accent, #2563eb);
}
body[data-theme] .watchlist-detached-symbol__news-digest-loading {
    color: var(--text-muted);
}
body[data-theme] .watchlist-detached-symbol__news-digest-badge {
    background: color-mix(in srgb, var(--accent) 18%, var(--panel-muted));
    color: var(--accent, #a78bfa);
}

/* Classic skin — dark-theme overrides for style + width switchers.
   Premium skins (bloomberg, cockpit, etc.) have their own higher-specificity
   selectors below and are unaffected by these rules. */
body[data-theme] .watchlist-detached-symbol__style-switcher,
body[data-theme] .watchlist-detached-symbol__width-switcher {
    background: color-mix(in srgb, var(--panel-muted) 70%, var(--panel));
    border-color: var(--border);
}

body[data-theme] .wds-style-btn,
body[data-theme] .wds-width-btn {
    color: var(--text-muted);
}

body[data-theme] .wds-style-btn:hover,
body[data-theme] .wds-style-btn:focus-visible,
body[data-theme] .wds-width-btn:hover,
body[data-theme] .wds-width-btn:focus-visible {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

body[data-theme] .wds-style-btn.is-active,
body[data-theme] .wds-width-btn.is-active {
    background: color-mix(in srgb, var(--accent) 18%, var(--panel));
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}

body[data-theme] .wds-style-btn.is-locked,
body[data-theme] .wds-width-btn.is-locked {
    color: var(--text-muted);
    opacity: 0.6;
}

body[data-theme] .wds-style-btn.is-locked:hover,
body[data-theme] .wds-width-btn.is-locked:hover {
    background: color-mix(in srgb, var(--panel-muted) 50%, var(--panel));
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS STYLE · BLOOMBERG TERMINAL
   Child selectors are anchored on the compound ancestor
   (.watchlist-detached-symbol.wds-style--bloomberg) so they outrank the
   body[data-theme] dark-theme overrides above regardless of the app theme.
   ════════════════════════════════════════════════════════════════════ */
body .watchlist-detached-symbol.wds-style--bloomberg {
    --bb-black: #05070a;
    --bb-screen: #0a0e14;
    --bb-amber: #ffa028;
    --bb-amber-dim: #9a6a22;
    --bb-cyan: #46c8ff;
    --bb-txt: #e8edf2;
    --bb-dim: #7d8794;
    --bb-line: #1b2531;
    background: var(--bb-black);
    border-color: #2a2010;
    border-radius: 8px;
    color: var(--bb-txt);
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;
}

/* command-bar header */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header {
    background: linear-gradient(180deg, #15110a, #0b0905);
    border-bottom: 1px solid #2a2010;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__title {
    color: var(--bb-amber);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__subtitle {
    color: var(--bb-dim);
}

/* header buttons */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn {
    background: #100c06;
    border: 1px solid #2a2010;
    border-radius: 3px;
    color: var(--bb-amber);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn:hover,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn:focus-visible {
    background: #1a130a;
    border-color: #3a2a12;
    color: #ffc24d;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn--close {
    color: #ff4d5e;
    border-color: #3a1518;
    background: #160a0c;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn--close:hover,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__header-btn--close:focus-visible {
    background: #23090c;
    border-color: #5a2226;
    color: #ff6b78;
}

/* style + width switchers */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__style-switcher,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__width-switcher {
    background: #0b0905;
    border-color: #2a2010;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-style-btn,
.watchlist-detached-symbol.wds-style--bloomberg .wds-width-btn {
    color: var(--bb-dim);
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-style-btn:hover,
.watchlist-detached-symbol.wds-style--bloomberg .wds-style-btn:focus-visible,
.watchlist-detached-symbol.wds-style--bloomberg .wds-width-btn:hover,
.watchlist-detached-symbol.wds-style--bloomberg .wds-width-btn:focus-visible {
    color: var(--bb-amber);
    background: #15110a;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-style-btn.is-active,
.watchlist-detached-symbol.wds-style--bloomberg .wds-width-btn.is-active {
    background: #1a130a;
    color: var(--bb-amber);
    box-shadow: none;
}

/* panels */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__left-panel,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__right-panel {
    background: var(--bb-screen);
    border-color: #15100a;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__center-panel {
    background: #06090d;
}

/* sections */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__section {
    background: transparent;
    border: 1px solid var(--bb-line);
    border-radius: 4px;
    box-shadow: none;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__section-title {
    color: var(--bb-amber);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__section-subtitle {
    color: var(--bb-dim);
}

/* stat cells */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__stat {
    background: #070b10;
    border: 1px solid var(--bb-line);
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__stat-label {
    color: var(--bb-amber-dim);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__stat-value {
    color: var(--bb-txt);
}

/* Earnings Snapshot metric cards — themed to match the stat cells above so
   they follow the Focus window sub-theme, not the app theme. */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric {
    background: #070b10;
    border: 1px solid var(--bb-line);
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__label {
    color: var(--bb-amber-dim);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__value {
    color: var(--bb-txt);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__value.is-positive {
    color: #26d07c;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__value.is-negative {
    color: #ff4d5e;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__value.is-neutral,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-metric__value.is-muted {
    color: var(--bb-dim);
}

/* chart frame + empty + news */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__chart-frame {
    background: #06090d;
    border-radius: 4px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__empty {
    color: var(--bb-dim);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__news-item {
    background: #070b10;
    border-color: var(--bb-line);
    color: var(--bb-txt);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__news-item:hover {
    background: #0d141d;
    border-color: #2a3a4a;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    color: var(--bb-txt);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    color: var(--bb-dim);
}

/* analyst listbox container (inner rows inherit dark surface) */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-listbox--embedded {
    background: #070b10;
    border: 1px solid var(--bb-line);
}

/* function-key + tickertape footer (added via JS for this style) */
.watchlist-detached-symbol.wds-style--bloomberg .wds-foot {
    flex-shrink: 0;
    border-top: 1px solid #2a2010;
    background: #0b0905;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkeys {
    display: flex;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkey {
    flex: 1;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.03em;
    padding: 5px 2px;
    color: var(--bb-amber);
    border-right: 1px solid #1a130a;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkey:hover,
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkey:focus-visible {
    background: rgba(255, 160, 40, 0.14);
    color: #ffc878;
    outline: none;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkey b {
    color: var(--bb-dim);
    margin-right: 4px;
}
/* F5 has no key-cap (reserved by the browser), so signal it's still a click
   target with a faint dotted underline rather than leaving it looking like a
   stray label among the hotkeys. */
.watchlist-detached-symbol.wds-style--bloomberg .wds-fkey--clickonly {
    text-decoration: underline dotted rgba(255, 160, 40, 0.4);
    text-underline-offset: 3px;
}

/* Panel flash when a function key (or any Focus nav) targets a section. */
@keyframes wdsSectionFlash {
    0%, 100% { outline-color: rgba(255, 160, 40, 0); }
    25%, 60% { outline-color: rgba(255, 160, 40, 0.9); }
}
.wds-section-flash {
    outline: 2px solid rgba(255, 160, 40, 0);
    outline-offset: 2px;
    animation: wdsSectionFlash 1.15s ease-out;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape {
    height: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid #1a130a;
    background: #05070a;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__run {
    display: inline-flex;
    gap: 26px;
    white-space: nowrap;
    padding-left: 100%;
    font-size: 11px;
    color: var(--bb-dim);
    animation: wdsTape 30s linear infinite;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__seg b {
    color: var(--bb-txt);
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__chg {
    font-weight: 700;
}
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__chg--up { color: #26d07c; }
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__chg--down { color: #ff4d5e; }
.watchlist-detached-symbol.wds-style--bloomberg .wds-tape__chg--flat { color: var(--bb-amber-dim); }
@keyframes wdsTape {
    to { transform: translateX(-100%); }
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS STYLE · GLASS COCKPIT (HUD)
   ════════════════════════════════════════════════════════════════════ */
body .watchlist-detached-symbol.wds-style--cockpit {
    --ck-cyan: #3fe0ff;
    --ck-cyan-dim: #1c6f86;
    --ck-green: #39ff8b;
    --ck-txt: #d6ecf5;
    --ck-dim: #5f8197;
    --ck-line: #1c3a4d;
    background: linear-gradient(180deg, #07121c, #040a11);
    border-color: #15303f;
    border-radius: 16px;
    color: var(--ck-txt);
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}

/* header */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header {
    background: linear-gradient(180deg, #0b1c2a, #071119);
    border-bottom: 1px solid #14313f;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__title {
    color: var(--ck-cyan);
    letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(63, 224, 255, 0.45);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__subtitle {
    color: var(--ck-dim);
}

/* pill buttons + switcher */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn {
    background: rgba(63, 224, 255, 0.06);
    border: 1px solid #1e4a5e;
    border-radius: 20px;
    color: var(--ck-cyan);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn:hover,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn:focus-visible {
    background: rgba(63, 224, 255, 0.16);
    border-color: #2f6f88;
    color: #aef0ff;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn--close {
    color: #ff5b6e;
    border-color: #5a2630;
    background: rgba(255, 91, 110, 0.07);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn--close:hover,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__header-btn--close:focus-visible {
    background: rgba(255, 91, 110, 0.16);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__style-switcher,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__width-switcher {
    background: rgba(63, 224, 255, 0.05);
    border-color: #1e4a5e;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-style-btn,
.watchlist-detached-symbol.wds-style--cockpit .wds-width-btn {
    color: var(--ck-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .wds-style-btn:hover,
.watchlist-detached-symbol.wds-style--cockpit .wds-style-btn:focus-visible,
.watchlist-detached-symbol.wds-style--cockpit .wds-width-btn:hover,
.watchlist-detached-symbol.wds-style--cockpit .wds-width-btn:focus-visible {
    color: var(--ck-cyan);
    background: rgba(63, 224, 255, 0.1);
}
.watchlist-detached-symbol.wds-style--cockpit .wds-style-btn.is-active,
.watchlist-detached-symbol.wds-style--cockpit .wds-width-btn.is-active {
    background: rgba(63, 224, 255, 0.16);
    color: var(--ck-cyan);
    box-shadow: none;
}

/* panels */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__left-panel,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__right-panel {
    background: #060f18;
    border-color: #0e2330;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__center-panel {
    background: #050d15;
}

/* sections as instrument bezels */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__section {
    background: radial-gradient(120% 140% at 50% 0%, #112434 0%, #0a1722 70%);
    border: 1px solid var(--ck-line);
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(4, 10, 16, 0.5), 0 0 14px rgba(63, 224, 255, 0.05) inset;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__section-title {
    color: var(--ck-cyan);
    letter-spacing: 0.12em;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__section-subtitle {
    color: var(--ck-dim);
}

/* stat cells */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__stat {
    background: rgba(63, 224, 255, 0.04);
    border: 1px solid var(--ck-line);
    border-radius: 8px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__stat-label {
    color: var(--ck-cyan-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__stat-value {
    color: var(--ck-txt);
    font-family: ui-monospace, Consolas, monospace;
}

/* Earnings Snapshot metric cards — themed to match the stat cells above. */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric {
    background: rgba(63, 224, 255, 0.04);
    border: 1px solid var(--ck-line);
    border-radius: 8px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__label {
    color: var(--ck-cyan-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__value {
    color: var(--ck-txt);
    font-family: ui-monospace, Consolas, monospace;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__value.is-positive {
    color: var(--ck-green);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__value.is-negative {
    color: #ff5d6c;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__value.is-neutral,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-metric__value.is-muted {
    color: var(--ck-dim);
}

/* chart frame + empty + news */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__chart-frame {
    background: #050d15;
    border-radius: 10px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__empty {
    color: var(--ck-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__news-item {
    background: rgba(63, 224, 255, 0.03);
    border-color: var(--ck-line);
    color: var(--ck-txt);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__news-item:hover {
    background: rgba(63, 224, 255, 0.08);
    border-color: #2f6f88;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    color: var(--ck-txt);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    color: var(--ck-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-listbox--embedded {
    background: rgba(63, 224, 255, 0.03);
    border: 1px solid var(--ck-line);
}

/* HUD instrument strip (inserted via JS for this style) */
.watchlist-detached-symbol.wds-style--cockpit .wds-hud {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 8px 18px;
    background: linear-gradient(180deg, #0a1a28, #06121c);
    border-bottom: 1px solid #14313f;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__glabel {
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-cyan-dim);
    margin-top: 1px;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__readouts {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__r {
    display: flex;
    flex-direction: column;
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__l {
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-cyan-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .wds-hud__v {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 14px;
    color: #eaffff;
}

/* ════════════════════════════════════════════════════════════════════
   COCKPIT HUD v8 — INSTRUMENT CLUSTER POPUP
   Full-window popup opened by the "HUD" header button when Cockpit skin
   is active. Charts + Financials are the default view underneath; nothing
   auto-covers them. Markup/CSS ported from the approved
   static/cockpit_hud_redesign_v8_merged.html mockup, scoped under
   .ck-v8-popup so its class names (several deliberately mirror the old,
   now-removed dial system) can't leak into the rest of the app.
   ════════════════════════════════════════════════════════════════════ */

.watchlist-detached-symbol.wds-style--cockpit .ck-hud-btn.is-active {
    background: rgba(63,224,255,.15);
    color: #3fe0ff;
    border-color: #3fe0ff;
}

.ck-v8-popup {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: #01050a;
    display: flex;
    flex-direction: column;
    --ck-cyan: #3fe0ff;
    --ck-cyan-dim: #1c6f86;
    --ck-green: #39ff8b;
    --ck-txt: #d6ecf5;
    --ck-dim: #5f8197;
    --ck-line: #1c3a4d;
    --ck-amber: #f59e0b;
    --ck-red: #ef4444;
    --ck-gold: #c9a030;
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    color: var(--ck-txt);
}

.ck-v8-popup.is-hidden { display: none; }

/* Window-management titlebar — the popup fully covers the Focus window's own
   header (drag handle, minimize, cascade, close), so it needs its own set of
   the same controls rather than leaving them unreachable while open. */
.ck-v8-popup .toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px 6px 14px;
    background: #060c12;
    border-bottom: 1px solid #14313f;
    cursor: move;
    user-select: none;
}

.ck-v8-popup .toolbar__drag {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ck-dim);
    white-space: nowrap;
    overflow: hidden;
}

.ck-v8-popup .toolbar__grip { color: var(--ck-cyan-dim); letter-spacing: 2px; }

.ck-v8-popup .toolbar__hints {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ck-v8-popup .toolbar__hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 8.5px;
    letter-spacing: .5px;
    color: var(--ck-dim);
}
.ck-v8-popup .toolbar__hint kbd {
    font: inherit;
    padding: 1px 5px;
    border: 1px solid #1c3a4d;
    border-radius: 3px;
    color: var(--ck-cyan);
    background: rgba(63,224,255,0.06);
}

.ck-v8-popup .toolbar__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.ck-v8-popup .toolbar__btn {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .8px;
    color: #a0ccd8;
    background: rgba(63,224,255,0.06);
    border: 1px solid #1c3a4d;
    border-radius: 3px;
    padding: 4px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.ck-v8-popup .toolbar__btn:hover { border-color: var(--ck-cyan); color: var(--ck-cyan); }
.ck-v8-popup .toolbar__btn--close { color: #d9a0a0; }
.ck-v8-popup .toolbar__btn--close:hover { border-color: var(--ck-red); color: #ff8080; }

.ck-v8-popup .stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ck-v8-popup .stage-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #2a4060;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ck-v8-popup .stage-message--error { color: #7a2020; }

/* .hud is a fixed-size internal canvas (1320px natural width) scaled via
   transform to fit .stage — see the applyScale() logic in _renderCockpitV8.
   position:absolute + transform-origin:top left keeps it out of flow so
   only the transform affects its visual size, never its layout box. */
.ck-v8-popup .hud {
    position: absolute;
    top: 0; left: 0;
    width: 1320px;
    transform-origin: top left;
    background: linear-gradient(180deg, #07121c, #040a11);
    border: 1px solid #10222f;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px #000,
        0 40px 90px rgba(0,0,0,.75),
        inset 0 0 90px rgba(63,224,255,0.025);
    overflow: hidden;
}

.ck-v8-popup .bracket-tl, .ck-v8-popup .bracket-tr,
.ck-v8-popup .bracket-bl, .ck-v8-popup .bracket-br {
    position: absolute; width: 26px; height: 26px;
    border: 2px solid var(--ck-cyan-dim);
    opacity: .55; pointer-events: none; z-index: 5;
}
.ck-v8-popup .bracket-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.ck-v8-popup .bracket-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.ck-v8-popup .bracket-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.ck-v8-popup .bracket-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.ck-v8-popup .glass {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.014) 0px, transparent 1px, transparent 2px),
        radial-gradient(ellipse at 50% 0%, rgba(63,224,255,0.05), transparent 60%);
    mix-blend-mode: screen;
}
.ck-v8-popup .sweep {
    position: absolute; inset: -50%; z-index: 3; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(63,224,255,0.05) 8deg, transparent 20deg, transparent 360deg);
    animation: ckv8-sweep 14s linear infinite;
    opacity: .5;
}
@keyframes ckv8-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-v8-popup .sweep { animation: none; } }

.ck-v8-popup .topbar {
    position: relative; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 22px;
    background: linear-gradient(180deg, #0b1c2a, #071119);
    border-bottom: 1px solid #14313f;
}
.ck-v8-popup .ident { display: flex; align-items: baseline; gap: 10px; }
.ck-v8-popup .ident__glyph { font-size: 13px; color: var(--ck-cyan); text-shadow: 0 0 8px rgba(63,224,255,.5); }
.ck-v8-popup .ident__sym { font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--ck-txt); }
.ck-v8-popup .ident__name { font-size: 11px; color: var(--ck-dim); letter-spacing: .5px; }

.ck-v8-popup .caution {
    display: flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 9px; letter-spacing: 1.6px;
    padding: 4px 10px; border: 1px solid #3a2a10; border-radius: 2px;
    color: var(--ck-amber); background: rgba(245,158,11,0.06);
    text-shadow: 0 0 6px rgba(245,158,11,.55);
    animation: ckv8-caution-pulse 2.2s ease-in-out infinite;
}
.ck-v8-popup .caution__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ck-amber); box-shadow: 0 0 6px var(--ck-amber), 0 0 12px rgba(245,158,11,.5); }
@keyframes ckv8-caution-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ck-v8-popup .caution { animation: none; } }

.ck-v8-popup .caution--nominal {
    border-color: #143a24; color: var(--ck-green); background: rgba(34,197,94,0.06);
    text-shadow: 0 0 6px rgba(34,197,94,.5); animation: none;
}
.ck-v8-popup .caution--nominal .caution__dot {
    background: var(--ck-green); box-shadow: 0 0 6px var(--ck-green), 0 0 12px rgba(34,197,94,.5);
}

.ck-v8-popup .price-block { text-align: right; }
.ck-v8-popup .price-block__val { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 18px; font-weight: 700; color: var(--ck-green); }
.ck-v8-popup .price-block__chg { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; margin-left: 6px; }
.ck-v8-popup .price-block__meta { font-size: 9.5px; color: var(--ck-dim); letter-spacing: .8px; margin-top: 1px; }

.ck-v8-popup .section-header {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 22px 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: 4px; text-transform: uppercase; color: var(--ck-cyan);
    text-shadow: 0 0 8px rgba(63,224,255,.45);
}
.ck-v8-popup .section-header::before, .ck-v8-popup .section-header::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ck-cyan-dim) 50%, transparent);
    opacity: .6;
}
.ck-v8-popup .section-header--flow { color: var(--ck-amber); text-shadow: 0 0 8px rgba(245,158,11,.45); }
.ck-v8-popup .section-header--flow::before, .ck-v8-popup .section-header--flow::after {
    background: linear-gradient(90deg, transparent, #7a4a10 50%, transparent);
}

.ck-v8-popup .flow-dials {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 14px 20px;
}
.ck-v8-popup .flow-dials__row {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: nowrap;
}

.ck-v8-popup .cluster {
    position: relative; z-index: 2;
    display: flex; align-items: stretch; justify-content: center;
    padding: 10px 10px 6px;
    gap: 0;
}
.ck-v8-popup .tower {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    flex: 1; max-width: 560px;
}
.ck-v8-popup .tower__label {
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 9px; letter-spacing: 3px;
    color: var(--ck-dim); text-transform: uppercase; margin-bottom: -2px;
}
.ck-v8-popup .tower__support { display: flex; gap: 12px; margin-top: 2px; align-items: center; }

.ck-v8-popup .ck-barchart {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 128px; padding: 8px 4px 6px; border-radius: 10px;
    background: radial-gradient(ellipse at 38% 22%, #192636 0%, #0c1118 75%);
    border: 2px solid #162030;
    box-shadow: 0 0 0 1px #080c10, 0 0 0 4px #162030, 0 0 0 5px #0a1018,
        inset 0 1px 3px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.7);
}
.ck-v8-popup .ck-barchart--lg { width: 160px; }

.ck-v8-popup .ck-linechart {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px; border-radius: 10px;
    background: radial-gradient(ellipse at 38% 22%, #192636 0%, #0c1118 75%);
    border: 2px solid #162030;
    box-shadow: 0 0 0 1px #080c10, 0 0 0 4px #162030, 0 0 0 5px #0a1018,
        inset 0 1px 3px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.7);
}

.ck-v8-popup .ck-dial {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}

.ck-v8-popup .divider {
    position: relative;
    width: 1px; margin: 10px 6px;
    background: linear-gradient(180deg, transparent, var(--ck-line) 12%, var(--ck-line) 88%, transparent);
    flex-shrink: 0;
}
.ck-v8-popup .reticle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px;
}
.ck-v8-popup .reticle svg { width: 100%; height: 100%; }

.ck-v8-popup .ck-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.ck-v8-popup .ck-gauge {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: radial-gradient(ellipse at 38% 28%, #192636 0%, #0c1118 75%);
    border-radius: 50%; border: 2px solid #162030;
    box-shadow: 0 0 0 1px #080c10, 0 0 0 4px #162030, 0 0 0 5px #0a1018,
        inset 0 1px 3px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.7);
}
.ck-v8-popup .ck-gauge--large {
    border-width: 3px; border-color: #1a2e44;
    box-shadow: 0 0 0 1px #060a0e, 0 0 0 5px #162030, 0 0 0 7px #080c10,
        inset 0 2px 6px rgba(255,255,255,.05), 0 6px 22px rgba(0,0,0,.8);
}
.ck-v8-popup .ck-state {
    font-size: 8px; font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; letter-spacing: 1.8px;
    text-transform: uppercase; text-align: center; min-height: 11px; padding: 0 3px; white-space: nowrap;
}
.ck-v8-popup .ck-state--green  { color: #22c55e; text-shadow: 0 0 7px rgba(34,197,94,.6); }
.ck-v8-popup .ck-state--bright { color: #4ade80; text-shadow: 0 0 10px rgba(74,222,128,.75), 0 0 4px rgba(74,222,128,.5); }
.ck-v8-popup .ck-state--amber  { color: #f59e0b; text-shadow: 0 0 7px rgba(245,158,11,.6); }
.ck-v8-popup .ck-state--red    { color: #ef4444; text-shadow: 0 0 7px rgba(239,68,68,.6); }
.ck-v8-popup .ck-state--dim    { color: #3a5468; }

.ck-v8-popup .bottombar {
    position: relative; z-index: 2;
    display: flex; align-items: stretch;
    border-top: 1px solid #14313f;
    background: #080c10;
}
.ck-v8-popup .lights {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: 12px 16px; margin: 10px 0 10px 10px; min-width: 152px;
    border-radius: 8px; border: 1px solid #17293a;
    background: linear-gradient(180deg, rgba(63,224,255,0.035) 0%, rgba(10,16,24,0.35) 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.ck-v8-popup .light { display: flex; align-items: center; gap: 7px; }
.ck-v8-popup .light__dot { width: 9px; height: 9px; border-radius: 50%; background: #0d1520; border: 1px solid #1e2c3a; flex-shrink: 0; }
.ck-v8-popup .light__dot.on-green { background: #15803d; box-shadow: 0 0 5px #22c55e, 0 0 10px rgba(34,197,94,.35); }
.ck-v8-popup .light__dot.on-red   { background: #b91c1c; box-shadow: 0 0 5px #ef4444, 0 0 10px rgba(239,68,68,.35); }
.ck-v8-popup .light__dot.on-amber { background: #b45309; box-shadow: 0 0 5px #f59e0b, 0 0 10px rgba(245,158,11,.35); }
.ck-v8-popup .light__label { font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; color: #8ab0cc; white-space: nowrap; }

.ck-v8-popup .range { flex: 1; padding: 12px 20px; display: flex; flex-direction: column; justify-content: center; }
.ck-v8-popup .range__label { font-size: 8.5px; color: #2a4060; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.ck-v8-popup .range__track { height: 8px; background: #0d1520; border-radius: 4px; position: relative; border: 1px solid #152030; }
.ck-v8-popup .range__fill { height: 100%; background: linear-gradient(to right, #15803d 0%, #4ade80 100%); border-radius: 4px 0 0 4px; }
.ck-v8-popup .range__marker { position: absolute; top: -3px; width: 2px; height: 14px; background: #c8e8f0; border-radius: 1px; box-shadow: 0 0 4px rgba(200,232,240,.6); }
.ck-v8-popup .range__endpoints {
    display: flex; justify-content: space-between; margin-top: 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 9px; color: #3a6080; letter-spacing: .5px;
}
.ck-v8-popup .range__pct { font-size: 9px; color: #3a6080; letter-spacing: 1px; margin-top: 4px; text-align: right; }

.ck-v8-popup .footnote {
    position: relative; z-index: 2;
    padding: 7px 22px; font-size: 9px; letter-spacing: .6px; color: #24405a;
    border-top: 1px solid #10222f; text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS STYLE · MAINFRAME MULTI-SCREEN
   Each section is dressed as a beveled CRT monitor: phosphor green/amber on
   a dark room, scanline texture (layered background-image), a bezel ring
   (box-shadow), and a power-LED dot (::after).
   ════════════════════════════════════════════════════════════════════ */
body .watchlist-detached-symbol.wds-style--mainframe {
    --mf-green: #4dffb0;
    --mf-amber: #ffc04d;
    --mf-txt: #bfe9cf;
    --mf-dim: #5f7d6c;
    --mf-line: rgba(77, 255, 176, 0.16);
    background: linear-gradient(180deg, #1a1712, #100d0a);
    border-color: #322c24;
    border-radius: 14px;
    color: var(--mf-txt);
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* nameplate header */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header {
    background: linear-gradient(180deg, #23201a, #15120e);
    border-bottom: 1px solid #3a352d;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__title {
    color: var(--mf-green);
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(77, 255, 176, 0.4);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__subtitle {
    color: var(--mf-amber);
}

/* knob buttons + switcher */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn {
    background: linear-gradient(180deg, #2a261f, #1a1611);
    border: 1px solid #463f33;
    border-radius: 5px;
    color: var(--mf-amber);
    box-shadow: 0 1px 0 rgba(255, 210, 120, 0.12) inset;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn:hover,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn:focus-visible {
    background: #322c24;
    border-color: #5a5040;
    color: #ffd27a;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn--close {
    color: #ff6b5d;
    border-color: #5a2f2a;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn--close:hover,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__header-btn--close:focus-visible {
    background: #2a1814;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__style-switcher,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__width-switcher {
    background: #1a1611;
    border-color: #463f33;
}
.watchlist-detached-symbol.wds-style--mainframe .wds-style-btn,
.watchlist-detached-symbol.wds-style--mainframe .wds-width-btn {
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .wds-style-btn:hover,
.watchlist-detached-symbol.wds-style--mainframe .wds-style-btn:focus-visible,
.watchlist-detached-symbol.wds-style--mainframe .wds-width-btn:hover,
.watchlist-detached-symbol.wds-style--mainframe .wds-width-btn:focus-visible {
    color: var(--mf-amber);
    background: #2a261f;
}
.watchlist-detached-symbol.wds-style--mainframe .wds-style-btn.is-active,
.watchlist-detached-symbol.wds-style--mainframe .wds-width-btn.is-active {
    background: #2a261f;
    color: var(--mf-amber);
    box-shadow: none;
}

/* room panels */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__left-panel,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__right-panel {
    background: #0f0d0a;
    border-color: #2a2620;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__center-panel {
    background: #0c0a08;
}

/* sections = CRT monitors */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__section {
    position: relative;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
        radial-gradient(120% 130% at 50% 0%, #0a1c12, #06120b);
    border: 1px solid var(--mf-line);
    border-radius: 8px;
    box-shadow: 0 0 0 4px #1a1611, 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(77, 255, 176, 0.06) inset;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__section::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4dffb0;
    box-shadow: 0 0 6px #4dffb0;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__section-title {
    color: var(--mf-amber);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(255, 192, 77, 0.4);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__section-subtitle {
    color: var(--mf-dim);
}

/* stat cells */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__stat {
    background: rgba(77, 255, 176, 0.04);
    border: 1px solid var(--mf-line);
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__stat-label {
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__stat-value {
    color: #eafff2;
}

/* Earnings Snapshot metric cards — themed to match the stat cells above. */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric {
    background: rgba(77, 255, 176, 0.04);
    border: 1px solid var(--mf-line);
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__label {
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__value {
    color: #eafff2;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__value.is-positive {
    color: var(--mf-green);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__value.is-negative {
    color: #ff7a6b;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__value.is-neutral,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-metric__value.is-muted {
    color: var(--mf-dim);
}

/* chart frame + empty + news */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__chart-frame {
    background: #0c0a08;
    border-radius: 6px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__empty {
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__news-item {
    background: rgba(77, 255, 176, 0.03);
    border-color: var(--mf-line);
    color: var(--mf-txt);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__news-item:hover {
    background: rgba(77, 255, 176, 0.08);
    border-color: #2f6b50;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    color: #eafff2;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-listbox--embedded {
    background: rgba(77, 255, 176, 0.03);
    border: 1px solid var(--mf-line);
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS STYLE · EQUITY RESEARCH TEARSHEET (light)
   A printed research note: cream paper, serif masthead, gold/maroon
   hairline rules, small-caps section headers.
   ════════════════════════════════════════════════════════════════════ */
body .watchlist-detached-symbol.wds-style--tearsheet {
    --ts-paper: #f6f1e7;
    --ts-paper2: #fbf8f1;
    --ts-ink: #1c1a17;
    --ts-ink2: #3b3833;
    --ts-muted: #7a7363;
    --ts-rule: #d8cfbd;
    --ts-rule2: #c9bfa9;
    --ts-gold: #9a7b29;
    --ts-maroon: #7c2a2a;
    background: linear-gradient(180deg, var(--ts-paper2), var(--ts-paper));
    border-color: #c9bfa9;
    border-radius: 4px;
    color: var(--ts-ink);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* masthead header */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header {
    background: transparent;
    border-bottom: 2px solid var(--ts-ink);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--ts-ink);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__subtitle {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: var(--ts-ink2);
}

/* masthead-link buttons + switcher */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn {
    background: transparent;
    border: 1px solid var(--ts-rule2);
    border-radius: 2px;
    color: var(--ts-ink2);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn:hover,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn:focus-visible {
    background: #efe7d6;
    border-color: var(--ts-gold);
    color: var(--ts-gold);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn--close {
    color: var(--ts-maroon);
    border-color: #d8b0a0;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn--close:hover,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__header-btn--close:focus-visible {
    background: #f3e3dd;
    border-color: var(--ts-maroon);
    color: var(--ts-maroon);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__style-switcher,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__width-switcher {
    background: #efe7d6;
    border-color: var(--ts-rule2);
}
.watchlist-detached-symbol.wds-style--tearsheet .wds-style-btn,
.watchlist-detached-symbol.wds-style--tearsheet .wds-width-btn {
    color: var(--ts-muted);
    font-family: 'Inter', system-ui, sans-serif;
}
.watchlist-detached-symbol.wds-style--tearsheet .wds-style-btn:hover,
.watchlist-detached-symbol.wds-style--tearsheet .wds-style-btn:focus-visible,
.watchlist-detached-symbol.wds-style--tearsheet .wds-width-btn:hover,
.watchlist-detached-symbol.wds-style--tearsheet .wds-width-btn:focus-visible {
    color: var(--ts-gold);
    background: var(--ts-paper2);
}
.watchlist-detached-symbol.wds-style--tearsheet .wds-style-btn.is-active,
.watchlist-detached-symbol.wds-style--tearsheet .wds-width-btn.is-active {
    background: var(--ts-paper2);
    color: var(--ts-maroon);
    box-shadow: 0 1px 2px rgba(60, 50, 30, 0.12);
}

/* panels */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__left-panel,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__right-panel {
    background: transparent;
    border-color: var(--ts-rule);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__center-panel {
    background: transparent;
}

/* sections = paper blocks with hairline rules */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__section {
    background: #fffdf8;
    border: 1px solid var(--ts-rule2);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(60, 50, 30, 0.06);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__section-title {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ts-maroon);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__section-subtitle {
    color: var(--ts-muted);
    font-style: italic;
}

/* stat cells */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__stat {
    background: var(--ts-paper2);
    border: 1px solid var(--ts-rule);
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__stat-label {
    color: var(--ts-muted);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__stat-value {
    color: var(--ts-ink);
    font-family: 'Source Serif 4', Georgia, serif;
}

/* Earnings Snapshot metric cards — themed to match the stat cells above. */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric {
    background: var(--ts-paper2);
    border: 1px solid var(--ts-rule);
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__label {
    color: var(--ts-muted);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__value {
    color: var(--ts-ink);
    font-family: 'Source Serif 4', Georgia, serif;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__value.is-positive {
    color: #2f6b3d;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__value.is-negative {
    color: var(--ts-maroon);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__value.is-neutral,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-metric__value.is-muted {
    color: var(--ts-muted);
}

/* chart frame + empty + news */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__chart-frame {
    background: #fffdf8;
    border: 1px solid var(--ts-rule2);
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__empty {
    color: var(--ts-muted);
    font-style: italic;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__news-item {
    background: var(--ts-paper2);
    border-color: var(--ts-rule);
    color: var(--ts-ink2);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__news-item:hover {
    background: #efe7d6;
    border-color: var(--ts-gold);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__news-item .watchlist-news-popover__title {
    color: var(--ts-ink);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-detached-symbol__news-item .watchlist-news-popover__meta {
    color: var(--ts-muted);
}

/* ── Analyst Changes cards, themed per Focus style ───────────────────────────
   The cards (.watchlist-upgrades-item) otherwise fall through to the app-theme
   tints, which clash with each Focus skin (e.g. dark-green cards on the cream
   Tearsheet). Each style below keeps the original's *solid* card fill but
   recolours it to its own palette — positive / negative / neutral tones, the
   NEW badge, and the hover outline. Classic is intentionally left to inherit
   the app theme (it's the untouched default). These selectors carry two skin
   classes + the tone class, so they outrank the body[data-theme] overrides. */

/* Tearsheet — solid paper cards, restrained ink tints, hairline rules. */
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-listbox--embedded {
    background: transparent;
    border: none;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item {
    border: 1px solid var(--ts-rule);
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item.is-positive {
    background: #e8efe1;
    border-color: #cdd9bf;
    color: #1f5b38;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item.is-negative {
    background: #f3e4df;
    border-color: #e2c7bd;
    color: var(--ts-maroon);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item.is-neutral {
    background: var(--ts-paper2);
    border-color: var(--ts-rule);
    color: var(--ts-ink2);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item.is-empty {
    background: transparent;
    border-color: transparent;
    color: var(--ts-muted);
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item__badge {
    background: var(--ts-gold);
    color: #fffdf8;
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item:hover,
.watchlist-detached-symbol.wds-style--tearsheet .watchlist-upgrades-item.is-focused {
    outline-color: var(--ts-gold);
}

/* Bloomberg — solid dark glass cards, amber NEW tag. */
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-listbox--embedded {
    background: #070b10;
    border: 1px solid var(--bb-line);
    border-radius: 4px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item {
    border: 1px solid transparent;
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item.is-positive {
    background: #0c1d15;
    border-color: #143a2a;
    color: #26d07c;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item.is-negative {
    background: #1e0c10;
    border-color: #3a161c;
    color: #ff4d5e;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item.is-neutral {
    background: #0b1219;
    border-color: var(--bb-line);
    color: var(--bb-txt);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item.is-empty {
    background: transparent;
    border-color: transparent;
    color: var(--bb-dim);
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item__badge {
    background: var(--bb-amber);
    color: #06090d;
    border-radius: 2px;
}
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item:hover,
.watchlist-detached-symbol.wds-style--bloomberg .watchlist-upgrades-item.is-focused {
    outline-color: var(--bb-amber);
}

/* Cockpit — solid instrument-bezel cards, cyan NEW tag. */
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-listbox--embedded {
    background: #0a1722;
    border: 1px solid var(--ck-line);
    border-radius: 12px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item {
    border: 1px solid transparent;
    border-radius: 10px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item.is-positive {
    background: #0c2018;
    border-color: #18402f;
    color: var(--ck-green);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item.is-negative {
    background: #1f0e13;
    border-color: #3a1922;
    color: #ff5b6e;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item.is-neutral {
    background: #0c1a26;
    border-color: var(--ck-line);
    color: var(--ck-txt);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item.is-empty {
    background: transparent;
    border-color: transparent;
    color: var(--ck-dim);
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item__badge {
    background: var(--ck-cyan);
    color: #04121c;
    border-radius: 8px;
}
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item:hover,
.watchlist-detached-symbol.wds-style--cockpit .watchlist-upgrades-item.is-focused {
    outline-color: var(--ck-cyan);
}

/* Mainframe — solid CRT cards, monospace, amber NEW tag. */
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-listbox--embedded {
    background: #0a1c12;
    border: 1px solid var(--mf-line);
    border-radius: 6px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item {
    border: 1px solid transparent;
    border-radius: 4px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item.is-positive {
    background: #0d2419;
    border-color: rgba(77, 255, 176, 0.22);
    color: var(--mf-green);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item.is-negative {
    background: #2a120e;
    border-color: rgba(255, 107, 93, 0.25);
    color: #ff6b5d;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item.is-neutral {
    background: #161210;
    border-color: var(--mf-line);
    color: var(--mf-txt);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item.is-empty {
    background: transparent;
    border-color: transparent;
    color: var(--mf-dim);
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item__badge {
    background: var(--mf-amber);
    color: #15120e;
    border-radius: 3px;
}
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item:hover,
.watchlist-detached-symbol.wds-style--mainframe .watchlist-upgrades-item.is-focused {
    outline-color: var(--mf-green);
}

@media (max-width: 900px) {
    .watchlist-detached-symbol__right-panel {
        width: 240px;
    }
    .watchlist-detached-symbol__left-panel {
        width: 200px;
    }
}

/* ── Focus window chart control dropdowns ─────────────── */
.wds-chart-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.wds-chart-ctrl-btn {
    appearance: none;
    padding: 3px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    user-select: none;
}
.wds-chart-ctrl-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.wds-chart-ctrl-btn.is-active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.wds-chart-ctrl-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 130px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    z-index: 9999;
    display: none;
}
.wds-chart-ctrl-dropdown.is-open {
    display: block;
}

.wds-chart-ctrl-note {
    padding: 3px 8px 2px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.wds-chart-ctrl-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 2px;
}
.wds-chart-ctrl-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.77rem;
    font-weight: 600;
    color: #334155;
    transition: background 0.12s;
    user-select: none;
    white-space: nowrap;
}
.wds-chart-ctrl-item:hover {
    background: #f1f5f9;
}
.wds-chart-ctrl-item.is-checked {
    color: #1d4ed8;
}
.wds-chart-ctrl-item input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #1d4ed8;
    cursor: pointer;
    flex-shrink: 0;
}

body[data-theme] .wds-chart-ctrl-btn {
    background: var(--panel-muted);
    border-color: var(--border);
    color: var(--text-muted);
}
body[data-theme] .wds-chart-ctrl-btn:hover,
body[data-theme] .wds-chart-ctrl-btn.is-active {
    background: color-mix(in srgb, var(--accent) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--accent);
}
body[data-theme] .wds-chart-ctrl-dropdown {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
body[data-theme] .wds-chart-ctrl-item {
    color: var(--text-secondary);
}
body[data-theme] .wds-chart-ctrl-item:hover {
    background: var(--panel-muted);
}
body[data-theme] .wds-chart-ctrl-item.is-checked {
    color: var(--accent);
}
body[data-theme] .wds-chart-ctrl-divider {
    background: var(--border);
}
body[data-theme] .wds-chart-ctrl-note {
    color: var(--text-muted);
}

/* Hide the watchlist and financial summary containers when logged out */
#watchlistContainer {
    display: none;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d7e0ea;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
    /* The table's column-budget breakpoints below query this container's own
       rendered width, not the viewport — required because the detached
       floating panel can be far narrower than the browser window, and a
       viewport media query would never "see" that and squeeze accordingly. */
    container-type: inline-size;
    container-name: wlpanel;
}

.table-container, .watchlist-container {
    padding: 0;
    max-width: 100%;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
}

#watchlistFinancialSummary {
    max-width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    padding: 0;
}

.financial-summary-scroll {
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    border: 1px solid #d7e0ea;
    border-radius: 16px;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
    /* max-height is set dynamically by JS to fill available viewport height */
}

/* ── Watchlist detach bar ──────────────────────────────────────────────── */
.watchlist-detach-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px;
    cursor: default;
    user-select: none;
    border-radius: 12px 12px 0 0;
    min-height: 32px;
}

/* Title — hidden when docked (watchlist header below already shows it) */
.watchlist-detach-bar__label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    display: none;
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar__label {
    display: block;
}

/* Central drag zone — only shown when detached */
.watchlist-detach-bar__drag-hint {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
    white-space: nowrap;
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar__drag-hint {
    display: flex;
}
.watchlist-detach-bar__drag-dots {
    font-size: 13px;
    letter-spacing: 3px;
    color: #cbd5e1;
    line-height: 1;
}

/* Action buttons group */
.watchlist-detach-bar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Detached title-bar look */
#watchlistContainer.watchlist--detached .watchlist-detach-bar {
    cursor: grab;
    background: linear-gradient(to bottom, #f1f5f9 0%, #e8edf4 100%);
    border-bottom: 1px solid #cbd5e1;
    border-radius: 14px 14px 0 0;
    padding: 7px 12px;
    min-height: 40px;
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar:hover {
    background: linear-gradient(to bottom, #e8edf4 0%, #dce3ec 100%);
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar:hover .watchlist-detach-bar__drag-hint {
    color: #64748b;
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar:hover .watchlist-detach-bar__drag-dots {
    color: #94a3b8;
}
#watchlistContainer.watchlist--detached .watchlist-detach-bar:active {
    cursor: grabbing;
    background: linear-gradient(to bottom, #dce3ec 0%, #d1d9e3 100%);
}
.watchlist-detach-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.watchlist-detach-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
.watchlist-detach-btn svg { flex-shrink: 0; }

/* ── Detached (floating) state ────────────────────────────────────────── */
/* ── Minimize button (only visible when detached) ─────────────────────── */
.watchlist-minimize-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.watchlist-minimize-btn:hover { background: #f1f5f9; color: #334155; }
#watchlistContainer.watchlist--detached .watchlist-minimize-btn { display: flex; }

body[data-theme] .watchlist-minimize-btn {
    border-color: var(--border);
    color: var(--text-muted);
}
body[data-theme] .watchlist-minimize-btn:hover {
    background: var(--panel-muted);
    color: var(--text-primary);
}

/* Minimized: collapse everything below the drag bar */
#watchlistContainer.watchlist--minimized > :not(.watchlist-detach-bar) {
    display: none !important;
}

/* ── Detached (floating) state ────────────────────────────────────────── */
#watchlistContainer.watchlist--detached {
    position: fixed;
    z-index: 1200;
    /* Wide enough to show all columns comfortably; scales with viewport.
       clamp: min 900px | preferred: viewport - 120px | max 1500px.
       Leaves ~60px either side on a 1440px screen for free dragging. */
    width: clamp(900px, calc(100vw - 120px), 1500px);
    /* left/top set entirely by JS — no CSS default to avoid conflicts */
    margin: 0;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
}
#watchlistContainer.watchlist--detached .financial-summary-scroll {
    border-radius: 0 0 14px 14px;
    border-top: none;
    overflow-x: auto;
}
/* Detached title sits directly under the drag bar with no breathing room —
   give it a little headroom (docked layout already has enough from the
   page section above it). */
#watchlistContainer.watchlist--detached .watchlist-header {
    margin-top: 12px;
}

/* ── Resize grip — bottom-right corner (detached only) ─────────────────
   Same custom-grip approach as .watchlist-detached-symbol__resize: native
   `resize` is unreliable with the rounded corner and internal scroll area.
   Unlike that panel (which has `overflow:hidden`), this container doesn't
   clip its children, so a grip flush at 0,0 would straddle the container's
   own border-radius cutout — part of the icon would paint over whatever is
   behind the floating (position:fixed) panel instead of its own surface,
   making it read as invisible depending on what's underneath. Giving the
   grip its own background patch, shaped to continue the container's corner
   radius, guarantees it always renders on a known, contrasting surface. */
.watchlist-detach-resize {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26px;
    height: 26px;
    z-index: 6;
    cursor: nwse-resize;
    touch-action: none;
    color: #475569;
    background: #f1f5f9;
    border-radius: 0 0 16px 0;
}
#watchlistContainer.watchlist--detached .watchlist-detach-resize {
    display: block;
}
.watchlist-detach-resize::before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 13px;
    height: 13px;
    background: repeating-linear-gradient(-45deg, currentColor 0 1.6px, transparent 1.6px 4.5px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.watchlist-detach-resize:hover::before { opacity: 1; }
body[data-theme] .watchlist-detach-resize {
    color: var(--text-muted);
    background: var(--panel);
}

/* When detached, keep the same fixed-layout squeeze as the inline watchlist so
   the columns fit the (resizable) panel instead of sizing to content and
   forcing a permanent horizontal scrollbar. The column-width budget and the
   responsive priority-hiding both apply here too.
   No min-width here (deliberately) — this selector's ID+class specificity
   would otherwise always beat the plain `.financial-summary-table` selector
   the @container "tight width" stage (below) uses for its px floor, which
   silently broke that stage's scrollbar fallback for the detached panel. */
#watchlistContainer.watchlist--detached .financial-summary-table {
    table-layout: fixed;
    width: 100%;
}
/* Placeholder is never shown — page content collapses into the vacated space */
#watchlistDetachPlaceholder {
    display: none !important;
}

/* Theme-aware detach bar */
body[data-theme] .watchlist-detach-bar__label { color: var(--text-primary); }
body[data-theme] .watchlist-detach-bar__drag-hint { color: var(--text-muted); }
body[data-theme] .watchlist-detach-bar__drag-dots { color: var(--border); }
body[data-theme] .watchlist-detach-btn {
    border-color: var(--border);
    color: var(--text-muted);
}
body[data-theme] .watchlist-detach-btn:hover {
    background: var(--panel-muted);
    color: var(--text-primary);
}
body[data-theme] #watchlistContainer.watchlist--detached .watchlist-detach-bar {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--panel-muted) 80%, var(--panel)) 0%,
        color-mix(in srgb, var(--panel-muted) 95%, var(--panel)) 100%
    );
    border-bottom-color: var(--border);
}
body[data-theme] #watchlistContainer.watchlist--detached .watchlist-detach-bar:hover {
    background: var(--panel-muted);
}
body[data-theme] #watchlistContainer.watchlist--detached .watchlist-detach-bar:hover .watchlist-detach-bar__drag-hint {
    color: var(--text-primary);
}
body[data-theme] #watchlistContainer.watchlist--detached .watchlist-detach-bar:hover .watchlist-detach-bar__drag-dots {
    color: var(--text-muted);
}

body[data-theme] #watchlistContainer {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--panel-muted) 82%, var(--panel)) 0%,
        var(--panel) 100%
    );
    border-color: color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
    color: var(--text-primary);
}

body[data-theme] #watchlistFinancialSummary {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary);
}

body[data-theme] .watchlist-header h5 {
    color: color-mix(in srgb, var(--accent) 62%, var(--text-primary));
}

body[data-theme] .watchlist-header__copy::before {
    background: var(--accent);
}

body[data-theme] .watchlist-header__copy p,
body[data-theme] .watchlist-header__count,
body[data-theme] .watchlist-company-name,
body[data-theme] .watchlist-earnings-relative,
body[data-theme] .watchlist-earnings-quarter,
body[data-theme] .watchlist-metric__label,
body[data-theme] .watchlist-signal-chip__label {
    color: var(--text-muted);
}

body[data-theme] .watchlist-header__count,
body[data-theme] .financial-summary-scroll,
body[data-theme] .watchlist-metric,
body[data-theme] .watchlist-signal-chip,
body[data-theme] #symbolSearchInput,
body[data-theme] #symbolSearchButton,
body[data-theme] #deleteWatchlistButton {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .watchlist-header__count {
    background-color: color-mix(in srgb, var(--accent) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    color: color-mix(in srgb, var(--accent) 58%, var(--text-primary));
}

body[data-theme] .financial-summary-scroll {
    background-color: color-mix(in srgb, var(--panel) 92%, var(--panel-muted));
    border-color: color-mix(in srgb, var(--border) 92%, var(--accent) 8%);
}

body[data-theme] #symbolSearchInput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

body[data-theme] #symbolSearchMessage {
    color: var(--negative);
}

body[data-theme] #symbolSearchButton {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

body[data-theme] #symbolSearchButton:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent-muted);
}

body[data-theme] #deleteWatchlistButton:hover {
    background-color: var(--row-hover);
    border-color: var(--accent);
}

body[data-theme] .financial-summary-table th,
body[data-theme] .financial-summary-table td {
    border-color: var(--border);
}

body[data-theme] .financial-summary-table th {
    background-color: var(--panel-muted);
    color: var(--text-primary);
}

body[data-theme] .financial-summary-table td {
    color: var(--text-primary);
}

body[data-theme] .financial-summary-table a,
body[data-theme] .financial-summary-table a:visited {
    color: inherit;
}

body[data-theme] .watchlist-summary-row:nth-child(even) {
    background-color: var(--panel-muted);
}

body[data-theme] .watchlist-summary-row:nth-child(odd) {
    background-color: var(--panel);
}

body[data-theme] .watchlist-summary-row:hover {
    background-color: var(--row-hover);
}

body[data-theme] .watchlist-summary-row.is-selected {
    background-color: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

body[data-theme] .watchlist-summary-row--flash {
    background-color: rgba(245, 158, 11, 0.16) !important;
    box-shadow: inset 3px 0 0 #f59e0b;
}

body[data-theme] .watchlist-company-symbol,
body[data-theme] .watchlist-metric__value,
body[data-theme] .watchlist-signal-chip__value {
    color: var(--text-primary);
}

body[data-theme] .watchlist-metric__value.is-positive {
    color: var(--positive);
}

body[data-theme] .watchlist-metric__value.is-negative {
    color: var(--negative);
}

body[data-theme] .watchlist-metric__value.is-neutral,
body[data-theme] .watchlist-metric__value.is-muted {
    color: var(--text-muted);
}

body[data-theme] .watchlist-signal-chip.is-positive {
    background-color: color-mix(in srgb, var(--positive) 16%, var(--panel));
    border-color: color-mix(in srgb, var(--positive) 38%, var(--border));
}

body[data-theme] .watchlist-signal-chip.is-negative {
    background-color: color-mix(in srgb, var(--negative) 16%, var(--panel));
    border-color: color-mix(in srgb, var(--negative) 38%, var(--border));
}

body[data-theme] .watchlist-signal-chip.is-caution {
    background-color: color-mix(in srgb, #f59e0b 16%, var(--panel));
    border-color: color-mix(in srgb, #f59e0b 38%, var(--border));
}

/* Verdict value carries the tone color via theme tokens for palette consistency. */
body[data-theme] .watchlist-signal-chip.is-positive .watchlist-signal-chip__value {
    color: var(--positive);
}
body[data-theme] .watchlist-signal-chip.is-negative .watchlist-signal-chip__value {
    color: var(--negative);
}
body[data-theme] .watchlist-signal-chip.is-caution .watchlist-signal-chip__value {
    color: color-mix(in srgb, #f59e0b 80%, var(--text-primary));
}

/* Themed skin switcher */
body[data-theme] .watchlist-skin-switcher {
    background-color: var(--panel-muted);
    border-color: var(--border);
}
body[data-theme] .watchlist-skin-btn {
    color: var(--text-muted);
}
body[data-theme] .watchlist-skin-btn:hover {
    color: var(--text-primary);
}
body[data-theme] .watchlist-skin-btn.is-active {
    background-color: var(--panel);
    color: var(--text-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

body[data-theme] .ai-report-cell-desc {
    color: var(--text-muted);
}

body[data-theme] .watchlist-upgrades-button:hover,
body[data-theme] .watchlist-upgrades-button:focus-visible,
body[data-theme] .watchlist-news-cell:hover,
body[data-theme] .watchlist-news-cell:focus-visible {
    background-color: var(--row-hover);
    border-color: var(--accent);
}

body[data-theme] .watchlist-tooltip {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

/* ── Priority-based responsive columns ───────────────────────────────────────
   The table always squeezes to fill its container (width:100%, no px floor), so
   there is no horizontal scrollbar at normal widths. As the container narrows we
   first sacrifice the lowest-value content (so the remaining columns stay
   readable rather than getting impossibly thin), keeping the essentials —
   Company, Price, Signals, AI Report, Alerts — visible throughout: Signals and
   AI Report condense (smaller chips/pills) together rather than one being hidden
   outright while the other stays full-size.

   These are @container (not @media) queries against #watchlistContainer's own
   width (see container-type/-name on that rule above) rather than the browser
   viewport — the detached floating panel can be resized far narrower than the
   viewport, and a viewport media query would never react to that, leaving
   columns like AI Report/Next Earnings stuck at "full-width" sizing while the
   panel itself has nowhere near enough room, which is what forces a premature
   horizontal scrollbar even though the docked layout still fits fine.

   Order of sacrifice as the container narrows:
     1) Signals + AI Report condense to a denser chip/pill size (≤1460px) —
        same priority tier, so both stay visible instead of AI Report hiding
        while Signals keeps its full-width chips.
     2) Earnings Snapshot → Surprise only, i.e. drop Actual/Estimate; AI
        Report's descriptor line also drops (≤1300px)
     3) Next Earnings column        (≤1120px)

   Each stage re-budgets the visible columns back to ~100%. Breakpoints are
   ordered large→small so that when several match at once, the smallest (most
   condensed) stage wins the cascade. Only at a genuinely tight width (≤980px)
   is a px min-width applied, which is the single point the horizontal
   scrollbar appears. */

/* Stage 1 — condense Signals + AI Report instead of hiding either. The
   #watchlistContainer .financial-summary-table prefix matches the skin
   overrides' specificity (ID + 2 classes) and sits later in the file, so it
   wins ties and applies regardless of which skin (Standard/Compact/Terminal)
   is active — this is a width response, not a skin preference. */
@container wlpanel (max-width: 1460px) {
    #watchlistContainer .financial-summary-table .watchlist-signal-chip {
        padding: 4px 7px;
        gap: 1px;
    }
    #watchlistContainer .financial-summary-table .watchlist-signal-chip__label {
        font-size: 0.6rem;
    }
    #watchlistContainer .financial-summary-table .watchlist-signal-chip__value {
        font-size: 0.78rem;
    }
    #watchlistContainer .financial-summary-table .watchlist-signals-group {
        gap: 5px;
        max-width: none;
    }
    #watchlistContainer .financial-summary-table .watchlist-tier-pill {
        padding: 2px 7px;
        font-size: 0.68rem;
    }

    .financial-summary-table .col-select   { width: 3%; }
    .financial-summary-table .col-focus    { width: 4%; }
    .financial-summary-table .col-company  { width: 14%; }
    .financial-summary-table .col-price,
    .financial-summary-table th.col-price  { width: 8%; }
    .financial-summary-table .col-earnings-date { width: 10%; }
    .financial-summary-table .col-earnings { width: 15%; }
    .financial-summary-table .col-signals  { width: 19%; }
    .financial-summary-table .col-ai-report { width: 11%; }
    .financial-summary-table .col-alerts   { width: 16%; }
}

/* Stage 2 — collapse Earnings Snapshot down to just the Surprise metric, and
   drop the AI Report descriptor line (cheapest thing left to sacrifice —
   the pills themselves stay). */
@container wlpanel (max-width: 1300px) {
    .watchlist-earnings-snapshot-cell .watchlist-metrics-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .watchlist-earnings-snapshot-cell .watchlist-metric:nth-child(1),
    .watchlist-earnings-snapshot-cell .watchlist-metric:nth-child(2) {
        display: none;
    }
    .ai-report-cell-desc { display: none; }

    .financial-summary-table .col-select   { width: 3%; }
    .financial-summary-table .col-focus    { width: 4%; }
    .financial-summary-table .col-company  { width: 15%; }
    .financial-summary-table .col-price,
    .financial-summary-table th.col-price  { width: 8%; }
    .financial-summary-table .col-earnings-date { width: 11%; }
    .financial-summary-table .col-earnings { width: 8%; }
    .financial-summary-table .col-signals  { width: 23%; }
    .financial-summary-table .col-ai-report { width: 12%; }
    .financial-summary-table .col-alerts   { width: 16%; }
}

/* Stage 3 — drop Next Earnings; Signals and AI Report stay, both condensed. */
@container wlpanel (max-width: 1120px) {
    .financial-summary-table th.col-earnings-date,
    .financial-summary-table td.watchlist-earnings-date-cell {
        display: none;
    }
    .financial-summary-table .col-select   { width: 4%; }
    .financial-summary-table .col-focus    { width: 5%; }
    .financial-summary-table .col-company  { width: 18%; }
    .financial-summary-table .col-price,
    .financial-summary-table th.col-price  { width: 9%; }
    .financial-summary-table .col-earnings { width: 9%; }
    .financial-summary-table .col-signals  { width: 30%; }
    .financial-summary-table .col-ai-report { width: 11%; }
    .financial-summary-table .col-alerts   { width: 14%; }
}

/* Very tight only — introduce a px floor so the table stops squeezing and the
   horizontal scrollbar finally appears. Above this width the table always fits. */
@container wlpanel (max-width: 980px) {
    .financial-summary-table { min-width: 920px; }
}

@container wlpanel (max-width: 1100px) {
    /* Column widths are now fixed by the budget above and held by the table's
       min-width; below this breakpoint the table scrolls rather than re-flowing,
       so only the in-cell chip/alert rules need adjusting here. */
    .watchlist-signal-chip {
        min-width: 90px;
    }

    .watchlist-alert-levels {
        width: auto;
        flex-direction: row;
        flex-wrap: nowrap;
    }
}

@media (max-width: 860px) {
    .watchlist-header {
        flex-direction: column;
        align-items: stretch;
    }

    .watchlist-header__copy {
        padding-left: 12px;
    }

    .watchlist-header__count {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    #watchlistContainer {
        padding: 14px;
        border-radius: 14px;
    }

    .watchlist-header__copy h5 {
        font-size: 1.08rem;
    }

    .watchlist-header__copy p {
        font-size: 0.9rem;
    }

    .symbol-search-box {
        gap: 8px;
    }

    #symbolSearchInput,
    #symbolSearchButton,
    #deleteWatchlistButton {
        width: 100%;
    }
}

/* ================================== */
/*   Alphavantage Chart Tooltip       */
/* ================================== */


/* Tooltip for Alphavantage Chart */
.alphavantage-chart-tooltip {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 8px;
    font-size: 12px;
    color: #333;
    z-index: 1000;
    white-space: nowrap;
}


/* ================================== */
/* Alphavantage Chart Styles          */
/* ================================== */

.alphavantage-chart-container {
    width: 100%;
    height: 600px; /* Increase height for the entire container */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px; /* Add padding to prevent cutoff */
    box-sizing: border-box; /* Ensure padding is included in the height */
}

/* Alphavantage Chart Container */
.alphavantage-chart {
    width: 100%; /* Full-width responsiveness */
    height: 300px; /* Consistent chart height */
    margin: auto;
    padding: 10px;
    position: relative;
}

#forexCommoditiesContainer {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.forex-table {
    width: 100%;
    border-collapse: collapse;
}

.forex-table th {
    background-color: #2c3e50;
    color: #ecf0f1;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

.forex-table td {
    padding: 8px;
    vertical-align: middle;
}

.chart-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.data-age {
    font-size: 0.9em;
    color: #555;
}


/* ============================================== */
/*        Alpaca Chart Menu Container Styles      */
/* ============================================== */

.chart-menu {
    display: flex;
    justify-content: space-around;
    background-color: #f8f9fa;
    padding: 10px;
    font-family: Arial, sans-serif;
}

.menu-item.is-hidden {
    display: none;
}

.menu-item {
    position: relative;
    cursor: pointer;
    padding: 10px 15px;
}

.menu-item:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 150px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #333;
    padding: 10px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

body[data-theme] .chart-menu {
    background-color: var(--panel);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

body[data-theme] .menu-item {
    color: var(--text-primary);
}

body[data-theme] .menu-item:hover {
    color: var(--accent);
}

body[data-theme] .dropdown-content {
    background-color: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--border) 40%, transparent);
}

body[data-theme] .dropdown-content a:hover {
    background-color: var(--panel-muted);
    color: var(--text-primary);
}

body[data-theme] .chart-menu a,
body[data-theme] .chart-menu a:visited {
    color: var(--text-primary);
}

body[data-theme] .chart-menu a:hover {
    color: var(--accent);
}

.alerts-panel {
    margin: 12px 16px 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--panel, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.risk-flyout {
    position: fixed;
    display: none;
    z-index: 2000;
    padding: 16px;
    border-radius: 16px;
    background: var(--panel, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    color: var(--text-primary, #0f172a);
}

.risk-flyout.is-active {
    display: block;
}

.risk-flyout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.risk-flyout__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.risk-flyout__subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.risk-flyout__close {
    border: 1px solid var(--border, #e2e8f0);
    background: transparent;
    color: var(--text-muted, #64748b);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.risk-flyout__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-flyout__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #475569);
}

.risk-flyout__row input,
.risk-flyout__row select {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.85rem;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
}

.risk-flyout__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.risk-flyout__status {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.risk-flyout__status[data-tone="error"] {
    color: #dc2626;
}

.risk-flyout__status[data-tone="success"] {
    color: #16a34a;
}

.risk-flyout__buttons {
    display: flex;
    gap: 8px;
}

.risk-flyout__button {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border, #e2e8f0);
    cursor: pointer;
}

.risk-flyout__button--ghost {
    background: transparent;
    color: var(--text-muted, #475569);
}

.risk-flyout__button--primary {
    background: var(--accent, #0f766e);
    color: #ffffff;
    border-color: transparent;
}

.alerts-panel.is-hidden {
    display: none;
}

.alerts-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.alerts-panel__header h2 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary, #0f172a);
}

.alerts-close {
    border: 1px solid var(--border, #e2e8f0);
    background: transparent;
    color: var(--text-muted, #475569);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.alerts-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.alerts-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted, #475569);
}

.alerts-grid input,
.alerts-grid select {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.85rem;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
}

.alerts-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.alerts-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alerts-button {
    border: 1px solid var(--accent, #2563eb);
    background: var(--accent, #2563eb);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.alerts-button--ghost {
    background: transparent;
    color: var(--accent, #2563eb);
}

.alerts-button--danger {
    border-color: #dc2626;
    background: #dc2626;
}

.alerts-status {
    font-size: 0.8rem;
    color: var(--text-muted, #475569);
}

.alerts-status[data-tone="error"] {
    color: #dc2626;
}

.alerts-status[data-tone="success"] {
    color: #16a34a;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alerts-item {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--panel-muted, #f8fafc);
}

.alerts-item__summary {
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
}

.alerts-item__meta {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.alerts-item__actions {
    display: flex;
    gap: 8px;
}

.alerts-empty {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

/* ================================== */
/*         Account Settings            */
/* ================================== */

.account-settings {
    max-width: 960px;
    margin: 24px auto 48px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-settings__header {
    margin-bottom: 4px;
}

.account-settings__header h1 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    color: var(--text-primary, #0f172a);
}

.account-settings__header p {
    margin: 0;
    color: var(--text-muted, #64748b);
}

.account-settings__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-card {
    background: var(--panel, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.account-card h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--text-primary, #0f172a);
}

.account-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.account-card__header h2 {
    margin: 0;
}

.account-card__desc {
    margin: 4px 0 16px;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 68ch;
}

.account-card__note {
    display: block;
    margin: 14px 0 0;
}

.account-card--danger {
    border-color: color-mix(in srgb, var(--negative, #dc2626) 40%, var(--border, #e2e8f0));
}

.account-plan-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.account-plan-pill--neutral {
    background: var(--pill-bg, #e2e8f0);
    color: var(--pill-text, #334155);
    border-color: var(--border, #cbd5e1);
}

.account-plan-pill--warning {
    background: var(--short-bg, rgba(245, 158, 11, 0.16));
    color: var(--short-text, #b45309);
    border-color: color-mix(in srgb, var(--short-text, #b45309) 30%, transparent);
}

.account-plan-pill--success {
    background: var(--buy-bg, rgba(22, 163, 74, 0.14));
    color: var(--buy-text, #15803d);
    border-color: color-mix(in srgb, var(--buy-text, #15803d) 30%, transparent);
}

.account-plan-pill--info {
    background: color-mix(in srgb, var(--accent, #0ea5e9) 14%, transparent);
    color: var(--accent, #0369a1);
    border-color: color-mix(in srgb, var(--accent, #0369a1) 30%, transparent);
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}

.account-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    min-width: 0;
}

.account-grid input,
.account-grid select,
.account-subpanel input {
    box-sizing: border-box;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
    width: 100%;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-grid input:focus-visible,
.account-grid select:focus-visible,
.account-subpanel input:focus-visible {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}

.account-grid input:disabled {
    opacity: 0.75;
    cursor: default;
}

.account-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
}

.account-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
}

.account-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    accent-color: var(--accent, #2563eb);
    cursor: pointer;
}

.account-checkbox--row {
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--panel-muted, #f8fafc);
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 16px;
}

.account-actions--wrap {
    flex-wrap: wrap;
}

.account-subpanel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e2e8f0);
    max-width: 420px;
}

.account-subpanel label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.account-subpanel .account-actions {
    margin-top: 12px;
}

.account-card--actions {
    padding: 14px 20px;
}

.account-card--actions .account-actions {
    margin-top: 0;
}

.account-button {
    border: 1px solid var(--accent, #2563eb);
    background: var(--accent, #2563eb);
    color: var(--accent-on, #ffffff);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.account-button:hover:not(:disabled) {
    background: var(--accent-muted, #1d4ed8);
    border-color: var(--accent-muted, #1d4ed8);
}

.account-button:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

.account-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.account-button--ghost {
    background: transparent;
    color: var(--accent, #2563eb);
}

.account-button--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.account-button--danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.account-button--danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

.account-button--danger:focus-visible {
    outline-color: #dc2626;
}

.account-status {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.account-status[data-tone="success"] {
    color: var(--positive, #16a34a);
}

.account-status[data-tone="error"] {
    color: var(--negative, #dc2626);
}

@media (max-width: 640px) {
    .account-settings {
        margin-top: 16px;
    }

    .account-card {
        padding: 16px;
    }

    .account-card--actions {
        padding: 14px 16px;
    }
}

/* ================================== */
/*              Admin Panel           */
/* ================================== */

.admin-panel {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: var(--panel, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.admin-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.admin-grid input {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
}

.admin-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.admin-actions--inline {
    margin-top: 0;
}

.admin-status {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.admin-status[data-tone="success"] {
    color: #16a34a;
}

.admin-status[data-tone="error"] {
    color: #dc2626;
}

.admin-divider {
    height: 1px;
    background: var(--border, #e2e8f0);
    margin: 16px 0;
}

.admin-hint {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
}

.admin-hint--tight {
    margin-top: 4px;
    margin-bottom: 0;
}

.admin-user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-user-table th,
.admin-user-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border, #e2e8f0);
    color: var(--text-primary, #0f172a);
}

.admin-user-table th {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
    background: var(--panel-muted, #f8fafc);
}

.admin-user-table tr:hover td {
    background: var(--panel-muted, #f8fafc);
}

.admin-cell-user {
    font-weight: 600;
}

.admin-cell-center {
    text-align: center;
}

.admin-cell-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-inline-select {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.82rem;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
}

.admin-btn-save,
.admin-btn-reset {
    padding: 4px 10px;
    font-size: 0.78rem;
    border-radius: 6px;
    cursor: pointer;
}

.admin-cell-credits {
    white-space: nowrap;
}

.admin-credits-balance {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
    margin-bottom: 4px;
}

.admin-credits-add {
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-credits-input {
    width: 60px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.8rem;
    background: var(--panel-muted, #f8fafc);
    color: var(--text-primary, #0f172a);
}

.admin-row-status {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

.admin-row-status[data-tone="success"] {
    color: #16a34a;
}

.admin-row-status[data-tone="error"] {
    color: #dc2626;
}

.alpaca-main-chart-container {
    width: 100%;
    height: 420px;
    box-sizing: border-box;
    /* Clip the ECharts canvas to the container so it never bleeds past the card
       edge mid-resize (the canvas briefly keeps its old width before resize()). */
    overflow: hidden;
    max-width: 100%;
}

.chart-controls-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 16px 0;
}

.chart-controls-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #ffffff) 90%, var(--bg, #f8fafc));
}

.chart-controls-group__label {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-right: 2px;
}

.chart-toggle-chip {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--panel, #ffffff);
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.chart-toggle-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chart-toggle-chip:hover {
    border-color: color-mix(in srgb, var(--accent, #0f172a) 22%, var(--border, #e2e8f0));
}

.chart-toggle-chip.is-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #0f172a) 92%, white), var(--accent, #0f172a));
    border-color: color-mix(in srgb, var(--accent, #0f172a) 72%, black);
    color: var(--panel, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 6px 14px rgba(15, 23, 42, 0.16);
}

.chart-toggle-chip:focus-within {
    outline: 2px solid color-mix(in srgb, var(--accent, #0f172a) 32%, transparent);
    outline-offset: 2px;
}

.chart-controls-note {
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.alpaca-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    padding: 16px;
    background: var(--bg, #f8fafc);
}

.alpaca-chart-grid--expanded .alpaca-main-chart-container {
    min-height: 630px;
}

.alpaca-chart-card {
    background: var(--panel, #ffffff);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(22, 28, 45, 0.08);
    border: 1px solid var(--border, #e2e8f0);
    padding: 12px;
    display: flex;
    flex-direction: column;
    /* min-width:0 lets the card shrink to its grid track (grid items default to
       min-width:auto, which lets a wide canvas force the track — and the card —
       past the grid edge). overflow:hidden clips to the rounded card border. */
    min-width: 0;
    overflow: hidden;
}

.alpaca-chart-card__header {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    padding: 8px 8px 4px;
}

.alpaca-indicator-stack {
    padding: 0 16px 24px;
}

@media (max-width: 720px) {
    .chart-controls-panel {
        padding-top: 10px;
    }

    .chart-controls-group {
        width: 100%;
    }
}



/* ================================== */
/*          Symbol Suggestions        */
/* ================================== */

#symbolSuggestions {
    max-height: 260px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--attention);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18);
    margin-top: 10px;
    padding: 6px 0 8px;
    animation: symbolSuggestionsGlow 2.6s ease-in-out infinite;
}

/* Slow border/glow pulse so the results box — small and easy to miss next to
   the search input — reads as "look here" without being an error/alert color. */
@keyframes symbolSuggestionsGlow {
    0%, 100% {
        border-color: color-mix(in srgb, var(--attention) 35%, var(--border));
        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18), 0 0 0 0 transparent;
    }
    50% {
        border-color: var(--attention);
        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18), 0 0 16px 2px color-mix(in srgb, var(--attention) 55%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    #symbolSuggestions {
        animation: none;
        border-color: var(--attention);
    }
}

#symbolSuggestions .symbol-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 0;
}

#symbolSuggestions .symbol-suggestions-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
    text-align: left;
}

#symbolSuggestions .symbol-suggestions-close {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#symbolSuggestions .symbol-suggestions-close:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    color: var(--text-primary);
}

#symbolSuggestions .symbol-suggestions-instruction {
    margin: 8px 16px 4px;
    font-size: 0.8em;
    color: var(--text-muted);
    text-align: left;
}

#symbolSuggestions .symbol-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    transition: border-color 0.18s ease, background 0.18s ease;
}

#symbolSuggestions .symbol-suggestion:last-child {
    border-bottom: none;
}

#symbolSuggestions .symbol-suggestion:hover {
    background: color-mix(in srgb, var(--accent) 7%, var(--panel));
    border-left-color: var(--accent);
}

#symbolSuggestions .symbol-suggestion .suggestion-ticker {
    font-weight: 700;
    font-size: 0.95em;
    color: var(--accent);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

#symbolSuggestions .symbol-suggestion .suggestion-name {
    font-size: 0.85em;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#symbolSuggestions .symbol-suggestion--empty {
    cursor: default;
    color: var(--text-muted);
    font-size: 0.85em;
    background: transparent;
    border-left-color: transparent !important;
}


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background: var(--panel);
    color: var(--text-primary);
    padding: 22px 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.2);
    text-align: center;
    min-width: 280px;
    max-width: 420px;
}

.modal-overlay--success .modal {
    border-color: var(--positive);
}

.modal-overlay--error .modal {
    border-color: var(--negative);
}

.modal-overlay--confirmation .modal {
    border-color: var(--accent);
}

.modal__message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.modal-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.modal-button {
    padding: 8px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal-button:hover {
    background: var(--panel);
    border-color: var(--text-muted);
}

.modal-button--primary,
.modal-button--confirm {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.modal-button--primary:hover,
.modal-button--confirm:hover {
    background: var(--accent-muted);
    border-color: var(--accent-muted);
}

.modal-button--cancel {
    background: transparent;
}

.alert-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.alert-container--login {
    position: static;
    max-width: 520px;
    margin: 12px auto 0;
}

.alert {
    background: var(--panel);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.7rem;
    line-height: 1.35;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

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

.alert--closing {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.alert-success {
    border-left: 4px solid var(--positive);
}

.alert-error {
    border-left: 4px solid var(--negative);
}

.alert-warning {
    border-left: 4px solid var(--accent-muted);
}

.alert-info {
    border-left: 4px solid var(--accent);
}

.close-alert {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.close-alert:hover {
    background: var(--panel);
    border-color: var(--text-muted);
}

/* ================================== */
/*       Indicator Toggle Menu        */
/* ================================== */

.indicator-toggle.is-active {
    background: var(--accent, #0f172a);
    color: var(--panel, #ffffff);
    border-radius: 4px;
}

.pair-charts { display: flex; gap: 12px; }
.pair-charts .pair-item { flex: 1; height: 300px; } /* ensure visible height */

/* ================================== */
/*              Themes                */
/* ================================== */

body[data-theme] {
    --chart-bg: var(--panel);
    --chart-grid: var(--border);
    --chart-axis: var(--text-muted);
    --chart-text: var(--text-primary);
    --chart-tooltip-bg: var(--panel);
    --chart-tooltip-text: var(--text-primary);
    --chart-up: var(--positive);
    --chart-down: var(--negative);
    --chart-tp: var(--accent-muted);
    --chart-series-1: var(--accent);
    --chart-series-2: var(--accent-muted);
    --chart-series-3: var(--positive);
    --chart-series-4: var(--negative);
    /* Moving-average overlay palette (MA20 / MA50 / MA100) — three distinct hues
       (gold / blue / violet) kept clear of the green/red candle colours so the
       lines stay legible on every theme. These bright values suit the dark themes;
       light themes override below with deeper variants for pale backgrounds. */
    --chart-ma-fast: #fbbf24;
    --chart-ma-mid:  #60a5fa;
    --chart-ma-slow: #c084fc;
    /* Attention/highlight cue (e.g. the symbol-suggestions pulse) — kept
       separate from --accent since several themes use a near-black/near-white
       accent that reads fine for links/borders but disappears when animated
       as a glow. Bright value suits dark panels; light themes override below. */
    --attention: #fbbf24;
    --chart-volume: var(--accent-muted);
    --chart-crosshair: var(--border);
    --chart-tp-fill: rgba(125, 211, 252, 0.22);
    --chart-sl-fill: rgba(251, 146, 60, 0.22);
    --autotrader-loading-panel-border: color-mix(in srgb, var(--accent) 24%, var(--border));
    --autotrader-loading-panel-top: color-mix(in srgb, var(--accent) 14%, var(--panel));
    --autotrader-loading-panel-bottom: color-mix(in srgb, var(--accent-muted) 18%, var(--bg));
    --autotrader-loading-ring: color-mix(in srgb, var(--accent) 24%, transparent);
    --autotrader-loading-core-start: color-mix(in srgb, var(--accent) 44%, var(--panel));
    --autotrader-loading-core-end: color-mix(in srgb, var(--accent-muted) 12%, var(--panel-muted));
    --autotrader-loading-core-shadow: color-mix(in srgb, var(--accent) 28%, transparent);
    background: radial-gradient(circle at top, var(--bg-accent), var(--bg));
    color: var(--text-primary);
}

/* Light themes: deepen the MA/EMA overlay palette so the lines keep ≥3:1 contrast
   against pale backgrounds (the bright base values wash out on near-white). */
body[data-theme="signal"],
body[data-theme="glacier"],
body[data-theme="copper-tape"],
body[data-theme="citrus"],
body[data-theme="zen-mono"] {
    --chart-ma-fast: #b45309;
    --chart-ma-mid:  #2563eb;
    --chart-ma-slow: #7c3aed;
    --attention: #b45309;
}

body[data-theme="signal"] {
    --bg: #f8fafc;
    --bg-accent: #fef3c7;
    --panel: #ffffff;
    --panel-muted: #f1f5f9;
    --border: #e2e8f0;
    --text-primary: #0f172a;
    --text-muted: #64748b;
    --accent: #0f172a;
    --accent-muted: #1e293b;
    --accent-on: #ffffff;
    --positive: #047857;
    --negative: #be123c;
    --row-hover: #f8fafc;
    --row-selected: #fef3c7;
    --pill-bg: #ffffff;
    --pill-text: #64748b;
    --pill-error-bg: #fee2e2;
    --pill-error-text: #b91c1c;
    --buy-bg: rgba(16, 185, 129, 0.12);
    --buy-text: #047857;
    --sell-bg: rgba(244, 63, 94, 0.12);
    --sell-text: #be123c;
    --short-bg: rgba(245, 158, 11, 0.12);
    --short-text: #b45309;
}

body[data-theme="nightwatch"] {
    --bg: #0b1120;
    --bg-accent: #111827;
    --panel: #111827;
    --panel-muted: #1f2937;
    --border: #1e293b;
    --text-primary: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --accent-muted: #0ea5e9;
    --accent-on: #0b1120;
    --positive: #22c55e;
    --negative: #f43f5e;
    --row-hover: #111827;
    --row-selected: #1f2937;
    --pill-bg: #1f2937;
    --pill-text: #94a3b8;
    --pill-error-bg: #7f1d1d;
    --pill-error-text: #fecaca;
    --buy-bg: rgba(34, 197, 94, 0.18);
    --buy-text: #4ade80;
    --sell-bg: rgba(244, 63, 94, 0.18);
    --sell-text: #fb7185;
    --short-bg: rgba(56, 189, 248, 0.2);
    --short-text: #7dd3fc;
}

body[data-theme="glacier"] {
    --bg: #ecfeff;
    --bg-accent: #e0f2fe;
    --panel: #ffffff;
    --panel-muted: #e2e8f0;
    --border: #cbd5f5;
    --text-primary: #0f172a;
    --text-muted: #475569;
    --accent: #0369a1;
    --accent-muted: #0ea5e9;
    --accent-on: #ffffff;
    --positive: #0284c7;
    --negative: #e11d48;
    --row-hover: #f0f9ff;
    --row-selected: #e0f2fe;
    --pill-bg: #ffffff;
    --pill-text: #0f172a;
    --pill-error-bg: #ffe4e6;
    --pill-error-text: #be123c;
    --buy-bg: rgba(14, 116, 144, 0.12);
    --buy-text: #0e7490;
    --sell-bg: rgba(225, 29, 72, 0.12);
    --sell-text: #be123c;
    --short-bg: rgba(2, 132, 199, 0.12);
    --short-text: #0369a1;
}

body[data-theme="terminal-green"] {
    --bg: #020617;
    --bg-accent: #052e16;
    --panel: #041b12;
    --panel-muted: #052e16;
    --border: #0f2f22;
    --text-primary: #bbf7d0;
    --text-muted: #4ade80;
    --accent: #22c55e;
    --accent-muted: #16a34a;
    --accent-on: #020617;
    --positive: #4ade80;
    --negative: #f97316;
    --row-hover: #0a2218;
    --row-selected: #0f2f22;
    --pill-bg: #052e16;
    --pill-text: #86efac;
    --pill-error-bg: #7f1d1d;
    --pill-error-text: #fecaca;
    --buy-bg: rgba(34, 197, 94, 0.2);
    --buy-text: #86efac;
    --sell-bg: rgba(249, 115, 22, 0.18);
    --sell-text: #fdba74;
    --short-bg: rgba(20, 184, 166, 0.2);
    --short-text: #5eead4;
}

body[data-theme="copper-tape"] {
    --bg: #fff7ed;
    --bg-accent: #fed7aa;
    --panel: #ffffff;
    --panel-muted: #f5efe6;
    --border: #e7d8c9;
    --text-primary: #4a1d12;
    --text-muted: #7c2d12;
    --accent: #a24b24;
    --accent-muted: #d97706;
    --accent-on: #ffffff;
    --positive: #a16207;
    --negative: #9f1239;
    --row-hover: #fff1e6;
    --row-selected: #fef3c7;
    --pill-bg: #ffffff;
    --pill-text: #7c2d12;
    --pill-error-bg: #fee2e2;
    --pill-error-text: #9f1239;
    --buy-bg: rgba(162, 75, 36, 0.12);
    --buy-text: #7c2d12;
    --sell-bg: rgba(190, 24, 93, 0.12);
    --sell-text: #9f1239;
    --short-bg: rgba(180, 83, 9, 0.12);
    --short-text: #92400e;
}

body[data-theme="blueprint"] {
    --bg: #0b1020;
    --bg-accent: #111827;
    --panel: #0f172a;
    --panel-muted: #172554;
    --border: #1e293b;
    --text-primary: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --accent-muted: #0ea5e9;
    --accent-on: #0b1020;
    --positive: #22c55e;
    --negative: #f43f5e;
    --row-hover: #0f172a;
    --row-selected: #1e293b;
    --pill-bg: #111827;
    --pill-text: #93c5fd;
    --pill-error-bg: #7f1d1d;
    --pill-error-text: #fecaca;
    --buy-bg: rgba(56, 189, 248, 0.2);
    --buy-text: #7dd3fc;
    --sell-bg: rgba(244, 63, 94, 0.18);
    --sell-text: #fb7185;
    --short-bg: rgba(14, 165, 233, 0.2);
    --short-text: #38bdf8;
}

body[data-theme="citrus"] {
    --bg: #fff7ed;
    --bg-accent: #fef3c7;
    --panel: #ffffff;
    --panel-muted: #fff1d6;
    --border: #fed7aa;
    --text-primary: #7c2d12;
    --text-muted: #9a3412;
    --accent: #ea580c;
    --accent-muted: #f97316;
    --accent-on: #ffffff;
    --positive: #16a34a;
    --negative: #b91c1c;
    --row-hover: #fff1e6;
    --row-selected: #fde68a;
    --pill-bg: #ffffff;
    --pill-text: #9a3412;
    --pill-error-bg: #fee2e2;
    --pill-error-text: #b91c1c;
    --buy-bg: rgba(234, 88, 12, 0.12);
    --buy-text: #c2410c;
    --sell-bg: rgba(185, 28, 28, 0.12);
    --sell-text: #b91c1c;
    --short-bg: rgba(202, 138, 4, 0.12);
    --short-text: #92400e;
}

body[data-theme="zen-mono"] {
    --bg: #fafaf9;
    --bg-accent: #e7e5e4;
    --panel: #ffffff;
    --panel-muted: #f5f5f4;
    --border: #e7e5e4;
    --text-primary: #1c1917;
    --text-muted: #78716c;
    --accent: #1c1917;
    --accent-muted: #57534e;
    --accent-on: #ffffff;
    --positive: #15803d;
    --negative: #7f1d1d;
    --row-hover: #f0eee9;
    --row-selected: #e7e5e4;
    --pill-bg: #ffffff;
    --pill-text: #57534e;
    --pill-error-bg: #fee2e2;
    --pill-error-text: #7f1d1d;
    --buy-bg: rgba(15, 23, 42, 0.1);
    --buy-text: #0f172a;
    --sell-bg: rgba(127, 29, 29, 0.12);
    --sell-text: #7f1d1d;
    --short-bg: rgba(68, 64, 60, 0.12);
    --short-text: #44403c;
}

body[data-theme="deep-space"] {
    --bg: #0a0a12;
    --bg-accent: #0d0d18;
    --panel: #0f0f1a;
    --panel-muted: #141422;
    --border: #1e1e2e;
    --text-primary: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #6366f1;
    --accent-muted: #818cf8;
    --accent-on: #ffffff;
    --positive: #22c55e;
    --negative: #ef4444;
    --row-hover: #12121e;
    --row-selected: #1a1a2e;
    --pill-bg: #1a1a2e;
    --pill-text: #94a3b8;
    --pill-error-bg: #7f1d1d;
    --pill-error-text: #fecaca;
    --buy-bg: rgba(34, 197, 94, 0.15);
    --buy-text: #4ade80;
    --sell-bg: rgba(239, 68, 68, 0.15);
    --sell-text: #f87171;
    --short-bg: rgba(99, 102, 241, 0.2);
    --short-text: #a5b4fc;
}

body[data-theme="deep-space"] {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
}

body[data-theme="deep-space"] .autotrader-card-value,
body[data-theme="deep-space"] .autotrader-regime-gauge__value,
body[data-theme="deep-space"] .autotrader-table td,
body[data-theme="deep-space"] .alpaca-dashboard__card-value {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

body[data-theme="deep-space"] .autotrader-pill,
body[data-theme="deep-space"] .alpaca-dashboard__status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-theme="deep-space"] ::-webkit-scrollbar {
    width: 6px;
}

body[data-theme="deep-space"] ::-webkit-scrollbar-track {
    background: #0a0a12;
}

body[data-theme="deep-space"] ::-webkit-scrollbar-thumb {
    background: #1e1e2e;
    border-radius: 3px;
}

body[data-theme="deep-space"] ::-webkit-scrollbar-thumb:hover {
    background: #2a2a3e;
}

body[data-theme] a {
    color: var(--accent);
}

body[data-theme] .web-tabs ul li a {
    color: var(--text-muted);
}

body[data-theme] .web-tabs ul li a:hover {
    color: var(--accent);
}

body[data-theme] .web-tabs ul li a {
    color: var(--text-muted);
}

body[data-theme] .web-tabs ul li a:hover {
    color: var(--accent);
}

body[data-theme] #headerSection,
body[data-theme] header,
body[data-theme] main,
body[data-theme] .section,
body[data-theme] .table-container,
body[data-theme] .watchlist-container,
body[data-theme] #news-container,
body[data-theme] .nav-tabs-wrapper,
body[data-theme] .nav-tabs,
body[data-theme] .footer {
    background-color: var(--panel);
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .category-title,
body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3 {
    color: var(--text-primary);
}

body[data-theme] .news-item-header,
body[data-theme] .news-item-content,
body[data-theme] .footer,
body[data-theme] .footer ul li a {
    color: var(--text-muted);
}

body[data-theme] .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body[data-theme] .btn-primary:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent-muted);
}

body[data-theme] .app-toolbar-button {
    background: color-mix(in srgb, var(--panel-muted) 88%, var(--panel));
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

body[data-theme] .app-toolbar-button:hover,
body[data-theme] .app-toolbar-button:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    border-color: var(--accent);
    color: var(--text-primary);
}

body[data-theme] .app-toolbar-button--primary,
body[data-theme] .app-toolbar-button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body[data-theme] .app-toolbar-button--primary:hover,
body[data-theme] .app-toolbar-button--primary:focus-visible,
body[data-theme] .app-toolbar-button.is-active:hover,
body[data-theme] .app-toolbar-button.is-active:focus-visible {
    background: var(--accent-muted);
    border-color: var(--accent-muted);
    color: #ffffff;
}

/* Keep header action buttons ghost in all themes */
body[data-theme] .header-actions .app-toolbar-button {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

body[data-theme] .header-actions .app-toolbar-button:hover,
body[data-theme] .header-actions .app-toolbar-button:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

body[data-theme] .theme-switcher--header .theme-switcher__toggle-label {
    color: var(--text-muted);
}

body[data-theme] .theme-switcher--header .theme-switcher__toggle {
    background: color-mix(in srgb, var(--panel-muted) 88%, var(--panel));
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .form-control {
    background: var(--panel);
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .alpaca-dashboard__header,
body[data-theme] .alpaca-dashboard__card,
body[data-theme] .alpaca-dashboard__table-wrapper,
body[data-theme] .alpaca-dashboard__news-panel,
body[data-theme] .alpaca-dashboard__trade-panel {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}

body[data-theme] .alpaca-dashboard__eyebrow,
body[data-theme] .alpaca-dashboard__subtitle,
body[data-theme] .alpaca-dashboard__section-header span,
body[data-theme] .alpaca-dashboard__news-header span,
body[data-theme] .alpaca-dashboard__news-meta,
body[data-theme] .alpaca-dashboard__news-empty,
body[data-theme] .alpaca-dashboard__card-label,
body[data-theme] .alpaca-dashboard__table th,
body[data-theme] .alpaca-dashboard__table-actions,
body[data-theme] .alpaca-dashboard__trade-meta,
body[data-theme] .alpaca-dashboard__trade-row label {
    color: var(--text-muted) !important;
}

body[data-theme] .alpaca-dashboard__title,
body[data-theme] .alpaca-dashboard__section-header h2,
body[data-theme] .alpaca-dashboard__news-header h3,
body[data-theme] .alpaca-dashboard__card-value,
body[data-theme] .alpaca-dashboard__news-title,
body[data-theme] .alpaca-dashboard__trade-header h2,
body[data-theme] .alpaca-dashboard__trade-validation,
body[data-theme] .alpaca-dashboard__trade-flag,
body[data-theme] .alpaca-dashboard__trade-row input,
body[data-theme] .alpaca-dashboard__trade-row select {
    color: var(--text-primary) !important;
}

body[data-theme] .alpaca-dashboard__table th {
    background: var(--panel-muted) !important;
}

body[data-theme] .alpaca-dashboard__table td {
    color: var(--text-muted) !important;
}

body[data-theme] .alpaca-dashboard__table td.font-semibold {
    color: var(--text-primary) !important;
}

body[data-theme] .alpaca-dashboard__table tbody tr:hover {
    background: var(--row-hover) !important;
}

body[data-theme] .alpaca-dashboard__row--selected {
    background: var(--row-selected) !important;
}

body[data-theme] .alpaca-dashboard__status {
    background: var(--pill-bg) !important;
    color: var(--pill-text) !important;
}

body[data-theme] .alpaca-dashboard__status--error {
    background: var(--pill-error-bg) !important;
    color: var(--pill-error-text) !important;
}

body[data-theme] .alpaca-dashboard__value--positive {
    color: var(--positive) !important;
    font-weight: 600;
}

body[data-theme] .alpaca-dashboard__value--negative {
    color: var(--negative) !important;
    font-weight: 600;
}

body[data-theme] .alpaca-dashboard__news-title:hover {
    color: var(--accent) !important;
}

body[data-theme] .alpaca-dashboard__trade-row input,
body[data-theme] .alpaca-dashboard__trade-row select {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}

body[data-theme] .alpaca-dashboard__trade-row input:disabled,
body[data-theme] .alpaca-dashboard__trade-row select:disabled {
    background: var(--panel-muted) !important;
    color: var(--text-muted) !important;
}

body[data-theme] .alpaca-dashboard__trade-warning,
body[data-theme] .alpaca-dashboard__trade-validation--error {
    color: var(--pill-error-text) !important;
}

body[data-theme] .news-item {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text-primary);
}

body[data-theme] .news-title {
    color: var(--text-primary);
}

body[data-theme] .news-meta {
    color: var(--text-muted);
}

body[data-theme] .news-navigation button {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

body[data-theme] .news-navigation button:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent-muted);
}

body[data-theme] .news-navigation button:disabled {
    background-color: var(--panel-muted);
    border-color: var(--border);
    color: var(--text-muted);
}

body[data-theme] .plus-page #watchlist {
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .plus-page .plus-panel {
    background: var(--panel);
    border-color: var(--border);
}

body[data-theme] .plus-page .plus-watchlist-grid {
    background: var(--panel);
    border-color: var(--border);
}

body[data-theme] .plus-page .plus-watchlist-header {
    background: var(--panel-muted);
    color: var(--text-primary);
}

body[data-theme] .plus-page .plus-watchlist-row--data {
    border-top-color: var(--border);
}

body[data-theme] .plus-page .plus-watchlist-row--data:hover {
    background: var(--row-hover);
}

body[data-theme] .plus-page .plus-watchlist-cell--muted {
    color: var(--text-muted);
}

body[data-theme] .plus-page .table {
    background: var(--panel);
}

body[data-theme] .plus-page #watchlist thead th {
    background: var(--panel-muted);
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .plus-page #watchlist tbody td {
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .plus-page #watchlist.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--row-hover);
}

body[data-theme] .plus-page #watchlist tbody tr:hover {
    background-color: var(--row-selected);
}

body[data-theme] .plus-page .btn-info,
body[data-theme] .plus-page .update-button {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body[data-theme] .plus-page .btn-info:hover,
body[data-theme] .plus-page .update-button:hover {
    background-color: var(--accent-muted);
    border-color: var(--accent-muted);
}

body[data-theme] .plus-page .plus-action-button {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

body[data-theme] .plus-page .plus-action-button:hover {
    background: var(--accent-muted);
    border-color: var(--accent-muted);
}

body[data-theme] .plus-page #logout-btn,
body[data-theme] .plus-page #home-link,
body[data-theme] .plus-page #prev-week-button,
body[data-theme] .plus-page #next-week-button {
    background: var(--panel-muted);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

body[data-theme] .plus-page .plus-secondary-button {
    background: var(--panel-muted);
    color: var(--text-primary);
    border-color: var(--border);
}

body[data-theme] .plus-page #logout-btn:hover,
body[data-theme] .plus-page #home-link:hover,
body[data-theme] .plus-page #prev-week-button:hover,
body[data-theme] .plus-page #next-week-button:hover {
    background: var(--row-hover);
}

body[data-theme] .plus-page .plus-secondary-button:hover {
    background: var(--row-hover);
}

body[data-theme] .plus-page .chart-container,
body[data-theme] .plus-page #earnings-calendar,
body[data-theme] .plus-page .checkbox-grid-container {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
}

body[data-theme] .plus-page .checkbox-grid-title {
    color: var(--text-primary);
}

body[data-theme] .plus-page .checkbox-grid label,
body[data-theme] .plus-page .checkbox-container label {
    color: var(--text-muted);
}

body[data-theme] .plus-page .chart-half + .chart-half {
    border-left-color: var(--border);
}

/* ================================== */
/*        AutoTrader Dashboard        */
/* ================================== */

.autotrader-page {
    max-width: 1380px;
    margin: 32px auto 60px;
    padding: 0 20px;
}

.autotrader-shell {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.autotrader-loading-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.48);
    backdrop-filter: blur(6px);
}

.autotrader-loading-dialog[hidden] {
    display: none !important;
}

.autotrader-loading-dialog__panel {
    width: min(420px, 100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px 26px;
    border-radius: 22px;
    border: 1px solid var(--autotrader-loading-panel-border, rgba(56, 189, 248, 0.24));
    background: linear-gradient(160deg, var(--autotrader-loading-panel-top, rgba(3, 105, 70, 0.96)), var(--autotrader-loading-panel-bottom, rgba(2, 44, 34, 0.98)));
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.3);
    text-align: center;
}

.autotrader-loading-dialog__spinner-shell {
    position: relative;
    width: 72px;
    height: 72px;
}

.autotrader-loading-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-loading-dialog__detail {
    margin: 0;
    max-width: 300px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.autotrader-hero {
    display: grid;
    gap: 20px;
}

.autotrader-hero-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.autotrader-hero-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.autotrader-access-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
}

.autotrader-access-banner--limited {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.autotrader-access-banner--pro {
    border-color: rgba(22, 163, 74, 0.24);
    background: rgba(22, 163, 74, 0.08);
}

.autotrader-access-banner__title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-access-banner__copy {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.autotrader-access-banner__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.autotrader-heading-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.autotrader-hero-status-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
}

.autotrader-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.autotrader-title {
    margin: 0 0 10px;
    font-size: 2rem;
    color: var(--text-primary);
}

.autotrader-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 520px;
}

.autotrader-market-banner {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 16px 18px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(140deg, rgba(148, 163, 184, 0.12), rgba(59, 130, 246, 0.08));
    grid-column: 1 / -1;
}

.autotrader-runner-panel--active + .autotrader-market-banner {
    grid-column: auto;
    min-height: 170px;
    align-content: start;
}

.autotrader-market-banner--open {
    border-color: rgba(22, 163, 74, 0.22);
    background: linear-gradient(140deg, rgba(22, 163, 74, 0.14), rgba(56, 189, 248, 0.08));
}

.autotrader-market-banner--closed {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(140deg, rgba(245, 158, 11, 0.14), rgba(249, 115, 22, 0.08));
}

.autotrader-market-banner__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.autotrader-market-banner__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-market-banner__detail,
.autotrader-market-banner__hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.autotrader-market-banner__detail {
    color: var(--text-primary);
}

.autotrader-market-banner__hint {
    color: var(--text-muted);
}

.autotrader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex: 1 1 420px;
}

.autotrader-button {
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.autotrader-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.autotrader-button--primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.autotrader-button--action {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    cursor: pointer;
}

.autotrader-button--action:hover {
    filter: brightness(0.96);
}

.autotrader-button--ghost {
    background: transparent;
}

.autotrader-button--ghost:hover {
    background: var(--panel);
}

.autotrader-button--danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.autotrader-button--danger:hover {
    background: rgba(220, 38, 38, 0.18);
}

.autotrader-button--compact {
    padding: 5px 10px;
    font-size: 0.72rem;
}

.autotrader-queue-actions {
    justify-content: flex-end;
}

.autotrader-runner-badge {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.autotrader-runner-badge--active {
    color: var(--buy-text);
    background: var(--buy-bg);
    border-color: transparent;
}

.autotrader-runner-panel {
    display: none;
    padding: 14px 16px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.08), rgba(56, 189, 248, 0.08));
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
    min-height: 170px;
    height: auto;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.autotrader-runner-panel--active {
    display: flex;
}

.autotrader-runner-panel-graphic {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    margin-top: 2px;
}

.autotrader-runner-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--autotrader-loading-ring, rgba(56, 189, 248, 0.25));
    border-top-color: var(--accent, #22c55e);
    animation: autotrader-runner-spin 1.6s linear infinite;
}

.autotrader-runner-spinner-core {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--autotrader-loading-core-start, rgba(56, 189, 248, 0.55)), var(--autotrader-loading-core-end, rgba(15, 23, 42, 0.15)));
    box-shadow: inset 0 0 12px var(--autotrader-loading-core-shadow, rgba(56, 189, 248, 0.3));
    animation: autotrader-runner-pulse 1.8s ease-in-out infinite;
}

.autotrader-runner-panel-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.autotrader-runner-panel-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-runner-panel-text {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.autotrader-runner-steps {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.autotrader-runner-step {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    transition: color 0.2s ease, transform 0.2s ease;
}

.autotrader-runner-step--active {
    color: var(--text-primary);
    font-weight: 600;
    transform: translateX(4px);
}

.autotrader-runner-candidates {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(420px, 92vw);
    max-height: 320px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    z-index: 1100;
    transition: max-height 0.25s ease;
}

.autotrader-runner-candidates--active {
    display: flex;
}

.autotrader-runner-candidates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.autotrader-runner-candidates-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-runner-candidates-subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.autotrader-runner-candidates-meta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.autotrader-runner-candidates-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.autotrader-runner-candidates-cost {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.autotrader-runner-candidates-cost strong {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.autotrader-runner-candidates-budget {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.autotrader-queue-report {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
}

.autotrader-queue-report--active {
    display: block;
}

.autotrader-queue-report-title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autotrader-queue-report-list {
    margin: 0;
    padding-left: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.autotrader-queue-note {
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.autotrader-table-actions {
    white-space: nowrap;
}

.autotrader-table-actions__empty {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.autotrader-runner-candidates-body {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.autotrader-runner-candidates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.autotrader-runner-candidates-table th,
.autotrader-runner-candidates-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.autotrader-runner-candidates-table th {
    position: sticky;
    top: 0;
    background: var(--panel);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.65rem;
}

.autotrader-runner-candidates-table tbody tr:last-child td {
    border-bottom: none;
}

.autotrader-runner-candidates--detail-open {
    max-height: min(620px, 85vh);
}

.autotrader-runner-candidate-row {
    cursor: pointer;
    transition: background 0.15s;
}

.autotrader-runner-candidate-row:hover {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-runner-candidate-row--expanded {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-runner-candidate-detail-row td {
    padding: 0 !important;
    border-top: none !important;
}

.autotrader-candidate-detail {
    padding: 10px 12px;
    background: var(--panel-muted, #0d0d18);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin: 0 4px 6px;
    font-size: 0.72rem;
}

.autotrader-candidate-insight__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.autotrader-candidate-insight__reasoning {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
    font-size: 0.72rem;
}

.autotrader-candidate-insight__lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.autotrader-candidate-insight__list-title {
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 4px;
}

.autotrader-candidate-insight__list {
    margin: 0;
    padding-left: 14px;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.autotrader-candidate-insight__crosschecks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.autotrader-candidate-insight__cached {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.autotrader-pill--bullish {
    background: var(--buy-bg);
    color: var(--buy-text);
    border-color: transparent;
}

.autotrader-pill--bearish {
    background: var(--sell-bg);
    color: var(--sell-text);
    border-color: transparent;
}

.autotrader-pill--info {
    background: rgba(56, 189, 248, 0.14);
    color: #0ea5e9;
    border-color: transparent;
}

.autotrader-candidate-enrich-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-primary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s;
}

.autotrader-candidate-enrich-btn:hover {
    background: var(--row-hover, rgba(255,255,255,0.06));
}

.autotrader-candidate-enrich-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.autotrader-candidate-enrich-btn .spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: autotrader-runner-spin 0.6s linear infinite;
}

@keyframes autotrader-runner-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes autotrader-runner-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.autotrader-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    background: var(--panel);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 1.7rem;
    line-height: 1.35;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.15);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.autotrader-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.autotrader-toast--success {
    border-color: var(--buy-text, #16a34a);
}

.autotrader-toast--error {
    border-color: var(--sell-text, #ef4444);
}

.autotrader-metrics {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.autotrader-backtest-metrics {
    margin-top: 0;
}

.autotrader-backtest-detail-cards {
    margin-top: 16px;
}

.autotrader-card {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, var(--panel), var(--panel-muted));
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.autotrader-card-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.autotrader-card-value {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-card-value--compact {
    font-size: 1rem;
    line-height: 1.35;
}

.autotrader-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-text);
    font-size: 0.75rem;
    border: 1px solid var(--border);
    width: fit-content;
}

.autotrader-pill--success {
    background: var(--buy-bg);
    color: var(--buy-text);
    border-color: transparent;
}

.autotrader-pill--warning {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: transparent;
}

.autotrader-pill--danger {
    background: var(--sell-bg);
    color: var(--sell-text);
    border-color: transparent;
}

.autotrader-pill--neutral {
    background: var(--panel-muted);
    color: var(--text-muted);
}

.autotrader-pill--error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.autotrader-position-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.autotrader-position-stop {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.autotrader-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.autotrader-grid--secondary {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.autotrader-grid--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.autotrader-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.autotrader-panel--wide {
    margin-top: 26px;
}

.autotrader-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.autotrader-panel-header > div {
    min-width: 0;
}

.autotrader-panel-hidden-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: var(--panel-muted);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.autotrader-universe-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.autotrader-universe-select {
    background: var(--panel-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 6px 10px;
    min-width: 180px;
}

.autotrader-strategy-reco {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.autotrader-strategy-regime {
    margin: 0 0 14px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.autotrader-panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.autotrader-panel-header span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.autotrader-backtest-header {
    align-items: flex-start;
    gap: 16px;
}

.autotrader-backtest-subtitle {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.autotrader-backtest-grid {
    margin-top: 18px;
}

.autotrader-historical-scan {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-muted) 84%, transparent);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.autotrader-historical-scan__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.autotrader-historical-scan__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.autotrader-historical-scan-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.autotrader-historical-scan-grid {
    align-items: start;
}

.autotrader-historical-scan-symbol {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.autotrader-historical-scan-symbol .autotrader-button {
    align-self: flex-start;
}

.autotrader-historical-scan-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.autotrader-historical-scan-detail small {
    color: var(--text-muted);
}

.autotrader-universe-leaderboard {
    padding-top: 4px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.autotrader-universe-leaderboard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.autotrader-backtest-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 0;
}

.autotrader-backtest-chart-header h3 {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.autotrader-backtest-chart-header span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.autotrader-backtest-curve {
    width: 100%;
    height: 260px;
}

.autotrader-table-wrapper {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
}

.autotrader-table-wrapper--compact {
    margin-top: 14px;
}

.autotrader-table-wrapper--scanner {
    overflow-x: hidden;
}

.autotrader-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    background: var(--panel);
}

.autotrader-table-wrapper--compact .autotrader-table {
    min-width: 420px;
}

.autotrader-table.autotrader-table--scanner {
    min-width: 0;
    table-layout: fixed;
}

.autotrader-table--scanner th,
.autotrader-table--scanner td {
    padding: 10px 8px;
    vertical-align: top;
}

.autotrader-table--scanner th {
    font-size: 0.64rem;
    white-space: normal;
}

.autotrader-table--scanner td {
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.autotrader-table-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.autotrader-table-heading__note {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

.autotrader-table--scanner .autotrader-news-badge,
.autotrader-table--scanner .autotrader-news-bias {
    font-size: 0.62rem;
    padding: 3px 6px;
}

.autotrader-table--scanner .autotrader-scan-col--symbol { width: 16%; }
.autotrader-table--scanner .autotrader-scan-col--side { width: 5%; }
.autotrader-table--scanner .autotrader-scan-col--score { width: 8%; }
.autotrader-table--scanner .autotrader-scan-col--strength { width: 8%; }
.autotrader-table--scanner .autotrader-scan-col--rank { width: 8%; }
.autotrader-table--scanner .autotrader-scan-col--plan { width: 10%; }
.autotrader-table--scanner .autotrader-scan-col--target { width: 6%; }
.autotrader-table--scanner .autotrader-scan-col--stop { width: 6%; }
.autotrader-table--scanner .autotrader-scan-col--rr { width: 5%; }
.autotrader-table--scanner .autotrader-scan-col--risk { width: 7%; }
.autotrader-table--scanner .autotrader-scan-col--bias { width: 7%; }
.autotrader-table--scanner .autotrader-scan-col--why { width: 14%; }

.autotrader-score-chip,
.autotrader-scan-strength,
.autotrader-scan-rank,
.autotrader-scan-plan {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.autotrader-score-chip {
    padding: 6px 7px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.autotrader-score-chip strong,
.autotrader-scan-strength strong,
.autotrader-scan-rank strong,
.autotrader-scan-plan strong,
.autotrader-scan-metric {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
}

.autotrader-score-chip span,
.autotrader-scan-strength span,
.autotrader-scan-rank span,
.autotrader-scan-plan span {
    color: var(--text-muted);
    font-size: 0.67rem;
    line-height: 1.3;
    white-space: nowrap;
}

.autotrader-score-chip--bullish {
    background: color-mix(in srgb, var(--positive) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--positive) 34%, var(--border));
}

.autotrader-score-chip--bullish strong {
    color: var(--positive);
}

.autotrader-score-chip--bearish {
    background: color-mix(in srgb, var(--negative) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--negative) 34%, var(--border));
}

.autotrader-score-chip--bearish strong {
    color: var(--negative);
}

.autotrader-score-chip--neutral {
    background: var(--panel-muted);
    border-color: var(--border);
}

.autotrader-score-chip--neutral strong {
    color: var(--text-primary);
}

.autotrader-scan-metric {
    display: inline-block;
    white-space: nowrap;
}

.autotrader-scan-why {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.autotrader-scan-why__item {
    position: relative;
    padding: 3px 8px 3px 16px;
    font-size: 0.7rem;
    color: var(--text-primary);
    line-height: 1.35;
    border-radius: 999px;
    background: var(--panel-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.autotrader-scan-why__item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent-muted);
}

.autotrader-curve-wrapper {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    padding: 6px;
}

.autotrader-curve {
    width: 100%;
    height: 456px;
}

/* ── Scanner Overview (top chart redesign) ── */
.autotrader-scanner-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.autotrader-scanner-overview__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 2px;
}
.autotrader-scanner-overview__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.autotrader-scanner-overview__subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 2px 0 0;
    line-height: 1.3;
}

/* Breadth bar */
.autotrader-scanner-overview__breadth {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 2px;
}
.autotrader-breadth-bar {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel-muted);
}
.autotrader-breadth-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    min-width: 0;
    transition: flex 0.3s ease;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.autotrader-breadth-bar__segment--trigger { background: #22c55e; }
.autotrader-breadth-bar__segment--setup   { background: #3b82f6; }
.autotrader-breadth-bar__segment--watch   { background: #f59e0b; }
.autotrader-breadth-bar__segment--none    { background: #64748b; }

.autotrader-breadth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.autotrader-breadth-legend__item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.autotrader-breadth-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Compact chart inside overview */
.autotrader-curve-wrapper--overview {
    border-radius: 12px;
}
.autotrader-curve--overview {
    height: 300px;
}

/* Candidate rank strips */
.autotrader-scanner-overview__candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px;
}
.autotrader-candidate-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    font-size: 0.78rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.autotrader-candidate-chip:hover {
    border-color: var(--accent);
    background: var(--panel);
}
.autotrader-candidate-chip--active {
    border-color: var(--accent);
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--accent);
}
.autotrader-candidate-chip__rank {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 18px;
    text-align: center;
}
.autotrader-candidate-chip__symbol {
    font-weight: 700;
}
.autotrader-candidate-chip__status {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.autotrader-candidate-chip__status--trigger { background: #22c55e; }
.autotrader-candidate-chip__status--setup   { background: #3b82f6; }
.autotrader-candidate-chip__status--watch   { background: #f59e0b; }
.autotrader-candidate-chip__status--neutral { background: #64748b; }
.autotrader-candidate-chip__conf {
    font-size: 0.72rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .autotrader-curve--overview {
        height: 220px;
    }
    .autotrader-candidate-chip {
        padding: 4px 7px;
        font-size: 0.72rem;
    }
}

.autotrader-table th,
.autotrader-table td {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.autotrader-table th {
    background: var(--panel-muted);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.autotrader-table tr:last-child td {
    border-bottom: none;
}

.autotrader-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.autotrader-table tbody tr:hover {
    background: var(--row-hover);
}

.autotrader-table-row--active {
    background: var(--row-selected);
}

.autotrader-trade-chart {
    display: none;
    margin-top: 18px;
}

.autotrader-trade-chart--active {
    display: block;
}

.autotrader-trade-chart-wrapper {
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    padding: 6px;
    height: 240px;
}

.autotrader-trade-chart-canvas {
    width: 100%;
    height: 100%;
}

.autotrader-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 16px;
}

.autotrader-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.autotrader-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.autotrader-text-muted {
    color: var(--text-muted);
}

.autotrader-intent {
    margin-top: 14px;
    border-radius: 14px;
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--panel-muted) 85%, transparent);
    padding: 10px 12px;
}

.autotrader-intent summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.autotrader-intent-card {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.autotrader-intent-status {
    margin: 0;
    font-weight: 600;
}

.autotrader-intent-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.autotrader-intent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.autotrader-intent-kv {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.autotrader-intent-kv span {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.autotrader-intent-kv strong {
    font-size: 0.88rem;
}

.autotrader-intent-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.autotrader-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.autotrader-timeline-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
}

.autotrader-timeline-time {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 46px;
}

.autotrader-timeline-title {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.autotrader-timeline-meta {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.autotrader-news-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    margin-top: 8px;
}

.autotrader-news-card {
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.autotrader-news-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.autotrader-news-card__header h3 {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.autotrader-news-card__header span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.autotrader-news-feed-health,
.autotrader-news-risk-board,
.autotrader-news-tape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.autotrader-news-feed-row,
.autotrader-news-risk-row,
.autotrader-news-tape-item {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 12px 14px;
}

.autotrader-news-feed-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.autotrader-news-feed-name,
.autotrader-news-risk-symbol {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autotrader-news-feed-detail,
.autotrader-news-risk-meta,
.autotrader-news-tape-meta,
.autotrader-news-tape-summary {
    margin: 4px 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.autotrader-news-risk-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.autotrader-news-risk-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--row-hover);
}

.autotrader-news-risk-topline,
.autotrader-news-risk-bottomline,
.autotrader-scan-symbol__meta,
.autotrader-runner-symbol__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.autotrader-news-badge,
.autotrader-news-bias {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

.autotrader-news-badge--high {
    background: var(--sell-bg);
    color: var(--sell-text);
}

.autotrader-news-badge--elevated {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.autotrader-news-badge--normal {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.autotrader-news-badge--quiet {
    background: var(--panel-muted);
    color: var(--text-muted);
    border-color: var(--border);
}

.autotrader-news-bias--positive {
    background: var(--buy-bg);
    color: var(--buy-text);
}

.autotrader-news-bias--negative {
    background: var(--sell-bg);
    color: var(--sell-text);
}

.autotrader-news-bias--mixed {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.autotrader-news-bias--neutral {
    background: var(--panel-muted);
    color: var(--text-muted);
    border-color: var(--border);
}

.autotrader-news-tape-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.autotrader-news-tape-title {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

.autotrader-news-tape-title:hover {
    color: var(--accent);
}

.autotrader-news-tape-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.autotrader-news-symbol-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-family: 'Space Mono', monospace;
}

.autotrader-scan-symbol,
.autotrader-runner-symbol {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.autotrader-news-score {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ---- Regime Indicator Panel ---- */

.autotrader-regime-gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.autotrader-regime-gauge {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.autotrader-regime-gauge__label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.autotrader-regime-gauge__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Space Mono', monospace;
}

.autotrader-regime-gauge__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}

.autotrader-regime-gauge__fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.autotrader-regime-gauge__fill--green { background: var(--positive); }
.autotrader-regime-gauge__fill--amber { background: #f59e0b; }
.autotrader-regime-gauge__fill--red { background: var(--negative); }

.autotrader-regime-interpretation {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.autotrader-regime-interpretation:empty {
    display: none;
}

/* ---- Status Dots ---- */

.autotrader-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.autotrader-status-dot--active {
    background: var(--positive);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.autotrader-status-dot--draft {
    background: #f59e0b;
}

.autotrader-status-dot--disabled {
    background: var(--negative);
}

/* ---- Strategy Sidebar ---- */

.autotrader-scanner-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.autotrader-trend-status-panel {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-muted) 84%, transparent);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.autotrader-trend-status-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.autotrader-trend-status-panel__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.autotrader-trend-status-panel__lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.autotrader-trend-status-panel__title {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.autotrader-trend-status-panel__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.autotrader-trend-status-panel__list li {
    color: var(--text-muted);
}

.autotrader-mtf-panel {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-muted) 84%, transparent);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.autotrader-mtf-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.autotrader-mtf-panel .autotrader-card-label {
    font-size: 0.82rem;
}

.autotrader-mtf-panel .autotrader-intent-status {
    font-size: 1.03rem;
    line-height: 1.45;
}

.autotrader-mtf-panel .autotrader-intent-meta {
    font-size: 0.84rem;
    line-height: 1.55;
}

.autotrader-mtf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.autotrader-mtf-pane {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 420px;
}

.autotrader-mtf-pane__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.autotrader-mtf-pane__header h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.autotrader-mtf-pane__header span {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.4;
}

.autotrader-mtf-pane--fast .autotrader-mtf-pane__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.autotrader-mtf-pane--fast .autotrader-mtf-pane__header h3 {
    font-size: 0.9rem;
}

.autotrader-mtf-pane--fast .autotrader-mtf-pane__header span {
    width: 100%;
    text-align: left;
    font-size: 0.76rem;
    line-height: 1.5;
}

.autotrader-mtf-pane__chart {
    flex: 1 1 auto;
    min-height: 360px;
}

.autotrader-mtf-pane__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.autotrader-mtf-expanded {
    position: absolute;
    inset: 74px 16px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.42);
    padding: 14px 16px 16px;
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 6;
    backdrop-filter: blur(10px);
}

.autotrader-mtf-expanded--active {
    display: flex;
}

.autotrader-mtf-expanded__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.autotrader-mtf-expanded .autotrader-card-label {
    font-size: 0.78rem;
}

.autotrader-mtf-expanded .autotrader-intent-status {
    font-size: 1.02rem;
    line-height: 1.45;
}

.autotrader-mtf-expanded .autotrader-intent-meta {
    font-size: 0.82rem;
    line-height: 1.55;
}

.autotrader-mtf-expanded__chart {
    flex: 1 1 auto;
    min-height: 760px;
}

@media (max-width: 1100px) {
    .autotrader-mtf-grid {
        grid-template-columns: 1fr;
    }

    .autotrader-mtf-pane {
        min-height: 380px;
    }

    .autotrader-mtf-pane__chart {
        min-height: 320px;
    }

    .autotrader-mtf-expanded {
        inset: 74px 12px 12px;
    }

    .autotrader-mtf-expanded__chart {
        min-height: 620px;
    }
}

@media (max-width: 768px) {
    .autotrader-historical-scan__header {
        flex-direction: column;
    }

    .autotrader-historical-scan__actions {
        width: 100%;
    }

    .autotrader-historical-scan__header .autotrader-button {
        flex: 1 1 0;
        justify-content: center;
    }

    .autotrader-mtf-pane__actions {
        justify-content: stretch;
    }

    .autotrader-mtf-pane__actions .autotrader-button {
        flex: 1 1 0;
        justify-content: center;
    }

    .autotrader-mtf-expanded {
        inset: 68px 10px 10px;
        padding: 12px;
    }

    .autotrader-mtf-expanded__header {
        flex-direction: column;
    }

    .autotrader-mtf-expanded__chart {
        min-height: 480px;
    }
}

.autotrader-trend-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 600;
}

.autotrader-trend-panel-inline {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.autotrader-trend-panel-inline__headline {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autotrader-trend-panel-inline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.autotrader-trend-panel-inline__lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.autotrader-trend-panel-inline__title {
    margin: 0 0 6px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.autotrader-trend-panel-inline__list {
    margin: 0;
    padding-left: 16px;
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.autotrader-scanner-main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.autotrader-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px !important;
}

.autotrader-sortable::after {
    content: '\2195';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    opacity: 0.3;
}

.autotrader-sortable--active::after {
    opacity: 0.9;
}

.autotrader-sortable--active[data-sort-dir="asc"]::after {
    content: '\2191';
}

.autotrader-sortable--active[data-sort-dir="desc"]::after {
    content: '\2193';
}

.autotrader-sortable:hover {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-symbol-strategy-chart-row td {
    padding: 0 !important;
    border-top: none !important;
}

.autotrader-symbol-strategy-chart-container {
    width: 100%;
    height: 550px;
    background: var(--panel-muted, #0d0d18);
    border-radius: 4px;
    border: 1px solid var(--border);
    margin: 4px 0 8px;
}

.autotrader-symbol-strategy-row {
    cursor: pointer;
    transition: background 0.1s;
}

.autotrader-symbol-strategy-symbol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.autotrader-symbol-strategy-symbol__value {
    color: var(--text-primary);
}

.autotrader-symbol-strategy-row-cue {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.autotrader-symbol-strategy-row:hover {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-symbol-strategy-row--expanded {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-symbol-strategy-row--expanded .autotrader-symbol-strategy-row-cue {
    color: var(--accent-muted);
}

.autotrader-scan-row {
    cursor: pointer;
    transition: background 0.1s;
}

.autotrader-scan-row:hover {
    background: var(--row-hover, rgba(255,255,255,0.03));
}

.autotrader-scan-row--active {
    background: var(--row-hover, rgba(255,255,255,0.03));
    box-shadow: inset 3px 0 0 var(--accent, #6366f1);
}

.autotrader-audit-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.autotrader-audit-summary {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-muted);
    display: grid;
    gap: 8px;
}

.autotrader-audit-summary:empty {
    display: none;
}

.autotrader-audit-summary__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.autotrader-audit-summary__text {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.autotrader-audit-summary__list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.autotrader-audit-summary__list li {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.autotrader-audit-tab {
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.autotrader-audit-tab:hover {
    color: var(--text-primary);
}

.autotrader-audit-tab--active {
    color: var(--text-primary);
    border-bottom-color: var(--accent, #6366f1);
}

.autotrader-audit-decision {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.autotrader-audit-decision--approved {
    background: var(--buy-bg);
    color: var(--buy-text);
}

.autotrader-audit-decision--blocked {
    background: var(--sell-bg);
    color: var(--sell-text);
}

.autotrader-audit-decision--skipped {
    background: var(--panel-muted);
    color: var(--text-muted);
}

.autotrader-audit-decision--hold {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.autotrader-audit-decision--error {
    background: var(--sell-bg);
    color: var(--sell-text);
}

.autotrader-audit-decision--trimmed {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.autotrader-audit-event {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 3px;
}

.autotrader-audit-event--order_submitted {
    background: var(--buy-bg);
    color: var(--buy-text);
}

.autotrader-audit-event--order_rejected {
    background: var(--sell-bg);
    color: var(--sell-text);
}

.autotrader-audit-event--created {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
}

.autotrader-audit-event--submitted {
    background: var(--buy-bg);
    color: var(--buy-text);
}

.autotrader-audit-cycle {
    font-size: 0.68rem;
    font-family: 'Space Mono', monospace;
    color: var(--text-muted);
    opacity: 0.7;
}

@media (max-width: 1100px) {
    .autotrader-news-layout {
        grid-template-columns: 1fr;
    }

    .autotrader-hero-status-grid {
        grid-template-columns: 1fr;
    }

    .autotrader-market-banner,
    .autotrader-runner-panel--active + .autotrader-market-banner {
        grid-column: 1 / -1;
    }

    .autotrader-runner-panel--active + .autotrader-market-banner {
        min-height: 0;
        height: auto;
        align-content: start;
    }
}

@media (max-width: 720px) {
    .autotrader-shell {
        padding: 20px;
    }

    .autotrader-title {
        font-size: 1.6rem;
    }

    .autotrader-market-banner__header {
        align-items: flex-start;
    }

    .autotrader-hero-header {
        flex-direction: column;
    }

    .autotrader-actions {
        width: 100%;
    }

    .autotrader-queue-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .autotrader-table {
        min-width: 460px;
    }

    .autotrader-table-wrapper--scanner {
        overflow-x: auto;
    }

    .autotrader-table.autotrader-table--scanner {
        min-width: 980px;
    }

    .autotrader-scanner-layout {
        flex-direction: column;
    }

    .autotrader-scanner-main {
        flex: 1 1 auto;
    }
}


/* ==========================================================================
   Backtest Replay Player
   ========================================================================== */

.bt-player {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.bt-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.bt-player-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bt-player-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bt-player-badge {
    background: var(--panel-muted, #1e293b);
    color: var(--text-primary, #e2e8f0);
    border: 1px solid var(--border, #334155);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bt-player-date-range {
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
}

.bt-player-status {
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    padding: 4px 12px;
    background: var(--panel-muted, #1e293b);
    border-radius: 12px;
    border: 1px solid var(--border, #334155);
}

/* Playback controls */
.bt-player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bt-player-btn {
    background: var(--panel-muted, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 10px;
    color: var(--text-primary, #e2e8f0);
    font-size: 1rem;
    width: 40px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.bt-player-btn:hover:not(:disabled) {
    background: var(--border, #334155);
}

.bt-player-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.bt-player-btn--play {
    width: 48px;
    height: 40px;
    font-size: 1.1rem;
    background: #22c55e;
    border-color: #16a34a;
    color: #fff;
}

.bt-player-btn--play:hover:not(:disabled) {
    background: #16a34a;
}

/* Speed buttons */
.bt-player-speed {
    display: flex;
    gap: 4px;
}

.bt-player-speed-btn {
    background: var(--panel-muted, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.bt-player-speed-btn:hover {
    color: var(--text-primary, #e2e8f0);
    border-color: #475569;
}

.bt-player-speed-btn--active {
    background: #334155;
    color: #38bdf8;
    border-color: #38bdf8;
}

/* Scrubber */
.bt-player-scrubber {
    flex: 1;
    min-width: 120px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border, #334155);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.bt-player-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #38bdf8;
    border: 2px solid #0f172a;
    cursor: pointer;
}

.bt-player-scrubber:disabled {
    opacity: 0.4;
    cursor: default;
}

.bt-player-current-date {
    font-size: 0.82rem;
    color: var(--text-primary, #e2e8f0);
    font-weight: 600;
    min-width: 140px;
    text-align: right;
}

.bt-player-bar-count {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    min-width: 70px;
    text-align: right;
}

.bt-player-window-strip {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.bt-player-window-strip__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bt-player-window-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-primary, #e2e8f0);
    text-transform: uppercase;
}

.bt-player-window-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

.bt-player-window-track {
    position: relative;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(71, 85, 105, 0.7);
}

.bt-player-window-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bt-player-window-segment:hover {
    opacity: 0.9;
}

.bt-player-window-segment--active {
    opacity: 1;
    z-index: 2;
    box-shadow: inset 0 0 0 2px rgba(226, 232, 240, 0.9);
}

.bt-player-window-segment--long {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.34), rgba(74, 222, 128, 0.82));
}

.bt-player-window-segment--short {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.34), rgba(248, 113, 113, 0.82));
}

.bt-player-window-segment--two-way {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.28), rgba(14, 165, 233, 0.8));
}

.bt-player-window-segment--flat {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.28), rgba(100, 116, 139, 0.7));
}

.bt-player-window-cursor {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 0 14px rgba(248, 250, 252, 0.55);
    pointer-events: none;
    z-index: 3;
    transform: translateX(-50%);
}

.bt-player-window-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.bt-player-window-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.8);
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    background: rgba(15, 23, 42, 0.72);
}

.bt-player-window-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.bt-player-window-chip--long::before {
    background: #4ade80;
}

.bt-player-window-chip--short::before {
    background: #f87171;
}

.bt-player-window-chip--two-way::before {
    background: #38bdf8;
}

.bt-player-window-chip--flat::before {
    background: #94a3b8;
}

.bt-player-confluence-panel {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
}

.bt-player-confluence-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bt-player-confluence-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player-confluence-chart {
    width: 100%;
    height: 320px;
}

.bt-player-confluence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.bt-player-trend-panel {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
}

.bt-player-trend-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bt-player-trend-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player-trend-meta {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted, #94a3b8);
}

.bt-player-trend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bt-player-trend-pane {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(51, 65, 85, 0.92);
    border-radius: 14px;
    padding: 12px;
}

.bt-player-trend-pane__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bt-player-trend-pane__header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 180px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    line-height: 1.3;
}

.bt-player-trend-pane__title-label {
    color: var(--text-primary, #e2e8f0);
}

.bt-player-trend-pane__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bt-player-trend-pane__status-badge--positive {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.bt-player-trend-pane__status-badge--negative {
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.bt-player-trend-pane__status-badge--warning {
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}

.bt-player-trend-pane__status-badge--neutral {
    border-color: rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.13);
    color: #7dd3fc;
}

.bt-player-trend-pane__meta {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 220px;
}

.bt-player-trend-pane__metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.bt-player-trend-pane__metric-badge-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.bt-player-trend-pane__metric-badge strong {
    font-size: 0.84rem;
    font-weight: 800;
}

.bt-player-trend-pane__metric-badge--positive {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.bt-player-trend-pane__metric-badge--negative {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.bt-player-trend-pane__metric-badge--warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

.bt-player-trend-pane__metric-badge--neutral {
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.bt-player-trend-pane__chart {
    width: 100%;
    min-height: 300px;
}

.bt-player-confluence-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(51, 65, 85, 0.92);
    border-radius: 14px;
    padding: 12px;
}

.bt-player-confluence-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bt-player-confluence-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player-confluence-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

.bt-player-confluence-card__chip--positive {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.bt-player-confluence-card__chip--negative {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.bt-player-confluence-card__chip--neutral {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

.bt-player-confluence-card__note {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #94a3b8);
}

.bt-player-confluence-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bt-player-confluence-stat {
    background: rgba(30, 41, 59, 0.74);
    border: 1px solid rgba(51, 65, 85, 0.92);
    border-radius: 12px;
    padding: 10px 12px;
}

.bt-player-confluence-stat__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 6px;
}

.bt-player-confluence-stat__value {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

/* Charts */
.bt-player-charts {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    margin-bottom: 16px;
}

.bt-player-chart-panel {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 14px;
}

.bt-player-chart-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bt-player-chart {
    width: 100%;
    height: 440px;
}

.bt-player-chart-panel--price .bt-player-chart {
    height: 520px;
}

.bt-player-analysis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.bt-player-analysis-card {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 14px;
}

.bt-player-analysis-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bt-player-analysis-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player-analysis-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bt-player-analysis-chip--positive {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.bt-player-analysis-chip--negative {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.bt-player-analysis-chip--warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

.bt-player-analysis-chip--neutral {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.bt-player-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bt-player-analysis-item {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(51, 65, 85, 0.92);
    border-radius: 12px;
    padding: 10px 12px;
}

.bt-player-analysis-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 6px;
}

.bt-player-analysis-value {
    display: block;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player-analysis-summary {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 12px;
}

.bt-player-analysis-note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #94a3b8);
}

/* Metrics strip */
.bt-player-metrics {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.bt-player-metric {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
}

.bt-player-metric-label {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.bt-player-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.bt-player--positive { color: #22c55e; }
.bt-player--negative { color: #ef4444; }

/* Trade log table */
/* ── Supertrend Lab ────────────────────────────────────────────────────── */
.bt-player-st-lab {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 16px;
}

.bt-player-st-lab__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.bt-player-st-lab__desc {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 4px;
    max-width: 640px;
}

.bt-player-st-lab__run-btn {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.bt-player-st-lab__run-btn:hover { background: #2563eb; }
.bt-player-st-lab__run-btn:disabled { opacity: 0.5; cursor: default; }

.bt-player-st-lab__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.bt-player-st-lab__filter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #0d1526;
    border: 1px solid #334155;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #94a3b8;
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
}
.bt-player-st-lab__filter-pill:has(input:checked) {
    border-color: #3b82f6;
    color: #e2e8f0;
    background: #1e3a5f;
}
.bt-player-st-lab__filter-pill input {
    accent-color: #3b82f6;
}

.bt-player-st-lab__summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px 10px;
    background: #0d1526;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
}

.bt-player-st-lab__filter-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 4px;
    padding: 0 2px;
}

.bt-player-st-lab__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bt-player-st-lab__stat-label {
    font-size: 0.7rem;
    color: #64748b;
}

.bt-player-st-lab__stat-value {
    font-size: 0.87rem;
    font-weight: 700;
    color: #e2e8f0;
}
.bt-player-st-lab__stat-value--pos { color: #22c55e; }
.bt-player-st-lab__stat-value--neg { color: #ef4444; }
.bt-player-st-lab__stat-value--neu { color: #94a3b8; }

.bt-player-st-lab__error {
    color: #ef4444;
    font-size: 0.82rem;
    margin-top: 8px;
}

.bt-player-trades-panel {
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 16px;
    padding: 14px;
}

.bt-player-table-wrapper {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
}

.bt-player-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.bt-player-table th,
.bt-player-table td {
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border, #1e293b);
}

.bt-player-table th {
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    background: var(--panel, #0f172a);
    z-index: 1;
}

.bt-player-table td {
    color: var(--text-primary, #e2e8f0);
}

.bt-player-table tbody tr[data-trade-key] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.bt-player-table tbody tr[data-trade-key]:hover {
    background: rgba(30, 41, 59, 0.75);
}

.bt-player-table tbody tr.bt-player-table-row--active {
    background: rgba(56, 189, 248, 0.12);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

.bt-player-table-totals td {
    border-top: 2px solid var(--border, #475569);
    border-bottom: 2px solid var(--border, #475569);
    background: var(--panel-muted, #1e293b);
    padding-top: 10px;
    padding-bottom: 10px;
}

.bt-player-empty {
    text-align: center;
    color: var(--text-muted, #94a3b8);
    padding: 24px 10px;
}

/* Responsive */
@media (max-width: 1100px) {
    .bt-player-charts {
        grid-template-columns: 1fr;
    }
    .bt-player-confluence-stats {
        grid-template-columns: 1fr;
    }
    .bt-player-trend-grid {
        grid-template-columns: 1fr;
    }
    .bt-player-analysis {
        grid-template-columns: 1fr;
    }
    .bt-player-metrics {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700px) {
    .bt-player-trend-pane__header {
        flex-direction: column;
    }
    .bt-player-trend-pane__meta {
        justify-content: flex-start;
    }
    .bt-player-analysis-grid {
        grid-template-columns: 1fr;
    }
    .bt-player-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .bt-player-controls {
        flex-wrap: wrap;
    }
    .bt-player-window-strip__header {
        align-items: flex-start;
    }
}

/* ── Supertrend Rotation Roster ───────────────────────────────────────── */
.bt-roster-team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 48px;
}

.bt-roster-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 140px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: border-color 0.15s;
}
.bt-roster-card:hover { border-color: #3b82f6; }
.bt-roster-card--strong  { border-left: 3px solid #22c55e; }
.bt-roster-card--marginal { border-left: 3px solid #f59e0b; }
.bt-roster-card--poor    { border-left: 3px solid #ef4444; }
.bt-roster-card--nodata  { border-left: 3px solid #64748b; }

.bt-roster-card__symbol {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.04em;
}
.bt-roster-card__score {
    font-size: 1.15rem;
    font-weight: 700;
}
.bt-roster-card__meta {
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.4;
}
.bt-roster-card__streak {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}
.bt-roster-card__streak--strong  { background:#14532d; color:#4ade80; }
.bt-roster-card__streak--marginal { background:#422006; color:#fbbf24; }
.bt-roster-card__streak--poor    { background:#450a0a; color:#f87171; }
.bt-roster-card__streak--nodata  { background:#1e293b; color:#64748b; }

/* Quarterly performance badges */
.bt-roster-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    width: fit-content;
}
.bt-roster-badge--promo-ready  { background:#14532d; color:#86efac; border:1px solid #22c55e; }
.bt-roster-badge--promo-watch  { background:#1c3a1c; color:#bbf7d0; border:1px solid #4ade80; opacity:0.85; }
.bt-roster-badge--at-risk      { background:#431407; color:#fed7aa; border:1px solid #f97316; }
.bt-roster-badge--demotion-due { background:#450a0a; color:#fca5a5; border:1px solid #ef4444; }

.bt-roster-card__sparkline {
    width: 100%;
    height: 28px;
    margin-top: 2px;
}

.bt-roster-card__actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.bt-roster-card__btn {
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #475569;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.bt-roster-card__btn:hover { background: #334155; color: #e2e8f0; }
.bt-roster-card__btn--move  { border-color: #3b82f6; color: #60a5fa; }
.bt-roster-card__btn--move:hover  { background: #1e3a5f; }
.bt-roster-card__btn--remove { border-color: #ef4444; color: #f87171; }
.bt-roster-card__btn--remove:hover { background: #450a0a; }

/* [+A] [+B] buttons in fitness table */
.bt-roster-add-btn {
    font-size: 0.62rem;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #3b82f6;
    background: transparent;
    color: #60a5fa;
    cursor: pointer;
    margin-right: 3px;
    transition: background 0.1s;
}
.bt-roster-add-btn:hover { background: #1e3a5f; }
.bt-roster-add-btn--b { border-color: #f59e0b; color: #fbbf24; }
.bt-roster-add-btn--b:hover { background: #422006; }

/* Quarterly report table */
.bt-roster-report-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bt-roster-report-table th, .bt-roster-report-table td {
    padding: 6px 10px; text-align: left; border-bottom: 1px solid #1e293b;
}
.bt-roster-report-table th { color: #64748b; font-weight: 600; }
.bt-roster-report-table tr:hover td { background: #1e293b; }

/* ── Team Backtest panel ─────────────────────────────────────────────────── */
.bt-team-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #334155;
    margin-bottom: 14px;
    padding-top: 10px;
}
.bt-team-tab {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.bt-team-tab:hover { color: #e2e8f0; }
.bt-team-tab--active { color: #3b82f6; border-bottom-color: #3b82f6; }

.bt-team-pane { animation: bt-fadein 0.15s ease; }
@keyframes bt-fadein { from { opacity: 0; } to { opacity: 1; } }

.bt-team-equity-svg {
    width: 100%;
    height: 160px;
    display: block;
    background: #0f172a;
    border-radius: 6px;
}

/* Monthly fitness heatmap */
.bt-fitness-heatmap th, .bt-fitness-heatmap td {
    font-size: 0.7rem;
    padding: 4px 8px;
    white-space: nowrap;
}
.bt-fitness-cell { border-radius: 3px; padding: 2px 6px; font-weight: 600; font-size: 0.68rem; }
.bt-fitness-cell--strong  { background: #14532d; color: #4ade80; }
.bt-fitness-cell--marginal { background: #422006; color: #fbbf24; }
.bt-fitness-cell--poor    { background: #450a0a; color: #f87171; }
.bt-fitness-cell--nodata  { background: #1e293b; color: #475569; }

/* Quarterly review cards */
.bt-quarterly-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.bt-quarterly-card__title {
    font-weight: 700;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin-bottom: 10px;
}
.bt-quarterly-swap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 6px 0;
    border-bottom: 1px solid #334155;
}
.bt-quarterly-swap:last-child { border-bottom: none; }
.bt-quarterly-no-change { color: #475569; font-size: 0.75rem; font-style: italic; }