:root { font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #101b39; background: #fff; --blue: #1244ec; --muted: #506077; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: #1441bf; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 3px solid #5688f8; outline-offset: 3px; }
[hidden] { display: none !important; }
.login-layout { display: grid; grid-template-columns: minmax(0,45fr) minmax(0,55fr); min-height: 100svh; }
.login-side { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: clamp(45px,8vh,110px); padding: 48px clamp(27px,5vw,90px); background: linear-gradient(140deg,#1b4ff3,#0739e9 70%,#062fca); color: white; overflow: hidden; }
.login-brand { display: flex; align-items: center; gap: 14px; font-size: clamp(23px,3vw,40px); font-weight: 820; letter-spacing: -.025em; }
.login-brand img { width: clamp(56px,6vw,88px); height: auto; border-radius: 21%; }
.login-side h2 { margin: 0 0 14px; font-size: clamp(35px,5.2vw,76px); line-height: 1.01; letter-spacing: -.058em; }
.login-side p { margin: 0 0 26px; max-width: 31ch; color: #eaf0ff; font-size: clamp(15px,2vw,26px); line-height: 1.42; }
.fingerprint { position: absolute; z-index: -1; bottom: -90px; right: -80px; width: min(68%,440px); opacity: .24; rotate: 18deg; filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.qr-entry { display: inline-flex; gap: 9px; align-items: center; border: 1.5px solid #fff; border-radius: 9px; padding: 11px 16px; color: #fff; text-decoration: none; font-weight: 700; }
.qr-entry:hover { background: #ffffff24; }
.login-panel { display: flex; justify-content: center; align-items: center; padding: 40px clamp(25px,6vw,110px); background: radial-gradient(circle at 70% 90%,#f2f6ff 0,white 45%); }
.login-content { width: min(100%,610px); }
.school-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.school-banner img { width: clamp(56px,7vw,93px); height: auto; border-radius: 12px; }
.school-banner b { display: block; text-transform: uppercase; font-size: clamp(15px,2vw,24px); line-height: 1.22; }
.school-banner small { display: block; color: #2c4b8a; margin-top: 5px; font-size: clamp(11px,1.4vw,16px); font-weight: 650; }
.login-content h1 { font-size: clamp(28px,3.7vw,51px); margin: 0 0 4px; letter-spacing: -.05em; line-height: 1.1; }
.lead { color: var(--muted); margin: 0 0 23px; line-height: 1.5; }
.form { display: grid; gap: 13px; }
.form label, .form .field-label { font-weight: 700; font-size: 14px; display: block; }
.form input:not([type=checkbox]), .form select, .form textarea { display: block; width: 100%; margin-top: 5px; min-height: 43px; padding: 9px 12px; color: #172744; background: #fff; border: 1px solid #bfcce4; border-radius: 8px; }
.password-field { position: relative; }
.password-field input { padding-right: 86px !important; }
.password-field button { position: absolute; right: 5px; bottom: 5px; height: 33px; border: 0; background: transparent; color: #244da9; font-size: 12px; font-weight: 700; }
.form button.primary, .primary-link { display: inline-flex; justify-content: center; align-items: center; border: 0; padding: 12px 18px; min-height: 44px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 750; text-decoration: none; }
.form button.primary:hover, .primary-link:hover { background: #1036b6; }
.help-link { justify-self: end; font-size: 12px; font-weight: 650; }
.login-note { background: #e8f0ff; border-radius: 9px; padding: 13px 16px; margin: 18px 0; display: flex; align-items: center; gap: 11px; font-size: 13px; }
.login-note b { display: block; margin-bottom: 2px; }
.login-note .info { display: grid; place-items: center; color: #1643d9; border: 2px solid #1643d9; border-radius: 50%; width: 21px; height: 21px; flex: none; font-weight: 800; }
.login-footer { text-align: center; color: var(--muted); font-size: 12px; }
.login-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 19px; margin: 10px 0 7px; }
.login-footer a { text-decoration: none; font-weight: 730; color: #293859; }
.login-footer a:hover { text-decoration: underline; }
.install { min-height: 100svh; background: #eef3fb; padding: 25px 14px; }
.setup-card { margin: 0 auto; max-width: 760px; padding: clamp(18px,4vw,35px); background: #fff; border: 1px solid #dce6f4; border-radius: 16px; box-shadow: 0 9px 32px #19356e13; }
.setup-card h1 { letter-spacing: -.04em; margin: 0 0 6px; }
.setup-card h2 { font-size: 18px; margin: 15px 0 5px; }
.setup-card .checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 5px 10px; list-style: none; padding: 0; font-size: 12px; }
.checks .good { color: #176a57; }.checks .bad { color: #a63736; }
.setup-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.form .check { display: flex; gap: 7px; align-items: center; }
.notice { padding: 10px 12px; border-radius: 8px; background: #e9f4ff; color: #25456f; margin: 0 0 12px; line-height: 1.5; }
.notice.error { background: #ffebeb; color: #922925; }
@media(max-width:750px) { .login-layout { grid-template-columns: 1fr; } .login-side { padding: 20px 23px; gap: 0; } .login-side h2, .login-side p { display: none; } .login-side .qr-entry { position: absolute; right: 18px; top: 27px; font-size: 12px; padding: 8px; } .login-brand img { width: 47px; } .login-brand { font-size: 22px; gap: 9px; } .login-panel { padding: 28px 22px; } }
@media(max-width:365px) { .login-side .qr-entry { right: 9px; } .login-brand { font-size: 17px; } .setup-grid { grid-template-columns: 1fr; } }
@media print {
  .install { padding: 0; background: #fff; }
  .setup-card { border: 0; box-shadow: none; max-width: none; }
  .setup-card form, .setup-card a, .setup-card button { display: none; }
}