@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root{--ms-action-text:var(--ms-brand-700);--navy:#10192f;--blue:#1f325e;--blue2:#3a2b75;--ink:#142532;--muted:#617480;--line:#dbe5ea;--bg:#f4f7fa;--success-accent:#2c0f9f;--purple:#7667d8;--amber:#d34b7f;--red:#e96167;--shadow:0 10px 30px rgba(7,30,48,.08);--z-base:0;--z-local:1;--z-local-raised:2;--z-local-sticky:3;--z-sticky:100;--z-header:200;--z-announcement:210;--z-context:220;--z-sidebar-backdrop:290;--z-sidebar:300;--z-mobile-nav:350;--z-dropdown:400;--z-popover:500;--z-help:550;--z-drawer:800;--z-modal:900;--z-install-modal:920;--z-toast:1000;--z-command:1100;--z-tour:1200;color-scheme:light;--ms-font-ar:'Cairo','IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;--ms-font-en:'Inter','Segoe UI',Arial,sans-serif;--ms-brand-950:#070c17;--ms-brand-900:#081c2d;--ms-brand-850:#0b1221;--ms-brand-800:#172545;--ms-brand-700:#372874;--ms-brand-600:#1f325e;--ms-brand-500:#3a2b75;--ms-brand-400:#443485;--ms-brand-300:#6958ad;--ms-brand-200:#bbafe9;--ms-brand-100:#ddd7f4;--ms-brand-50:#edfafa;--ms-accent-900:#4d182c;--ms-accent-800:#671f3b;--ms-accent-700:#8d1f49;--ms-accent-600:#b22f61;--ms-accent-500:#d34b7f;--ms-accent-400:#e35a8f;--ms-accent-300:#ed82ab;--ms-accent-200:#f4b0ca;--ms-accent-100:#f6d6e2;--ms-accent-50:#fceef3;--ms-neutral-950:#111317;--ms-neutral-900:#171a20;--ms-neutral-800:#262931;--ms-neutral-700:#423f4d;--ms-neutral-600:#607480;--ms-neutral-500:#777581;--ms-neutral-400:#9a98a2;--ms-neutral-300:#bcbac2;--ms-neutral-200:#dad9df;--ms-neutral-150:#e8e7eb;--ms-neutral-100:#f1f0f3;--ms-neutral-50:#f8fbfc;--ms-success:#28176b;--ms-success-soft:#ece9f7;--ms-warning:#940039;--ms-warning-soft:#fae8ef;--ms-danger:#b42318;--ms-danger-soft:#fff0f0;--ms-info:#366f9f;--ms-info-soft:#eef5fb;--ms-bg:#f5f4f7;--ms-bg-accent:#edf3f6;--ms-surface:var(--afoq-surface);--ms-surface-2:#fbfcfd;--ms-surface-3:#eef3f6;--ms-surface-glass:rgba(255,255,255,.82);--ms-text:var(--afoq-text);--ms-text-2:#4c606d;--ms-text-3:#6d7f8a;--ms-border:var(--afoq-border);--ms-border-strong:#c6d3da;--ms-focus:#7767b7;--ms-radius-xs:8px;--ms-radius-sm:12px;--ms-radius-md:16px;--ms-radius-lg:20px;--ms-radius-xl:28px;--ms-radius-pill:999px;--ms-shadow-xs:0 1px 2px rgba(6,12,27,.04);--ms-shadow-sm:0 8px 24px rgba(6,12,27,.06),0 1px 2px rgba(6,12,27,.04);--ms-shadow-md:0 18px 48px rgba(6,12,27,.09),0 2px 6px rgba(6,12,27,.04);--ms-shadow-lg:0 28px 80px rgba(6,12,27,.14),0 8px 26px rgba(6,12,27,.07);--ms-shadow-float:0 22px 55px rgba(6,12,27,.13),inset 0 1px 0 rgba(255,255,255,.72);--ms-sidebar:280px;--ms-topbar:76px;--ms-content:1480px;--ms-gutter:clamp(16px,2.4vw,36px);--ms-transition:180ms cubic-bezier(.2,.8,.2,1);--brand-50:var(--ms-brand-50);--brand-100:var(--ms-brand-100);--brand-200:var(--ms-brand-200);--brand-300:var(--ms-brand-300);--brand-400:var(--ms-brand-400);--brand-500:var(--ms-brand-500);--brand-600:var(--ms-brand-600);--brand-700:var(--ms-brand-700);--brand-800:var(--ms-brand-800);--brand-900:var(--ms-brand-900);--accent-50:var(--ms-accent-50);--accent-100:var(--ms-accent-100);--accent-300:var(--ms-accent-300);--accent-500:var(--ms-accent-500);--accent-600:var(--ms-accent-600);--accent-700:var(--ms-accent-700);--surface:var(--ms-surface);--surface-raised:var(--ms-surface);--surface-soft:var(--ms-surface-3);--text-primary:var(--ms-text);--text-secondary:var(--ms-text-2);--text-muted:var(--ms-text-3);--border:var(--ms-border);--border-strong:var(--ms-border-strong);--radius-sm:var(--ms-radius-xs);--radius-md:var(--ms-radius-sm);--radius-lg:var(--ms-radius-md);--radius-xl:var(--ms-radius-lg);--shadow-sm:var(--ms-shadow-xs);--shadow-md:var(--ms-shadow-md);--shadow-lg:var(--ms-shadow-lg);--sidebar-width:var(--ms-sidebar);--topbar-height:var(--ms-topbar);--v14-brand:var(--ms-brand-700);--v14-brand-deep:var(--ms-brand-900);--v14-warm:var(--ms-accent-500);--v14-paper:var(--ms-bg);--v14-line:var(--ms-border);--v14-text:var(--ms-text);--v14-muted:var(--ms-text-3);--v14-card:var(--ms-surface);--v14-shadow:var(--ms-shadow-md);--dash-navy:#060c1b;--dash-navy-2:#0a142a;--dash-primary:#30245f;--dash-primary-soft:#f3f2f8;--dash-bg:#f5f4f7;--dash-card:#fff;--dash-text:#171a20;--dash-muted:#7d7a87;--dash-line:#e0dfe5;--dash-success:#30159c;--dash-warning:#d9276b;--dash-danger:#d95562;--dash-shadow:0 12px 35px rgba(22,39,78,.07);--mx-accent:#172545;--mx-accent-2:#d34b7f;--mx-soft:rgba(41,28,91,.08);--mx-danger:#9f3434;--ms-topbar-bg:color-mix(in srgb,var(--ms-surface,#fff) 96%,#f4e9ed 4%);--ms-topbar-chip:#edfafa;--ms-topbar-chip-border:#e1dfe9;--ms-topbar-chip-text:#293247;--ms-topbar-muted:#787487;--ms-brand-paper:#fbf0f4;--ms-primary:var(--afoq-primary);--ms-primary-strong:#172545;--ms-accent:#d34b7f;--ms-muted:var(--afoq-muted);--ms-radius:16px;--ms-font-size:15px;--ms-sidebar-width:272px;--ms-content-max:1540px;--ms-shadow:0 12px 36px rgba(13,23,48,.08)
;--ms-control-height:44px;--ms-font-family:var(--ms-font-ar);--ms-dark-text:#f8f7fa;--ms-dark-text-2:#dbe5ea;--ms-dark-text-3:#a9c0c8;--ms-z-content:1;--ms-z-sticky:30;--ms-z-sidebar:70;--ms-z-modal:110;--ms-line-height:1.72;--ms-primary-hover:var(--afoq-primary-hover);--ms-primary-soft:var(--afoq-primary-soft);--ms-secondary:#625a81;--ms-accent-soft:#f9e3eb;--brand-primary:var(--ms-primary);--ms-premium-brand:#172545;--ms-premium-brand-2:#30245f;--ms-premium-brand-3:#4b3f7d;--ms-premium-warm:#c85f87;--ms-premium-warm-soft:#ea9fbc;--ms-premium-paper:#fefbfc;--ms-premium-bg:#f4f3f7;--ms-premium-border:#dbe5ea;--ms-type-display:clamp(2rem,3.2vw,3rem);--ms-type-h1:clamp(1.65rem,2.3vw,2.2rem);--ms-type-h2:clamp(1.3rem,1.8vw,1.65rem);--ms-type-h3:1.12rem;--ms-type-body:1rem;--ms-type-small:.875rem;--ms-leading-tight:1.32;--ms-leading-heading:1.45;--ms-leading-body:1.85;--ms-weight-regular:400;--ms-weight-medium:500;--ms-weight-semibold:600;--ms-weight-bold:700;--ms-weight-extrabold:800;--ms-space-1:4px;--ms-space-2:8px;--ms-space-3:12px;--ms-space-4:16px;--ms-space-5:24px;--ms-space-6:32px;--ms-space-8:2rem;--ms-space-10:2.5rem;--ms-surface-soft:#f8f8fa;--ms-surface-warm:#fbf1f5;--ms-ink:var(--ms-text);--ms-ink-muted:var(--ms-muted);--ms-warm:#d34b7f;--ms-warm-hover:#9f3960;--ms-logo-header:44px;--ms-logo-sidebar:52px;--ms-brand-deep:#070c17;--ms-brand:#1f325e;--ms-brand-bright:#35d3c7;--ms-brand-soft:#e7f7f6;--ms-accent:#d34b7f;--ms-accent-soft:#f9e3eb;--ms-canvas:#f4f7fa;--ms-card:#ffffff;--ms-ink-strong:var(--ms-text);--ms-ink-soft:var(--ms-text-2);--ms-line:#dbe5ea;--ms-line-soft:#edf2f5;--ms-radius-card:18px;--ms-radius-control:11px;--ms-shell-shadow:0 18px 50px rgba(13,29,68,.07);--ms-icon-size:20px;--afoq-primary:#5840c7;--afoq-primary-hover:#4630a8;--afoq-primary-soft:#f0edff;--afoq-accent:#ce416e;--afoq-bg:#f6f7fc;--afoq-surface:#ffffff;--afoq-text:#142532;--afoq-muted:#526477;--afoq-border:#dbe5ea;--afoq-danger:#b42318;--afoq-warning:#9a003b;--afoq-success:#28176b;--afoq-font-ar:'Cairo','IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;--afoq-font-en:'Inter','Segoe UI',Arial,sans-serif;--afoq-radius-sm:10px;--afoq-radius-md:16px;--afoq-radius-lg:24px;--afoq-shadow-sm:0 6px 20px rgba(7,30,48,.06);--afoq-shadow-md:0 16px 46px rgba(7,30,48,.10);--afoq-content-max:1680px;--afoq-sidebar:272px;--afoq-page-max:1560px;--afoq-control:44px;--afoq-body-size:15px;--afoq-meta-size:12px;--afoq-night:#101b2b;--afoq-night-surface:#17253a;--afoq-night-raised:#20324b;--afoq-night-border:#405571;--afoq-night-text:#f8f7fa;--afoq-night-muted:#c6c3d2;--afoq-night-subtle:#a29eb4;--afoq-primary:#5840c7;--afoq-primary-bright:#443485;--afoq-warm:#d34b7f;--afoq-light-canvas:#f4f7fa;--afoq-light-surface:#ffffff;--afoq-light-raised:#f8f8fa;--afoq-light-text:#142532;--afoq-light-muted:#5f707c;--afoq-light-border:#dbe5ea;--ms-surface-raised:#fff;--ms-page-max:1680px;--pc-content:1440px;--pc-reading:920px;--pc-gap:24px;--pc-card-pad:22px;--pc-control:46px;--pc-header-min:112px;--pc-table-row:54px
}

[hidden]{display:none}

/* =========================================================
   AFOQ SEMANTIC Z-INDEX LAYER SYSTEM
   Keep global overlays on semantic layers. Avoid magic numbers.
   Local component stacking uses --z-local-* only.
   ========================================================= */


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
background:var(--bg);
color:var(--ink);
font-family:"Tajawal",sans-serif}
.app-shell{min-height:100vh;
display:grid;
grid-template-columns:250px 1fr}
.sidebar{position:fixed;
inset:0 0 0 auto;
width:250px;
background:var(--navy);
color:#fff;
padding:27px 19px 18px;
display:flex;
flex-direction:column;
z-index:var(--z-sidebar)}
.brand{display:flex;
align-items:center;
gap:12px;
padding:0 10px 28px;
color:#fff;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.09)}
.brand-mark{width:42px;
height:42px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#7c91e8,#526ed5);
border-radius:13px;
font-size:25px;
font-weight:800;
box-shadow:0 8px 16px rgba(41,63,151,.35)}
.brand b{font-size:20px;
display:block}
.brand small{display:block;
color:#9ca7bd;
font-size:10px;
margin-top:2px}
.main-nav{padding-top:18px;
flex:1}
.nav-label{font-size:10px;
color:#6f7c97;
margin:13px 14px 8px}
.nav-item{position:relative;
display:flex;
align-items:center;
gap:13px;
color:#aeb8cb;
text-decoration:none;
padding:11px 13px;
margin:3px 0;
border-radius:9px;
font-size:13px;
font-weight:500;
transition:.2s}
.nav-item:hover,.nav-item.active{color:#fff;
background:linear-gradient(90deg,rgba(93,117,214,.32),rgba(93,117,214,.12))}
.nav-item.active:before{content:"";
position:absolute;
right:-19px;
width:3px;
height:25px;
border-radius:3px;
background:#7289e7}
.nav-item .icon{width:20px;
text-align:center;
font-size:17px}
.nav-item em{margin-right:auto;
background:#627bdc;
color:#fff;
font-style:normal;
font-size:10px;
border-radius:10px;
padding:1px 7px}
.nav-item i{margin-right:auto;
width:6px;
height:6px;
border-radius:50%;
background:#ef6572}
.secure-card{display:flex;
align-items:center;
gap:10px;
padding:12px;
background:rgba(95,70,195,.08);
border:1px solid rgba(95,70,195,.17);
border-radius:10px;
margin:12px 0}
.shield{color:#6147c7;
font-size:20px}
.secure-card b,.secure-card small{display:block}
.secure-card b{font-size:11px}
.secure-card small{font-size:9px;
color:#8c9aae;
margin-top:3px}
.logout{border:0;
background:transparent;
color:#8f9bb1;
text-align:right;
padding:8px 12px;
font-family:inherit;
cursor:pointer}
.logout span{margin-left:12px}
.app-shell>main{grid-column:2;
min-width:0}
.topbar{height:76px;
background:#fff;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
padding:0 35px;
position:sticky;
top:0;
z-index:var(--z-header)}
.menu-btn{display:none}
.search{height:40px;
width:330px;
border:1px solid var(--line);
border-radius:10px;
display:flex;
align-items:center;
padding:0 13px;
background:#fafbfc}
.search span{color:#95a0b3;
font-size:20px}
.search input{border:0;
outline:0;
background:transparent;
font-family:inherit;
width:100%;
padding:0 9px;
color:var(--ink)}
.top-actions{margin-right:auto;
display:flex;
align-items:center;
gap:10px}
.notification,.chevron{border:0;
background:transparent;
color:#7b8699;
cursor:pointer}
.notification{font-size:22px;
position:relative;
margin-left:9px}
.notification i{position:absolute;
right:2px;
top:2px;
width:6px;
height:6px;
background:#ef5e67;
border:2px solid white;
border-radius:50%}
.user-copy{text-align:left}
.user-copy b,.user-copy span{display:block}
.user-copy b{font-size:12px}
.user-copy span{font-size:10px;
color:var(--muted);
margin-top:2px}
.avatar{width:38px;
height:38px;
border-radius:11px;
background:linear-gradient(145deg,#e7f7f6,#92a4ed);
color:#314baf;
font-weight:800;
display:grid;
place-items:center}
.content{padding:30px 35px 50px;
max-width:1440px;
margin:auto}
.welcome-row{display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:26px}
.eyebrow{font-size:11px;
color:#9aa3b4;
margin-bottom:7px}
.welcome-row h1{margin:0;
font-size:25px}
.welcome-row h1 span{font-size:22px}
.welcome-row p{color:var(--muted);
font-size:12px;
margin:8px 0 0}
.primary{border:0;
background:linear-gradient(135deg,#372874,#070c17);
color:#fff;
font-family:inherit;
border-radius:9px;
padding:12px 20px;
box-shadow:0 7px 16px rgba(79,105,204,.22);
cursor:pointer}
.primary span{margin-right:18px}
.stats-grid{display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:18px}
.stat{background:#fff;
border:1px solid var(--line);
border-radius:13px;
padding:17px;
display:flex;
align-items:center;
gap:13px;
box-shadow:0 3px 10px rgba(27,42,73,.02)}
.stat-icon{width:42px;
height:42px;
border-radius:11px;
display:grid;
place-items:center;
font-size:20px}
.blue{color:#372874;
background:#e7f7f6}
.purple{color:#a92c5c;
background:#f9e3eb}
.positive{color:#3e22af;
background:#edfafa}
.amber{color:#e2397a;
background:#fbebf1}
.stat small{color:var(--muted);
font-size:10px;
display:block}
.stat strong{font-size:23px;
display:block;
margin:2px 0}
.stat p{margin:0;
color:#98a1b1;
font-size:9px}
.stat p b{color:var(--success-accent)}
.dashboard-grid{display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr);
gap:18px}
.main-column,.side-column{display:flex;
flex-direction:column;
gap:18px}
.panel{background:#fff;
border:1px solid var(--line);
border-radius:13px;
padding:20px;
box-shadow:0 3px 12px rgba(27,42,73,.025)}
.section-head{display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:18px}
.section-head h2{font-size:15px;
margin:0 0 4px}
.section-head p{font-size:10px;
color:var(--muted);
margin:0}
.section-head a{font-size:10px;
color:var(--blue);
text-decoration:none;
font-weight:700}
.section-head button{border:0;
background:none;
color:#9da5b3}
.course-list{display:grid;
grid-template-columns:1fr 1fr;
gap:13px}
.course{border:1px solid var(--line);
border-radius:11px;
overflow:hidden;
display:grid;
grid-template-columns:42% 58%;
min-height:145px}
.course-art{position:relative;
display:grid;
place-items:center;
overflow:hidden}
.course-art>span{font-size:47px;
font-family:serif;
color:rgba(255,255,255,.9)}
.art-math{background:radial-gradient(circle at 20% 20%,#3b2b7d,#30245f)}
.art-physics{background:radial-gradient(circle at 25% 15%,#b94370,#4b2b37)}
.course-art:after{content:"";
position:absolute;
inset:0;
background:repeating-linear-gradient(45deg,transparent 0 18px,rgba(255,255,255,.025) 19px 20px)}
.play{position:absolute;
z-index:var(--z-local-raised);
width:35px;
height:35px;
border-radius:50%;
border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.9);
color:#372874;
cursor:pointer;
box-shadow:0 4px 12px rgba(0,0,0,.15)}
.course-art small{position:absolute;
bottom:8px;
left:8px;
background:rgba(10,18,38,.7);
color:white;
border-radius:4px;
padding:2px 5px;
font-size:8px}
.course-info{padding:14px}
.tag-row{display:flex;
align-items:center;
justify-content:space-between}
.tag{background:#e7f7f6;
color:#372874;
padding:3px 7px;
border-radius:4px;
font-size:8px}
.purple-tag{background:#f9e3eb;
color:#9a2b56}
.lesson{color:#99a2b2;
font-size:8px}
.course h3{font-size:12px;
margin:10px 0 4px}
.course-info>p{font-size:9px;
color:var(--muted);
margin:0 0 13px}
.progress-copy{display:flex;
justify-content:space-between;
font-size:8px;
color:#8e98aa}
.progress-copy b{color:var(--blue)}
.progress{height:4px;
background:#eef1f7;
border-radius:5px;
margin-top:6px;
overflow:hidden}
.progress i{display:block;
height:100%;
background:var(--blue);
border-radius:5px}
.purple-progress i{background:var(--purple)}
.live-card{border:1px solid #e4e9f3;
border-radius:11px;
padding:15px;
display:grid;
grid-template-columns:67px 1fr auto;
align-items:center;
gap:16px;
background:linear-gradient(90deg,#fff,#fbfcff)}
.date-box{text-align:center;
border:1px solid #e6eaf2;
border-radius:9px;
padding:7px;
background:#fff}
.date-box strong,.date-box span,.date-box small{display:block}
.date-box strong{font-size:23px;
color:var(--blue)}
.date-box span{font-size:9px;
font-weight:700}
.date-box small{font-size:8px;
color:var(--muted);
margin-top:2px}
.live-badge{font-size:8px;
color:var(--red);
background:#fff0f1;
padding:3px 7px;
border-radius:10px}
.live-badge i{display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:var(--red);
margin-left:3px}
.live-details h3{font-size:12px;
margin:8px 0 4px}
.live-details>p{font-size:9px;
color:var(--muted);
margin:0}
.meta{display:flex;
gap:13px;
margin-top:10px;
font-size:8px;
color:#7e899d}
.outline{font-family:inherit;
font-size:9px;
border:1px solid #dbe1ed;
background:#fff;
border-radius:8px;
padding:9px 12px;
color:#58536b;
cursor:pointer}
.outline.active{color:#fff;
background:var(--success-accent);
border-color:var(--success-accent)}
.chart-summary{display:flex;
align-items:flex-end;
justify-content:space-between}
.chart-summary strong{font-size:28px}
.chart-summary span{font-size:10px;
color:var(--muted);
margin-right:4px}
.chart-summary p{font-size:9px;
color:#9aa3b2}
.chart-summary p b{color:var(--success-accent)}
.bar-chart{height:150px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:10px;
padding-top:28px}
.bar-chart>div{height:100%;
flex:1;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
gap:8px}
.bar-chart i{width:100%;
max-width:22px;
border-radius:5px 5px 2px 2px;
background:#e6eaf3;
position:relative}
.bar-chart i.today{background:linear-gradient(#2a1776,#372874)}
.bar-chart em{position:absolute;
top:-24px;
left:50%;
transform:translateX(-50%);
font-size:8px;
font-style:normal;
color:white;
background:#10192f;
border-radius:4px;
padding:3px 5px}
.bar-chart span{font-size:8px;
color:#929cac}
.task{display:grid;
grid-template-columns:37px 1fr auto;
align-items:center;
gap:10px;
padding:13px 0;
border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}
.task-icon{width:36px;
height:36px;
border-radius:9px;
display:grid;
place-items:center}
.red{background:#fff0f0;
color:var(--red)}
.warm{background:#fbecf2;
color:var(--amber)}
.teal{background:#edeaf9;
color:var(--success-accent)}
.task h4{font-size:10px;
margin:0 0 3px}
.task p,.task small{font-size:8px;
color:var(--muted);
margin:0;
display:block}
.task small{color:#ae3262;
margin-top:3px}
.task>b{font-size:8px;
color:#7e899c;
border:1px solid var(--line);
border-radius:5px;
padding:4px 6px}
.modal{position:fixed;
inset:0;
background:rgba(10,18,37,.7);
z-index:var(--z-modal);
display:none;
place-items:center;
padding:20px;
backdrop-filter:blur(5px)}
.modal.open{display:grid}
.modal-card{background:white;
border-radius:16px;
padding:20px;
width:min(700px,95vw);
position:relative}
.modal-close{position:absolute;
left:12px;
top:8px;
border:0;
background:none;
font-size:25px;
cursor:pointer}
.video-frame{height:360px;
background:linear-gradient(135deg,#0c1a3a,#070b14);
border-radius:11px;
display:grid;
place-items:center;
color:white;
font-size:45px;
position:relative;
overflow:hidden}
.video-frame:after{content:"DRM PROTECTED";
position:absolute;
font-size:70px;
color:rgba(255,255,255,.025);
transform:rotate(-20deg)}
.watermark{position:absolute;
z-index:var(--z-local-raised);
top:35px;
right:35px;
color:rgba(255,255,255,.55);
font-size:11px;
animation:watermark 13s ease-in-out infinite}
.modal-card h2{font-size:18px;
margin:16px 0 3px}
.modal-card p{font-size:11px;
color:var(--muted);
margin:0}
.toast{position:fixed;
bottom:25px;
left:25px;
background:#10192f;
color:#fff;
padding:12px 18px;
border-radius:9px;
font-size:11px;
transform:translateY(80px);
opacity:0;
transition:.3s;
z-index:var(--z-toast)}
.toast.show{transform:none;
opacity:1}
@keyframes watermark{0%{top:35px;
right:35px}
33%{top:70%;
right:50%}
66%{top:20%;
right:65%}
100%{top:35px;
right:35px}
}

@media(max-width:1050px){.stats-grid{grid-template-columns:1fr 1fr}
.dashboard-grid{grid-template-columns:1fr}
.side-column{display:grid;
grid-template-columns:1fr 1fr}
.course{grid-template-columns:38% 62%}
}

@media(max-width:760px){.app-shell{display:block}
.app-shell>main{display:block}
.sidebar{transform:translateX(110%);
transition:.25s;
box-shadow:-10px 0 40px rgba(0,0,0,.2)}
.sidebar.open{transform:none}
.topbar{height:65px;
padding:0 16px}
.menu-btn{display:block;
border:0;
background:transparent;
font-size:22px;
margin-left:12px}
.search{width:auto;
flex:1}
.user-copy,.chevron{display:none}
.content{padding:22px 15px}
.welcome-row{align-items:flex-start}
.welcome-row .primary{display:none}
.welcome-row h1{font-size:21px}
.stats-grid{grid-template-columns:1fr 1fr;
gap:9px}
.stat{padding:12px;
gap:9px}
.stat-icon{width:36px;
height:36px}
.stat strong{font-size:19px}
.course-list,.side-column{grid-template-columns:1fr}
.live-card{grid-template-columns:58px 1fr}
.live-card .outline{grid-column:1/-1}
.video-frame{height:240px}
}

@media(max-width:430px){.stats-grid{grid-template-columns:1fr}
.course{grid-template-columns:40% 60%}
.top-actions{gap:4px}
.notification{margin-left:0}
.panel{padding:15px}
.meta{gap:7px}
}

.logout{text-decoration:none}
.role-link{font-size:10px;
text-decoration:none;
color:#58536b;
background:#f5f7fb;
border:1px solid var(--line);
padding:7px 9px;
border-radius:7px}
.role-link:hover{color:var(--blue);
border-color:#cfd7f2}
@media(max-width:760px){.role-link{display:none}
}


/* =====================================================================
   Afoq UI — Canonical Production Foundation
   One canonical visual layer. Page-specific CSS may load before this file,
   but no older global theme/design-system file should load after it.
   ===================================================================== */


html[data-theme="dark"],body.ms-dark,body.lux-dark{
  color-scheme:dark;

  --ms-bg:#070b14;

  --ms-bg-accent:#13161d;

  --ms-surface:#0d1321;

  --ms-surface-2:#141d33;

  --ms-surface-3:#172139;

  --ms-surface-glass:rgba(23,26,33,.88);

  --ms-text:#f8f7fa;

  --ms-text-2:#dbe5ea;

  --ms-text-3:#a9c0c8;

  --ms-border:#342b59;

  --ms-border-strong:#483d73;

  --ms-focus:rgba(161,154,189,.30);

  --ms-success-soft:#121d36;

  --ms-warning-soft:#381422;

  --ms-danger-soft:#3a1c1c;

  --ms-info-soft:#152b3d;

  --ms-shadow-xs:0 1px 2px rgba(0,0,0,.22);

  --ms-shadow-sm:0 10px 28px rgba(0,0,0,.20),0 1px 2px rgba(0,0,0,.18);

  --ms-shadow-md:0 20px 56px rgba(0,0,0,.30),0 3px 10px rgba(0,0,0,.20);

  --ms-shadow-lg:0 32px 90px rgba(0,0,0,.40),0 10px 30px rgba(0,0,0,.24);

  --ms-shadow-float:0 24px 65px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);

  --bg:var(--ms-bg);
--surface:var(--ms-surface);
--surface-raised:var(--ms-surface);
--surface-soft:var(--ms-surface-3);
--text-primary:var(--ms-text);
--text-secondary:var(--ms-text-2);
--text-muted:var(--ms-text-3);
--border:var(--ms-border);
--border-strong:var(--ms-border-strong);

  --v14-paper:var(--ms-bg);
--v14-line:var(--ms-border);
--v14-text:var(--ms-text);
--v14-muted:var(--ms-text-3);
--v14-card:var(--ms-surface);

}
@media(max-width:720px){
  body.public-site .public-actions{align-items:center}
}


*,*::before,*::after{box-sizing:border-box}

html{min-width:320px;
background:var(--ms-bg);
scroll-behavior:smooth}

html[lang="ar"] body{font-family:var(--ms-font-ar)}

html[lang="en"] body{font-family:var(--ms-font-en)}

body{
  margin:0;

  min-height:100vh;

  color:var(--ms-text);

  background:
    radial-gradient(circle at 92% -8%,rgba(183,71,114,.09),transparent 27rem),
    radial-gradient(circle at 8% 0%,rgba(69,53,132,.08),transparent 30rem),
    var(--ms-bg);

  font-size:15px;

  line-height:1.75;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;

  overflow-x:hidden;

}

html[data-theme="dark"] body,body.ms-dark,body.lux-dark{
  background:
    radial-gradient(circle at 92% -10%,rgba(183,71,114,.07),transparent 28rem),
    radial-gradient(circle at 8% 0%,rgba(103,88,164,.06),transparent 30rem),
    var(--ms-bg);

}

img{max-width:100%}

a{color:inherit}

button,input,textarea,select{font:inherit}

::selection{background:var(--ms-brand-200);
color:var(--ms-brand-950)}


/* Typography */
h1,h2,h3,h4,p{margin-top:0}

h1{font-size:clamp(1.7rem,2vw + 1rem,2.35rem);
line-height:1.35;
letter-spacing:-.025em;
font-weight:800;
color:var(--ms-text)}

h2{font-size:clamp(1.25rem,1.1vw + 1rem,1.65rem);
line-height:1.45;
font-weight:800;
color:var(--ms-text)}

h3{font-size:1.08rem;
line-height:1.55;
font-weight:750;
color:var(--ms-text)}

p{color:var(--ms-text-2);
line-height:1.85}

small,.muted,.note,.v14-note{color:var(--ms-text-3)}


/* Canonical app shell: sidebar stays RIGHT in Arabic and English. */
.dashboard-layout,.ms-app-shell{
direction:ltr;
background:transparent}

.dashboard-sidebar,.sidebar,.ms-sidebar{

  inset-block:0;

  z-index:var(--z-sidebar);

  overflow-y:auto;

  overscroll-behavior:contain;

  color:#edfafa;

  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 16%),
    linear-gradient(180deg,#0d162b 0%,#0a1224 54%,#070d1b 100%);

  border:0;

  border-left:1px solid rgba(255,255,255,.07);

  box-shadow:-16px 0 44px rgba(3,8,20,.14);

  scrollbar-width:thin;

  scrollbar-color:rgba(255,255,255,.18) transparent;

  direction:rtl;

}

html[lang="en"] :is(.dashboard-sidebar,.sidebar,.ms-sidebar){direction:ltr}

.dashboard-main,.ms-main{

  background:transparent;

  direction:rtl;

}

html[lang="en"] :is(.dashboard-main,.ms-main){direction:ltr}


.dashboard-brand,.brand-link,.ms-brand{
  display:flex;
align-items:center;
gap:11px;

  min-height:62px;
padding:8px 10px 14px;
margin-bottom:10px;

  text-decoration:none;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.07);

}

.dashboard-brand-mark,.brand-mark,.afoq-logo-icon{
  width:48px;
height:48px;
min-width:48px;
display:grid;
place-items:center;

  overflow:hidden;
border-radius:14px;
background:#fceef3;
border:1px solid rgba(220,142,172,.42);

  box-shadow:0 8px 22px rgba(0,0,0,.20);

}

.dashboard-brand-mark img,.brand-mark img,.afoq-logo-icon img{width:100%;
height:100%;
object-fit:contain;
padding:4px;
display:block}

.dashboard-brand b,.ms-brand b{display:block;
font-size:17px;
font-weight:800;
letter-spacing:-.01em}

.dashboard-brand small,.ms-brand small{display:block;
margin-top:2px;
color:rgba(255,255,255,.56);
font-size:10px}


.dashboard-nav,.main-nav{display:grid;
gap:3px;
padding:4px 0}

.dashboard-nav-label{margin:17px 10px 7px;
color:rgba(255,255,255,.42);
font-size:10px;
font-weight:700;
letter-spacing:.04em}

.dashboard-nav a,.main-nav a{
  min-height:43px;
display:flex;
align-items:center;
gap:10px;

  padding:9px 11px;
border-radius:12px;
color:rgba(243,242,248,.75);
text-decoration:none;

  font-size:13px;
font-weight:600;
border:1px solid transparent;

  transition:background var(--ms-transition),color var(--ms-transition),transform var(--ms-transition),border-color var(--ms-transition);

}

.dashboard-nav a:hover,.main-nav a:hover{color:#fff;
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.035);
transform:translateX(-2px)}

html[lang="en"] :is(.dashboard-nav a,.main-nav a):hover{transform:translateX(2px)}

.dashboard-nav a.active,.dashboard-nav a[aria-current="page"],.main-nav a.active,.main-nav a[aria-current="page"]{
  color:#fff;
background:linear-gradient(135deg,rgba(103,88,164,.18),rgba(183,71,114,.12));

  border-color:rgba(220,142,172,.12);
box-shadow:inset -2px 0 0 var(--ms-accent-400);

}

.nav-icon{width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:8px;
background:rgba(255,255,255,.055);
color:#e8a7c0;
font-size:13px}

.dashboard-user-card{margin-top:16px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.065);
color:#fff}

.dashboard-user-card small{color:rgba(255,255,255,.50)}

.dashboard-logout{margin-top:8px;
color:#ffd7d7;
background:rgba(191,65,65,.08)}


.dashboard-topbar,.topbar,.site-head,.header,.ms-topbar{
  position:sticky;
top:0;
z-index:var(--z-header);
min-height:var(--ms-topbar);

  display:flex;
align-items:center;
gap:14px;

  padding-inline:var(--ms-gutter);

  background:var(--ms-surface-glass);

  border:0;
border-bottom:1px solid color-mix(in srgb,var(--ms-border) 75%,transparent);

  box-shadow:0 8px 30px rgba(6,12,27,.035);

  backdrop-filter:blur(22px) saturate(145%);
-webkit-backdrop-filter:blur(22px) saturate(145%);

}

.dashboard-topbar{justify-content:space-between}

.dashboard-menu-button{display:none}

.dashboard-search,.ms-search,.search{
  min-height:44px;
display:flex;
align-items:center;
gap:10px;
flex:1 1 360px;
max-width:640px;

  padding-inline:14px;
border:1px solid var(--ms-border);
border-radius:14px;
background:var(--ms-surface-2);
color:var(--ms-text-3);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);

}

.dashboard-search input,.ms-search input,.search input{border:0;
outline:0;
box-shadow:none;
background:transparent;
min-height:auto;
width:100%;
color:var(--ms-text)}

.dashboard-top-actions{display:flex;
align-items:center;
gap:9px;
flex-shrink:0}

.top-icon-button,.icon-button{width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid var(--ms-border);
border-radius:12px;
background:var(--ms-surface);
box-shadow:var(--ms-shadow-xs);
text-decoration:none}

.dashboard-profile{display:flex;
align-items:center;
gap:10px;
text-decoration:none;
padding:5px 7px;
border-radius:14px}

.dashboard-profile:hover{background:var(--ms-surface-3)}

.avatar{display:grid;
place-items:center;
overflow:hidden;
border-radius:50%;
background:linear-gradient(135deg,var(--ms-brand-600),var(--ms-brand-800));
color:white;
font-weight:800}

.avatar img{width:100%;
height:100%;
object-fit:cover}


.dashboard-page,.ms-page{width:min(100%,var(--ms-content));
margin-inline:auto;
padding:clamp(22px,3vw,38px) var(--ms-gutter) 64px}

.page-heading,.section-head,.modern-panel-header,.v14-section-title{
  display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
flex-wrap:wrap;

}

.page-heading{margin-bottom:24px}
.page-heading h1{margin-bottom:5px}
.page-heading p{margin:0}


/* Surface architecture */
:is(.card,.panel,.box,.modern-panel,.dashboard-card,.settings-card,.ticket,.question,.activity,.result-card,.checkout-card,.profile-card,.v14-card,.v14-panel,.course-card,.ms-card){
  background:var(--ms-surface);
color:var(--ms-text);
border:1px solid var(--ms-border);
border-radius:var(--ms-radius-lg);
box-shadow:var(--ms-shadow-sm);

}

:is(.card,.panel,.box,.modern-panel,.settings-card,.v14-card,.ms-card){padding:20px}

:is(.dashboard-card,.course-card,.quick-action,.ms-card-interactive){transition:transform var(--ms-transition),box-shadow var(--ms-transition),border-color var(--ms-transition),background var(--ms-transition)}

:is(.dashboard-card,.course-card,.quick-action,.ms-card-interactive):hover{transform:translateY(-3px);
box-shadow:var(--ms-shadow-md);
border-color:color-mix(in srgb,var(--ms-brand-400) 28%,var(--ms-border))}

.dashboard-cards,.stats-grid,.kpi-grid{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:15px}

.dashboard-card{padding:18px;
min-height:132px;
overflow:hidden;
position:relative}

.dashboard-card::after{content:"";
position:absolute;
width:86px;
height:86px;
border-radius:50%;
inset:auto -28px -34px auto;
background:radial-gradient(circle,rgba(183,71,114,.09),transparent 70%);
pointer-events:none}

.dashboard-card strong{display:block;
font-size:clamp(1.6rem,2.4vw,2.1rem);
line-height:1.2;
color:var(--ms-text);
font-weight:800}

.metric-top{display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
margin-bottom:14px}

.metric-icon{width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:10px;
background:var(--ms-brand-50);
color:var(--ms-brand-700);
border:1px solid var(--ms-brand-100)}

html[data-theme="dark"] .metric-icon{background:rgba(103,88,164,.10);
border-color:rgba(103,88,164,.16);
color:#9a8fc5}

.metric-note{margin-top:8px;
color:var(--ms-text-3);
font-size:12px}
.metric-note.good{color:var(--ms-success)}

.split-layout{display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);
gap:18px;
align-items:start;
margin-top:18px}

.quick-actions-grid{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px}

.quick-action{min-height:70px;
display:flex;
align-items:center;
gap:10px;
padding:14px;
border:1px solid var(--ms-border);
border-radius:15px;
background:var(--ms-surface-2);
text-decoration:none;
color:var(--ms-text);
font-weight:700}

.quick-action span{width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:var(--ms-brand-50);
color:var(--ms-brand-700)}


/* Buttons */
:is(.ms-btn,.btn,.primary,.primary-action,.pay,.submit-btn,.v14-btn){
  min-height:44px;
padding:0 17px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;

  border:1px solid transparent;
border-radius:12px;
background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-800));
color:#fff;
text-decoration:none;

  font:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
box-shadow:0 7px 18px rgba(25,43,84,.16);
transition:transform var(--ms-transition),box-shadow var(--ms-transition),filter var(--ms-transition);

}

:is(.ms-btn,.btn,.primary,.primary-action,.pay,.submit-btn,.v14-btn):hover{transform:translateY(-1px);
box-shadow:0 11px 26px rgba(25,43,84,.20);
filter:saturate(1.04)}

:is(.ghost,.secondary,.secondary-action,.outline,.v14-btn.ghost,.ms-btn-secondary){
  min-height:44px;
padding:0 16px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;

  border:1px solid var(--ms-border-strong);
border-radius:12px;
background:var(--ms-surface);
color:var(--ms-brand-700);
text-decoration:none;
font-weight:700;
box-shadow:var(--ms-shadow-xs);

}

html[data-theme="dark"] :is(.ghost,.secondary,.secondary-action,.outline,.v14-btn.ghost,.ms-btn-secondary){color:var(--ms-text);
background:var(--ms-surface-2)}

:is(button,a,input,select,textarea):focus-visible{outline:none;
box-shadow:0 0 0 4px var(--ms-focus);
border-color:var(--ms-brand-400)}

button:disabled,.btn:disabled,.primary:disabled{opacity:.52;
cursor:not-allowed;
transform:none}


/* Forms / command inputs */
label{color:var(--ms-text);
font-size:13px;
font-weight:700}

input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  width:auto;
min-height:46px;
padding:0 13px;
border:1px solid var(--ms-border);
border-radius:12px;
background:var(--ms-surface);
color:var(--ms-text);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 2px rgba(6,12,27,.025);
transition:border-color var(--ms-transition),box-shadow var(--ms-transition);

}

textarea{min-height:110px;
padding-block:11px;
resize:vertical}

input::placeholder,textarea::placeholder{color:var(--ms-text-3);
opacity:.85}

.field,.form-field,.v14-field{display:grid;
gap:7px}

html[data-theme="dark"] .ms-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}

.ms-state{min-height:260px;
display:grid;
place-items:center;
text-align:center;
padding:38px;
border:1px dashed var(--ms-border-strong);
border-radius:20px;
background:var(--ms-surface-2)}
.ms-state-icon{width:52px;
height:52px;
display:grid;
place-items:center;
margin:0 auto 12px;
border-radius:16px;
background:var(--ms-brand-50);
color:var(--ms-brand-700);
font-size:22px}
.ms-state.error .ms-state-icon{background:var(--ms-danger-soft);
color:var(--ms-danger)}


/* Public/header pages */
.site-head{justify-content:space-between}
.site-head .logo{display:flex;
align-items:center;
gap:9px;
text-decoration:none;
color:var(--ms-text);
font-weight:800}
.site-head nav{display:flex;
gap:6px;
align-items:center}
.site-head nav a{padding:9px 11px;
border-radius:10px;
text-decoration:none;
color:var(--ms-text-2);
font-size:13px;
font-weight:700}
.site-head nav a.active,.site-head nav a:hover{background:var(--ms-surface-3);
color:var(--ms-text)}


/* Login compatibility rules folded into the canonical design system. */
.login-page{padding:clamp(16px,3vw,34px);
background:transparent}

.login-shell{width:min(1040px,100%);
min-height:620px;
border:1px solid var(--ms-border);
border-radius:28px;
background:var(--ms-surface);
box-shadow:var(--ms-shadow-lg)}

.login-brand{background:linear-gradient(155deg,var(--ms-brand-950),var(--ms-brand-700))}
.login-brand::before{background:rgba(255,255,255,.045)}
.login-brand::after{opacity:.055}
.login-brand .brand-mark{width:190px;
height:156px;
background:#fceef3;
border:1px solid rgba(220,142,172,.36);
border-radius:24px;
box-shadow:0 18px 44px rgba(0,0,0,.18)}
.brand-kicker{color:var(--ms-accent-300)}
.brand-tagline,.login-brand p{color:rgba(255,255,255,.76)}
.login-panel{background:var(--ms-surface)}
.login-form-wrap{max-width:440px}
.login-form-wrap h2{font-size:1.85rem}
.form-intro{color:var(--ms-text-2)}
.login-options,.register-row{color:var(--ms-text-3)}
.text-link{color:var(--ms-brand-600)}
.submit-btn{height:54px;
border-radius:13px;
font-size:15px;
box-shadow:0 10px 24px rgba(25,43,84,.19)}


/* Responsive */
@media(max-width:1180px){.dashboard-cards,.stats-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-layout{grid-template-columns:1fr}
.v14-span-8,.v14-span-4{grid-column:span 12}
}

@media(max-width:860px){
  :root{--ms-sidebar:min(320px,86vw)}

  .dashboard-sidebar,.sidebar,.ms-sidebar{
transition:transform var(--ms-transition)}

  .dashboard-menu-button{display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid var(--ms-border);
border-radius:12px;
background:var(--ms-surface);
color:var(--ms-text)}

  .mobile-backdrop{position:fixed;
inset:0;
z-index:var(--z-sidebar-backdrop);
background:rgba(3,6,14,.45);
backdrop-filter:blur(4px);
display:none}
.mobile-backdrop.open{display:block}

  .dashboard-search{order:3;
flex-basis:100%;
max-width:none}
.dashboard-topbar{flex-wrap:wrap;
padding-block:10px}
.dashboard-profile .copy{display:none}

  .site-head{flex-wrap:wrap;
padding-block:10px}
.site-head nav{order:3;
width:100%;
overflow:auto}

  .v14-shell{padding:16px}
.v14-hero{padding:24px}
.v14-toolbar>*{flex:1 1 160px}

  .login-shell{grid-template-columns:1fr;
min-height:auto}
.login-brand{padding:30px 24px}
.login-panel{padding:34px 24px 40px}

}

@media(max-width:620px){.dashboard-page,.ms-page{padding-inline:14px}
.dashboard-cards,.stats-grid,.kpi-grid,.quick-actions-grid{grid-template-columns:1fr}
.course-grid{grid-template-columns:1fr}
.page-heading>*{width:100%}
.page-heading :is(.primary-action,.secondary-action,.btn,.primary){width:100%}
.v14-row{align-items:flex-start;
flex-direction:column}
.ms-toast-stack{inset-inline:10px;
inset-block-start:10px}
.ms-toast{min-width:0;
width:calc(100vw - 20px)}
.dashboard-topbar,.topbar,.site-head{padding-inline:12px}
.login-brand .brand-mark{width:142px;
height:116px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;
animation-duration:.01ms;
animation-iteration-count:1;
transition-duration:.01ms}
}


/* Legacy-page semantic normalization: remove old blue/turquoise islands. */
.help-hero,.practice-hero,.offline-hero,.report-head,.credential-hero,.journey-hero,.hero-mastery{
  background:linear-gradient(135deg,var(--ms-brand-900),var(--ms-brand-700));
color:#fff;
border:1px solid rgba(255,255,255,.07);
box-shadow:var(--ms-shadow-md)
}

.help-hero :is(h1,h2,p),.practice-hero :is(h1,h2,p),.offline-hero :is(h1,h2,p),.report-head :is(h1,h2,p),.credential-hero :is(h1,h2,p),.journey-hero :is(h1,h2,p),.hero-mastery :is(h1,h2,p){color:#fff}

.quick-links a,.role-badge,.guide-count,.offline-badge,.level.progressing,.step.active .step-status,.recommendation>span,.step-number{
  background:var(--ms-brand-50);
color:var(--ms-brand-700);
border-color:var(--ms-brand-100)
}

.guide-item,.pack,.mastery-summary article,.mastery-card,.step,.credential,.evidence div,.report-metrics article,.review,.offline-question,.breakdown div{
  background:var(--ms-surface);
color:var(--ms-text);
border-color:var(--ms-border);
box-shadow:var(--ms-shadow-xs)
}

.guide-item summary,.guide-content,.guide-content>p,.guide-content ol,.step p,.course-state,.recommendation small{color:var(--ms-text-2);
border-color:var(--ms-border)}

.guide-tip,.level.mastered,.result.good,.step.done .step-status{background:var(--ms-success-soft);
color:var(--ms-success)}

.assistant{background:linear-gradient(155deg,var(--ms-brand-950),var(--ms-brand-800));
color:#fff;
border-color:rgba(255,255,255,.08)}
.assistant p{color:rgba(255,255,255,.70)}

.assistant textarea{background:rgba(255,255,255,.96);
color:#171a20}

.track-item.active .track-dot,.meter i{background:linear-gradient(90deg,var(--ms-brand-600),var(--ms-brand-400))}
.track-item.done .track-dot{background:var(--ms-success)}
.track-item.done:not(:last-child)::after{background:var(--ms-success)}

.choice:has(input:checked){border-color:var(--ms-brand-500);
background:var(--ms-brand-50)}
.score,.student{color:var(--ms-brand-700)}

.certificate{background:#fceef3;
color:#171a20}
.certificate :is(h1,h2,h3,.course){color:#171a20}
.certificate .student{color:var(--ms-brand-700)}
.certificate .corner{border-color:var(--ms-brand-700)}
.certificate .button{background:var(--ms-brand-700)}
.certificate .button.secondary{background:#fff;
color:#171a20;
border-color:#dad9df}

.register-row,.login,.intro,.hint,.notice,.rules{color:var(--ms-text-2)}
.notice,.rules{background:var(--ms-surface-3);
border-color:var(--ms-border)}
.submit,.login a{background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-900));
color:#fff}
.login a{background:none;
color:var(--ms-brand-600)}

.success,.state-success{color:var(--ms-success)}
.error,.state-error{color:var(--ms-danger)}

html[data-theme="dark"] :is(.quick-links a,.role-badge,.guide-count,.offline-badge,.level.progressing,.step.active .step-status,.recommendation>span,.step-number){background:rgba(103,88,164,.10);
color:#a59bcb;
border-color:rgba(103,88,164,.16)}

html[data-theme="dark"] .certificate{filter:none;
background:#fceef3;
color:#171a20}

.afoq-ownership{margin-top:auto;
padding:10px 12px;
text-align:center;
color:rgba(255,255,255,.72);
font-size:10px;
line-height:1.5;
border-top:1px solid rgba(255,255,255,.08);
background:linear-gradient(135deg,var(--ms-brand-950),var(--ms-brand-800));
direction:ltr;
letter-spacing:.08px}
.afoq-ownership strong{color:#fff;
font-weight:700}


/* =====================================================================
   Dashboard / Install / Assignment stabilization
   ===================================================================== */

html[data-theme="dark"]{
  --dash-primary-soft:rgba(103,88,164,.10);

  --dash-card:var(--ms-surface);

  --dash-bg:var(--ms-bg);

  --dash-text:var(--ms-text);

  --dash-muted:var(--ms-text-3);

  --dash-line:var(--ms-border);

}


/* The previous dashboard grid reserved a second 264px column while the canonical shell also
   added a sidebar margin. That made all three dashboards look undersized
   on Windows. The current shell uses one canonical fixed-sidebar geometry. */
body.dashboard-body{width:100%;
min-width:0}

.dashboard-page{
  width:100%;

  max-width:none;

  margin:0;

  padding-inline:clamp(22px,2.4vw,42px);

}

.dashboard-topbar{width:100%;
max-width:none}

@media (min-width:1500px){
  .dashboard-page{padding-inline:44px}

  .dashboard-cards{gap:18px}

  .dashboard-card{min-height:142px;
padding:21px}

}

@media(max-width:860px){

  .dashboard-page{padding-inline:14px}

}


/* Student assignments / work center — remove navy/blue legacy island. */
body[data-afoqp-page="feature-center"] .work{max-width:1440px}

body[data-afoqp-page="feature-center"] .hero2{
  color:#fff;

  background:
    radial-gradient(circle at 12% 10%,rgba(202,103,141,.16),transparent 22rem),
    linear-gradient(135deg,var(--ms-brand-900),var(--ms-brand-700));

  border:1px solid rgba(220,142,172,.14);

  box-shadow:var(--ms-shadow-md);

}

body[data-afoqp-page="feature-center"] .hero2 :is(h1,p){color:#fff}

body[data-afoqp-page="feature-center"] .hero2 p{color:rgba(255,255,255,.76)}

body[data-afoqp-page="feature-center"] .tabs button{
  border:1px solid var(--ms-border);

  background:var(--ms-surface);

  color:var(--ms-text-2);

  box-shadow:var(--ms-shadow-xs);

}

body[data-afoqp-page="feature-center"] .tabs button.active{
  color:#fff;

  border-color:rgba(202,103,141,.26);

  background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-900));

}

body[data-afoqp-page="feature-center"] :is(.item,.mini,.empty2){
  color:var(--ms-text);

  background:var(--ms-surface);

  border-color:var(--ms-border);

  box-shadow:var(--ms-shadow-sm);

}

body[data-afoqp-page="feature-center"] .meta{color:var(--ms-text-3)}

body[data-afoqp-page="feature-center"] :is(.actions a,.actions button,.primary2){
  background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-800));

  color:#fff;

}

body[data-afoqp-page="feature-center"] .secondary2{
  background:var(--ms-surface-3);

  color:var(--ms-brand-700);

  border:1px solid var(--ms-border);

}

html[data-theme="dark"] body[data-afoqp-page="feature-center"] .secondary2{color:var(--ms-brand-300)}

body[data-afoqp-page="feature-center"] .notice{background:var(--ms-success-soft);
color:var(--ms-success)}

body[data-afoqp-page="feature-center"] .empty2{color:var(--ms-text-3);
border-style:dashed}


/* Login install experience — canonical install controls.
   Keep the action visible, keyboard accessible and useful on every device. */
.login-app-install{margin-top:18px;
padding-top:18px;
border-top:1px solid var(--ms-border)}

.login-app-install-btn{
  width:100%;
min-height:64px;
padding:10px 14px;
border:1px solid color-mix(in srgb,var(--ms-accent-400) 32%,var(--ms-border));

  border-radius:15px;
background:linear-gradient(135deg,var(--ms-surface),var(--ms-accent-50));
color:var(--ms-text);

  display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
text-align:start;
cursor:pointer;

  box-shadow:var(--ms-shadow-sm);
transition:transform var(--ms-transition),box-shadow var(--ms-transition),border-color var(--ms-transition)
}

.login-app-install-btn:hover{transform:translateY(-2px);
box-shadow:var(--ms-shadow-md);
border-color:var(--ms-accent-400)}

.login-app-install-btn .app-icon{width:40px;
height:40px;
flex:0 0 40px;
display:grid;
place-items:center;
border-radius:12px;
background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-900));
color:#fff;
font-size:19px;
font-weight:800}

.login-app-install-btn>span:last-child{display:grid;
gap:2px;
font-weight:800;
font-size:14px}

.login-app-install-btn small{display:block;
font-weight:500;
font-size:10px;
color:var(--ms-text-3)}

.login-app-install-note{margin:8px 3px 0;
text-align:center;
font-size:10px;
color:var(--ms-text-3)}

html[data-theme="dark"] .login-app-install-btn{background:linear-gradient(135deg,var(--ms-surface-2),rgba(183,71,114,.07));
border-color:var(--ms-border-strong)}


.app-install-modal{position:fixed;
inset:0;
z-index:var(--z-install-modal);
display:none;
place-items:center;
padding:18px;
background:rgba(2,5,13,.56);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px)}

.app-install-modal.open{display:grid}

.app-install-card{width:min(560px,100%);
max-height:min(760px,calc(100dvh - 36px));
overflow:auto;
padding:22px;
border:1px solid var(--ms-border);
border-radius:22px;
background:var(--ms-surface);
color:var(--ms-text);
box-shadow:var(--ms-shadow-lg)}

.app-install-head{display:flex;
align-items:center;
gap:14px;
margin-bottom:14px}

.app-install-logo{width:64px;
height:64px;
flex:0 0 64px;
border-radius:16px;
background:#f7fbfc url('../assets/brand/afoq-logo.png?v=24.10.8') center/88% no-repeat;
border:1px solid var(--ms-accent-200);
box-shadow:var(--ms-shadow-sm)}

.app-install-head h3{margin:0 0 4px}
.app-install-head p{margin:0;
font-size:12px}

.app-device-badge{display:inline-flex;
align-items:center;
gap:5px;
margin:4px 0 16px;
padding:7px 10px;
border-radius:999px;
background:var(--ms-brand-50);
color:var(--ms-brand-700);
font-size:11px;
font-weight:700}

html[data-theme="dark"] .app-device-badge{background:rgba(103,88,164,.10);
color:var(--ms-brand-300)}

.app-install-steps{display:grid;
gap:9px}
.app-install-step{display:grid;
grid-template-columns:30px 1fr;
gap:10px;
align-items:start;
padding:11px;
border:1px solid var(--ms-border);
border-radius:13px;
background:var(--ms-surface-2)}

.app-install-step b{width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:9px;
background:var(--ms-accent-100);
color:var(--ms-accent-800)}

.app-installed-state{padding:14px;
border:1px solid color-mix(in srgb,var(--ms-success) 26%,var(--ms-border));
border-radius:13px;
background:var(--ms-success-soft);
color:var(--ms-success);
font-weight:700}

.app-install-actions{display:flex;
gap:9px;
justify-content:flex-end;
flex-wrap:wrap;
margin-top:18px}

.app-install-primary,.app-install-secondary{min-height:44px;
padding:0 16px;
border-radius:12px;
font:inherit;
font-weight:800;
cursor:pointer}

.app-install-primary{border:0;
background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-900));
color:#fff}

.app-install-secondary{border:1px solid var(--ms-border);
background:var(--ms-surface-2);
color:var(--ms-text)}

@media(max-width:520px){.app-install-head{align-items:flex-start}
.app-install-logo{width:54px;
height:54px;
flex-basis:54px}
.app-install-actions>*{width:100%}
}


/* Notification indicator is data-driven instead of permanently lit. */
.top-icon-button .alert-dot{display:none}

.top-icon-button.has-unread .alert-dot{display:block}

.top-icon-button .notification-count{position:absolute;
inset-block-start:-6px;
inset-inline-start:-7px;
min-width:20px;
height:20px;
padding:0 5px;
border-radius:999px;
display:grid;
place-items:center;
background:var(--ms-danger);
color:#fff;
border:2px solid var(--ms-surface);
font-size:9px;
font-weight:800;
line-height:1}


/* Notification center */
.notification-center{width:min(1040px,100%);
margin:0 auto;
padding:34px var(--ms-gutter) 64px}

.notification-shell{padding:24px}

.notification-head{display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
margin-bottom:18px}
.notification-head h1{margin:3px 0 5px}
.notification-head p{margin:0}
.notification-kicker{color:var(--ms-accent-600);
font-size:11px;
font-weight:800;
letter-spacing:.04em}
.notification-summary-card{min-width:110px;
padding:12px 15px;
border:1px solid var(--ms-border);
border-radius:15px;
background:var(--ms-surface-2);
text-align:center}
.notification-summary-card strong{display:block;
font-size:26px;
line-height:1;
color:var(--ms-brand-700)}
.notification-summary-card span{display:block;
margin-top:5px;
color:var(--ms-text-3);
font-size:10px}
.notification-filter{display:flex;
gap:7px;
overflow:auto;
padding:2px 0 14px;
scrollbar-width:thin}
.notification-filter button{min-height:38px;
white-space:nowrap;
padding:0 13px;
border:1px solid var(--ms-border);
border-radius:999px;
background:var(--ms-surface);
color:var(--ms-text-2);
font:inherit;
font-size:11px;
font-weight:700;
cursor:pointer}
.notification-filter button.active{border-color:rgba(183,71,114,.22);
background:linear-gradient(135deg,var(--ms-brand-700),var(--ms-brand-900));
color:#fff}
.notification-list{display:grid;
gap:9px}
.notification-item{position:relative;
display:grid;
grid-template-columns:42px 1fr auto;
gap:12px;
align-items:center;
padding:13px 14px;
border:1px solid var(--ms-border);
border-radius:15px;
background:var(--ms-surface-2);
color:var(--ms-text);
text-decoration:none;
transition:transform var(--ms-transition),border-color var(--ms-transition),background var(--ms-transition),box-shadow var(--ms-transition)}
.notification-item:hover{transform:translateY(-1px);
border-color:var(--ms-border-strong);
box-shadow:var(--ms-shadow-sm)}
.notification-item.is-unread{background:linear-gradient(135deg,color-mix(in srgb,var(--ms-brand-50) 72%,var(--ms-surface)),var(--ms-surface));
border-color:color-mix(in srgb,var(--ms-brand-300) 38%,var(--ms-border))}
.notification-type{width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:12px;
background:var(--ms-brand-50);
color:var(--ms-brand-700);
font-weight:800}
.notification-type[data-type="FINANCE"]{background:var(--ms-accent-50);
color:var(--ms-accent-700)}
.notification-type[data-type="SECURITY"]{background:var(--ms-danger-soft);
color:var(--ms-danger)}
.notification-copy{min-width:0;
display:grid;
gap:2px}
.notification-copy b{font-size:13px}
.notification-copy>span{color:var(--ms-text-2);
font-size:11px;
line-height:1.7}
.notification-copy small{font-size:9px}
.notification-unread-dot{width:8px;
height:8px;
border-radius:50%;
background:var(--ms-accent-500);
box-shadow:0 0 0 4px color-mix(in srgb,var(--ms-accent-500) 12%,transparent)}
.notification-empty{min-height:180px}
.notification-empty b{display:block;
color:var(--ms-text);
font-size:14px}
.notification-empty span{display:block;
margin-top:5px;
color:var(--ms-text-3);
font-size:11px}

html[data-theme="dark"] .notification-item.is-unread{background:linear-gradient(135deg,rgba(103,88,164,.09),var(--ms-surface-2))}

@media(max-width:620px){.notification-center{padding:20px 12px 42px}
.notification-shell{padding:16px}
.notification-head{align-items:stretch;
flex-direction:column}
.notification-summary-card{display:flex;
align-items:center;
justify-content:space-between;
text-align:start}
.notification-summary-card strong{font-size:22px}
.notification-item{grid-template-columns:38px 1fr auto;
padding:11px}
.notification-type{width:36px;
height:36px}
}

*{box-sizing:border-box}
body.dashboard-body{margin:0;
background:var(--dash-bg);
color:var(--dash-text);
font-family:"Tajawal",Arial,sans-serif}
.dashboard-sidebar{
background:linear-gradient(180deg,var(--dash-navy),#070b14);
color:#fff;
flex-direction:column;
z-index:var(--z-sidebar)}
.dashboard-brand{display:flex;
align-items:center;
gap:12px;
padding:2px 8px 22px;
border-bottom:1px solid rgba(255,255,255,.08);
color:#fff;
text-decoration:none}
.dashboard-brand-mark{width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:13px;
background:linear-gradient(135deg,#e35a8f,#30245f);
font-weight:800;
font-size:24px;
box-shadow:0 10px 25px rgba(6,12,27,.28)}
.dashboard-brand b{display:block;
font-size:19px}
.dashboard-brand small{display:block;
color:#aca9b9;
font-size:10px;
margin-top:2px}
.dashboard-nav{padding-top:17px;
flex:1}
.dashboard-nav-label{margin:14px 12px 7px;
color:#9591a5;
font-size:10px;
font-weight:700}
.dashboard-nav a{display:flex;
align-items:center;
gap:11px;
min-height:43px;
margin:3px 0;
padding:10px 12px;
border-radius:10px;
color:#c9c7d2;
text-decoration:none;
font-size:12px;
font-weight:600;
transition:.18s}
.dashboard-nav a:hover,.dashboard-nav a.active{color:#fff;
background:linear-gradient(90deg,rgba(103,88,164,.20),rgba(183,71,114,.10))}
.dashboard-nav a.active{box-shadow:inset -3px 0 0 #e35a8f}
.dashboard-nav .nav-icon{width:23px;
text-align:center;
font-size:16px}
.dashboard-nav .nav-dot{margin-right:auto;
width:7px;
height:7px;
border-radius:50%;
background:#ef6670;
box-shadow:0 0 0 3px rgba(239,102,112,.13)}
.dashboard-nav .nav-count{margin-right:auto;
min-width:22px;
height:20px;
border-radius:10px;
display:grid;
place-items:center;
background:rgba(255,255,255,.1);
font-size:9px}
.dashboard-user-card{margin-top:16px;
padding:12px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.07);
display:flex;
align-items:center;
gap:10px}
.dashboard-user-card .avatar{width:35px;
height:35px;
display:grid;
place-items:center;
border-radius:10px;
background:#453584;
color:#fff;
font-weight:800}
.dashboard-user-card b{display:block;
font-size:11px}
.dashboard-user-card small{display:block;
color:#aca9b9;
font-size:9px;
margin-top:2px}
.dashboard-logout{display:flex;
align-items:center;
gap:9px;
padding:11px 12px;
margin-top:8px;
border-radius:10px;
color:#b6b4c0;
text-decoration:none;
font-size:11px}
.dashboard-logout:hover{background:rgba(255,255,255,.05);
color:#fff}
.dashboard-main{grid-column:2}
.dashboard-topbar{min-height:72px;height:auto;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--dash-line);
display:flex;
align-items:center;
gap:17px;
padding:0 28px;
position:sticky;
top:0;
z-index:var(--z-header)}
.dashboard-menu-button{display:none;
border:0;
background:#eef3f6;
border-radius:9px;
width:38px;
height:38px;
font-size:18px;
cursor:pointer}
.dashboard-search{max-width:430px;
flex:1;
position:relative}
.dashboard-search span{position:absolute;
right:13px;
top:50%;
transform:translateY(-50%);
color:#7d7a87}
.dashboard-search input{width:100%;
height:40px;
border:1px solid #e0dfe5;
background:#fbfcfd;
border-radius:10px;
padding:0 38px 0 12px;
font:inherit;
font-size:11px;
outline:none}
.dashboard-search input:focus{border-color:#8f83be;
background:#fff;
box-shadow:0 0 0 3px rgba(69,53,132,.10)}
.dashboard-top-actions{margin-right:auto;
display:flex;
align-items:center;
gap:9px}
.top-icon-button{width:39px;
height:39px;
border:1px solid var(--dash-line);
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
color:#607480;
text-decoration:none;
cursor:pointer;
position:relative}
.top-icon-button .alert-dot{position:absolute;
top:7px;
left:7px;
width:7px;
height:7px;
border-radius:50%;
background:#bf4141;
border:2px solid #fff}
.dashboard-profile{display:flex;
align-items:center;
gap:9px;
padding:4px 6px 4px 9px;
border-radius:10px;
text-decoration:none;
color:inherit}
.dashboard-profile:hover{background:#eef3f6}
.dashboard-profile .avatar{width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:10px;
background:var(--dash-primary-soft);
color:#30245f;
font-weight:800}
.dashboard-profile b{display:block;
font-size:11px}
.dashboard-profile small{display:block;
color:var(--dash-muted);
font-size:9px;
margin-top:2px}
.dashboard-page{padding:28px;
max-width:1460px;
margin:auto}
.page-heading{display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-end;
margin-bottom:22px}
.page-heading h1{font-size:25px;
margin:0 0 5px}
.page-heading p{font-size:11px;
color:var(--dash-muted);
margin:0;
line-height:1.7}
.primary-action,.secondary-action{min-height:39px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
border:0;
border-radius:9px;
padding:0 15px;
text-decoration:none;
font:inherit;
font-size:11px;
font-weight:700;
cursor:pointer}
.primary-action{background:var(--dash-primary);
color:#fff;
box-shadow:0 7px 18px rgba(25,43,84,.18)}
.primary-action:hover{background:#121f3f}
.secondary-action{background:#fff;
color:#4c606d;
border:1px solid var(--dash-line)}
.dashboard-cards{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:13px;
margin-bottom:20px}
.dashboard-card{background:var(--dash-card);
border:1px solid var(--dash-line);
border-radius:14px;
padding:17px;
box-shadow:0 2px 9px rgba(23,34,59,.02)}
.dashboard-card .metric-top{display:flex;
justify-content:space-between;
align-items:center;
gap:8px}
.dashboard-card small{color:var(--dash-muted);
font-size:10px}
.dashboard-card strong{display:block;
margin-top:8px;
font-size:26px;
letter-spacing:-.5px}
.dashboard-card .metric-icon{width:36px;
height:36px;
border-radius:10px;
background:var(--dash-primary-soft);
color:#30245f;
display:grid;
place-items:center;
font-size:17px}
.dashboard-card .metric-note{font-size:9px;
color:#8791a3;
margin-top:5px}
.dashboard-card .metric-note.good{color:var(--dash-success)}
.modern-panel{background:#fff;
border:1px solid var(--dash-line);
border-radius:14px;
padding:18px;
box-shadow:0 2px 9px rgba(23,34,59,.02);
margin-bottom:16px}
.modern-panel-header{display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:15px}
.modern-panel-header h2{margin:0;
font-size:14px}
.modern-panel-header p{margin:4px 0 0;
color:var(--dash-muted);
font-size:10px}
.responsive-table{overflow:auto}
.responsive-table table{width:100%;
border-collapse:collapse;
min-width:650px}
.responsive-table th{background:#fbfcfd;
color:#7d7a87;
font-size:9px;
text-align:right;
padding:10px;
font-weight:600}
.responsive-table td{padding:11px 10px;
border-bottom:1px solid #e8e7eb;
font-size:10px}
.responsive-table tr:last-child td{border-bottom:0}
.status-pill{display:inline-flex;
align-items:center;
gap:5px;
padding:4px 8px;
border-radius:20px;
background:#edeaf8;
color:#2c1686;
font-size:9px}
.status-pill.warning{background:#fbecf2;
color:#bd1555}
.status-pill.muted{background:#f0f2f6;
color:#788397}
.quick-actions-grid{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px}
.quick-action{display:flex;
align-items:center;
gap:9px;
border:1px solid var(--dash-line);
border-radius:11px;
padding:12px;
text-decoration:none;
color:#4c606d;
background:#fff;
font-size:10px;
font-weight:600}
.quick-action span{width:31px;
height:31px;
border-radius:9px;
background:var(--dash-primary-soft);
color:#30245f;
display:grid;
place-items:center;
font-size:15px}
.quick-action:hover{border-color:#c0b9db;
background:#f8fbfc}
.split-layout{display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);
gap:16px}
.empty-state{padding:28px 14px;
text-align:center;
color:var(--dash-muted);
font-size:11px}
.mobile-backdrop{display:none}

@media(max-width:1050px){.dashboard-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-layout{grid-template-columns:1fr}
}

@media(max-width:820px){
.dashboard-sidebar{
transition:.2s}
.dashboard-main{grid-column:auto}
.dashboard-menu-button{display:grid;
place-items:center}
.dashboard-page{padding:20px 14px}
.dashboard-topbar{padding:0 14px}
.dashboard-search{max-width:none}
.dashboard-profile .copy{display:none}
.mobile-backdrop{position:fixed;
inset:0;
background:rgba(8,17,33,.48);
z-index:var(--z-sidebar-backdrop)}
.mobile-backdrop.open{display:block}
}

@media(max-width:560px){.dashboard-cards{grid-template-columns:1fr}
.quick-actions-grid{grid-template-columns:1fr}
.dashboard-search{display:none}
.page-heading{align-items:flex-start;
flex-direction:column}
.page-heading .primary-action{width:100%}
.dashboard-top-actions{margin-right:auto}
.dashboard-card strong{font-size:23px}
}

*{box-sizing:border-box}
body{margin:0;
background:#f6f8fc;
color:#10192f;
font-family:"Tajawal",sans-serif}
.header{height:70px;
padding:0 32px;
display:flex;
align-items:center;
background:#fff;
border-bottom:1px solid #e7ebf2;
position:sticky;
top:0;
z-index:var(--z-header)}
.logo{display:flex;
align-items:center;
gap:9px;
color:#10192f;
text-decoration:none;
font-weight:800}
.logo i{font-style:normal;
background:#372874;
color:white;
width:38px;
height:38px;
border-radius:11px;
display:grid;
place-items:center;
font-size:21px}
.header nav{margin-right:auto;
display:flex;
gap:4px}
.header nav a{color:#6d7f8a;
text-decoration:none;
font-size:11px;
padding:8px 10px;
border-radius:7px}
.header nav a:hover,.header nav a.active{color:#372874;
background:#e7f7f6}
.account{margin-right:18px;
display:flex;
align-items:center;
gap:9px;
font-size:10px}
.account span{width:36px;
height:36px;
display:grid;
place-items:center;
background:#e7f7f6;
color:#372874;
border-radius:10px;
font-weight:800}
.wrap{max-width:1280px;
margin:auto;
padding:29px 32px 55px}
.title{display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:24px}
.title h1{font-size:24px;
margin:0}
.title p{font-size:11px;
color:#777484;
margin:6px 0 0}
.btn{border:0;
background:#372874;
color:white;
border-radius:8px;
padding:10px 15px;
font:inherit;
font-size:10px;
cursor:pointer;
text-decoration:none}
.metrics{display:grid;
grid-template-columns:repeat(4,1fr);
gap:13px;
margin-bottom:17px}
.metric,.card{background:white;
border:1px solid #e7ebf2;
border-radius:12px;
padding:18px}
.metric small{color:#7e899c}
.metric strong{display:block;
font-size:26px;
margin:9px 0 3px}
.metric em{font-size:9px;
color:#3518a7;
font-style:normal}
.grid{display:grid;
grid-template-columns:1.45fr .75fr;
gap:17px}
.card{margin-bottom:17px}
.head{display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px}
.head h2{font-size:14px;
margin:0}
.head a{font-size:9px;
text-decoration:none;
color:#372874}
table{width:100%;
border-collapse:collapse}
th{text-align:right;
background:#f8f9fc;
color:#8b95a7;
font-size:9px;
font-weight:500;
padding:9px}
td{border-bottom:1px solid #edf0f5;
padding:11px 9px;
font-size:10px}
tr:last-child td{border:0}
.person{display:flex;
align-items:center;
gap:8px}
.person>span{width:30px;
height:30px;
border-radius:8px;
background:#e7f7f6;
color:#372874;
display:grid;
place-items:center;
font-weight:700}
.person b,.person small{display:block}
.person small{color:#929cad;
font-size:8px}
.status{font-size:8px;
padding:3px 7px;
border-radius:10px;
background:#edfafa;
color:#3418a6}
.warn{background:#faeaf0;
color:#d92d6f}
.off{background:#f0f1f4;
color:#777484}
.progress{width:75px;
height:4px;
background:#edf0f5;
border-radius:5px;
display:inline-block}
.progress i{display:block;
height:100%;
background:#372874;
border-radius:5px}
.quick{display:grid;
grid-template-columns:1fr 1fr;
gap:8px}
.quick a{border:1px solid #e5e9f1;
border-radius:9px;
padding:14px 5px;
text-align:center;
color:#627087;
text-decoration:none;
font-size:9px}
.quick b{display:block;
color:#372874;
font-size:20px;
margin-bottom:4px}
.activity{display:flex;
gap:9px;
padding:10px 0;
border-bottom:1px solid #edf0f5}
.activity:last-child{border:0}
.activity>span{width:30px;
height:30px;
border-radius:50%;
background:#e7f7f6;
color:#372874;
display:grid;
place-items:center}
.activity b,.activity small{display:block;
font-size:9px}
.activity small{color:#8c96a8;
margin-top:3px}
.bars{height:180px;
display:flex;
align-items:flex-end;
gap:12px}
.bars div{flex:1;
text-align:center}
.bars i{display:block;
background:linear-gradient(#7b91e8,#372874);
border-radius:5px 5px 2px 2px}
.bars span{font-size:8px;
color:#8b95a7}
.note{background:#fbedf2;
border:1px solid #f0b5cc;
color:#87264b;
border-radius:8px;
padding:11px;
font-size:9px;
line-height:1.7}
.modal{display:none;
position:fixed;
inset:0;
background:#10182cb8;
z-index:var(--z-modal);
place-items:center}
.modal.open{display:grid}
.form{width:min(460px,92vw);
background:white;
padding:22px;
border-radius:14px}
.form h2{margin-top:0}
.field{margin-bottom:11px}
.field label{font-size:10px;
display:block;
margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;
padding:10px;
border:1px solid #dfe4ed;
border-radius:8px;
font:inherit;
font-size:10px}
.actions{display:flex;
justify-content:flex-end;
gap:7px}
.secondary{background:white;
color:#607087;
border:1px solid #dfe4ed}
@media(max-width:850px){.metrics{grid-template-columns:1fr 1fr}
.grid{grid-template-columns:1fr}
.header nav{display:none}
.wrap{padding:22px 14px}
.header{padding:0 15px}
.table{overflow:auto}
.table table{min-width:600px}
}
@media(max-width:450px){.metrics{grid-template-columns:1fr}
.account b{display:none}
.title h1{font-size:19px}
}

*{box-sizing:border-box}
body{margin:0;
background:#f6f8fc;
color:#10192f;
font-family:"Tajawal",sans-serif}
.site-head{height:68px;
background:white;
border-bottom:1px solid #e7ebf2;
display:flex;
align-items:center;
padding:0 5%;
position:sticky;
top:0;
z-index:var(--z-header)}
.site-head .logo{display:flex;
align-items:center;
gap:9px;
text-decoration:none;
color:#10192f;
font-weight:800}
.logo i{font-style:normal;
background:#372874;
color:white;
width:38px;
height:38px;
border-radius:11px;
display:grid;
place-items:center;
font-size:20px}
.site-head nav{margin-right:auto;
display:flex;
gap:7px}
.site-head nav a{font-size:11px;
color:#6d7f8a;
text-decoration:none;
padding:8px 10px;
border-radius:7px}
.site-head nav a:hover{background:#e7f7f6;
color:#372874}
.user-pill{margin-right:15px;
background:#e7f7f6;
color:#372874;
padding:8px 11px;
border-radius:8px;
font-size:10px;
text-decoration:none}
.container{max-width:1200px;
margin:auto;
padding:32px 24px 60px}
.hero{background:linear-gradient(135deg,#070c17,#30245f);
border-radius:18px;
padding:42px;
color:white;
position:relative;
overflow:hidden}
.hero:after{content:'م';
position:absolute;
left:20px;
bottom:-130px;
font-size:350px;
font-weight:800;
color:#ffffff08}
.hero h1{font-size:34px;
margin:0 0 8px}
.hero p{color:#bcc7db;
font-size:12px}
.hero-search{width:min(540px,100%);
height:48px;
background:white;
border-radius:10px;
display:flex;
align-items:center;
padding:0 14px;
margin-top:24px}
.hero-search input{border:0;
outline:0;
font:inherit;
width:100%;
padding:0 9px}
.filters{display:flex;
gap:8px;
margin:24px 0;
flex-wrap:wrap}
.filter{border:1px solid #dfe4ed;
background:white;
color:#677389;
border-radius:18px;
padding:7px 14px;
font:inherit;
font-size:10px;
cursor:pointer}
.filter.active{background:#372874;
color:white;
border-color:#372874}
.course-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.course-card{background:white;
border:1px solid #e5e9f1;
border-radius:13px;
overflow:hidden;
transition:.2s}
.course-card:hover{transform:translateY(-3px);
box-shadow:0 12px 25px #1b2b520d}
.cover-art{height:135px;
display:grid;
place-items:center;
color:white;
font-size:48px;
position:relative}
.cover-art small{position:absolute;
top:11px;
right:11px;
background:#ffffffdf;
color:#33415d;
font-size:8px;
padding:4px 7px;
border-radius:10px}
.course-body{padding:15px}
.course-body>small{color:#372874;
font-size:9px}
.course-body h2{font-size:14px;
margin:7px 0 4px}
.course-body p{font-size:9px;
color:#777484;
margin:0}
.course-meta{display:flex;
justify-content:space-between;
border-top:1px solid #edf0f5;
margin-top:12px;
padding-top:11px;
font-size:9px}
.course-meta strong{font-size:12px}
.course-actions{display:flex;
gap:7px;
margin-top:11px}
.primary,.ghost{flex:1;
text-align:center;
border:0;
border-radius:7px;
padding:9px;
font:inherit;
font-size:9px;
text-decoration:none;
cursor:pointer}
.primary{background:#372874;
color:white}
.ghost{border:1px solid #dfe4ed;
color:#5f6b80;
background:white}
.empty{grid-column:1/-1;
text-align:center;
padding:50px;
color:#8590a2}
.checkout-grid{display:grid;
grid-template-columns:1fr 360px;
gap:20px}
.box{background:white;
border:1px solid #e5e9f1;
border-radius:13px;
padding:22px}
.box h1,.box h2{margin-top:0}
.field{margin-bottom:14px}
.field label{font-size:10px;
display:block;
margin-bottom:6px}
.field input,.field select{width:100%;
height:43px;
border:1px solid #dfe4ed;
border-radius:8px;
padding:0 11px;
font:inherit;
font-size:11px}
.payment-method{border:2px solid #372874;
background:#f7f9ff;
border-radius:9px;
padding:14px;
display:flex;
justify-content:space-between;
font-size:11px}
.summary-course{display:flex;
gap:11px;
align-items:center;
border-bottom:1px solid #edf0f5;
padding-bottom:14px}
.summary-course span{width:54px;
height:54px;
border-radius:10px;
display:grid;
place-items:center;
color:white;
font-size:25px}
.summary-course h3{font-size:12px;
margin:0 0 4px}
.summary-course p{font-size:9px;
color:#7e899c;
margin:0}
.line{display:flex;
justify-content:space-between;
font-size:10px;
margin:13px 0}
.total{border-top:1px solid #e5e9f1;
padding-top:13px;
font-size:13px}
.pay{width:100%;
height:44px;
border:0;
background:#3418a6;
color:white;
border-radius:8px;
font:inherit;
cursor:pointer;
margin-top:12px}
.secure{text-align:center;
font-size:8px;
color:#8490a3;
margin-top:10px}
.player-layout{display:grid;
grid-template-columns:1fr 310px;
gap:17px}
.video{aspect-ratio:16/9;
background:linear-gradient(135deg,#070c17,#070b14);
border-radius:13px;
display:grid;
place-items:center;
color:white;
position:relative;
overflow:hidden}
.video .play-big{font-size:48px}
.wm{position:absolute;
color:#ffffff75;
font-size:10px;
animation:wm 12s infinite}
.video-controls{position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(transparent,#000b);
padding:30px 15px 12px;
font-size:10px}
.timeline{height:3px;
background:#ffffff48;
margin-bottom:9px}
.timeline i{display:block;
width:42%;
height:100%;
background:#c44e7b}
.lesson-list{max-height:550px;
overflow:auto}
.lesson{display:flex;
gap:9px;
padding:11px;
border-bottom:1px solid #edf0f5;
text-decoration:none;
color:#58536b}
.lesson.active{background:#e7f7f6;
color:#372874}
.lesson span{width:25px;
height:25px;
border-radius:50%;
border:1px solid #dce2ed;
display:grid;
place-items:center;
font-size:8px}
.lesson b,.lesson small{display:block;
font-size:9px}
.lesson small{color:#8b95a7;
margin-top:3px}
.quiz{max-width:780px;
margin:auto}
.question{background:white;
border:1px solid #e5e9f1;
border-radius:12px;
padding:20px;
margin:14px 0}
.question h3{font-size:13px}
.option{display:block;
border:1px solid #e3e7ef;
border-radius:8px;
padding:11px;
margin:8px 0;
font-size:10px;
cursor:pointer}
.option:has(input:checked){border-color:#372874;
background:#f4f3f7}
.result{text-align:center;
padding:45px}
.result strong{font-size:48px;
color:#3418a6;
display:block}
.hidden{display:none}
@keyframes wm{0%{top:12%;
right:10%}
33%{top:70%;
right:55%}
66%{top:20%;
right:65%}
100%{top:12%;
right:10%}
}
@media(max-width:850px){.course-grid{grid-template-columns:1fr 1fr}
.checkout-grid,.player-layout{grid-template-columns:1fr}
.site-head nav{display:none}
}
@media(max-width:520px){.course-grid{grid-template-columns:1fr}
.container{padding:20px 13px}
.hero{padding:27px 20px}
.hero h1{font-size:25px}
}

/* Guided Experience, Campaigns & Mobile Navigation */

.mx-context-bar{position:sticky;
top:0;
z-index:var(--z-context);
display:flex;
align-items:center;
gap:9px;
min-height:50px;
padding:7px 16px;
background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--border,#e5e7eb);
direction:rtl}

.mx-context-bar .mx-home,.mx-context-bar .mx-command,.mx-context-bar .mx-guide,.mx-primary-next{border:1px solid var(--border,#e5e7eb);
background:var(--surface,#fff);
color:inherit;
text-decoration:none;
border-radius:12px;
padding:7px 11px;
font-weight:750;
cursor:pointer;
font:inherit}
.mx-primary-next{background:var(--mx-accent);
border-color:var(--mx-accent);
color:#fff;
white-space:nowrap}
.mx-guide{white-space:nowrap}
.mx-context-title{min-width:0;
display:flex;
align-items:center;
gap:8px;
flex:1}
.mx-context-title b{white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.mx-role-badge{font-size:11px;
padding:4px 8px;
border-radius:999px;
background:var(--mx-soft);
color:var(--mx-accent);
white-space:nowrap}
.mx-command-kbd{opacity:.6;
font-size:11px;
margin-inline-start:5px}
.mx-palette-backdrop{position:fixed;
inset:0;
background:rgba(8,10,15,.48);
z-index:var(--z-command);
display:grid;
place-items:start center;
padding-top:min(16vh,140px)}
.mx-palette{width:min(680px,calc(100% - 28px));
background:var(--surface,#fff);
border:1px solid var(--border,#ddd);
border-radius:22px;
box-shadow:0 30px 80px rgba(0,0,0,.22);
overflow:hidden;
direction:rtl}
.mx-palette input{width:100%;
padding:18px 20px;
border:0;
border-bottom:1px solid var(--border,#eee);
font:inherit;
background:transparent;
color:inherit;
outline:0}
.mx-palette-list{max-height:55vh;
overflow:auto;
padding:8px}
.mx-palette-item{display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:13px;
text-decoration:none;
color:inherit}
.mx-palette-item:hover,.mx-palette-item:focus{background:var(--mx-soft);
outline:none}
.mx-palette-item small{opacity:.65}
.mx-hidden{display:none}
.mx-admin-hub{display:flex;
gap:7px;
overflow:auto;
padding-bottom:2px;
scrollbar-width:thin}
.mx-admin-hub a{white-space:nowrap;
border:1px solid var(--border,#ddd);
border-radius:999px;
padding:7px 10px;
text-decoration:none;
color:inherit;
background:var(--surface,#fff);
font-size:12px}
.mx-admin-hub a:hover{border-color:var(--mx-accent);
color:var(--mx-accent)}


.mx-tour-backdrop{position:fixed;
inset:0;
z-index:var(--z-tour);
background:rgba(8,10,15,.58);
display:grid;
place-items:center;
padding:18px;
backdrop-filter:blur(4px);
direction:rtl}
.mx-tour{position:relative;
width:min(560px,100%);
background:var(--surface,#fff);
color:var(--text,#171b23);
border:1px solid var(--border,#ddd);
border-radius:26px;
padding:30px;
box-shadow:0 30px 90px rgba(0,0,0,.28)}
.mx-tour-close{position:absolute;
inset-inline-start:16px;
top:14px;
border:0;
background:transparent;
color:inherit;
font-size:28px;
cursor:pointer}
.mx-tour-progress{display:flex;
gap:6px;
margin-bottom:22px}
.mx-tour-progress span{height:5px;
flex:1;
border-radius:20px;
background:var(--border,#e5e4e7)}
.mx-tour-progress span.active{background:var(--mx-accent)}
.mx-tour-icon{width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:18px;
background:var(--mx-soft);
font-size:25px;
color:var(--mx-accent);
margin-bottom:12px}
.mx-tour-kicker{margin:0 0 4px;
color:var(--mx-accent);
font-size:12px;
font-weight:850}
.mx-tour h2{font-size:25px;
margin:0 0 8px}
.mx-tour-text{line-height:1.85;
opacity:.82;
margin:0}
.mx-tour-actions{display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
margin-top:24px}
.mx-tour-open,.mx-tour-next{border-radius:13px;
padding:10px 14px;
text-decoration:none;
font:inherit;
font-weight:800;
cursor:pointer}
.mx-tour-open{border:1px solid var(--border,#ddd);
color:inherit}
.mx-tour-next{border:1px solid var(--mx-accent);
background:var(--mx-accent);
color:#fff}


.mx-inline-help{display:flex;
align-items:flex-start;
gap:12px;
margin:0 0 16px;
padding:14px 16px;
border:1px solid color-mix(in srgb,var(--mx-accent) 30%,var(--border,#ddd));
border-radius:16px;
background:var(--mx-soft);
direction:rtl}
.mx-inline-help>span{width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:var(--mx-accent);
color:#fff;
font-weight:900;
flex:0 0 auto}
.mx-inline-help div{flex:1}
.mx-inline-help b{display:block;
margin-bottom:3px}
.mx-inline-help p{margin:0;
line-height:1.65;
font-size:13px;
opacity:.78}
.mx-inline-help button{border:0;
background:transparent;
color:inherit;
font-size:20px;
cursor:pointer}


.mx-ads{display:grid;
gap:10px;
margin:14px 0 20px;
direction:rtl}
.mx-ad{position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
border:1px solid var(--border,#ddd);
border-radius:20px;
padding:18px 20px;
overflow:hidden}
.mx-ad::before{content:'';
position:absolute;
inset-inline-start:-38px;
top:-65px;
width:150px;
height:150px;
border-radius:50%;
background:currentColor;
opacity:.06}
.mx-ad-copy{position:relative;
min-width:0}
.mx-ad-label{display:inline-flex;
border-radius:999px;
padding:4px 8px;
margin-bottom:6px;
font-size:10px;
font-weight:900;
letter-spacing:.02em;
background:rgba(255,255,255,.62);
color:inherit}
.mx-ad h3{font-size:18px;
margin:0 0 4px}
.mx-ad p{margin:0;
line-height:1.6;
font-size:13px;
opacity:.8}
.mx-ad-cta{position:relative;
flex:0 0 auto;
border-radius:12px;
padding:9px 13px;
text-decoration:none;
font-weight:850;
color:#fff}
.mx-ad-cta::first-line{color:#fff}
.mx-ad-teal .mx-ad-cta{background:#172545}
.mx-ad-accent .mx-ad-cta{background:#8a2f52}
.mx-ad-info .mx-ad-cta{background:#372874}
.mx-ad-teal{background:linear-gradient(120deg,rgba(41,28,91,.13),rgba(41,28,91,.04));
color:#17274d;
border-color:rgba(41,28,91,.22)}
.mx-ad-accent{background:linear-gradient(120deg,rgba(181,72,114,.16),rgba(181,72,114,.04));
color:#772746;
border-color:rgba(181,72,114,.3)}
.mx-ad-info{background:linear-gradient(120deg,rgba(45,105,160,.14),rgba(45,105,160,.04));
color:#372874;
border-color:rgba(45,105,160,.24)}
.mx-ad-dark{background:linear-gradient(120deg,#172034,#101727);
color:#f7f6fb;
border-color:#29334c}
.mx-ad-dark .mx-ad-label{background:rgba(255,255,255,.12)}
.mx-ad-dark .mx-ad-cta{background:#fff;
color:#172034}
.mx-ad-dark .mx-ad-cta::first-line{color:#172034}


.mx-mobile-nav{display:none}
.mx-mobile-nav a{text-decoration:none;
color:inherit}
.mx-mobile-nav a.active{color:var(--mx-accent)}

@media(max-width:1050px){.mx-admin-hub{display:none}
.mx-guide{display:none}
}

@media(max-width:720px){body{padding-bottom:76px}
.mx-context-bar{padding:6px 9px;
gap:6px}
.mx-context-title{display:none}
.mx-command-kbd,.mx-home{display:none}
.mx-context-bar .mx-command{padding:7px 9px;
font-size:12px}
.mx-primary-next{margin-inline-start:auto;
font-size:12px}
.mx-ad{align-items:flex-start;
flex-direction:column;
padding:16px}
.mx-ad-cta{width:100%;
text-align:center}
.mx-tour{padding:24px 20px}
.mx-tour-actions{align-items:stretch;
flex-direction:column-reverse}
.mx-tour-open,.mx-tour-next{text-align:center;
width:100%}
.mx-mobile-nav{position:fixed;
z-index:var(--z-mobile-nav);
display:grid;
grid-template-columns:repeat(5,1fr);
inset-inline:8px;
bottom:8px;
min-height:61px;
padding:6px;
border:1px solid var(--border,#ddd);
border-radius:20px;
background:color-mix(in srgb,var(--surface,#fff) 94%,transparent);
box-shadow:0 14px 40px rgba(0,0,0,.18);
backdrop-filter:blur(20px);
direction:rtl}
.mx-mobile-nav a{display:grid;
place-items:center;
align-content:center;
gap:2px;
border-radius:13px;
font-weight:750}
.mx-mobile-nav a.active{background:var(--mx-soft)}
.mx-mobile-nav span{font-size:18px;
line-height:1}
.mx-mobile-nav small{font-size:9px;
white-space:nowrap}
}


/* Single Topbar, Calm Page Titles & Professional Brand */

.mx-context-bar{display:none}

.dashboard-topbar,.topbar,.site-head,.header,.ms-topbar,.mx-unified-topbar{
  background:var(--ms-topbar-bg);

  border-bottom:1px solid color-mix(in srgb,var(--ms-border,#e0dfe5) 86%,transparent);

  box-shadow:0 8px 24px rgba(13,23,45,.035);

}

.mx-unified-topbar{position:sticky;
top:0;
z-index:var(--z-header);
min-height:68px;
display:flex;
align-items:center;
gap:12px;
padding-inline:var(--ms-gutter,24px);
backdrop-filter:blur(22px) saturate(140%)}

.mx-context-inline{min-width:0;
display:flex;
align-items:center;
gap:8px;
flex:0 1 auto}

.mx-home-compact{width:36px;
height:36px;
display:grid;
place-items:center;
flex:0 0 auto;
border:1px solid var(--ms-topbar-chip-border);
border-radius:12px;
background:#fff;
color:#4e4961;
text-decoration:none;
font-size:16px;
box-shadow:0 2px 7px rgba(13,23,45,.035)}

.mx-home-compact:hover{border-color:#c1bdd2;
background:#f9f8fb;
color:#172545}

.mx-page-chip{min-width:0;
max-width:390px;
min-height:38px;
display:flex;
align-items:center;
gap:8px;
padding:6px 10px;
border:1px solid var(--ms-topbar-chip-border);
border-radius:13px;
background:var(--ms-topbar-chip);
color:var(--ms-topbar-chip-text)}

.mx-page-chip b{min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
font-weight:800;
letter-spacing:-.01em}

.mx-page-dot{width:7px;
height:7px;
flex:0 0 auto;
border-radius:50%;
background:#d34b7f;
box-shadow:0 0 0 3px rgba(181,72,114,.10)}

.mx-role-badge{font-size:9px;
padding:3px 7px;
border:1px solid rgba(41,28,91,.10);
background:rgba(255,255,255,.72);
color:#5d5871}

.mx-toolbar-actions{margin-inline-start:auto;
display:flex;
align-items:center;
gap:7px;
flex:0 0 auto}

.mx-toolbar-actions .mx-primary-next,.mx-toolbar-actions .mx-guide,.mx-toolbar-actions .mx-command{min-height:36px;
border-radius:11px;
padding:0 10px;
font:inherit;
font-size:10px;
font-weight:750;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px}

.mx-toolbar-actions .mx-primary-next{background:#172545;
color:#fff;
border:1px solid #172545;
box-shadow:0 5px 13px rgba(41,28,91,.13)}

.mx-toolbar-actions .mx-primary-next:hover{background:#17274c}

.mx-toolbar-actions .mx-guide,.mx-toolbar-actions .mx-command{border:1px solid var(--ms-topbar-chip-border);
background:#fff;
color:#565267}

.mx-toolbar-actions .mx-guide{width:36px;
padding:0;
font-size:14px}

.mx-toolbar-actions .mx-command:hover,.mx-toolbar-actions .mx-guide:hover{background:#f8f7fa;
border-color:#c3bfd2;
color:#172545}

.mx-command-kbd{font-size:9px;
color:#8d8a9a;
opacity:1}

.afoq-global-announcement{max-width:280px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding:6px 10px;
border-radius:10px;
background:#f8e5ec;
color:#772c49;
text-decoration:none;
font-size:9px;
font-weight:750;
border:1px solid #eac3d2;
order:10}


/* Brand mark: use the clean app icon for small UI placements; keep full premium logo for auth/certificates. */
.dashboard-brand-mark,.brand-mark,.afoq-logo-icon{
  width:46px;
height:46px;
min-width:46px;

  padding:2px;
border-radius:14px;

  background:linear-gradient(145deg,#fceef3,var(--ms-brand-paper));

  border:1px solid rgba(181,72,114,.26);

  box-shadow:0 7px 20px rgba(33,42,63,.11),inset 0 1px 0 rgba(255,255,255,.9);

}

.dashboard-brand-mark img,.brand-mark img,.afoq-logo-icon img{width:100%;
height:100%;
object-fit:contain;
padding:3px;
filter:saturate(.96) contrast(1.02)}

.logo{display:flex;
align-items:center;
gap:9px;
text-decoration:none}

.afoq-word{color:#242e46;
font-size:18px;
font-weight:900;
letter-spacing:-.035em;
line-height:1}

.dashboard-brand b{font-weight:900;
letter-spacing:-.025em}
.dashboard-brand small{letter-spacing:.01em}


/* Page names: remove heavy legacy fills and use calm readable hierarchy. */
:is(.page-heading,.title,.v14-section-title,.section-head) h1,:is(.page-heading,.title,.v14-section-title,.section-head) h2{color:#283145;
background:transparent;
text-shadow:none}

.header nav a,.site-head nav a{border:1px solid transparent;
background:transparent;
color:#6a667a}

.header nav a.active,.site-head nav a.active,.header nav a:hover,.site-head nav a:hover{
  color:#383155;
background:#f4f3f7;
border-color:#dfdde8;
box-shadow:none
}


@media(max-width:1100px){
  .mx-page-chip{max-width:250px}
.mx-command-kbd{display:none}
.mx-toolbar-actions .mx-command{width:36px;
padding:0;
font-size:15px}
.afoq-global-announcement{display:none}

}

@media(max-width:820px){
  .mx-context-inline{flex:1}
.mx-page-chip{max-width:none;
flex:1}
.mx-role-badge{display:none}
.mx-toolbar-actions .mx-primary-next{display:none}
.mx-toolbar-actions .mx-guide{display:none}

  .dashboard-topbar,.topbar,.site-head,.header,.ms-topbar,.mx-unified-topbar{min-height:62px;
padding-inline:12px;
gap:8px}

}

@media(max-width:620px){
  .mx-page-chip b{font-size:11px}
.mx-home-compact{width:34px;
height:34px}
.mx-page-chip{min-height:36px;
padding:5px 8px}
.mx-context-inline{gap:6px}

  .header nav,.site-head nav{display:none}
.afoq-word{font-size:16px}

  .dashboard-brand-mark,.brand-mark,.afoq-logo-icon{width:42px;
height:42px;
min-width:42px}

}


/* Content Governance & Accounting Center */
.ops-shell{max-width:1480px;
margin:auto;
padding:30px 32px 60px}
.ops-hero{display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
margin-bottom:20px}
.ops-hero h1{margin:0;
font-size:26px;
color:var(--ms-text)}
.ops-hero p{margin:7px 0 0;
color:var(--ms-text-3);
font-size:11px;
line-height:1.8}
.ops-actions{display:flex;
gap:8px;
flex-wrap:wrap}
.ops-kpis{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:16px}
.ops-kpi{background:var(--ms-surface);
border:1px solid var(--ms-border);
border-radius:15px;
padding:17px;
box-shadow:var(--ms-shadow-sm)}
.ops-kpi small{display:block;
color:var(--ms-text-3);
font-size:10px}
.ops-kpi strong{display:block;
font-size:25px;
margin-top:8px;
color:var(--ms-text)}
.ops-kpi em{display:block;
margin-top:5px;
color:var(--ms-brand-700);
font-size:9px;
font-style:normal}
.ops-tabs{display:flex;
gap:7px;
flex-wrap:wrap;
padding:7px;
background:var(--ms-surface-2);
border:1px solid var(--ms-border);
border-radius:13px;
margin-bottom:16px}
.ops-tabs button{border:0;
background:transparent;
color:var(--ms-text-3);
padding:9px 13px;
border-radius:9px;
font:inherit;
font-size:10px;
font-weight:700;
cursor:pointer}
.ops-tabs button.active{background:var(--ms-surface);
color:var(--ms-brand-700);
box-shadow:var(--ms-shadow-xs)}
.ops-panel{background:var(--ms-surface);
border:1px solid var(--ms-border);
border-radius:15px;
padding:18px;
margin-bottom:16px;
box-shadow:var(--ms-shadow-xs)}
.ops-panel-head{display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
margin-bottom:14px}
.ops-panel-head h2{font-size:15px;
margin:0}
.ops-panel-head p{font-size:10px;
color:var(--ms-text-3);
margin:4px 0 0}
.ops-toolbar{display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin-bottom:13px}
.ops-toolbar input,.ops-toolbar select{min-height:39px;
border:1px solid var(--ms-border);
border-radius:9px;
background:var(--ms-surface);
color:var(--ms-text);
font:inherit;
font-size:10px;
padding:0 11px}
.ops-toolbar input{min-width:240px;
flex:1}
.ops-table-wrap{overflow:auto;
border:1px solid var(--ms-border);
border-radius:12px}
.ops-table{min-width:900px}
.ops-table th{position:sticky;
top:0;
background:var(--ms-surface-2);
color:var(--ms-text-3);
font-size:9px;
padding:10px}
.ops-table td{font-size:10px;
padding:11px 10px;
vertical-align:middle}
.ops-badge{display:inline-flex;
align-items:center;
gap:5px;
padding:4px 8px;
border-radius:999px;
font-size:9px;
font-weight:800;
background:var(--ms-brand-50);
color:var(--ms-brand-700);
border:1px solid var(--ms-brand-100)}
.ops-badge.warn{background:var(--ms-warning-soft);
color:var(--ms-warning);
border-color:transparent}
.ops-badge.danger{background:var(--ms-danger-soft);
color:var(--ms-danger);
border-color:transparent}
.ops-badge.muted{background:var(--ms-surface-3);
color:var(--ms-text-3);
border-color:var(--ms-border)}
.ops-btn{display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:36px;
border:1px solid transparent;
border-radius:9px;
padding:0 12px;
font:inherit;
font-size:9px;
font-weight:800;
cursor:pointer;
text-decoration:none}
.ops-btn.primary{background:var(--ms-brand-700);
color:#fff}
.ops-btn.secondary{background:var(--ms-surface);
color:var(--ms-text-2);
border-color:var(--ms-border)}
.ops-btn.danger{background:var(--ms-danger-soft);
color:var(--ms-danger)}
.ops-btn.warn{background:var(--ms-warning-soft);
color:var(--ms-warning)}
.ops-btn:disabled{opacity:.45;
cursor:not-allowed}
.ops-row-actions{display:flex;
gap:5px;
flex-wrap:wrap}
.ops-grid-2{display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.ops-grid-3{display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px}
.ops-info{padding:12px;
border-radius:11px;
background:var(--ms-brand-50);
border:1px solid var(--ms-brand-100);
font-size:10px;
line-height:1.8;
color:var(--ms-brand-800)}
.ops-warning{padding:12px;
border-radius:11px;
background:var(--ms-warning-soft);
font-size:10px;
line-height:1.8;
color:var(--ms-warning)}
.ops-danger{padding:12px;
border-radius:11px;
background:var(--ms-danger-soft);
font-size:10px;
line-height:1.8;
color:var(--ms-danger)}
.ops-form-grid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:11px}
.ops-field label{display:block;
font-size:9px;
font-weight:700;
color:var(--ms-text-2);
margin-bottom:5px}
.ops-field input,.ops-field select,.ops-field textarea{width:100%;
border:1px solid var(--ms-border);
border-radius:9px;
background:var(--ms-surface);
color:var(--ms-text);
font:inherit;
font-size:10px;
padding:10px}
.ops-field textarea{min-height:90px;
resize:vertical}
.ops-field.full{grid-column:1/-1}
.ops-empty{padding:32px;
text-align:center;
color:var(--ms-text-3);
font-size:10px}
.ops-account-line{display:grid;
grid-template-columns:90px 1fr 120px 120px;
gap:8px;
padding:8px 0;
border-bottom:1px solid var(--ms-border)}
.ops-account-line:last-child{border-bottom:0}
.ops-money{font-variant-numeric:tabular-nums;
font-weight:800}
.ops-policy{display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px}
.ops-policy article{padding:14px;
border:1px solid var(--ms-border);
border-radius:12px;
background:var(--ms-surface-2)}
.ops-policy b{display:block;
font-size:11px;
margin-bottom:5px}
.ops-policy p{font-size:9px;
color:var(--ms-text-3);
line-height:1.7;
margin:0}

@media(max-width:1000px){.ops-kpis{grid-template-columns:repeat(2,1fr)}
.ops-grid-2,.ops-grid-3,.ops-policy{grid-template-columns:1fr}
.ops-shell{padding:22px 16px 55px}
}
@media(max-width:560px){.ops-kpis{grid-template-columns:1fr}
.ops-hero{align-items:flex-start;
flex-direction:column}
.ops-form-grid{grid-template-columns:1fr}
.ops-field.full{grid-column:auto}
.ops-toolbar input{min-width:100%}
.ops-account-line{grid-template-columns:70px 1fr}
.ops-account-line>*:nth-child(n+3){grid-column:2}
}


/* Accounting currency selector */
.ops-currency-control{display:inline-flex;
align-items:center;
gap:.5rem;
padding:.45rem .65rem;
border:1px solid var(--border,#dbd9e3);
border-radius:12px;
background:var(--surface,#fff);
font-size:.82rem;
color:var(--muted,#636070)}

.ops-currency-control select{border:0;
background:transparent;
color:inherit;
font:inherit;
font-weight:700;
outline:none;
min-width:138px}

/* =========================================================
   AFOQ V20.3 CONSOLIDATED RESPONSIVE LAYER
   Consolidated production refinements: one canonical stylesheet.
   ========================================================= */
/* Unified responsive interface layer. */

html[data-theme="dark"]{--ms-bg:#070b14;
--ms-surface:#0d1321;
--ms-text:var(--ms-dark-text);
--ms-muted:var(--ms-dark-text-3);
--ms-border:rgba(248,247,250,.16);
--ms-shadow:0 14px 34px rgba(0,0,0,.28)}

html{font-size:var(--ms-font-size);
background:var(--ms-bg);
color:var(--ms-text);
scroll-behavior:smooth}

body{font-family:var(--ms-font-family);
background:var(--ms-bg);
color:var(--ms-text);
min-width:0;
overflow-x:hidden;
text-rendering:optimizeLegibility}

*,*::before,*::after{box-sizing:border-box}
 img,video,canvas,svg{max-width:100%}
 button,input,select,textarea{font:inherit}

a,button,input,select,textarea{outline-offset:3px}
 :focus-visible{outline:3px solid color-mix(in srgb,var(--ms-primary) 38%,transparent)}

.dashboard-sidebar,.sidebar{
overflow-y:auto}
.dashboard-content,.page-shell,.content-shell,.main-content>main{width:min(100%,var(--ms-content-max));
margin-inline:auto}

.dashboard-topbar,.header,.site-head{min-height:64px;
gap:12px;
backdrop-filter:saturate(125%) blur(10px)}

.dashboard-top-actions,.toolbar,.actions,.filter-actions{display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap}

.card,.panel,.metric,.stat-card,.dashboard-card,.section-card,.table-card{border-radius:var(--ms-radius);
border-color:var(--ms-border);
box-shadow:var(--ms-shadow);
background:var(--ms-surface)}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea{min-height:var(--ms-control-height);
max-width:100%;
border:1px solid var(--ms-border);
border-radius:calc(var(--ms-radius) - 5px);
background:var(--ms-surface);
color:var(--ms-text);
padding:.7rem .85rem}

textarea{min-height:110px;
resize:vertical}
.btn,button,.primary,.secondary{min-height:40px;
border-radius:calc(var(--ms-radius) - 5px);
max-width:100%}

.responsive-table,.table-wrap,.ms-table-wrap{max-width:100%;
overflow:auto;
overscroll-behavior-inline:contain;
border-radius:var(--ms-radius)}

table{width:100%;
border-collapse:separate;
border-spacing:0;
min-width:680px}
th,td{vertical-align:middle;
line-height:1.65}
thead th{position:sticky;
top:0;
z-index:1;
background:var(--ms-surface)}

.modal,.dialog,.ms-dialog,[role="dialog"]{max-width:min(760px,calc(100vw - 24px));
max-height:calc(100vh - 24px);
overflow:auto}

.grid,.cards-grid,.metric-grid,.stats-grid{align-items:stretch}
.grid>*,.cards-grid>*,.metric-grid>*,.stats-grid>*{min-width:0}


.ms-page-safe{width:min(100%,var(--ms-content-max));
margin-inline:auto;
padding-inline:clamp(12px,2vw,28px)}


@media(max-width:1180px){:root{--ms-sidebar-width:260px}
.dashboard-content,.page-shell{padding-inline:14px}
}

@media(max-width:860px){
.dashboard-sidebar,.sidebar{
inset-block:0;
z-index:var(--z-sidebar,80)}
.dashboard-topbar,.header,.site-head{padding-inline:12px}
.metric-grid,.stats-grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){:root{--ms-radius:13px}
.metric-grid,.stats-grid,.grid,.cards-grid{grid-template-columns:1fr}
.dashboard-content,.page-shell,main{padding-inline:10px}
.dashboard-top-actions>*{max-width:100%}
.toolbar>*{flex:1 1 auto}
table{min-width:620px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;
transition:none;
animation:none}
}


/* V20 consistency pass: predictable spacing, layering and responsive behavior. */
body{line-height:var(--ms-line-height)}
.dashboard-main,.main-content{z-index:var(--ms-z-content)}
.dashboard-topbar,.header,.site-head{position:sticky;top:0;z-index:var(--ms-z-sticky);width:100%;min-width:0}
.dashboard-sidebar,.sidebar{z-index:var(--ms-z-sidebar);scrollbar-gutter:stable}
.dashboard-nav a,.sidebar a{min-height:42px;display:flex;align-items:center;gap:.65rem;white-space:normal;overflow-wrap:anywhere}
.dashboard-nav a .nav-icon,.sidebar a .nav-icon{flex:0 0 auto}
.dashboard-user-card{min-width:0}.dashboard-user-card>div{min-width:0}.dashboard-user-card b,.dashboard-user-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-content,.page-shell,.content-shell{min-width:0;padding-inline:clamp(12px,2vw,28px)}
form,.form-grid,.fields,.filters{min-width:0}.form-grid,.fields{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
label{min-width:0}input,select,textarea,button{min-width:0}
button,.btn,[role="button"]{touch-action:manipulation}
.table-wrap,.responsive-table,.ms-table-wrap{position:relative}
.modal,.dialog,.ms-dialog,[role="dialog"]{z-index:var(--ms-z-modal)}
img,video,iframe{height:auto}iframe{max-width:100%}
pre,code{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:860px){
  .dashboard-sidebar,.sidebar{transition:transform .2s ease,box-shadow .2s ease;box-shadow:-20px 0 50px rgba(0,0,0,.16)}
  .dashboard-sidebar:not(.open),.sidebar:not(.open){pointer-events:none}
  .dashboard-sidebar.open,.sidebar.open{pointer-events:auto}
  .dashboard-topbar,.header,.site-head{min-height:58px}
  .dashboard-content,.page-shell,.content-shell{padding-inline:12px}
}
@media(max-width:560px){
  .dashboard-top-actions,.toolbar,.actions,.filter-actions{align-items:stretch}
  .dashboard-top-actions>.btn,.toolbar>.btn,.actions>.btn,.filter-actions>.btn{flex:1 1 auto}
  .card,.panel,.metric,.stat-card,.dashboard-card,.section-card,.table-card{max-width:100%;overflow-wrap:anywhere}
}


/* =====================================================================
   Afoq V20.3 — Production Consolidated Visual System
   The visual identity is code-owned and fixed in source control.
   The palette is intentionally calmer, lighter and contrast-safe.
   ===================================================================== */

/* Primary actions stay light enough to feel fresh, but dark enough for WCAG text contrast. */
.btn.primary,.primary-action,.report-btn.primary,.submit,.course-actions .primary,button.primary,[class*="btn"][class*="primary"]{
  background:linear-gradient(135deg,var(--ms-primary),var(--ms-primary-strong));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(57,49,90,.16);
}
.btn.primary:hover,.primary-action:hover,.report-btn.primary:hover,.submit:hover,.course-actions .primary:hover,button.primary:hover,[class*="btn"][class*="primary"]:hover{
  background:linear-gradient(135deg,var(--ms-primary-hover),#372874);
}

/* Sidebars are deep midnight-teal instead of navy/near-black, with stronger readable labels. */
.dashboard-sidebar,.sidebar,.ms-sidebar{
  background:linear-gradient(180deg,#172545 0%,#0b1221 58%,#181e2d 100%);
  color:#f8f7fa;
  border-inline-start:1px solid rgba(255,255,255,.08);
}
.dashboard-brand,.brand{color:#fff;border-color:rgba(255,255,255,.11)}
.dashboard-brand small,.brand small,.dashboard-nav-label,.nav-label{color:#cac7d4}
.dashboard-nav a,.main-nav a,.sidebar a{color:#dbe5ea}
.dashboard-nav a:hover,.dashboard-nav a.active,.main-nav a:hover,.main-nav a.active,.sidebar a:hover,.sidebar a.active{
  color:#fff;
  background:rgba(201,197,216,.14);
  box-shadow:inset -3px 0 0 #6958ad;
}
.dashboard-brand-mark,.brand-mark:not(.login-brand .brand-mark){
  background:linear-gradient(145deg,#f9e5ed,#c53f72);
  border:1px solid rgba(231,111,157,.75);
  box-shadow:0 8px 22px rgba(211,75,127,.24);
}
.dashboard-brand-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(65,10,31,.25))}
body[data-afoq-page^="admin"] .dashboard-brand-mark{width:56px;height:56px;padding:5px;flex:0 0 56px}

.ms-live-notification{width:min(390px,calc(100vw - 28px));display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;padding:14px;border:1px solid color-mix(in srgb,var(--ms-primary) 24%,var(--ms-border));border-radius:16px;background:color-mix(in srgb,var(--ms-surface) 96%,var(--ms-primary-soft));color:var(--ms-text);text-decoration:none;box-shadow:0 20px 55px rgba(7,14,30,.2);opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .24s ease,transform .24s ease;pointer-events:auto}
.ms-live-notification.is-visible{opacity:1;transform:none}.ms-live-notification-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--ms-primary-soft);color:var(--ms-primary);font-size:.55rem}.ms-live-notification b,.ms-live-notification small{display:block}.ms-live-notification b{font-size:.9rem;margin-bottom:3px}.ms-live-notification small{color:var(--ms-text-3);line-height:1.55}.ms-live-notification i{color:var(--ms-primary);font-style:normal;font-weight:900}
html[data-theme="dark"] .ms-live-notification{background:#171b23;border-color:#3a3550;color:#f2f1f7}
.otp-action{margin-top:8px;width:100%;min-height:42px;border:1px solid #c53f72;border-radius:10px;background:linear-gradient(135deg,#f9e5ed,#e775a1);color:#4b1027;font-weight:800;cursor:pointer}
.otp-action:disabled{opacity:.6;cursor:wait}.hint.verified{color:#28176b;font-weight:800}

/* Strong contrast for every intentionally dark hero/panel used across student, teacher and admin pages. */
:where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,
.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,
.v14-hero,.login-brand,.auth-brand,.assistant,.campaign-preview[data-style="DARK"]){
  color:#faf9fc;
}
:where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,
.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,
.v14-hero,.login-brand,.auth-brand,.assistant,.campaign-preview[data-style="DARK"])
:is(h1,h2,h3,h4,p,span,small,strong,b){
  color:inherit;
}
:where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,
.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,
.v14-hero,.login-brand,.auth-brand,.assistant,.campaign-preview[data-style="DARK"]) p,:where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,
.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,
.v14-hero,.login-brand,.auth-brand,.assistant,.campaign-preview[data-style="DARK"]) small{
  color:#ffffff;
}

/* Harmonize large branded surfaces with the fixed lighter teal identity. */
.login-brand,.auth-brand,.practice-hero,.journey-hero,.offline-hero,.credential-hero,.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,.v14-hero,.hero,.hero-mastery{
  background:linear-gradient(135deg,#172545 0%,#1f325e 70%,#514875 100%);
}
.assistant{background:linear-gradient(145deg,#172545,#0b1221)}

/* Dark mode: brighter secondary/muted copy so information never disappears into dark surfaces. */
html[data-theme="dark"]{
  --ms-bg:#070b14;
  --ms-surface:#0d1321;
  --ms-text:var(--ms-dark-text);
  --ms-muted:var(--ms-dark-text-3);
  --text-primary:var(--ms-dark-text);
  --text-secondary:var(--ms-dark-text-2);
  --text-muted:var(--ms-dark-text-3);
  --surface:#0d1321;
  --surface-raised:#141d33;
  --surface-soft:#172139;
  --border:#342b59;
  --border-strong:#483d73;
}
html[data-theme="dark"] body{color:var(--ms-dark-text)}
html[data-theme="dark"] :is(p,.muted,.note,.subtitle,.intro,.hint,.description,.dashboard-nav-label,.nav-label){
  color:var(--ms-dark-text-2);
}
html[data-theme="dark"] :is(small,.meta,.helper,.caption){color:var(--ms-dark-text-3)}
html[data-theme="dark"] :is(.card,.panel,.section-card,.table-card,.dashboard-card,.metric,.auth-panel,.auth-shell){
  border-color:#342b59;
}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:#141d33;
  color:#f8f7fa;
  border-color:#483d73;
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#b1aebd;opacity:1}
html[data-theme="dark"] th{color:#efeef5}
html[data-theme="dark"] td{color:#dbe5ea}

/* Login/registration inherit the same fixed brand from the approved Afoq palette. */
.login-brand{background:linear-gradient(150deg,#172545,#1f325e)}
.auth-brand{background:linear-gradient(155deg,#172545,#1f325e 58%,#3a2b75)}

/* Accessible keyboard focus using the lighter brand family. */
:focus-visible{outline-color:#6958ad}

/* =========================================================
   AFOQ V20.3 — CANONICAL PAGE TITLE SYSTEM
   One production-grade page header based on admin-students.
   ========================================================= */
.ms-page-hero{
  box-sizing:border-box;
  width:100%;
  min-height:132px;
  margin:0 0 18px;
  padding:25px 26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:23px;
  background:linear-gradient(135deg,#172545 0%,#1f325e 72%,#514875 100%);
  color:#fff;
  box-shadow:0 14px 34px rgba(32,39,57,.14);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.ms-page-hero::after{
  content:"";
  position:absolute;
  inset:auto -42px -70px auto;
  width:190px;
  height:190px;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  pointer-events:none;
  z-index:-1;
}
.ms-page-hero>div:first-child{min-width:0;max-width:920px}
.ms-page-hero h1{
  margin:0 0 7px;
  color:#fff;
  font-size:clamp(24px,2vw,30px);
  line-height:1.28;
  font-weight:900;
  letter-spacing:-.035em;
  text-shadow:none;
}
.ms-page-hero p{
  margin:0;
  max-width:900px;
  color:#f0eef6;
  font-size:12px;
  line-height:1.85;
  font-weight:500;
}
.ms-page-hero small,.ms-page-hero .v14-note{color:#e6e4f0}
.ms-page-kicker,.ms-page-hero>.v14-chip,.ms-page-hero>.role-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:0 0 10px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.ms-page-hero :is(.btn,.primary,.primary-action,.secondary-action,.ops-btn){
  min-height:40px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:11px;
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.ms-page-hero :is(.btn,.primary,.primary-action,.secondary-action,.ops-btn):hover{
  background:rgba(255,255,255,.2);
  color:#fff;
}
.ms-page-hero :is(.notification-summary-card,.mastery-score,.hero-badge,.save-state){
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.11);
  color:#fff;
  box-shadow:none;
}
/* Title-only heroes have the same height and typography, but stack their direct text nodes. */
.ms-page-hero:has(>h1),.ms-page-hero:has(>small + h1),.ms-page-hero:has(>.ms-page-kicker + h1){
  display:block;
}
.ms-page-hero:has(>h1)>h1{margin-top:0}

/* Actions that do not belong inside a page title live in one shared toolbar. */
.ms-page-toolbar{
  box-sizing:border-box;
  width:100%;
  margin:-4px 0 18px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  border:1px solid var(--ms-border);
  border-radius:15px;
  background:var(--ms-surface);
  color:var(--ms-text);
  box-shadow:var(--ms-shadow-sm);
}
.ms-page-toolbar .actions,.ms-page-toolbar .ops-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ms-page-toolbar-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ms-page-filterbar{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(5,minmax(120px,.7fr))}
.ms-page-filterbar :is(input,select){min-width:0;width:100%}

/* The canonical page title must not inherit legacy hero ornaments or oversized spacing. */
.ms-page-hero.hero:after{font-size:0}
.ms-page-hero :is(.v14-toolbar,.search-toolbar){margin-top:0}

@media(max-width:900px){
  .ms-page-hero{
    min-height:118px;
    padding:21px;
    align-items:flex-start;
  }
  .ms-page-hero h1{font-size:24px}
  .ms-page-filterbar{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .ms-page-hero{
    min-height:0;
    padding:19px 17px;
    border-radius:18px;
    flex-direction:column;
    gap:14px;
  }
  .ms-page-hero h1{font-size:22px}
  .ms-page-hero p{font-size:11px;line-height:1.75}
  .ms-page-hero>div:first-child{max-width:none;width:100%}
  .ms-page-hero :is(.btn,.primary,.primary-action,.secondary-action,.ops-btn){width:100%}
  .ms-page-toolbar{padding:10px;border-radius:13px;align-items:stretch}
  .ms-page-toolbar .actions,.ms-page-toolbar .ops-actions{width:100%}
  .ms-page-toolbar .actions>*,.ms-page-toolbar .ops-actions>*{flex:1 1 140px}
  .ms-page-filterbar{grid-template-columns:1fr}
}

/* Keep contextual eyebrow/kicker information without changing the canonical desktop header height. */
@media(min-width:621px){
  .ms-page-hero .ms-page-kicker,.ms-page-hero .eyebrow{
    position:absolute;
    inset:14px auto auto 18px;
    margin:0;
    z-index:1;
  }
}
@media(max-width:620px){
  .ms-page-hero .ms-page-kicker,.ms-page-hero .eyebrow{display:none}
}

/* =====================================================================
   AFOQ V20.4.10 — PREMIUM PRODUCT IDENTITY
   Public-site teal/warm language carried into the authenticated product.
   ===================================================================== */
body{
  font-family:"Cairo","Noto Kufi Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  background:var(--ms-premium-bg);
}
.dashboard-sidebar,.sidebar,.ms-sidebar{
  background:linear-gradient(180deg,#172545 0%,#10192f 58%,#070c17 100%);
  box-shadow:-10px 0 32px rgba(8,20,47,.12);
}
.dashboard-sidebar::before,.sidebar::before,.ms-sidebar::before{
  content:"";
  background:linear-gradient(90deg,transparent,var(--ms-premium-warm),transparent);
  opacity:.85;
}
.dashboard-nav a,.main-nav a,.sidebar a{border-radius:10px}
.dashboard-nav a:hover,.dashboard-nav a.active,.main-nav a:hover,.main-nav a.active,.sidebar a:hover,.sidebar a.active{
  background:linear-gradient(90deg,rgba(234,159,188,.16),rgba(255,255,255,.05));
  box-shadow:inset -3px 0 0 var(--ms-premium-warm);
}
.dashboard-topbar,.topbar,.header,.site-head{
  background:rgba(255,250,252,.96);
  border-color:var(--ms-premium-border);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 28px rgba(13,29,68,.045);
}
.dashboard-content,.content,.page-shell,.content-shell{background:transparent}
:where(.card,.panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget){
  border-color:var(--ms-premium-border);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(13,29,68,.055);
}
:where(.card,.panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget):not(.ms-page-hero){
  background:var(--ms-premium-paper);
}
:where(input,select,textarea){
  border-color:#dad8e1;
  border-radius:10px;
}
:where(input,select,textarea):focus{
  border-color:#847da1;
  box-shadow:0 0 0 3px rgba(75,63,125,.1);
  outline:none;
}
:where(.btn,.primary-action,button.primary,.submit){border-radius:10px}
.ms-page-hero{
  background:linear-gradient(135deg,#172545 0%,#30245f 62%,#50486f 100%);
  border-color:rgba(234,159,188,.18);
  box-shadow:0 16px 36px rgba(13,29,68,.14);
}
.ms-page-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,transparent,var(--ms-premium-warm),transparent);
  opacity:.8;
}
.ms-page-hero h1{font-weight:950;letter-spacing:-.035em}
.ms-page-hero p{color:#eae8f0}
table thead th,.table thead th{
  background:#efeef3;
  color:#293349;
  border-color:#e1e0e6;
}
:where(.badge,.chip,.tag):not(.danger):not(.error){
  border-color:rgba(75,63,125,.18);
}
html[data-theme="dark"] body{background:#0e1117}
html[data-theme="dark"] :where(.card,.panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget):not(.ms-page-hero){
  background:#171b23;
  border-color:#303748;
}

/* V20.5 campaign media delivery */
.mx-ad{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.42fr);align-items:stretch}.mx-ad-copy{padding:18px 20px;display:flex;flex-direction:column;justify-content:center}.mx-ad-media{min-height:150px;background:rgba(0,0,0,.06);overflow:hidden}.mx-ad-media img,.mx-ad-media video{width:100%;height:100%;min-height:150px;max-height:250px;object-fit:cover;display:block}.mx-ad-close{position:absolute;top:9px;left:9px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.86);color:#0b1221;font-size:18px;cursor:pointer}.mx-ad-layout-card{max-width:620px;grid-template-columns:1fr}.mx-ad-layout-hero{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);min-height:220px}.mx-ad-layout-hero .mx-ad-media img,.mx-ad-layout-hero .mx-ad-media video{max-height:320px;min-height:220px}.mx-ad-copy .mx-ad-cta{align-self:flex-start;margin-top:12px}
@media(max-width:720px){.mx-ad,.mx-ad-layout-hero{grid-template-columns:1fr}.mx-ad-media{order:-1;min-height:170px}.mx-ad-media img,.mx-ad-media video{min-height:170px;max-height:240px}.mx-ad-copy{padding:16px}.mx-ad-copy .mx-ad-cta{width:100%;text-align:center;justify-content:center}}

/* =========================================================
   AFOQ V20.6 — TYPOGRAPHY & VISUAL DESIGN SYSTEM
   One code-owned visual language for all product surfaces.
   ========================================================= */
html[lang="en"] body{font-family:var(--ms-font-en)}
body{font-size:var(--ms-type-body);line-height:var(--ms-leading-body);font-weight:var(--ms-weight-regular);letter-spacing:0}
:is(h1,h2,h3,h4,h5,h6){font-family:var(--ms-font-ar);line-height:var(--ms-leading-heading);text-wrap:balance;color:var(--ms-text);margin-block-start:0;font-weight:var(--ms-weight-bold)}
h1{font-size:var(--ms-type-h1);font-weight:var(--ms-weight-extrabold)}h2{font-size:var(--ms-type-h2);font-weight:var(--ms-weight-bold)}h3{font-size:var(--ms-type-h3);font-weight:var(--ms-weight-bold)}
p,li,td,th,label,input,select,textarea{line-height:var(--ms-leading-body)}
small,.caption,.helper,.meta{font-size:var(--ms-type-small)}
button,.btn,[role="button"],nav a,.nav-item{font-weight:var(--ms-weight-semibold)}
:where(.dashboard-brand,.brand,.public-brand,.logo) img{object-fit:contain;flex:0 0 auto}
:where(.dashboard-topbar,.header,.site-head) :where(.dashboard-brand,.brand,.public-brand,.logo) img{width:var(--ms-logo-header);height:var(--ms-logo-header)}
.card,.panel,.metric,.stat-card,.dashboard-card,.section-card,.table-card,.box,.v14-card{background:var(--ms-surface);border:1px solid var(--ms-border);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow)}
:is(.card,.panel,.metric,.stat-card,.dashboard-card,.section-card,.table-card,.box,.v14-card)>:first-child{margin-top:0}
:is(.card,.panel,.section-card,.table-card,.box,.v14-card){padding:clamp(1rem,1.8vw,1.5rem)}
:is(button,.btn,.primary-action,.secondary-action,.campaign-btn){min-height:42px;font-weight:var(--ms-weight-semibold);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
:is(button,.btn,.primary-action,.secondary-action,.campaign-btn):not(:disabled):hover{transform:translateY(-1px)}
:is(input,select,textarea){font-weight:var(--ms-weight-regular)}
::placeholder{color:#8d8a97;opacity:1}
.ms-page-hero h1{font-size:var(--ms-type-h1);font-weight:var(--ms-weight-extrabold);line-height:var(--ms-leading-tight)}.ms-page-hero p{font-size:.95rem;line-height:1.75;max-width:70ch}
@media(max-width:560px){:root{--ms-type-h1:1.55rem;--ms-type-h2:1.28rem;--ms-type-body:.95rem}.ms-page-hero{padding:20px 18px;min-height:124px}}

/* =====================================================================
   AFOQ V21.4 — PRODUCT EXPERIENCE & BRAND GOVERNANCE
   Unified visual hierarchy, logo sizing, iconography and interaction.
   ===================================================================== */
html.ms-design-v214 body{background:var(--ms-canvas);color:var(--ms-ink)}
.ms-icon{width:var(--ms-icon-size);height:var(--ms-icon-size);display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Brand lockup — one canonical geometry in every authenticated surface. */
.dashboard-brand,.ms-brand-lockup{
  min-height:78px;
  padding:14px 16px;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin:0 8px 10px;
  width:calc(100% - 16px);
}
.dashboard-brand-mark,.brand-mark,.afoq-logo-icon{
  width:54px;height:38px;min-width:54px;
  padding:0;border:0;border-radius:0;background:transparent;
  box-shadow:none;display:grid;place-items:center;overflow:visible;
}
.dashboard-brand-mark img,.brand-mark img,.afoq-logo-icon img{
  width:54px;height:38px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.14));
}
.dashboard-brand b{font-size:18px;line-height:1.2;color:#fff;letter-spacing:-.02em}
.dashboard-brand small{font-size:10px;line-height:1.45;color:#c0bdcc;margin-top:3px}

/* Sidebar hierarchy */
.dashboard-sidebar,.sidebar,.ms-sidebar{background:linear-gradient(180deg,#172545,#10192f 62%,#070c17)}
.dashboard-nav,.main-nav{padding:0 5px;gap:3px}
.dashboard-nav-label,.nav-label{padding:14px 12px 5px;margin:0;font-size:9px;letter-spacing:.04em;color:#9691aa;text-transform:none}
.dashboard-nav a,.main-nav a,.sidebar a.nav-item{
  min-height:44px;padding:7px 10px;border-radius:11px;gap:10px;
  font-size:12px;line-height:1.35;color:#dedce7;border:1px solid transparent;
}
.dashboard-nav a .nav-icon,.main-nav a .nav-icon{
  width:30px;height:30px;min-width:30px;border-radius:9px;display:grid;place-items:center;
  color:#bdb9cb;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.055);font-size:0;
}
.dashboard-nav a .nav-icon .ms-icon{width:17px;height:17px}
.dashboard-nav a:hover,.main-nav a:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.055);box-shadow:none;color:#fff}
.dashboard-nav a.active,.main-nav a.active{
  background:linear-gradient(90deg,rgba(229,139,173,.18),rgba(255,255,255,.075));
  border-color:rgba(229,139,173,.16);box-shadow:inset -3px 0 0 var(--ms-accent);color:#fff;
}
.dashboard-nav a.active .nav-icon{background:rgba(229,139,173,.14);color:#f09fbe;border-color:rgba(229,139,173,.16)}
.nav-count{min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;font-size:9px;display:inline-grid;place-items:center;margin-inline-start:auto}
.dashboard-user-card{margin:14px 8px 8px;padding:10px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.dashboard-user-card .avatar,.dashboard-profile .avatar{width:36px;height:36px;min-width:36px;font-size:12px;background:linear-gradient(145deg,#f2a4c2,#d34b7f);color:#17223c;border:1px solid rgba(255,255,255,.3)}
.dashboard-user-card b{font-size:11px}.dashboard-user-card small{font-size:9px;color:#ada9bd}
.dashboard-logout{margin:0 8px;min-height:40px;border-radius:11px;font-size:11px;gap:9px;color:#d7d5e1;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dashboard-logout>span{width:26px;height:26px;display:grid;place-items:center;font-size:0}.dashboard-logout .ms-icon{width:17px;height:17px}

/* Topbar */
.dashboard-topbar,.topbar,.header,.site-head{
  min-height:70px;padding:10px clamp(14px,2vw,28px);background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--ms-line-soft);box-shadow:0 8px 26px rgba(13,29,68,.035);
}
.dashboard-search,.search{height:42px;max-width:520px;border:1px solid var(--ms-line);border-radius:12px;background:#f9f9fb;padding:0 13px;gap:8px}
.dashboard-search>span,.search>span{font-size:0;color:#797687}.dashboard-search .ms-icon,.search .ms-icon{width:17px;height:17px}
.dashboard-search input,.search input{font-size:12px;background:transparent;border:0;box-shadow:none;height:100%;padding:0}
.top-icon-button{width:40px;height:40px;border-radius:11px;background:#f8f8fa;border:1px solid var(--ms-line);color:#565267;display:grid;place-items:center;font-size:0}.top-icon-button .ms-icon{width:18px;height:18px}
.dashboard-profile{min-height:44px;padding:4px 6px 4px 10px;border-radius:12px;border:1px solid transparent}.dashboard-profile:hover{background:#f8f7fa;border-color:var(--ms-line)}.dashboard-profile b{font-size:11px}.dashboard-profile small{font-size:9px;color:var(--ms-ink-soft)}
.dashboard-menu-button{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--ms-line);color:var(--ms-ink);display:none;place-items:center;font-size:0}.dashboard-menu-button .ms-icon{width:20px;height:20px}

/* Page shell and headers */
.dashboard-page,.content,.page-shell,.content-shell{max-width:1540px;margin:0 auto;padding:clamp(18px,2.1vw,32px)}
.ms-page-hero,.page-heading.ms-page-hero,.welcome-row.ms-page-hero{
  min-height:150px;padding:26px 30px;border-radius:20px;margin:0 0 22px;
  background:linear-gradient(135deg,#172545 0%,#152855 62%,#544c72 100%);
  box-shadow:0 18px 44px rgba(13,29,68,.13);border:1px solid rgba(225,145,176,.16);overflow:hidden;
}
.ms-page-hero::before{width:4px;inset:18px auto 18px 0;border-radius:999px;background:linear-gradient(180deg,#e796b5,#a93e67)}
.ms-page-hero::after{content:"";position:absolute;inset:auto -34px -62px auto;width:220px;height:220px;border:1px solid rgba(255,255,255,.09);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 66%);pointer-events:none}
.ms-page-hero h1{font-size:clamp(24px,2vw,32px);color:#fff;margin:0 0 6px;letter-spacing:-.035em}
.ms-page-hero p{font-size:12px;color:#e1dfea;margin:0;max-width:74ch}
.ms-page-hero .eyebrow,.ms-page-hero .ms-page-kicker{font-size:9px;color:#f08db3;font-weight:800;letter-spacing:.02em}
.ms-page-hero :is(.btn,.primary,.primary-action,.secondary-action,.ops-btn){min-height:42px;border-radius:11px;padding-inline:16px;background:#fff;color:#152446;border:1px solid rgba(255,255,255,.55);box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:11px}

/* Cards / panels / actions */
:where(.card,.panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget,.modern-panel,.box,.v14-card):not(.ms-page-hero){
  background:var(--ms-card);border:1px solid var(--ms-line);border-radius:var(--ms-radius-card);
  box-shadow:var(--ms-shell-shadow);
}
.modern-panel,.panel,.section-card,.table-card{padding:22px}
.modern-panel-header,.section-head{gap:14px;margin-bottom:18px;align-items:flex-start}.modern-panel-header h2,.section-head h2{font-size:17px;line-height:1.45;color:var(--ms-ink-strong);margin:0}.modern-panel-header p,.section-head p{font-size:10.5px;color:var(--ms-ink-soft);margin:4px 0 0}
.dashboard-cards,.stats-grid,.kpi-grid{gap:14px}.dashboard-card{min-height:126px;padding:18px;overflow:hidden;position:relative}.dashboard-card::after{width:70px;height:70px;opacity:.035}
.dashboard-card .metric-top{align-items:center}.dashboard-card .metric-top small,.dashboard-card>small{font-size:10px;color:var(--ms-ink-soft);font-weight:700}.dashboard-card strong{font-size:25px;color:var(--ms-ink-strong);letter-spacing:-.02em}.dashboard-card .metric-icon{width:38px;height:38px;border-radius:11px;background:var(--ms-brand-soft);color:var(--ms-brand-deep);display:grid;place-items:center;font-size:0}.dashboard-card .metric-icon .ms-icon{width:18px;height:18px}.dashboard-card .metric-note{font-size:9.5px;color:var(--ms-ink-soft)}
.quick-actions-grid{gap:10px}.quick-action{min-height:72px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--ms-line);color:var(--ms-ink);gap:11px;box-shadow:none}.quick-action:hover{border-color:#bdb8cf;background:#fbfbfd;box-shadow:0 10px 24px rgba(13,29,68,.06)}.quick-action>span{width:36px;height:36px;min-width:36px;border-radius:10px;background:var(--ms-brand-soft);color:var(--ms-brand-deep);display:grid;place-items:center;font-size:0}.quick-action>span .ms-icon{width:18px;height:18px}.quick-action b{font-size:11px}.quick-action small{display:block;color:var(--ms-ink-soft);font-size:9px;margin-top:2px}

/* Controls */
:where(input,select,textarea){min-height:42px;border-radius:var(--ms-radius-control);border:1px solid var(--ms-line);background:#fff;color:var(--ms-ink);font-size:12px;padding-inline:12px}
:where(input,select,textarea):focus{border-color:#837ca1;box-shadow:0 0 0 3px rgba(86,76,127,.12)}
:where(.btn,.primary-action,.secondary-action,button.primary,.submit,.campaign-btn){min-height:42px;border-radius:11px;font-size:11px;padding-inline:15px}
:where(.primary-action,.btn.primary,button.primary,.submit){background:linear-gradient(135deg,#4a3f76,#372874);border-color:#372874;color:#fff;box-shadow:0 8px 18px rgba(57,47,96,.13)}
:where(.secondary-action,.btn.secondary,.outline){background:#fff;border:1px solid var(--ms-line);color:#3b3551;box-shadow:none}

/* Tables */
.ms-table-scroll,.table-scroll,.table-wrap{overflow:auto;border-radius:14px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}table thead th{position:sticky;top:0;z-index:2;background:#f4f3f6;color:#444056;font-size:9.5px;font-weight:800;padding:11px 12px;border-bottom:1px solid var(--ms-line)}table tbody td{padding:12px;border-bottom:1px solid var(--ms-line-soft);color:#444152}table tbody tr:hover td{background:#fbfdfe}

/* Responsive */
@media(max-width:1050px){
  .dashboard-menu-button{display:grid}
  .dashboard-page,.content,.page-shell,.content-shell{padding:16px}
}
@media(max-width:620px){
  .dashboard-topbar,.topbar,.header,.site-head{min-height:60px;padding:8px 12px;gap:8px}
  .dashboard-search,.search{order:3;flex-basis:100%;max-width:none}
  .dashboard-profile .copy,.user-copy{display:none}
  .ms-page-hero,.page-heading.ms-page-hero,.welcome-row.ms-page-hero{padding:20px;min-height:132px;border-radius:16px}
  .modern-panel,.panel,.section-card,.table-card{padding:16px}
}

/* Dark mode parity */
html[data-theme="dark"] body{background:#0e1117;color:#e7f7f6}
html[data-theme="dark"] :where(.card,.panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget,.modern-panel,.box,.v14-card):not(.ms-page-hero){background:#171b23;border-color:#303748}
html[data-theme="dark"] :where(input,select,textarea){background:#11141c;border-color:#3a3550;color:#f2f1f7}
html[data-theme="dark"] .dashboard-topbar{background:rgba(19,23,31,.95);border-color:#2b3241}
html[data-theme="dark"] .dashboard-search,html[data-theme="dark"] .search,html[data-theme="dark"] .top-icon-button{background:#151921;border-color:#2f3646;color:#e8e6ee}
html[data-theme="dark"] .quick-action{background:#171b23;border-color:#303748;color:#e7f7f6}
html[data-theme="dark"] table thead th{background:#1d222d;color:#dfdce9;border-color:#303748}
html[data-theme="dark"] table tbody td{color:#dad7e4;border-color:#292f3d}

/* V21.4 authentication brand sizing */
.auth-logo,.logo-img{
  width:108px;
  height:auto;
  max-height:68px;
  object-fit:contain;
  margin-inline:auto;
}

/* V21.4 runtime-generated navigation icon parity */
.mx-mobile-nav a>span,.mx-home-compact,.mx-guide,.mx-command,.mx-inline-help>span{
  font-size:0;
}
.mx-mobile-nav a>span{
  display:grid;
  place-items:center;
}
.mx-mobile-nav a>span .ms-icon{width:18px;height:18px}
.mx-home-compact,.mx-guide,.mx-command{
  display:inline-grid;
  place-items:center;
}
.mx-home-compact .ms-icon,.mx-guide .ms-icon,.mx-command>.ms-icon{width:17px;height:17px}
.mx-inline-help>span .ms-icon{width:18px;height:18px}
.mx-command-kbd{font-size:8px}

/* =====================================================================
   AFOQ V22.13.5 — CRITICAL UI LAYOUT / CONTRAST / TYPOGRAPHY REPAIR
   Fixes RTL shell geometry, responsive sidebar behavior, text contrast,
   and font consistency across authenticated product surfaces.
   ===================================================================== */

/* One shell geometry only. The sidebar is fixed on the RIGHT; the main
   canvas owns the remaining viewport width. Avoid logical margins here:
   older direction rules can resolve them to the wrong physical side. */
.dashboard-layout,.ms-app-shell{
  direction:rtl;
}

.dashboard-main,.ms-main{
  grid-column:auto;
  direction:rtl;
}

.dashboard-topbar,.topbar,.ms-topbar{
  width:100%;
  max-width:100%;
  margin:0;
}

.dashboard-page,.dashboard-content,.content-shell,.page-shell{
  width:100%;
  min-width:0;
}

/* Keep the content comfortably wide on desktop without creating the
   artificial empty column visible in the broken V21.4 RTL layout. */
.dashboard-page{
  max-width:1540px;
  margin-right:auto;
  margin-left:auto;
}

/* Collapse the fixed sidebar before laptop widths become cramped. */
@media(max-width:1100px){
  .dashboard-sidebar,.sidebar,.ms-sidebar{
    transition:transform .2s ease,box-shadow .2s ease;
    pointer-events:none;
    box-shadow:-20px 0 50px rgba(0,0,0,.18);
  }

  .dashboard-sidebar.open,.sidebar.open,.ms-sidebar.open{
    pointer-events:auto;
  }

  .dashboard-menu-button{
    display:grid;
    place-items:center;
  }
}

/* Arabic typography is controlled centrally. Page-level legacy Tajawal /
   system declarations must not change the product's visual rhythm. */
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea,html[lang="ar"] table,html[lang="ar"] th,html[lang="ar"] td,html[lang="ar"] label,html[lang="ar"] a{
  font-family:var(--ms-font-ar);
}

html[lang="en"] body,html[lang="en"] button,html[lang="en"] input,html[lang="en"] select,html[lang="en"] textarea,html[lang="en"] table,html[lang="en"] th,html[lang="en"] td,html[lang="en"] label,html[lang="en"] a{
  font-family:var(--ms-font-en);
}

:is(h1,h2,h3,h4,h5,h6){
  font-family:var(--ms-font-ar);
}

/* Contrast contract for every dark/teal information surface. */
.ms-page-hero,.admin-library-hero,.sec-hero,.ops-hero,.users-hero,.config-hero,.report-hero,.report-head,.help-hero,.practice-hero,.journey-hero,.offline-hero,.credential-hero,.intervention-hero,.hero-mastery,.v14-hero{
  color:#f9f8fb;
}

:is(.ms-page-hero,.admin-library-hero,.sec-hero,.ops-hero,.users-hero,
.config-hero,.report-hero,.report-head,.help-hero,.practice-hero,
.journey-hero,.offline-hero,.credential-hero,.intervention-hero,
.hero-mastery,.v14-hero)
:is(h1,h2,h3,h4,h5,h6,p,small,strong,b,.subtitle,.muted,.note,.eyebrow){
  color:inherit;
}

:is(.ms-page-hero,.admin-library-hero,.sec-hero,.ops-hero,.users-hero,
.config-hero,.report-hero,.report-head,.help-hero,.practice-hero,
.journey-hero,.offline-hero,.credential-hero,.intervention-hero,
.hero-mastery,.v14-hero) p{
  color:#e9e7f0;
}

:is(.ms-page-hero,.admin-library-hero,.sec-hero,.ops-hero,.users-hero,
.config-hero,.report-hero,.report-head,.help-hero,.practice-hero,
.journey-hero,.offline-hero,.credential-hero,.intervention-hero,
.hero-mastery,.v14-hero) small{
  color:#dad7e6;
}

/* The free-library hero has light mock book cards nested inside it; only
   the actual dark copy area inherits light text so those cards stay dark. */
.library-hero,.library-hero-copy,.library-hero-metrics{
  color:#f9f8fb;
}
.library-hero-copy :is(h1,h2,h3,p,strong,b),.library-hero-metrics :is(strong,b){
  color:inherit;
}
.library-hero-copy p{color:#dcd9e9}
.library-hero-metrics small{color:#c9c5da}

/* Sidebar contrast remains explicit even when page-specific styles load
   after the global sheet. */
.dashboard-sidebar,.sidebar,.ms-sidebar{
  color:#f8f7fa;
}
.dashboard-sidebar :is(.dashboard-brand,.dashboard-brand b,.dashboard-user-card b),.sidebar :is(.brand,.brand b){color:#fff}
.dashboard-nav a,.main-nav a,.sidebar a.nav-item{color:#dedce7}
.dashboard-nav-label,.nav-label,.dashboard-user-card small{color:#b2aec2}

/* Text on ordinary light surfaces always returns to the semantic ink.
   This prevents a legacy hero color from leaking into cards/tables. */
:where(.dashboard-card,.modern-panel,.panel,.section-card,.table-card,.quick-action,
.card,.box,.widget):not(.ms-page-hero):not(.admin-library-hero):not(.sec-hero){
  color:var(--ms-ink);
}
:where(.dashboard-card,.modern-panel,.panel,.section-card,.table-card,.quick-action,
.card,.box,.widget):not(.ms-page-hero):not(.admin-library-hero):not(.sec-hero)
> :is(h1,h2,h3,h4,strong,b){
  color:var(--ms-ink-strong);
}

/* No horizontal clipping caused by long labels or dynamic content. */
.dashboard-nav a,.quick-action,.dashboard-card,.modern-panel-header{
  overflow-wrap:anywhere;
}

/* RTL specificity repair: neutralize the older logical-margin rule. */

/* Explicit contrast fixes for page-specific components that define their
   own dark backgrounds after the global design sheet. */
.ms-page-hero label,.sec-hero label,.admin-library-hero label{
  color:#f9f8fb;
}
.ms-page-hero label :is(select,input),.sec-hero label :is(select,input),.admin-library-hero label :is(select,input){
  color:var(--ms-text);
  background:var(--ms-surface);
}

.notification-head.ms-page-hero h1,.notification-head.ms-page-hero p,.notification-head.ms-page-hero .notification-summary-card strong,.notification-head.ms-page-hero .notification-summary-card span{
  color:#f9f8fb;
}
.notification-head.ms-page-hero .notification-kicker{
  color:#f08db3;
}

.course-art small{
  color:#fff;
}

.library-reader-body,.reader-shell,.reader-toolbar,.reader-title,.reader-loading{
  color:#f5f4fa;
}
.reader-title b,.reader-loading span{
  color:#f5f4fa;
}
.reader-title small,.reader-status,.reader-security,.reader-save-state{
  color:#beb9d0;
}

.library-sidebar,.library-brand,.library-side-note{
  color:#f5f4fa;
}
.library-sidebar small,.library-brand small,.library-side-note small{
  color:#bcb8cd;
}

/* Public landing: keep dark branded sections readable while leaving the
   white sign-in card and product mockups untouched. */
.public-hero .hero-story h1,.public-hero .hero-story h2,.public-hero .hero-story h3,.public-hero .hero-story p,.public-hero .hero-story strong,.public-hero .hero-story b{
  color:#f9f8fb;
}
.public-hero .hero-story small{
  color:#cdc9dc;
}
.public-hero .hero-kicker{
  color:#f08db3;
}


.free-library-section .free-library-copy h2,.free-library-section .free-library-copy h3,.free-library-section .free-library-copy p,.free-library-section .library-benefits b{
  color:#f8f7fb;
}
.free-library-section .section-label{
  color:#f08db3;
}
.free-library-section .library-benefits small,.free-library-section .library-auth-note{
  color:#c3bfd3;
}

/* Avoid global heading ink leaking onto other intentionally dark cards. */
.mx-ad-dark :is(h1,h2,h3,h4,p,strong,b,small),.assistant :is(h1,h2,h3,h4,p,strong,b,small){
  color:#f7f6fb;
}

/* Public landing finishing pass. */
.final-cta-inner h2,.final-cta-inner h3,.final-cta-inner p,.final-cta-inner strong,.final-cta-inner b{
  color:#f9f8fb;
}
.final-cta-inner>div>span{
  color:#f08db3;
}
.final-cta-inner p{
  color:#d4d1e1;
}
.public-footer,.public-footer strong,.public-footer a{
  color:#dedce8;
}
.public-footer small,.footer-brand-block span{
  color:#bab6cb;
}
.journey-grid em{
  color:#9a4062;
}

/* Data-heavy pages keep wide tables inside their own cards instead of
   expanding the entire viewport. */
.wrap .card:has(> table),.wrap .panel:has(> table){
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}

/* =====================================================================
   AFOQ V22.3 — MODERN TECHNOLOGY IDENTITY
   Midnight infrastructure, electric teal interaction and restrained warm.
   This final layer intentionally governs every authenticated SaaS surface.
   ===================================================================== */

body{background:var(--ms-bg);color:var(--ms-text)}
.dashboard-sidebar,.sidebar,.ms-sidebar{
  background:linear-gradient(180deg,#0b1221 0%,#10192f 58%,#05121e 100%);
  border-inline-start-color:rgba(87,53,224,.10);
}
.dashboard-brand-mark,.brand-mark,.afoq-logo-icon{
  background:transparent url('../assets/brand/afoq-logo.png') center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.dashboard-brand-mark::before,.brand-mark::before,.afoq-logo-icon::before{content:none}
.dashboard-nav-label,.nav-label{color:#91aeba}
.dashboard-nav a,.main-nav a,.sidebar a.nav-item{color:#d6e7eb}
.dashboard-nav a .nav-icon,.main-nav a .nav-icon{color:#b8d4da;background:rgba(87,53,224,.055)}
.dashboard-nav a.active,.main-nav a.active,.sidebar a.active{
  background:linear-gradient(90deg,rgba(87,53,224,.16),rgba(255,255,255,.055));
  border-color:rgba(87,53,224,.15);
  box-shadow:inset -3px 0 0 #5b4f8d;
}
.dashboard-nav a.active .nav-icon,.main-nav a.active .nav-icon{background:rgba(87,53,224,.13);color:#9e89f4;border-color:rgba(87,53,224,.17)}
.dashboard-topbar,.topbar,.header{border-color:var(--ms-border);box-shadow:0 8px 28px rgba(7,30,48,.045)}
.btn.primary,.primary-action,.report-btn.primary,.submit,.course-actions .primary,button.primary,[class*="btn"][class*="primary"]{
  background:linear-gradient(135deg,#3a2b75,#372874);
  box-shadow:0 10px 24px rgba(15,127,135,.19);
}
.btn.primary:hover,.primary-action:hover,.report-btn.primary:hover,.submit:hover,.course-actions .primary:hover,button.primary:hover,[class*="btn"][class*="primary"]:hover{background:linear-gradient(135deg,#1f325e,#30245f)}
:where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,
.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,.v14-hero,.login-brand,.auth-brand){
  background:radial-gradient(circle at 15% 10%,rgba(87,53,224,.15),transparent 28%),linear-gradient(135deg,#0b1221 0%,#172545 66%,#1f325e 100%);
}
.assistant{background:linear-gradient(145deg,#0b1221,#10192f)}
.saas-hero,.ms-page-hero{background:linear-gradient(135deg,#10192f,#172545 68%,#1f325e)}
:focus-visible{outline-color:#35cfc4}

html[data-theme="dark"],body.ms-dark,body.lux-dark{
  --ms-bg:#070b14;
  --ms-bg-accent:#091a29;
  --ms-surface:#0d1321;
  --ms-surface-2:#141d33;
  --ms-surface-3:#172139;
  --ms-text:#f0f8fa;
  --ms-text-2:#d1e2e7;
  --ms-text-3:#a9c0c8;
  --ms-border:#342b59;
  --ms-border-strong:#483d73;
  --surface:#0d1321;
  --surface-raised:#141d33;
  --surface-soft:#172139;
  --text-primary:#f0f8fa;
  --text-secondary:#d1e2e7;
  --text-muted:#a9c0c8;
  --border:#342b59;
  --border-strong:#483d73;
}

html[lang='ar'],html[dir='rtl'],body{font-family:var(--afoq-font-ar)}

html[lang='en'] body{font-family:var(--afoq-font-en)}

button,input,select,textarea{font:inherit}

h1,h2,h3,h4,h5,h6{color:var(--afoq-text);letter-spacing:0;line-height:1.35}

p{line-height:1.85}

body{background:var(--afoq-bg);color:var(--afoq-text)}

main,.main,.main-content,.page-content,.content{min-width:0}

.app-shell{min-width:0;width:100%}

.app-main{min-width:0;max-width:100%}

.saas-shell{width:min(100%,var(--afoq-content-max));max-width:100%;margin-inline:auto;padding-inline:clamp(14px,2vw,28px)}

.saas-table-wrap,.table-wrap,.data-table-wrap{max-width:100%;overflow:auto;overscroll-behavior-inline:contain}

img,video,canvas,svg{max-width:100%}

@media(max-width:900px){.saas-shell{padding-inline:12px}.app-shell{display:block}}

.card,.panel,.saas-panel,.ms-card{border-color:var(--afoq-border);box-shadow:var(--afoq-shadow-sm)}

button,.btn,.saas-btn{min-height:42px}

button.primary,.btn.primary,.saas-btn.primary{background:var(--afoq-primary);color:#fff;border-color:var(--afoq-primary)}

button.primary:hover,.btn.primary:hover,.saas-btn.primary:hover{background:var(--afoq-primary-hover)}

input,select,textarea{color:var(--afoq-text);background:#fff;border-color:var(--afoq-border)}

.header .logo img,.sidebar .logo img,.brand-lockup img{object-fit:contain}

.saas-hero,.ms-page-hero{overflow:hidden}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(57,49,90,.35);outline-offset:2px}

[aria-invalid='true'],.field-error input,.field-error select,.field-error textarea{border-color:var(--afoq-danger)}

.saas-message.error,.field-message.error{color:var(--afoq-danger)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}

/* AFOQ V22.7 — single geometry and typography owner for product pages. */

body:not(.public-site){min-width:320px;overflow-x:hidden;font-size:var(--afoq-body-size);line-height:1.75}

body:not(.public-site) :is(button,input:not([type="checkbox"]):not([type="radio"]),select,textarea){min-height:var(--afoq-control);font-size:14px}

body:not(.public-site) :is(input[type="checkbox"],input[type="radio"]){font-size:inherit;flex:0 0 auto}

body:not(.public-site) :is(p,li,td,th,label){font-size:14px;line-height:1.75}

body:not(.public-site) :is(small,.muted,.note,.hint,.metric-note){font-size:var(--afoq-meta-size);line-height:1.65}

body:not(.public-site) :is(h1,h2,h3,p){overflow-wrap:anywhere}

.dashboard-topbar{width:100%;min-height:72px;padding:10px clamp(18px,2vw,30px);gap:14px}

.dashboard-search{width:min(520px,48vw);min-height:46px}

.dashboard-page,.dashboard-content,.page-shell,.content-shell,.content,.v14-shell{
  width:100%;max-width:var(--afoq-page-max);min-width:0;margin-inline:auto;padding:clamp(18px,2.2vw,34px)
}

.ms-page-hero,.page-heading.ms-page-hero,.welcome-row.ms-page-hero,.v14-hero.ms-page-hero{
  width:100%;min-height:154px;margin:0 0 24px;padding:clamp(24px,3vw,38px);border-radius:22px;
  display:flex;align-items:center;justify-content:space-between;gap:24px
}

.ms-page-hero h1{font-size:clamp(1.75rem,2.3vw,2.35rem);line-height:1.32}

.ms-page-hero p{max-width:76ch;font-size:14px;line-height:1.8}

.modern-panel,.panel,.section-card,.table-card,.box{
  width:100%;min-width:0;margin-block:0 20px;padding:clamp(18px,2vw,24px);border-radius:18px
}

.modern-panel-header,.section-head,.page-heading{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap
}

.modern-panel-header h2,.section-head h2{font-size:1.15rem;line-height:1.45}

.modern-panel-header p,.section-head p{font-size:13px;line-height:1.7}

.dashboard-cards,.stats-grid,.kpi-grid{
  width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 22px
}

.dashboard-card{width:100%;min-width:0;min-height:144px;padding:20px;border-radius:18px}

.dashboard-card .metric-top small,.dashboard-card>small{font-size:13px;line-height:1.6}

.dashboard-card strong{margin-block:8px 4px;font-size:clamp(1.55rem,2vw,2rem);line-height:1.25}

.dashboard-card .service-state{font-size:1.05rem}

.dashboard-card .metric-note{font-size:12px}

.quick-actions-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.quick-action{min-width:0;min-height:84px;padding:15px;border-radius:15px}

.quick-action b{font-size:14px;line-height:1.55}

.quick-action small{font-size:12px;line-height:1.65}

/* UI/UX Pro Max: Afoq flat workspace. Dedicated component names replace legacy tiles. */
.workspace-page{max-width:1440px}
.workspace-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:12px 26px;margin-block-end:24px;border-bottom:1px solid var(--ms-border)}
.workspace-heading h1{margin:0 0 8px;font-size:clamp(1.65rem,2.6vw,2.4rem);font-weight:800;line-height:1.4;color:var(--ms-text);text-wrap:balance}
.workspace-heading p{margin:0;max-width:64ch;color:var(--ms-muted)}
.workspace-heading .workspace-eyebrow{font-size:12px;color:var(--ms-brand-700);font-weight:700;margin-bottom:8px}
.workspace-section{margin-block:0 32px;min-width:0;color:var(--ms-text)}
.workspace-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block-end:18px}
.workspace-section-head h2{font-size:1.15rem;margin:0 0 4px}
.workspace-section-head p{margin:0;color:var(--ms-muted)}
.workspace-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-block:24px 32px;border-block:1px solid var(--ms-border);padding-block:18px;gap:0;min-width:0}
.workspace-metric{display:block;min-width:0;padding:8px 20px;text-decoration:none;color:var(--ms-text);border-inline-end:1px solid var(--ms-border);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.workspace-metric:last-child{border-inline-end:0}
.workspace-metric strong{display:block;font-size:clamp(1.5rem,2vw,2rem);line-height:1.4;margin-block:6px}
.workspace-metric small,.workspace-metric p,.workspace-metric .metric-note{color:var(--ms-muted);margin:0;font-size:12px}
.workspace-metric .metric-icon,.workspace-metric .stat-icon{display:none}
.workspace-metric .service-state{font-size:1.05rem}
.workspace-metric[href]:hover{background:var(--ms-surface-2)}
/* Personal dashboards: calm translucent accents and a restrained glass finish. */
.workspace-personal{--workspace-glass:rgba(255,255,255,.68);--workspace-tint-mint:rgba(126,109,195,.20);--workspace-tint-blue:rgba(134,183,227,.20);--workspace-tint-lilac:rgba(179,157,218,.20);--workspace-tint-warm:rgba(226,121,161,.22);--workspace-glass-border:rgba(255,255,255,.86);--workspace-glass-shadow:0 12px 32px rgba(27,37,61,.055)}
html[data-theme="dark"] .workspace-personal{--workspace-glass:rgba(13,19,33,.76);--workspace-tint-mint:rgba(102,83,177,.18);--workspace-tint-blue:rgba(104,152,191,.18);--workspace-tint-lilac:rgba(150,122,187,.18);--workspace-tint-warm:rgba(183,88,124,.18);--workspace-glass-border:rgba(199,194,220,.15);--workspace-glass-shadow:0 12px 32px rgba(0,0,0,.12)}
.workspace-personal .dashboard-main{background:radial-gradient(ellipse at 96% 12%,var(--workspace-tint-mint),transparent 40%),radial-gradient(ellipse at 8% 48%,var(--workspace-tint-lilac),transparent 42%)}
.workspace-personal .workspace-metrics{gap:16px;border:0;padding:0;margin-block:26px 34px}
.workspace-personal .workspace-metric{--workspace-tint:var(--workspace-tint-mint);position:relative;min-height:148px;padding:22px;border:1px solid var(--workspace-glass-border);border-radius:18px;background-color:var(--workspace-glass);background-image:linear-gradient(135deg,var(--workspace-tint),transparent 90%);box-shadow:var(--workspace-glass-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.workspace-personal .workspace-metric:nth-child(4n+2){--workspace-tint:var(--workspace-tint-blue)}
.workspace-personal .workspace-metric:nth-child(4n+3){--workspace-tint:var(--workspace-tint-lilac)}
.workspace-personal .workspace-metric:nth-child(4n+4){--workspace-tint:var(--workspace-tint-warm)}
.workspace-personal .workspace-metric strong{font-size:clamp(1.8rem,2.4vw,2.35rem);margin-block:12px 6px}
.workspace-personal .workspace-metric small{font-size:13px;font-weight:600}
.workspace-personal .workspace-metric :is(small,p,.metric-note),.workspace-personal .workspace-task p{color:var(--ms-text-2)}
.workspace-personal .workspace-task-list{background:var(--workspace-glass);border-color:var(--workspace-glass-border);border-radius:18px;box-shadow:var(--workspace-glass-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.workspace-personal .workspace-task{background:linear-gradient(110deg,transparent 48%,var(--workspace-tint-mint));padding:24px}
.workspace-personal .workspace-task:nth-child(even){background:linear-gradient(110deg,transparent 48%,var(--workspace-tint-blue))}
.workspace-personal .workspace-task:first-child{border-inline-start-width:3px}
@media(max-width:600px){.workspace-personal .workspace-metrics{gap:12px}.workspace-personal .workspace-metric{min-height:132px;padding:16px;border:1px solid var(--workspace-glass-border)}.workspace-personal .workspace-task{padding:18px}}
.workspace-task-list{display:grid;gap:0;border:1px solid var(--ms-border);border-radius:12px;overflow:hidden;background:var(--ms-surface)}
.workspace-task{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--ms-border);min-width:0}
.workspace-task:last-child{border-bottom:0}
.workspace-task-number{font-size:18px;color:var(--ms-muted);font-variant-numeric:tabular-nums}
.workspace-task small{font-size:12px;font-weight:700;color:var(--ms-action-text)}
.workspace-task h3{font-size:17px;margin:2px 0 4px;color:var(--ms-text)}
.workspace-task p{margin:0;color:var(--ms-muted)}
.workspace-task>a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:8px;color:var(--ms-action-text);background:var(--ms-surface-2);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.workspace-task:first-child{border-inline-start:3px solid var(--ms-brand-700)}
.workspace-task:first-child>a{background:var(--ms-brand-700);color:var(--ms-on-primary,#fff)}
.workspace-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:0}
.workspace-link{display:flex;align-items:center;gap:16px;min-height:72px;padding:16px 4px;border-bottom:1px solid var(--ms-border);color:var(--ms-text);text-decoration:none;min-width:0}
.workspace-link:hover{background:var(--ms-surface-2)}
.workspace-link>span{flex:0 0 24px;color:var(--ms-brand-700);display:grid;place-items:center}
.workspace-link b,.workspace-link small{display:block}
.workspace-link small{font-size:12px;color:var(--ms-muted);margin-top:4px}
.workspace-disclosure{border-bottom:1px solid var(--ms-border);margin-bottom:20px}
.workspace-disclosure>summary{cursor:pointer;min-height:52px;padding:12px 0;color:var(--ms-text);font-weight:700}
.workspace-disclosure[open]>summary{margin-bottom:8px}
.workspace-search{display:grid;gap:6px;max-width:480px;color:var(--ms-text);font-size:13px;margin-block:16px 4px}
.workspace-search input{width:100%;border:1px solid var(--ms-border);border-radius:8px;padding:10px 14px;background:var(--ms-surface);color:var(--ms-text);min-height:44px}
.workspace-filter-status{color:var(--ms-muted);font-size:12px;min-height:20px;margin:4px 0 12px}
.workspace-body .course-list{gap:0}
.workspace-body .course{background:transparent;border:0;border-bottom:1px solid var(--ms-border);border-radius:0;box-shadow:none;padding:20px 0;transform:none}
.workspace-body .course-art{width:92px;min-height:104px;border-radius:8px}
.workspace-body .course-art>span{font-size:32px}
.workspace-body .course-info{min-width:0}
.workspace-body .progress{height:4px}
.workspace-body .split-layout{gap:40px}
.workspace-nav-group>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:44px;padding:12px;color:#d3d0dd;font-size:12px;font-weight:700}
.workspace-nav-group>summary::-webkit-details-marker{display:none}
.workspace-nav-group>summary::after{content:'+';font-size:18px;color:#d3d0dd}
.workspace-nav-group[open]>summary::after{content:'−'}
.workspace-nav-group>div{padding-bottom:8px}
.workspace-nav-group a[hidden],.workspace-nav-group[hidden],.workspace-link[hidden]{display:none}
@media(max-width:1000px){.workspace-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-task{padding:18px}.workspace-heading{align-items:flex-start}}
@media(max-width:600px){.workspace-heading{flex-direction:column;gap:16px}.workspace-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 0}.workspace-metric{padding:12px}.workspace-metric:nth-child(even){border-inline-end:0}.workspace-metric:nth-child(n+3){border-top:1px solid var(--ms-border)}.workspace-directory{grid-template-columns:1fr}.workspace-task{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:16px}.workspace-task>a{grid-column:2;justify-self:start;white-space:normal}.workspace-section-head{align-items:flex-start}.workspace-body .course-art{width:64px;min-height:92px}.workspace-body .course{gap:14px}}

.split-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.72fr);gap:18px;align-items:start}

.table-wrap,.saas-table-wrap,.data-table-wrap,.modern-table-wrap{width:100%;max-width:100%;overflow:auto;scrollbar-gutter:stable}

table{width:100%;min-width:720px;border-collapse:collapse}

th,td{padding:13px 14px;vertical-align:middle}

.primary-action,.secondary-action,.btn,.primary,.ghost,.pay{
  min-height:44px;padding:10px 16px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;font-size:13px;line-height:1.4;white-space:normal;text-align:center
}

@media(max-width:1320px){
  .dashboard-cards,.stats-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1100px){
  .dashboard-sidebar{pointer-events:none}
  .dashboard-sidebar.open{pointer-events:auto}
  .dashboard-menu-button{display:grid;place-items:center}
}

@media(max-width:760px){
  .dashboard-topbar{min-height:64px;padding:8px 12px;flex-wrap:wrap}
  .dashboard-search{order:3;width:100%;max-width:none}
  .dashboard-page,.dashboard-content,.page-shell,.content-shell,.content,.v14-shell{padding:14px}
  .ms-page-hero,.page-heading.ms-page-hero,.welcome-row.ms-page-hero,.v14-hero.ms-page-hero{min-height:0;padding:21px;border-radius:17px;align-items:flex-start;flex-direction:column}
  .split-layout{grid-template-columns:1fr}
}

@media(max-width:560px){
  .dashboard-cards,.stats-grid,.kpi-grid,.quick-actions-grid{grid-template-columns:1fr}
  .dashboard-card{min-height:132px}
  .modern-panel-header>*{width:100%}
  .modern-panel-header :is(.primary-action,.secondary-action,.btn){width:100%}
  table{min-width:640px}
}

/* AFOQ V22.13 — the final visual contract loaded after every page stylesheet. */

html[data-theme="dark"]{
  --ms-action-text:#a99cdb;
  color-scheme:dark;
  --ms-bg:var(--afoq-night);
  --ms-surface:var(--afoq-night-surface);
  --ms-surface-2:var(--afoq-night-raised);
  --ms-text:var(--afoq-night-text);
  --ms-text-2:var(--afoq-night-muted);
  --ms-text-3:var(--afoq-night-subtle);
  --ms-muted:var(--afoq-night-muted);
  --ms-border:var(--afoq-night-border);
  --surface:var(--afoq-night-surface);
  --surface-raised:var(--afoq-night-raised);
  --surface-soft:#172139;
  --text-primary:var(--afoq-night-text);
  --text-secondary:var(--afoq-night-muted);
  --text-muted:var(--afoq-night-subtle);
  --border:var(--afoq-night-border);
  --border-strong:#483d73;
  --brand-700:var(--afoq-primary);
  --brand-800:#172649;
  --brand-700:#2e1f6a;
  --brand-600:#3c2c7a;
  --brand-500:#534394;
  --brand-100:#162037;
  --brand-50:#10182b;
  --afoq-bg:var(--afoq-night);
  --afoq-surface:var(--afoq-night-surface);
  --afoq-text:var(--afoq-night-text);
  --afoq-muted:var(--afoq-night-muted);
  --afoq-border:var(--afoq-night-border);
  --afoq-primary:#5840c7;
  --afoq-primary-hover:#4630a8;
  --afoq-primary-soft:#f0edff;
}

html[data-theme="dark"] body{
  background:var(--afoq-night);
  color:var(--afoq-night-text);
}

html[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,strong,b,label,legend,dt){color:var(--afoq-night-text)}

html[data-theme="dark"] :where(p,li,dd,.description,.subtitle,.note,.hint,.metric-note){color:var(--afoq-night-muted)}

html[data-theme="dark"] :where(small,.muted,.meta,.helper,.caption){color:var(--afoq-night-subtle)}

html[data-theme="dark"] :where(.card,.panel,.modern-panel,.section-card,.dashboard-card,.table-card,.metric,.stat-card,.tile,.widget,.box,.v14-card,.check,.summary,.pilot):not(.ms-page-hero){
  background:var(--afoq-night-surface);
  border-color:var(--afoq-night-border);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}

html[data-theme="dark"] :where(.dashboard-topbar,.topbar,.header,.site-head){
  background:rgba(13,19,33,.97);
  border-color:var(--afoq-night-border);
  color:#fff;
}

html[data-theme="dark"] :where(input,select,textarea,.dashboard-search,.search){
  background:#090e1a;
  border-color:#40356c;
  color:#fff;
}

html[data-theme="dark"] :where(input,textarea)::placeholder{color:#bbb8c6;opacity:1}

html[data-theme="dark"] select option{background:#0d1321;color:#f8f7fa}

html[data-theme="dark"] :where(.primary-action,.btn.primary,button.primary,.submit,.signin-submit){
  background:linear-gradient(135deg,var(--afoq-primary-bright),var(--afoq-primary));
  border-color:#5e4da0;
  color:#fff;
  box-shadow:0 10px 24px rgba(44,31,94,.34);
}

html[data-theme="dark"] :where(.primary-action,.btn.primary,button.primary,.submit,.signin-submit):hover{
  background:linear-gradient(135deg,#5d4ca0,#372874);
}

html[data-theme="dark"] :where(.secondary-action,.btn.secondary,.outline,.ghost,.mini-btn,.top-icon-button){
  background:var(--afoq-night-raised);
  border-color:#545066;
  color:#fff;
}

html[data-theme="dark"] :where(.secondary-action,.btn.secondary,.outline,.ghost,.mini-btn,.top-icon-button):hover{
  background:#2a2f3a;
  border-color:var(--afoq-warm);
  color:#ffa3c6;
}

html[data-theme="dark"] table thead th{background:#172139;color:#fff;border-color:#3c3266}

html[data-theme="dark"] table tbody td{background:var(--afoq-night-surface);color:#f5f4f8;border-color:#313744}

html[data-theme="dark"] table tbody tr:hover td{background:#151f36}

html[data-theme="dark"] :where(.status,.badge,.chip,.pill){border-color:#57526b}

html[data-theme="dark"] a:where(:not([class])){color:#e775a1}

html[data-theme="dark"] .dashboard-sidebar,html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#14203d 0%,#0d1527 54%,#070b14 100%);
  border-color:#382d62;
}

html[data-theme="dark"] .dashboard-nav a,html[data-theme="dark"] .sidebar a{color:#e9e8ee}

html[data-theme="dark"] .dashboard-nav a:is(:hover,.active),html[data-theme="dark"] .sidebar a:is(:hover,.active){background:rgba(76,59,146,.22);color:#fff;box-shadow:inset -3px 0 0 var(--afoq-warm)}

html[data-theme="dark"] .ms-page-hero,html[data-theme="dark"] :where(.hero,.hero2,.hero-mastery,.practice-hero,.journey-hero,.offline-hero,.credential-hero,.intervention-hero,.report-hero,.users-hero,.config-hero,.ops-hero,.ready-hero){
  background:linear-gradient(135deg,#0e1830 0%,#1f325e 72%,#6f2843 135%);
  color:#fff;
}

/* One coherent dark surface language for operational and financial screens. */

html[data-theme="dark"] :where(dialog,.profile-dialog,.reconcile-dialog,.modal,.drawer,.menu,.dropdown,.command-palette){
  background:var(--afoq-night-surface);color:var(--afoq-night-text);border:1px solid var(--afoq-night-border);
  box-shadow:0 28px 80px rgba(0,0,0,.52);
}

html[data-theme="dark"] :where(dialog,.profile-dialog,.reconcile-dialog)::backdrop{background:rgba(2,4,10,.78);backdrop-filter:blur(5px)}

html[data-theme="dark"] :where(.ops-panel,.ops-kpi,.ops-info,.accounting-help,.finance-workflow article,.finance-attention button,.trial-balance-total,.accounting-step,.saas-card,.config-card,.result-card){
  background:var(--afoq-night-surface);border-color:var(--afoq-night-border);color:var(--afoq-night-text);
}

html[data-theme="dark"] :where(.accounting-help,.trial-balance-total,.ops-info,.surface-soft){background:#121b31}

html[data-theme="dark"] :where(.accounting-nav button,.tabs button,[role="tab"]){background:#10182a;border-color:#392f63;color:#dedce8}

html[data-theme="dark"] :where(.accounting-nav button,.tabs button,[role="tab"]):is(.active,[aria-selected="true"]){background:#372874;border-color:#5e4da0;color:#fff}

html[data-theme="dark"] :where(.ops-warn,.warning,.alert-warning){background:#361320;border-color:#802347;color:#ffadcc}

html[data-theme="dark"] :where(.ops-danger,.danger,.alert-danger){background:#351815;border-color:#7d3933;color:#ffd2ce}

html[data-theme="dark"] :where(.success,.alert-success){background:#121c33;border-color:#3e3076;color:#dad4f4}

html[data-theme="dark"] :where(hr,.divider){border-color:var(--afoq-night-border)}

html[data-theme="dark"] :where(input,select,textarea):focus{border-color:#6958ad;box-shadow:0 0 0 3px rgba(76,59,146,.22);outline:none}

html[data-theme="dark"] :where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(211,75,127,.48);outline-offset:2px}

html[data-theme="dark"] :where(.dialog-close,[data-close-dialog]){min-width:82px;background:#141d33;border-color:#483d73;color:#fff}

html[data-theme="dark"] :where(.dialog-close,[data-close-dialog]):hover{background:#1c2947;border-color:var(--afoq-warm);color:#ffa3c6}

html[lang="en"]{font-feature-settings:"kern" 1,"liga" 1}

html[lang="en"] body{line-height:1.55}

html[lang="en"] :where(input,textarea,select){text-align:left}

html[lang="en"] :where(.finance-attention button,.card,.panel,.ops-panel){text-align:left}

html[lang="en"] body{font-family:var(--afoq-font-en,'Inter','Segoe UI',Arial,sans-serif)}

html[lang="en"] :where(.dashboard-nav a,.topbar,.toolbar,.actions,.page-heading){letter-spacing:0}

/* V22.13.5 — contrast contract. This deliberately targets real component
   boundaries instead of painting every descendant with one global color. */

html[data-theme="dark"] body:not(.public-site) :is(.stat,.step,.course,.course-state,.role-action,.notification-item,.list-item,.finance-card,.ledger-card,.report-card,.settings-card,.empty-state,[data-component="surface"]){
  background:var(--afoq-night-surface);
  border-color:var(--afoq-night-border);
  color:var(--afoq-night-text);
}

html[data-theme="dark"] body:not(.public-site) :is(.stat,.step,.course,.course-state,.role-action,.notification-item,.list-item,.finance-card,.ledger-card,.report-card,.settings-card,.empty-state,[data-component="surface"]) :is(h1,h2,h3,h4,strong,b,label){color:var(--afoq-night-text)}

html[data-theme="dark"] body:not(.public-site) :is(.stat,.step,.course,.course-state,.role-action,.notification-item,.list-item,.finance-card,.ledger-card,.report-card,.settings-card,.empty-state,[data-component="surface"]) :is(p,small,.muted,.meta,.helper,.description){color:var(--afoq-night-muted)}

html[data-theme="dark"] body:not(.public-site) .step.locked{background:#10141e;opacity:.78}

html[data-theme="dark"] body:not(.public-site) .step.active{background:#10182a;border-color:#5c4d99;box-shadow:0 12px 34px rgba(0,0,0,.28)}

html[data-theme="dark"] body:not(.public-site) :is(.step-number,.stat-icon,.metric-icon,.feature-icon){background:#172139;color:#d97299;border-color:#40356c}

html[data-theme="dark"] body:not(.public-site) :is(.step-status,.requirement,.tag,.badge,.chip,.pill){background:#161e31;color:#dedce8;border-color:#40356c}

html[data-theme="dark"] body:not(.public-site) :is(.track-dot,.progress-track .track-dot){background:#172139;color:#f8f7fa;border-color:#362d5b;box-shadow:0 0 0 1px #483d73}

html[data-theme="dark"] body:not(.public-site) .track-item:not(:last-child)::after{background:#342b59}

html[data-theme="dark"] body:not(.public-site) :is(.track-item.active,.track-item.done) .track-dot{background:#3f2f80;color:#fff}

html[data-theme="dark"] body:not(.public-site) :is(.step-action.disabled,button:disabled,.btn:disabled){background:#242936;color:#9793a5;border-color:#39344c;opacity:.86}

/* Public website has an explicit light and dark contract; it never inherits
   white dashboard copy on a light marketing section. */

html[data-theme="light"] body.public-site :is(.section-heading h2,.free-library-copy h2,.experience-copy h2){color:#141b2b}

html[data-theme="light"] body.public-site :is(.section-heading p,.free-library-copy>p,.experience-copy>p){color:#5f707c}

html[data-theme="dark"] body.public-site{background:#070b14;color:#f8f7fa}

html[data-theme="dark"] body.public-site :is(.public-header,.platform-section,.public-section,.capability-strip){background:#070b14;border-color:#342b59}

html[data-theme="dark"] body.public-site :is(.section-heading h2,.free-library-copy h2,.experience-copy h2,.role-copy h3){color:#f8f7fa}

html[data-theme="dark"] body.public-site :is(.section-heading p,.free-library-copy>p,.experience-copy>p,.role-copy p){color:#c6c3d2}

html[data-theme="dark"] body.public-site :is(.role-card,.plan-card,.journey-card,.institution-card){background:linear-gradient(145deg,#10182a,#141d33);border-color:#342b59;color:#f8f7fa;box-shadow:0 18px 42px rgba(0,0,0,.28)}

html[data-theme="dark"] body.public-site .public-header{box-shadow:0 10px 30px rgba(0,0,0,.24)}

html[data-theme="dark"] body.public-site .public-links a{color:#dedce8}

html[data-theme="dark"] body.public-site .public-brand :is(strong,small){color:#f8f7fa}

/* V22.13.5 — complete two-theme surface contract for the remaining public,
   support, authentication and library components reported during visual QA. */

html[data-theme="light"] body{background:var(--afoq-light-canvas);color:var(--afoq-light-text)}

html[data-theme="light"] body:not(.public-site) [data-component="surface"]{background:var(--afoq-light-surface);border-color:var(--afoq-light-border);color:var(--afoq-light-text)}

html[data-theme="light"] body:not(.public-site) [data-component="surface"] :is(h1,h2,h3,h4,strong,b,label,legend){color:var(--afoq-light-text)}

html[data-theme="light"] body:not(.public-site) [data-component="surface"] :is(p,small,.muted,.meta,.helper,.description){color:var(--afoq-light-muted)}

html[data-theme="dark"] body [data-component="surface"]:not(.ms-page-hero):not(.saas-layer-control){
  background:var(--afoq-night-surface);border-color:var(--afoq-night-border);color:var(--afoq-night-text);
}

html[data-theme="dark"] body [data-component="surface"]:not(.ms-page-hero) :is(h1,h2,h3,h4,strong,b,label,legend,summary){color:var(--afoq-night-text)}

html[data-theme="dark"] body [data-component="surface"]:not(.ms-page-hero) :is(p,small,.muted,.meta,.helper,.description){color:var(--afoq-night-muted)}

/* Help center */

html[data-theme="dark"] body.support-page{background:linear-gradient(180deg,#070b14,#090e1a 420px);color:var(--afoq-night-text)}

html[data-theme="dark"] body.support-page :is(.scope-panel,.box,.guide-item,.assistant-answer){background:var(--afoq-night-surface);border-color:var(--afoq-night-border);color:var(--afoq-night-text)}

html[data-theme="dark"] body.support-page :is(.scope-panel,.box,.guide-item) :is(h2,h3,summary,strong){color:var(--afoq-night-text)}

html[data-theme="dark"] body.support-page :is(.scope-note,.assistant p,.guide-item p,.guide-item li){color:var(--afoq-night-muted)}

html[data-theme="dark"] body.support-page :is(.scope-chip,.quick-links a,.guide-count){background:#172139;border-color:#40356c;color:#dedce8}

html[data-theme="dark"] body.support-page :is(.guide-search,.assistant textarea,.field input,.field select){background:#090e1a;border-color:#40356c;color:#f8f7fa}

/* Authentication card — surface, fields and options always share one theme. */

html[data-theme="light"] body.public-site .signin-card{background:rgba(255,255,255,.98);color:#142532}

html[data-theme="light"] body.public-site .signin-card :is(h2,label,strong,b){color:#142532}

html[data-theme="dark"] body.public-site .signin-card{background:rgba(13,19,33,.98);border-color:#342b59;color:#f8f7fa;box-shadow:0 28px 80px rgba(0,0,0,.42)}

html[data-theme="dark"] body.public-site .signin-card :is(h2,label,strong,b){color:#f8f7fa}

html[data-theme="dark"] body.public-site .signin-card :is(p,.signin-options,.signin-separator span,.signin-footnote){color:#c6c3d2}

html[data-theme="dark"] body.public-site :is(.field-shell,.create-account-link){background:#090e1a;border-color:#40356c;color:#f8f7fa}

html[data-theme="dark"] body.public-site .field-shell input{background:transparent;color:#f8f7fa}

html[data-theme="dark"] body.public-site .field-symbol{border-color:#40356c;color:#d34b7f}

/* Library active/selected cards may never revert to a white island. */

html[data-theme="dark"] body :is(.library-category,.library-category.active,.library-book,.library-empty,.library-sort,.library-search){background:#0d1321;border-color:#342b59;color:#f8f7fa}

html[data-theme="dark"] body .library-category.active{background:linear-gradient(145deg,#141d33,#172139);border-color:#564b80}

html[data-theme="dark"] body .library-category :is(b,small,.cat-arrow){color:#dedce8}

html[data-theme="dark"] body .library-category :is(.cat-icon){background:#e9e7f2;color:#1f325e}

html[data-theme="dark"] body :is(.library-topbar,.library-discovery){border-color:#342b59}

html[data-theme="dark"] body .library-topbar{background:rgba(13,19,33,.96);color:#f8f7fa}

html[data-theme="dark"] body .library-user :is(b,small){color:#f8f7fa}

/* SaaS model and feature cards use coherent primary surfaces in dark mode. */

html[data-theme="dark"] body.public-site .saas-model-section{background:linear-gradient(180deg,#070b14,#090e1a)}

html[data-theme="dark"] body.public-site .saas-layer:not(.saas-layer-control){background:linear-gradient(145deg,#0d1321,#141d33);border-color:#342b59;color:#f8f7fa}

html[data-theme="dark"] body.public-site .saas-layer:not(.saas-layer-control) :is(h3){color:#f8f7fa}

html[data-theme="dark"] body.public-site .saas-layer:not(.saas-layer-control) :is(p){color:#c6c3d2}

html[data-theme="dark"] body.public-site .saas-layer-control{background:linear-gradient(145deg,#172649,#1f325e);border-color:#483d73;color:#fff}




/* Top-bar identity and profile controls must remain readable in both themes. */

html[data-theme="dark"] body :is(.dashboard-profile,.library-user,.topbar-user,.user-chip){background:#141d33;border-color:#342b59;color:#f8f7fa}

html[data-theme="dark"] body :is(.dashboard-profile,.library-user,.topbar-user,.user-chip) :is(b,strong,small,span){color:#f8f7fa}

/* Afoq V23 product shell: semantic tokens, predictable layout, accessible states. */

[data-theme="dark"]{
  --ms-bg:#070b14;--ms-surface:#0d1321;--ms-surface-raised:#131c30;--ms-text:#f8f7fa;
  --ms-muted:#bcb9c8;--ms-border:#2d364a;--ms-primary:#7f70b9;--ms-primary-hover:#978ac9;
  --ms-primary-soft:#172036;--ms-accent:#df6694;--ms-danger:#ff9b91;--ms-warning:#f06fa0;
  --ms-success:#8c7bd0;--ms-focus:#9c8ed6;--ms-shadow:0 18px 48px rgba(0,0,0,.28)
}

body:not(.public-site){background:var(--ms-bg);color:var(--ms-text)}

body:not(.public-site) :is(.card,.panel,.section-card,.dashboard-card,.table-card,[data-component="surface"]){background:var(--ms-surface);color:var(--ms-text);border-color:var(--ms-border)}

:is(button,a,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--ms-focus) 55%,transparent);outline-offset:2px}

.ms-page-container{width:min(100%,var(--ms-page-max));margin-inline:auto;padding-inline:clamp(14px,2vw,32px)}

.ms-shell-compact .dashboard-nav .ms-nav-secondary{display:none}

.ms-shell-compact .dashboard-nav[data-expanded="true"] .ms-nav-secondary{display:flex}

.ms-nav-more{width:100%;margin-block:8px;border:1px dashed var(--ms-border);background:transparent;color:var(--ms-muted);border-radius:12px;padding:10px;font:800 12px inherit;cursor:pointer}

.ms-command-trigger{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid var(--ms-border);border-radius:13px;background:var(--ms-surface);color:var(--ms-text);font:800 13px inherit;cursor:pointer}

.ms-command-trigger kbd{direction:ltr;border:1px solid var(--ms-border);border-radius:7px;padding:2px 6px;background:var(--ms-bg);color:var(--ms-muted)}

.ms-command-dialog{width:min(680px,calc(100vw - 24px));border:0;padding:0;border-radius:22px;background:var(--ms-surface);color:var(--ms-text);box-shadow:0 30px 100px rgba(0,0,0,.35)}

.ms-command-dialog::backdrop{background:rgba(2,5,12,.7);backdrop-filter:blur(5px)}

.ms-command-head{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--ms-border)}

.ms-command-head input{flex:1;min-width:0;height:48px;border:1px solid var(--ms-border);border-radius:13px;background:var(--ms-bg);color:var(--ms-text);padding-inline:14px;font:700 15px inherit}

.ms-command-close{width:48px;border:1px solid var(--ms-border);border-radius:13px;background:var(--ms-surface);color:var(--ms-text);cursor:pointer}

.ms-command-results{max-height:min(60vh,520px);overflow:auto;padding:10px}

.ms-command-item{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:13px;border:0;border-radius:13px;background:transparent;color:var(--ms-text);text-align:start;text-decoration:none}

.ms-command-item:hover,.ms-command-item[aria-selected="true"]{background:var(--ms-primary-soft)}

.ms-command-item small{color:var(--ms-muted)}

.ms-state{display:grid;place-items:center;gap:10px;min-height:150px;padding:24px;border:1px dashed var(--ms-border);border-radius:var(--ms-radius);background:var(--ms-surface);color:var(--ms-muted);text-align:center}

.ms-state-error{border-color:color-mix(in srgb,var(--ms-danger) 38%,var(--ms-border));color:var(--ms-danger)}

.ms-state button{min-height:42px;border:0;border-radius:12px;padding-inline:16px;background:var(--ms-primary);color:#fff;font:800 13px inherit}

.ms-stepper{display:grid;grid-template-columns:repeat(var(--ms-steps,3),1fr);gap:8px;margin-block:0 20px}

.ms-step{position:relative;padding:10px;border-radius:12px;background:var(--ms-bg);color:var(--ms-muted);font-size:12px;font-weight:800;text-align:center}

.ms-step[aria-current="step"]{background:var(--ms-primary);color:#fff}

.ms-step[data-complete="true"]{background:var(--ms-primary-soft);color:var(--ms-primary)}

.ms-form-actions{position:sticky;bottom:0;display:flex;justify-content:flex-start;gap:10px;padding:14px;background:color-mix(in srgb,var(--ms-surface) 92%,transparent);border-top:1px solid var(--ms-border);backdrop-filter:blur(12px);z-index:3}

.ms-field-error{display:block;color:var(--ms-danger);font-size:12px;font-weight:700;margin-top:6px}

.ms-toast-region{position:fixed;inset-block-start:76px;inset-inline-start:18px;display:grid;gap:10px;z-index:9999;width:min(360px,calc(100vw - 36px))}

.ms-toast{padding:14px 16px;border:1px solid var(--ms-border);border-inline-start:4px solid var(--ms-primary);border-radius:14px;background:var(--ms-surface-raised);color:var(--ms-text);box-shadow:var(--ms-shadow)}

@media(max-width:760px){.ms-command-trigger span,.ms-command-trigger kbd{display:none}.ms-command-trigger{width:42px;padding:0;justify-content:center}.ms-stepper{overflow:auto;grid-template-columns:repeat(var(--ms-steps,3),minmax(130px,1fr))}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms;transition-duration:.01ms}}

/* Canonical page contract. This layer owns geometry; feature CSS owns only domain details. */

body[data-page-contract="true"]{overflow-x:hidden}

body[data-page-contract="true"] :is(.dashboard-main,.main-content,.wrap,.ops-shell,.saas-shell,.v14-shell){box-sizing:border-box
}

body[data-page-contract="true"] :is(.dashboard-page,.content,.wrap,.ops-shell,.saas-shell,.v14-shell){padding-inline:clamp(14px,2vw,30px);padding-block:22px}

.pc-breadcrumbs{display:flex;align-items:center;gap:8px;min-height:28px;margin:0 0 12px;color:var(--ms-muted);font-size:12px;font-weight:750;overflow:auto;white-space:nowrap}

.pc-breadcrumbs a{color:var(--ms-primary);text-decoration:none}

.pc-breadcrumbs span[aria-current="page"]{color:var(--ms-muted)}

.pc-page-header{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:var(--pc-header-min);margin:0 0 var(--pc-gap);padding:24px 26px;border:1px solid var(--ms-border);border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--ms-surface) 96%,var(--ms-primary-soft)),var(--ms-surface));color:var(--ms-text);box-shadow:var(--ms-shadow)}

.pc-page-header-copy{min-width:0}

.pc-page-header-eyebrow{display:block;margin-bottom:5px;color:var(--ms-accent);font-size:11px;font-weight:900;letter-spacing:.03em}

.pc-page-header h1{margin:0;font-size:clamp(24px,2.5vw,38px);line-height:1.25;color:var(--ms-text)}

.pc-page-header p{max-width:780px;margin:7px 0 0;color:var(--ms-muted);line-height:1.8;font-size:14px}

.pc-page-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex:0 0 auto}

.pc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--ms-border);border-radius:16px;background:var(--ms-surface);color:var(--ms-text)}

.pc-toolbar-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}

.pc-section{min-width:0;margin-block:0 var(--pc-gap)}

.pc-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}

.pc-section-header h2{margin:0;color:var(--ms-text);font-size:19px;line-height:1.4}

.pc-section-header p{margin:4px 0 0;color:var(--ms-muted);font-size:13px;line-height:1.7}

.pc-surface{min-width:0;border:1px solid var(--ms-border);border-radius:18px;background:var(--ms-surface);color:var(--ms-text);box-shadow:0 8px 28px rgba(13,23,48,.055)}

.pc-surface:not(table):not(tr):not(td):not(th){padding:var(--pc-card-pad)}

.pc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 var(--pc-gap)}

.pc-stat{position:relative;min-height:128px;padding:19px;overflow:hidden}

.pc-stat::after{content:"";position:absolute;inset-inline-end:-22px;inset-block-start:-28px;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--ms-primary-soft) 70%,transparent);pointer-events:none}

.pc-stat :is(strong,.value){display:block;margin-top:10px;color:var(--ms-text);font-size:clamp(25px,3vw,34px);line-height:1;font-weight:900}

.pc-stat :is(small,.metric-note,em){color:var(--ms-muted);font-style:normal}

.pc-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}

.pc-action-card{min-height:112px;display:flex;align-items:flex-start;gap:12px;padding:17px;text-decoration:none;color:var(--ms-text);transition:transform .18s,border-color .18s,box-shadow .18s}

.pc-action-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ms-primary) 48%,var(--ms-border));box-shadow:var(--ms-shadow)}

.pc-action-card :is(h3,b,strong){color:var(--ms-text)}

.pc-action-card :is(p,small){color:var(--ms-muted)}

.pc-data-region{min-width:0;max-width:100%;overflow:hidden}

.pc-table-scroll{width:100%;max-width:100%;overflow:auto;border:1px solid var(--ms-border);border-radius:16px;background:var(--ms-surface);scrollbar-gutter:stable}

.pc-table-scroll table{width:100%;min-width:720px;border:0;border-collapse:separate;border-spacing:0;background:var(--ms-surface);color:var(--ms-text)}

.pc-table-scroll th{position:sticky;top:0;z-index:1;height:48px;padding:0 16px;background:var(--ms-primary-soft);color:var(--ms-text);border-bottom:1px solid var(--ms-border);font-size:12px;text-align:start;white-space:nowrap}

.pc-table-scroll td{min-height:var(--pc-table-row);padding:13px 16px;border-bottom:1px solid var(--ms-border);color:var(--ms-text);vertical-align:middle}

.pc-table-scroll tbody tr:last-child td{border-bottom:0}

.pc-table-scroll tbody tr:hover td{background:color-mix(in srgb,var(--ms-primary-soft) 42%,var(--ms-surface))}

.pc-form{display:grid;gap:18px}

.pc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.pc-form-grid>.wide,.pc-form-grid>.full,.pc-form-grid>[data-span="full"]{grid-column:1/-1}

.pc-field{display:grid;align-content:start;gap:7px;min-width:0;color:var(--ms-text);font-size:13px;font-weight:800}

.pc-field :is(input,select,textarea){width:100%;max-width:100%;min-width:0;min-height:var(--pc-control);box-sizing:border-box;border:1px solid var(--ms-border);border-radius:12px;background:var(--ms-surface-raised);color:var(--ms-text);padding:10px 13px;font:600 14px inherit;box-shadow:none}

.pc-field textarea{min-height:108px;resize:vertical}

.pc-field :is(input,select,textarea)::placeholder{color:color-mix(in srgb,var(--ms-muted) 76%,transparent)}

.pc-field :is(.hint,small,.saas-form-hint){color:var(--ms-muted);font-size:11px;font-weight:600;line-height:1.6}

.pc-field [aria-invalid="true"]{border-color:var(--ms-danger)}

.pc-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:9px 16px;border-radius:12px;font:800 13px inherit;white-space:normal;text-align:center;text-decoration:none;cursor:pointer}

.pc-primary{border:1px solid var(--ms-primary);background:var(--ms-primary);color:#fff}

.pc-secondary{border:1px solid var(--ms-border);background:var(--ms-surface);color:var(--ms-text)}

.pc-danger{border-color:var(--ms-danger);color:var(--ms-danger);background:transparent}

.pc-tabs{display:flex;gap:8px;width:100%;max-width:100%;margin-bottom:18px;padding:4px;overflow:auto;scrollbar-width:thin}

.pc-tabs>*{flex:0 0 auto;min-height:40px;border-radius:11px}

.pc-dialog{width:min(720px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:22px;background:var(--ms-surface);color:var(--ms-text);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.38)}

.pc-dialog::backdrop{background:rgba(3,7,16,.72);backdrop-filter:blur(5px)}

.pc-dialog>form,.pc-dialog>:first-child{max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}

.pc-dialog :is(.dialog-close,.otp-close,[data-close-dialog],[data-close-org]){min-width:42px;min-height:42px}

.pc-empty{display:grid;place-items:center;min-height:170px;padding:28px;border:1px dashed var(--ms-border);border-radius:16px;background:var(--ms-surface);color:var(--ms-muted);text-align:center}

[data-theme="dark"] .pc-page-header{background:linear-gradient(135deg,var(--ms-surface),color-mix(in srgb,var(--ms-surface-raised) 76%,var(--ms-accent)))}

[data-theme="dark"] .pc-surface{box-shadow:0 10px 32px rgba(0,0,0,.2)}

@media(max-width:900px){.pc-page-header{align-items:flex-start;flex-direction:column}.pc-page-header-actions{justify-content:flex-start;width:100%}.pc-form-grid{grid-template-columns:1fr}.pc-form-grid>*{grid-column:auto}}

@media(max-width:620px){:root{--pc-card-pad:16px;--pc-gap:18px}.pc-page-header{min-height:0;padding:19px;border-radius:18px}.pc-toolbar{align-items:stretch;flex-direction:column}.pc-toolbar-group{width:100%}.pc-toolbar-group>.pc-button{flex:1}.pc-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-stat{min-height:112px}.pc-action-grid{grid-template-columns:1fr}}

@media(max-width:390px){.pc-stat-grid{grid-template-columns:1fr}}

/* ==========================================================================
   V23.2 — single canonical top bar (replaces scattered .mx-*/

.ms-*/.dashboard-*
   geometry). One flex row,nothing fixed-width,nothing overlapping.
   ========================================================================== */
.dashboard-topbar.mx-single-topbar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;height:auto;min-height:64px;padding:8px clamp(10px,2vw,24px);min-width:0;overflow:visible}

.dashboard-topbar.mx-single-topbar>*{flex:0 0 auto;min-width:0}

.dashboard-topbar .mx-context-inline{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;order:1}

.dashboard-topbar .mx-page-chip{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;width:auto;flex:0 1 auto;padding:6px 12px;white-space:nowrap}

.dashboard-topbar .mx-page-chip b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}

.dashboard-topbar .mx-page-chip .mx-role-badge{flex:0 0 auto;white-space:nowrap;width:auto}

.dashboard-topbar .mx-toolbar-actions{display:flex;align-items:center;gap:8px;order:2;flex:0 0 auto}

.dashboard-topbar .dashboard-top-actions{display:flex;align-items:center;gap:8px;order:3;flex:0 0 auto;min-width:0}

.dashboard-topbar .ms-command-trigger{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px}

.dashboard-topbar .ms-command-trigger kbd{flex:0 0 auto}

.dashboard-topbar .dashboard-profile{display:flex;align-items:center;gap:8px;min-width:0}

.dashboard-topbar .dashboard-profile .copy{min-width:0}

.dashboard-topbar .dashboard-profile .copy b,.dashboard-topbar .dashboard-profile .copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch}

@media (max-width:1180px){
  .dashboard-topbar .ms-command-trigger span,.dashboard-topbar .ms-command-trigger kbd{display:none}
  .dashboard-topbar .ms-command-trigger{padding-inline:10px}
  .dashboard-topbar .mx-role-badge{display:none}
}

@media (max-width:820px){
  .dashboard-topbar.mx-single-topbar{flex-wrap:wrap;row-gap:6px}
  .dashboard-topbar.mx-single-topbar{height:auto}
  .dashboard-topbar .mx-context-inline{display:none}
  .dashboard-topbar .dashboard-menu-button{order:0}
  .dashboard-topbar .dashboard-top-actions{margin-inline-start:auto;flex-wrap:wrap;row-gap:6px}
  .dashboard-topbar .mx-primary-next{display:none}
  .dashboard-topbar .dashboard-profile .copy{display:none}
}

/* V23.2 — headings on dark assistant/hero cards must never inherit the dark page heading colour. */

section.box.assistant :is(h1,h2,h3,h4,strong,b){color:#fff}

html body .box.assistant :is(h1,h2,h3,h4,strong,b),#assistantPanel h2{color:#fff;-webkit-text-fill-color:#fff}
/* Canonical header geometry. This component is rendered by the HTTP template. */
.product-header{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:12px;min-height:72px;width:100%;max-width:100%;padding:12px clamp(14px,2vw,28px);box-sizing:border-box;background:var(--ms-surface);color:var(--ms-text);border-bottom:1px solid var(--border,#dbe5ea);flex-wrap:wrap}
.product-header .product-brand-link{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;text-decoration:none}
.product-header .product-brand-link img{display:block;width:40px;height:40px;object-fit:contain}
.product-header .product-brand-link:hover{background:var(--afoq-primary-soft)}
.product-header .product-brand-link:focus-visible{outline:2px solid var(--afoq-primary);outline-offset:3px}
.product-header .product-title{flex:1 1 160px;min-width:120px;font-weight:750;overflow-wrap:anywhere}
.product-header .product-actions{display:flex;align-items:center;flex:0 1 auto;gap:10px;min-width:0;margin-inline-start:auto}
.product-header .dashboard-profile{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.product-header .dashboard-profile .user-copy{display:grid;max-width:150px;overflow-wrap:anywhere}
.product-header .avatar{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;background:var(--afoq-primary-soft);color:var(--afoq-primary);border-radius:50%}
.product-header :is(button,.product-help,.product-notifications){width:auto;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:12px;background:var(--ms-surface);color:var(--ms-text);text-decoration:none;cursor:pointer;padding:8px}
.product-header .ms-command-trigger{max-width:none;white-space:nowrap;flex-shrink:0}
.product-header .ms-command-trigger kbd{font-size:11px;color:var(--ms-muted,var(--ms-text-3))}
.product-header .product-page-actions{display:flex;align-items:center;gap:8px}
.product-header .dashboard-menu-button{display:none}
.product-header svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.product-header .afoq-global-announcement{flex-basis:100%;padding:8px;border-radius:8px;background:var(--surface-soft)}
@media(max-width:860px){.product-header{gap:8px;min-height:64px}.product-header .dashboard-menu-button{display:inline-flex}.product-header .product-title{flex:1 1 0;min-width:0}.product-header .product-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.product-header .dashboard-profile .user-copy{display:none}.product-header .ms-command-trigger kbd{display:none}}
/* One shell layout owner, independent of text direction. */
html body.dashboard-body .dashboard-layout{display:block;width:100%;max-width:100%;min-height:100dvh}
html body.dashboard-body .dashboard-sidebar{position:fixed;inset:0 0 0 auto;width:var(--afoq-sidebar,272px);max-width:var(--afoq-sidebar,272px);height:100dvh;overflow-y:auto;overflow-x:hidden;transform:none;z-index:var(--z-sidebar)}
html body.dashboard-body .dashboard-main{display:block;width:calc(100% - var(--afoq-sidebar,272px));max-width:none;min-width:0;margin:0 var(--afoq-sidebar,272px) 0 0;padding:0;overflow:visible}
html body.dashboard-body :is(.content,.dashboard-content,.dashboard-page){box-sizing:border-box;min-width:0;max-width:100%}
html body .ms-page-hero{background:linear-gradient(135deg,#172545 0%,#1f325e 72%,#514875 100%);color:#fff}
html body .ms-page-hero :is(h1,h2){color:#fff}
html body .ms-page-hero p{color:#f0eef6}
@media(max-width:860px){html body.dashboard-body .dashboard-main{width:100%;margin:0}html body.dashboard-body .dashboard-sidebar{transform:translateX(110%);transition:transform .2s ease}html body.dashboard-body .dashboard-sidebar.open{transform:translateX(0)}}

/* Preferences component: one geometry owner; theme changes only its colors. */
body .ms-experience-controls{--pref-bg:#fff;--pref-text:#293248;--pref-border:#d9d7e2;--pref-hover:#ebe9f3;--pref-accent:#172649;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;box-sizing:border-box;width:auto;min-width:0;max-width:none;height:44px;padding:4px;margin:0;border:1px solid var(--pref-border);border-radius:14px;background:var(--pref-bg);color:var(--pref-text);overflow:visible;box-shadow:0 8px 24px rgba(13,29,68,.08)}
html[data-theme="dark"] .ms-experience-controls{--pref-bg:#0d1321;--pref-text:#f8f7fa;--pref-border:#342b59;--pref-hover:#172139;--pref-accent:#ffa3c6}
body .ms-experience-controls :is(.ms-theme-toggle,.ms-reading-toggle,.ms-language-toggle){position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:7px;box-sizing:border-box;width:auto;min-width:38px;max-width:none;height:34px;min-height:34px;margin:0;padding:0 9px;border:0;border-radius:10px;background:transparent;color:var(--pref-text);font:800 12px/1 var(--afoq-font-en,sans-serif);cursor:pointer;box-shadow:none;transform:none}
body .ms-experience-controls :is(.ms-theme-toggle,.ms-reading-toggle,.ms-language-toggle):hover{background:var(--pref-hover);color:var(--pref-accent)}
.ms-experience-controls button:focus-visible{outline:2px solid #d34b7f;outline-offset:2px}
.ms-experience-controls svg{display:block;width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms-experience-controls .chevron{width:14px;height:14px}
.ms-experience-controls b{font:inherit;color:inherit}
.ms-language-picker{position:relative;display:inline-flex}
.ms-experience-controls .ms-language-menu{position:absolute;z-index:150;inset-block-start:calc(100% + 10px);inset-inline-end:0;box-sizing:border-box;width:220px;max-height:55vh;overflow:auto;padding:7px;border:1px solid var(--pref-border);border-radius:14px;background:var(--pref-bg);color:var(--pref-text);box-shadow:0 24px 60px rgba(0,0,0,.24)}
.ms-language-menu[hidden]{display:none}
.ms-experience-controls .ms-language-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:7px 10px;border:0;border-radius:9px;background:transparent;color:var(--pref-text);text-align:start;font:inherit;cursor:pointer;box-shadow:none}
.ms-experience-controls .ms-language-option:hover,.ms-experience-controls .ms-language-option[aria-selected="true"]{background:var(--pref-hover);color:var(--pref-accent)}
.ms-experience-controls .ms-language-option[aria-selected="true"]{border-inline-start:3px solid #d34b7f}
.ms-language-option span{font-weight:700}.ms-language-option small{color:inherit;opacity:.75}
.ms-experience-controls .ms-language-option:disabled{cursor:not-allowed;opacity:.46}
@media(max-width:720px){.ms-experience-controls .ms-language-menu{width:min(220px,calc(100vw - 24px))}}

/* Role dashboard cards use theme tokens; no client-injected palette. */


.ms-reauth-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid var(--afoq-border);border-radius:20px;background:var(--ms-surface);color:var(--ms-text)}
.ms-reauth-dialog::backdrop{background:rgb(12 28 22 / .65)}
.ms-reauth-dialog label[hidden]{display:none}
.ms-reauth-dialog label{display:grid;gap:8px;margin-block:16px}.ms-reauth-dialog input{width:100%;min-height:44px;box-sizing:border-box;padding:10px;border:1px solid var(--afoq-border);border-radius:10px;background:var(--ms-surface);color:var(--ms-text)}
.reauth-actions{display:flex;gap:10px;flex-wrap:wrap}.reauth-actions button{min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid var(--afoq-border);background:var(--afoq-primary);color:white}.reauth-actions [data-cancel]{background:var(--ms-surface);color:var(--ms-text)}
.institution-lessons{display:grid;gap:10px}.institution-lesson-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--afoq-border);border-radius:12px;flex-wrap:wrap}.institution-grants label{display:flex;align-items:center;gap:10px;min-height:44px}.institution-grants input{width:20px;height:20px}.institution-grants{display:grid;gap:8px}

/* Shared password input: preserve value, make direction and visibility explicit. */
.ms-password-field{display:block;position:relative;width:100%;min-width:0;flex:1}
.ms-password-field input{width:100%;box-sizing:border-box;padding-inline-end:52px;text-align:start}
.ms-password-visibility{position:absolute;inset-inline-end:4px;top:0;bottom:0;margin-block:auto;height:44px;transform:none;display:grid;place-items:center;min-width:44px;min-height:44px;width:44px;padding:0;border:0;background:transparent;color:var(--afoq-muted);cursor:pointer;border-radius:8px}
.ms-password-field .ms-password-visibility:is(:hover,:active){transform:none}
.ms-password-visibility:focus-visible{outline:2px solid var(--afoq-primary);outline-offset:1px}
.ms-password-caps{position:absolute;top:100%;inset-inline-start:0;font-size:12px;color:var(--afoq-warning)}
.ms-password-caps[hidden]{display:none}
.reauth-account{overflow-wrap:anywhere;unicode-bidi:plaintext;font-size:13px}

/* Learning experience components share the platform's semantic tokens. */
.institution-experience{display:grid;gap:var(--ms-space-5);margin-block:var(--ms-space-5);min-width:0}
.experience-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.experience-heading h2,.experience-card h2,.experience-card h3{margin-block:0 12px;color:var(--afoq-text)}
.experience-card{min-width:0;border:1px solid var(--afoq-border);background:var(--afoq-surface);color:var(--afoq-text);border-radius:var(--ms-radius-md);padding:var(--ms-space-5);box-shadow:var(--ms-shadow-xs);overflow-wrap:anywhere}
.experience-card p,.experience-card small,.experience-card time{color:var(--afoq-muted);line-height:1.8}
.experience-columns,.experience-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ms-space-4)}
.experience-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ms-space-4);margin-bottom:var(--ms-space-4)}
.experience-stats article{display:flex;flex-direction:column;gap:8px}.experience-stats strong{font-size:32px;font-variant-numeric:tabular-nums}
.experience-mint{background:linear-gradient(135deg,color-mix(in srgb,var(--afoq-primary) 9%,var(--afoq-surface)),var(--afoq-surface))}
.experience-warm{background:linear-gradient(135deg,color-mix(in srgb,var(--afoq-accent) 14%,var(--afoq-surface)),var(--afoq-surface))}
.experience-resume{background:linear-gradient(120deg,color-mix(in srgb,var(--afoq-primary) 8%,var(--afoq-surface)),color-mix(in srgb,var(--afoq-accent) 8%,var(--afoq-surface)));margin-bottom:var(--ms-space-4)}
.experience-card progress{display:block;width:100%;height:10px;accent-color:var(--afoq-primary);margin-block:12px}
.experience-card summary,.experience-path a{min-height:44px;display:flex;align-items:center;gap:12px;color:var(--afoq-text)}
.experience-path{padding-inline-start:22px}.experience-path span{font-size:12px;color:var(--afoq-muted)}
.experience-row{padding-block:16px;border-bottom:1px solid var(--afoq-border)}.experience-row:last-child{border-bottom:0}
.experience-row p{white-space:pre-wrap}.experience-reply{padding:12px;border-inline-start:3px solid var(--afoq-accent);background:var(--ms-surface-2)}
.experience-member,.experience-check{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block:8px}.experience-check{justify-content:flex-start;min-height:44px}.experience-check input{width:20px;height:20px}
.experience-error{color:var(--ms-danger)}.lesson-notes{margin-top:24px}.lesson-notes textarea{width:100%}
@media(max-width:760px){.experience-columns,.experience-course-list,.experience-stats{grid-template-columns:minmax(0,1fr)}.experience-card{padding:16px}.experience-stats strong{font-size:28px}}
.lesson-notes form{display:grid;gap:16px}.lesson-notes form label{display:grid;gap:8px}.lesson-notes :is(input,textarea){font:inherit;min-height:44px;background:var(--afoq-surface);color:var(--afoq-text);border:1px solid var(--afoq-border);border-radius:var(--ms-radius-sm);padding:12px}.lesson-notes button{min-height:44px;padding:10px 16px;background:var(--afoq-primary-soft);color:var(--afoq-text);border:1px solid var(--afoq-border);border-radius:var(--ms-radius-sm);cursor:pointer}
.lesson-discussion{margin-block:24px}.lesson-discussion form,.lesson-discussion label{display:grid;gap:12px}.lesson-discussion :is(input,textarea){font:inherit;width:100%;min-height:44px;padding:12px;border:1px solid var(--afoq-border);border-radius:var(--ms-radius-sm);background:var(--afoq-surface);color:var(--afoq-text)}.lesson-discussion form[hidden]{display:none}.lesson-discussion :is(button,summary){min-height:44px;cursor:pointer}.lesson-discussion button{padding:10px 16px;background:var(--afoq-primary-soft);color:var(--afoq-text);border:1px solid var(--afoq-border);border-radius:var(--ms-radius-sm)}.transcript-edit-row{display:grid;gap:12px;padding-block:16px;border-bottom:1px solid var(--afoq-border)}
#quizLink[hidden],#quizTop[hidden],.player-layout [hidden]{display:none}
.lesson[aria-disabled="true"]{background:var(--ms-surface-2);color:var(--afoq-muted);cursor:not-allowed}

#quizLink:not([hidden]){display:inline-block;margin-top:8px}

/* Approved Afoq identity. Gradients are accents, text uses accessible solid colors. */
:root{--ap-cyan:#00b9dc;--ap-violet:#7047f5;--ap-orange:#ffbd69;--ap-pink:#f25388;--ap-gradient:linear-gradient(120deg,#008fa9,#258bfa 48%,#7047f5);--ap-plus-gradient:linear-gradient(120deg,#ffbd69,#f25388)}
.public-brand img,.auth-logo,.logo-img,.brand-intro-final-mark{object-fit:contain;filter:none}
.public-brand img{width:64px;height:64px}.product-brand-link img{width:44px;height:44px}
.dashboard-brand-mark,.brand-mark,.afoq-logo-icon{background:none;box-shadow:none}.dashboard-brand-mark img,.brand-mark img,.afoq-logo-icon img{width:100%;height:100%;object-fit:contain;filter:none}
:where(.button-primary,.btn.primary,.saas-btn.primary){background:var(--ap-gradient);color:#fff}
:where(.button-accent){background:var(--ap-plus-gradient);color:#382039}
:where(.public-brand strong,.signin-brand-mini b){direction:ltr;unicode-bidi:isolate}

/* Shared action rhythm for platform and institution workspaces. */
.workspace-start{margin-block:24px}.workspace-start>h2{font-size:1.2rem;line-height:1.5;color:var(--ms-text);margin:0 0 16px}
.workspace-start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.workspace-start-action{display:flex;align-items:flex-start;gap:12px;min-height:104px;padding:18px;border:1px solid var(--ms-border);border-radius:var(--ms-radius-md);background:var(--ms-surface);color:var(--ms-text);text-decoration:none;transition:border-color .18s,box-shadow .18s}
.workspace-start-action>span:first-child{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:12px;background:var(--ms-primary-soft);color:var(--ms-action-text)}
.workspace-start-action>span:last-child{min-width:0;display:grid;gap:6px}.workspace-start-action strong{font-size:1rem;line-height:1.6}.workspace-start-action small{font-size:.85rem;line-height:1.7;color:var(--ms-text-2)}
.workspace-start-action:hover{border-color:var(--ms-brand-400);box-shadow:var(--ms-shadow-sm)}
.workspace-start-action:focus-visible{outline:3px solid var(--ms-focus);outline-offset:3px}
.institution-identity-stack{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media(max-width:520px){.workspace-start-grid{grid-template-columns:1fr}.workspace-start-action{min-height:88px;padding:16px}}
.institution-card-identity{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-block:12px}
.institution-card-logo{width:72px;height:72px;object-fit:contain;padding:6px;box-sizing:border-box;border:1px solid var(--ms-border);border-radius:16px;background:#fff}
.institution-card-identity h3{margin:0;line-height:1.5}
/* Selected tenant destinations remain readable in both display modes. */
html body .institution-main-nav nav a[aria-current=page]{background:#eae6ff;color:#35227a}
html[data-theme=dark] body .institution-main-nav nav a[aria-current=page]{background:#2e245d;color:#f5f2ff;border-color:#9a85ff}
/* Full-width password inputs retain room for their visibility control in every form. */
.ms-password-field input[type]{width:100%;inline-size:100%;max-width:100%;padding-inline-end:52px}
.pc-field .ms-password-field input[type]{width:100%;inline-size:100%;max-width:100%;padding-inline-end:52px}

/* 24.9: paired colors for readable actions and surfaces in both modes. */
:root{--ap-button-bg:#5840c7;--ap-button-hover:#4630a8;--ap-button-text:#fff;--ap-button-border:#5840c7;--ap-secondary-bg:#f0edff;--ap-secondary-text:#4630a8;--ap-secondary-border:#afa2db;--ms-action-text:#4630a8;--ms-focus:#5840c7}
html[data-theme=dark]{--ap-button-bg:#b9a8ff;--ap-button-hover:#c9bdff;--ap-button-text:#201a3a;--ap-button-border:#b9a8ff;--ap-secondary-bg:#25203f;--ap-secondary-text:#dfd5ff;--ap-secondary-border:#887aa8;--ms-action-text:#cbbaff;--ms-focus:#cbbaff;--ms-text-2:#c8d3e3;--ms-text-3:#b7c4d6}
body :is(.btn.primary,.saas-btn.primary,.v14-btn:not(.ghost),.ms-btn-primary,.primary-action,.pay,.submit-btn){background:var(--ap-button-bg);color:var(--ap-button-text);border:1px solid var(--ap-button-border);box-shadow:0 4px 12px rgba(30,20,80,.12);border-radius:12px}
body :is(.btn.primary,.saas-btn.primary,.v14-btn:not(.ghost),.ms-btn-primary,.primary-action,.pay,.submit-btn):hover{background:var(--ap-button-hover);color:var(--ap-button-text);transform:none}
body :is(.saas-btn:not(.primary),.v14-btn.ghost,.btn.secondary,.ms-btn-secondary){background:var(--ap-secondary-bg);color:var(--ap-secondary-text);border:1px solid var(--ap-secondary-border);box-shadow:none}
body :is(.saas-btn:not(.primary),.v14-btn.ghost,.btn.secondary,.ms-btn-secondary):hover{background:var(--ms-primary-soft);color:var(--ms-action-text);transform:none}
body :is(.saas-btn,.v14-btn,.ms-btn,.btn):focus-visible{outline:3px solid var(--ms-focus);outline-offset:3px}
body :is(.saas-btn,.v14-btn,.ms-btn,.btn):disabled{opacity:.65;cursor:not-allowed;box-shadow:none}
html[data-theme=dark] :is(.saas-message,.v14-note,.saas-hero p){color:var(--ms-text-2)}
body .v14-note{color:var(--ms-text-2)}
html[data-theme=dark] body .dashboard-profile .avatar{background:var(--ap-secondary-bg);color:var(--ap-secondary-text)}
body .saas-table td small{color:var(--ms-text-2)}

/* The supplied wordmark is wide; give it room instead of fitting it in an icon. */
.public-brand img{width:132px;height:62px;object-fit:contain;background:#fff;border-radius:10px}
.public-brand strong,.signin-brand-mini b{display:none}
.signin-brand-mini img{width:132px;height:62px;object-fit:contain;background:#fff;border-radius:10px}
.product-header .product-brand-link{flex:0 0 116px;width:116px;height:54px}
.product-header .product-brand-link img{width:112px;height:52px;background:#fff;border-radius:9px}
body[data-afoq-page] .dashboard-brand-mark{width:124px;height:58px;flex:0 0 124px;padding:0;background:#fff;border-radius:10px}
.dashboard-brand-mark+span>b{display:none}
.brand-mark,.afoq-logo-icon{width:116px;height:54px;flex-basis:116px;background:#fff;border-radius:10px}
.auth-logo,.logo-img{width:180px;height:84px;object-fit:contain;background:#fff;border-radius:12px}
@media(max-width:520px){.public-brand img{width:108px;height:50px}.public-brand small{font-size:11px}.product-header .product-brand-link{flex-basis:100px;width:100px}.product-header .product-brand-link img{width:96px;height:46px}}
/* Warm reading: paper surfaces, brown ink and restrained contrast. */
html[data-theme="reading"]{
 color-scheme:light;--afoq-bg:#f4ebd9;--afoq-surface:#fff8e9;--afoq-text:#34291e;--afoq-muted:#705c45;--afoq-border:#d9c9ad;--afoq-primary:#705025;--afoq-primary-hover:#513a1d;--afoq-primary-soft:#eadbc1;
 --ms-bg:#f4ebd9;--ms-bg-accent:#f1e4cc;--ms-surface:#fff8e9;--ms-surface-2:#fbf0dc;--ms-surface-3:#ecdfc7;--ms-surface-raised:#fff8e9;--ms-surface-glass:rgba(255,248,233,.95);--ms-text:#34291e;--ms-text-2:#604d37;--ms-text-3:#76634a;--ms-muted:#705c45;--ms-border:#d9c9ad;--ms-border-strong:#baa482;--ms-primary:#705025;--ms-primary-soft:#eadbc1;--ms-action-text:#68451f;--ms-topbar-bg:#fff8e9;--ms-topbar-chip:#f2e5cc;--ms-topbar-chip-border:#d9c9ad;--ms-topbar-chip-text:#34291e;
 --bg:#f4ebd9;--ink:#34291e;--muted:#705c45;--line:#d9c9ad;--dash-bg:#f4ebd9;--dash-card:#fff8e9;--dash-text:#34291e;--dash-muted:#705c45;--dash-line:#d9c9ad;--afoq-light-canvas:#f4ebd9;--afoq-light-surface:#fff8e9;--afoq-light-raised:#fbf0dc;--afoq-light-text:#34291e;--afoq-light-muted:#705c45;--afoq-light-border:#d9c9ad;
}
html[data-theme="reading"] body{background:var(--ms-bg);color:var(--ms-text)}
html[data-theme="reading"] :is(input,select,textarea){background:var(--ms-surface-2);color:var(--ms-text);border-color:var(--ms-border)}
html[data-theme="reading"] :is(.reader-toolbar,.reader-frame-shell,.library-hero,.library-sidebar,.library-main,.library-book,.product-header,.ms-experience-controls){background:var(--ms-surface);color:var(--ms-text);border-color:var(--ms-border)}
html[data-theme="reading"] .reader-frame-shell iframe{filter:sepia(.18)}
.ms-reading-toggle[aria-pressed="true"]{background:#eadbc1;color:#513a1d;border-radius:10px;box-shadow:inset 0 0 0 1px #baa482}
.product-tool-icon{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.product-help,.product-notifications{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:520px){.product-header .ms-experience-controls{gap:0}.product-header .ms-experience-controls .top-icon-button{min-width:32px;width:32px;padding:6px}}

html[data-theme="reading"] body.public-site{--public-ink:#34291e;--public-muted:#705c45;--public-line:#d9c9ad}
html[data-theme="reading"] body.public-site :is(.public-header,.public-nav,.public-section,.public-hero){background:var(--ms-bg);color:var(--ms-text)}
html[data-theme="reading"] .library-sidebar :is(a,b,strong,p,small,h1){color:var(--ms-text)}
html[data-theme="reading"] body .ms-experience-controls .ms-reading-toggle[aria-pressed="true"]{background:#eadbc1;color:#513a1d;box-shadow:inset 0 0 0 1px #baa482}