:root{--bg1:#0b1020;--bg2:#141a33;--card:#161d3a;--line:#2a335c;--fg:#e8ecff;--muted:#9aa4d0;--acc:#5eead4;--acc2:#a78bfa;--err:#fca5a5;--field:#0f1530}
@media (prefers-color-scheme:light){:root{--bg1:#eef2ff;--bg2:#dbe4ff;--card:#ffffff;--line:#d5dcf5;--fg:#141a33;--muted:#5b6592;--acc:#0f766e;--acc2:#6d28d9;--err:#b91c1c;--field:#f6f8ff}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Sarabun",sans-serif;color:var(--fg);background:radial-gradient(1200px 700px at 15% 10%,var(--bg2),transparent 60%),radial-gradient(900px 600px at 90% 90%,#1e1b4b55,transparent 60%),var(--bg1)}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:0 20px 60px #0006;display:flex;flex-direction:column;gap:12px}
.logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#0b1020;background:linear-gradient(135deg,var(--acc),var(--acc2));margin:0 auto 4px}
h1{margin:0;text-align:center;font-size:26px;letter-spacing:.3px}
.sub{margin:0 0 8px;text-align:center;color:var(--muted);font-size:14px}
label{font-size:13px;color:var(--muted);margin-top:6px}
input[type=password]{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--fg);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
input[type=password]:focus{border-color:var(--acc);box-shadow:0 0 0 3px #5eead433}
button,.btn{display:inline-block;margin-top:10px;padding:13px 16px;border:0;border-radius:12px;font-size:16px;font-weight:600;color:#06121a;background:linear-gradient(135deg,var(--acc),var(--acc2));cursor:pointer;text-align:center;text-decoration:none}
button:hover,.btn:hover{filter:brightness(1.08)}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.err{margin:0;padding:10px 12px;border:1px solid var(--err);border-radius:10px;color:var(--err);font-size:14px;background:#7f1d1d22}
.foot{margin:6px 0 0;text-align:center;color:var(--muted);font-size:12px}