/* Reset & Variables */
:root {
    color-scheme: dark;
    --bg-primary: #080c14;
    --bg-secondary: #0f172a;
    --bg-tertiary: #1e293b;
    --bg-card: rgba(15, 23, 42, 0.65);
    /* Veil drawn over a chart while it loads. Kept opaque enough to read as
       'busy' without hiding that a chart is there. */
    --chart-veil: rgba(8, 12, 20, 0.85);
    --slider-track: rgba(255, 255, 255, 0.14);
    --tm-limit: #38bdf8;   /* on a dark panel this reads well as-is */
    --tm-stop: #f87171;
    --tm-market: #10b981;      /* Market Order title + its chart line */
    --tm-smart-buy: #f97316;
    --tm-smart-sell: #f97316;  /* orange, matching the Smart treatment */
    --tm-peak: #a855f7;        /* Smart Sell "Price Peak" control and its line */
    --tm-bounce: #a78bfa;      /* Smart Buy rebound - its own colour, not MAX orange */
    --tm-sell-line: #22c55e;   /* Smart Sell "Sell" control and its line */
    --card-bg: rgba(24, 24, 38, 0.95);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(99, 102, 241, 0.35);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --accent: #d946ef;
    --accent-primary: #818cf8;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --success-border: rgba(16, 185, 129, 0.3);
    --danger: #f43f5e;
    --danger-light: rgba(244, 63, 94, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    
    --sidebar-width: 260px;
    --border-radius: 12px;
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Overrides */
[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;
    --chart-veil: rgba(255, 255, 255, 0.88);
    --slider-track: rgba(15, 23, 42, 0.16);
    --tm-limit: #0284c7;   /* darker, so it holds up on white and on the chart */
    --tm-stop: #dc2626;
    --tm-market: #047857;      /* the Buy button's dark green */
    --tm-smart-buy: #ea580c;
    --tm-smart-sell: #ea580c;
    --tm-peak: #9333ea;
    --tm-bounce: #7c3aed;
    --tm-sell-line: #15803d;
    --card-bg: #ffffff;
    --border-color: #cbd5e1;
    --border-hover: #818cf8;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --accent-primary: #4f46e5;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 4px 10px -2px rgba(0, 0, 0, 0.02);
    
    --success: #15803d;
    --success-light: rgba(21, 128, 61, 0.12);
    --success-border: rgba(21, 128, 61, 0.3);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .account-dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .account-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
}

/* App Container Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    position: fixed;
    height: 100vh;
    z-index: 100;
}

/* Compact / Narrow Sidebar on Desktop (Width <= 1300px, OR Aspect Ratio between 1.1 and 1.5) */
@media (min-width: 1025px) and (max-width: 1300px), 
       (min-width: 769px) and (min-aspect-ratio: 11/10) and (max-width: 1300px) {
    :root {
        --sidebar-width: 80px !important;
    }
    .sidebar {
        padding: 2rem 0.5rem !important;
        align-items: center !important;
    }
    .sidebar-brand h2 {
        display: none !important;
    }
    .sidebar-brand {
        margin-bottom: 2rem !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .sidebar-menu .menu-item > span:not(.radar-unread-badge) {
        display: none !important;
    }
    .sidebar-menu .menu-item {
        justify-content: center !important;
        padding: 0.8rem !important;
        position: relative !important;
    }
    .sidebar-menu .menu-item .radar-unread-badge {
        position: absolute !important;
        top: 0px !important;
        right: -3px !important;
    }
    .sidebar-footer {
        display: none !important;
    }
    .main-content {
        padding: 1rem 0.75rem !important;
    }
    .dashboard-split {
        gap: 0.75rem !important;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.brand-icon {
    width: 42px;
    height: 42px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-icon img.app-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.sidebar-brand h2 {
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.sidebar-brand .highlight {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 500;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    position: relative;
}

.sidebar-menu .menu-item .radar-unread-badge {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
}

.menu-item i {
    font-size: 1.15rem;
}

.menu-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.02);
}

.menu-item.active {
    color: white;
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}

.sidebar-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.env-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.env-badge .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.env-badge.simulation {
    background-color: var(--warning-light);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.env-badge.simulation .indicator {
    background-color: var(--warning);
    box-shadow: 0 0 8px var(--warning);
}

.env-badge.demo {
    background-color: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}

.env-badge.demo .indicator {
    background-color: #ffffff;
    box-shadow: 0 0 8px #ffffff;
}

.env-badge.live {
    background-color: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.env-badge.live .indicator {
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: pulse 2s infinite;
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    margin-left: var(--sidebar-width);
    padding: 1rem 1.75rem;
    min-height: 100vh;
    min-width: 0; /* Prevents flex items from expanding beyond parent boundaries */
    max-width: calc(100vw - var(--sidebar-width));
    box-sizing: border-box;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.header-title {
    flex: 0 1 auto;
    max-width: 290px;
    min-width: 0;
}

.header-title h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-title .subtitle {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Header Financial Summary (Total Value & Free Cash) */
.header-financial-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.header-stat-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    white-space: nowrap;
}

.header-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.header-stat-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.header-stat-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
}

.header-stat-val.cash-val {
    color: var(--success);
}

.header-return-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-return-badge.positive {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.header-return-badge.negative {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.header-stat-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

/* Header Account Selector Dropdown */
.header-account-selector, .account-selector-dropdown {
    position: relative;
    user-select: none;
}

.account-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.account-dropdown-trigger:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.selected-account-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.selected-account-info {
    display: flex;
    flex-direction: column;
}

.account-type-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.account-name-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.account-dropdown-chevron {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.header-account-selector.open .account-dropdown-chevron {
    transform: rotate(180deg);
}

/* Account Dropdown Menu */
.account-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    background: var(--card-bg, #161626);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease;
}

.account-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.account-option.active {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.account-option-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.account-option-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.account-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-sub {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.account-check-icon {
    font-size: 0.8rem;
    color: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.account-option.active .account-check-icon {
    opacity: 1;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 30px;
}

.avatar {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Tab Content Visibility */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.tab-content.active {
    display: block;
}

/* Cards & Generic Layouts */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
}

.card:hover {
    border-color: var(--border-hover);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.right-col .card-header h3,
.right-col .quote-header h3 {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}

/* Stats Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    transition: var(--transition-smooth);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.1);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.stat-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

.stat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.footer-label {
    color: var(--text-muted);
}

.footer-note {
    color: var(--text-secondary);
}

/* Badges & Text Formats */
.change-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 30px;
    font-weight: 600;
}

.change-badge.positive {
    background-color: var(--success-light);
    color: var(--success);
}

.change-badge.negative {
    background-color: var(--danger-light);
    color: var(--danger);
}

.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    opacity: 0.95;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-icon:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background-color: rgba(255, 255, 255, 0.06);
}

/* The wrapper must NOT be the offset parent: the badge is positioned against
   the button, so it lands on the same corner as the notification bell's count
   rather than floating off the icon's bottom-right. */
.theme-icon-auto-wrapper {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#btn-theme-toggle,
#btn-theme-toggle-mobile {
    position: relative;
}

/* Same pill as .notif-bell-badge - size, font and ring - in the app's blue
   rather than the alert red, so the two header badges read as a set. */
.theme-auto-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary, #6366f1);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card, #0f172a);
    pointer-events: none;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary-light);
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.btn-tab {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}

.btn-tab.active {
    background-color: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* "Go to Now" jump button — visually distinct from the range toggles */
.btn-go-to-now {
    margin-left: 0.5rem;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: var(--primary-light) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    transition: background 0.2s, transform 0.15s;
}
.btn-go-to-now:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    transform: translateX(2px);
}
.btn-go-to-now i {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Charts styles */
.dashboard-chart-section {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.right-col-header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background: var(--bg-primary, #0f172a) !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.right-col-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.selected-stock-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: var(--card-bg, #181826);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius, 12px);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#right-col-container.has-selection .selected-stock-header {
    display: flex !important;
}

#selected-stock-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

#selected-stock-exchange {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.right-col {
    overflow-x: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.chart-card {
    padding: 1.5rem;
    margin-bottom: 0 !important;
}

/* Quote Card Styles */
.quote-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    margin-bottom: 0 !important;
    justify-content: flex-start;
}

.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.quote-header h3 {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-sim {
    background-color: var(--warning-light, rgba(245, 158, 11, 0.15));
    color: var(--warning, #f59e0b);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-live {
    background-color: var(--success-light, rgba(16, 185, 129, 0.15));
    color: var(--success, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-post-market,
.badge-after-market,
.badge-after-hours {
    background-color: rgba(192, 132, 252, 0.18);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.45);
}

.badge-overnight {
    background-color: rgba(45, 212, 191, 0.18);
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.45);
}

.badge-pre-market {
    background-color: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.badge-at-close {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #94a3b8);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}

[data-theme="light"] .badge-live {
    background-color: rgba(21, 128, 61, 0.12);
    color: #15803d;
    border: 1px solid rgba(21, 128, 61, 0.3);
    font-weight: 700;
}

[data-theme="light"] .badge-post-market,
[data-theme="light"] .badge-after-market,
[data-theme="light"] .badge-after-hours {
    background-color: rgba(147, 51, 234, 0.12);
    color: #7e22ce;
    border: 1px solid rgba(147, 51, 234, 0.35);
    font-weight: 700;
}

[data-theme="light"] .badge-overnight {
    background-color: rgba(13, 148, 136, 0.15);
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.4);
    font-weight: 700;
}

[data-theme="light"] .badge-pre-market {
    background-color: rgba(180, 83, 9, 0.12);
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.3);
    font-weight: 700;
}

[data-theme="light"] .badge-at-close {
    background-color: rgba(0, 0, 0, 0.06);
    color: #475569;
    border: 1px solid rgba(0, 0, 0, 0.14);
    font-weight: 700;
}

[data-theme="light"] #ai-cache-timestamp {
    font-weight: 700 !important;
}

.quote-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.quote-badge-wrapper button.badge {
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.quote-badge-wrapper button.badge:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.quote-badge-wrapper button.badge:active {
    transform: translateY(0);
}

.quote-feed-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 230px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
    font-size: 0.74rem;
    line-height: 1.45;
    color: #f8fafc;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
    animation: popoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

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

[data-theme="light"] .quote-feed-popover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

.quote-feed-popover .popover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .quote-feed-popover .popover-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.quote-feed-popover .popover-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quote-feed-popover .popover-row:first-child {
    padding-top: 0;
}

.quote-feed-popover .popover-row span {
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}

[data-theme="light"] .quote-feed-popover .popover-row span {
    color: #64748b;
}

.quote-feed-popover .popover-row strong {
    color: #f8fafc;
    font-weight: 700;
    text-align: right;
}

[data-theme="light"] .quote-feed-popover .popover-row strong {
    color: #0f172a;
}

.quote-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

.quote-ticker-group {
    display: flex;
    flex-direction: column;
}

.quote-ticker {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    line-height: 1.1;
    color: var(--text-primary);
}

.quote-source-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.quote-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.quote-price {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.quote-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: auto;
}

.quote-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.quote-stat-item .label {
    color: var(--text-secondary);
}

.quote-stat-item .value {
    font-weight: 600;
    color: var(--text-primary);
}

.chart-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-ticker-badge {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    background-color: transparent;
    border: none;
}

#chart-container {
    width: 100%;
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    position: relative;
    touch-action: pan-y pinch-zoom;
}

.modal-chart-container {
    width: 100%;
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    position: relative;
    touch-action: pan-y pinch-zoom;
}

#chart-container a,
#chart-container [class*="logo"],
#chart-container [class*="watermark"],
#modal-chart-container a,
#modal-chart-container [class*="logo"],
#modal-chart-container [class*="watermark"],
#ai-projection-chart-container a,
#ai-projection-chart-container [class*="logo"],
#ai-projection-chart-container [class*="watermark"],
#ai-backtest-chart-container a,
#ai-backtest-chart-container [class*="logo"],
#ai-backtest-chart-container [class*="watermark"],
[id*="ai-projection-chart"] a,
[id*="ai-projection-chart"] [class*="logo"],
[id*="ai-projection-chart"] [class*="watermark"],
[id*="ai-backtest-chart"] a,
[id*="ai-backtest-chart"] [class*="logo"],
[id*="ai-backtest-chart"] [class*="watermark"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Was a hardcoded near-black, which read as a big dark rectangle dropped over
       a white chart in light mode. --chart-veil carries the dark value unchanged
       and flips to white for the light theme; deriving it from --bg-card instead
       would have quietly thinned the dark one, since that token is itself
       semi-transparent. */
    background-color: var(--chart-veil, rgba(8, 12, 20, 0.85));
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
    transition: var(--transition-smooth);
    opacity: 0;
    pointer-events: none;
}

.chart-loading-overlay.active {
    display: flex !important;
    opacity: 1;
    pointer-events: all;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.1);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Tables styling */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dashboard-table th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-table td {
    padding: 1.15rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    vertical-align: middle;
}

.dashboard-table tbody tr {
    transition: var(--transition-smooth);
}

.dashboard-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.015);
}

.dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.stock-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stock-symbol {
    font-weight: 700;
    color: var(--text-primary);
}

.stock-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Forms styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    padding-right: 2.75rem !important;
    cursor: pointer;
}

select.form-control option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.form-help {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Settings Layout */
.settings-container {
    display: block;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.settings-card {
    margin-bottom: 0;
}

.settings-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    font-weight: 400;
}

.input-with-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-toggle .form-control {
    flex: 1;
    padding-right: 2.75rem;
}

.btn-icon-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-toggle:hover {
    color: var(--primary-light);
}

.badge-optional {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-light);
    vertical-align: middle;
    margin-left: 0.35rem;
    text-transform: uppercase;
}

.config-key-status {
    font-size: 0.8rem;
    color: var(--success);
    margin-left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.setup-list {
    margin-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.setup-list li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.security-note {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
}

.security-icon {
    font-size: 1.5rem;
    color: var(--primary-light);
    margin-top: 0.2rem;
}

.security-note h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.security-note p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.highlight-inline {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
}

/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 5;
}

.search-box > i:first-child,
.search-box > i.fa-magnifying-glass {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 3;
}

.search-box input {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.5rem;
    padding-right: 2.2rem !important; /* Space for clear (x) button */
    min-width: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
    cursor: text !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.search-box input:focus {
    border-color: var(--primary);
}

/* Search Box Clear (X) Button */
.search-clear-btn {
    position: absolute !important;
    right: 0.6rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-size: 0.72rem !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    z-index: 10 !important;
    line-height: 1 !important;
}

.search-clear-btn i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    font-size: 0.72rem !important;
    color: inherit !important;
    display: inline-block !important;
    pointer-events: none !important;
    line-height: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .search-clear-btn {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
}

[data-theme="light"] .search-clear-btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #0f172a !important;
}

/* Hide native WebKit / Blink search input clear buttons across all browsers */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Notifications */
.notification-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: auto;
}

.toast {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    min-width: 300px;
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: var(--transition-smooth);
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--primary); }
/* A key test that connected but did not honour JSON mode is not a pass and not a
   failure; without this it rendered as a plain info toast and read as success. */
.toast.warning { border-left: 4px solid var(--warning, #f59e0b); }

.toast-icon {
    font-size: 1.2rem;
}
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.toast.info .toast-icon { color: var(--primary-light); }
.toast.warning .toast-icon { color: var(--warning, #f59e0b); }

.toast-content {
    font-size: 0.85rem;
    font-weight: 500;
    flex-grow: 1;
}

.toast-close {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.toast-close:hover {
    color: white;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Flex layout utilities */
.flex-column {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .md-row {
        flex-direction: row !important;
    }
    .md-mt-0 {
        margin-top: 0 !important;
    }
}

@media (min-width: 1024px) {
    .lg-row {
        flex-direction: row !important;
    }
    .lg-mt-0 {
        margin-top: 0 !important;
    }
    .lg-mb-0 {
        margin-bottom: 0 !important;
    }
}

.align-start {
    align-items: flex-start;
}

.lg-align-center {
    @media (min-width: 1024px) {
        align-items: center;
    }
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.gap-2 {
    gap: 0.5rem;
}

#browse-catalog-panel {
    gap: 0.35rem !important;
    overflow-y: hidden !important;
}

/* Hide Title Group Completely */
.browse-catalog-panel .card-title-group,
#browse-catalog-panel .card-title-group {
    display: none !important;
}

.browse-catalog-panel .card.section-card,
#browse-catalog-panel .card.section-card {
    margin-bottom: 0 !important;
    padding: 0.75rem 1rem 0.4rem 1rem !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 200 !important;
    overflow: visible !important;
}

.browse-catalog-panel .card-header,
#browse-catalog-panel .card-header {
    padding-bottom: 0 !important;
    margin-bottom: 0.4rem !important;
    position: relative !important;
    z-index: 201 !important;
    overflow: visible !important;
}

.browse-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 2px 0 4px 0 !important;
}

.browse-controls::-webkit-scrollbar {
    display: none !important;
}

.browse-controls .search-box,
.browse-controls .browse-search-box {
    flex: 1 1 200px !important;
    min-width: 140px !important;
    max-width: 100% !important;
}

.browse-controls .select-compact {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 175px !important;
    height: 38px !important;
    padding: 0.45rem 1.85rem 0.45rem 0.75rem !important;
    background-position: right 0.65rem center !important;
    background-size: 0.85rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Browse Market Search Box (Harmonized with Watchlist search box) */
.browse-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 200px !important;
    max-width: 100% !important;
    min-width: 140px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: 38px !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

.browse-search-box > i.fa-magnifying-glass,
.browse-search-box #btn-browse-search-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-secondary) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 3 !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.browse-search-box input#browse-search {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding-left: 2.5rem !important;
    padding-right: 3.4rem !important;
    min-width: 0 !important;
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.85rem !important;
    outline: none !important;
    transition: var(--transition-smooth) !important;
    cursor: text !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.browse-search-box input#browse-search:focus {
    border-color: var(--primary) !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

.browse-search-box input#browse-search::placeholder {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
}

.browse-search-clear-btn {
    position: absolute !important;
    right: 28px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-size: 0.72rem !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
    line-height: 1 !important;
}

.browse-search-clear-btn i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    font-size: 0.72rem !important;
    color: inherit !important;
    pointer-events: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.browse-search-clear-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Editable Combobox Search Bar & Dropdown */
.combobox-container {
    position: relative !important;
}

.browse-search-dropdown-btn {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
    z-index: 4 !important;
}

.browse-search-dropdown-btn:hover {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.browse-search-dropdown-btn i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    color: inherit !important;
    font-size: 0.75rem !important;
    pointer-events: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

.browse-search-dropdown-btn.is-open i {
    transform: rotate(180deg) !important;
}

/* Combobox Dropdown Menu (Attached directly beneath search box) */
.combobox-dropdown-menu {
    position: absolute !important;
    top: 48px;
    left: 0;
    min-width: 320px;
    max-width: 100%;
    background: #11161f !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    z-index: 99999 !important;
    max-height: 280px !important;
    overflow: hidden !important;
    display: none !important;
    flex-direction: column !important;
    animation: comboboxFadeIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

.combobox-dropdown-menu.is-open {
    display: flex !important;
}

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

.combobox-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.combobox-header-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.combobox-header-title i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    color: #38bdf8 !important;
    font-size: 0.75rem !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.combobox-clear-btn {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.combobox-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.combobox-dropdown-items {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: 220px;
    padding: 4px 0;
}

.combobox-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
}

.combobox-item:hover,
.combobox-item.is-selected {
    background: rgba(255, 255, 255, 0.07);
}

.combobox-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.combobox-item-logo-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.combobox-item-logo-img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
}

.combobox-item-ticker {
    font-weight: 700;
    font-size: 0.84rem;
    color: #ffffff;
    white-space: nowrap;
}

.combobox-item-name {
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 2px;
}

.combobox-item-query-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.combobox-item-query-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combobox-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 6px;
}

.combobox-item-change {
    font-size: 0.72rem;
    font-weight: 600;
}

.combobox-item-change.positive { color: #22c55e; }
.combobox-item-change.negative { color: #ef4444; }
.combobox-item-change.neutral { color: #94a3b8; }

.combobox-item-remove-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.combobox-item-remove-btn i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    color: inherit !important;
    font-size: 0.72rem !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.combobox-item-remove-btn:hover {
    opacity: 1;
    color: #ef4444;
}

.combobox-empty-note {
    padding: 1rem 0.8rem;
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.combobox-empty-note i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Light Mode Combobox Dropdown Overrides */
[data-theme="light"] .combobox-dropdown-menu,
.light-theme .combobox-dropdown-menu,
.light-mode .combobox-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .combobox-dropdown-header,
.light-theme .combobox-dropdown-header,
.light-mode .combobox-dropdown-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .combobox-header-title,
.light-theme .combobox-header-title,
.light-mode .combobox-header-title {
    color: #64748b !important;
}

[data-theme="light"] .combobox-clear-btn,
.light-theme .combobox-clear-btn,
.light-mode .combobox-clear-btn {
    color: #64748b !important;
}

[data-theme="light"] .combobox-clear-btn:hover,
.light-theme .combobox-clear-btn:hover,
.light-mode .combobox-clear-btn:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1) !important;
}

[data-theme="light"] .combobox-item,
.light-theme .combobox-item,
.light-mode .combobox-item {
    color: #0f172a !important;
}

[data-theme="light"] .combobox-item:hover,
.light-theme .combobox-item:hover,
.light-mode .combobox-item:hover,
[data-theme="light"] .combobox-item.is-selected,
.light-theme .combobox-item.is-selected,
.light-mode .combobox-item.is-selected {
    background: #f1f5f9 !important;
}

[data-theme="light"] .combobox-item-ticker,
.light-theme .combobox-item-ticker,
.light-mode .combobox-item-ticker {
    color: #0f172a !important;
}

[data-theme="light"] .combobox-item-name,
.light-theme .combobox-item-name,
.light-mode .combobox-item-name {
    color: #64748b !important;
}

[data-theme="light"] .combobox-item-query-text,
.light-theme .combobox-item-query-text,
.light-mode .combobox-item-query-text {
    color: #0f172a !important;
}

[data-theme="light"] .combobox-item-query-icon,
.light-theme .combobox-item-query-icon,
.light-mode .combobox-item-query-icon {
    color: #64748b !important;
}

[data-theme="light"] .combobox-item-logo-box,
.light-theme .combobox-item-logo-box,
.light-mode .combobox-item-logo-box {
    background: #e2e8f0 !important;
}

[data-theme="light"] .combobox-item-remove-btn,
.light-theme .combobox-item-remove-btn,
.light-mode .combobox-item-remove-btn {
    color: #94a3b8 !important;
}

[data-theme="light"] .combobox-item-remove-btn:hover,
.light-theme .combobox-item-remove-btn:hover,
.light-mode .combobox-item-remove-btn:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1) !important;
}

[data-theme="light"] .combobox-empty-note,
.light-theme .combobox-empty-note,
.light-mode .combobox-empty-note {
    color: #64748b !important;
}

[data-theme="light"] .browse-search-dropdown-btn,
.light-theme .browse-search-dropdown-btn,
.light-mode .browse-search-dropdown-btn {
    color: #64748b !important;
}

[data-theme="light"] .browse-search-dropdown-btn:hover,
.light-theme .browse-search-dropdown-btn:hover,
.light-mode .browse-search-dropdown-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Light Theme Search Box Overrides (Watchlist & Browse Market) */
[data-theme="light"] .search-box input,
.light-theme .search-box input,
.light-mode .search-box input,
[data-theme="light"] #browse-search,
.light-theme #browse-search,
.light-mode #browse-search,
[data-theme="light"] #watchlist-search,
.light-theme #watchlist-search,
.light-mode #watchlist-search,
[data-theme="light"] .browse-search-box input,
.light-theme .browse-search-box input,
.light-mode .browse-search-box input {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
}

[data-theme="light"] .search-box input:focus,
.light-theme .search-box input:focus,
.light-mode .search-box input:focus,
[data-theme="light"] #browse-search:focus,
.light-theme #browse-search:focus,
.light-mode #browse-search:focus,
[data-theme="light"] #watchlist-search:focus,
.light-theme #watchlist-search:focus,
.light-mode #watchlist-search:focus,
[data-theme="light"] .browse-search-box input:focus,
.light-theme .browse-search-box input:focus,
.light-mode .browse-search-box input:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
}

[data-theme="light"] .search-box input::placeholder,
.light-theme .search-box input::placeholder,
.light-mode .search-box input::placeholder,
[data-theme="light"] #browse-search::placeholder,
.light-theme #browse-search::placeholder,
.light-mode #browse-search::placeholder,
[data-theme="light"] #watchlist-search::placeholder,
.light-theme #watchlist-search::placeholder,
.light-mode #watchlist-search::placeholder,
[data-theme="light"] .browse-search-box input::placeholder,
.light-theme .browse-search-box input::placeholder,
.light-mode .browse-search-box input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

[data-theme="light"] .search-box i.fa-magnifying-glass,
.light-theme .search-box i.fa-magnifying-glass,
.light-mode .search-box i.fa-magnifying-glass,
[data-theme="light"] #btn-browse-search-icon,
.light-theme #btn-browse-search-icon,
.light-mode #btn-browse-search-icon,
[data-theme="light"] .browse-search-box > i,
.light-theme .browse-search-box > i,
.light-mode .browse-search-box > i {
    color: #64748b !important;
}

[data-theme="light"] .search-clear-btn,
.light-theme .search-clear-btn,
.light-mode .search-clear-btn,
[data-theme="light"] .browse-search-clear-btn,
.light-theme .browse-search-clear-btn,
.light-mode .browse-search-clear-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #475569 !important;
}

[data-theme="light"] .search-clear-btn:hover,
.light-theme .search-clear-btn:hover,
.light-mode .search-clear-btn:hover,
[data-theme="light"] .browse-search-clear-btn:hover,
.light-theme .browse-search-clear-btn:hover,
.light-mode .browse-search-clear-btn:hover {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}

/* Category Pills Bar */
.category-pills-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    width: 100%;
    padding: 0.35rem 0 0.45rem 0;
    margin: 0 0 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.category-pills-bar::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.category-pill {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.category-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}
.category-pill.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.1);
}

/* Performance Sub-Filters Bar */
.subfilter-pills-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    width: 100%;
    padding: 0.1rem 0 0.2rem 0;
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: none;
}
.subfilter-pills-bar::-webkit-scrollbar {
    display: none;
}

.subfilter-pill {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.subfilter-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}
.subfilter-pill.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.browse-grid,
#browse-catalog-panel .browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem !important;
    padding-top: 0 !important;
    padding-bottom: 1rem;
    flex: 1 1 auto;
    overflow-y: auto;
    align-content: start;
    scrollbar-width: thin;
}

/* Glassmorphic Value Categorized Stock Cards */
.browse-stock-card {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
}

/* Owned Stock Overlapping Corner Badge */
.owned-badge {
    position: absolute;
    top: -12px;
    left: 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.owned-badge i {
    font-size: 0.75rem;
}

/* 75% Bigger Left-Aligned Logo (~60px x 60px) */
.browse-logo-wrap-large {
    width: 54px;
    height: 54px;
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.browse-card-logo-lg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 10px !important;
    transform: none;
    transition: transform 0.2s ease;
}

.browse-card-logo-fallback-lg {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stock-company-title-full {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* High Value Card: Crimson / Red Tint */
.browse-stock-card.val-high {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(244, 63, 94, 0.2);
}

.browse-stock-card.val-high:hover {
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 12px 30px rgba(244, 63, 94, 0.12);
    transform: translateY(-4px);
}

/* Normal Value Card: Emerald / Green Tint */
.browse-stock-card.val-normal {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.browse-stock-card.val-normal:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.12);
    transform: translateY(-4px);
}

/* Low Value Card: Cobalt / Blue Tint */
.browse-stock-card.val-low {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

.browse-stock-card.val-low:hover {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.12);
    transform: translateY(-4px);
}

/* Stock Card Content styles */
.browse-stock-card .card-top {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.browse-stock-card .stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.browse-logo-wrap {
    width: 62px !important;
    height: 62px !important;
    flex-shrink: 0;
    position: relative;
    border-radius: 14px !important;
}

.browse-card-logo {
    width: 62px !important;
    height: 62px !important;
    border-radius: 14px !important;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    padding: 4px;
    box-sizing: border-box;
}

.browse-card-logo-fallback {
    width: 62px !important;
    height: 62px !important;
    border-radius: 14px !important;
    background: var(--bg-tertiary, #1e1e30);
    color: var(--text-primary, #ffffff);
    font-weight: 700;
    font-size: 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.browse-stock-card .stock-company-title {
    font-size: 0.98rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
}

.instrument-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.instrument-tag.preferred {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.2);
}

.instrument-tag.leverage {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.2);
}

.view-mode-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
}

.btn-view-toggle {
    display: flex;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
}

.btn-view-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-view-btn.active, .btn-view-btn:hover {
    background: var(--accent-primary, #3b82f6);
    color: #ffffff;
}

.browse-grid-list-mode {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.browse-grid-horizontal-mode {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

#browse-list-content-grid {
    display: grid !important;
    grid-template-rows: repeat(auto-fill, minmax(220px, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 280px !important;
    gap: 1.5rem !important;
    height: 100% !important;
    flex-shrink: 0;
}

.browse-grid-horizontal-mode .browse-stock-card {
    min-height: 220px !important;
    box-sizing: border-box;
}

.skeleton-card {
    border: 1px dashed rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
    min-height: 220px;
    border-radius: 16px;
    width: 280px;
    box-sizing: border-box;
}

.browse-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg, #181826);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.45rem 0.85rem;
    gap: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 66px;
}

.browse-list-row:hover {
    border-color: var(--accent-color, #3b82f6);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

.browse-list-col-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 3.5;
}

.browse-list-col-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex: 1;
    flex-shrink: 0;
}

.browse-list-col-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.browse-stock-card .ticker-pill {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.browse-stock-card .exchange-badge {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.browse-stock-card .price-section {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 0.6rem;
}

.browse-stock-card .stock-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.browse-stock-card .card-meta-pill {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.browse-stock-card .stock-price {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}

.browse-stock-card .stock-change {
    font-size: 0.8rem;
    font-weight: 600;
}

.browse-stock-card .action-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.browse-stock-card .value-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
}

.browse-stock-card .value-badge.badge-high {
    background-color: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.browse-stock-card .value-badge.badge-normal {
    background-color: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

/* Watchlist Stock Drag and Drop Reordering */
.watchlist-item-wrapper,
.watchlist-stock-item,
.portfolio-item-wrapper,
.portfolio-item-container,
.portfolio-item-card,
.touch-drag-clone {
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.is-reorder-dragging,
body.is-reorder-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grabbing !important;
}

/* Layout only. Reordering moved to .row-grab-handle behind edit mode, so this
   must not claim the touch stream - "touch-action: none" here swallowed the
   vertical pan when a finger landed on the logo, and "cursor: grab" advertised
   a drag that no longer exists. */
.watchlist-stock-item .drag-handle {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 0;
}

.watchlist-stock-item .drag-handle i {
    display: none !important;
}

.watchlist-item-wrapper.dragging,
.watchlist-stock-item.dragging {
    opacity: 0.05 !important;
}

.watchlist-item-wrapper.dragging .watchlist-stock-item,
.watchlist-stock-item.dragging {
    background: transparent !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* Portfolio Stock Drag and Drop Reordering */
.portfolio-item-wrapper[draggable="true"],
.portfolio-item-container[draggable="true"] {
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s ease;
}

.portfolio-item-wrapper.dragging,
.portfolio-item-container.dragging {
    opacity: 0.05 !important;
}

.portfolio-item-wrapper.dragging .portfolio-item-container,
.portfolio-item-wrapper.dragging .portfolio-item-card,
.portfolio-item-container.dragging {
    background: transparent !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* Layout only - see the note on .watchlist-stock-item .drag-handle above. */
.portfolio-item-card .drag-handle {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 0;
}

.portfolio-item-card .drag-handle i {
    display: none !important;
}

/* Distinct Styling for Portfolio Pies / Buckets (Warm Amber / Golden Yellow) */
.portfolio-pie-item-wrapper {
    margin-bottom: 0.8rem !important;
}

.portfolio-pie-container {
    background: #1a1308 !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, #161007 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.portfolio-pie-item-wrapper.selected .portfolio-pie-container {
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .portfolio-pie-item-wrapper.selected .portfolio-pie-container {
    border: 2px solid #d97706 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.4), 0 4px 14px rgba(217, 119, 6, 0.25) !important;
}

.pie-holding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    cursor: pointer;
}

.pie-holding-row:last-child {
    border-bottom: none;
}

.pie-holding-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .pie-holding-row:hover {
    background: #f8fafc;
}

[data-theme="light"] .pie-detail-header-card {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    border-left-color: #d97706 !important;
}

[data-theme="light"] .pie-detail-header-card .portfolio-pie-badge {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #b45309 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
}

/* Reorder Groups Modal Items */
.reorder-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    background: var(--bg-card, #18181b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reorder-group-item:active {
    cursor: grabbing;
}

.reorder-group-item.dragging {
    opacity: 0.12 !important;
    border: 1.5px dashed var(--accent-color, #6366f1) !important;
    background: rgba(99, 102, 241, 0.06) !important;
    box-shadow: none !important;
}

.touch-drag-clone.reorder-group-item {
    opacity: 1 !important;
    background: #18181c !important;
    border: 1.5px solid var(--accent-color, #6366f1) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.95) !important;
    cursor: grabbing !important;
}

[data-theme="light"] .touch-drag-clone.reorder-group-item {
    background: #ffffff !important;
    border: 1.5px solid var(--accent-color, #6366f1) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}

.reorder-group-item .reorder-grip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.reorder-group-item .reorder-grip i {
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.6;
}

.reorder-group-item .reorder-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 12px;
}

[data-theme="light"] .reorder-group-item {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .reorder-group-item .reorder-badge {
    background: #f1f5f9;
    color: #64748b;
}

.portfolio-pie-container .pie-holdings-container {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.portfolio-pie-container .portfolio-item-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.portfolio-pie-container .portfolio-item-icon svg {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.portfolio-pie-badge {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
}

[data-theme="light"] .portfolio-pie-container {
    background: #fffbeb !important;
    border: 1px solid rgba(245, 158, 11, 0.32) !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.08);
}

[data-theme="light"] .portfolio-pie-container .portfolio-item-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .portfolio-pie-container .portfolio-item-icon svg {
    filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.2));
}

[data-theme="light"] .portfolio-pie-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.32);
}

/* Universal AI Sparkle Icon (Gemini AI Diamond Star) */
.ai-sparkle-icon {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    vertical-align: -0.25em;
    fill: currentColor;
    flex-shrink: 0;
}

.view-switch-btn .ai-sparkle-icon {
    width: 1.45em;
    height: 1.45em;
    vertical-align: -0.28em;
}

.watchlist-ai-horizon-label .ai-sparkle-icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.22em;
}

/* Floating Solid Drag Clone (Picked up item preview) */
.touch-drag-clone {
    background: #151728 !important;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    opacity: 1 !important;
    cursor: grabbing !important;
}

.touch-drag-clone .watchlist-stock-item,
.touch-drag-clone .portfolio-item-container,
.touch-drag-clone .portfolio-item-card {
    background: #151728 !important;
    cursor: grabbing !important;
}

.touch-drag-clone.selected,
.touch-drag-clone.selected .watchlist-stock-item,
.touch-drag-clone .watchlist-stock-item.selected,
.touch-drag-clone.selected .portfolio-item-card,
.touch-drag-clone .portfolio-item-card.selected {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: inset 4px 0 0 var(--accent-primary), 0 8px 24px rgba(99, 102, 241, 0.25) !important;
}

.touch-drag-clone .watchlist-row-edit-btn,
.touch-drag-clone .portfolio-row-edit-btn {
    display: none !important;
}

[data-theme="light"] .touch-drag-clone {
    background: #ffffff !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .touch-drag-clone .watchlist-stock-item,
[data-theme="light"] .touch-drag-clone .portfolio-item-container,
[data-theme="light"] .touch-drag-clone .portfolio-item-card {
    background: #ffffff !important;
}

[data-theme="light"] .touch-drag-clone.selected,
[data-theme="light"] .touch-drag-clone.selected .watchlist-stock-item,
[data-theme="light"] .touch-drag-clone .watchlist-stock-item.selected,
[data-theme="light"] .touch-drag-clone.selected .portfolio-item-card,
[data-theme="light"] .touch-drag-clone .portfolio-item-card.selected {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: var(--accent-primary) !important;
}

.browse-stock-card .value-badge.badge-low {
    background-color: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.pagination-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.pagination-view-toggle {
    position: absolute;
    right: 1.5rem;
    display: flex;
    align-items: center;
}

.pagination-info {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.slider-pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 250px;
}

.page-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

.page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-gradient);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    border: none;
    transition: transform 0.1s;
}

.page-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.page-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-gradient);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    border: none;
    transition: transform 0.1s;
}

.page-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Light Theme Overrides for Pagination & Secondary Buttons */
[data-theme="light"] .pagination-container {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .pagination-info {
    color: var(--text-primary);
}

[data-theme="light"] .page-slider {
    background: #cbd5e1;
}

[data-theme="light"] .btn-secondary {
    background-color: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

[data-theme="light"] .btn-secondary:hover:not(:disabled) {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}

[data-theme="light"] .btn-secondary:disabled {
    opacity: 0.45;
    background-color: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}

img.company-logo,
img.browse-card-logo,
img.browse-card-logo-lg,
img#selected-stock-logo,
img#modal-stock-logo,
img.modal-stock-logo,
img#trade-modal-logo,
img#drawer-stock-logo,
img#confirm-modal-logo,
.portfolio-item-icon img {
    background-color: #ffffff;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 8px !important;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

.btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* Responsive constraints */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-chart-section {
        grid-template-columns: 1fr;
    }
}
/* Bottom Navigation Bar & Mobile elements default hidden */
.bottom-nav,
.sidebar-header-actions,
.mobile-balance-panel,
.mobile-back-header {
    display: none;
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 60px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        padding: 0 1.25rem !important;
        background-color: var(--bg-secondary) !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-right: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    }
    .sidebar-brand {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }
    .sidebar-brand .logo-img {
        height: 36px !important;
        width: auto !important;
    }
    /* Measured: the wordmark is 124px and the controls 223px, so the bar needs
       about 427px before the name has to go. 550 was hiding it on phones that
       had room to spare, especially now the account selector shows a short code. */
    @media (max-width: 430px) {
        .sidebar-brand h2 {
            display: none !important;
        }
    }
    .sidebar-menu {
        display: none !important;
    }
    .sidebar-footer {
        display: none !important;
    }
    .sidebar-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    @media (max-width: 575px) {
        #current-env-badge-mobile {
            display: none !important;
        }
    }
    .main-content {
        margin-left: 0 !important;
        max-width: 100% !important;
        padding: 0 0.35rem !important;
        padding-top: 68px !important; /* Space for fixed top header */
        padding-bottom: 75px !important; /* Space for fixed bottom nav bar */
        min-height: 100vh !important;
        box-sizing: border-box !important;
    }
    .dashboard-split {
        gap: 0.5rem !important;
        height: calc(100vh - 143px) !important;
    }
    .dashboard-col {
        padding-left: 0 !important;
        padding-right: 2px !important; /* Move cards slightly left to balance scrollbar space */
        gap: 0.5rem !important; /* Halve flexbox gap between panels */
    }
    .main-header {
        display: none !important; /* Hide redundant page headers on mobile */
    }
    .mobile-balance-panel {
        display: block !important;
        margin-bottom: 0.25rem !important;
        padding: 0.65rem 0.85rem !important;
    }
    .mobile-balance-panel span:not([id]) {
        font-size: 0.61rem !important; /* Labels 15% smaller */
    }
    .mobile-balance-panel span[id*="stat-total-value"] {
        font-size: 1.36rem !important; /* Value 15% smaller */
    }
    .mobile-balance-panel span[id*="stat-ppl-badge"],
    .mobile-balance-panel span[id*="stat-ppl-badge"] * {
        font-size: 0.63rem !important;
    }
    .mobile-balance-panel span[id*="stat-free-cash"] {
        font-size: 1.06rem !important; /* Free cash 15% smaller */
    }
    .watchlist-sticky-header {
        top: 0 !important; /* Pin to top of scrollable column */
        max-width: calc(100vw - 0.8rem) !important; /* Perfectly balanced page margin */
        overflow: visible !important; /* Prevent filter buttons from clipping */
        box-sizing: border-box !important;
        margin-bottom: 0.25rem !important;
        border-radius: 12px !important;
    }
    .watchlist-stocks-container {
        padding-top: 0 !important;
    }
    .selected-stock-header {
        display: flex !important;
        align-items: center !important;
        background: var(--card-bg) !important;
        padding: 0.75rem 1rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--border-radius, 12px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .right-col-header-group {
        position: sticky !important;
        top: 0 !important;
        z-index: 25 !important;
        background: var(--bg-primary) !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: none !important;
        margin: 0 0 0.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .header-actions {
        display: none !important;
    }
    .card {
        padding: 1rem 0.75rem !important;
        border-radius: 12px !important;
    }
    .watchlist-stock-item {
        padding: 4px 8px !important;
    }
    .watchlist-stock-item .drag-handle {
        gap: 0 !important;
        padding: 0 !important;
        margin-left: 0 !important;
    }
    .watchlist-stock-item .drag-handle i {
        display: none !important;
    }
    .watchlist-stock-item .portfolio-item-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .stock-left-group {
        gap: 2px !important;
        max-width: 65% !important;
    }
    .stock-name {
        font-size: 0.77rem !important;
        font-weight: 700 !important;
    }
    .stock-ticker-sub,
    .stock-market {
        font-size: 0.6rem !important;
    }
    .stock-price-val {
        font-size: 0.72rem !important;
    }
    .stock-change-val {
        font-size: 0.58rem !important;
    }
    .stock-sparkline-wrap {
        display: flex !important;
        padding: 0 4px !important;
        margin-right: 6px !important;
        margin-left: auto !important;
    }
    .stock-sparkline-wrap .sparkline-svg {
        width: 42px !important;
        height: 18px !important;
    }
    .portfolio-item-card {
        padding: 0.35rem 0.5rem !important;
    }
    .portfolio-item-card .drag-handle {
        gap: 0 !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .portfolio-item-card .drag-handle i {
        display: none !important;
    }
    .portfolio-item-icon {
        width: 38px !important;
        height: 38px !important;
        margin-right: 0 !important;
    }
    .portfolio-item-details {
        margin-right: 0.4rem !important;
    }
    .portfolio-item-title {
        font-size: 0.75rem !important; /* 15% smaller (was 0.88rem) */
    }
    .portfolio-item-meta {
        font-size: 0.61rem !important; /* 15% smaller (was 0.72rem) */
        gap: 0.3rem !important;
    }
    .portfolio-shares-badge {
        padding: 0.12rem 0.35rem !important;
        font-size: 0.58rem !important; /* 15% smaller (was 0.68rem) */
    }
    .portfolio-item-prices {
        margin-right: 0.6rem !important;
        padding-left: 0.5rem !important;
        gap: 0.1rem !important;
    }
    .portfolio-item-avg-price, 
    .portfolio-item-cur-price {
        font-size: 0.61rem !important; /* 15% smaller (was 0.72rem) */
        gap: 0.2rem !important;
    }
    .portfolio-item-financials {
        gap: 0.1rem !important;
    }
    .portfolio-item-value {
        font-size: 0.75rem !important; /* 15% smaller (was 0.88rem) */
        font-weight: 700 !important;
    }
    .portfolio-item-return {
        font-size: 0.60rem !important; /* 15% smaller (was 0.70rem) */
    }
    .watchlist-stock-trades-toggle-bar {
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: -12px !important;
        margin-top: 5px !important;
        padding: 10px 12px !important;
    }
    .watchlist-stock-trades-toggle-bar .toggle-bar-right {
        transform: translateY(-6px) !important;
    }
    .watchlist-stock-orders-panel {
        width: auto !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: -12px !important;
        padding: 0 12px !important;
    }
    .watchlist-stock-item.expanded .watchlist-stock-trades-toggle-bar {
        margin-bottom: 0 !important;
    }
    .watchlist-stock-item.expanded .watchlist-stock-orders-panel {
        padding: 10px 0 !important;
    }
    .watchlist-stock-orders-panel .table-responsive {
        width: 100% !important;
    }
    .watchlist-orders-table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
    }
    .watchlist-orders-table th:nth-child(1),
    .watchlist-orders-table td:nth-child(1) {
        width: 28% !important;
        padding-left: 12px !important;
    }
    .watchlist-orders-table th:nth-child(2),
    .watchlist-orders-table td:nth-child(2) {
        width: 26% !important;
    }
    .watchlist-orders-table th:nth-child(3),
    .watchlist-orders-table td:nth-child(3) {
        width: 24% !important;
    }
    .watchlist-orders-table th:nth-child(4),
    .watchlist-orders-table td:nth-child(4) {
        width: 22% !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    .mobile-back-header {
        display: flex !important;
    }
    #right-col-container {
        position: fixed !important;
        top: 60px !important;
        bottom: 65px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        background: var(--bg-primary) !important;
        z-index: 1005 !important;
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0.75rem 0.35rem !important; /* Tighten panel edges to 6px */
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #right-col-container .right-col-header-group {
        position: sticky !important;
        top: -0.75rem !important;
        z-index: 25 !important;
        background: var(--bg-primary) !important;
        padding: 0.75rem 0 0.35rem 0 !important;
        margin: 0 0 0.4rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #right-col-container .card,
    #right-col-container .chart-card,
    #right-col-container .quote-card,
    #right-col-container .market-snapshot-card,
    #right-col-container .ai-prediction-card,
    #right-col-container .profile-card,
    #right-col-container .selected-stock-header {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #right-col-container.has-selection {
        transform: translateX(0) !important;
    }
    .watchlist-sticky-header,
    .radar-sticky-header,
    .portfolio-sticky-header {
        top: 0 !important; /* Pin flush to top of scrollable column */
    }
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border-color);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    }
    .bottom-nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        font-size: 1.4rem;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        transition: all 0.2s ease-in-out;
        text-decoration: none;
    }
    .bottom-nav-item:hover {
        color: var(--text-primary);
    }
    .bottom-nav-item.active {
        color: var(--accent-primary);
        background: rgba(99, 102, 241, 0.15);
    }
}

/* Stock Detail Modal Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 2rem;
}

.modal-overlay.active {
    display: flex;
}

.modal-content.glassmorphic-modal {
    background: var(--bg-card, #141424);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    max-height: 85vh;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="light"] .modal-content.glassmorphic-modal,
[data-theme="light"] .browse-detail-panel .card.section-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .modal-chart-card,
[data-theme="light"] .modal-stats-card,
[data-theme="light"] .modal-desc-card,
[data-theme="light"] .modal-news-card,
[data-theme="light"] .prediction-card-mini,
[data-theme="light"] .fundamentals-item-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .modal-title-wrap h2,
[data-theme="light"] .modal-stats-card h3,
[data-theme="light"] .modal-desc-card h3,
[data-theme="light"] .modal-news-card h3 {
    color: #0f172a !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-ticker-badge {
    background: var(--primary-gradient);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.modal-title-wrap h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.modal-top-grid, .modal-bottom-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
}

.modal-chart-card, .modal-stats-card, .modal-desc-card, .modal-news-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
}

.modal-chart-container {
    height: 300px;
    margin-top: 1rem;
    position: relative;
    touch-action: pan-y pinch-zoom;
}

.modal-range-buttons {
    display: flex;
    gap: 0.5rem;
}

.modal-range-buttons .btn-range {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-range-buttons .btn-range:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.modal-range-buttons .btn-range.active {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
}

.modal-stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.modal-stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.5rem;
}

.modal-stat-item .label {
    color: var(--text-secondary);
}

.modal-stat-item .value {
    font-weight: 600;
}

.modal-stat-item .value.link-accent {
    color: var(--accent);
    text-decoration: none;
}

.modal-stat-item .value.link-accent:hover {
    text-decoration: underline;
}

.modal-news-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.news-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.8rem;
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.news-title a:hover {
    color: var(--accent);
}

.news-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.8rem;
}

/* Responsiveness for modal layout */
@media (max-width: 900px) {
    .modal-top-grid, .modal-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* Modal Stock Logo Header */
.modal-stock-logo {
    width: 76px;
    height: 76px;
    border-radius: 14px !important;
    object-fit: cover;
    background-color: #e2e8f0 !important;
    padding: 3px;
    border: 1px solid #cbd5e1;
}

/* Card Action Hover Indicator */
.action-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.browse-stock-card:hover .action-hint {
    color: var(--accent-light);
    transform: translateX(3px);
}

/* Watchlist Buttons & Icon Styling */
.modal-watchlist-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 1.25rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.modal-watchlist-btn:hover {
    color: var(--primary, #6366f1);
    transform: scale(1.15);
}

.modal-watchlist-btn.active {
    color: var(--primary, #6366f1);
}

.modal-watchlist-btn.active i {
    font-weight: 900; /* Solid heart when active */
}

.btn-card-heart {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    z-index: 2; /* Sits above clickable card panel */
}

.btn-card-heart:hover {
    color: var(--primary, #6366f1);
    transform: scale(1.2);
}

.btn-card-heart.active {
    color: var(--primary, #6366f1);
}

.btn-card-heart.active i {
    font-weight: 900; /* Solid heart when active */
}

/* Input Preset Group */
.input-preset-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.input-preset-group:focus-within {
    border-color: var(--accent-light);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.input-preset-group input.form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0;
    flex: 1;
}

.input-preset-group select.select-preset {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-left: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    margin: 0;
    width: 48px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-full-width {
    width: 100%;
}

/* Opportunities Specific Layout */
.badge-bullish {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.badge-bearish {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.opportunity-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.swing-leg-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.2rem 0;
    color: var(--text-primary);
}

.swing-leg-item .leg-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Three columns layout for forms */
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* Collapse details in stock modal to expand historical chart */
.modal-content.collapsed-details .modal-stats-card {
    display: none !important;
}
.modal-content.collapsed-details .modal-bottom-grid {
    display: none !important;
}
.modal-content.collapsed-details .modal-top-grid {
    grid-template-columns: 1fr !important;
}
.modal-content.collapsed-details .modal-chart-card {
    height: calc(85vh - 100px) !important;
}
.modal-toggle-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition-smooth);
}
.modal-toggle-details-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.clickable-row:hover {
    background-color: var(--bg-tertiary) !important;
}
.clickable-row.selected {
    background-color: rgba(99, 102, 241, 0.15) !important;
    box-shadow: inset 4px 0 0 var(--primary) !important;
}
[data-theme="light"] .clickable-row.selected {
    background-color: rgba(99, 102, 241, 0.12) !important;
    box-shadow: inset 4px 0 0 var(--primary) !important;
}

/* Premium Chart Floating Tooltip (Supporting Light & Dark Themes) */
.chart-tooltip {
    position: absolute;
    display: none;
    /* Holds only a price and a session badge now, so it is padded to suit that
       rather than the date line it used to carry. */
    padding: 6px 9px;
    background: var(--bg-card, #0f172a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 100;
    text-align: left;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.chart-tooltip .tooltip-date {
    color: var(--text-muted);
    font-size: 0.68rem;
    margin-bottom: 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.chart-session-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
}
.chart-tooltip .tooltip-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.chart-tooltip .tooltip-ohlc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-primary);
}
.chart-tooltip .tooltip-ohlc-row {
    display: flex;
    gap: 8px;
}
.chart-tooltip .tooltip-ohlc .lbl {
    color: var(--text-muted);
    font-weight: 500;
}

[data-theme="light"] .chart-tooltip {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .chart-tooltip .tooltip-date {
    color: #64748b !important;
}
[data-theme="light"] .chart-tooltip .tooltip-price {
    color: #0f172a !important;
}
[data-theme="light"] .chart-tooltip .tooltip-ohlc {
    color: #0f172a !important;
}
[data-theme="light"] .chart-tooltip .tooltip-ohlc .lbl {
    color: #64748b !important;
}

/* Orders Filter Buttons Active Styling */
.orders-filter-btn.active[data-filter="ALL"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: var(--primary-light) !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}
.orders-filter-btn.active[data-filter="BUY"] {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: var(--success) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.orders-filter-btn.active[data-filter="SELL"] {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.5) !important;
    color: var(--danger) !important;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}
.orders-filter-btn.active[data-filter="PIE"],
.orders-pie-toggle-btn.active {
    background-color: rgba(251, 191, 36, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}

[data-theme="light"] .orders-pie-toggle-btn.active,
[data-theme="light"] .orders-filter-btn.active[data-filter="PIE"] {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
    box-shadow: none !important;
}

.orders-pie-toggle-btn:not(.active) {
    opacity: 0.6;
}
.orders-filter-btn.active[data-filter="FILLED"] {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: var(--success) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.orders-filter-btn.active[data-filter="CANCELLED"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: var(--warning) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

/* Trade Cycle Filter Buttons & Cards Styling */
.cycle-filter-btn.active {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: var(--primary-light) !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

.trade-cycle-card {
    background: var(--card-bg, rgba(15, 23, 42, 0.65));
    border: 2px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 0.75rem 1.25rem 0.75rem 0.75rem;
    transition: all 0.25s ease;
}

/* Status Outlines and Faint Shading for Trade Cycle Cards */
.trade-cycle-card.status-in-progress {
    border: 2px solid rgba(56, 189, 248, 0.65) !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.12);
}

.trade-cycle-card.status-profit {
    border: 2px solid rgba(16, 185, 129, 0.65) !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.12);
}

.trade-cycle-card.status-loss {
    border: 2px solid rgba(244, 63, 94, 0.65) !important;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    box-shadow: 0 0 18px rgba(244, 63, 94, 0.12);
}

.trade-cycle-card.status-neutral {
    border: 2px solid rgba(148, 163, 184, 0.4) !important;
}

/* Light Theme Faint Shading & Outlines */
[data-theme="light"] .trade-cycle-card.status-in-progress {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .trade-cycle-card.status-profit {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 2px solid #059669 !important;
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.15) !important;
}

[data-theme="light"] .trade-cycle-card.status-loss {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
    border: 2px solid #dc2626 !important;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.15) !important;
}

[data-theme="light"] .trade-cycle-card.status-neutral {
    background: #ffffff !important;
    border: 2px solid #94a3b8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Global Asset Type Buttons (Stocks & Pies) */
.orders-type-toggle-btn {
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    cursor: pointer;
}

.orders-type-toggle-btn.active[data-type="stocks"] {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #818cf8 !important;
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.25) !important;
}

[data-theme="light"] .orders-type-toggle-btn.active[data-type="stocks"] {
    background: #e0e7ff !important;
    color: #4338ca !important;
    border-color: #a5b4fc !important;
    box-shadow: none !important;
}

.orders-type-toggle-btn.active[data-type="pies"] {
    background: rgba(251, 191, 36, 0.22) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.55) !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.25) !important;
}

[data-theme="light"] .orders-type-toggle-btn.active[data-type="pies"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
    box-shadow: none !important;
}

.orders-type-toggle-btn:not(.active) {
    opacity: 0.45;
    background: transparent !important;
}

.trade-cycle-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cycle-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
}

.cycle-pnl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.92rem;
}

.cycle-pnl-pill.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cycle-pnl-pill.negative {
    background: rgba(244, 63, 94, 0.15);
    color: #f87171;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.cycle-pnl-pill.neutral {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.cycle-pnl-pill.in-progress {
    background: rgba(6, 182, 212, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

[data-theme="light"] .cycle-pnl-pill.in-progress {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
}

/* Trade Cycle Badges & Elements */
.trade-cycle-logo-container {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.trade-cycle-logo-container img.company-logo {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: none;
    box-shadow: none;
    padding: 3px;
    object-fit: contain;
    background: transparent;
}

.cycle-ticker-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c4b5fd;
    background: rgba(99, 102, 241, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: inline-block;
}

[data-theme="light"] .cycle-ticker-badge {
    color: #3730a3 !important;
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
}

.cycle-status-badge {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
}

.cycle-status-badge.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .cycle-status-badge.completed {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}

.cycle-status-badge.in-progress {
    background: rgba(6, 182, 212, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

[data-theme="light"] .cycle-status-badge.in-progress {
    background: #e0f2fe !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}

/* Order Side Badges (BUY / SELL) */
.order-side-badge {
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-side-badge.buy {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .order-side-badge.buy {
    background: #dcfce7 !important;
    color: #065f46 !important; /* Deep dark forest green for high contrast in light mode */
    border-color: #86efac !important;
}

.order-side-badge.sell {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

[data-theme="light"] .order-side-badge.sell {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

/* Order Status Badges (Filled / Cancelled) */
.order-status-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(156, 163, 175, 0.1);
}

.order-status-badge.filled {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .order-status-badge.filled {
    background: #d1fae5 !important;
    color: #065f46 !important; /* Deep dark emerald for high contrast in light mode */
    border-color: #a7f3d0 !important;
}

.order-status-badge.cancelled {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .order-status-badge.cancelled {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

/* Price Highlights */
.price-sell-profit {
    color: #34d399;
}

[data-theme="light"] .price-sell-profit {
    color: #047857 !important;
}

.price-sell-loss {
    color: #f87171;
}

[data-theme="light"] .price-sell-loss {
    color: #b91c1c !important;
}

.cycle-pie-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    font-weight: 700;
    border: 1px solid rgba(251, 191, 36, 0.35);
    display: inline-flex;
    align-items: center;
}

[data-theme="light"] .cycle-pie-badge {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

.cycle-tranches-accordion {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.08));
    display: none;
}

.cycle-tranches-accordion.open {
    display: block;
}

[data-theme="light"] .cycle-pnl-pill.positive {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}

[data-theme="light"] .cycle-pnl-pill.negative {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

[data-theme="light"] .cycle-pnl-pill.neutral {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .trade-cycle-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .trade-cycle-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Sticky Pinned Watchlist Groups Subheader */
.watchlist-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
}

/* View Switcher Button Styling (Squarer with Rounded Edges Segmented Control) */
.watchlist-view-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.18s ease-in-out;
}

.view-switch-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.view-switch-btn.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35) !important;
}

/* Light Mode Overrides for Watchlist Header & Tabs */
[data-theme="light"] .watchlist-sticky-header {
    background: rgba(255, 255, 255, 0.95);
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .watchlist-group-tab {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

[data-theme="light"] .watchlist-group-tab:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

[data-theme="light"] .watchlist-group-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

[data-theme="light"] .portfolio-group-tab {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

[data-theme="light"] .portfolio-group-tab:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

[data-theme="light"] .portfolio-group-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

[data-theme="light"] .watchlist-view-switcher {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

[data-theme="light"] .view-switch-btn {
    color: #64748b !important;
    border: none;
}

[data-theme="light"] .view-switch-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
}

[data-theme="light"] .view-switch-btn.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35) !important;
}

[data-theme="light"] .btn-add-group-pill,
[data-theme="light"] .btn-edit-groups-toggle {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

[data-theme="light"] .btn-add-group-pill:hover,
[data-theme="light"] .btn-edit-groups-toggle:hover {
    background: #e2e8f0;
}

.watchlist-groups-scroll-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    padding-bottom: 2px;
    flex-grow: 1;
    min-width: 0;
}

.watchlist-groups-scroll-wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.watchlist-groups-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.watchlist-group-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
}

.watchlist-group-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.watchlist-group-tab.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}

.watchlist-group-tab.favorites-tab {
    padding: 0.35rem 0.8rem;
    min-width: 42px;
    justify-content: center;
}

.watchlist-group-tab.favorites-tab .favorites-heart-icon {
    color: var(--primary, #6366f1);
    font-size: 0.95rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.watchlist-group-tab.favorites-tab:hover .favorites-heart-icon {
    transform: scale(1.25);
}

.watchlist-group-tab.favorites-tab.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35) !important;
}

.watchlist-group-tab.favorites-tab.active .favorites-heart-icon {
    color: #818cf8;
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.7));
}

.watchlist-group-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    padding-left: 0.6rem;
}

.btn-add-group-pill {
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-edit-groups-toggle {
    border-radius: 20px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-edit-groups-toggle.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}

.group-tab-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.group-tab-actions i {
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.75;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.group-tab-actions i:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.group-tab-actions i.btn-delete-group:hover {
    color: #ff453a !important;
    background: rgba(255, 69, 58, 0.2);
}

/* Redesigned Split Dashboard & Account Switcher */
.dashboard-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    height: calc(100vh - 130px);
    overflow: hidden;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden !important;
    padding-right: 8px;
    height: 100%;
    container-type: inline-size;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.dashboard-col > .card,
.dashboard-col > div {
    margin-bottom: 0 !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Scrollbars on these columns are drawn as overlay thumbs - see .ovs-host. */

.account-selector-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.account-selector-tabs {
    display: flex;
    gap: 4px;
    width: 100%;
}

.account-tab {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
}

.account-tab:hover {
    color: var(--text-main);
}

.account-tab[data-account="isa"].active {
    background: #FF9F0A;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(255, 159, 10, 0.3);
}

.account-tab[data-account="invest"].active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.account-tab[data-account="cfd"].active {
    background: #30D158;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(48, 209, 88, 0.3);
}

.stats-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-card-horizontal {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    box-shadow: var(--card-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
    min-height: 85px;
}

.stat-card-horizontal:hover {
    transform: translateX(4px);
    border-color: var(--border-hover);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}

.stat-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.stat-card-horizontal .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-card-horizontal .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.stat-card-horizontal .stat-icon {
    font-size: 1.1rem;
    color: var(--primary-light);
    background: rgba(99, 102, 241, 0.1);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-horizontal .footer-note {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Stack columns on tablet / mobile devices */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    .dashboard-split {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .dashboard-col {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }
}

.badge-buy {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-sell {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.company-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.15));
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.pending-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    min-height: 58px;
    box-sizing: border-box;
}
.pending-order-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover);
}
.pending-order-item.confirm-active .pending-order-desc {
    display: none !important;
}
.pending-order-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}
.pending-order-delete-btn {
    background: rgba(255, 69, 58, 0.08);
    color: #FF453A;
    border: 1px solid rgba(255, 69, 58, 0.25);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pending-order-delete-btn:hover {
    background: #FF453A;
    color: #ffffff;
    border-color: #FF453A;
}
.pending-order-confirm-group {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: psuConfirmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes psuConfirmSlideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.pending-order-confirm-yes-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #FF453A;
    color: #ffffff;
    border: 1px solid #FF453A;
    border-radius: 8px;
    height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 69, 58, 0.35);
}
.pending-order-confirm-yes-btn:hover {
    background: #e0382e;
    border-color: #e0382e;
    box-shadow: 0 4px 12px rgba(255, 69, 58, 0.45);
}
.pending-order-confirm-yes-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.pending-order-confirm-no-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #94a3b8);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pending-order-confirm-no-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-primary, #ffffff);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .pending-order-confirm-no-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #64748b;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .pending-order-confirm-no-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #0f172a;
    border-color: rgba(0, 0, 0, 0.2);
}

/* Watchlist Stock Cards (Outlined with Curved Edges) */
.watchlist-stocks-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.25rem 0;
}

@media (max-width: 768px) {
    .watchlist-stocks-container {
        padding: 0.2rem 0;
        gap: 3px;
    }
    .watchlist-stock-item {
        padding: 6px 12px 10px 12px !important;
    }
}

.watchlist-stock-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* AI Outlooks screener rows only (identified by the .watchlist-stock-main-row
   child, which the Standard list never renders). The Aug-2026 "1:1 portfolio
   container" refactor turned .watchlist-stock-item into a bare horizontal row,
   which stripped this view's card outline and laid its two blocks (name/price
   line + ranked-badges line) side by side. Restore the pre-refactor card. */
.watchlist-stock-item:has(> .watchlist-stock-main-row) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    padding: 8px 12px;
    margin-bottom: 6px;
}

[data-theme="light"] .watchlist-stock-item:has(> .watchlist-stock-main-row) {
    background: rgba(15, 23, 42, 0.02);
}

.watchlist-stock-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.watchlist-stock-trades-toggle-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(99, 102, 241, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 12px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #a5b4fc;
    cursor: pointer;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -5px; /* Pull flush to card bottom */
    margin-top: 4px;
    border-radius: 0 0 14px 14px;
    transition: all 0.2s ease;
}

.watchlist-stock-trades-toggle-bar:hover {
    background: rgba(99, 102, 241, 0.14);
    color: #ffffff;
}

.toggle-bar-left {
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    pointer-events: auto;
}

.watchlist-stock-trades-toggle-bar .toggle-bar-right {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
}

/* Light mode overrides for toggle bar */
[data-theme="light"] .watchlist-stock-trades-toggle-bar {
    background: rgba(79, 70, 229, 0.04);
    border-top-color: rgba(0, 0, 0, 0.06);
    color: #4f46e5;
}
[data-theme="light"] .watchlist-stock-trades-toggle-bar:hover {
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
}

.watchlist-stock-trades-toggle-bar .accordion-chevron {
    transition: transform 0.2s ease;
}

.watchlist-stock-item.expanded .watchlist-stock-trades-toggle-bar .accordion-chevron {
    transform: rotate(180deg);
}

.watchlist-stock-item.expanded .watchlist-stock-trades-toggle-bar {
    margin-bottom: 0;
    border-radius: 0;
}

.watchlist-stock-orders-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    margin-top: 0;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.15);
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -5px;
    border-radius: 0 0 14px 14px;
    border-top: none;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out, padding 0.25s ease-out;
}

/* Light mode overrides for orders panel */
[data-theme="light"] .watchlist-stock-orders-panel {
    background: rgba(0, 0, 0, 0.02);
}

.watchlist-stock-item.expanded .watchlist-stock-orders-panel {
    max-height: 1000px;
    opacity: 1;
    padding: 10px 12px;
}

.watchlist-orders-table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.66rem;
}

.watchlist-orders-table th {
    padding: 4px 6px;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
}

.watchlist-orders-table td {
    padding: 6px 6px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.watchlist-orders-table tr:last-child td {
    border-bottom: none;
}

.watchlist-remove-btn {
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.35;
    z-index: 5;
}

.watchlist-remove-btn:hover {
    opacity: 1;
    background: #ff453a;
    border-color: #ff453a;
    color: #ffffff;
    transform: translateY(-50%) scale(1.2);
}

.watchlist-stock-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.watchlist-stock-item.selected,
.opportunity-stock-item.selected {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: inset 4px 0 0 var(--accent-primary), 0 4px 16px rgba(99, 102, 241, 0.15) !important;
}

.opportunity-stock-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0 !important;
}

.opportunity-stock-item:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.opportunity-score-badge {
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}

/* Light Theme: Ultra-high contrast crisp tones */
.opportunity-score-badge.bullish,
[data-theme="light"] .opportunity-score-badge.bullish {
    background: #dcfce7 !important;
    color: #064e3b !important; /* Extremely dark pine green */
    border: 1px solid #86efac !important;
    font-weight: 800 !important;
}

.opportunity-score-badge.bearish,
[data-theme="light"] .opportunity-score-badge.bearish {
    background: #fee2e2 !important;
    color: #991b1b !important; /* Extremely dark crimson */
    border: 1px solid #fca5a5 !important;
    font-weight: 800 !important;
}

/* Dark Theme: Vibrant luminous tones */
[data-theme="dark"] .opportunity-score-badge.bullish,
body.dark-mode .opportunity-score-badge.bullish {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .opportunity-score-badge.bearish,
body.dark-mode .opportunity-score-badge.bearish {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    font-weight: 800 !important;
}

.opportunity-breakdown-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}



.timing-status-immediate {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

.timing-status-wait {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

[data-theme="light"] .timing-status-immediate,
body:not(.dark-mode) .timing-status-immediate {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #064e3b !important;
}

[data-theme="light"] .timing-status-wait,
body:not(.dark-mode) .timing-status-wait {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}

.stock-left-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    max-width: 55%;
}

.stock-left-group .company-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 8px !important;
}

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

.stock-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    word-break: break-word;
}

.stock-exchange-tag {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.stock-ticker-sub {
    font-size: 0.76rem;
    font-weight: 700;
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stock-market {
    color: var(--text-secondary);
    margin-left: 4px;
}

[data-theme="light"] .stock-market {
    color: var(--text-muted) !important;
}

.stock-sparkline-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    flex-shrink: 0;
    pointer-events: none;
    margin-left: auto;
    margin-right: 12px;
}

.sparkline-svg {
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.stock-right-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stock-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.stock-price-val {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.stock-change-val {
    font-size: 0.74rem;
    font-weight: 600;
}

.stock-change-val.positive {
    color: var(--success);
}

.stock-change-val.negative {
    color: var(--danger);
}

.val-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.val-badge.high {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.val-badge.low {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.val-badge.normal {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.watchlist-heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 1rem;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.15s ease, transform 0.15s ease;
}

.watchlist-heart-btn:hover {
    background: rgba(255, 69, 58, 0.15);
    transform: scale(1.15);
}

/* Trading 212 Style Portfolio List (Left Dashboard Column) */
.portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.portfolio-item-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.55rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-color);
    transition: background-color 0.1s ease-out, border-color 0.1s ease-out,
                box-shadow 0.1s ease-out, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.portfolio-item-container:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: var(--border-hover);
    transform: translateX(3px);
}

.portfolio-item-container.selected,
.portfolio-item-wrapper.selected .portfolio-item-container,
.portfolio-item-container:has(.portfolio-item-card.selected),
.portfolio-item-container:has(.watchlist-stock-item.selected),
.portfolio-item-card.selected,
.watchlist-stock-item.selected {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--accent-primary, #6366f1) !important;
    box-shadow: inset 4px 0 0 var(--accent-primary, #6366f1), 0 4px 16px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .portfolio-item-container.selected,
[data-theme="light"] .portfolio-item-wrapper.selected .portfolio-item-container,
[data-theme="light"] .portfolio-item-container:has(.portfolio-item-card.selected),
[data-theme="light"] .portfolio-item-container:has(.watchlist-stock-item.selected),
[data-theme="light"] .portfolio-item-card.selected,
[data-theme="light"] .watchlist-stock-item.selected {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: var(--accent-primary, #6366f1) !important;
    box-shadow: inset 4px 0 0 var(--accent-primary, #6366f1), 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

.portfolio-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
}

.portfolio-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px !important;
    flex-shrink: 0;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;
    border: 1px solid var(--border-color, #cbd5e1);
    overflow: hidden;
}

.watchlist-stock-item .portfolio-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px !important;
    flex-shrink: 0;
}

.watchlist-stock-item .portfolio-item-icon img,
.portfolio-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 8px !important;
}

.portfolio-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
    min-width: 0;
    margin-right: 1rem;
}

.portfolio-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.portfolio-item-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
}

.portfolio-shares-badge {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.shares-num {
    font-weight: 700;
    color: var(--text-primary);
}

.shares-label {
    font-weight: 400;
    color: var(--text-muted);
}

.portfolio-market-tag {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Price Column (Avg Price vs Current Price) */
.portfolio-item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    margin-right: 1.25rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.portfolio-item-avg-price,
.portfolio-item-cur-price {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
}

.price-lbl {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portfolio-item-avg-price .price-val {
    font-weight: 600;
    color: var(--text-secondary);
}

.portfolio-item-cur-price .price-val {
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-item-cur-price .price-val.text-success {
    color: var(--success);
}

.portfolio-item-cur-price .price-val.text-danger {
    color: var(--danger);
}

.portfolio-item-financials {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.portfolio-item-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.portfolio-item-return {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: -0.1px;
}

.portfolio-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* AI Outlook Timeframe Horizon Switcher (7D, 14D, 30D) */
.horizon-toggle-group {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

[data-theme="light"] .horizon-toggle-group {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
}

.horizon-toggle-group.horizon-toggle-vertical {
    flex-direction: column;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    background: var(--bg-tertiary);
}

.horizon-toggle-group .btn-horizon {
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
}

.horizon-toggle-group.horizon-toggle-vertical .btn-horizon {
    padding: 2px 7px;
    font-size: 0.68rem;
    line-height: 1.15;
    min-width: 32px;
    text-align: center;
    border-radius: 4px;
}

.horizon-toggle-group .btn-horizon:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .horizon-toggle-group .btn-horizon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.horizon-toggle-group .btn-horizon.active {
    background: rgba(99, 102, 241, 0.25);
    color: #818cf8;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .horizon-toggle-group .btn-horizon.active {
    background: #6366f1;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* Portfolio Order Badges (BUY / SELL Limit/Stop) */
.portfolio-order-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.3;
}

.portfolio-order-badge.order-sell {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
    border: 1px solid rgba(255, 159, 10, 0.3);
}

.portfolio-order-badge.order-buy {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

/* Portfolio Term Tags (Short-Term, Med-Term, Long-Term) */
.portfolio-term-tag {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
}

.portfolio-term-tag.tag-short {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
    border: 1px solid rgba(255, 69, 58, 0.25);
}

.portfolio-term-tag.tag-med {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
    border: 1px solid rgba(255, 159, 10, 0.25);
}

.portfolio-term-tag.tag-long {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Portfolio Note Indicator Badge */
.portfolio-note-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd60a;
    font-size: 0.7rem;
    margin-left: 2px;
}

/* Portfolio Item Accordion Panel & Footer */
.portfolio-footer-bar {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1.2fr;
    align-items: center;
    background: rgba(99, 102, 241, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #a5b4fc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-footer-bar .footer-bar-term {
    display: flex;
    justify-content: flex-start;
}

.portfolio-footer-bar .footer-bar-left {
    display: flex;
    justify-content: flex-start;
}

.portfolio-footer-bar .footer-bar-middle {
    display: flex;
    justify-content: center;
}

.portfolio-footer-bar .footer-bar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.portfolio-footer-bar:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #ffffff;
}

/* Sell Limit footer element styling */
.portfolio-footer-sell-limit {
    color: #f43f5e;
    font-weight: 700;
    font-size: 0.72rem;
}

/* Note badge footer element styling */
.portfolio-footer-note-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}
.portfolio-footer-note-badge.has-note,
.portfolio-footer-note-badge.no-note {
    background: rgba(255, 214, 10, 0.15);
    color: #ffd60a;
}

.portfolio-footer-trades-badge {
    background: rgba(129, 140, 248, 0.12);
    color: #a5b4fc;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
}

.portfolio-footer-bar .portfolio-chevron {
    transition: transform 0.2s ease;
}

.portfolio-item-container.expanded .portfolio-footer-bar .portfolio-chevron {
    transform: rotate(180deg);
}

/* Light mode overrides for portfolio footer */
[data-theme="light"] .portfolio-footer-bar {
    background: rgba(79, 70, 229, 0.04);
    border-top-color: rgba(0, 0, 0, 0.06);
    color: #4f46e5;
}
[data-theme="light"] .portfolio-footer-bar:hover {
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
}
[data-theme="light"] .portfolio-footer-sell-limit {
    color: #e11d48;
}
[data-theme="light"] .portfolio-footer-note-badge.has-note,
[data-theme="light"] .portfolio-footer-note-badge.no-note {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}
[data-theme="light"] .portfolio-footer-trades-badge {
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
}

/* Portfolio Notes section title */
.portfolio-notes-title-row {
    color: #ffd60a;
}
[data-theme="light"] .portfolio-notes-title-row {
    color: #d97706;
}

.portfolio-accordion-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out, padding 0.25s ease-out;
}

/* Light mode overrides for portfolio accordion panel */
[data-theme="light"] .portfolio-accordion-panel {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top-color: rgba(0, 0, 0, 0.05) !important;
}

/* Fix table cutoff on the right inside portfolio accordion */
.portfolio-accordion-panel .watchlist-stock-orders-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}
[data-theme="light"] .portfolio-accordion-panel .watchlist-stock-orders-panel {
    border-top-color: rgba(0, 0, 0, 0.05) !important;
}

.portfolio-accordion-panel.open {
    max-height: 2000px;
    opacity: 1;
    padding: 0.9rem;
}

.portfolio-term-btn-group {
    display: flex;
    gap: 4px;
}

.btn-term-select {
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-term-select:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.btn-term-select.selected[data-term="Short-Term"] {
    background: rgba(255, 69, 58, 0.2);
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.4);
}

.btn-term-select.selected[data-term="Med-Term"] {
    background: rgba(255, 159, 10, 0.2);
    color: #ff9f0a;
    border-color: rgba(255, 159, 10, 0.4);
}

.btn-term-select.selected[data-term="Long-Term"] {
    background: rgba(99, 102, 241, 0.25);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.4);
}

.portfolio-notes-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.76rem;
    padding: 0.4rem 0.6rem;
    resize: vertical;
    min-height: 48px;
    font-family: inherit;
}

.portfolio-notes-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

[data-theme="light"] .portfolio-notes-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Right Detail Column Placeholder & Selection Visibility System */
#right-col-placeholder {
    display: flex;
}
#right-col-container.has-selection #right-col-placeholder {
    display: none !important;
}
#right-col-container:not(.has-selection) > :not(#right-col-placeholder) {
    display: none !important;
}
#right-col-container.pie-selected > :not(.right-col-header-group):not(#selected-pie-view) {
    display: none !important;
}

#right-col-container.pie-selected #selected-stock-header {
    background: #1a1308 !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, #161007 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] #right-col-container.pie-selected #selected-stock-header {
    background: #fffbeb !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.08) !important;
}

#right-col-container.pie-selected #selected-stock-ticker {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

[data-theme="light"] #right-col-container.pie-selected #selected-stock-ticker {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

/* Redesigned Trade Modal Dialog Overlay */
dialog.trade-dialog {
    background: #181826 !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 16px;
    color: var(--text-primary, #ffffff);
    padding: 1.1rem;
    max-width: 480px;
    width: 96vw;   /* a phone has no width to spare - the sliders want the range */
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: block;
}

[data-theme="light"] dialog.trade-dialog {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

dialog.trade-dialog:not([open]) {
    display: none !important;
}

dialog.trade-dialog[open] {
    display: block !important;
    animation: tradeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Item 10: the dialog slid on and off with a hard cut. It now comes in from
   the right over a fading backdrop, and reverses on the way out - which is
   why close() is wrapped in JS, so every call site gets the exit. */
dialog.trade-dialog[open].tm-closing {
    animation: tradeSlideOut 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
dialog.trade-dialog[open].tm-closing::backdrop {
    animation: backdropFadeOut 0.2s ease-in forwards;
}

@keyframes tradeSlideIn {
    from { opacity: 0; transform: translate(-50%, -50%) translateX(38px); }
    to   { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}

@keyframes tradeSlideOut {
    from { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
    to   { opacity: 0; transform: translate(-50%, -50%) translateX(38px); }
}

@keyframes backdropFadeOut {
    from { background-color: rgba(10, 10, 15, 0.75); }
    to   { background-color: rgba(10, 10, 15, 0); }
}

@media (prefers-reduced-motion: reduce) {
    dialog.trade-dialog[open],
    dialog.trade-dialog[open].tm-closing { animation-duration: 0.01s; }
}

dialog.trade-dialog::backdrop {
    background-color: rgba(10, 10, 15, 0.75) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

dialog.trade-dialog[open]::backdrop {
    animation: backdropFadeIn 0.2s ease-out forwards;
}

/* Shares Unavailable to Sell Modal Dialog */
dialog#pending-sell-unavailable-modal,
dialog.pending-sell-unavailable-dialog {
    background: var(--card-bg, #181826) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: var(--text-primary, #ffffff) !important;
    padding: 1.25rem 1.4rem 1.4rem 1.4rem !important;
    max-width: 440px !important;
    width: min(440px, 92vw) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 68, 68, 0.12) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    will-change: transform, opacity;
}

[data-theme="light"] dialog#pending-sell-unavailable-modal,
[data-theme="light"] dialog.pending-sell-unavailable-dialog {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

dialog#pending-sell-unavailable-modal:not([open]),
dialog.pending-sell-unavailable-dialog:not([open]) {
    display: none !important;
}

/* Centered Desktop & 2-Panel Mobile / Tablet Animation */
dialog#pending-sell-unavailable-modal[open],
dialog.pending-sell-unavailable-dialog[open] {
    display: block !important;
    animation: psuCenterFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

dialog#pending-sell-unavailable-modal[open].tm-closing,
dialog.pending-sell-unavailable-dialog[open].tm-closing {
    animation: psuCenterFadeOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes psuCenterFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes psuCenterFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* Backdrop */
dialog#pending-sell-unavailable-modal::backdrop,
dialog.pending-sell-unavailable-dialog::backdrop {
    background-color: rgba(10, 10, 15, 0.75) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

dialog#pending-sell-unavailable-modal[open]::backdrop,
dialog.pending-sell-unavailable-dialog[open]::backdrop {
    animation: backdropFadeIn 0.22s ease-out forwards !important;
}

dialog#pending-sell-unavailable-modal[open].tm-closing::backdrop,
dialog.pending-sell-unavailable-dialog[open].tm-closing::backdrop {
    animation: backdropFadeOut 0.18s ease-in forwards !important;
}

dialog#pending-sell-unavailable-modal .bottom-sheet-handle,
dialog.pending-sell-unavailable-dialog .bottom-sheet-handle {
    display: none;
}

.psu-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.25rem;
}

.psu-header .btn-close-trade-modal {
    margin-left: -4px;
}

.psu-title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.48;
    text-align: center;
    color: var(--text-primary, #ffffff);
    margin: 0.25rem 0 1.2rem 0;
    padding: 0 0.5rem;
}

[data-theme="light"] .psu-title {
    color: #0f172a;
}

.psu-zero-highlight {
    color: #0ea5e9;
    font-weight: 800;
}

[data-theme="light"] .psu-zero-highlight {
    color: #0284c7;
    font-weight: 800;
}

.psu-ticker-highlight {
    color: var(--text-primary);
    font-weight: 800;
}

.psu-acc-highlight {
    color: var(--text-primary);
    font-weight: 700;
}

.psu-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 0.75rem;
    text-align: left;
}

.psu-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

/* Single-Panel Mobile (Phone) Bottom-Sheet Mode */
dialog#pending-sell-unavailable-modal.psu-bottom-sheet,
dialog.pending-sell-unavailable-dialog.psu-bottom-sheet {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    border-radius: 24px 24px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 1.1rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px)) 1.25rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-height: 85vh !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] dialog#pending-sell-unavailable-modal.psu-bottom-sheet,
[data-theme="light"] dialog.pending-sell-unavailable-dialog.psu-bottom-sheet {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2) !important;
}

dialog#pending-sell-unavailable-modal.psu-bottom-sheet[open],
dialog.pending-sell-unavailable-dialog.psu-bottom-sheet[open] {
    display: block !important;
    animation: psuMobileSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

dialog#pending-sell-unavailable-modal.psu-bottom-sheet[open].tm-closing,
dialog.pending-sell-unavailable-dialog.psu-bottom-sheet[open].tm-closing {
    animation: psuMobileSlideDown 0.22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

dialog#pending-sell-unavailable-modal.psu-bottom-sheet .bottom-sheet-handle,
dialog.pending-sell-unavailable-dialog.psu-bottom-sheet .bottom-sheet-handle {
    display: block !important;
    width: 44px !important;
    height: 4.5px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 3px !important;
    margin: 0 auto 10px auto !important;
}

[data-theme="light"] dialog#pending-sell-unavailable-modal.psu-bottom-sheet .bottom-sheet-handle,
[data-theme="light"] dialog.pending-sell-unavailable-dialog.psu-bottom-sheet .bottom-sheet-handle {
    background: rgba(0, 0, 0, 0.2) !important;
}

@keyframes psuMobileSlideUp {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes psuMobileSlideDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Smart Dip Sniper Backtest Modal - 100% Solid & High-Contrast */
dialog#dip-sniper-backtest-modal {
    background: #181c28 !important;
    background-color: #181c28 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 25px rgba(56, 189, 248, 0.25) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-sizing: border-box;
    max-width: 680px;
    width: 94vw;
    padding: 0;
    overflow: hidden;
    z-index: 99999 !important;
}

[data-theme="light"] dialog#dip-sniper-backtest-modal {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #0f172a !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

dialog#dip-sniper-backtest-modal:not([open]) {
    display: none !important;
}

dialog#dip-sniper-backtest-modal[open] {
    display: block !important;
    animation: dialogFadeIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

dialog#dip-sniper-backtest-modal::backdrop {
    background-color: rgba(5, 8, 15, 0.88) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

dialog#dip-sniper-backtest-modal .backtest-card {
    background: #202637 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] dialog#dip-sniper-backtest-modal .backtest-card {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Smart Dip Sniper Batch Simulation Lab Modal (Overlay Structure) */
#dip-sniper-batch-modal .dip-sniper-modal-box {
    background: #181c28 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.95), 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 25px rgba(56, 189, 248, 0.25) !important;
}

[data-theme="light"] #dip-sniper-batch-modal .dip-sniper-modal-box {
    background: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #0f172a !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

#dip-sniper-batch-modal .batch-table-scroll th {
    position: sticky;
    top: 0;
    background: #202637;
    z-index: 5;
}

[data-theme="light"] #dip-sniper-batch-modal .batch-table-scroll th {
    background: #e2e8f0;
    color: #0f172a;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes backdropFadeIn {
    from {
        background-color: rgba(10, 10, 15, 0);
    }
    to {
        background-color: rgba(10, 10, 15, 0.75);
    }
}

.trade-modal-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}

.trade-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
    padding-bottom: 0.35rem;
    margin-bottom: 0.1rem;
}

.btn-close-trade-modal {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.btn-close-trade-modal:hover {
    color: var(--text-primary, #ffffff);
}

.trade-modal-title {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary, #ffffff);
}

.trade-modal-logo-container {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.trade-modal-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Price & Trend styles */
.trade-modal-price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trade-modal-price {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
}

.trade-modal-trend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* Toggle Option Buttons (Stop / Limit) */
.trade-modal-toggles {
    display: flex;
    background: var(--bg-tertiary, rgba(0,0,0,0.2));
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.05));
}

.btn-toggle-option {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toggle-option.active {
    background: var(--accent-primary, #6366f1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-toggle-option.active-stop {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid #f87171 !important;
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.25) !important;
}

.btn-toggle-option.active-limit,
.btn-toggle-option.active-limit-stoplimit {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25) !important;
}

/* CT-58 — Dip Sniper mode indicator on the header toggle (dark orange) */
.btn-toggle-option.active-dip {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #f97316 !important;
    border: 1px solid #f97316 !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.28) !important;
}

/* Active Mode label and description */
.trade-modal-mode-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.trade-modal-mode-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--accent-light, #818cf8);
}

.trade-modal-mode-desc {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    line-height: 1.4;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Visual Card / Graph container */
.trade-modal-visual-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    flex-shrink: 0;
}

.trade-modal-svg-container {
    height: clamp(85px, 16vh, 150px);
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

#trade-modal-svg text.trade-svg-price {
    fill: var(--text-primary);
}

#trade-modal-svg text.trade-svg-label {
    fill: var(--text-secondary);
}

[data-theme="light"] #trade-modal-svg text.trade-svg-price {
    fill: #0f172a !important;
}

[data-theme="light"] #trade-modal-svg text.trade-svg-label {
    fill: #475569 !important;
}

@media (max-height: 800px) {
    dialog.trade-dialog {
        padding: 0.75rem 0.9rem !important;
        max-height: calc(100svh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    .order-confirm-modal {
        padding: 0 !important;
        max-height: calc(100svh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    .order-confirm-container {
        padding: 1.2rem 1.4rem !important;
    }
    .trade-modal-container {
        gap: 0.35rem !important;
    }
    .trade-modal-price {
        font-size: 1.65rem !important;
    }
    .trade-modal-logo-container {
        width: 44px !important;
        height: 44px !important;
    }
    .trade-modal-svg-container {
        height: clamp(65px, 12vh, 100px) !important;
    }
    .shares-panel-card {
        padding: 0.45rem 0.6rem !important;
        gap: 0.35rem !important;
    }
    .trade-modal-mode-section {
        margin: 0.15rem 0 !important;
    }
    .trade-modal-mode-desc {
        height: auto !important;
        font-size: 0.72rem !important;
    }
    .trade-modal-footer {
        gap: 0.35rem !important;
    }
    .btn-review-order,
    .btn-send-order {
        padding: 9px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-height: 650px) {
    dialog.trade-dialog {
        padding: 0.5rem 0.75rem !important;
    }
    .order-confirm-modal {
        padding: 0 !important;
    }
    .order-confirm-container {
        padding: 1rem 1.2rem !important;
    }
    .trade-modal-container {
        gap: 0.25rem !important;
    }
    .trade-modal-price {
        font-size: 1.4rem !important;
    }
    .trade-modal-logo-container {
        width: 36px !important;
        height: 36px !important;
    }
    .trade-modal-svg-container {
        height: 55px !important;
    }
    .shares-panel-card {
        padding: 0.35rem 0.5rem !important;
        gap: 0.25rem !important;
    }
    .trade-modal-dial-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Shares count and available cash layout */
.trade-modal-shares-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary, rgba(0,0,0,0.15));
    border: 1px solid var(--border-color, rgba(255,255,255,0.05));
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.trade-modal-dial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    flex-shrink: 0;
}

#trade-modal-avail-cash {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    text-align: center;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.trade-modal-dial-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-svg {
    transform: rotate(180deg);
    width: 100%;
    height: 100%;
}

.dial-bg {
    fill: none;
    stroke: rgba(255,255,255,0.05);
    stroke-width: 2.8;
}

.dial-progress {
    fill: none;
    stroke: var(--success, #10b981);
    stroke-width: 2.8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.1s ease-out;
}

.dial-center-badge {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-primary, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.trade-modal-shares-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.trade-modal-shares-count-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shares-count-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
}

.trade-modal-cost-val {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
    margin-top: 0.1rem;
}

.btn-keyboard-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 4px;
}

.btn-keyboard-toggle:hover {
    color: var(--text-primary, #ffffff);
}

/* Slider Custom Styling */
.trade-modal-slider-container {
    width: 100%;
    margin: 0.25rem 0;
}

.trade-modal-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    /* Was rgba(255,255,255,0.1) - a white track at 10% opacity, which reads on a
       dark panel and is invisible on a white one, so in light mode the thumb
       appeared to float with no rail. --slider-track flips with the theme. */
    background: var(--slider-track, rgba(255, 255, 255, 0.1));
    outline: none;
    cursor: pointer;
}

.trade-modal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary, #6366f1);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    transition: transform 0.1s ease;
}

.trade-modal-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Extended hours toggle / Closed warning */
.trade-modal-time-warning {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.1);
    padding: 0.5rem;
    border-radius: 8px;
}

.extended-hours-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Review Button styling: Dark Green for Buy, Dark Red for Sell */
.btn-review-order {
    background: #047857; /* Dark green for BUY */
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(4, 120, 87, 0.3);
}

.btn-review-order:hover {
    background: #065f46;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.45);
}

.btn-review-order:active {
    transform: translateY(1px);
}

.btn-review-order.btn-review-sell {
    background: #991b1b; /* Dark red for SELL */
    box-shadow: 0 4px 15px rgba(153, 27, 27, 0.3);
}

.btn-review-order.btn-review-sell:hover {
    background: #7f1d1d;
    box-shadow: 0 6px 20px rgba(153, 27, 27, 0.45);
}

/* Chart toolbar button while its data is being worked out. Not lit like the
   active state - the lines are not on the chart yet - but clearly busy. */
/* Per-range chart detail defaults (Profile > Display > Chart). */
.chart-interval-defaults {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.chart-interval-heading {
    margin-bottom: 0.6rem;
}

.chart-interval-row {
    display: grid;
    /* Pinned first column so every pill lines up regardless of "1D" vs "14D". */
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

/* A label, not a control - it shows which chart button the row configures. */
.chart-interval-pill {
    pointer-events: none;
    justify-self: start;
}

.chart-interval-pill .btn-duration {
    cursor: default;
    color: var(--text-primary);
}

.chart-interval-hint {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.chart-interval-row select {
    min-width: 104px;
}

/* Swing-trend lookback picker: slides out to the LEFT of its button, because
   chart settings and fullscreen sit to the right of it on the toolbar. */
.swing-trend-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.swing-lookback-picker {
    position: absolute;
    /* Above the button, not beside it. Beside it, the picker lay across the
       duration buttons - and since the trendline toggle persists, that left
       14D/1M/3M/1Y permanently covered and dimmed. Floating it over the
       chart's bottom edge clears them entirely. */
    right: 0;
    bottom: calc(100% + 8px);
    transform: translateY(4px) scale(0.94);
    transform-origin: bottom right;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    border-radius: 8px;
    /* Lifted off the toolbar rather than sitting flush in it. On a narrow
       layout this lands right beside the 1D/7D/14D duration strip, and two
       rows of small pills side by side read as one control - so this one gets
       an accent border, a shadow and its own caption to say it is a different
       thing being chosen. */
    /* Opaque, not --bg-card: that is rgba(15,23,42,0.65), so the chart showed
       through the picker and the pills were hard to read against a moving
       price line. A floating control needs its own solid ground. */
    background: #0f172a;
    border: 1px solid var(--accent-primary, #6366f1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(99, 102, 241, 0.12);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 6;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Small pointer back to the button it belongs to. */
.swing-lookback-picker::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-top-color: var(--accent-primary, #6366f1);
}

:root[data-theme="light"] .swing-lookback-picker {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(99, 102, 241, 0.10);
}

/* Replaces the options when no window works, so the answer appears where the
   question was asked instead of in a toast at the far corner of the screen. */
.swing-lookback-notice {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 2px 6px;
    white-space: nowrap;
}

.swing-lookback-picker.is-notice {
    border-color: var(--border-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.swing-lookback-picker.is-notice::after {
    border-top-color: var(--border-color);
}

.swing-lookback-caption {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-primary, #6366f1);
    padding: 0 5px 0 2px;
    border-right: 1px solid var(--border-color);
    margin-right: 3px;
}



.swing-trend-control.is-open .swing-lookback-picker {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.swing-lookback-opt {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

@media (hover: hover) {
    .swing-lookback-opt:hover:not(.is-unavailable):not(.is-selected) {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-primary);
    }
}

.swing-lookback-opt.is-selected {
    background: var(--accent-primary, #6366f1);
    color: #ffffff;
}

/* Still clickable - the picker says "nothing here", it does not forbid it. */
.swing-lookback-opt.is-unavailable {
    opacity: 0.32;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Before the first answer comes back nothing is known, so nothing is offered.
   No strike-through: that would claim these windows are dead when they have
   simply not been checked yet. */
.swing-lookback-opt.is-pending {
    opacity: 0.3;
    cursor: progress;
}

/* Toggled on, but this stock has no levels to show. Distinct from both the lit
   "on" state and the plain "off" one, because neither is true. */
.btn-chart-toolbar-icon.is-empty {
    opacity: 0.45;
    cursor: help;
}

.btn-chart-toolbar-icon.is-loading {
    color: var(--accent-primary, #6366f1);
    opacity: 0.9;
    cursor: progress;
}

/* Custom modern toggle switch rules.
   Keyed off .toggle-switch-container rather than a list of ids - the list meant
   every new switch had to be added here or it silently rendered as permanently
   off. The trade modal's switches carry their geometry inline, so they are
   unaffected by the class defaults below. */
.toggle-switch-container input:checked + .toggle-switch-track {
    background-color: var(--success, #10b981) !important;
    border-color: var(--success, #10b981) !important;
}

.toggle-switch-container input:checked ~ .toggle-switch-thumb {
    transform: translateX(20px);
    background-color: #ffffff !important;
}

/* Geometry for switches that do not set it inline (chart settings). */
.toggle-switch-container {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    flex-shrink: 0;
}

.toggle-switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch-container .toggle-switch-track {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease-out;
}

.toggle-switch-container .toggle-switch-thumb {
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

/* Chart settings toggle rows: badge, label block, switch. */
/* Both classes, deliberately: .chart-settings-row is declared later in this file
   with "display: flex; justify-content: space-between", so a single-class rule
   here lost on source order and the grid below never applied. Under flex the
   middle element was content-sized and pushed around by space-between, so the
   longer description started further left than the shorter one and the two rows
   did not line up.
   The first column is pinned rather than auto because grid items default to
   min-width:auto, which would let a wider glyph (fa-business-time vs
   fa-border-all) widen the column and take the label with it. */
.chart-settings-row.chart-settings-toggle-row {
    display: grid;
    grid-template-columns: 27px 1fr auto;
    align-items: center;
    justify-items: stretch;
    gap: 14px;
}

.chart-settings-row.chart-settings-toggle-row .chart-settings-toggle-text {
    min-width: 0;
}

.chart-settings-toggle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    min-width: 0;
    height: 27px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--text-secondary);
    color: var(--bg-primary);
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.chart-settings-toggle-row.is-on .chart-settings-toggle-badge {
    background: var(--success, #10b981);
    color: #ffffff;
}

.chart-settings-toggle-text .chart-settings-row-label {
    margin-bottom: 2px;
}

.chart-settings-toggle-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Always-visible Trigger inputs with smooth disabled/enabled transitions */
.trade-modal-trigger-inputs {
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
    width: 100%;
    margin: 0.6rem 0 !important;
}

.trade-modal-trigger-inputs .form-group {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    margin: 0;
    opacity: 0.22;
    filter: grayscale(1);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.trade-modal-trigger-inputs .form-group.active {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* CT-58 — rows the current mode has no use for (e.g. Stop in Dip Sniper mode, or
   the Dip Sniper rows outside that mode). Beats the base `display: flex !important`. */
.trade-modal-trigger-inputs .form-group.dip-collapsed { display: none !important; }

/* CT-58 — in Dip Sniper mode: the price line (reused Limit row) is the one thing
   you set; the rebound row lives under "Advanced" at the bottom. */
.trade-modal-trigger-inputs.dip-mode #group-limit-price { order: 1; }
.trade-modal-trigger-inputs.dip-mode #dip-advanced-toggle { order: 8; }
.trade-modal-trigger-inputs.dip-mode #group-dip-autodetect { order: 9; }
.trade-modal-trigger-inputs.dip-mode #group-dip-sniper { order: 10; }
.trade-modal-trigger-inputs.dip-mode #group-dip-rollonce { order: 11; }
/* Rebound row stays hidden until the owner opens "Advanced". */
.trade-modal-trigger-inputs .form-group.dip-advanced-hidden { display: none !important; }

/* Custom Price Stepper Inputs & Arrows */
.price-stepper-input::-webkit-outer-spin-button,
.price-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.price-stepper-input {
    -moz-appearance: textfield;
}

.price-mini-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    margin: 0;
    padding: 0;
    transition: background 0.15s ease;
}

.price-mini-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    border: 2px solid #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.12s ease;
}

.price-mini-slider::-webkit-slider-thumb:hover,
.price-mini-slider::-webkit-slider-thumb:active {
    transform: scale(1.25);
}

.price-mini-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    border: 2px solid #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* ─────────────────────────────────────────────────────────
   Landing/Start Page Styles
   ───────────────────────────────────────────────────────── */
#landing-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background-color: #0b0f19;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
}

.landing-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
}

.landing-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    width: 92%;
    margin: auto;
    padding: 1rem 0;
}

.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.15rem;
}

.landing-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.landing-header .highlight {
    color: #38bdf8;
}

.landing-header .pill {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}

.landing-main {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.75rem;
    align-items: center;
}

.landing-hero-text h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 0.4rem 0;
    background: linear-gradient(135deg, #ffffff 30%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-hero-text p {
    color: #94a3b8;
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 0 0 0.95rem 0;
}

.features-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.feature-card {
    display: flex;
    gap: 10px;
    align-items: center;
}

.feature-card i {
    font-size: 0.85rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-card h4 {
    margin: 0 0 1px 0;
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 600;
}

.feature-card p {
    margin: 0;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.3;
}

.landing-auth-card {
    background: rgba(18, 24, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 1.35rem 1.25rem;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.landing-auth-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.landing-auth-card p {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 0 0 1rem 0;
}

.btn-google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.86rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.btn-google-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
    background: #f8fafc;
}

.btn-dev-login {
    width: 100%;
    font-size: 0.78rem;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(99, 102, 241, 0.12);
    border: 1px dashed rgba(99, 102, 241, 0.35);
    color: #818cf8;
    transition: all 0.2s ease;
}

.btn-dev-login:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.6);
}

@media (max-width: 650px) {
    .landing-main {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }
    
    .landing-hero-text h2 {
        font-size: 1.3rem;
    }

    .landing-hero-text p {
        font-size: 0.78rem;
        margin-bottom: 0.65rem;
    }

    .features-grid {
        gap: 0.5rem;
    }

    .landing-auth-card {
        padding: 1rem;
    }
}

@media (max-height: 750px) {
    .landing-container {
        padding: 0.5rem 0 !important;
    }
    .landing-header {
        margin-bottom: 0.75rem !important;
    }
    .landing-main {
        gap: 1rem !important;
    }
    .landing-hero-text h2 {
        font-size: 1.35rem !important;
        margin-bottom: 0.35rem !important;
    }
    .landing-hero-text p {
        font-size: 0.78rem !important;
        margin-bottom: 0.65rem !important;
    }
    .features-grid {
        gap: 0.45rem !important;
    }
    .landing-auth-card {
        padding: 1rem 1rem !important;
    }
}

/* Watchlist Filter & Switcher Bar Responsive Styling */
.watchlist-filter-bar {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.watchlist-filter-sub-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

#watchlist-stock-count {
    display: none !important;
}

.watchlist-view-switcher button span {
    display: inline-block;
    max-width: 120px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.3s ease;
}

.watchlist-view-switcher button i,
.watchlist-view-switcher button svg {
    transition: margin 0.3s ease;
}

@media (max-width: 576px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .watchlist-filter-bar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-top: 0.4rem !important;
        padding-top: 0.4rem !important;
    }
    #watchlist-stock-count {
        display: none !important;
    }
    .watchlist-filter-bar .search-box {
        flex-grow: 1 !important;
        max-width: 100% !important;
    }
    .watchlist-filter-bar .search-box > i:first-child,
    .watchlist-filter-bar .search-box i.fa-magnifying-glass {
        left: 0.8rem !important;
    }
    .watchlist-filter-bar .search-box input {
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 2.2rem !important;
    }

    .watchlist-filter-bar.search-active .watchlist-view-switcher button span {
        max-width: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
    }
    .watchlist-filter-bar.search-active .watchlist-view-switcher button i,
    .watchlist-filter-bar.search-active .watchlist-view-switcher button svg {
        margin-right: 0 !important;
    }
    .watchlist-filter-sub-bar {
        width: auto !important;
    }
}

@container (max-width: 480px) {
    .watchlist-view-switcher button span {
        display: none !important;
    }
    .watchlist-view-switcher button i,
    .watchlist-view-switcher button svg {
        margin-right: 0 !important;
    }
    .watchlist-filter-bar {
        gap: 6px !important;
    }
    .watchlist-filter-sub-bar {
        gap: 6px !important;
    }
}

/* Front-screen filter bar: the search box and the two view modes were fighting
   over one row. The search held ~75% of it and both modes collapsed to bare
   icons, so neither said what it was. Idle, the search is only its magnifier
   and the "Search..." tip, which leaves room for both labels; focused, it
   expands and the modes fall back to icons. Driven by .search-active, which the
   input's own focus/blur/input handlers already set - no new JS.

   The :not(.search-active) rules deliberately outrank the @container block
   above, which hid the labels at every narrow width. */
@media (max-width: 576px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    /* The search takes whatever the row has left once the two modes have their
       full labels - no fixed collapsed width, so there is never a dead gap. It
       grows on focus because the labels give their space back, not because the
       box is re-measured. */
    .watchlist-filter-bar .search-box {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .watchlist-filter-bar:not(.search-active) .watchlist-view-switcher button span {
        display: inline-block !important;
        max-width: 120px !important;
        opacity: 1 !important;
    }
    .watchlist-filter-bar:not(.search-active) .watchlist-view-switcher button i,
    .watchlist-filter-bar:not(.search-active) .watchlist-view-switcher button svg {
        margin-right: 4px !important;
    }

    /* Kept as a max-width collapse rather than display:none so the labels
       animate out instead of blinking out from under the finger. */
    .watchlist-filter-bar.search-active .watchlist-view-switcher button span {
        display: inline-block !important;
        max-width: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 991px) {
    .watchlist-stock-item, .portfolio-item-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .portfolio-item-card {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 4px !important;
        row-gap: 6px !important;
        padding: 0.6rem 0.5rem !important;
    }
    .portfolio-item-card .drag-handle {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        margin-right: 0 !important;
        gap: 6px !important;
        padding: 0 !important;
        margin-left: 0 !important;
    }
    .portfolio-item-card .drag-handle i {
        display: none !important;
    }
    .portfolio-item-icon {
        width: 38px !important;
        height: 38px !important;
        margin-right: 0 !important;
    }
    .portfolio-item-details {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        margin-right: 0 !important;
        min-width: 0 !important;
    }
    .portfolio-item-title {
        font-size: 0.75rem !important;
    }
    .portfolio-item-meta {
        font-size: 0.61rem !important;
        gap: 0.3rem !important;
    }
    .portfolio-shares-badge {
        padding: 0.12rem 0.35rem !important;
        font-size: 0.58rem !important;
    }
    .portfolio-item-prices {
        display: none !important;
    }
    .portfolio-item-financials {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        justify-self: end !important;
        align-self: center !important;
        min-width: 0 !important;
    }
    .portfolio-item-value {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
    }
    .portfolio-item-return {
        font-size: 0.60rem !important;
    }
    .sell-limit-amount {
        display: none !important;
    }
    .portfolio-list {
        gap: 0.28rem !important;
    }
    .portfolio-item-container {
        margin-bottom: 0.28rem !important;
    }
    .pagination-view-toggle {
        display: none !important;
    }
    .pagination-container {
        padding: 0.5rem 0.5rem !important;
        gap: 0.35rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 0 12px 12px !important;
        overflow: hidden !important;
    }
    .pagination-container .btn {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .slider-pagination-wrap {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 150px !important;
        gap: 2px !important;
    }
    .pagination-info {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }
    .page-slider {
        width: 100% !important;
    }

    /* Mobile Browse List Rows - prevent squashing and compact actions */
    .browse-list-row {
        padding: 0.55rem 0.65rem !important;
        gap: 0.45rem !important;
        border-radius: 10px !important;
    }
    .browse-logo-wrap {
        width: 58px !important;
        height: 58px !important;
        border-radius: 12px !important;
    }
    .browse-list-col-main .browse-card-logo,
    .browse-list-col-main .browse-card-logo-fallback {
        width: 58px !important;
        height: 58px !important;
        font-size: 1.35rem !important;
        border-radius: 12px !important;
    }
    .browse-stock-name {
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .browse-stock-sector {
        font-size: 0.65rem !important;
    }
    .browse-stock-tags {
        gap: 0.2rem !important;
        margin-top: 0.15rem !important;
    }
    .browse-stock-tags .ticker-pill,
    .browse-stock-tags .exchange-badge {
        font-size: 0.65rem !important;
        padding: 0.05rem 0.25rem !important;
    }
    .browse-list-col-price {
        flex: 0 0 auto !important;
        text-align: right !important;
        min-width: 0 !important;
    }
    .browse-list-col-price .list-row-price {
        font-size: 0.90rem !important;
        line-height: 1.2 !important;
    }
    .browse-list-col-price .list-row-change {
        font-size: 0.70rem !important;
        white-space: nowrap !important;
    }
    .browse-list-col-actions {
        flex: 0 0 auto !important;
        gap: 0.2rem !important;
        justify-content: flex-end !important;
    }
    /* Hide the bulky market cap and volume pills in browse list row on mobile so company title isn't squashed */
    .browse-list-col-actions .stock-card-meta {
        display: none !important;
    }
    .browse-list-col-actions .btn-card-heart,
    .btn-card-heart {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .browse-catalog-panel .card.section-card {
        margin-bottom: 0.5rem !important;
        border-radius: 14px !important;
        padding: 0.75rem 0.85rem 0.5rem 0.85rem !important;
    }
    .browse-catalog-panel .card-header {
        padding: 0 !important;
        margin-bottom: 0.5rem !important;
        border-bottom: none !important;
    }
    .browse-controls {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }
    .browse-controls::-webkit-scrollbar {
        display: none !important;
    }
    .browse-controls .search-box,
    .browse-search-box {
        flex: 1 1 auto !important;
        min-width: 160px !important;
        max-width: 100% !important;
        height: 38px !important;
    }
    #filter-exchange, #filter-cost, #sort-browse {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 125px !important;
        max-width: 155px !important;
        padding: 0.45rem 1.75rem 0.45rem 0.65rem !important;
        background-position: right 0.55rem center !important;
        background-size: 0.8rem !important;
        position: relative !important;
        z-index: 2 !important;
    }
    #browse-category-bar,
    .browse-catalog-panel .category-pills-bar {
        padding: 0.2rem 0 0.45rem 0 !important;
        margin-bottom: 0.4rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        -webkit-overflow-scrolling: touch;
    }
    #browse-subfilter-bar,
    .browse-catalog-panel .subfilter-pills-bar {
        padding: 0.1rem 0 0.25rem 0 !important;
        border-bottom: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .browse-grid,
    .browse-catalog-panel .browse-grid {
        margin-top: 0.25rem !important;
        padding-top: 0 !important;
        padding-bottom: 0.75rem !important;
        gap: 0.5rem !important;
    }
}

/* Disabled Tab States */
.menu-item.disabled,
.bottom-nav-item.disabled {
    pointer-events: none !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* Hide Grid/List Toggle Completely */
#browse-view-toggle {
    display: none !important;
}

/* Portfolio Chevron Accordion Rotation */

/* Portfolio Chevron Accordion Rotation */
.portfolio-chevron {
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
    display: inline-block;
}
.portfolio-item-container:has(.portfolio-accordion-panel.open) .portfolio-chevron {
    transform: rotate(180deg);
}



/* ─── Unified Tabbed Settings Section (Segmented Design matching Market Hub) ─── */
.settings-tabs-container {
    padding: 0.15rem 0 0.75rem 0;
    flex-shrink: 0;
}

.settings-tab-bar {
    display: flex !important;
    gap: 6px;
    background: var(--bg-primary, #090d16);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #1e293b);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
}

.settings-tab-bar::-webkit-scrollbar {
    display: none;
}

.settings-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth, all 0.2s ease);
    user-select: none;
}

.settings-tab-btn:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.04);
}

.settings-tab-btn.active {
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: none;
}

[data-theme="light"] .settings-tab-bar {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

[data-theme="light"] .settings-tab-btn {
    color: #64748b;
}

[data-theme="light"] .settings-tab-btn:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .settings-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.settings-group {
    display: none !important;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.settings-group.active:not(.admin-only) {
    display: flex !important;
}

.settings-column-header {
    display: none !important;
}

.admin-only {
    display: none !important;
}

.is-admin .admin-only:not(.settings-group) {
    display: block !important;
}

.is-admin .settings-group.admin-only.active {
    display: flex !important;
}

[data-theme="light"] .settings-tab-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
[data-theme="light"] .settings-tab-btn:hover {
    background: #eef2ff;
    border-color: #818cf8;
    color: #4338ca;
}
[data-theme="light"] .settings-tab-btn.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* Site Administration Control Center Styling */
.admin-header-card {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(30, 41, 59, 0.6) 100%);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
}

.admin-header-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.admin-header-subtitle {
    margin: 3px 0 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.admin-header-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid rgba(239, 68, 68, 0.4);
    flex-shrink: 0;
}

.admin-role-badge {
    font-size: 0.65rem;
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.45);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Light Theme Admin Overrides */
[data-theme="light"] .admin-header-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, #ffffff 50%, rgba(254, 242, 242, 0.85) 100%);
    border: 1px solid rgba(239, 68, 68, 0.28);
    box-shadow: 0 4px 20px -2px rgba(239, 68, 68, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .admin-header-icon-box {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .admin-role-badge {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.35);
}

/* Profile menu admin button light theme */
.profile-nav-action-btn.admin-action {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(30, 41, 59, 0.4) 100%);
}

[data-theme="light"] .profile-nav-action-btn.admin-action {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, #ffffff 60%, rgba(254, 242, 242, 0.8) 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Telemetry & KPI Cards */
.admin-kpi-card {
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.admin-kpi-card .kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 700;
}

.admin-kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 4px 0;
    line-height: 1.2;
}

.admin-kpi-card .kpi-subtext {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.admin-kpi-card .kpi-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Blue Card */
.admin-kpi-card.kpi-blue {
    border-left: 4px solid #38bdf8;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, var(--bg-card) 100%);
}
.admin-kpi-card.kpi-blue .kpi-value { color: #38bdf8; }
.admin-kpi-card.kpi-blue .kpi-icon-box { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }

/* Green Card */
.admin-kpi-card.kpi-green {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, var(--bg-card) 100%);
}
.admin-kpi-card.kpi-green .kpi-value { color: #10b981; }
.admin-kpi-card.kpi-green .kpi-icon-box { background: rgba(16, 185, 129, 0.15); color: #10b981; }

/* Purple Card */
.admin-kpi-card.kpi-purple {
    border-left: 4px solid #a78bfa;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.06) 0%, var(--bg-card) 100%);
}
.admin-kpi-card.kpi-purple .kpi-value { color: #a78bfa; }
.admin-kpi-card.kpi-purple .kpi-icon-box { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }

/* Amber Card */
.admin-kpi-card.kpi-amber {
    border-left: 4px solid #fbbf24;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, var(--bg-card) 100%);
}
.admin-kpi-card.kpi-amber .kpi-value { color: #fbbf24; }
.admin-kpi-card.kpi-amber .kpi-icon-box { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

/* Light Theme Overrides for KPI Cards */
[data-theme="light"] .admin-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .admin-kpi-card.kpi-blue {
    border-left: 4px solid #0284c7;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.04) 0%, #ffffff 100%);
}
[data-theme="light"] .admin-kpi-card.kpi-blue .kpi-value { color: #0284c7; }
[data-theme="light"] .admin-kpi-card.kpi-blue .kpi-icon-box { background: rgba(2, 132, 199, 0.1); color: #0284c7; }

[data-theme="light"] .admin-kpi-card.kpi-green {
    border-left: 4px solid #059669;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.04) 0%, #ffffff 100%);
}
[data-theme="light"] .admin-kpi-card.kpi-green .kpi-value { color: #059669; }
[data-theme="light"] .admin-kpi-card.kpi-green .kpi-icon-box { background: rgba(5, 150, 105, 0.1); color: #059669; }

[data-theme="light"] .admin-kpi-card.kpi-purple {
    border-left: 4px solid #7c3aed;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, #ffffff 100%);
}
[data-theme="light"] .admin-kpi-card.kpi-purple .kpi-value { color: #7c3aed; }
[data-theme="light"] .admin-kpi-card.kpi-purple .kpi-icon-box { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }

[data-theme="light"] .admin-kpi-card.kpi-amber {
    border-left: 4px solid #d97706;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.04) 0%, #ffffff 100%);
}
[data-theme="light"] .admin-kpi-card.kpi-amber .kpi-value { color: #d97706; }
[data-theme="light"] .admin-kpi-card.kpi-amber .kpi-icon-box { background: rgba(217, 119, 6, 0.1); color: #d97706; }

/* Custom Dropdown Styling */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.custom-select-trigger:hover {
    border-color: var(--border-hover);
}

.custom-select-container.open .custom-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.custom-select-arrow {
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.custom-select-container.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    overflow: hidden;
    padding: 0.35rem 0;
}

[data-theme="light"] .custom-select-options {
    background: #ffffff;
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.custom-select-container.open .custom-select-options {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .custom-select-option {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: rgba(99, 102, 241, 0.12);
}

.custom-select-option.selected {
    background: rgba(99, 102, 241, 0.2);
    border-left: 3px solid var(--primary, #6366f1);
}

.custom-option-icon {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.custom-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.custom-option-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.custom-option-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.2;
}/* Align Profile Menu Dropdown to the right to fit headers */
.profile-dropdown-menu {
    left: auto !important;
    right: 0 !important;
    width: 220px !important;
    padding: 0.25rem 0 !important;
}

.profile-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.88rem !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.profile-dropdown-item:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.profile-dropdown-item.danger-item {
    color: var(--danger, #f43f5e) !important;
}

.profile-dropdown-item.danger-item:hover {
    color: #ffffff !important;
    background: var(--danger, #f43f5e) !important;
}

@media (max-width: 575px) {
    .stock-sparkline-wrap {
        display: flex !important;
        padding: 0 4px !important;
        margin-right: 6px !important;
        margin-left: auto !important;
    }
    .stock-sparkline-wrap .sparkline-svg {
        width: 42px !important;
        height: 18px !important;
    }
    
    .portfolio-item-card {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 4px !important;
        row-gap: 6px !important;
        padding: 0.6rem 0.5rem !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .portfolio-item-card .drag-handle {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        margin-right: 0 !important;
    }
    
    .portfolio-item-icon {
        width: 38px !important;
        height: 38px !important;
    }
    
    .portfolio-item-details {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        margin-right: 0 !important;
        min-width: 0 !important;
    }
    
    .portfolio-item-prices {
        display: none !important;
    }
    
    .portfolio-item-financials {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        justify-self: end !important;
        align-self: center !important;
        min-width: 0 !important;
    }

    .sell-limit-amount {
        display: none !important;
    }

    .portfolio-footer-bar {
        grid-template-columns: 2.3fr 0.9fr 1.1fr !important;
        font-size: 0.65rem !important;
        padding: 6px 10px !important;
    }
    
    .portfolio-footer-note-badge, 
    .portfolio-footer-trades-badge,
    .portfolio-term-tag {
        font-size: 0.58rem !important;
        padding: 1px 4px !important;
    }
    
    .portfolio-footer-sell-limit {
        font-size: 0.62rem !important;
    }

    .main-content {
        padding: 0.5rem 0.5rem 80px 0.5rem !important;
        padding-top: 68px !important;
    }
    
    .card {
        padding: 1rem 0.75rem !important;
        border-radius: 12px !important;
    }

}

/* Watchlist rows reuse .portfolio-item-card but carry a different child set
   (.stock-info / .stock-sparkline-wrap / .stock-right-group), so the portfolio
   holdings mobile grid above (auto 1fr auto / auto auto) scatters them — name
   detaches from the logo, price drops to a second row. Keep watchlist rows a
   plain flex row on mobile, matching the desktop layout. */
@media (max-width: 991px) {
    .portfolio-item-card.watchlist-stock-item {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        align-items: center !important;
        column-gap: 4px !important;
        padding: 0.5rem 0.65rem !important;
    }
    .portfolio-item-card.watchlist-stock-item .stock-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 8px !important;
    }
    .portfolio-item-card.watchlist-stock-item .stock-sparkline-wrap {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }
    .portfolio-item-card.watchlist-stock-item .stock-right-group {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        text-align: right !important;
    }
}
@media (max-width: 575px) {
    /* Too narrow for name + sparkline + price — drop the sparkline. */
    .portfolio-item-card.watchlist-stock-item .stock-sparkline-wrap {
        display: none !important;
    }
}

/* Portfolio Groups Pinned Header */
.portfolio-sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--bg-card);
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-groups-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.portfolio-groups-scroll-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    flex-grow: 1;
    min-width: 0;
}

.portfolio-groups-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.portfolio-groups-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.portfolio-group-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
}

.portfolio-group-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.portfolio-group-tab.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}

.portfolio-group-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    padding-left: 0.6rem;
}

/* Unified Edit Mode Row Scaling */
.watchlist-item-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0.28rem;
}

.watchlist-stock-item, .portfolio-item-container {
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: left;
    margin-bottom: 0 !important; /* Wrapper handles spacing */
}

/* Edit mode scales the inner CARD, never the outer container. Both views nest
   wrapper > .portfolio-item-container > .portfolio-item-card, so scaling the
   card leaves the panel at full width and shrinks its contents inside it -
   which is what makes room for the grab handle and pencil to sit within the
   panel rather than outside it. The watchlist already did this only because
   ".watchlist-stock-item" happens to be the inner card; the portfolio matched
   on the outer container instead, so its whole panel shrank and pushed both
   controls out. The watchlist card carries both classes, so targeting
   .portfolio-item-card covers the two views with one rule. */
.portfolio-item-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: left;
}

.watchlist-item-wrapper.edit-mode-active .portfolio-item-card,
.portfolio-item-wrapper.edit-mode-active .portfolio-item-card {
    transform: translateX(32px) scaleX(0.78);
}

.watchlist-row-edit-btn, .portfolio-row-edit-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    pointer-events: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.watchlist-item-wrapper.edit-mode-active .watchlist-row-edit-btn,
.portfolio-item-wrapper.edit-mode-active .portfolio-row-edit-btn {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.row-grab-handle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    pointer-events: none;
    width: 32px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-tertiary, #64748b);
    cursor: grab;
    touch-action: none;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.watchlist-item-wrapper.edit-mode-active .row-grab-handle,
.portfolio-item-wrapper.edit-mode-active .row-grab-handle {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.row-grab-handle i { font-size: 1rem; pointer-events: none; }
.row-grab-handle:active { cursor: grabbing; color: var(--accent-primary, #6366f1); }

/* Pie rows are not reorderable, so they must not advertise a handle. */
.portfolio-pie-item-wrapper .row-grab-handle { display: none !important; }

.watchlist-row-edit-btn:hover, .portfolio-row-edit-btn:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-50%) scale(1.05);
}

.left-col .card.section-card {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* AI Ranked Badges Row */
.watchlist-stock-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color);
    width: 100%;
}

/* High Contrast Light Mode Positive & Green Color Overrides */
[data-theme="light"] .stock-change-val.positive,
[data-theme="light"] .text-success,
[data-theme="light"] .positive,
[data-theme="light"] .header-return-badge.positive,
[data-theme="light"] .header-stat-val.cash-val,
[data-theme="light"] .cycle-pnl-pill.positive,
[data-theme="light"] .change-badge.positive,
[data-theme="light"] .val-badge.high,
[data-theme="light"] .badge-buy,
[data-theme="light"] .portfolio-order-badge.order-buy {
    color: #15803d !important;
}

[data-theme="light"] .header-return-badge.positive,
[data-theme="light"] .val-badge.high,
[data-theme="light"] .badge-buy,
[data-theme="light"] .portfolio-order-badge.order-buy,
[data-theme="light"] .cycle-pnl-pill.positive {
    background: rgba(21, 128, 61, 0.12) !important;
    border-color: rgba(21, 128, 61, 0.3) !important;
}

/* AI Horizon Submenu Bar Base (Dark Mode Default) */
.watchlist-ai-horizon-bar {
    margin-top: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.watchlist-ai-horizon-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.watchlist-ai-horizon-toggle {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 2px;
    margin-left: auto;
}

.btn-watchlist-horizon {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.18s ease-in-out;
}

.btn-watchlist-horizon:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-watchlist-horizon.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35) !important;
}

/* AI Horizon Submenu Bar Light Mode */
[data-theme="light"] .watchlist-ai-horizon-bar {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .watchlist-ai-horizon-label {
    color: #4f46e5 !important;
}

[data-theme="light"] .watchlist-ai-horizon-toggle {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .btn-watchlist-horizon {
    color: #64748b !important;
}

[data-theme="light"] .btn-watchlist-horizon:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .btn-watchlist-horizon.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.25) !important;
}

/* ==============================================================================
   Chart Type Switcher & Fullscreen Popout Controls
   ============================================================================== */
.chart-type-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 2px;
}

.chart-interval-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 2px;
    align-items: center;
}

.btn-chart-interval {
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

.btn-chart-interval:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-chart-interval.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35);
}

[data-theme="light"] .chart-interval-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-chart-interval {
    color: #64748b;
}

[data-theme="light"] .btn-chart-interval:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-chart-interval.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.btn-chart-type {
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.18s ease;
}

.btn-chart-type:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-chart-type.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35);
}

/* Underneath Chart Toolbar (Left: Segmented Durations, Right: Settings Cog & Fullscreen) */
.chart-bottom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

.chart-durations-segmented {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.btn-duration {
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-duration:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.btn-duration.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35);
}

/* Chart Toolbar Actions (Settings Cog & Fullscreen) matching duration buttons */
.chart-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-chart-toolbar-icon {
    padding: 5px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}

/* Hover states on the chart toolbar are gated behind a real hover device.
   A tap on a touch screen leaves :hover applied until something else is
   touched, so a button switched OFF kept its lit highlight and looked on. */
@media (hover: hover) {
    .btn-chart-toolbar-icon:hover {
        background: rgba(99, 102, 241, 0.15) !important;
        color: #818cf8 !important;
    }
}

/* TimesFM AI Forecast & Backtest Buttons */
.btn-chart-forecast {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #c7d2fe !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.btn-chart-forecast:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
}

.btn-chart-forecast.active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.5) !important;
}

.btn-chart-backtest {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #a7f3d0 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.btn-chart-backtest:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.btn-chart-backtest.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

/* AI Outlook View Tab Controller */
.ai-view-tabs .ai-tab-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.ai-view-tabs .ai-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.08);
}

.ai-view-tabs .ai-tab-btn.active {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Support Levels Toggle Button in Chart Header & Settings */
.btn-chart-support-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-chart-support-toggle i {
    color: #eab308;
    font-size: 0.76rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .btn-chart-support-toggle:hover {
        background: rgba(250, 204, 21, 0.12);
        border-color: rgba(250, 204, 21, 0.4);
        color: #fef08a;
    }
}

@media (hover: hover) {
    .btn-chart-support-toggle:hover i {
        transform: scale(1.1);
    }
}

.btn-chart-support-toggle.active {
    background: rgba(250, 204, 21, 0.18) !important;
    border-color: rgba(250, 204, 21, 0.65) !important;
    color: #facc15 !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
    font-weight: 700;
}

.btn-chart-support-toggle.active i {
    color: #facc15 !important;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

/* Top-Right Now Jump Button in Chart Header */
.btn-chart-now {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.btn-chart-now:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn-chart-now:not(:disabled) {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.35);
}

.btn-chart-now:not(:disabled):hover {
    background: rgba(99, 102, 241, 0.28);
    color: #a5b4fc;
}

/* Fullscreen Pop-out Mode for Chart Card (85% Viewport Overlay) */
body.chart-fullscreen-open {
    overflow: hidden !important;
}

body.chart-fullscreen-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99998;
    animation: chart-fullscreen-backdrop-in 0.22s ease;
}

/* Both keep the centring translate, or the card slides off its own centre. */
@keyframes chart-fullscreen-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.965); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes chart-fullscreen-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-card.is-fullscreen { animation: none; }
    body.chart-fullscreen-open::after { animation: none; }
}

/* No layout transition into fullscreen.
   .card sets "transition: all", and going fullscreen switches the element from
   in-flow to position:fixed with top/left at 50%. Position cannot be animated,
   so the card jumped into the fixed context and then animated top/left/width/
   height away from values that had been "auto" - i.e. from an arbitrary origin.
   In a single-column layout it starts near the centre and barely shows; in the
   two-column split it starts in the right-hand column and the expansion looks
   misaligned. A short scale-and-fade from the final position instead, which is
   honest about where the panel is going. */
.chart-card.is-fullscreen {
    transition: none !important;
    animation: chart-fullscreen-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 85vw !important;
    height: 85vh !important;
    max-width: 1400px !important;
    max-height: 900px !important;
    z-index: 99999 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: var(--bg-card, #0f172a) !important;
    padding: 1.25rem 1.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85) !important;
    border: 1px solid var(--border-color) !important;
}

.chart-card.is-fullscreen .card-header {
    margin-bottom: 0.75rem !important;
    position: relative;
    /* Room for the close button, which sits at the left in fullscreen. */
    padding-left: 2.25rem !important;
}

/* Close sits top-left in fullscreen, matching the chart settings dialog and the
   other popups. It lives inside the right-hand actions group in the markup, so
   "order" cannot move it - it is lifted out with absolute positioning instead. */
.chart-card.is-fullscreen .btn-chart-fullscreen-header {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 4px 8px !important;
    background: none;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 1.1rem;
}

.chart-card.is-fullscreen .btn-chart-fullscreen-header:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.06);
}

/* #chart-container is pinned to 380px by height AND min/max-height. Overriding
   height alone left max-height clamping it, so in fullscreen the chart instance
   sized its canvases to the 900px card while the element stayed 380px tall. The
   canvases spilled out, which made the ancestor column scrollable and floated a
   stray scrollbar over the modal. The clamps have to be released too. */
.chart-card.is-fullscreen #chart-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
}

/* Dedicated AI Chart Fullscreen Modal */
.ai-chart-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chart-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-chart-fullscreen-card {
    position: relative;
    z-index: 1;
    width: 88vw;
    height: 86vh;
    max-width: 1440px;
    max-height: 920px;
    background: var(--bg-card, #0f172a);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9);
}

.ai-chart-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

/* Chart Settings Modal */
.chart-settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.chart-settings-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.chart-settings-modal {
    background: var(--bg-card, #131b2e);
    border: 1px solid var(--border-color, #2d3748);
    border-radius: 20px;
    width: 94%;
    max-width: 560px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    /* The CHART TYPE and CHART DISPLAY headings are gone - the cards and the
       toggles say what they are - so this gap is now the only thing separating
       the groups. At 1.25rem it read as a hole where a heading used to be. */
    gap: 0.9rem;
}

.chart-settings-backdrop.open .chart-settings-modal {
    transform: scale(1);
}

.chart-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.chart-settings-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0;
    text-align: center;
    width: 100%;
}

.btn-chart-settings-close {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-chart-settings-close:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(255, 255, 255, 0.08);
}

.chart-settings-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.6rem;
}

.chart-type-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.chart-type-card {
    background: var(--bg-secondary, #1e293b);
    border: 2px solid var(--border-color, #334155);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transition: all 0.18s ease;
    text-align: left;
    user-select: none;
}

.chart-type-card:hover {
    border-color: var(--text-muted, #64748b);
    background: var(--bg-card, #1e293b);
}

.chart-type-card.active {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
    box-shadow: 0 0 0 1px #0284c7;
}

.chart-type-card-icon {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.chart-type-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.chart-type-card-desc {
    font-size: 0.74rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.35;
}

.chart-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
}

.chart-settings-row-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.chart-period-select {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border-color, #334155);
    color: var(--text-primary, #ffffff);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
}

.chart-period-select:hover,
.chart-period-select:focus {
    border-color: #0284c7;
}

[data-theme="light"] .chart-settings-modal {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .chart-type-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .chart-type-card.active {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.05) !important;
}

[data-theme="light"] .chart-period-select {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .chart-card.is-fullscreen {
    background: #ffffff !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3) !important;
}

/* Candlestick OHLC Tooltip */
.tooltip-ohlc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.7rem;
    font-family: monospace;
    margin-top: 3px;
}

.tooltip-ohlc-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tooltip-ohlc span.lbl {
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
}

/* ─── Interactive Stock AI Copilot Styles ──────────────────────────────────────── */
#stock-copilot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.copilot-modal-container {
    max-width: 680px;
    width: 92%;
    height: 82vh;
    height: 82dvh;
    max-height: 720px;
    background: var(--bg-card, #121828);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    padding: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #stock-copilot-modal {
        padding: 0 !important;
        align-items: flex-end !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    #stock-copilot-modal .copilot-modal-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 94dvh !important;
        height: 94% !important;
        max-height: 100% !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        margin: 0 !important;
    }

    #stock-copilot-modal .copilot-header {
        padding: 0.75rem 1rem !important;
    }

    #stock-copilot-modal .copilot-chips-bar {
        padding: 0.5rem 1rem !important;
    }

    #stock-copilot-modal .copilot-messages {
        padding: 0.85rem 1rem !important;
    }

    #stock-copilot-modal .copilot-input-bar {
        padding: 0.65rem 1rem max(0.65rem, env(safe-area-inset-bottom, 0px)) 1rem !important;
    }
}

.copilot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.copilot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.copilot-chips-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.65rem 1.25rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.btn-copilot-chip {
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-copilot-chip:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.copilot-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    /* Reserve the track instead of letting an overlay scrollbar float over the
       text on hover. Without this the bar appears inset from the modal edge -
       the padding puts it there - so it reads as a stray bar down the middle of
       the panel rather than the edge of a scroll area. */
    scrollbar-gutter: stable;
}
/* Anchored to the edge and always the same width, so hovering cannot change the
   layout underneath it. */
.copilot-messages::-webkit-scrollbar { width: 8px; }
.copilot-messages::-webkit-scrollbar-track { background: transparent; }
.copilot-messages::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.35); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
}
.copilot-messages::-webkit-scrollbar-thumb:hover { background: rgba(129, 140, 248, 0.55); background-clip: content-box; }

.copilot-msg {
    display: flex;
    gap: 10px;
    max-width: 88%;
    animation: fadeIn 0.2s ease;
}

.copilot-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.copilot-msg.assistant {
    align-self: flex-start;
}

.copilot-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.copilot-msg.user .copilot-msg-bubble {
    background: #4f46e5;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.copilot-msg.assistant .copilot-msg-bubble {
    background: var(--bg-tertiary, #1a2234);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 2px;
}

.copilot-msg.assistant .copilot-msg-bubble p {
    margin: 0 0 0.5rem 0;
}
.copilot-msg.assistant .copilot-msg-bubble p:last-child {
    margin-bottom: 0;
}
.copilot-msg.assistant .copilot-msg-bubble ul,
.copilot-msg.assistant .copilot-msg-bubble ol {
    margin: 0.35rem 0;
    padding-left: 1.2rem;
}
.copilot-msg.assistant .copilot-msg-bubble li {
    margin-bottom: 0.25rem;
}
.copilot-msg.assistant .copilot-msg-bubble strong {
    color: #38bdf8;
}

.copilot-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.copilot-input-bar input {
    flex: 1;
    background: var(--bg-primary, #0b0f19);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.86rem;
}

.copilot-input-bar input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.copilot-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-tertiary, #1a2234);
    border-radius: 12px;
    width: fit-content;
}

.copilot-typing-dot {
    width: 6px;
    height: 6px;
    background: #818cf8;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}
.copilot-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.copilot-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

[data-theme="light"] .copilot-modal-container {
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .copilot-msg.assistant .copilot-msg-bubble {
    background: #f1f5f9;
    color: #0f172a;
}
[data-theme="light"] .copilot-msg.assistant .copilot-msg-bubble strong {
    color: #0284c7;
}
[data-theme="light"] .btn-copilot-chip {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}
[data-theme="light"] .copilot-input-bar input {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* ─── Copilot Quick Dock Card & Horizontal Track ──────────────────────────── */
.copilot-quick-dock-card {
    background: var(--bg-secondary, rgba(18, 24, 40, 0.7));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.25rem 1.25rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
    margin-top: 0.75rem;
    min-height: auto;
    height: auto;
}

.copilot-dock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    padding: 0 0.1rem;
}

.copilot-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: copilotGlowPulse 2s infinite ease-in-out;
}

@keyframes copilotGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; box-shadow: 0 0 6px #10b981; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #34d399; }
}

.copilot-track-scroll-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-top: 4px;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.copilot-track-scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}

.copilot-track-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.copilot-track-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 4px;
}

.copilot-track-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

.copilot-track-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    width: max-content !important;
    min-height: 48px !important;
    padding: 4px 2px 6px 2px !important;
}

.copilot-track-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 9999px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    user-select: none !important;
    height: 42px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.copilot-track-btn:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.55) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25) !important;
}

.copilot-track-btn:active {
    transform: translateY(0) !important;
}

.copilot-chat-launch-pill {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.3) 0%, rgba(6, 182, 212, 0.25) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.copilot-chat-launch-pill:hover {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.55) 0%, rgba(6, 182, 212, 0.45) 100%) !important;
    border-color: rgba(99, 102, 241, 0.8) !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4) !important;
    transform: scale(1.06) !important;
}

.copilot-funky-icon-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}

.copilot-bot-icon {
    font-size: 0.92rem;
    color: #ffffff;
    animation: copilotBotPulse 3s infinite ease-in-out;
}

.copilot-sparkle-1 {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 0.55rem;
    color: #facc15;
    animation: copilotSparkle 2s infinite ease-in-out;
}

.copilot-sparkle-2 {
    position: absolute;
    bottom: -2px;
    left: -2px;
    font-size: 0.5rem;
    color: #38bdf8;
    animation: copilotSparkle 2.5s infinite ease-in-out 0.5s;
}

@keyframes copilotBotPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.1) rotate(-5deg); }
    60% { transform: scale(1.05) rotate(5deg); }
}

@keyframes copilotSparkle {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* Light Theme Overrides */
[data-theme="light"] .copilot-quick-dock-card {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .copilot-track-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
[data-theme="light"] .copilot-track-btn:hover {
    background: #eef2ff !important;
    border-color: #818cf8 !important;
    color: #4338ca !important;
}
[data-theme="light"] .copilot-chat-launch-pill {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}
[data-theme="light"] .copilot-chat-launch-pill:hover {
    background: #e0e7ff !important;
    border-color: #818cf8 !important;
}

/* Peer Comparison Table */
.peers-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.peers-comparison-table th {
    padding: 0.5rem 0.6rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.peers-comparison-table td {
    padding: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.peers-comparison-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.peers-comparison-table tr.target-row td {
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
}

/* ==========================================================================
   Global Markets & Macro Economic Hub Slide-Out Drawer
   ========================================================================== */
.market-hub-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.market-hub-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.market-hub-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 640px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-secondary, #0f172a);
    border-left: 1px solid var(--border-color, #1e293b);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.6);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.market-hub-backdrop.open .market-hub-drawer {
    transform: translateX(0);
}

@media (max-width: 640px) {
    .market-hub-drawer {
        width: 100vw;
        border-left: none;
    }
}

.market-hub-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #1e293b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary, #090d16);
    flex-shrink: 0;
}

.market-hub-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.market-hub-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #818cf8;
}

.market-hub-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    letter-spacing: -0.2px;
}

.market-hub-subtitle {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
}

.btn-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #1e293b);
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition-smooth, all 0.2s ease);
}

.btn-drawer-close:hover {
    color: var(--text-primary, #ffffff);
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Tabs */
.market-hub-tabs-container {
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary, #0f172a);
    border-bottom: 1px solid var(--border-color, #1e293b);
    flex-shrink: 0;
}

.market-hub-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-primary, #090d16);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #1e293b);
}

.market-hub-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth, all 0.2s ease);
}

.market-hub-tab:hover {
    color: var(--text-primary, #ffffff);
}

.market-hub-tab.active {
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Body & Content */
.market-hub-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.market-hub-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

/* Market Hours Summary Bar */
.market-hours-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary, #1e293b);
    border: 1px solid var(--border-color, #2d3748);
    border-radius: 10px;
    flex-shrink: 0;
}

.market-hours-clock-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.market-hours-clock-pill .pill-label {
    color: var(--text-muted, #64748b);
}

.market-hours-clock-pill strong {
    color: var(--text-primary, #ffffff);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.9rem;
}

.market-hours-status-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #10b981;
}

/* Market Hours Grid */
.market-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-bottom: 2rem;
}

/* Market Card */
.market-card {
    background: var(--bg-tertiary, #1e293b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth, all 0.2s ease);
}

.market-card:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: #25334d;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.market-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.market-card-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.market-card-flag {
    font-size: 1.55rem;
    line-height: 1;
}

.market-card-names {
    display: flex;
    flex-direction: column;
}

.market-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.market-card-city {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

/* Status Badges - Coordinated with Chart Badge Colors */
.market-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3.5px 9px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* OPEN (Regular) -> Emerald / Cyan */
.market-status-badge.open {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

/* PRE-MARKET -> Amber */
.market-status-badge.pre-market {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

/* AFTER-HOURS / POST-MARKET -> Purple / Violet */
.market-status-badge.after-hours {
    background: rgba(192, 132, 252, 0.18);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.45);
}

/* LUNCH BREAK -> Sky Blue */
.market-status-badge.lunch {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.45);
}

/* CLOSED -> Red */
.market-status-badge.closed {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.45);
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.pulse-dot.green {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: pulse-green 2s infinite ease-in-out;
}

.pulse-dot.amber {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
    animation: pulse-amber 2s infinite ease-in-out;
}

.pulse-dot.purple {
    background: #c084fc;
    box-shadow: 0 0 6px #c084fc;
    animation: pulse-purple 2s infinite ease-in-out;
}

.pulse-dot.blue {
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
    animation: pulse-blue 2s infinite ease-in-out;
}

.pulse-dot.red {
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
    animation: pulse-red 2s infinite ease-in-out;
}

.pulse-dot.gray {
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
}

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

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

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

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

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

/* Market Card Timing Grid: Distinct columns for Next Session & Exchange Clock */
.market-card-timing-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .market-card-timing-grid {
        grid-template-columns: 1fr;
    }
}

.market-timing-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.market-timing-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.market-timing-header .timing-icon {
    font-size: 0.7rem;
    color: #818cf8;
}

.market-timing-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    color: #94a3b8;
}

.market-countdown-primary {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8fafc;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: -0.2px;
}

.market-countdown-secondary {
    font-size: 0.84rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: #38bdf8;
}

.market-timing-subtext {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Progress bar */
.market-session-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.market-session-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #38bdf8);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Market Card Chips */
.market-schedule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.7rem;
}

.market-chip {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--text-secondary, #94a3b8);
}

.market-chip strong {
    color: var(--text-primary, #ffffff);
}

/* Economic Filter Bar */
.economic-calendar-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.econ-filter-group {
    display: flex;
    gap: 4px;
}

.btn-filter-pill {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border-color, #1e293b);
    background: var(--bg-primary, #090d16);
    color: var(--text-secondary, #94a3b8);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth, all 0.2s ease);
}

.btn-filter-pill:hover {
    color: var(--text-primary, #ffffff);
    border-color: var(--border-color-hover, #334155);
}

.btn-filter-pill.active {
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    border-color: rgba(99, 102, 241, 0.4);
}

.economic-calendar-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Light Mode Overrides for Market Hub Drawer */
[data-theme="light"] .market-hub-drawer {
    background: #f1f5f9;
    border-left-color: #cbd5e1;
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .market-hub-header {
    background: #ffffff;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .market-hub-tabs-container {
    background: #ffffff;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .market-hub-tabs {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

[data-theme="light"] .market-hub-tab {
    color: #64748b;
}

[data-theme="light"] .market-hub-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .market-hours-summary-bar {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .market-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .market-card:hover {
    background: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .market-timing-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .market-timing-header .timing-icon {
    color: #4f46e5;
}

[data-theme="light"] .market-timing-label {
    color: #64748b;
}

[data-theme="light"] .market-card-title,
[data-theme="light"] .market-countdown-primary,
[data-theme="light"] .market-chip strong {
    color: #0f172a;
}

[data-theme="light"] .market-countdown-secondary {
    color: #0284c7;
}

[data-theme="light"] .market-timing-subtext {
    color: #64748b;
}

[data-theme="light"] .market-card-city,
[data-theme="light"] .market-chip {
    color: #475569;
}

[data-theme="light"] .market-chip {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme="light"] .btn-filter-pill {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

[data-theme="light"] .btn-filter-pill:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

[data-theme="light"] .btn-filter-pill.active {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0f172a;
}

[data-theme="light"] .economic-calendar-event {
    background: #ffffff;
    border-color: #cbd5e1;
}

[data-theme="light"] .economic-calendar-event:hover {
    background: #f8fafc;
    border-color: #6366f1;
}

/* Economic Calendar Event */
.economic-calendar-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.economic-calendar-event:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.05);
}

.economic-impact-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.economic-impact-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.economic-impact-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Order Confirmation Dialog (Styled with app card background and dynamic green outline matching buy popup) */
.order-confirm-modal {
    border: 1.5px solid var(--success, #10b981);
    border-radius: 26px;
    background: #181826 !important;
    color: var(--text-primary, #ffffff);
    padding: 0 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 92vw;
    max-width: 460px;
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.25);
    outline: none;
    box-sizing: border-box;
}

.order-confirm-modal.confirm-sell-mode {
    border-color: var(--danger, #ef4444);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(239, 68, 68, 0.25);
}

.order-confirm-modal::backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.order-confirm-container {
    position: relative;
    padding: 1.6rem 1.6rem 1.6rem 1.6rem !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

.btn-confirm-close {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.35rem;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.btn-confirm-close:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.confirm-stock-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
}

.confirm-stock-logo-wrap {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #1e293b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.confirm-stock-logo-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.confirm-stock-fallback {
    font-size: 0.95rem;
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.confirm-stock-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ec4899;
    border: 2.5px solid var(--card-bg, #1e1e2f);
}

.confirm-stock-name {
    margin: 0.75rem 0 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.01em;
}

.confirm-details-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
}

.confirm-label {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.95rem;
}

.confirm-dotted-label {
    text-decoration: underline dotted rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
    cursor: help;
}

.confirm-value {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    text-align: right;
}

.confirm-row-total {
    padding-top: 0.95rem;
    padding-bottom: 0.35rem;
    border-bottom: none;
}

.confirm-label-total {
    color: #94a3b8;
    font-weight: 700;
    font-size: 1.05rem;
}

.confirm-value-total {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.25rem;
    text-align: right;
}

.confirm-disclaimer {
    text-align: center;
    margin: 1.3rem 0 1.2rem 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Send Order Button (Matches Review Order button shape in vibrant Green for BUY) */
.btn-send-order {
    width: 100%;
    padding: 0.85rem;
    border-radius: 10px;
    background: var(--success, #10b981);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-send-order:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.btn-send-order:active {
    transform: translateY(1px);
}

.btn-send-order.btn-send-sell {
    background: var(--danger, #ef4444);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-send-order.btn-send-sell:hover {
    background: #dc2626;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

/* User Impersonation / Simulation Sticky Banner */
.impersonation-banner {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: linear-gradient(90deg, #1e1b4b 0%, #312e81 40%, #451a03 100%);
    border-bottom: 1.5px solid #f59e0b;
    padding: 8px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.impersonation-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.impersonation-badge {
    background: #f59e0b;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.impersonation-text {
    font-size: 0.84rem;
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.impersonation-safeguard {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-stop-impersonation {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-stop-impersonation:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   Market Radar & Web Push Hub Styles
   ========================================================================== */

.radar-unread-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    animation: radar-pulse 2s infinite ease-in-out;
}

@keyframes radar-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
    100% { transform: scale(1); }
}

.radar-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

#radar-left-panel #radar-subtabs-container {
    position: sticky;
    top: 52px;
    z-index: 45;
    background: var(--bg-primary);
    padding: 2px 0 6px 0;
    margin-bottom: 0.65rem;
}

#radar-left-panel .radar-alerts-header-actions {
    position: sticky;
    top: 52px;
    z-index: 45;
    background: var(--bg-primary);
    padding: 2px 0 6px 0;
    margin-bottom: 0.65rem;
}

#radar-left-panel .radar-runaways-header-actions {
    position: sticky;
    top: 52px;
    z-index: 45;
    background: var(--bg-primary);
    padding: 2px 0 6px 0;
    margin-bottom: 0.65rem;
}

.radar-target-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.radar-target-card:hover {
    border-color: var(--accent-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.radar-target-card.selected {
    border-color: var(--accent-primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 1px var(--accent-primary, #6366f1);
}

.radar-status-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.radar-status-chip.scanning {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.radar-status-chip.formation {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.radar-status-chip.confirmed {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    animation: radar-confirmed-glow 1.8s infinite alternate;
}

@keyframes radar-confirmed-glow {
    0% { box-shadow: 0 0 4px rgba(16, 185, 129, 0.2); }
    100% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.6); }
}

.radar-alert-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.9rem 1rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 0.2s ease;
    cursor: pointer;
}

.radar-alert-item.unread {
    border-left: 4px solid var(--accent-primary, #6366f1);
    background: rgba(99, 102, 241, 0.04);
}

.radar-alert-item.msl {
    border-left: 4px solid #facc15 !important;
}

.radar-alert-item.msl.unread {
    background: rgba(250, 204, 21, 0.06) !important;
}

.radar-alert-item.runaway {
    border-left: 4px solid #ec4899 !important;
}

.radar-alert-item.runaway.unread {
    background: rgba(236, 72, 153, 0.06) !important;
}

.radar-alert-tag-msl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.35);
}

.radar-alert-item:hover {
    border-color: var(--accent-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.radar-alert-item.selected {
    border-color: var(--accent-primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 1px var(--accent-primary, #6366f1);
}

.radar-pattern-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Light Theme Overrides */
[data-theme="light"] .radar-status-chip.scanning {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

[data-theme="light"] .radar-status-chip.formation {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}

[data-theme="light"] .radar-status-chip.confirmed {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

[data-theme="light"] .radar-alert-item.unread {
    background: #f8fafc;
}

/* ==========================================================================
   User Profile Section & 6-Tile Dynamic Responsive Grid
   ========================================================================== */
.profile-menu-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: stretch;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
}

.profile-top-balance {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
}

/* 6-Tile Dynamic Responsive Grid - Fills 100% of the vertical space */
.profile-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
}

@media (min-width: 860px) {
    .profile-tiles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }
}

.profile-tile-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.3rem 1.25rem;
    border-radius: 18px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--card-bg, #111827);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    height: 100%;
    min-height: 135px;
    text-align: left;
    box-sizing: border-box;
}

/* Faint Background Art Watermark */
.profile-tile-bg-art {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 140px;
    height: 140px;
    pointer-events: none;
    opacity: 0.12;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.profile-tile-bg-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.profile-tile-card:hover .profile-tile-bg-art {
    opacity: 0.22;
    transform: scale(1.08) rotate(-3deg);
}

[data-theme="light"] .profile-tile-bg-art {
    opacity: 0.09;
}

[data-theme="light"] .profile-tile-card:hover .profile-tile-bg-art {
    opacity: 0.18;
}

/* Photographic Background for Sandbox Tiles - Vivid & Cinematic */
.profile-tile-photo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.76;
    filter: saturate(1.3) contrast(1.15);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, filter 0.35s ease;
    z-index: 1;
    pointer-events: none;
}

.profile-tile-card:hover .profile-tile-photo-bg {
    transform: scale(1.06);
    opacity: 0.94;
    filter: saturate(1.45) contrast(1.2);
}

[data-theme="light"] .profile-tile-photo-bg {
    opacity: 0.78;
    filter: saturate(1.3) contrast(1.15);
}

[data-theme="light"] .profile-tile-card:hover .profile-tile-photo-bg {
    opacity: 0.94;
}

/* Gradient Scrim Overlay for Clean Text Legibility */
.profile-tile-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.58) 50%, rgba(15, 23, 42, 0.92) 100%);
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease;
}

[data-theme="light"] .profile-tile-scrim {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.52) 50%, rgba(15, 23, 42, 0.9) 100%);
}

.profile-tile-header,
.profile-tile-body {
    position: relative;
    z-index: 3;
}

.profile-tile-title {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.profile-tile-desc {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .profile-tile-card .profile-tile-title {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .profile-tile-card .profile-tile-desc {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .profile-tile-card .profile-tile-chevron {
    color: rgba(255, 255, 255, 0.8) !important;
}

.profile-tile-card:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary, #6366f1);
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(99, 102, 241, 0.24);
}

.profile-tile-card.admin-action:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(239, 68, 68, 0.24);
}

.profile-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.4rem;
}

.profile-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.profile-tile-card:hover .profile-tile-icon {
    transform: scale(1.08);
}

.profile-tile-chevron {
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.profile-tile-card:hover .profile-tile-chevron {
    opacity: 1;
    transform: translateX(3px);
}

.profile-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin-top: auto;
    justify-content: flex-end;
}

.profile-tile-title {
    font-weight: 800;
    font-size: 1.12rem;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.profile-tile-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Color-themed Profile Tile Background Tints */
.profile-tile-orders {
    background: rgba(59, 130, 246, 0.07) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
.profile-tile-orders:hover {
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 26px rgba(59, 130, 246, 0.24) !important;
}

.profile-tile-dividends {
    background: rgba(16, 185, 129, 0.07) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
.profile-tile-dividends:hover {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #10b981 !important;
    box-shadow: 0 8px 26px rgba(16, 185, 129, 0.24) !important;
}

.profile-tile-notifications {
    background: rgba(168, 85, 247, 0.07) !important;
    border-color: rgba(168, 85, 247, 0.25) !important;
}
.profile-tile-notifications:hover {
    background: rgba(168, 85, 247, 0.14) !important;
    border-color: #a855f7 !important;
    box-shadow: 0 8px 26px rgba(168, 85, 247, 0.24) !important;
}

.profile-tile-settings {
    background: rgba(99, 102, 241, 0.07) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
}
.profile-tile-settings:hover {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 8px 26px rgba(99, 102, 241, 0.24) !important;
}

.profile-tile-admin {
    background: rgba(239, 68, 68, 0.07) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}
.profile-tile-admin:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 8px 26px rgba(239, 68, 68, 0.24) !important;
}

.profile-tile-refresh {
    background: rgba(6, 182, 212, 0.07) !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
}
.profile-tile-refresh:hover {
    background: rgba(6, 182, 212, 0.14) !important;
    border-color: #06b6d4 !important;
    box-shadow: 0 8px 26px rgba(6, 182, 212, 0.24) !important;
}

/* Light Theme Color-themed Profile Tile Background Tints */
[data-theme="light"] .profile-tile-orders {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
[data-theme="light"] .profile-tile-orders:hover {
    background: rgba(59, 130, 246, 0.12) !important;
}

[data-theme="light"] .profile-tile-dividends {
    background: rgba(16, 185, 129, 0.06) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
[data-theme="light"] .profile-tile-dividends:hover {
    background: rgba(16, 185, 129, 0.12) !important;
}

[data-theme="light"] .profile-tile-notifications {
    background: rgba(168, 85, 247, 0.06) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}
[data-theme="light"] .profile-tile-notifications:hover {
    background: rgba(168, 85, 247, 0.12) !important;
}

[data-theme="light"] .profile-tile-settings {
    background: rgba(99, 102, 241, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}
[data-theme="light"] .profile-tile-settings:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

[data-theme="light"] .profile-tile-admin {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .profile-tile-admin:hover {
    background: rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .profile-tile-refresh {
    background: rgba(6, 182, 212, 0.06) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}
[data-theme="light"] .profile-tile-refresh:hover {
    background: rgba(6, 182, 212, 0.12) !important;
}

/* Bottom Signout Dock */
.profile-bottom-signout-dock {
    width: 100%;
    margin-top: auto;
    padding-top: 0.5rem;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .profile-bottom-signout-dock {
        padding-bottom: 0 !important;
    }
}

.profile-signout-dock-btn {
    width: 100% !important;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--card-bg, #111827);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.profile-signout-dock-btn:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18);
}

/* ==========================================================================
   User Profile Pinned Universal Header & Smooth Sub-View Sliding Transitions
   ========================================================================== */
.profile-unified-header {
    position: sticky;
    top: 0.5rem;
    z-index: 40;
    width: 100%;
    max-width: 100%;
    margin: 0.25rem 0 0.65rem 0;
    background: var(--card-bg, #0f172a);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(99, 102, 241, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    height: 76px;
    box-sizing: border-box;
}

.quant-unified-header {
    height: auto !important;
    min-height: 50px !important;
    padding: 3px 0 !important;
    margin: 0 0 0.5rem 0 !important;
    top: 2px !important;
    display: none;
    align-items: center;
    /* Allow the Options dropdown to escape the header box */
    overflow: visible !important;
}

/* Sub-view mode (Market Sandbox and Profile): release the exact-viewport height
   lock that the tile-menu grids need, so the sub-view content scrolls while the
   sticky .profile-unified-header stays pinned at the top for exit. */
#tab-quant.tab-content.active.subview-active,
#tab-profile.tab-content.active.subview-active {
    overflow-y: auto !important;
}

/* Compact sandbox stat cards: ~25% smaller type, tighter padding, bunched up. */
.quant-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 0.5rem !important;
    margin-bottom: 0.35rem !important;
    align-items: start !important;
}
.quant-stat-grid > .card {
    padding: 0.55rem 0.7rem !important;
    border-radius: 10px !important;
    margin: 0 !important;
}
.quant-stat-grid > .card > div:nth-child(3) {
    line-height: 1.2 !important;
}
.quant-stat-grid > .card > div:first-child {
    font-size: 0.58rem !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.02em;
}
.quant-stat-grid > .card > div:nth-child(2) {
    font-size: 1.12rem !important;
    line-height: 1.15 !important;
}
.quant-stat-grid > .card > div:nth-child(3) {
    font-size: 0.62rem !important;
    margin-top: 2px !important;
}

/* Sub-view page icon: fill the vertical space between the back arrow and title */
#quant-subview-icon-badge {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.5rem !important;
    border-radius: 11px !important;
}

/* Disabled Market Sandbox tile (feature not built yet) */
.profile-tile-card.is-disabled {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
    pointer-events: none;
}

/* Tighten the vertical rhythm of the 7-Day Incubation pipeline cards */
#incubation-profiles-container {
    gap: 0.75rem !important;
}
#incubation-profiles-container > .card {
    margin-bottom: 0 !important;
}

/* Adaptive Lab master (rankings) <-> detail (inspector) slider */
#adaptive-slider {
    position: relative;
    width: 100%;
    overflow-x: clip;
}
.adaptive-pane {
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
#adaptive-master {
    position: relative;
    transform: translateX(0);
    opacity: 1;
}
#adaptive-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
#adaptive-slider.show-detail #adaptive-master {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
#adaptive-slider.show-detail #adaptive-detail {
    position: relative;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.btn-adaptive-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-adaptive-back:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    transform: translateX(-2px);
}

/* ── Smart Sell Sniper Lab ─────────────────────────────────────────────── */
.ss-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1.25rem;
    align-items: end;
}
.ss-control { display: flex; flex-direction: column; gap: 5px; }
.ss-control label {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ss-control label b { color: #fb7185; font-weight: 800; text-transform: none; letter-spacing: 0; }
.ss-hint { margin-left: 5px; font-size: 0.72rem; opacity: 0.45; cursor: help; }
.ss-hint:hover { opacity: 0.8; }
#ss-hint-pop {
    display: none;
    position: absolute;
    z-index: 1300;
    max-width: 280px;
    background: var(--card-bg, #161626);
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-secondary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ss-control input[type=range] { width: 100%; accent-color: #f43f5e; cursor: pointer; }
.ss-window-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-window-btns button {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-secondary);
    cursor: pointer;
}
.ss-window-btns button.active {
    background: rgba(244, 63, 94, 0.18);
    border-color: rgba(244, 63, 94, 0.5);
    color: #fb7185;
}

.ss-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.ss-row:last-child { border-bottom: none; }
.ss-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ss-tk { font-weight: 800; color: var(--text-primary); font-size: 0.9rem; }
.ss-nm { font-size: 0.72rem; color: var(--text-muted); }
.ss-hold { font-size: 0.68rem; color: var(--text-muted); margin-left: auto; }
.ss-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }
.ss-lbl {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--bg-tertiary, #1e293b);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
}
.ss-lbl-sim { color: #fb7185; border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.1); }
.ss-px { font-weight: 700; color: var(--text-primary); }
.ss-arrow { font-size: 0.62rem; opacity: 0.55; }
.ss-ret { font-weight: 800; }
.ss-ret.pos { color: #10b981; }
.ss-ret.neg { color: #f43f5e; }
.ss-sub { font-size: 0.72rem; color: var(--text-muted); }
.ss-reason { font-size: 0.7rem; font-style: italic; color: var(--text-muted); }
.ss-row-right-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ss-delta { font-weight: 800; font-size: 0.82rem; }
.ss-delta.pos { color: #10b981; }
.ss-delta.neg { color: #f43f5e; }
.ss-flag {
    font-size: 0.66rem;
    font-weight: 700;
    color: #fb7185;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-radius: 5px;
    padding: 1px 6px;
}
.ss-nodata {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    font-size: 0.72rem;
    color: var(--text-muted);
}
@media (min-width: 721px) {
    .ss-row-right { border-left: 1px solid var(--border-color); padding-left: 1rem; }
}
@media (max-width: 720px) {
    .ss-row { grid-template-columns: 1fr; }
}

.ss-mode-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 7px; overflow: hidden; }
.ss-mode-toggle button {
    font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border: none;
    background: var(--bg-tertiary, #1e293b); color: var(--text-secondary); cursor: pointer;
}
.ss-mode-toggle button.active { background: rgba(244, 63, 94, 0.18); color: #fb7185; }

.ss-opt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; }
.ss-opt-col { padding: 0.6rem 0.75rem; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-tertiary, #1e293b); }
.ss-opt-col.hot { border-color: rgba(244, 63, 94, 0.5); background: rgba(244, 63, 94, 0.08); }
.ss-opt-col-t { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 3px; }
.ss-opt-col-big { font-size: 1.05rem; font-weight: 800; }
.ss-opt-col-big span { font-size: 0.6rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-left: 4px; }
.ss-opt-col-sub { font-size: 0.66rem; color: var(--text-secondary); margin-top: 3px; }
.ss-opt-verdict { font-size: 0.76rem; line-height: 1.45; padding: 8px 10px; border-radius: 8px; margin-bottom: 0.6rem; }
.ss-opt-verdict.good { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7; }
.ss-opt-verdict.warn { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: #fcd34d; }
.ss-opt-verdict i { margin-right: 5px; }
.ss-opt-lb summary { font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; font-weight: 600; }
.ss-opt-lb table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 6px; }
.ss-opt-lb th { color: var(--text-muted); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border-color); }
.ss-opt-lb td { padding: 4px 6px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }

/* Sandbox guarantee (i) button */
.quant-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}
.quant-info-btn:hover {
    background: rgba(99, 102, 241, 0.22);
}

.profile-header-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
    box-sizing: border-box;
}

#profile-header-user {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

#profile-header-user.slide-left {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#profile-header-subview {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#profile-header-subview.slide-in {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* User Info Layout inside Pinned Header */
.profile-header-user-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    gap: 12px;
}

.profile-header-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.profile-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    flex-shrink: 0;
}

.profile-header-user-text {
    min-width: 0;
}

.profile-header-user-email {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Account actions live behind one hamburger. Refresh and Sign Out were both
   sitting in the bar, and between them, a role badge and a "Signed In Account"
   caption there was no room left for the one thing the bar is for - the email,
   which truncated to "cw...". In the menu they can carry their labels, which an
   icon-only Sign Out never could. */
.profile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    position: relative;
}

.profile-header-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 1rem;
    /* One mid indigo for the bars, readable on the dark card and the light one.
       The pale lavender this started as vanished against its own tinted
       background in the light theme. */
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}
.profile-header-menu-btn:hover {
    background: rgba(99, 102, 241, 0.22);
}
/* Open: solid fill with white bars. The tinted-background version put the
   bars and the fill within a shade of each other and the icon disappeared. */
.profile-header-menu-btn[aria-expanded="true"] {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* Absolute, anchored under the button by its own parent. Fixed does not work
   here: the header sets backdrop-filter, which makes it the containing block
   for fixed descendants, so viewport coordinates were measured from the header
   and dropped the menu far below the button. */
.profile-header-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg, #0f172a);
    border: 1px solid rgba(99, 102, 241, 0.32);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* display:flex on the class above is an AUTHOR rule and beats the user agent's
   [hidden] { display: none }, so the closed menu rendered permanently and only
   looked hidden because an ancestor clipped it. This puts the hidden state back. */
.profile-header-menu[hidden] { display: none; }

.profile-header-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #f8fafc);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
/* Label left, icon right: the eye reads the words down the left edge and the
   icons sit as a quiet column on the right. */
.profile-header-menu-item span { flex: 1 1 auto; text-align: left; }
.profile-header-menu-item i { order: 2; width: 16px; text-align: center; }
.profile-header-menu-item:hover { background: rgba(148, 163, 184, 0.14); }

/* The header clips its children so the two header states can slide past each
   other. That also clips the dropdown, so the clipping is lifted while the menu
   is open - by then the slide has long finished. */
.profile-unified-header.menu-open { overflow: visible; }

/* Front screen: the avatar sits closer to the edge, and the header keeps a
   little air between itself and the value strip underneath. */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .profile-header-user-content {
        padding: 0 0.85rem;
        gap: 10px;
    }
    .profile-header-user-info { gap: 11px; }
    .profile-header-avatar { width: 40px; height: 40px; font-size: 1.05rem; }
    .profile-header-user-email { font-size: 1rem; }
}

.profile-header-signout-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.profile-header-signout-btn:active {
    transform: scale(0.95);
}

/* Sub-View Title & Back Layout inside Pinned Header */
.profile-header-subview-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.btn-profile-subview-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-primary, #ffffff);
    font-size: 1.35rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-profile-subview-back:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary, #6366f1);
    transform: translateX(-3px);
}

.profile-subview-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.profile-subview-title-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-subview-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    line-height: 1.2;
}

.profile-subview-subtitle {
    margin: 2px 0 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.35;
}

.profile-header-subview-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-profile-subview-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--border-color, #1e293b);
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.btn-profile-subview-action:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
    color: #6366f1;
}

.btn-profile-subview-action:active {
    transform: scale(0.94);
}

[data-theme="light"] .btn-profile-subview-action {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: var(--text-primary);
}

[data-theme="light"] .btn-profile-subview-action:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: #6366f1;
}

#tab-profile.active,
#tab-quant.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Sliding Panes Container */
.profile-view-container {
    position: relative;
    width: 100%;
    overflow-x: clip;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.profile-slide-pane {
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

#profile-pane-menu,
#quant-pane-menu {
    position: relative;
    transform: translateX(0);
    opacity: 1;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

#profile-pane-menu .tab-content-inner,
#quant-pane-menu .tab-content-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

@media (min-width: 769px) {
    #tab-profile.tab-content.active,
    #tab-quant.tab-content.active {
        height: calc(100vh - 7.5rem) !important;
        max-height: calc(100vh - 7.5rem) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .profile-unified-header,
    #profile-pane-menu .tab-content-inner,
    #quant-pane-menu .tab-content-inner {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 0.5rem 0 !important;
        padding: 0 !important;
    }
    .profile-tiles-grid {
        height: 100% !important;
        min-height: 0 !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }
    .profile-tile-card {
        height: 100% !important;
        min-height: 0 !important;
    }
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    #tab-profile.tab-content.active,
    #tab-quant.tab-content.active {
        height: calc(100dvh - 148px) !important;
        max-height: calc(100dvh - 148px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .profile-unified-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 0.35rem 0 !important;
        border-radius: 14px !important;
    }
    #profile-pane-menu .tab-content-inner,
    #quant-pane-menu .tab-content-inner {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    .profile-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .profile-tile-card {
        height: 100% !important;
        min-height: 0 !important;
        padding: 0.75rem 0.8rem !important;
        border-radius: 14px !important;
    }
    .profile-tile-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.15rem !important;
        border-radius: 10px !important;
    }
    .profile-tile-title {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    .profile-tile-desc {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
    }
    .profile-nav-action-btn {
        width: 100% !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }
    .mobile-balance-panel {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        margin-bottom: 0.35rem !important;
        padding: 8px 12px !important;
    }
}

#profile-pane-menu.slide-left,
#quant-pane-menu.slide-left {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#profile-pane-subview,
#quant-pane-subview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#profile-pane-subview.slide-in,
#quant-pane-subview.slide-in {
    position: relative;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.profile-subview-body {
    width: 100%;
}

.profile-subview-section {
    display: none;
    width: 100%;
}

.profile-subview-section.active {
    display: block;
}

/* ── Signal Scorecard (Phase 0 / CT-13) ───────────────────────────────── */
.scorecard-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.scorecard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scorecard-blurb {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 780px;
}
.scorecard-empty {
    text-align: center;
    padding: 40px 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}
.scorecard-empty i { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.scorecard-empty p { margin: 6px auto; max-width: 560px; }
.scorecard-empty--err { color: #f87171; }

.sc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.sc-summary b { color: var(--text-primary); }

.sc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.sc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px 16px;
}
.sc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sc-engine { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.sc-count { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.85; white-space: nowrap; }

.sc-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
}
.sc-metric-val { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.sc-metric-lbl { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }

.sc-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.sc-subline b { color: var(--text-primary); font-weight: 700; }

.sc-spark-wrap { margin-top: 12px; }
.sc-spark-lbl { font-size: 0.66rem; color: var(--text-secondary); opacity: 0.8; margin-bottom: 3px; }
.sc-spark { display: block; }

.sc-foot {
    margin: 16px 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0.85;
    max-width: 780px;
}

.sc-good { color: #34d399; }
.sc-warn { color: #fbbf24; }
.sc-bad { color: #f87171; }
.sc-neutral { color: var(--text-secondary); }

@media (max-width: 720px) {
    .sc-cards { grid-template-columns: 1fr; }
}

[data-theme="light"] .profile-unified-header {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 10px rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .btn-profile-subview-back:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent-primary, #6366f1);
}

/* Orders Compact Stats Grid */
.orders-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .orders-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* A grid item defaults to min-width:auto, so each 1fr track was floored at its
   card's min-content width - 221px and 177px inside a 392px grid, which pushed
   Win Rate and Avg Duration off the right edge. min-width:0 drops that floor so
   the tracks are genuinely equal and the label/value ellipsis can do its job. */
.orders-stat-card { min-width: 0; }

.orders-stat-card {
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, #1e293b);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-height: auto;
    box-sizing: border-box;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.orders-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
}

.orders-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

.orders-stat-content {
    min-width: 0;
    flex: 1;
}

.orders-stat-label {
    margin: 0 0 2px 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-stat-value {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Profile Navigation Icon Slide Animation ─── */
.nav-icon-slot {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
}

.bottom-nav-item .nav-icon-slot {
    width: 24px;
    height: 24px;
}

.nav-icon-slot i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.nav-icon-slot .nav-icon-primary {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.nav-icon-slot .nav-icon-subview {
    transform: translate(160%, -50%);
    opacity: 0;
}

/* When in a sub-view, person icon slides left out of frame and section icon slides in from right */
.nav-icon-slot.in-subview .nav-icon-primary {
    transform: translate(-260%, -50%);
    opacity: 0;
}

.nav-icon-slot.in-subview .nav-icon-subview {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* ─── SuperUser Synchronization & Diagnostics HUD ─── */
.superuser-sync-hud {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 999999;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #e2e8f0;
    width: 320px;
    max-width: calc(100vw - 36px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .superuser-sync-hud {
        bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
    }
}

.superuser-sync-hud.collapsed {
    width: auto;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.superuser-sync-hud .hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    cursor: pointer;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.superuser-sync-hud.collapsed .hud-header {
    border-bottom: none;
    padding: 6px 12px;
}

.hud-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    display: inline-block;
    transition: background 0.3s ease;
}

.hud-pulse-dot.active {
    background: #30d158;
    box-shadow: 0 0 8px #30d158;
    animation: pulseSync 1.2s infinite;
}

@keyframes pulseSync {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

.hud-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}

.hud-tag {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    padding: 1px 6px;
    border-radius: 6px;
}

.hud-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hud-badge.in-flight {
    color: #38bdf8;
}

.hud-badge.discards {
    color: #94a3b8;
}

.hud-toggle-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-body {
    padding: 10px 12px;
}

.hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.hud-metric {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
}

.hud-metric .lbl {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 600;
}

.hud-metric .val {
    font-size: 0.76rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-logs-container {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
}

.hud-logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hud-clear-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.7rem;
}

.hud-clear-btn:hover {
    color: #f43f5e;
}

.hud-logs-list {
    max-height: 120px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.64rem;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hud-log-row {
    display: flex;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
}

.hud-log-row.discard {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-left: 2px solid #f59e0b;
}

.hud-log-row.start {
    color: #94a3b8;
}

.hud-log-row.error {
    background: rgba(244, 63, 94, 0.15);
    color: #f87171;
    border-left: 2px solid #f43f5e;
}

.log-time {
    color: #64748b;
    flex-shrink: 0;
}

.log-msg {
    word-break: break-word;
}

.hud-empty-logs {
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}

/* Viewport Debug Overlay */
#viewport-debug-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.88);
    color: #10b981;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 11px;
    z-index: 9999;
    pointer-events: none !important;
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    #viewport-debug-overlay {
        bottom: 95px !important; /* Raised well above the 65px footer bar */
        right: 12px !important;
        font-size: 10px !important;
        padding: 5px 8px !important;
    }
}

/* Opportunity Scanner Strategy Tabs (Matching Global Markets Visual Style) */
.opt-tabs-container {
    display: flex;
    gap: 4px;
    background: var(--bg-primary, #090d16);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #1e293b);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.opt-tabs-container::-webkit-scrollbar {
    display: none;
}

.opt-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth, all 0.2s ease);
    white-space: nowrap;
}

.opt-tab-btn i {
    font-size: 0.82rem;
    flex-shrink: 0;
}

.opt-tab-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opt-tab-btn:hover {
    color: var(--text-primary, #ffffff);
}

.opt-tab-btn.active {
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .opt-tabs-container {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme="light"] .opt-tab-btn {
    color: #64748b;
}

[data-theme="light"] .opt-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Opportunities Sticky Header */
.opportunities-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

[data-theme="light"] .opportunities-sticky-header {
    background: rgba(255, 255, 255, 0.94);
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Market Sandbox Mobile Responsiveness */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    #quant-subtabs-container {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
        width: 100%;
        padding: 4px;
        gap: 4px;
    }
    #quant-subtabs-container::-webkit-scrollbar {
        display: none;
    }
    .quant-tab-btn {
        flex-shrink: 0;
        font-size: 0.76rem !important;
        padding: 0.45rem 0.65rem !important;
    }
    #tab-quant .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    #tab-quant .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* ─────────────────────────────────────────────────────────
   DIP SNIPER MODALS & DATABASE TELEMETRY THEME SUPPORT
   ───────────────────────────────────────────────────────── */

.telemetry-sync-banner {
    background: var(--bg-card, rgba(15, 23, 42, 0.7));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition-smooth);
}

.telemetry-sync-banner .sync-title {
    color: var(--text-primary);
}

.telemetry-sync-banner .sync-subtext {
    color: var(--text-secondary);
}

.telemetry-sync-banner .sync-subtext strong {
    color: var(--text-primary);
}

.telemetry-sync-banner .sync-meta-item {
    color: var(--text-muted);
}

.telemetry-sync-banner .sync-meta-item strong {
    color: var(--text-primary);
}

.telemetry-sync-progress-track {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="light"] .telemetry-sync-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .telemetry-sync-progress-track {
    background: #e2e8f0;
}

/* Dip Sniper Single & Batch Modals */
.dip-sniper-modal-box {
    border-radius: 18px !important;
    border: 1px solid var(--border-color, rgba(56, 189, 248, 0.4)) !important;
    background: var(--bg-secondary, #181c28) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    overflow: hidden;
}

.dip-sniper-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary, #202637);
    flex-shrink: 0;
}

.dip-sniper-modal-header h3 {
    color: var(--text-primary, #ffffff) !important;
}

.dip-sniper-modal-header .sub-desc {
    color: var(--text-secondary, #94a3b8);
}

.dip-sniper-modal-body {
    padding: 1.25rem 1.5rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-secondary, #181c28);
}

.dip-sniper-card {
    background: var(--bg-tertiary, #202637);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 12px 14px;
    transition: var(--transition-smooth);
}

.dip-sniper-card .metric-label {
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
}

.dip-sniper-card .metric-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    margin-top: 4px;
}

.dip-sniper-card .metric-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.dip-sniper-card-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.dip-sniper-toolbar {
    background: var(--bg-tertiary, #192434);
    border: 1px solid var(--border-color, rgba(56, 189, 248, 0.3));
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    color: var(--text-primary);
}

.dip-sniper-table-wrap {
    background: var(--bg-tertiary, #202637);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.dip-sniper-table-header-bar {
    padding: 9px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.dip-sniper-table th {
    background: var(--bg-tertiary, #202637);
    color: var(--text-secondary, #94a3b8);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.dip-sniper-table td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .dip-sniper-modal-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .dip-sniper-modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .dip-sniper-modal-body {
    background: #ffffff;
}

[data-theme="light"] .dip-sniper-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .dip-sniper-card .metric-val {
    color: #0f172a;
}

[data-theme="light"] .dip-sniper-card-success {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="light"] .dip-sniper-toolbar {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .dip-sniper-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .dip-sniper-table-header-bar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}

[data-theme="light"] .dip-sniper-table th {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid #cbd5e1;
}

[data-theme="light"] .dip-sniper-table td {
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
}










/* ==========================================================================
   Daily P&L Scoreboard — full-screen landing view (CT-46)
   ========================================================================== */
#scoreboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-body, #0b0f1a);
    -webkit-overflow-scrolling: touch;
}
#scoreboard-overlay.sb-visible { display: block; }
body.scoreboard-active .sidebar,
body.scoreboard-active .bottom-nav { display: none !important; }
body.scoreboard-active .main-content { filter: none; }

:root {
    --sb-bg: #f4f6fb;
    --sb-panel: #ffffff;
    --sb-border: #e2e8f0;
    --sb-text: #0f172a;
    --sb-muted: #64748b;
    --sb-good: #15803d;
    --sb-good-bg: rgba(21, 128, 61, 0.10);
    --sb-bad: #dc2626;
    --sb-accent: #4f46e5;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
    --sb-bg: #0b0f1a;
    --sb-panel: #131a2a;
    --sb-border: rgba(255,255,255,0.09);
    --sb-text: #f8fafc;
    --sb-muted: #94a3b8;
    --sb-good: #34d399;
    --sb-good-bg: rgba(52, 211, 153, 0.12);
    --sb-bad: #f87171;
    --sb-accent: #818cf8;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sb-bg: #0b0f1a; --sb-panel: #131a2a; --sb-border: rgba(255,255,255,0.09);
        --sb-text: #f8fafc; --sb-muted: #94a3b8; --sb-good: #34d399;
        --sb-good-bg: rgba(52,211,153,0.12); --sb-bad: #f87171; --sb-accent: #818cf8;
    }
}

#scoreboard-overlay { background: var(--sb-bg); color: var(--sb-text); }
.sb-inner { max-width: 1000px; margin: 0 auto; padding: 22px 20px 60px; }

.sb-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.sb-brand { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; }
.sb-brand span { color: var(--sb-accent); }
.sb-topbar-right { display: flex; align-items: center; gap: 14px; }
.sb-date { font-size: 0.82rem; color: var(--sb-muted); font-weight: 600; }
.sb-enter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 0.85rem;
    background: var(--sb-accent); color: #fff; border: none; cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.sb-enter-btn:hover { transform: translateX(2px); opacity: 0.92; }

.sb-hero {
    background: var(--sb-panel); border: 1px solid var(--sb-border);
    border-radius: 18px; padding: 28px 26px; text-align: center; margin-bottom: 16px;
}
.sb-hero-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sb-muted); font-weight: 700; }
.sb-hero-amount { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1.05; margin: 6px 0 14px; letter-spacing: -0.02em; }
.sb-hero-amount.pos { color: var(--sb-good); }
.sb-hero-amount.neg { color: var(--sb-bad); }
.sb-hero-amount.val-bronze { color: #d5893f; text-shadow: 0 1px 12px rgba(213,137,63,0.32); }
.sb-hero-amount.val-silver { color: #b9b9c6; text-shadow: 0 1px 10px rgba(185,185,198,0.3); }
.sb-hero-amount.val-gold { color: #f5c518; text-shadow: 0 1px 14px rgba(245,197,24,0.4); }
.sb-hero-amount-shut {
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    line-height: 1.1;
    color: var(--sb-muted);
    letter-spacing: 0.04em;
}
.sb-hero-target { max-width: 420px; margin: 0 auto; }
.sb-progress { height: 10px; border-radius: 999px; background: var(--sb-border); overflow: hidden; position: relative; }
.sb-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--sb-accent); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.sb-progress-fill.done { background: var(--sb-good); }
/* CT-61: the bar refills per tier band, recoloured for the tier reached. */
.sb-progress-fill.bar-green  { background: var(--sb-good); }
.sb-progress-fill.bar-bronze { background: linear-gradient(90deg, #b96a24, #dd8f3e); }
.sb-progress-fill.bar-silver { background: linear-gradient(90deg, #9a9aa8, #d3d3dc); }
.sb-progress-fill.bar-gold   { background: linear-gradient(90deg, #d9a417, #f7cf3a); box-shadow: 0 0 8px rgba(245,197,24,0.5); }

/* Bronze / Silver / Gold day tiers */
.sb-progress-notch { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.55); mix-blend-mode: overlay; pointer-events: auto; }
:root[data-theme="light"] .sb-progress-notch { background: rgba(0,0,0,0.35); }
.sb-progress-fill.tier-bronze { background: #cd7f32; }
.sb-progress-fill.tier-silver { background: linear-gradient(90deg, #cd7f32, #b8b8c0); }
.sb-progress-fill.tier-gold   { background: linear-gradient(90deg, #cd7f32, #b8b8c0 55%, #f5c518); }
.sb-target-state.tier-bronze { color: #d08b45; font-weight: 800; }
.sb-target-state.tier-silver { color: #b6b6c2; font-weight: 800; }
.sb-target-state.tier-gold   { color: #f5c518; font-weight: 800; }
/* Week-streak day coins — struck-metal SVG, no plain circle behind it. */
.sb-wdot.has-coin { border: none !important; background: none !important; box-shadow: none !important; overflow: visible; }
.sb-wdot.has-coin::before { content: none !important; }
.sb-wdot .sb-coin { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.sb-wdot.tier-gold .sb-coin { filter: drop-shadow(0 0 5px rgba(243,194,32,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.sb-target-edit label { display: inline-flex; align-items: center; gap: 3px; }
.sb-target-edit label input { width: 66px; }
.sb-target-line { display: flex; justify-content: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 7px; font-size: 0.78rem; color: var(--sb-muted); font-weight: 700; }
.sb-target-state.hit { color: var(--sb-good); font-weight: 800; }
.sb-hero-sub { margin-top: 14px; font-size: 0.85rem; color: var(--sb-muted); }

.sb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sb-tile { background: var(--sb-panel); border: 1px solid var(--sb-border); border-radius: 14px; padding: 14px 16px; }
.sb-tile-muted { opacity: 0.9; }
.sb-tile-val { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; }
.sb-tile-val.pos { color: var(--sb-good); }
.sb-tile-val.neg { color: var(--sb-bad); }
.sb-tile-lbl { font-size: 0.72rem; color: var(--sb-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.sb-tile-hint { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.85; margin-top: 1px; }

.sb-col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grid children default to min-width:auto and refuse to shrink below their
   content — the nowrap pick/earnings rows then widen the column and the whole
   dashboard scrolls sideways. Force the tracks (and the flex rows inside) to be
   allowed to shrink. */
.sb-col-2 > * { min-width: 0; }
.sb-pick-row, .sb-earn-row { min-width: 0; }
.sb-pick-main, .sb-earn-main { flex: 1 1 auto; min-width: 0; }
.sb-pick-sub, .sb-pick-reason, .sb-pick-name { max-width: 100%; }
.sb-panel { background: var(--sb-panel); border: 1px solid var(--sb-border); border-radius: 14px; padding: 16px 18px; }
.sb-panel-title { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sb-muted); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sb-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sb-dot.hit { background: var(--sb-good); }
.sb-dot.under { background: #f59e0b; }
.sb-dot.none { background: var(--sb-border); }
.sb-dot + .sb-dot { margin-left: 6px; }

.sb-today-sells { display: flex; flex-direction: column; gap: 8px; }
.sb-sell-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sb-border); }
.sb-sell-row:last-child { border-bottom: none; }
.sb-sell-name { font-weight: 700; font-size: 0.88rem; }
.sb-sell-meta { font-size: 0.72rem; color: var(--sb-muted); }
.sb-sell-pnl { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1rem; }
.sb-sell-pnl.pos { color: var(--sb-good); }
.sb-sell-pnl.neg { color: var(--sb-bad); }
.sb-empty { color: var(--sb-muted); font-size: 0.85rem; padding: 8px 0; }

.sb-history-strip { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.sb-hbar { flex: 1; min-width: 4px; border-radius: 3px 3px 1px 1px; background: var(--sb-border); position: relative; transition: height 0.4s ease; }
.sb-hbar.hit { background: var(--sb-good); }
.sb-hbar.under { background: #f59e0b; }
.sb-history-foot { margin-top: 10px; font-size: 0.76rem; color: var(--sb-muted); font-weight: 600; }

.sb-note { margin-top: 18px; font-size: 0.72rem; color: var(--sb-muted); opacity: 0.8; line-height: 1.5; }

.sidebar-brand { cursor: pointer; }

@media (max-width: 720px) {
    .sb-tiles { grid-template-columns: repeat(2, 1fr); }
    .sb-col-2 { grid-template-columns: 1fr; }
    .sb-inner { padding: 16px 14px 50px; }
}

/* Scoreboard — holdings treemap, AI picks, earnings */
.sb-alloc-panel { margin-bottom: 12px; }
.sb-dot.up { background: #16a34a; }
.sb-dot.flat { background: #eab308; }
.sb-dot.down { background: #dc2626; }

.sb-treemap {
    display: flex; flex-direction: column;
    width: 100%; height: 360px; gap: 4px;
    border-radius: 10px; overflow: hidden;
    flex-wrap: nowrap;
}
@media (max-width: 860px) { .sb-treemap { height: 460px; } }
@media (max-width: 620px) { .sb-treemap { height: 580px; } }
@media (max-width: 460px) { .sb-treemap { height: 680px; } }
.sb-tm-row { display: flex; gap: 4px; width: 100%; min-height: 0; flex-wrap: nowrap; }
.sb-tm-tile {
    position: relative; overflow: hidden;
    border-radius: 7px; padding: 8px 10px;
    display: flex; flex-direction: column; justify-content: flex-start;
    color: #fff; cursor: default;
    min-width: 0;
}
/* dark scrim so white text is readable on the mid/light amber tiles */
.sb-tm-tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.28) 100%);
}
.sb-tm-tile > * { position: relative; z-index: 1; }
.sb-tm-tile .tm-tkr { font-weight: 800; font-size: 0.82rem; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tm-tile .tm-name { font-weight: 600; font-size: 0.72rem; line-height: 1.15; opacity: 0.95; text-shadow: 0 1px 4px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sb-tm-tile .tm-pct { font-size: 0.74rem; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,0.6); margin-top: 2px; }
.sb-tm-tile .tm-val { font-size: 0.7rem; font-weight: 700; opacity: 0.95; margin-top: auto; text-shadow: 0 1px 4px rgba(0,0,0,0.6); white-space: nowrap; }
.sb-tm-tile .tm-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sb-tm-tile .tm-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: #fff; flex-shrink: 0; }
.sb-tm-tile .tm-icon { font-size: 0.95rem; opacity: 0.95; flex-shrink: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.55); width: 18px; text-align: center; }

.sb-tm-tile.tm-lg { padding: 11px 13px; }
.sb-tm-tile.tm-lg .tm-tkr { font-size: 1rem; }
.sb-tm-tile.tm-lg .tm-logo { width: 26px; height: 26px; border-radius: 6px; }
.sb-tm-tile.tm-lg .tm-icon { font-size: 1.3rem; width: 26px; }
.sb-tm-tile.tm-lg .tm-pct { font-size: 0.82rem; }
.sb-tm-tile.tm-lg .tm-val { font-size: 0.78rem; }

.sb-tm-tile.tm-sm { padding: 6px 7px; }
.sb-tm-tile.tm-sm .tm-tkr { font-size: 0.72rem; }
.sb-tm-tile.tm-sm .tm-pct { display: none; }
.sb-tm-tile.tm-sm .tm-logo, .sb-tm-tile.tm-sm .tm-icon { width: 14px; height: 14px; font-size: 0.8rem; }

.sb-tm-tile.tm-cash { background: repeating-linear-gradient(45deg, #475569, #475569 8px, #52607a 8px, #52607a 16px) !important; }
.sb-treemap-foot { margin-top: 10px; font-size: 0.76rem; color: var(--sb-muted); font-weight: 600; }

.sb-ai-picks, .sb-earnings { display: flex; flex-direction: column; gap: 8px; }
.sb-pick-row, .sb-earn-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--sb-border);
}
.sb-pick-row:last-child, .sb-earn-row:last-child { border-bottom: none; }
.sb-pick-main { min-width: 0; }
.sb-pick-tkr { font-weight: 800; font-size: 0.9rem; }
.sb-pick-reason { font-size: 0.73rem; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.sb-pick-right { text-align: right; flex-shrink: 0; }
.sb-pick-score { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1rem; color: var(--sb-good); }
.sb-pick-bias { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--sb-good-bg); color: var(--sb-good); }
.sb-earn-when { font-size: 0.75rem; font-weight: 700; color: var(--sb-accent); flex-shrink: 0; }
.sb-earn-tkr { font-weight: 700; font-size: 0.86rem; }
.sb-earn-type { font-size: 0.72rem; color: var(--sb-muted); }

/* Scoreboard — logos + panel-title icons */
.sb-pick-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; flex-shrink: 0; border: 1px solid var(--sb-border); }
.sb-pt-label { display: inline-flex; align-items: center; min-width: 0; }
.sb-panel-icon { color: var(--sb-accent); margin-right: 8px; font-size: 0.95rem; flex-shrink: 0; }

/* Scoreboard — trailing sell-stops panel */
.sb-tstop-add {
    font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 8px;
    background: rgba(6,182,212,0.14); color: #0891b2; border: 1px solid rgba(6,182,212,0.3);
    cursor: pointer; text-transform: none; letter-spacing: 0;
}
:root:not([data-theme="light"]) .sb-tstop-add { background: rgba(34,211,238,0.14); color: #22d3ee; border-color: rgba(34,211,238,0.3); }
.sb-tstop-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 12px;
    background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: 10px;
}
.sb-tstop-field { font-size: 0.76rem; color: var(--sb-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.sb-tstop-input, .sb-tstop-num {
    font-size: 0.8rem; padding: 6px 8px; border-radius: 7px;
    background: var(--sb-panel); border: 1px solid var(--sb-border); color: var(--sb-text);
}
.sb-tstop-input { min-width: 150px; max-width: 220px; }
.sb-tstop-num { width: 56px; }
.sb-tstop-arm { font-size: 0.78rem; font-weight: 700; padding: 6px 14px; border-radius: 7px; background: var(--sb-accent); color: #fff; border: none; cursor: pointer; }
.sb-tstop-cancel { font-size: 0.78rem; font-weight: 600; padding: 6px 10px; border-radius: 7px; background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); cursor: pointer; }

/* CT-53 — house-rule summary line above the arm form */
.sb-tstop-houserule {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px; font-size: 0.74rem; color: var(--sb-muted);
}
.sb-tstop-houserule:empty { display: none; }
.sb-tstop-hr-label { display: inline-flex; align-items: center; gap: 6px; }
.sb-tstop-hr-label b { color: var(--sb-text); font-weight: 700; }
.sb-tstop-hr-muted { opacity: 0.7; }
.sb-tstop-hr-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.sb-tstop-hr-toggle input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--sb-accent); }

.sb-tstop-list { display: flex; flex-direction: column; gap: 9px; }
.sb-tstop-row {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--sb-border);
}
.sb-tstop-row:last-child { border-bottom: none; }
.sb-tstop-row.is-triggered { opacity: 0.72; }
.sb-tstop-head { font-weight: 700; font-size: 0.9rem; }
.sb-tstop-head .sb-tstop-co { font-weight: 500; color: var(--sb-muted); font-size: 0.8rem; margin-left: 6px; }
.sb-tstop-sub { font-size: 0.73rem; color: var(--sb-muted); grid-column: 1 / -1; }
.sb-tstop-sub b { color: var(--sb-text); font-weight: 700; }
.sb-tstop-meter { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--sb-border); overflow: hidden; margin-top: 3px; }
.sb-tstop-meter-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease, background 0.3s ease; }
.sb-tstop-pill { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: rgba(234,179,8,0.16); color: #a16207; }
:root:not([data-theme="light"]) .sb-tstop-pill { color: #eab308; }
.sb-tstop-disarm {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--sb-border);
    background: transparent; color: var(--sb-muted); cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.sb-tstop-disarm:hover { color: var(--sb-bad); border-color: var(--sb-bad); }

/* Scoreboard — today's briefing */
.sb-briefing { display: flex; flex-direction: column; gap: 2px; }
.sb-brief-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--sb-border); }
.sb-brief-row:last-child { border-bottom: none; }
.sb-brief-ico {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; font-size: 0.82rem; margin-top: 1px;
}
.sb-brief-row.k-warning .sb-brief-ico { background: rgba(220,38,38,0.13); color: #dc2626; }
.sb-brief-row.k-action  .sb-brief-ico { background: rgba(79,70,229,0.13);  color: var(--sb-accent); }
.sb-brief-row.k-info    .sb-brief-ico { background: rgba(100,116,139,0.13); color: var(--sb-muted); }
:root:not([data-theme="light"]) .sb-brief-row.k-warning .sb-brief-ico { color: #f87171; }
.sb-brief-body { min-width: 0; }
.sb-brief-title { font-size: 0.86rem; font-weight: 700; line-height: 1.3; }
.sb-brief-detail { font-size: 0.75rem; color: var(--sb-muted); line-height: 1.4; margin-top: 1px; }
.sb-briefing .sb-empty { padding: 10px 2px; }

/* Dashboard tweaks round 2 (CT-53/54/55) */
.sb-panel-icon.ai-sparkle-icon { width: 1.05rem; height: 1.05rem; vertical-align: -0.18em; }

/* AI picks: company name leads, ticker + reason secondary; bias arrow; bigger logo */
.sb-pick-logo { width: 35px; height: 35px; border-radius: 8px; }
.sb-pick-name { font-weight: 800; font-size: 0.9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-pick-sub { font-size: 0.73rem; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; margin-top: 1px; }
.sb-pick-sub .sb-pick-tkr { font-weight: 700; font-size: 0.73rem; color: var(--sb-text); }
.sb-pick-bias { display: inline-flex; align-items: center; gap: 4px; }
.sb-pick-bias.bull { background: rgba(21,128,61,0.12); color: #15803d; }
.sb-pick-bias.bear { background: rgba(220,38,38,0.12); color: #dc2626; }
.sb-pick-bias.neutral { background: rgba(234,179,8,0.15); color: #a16207; }
:root:not([data-theme="light"]) .sb-pick-bias.bull { color: #34d399; }
:root:not([data-theme="light"]) .sb-pick-bias.bear { color: #f87171; }
:root:not([data-theme="light"]) .sb-pick-bias.neutral { color: #eab308; }
.sb-pick-bias i { font-size: 0.62rem; }

/* Upcoming reports: company name leads */
.sb-earn-main { min-width: 0; }
.sb-earn-name { display: block; font-weight: 700; font-size: 0.86rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-earn-type { display: block; font-size: 0.72rem; color: var(--sb-muted); margin-top: 1px; }

/* smaller company name on medium treemap tiles */
.sb-tm-tile.tm-md .tm-name { font-size: 0.66rem; opacity: 0.9; }
.sb-tstop-sel {
    font-size: 0.78rem; padding: 6px 8px; border-radius: 7px;
    background: var(--sb-panel); border: 1px solid var(--sb-border); color: var(--sb-text);
}

/* Dashboard CT-59 (Continue at bottom) + CT-61 (editable target) */
.sb-continue-wrap {
    display: flex;
    justify-content: center;
    margin-top: 36px;
    margin-bottom: 24px;
}
.sb-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(420px, 92vw);
    padding: 14px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    border-radius: 12px;
    background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.38);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.55);
    opacity: 0.98;
}
.sb-continue-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}
[data-theme="light"] .sb-continue-btn,
:root[data-theme="light"] .sb-continue-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, 0.2);
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.32);
}
[data-theme="light"] .sb-continue-btn:hover,
:root[data-theme="light"] .sb-continue-btn:hover {
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.48);
}

.sb-hero { position: relative; }
.sb-target-gear {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 8px;
    background: transparent; border: 1px solid var(--sb-border);
    color: var(--sb-muted); cursor: pointer; font-size: 0.8rem;
}
.sb-target-gear:hover { color: var(--sb-text); border-color: var(--sb-muted); }
.sb-target-edit {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin-top: 12px; font-size: 0.82rem; color: var(--sb-muted); flex-wrap: wrap;
}
.sb-target-edit input {
    width: 90px; font-size: 0.9rem; padding: 5px 8px; border-radius: 7px;
    background: var(--sb-panel); border: 1px solid var(--sb-border); color: var(--sb-text);
}
.sb-target-edit button {
    font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 7px; cursor: pointer;
}
#sb-target-save { background: var(--sb-accent); color: #fff; border: none; }
#sb-target-cancel { background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); }

/* Dashboard CT-60: half hero + 2x2 tiles; streak panel with M-F dots */
.sb-top-split { display: flex; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.sb-top-split .sb-hero { flex: 1 1 50%; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.sb-tiles-2x2 { flex: 1 1 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-tiles-2x2 .sb-tile { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .sb-top-split { flex-direction: column; } .sb-top-split .sb-hero, .sb-tiles-2x2 { flex-basis: auto; } }

.sb-streak-panel { display: flex; flex-direction: column; }
.sb-streak-big { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; margin: 2px 0 4px; text-align: center; }
.sb-streak-sub { font-size: 0.74rem; color: var(--sb-muted); text-align: center; }
.sb-week-dots { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.sb-wdot-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.sb-wdot-cell b { font-size: 0.66rem; font-weight: 800; color: var(--sb-muted); letter-spacing: 0.04em; }
.sb-wdot {
    width: 100%; max-width: 42px; aspect-ratio: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 800; border: 2px solid var(--sb-border); color: var(--sb-muted);
}
.sb-wdot.hit { background: var(--sb-good); border-color: var(--sb-good); color: #fff; }
.sb-wdot.under { border-color: #f59e0b; color: #f59e0b; position: relative; overflow: hidden; }
/* "Water line" — the amber fill rises with the day's banked / target ratio. */
.sb-wdot.under::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--wfill, 0%);
    background: #f59e0b; opacity: 0.9;
    transition: height 0.4s ease;
}
.sb-wdot.miss { border-style: solid; opacity: 0.75; }
.sb-wdot.future { border-style: dashed; opacity: 0.5; }

/* Dashboard CT-58: keep a compact real header while the dashboard is up */
.sb-header-brand { display: none; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); font-weight: 800; font-family: 'Outfit', system-ui, sans-serif; font-size: 1.05rem; white-space: nowrap; }
.sb-header-brand .highlight { color: var(--accent-primary, #6366f1); }
.sb-header-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.sb-header-date { display: none; font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; margin: 2px 0 0; }

body.scoreboard-active .main-header {
    display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center;
    position: fixed; top: 0; left: 0; right: 0; z-index: 9100;
    gap: 12px; height: 54px; margin: 0; padding: 0 16px;
    background: var(--bg-card, #ffffff); border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] body.scoreboard-active .main-header,
body.scoreboard-active[data-theme="light"] .main-header { background: #f4f6fb; }
body.scoreboard-active .main-header .header-financial-summary { display: none !important; }
body.scoreboard-active .sb-header-brand { display: flex; grid-column: 1; }
body.scoreboard-active .main-header .header-title { grid-column: 2; text-align: center; max-width: none; }
body.scoreboard-active .main-header .header-title .subtitle { display: none; }
body.scoreboard-active .main-header .header-title .sb-header-date { display: block; }
body.scoreboard-active .main-header #page-title { font-size: 1.05rem; margin: 0; }
body.scoreboard-active .main-header .header-actions { grid-column: 3; justify-content: flex-end; }

#scoreboard-overlay.sb-visible { top: 54px; }
@media (max-width: 560px) {
    body.scoreboard-active .main-header .header-title .sb-header-date { display: none; }
    body.scoreboard-active .sb-header-brand span:not(.highlight) { font-size: 0.95rem; }
}

/* CT-58: make the header-actions cluster visible & compact in dashboard mode */
body.scoreboard-active .main-header .header-actions {
    display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap;
    min-width: 0; overflow: visible;
}
body.scoreboard-active .main-header .header-account-selector { display: block !important; }
body.scoreboard-active .main-header .header-account-selector .account-dropdown-trigger {
    padding: 4px 8px; height: 36px; border-radius: 9px;
}
body.scoreboard-active .main-header .header-account-selector .account-type-label { display: none; }
body.scoreboard-active .main-header .header-account-selector .account-name-val { font-size: 0.78rem; font-weight: 700; }
body.scoreboard-active .main-header #btn-theme-toggle,
body.scoreboard-active .main-header #btn-economic-calendar { flex-shrink: 0; }
@media (max-width: 620px) {
    body.scoreboard-active .main-header .header-account-selector .account-name-val { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* ============================================================================
   CT-62 — opt-in "Techie look" for the dashboard (body.sb-techie-on)
   Theme-aware: a dark HUD in dark mode, a pale HUD in light mode. All CSS,
   no image payload. Per-theme colours live in --tk-* tokens so the structural
   rules below are written once. Reversible: delete this block + the toggle.
   ========================================================================== */

/* --- per-theme tokens ---------------------------------------------------- */
:root:not([data-theme="light"]) body.sb-techie-on #scoreboard-overlay {
    --sb-bg: #070b14;
    --sb-panel: rgba(17, 24, 39, 0.66);
    --sb-border: rgba(56, 189, 248, 0.16);
    --sb-text: #f1f5f9;
    --sb-muted: #93a4bd;
    --sb-accent: #38bdf8;
    --tk-page: linear-gradient(180deg, #070b14 0%, #0a0f1a 45%, #080c15 100%);
    --tk-bloom-a: rgba(56, 189, 248, 0.12);
    --tk-bloom-b: rgba(129, 140, 248, 0.14);
    --tk-bloom-c: rgba(52, 211, 153, 0.08);
    --tk-grid-line: rgba(148, 163, 184, 0.055);
    --tk-grid-size: 46px;
    --tk-reticle: rgba(56, 189, 248, 0.55);
    --tk-panel-shadow: 0 10px 34px rgba(2, 6, 20, 0.55);
    --tk-panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --tk-hover-border: rgba(56, 189, 248, 0.34);
    --tk-hover-glow: 0 0 26px rgba(56, 189, 248, 0.16), 0 14px 40px rgba(2, 6, 20, 0.6);
    --tk-hero-lines: rgba(56, 189, 248, 0.12);
    --tk-hero-bloom: rgba(56, 189, 248, 0.22);
    --tk-hero-opacity: 0.7;
    --tk-header-bg: rgba(9, 13, 22, 0.92);
    --tk-header-text: #e2e8f0;
}
:root[data-theme="light"] body.sb-techie-on #scoreboard-overlay {
    --sb-bg: #eef2fb;
    --sb-panel: rgba(255, 255, 255, 0.82);
    --sb-border: rgba(14, 165, 233, 0.22);
    --sb-text: #0f172a;
    --sb-muted: #566581;
    --sb-accent: #0ea5e9;
    --tk-page: linear-gradient(180deg, #f1f4fc 0%, #e8eef8 50%, #eef2fb 100%);
    --tk-bloom-a: rgba(14, 165, 233, 0.12);
    --tk-bloom-b: rgba(99, 102, 241, 0.10);
    --tk-bloom-c: rgba(16, 185, 129, 0.08);
    --tk-grid-line: rgba(30, 64, 120, 0.06);
    --tk-grid-size: 44px;
    --tk-reticle: rgba(14, 165, 233, 0.5);
    --tk-panel-shadow: 0 10px 30px rgba(30, 58, 120, 0.10);
    --tk-panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --tk-hover-border: rgba(14, 165, 233, 0.4);
    --tk-hover-glow: 0 0 22px rgba(14, 165, 233, 0.14), 0 14px 34px rgba(30, 58, 120, 0.14);
    --tk-hero-lines: rgba(14, 165, 233, 0.10);
    --tk-hero-bloom: rgba(14, 165, 233, 0.16);
    --tk-hero-opacity: 0.8;
    --tk-header-bg: rgba(255, 255, 255, 0.92);
    --tk-header-text: #0f172a;
}

/* --- structural (written once, driven by the tokens above) -------------- */
body.sb-techie-on #scoreboard-overlay {
    color: var(--sb-text);
    background:
        radial-gradient(1000px 520px at 8% -8%, var(--tk-bloom-a), transparent 60%),
        radial-gradient(900px 620px at 104% 4%, var(--tk-bloom-b), transparent 58%),
        radial-gradient(700px 700px at 50% 120%, var(--tk-bloom-c), transparent 60%),
        var(--tk-page);
}
body.sb-techie-on #scoreboard-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(var(--tk-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tk-grid-line) 1px, transparent 1px);
    background-size: var(--tk-grid-size) var(--tk-grid-size);
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
}
body.sb-techie-on #scoreboard-overlay .sb-inner { position: relative; z-index: 1; }

body.sb-techie-on #scoreboard-overlay .sb-panel,
body.sb-techie-on #scoreboard-overlay .sb-hero,
body.sb-techie-on #scoreboard-overlay .sb-tile,
body.sb-techie-on #scoreboard-overlay .sb-streak-panel {
    position: relative;
    background: var(--sb-panel);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 1px solid var(--sb-border);
    box-shadow: var(--tk-panel-inset), var(--tk-panel-shadow);
}

/* Corner reticle — a short accent L in the top-left of every panel. */
body.sb-techie-on #scoreboard-overlay .sb-panel::before,
body.sb-techie-on #scoreboard-overlay .sb-hero::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--tk-reticle);
    border-left: 2px solid var(--tk-reticle);
    border-top-left-radius: 4px;
    pointer-events: none;
    opacity: 0.7;
}

body.sb-techie-on #scoreboard-overlay .sb-panel-icon {
    filter: drop-shadow(0 0 6px currentColor);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount.pos {
    text-shadow: 0 0 22px rgba(52, 211, 153, 0.4);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount.neg {
    text-shadow: 0 0 22px rgba(248, 113, 113, 0.38);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount.val-bronze {
    text-shadow: 0 0 22px rgba(213, 137, 63, 0.42);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount.val-silver {
    text-shadow: 0 0 22px rgba(199, 199, 210, 0.4);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount.val-gold {
    text-shadow: 0 0 24px rgba(245, 197, 24, 0.5);
}
body.sb-techie-on #scoreboard-overlay .sb-hero-amount-shut {
    text-shadow: 0 0 18px rgba(14, 165, 233, 0.28);
}

body.sb-techie-on #scoreboard-overlay .sb-panel:hover {
    border-color: var(--tk-hover-border);
    box-shadow: var(--tk-panel-inset), var(--tk-hover-glow);
}

/* A CSS-only neon horizon behind the hero for a focal point. */
body.sb-techie-on #scoreboard-overlay .sb-hero { overflow: hidden; }
body.sb-techie-on #scoreboard-overlay .sb-hero::after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -60%;
    height: 150%;
    background:
        radial-gradient(60% 60% at 50% 100%, var(--tk-hero-bloom), transparent 70%),
        repeating-linear-gradient(90deg, var(--tk-hero-lines) 0 1px, transparent 1px 42px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    transform: perspective(420px) rotateX(62deg);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 0;
    opacity: var(--tk-hero-opacity);
}
body.sb-techie-on #scoreboard-overlay .sb-hero > * { position: relative; z-index: 1; }

/* Compact header picks up a matching tint. NB: the --tk-* / --sb-* tokens are
   scoped to #scoreboard-overlay, and .main-header lives outside it — so these
   must use concrete, theme-split values or the header renders transparent. */
body.sb-techie-on.scoreboard-active .main-header {
    background: rgba(9, 13, 22, 0.97) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.16) !important;
}
:root[data-theme="light"] body.sb-techie-on.scoreboard-active .main-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(14, 165, 233, 0.18) !important;
}
body.sb-techie-on.scoreboard-active .main-header #page-title,
body.sb-techie-on.scoreboard-active .main-header .sb-header-date,
body.sb-techie-on.scoreboard-active .main-header .sb-header-brand,
body.sb-techie-on.scoreboard-active .main-header .sb-header-brand span {
    color: #e2e8f0 !important;
}
:root[data-theme="light"] body.sb-techie-on.scoreboard-active .main-header #page-title,
:root[data-theme="light"] body.sb-techie-on.scoreboard-active .main-header .sb-header-date,
:root[data-theme="light"] body.sb-techie-on.scoreboard-active .main-header .sb-header-brand,
:root[data-theme="light"] body.sb-techie-on.scoreboard-active .main-header .sb-header-brand span {
    color: #0f172a !important;
}
body.sb-techie-on.scoreboard-active .main-header .sb-header-brand .highlight {
    color: #38bdf8 !important;
}

/* Dashboard header shows only the title + date — kill the leftover page
   subtitle ("Track and monitor chosen equities.") from the previous tab. */
body.scoreboard-active .main-header #page-subtitle,
body.scoreboard-active .main-header .subtitle {
    display: none !important;
}

/* --- Selected-stock trailing sell-stop control (Phase 1, notify-only) ----- */
.stock-tstop-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.stk-tstop-hdr {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-primary); display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.stk-tstop-hdr i { color: var(--accent-primary); }
.stk-tstop-hdr .stk-tstop-muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.stk-tstop-armed {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
    color: #16a34a; background: rgba(22, 163, 74, 0.12); padding: 2px 7px; border-radius: 999px;
}
.stk-tstop-line { font-size: 0.8rem; color: var(--text-primary); }
.stk-tstop-muted { color: var(--text-secondary); font-size: 0.75rem; }
.stk-tstop-pill {
    font-size: 0.66rem; font-weight: 700; color: #b45309;
    background: rgba(234, 179, 8, 0.16); padding: 1px 6px; border-radius: 999px;
}
.stk-tstop-meter { height: 5px; border-radius: 3px; background: rgba(148, 163, 184, 0.22); overflow: hidden; }
.stk-tstop-meter > div { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.stk-tstop-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stk-tstop-form label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 0.66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px;
}
.stk-tstop-form select {
    font-size: 0.8rem; padding: 5px 8px; border-radius: 7px;
    background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color);
}
/* Arm button has no label above it, so let the form's align-items:flex-end
   bottom-align it with the Trail/Start dropdowns. Nudge for the select border. */
.stk-tstop-form .stk-tstop-arm { align-self: flex-end; margin-bottom: 1px; }
/* Cancel button stands alone on its own line in the armed state. */
.stock-tstop-block .stk-tstop-cancel { align-self: flex-start; }
/* Smart Sell fields inside the Sell popup (trailing sell-stop, notify-only).
   Slider rows follow the Buy/Sell popup pattern: label · slider · value box. */
#group-smartsell { display: flex; flex-direction: column; }
#group-smartsell.ss-collapsed { display: none !important; }
/* Smart Sell owns the whole panel: hide the Stop/Limit price rows and the
   shares picker (arming a notify-only stop needs no quantity). */
.trade-modal-trigger-inputs.smartsell-mode #group-limit-price,
.trade-modal-trigger-inputs.smartsell-mode #group-stop-price { display: none !important; }
/* #trade-modal-time-warning is the footer wrapper (Execute Mode, 24/5,
   Expiration), not a warning banner, so it must stay mounted in Smart Sell -
   hiding it took the entire footer with it. */

/* Quote-widget CTA rows: main Buy/Sell button + a square "Smart" companion that
   opens the popup with Smart mode already selected. */
#quote-widget-actions { width: 150px !important; }
.trade-cta-row { display: flex; gap: 0.4rem; width: 100%; align-items: stretch; }
.btn-snapshot-smart {
    flex: 0 0 auto; width: 34px; padding: 0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease;
    border: 1px solid transparent;
}
.btn-snapshot-smart:active { transform: translateY(1px); }
.btn-snapshot-smart.smart-buy { background: rgba(16,185,129,0.14); color: var(--success); border-color: rgba(16,185,129,0.4); }
.btn-snapshot-smart.smart-sell { background: rgba(239,68,68,0.14); color: var(--danger); border-color: rgba(239,68,68,0.4); }
.btn-snapshot-smart:hover { filter: brightness(1.25); }

.btn-snapshot-opportunity {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: 1px solid rgba(129, 140, 248, 0.35);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-snapshot-opportunity:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.45);
    opacity: 0.95;
}
.btn-snapshot-opportunity:active {
    transform: translateY(1px);
}
.btn-snapshot-opportunity.is-active {
    background: linear-gradient(135deg, #3730a3 0%, #4338ca 100%);
    border-color: rgba(165, 180, 252, 0.5);
    color: #e0e7ff;
    box-shadow: 0 2px 8px rgba(55, 48, 163, 0.4);
}

.trade-cta-row.js-opportunity-cta-row {
    position: relative;
    overflow: visible;
}

.opp-sparkle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 120;
}

.opp-sparkle-star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: oppSparkleBurst 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.opp-sparkle-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes oppSparkleBurst {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0deg);
        opacity: 1;
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.35) rotate(var(--rot));
    }
    100% {
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.3), calc(var(--ty) * 1.3)) scale(0) rotate(calc(var(--rot) * 1.6));
        opacity: 0;
    }
}

.btn-snapshot-opportunity.sparkle-pop {
    animation: oppBtnPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes oppBtnPop {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8);
    }
    40% {
        transform: scale(1.06);
        box-shadow: 0 0 18px 4px rgba(129, 140, 248, 0.7), 0 0 0 10px rgba(99, 102, 241, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(55, 48, 163, 0.4);
    }
}

/* --- Selected Stock Opportunity Inline Panel & Control Block --- */
.selected-stock-opportunity-card {
    background: var(--bg-card, #181826);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 14px);
    padding: 1rem 1.25rem;
    box-shadow: var(--card-shadow, var(--shadow-sm));
    width: 100%;
    box-sizing: border-box;
}

/* Lifespan gauge on the compact Opportunities list card: a slim vertical
   strip at the card's right edge, full when the clock just (re)started and
   draining toward empty at the bottom as expiry approaches, with a small
   clock icon anchored beneath it. */
/* Auto-disarmed because the owner bought the stock themselves. Outlined rather
   than heat-mapped, because there is no longer a target being watched and a
   green "very close" reading would be telling them something untrue. */
.opp-list-item.is-disarmed {
    border-color: rgba(129, 140, 248, 0.55);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25);
    background-image: linear-gradient(rgba(129, 140, 248, 0.06), rgba(129, 140, 248, 0.06));
}

.opp-mini-badge.is-disarmed-badge {
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.5);
    background: rgba(129, 140, 248, 0.12);
}

/* Sits in the slot the lifespan gauge vacates once an opportunity has
   converted - the two are mutually exclusive by design. */
.opp-list-converted-flag {
    position: absolute;
    top: 0.6rem;
    right: 0.4rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.66rem;
    pointer-events: auto;
}

.opp-list-lifespan-gauge {
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    right: 0.4rem;
    width: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.opp-list-lifespan-track {
    flex: 1;
    width: 5px;
    min-height: 0;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.opp-list-lifespan-fill {
    width: 100%;
    border-radius: 2.5px;
    height: 100%;
    background: #10b981;
    transition: height 0.6s ease, background-color 0.6s ease;
}
.opp-list-lifespan-icon {
    color: var(--text-secondary);
    font-size: 0.6rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.selected-stock-opportunity-card.is-expanding {
    animation: oppCardSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes oppCardSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.opp-panel-price-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
}

.opp-price-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.opp-price-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.opp-amount-count-val {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    cursor: text;
    border-bottom: 1px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent);
    padding-bottom: 1px;
}
.opp-amount-count-val:hover {
    border-bottom-color: var(--accent-primary, #6366f1);
}

.opp-limit-price-input,
.opp-amount-count-input {
    width: 100%;
    flex: 1 1 auto;
    text-align: center;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1;
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.opp-limit-price-input::-webkit-outer-spin-button,
.opp-limit-price-input::-webkit-inner-spin-button,
.opp-amount-count-input::-webkit-outer-spin-button,
.opp-amount-count-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.opp-step-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.opp-step-btn:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: #6366f1;
}

.opp-step-btn:active {
    background: rgba(99, 102, 241, 0.28);
    transform: scale(0.94);
}

.opp-range-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 32px !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.opp-range-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, rgba(255, 255, 255, 0.15));
}

.opp-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);
}

.opp-range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, rgba(255, 255, 255, 0.15));
}

.opp-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);
}

.opp-panel-delete-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.opp-panel-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.opp-panel-delete-btn:active {
    transform: scale(0.92);
}

.opp-panel-lock-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.opp-panel-lock-btn:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}
.opp-panel-lock-btn:active {
    transform: scale(0.92);
}
.opp-panel-lock-btn.is-locked {
    color: #10b981;
}
.opp-panel-lock-btn.is-locked:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.opp-suggest-price-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #6366f1;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
    white-space: nowrap;
}
.opp-suggest-price-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}
.opp-suggest-price-btn:active {
    transform: scale(0.95);
}
.opp-suggest-price-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
.opp-suggest-price-btn.is-loading i {
    animation: opp-suggest-spin 0.8s linear infinite;
}
@keyframes opp-suggest-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.selected-stock-opportunity-card.opp-locked .opp-suggest-price-btn {
    opacity: 0.4;
    pointer-events: none;
}

/* Once a target is locked (active), its entry controls are read-only - dimmed
   and inert - so an accidental slider drag or scroll-wheel nudge while
   scrolling the stock view can't quietly change an armed order. */
.selected-stock-opportunity-card.opp-locked .opp-amount-count-val {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.selected-stock-opportunity-card.opp-locked input[type="range"] {
    opacity: 0.4;
    pointer-events: none;
}
.selected-stock-opportunity-card.opp-locked .opp-step-btn {
    opacity: 0.4;
    pointer-events: none;
}
.selected-stock-opportunity-card.opp-locked #opp-order-type-select,
.selected-stock-opportunity-card.opp-locked #opp-btn-mode-shares,
.selected-stock-opportunity-card.opp-locked #opp-btn-mode-value {
    opacity: 0.5;
    pointer-events: none;
}

/* Section-heading icons in the opportunity panel. */
.opp-title-icon {
    margin-right: 6px;
    opacity: 0.9;
}

/* ── Locked opportunity: collapse to what still means something ──────────────
   A locked target is a statement, not a form. Every control that edits it is
   inert anyway, so keeping the steppers, sliders, dial and mode toggle on
   screen just spent a lot of vertical space telling you about things you
   cannot do. Locked, the panel keeps three facts on one line each - target
   price, buy order, and the shares or value to buy - and everything else
   folds away. The lock button does not move, so the way back is where it was. */
.selected-stock-opportunity-card.opp-locked .opp-suggest-price-btn,
.selected-stock-opportunity-card.opp-locked #opp-panel-market-price-ref,
.selected-stock-opportunity-card.opp-locked .opp-step-btn,
.selected-stock-opportunity-card.opp-locked input[type="range"],
.selected-stock-opportunity-card.opp-locked .tm-price-pct,
.selected-stock-opportunity-card.opp-locked #opp-amount-toggle-container,
.selected-stock-opportunity-card.opp-locked .trade-modal-dial-container,
.selected-stock-opportunity-card.opp-locked .opp-price-body > div:first-child {
    display: none !important;
}

.selected-stock-opportunity-card.opp-locked .card-body {
    gap: 0.35rem !important;
}

/* Title and value share a line instead of stacking. */
.selected-stock-opportunity-card.opp-locked .opp-panel-price-row {
    display: flex;
    /* The base rule stacks these; locked wants label and value on one line, so
       the direction has to be overridden too, not just the display. */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.selected-stock-opportunity-card.opp-locked .opp-price-titlebar {
    margin-bottom: 0 !important;
    flex: 0 0 auto;
}

.selected-stock-opportunity-card.opp-locked .opp-price-body {
    width: auto !important;
    flex: 0 0 auto;
    gap: 0 !important;
    justify-content: flex-end !important;
}

/* The value carries the panel now, so it is readable rather than dimmed - it is
   a fact being reported, not a disabled input. */
.selected-stock-opportunity-card.opp-locked .opp-amount-count-val {
    opacity: 1;
    font-size: 1.05rem;
    font-weight: 800;
}

/* Locked, the buy order lines up with the rows above and below it: the same
   heading treatment on the left, the value on the right. Its icon was a filled
   27px disc while the others are inline glyphs, which made the three rows look
   unrelated - it is drawn the same way here. */
.selected-stock-opportunity-card.opp-locked .opp-order-type-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none !important;
    color: #6366f1 !important;
    font-size: 0.75rem;
    margin-right: 6px;
}

.selected-stock-opportunity-card.opp-locked .opp-order-type-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0;
}

.selected-stock-opportunity-card.opp-locked .opp-order-heading {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1;
    margin-right: 0;
}

.selected-stock-opportunity-card.opp-locked .opp-order-heading::after {
    content: '';
}

.selected-stock-opportunity-card.opp-locked .opp-order-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

.selected-stock-opportunity-card.opp-locked .opp-panel-order-row {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Its dropdown is inert when locked, so show the chosen order as plain text. */
.selected-stock-opportunity-card.opp-locked #opp-order-type-wrap {
    display: none !important;
}

/* Target price now leads the row and carries the weight, since the live price
   and its percentage have gone - the proximity meter underneath already shows
   how far off target the stock is, so repeating it was noise. */
.opp-list-target-price {
    font-weight: 800 !important;
    font-size: 0.95rem;
    color: var(--text-primary) !important;
}

.opp-list-amount {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* A draft is not armed and must not look like the rows that are.
   Dimming the row was the first attempt and it fought the UI: the row has to
   come back to full strength when selected or hovered to stay usable, and the
   draft is usually the row you are working on - so it read as solid exactly
   when you were looking at it, then faded on the next refresh once selection
   moved. A label cannot be overridden by another state, so it says DRAFT
   outright and keeps the dashed edge. */
.opp-list-item.is-draft-row {
    border-style: dashed !important;
    padding-top: 20px;
}

.opp-list-item.is-draft-row::before {
    content: 'DRAFT — NOT ARMED';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0f172a;
    background: repeating-linear-gradient(
        135deg,
        #fbbf24, #fbbf24 8px,
        #f59e0b 8px, #f59e0b 16px
    );
    border-radius: 10px 10px 0 0;
    pointer-events: none;
    z-index: 2;
}

/* ─── Opportunities list: its own bespoke card, not the generic stock row ─── */
.opp-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 1.6rem 0.7rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    margin-bottom: 0.5rem;
}
.opp-list-item:hover {
    border-color: rgba(99, 102, 241, 0.35);
}
.opp-list-item.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.opp-list-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.opp-list-logo-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
}
.opp-list-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opp-list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.opp-list-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.opp-list-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.opp-mini-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}
.opp-mini-badge.is-active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}
.opp-mini-badge.is-draft {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    border-color: rgba(148, 163, 184, 0.25);
}

.opp-list-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}
.opp-list-current-price {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.opp-list-change {
    font-weight: 700;
    font-size: 0.7rem;
}
.opp-list-target-sep {
    color: var(--text-secondary);
    opacity: 0.5;
}
.opp-list-target-price {
    color: var(--text-secondary);
    font-weight: 600;
}

.opp-list-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #818cf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    align-self: flex-start;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.opp-list-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

/* The proximity meter: a fixed red -> amber -> green track (the whole scale,
   always) with a marker pin showing where THIS opportunity sits on it today -
   at a glance, "green and to the right" reads as ready, "red and to the left"
   reads as nowhere near, independent of any other opportunity in the list. */
.opp-list-meter-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
}
.opp-list-meter-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #0b0e14);
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
}
.opp-list-meter-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.68rem;
}
.opp-list-meter-pct {
    color: var(--text-secondary);
    font-weight: 600;
}

.opp-panel-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
    box-sizing: border-box;
}

.opp-order-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #6366f1;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    flex-shrink: 0;
}

.opp-order-type-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    padding: 0 0.6rem;
}

/* Unlocked, it still reads as one sentence. */
.opp-order-type-label .opp-order-heading::after {
    content: ':';
}

.opp-order-type-label .opp-order-heading {
    text-transform: none;
    letter-spacing: 0;
    margin-right: 4px;
}

.opp-order-type-wrap {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 22px;
}

.opp-order-type-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid #6366f1;
    border-radius: 22px;
    background: rgba(99, 102, 241, 0.18);
    color: transparent;
    text-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.opp-order-type-select option {
    background: var(--bg-card, #181826);
    color: var(--text-primary, #ffffff);
}

#group-smartsell .ss-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
#group-smartsell .ss-row > label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin: 0; display: inline-flex; align-items: center; gap: 6px; min-width: 88px; flex-shrink: 0; }
#group-smartsell .price-mini-slider { flex: 1; min-width: 60px; cursor: pointer; }
#group-smartsell .ss-num {
    width: 50px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: 0.85rem;
    background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: 6px; padding: 5px 4px; -moz-appearance: textfield;
}
#group-smartsell .ss-num::-webkit-outer-spin-button,
#group-smartsell .ss-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#group-smartsell .ss-pct { font-size: 0.8rem; font-weight: 700; color: var(--text-tertiary, #64748b); flex-shrink: 0; margin-left: -2px; }
#group-smartsell .ss-i {
    width: 15px; height: 15px; border-radius: 50%; border: none; padding: 0; line-height: 1;
    font-size: 0.66rem; font-weight: 800; font-style: italic; font-family: Georgia, serif;
    background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer;
}
#group-smartsell .ss-help { font-size: 0.74rem; color: var(--text-tertiary, #64748b); line-height: 1.3; margin: 0 0 6px 4px; }

/* Watchlist Standard rows: give the company logo breathing room so the
   name + ticker/exchange badges aren't touching the image. Only the standard
   rows have .stock-info directly after .drag-handle (screener rows use
   .watchlist-stock-main-row), so this leaves the AI-Outlooks view alone. */
.watchlist-stock-item > .drag-handle + .stock-info { margin-left: 8px; }
/* Same breathing room for My Portfolio holding rows (logo -> name/meta). */
.portfolio-item-card > .drag-handle + .portfolio-item-details { margin-left: 8px; }

/* --- Selected-stock trailing "buy the dip" watch (Phase 2, notify-only) --- */
.stock-tbuy-card { padding: 1rem 1.1rem; }
.stock-tbuy-block { display: flex; flex-direction: column; gap: 7px; }
.stk-tbuy-hdr {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-primary); display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.stk-tbuy-hdr i { color: var(--accent-primary); }
.stk-tbuy-hdr .stk-tbuy-muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.stk-tbuy-armed {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
    color: var(--accent-primary); background: rgba(99, 102, 241, 0.12);
    padding: 2px 7px; border-radius: 999px;
}
.stk-tbuy-line { font-size: 0.8rem; color: var(--text-primary); }
.stk-tbuy-muted { color: var(--text-secondary); font-size: 0.75rem; }
.stk-tbuy-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stk-tbuy-form label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 0.66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px;
}
.stk-tbuy-form input,
.stk-tbuy-form select {
    font-size: 0.8rem; padding: 5px 8px; border-radius: 7px; max-width: 150px;
    background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color);
}
.stk-tbuy-form .stk-tbuy-arm { align-self: flex-end; margin-bottom: 1px; }
.stk-tbuy-est { min-height: 1em; }

/* --- Signal Scorecard: My Tracked Outlooks ------------------------------- */
.sc-trk-wrap {
    background: var(--bg-card, #111827);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-trk-head {
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-secondary); display: flex; align-items: center; gap: 8px;
}
.sc-trk-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 9px 34px 9px 0;
    border-top: 1px solid var(--border-color);
}
.sc-trk-row:first-of-type { border-top: none; }
.sc-trk-main { display: flex; align-items: baseline; gap: 8px; }
.sc-trk-tkr { font-weight: 800; font-size: 0.9rem; color: var(--text-primary); }
.sc-trk-verdict { font-size: 0.72rem; color: var(--text-secondary); }
.sc-trk-detail { font-size: 0.78rem; color: var(--text-primary); line-height: 1.4; }
.sc-trk-bar { height: 4px; border-radius: 3px; background: rgba(148,163,184,0.22); overflow: hidden; margin-top: 3px; }
.sc-trk-bar > div { height: 100%; background: var(--accent-primary, #6366f1); border-radius: 3px; transition: width 0.4s ease; }
.sc-trk-del {
    position: absolute; top: 8px; right: 0;
    width: 24px; height: 24px; border-radius: 6px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer; font-size: 0.7rem;
}
.sc-trk-del:hover { color: var(--danger); border-color: var(--danger); }


/* ==========================================================================
   Holding row layout
   --------------------------------------------------------------------------
   The card is position:relative with the company name absolutely placed across
   the full top, so it can run under the value column and fade out rather than
   ellipsing early. Everything else sits in a vertically centred flex row:

     [logo]      Company Name Runs Right Across The Top ~~fades~~
     [TICKER]    63 shares  [badges]      ~~spark~~        £2,941.89
                                                        -£298.21 (-9.20%)
   ========================================================================== */
.portfolio-item-card {
    position: relative;
    align-items: flex-start;
    padding: 0.5rem 0.85rem 0.5rem 0.55rem;
}

.portfolio-item-title {
    position: absolute;
    top: 0.5rem;
    left: calc(0.55rem + 44px + 8px);
    right: 0.6rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -0.2px;
    pointer-events: none;
    /* Run on past the sparkline, then fade out just before the value column
       rather than cutting off early with an ellipsis. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 106px), transparent calc(100% - 66px));
    mask-image: linear-gradient(to right, #000 calc(100% - 106px), transparent calc(100% - 66px));
}

/* Logo column: icon with the short ticker directly beneath it. */
.portfolio-item-card .drag-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 44px;
}

/* The icon's own margin-right widened this column past the logo, pushing the
   centred ticker to the right of it. Spacing lives on the details column. */
.portfolio-item-card .drag-handle .portfolio-item-icon {
    margin-right: 0;
}

.portfolio-item-ticker-under {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shares + badges sit under the title, aligned with it. */
.portfolio-item-details {
    margin-top: 1.4rem;
}

/* Both sit below the vertical centre (~10% of the row height) so the title has
   a clear run across the top. The sparkline also shifts left into the space the
   title no longer needs. */
.portfolio-item-financials {
    align-self: center;
    position: relative;
    top: 8px;
}

.portfolio-item-spark {
    align-self: center;
    position: relative;
    left: -7%;
    top: 10px;
}

.portfolio-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.portfolio-shares-badge {
    background: none;
    padding: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    flex-shrink: 0;
}

.shares-num {
    font-weight: 700;
    color: var(--text-primary);
}

.shares-unit {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ==========================================================================
   Badge strip - inert indicators (Note, Trades, Sell Limit, Profit Protect).
   Flex row with room for ~6 before it wraps.
   ========================================================================== */
.hold-badge-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.hold-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.hold-badge-txt { font-variant-numeric: tabular-nums; }

.hold-badge-protect {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.3);
}

.hold-badge-selllimit {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.hold-badge-trades {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-secondary);
    border-color: rgba(148, 163, 184, 0.28);
}

.hold-badge-note.has-note {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.32);
}

.hold-badge-note.no-note {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Sparkline slot, between the badges and the value column. */
.portfolio-item-spark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 0.6rem;
    min-width: 74px;
}

.portfolio-item-spark:empty { min-width: 0; margin: 0; }

/* Value column, vertically centred against the whole card. */
.portfolio-item-value {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.portfolio-item-return {
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobile/tablet. The blocks further up turn the card into a grid; undo that so
   the absolute title + flex row above applies at every width.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .portfolio-item-card {
        display: flex !important;
        align-items: flex-start !important;
        padding: 0.5rem 0.5rem 0.5rem 0.3rem !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }
    .portfolio-item-card .drag-handle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        width: 44px !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .portfolio-item-card .drag-handle i { display: none !important; }
    .portfolio-item-icon {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
    .portfolio-item-ticker-under {
        font-size: 0.62rem !important;
        max-width: 100% !important;
    }
    .portfolio-item-title {
        position: absolute !important;
        top: 0.5rem !important;
        left: calc(0.3rem + 44px + 8px) !important;
        right: 0.5rem !important;
        font-size: 0.92rem !important;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 113px), transparent calc(100% - 76px)) !important;
        mask-image: linear-gradient(to right, #000 calc(100% - 113px), transparent calc(100% - 76px)) !important;
    }
    .portfolio-item-details {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 1.35rem 0 0 0.5rem !important;
    }
    .portfolio-item-card .drag-handle .portfolio-item-icon {
        margin-right: 0 !important;
    }
    .portfolio-item-financials {
        align-self: center !important;
        position: relative !important;
        top: 7px !important;
    }
    .portfolio-item-spark {
        align-self: center !important;
        position: relative !important;
        left: -7% !important;
        top: 9px !important;
    }
    .portfolio-shares-badge { font-size: 0.78rem !important; }
    .shares-unit { font-size: 0.66rem !important; }
    .portfolio-item-prices { display: none !important; }
    .portfolio-item-spark {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 0.35rem !important;
        min-width: 46px !important;
    }
    .portfolio-item-spark:empty { min-width: 0 !important; margin: 0 !important; }
    .portfolio-item-spark .sparkline-svg {
        width: 46px !important;
        height: 22px !important;
    }
    .portfolio-item-financials {
        grid-column: auto !important;
        grid-row: auto !important;
        align-items: flex-end !important;
        flex-shrink: 0 !important;
        gap: 0.1rem !important;
    }
    .portfolio-item-value { font-size: 0.98rem !important; }
    .portfolio-item-return { font-size: 0.68rem !important; }
    .hold-badge {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }
    /* Keep the strip on one line: the sell-limit price stays in the tooltip
       and on the Previous Investments card. */
    .hold-badge-selllimit .hold-badge-txt { display: none !important; }
}

/* Previous Investments card: collapsed to just its header until tapped. */
.prev-invest-header { user-select: none; }

.prev-invest-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    transition: max-height 0.25s ease, opacity 0.18s ease, padding-top 0.25s ease;
}

.prev-invest-card.expanded .prev-invest-body {
    max-height: 1400px;
    opacity: 1;
    padding-top: 0.85rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.prev-invest-card.expanded .prev-invest-chevron { transform: rotate(180deg); }

/* A short company name never reaches the sparkline, so it can sit centred
   rather than dropped clear of the title. */
.portfolio-item-card.short-name .portfolio-item-spark { top: 0; }

@media (max-width: 1024px) {
    .portfolio-item-card.short-name .portfolio-item-spark { top: 0 !important; }
}

/* ==========================================================================
   Row state colouring
   -------------------------------------------------------------------------- */

/* Selected marker sits OUTSIDE the row. The container clips its own overflow
   and the logo now sits close to the left edge, so an inset bar collided with
   it. The wrapper is position:relative and unclipped, so draw it there. */
.portfolio-item-container.selected,
.portfolio-item-wrapper.selected .portfolio-item-container,
.portfolio-item-container:has(.portfolio-item-card.selected),
.portfolio-item-card.selected,
[data-theme="light"] .portfolio-item-container.selected,
[data-theme="light"] .portfolio-item-wrapper.selected .portfolio-item-container,
[data-theme="light"] .portfolio-item-container:has(.portfolio-item-card.selected),
[data-theme="light"] .portfolio-item-card.selected {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15) !important;
}

/* The card sits inside the container, which already carries the selected
   border and glow - it must not draw a second bar of its own. */
.portfolio-item-card.selected,
[data-theme="light"] .portfolio-item-card.selected {
    box-shadow: none !important;
}

/* Always present but invisible, so selecting a row fades the marker in rather
   than popping it into existence. */
.portfolio-item-wrapper::before,
.watchlist-item-wrapper::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: var(--accent-primary, #6366f1);
    opacity: 0;
    transform: scaleY(0.5);
    transform-origin: center;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    pointer-events: none;
}

.portfolio-item-wrapper:has(.portfolio-item-card.selected)::before,
.portfolio-item-wrapper.selected::before,
.watchlist-item-wrapper:has(.portfolio-item-card.selected)::before,
.watchlist-item-wrapper.selected::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Unselected rows carry a faint tint and border in the direction of the
   position's P&L. Selected styling still wins. */
.portfolio-item-container.pos-gain {
    background: rgba(48, 209, 88, 0.05);
    border-color: rgba(48, 209, 88, 0.32);
}

.portfolio-item-container.pos-loss {
    background: rgba(255, 69, 58, 0.05);
    border-color: rgba(255, 69, 58, 0.32);
}

/* Hover deepens the row's own tint rather than washing it with the generic
   grey highlight. */
.portfolio-item-container.pos-gain:hover {
    background: rgba(48, 209, 88, 0.1);
    border-color: rgba(48, 209, 88, 0.55);
}

.portfolio-item-container.pos-loss:hover {
    background: rgba(255, 69, 58, 0.1);
    border-color: rgba(255, 69, 58, 0.55);
}

[data-theme="light"] .portfolio-item-container.pos-gain {
    background: rgba(22, 163, 74, 0.075);
    border-color: rgba(22, 163, 74, 0.34);
}

[data-theme="light"] .portfolio-item-container.pos-loss {
    background: rgba(220, 38, 38, 0.075);
    border-color: rgba(220, 38, 38, 0.34);
}

/* The card carries .clickable-row, which paints an opaque
   `background-color: var(--bg-tertiary) !important` on hover and completely
   covers the container's tint. Keep the card transparent so the row's own
   gain/loss colour is what shows through. */
.portfolio-item-container.pos-gain .portfolio-item-card.clickable-row:hover,
.portfolio-item-container.pos-loss .portfolio-item-card.clickable-row:hover {
    background-color: transparent !important;
}

/* Light theme needs its own darker pair - the dark-theme greens and reds at
   these alphas are indistinguishable from white. */
[data-theme="light"] .portfolio-item-container.pos-gain:hover {
    background: rgba(22, 163, 74, 0.09);
    border-color: rgba(22, 163, 74, 0.45);
}

[data-theme="light"] .portfolio-item-container.pos-loss:hover {
    background: rgba(220, 38, 38, 0.09);
    border-color: rgba(220, 38, 38, 0.45);
}

/* --------------------------------------------------------------------------
   Watchlist rows reuse the holding-row layout. They keep the exchange tag on
   the meta line and take no gain/loss fill.
   -------------------------------------------------------------------------- */
.watchlist-item-wrapper {
    position: relative;
}

.watchlist-stock-item .portfolio-item-meta {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.watchlist-stock-item .stock-exchange-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .watchlist-stock-item .stock-exchange-tag { font-size: 0.62rem !important; }
    /* An older rule shrinks the watchlist logo to 36px, which also knocks the
       shared title offset out of alignment. Match the holding rows. */
    .watchlist-stock-item .portfolio-item-icon {
        width: 44px !important;
        height: 44px !important;
    }
    /* Match the holding card's padding so the shared title offset lines up
       with the details column. */
    .portfolio-item-card.watchlist-stock-item {
        padding: 0.5rem 0.5rem 0.5rem 0.3rem !important;
        column-gap: 0 !important;
    }
}

/* Leftovers from when the title and the snapshot were two cards faked into
   one have been removed: they squared the card's bottom corners and stripped
   its shadow, which showed once the snapshot moved inside the card. */

/* The relocated feed badge is a secondary marker, kept small so it costs the
   merged panel as little height as possible. */
.quote-body .quote-badge-wrapper .badge {
    font-size: 0.55rem;
    padding: 1px 5px;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.quote-body .quote-badge-wrapper {
    align-items: center;
}

/* Mobile: the back button takes the logo's old spot inside the header and the
   logo slides right, so the header spans the full column width and lines up
   with the snapshot band beneath it. */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    .right-col-header-row {
        position: relative;
    }
    #right-col-container .selected-stock-header {
        flex: 1 1 auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 58px !important;
    }
    /* Anchored to the title row, not the card. The card is now tall enough to
       hold the price and the Buy/Sell buttons, so centring put the back arrow
       beside the price. */
    .mobile-back-header {
        position: absolute !important;
        left: 12px !important;
        top: 14px !important;
        transform: none !important;
        z-index: 3 !important;
        background: transparent !important;
        border-color: transparent !important;
    }
}

/* ==========================================================================
   Chart toolbar re-arrangement
   Key Levels is now an icon in the bottom toolbar; Refresh moved up beside
   the Now button in the header.
   ========================================================================== */

/* In the bottom toolbar the toggle should read as a sibling of the settings
   and fullscreen icons, not as the standalone pill it used to be. */
.chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon {
    padding: 5px 8px;
    font-size: 0.85rem;
    gap: 0;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: var(--text-secondary);
}

.chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon i {
    font-size: inherit;
    color: inherit;
}

@media (hover: hover) {
    .chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon:hover {
        background: rgba(250, 204, 21, 0.14) !important;
        border-color: rgba(250, 204, 21, 0.35) !important;
        color: #facc15 !important;
    }
}

.chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon.active {
    background: rgba(250, 204, 21, 0.18) !important;
    border-color: rgba(250, 204, 21, 0.6) !important;
    color: #facc15 !important;
    box-shadow: none;
}

.chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon.active i {
    color: #facc15 !important;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.55);
}

/* Swing trendline toggle - indigo rather than support's amber, so the two
   overlays read as distinct at a glance. */
.chart-toolbar-actions .btn-chart-swingtrend-toggle.btn-chart-toolbar-icon {
    padding: 5px 8px;
    font-size: 0.85rem;
    gap: 0;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: var(--text-secondary);
}

.chart-toolbar-actions .btn-chart-swingtrend-toggle.btn-chart-toolbar-icon i {
    font-size: inherit;
    color: inherit;
}

@media (hover: hover) {
    .chart-toolbar-actions .btn-chart-swingtrend-toggle.btn-chart-toolbar-icon:hover {
        background: rgba(99, 102, 241, 0.14) !important;
        border-color: rgba(99, 102, 241, 0.35) !important;
        color: #818cf8 !important;
    }
}

.chart-toolbar-actions .btn-chart-swingtrend-toggle.btn-chart-toolbar-icon.active {
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    color: #818cf8 !important;
    box-shadow: none;
}

.chart-toolbar-actions .btn-chart-swingtrend-toggle.btn-chart-toolbar-icon.active i {
    color: #818cf8 !important;
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.55);
}

/* Refresh in the header. The extra left margin keeps a clear separation from
   the Now button so the two are comfortably distinct tap targets. */
.chart-header-actions .btn-chart-header-icon {
    margin-left: 10px;
    padding: 5px 9px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.chart-header-actions .btn-chart-header-icon:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #818cf8 !important;
}

@media (max-width: 1024px) {
    .chart-header-actions .btn-chart-header-icon {
        margin-left: 8px;
        padding: 5px 8px;
    }
}

/* Light theme: the active yellow washes out against a white toolbar, so the
   lit state uses amber/orange, which reads clearly on both grounds. */
[data-theme="light"] .chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon.active {
    background: rgba(234, 88, 12, 0.14) !important;
    border-color: rgba(234, 88, 12, 0.55) !important;
    color: #ea580c !important;
}

[data-theme="light"] .chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon.active i {
    color: #ea580c !important;
    text-shadow: none;
}

@media (hover: hover) {
    [data-theme="light"] .chart-toolbar-actions .btn-chart-support-toggle.btn-chart-toolbar-icon:hover {
        background: rgba(234, 88, 12, 0.12) !important;
        border-color: rgba(234, 88, 12, 0.4) !important;
        color: #ea580c !important;
    }
}

/* ==========================================================================
   Overlay scrollbars
   --------------------------------------------------------------------------
   Native scrollbars reserve horizontal space even when styled thin. Hosts are
   scrolled with the native bar hidden entirely, and a thumb is drawn over the
   content instead - resting at 25% and lifting to 75% while scrolling, hover
   or drag. The thumb lives on <body> as a fixed element, so no scroll
   container's DOM or layout is touched.
   ========================================================================== */
.ovs-host {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}

.ovs-host::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ovs-thumb {
    position: fixed;
    width: 6px;
    border-radius: 3px;
    background: var(--text-muted, #94a3b8);
    opacity: 0;
    z-index: 2147483000;
    pointer-events: auto;
    cursor: default;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

/* Resting state, shown only while the pointer is over that scroll area. An
   always-on thumb put a permanent line down the middle of the dashboard,
   because an inner column's right edge is mid-layout, not at the page edge. */
.ovs-thumb.ovs-rest {
    opacity: 0.25;
}

.ovs-thumb.ovs-active {
    opacity: 0.75;
}

.ovs-thumb.ovs-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Touch devices already draw their own transient overlay bar. */
@media (hover: none) and (pointer: coarse) {
    .ovs-thumb { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ovs-thumb { transition: none; }
}

/* ==========================================================================
   Previous Investments: badges and collapsed height
   ========================================================================== */
.prev-invest-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.prev-invest-note-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    opacity: 0.7;
    white-space: nowrap;
}

.prev-invest-note-badge.has-note {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    opacity: 1;
}

[data-theme="light"] .prev-invest-note-badge.has-note {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.35);
}

/* Collapsed, the card is just its header - the header's bottom margin and the
   card's bottom padding were still reserving space for a body that is not
   shown, leaving an empty band under the title. */
.prev-invest-card:not(.expanded) {
    padding-bottom: 0.85rem;
}

.prev-invest-card:not(.expanded) .prev-invest-header {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Stock panel: sit as high as possible and pin immediately
   --------------------------------------------------------------------------
   The column reserved 12px of its own padding and the header group another
   12px, then stuck at top:-12px - so the panel started low and slid upward
   before pinning. Zeroing all three pins it from the first pixel of scroll.
   ========================================================================== */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    #right-col-container {
        padding-top: 4px !important;
    }

    #right-col-container .right-col-header-group {
        top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   Snapshot badge row: one line, always
   --------------------------------------------------------------------------
   The market-status badge (OVERNIGHT / AT-CLOSE / POST-MARKET) sat beside the
   change value and wrapped onto its own line once the change grew long, which
   made the pinned panel change height on a price refresh. Both are sized so
   the widest realistic change still fits, and the row cannot wrap: a truly
   extreme value now ellipsises instead of pushing the panel taller.
   ========================================================================== */
.quote-body .change-badge + .quote-badge-wrapper,
.quote-body .quote-badge-wrapper {
    flex-shrink: 0;
}

.quote-body #quote-change-badge {
    font-size: 0.72rem !important;
    padding: 2px 5px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-body .quote-badge-wrapper .badge {
    font-size: 0.5rem;
    padding: 1px 4px;
}

/* ==========================================================================
   Stock header panel (title + price + Buy/Sell in one card)
   --------------------------------------------------------------------------
   The Market Snapshot's contents now sit inside this card rather than in a
   second card pinned beneath it, so the panel is simply taller and there is no
   join to hide.
   ========================================================================== */
.selected-stock-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.quote-body-merged {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin-top: 0.15rem;
}

/* The card header this came from is gone, so the price needs its own breathing
   room rather than the card's. */
.quote-body-merged .quote-price {
    font-size: 1.9rem !important;
    line-height: 1.05 !important;
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    /* Pin the single panel from the first pixel of scroll. */
    #right-col-container {
        padding-top: 0 !important;
    }

    #right-col-container .right-col-header-group {
        top: 0 !important;
        padding-top: 6px !important;
        margin-bottom: 0 !important;
    }

    #right-col-container .selected-stock-header {
        padding: 0.5rem 0.7rem 0.65rem 0.7rem !important;
        /* The mask that hides content scrolling behind the panel belongs on
           the card, not on the header group: the group has no border-radius,
           so a ring drawn there squared off the card's rounded corners. Here
           it follows the card's own radius. */
        box-shadow:
            0 0 0 8px var(--bg-primary),
            0 6px 14px -6px rgba(0, 0, 0, 0.28) !important;
    }

    /* Indent only the title row past the absolutely-positioned back button.
       Padding the whole card would push the price in with it. */
    #right-col-container .selected-stock-header > .stock-logo-container {
        margin-left: 44px !important;
    }

    .quote-body-merged .quote-price {
        font-size: 1.75rem !important;
    }
}

/* ==========================================================================
   Logo containers
   --------------------------------------------------------------------------
   Logos are served as finished tiles (/api/market/logo-tile) with the adaptive
   background and border already composited in. The containers must therefore
   stop drawing their own white backing and border, or every tile sits on a
   second, mismatched one.
   ========================================================================== */
.portfolio-item-icon,
.stock-logo-container,
.browse-logo-wrap-large,
.trade-modal-logo-container,
.trade-cycle-logo-container,
#selected-stock-logo-container,
#modal-stock-logo-container {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

.portfolio-item-icon img,
.stock-logo-container img,
.browse-logo-wrap-large img,
.trade-modal-logo-container img,
.trade-cycle-logo-container img,
img.company-logo {
    background: transparent !important;
    border: none !important;
    /* The tile already carries its own padding and rounding. */
    padding: 0 !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

/* =====================================================================
   NOTIFICATION CENTRE
   Two layers: the alert messages themselves, and the stock one opens.
   The list holds the full width until a stock is selected, then animates
   down to a column beside it. The single-panel pivot uses the app's own
   test, not a bare 1024px, so the centre folds where everything else does.
   ===================================================================== */

.notif-bell-btn { position: relative; }

.notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card, #0f172a);
    pointer-events: none;
}

/* Unread makes the bell more prominent, not a fixed near-white that
   disappears against a light header. */
.notif-bell-btn.has-unread i { color: var(--accent-primary, #6366f1); }

.browse-macro-btn { flex: 0 0 auto; }

.notif-centre-drawer {
    width: min(1180px, 100vw);
    background: var(--bg-primary, #0b1220);
}

/* ---------- header ---------- */

.notif-centre-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color, #1e293b);
    background: var(--bg-card, #0f172a);
}



.notif-centre-heading { flex: 1; min-width: 0; }

.notif-centre-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary, #e2e8f0);
}

.notif-centre-subtitle {
    margin: 1px 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
}

.notif-markall-btn {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
}

/* ---------- body ---------- */

.notif-centre-body {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* The detail pane is positioned over the right-hand side, so the list is the
   only item in the flex row and animating its width is enough. The `flex`
   shorthand cannot be transitioned, which is what made this snap. Same duration
   and curve as the pane so the two move as one gesture. */
.notif-list-pane {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #0b1220);
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-centre-body.detail-open .notif-list-pane {
    width: 400px;
}

.notif-filter-bar {
    display: flex;
    gap: 0.35rem;
    padding: 0.7rem 0.9rem 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 0 0 auto;
}
.notif-filter-bar::-webkit-scrollbar { display: none; }

.notif-filter {
    --nf: var(--text-secondary, #94a3b8);
    flex: 0 0 auto;
    border: 1px solid var(--border-color, #1e293b);
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.notif-filter:hover { border-color: var(--nf); color: var(--nf); }
.notif-filter.active {
    background: color-mix(in srgb, var(--nf) 18%, transparent);
    border-color: var(--nf);
    color: var(--nf);
}

.notif-scope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.9rem 0.6rem;
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
    border-bottom: 1px solid var(--border-color, #1e293b);
    flex: 0 0 auto;
}

.notif-scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}

.notif-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 0.7rem 1.5rem;
}

.notif-day-heading {
    padding: 0.7rem 0.2rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

.notif-row { margin-bottom: 0.5rem; }

/* ---------- the message card ---------- */

.notif-card {
    --ng: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--border-color, #1e293b);
    border-left: 3px solid transparent;
    border-radius: 12px;
    background: var(--bg-card, #0f172a);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.notif-card:hover {
    background: color-mix(in srgb, var(--ng) 8%, var(--bg-card, #0f172a));
    border-color: color-mix(in srgb, var(--ng) 45%, var(--border-color, #1e293b));
}
.notif-card.unread { border-left-color: var(--ng); }
.notif-card.selected {
    border-color: var(--ng);
    background: color-mix(in srgb, var(--ng) 13%, var(--bg-card, #0f172a));
}

.notif-card-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    object-fit: contain;
    background: #fff;
}

.notif-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notif-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.notif-card-ticker {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.notif-card-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: var(--ng);
    background: color-mix(in srgb, var(--ng) 16%, transparent);
}

.notif-card-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.notif-card-body {
    font-size: 0.79rem;
    line-height: 1.4;
    color: var(--text-secondary, #94a3b8);
}

.notif-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.85rem;
    margin-top: 0.15rem;
    font-size: 0.73rem;
    color: var(--text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.notif-card-stats b { color: var(--text-primary, #e2e8f0); font-weight: 700; }
.notif-card-stats .up { color: var(--green, #22c55e); }
.notif-card-stats .down { color: var(--red, #ef4444); }

/* Unread reads as bold throughout and drops back to regular once opened -
   the only status cue that survives being glanced at. */
.notif-card.unread .notif-card-ticker { font-weight: 900; }
.notif-card.unread .notif-card-body { color: var(--text-primary, #e2e8f0); font-weight: 700; }
.notif-card.unread .notif-card-time { color: var(--text-primary, #e2e8f0); font-weight: 700; }

/* ---------- a scan that fired on several stocks ---------- */

.notif-batch {
    --ng: #64748b;
    border: 1px solid var(--border-color, #1e293b);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ng) 6%, transparent);
    padding: 0.55rem;
    margin-bottom: 0.6rem;
}
.notif-batch.unread { border-color: color-mix(in srgb, var(--ng) 50%, var(--border-color, #1e293b)); }

.notif-batch-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.35rem 0.55rem;
}

.notif-batch-dot {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    color: #fff;
    background: var(--ng);
}

.notif-batch-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary, #e2e8f0);
}

.notif-batch-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ng);
}

.notif-batch-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
}

.notif-batch-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notif-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.82rem;
}

/* ---------- the stock pane ---------- */

/* The pane rides above the list and slides in from the right edge, so opening a
   message reads as one movement: the list narrows while the stock arrives, both
   on the same curve, instead of the layout snapping into two columns. */
.notif-detail-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 400px;
    z-index: 3;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #0f172a);
    overflow: hidden;
    border-left: 1px solid var(--border-color, #1e293b);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.22s ease;
}

.notif-centre-body.detail-open .notif-detail-pane {
    transform: translateX(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .notif-list-pane,
    .notif-detail-pane { transition: none; }
}








.notif-stock-slot {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notif-stock-slot > * { flex: 1; min-height: 0; }

/* The portfolio's selected-stock column, borrowed into the centre. It is already
   a scrolling flex column, so it only needs to fill the slot and lose the gutter
   padding it carries for the dashboard split. */
/* On a single-panel phone this column is a fixed-position overlay revealed by a
   `has-selection` class, which is the wrong mechanism inside the centre: it
   positions against the viewport, sits at the wrong z-index, and shows nothing
   at all when that class has not been set yet. Pin it to the slot instead, and
   override with the same force the mobile rules use. */
#right-col-container.notif-embedded-col {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    padding: 0 0.75rem !important;
    margin: 0 !important;
}

/* The panel's own back arrow is the back control here too, at every width. It is
   already a flex sibling of the header card, so it only needs to be shown - the
   row lays it out to the left of the logo on its own. The phone rules pull it
   out of flow and compensate with 58px of padding on the card; borrowed into the
   centre that padding does not apply, so an absolute arrow landed on top of the
   logo instead of beside it. Leave it in normal flow. */
#right-col-container.notif-embedded-col .mobile-back-header {
    display: inline-flex !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* The arrow occupies real width now, so the card must not also reserve space for
   an overlaid one. */
#right-col-container.notif-embedded-col .selected-stock-header {
    padding-left: 0 !important;
}

/* ---------- single vertical panel: the app's own pivot, not a bare 1024 ---------- */

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    .notif-centre-drawer { width: 100vw; }

    /* The list keeps the full width; the stock slides over the top of it. */
    .notif-centre-body.detail-open .notif-list-pane {
        flex: 1 1 auto;
        width: 100%;
        border-right: 0;
    }

    .notif-detail-pane {
        left: 0;
        border-left: 0;
    }

    /* On one panel the phone's own treatment is the right one: the arrow tucked
       inside the card on the title row, with the card padded to make room. Only
       the wider layouts need it back in normal flow. */
    #right-col-container.notif-embedded-col .mobile-back-header {
        position: absolute !important;
        left: 12px !important;
        top: 14px !important;
        z-index: 3 !important;
    }
    #right-col-container.notif-embedded-col .selected-stock-header {
        padding-left: 58px !important;
    }

    .notif-markall-btn span { display: none; }

}

/* The bell has to survive the narrow header, otherwise "available everywhere"
   quietly means "everywhere except a phone". The theme toggle is dropped here
   because the sidebar already carries its own copy. */
@media (max-width: 1024px) {
    .main-header .header-actions { flex: 0 1 auto; min-width: 0; }
    .main-header .header-title { min-width: 0; overflow: hidden; }
    .main-header .header-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .main-header .notif-bell-btn { flex: 0 0 auto; }
    /* The dashboard header is a 1fr/auto/1fr grid, which caps the actions column
       at a third of a phone screen and pushes the bell off the right edge. */
    body.scoreboard-active .main-header { grid-template-columns: auto 1fr auto; }
}

/* Only an actual phone is short of room now that the account selector shows a
   short code. Above this the wordmark and the theme toggle both fit. */
@media (max-width: 600px) {
    .main-header #btn-theme-toggle { display: none !important; }
    .main-header .sb-header-brand > span { display: none; }
}

/* --- header density -------------------------------------------------------
   The header now carries the account selector, the macro globe, the theme
   toggle and the alerts bell. The selector shows only the short account code so
   the rest fit; the full name and description stay in the dropdown. */
.header-account-selector .account-type-label { display: none; }

.header-account-selector .account-dropdown-trigger {
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
}

.header-account-selector .account-name-val {
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Let it be as narrow as its content rather than reserving room for
   "STOCKS ISA" that nothing now prints. */
.main-header #header-account-selector {
    max-width: none;
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    /* The mobile override that capped this at 110px was sized for the long
       label; the short code needs far less and must not be clipped. */
    .main-header #header-account-selector { max-width: none; }
}

/* --- Dashboard: header matches every other view -------------------------- */
/* The dashboard used to centre its title and print the date in the header. The
   view names itself in its own heading panel instead, so the header keeps the
   same shape everywhere. */
body.scoreboard-active .main-header {
    grid-template-columns: auto 1fr auto;
}

/* The dashboard names itself in its own heading panel, so the header does not
   repeat it. The title keeps its grid column so the actions stay to the right. */
body.scoreboard-active .main-header .header-title {
    text-align: left;
    visibility: hidden;
}

body.scoreboard-active .main-header .header-title .sb-header-date {
    display: none;
}

/* The logo doubles as the way out of the dashboard. */
body.scoreboard-active .sb-header-brand {
    cursor: pointer;
}

/* --- Dashboard Header Panel Banner (with left close button & right CKME logo) --- */
.sb-page-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--bg-card, #0f172a);
    border: 1px solid var(--border-color, #1e293b);
    isolation: isolate;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sb-page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/profile/profile_orders_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.25) contrast(1.1);
    z-index: -2;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.sb-page-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.65) 50%, rgba(2, 6, 23, 0.40) 100%);
    z-index: -1;
    transition: background 0.3s ease;
}

.sb-page-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    min-width: 0;
    /* The holdings tape lives in this column, so it has to be allowed to
       stretch across the banner rather than hug the title. */
    flex: 1 1 auto;
}

.sb-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sb-close-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff;
    transform: scale(1.18);
    opacity: 1;
}

.sb-close-btn:active {
    transform: scale(0.92);
}

.sb-page-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Title and date share one line; the line the date used to take now holds the
   holdings tape, so the banner keeps its height. */
.sb-page-head-row {
    display: flex;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
    /* On a phone the date drops under the title whole, as it used to sit,
       rather than breaking mid-way through the month. */
    flex-wrap: wrap;
}
.sb-page-head-row .sb-page-date { white-space: nowrap; }

.sb-page-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    line-height: 1.2;
}

.sb-page-date {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.sb-page-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sb-brand-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
    padding: 3px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-brand-badge:hover {
    transform: scale(1.04);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.sb-head-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Light Mode Enhancement: Make the header photo noticeably whiter, cleaner and brighter */
[data-theme="light"] .sb-page-head,
:root[data-theme="light"] .sb-page-head {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.9);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .sb-page-head::before,
:root[data-theme="light"] .sb-page-head::before {
    opacity: 0.94;
    filter: brightness(1.32) saturate(1.15) contrast(0.92);
}

[data-theme="light"] .sb-page-head::after,
:root[data-theme="light"] .sb-page-head::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.80) 50%, rgba(255, 255, 255, 0.55) 100%);
}

[data-theme="light"] .sb-close-btn,
:root[data-theme="light"] .sb-close-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #475569;
    text-shadow: none;
}

[data-theme="light"] .sb-close-btn:hover,
:root[data-theme="light"] .sb-close-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0f172a;
    transform: scale(1.18);
}

[data-theme="light"] .sb-page-title,
:root[data-theme="light"] .sb-page-title {
    color: #0f172a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .sb-page-date,
:root[data-theme="light"] .sb-page-date {
    color: #475569;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .sb-brand-badge,
:root[data-theme="light"] .sb-brand-badge {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(203, 213, 225, 0.9);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.10);
}

/* --- dashboard header: one control height ---------------------------------
   The logo sat at 26px, the account chip at 36 and the icon buttons at 42, so
   nothing lined up. One height for the lot, including the logo. */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    body.scoreboard-active .main-header .sb-header-logo {
        width: 36px !important;
        height: 36px !important;
    }
    body.scoreboard-active .main-header .sb-header-brand {
        height: 36px !important;
    }
    body.scoreboard-active .main-header .account-dropdown-trigger {
        height: 36px !important;
        box-sizing: border-box;
    }
    body.scoreboard-active .main-header .btn-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* --- one header for every drawer -----------------------------------------
   Notifications, Global Markets and the Radar hub all read the same way now:
   the close control first, then the section's icon, then the title. Previously
   two of them put the close on the right and one had no icon at all. */
.market-hub-header,
.notif-centre-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* Borderless glyph, matching the Buy dialog. */
.hub-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    line-height: 1;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: color 0.15s ease;
}
.hub-close:hover { color: var(--text-primary, #e2e8f0); }

.hub-section-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.market-hub-title-group,
.market-hub-header-left,
.notif-centre-heading {
    flex: 1;
    min-width: 0;
}

/* --- mobile: one bar for every view, dashboard included -------------------
   The dashboard used to swap in .main-header (54px, its own logo and its own
   button set) while every other view used the sidebar's pinned bar (60px). Two
   bars in the same slot could never line up, so on mobile the sidebar bar is
   simply the bar, and the dashboard stops substituting its own. */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 12/20) {
    body.scoreboard-active .main-header { display: none !important; }

    /* The dashboard hides the sidebar because on desktop it is a full-screen
       takeover. On a phone that sidebar IS the top bar, so it has to stay - the
       nav list inside it is hidden here anyway. */
    body.scoreboard-active .sidebar { display: flex !important; }

    /* The overlay sat under a 54px fixed header that no longer renders here. */
    #scoreboard-overlay.sb-visible { top: 60px; }

    /* The logo closes the dashboard on this bar too. */
    body.scoreboard-active .sidebar-brand {
        cursor: pointer;
    }

    /* One control height across the bar, the logo included. */
    .sidebar-header-actions .btn-icon,
    .sidebar-header-actions .account-dropdown-trigger {
        height: 36px !important;
        min-height: 36px !important;
        box-sizing: border-box;
    }
    .sidebar-header-actions .btn-icon {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .sidebar-brand .brand-icon,
    .sidebar-brand .app-brand-logo {
        width: 36px !important;
        height: 36px !important;
    }
}

/* A quiet "updating" marker for the stale-while-revalidate chart path: cached
   data is already drawn and readable, so this must not cover it the way the
   loading spinner does. */
.chart-refreshing-pill {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #94a3b8);
    background: color-mix(in srgb, var(--bg-card, #0f172a) 82%, transparent);
    border: 1px solid var(--border-color, #1e293b);
    pointer-events: none;
}
.chart-refreshing-pill.active { display: inline-flex; }

.chart-refreshing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary, #6366f1);
    animation: chartRefreshPulse 1.1s ease-in-out infinite;
}

@keyframes chartRefreshPulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-refreshing-dot { animation: none; opacity: 0.8; }
}

/* ==========================================================================
   Trade modal — pinned chart, scrolling middle, pinned footer
   Every mode used to compete for one fixed budget, so Smart (which adds 208px
   of its own sliders) squeezed the chart and left 40px of slack, and the
   Limit/Stop rows rendered greyed-out even in Market mode. Now only the things
   that must always be visible are fixed; anything that grows scrolls.
   ========================================================================== */

.trade-modal-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The chart is pinned deliberately: it is live feedback while you drag a price
   slider in the scrolling region below it. */
/* The chart takes up the slack. Market mode has no price rows, so the dialog
   used to end in a large empty band; letting the chart grow into it keeps the
   dialog a constant height - so the mode tabs, footer and action button never
   move when you switch modes - and gives the chart the extra height it wanted
   anyway. Capped so a market order's single dashed line isn't 400px tall. */
.trade-modal-container > .trade-modal-visual-card {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Height is set by fitTradeChartToSlack(), not by flex: flex would let the
   chart grow at the scrolling region's expense, and in Smart mode that squeezed
   500px of controls into 163px. min-height repeats the old fixed height so it
   acts as a floor - the chart can gain space, never lose any. */
.trade-modal-container > .trade-modal-visual-card > .trade-modal-visual-placeholder {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.trade-modal-container > .trade-modal-visual-card .trade-modal-svg-container {
    flex: 1 1 auto;
    min-height: clamp(85px, 16vh, 150px);
}

.tm-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.1rem 0.15rem 0.2rem;
    /* Fade both edges so a half-visible control reads as "scrolled" rather than
       as a broken layout, and so it is obvious there is more below - the exact
       thing that hid T212's own 24/5 and Expiration settings for weeks. */
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 10px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0, #000 10px, #000 calc(100% - 12px), transparent 100%);
}

.tm-scroll::-webkit-scrollbar { width: 4px; }
.tm-scroll::-webkit-scrollbar-thumb {
    background: var(--slider-track, rgba(255,255,255,0.14));
    border-radius: 2px;
}

/* Everything outside the scroll region holds its place. */
.trade-modal-container > .trade-modal-header,
.trade-modal-container > .trade-modal-price-section,
.trade-modal-container > .trade-modal-toggles,
.trade-modal-container > .trade-modal-mode-section,
.trade-modal-container > .trade-modal-footer {
    flex: 0 0 auto;
}

/* --- the mode description: one line, tap to expand ---------------------- */
/* Descriptions run 70 to 220 characters, i.e. 1 to 4 lines, so this block
   varied between 18px and 72px and sometimes overflowed. Fixed height now. */
/* The base rule sets display:flex and a fixed 38px, so the clamp needs to win
   on both. One line, tap to expand. */
/* Item 11: clamping meant opening the description to read it, then watching it
   collapse the moment you moved a slider - with the control jumping under your
   finger. The description now always shows in full; the chart shifts a little
   when the mode changes, which is the lesser evil. */
#trade-modal .trade-modal-mode-desc {
    display: block !important;
    height: auto !important;
    overflow: visible;
    cursor: default;
}

/* The expand/collapse caret went with the clamp - there is nothing to expand. */
.trade-modal-mode-desc::after,
.trade-modal-mode-section.desc-expanded .trade-modal-mode-desc::after { content: none; }

/* --- touch targets ------------------------------------------------------
   Every interactive control in this dialog measured under the 44px minimum:
   the sliders were a 4px track, the Shares/Value pills 15px, the price inputs
   26px, the mode tabs 28px. The room for this comes from the compaction above.
   -------------------------------------------------------------------------- */

/* All three tabs lay out identically. Smart alone computed display:block vs
   flex from an older rule, which only became visible once they were tall enough
   to show it - its label sat off the shared baseline. 38px rather than 44: the
   owner found 44 too tall, and at zoom 1 this is still larger than the ~24px
   these were effectively rendering at before the scaling was removed. */
#trade-modal .btn-toggle-option {
    min-height: 27px;
    height: 27px;
    font-size: 0.85rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 6px !important;
    line-height: 1;
    white-space: nowrap;
}

#trade-modal .btn-toggle-option i {
    margin-right: 0 !important;
    font-size: 0.9em;
}

#trade-modal .btn-input-mode {
    min-height: 34px;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
}

/* Price fields: big enough to read at a glance and to tap for the keyboard. */
#trade-modal .trigger-price-input,
#trade-modal #trade-modal-limit-price,
#trade-modal #trade-modal-stop-price {
    min-height: 44px;
    font-size: 2.4rem !important;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.01em;
}

/* The full-width price sliders. A wider track plus the curve is what makes a
   small move above market reachable; the thumb is sized to be grabbed. */
#trade-modal .trade-modal-slider,
#trade-modal input[type="range"] {
    height: 8px;
    border-radius: 4px;
}

#trade-modal input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-primary, #6366f1);
    border: 3px solid var(--bg-card, #0f172a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

#trade-modal input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border: 3px solid var(--bg-card, #0f172a);
    border-radius: 50%;
    background: var(--accent-primary, #6366f1);
}

/* A price row becomes: label + big value + step buttons on one line, then the
   slider full width beneath it. The slider was sharing a row and got 145px;
   on its own line it gets the full width, doubling the precision. */
.tm-price-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-color, #1e293b);
    border-radius: 12px;
    background: var(--bg-card, rgba(255,255,255,0.02));
}

/* Superseded by .tm-price-body, which mirrors the shares panel. */
.tm-price-row-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

/* Label keeps its natural width, the value takes the slack, the steppers are
   fixed. Giving the label flex:1 let the value squeeze it to "L... P... (...". */
.tm-price-row-head label {
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* flex-basis 0 rather than auto: with auto the field's intrinsic width won and
   the row overflowed to 478px inside a 345px dialog, shoving the label off the
   left edge. */
#trade-modal .tm-price-row-head .trigger-price-input {
    flex: 1 1 0%;
    min-width: 0;
    width: auto !important;
}

/* Hold-to-accelerate steppers. T212's tickers are disliked for being slow;
   these ramp, so the last penny is two taps and a long-press crosses a range. */
/* Unfilled with a faint round outline, so the value stays the loudest thing in
   the row. The 44px target is kept - only the fill is gone. */
.tm-step {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-secondary, #94a3b8) 28%, transparent);
    background: transparent;
    color: var(--text-primary, #e2e8f0);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.tm-step:active {
    background: color-mix(in srgb, var(--tm-accent, var(--accent-primary)) 14%, transparent);
    border-color: var(--tm-accent, var(--accent-primary));
}

/* Quick offsets from market - the values people actually pick. */


/* --- compacted header + price row --------------------------------------- */
.trade-modal-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.15rem;
}

/* Centred between the close control and the logo. Those are 44px and 42px, so
   centring the middle column lands the title visually centred in the header. */
.tm-head-text {
    flex: 1;
    min-width: 0;
    text-align: center;
}

#trade-modal .trade-modal-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: center;
}

#trade-modal-company-subtitle {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#trade-modal .trade-modal-logo-container {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
#trade-modal .trade-modal-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 3px;
}

/* The container puts a 10.4px gap between every child, which around a 30px-tall
   price line reads as a lot of air. Negative margins claw part of it back on
   both sides without disturbing the spacing of anything else. */
.trade-modal-price-section {
    display: flex;
    /* baseline put the small change text's baseline on the big price's, which
       reads as sitting low against a 1.7rem number. Centre them instead. */
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: -4px;
    margin-bottom: -5px;
}

/* The rule under the price line does not need its own breathing room too. */
#trade-modal .trade-modal-price-section + hr {
    display: none !important;
}

#trade-modal .trade-modal-price {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
}

#trade-modal .trade-modal-trend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* The order amount is the number you check before committing - it was the same
   size as the labels around it. */
#trade-modal #shares-count-val,
#trade-modal #shares-count-input {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    line-height: 1.05;
}

/* --- progressive disclosure ---------------------------------------------
   The Limit and Stop rows were always mounted and merely dimmed, so Market
   mode paid ~60px for two controls it cannot use. */
#trade-modal .form-group.tm-hidden-row { display: none !important; }

/* --- real touch targets, take two ---------------------------------------
   A range input whose background IS the rail is only as tall as the rail, so
   the finger target was 7px however big the thumb looked. The rail moves to
   ::-webkit-slider-runnable-track and the input becomes a 44px transparent
   strip around it - same appearance, a target you can actually hit. The
   remaining !importants are there because the modal's older rules use them.
   ------------------------------------------------------------------------ */
#trade-modal input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 44px !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
}

#trade-modal input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: var(--slider-track, rgba(255, 255, 255, 0.14));
}

#trade-modal input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: var(--slider-track, rgba(255, 255, 255, 0.14));
}

/* Centre the thumb on the now-taller input. */
#trade-modal input[type="range"]::-webkit-slider-thumb {
    margin-top: -11px;
}

#trade-modal .btn-close-trade-modal {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto;
}

#trade-modal #btn-keyboard-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
}

#trade-modal .btn-input-mode {
    min-height: 40px !important;
    padding: 8px 16px !important;
}


/* The Shares/Value pill pair needs to grow with its buttons. */
#trade-modal #trade-modal-value-toggle-container {
    padding: 3px !important;
}


/* --- price rows built on the shares-panel pattern ------------------------
   The shares panel already solved this: a title, a big centred number with a
   smaller value beneath, and a control either side. The price rows now use the
   same shape - minus where the dial sits, plus where the keyboard icon sits -
   so there is one way to enter a number in this dialog rather than two.
   ------------------------------------------------------------------------ */
.tm-price-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
    padding-left: 0.15rem;
}

.tm-price-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.tm-price-middle {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.tm-price-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
}

.tm-price-currency-prefix {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

#trade-modal .tm-price-middle .trigger-price-input {
    width: 100% !important;
    max-width: 190px;
    background: transparent !important;
    border: none !important;
    text-align: center;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1.05;
    padding: 0 !important;
    min-height: 0;
    -moz-appearance: textfield;
}
#trade-modal .tm-price-middle .trigger-price-input::-webkit-outer-spin-button,
#trade-modal .tm-price-middle .trigger-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* The move from market, in the slot the shares panel uses for the cash value. */
.tm-price-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}
.tm-price-pct.up { color: var(--success, #10b981); }
.tm-price-pct.down { color: var(--danger, #ef4444); }

/* --- stop / limit colour coding -----------------------------------------
   The same two colours the chart already draws its trigger lines in, so the
   row, its value, its thumb and its line on the chart all read as one thing.
   ------------------------------------------------------------------------ */
#group-limit-price { --tm-accent: var(--tm-limit, #38bdf8); }
#group-stop-price  { --tm-accent: var(--tm-stop, #f87171); }

#trade-modal .tm-price-row .tm-price-title,
#trade-modal .tm-price-row .trigger-price-input {
    color: var(--tm-accent, var(--text-primary)) !important;
}

#trade-modal .tm-price-row {
    border-color: color-mix(in srgb, var(--tm-accent, var(--border-color)) 38%, transparent);
}

#trade-modal .tm-price-row input[type="range"]::-webkit-slider-thumb {
    background: var(--tm-accent, var(--accent-primary));
}
#trade-modal .tm-price-row input[type="range"]::-moz-range-thumb {
    background: var(--tm-accent, var(--accent-primary));
}

#trade-modal .tm-price-row .tm-step {
    color: var(--tm-accent, var(--text-primary));
    border-color: color-mix(in srgb, var(--tm-accent, var(--border-color)) 30%, transparent);
    background: transparent;
}



/* The header line is "Buy Nvidia"; the separate company row is retired. The
   base rule uppercases it, which suited "BUY ORDER" but shouts a company name. */
#trade-modal .trade-modal-title {
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Stop-Limit is named for its sequence: the stop triggers, then the limit
   executes. Ordering the controls that way keeps them stable when the direction
   changes - by price the two swap over (a sell stop sits above its limit, a buy
   stop below), so ordering by price would move the controls under the user. */
.trade-modal-trigger-inputs #group-stop-price { order: 1; }
.trade-modal-trigger-inputs #group-limit-price { order: 2; }
.trade-modal-trigger-inputs #group-smartsell { order: 3; }

/* Smart Sell uses the same row as Stop and Limit, in its own colour, so all
   four sell modes read identically. Values are percentages, not prices. */
#ss-row-peak  { --tm-accent: var(--tm-peak, #a855f7); }
#ss-row-trail { --tm-accent: var(--tm-sell-line, #22c55e); }

#trade-modal .ss-panel .tm-price-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#trade-modal .ss-panel .ss-i {
    width: 18px;
    height: 18px;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 45%, transparent);
    background: transparent;
    color: var(--tm-accent);
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    flex: 0 0 auto;
}

/* group-smartsell is a plain column; its children are the panels above. */
#trade-modal #group-smartsell {
    display: flex;
    flex-direction: column;
    gap: 0.6rem !important;
}

/* Match the Stop/Limit rows exactly - an ID rule pins those inputs to 1.25rem,
   so the Smart Sell numbers are pinned to the same rather than the 2rem
   the shared .tm-price-middle rule would otherwise give them. */
#trade-modal .ss-panel .trigger-price-input {
    font-size: 2.4rem !important;
}


/* ---------------------------------------------------------------------------
   Trade modal on a real screen. The dialog was capped at 480px, which on a
   1440px desktop with the sidebar open looked like a phone bolted to the
   middle of the page. Above 1025px it gets room, and everything inside scales
   with it rather than staying at thumb-sized mobile metrics.
   ------------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 1024px) {
    dialog.trade-dialog {
        max-width: 620px;
        width: 92vw;
        padding: 1.3rem 1.4rem;
    }
    #trade-modal .trade-modal-price { font-size: 2.1rem !important; }
    #trade-modal .trade-modal-title { font-size: 1.3rem; }
    #trade-modal .tm-price-middle .trigger-price-input,
    #trade-modal .ss-panel .trigger-price-input { font-size: 1.8rem !important; }
    #trade-modal .shares-count-val,
    #trade-modal #shares-count-input { font-size: 2.6rem !important; }
}

@media (min-width: 1025px) {
    dialog.trade-dialog {
        max-width: 660px;
        width: 660px;
        padding: 1.5rem 1.6rem;
    }
    #trade-modal .trade-modal-title { font-size: 1.5rem; }
    #trade-modal .trade-modal-price { font-size: 2.4rem !important; }
    #trade-modal .trade-modal-trend { font-size: 1.05rem; }
    #trade-modal .trade-modal-logo-container { width: 62px; height: 62px; }
    #trade-modal .btn-toggle-option { height: 34px; font-size: 0.92rem; }
    #trade-modal .trade-modal-mode-title { font-size: 1.25rem; }
    #trade-modal .trade-modal-mode-desc { font-size: 0.88rem; }
    #trade-modal .trade-modal-svg-container { height: clamp(150px, 20vh, 210px) !important; }
    #trade-modal .tm-price-title { font-size: 0.86rem; }
    #trade-modal .tm-price-middle .trigger-price-input,
    #trade-modal .ss-panel .trigger-price-input { font-size: 2rem !important; }
    #trade-modal .tm-price-pct { font-size: 0.95rem; }
    #trade-modal .shares-count-val,
    #trade-modal #shares-count-input { font-size: 2.9rem !important; }
    #trade-modal .trade-modal-cost-val { font-size: 1.1rem; }
    #trade-modal .tm-step { width: 52px; height: 52px; font-size: 1.5rem; }
    #trade-modal .tm-price-icon { font-size: 2.3rem; width: 52px; height: 52px; }
    #trade-modal input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; }
    #trade-modal input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; }
    #trade-modal .btn-review-order,
    #trade-modal .btn-send-order { font-size: 1.1rem; padding: 1rem; }
}


/* ---------------------------------------------------------------------------
   Item 6: one shape for every number in this dialog.
   Left: an identifying icon (the cash dial on the shares panel, a mode glyph
   on the price rows) - they line up in a column down the left edge.
   Middle: the value, tap to edit, nudged left of centre.
   Right: the minus/plus pair, together, where a thumb can reach both.
   ------------------------------------------------------------------------ */
.tm-step-pair {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.tm-price-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.85rem;
    color: var(--tm-accent, var(--text-secondary));
    opacity: 0.9;
}

/* The value block sits between a 44px icon and a ~94px stepper pair, so
   centring it in that space reads as right-of-centre. Pull it back left. */
#trade-modal .tm-price-middle,
#trade-modal .trade-modal-shares-middle {
    transform: translateX(-5%);
}

/* Tap the figure to type it - the keyboard button is gone. */
#trade-modal .shares-count-val {
    cursor: text;
    border-bottom: 1px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent);
    padding-bottom: 1px;
}
#trade-modal .shares-count-val:hover {
    border-bottom-color: var(--accent-primary, #6366f1);
}

/* Item 4: the row titles match the shares panel's title exactly - top left,
   same size and weight. Only the colour differs, to carry the mode accent. */
#trade-modal .tm-price-row .tm-price-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    align-self: flex-start;
    padding-left: 0.2rem;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Upcoming corporate event (currently: the next dividend). Announced but not
   yet paid, so it does not belong in the payment history - and an ex-date a
   few days out is what makes a broker pull overnight trading on the stock.
   ------------------------------------------------------------------------ */
.upcoming-event-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--bg-tertiary);
}

.upcoming-event-card .uec-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-color);
}

.upcoming-event-card .uec-date {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.upcoming-event-card .uec-kind {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.upcoming-event-card .uec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.upcoming-event-card .uec-grid > div:nth-child(2) { text-align: center; }
.upcoming-event-card .uec-grid > div:nth-child(3) { text-align: right; }

.upcoming-event-card .uec-lbl {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.upcoming-event-card .uec-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Inferred, not reported by the broker - worded so it never reads as fact. */
.upcoming-event-card .uec-warn {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 34%, transparent);
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
.upcoming-event-card .uec-warn i { color: #f59e0b; margin-right: 5px; }

/* The Max/Limit choice used to live only on the header Limit button, which is
   undiscoverable (and means something different in Sell mode). It now sits in
   the panel it governs, shaped like the Shares/Value pair above it. */
.tm-price-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

#trade-modal .tm-mode-toggle {
    display: flex;
    background: color-mix(in srgb, var(--tm-accent, #64748b) 12%, transparent);
    border-radius: 20px;
    padding: 3px;
    flex: 0 0 auto;
}

#trade-modal .tm-mode-opt {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    min-height: 28px;
}

#trade-modal .tm-mode-opt.active {
    background: var(--tm-accent, var(--accent-primary));
    color: #ffffff;
}

/* Inert, not hidden: with Execute Mode on Notify Only there is no quantity and
   no venue to choose, but the controls stay in place so the layout does not
   jump when execution is switched on. */
/* !important because applyExtendedHoursStatus writes an inline opacity for
   per-instrument eligibility. That logic stays intact - it simply resumes when
   .tm-inert is removed. */
#trade-modal .tm-inert {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(0.6);
    transition: opacity 0.2s ease, filter 0.2s ease;
}


/* The manual bounce row now wears the shared price-row shape, in the Smart Buy
   orange. Its readout is a descriptor ("2.0% - Balanced"), not a % vs market,
   so it keeps the accent colour rather than the up/down green/red. */
/* Matches the bounce arrow on the chart - the panel and the annotation are
   the same control, so they must not be two different colours. */
#group-dip-sniper { --tm-accent: var(--tm-bounce, #7c3aed); }
#trade-modal #group-dip-sniper .tm-price-pct {
    color: var(--tm-accent) !important;
    font-weight: 700;
}

/* The % lives beside the figure, so the line beneath carries only the
   descriptor instead of repeating the number. The input is sized and
   right-aligned so the number and its unit read as one centred pair. */
#trade-modal .tm-num-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

#trade-modal .tm-num-row .trigger-price-input {
    width: 66px !important;
    max-width: 66px;
    text-align: right;
}

#trade-modal .tm-unit {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--tm-accent, var(--text-primary));
}


/* The shares card is 205px against a scroll region that cannot exceed ~195 on a
   900px-tall phone once the chart is at its floor. Tightening its own padding
   and gaps buys the ~12px needed so the card - and crucially its slider - fits
   whole instead of being cut off. */
#trade-modal .shares-panel-card {
    padding: 0.6rem 0.8rem !important;
    gap: 0.5rem !important;
}


/* The mode name, moved out of its own row and onto the chart panel. It sits
   ABOVE the svg rather than inside it, so it cannot collide with the
   CURRENT PRICE caption top-left or the LIMIT/MAX label top-right. */
#trade-modal .tm-chart-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.1;
    padding: 0 0 0.35rem 0.15rem;
    flex: 0 0 auto;
}

/* The old standalone mode title is now redundant - the chart carries it. */
#trade-modal .trade-modal-mode-title { display: none !important; }


/* Prices first, quantity last. Setting the boundaries and then deciding how
   much reads as the natural order, and it puts the mode's own control at the
   top of the scroll region where a mode change should land. */
#trade-modal .tm-scroll > .trade-modal-trigger-inputs { order: 1; }
#trade-modal .tm-scroll > .shares-panel-card { order: 2; }

/* ─── Chart header scrub readout ─────────────────────────────────────────────
   While the crosshair is on the chart, the card header becomes the readout for
   the hovered sample. The title carries inline font styles from the markup, so
   the scrubbing state has to out-specify them with !important rather than
   simply overriding the class.

   Tabular figures on both lines: without them every digit change while
   dragging re-measures the text and the readout twitches sideways, which is
   very visible when the value is updating at pointer-move rate. */
#chart-stock-title.is-scrubbing {
    font-size: 1.3rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.15;
}

.chart-scrub-price {
    font-variant-numeric: tabular-nums;
}

#chart-stock-subtitle {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The header is a space-between row. Letting the readout grow past the title's
   natural width shoved the Now / refresh / close buttons off the right edge on
   a phone, so the text block is allowed to shrink and the actions are not. */
.chart-card .card-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.chart-card .chart-header-actions {
    flex: 0 0 auto;
}

/* The two lines swap between a 1rem title and a 1.3rem price, which moved the
   header's height and nudged the whole chart down on every scrub. Pin it. */
.chart-card .card-header > div:first-child > div {
    min-height: 2.35rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ─── Chart key: US trading session tabs ─────────────────────────────────────
   Four equal columns rather than a scroller: there are exactly four sessions
   and there will not be a fifth, so they all stay on screen at 408px and none
   of them hides behind a swipe. */
.chart-key-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.chart-key-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-width: 0;
}

.chart-key-tab:hover {
    background: rgba(148, 163, 184, 0.08);
}

.chart-key-tab-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chart-key-tab-label {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* The panel is the only part that changes height as you tap between sessions.
   A min-height sized to the longest description stops the settings sheet
   jumping under the thumb each time - the four descriptions differ by about
   one line at this width. */
.chart-key-detail {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    min-height: 92px;
}

.chart-key-detail-name {
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.chart-key-detail-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.chart-key-detail-times {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
}

.chart-key-detail-times > span:first-child {
    font-size: 0.8rem;
}

.chart-key-detail-et {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ─── Notification dismiss controls ──────────────────────────────────────────
   The dismiss button is a sibling of the card, positioned over it, because the
   card is itself a <button> and cannot legally contain one. */
.notif-card-wrap {
    display: block;
    position: relative;
}

.notif-card-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 0.8rem;
    /* Hidden until the row is hovered on a mouse, so a wall of × does not
       compete with the alerts themselves. Touch has no hover, so it stays
       visible there - see the coarse-pointer rule below. */
    opacity: 0;
    transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.notif-card-wrap:hover .notif-card-del,
.notif-card-del:focus-visible {
    opacity: 1;
}

.notif-card-del:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.notif-card-del:disabled {
    opacity: 0.4;
    cursor: default;
}

/* No hover on touch, so the control has to be permanently visible - and a
   little larger, since a 26px target under a thumb is a miss waiting to
   happen. The card's own padding-right keeps body text clear of it. */
@media (hover: none), (pointer: coarse) {
    .notif-card-del {
        opacity: 1;
        width: 32px;
        height: 32px;
    }
    .notif-card-wrap .notif-card {
        padding-right: 2.6rem;
    }
}

.notif-clear-btn {
    white-space: nowrap;
}

.notif-clear-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Three action buttons no longer fit beside the title on a phone. They wrap to
   their own full-width row as a group; leaving them loose let them interleave
   with the heading and squeeze the subtitle into a narrow column. */
@media (max-width: 1024px) {
    .notif-centre-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .notif-centre-heading {
        min-width: 0;
        flex: 1 1 auto;
    }
    .notif-header-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .notif-markall-btn,
    .notif-clear-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Undoes an earlier rule that hid the mark-all label on narrow screens -
       that was needed while these buttons shared a line with the heading. Now
       they have a row of their own, and one icon-only button beside two
       labelled ones just looks broken. */
    .notif-markall-btn span,
    .notif-clear-btn span {
        display: inline;
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ─── AI opportunity rating legend ───────────────────────────────────────────
   The per-row rating is a signed number with no units. A tooltip explaining
   the scale is no help to someone scanning the list, so the scale is stated
   once, above it. */
.watchlist-ai-rating-legend {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 1rem 0.5rem 1rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.watchlist-ai-rating-legend .wrl-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    min-width: 18px;
    /* Same red -> amber -> green ramp the rows are filled with, so the legend
       is a key to the colour and not merely a caption. */
    background: linear-gradient(90deg, hsl(0, 72%, 52%), hsl(45, 72%, 52%));
}

.watchlist-ai-rating-legend .wrl-bar-pos {
    background: linear-gradient(90deg, hsl(45, 72%, 52%), hsl(142, 72%, 52%));
}

[data-theme="light"] .watchlist-ai-rating-legend .wrl-bar {
    background: linear-gradient(90deg, hsl(0, 72%, 38%), hsl(45, 72%, 38%));
}

[data-theme="light"] .watchlist-ai-rating-legend .wrl-bar-pos {
    background: linear-gradient(90deg, hsl(45, 72%, 38%), hsl(142, 72%, 38%));
}

.watchlist-ai-rating-legend .wrl-neg { color: hsl(0, 60%, 50%); }
.watchlist-ai-rating-legend .wrl-pos { color: hsl(142, 55%, 38%); }
.watchlist-ai-rating-legend .wrl-mid { color: var(--text-muted); }

/* ─── Opportunity Scanner sector filter ──────────────────────────────────────
   One scrolling line, same behaviour as the watchlist group tabs.

   The shared .opt-tab-btn is "flex: 1 1 0", which suits a row of three but
   divided the width between ten sector buttons and squeezed every label down
   to three pixels - the row rendered as unlabelled icons. Wrapping fixed that
   but cost three lines of vertical space above the results, so the buttons
   now size to their content on a single scrolling row. Scrollbar hidden to
   match the watchlist, which is the pattern this mirrors. */
#opt-sector-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    min-width: 0;
}

#opt-sector-container::-webkit-scrollbar {
    display: none;
}

#opt-sector-container .opt-sector-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.76rem;
}

@media (max-width: 1024px) {
    #opt-sector-container .opt-sector-btn {
        font-size: 0.72rem;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ─── Opportunity Scanner tab rows: scroll, don't squash ─────────────────────
   .opt-tab-btn is "flex: 1 1 0", so every row divided its width between its
   buttons and truncated the labels - at 429px the strategy row read "Fallen
   A..." and "Oversol...". Buttons now size to their content and the row
   scrolls sideways, the same behaviour the sector row and the watchlist
   groups already use. */
.opt-tabs-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
}

.opt-tabs-container::-webkit-scrollbar {
    display: none;
}

.opt-tabs-container .opt-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The mode pair is only two buttons and reads better sharing the full width,
   so it keeps the old behaviour rather than hugging the left edge. */
.opt-mode-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* ── CT-59: Smart Sell Lab per-trade replay controls ──────────────────────
   Lives under the trade chart in the replay pop-out. The batch Lab tunes one
   setting across every completed cycle; this panel re-runs the ONE trade on
   screen, so the effect of a lever can be read off a chart you're looking at
   rather than inferred from a median. */
#trade-chart-controls {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    flex: 0 0 auto;
}
.tc-controls-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tc-controls-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.tc-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-presets button {
    padding: 4px 11px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tc-presets button:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tc-presets button.active {
    background: var(--accent-primary, #6366f1);
    border-color: var(--accent-primary, #6366f1);
    color: #fff;
}
.tc-btn-ghost, .tc-btn-primary {
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid var(--border-color);
}
.tc-btn-ghost { background: transparent; color: var(--text-secondary); }
.tc-btn-ghost:hover { color: var(--text-primary); }
.tc-btn-primary {
    background: var(--accent-primary, #6366f1);
    border-color: var(--accent-primary, #6366f1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tc-btn-primary:disabled { opacity: 0.6; cursor: default; }

.tc-lever-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
}
.tc-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-field > span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-field input, .tc-field select {
    width: 100%;
    padding: 5px 7px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg, #161626);
    color: var(--text-primary);
}
.tc-field input:focus, .tc-field select:focus {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
}
/* A lever that does nothing at its current value shouldn't read as loudly as
   one that's actually shaping the result. */
.tc-field input.tc-off { color: var(--text-muted); font-weight: 600; }
.tc-field.tc-hidden { display: none; }

.tc-outcome {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    font-size: 0.74rem;
    color: var(--text-secondary);
    min-height: 1.2em;
}
.tc-outcome .tc-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.tc-outcome .tc-stat b { font-size: 0.84rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tc-outcome .tc-pos { color: #10b981; }
.tc-outcome .tc-neg { color: #f43f5e; }
.tc-outcome .tc-pill {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(129, 140, 248, 0.16);
    color: #818cf8;
}
.tc-outcome .tc-warn { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }

@media (max-width: 1024px) {
    .tc-lever-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
    .tc-controls-head { gap: 8px; }
}

/* ── CT-65: Open Position Lab ─────────────────────────────────────────────
   The open book, which every other lab is blind to. Visual weight goes to the
   two things a completed-cycle view can't show: how much of a position was
   given back from its own peak, and which stocks were bought into repeatedly
   on the way down. */
.op-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 0.9rem; }
.op-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.op-sub { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-secondary); max-width: 60ch; }
.op-loading { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; }

.op-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 1.1rem; }
.op-card { padding: 0.6rem 0.8rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }
.op-card-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.op-card-value { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 3px 0; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.op-card-note { font-size: 0.66rem; color: var(--text-secondary); line-height: 1.35; }

.op-pos { color: #10b981; }
.op-neg { color: #f43f5e; }
.op-warn { color: #f59e0b; }
.op-muted { color: var(--text-muted); }

.op-section-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin: 1.2rem 0 0.55rem; }
.op-section-title span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 8px; }

.op-cluster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
.op-cluster { padding: 0.55rem 0.7rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 9px; }
/* Averaging down is the one behaviour the base-rate study says is actively
   costly, so it gets the only coloured border on the page. */
.op-cluster-warn { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.06); }
.op-cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.op-cluster-head b { color: var(--text-primary); }
.op-cluster-head span { font-weight: 700; font-variant-numeric: tabular-nums; }
.op-cluster-meta { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; }
.op-cluster-flag { margin-top: 6px; font-size: 0.66rem; font-weight: 700; color: #f59e0b; display: flex; align-items: center; gap: 5px; }

.op-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.op-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.op-table th, .op-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.op-table th { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); background: var(--bg-secondary); position: sticky; top: 0; }
.op-table td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.op-table tbody tr:last-child td { border-bottom: none; }
.op-table tbody tr:hover td { background: rgba(148, 163, 184, 0.07); }
.op-table .r { text-align: right; }
.op-name { font-size: 0.64rem; color: var(--text-muted); font-weight: 500; }
.op-nodata { margin-top: 8px; font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 1024px) {
    .op-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .op-table th, .op-table td { padding: 6px 8px; }
}

/* CT-66 — playbook badge on an armed stop. The intent matters more than the
   trail number beside it: the trail fires on 2 trades in 112, the roll-over
   does everything else, so the row has to say which playbook is running. */
.sb-tstop-pb {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 6px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.sb-tstop-pb-rescue { background: rgba(245, 158, 11, 0.18); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); }
.sb-tstop-pb-bank   { background: rgba(99, 102, 241, 0.18); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.4); }
.sb-tstop-pb-run    { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

/* CT-67 — dashboard keeps a status line; the stop detail lives in Market Radar. */
.sb-tstop-summary { font-size: 0.82rem; }
.sb-tstop-sumline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text-secondary); }
.sb-tstop-sumline b { color: var(--text-primary); font-size: 0.95rem; }
.sb-tstop-sum-muted { color: var(--text-muted); font-size: 0.76rem; }
.sb-tstop-sum-near { color: #f59e0b; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.sb-tstop-sum-ok { color: #10b981; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.sb-tstop-goto { font-size: 0.74rem; font-weight: 600; color: var(--accent-primary, #6366f1); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.sb-tstop-goto:hover { text-decoration: underline; }
/* The moved panel sits inside a radar tab that already has its own chrome. */
.sb-panel-flush { border: none; background: transparent; padding: 0; margin: 0; }

/* CT-67 — the radar tab bar was a 3-column grid; a fourth tab wrapped onto its
   own row. Scroll it instead, so tabs five and six don't reopen the problem. */
.radar-tab-scroll {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.radar-tab-scroll .settings-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.82rem;
}
/* A visible track on a tab bar is noise; the overflow still scrolls by wheel,
   trackpad and touch. */
.radar-tab-scroll::-webkit-scrollbar { height: 4px; }
.radar-tab-scroll::-webkit-scrollbar-track { background: transparent; }
.radar-tab-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 999px; }

/* This element IS the palette - it carries the background, border and radius -
   so overflowing content clips at the PADDING box, a square edge sitting inside
   the rounded border. A tab cut there shows a hard vertical edge that ignores the
   curve, which is what made the bar look broken at the right-hand end.
   Fading the overflowing edge fixes the clip and does the other job a scroller
   needs anyway: saying there is more to see. The class is only applied on the
   side that actually overflows, so an unscrolled bar fades nothing. */
.radar-tab-scroll.has-overflow-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.radar-tab-scroll.has-overflow-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
}
.radar-tab-scroll.has-overflow-left.has-overflow-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* CT-68 — stop rows are for SCANNING ("is anything close to firing?"). Everything
   that doesn't serve that question moved to the tooltip and the Mega View drawer,
   which freed the horizontal room for a logo. */
.sb-tstop-row-click { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.sb-tstop-row-click:hover { background: rgba(148, 163, 184, 0.08); }
.sb-tstop-row-click:focus-visible { outline: 2px solid var(--accent-primary, #6366f1); outline-offset: 2px; }

.sb-tstop-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-tstop-spacer { flex: 1 1 auto; }

.sb-tstop-logo {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-secondary);
}
.sb-tstop-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.sb-tstop-logo-fallback {
    display: none; width: 100%; height: 100%;
    align-items: center; justify-content: center;
    font-size: 0.5rem; font-weight: 800; color: var(--text-muted);
}

.sb-tstop-name { font-weight: 700; color: var(--text-primary); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-tstop-name .sb-tstop-co { margin-left: 6px; font-weight: 600; font-size: 0.7rem; color: var(--text-muted); }
.sb-tstop-now { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; }
.sb-tstop-dist { font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; }
/* Only colour the distance when it is actually worth looking at - a permanently
   amber column trains you to ignore it. */
.sb-tstop-dist.near { color: #f59e0b; font-weight: 700; }

.sb-tstop-guard {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    white-space: nowrap;
}
.sb-tstop-row .sb-tstop-disarm { position: static; flex: 0 0 auto; margin-left: 2px; }
.sb-tstop-row .sb-tstop-meter { margin-top: 6px; }

@media (max-width: 1024px) {
    .sb-tstop-name .sb-tstop-co { display: none; }
    .sb-tstop-dist { display: none; }
}

/* CT-69 — the stop's own detail, above the stock cards in the right column.
   Clicking a stop row used to open a full-screen drawer over a 492px column that
   was sitting empty; this fills it instead. */
.stop-detail-card { padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; }
.sd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0.55rem; }
.sd-title { font-weight: 800; font-size: 0.86rem; color: var(--text-primary); }
.sd-mode { margin-left: auto; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.sd-line { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 0.76rem; }
.sd-label { flex: 0 0 104px; color: var(--text-muted); font-weight: 600; }
.sd-value { flex: 1 1 auto; color: var(--text-secondary); }
.sd-value.sd-guard { color: #10b981; font-weight: 700; }
/* Explaining the silence matters more than any other line here: without it an
   armed stop that never fires reads as broken rather than as working. */
.sd-note {
    margin-top: 0.5rem; padding: 6px 9px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 8px;
    font-size: 0.72rem; line-height: 1.4; color: var(--text-secondary);
}
.sd-note i { color: #f59e0b; margin-right: 5px; }
.sd-foot { display: flex; gap: 6px; margin-top: 0.65rem; }
.sb-tstop-row-click.is-selected { background: rgba(99, 102, 241, 0.1); box-shadow: inset 3px 0 0 var(--accent-primary, #6366f1); }

/* ===== CT-78 — Factor Scorecard card ===================================== */
.factor-scorecard-card { border: 1px solid rgba(99, 102, 241, 0.25); position: relative; }
.fs-head { display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 0.75rem; gap: 8px; }
.fs-head-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.fs-head-left > i { color: var(--accent-primary); font-size: 1rem; flex: 0 0 auto; }
.fs-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0;
    text-transform: uppercase; letter-spacing: 0.5px; }
.fs-sub { margin: 0; font-size: 0.72rem; color: var(--text-secondary); }
.fs-refresh { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px;
    background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.3); color: #818cf8;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; }
.fs-refresh:disabled { opacity: 0.5; cursor: not-allowed; }

.fs-loading { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

.fs-overall { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); }
.fs-overall-good { border-color: rgba(52, 199, 89, 0.35); background: rgba(52, 199, 89, 0.08); }
.fs-overall-mid  { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
.fs-overall-bad  { border-color: rgba(255, 69, 58, 0.35); background: rgba(255, 69, 58, 0.08); }
.fs-overall-rating { display: flex; align-items: center; gap: 8px; font-weight: 800;
    font-size: 0.95rem; color: var(--text-primary); letter-spacing: 0.3px; }
.fs-dot { font-size: 0.9rem; }
.fs-overall-nums { display: flex; gap: 16px; flex-wrap: wrap; }
.fs-kv { display: flex; flex-direction: column; gap: 1px; }
.fs-k { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.fs-v { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }

.fs-stale { display: flex; gap: 6px; align-items: flex-start; font-size: 0.72rem; line-height: 1.4;
    color: #f59e0b; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px; padding: 7px 9px; margin-bottom: 0.7rem; }

.fs-table { display: flex; flex-direction: column; }
.fs-row { border-bottom: 1px solid var(--border-color); }
.fs-row:last-child { border-bottom: none; }
/* Column count is class-driven, not content-driven: the delta column only exists
   when there is a previous snapshot to compare against, and a grid whose child
   count changes under a media query silently shifts every cell one place left. */
.fs-row-main { display: grid; grid-template-columns: 16px minmax(72px, 1.2fr) minmax(60px, 2fr) 42px;
    align-items: center; gap: 8px; padding: 7px 2px; cursor: pointer; }
.fs-table.fs-has-delta .fs-row-main { grid-template-columns: 16px minmax(72px, 1.2fr) minmax(60px, 2fr) auto 42px; }
.fs-row-head .fs-row-main { cursor: default; padding-bottom: 4px; }
.fs-row-head .fs-label, .fs-val-head, .fs-delta-head { font-size: 0.64rem; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.fs-val-head, .fs-delta-head { text-align: right; }
.fs-row:not(.fs-row-head) .fs-row-main:hover { background: rgba(99, 102, 241, 0.07); }
.fs-caret { color: var(--text-muted); font-size: 0.6rem; }
.fs-label { font-size: 0.78rem; color: var(--text-primary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.fs-bar { height: 6px; border-radius: 3px; background: rgba(128, 128, 128, 0.18); overflow: hidden; }
.fs-bar-fill { height: 100%; border-radius: 3px; }
.fs-bar-fill.fs-good { background: #34c759; }
.fs-bar-fill.fs-mid  { background: #f59e0b; }
.fs-bar-fill.fs-bad  { background: #ff453a; }
.fs-bar-fill.fs-na   { background: transparent; }
.fs-val { font-size: 0.82rem; font-weight: 700; text-align: right; }
.fs-val.fs-good { color: #34c759; }
.fs-val.fs-mid  { color: #f59e0b; }
.fs-val.fs-bad  { color: #ff453a; }
.fs-val-na, .fs-val.fs-val-na { color: var(--text-muted); font-weight: 500; cursor: help;
    text-decoration: underline dotted; text-underline-offset: 2px; }
.fs-delta { font-size: 0.7rem; font-weight: 700; text-align: right; white-space: nowrap; }
.fs-delta.up { color: #34c759; }
.fs-delta.down { color: #ff453a; }
.fs-delta-flat { color: var(--text-muted); font-weight: 500; }

.fs-row-detail { padding: 4px 2px 10px 24px; }
.fs-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 14px; }
.fs-detail-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem;
    color: var(--text-secondary); border-bottom: 1px dashed rgba(128, 128, 128, 0.15); padding: 2px 0; }
.fs-detail-kv span:last-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.fs-detail-note { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.fs-detail-note i { color: #f59e0b; margin-right: 4px; }

.fs-news { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.fs-news-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 7px; align-items: center; font-size: 0.7rem; }
.fs-news-cat { background: rgba(99, 102, 241, 0.15); color: #818cf8; border-radius: 5px;
    padding: 1px 6px; font-weight: 600; font-size: 0.64rem; white-space: nowrap; }
.fs-news-pol { font-weight: 700; white-space: nowrap; }
.fs-news-pol.good { color: #34c759; } .fs-news-pol.bad { color: #ff453a; } .fs-news-pol.mid { color: var(--text-muted); }
.fs-news-line { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-news-w { color: var(--text-muted); font-size: 0.64rem; white-space: nowrap; }

.fs-empty { padding: 1.6rem 1rem; text-align: center; color: var(--text-muted); }
.fs-empty > i { font-size: 1.5rem; display: block; margin-bottom: 0.55rem; opacity: 0.6; }
.fs-empty-title { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); }
.fs-empty-sub { font-size: 0.75rem; margin: 4px 0 12px; line-height: 1.4; }
.fs-btn-primary { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.35);
    color: #818cf8; border-radius: 8px; padding: 7px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.fs-foot { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.7rem;
    padding-top: 0.55rem; border-top: 1px solid var(--border-color); }

/* Fold-folded (408px) and every narrow pane: the bar is the first thing to go —
   the number is the fact, the bar is only a reading aid. */
@media (max-width: 1024px) {
    .fs-row-main { grid-template-columns: 14px minmax(70px, 1.3fr) minmax(40px, 1fr) 38px; gap: 6px; }
    .fs-table.fs-has-delta .fs-row-main { grid-template-columns: 14px minmax(70px, 1.3fr) minmax(40px, 1fr) auto 38px; }
    .fs-label { font-size: 0.74rem; }
    .fs-overall-nums { gap: 12px; }
}
@media (max-width: 430px) {
    .fs-row-main { grid-template-columns: 14px 1fr 36px; gap: 6px; }
    .fs-table.fs-has-delta .fs-row-main { grid-template-columns: 14px 1fr auto 36px; }
    .fs-row-main .fs-bar, .fs-row-head .fs-bar-head { display: none; }
    .fs-overall { gap: 8px 12px; }
    .fs-overall-rating { font-size: 0.85rem; }
    .fs-detail-grid { grid-template-columns: 1fr; }
    .fs-news-item { grid-template-columns: auto auto 1fr; }
    .fs-news-w { display: none; }
}

/* ===== CT-79 — factor score chip on portfolio / watchlist rows =========== */
.factor-chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.factor-chip-num { font-size: 0.72rem; line-height: 1; }
.factor-chip-dot { font-size: 0.6rem; line-height: 1; }
.factor-chip-good { background: rgba(52, 199, 89, 0.15); color: #34c759; border-color: rgba(52, 199, 89, 0.3); }
.factor-chip-mid  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.factor-chip-bad  { background: rgba(255, 69, 58, 0.15); color: #ff453a; border-color: rgba(255, 69, 58, 0.3); }
/* An unscored row is visibly a different thing from a low-scoring one - grey,
   dashed, no dot. Nothing here should read as "this stock scored badly". */
.factor-chip-none { background: transparent; color: var(--text-muted);
    border: 1px dashed rgba(128, 128, 128, 0.4); font-weight: 500; }
.factor-chip.is-stale { opacity: 0.65; }

/* 408px: the row is already tight, so the chip keeps the number and drops the
   emoji - the colour still carries the rating. */
@media (max-width: 430px) {
    .factor-chip-dot { display: none; }
}

/* ===== CT-80 — AI card as the scorecard's explanation =================== */
#ai-explanation { margin-bottom: 0.85rem; }
.aix-cap { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 8px;
    padding-bottom: 6px; border-bottom: 1px dashed rgba(128, 128, 128, 0.22); }
.aix-cap strong { color: var(--text-primary); }
.aix-cap-none { color: #f59e0b; border-bottom-color: rgba(245, 158, 11, 0.3); }
.aix-thesis { font-size: 0.86rem; line-height: 1.55; color: var(--text-primary); margin-bottom: 0.8rem; }
.aix-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aix-case { background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 0.6rem 0.75rem; }
.aix-case-h { font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.aix-bull { color: #34c759; } .aix-bear { color: #ff453a; } .aix-risk { color: #f59e0b; }
.aix-list { margin: 0; padding-left: 1.05rem; }
.aix-list li { font-size: 0.76rem; line-height: 1.45; color: var(--text-secondary); margin-bottom: 4px; }
.aix-list li:last-child { margin-bottom: 0; }
.aix-risks { margin-top: 10px; border-color: rgba(245, 158, 11, 0.3); }
.aix-watch { margin-top: 10px; font-size: 0.75rem; color: var(--text-secondary);
    display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.aix-watch i { color: var(--accent-primary); margin-top: 2px; }
.aix-legacy { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; }
.aix-legacy i { color: #f59e0b; margin-right: 4px; }

.aix-opinion { border: 1px solid var(--border-color); border-radius: 10px;
    margin-top: 0.85rem; background: var(--bg-tertiary); }
.aix-opinion > summary { cursor: pointer; list-style: none; padding: 0.6rem 0.85rem;
    font-size: 0.74rem; font-weight: 700; color: var(--text-secondary);
    display: flex; align-items: center; gap: 7px; }
.aix-opinion > summary::-webkit-details-marker { display: none; }
.aix-opinion > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free';
    font-weight: 900; margin-left: auto; font-size: 0.6rem; opacity: 0.6; }
.aix-opinion[open] > summary::after { content: '\f077'; }
.aix-op-grade { font-weight: 500; color: var(--text-muted); font-size: 0.68rem; }
.aix-op-body { padding: 0 0.85rem 0.75rem; }

@media (max-width: 640px) {
    .aix-cases { grid-template-columns: 1fr; }
}

/* ===== CT-82 — Factor edge sub-panel on the Signal Scorecard ============= */
.fe-panel { border: 1px solid var(--border-color); border-radius: 12px;
    padding: 0.9rem 1rem; margin-top: 1rem; background: var(--bg-secondary); }
.fe-head { display: flex; align-items: center; gap: 8px; font-weight: 800;
    font-size: 0.86rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; }
.fe-head > i { color: var(--accent-primary); }
.fe-sub-h { margin-left: auto; font-weight: 500; font-size: 0.7rem;
    text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.fe-empty { font-size: 0.78rem; color: var(--text-muted); padding: 0.9rem 0 0.2rem; line-height: 1.5; }
.fe-empty code { background: rgba(128, 128, 128, 0.15); padding: 1px 4px; border-radius: 4px; }

.fe-section { margin-top: 0.9rem; }
.fe-section-h { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; }
.fe-table { display: flex; flex-direction: column; overflow-x: auto; }
.fe-row { display: grid; align-items: center; gap: 8px; padding: 5px 2px;
    border-bottom: 1px solid var(--border-color); min-width: 620px;
    grid-template-columns: minmax(150px, 1.6fr) 52px 82px 76px 76px 76px 66px minmax(60px, 1fr); }
.fe-row:last-child { border-bottom: none; }
.fe-row-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 700; }
.fe-row-composite { background: rgba(99, 102, 241, 0.07); border-radius: 6px; }
.fe-eng { font-size: 0.76rem; color: var(--text-primary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.fe-row-composite .fe-eng { font-weight: 700; }
.fe-n, .fe-hit, .fe-mean, .fe-spread { font-size: 0.74rem; font-variant-numeric: tabular-nums; text-align: right; }
.fe-pending { font-style: normal; color: var(--text-muted); font-size: 0.66rem; }
.fe-await { font-size: 0.64rem; color: var(--text-muted); font-style: italic; cursor: help; }
.fe-sub { display: block; font-style: normal; font-size: 0.6rem; color: var(--text-muted); line-height: 1.1; }
.fe-good { color: #34c759; } .fe-bad { color: #ff453a; }
.fe-none, .fe-neutral { color: var(--text-muted); }
.fe-spread { font-weight: 700; }
.fe-bar { display: block; height: 6px; border-radius: 3px; background: rgba(128, 128, 128, 0.18); overflow: hidden; }
.fe-bar > i { display: block; height: 100%; border-radius: 3px; }
.fe-bar > i.fe-good { background: #34c759; } .fe-bar > i.fe-bad { background: #ff453a; }
.fe-bar > i.fe-none { background: rgba(128, 128, 128, 0.35); }
.fe-foot { font-size: 0.68rem; color: var(--text-muted); line-height: 1.5; margin: 0.8rem 0 0; }
.fe-foot b { color: var(--text-secondary); }

/* ===== Stock page: verdict line + foldable panels ======================== */
.verdict-line { border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 0.85rem;
    border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; }
/* The panel had no title at all, which is why what it was and where it came from
   were not obvious. The icon marks the AI-derived LINE specifically, not the
   whole panel - the score above it is deterministic arithmetic, and badging all
   of it as AI would misdescribe the part that isn't. */
.verdict-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.verdict-head i { color: var(--accent-primary); font-size: 0.72rem; }
.verdict-head span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-muted); }
.verdict-head .verdict-src { margin-left: auto; font-weight: 500; letter-spacing: 0.2px;
    text-transform: none; font-size: 0.62rem; }
.verdict-ai-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.58rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    background: rgba(99, 102, 241, 0.15); color: #818cf8; border-radius: 4px;
    padding: 1px 5px; margin-right: 5px; vertical-align: 1px; }
.verdict-good { border-color: rgba(52, 199, 89, 0.4); background: rgba(52, 199, 89, 0.07); }
.verdict-mid  { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.07); }
.verdict-bad  { border-color: rgba(255, 69, 58, 0.4); background: rgba(255, 69, 58, 0.07); }
.verdict-na   { border-color: var(--border-color); }
/* One full-width row rather than three short left-aligned ones with items
   floated right - that left a void down the middle and made the whole card look
   bunched into its left half. The drivers now ride on the verdict line, so each
   row spans the card and the confidence has something to sit opposite. */
.verdict-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: 100%; }
.verdict-dot { font-size: 0.85rem; }
.verdict-rating { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.3px; }
.verdict-score { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.verdict-score small { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); }
.verdict-conf { font-size: 0.68rem; color: var(--text-muted); margin-left: auto;
    white-space: nowrap; align-self: center; }
.verdict-drivers { display: inline-flex; gap: 5px; align-items: baseline; flex-wrap: wrap;
    font-size: 0.73rem; padding-left: 9px; margin-left: 3px;
    border-left: 1px solid rgba(128, 128, 128, 0.3); }
.verdict-up { color: #34c759; font-weight: 600; }
.verdict-down { color: #ff453a; font-weight: 600; }
.verdict-sep { color: var(--text-muted); }
.verdict-watch { font-size: 0.7rem; color: var(--text-secondary); margin-top: 5px;
    display: flex; gap: 5px; align-items: flex-start; line-height: 1.4; }
.verdict-watch i { color: var(--accent-primary); margin-top: 2px; }
/* "BUY" and "hold off for a better entry" are both true and pull opposite ways.
   The top line has to carry both or it is asserting half a picture. */
.verdict-entry { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px;
    font-size: 0.73rem; line-height: 1.4; color: var(--text-secondary); }
.verdict-entry b { color: var(--text-primary); }
.verdict-entry.is-wait i { color: #f59e0b; margin-top: 2px; }
.verdict-entry.is-go i { color: #34c759; margin-top: 2px; }

/* Folding is a class + CSS, never DOM surgery: these cards are queried by id and
   by child selector all over app.js, so re-parenting their contents would break
   things a long way from here. */
.sp-foldable > .sp-clickable { cursor: pointer; }
.sp-head-meta { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
.sp-summary { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.sp-chip { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 5px;
    white-space: nowrap; background: rgba(128, 128, 128, 0.16); color: var(--text-secondary); }
.sp-chip.good { background: rgba(52, 199, 89, 0.16); color: #34c759; }
.sp-chip.bad  { background: rgba(255, 69, 58, 0.16); color: #ff453a; }
.sp-chip.mid  { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.sp-chip.warn { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
/* Chevron points DOWN when closed and flips UP when open - the Previous
   Investments behaviour, which is the one that reads correctly. */
.sp-chevron { font-size: 0.75rem; color: var(--text-secondary); transition: transform 0.2s ease; }
.sp-foldable:not(.sp-collapsed) .sp-chevron { transform: rotate(180deg); }

/* Hide every direct child except the header and anything marked always-visible.
   No re-parenting, so ids and child selectors elsewhere keep resolving. */
.sp-foldable.sp-collapsed > *:not(.card-header):not(.fs-head):not(.sp-head):not(.sp-always) { display: none !important; }

/* The divider is a waste of a line when there is nothing under it. !important
   because these headers carry the border as an INLINE style, which a plain
   class rule loses to. */
.sp-foldable.sp-collapsed > .card-header,
.sp-foldable.sp-collapsed > .fs-head {
    border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important;
}
.sp-foldable.sp-collapsed { padding-bottom: 0.8rem; }

/* Folded, a card is one row - so its header should be vertically centred in it.
   These headers carry an inline padding-bottom that the collapsed rule zeroes,
   which left the original top padding unbalanced: a bigger gap above the title
   than below it. Match them. */
.sp-foldable.sp-collapsed > .card-header,
.sp-foldable.sp-collapsed > .fs-head { padding-top: 0 !important; align-items: center; }
.sp-foldable.sp-collapsed { padding-top: 0.8rem; }

/* Previous Investments folds itself, so it needs the same treatment by its own
   class rather than through .sp-collapsed. */
.prev-invest-card:not(.expanded) .prev-invest-header { padding-top: 0; padding-bottom: 0; align-items: center; }
.prev-invest-card:not(.expanded) { padding-top: 0.8rem; padding-bottom: 0.8rem; }

/* Consistent spacing between panels.
   The column is a flex container that ALREADY has gap: 16px, and the cards were
   each adding their own margin on top of it - some 0, some 13.6px, the copilot
   dock 12px at the top, the profile card 16px. Margin stacked on gap in varying
   combinations is precisely why the spacing looked arbitrary. Zero every margin
   and let the one gap do all of the work, so every panel is spaced identically
   including the pinned company block. */
#right-col-container > *,
#browse-detail-panel > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* How long the position has been held - the one fact about it the rows below
   do not carry, and it frames the return underneath. */
.inv-held { margin-left: auto; font-size: 0.68rem; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary);
    background: rgba(128, 128, 128, 0.14); border-radius: 6px; padding: 3px 8px; }

/* The right-hand column reads as figures, so it aligns as figures. !important
   because each cell sets align-items: flex-start inline. */
#investment-detail-card .company-details-grid > .quote-stat-item:nth-child(2n) {
    align-items: flex-end !important; text-align: right;
}



/* The model contradicting itself, said out loud rather than left as two numbers
   that appear to disagree for no reason. */
.ai-contradiction { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed rgba(128, 128, 128, 0.25);
    font-size: 0.7rem; line-height: 1.45; color: var(--text-secondary); }
.ai-contradiction i { color: #f59e0b; margin-top: 2px; }
.ai-contradiction b { color: var(--text-primary); }

/* Suggested entry belongs on the headline's line, hard right - underneath, it
   read as a second unrelated statement. */
#ai-entry-timing > div:first-child { flex-wrap: nowrap !important; align-items: center; }
#ai-entry-timing > div:first-child > div:last-child { flex-shrink: 0; display: flex;
    align-items: baseline; gap: 6px; margin-left: auto; }
#ai-entry-timing > div:first-child > div:last-child > span { font-size: 0.62rem !important; }
#ai-entry-headline { overflow: hidden; text-overflow: ellipsis; }

/* The note marker is now an icon beside the trade count, not a "+ Note" button. */
.prev-invest-note-badge { display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 7px; border-radius: 6px; font-size: 0.72rem; }
.prev-invest-note-badge.has-note { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }

/* Controls that belong to the open panel, not to the header strip: the AI
   horizon toggle and any refresh button still sitting in a header. */
.sp-foldable.sp-collapsed #ai-horizon-toggle,
.sp-foldable.sp-collapsed .badge-ai-horizon,
.sp-foldable.sp-collapsed #ai-cache-timestamp,
.sp-foldable.sp-collapsed #ai-model-badge,
.sp-foldable.sp-collapsed #btn-ai-predict-refresh { display: none !important; }

/* The description, moved out of the header to sit under the divider. */
.sp-desc { margin: 0 0 0.6rem; }
.sp-desc .subtitle { margin: 0; font-size: 0.72rem; color: var(--text-secondary); }

/* The horizon toggle was stacked vertically to survive the cramped header. Now
   it lives below the divider with a full row to itself, so it goes back to a
   normal horizontal row of buttons. */
.sp-subhead .horizon-toggle-vertical { flex-direction: row !important; }
.sp-subhead .horizon-toggle-group { display: flex; flex-direction: row; gap: 4px; }
.sp-subhead .btn-horizon { padding: 4px 10px; font-size: 0.72rem; }

/* Until makeStockPanelsFoldable() has run, these controls are still sitting where
   the raw markup puts them: the horizon toggle stacked VERTICALLY inside the card
   header, beside a title the JS has not rewritten yet. That is the old layout, and
   it was flashing up for a moment every time a stock was selected. Keep them out of
   sight until the panel has actually been converted; the subhead below reveals them
   in their real home. */
#ai-predict-card:not(.sp-foldable) #ai-horizon-toggle,
#ai-predict-card:not(.sp-foldable) #ai-cache-timestamp,
#ai-predict-card:not(.sp-foldable) #ai-model-badge,
#ai-predict-card:not(.sp-foldable) #btn-ai-predict-refresh { display: none !important; }
#ai-predict-card:not(.sp-foldable) #ai-outlook-subtitle { display: none !important; }

/* Controls that belong to an OPEN panel - horizon toggle, cache stamp, refresh.
   Out of the header so the chevron can own the right edge. */
.sp-subhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 0.75rem; }
.sp-subhead > * { position: static !important; top: auto !important; right: auto !important; }
.sp-subhead #btn-ai-predict-refresh { margin-left: auto; }

/* The chevron owns the right edge; nothing absolutely positioned sits over it.
   These headers carry an inline padding-right that reserved space for a refresh
   button which has now moved into the subheader - dead space that pushed the
   chevron 45px off the edge. !important because the padding is inline. */
.sp-foldable > .card-header, .sp-foldable > .fs-head { position: relative; padding-right: 0 !important; }
.sp-head-meta { margin-left: auto; }
.sp-foldable .sp-chevron { margin-left: 2px; }

/* An absolutely-positioned control in a foldable card would overlap the chevron
   in the one corner it needs. Neutralised for good measure. */
.sp-foldable.sp-collapsed > [style*="position: absolute"] { display: none !important; }

/* Label over value: two small chips side by side were hard to read at a glance,
   which defeats the point of putting them in the header at all. */
.sp-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.sp-stat small { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-muted); font-weight: 600; }
.sp-stat b { font-size: 0.86rem; font-weight: 800; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-stat b.good { color: #34c759; } .sp-stat b.bad { color: #ff453a; }
.sp-stat b.mid, .sp-stat b.warn { color: #f59e0b; }
.sp-summary { gap: 14px; }

/* The scorecard headline stays visible folded AND open. */
.fs-overall.sp-always { margin-top: 0.6rem; }
.sp-foldable.sp-collapsed > .fs-overall.sp-always { margin-top: 0.7rem; margin-bottom: 0; }
.fs-actions { display: flex; justify-content: flex-end; margin-top: 0.7rem; }
.fs-actions .fs-refresh { width: auto; gap: 6px; padding: 0 12px; height: 30px; font-size: 0.72rem; font-weight: 700; }

@media (max-width: 430px) {
    .sp-summary { max-width: 52vw; overflow: hidden; }
    /* Too narrow to sit the drivers beside the verdict - they drop to their own
       line and lose the divider that only makes sense inline. */
    .verdict-drivers { border-left: none; padding-left: 0; margin-left: 0; width: 100%; }
    .verdict-conf { margin-left: 0; }
}

/* ===== Smart Sell modes ==================================================
   An accordion strip, not a grid of cards. Craig: "each one can compressed in
   width to its icon and ... when it's active it expands and describes what it
   does". The inactive tabs stay on screen as icons so switching is one click
   from anywhere, and only the open mode spends vertical space.

   Accent is fuchsia, deliberately: sky blue was already the app's default accent
   and read as "generic UI chrome". Nothing else here is magenta, so an armed
   mode is unmistakable at a glance - which matters more on this panel than on
   any other, because the mode decides what every control below it means.        */
#trade-modal { --ss-accent: #e879f9; --ss-accent-dim: rgba(232, 121, 249, 0.14); }
html[data-theme="light"] #trade-modal,
body:not(.dark-mode) #trade-modal { --ss-accent: #c026d3; --ss-accent-dim: rgba(192, 38, 211, 0.10); }

.ss-tabs { display: none; gap: 6px; width: 100%; margin: 0 0 0.5rem; padding: 0 0.9rem; }
#trade-modal.smartsell-mode .ss-tabs { display: flex; }
#ss-explain { display: none; }
#trade-modal.smartsell-mode #ss-explain {
    display: block; padding: 0 0.9rem; text-align: center;
    /* FIXED so the sentence cannot resize the header. It changes length as a
       slider moves, and a growing paragraph above the slider pushed the slider
       out from under the finger mid-drag. */
    /* A FLOOR, not a cap. A hard max-height held the layout still by cutting the
       end off the sentence on a 408px screen, which trades one bad thing for a
       worse one. Sized to the longest mode so it never actually grows. */
    min-height: 4.8em;
}

/* The order-type description block is empty in Smart Sell (its text is hidden
   and the per-mode sentence replaces it), so remove the block too - otherwise it
   holds a gap between the Stop/Limit/Smart row and the tabs that belong with it. */
#trade-modal.smartsell-mode .trade-modal-mode-section { display: none !important; }
#trade-modal.smartsell-mode .trade-modal-toggles { margin-bottom: 0.5rem; }

/* flex-GROW, not flex-basis. The active tab was `flex: 1 1 auto`, and a
   flex-basis of `auto` cannot be interpolated from a length - so the width
   snapped and only the label's opacity was ever actually animating. flex-grow is
   a plain number and animates properly. */
.ss-tab {
    flex: 0 1 44px; flex-grow: 0; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 10px; cursor: pointer; overflow: hidden;
    text-align: left; background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: flex-grow 0.34s cubic-bezier(0.34, 1.2, 0.4, 1),
                border-color 0.2s ease, background 0.2s ease;
}
.ss-tab:hover { border-color: var(--ss-accent); }
.ss-tab-ico { font-size: 0.95rem; color: var(--text-secondary); flex-shrink: 0; width: 18px; text-align: center;
    transition: color 0.2s ease, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); }

/* max-width, not display:none - `display` cannot be transitioned, so the label
   used to appear instantly while the tab was still widening around it. */
.ss-tab .ss-tab-txt {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    max-width: 0; opacity: 0; transform: translateX(-4px);
    transition: max-width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.16s ease, transform 0.26s ease;
}
.ss-tab.is-active { flex-grow: 9; border-color: var(--ss-accent); background: var(--ss-accent-dim); }
.ss-tab.is-active .ss-tab-ico { color: var(--ss-accent); transform: scale(1.12); }
.ss-tab.is-active .ss-tab-txt { max-width: 420px; opacity: 1; transform: none;
    transition: max-width 0.34s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease 0.1s, transform 0.3s ease 0.08s; }
.ss-tab-t { font-size: 0.8rem; font-weight: 800; color: var(--ss-accent); line-height: 1.2; white-space: nowrap; }
.ss-tab-s { font-size: 0.66rem; color: var(--text-secondary); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .ss-tab, .ss-tab-ico, .ss-tab .ss-tab-txt { transition: none; }
}

/* A percent sign the user does not have to infer from the label. */
/* The sliders inside Smart Sell take the mode accent too, or the panel reads as
   two different features stacked on top of each other. */
/* The thumb is a custom pseudo-element with its own background, so accent-color
   alone never reached it. */
#trade-modal.smartsell-mode #group-smartsell .trade-modal-slider { accent-color: var(--ss-accent); }
#trade-modal.smartsell-mode #group-smartsell .trade-modal-slider::-webkit-slider-thumb {
    background: var(--ss-accent);
    box-shadow: 0 0 10px var(--ss-accent-dim);
}
#trade-modal.smartsell-mode #group-smartsell .trade-modal-slider::-moz-range-thumb {
    background: var(--ss-accent); border: none;
}

.ss-num-wrap { display: inline-flex; align-items: baseline; gap: 2px; }
.ss-num-suffix { font-size: 1.35rem; font-weight: 800; color: var(--text-secondary); line-height: 1; }

#group-smartsell .ss-hide { display: none !important; }

/* The diagram is for when you are setting the numbers yourself. Every preset
   reduces to a single level, and the sentence names both the price and the
   percentage - a chart of one horizontal line adds nothing. */
#trade-modal.smartsell-mode .trade-modal-visual-card { display: none !important; }
#trade-modal.smartsell-mode.ss-mode-custom .trade-modal-visual-card { display: flex !important; }
#trade-modal.smartsell-mode #trade-modal-mode-desc { display: none !important; }
/* The card is inside a panel already headed "Smart Sell" by the tab above it. */
#trade-modal.smartsell-mode .tm-chart-title { display: none !important; }
/* Craig: "Let's get rid of this option now, we want execute sell order now."
   A Smart Sell is an order from here on, so there is no mode left to choose. */
#trade-modal.smartsell-mode #execute-mode-container { display: none !important; }

@media (max-width: 430px) {
    .ss-tab { flex-basis: 40px; padding: 9px 8px; gap: 8px; }
    .ss-tab-s { display: none; }
    #trade-modal.smartsell-mode #ss-explain { min-height: 8.4em; }
}


/* ===== Trading 212 account tabs (Settings -> API) =========================
   The keys shown belong to the selected TAB, not to the account the header is
   on. That separation is the whole point: an account with no keys cannot be
   selected in the header, so without it there is no way to ever set one up.   */
/* Folder tabs: the active one loses its bottom border and overlaps the panel's
   top edge by a pixel, so the two read as one continuous shape. Craig: "it's not
   obvious which account is active when switching" - a highlight alone was doing
   too little work, because the thing it needed to say was "the fields below are
   INSIDE this tab". */
.t212-acct-tabs {
    display: flex; gap: 4px; flex-wrap: wrap; position: relative; z-index: 1;
    /* Zero bottom margin and the panel starts at zero top margin: the two are
       meant to touch, and any space at all breaks the folder illusion. */
    margin: 4px 0 0;
    align-items: flex-end;
}
.t212-acct-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; cursor: pointer; position: relative; bottom: -1px;
    border-radius: 8px 8px 0 0;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 700;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.t212-acct-tab:hover { border-color: var(--primary); }
.t212-acct-tab.is-active {
    border-color: var(--primary); border-bottom-color: transparent;
    background: var(--bg-card, var(--bg-secondary)); color: var(--text-primary);
    box-shadow: 0 -2px 0 0 var(--primary) inset;
}

/* The page the active tab opens onto. */
.t212-acct-panel {
    border: 1px solid var(--primary); border-radius: 0 8px 8px 8px;
    padding: 14px; margin: 0 0 12px;
    background: var(--bg-card, var(--bg-secondary));
}
/* A wrapping tab row would otherwise leave the top-left corner square for a tab
   that is no longer above it. */
.t212-acct-tabs:has(.t212-acct-tab.is-active:not(:first-child)) + .t212-acct-panel { border-radius: 8px; }
.t212-acct-panel > .form-group:last-of-type { margin-bottom: 0; }
.t212-acct-state {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.t212-acct-state.is-set { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.t212-acct-state.not-set { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }

@media (max-width: 430px) {
    .t212-acct-tab { flex: 1 1 auto; justify-content: center; padding: 7px 8px; }
    .t212-acct-name { display: none; }
}


/* ===== AI Outlook — targets, tab copy, input context ======================= */

/* Three stacked cells. The old flex row put "$3,200.00 (-11.7%)" beside two more
   of the same and let them wrap wherever they landed, so a price could break away
   from its own percentage. Stacking means a narrow column breaks BETWEEN price and
   delta, never through a number. */
.ai-targets {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 0.7rem 0.6rem; margin-bottom: 0.85rem;
}
.ai-target-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.ai-target-cap {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-secondary); white-space: nowrap;
}
.ai-target-val { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.ai-target-price { font-size: 0.92rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
/* Size only. The colour is set inline per value (red / amber / green by distance
   from today's price), so hard-coding the accent here would override it. */
.ai-target-cell.is-mid .ai-target-price { font-size: 1.02rem; }
.ai-target-delta { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }

@media (max-width: 380px) {
    .ai-target-cap { font-size: 0.58rem; }
    .ai-target-price { font-size: 0.82rem; }
    .ai-target-cell.is-mid .ai-target-price { font-size: 0.92rem; }
}

/* What the selected view actually does, in plain words. Tinted apart from every
   other panel on the page so it reads as guidance about the UI rather than as
   another piece of data about the stock. */
.ai-tab-note {
    display: flex; align-items: flex-start; gap: 8px;
    /* Bottom margin too: it sat flush against the first panel below it. */
    margin: 8px 0 12px; padding: 9px 11px;
    background: rgba(129, 140, 248, 0.10);
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 8px;
}
html[data-theme="light"] .ai-tab-note,
body:not(.dark-mode) .ai-tab-note { background: rgba(99, 102, 241, 0.08); }
.ai-tab-note-ico { color: #818cf8; font-size: 0.8rem; flex-shrink: 0; margin-top: 1px; }
.ai-tab-desc {
    margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-secondary);
    /* Held at three lines so switching tabs cannot shuffle everything below it. */
    min-height: 3.2em;
}

/* Input Context — folded summary, expandable breakdown. */
/* One metric row: label left, value right, explanation underneath. */
.ai-metric-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ai-metric-note {
    margin: 4px 0 0; font-size: 0.68rem; line-height: 1.4;
    color: var(--text-tertiary, var(--text-secondary)); opacity: 0.9;
}

/* Model Reasoning sat flush against Input Context with nothing between them. */
#ai-reasoning-text { margin: 0; }
.ai-ctx-panel { margin-top: 0.85rem; }

.ai-ctx-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ai-ctx-chev { font-size: 0.66rem; color: var(--text-secondary); transition: transform 0.18s ease; }
.ai-ctx-toggle.is-open .ai-ctx-chev { transform: rotate(180deg); }

.ai-ctx-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
/* MUST come with the display rule above. `[hidden]` is a User-Agent rule of the
   form `[hidden] { display: none }`, and a CLASS selector outranks it - so setting
   the hidden attribute on .ai-ctx-list did nothing at all and the panel was
   permanently open while the chevron flipped happily above it. */
.ai-ctx-list[hidden] { display: none !important; }
.ai-ctx-row {
    display: grid; grid-template-columns: 16px minmax(0, auto) auto 1fr;
    align-items: baseline; gap: 8px;
    padding: 6px 2px; border-top: 1px solid var(--border-color);
}
.ai-ctx-row:first-child { border-top: none; }
.ai-ctx-ico { font-size: 0.66rem; }
.ai-ctx-row.ok   .ai-ctx-ico { color: var(--success); }
.ai-ctx-row.miss .ai-ctx-ico { color: #ff9f0a; }
.ai-ctx-row.na   .ai-ctx-ico { color: var(--text-secondary); opacity: 0.7; }
.ai-ctx-name { font-size: 0.76rem; font-weight: 700; color: var(--text-primary); }
.ai-ctx-row.na .ai-ctx-name { color: var(--text-secondary); }
.ai-ctx-count:not(:empty) {
    font-size: 0.64rem; font-weight: 800; color: var(--text-primary);
    background: rgba(125, 125, 125, 0.18); border-radius: 999px; padding: 1px 7px;
}
.ai-ctx-detail { font-size: 0.7rem; color: var(--text-secondary); text-align: right; min-width: 0; }
/* The "why it matters" line drops under the row rather than squeezing it. */
.ai-ctx-note { grid-column: 2 / -1; font-size: 0.67rem; color: var(--text-tertiary, var(--text-secondary)); opacity: 0.85; line-height: 1.35; }

@media (max-width: 520px) {
    .ai-ctx-row { grid-template-columns: 16px 1fr auto; }
    .ai-ctx-detail { grid-column: 2 / -1; text-align: left; }
    .ai-ctx-note { grid-column: 2 / -1; }
}


/* ===== AI INTELLIGENCE — vertical questions that answer in place ========== */

/* The chat launcher lives in the header now. It opens the full conversation,
   which is a different kind of thing from the canned questions, so it should not
   look like one of them. */
.copilot-quick-dock-card .card-header .copilot-chat-launch-pill {
    /* Hard right, so it lands where the summary chip would have been - immediately
       left of the fold chevron the panel machinery appends after it. */
    margin-left: auto;
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(99, 102, 241, 0.14); border: 1px solid rgba(99, 102, 241, 0.35);
    color: #818cf8; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.copilot-quick-dock-card .card-header .copilot-chat-launch-pill:hover { background: rgba(99, 102, 241, 0.24); transform: translateY(-1px); }

.copilot-qa-wrapper { padding: 0.75rem 1rem 0.9rem; }
.copilot-qa-list { display: flex; flex-direction: column; gap: 6px; }
.copilot-qa-row { display: flex; flex-direction: column; }

.copilot-qa-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 0.8rem; font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.copilot-qa-btn:hover { border-color: rgba(99, 102, 241, 0.5); }
.copilot-qa-btn.is-answered { border-color: rgba(99, 102, 241, 0.45); background: rgba(99, 102, 241, 0.08); }
/* Once answered the button doubles as the fold control for its own answer. */
.copilot-qa-btn.is-answered::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 0.6rem; color: var(--text-secondary); transition: transform 0.18s ease;
}
.copilot-qa-btn.is-answered.is-open::after { transform: rotate(180deg); }
.copilot-qa-btn > span:first-of-type { flex: 1; min-width: 0; }

.copilot-qa-pill {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em;
    color: #818cf8; background: rgba(99, 102, 241, 0.14);
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

.copilot-qa-answer {
    margin: 6px 0 2px; padding: 10px 12px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-left: 3px solid rgba(99, 102, 241, 0.55); border-radius: 0 9px 9px 0;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary);
}
/* Same trap as the input-context list: a class selector outranks the UA
   `[hidden] { display: none }` rule, so the attribute alone would do nothing. */
.copilot-qa-answer[hidden] { display: none !important; }
.copilot-qa-answer p:first-child { margin-top: 0; }
.copilot-qa-answer p:last-child { margin-bottom: 0; }
.copilot-qa-src { margin-top: 8px; font-size: 0.66rem; color: var(--text-muted, var(--text-secondary)); text-align: right; opacity: 0.8; }
.copilot-qa-err { color: #ef4444; font-weight: 600; }

/* ===== Market Intelligence popup header ================================== */
.copilot-header { display: flex; align-items: center; gap: 12px; }
.copilot-close {
    flex-shrink: 0; background: none; border: none; padding: 4px 6px;
    color: var(--text-secondary); font-size: 1.05rem; cursor: pointer; line-height: 1;
}
.copilot-close:hover { color: var(--text-primary); }
.copilot-head-mid { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
/* Same brain the AI INTELLIGENCE panel uses, so the popup is recognisably the
   thing that panel opens. */
.copilot-head-ico { color: var(--accent-primary); font-size: 0.95rem; flex-shrink: 0; }
.copilot-head-mid h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
#copilot-engine-badge:not(:empty) {
    background: rgba(16, 185, 129, 0.15); color: #10b981;
    font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.copilot-head-stock { display: flex; align-items: center; gap: 9px; min-width: 0; }
.copilot-head-text { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.copilot-head-name {
    font-size: 0.78rem; font-weight: 700; color: var(--text-primary);
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copilot-head-tkr { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; }
.copilot-head-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; flex-shrink: 0; }

@media (max-width: 520px) {
    .copilot-head-name { max-width: 110px; }
    .copilot-head-mid h3 { font-size: 0.88rem; }
}

/* Headings inside a copilot answer — small, so a model's enthusiasm for ### does
   not turn a short answer into a document. */
.cp-h { margin: 10px 0 4px; font-size: 0.78rem; font-weight: 800; color: var(--text-primary); }
.copilot-qa-answer .cp-h:first-child { margin-top: 0; }
.copilot-qa-answer ul { margin: 6px 0; padding-left: 18px; }
.copilot-qa-answer li { margin: 3px 0; }

.copilot-chips-label {
    font-size: 0.7rem; color: var(--text-muted, var(--text-secondary)); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-right: 6px; white-space: nowrap;
}

/* The caveat under the copilot welcome — quieter than the capability list, because
   it is a limit rather than a feature. */
.copilot-welcome-note { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.9; }

/* ===== Watchlist screener — Today's Call verdict on each row ==============
   The list is ranked on this, so it has to be visible: an order you cannot
   explain from the row looks arbitrary. The model-opinion badge stays beside it
   but reads as secondary, which is what it now is. */
.scr-factor {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 2px 8px; border-radius: 6px; white-space: nowrap;
    border: 1px solid var(--border-color); background: var(--bg-tertiary);
}
.scr-factor-rating { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.scr-factor-score { font-size: 0.82rem; font-weight: 800; color: var(--text-primary); }
.scr-factor-den { font-size: 0.6rem; font-weight: 700; color: var(--text-secondary); }
.scr-factor.buy  { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.12); }
.scr-factor.buy  .scr-factor-rating { color: #10b981; }
.scr-factor.sell { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.12); }
.scr-factor.sell .scr-factor-rating { color: #ef4444; }
.scr-factor.hold .scr-factor-rating,
.scr-factor.none .scr-factor-rating { color: var(--text-secondary); }

/* Entry score — the model's opinion on TIMING, on the card that already answers
   the same question in words. Deliberately not called a rating: rating is the
   verdict on the business, score is whether now is a good moment. */
.ai-entry-score { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ai-entry-score-cap {
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-secondary); white-space: nowrap;
}
.ai-entry-score-bar {
    flex: 1; height: 5px; border-radius: 999px; overflow: hidden;
    background: rgba(125, 125, 125, 0.18); min-width: 40px;
}
.ai-entry-score-fill { display: block; height: 100%; width: 0; transition: width 0.3s ease; }
.ai-entry-score-val { font-size: 0.74rem; font-weight: 800; white-space: nowrap; }

/* ==========================================================================
   Dashboard banner — holdings tape
   A scrolling strip under the title: every open position, its live price and
   today's move, fed by the same batch quotes that update the portfolio.
   ========================================================================== */
.sb-tape {
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.sb-tape-track {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
    will-change: transform;
    animation: sb-tape-scroll var(--sb-tape-dur, 40s) linear infinite;
}
.sb-tape:hover .sb-tape-track { animation-play-state: paused; }
/* The track holds the list twice; sliding exactly half its width loops
   seamlessly. */
@keyframes sb-tape-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.sb-tape-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.sb-tape-item:hover { color: #ffffff; }
.sb-tape-tkr { font-weight: 800; letter-spacing: 0.02em; }
.sb-tape-px { opacity: 0.85; }
.sb-tape-chg { font-weight: 800; }
.sb-tape-chg.pos { color: #4ade80; }
.sb-tape-chg.neg { color: #fb7185; }
.sb-tape-chg.flat { color: rgba(255, 255, 255, 0.6); }
.sb-tape-empty { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }
/* Gap between the two copies of the list must equal the gap between items or
   the loop hiccups at the seam. */
.sb-tape-sep { width: 0; }

[data-theme="light"] .sb-tape-item,
:root[data-theme="light"] .sb-tape-item { color: #334155; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); }
[data-theme="light"] .sb-tape-item:hover,
:root[data-theme="light"] .sb-tape-item:hover { color: #0f172a; }
[data-theme="light"] .sb-tape-chg.pos,
:root[data-theme="light"] .sb-tape-chg.pos { color: #15803d; }
[data-theme="light"] .sb-tape-chg.neg,
:root[data-theme="light"] .sb-tape-chg.neg { color: #dc2626; }
[data-theme="light"] .sb-tape-chg.flat,
:root[data-theme="light"] .sb-tape-chg.flat { color: #64748b; }
[data-theme="light"] .sb-tape-empty,
:root[data-theme="light"] .sb-tape-empty { color: #64748b; text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .sb-tape { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .sb-tape-track { animation: none; }
    .sb-tape-track > .sb-tape-copy { display: none; }
}

/* Dashboard picks — Today's Call chip over the model badge, right-aligned,
   mirroring the watchlist screener's card. */
.sb-ai-picks .sb-pick-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sb-ai-picks .sb-pick-bias { display: inline-flex; align-items: center; gap: 4px; }

/* Dashboard click-through: anything carrying data-sb-ticker opens that stock. */
#scoreboard-overlay [data-sb-ticker] { cursor: pointer; }
#scoreboard-overlay [data-sb-ticker]:hover { filter: brightness(1.08); }

/* "You've owned this before" — a brief card in the corner when a dashboard
   click lands in Browse on a stock with past round trips. */
.sb-past-pop { position: fixed; right: 18px; bottom: 84px; z-index: 12000; width: min(360px, calc(100vw - 36px)); }
.sb-past-card {
    background: var(--bg-secondary, #0f172a); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 12px 14px; box-shadow: var(--card-shadow); color: var(--text-primary);
}
.sb-past-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; font-size: 0.9rem; }
.sb-past-head i { color: var(--accent-primary); margin-right: 7px; }
.sb-past-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.sb-past-close:hover { color: var(--text-primary); }
.sb-past-sum { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
.sb-past-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-past-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-past-sum .pos, .sb-past-row .pos { color: var(--success); }
.sb-past-sum .neg, .sb-past-row .neg { color: var(--danger); }
.sb-past-more { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 1024px) { .sb-past-pop { bottom: 78px; right: 12px; } }

/* Dashboard — News that matters. One row per material headline: polarity dot,
   ticker, the labeller's one line, age; the row opens the stock, the link the
   article. */
.sb-news { display: flex; flex-direction: column; }
.sb-news-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--sb-border); min-width: 0; }
.sb-news-row:last-child { border-bottom: none; }
.sb-news-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; border: 1px solid var(--sb-border); flex-shrink: 0; margin-top: 1px; }
.sb-news-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; align-self: center; background: var(--sb-border); }
.sb-news-dot.pos { background: var(--sb-good); }
.sb-news-dot.neg { background: var(--sb-bad); }
.sb-news-main { flex: 1 1 auto; min-width: 0; }
.sb-news-head { display: flex; align-items: baseline; gap: 8px; }
.sb-news-tkr { font-weight: 800; font-size: 0.86rem; }
.sb-news-held { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--sb-good-bg); color: var(--sb-good); }
.sb-news-age { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--sb-muted); flex-shrink: 0; }
.sb-news-line { font-size: 0.8rem; line-height: 1.35; color: var(--sb-text); margin-top: 1px; }
.sb-news-link { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--sb-muted); font-size: 0.78rem; border: 1px solid var(--sb-border); }
.sb-news-link:hover { color: var(--sb-accent); border-color: var(--sb-accent); }
.sb-news-row { cursor: pointer; }
.sb-news-row:hover { background: var(--sb-good-bg); background: rgba(127,127,127,0.07); border-radius: 8px; }

/* ==========================================================================
   Article reader — the story behind a headline, opened from the news panel,
   from a news alert in the notification centre, and from a push deep link.
   Sits above the scoreboard overlay (9000) and the notification centre drawer
   (100001) - it opens over both, from the news panel and from an alert card.
   ========================================================================== */
.news-modal-backdrop {
    position: fixed; inset: 0; z-index: 100010;
    display: none; align-items: center; justify-content: center;
    padding: 20px; background: rgba(2, 6, 23, 0.72);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.news-modal-backdrop.open { display: flex; }
.news-modal {
    position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 40px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--sb-panel); color: var(--sb-text);
    border: 1px solid var(--sb-border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.news-modal-close {
    /* Left, like every other popup in the app - the notification drawer, the
       scoreboard and the trade modal all close from the top-left corner. */
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 23, 0.55); color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.18); font-size: 0.9rem;
}
.news-modal-close:hover { background: rgba(2, 6, 23, 0.8); }
.news-modal-loading { padding: 34px 22px; text-align: center; color: var(--sb-muted); font-size: 0.88rem; }
.news-modal-hero { max-height: 220px; overflow: hidden; border-radius: 16px 16px 0 0; background: var(--sb-bg); }
.news-modal-hero img { width: 100%; height: 220px; object-fit: cover; display: block; }
.news-modal-inner { padding: 18px 20px 20px; }
.news-modal-meta { display: flex; align-items: center; gap: 10px; }
.news-modal-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--sb-border); flex-shrink: 0; }
.news-modal-meta-txt { min-width: 0; }
.news-modal-tkr { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.95rem; }
.news-modal-co { font-size: 0.76rem; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.news-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
    border: 1px solid var(--sb-border); color: var(--sb-muted);
}
.news-tag.pos { color: var(--sb-good); }
.news-tag.neg { color: var(--sb-bad); }
.news-modal-title { font-size: 1.15rem; line-height: 1.32; font-weight: 800; margin: 12px 0 6px; color: var(--sb-text); }
.news-modal-source { font-size: 0.74rem; font-weight: 600; color: var(--sb-muted); }
.news-modal-oneline {
    margin-top: 14px; padding: 10px 12px; border-radius: 10px;
    background: rgba(127,127,127,0.08); border-left: 3px solid var(--sb-accent);
    font-size: 0.86rem; line-height: 1.45;
}
.news-modal-oneline-lbl {
    display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--sb-accent); margin-bottom: 3px;
}
.news-modal-snippet { margin: 14px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--sb-text); }
.news-modal-note { margin-top: 10px; font-size: 0.7rem; font-style: italic; color: var(--sb-muted); }
.news-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.news-modal-btn {
    flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 10px; cursor: pointer; text-decoration: none;
    font-size: 0.85rem; font-weight: 700;
    border: 1px solid var(--sb-border); background: transparent; color: var(--sb-text);
}
.news-modal-btn:hover { border-color: var(--sb-accent); color: var(--sb-accent); }
.news-modal-btn.primary { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.news-modal-btn.primary:hover { filter: brightness(1.08); color: #fff; }
body.news-modal-active { overflow: hidden; }

@media (max-width: 1024px) {
    .news-modal-backdrop { padding: 0; align-items: flex-end; }
    .news-modal { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .news-modal-hero, .news-modal-hero img { border-radius: 18px 18px 0 0; height: 170px; }
    .news-modal-title { font-size: 1.05rem; }
    .news-modal-btn { flex: 1 1 100%; }
}

/* Three tiles beside the hero: the third spans the row. */
.sb-tiles-2x2 .sb-tile:nth-child(3) { grid-column: 1 / -1; }

/* What needs you now — one line of chips under the hero. */
.sb-attention { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 0.8rem; font-weight: 700; }
.sb-att { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--sb-border); background: var(--sb-panel); color: var(--sb-text); cursor: pointer; }
.sb-att i { color: var(--sb-accent); font-size: 0.78rem; }
.sb-att.warn { border-color: rgba(245, 158, 11, 0.45); }
.sb-att.warn i { color: #f59e0b; }
.sb-att.quiet { cursor: default; color: var(--sb-muted); }
.sb-att.quiet i { color: var(--sb-good); }
.sb-att-sep { color: var(--sb-muted); }

/* Day streak and the last 30 days, one panel. */
.sb-streak-row { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; align-items: center; }
.sb-streak-left { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.sb-streak-left .sb-week-dots { margin-top: 10px; padding-top: 0; }
.sb-streak-right { min-width: 0; }
@media (max-width: 620px) { .sb-streak-row { grid-template-columns: 1fr; } }

/* Market pulse at the front of the tape. */
.sb-tape-mkt { opacity: 0.95; }
.sb-tape-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); align-self: center; flex-shrink: 0; }
.sb-tape-dot.off { background: rgba(255, 255, 255, 0.35); box-shadow: none; }
[data-theme="light"] .sb-tape-dot.off,
:root[data-theme="light"] .sb-tape-dot.off { background: #94a3b8; }

/* Air between the account header and the value strip under it. This has to sit
   at the end of the file: two earlier media blocks already set this margin with
   !important, and at equal specificity the last rule wins. */
@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    .profile-unified-header {
        margin: 0 0 1.1rem 0 !important;
    }
}

/* ==========================================================================
   Orders & Trades on the front screen.
   ========================================================================== */

/* The controls row: view tabs left, asset type right, one line at every width.
   These were two stacked rows on a phone, which cost ~60px before a single
   order was visible. */
.orders-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.orders-view-tabs { max-width: 360px; width: 100%; }
.orders-type-toggles {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(128, 128, 128, 0.06);
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-left: auto;
}

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    /* The subview header gave ~114px to a back arrow and an icon badge, then
       wrapped a three-line description under a title that had nowhere to go.
       The description is the first thing to drop: "Orders & Trades" already
       says what the screen is, and a caption nobody can read is worse than no
       caption. */
    .profile-header-subview-content {
        padding: 0 0.7rem;
        gap: 0.5rem;
    }
    .btn-profile-subview-back {
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }
    .profile-subview-icon-badge {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
    .profile-subview-title { font-size: 1rem; }
    .profile-subview-subtitle { display: none; }

    /* All four control pills on one line. */
    .orders-controls-row {
        flex-wrap: nowrap;
        gap: 0.4rem;
        margin-bottom: 0.7rem;
    }
    .orders-view-tabs { width: auto; flex: 0 1 auto; }
    .orders-controls-row .settings-tab-bar { gap: 4px; }
    .orders-controls-row .settings-tab-btn {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .orders-type-toggles {
        padding: 3px 5px;
        gap: 0.25rem;
        flex: 0 0 auto;
    }
    .orders-type-toggles .orders-type-toggle-btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Search keeps the row; the two status toggles pin to its right. */
    #trade-cycles-filter-btns .cycle-filter-btn,
    #raw-orders-filter-btns .orders-filter-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    #trade-cycles-filter-btns .cycle-filter-btn span,
    #raw-orders-filter-btns .orders-filter-btn span { display: none; }
    #trade-cycles-filter-btns .cycle-filter-btn i,
    #raw-orders-filter-btns .orders-filter-btn i { margin: 0; }
}

/* The averages are restated inside the card; only one copy is ever shown. */
.cycle-pnl-slot { min-width: 155px; display: flex; justify-content: flex-end; }
.cycle-avg-unfolded { display: none; }

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    /* Collapsed: identity, dates and the P&L. The two average blocks were
       squeezing the P&L pill off the card entirely, which is the one figure
       worth glancing at. */
    .trade-cycle-card .cycle-avg-block { display: none; }
    .cycle-pnl-slot { min-width: 0; }

    .trade-cycle-card .cycle-header-row { gap: 0.5rem; flex-wrap: nowrap; }
    .trade-cycle-card .cycle-identity { min-width: 0 !important; flex: 1 1 auto; }
    .trade-cycle-card .cycle-identity > div:last-child { min-width: 0; }
    .trade-cycle-card .cycle-figures { gap: 0.5rem; }
    .trade-cycle-card .cycle-header-row h3 {
        font-size: 0.92rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .trade-cycle-card .cycle-header-row h3 + span { flex-shrink: 0; }
    /* Name and ticker share one line; the ticker was dropping to its own row
       and pushing the meta line into the pill. */
    .trade-cycle-card .cycle-identity > div:last-child > div:first-child {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-width: 0;
    }
    /* The date range wrapped into a four-line stack beside a 44px logo and then
       ran under the P&L pill. Duration and execution count carry the same
       story in a fraction of the width; the full range is in the open panel. */
    .trade-cycle-card .cycle-meta {
        flex-wrap: nowrap;
        gap: 10px;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.72rem !important;
    }
    .trade-cycle-card .cycle-meta-dates { display: none; }
    .trade-cycle-card .cycle-meta-execs i { display: none; }

    .cycle-avg-unfolded {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 0 0 0.75rem 0;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-color);
    }
    .cycle-avg-unfolded-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cycle-avg-unfolded-item:last-child { text-align: right; align-items: flex-end; }
    .cycle-avg-unfolded-lbl {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary);
    }
    .cycle-avg-unfolded-val { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
}

/* The subview header is sticky 8px below the top of its scroller, so rows
   scrolled up through that 8px strip and were visible above the header - a
   sliver of a card riding along the top edge. A solid box-shadow in the page
   colour fills the strip; box-shadow is not affected by the header's own
   overflow:hidden, which rules out a pseudo-element here. The header is also
   made fully opaque: at 92% the rows underneath ghosted through it. */
/* Written for both themes explicitly: [data-theme="light"] .profile-unified-header
   already exists earlier in the file and outranks a bare class selector, so a
   single rule here silently lost in light mode - the header stayed 92%
   transparent and the mask shadow was replaced outright. */
:root .profile-unified-header,
:root:not([data-theme="light"]) .profile-unified-header {
    background: var(--bg-secondary, #0f172a);
    box-shadow: 0 -14px 0 0 var(--bg-primary),
                0 4px 20px rgba(0, 0, 0, 0.35),
                0 0 12px rgba(99, 102, 241, 0.12);
}
[data-theme="light"] .profile-unified-header {
    background: var(--bg-secondary, #ffffff);
    box-shadow: 0 -14px 0 0 var(--bg-primary),
                0 4px 16px rgba(0, 0, 0, 0.08),
                0 0 10px rgba(99, 102, 241, 0.1);
}

/* The ticker caption under the logo, matching the watchlist and portfolio rows.
   Only drawn on narrow screens; wider layouts keep the inline badge. */
.cycle-logo-stack { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.cycle-logo-ticker { display: none; }

@media (max-width: 768px), (max-width: 1024px) and (max-aspect-ratio: 11/10) {
    /* The inline ticker badge was pushing the company name out of its own row
       and winning - you got "N... NVDA" instead of the name. Under the logo it
       costs no horizontal space at all. */
    .trade-cycle-card .cycle-ticker-badge { display: none; }
    .cycle-logo-ticker {
        display: block;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
        max-width: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    /* The pill was the widest thing on the row. Completed keeps the amount and
       drops the percentage; in progress keeps only the spinner - a spinning
       icon already says "still running". */
    /* Inline, not a flex item: the pill is a flex container, so these have to
       sit inside one wrapper span or the amount and percentage stack. */
    .trade-cycle-card .cycle-pnl-pct { display: none; }
    .trade-cycle-card .cycle-pnl-pill.in-progress .cycle-pnl-word { display: none; }
    .trade-cycle-card .cycle-pnl-pill.in-progress { padding-left: 10px; padding-right: 10px; }
    .trade-cycle-card .cycle-pnl-pill { white-space: nowrap; }

}

/* The whole header row toggles the card, so the chevron is a hint, not a
   control. Stripped of its button chrome it matches how the rest of the site
   draws an expand arrow, and gives ~30px back to the name and the P&L. Inline
   padding on the element means !important here. */
.trade-cycle-card .cycle-accordion-btn {
    padding: 0 !important;
    width: 18px;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.trade-cycle-card .cycle-accordion-btn:hover { color: var(--text-primary); }

/* CT-85 — the launch lock. Covers everything, including the bottom nav, so
   there is nothing to tap past while the app is locked. */
.passkey-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-primary, #080c14);
}
.passkey-lock-card {
    width: 100%;
    max-width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.passkey-lock-icon {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.passkey-lock-card h2 { margin: 6px 0 0; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.passkey-lock-card p { margin: 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; }
.passkey-lock-btn {
    margin-top: 8px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px; border-radius: 12px; cursor: pointer;
    font-size: 0.92rem; font-weight: 700;
    background: #10b981; color: #fff; border: none;
}
.passkey-lock-btn:hover { filter: brightness(1.07); }
.passkey-lock-alt { font-size: 0.78rem; color: var(--text-muted); text-decoration: underline; margin-top: 4px; }
body.passkey-locked { overflow: hidden; }