:root { --red:#DF0000; --red-dark:#B80000; --ink:#1d1d1b; --muted:#6b6b6b; --line:#dcdcdc; --bg:#f4f4f4; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
body::before { content:""; position:fixed; right:-12vmax; bottom:-12vmax; width:55vmax; height:55vmax; background:url(/public/logo-spiral.png) center/contain no-repeat; opacity:.06; pointer-events:none; }
.wrap { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; position:relative; }
.card { width:100%; max-width:410px; background:#fff; border-radius:14px; padding:34px 32px 30px; box-shadow:0 12px 40px rgba(0,0,0,.10); border-top:5px solid var(--red); }
.logo { display:block; width:210px; max-width:70%; margin:0 auto 22px; }
h1 { font-size:21px; text-align:center; margin:0 0 4px; font-weight:650; }
.sub { text-align:center; color:var(--muted); margin:0 0 24px; font-size:14px; }
label { display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
input[type=text], input[type=password] { width:100%; padding:12px 13px; font:inherit; border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
input:focus-visible { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(223,0,0,.15); }
.pw { position:relative; }
.pw input { padding-right:78px; }
.ghost { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:600; padding:6px 10px; cursor:pointer; border-radius:6px; }
.ghost:hover { color:var(--ink); background:#f0f0f0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.captcha { margin-top:2px; padding:10px 12px 14px; background:#fff6f6; border:1px solid #f3c9c9; border-radius:9px; margin-top:14px; }
.captcha label { margin-top:4px; font-size:15px; }
.msg { min-height:22px; margin:12px 0 4px; font-size:14px; color:var(--red-dark); }
.msg.info { color:var(--muted); }
.primary { width:100%; padding:13px; border:0; border-radius:9px; background:var(--red); color:#fff; font:inherit; font-weight:700; cursor:pointer; transition:background .15s; }
.primary:hover:not(:disabled) { background:var(--red-dark); }
.primary:focus-visible { outline:3px solid rgba(223,0,0,.35); outline-offset:2px; }
.primary:disabled { background:#c9c9c9; cursor:not-allowed; }
.foot { margin-top:18px; font-size:12px; color:var(--muted); text-align:center; max-width:410px; }