/* Mobile-first, minimal */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#2563eb;
  --primary2:#1d4ed8;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:min(980px, 100%); margin:0 auto; padding:16px; }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
}
.header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
}
.logo::before{
  content:"♥";
  color:#22c55e;
  font-size:45px;
  line-height:1;
}
.brand h1{ font-size:18px; margin:0; }
.brand p{ margin:0; font-size:13px; color:var(--muted); }
.nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.nav a{ padding:8px 10px; border:1px solid var(--border); border-radius:999px; font-size:14px; background:#fff; }
.nav a.active{ border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.06); }
h2{ font-size:20px; margin:0 0 10px 0; }
h3{ font-size:16px; margin:16px 0 8px 0; }
.muted{ color:var(--muted); }
.form{ display:grid; gap:12px; margin-top:8px; }
.label{ font-size:14px; font-weight:600; margin-bottom:6px; }
.input{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:16px;
  background:#fff;
}
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  flex:1 1 auto;
  min-width:110px;
}
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ background:var(--primary2); border-color:var(--primary2); }
.alert{ padding:12px; border-radius:12px; border:1px solid var(--border); background:#fff; font-size:14px; margin-top:10px; }
.alert.error{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.06); }
.alert.ok{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.06); }
.footer{ margin-top:14px; font-size:13px; color:var(--muted); }
@media (min-width: 640px){
  .card{ padding:22px; }
  .brand h1{ font-size:20px; }
}