/* ══════════════════════════════════════════════════════════════════════
   layout.css — global reset + structural page assembly
   ══════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .topbar{background:var(--topbar-bg)}
[data-theme="dark"] .sidebar{box-shadow:2px 0 16px rgba(0,0,0,.35)}
[data-theme="dark"] select option{background:var(--bg4)}

/* theme toggle */
.theme-toggle{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);border-radius:var(--r2);
  color:var(--t3);cursor:pointer;position:relative;overflow:hidden;}
.theme-toggle:hover{color:var(--t1);border-color:var(--indigo-mid);background:var(--indigo-soft)}
.theme-toggle .mi{font-size:17px;position:absolute;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
.theme-toggle .icon-moon{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:0;transform:rotate(90deg) scale(.6)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}

*{transition-property:background-color,border-color,color,box-shadow;transition-duration:.2s;transition-timing-function:ease}
.nav-item,.tbtn,.ptool,.btn-fetch,.pg,.tog,.collapse-btn{transition:all .15s}
.theme-toggle .mi{transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s !important}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;font-size:106.25%;overflow-x:hidden}
body{min-height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);font-size:14px;overflow-x:hidden}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(ellipse 900px 600px at 15% 10%,rgba(79,70,229,.04) 0%,transparent 70%),
  radial-gradient(ellipse 700px 500px at 85% 90%,rgba(13,148,136,.03) 0%,transparent 70%)}
[data-theme="dark"] body::before{background-image:
  radial-gradient(ellipse 900px 600px at 15% 10%,rgba(129,140,248,.06) 0%,transparent 70%),
  radial-gradient(ellipse 700px 500px at 85% 90%,rgba(45,212,191,.04) 0%,transparent 70%)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E")}


/* ── TOPBAR ── */
.topbar{height:56px;background:var(--topbar-bg);backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem 0 0;position:fixed;top:0;left:0;right:0;z-index:200;box-shadow:0 1px 0 rgba(0,0,0,.04),var(--sh1)}
.topbar-left{display:flex;align-items:center}
.hamburger{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--t4);cursor:pointer;flex-shrink:0}
.hamburger:hover{color:var(--t1)}
.hamburger .mi{font-size:20px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--indigo),var(--indigo-dim));
  display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;color:#fff;
  box-shadow:0 2px 12px rgba(79,70,229,.35),0 0 0 1px rgba(79,70,229,.15);position:relative;overflow:hidden;flex-shrink:0}
.brand-logo::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);border-radius:inherit}
.brand-name{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--t1);letter-spacing:-.025em}
.brand-pill{font-size:9.5px;font-family:'DM Mono',monospace;color:var(--indigo);
  background:var(--indigo-soft);border:1px solid var(--indigo-mid);padding:2px 7px;border-radius:20px;letter-spacing:.04em;font-weight:500}
.topbar-right{display:flex;align-items:center;gap:.35rem}
.user-chip{display:flex;align-items:center;gap:.5rem;padding:.28rem .85rem;border-radius:20px;
  background:var(--bg3);border:1px solid var(--border);font-size:12.5px;color:var(--t2);font-weight:500;box-shadow:var(--sh1);margin-right:.2rem}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 2px rgba(5,150,105,.2),0 0 6px rgba(5,150,105,.5);animation:pulse 2.5s ease infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:var(--r2);color:var(--t4);cursor:pointer}
.tbtn:hover{color:var(--t2);border-color:var(--border);background:var(--bg3);box-shadow:var(--sh1)}
.tbtn .mi{font-size:17px}

/* ── LAYOUT ── */
.layout{display:flex;margin-top:56px;min-height:calc(100vh - 56px);position:relative}

/* ── SIDEBAR ── */
.sidebar{width:232px;background:var(--bg3);border-right:1px solid var(--border);
  position:fixed;top:56px;left:0;bottom:0;overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);
  z-index:100;display:flex;flex-direction:column;box-shadow:2px 0 12px rgba(0,0,0,.04);will-change:width,transform}
.sidebar.collapsed{width:56px}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:232px!important;box-shadow:var(--sh3)}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:99}
  .sidebar-overlay.on{display:block}
  /* Clip any child that exceeds viewport width. .tw wrappers handle their
     own overflow-x:auto so table horizontal scroll is unaffected. */
  .main{overflow-x:hidden}
  .panel,.panel-body{max-width:100%;box-sizing:border-box}
}
.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem .6rem 1.5rem;scrollbar-width:none}
.sidebar-scroll::-webkit-scrollbar{display:none}
.sidebar-user{display:flex;align-items:center;gap:.65rem;padding:.6rem .55rem;margin-bottom:.85rem;
  background:var(--bg4);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;white-space:nowrap}
.collapsed .sidebar-user{justify-content:center;padding:.6rem 0}
.collapsed .sidebar-user-info{display:none}
.s-avatar{width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-dim));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;
  box-shadow:0 2px 8px rgba(79,70,229,.25)}
.sidebar-user-name{font-size:12px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis}
.sidebar-user-sub{font-size:10px;color:var(--t4);margin-top:1px;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.nav-label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t5);padding:.45rem .45rem .3rem;overflow:hidden;white-space:nowrap}
.collapsed .nav-label{opacity:0}
.nav-item{display:flex;align-items:center;justify-content:flex-start;gap:.55rem;padding:.5rem .6rem;border-radius:var(--r2);
  color:var(--t3);cursor:pointer;font-size:13px;font-weight:400;margin-bottom:2px;
  position:relative;overflow:hidden;white-space:nowrap;user-select:none}
.nav-item:hover{background:var(--bg4);color:var(--t1)}
.nav-item.active{background:var(--indigo-soft);color:var(--indigo);font-weight:600;border:1px solid var(--indigo-mid)}
.nav-item.active::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2.5px;background:var(--indigo);border-radius:0 3px 3px 0}
.nav-icon{font-size:17px!important;flex-shrink:0;transition:color .15s}
.nav-item.active .nav-icon{color:var(--indigo)}
.nav-txt{overflow:hidden;text-overflow:ellipsis;flex:1}
.collapsed .nav-txt{opacity:0;width:0;pointer-events:none;flex:0;margin:0}
.collapsed .nav-item{justify-content:center;gap:0}
/* ── NAV SUB-GROUPS (Option Strategies collapsible) ── */
.nav-sub-group{overflow:hidden;max-height:0;transition:max-height .28s cubic-bezier(.4,0,.2,1)}
.nav-sub-group.open{max-height:220px}
.nav-item.nav-sub{padding:.4rem .6rem .4rem 1.75rem;font-size:12.5px}
.nav-item.nav-parent{position:relative}
.nav-chevron{margin-left:auto;flex-shrink:0;transition:transform .22s ease !important}
.nav-item.nav-parent.group-open .nav-chevron{transform:rotate(180deg)}
/* scrollbar */
.main{margin-left:232px;flex:1;padding:1rem 1.5rem 1.5rem;
  transition:margin-left .28s cubic-bezier(.4,0,.2,1);min-width:0;display:flex;flex-direction:column;gap:1.25rem}
.main.narrow{margin-left:56px}
@media(max-width:768px){.main{margin-left:0!important;padding:1rem .85rem}}

/* ── TAB PAGES ── */
.tab-page{display:none;flex-direction:column;gap:.75rem;animation:slideUp .35s ease both;contain:style}
.tab-page.active{display:flex}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes magnetSnap{
  0%  {transform:translateX(0)}
  25% {transform:translateX(-9px)}
  55% {transform:translateX(4px)}
  75% {transform:translateX(-2px)}
  90% {transform:translateX(1px)}
  100%{transform:translateX(0)}
}
.sidebar.snapping{animation:magnetSnap .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes diceRoll{
  0%  {transform:rotate(0)     scale(1)}
  20% {transform:rotate(72deg)  scale(1.3)}
  40% {transform:rotate(144deg) scale(1.1)}
  60% {transform:rotate(216deg) scale(1.25)}
  80% {transform:rotate(288deg) scale(1.05)}
  100%{transform:rotate(360deg) scale(1)}
}
.dice-rolling .nav-icon{animation:diceRoll .5s cubic-bezier(.34,1.56,.64,1);display:inline-block}
@keyframes bullseyePop{
  0%  {transform:scale(1);box-shadow:0 0 0 0 var(--indigo-glow)}
  40% {transform:scale(1.18);box-shadow:0 0 0 8px rgba(79,70,229,.18)}
  70% {transform:scale(.94);box-shadow:0 0 0 14px rgba(79,70,229,.06)}
  100%{transform:scale(1);box-shadow:0 0 0 0 transparent}
}
.nav-item.bullseye{animation:bullseyePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes stampede{
  0%  {transform:translateX(110vw) scaleX(-1)}
  100%{transform:translateX(-110vw) scaleX(-1)}
}
#stampede-animal{
  position:fixed;bottom:3.8rem;z-index:19999;
  font-size:2.8rem;pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.28));
  animation:stampede 2.2s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── PANEL ── */
.panel{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2)}
.panel.chart-panel{overflow:visible}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.25rem;
  background:var(--bg3);border-bottom:1px solid var(--border)}
.panel-title{display:flex;align-items:center;gap:.6rem;font-size:13px;font-weight:700;color:var(--t1);
  letter-spacing:-.01em;font-family:'Sora',sans-serif}
.panel-icon{width:28px;height:28px;border-radius:7px;background:var(--indigo-soft);border:1px solid var(--indigo-mid);
  display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.panel-icon .mi{font-size:15px}
.panel-tools{display:flex;align-items:center;gap:.3rem}
.ptool{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);border-radius:var(--r3);color:var(--t4);cursor:pointer}
.ptool:hover{color:var(--t2);border-color:var(--border2);background:var(--indigo-soft)}
.ptool .mi{font-size:14px}
.panel-body{padding:1.25rem 1.25rem .5rem}
.panel-body.collapsed{display:none}
.panel.maximized{position:fixed;inset:0;z-index:9900;border-radius:0;display:flex;flex-direction:column}
.panel.maximized .panel-body{flex:1;overflow-y:auto;max-height:none!important;height:auto!important}
.panel-max-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9899;cursor:pointer}
.panel-max-overlay.active{display:block}
.panel + .panel{border-left:4px solid var(--indigo)}
.panel + .panel .panel-header{background:linear-gradient(135deg,var(--bg3) 50%,var(--indigo-glow) 100%)}
.panel.ctrl-panel{border-left:none}
.panel.ctrl-panel .panel-header{background:var(--bg3)}
.panel.subtab-nav{border:1px solid var(--indigo-mid)}
.panel.data-accent{border-left:4px solid var(--indigo)}
.panel.data-accent .panel-header{background:linear-gradient(135deg,var(--bg3) 50%,var(--indigo-glow) 100%)}

/* ── CTRL GRID ── */
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ctrl-col{padding:0 1.5rem;border-right:1px solid var(--border)}
.ctrl-col:first-child{padding-left:0}
.ctrl-col:last-child{border-right:none;padding-right:0}
.ctrl-col-2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ctrl-col-2 .ctrl-col{padding:0 1.5rem}
.ctrl-col-2 .ctrl-col:first-child{padding-left:0}
.ctrl-col-2 .ctrl-col:last-child{padding-right:0;border-right:none}

/* ── Mobile: compact panels and columns — must be in layout.css AFTER base rules ── */
@media(max-width:900px){
  .panel-body{padding:1rem .9rem .5rem}
  .ctrl-col{box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}
  /* Force every form-like child to stay within the stacked column width */
  .ctrl-col .sel-wrap,.ctrl-col .csel,.ctrl-col .csel-btn,.ctrl-col .csel-drop,
  .ctrl-col .drp,.ctrl-col .drp-input,.ctrl-col .frange,.ctrl-col .slider-wrap,
  .ctrl-col .field,.ctrl-col .filter-group,.ctrl-col .spread-vol-switch,.ctrl-col select{
    box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0!important
  }
}
@media(max-width:600px){
  .panel-body{padding:.85rem .75rem .5rem}
  .filter-group,.spread-vol-switch,.sel-wrap,.slider-wrap,.field,.drp-input{
    box-sizing:border-box;width:100%;max-width:100%
  }
}

.section-head{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.section-head::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--indigo-mid),transparent)}

.field{margin-bottom:.85rem}
.field-label{font-size:11.5px;font-weight:500;color:var(--t3);display:block;margin-bottom:.3rem}

/* ── SUB-TABS ── */
.sub-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}
.sub-tab{padding:.55rem 1.1rem;font-size:12.5px;font-weight:500;color:var(--t4);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem}
.sub-tab:hover{color:var(--t2)}
.sub-tab.active{color:var(--indigo);border-bottom-color:var(--indigo);font-weight:600}
.sub-panel{display:none}
.sub-panel.active{display:block}
/* opt-sub-page: used for full-page sub-tabs inside Strategies tab */
.opt-sub-page{display:none}
.opt-sub-page.active{display:flex;flex-direction:column;gap:.75rem}
/* dual-range slider: enable pointer events on the right thumb based on z-index swap */
.dual-range-wrap input[type=range].dual-lo,
.dual-range-wrap input[type=range].dual-hi{pointer-events:none}
.dual-range-wrap input[type=range].dual-lo::-webkit-slider-thumb,
.dual-range-wrap input[type=range].dual-hi::-webkit-slider-thumb{pointer-events:all;cursor:pointer}
.dual-range-wrap input[type=range].dual-lo::-moz-range-thumb,
.dual-range-wrap input[type=range].dual-hi::-moz-range-thumb{pointer-events:all;cursor:pointer}

/* ── Layout utility classes (replaces repeated inline styles) ── */
.flex-row    { display:flex; align-items:center; }
.flex-row-g4 { display:flex; align-items:center; gap:.4rem; }
.flex-row-g5 { display:flex; align-items:center; gap:.5rem; }
.flex-row-g8 { display:flex; align-items:center; gap:.75rem; }
.ml-auto     { margin-left:auto; }
.ml3         { margin-left:.3rem; }
.ml4         { margin-left:.4rem; }
.ml5         { margin-left:.5rem; }
.mt5         { margin-top:.5rem; }
.mb5         { margin-bottom:.5rem; }
.mb75        { margin-bottom:.75rem; }
.fs11        { font-size:11px; }
.fs12        { font-size:12px; }
.fs125       { font-size:12.5px; }
.fs14        { font-size:14px; }
.fs15        { font-size:15px; }
.grid-3col   { grid-template-columns:1fr 1fr 1fr; }

/* ── Net banner layout shift ─────────────────────────────────────────
   When the 32px offline banner is visible, push the fixed topbar and
   sidebar down so nothing is covered.
   ──────────────────────────────────────────────────────────────────── */
body.net-banner-active .topbar  { top: 32px; }
body.net-banner-active .sidebar { top: 88px; } /* 32 banner + 56 topbar */
body.net-banner-active .layout  { margin-top: 88px; min-height: calc(100vh - 88px); }