*{box-sizing:border-box}html{min-height:100%;background:#f3f6fb}body{margin:0;color:#182230;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{width:min(100% - 28px,520px);margin:0 auto;padding:22px 0 calc(28px + env(safe-area-inset-bottom))}.app-header{margin:4px 4px 18px}.brand{margin:0;color:#315efb;font-weight:800;letter-spacing:.02em}.app-header h1{margin:5px 0 0;font-size:1.35rem}.card{padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 12px 36px rgba(16,36,74,.08)}.card h2{margin:0 0 18px;font-size:1.25rem}.login-card form{display:grid;gap:10px}.login-card label,.settings label{font-size:.9rem;font-weight:700}.login-card input,.settings select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}.primary,.secondary,.choice,.keypad button{min-height:48px;border:0;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}.primary{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:14px;background:#315efb;color:#fff}.primary:focus-visible,.secondary:focus-visible,.choice:focus-visible,.keypad button:focus-visible,summary:focus-visible{outline:3px solid #92aaff;outline-offset:2px}.notice{padding:11px 13px;border-radius:10px;background:#fff5df;color:#7b4d00;line-height:1.45}.kiosk-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eyebrow{margin:0 0 4px;color:#64748b;font-size:.9rem;font-weight:700}.kiosk-heading h2{margin-bottom:12px}.kiosk-title-line{display:inline}.settings{position:relative;z-index:1;flex:0 0 auto}.settings summary{min-width:56px;padding:8px 10px;border:1px solid #d8e0eb;border-radius:10px;color:#334155;font-weight:700;white-space:nowrap;text-align:center;cursor:pointer}.settings[open]{min-width:190px}.settings form{display:grid;gap:8px;margin-top:10px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.secondary{padding:8px 12px;border:1px solid #cbd5e1;background:#fff;color:#334155}.logout-form{margin-top:8px}.pin-form{display:grid;gap:14px}.pin-display{width:100%;height:62px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;text-align:center;font-size:2rem;font-weight:800;letter-spacing:.22em;color:#172554;caret-color:transparent}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.keypad button{height:58px;background:#eef3ff;color:#173f9f;font-size:1.3rem}.keypad .utility{background:#f1f5f9;color:#475569;font-size:.95rem}.submit-pin{margin-top:0}.branch-options{display:grid;gap:10px}.branch-option{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #dbe3ef;border-radius:12px;font-weight:700}.choice-form{margin:10px 0}.choice{width:100%;padding:12px;background:#f2f6ff;color:#1e3a8a;text-align:left}.secondary-link{display:inline-block;margin-top:14px;color:#315efb}.confirm-card,.result-card{text-align:center}.student-name{margin:24px 0 8px;font-size:1.6rem;font-weight:800;overflow-wrap:anywhere}.muted{color:#64748b}.result-mark{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 18px;border-radius:50%;background:#eaf8ef;color:#128043;font-size:2rem;font-weight:800}.button-link{text-decoration:none}footer{padding:14px 8px;color:#728096;text-align:center;font-size:.78rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:600px){.app-shell{padding-top:42px}.card{padding:28px}.keypad{gap:12px}.keypad button{height:66px}}
@media(max-width:360px){.app-shell{width:min(100% - 18px,520px);padding-top:14px}.card{padding:16px;border-radius:16px}.kiosk-heading h2{font-size:1.05rem}.kiosk-title-line{display:block}.keypad{gap:7px}.keypad button{height:52px}.settings summary{padding:7px}}

body.kiosk-body{min-height:100dvh;background:#f3f2f8;color:#24232b}
body.kiosk-body .kiosk-shell{width:100%;max-width:none;min-height:100dvh;height:100dvh;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.kiosk-screen{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.kiosk-info-panel{display:flex;flex:1 1 50%;min-height:0;flex-direction:column;padding:clamp(12px,2.3vh,24px) clamp(18px,6vw,36px) 10px;background:#f3f2f8}
.kiosk-header{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:44px}
.header-back{display:grid;width:40px;height:40px;place-items:center;color:#5d5b65}
.header-back svg{width:24px;height:24px}
.kiosk-brand{display:flex;min-width:0;align-items:center;gap:8px}
.school-mark{width:40px;height:40px;flex:0 0 40px}
.kiosk-brand-copy{display:flex;min-width:0;flex-direction:column;line-height:1.15}
.kiosk-brand-copy strong{font-size:clamp(15px,4.2vw,18px);font-weight:750;letter-spacing:-.03em;white-space:nowrap}
.settings-wrap{display:grid;justify-items:center;align-content:center;gap:1px}
.settings{position:relative;z-index:5;flex:0 0 auto}
.settings summary{display:grid;width:38px;height:38px;min-width:38px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#514f59;list-style:none;cursor:pointer}
.settings summary::-webkit-details-marker{display:none}
.settings summary svg{width:21px;height:21px}
.settings[open]{min-width:0}
.settings form{position:absolute;top:calc(100% + 5px);right:0;min-width:185px;margin:0;padding:12px;border:1px solid #e0dfe5;border-radius:12px;background:#fff;box-shadow:0 8px 26px rgba(20,18,40,.16)}
.app-version{color:#777480;font-size:9px;line-height:1}
.datetime{margin:clamp(22px,4vh,42px) 0 0;text-align:center;color:#201f25}
#current-date{font-size:clamp(16px,4.3vw,20px);font-weight:600;letter-spacing:-.02em}
#current-clock{display:flex;justify-content:center;align-items:baseline;gap:3px;margin-top:4px;font-size:clamp(28px,8vw,42px);font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
#clock-period{margin-right:4px;font-size:clamp(16px,4.4vw,20px);font-weight:650;letter-spacing:-.02em}
#clock-separator{opacity:.62}
.entry-area{display:grid;place-items:center;margin:auto 0 8px}
#digit-slots{display:grid;grid-template-columns:repeat(4,minmax(48px,64px));gap:clamp(8px,3vw,14px)}
.digit-slot{display:grid;width:100%;height:clamp(52px,8vh,68px);place-items:center;border:1px solid #d7d6de;border-radius:8px;background:#fff;color:#24232b;font-size:clamp(24px,7vw,32px);font-weight:650;font-variant-numeric:tabular-nums}
.digit-slot.is-active{border:2px solid #2f73ea;box-shadow:0 0 0 1px rgba(47,115,234,.12)}
.pin-form{display:flex;flex:0 0 50dvh;min-height:240px;flex-direction:column;margin:0}
.keypad-panel{display:flex;flex:1;min-height:0;flex-direction:column;margin:0;padding:16px 16px max(12px,env(safe-area-inset-bottom));border-radius:30px 30px 0 0;background:#3268df;color:#fff}
#keypad-prompt{margin:0;padding:0 0 7px;color:#f5f7ff;font-size:clamp(16px,4.5vw,20px);font-weight:700;letter-spacing:-.03em;text-align:center}
.keypad{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));width:min(480px,100%);margin:4px auto 0;gap:0}
.keypad .key{display:grid;min-height:44px;height:auto;place-items:center;border:0;border-radius:10px;background:transparent;color:#fff;font:inherit;font-size:clamp(28px,8vw,38px);font-weight:600;touch-action:manipulation;cursor:pointer}
.keypad .key.utility{font-size:clamp(22px,6vw,28px)}
.keypad .key svg{width:26px;height:26px}
.keypad .key:active{background:rgba(255,255,255,.15)}
.keypad .key:disabled{opacity:.62}
.keypad .key:focus-visible,.settings summary:focus-visible{outline:3px solid #ffe36e;outline-offset:-3px}
@media(max-height:740px) and (orientation:portrait){.datetime{margin-top:clamp(12px,2vh,22px)}.entry-area{margin-bottom:4px}.digit-slot{height:clamp(46px,7vh,58px)}.keypad-panel{padding-top:12px}}
@media(min-width:800px) and (orientation:landscape){.kiosk-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,42vw);grid-template-rows:100dvh}.kiosk-info-panel{grid-column:1;grid-row:1;padding:24px 32px}.pin-form{grid-column:2;grid-row:1;height:100dvh;flex:none}.keypad-panel{height:100%;border-radius:0}.datetime{margin-top:clamp(32px,8vh,80px)}#digit-slots{grid-template-columns:repeat(4,minmax(56px,80px))}}