/* إرتــقــاء — one stylesheet, organised by layer:
   1 fonts · 2 tokens · 3 base · 4 shell · 5 controls · 6 surfaces · 7 lists & tables · 8 pages · 9 motion · 10 responsive.
   Theme: colours are written as var(--role,<light value>), so light mode keeps its literal palette and dark mode
   only defines the roles in :root[data-theme=dark] (tests/test_theme.py checks). Non-colour tokens (elevation,
   chevron, motion) are defined for both modes. The banner, login story and video frame are ink in both modes. */

/* 1 ─ Fonts */
@font-face{font-family:Arabic;src:url("../vendor/arabic-400.24f329fc6c2b.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Arabic;src:url("../vendor/arabic-700.e2e732b086bd.woff2") format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* 2 ─ Tokens */
:root{color-scheme:light;
--ink:#183b3c;--ink-dark:#112d31;--accent:#d3ee85;--radius:22px;--paper:#f7f8f5;--line:#e1e8e0;--muted:#5d6d65;--danger:#a23c3c;
--elev-1:0 1px 2px #183b3c0a,0 8px 24px -14px #183b3c24;
--elev-2:0 2px 4px #183b3c0d,0 18px 36px -18px #183b3c3d;
--elev-3:0 24px 60px -24px #183b3c59,0 4px 12px #183b3c14;
--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183b3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--ease-out:cubic-bezier(.2,.8,.2,1);--t-fast:140ms;--t-med:220ms;--t-slow:320ms;
font-family:Arabic,Tahoma,Arial,sans-serif;color:var(--text,#183b3c);background:var(--paper);font-synthesis:none}
:root[data-theme=dark]{color-scheme:dark;
--paper:#0e1716;--surface:#152220;--surface-2:#1a2826;--surface-3:#223330;--field:#101b1a;--stage:#0a1211;
--line:#283b38;--line-soft:#283b38;--line-2:#3b544e;--line-accent:#87a45b;--line-success:#3e5c37;--line-danger:#76423b;
--text:#e5eee9;--text-2:#bccac3;--text-3:#a8b7af;--text-4:#869890;--muted:#a8b7af;--link:#c2dc8f;
--danger:#f0968c;--danger-text:#f4aa9f;--gold-text:#e8c977;--gold-bg:#5f4e17;--gold-ink:#f6e2a0;--gold-soft:#24231a;--gold-line:#4b4224;
--strong:#24524f;--strong-hover:#2c615d;--progress:#a7c570;--focus:#c5e090;
--tint-sage:#24361f;--on-sage:#bed791;--tint-peach:#3a2a1d;--on-peach:#edc095;--tint-lavender:#2b2842;--on-lavender:#c9c0f2;
--tint-blue:#1d303e;--on-blue:#a6cbe3;--tint-danger:#3c211e;--tint-warn:#392c1b;--tint-success:#1f3521;
--switch-track:#24524f;--switch-ring:#3d6d68;--switch-thumb:#e5eee9;--scrim:#000000a6;--topbar:#152220e6;
--elev-1:0 1px 2px #00000040,0 8px 24px -14px #00000066;
--elev-2:0 2px 4px #00000040,0 18px 36px -18px #00000080;
--elev-3:0 24px 60px -24px #000000b3,0 4px 12px #00000059;
--sb-thumb:#5f7f77;--sb-thumb-hover:#87a45b;--sb-thumb-active:#a7c570;--sb-track:#121e1c;
--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5eee9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* Accent-derived tokens live on body, where the configurable --accent is set inline. */
body{--ring:color-mix(in srgb,var(--accent) 55%,transparent);--accent-soft:color-mix(in srgb,var(--accent) 38%,var(--surface,#fff))}

/* 3 ─ Base */
*{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;font-size:14px;line-height:1.85;background:var(--paper);color:var(--text,#183b3c);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus,#597c3b);outline-offset:3px}
/* Scrollbars: thin, a rounded identity-coloured handle on a quiet track, for the page and every inner scroll area (sidebar, tables,
   reader, text fields). Colours are the --sb-* roles (dark values only in the dark block). Touch devices keep their floating bars
   (coloured by the standard pair below), and scrolling itself is untouched. Chromium and Safari on desktop (fine pointer) draw ::-webkit-scrollbar, which allows the
   rounded handle and hover; other engines (Firefox) get the standard properties. Chromium ignores the pseudo-elements once
   scrollbar-color is set, so the standard pair is kept away from it. */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb,#6f8d79) var(--sb-track,#edf1e9)}}
/* Touch (iOS, Android): the standard pair on every scroll area, with no visible track so nothing covers content. Safari/iOS honour
   scrollbar-width from 18.2 and scrollbar-color from 26.2 (older versions simply ignore these lines); whether the system's floating
   bar adopts the colour must be seen on a real device. No ::-webkit-scrollbar here: on touch it would replace the floating bar with a
   permanent one. */
@media(hover:none),(pointer:coarse){*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb,#6f8d79) transparent}}
@media(hover:hover) and (pointer:fine){
@supports selector(::-webkit-scrollbar){
*::-webkit-scrollbar{width:12px;height:12px;background:var(--sb-track,#edf1e9)}
*::-webkit-scrollbar-track{background:var(--sb-track,#edf1e9)}
*::-webkit-scrollbar-corner{background:var(--sb-track,#edf1e9)}
*::-webkit-scrollbar-thumb{background:var(--sb-thumb,#6f8d79);border:3px solid transparent;background-clip:padding-box;border-radius:99px;min-height:44px;min-width:44px}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover,#183b3c);background-clip:padding-box;border-width:2px}
*::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-active,#112d31);background-clip:padding-box;border-width:2px}
}}
img{max-width:100%;display:block}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3,p{margin:0}
h1{font-size:32px;line-height:1.5;font-weight:700}
h2{font-size:20px;line-height:1.6;font-weight:700}
h3{font-size:16px;line-height:1.7;font-weight:700}
small{font-size:12px}
b,strong{font-weight:700}
::selection{background:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink-dark)}
h1,h2,h3,.brand strong,.account strong,.student-name,.prose{overflow-wrap:anywhere}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.center{text-align:center}
.full{width:100%}
.wide{grid-column:1/-1}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}
.skip{position:fixed;top:-100px;right:20px;z-index:100;background:var(--accent);color:var(--on-accent,var(--ink));padding:10px 24px;border-radius:0 0 12px 12px;font-weight:700}
.skip:focus{top:0}

/* 4 ─ Shell: sidebar, topbar, main, footer */
.workspace{margin-right:248px;min-height:100dvh;display:flex;flex-direction:column}
.workspace>.main{flex:1}
.main{width:100%;max-width:1440px;margin:auto;padding:32px 40px 48px;min-width:0}
.sidebar{position:fixed;right:0;top:0;z-index:40;width:248px;height:100dvh;display:flex;flex-direction:column;padding:26px 16px 16px;overflow-y:auto;background:var(--surface,#fff);border-left:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px 24px}
.brand>span:last-child{min-width:0}
.brand strong{display:block;font-size:23px;line-height:1.4;letter-spacing:-1px;white-space:nowrap}
.brand small{display:block;margin-top:2px;font-size:12px;line-height:1.7;color:var(--text-3,#5d6d65)}
.logo{width:48px;height:48px;flex-shrink:0;transition:transform var(--t-med) var(--ease-out)}
.logo img{width:48px;height:48px;object-fit:contain}
@media(hover:hover){.brand:hover .logo{transform:translateY(-2px) rotate(-3deg)}}
.nav-label{display:block;margin:18px 14px 6px;font-size:12px;font-weight:700;color:var(--text-3,#5d6d65)}
.sidebar nav{display:flex;flex-direction:column;gap:3px}
.sidebar nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 14px;border-radius:12px;font-size:14px;line-height:1.6;color:var(--text-2,#4c5d55);transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.sidebar nav svg{width:19px;height:19px;transition:transform var(--t-med) var(--ease-out)}
@media(hover:hover){.sidebar nav a:hover{background:var(--surface-2,#f6f8f2);color:var(--text,#183b3c)}}
@media(hover:hover){.sidebar nav a:hover svg{transform:translateX(-2px)}}
.sidebar nav a:active{background:var(--surface-3,#eef3e8)}
.sidebar nav a.active{background:var(--strong,#183b3c);color:#fff;font-weight:700;box-shadow:var(--elev-1)}
.sidebar nav a.active svg{color:var(--accent-on-dark,var(--accent))}
/* The active marker echoes the strokes of the logo: a short rounded lime stroke at the inline start. */
.sidebar nav a.active::before{content:'';position:absolute;inset-inline-start:5px;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:4px;background:var(--accent-on-dark,var(--accent));transform-origin:50% 100%;animation:nav-mark var(--t-slow) var(--ease-out) both}
.sidebar-bottom{margin-top:auto;padding-top:28px}
.side-note{position:relative;margin-bottom:16px;padding:18px 18px 12px;border:1px solid var(--line-soft,#e8ede6);border-radius:16px;background:var(--surface-2,#f6f8f2)}
.side-note p{margin-inline-end:28px;font-size:13px;line-height:1.9;color:var(--text-2,#4c5d55)}
.side-note p strong{color:var(--text,#183b3c)}
.side-note a{display:inline-flex;align-items:center;min-height:32px;margin-top:6px;font-size:13px;font-weight:700;color:var(--link,#536d27);text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color var(--t-fast)}
@media(hover:hover){.side-note a:hover{text-decoration-color:currentColor}}
.tiny-star{position:absolute;left:16px;top:14px;font-size:20px;color:var(--link,#536d27)}
.account{display:flex;align-items:center;gap:10px;margin:0 -6px;padding:12px 6px 4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;transition:background-color var(--t-fast)}
@media(hover:hover){.account:hover{background:var(--surface-2,#f6f8f2)}}
.account>span:nth-child(2){min-width:0}
.account strong{display:block;font-size:13px}
.account small{display:block;font-size:12px;color:var(--text-3,#5d6d65)}
.chevron{margin-inline-start:auto;color:var(--text-3,#5d6d65)}
.sidebar-close{display:none}
.nav-shade{display:none}
.topbar{position:sticky;top:0;z-index:25;flex-shrink:0;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 40px;background:var(--topbar,#ffffffe0);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.breadcrumb{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;color:var(--text-3,#5d6d65)}
.breadcrumb b{font-size:13px;font-weight:700;color:var(--text,#183b3c);overflow-wrap:anywhere}
.top-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:12px;color:var(--text-2,#4c5d55);transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
@media(hover:hover){.icon-button:hover{background:var(--surface-3,#eef3e8);color:var(--text,#183b3c)}}
.icon-button:active{transform:scale(.94)}
.icon-button svg{width:20px;height:20px}
.mobile-brand{display:none}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:18px 40px 24px;border-top:1px solid var(--line);font-size:12px;line-height:1.9;color:var(--text-3,#5d6d65)}
.footer a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:var(--link,#536d27);text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color var(--t-fast)}
@media(hover:hover){.footer a:hover{text-decoration-color:currentColor}}

/* PWA shell. Safe areas (viewport-fit=cover): insets are physical, so the notch side is padded where it is; they are 0
   outside notched landscape and the home indicator. The bell lists notifications; its count is the server's unread number. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sidebar{border-right:env(safe-area-inset-right) solid transparent;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.footer{padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px))}
.bell{position:relative}
.bell.active{color:var(--text,#183b3c)}
.bell-count{position:absolute;top:4px;inset-inline-end:2px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;line-height:1}
.bell-count[hidden]{display:none}

/* 5 ─ Controls: buttons, links, forms, theme switch */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 20px;border:1px solid transparent;border-radius:12px;font-size:14px;font-weight:700;line-height:1.5;white-space:nowrap;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-med) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.button svg{width:18px;height:18px}
@media(hover:hover){.button:hover{box-shadow:var(--elev-1)}}
.button:active{transform:translateY(1px) scale(.98);box-shadow:none}
.button.primary{background:var(--strong,#183b3c);color:#fff}
@media(hover:hover){.button.primary:hover{background:var(--strong-hover,#24524f)}}
.button.secondary{background:var(--surface,#fff);border-color:var(--line-2,#d3ddd2);color:var(--text,#183b3c)}
@media(hover:hover){.button.secondary:hover{background:var(--surface-2,#f6f8f2);border-color:var(--line-accent,#9cb46a)}}
.button.lime{background:var(--accent);color:var(--on-accent,var(--ink-dark))}
@media(hover:hover){.button.lime:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}}
.button.danger{background:#ac4040;color:#fff}
@media(hover:hover){.button.danger:hover{background:#963636}}
.button.small-button{min-height:38px;padding:5px 14px;font-size:13px}
.text-link{display:inline-flex;align-items:center;min-height:32px;font-size:13px;font-weight:700;color:var(--link,#536d27);text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color var(--t-fast)}
@media(hover:hover){.text-link:hover{text-decoration-color:currentColor}}
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0 -12px 16px;padding:2px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--link,#536d27);transition:background-color var(--t-fast)}
@media(hover:hover){.back-link:hover{background:var(--surface-2,#f6f8f2)}}
.danger-link{display:inline-flex;align-items:center;min-height:36px;padding:4px 8px;border-radius:10px;font-size:13px;font-weight:700;color:var(--danger-text,#9a3b33);transition:background-color var(--t-fast)}
@media(hover:hover){.danger-link:hover{background:var(--tint-danger,#fbefec)}}
.actions,.inline-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.actions form{margin:0}
input:not([type=checkbox]):not([type=radio]),select,textarea{max-width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-2,#d3ddd2);border-radius:12px;background:var(--field,#fff);font-size:14px;transition:border-color var(--t-fast),box-shadow var(--t-med) var(--ease-out),background-color var(--t-fast)}
@media(hover:hover){input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--line-accent,#9cb46a)}}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:0;border-color:var(--focus,#597c3b);box-shadow:0 0 0 4px var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-left:40px;background-image:var(--chevron);background-repeat:no-repeat;background-position:left 14px center;background-size:16px;cursor:pointer}
textarea{width:100%;resize:vertical;line-height:1.9}
input[type=checkbox],input[type=radio]{width:24px;height:24px;margin:0;accent-color:var(--strong,#183b3c);cursor:pointer}
.form-panel{max-width:800px}
.form-stack{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field>span{font-size:13px;font-weight:700;line-height:1.8}
.field input,.field textarea,.field select,.filters input,.filters select{font-size:16px}
.field input:not([type=checkbox]):not([type=radio]){width:100%}
.field input[aria-invalid=true],.field textarea[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--danger)}
.field input[type=color]{width:100px;padding:4px;cursor:pointer}
.field input[type=file]{padding:8px;background:var(--surface-2,#f6f8f2);font-size:13px;cursor:pointer}
.field input[type=file]::file-selector-button{margin-left:12px;padding:6px 14px;border:0;border-radius:9px;background:var(--surface-3,#eef3e8);color:var(--text,#183b3c);font:inherit;font-weight:700;cursor:pointer;transition:background-color var(--t-fast)}
@media(hover:hover){.field input[type=file]:hover::file-selector-button{background:var(--line-2,#d3ddd2)}}
.required{color:var(--gold-text,#7d6416)}
.field-help{font-size:12px;line-height:1.9;color:var(--text-3,#5d6d65)}
.field-help ul{margin:4px 0 0;padding-inline-start:20px}
.field-errors{padding:8px 12px;border-inline-start:3px solid var(--danger);border-radius:10px;background:var(--tint-danger,#fbefec);font-size:13px;line-height:1.9;color:var(--danger-text,#9a3b33);animation:rise-in var(--t-med) var(--ease-out) both}
.field-errors ul{margin:0;padding-inline-start:20px}
.check-field{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 10px}
.check-field>label{grid-column:2;font-weight:400}
.check-field>input{grid-column:1;grid-row:1}
.check-field>.field-help,.check-field>.field-errors{grid-column:1/-1}
.field #id_permissions{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px;border:1px solid var(--line-soft,#e8ede6);border-radius:14px;background:var(--surface-2,#f6f8f2)}
.field #id_permissions label{display:flex;align-items:center;gap:10px;min-height:36px;font-weight:400}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;padding-top:20px;border-top:1px solid var(--line)}
.password-wrap{display:flex;align-items:stretch;gap:8px;min-width:0}
.password-wrap input{flex:1;min-width:0;width:0}
.password-toggle{flex-shrink:0;min-height:46px;padding:8px 14px;border:1px solid var(--line-2,#d3ddd2);border-radius:12px;background:var(--surface-2,#f6f8f2);font-size:13px;font-weight:700;transition:background-color var(--t-fast),border-color var(--t-fast)}
@media(hover:hover){.password-toggle:hover{background:var(--surface-3,#eef3e8);border-color:var(--line-accent,#9cb46a)}}
.filters{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:24px 0}
.filters .button{min-height:46px}
.search-box{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0 14px;border:1px solid var(--line-2,#d3ddd2);border-radius:12px;background:var(--field,#fff);transition:border-color var(--t-fast),box-shadow var(--t-med) var(--ease-out)}
@media(hover:hover){.search-box:hover{border-color:var(--line-accent,#9cb46a)}}
.search-box:focus-within{border-color:var(--focus,#597c3b);box-shadow:0 0 0 4px var(--ring)}
.search-box svg{width:18px;color:var(--text-3,#5d6d65)}
.search-box input:not([type=checkbox]){width:100%;min-width:0;min-height:44px;padding:10px 0;border:0;background:transparent}
.search-box input:not([type=checkbox]):focus{box-shadow:none}
.filters select{min-width:160px}
.theme-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding-inline:8px;border-radius:12px;color:inherit;transition:background-color var(--t-fast)}
@media(hover:hover){.theme-toggle:hover{background:var(--surface-2,#f6f8f2)}}
.theme-toggle:focus-visible{outline:3px solid var(--focus,#597c3b);outline-offset:2px}
.theme-toggle-label{font-size:13px;font-weight:700;white-space:nowrap}
.theme-toggle-track{position:relative;display:block;flex-shrink:0;width:48px;height:28px;border-radius:999px;background:var(--switch-track,#e3e9df);box-shadow:inset 0 0 0 1px var(--switch-ring,#d2dbcd);transition:background-color var(--t-med)}
.theme-toggle-track svg{position:absolute;top:7px;width:14px;height:14px;stroke-width:2}
.theme-toggle-sun{inset-inline-end:7px;color:#7a6a1e}
.theme-toggle-moon{inset-inline-start:7px;color:var(--accent-on-dark,var(--accent))}
.theme-toggle-thumb{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:var(--switch-thumb,#fff);box-shadow:0 1px 3px #183b3c40;transition:transform var(--t-med) var(--ease-out)}
.theme-toggle:active .theme-toggle-thumb{transform:scale(.9)}
/* RTL: the thumb travels toward the inline end, i.e. leftward. */
:root[data-theme=dark] .theme-toggle-thumb{transform:translateX(-20px)}
:root[data-theme=dark] .theme-toggle:active .theme-toggle-thumb{transform:translateX(-20px) scale(.9)}
.login-tools{position:absolute;top:12px;inset-inline-end:12px}

/* 6 ─ Surfaces: headings, panels, stats, cards, tags, messages */
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.page-heading>div{min-width:0}
.page-heading{--ph-size:clamp(26px,2.4vw,32px)}
.page-heading h1{font-size:var(--ph-size);line-height:1.5}
.page-heading h1 .title-icon{display:inline-block;width:.8em;height:.8em;margin-inline-end:.3em;vertical-align:-.08em;color:var(--link,#536d27);stroke-width:1.9}
.page-heading h1:has(.title-icon)+p{margin-inline-start:calc(var(--ph-size)*1.1)}
.page-heading p{margin-top:6px;font-size:14px;line-height:1.9;color:var(--muted)}
.page-heading .heading-actions{display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0}
.eyebrow{display:block;margin-bottom:4px;font-size:12px;font-weight:700;color:var(--link,#536d27)}
.wave{margin-inline-start:8px;font-size:.7em;vertical-align:.14em;color:var(--link,#536d27)}
.date-label{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface,#fff);font-size:13px;font-weight:700;color:var(--text-2,#4c5d55);white-space:nowrap}
.date-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--progress,#7f9d4a)}
.section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin:36px 0 16px}
.section-heading h2{font-size:20px}
.section-heading .eyebrow{margin-bottom:2px}
.section-heading>a{display:inline-flex;align-items:center;min-height:36px;margin-inline-end:-14px;padding:4px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--link,#536d27);transition:background-color var(--t-fast),color var(--t-fast)}
@media(hover:hover){.section-heading>a:hover{background:var(--surface-2,#f6f8f2);color:var(--text,#183b3c)}}
.panel>.section-heading:first-child{margin-top:0}
.section-gap{margin-top:24px}
.panel{min-width:0;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface,#fff);box-shadow:var(--elev-1)}
.panel>h2{margin-bottom:12px}
.two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.two-columns>*{min-width:0}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:32px;min-height:245px;padding:32px 40px;overflow:hidden;border-radius:24px;color:#fff;background:radial-gradient(circle at 14% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 34%),linear-gradient(118deg,#1d4847,var(--ink-dark) 72%);box-shadow:inset 0 0 0 1px #ffffff0f,0 14px 34px -18px #0e282bb3}
.hero>div:first-child{z-index:2;min-width:0}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;padding:4px 13px;border:1px solid #ffffff21;border-radius:999px;background:#ffffff0b;font-size:12px;font-weight:700;color:#d3e1db}
.hero-kicker span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero h2{font-size:clamp(25px,3vw,38px);line-height:1.55}
.hero em{font-style:normal;color:var(--accent-on-dark,var(--accent))}
.hero p{margin-top:10px;font-size:14px;line-height:1.8;color:#c3d4cc}
.ascent-art{position:relative;width:190px;height:200px;justify-self:center;isolation:isolate;pointer-events:none}
.ascent-art span{position:absolute;width:42%;height:40%;border-radius:50% 50% 18% 50%;transform:rotate(-45deg);background:linear-gradient(145deg,#e3f5b8,#94b963);box-shadow:inset 0 2px 1px #ffffff50,0 12px 22px #071e2428}
.ascent-art span:nth-child(1){left:6%;bottom:6%;opacity:.3}
.ascent-art span:nth-child(2){left:21%;bottom:23%;opacity:.5}
.ascent-art span:nth-child(3){left:36%;bottom:40%;opacity:.75}
.ascent-art span:nth-child(4){left:51%;bottom:57%}
/* Stats: one panel split by hairlines, the language of the approved student home. */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--elev-1)}
.stat-card+.stat-card{border-inline-start:1px solid var(--line)}
.stat-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:center;gap:14px 12px;min-width:0;padding:22px 24px 20px;background:var(--surface,#fff)}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}
.stat-icon svg{width:19px;height:19px}
.stat-label{font-size:13px;font-weight:700;line-height:1.6;color:var(--text-2,#4c5d55)}
.stat-card strong{grid-column:1/-1;align-self:end;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:34px;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-card strong small{font-size:13px;font-weight:400;color:var(--text-3,#5d6d65)}
.stat-foot{grid-column:1/-1;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;line-height:1.8;color:var(--text-3,#5d6d65)}
.sage{background:var(--tint-sage,#edf4dd);color:var(--on-sage,#55702a)}
.lavender{background:var(--tint-lavender,#eeebf8);color:var(--on-lavender,#665a93)}
.peach{background:var(--tint-peach,#fbeee1);color:var(--on-peach,#8f6237)}
.blue{background:var(--tint-blue,#e6eff6);color:var(--on-blue,#466b83)}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--surface-3,#eef3e8);font-size:12px;font-weight:700;line-height:1.7;color:var(--text-2,#4c5d55)}
.tag.inactive{background:var(--tint-danger,#fbefec);color:var(--danger-text,#9a3b33)}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--surface-3,#eef3e8);font-size:13px;font-weight:700;color:var(--text,#183b3c)}
.avatar.mini{width:34px;height:34px;font-size:12px}
.avatar.large{width:76px;height:76px;font-size:26px;background:var(--accent);color:var(--on-accent,var(--ink))}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:36px 20px;text-align:center}
.empty svg{box-sizing:content-box;width:26px;height:26px;padding:13px;border-radius:50%;background:var(--surface-3,#eef3e8);color:var(--text-3,#5d6d65)}
.empty h3{font-size:17px}
.empty p{font-size:13px;color:var(--text-3,#5d6d65)}
.empty.compact{min-height:96px;padding:18px}
.messages{display:grid;gap:10px;margin-bottom:24px}
.message{padding:13px 18px;border:1px solid var(--line-success,#d5e5c0);border-inline-start:4px solid var(--progress,#7f9d4a);border-radius:14px;background:var(--tint-success,#eef6e4);font-size:14px;color:var(--text,#183b3c);animation:rise-in var(--t-slow) var(--ease-out) both}
.message.error{border-color:var(--line-danger,#ecc9c2);border-inline-start-color:var(--danger);background:var(--tint-danger,#fbefec);color:var(--danger-text,#9a3b33)}
.notice{margin-top:26px;padding:16px 20px;border:1px solid var(--line-soft,#e8ede6);border-radius:14px;background:var(--surface-2,#f6f8f2);font-size:13px;line-height:2;color:var(--text-2,#4c5d55)}
.notice a{color:var(--link,#536d27);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;z-index:100;max-width:90vw;padding:12px 22px;border-radius:12px;background:var(--strong,#183b3c);font-size:13px;font-weight:700;color:#fff;box-shadow:var(--elev-3);transform:translateX(-50%);animation:toast-in var(--t-slow) var(--ease-out) both}
.segmented{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-3,#eef3e8)}
.segmented a{display:inline-flex;align-items:center;min-height:36px;padding:4px 16px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-2,#4c5d55);transition:background-color var(--t-med) var(--ease-out),color var(--t-fast),box-shadow var(--t-med)}
@media(hover:hover){.segmented a:hover{color:var(--text,#183b3c)}}
.segmented a.selected{background:var(--surface,#fff);color:var(--text,#183b3c);box-shadow:var(--elev-1)}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:28px 0;font-size:13px}
.pagination>span{padding:4px 14px;border-radius:999px;background:var(--surface-3,#eef3e8);font-weight:700;color:var(--text-2,#4c5d55);font-variant-numeric:tabular-nums}
progress{width:100%;height:7px;border:0;border-radius:10px;background:var(--surface-3,#eef3e8);overflow:hidden;accent-color:var(--progress,#7f9d4a)}
progress::-webkit-progress-bar{background:var(--surface-3,#eef3e8);border-radius:10px}
progress::-webkit-progress-value{background:var(--progress,#7f9d4a);border-radius:10px}
progress::-moz-progress-bar{background:var(--progress,#7f9d4a);border-radius:10px}

/* App bars (update ready, connection lost, install hint): one quiet strip above the home indicator, never over the reader's
   controls for long; each can be dismissed. */
.pwa-bars{position:fixed;bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));left:50%;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 24px));transform:translateX(-50%)}
.pwa-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-radius:14px;background:var(--strong,#183b3c);color:#fff;box-shadow:var(--elev-3);font-size:13px;line-height:1.8}
.pwa-bar p{flex:1 1 220px;margin:0}
.pwa-bar-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 16px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700}
.pwa-bar-action.quiet{background:transparent;color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.pwa-bar-action:hover{filter:brightness(1.06)}.pwa-bar-action.quiet:hover{text-decoration-thickness:2px}}

/* Scope: «الـمـعالي» items carry a word and a dot, never colour alone; scope headings take the mark's strokes */
.scope-chip{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px;padding:1px 10px;border:1px solid var(--line-accent,#9cb46a);border-radius:999px;background:var(--tint-sage,#edf4dd);font-size:12px;font-weight:700;line-height:1.7;color:var(--on-sage,#55702a);vertical-align:middle;white-space:nowrap}
.scope-chip.is-public{border-color:var(--line-soft,#e8ede6);background:var(--surface-2,#f6f8f2);color:var(--text-2,#4c5d55)}
.scope-chip.is-compact{gap:4px;margin-inline:0 4px;padding:0 6px;line-height:1.5}
.scope-dot{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.scope-chip.is-public .scope-dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.stats-scope-title,.achievers-scope{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:16px;font-weight:700;color:var(--text,#183b3c)}
.achievers-scope:not(:first-of-type){margin-top:24px}
.stats-scope-title svg,.achievers-rhythm{flex:none;width:40px;height:11px;color:var(--on-sage,#55702a)}
.stats-scopes{display:flex;flex-wrap:wrap;gap:6px 20px;margin:-14px 0 28px;font-size:13px;color:var(--text-2,#4c5d55)}
.stats-scopes b{color:var(--text,#183b3c)}
.stat-scope{display:block;font-size:12px;font-weight:600;color:var(--text-2,#4c5d55)}
.scope-note{margin:-8px 0 16px;font-size:13px;color:var(--text-2,#4c5d55)}
.scope-note b{color:var(--text,#183b3c)}
/* Unlock conditions in the admin form: one row per item of the same kind, a box and its own percent */
.req-panel{min-width:0;margin:8px 0 0;padding:16px 20px 12px;border:1px solid var(--line-soft,#e8ede6);border-radius:16px;background:var(--surface-2,#f6f8f2)}
.req-panel legend{padding-inline:8px;font-weight:700;color:var(--text,#183b3c)}
.req-panel>.field-help{margin-bottom:8px}
.req-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft,#e8ede6)}
.req-pick{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0;font-weight:600;color:var(--text,#183b3c)}
.req-pick input{flex:none;width:20px;height:20px;accent-color:var(--progress,#7f9d4a)}
.req-title{overflow-wrap:anywhere}
.req-note{font-size:12px;font-weight:700;color:var(--text-2,#4c5d55)}
.req-pct{display:flex;flex:none;align-items:center;gap:6px;color:var(--text-2,#4c5d55)}
.req-pct input{width:84px;text-align:center}
/* 7 ─ Lists, rows and tables */
.manage-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.manage-row:last-child{border:0}
.manage-row>div:first-child{flex:1;min-width:0}
.manage-row h3{font-size:15px;line-height:1.75;overflow-wrap:anywhere}
.manage-row .hidden-tag{display:inline-flex;align-items:center;margin-inline-start:8px;padding:2px 10px;border:1px solid var(--line-2,#d3ddd2);border-radius:999px;background:var(--surface-2,#f6f8f2);font-size:12px;font-weight:700;line-height:1.7;color:var(--text-2,#4c5d55);vertical-align:middle}
.manage-row .actions{flex-shrink:0}
.student-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.student-row:last-child{border:0}
.student-name{flex:1 1 180px;min-width:0}
.student-name strong{display:block;font-size:14px;line-height:1.75}
.student-name small{display:block;font-size:12px;color:var(--text-3,#5d6d65);overflow-wrap:anywhere}
.student-totals{display:flex;gap:22px;margin:0 12px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.student-totals small{display:block;font-size:12px;font-weight:400;color:var(--text-3,#5d6d65)}
.student-row .danger-link{white-space:nowrap}
/* Home leaderboard panel; its podium lives in podium.css. */
.achievers>.section-heading{flex-wrap:nowrap;margin:0 0 22px}
.achievers>.section-heading h2{font-size:22px}
.achievers>.section-heading>svg{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:16px;background:var(--accent-soft);color:var(--text,#183b3c)}
.achievers>.button{width:100%;min-height:50px;margin-top:2px;border-color:transparent;background:var(--surface-2,#f6f8f2);font-size:13px}
@media(hover:hover){.achievers>.button:hover{background:var(--surface-3,#eef3e8);border-color:var(--line)}}
.activity-panel{margin-top:28px}
.activity-item{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--line-soft,#e8ede6)}
.activity-item:last-child{border:0}
.activity-item b{font-size:13px}
.activity-item span{font-size:13px;color:var(--text-2,#4c5d55)}
.activity-item small{font-size:12px;color:var(--text-3,#5d6d65)}
.announcement-strip{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding:16px 20px;border:1px solid var(--line-soft,#e8ede6);border-inline-start:4px solid var(--line-accent,#9cb46a);border-radius:16px;background:var(--surface-2,#f6f8f2)}
.announcement-strip>svg{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;background:var(--surface,#fff);color:var(--link,#536d27)}
.announcement-strip>div{min-width:0}
.announcement-strip strong{font-size:14px;line-height:1.7}
.announcement-strip p{font-size:13px;line-height:1.8;color:var(--text-2,#4c5d55)}
.announcement-strip>a{display:inline-flex;align-items:center;flex-shrink:0;min-height:38px;margin-inline-start:auto;padding:4px 16px;border:1px solid var(--line-2,#d3ddd2);border-radius:999px;background:var(--surface,#fff);font-size:13px;font-weight:700;color:var(--link,#536d27);white-space:nowrap;transition:border-color var(--t-fast),color var(--t-fast)}
@media(hover:hover){.announcement-strip>a:hover{border-color:var(--line-accent,#9cb46a);color:var(--text,#183b3c)}}
.table-wrap{overflow-x:auto;overscroll-behavior-inline:contain}
table{width:100%;border-collapse:separate;border-spacing:0;text-align:right;font-size:14px}
th{padding:12px 14px;background:var(--surface-2,#f6f8f2);font-size:12px;font-weight:700;color:var(--text-2,#4c5d55);white-space:nowrap}
th:first-child{border-radius:0 12px 12px 0}
th:last-child{border-radius:12px 0 0 12px}
td{padding:14px;border-bottom:1px solid var(--line-soft,#e8ede6);line-height:1.85;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr{transition:background-color var(--t-fast)}
@media(hover:hover){tbody tr:hover{background:var(--surface-2,#f6f8f2)}}
table a{white-space:nowrap}

/* 8 ─ Pages */
/* Library & learning */
.learning-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.video-shell{position:relative;width:100%;min-width:200px;min-height:200px;aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:#112322;box-shadow:var(--elev-2)}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-consent{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#e9f2e3;background:radial-gradient(circle at 50% 40%,#1f4644,#112322 70%)}
.player-consent>svg{width:44px;height:44px;color:var(--accent-on-dark,var(--accent))}
.player-consent h2{font-size:22px}
.player-consent p{max-width:90%;font-size:13px;line-height:1.85;color:#a9bdb2}
.content-description{margin-top:24px}
.content-description h2{margin-bottom:12px;font-size:18px}
.learning-aside{display:grid;align-content:start;gap:12px;height:fit-content}
.learning-aside>h2{font-size:19px}
.big-number{display:block;font-size:36px;line-height:1.4;font-variant-numeric:tabular-nums}
.big-number small{font-size:13px;font-weight:400;color:var(--text-3,#5d6d65)}
.learning-aside>p{font-size:13px;line-height:1.9;color:var(--text-2,#4c5d55)}
.sync-status{padding:8px 12px;border:1px solid transparent;border-radius:10px;background:var(--surface-2,#f6f8f2);font-size:12px;line-height:1.9;color:var(--text-2,#4c5d55);overflow-wrap:anywhere;transition:background-color var(--t-med),color var(--t-med),border-color var(--t-med)}
.sync-status.error{border-color:var(--line-danger,#ecc9c2);background:var(--tint-danger,#fbefec);color:var(--danger-text,#9a3b33)}
.reader{padding:0;overflow:hidden}
.reader-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface,#fff);font-size:13px}
.reader-toolbar .inline-form{gap:8px;min-width:0}
.reader-toolbar .icon-button{min-width:42px;min-height:42px;border:1px solid var(--line-2,#d3ddd2);border-radius:50%;font-size:17px;font-weight:700}
@media(hover:hover){.reader-toolbar .icon-button:hover{border-color:var(--line-accent,#9cb46a)}}
.reader-toolbar select{min-height:42px;font-size:13px}
.page-input{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.page-input input{width:72px;min-height:42px;text-align:center;font-weight:700}
.pdf-stage{position:relative;display:flex;align-items:flex-start;justify-content:center;min-height:400px;max-height:80vh;padding:24px;overflow:auto;overscroll-behavior:contain;background:var(--stage,#e9ece7);direction:ltr}
.pdf-stage[aria-busy=true]{cursor:progress}
.pdf-stage canvas{flex-shrink:0;max-width:none;box-shadow:0 2px 6px #0000001a,0 22px 44px -22px #00000059}
.pdf-stage #reader-loading{position:absolute;top:32px;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--surface,#fff);box-shadow:var(--elev-2);font-size:13px;font-weight:700;direction:rtl}
.pdf-stage #reader-loading::before{content:'';width:14px;height:14px;border:2px solid var(--line-2,#d3ddd2);border-top-color:var(--focus,#597c3b);border-radius:50%;animation:spin 800ms linear infinite}
.pdf-stage #reader-error{max-width:550px;direction:rtl}
.reader-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px 16px;font-size:13px;line-height:1.9}
.reader-footer .sync-status{margin:6px 0}
/* Calendar & programmes */
.detail-panel{max-width:860px;padding:36px}
.detail-panel h1{margin:12px 0}
.event-facts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px;font-size:13px}
.event-facts>span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--surface-2,#f6f8f2);font-weight:700;color:var(--text-2,#4c5d55)}
.event-facts svg{width:18px;height:18px;color:var(--link,#536d27)}
.prose p{margin-bottom:16px;font-size:15px;line-height:2.1;color:var(--text-2,#4c5d55)}
.prose h2{margin:24px 0 10px}
.detail-panel .actions{margin-top:24px}
.help-panel{max-width:900px}
/* Journey & leaderboard */
/* Codes & errors */
.issued-code-label{display:block;margin-top:22px;font-size:13px;font-weight:700}
.issued-code{width:100%;max-width:440px;margin-block:10px 20px;padding:15px;border:1px dashed var(--line-accent,#9cb46a);border-radius:14px;background:var(--surface-2,#f6f8f2);color:var(--text,#183b3c);font-family:monospace;font-size:clamp(16px,2.5vw,23px);letter-spacing:.06em;text-align:center}
.form-panel .actions{margin-bottom:18px}
.error-panel{max-width:750px;margin:50px auto}
.error-number{font-size:76px;font-weight:700;line-height:1.2;color:var(--link,#536d27)}
/* Sign-in */
.auth-main{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px}
.login-layout{display:grid;grid-template-columns:1.1fr 1fr;width:100%;max-width:1150px;min-height:680px;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface,#fff);box-shadow:var(--elev-3)}
.login-story{position:relative;display:flex;flex-direction:column;padding:42px 46px;overflow:hidden;background:var(--ink-dark);color:#fff}
.login-story>.brand{padding:0 0 32px}
.login-story .brand small{color:#b4c8bd}
.login-story .eyebrow{color:#b6cc93}
.login-story h1{font-size:39px;line-height:1.6}
.login-story em{font-style:normal;color:var(--accent-on-dark,var(--accent))}
.login-story p{margin-top:20px;font-size:14px;color:#a9bfb1}
.login-story>small{margin-top:auto;padding-top:200px;font-size:12px;color:#9cb3a2}
.story-art{position:absolute;bottom:20px;left:20px;width:280px;height:245px;pointer-events:none}
.story-art svg{display:block;width:100%;height:100%;overflow:visible;fill:var(--accent-on-dark,var(--accent));stroke:var(--accent-on-dark,var(--accent))}
.login-form{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px)}
.login-form h2{margin-bottom:6px;font-size:31px}
.login-form>.muted{font-size:14px}
.login-form .form-stack{margin-top:26px}
.login-role-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.login-role{display:grid;justify-items:center;gap:4px;min-width:0;padding:18px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2,#f6f8f2);text-align:center;transition:transform var(--t-med) var(--ease-out),border-color var(--t-fast),background-color var(--t-med),box-shadow var(--t-med),color var(--t-fast)}
@media(hover:hover){.login-role:hover{transform:translateY(-2px);border-color:var(--line-accent,#9cb46a);box-shadow:var(--elev-1)}}
.login-role:active{transform:scale(.98)}
.login-role svg{width:26px;height:26px;color:var(--link,#536d27)}
.login-role strong{font-size:15px}
.login-role small{font-size:12px;color:var(--text-3,#5d6d65)}
.login-role.selected{background:var(--strong,#183b3c);border-color:var(--strong,#183b3c);color:#fff;box-shadow:var(--elev-2)}
.login-role.selected svg{color:var(--accent-on-dark,var(--accent))}
.login-role.selected small{color:#dce7db}
.login-choice-hint{margin-top:20px;font-size:14px;color:var(--text-3,#5d6d65)}
/* «تذكرني على هذا الجهاز»: the whole label is the 44px touch target */
.login-form .check-field>label{display:flex;align-items:center;min-height:44px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.recovery{margin-top:26px;padding:16px 18px;border:1px solid var(--line-soft,#e8ede6);border-radius:14px;background:var(--surface-2,#f6f8f2)}
.recovery strong{font-size:13px}
.recovery p{margin-top:4px;font-size:13px;line-height:1.95;color:var(--text-2,#4c5d55)}
.privacy-mini{margin-top:20px;font-size:12px;line-height:2;color:var(--text-3,#5d6d65);text-align:center}

/* 9 ─ Motion: one marker draw, the drawer entrance and feedback; all off under reduced motion */
@keyframes nav-mark{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drawer-item{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* Touch: comfortable targets and no iOS focus zoom wherever the pointer is coarse or the drawer layout is on */
@media(pointer:coarse),(max-width:900px){
  .button.small-button,.danger-link,.text-link,.back-link,.segmented a,.side-note a,.section-heading>a,.announcement-strip>a{min-height:44px}
  .text-link{min-width:44px;justify-content:center}
  input:not([type=checkbox]):not([type=radio]),select:not([multiple]),textarea:not([cols]){font-size:16px}
  input[type=checkbox],input[type=radio]{width:24px;height:24px}
  .reader-toolbar .icon-button,.reader-toolbar select,.page-input input{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* 10 ─ Responsive */
@media(min-width:1600px){
  .main{padding:40px 56px}
  .hero{min-height:300px}
}
@media(max-width:1200px){
  .sidebar{width:222px;padding:22px 12px 14px}
  .workspace{margin-right:222px}
  .brand strong{font-size:21px}
  .main{padding:28px 28px 40px}
  .topbar{padding:0 28px}
  .footer{padding-inline:28px}
  .panel{padding:24px}
  .stat-card{padding:20px}
  .stat-card strong{font-size:30px}
  .learning-layout{grid-template-columns:minmax(0,1fr) 250px}
  .student-totals{margin:0;gap:14px}
  .login-story{padding:36px}
}
@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) 140px;gap:24px;padding:30px 32px}
  .hero .ascent-art{width:140px;height:165px}
}
@media(max-width:1000px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card:nth-child(odd){border-inline-start:0}
  .stat-card:nth-child(n+3){border-top:1px solid var(--line)}
  .learning-layout{grid-template-columns:minmax(0,1fr)}
  .learning-aside{grid-template-columns:1fr 1fr;gap:8px 20px}
  .learning-aside>.eyebrow,.learning-aside>h2,.learning-aside>p,.learning-aside>.sync-status,.learning-aside>progress{grid-column:1}
  .learning-aside .big-number{grid-column:2;grid-row:1/4;align-self:center;margin:0}
  .two-columns{gap:18px}
  .login-story h1{font-size:32px}
  .login-layout{min-height:640px}
  .date-label{display:none}
}
@media(max-width:900px){
  .workspace{margin:0}
  .sidebar{width:280px;transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow)}
  .sidebar.open{transform:none;box-shadow:var(--elev-3)}
  .sidebar.open nav a{animation:drawer-item var(--t-slow) var(--ease-out) both}
  .sidebar.open nav a:nth-child(2){animation-delay:30ms}
  .sidebar.open nav a:nth-child(3){animation-delay:60ms}
  .sidebar.open nav a:nth-child(4){animation-delay:90ms}
  .sidebar.open nav a:nth-child(5){animation-delay:120ms}
  .sidebar.open nav a:nth-child(6){animation-delay:150ms}
  .sidebar.open nav a:nth-child(n+7){animation-delay:180ms}
  .sidebar-close{display:inline-flex;align-items:center;align-self:flex-end;min-height:44px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:700;color:var(--text-3,#5d6d65);transition:background-color var(--t-fast)}
  .sidebar-close:hover{background:var(--surface-2,#f6f8f2)}
  .sidebar .brand{padding-top:6px}
  .nav-shade:not([hidden]){position:fixed;inset:0;z-index:35;display:block;background:var(--scrim,#10232466);opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
  .nav-shade.show{opacity:1}
  .topbar{height:64px;padding:0 16px}
  .breadcrumb{display:none}
  .mobile-brand{display:flex;align-items:center;gap:8px;font-size:19px}
  .mobile-brand .icon-button{margin-right:-8px}
  .main{padding:24px 20px 36px}
  .footer{flex-direction:column;align-items:flex-start;gap:2px;padding:18px 20px 24px}
  .page-heading{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:22px}
  .page-heading{--ph-size:27px}
  .page-heading p{font-size:13px}
  .page-heading>.button,.page-heading .heading-actions .button{min-height:42px;padding:8px 14px;font-size:13px}
  .hero{grid-template-columns:minmax(0,1fr) 120px;gap:18px;min-height:220px;padding:26px}
  .hero .ascent-art{width:120px;height:145px}
  .hero h2{font-size:27px}
  .panel{padding:22px 20px}
  .two-columns{grid-template-columns:1fr}
  .filters{gap:10px}
  .filters .search-box{flex-basis:100%}
  .filters select{width:100%;min-width:0}
  .filters>select{width:auto;flex:1}
  .table-wrap table{min-width:490px}
  .table-wrap td,.table-wrap th{padding:12px}
  .learning-aside{grid-template-columns:1fr}
  .learning-aside .big-number{grid-column:auto;grid-row:auto}
  .reader-toolbar{padding:10px 12px;gap:8px}
  .pdf-stage{min-height:350px;padding:12px}
  .reader-footer{padding:6px 12px}
  .student-row .text-link,.student-row>.button{margin-inline-start:auto}
  .announcement-strip{padding:16px}
  .login-layout{grid-template-columns:1fr;max-width:500px;border-radius:22px}
  .login-story{min-height:200px;padding:26px 28px}
  .login-story .brand{padding:0 0 16px}
  .login-story .brand strong{font-size:22px}
  .login-story h1{font-size:24px;line-height:1.7}
  .login-story h1 br{display:none}
  .login-story h1 em{display:block}
  .login-story>p,.login-story>small,.story-art{display:none}
  .login-form{padding:30px}
  .login-form h2{font-size:27px}
  .auth-main{padding:16px}
  .theme-toggle-label{display:none}
  .error-number{font-size:60px}
}
@media(max-width:520px){
  .hero{grid-template-columns:minmax(0,1fr);gap:0}
  .hero .ascent-art{width:105px;height:115px;justify-self:end;margin:-12px 6px 0 0}
  .hero h2{font-size:26px}
  .hero p{font-size:13px}
  .page-heading{--ph-size:25px}
  .stat-card{display:flex;flex-direction:column;align-items:flex-start;padding:16px 15px}
  .stat-card .stat-label{margin:10px 0 8px}
  .stat-card strong{display:block;font-size:28px}
  .stat-card strong small{display:block;margin-top:2px}
  .stat-foot{width:100%;margin-top:auto}
  .achievers>.section-heading>svg{width:22px;height:22px;padding:10px}
  .manage-row{flex-wrap:wrap;align-items:flex-start}
  .manage-row .actions{margin-inline-start:auto}
  .announcement-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px 14px}
  .announcement-strip>a{grid-column:2;justify-self:start;margin:0}
  .field #id_permissions{grid-template-columns:1fr}
  .login-story .brand strong{white-space:normal}
}
@media(max-width:460px){
  .main{padding:22px 15px 32px}
  .topbar{padding:0 12px}
  .top-actions{gap:2px}
  .panel{padding:20px 16px}
  .hero{padding:23px;border-radius:20px}
  .section-heading h2{font-size:19px}
  .student-row>.avatar{width:36px;height:36px}
  .student-totals{margin-inline-start:50px}
  .reader-toolbar,.reader-footer{justify-content:center}
  .video-shell{min-height:205px}
  .player-consent{gap:9px;padding:15px}
  .player-consent>svg{width:30px;height:30px}
  .player-consent h2{font-size:19px}
  .login-form{padding:26px 22px}
  .auth-main{padding:12px}
  .login-story{padding:22px}
  .login-story h1{font-size:23px}
  .detail-panel{padding:24px 20px}
  .detail-panel h1{font-size:25px}
}
@media(max-width:420px){
  .hero{padding:24px}
  .hero .ascent-art{transform:scale(.7)}
  .hero h2{font-size:25px}
}