@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root { --bg:#f8fafc; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --pri:#4f46e5; --pri-d:#4338ca; --err:#e11d48; }
@media (prefers-color-scheme: dark) { :root { --bg:#090d16; --card:#131b2e; --text:#f1f5f9; --muted:#94a3b8; --line:#1e293b; --pri:#6366f1; --pri-d:#4f46e5; --err:#fb7185; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; color:var(--text);
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  background: radial-gradient(900px 500px at 15% -10%, rgba(79,70,229,.18), transparent 60%), radial-gradient(700px 420px at 100% 110%, rgba(139,92,246,.16), transparent 60%), var(--bg); }
.wrap { width:100%; max-width:410px; }
.logo { display:flex; align-items:center; justify-content:center; gap:12px; font-weight:800; font-size:1.55rem; letter-spacing:-.02em; }
.logo::before { content:''; width:40px; height:40px; border-radius:10px; flex:none; box-shadow:0 6px 16px rgba(79,70,229,.4);
  background: linear-gradient(135deg,#4f46e5,#8b5cf6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/22px no-repeat; }
.tag { text-align:center; color:var(--muted); font-size:.9rem; margin:10px 0 22px; line-height:1.5; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px -12px rgba(15,23,42,.18); }
.tabs { display:flex; gap:4px; background:var(--bg); border:1px solid var(--line); padding:4px; border-radius:10px; margin-bottom:16px; }
.tabs button { flex:1; border:none; background:transparent; color:var(--muted); padding:9px; border-radius:8px; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer; }
.tabs button.on { background:var(--pri); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.35); }
label { display:block; font-size:.8rem; color:var(--muted); margin:12px 0 5px; font-weight:600; }
input { width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; font-size:1rem; }
input:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 3px rgba(79,70,229,.18); }
.primary { width:100%; margin-top:18px; padding:13px; border:none; border-radius:8px; background:var(--pri); color:#fff; font:inherit; font-weight:700; font-size:.95rem; cursor:pointer; transition:background .15s; }
.primary:hover { background:var(--pri-d); }
.primary:disabled { opacity:.6; cursor:wait; }
.err { color:var(--err); font-size:.86rem; min-height:1.2em; margin:10px 0 0; text-align:center; }
.note { font-size:.84rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; margin:0 0 6px; }
.hidden { display:none; }