/* ═══════════════════════════════════════════════════════════════
   مدارس براعم الوطن — واجهة v2: نظام تصميم موحّد لكل الصفحات والبطاقات
   Tokens → page hero → summary tiles → cards → tabs → empty states → dashboards
   ═══════════════════════════════════════════════════════════════ */
body.fq2{
  --f-brand:#8e65ab;--f-brand-d:#6e4a8c;--f-brand-s:#f5eef9;
  --f-navy:#43305f;--f-ink:#1f2d3a;--f-muted:#66737f;--f-line:#e8e2d9;--f-paper:#f7f3fa;--f-card:#fff;
  --f-teal:#0e7c6f;--f-green:#2f8a3e;--f-blue:#8e65ab;--f-indigo:#4b4fb8;--f-plum:#86409a;--f-gold:#b7841c;--f-amber:#c46a12;--f-rose:#c0396a;
  --f-r:16px;--f-r-s:11px;--f-shadow:0 1px 2px rgb(31 45 58/.05),0 6px 22px rgb(31 45 58/.06);--f-shadow-h:0 2px 4px rgb(31 45 58/.06),0 14px 34px rgb(31 45 58/.11);
  background:var(--f-paper)!important;color:var(--f-ink)!important;font-family:'Baraem Workspace','Cairo',sans-serif!important
}
body.fq2 :is(.main,#mainContent){background:var(--f-paper)!important}
body.fq2 #mainContent{--tone:var(--f-brand);--tone-s:var(--f-brand-s)}
body.fq2 #mainContent[data-fq-tone=teal]{--tone:var(--f-teal);--tone-s:#e6f4f1}
body.fq2 #mainContent[data-fq-tone=green]{--tone:var(--f-green);--tone-s:#e9f5eb}
body.fq2 #mainContent[data-fq-tone=blue]{--tone:var(--f-blue);--tone-s:#f3ecf8}
body.fq2 #mainContent[data-fq-tone=indigo]{--tone:var(--f-indigo);--tone-s:#ecedfb}
body.fq2 #mainContent[data-fq-tone=plum]{--tone:var(--f-plum);--tone-s:#f5ebf8}
body.fq2 #mainContent[data-fq-tone=gold]{--tone:var(--f-gold);--tone-s:#fbf3e1}
body.fq2 #mainContent[data-fq-tone=amber]{--tone:var(--f-amber);--tone-s:#fdf0e3}
body.fq2 #mainContent[data-fq-tone=rose]{--tone:var(--f-rose);--tone-s:#fbeaf1}
body.fq2 #mainContent[data-fq-tone=navy]{--tone:var(--f-navy);--tone-s:#e9eef4}
body.fq2 #mainContent svg.lucide{stroke-width:1.9}

/* ── sidebar & top bar ── */
body.ent-mode.fq2 .sidebar{background:#fff!important;border-left:1px solid var(--f-line)!important}
body.ent-mode.fq2 #sbNav .ent-sb-sec{color:#9a8f80!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.2px;margin:18px 16px 6px!important}
body.ent-mode.fq2 #sbNav .ent-sb-item{border-radius:12px!important;margin:2px 10px!important;padding:9px 12px!important;color:#43515d!important;font-weight:700!important;border:0!important;background:none!important}
body.ent-mode.fq2 #sbNav .ent-sb-item:hover{background:#f5f1ea!important;color:var(--f-ink)!important}
body.ent-mode.fq2 #sbNav .ent-sb-item.active{background:linear-gradient(90deg,#fff,var(--f-brand-s))!important;color:var(--f-brand-d)!important;box-shadow:inset -3px 0 0 var(--f-brand)!important;border:0!important}
body.ent-mode.fq2 #sbNav .ent-sb-item.active .ent-sb-icon{color:var(--f-brand)!important}
body.ent-mode.fq2 .topbar{background:rgb(255 255 255/.92)!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--f-line)!important}
body.fq2 .fq-page-nav{padding:16px 30px 0!important}
body.fq2 .fq-page-nav button{border-radius:12px!important;border-color:var(--f-line)!important;color:var(--f-brand)!important;width:40px!important;height:40px!important;box-shadow:var(--f-shadow)}
body.fq2 .fq-page-nav button:hover{background:var(--f-brand-s)!important;border-color:var(--f-brand)!important}
body.fq2 .fq-page-crumb b{color:var(--f-ink)!important}

/* ── page containers ── */
body.fq2 #mainContent :is(.bp-page,.ln-work,.std,.qb2,.flex-col){max-width:1440px;margin-inline:auto}
body.fq2 #mainContent .bp-page{display:flex;flex-direction:column;gap:18px}

/* ── page hero (every page header becomes a colored band with an icon) ── */
body.fq2 #mainContent .fq2-hero{position:relative;display:flex!important;align-items:center;gap:18px;padding:22px 26px!important;margin:0 0 4px!important;border-radius:var(--f-r)!important;
  background:linear-gradient(120deg,var(--tone) 0%,color-mix(in srgb,var(--tone) 72%,#43305f) 100%)!important;color:#fff!important;border:0!important;box-shadow:0 10px 28px color-mix(in srgb,var(--tone) 24%,transparent)!important;overflow:hidden}
body.fq2 #mainContent .fq2-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 120%,rgb(255 255 255/.16) 0 90px,transparent 91px),radial-gradient(circle at 4% -30%,rgb(255 255 255/.1) 0 120px,transparent 121px);pointer-events:none}
body.fq2 #mainContent .fq2-hero :is(h1,h2,h3,p,span,b,small,div){color:#fff!important}
body.fq2 #mainContent .fq2-hero h1{font-size:24px!important;font-weight:900!important;margin:0!important;line-height:1.5!important}
body.fq2 #mainContent .fq2-hero p{margin:2px 0 0!important;opacity:.88;font-size:13.5px!important}
body.fq2 #mainContent .fq2-hero-ic{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:rgb(255 255 255/.17);box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
body.fq2 #mainContent .fq2-hero-ic svg{width:29px;height:29px;color:#fff}
body.fq2 #mainContent .fq2-hero :is(button,.hx-btn,.ts-btn,.gd-btn,.qb2-btn,.std-btn,a.btn){background:#fff!important;color:var(--tone)!important;border:0!important;border-radius:12px!important;font-weight:800!important;box-shadow:0 4px 12px rgb(0 0 0/.12)!important}
body.fq2 #mainContent .fq2-hero :is(button,.hx-btn).ghost{background:rgb(255 255 255/.16)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)!important}
body.fq2 #mainContent .fq2-hero>div:first-of-type{flex:1;min-width:0}
body.fq2 #mainContent .fq2-hero :is(.std-hero-stats,.ag-hero-stats){position:relative;z-index:1}
body.fq2 #mainContent .fq2-hero .std-hero-stat{background:rgb(255 255 255/.14)!important;border:0!important;border-radius:12px!important}

/* ── summary tiles ── */
body.fq2 #mainContent :is(.hx-summary,.ts-summary,.gd-stat-grid,.qb2-stats){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:14px!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div,.gd-stat,.qb2-stat){position:relative;display:flex!important;flex-direction:column;justify-content:center;gap:2px;min-height:96px;padding:16px 18px 16px 70px!important;background:#fff!important;border:1px solid var(--f-line)!important;border-radius:var(--f-r)!important;box-shadow:var(--f-shadow)!important;text-align:right}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div) b,body.fq2 #mainContent :is(.gd-stat-val,.qb2-stat-v){font-size:28px!important;font-weight:900!important;line-height:1.2!important;color:var(--f-ink)!important}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div) span,body.fq2 #mainContent :is(.gd-stat-lbl,.qb2-stat-l){font-size:12.5px!important;color:var(--f-muted)!important;font-weight:700!important}
body.fq2 #mainContent .fq2-tile-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--c,var(--tone-s));color:var(--ci,var(--tone))}
body.fq2 #mainContent .fq2-tile-ic svg{width:21px;height:21px}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div):nth-child(4n+2){--c:#fdf0e3;--ci:var(--f-amber)}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div):nth-child(4n+3){--c:#e9f5eb;--ci:var(--f-green)}
body.fq2 #mainContent :is(.hx-summary>div,.ts-summary>div):nth-child(4n+4){--c:#ecedfb;--ci:var(--f-indigo)}
body.fq2 #mainContent :is(.gd-stat-ic,.qb2-stat-ic){display:none!important}
body.fq2 #mainContent .hx-summary b.warn,body.fq2 #mainContent .hx-summary .warn b{color:var(--f-amber)!important}

/* ── tabs ── */
body.fq2 #mainContent :is(.hx-tabs,.std-tabs,.qb2-tabs){display:flex!important;flex-wrap:wrap;gap:6px!important;padding:6px!important;background:#fff!important;border:1px solid var(--f-line)!important;border-radius:14px!important;width:max-content;max-width:100%;box-shadow:var(--f-shadow)}
body.fq2 #mainContent :is(.hx-tab,.std-tab,.qb2-tab){border:0!important;background:none!important;border-radius:10px!important;padding:8px 16px!important;font-weight:800!important;color:var(--f-muted)!important;box-shadow:none!important}
body.fq2 #mainContent :is(.hx-tab,.std-tab,.qb2-tab).on{background:var(--tone)!important;color:#fff!important}
body.fq2 #mainContent .hx-tab em{font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-inline-start:6px;border-radius:999px;background:rgb(0 0 0/.07);font-size:11.5px}
body.fq2 #mainContent .hx-tab.on em{background:rgb(255 255 255/.25)}

/* ── buttons ── */
body.fq2 #mainContent :is(.hx-btn,.ts-btn,.gd-btn,.qb2-btn,.std-btn,.ln-toolbar button,.btn){border-radius:12px!important;font-weight:800!important;font-family:inherit!important}
body.fq2 #mainContent :is(.hx-btn,.ts-btn,.gd-btn,.qb2-btn-p,.ln-toolbar .primary,.btn-primary,button.primary):not(.ghost){background:var(--tone)!important;border-color:var(--tone)!important;color:#fff!important;box-shadow:0 6px 16px color-mix(in srgb,var(--tone) 26%,transparent)!important}
body.fq2 #mainContent :is(.hx-btn,.ts-btn,.gd-btn).ghost{background:#fff!important;color:var(--tone)!important;border:1px solid var(--f-line)!important;box-shadow:none!important}

/* ── generic cards & records ── */
body.fq2 #mainContent :is(.card,.gd-panel,.fq-record,.ln-card,.gb-card,.at-cls,.ag-info,.gb-how,.std-bar,.qb2-bar){background:#fff!important;border:1px solid var(--f-line)!important;border-radius:var(--f-r)!important;box-shadow:var(--f-shadow)!important}
body.fq2 #mainContent :is(.fq-record,.gb-card,.at-cls,.ts-card,.st-sub){transition:transform .16s,box-shadow .16s,border-color .16s}
body.fq2 #mainContent :is(.fq-record,.gb-card,.at-cls,.ts-card,.st-sub):hover{transform:translateY(-3px);box-shadow:var(--f-shadow-h)!important;border-color:color-mix(in srgb,var(--tone) 35%,var(--f-line))!important}
body.fq2 #mainContent .ln-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px!important;background:#fff;border:1px solid var(--f-line);border-radius:var(--f-r);box-shadow:var(--f-shadow);margin-bottom:16px}

/* subject cards (student) */
body.fq2 #mainContent .st-sub-grid,body.fq2 #mainContent .ts-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:18px!important}
body.fq2 #mainContent .st-sub,body.fq2 #mainContent .ts-card{background:#fff!important;border:1px solid var(--f-line)!important;border-radius:20px!important;overflow:hidden;box-shadow:var(--f-shadow)!important;padding:0!important;cursor:pointer}
body.fq2 #mainContent .st-sub-hd,body.fq2 #mainContent .ts-card-top{display:flex!important;align-items:center;gap:14px;padding:20px!important;background:linear-gradient(120deg,color-mix(in srgb,var(--c,var(--tone)) 14%,#fff),#fff)!important;border-bottom:1px solid var(--f-line)}
body.fq2 #mainContent :is(.st-sub-ic,.ts-ic){display:grid!important;place-items:center;width:52px!important;height:52px!important;border-radius:15px!important;background:var(--c,var(--tone))!important;color:#fff!important;font-size:22px!important;font-weight:900;flex:none;box-shadow:0 6px 14px color-mix(in srgb,var(--c,var(--tone)) 30%,transparent)}
body.fq2 #mainContent :is(.st-sub-ic,.ts-ic) svg{width:25px;height:25px}
body.fq2 #mainContent .st-sub-hd b{font-size:18px!important;font-weight:900!important;color:var(--f-ink)!important}
body.fq2 #mainContent .st-sub-hd span{color:var(--f-muted)!important;font-size:13px!important}
body.fq2 #mainContent .st-sub-nums{display:grid!important;grid-template-columns:repeat(3,1fr);padding:14px 10px!important;gap:0!important}
body.fq2 #mainContent .st-sub-nums>div{text-align:center;border-inline-start:1px solid var(--f-line);padding:4px}
body.fq2 #mainContent .st-sub-nums>div:first-child{border:0}
body.fq2 #mainContent .st-sub-nums b{display:block;font-size:20px!important;font-weight:900!important;color:var(--c,var(--tone))!important}
body.fq2 #mainContent .st-sub-nums span{font-size:11.5px!important;color:var(--f-muted)!important}

/* grades */
body.fq2 #mainContent .st-gr-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:18px!important}
body.fq2 #mainContent .st-gr{background:#fff!important;border:1px solid var(--f-line)!important;border-radius:20px!important;box-shadow:var(--f-shadow)!important;padding:20px!important;border-top:5px solid var(--c,var(--tone))!important}
body.fq2 #mainContent .hw-bar{height:9px!important;border-radius:9px!important;background:#efe9df!important;overflow:hidden}
body.fq2 #mainContent .hw-bar>*{border-radius:9px!important;background:linear-gradient(90deg,var(--f-gold),var(--tone))!important}

/* tables */
body.fq2 #mainContent table{border-collapse:separate!important;border-spacing:0!important;background:#fff;border:1px solid var(--f-line)!important;border-radius:var(--f-r)!important;overflow:hidden;box-shadow:var(--f-shadow)}
body.fq2 #mainContent th{background:#faf7f2!important;color:#4a5763!important;font-weight:800!important;border-bottom:1px solid var(--f-line)!important;padding:12px 14px!important}
body.fq2 #mainContent td{border-bottom:1px solid #f0ebe3!important;padding:12px 14px!important}
body.fq2 #mainContent tbody tr:hover td{background:#fcfaf6!important}

/* inputs */
body.fq2 #mainContent :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:12px!important;border:1px solid #ddd5ca!important;background:#fff!important;font-family:inherit!important}
body.fq2 #mainContent :is(input,select,textarea):focus{border-color:var(--tone)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 16%,transparent)!important;outline:0!important}

/* empty states */
body.fq2 #mainContent :is(.hx-empty,.gd-empty,.std-empty,.ln-empty,.fq-empty-state){display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:220px;padding:34px 20px!important;background:#fff!important;border:1.5px dashed #ddd3c4!important;border-radius:20px!important;box-shadow:none!important;color:var(--f-muted)!important}
body.fq2 #mainContent .fq2-empty-ic{display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:var(--tone-s);color:var(--tone);margin-bottom:6px;box-shadow:inset 0 0 0 8px rgb(255 255 255/.7)}
body.fq2 #mainContent .fq2-empty-ic svg{width:34px;height:34px}
body.fq2 #mainContent :is(.hx-empty,.gd-empty,.std-empty,.ln-empty) b,body.fq2 #mainContent .gd-empty-t{font-size:16px!important;font-weight:900!important;color:var(--f-ink)!important}
body.fq2 #mainContent :is(.ln-empty,.fq-empty-state)>svg.lucide-inbox,body.fq2 #mainContent .std-empty>.ic,body.fq2 #mainContent .hx-empty>.ic{display:none}

/* ═══════════ dashboards v2 ═══════════ */
.fq2-dash{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:20px;color:var(--f-ink)}
.fq2-dash *{box-sizing:border-box}
.fq2-dash button{font-family:inherit;cursor:pointer}
.fq2-dash svg{width:20px;height:20px;flex:none}
.fq2-banner{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:28px 30px;border-radius:24px;color:#fff;overflow:hidden;
  background:linear-gradient(115deg,#43305f 0%,#2b3f5c 38%,#6e4a8c 78%,#8e65ab 100%);box-shadow:0 18px 40px rgb(29 53 80/.22)}
.fq2-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% -20%,rgb(255 255 255/.14) 0 140px,transparent 141px),radial-gradient(circle at 70% 130%,rgb(255 255 255/.08) 0 160px,transparent 161px);pointer-events:none}
.fq2-banner::after{content:"";position:absolute;left:190px;top:50%;width:170px;height:170px;transform:translateY(-50%);background:url('/brand/baraem-symbol.png') center/contain no-repeat;opacity:.09;filter:grayscale(1) brightness(3);pointer-events:none}
body.fq2 #mainContent .fq2-banner :is(h1,p,small,span,b,em){color:#fff!important}body.fq2 #mainContent .fq2-banner .fq2-date :is(span){color:var(--f-brand)!important}body.fq2 #mainContent .fq2-banner .fq2-date strong{color:var(--f-navy)!important}body.fq2 #mainContent .fq2-banner .fq2-date em{color:var(--f-muted)!important}
.fq2-banner>*{position:relative}
.fq2-banner small{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:999px;background:rgb(255 255 255/.14)}
.fq2-banner h1{font-size:30px;font-weight:900;line-height:1.45;margin:10px 0 4px;color:#fff}
.fq2-banner p{margin:0;font-size:14px;opacity:.9}
.fq2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fq2-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:rgb(255 255 255/.13);box-shadow:inset 0 0 0 1px rgb(255 255 255/.18);font-size:13px;font-weight:800;color:#fff;border:0}
.fq2-chip b{font-size:16px}
.fq2-chip svg{width:17px;height:17px}
.fq2-date{text-align:center;min-width:150px;padding:16px 18px;border-radius:18px;background:rgb(255 255 255/.95);color:var(--f-ink);box-shadow:0 10px 24px rgb(0 0 0/.18)}
.fq2-date span{display:block;font-size:12.5px;font-weight:800;color:var(--f-brand)}
.fq2-date strong{display:block;font-size:44px;font-weight:900;line-height:1.1;color:var(--f-navy)}
.fq2-date em{display:block;font-style:normal;font-size:12px;color:var(--f-muted);font-weight:700}
.fq2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fq2-kpi{position:relative;display:flex;flex-direction:column;gap:10px;text-align:right;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--f-line);box-shadow:var(--f-shadow);color:var(--f-ink);overflow:hidden;transition:transform .16s,box-shadow .16s}
.fq2-kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--k)}
.fq2-kpi:hover{transform:translateY(-3px);box-shadow:var(--f-shadow-h)}
.fq2-kpi-top{display:flex;align-items:center;gap:12px}
.fq2-kpi-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ks);color:var(--k)}
.fq2-kpi-ic svg{width:23px;height:23px}
.fq2-kpi-top h3{margin:0;font-size:15px;font-weight:900;flex:1}
.fq2-kpi-top>svg{color:#b9ae9f;width:17px}
.fq2-kpi-num{display:flex;align-items:baseline;gap:8px}
.fq2-kpi-num b{font-size:34px;font-weight:900;line-height:1;color:var(--k)}
.fq2-kpi-num span{font-size:13px;color:var(--f-muted);font-weight:700}
.fq2-kpi-line{font-size:12.5px;color:#4b5864;font-weight:700;line-height:1.7;min-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq2-kpi-line i{font-style:normal;color:var(--f-muted);font-weight:600}
.fq2-bar{height:8px;border-radius:8px;background:#f0ebe2;overflow:hidden}
.fq2-bar span{display:block;height:100%;border-radius:8px;background:var(--k);width:var(--w)}
.fq2-ring{--p:0;width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--k) calc(var(--p)*1%),#efe9df 0)}
.fq2-ring b{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#fff;font-size:13px;font-weight:900;color:var(--k)}
.k-amber{--k:var(--f-amber);--ks:#fdf0e3}.k-green{--k:var(--f-green);--ks:#e9f5eb}.k-teal{--k:var(--f-teal);--ks:#e6f4f1}.k-indigo{--k:var(--f-indigo);--ks:#ecedfb}.k-blue{--k:var(--f-blue);--ks:#f3ecf8}.k-plum{--k:var(--f-plum);--ks:#f5ebf8}.k-gold{--k:var(--f-gold);--ks:#fbf3e1}.k-rose{--k:var(--f-rose);--ks:#fbeaf1}.k-brand{--k:var(--f-brand);--ks:var(--f-brand-s)}.k-navy{--k:var(--f-navy);--ks:#e9eef4}
.fq2-cols{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:20px;align-items:start}
.fq2-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.fq2-panel{background:#fff;border:1px solid var(--f-line);border-radius:20px;box-shadow:var(--f-shadow);overflow:hidden}
.fq2-panel>header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #f0ebe3}
.fq2-panel>header h2{margin:0;font-size:16px;font-weight:900;flex:1}
.fq2-panel>header .fq2-ph-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ks);color:var(--k)}
.fq2-panel>header .fq2-ph-ic svg{width:18px;height:18px}
.fq2-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--f-brand);font-weight:800;font-size:12.5px;padding:4px 0}
.fq2-link svg{width:15px;height:15px}
.fq2-body{padding:14px 20px 18px}
.fq2-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fq2-timeline li{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:#faf8f4;border:1px solid #f0ebe3}
.fq2-timeline li.now{background:var(--f-brand-s);border-color:#dcc6e8}
.fq2-timeline time{font-weight:900;color:var(--f-navy);font-size:14px;text-align:center;line-height:1.3}
.fq2-timeline time small{display:block;font-size:10.5px;color:var(--f-muted);font-weight:700}
.fq2-timeline b{display:block;font-size:14.5px}
.fq2-timeline span small{display:block;font-size:12px;color:var(--f-muted)}
.fq2-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 10px;background:var(--ks,#eee);color:var(--k,#555);border:0;white-space:nowrap}
.fq2-tag svg{width:14px;height:14px}
.fq2-list{list-style:none;margin:0;padding:0}
.fq2-list li+li{border-top:1px solid #f2ede6}
.fq2-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;border:0;background:none;text-align:right;color:var(--f-ink)}
.fq2-row:hover{background:#fcfaf6}
.fq2-row-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ks);color:var(--k);flex:none}
.fq2-row-ic svg{width:19px;height:19px}
.fq2-row>span:nth-child(2){flex:1;min-width:0}
.fq2-row b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq2-row small{display:block;font-size:12px;color:var(--f-muted)}
.fq2-mono{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;font-weight:900;font-size:17px;flex:none;background:var(--k)}
.fq2-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px;color:var(--f-muted);text-align:center;font-size:13px;font-weight:700}
.fq2-empty span{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--ks,#f3efe8);color:var(--k,#9a8f80)}
.fq2-empty span svg{width:26px;height:26px}
.fq2-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fq2-svc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--f-line);box-shadow:var(--f-shadow);color:var(--f-ink);text-align:right;transition:transform .15s,box-shadow .15s,border-color .15s}
.fq2-svc:hover{transform:translateY(-3px);box-shadow:var(--f-shadow-h);border-color:color-mix(in srgb,var(--k) 40%,var(--f-line))}
.fq2-svc span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ks);color:var(--k)}
.fq2-svc b{font-size:13.5px;font-weight:900}
.fq2-svc small{font-size:11.5px;color:var(--f-muted);font-weight:700;margin-top:-6px}
.fq2-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fq2-act{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--f-line);background:#fff;font-weight:800;font-size:13px;color:var(--f-ink)}
.fq2-act span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ks);color:var(--k)}
.fq2-act:hover{border-color:var(--k);background:var(--ks)}
.fq2-points{display:flex;align-items:center;gap:16px}
.fq2-points b{font-size:30px;font-weight:900;color:var(--f-gold)}
.fq2-section-title{display:flex;align-items:center;gap:10px;margin:4px 0 -6px;font-size:16px;font-weight:900;color:var(--f-ink)}
.fq2-section-title svg{color:var(--f-brand)}
.fq2-dash :focus-visible{outline:3px solid var(--f-brand);outline-offset:2px}
@media(max-width:1200px){.fq2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fq2-cols{grid-template-columns:1fr}}
@media(max-width:700px){body.fq2 #mainContent{padding:14px 12px 30px!important}.fq2-banner{grid-template-columns:1fr;padding:22px 18px;border-radius:20px}.fq2-banner::after{left:auto;right:-30px;top:30px;transform:none;width:140px;height:140px}.fq2-banner h1{font-size:23px}.fq2-date{display:flex;align-items:center;gap:10px;justify-content:center;min-width:0}.fq2-date strong{font-size:28px}
  .fq2-kpis{grid-template-columns:1fr 1fr;gap:10px}.fq2-services{grid-template-columns:1fr 1fr}.fq2-kpi{padding:14px}.fq2-kpi-num b{font-size:26px}.fq2-kpi-line{white-space:normal}.fq2-actions{grid-template-columns:1fr 1fr}
  body.fq2 #mainContent .fq2-hero{padding:18px!important;flex-wrap:wrap}body.fq2 #mainContent .fq2-hero h1{font-size:20px!important}body.fq2 #mainContent .fq2-hero-ic{width:46px;height:46px}
  body.fq2 #mainContent :is(.hx-summary,.ts-summary,.gd-stat-grid,.qb2-stats){grid-template-columns:1fr 1fr!important}}
@media(max-width:420px){.fq2-kpis{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fq2-kpi,.fq2-svc,body.fq2 #mainContent :is(.fq-record,.gb-card,.at-cls,.ts-card,.st-sub){transition:none}}

/* admin dashboard & academic years */
.fq2-table-wrap{overflow:auto;margin:-4px -6px}
.fq2-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;box-shadow:none!important;border:0!important}
.fq2-table th{background:#faf7f2;color:#5b6772;font-weight:800;padding:10px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--f-line)}
.fq2-table td{padding:11px 12px;border-bottom:1px solid #f2ede6;font-weight:700;color:var(--f-ink)}
.fq2-table td small{display:block;font-size:11px;color:var(--f-muted);font-weight:600}
.fq2-steps .fq2-row{padding:12px 2px}
.fq2-steps .fq2-row small{white-space:normal}
.fq2-yr-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.fq2-yr-form label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:13px;color:var(--f-ink);min-width:200px;flex:1}
.fq2-yr-form :is(select,input){min-height:46px;padding:8px 12px;border-radius:12px;border:1px solid #ddd5ca;font:inherit;background:#fff}
.fq2-yr-form .hx-btn{min-height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 18px}
body.fq2 #mainContent .fq2-years{gap:18px}

/* permissions matrix */
body.fq2 #mainContent .ln-note{background:#fff;border:1px solid var(--f-line);border-inline-start:4px solid var(--f-brand);border-radius:14px;padding:12px 16px;line-height:1.9;color:#43515d;font-weight:700}
.fq-perm-legend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.fq-perm-wrap{overflow:auto;border-radius:16px}
body.fq2 #mainContent .fq-perm-table{min-width:980px;width:100%;font-size:12.5px}
body.fq2 #mainContent .fq-perm-table thead th{text-align:center;white-space:nowrap;position:sticky;top:0}
body.fq2 #mainContent .fq-perm-table thead th small{display:block;font-size:10.5px;color:var(--f-muted);font-weight:700}
body.fq2 #mainContent .fq-perm-table tbody th{text-align:right;background:#fff!important;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f0ebe3}
body.fq2 #mainContent .fq-perm-table tbody th svg{width:17px;height:17px;color:var(--f-brand)}
body.fq2 #mainContent .fq-perm-table td{text-align:center}
.fq-perm{display:inline-block;min-width:74px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.fq-perm-full{background:#e9f5eb;color:#2f8a3e}.fq-perm-school{background:#f3ecf8;color:#8e65ab}.fq-perm-class{background:#e6f4f1;color:#0e7c6f}.fq-perm-own{background:#fbf3e1;color:#9a6b12}.fq-perm-approve{background:#ecedfb;color:#4b4fb8}.fq-perm-read{background:#f2efe9;color:#6b6257}.fq-perm-none{color:#c5bcae;min-width:0}