* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#111; }
a { color: inherit; }
button { cursor: pointer; }
input, select { padding: 8px; width: 100%; }

/* Layout */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: #0f172a; color: #fff; padding: 16px; }
.sidebar .logo { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.sidebar nav a { display:block; padding:10px 12px; border-radius:8px; color:#cbd5e1; text-decoration:none; margin-bottom:6px; }
.sidebar nav a.active, .sidebar nav a:hover { background:#1e293b; color:#fff; }

.main { background:#f8fafc; }
.header { display:flex; justify-content:space-between; align-items:center; background:#fff; border-bottom:1px solid #e2e8f0; padding:12px 16px; position:sticky; top:0; }
.content { padding: 16px; }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin-bottom:16px; }
.row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.row-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #e2e8f0; padding:8px; text-align:left; }

.badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef2ff; }
.helper { font-size: 12px; color:#475569; }
.error { color:#b91c1c; }
.success { color:#065f46; }
.red { color:#dc2626; }
.green { color:#16a34a; }
.timer { font-variant-numeric: tabular-nums; font-weight:600; }

.sign-img { max-width: 240px; border:1px solid #e5e7eb; border-radius:8px; }

/* Auth screens */
.auth { max-width: 420px; margin: 64px auto; }
.auth h1 { margin-bottom: 12px; }
.actions { display:flex; gap:8px; align-items:center; }

/* Buttons */
.btn { padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#111827; color:#fff; }
.btn.secondary { background:#fff; color:#111827; }
.btn.link { border:none; background:transparent; padding:0; color:#2563eb; }
.btn.danger { background:#b91c1c; }
.btn.grey { background:#6b7280; }

/* Focus */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.btn.active { outline: 2px solid #0ea5e9; }
.choice-btn.active { background: #e0f2fe; border-color: #0ea5e9; }