:root{--blue:#2346b7;--teal:#007b73;--red:#ef4056;--green:#10b981;--ink:#15233f;--muted:#68758d;--line:#dbe3ee;--bg:#f5f7fb;--card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}.appbar{height:54px;background:linear-gradient(90deg,#2346b7,#007b73);color:white;display:flex;align-items:center}.appbar-inner{max-width:1380px;width:100%;margin:auto;padding:0 22px;display:flex;justify-content:space-between;align-items:center}.appbar strong{font-size:18px;margin-right:10px}.appbar span{opacity:.9}.appbar a{color:#fff;text-decoration:none;font-weight:700}.container{max-width:1380px;margin:14px auto;padding:0 20px 36px}.card{background:var(--card);border:1px solid #e3e8f0;border-radius:7px;box-shadow:0 1px 5px rgba(26,39,67,.06);padding:16px;margin-bottom:12px}.selector-card{border-left:3px solid var(--blue)}.selector-row{display:flex;gap:10px;align-items:end}.grow{flex:1}.data-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #eef1f5}.btn{border:0;border-radius:5px;padding:10px 13px;font-weight:700;cursor:pointer;font-size:13px}.btn.primary{background:var(--blue);color:white}.btn.danger{background:var(--red);color:white}.btn.success{background:var(--green);color:white}.btn.soft{background:#e9edf5;color:#17233d}.file-btn{display:inline-flex;align-items:center}.tabs{display:flex;padding:8px 12px;gap:4px;overflow:auto}.tab{border:0;background:transparent;padding:9px 14px;border-radius:4px;cursor:pointer;white-space:nowrap;font-size:12px}.tab.active{background:var(--blue);color:#fff}.tab-panel{display:none}.tab-panel.active{display:block}.tab-panel h2{color:#2346b7;font-size:18px;margin:3px 0}.tab-panel h3{color:#00766f;font-size:14px;margin:18px 0 10px}.divider{border-top:1px solid #d9e1ec;margin:10px 0 14px}
.form-grid{display:grid;gap:12px}.form-grid.four{grid-template-columns:repeat(4,1fr)}.form-grid.two{grid-template-columns:repeat(2,1fr)}.full{grid-column:1/-1}.span3{grid-column:span 3}.form-actions{display:flex;justify-content:flex-end}label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#556277}input,select,textarea{width:100%;padding:9px 10px;border:1px solid #dfe5ee;border-radius:4px;background:white;color:#17233d;font:inherit}textarea{min-height:66px;resize:vertical}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.section-head p{margin:4px 0;color:var(--muted);font-size:12px}.head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.table-wrap{overflow:auto;border:1px solid #edf0f4}.editable-table{border-collapse:collapse;width:100%;min-width:900px}.editable-table th,.editable-table td{border:1px solid #e1e5eb;padding:6px;vertical-align:top}.editable-table th{background:#f2f4f7;font-size:11px;color:#303b50;text-align:center}.editable-table td:first-child{text-align:center;width:42px}.editable-table input,.editable-table textarea,.editable-table select{border:1px solid #eef1f5;padding:6px;border-radius:2px;min-width:55px}.editable-table textarea{min-height:56px}.row-remove{background:var(--red);color:#fff;border:0;border-radius:3px;padding:4px 7px;cursor:pointer}.mini-top{margin-top:10px;padding:8px 11px}.spaced{margin-top:28px!important}.below-row{display:flex;gap:18px;align-items:flex-start;margin-top:10px}.below-row textarea{width:230px}.conclusion-box{width:260px;min-height:130px}.signature-preview{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:120px;margin:34px 110px}.signature-preview p{margin:5px}.sig-space{height:80px}.signature-preview strong{text-decoration:underline}.print-box{border:1px solid #cbd7e6;border-radius:8px;background:#fbfcfe;padding:18px;margin-top:25px}.print-box h3{font-size:16px;margin:0 0 8px;color:#00776e}.print-box p{color:#59667d}.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:16px 0}.checks label,.print-actions label{flex-direction:row;align-items:center;font-size:13px;color:#17233d}.checks input,.print-actions input{width:auto}.print-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.bottom-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.bottom-actions .btn{min-width:130px}footer{text-align:center;color:#7a8496;font-size:12px;padding:20px}footer a{color:#2346b7;text-decoration:none}
dialog{border:0;border-radius:10px;width:min(650px,calc(100% - 30px));padding:0;box-shadow:0 24px 60px rgba(0,0,0,.22)}dialog::backdrop{background:rgba(19,29,49,.46)}.dialog-form{padding:20px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h3{margin:0 0 4px}.dialog-head p{margin:0 0 18px;color:var(--muted)}.dialog-head button{border:0;background:#eef1f5;width:32px;height:32px;border-radius:5px;font-size:20px;cursor:pointer}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.print-sheet{display:none;color:#000;background:#fff;font-family:Arial,sans-serif}.print-head{text-align:center}.print-head h1{font-size:17px;margin:4px 0}.print-head p{margin:4px;font-size:13px}.print-sheet h2{font-size:14px;border-bottom:1px solid #000;padding-bottom:4px;margin:14px 0 6px}.print-table{width:100%;border-collapse:collapse}.print-table td,.print-table th{border:1px solid #000;padding:5px;font-size:11px;vertical-align:top}.print-table th{background:#eee}.print-sign{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:80px;margin-top:35px}.print-sign .space{height:70px}.page-break{page-break-after:always}
@media(max-width:900px){.form-grid.four{grid-template-columns:repeat(2,1fr)}.span3{grid-column:1/-1}.signature-preview{margin:30px 20px;gap:40px}.checks{grid-template-columns:repeat(2,1fr)}.selector-row,.section-head{flex-direction:column;align-items:stretch}}@media(max-width:600px){.container{padding:0 8px}.form-grid.four,.form-grid.two{grid-template-columns:1fr}.selector-row,.data-tools,.bottom-actions{flex-direction:column;align-items:stretch}.checks{grid-template-columns:1fr}.signature-preview{grid-template-columns:1fr;gap:20px}.appbar span{display:none}}
@media print{body{background:#fff}.appbar,.selector-card,.tabs,.tab-panel,.container>footer{display:none!important}.container{max-width:none;margin:0;padding:0}#printArea{display:block}.print-sheet{display:block;padding:0}.page-break{page-break-after:always}@page{size:A4;margin:10mm}}
/* v4 dashboard/sidebar layout */
body{background:#f3f6fb}
.appbar,.tabs.card{display:none!important}
.shell{display:grid;grid-template-columns:265px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#173b8f,#102a69);padding:24px 16px;color:#fff;display:flex;flex-direction:column}
.side-brand{display:flex;align-items:center;gap:12px;padding:0 6px 24px}.side-logo{width:46px;height:46px;background:#fff;color:#173b8f;border-radius:14px;display:grid;place-items:center;font-weight:800}.side-brand h1{font-size:20px;margin:0}.side-brand p{font-size:11px;color:#dce5ff;margin:3px 0 0}
.side-menu{display:flex;flex-direction:column;gap:7px}.side-nav{border:0;background:transparent;color:#dfe7ff;text-align:left;padding:12px 13px;border-radius:10px;cursor:pointer}.side-nav:hover,.side-nav.active{background:rgba(255,255,255,.14);color:#fff}
.side-tiktok{margin-top:auto;color:#fff;text-decoration:none;background:rgba(255,255,255,.11);padding:12px;border-radius:12px;display:flex;align-items:center;gap:10px}.side-tiktok>span{background:#fff;color:#111;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800}.side-tiktok small{display:block;color:#dbe4ff;margin-top:2px}
.workspace{min-width:0}.topbar{height:74px;background:#fff;border-bottom:1px solid #e5eaf2;display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:sticky;top:0;z-index:5}.topbar h2{margin:0 0 3px;font-size:24px}.topbar p{margin:0;color:#78849a;font-size:12px}.privacy-pill{background:#eef4ff;color:#22479e;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:700}
.container{max-width:none;margin:0;padding:22px}.dashboard-panel{display:none}.dashboard-panel.active{display:block}.dashboard-hero{background:linear-gradient(135deg,#fff,#edf3ff);border:1px solid #dfe7f4;border-radius:16px;padding:24px;display:flex;justify-content:space-between;gap:20px;align-items:center}.dashboard-hero .eyebrow{font-size:11px;color:#2448b8;font-weight:800;text-transform:uppercase;letter-spacing:1px}.dashboard-hero h2{margin:6px 0 8px;font-size:25px}.dashboard-hero p{margin:0;color:#69758b;max-width:720px;line-height:1.5}.hero-badge{width:85px;height:85px;border-radius:24px;background:#2448b8;color:#fff;display:grid;place-items:center;font-weight:800}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.dash-card,.dash-box{background:#fff;border:1px solid #e1e7f0;border-radius:14px;padding:18px;box-shadow:0 5px 18px rgba(26,39,67,.05)}.dash-card span{display:block;color:#768198;font-size:12px;margin-bottom:9px}.dash-card strong{font-size:30px}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dash-box h3{margin:0 0 12px;color:#183575}.dash-list .class-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef1f5}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-btn{border:1px solid #dce5f3;background:#f6f9ff;color:#21449d;padding:12px;border-radius:10px;text-align:left;cursor:pointer;font-weight:700}
.bulk-grade-box{background:#f7faff;border:1px solid #d9e6ff;border-radius:10px;padding:15px;margin-bottom:14px}.bulk-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.bulk-title h3{margin:0 0 4px!important;color:#193b91!important}.bulk-title p{margin:0;color:#6c7890;font-size:12px}.bulk-title select{width:100px}.bulk-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.paste-box{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.paste-box textarea{min-height:95px}.bulk-grade-box small{display:block;color:#778399;margin-top:8px}
@media(max-width:1050px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-menu{display:grid;grid-template-columns:repeat(3,1fr)}.side-tiktok{margin-top:14px}.dash-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.side-menu{grid-template-columns:1fr 1fr}.dash-stats,.dash-grid,.quick-grid{grid-template-columns:1fr}.dashboard-hero{align-items:flex-start;flex-direction:column}.paste-box{grid-template-columns:1fr}.topbar{padding:0 12px}.privacy-pill{display:none}}
@media print{.sidebar,.topbar,.dashboard-panel{display:none!important}.shell{display:block}.workspace{display:block}.container{padding:0}}

.single-grade-box{background:#fffdf6;border:1px solid #f1dfaa;border-radius:10px;padding:15px;margin-bottom:14px}
.single-grade-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.single-grade-head h3{margin:0 0 4px!important;color:#8a6200!important}
.single-grade-head p{margin:0;color:#776c52;font-size:12px}
.single-grade-head select{width:100px}
.single-student-info{background:#fff7d8;border:1px solid #f0dd94;color:#6f5900;padding:10px 12px;border-radius:7px;margin:12px 0;font-weight:700;font-size:12px}
@media(max-width:700px){.single-grade-head{flex-direction:column}.single-grade-head select{width:100%}}

.doc-help{margin-top:12px;background:#f3fbf8;border:1px solid #cfe8df;border-radius:8px;padding:11px 13px;color:#3d6156;font-size:12px}
.doc-help p{margin:4px 0 0;color:#64786f}
.doc-cell{min-width:180px}
.doc-upload-label{display:inline-flex!important;align-items:center;justify-content:center;background:#e8f4ff;color:#1c4b8f;border-radius:5px;padding:7px 9px;font-weight:700;font-size:11px;cursor:pointer}
.doc-upload-label input{display:none}
.doc-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.doc-thumb{width:54px;height:54px;border:1px solid #d9e0e8;border-radius:6px;overflow:hidden;position:relative;background:#f7f9fb;display:flex;align-items:center;justify-content:center}
.doc-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.doc-thumb .doc-file{font-size:9px;text-align:center;padding:3px;word-break:break-all;color:#4f5c70}
.doc-thumb button{position:absolute;right:1px;top:1px;border:0;background:rgba(220,38,38,.92);color:#fff;width:17px;height:17px;border-radius:50%;font-size:10px;line-height:17px;padding:0;cursor:pointer}
.doc-preview-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:99;display:none;align-items:center;justify-content:center;padding:20px}
.doc-preview-modal.active{display:flex}
.doc-preview-modal img{max-width:95vw;max-height:90vh;border-radius:8px;box-shadow:0 15px 50px rgba(0,0,0,.4)}
.doc-preview-modal button{position:absolute;top:18px;right:22px;border:0;background:#fff;color:#111;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}

.side-brand h1{line-height:1.05}
@media(max-width:1050px){.side-brand h1{font-size:18px}}
.print-doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.print-doc-card{border:1px solid #000;padding:5px;break-inside:avoid}
.print-doc-card img{width:100%;max-height:150px;object-fit:contain;display:block}
.print-doc-card small{display:block;margin-top:4px;font-size:9px;word-break:break-all}

/* ===== v8 visual refresh ===== */
:root{
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --green:#34d399;
  --green-soft:#d1fae5;
  --mint:#ecfdf5;
  --sky:#eff6ff;
  --ink:#17324d;
  --muted:#6b7f93;
  --line:#dce7ee;
  --bg:#f5fbfa;
  --card:#ffffff;
}
body{background:linear-gradient(180deg,#f4fbfb,#f5f8ff)}
.sidebar{background:linear-gradient(180deg,#1f5aa8 0%,#1f7f7a 52%,#2f9e7b 100%)}
.side-nav:hover,.side-nav.active{background:rgba(255,255,255,.18)}
.topbar{background:rgba(255,255,255,.95)}
.privacy-pill{background:var(--mint);color:#11765e}
.theme-toggle{border:1px solid #d7e2ea;background:#fff;color:#28506e;padding:8px 11px;border-radius:999px;font-weight:700;cursor:pointer}
.topbar-actions{display:flex;align-items:center;gap:8px}
.dashboard-hero{background:linear-gradient(135deg,#ffffff 0%,#e8fff5 52%,#eaf2ff 100%)}
.hero-badge{background:linear-gradient(135deg,var(--blue),#2d9d83)}
.dash-card strong{color:#176b74}
.quick-btn{background:linear-gradient(135deg,#f2fbf7,#f2f7ff);border-color:#d9e8e4}
.school-logo-panel,.student-photo-panel{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#f2fff9,#f3f8ff);border:1px solid #dceae5;padding:14px;border-radius:12px;margin:14px 0}
.school-logo-preview,.student-photo-preview{width:90px;height:90px;border:1px dashed #b9cad0;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.school-logo-preview img,.student-photo-preview img{width:100%;height:100%;object-fit:contain}
.student-photo-preview img{object-fit:cover}
.school-logo-fallback,.student-photo-fallback{color:#8a9aa7;font-weight:700}
.hidden-logo{display:none}
.attendance-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.attendance-chip{padding:9px 12px;border-radius:999px;background:#f1f5f9;border:1px solid #dbe4ec;font-weight:700;font-size:12px}
.dash-grid.extra{margin-top:14px}
#progressChart{width:100%;height:280px;background:#fff;border-radius:10px}
.chart-empty{font-size:12px;color:#738399;margin-top:8px}
.class-recap-tools{display:flex;gap:8px;margin-bottom:10px}.class-recap-tools select{flex:1}
.recap-table{width:100%;border-collapse:collapse}.recap-table td,.recap-table th{border-bottom:1px solid #e8edf2;padding:8px;font-size:12px;text-align:left}
.landing-page{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#d7f9e7 0%,#dcecff 52%,#e8fff8 100%);display:flex;align-items:center;justify-content:center;padding:20px;transition:.35s}
.landing-page.hidden{opacity:0;pointer-events:none;visibility:hidden}
.landing-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.85),transparent 28%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.75),transparent 30%)}
.landing-card{position:relative;z-index:1;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);width:min(720px,100%);padding:42px;border-radius:28px;text-align:center;box-shadow:0 30px 70px rgba(35,85,110,.15);border:1px solid rgba(255,255,255,.8)}
.landing-logo-wrap{width:110px;height:110px;margin:0 auto 18px;border-radius:24px;background:linear-gradient(135deg,#ecfff5,#edf4ff);border:1px solid #d8e8e5;display:grid;place-items:center;overflow:hidden}.landing-logo{width:100%;height:100%;object-fit:contain}.landing-logo-fallback{font-size:30px;font-weight:800;color:#247377}.landing-eyebrow{text-transform:uppercase;letter-spacing:1.3px;font-size:11px;color:#2b7f72;font-weight:800}.landing-card h1{font-size:44px;margin:8px 0;color:#1c4f75}.landing-card>p{color:#5f7485;line-height:1.6;max-width:560px;margin:0 auto 22px}.landing-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.landing-primary,.landing-secondary{border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer}.landing-primary{background:linear-gradient(135deg,#2563eb,#2f9e7b);color:#fff}.landing-secondary{background:#eef5f6;color:#24586b}.landing-credit{margin-top:22px;color:#778997;font-size:12px}.landing-credit a{color:#2470ba;text-decoration:none}
.info-modal{display:none;position:fixed;inset:0;background:rgba(14,37,54,.55);z-index:250;align-items:center;justify-content:center;padding:20px}.info-modal.active{display:flex}.info-modal-card{position:relative;width:min(620px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.25)}.info-modal-card h2{margin-top:0;color:#215f74}.info-modal-card li{margin:8px 0}.info-close{position:absolute;right:14px;top:12px;border:0;background:#eef3f4;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}
body.dark{--bg:#0f172a;--card:#111827;--ink:#e5eef7;--muted:#9caac0;--line:#253248;background:#0f172a;color:var(--ink)}
body.dark .topbar,body.dark .card,body.dark .dash-card,body.dark .dash-box,body.dark input,body.dark select,body.dark textarea{background:#111827;color:#e5eef7;border-color:#26344b}
body.dark .dashboard-hero{background:linear-gradient(135deg,#111827,#10273b)}
body.dark .editable-table th{background:#1f2937;color:#dbe7f3}
body.dark .editable-table td{border-color:#2b394f}
body.dark .theme-toggle{background:#1f2937;color:#e5eef7;border-color:#39465a}
body.dark .school-logo-panel,body.dark .student-photo-panel,body.dark .bulk-grade-box,body.dark .single-grade-box{background:#132133;border-color:#2b3c4f}
body.dark .quick-btn{background:#172236;color:#dbe7f4;border-color:#2b3c4f}
@media(max-width:800px){.landing-card{padding:28px 18px}.landing-card h1{font-size:36px}.dash-grid.extra{grid-template-columns:1fr}}

.student-search-tools{display:grid;grid-template-columns:1fr 220px auto;gap:8px;margin-top:12px}
.lock-screen{position:fixed;inset:0;background:linear-gradient(135deg,#d7f9e7,#dcecff);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.lock-screen.active{display:flex}
.lock-card{width:min(420px,100%);background:#fff;padding:30px;border-radius:22px;text-align:center;box-shadow:0 25px 70px rgba(0,0,0,.18)}
.lock-icon{font-size:40px}.lock-card h2{margin:10px 0 6px}.lock-card p{color:#6c7b8d}.lock-card input{margin:12px 0}.lock-error{color:#d33;font-size:12px;margin-top:8px}
.lock-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.mini-recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.mini-recap-grid>div{background:#f6faf9;border:1px solid #e1ebe8;border-radius:9px;padding:10px;text-align:center}.mini-recap-grid strong{display:block;font-size:11px;color:#647487}.mini-recap-grid span{font-size:22px;font-weight:800;color:#1f7f7a}
.print-cover{border:2px solid #17324d;padding:18px;margin-bottom:14px;text-align:center}.print-cover-logo{width:70px;height:70px;object-fit:contain;margin-bottom:8px}.print-cover h1{font-size:18px;margin:6px 0}.print-cover .meta{font-size:11px;color:#333}
.print-section-title{background:#eef5f7;border-left:4px solid #2563eb;padding:6px 8px;font-weight:700;margin:14px 0 6px}
@media(max-width:700px){.student-search-tools{grid-template-columns:1fr}.mini-recap-grid{grid-template-columns:1fr}}
body.dark .mini-recap-grid>div{background:#172236;border-color:#2b3c4f}

.single-dashboard-grid{grid-template-columns:1fr}
.progress-page{min-height:600px}
.progress-toolbar{display:grid;grid-template-columns:1fr 220px;gap:12px;margin-bottom:16px}
.progress-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.progress-stat{background:linear-gradient(135deg,#f0fff8,#eef5ff);border:1px solid #dbe9e6;border-radius:12px;padding:14px;text-align:center}
.progress-stat span{display:block;color:#6d7f8d;font-size:11px;margin-bottom:7px}
.progress-stat strong{font-size:25px;color:#1f7080}
.progress-chart-card{background:#fff;border:1px solid #e1e8ef;border-radius:14px;padding:16px;margin-bottom:18px}
.progress-chart-card canvas{width:100%;height:360px}
.progress-detail h3{color:#1f6f78}
.progress-table{min-width:720px}
.trend-up{color:#0a8f5b;font-weight:800}.trend-down{color:#d64545;font-weight:800}.trend-flat{color:#6d7785;font-weight:800}
body.dark .progress-stat{background:#15263a;border-color:#2b3c4f}
body.dark .progress-chart-card{background:#111827;border-color:#2b394f}
@media(max-width:800px){.progress-toolbar{grid-template-columns:1fr}.progress-summary-grid{grid-template-columns:repeat(2,1fr)}}


/* ===== v12 print header refinement ===== */
.print-letterhead{
  display:grid;
  grid-template-columns:80px 1fr 80px;
  gap:12px;
  align-items:center;
  border:1.5px solid #000;
  padding:10px 12px;
  margin-bottom:10px;
}
.print-letterhead-left,
.print-letterhead-right{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:74px;
}
.print-letterhead-logo,
.print-student-photo{
  width:62px;
  height:62px;
  object-fit:contain;
  display:block;
}
.print-student-photo{
  object-fit:cover;
  border:1px solid #000;
}
.print-letterhead-center{
  text-align:center;
}
.print-school-name{
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.2;
  margin-bottom:2px;
}
.print-app-name{
  font-size:11px;
  font-weight:700;
  margin-bottom:4px;
}
.print-main-title{
  font-size:16px;
  font-weight:800;
  margin:4px 0 2px;
  text-transform:uppercase;
}
.print-meta-line{
  font-size:11px;
  line-height:1.35;
}
.print-header-rule{
  border-top:2px solid #000;
  margin:6px 0 10px;
}
.print-no-photo,
.print-no-logo{
  width:62px;
  height:62px;
  border:1px solid #000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  text-align:center;
  line-height:1.2;
}

/* ===== v13 Attendance Counter ===== */
.attendance-help{color:#687a89;margin-top:0}
.attendance-counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.attendance-counter-card{border:1px solid #dfe8ed;border-radius:16px;padding:16px;background:#fff;text-align:center;box-shadow:0 8px 20px rgba(31,80,100,.05)}
.attendance-counter-card label{display:block;font-size:14px;font-weight:800;color:#284e63;margin:7px 0 12px}
.attendance-counter-icon{display:inline-flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;font-size:18px;font-weight:900;background:#eef7f5;color:#267a6a}
.attendance-counter-card.hadir .attendance-counter-icon{background:#e8faf1;color:#15805d}
.attendance-counter-card.izin .attendance-counter-icon{background:#eef5ff;color:#2b67b1}
.attendance-counter-card.sakit .attendance-counter-icon{background:#fff5e8;color:#b87519}
.attendance-counter-card.alpa .attendance-counter-icon{background:#fff0f0;color:#bf4545}
.number-stepper{display:grid;grid-template-columns:40px 1fr 40px;gap:7px;align-items:center}
.number-stepper input{width:100%;text-align:center;font-size:23px;font-weight:800;padding:9px 5px;border:1px solid #cad9e0;border-radius:10px}
.step-btn{height:42px;border:1px solid #cad9e0;background:#f6fafb;border-radius:10px;font-size:22px;font-weight:800;cursor:pointer;color:#315b6d}
.step-btn:hover{background:#eaf5f4}
.attendance-total-box{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#eefcf6,#eef5ff);border:1px solid #d8e9e4;border-radius:12px;padding:14px 16px;margin-top:12px}
.attendance-total-box span{font-weight:700;color:#4f6776}.attendance-total-box strong{font-size:26px;color:#1d7780}
.attendance-note-box{margin-top:16px}.attendance-note-box label{display:block;font-weight:700;margin-bottom:7px}
body.dark .attendance-counter-card,body.dark .attendance-total-box{background:#162235;border-color:#2b3c4f}
body.dark .attendance-counter-card label{color:#d9e6f2}
body.dark .step-btn{background:#1c2a3b;color:#dce8f3;border-color:#34465b}
@media(max-width:900px){.attendance-counter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.attendance-counter-grid{grid-template-columns:1fr}}

/* v14 - native number arrows only */
.number-stepper.native-only{
  display:block;
}
.number-stepper.native-only input{
  width:100%;
  text-align:center;
  font-size:24px;
  font-weight:800;
  padding:10px 8px;
}
.step-btn{display:none!important}