:root{
    --navy:#17376f;
    --navy2:#0d244b;
    --gold:#c9a24b;
    --bg:#f4f7fb;
    --card:#fff;
    --text:#172033;
    --muted:#667085;
    --border:#e5eaf2;
    --green:#087443;
    --green-soft:#eef9f2;
    --red:#b42318;
    --red-soft:#fff1f0;
    --amber:#a15c00;
    --amber-soft:#fff7e8;
    --blue:#175cd3;
    --blue-soft:#eff8ff;
    --shadow:0 8px 28px rgba(16,24,40,.055);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Tahoma,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-bottom:82px;
}

a{text-decoration:none;color:inherit}

.portal-hero,
.hero{
    background:
        radial-gradient(circle at 15% 15%,rgba(255,255,255,.10),transparent 28%),
        linear-gradient(135deg,var(--navy2),var(--navy));
    color:#fff;
    padding:26px 18px 42px;
    border-radius:0 0 30px 30px;
}

.portal-hero-inner,
.hero-row{
    max-width:920px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.hero-kicker{
    display:block;
    color:#e7d59f;
    font-size:10px;
    letter-spacing:.3px;
    margin-bottom:7px;
}

.portal-hero h1,
.hero h1,
.brand h1{
    margin:0;
    color:#fff;
    font-size:24px;
}

.portal-hero p,
.hero p,
.brand p{
    margin:7px 0 0;
    color:#d9e3f5;
    font-size:12px;
}

.notification-button,
.hero-link{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    color:var(--navy);
    padding:10px 12px;
    border-radius:12px;
    font-size:12px;
    font-weight:bold;
}

.notification-button b{
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font-size:10px;
}

.portal-wrap,
.wrap{
    max-width:920px;
    margin:-22px auto 0;
    padding:0 14px;
}

.summary-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    box-shadow:var(--shadow);
}

.summary-item{
    background:#f8fafc;
    border:1px solid #edf0f5;
    border-radius:13px;
    padding:13px 8px;
    text-align:center;
}

.summary-item span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:6px;
}

.summary-item strong{
    color:var(--navy);
    font-size:23px;
}

.section-head,
.section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin:24px 2px 10px;
}

.section-head h2{
    margin:2px 0 0;
    color:var(--navy2);
    font-size:18px;
}

.section-kicker{
    display:block;
    color:#98a2b3;
    font-size:9px;
    font-weight:bold;
}

.section-head a,
.section-title a{
    color:var(--navy);
    font-size:11px;
}

.children-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.child-tile,
.child-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:11px;
    box-shadow:var(--shadow);
}

.child-avatar{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#eef3fb,#f8fafc);
    color:var(--navy);
    font-weight:bold;
    font-size:18px;
}

.child-info{
    min-width:0;
    flex:1;
}

.child-info strong,
.child-card .name{
    display:block;
    color:var(--navy);
    font-size:14px;
}

.child-info span,
.meta{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:5px;
}

.child-arrow,
.arrow{
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eef3fb;
    color:var(--navy);
    font-weight:bold;
}

.portal-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
}

.stack{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.info-card,
.notification-card,
.card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow:var(--shadow);
}

.card{margin-bottom:14px}

.info-card{
    display:block;
}

.info-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}

.info-top strong{
    color:var(--navy2);
    font-size:12px;
}

.info-date{
    color:#98a2b3;
    font-size:9px;
    white-space:nowrap;
}

.info-title{
    margin-top:7px;
    color:#344054;
    font-size:12px;
}

.student-mini{
    color:var(--muted);
    font-size:9px;
    margin-top:5px;
}

.score-row{
    display:flex;
    align-items:baseline;
    gap:5px;
    margin-top:9px;
}

.score-row strong{
    color:var(--navy);
    font-size:24px;
}

.score-row span{
    color:#667085;
    font-size:11px;
}

.info-note,
.notice-body{
    color:#475467;
    font-size:10px;
    line-height:1.7;
    margin-top:7px;
}

.pill,
.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:9px;
    margin-left:6px;
}

.pill.grade,
.badge.grade{
    background:var(--green-soft);
    color:var(--green);
}

.pill.follow,
.badge.follow{
    background:var(--amber-soft);
    color:var(--amber);
}

.pill.att,
.badge.att{
    background:var(--red-soft);
    color:var(--red);
}

.pill.announcement{
    background:var(--blue-soft);
    color:var(--blue);
}

.notification-card{
    display:flex;
    align-items:center;
    gap:10px;
}

.notification-card.unread{
    background:#f8fbff;
    border-color:#cfe2ff;
}

.notif-main{
    min-width:0;
    flex:1;
}

.notif-title-row{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
}

.notif-title-row strong,
.notice-title{
    color:var(--navy2);
    font-size:12px;
}

.unread-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2e90fa;
    flex:0 0 9px;
}

.empty-card,
.empty{
    background:#fff;
    border:1px dashed #d0d5dd;
    border-radius:15px;
    padding:22px;
    text-align:center;
    color:var(--muted);
    font-size:11px;
}

/* Existing generic content */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.quick{
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:15px;
}

.quick b{
    display:block;
    color:var(--navy);
    margin-bottom:5px;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:10px 8px;
    border-bottom:1px solid var(--border);
    text-align:right;
    font-size:12px;
}

th{
    color:#475467;
    background:#f8fafc;
}

.back{
    display:inline-block;
    margin-bottom:12px;
    color:var(--navy);
    font-size:12px;
}

/* login */
.login-bg{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--navy2),var(--navy));
    padding:20px;
}

.login-card{
    width:min(420px,100%);
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:0 20px 70px rgba(0,0,0,.25);
}

.login-card input{
    width:100%;
    padding:12px;
    border:1px solid #ccd3df;
    border-radius:10px;
    margin:6px 0 12px;
}

.login-card button{
    width:100%;
    padding:12px;
    border:0;
    border-radius:10px;
    background:var(--navy);
    color:#fff;
}

/* bottom nav */
.bottom{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid var(--border);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    z-index:50;
    box-shadow:0 -5px 18px rgba(16,24,40,.05);
}

.bottom a{
    text-align:center;
    padding:10px 5px 11px;
    font-size:10px;
    color:#667085;
}

.bottom a.active{
    color:var(--navy);
    font-weight:bold;
    background:#f8fafc;
}

.nav-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:transparent;
    display:block;
    margin:0 auto 4px;
}

.bottom a.active .nav-dot{
    background:var(--navy);
}

@media(max-width:760px){
    .portal-columns{grid-template-columns:1fr}
}

@media(max-width:640px){
    .summary-panel{grid-template-columns:repeat(2,1fr)}
    .children-grid{grid-template-columns:1fr}
    .portal-hero-inner,.hero-row{align-items:flex-start}
    .portal-hero h1,.hero h1,.brand h1{font-size:20px}
}


/* Student details */
.student-page-hero{padding-bottom:42px}

.student-overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px
}

.overview-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow:var(--shadow)
}

.overview-card span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:7px
}

.overview-card strong{
    display:block;
    color:var(--navy);
    font-size:20px;
    margin-bottom:5px
}

.overview-card small{
    color:#667085;
    font-size:9px;
    line-height:1.6
}

.attendance-list{
    display:flex;
    flex-direction:column;
    gap:8px
}

.attendance-row{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    box-shadow:var(--shadow)
}

.attendance-row strong{
    display:block;
    color:var(--navy2);
    font-size:12px
}

.attendance-row div span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:4px
}

.status-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:9px;
    font-weight:bold
}

.status-badge.good{
    background:var(--green-soft);
    color:var(--green)
}

.status-badge.bad{
    background:var(--red-soft);
    color:var(--red)
}

.status-badge.warn{
    background:var(--amber-soft);
    color:var(--amber)
}

.status-badge.info{
    background:var(--blue-soft);
    color:var(--blue)
}

@media(max-width:640px){
    .student-overview-grid{grid-template-columns:1fr}
}


/* Children page */
.children-list{
    display:flex;
    flex-direction:column;
    gap:10px
}

.child-profile-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    padding:14px;
    box-shadow:var(--shadow)
}

.child-profile-top{
    display:flex;
    align-items:center;
    gap:11px
}

.child-stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-top:12px
}

.child-stats-row div{
    background:#f8fafc;
    border:1px solid #eef1f4;
    border-radius:11px;
    padding:9px 6px;
    text-align:center
}

.child-stats-row span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-bottom:4px
}

.child-stats-row b{
    color:var(--navy);
    font-size:16px
}

/* Notification filters */
.filter-strip{
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:10px;
    margin-top:12px;
    box-shadow:var(--shadow)
}

.filter-strip form{
    display:grid;
    grid-template-columns:1fr 1fr auto auto;
    gap:7px
}

.filter-strip select,
.filter-strip button,
.filter-strip a{
    padding:10px;
    border-radius:9px;
    font:inherit;
    font-size:10px
}

.filter-strip select{
    border:1px solid #d0d5dd;
    background:#fff
}

.filter-strip button{
    border:0;
    background:var(--navy);
    color:#fff
}

.filter-strip a{
    background:#f2f4f7;
    color:#344054;
    text-align:center
}

/* Notification detail */
.notification-detail-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow)
}

.notification-detail-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    color:var(--muted);
    font-size:10px;
    margin-bottom:14px
}

.notification-detail-body{
    color:#344054;
    font-size:13px;
    line-height:1.9;
    white-space:normal
}

.open-student-btn{
    display:inline-block;
    margin-top:18px;
    background:var(--navy);
    color:#fff;
    padding:10px 13px;
    border-radius:10px;
    font-size:11px;
    font-weight:bold
}

@media(max-width:640px){
    .child-stats-row{grid-template-columns:1fr 1fr}
    .filter-strip form{grid-template-columns:1fr 1fr}
}