:root{--green:#0b6845;--green2:#075338;--gold:#d5aa3d;--bg:#f3f6f5;--panel:#fff;--ink:#17221d;--muted:#66756e;--line:#dfe7e3;--red:#b42318;--amber:#9a6700;--blue:#175cd3;--shadow:0 8px 28px rgba(18,47,35,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.loading{min-height:100vh;display:grid;place-items:center;color:var(--muted)}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#eaf6f0 0,#f5f7f6 50%,#eef2f0 100%)}.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:20px}.auth-brand img,.brand img{width:58px;height:58px;object-fit:contain}.auth-brand h1{font-size:20px;margin:0}.auth-brand p,.brand span{margin:4px 0 0;color:var(--muted);font-size:13px}.auth-card label,.field{display:grid;gap:6px;margin-bottom:12px;font-size:13px;font-weight:700}.auth-card input,.input,.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:#fff}.privacy-note,.sub{font-size:12px;color:var(--muted);line-height:1.45}.form-error{color:var(--red);font-size:12px;min-height:16px}
.shell{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--green2),#073825);color:#fff;padding:16px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:5px 7px 16px;border-bottom:1px solid rgba(255,255,255,.16)}.brand b{font-size:14px;display:block}.nav-btn{width:100%;border:0;background:transparent;color:#eaf4ef;text-align:left;padding:11px 10px;border-radius:10px;margin:2px 0;font-weight:700}.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.13)}.side-user{margin-top:auto;padding:12px 8px;border-top:1px solid rgba(255,255,255,.16)}.side-user small{display:block;opacity:.8;margin:3px 0 7px}.link-btn{border:0;background:transparent;color:#fff;padding:0;text-decoration:underline}.main{padding:22px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}.topbar h2{margin:0;font-size:24px}.topbar p{margin:4px 0 0}.status-chip{font-size:12px;font-weight:700;border-radius:999px;padding:7px 10px;background:#e8f5ee;color:var(--green)}
.grid{display:grid;gap:14px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.two{grid-template-columns:1fr 1fr}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:0 2px 10px rgba(18,47,35,.035)}.metric{font-size:30px;font-weight:800;margin:6px 0}.label{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 12px;border-radius:10px;font-weight:700;font-size:13px}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.danger{background:#fff3f1;color:var(--red);border-color:#ffd5cf}.btn.warn{background:#fff8e7;color:var(--amber);border-color:#efd595}.btn.blue{background:#eef4ff;color:var(--blue);border-color:#c9d8ff}.btn.full{width:100%}.notice{padding:12px 14px;border:1px solid #e7d08a;background:#fff8df;color:#6c5313;border-radius:10px;font-size:13px;line-height:1.45}.success{padding:12px 14px;border:1px solid #b8dfc8;background:#edf9f2;color:#17643e;border-radius:10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}table{border-collapse:collapse;width:100%;min-width:680px}th,td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:middle}th{background:#f7f9f8;color:#51615a;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.empty{text-align:center;padding:28px;color:var(--muted)}
.scanner-grid{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(280px,.9fr);gap:14px}.scanner-frame{background:#111;border-radius:14px;overflow:hidden;min-height:320px;display:grid;place-items:center}.scanner-frame #reader{width:100%}.scan-result{font-size:16px}.scan-result strong{font-size:22px}.scan-success{border-left:5px solid var(--green)}.scan-warning{border-left:5px solid #d69e2e}.scan-error{border-left:5px solid var(--red)}.recent-list{display:grid;gap:8px}.recent-item{border:1px solid var(--line);border-radius:10px;padding:10px 11px;display:flex;justify-content:space-between;gap:12px}.recent-item small{color:var(--muted);display:block;margin-top:3px}
.att-controls{display:grid;grid-template-columns:180px 1fr 1fr;gap:10px;align-items:end}.attendance-roster{display:grid;gap:8px}.att-row{display:grid;grid-template-columns:minmax(190px,1fr) repeat(5,auto);gap:6px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px;background:#fff}.att-name b{display:block}.att-name small{color:var(--muted)}.status-btn{padding:7px 9px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12px}.status-btn.selected{background:#e9f6ef;border-color:#8bc2a5;color:#0c5d3d;font-weight:800}.status-btn.absent.selected{background:#fff0ee;border-color:#efaaa1;color:#a22b1e}.status-btn.late.selected,.status-btn.cut.selected{background:#fff8e6;border-color:#e7c66e;color:#795700}.status-btn.excused.selected{background:#eef4ff;border-color:#b5caf4;color:#164fa5}.counters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.counter{background:#f2f5f4;border-radius:999px;padding:6px 9px;font-size:12px}
.template-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.meta-box{background:#f6f8f7;border-radius:10px;padding:10px}.meta-box small{display:block;color:var(--muted);margin-bottom:3px}.template-check{font-family:monospace;font-size:12px;white-space:pre-wrap;background:#0f1720;color:#d9efe4;border-radius:10px;padding:12px;max-height:230px;overflow:auto}.sf2-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin:8px 0 12px}.sf2-legend span{background:#f5f7f6;border-radius:8px;padding:6px 8px}
.dialog-card{width:min(680px,92vw);border:0;border-radius:14px;padding:0;background:#fff}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line)}.dialog-head h3{margin:0}.icon-btn{border:0;background:transparent;font-size:24px}.dialog-card #modalBody{padding:16px}dialog{border:0;border-radius:14px;padding:0}dialog::backdrop{background:rgba(0,0,0,.45)}.toast{position:fixed;right:18px;bottom:18px;background:#16261f;color:#fff;padding:11px 14px;border-radius:10px;box-shadow:var(--shadow);z-index:99}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.scanner-grid,.two{grid-template-columns:1fr}.att-controls{grid-template-columns:1fr 1fr}.att-controls .grow{grid-column:1/-1}.shell{grid-template-columns:78px 1fr}.brand div,.nav-label,.side-user>div,.side-user>small{display:none}.brand{justify-content:center}.nav-btn{text-align:center;font-size:19px}.side-user{text-align:center}}
@media(max-width:660px){.shell{display:block}.sidebar{height:auto;position:static;display:block;padding:8px}.brand,.side-user{display:none}.sidebar nav{display:flex;overflow:auto;gap:4px}.nav-btn{min-width:52px;margin:0}.main{padding:12px}.cards{grid-template-columns:1fr 1fr;gap:8px}.topbar h2{font-size:20px}.att-controls{grid-template-columns:1fr}.att-row{grid-template-columns:1fr 1fr 1fr}.att-name{grid-column:1/-1}.template-meta{grid-template-columns:1fr}.scanner-frame{min-height:260px}}
.top-actions{display:flex;gap:8px;align-items:center}.guardian-child{font-size:18px;font-weight:800;margin:8px 0 2px}.attendance-badge{margin-top:12px;border-left:4px solid var(--green);padding:9px 10px;background:#f7f9f8;border-radius:8px}.attendance-badge b,.attendance-badge span{display:block}.attendance-badge span{font-size:12px;color:var(--muted);margin-top:3px}.notification-item{border:1px solid var(--line);border-radius:11px;padding:11px 12px;display:flex;justify-content:space-between;gap:12px;background:#fff}.notification-item.unread{border-left:5px solid var(--green);background:#f3fbf7}.notification-item small{display:block;color:var(--muted);margin-top:4px}.success-inline{color:var(--green);font-weight:800}.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}.qr-card{background:#fff;border:1px solid #cfd8d3;border-radius:12px;padding:13px;text-align:center;break-inside:avoid;page-break-inside:avoid}.qr-card .qr-school{font-size:10px;font-weight:800;letter-spacing:.05em;margin-bottom:8px}.qr-box{display:flex;justify-content:center;min-height:170px;margin:4px auto 9px}.qr-card b{display:block;font-size:14px}.qr-card span{display:block;font-size:12px;margin-top:3px}.qr-card small{display:block;color:var(--muted);margin-top:5px}.no-print{}
@media(max-width:660px){.top-actions .install-trigger{display:none}.qr-grid{grid-template-columns:1fr 1fr}.qr-card{padding:9px}.qr-box{transform:scale(.88);transform-origin:center;margin:-8px auto -2px}.notification-item{display:block}.notification-item>div:last-child{text-align:left!important;margin-top:7px}}
@media(max-width:420px){.qr-grid{grid-template-columns:1fr}}
@media print{body{background:#fff}.sidebar,.topbar,.no-print,.toast,dialog{display:none!important}.shell{display:block}.main{padding:0}.qr-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.qr-card{box-shadow:none;border:1px solid #777;border-radius:0;padding:8px}.qr-box{min-height:150px;transform:scale(.86);transform-origin:center;margin:-10px auto -8px}.qr-card small{font-size:9px}}

.template-list{display:grid;gap:10px}
.template-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.template-main{display:grid;gap:4px;min-width:0}.template-main b{overflow-wrap:anywhere}.template-main span{font-size:13px;color:var(--muted)}
.template-actions{display:flex;gap:8px;flex-wrap:wrap}.btn.small{padding:8px 10px;font-size:13px}.btn.danger{background:#fff;color:#b42318;border:1px solid #f3b4ad}.btn.danger:hover{background:#fff1ef}
.active-tag{color:#0b6845;font-size:12px}
@media(max-width:700px){.template-row{align-items:flex-start;flex-direction:column}.template-actions{width:100%}.template-actions .btn{flex:1}}

.exact-box{margin-top:16px;padding:14px;border:1px solid #b7dfc7;border-radius:14px;background:#eef9f2;display:grid;gap:12px}
.exact-box .btn{justify-self:start}

.system-switch-btn{margin-top:10px!important;border-top:1px solid rgba(255,255,255,.18)!important;background:rgba(214,170,58,.12)!important;color:#fff7d6!important}
.system-switch-btn:hover{background:rgba(214,170,58,.24)!important}


/* =====================================================================
   v2.2 Professional Attendance UI
   Offline-safe system font stack; no external font dependency.
   ===================================================================== */
:root{
 --green:#0d6849;
 --green2:#073f31;
 --green3:#0a513b;
 --gold:#cba84d;
 --bg:#f3f6f5;
 --panel:#ffffff;
 --ink:#18231f;
 --muted:#64736c;
 --line:#dbe5e0;
 --red:#b42318;
 --amber:#966400;
 --blue:#175cd3;
 --shadow:0 8px 28px rgba(12,55,40,.075);
 --shadow-lg:0 20px 60px rgba(7,49,37,.14);
}
html,body{
 font-family:"Aptos","Segoe UI Variable","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
 font-size:14px;line-height:1.45;letter-spacing:.002em;
 background:linear-gradient(180deg,#f8faf9 0%,#f2f6f4 100%);
}
body{font-synthesis:none}
.loading{font-weight:750;letter-spacing:.01em}
.auth-screen{
 background:
   radial-gradient(circle at 14% 12%,rgba(203,168,77,.16),transparent 27%),
   radial-gradient(circle at 88% 86%,rgba(13,104,73,.14),transparent 30%),
   linear-gradient(145deg,#f0f7f4,#fbfaf6);
}
.auth-card{
 width:min(450px,100%);border-radius:24px;padding:30px;
 border-color:#d9e6e0;box-shadow:var(--shadow-lg)
}
.auth-brand{margin-bottom:25px}
.auth-brand img{width:66px;height:66px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.08))}
.auth-brand h1{font-size:21px;font-weight:780;letter-spacing:-.02em}
.auth-brand p{font-size:12.5px;letter-spacing:.01em}
.auth-card label,.field{font-weight:700;color:#43524b}
.auth-card input,.input,.field input,.field select,.field textarea{
 border-radius:11px;border-color:#d5e1dc;padding:11px 12px;color:var(--ink);
 transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.auth-card input:focus,.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
 outline:none;border-color:#6aa68e;box-shadow:0 0 0 3px rgba(13,104,73,.11);background:#fff;
}
.btn{
 border-radius:10px;font-weight:700;letter-spacing:.005em;
 transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(12,55,40,.09)}
.btn.primary{
 background:linear-gradient(180deg,#147653,#0d6548);
 border-color:#0d6548;box-shadow:0 5px 15px rgba(13,104,73,.16)
}
.shell{grid-template-columns:258px 1fr}
.sidebar{
 background:
   linear-gradient(180deg,#0a4a37 0%,#07392e 48%,#062c24 100%);
 padding:18px 13px;box-shadow:8px 0 30px rgba(7,49,37,.08)
}
.brand{padding:5px 7px 18px}
.brand img{width:54px;height:54px}
.brand b{font-size:13.5px;font-weight:760;letter-spacing:.005em}
.brand span{color:rgba(255,255,255,.72);font-size:11.5px}
.nav-btn{
 position:relative;border-radius:11px;padding:10px 11px;margin:3px 0;font-weight:650;
 transition:background .15s ease,transform .15s ease,color .15s ease
}
.nav-btn:hover{background:rgba(255,255,255,.10);transform:translateX(2px)}
.nav-btn.active{
 background:rgba(255,255,255,.15);
 box-shadow:inset 3px 0 0 var(--gold);
 color:#fff
}
.system-switch-btn{background:rgba(203,168,77,.12)!important;color:#fff7db!important}
.side-user{padding:14px 8px}
.main{padding:26px 30px}
.topbar{
 position:sticky;top:0;z-index:8;margin:-10px -10px 20px;padding:12px 10px 14px;
 background:rgba(243,246,245,.90);backdrop-filter:blur(10px)
}
.topbar h2{font-size:25px;font-weight:780;letter-spacing:-.025em}
.status-chip{border:1px solid #cde5d9;background:#edf8f2}
.card{
 border-radius:17px;padding:18px;border-color:#dce6e1;
 box-shadow:var(--shadow);background:rgba(255,255,255,.98)
}
.card h3{font-weight:760;letter-spacing:-.015em}
.metric{font-size:32px;font-weight:800;letter-spacing:-.035em}
.label{font-size:10.5px;font-weight:800;letter-spacing:.085em}
.notice,.success{border-radius:12px}
.table-wrap{border-radius:14px;border-color:#dce6e1;box-shadow:0 2px 8px rgba(12,55,40,.025)}
th{
 position:sticky;top:0;z-index:1;background:#f5f8f6;
 font-weight:780;letter-spacing:.06em
}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#fafcfb}
.scanner-grid{gap:16px}
.scanner-frame{
 position:relative;border-radius:18px;min-height:350px;
 background:linear-gradient(145deg,#0b1511,#101d18);
 border:1px solid #23352d;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 12px 35px rgba(7,37,28,.16)
}
.scanner-frame:after{
 content:"";position:absolute;inset:16px;border:1px solid rgba(203,168,77,.38);
 border-radius:13px;pointer-events:none
}
.scan-result{border-radius:15px}
.scan-result strong{font-size:23px;letter-spacing:-.015em}
.scan-success{border-left:5px solid #159667}
.scan-warning{border-left:5px solid #d39b22}
.scan-error{border-left:5px solid #c43d31}
.recent-item,.notification-item,.template-row,.qr-card,.att-row{
 border-radius:12px;border-color:#dae5df;box-shadow:0 2px 8px rgba(12,55,40,.025)
}
.att-row{padding:9px}
.status-btn{
 border-radius:9px;font-weight:650;transition:transform .1s ease,box-shadow .1s ease
}
.status-btn:hover{transform:translateY(-1px)}
.status-btn.selected{box-shadow:0 0 0 2px rgba(13,104,73,.07)}
.counter{border:1px solid #e0e8e4;background:#f7f9f8;font-weight:650}
.meta-box{background:#f7f9f8;border:1px solid #e4ebe7}
.template-check{border-radius:12px}
.dialog-card,dialog{border-radius:18px}
.dialog-card{box-shadow:var(--shadow-lg)}
.dialog-head{padding:17px 18px}
.dialog-head h3{font-weight:780;letter-spacing:-.015em}
.toast{border-radius:12px;box-shadow:0 12px 38px rgba(0,0,0,.18)}
.exact-box{border-radius:15px;border-color:#b9dcc8;background:#f0faf4}
.qr-card{padding:14px}
.qr-card .qr-school{letter-spacing:.065em}
.notification-item.unread{background:#f3faf6;border-left-color:#0d6849}

@media(max-width:1000px){
 .shell{grid-template-columns:82px 1fr}
 .main{padding:22px}
}
@media(max-width:660px){
 .main{padding:13px}
 .topbar{position:static;margin:0 0 14px;padding:0;background:transparent;backdrop-filter:none}
 .auth-card{padding:24px;border-radius:20px}
 .cards{gap:9px}
 .card{padding:15px;border-radius:14px}
 .scanner-frame{min-height:275px;border-radius:15px}
 .nav-btn:hover{transform:none}
}


/* ================================================================
   v2.3 Individual Student QR Management
   ================================================================ */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:#f8fbf9;font-size:11px;font-weight:800;color:var(--green)}
.individual-qr-list{display:grid;gap:8px;margin-top:12px}
.individual-qr-row{
 display:grid;grid-template-columns:minmax(250px,1.4fr) minmax(180px,.7fr) auto;
 gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.individual-qr-row:hover{background:#fafcfb;border-color:#cfded7}
.individual-qr-person{display:flex;align-items:center;gap:10px;min-width:0}
.individual-qr-person b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.individual-qr-person small,.individual-qr-status small{display:block;color:var(--muted);margin-top:3px;font-size:11px}
.qr-avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#eaf5ef;color:var(--green);font-weight:900;flex:0 0 auto}
.individual-qr-status{display:flex;flex-direction:column;align-items:flex-start}
.qr-status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}
.qr-status.active{background:#e7f6ee;color:#087345}
.qr-status.none{background:#f1f3f2;color:#69736f}
.individual-qr-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.qr-counter-strip{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.single-qr-printable{margin-top:14px;border:1px solid #cfe0d8;border-radius:14px;background:#f8fbf9;padding:14px}
.single-qr-preview-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.single-qr-card-wrap{display:flex;justify-content:center}
.individual-print-card{width:min(310px,100%);box-shadow:0 8px 24px rgba(18,55,43,.08)}
.individual-print-card .qr-box{min-height:190px}

@media(max-width:780px){
 .section-head{display:block}
 .qr-counter-strip{justify-content:flex-start;margin-top:8px}
 .individual-qr-row{grid-template-columns:1fr}
 .individual-qr-actions{justify-content:flex-start}
 .single-qr-preview-title{display:block}
 .single-qr-preview-title .btn{margin-top:9px;width:100%}
}
@media print{
 body.print-single-qr #view > *{display:none!important}
 body.print-single-qr #individualQrPreviewWrap{display:block!important;border:0!important;background:#fff!important;padding:0!important;margin:0!important}
 body.print-single-qr #individualQrPreviewWrap .single-qr-preview-title{display:none!important}
 body.print-single-qr #individualQrPreview{display:flex!important;justify-content:center!important}
 body.print-single-qr .individual-print-card{display:block!important;width:320px!important;border:1px solid #555!important;border-radius:0!important;padding:14px!important;margin:0 auto!important;box-shadow:none!important}
 body.print-single-qr .individual-print-card .qr-box{min-height:190px!important;transform:none!important;margin:4px auto 9px!important}
}


/* v2.4 Auto roster + QR file exports */
.qr-export-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.qr-export-actions .btn{min-width:62px}
@media(max-width:780px){
 .qr-export-actions{justify-content:flex-start;margin-top:10px}
 .qr-export-actions .btn{flex:1 1 90px}
}


/* v2.5 Offline Attendance */
.offline-ready-card{border-top:4px solid #0b6845}.offline-ready-icon{font-size:40px;margin-bottom:8px}.offline-stats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.offline-stats span{padding:8px 10px;border-radius:10px;background:#eef7f2;border:1px solid #cfe3d8;font-size:12px}.offline-stats b{font-size:18px;margin-right:4px;color:#0b6845}.offline-saved{display:inline-block;background:#fff4d7;border:1px solid #ebd17c;color:#73550e;padding:6px 9px;border-radius:9px;font-weight:800;margin:5px 0}.status-chip.offline-ready{background:#fff4d7;color:#73550e}