:root{
  --bg:#0e1117; --panel:#151a22; --ink:#e8f0ff; --muted:#9db0c8; --acc:#00e08f; --red:#ff5a5a; --border:#223043;
  --canvas:#0a0f15; --hint:#9db0c8;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --max-canvas-h: 80vh;

  --sb-track: color-mix(in oklab, var(--panel) 60%, transparent);
  --sb-thumb: color-mix(in oklab, var(--muted) 65%, transparent);
  --sb-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);
}
:root[data-theme="light"]{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#0e1520; --muted:#516276; --acc:#087f5b; --red:#e03131; --border:#e2e8f0;
  --canvas:#f3f6fb; --hint:#5e6b7a;
  --shadow: 0 6px 24px rgba(2,12,27,.08);

  --sb-track:#f0f3f8; --sb-thumb:#c7d1df; --sb-thumb-hover:#9fb0c7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; -webkit-tap-highlight-color:transparent; transition:background-color .2s,color .2s;}

*{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track) }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--sb-track); border-radius:999px }
::-webkit-scrollbar-thumb{ background:var(--sb-thumb); border-radius:999px; border:2px solid var(--sb-track) }
::-webkit-scrollbar-thumb:hover{ background:var(--sb-thumb-hover) }

/* Top bars NOT sticky */
header{ padding:12px 16px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border); background:transparent; z-index:1 }
header h1{ margin:0; font-size:16px; font-weight:800; letter-spacing:.02em }
.brand{display:flex; align-items:center; gap:10px}
.badge{font-size:10px; padding:2px 8px; border-radius:999px; background:var(--panel); border:1px solid var(--border); color:var(--muted)}
.hint{color:var(--hint); font-size:12px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.header-actions{display:flex; gap:8px; align-items:center}
.theme-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--panel); color:var(--ink); padding:8px 10px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow) }
.theme-toggle i{ width:16px; text-align:center }
.fab-mobile{ display:none }
@media (max-width:900px){
  .fab-mobile{ display:inline-flex; align-items:center; gap:8px; background:var(--acc); color:#012016; border:none; border-radius:12px; padding:10px 12px; font-weight:700; box-shadow:var(--shadow) }
  .fab-mobile i{opacity:.9}
}

.global-tabs{ background:var(--canvas); border-bottom:1px solid var(--border); display:flex; gap:0; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 1px 0 rgba(0,0,0,.04) }
.global-tabs .tab{ padding:10px 12px; white-space:nowrap; cursor:pointer; border-right:1px solid var(--border); color:var(--muted); flex:0 0 auto; background:var(--canvas) }
.global-tabs .tab i{ margin-right:6px; opacity:.9 }
.global-tabs .tab.active{ background:var(--panel); color:var(--ink); font-weight:700 }
.global-tabs .spacer{ flex:1 }
.global-tabs .info-toggle{ border:none; background:transparent; color:var(--muted); padding:0 10px; cursor:pointer; display:flex; align-items:center; gap:6px }
.global-tabs .info-toggle.active{ color:var(--ink); font-weight:700 }

.tab-info{ background:var(--panel); border-bottom:1px solid var(--border); border-top:1px solid var(--border); padding:10px 12px; display:flex; align-items:flex-start; gap:10px }
.tab-info.hidden{ display:none }
.tab-info .icon{ margin-top:2px; opacity:.85 }
.tab-info .content{ color:var(--hint); line-height:1.35 }
.tab-info .actions{ margin-left:auto; display:flex; gap:6px }
.tab-info .chip{ font-size:11px; padding:2px 8px; border-radius:999px; background:var(--canvas); border:1px solid var(--border); color:var(--muted) }
.tab-info button{ border:1px solid var(--border); background:var(--canvas); color:var(--ink); border-radius:8px; padding:6px 8px; cursor:pointer }

main{ display:grid; grid-template-columns:340px 1fr; gap:12px; padding:12px; min-height:calc(100vh - 57px) }
@media (max-width:900px){ main{ grid-template-columns:1fr } }

/* Collapse layout when settings are hidden */
main.settings-hidden{
  grid-template-columns: 1fr !important;
}

.panel{ background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:background-color .2s, border-color .2s, box-shadow .2s }

.left{ display:flex; flex-direction:column; min-height:240px; max-height:none; overflow:auto; -webkit-overflow-scrolling:touch }
.left.hidden{ display:none }
.section{ padding:12px; border-bottom:1px solid var(--border) }
.section:last-child{ border-bottom:0 }
.section h2{ margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted) }
.row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; margin:8px 0 }
.row > .fill{ grid-column:1 / -1 }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.btn{ background:var(--acc); color:#012016; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer }
.btn.alt{ background:var(--canvas); color:var(--ink); border:1px solid var(--border) }
.toggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--canvas); color:var(--ink) }
.toggle i{ opacity:.8 }
.toggle.active{ outline:2px solid color-mix(in oklab, var(--acc) 60%, transparent) }
label{ color:var(--ink) }
input[type="range"]{ width:100% }
select{ width:100%; background:var(--canvas); color:var(--ink); border:1px solid var(--border); border-radius:8px; padding:8px }
.small{ font-size:12px; color:var(--hint) }
.progress{ height:8px; background:var(--canvas); border:1px solid var(--border); border-radius:999px; overflow:hidden }
.bar{ height:100%; width:0%; background:var(--acc); transition:width .2s }

.right{ display:flex; flex-direction:column; min-height:240px; max-height:none; overflow:auto; -webkit-overflow-scrolling:touch; position:relative; z-index:1 }

.stage{ display:grid; gap:12px; padding:12px }
.stage .rowC{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:900px){ .stage .rowC{ grid-template-columns:1fr } }

.view[hidden]{ display:none !important }

canvas{
  width:100%;
  height:auto;
  max-height: var(--max-canvas-h);
  display:block;
  background:var(--canvas);
  border:1px solid var(--border);
  border-radius:12px;
  touch-action:none;
  object-fit:contain;
}

/* --- Modal --- */
.modal{position:fixed; inset:0; display:none; z-index:5000;}
.modal.show{display:block;}
.modal .shade{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px);}
.modal .card{
  position:relative; max-width:520px; margin:10vh auto 0;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:16px;
}
.drop{ border:1px dashed var(--border); border-radius:12px; padding:14px; text-align:center; color:var(--muted); display:grid; place-items:center; min-height:120px; cursor:pointer; transition:.2s border-color,.2s background }
.drop.drag{ border-color:var(--acc); background:color-mix(in oklab, var(--acc) 8%, transparent) }

/* --- Footer --- */
footer{ padding:16px; text-align:center; color:var(--hint); border-top:1px solid var(--border); }