/* Adapted from poly-multicycle-bot/public/index.html; strategy UI is Boundfive-only. */

  :root{
    --up:#19e3a0; --up-dim:#0e6f54;
    --dn:#ff5d7a; --dn-dim:#7a2740;
    --txt:#eaf0f5; --txt2:rgba(234,240,245,.45); --txt3:rgba(234,240,245,.28);
    --glass:rgba(255,255,255,.045); --glass-brd:rgba(255,255,255,.08);
    --font:'Plus Jakarta Sans',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(25,227,160,.07), transparent 60%),
      radial-gradient(1200px 600px at 80% -10%, rgba(255,93,122,.07), transparent 60%),
      radial-gradient(900px 900px at 50% 120%, rgba(80,120,255,.06), transparent 60%),
      #080a10;
    color:var(--txt); font-family:var(--font);
    display:flex; flex-direction:row; overflow:hidden; height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .main{flex:1; min-width:0; height:100vh; display:flex; flex-direction:column}

  /* Multicycle sidebar, adapted for Boundfive strategy fields. */
  .sidebar{flex:0 0 286px; width:286px; height:100vh; background:#0a0c11; border-right:1px solid rgba(255,255,255,.07);
    display:flex; flex-direction:column; overflow:hidden; transition:flex-basis .18s ease,width .18s ease; z-index:40}
  .sidebar.collapsed{flex-basis:42px; width:42px}
  .sb-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0}
  .sb-head .scfg-tag{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; letter-spacing:.5px; color:#cdb8ff}
  .sb-toggle{width:24px; height:24px; flex-shrink:0; border:1px solid var(--glass-brd); background:var(--glass); color:var(--txt2);
    border-radius:6px; cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center}
  .sb-toggle:hover{background:rgba(255,255,255,.12); color:var(--txt)}
  .sb-body{flex:1; min-height:0; min-width:0; overflow-y:auto; overflow-x:hidden; padding:12px; display:flex; flex-direction:column; gap:13px}
  .sb-body::-webkit-scrollbar{width:8px} .sb-body::-webkit-scrollbar-track{background:transparent}
  .sb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:9px} .sb-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
  .sidebar .scfg-section{display:flex; flex:0 0 auto; min-width:0; flex-direction:column; align-items:stretch; gap:8px;
    background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:11px 11px 12px}
  .sidebar .cfg-feature{display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0}
  .sidebar .cfg-feature + .cfg-feature{border-top:1px solid rgba(255,255,255,.09); padding-top:10px; margin-top:2px}
  .sidebar .scfg-grp{font-size:8.5px; font-weight:700; letter-spacing:.6px; color:var(--txt2); text-transform:uppercase; margin-bottom:1px; cursor:pointer; user-select:none}
  .sidebar .scfg-grp::before{content:"▾"; display:inline-block; width:9px; margin-right:4px; font-size:8px; color:var(--txt3); vertical-align:middle}
  .sidebar .scfg-grp:hover::before{color:var(--txt)}
  .sidebar .scfg-section.collapsed{gap:0; padding-bottom:10px}
  .sidebar .scfg-section.collapsed > .scfg-grp::before{content:"▸"}
  .sidebar .scfg-section.collapsed > :not(.scfg-grp){display:none}
  .sidebar .cfgnum,.sidebar .cfgsel{display:grid; grid-template-columns:minmax(0,1fr) 88px; align-items:center; gap:10px; min-width:0;
    font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--txt2); white-space:normal; line-height:1.4}
  .sidebar .cfgnum > span,.sidebar .cfgsel > span{min-width:0; overflow-wrap:anywhere}
  .sidebar .cfgnum input,.sidebar .cfgsel select{height:30px; width:100%; min-width:0; max-width:100%; box-sizing:border-box;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:5px; color:var(--txt);
    font-family:var(--mono); font-size:11px; padding:0 8px; text-transform:none}
  .sidebar .cfgsel{grid-template-columns:minmax(0,1fr) 112px}
  .sidebar .cfgnum input:focus,.sidebar .cfgsel select:focus{outline:none; border-color:rgba(201,184,255,.45)}
  .sidebar .cfgnum input:disabled,.sidebar .cfgsel select:disabled{opacity:.4}
  .sidebar .cfg-session-stop > span{white-space:normal; min-width:0; line-height:1.4}
  .sidebar .cfg-help{font-size:10px; line-height:1.4; color:var(--txt3)}
  /* dark dropdown list for ALL selects (the native <option> popup; Chromium/Firefox honor these) */
  select{color-scheme:dark}
  select option,select optgroup{background:#0e131b; color:#e6edf3}
  select option:checked{background:#19e3a0; color:#04140d; font-weight:700}
  .sidebar .cfgtgl{display:flex; align-items:center; gap:8px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--txt2); cursor:pointer}
  .sidebar .cfgtgl .tgl-track,.sidebar .cfgtgl .tgl-lbl{order:-1} .sidebar .cfgtgl .tgl-track{display:none}
  .sidebar .cfgtgl .tgl-lbl{flex:1}
  .sidebar .cfgtgl input{appearance:none;-webkit-appearance:none; width:14px; height:14px; margin:0; border-radius:3px; border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.05); position:relative; cursor:pointer; flex-shrink:0}
  .sidebar .cfgtgl input:checked{background:var(--up); border-color:var(--up)}
  .sidebar .cfgtgl input:checked::after{content:"✓"; position:absolute; inset:0; font-size:10px; line-height:14px; text-align:center; color:#04140d; font-weight:900}
  .sidebar .cfgtgl:has(input:checked){color:var(--up)}
  .sidebar .cfgtgl.cfg-disabled{opacity:.4}
  .sb-foot{flex-shrink:0; border-top:1px solid rgba(255,255,255,.07); padding:10px 12px; display:flex; flex-direction:column; gap:9px}
  .sb-status{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:13px; font-family:var(--mono); font-size:10px}
  .sb-actions{display:flex; gap:6px}
  .sb-actions .histbtn{flex:1; height:30px; border-radius:6px; font-weight:700; cursor:pointer; font-size:11px;
    border:1px solid rgba(255,255,255,.12); background:#11151c; color:var(--txt2);
    display:flex; align-items:center; justify-content:center; gap:5px}
  .sb-actions .histbtn:hover{background:#161b24; color:var(--txt)}
  .sb-actions .btn-ico{font-size:11px; line-height:1}
  .sb-actions .bot-start{color:#19e3a0; background:rgba(25,227,160,.16); border:1px solid rgba(25,227,160,.5)}
  .sb-actions .bot-start:hover{background:rgba(25,227,160,.26)}
  .sb-actions .bot-stop{color:#ff5d7a; background:rgba(255,93,122,.14); border:1px solid rgba(255,93,122,.5)}
  .sb-actions .bot-stop:hover{background:rgba(255,93,122,.24)}
  .sb-actions .histbtn:disabled{opacity:.4; cursor:default}
  /* collapsed → hide the body + labels, but KEEP the live/sim badge dot (top) + Start/Stop icon buttons */
  .sidebar.collapsed .sb-body{display:none}
  .sidebar.collapsed .sb-head{flex-direction:column; gap:9px; padding:10px 0; justify-content:center}
  .sidebar.collapsed #execTxt{display:none}
  .sidebar.collapsed #execBadge{padding:2px; border:none; background:none; box-shadow:none; animation:none}
  .sidebar.collapsed #execBadge .exec-dot{font-size:14px}
  .sidebar.collapsed .sb-foot{padding:8px 5px; gap:6px}
  .sidebar.collapsed .sb-status,.sidebar.collapsed .sb-actions-cfg,.sidebar.collapsed .btn-lbl{display:none}
  .sidebar.collapsed .sb-actions{flex-direction:column; gap:9px; align-items:center}
  .sidebar.collapsed .sb-actions .histbtn{flex:0 0 auto; width:30px; height:30px; padding:0; gap:0}   /* square icon buttons */
  .sidebar.collapsed .sb-actions .btn-ico{font-size:13px}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .pos{color:var(--up)} .neg{color:var(--dn)}
  [hidden]{display:none!important} button,input,select{font:inherit}button,a,input,summary,select{outline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #19e3a0}button:disabled{opacity:.45;cursor:default!important}a{color:inherit;text-decoration:none}.mono{font-family:var(--mono)}.pos{color:var(--up)!important}.neg{color:var(--dn)!important}
  .strategy-name{font-size:18px;letter-spacing:1.6px;font-weight:800;color:var(--txt)}.strategy-name span{display:block;font:9px var(--mono);letter-spacing:.6px;margin-top:7px;color:var(--txt3)}.cfg-help{font-size:10px;color:var(--txt2);line-height:1.65}#configForm{display:flex;flex-direction:column;gap:12px}.sidebar details.scfg-section{display:block}.sidebar details .cfgnum{margin-top:11px}.sidebar .scfg-grp{list-style:none}.sidebar details:not([open]) .scfg-grp::before{content:'▸'}.sb-status{white-space:normal;line-height:1.5;color:#b7a2e6}.sb-actions .bot-start{color:var(--up)}.sb-actions .bot-stop{color:var(--dn)}
  .top{flex-shrink:0;background:#0a0c11;border-bottom:1px solid var(--glass-brd)}.top-row{display:flex;align-items:center;gap:20px;min-height:58px;padding:0 24px;border-bottom:1px solid #ffffff07}.brand{font-size:14px;font-weight:800;letter-spacing:1.3px}.market-tag{font:10px var(--mono);color:var(--txt3);padding:4px 8px;border:1px solid var(--glass-brd)}nav{display:flex;gap:4px;align-self:stretch}.nav{border:0;background:none;color:var(--txt2);padding:8px 13px;cursor:pointer;font-size:11px;position:relative}.nav:hover{color:var(--txt)}.nav.active{color:var(--up)}nav .nav.active:after{position:absolute;content:'';bottom:0;left:10px;right:10px;height:2px;background:var(--up)}.connection{margin-left:auto;font:10px var(--mono);color:var(--txt2)}.connection.connected{color:var(--up)}.connection.offline{color:var(--dn)}
  .feed-row{display:flex;gap:20px;padding:10px 24px;align-items:center;flex-wrap:wrap}.feedpill{font-size:9px;color:var(--txt3);font-weight:600}.feedpill.healthy{color:var(--up)}.feedpill.stale{color:#e7b753}.updated{margin-left:auto;font-size:9px;color:var(--txt3)}.notice{padding:9px 24px;font-size:11px;line-height:1.5;border-bottom:1px solid #c9b8ff26;background:#c9b8ff0b;color:#c9b8ff}.content{overflow:auto;padding:22px 24px;flex:1;min-height:0;scrollbar-color:#ffffff20 transparent}
  .metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--glass-brd);background:#0b0e14;margin-bottom:24px}.metric{padding:17px 20px;border-right:1px solid var(--glass-brd);min-width:0}.metric:last-child{border-right:0}.metric>span{display:block;font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--txt2)}.metric strong{display:block;font:500 25px var(--mono);margin:8px 0;color:var(--txt)}.metric small{display:block;font-size:9px;color:var(--txt3);line-height:1.6}
  .window-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.eyebrow{display:block;color:var(--txt3);font:9px var(--mono);letter-spacing:1px;margin-bottom:7px}h1{font:500 13px var(--mono);color:#c3cedc}h2{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--txt2)}h2 span{font-weight:400;color:var(--txt3);margin-left:8px}.window-actions{display:flex;align-items:center;gap:8px}.chip{font:9px var(--mono);padding:5px 9px;border:1px solid var(--glass-brd);color:#c9b8ff;border-radius:4px}.chip.go{color:var(--up);border-color:#19e3a040;background:#19e3a00a}.chip.warn{color:#e7b753;border-color:#e7b75330}.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.panel{border:1px solid var(--glass-brd);background:#0b0e14;padding:14px 16px;min-width:0}.panel h2{margin-bottom:9px}.detail-row{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font-size:10px;padding:7px 0;border-bottom:1px solid #ffffff06}.detail-row:last-child{border-bottom:0}.detail-row>span{color:var(--txt3)}.detail-row>b{font-weight:500;text-align:right;overflow-wrap:anywhere;max-width:65%}.order-panel{margin-top:18px}.section-heading{display:flex;align-items:center;gap:15px;margin:0 0 12px}.section-heading h2{margin:0;flex:1}.order-tabs{display:flex;gap:3px}.order-tabs .nav{font-size:10px;padding:4px 8px}
  .table-wrap{overflow:auto;max-height:460px}table{width:100%;border-collapse:collapse;white-space:nowrap;font:10px var(--mono)}th{font-size:8px;color:var(--txt3);letter-spacing:.5px;text-transform:uppercase;font-weight:500;background:#0b0e14;position:sticky;top:0}th,td{text-align:right;padding:9px 10px;border-bottom:1px solid #ffffff07}th:first-child,td:first-child{text-align:left}tbody tr:hover{background:#ffffff02}td{color:#a9b7c6}.empty{text-align:center!important;padding:28px;color:var(--txt3)}.button{padding:7px 11px;border:1px solid var(--glass-brd);background:#11151c;color:var(--txt2);cursor:pointer;border-radius:3px;font-size:10px}.button:hover{color:var(--txt);border-color:#ffffff30}.button.primary{background:#19e3a018;border-color:#19e3a050;color:var(--up)}.button.danger{border-color:#ff5d7a40;color:var(--dn)}.button.small{padding:3px 7px;font-size:9px}.help{font-size:11px;color:var(--txt2);line-height:1.8;margin-bottom:17px}.pager{display:flex;gap:14px;justify-content:center;align-items:center;margin:15px;font-size:10px;color:var(--txt3)}
  .backtest-controls{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:20px 0}.backtest-controls label{font-size:9px;color:var(--txt2);display:flex;flex-direction:column;gap:7px}.backtest-controls input,select{height:34px;padding:7px 9px;border:1px solid var(--glass-brd);border-radius:3px;background:#0b0e14;color:var(--txt);font:11px var(--mono);color-scheme:dark}.backtest-controls input[type=number]{width:130px}.backtest-controls button{height:34px}.backtest-progress{display:flex;align-items:center;gap:12px;padding:16px 0 24px;font:11px var(--mono)}progress{height:7px;max-width:300px;flex:1;accent-color:#19e3a0}.backtest-progress strong{margin-left:auto;font-weight:500}.footer{display:flex;gap:15px;color:var(--txt3);font:8px var(--mono);letter-spacing:.5px;padding:24px 0 0}.footer span{letter-spacing:0}.footer a{margin-left:auto}.footer a:hover{color:var(--up)}dialog{margin:auto;background:#0b0e14;color:var(--txt);border:1px solid #ffffff20;border-radius:5px;width:min(900px,94vw);max-height:85vh;padding:20px}dialog::backdrop{background:#05070bd9}dialog pre{font:11px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:65vh}
  @media(min-width:1800px){.content{padding:28px 36px}}
  @media(max-width:1250px){.sidebar{flex-basis:250px;width:250px}.content{padding:18px}.top-row{gap:12px;padding:0 18px}.feed-row{padding:9px 18px;gap:12px}.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.metric{padding:12px}.metric strong{font-size:21px}}
  @media(max-width:850px){.sidebar{flex-basis:225px;width:225px}.sidebar .cfgnum{grid-template-columns:minmax(0,1fr) 70px}.top-row{flex-wrap:wrap;padding:10px 14px;gap:10px}.top-row nav{order:3;flex:1 1 100%}.connection{font-size:9px}.market-tag{display:none}.metrics{grid-template-columns:repeat(3,1fr)}.metric:nth-child(3){border-right:0}.metric:nth-child(n+4){border-top:1px solid var(--glass-brd)}.metric small{display:none}.details{grid-template-columns:1fr}.details .panel{padding:12px}.feed-row{gap:10px}.updated{width:100%;margin:0}.footer span{display:none}}
  @media(max-width:600px){.sidebar:not(.collapsed){position:fixed;inset:0 auto 0 0;width:270px;box-shadow:10px 0 60px #000b}.sidebar.collapsed{flex-basis:36px;width:36px}.content{padding:14px 10px}.top-row{padding:10px}.feed-row{padding:8px 10px}.brand{font-size:12px}.connection{font-size:8px}.metrics{margin-bottom:18px}.metric{padding:10px 8px}.metric>span{font-size:8px}.metric strong{font-size:17px}.window-bar{align-items:flex-start}.window-bar h1{font-size:10px}.window-actions{flex-direction:column;align-items:flex-end}.order-panel{padding:10px}.order-panel .section-heading{flex-wrap:wrap}.order-tabs{width:100%}.notice{padding:8px 12px}.backtest-controls label{flex:1;min-width:160px}.backtest-controls input[type=number]{width:100%}.section-heading{flex-wrap:wrap}.section-heading select{max-width:100%}.footer{font-size:7px}}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}