/* ============================================================
   NSE Disclosure Dashboard — Mobile-first professional theme
   ============================================================ */

:root {
    --header-h: 70px;       /* desktop header height — used by sticky banner + control panel */
    /* Deeper, near-true-black theme inspired by premium-dashboard designs.
       Slightly warm blacks with vivid, high-contrast accent stripes. */
    --bg-base: #060809;
    --bg-elev: #11141a;
    --bg-elev-2: #171b22;
    --bg-input: #0a0d12;
    --border: #1e242e;
    --border-strong: #2a3140;
    --text: #edf1f5;
    --text-muted: #7d8b99;
    --text-dim: #4d5b6b;
    --accent: #3fb6e6;              /* electric cyan */
    --accent-strong: #29a3d1;
    --green: #b9e14f;                /* lime — the signature Exprotrack green */
    --green-strong: #a5cf3e;
    --green-soft: rgba(185, 225, 79, 0.15);
    --amber: #ffb020;                /* gold-amber */
    --amber-soft: rgba(255, 176, 32, 0.15);
    --orange: #ff8a3c;               /* warmth accent */
    --red: #ef5350;
    --red-soft: rgba(239, 83, 80, 0.15);
    --purple: #a888ff;               /* highlight accent for high-conviction */
    --purple: #ba68c8;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-base);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.hidden { display: none !important; }

/* Session limit banner — appears once when 10 analyses processed in cycle.
   Sits in normal flow at the top of the dashboard (not sticky) so it never
   competes with the sticky header / ticker strip below it. */
.continue-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    margin: 14px 24px 4px;
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.18) 0%, rgba(255, 112, 67, 0.14) 100%);
    border: 1px solid rgba(255, 167, 38, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(255, 167, 38, 0.15);
    animation: slide-down 0.3s ease;
    flex-wrap: wrap;
}
.continue-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 200px;
}
.continue-banner-text strong {
    color: #ffa726;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.continue-banner-text span {
    color: #d8c1a4;
    font-size: 12px;
    font-weight: 500;
}
.continue-banner .btn-primary {
    padding: 9px 18px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Recap-prompt banner reuses .continue-banner layout but in cyan
   (less alarming than the orange session-limit banner) */
.recap-banner {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.18) 0%, rgba(102, 187, 106, 0.12) 100%);
    border-color: rgba(79, 195, 247, 0.45);
    box-shadow: 0 4px 14px rgba(79, 195, 247, 0.15);
}
.recap-banner .continue-banner-text strong { color: var(--accent); }
.recap-actions { display: flex; gap: 10px; flex-shrink: 0; }
.recap-actions .btn-secondary,
.recap-actions .btn-primary { padding: 9px 18px; font-size: 13px; min-height: 38px; }

@media (max-width: 768px) {
    .continue-banner {
        margin: 10px 14px 4px;
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
    }
    .continue-banner .btn-primary { width: 100%; }
    .recap-actions { flex-direction: column; }
    .recap-actions .btn-secondary, .recap-actions .btn-primary { width: 100%; }
}

button, input, select { font-family: inherit; }
button { -webkit-appearance: none; appearance: none; }

/* ============================================================
   Login
   ============================================================ */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(79, 195, 247, 0.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(186, 104, 200, 0.06), transparent 50%),
        linear-gradient(135deg, #0a1119 0%, #131c27 100%);
}

.login-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.login-card h1 {
    color: var(--accent);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.login-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }

.login-card input {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-card input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

.login-card button {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #0a1119;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.1s, box-shadow 0.15s;
}

.login-card button:hover { box-shadow: 0 4px 14px rgba(79, 195, 247, 0.4); }
.login-card button:active { transform: scale(0.98); }

.error { color: var(--red); margin-top: 12px; font-size: 13px; }

/* ============================================================
   Header
   ============================================================ */
header {
    display: flex;
    /* Pack everything to the right: status pulse, LIMIT pill, search,
       refresh, and the ZB menu icon all sit on the right edge together. */
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(19, 28, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f7;
    color: #0a1119;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}

/* Brand-mark as a button (now triggers the settings menu) */
.brand-mark.brand-btn {
    border: none;
    cursor: pointer;
    padding: 0;
}
.brand-mark.brand-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(186, 104, 200, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.brand-mark.brand-btn:active { transform: scale(0.96); }
.brand-mark.brand-btn[aria-expanded="true"] {
    box-shadow: 0 4px 14px rgba(186, 104, 200, 0.5);
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text h1 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
    line-height: 1.15;
    background: linear-gradient(135deg, #fff 0%, #b0bec5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.2px; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    min-height: 36px;
}

.header-actions button:hover { background: var(--border); border-color: var(--border-strong); }
.header-actions button:active { transform: scale(0.96); }

.header-actions button.btn-ghost { background: transparent; }
.header-actions button.btn-ghost:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* Settings button + dropdown menu */
.settings-wrap { position: relative; }

.btn-icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--bg-elev-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.btn-icon-square:hover { background: var(--border); border-color: var(--border-strong); color: var(--accent); }
.btn-icon-square:active { transform: scale(0.95); }
.btn-icon-square[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.btn-icon-square[disabled] { opacity: 0.7; cursor: wait; }

@keyframes spin-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.btn-icon-square.spinning svg { animation: spin-rotate 0.8s linear infinite; }

.settings-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: slide-down 0.15s ease;
    white-space: nowrap;
}

.settings-menu button.menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background 0.1s, color 0.1s;
    width: 100%;
    white-space: nowrap;
    line-height: 1.2;
    min-height: 0;
}
.settings-menu button.menu-item span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-menu button.menu-item:hover { background: var(--bg-elev-2); color: var(--accent); }
.settings-menu button.menu-item:active { transform: scale(0.98); }
.settings-menu button.menu-item svg { color: var(--text-muted); flex-shrink: 0; }
.settings-menu button.menu-item:hover svg { color: var(--accent); }

.settings-menu button.menu-item.menu-danger:hover { background: var(--red-soft); color: var(--red); }
.settings-menu button.menu-item.menu-danger:hover svg { color: var(--red); }

/* Continue 10 more — highlighted so it pops when shown */
.settings-menu button.menu-item.menu-highlight {
    background: rgba(255, 167, 38, 0.12);
    color: var(--amber);
    font-weight: 700;
}
.settings-menu button.menu-item.menu-highlight svg { color: var(--amber); }
.settings-menu button.menu-item.menu-highlight:hover {
    background: rgba(255, 167, 38, 0.22);
    color: var(--amber);
}
.settings-menu button.menu-item.menu-highlight:hover svg { color: var(--amber); }

/* Pause/Play icon swap inside menu pause item */
#menu-pause .icon-play { display: none; }
#menu-pause.paused .icon-pause { display: none; }
#menu-pause.paused .icon-play { display: inline-block; color: var(--green); }
#menu-pause.paused:hover .icon-play { color: var(--green); }

/* Active-filter count badge next to the Filters menu item */
.menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--accent);
    color: #0a1119;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.menu-count.hidden { display: none; }

/* Inline reset button shown inside the active-filter banner */
.btn-toolbar-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.btn-toolbar-inline:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.btn-toolbar-inline:active { transform: scale(0.96); }

.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

/* View switching */
.view { display: block; }
.view.hidden { display: none; }

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-top: 8px;
}
.view-header h2 {
    margin-bottom: 0;
    padding-top: 0;
}
.view-header h2::before {
    content: "";
    width: 3px; height: 16px;
    background: var(--accent);
    border-radius: 2px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* Full-screen logs view */
.logs-fullscreen {
    max-height: calc(100vh - 200px);
    min-height: 400px;
}

/* Pause button: red background while feed is running (click to pause) */
#pause-btn.running {
    background: var(--red); border-color: var(--red); color: #fff; font-weight: 700;
}
#pause-btn.running:hover { background: #d84846; border-color: #d84846; }
#pause-btn.running .icon-play { display: none; }
#pause-btn.running .icon-pause { display: inline-block; }

/* Pause button when paused (click to resume): green play button */
#pause-btn.paused {
    background: var(--green); border-color: var(--green); color: #0a1119; font-weight: 700;
}
#pause-btn.paused:hover { background: #5da961; border-color: #5da961; }
#pause-btn.paused .icon-pause { display: none; }
#pause-btn.paused .icon-play { display: inline-block; }

/* Status pulse — pill with blinking dot + LIVE/STOPPED label */
.status-pulse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    height: 28px;
    border-radius: 99px;
    cursor: default;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    position: relative;
    animation: pulse-blink 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: pulse-ring 1.4s ease-out infinite;
}

.pulse-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: currentColor;
    line-height: 1;
    font-feature-settings: "tnum";
}

@keyframes pulse-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

@keyframes pulse-ring {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

.status-pulse.running {
    background: rgba(102, 187, 106, 0.12);
    border-color: rgba(102, 187, 106, 0.5);
    color: var(--green);
}
.status-pulse.running .pulse-dot {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}

.status-pulse.paused {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.5);
    color: var(--red);
}
.status-pulse.paused .pulse-dot {
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
}

/* Session-limit-reached state — amber. A SEPARATE pill that sits beside
   the LIVE/STOPPED pill so both states are visible together. Auto-widens
   to fit the LIMIT label + count chip + RESUME CTA. */
.status-pulse.limit {
    background: rgba(255, 167, 38, 0.14);
    border-color: rgba(255, 167, 38, 0.55);
    color: var(--amber);
    /* Wider pill so all chips inside can breathe */
    height: auto;
    min-height: 28px;
    padding: 4px 10px 4px 9px;
    gap: 6px;
}
.status-pulse.limit .pulse-dot {
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber);
}
/* The LIMIT label keeps the small uppercase style */
.status-pulse.limit .pulse-label { font-size: 10px; }
/* Count chip — slightly inset pill showing "10/10" */
.pulse-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(255, 167, 38, 0.22);
    color: var(--amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    font-feature-settings: "tnum";
    line-height: 1;
}
/* CTA hint inside the LIMIT pill */
.pulse-cta {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.85;
    padding-left: 4px;
    border-left: 1px solid rgba(255, 167, 38, 0.35);
    line-height: 1;
}
.status-pulse.limit svg { color: var(--amber); margin-left: -2px; }

/* Button variant of the limit pill — clickable to resume. Strip default
   button chrome so it matches the .status-pulse pill shape. */
button.status-pulse {
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button.status-pulse.limit:hover {
    background: rgba(255, 167, 38, 0.22);
    border-color: rgba(255, 167, 38, 0.75);
}
button.status-pulse.limit:hover .pulse-cta { opacity: 1; }
button.status-pulse.limit:active { transform: scale(0.97); }

/* Backwards-compat for old status-badge if any other code references it */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.status-badge.running { background: var(--green-soft); color: var(--green); }
.status-badge.paused { background: var(--amber-soft); color: var(--amber); }

/* ============================================================
   Unified Control Panel: Ticker + Filters
   Inspired by TradingView / Robinhood / Bloomberg dense layouts
   ============================================================ */
.control-panel {
    margin: 16px 24px 18px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--header-h);
    z-index: 50;
}

/* Ticker strip — when used as a fixed bottom nav bar (.ticker-bottom) */
.ticker-strip {
    display: flex;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: linear-gradient(180deg, #182330 0%, #131c27 100%);
    border-top: 1px solid var(--border);
}
.ticker-strip::-webkit-scrollbar { display: none; }

/* ============================================================
   Floating Dock — modern oval pill bar that hovers at the bottom of the
   viewport. Glassmorphism, an active-state indicator pill, and per-tile
   accent colours. Replaces the old full-width ticker strip.
   ============================================================ */
.dock {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0));
    transform: translateX(-50%);
    z-index: 90;
    /* Don't capture clicks on the empty padding around the inner pill */
    pointer-events: none;
}
.dock-inner {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(30, 41, 57, 0.85) 0%, rgba(15, 22, 33, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 14px 30px -8px rgba(0, 0, 0, 0.65),
        0 4px 10px -2px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.dock-inner::-webkit-scrollbar { display: none; }

.dock-tile {
    /* Reset button defaults */
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    color: var(--text-muted);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    flex: 0 0 auto;
    transition: background 0.22s ease, color 0.22s ease, transform 0.15s ease;
    position: relative;
}
.dock-tile:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.dock-tile:active { transform: scale(0.94); }

.dock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.22s ease, color 0.22s ease;
    color: inherit;
}
.dock-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 3px;
    min-width: 0;
}
.dock-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
    font-feature-settings: "tnum";
}
.dock-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Per-tile accent colours — applied on hover + active */
.dock-tile.favorites:hover .dock-icon,
.dock-tile.favorites.active .dock-icon {
    background: rgba(255, 213, 79, 0.18);
    color: #ffd54f;
}
.dock-tile.strong:hover .dock-icon,
.dock-tile.strong.active .dock-icon {
    background: rgba(102, 187, 106, 0.18);
    color: var(--green);
}
.dock-tile.today:hover .dock-icon,
.dock-tile.today.active .dock-icon {
    background: rgba(79, 195, 247, 0.18);
    color: var(--accent);
}
.dock-tile.total:hover .dock-icon,
.dock-tile.total.active .dock-icon {
    background: rgba(186, 104, 200, 0.18);
    color: #ba68c8;
}

/* Active filled-pill state — when a quick filter is selected */
.dock-tile.active {
    background: rgba(255, 255, 255, 0.06);
}
.dock-tile.active .dock-label { color: var(--text); }
.dock-tile.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* Reserve space at the bottom of the dashboard so cards scroll clear of
   the floating dock. ~80px (dock height) + 14px float offset + safe-area. */
#dashboard {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0));
}

.ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: transparent;
    color: var(--text);
    border: none;
    border-right: 1px solid var(--border);
    cursor: default;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
    text-align: left;
}
.ticker:last-child { border-right: none; }
.ticker[onclick], button.ticker { cursor: pointer; }
.ticker[onclick]:hover, button.ticker:hover { background: rgba(79, 195, 247, 0.04); }
.ticker[onclick]:active, button.ticker:active { transform: scale(0.97); }

/* Active ticker (currently filtering by it) — show a glowing underline accent */
.ticker.active { background: rgba(79, 195, 247, 0.08); }
.ticker.active::after {
    content: "";
    position: absolute;
    bottom: 0; left: 8px; right: 8px;
    height: 2px;
    background: var(--ticker-color, var(--accent));
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px var(--ticker-color, var(--accent));
}

/* Tiny vertical color accent — replaces emoji */
.ticker-bar {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--ticker-color, var(--accent));
    flex-shrink: 0;
}

.ticker-data { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }

.ticker-value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.4px;
    font-feature-settings: "tnum";
    color: var(--text);
}

.ticker-value-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.2px;
    color: var(--purple);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticker-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
}

/* Color tokens per ticker */
.ticker.favorites { --ticker-color: #ffd54f; }
.ticker.favorites .ticker-value { color: #ffd54f; }
.ticker.hot { --ticker-color: #ff7043; }
.ticker.hot .ticker-value { color: #ff7043; }
.ticker.strong { --ticker-color: var(--green); }
.ticker.strong .ticker-value { color: var(--green); }
.ticker.today { --ticker-color: var(--accent); }
.ticker.today .ticker-value { color: var(--accent); }
.ticker.yes { --ticker-color: var(--green); }
.ticker.yes .ticker-value { color: var(--green); }
.ticker.conviction { --ticker-color: #ffd54f; }
.ticker.conviction .ticker-value { color: #ffd54f; }
.ticker.actionable { --ticker-color: #4dd0e1; }
.ticker.actionable .ticker-value { color: #4dd0e1; }
.ticker.avg { --ticker-color: var(--accent); }
.ticker.avg .ticker-value { color: var(--accent); }
.ticker.top { --ticker-color: var(--purple); }
.ticker.total { --ticker-color: var(--text-muted); }

/* Mini distribution sparkline inside Avg ticker */
.score-distribution {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    margin-left: 6px;
    width: 32px;
}
.dist-bar {
    flex: 1;
    border-radius: 1px;
    min-height: 2px;
    transition: opacity 0.15s;
    opacity: 0.85;
}
.dist-bar:hover { opacity: 1; }

/* Filter controls — bottom section of unified panel */
.filter-controls {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Compact toolbar with btn-toolbar (Search / Filters / Sort) */
.filter-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}

.btn-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
    min-height: 38px;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.btn-toolbar:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.btn-toolbar:active { transform: scale(0.97); }
.btn-toolbar.active { border-color: var(--accent); color: var(--accent); }
.btn-toolbar.btn-sort { gap: 6px; }

.btn-toolbar .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: #0a1119;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    margin-left: 2px;
}

/* Search expansion row — slides down below header */
.search-expand {
    position: sticky;
    top: var(--header-h);
    z-index: 60;
    display: flex;
    align-items: stretch;
    padding: 10px 24px;
    background: rgba(19, 28, 39, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    animation: slide-down 0.18s ease;
}
.search-expand .search-wrap { flex: 1; position: relative; }
.search-expand #search-input { padding-right: 44px; }
.search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.search-clear:hover { color: var(--text); background: var(--bg-elev-2); }

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sort menu popover — uses position:fixed so it escapes any overflow:hidden parent */
.sort-menu {
    position: fixed;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 6px;
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: slide-down 0.15s ease;
}

.sort-option {
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.1s;
}
.sort-option:hover { background: var(--bg-elev-2); }
.sort-option.active { background: rgba(79, 195, 247, 0.12); color: var(--accent); font-weight: 700; }

/* Generic icon button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.btn-icon:hover { color: var(--text); background: var(--bg-elev-2); }
.btn-icon:active { transform: scale(0.95); }

/* Filter Drawer (slide-in from right) */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 998;
    animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 92vw;
    height: 100vh;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    z-index: 999;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    animation: slide-in-right 0.22s ease;
}
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev-2);
}
.drawer-header h3 {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

.drawer-section { margin-bottom: 22px; }
.drawer-section h4 {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 10px;
}

/* Checkbox list (rating, decision) — Amazon style */
.check-list { display: flex; flex-direction: column; gap: 2px; }

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}
.check-row:hover { background: var(--bg-elev-2); }

.check-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s;
}
.check-row input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.check-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #0a1119;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.check-label { flex: 1; color: var(--text); font-size: 14px; font-weight: 500; }
.check-count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-feature-settings: "tnum";
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 99px;
    min-width: 28px;
    text-align: center;
}

/* Drawer footer with Reset / Apply */
.drawer-footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev-2);
}
.btn-reset, .btn-apply { flex: 1; min-height: 42px; font-size: 13px; }
.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #0a1119;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(79, 195, 247, 0.5); }
.btn-primary:active { transform: scale(0.98); }

.result-line {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

/* Creative result meter — visual progress bar showing match ratio */
.result-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-feature-settings: "tnum";
}

.result-num {
    color: var(--accent);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.3px;
}

.result-of {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.result-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
    min-width: 60px;
}

.result-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
    border-radius: 99px;
    transition: width 0.4s ease, background 0.3s ease;
    box-shadow: 0 0 6px rgba(79, 195, 247, 0.5);
}

.result-bar-fill.bar-narrow {
    background: linear-gradient(90deg, var(--green) 0%, #4caf50 100%);
    box-shadow: 0 0 6px rgba(102, 187, 106, 0.6);
}
.result-bar-fill.bar-medium {
    background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
    box-shadow: 0 0 6px rgba(79, 195, 247, 0.5);
}
.result-bar-fill.bar-wide {
    background: linear-gradient(90deg, var(--text-muted) 0%, var(--accent) 100%);
    box-shadow: none;
}

.result-pct {
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Segmented control — TradingView/Yahoo Finance style time/score buttons */
.seg-group {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.seg-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.seg-group .seg-label + .seg { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.seg-group .seg:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: 1px solid var(--border); }

.seg {
    padding: 7px 14px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-right: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s;
    min-height: 32px;
    font-feature-settings: "tnum";
}

.seg:hover { background: var(--bg-elev-2); color: var(--text); }
.seg.active {
    background: var(--accent);
    color: #0a1119;
    border-color: var(--accent);
    z-index: 1;
    position: relative;
    font-weight: 700;
}

.seg-group[data-group="time"] .seg.active { background: var(--accent); border-color: var(--accent); }
.seg-group[data-group="score"] .seg.active { background: var(--green); border-color: var(--green); }

/* Highlight pulse for scrollToTopPick */
@keyframes card-pulse-highlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 104, 200, 0); border-color: var(--border); }
    25% { box-shadow: 0 0 0 6px rgba(186, 104, 200, 0.4); border-color: var(--purple); }
    50% { box-shadow: 0 0 0 12px rgba(186, 104, 200, 0); border-color: var(--purple); }
}

.watch-card.highlight {
    animation: card-pulse-highlight 1.4s ease-out 1;
    border-color: var(--purple) !important;
}

/* ============================================================
   Filter Rows (inside .control-panel > .filter-controls)
   ============================================================ */
.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.filter-row:last-child { margin-bottom: 0; }

.search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
}

#search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 38px;
}

#search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

.sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-wrap label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

#sort-select {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    min-height: 38px;
}

#sort-select:focus { outline: none; border-color: var(--accent); }

.btn-clear {
    padding: 8px 14px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
    min-height: 38px;
    white-space: nowrap;
}

.btn-clear:hover { color: var(--red); border-color: var(--red); }

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

.chip-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-right: 4px;
}

.chip {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
    min-height: 32px;
    white-space: nowrap;
}

.chip:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--border-strong); }

.chip.active {
    background: var(--accent);
    color: #0a1119;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
}

.chip.must-buy.active { background: #4caf50; border-color: #4caf50; color: #0a1119; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4); }
.chip.strong-buy.active { background: var(--green); border-color: var(--green); color: #0a1119; box-shadow: 0 2px 8px rgba(102, 187, 106, 0.4); }
.chip.buy.active { background: var(--accent); border-color: var(--accent); color: #0a1119; box-shadow: 0 2px 8px rgba(79, 195, 247, 0.4); }
.chip.hold.active { background: var(--amber); border-color: var(--amber); color: #0a1119; box-shadow: 0 2px 8px rgba(255, 167, 38, 0.4); }
.chip.avoid.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(239, 83, 80, 0.4); }
.chip.yes.active { background: var(--green); border-color: var(--green); color: #0a1119; }
.chip.uncertain.active { background: var(--amber); border-color: var(--amber); color: #0a1119; }

.result-counter {
    margin-left: auto;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    background: rgba(79, 195, 247, 0.08);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Company name input inside drawer */
.company-input-wrap { display: flex; }
.company-input-wrap input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.company-input-wrap input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

/* Saved filters quick-access strip */
.saved-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.saved-filters .saved-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-right: 4px;
}
.saved-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    background: rgba(186, 104, 200, 0.12);
    color: var(--purple);
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.saved-pill:hover {
    background: rgba(186, 104, 200, 0.2);
    border-color: var(--purple);
    transform: translateY(-1px);
}
.saved-pill button {
    width: 18px; height: 18px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s;
}
.saved-pill button:hover { background: rgba(255, 255, 255, 0.15); }

/* Active filter pills */
.active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    background: rgba(79, 195, 247, 0.12);
    color: var(--accent);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pill button {
    width: 20px; height: 20px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s;
}
.pill button:hover { background: rgba(255, 255, 255, 0.15); }
.pill.rating.must-buy, .pill.rating.strong-buy { background: var(--green-soft); color: var(--green); border-color: rgba(102, 187, 106, 0.3); }
.pill.rating.buy { background: rgba(79, 195, 247, 0.15); color: var(--accent); }
.pill.rating.hold { background: var(--amber-soft); color: var(--amber); border-color: rgba(255, 167, 38, 0.3); }
.pill.rating.avoid { background: var(--red-soft); color: var(--red); border-color: rgba(239, 83, 80, 0.3); }
.pill.decision.yes { background: var(--green-soft); color: var(--green); border-color: rgba(102, 187, 106, 0.3); }
.pill.decision.uncertain { background: var(--amber-soft); color: var(--amber); border-color: rgba(255, 167, 38, 0.3); }

/* Pagination */
.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.btn-secondary {
    padding: 9px 18px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
    min-height: 38px;
}
.btn-secondary:hover {
    background: var(--bg-elev-2);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

/* ============================================================
   Sections
   ============================================================ */
/* ============================================================
   API Usage modal — Haiku/Sonnet cost + call counts.
   ============================================================ */
.usage-modal-content { max-width: 480px; }
.usage-panel { display: flex; flex-direction: column; gap: 14px; }
.usage-loading { color: var(--text-muted); text-align: center; padding: 40px 20px; font-size: 13px; }
.usage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.usage-title { font-size: 18px; font-weight: 800; margin: 0; color: var(--text); letter-spacing: -0.3px; }
.usage-since { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.usage-reset {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: auto !important;
}
.usage-total-card {
    background: linear-gradient(140deg, rgba(185,225,79,0.10), rgba(63,182,230,0.06));
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
}
.usage-total-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.usage-total-value {
    font-size: 34px;
    font-weight: 800;
    color: var(--green);
    letter-spacing: -0.8px;
    line-height: 1;
    font-feature-settings: "tnum";
}
.usage-total-inr { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.usage-total-sub { font-size: 11px; color: var(--text-dim); margin-top: 8px; }

.usage-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.usage-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.usage-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.usage-card-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.usage-card-cost {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    font-feature-settings: "tnum";
}
.usage-card.usage-haiku  .usage-card-cost { color: var(--accent); }
.usage-card.usage-sonnet .usage-card-cost { color: var(--amber); }
.usage-card-row { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.usage-card-metric {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
    font-feature-settings: "tnum";
    line-height: 1;
}
.usage-card-metric-label { font-size: 11px; color: var(--text-muted); }
.usage-card-tokens {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--text-muted);
}
.usage-card-tokens .tok-num { display: block; color: var(--text); font-weight: 700; font-feature-settings: "tnum"; }
.usage-card-tokens .tok-lbl { display: block; margin-top: 2px; letter-spacing: 0.3px; }
.usage-footnote {
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.usage-footnote a { color: var(--accent); text-decoration: underline; }

/* Empty / setup-needed state for the Anthropic section */
.usage-empty {
    background: var(--bg-elev);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 14px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.usage-empty-title { font-weight: 800; color: var(--text); margin-bottom: 6px; font-size: 13px; }
.usage-empty-body { font-size: 12px; }
.usage-empty pre {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10.5px;
    color: var(--accent);
    margin: 8px 0;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}
.usage-empty a { color: var(--accent); text-decoration: underline; }
.usage-empty code {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* By model / by day list */
.usage-model-list {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}
.usage-model-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.usage-model-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.usage-model-row:last-child { border-bottom: none; }
.usage-model-name {
    color: var(--text);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11.5px;
    letter-spacing: 0.2px;
}
.usage-model-cost {
    color: var(--text);
    font-weight: 700;
    font-feature-settings: "tnum";
}

/* Local counters section — collapsed treatment below Anthropic hero */
.usage-local-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usage-local-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.usage-local-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.usage-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.usage-local-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.2px;
}

/* ============================================================
   Live index ticker — Nifty 50 / Bank Nifty / Sensex.
   Sticks under the header. Horizontally scrollable if narrow.
   INDmoney-inspired.
   ============================================================ */
.index-ticker {
    display: flex;
    gap: 0;
    padding: 8px 16px;
    background: linear-gradient(180deg, #0d1117 0%, #060809 100%);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: var(--header-h, 60px);
    z-index: 90;
}
.index-ticker::-webkit-scrollbar { display: none; }
.index-ticker-loading {
    color: var(--text-muted);
    font-size: 11px;
    padding: 4px 0;
    letter-spacing: 0.3px;
}
.index-tile {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 14px 4px 0;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
}
.index-tile:last-child { border-right: none; }
.index-tile + .index-tile { padding-left: 14px; }
.index-name {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.index-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-feature-settings: "tnum";
    letter-spacing: -0.2px;
}
.index-change {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-feature-settings: "tnum";
}
.index-change.up { color: var(--green); }
.index-change.down { color: var(--red); }

/* ============================================================
   Sector tabs — Zerodha-style chips above the history list.
   Horizontally scrollable on mobile.
   ============================================================ */
.sector-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4px;
}
.sector-tabs::-webkit-scrollbar { display: none; }
.sector-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: var(--bg-elev);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sector-tab:hover { color: var(--text); border-color: var(--border-strong); }
.sector-tab.active {
    background: var(--accent);
    color: #0a1119;
    border-color: var(--accent);
}
.sector-tab.active .sector-tab-count { color: rgba(10, 17, 25, 0.7); }
.sector-tab-count {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    font-feature-settings: "tnum";
}

/* ============================================================
   Mobile-first stock-row layout for history (INDmoney/Zerodha style).
   Renders on ≤640px; the classic desktop table renders above that.
   ============================================================ */
.history-rows {
    display: none;                /* hidden on desktop by default */
    flex-direction: column;
    gap: 8px;
}
.hrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.hrow:hover { border-color: var(--border-strong); }
.hrow:active { transform: scale(0.99); }
.hrow-left { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hrow-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Star button used in mobile rows AND desktop table cells */
.hrow-star {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 4px;
    margin: -4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, transform 0.12s;
    flex-shrink: 0;
}
.hrow-star:hover { color: #ffd54f; background: rgba(255, 213, 79, 0.08); }
.hrow-star:active { transform: scale(0.88); }
.hrow-star.is-fav { color: #ffd54f; }
.hrow-star.is-fav svg { filter: drop-shadow(0 0 4px rgba(255, 213, 79, 0.35)); }
.hrow-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.3px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    flex-shrink: 0;
    font-feature-settings: "tnum";
}
.hrow-score.must-buy   { background: rgba(185, 225, 79, 0.20); color: var(--green); }
.hrow-score.strong-buy { background: rgba(185, 225, 79, 0.16); color: var(--green); }
.hrow-score.buy        { background: rgba(63, 182, 230, 0.16); color: var(--accent); }
.hrow-score.hold       { background: rgba(255, 176, 32, 0.16); color: var(--amber); }
.hrow-score.avoid      { background: rgba(239, 83, 80, 0.16); color: var(--red); }
.hrow-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.hrow-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.hrow-symbol { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 0.2px; }
.hrow-dot { opacity: 0.4; }
.hrow-rating { font-weight: 700; letter-spacing: 0.2px; }
.hrow-rating.rating-must-buy   { color: var(--green); }
.hrow-rating.rating-strong-buy { color: var(--green); }
.hrow-rating.rating-buy        { color: var(--accent); }
.hrow-rating.rating-hold       { color: var(--amber); }
.hrow-rating.rating-avoid      { color: var(--red); }
.hrow-sector { color: var(--text-dim); }
.hrow-since {
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: 0.1px;
}
.hrow-since.up { color: var(--green); }
.hrow-since.down { color: var(--red); }
.hrow-since.neutral { color: var(--text-muted); }
.hrow-right { text-align: right; flex-shrink: 0; }
.hrow-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
    font-feature-settings: "tnum";
}
.hrow-change {
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 2px;
    font-feature-settings: "tnum";
}
.hrow-change.up { color: var(--green); }
.hrow-change.down { color: var(--red); }
.hrow-change.neutral { color: var(--text-muted); }
.hrow-entry {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 3px;
    letter-spacing: 0.2px;
}

/* At mobile widths, swap the table for the row layout */
@media (max-width: 768px) {
    .history-rows { display: flex; }
    .table-wrapper { display: none; }
    .index-ticker { padding: 8px 12px; }
    .index-name { font-size: 9.5px; }
    .index-value { font-size: 12.5px; }
    .index-change { font-size: 10.5px; }
    .sector-tab { padding: 6px 11px; font-size: 11px; }
}

/* ============================================================
   KPI grid — hero cards at top of dashboard. Each card has a
   coloured stripe on top (Exprotrack-style), big bold number,
   small label, and tap-to-filter behaviour.
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 24px 8px;
}
.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 108px;
}
.kpi:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
}
.kpi:active { transform: scale(0.98); }
/* Coloured accent stripe at the top of every KPI card */
.kpi-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: var(--accent);
    opacity: 0.9;
}
.kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kpi-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.kpi-cta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--amber);
    white-space: nowrap;
    opacity: 0.85;
}
.kpi:hover .kpi-cta { opacity: 1; }
.kpi-value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--text);
    line-height: 1;
    font-feature-settings: "tnum";
    margin-top: 2px;
}
.kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.1px;
}

/* Per-card accent stripe colours (Exprotrack-inspired vivid palette) */
.kpi-total .kpi-stripe    { background: linear-gradient(90deg, #4dd0e1, #29b6f6); }
.kpi-total .kpi-value     { color: #e6ecf3; }

.kpi-strong .kpi-stripe   { background: linear-gradient(90deg, var(--green), var(--green-strong)); }
.kpi-strong .kpi-value    { color: var(--green); }

.kpi-today .kpi-stripe    { background: linear-gradient(90deg, var(--orange), var(--amber)); }
.kpi-today .kpi-value     { color: var(--orange); }

.kpi-favs .kpi-stripe     { background: linear-gradient(90deg, #ffd54f, var(--amber)); }
.kpi-favs .kpi-value      { color: #ffd54f; }

.kpi-hot .kpi-stripe      { background: linear-gradient(90deg, #ff7043, var(--red)); }
.kpi-hot .kpi-value       { color: #ff7043; }

.kpi-actionable .kpi-stripe { background: linear-gradient(90deg, var(--purple), #7c4dff); }
.kpi-actionable .kpi-value  { color: var(--purple); }

/* Mobile: 2 columns instead of 3 to keep numbers readable */
@media (max-width: 640px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 12px 14px 6px;
    }
    .kpi { padding: 14px 12px 12px; min-height: 96px; }
    .kpi-value { font-size: 24px; }
    .kpi-sub { font-size: 10px; }
}

.section { padding: 0 24px 24px; }

.section h2 {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-top: 8px;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section h2::before {
    content: "";
    width: 3px; height: 16px;
    background: var(--accent);
    border-radius: 2px;
}

.section-count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

/* Section header row: heading + per-section controls (e.g. time range) */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.section-header h2 { margin: 0; }

/* Tighter segmented-control variant for in-section time-range toggle */
.seg-group.seg-tight {
    display: inline-flex;
    gap: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 3px;
    overflow: hidden;
}
.seg-group.seg-tight .seg {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.seg-group.seg-tight .seg.active {
    background: var(--accent);
    color: #0a1119;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.seg-group.seg-tight .seg:not(.active):hover { color: var(--text); }

/* ============================================================
   Favourites — combined info + chart cards (built from .watch-card +
   .combo-card; legacy .fav-chart-card classes kept for compat).
   ============================================================ */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}
.fav-chart-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fav-chart-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.fav-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.fav-chart-id { min-width: 0; flex: 1 1 auto; }
.fav-chart-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fav-chart-symbol {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin-top: 2px;
}
.fav-chart-price-box {
    text-align: right;
    flex-shrink: 0;
}
.fav-chart-current {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-feature-settings: "tnum";
    line-height: 1;
}
.fav-chart-change {
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 0.2px;
}
.fav-chart-change.up { color: var(--green); }
.fav-chart-change.down { color: var(--red); }
.fav-chart-change.neutral { color: var(--text-muted); }

.fav-chart-canvas-wrap {
    position: relative;
    height: 140px;
    width: 100%;
}
.fav-chart-canvas { display: block; }
.fav-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.3px;
    pointer-events: none;
}
.fav-chart-loading.hidden { display: none; }

.fav-chart-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.fav-leg { display: inline-flex; align-items: center; gap: 6px; }
.leg-line {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}
.leg-price { background: #4fc3f7; }
.leg-entry {
    background: transparent;
    border-top: 2px dashed #ffa726;
    height: 0;
}
.leg-lead {
    background: transparent;
    border-top: 2px dashed #ba68c8;
    height: 0;
}

/* ============================================================
   Watch Cards
   ============================================================ */
.watches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* Amazon-product-card style watch card */
.watch-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    /* No card-level cursor: only the "View details" button opens the modal */
    cursor: default;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.watch-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

/* "View details" button — explicit CTA in card footer + history row */
.btn-view-details {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--accent);
    background: rgba(79, 195, 247, 0.10);
    color: var(--accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-view-details:hover { background: var(--accent); color: #0a1119; }
.btn-view-details:active { transform: scale(0.97); }
.btn-view-details.btn-view-row {
    padding: 4px 10px;
    font-size: 11px;
}

/* Combined favourites card: the watch-card with a chart and time-range
   slot embedded between the price block and the deal block. */
.combo-card .combo-chart-wrap {
    position: relative;
    height: 140px;
    width: 100%;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
}

/* Re-analyse button (card footer) */
.btn-reanalyze {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-reanalyze:hover { color: var(--accent); border-color: var(--accent); background: rgba(79,195,247,0.08); }
.btn-reanalyze:active { transform: scale(0.97); }

/* Inline analysis expander on the tile */
.tile-analysis { display: flex; flex-direction: column; gap: 0; }
.tile-analysis-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.tile-analysis-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.tile-analysis-toggle svg { transition: transform 0.18s; }
.tile-analysis-toggle.open svg { transform: rotate(180deg); }
.tile-analysis-body {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tile-analysis-body.hidden { display: none; }
.ta-view { font-size: 12px; line-height: 1.45; color: var(--text); margin: 0; }
.ta-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.ta-col { flex: 1 1 45%; min-width: 130px; }
.ta-col h5 {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; margin: 0 0 4px;
}
.ta-col h5.ta-pos { color: var(--green); }
.ta-col h5.ta-risk { color: var(--red); }
.ta-col ul { margin: 0; padding-left: 14px; }
.ta-col li { font-size: 11px; line-height: 1.4; color: var(--text-muted); margin-bottom: 3px; }
.ta-watch { font-size: 11px; color: var(--text-muted); margin: 0; }
.ta-watch b { color: var(--text); }

/* Re-analysis result block inside the tile */
.reanalysis {
    border: 1px solid rgba(186, 104, 200, 0.35);
    background: rgba(186, 104, 200, 0.06);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reanalysis.pending {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
}
.reanalysis-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #ba68c8;
    border-radius: 50%;
    animation: spin-rotate 0.8s linear infinite;
    flex-shrink: 0;
}
.reanalysis-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.reanalysis-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ce93d8;
}
.reanalysis-when { font-size: 10px; color: var(--text-muted); }
.reanalysis-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.ra-badge.good { background: rgba(102,187,106,0.18); color: var(--green); }
.ra-badge.bad { background: rgba(239,83,80,0.18); color: var(--red); }
.ra-badge.warn { background: rgba(255,167,38,0.18); color: var(--amber); }
.ra-badge.neutral { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.ra-badge.action { background: rgba(79,195,247,0.18); color: var(--accent); }
.reanalysis-why {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
    margin: 0;
}
.reanalysis-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.reanalysis-levels b { color: var(--text); font-weight: 700; }

/* Top row: title + score badges */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.card-id { min-width: 0; flex: 1; }
.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.2px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}
.card-meta .card-symbol { color: var(--accent); font-weight: 700; letter-spacing: 0.2px; }
.card-meta .dot { color: var(--text-dim); }

.card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Favourite star toggle on each watch card */
.fav-btn {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-dim);
    transition: color 0.15s, transform 0.15s, background 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fav-btn:hover {
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.1);
}
.fav-btn:active { transform: scale(0.85); }
.fav-btn.is-fav {
    color: #ffd54f;
    filter: drop-shadow(0 0 4px rgba(255, 213, 79, 0.5));
}
.fav-btn.is-fav:hover { color: #ffb300; }

/* Event row */
.card-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}
.card-event-text {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.card-date {
    color: var(--text-dim);
    font-size: 11px;
    font-feature-settings: "tnum";
    margin-left: auto;
}

.decision-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.decision-badge.yes { background: var(--green-soft); color: var(--green); }
.decision-badge.uncertain { background: var(--amber-soft); color: var(--amber); }
.decision-badge.no { background: var(--red-soft); color: var(--red); }

/* Price block — Amazon's price hero */
.price-block { display: flex; flex-direction: column; gap: 4px; }

.price-current-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.price-current {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    font-feature-settings: "tnum";
    line-height: 1;
}
.price-change {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-feature-settings: "tnum";
}
.price-change.up { color: var(--green); background: var(--green-soft); }
.price-change.down { color: var(--red); background: var(--red-soft); }
.price-change.neutral { color: var(--text-muted); background: rgba(136, 153, 166, 0.1); }

.price-was {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

/* Per-card refresh button — small icon next to current price */
.card-refresh-btn {
    margin-left: auto;
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.card-refresh-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(79, 195, 247, 0.08); }
.card-refresh-btn:active { transform: scale(0.92); }
.card-refresh-btn.spinning svg { animation: spin-rotate 0.8s linear infinite; color: var(--accent); }
.price-was-num {
    color: var(--text-dim);
    text-decoration: line-through;
    font-feature-settings: "tnum";
}

/* Deal block — Amazon's "Limited time deal" highlight */
.deal-block {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.06) 0%, rgba(102, 187, 106, 0.04) 100%);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-feature-settings: "tnum";
}
.deal-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.deal-value { color: var(--text); font-weight: 700; }
.deal-value.deal-target { color: var(--green); }
.deal-value.deal-stop { color: var(--red); }
.upside-pct {
    color: var(--green);
    background: var(--green-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    margin-left: 4px;
}

/* Footer with CTA */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    font-size: 11px;
}
.watch-period {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.card-cta {
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.15s;
}

/* Legacy change/decision-badge support (used in history table) */
.change.up { color: var(--green); background: var(--green-soft); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.change.down { color: var(--red); background: var(--red-soft); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.change.neutral { color: var(--text-muted); background: rgba(136, 153, 166, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 700; }

/* ============================================================
   Chart
   ============================================================ */
.chart-container {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    height: 350px;
}

/* ============================================================
   History Table
   ============================================================ */
.table-wrapper {
    overflow-x: auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
}

th {
    background: var(--bg-elev-2);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.6px;
    position: sticky;
    top: 0;
}

td { font-feature-settings: "tnum"; }

tbody tr {
    /* Only the "View" button opens details now — no cursor:pointer on the row */
    transition: background 0.1s;
}

tbody tr:hover { background: rgba(79, 195, 247, 0.05); }
tbody tr:last-child td { border-bottom: none; }

/* Analysis History — restructured columns:
   Score | Rating | Company (name + symbol) | Current (price + change%) | Entry | Date | Event (wraps) | View
*/
.col-company {
    max-width: 200px;
    white-space: normal;
    line-height: 1.3;
}
.cell-company-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cell-symbol {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin-top: 2px;
}
.col-current {
    white-space: normal;
    line-height: 1.25;
}
.cell-current-price { font-weight: 600; }
.cell-change {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}
.cell-change.up { color: var(--green); }
.cell-change.down { color: var(--red); }
.cell-change.neutral { color: var(--text-muted); }
.col-date { color: var(--text-muted); font-size: 12px; }
/* Event: single line by default, truncated with ellipsis. Tap to expand
   inline. Hover shows the full text via native title tooltip. */
.col-event {
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
    position: relative;
    transition: max-width 0.2s ease, white-space 0s;
}
.col-event:hover { color: var(--accent); }
.col-event.expanded {
    max-width: none;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 14px;
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 26px;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.close-btn:hover { color: var(--text); background: var(--bg-elev-2); }

.modal-content h3 {
    color: var(--accent);
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.modal-content .detail-section { margin-bottom: 18px; }
.modal-content .detail-section h4 {
    color: var(--text);
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.modal-content .detail-section p { color: var(--text-muted); line-height: 1.6; font-size: 14px; }
.modal-content .detail-section strong { color: var(--text); }
.modal-content .detail-section ul { list-style: none; padding: 0; }
.modal-content .detail-section ul li {
    color: var(--text-muted);
    padding: 5px 0 5px 18px;
    position: relative;
    line-height: 1.5;
}
.modal-content .detail-section ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 11px;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

/* ============================================================
   Score & Rating Badges
   ============================================================ */
.score-badge {
    display: inline-flex;
    align-items: baseline;
    font-size: 16px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    min-width: 44px;
    justify-content: center;
    font-feature-settings: "tnum";
}

.score-badge .score-max { font-size: 0.55em; font-weight: 500; opacity: 0.6; margin-left: 2px; }

.score-badge.must-buy { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.score-badge.strong-buy { background: var(--green-soft); color: var(--green); }
.score-badge.buy { background: rgba(79, 195, 247, 0.18); color: var(--accent); }
.score-badge.hold { background: var(--amber-soft); color: var(--amber); }
.score-badge.avoid { background: var(--red-soft); color: var(--red); }

.rating-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.rating-tag.must-buy { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.rating-tag.strong-buy { background: var(--green-soft); color: var(--green); }
.rating-tag.buy { background: rgba(79, 195, 247, 0.18); color: var(--accent); }
.rating-tag.hold { background: var(--amber-soft); color: var(--amber); }
.rating-tag.avoid { background: var(--red-soft); color: var(--red); }

.score-bar-section {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    gap: 14px;
}

/* ============================================================
   Logs
   ============================================================ */
.logs-container {
    background: #06090d;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.logs-container pre {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.log-line-info { color: var(--accent); }
.log-line-warn { color: var(--amber); }
.log-line-error { color: var(--red); }
.log-line-pause { color: var(--amber); font-weight: 700; }
.log-line-resume { color: var(--green); font-weight: 700; }

/* ============================================================
   Buying Suggestion
   ============================================================ */
.buy-suggestion {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.08) 0%, rgba(102, 187, 106, 0.05) 100%);
    border: 1px solid rgba(79, 195, 247, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-top: 12px;
}

.buy-suggestion h4 {
    color: var(--accent);
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.buy-suggestion .buy-price { font-size: 22px; font-weight: 800; color: var(--green); font-feature-settings: "tnum"; letter-spacing: -0.5px; }
.buy-suggestion .buy-range { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

/* ============================================================
   Scrollbar (desktop)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================================
   Responsive — Tablet
   ============================================================ */
@media (max-width: 1100px) {
    .ticker { padding: 8px 14px; }
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 768px) {
    :root { --header-h: 60px; }   /* mobile header is ~12+32+12 + a bit */
    header {
        padding: 12px 14px;
        gap: 8px;
    }
    .brand-mark { width: 32px; height: 32px; font-size: 10px; }
    .brand-text h1 { font-size: 14px; }
    .brand-sub { font-size: 10px; }
    .header-actions { gap: 6px; }
    /* :not(.status-pulse) so the clickable LIMIT pill keeps its pill shape
       instead of being squeezed into a 38px icon square. */
    .header-actions button:not(.status-pulse) {
        padding: 8px 10px;
        min-height: 38px;
        font-size: 12px;
    }
    .header-actions .btn-text { display: none; }  /* icon-only buttons on mobile */
    .header-actions button:not(.status-pulse) { padding: 8px; width: 38px; justify-content: center; }
    .status-badge { padding: 4px 8px; font-size: 10px; }
    /* On narrow phones, drop the "RESUME" word from the LIMIT pill but keep
       the play-arrow icon so it still reads as tappable. */
    .pulse-cta { display: none; }
    .status-pulse.limit { padding: 4px 9px 4px 8px; gap: 5px; }
    .status-pulse.limit svg { margin-left: 0; }

    .ticker-strip { padding: 10px 14px; }
    .ticker { padding: 6px 14px; gap: 8px; }
    .ticker-value { font-size: 16px; }
    .ticker-value-name { font-size: 12px; max-width: 80px; }
    .ticker-label { font-size: 9px; letter-spacing: 0.5px; }
    .ticker-icon { font-size: 14px; }

    /* Dock — compact on mobile so all 4 tiles fit edge-to-edge */
    .dock { bottom: calc(10px + env(safe-area-inset-bottom, 0)); }
    .dock-inner { padding: 6px; gap: 2px; }
    .dock-tile { padding: 7px 11px; gap: 7px; }
    .dock-icon { width: 24px; height: 24px; }
    .dock-icon svg { width: 16px; height: 16px; }
    .dock-value { font-size: 13px; }
    .dock-label { font-size: 9px; }
    .score-distribution { width: 24px; height: 14px; margin-left: 2px; }

    .control-panel {
        margin: 12px 14px 14px;
        /* top inherits from --header-h (60px on mobile, set above) */
    }
    .filter-controls { padding: 10px 12px; gap: 8px; }
    .filter-row { gap: 8px; flex-wrap: wrap; }

    .ticker { padding: 10px 12px; gap: 8px; }
    .ticker-bar { width: 2px; height: 22px; }
    .ticker-value { font-size: 16px; }
    .ticker-value-name { font-size: 12px; max-width: 90px; }
    .ticker-label { font-size: 9px; letter-spacing: 0.5px; }
    .score-distribution { width: 26px; height: 16px; margin-left: 4px; }

    /* Filter toolbar stacks: search full width, sort+clear share row */
    .filter-toolbar { flex-wrap: wrap; }
    .filter-toolbar .search-wrap { flex: 1 0 100%; }
    .filter-toolbar #sort-select { flex: 1; }

    /* Segmented controls scroll horizontally on mobile if too wide */
    .seg-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -2px;
        padding: 0 2px;
    }
    .seg-group::-webkit-scrollbar { display: none; }
    .seg-label { flex-shrink: 0; }
    .seg { flex-shrink: 0; padding: 7px 12px; }

    .pagination { flex-direction: column; }
    .btn-secondary { width: 100%; }

    /* Horizontal scrolling chip rows on mobile = saves vertical space */
    .chip-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0;
        margin: -4px 0;
        width: 100%;
    }
    .chip-group::-webkit-scrollbar { display: none; }
    .chip-label { flex-shrink: 0; }
    .chip { flex-shrink: 0; }

    .result-counter {
        margin-left: 0;
        align-self: flex-start;
        font-size: 10px;
    }

    .section { padding: 0 14px 18px; }
    .section h2 { font-size: 14px; margin-bottom: 10px; }
    .section-header { margin-bottom: 10px; gap: 8px; }
    .seg-group.seg-tight .seg { padding: 4px 10px; font-size: 10px; }
    .favorites-grid { grid-template-columns: 1fr; gap: 10px; }
    .fav-chart-card { padding: 12px; }
    .fav-chart-canvas-wrap { height: 120px; }

    .watches-grid { grid-template-columns: 1fr; gap: 10px; }
    .watch-card { padding: 14px; gap: 10px; }
    .card-title { font-size: 15px; }
    .price-current { font-size: 22px; }
    .price-change { font-size: 12px; }
    .deal-block { padding: 8px 10px; }
    .deal-row { font-size: 12px; }
    .card-meta { font-size: 10px; }
    .score-badge { font-size: 14px; padding: 3px 8px; }

    .chart-container { height: 280px; padding: 14px; }

    th, td { padding: 9px 10px; font-size: 12px; }
    th { font-size: 9px; }

    .modal { padding: 12px; }
    .modal-content { padding: 20px 18px; max-height: 90vh; border-radius: var(--radius-md); }
    .modal-content h3 { font-size: 18px; }
    .score-bar-section { padding: 12px; gap: 10px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .ticker { padding: 6px 10px; gap: 6px; }
    .ticker-value { font-size: 14px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}