:root{ --bg:#0f172a; --card:#111827; --border:#1f2937; --text:#e5e7eb; --muted:#94a3b8;
         --ok:#22c55e; --err:#ef4444; --grad-a:#22c55e; --grad-b:#16a34a; --input:#0b1220;
         --shadow:0 10px 30px rgba(0,0,0,.35); --radius:12px; }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
       display:flex;justify-content:center;align-items:center;min-height:100vh;}
  .card{background:var(--card);padding:20px;border-radius:var(--radius);border:1px solid var(--border);
        width:420px;max-width:92vw;box-shadow:var(--shadow);}
  h2{margin:0 0 12px 0}
  label{font-size:12px;color:var(--muted);display:block;margin-top:8px}
  input{width:100%;padding:10px;margin-top:8px;border:1px solid var(--border);border-radius:10px;
        background:var(--input);color:#fff;outline:0;transition:border-color .15s, box-shadow .15s;}
  input::placeholder{color:#9ca3af}
  input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
  button{width:100%;padding:10px;border:0;border-radius:10px;margin-top:12px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
         color:#041;font-weight:700;cursor:pointer;transition:transform .05s;}
  button:active{transform:scale(0.995)}
  .alert{border:1px solid #7f1d1d;background:#1f0b0b;color:#fca5a5;padding:10px;border-radius:10px;margin:10px 0;font-size:14px;}
  .success{border:1px solid #14532d;background:#052e1a;color:#86efac;padding:10px;border-radius:10px;margin:10px 0;font-size:14px;}
  .actions{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
  .btn-secondary{display:inline-block;text-decoration:none;border:1px solid var(--border);padding:10px 12px;border-radius:10px;
                 color:#e5e7eb;background:transparent;transition:background .15s,border-color .15s,transform .05s;}
  .btn-secondary:hover{ background:rgba(255,255,255,.03); border-color:#273449; }
  .btn-secondary:active{ transform:scale(0.995) }
  @media (max-width:380px){ .card{padding:16px} }