:root{
    --bg:#0f172a; --fg:#111; --muted:#6b7280; --card:#fff; --border:#e5e7eb;
    --primary:#2563eb; --success:#16a34a; --warn:#f59e0b; --text:#111; --link:#2563eb;
    --radius:12px; --container:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:#fafafa}

.container{max-width:var(--container); margin:0 auto; padding:0 16px}
.header{background:var(--bg); color:#fff; padding:24px 0}
.footer{background:#111; color:#fff; padding:16px 0; margin-top:24px}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:16px 0}
.card.subtle{background:#fcfcfc}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-compact{display:grid; grid-template-columns:1fr 1fr auto; gap:12px}
@media (max-width:1024px){ .grid, .grid-compact{grid-template-columns:1fr} }

.field{display:flex; flex-direction:column; gap:6px}
input, select{padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:16px; width:100%}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#f6f7f9; cursor:pointer; font-size:16px}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.success{background:var(--success); color:#fff; border-color:transparent}
.btn.warn{background:var(--warn); color:#111; border-color:transparent}
.btn.disabled, .btn:disabled{opacity:.5; cursor:not-allowed}

.slots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.slot{min-width:84px; text-align:center}

@media (prefers-color-scheme: dark){
    body{background:#0b1220; color:#e5e7eb}
    .card{background:#0f172a; border-color:#1f2937}
    input, select{background:#0f172a; color:#e5e7eb; border-color:#1f2937}
    .btn{background:#0b1526; color:#e5e7eb; border-color:#1f2937}
}