:root{--c-teal:#0e9aa7;--c-teal-2:#38c6c0;--c-violet:#8b5cf6;--c-violet-2:#b794f6;--c-pink:#ec4899;--c-pink-2:#f9a8d4;--c-amber:#f59e0b;--c-amber-2:#fcd34d;--c-blue:#3b82f6;--c-blue-2:#93c5fd;--c-green:#10b981;--c-green-2:#6ee7b7;--grad-main:linear-gradient(135deg,var(--c-teal) 0%,var(--c-violet) 100%);--grad-soft:linear-gradient(135deg,#e6f7f6 0%,#f1ebff 55%,#fdeef6 100%);--shadow-sm:0 1px 2px rgba(30,41,59,.06),0 2px 8px rgba(30,41,59,.05);--shadow-md:0 8px 24px rgba(76,61,140,.1),0 2px 6px rgba(30,41,59,.05);--shadow-lg:0 18px 40px rgba(76,61,140,.16);--radius:18px}html[data-theme=dark]{--grad-soft:linear-gradient(135deg,#132a2e 0%,#1d1736 55%,#2a1527 100%);--shadow-sm:0 1px 2px #0006;--shadow-md:0 8px 24px #0007;--shadow-lg:0 18px 40px #0008}body{background:var(--surface);background-image:radial-gradient(1200px 600px at 100% -10%,rgba(139,92,246,.1),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(14,154,167,.1),transparent 60%),radial-gradient(700px 500px at 50% 110%,rgba(236,72,153,.07),transparent 60%);background-attachment:fixed}html[data-theme=dark] body{background-color:var(--surface)}.admin-body{background-color:var(--paper)}.site-header{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);box-shadow:0 1px #fff6 inset;position:sticky;top:0;z-index:60}.brand{font-weight:800;letter-spacing:-.01em}.brand-mark{background:var(--grad-main)!important;color:#fff!important;border-radius:12px!important;width:38px!important;height:38px!important;box-shadow:0 6px 16px #8b5cf659}.brand-mark .icon{width:22px;height:22px}.site-header nav a{padding:8px 14px;border-radius:999px;font-weight:600;color:var(--muted)}.site-header nav a:hover{background:var(--sage);color:var(--brand);text-decoration:none}.admin-heading{font-weight:700;color:var(--ink)!important;background:var(--grad-soft);padding:6px 14px;border-radius:999px;font-size:.82rem!important}.icon-button{border-radius:12px}.icon-button:hover{background:var(--sage);color:var(--brand)}.user-control{border-radius:999px;box-shadow:var(--shadow-sm)}.avatar{background:var(--grad-main)!important;color:#fff!important;font-weight:700}.dropdown-menu{border-radius:16px;box-shadow:var(--shadow-lg);border-color:var(--line)}button:not(.text-button):not(.icon-button):not(.user-control):not(.secondary),.button:not(.secondary){background:var(--grad-main);border:0;color:#fff;border-radius:12px;font-weight:600;box-shadow:0 6px 16px #0e9aa740;transition:transform .15s ease,box-shadow .15s ease,filter .15s}button:not(.text-button):not(.icon-button):not(.user-control):not(.secondary):hover,.button:not(.secondary):hover{transform:translateY(-1px);box-shadow:0 10px 22px #8b5cf64d;filter:none}.button.secondary,button.secondary,.secondary{background:var(--surface);color:var(--brand);border:1.5px solid color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:12px;font-weight:600}.button.secondary:hover,button.secondary:hover{background:var(--sage);text-decoration:none}html[data-theme=dark] button:not(.secondary):not(.text-button):not(.icon-button):not(.user-control),html[data-theme=dark] .button:not(.secondary){color:#fff}input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),select,textarea{border-radius:12px!important;border:1.5px solid var(--line)!important;background:var(--surface)!important;padding:10px 13px!important;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--c-violet)!important;box-shadow:0 0 0 4px #8b5cf626!important}input[type=checkbox],input[type=radio]{accent-color:var(--c-violet)}.admin-nav{background:color-mix(in srgb,var(--surface) 92%,transparent);border-inline-end:1px solid var(--line);padding:16px 14px}.nav-profile{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:14px;border-radius:16px;background:var(--grad-soft);border:1px solid var(--line)}.nav-profile .avatar{width:42px;height:42px;border-radius:14px;flex-shrink:0;font-size:1.1rem}.nav-profile strong{display:block;font-size:.88rem;line-height:1.3}.nav-profile small{display:inline-block;margin-top:3px;font-size:.7rem;font-weight:700;color:var(--c-violet);background:var(--surface);padding:1px 9px;border-radius:999px}.school-switcher{display:grid;gap:6px;border:0;padding:0 2px 14px}.school-switcher label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.72rem}.school-switcher .icon{width:15px;height:15px}.nav-group{margin-bottom:10px}.nav-group summary{font-size:.74rem!important;font-weight:800!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--ink)!important;padding:6px 8px!important;justify-content:flex-start!important;gap:10px;cursor:pointer}.nav-group summary>.icon:last-child{margin-inline-start:auto;opacity:.5}.nav-group-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}.nav-group-icon .icon{width:16px!important;height:16px!important;transform:none!important}.tone-teal .nav-group-icon{background:linear-gradient(135deg,var(--c-teal),var(--c-teal-2))}.tone-violet .nav-group-icon{background:linear-gradient(135deg,var(--c-violet),var(--c-violet-2))}.tone-pink .nav-group-icon{background:linear-gradient(135deg,var(--c-pink),var(--c-pink-2))}.tone-amber .nav-group-icon{background:linear-gradient(135deg,var(--c-amber),var(--c-amber-2))}.tone-blue .nav-group-icon{background:linear-gradient(135deg,var(--c-blue),var(--c-blue-2))}.tone-green .nav-group-icon{background:linear-gradient(135deg,var(--c-green),var(--c-green-2))}.admin-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 0;border-radius:12px;font-size:.86rem;color:var(--muted);font-weight:600;transition:background .15s,color .15s,transform .15s}.admin-nav a .icon{width:18px;height:18px}.admin-nav a:hover{background:var(--sage);color:var(--ink);text-decoration:none;transform:translate(-2px)}html[dir=ltr] .admin-nav a:hover{transform:translate(2px)}.admin-nav a[aria-current=page]{background:var(--grad-main)!important;color:#fff!important;box-shadow:0 6px 16px #8b5cf647}.admin-nav a[aria-current=page] .icon{color:#fff}.nav-group:not(.nav-system) a{margin-inline-start:12px}.nav-divider{display:flex;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-size:.76rem!important;color:var(--ink)!important;font-weight:800!important}.nav-divider .icon{width:16px;height:16px;color:var(--c-violet)}.nav-system summary{font-weight:700!important;color:var(--muted)!important}.nav-logout{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}.nav-logout button{display:flex;align-items:center;gap:10px;color:var(--c-pink)!important;font-weight:700;padding:9px 12px}.admin-content{padding:28px 32px}.page-head h1,.admin-content>h1{font-weight:800;letter-spacing:-.01em;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}.page-head{padding:22px 24px;border-radius:var(--radius);background:var(--grad-soft);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.eyebrow{color:var(--c-violet)}.card,.settings-card,.feature-grid article,.auth-card,.toolbar,.table-wrap,.stat,.role-card,.panel{border-radius:var(--radius)!important;box-shadow:var(--shadow-sm);border-color:var(--line)!important}.card,.stat,.role-card{transition:transform .2s ease,box-shadow .2s ease}.card:hover,.stat:hover,.role-card:hover{box-shadow:var(--shadow-md)}a.stat:hover,.role-card:hover{transform:translateY(-3px)}.card h2 .icon{width:30px;height:30px;padding:6px;border-radius:10px;color:#fff;background:var(--grad-main)}.table-wrap{overflow:auto;background:var(--surface)}.table-wrap thead th{background:var(--grad-soft)!important;color:var(--ink)!important;font-weight:800;font-size:.74rem;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line)}.table-wrap tbody tr{transition:background .12s}.table-wrap tbody tr:hover td{background:color-mix(in srgb,var(--c-violet) 5%,transparent)}.table-wrap td{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.stat .stat-icon{border-radius:14px;width:48px;height:48px}.stat strong{font-weight:800}.stat-grid .stat:nth-child(6n+1) .stat-icon:not([style]){background:linear-gradient(135deg,var(--c-blue),var(--c-blue-2));color:#fff}.stat.tone-present .stat-icon{background:linear-gradient(135deg,var(--c-blue),var(--c-blue-2));color:#fff}.stat.tone-absent .stat-icon{background:linear-gradient(135deg,var(--c-pink),var(--c-pink-2));color:#fff}.stat.tone-late .stat-icon{background:linear-gradient(135deg,var(--c-amber),var(--c-amber-2));color:#fff}.stat.tone-excused .stat-icon{background:linear-gradient(135deg,var(--c-green),var(--c-green-2));color:#fff}.stat.tone-violet .stat-icon{background:linear-gradient(135deg,var(--c-violet),var(--c-violet-2));color:#fff}.stat.tone-teal .stat-icon{background:linear-gradient(135deg,var(--c-teal),var(--c-teal-2));color:#fff}.role-card{border:0!important}.role-card .role-icon{box-shadow:var(--shadow-sm);color:var(--c-violet)}.pill{font-weight:700}.banner{border:1px solid var(--line);box-shadow:var(--shadow-sm)}.quick-actions a{border-radius:16px;background:var(--surface);transition:transform .15s,box-shadow .15s}.quick-actions a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.quick-actions a:nth-child(6n+1) .icon{color:var(--c-teal)}.quick-actions a:nth-child(6n+2) .icon{color:var(--c-violet)}.quick-actions a:nth-child(6n+3) .icon{color:var(--c-pink)}.quick-actions a:nth-child(6n+4) .icon{color:var(--c-amber)}.quick-actions a:nth-child(6n+5) .icon{color:var(--c-blue)}.quick-actions a:nth-child(6n+6) .icon{color:var(--c-green)}.list li{border-radius:14px}.seg{border-radius:12px;background:var(--surface)}.contact-buttons a{border-radius:10px;font-weight:600}.contact-buttons .wa{background:#e9f9ef}html[data-theme=dark] .contact-buttons .wa{background:#12301f}.status,.errors{border-radius:14px!important;padding:14px 18px!important;box-shadow:var(--shadow-sm);font-weight:600}.status{background:linear-gradient(135deg,#dcfce7,#e0f2fe)!important;color:#065f46!important;border:1px solid #bbf7d0}.errors{background:linear-gradient(135deg,#ffe4ec,#fff1e6)!important;color:#9f1239!important;border:1px solid #fecdd3}html[data-theme=dark] .status{background:#123026!important;color:#a7f3d0!important;border-color:#14532d}html[data-theme=dark] .errors{background:#3a1424!important;color:#fecdd3!important;border-color:#7f1d1d}nav[role=navigation] span[aria-current=page]>span{background:var(--grad-main)!important;color:#fff!important;border-color:transparent!important}nav[role=navigation] a,nav[role=navigation] span>span{border-radius:10px!important}.home-hero h1{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.home-art{background:var(--grad-soft)!important;box-shadow:var(--shadow-lg);border:1px solid var(--line);position:relative;overflow:hidden}.home-art:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.25),transparent 70%);top:-60px;inset-inline-end:-60px}.home-art .stat{position:relative;background:color-mix(in srgb,var(--surface) 88%,transparent)!important}.auth-card{background:var(--surface);border:1px solid var(--line);padding:34px;box-shadow:var(--shadow-lg)!important;position:relative;overflow:hidden}.auth-card:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--c-teal),var(--c-violet),var(--c-pink),var(--c-amber))}.auth-card h1{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.reading{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:var(--shadow-md)}.reading h1{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.reading h2{color:var(--c-violet);font-weight:800}.reading h3{color:var(--c-teal);font-weight:800;margin-top:26px}.reading strong{color:var(--ink)}.reading ul{padding-inline-start:20px}.reading li::marker{color:var(--c-pink)}footer{border-radius:24px 24px 0 0;background:var(--grad-soft)!important;border-top:1px solid var(--line);padding:28px 32px!important}.table-wrap .contact-buttons{flex-wrap:nowrap}.brand-img{width:40px;height:40px;border-radius:12px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(139,92,246,.25))}.home-visual{position:relative}.home-visual:before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.18),rgba(14,154,167,.08) 55%,transparent 72%);filter:blur(10px)}.home-visual img{position:relative;width:100%;height:auto;display:block;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media(prefers-reduced-motion:reduce){.home-visual img,.notice{animation:none}}.home-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:10px 0 50px}.home-features .stat{align-items:flex-start}.home-features .stat strong{font-size:1rem;margin-bottom:4px}.home-section{text-align:center;margin-bottom:6px}.home-section .eyebrow{justify-content:center}.home-section h2{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.home-roles{margin-top:18px}.role-img{width:80px;height:80px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 8px 14px rgba(76,61,140,.18));transition:transform .2s}.role-card:hover .role-img{transform:scale(1.08) rotate(-3deg)}.home-roles .role-img{width:96px;height:96px}.home-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:20px 0 60px;padding:34px;border-radius:28px;background:var(--grad-soft);border:1px solid var(--line)}.home-split img{width:100%;height:auto;max-width:520px;justify-self:center}.home-split h2{font-weight:800}.home-split.reverse img{order:2}.auth-split{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:center;max-width:1180px;margin:40px auto}.auth-split .auth-card{margin:0}.auth-visual{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--grad-soft)}.auth-visual img{width:100%;height:100%;max-height:640px;object-fit:cover;display:block}.hero-decoration{position:absolute!important;inset-inline-start:28%;top:50%;transform:translateY(-50%);width:170px;height:auto;opacity:.95;pointer-events:none;z-index:0!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15))}.page-head{position:relative;overflow:hidden}.page-illustration{width:110px;height:auto;max-height:96px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 8px 14px rgba(76,61,140,.15))}.page-head:has(.page-illustration){justify-content:flex-start;align-items:center}.page-head:has(.page-illustration)>.page-actions{margin-inline-start:auto}.illustrated-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;text-align:center}.illustrated-state img{width:150px;height:auto}.illustrated-state p{color:var(--ink);font-weight:700;margin:0}.empty .icon{display:none}.empty:before{content:"";display:block;width:110px;height:110px;margin:0 auto 8px;background:url(/images/sized/empty-state.webp) center/contain no-repeat}.empty-notifications:before{background-image:url(/images/sized/no-notifications.webp)}.notification-empty.empty-notifications:before{content:"";display:block;width:90px;height:90px;margin:0 auto;background:url(/images/sized/no-notifications.webp) center/contain no-repeat}.notification-empty.empty-notifications .icon{display:none}.page-banner{max-width:640px;margin:30px auto -36px;padding:0 16px;position:relative;z-index:1}.page-banner img{width:100%;height:240px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-lg);display:block}.page-banner+.reading{padding-top:64px}@media(max-width:1100px){.home-features{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-split{grid-template-columns:1fr}.auth-visual,.hero-decoration{display:none}}@media(max-width:760px){.home-split{grid-template-columns:1fr;gap:20px;padding:22px}.home-split.reverse img{order:0}.page-illustration{display:none}.home-features{grid-template-columns:1fr}}.notice{position:relative;display:flex!important;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:14px auto 0;max-width:1240px;width:calc(100% - 32px);padding:12px 56px 12px 20px;border-radius:18px;border:0!important;color:#fff!important;font-weight:600;font-size:.92rem;line-height:1.6;text-align:center;background:linear-gradient(110deg,#0e9aa7,#6d5df5,#d94fa0)!important;box-shadow:0 10px 28px #6d5df547;overflow:hidden;animation:notice-in .5s ease both}html[dir=rtl] .notice{padding:12px 20px 12px 56px}.notice:before{content:"📣";display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:12px;background:#fff3;font-size:1.05rem}.notice:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#ffffff1a;top:-110px;inset-inline-start:12%;pointer-events:none}.notice a{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:#fff;color:#6d5df5!important;font-weight:800;font-size:.82rem;text-decoration:none!important;box-shadow:0 4px 12px #0000001f;transition:transform .15s}.notice a:hover{transform:translateY(-1px)}.notice button{position:absolute!important;inset-inline-end:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0!important;border-radius:50%!important;background:#fff3!important;color:#fff!important;box-shadow:none!important;display:grid;place-items:center}.notice button:hover{background:#ffffff52!important;transform:translateY(-50%)!important}.notice button .icon{width:16px;height:16px}@keyframes notice-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:640px){.notice{font-size:.84rem;padding:12px 48px 12px 14px}html[dir=rtl] .notice{padding:12px 14px 12px 48px}.notice:before{display:none}}.hero-panel{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:28px 30px;margin-bottom:20px;border-radius:24px;color:#fff;background:linear-gradient(120deg,#0e9aa7,#6d5df5 55%,#d94fa0);box-shadow:var(--shadow-lg)}.hero-panel:before,.hero-panel:after{content:"";position:absolute;border-radius:50%;background:#ffffff1f}.hero-panel:before{width:260px;height:260px;top:-120px;inset-inline-end:8%}.hero-panel:after{width:160px;height:160px;bottom:-80px;inset-inline-start:30%}.hero-panel>*{position:relative;z-index:1}.hero-panel h1{color:#fff;margin:10px 0 4px;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}.hero-panel p,.hero-panel .date-greg{color:#ffffffe0!important;margin:0}.hero-chip{display:inline-flex;align-items:center;gap:7px;background:#fff3;padding:5px 13px;border-radius:999px;font-size:.78rem;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hero-chip .icon{width:16px;height:16px}.hero-panel-actions{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.hero-panel-actions .field{color:#ffffffe6}.hero-panel-actions input{background:#fffffff2!important;border-color:transparent!important;color:#1e293b}.hero-panel .hijri-hint{color:#ffffffe6}.button.light{background:#fff!important;color:#6d5df5!important;box-shadow:0 8px 20px #00000026!important}button.stat.school-pick{width:100%;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-sm)!important;justify-content:flex-start;text-align:start;font-weight:400;cursor:pointer}button.stat.school-pick strong{display:block;font-size:1rem}button.stat.school-pick span span{display:block;font-size:.78rem;color:var(--muted)}.date-dual{display:inline-flex;flex-direction:column;line-height:1.35;white-space:nowrap;vertical-align:middle}.date-hijri{font-weight:700;color:inherit}.date-greg{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.field-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;white-space:nowrap}.hijri-badge{font-size:.68rem;font-weight:700;color:var(--c-violet);background:color-mix(in srgb,var(--c-violet) 10%,transparent);padding:1px 8px;border-radius:999px;overflow:hidden;text-overflow:ellipsis}.hero-panel .hijri-badge{color:#fff;background:#fff3}@media(max-width:760px){.admin-content{padding:18px 14px}.hero-panel{padding:22px 18px}.page-head{padding:16px}.nav-group:not(.nav-system) a{margin-inline-start:0}}