*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#10233b;background:#f7fafc}a{color:inherit}.container{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{background:#06294a;color:#eaf2f8;font-size:13px}.topbar-inner{display:flex;justify-content:space-between;padding:9px 0}.header{background:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 20px #06294a12}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center}.logo{width:245px;height:auto}.navlinks{display:flex;align-items:center;gap:20px}.navlinks a{color:#173b5c;text-decoration:none;font-size:14px;font-weight:700}.navlinks a:hover,.navlinks a.active{color:#c79220}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 18px;background:#d9a42e;color:#10233b;text-decoration:none;font-weight:800;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.dark{background:#082f53;color:#fff}.btn.outline{background:transparent;border:1px solid #d5dde6;color:#173b5c}.hero{min-height:620px;position:relative;overflow:hidden;color:white}.hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .65s ease}.hero-slide.active{opacity:1;visibility:visible}.hero-content{width:100%;max-width:760px;padding:90px 0}.eyebrow{letter-spacing:2px;font-weight:800;color:#e4b347;text-transform:uppercase;font-size:12px}.hero h1{font:700 clamp(42px,6vw,72px)/1.03 Georgia,serif;margin:14px 0}.hero p{font-size:19px;line-height:1.7;color:#e8f0f7;max-width:680px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-outline{color:#fff!important;border-color:#ffffff66!important}.hero-dots{position:absolute;z-index:4;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.hero-dots button{width:34px;height:5px;border:0;border-radius:99px;background:#ffffff66;cursor:pointer}.hero-dots button.active{background:#e2ad38}.section{padding:78px 0}.section.alt{background:#eef4f7}.quick-strip{padding-top:28px}.section-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:30px}.section h2{font:700 40px/1.15 Georgia,serif;margin:8px 0;color:#0b2d4f}.muted{color:#64748b;line-height:1.65}.feature-grid,.cards,.gallery-grid,.stats{display:grid;gap:20px}.feature-grid{grid-template-columns:repeat(4,1fr)}.cards{grid-template-columns:repeat(3,1fr)}.gallery-grid{grid-template-columns:repeat(3,1fr)}.feature,.card{background:#fff;border:1px solid #e3eaf0;border-radius:16px;padding:24px;box-shadow:0 10px 35px #0b2d4f0b}.feature .icon{font-size:30px;color:#d09b28}.feature h3,.card h3{margin:10px 0 8px}.image-card{overflow:hidden;padding:0;text-decoration:none;color:inherit}.image-card img{width:100%;height:220px;object-fit:cover;display:block}.image-card .pad{padding:20px}.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.split img{width:100%;border-radius:20px;box-shadow:0 20px 45px #06294a18}.stats{grid-template-columns:repeat(4,1fr);margin-top:25px}.stat{background:#fff;padding:20px;border-radius:14px;border:1px solid #e1e8ee}.stat strong{font-size:30px;color:#0b2d4f;display:block}.mini-stats{gap:12px}.mini-stats .stat{padding:16px}.mini-stats .stat strong{font-size:24px}.banner{padding:65px 0;background:linear-gradient(90deg,#06294a,#104d72);color:#fff}.banner h1{font:700 48px Georgia,serif;margin:0}.breadcrumb{font-size:13px;color:#64748b;margin-bottom:12px}.table-wrap{overflow:auto;background:#fff;border:1px solid #e1e8ee;border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:700px}.table th,.table td{padding:14px 16px;border-bottom:1px solid #e8eef2;text-align:left}.table th{background:#f5f8fa;font-size:13px;color:#536579}.badge{display:inline-block;border-radius:99px;padding:5px 10px;background:#eaf5ee;color:#14733c;font-size:12px;font-weight:800}.badge.warn{background:#fff5dc;color:#936300}.form{display:grid;gap:16px}.form label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}.input,.select,.textarea{width:100%;padding:12px 13px;border:1px solid #cfd9e2;border-radius:9px;background:#fff;outline:none;font:inherit}.input:focus,.select:focus,.textarea:focus{border-color:#d29e2e;box-shadow:0 0 0 3px #d29e2e22}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.footer{background:#061f38;color:#c8d6e3;padding:55px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:30px}.footer-logo{width:245px}.footer a{color:#c8d6e3;text-decoration:none;display:block;margin:8px 0}.footer-bottom{border-top:1px solid #ffffff20;margin-top:35px;padding-top:20px;font-size:13px}.news-layout{display:grid;grid-template-columns:1fr 2fr;gap:20px}.news-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f4}.news-item:last-child{border-bottom:0}.news-card{padding:25px}.event-cards{grid-template-columns:repeat(2,1fr)}
.portal-body{background:#f4f7fa}.portal-shell{display:flex;min-height:100vh}.sidebar{width:255px;background:linear-gradient(180deg,#06294a,#071f36);color:#fff;padding:20px;flex-shrink:0;display:flex;flex-direction:column}.sidebar-brand{display:block;background:#fff;border-radius:12px;padding:7px 10px}.sidebar-brand img{width:100%;display:block}.sidebar-user{display:flex;align-items:center;gap:10px;padding:20px 4px 15px;border-bottom:1px solid #ffffff18;margin-bottom:12px}.sidebar-user b,.portal-profile b{display:block;font-size:13px}.sidebar-user small,.portal-profile small{display:block;color:#8fa9bc;margin-top:2px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#d9a42e;color:#06294a;font-weight:900;flex-shrink:0}.avatar.small{width:36px;height:36px}.sidebar-label{font-size:10px;letter-spacing:1.4px;color:#7f9aae;font-weight:900;margin:10px 8px 7px}.side-link{display:flex;align-items:center;color:#dbe7ef;text-decoration:none;padding:11px 12px;border-radius:10px;margin-top:4px;font-size:13px;font-weight:700;gap:8px}.side-link:hover,.side-link.active{background:#d9a42e;color:#08233e}.sidebar-bottom{margin-top:auto}.logout-button{border:0;background:transparent;width:100%;text-align:left;cursor:pointer;font:inherit}.dash-main{flex:1;padding:28px;min-width:0}.portal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.portal-header h1{margin:0;font:700 32px Georgia,serif;color:#0b2d4f}.portal-profile{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e9ee;border-radius:12px;padding:7px 12px}.portal-profile small{color:#64748b}.notice{border-radius:12px;padding:14px 16px;margin-bottom:18px}.success-notice{background:#eaf8ef;color:#17663a;border:1px solid #ccebd7}.error-notice{background:#fff0f0;color:#a31e2d;border:1px solid #ffd0d5}.welcome-panel{display:flex;justify-content:space-between;gap:25px;overflow:hidden;background:linear-gradient(100deg,#06294a,#105676);border-radius:18px;padding:28px;color:#fff;margin-bottom:20px}.welcome-panel h2{font:700 32px Georgia,serif;margin:7px 0}.welcome-panel p{margin:0;color:#dbe9f2;max-width:700px}.welcome-panel img{width:190px;height:120px;object-fit:cover;border-radius:12px}.teacher-stats{margin-top:0}.stat{display:flex;align-items:center;gap:13px}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eef5fb;font-size:19px}.stat-blue{border-top:3px solid #2f80ed}.stat-green{border-top:3px solid #2e9d64}.stat-gold{border-top:3px solid #d9a42e}.stat-purple{border-top:3px solid #8b5cf6}.teacher-grid-main{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-top:20px}.dashboard-card{padding:22px}.card-head{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:18px}.card-head h3{margin:0}.text-link{color:#0b5c86;text-decoration:none;font-weight:800;font-size:13px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-action{display:flex;align-items:center;gap:11px;border:1px solid #e2e9ee;border-radius:12px;padding:14px;text-decoration:none;transition:.2s}.quick-action:hover{transform:translateY(-1px);box-shadow:0 8px 22px #0b2d4f10}.quick-action>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;font-weight:900}.quick-action div{flex:1}.quick-action b{display:block;font-size:13px}.quick-action small{display:block;color:#718096;margin-top:3px}.quick-action.blue>span{background:#e9f3ff;color:#2873c8}.quick-action.gold>span{background:#fff5dc;color:#a56d00}.quick-action.green>span{background:#eaf8ef;color:#247648}.quick-action.purple>span{background:#f2ecff;color:#7045bf}.attendance-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.attendance-summary div{background:#f6f8fa;border-radius:10px;padding:13px}.attendance-summary strong{display:block;font-size:21px;color:#0b2d4f}.attendance-summary span{font-size:11px;color:#64748b}.progress-track{height:8px;border-radius:99px;background:#e8edf1;overflow:hidden;margin-top:18px}.progress-track span{display:block;height:100%;background:#2e9d64;border-radius:inherit}.tiny{font-size:11px}.class-section{margin-top:20px}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.class-card{border:1px solid #e3eaf0;border-radius:13px;padding:15px;background:#fbfcfd}.class-card-top{display:flex;justify-content:space-between;gap:8px}.class-code{font-weight:900;color:#0b2d4f}.class-count{font-size:11px;color:#64748b}.student-stack{display:flex;margin:17px 0}.student-stack span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e9f2f8;border:2px solid #fff;color:#0b5c86;font-size:10px;font-weight:900;margin-left:-5px}.student-stack span:first-child{margin-left:0}.student-stack .more{background:#fff4d9;color:#9a6b00}.class-card>a{font-size:12px;font-weight:800;color:#0b5c86;text-decoration:none}.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #edf1f4}.list-row:last-child{border-bottom:0}.date-chip{width:44px;text-align:center;background:#eaf3fa;border-radius:9px;padding:6px;color:#0b5c86}.date-chip b{display:block;font-size:17px}.date-chip small{font-size:10px}.list-icon{width:38px;height:38px;display:grid;place-items:center;background:#f5f7f9;border-radius:10px}.grow{flex:1;min-width:0}.result-avatar{background:#e8f2f9;color:#0b5c86}.result-mark{font-size:18px;font-weight:900;color:#0b2d4f}.result-mark small{font-size:10px;color:#64748b;font-weight:700}.notice-dot{width:9px;height:9px;border-radius:50%;background:#d9a42e;flex-shrink:0}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.page-intro h2{font:700 32px Georgia,serif;margin:6px 0}.page-intro img{width:180px;height:100px;object-fit:cover;border-radius:14px}.filter-card{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:14px;padding:18px;margin-bottom:20px}.filter-card label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.compact-select{min-width:130px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px}.empty-state{text-align:center;padding:35px!important;color:#64748b}.results-layout{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.feature-grid,.class-grid{grid-template-columns:repeat(2,1fr)}.teacher-grid-main,.news-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.sidebar{width:225px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar-inner{display:none}.nav{height:68px}.logo{width:205px}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:18px;box-shadow:0 10px 30px #06294a18;flex-direction:column;align-items:stretch}.navlinks.mobile-open{display:flex}.navlinks .btn{text-align:center}.mobile-menu{display:inline-flex}.hero{min-height:570px}.hero h1{font-size:46px}.hero-content{padding:70px 0}.section{padding:55px 0}.section h2{font-size:32px}.feature-grid,.cards,.gallery-grid,.stats,.stats.dash,.two,.footer-grid,.quick-actions,.class-grid,.attendance-summary{grid-template-columns:1fr}.split{grid-template-columns:1fr}.portal-shell{display:block}.sidebar{width:100%;min-height:auto;padding:12px;position:relative}.sidebar-user,.sidebar-label,.sidebar .side-link{display:none}.sidebar-bottom{display:none}.sidebar-brand{width:205px}.dash-main{padding:16px}.portal-header{align-items:start}.portal-header h1{font-size:25px}.portal-profile{display:none}.welcome-panel{padding:22px}.welcome-panel img{display:none}.filter-card{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column}.form-actions .btn{width:100%}.page-intro img{display:none}.news-layout{grid-template-columns:1fr}.event-cards{grid-template-columns:1fr}}
@media(min-width:761px){.mobile-menu{display:none}}
/* ===== Coral Portal V2 dashboard system ===== */
.portal-v2-body{margin:0;background:#f3f7fb;color:#12263f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.portal-v2-shell{min-height:100vh;display:grid;grid-template-columns:276px minmax(0,1fr)}
.portal-v2-sidebar{position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,#062c4d 0%,#05223b 100%);padding:20px 16px;color:#fff;display:flex;flex-direction:column;box-shadow:12px 0 35px rgba(5,34,59,.08);z-index:20}
.portal-v2-brand{display:block;background:#fff;border-radius:15px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.08);margin-bottom:18px}.portal-v2-brand img{width:100%;height:auto;display:block}
.portal-v2-user{display:flex;gap:11px;align-items:center;padding:12px 6px 18px;border-bottom:1px solid rgba(255,255,255,.1)}.portal-v2-user-copy{min-width:0}.portal-v2-user-copy strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portal-v2-user-copy span{display:block;font-size:11px;color:#9bb1c3;margin-top:3px}.portal-v2-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#e5b23e,#c98f1f);color:#062c4d;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.portal-v2-avatar.small{width:38px;height:38px;border-radius:12px}.portal-v2-avatar.mini{width:34px;height:34px;border-radius:10px;font-size:12px}
.portal-v2-label{text-transform:uppercase;letter-spacing:1.4px;font-size:9px;font-weight:900;color:#7894a8;padding:18px 8px 7px}.portal-v2-nav{display:flex;flex-direction:column;gap:4px}.portal-v2-nav a,.portal-v2-sidebar-bottom a,.portal-v2-sidebar-bottom button{display:flex;align-items:center;gap:11px;text-decoration:none;color:#dce8f0;border:0;background:none;width:100%;font:inherit;font-size:13px;font-weight:700;padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left}.portal-v2-nav a span,.portal-v2-sidebar-bottom span{width:21px;text-align:center;color:#91adbf;font-size:15px}.portal-v2-nav a:hover,.portal-v2-nav a.active,.portal-v2-sidebar-bottom a:hover,.portal-v2-sidebar-bottom button:hover{background:#dba62f;color:#092843}.portal-v2-nav a:hover span,.portal-v2-nav a.active span,.portal-v2-sidebar-bottom a:hover span,.portal-v2-sidebar-bottom button:hover span{color:#092843}.portal-v2-sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;display:grid;gap:4px}
.portal-v2-main{min-width:0;padding:26px 32px 48px;background:linear-gradient(180deg,#f6f9fc 0,#f3f7fb 100%)}.portal-v2-topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.portal-v2-breadcrumb{font-size:12px;color:#8091a3}.portal-v2-breadcrumb span{padding:0 6px;color:#b3bec8}.portal-v2-profile{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e2eaf0;border-radius:14px;padding:7px 11px;box-shadow:0 5px 20px rgba(17,39,61,.04)}.portal-v2-profile strong{display:block;font-size:12px}.portal-v2-profile span{display:block;font-size:10px;color:#7b8c9e;margin-top:2px}.portal-v2-alert{border-radius:13px;padding:13px 16px;margin-bottom:18px;font-size:13px;font-weight:700}.portal-v2-alert.success{background:#e9f8ef;color:#17683c;border:1px solid #ccebd8}.portal-v2-alert.error{background:#fff0f1;color:#a12232;border:1px solid #ffd2d8}
.portal-v2-heading-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.portal-v2-heading-row h1{margin:4px 0 6px;color:#092a49;font:700 clamp(28px,3vw,40px)/1.1 Georgia,serif}.portal-v2-heading-row p{margin:0;color:#6f8193;font-size:14px}.portal-v2-eyebrow,.portal-v2-section-kicker{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:900;color:#c58e1d}.portal-v2-eyebrow.light{color:#f2c968}.portal-v2-date-card,.teacher-profile-card{background:#fff;border:1px solid #e2eaf0;border-radius:14px;padding:11px 15px;box-shadow:0 6px 22px rgba(17,39,61,.04);min-width:145px}.portal-v2-date-card span,.teacher-profile-card span{display:block;font-size:10px;color:#7c8d9e}.portal-v2-date-card strong,.teacher-profile-card strong{display:block;font-size:14px;color:#123250;margin-top:2px}
.portal-v2-hero-card,.portal-v2-admin-hero{position:relative;overflow:hidden;min-height:235px;border-radius:22px;padding:31px 34px;color:#fff;display:flex;justify-content:space-between;gap:25px;margin-bottom:20px;background:linear-gradient(105deg,#062b4c 0%,#0d5675 60%,#116d84 100%);box-shadow:0 16px 40px rgba(6,43,76,.13)}.portal-v2-hero-card:after,.portal-v2-admin-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:150px;top:-180px;background:rgba(255,255,255,.05)}.portal-v2-hero-card>div,.portal-v2-admin-hero>div{position:relative;z-index:2;max-width:700px}.portal-v2-hero-card h2,.portal-v2-admin-hero h2{font:700 31px/1.12 Georgia,serif;margin:7px 0 10px}.portal-v2-hero-card p,.portal-v2-admin-hero p{max-width:630px;margin:0;color:#d7e7ef;font-size:14px;line-height:1.7}.portal-v2-hero-card img,.portal-v2-admin-hero img{width:255px;height:175px;object-fit:cover;border-radius:16px;position:relative;z-index:2;box-shadow:0 18px 35px rgba(0,0,0,.18)}.portal-v2-hero-actions{display:flex;gap:10px;margin-top:21px;flex-wrap:wrap}.portal-v2-hero-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#e1ad39;color:#082843;padding:11px 16px;border-radius:10px;font-size:12px;font-weight:900}.portal-v2-hero-actions a.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.portal-v2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.portal-v2-kpi{background:#fff;border:1px solid #e2eaf0;border-radius:16px;padding:16px;display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center;box-shadow:0 6px 25px rgba(17,39,61,.04)}.portal-v2-kpi .kpi-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-size:18px;grid-row:span 2}.kpi-icon.blue{background:#eaf3ff;color:#2b76c8}.kpi-icon.gold{background:#fff5dc;color:#a36c00}.kpi-icon.green{background:#eaf8ef;color:#23744a}.kpi-icon.purple{background:#f2ecff;color:#7247b9}.portal-v2-kpi strong{display:block;font-size:25px;color:#092a49;line-height:1}.portal-v2-kpi small{display:block;color:#65798b;font-size:11px;margin-top:5px}.portal-v2-kpi em{grid-column:2;font-style:normal;color:#9a6b18;font-size:10px;margin-top:6px}
.portal-v2-grid{display:grid;gap:18px;margin-bottom:18px}.portal-v2-grid.two-thirds{grid-template-columns:1.35fr 1fr}.portal-v2-grid.three-columns{grid-template-columns:repeat(3,1fr)}.portal-v2-card{background:#fff;border:1px solid #e2eaf0;border-radius:18px;padding:21px;box-shadow:0 7px 28px rgba(17,39,61,.045);min-width:0}.portal-v2-full-card{margin-bottom:18px}.portal-v2-card-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:17px}.portal-v2-card-head h2{margin:3px 0 0;color:#092a49;font-size:18px}.portal-v2-card-head p{margin:4px 0 0;color:#75879a;font-size:12px}.portal-v2-card-head>a{color:#0b5f87;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap}
.result-list{display:grid}.result-row{display:grid;grid-template-columns:36px minmax(130px,1fr) minmax(100px,1.3fr) 52px;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f4}.result-row:last-child{border-bottom:0}.subject-badge{width:36px;height:36px;border-radius:10px;background:#edf5fa;color:#0a5d85;display:grid;place-items:center;font-weight:900;font-size:12px}.result-subject strong{display:block;font-size:12px;color:#183653}.result-subject span{display:block;font-size:10px;color:#8998a7;margin-top:2px}.result-bar{height:7px;border-radius:99px;background:#edf1f4;overflow:hidden}.result-bar span{display:block;height:100%;background:linear-gradient(90deg,#d9a52e,#1d7c83);border-radius:99px}.result-score{text-align:right}.result-score strong{display:block;font-size:14px;color:#0c2d4d}.result-score span{font-size:10px;color:#a36c00;font-weight:900}.portal-v2-empty{padding:22px 8px;color:#8494a3;font-size:12px;text-align:center;background:#f8fafc;border-radius:11px}.attendance-card{text-align:center}.attendance-ring,.meter-ring{--ring-color:#2d8c6b;width:148px;height:148px;border-radius:50%;margin:7px auto 17px;background:conic-gradient(var(--ring-color) var(--rate),#e9eff3 0);display:grid;place-items:center;position:relative}.attendance-ring:before,.meter-ring:before{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%}.attendance-ring>div,.meter-ring>strong,.meter-ring>span{position:relative;z-index:1}.attendance-ring strong{display:block;font-size:28px;color:#0a2d4c}.attendance-ring span{display:block;color:#8291a0;font-size:10px;margin-top:3px}.attendance-legend{display:grid;gap:9px;text-align:left}.attendance-legend span{display:flex;align-items:center;gap:7px;font-size:11px;color:#66798b}.attendance-legend i{width:8px;height:8px;border-radius:50%}.attendance-legend .present{background:#2d8c6b}.attendance-legend .absent{background:#d46b6b}.attendance-legend b{margin-left:auto;color:#1a3550}
.compact-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4}.compact-item:last-child{border-bottom:0}.compact-item>div{min-width:0;flex:1}.compact-item strong{display:block;font-size:12px;color:#183653;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-item small{display:block;color:#7b8c9d;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-icon{width:34px;height:34px;border-radius:10px;background:#f3f6f8;display:grid;place-items:center;flex:0 0 auto}.date-box{width:39px;height:42px;border-radius:9px;background:#edf6fa;color:#0b5f87;text-align:center;display:grid;place-items:center;line-height:1;flex:0 0 auto}.date-box b{display:block;font-size:16px}.date-box small{display:block;font-size:9px}.event-thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.teacher-profile-card{display:flex;align-items:center;gap:10px;min-width:175px}.teacher-profile-card .portal-v2-avatar{width:38px;height:38px}.teacher-hero{background:linear-gradient(105deg,#07304e,#0b596d 60%,#176f7d)}.teacher-attendance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.teacher-attendance-grid>div{padding:13px;background:#f6f8fa;border-radius:11px;text-align:center}.teacher-attendance-grid strong{display:block;font-size:22px;color:#0b2d4f}.teacher-attendance-grid span{display:block;font-size:10px;color:#7a8c9b;margin-top:3px}.teacher-attendance-grid .good strong{color:#2b8b63}.teacher-attendance-grid .bad strong{color:#c95757}.wide-progress{height:9px;background:#e8edf1;border-radius:99px;overflow:hidden;margin-top:17px}.wide-progress span{display:block;height:100%;background:linear-gradient(90deg,#2c8a67,#57b47e);border-radius:inherit}.portal-v2-helper{display:block;color:#7c8d9d;font-size:10px;margin-top:7px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.action-grid a{display:flex;gap:9px;align-items:center;text-decoration:none;border:1px solid #e5ebf0;border-radius:11px;padding:11px;transition:.18s}.action-grid a:hover{border-color:#d6a22e;transform:translateY(-1px)}.action-grid a>span{width:33px;height:33px;border-radius:9px;background:#f3f7fa;color:#0b5f87;display:grid;place-items:center;font-weight:900}.action-grid strong{display:block;color:#183653;font-size:11px}.action-grid small{display:block;color:#8292a0;font-size:9px;margin-top:2px}.teacher-class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.teacher-class-card{border:1px solid #e4ebf0;border-radius:13px;padding:15px;background:#fbfcfd}.class-top{display:flex;justify-content:space-between;gap:12px}.class-top span{display:block;font-size:10px;color:#8292a0}.class-top strong{display:block;font-size:14px;color:#153451;margin-top:2px}.class-top>b{font-size:22px;color:#0b5f87}.teacher-class-card .student-stack{display:flex;margin:17px 0 13px}.teacher-class-card .student-stack span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e9f2f8;border:2px solid #fff;color:#0b5c86;font-size:10px;font-weight:900;margin-left:-5px}.teacher-class-card .student-stack span:first-child{margin-left:0}.teacher-class-card .student-stack .more{background:#fff4d9;color:#9a6b00}.teacher-class-card>a{font-size:10px;color:#0b5f87;text-decoration:none;font-weight:900}
.portal-v2-admin-hero{min-height:220px}.admin-student-list{display:grid}.admin-student-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4}.admin-student-row:last-child{border-bottom:0}.admin-student-row>div{min-width:0;flex:1}.admin-student-row strong{display:block;font-size:12px;color:#183653}.admin-student-row small{display:block;font-size:10px;color:#7d8d9c;margin-top:2px}.status-pill{background:#eaf8ef;color:#217247;border-radius:99px;padding:5px 9px;font-size:9px;font-weight:900}.admin-attendance-meter{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:10px}.meter-ring{width:138px;height:138px;margin:0;--ring-color:#2d8c6b}.meter-ring strong{display:block;text-align:center;font-size:25px;color:#0b2d4f}.meter-ring span{display:block;text-align:center;font-size:9px;color:#8291a0}.admin-stat-line{display:flex;justify-content:space-between;border-bottom:1px solid #edf1f4;padding:9px 0;font-size:11px;color:#718395}.admin-stat-line strong{color:#143452}.portal-v2-primary-link{display:block;text-align:center;margin-top:16px;border-radius:10px;background:#0a4164;color:#fff;text-decoration:none;padding:10px;font-size:11px;font-weight:900}.holiday-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.holiday-strip>div{display:flex;align-items:center;gap:11px;padding:13px;background:#fbfcfd;border:1px solid #e5ebf0;border-radius:12px}.holiday-strip>div>span{width:40px;height:40px;border-radius:10px;background:#fff4d9;color:#9b6b00;display:grid;place-items:center;font-weight:900;font-size:16px}.holiday-strip strong{display:block;font-size:11px;color:#173651}.holiday-strip small{display:block;font-size:9px;color:#81909e;margin-top:3px}
@media(max-width:1100px){.portal-v2-shell{grid-template-columns:235px 1fr}.portal-v2-main{padding:22px}.portal-v2-kpis{grid-template-columns:repeat(2,1fr)}.portal-v2-grid.three-columns{grid-template-columns:1fr 1fr}.teacher-class-grid{grid-template-columns:1fr 1fr}.holiday-strip{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.portal-v2-shell{display:block}.portal-v2-sidebar{position:relative;height:auto;overflow:visible;padding:12px}.portal-v2-brand{width:205px;margin:0}.portal-v2-user,.portal-v2-label,.portal-v2-nav,.portal-v2-sidebar-bottom{display:none}.portal-v2-main{padding:16px}.portal-v2-topbar{margin-bottom:16px}.portal-v2-profile{display:none}.portal-v2-heading-row{align-items:start}.portal-v2-date-card,.teacher-profile-card{display:none}.portal-v2-hero-card,.portal-v2-admin-hero{padding:23px;min-height:0}.portal-v2-hero-card img,.portal-v2-admin-hero img{display:none}.portal-v2-hero-card h2,.portal-v2-admin-hero h2{font-size:25px}.portal-v2-kpis,.portal-v2-grid.two-thirds,.portal-v2-grid.three-columns{grid-template-columns:1fr}.teacher-class-grid{grid-template-columns:1fr}.holiday-strip{grid-template-columns:1fr}.result-row{grid-template-columns:34px 1fr 50px}.result-bar{display:none}.action-grid{grid-template-columns:1fr}.teacher-attendance-grid{grid-template-columns:1fr 1fr}.admin-attendance-meter{grid-template-columns:1fr}.meter-ring{margin:auto}.portal-v2-heading-row h1{font-size:28px}}
/* ===== Coral mobile optimization layer ===== */
html, body { max-width:100%; overflow-x:hidden; }
img { max-width:100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
.container { width:min(100% - 28px, 1180px); }
.topbar { display:none; }
.nav { gap:10px; }
.brand { min-width:0; }
.logo { width:185px; max-width:58vw; }
.mobile-menu { display:inline-flex; min-height:42px; padding:9px 13px; white-space:nowrap; }
.hero { min-height:590px; }
.hero-slide { background-position:center; }
.hero-content { padding:76px 0 90px; }
.hero h1 { font-size:clamp(38px,11vw,52px); }
.hero p { font-size:16px; line-height:1.6; }
.actions { gap:9px; }
.actions .btn { width:100%; min-height:46px; }
.section { padding:48px 0; }
.section-head { display:block; }
.section-head > .btn { margin-top:12px; }
.section h2 { font-size:30px; }
.banner { padding:48px 0; }
.banner h1 { font-size:38px; }
.split { gap:28px; }
.split img { max-height:360px; object-fit:cover; }
.image-card img { height:205px; }
.table-wrap { -webkit-overflow-scrolling:touch; }
.table { min-width:680px; }
.footer { padding:44px 0; }
.footer-logo { width:205px; }
}
/* Portal: desktop sidebar -> mobile off-canvas drawer.
The complete navigation remains available on phones instead of being hidden. */
.portal-mobile-menu,
.portal-mobile-overlay { display:none; }
@media (max-width: 760px) {
body.portal-drawer-open { overflow:hidden; }
.portal-v2-shell { display:block; min-height:100vh; }
.portal-v2-sidebar {
position:fixed;
z-index:1001;
top:0;
left:0;
width:min(310px,86vw);
height:100dvh;
min-height:100dvh;
padding:16px;
overflow-y:auto;
transform:translateX(-105%);
transition:transform .24s ease;
box-shadow:18px 0 45px rgba(0,0,0,.22);
}
.portal-v2-shell.portal-menu-open .portal-v2-sidebar { transform:translateX(0); }
.portal-v2-user,
.portal-v2-label,
.portal-v2-nav,
.portal-v2-sidebar-bottom { display:block; }
.portal-v2-label { margin-top:12px; }
.portal-v2-nav { display:grid; }
.portal-v2-nav a { min-height:44px; }
.portal-v2-sidebar-bottom { margin-top:20px; }
.portal-mobile-overlay {
position:fixed;
z-index:1000;
inset:0;
display:block;
background:rgba(3,22,38,.58);
opacity:0;
visibility:hidden;
transition:opacity .24s ease, visibility .24s ease;
}
.portal-v2-shell.portal-menu-open .portal-mobile-overlay {
opacity:1;
visibility:visible;
}
.portal-v2-main { padding:14px; }
.portal-v2-topbar {
position:sticky;
top:0;
z-index:50;
min-height:54px;
margin:-14px -14px 16px;
padding:10px 14px;
background:rgba(243,247,251,.96);
backdrop-filter:blur(10px);
border-bottom:1px solid #e1e8ee;
}
.portal-mobile-menu {
display:inline-flex;
width:42px;
height:42px;
padding:9px;
margin-right:9px;
border:1px solid #dce5eb;
border-radius:11px;
background:#fff;
align-items:center;
justify-content:center;
flex-direction:column;
gap:4px;
cursor:pointer;
vertical-align:middle;
box-shadow:0 3px 12px rgba(15,40,60,.06);
}
.portal-mobile-menu span {
width:19px;
height:2px;
border-radius:2px;
background:#0a4264;
transition:.2s;
}
.portal-v2-shell.portal-menu-open .portal-mobile-menu span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.portal-v2-shell.portal-menu-open .portal-mobile-menu span:nth-child(2) { opacity:0; }
.portal-v2-shell.portal-menu-open .portal-mobile-menu span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.portal-v2-breadcrumb { display:inline-block; vertical-align:middle; max-width:calc(100% - 58px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* Prevent ERM/admin dense grids from creating a horizontal page. */
@media (max-width: 600px) {
.erm-page { padding:12px; }
.erm-hero { padding:22px; border-radius:16px; }
.erm-hero h1 { font-size:27px; }
.erm-card { padding:15px; }
.erm-table-wrap { margin-right:0; }
.erm-table { min-width:620px; }
.cis-admin-hero { border-radius:17px; padding:22px; }
.cis-panel { padding:15px; }
.cis-kpi { min-height:94px; padding:14px; }
}