/* ── Variables ── */
:root {
    --bg:     #0d1117;
    --bg2:    #161b22;
    --card:   #1c2128;
    --border: #30363d;
    --green:  #3fb950;
    --red:    #f85149;
    --yellow: #e3b341;
    --blue:   #58a6ff;
    --orange: #db6d28;
    --purple: #bc8cff;
    --cyan:   #39d0d8;
    --text:   #e6edf3;
    --muted:  #8b949e;
    --nav-h:  44px;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 13px; max-width: 100vw; overflow-x: clip; }
a { color: var(--blue); text-decoration: none; }
input, select, button { font-family: inherit; font-size: 12px; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Top Nav ── */
.top-nav {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-logo { font-size: 16px; font-weight: 900; letter-spacing: 1px; color: var(--text); margin-right: 12px; white-space: nowrap; }
.nav-logo span { color: #f0b429; }
.nav-link {
    padding: 5px 12px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    transition: .15s;
    white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-link.active { color: var(--blue); background: rgba(88,166,255,.1); }
.nav-sep { flex: 1; }
.nav-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Stats Bar ── */
.stats-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    position: sticky;
    top: var(--nav-h);
    z-index: 90;
}
.stats-bar::-webkit-scrollbar { display: none; }
.stat-box {
    background: var(--card);
    padding: 8px 14px;
    min-width: 105px;
    text-align: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}
.stat-box .lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; }
.stat-box .val { font-size: 18px; font-weight: 700; line-height: 1.15; margin-top: 1px; }
.stat-box .sub { font-size: 9px; color: var(--muted); margin-top: 1px; }
.stat-box.wide { min-width: 150px; }

/* ── Signal Badges ── */
.sig-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.sig-super-bull  { background: rgba(63,185,80,.25);  color: #3fb950; border: 2px solid #3fb950; font-weight:800; }
.sig-strong-bull { background: rgba(63,185,80,.15);  color: #3fb950; border: 1px solid #3fb950; }
.sig-buy-ce      { background: rgba(88,166,255,.15); color: var(--blue);   border: 1px solid var(--blue);   }
.sig-near-bull   { background: rgba(88,166,255,.1);  color: var(--cyan);   border: 1px solid var(--cyan);   }
.sig-range       { background: rgba(227,179,65,.15); color: var(--yellow); border: 1px solid var(--yellow); }
.sig-near-bear   { background: rgba(219,109,40,.12); color: var(--orange); border: 1px solid var(--orange); }
.sig-buy-pe      { background: rgba(248,81,73,.15);  color: var(--red);    border: 1px solid var(--red);    }
.sig-strong-bear { background: rgba(248,81,73,.2);   color: var(--red);    border: 1px solid var(--red);    }
.sig-super-bear  { background: rgba(248,81,73,.3);   color: #f85149; border: 2px solid #f85149; font-weight:800; }
.sig-sell        { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid var(--green);  }
.sig-volatile    { background: rgba(219,109,40,.15); color: var(--orange); border: 1px solid var(--orange); }
.sig-wait        { background: rgba(139,148,158,.1); color: var(--muted);  border: 1px solid var(--border); }

/* ── Trend pills ── */
.trend-pill { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.bullish    { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid rgba(63,185,80,.4);  }
.bearish    { background: rgba(248,81,73,.15);  color: var(--red);    border: 1px solid rgba(248,81,73,.4);  }
.volatile   { background: rgba(219,109,40,.15); color: var(--orange); border: 1px solid rgba(219,109,40,.4); }
.ranging    { background: rgba(227,179,65,.15); color: var(--yellow); border: 1px solid rgba(227,179,65,.4); }
.trending   { background: rgba(88,166,255,.15); color: var(--blue);   border: 1px solid rgba(88,166,255,.4); }

/* ── Controls bar ── */
.ctrl-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.ctrl-bar label { font-size: 11px; color: var(--muted); }
select.ctrl, input.ctrl {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 5px;
    outline: none;
    font-size: 12px;
}
select.ctrl:focus, input.ctrl:focus { border-color: var(--blue); }
.btn {
    padding: 5px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: .15s;
}
.btn-blue   { background: var(--blue);   color: #000; }
.btn-green  { background: var(--green);  color: #000; }
.btn-red    { background: var(--red);    color: #fff; }
.btn-ghost  { background: var(--card);   color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--blue); }
.btn:hover { opacity: .85; }

/* ── Indicator toggles ── */
.ind-toggles { display: flex; gap: 8px; align-items: center; }
.ind-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; font-weight: 600; }
.ind-toggle input { display: none; }
.ind-toggle .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ind-toggle .label { color: var(--muted); transition: .15s; }
.ind-toggle input:checked ~ .label { color: var(--text); }

/* ── Main layout ── */
.page-body  { display: flex; align-items: flex-start; }
.charts-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 700px; }
.chain-col  { width: 380px; border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }

/* ── Chart panels ── */
.chart-panel {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
}
.chart-panel-title {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-sig-mini {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 3px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    flex-wrap: wrap;
    min-height: 22px;
    background: rgba(0,0,0,.15);
}
.csm-chip {
    padding: 1px 7px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: .4px;
    font-size: 10px;
}
.csm-bull  { background: rgba(63,185,80,.2);   color: #3fb950; border: 1px solid rgba(63,185,80,.5); }
.csm-bear  { background: rgba(248,81,73,.2);  color: #f85149; border: 1px solid rgba(248,81,73,.5); }
.csm-sell  { background: rgba(188,140,255,.15); color: #bc8cff; border: 1px solid rgba(188,140,255,.4); }
.csm-wait  { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.csm-reason { color: var(--muted); font-size: 9px; }
.chart-panel-title .pricetag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.ce-tag { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid rgba(63,185,80,.3);  }
.pe-tag { background: rgba(248,81,73,.15);  color: var(--red);    border: 1px solid rgba(248,81,73,.3);  }
.str-tag{ background: rgba(88,166,255,.15); color: var(--blue);   border: 1px solid rgba(88,166,255,.3); }

/* ── Option Chain ── */
.chain-header-bar {
    padding: 6px 10px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chain-scroll { flex: 1; }
.chain-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.chain-table thead th {
    background: var(--bg2);
    padding: 5px 3px;
    text-align: center;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--border);
}
.chain-table thead .th-ce { color: var(--green); background: rgba(63,185,80,.04); }
.chain-table thead .th-pe { color: var(--red);   background: rgba(248,81,73,.04); }
.chain-table td { padding: 5px 3px; text-align: center; border-bottom: 1px solid rgba(48,54,61,.3); }
.chain-table tr:hover td { background: rgba(88,166,255,.04); }
.chain-table .atm-row td { background: rgba(227,179,65,.08) !important; }
.chain-table .atm-row td { border-top: 1px solid rgba(227,179,65,.4); border-bottom: 1px solid rgba(227,179,65,.4); }
.itm-ce { background: rgba(63,185,80,.05);  }
.itm-pe { background: rgba(248,81,73,.05);  }
.badge  { display: inline-block; font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-left: 2px; }
.badge-atm { background: var(--yellow);  color: #000; }
.badge-mp  { background: var(--orange);  color: #fff; }

/* ── Colors ── */
.green  { color: var(--green);  }
.red    { color: var(--red);    }
.yellow { color: var(--yellow); }
.orange { color: var(--orange); }
.blue   { color: var(--blue);   }
.purple { color: var(--purple); }
.muted  { color: var(--muted);  }

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.card h4 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.card .big-val { font-size: 22px; font-weight: 800; line-height: 1; }
.card .detail  { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.card .be-row  { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.be-up { background: rgba(63,185,80,.1); color: var(--green); border: 1px solid rgba(63,185,80,.3); padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.be-dn { background: rgba(248,81,73,.1); color: var(--red);   border: 1px solid rgba(248,81,73,.3); padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }

/* ── Strategy bar ── */
/* ── Bottom dock: strategy bar + power panel — full natural height, page scrolls ── */
.bottom-dock {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.strategy-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.strategy-bar::-webkit-scrollbar { display: none; }
.trend-help { display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);color:var(--muted);font-size:9px;cursor:help;margin-left:3px;font-weight:700;vertical-align:middle; }

/* ── Divider ── */
.divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }

/* ── Loading spinner ── */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── OI score dots ── */
.score-dots { display: flex; gap: 2px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.dot-on  { opacity: 1; }
.dot-off { opacity: .2; }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--bg2); padding: 8px 10px; text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid rgba(48,54,61,.4); font-size: 12px; }
.data-table tr:hover td { background: rgba(88,166,255,.03); }

/* ── P&L cells ── */
.pnl-pos { color: var(--green); font-weight: 700; }
.pnl-neg { color: var(--red);   font-weight: 700; }

/* ── Toast notifications ── */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    transition: opacity .3s;
}

/* ── No data placeholder ── */
.no-data { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 10px; color: var(--muted); text-align: center; }
.no-data .icon { font-size: 40px; }

/* ── Page layout ── */
.page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; padding: 16px; }

/* ── Market Commentary box ── */
#commentary-box {
    background: rgba(88,166,255,.06);
    border: 1px solid rgba(88,166,255,.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
}

/* ── Refresh countdown ── */
.refresh-counter { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Breeze status badge (controls bar) ── */
.breeze-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.breeze-on  { background: rgba(63,185,80,.15); color: var(--green); border: 1px solid rgba(63,185,80,.4); }
.breeze-off { background: rgba(219,109,40,.12); color: var(--orange); border: 1px solid rgba(219,109,40,.4); }
.dot-live   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
              box-shadow: 0 0 6px var(--green); animation: pulse-live 2s ease-in-out infinite; }
@keyframes pulse-live { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Settings page ── */
.settings-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.settings-section-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.settings-icon  { font-size: 18px; }
.settings-title { font-size: 15px; font-weight: 800; color: var(--text); }
.settings-badge {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-active   { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid rgba(63,185,80,.4);  }
.badge-warn     { background: rgba(227,179,65,.12);  color: var(--yellow); border: 1px solid rgba(227,179,65,.4); }
.badge-inactive { background: rgba(139,148,158,.1); color: var(--muted);  border: 1px solid var(--border); }
.settings-desc  { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.settings-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 4px;
}
.settings-form-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.settings-form-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 10px;
}
.settings-field { margin-bottom: 10px; }
.settings-field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.settings-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
}
.settings-input:focus { border-color: var(--blue); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .page-body { flex-direction: column; }
    .chain-col  { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}