@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root { --background:#fff; --foreground:#172033; --card:#fff; --primary:#2563eb; --primary-foreground:#fff; --secondary:#eef2f7; --muted:#64748b; --border:#d8e0ea; --danger:#dc2626; --radius:10px; }
.dark { --background:#101827; --foreground:#f8fafc; --card:#172033; --secondary:#223047; --muted:#a7b4c7; --border:#334155; }
* { box-sizing:border-box; border-color:var(--border); }
body { margin:0; min-width:320px; background:var(--background); color:var(--foreground); font:14px/1.5 'DM Sans',system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { min-height:100vh; display:flex; flex-direction:column; }
.container { width:min(100% - 32px, 960px); margin:0 auto; }
.nav { border-bottom:1px solid var(--border); }
.nav-inner,.topbar { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700; }
.mark { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--primary); color:#fff; font-size:11px; }
.actions,.button-row,.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
main { flex:1; padding:56px 0; }
.hero { max-width:680px; margin:0 auto; text-align:center; }
.eyebrow,.badge { display:inline-flex; border:1px solid var(--border); background:var(--secondary); border-radius:999px; padding:4px 10px; color:var(--muted); font-size:12px; font-weight:600; }
h1 { margin:16px 0 10px; font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-.04em; }
h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
p { margin:0; color:var(--muted); }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mt-6 { margin-top:24px; }.mt-8 { margin-top:32px; }.mt-12 { margin-top:48px; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:20px; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.card-head { display:grid; gap:5px; margin-bottom:16px; }
.btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:0 16px; font-weight:600; transition:.15s ease; }
.btn:hover { filter:brightness(.96); }.btn-primary { background:var(--primary); color:var(--primary-foreground); }.btn-secondary { background:var(--secondary); }.btn-outline { border-color:var(--border); background:transparent; }.btn-danger { background:var(--danger); color:#fff; }
.btn-full { width:100%; }
.form { width:min(100%,420px); margin:0 auto; }.field { display:grid; gap:6px; margin-top:15px; }.field label { font-weight:600; }.field input { width:100%; height:42px; border:1px solid var(--border); border-radius:8px; padding:0 12px; color:var(--foreground); background:var(--background); outline:none; }.field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent); }
.alert { margin-top:14px; color:var(--danger); font-size:13px; }.muted { color:var(--muted); font-size:13px; }.center { text-align:center; }.list { display:grid; gap:10px; padding:0; margin:0; list-style:none; }.list-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border); border-radius:9px; padding:14px; }.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#dbeafe; color:#1d4ed8; font-weight:700; }.person { display:flex; align-items:center; gap:11px; }.stat { font-size:28px; font-weight:700; }.table-wrap { overflow:auto; }.table { width:100%; min-width:600px; border-collapse:collapse; }.table th,.table td { padding:12px 8px; text-align:left; border-bottom:1px solid var(--border); }.table th { color:var(--muted); font-size:12px; }.footer { border-top:1px solid var(--border); padding:22px 0; color:var(--muted); font-size:12px; }.notice { border-left:3px solid var(--primary); background:var(--secondary); padding:12px 14px; color:var(--muted); }.noscript { padding:40px; text-align:center; }
@media (max-width:700px) { .grid-2,.grid-3 { grid-template-columns:1fr; } .nav-inner,.topbar { align-items:flex-start; padding:14px 0; flex-direction:column; } main { padding:36px 0; } .hide-mobile { display:none; } }