:root { --green:#10B981; --green-dark:#059669; --ink:#111827; --text:#374151; --muted:#6B7280;
  --bg:#F9FAFB; --card:#fff; --border:#E5E7EB; --danger:#DC2626; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
button, input { font:inherit; }
.btn { width:100%; background:var(--green); color:#fff; border:0; border-radius:12px; padding:14px; font-weight:700; font-size:16px; cursor:pointer; }
.btn:disabled { opacity:.5; }
.btn.ghost { background:var(--card); color:var(--ink); border:1px solid var(--border); }
.link { background:none; border:0; color:var(--green-dark); font-weight:600; cursor:pointer; padding:8px 0; }
.center { text-align:center; margin-top:10px; }
.field { display:block; margin:12px 0; }
.field span { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input { width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text); margin:14px 0; }
.msg { margin:10px 0; font-size:14px; min-height:20px; }
.msg.err { color:var(--danger); }
.msg.ok { color:var(--green-dark); }
.auth { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.auth .card { width:100%; max-width:400px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px 22px; }
.logo { width:64px; height:64px; border-radius:18px; background:var(--green); color:#fff; font-size:30px; font-weight:800; display:grid; place-items:center; margin:0 auto 10px; }
.auth h1 { font-size:20px; text-align:center; margin:4px 0 2px; }
.auth .sub { text-align:center; color:var(--muted); font-size:14px; margin:0 0 14px; }
.shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:var(--card); border-bottom:1px solid var(--border); padding:14px 16px; font-weight:700; display:flex; align-items:center; gap:10px; }
.topbar .logo { width:34px; height:34px; border-radius:10px; font-size:17px; margin:0; }
.content { flex:1; padding:16px; padding-bottom:84px; max-width:720px; width:100%; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; }
.card h2 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--text); font-size:14px; line-height:1.5; }
.tabs { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--border); display:flex; padding-bottom:env(safe-area-inset-bottom); }
.tabs button { flex:1; background:none; border:0; padding:10px 4px 8px; font-size:11px; color:var(--muted); cursor:pointer; }
.tabs button .ic { display:block; font-size:20px; }
.tabs button.on { color:var(--green-dark); font-weight:700; }
.tabs button:disabled { opacity:.4; }
.doc { max-width:720px; margin:0 auto; padding:24px 16px; line-height:1.6; color:var(--ink); }
@media (min-width: 900px) {
  .shell { flex-direction:row; }
  .tabs { position:sticky; top:0; height:100vh; width:220px; flex-direction:column; border-top:0; border-right:1px solid var(--border); padding:16px 10px; }
  .tabs button { flex:0; text-align:left; font-size:15px; padding:12px; border-radius:10px; display:flex; gap:10px; align-items:center; }
  .tabs button.on { background:#D1FAE5; }
  .tabs button .ic { font-size:18px; }
  .main { flex:1; display:flex; flex-direction:column; }
  .content { padding:28px; }
}