:root{
  --bg:#0d1a28;
  --bg-grid: rgba(120,170,220,0.07);
  --panel:#122236;
  --panel-2:#0f1e30;
  --line:#22384f;
  --ink:#eaf1f8;
  --ink-dim:#87a0b8;
  --pencil:#5ec8ff;
  --marker:#ff8a3d;
  --ok:#4fd18b;
  --bad:#ff6b6b;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
}
.topbar{
  padding:22px 32px 18px;
  border-bottom:1px solid var(--line);
}
.topbar-title{
  font-family:var(--mono);
  font-size:20px;
  font-weight:600;
  letter-spacing:0.04em;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.mark{color:var(--marker);}
.topbar-sub{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:400;
  color:var(--ink-dim);
  letter-spacing:0.02em;
}
.layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:1px;
  background:var(--line);
}
@media (max-width: 980px){ .layout{grid-template-columns:1fr;} }

.panel{
  background:var(--panel);
  padding:24px 26px;
  overflow-y:auto;
}
.panel-output{background:var(--panel-2);}

.block{margin-bottom:26px;}
.block h2{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.block h2 .idx{
  color:var(--marker);
  font-size:12px;
  border:1px solid var(--marker);
  border-radius:3px;
  padding:1px 6px;
}
.hint{font-family:var(--sans); font-weight:400; color:var(--ink-dim); font-size:12px; text-transform:none;}

.row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
label{
  display:flex; flex-direction:column; gap:5px;
  font-size:12px; color:var(--ink-dim);
  flex:1; min-width:110px;
}
input, select{
  background:#0a1520;
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 9px;
  border-radius:4px;
  font-family:var(--mono);
  font-size:13px;
}
input:focus, select:focus{outline:1px solid var(--pencil); border-color:var(--pencil);}
input[type=number]{width:100%;}

.item-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.item-row{
  display:flex; align-items:center; justify-content:space-between;
  background:#0a1520; border:1px solid var(--line); border-radius:4px;
  padding:7px 10px; font-family:var(--mono); font-size:12.5px;
}
.item-row button{
  background:none; border:none; color:var(--bad); cursor:pointer; font-size:15px; line-height:1;
  padding:2px 6px;
}
.add-row{display:flex; gap:8px; flex-wrap:wrap;}
.add-row.wrap input{min-width:120px; flex:1;}
.add-row input, .add-row select{flex:1; min-width:70px;}
.btn-add{
  background:transparent; border:1px dashed var(--pencil); color:var(--pencil);
  border-radius:4px; padding:8px 12px; font-family:var(--mono); font-size:12px;
  cursor:pointer; white-space:nowrap;
}
.btn-add:hover{background:rgba(94,200,255,0.1);}

.actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.btn-primary, .btn-secondary{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0.03em;
  padding:12px 20px; border-radius:5px; cursor:pointer; border:none;
}
.btn-primary{background:var(--marker); color:#1a0f06; flex:1;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{background:transparent; border:1px solid var(--line); color:var(--ink); flex:1;}
.btn-secondary:disabled{opacity:0.4; cursor:not-allowed;}
.btn-secondary:not(:disabled):hover{border-color:var(--pencil); color:var(--pencil);}

.error-box{
  margin-top:14px; padding:10px 12px; border-radius:5px;
  background:rgba(255,107,107,0.1); border:1px solid var(--bad); color:#ffb3b3;
  font-family:var(--mono); font-size:12.5px;
}

#preview{width:100%; height:auto; background:#0a1520; border:1px solid var(--line); border-radius:6px;}

table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px;}
th, td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line);}
th{color:var(--ink-dim); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:0.05em;}
.determinacy-note{color:var(--ink-dim); font-size:12px; margin-top:10px; line-height:1.5;}

.metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:10px;}
.metric{
  background:#0a1520; border:1px solid var(--line); border-radius:6px; padding:12px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.metric-label{font-family:var(--mono); font-size:11px; color:var(--ink-dim); text-transform:uppercase;}
.metric-value{font-family:var(--mono); font-size:17px; color:var(--pencil); font-weight:600;}

.epure-img{width:100%; border-radius:6px; border:1px solid var(--line); background:#fff;}