:root{color-scheme:light;--bg: #f3f5f4;--surface: #ffffff;--ink: #0e2a30;--ink-2: #4a6168;--line: #d5dcdb;--brand: #0b6f7f;--brand-ink: #ffffff;--brand-soft: #ddf0f1;--brand-soft-ink: #0a5562;--gold: #b8842c;--gold-soft: #fbefd6;--gold-ink: #6b4a0e;--glow: #12a86b;--warn-bg: #fdeccc;--warn-ink: #6b4300;--danger: #b3261e;--series-1: #2a78d6;--series-2: #eb6834;--surface-2: color-mix(in srgb, var(--line) 40%, var(--surface));--grid: color-mix(in srgb, var(--line) 60%, var(--surface));--orn: .06;--fs: 17px;--radius: 16px;--tap: 46px;--shadow: 0 1px 2px rgba(23, 33, 29, .06), 0 4px 14px rgba(23, 33, 29, .05)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--bg: #0c1f23;--surface: #14313a;--ink: #eaf4f4;--ink-2: #a9c3c6;--line: #27505a;--brand: #2bb5c4;--brand-ink: #04252b;--brand-soft: #1d4650;--brand-soft-ink: #bdebf0;--gold: #e0b25a;--gold-soft: #3a2e12;--gold-ink: #f5dda6;--glow: #3be39a;--warn-bg: #4a3608;--warn-ink: #ffdf9c;--danger: #ff8a80;--series-1: #3987e5;--series-2: #d95926;--shadow: none}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs)/1.5 system-ui,-apple-system,"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",Tahoma,sans-serif}h1{font-size:1.5rem;line-height:1.25;margin:0;text-wrap:balance}h2{font-size:1.15rem;line-height:1.3;margin:0}p{margin:0}a{color:var(--brand)}small{font-size:.55em;font-weight:500;color:var(--ink-2)}:focus-visible{outline:3px solid var(--series-1);outline-offset:2px}[dir=rtl] .flip-rtl{display:inline-block;transform:scaleX(-1)}.muted{color:var(--ink-2)}.center{text-align:center}.error{color:var(--danger)}.stack{display:flex;flex-direction:column;gap:16px}.row-between{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);text-decoration:none;min-width:0}.brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-mark{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font-size:1.2rem;line-height:1}.topbar-title{color:var(--ink-2);margin-inline-start:auto}.nav{display:flex;gap:4px;margin-inline:auto}.nav a{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:600}.nav a[aria-current=page]{background:var(--brand-soft);color:var(--brand-soft-ink)}.lang-select{min-height:40px;padding:0 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}.page{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:20px 16px 48px}.page.narrow{max-width:440px;padding-top:48px}@media (max-width: 760px){.nav{position:fixed;inset-inline:0;bottom:0;z-index:5;margin:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}.nav a{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:.78rem;justify-content:center}.topbar .lang-select{margin-inline-start:auto}.topbar-title{display:none}.page{padding-bottom:110px}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card>h2{margin-bottom:12px}.notice{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:28px 18px;margin:16px;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;gap:14px;align-items:center}.stack>.notice{margin:0}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:600;background:var(--surface-2);color:var(--ink-2)}.chip[class*=level-]{background:var(--brand-soft);color:var(--brand-soft-ink)}.chip.warn,.chip.att-absent{background:var(--warn-bg);color:var(--warn-ink)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}.btn:hover{background:var(--surface-2)}.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.btn.primary:hover{filter:brightness(1.08)}.btn.danger{color:var(--danger);border-color:currentColor;margin-inline-start:auto}.btn.link{border:0;background:none;color:var(--brand)}.btn:disabled{opacity:.5;cursor:default}.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.back{font-weight:600;text-decoration:none}.field{display:flex;flex-direction:column;gap:4px;min-width:0}.field>span{font-size:.9rem;font-weight:600;color:var(--ink-2)}.field.grow{flex:1 1 220px}input[type=text],input[type=email],input[type=password],input[type=number],input[type=date]{min-height:var(--tap);width:100%;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}input::placeholder{color:var(--ink-2);opacity:.75}.check{display:flex;align-items:center;gap:12px;min-height:var(--tap);cursor:pointer}.check input{width:22px;height:22px;accent-color:var(--brand)}.form{max-width:560px;margin-inline:auto}.segmented{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);max-width:100%}.segmented.wrap{flex-wrap:wrap}.segmented button{flex:1;min-height:40px;padding:0 14px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.segmented button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink)}.segmented.attendance{display:flex}.day-bar{display:flex;align-items:center;justify-content:center;gap:8px}.day-label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:360px;font-weight:700;text-align:center}.day-label input{max-width:200px}.icon-btn{width:var(--tap);height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}.icon-btn:disabled{opacity:.4;cursor:default}.student-card{display:flex;flex-direction:column;gap:14px;border-inline-start:5px solid var(--line)}.student-card.is-recorded{border-inline-start-color:var(--brand)}.student-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.student-head h2{margin-bottom:4px}.save-state{font-size:.9rem;font-weight:600;color:var(--brand);white-space:nowrap}.save-state.saving{color:var(--ink-2)}.save-state.failed{color:var(--danger);white-space:normal}.part{border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px;margin:0;min-width:0;display:flex;flex-direction:column;gap:12px}.part legend{padding:0 6px;font-weight:700}.part-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.stepper{display:flex;gap:4px}.stepper button{width:var(--tap);height:var(--tap);flex:none;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}.stepper input{width:76px;text-align:center;padding:0 4px}.grade-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.grade-picker button{min-height:58px;padding:4px 2px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}.grade-picker button b{font-size:1.15rem}.grade-picker button span{font-size:.74rem;color:var(--ink-2);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;text-align:center;max-width:100%}@media (max-width: 480px){.card{padding:14px}.part{padding:10px 10px 12px}.grade-picker{gap:4px}.segmented button{padding:0 6px;min-width:0;font-size:.92rem}.grade-picker button span{font-size:.66rem;letter-spacing:-.01em}}.grade-picker button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.grade-picker button[aria-pressed=true] span{color:inherit}.student-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.student-row.is-inactive{opacity:.7}.report-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}.tile-label{font-size:.9rem;font-weight:600;color:var(--ink-2)}.tile-value{font-size:2rem;font-weight:700;line-height:1.2}.tile-sub{font-size:.85rem;color:var(--ink-2)}.chart{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}.chart figcaption{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;margin-bottom:10px}.legend{display:flex;gap:14px;font-size:.9rem;color:var(--ink-2)}.legend span,.tooltip div{display:flex;align-items:center;gap:6px}.swatch{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}.swatch.s1{background:var(--series-1)}.swatch.s2{background:var(--series-2)}.chart-body{position:relative}.chart svg{display:block;width:100%;height:auto}.chart svg rect:focus{outline:none}.chart path.s1{fill:var(--series-1)}.chart path.s2{fill:var(--series-2)}.chart .grid{stroke:var(--grid);stroke-width:1}.chart .axis{stroke:var(--line);stroke-width:1.5}.chart .tick{fill:var(--ink-2);font-size:12px}.chart .hover-band{fill:var(--surface-2)}.tooltip{position:absolute;top:0;transform:translate(-50%);pointer-events:none;white-space:nowrap;background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 10px;font-size:.85rem}.tooltip-title{font-weight:700;margin-bottom:2px}.grade-bars{display:flex;flex-direction:column;gap:10px}.grade-row{display:grid;grid-template-columns:minmax(96px,34%) 1fr 2.5ch;gap:10px;align-items:center;font-size:.95rem}.grade-track{height:14px;border-radius:4px;background:var(--surface-2);overflow:hidden;display:flex}.grade-fill{background:var(--series-1);border-radius:0 4px 4px 0}[dir=rtl] .grade-fill{border-radius:4px 0 0 4px}.grade-count{font-weight:700;text-align:end;font-variant-numeric:tabular-nums}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.95rem}th,td{padding:10px 8px;text-align:start;border-top:1px solid var(--line);vertical-align:top}thead th{border-top:0;font-size:.85rem;color:var(--ink-2);white-space:nowrap}tbody th{font-weight:600}.num{text-align:end;font-variant-numeric:tabular-nums}.sessions{list-style:none;margin:0;padding:0}.sessions li{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.sessions li:first-child{border-top:0;padding-top:0}.session-date{display:flex;gap:8px;align-items:center}.session-lines{display:flex;flex-direction:column;gap:4px}.session-line{display:grid;grid-template-columns:minmax(84px,22%) 1fr auto;gap:10px;align-items:baseline}.grade-badge{font-size:.9rem;white-space:nowrap;background:var(--brand-soft);color:var(--brand-soft-ink);border-radius:8px;padding:1px 8px}.session-note{color:var(--ink-2);font-style:italic}@media (prefers-reduced-motion: no-preference){.btn,.segmented button,.grade-picker button{transition:background-color .12s,color .12s}}@media print{.topbar,.segmented,.back,.ornament,.hero-callig{display:none}body{background:#fff}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.rosette-hole{fill:var(--brand)}.rosette-light{fill:var(--glow)}.ornament{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--brand)}.ornament:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;opacity:var(--orn);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23000' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 32h8M56 32h8M32 0v8M32 56v8'/%3E%3Ccircle r='8'/%3E%3Ccircle cx='64' r='8'/%3E%3Ccircle cy='64' r='8'/%3E%3Ccircle cx='64' cy='64' r='8'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23000' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 32h8M56 32h8M32 0v8M32 56v8'/%3E%3Ccircle r='8'/%3E%3Ccircle cx='64' r='8'/%3E%3Ccircle cy='64' r='8'/%3E%3Ccircle cx='64' cy='64' r='8'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat}.ornament-word{position:absolute;bottom:-.25em;inset-inline-start:3vw;font:700 clamp(140px,30vw,300px)/1 "Aref Ruqaa","Amiri",serif;opacity:calc(var(--orn) * 1.6)}.hero{position:relative;overflow:hidden;background:var(--brand);color:var(--brand-ink);text-align:center;padding:20px 16px 0;border-radius:20px}.hero>:not(.hero-callig){position:relative}.hero-callig{position:absolute;top:0;right:0;bottom:30px;left:0;display:flex;align-items:center;justify-content:center;font:700 clamp(30px,7.5vw,76px)/1 "Aref Ruqaa","Amiri",serif;white-space:nowrap;opacity:calc(var(--orn) * 1.8);pointer-events:none}.hero-mark{display:inline-flex;color:var(--brand-ink)}.hero-greet{opacity:.92;font-size:.95rem;margin-top:4px}.hero-title{font-size:1.4rem;color:inherit}.hero-date{opacity:.92;font-size:.9rem;padding-bottom:14px}.hero-arch{display:block;width:calc(100% + 32px);height:30px;margin:0 -16px}.arch-fill{fill:var(--bg)}.arch-line{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}@media (max-width: 760px){.hero{margin:-20px -16px 0;border-radius:0}}.ring-tile{display:flex;align-items:center;gap:12px}.ring{flex:none}.ring-track{stroke:var(--brand-soft)}.ring-bar{stroke:var(--brand)}.ring.gold .ring-track{stroke:var(--gold-soft)}.ring.gold .ring-bar{stroke:var(--gold)}.ring text{fill:var(--ink);font-size:14px;font-weight:700}.tile.gold{background:var(--gold-soft);border-color:var(--gold)}.tile.gold .tile-label,.tile.gold .tile-value,.tile.gold .tile-sub,.tile.gold small{color:var(--gold-ink)}.letters-block{display:flex;flex-direction:column;gap:6px}.letters-head{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.9rem;font-weight:600;color:var(--ink-2)}.letters-head .muted{font-weight:400}.letters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.letter{min-height:48px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 1.55rem/1 Amiri,Noto Naskh Arabic,serif;cursor:pointer}.letter.known{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-soft-ink)}.letter[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.stack-sm{display:flex;flex-direction:column;gap:8px}.now-card{border-top:4px solid var(--brand)}.next-card{border-top:4px solid var(--gold);background:color-mix(in srgb,var(--gold-soft) 55%,var(--surface))}.next-item{display:flex;flex-direction:column;gap:2px}.next-item b{font-size:1.15rem;line-height:1.35}.small{font-size:.85rem}.next-part{border-color:var(--gold);border-style:dashed}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.theme-btn{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-align:start}.theme-btn[aria-pressed=true]{border:2px solid var(--brand);background:var(--brand-soft);color:var(--brand-soft-ink)}.theme-swatch{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--gold)}input[type=color]{width:72px;height:var(--tap);padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}