body{margin:0;background:#030b19}
#login.attendance-entry-login{min-height:100svh}
#login .attendance-entry-header{height:176px}
#login .attendance-entry-main{grid-template-columns:minmax(0,1fr) minmax(430px,520px) minmax(0,.68fr);gap:5.5%;padding-top:0;padding-bottom:70px}
#login .attendance-entry-card{padding:30px 32px 27px;min-height:0}
#login .attendance-entry-card h2{margin:5px 0 12px;font-size:30px}
#login .attendance-entry-kicker{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#7fb8f3;margin-bottom:4px}
#login .attendance-session-copy{margin:0 0 22px;color:#b9cce6;font-size:13px;line-height:1.6}
#login .attendance-session-copy strong{display:block;color:#eef6ff;font-size:15px;font-weight:550;line-height:1.4;margin-bottom:4px}
#login .attendance-entry-form{display:grid;gap:14px}
#login .attendance-field{display:grid;gap:7px;color:#c8d8ef;font-size:12px;font-weight:550}
#login .attendance-group-picker{display:grid;gap:9px}
#login .attendance-group-picker .attendance-field input{height:44px}
#login .attendance-group-picker .attendance-hint{margin:0}
#login .attendance-field input,
#login .attendance-field select{appearance:none;width:100%;height:50px;border:1px solid #6885b044;border-radius:12px;background:linear-gradient(105deg,#20355083,#22344b85);padding:0 15px;color:#f0f6ff;font-size:15px;outline:none;box-shadow:none;transition:border-color .2s,background .2s,box-shadow .2s}
#login .attendance-field select{background-color:#17263b;color:#eef6ff}
#login .attendance-field select option{background:#101d30;color:#eef6ff}
#login .attendance-field input::placeholder{color:#8fa6c5}
#login .attendance-field input:focus,
#login .attendance-field select:focus{border-color:#70b1ff;background:#172e49c7;box-shadow:0 0 0 3px #2b7fff20}
#login .attendance-field input:disabled{opacity:.52;cursor:not-allowed}
#login .claim-students{display:grid;gap:7px;max-height:260px;overflow:auto;border:1px solid #668aba35;border-radius:13px;padding:7px;background:#06162bb0}
#login .claim-person{width:100%;border:1px solid transparent;border-radius:10px;background:#10233b99;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;color:#eaf2ff;transition:background .15s,border-color .15s,transform .15s}
#login .claim-person:hover:not(:disabled),
#login .claim-person.selected{background:#173453c7;border-color:#6aa9f273}
#login .claim-person:active{transform:translateY(1px)}
#login .claim-person span{display:grid;gap:2px;min-width:0}
#login .claim-person strong{font-size:14px;font-weight:550;color:#f4f8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#login .claim-person small{font-size:11px;color:#88a7ce}
#login .claim-person em{font-size:10px;font-style:normal;color:#9ac3f3;border:1px solid #5d98d54d;border-radius:999px;padding:4px 7px;white-space:nowrap}
#login .claim-person:disabled{opacity:.5;cursor:not-allowed}
#login .claim-students .empty{padding:22px 14px;text-align:center;color:#8198b9;font-size:12px;line-height:1.5}
#login .claim-selected{border:1px solid #58a4ff4a;border-radius:11px;background:#12335a9c;color:#d8eaff;padding:11px 13px;font-size:12px;line-height:1.45}
#login .claim-selected strong{color:#fff;font-weight:600}
#login .attendance-secondary-action{width:100%;min-height:42px;border:1px solid #6885b055;border-radius:12px;background:#10243aa8;color:#bcd4ef;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
#login .attendance-secondary-action:hover{border-color:#6aa9f27a;background:#15304cc7;color:#eef6ff}
#login .attendance-recovery{display:grid;gap:12px;padding:15px;border:1px solid #5d85b747;border-radius:14px;background:#0c1f35b3}
#login .attendance-recovery-title{font-size:13px;font-weight:700;color:#e5f1ff}
#login .attendance-recovery-message{padding:10px 12px;border-radius:10px;background:#132d4a;color:#bcd4ef;font-size:12px;line-height:1.5}
#login .attendance-movement{display:grid;gap:8px;padding:14px;border:1px solid #58a4ff57;border-radius:14px;background:#12335a8f;color:#d8eaff}
#login .attendance-movement strong{color:#fff;font-size:14px}
#login .attendance-movement p{margin:0;color:#a9c5e7;font-size:12px;line-height:1.5}
#login .attendance-movement-check{display:flex;align-items:flex-start;gap:9px;color:#eef6ff;font-size:12px;line-height:1.45}
#login .attendance-movement-check input{margin-top:2px}
#login .attendance-password-fields{display:grid;gap:12px;border-top:1px solid #668aba35;padding-top:15px;margin-top:2px}
#login .student-login-preview{border-radius:10px;background:#102846a8;border:1px solid #5f8fcf38;padding:10px 12px;color:#a9c5e7;font-size:12px}
#login .student-login-preview strong{color:#eef6ff;font-weight:600}
#login .attendance-hint{margin:-2px 0 0;color:#8fa6c5;font-size:11px;line-height:1.45}
#login .attendance-entry-card .lw-submit{margin:5px 0 0}
#login .attendance-entry-card .lw-submit:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.55)}
#login .attendance-entry-note{margin:2px 0 0;color:#7895b9;font-size:11px;line-height:1.55}
#login .attendance-access-help{margin-top:13px;border-top:1px solid #668aba35;padding-top:12px;color:#a9c5e7;font-size:12px;line-height:1.5}
#login .attendance-access-help summary{cursor:pointer;color:#bcd4ef;font-weight:650}
#login .attendance-access-help p{margin:10px 0 0}
#login .attendance-entry-footer{padding-top:10px}
#login .attendance-entry-intro{margin-top:50px}
@media(max-width:1200px) and (min-width:801px){
  #login .attendance-entry-main{grid-template-columns:minmax(0,1fr) minmax(390px,470px) minmax(0,.4fr);width:88%;gap:4%}
  #login .attendance-entry-card{padding:28px}
}
@media(max-width:800px){
  #login .attendance-entry-header{height:auto;padding-top:30px}
  #login .attendance-entry-main{display:block;width:min(92%,520px);padding:24px 0 30px}
  #login .attendance-entry-intro{display:none}
  #login .attendance-entry-card{width:100%;padding:26px 22px 23px;border-radius:17px}
  #login .attendance-entry-card h2{font-size:27px;margin-bottom:10px}
  #login .attendance-session-copy{margin-bottom:18px}
  #login .claim-students{max-height:240px}
  #login .attendance-entry-footer{width:min(92%,520px);padding:12px 0 24px}
}
@media(max-width:390px){
  #login .attendance-entry-main,
  #login .attendance-entry-header,
  #login .attendance-entry-footer{width:92%}
  #login .attendance-entry-card{padding:24px 19px 22px}
  #login .claim-person{align-items:flex-start;flex-direction:column;gap:7px}
}