:root { --brand:#0ea5e9; --ink:#0f172a; --muted:#64748b; --bg:#f8fafc; }

* { box-sizing: border-box; }

body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; background:#f1f5f9; color:var(--ink); }

.wrap { max-width:1000px; margin:24px auto; padding:0 12px; }

h1 { margin:0 0 4px; font-size:26px; }

.sub { color:var(--muted); margin:0 0 16px; }

.grid { display:grid; grid-template-columns: 1fr; gap:16px; }

@media (min-width:880px){ .grid { grid-template-columns: 3fr 2fr; } }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; box-shadow:0 10px 24px rgba(2,6,23,.06); }

.card h2, .card h3 { margin-top:0; }

label { display:block; font-size:14px; margin:10px 0 6px; }

input, select { width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:14px; }

.two { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

@media (max-width:540px){ .two { grid-template-columns:1fr; } }

.btns { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }

button { padding:10px 14px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; }

button.primary { background:var(--brand); color:#fff; border-color:var(--brand); }

button.success { background:#10b981; color:#fff; border-color:#10b981; }

button:disabled { opacity:.6; cursor:not-allowed; }

.muted { color:var(--muted); font-size:12px; }

.tip { background: linear-gradient(120deg, #e0f2fe, #f0fdfa); }

.result-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:10px; }

.result { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px; text-align:center; }

.status.pass { background:#ecfdf5; }

.status.fail { background:#fffbeb; }

footer { color:var(--muted); font-size:12px; margin:14px 2px 40px; text-align:center; }