:root {
      --bg:#0a0a0f; --panel:#131318; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
      --txt:#f2f2f7; --txt-2:rgba(235,235,245,.72); --txt-3:rgba(235,235,245,.76); --brand:#5e5ce6; --brand-2:#64d2ff; --neg:#ff453a;
      --grad:linear-gradient(135deg,#5e5ce6,#64d2ff);
    }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
      background:var(--bg); color:var(--txt); font:14px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",sans-serif; letter-spacing:-.008em; -webkit-font-smoothing:antialiased; }
    body::before { content:""; position:fixed; inset:0; z-index:-1;
      background:radial-gradient(700px 420px at 30% 10%,rgba(94,92,230,.09),transparent 60%),radial-gradient(600px 400px at 80% 90%,rgba(100,210,255,.05),transparent 55%); }
    .card { animation:in .5s cubic-bezier(.2,.7,.3,1) both; width:min(380px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:20px;
      padding:34px 30px 28px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
    .brand { display:flex; align-items:center; gap:11px; font-weight:600; font-size:16px; margin-bottom:6px; letter-spacing:-.015em; }
    .logo { width:28px; height:28px; border-radius:8px; background:var(--grad); box-shadow:0 2px 10px rgba(94,92,230,.3); position:relative; }
    .logo::after { content:""; position:absolute; inset:6px; border-radius:4px; background:var(--bg); opacity:.55; }
    .sub { color:var(--txt-3); font-size:12.5px; margin-bottom:24px; }
    label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-3); font-weight:600; margin:14px 0 6px; }
    input { width:100%; background:#0e0e13; border:1px solid var(--line-2); color:var(--txt); border-radius:11px;
      padding:11px 13px; font-size:14px; font-family:inherit; transition:border-color .15s; }
    input:focus { outline:none; border-color:var(--brand); }
    button { width:100%; margin-top:22px; border:none; border-radius:11px; padding:12px; font-size:14px; font-weight:600; font-family:inherit;
      background:var(--brand); color:#fff; cursor:pointer; transition:opacity .15s, transform .12s; }
    button:hover { opacity:.92; } button:active { transform:scale(.98); }
    button:disabled { opacity:.55; cursor:wait; }
    @keyframes in { from { opacity:0; transform:translateY(10px) scale(.985); } }
    input:focus-visible, button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
    .err { color:var(--neg); font-size:12.5px; min-height:18px; margin-top:12px; }