:root{
  --bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--border:#2a2f3a;--text:#d7dbe3;--muted:#8a91a0;
  --accent:#4da3ff;--accent2:#ffb347;--danger:#ff5f6d;--ok:#5bd68a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{display:flex;flex-direction:column;overflow:hidden}
button{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:5px 10px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent)}
button.primary{background:#1f3b5e;border-color:#2d5a8e}
button.primary:hover{background:#28507f}
button.small{padding:2px 7px;font-size:11px}
button.danger{color:var(--danger)}
input,select,textarea{background:#0c0e12;color:var(--text);border:1px solid var(--border);border-radius:3px;padding:4px 6px;font:inherit}
input[type=number]{width:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{color:var(--muted)}
.sep{display:inline-block;width:1px;height:20px;background:var(--border);margin:0 6px;vertical-align:middle}

#topbar{display:flex;align-items:center;gap:16px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:16px;letter-spacing:.5px}.brand span{color:var(--accent)}
.toolbar{display:flex;gap:6px;align-items:center;flex:1}
#layout{flex:1;display:grid;grid-template-columns:340px 1fr 380px;min-height:0}
#sidebar,#right{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
#right{border-right:none;border-left:1px solid var(--border)}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:8px 4px;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.tab{display:none;overflow:auto;padding:10px;flex:1}
.tab.active{display:block}
#viewport{position:relative;min-width:0;display:flex;flex-direction:column}
#view3d{flex:1;min-height:0}
#view3d canvas{display:block}
#viewhud{position:absolute;top:8px;left:8px;display:flex;gap:6px;align-items:center;background:rgba(23,26,33,.85);padding:4px 8px;border-radius:6px;border:1px solid var(--border)}
#viewhud label{font-size:12px}
#simbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel);border-top:1px solid var(--border)}
#simbar input[type=range]{flex:1}
#sim-readout{font-family:ui-monospace,Menlo,monospace;color:var(--accent2);min-width:220px;text-align:right}
.panel-title{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;font-weight:600}
.panel-title span{color:var(--muted);font-weight:400;flex:1;font-size:11px}
#gcode{flex:1;resize:none;border:none;border-radius:0;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.4;padding:8px;white-space:pre}
#status{padding:4px 12px;background:var(--panel);border-top:1px solid var(--border);color:var(--muted);font-size:12px}
#status.err{color:var(--danger)}#status.ok{color:var(--ok)}

h3{margin:4px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:8px;margin-bottom:8px}
.card.selected{border-color:var(--accent)}
.card .head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.card .head .name{flex:1;font-weight:600}
.card .head input.name{flex:1;font-weight:600;background:transparent;border-color:transparent}
.card .head input.name:hover{border-color:var(--border)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.grid label{display:flex;flex-direction:column;gap:2px;font-size:11px}
.grid label.wide{grid-column:1/-1}
.grid input,.grid select{width:100%}
.row{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.muted{color:var(--muted);font-size:11px}
.pts{width:100%;height:70px;font-family:ui-monospace,Menlo,monospace;font-size:11px;resize:vertical}
.badge{font-size:10px;padding:1px 6px;border-radius:10px;background:#263045;color:var(--accent)}
.badge.warn{background:#4a3a1e;color:var(--accent2)}
.swatch{width:12px;height:12px;border-radius:2px;display:inline-block}
.disabled{opacity:.5}
@media (max-width:1100px){#layout{grid-template-columns:300px 1fr}#right{display:none}}
.grid input[type=checkbox]{width:auto;align-self:flex-start}
.grid label.wide label{font-size:12px;color:var(--text)}
#examples{max-width:150px}
#issues{max-height:34%;overflow:auto;border-bottom:1px solid var(--border);font-size:12px}
#issues .issues-head{padding:8px 10px;font-weight:600;color:var(--ok);position:sticky;top:0;background:var(--panel)}
#issues.bad .issues-head{color:var(--danger)}
#issues .issue{padding:5px 10px;border-top:1px solid var(--border);cursor:pointer;color:var(--muted)}
#issues .issue b{color:var(--text);font-weight:500}
#issues .issue:hover{background:var(--panel2)}
#viewhud{flex-wrap:wrap;max-width:calc(100% - 16px)}
@media (max-width:820px){
  body{overflow:auto;height:auto}
  #topbar{flex-wrap:wrap;gap:8px;padding:6px 16px}
  .toolbar{flex-wrap:wrap}
  #layout{display:flex;flex-direction:column}
  #viewport{height:60vh;order:-1}
  #sidebar{max-height:none}
  #right{display:flex;height:60vh}
  #sim-readout{min-width:0;font-size:11px}
}
#viewport{overflow:hidden}
#view3d{position:relative;overflow:hidden}
#progress{position:absolute;left:0;right:0;bottom:44px;height:18px;margin:0 10px;background:rgba(23,26,33,.9);border:1px solid var(--border);border-radius:9px;overflow:hidden}
#progress-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#1f3b5e,#2d5a8e);transition:width .15s}
#progress-text{position:relative;font-size:11px;padding:0 10px;line-height:18px;color:var(--text)}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:6px 0}
.legend span{display:inline-flex;align-items:center;gap:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12px}
.kv b{color:var(--muted);font-weight:500}
.note{font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin:6px 0}
.note.warn{color:var(--accent2);border-color:#4a3a1e}