:root{--blue:#0055ce;--navy:#162548;--lime:#55c908;--orange:#ff790b;--pink:#f53878;--teal:#0a9faf;--violet:#9a51cb;--yellow:#f4b418;--soft:#f5f8fe;--line:#dce6f5}
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--navy);background:#f6f8fc}
body{margin:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
button,input,textarea,select{font:inherit}
a{color:var(--blue);text-decoration:none}
button{cursor:pointer}
.topbar{height:76px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px max(20px,calc((100vw - 1120px)/2));box-shadow:0 1px 5px #0d327c0a}
.logo{display:block;width:172px;max-height:59px;object-fit:contain;object-position:left}
.top-right{display:flex;align-items:center;gap:10px}.role{font-size:.9rem}.initial{width:38px;height:38px;border-radius:50%;background:#e3eeff;display:grid;place-items:center;font-weight:700}
.container{width:min(100% - 32px,1080px);margin:auto;padding:17px 0 40px}
h1{font-size:clamp(1.65rem,4vw,2.1rem);letter-spacing:-.04em;margin:10px 0 8px}
h2{font-size:1.22rem;margin:20px 0 10px;letter-spacing:-.025em}
p{line-height:1.5}.subheading{color:#5b7098;margin:0 0 20px}
.card{background:white;border:1px solid var(--line);border-radius:17px;padding:18px;margin:12px 0;box-shadow:0 5px 12px #16458009}
.group-card{max-width:720px}.group-card h2{margin:8px 0}.group-card p{margin:7px 0;color:#50658b}
.eyebrow{color:var(--yellow);font-size:.93rem;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:12px 16px;font-weight:700;font-size:.95rem;border:1px solid transparent;margin:5px 0;text-align:center;min-height:48px}
.btn.primary{color:white;background:var(--blue)}.btn.green{color:white;background:var(--lime)}.btn.orange{color:var(--orange);background:#fff;border-color:var(--orange)}.btn.outline{color:var(--blue);background:white;border-color:#9dbce8}
.btn.full{width:100%}.btn:hover{filter:brightness(.96)}.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.button-row{display:flex;gap:8px;flex-wrap:wrap}.button-row>*{flex:1;min-width:160px}
.student-list{max-width:740px}.student-line{display:flex;flex-direction:row;gap:12px;align-items:center;padding:10px 14px;margin:7px 0}.student-line span:nth-child(2){flex:1;color:var(--navy);font-weight:600}.arrow{font-size:1.8rem}
.avatar{width:56px;height:56px;border-radius:13px;object-fit:cover;flex:0 0 56px;background:#eaf1fc}.avatar.fallback{display:grid;place-items:center;font-size:1.6rem;color:var(--teal)}
.student-detail{display:flex;flex-direction:row;gap:16px;align-items:start}.student-detail .avatar{width:88px;height:88px;flex-basis:88px}.student-detail h2{margin-top:0}
.attendance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:760px}.pupil{margin:0;padding:10px;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto auto;align-items:center;gap:1px 8px;min-width:0}
.pupil .avatar{grid-row:1/3}.pupil strong,.pupil small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pupil small{color:#627498}.choice{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.choice label{cursor:pointer;min-width:0}.choice input{position:absolute;width:1px;height:1px;opacity:0}.choice span{display:grid;place-items:center;padding:10px 3px;border-radius:8px;background:#eef3fa;color:#506587;font-size:.77rem;min-height:42px}
.choice .present input:checked+span{background:var(--lime);color:#fff;font-weight:700}.choice .absent input:checked+span{background:var(--orange);color:#fff;font-weight:700}.choice input:focus-visible+span{outline:3px solid var(--violet)}
.sticky-action{max-width:760px;margin-top:18px}.date-picker{display:flex;gap:8px;align-items:end;max-width:480px}.date-picker label{flex:1}
label{display:block;font-weight:600;font-size:.91rem;margin:12px 0 4px}
input:not([type=radio],[type=checkbox],[type=file]),textarea,select{display:block;width:100%;padding:12px;border:1px solid #cbd9ee;border-radius:10px;background:#f8faff;margin-top:6px;color:var(--navy);min-height:46px}
textarea{resize:vertical}input[type=file]{display:block;margin:8px 0}.checkbox{display:flex;align-items:center;gap:8px}
.login{max-width:460px;margin:34px auto}.login h2{font-size:1.5rem;margin:0}.login p{color:#687da0}
.notice{padding:12px 15px;border-radius:11px;background:#edfae7;color:#277700}.error{padding:12px 15px;border-radius:11px;background:#fff1ee;color:#aa3017;margin:10px 0}
.pill{border-radius:30px;background:#edf1f6;padding:6px 10px;white-space:nowrap;font-size:.78rem}.pill.present{background:#e9fbe6;color:#287d16}.pill.absent{background:#fff0e5;color:#b95305}
.history-item{max-width:780px}.history-item p{margin:10px 0}.history-item small{color:#6b7a97}.history-item a{display:block;margin-top:8px}.history-item .pill{float:right}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 0 14px;scrollbar-width:thin}.tabs a{white-space:nowrap;background:#eaf0fb;border-radius:30px;padding:9px 14px;font-weight:600;font-size:.87rem}.tabs a.active{background:var(--blue);color:#fff}
.admin-form{max-width:660px}.admin-tile,.record{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;max-width:760px}.admin-tile strong{font-size:1.6rem;color:var(--teal)}.record span{font-size:.86rem;flex-shrink:0}.record button{flex-shrink:0}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:white;border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:5}
.bottom-nav a{width:min(25%,180px);display:grid;place-items:center;gap:1px;color:#687995;font-size:.74rem}.bottom-nav b{font-size:1.48rem;line-height:1}.bottom-nav a.selected{color:var(--blue);font-weight:700}.bottom-nav a:nth-child(2) b{color:var(--violet)}.bottom-nav a:nth-child(3) b{color:var(--yellow)}
@media(min-width:850px){.bottom-nav{position:static;border:0;background:transparent;margin:auto;width:750px}.container{min-height:calc(100vh - 160px)}.group-card{display:inline-block;vertical-align:top;width:calc(50% - 18px);margin:10px}.attendance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:370px){.logo{width:145px}.role{display:none}.pupil .avatar{width:45px;height:45px;flex-basis:45px}.pupil{grid-template-columns:45px 1fr}.choice span{font-size:.7rem}}
@media print{.topbar,.bottom-nav,.btn,.tabs{display:none!important}body{padding:0}.card{box-shadow:none;break-inside:avoid}.container{width:100%}}