body{background:var(--bg);color:var(--text);font:14px/1.6 system-ui,sans-serif;min-height:100vh}

/* Site header */
.site-hdr{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;height:52px}
.logo{font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.02em;white-space:nowrap}

/* Header right */
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
#fetch-status{font-size:11px;color:var(--text3)}
#fetch-status.ok{color:var(--pos)} #fetch-status.err{color:var(--neg)}
.mkt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mkt-dot.open{background:var(--pos);box-shadow:0 0 6px var(--pos)} .mkt-dot.closed{background:var(--text3)}
.hdr-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);padding:5px 10px;font-size:12px;cursor:pointer}
.hdr-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Sticky price bar */
.price-bar{position:sticky;top:52px;z-index:99;background:var(--surface);border-bottom:1px solid var(--border2);display:grid;grid-template-columns:repeat(6,1fr)}
.pb-cell{padding:9px 12px;border-right:1px solid var(--border2)}
.pb-cell:last-child{border-right:none}
.pb-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.pb-price{font-size:16px;font-weight:700}
.pb-chg{font-size:10px}
.pos{color:var(--pos)} .neg{color:var(--neg)}
@media(max-width:700px){.price-bar{grid-template-columns:repeat(3,1fr)}}

/* Settlement warning */
.settle-banner{display:none;padding:8px 20px;font-size:12px;background:rgba(88,166,255,.08);border-bottom:1px solid rgba(88,166,255,.2);color:var(--accent)}
.settle-banner.show{display:block}

/* Main */
.main{max-width:1200px;margin:0 auto;padding:20px}
.two-col{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-lg)}
.sec-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.gap{margin-top:16px}

/* Regime */
.rr{display:grid;grid-template-columns:120px 1fr auto;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;align-items:center}
.rl{color:var(--text3);font-size:10px} .rv{font-weight:600} .rright{color:var(--text3);font-size:10px;text-align:right}
.rhdr{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:10px 0 4px;border-bottom:1px solid rgba(255,255,255,.08)}

/* Geo */
.geo-panel{padding:10px 14px;border-radius:var(--radius);border:1px solid rgba(239,83,80,.3);background:rgba(239,83,80,.06);display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tog-track{position:relative;width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.15);cursor:pointer;display:inline-block;flex-shrink:0;transition:background .2s}
.tog-thumb{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .2s;pointer-events:none}

/* Footer */
.footer{text-align:center;font-size:10px;color:var(--text3);padding:24px 0 32px;border-top:1px solid var(--border2);margin-top:32px}

/* Skeleton */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skel{background:var(--surface2);border-radius:4px;animation:pulse 1.5s ease-in-out infinite}

/* ── Strategy page header ── */
.hdr{display:flex;align-items:center;gap:12px;padding:0 24px;height:52px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.logo span{color:var(--text2);font-weight:400;font-size:12px;margin-left:6px}
.hdr-btn{text-decoration:none;display:inline-block}

/* ── DTE tabs ── */
.dte-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--surface);padding:0 24px;position:sticky;top:52px;z-index:99}
.dte-tab{padding:12px 20px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.dte-tab:hover{color:var(--text)}
.dte-tab.active{color:var(--text);border-bottom-color:var(--accent)}

/* Mobile */
@media(max-width:640px){
  .site-hdr{gap:8px;padding:0 12px;flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
  .logo{font-size:13px}
  .preset-pills{display:none}
  .hdr-right{gap:6px}
  .hdr-right #fetch-status{display:none}
  #mkt-lbl{display:none}
  .main{padding:12px}
  .price-bar{grid-template-columns:repeat(3,1fr)}
  .pb-price{font-size:13px}
  .params-grid{grid-template-columns:1fr 1fr}
  .conf-grid{grid-template-columns:1fr}
  .hdr{padding:0 12px;gap:8px}
  .hdr-right{gap:6px}
  .dte-tabs{padding:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .dte-tab{padding:10px 14px;font-size:12px}
}