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

:root {
    --bg0: #0b0f17; --bg1: #131924; --bg2: #1a2232; --bg3: #243044;
    --border: #2a3a50; --text0: #e8edf5; --text1: #b0bec5; --text2: #607080;
    --up: #26a69a; --down: #ef5350; --warn: #f0b429; --accent: #3d7eff;
    --r: 6px; --sidebar: 260px; --right: 320px;
}

html[dir="rtl"] { font-family: 'Segoe UI', Tahoma, sans-serif; }
html[dir="ltr"] { font-family: 'Segoe UI', sans-serif; }

body { background: var(--bg0); color: var(--text1); font-size: 13px;
       height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ── Header ── */
#header {
    background: var(--bg1); border-bottom: 1px solid var(--border);
    height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}
.logo { font-weight: 700; font-size: 14px; color: var(--text0); }

.ticker { display: flex; gap: 18px; flex: 1; align-items: center; }
.ti { display: flex; gap: 5px; align-items: baseline; }
.tl { color: var(--text2); font-size: 11px; }
.tv { font-weight: 600; color: var(--text0); }
.tv.up { color: var(--up); }
.tv.down { color: var(--down); }

.hc { display: flex; gap: 7px; align-items: center; }

/* ── Strategy bar ── */
#strategy-bar {
    background: var(--bg1); border-bottom: 1px solid var(--border);
    height: 38px; padding: 0 14px; display: flex; align-items: center;
    gap: 4px; flex-shrink: 0; overflow-x: auto;
}
.bar-label { color: var(--text2); font-size: 11px; white-space: nowrap; }
#regime-suggest { font-size: 10px; font-weight: 600; color: var(--accent);
                  background: var(--bg3); border: 1px solid var(--accent)44;
                  padding: 2px 8px; border-radius: 4px; white-space: nowrap; margin-right: auto; }
#strategy-tabs { display: flex; gap: 4px; }
.tab {
    background: transparent; border: 1px solid transparent; color: var(--text2);
    padding: 3px 11px; border-radius: var(--r); cursor: pointer; font-size: 12px;
    white-space: nowrap; transition: .15s;
}
.tab:hover  { background: var(--bg2); color: var(--text1); }
.tab.active { background: var(--bg2); border-color: var(--border); color: var(--text0); }
.tab.inactive { opacity: .4; }
.tab.add-tab  { color: var(--accent); border-color: var(--accent)66; }

.tab-wrap { display: flex; align-items: center; border-radius: var(--r);
            border: 1px solid transparent; overflow: hidden; }
.tab-wrap.active { background: var(--bg2); border-color: var(--border); }
.tab-wrap .tab   { border: none; border-radius: 0; }
.tab-wrap .tab-edit {
    background: transparent; border: none; color: var(--text2);
    padding: 3px 6px; cursor: pointer; font-size: 12px; transition: .15s;
    display: none;
}
.tab-wrap:hover .tab-edit { display: inline-block; }
.tab-wrap .tab-edit:hover { color: var(--accent); background: var(--bg3); }
.tab-wrap.tab-alert { animation: tabPulse 1s ease 3; border-color: var(--warn); }
@keyframes tabPulse { 0%,100% { border-color: var(--border); } 50% { border-color: var(--warn); box-shadow: 0 0 8px var(--warn)44; } }

/* ── Main ── */
#main { flex: 1; display: flex; overflow: hidden; }

/* ── Left sidebar ── */
#left { width: var(--sidebar); background: var(--bg1); border-inline-end: 1px solid var(--border);
        flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; }

.panel-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--text2); padding: 9px 12px 7px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; display: flex; align-items: center;
}

/* ── Collapsible panels ── */
.panel-title.collapsible {
    cursor: pointer; user-select: none; justify-content: space-between;
}
.panel-title.collapsible:hover { background: var(--bg2); }
.panel-title.collapsible::after {
    content: '▾'; color: var(--text2); font-size: 11px;
    transition: transform .18s; flex-shrink: 0; margin-inline-start: 6px;
}
.panel-title.collapsible.closed::after { transform: rotate(-90deg); }

.panel-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height .22s ease, opacity .18s;
    opacity: 1;
}
.panel-body.closed { max-height: 0; opacity: 0; }

/* ── Session Panel ── */
#session-panel {
    padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.sess-header { display: flex; align-items: center; gap: 7px; }
.sess-name   { font-weight: 700; font-size: 12px; min-width: 80px; }
.sess-bar    { flex: 1; height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.sess-fill   { height: 100%; border-radius: 99px; transition: width .4s; }
.sess-pct    { font-size: 10px; color: var(--text2); min-width: 28px; text-align: end; }
.sess-row    { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sess-lbl    { color: var(--text2); font-size: 10px; width: 10px; }
.sess-sep    { font-size: 10px; color: var(--text2); border-top: 1px solid var(--border); padding-top: 4px; margin-top: 1px; }
.sess-vs     { font-size: 11px; color: var(--text1); }

/* ── Delta Panel ── */
#delta-panel {
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
}
.delta-row   { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.delta-lbl   { color: var(--text2); font-size: 10px; min-width: 30px; }
.delta-ratio { margin-inline-start: auto; display: flex; gap: 3px; font-size: 11px; }
.delta-buybar { height: 3px; background: var(--down); border-radius: 99px; overflow: hidden; margin-top: 2px; }
.delta-buy-fill { height: 100%; background: var(--up); border-radius: 99px; transition: width .4s; }

/* ── Volume Profile Panel ── */
#vp-panel {
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
}
.vp-row   { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.vp-lbl   { color: var(--text2); font-size: 10px; min-width: 30px; }
.vp-val   { font-weight: 600; }
.vp-nodes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 10px; }
.vp-node  { padding: 1px 5px; background: var(--bg3); border-radius: 3px; }

/* ── Volatility Panel ── */
#volatility-panel {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; display: flex; flex-direction: column; gap: 5px;
}
.vol-regime       { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.vol-regime-label { font-size: 11px; color: var(--text2); }
.vol-regime-val   { font-size: 13px; font-weight: 700; }
.vol-regime-score { font-size: 11px; margin-inline-start: auto; }
.vol-row  { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.vol-lbl  { color: var(--text2); font-size: 10px; min-width: 30px; }
.vol-val  { font-weight: 600; color: var(--text0); }
.vol-pct  { font-size: 10px; margin-inline-start: auto; }
.vol-bar-wrap  { height: 3px; background: var(--bg3); border-radius: 99px; overflow: hidden; margin-bottom: 2px; }
.vol-bar-fill  { height: 100%; border-radius: 99px; transition: width .4s; }
.vol-bar-fill.up   { background: var(--up); }
.vol-bar-fill.down { background: var(--down); }
.vol-bar-fill.warn { background: var(--warn); }

#overview-panel { padding: 8px; display: flex; flex-direction: column; gap: 7px;
                  max-height: 270px; overflow-y: auto; }

.tf-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 9px; }
.tf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.tf-name { font-weight: 700; font-size: 11px; color: var(--accent); }
.badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }
.badge.up    { background: #26a69a22; color: var(--up); }
.badge.down  { background: #ef535022; color: var(--down); }
.badge.range { background: #f0b42922; color: var(--warn); }
.tf-rows { display: flex; flex-direction: column; gap: 4px; }
.tf-row  { display: flex; justify-content: space-between; font-size: 11px; }
.tf-row span:first-child { color: var(--text2); }
.up   { color: var(--up); }
.down { color: var(--down); }
.mute { color: var(--text2); }

/* ── Center ── */
#center { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#chart-toolbar {
    background: var(--bg1); border-bottom: 1px solid var(--border);
    padding: 6px 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.zone-btn-on  { background: #26a69a22; border: 1px solid #26a69a88; color: #26a69a; font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.zone-btn-off { background: transparent; border: 1px solid var(--border); color: var(--text2); font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.zone-btn-on:hover  { background: #26a69a33; }
.zone-btn-off:hover { background: var(--bg3); }
#charts-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#price-chart  { flex: 1; min-height: 0; }
#volume-chart { border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── Right sidebar ── */
#right { width: var(--right); background: var(--bg1); border-inline-start: 1px solid var(--border);
         flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }

#analysis-controls {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.ctrl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#strategy-name { font-weight: 600; color: var(--accent); font-size: 12px; flex: 1;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Pre-Score Panel ── */
#pre-score-panel {
    padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ps-header  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ps-label   { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text2); flex: 1; }
.ps-score   { font-size: 18px; font-weight: 700; }
.ps-dir     { font-size: 11px; font-weight: 700; padding: 2px 8px; background: var(--bg2); border-radius: 3px; }
.ps-bar-wrap { height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.ps-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.ps-details  { font-size: 11px; }
.ps-details summary { color: var(--accent); cursor: pointer; padding: 2px 0; font-size: 11px; }
.ps-table    { width: 100%; border-collapse: collapse; margin-top: 5px; }
.ps-table td { padding: 2px 3px; vertical-align: top; }
.ps-rule     { color: var(--text1); min-width: 110px; }
.ps-note     { font-size: 10px; padding-inline-start: 6px; }

/* ── Statistical Validation Panel ── */
#stats-panel { border-bottom: 1px solid var(--border); }

.sv-module { padding: 7px 12px; border-bottom: 1px solid var(--bg2); }
.sv-module:last-child { border-bottom: none; }

.sv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.sv-name { font-size: 11px; font-weight: 600; color: var(--text1); flex-shrink: 0; }
.sv-fp   { font-family: monospace; font-size: 11px; font-weight: 700; color: var(--accent);
           background: var(--bg3); padding: 1px 6px; border-radius: 4px; letter-spacing: .5px; }
.sv-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
            background: var(--bg3); letter-spacing: .3px; }
.sv-badge.up   { color: var(--up); }
.sv-badge.down { color: var(--down); }
.sv-badge.warn { color: var(--warn); }
.sv-badge.mute { color: var(--text2); }

.sv-body { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-item { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.sv-lbl  { color: var(--text2); font-size: 10px; }

#analysis-panel { padding: 10px 12px; border-bottom: 1px solid var(--border);
                  overflow-y: auto; flex-shrink: 0; max-height: 45%; display: none; }

.analysis-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.setup-type   { flex: 1; font-weight: 600; color: var(--text0); font-size: 12px; }
.dir-badge    { font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 3px; background: var(--bg3); }
.dir-badge.up   { color: var(--up);   background: #26a69a22; }
.dir-badge.down { color: var(--down); background: #ef535022; }
.score-badge  { font-size: 18px; font-weight: 700; }

.rl-row   { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rl-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
            padding: 1px 7px; border-radius: 3px; background: var(--bg3); }
.rl-badge.up   { color: var(--up);   background: #26a69a18; }
.rl-badge.warn { color: var(--warn); background: #f0b42918; }
.rl-badge.down { color: var(--down); background: #ef535018; }

.reasoning { font-size: 11px; color: var(--text2); line-height: 1.5; padding: 7px 9px;
             background: var(--bg2); border-radius: var(--r); border-inline-start: 3px solid var(--accent); margin-bottom: 8px; }

.levels-grid { background: var(--bg2); border-radius: var(--r); padding: 7px 9px; margin-bottom: 7px; }
.lrow { display: flex; justify-content: space-between; align-items: flex-start;
        padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
.lrow:last-child { border-bottom: none; }
.lrow.green strong { color: var(--up); }
.lrow.red   strong { color: var(--down); }
.entry-row  strong { color: var(--accent); }

/* P&L Summary */
.pnl-summary { background: var(--bg2); border-radius: var(--r); padding: 7px 9px; margin-bottom: 7px;
               display: flex; flex-direction: column; gap: 3px; }
.pnl-row  { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.pnl-r    { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 5px; font-weight: 700; }

/* Risk Grid — 4 columns */
.risk-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.rg-item   { background: var(--bg2); border-radius: var(--r); padding: 6px 7px; text-align: center; }
.rg-val    { font-size: 12px; font-weight: 700; color: var(--text0); }
.rg-lbl    { font-size: 9px; color: var(--text2); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }

.no-trade { background: var(--bg2); border-radius: var(--r); padding: 12px;
            color: var(--text2); text-align: center; font-size: 12px; margin-bottom: 8px; }

/* No Trade Reason Code */
.no-trade-reason { display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
    background: #ef535010; border: 1px solid #ef535030; border-radius: var(--r); padding: 5px 9px; }
.ntr-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; }
.ntr-code  { font-size: 11px; font-weight: 700; color: var(--down); font-family: monospace; letter-spacing: .03em; }

/* Setup State Badge */
.setup-state { font-size: 11px; font-weight: 600; padding: 5px 9px;
    border-radius: var(--r); margin-bottom: 7px; text-align: center; }
.setup-state.stale   { background: #f0b42918; color: var(--warn); border: 1px solid #f0b42940; }
.setup-state.invalid { background: #ef535018; color: var(--down); border: 1px solid #ef535040; }

/* Entry Condition Box */
.entry-condition-box { background: #f0b42910; border: 1px solid #f0b42935;
    border-radius: var(--r); padding: 8px 10px; margin-bottom: 8px; }
.ec-label { font-size: 10px; font-weight: 700; color: var(--warn);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.ec-text  { font-size: 11px; color: var(--text1); line-height: 1.5; margin-bottom: 6px; }
.ec-row   { display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; padding: 2px 0; border-top: 1px solid #f0b42920; margin-top: 3px; padding-top: 4px; }

.sc-name  { color: var(--text1); }
.sc-note  { font-size: 10px; padding-inline-start: 6px; }

.score-details { margin-bottom: 8px; }
.score-details summary { color: var(--accent); font-size: 11px; cursor: pointer; padding: 3px 0; }
.score-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 5px; }
.score-table th { color: var(--text2); text-align: start; padding: 3px; border-bottom: 1px solid var(--border); }
.score-table td { padding: 3px; border-bottom: 1px solid var(--bg2); vertical-align: top; }

.warn-box { background: #f0b42915; border: 1px solid #f0b42940; border-radius: var(--r); padding: 8px;
            font-size: 11px; color: var(--warn); }
.warn-box div { margin-bottom: 3px; }

#journal-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; gap: 8px; min-height: 170px; }
.journal-header { display: flex; justify-content: space-between; align-items: center; }

#journal-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; flex-shrink: 0; }
.stat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
        padding: 7px; text-align: center; }
.stat.up   { border-color: var(--up)44; }
.stat.down { border-color: var(--down)44; }
.sv { font-size: 14px; font-weight: 700; color: var(--text0); }
.sl { font-size: 10px; color: var(--text2); margin-top: 2px; }

#journal-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.je { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 7px 9px; }
.je-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.je-date  { color: var(--text2); font-size: 10px; }
.je-setup { flex: 1; font-size: 11px; color: var(--text0); }
.je-score { font-size: 11px; color: var(--text2); }
.je-btns  { display: flex; gap: 4px; flex-wrap: wrap; }
.je-btns button { font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border);
                   background: var(--bg3); color: var(--text1); cursor: pointer; }
.je-btns button:hover { color: var(--text0); }
.je-btns .btn-cancel { border-color: #607080; color: var(--text2); }
.je-btns .btn-cancel:hover { color: var(--text1); }
.je-result.cancelled { color: var(--text2); text-decoration: line-through; }

/* ── Journal Page Modal ── */
.jm-full { width: 92vw !important; max-width: 1150px !important; max-height: 88vh; padding: 0; gap: 0; overflow: hidden; }
.jm-header { display: flex; justify-content: space-between; align-items: center;
             padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.jm-header h3 { margin: 0; font-size: 14px; }
.jm-header-right { display: flex; gap: 8px; align-items: center; }
.jm-header-right select { background: var(--bg2); border: 1px solid var(--border); color: var(--text1);
                           font-size: 11px; padding: 3px 7px; border-radius: 4px; }
.jm-filter-tabs { display: flex; gap: 4px; padding: 9px 18px;
                  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.jm-tab { background: transparent; border: 1px solid var(--border); color: var(--text2);
          padding: 3px 11px; border-radius: 3px; cursor: pointer; font-size: 11px; transition: .15s; }
.jm-tab:hover { color: var(--text1); background: var(--bg3); }
.jm-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.jm-stats-row { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.jm-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 18px;
           border-right: 1px solid var(--border); gap: 1px; }
.jm-sv { font-size: 15px; font-weight: 700; }
.jm-sl { font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.jm-equity-wrap { padding: 8px 18px 4px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); }
.jm-equity-label { font-size: 9px; color: var(--text2); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; }
.jm-table-wrap { flex: 1; overflow-y: auto; }
.jm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.jm-table thead th { background: var(--bg2); color: var(--text2); padding: 7px 12px;
                     text-align: left; position: sticky; top: 0; z-index: 1;
                     border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; }
.jm-table tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.jm-table tbody tr:hover td { background: var(--bg3); }

.empty { color: var(--text2); text-align: center; padding: 20px; font-size: 12px; }

/* ── Buttons / Inputs ── */
.btn { border: none; border-radius: var(--r); cursor: pointer; font-size: 12px;
       padding: 6px 14px; font-weight: 500; transition: opacity .15s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover:not(:disabled) { opacity: .85; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-success   { background: var(--up); color: #fff; }
.btn-secondary { background: var(--bg3); color: var(--text1); border: 1px solid var(--border); }
.btn-sm { padding: 3px 9px; font-size: 11px; }

input, select, textarea {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
    color: var(--text0); padding: 6px 10px; font-size: 12px; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select { cursor: pointer; }

/* ── Modals ── */
.modal-bg { position: fixed; inset: 0; background: #00000088; display: none;
             align-items: center; justify-content: center; z-index: 1000; }
.modal-bg.open { display: flex; }
.modal { background: var(--bg1); border: 1px solid var(--border); border-radius: 10px;
         padding: 22px; width: 420px; max-width: 92vw; display: flex; flex-direction: column; gap: 13px; }
.modal h3 { color: var(--text0); font-size: 14px; }
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label { font-size: 11px; color: var(--text2); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Spinner / Toast ── */
#spinner { width: 14px; height: 14px; border: 2px solid var(--bg3); border-top-color: var(--accent);
           border-radius: 50%; animation: spin .7s linear infinite; display: none; }
#spinner.show { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
         padding: 10px 20px; border-radius: var(--r); font-size: 12px; z-index: 2000;
         display: none; max-width: 90vw; text-align: center; }
.toast.show  { display: block; }
.toast.error { background: #ef535033; border: 1px solid var(--down); color: var(--down); }
.toast.warn  { background: #f0b42933; border: 1px solid var(--warn); color: var(--warn); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 99px; }

/* ── Prompt Preview Modal ── */
.prev-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.prev-tabs   { display: flex; gap: 4px; }
.prev-tab    { border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
               border-radius: var(--r); padding: 4px 12px; font-size: 11px; cursor: pointer; transition: all .15s; }
.prev-tab:hover  { background: var(--bg3); color: var(--text1); }
.prev-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.prev-meta   { display: flex; justify-content: space-between; align-items: center;
               margin-bottom: 8px; font-size: 11px; }
.prev-tokens { font-family: monospace; }
#prev-text   { width: 100%; height: 360px; resize: vertical; font-family: monospace;
               font-size: 11px; line-height: 1.55; background: var(--bg2);
               border: 1px solid var(--border); border-radius: var(--r);
               color: var(--text1); padding: 10px; box-sizing: border-box; }

.toast.success { background: #26a69a33; border: 1px solid var(--up); color: var(--up); }

/* ── Wide Modal (Strategy Editor) ── */
.modal-wide { width: 640px; max-height: 88vh; }
.modal-scroll { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 11px; padding-bottom: 2px; }

.modal-section {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.modal-section-title {
    font-size: 10px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: .7px;
}

.risk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.risk-table th { color: var(--text2); text-align: start; padding: 4px 3px; border-bottom: 1px solid var(--border); font-size: 11px; }
.risk-table td { padding: 3px; }
.risk-table td input { padding: 3px 5px; }

/* ── Entry Detail Modal ── */
.ed-modal { width: 800px; max-width: 94vw; max-height: 90vh; padding: 0; gap: 0; overflow: hidden; }
.ed-header { display: flex; justify-content: space-between; align-items: flex-start;
             padding: 13px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ed-header-title { font-size: 14px; font-weight: 700; color: var(--text0); margin-bottom: 3px; }
.ed-header-date  { font-size: 11px; color: var(--text2); }
.ed-body-scroll  { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }

.ed-overview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.ed-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 4px; background: var(--bg3); color: var(--text1); }
.ed-badge.up   { color: var(--up); }
.ed-badge.down { color: var(--down); }
.ed-badge.cancelled { color: var(--text2); text-decoration: line-through; }

.ed-reasoning   { font-size: 12px; color: var(--text1); line-height: 1.65; }
.ed-entry-cond  { font-size: 11px; color: var(--text2); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--bg3); }
.ed-warn        { font-size: 11px; color: var(--warn); margin-top: 5px; }

.ed-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ed-score-item   { margin-bottom: 9px; }
.ed-score-head   { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ed-score-name   { font-size: 11px; color: var(--text1); text-transform: capitalize; }
.ed-score-val    { font-size: 11px; font-weight: 700; color: var(--text0); }
.ed-score-bar-bg { height: 4px; background: var(--bg3); border-radius: 2px; margin-bottom: 3px; }
.ed-score-bar    { height: 4px; border-radius: 2px; }
.ed-score-note   { font-size: 10px; color: var(--text2); line-height: 1.4; }

.ed-levels { display: flex; flex-direction: column; gap: 0; }
.ed-level-row { display: flex; justify-content: space-between; font-size: 12px;
                padding: 5px 0; border-bottom: 1px solid var(--bg3); }
.ed-level-row:last-child { border-bottom: none; }
.ed-level-row > span:first-child { color: var(--text2); }

.ed-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 10px; }
.ed-risk-grid > div { display: flex; flex-direction: column; gap: 2px; }
.ed-risk-grid span   { font-size: 10px; color: var(--text2); }
.ed-risk-grid strong { font-size: 13px; color: var(--text0); }
.ed-pnl-row { display: flex; justify-content: space-between; font-size: 12px;
              padding: 3px 0; border-top: 1px solid var(--bg3); }

.ed-kl-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-kl { font-size: 12px; padding: 2px 9px; background: var(--bg3); border-radius: 4px; }

.jm-table tbody tr { cursor: pointer; transition: background 0.1s; }
.jm-table tbody tr:hover { background: var(--bg2); }

.ind-grid { display: flex; flex-direction: column; gap: 10px; }
.ind-group { display: flex; flex-direction: column; gap: 5px; }
.ind-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text2); padding-bottom: 3px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.ind-group label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text1); cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.ind-group label:hover { background: var(--bg3); }
.ind-group input[type="checkbox"] { width: auto; cursor: pointer; accent-color: var(--accent); }

.toast.success { background: #26a69a33; border: 1px solid var(--up); color: var(--up); }