:root{
  --ink:#0f172a;--ink-2:#334155;--muted:#64748b;--bg:#f4f7f9;--surface:#ffffff;
  --line:#e2e8f0;--line-2:#f1f5f9;
  --primary:#0e7490;--primary-2:#0891b2;--primary-3:#155e75;--primary-soft:#ecfeff;
  --coral:#f97362;--coral-2:#ef5d4d;--coral-soft:#fff1ee;--coral-dark:#c2410c;
  --gold:#f59e0b;--gold-soft:#fef3c7;
  --success:#10b981;--success-soft:#d1fae5;
  --warning:#f59e0b;--warning-soft:#fef3c7;
  --danger:#e11d48;--danger-soft:#ffe4e6;
  --info:#6366f1;--info-soft:#eef2ff;
  --bg-dark:#0a1628;--bg-dark-2:#0e1d33;--surface-dark:#142133;--surface-dark-2:#1a2942;
  --line-dark:rgba(255,255,255,.08);--line-dark-2:rgba(255,255,255,.14);
  --text-dark:#f1f5f9;--text-dark-2:#94a3b8;--text-dark-3:#64748b;
  --teal-glow:rgba(20,184,166,.28);--coral-glow:rgba(249,115,98,.28);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);--shadow:0 4px 18px rgba(15,23,42,.07);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;font-size:14px;line-height:1.55;font-feature-settings:"tnum"}
body[lang="en"]{font-family:'Inter','Segoe UI',system-ui,sans-serif}
.num{font-feature-settings:"tnum"}

/* === Layout === */
.app{display:grid;grid-template-areas:"topbar topbar" "sidebar main";grid-template-columns:240px 1fr;grid-template-rows:60px 1fr;min-height:100vh}
.topbar{grid-area:topbar;background:#fff;border-bottom:1px solid var(--line);padding:0 18px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:50}
.sidebar{grid-area:sidebar;background:#fff;border-inline-end:1px solid var(--line);padding:14px 0;overflow-y:auto;height:calc(100vh - 60px);position:sticky;top:60px}
.main{grid-area:main;padding:22px 26px 60px;overflow-y:auto;height:calc(100vh - 60px)}
@media(max-width:920px){.app{grid-template-columns:64px 1fr}.sidebar .nav-label{display:none}}

/* === Topbar === */
.brand{display:flex;align-items:center;gap:10px;padding-inline-end:14px;border-inline-end:1px solid var(--line);height:60px;width:226px;margin-inline-start:-18px;padding-inline-start:18px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:.5px}
.brand .name{font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.brand .name small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-top:1px}
.search{flex:1;max-width:340px;position:relative}
.search input{width:100%;padding:8px 38px 8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px;color:var(--ink);outline:none;font-family:inherit}
.search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search .bi{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.topbar .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.branch-switch{position:relative;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:13px;font-weight:600;min-width:160px}
.branch-switch:hover{border-color:var(--primary);color:var(--primary)}
.branch-switch .bi-chevron-down{font-size:12px;color:var(--muted)}
.branch-switch .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.alerts-bell{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg);cursor:pointer;border:1px solid var(--line);color:var(--ink-2)}
.alerts-bell:hover{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)}
.alerts-bell .badge{position:absolute;top:-3px;inset-inline-end:-3px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.lang-toggle{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.lang-toggle button{background:transparent;border:0;padding:5px 11px;border-radius:7px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.lang-toggle button.on{background:var(--ink);color:#fff}
.user-menu{display:flex;align-items:center;gap:9px;padding-inline-start:10px;border-inline-start:1px solid var(--line);height:38px}
.user-menu .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--coral),#fb923c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.user-menu .info{font-size:12px;line-height:1.2}
.user-menu .info b{display:block;font-weight:700}
.user-menu .info small{color:var(--muted);font-size:11px}

/* === Sidebar === */
.sidebar h6{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px 6px;margin:0}
.sidebar a{display:flex;align-items:center;gap:12px;padding:10px 16px;color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:600;border-inline-start:3px solid transparent;transition:all .15s;cursor:pointer}
.sidebar a:hover{background:var(--bg);color:var(--primary)}
.sidebar a.active{background:linear-gradient(90deg,var(--primary-soft),transparent);color:var(--primary);border-inline-start-color:var(--primary)}
.sidebar a .bi{font-size:17px;flex-shrink:0;width:20px;text-align:center}
.sidebar a .badge-mini{margin-inline-start:auto;background:var(--coral);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.sidebar a.active .bi{color:var(--primary)}
.sidebar .branch-tag{margin:14px 14px 0;padding:10px 12px;background:var(--bg);border-radius:var(--radius-sm);font-size:11.5px;color:var(--muted)}
.sidebar .branch-tag b{color:var(--ink);font-size:12.5px;display:block;margin-bottom:2px}

/* === Page header === */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em}
.page-head .subtitle{color:var(--muted);font-size:13px}
.page-head .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-primary{background:var(--primary);border:0;color:#fff;padding:9px 18px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(14,116,144,.18)}
.btn-primary:hover{background:var(--primary-2)}
.btn-coral{background:var(--coral);border:0;color:#fff;padding:9px 18px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(249,115,98,.18)}
.btn-coral:hover{background:var(--coral-2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2);padding:8px 14px;border-radius:10px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.select-mini{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;outline:none;min-width:130px}
.select-mini:focus{border-color:var(--primary)}

/* === Page show/hide === */
.page{display:none;animation:fadeIn .25s ease}
.page.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* === KPI tile (KpiTile.ascx pattern) === */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;transition:all .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi::before{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;background:var(--primary)}
.kpi.coral::before{background:var(--coral)}
.kpi.success::before{background:var(--success)}
.kpi.warning::before{background:var(--warning)}
.kpi.danger::before{background:var(--danger)}
.kpi .lab{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.kpi .lab .bi{font-size:13px}
.kpi .val{font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.kpi .val small{font-size:13px;color:var(--muted);font-weight:600;margin-inline-start:3px}
.kpi .delta{display:inline-flex;align-items:center;gap:3px;margin-top:6px;font-size:11.5px;padding:2px 8px;border-radius:20px;font-weight:700}
.kpi .delta.up{background:var(--success-soft);color:#047857}
.kpi .delta.down{background:var(--danger-soft);color:#be123c}
.kpi .delta.neutral{background:var(--bg);color:var(--muted)}
.kpi .health-bar{margin-top:8px;height:5px;background:var(--bg);border-radius:999px;overflow:hidden}
.kpi .health-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.kpi .health-bar.green span{background:linear-gradient(90deg,var(--success),#34d399)}
.kpi .health-bar.amber span{background:linear-gradient(90deg,var(--warning),#fbbf24)}
.kpi .health-bar.red span{background:linear-gradient(90deg,var(--danger),#fb7185)}

/* === Frame card (FrameCard.ascx) === */
.frame{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column}
.frame .ch{padding:13px 18px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:space-between;gap:8px}
.frame .ch.coral{background:linear-gradient(135deg,var(--coral),#fb7c5b)}
.frame .ch.gold{background:linear-gradient(135deg,var(--gold),#fbbf24)}
.frame .ch.indigo{background:linear-gradient(135deg,var(--info),#818cf8)}
.frame .ch.slate{background:linear-gradient(135deg,#475569,#64748b)}
.frame .ch.dark{background:linear-gradient(135deg,#0f172a,#334155)}
.frame .ch h6{margin:0;font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.frame .ch h6 .bi{font-size:15px}
.frame .ch .pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:10.5px;padding:2px 9px;border-radius:999px;font-weight:700;letter-spacing:.04em}
.frame .cb{padding:16px 18px;flex:1}

/* === Status pills === */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.4}
.pill .bi{font-size:11px}
.pill-success{background:var(--success-soft);color:#047857}
.pill-warning{background:var(--warning-soft);color:#92400e}
.pill-danger{background:var(--danger-soft);color:#be123c}
.pill-info{background:var(--info-soft);color:#3730a3}
.pill-coral{background:var(--coral-soft);color:#9a3412}
.pill-muted{background:var(--bg);color:var(--muted)}
.pill-primary{background:var(--primary-soft);color:#0e7490}

/* === Tables === */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:start;color:var(--muted);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:11px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}
.tbl tbody tr:hover td{background:var(--bg)}
.rank{width:26px;height:26px;border-radius:50%;background:var(--bg);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;border:1px solid var(--line)}
.rank.gold{background:linear-gradient(135deg,#fbbf24,#d97706);color:#1a1a1a;border:0}
.rank.silver{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#1a1a1a;border:0}
.rank.bronze{background:linear-gradient(135deg,#d97706,#92400e);color:#fff;border:0}

/* === Avatars === */
.avt{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase;font-family:inherit}
.avt.sm{width:28px;height:28px;font-size:11px}
.avt.lg{width:48px;height:48px;font-size:16px}
.avt.xl{width:64px;height:64px;font-size:22px}

/* === Risk row (3Way risk-row pattern) === */
.risk-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;background:#fff;transition:border-color .12s}
.risk-row:hover{border-color:var(--coral)}
.risk-row .name{font-weight:700;font-size:13px}
.risk-row .meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:5px}
.risk-row .reason-chip{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--coral-soft);color:#9a3412}
.risk-row .days-pill{background:var(--danger-soft);color:#be123c;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.risk-row .action{background:var(--coral);color:#fff;border:0;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.risk-row .action:hover{background:var(--coral-2)}

/* === CEO PAGE — DARK THEME === */
.page-ceo{background:radial-gradient(ellipse at top,var(--bg-dark-2) 0%,var(--bg-dark) 60%);color:var(--text-dark);margin:-22px -26px -60px;padding:22px 26px 60px;min-height:calc(100vh - 60px)}
.page-ceo h1{color:#fff}
.page-ceo .subtitle{color:var(--text-dark-2)}
.page-ceo .frame{background:var(--surface-dark);border-color:var(--line-dark);color:var(--text-dark)}
.page-ceo .frame .ch{background:linear-gradient(135deg,var(--surface-dark-2),var(--surface-dark))}
.page-ceo .frame .ch.coral{background:linear-gradient(135deg,#7c2d12,#9a3412)}
.page-ceo .frame .ch.gold{background:linear-gradient(135deg,#78350f,#92400e)}
.page-ceo .frame .ch.indigo{background:linear-gradient(135deg,#3730a3,#4f46e5)}
.page-ceo .kpi{background:var(--surface-dark);border-color:var(--line-dark);color:var(--text-dark)}
.page-ceo .kpi:hover{border-color:var(--line-dark-2)}
.page-ceo .kpi::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--teal-glow);filter:blur(30px);opacity:.7;pointer-events:none}
.page-ceo .kpi.coral::after{background:var(--coral-glow)}
.page-ceo .kpi.success::after{background:rgba(16,185,129,.22)}
.page-ceo .kpi.warning::after{background:rgba(245,158,11,.22)}
.page-ceo .kpi.danger::after{background:rgba(239,68,68,.22)}
.page-ceo .kpi .lab{color:var(--text-dark-2)}
.page-ceo .kpi .val{color:#fff;position:relative;z-index:1}
.page-ceo .kpi .health-bar{background:rgba(255,255,255,.08);position:relative;z-index:1}
.page-ceo .tbl th{color:var(--text-dark-3);border-bottom-color:var(--line-dark)}
.page-ceo .tbl td{color:var(--text-dark);border-bottom-color:var(--line-dark)}
.page-ceo .tbl tbody tr:hover td{background:rgba(255,255,255,.03)}
.page-ceo .risk-row{background:var(--surface-dark);border-color:var(--line-dark);color:var(--text-dark)}
.page-ceo .risk-row:hover{border-color:var(--coral)}
.page-ceo .risk-row .meta{color:var(--text-dark-2)}
.page-ceo .btn-ghost{background:var(--surface-dark);border-color:var(--line-dark);color:var(--text-dark-2)}
.page-ceo .btn-ghost:hover{color:#fff;border-color:var(--line-dark-2)}
.page-ceo .select-mini{background:var(--surface-dark);border-color:var(--line-dark);color:var(--text-dark)}
.page-ceo .pill-muted{background:rgba(255,255,255,.07);color:var(--text-dark-2)}

/* Executive Brief hero */
.exec-brief{background:linear-gradient(135deg,#0f172a 0%,#0e3a4f 50%,#155e75 100%);color:#fff;border-radius:var(--radius-lg);padding:22px 26px;position:relative;overflow:hidden;margin-bottom:18px;border:1px solid rgba(255,255,255,.06)}
.exec-brief::before{content:"";position:absolute;inset:auto -60px -60px auto;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--teal-glow),transparent 70%)}
.exec-brief::after{content:"";position:absolute;inset:-60px auto auto -60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--coral-glow),transparent 70%)}
.exec-brief .brief-label{position:relative;z-index:2;color:#5eead4;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.exec-brief h2{position:relative;z-index:2;font-weight:800;font-size:18px;margin:6px 0 10px;letter-spacing:-.01em;color:#fff}
.exec-brief .brief-text{position:relative;z-index:2;color:#cbd5e1;font-size:14px;line-height:1.85;max-width:920px}
.exec-brief .brief-text b{color:#fff;font-weight:700}
.exec-brief .brief-text .num-up{color:#5eead4}
.exec-brief .brief-text .num-down{color:#fda4af}
.exec-brief .brief-text .num-warn{color:#fcd34d}
.exec-brief .actions{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.exec-brief .action{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:11px 13px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:all .15s}
.exec-brief .action:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.exec-brief .action .num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#fbbf24;color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.exec-brief .action .text{font-size:12.5px;line-height:1.45;color:#e2e8f0}
.exec-brief .action .text b{color:#fff}
@media(max-width:920px){.exec-brief .actions{grid-template-columns:1fr}}

/* Heatmap */
.heat-grid{display:grid;grid-template-columns:140px repeat(7,1fr);gap:4px;font-size:11px}
.heat-grid .hh{font-size:10px;color:var(--text-dark-3);text-align:center;padding:5px 0;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.heat-grid .dd{font-size:11.5px;color:var(--text-dark);font-weight:700;padding:7px 10px;display:flex;align-items:center}
.heat-cell{aspect-ratio:1.5/1;border-radius:6px;background:rgba(255,255,255,.04);position:relative;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff;cursor:pointer;border:1px solid transparent;transition:transform .15s}
.heat-cell:hover{transform:scale(1.06);border-color:rgba(255,255,255,.25)}
.heat-cell.empty{background:rgba(255,255,255,.03);color:var(--text-dark-3)}

/* Goal cards / What-If */
.goal-card{background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.goal-card .gtitle{font-size:11.5px;color:var(--text-dark-2);font-weight:600}
.goal-card .gval{font-weight:800;font-size:15px;color:#fff;display:flex;align-items:baseline;gap:6px}
.goal-card .gval small{font-size:11.5px;color:var(--text-dark-2);font-weight:600}
.goal-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.goal-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#22d3ee);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.goal-bar.pace span{background:linear-gradient(90deg,var(--success),#34d399)}
.goal-bar.behind span{background:linear-gradient(90deg,var(--coral),#fb7185)}
.goal-foot{font-size:10.5px;display:flex;justify-content:space-between;color:var(--text-dark-3)}
.cf-pill{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.cf-high{background:rgba(16,185,129,.18);color:#6ee7b7}
.cf-mid{background:rgba(245,158,11,.18);color:#fde68a}
.cf-low{background:rgba(239,68,68,.18);color:#fca5a5}

.sim-row{display:grid;grid-template-columns:160px 1fr 90px;gap:10px;align-items:center;margin-bottom:9px;font-size:13px}
.sim-row label{color:var(--text-dark-2);font-weight:600;font-size:12.5px}
.sim-row input[type="range"]{width:100%;accent-color:var(--primary);cursor:pointer}
.sim-row .val{text-align:end;font-weight:800;color:#fff;font-size:13px}
.sim-out{background:rgba(0,0,0,.30);border:1px solid var(--line-dark);border-radius:var(--radius);padding:13px 16px;margin-top:14px;font-size:13px;line-height:1.85}
.sim-out b{color:#5eead4;font-weight:800}
.sim-out .neg{color:#fda4af}

/* === Branch dashboard === */
.banner-alert{background:linear-gradient(90deg,#fef2f2 0%,#fff 100%);border:1px solid var(--danger-soft);border-inline-start:4px solid var(--danger);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.banner-alert .bi{color:var(--danger);font-size:18px;flex-shrink:0}
.banner-alert .body{flex:1;font-size:13px}
.banner-alert .body b{color:var(--danger);display:block;margin-bottom:1px}
.banner-alert button{margin-inline-start:auto}

/* === Daily roster (tablet) === */
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.child-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s;position:relative}
.child-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--primary)}
.child-tile .pill{position:absolute;top:9px;inset-inline-end:9px}
.child-tile .name{font-weight:700;font-size:13.5px;text-align:center;line-height:1.3}
.child-tile .meta{font-size:11px;color:var(--muted);text-align:center}
.roster-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;margin:18px -26px -60px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:10;box-shadow:0 -4px 12px rgba(0,0,0,.04)}
.roster-stat{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg);border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;border:2px solid transparent;transition:all .15s}
.roster-stat:hover{background:var(--primary-soft);color:var(--primary)}
.roster-stat.on{background:var(--primary);color:#fff}
.roster-stat .num{font-size:14px;font-weight:800}
.roster-stat.success-stat{background:var(--success-soft);color:#047857}
.roster-stat.warning-stat{background:var(--warning-soft);color:#92400e}
.roster-stat.danger-stat{background:var(--danger-soft);color:#be123c}

/* === Children list === */
.children-table .child-cell{display:flex;align-items:center;gap:10px}
.children-table .child-cell b{font-weight:700;font-size:13.5px;display:block}
.children-table .child-cell small{color:var(--muted);font-size:11.5px}

/* === Finance specific === */
.tabs{display:flex;gap:4px;margin-bottom:18px;background:#fff;padding:5px;border-radius:var(--radius);border:1px solid var(--line);overflow-x:auto}
.tabs button{flex-shrink:0;background:transparent;border:0;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tabs button:hover{color:var(--primary);background:var(--primary-soft)}
.tabs button.on{background:var(--primary);color:#fff}
.bucket-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.bucket{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.bucket .lab{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bucket .val{font-size:18px;font-weight:800;margin-top:2px;letter-spacing:-.01em}
.bucket .meta{font-size:11px;color:var(--muted);margin-top:1px}
.bucket.b-current{border-inline-start:3px solid var(--success)}
.bucket.b-30{border-inline-start:3px solid var(--info)}
.bucket.b-60{border-inline-start:3px solid var(--warning)}
.bucket.b-90{border-inline-start:3px solid var(--coral)}
.bucket.b-90plus{border-inline-start:3px solid var(--danger)}

/* === Channel ROI table === */
.advice{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.advice.scale{background:var(--success-soft);color:#047857}
.advice.tune{background:var(--warning-soft);color:#92400e}
.advice.kill{background:var(--danger-soft);color:#be123c}

/* === Alerts panel === */
.alerts-panel{position:fixed;top:0;inset-inline-end:-420px;width:400px;height:100vh;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.10);z-index:1000;transition:inset-inline-end .25s ease;border-inline-start:1px solid var(--line);display:flex;flex-direction:column}
.alerts-panel.on{inset-inline-end:0}
.alerts-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.alerts-head h3{margin:0;font-size:16px;font-weight:800}
.alerts-head .close-btn{margin-inline-start:auto;width:32px;height:32px;border-radius:8px;background:var(--bg);border:0;cursor:pointer;color:var(--muted);font-family:inherit}
.alerts-head .close-btn:hover{background:var(--coral-soft);color:var(--coral)}
.alerts-list{flex:1;overflow-y:auto;padding:14px 16px}
.alert-item{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:#fff}
.alert-item.high{border-inline-start:4px solid var(--danger)}
.alert-item.med{border-inline-start:4px solid var(--warning)}
.alert-item.watch{border-inline-start:4px solid var(--info)}
.alert-item .meta{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.alert-item .title{font-weight:700;font-size:13px;margin-bottom:5px}
.alert-item .body{font-size:12px;color:var(--ink-2);line-height:1.55;margin-bottom:8px}
.alert-item .action-text{font-size:11.5px;color:var(--coral-dark);font-weight:700;margin-bottom:8px;padding:6px 10px;background:var(--coral-soft);border-radius:6px}
.alert-item .actions{display:flex;gap:6px}
.alert-item .actions button{font-size:11px;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;font-family:inherit;cursor:pointer;font-weight:600}
.alert-item .actions button:hover{border-color:var(--primary);color:var(--primary)}
.alert-item .actions .ack{background:var(--primary);color:#fff;border-color:var(--primary)}

.scrim{position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:999;display:none}
.scrim.on{display:block}

/* === Section headers within page === */
.section-h{font-size:13px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.section-h .bi{color:var(--primary);font-size:15px}
.page-ceo .section-h{color:var(--text-dark-2)}
.page-ceo .section-h .bi{color:#5eead4}

/* === Modals === */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.50);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-back.on{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:0 30px 60px rgba(0,0,0,.20);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;animation:fadeIn .2s}
.modal .mhead{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal .mhead h3{margin:0;font-size:16px;font-weight:800;flex:1}
.modal .mbody{padding:20px 22px}
.modal .mfoot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.modal label{font-size:12px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:4px}
.modal input,.modal textarea,.modal select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13px;outline:none;background:#fff}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* === Misc === */
.cwrap{position:relative;height:240px;width:100%}
.cwrap.tall{height:300px}
.row-grid{display:grid;gap:14px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:repeat(3,1fr)}
.row-2-7-5{grid-template-columns:7fr 5fr}
.row-2-5-7{grid-template-columns:5fr 7fr}
.row-2-8-4{grid-template-columns:8fr 4fr}
@media(max-width:900px){.row-2,.row-3,.row-2-7-5,.row-2-5-7,.row-2-8-4{grid-template-columns:1fr}}

.empty-mini{padding:24px;text-align:center;color:var(--muted);font-size:12.5px}

[data-en]{display:none}
body[lang="en"] [data-ar]{display:none}
body[lang="en"] [data-en]{display:inline}
body[lang="en"] [data-en-block]{display:block}

/* hide scrollbar nicely */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.30)}