:root{
  --bg:#0b0c0f; --fg:#e7e9ee; --card:#141720; --muted:#9aa3b2; --border:#212633; --accent:#5aa7ff;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fb; --fg:#0b0c0f; --card:#ffffff; --muted:#5b6472; --border:#e6e8ee; --accent:#2b6cff; }
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--fg);}
header{padding:24px 24px 0}
h1{margin:0 0 4px}
p{margin:0; color:var(--muted)}
.grid{display:grid; gap:16px; padding:24px; grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 6px 20px rgb(0 0 0 / 20%)}
label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
input, select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--fg)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}

/* outputs table */
.outputs{width:100%; border-collapse:collapse; margin-top:12px}
.outputs th,.outputs td{border:1px solid var(--border); padding:10px 12px; text-align:right}
.outputs th:first-child,.outputs td:first-child{ text-align:left; font-weight:600; color:var(--muted) }
.outputs thead th{background:rgba(255,255,255,0.04)}