:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --muted:#94a3b8; /* slate-400 */
  --text:#e5e7eb; /* gray-200 */
  --accent:#22c55e; /* green-500 */
  --accent-2:#3b82f6; /* blue-500 */
  --warn:#f59e0b; /* amber-500 */
  --danger:#ef4444; /* red-500 */
  --border:#1f2937; /* gray-800 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text);
}
header,footer{padding:1rem 1.25rem;}
header{border-bottom:1px solid var(--border)}
footer{border-top:1px solid var(--border); color:var(--muted); font-size:.9rem}
main{max-width:1100px; margin:1rem auto 3rem; padding:0 1rem; display:grid; gap:1rem}

h1,h2,legend{margin:.2rem 0 .6rem}
h1{font-size:1.6rem}
h2{font-size:1.25rem}

.card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:1rem}

.grid{display:grid; gap:.75rem; grid-template-columns:repeat(4, minmax(0,1fr))}
.grid-1{grid-template-columns:1fr}
@media (max-width: 900px){.grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.grid{grid-template-columns:1fr}}

label{display:flex; flex-direction:column; gap:.3rem; font-size:.95rem; color:var(--text)}
input[type="text"], input[type="number"], input[type="date"], select{
  background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.6rem .7rem;
}
.checkbox{flex-direction:row; align-items:center; gap:.6rem}
.hint{color:var(--muted); font-size:.9rem}

.actions{display:flex; gap:.6rem; margin-top:.6rem}
button{
  appearance:none; border:1px solid var(--border); background:var(--accent-2); color:white; padding:.6rem .9rem; border-radius:8px; cursor:pointer; font-weight:600
}
button.secondary{background:transparent; color:var(--text)}
button:disabled{opacity:.6; cursor:not-allowed}

.summary-grid{display:grid; gap:.4rem; grid-template-columns:repeat(3, minmax(0,1fr))}
.summary-item{background:#0b1220; border:1px solid var(--border); border-radius:8px; padding:.6rem}
.summary-item h3{margin:.1rem 0 .3rem; font-size:1rem}
.summary-item p{margin:0; color:var(--muted)}

canvas{background:#0b1220; border:1px solid var(--border); border-radius:8px;}

.table-container{margin-top:1rem; overflow:auto}
table{width:100%; border-collapse:collapse;}
th,td{padding:.5rem .6rem; border-bottom:1px solid var(--border); text-align:left}
th{position:sticky; top:0; background:#0d1424}
.badge{display:inline-block; padding:.1rem .4rem; border-radius:999px; border:1px solid var(--border); font-size:.8rem}
.badge.min{background:#0a1b10; color:#86efac; border-color:#064e3b}
.badge.extra{background:#0a1421; color:#93c5fd; border-color:#1e3a8a}
.badge.unknown{background:#1f2937; color:#e5e7eb}