:root{
  color-scheme: dark;
  --bg:#0b1020;
  --panel:#141b2d;
  --panel2:#0f1525;
  --text:#eef2ff;
  --muted:#9aa6c3;
  --border:#26314d;
  --accent:#7c9cff;
  --accent2:#9b7cff;
  --ok:#59d6a3;
  --warn:#f6c76b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,#0a0f1e,#10182b 45%,#0b1020);
  color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:28px 18px 60px}
header{padding:20px 4px 12px}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.08em}
h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:.25em 0}
.subtitle{color:var(--muted);font-size:17px}
.panel{
  background:rgba(20,27,45,.94);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin-top:16px;
}
.controls label,.label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.input-row{display:flex;gap:10px;flex-wrap:wrap}
input[type=text],#expr{
  flex:1;min-width:240px;
  padding:13px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0c1324;color:var(--text);font-size:18px;outline:none;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,156,255,.16)}
button{
  min-height:44px;border:0;border-radius:12px;padding:0 16px;
  background:var(--accent);color:#0b1020;font-weight:800;cursor:pointer;
}
button.secondary{background:#222d49;color:var(--text)}
button:disabled{opacity:.45;cursor:not-allowed}
.hint{color:var(--muted);font-size:13px}
.mode-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mode{background:#202a43;color:var(--text)}
.mode.active{background:var(--accent);color:#0b1020}
.status{display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px}
.status strong{font-size:16px}
.visual-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:16px}
.visual-grid .panel{margin-top:16px}
h2{margin:0 0 14px;font-size:18px}
.stack{
  min-height:300px;
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
  gap:8px;
  padding:12px;
  border-radius:14px;
  background:var(--panel2);
  border:1px dashed #34415f;
}
.stack-item{
  padding:11px 12px;text-align:center;border-radius:10px;
  background:#222d49;border:1px solid #33415f;font-weight:800;
}
.stack-item.top{outline:2px solid var(--accent)}
.empty{color:var(--muted);margin:auto;text-align:center}
.postfix-output{
  min-height:300px;
  padding:16px;border-radius:14px;background:var(--panel2);
  border:1px dashed #34415f;
  font:700 20px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.navigator{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center}
#stepRange{width:100%}
.explanation li{margin:8px 0;color:#d9e1f7}
.hidden{display:none!important}
.error{color:#ff8d8d}
.success{color:var(--ok)}
@media (max-width:820px){
  .visual-grid{grid-template-columns:1fr}
  .status{grid-template-columns:1fr}
  .navigator{grid-template-columns:1fr 1fr}
  #stepRange{grid-column:1/-1;order:-1}
}


.feedback{
  margin-top:10px;
  min-height:24px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--muted);
  background:#0f1525;
  border:1px solid transparent;
  font-size:14px;
}
.feedback.success{
  color:var(--ok);
  border-color:rgba(89,214,163,.35);
  background:rgba(89,214,163,.08);
}
.feedback.error{
  color:#ff9a9a;
  border-color:rgba(255,141,141,.35);
  background:rgba(255,141,141,.08);
}
.feedback.info{
  color:#c8d4ff;
  border-color:rgba(124,156,255,.28);
  background:rgba(124,156,255,.08);
}
#expr.input-error{
  border-color:#ff8d8d;
  box-shadow:0 0 0 3px rgba(255,141,141,.12);
}
#buildBtn.flash-success{
  background:var(--ok);
}