:root{color-scheme:dark;--panel:rgba(67,135,201,.62);--panel-border:rgba(255,255,255,.24);--field:rgba(143,190,235,.38);--text:#fff;--muted:rgba(255,255,255,.78)}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;padding:32px 20px;display:grid;place-items:center;overflow-x:hidden;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 82% 72%,rgba(8,194,255,.76) 0,rgba(8,154,229,.34) 27%,transparent 54%),linear-gradient(120deg,#003866 0%,#004b88 48%,#0869bc 100%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(0,20,55,.18),transparent 55%)}
.auth-box,.login-box{position:relative;z-index:1;width:min(470px,100%);padding:56px 50px 46px;border:1px solid var(--panel-border);border-radius:30px;background:var(--panel);box-shadow:0 26px 55px rgba(0,34,75,.42),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 35px}.brand-mark{width:42px;height:42px;overflow:hidden;color:transparent;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Z'/%3E%3C/svg%3E")}.brand-name{font-size:37px;font-weight:750;line-height:1}
h1{margin:0 0 12px;text-align:center;font-size:30px}.subtitle{margin:0 0 28px;text-align:center;color:var(--muted);font-size:16px;line-height:1.55}label{display:block;margin:0 0 8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.92)}
.field{width:100%;height:62px;margin:0 0 20px;padding:0 20px;border:1px solid transparent;border-radius:16px;outline:0;background:var(--field);color:#fff;font:inherit;font-size:17px;transition:.18s ease}.field::placeholder{color:rgba(255,255,255,.68)}.field:focus{border-color:rgba(255,255,255,.72);background:rgba(151,202,247,.48);box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.remember-row{display:flex;align-items:center;margin:0 0 20px}.remember-row input{width:18px;height:18px;margin:0 9px 0 0;accent-color:#06bdf1}.remember-row label{margin:0;color:rgba(255,255,255,.9);font-weight:500;cursor:pointer}
.forgot-link,.back-link{display:block;color:#fff;font-size:14px;text-decoration:none}.forgot-link{margin:-8px 0 18px;text-align:right}.back-link{margin-top:22px;text-align:center;color:rgba(255,255,255,.84)}.forgot-link:hover,.back-link:hover{text-decoration:underline}
button,.button-link{display:grid;place-items:center;width:100%;min-height:62px;padding:0 20px;border:0;border-radius:17px;background:linear-gradient(110deg,#16d4f1 0%,#0783ff 88%);box-shadow:0 13px 26px rgba(0,105,230,.22);color:#fff;font:inherit;font-size:19px;font-weight:750;text-decoration:none;cursor:pointer;transition:transform .18s,filter .18s}button:hover,.button-link:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active,.button-link:active{transform:translateY(1px)}
.notice{margin:0 0 24px;padding:18px 20px;border:1px solid;border-radius:16px;text-align:center;font-size:15px;line-height:1.5}.error{border-color:#ff9c9c;background:#f9d5d9;color:#672024}.success{border-color:#8ee4bd;background:#d8f6e7;color:#145637}
@media(max-width:520px){body{padding:18px}.auth-box,.login-box{padding:38px 24px 32px;border-radius:24px}.brand{margin-bottom:28px}.brand-name{font-size:32px}.brand-mark{width:38px;height:38px}}