@font-face{font-family:Tajawal;src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Tajawal;src:url('fonts/Tajawal-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Tajawal;src:url('fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#172033;--muted:#6f7788;--soft:#98a0af;--line:#e7e9ef;--canvas:#f6f7fb;
  --surface:#fff;--nav:#10182a;--primary:#5b5ce2;--primary-2:#7475ee;
  --blue:#377cf6;--green:#1fa979;--amber:#e99b2f;--red:#df5c67;
  --shadow:0 14px 40px rgba(25,32,56,.07);--radius:18px;--font:'Tajawal','Segoe UI',Arial,sans-serif
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.6}button,select,input{font:inherit}button{cursor:pointer}.demo-bar{height:30px;background:#edeefe;color:#5558b9;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px}.demo-bar span{font-weight:700}.demo-bar p{margin:0;color:#777ba0}.app-shell{min-height:calc(100vh - 30px);display:grid;grid-template-columns:244px minmax(0,1fr)}
.sidebar{background:var(--nav);color:#dce1ec;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 30px);overflow:auto}.logo{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;padding:0 8px 20px}.logo>span{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#7475ee,#5152d8);display:grid;place-items:center;box-shadow:0 8px 22px #090d18}.logo img{width:23px;filter:brightness(0) invert(1)}.logo b{font-size:20px;line-height:1}.logo small{display:block;color:#8992a7;font-size:10px;margin-top:3px}.school-card{display:flex;align-items:center;gap:10px;padding:13px 10px;margin-bottom:18px;border:1px solid #283149;border-radius:14px;background:#171f33}.school-mark{width:32px;height:32px;border-radius:9px;background:#262f48;display:grid;place-items:center;color:#acafff;font-weight:700}.school-card b{font-size:11px;display:block;color:#f3f4f8}.school-card small{font-size:9px;color:#7f899f;display:block}nav{display:grid;gap:4px}.sidebar nav button,.bottom-nav button{border:0;background:none}.sidebar nav button{height:43px;border-radius:11px;color:#8e98ac;display:grid;grid-template-columns:26px 1fr auto;align-items:center;text-align:right;padding:0 11px;transition:.2s}.sidebar nav button i{font-style:normal;font-size:16px;color:#768197}.sidebar nav button span{font-size:12px;font-weight:500}.sidebar nav button em{font-style:normal;background:#ef6672;color:#fff;border-radius:8px;min-width:19px;height:19px;text-align:center;font-size:9px;line-height:19px}.sidebar nav button:hover{background:#192238;color:#fff}.sidebar nav button.active{background:linear-gradient(120deg,#5c5de2,#7475ee);color:#fff;box-shadow:0 8px 24px rgba(91,92,226,.24)}.sidebar nav button.active i{color:#fff}.privacy-note{margin-top:auto;border-top:1px solid #252e43;padding:18px 8px 12px;display:flex;gap:9px;color:#7f899f}.privacy-note>span{color:#67d5ae}.privacy-note p{font-size:9px;margin:0}.privacy-note b{display:block;color:#cbd1dd;font-size:10px}.logout{border:0;background:none;color:#737d91;text-align:right;padding:9px;font-size:10px}.logout span{float:left}
.workspace{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:20}.topbar>div:first-child{display:flex;align-items:center;gap:12px}.topbar p{margin:0;color:var(--muted);font-size:11px}.mobile-menu{display:none;border:0;background:none}.top-actions{display:flex;align-items:center;gap:10px}.role-switch{font-size:10px;color:var(--muted);display:flex;gap:8px;align-items:center;background:#f6f7fa;border:1px solid var(--line);padding:5px 10px;border-radius:10px}.role-switch select{border:0;background:transparent;color:var(--ink);font-size:10px;outline:0}.notification{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;position:relative;color:#71798b}.notification span{position:absolute;top:-4px;right:-3px;background:#e55867;color:#fff;border:2px solid #fff;border-radius:9px;font-size:8px;min-width:16px}.profile{border:0;background:transparent;display:flex;align-items:center;gap:8px;color:var(--ink);text-align:right}.profile .avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#e8e8ff;color:#5051cf;font-weight:700}.profile b{font-size:10px;display:block}.profile small{display:block;font-size:9px;color:var(--muted)}.profile i{font-style:normal;color:var(--soft)}
main{padding:30px 32px 64px;max-width:1500px;margin:auto}.page{display:none}.page.active{display:block;animation:appear .25s ease}@keyframes appear{from{opacity:0;transform:translateY(5px)}}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.overline{margin:0 0 5px;color:var(--primary);font-size:11px;font-weight:600}.welcome-row h1,.detail-hero h1{margin:0;font-size:28px;line-height:1.35;letter-spacing:-.7px;font-weight:600}.welcome-row h1 em{font-style:normal;color:var(--primary)}.student-picker{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:8px 12px;box-shadow:0 8px 25px rgba(20,25,45,.04)}.student-avatar{width:38px;height:38px;border-radius:11px;background:#f0edff;color:#5c52d5;display:grid;place-items:center;font-weight:700;margin-left:10px}.student-picker label{font-size:9px;color:var(--muted)}.student-picker select{display:block;border:0;background:none;font-size:11px;font-weight:600;color:var(--ink);outline:0}
.today-card{background:linear-gradient(120deg,#121b31 0%,#202b48 62%,#30365f 100%);color:#fff;border-radius:22px;padding:24px 26px;display:grid;grid-template-columns:1.15fr .9fr auto;align-items:center;gap:28px;box-shadow:0 18px 50px rgba(19,27,49,.16);position:relative;overflow:hidden}.today-card:after{content:'';position:absolute;width:230px;height:230px;border:45px solid rgba(123,125,240,.13);border-radius:50%;left:-100px;top:-110px}.today-status{display:flex;align-items:center;gap:14px;z-index:1}.status-icon{width:46px;height:46px;border-radius:14px;background:#29b987;display:grid;place-items:center;font-weight:700;box-shadow:0 8px 25px rgba(41,185,135,.3)}.today-status small,.day-progress span{font-size:9px;color:#9ea8bb}.today-status h2{font-size:17px;margin:1px 0}.today-status p{font-size:10px;margin:0;color:#adb5c5}.day-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.day-progress div span,.day-progress div b{display:block}.day-progress div b{font-size:11px}.day-progress i{height:3px;background:#39445d;border-radius:5px;position:relative}.day-progress i span{position:absolute;width:58%;height:100%;background:#6f70e8;border-radius:5px}.day-progress i:after{content:'';position:absolute;right:58%;top:-3px;width:9px;height:9px;background:#fff;border:3px solid #6f70e8;border-radius:50%}.today-card>button{z-index:1;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08);color:#fff;border-radius:11px;padding:10px 14px;font-size:10px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.stat,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 25px rgba(29,36,61,.035)}.stat{padding:18px 19px;min-height:155px}.stat-head{display:grid;grid-template-columns:34px 1fr auto;align-items:center}.mini-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:600}.green{background:#e9f8f3;color:var(--green)}.blue{background:#eaf1ff;color:var(--blue)}.amber{background:#fff3e2;color:var(--amber)}.stat small{color:var(--muted);font-size:10px}.stat-head b{font-size:8px;color:var(--soft);font-weight:400}.stat strong{display:block;font-size:27px;line-height:1.2;margin-top:14px;font-weight:600}.stat p{font-size:9px;color:var(--muted);margin:4px 0}.stat p i{font-style:normal}.up{color:var(--green)!important}.meter{height:4px;background:#eef0f4;border-radius:5px;margin-top:12px;overflow:hidden}.meter span{display:block;height:100%;background:var(--green);border-radius:5px}.blue-meter span{background:var(--blue)}.alert-stat button{border:0;background:none;padding:7px 0;color:var(--primary);font-size:9px;font-weight:600}
.main-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-bottom:16px}.panel{padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title span{font-size:9px;color:var(--primary);font-weight:600}.panel-title h2{font-size:15px;margin:0;font-weight:600}.panel-title button,.panel-title select{border:0;background:none;color:var(--muted);font-size:9px}.schedule{display:grid}.schedule>div{display:grid;grid-template-columns:55px 8px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f1f4}.schedule>div:last-child{border:0}.schedule time{font-size:9px;color:var(--muted)}.schedule i{width:7px;height:7px;border-radius:50%;background:var(--primary)}.schedule b{font-size:10px}.schedule small{font-size:8px;color:var(--muted)}.chart{position:relative;padding:0 12px 0 26px}.chart svg{width:100%;height:150px;overflow:visible}.chart .line{fill:none;stroke:var(--primary);stroke-width:3}.chart .area{fill:url(#fill)}.chart circle{fill:#fff;stroke:var(--primary);stroke-width:3}.chart-labels{position:absolute;left:0;top:7px;height:120px;display:flex;flex-direction:column;justify-content:space-between;color:#a4aaba;font-size:8px}.chart-days{display:flex;justify-content:space-between;color:#9aa1b0;font-size:8px}.insight{margin-top:13px;border-radius:12px;background:#f4f3ff;padding:10px;display:flex;gap:9px}.insight span{color:var(--primary)}.insight p{font-size:8px;margin:0;color:var(--muted)}.insight b{display:block;color:var(--ink);font-size:9px}.lower-grid{display:grid;grid-template-columns:1.5fr .7fr;gap:16px}.notice-list article{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid #f0f1f4}.notice-list article:last-child{border:0}.notice-type{padding:3px 7px;background:#eef1ff;color:#5f63d6;border-radius:7px;font-size:8px}.notice-type.urgent{background:#fff0f0;color:#d55c67}.notice-list b{font-size:10px}.notice-list p{margin:1px 0;color:var(--muted);font-size:9px}.notice-list time{color:var(--soft);font-size:8px}.teacher-card{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(145deg,#fff,#f7f6ff)}.teacher-photo{width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:#e7e4ff;color:#5753d2;display:grid;place-items:center;font-weight:700}.teacher-card small{color:var(--primary);font-size:8px}.teacher-card h3{font-size:13px;margin:1px 0}.teacher-card p{font-size:9px;color:var(--muted);margin:5px 0 10px}.teacher-card button{border:0;border-radius:9px;background:var(--ink);color:#fff;padding:7px 12px;font-size:9px}
.detail-hero{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}.detail-hero p:not(.overline){margin:5px 0 0;color:var(--muted);font-size:11px}.primary-action{border:0;background:var(--primary);color:#fff;border-radius:11px;padding:11px 16px;font-size:10px;font-weight:600;box-shadow:0 8px 20px rgba(91,92,226,.2)}#detail-content{display:grid;gap:16px}.detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}.student-table{overflow:auto}.student-row{display:grid;grid-template-columns:1.2fr repeat(3,.7fr);align-items:center;border-bottom:1px solid #f0f1f4;padding:12px 5px;font-size:10px}.student-row:last-child{border:0}.student-row b{font-size:10px}.student-row small{display:block;color:var(--muted)}.student-row select{border:1px solid var(--line);border-radius:8px;padding:5px;background:#fff}.bars{display:grid;gap:16px}.bars>div{display:grid;grid-template-columns:70px 1fr 35px;gap:10px;align-items:center;font-size:9px}.bars i{height:7px;background:#eff0f4;border-radius:8px;overflow:hidden}.bars b{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#8b8bf1);border-radius:8px}.admin-tasks{display:grid;gap:8px}.admin-tasks button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;text-align:right}.admin-tasks p{margin:0;font-size:9px;color:var(--muted)}.admin-tasks p b{display:block;color:var(--ink)}
.calendar-panel,.list-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 7px 25px rgba(29,36,61,.035)}.calendar-panel>.panel-title>span{font-size:9px;color:var(--muted);background:#f6f7fb;border-radius:9px;padding:6px 9px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendar-grid>span{text-align:center;color:var(--soft);font-size:9px;padding:6px 0}.calendar-grid>b{aspect-ratio:1.35;border:1px solid #edf0f4;border-radius:11px;display:grid;place-items:center;font-size:10px;font-weight:500;background:#fafbfc;color:#a4aaba}.calendar-grid>b.present{background:#ecf9f4;border-color:#d6f2e7;color:var(--green)}.calendar-grid>b.present:after{content:'✓';font-size:8px;margin-right:3px}.calendar-grid>b.absent{background:#fff0f1;border-color:#f8dce0;color:var(--red)}.calendar-grid>b.late{background:#fff6e8;border-color:#f8e5c8;color:#c47a16}.detail-list{display:grid}.detail-item{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #f0f1f4}.detail-item:last-child{border:0}.detail-item h3{font-size:11px;margin:0}.detail-item p{font-size:9px;color:var(--muted);margin:2px 0}.detail-item strong{font-size:9px;color:var(--primary)}
.bottom-nav{display:none}.toast{position:fixed;bottom:25px;left:25px;background:#172033;color:#fff;padding:11px 16px;border-radius:11px;box-shadow:var(--shadow);font-size:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:none}.action-dialog{border:0;border-radius:20px;padding:26px;max-width:520px;width:calc(100% - 30px);box-shadow:0 30px 100px #11182744}.action-dialog::backdrop{background:#11182788;backdrop-filter:blur(4px)}.dialog-x{position:absolute;left:14px;top:11px;border:0;background:none;font-size:22px;color:var(--muted)}.action-dialog h2{font-size:18px}.action-dialog label{display:block;font-size:10px;margin:10px 0;color:var(--muted)}.action-dialog input,.action-dialog select,.action-dialog textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff}.action-dialog button[type=submit]{border:0;background:var(--primary);color:#fff;border-radius:10px;padding:9px 15px;margin-top:8px}
.login-screen{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}.login-screen[hidden]{display:none}.login-visual{background:radial-gradient(circle at 20% 20%,#3d4776,#182139 55%,#101728);color:#fff;padding:45px;display:flex;flex-direction:column;justify-content:space-between}.login-brand{display:flex;align-items:center;gap:12px}.login-brand>span{width:46px;height:46px;background:#6d6ee7;border-radius:14px;display:grid;place-items:center}.login-brand img{width:26px;filter:brightness(0) invert(1)}.login-brand b{display:block;font-size:22px}.login-brand small{color:#9ba5bb}.login-quote{max-width:520px}.login-quote p{font-size:30px;line-height:1.5;margin:0 0 10px;font-weight:500}.login-quote span{color:#aeb7c8}.login-card{align-self:center;width:min(420px,calc(100% - 50px));margin:auto}.login-card h1{font-size:26px;margin:4px 0}.login-card>p:not(.overline){color:var(--muted);font-size:11px}.login-card>label{display:block;font-size:10px;color:var(--muted);margin:17px 0}.login-card input{display:block;width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;margin-top:5px;outline:0}.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #5b5ce21a}.login-options{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.login-options button{border:0;background:none;color:var(--primary)}.login-submit{margin-top:18px;width:100%;border:0;background:var(--primary);color:#fff;border-radius:11px;padding:12px;font-weight:600}.login-submit span{float:left}.demo-roles{text-align:center;margin-top:18px;font-size:9px;color:var(--muted)}.demo-roles button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;margin:0 3px}.login-mobile-logo{display:none}
.login-error{min-height:20px!important;color:#d94352!important;font-size:12px!important;margin:8px 0!important}.login-submit:disabled{opacity:.65;cursor:wait}
@media(max-width:1000px){.app-shell{grid-template-columns:210px}.topbar{padding:0 20px}main{padding:24px 20px 70px}.today-card{grid-template-columns:1fr 1fr}.today-card>button{display:none}.main-grid,.lower-grid{grid-template-columns:1fr}.login-quote p{font-size:24px}}
@media(max-width:760px){body{background:#f7f8fb}.demo-bar{height:24px}.demo-bar p{display:none}.app-shell{display:block;min-height:calc(100vh - 24px)}.sidebar{position:fixed;z-index:50;right:0;top:24px;height:calc(100vh - 24px);width:260px;transform:translateX(105%);transition:.25s;box-shadow:-20px 0 50px #11182733}.sidebar.open{transform:none}.topbar{height:61px;padding:0 14px}.mobile-menu{display:block;font-size:20px}.topbar p{display:none}.role-switch{display:none}.profile>span:not(.avatar),.profile i{display:none}.notification{width:36px;height:36px}main{padding:18px 14px 92px}.welcome-row{align-items:flex-start;margin-bottom:17px}.welcome-row h1,.detail-hero h1{font-size:21px;letter-spacing:-.3px}.student-picker{padding:5px 7px}.student-avatar{width:32px;height:32px}.student-picker label{font-size:8px}.student-picker select{font-size:9px;max-width:128px}.today-card{grid-template-columns:1fr;padding:19px;border-radius:18px;gap:18px}.today-status h2{font-size:15px}.today-status p{font-size:9px}.day-progress{padding:0 3px}.today-card>button{display:block;width:100%;padding:11px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.stat{min-height:128px;padding:13px 11px;border-radius:15px}.stat-head{grid-template-columns:1fr}.stat-head .mini-icon{display:none}.stat-head b{display:none}.stat strong{font-size:21px;margin-top:11px}.stat p{line-height:1.45}.meter{margin-top:9px}.alert-stat button{font-size:8px}.panel{padding:16px;border-radius:16px}.panel-title{margin-bottom:13px}.main-grid,.lower-grid{gap:12px;margin-bottom:12px}.performance-panel{display:none}.lower-grid{grid-template-columns:1fr}.teacher-card{display:none}.notice-list article{grid-template-columns:auto 1fr}.notice-list time{display:none}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;height:69px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{color:#9299a9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom-nav i{font-style:normal;font-size:16px}.bottom-nav span{font-size:8px}.bottom-nav button.active{color:var(--primary)}.detail-hero{align-items:flex-start}.detail-hero .primary-action{display:none}.calendar-panel,.list-panel{padding:14px;border-radius:16px}.calendar-panel>.panel-title{align-items:flex-start;gap:8px}.calendar-panel>.panel-title>span{font-size:8px;text-align:left}.calendar-grid{gap:4px}.calendar-grid>span{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:clip}.calendar-grid>b{border-radius:8px;aspect-ratio:1;font-size:9px}.calendar-grid>b.present:after{display:none}.detail-item{grid-template-columns:32px 1fr auto;gap:8px}.student-table-panel{padding:13px}.student-row{min-width:530px}.login-screen{grid-template-columns:1fr}.login-visual{display:none}.login-card{width:calc(100% - 36px)}.login-mobile-logo{display:grid;width:50px;height:50px;background:#eeeefe;border-radius:14px;place-items:center;margin-bottom:24px}.login-mobile-logo img{width:27px}.login-card h1{font-size:23px}.toast{left:14px;right:14px;bottom:80px;text-align:center}.chart svg{height:130px}}
@media(max-width:410px){.stats-grid{grid-template-columns:1fr 1fr}.stats-grid .stat:last-child{grid-column:1/-1;min-height:105px}.student-picker label{display:none}.welcome-row h1{font-size:19px}.today-status{align-items:flex-start}.status-icon{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Tabee product UI — refined application shell */
:root{--ink:#12213b;--muted:#65738a;--soft:#97a3b6;--line:#e6ebf2;--canvas:#f4f7fb;--surface:#fff;--nav:#fff;--primary:#3457e8;--primary-2:#5273f1;--blue:#2e77ed;--green:#13a77b;--amber:#d98a20;--red:#e25563;--shadow:0 12px 35px rgba(31,51,88,.08);--radius:20px}
.demo-bar{background:#eef2ff;color:#3457e8;border-bottom:1px solid #e3e9fb}.app-shell{grid-template-columns:258px minmax(0,1fr)}
.sidebar{background:#fff;color:var(--ink);border-left:1px solid var(--line);padding:22px 17px}.logo{color:var(--ink);padding:0 9px 22px}.logo>span{background:linear-gradient(145deg,#3457e8,#6b82f3);box-shadow:0 9px 22px rgba(52,87,232,.2)}.logo small{color:#8793a7}.school-card{background:#f5f7fc;border-color:#e7ebf3}.school-mark{background:#e9eeff;color:#3457e8}.school-card b{color:#263651}.school-card small{color:#8793a7}.sidebar nav button{color:#69778c;height:46px;border-radius:13px;grid-template-columns:30px 1fr auto}.sidebar nav button i{color:#8c98aa;display:grid;place-items:center}.sidebar nav button i svg,.bottom-nav i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidebar nav button:hover{background:#f3f6fb;color:#21314e}.sidebar nav button.active{background:#eaf0ff;color:#294ed9;box-shadow:none}.sidebar nav button.active i{color:#294ed9}.privacy-note{border-top-color:#e8ecf3;color:#8592a5;background:#f7f9fc;border-radius:14px;padding:14px 10px;margin-bottom:10px}.privacy-note b{color:#33435e}.logout{color:#7c899d;border:1px solid #e8ecf2;border-radius:11px;padding:9px 11px}.topbar{box-shadow:0 3px 18px rgba(32,48,78,.035)}
.role-switch{background:#fff}.notification{border-color:#e3e8f0;box-shadow:0 4px 12px rgba(28,43,70,.04)}.profile .avatar{background:linear-gradient(145deg,#e5eaff,#f1f4ff);color:#3457e8}.welcome-row h1,.detail-hero h1{color:#15243d}.student-picker{box-shadow:0 8px 24px rgba(29,45,77,.06)}.student-avatar{background:#eaf0ff;color:#3457e8}
.today-card{background:linear-gradient(120deg,#2848c9 0%,#3457e8 52%,#5574ef 100%);box-shadow:0 18px 45px rgba(52,87,232,.22)}.today-card:after{border-color:rgba(255,255,255,.09)}.status-icon{background:#fff;color:#18a77d;box-shadow:0 9px 24px rgba(22,42,104,.22)}.day-progress i{background:rgba(255,255,255,.22)}.day-progress i span{background:#9ee4cf}.day-progress i:after{border-color:#9ee4cf}.stat,.panel,.calendar-panel,.list-panel{border-color:#e7ebf2;box-shadow:0 8px 30px rgba(35,53,87,.045)}.stat{transition:transform .18s,box-shadow .18s}.stat:hover{transform:translateY(-2px);box-shadow:0 13px 34px rgba(35,53,87,.08)}.mini-icon{border-radius:11px}.green{background:#e9f9f4}.blue{background:#edf3ff}.amber{background:#fff6e8}.panel-title h2{color:#1d2e4b}.panel-title button{color:#3457e8;font-weight:600}.teacher-card button,.primary-action{background:#3457e8;box-shadow:0 8px 18px rgba(52,87,232,.18)}.bottom-nav i{display:grid;place-items:center}.calendar-grid>b.present{background:#ebfaf5;border-color:#d3f2e7}.calendar-grid>b.absent{background:#fff0f2;border-color:#f7d6db}.calendar-grid>b.late{background:#fff7e9;border-color:#f5dfba}
.login-visual{background:radial-gradient(circle at 18% 18%,#536fef,#2945bd 56%,#172c82)}.login-brand>span,.login-submit{background:linear-gradient(135deg,#3457e8,#627cf0)}.login-card input{background:#fbfcfe}.login-submit{box-shadow:0 12px 26px rgba(52,87,232,.2)}
@media(max-width:760px){
  .demo-bar{display:none}.app-shell{min-height:100vh}.sidebar{top:0;height:100vh;border-left:0;box-shadow:-20px 0 60px rgba(17,31,56,.18)}
  .topbar{height:58px;padding:0 15px;background:rgba(255,255,255,.94)}.mobile-menu{width:38px;height:38px;border-radius:12px;background:#f1f4f9;font-size:0;position:relative}.mobile-menu:before,.mobile-menu:after{content:'';position:absolute;right:11px;width:16px;height:2px;border-radius:2px;background:#263752}.mobile-menu:before{top:14px;box-shadow:0 5px 0 #263752}.mobile-menu:after{display:none}.top-actions{gap:7px}.notification{width:37px;height:37px;border-radius:12px}.profile .avatar{width:37px;height:37px;border-radius:12px}
  main{padding:17px 13px 100px}.welcome-row{margin-bottom:15px;align-items:center}.welcome-row .overline{font-size:9px}.welcome-row h1{font-size:19px;line-height:1.45}.student-picker{border-radius:14px;padding:5px;background:#fff}.student-avatar{margin:0;width:36px;height:36px}.student-picker label{display:none}
  .today-card{border-radius:22px;padding:18px;gap:15px}.today-status{gap:12px}.status-icon{width:42px;height:42px;border-radius:13px}.today-status small{color:#cbd5ff}.today-status p{color:#dce3ff}.today-card>button{background:#fff;color:#294ed9;border:0;font-weight:600;border-radius:12px}.day-progress span{color:#cbd5ff}
  .stats-grid{gap:9px}.stat{border-radius:17px;padding:14px 12px;min-height:124px}.stat small{font-size:9px}.stat strong{font-size:20px}.stat p{font-size:8px}.panel{border-radius:18px}.schedule>div{grid-template-columns:48px 7px 1fr auto}.panel-title h2{font-size:14px}
  .detail-hero{background:linear-gradient(135deg,#2f50d9,#5574ef);color:#fff;border-radius:20px;padding:17px;margin-bottom:13px;align-items:center}.detail-hero .overline,.detail-hero h1,.detail-hero p:not(.overline){color:#fff}.detail-hero .overline{opacity:.75}.detail-hero h1{font-size:20px}.detail-hero p:not(.overline){opacity:.78;font-size:9px;max-width:280px}.calendar-panel,.list-panel{border-radius:18px;padding:14px}.calendar-panel>.panel-title>span{background:#eef2ff;color:#3457e8}.calendar-grid{gap:5px}.calendar-grid>b{border-radius:10px;font-weight:600}.calendar-grid>span{color:#7e8ba0}
  .bottom-nav{left:12px;right:12px;bottom:10px;height:67px;border:1px solid #e5eaf2;border-radius:20px;box-shadow:0 12px 35px rgba(26,44,77,.14);overflow:hidden;padding-bottom:0}.bottom-nav button{position:relative}.bottom-nav button.active{color:#3457e8}.bottom-nav button.active:before{content:'';position:absolute;top:0;width:28px;height:3px;background:#3457e8;border-radius:0 0 4px 4px}.bottom-nav i svg{width:20px;height:20px}.bottom-nav span{font-size:8px;font-weight:500}.toast{bottom:90px}
  .login-card{width:calc(100% - 32px)}.login-mobile-logo{background:#edf1ff}.login-card h1{font-size:22px}.login-card input{height:50px;border-radius:14px}.login-submit{height:52px;border-radius:14px}.demo-roles button{padding:7px 13px;border-radius:10px}
}
@media(max-width:410px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stats-grid .stat:last-child{grid-column:1/-1}.detail-hero{padding:15px}.calendar-grid{gap:3px}.calendar-grid>b{border-radius:8px}.calendar-panel{padding:11px}}

/* Accessibility-first Arabic typography */
body{font-size:16px;line-height:1.7;color:#14233d;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,select,input,textarea{font-family:var(--font);font-weight:500;color:inherit}.overline{font-size:13px;font-weight:700}.welcome-row h1,.detail-hero h1{font-weight:700;letter-spacing:0}.today-status h2{font-size:20px;font-weight:700}.today-status p{font-size:13px;line-height:1.7}.today-status small,.day-progress span{font-size:12px}.day-progress div b{font-size:14px}.today-card>button{font-size:13px}.stat small{font-size:13px;color:#52627a;font-weight:500}.stat strong{font-size:30px;font-weight:700}.stat p{font-size:12px;color:#5d6d84}.alert-stat button{font-size:12px}.panel-title span{font-size:11px}.panel-title h2{font-size:18px;font-weight:700}.panel-title button,.panel-title select{font-size:12px}.schedule time{font-size:12px}.schedule b{font-size:14px}.schedule small{font-size:11px;color:#607087}.notice-list b{font-size:13px}.notice-list p{font-size:12px;color:#5a6a81}.teacher-card small{font-size:11px}.teacher-card h3{font-size:16px}.teacher-card p{font-size:12px}.profile b{font-size:12px}.profile small{font-size:10px}.sidebar nav button span{font-size:14px}.school-card b{font-size:13px}.school-card small{font-size:10px}.privacy-note p{font-size:10px}.privacy-note b{font-size:12px}.calendar-grid>span{font-size:11px;font-weight:500;color:#66768e}.calendar-grid>b{font-size:13px}.calendar-panel>.panel-title>span{font-size:11px}.detail-item h3{font-size:14px}.detail-item p{font-size:12px;color:#5b6b82}.detail-item strong{font-size:11px}.primary-action{font-size:13px}.login-card h1{font-weight:700}.login-card>p:not(.overline){font-size:13px;color:#53637b}.login-card>label{font-size:13px;color:#40516a}.login-card input{font-size:16px}.login-options,.demo-roles{font-size:12px}.login-submit{font-size:16px}
@media(max-width:760px){body{font-size:15px}.welcome-row .overline{font-size:12px}.welcome-row h1{font-size:23px}.today-status h2{font-size:18px}.today-status p{font-size:12px}.today-card>button{font-size:14px}.stat small{font-size:12px}.stat strong{font-size:24px}.stat p{font-size:11px}.panel-title h2{font-size:17px}.schedule b{font-size:13px}.schedule small{font-size:11px}.detail-hero h1{font-size:24px}.detail-hero p:not(.overline){font-size:12px;line-height:1.6}.calendar-grid>span{font-size:9px}.calendar-grid>b{font-size:12px}.bottom-nav span{font-size:11px;font-weight:500}.login-card h1{font-size:26px}.login-card>p:not(.overline),.login-card>label{font-size:13px}}