/* GuacTracker — Dark theme inspired by the original */
:root {
    --bg: #0f1117;
    --bg-card: #1a1d27;
    --bg-card-hover: #22253a;
    --bg-sidebar: #141620;
    --border: #2a2d3a;
    --text: #e4e4e7;
    --text-muted: #8b8d9a;
    --green: #22c55e;
    --green-bg: rgba(34, 197, 94, 0.1);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.1);
    --yellow: #eab308;
    --yellow-bg: rgba(234, 179, 8, 0.1);
    --blue: #3b82f6;
    --purple: #a855f7;
    --accent: #22c55e;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 10;
}

.sidebar-logo {
    padding: 0 20px 20px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.sidebar-logo span { font-size: 28px; }

.sidebar-nav { flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.nav-item:hover { background: var(--bg-card); color: var(--text); }
.nav-item.active {
    color: var(--accent);
    background: rgba(34, 197, 94, 0.05);
    border-left-color: var(--accent);
}

.nav-item .icon { font-size: 18px; width: 24px; text-align: center; }

/* Main content */
.main {
    margin-left: 220px;
    flex: 1;
    padding: 30px;
    max-width: 1200px;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
}

.tab {
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
    white-space: nowrap;
}

.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #000; font-weight: 600; }

/* Search bar */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.search-bar input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--text);
    font-size: 14px;
    width: 300px;
    outline: none;
    transition: border-color 0.15s;
}

.search-bar input:focus { border-color: var(--accent); }
.search-bar input::placeholder { color: var(--text-muted); }

.search-bar button, .btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.search-bar button:hover, .btn:hover { opacity: 0.85; }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Three-column category layout */
/* Primary 3-column grid for the fixed risk categories (Index/Mega/Risky) */
.cat-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 1100px) {
    .cat-columns { grid-template-columns: 1fr; }
}

/* Secondary row for the user Watchlist below the risk panels.
   Layout matches the primary 3-col grid so the Watchlist column aligns
   under Index ETFs; the remaining 2 columns are intentionally left empty. */
.cat-columns-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) {
    .cat-columns-secondary { grid-template-columns: 1fr; }
}
.cat-column-full { /* Watchlist column — keep narrow, aligned to col 1 */
    grid-column: 1 / 2;
}

.cat-column {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    min-width: 0;
    overflow: hidden;
}

.cat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.cat-bar {
    width: 3px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
}

.cat-title { font-size: 15px; font-weight: 700; }

.cat-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-low { background: var(--green-bg); color: var(--green); }
.badge-mild { background: var(--yellow-bg); color: var(--yellow); }
.badge-high { background: var(--red-bg); color: var(--red); }

.cat-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Cloud sections */
.cloud-section { margin-bottom: 12px; }
.cloud-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.cloud-icon { font-size: 14px; }
.cloud-icon.bullish { color: var(--green); }
.cloud-icon.bearish { color: var(--red); }
.cloud-icon.neutral { color: #f59e0b; }
.cloud-section-title { font-size: 13px; font-weight: 600; }
.cloud-section-title.bullish { color: var(--green); }
.cloud-section-title.bearish { color: var(--red); }
.cloud-section-title.neutral { color: #f59e0b; }
.cloud-count { font-size: 12px; color: var(--text-muted); }

.caution-box {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--red);
    margin-bottom: 8px;
}
.caution-box.caution-mixed {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: #f59e0b;
}

/* Ticker rows */
.ticker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
}
.ticker-row:hover { background: var(--bg-card-hover); }

.ticker-row-name { font-size: 14px; font-weight: 700; min-width: 50px; }
.ticker-row-change { font-size: 13px; font-weight: 600; }
.ticker-row-spacer { flex: 1; }

.rsi-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.ticker-rating {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 48px;
    text-align: center;
}

.rating-GREAT { background: var(--green-bg); color: var(--green); }
.rating-GOOD { background: var(--green-bg); color: var(--green); opacity: 0.8; }
.rating-OKAY { background: var(--yellow-bg); color: var(--yellow); }
.rating-BAD { background: var(--red-bg); color: var(--red); }

.change-positive { color: var(--green); }
.change-negative { color: var(--red); }

/* ---------------------------------------------------------------------------
   Dashboard ticker rows v6 — CSS grid with fixed lanes for perfect alignment.
   Lanes:
     [grade 26] [dot 8] [ticker auto] [strike flex] [%day 50] [rsi-pair auto] [remove auto]
   The %day lane is fixed-width and right-aligned so every % column lines up
   across the panel regardless of strike chip width.
   --------------------------------------------------------------------------- */
.ticker-row {
    display: grid !important;
    grid-template-columns:
        [grade] 26px
        [dot] 8px
        [name] auto
        [strike] minmax(0, 1fr)
        [change] 50px
        [rsi] auto
        [remove] auto;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    overflow: hidden;
    min-width: 0;
}
/* Spacer no longer needed under grid — hide it gracefully if still in markup */
.ticker-row .ticker-row-spacer { display: none; }
.ticker-row-grade  { grid-column: grade; }
.ticker-row-dot    { grid-column: dot; }
.ticker-row-name   { grid-column: name; }
.ticker-row-strike { grid-column: strike; justify-self: start; }
.ticker-row-change { grid-column: change; justify-self: end; }
.ticker-row-rsi    { grid-column: rsi; justify-self: end; }
.ticker-row-remove { grid-column: remove; }
.ticker-row:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.10);
    transform: translateX(1px);
}

/* --- Letter grade badge --- compact, bright, halo'd ----------------------- */
.ticker-row-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    flex-shrink: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 1px 2px rgba(0,0,0,0.25),
        0 0 0 1.5px var(--grade-halo, transparent);
}
/* Brighter palette: pure greens for A+/A/B, vivid amber for C, hot orange D, red F.
   Halos sit just outside the pill in a lighter tint of the same hue. */
.grade-aplus { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); color: #052e16; border-color: #16a34a; --grade-halo: rgba(74,222,128,0.40); }
.grade-a     { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); color: #f0fdf4; border-color: #15803d; --grade-halo: rgba(74,222,128,0.32); }
.grade-b     { background: linear-gradient(180deg, rgba(34,197,94,0.45) 0%, rgba(22,163,74,0.35) 100%); color: #d1fae5; border-color: rgba(34,197,94,0.65); --grade-halo: rgba(134,239,172,0.28); }
.grade-c     { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); color: #1c1917; border-color: #d97706; --grade-halo: rgba(252,211,77,0.38); }
.grade-d     { background: linear-gradient(180deg, #fb923c 0%, #f97316 100%); color: #1c1917; border-color: #ea580c; --grade-halo: rgba(253,186,116,0.35); }
.grade-f     { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); color: #fff;     border-color: #dc2626; --grade-halo: rgba(252,165,165,0.35); }
.grade-na    { background: rgba(255,255,255,0.06); color: var(--text-muted); border-color: rgba(255,255,255,0.12); --grade-halo: rgba(255,255,255,0.10); }

/* --- Status dot ------------------------------------------------------------ */
.ticker-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    margin: 0 -2px 0 -2px;
}
.ticker-dot-bull    { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.7); }
.ticker-dot-bear    { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,0.7); }
.ticker-dot-neutral { background: #fbbf24; box-shadow: 0 0 5px rgba(252,191,36,0.6); }

/* --- Ticker symbol --------------------------------------------------------- */
.ticker-row-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--text);
    min-width: 42px;
    flex-shrink: 0;
}

/* --- Strike + expiry chip (single-line, compact) --------------------------- */
.ticker-row-strike {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.1;
    padding: 2px 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ticker-strike-num { font-size: 11px; font-weight: 700; color: #e5e7eb; }
.ticker-strike-exp { font-size: 10px; color: var(--text-muted); font-weight: 500; }

/* --- % day change ---------------------------------------------------------- */
.ticker-row-change {
    font-size: 12px;
    font-weight: 700;
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
}

/* --- RSI D/W pills --------------------------------------------------------- */
.ticker-row-rsi {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
    align-items: center;
    flex-shrink: 0;
}
.rsi-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    letter-spacing: 0.2px;
}
.rsi-chip .rsi-tf  { color: var(--text-muted); font-weight: 700; font-size: 9px; text-transform: uppercase; }
.rsi-chip .rsi-val { color: var(--text); font-weight: 800; font-size: 11px; }
/* Hot/cold tinting by zone — brighter than v2 */
.rsi-extreme-cold { background: rgba(74,222,128,0.25);  border-color: rgba(74,222,128,0.55); }
.rsi-extreme-cold .rsi-val { color: #86efac; }
.rsi-cold         { background: rgba(74,222,128,0.15);  border-color: rgba(74,222,128,0.40); }
.rsi-cold         .rsi-val { color: #a7f3d0; }
.rsi-neutral      { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.rsi-neutral      .rsi-val { color: #e5e7eb; }
.rsi-warm         { background: rgba(252,191,36,0.18);  border-color: rgba(252,191,36,0.40); }
.rsi-warm         .rsi-val { color: #fcd34d; }
.rsi-hot          { background: rgba(248,113,113,0.22); border-color: rgba(248,113,113,0.45); }
.rsi-hot          .rsi-val { color: #fca5a5; }

/* Neutral bucket = mixed signals (one timeframe passes, other doesn't).
   Kept at full opacity per Tony's preference; the status dot color already
   communicates the bucket. */
/* Neutral bucket = mixed signals (one timeframe passes, other doesn't).
   Kept at full opacity per Tony's preference; the status dot color already
   communicates the bucket. */
.ticker-row-neutral { opacity: 1; }

/* --- Watchlist (4th category) ---------------------------------------------- */
.badge-watchlist {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.35);
}
.cat-column-watchlist {
    border-color: rgba(56,189,248,0.20);
    background: linear-gradient(180deg, rgba(56,189,248,0.025) 0%, transparent 40%), var(--bg-card);
}
.cat-column-watchlist .cat-bar {
    background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
}

.watchlist-add {
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    align-items: stretch;
}
.watchlist-add input {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(56,189,248,0.30);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.watchlist-add input::placeholder {
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 500;
}
.watchlist-add input:focus {
    border-color: #38bdf8;
    background: rgba(56,189,248,0.08);
}
.watchlist-add input:disabled { opacity: 0.6; }
.watchlist-add-btn {
    width: 30px;
    background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
    color: #0c4a6e;
    border: 1px solid #0284c7;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.10s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.watchlist-add-btn:hover { filter: brightness(1.10); }
.watchlist-add-btn:active { transform: translateY(1px); }

.ticker-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    margin-left: 4px;
    flex-shrink: 0;
}
.ticker-row:hover .ticker-row-remove { opacity: 0.7; }
.ticker-row-remove:hover {
    opacity: 1 !important;
    background: rgba(239,68,68,0.20);
    color: #fca5a5;
}

/* Scroll arrows */
.strikes-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scroll-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.scroll-arrow:hover { border-color: var(--accent); color: var(--accent); }

/* Scan results table */
.results-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}

.results-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.results-header h3 { font-size: 16px; }

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

.results-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}

.results-table td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.results-table tr:hover { background: var(--bg-card-hover); }

.results-table .highlight {
    background: rgba(34, 197, 94, 0.08);
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 40px;
    justify-content: center;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Roll form */
.roll-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input, .form-group select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--accent);
}

/* Current position box (for rolling) */
.current-position {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.pos-stat {
    text-align: center;
}

.pos-stat .value {
    font-size: 20px;
    font-weight: 700;
}

.pos-stat .label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Hidden pages */
.page { display: none; }
.page.active { display: block; }

/* DTE slider */
.dte-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.dte-control input[type="range"] {
    -webkit-appearance: none;
    background: var(--border);
    height: 4px;
    border-radius: 2px;
    width: 200px;
}

.dte-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.dte-value {
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 13px;
    z-index: 100;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Back button */
.scan-back {
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 16px;
    display: inline-block;
    transition: color 0.15s;
}
.scan-back:hover { color: var(--accent); }

/* Ticker info bar */
.scan-ticker-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.scan-ticker-info {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.scan-ticker-name { font-size: 28px; font-weight: 800; }
.scan-ticker-price { font-size: 24px; font-weight: 600; color: var(--text-muted); }
.scan-ticker-change { font-size: 18px; font-weight: 700; }

/* Info badges (IV, Entry, Cloud) */
.scan-badges {
    display: flex;
    gap: 10px;
}

.info-badge {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 16px;
    min-width: 100px;
    text-align: center;
    background: var(--bg-card);
}
.badge-top {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.badge-main {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.badge-sub {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
}

.cloud-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Summary bar */
.summary-bar {
    display: flex;
    gap: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.summary-item { min-width: 140px; }
.summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.summary-value { font-size: 24px; font-weight: 700; }
.summary-sub { font-size: 12px; color: var(--green); margin-top: 2px; }

.contracts-control {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.contract-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font-size: 18px; color: var(--text);
    transition: border-color 0.15s;
}
.contract-btn:hover { border-color: var(--accent); }
.contract-count { font-size: 24px; font-weight: 700; color: var(--accent); }

/* Expiration tabs */
.exp-section { margin-bottom: 20px; }
.exp-label { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.exp-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.exp-tabs::-webkit-scrollbar { height: 4px; }
.exp-tabs::-webkit-scrollbar-track { background: var(--bg); border-radius: 2px; }
.exp-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.exp-tab {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 20px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.15s;
    min-width: 80px;
}
.exp-tab:hover { border-color: var(--text-muted); }
.exp-tab.active { border-color: var(--accent); background: rgba(34, 197, 94, 0.08); color: var(--accent); }
.exp-dte { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.exp-tab.active .exp-dte { color: var(--accent); }
.exp-rec { display: inline-block; font-size: 9px; font-weight: 700; color: var(--yellow, #eab308); background: rgba(234,179,8,0.15); padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: middle; letter-spacing: 0.5px; }

/* Strike cards (horizontal scroll) */
.strikes-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.strikes-header h3 { font-size: 16px; flex: 1; }
.strikes-sub { font-size: 12px; color: var(--text-muted); flex: 1; }
.optimal-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.optimal-btn:hover { background: rgba(34, 197, 94, 0.1); }

.strike-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.strike-cards::-webkit-scrollbar { height: 6px; }
.strike-cards::-webkit-scrollbar-track { background: var(--bg); border-radius: 3px; }
.strike-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.strike-card {
    min-width: 220px;
    max-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
}
.strike-card:hover { border-color: var(--text-muted); }
.strike-card.strike-best { border-color: var(--accent); background: rgba(34, 197, 94, 0.04); }
.strike-card.strike-selected { border-color: var(--accent); border-width: 2px; background: rgba(34, 197, 94, 0.06); }

.best-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.strike-price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}
.strike-type {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}

.strike-metrics {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
}
.strike-metric {}
.sm-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.sm-value { font-size: 16px; font-weight: 700; }

.strike-details {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.strike-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 2px 0;
}
.sd-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; min-width: 65px; }
.sd-value { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

.strike-row-split {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
}
.strike-row-split div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.liq-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* Portfolio header */
.port-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.port-updated { text-align: right; }
.updated-label { font-size: 11px; color: var(--text-muted); }
.updated-time { font-size: 14px; font-weight: 600; }

/* Portfolio tabs */
.port-tabs {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
}
.port-tab {
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
}
.port-tab:hover { color: var(--text); }
.port-tab.active { background: var(--bg); color: var(--text); font-weight: 600; }

.ptab-content { display: none; }
.ptab-content.active { display: block; }

/* Portfolio stat cards */
.port-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.port-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.psc-icon { font-size: 24px; }
.psc-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.psc-value { font-size: 28px; font-weight: 800; margin: 4px 0 2px; }
.psc-sub { font-size: 12px; }

/* Monthly goal */
.goal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.goal-left { display: flex; gap: 12px; align-items: center; }
.goal-icon { font-size: 28px; }
.goal-title { font-size: 18px; font-weight: 700; }
.goal-sub { font-size: 13px; color: var(--text-muted); }
.goal-right { text-align: right; }
.goal-amount { font-size: 28px; font-weight: 800; }
.goal-pct { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.goal-achieved { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 2px; }

.goal-bar-bg {
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}
.goal-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.goal-alert {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--green);
    font-weight: 600;
}

/* Analytics */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.analytics-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.ac-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.ac-value { font-size: 32px; font-weight: 800; }
.ac-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.analytics-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.analytics-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.analytics-row:last-child { border-bottom: none; }
.ar-ticker { font-weight: 700; font-size: 14px; min-width: 80px; }
.ar-trades { flex: 1; color: var(--text-muted); font-size: 13px; }
.ar-pnl { font-weight: 700; font-size: 14px; }

/* Add Trade Modal */
.add-trade-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    max-width: 520px;
}
.atm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.atm-header h3 { font-size: 18px; }
.atm-close { cursor: pointer; font-size: 18px; color: var(--text-muted); padding: 4px; }
.atm-close:hover { color: var(--text); }

.atm-section { margin-bottom: 16px; }
.atm-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; font-weight: 600; }

.atm-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s;
}
.atm-input:focus { border-color: var(--accent); }
.atm-ticker-input { font-size: 18px; font-weight: 700; text-transform: uppercase; }

.atm-input-wrap {
    position: relative;
}
.atm-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
}
.atm-has-prefix { padding-left: 28px; }

.atm-row { display: flex; gap: 12px; }
.atm-half { flex: 1; }

.atm-toggle-group {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border-radius: 8px;
    padding: 4px;
}
.atm-toggle {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.15s;
}
.atm-toggle:hover { color: var(--text); }
.atm-toggle.active { background: var(--bg-card); color: var(--accent); border: 1px solid var(--accent); }

.atm-small .atm-toggle { padding: 8px; font-size: 12px; }
.atm-risk.active { border-color: currentColor !important; }

.atm-contracts-control {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.atm-c-btn {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 18px;
    color: var(--text);
    transition: background 0.15s;
    user-select: none;
}
.atm-c-btn:hover { background: var(--bg-card); }
.atm-c-input {
    width: 50px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
}
.atm-c-input::-webkit-inner-spin-button { display: none; }

.atm-dte-preview {
    font-size: 12px;
    color: var(--accent);
    margin-top: 6px;
}

.atm-summary {
    background: var(--bg);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.atm-sum-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.atm-sum-row span:first-child { color: var(--text-muted); }
.atm-sum-row span:last-child { font-weight: 600; }

.atm-actions { display: flex; gap: 8px; }

/* Position Cards v2 (GuacTracker style) */
.pos-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 12px;
}

.pcv2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.pcv2-left { display: flex; align-items: center; gap: 8px; }
.pcv2-ticker { font-size: 22px; font-weight: 800; }
.pcv2-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
}
.pcv2-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.pcv2-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pos-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
}
.tag-profit { border-color: var(--green); color: var(--green); background: rgba(34,197,94,0.08); }

.pos-action-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.pos-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    transition: all 0.15s;
}
.pos-action-btn:hover { border-color: var(--text-muted); }
.action-close { background: rgba(239,68,68,0.15); border-color: var(--red); color: var(--red); }
.action-close:hover { background: rgba(239,68,68,0.25); }
.action-close-manual { border-color: var(--text-muted); }
.action-remove { border-color: var(--red); color: var(--red); }
.action-remove:hover { background: rgba(239,68,68,0.1); }

.pcv2-pnl-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}
.pcv2-pnl-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.pcv2-pnl-value { font-size: 28px; font-weight: 800; }
.pcv2-pnl-pct { font-size: 16px; font-weight: 600; }

.pcv2-section-title {
    font-size: 14px;
    font-weight: 700;
    margin: 14px 0 8px;
}

.pcv2-dates {
    display: flex;
    gap: 8px;
}
.pcv2-date-box {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.pcv2-date-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.pcv2-date-val { font-size: 15px; font-weight: 700; font-family: monospace; }

.pcv2-date-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0 0 4px;
}

.pcv2-details {
    display: flex;
    gap: 8px;
}
.pcv2-detail-box {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.pcv2-d-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.pcv2-d-val { font-size: 16px; font-weight: 700; }

/* Closed position cards */
.closed-card { background: var(--bg) !important; }

.pcv2-result-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 8px;
    border: 1px solid;
}

.pcv2-closed-pnl {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 12px 0;
}
.pcv2-closed-pnl-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; }
.pcv2-closed-pnl-value { font-size: 32px; font-weight: 800; }

.pcv2-closed-summary {
    margin: 12px 0;
}
.pcv2-cs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.pcv2-cs-icon { font-size: 16px; }
.pcv2-cs-text { flex: 1; font-size: 13px; font-weight: 600; }
.pcv2-cs-meta { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Position Tabs Bar */
.pos-tabs-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}
.pos-tab {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.pos-tab:hover { color: var(--text); }
.pos-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Filter pills bar */
.pos-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.pos-filters-left { display: flex; gap: 6px; }
.pos-pill {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s;
}
.pos-pill:hover { border-color: var(--text-muted); color: var(--text); }
.pos-pill.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Summary cards */
.pos-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.pos-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
}
.pos-sum-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.pos-sum-val { font-size: 24px; font-weight: 800; }
.pos-sum-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Position table */
.pos-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.pos-table-head {
    display: flex;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.pos-table-head .pt-col {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}
.pos-table-row {
    display: flex;
    padding: 14px 20px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.pos-table-row:last-child { border-bottom: none; }
.pos-table-row:hover { background: rgba(255,255,255,0.02); }

.pt-col { flex: 1; font-size: 14px; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-col:last-child { padding-right: 0; }
.pt-ticker { flex: 1.3; }
.pt-strat { flex: 0.9; }
.pt-qty { flex: 0.5; text-align: center; }
.pt-entry { flex: 0.7; font-family: monospace; }
.pt-current { flex: 0.7; font-family: monospace; }
.pt-pnl { flex: 0.9; font-family: monospace; }
.pt-pct { flex: 0.7; font-family: monospace; text-align: right; padding-right: 16px; }
.pt-dte { flex: 0.7; color: var(--text-muted); text-align: right; }

.pri-badge {
    font-size: 11px; font-weight: 700; padding: 2px 10px;
    border-radius: 12px; background: rgba(34,197,94,0.15); color: var(--accent);
    display: inline-block;
}

/* GuacTracker-style detail modal */
.gt-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.gt-modal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.gt-pnl-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.gt-pnl-label { font-size: 14px; color: var(--text-muted); }
.gt-pnl-right { text-align: right; }
.gt-pnl-val { font-size: 22px; font-weight: 800; display: block; }
.gt-pnl-pct { font-size: 14px; font-weight: 600; }

.gt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.gt-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.gt-cell-icon { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.gt-cell-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.gt-cell-val { font-size: 15px; font-weight: 700; }

.gt-modal-actions {
    display: flex;
    gap: 10px;
}
.gt-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.15s;
}
.gt-btn-edit { background: var(--bg); color: var(--text); }
.gt-btn-edit:hover { border-color: var(--accent); }
.gt-btn-close { background: var(--bg); color: var(--text); }
.gt-btn-close:hover { border-color: var(--yellow); }
.gt-btn-delete { background: var(--red); color: white; border-color: var(--red); }
.gt-btn-delete:hover { opacity: 0.85; }

/* Detail overlay */
.pos-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.pos-overlay-content {
    max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
    border-radius: 16px;
}

/* Portfolio (old, keep for compat) */
.portfolio-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
}

.pos-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.15s;
}

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

.pos-ticker {
    font-size: 20px;
    font-weight: 800;
}

.pos-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    margin-left: 6px;
    vertical-align: middle;
}

.pos-status-badge {
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

.pos-pnl { text-align: right; }
.pos-pnl-value { font-size: 22px; font-weight: 800; }
.pos-pnl-pct { font-size: 13px; font-weight: 600; }

.pos-card-body { margin-bottom: 12px; }

.pos-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(42, 45, 58, 0.4);
}
.pos-row:last-child { border-bottom: none; }

.pos-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pos-val { font-weight: 600; }

.pos-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pos-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    transition: all 0.15s;
}
.pos-btn:hover { border-color: var(--text-muted); }

.pos-btn-close {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--green);
    color: var(--green);
}
.pos-btn-close:hover { background: rgba(34, 197, 94, 0.2); }

.pos-btn-roll {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--blue);
    color: var(--blue);
}
.pos-btn-roll:hover { background: rgba(59, 130, 246, 0.2); }

.pos-btn-del {
    margin-left: auto;
    color: var(--red);
    border-color: transparent;
    background: transparent;
}
.pos-btn-del:hover { background: rgba(239, 68, 68, 0.1); }

/* Responsive — old rules removed, see bottom of file for full mobile CSS */
@media (max-width: 768px) {
    .cat-columns { grid-template-columns: 1fr; }
    .summary-bar { flex-direction: column; gap: 16px; }
    .strike-card { min-width: 180px; }
}

.port-stat-editable { cursor: pointer; transition: border-color 0.2s; }
.port-stat-editable:hover { border-color: var(--accent) !important; }

/* Covered Call Analyzer */
.cc-header { margin-bottom: 20px; }
.cc-header h2 { font-size: 22px; font-weight: 700; }

.cc-position-overview { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.cc-pos-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; }
.cc-pos-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.cc-pos-item { flex: 1; min-width: 120px; }
.cc-pos-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; }
.cc-pos-value { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cc-shares-control { display: flex; align-items: center; gap: 8px; }
.cc-shares-val { font-size: 28px; font-weight: 700; min-width: 50px; text-align: center; }
.cc-entry-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.cc-exp-section { margin-bottom: 16px; }
.cc-exp-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.cc-strike-card { min-width: 150px !important; }
.cc-strike-details { margin-top: 12px; }
.cc-sd-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 13px; }
.cc-returns { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

.cc-exit-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 20px; }
.cc-exit-title { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 20px; }
.cc-exit-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.cc-exit-item { flex: 1; min-width: 180px; text-align: center; }
.cc-exit-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; }
.cc-exit-value { font-size: 24px; font-weight: 700; }
.cc-exit-pct { font-size: 14px; font-weight: 600; opacity: 0.8; }
.cc-exit-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cc-exit-total { border-left: 2px solid var(--accent); padding-left: 20px; }
.cc-exit-total-val { font-size: 28px; }

/* LEAPS Analyzer */
.leaps-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.leaps-ticker { font-size: 28px; font-weight: 800; }
.leaps-price { font-size: 22px; color: var(--text-muted); }
.leaps-iv-badge { font-size: 13px; background: rgba(34,197,94,0.15); color: var(--accent); padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.leaps-badge-sm { display: block; font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.leaps-dte-big { display: block; font-size: 20px; font-weight: 700; }

.leaps-strike-header { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.leaps-strike-cards { display: flex; gap: 16px; margin-bottom: 24px; }
.leaps-strike-card { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s; }
.leaps-strike-card:hover { border-color: var(--text-muted); }
.leaps-strike-active { border-color: var(--accent) !important; background: rgba(34,197,94,0.05); }
.leaps-sc-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 2px; }
.leaps-sc-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.leaps-sc-strike { font-size: 32px; font-weight: 800; }
.leaps-sc-cost { font-size: 18px; font-weight: 600; margin-top: 4px; }

.leaps-projected { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.leaps-projected-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.leaps-stats-row { display: flex; gap: 16px; flex-wrap: wrap; }
.leaps-stat { flex: 1; min-width: 120px; }
.leaps-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; }
.leaps-stat-val { font-size: 22px; font-weight: 700; }

.leaps-grid-section { margin-bottom: 24px; }
.leaps-grid-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.leaps-grid-toggle { display: flex; gap: 4px; }
.leaps-toggle-btn { font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer; color: var(--text-muted); transition: all 0.2s; }
.leaps-toggle-btn.active { background: var(--accent); color: var(--bg); font-weight: 600; }
.leaps-toggle-btn:hover:not(.active) { color: var(--text); }

.leaps-grid-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); }
.leaps-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.leaps-grid th { background: var(--bg-card); padding: 10px 8px; font-size: 12px; color: var(--text-muted); font-weight: 600; text-align: center; position: sticky; top: 0; }
.leaps-grid td { padding: 8px 6px; border-top: 1px solid rgba(255,255,255,0.05); white-space: nowrap; }
.leaps-grid-price { font-weight: 700; font-size: 14px; padding-left: 12px !important; }
.leaps-grid-pct { font-weight: 600; }
.leaps-current-row td { border-top: 2px solid var(--accent) !important; border-bottom: 2px solid var(--accent) !important; }

/* LEAPS Position Size */
.leaps-pos-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.leaps-pos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 600; }
.leaps-pos-pct { color: var(--accent); font-size: 14px; }

.leaps-slider-wrap { margin-bottom: 20px; }
.leaps-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--green), var(--yellow), var(--red)); border-radius: 4px; outline: none; cursor: pointer; }
.leaps-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: white; border: 2px solid var(--accent); cursor: pointer; }
.leaps-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: white; border: 2px solid var(--accent); cursor: pointer; }
.leaps-slider-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 600; }

.leaps-qty-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.leaps-qty-left { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.leaps-qty-control { display: flex; align-items: center; gap: 6px; }
.leaps-qty-val { font-size: 24px; font-weight: 700; min-width: 30px; text-align: center; }
.leaps-save-btn { padding: 10px 20px !important; font-size: 14px !important; font-weight: 600 !important; }

.leaps-qty-stats { display: flex; gap: 24px; }
.leaps-qs { text-align: center; }
.leaps-qs-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; margin-bottom: 4px; }
.leaps-qs-val { font-size: 20px; font-weight: 700; }
.leaps-qs-sub { font-size: 12px; color: var(--text-muted); }

.port-stat-highlight { border-color: var(--accent) !important; background: rgba(34,197,94,0.05); }

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Sidebar → bottom nav */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: 60px;
        flex-direction: row;
        z-index: 1000;
        padding: 0;
        border-right: none;
        border-top: 1px solid var(--border);
    }
    .sidebar-logo { display: none; }
    .sidebar-nav {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        height: 100%;
    }
    .nav-item {
        flex-direction: column;
        font-size: 11px;
        gap: 2px;
        padding: 6px 12px;
    }
    .nav-item .icon { font-size: 20px; }

    /* Main content */
    .main {
        margin-left: 0;
        padding: 16px 12px 80px 12px;
    }

    /* Page titles */
    .page-title { font-size: 22px; }
    .page-subtitle { font-size: 13px; }

    /* Tabs */
    .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 8px; }
    .tab { font-size: 12px; padding: 8px 12px; white-space: nowrap; }

    /* Search bar */
    .search-bar { flex-direction: column; }
    .search-bar input { font-size: 16px; }
    .search-bar button { width: 100%; }

    /* Dashboard columns */
    .cat-columns { flex-direction: column; }
    .cat-column { min-width: 100%; }

    /* Scan results */
    .scan-ticker-bar { flex-direction: column; gap: 12px; }
    .scan-badges { flex-wrap: wrap; }
    .summary-bar { flex-wrap: wrap; gap: 12px; }
    .summary-item { min-width: 45%; }

    /* Expiration tabs */
    .exp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Strike cards */
    .strike-cards { scroll-snap-type: x mandatory; }
    .strike-card { min-width: 260px; scroll-snap-align: center; }

    /* Portfolio stats */
    .port-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .port-stat-card { padding: 14px; }
    .psc-value { font-size: 20px; }

    /* Portfolio table */
    .pos-table { font-size: 12px; overflow-x: auto; }
    .pos-table-head { display: none; }
    .pos-table-row {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        gap: 4px;
    }
    .pt-col { font-size: 13px; }
    .pt-ticker { font-size: 15px; width: 100%; }
    .pt-strat, .pt-qty { display: inline; }

    /* Portfolio tabs */
    .port-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .port-tab { white-space: nowrap; font-size: 13px; }

    /* Position filter bar */
    .pos-filters-bar { flex-wrap: wrap; }

    /* CC Analyzer */
    .cc-pos-grid { flex-direction: column; gap: 12px; }
    .cc-exit-grid { flex-direction: column; }
    .cc-exit-total { border-left: none; border-top: 2px solid var(--accent); padding-left: 0; padding-top: 16px; }

    /* LEAPS */
    .leaps-header { flex-wrap: wrap; }
    .leaps-strike-cards { flex-direction: column; }
    .leaps-stats-row { flex-wrap: wrap; gap: 12px; }
    .leaps-stat { min-width: 45%; }
    .leaps-qty-row { flex-direction: column; }
    .leaps-qty-stats { flex-wrap: wrap; gap: 16px; justify-content: center; }
    .leaps-grid-wrap { max-height: 400px; overflow: auto; }
    .leaps-grid { font-size: 11px; }
    .leaps-grid th, .leaps-grid td { padding: 6px 4px; }

    /* Modals */
    .pos-overlay-content { width: 95%; max-width: 95%; margin: 10px; }
    .add-trade-modal { padding: 16px; }
    .atm-row { flex-direction: column; }
    .atm-half { width: 100%; }

    /* Goal card */
    .goal-card { padding: 16px; }

    /* Closed trade summary */
    .pos-summary-row { flex-wrap: wrap; }
    .pos-summary-card { min-width: 45%; }

    /* Analytics */
    .analytics-grid { grid-template-columns: 1fr 1fr !important; }

    /* Safe area for notch phones */
    body { padding-top: env(safe-area-inset-top); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 400px) {
    .port-stats-grid { grid-template-columns: 1fr !important; }
    .analytics-grid { grid-template-columns: 1fr !important; }
    .summary-item { min-width: 100%; }
    .pos-summary-card { min-width: 100%; }
}

/* === Coaching Insights v3 — polished === */
.ci-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 28px 0 14px;
}
.ci-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 20px 0 10px;
    opacity: 0.85;
}
.ci-subhead-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.ci-dot-perf { background: #3b82f6; }
.ci-dot-alert { background: #e0a800; }

.ci-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 880px) {
    .ci-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ribbon — clean strip across the top */
.ci-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 6px;
}
.ci-rib-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}
.ci-rib-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.08);
}
.ci-rib-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.ci-rib-val {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.ci-rib-dim {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Cards — softer, with hover lift */
.ci-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    border-left-width: 3px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ci-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.13);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.ci-card.ci-warn    { border-left-color: #e0a800; }
.ci-card.ci-info    { border-left-color: #3b82f6; }
.ci-card.ci-action  { border-left-color: var(--accent, #06b6d4); }
.ci-card.ci-success { border-left-color: var(--green, #10b981); }
.ci-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.95;
}
.ci-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.ci-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--text, #fff);
}
.ci-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.ci-desc strong { color: var(--text, #fff); font-weight: 600; }
.ci-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ci-bigval {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text, #fff);
    line-height: 1;
    white-space: nowrap;
}
.ci-subtitle-soft {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: -4px;
    margin-bottom: 14px;
}

/* Trade History rows (Analytics tab) */
.th-row {
    display: grid;
    grid-template-columns: 110px 70px 70px 1fr auto 90px;
    gap: 10px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.th-row:last-child { border-bottom: none; }
.th-row-open { background: rgba(16,185,129,0.04); }
.th-date { color: var(--text-muted); font-size: 12px; }
.th-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    text-align: center;
}
.th-badge-open {
    background: rgba(16,185,129,0.18);
    color: var(--green, #10b981);
}
.th-ticker { font-weight: 700; font-size: 14px; }
.th-contract {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-muted);
}
.th-meta { font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; }
.th-pnl { font-weight: 700; font-size: 14px; text-align: right; white-space: nowrap; }
.th-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
}
.th-list { max-height: 520px; overflow-y: auto; }
@media (max-width: 720px) {
    .th-row {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
            "date badge ticker pnl"
            "contract contract contract meta";
        row-gap: 4px;
    }
    .th-date { grid-area: date; }
    .th-badge { grid-area: badge; }
    .th-ticker { grid-area: ticker; }
    .th-contract { grid-area: contract; }
    .th-meta { grid-area: meta; text-align: left; }
    .th-pnl { grid-area: pnl; }
}
.ci-dim {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
}
.ci-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: -0.2px;
}

/* Metric rows inside cards (Win Rate, Avg Hold) */
.ci-metric-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: baseline;
}
.ci-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ci-metric-val {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--text, #fff);
}
.ci-metric-unit {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 2px;
}
.ci-metric-lbl {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

/* Best/worst trade rows */
.ci-bwlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ci-bw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.ci-bw-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.ci-bw-best  { background: rgba(16,185,129,0.18); color: var(--green, #10b981); }
.ci-bw-worst { background: rgba(239,68,68,0.18); color: #ef4444; }
.ci-bw-trade {
    flex: 1;
    color: var(--text, #fff);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ci-bw-pnl {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
}

/* Goal progress bar */
.ci-bar {
    margin-top: 4px;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
}
.ci-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* ---------------------------------------------------------------------------
   Ripster cloud pills (3 daily + 3 weekly) under ticker headers in option-lab
   --------------------------------------------------------------------------- */
.cloud-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cloud-pills-empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}
.cloud-pills-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    margin-right: 2px;
}
.cloud-pills-sep {
    color: var(--text-muted);
    opacity: 0.4;
    margin: 0 2px;
}
.cloud-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.3;
    cursor: help;
    white-space: nowrap;
}
.cloud-pill-bull {
    background: var(--green-bg);
    color: var(--green);
    border-color: rgba(34, 197, 94, 0.35);
}
.cloud-pill-bear {
    background: var(--red-bg);
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.35);
}
.cloud-pill-neutral {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.08);
}
.cloud-pill-na {
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.08);
    opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Option-Lab Highlights Row (Safest Discount / Lowest RSI / Top 30D Discount)
   --------------------------------------------------------------------------- */
.highlights-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
}
@media (max-width: 900px) {
    .highlights-row { grid-template-columns: 1fr; }
}
.highlight-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--text-muted);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.highlight-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%);
    border-color: rgba(255,255,255,0.12);
}
.highlight-loading,
.highlight-empty {
    cursor: default;
    opacity: 0.7;
}
.highlight-loading:hover,
.highlight-empty:hover {
    transform: none;
}
.highlight-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 600;
}
.highlight-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 2px;
}
.highlight-ticker {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}
.highlight-value {
    font-size: 18px;
    font-weight: 600;
}
.highlight-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.highlight-empty-msg {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}
.highlight-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.highlight-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
}
.tag-bull-cloud {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.35);
}
.tag-bear-cloud {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.35);
}
.tag-risk {
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.3);
}

/* ---------------------------------------------------------------------------
   Candlestick Analyzer
   --------------------------------------------------------------------------- */
.ca-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.ca-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ca-section-sub {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
}
.ca-builder-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 800px) {
    .ca-builder-grid { grid-template-columns: 1fr; }
}
.ca-candle-wrap {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 480px;
}
.ca-candle-wrap svg.ca-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    user-select: none;
}
.ca-sentiment-pill {
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.ca-bull-pill {
    background: rgba(38,217,122,0.18);
    color: #26d97a;
    border: 1px solid rgba(38,217,122,0.4);
}
.ca-bear-pill {
    background: rgba(239,68,68,0.18);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.4);
}
.ca-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ca-pattern-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-align: center;
}
.ca-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}
.ca-preset-chip {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.ca-preset-chip:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.ca-breakdown-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-top: 8px;
    margin-bottom: 4px;
}
.ca-bd-row {
    margin-bottom: 10px;
}
.ca-bd-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
}
.ca-bd-name { font-weight: 600; }
.ca-bd-val { font-size: 12px; font-weight: 600; }
.ca-bd-tag {
    margin-left: 6px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: lowercase;
}
.ca-bd-tag.ca-bull { background: rgba(38,217,122,0.18); color: #26d97a; }
.ca-bd-tag.ca-bear { background: rgba(239,68,68,0.18); color: #ef4444; }
.ca-bd-bar {
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}
.ca-bd-fill {
    height: 100%;
    transition: width 0.15s;
    border-radius: 3px;
}
.ca-bd-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.ca-bd-totals {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.ca-bd-totals > div { display: flex; gap: 8px; }
.ca-bd-totals span { color: var(--text-muted); }
.ca-bd-totals b { color: var(--text); font-weight: 700; }
.ca-overall-title {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.ca-overall-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #26d97a 100%);
    margin: 6px 0 4px;
}
.ca-overall-marker {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.ca-overall-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
}
.ca-overall-pct {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
/* Loader row */
.ca-loader-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ca-loader-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ca-loader-field label {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.ca-loader-field input {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    min-width: 140px;
}
.ca-load-btn {
    background: var(--accent);
    color: #0a0e16;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    height: 36px;
}
.ca-load-btn:hover { filter: brightness(1.1); }
.ca-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
    font-size: 13px;
}
/* 3-up real-candle grid */
.ca-real-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) {
    .ca-real-grid { grid-template-columns: 1fr; }
}
.ca-real-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.ca-real-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.ca-real-tf {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent);
}
.ca-real-date {
    font-size: 11px;
    color: var(--text-muted);
}
.ca-real-bars {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 2px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
}
.ca-real-candle {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.ca-real-candle svg.ca-svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}
.ca-real-ohlc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    font-size: 11px;
}
.ca-real-ohlc > div { display: flex; flex-direction: column; align-items: center; }
.ca-real-ohlc span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
/* Education cards */
.ca-edu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1100px) {
    .ca-edu-grid { grid-template-columns: 1fr; }
}
.ca-edu-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 8px;
    padding: 16px;
}
.ca-edu-card ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text); }
.ca-edu-card li { margin-bottom: 8px; line-height: 1.45; }
.ca-edu-card b { color: var(--text); }
.ca-edu-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}
.ca-edu-bull { border-left-color: #26d97a; }
.ca-edu-bear { border-left-color: #ef4444; }
.ca-edu-key  { border-left-color: #fbbf24; }
.ca-takeaway {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ca-takeaway-icon { font-size: 22px; }
.ca-takeaway-title { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ca-takeaway div:not(.ca-takeaway-icon) { font-size: 12px; color: var(--text); line-height: 1.5; }
.ca-handle:hover { filter: brightness(1.2); }

/* Candle Analyzer — ticker info strip + auto-pattern badge */
.ca-info-strip {
    margin-bottom: 16px;
    padding: 10px 16px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    width: 100%;
}
.ca-info-name {
    font-size: 14px;
    color: var(--text);
    line-height: 1.3;
    flex: 0 1 auto;
    margin-right: 10px;
}
.ca-info-name b {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    margin-right: 4px;
}
.ca-info-name span {
    color: var(--text-muted);
    font-size: 12px;
}
.ca-info-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: baseline;
    flex: 1 1 auto;
}
.ca-info-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ca-info-cell span {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.ca-info-cell b {
    font-size: 13px;
    color: var(--text);
    font-weight: 700;
}
.ca-info-cell {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
}
.ca-info-up   { color: #26d97a !important; }
.ca-info-down { color: #ef4444 !important; }

.ca-real-pattern {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 8px;
    align-self: center;
}
.ca-real-pattern-none {
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-color: var(--border);
    font-weight: 600;
}