:root{--bg:#121417;--card:#1b1e23;--line:#2b3037;--input:#22262c;--ink:#e8eaed;--muted:#8d939c;--accent:#5ee0b0;--accent-h:#8ff0cc;--onacc:#0b1a14;--link:#7ae8c0;--r:14px}
:root[data-theme=light]{--bg:#eef1f4;--card:#fff;--line:#dbe0e6;--input:#f3f5f8;--ink:#1b1e22;--muted:#69717c;--accent:#1f9d6c;--accent-h:#17825a;--onacc:#fff;--link:#1f9d6c}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:15px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(900px 520px at 12% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
             radial-gradient(800px 520px at 100% 110%,color-mix(in srgb,#3aa0ff 10%,transparent),transparent 70%),var(--bg)}
.top{background:transparent;border:0}
.bar{max-width:420px;margin:0 auto;padding:44px 20px 0;display:flex;justify-content:center}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:24px;color:var(--ink);text-decoration:none;letter-spacing:.2px}
.brand img{width:42px;height:42px;filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent))}
.brand:hover{color:var(--ink)}
main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px 40px}
.login-box{width:100%;max-width:420px;padding:36px 34px 30px;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.38);backdrop-filter:blur(6px)}
:root[data-theme=light] .login-box{box-shadow:0 24px 60px rgba(30,40,60,.12)}
.title{margin:0 0 6px;color:var(--ink);text-align:center;font-size:24px;font-weight:800;letter-spacing:-.2px}
.subtitle{margin:0 0 26px;text-align:center;color:var(--muted);font-size:14px}
.note{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55;text-align:center}
.user-box{position:relative;margin-bottom:14px}
.user-box input{width:100%;height:56px;padding:22px 16px 6px;font:inherit;font-size:15.5px;color:var(--ink);border:1px solid var(--line);border-radius:12px;outline:none;background:var(--input);transition:border-color .2s,box-shadow .2s}
.user-box label{position:absolute;top:17px;left:17px;font-size:15px;color:var(--muted);pointer-events:none;transition:top .18s,font-size .18s,color .18s}
.user-box input:focus ~ label,.user-box input:not(:placeholder-shown) ~ label{top:7px;font-size:11.5px;font-weight:600;color:var(--accent)}
.user-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.btn{display:block;width:100%;height:50px;margin-top:8px;padding:0 20px;font:inherit;font-weight:800;font-size:15.5px;color:var(--onacc);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#1aa0a0));border:0;border-radius:12px;cursor:pointer;transition:transform .12s,filter .15s,box-shadow .2s;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn span{display:none}
.links{margin:22px 0 0;color:var(--muted);font-size:14px;text-align:center}
.links+.links{margin-top:10px}
.links a{color:var(--link);text-decoration:none;font-weight:600}
.links a:hover{color:var(--accent-h);text-decoration:underline}
.links.pre{margin:-2px 0 16px;text-align:right;font-size:13px}
.actions{margin-top:6px}
footer{text-align:center;color:var(--muted);font-size:12.5px;padding:18px}
.flash{margin:0 0 18px;padding:11px 14px;border-radius:10px;font-size:14px;line-height:1.4;background:var(--input);border:1px solid var(--line)}
.flash.error{color:#ff8a8a;border-color:color-mix(in srgb,#ff6b6b 50%,var(--line));background:color-mix(in srgb,#ff6b6b 8%,var(--input))}
.flash.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.trust{display:flex;justify-content:center;gap:18px;margin:20px 0 0;color:var(--muted);font-size:12px}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
@media(max-width:480px){.bar{padding-top:28px}.login-box{padding:28px 20px 24px;border-radius:16px}}
.brand .wm-b{color:#0fc27b}

/* maintenance window */
.mt-box{text-align:center;margin-top:8px}
.mt-ico{width:68px;height:68px;margin:0 auto 18px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--input));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.mt-box .note{margin-bottom:16px}
.mt-msg{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--input);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.mt-live{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;color:var(--muted);font-size:12.5px}
.mt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:mtp 1.6s ease-in-out infinite}
@keyframes mtp{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.mt-dot{animation:none}}

/* browsers paint saved logins light blue or white: keep the dark field colours */
.user-box input:-webkit-autofill,.user-box input:-webkit-autofill:hover,.user-box input:-webkit-autofill:focus,.user-box input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--input) inset!important;box-shadow:0 0 0 1000px var(--input) inset!important;
  -webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink);border-color:var(--line);transition:background-color 9999s ease-out 0s}
.user-box input:autofill{box-shadow:0 0 0 1000px var(--input) inset!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important}
.user-box input:-webkit-autofill:focus{border-color:var(--accent)}
:root{color-scheme:dark}
:root[data-theme=light]{color-scheme:light}

/* login options (remember me, IP lock) and the Register / Forgot row */
.chk{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--muted);font-size:14px;cursor:pointer;user-select:none}
.chk input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.chk i{flex:none;width:20px;height:20px;border:2px solid var(--muted);border-radius:5px;background:transparent;transition:background .15s,border-color .15s;display:inline-flex;align-items:center;justify-content:center}
.chk input:checked+i{background:var(--accent);border-color:var(--accent)}
.chk input:checked+i::after{content:"";width:5px;height:10px;border:solid var(--onacc);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chk input:focus-visible+i{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.chk .tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border:1px solid var(--muted);border-radius:50%;font:italic 700 11px/1 Georgia,serif;color:var(--muted);cursor:help}
.links.split{display:flex;justify-content:space-between;margin-top:22px}