@import url("../teacher/lesson-management.css");

body { min-height:100vh; }.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(360px,1fr) minmax(420px,1fr); }.login-brand { display:flex; flex-direction:column; justify-content:center; padding:8vw; color:#eff6ff; background:linear-gradient(145deg,#1e40af,#2563eb 58%,#60a5fa); overflow:hidden; position:relative; }.login-brand::after { content:""; position:absolute; width:460px; height:460px; right:-180px; bottom:-220px; border:70px solid rgba(255,255,255,.08); border-radius:50%; }.brand-mark { width:62px; height:62px; display:grid; place-items:center; margin-bottom:28px; border-radius:16px; background:rgba(255,255,255,.16); font-size:29px; }.eyebrow { margin-bottom:10px; color:#bfdbfe; font-size:12px; font-weight:800; letter-spacing:1.5px; }.login-brand h1 { margin-bottom:16px; font-size:clamp(35px,4vw,54px); line-height:1.08; }.login-brand > p:not(.eyebrow) { max-width:450px; color:#dbeafe; font-size:17px; line-height:1.7; }.brand-feature { z-index:1; display:flex; align-items:center; gap:12px; margin-top:20px; font-size:15px; }.brand-feature i { width:30px; color:#bfdbfe; font-size:18px; }.login-section { display:grid; place-items:center; padding:30px; background:var(--bg); }.login-card { width:min(100%,440px); padding:38px; border:1px solid var(--border); border-radius:16px; background:var(--white); box-shadow:var(--shadow); animation:card-enter .45s ease both; }.login-heading { margin-bottom:28px; }.login-heading h2 { margin-bottom:7px; font-size:28px; }.login-heading p,.login-help { color:var(--text-light); }.input-with-icon { display:flex; align-items:center; position:relative; }.input-with-icon > i { position:absolute; left:14px; color:var(--text-light); }.input-with-icon input { width:100%; padding:12px 44px; border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }.input-with-icon input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.14); }.password-toggle { position:absolute; right:8px; padding:8px; border:0; color:var(--text-light); background:transparent; cursor:pointer; }.password-toggle:hover { color:var(--primary); }.form-options { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0; }.remember-option { display:flex; align-items:center; gap:8px; color:var(--text-light); font-size:14px; cursor:pointer; }.remember-option input { accent-color:var(--primary); }.link-button { border:0; padding:0; color:var(--primary); background:transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }.link-button:hover { text-decoration:underline; }.login-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }.login-btn:disabled { cursor:wait; opacity:.72; }.login-help { margin-top:24px; font-size:13px; text-align:center; }.login-section #loadingOverlay { position:fixed; }.login-section #toast { position:fixed; }
@keyframes card-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:820px) { .login-page { grid-template-columns:1fr; }.login-brand { min-height:260px; padding:42px 30px; }.brand-mark,.brand-feature { display:none; }.login-brand h1 { font-size:34px; }.login-section { padding:28px 20px; }.login-card { padding:28px; } }
.reset-help { color:var(--text-light); font-size:13px; text-align:right; }
.login-separator { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-light); font-size:12px; font-weight:800; }.login-separator::before,.login-separator::after { content:""; flex:1; height:1px; background:var(--border); }.scan-login-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; }.student-qr-modal { align-items:center; }.student-qr-content { max-width:560px; }.student-qr-content .modal-header p { margin-top:5px; color:var(--text-light); }.student-scanner-body { padding:20px; text-align:center; }.student-scanner-body #studentQrReader { width:100%; max-width:460px; min-height:260px; margin:0 auto 16px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#f8fafc; }.student-scanner-body #studentQrStatus { min-height:24px; margin:12px 0 18px; color:var(--primary); font-weight:600; }.student-scanner-body .btn { min-width:140px; }
.student-qr-profile { margin:0 20px 20px; padding:22px; text-align:center; border:1px solid var(--border); border-radius:var(--radius); background:#f8fafc; }.student-qr-profile[hidden] { display:none; }.student-qr-profile img { width:96px; height:96px; margin-bottom:12px; object-fit:cover; border:4px solid #fff; border-radius:50%; box-shadow:var(--shadow); }.student-qr-profile h3 { margin-bottom:12px; color:var(--primary); }.student-qr-profile p { margin:7px 0; }.student-qr-profile .btn { margin-top:14px; }
@media (max-width:400px) { .login-card { padding:22px; }.form-options { align-items:flex-start; flex-direction:column; gap:12px; } }
.qr-login-verification{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:12px;border:1px solid #86efac;border-radius:10px;color:#166534;background:#f0fdf4;font-size:13px;line-height:1.5}.qr-login-verification[hidden]{display:none}.qr-login-verification i{margin-top:3px}.input-with-icon input.qr-verified{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.registration-entry{display:grid;gap:10px;margin-top:18px;text-align:center}.registration-entry p{margin:0;color:var(--text-light);font-size:14px}.register-btn{width:100%}

/* Student login polish: presentation-only; form IDs and behavior stay untouched. */
body{min-width:0;overflow-x:hidden;background:#f5f8fd}body .btn,body button[type="submit"]{min-height:44px}.login-page,.login-page>*{min-width:0;max-width:100%}
.login-page{grid-template-columns:minmax(340px,.95fr) minmax(430px,1.05fr)}
.login-brand{isolation:isolate;padding:clamp(48px,7vw,100px);background:radial-gradient(circle at 18% 16%,rgba(96,165,250,.35),transparent 20rem),linear-gradient(145deg,#0f172a,#1e40af 58%,#2563eb)}.login-brand::before{content:"";position:absolute;z-index:-1;left:-130px;top:-140px;width:340px;height:340px;border:48px solid rgba(255,255,255,.06);border-radius:50%}.login-brand::after{z-index:-1}.brand-mark{border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 28px rgba(15,23,42,.18);backdrop-filter:blur(10px)}.login-brand h1{letter-spacing:-.035em}.brand-feature{line-height:1.5}
.login-section{padding:clamp(22px,5vw,64px);background:radial-gradient(circle at 90% 8%,rgba(37,99,235,.09),transparent 22rem),#f8fbff}
.login-card{width:min(100%,470px);padding:clamp(26px,4vw,42px);border-color:#dbe4ef;border-radius:22px;box-shadow:0 22px 60px rgba(15,23,42,.12)}.login-heading h2{font-size:clamp(1.65rem,3vw,2rem);line-height:1.3}.login-heading p,.login-help,.reset-help{line-height:1.55}
.form-group{min-width:0}.form-group label{display:inline-block;margin-bottom:8px;line-height:1.45}.input-with-icon{min-width:0}.input-with-icon>i{z-index:1}.input-with-icon input{min-width:0;min-height:50px;padding-block:12px;border-color:#cbd5e1;border-radius:11px;background:#fff}.input-with-icon input:hover{border-color:#94a3b8}.password-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:9px}
.login-btn,.register-btn,.scan-login-btn,.student-scanner-body .btn{min-height:48px;border-radius:11px}.login-btn:disabled,.scan-login-btn:disabled,.student-scanner-body .btn:disabled{cursor:not-allowed;box-shadow:none;opacity:.62}.remember-option{min-height:44px}.remember-option input{width:18px;height:18px;flex:0 0 18px}
.student-qr-content{width:min(100%,560px);border-radius:18px}.student-scanner-body #studentQrReader{max-width:100%;border-radius:14px}.login-card :is(input,button,a):focus-visible{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}
@media(max-width:820px){.login-brand{min-height:auto;padding:34px 24px}.login-brand>p:not(.eyebrow){font-size:15px}.login-section{padding:24px 16px 34px}.login-card{border-radius:18px}}
@media(max-width:480px){.login-brand{padding:28px 20px}.login-brand h1{font-size:30px}.login-section{padding:16px 10px 28px}.login-card{padding:24px 18px;border-radius:16px}.form-options{align-items:flex-start;flex-direction:column;gap:8px}.reset-help{text-align:left}.student-qr-modal{padding:10px}.student-scanner-body{padding:16px}.student-scanner-body #studentQrReader{min-height:220px}}

/* Keep the shared login form first and reachable on short mobile/landscape viewports. */
@media(max-width:820px),(max-height:600px) and (max-width:1000px){
    body{min-height:100vh;min-height:100dvh;overflow-y:auto}
    .login-page{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh}
    .login-section{order:-1;display:block;min-height:100vh;min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
    .login-card{width:min(100%,470px);max-width:100%;margin:0 auto;animation:none}
    .login-brand{display:none}
}