@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--green:#216c52;--deep:#184f3e;--ink:#253830;--muted:#849087;--border:#e6ebe6;--bg:#f6f8f5;--mint:#eaf3eb;--sidebar:254px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Manrope,system-ui,sans-serif}svg{flex-shrink:0;vertical-align:middle}small{display:block;font-size:11px;color:var(--muted);font-weight:400}strong{font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #83b5a1;outline-offset:3px}.sidebar{width:var(--sidebar);background:#fff;border-right:1px solid var(--border);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 19px 0;z-index:20}.brand{display:flex;gap:11px;align-items:center;font-size:20px;letter-spacing:-.8px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}.brand small{font-family:'DM Sans',sans-serif;font-size:8px;font-weight:600;letter-spacing:1.9px;margin-top:5px}.brand-icon{width:39px;height:42px;background:var(--green);color:#fff;border-radius:12px;display:grid;place-items:center;flex-shrink:0}.brand-icon svg{width:26px;height:26px}.workspace{margin:32px 0 25px;padding:13px 9px;background:#f7f8f5;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600}.workspace small{font-size:9px;margin-top:3px}.workspace-icon{color:#6e8170}.online{width:6px;height:6px;background:#68a47d;border-radius:50%;display:inline-block;flex-shrink:0}.workspace>.online{margin-left:auto}.nav-label{font-size:9px;letter-spacing:1.7px;color:#9ba59d;font-weight:600;padding:0 13px;margin-bottom:10px}.sidebar nav{display:flex;flex-direction:column;gap:5px;margin-bottom:29px}.sidebar nav a{display:flex;align-items:center;gap:13px;padding:11px 13px;color:#758078;font-size:12px;font-weight:500;border-radius:7px;min-height:42px}.sidebar nav a svg{width:18px;height:18px}.sidebar nav a:hover{background:#f7f9f6;color:var(--green)}.sidebar nav a.selected{background:#eaf2e9;color:var(--green);font-weight:650}.nav-dot{margin-left:auto;background:var(--green);width:5px;height:5px;border-radius:50%}.sidebar-note{background:#f3f6ee;border:1px solid #e9eddf;border-radius:9px;padding:16px;margin-top:auto;margin-bottom:23px}.note-spark{display:block;color:#6a8d54;font-size:26px;line-height:1;margin-bottom:12px}.sidebar-note strong{font-size:11px}.sidebar-note p{font-size:10px;color:#8a9483;line-height:1.9;margin-top:5px}.profile{border-top:1px solid var(--border);margin:0 -19px;padding:20px 16px;display:flex;align-items:center;gap:10px}.profile strong{font-size:11px;display:block;max-width:128px;overflow:hidden;text-overflow:ellipsis}.profile small{font-size:9px}.profile form{margin-left:auto}.avatar{display:inline-grid;place-items:center;background:#e9eee1;color:#71825b;border:2px solid #fff;box-shadow:0 0 0 1px #e9ede5;border-radius:50%;width:36px;height:36px;font-size:10px;font-weight:700;flex-shrink:0}.hue-0{background:#e9e6f4;color:#8871ac}.hue-1{background:#e7eee3;color:#72906a}.hue-2{background:#f9ecdf;color:#b78b5d}.hue-3{background:#e7eef2;color:#7a9aa9}.avatar.large{width:55px;height:55px;font-size:17px}.icon-button{border:0;background:none;color:#849087;padding:6px;display:inline-grid;place-items:center;border-radius:5px}.icon-button:hover{background:#eaf0e7}.app-shell{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--border);background:#fff}.breadcrumb{display:flex;align-items:center;gap:15px;font-size:11px}.breadcrumb>span:first-of-type{color:#8c978f}.separator{color:#c0c8bf}.breadcrumb strong{font-weight:500}.topbar-right{display:flex;align-items:center;gap:22px;font-size:10px}.year-badge{background:#f4f6f0;border:1px solid #e8ece1;padding:6px 11px;border-radius:5px;color:#667b5e}.year-badge .online{width:5px;height:5px;margin-right:5px}.today{color:#8b968d}.main-content{padding:34px 36px 40px;max-width:1720px;width:100%;margin:0 auto;flex:1}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:29px}.eyebrow{font-size:8px;font-weight:600;letter-spacing:1.7px;color:#8a998d;margin-bottom:9px}.page-heading h1{font-size:26px;font-weight:750;letter-spacing:-1px;line-height:1.45}.green{color:var(--green)}.page-heading p{color:#8b968e;font-size:11px;margin-top:7px}.button{border:1px solid #dfe6dc;background:white;border-radius:6px;min-height:37px;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:9px 14px;font-size:10px;font-weight:550;white-space:nowrap;color:#657467}.button svg{width:15px;height:15px}.button.primary{color:#fff;border-color:var(--green);background:var(--green);box-shadow:0 2px 3px #194b3b12}.button.primary:hover{background:var(--deep)}.button:not(.primary):hover{background:#f1f5ef}.button.small{padding:6px 10px;min-height:30px;font-size:10px}.actions{display:flex;gap:10px}.welcome-banner{background:#eaf0df;border:1px solid #e2e8d8;border-radius:11px;padding:28px 31px;display:flex;justify-content:space-between;overflow:hidden;position:relative;min-height:202px;margin-bottom:24px}.pill{font-size:8px;letter-spacing:1.2px;color:#6e835e;font-weight:600;background:#f6f8ef;padding:5px 9px;border-radius:4px;display:inline-block}.welcome-banner h2{font-size:27px;font-weight:650;letter-spacing:-.8px;color:#3b543a;margin-top:13px}.welcome-banner p{font-size:11px;color:#859079;margin-top:8px}.welcome-banner a{display:flex;align-items:center;gap:12px;color:#537446;font-size:10px;font-weight:600;margin-top:19px}.welcome-banner a svg{width:15px;height:15px}.banner-art{width:300px;position:relative}.art-orbit{width:180px;height:180px;border-radius:50%;background:#e0e7cd;position:absolute;right:20px;top:-15px;box-shadow:0 0 0 20px #e4ebd5,0 0 0 21px #d7e0c6}.art-book{position:absolute;top:19px;right:58px;transform:rotate(-12deg);display:grid;place-items:center;width:111px;height:100px;background:#f7f8ee;border:1px solid #c8d4b5;border-radius:12px;box-shadow:6px 8px 0 #c5d1af}.art-book svg{width:63px;height:63px;color:#8d9c70;stroke-width:1}.art-star{position:absolute;color:#a8b88a;font-size:45px;right:192px;top:5px}.art-dot{width:13px;height:13px;border:3px solid #9aaf7b;position:absolute;right:5px;top:94px;border-radius:50%}.art-label{position:absolute;top:143px;right:27px;white-space:nowrap;font-size:8px;color:#8e9c77;letter-spacing:.5px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:26px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:9px;padding:18px 20px}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.stat-card span{font-size:11px;color:#8b968c}.stat-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px}.stat-icon svg{width:17px;height:17px}.mint{background:#edf4eb;color:#79986c!important}.blue{background:#edf1fa;color:#899ebc!important}.amber{background:#fbf3e3;color:#c6a56d!important}.rose{background:#fbede8;color:#c39587!important}.stat-card>strong{display:block;font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-1.2px;font-weight:700;margin:7px 0}.stat-card:last-child>strong{font-size:23px;line-height:1.85;overflow-wrap:anywhere}.stat-card>small{font-size:9px;color:#9da69c}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(260px,1fr);gap:23px;margin-bottom:23px}.panel{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden}.panel-heading{padding:21px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.panel-heading h2{font-size:13px;font-weight:700;letter-spacing:-.2px}.panel-heading p{font-size:9px;color:#9aa397;margin-top:5px}.text-link{color:#6e8b60;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;white-space:nowrap}.text-link:hover{color:var(--deep)}.text-link svg{width:13px;height:13px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:9px;text-transform:none;letter-spacing:.1px;color:#8d9a8c;font-weight:500;padding:12px 21px;background:#fafbf8;border-block:1px solid #eef1e9}td{font-size:10px;color:#7a877b;padding:16px 21px;border-bottom:1px solid #f0f2ed}td strong{color:#4a5b4c;font-size:10px}td small{font-size:9px;margin-top:3px;color:#a4ada0}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fcfdf9}.person{display:flex;align-items:center;gap:10px}.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:4px;font-size:8px;font-weight:500;white-space:nowrap}.badge.success{background:#eef4e9;color:#79946b}.badge.success:before{content:'';width:4px;height:4px;border-radius:50%;background:#87a376;margin-right:5px}.badge.neutral{background:#f1f3ed;color:#8b9486}.badge.warning{background:#fcf5e4;color:#b99b58}.badge.danger{background:#fbeee9;color:#be8270}.soft-icon{color:#9caa90}.soft-icon svg{width:18px;height:18px}.class-breakdown{padding:0 22px 13px;max-height:277px;overflow:auto}.class-bar{margin:10px 0 22px}.class-bar>div:first-child{display:flex;justify-content:space-between;font-size:10px;margin-bottom:9px}.class-bar strong{font-weight:500;color:#6a7b63}.class-bar span{font-size:10px;color:#718365}.class-bar small{display:inline;font-size:8px;color:#9da895}.bar-track{height:5px;background:#f0f3e9;border-radius:9px;overflow:hidden}.bar-track>span{display:block;background:#99ad7b;height:100%;border-radius:9px}.panel-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf0e7;padding:14px 22px;color:#859678;font-size:10px}.panel-bottom svg{width:14px;height:14px}.due-row{display:flex;align-items:center;gap:13px;padding:13px 22px;border-top:1px solid #f0f2eb;font-size:10px}.due-row>strong{margin-left:auto;font-size:10px}.due-row small{font-size:9px;margin-top:3px}.quick-card{background:#eff2e7;border:1px solid #e5e9da;border-radius:9px;padding:23px}.quick-card .eyebrow{font-size:8px;color:#8f9d80}.quick-card h2{font-size:22px;line-height:1.4;letter-spacing:-.8px;font-weight:600;color:#667d52}.quick-card p{font-size:10px;color:#97a18a;margin:10px 0 14px}.quick-card a{display:flex;align-items:center;gap:9px;font-size:10px;color:#7d906b;border-top:1px solid #e1e7d6;padding:12px 0}.quick-card a svg{width:15px;height:15px}.quick-card a svg:last-child{margin-left:auto}.empty{text-align:center;padding:45px 20px;color:#93a08a}.empty>svg{width:27px;height:27px;color:#a3b696;margin-bottom:10px}.empty h3{font-size:14px;color:#718564;font-weight:600}.empty p{font-size:11px;margin:8px 0 12px;color:#a0aa99}.empty.compact{padding:20px}.empty.compact p{font-size:10px}.footer{display:flex;justify-content:space-between;gap:15px;padding:18px 36px;border-top:1px solid var(--border);font-size:9px;color:#9ca69a}.muted{color:#a6afa2}.filters{padding:17px 22px;display:flex;gap:12px;align-items:end;background:#fff;border-top:1px solid #eef1e9;border-bottom:1px solid #eef1e9}.filters>select{width:150px}.filters label{font-size:9px}.filters .search-field{position:relative;flex:1;min-width:170px;max-width:420px}.search-field span{position:absolute;left:12px;top:11px;color:#a9b2a4}.search-field svg{width:14px;height:14px}.search-field input{padding-left:35px}.filters input,.filters select{height:37px}.filters>label:not(.search-field){width:180px}.filters>label:not(.search-field)>input,.filters>label>select{margin-top:5px}input,select{border:1px solid #dfe5da;color:#607259;background:#fff;border-radius:5px;padding:10px 11px;font-size:11px;max-width:100%;min-width:0}input::placeholder{color:#a3ad9c;font-size:10px}label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#829077;font-weight:500}input:focus,select:focus{outline:2px solid #b8ccb0;outline-offset:1px}.row-actions{display:flex;align-items:center;gap:12px}.text-button{background:none;border:0;font-size:9px;padding:4px 0}.class-tag{display:inline-block;border:1px solid #e8eddf;background:#f9faf5;padding:4px 7px;border-radius:4px;font-size:9px}.table-footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:14px 22px;font-size:9px;color:#9ba592}.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.teacher-card,.class-card,.report-card{padding:23px}.teacher-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.teacher-card h2,.class-card h2,.report-card h2{font-size:17px;letter-spacing:-.4px;margin-bottom:10px}.teacher-card .contact{border-top:1px solid var(--border);padding-top:17px;margin-top:24px}.contact p{font-size:11px;margin:4px 0 13px;overflow-wrap:anywhere}.class-card>p{font-size:10px;color:#8f9b88;margin-bottom:25px}.class-card .panel-bottom{margin:25px -23px -23px}.wide{grid-column:1/-1}.count{background:#f0f4e9;font-size:9px;color:#84956e;padding:2px 7px;border-radius:5px;margin-left:7px}.stats-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-grid.three .stat-card>strong{font-size:25px;line-height:1.5}.section-gap{margin-top:23px}.attendance-tools{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;font-size:10px;color:#9aa58f}.attendance-options{display:flex;gap:7px}.attendance-options label{position:relative;cursor:pointer}.attendance-options input{position:absolute;opacity:0;width:1px;height:1px}.attendance-options span{display:block;border:1px solid #e6ebdf;padding:6px 11px;border-radius:5px;color:#9aa58e;font-size:9px}.attendance-options input:checked+span{background:#edf4e8;border-color:#a6bb92;color:#678650}.attendance-options input[value=Absent]:checked+span{background:#fbede9;border-color:#dbb6a8;color:#b47e68}.attendance-options input:focus-visible+span{outline:2px solid var(--green)}.form-footer{border-top:1px solid var(--border);padding:18px 23px;display:flex;justify-content:flex-end;align-items:center;gap:12px;background:#fcfdf9;font-size:10px;color:#9aa78e}.form-footer>span{margin-right:auto}.form-grid{padding:23px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-grid label{min-width:0}.settings-panel{max-width:770px}.info-note{display:flex;align-items:center;gap:15px;margin-top:27px;font-size:11px;line-height:1.8;color:#95a188}.info-note svg{color:#9bac8c}.report-card>p{font-size:11px;color:#9ba58f;margin-bottom:22px}.report-card>h2{margin-top:19px}.reports-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:950px}dialog{border:1px solid #dfe7d7;box-shadow:0 25px 90px #1e392936;border-radius:12px;padding:0;width:min(610px,calc(100% - 32px));max-height:90vh;color:var(--ink)}dialog::backdrop{background:#1e342d66;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:23px;border-bottom:1px solid var(--border)}.dialog-heading h2{font-size:21px;letter-spacing:-.6px}.dialog-heading .eyebrow{margin-bottom:5px}.dialog-heading .icon-button{font-size:25px;width:30px;height:30px}.flash{background:#e9f3e6;border:1px solid #d4e5cc;color:#66845a;padding:13px 16px;font-size:11px;border-radius:7px;margin-bottom:20px}.flash.error{background:#faeee8;border-color:#f0d6c6;color:#aa725c}.auth-body{display:flex;min-height:100vh;background:#fff}.auth-story{width:50%;min-height:100vh;padding:45px 55px;background:#eaf0df;display:flex;flex-direction:column;justify-content:space-between}.auth-story .brand{font-size:24px}.auth-story>div{margin-top:45px}.auth-story .eyebrow{font-size:9px;color:#8c9d77}.auth-story h1{font-size:clamp(40px,4.5vw,70px);line-height:1.16;letter-spacing:-2.5px;font-weight:600;color:#3e563a;margin:22px 0}.auth-story em{font-style:normal;color:#829962}.auth-story p{color:#93a081;font-size:12px;line-height:1.9}.auth-story>small{font-size:10px;color:#97a387}.auth-panel{width:50%;display:grid;place-items:center;padding:50px}.auth-card{width:100%;max-width:345px}.auth-card h2{font-size:28px;font-weight:650;letter-spacing:-1px;margin:20px 0 10px}.auth-card>p{font-size:12px;color:#96a08d;margin-bottom:32px}.stack{display:flex;flex-direction:column;gap:20px}.stack input{min-height:45px}.stack .button{height:45px;justify-content:space-between;padding-inline:17px;font-size:12px}.stack>small{font-size:10px;line-height:1.8}.auth-card .auth-foot{text-align:center;margin-top:28px;font-size:10px;color:#acb5a3}.auth-art{position:relative;display:flex;gap:12px;margin:36px 0 40px}.auth-art>span{background:#f6f8ed;border:1px solid #d6e0c5;width:66px;height:72px;border-radius:14px;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:3px 4px #d7e0c6}.auth-art>span:nth-child(2){transform:rotate(9deg) translateY(10px)}.auth-art>span:nth-child(3){transform:rotate(-4deg)}.auth-art svg{width:32px;height:32px;color:#a0b082;stroke-width:1.3}.mobile-menu{display:none}@media(min-width:1500px){.main-content{padding:40px 48px}.page-heading h1{font-size:30px}.welcome-banner{min-height:220px;padding:35px}.stat-card{padding:24px}.dashboard-grid{grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr)}td{padding-block:19px}}@media(max-height:830px){.sidebar{padding-top:22px}.workspace{margin-block:22px}.sidebar nav{margin-bottom:18px;gap:2px}.sidebar nav a{padding-block:9px;min-height:37px}.sidebar-note{padding:12px;margin-bottom:15px}.profile{padding-block:15px}}@media(max-height:710px){.sidebar-note{display:none}.sidebar{overflow-y:auto}.profile{margin-top:auto}}@media(max-width:1150px){:root{--sidebar:220px}.sidebar{padding-inline:14px}.brand{font-size:18px}.profile{margin-inline:-14px}.main-content{padding:27px 25px}.topbar{padding-inline:25px}.page-heading h1{font-size:22px}.welcome-banner{padding:25px}.stats-grid{gap:12px}.stat-card{padding:16px 13px}.stat-card>strong{font-size:25px}.stat-card:last-child>strong{font-size:18px;line-height:2.1}.stat-card span{font-size:10px}.dashboard-grid{gap:17px;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr)}.panel-heading{padding-inline:17px}td,th{padding-inline:15px}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{flex-wrap:wrap}.filters .search-field{max-width:none}.page-heading{align-items:flex-start}.actions{flex-wrap:wrap;justify-content:flex-end}.banner-art{width:220px}}@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-art{width:180px}.art-orbit{right:-20px}.art-book{right:16px}.art-star{right:144px}.art-label{right:-5px}.topbar-right .today{display:none}.page-heading{flex-wrap:wrap}.stats-grid.three{grid-template-columns:1fr}.auth-story{padding:35px}.auth-panel{padding:30px}.sidebar-note{display:none}}@media(max-width:650px){:root{--sidebar:240px}.sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:10px 0 40px #17392a18}.sidebar.is-open{transform:translateX(0)}.app-shell{margin-left:0}.mobile-menu{display:inline-grid}.topbar{height:62px;padding:0 17px}.breadcrumb{gap:10px}.main-content{padding:24px 17px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:23px}.page-heading p{font-size:10px;line-height:1.9}.welcome-banner{padding:23px;min-height:200px}.welcome-banner h2{font-size:24px;max-width:210px}.welcome-banner p{max-width:190px;line-height:1.9}.banner-art{position:absolute;width:110px;right:-32px;top:45px;opacity:.5;transform:scale(.8)}.welcome-banner>div:first-child{position:relative;z-index:1}.welcome-banner .pill{font-size:7px}.stat-card{padding:16px}.stat-card:last-child>strong{font-size:20px}.cards-grid,.reports-grid{grid-template-columns:1fr}.filters{padding:15px}.filters .search-field{flex-basis:100%}.filters>select{width:calc(50% - 6px)}.filters>label:not(.search-field){width:calc(50% - 6px)}.form-grid{grid-template-columns:1fr;padding:20px}.dialog-heading{padding:20px}.footer{padding:17px;flex-wrap:wrap;font-size:8px}.footer>span:last-child{display:none}.panel-heading p{line-height:1.8}.attendance-options{gap:4px}.attendance-options span{padding:6px 8px}.form-footer{padding:15px;flex-wrap:wrap}.auth-body{flex-direction:column}.auth-story{width:100%;min-height:auto;padding:25px}.auth-story>div,.auth-story>small{display:none}.auth-panel{width:100%;padding:45px 27px}.auth-story .brand{font-size:21px}.auth-card{max-width:400px}.stats-grid.three .stat-card{display:flex;justify-content:space-between;align-items:center}.stats-grid.three .stat-card>strong{font-size:20px}.actions{justify-content:flex-start}.teacher-card,.report-card{padding:23px}.row-actions{flex-direction:column;align-items:flex-start}}
/* Keep the compact workspace readable on typical school office displays. */
.sidebar nav a{font-size:13px}.profile strong{font-size:12px}.profile small{font-size:10px}.workspace{font-size:12px}.workspace small{font-size:10px}.breadcrumb{font-size:12px}.topbar-right{font-size:11px}.page-heading p{font-size:12px}.button{font-size:12px}.button.small{font-size:11px}.stat-card span{font-size:12px}.stat-card>small{font-size:10px}.panel-heading h2{font-size:15px}.panel-heading p{font-size:11px}.text-link{font-size:11px}th{font-size:11px}td,td strong{font-size:12px}td small{font-size:10px}.badge{font-size:10px}.class-tag{font-size:11px}.table-footer{font-size:11px}.class-bar>div:first-child,.class-bar span{font-size:12px}.class-bar small{font-size:10px}.form-grid label,.stack label{font-size:12px}input,select{font-size:12px}.attendance-options span{font-size:11px}.due-row,.due-row>strong{font-size:12px}.due-row small{font-size:10px}.auth-card>p{font-size:13px}.report-card>p{font-size:12px}.empty p{font-size:12px}.footer{font-size:10px}@media(max-width:650px){.button{font-size:11px}.stat-card span{font-size:11px}.attendance-options span{font-size:10px}.footer{font-size:9px}.today{display:none}}

/* Modal dismiss controls keep their content inside the hover surface. */
.dialog-heading .icon-button { width: 36px; height: 36px; padding: 0; line-height: 1; }
dialog .button[data-close]:hover,
dialog .icon-button[data-close]:hover { background: var(--mint); color: var(--green); }

/* Compact density: retain the existing visual design and readable type sizes. */
:root {
    --sidebar: 228px;
    --page-padding: 20px;
    --section-gap: 14px;
    --panel-padding: 14px;
    --control-height: 32px;
}
.sidebar { padding: 20px 14px 0; }
.workspace { margin: 20px 0 16px; padding: 9px 8px; }
.nav-label { margin-bottom: 6px; padding-inline: 10px; }
.sidebar nav { gap: 2px; margin-bottom: 16px; }
.sidebar nav a { min-height: 34px; padding: 7px 10px; gap: 10px; }
.sidebar-note { padding: 12px; margin-bottom: 14px; }
.note-spark { margin-bottom: 7px; }
.sidebar-note p { line-height: 1.6; }
.profile { margin-inline: -14px; padding: 12px; gap: 8px; }
.profile strong { max-width: 118px; }
.topbar { height: 56px; padding-inline: var(--page-padding); }
.topbar-right { gap: 14px; }
.year-badge { padding: 4px 8px; }
.main-content { padding: 20px var(--page-padding) 24px; }
.page-heading { gap: 12px; margin-bottom: 16px; }
.eyebrow { margin-bottom: 5px; }
.page-heading p { margin-top: 4px; }
.actions { gap: 8px; }
.button { min-height: var(--control-height); padding: 6px 11px; gap: 6px; }
.button.small { min-height: 28px; padding: 4px 8px; }
.welcome-banner { min-height: 148px; padding: 16px 22px; margin-bottom: var(--section-gap); }
.welcome-banner h2 { margin-top: 8px; }
.welcome-banner p { margin-top: 4px; }
.welcome-banner a { margin-top: 10px; }
.banner-art { height: 115px; transform: scale(.72); transform-origin: right top; }
.stats-grid { gap: 12px; margin-bottom: var(--section-gap); }
.stat-card { padding: 12px 14px; }
.stat-card > strong { margin: 3px 0; }
.stat-card:last-child > strong { line-height: 1.5; }
.stat-top { gap: 8px; }
.stat-icon { width: 28px; height: 28px; }
.dashboard-grid { gap: var(--section-gap); margin-bottom: var(--section-gap); }
.panel-heading { padding: 12px var(--panel-padding); gap: 10px; }
.panel-heading p { margin-top: 3px; }
.panel-bottom { padding: 10px var(--panel-padding); }
.class-breakdown { padding: 0 var(--panel-padding) 6px; }
.class-bar { margin: 7px 0 14px; }
.class-bar > div:first-child { margin-bottom: 6px; }
.due-row { padding: 9px var(--panel-padding); gap: 10px; }
.quick-card { padding: 16px; }
.quick-card p { margin: 7px 0 9px; }
.quick-card a { padding-block: 8px; }
.empty { padding: 26px 16px; }
.empty.compact { padding: 14px; }
.empty p { margin: 6px 0 8px; }
.footer { padding: 12px var(--page-padding); }
.filters { padding: 10px var(--panel-padding); gap: 8px; }
.filters input, .filters select { height: var(--control-height); }
.filters > label:not(.search-field) > input, .filters > label > select { margin-top: 2px; }
.search-field span { top: 8px; }
input, select { padding: 6px 10px; min-height: var(--control-height); }
label { gap: 4px; }
th { padding: 8px var(--panel-padding); }
td { padding: 8px var(--panel-padding); }
td small { margin-top: 1px; }
.person { gap: 8px; }
.person .avatar { width: 30px; height: 30px; }
.badge { padding: 3px 7px; }
.class-tag { padding: 3px 6px; }
.row-actions { gap: 9px; }
.table-footer { padding: 9px var(--panel-padding); }
.cards-grid { gap: var(--section-gap); }
.teacher-card, .class-card, .report-card { padding: 16px; }
.teacher-top { margin-bottom: 12px; }
.teacher-card h2, .class-card h2, .report-card h2 { margin-bottom: 7px; }
.teacher-card .contact { margin-top: 16px; padding-top: 12px; }
.contact p { margin: 3px 0 9px; }
.class-card > p { margin-bottom: 16px; }
.class-card .panel-bottom { margin: 16px -16px -16px; }
.report-card > h2 { margin-top: 12px; }
.report-card > p { margin-bottom: 14px; }
.section-gap { margin-top: var(--section-gap); }
.attendance-tools { padding: 9px var(--panel-padding); }
.attendance-options { gap: 5px; }
.attendance-options span { padding: 4px 9px; }
/* Radio inputs remain visually hidden; only their status chips set row height. */
.attendance-options input { min-height: 0; }
.form-grid { padding: 16px; gap: 12px 16px; }
.form-footer { padding: 12px 16px; gap: 8px; }
.dialog-heading { padding: 16px; }
.info-note { margin-top: 16px; gap: 10px; }
.flash { padding: 10px 12px; margin-bottom: 14px; }
.auth-story { padding: 32px 40px; }
.auth-panel { padding: 32px; }
.auth-card h2 { margin: 14px 0 7px; }
.auth-card > p { margin-bottom: 20px; }
.stack { gap: 14px; }
.stack input { min-height: 38px; }
.stack .button { height: 38px; }
.auth-card .auth-foot { margin-top: 18px; }
.auth-art { margin-block: 24px; }
@media (max-width: 1150px) {
    :root { --sidebar: 212px; --page-padding: 16px; }
    .profile strong { max-width: 102px; }
}
@media (max-width: 650px) {
    :root { --sidebar: 228px; --page-padding: 12px; --panel-padding: 12px; --control-height: 36px; }
    .topbar { height: 52px; }
    .main-content { padding-block: 16px 20px; }
    .profile strong { max-width: 118px; }
    .page-heading { gap: 10px; margin-bottom: 14px; }
    .welcome-banner { padding: 14px 16px; min-height: 156px; }
    .banner-art { transform: scale(.65); }
    .stats-grid { gap: 10px; }
    .stat-card { padding: 10px 12px; }
    .form-grid { gap: 12px; padding: 14px; }
    .dialog-heading, .form-footer { padding: 14px; }
    .attendance-options span { min-height: 32px; display: flex; align-items: center; padding-inline: 8px; }
    .sidebar nav a { min-height: 38px; }
    .row-actions { gap: 4px; }
    .auth-story { padding: 20px 24px; }
    .auth-panel { padding: 28px 24px; }
    .stack input { min-height: 40px; }
    .stack .button { height: 40px; }
}

/* School identity controls follow the compact settings layout. */
.brand-icon.has-logo { background: transparent; }
.school-logo { width: 100%; height: 100%; object-fit: contain; }
.branding-fields { padding: 0 16px 16px; display: grid; gap: 16px; }
.branding-field { display: flex; align-items: flex-start; gap: 12px; }
.branding-preview { width: 60px; height: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: #f7f9f4; flex-shrink: 0; display: grid; place-items: center; }
.branding-preview img { width: 100%; height: 100%; object-fit: contain; }
.favicon-preview img { width: 32px; height: 32px; }
.branding-control { flex: 1; min-width: 0; display: grid; gap: 6px; }
.branding-control input[type="file"] { width: 100%; padding: 5px; background: #fff; }
.branding-control input[type="file"]::file-selector-button { font: inherit; color: var(--green); border: 0; border-radius: 3px; padding: 4px 8px; margin-right: 8px; background: var(--mint); cursor: pointer; }
.branding-control small { line-height: 1.6; }
.branding-remove { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; }
.branding-remove input { min-height: 0; margin: 0; accent-color: var(--green); }
@media (max-width: 650px) { .branding-fields { padding-inline: 14px; } .branding-preview { width: 46px; height: 46px; } }