*{box-sizing:border-box}:root{--navy:#142b49;--blue:#2864d7;--sky:#eaf2ff;--ink:#18283d;--muted:#718096;--line:#e8edf4;--bg:#f7f9fc}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}
.topbar{height:78px;padding:0 max(6vw,24px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark,.footer-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:var(--blue);color:#fff;font:800 22px Manrope,sans-serif;box-shadow:0 5px 14px #2864d733}
.brand-kicker{display:block;font-size:9px;letter-spacing:1.8px;color:#8491a3;font-weight:800;margin-bottom:3px}.brand strong{font:800 13px Manrope,sans-serif;color:var(--navy)}
.directory-tag{font-size:10px;letter-spacing:1.4px;font-weight:800;color:var(--blue);background:var(--sky);padding:10px 14px;border-radius:30px}
main{max-width:1180px;margin:auto;padding:0 28px}.hero{min-height:280px;margin:34px 0 45px;padding:48px 58px;border-radius:22px;background:linear-gradient(115deg,#142b49,#1e4778 65%,#2864d7);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:550px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#b8d1ff;display:flex;align-items:center;gap:9px}.eyebrow-dot{width:7px;height:7px;background:#76d6b2;border-radius:50%}
h1{font:800 clamp(36px,5vw,55px)/1.1 Manrope,sans-serif;letter-spacing:-2px;margin:18px 0 12px}h1 em{font-style:normal;color:#9fc4ff}.hero p{color:#d3e0f2;font-size:15px;margin:0;line-height:1.7}
.hero-art{position:absolute;right:65px;top:0;width:360px;height:100%;opacity:.95}.art-circle{position:absolute;border:1px solid #ffffff2b;border-radius:50%}.circle-one{width:300px;height:300px;right:5px;top:-10px}.circle-two{width:230px;height:230px;right:40px;top:25px}.art-person{position:absolute;bottom:0;width:88px;height:142px;border-radius:48px 48px 0 0;background:#a8c8f6}.art-person:before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:#f3c8a8;top:-43px;left:13px}.art-person:after{content:"";position:absolute;width:66px;height:31px;border-radius:40px 40px 10px 10px;background:#26364d;top:-48px;left:11px}.person-a{left:54px;background:#78a5e9;height:125px}.person-b{left:155px;background:#f0b85e;height:160px;z-index:1}.person-c{left:254px;background:#70c5b1;height:130px}.person-c:after{background:#5b3e35}.art-spark{position:absolute;color:#c4dcff;font-size:27px}.spark-a{top:42px;left:17px}.spark-b{top:75px;right:4px}
.directory{padding-bottom:70px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.muted{color:#8b98aa}.section-heading h2{font:800 28px Manrope,sans-serif;margin:7px 0 0;letter-spacing:-.8px}.student-count{display:flex;align-items:baseline;gap:7px;color:var(--muted);font-size:12px}.student-count strong{font:800 25px Manrope,sans-serif;color:var(--blue)}
.toolbar{display:flex;gap:14px;align-items:center}.search-wrap{height:52px;display:flex;align-items:center;gap:12px;padding:0 17px;background:#fff;border:1px solid var(--line);border-radius:12px;flex:1;max-width:650px}.search-wrap svg{width:19px;stroke:#8c9aab;stroke-width:1.8;fill:none;flex:none}.search-wrap input{border:0;outline:0;width:100%;font:500 13px "DM Sans";color:var(--ink)}.search-wrap input::placeholder{color:#a3adbb}.filter-wrap{height:52px;min-width:205px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 13px}.filter-wrap span{font-size:10px;color:#8b98aa;white-space:nowrap}.filter-wrap select{border:0;outline:0;background:transparent;color:var(--ink);font:700 12px "DM Sans";width:100%;cursor:pointer}
.results-line{display:flex;justify-content:space-between;align-items:center;margin:19px 2px 16px;color:#8491a3;font-size:11px}.clear-btn{border:0;background:none;color:var(--blue);font:700 11px "DM Sans";cursor:pointer;padding:5px}.student-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.student-card{width:100%;font-family:inherit;background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px 15px 16px;text-align:center;transition:transform .18s,box-shadow .18s;cursor:pointer;color:inherit}.student-card:hover,.student-card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px #1b35520d;outline:2px solid #b8d1ff;outline-offset:2px}
.avatar{width:94px;height:94px;margin:1px auto 13px;border-radius:50%;background:linear-gradient(145deg,#eaf2ff,#dce8fa);display:grid;place-items:center;overflow:hidden}.avatar svg{width:67px;height:76px}.student-name{font:800 13px Manrope,sans-serif;color:var(--navy);margin:0 0 9px;line-height:1.4;min-height:36px;display:flex;justify-content:center;align-items:center}.class-pill{display:inline-block;padding:6px 12px;border-radius:30px;background:#edf4ff;color:#3267b8;font-size:10px;font-weight:800}.view-hint{display:block;font-size:9px;color:#97a3b3;margin-top:10px}
.empty-state{text-align:center;padding:60px 15px;color:var(--muted)}.empty-icon{font-size:38px;color:#9bb8e5}.empty-state h3{font:800 18px Manrope;color:var(--navy);margin:10px 0 5px}.empty-state p,.load-message{font-size:12px;color:#8b98aa;text-align:center}.load-message{margin-top:18px}
footer{min-height:78px;border-top:1px solid var(--line);background:#fff;padding:17px max(6vw,24px);display:flex;align-items:center;gap:11px;color:#8793a3;font-size:11px}.footer-mark{width:27px;height:27px;border-radius:8px;font-size:15px}.footer-note{margin-left:auto;color:#9aa6b5}
.modal-backdrop{position:fixed;inset:0;z-index:20;background:#0c1d33b8;display:grid;place-items:center;padding:20px;overflow-y:auto}.modal-backdrop[hidden]{display:none}.id-modal{position:relative;width:min(100%,490px);background:#fff;border-radius:20px;padding:25px 27px 18px;box-shadow:0 25px 80px #07162955;animation:pop .18s ease-out}.modal-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#eff3f8;color:#53657b;font-size:25px;line-height:1;cursor:pointer}.id-top{display:flex;align-items:center;gap:12px;padding-right:35px}.id-school-mark{width:43px;height:43px;border-radius:12px;background:var(--blue);display:grid;place-items:center;color:#fff;font:800 24px Manrope}.id-kicker{font-size:9px;letter-spacing:1.7px;color:#8794a5;font-weight:800}.id-top h2{font:800 13px Manrope;color:var(--navy);margin:4px 0 0}.id-band{margin:20px -27px 22px;padding:10px 27px;background:#edf4ff;color:#2c5fae;font-size:10px;letter-spacing:1.8px;font-weight:800}.id-content{display:flex;gap:20px;align-items:center}.id-photo{width:112px;height:132px;flex:none;border-radius:12px;background:linear-gradient(145deg,#eaf2ff,#dce8fa);display:grid;place-items:center}.id-photo svg{width:88px;height:100px}.id-details{flex:1;min-width:0}.detail-label{display:block;color:#8b98aa;font-size:8px;letter-spacing:1.4px;font-weight:800;margin-bottom:5px}.id-details h3{font:800 17px/1.35 Manrope;color:var(--navy);margin:0 0 19px;overflow-wrap:anywhere}.detail-row{display:flex;gap:24px}.detail-row strong{font:700 12px "DM Sans";color:#263c59;overflow-wrap:anywhere}.id-status{display:flex;align-items:center;gap:7px;margin-top:20px;color:#3c8a70;font-size:8px;font-weight:800;letter-spacing:.8px}.status-dot{width:7px;height:7px;border-radius:50%;background:#48b58e}.id-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #dce3ed;margin-top:23px;padding-top:14px;color:#8997a8;font-size:8px;letter-spacing:1.1px;font-weight:800}.id-chip{padding:6px 9px;border:1px solid #dce6f5;border-radius:5px;color:#4c6f9f}.id-disclaimer{text-align:center;color:#a1aab6;font-size:9px;margin:14px 0 0}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.student-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{right:5px;opacity:.55}.hero-copy{max-width:480px}}
@media(max-width:620px){.topbar{height:68px;padding:0 17px}.brand strong{font-size:10px}.brand-mark{width:34px;height:34px}.directory-tag{font-size:8px;padding:8px 10px}main{padding:0 16px}.hero{margin:20px 0 34px;padding:35px 25px;min-height:245px}.hero-art{right:-95px;opacity:.28}.hero-copy{max-width:100%}h1{font-size:39px}.hero p{font-size:13px}.section-heading h2{font-size:24px}.toolbar{flex-direction:column;align-items:stretch}.search-wrap{max-width:none}.filter-wrap{width:100%}.student-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.student-card{padding:14px 9px}.avatar{width:82px;height:82px}.avatar svg{width:59px;height:68px}.student-name{font-size:11px;min-height:33px}.footer-note{display:none}footer{padding:16px 18px}.id-modal{padding:21px 19px 16px}.id-band{margin:17px -19px 19px;padding:10px 19px}.id-content{gap:13px}.id-photo{width:91px;height:112px}.id-photo svg{width:73px;height:87px}.id-details h3{font-size:14px;margin-bottom:15px}.detail-row{gap:12px}.detail-row strong{font-size:11px}}
\n.extra-detail-row{margin-top:13px}.extra-detail-row>div{min-width:0;flex:1}.extra-detail-row strong{display:block}\n
/* Student profile picture */
.avatar {
width: 94px;
height: 94px;
margin: 1px auto 13px;
border-radius: 50%;
background: linear-gradient(145deg, #eaf2ff, #dce8fa);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.avatar img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* Student ID picture */
.id-photo {
width: 112px;
height: 132px;
flex: none;
border-radius: 12px;
background: linear-gradient(145deg, #eaf2ff, #dce8fa);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.id-photo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Age and birthday highlights */
.age-pill{display:block;width:max-content;max-width:100%;margin:8px auto 0;padding:5px 10px;border-radius:20px;background:#f1f4f8;color:#52647b;font-size:10px;font-weight:800}
.birthday-card{background:#fff8e8;border:2px solid #f2b544;box-shadow:0 7px 20px #e7a72b20}
.birthday-card .avatar{background:linear-gradient(145deg,#fff0bd,#ffe0a0)}
.birthday-card .class-pill{background:#ffedc2;color:#8a5700}
.birthday-badge,.birthday-modal-badge{display:block;width:max-content;max-width:100%;margin:8px auto 0;padding:6px 10px;border-radius:20px;background:#f6bd4b;color:#603d00;font-size:9px;font-weight:900;letter-spacing:.3px}
.birthday-modal .id-band{background:#fff0c9;color:#875600}
.birthday-modal .id-school-mark{background:#d99a24}
.birthday-modal-badge{margin:13px 0 0}
.birthday-modal-badge[hidden]{display:none}
.age-detail-row{margin-top:12px}
.age-detail-row>div{flex:1}
.age-detail-row strong{display:block}

/* Dashboard, filters, birthday calendar and backup tools */
.dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 0 20px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;box-shadow:0 4px 14px #1b355208}
.stat-card span,.stat-card small{display:block;color:#8491a3;font-size:11px}.stat-card strong{display:block;color:var(--navy);font:800 27px Manrope,sans-serif;margin:5px 0}.stat-card small{font-size:10px}
.birthday-panel{display:grid;grid-template-columns:minmax(180px,.7fr) 2fr;gap:18px;align-items:center;background:linear-gradient(110deg,#fff9eb,#fff);border:1px solid #f3e2bd;border-radius:16px;padding:19px 21px;margin:0 0 22px}.birthday-panel h3{font:800 17px Manrope;color:#624717;margin:7px 0 5px}.birthday-panel p{font-size:11px;color:#9a835b;margin:0;line-height:1.5}.birthday-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.birthday-item{background:#fff;border:1px solid #f2e4c9;border-radius:11px;padding:10px;min-width:0}.birthday-date{display:block;color:#a56b0b;font-size:8px;font-weight:900;letter-spacing:.6px;margin-bottom:6px}.birthday-item strong,.birthday-item small{display:block;overflow-wrap:anywhere}.birthday-item strong{font-size:10px;color:#60451b;line-height:1.4}.birthday-item small{font-size:9px;color:#9c8b70;margin-top:4px}.birthday-empty{font-size:11px;color:#9c8b70}
.toolbar{flex-wrap:wrap}.toolbar .search-wrap{min-width:230px}.toolbar .filter-wrap{flex:1;min-width:155px}.backup-actions{display:flex;gap:9px;justify-content:flex-end;margin:13px 0 5px}.backup-actions button,.id-actions button{border:1px solid #dce6f5;background:#fff;color:#315d9d;border-radius:9px;padding:9px 12px;font:700 10px 'DM Sans';cursor:pointer}.backup-actions button:hover,.id-actions button:hover{background:#edf4ff}
.profile-extra{margin-top:12px}.profile-extra>div{min-width:0;flex:1}.profile-extra strong{display:block;font-size:10px;overflow-wrap:anywhere}.id-qr{margin-left:auto;width:62px;height:62px;display:grid;place-items:center}.id-qr img{max-width:62px}.id-actions{display:flex;justify-content:center;margin-top:13px}.id-actions button{background:var(--blue);color:#fff;border-color:var(--blue);padding:10px 18px}
@media(max-width:900px){.birthday-panel{grid-template-columns:1fr}.birthday-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat-card{padding:13px}.stat-card strong{font-size:23px}.birthday-list{grid-template-columns:repeat(2,minmax(0,1fr))}.birthday-panel{padding:16px}.backup-actions{justify-content:stretch;flex-wrap:wrap}.backup-actions button{flex:1}.toolbar .filter-wrap{min-width:100%}.id-footer{gap:8px}.id-qr{width:48px;height:48px}.id-qr img{max-width:48px}}
@media print{body{background:#fff}.topbar,main,footer,.modal-close,.id-actions,.id-disclaimer{display:none!important}.modal-backdrop{position:static;display:block!important;background:#fff;padding:0;overflow:visible}.id-modal{width:85mm;min-height:54mm;margin:0 auto;padding:5mm;border:1px solid #ccd5e2;border-radius:3mm;box-shadow:none;animation:none}.id-band{margin:4mm -5mm 4mm;padding:2mm 5mm}.id-content{gap:3mm}.id-photo{width:24mm;height:29mm}.id-details h3{font-size:12pt;margin-bottom:3mm}.id-footer{margin-top:4mm;padding-top:2mm}.id-qr{width:14mm;height:14mm}.id-qr img{width:14mm;height:14mm}.profile-extra{margin-top:2mm}.detail-label{font-size:6pt}.detail-row strong{font-size:7pt}}
.backup-status{align-self:center;margin-right:auto;color:#8290a2;font-size:10px}
@media(max-width:620px){.backup-status{width:100%;margin:0 0 3px}}

/* exams fee status and collection dashboard */
.fee-paid-card{border-color:#ccebdc;background:#f7fffa}.fee-unpaid-card{border-color:#f3d6d6;background:#fffafa}.fee-total-card{border-color:#d6e3fb;background:#f8fbff}.fee-paid-card strong{color:#23845a}.fee-unpaid-card strong{color:#bf4d4d}.fee-total-card strong{font-size:22px;overflow-wrap:anywhere}.fee-pill{display:block;width:max-content;max-width:100%;margin:8px auto 0;padding:5px 9px;border-radius:20px;background:#f0f2f5;color:#64748b;font-size:9px;font-weight:800}.fee-pill.fee-paid{background:#e4f7ed;color:#21784f}.fee-pill.fee-unpaid{background:#ffeded;color:#b43e3e}
@media(max-width:900px){.dashboard{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.fee-total-card strong{font-size:18px}}