:root{
  --bg:#181b21;
  --bg2:#1e222b;
  --bg3:#252a36;
  --border:#2e3547;
  --border2:#3a4460;
  --amber:#fbbf24;
  --amber2:#d97706;
  --green:#4ade80;
  --red:#f87171;
  --blue:#7dd3fc;
  --muted:#7a8aaa;
  --text:#e8edf8;
  --text2:#c4cfe8;
  --head:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:13px;}

/* HEADER */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;min-height:48px;
  background:var(--bg2);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.logo{font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--amber);text-transform:uppercase;}
.logo span{color:var(--text2);font-weight:300;}
.clock{color:var(--muted);font-size:11px;letter-spacing:.08em;}

/* NAV TABS */
nav{
  display:flex;gap:0;
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:0 24px;
}
.tab{
  padding:10px 20px;cursor:pointer;font-family:inherit;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--muted);border:none;background:none;
  border-bottom:2px solid transparent;transition:all .18s;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--amber);border-bottom-color:var(--amber);}
.tab .badge{
  display:inline-block;margin-left:6px;padding:1px 5px;
  font-size:9px;background:var(--border2);color:var(--muted);
  border-radius:2px;vertical-align:middle;
}
.tab.active .badge{background:var(--amber2);color:#000;}

/* NAV DROPDOWN */
.nav-dropdown{position:relative;display:flex;align-items:stretch;}
.nav-dropdown .dropdown-menu{
  display:none;position:absolute;top:100%;left:0;
  background:var(--bg2);border:1px solid var(--border);border-top:none;
  z-index:200;min-width:160px;padding:4px 0;
}
.nav-dropdown:hover .dropdown-menu{display:block;}
.dropdown-item{
  display:block;width:100%;padding:8px 16px;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;
  color:var(--muted);border:none;background:none;text-align:left;
  transition:all .18s;
}
.dropdown-item:hover{color:var(--text);background:var(--bg3);}
.dropdown-item.active{color:var(--amber);}

/* MAIN */
main{padding:24px;max-width:1400px;margin:0 auto;}
.section{display:none;}
.section.active{display:block;}

/* SECTION TITLE */
.section-title{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin-bottom:20px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.section-title::before{content:'▶';font-size:8px;}

/* PANELS */
.panel{background:var(--bg2);border:1px solid var(--border);padding:18px;margin-bottom:16px;}
.panel-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}

/* INPUTS */
.input-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
input[type=text]{
  background:var(--bg3);border:1px solid var(--border2);
  color:var(--head);font-family:inherit;font-size:14px;font-weight:500;
  padding:8px 12px;letter-spacing:.08em;text-transform:uppercase;
  width:140px;outline:none;transition:border-color .15s;
}
input[type=text]:focus{border-color:var(--amber);}
input[type=text]::placeholder{color:var(--muted);text-transform:uppercase;font-size:12px;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;font-family:inherit;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  cursor:pointer;border:1px solid;transition:all .15s;
}
.btn-primary{background:var(--amber);border-color:var(--amber);color:#000;}
.btn-primary:hover{background:var(--amber2);border-color:var(--amber2);}
.btn-primary:disabled{background:var(--border2);border-color:var(--border2);color:var(--muted);cursor:not-allowed;}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text2);}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);}

/* STATUS */
.status{font-size:11px;color:var(--muted);margin-top:10px;min-height:16px;letter-spacing:.04em;}
.status.ok{color:var(--green);}
.status.err{color:var(--red);}

/* TWO-COLUMN OPTIONS LAYOUT */
.options-layout{display:flex;gap:16px;align-items:flex-start;}
.exp-col{width:230px;flex-shrink:0;}
.chain-col{flex:1;min-width:0;}

/* WEEK GROUPS */
.week-group{margin-bottom:12px;}
.week-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.week-chips{display:flex;flex-direction:column;gap:4px;}

/* CHIPS */
.chip{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 10px;font-size:11px;letter-spacing:.06em;
  border:1px solid var(--border2);color:var(--text2);
  cursor:pointer;transition:all .12s;user-select:none;gap:10px;
}
.chip:hover{border-color:var(--amber);color:var(--amber);}
.chip.active{background:var(--amber);border-color:var(--amber);color:#000;font-weight:600;}
.chip .dte{font-size:9px;opacity:.65;letter-spacing:.04em;white-space:nowrap;}

/* TABLES */
.table-wrap{overflow-x:auto;margin-top:16px;}
table{width:100%;border-collapse:collapse;font-size:12px;}
thead tr{background:var(--bg3);border-bottom:1px solid var(--border2);}
th{padding:8px 10px;text-align:right;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
th:first-child{text-align:left;}
td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--border);color:var(--text);white-space:nowrap;}
td:first-child{text-align:left;}
tbody tr:hover{background:var(--bg3);}
tbody tr:nth-child(even){background:rgba(255,255,255,.02);}

/* POSITIONS LAYOUT */
.pos-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;}
.pos-upload-col{width:260px;flex-shrink:0;}
.pos-matrix-col{flex:1;min-width:0;}

/* MATRIX FILTER TABLE */
.matrix-wrap{overflow-x:auto;}
.matrix-tbl{border-collapse:collapse;font-size:11px;width:100%;}
.matrix-tbl th,.matrix-tbl td{
  padding:5px 10px;border:1px solid var(--border);
  text-align:right;white-space:nowrap;
}
.matrix-tbl thead th{
  background:var(--bg3);color:var(--text2);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:color .12s;
}
.matrix-tbl thead th:hover{color:var(--amber);}
.matrix-tbl thead th.sel{color:var(--amber);background:rgba(251,191,36,.08);}
.matrix-tbl thead th:first-child{text-align:left;cursor:default;}
.matrix-tbl tbody th{
  background:var(--bg3);color:var(--text2);font-size:10px;
  text-align:left;font-weight:500;cursor:pointer;
  transition:color .12s;letter-spacing:.04em;
}
.matrix-tbl tbody th:hover{color:var(--amber);}
.matrix-tbl tbody th.sel{color:var(--amber);background:rgba(251,191,36,.08);}
.matrix-tbl td{color:var(--text);font-size:11px;}
.matrix-tbl td.empty{color:var(--border2);}
.matrix-tbl tfoot td{
  background:var(--bg3);color:var(--text2);font-size:10px;
  font-weight:600;border-top:2px solid var(--border2);
}
.matrix-tbl tfoot td:first-child{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.metric-btn,.pc-metric-btn{
  padding:3px 10px;font-family:inherit;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;border:1px solid var(--border2);
  background:transparent;color:var(--muted);transition:all .12s;
}
.metric-btn:hover,.pc-metric-btn:hover{border-color:var(--amber);color:var(--amber);}
.metric-btn.active,.pc-metric-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(251,191,36,.08);}

/* TABLE */
.section-row td{background:var(--bg3)!important;color:var(--amber);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 10px;border-top:2px solid var(--border2);}
.subtotal-row td{background:rgba(251,191,36,.07)!important;color:var(--amber);font-weight:600;font-size:11px;border-top:1px solid var(--border2);}
.view-btn.active{border-color:var(--amber)!important;color:var(--amber)!important;}
.call-row td:first-child{color:var(--blue);}
.put-row td:first-child{color:var(--red);}
.atm{background:rgba(251,191,36,.09)!important;}

/* UPLOAD */
.upload-zone{
  border:1px dashed var(--border2);padding:32px;text-align:center;
  transition:border-color .15s;cursor:pointer;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--amber);}
.upload-zone p{color:var(--muted);font-size:11px;letter-spacing:.06em;margin-top:6px;}
.upload-icon{font-size:28px;margin-bottom:6px;}
input[type=file]{display:none;}

/* SPINNER */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* COMING SOON */
.coming-soon{text-align:center;padding:80px 20px;color:var(--muted);}
.coming-soon .big{font-size:32px;letter-spacing:.2em;color:var(--border2);margin-bottom:12px;}
.coming-soon p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;}

/* SCANNER */
.scanner-universe{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.univ-btn{
  padding:5px 14px;font-family:inherit;font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--border2);background:transparent;color:var(--text2);
  transition:all .15s;
}
.univ-btn:hover{border-color:var(--amber);color:var(--amber);}
.univ-btn.active{background:var(--amber);border-color:var(--amber);color:#000;}
.univ-btn[data-ticker="SPY"]{color:var(--amber);}

.scan-results{margin-top:4px;overflow-x:auto;}
.scan-expiry-block{margin-bottom:20px;}
.scan-expiry-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;padding-bottom:5px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.scan-expiry-label .near{color:var(--text2);font-size:11px;letter-spacing:.04em;}

/* Spread grid table */
.spread-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px;}
.spread-tbl th{
  padding:4px 6px;font-size:9px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:2px solid var(--border2);
  background:var(--bg3);white-space:nowrap;
}
.spread-tbl th.delta-head{color:var(--amber);text-align:center;border-left:2px solid var(--border2);min-width:120px;}
.spread-tbl th.sub-head{min-width:40px;}
.spread-tbl th.sub-head{color:var(--text2);text-align:right;border-left:1px solid var(--border);}
.spread-tbl th.sub-head:first-child{text-align:left;border-left:none;}
.spread-tbl td{
  padding:4px 6px;border-bottom:1px solid var(--border);
  vertical-align:top;white-space:nowrap;
}
.spread-tbl td.delta-col{border-left:2px solid var(--border2);}
.spread-tbl tbody tr:nth-child(even){background:rgba(255,255,255,.02);}
.spread-tbl tbody tr:hover{background:var(--bg3);}
.spread-combo{color:var(--head);font-weight:500;}
.spread-premium{color:var(--text2);text-align:right;}
.spread-ratio{text-align:right;}
.spread-delta{font-size:10px;color:var(--muted);text-align:right;}
.spread-tbl th.long-dated{background:#1e2a38!important;}
.spread-tbl td.long-dated{background:rgba(96,165,250,.04)!important;}
.spread-tbl tbody tr:nth-child(even) td.long-dated{background:rgba(96,165,250,.07)!important;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);}

/* butterfly arbitrage output table - highlight 3 rows w/ lowest error size */
.low-error-cell {
  border: 1px solid var(--amber) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}
.strategy-filter-btn.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(251, 191, 36, 0.08);
}
#ordersModal { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
#ordersModal table { width: 100%; border-collapse: collapse; font-size: 12px; }
#ordersModal th, #ordersModal td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
#ordersModal th { background: var(--bg3); color: var(--amber); }

/* ── TRADE IB TAB ─────────────────────────────────────────── */
.bw-ticker-list{display:flex;flex-direction:column;gap:6px;}
.bw-ticker-list .univ-btn{width:100%;text-align:left;padding:7px 10px;font-size:11px;}

/* ── STRATEGY TABS ── */
.strat-tab-bar{
  display:flex;flex-wrap:wrap;gap:0;
  border-bottom:1px solid var(--border);background:var(--bg3);
}
.strat-tab{
  padding:8px 14px;cursor:pointer;font-family:inherit;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--muted);border:none;background:none;
  border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;
}
.strat-tab:hover{color:var(--text);}
.strat-tab.active{color:var(--blue);border-bottom-color:var(--blue);}

.strat-form-panel{}

.field-label{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}

.form-input{
  width:100%;font-size:13px;padding:6px 8px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:3px;font-family:inherit;
}
.form-input:focus{outline:none;border-color:var(--blue);}

.pricing-tbl{
  width:100%;border-collapse:collapse;
  font-size:11px;font-family:'IBM Plex Mono',monospace;
}
.pricing-tbl th{
  text-align:right;color:var(--muted);font-weight:400;padding:2px 8px 4px;
}
.pricing-tbl th.leg-col{text-align:left;width:60px;padding-left:0;}
.pricing-tbl th.mid-col{color:var(--blue);}
.pricing-tbl td{
  text-align:right;padding:4px 8px;color:var(--text);
  border-top:1px solid var(--border);
}
.pricing-tbl td.leg-label{
  text-align:left;padding-left:0;
  color:var(--muted);font-size:10px;letter-spacing:.06em;
}
.pricing-tbl td.mid-val{color:var(--blue);font-weight:500;}

.net-price{font-size:15px;font-weight:500;font-family:'IBM Plex Mono',monospace;}
.net-green{color:var(--green);}
.net-red{color:var(--red);}

.tif-btn{border-color:var(--border2)!important;color:var(--muted)!important;}
.tif-btn.tif-active{border-color:var(--blue)!important;color:var(--blue)!important;}

.strat-form-body{display:flex;align-items:stretch;min-height:200px;}
.strat-inputs-col{
  flex:0 0 220px;padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;
}
.strat-inputs-col .field-label{margin-top:6px;}
.strat-inputs-col .field-label:first-child{margin-top:0;}
.strat-pricing-col{
  flex:1;min-width:0;padding:16px 18px;
  border-left:1px solid var(--border);background:var(--bg3);
}
.strat-btn-row{
  display:flex;gap:10px;align-items:center;
  padding:12px 18px;border-top:1px solid var(--border);
}

.net-summary{margin-top:14px;}
.net-sub{font-size:9px;color:var(--muted);margin-top:2px;}

.strat-desc{margin-top:14px;font-size:10px;color:var(--muted);line-height:1.6;}
/* IB Trade v2: E*TRADE bootstrap quotes shown muted until IB WS overrides */
.src-et{color:var(--muted)!important;}
.buy-word{color:var(--green);}
.sell-word{color:var(--red);}

.buy-btn{background:var(--green)!important;color:#000!important;font-weight:600;min-width:90px;}
.sell-btn{background:var(--red)!important;color:#fff!important;font-weight:600;min-width:90px;}

/* Strategy aggregate (NET) row */
.strat-agg-row td{
  border-top:2px solid var(--border2)!important;
  font-weight:600;color:var(--text2);
}
.strat-agg-row td.leg-label{color:var(--muted);font-size:9px;letter-spacing:.1em;}
.strat-agg-row td.mid-val{color:var(--amber)!important;font-size:12px;}
/* Arb butterfly combined NET row — stronger separator */
.af-arb-spacer td{border:none!important;padding:0!important;}
.af-arb-net-row td{border-top:2px solid var(--border2)!important;}
.af-arb-net-row td.leg-label{font-size:10px;letter-spacing:.08em;}