:root{--bg:#e7efe8;--bg-2:#d5e4d9;--ink:#101814;--muted:#5a6b60;--panel:#fffcf7eb;--line:#1018141f;--accent:#0f6b4c;--accent-2:#148f66;--danger:#9b2f2f;--ok:#1f6b3a;--shadow:0 24px 60px #1018141f;--radius:18px;--font:"Manrope", sans-serif;--display:"Fraunces", Georgia, serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--ink);background:radial-gradient(ellipse 80% 50% at 10% 0%, #148f662e, transparent 55%), radial-gradient(ellipse 60% 40% at 90% 10%, #10181414, transparent 50%), linear-gradient(165deg, var(--bg), var(--bg-2));background-attachment:fixed;margin:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.brand{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;font-size:1.35rem;font-weight:700;text-decoration:none}.brand:hover{color:var(--accent);text-decoration:none}.page-center{place-items:center;min-height:100vh;display:grid}.muted{color:var(--muted)}.auth-page{place-items:center;min-height:100vh;padding:2rem 1rem;display:grid}.auth-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:min(420px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem 1.75rem 1.75rem;animation:.45s both rise}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.auth-panel .brand{margin-bottom:1.25rem;display:inline-block}.auth-title{font-family:var(--display);letter-spacing:-.03em;margin:0;font-size:clamp(1.75rem,4vw,2.1rem);line-height:1.15}.auth-sub{color:var(--muted);margin:.5rem 0 1.4rem;line-height:1.5}.auth-footer{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.25rem;font-size:.95rem;display:flex}.auth-footer .dot{opacity:.5}.form{gap:.9rem;display:grid}.field{gap:.4rem;display:grid}.field span{font-size:.88rem;font-weight:600}.field input{border:1px solid var(--line);width:100%;font:inherit;color:var(--ink);background:#fff;border-radius:12px;outline:none;padding:.8rem .9rem;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0f6b4c26}.hint{color:var(--muted);font-size:.8rem}.form-error,.form-success{border-radius:12px;margin:0 0 .75rem;padding:.7rem .85rem;font-size:.92rem}.form-error{color:var(--danger);background:#9b2f2f1a}.form-success{color:var(--ok);background:#1f6b3a1a}.btn{font:inherit;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.4rem;padding:.85rem 1.1rem;font-weight:700;text-decoration:none;transition:transform .15s,background .15s,opacity .15s;display:inline-flex}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);color:#f4faf6}.btn-primary:hover{background:var(--accent-2)}.btn-secondary{color:var(--ink);border:1px solid var(--line);background:0 0}.btn-ghost{color:var(--ink);border:1px solid var(--line);background:0 0;padding:.55rem .9rem}.btn-danger{background:var(--danger);color:#fff}.btn-logout{background:var(--danger);color:#fff;padding:.55rem .9rem}.btn-logout:hover{background:#7e2424}.btn-google{gap:.65rem}.google-icon{flex-shrink:0}.landing{flex-direction:column;min-height:100vh;display:flex}.landing-top{padding:1.1rem clamp(1rem,4vw,2.5rem)}.landing-hero{flex-direction:column;flex:1;justify-content:center;align-items:flex-start;width:min(640px,100% - 2rem);margin:0 auto;padding:2rem 0 4rem;animation:.5s both rise;display:flex}.landing-brand{font-family:var(--display);letter-spacing:-.04em;margin:0;font-size:clamp(3rem,10vw,4.75rem);line-height:.95}.landing-tagline{color:var(--muted);max-width:28rem;margin:1.1rem 0 0;font-size:1.15rem;line-height:1.55}.landing-actions{flex-wrap:wrap;gap:.75rem;margin-top:2rem;display:flex}.landing-actions .btn{min-width:8.5rem}.tabs{background:#1018140d;border-radius:12px;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1rem;padding:.3rem;display:grid}.tab{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:.55rem .4rem;font-weight:600}.tab.active{color:var(--ink);background:#fff;box-shadow:0 1px 4px #10181414}.app-shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffcf7a6;justify-content:space-between;align-items:center;padding:1.1rem clamp(1rem,4vw,2.5rem);display:flex}.topbar-actions{align-items:center;gap:.85rem;display:flex}.text-link{color:var(--ink);font-weight:600}.home,.security{width:min(860px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem;animation:.4s both rise}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 .5rem;font-size:.75rem;font-weight:700}.home h1,.security h1{font-family:var(--display);letter-spacing:-.03em;margin:0;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.05}.lede{color:var(--muted);max-width:38rem;margin:.9rem 0 0;font-size:1.05rem;line-height:1.6}.home-hero{align-items:center;gap:1.25rem;margin-bottom:2rem;display:flex}.home-avatar{width:4.25rem;height:4.25rem;font-family:var(--display);color:#f4faf6;background:linear-gradient(145deg, var(--accent), #0a4d37);border-radius:18px;flex-shrink:0;place-items:center;font-size:1.75rem;font-weight:700;display:grid;box-shadow:0 12px 28px #0f6b4c47}.home-email{color:var(--muted);margin:.45rem 0 0;font-size:1.05rem}.home-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.home-card{border:1px solid var(--line);background:#fffcf7c7;border-radius:16px;flex-direction:column;gap:.45rem;min-height:10.5rem;padding:1.2rem 1.2rem 1.3rem;display:flex}.home-card strong{font-size:1.15rem}.home-card p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.45}.home-card-action{justify-content:flex-start;gap:.75rem}.home-card-action .btn{width:fit-content;margin-top:.2rem}.status-on{color:var(--ok)}.status-off{color:var(--muted)}.meta-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.1rem;font-size:.78rem;font-weight:700;display:block}.security-block{border:1px solid var(--line);background:#fffcf7bf;border-radius:16px;margin-top:1.75rem;padding:1.25rem}.security-block h2{font-family:var(--display);margin:0 0 .75rem;font-size:1.35rem}.qr{background:#fff;border-radius:12px;width:min(220px,100%);margin:.5rem 0 1rem;display:block}.backup-list{gap:.4rem;margin:.75rem 0 0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;list-style:none;display:grid}.backup-list li{background:#1018140d;border-radius:10px;padding:.55rem .75rem}.security>.btn{margin-top:1.5rem}@media (width<=800px){.home-grid{grid-template-columns:1fr}}@media (width<=540px){.auth-panel{padding:1.5rem 1.15rem}.topbar{gap:.75rem}.home-hero{align-items:flex-start}.landing-actions{width:100%}.landing-actions .btn{flex:1}}.signup-steps{gap:.45rem;margin-bottom:1.4rem;display:flex}.signup-step-dot{background:var(--line);border-radius:4px;flex:1;height:4px;transition:background .3s}.signup-step-dot.active{background:var(--accent)}.signup-step-dot.done{background:var(--accent-2);opacity:.5}.otp-input{letter-spacing:.35em;text-align:center;font-size:1.35rem;font-weight:700}.signup-row{gap:.5rem;display:flex}.signup-row .btn{flex:1;font-size:.88rem}.input-with-action{align-items:center;display:flex;position:relative}.input-with-action input{padding-right:2.8rem}.toggle-password-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.25rem;transition:color .15s;display:flex;position:absolute;right:.75rem}.toggle-password-btn:hover{color:var(--ink)}.password-checklist{border:1px solid var(--line);background:#10181408;border-radius:10px;gap:.35rem;margin-top:.4rem;padding:.6rem .75rem;font-size:.8rem;display:grid}.checklist-item{color:var(--muted);align-items:center;gap:.4rem;transition:color .2s;display:flex}.checklist-item.valid{color:var(--ok);font-weight:600}.checklist-item .check-icon{flex-shrink:0;width:14px;height:14px}.not-found-card{border:1px dashed var(--danger);background:#9b2f2f0f;border-radius:12px;flex-direction:column;gap:.5rem;margin-top:.75rem;padding:.85rem;display:flex}.not-found-card p{color:var(--danger);margin:0;font-size:.85rem}