:root{
    --bg:#ffffff; --fg:#0b0f17; --muted:#6b7280; --card:#ffffff;
    --border:#e5e7eb; --accent:#111827; --accent-fg:#ffffff;
    --ring:rgba(17,24,39,.15); --radius:14px;
}
@media (prefers-color-scheme: dark){
    :root{
        --bg:#0b0f17; --fg:#e5e7eb; --muted:#9ca3af; --card:#0f1522;
        --border:#1f2937; --accent:#f3f4f6; --accent-fg:#0b0f17;
        --ring:rgba(243,244,246,.18);
    }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; background:var(--bg); color:var(--fg);
    font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    display:grid; place-items:center; padding:24px;
}
.wrap{width:100%; max-width:380px}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:24px; user-select:none}
.brand__logo{width:36px; height:36px; border-radius:9px; background: radial-gradient(100% 100% at 100% 0%, rgba(0,0,0,.1), rgba(0,0,0,0)), linear-gradient(135deg,#6366f1,#06b6d4)}
.brand__name{font-weight:600; letter-spacing:.2px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:0 20px 40px -20px var(--ring)}
.title{margin:0 0 6px; font-size:20px; font-weight:600}
.subtitle{margin:0 0 18px; color:var(--muted); font-size:14px}
.field{margin-bottom:14px}
.label{display:block; font-size:13px; margin-bottom:6px; color:var(--muted)}
.control{position:relative}
input[type="email"],input[type="password"],input[type="text"]{
    width:100%; border:1px solid var(--border); background:transparent; color:var(--fg);
    border-radius:10px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:transparent; box-shadow:0 0 0 4px var(--ring)}
.toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:6px; cursor:pointer; color:var(--muted); font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; margin:8px 0 18px; gap:10px}
.checkbox{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); user-select:none}
.checkbox input{width:16px; height:16px}
.link{font-size:13px; color:inherit; opacity:.75; text-underline-offset:2px}
.link:hover{opacity:1}
.btn{width:100%; border:0; border-radius:10px; padding:12px 14px; background:var(--accent); color:var(--accent-fg); font-weight:600; cursor:pointer}
.btn:disabled{opacity:.5; cursor:not-allowed}
.or{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:16px 0}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--border)}
.oauth{display:flex; gap:10px}
.oauth button{flex:1; border:1px solid var(--border); background:transparent; color:inherit; border-radius:10px; padding:10px 12px; cursor:pointer}
.legal{margin-top:16px; font-size:12px; color:var(--muted)}
.error{color:#dc2626; font-size:13px; margin:0 0 8px}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}