:root{
  --pad:16px; --max: 920px;
  --brand:#2b6cff;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffffcc;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body{
  background:
    radial-gradient(1200px 520px at 0% -10%, #f1f6ff, #ffffff 60%) no-repeat,
    linear-gradient(#ffffff, #ffffff) no-repeat;
}
.site-header, main, footer{ max-width: var(--max); margin: 0 auto; padding: var(--pad); }
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #eaeaea; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .logo{ height:34px; width:auto; display:block; }
.brand .brand-title{ font-weight:900; font-size:28px; letter-spacing:.5px; }
@media (min-width: 900px){ .brand .brand-title{ font-size:34px; } }
nav a{ margin-right:14px; text-decoration:none; color:var(--ink); }
nav a:hover{ color:var(--brand); }
h1{ margin:.3em 0 .5em; font-size:32px; }
@media (min-width:900px){ h1{ font-size:40px; } }
h2{ margin:.6em 0 .4em; }
.notice{ background:#f6f8ff; border:1px solid #e1e8ff; padding:12px; border-radius:10px; }
.small{ font-size:12px; color:var(--muted); }
button,input,select,textarea{ width:100%; padding:12px; margin:6px 0; border:1px solid #d0d7de; border-radius:8px; background:white; }
button{ cursor:pointer; color:var(--brand); border-color:var(--brand); font-weight:600; background:#fff; }
button:hover{ background:#f3f7ff; }
.success{ padding:12px; border:1px solid #d1fae5; background:#f0fff9; border-radius:8px; display:none; }
.error{ padding:12px; border:1px solid #fee2e2; background:#fff7f7; border-radius:8px; display:none; }
footer{ border-top:1px solid #eaeaea; color:var(--muted); font-size:14px; }
.card{ background:var(--card); border:1px solid #eef2ff; border-radius:12px; padding:14px; }
@media (max-width:760px){ nav{ display:none; } }