:root{color-scheme:dark;--navy:#101a2d;--muted:#a8b6ca;--accent:#ed5a51;--ink:#162236}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--navy);color:#f5f7fb;font-family:Arial,Helvetica,sans-serif;background-image:radial-gradient(ellipse at 0% 100%,#243752 0,transparent 58%)}
button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #ed5a51;outline-offset:5px}
.login-layout{max-width:1360px;min-height:100vh;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,100px);padding:clamp(28px,5vw,68px)}
.intro{display:flex;flex-direction:column;justify-content:space-between}.brand{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:800;letter-spacing:1.7px}.brand img{object-fit:contain}.brand span{display:block;font-size:11px;letter-spacing:3.5px;color:var(--muted);margin-top:7px}
.intro-content{padding:45px 0 22px}.eyebrow{color:#c4ccda;font-size:11px;letter-spacing:2.3px;font-weight:bold;display:flex;gap:10px;align-items:center}.eyebrow span{width:20px;height:3px;background:var(--accent)}
h1{font-size:clamp(32px,3.5vw,51px);line-height:1.16;letter-spacing:-1.7px;margin:21px 0}h1 em{font-style:normal;color:#aebfd6}.lead{font-size:16px;color:#c1cbda;line-height:1.7;max-width:490px}
.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:22px}.steps li{display:flex;gap:17px}.step-number{font-size:12px;color:#ff8a80;flex:0 0 34px;height:34px;border:1px solid #536079;border-radius:10px;display:grid;place-items:center}.steps strong{font-size:15px}.steps p{font-size:13px;line-height:1.6;color:var(--muted);margin:6px 0 0;max-width:400px}.intro-footer{font-size:11px;color:#96a6bd;line-height:1.6;max-width:390px}
.login-card{align-self:center;background:#fff;color:var(--ink);border-radius:26px;padding:clamp(24px,3vw,42px);box-shadow:0 25px 90px #0004;min-width:0}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.small-label{font-size:10px;color:#6c798b;letter-spacing:1.3px;font-weight:bold}.secure-badge{font-size:10px;font-weight:bold;color:#37694e;background:#edf7ef;padding:8px 10px;border-radius:20px;white-space:nowrap}
h2{font-size:29px;letter-spacing:-.7px;margin:25px 0 10px}.card-description{color:#6c798b;font-size:14px;line-height:1.6;margin:0 0 24px}.qr-frame{background:#fff;border:1px solid #dde4ed;border-radius:18px;padding:22px;min-height:300px;display:grid;place-items:center;position:relative;margin:auto;max-width:350px;aspect-ratio:1}.qr-frame canvas,.qr-frame img{max-width:100%;height:auto!important;image-rendering:pixelated}.qr-frame.expired #qr-code{opacity:.08}.qr-frame.expired #qr-placeholder{position:absolute;background:#fff;padding:20px;text-align:center;color:#6c798b}#qr-placeholder{font-size:14px;color:#6c798b}#qr-placeholder:empty{display:none}.login-status{display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px;font-weight:bold;text-align:center;line-height:1.5;margin-top:23px;min-height:27px}.status-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#d99b2c;box-shadow:0 0 0 5px #fff3d9}.login-status.success .status-dot{background:#29854d;box-shadow:0 0 0 5px #e9f7ee}.login-status.error .status-dot{background:#c94135;box-shadow:0 0 0 5px #fff0ee}.countdown{text-align:center;color:#778395;font-size:12px;margin:8px 0 20px;min-height:16px}
.secondary-button,.primary-button{font:inherit;font-size:14px;font-weight:bold;border-radius:11px;padding:16px 20px;min-height:50px;cursor:pointer;width:100%;border:1px solid #d9e1eb;background:#f6f8fb;color:var(--ink)}.secondary-button:hover{background:#edf1f7}.secondary-button:disabled{opacity:.55;cursor:wait}.primary-button{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;background:var(--accent);border-color:var(--accent);color:#fff}.primary-button:hover{background:#dc4941}.card-note{display:flex;gap:12px;border-top:1px solid #e8edf3;padding-top:20px;margin-top:25px;color:#7a8596;font-size:12px;line-height:1.6}.card-note span{font-size:21px;color:#8794a6}.card-note p{margin:0}.error-note{color:#b3352b;font-size:14px}
.renew-layout{max-width:530px;padding:25px;margin:8vh auto}.renew-layout .brand{margin-bottom:35px}.renew-layout .login-card{padding:35px}.renew-layout h1{font-size:32px;color:var(--ink);letter-spacing:-1px}.renew-layout p{color:#637087;line-height:1.7}.renew-layout form{display:grid;gap:12px}.renew-layout a.secondary-button{text-decoration:none;text-align:center}
@media(min-width:761px) and (max-height:820px){.login-layout{padding-top:26px;padding-bottom:26px;gap:60px}.intro-content{padding-top:25px}.steps{gap:17px;margin-top:23px}.login-card{padding:26px 32px}.qr-frame{min-height:250px;max-width:280px;padding:18px}h2{margin-top:19px}.card-description{margin-bottom:17px}.card-note{margin-top:18px;padding-top:16px}}
@media(max-width:760px){.login-layout{grid-template-columns:1fr;gap:25px;padding:24px;max-width:580px}.intro-content{padding:24px 0 0}h1{font-size:37px}.lead{font-size:15px}.steps{gap:16px;margin:23px 0}.intro-footer{display:none}.login-card{border-radius:20px}.qr-frame{min-height:245px;max-width:320px}.brand{font-size:15px}}
@media(prefers-reduced-motion:no-preference){.login-status.waiting .status-dot{animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px #fff3d955}}}

.return-link{display:block;text-align:center;color:#65758a;font-size:13px;margin-top:20px;text-underline-offset:4px}
.qr-frame[hidden],.monitor-choice[hidden]{display:none}
.monitor-choice{border:1px solid #dde4ed;border-radius:16px;padding:20px;background:#f7f9fc}
.monitor-choice h3{font-size:18px;line-height:1.4;margin:0 0 8px}
.monitor-choice>p{color:#6c798b;font-size:13px;line-height:1.6;margin:0 0 18px}
.monitor-list{display:grid;gap:12px;max-height:330px;overflow:auto;padding:3px}
.monitor-option{display:grid;grid-template-columns:1fr auto;gap:6px 12px;text-align:left;align-items:center;border:1px solid #d7e0ec;background:#fff;color:#162236;border-radius:11px;min-height:78px;padding:15px;font:inherit;cursor:pointer;width:100%;overflow-wrap:anywhere}
.monitor-option strong{font-size:16px}
.monitor-option>span:not(.monitor-action){font-size:12px;color:#738197;grid-column:1}
.monitor-option .monitor-action{font-size:12px;font-weight:bold;color:#b93830;grid-column:2;grid-row:1 / span 2;white-space:nowrap}
.monitor-option:hover{border-color:#ed5a51;background:#fff7f5}
.monitor-option:disabled{opacity:.6;cursor:wait}
@media(max-width:430px){.monitor-choice{padding:15px}.monitor-option{padding:12px}.monitor-option strong{font-size:14px}}