*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    :root{--bg:#0d0f14;--surface:#151820;--border:#2a2f42;--accent:#4f8ef7;--accent2:#7c5cfc;--accent3:#38c9a8;--text:#e8eaf2;--muted:#7a7f96;}
    html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);}
    body{display:flex;align-items:center;justify-content:center;padding:20px;}
    .box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px 30px;text-align:center;position:relative;overflow:hidden;}
    .box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
    .lock{width:54px;height:54px;border-radius:14px;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
    .lock svg{width:26px;height:26px;fill:var(--accent);}
    h1{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;margin-bottom:8px;}
    p.sub{font-size:0.82rem;color:var(--muted);line-height:1.6;margin-bottom:22px;}
    input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:16px;outline:none;font-family:'DM Sans',sans-serif;transition:border-color .2s;margin-bottom:12px;}
    input:focus{border-color:var(--accent);}
    button{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:0.9rem;font-weight:600;padding:12px;border:none;border-radius:10px;cursor:pointer;transition:opacity .2s;font-family:'DM Sans',sans-serif;}
    button:hover{opacity:.88;}
    .err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5;font-size:0.78rem;padding:9px;border-radius:8px;margin-bottom:14px;}
    .foot{margin-top:18px;font-size:0.7rem;color:var(--muted);letter-spacing:0.04em;}