:root{
  --bg:#07070f;
  --panel:rgba(22,22,40,.55);
  --panel-border:rgba(255,255,255,.08);
  --text:#e8e8f2;
  --muted:#8a8aa3;
  --accent:#00d4ff;
  --accent2:#7b2ff7;
  --glow:#00d4ff;
  --danger:#ff3366;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 15% -10%, rgba(123,47,247,.14), transparent 60%),
    radial-gradient(1000px 600px at 100% 110%, rgba(0,212,255,.10), transparent 60%);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ── Header ─────────────────────────── */
header{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;
  border-bottom:1px solid var(--panel-border);
  background:rgba(10,10,20,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  flex:0 0 auto;z-index:5;
}
header h1{
  font-size:1.05rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.badge{
  font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;border:1px solid var(--panel-border);
  color:var(--muted);background:rgba(255,255,255,.04);white-space:nowrap;
}
.badge.gpu{color:#39ffb0;border-color:rgba(57,255,176,.3)}
.badge.cpu{color:#ffb347;border-color:rgba(255,179,71,.3)}
#headStats{margin-left:auto;display:flex;gap:16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.72rem;color:var(--muted)}
#headStats b{color:var(--text);font-weight:600}

/* ── Layout ─────────────────────────── */
main{display:flex;flex:1;min-height:0}
#stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px;min-width:0;gap:12px;position:relative;
}
/* viewport toolbar (zoom / rotate / pan / fit / fullscreen) */
#viewBar{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;z-index:5;
}
#viewBar button{
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:rgba(20,20,40,.75);border:1px solid var(--panel-border);
  color:var(--text);font-size:.95rem;line-height:1;
  backdrop-filter:blur(8px);transition:all .15s;user-select:none;
  display:flex;align-items:center;justify-content:center;
}
#viewBar button:hover{border-color:var(--accent);color:var(--accent)}
#viewBar button.on{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  border-color:transparent;color:#fff;
}
#viewBar.planar .only3d{display:none}
#viewBar #vbZoomLbl{
  font-size:.6rem;color:var(--muted);text-align:center;
  font-family:ui-monospace,Menlo,monospace;min-height:12px;user-select:none;
}
#stage:fullscreen{background:var(--bg, #07070f)}
#canvasWrap{
  position:relative;border-radius:var(--radius);
  padding:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--panel-border);
  box-shadow:0 0 80px -18px var(--glow), 0 24px 60px -20px rgba(0,0,0,.8);
  transition:box-shadow .6s ease;
  max-width:100%;max-height:100%;
}
#caCanvas{
  display:block;border-radius:8px;cursor:crosshair;touch-action:none;
  image-rendering:pixelated;background:#000;
  max-width:100%;max-height:100%;
}
#hint{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.6}
#hint kbd{
  background:rgba(255,255,255,.07);border:1px solid var(--panel-border);
  border-radius:4px;padding:1px 6px;font-family:inherit;font-size:.65rem;color:var(--text);
}

/* ── Sidebar ────────────────────────── */
#sidebar{
  flex:0 0 320px;overflow-y:auto;overscroll-behavior:contain;
  padding:16px;display:flex;flex-direction:column;gap:14px;
  border-left:1px solid var(--panel-border);
  background:rgba(12,12,24,.5);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
#sidebar::-webkit-scrollbar{width:8px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.card{
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--radius);padding:14px;
}
.card h3{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}

/* ── Controls ───────────────────────── */
.btn{
  appearance:none;border:1px solid var(--panel-border);border-radius:9px;
  background:rgba(255,255,255,.06);color:var(--text);
  padding:9px 12px;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:all .18s ease;font-family:inherit;
}
.btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  border:none;color:#fff;
  box-shadow:0 4px 20px -4px rgba(0,212,255,.5);
}
.btn.primary:hover{filter:brightness(1.15)}
.btn.danger{color:#ff6b8a;border-color:rgba(255,51,102,.3)}
.btn.danger:hover{background:rgba(255,51,102,.15)}
.btn.full{width:100%}
.btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.btn-row .btn{padding:9px 4px;font-size:.74rem}

.field{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.field label{font-size:.74rem;color:var(--muted);flex:0 0 66px}
.field .val{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--accent);flex:0 0 42px;text-align:right}
input[type=range]{
  flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  box-shadow:0 0 10px rgba(0,212,255,.6);border:none;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;border:none;
  background:linear-gradient(120deg,var(--accent),var(--accent2));cursor:pointer;
}
input[type=text]{
  background:rgba(0,0,0,.35);border:1px solid var(--panel-border);border-radius:8px;
  color:var(--text);padding:8px 10px;font-size:.85rem;width:100%;
  font-family:ui-monospace,Menlo,monospace;outline:none;transition:border-color .2s;
}
input[type=text]:focus{border-color:var(--accent)}
input[type=text].invalid{border-color:var(--danger)}
select{
  background:rgba(0,0,0,.35);border:1px solid var(--panel-border);border-radius:8px;
  color:var(--text);padding:8px 10px;font-size:.8rem;width:100%;outline:none;
  cursor:pointer;font-family:inherit;
}
select:focus{border-color:var(--accent)}
select option{background:#14142a}
.rule-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.rule-inputs .sub{font-size:.62rem;color:var(--muted);margin-bottom:4px;display:block;letter-spacing:.05em}
#ruleName{font-size:.7rem;color:var(--muted);margin-top:8px;text-align:center;font-family:ui-monospace,Menlo,monospace}

/* toggle switch */
.switch{position:relative;width:38px;height:21px;flex:0 0 auto;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{
  position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.12);
  transition:background .2s;
}
.switch .track::after{
  content:'';position:absolute;top:2.5px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.switch input:checked + .track{background:linear-gradient(120deg,var(--accent),var(--accent2))}
.switch input:checked + .track::after{transform:translateX(16px)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.toggle-row span{font-size:.78rem;color:var(--text)}

/* palettes */
#paletteGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.pal{
  border:1.5px solid var(--panel-border);border-radius:8px;overflow:hidden;
  cursor:pointer;transition:all .18s;background:none;padding:0;
}
.pal .strip{height:24px}
.pal .nm{
  display:block;font-size:.55rem;color:var(--muted);padding:3px 2px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.3);
}
.pal:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.3)}
.pal.active{border-color:var(--accent);box-shadow:0 0 12px -2px var(--accent)}
.pal.active .nm{color:var(--accent)}

/* checkbox */
.check-row{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:.75rem;color:var(--muted);cursor:pointer}
.check-row input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

/* toast */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:rgba(20,20,40,.92);border:1px solid var(--panel-border);
  backdrop-filter:blur(12px);border-radius:12px;padding:12px 20px;
  font-size:.8rem;color:var(--text);z-index:99;opacity:0;
  transition:all .35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;
  box-shadow:0 10px 40px rgba(0,0,0,.6);max-width:90vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:rgba(57,255,176,.4)}
#toast.err{border-color:rgba(255,51,102,.5)}

/* export progress */
.spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Surface / 3D mode ──────────────── */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.seg .btn{padding:9px 4px;font-size:.72rem}
.seg .btn.on{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 16px -4px rgba(0,212,255,.5);
}
.seg.two{grid-template-columns:repeat(2,1fr)}
.card-note{font-size:.65rem;color:var(--muted);line-height:1.5;margin-top:6px}
#threeCanvas{
  display:none;border-radius:8px;background:#000;cursor:grab;
  touch-action:none;max-width:100%;max-height:100%;
}
#threeCanvas:active{cursor:grabbing}
#canvasWrap.mode3d #caCanvas{display:none}
#canvasWrap.mode3d #threeCanvas{display:block}
#loading3d{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;background:rgba(5,5,15,.72);
  border-radius:var(--radius);z-index:4;font-size:.8rem;color:var(--muted);
}
#loading3d.show{display:flex}
#loading3d .spin{width:28px;height:28px;border-width:3px;margin:0}
.hiddenCard{display:none!important}

/* ── Responsive ─────────────────────── */
@media(max-width:860px){
  body{overflow:auto}
  #app{height:auto}
  main{flex-direction:column}
  #stage{padding:12px}
  #canvasWrap{width:100%;max-width:94vw}
  #caCanvas{width:100%!important;height:auto!important}
  #sidebar{flex:1 1 auto;border-left:none;border-top:1px solid var(--panel-border)}
  #headStats{display:none}
  #hint{display:none}
}