:root{
  --red:#ee1c25;--red-deep:#c30f16;--ink:#22283a;--ink-soft:#5b6070;--muted:#8b909e;
  --paper:#f4f6f6;--surface:#ffffff;--line:#e6e8ec;
  --shadow:0 8px 20px rgba(30,35,50,.08),0 24px 60px rgba(30,35,50,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,#e6eae9,#ffffff 45%,#c5cccf);-webkit-font-smoothing:antialiased}
.serif{font-family:'Playfair Display',Georgia,serif}
.card{width:100%;max-width:420px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);
  padding:44px 40px;animation:in .6s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card .logo{display:flex;justify-content:center;margin-bottom:8px}
.card .logo img{height:40px}
.card .kick{text-align:center;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin:22px 0 6px}
.card h1{text-align:center;font-size:26px;font-weight:600;margin-bottom:26px}
.card label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:0 0 7px}
.card .field{margin-bottom:18px}
.card input{width:100%;padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink);
  background:#fbfcfc;border:1px solid var(--line);border-radius:11px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(238,28,37,.12)}
.card button{width:100%;padding:14px;font-size:15px;font-weight:600;font-family:inherit;color:#fff;
  background:var(--red);border:none;border-radius:11px;cursor:pointer;margin-top:6px;
  box-shadow:0 6px 16px rgba(238,28,37,.28);transition:background .2s var(--ease),transform .15s var(--ease)}
.card button:hover{background:var(--red-deep)}
.card button:active{transform:translateY(1px)}
.msg{border-radius:11px;padding:12px 15px;font-size:14px;margin-bottom:20px}
.msg.err{background:#fbecec;color:#a81219}
.msg.ok{background:#eef6e8;color:#3a7a1e}
.hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:22px;line-height:1.5}
.pwrap{position:relative}
.pwrap button.toggle{position:absolute;right:6px;top:6px;bottom:6px;width:auto;margin:0;padding:0 12px;
  background:none;color:var(--muted);box-shadow:none;font-size:12px;font-weight:600;border-radius:8px}
.pwrap button.toggle:hover{background:#f0f2f2;color:var(--ink)}