:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --nav: #07111f;
  --nav-2: #111c2e;
  --accent: #1d4ed8;
  --accent-2: #0ea5e9;
  --border: #dbe4f0;
  --danger: #dc2626;
  --warning: #f59e0b;
  --success: #16a34a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--text); background: var(--bg); }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eef4fb; }
.login-panel { width: min(440px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: 0 18px 55px rgba(15, 23, 42, .14); }
.login-panel h1 { font-size: 28px; margin-top: 18px; }
.login-brand { color: var(--text); margin-bottom: 0; }
.login-brand .brand span { color: var(--muted); }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; background: linear-gradient(180deg, var(--nav), var(--nav-2)); color: white; padding: 22px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:800; }
.brand span { display: block; color: #a8b3c5; font-size: 12px; margin-top: 2px; }
nav a { display: block; color: #cbd5e1; text-decoration: none; padding: 11px 12px; border-radius: 10px; margin-bottom: 4px; font-weight: 600; }
nav a:hover, nav a.active { background: rgba(255,255,255,.10); color: #fff; }
.side-footer { border-top: 1px solid rgba(255,255,255,.12); margin-top: 20px; padding-top: 16px; display:grid; grid-template-columns: 1fr; gap: 4px; color:#a8b3c5; font-size:12px; }
.side-footer strong { color: white; font-size: 14px; margin-bottom: 8px; }
.main { margin-left: 270px; padding: 28px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap: 20px; margin-bottom: 22px; }
.actions { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }
h1 { margin: 0; font-size: 32px; letter-spacing: -0.03em; }
h2 { margin-top: 0; font-size: 19px; }
h3 { margin-bottom: 6px; font-size: 14px; color: #334155; }
p { color: var(--muted); line-height: 1.5; }
button, .button { border: 0; background: var(--accent); color: white; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor:pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { filter: brightness(1.05); }
button.secondary, .button.secondary { background: #e2e8f0; color: #0f172a; }
.grid.cards { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 10px 28px rgba(15, 23, 42, .06); overflow: hidden; }
.card.full { margin-bottom: 16px; }
.metric span { display:block; color: var(--muted); font-size: 13px; font-weight: 700; }
.metric strong { display:block; margin-top: 10px; font-size: 34px; color: var(--accent); }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align:left; color: #334155; background: #f1f5f9; font-size: 12px; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:hover td { background: #f8fafc; }
pre { margin: 0; white-space: pre-wrap; font-family: inherit; color: #1e293b; line-height: 1.45; }
.pill { display:inline-block; border-radius: 999px; padding: 3px 9px; font-weight: 800; font-size: 11px; background: #e2e8f0; color: #334155; }
.pill.p0 { background: #fee2e2; color: #991b1b; }
.pill.p1 { background: #ffedd5; color: #9a3412; }
.pill.p2 { background: #fef9c3; color: #854d0e; }
.pill.p3, .pill.p4 { background: #dcfce7; color: #166534; }
.notice { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; background: #dbeafe; color: #1e3a8a; font-weight: 700; }
.notice.error { background: #fee2e2; color: #991b1b; }
.hidden { display:none; }
.stack { display:grid; gap: 12px; }
.inline-form { grid-template-columns: 1fr auto; align-items:center; }
label { font-weight: 700; color: #334155; display:grid; gap: 6px; }
input { border:1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; }
textarea, select { border:1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; width: 100%; background: #fff; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 0; }
legend { font-weight: 800; color: #334155; padding: 0 6px; }
code { display:block; background:#0f172a; color:#e2e8f0; padding: 12px; border-radius: 10px; overflow:auto; }
.table-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brief-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.settings-table th { width: 220px; }
.checkin-hero { display:flex; align-items:center; justify-content:space-between; gap: 18px; }
.form-grid { display:grid; gap: 14px; }
.form-hint { margin: 0; color:#64748b; font-weight:700; }
.required-pill { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px; border-radius:999px; background:#dbeafe; color:#1e40af; font-size:12px; font-weight:800; }
.compact-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items:end; }
.inline-panel { border:1px solid var(--border); border-radius: 8px; padding: 14px; display:grid; gap: 12px; background:#f8fafc; }
.inline-panel h3 { margin: 0; font-size: 16px; color:#0f172a; }
.score-row { display:grid; grid-template-columns: repeat(10, minmax(42px, 1fr)); gap: 6px; }
.score-row.compact { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
.score-row label, .checkbox-line { display:flex; align-items:center; gap: 6px; font-weight:700; }
.question-list { color:#334155; line-height:1.7; margin-bottom:0; }
.inline-actions { display:grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items:center; }
@media (max-width: 1100px) { .grid.cards { grid-template-columns: repeat(2, 1fr); } .two-col, .brief-grid { grid-template-columns: 1fr; } .sidebar { position: static; width: auto; } .main { margin-left: 0; } }
@media (max-width: 640px) { .grid.cards { grid-template-columns: 1fr; } .topbar, .checkin-hero { flex-direction: column; align-items: stretch; } .main { padding: 16px; } table { font-size: 12px; } .score-row, .score-row.compact, .compact-form, .inline-actions, .inline-panel { grid-template-columns: 1fr; } }