* { box-sizing: border-box; margin: 0; padding: 0 }
:root {
  /* Core */
  --z950: #09090B; --z900: #18181B; --z800: #27272A; --z700: #3F3F46; --z600: #52525B; --z400: #A1A1AA; --z300: #D4D4D8; --z100: #F4F4F5;
  --white: #FFFFFF; --black: #000000;
  /* Brand */
  --gold: #F59E0B; --gold-l: #FCD34D; --gold-d: #B45309; --gold-bg: rgba(245,158,11,.1);
  /* Semantic */
  --g: #10B981; --g-bg: rgba(16,185,129,.12); --g-t: #34D399;
  --r: #F87171; --r-bg: rgba(248,113,113,.12); --r-d: #EF4444;
  --b: #60A5FA; --b-bg: rgba(96,165,250,.12);
  --v: #A78BFA; --v-bg: rgba(167,139,250,.12);
  /* Sidebar */
  --sb: 260px;
  
  /* Task Dashboard New Colors */
  --bg2: #13161e;
  --bg3: #1a1d28;
  --surface: #1e2230;
  --surface2: #252a3a;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --text: #e8eaf0;
  --text2: #8b92a8;
  --text3: #5a6278;
  --accent: #4f7cff;
  --accent-glow: rgba(79,124,255,0.18);
  --urgent: #ff4757;
  --urgent-light: rgba(255,71,87,0.12);
  --urgent-mid: rgba(255,71,87,0.25);
  --urgent-glow: rgba(255,71,87,0.08);
  --normal: #00c9a7;
  --normal-light: rgba(0,201,167,0.1);
  --normal-mid: rgba(0,201,167,0.22);
  --normal-glow: rgba(0,201,167,0.06);
  --waiting: #f0a500;
  --waiting-light: rgba(240,165,0,0.12);
  --pending: #a78bfa;
  --pending-light: rgba(167,139,250,0.1);
  --pending-mid: rgba(167,139,250,0.22);
  --pending-glow: rgba(167,139,250,0.07);
  --pending-border: rgba(167,139,250,0.28);
}
body { font-family: 'Tajawal', sans-serif; background: var(--z950); color: var(--white); min-height: 100vh; direction: rtl; -webkit-font-smoothing: antialiased }
.hide { display: none !important }
::selection { background: rgba(245,158,11,.25) }
::-webkit-scrollbar { width: 3px; height: 3px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--z700); border-radius: 10px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE OVERRIDES
━━━━━━━━━━━━━━━━━━━━━━━━ */
html[data-theme="light"] {
  --z950: #F0F2F7; --z900: #FFFFFF; --z800: #F4F5FA; --z700: #E2E5EF;
  --z600: #8A93AE; --z400: #4A5268; --z300: #1E2740; --z100: #0A0E1A;
  --white: #0A0E1A;
  --gold: #C07800; --gold-l: #A06200; --gold-d: #7A4C00; --gold-bg: rgba(192,120,0,.1);
  --g: #047857; --g-bg: rgba(4,120,87,.1); --g-t: #059669;
  --r: #DC2626; --r-bg: rgba(220,38,38,.08); --r-d: #DC2626;
  --b: #1D6CB4; --b-bg: rgba(29,108,180,.1);
  --v: #6D28D9; --v-bg: rgba(109,40,217,.1);

  /* Task Dashboard Light Theme Overrides */
  --bg2: #F0F2F7;
  --bg3: #E2E5EF;
  --surface: #FFFFFF;
  --surface2: #F4F5FA;
  --border: #E2E5EF;
  --border2: rgba(0,0,0,0.12);
  --text: #0A0E1A;
  --text2: #4A5268;
  --text3: #8A93AE;
  --urgent-light: rgba(220,38,38,0.08);
  --urgent-mid: rgba(220,38,38,0.2);
  --urgent-glow: rgba(220,38,38,0.05);
  --normal-light: rgba(5,150,105,0.08);
  --normal-mid: rgba(5,150,105,0.2);
  --normal-glow: rgba(5,150,105,0.05);
  --pending-light: rgba(109,40,217,0.08);
  --pending-mid: rgba(109,40,217,0.2);
  --pending-glow: rgba(109,40,217,0.05);
  --pending-border: rgba(109,40,217,0.25);
}
/* Login light */
html[data-theme="light"] #loginPage { background: linear-gradient(135deg,#EEF0F8 0%,#E4E8F4 100%) }
html[data-theme="light"] .lg-grid { background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) }
html[data-theme="light"] .lg-glow1 { background: radial-gradient(circle,rgba(192,120,0,.12) 0%,transparent 60%) }
html[data-theme="light"] .lg-glow2 { background: radial-gradient(circle,rgba(109,40,217,.08) 0%,transparent 60%) }
html[data-theme="light"] .lg-box { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 20px 60px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05) }
html[data-theme="light"] .lg-brand-ar { color: #0A0E1A }
html[data-theme="light"] .lg-brand-en { color: #8A93AE }
html[data-theme="light"] .lg-sep { background: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent) }
html[data-theme="light"] .lg-title { color: #0A0E1A }
html[data-theme="light"] .lg-sub { color: #6A738E }
html[data-theme="light"] .lg-label { color: #6A738E }
html[data-theme="light"] .lg-input { background: #F4F5FA; border-color: #DDE0EA; color: #0A0E1A }
html[data-theme="light"] .lg-input::placeholder { color: #B0B8CC }
html[data-theme="light"] .lg-ico { color: #B0B8CC }
html[data-theme="light"] .lg-input:focus { background: #fff; border-color: rgba(192,120,0,.5); box-shadow: 0 0 0 3px rgba(192,120,0,.1) }
html[data-theme="light"] .lg-hint { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07) }
html[data-theme="light"] .lg-hint strong { color: #0A0E1A }
/* Sidebar light */
html[data-theme="light"] .sidebar { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .sb-top { border-color: #E2E5EF }
html[data-theme="light"] .sb-bname { color: #0A0E1A }
html[data-theme="light"] .sb-bsub { color: #8A93AE }
html[data-theme="light"] .sb-user { background: #F4F5FA; border-color: #E2E5EF }
html[data-theme="light"] .sb-uname { color: #0A0E1A }
html[data-theme="light"] .sb-urole { color: #8A93AE }
html[data-theme="light"] .sb-group { color: #C0C6D8 }
html[data-theme="light"] .sb-item:hover { background: #F4F5FA }
html[data-theme="light"] .sb-item.on { background: rgba(192,120,0,.07); border-color: rgba(192,120,0,.15) }
html[data-theme="light"] .sb-item.on .sb-lbl { color: var(--gold-d) }
html[data-theme="light"] .sb-item.on .sb-iico { color: var(--gold) }
html[data-theme="light"] .sb-iico { color: #B0B8CC }
html[data-theme="light"] .sb-item:hover .sb-iico { color: #6A738E }
html[data-theme="light"] .sb-lbl { color: #6A738E }
html[data-theme="light"] .sb-item:hover .sb-lbl { color: #0A0E1A }
html[data-theme="light"] .sb-btm { border-color: #E2E5EF }
html[data-theme="light"] .sb-out-l { color: rgba(220,38,38,.45) }
html[data-theme="light"] .sb-out:hover { background: rgba(220,38,38,.06) }
/* Topbar light */
html[data-theme="light"] .topbar { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .tb-bc-a { color: #8A93AE }
html[data-theme="light"] .tb-bc-sep { color: #C0C6D8 }
html[data-theme="light"] .tb-bc-b { color: #0A0E1A }
html[data-theme="light"] .tb-ico-btn { background: #F4F5FA; border-color: #E2E5EF }
html[data-theme="light"] .tb-ico-btn:hover { background: #E2E5EF; border-color: #D0D4E2 }
/* Stat cards light */
html[data-theme="light"] .sc-amber { background: linear-gradient(135deg,#FFFBEB,#FFF7E0); border-color: rgba(192,120,0,.2) }
html[data-theme="light"] .sc-amber .sc-val { color: #92400E }
html[data-theme="light"] .sc-amber .sc-label { color: rgba(146,64,14,.65) }
html[data-theme="light"] .sc-green { background: linear-gradient(135deg,#ECFDF5,#D1FAE5); border-color: rgba(5,150,105,.2) }
html[data-theme="light"] .sc-green .sc-val { color: #065F46 }
html[data-theme="light"] .sc-green .sc-label { color: rgba(6,95,70,.65) }
html[data-theme="light"] .sc-blue { background: linear-gradient(135deg,#EFF6FF,#DBEAFE); border-color: rgba(29,108,180,.2) }
html[data-theme="light"] .sc-blue .sc-val { color: #1E40AF }
html[data-theme="light"] .sc-blue .sc-label { color: rgba(30,64,175,.65) }
html[data-theme="light"] .sc-purple { background: linear-gradient(135deg,#F5F3FF,#EDE9FE); border-color: rgba(109,40,217,.2) }
html[data-theme="light"] .sc-purple .sc-val { color: #4C1D95 }
html[data-theme="light"] .sc-purple .sc-label { color: rgba(76,29,149,.65) }
html[data-theme="light"] .sc-amber .sc-shine, html[data-theme="light"] .sc-green .sc-shine,
html[data-theme="light"] .sc-blue .sc-shine, html[data-theme="light"] .sc-purple .sc-shine { background: linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent) }
/* Panel light */
html[data-theme="light"] .panel { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .panel-hd { border-color: #E2E5EF }
html[data-theme="light"] .panel-ht { color: #0A0E1A }
html[data-theme="light"] .panel-ha { color: #8A93AE }
html[data-theme="light"] .panel-ha:hover { background: #F4F5FA; color: #0A0E1A }
html[data-theme="light"] .panel-empty .pe-ico { background: #F4F5FA }
html[data-theme="light"] .panel-empty .pe-t { color: #6A738E }
/* Tabs light */
html[data-theme="light"] .tabs { background: #F0F2F7; border-color: #DDE0EA }
html[data-theme="light"] .tab { color: #8A93AE }
html[data-theme="light"] .tab.on { background: #fff; color: #0A0E1A; box-shadow: 0 1px 4px rgba(0,0,0,.08) }
html[data-theme="light"] .tab:hover:not(.on) { color: #4A5268 }

/* Task cards light */
html[data-theme="light"] .pp-done { background: rgba(0,0,0,.05); color: #8A93AE }

/* Ach cards light */
html[data-theme="light"] .achievement-card { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .achievement-card:hover { border-color: #C8CCD8; box-shadow: 0 12px 32px rgba(0,0,0,.1) }
html[data-theme="light"] .ach-title { color: #0A0E1A }
html[data-theme="light"] .ach-desc { color: #6A738E }
html[data-theme="light"] .ach-items { border-color: #E2E5EF }
html[data-theme="light"] .ach-item { background: #F4F5FA }
html[data-theme="light"] .ach-item-name { color: #0A0E1A }
html[data-theme="light"] .ach-item-time { color: #8A93AE }
html[data-theme="light"] .ach-footer { background: rgba(0,0,0,.015); border-color: #E2E5EF }
html[data-theme="light"] .user-name { color: #0A0E1A }
html[data-theme="light"] .user-date { color: #8A93AE }

/* Team cards light */
html[data-theme="light"] .tm-card { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .tm-card:hover { border-color: #C8CCD8; box-shadow: 0 12px 32px rgba(0,0,0,.1) }
html[data-theme="light"] .tm-name { color: #0A0E1A }
html[data-theme="light"] .tm-un { color: #8A93AE }
html[data-theme="light"] .tm-stats { border-color: #E2E5EF }
html[data-theme="light"] .tm-s { border-color: #E2E5EF }
html[data-theme="light"] .tm-sv { color: #0A0E1A }
html[data-theme="light"] .tm-sl { color: #8A93AE }
html[data-theme="light"] .tm-add { background: #F4F5FA; border-color: #DDE0EA }
html[data-theme="light"] .tm-add:hover { background: #fff; border-color: #0A0E1A }
/* KPI cards light */
html[data-theme="light"] .kpi { background: linear-gradient(135deg,#1E2740,#2D3E5C) }
/* Settings light */
html[data-theme="light"] .stag { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .stag:hover { border-color: #C8CCD8 }
html[data-theme="light"] .acc-row { background: #F4F5FA; border-color: #E2E5EF }
html[data-theme="light"] .acc-row:hover { border-color: #C8CCD8 }
html[data-theme="light"] .acc-n { color: #0A0E1A }
html[data-theme="light"] .acc-r { color: #8A93AE }
/* Forms light */
html[data-theme="light"] .fi, html[data-theme="light"] .fs, html[data-theme="light"] .ft { background: #F4F5FA; border-color: #E2E5EF; color: #0A0E1A }
html[data-theme="light"] .fi::placeholder, html[data-theme="light"] .ft::placeholder { color: #B0B8CC }
html[data-theme="light"] .fi:focus, html[data-theme="light"] .ft:focus { background: #fff; border-color: rgba(192,120,0,.4); box-shadow: 0 0 0 3px rgba(192,120,0,.08) }
html[data-theme="light"] .fs option { background: #fff; color: #0A0E1A }
/* Buttons light */
html[data-theme="light"] .btn-ghost { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .btn-ghost:hover { background: #E2E5EF; color: #0A0E1A }
/* Modal light */
html[data-theme="light"] .mo-box { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .mo-hd { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .mo-t { color: #0A0E1A }
html[data-theme="light"] .mo-x { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .mo-x:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #DC2626 }
html[data-theme="light"] .br { background: #F9FAFB; border-color: #E2E5EF }

/* Dashboard mini items light */
html[data-theme="light"] .mi-item { border-color: #E2E5EF }
html[data-theme="light"] .mi-chk { border-color: #DDE0EA }
html[data-theme="light"] .mi-t { color: #0A0E1A }
html[data-theme="light"] .mi-m { color: #8A93AE }
/* Scrollbar light */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #DDE0EA }
/* Toast light */
html[data-theme="light"] .toast { background: #0A0E1A; border-color: rgba(0,0,0,.15) }
html[data-theme="light"] .toast.ok { background: #064E3B; border-color: rgba(5,150,105,.2) }
html[data-theme="light"] .toast.err { background: #7F1D1D; border-color: rgba(220,38,38,.2) }
/* ES light */
html[data-theme="light"] .es-ico { background: #F4F5FA }
html[data-theme="light"] .es-t { color: #4A5268 }
html[data-theme="light"] .es-s { color: #8A93AE }
/* Theme toggle button */
.theme-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--z800); border: 1px solid var(--z700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s; position: relative; overflow: hidden;
}
.theme-btn:hover { background: var(--z700); border-color: var(--z600) }
.theme-ico-moon, .theme-ico-sun {
  position: absolute; transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.theme-ico-sun { opacity: 0; transform: scale(.5) rotate(-90deg) }
html[data-theme="light"] .theme-ico-moon { opacity: 0; transform: scale(.5) rotate(90deg) }
html[data-theme="light"] .theme-ico-sun { opacity: 1; transform: scale(1) rotate(0deg) }
html[data-theme="light"] .theme-btn { background: #F4F5FA; border-color: #E2E5EF }
html[data-theme="light"] .theme-btn:hover { background: #E2E5EF }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   APP SHELL & SCREENS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.SCR { display: none !important; }
#LS.ON { display: flex !important; }
#AS.ON { display: flex !important; }
#AS { min-height: 100vh }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN PAGE
━━━━━━━━━━━━━━━━━━━━━━━━ */
#LS {
  min-height: 100vh; align-items: center; justify-content: center;
  background: var(--z950); position: relative; overflow: hidden;
}
.lg-noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAGec50QAAAIBJREFUeNpjYBgFo2AUjIJRMApGwSgYBaNgFIyCUUBPAIFy8eP//3/8/w8U+P/z/3+g2P+f//8DxYAK/v///z9Q8P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+gYHQAAMB1/wFR2aXWAAAAAElFTkSuQmCC");
  background-size: 100px; opacity: .06;
}
.lg-glow1 { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle,rgba(245,158,11,.07) 0%,transparent 60%); top: -200px; right: -200px; pointer-events: none }
.lg-glow2 { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,rgba(167,139,250,.05) 0%,transparent 60%); bottom: -200px; left: -200px; pointer-events: none }
.lg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 60px 60px }
.lg-box {
  position: relative; z-index: 10; width: 440px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px; padding: 48px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3),0 40px 80px rgba(0,0,0,.4);
}
.lg-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 36px; justify-content: center }
.lg-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg,var(--gold) 0%,#D97706 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(245,158,11,.35);
  flex-shrink: 0;
}
.lg-brand { text-align: right }
.lg-brand-ar { font-size: 18px; font-weight: 900; color: var(--white); letter-spacing: -.3px }
.lg-brand-en { font-size: 9px; font-weight: 600; color: var(--z400); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 1px }
.lg-sep { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); margin: 0 0 32px }
.lg-head { text-align: center; margin-bottom: 32px }
.lg-title { font-size: 24px; font-weight: 900; color: var(--white); letter-spacing: -.5px }
.lg-sub { font-size: 13px; color: var(--z400); margin-top: 6px; font-weight: 400; line-height: 1.6 }
.lg-label { font-size: 11.5px; font-weight: 700; color: var(--z400); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; display: block }
.lg-field { position: relative; margin-bottom: 16px }
.lg-input {
  width: 100%; height: 48px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 0 16px 0 46px;
  font-family: 'Tajawal', sans-serif; font-size: 15px; color: var(--white); outline: none;
  transition: all .2s;
}
.lg-input::placeholder { color: var(--z600) }
.lg-input:focus { background: rgba(255,255,255,.07); border-color: rgba(245,158,11,.4); box-shadow: 0 0 0 3px rgba(245,158,11,.1) }
.lg-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--z600) }
.lg-btn {
  width: 100%; height: 50px; margin-top: 8px; border: none; border-radius: 12px;
  background: linear-gradient(135deg,var(--gold) 0%,#D97706 100%);
  color: var(--z950); font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .22s; box-shadow: 0 4px 20px rgba(245,158,11,.4); letter-spacing: .2px;
}
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245,158,11,.5) }
.lg-btn:active { transform: translateY(0) }
.lg-hint { margin-top: 24px; padding: 13px; background: rgba(255,255,255,.03); border-radius: 10px; border: 1px solid rgba(255,255,255,.06); font-size: 12px; color: var(--z400); text-align: center; line-height: 1.7 }
.lg-hint strong { color: var(--z300); font-weight: 700 }
.lerr { display: none; align-items: center; gap: 4px; font-size: 11px; color: var(--r-d); margin-top: 4px }
.lerr.on { display: flex }
.lerr svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0 }
@media(max-width:480px) { .lg-box { width: 100%; border-radius: 0; min-height: 100vh; border: none; padding: 40px 24px } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
  width: var(--sb); background: var(--z900);
  border-left: 1px solid var(--z800);
  display: flex; flex-direction: column;
  position: fixed; top: 0; right: 0; height: 100vh;
  z-index: 200; transition: transform .3s cubic-bezier(.16,1,.3,1);
}
/* Logo strip */
.sb-top {
  padding: 20px 18px;
  border-bottom: 1px solid var(--z800);
}
.sb-brand { display: flex; align-items: center; gap: 12px }
.sb-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--gold),#D97706);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(245,158,11,.3);
}
.sb-bname { font-size: 13.5px; font-weight: 900; color: var(--white); letter-spacing: -.2px }
.sb-bsub { font-size: 9.5px; color: var(--z600); font-weight: 500; letter-spacing: .5px; margin-top: 1px }
/* User card */
.sb-user {
  margin: 12px 12px 4px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--z800); border: 1px solid var(--z700);
  display: flex; align-items: center; gap: 10px;
}
.sb-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--white);
  flex-shrink: 0;
}
.sb-uname { font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.2 }
.sb-urole { font-size: 10px; color: var(--z400); font-weight: 400 }
.sb-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--g-t);
  margin-right: auto; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(52,211,153,.2);
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(52,211,153,.2) } 50% { box-shadow: 0 0 0 5px rgba(52,211,153,.05) } }
/* Nav */
.sb-nav { flex: 1; padding: 8px 12px; overflow-y: auto }
.sb-group { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--z700); padding: 14px 6px 5px }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  cursor: pointer; transition: all .15s;
  margin-bottom: 1px; position: relative;
}
.sb-item:hover { background: var(--z800) }
.sb-item.ACT { background: var(--gold-bg); border: 1px solid rgba(245,158,11,.15) }
.sb-item.ACT .sb-lbl { color: var(--gold-l); font-weight: 700 }
.sb-item.ACT .sb-iico { color: var(--gold); opacity: 1 }
.sb-item.ACT::before {
  content: ''; position: absolute; right: -12px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 52%;
  background: var(--gold); border-radius: 2px 0 0 2px;
}
.sb-iico { width: 15px; height: 15px; flex-shrink: 0; color: var(--z600); opacity: 1; transition: all .15s }
.sb-item:hover .sb-iico { color: var(--z300) }
.sb-lbl { font-size: 13px; font-weight: 500; color: var(--z400); transition: color .15s }
.sb-item:hover .sb-lbl { color: var(--z100) }
.sb-ct {
  margin-right: auto; font-size: 9.5px; font-weight: 800;
  background: var(--r-d); color: var(--white);
  border-radius: 20px; padding: 2px 6px; min-width: 16px; text-align: center;
}
.sb-ct.zt { display: none }
/* Bottom */
.sb-btm { padding: 12px; border-top: 1px solid var(--z800) }
.sb-out {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; background: none; border: none; width: 100%; transition: all .15s;
}
.sb-out:hover { background: rgba(248,113,113,.08) }
.sb-out-l { font-size: 12.5px; font-weight: 600; color: rgba(248,113,113,.5) }
.sb-out:hover .sb-out-l { color: var(--r) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR
━━━━━━━━━━━━━━━━━━━━━━━━ */
.main { margin-right: var(--sb); flex: 1; display: flex; flex-direction: column; min-height: 100vh }
.topbar {
  height: 58px; background: var(--z900); border-bottom: 1px solid var(--z800);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 100;
}
.tb-l { display: flex; align-items: center; gap: 12px }
.tb-bc { display: flex; align-items: center; gap: 6px }
.tb-bc-a { font-size: 12.5px; color: var(--z600); font-weight: 500 }
.tb-bc-sep { font-size: 11px; color: var(--z700) }
.tb-bc-b { font-size: 13.5px; font-weight: 800; color: var(--white); letter-spacing: -.2px }
.tb-r { display: flex; align-items: center; gap: 8px }
.tb-ico-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--z800); border: 1px solid var(--z700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; position: relative;
}
.tb-ico-btn:hover { background: var(--z700); border-color: var(--z600) }
.tb-ndot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; background: var(--r); border-radius: 50%; border: 1.5px solid var(--z900) }
.tb-cta {
  height: 34px; padding: 0 14px; border: none; border-radius: 8px;
  background: var(--gold); color: var(--z950);
  font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all .15s;
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.tb-cta:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.4) }
.tb-cta:active { transform: scale(.97) }
.ham { display: none; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 7px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   PAGES
━━━━━━━━━━━━━━━━━━━━━━━━ */
.pg { display: none; padding: 28px; animation: pgIn .3s ease }
.pg.ACT { display: block }
@keyframes pgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
.pg-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 28px }
.pg-title { font-size: 22px; font-weight: 900; color: var(--white); letter-spacing: -.4px }
.pg-sub { font-size: 13px; color: var(--z400); margin-top: 4px; font-weight: 400 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   STAT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px }
.sc {
  border-radius: 16px; padding: 20px; position: relative; overflow: hidden; cursor: pointer;
  transition: transform .22s, box-shadow .22s; border: 1px solid transparent;
}
.sc:hover { transform: translateY(-3px) }
/* Card variants */
.sc-amber { background: linear-gradient(135deg,#1C1400 0%,#2A1E00 100%); border-color: rgba(245,158,11,.15); box-shadow: 0 0 0 1px rgba(245,158,11,.05),inset 0 1px 0 rgba(245,158,11,.08) }
.sc-amber:hover { box-shadow: 0 12px 32px rgba(245,158,11,.15) }
.sc-green { background: linear-gradient(135deg,#001A10 0%,#002516 100%); border-color: rgba(16,185,129,.15); box-shadow: 0 0 0 1px rgba(16,185,129,.05),inset 0 1px 0 rgba(16,185,129,.08) }
.sc-green:hover { box-shadow: 0 12px 32px rgba(16,185,129,.12) }
.sc-blue { background: linear-gradient(135deg,#000F1C 0%,#001529 100%); border-color: rgba(96,165,250,.15); box-shadow: 0 0 0 1px rgba(96,165,250,.05),inset 0 1px 0 rgba(96,165,250,.08) }
.sc-blue:hover { box-shadow: 0 12px 32px rgba(96,165,250,.12) }
.sc-purple { background: linear-gradient(135deg,#100A1C 0%,#180F2A 100%); border-color: rgba(167,139,250,.15); box-shadow: 0 0 0 1px rgba(167,139,250,.05),inset 0 1px 0 rgba(167,139,250,.08) }
.sc-purple:hover { box-shadow: 0 12px 32px rgba(167,139,250,.12) }
.sc-shine { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent) }
.sc-ico-wrap {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.sc-amber .sc-ico-wrap { background: var(--gold-bg) }
.sc-green .sc-ico-wrap { background: var(--g-bg) }
.sc-blue .sc-ico-wrap { background: var(--b-bg) }
.sc-purple .sc-ico-wrap { background: var(--v-bg) }
.sc-val { font-size: 32px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; position: relative; z-index: 1; margin-bottom: 6px }
.sc-amber .sc-val { color: var(--gold-l) }
.sc-green .sc-val { color: var(--g-t) }
.sc-blue .sc-val { color: var(--b) }
.sc-purple .sc-val { color: var(--v) }
.sc-label { font-size: 12px; font-weight: 600; color: var(--z500,var(--z600)); position: relative; z-index: 1 }
.sc-amber .sc-label { color: rgba(245,158,11,.6) }
.sc-green .sc-label { color: rgba(52,211,153,.6) }
.sc-blue .sc-label { color: rgba(96,165,250,.6) }
.sc-purple .sc-label { color: rgba(167,139,250,.6) }
.sc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 10px; position: relative; z-index: 1 }
.sc-amber .sc-badge { background: var(--gold-bg); color: var(--gold) }
.sc-green .sc-badge { background: var(--g-bg); color: var(--g-t) }
.sc-blue .sc-badge { background: var(--b-bg); color: var(--b) }
.sc-purple .sc-badge { background: var(--v-bg); color: var(--v) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   PANEL CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.panel { background: var(--z900); border: 1px solid var(--z800); border-radius: 16px; overflow: hidden }
.panel-hd { padding: 14px 18px; border-bottom: 1px solid var(--z800); display: flex; align-items: center; justify-content: space-between }
.panel-ht { font-size: 13.5px; font-weight: 800; color: var(--white); letter-spacing: -.2px }
.panel-ha { font-size: 12px; font-weight: 700; color: var(--z600); cursor: pointer; padding: 4px 10px; border-radius: 20px; transition: all .15s }
.panel-ha:hover { background: var(--z800); color: var(--z300) }
.panel-bd { padding: 18px }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.span2 { grid-column: span 2 }
.panel-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.pe-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--z800); display: flex; align-items: center; justify-content: center }
.pe-t { font-size: 13.5px; font-weight: 700; color: var(--z400) }
.pe-s { font-size: 12px; color: var(--z600) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TABS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.tabs { display: flex; gap: 2px; background: var(--z800); border: 1px solid var(--z700); border-radius: 10px; padding: 3px; width: fit-content; margin-bottom: 20px }
.tb { padding: 6px 14px; border-radius: 7px; border: none; background: none; font-family: 'Tajawal', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--z400); cursor: pointer; transition: all .15s; white-space: nowrap }
.tb.ACT { background: var(--z700); color: var(--white) }
.tb:hover:not(.ACT) { color: var(--z300) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   NEW TASK DASHBOARD STYLES
━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; margin-top: 2rem; }
.section-header h2 { font-size: 13px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; }
.section-header .line { flex: 1; height: 1px; background: var(--border); }
.section-header .count-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface2); color: var(--text2); }

.legend-bar { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.pending-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }

.task-card { background: var(--surface); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.task-card:hover { transform: translateY(-2px); }
.task-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; }

.card-urgent { border-color: var(--urgent-mid); background: linear-gradient(135deg, var(--surface) 60%, var(--urgent-glow)); }
.card-urgent::before { background: var(--urgent); }
.card-urgent:hover { border-color: var(--urgent); box-shadow: 0 8px 32px var(--urgent-glow), 0 0 0 1px var(--urgent-mid); }
.card-urgent .pulse-ring { position: absolute; top: 20px; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 0 var(--urgent); animation: pulse-urgent 2s infinite; }
@keyframes pulse-urgent { 0% { box-shadow: 0 0 0 0 rgba(255,71,87,0.5); } 70% { box-shadow: 0 0 0 10px rgba(255,71,87,0); } 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); } }

.card-normal { border-color: var(--normal-mid); background: linear-gradient(135deg, var(--surface) 60%, var(--normal-glow)); }
.card-normal::before { background: var(--normal); }
.card-normal:hover { border-color: var(--normal); box-shadow: 0 8px 32px var(--normal-glow), 0 0 0 1px var(--normal-mid); }

.card-inner { padding: 1.25rem 1.25rem 1.25rem 1.5rem; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.card-kind { display: flex; align-items: center; gap: 8px; }
.kind-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.kind-icon.urgent { background: var(--urgent-light); }
.kind-icon.normal { background: var(--normal-light); }
.kind-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.kind-label.urgent { color: var(--urgent); }
.kind-label.normal { color: var(--normal); }

.card-badge { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid; }
.badge-waiting { background: var(--waiting-light); color: var(--waiting); border-color: rgba(240,165,0,0.3); }
.badge-active { background: var(--normal-light); color: var(--normal); border-color: rgba(0,201,167,0.3); }
.badge-done { background: var(--border); color: var(--text3); border-color: var(--border2); }
.badge-rejected { background: var(--urgent-light); color: var(--urgent); border-color: rgba(255,71,87,0.3); }

.card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 1rem; }
.done-card .card-title { text-decoration: line-through; color: var(--text3); }

.card-fields { display: flex; flex-direction: column; gap: 0; }
.field-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.field-row:last-child { border-bottom: none; padding-bottom: 0; }
.field-key { color: var(--text3); }
.field-val { color: var(--text2); font-weight: 500; }

.card-footer { display: flex; align-items: center; gap: 8px; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg2); }
.task-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.task-avatar.urgent { background: var(--urgent-light); color: var(--urgent); }
.task-avatar.normal { background: var(--normal-light); color: var(--normal); }
.avatar-name { font-size: 12.5px; font-weight: 500; color: var(--text2); }
.footer-meta { margin-right: auto; font-size: 11px; color: var(--text3); }

/* Pending Cards */
.pending-card { position: relative; border-radius: 14px; border: 1px dashed var(--pending-border); background: linear-gradient(145deg, var(--bg2) 0%, var(--bg3) 100%); overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.pending-card:hover { transform: translateY(-2px); border-color: var(--pending); box-shadow: 0 6px 28px var(--pending-glow); }
.pending-card::after { content: ''; position: absolute; top: -60%; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(167,139,250,0.04), transparent); animation: scan 3s linear infinite; pointer-events: none; }
@keyframes scan { 0% { top: -60%; } 100% { top: 120%; } }
.pending-card-top { padding: 1rem 1.1rem 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.pending-tag { display: flex; align-items: center; gap: 7px; }
.pending-icon-wrap { width: 28px; height: 28px; border-radius: 7px; background: var(--pending-light); border: 1px solid var(--pending-border); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.pending-tag-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--pending); text-transform: uppercase; }
.badge-pending { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--pending-light); color: var(--pending); border: 1px solid var(--pending-border); animation: blink-border 2.5s ease-in-out infinite; }
@keyframes blink-border { 0%, 100% { border-color: var(--pending-border); } 50% { border-color: var(--pending); } }
.pending-card-body { padding: 0 1.1rem 0.85rem; }
.pending-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 0.7rem; }
.pending-fields { display: flex; flex-direction: column; }
.pending-field { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 11.5px; }
.pending-field:last-child { border-bottom: none; }
.pending-field .fk { color: var(--text3); }
.pending-field .fv { color: var(--text2); font-weight: 500; }
.pending-card-footer { padding: 0.7rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.04); background: rgba(0,0,0,0.2); display: flex; align-items: center; gap: 8px; }
.avatar-pending { width: 22px; height: 22px; border-radius: 50%; background: var(--pending-light); color: var(--pending); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pending-border); flex-shrink: 0; }
.pending-footer-name { font-size: 11.5px; color: var(--text2); font-weight: 500; }
.pending-footer-wait { margin-right: auto; font-size: 10.5px; color: var(--pending); display: flex; align-items: center; gap: 5px; }
.wait-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pending); animation: pulse-pend 1.6s ease-in-out infinite; }
@keyframes pulse-pend { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.pending-timer { display: flex; align-items: center; gap: 6px; margin: 0.5rem 1.1rem 0.85rem; background: rgba(167,139,250,0.06); border: 1px solid var(--pending-border); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--pending); }
.pending-timer span { color: var(--text2); }

/* Detail Wrapper (Modal) */
.detail-wrapper { background: var(--surface); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; animation: fadeUp 0.45s 0.15s ease both; width: 100%; }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.detail-top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
.detail-top-right { display: flex; align-items: center; gap: 12px; }
.detail-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--urgent-light); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.detail-title { font-size: 16px; font-weight: 600; color: var(--text); }
.detail-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.detail-cells { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.detail-cell { padding: 1.1rem 1.5rem; border-left: 1px solid var(--border); position: relative; }
.detail-cell:last-child { border-left: none; }
.detail-cell-label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.detail-cell-val { font-size: 13.5px; font-weight: 600; color: var(--text); }
.detail-cell-val.mono { font-size: 12px; letter-spacing: 0.03em; color: var(--text2); direction: ltr; display: inline-block; }
.duration-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--waiting-light); color: var(--waiting); border: 1px solid rgba(240,165,0,0.25); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.detail-bottom { display: grid; grid-template-columns: 1fr 300px; }
.detail-note-col { padding: 1.25rem 1.5rem; border-left: 1px solid var(--border); }
.detail-note-col label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 8px; }
.note-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text2); min-height: 52px; }
.reject-label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-top: 12px; margin-bottom: 6px; }
.reject-box { background: var(--urgent-light); border: 1px dashed rgba(255,71,87,0.3); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--urgent); min-height: 38px; }
.detail-assignee-col { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 16px; }
.assignee-block label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 8px; }
.assignee-row { display: flex; align-items: center; gap: 10px; }
.avatar-lg { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avatar-lg.urgent { background: var(--urgent-light); color: var(--urgent); border: 1px solid rgba(255,71,87,0.3); }
.avatar-lg.normal { background: var(--normal-light); color: var(--normal); border: 1px solid rgba(0,201,167,0.3); }
.assignee-name { font-size: 14px; font-weight: 600; color: var(--text); }
.assignee-role { font-size: 11px; color: var(--text3); margin-top: 1px; }
.detail-actions { display: flex; align-items: center; gap: 8px; padding: 1rem 1.5rem; background: var(--bg2); border-top: 1px solid var(--border); flex-wrap: wrap; }
.btn-approve { background: var(--normal-light); color: var(--normal); border-color: rgba(0,201,167,0.35); } .btn-approve:hover { background: rgba(0,201,167,0.2); }
.btn-redo { background: var(--waiting-light); color: var(--waiting); border-color: rgba(240,165,0,0.35); } .btn-redo:hover { background: rgba(240,165,0,0.2); }
.btn-delete { background: var(--urgent-light); color: var(--urgent); border-color: rgba(255,71,87,0.35); } .btn-delete:hover { background: rgba(255,71,87,0.2); }
.btn-close { background: var(--surface2); color: var(--text2); border-color: var(--border2); margin-right: auto; } .btn-close:hover { background: var(--surface); color: var(--text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ACHIEVEMENT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.achievement-card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; overflow: hidden; margin-bottom: 14px; transition: all .22s cubic-bezier(.16,1,.3,1); }
.achievement-card:hover { border-color: var(--z700); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.ach-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; cursor: pointer; }
.ach-left { flex: 1; }
.ach-title { font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 5px; color: var(--white); }
.ach-desc { font-size: 13px; color: var(--z400); line-height: 1.55; }
.ach-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-right: 16px; }

.ach-items { padding: 0 20px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--z800); padding-top: 14px; padding-bottom: 14px; cursor: pointer; }
.ach-item { display: flex; align-items: center; gap: 10px; background: var(--z800); border-radius: 8px; padding: 10px 14px; }
.ach-item-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ach-item-icon.green { background: var(--g-bg); color: var(--g-t); }
.ach-item-icon.purple { background: var(--v-bg); color: var(--v); }
.ach-item-icon.blue { background: var(--b-bg); color: var(--b); }
.ach-item-icon.amber { background: var(--gold-bg); color: var(--gold); }
.ach-item-text { flex: 1; }
.ach-item-name { font-size: 13px; font-weight: 500; color: var(--white); }
.ach-item-time { font-size: 11px; color: var(--z400); margin-top: 1px; }

.ach-item-chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; letter-spacing: .2px; }
.chip-green { background: var(--g-bg); color: var(--g-t); border: 1px solid rgba(16,185,129,.25); }
.chip-purple { background: var(--v-bg); color: var(--v); border: 1px solid rgba(167,139,250,.25); }
.chip-amber { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(245,158,11,.25); }
.chip-blue { background: var(--b-bg); color: var(--b); border: 1px solid rgba(96,165,250,.25); }
.chip-red { background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.25); }

.ach-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--z800); background: rgba(255,255,255,.01); flex-wrap: wrap; gap: 7px; }
.user-row { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--white); flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--white); }
.user-date { font-size: 11px; color: var(--z400); }
.footer-actions { display: flex; gap: 8px; align-items: center; }

/* abtn old support */
.abtn { height: 26px; padding: 0 9px; border-radius: 7px; font-family: 'Tajawal', sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; border: 1px solid; transition: all .15s }
.abtn.apv { background: var(--g-bg); color: var(--g-t); border-color: rgba(16,185,129,.2) } .abtn.apv:hover { background: rgba(16,185,129,.2) }
.abtn.rjt { background: var(--r-bg); color: var(--r); border-color: rgba(248,113,113,.2) } .abtn.rjt:hover { background: rgba(248,113,113,.2) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TEAM
━━━━━━━━━━━━━━━━━━━━━━━━ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px }
.tm-card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 22px; text-align: center; transition: all .22s }
.tm-card:hover { border-color: var(--z700); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4) }
.tm-av { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--white); box-shadow: 0 4px 14px rgba(0,0,0,.4) }
.tm-name { font-size: 14px; font-weight: 800; color: var(--white) }
.tm-un { font-size: 11.5px; color: var(--z400); margin-top: 3px }
.tm-badge { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; margin-top: 7px; letter-spacing: .3px }
.tm-sup { background: var(--gold-bg); color: var(--gold) }
.tm-emp { background: var(--b-bg); color: var(--b) }
.tm-stats { display: flex; margin-top: 16px; border-top: 1px solid var(--z800); padding-top: 14px }
.tm-sv { font-size: 17px; font-weight: 900; color: var(--white) }
.tm-sl { font-size: 9.5px; color: var(--z600); margin-top: 2px; font-weight: 500 }
.tm-s { flex: 1; text-align: center } .tm-s + .tm-s { border-right: 1px solid var(--z800) }
.tm-del { margin-top: 12px; width: 100%; height: 32px; border-radius: 8px; background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.15); font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s }
.tm-del:hover { background: rgba(248,113,113,.2) }
.tm-add { background: transparent; border: 1px dashed var(--z700); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .22s; min-height: 200px; gap: 9px }
.tm-add:hover { background: var(--z900); border-color: var(--z600) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   STATS KPI
━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px }
.kpi { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 18px; position: relative; overflow: hidden }
.kpi::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent) }
.kpi-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--gold-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 14px }
.kpi-val { font-size: 30px; font-weight: 900; color: var(--gold-l); letter-spacing: -1px; line-height: 1 }
.kpi-lbl { font-size: 11.5px; color: var(--z400); margin-top: 5px; font-weight: 500 }
.kpi-trend { font-size: 11px; font-weight: 700; color: rgba(245,158,11,.5); margin-top: 6px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   RATING BARS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.rb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.rb-lbl { font-size: 12px; color: var(--z400); width: 85px; text-align: right; flex-shrink: 0; font-weight: 600 }
.rb-track { flex: 1; height: 6px; background: var(--z800); border-radius: 4px; overflow: hidden }
.rb-fill { height: 100%; border-radius: 4px; background: var(--gold); transition: width .8s cubic-bezier(.16,1,.3,1) }
.rb-num { font-size: 12px; font-weight: 800; color: var(--z300); width: 20px; text-align: left; flex-shrink: 0 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   SETTINGS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px }
.stag { display: flex; align-items: center; gap: 6px; background: var(--z800); border: 1px solid var(--z700); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; color: var(--z300); font-weight: 600; transition: all .15s }
.stag:hover { border-color: var(--z600) }
.stag-x { cursor: pointer; color: var(--z600); display: flex; transition: color .13s; background: none; border: none; padding: 0 }
.stag-x:hover { color: var(--r) }
.acc-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 8px; background: var(--z800); border: 1px solid var(--z700); margin-bottom: 7px; transition: all .15s }
.acc-row:hover { border-color: var(--z600) }
.acc-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: var(--white); flex-shrink: 0 }
.acc-n { font-size: 13px; font-weight: 700; color: var(--white) }
.acc-r { font-size: 11px; color: var(--z500,var(--z600)) }
.acc-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; margin-right: auto }
.acc-sp { background: var(--gold-bg); color: var(--gold) }
.acc-em { background: var(--b-bg); color: var(--b) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px }
.fg { margin-bottom: 12px }
.fl { font-size: 11.5px; font-weight: 700; color: var(--z400); letter-spacing: .3px; margin-bottom: 7px; display: block; text-transform: uppercase }
.fi { width: 100%; height: 42px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 0 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: all .15s }
.fs { width: 100%; height: 42px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 0 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; cursor: pointer }
.ft { width: 100%; min-height: 80px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 9px 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; resize: vertical; transition: all .15s }
.fi::placeholder, .ft::placeholder { color: var(--z600) }
.fi:focus, .ft:focus { border-color: rgba(245,158,11,.4); box-shadow: 0 0 0 3px rgba(245,158,11,.08) }
.fs option { background: var(--z900); color: var(--white) }

/* تحسين عدادات التقييم الرقمية من 10 */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
#achRate, #manuR { font-size: 16px; font-weight: 800; color: var(--gold-l); text-align: center; border-color: rgba(245,158,11,.4); background: rgba(0,0,0,.15); }
#achRate:focus, #manuR:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); background: var(--z900); }
html[data-theme="light"] #achRate, html[data-theme="light"] #manuR { color: var(--gold-d); border-color: rgba(192,120,0,.3); background: rgba(255,255,255,.6); }
html[data-theme="light"] #achRate:focus, html[data-theme="light"] #manuR:focus { border-color: var(--gold); background: var(--white); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.add-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--gold); color: var(--z950); border: none; border-radius: 8px; font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 900; cursor: pointer; transition: all .15s; box-shadow: 0 2px 8px rgba(245,158,11,.25) }
.add-btn:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.35) }
.add-btn:active { transform: scale(.97) }
.add-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3 }

.btn { height: 38px; padding: 0 16px; border: none; border-radius: 8px; font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .15s }
.btn-p { background: var(--gold); color: var(--z950); box-shadow: 0 2px 8px rgba(245,158,11,.25) } .btn-p:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.35) }
.btn-g { background: var(--g-bg); color: var(--g-t); border: 1px solid rgba(16,185,129,.2) } .btn-g:hover { background: rgba(16,185,129,.2) }
.btn-d { background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.2) } .btn-d:hover { background: rgba(248,113,113,.2) }
.btn-ghost { background: var(--z800); border: 1px solid var(--z700); color: var(--z300) } .btn-ghost:hover { background: var(--z700); color: var(--white) }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL
━━━━━━━━━━━━━━━━━━━━━━━━ */
.mo-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); animation: bgi .2s ease }
.mo-bg.ON { display: flex }
@keyframes bgi { from { opacity: 0 } to { opacity: 1 } }
.mo-box { background: var(--z900); border: 1px solid var(--z700); border-radius: 18px; width: 100%; max-width: 460px; max-height: 90vh; overflow: hidden; margin: 0 16px; animation: mdi .28s cubic-bezier(.16,1,.3,1); box-shadow: 0 40px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; }
@keyframes mdi { from { opacity: 0; transform: scale(.95) translateY(12px) } to { opacity: 1; transform: scale(1) translateY(0) } }
.mo-hd { padding: 18px 20px 14px; border-bottom: 1px solid var(--z800); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--z900); z-index: 10; }
.mo-t { font-size: 15.5px; font-weight: 900; color: var(--white); letter-spacing: -.3px; line-height: 1.4 }
.mo-s { font-size: 11.5px; color: var(--z400); margin-top: 4px }
.mo-x { width: 28px; height: 28px; border-radius: 50%; background: var(--z800); border: 1px solid var(--z700); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; color: var(--white); flex-shrink: 0; margin-top: 2px }
.mo-x:hover { background: var(--r-bg); border-color: rgba(248,113,113,.2); color: var(--r) }
.mo-x svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5 }
.m-bd { padding: 20px; flex: 1; overflow-y: auto; }
.ds { padding: 12px 0; border-bottom: 1px solid var(--z800) }
.ds:last-child { border: none; padding-bottom: 0 }
.ds-l { font-size: 11px; font-weight: 800; color: var(--z600); letter-spacing: .5px; margin-bottom: 6px }
.ds-v { font-size: 13.5px; line-height: 1.6; color: var(--z300) }
.br { padding: 16px 20px; border-top: 1px solid var(--z800); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: var(--z900); z-index: 10; }

/* Dashboard mini items */
.mi-item { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--z800) }
.mi-item:last-child { border-bottom: none }
.mi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px }
.mi-chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--z700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all .15s }
.mi-chk.done { background: var(--g); border-color: var(--g) }
.mi-info { flex: 1; min-width: 0 }
.mi-t { font-size: 13px; font-weight: 700; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mi-m { font-size: 11px; color: var(--z600); margin-top: 2px }

/* SESSION BUILDER MODALS OVERRIDES */
.ach-session { background: var(--z800); border-radius: 14px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--z700) }
.ach-sess-hd { font-size: 12px; font-weight: 700; color: var(--z300); margin-bottom: 12px; display: flex; align-items: center; gap: 6px }
.ach-sess-hd span { background: var(--gold); color: var(--z950); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900 }
.add-ach-entry { width: 100%; padding: 10px; border: 1px dashed var(--z600); border-radius: 8px; background: none; cursor: pointer; color: var(--z300); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; margin-top: 6px; font-family: 'Tajawal', sans-serif }
.add-ach-entry:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg) }
.entry-del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(248,113,113,.2); background: var(--r-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--r); margin-right: auto }
.entry-del svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5 }
.dz { border: 1px dashed var(--z600); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer; transition: all .2s; color: var(--z400); font-size: 12.5px; background: var(--z900) }
.dz:hover { border-color: var(--gold); background: var(--gold-bg); color: var(--gold) }
.dz svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; margin: 0 auto 5px; display: block }
.dur-live { background: var(--g-bg); border: 1px solid rgba(16,185,129,.2); border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--g-t); display: none; align-items: center; gap: 3px; margin-bottom: 9px }
.dur-live svg { width: 11px; height: 11px; stroke: var(--g-t); fill: none; stroke-width: 2 }
.si { display: flex; gap: 4px; direction: ltr }
.si span { font-size: 24px; cursor: pointer; transition: transform .1s; color: var(--z700); line-height: 1; user-select: none }
.si span.on { color: var(--gold); transform: scale(1.12) }

/* Toast */
#toast { position: fixed; bottom: 20px; left: 20px; z-index: 700; display: flex; flex-direction: column; gap: 7px; pointer-events: none }
.tst {
  background: var(--z800); color: var(--white); padding: 11px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); min-width: 190px; pointer-events: auto;
  animation: ti .25s cubic-bezier(.16,1,.3,1);
  border: 1px solid var(--z700);
}
@keyframes ti { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* Empty state */
.empty { padding: 56px 20px; text-align: center; color: var(--z400) }
.empty svg { width: 48px; height: 48px; stroke: var(--z600); fill: none; stroke-width: 1.5; margin: 0 auto 12px; display: block; opacity: 1; background: var(--z800); border-radius: 50%; padding: 12px }
.empty p { font-size: 14px; font-weight: 800; color: var(--z400); margin: 0 }

/* Overlay */
.sb-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 190 }
.sb-ov.on { display: block }

/* Responsive */
@media(max-width:1280px) { .stats-grid,.kpi-row { grid-template-columns: repeat(2,1fr) } .items-grid, .pending-grid { grid-template-columns: repeat(2,1fr) } }
@media(max-width:900px) { :root { --sb: 240px } .g2,.frow { grid-template-columns: 1fr } .span2 { grid-column: auto } }
@media(max-width:768px) {
  .sidebar { transform: translateX(100%) } .sidebar.open { transform: translateX(0) } .sb-ov { display: block }
  .main { margin-right: 0 } .ham { display: flex } .stats-grid,.kpi-row { grid-template-columns: 1fr 1fr }
  .pg { padding: 14px } .topbar { padding: 0 14px } .pg-hd { flex-direction: column; align-items: flex-start }
  .items-grid, .pending-grid { grid-template-columns: repeat(2,1fr) }
  .bn-inner { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--z900); border-top: 1px solid var(--z800); z-index: 100; justify-content: space-around; padding: 5px 0 }
  .bn-i { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; cursor: pointer; border: none; background: none; color: var(--z500); font-size: 9.5px; font-weight: 600; position: relative; transition: color .15s; font-family: 'Tajawal', sans-serif }
  .bn-i.ACT { color: var(--gold) }
  .bn-i svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2 }
  .bn-pip { position: absolute; top: 4px; width: 6px; height: 6px; background: var(--r); border-radius: 50%; border: 2px solid var(--z900) }
}
@media(max-width:700px) {
  .detail-cells { grid-template-columns: 1fr 1fr; }
  .detail-cells .detail-cell:nth-child(2) { border-left: none; }
  .detail-bottom { grid-template-columns: 1fr; }
  .detail-assignee-col { border-top: 1px solid var(--border); }
}
@media(max-width:480px) { .stats-grid,.kpi-row,.items-grid,.pending-grid,.team-grid { grid-template-columns: 1fr } .frow { grid-template-columns: 1fr } }