/* ═══════════════════════════════════════════════════════════
   Istishraf C2-1 Future Readiness Tool — Styles
   HUD aesthetic matching Kahlout + Sync UI + Floating Progress
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-deep: #020810; --bg-0: #040c18; --bg-1: #0a1628; --bg-2: #0e1e38;
  --bg-3: #152a4a; --bg-4: #1c3560; --bg-panel: #0a1628;
  --border-1: #1a3050; --border-2: #2a4a70; --border-3: #3a6090; --frame: #1a3050;
  --text-1: #e0f0ff; --text-2: #8aacc8; --text-3: #5580a8;
  --teal: #00b8a9; --teal-dim: rgba(0,184,169,0.12);
  --cyan: #00d4ff; --cyan-dim: rgba(0,212,255,0.12);
  --gold: #d4a843; --gold-dim: rgba(212,168,67,0.12);
  --green: #00e870; --green-dim: rgba(0,232,112,0.12);
  --red: #ff3040; --red-dim: rgba(255,48,64,0.10);
  --amber: #ff8820; --amber-dim: rgba(255,136,32,0.12);
  --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.12);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(0,184,169,0.15);
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Rajdhani', 'Noto Kufi Arabic', sans-serif;
  --font-ar: 'Noto Kufi Arabic', 'Rajdhani', sans-serif;
  --mono: 'Share Tech Mono', monospace;
  --font-display: 'Orbitron', sans-serif;
  --sidebar-w: 220px; --topbar-h: 44px;
}
/* ═══ LIGHT (BRIGHT) THEME ═══ */
body.theme-bright {
  --bg-deep: #f0f2f5; --bg-0: #f5f6f8; --bg-1: rgba(255,255,255,0.88); --bg-2: rgba(255,255,255,0.72);
  --bg-3: rgba(0,0,0,0.04); --bg-4: rgba(0,0,0,0.06); --bg-panel: rgba(255,255,255,0.85);
  --border-1: #c0c8d4; --border-2: #a0aab8; --border-3: #808a98; --frame: #b0b8c4;
  --text-1: #0a0e18; --text-2: #2a3a50; --text-3: #607080;
  --teal: #008878; --teal-dim: rgba(0,136,120,0.08);
  --cyan: #005577; --cyan-dim: rgba(0,85,119,0.06);
  --gold: #8a6820; --gold-dim: rgba(138,104,32,0.08);
  --green: #005540; --green-dim: rgba(0,85,64,0.08);
  --red: #cc2020; --red-dim: rgba(204,32,32,0.06);
  --amber: #885500; --amber-dim: rgba(136,85,0,0.06);
  --purple: #5b3faa; --purple-dim: rgba(91,63,170,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.06); --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 24px rgba(0,136,120,0.08);
  color: #0a0e18;
}
body.theme-bright .sidebar {
  background:rgba(255,255,255,0.94); border-right-color:var(--frame);
  box-shadow:1px 0 8px rgba(0,0,0,0.04);
}
body.theme-bright .sidebar-brand { border-bottom-color:var(--frame); }
body.theme-bright .brand-logo { background:rgba(0,136,120,0.08); border-color:rgba(0,136,120,0.2); }
body.theme-bright .brand-text { color:#008878; }
body.theme-bright .brand-sub { color:#708098; }
body.theme-bright .nav-section { color:#708098; }
body.theme-bright .nav-item { color:#3a4a5a; }
body.theme-bright .nav-item:hover { background:rgba(0,0,0,0.04); color:#1a2030; }
body.theme-bright .nav-item.active { background:rgba(0,85,119,0.08); color:#005577; border-right-color:#005577; }
body.theme-bright .sync-status-bar, body.theme-bright .ai-status-bar {
  border-top-color:var(--frame); background:rgba(255,255,255,0.5);
}
body.theme-bright .topbar {
  background:rgba(255,255,255,0.92); border-bottom-color:var(--frame); backdrop-filter:blur(12px);
}
body.theme-bright .topbar-tag { background:rgba(0,136,120,0.08); color:#008878; border-color:rgba(0,136,120,0.2); }
body.theme-bright .content { background:#f0f2f5; }
body.theme-bright .card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .card:hover { border-color:#b0b8c4; }
body.theme-bright .drop-zone { border-color:#b0b8c4; background:rgba(255,255,255,0.5); }
body.theme-bright .drop-zone:hover { border-color:#008878; background:rgba(0,136,120,0.03); }
body.theme-bright .btn { border-color:#b0b8c4; color:#2a3a50; background:rgba(255,255,255,0.8); }
body.theme-bright .btn:hover { background:rgba(0,0,0,0.04); border-color:#808a98; }
body.theme-bright .btn-primary { background:#008878; color:#fff; border-color:#008878; }
body.theme-bright .btn-primary:hover { background:#006858; }
body.theme-bright .file-row { border-color:#d0d8e0; background:rgba(255,255,255,0.7); }
body.theme-bright .file-row:hover { background:rgba(255,255,255,0.95); }
body.theme-bright .progress-bar { background:rgba(255,255,255,0.9); border-color:var(--frame); }
body.theme-bright .area-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .area-card.uncovered { border-color:#e0b0b0; }
body.theme-bright .mapping-doc-header { background:rgba(0,0,0,0.03); border-color:#d0d8e0; }
body.theme-bright .mapping-doc-body { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .mapping-item { border-color:#e0e4e8; }
body.theme-bright .kpi-grid { background:rgba(0,0,0,0.02); }
body.theme-bright .kpi-cell.header { color:#607080; border-color:#d8dce0; }
body.theme-bright .gap-analysis-card { background:rgba(255,255,255,0.92); border-color:#c0c8d4; }
body.theme-bright .gap-score-box, body.theme-bright .gap-readiness-box { background:rgba(0,0,0,0.03); border-color:#d0d8e0; }
body.theme-bright .gap-axis { background:rgba(0,0,0,0.02); border-color:#d8dce0; }
body.theme-bright .gap-axis.ceiling { border-color:var(--amber); }
body.theme-bright .gap-bar { background:rgba(0,0,0,0.06); }
body.theme-bright .gap-subaxis { background:rgba(0,0,0,0.02); border-color:#d8dce0; }
body.theme-bright .gap-subaxis-bar { background:rgba(0,0,0,0.06); }
body.theme-bright .suggestions-card { background:rgba(255,255,255,0.88); border-color:#c0c8d4; }
body.theme-bright .suggestion-item { border-color:#e0e4e8; }
body.theme-bright .gap-action-item { background:rgba(0,0,0,0.02); border-color:#d8dce0; }
body.theme-bright .gap-action-item.elite { border-color:rgba(0,85,119,0.3); background:rgba(0,85,119,0.03); }
body.theme-bright .gap-strategic { background:rgba(0,85,119,0.05); border-color:rgba(0,85,119,0.15); }
body.theme-bright .summary-banner { background:rgba(255,255,255,0.88); border-color:#c0c8d4; }
body.theme-bright .gap-list-item.strength { background:rgba(0,85,64,0.06); color:#005540; }
body.theme-bright .gap-list-item.critical { background:rgba(204,32,32,0.06); color:#cc2020; }
body.theme-bright .log-entry { border-color:#e8ecf0; }
body.theme-bright .activity-log-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .activity-log-header { background:rgba(0,0,0,0.03); border-color:#d8dce0; }
body.theme-bright .activity-log-header:hover { background:rgba(0,0,0,0.05); }
body.theme-bright .template-status { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .template-drop { border-color:#b0b8c4; background:rgba(255,255,255,0.5); }
body.theme-bright .template-drop:hover { border-color:#008878; background:rgba(0,136,120,0.03); }
body.theme-bright .tpl-section { background:rgba(255,255,255,0.7); border-color:#d8dce0; }
body.theme-bright .tpl-section.filled { border-color:rgba(0,136,120,0.3); }
body.theme-bright .tpl-section-num { background:rgba(0,0,0,0.04); }
body.theme-bright .tpl-original { background:rgba(0,0,0,0.03); }
body.theme-bright .tpl-filled-content { background:rgba(255,255,255,0.95); border-color:#d8dce0; }
body.theme-bright .settings-overlay { background:rgba(255,255,255,0.97); border-color:#c0c8d4; box-shadow:0 8px 40px rgba(0,0,0,0.1); }
body.theme-bright .toast { background:rgba(255,255,255,0.95); border-color:#c0c8d4; color:#2a3a50; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
body.theme-bright ::-webkit-scrollbar-track { background:#f0f2f5; }
body.theme-bright ::-webkit-scrollbar-thumb { background:#c0c8d4; }
body.theme-bright ::-webkit-scrollbar-thumb:hover { background:#a0aab8; }
body.theme-bright .sync-log-row { border-color:#e8ecf0; }
body.theme-bright .sync-log-header { background:rgba(0,0,0,0.03); color:#607080; }
body.theme-bright .justification { border-color:rgba(0,85,119,0.15); background:rgba(0,85,119,0.03); }
body.theme-bright .gap-band-just { background:rgba(0,85,119,0.04); border-color:rgba(0,85,119,0.2); }
body.theme-bright .ev-chip.comp { background:rgba(0,136,120,0.06); color:#008878; border-color:rgba(0,136,120,0.15); }
body.theme-bright .ev-chip.res { background:rgba(91,63,170,0.06); color:#5b3faa; border-color:rgba(91,63,170,0.15); }
body.theme-bright .theme-switch-bar { border-top-color:var(--frame); }
body.theme-bright .theme-switch-bar:hover { background:rgba(0,0,0,0.04); }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg-deep); color:var(--text-1); min-height:100vh; overflow:hidden; height:100vh; font-weight:500; letter-spacing:0.2px; }

/* ═══ LAYOUT ═══ */
.app { display:flex; height:100vh; }

/* ── SIDEBAR ── */
.sidebar { width:var(--sidebar-w); background:var(--bg-0); border-right:1px solid var(--border-1); display:flex; flex-direction:column; flex-shrink:0; z-index:10; }
.sidebar-brand { padding:16px 18px; border-bottom:1px solid var(--border-1); display:flex; align-items:center; gap:10px; }
.brand-logo { width:32px; height:32px; border-radius:8px; background:var(--teal-dim); border:1px solid rgba(0,184,169,0.25); display:flex; align-items:center; justify-content:center; color:var(--teal); }
.brand-text { font-family:var(--font-display); font-size:12px; letter-spacing:2px; color:var(--teal); font-weight:700; }
.brand-sub { font-size:9px; color:var(--text-3); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:10px 0; }
.nav-section { padding:6px 18px; font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-top:8px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 18px; cursor:pointer; color:var(--text-2); font-size:13px; font-weight:500; transition:all 0.15s var(--ease); border-left:2px solid transparent; }
.nav-item:hover { background:var(--bg-1); color:var(--text-1); }
.nav-item.active { background:var(--bg-2); color:var(--teal); border-left-color:var(--teal); }
.nav-item .nav-icon { width:20px; display:flex; align-items:center; justify-content:center; opacity:0.6; font-size:14px; }
.nav-item.active .nav-icon { opacity:1; }
.nav-badge { margin-left:auto; font-size:10px; padding:1px 6px; border-radius:10px; background:var(--teal-dim); color:var(--teal); font-weight:600; }

/* ── AI Status ── */
.ai-status-bar { padding:10px 18px; border-top:1px solid var(--border-1); display:flex; align-items:center; gap:8px; cursor:pointer; }
.ai-status-bar:hover { background:var(--bg-1); }
.ai-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ai-dot.connected { background:var(--green); box-shadow:0 0 6px rgba(0,232,112,0.4); }
.ai-dot.disconnected { background:var(--red); }
.ai-dot.cloud { background:#3B82F6; }
.ai-status-text { font-size:11px; color:var(--text-2); }
.ai-model-text { font-size:9px; color:var(--text-3); font-family:var(--mono); }

.theme-switch-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; cursor:pointer;
  color:var(--text-2); border-top:1px solid var(--border-1);
  transition:background 0.15s;
}
.theme-switch-bar:hover { background:var(--bg-3); }

/* ── Sync Status (sidebar) ── */
.sync-status-bar { padding:10px 18px; border-top:1px solid var(--border-1); display:flex; align-items:center; gap:8px; cursor:pointer; }
.sync-status-bar:hover { background:var(--bg-1); }
.sync-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sync-dot.connected { background:var(--green); box-shadow:0 0 6px rgba(0,232,112,0.4); }
.sync-dot.pending { background:var(--amber); box-shadow:0 0 6px rgba(255,136,32,0.4); animation:pulse 1.5s infinite; }
.sync-dot.disconnected { background:var(--text-3); }
.sync-dot.syncing { background:var(--gold); box-shadow:0 0 6px rgba(212,168,67,0.4); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.sync-text { font-size:11px; color:var(--text-2); }
.sync-sub { font-size:9px; color:var(--text-3); font-family:var(--mono); }

/* ── MAIN ── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.topbar { height:var(--topbar-h); background:var(--bg-0); border-bottom:1px solid var(--border-1); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
.topbar-title { font-size:14px; font-weight:600; color:var(--text-1); }
.topbar-tag { font-size:9px; padding:2px 8px; border-radius:10px; background:var(--teal-dim); color:var(--teal); font-weight:600; letter-spacing:0.5px; }
.topbar-spacer { flex:1; }
.topbar-stats { display:flex; gap:16px; align-items:center; }
.stat-item { text-align:center; }
.stat-val { font-size:16px; font-weight:700; font-family:var(--mono); color:var(--teal); }
.stat-val.purple { color:var(--purple); }
.stat-label { font-size:8px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; }
.content { flex:1; overflow-y:auto; padding:20px; }

/* ═══ FLOATING PROGRESS + ACTIVITY LOG ═══ */
/* ═══ SIDEBAR ACTIVITY LOG ═══ */
.sidebar-log { border-top:1px solid var(--border-1); }
.sidebar-log-header {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; cursor:pointer; font-size:11px;
  color:var(--gold); font-weight:600; transition:background 0.15s;
}
.sidebar-log-header:hover { background:var(--bg-1); }
.sidebar-log-icon { font-size:12px; }
.sidebar-log-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-log-toggle { font-size:9px; color:var(--text-3); }
.sidebar-log-body {
  max-height:0; overflow:hidden; transition:max-height 0.25s ease;
  background:var(--bg-2); border-top:none;
}
.sidebar-log-body.open {
  max-height:250px; overflow-y:auto; border-top:1px solid var(--border-1);
  padding:4px 6px;
}

/* Activity Log Entries */
.log-entry { display:flex; align-items:flex-start; gap:4px; padding:2px 3px; font-size:10px; line-height:1.4; border-bottom:1px solid var(--border-1); }
.log-entry:last-child { border-bottom:none; }
.log-ts { font-family:var(--mono); font-size:9px; color:var(--text-3); white-space:nowrap; min-width:52px; flex-shrink:0; }
.log-icon { width:12px; text-align:center; flex-shrink:0; font-size:10px; }
.log-msg { color:var(--text-2); flex:1; word-break:break-word; }
.log-entry.success .log-icon { color:var(--green); }
.log-entry.error .log-icon { color:var(--red); }
.log-entry.error .log-msg { color:var(--red); }
.log-entry.warn .log-icon { color:var(--amber); }
.log-entry.warn .log-msg { color:var(--amber); }
.log-entry.progress .log-icon { color:var(--cyan); }
.log-entry.info .log-icon { color:var(--text-3); }

/* Mapping Page Log Card */
.activity-log-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden; }
.activity-log-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; background:var(--bg-2); border-bottom:1px solid var(--border-1); }
.activity-log-header:hover { background:var(--bg-3); }
.activity-log-body { max-height:300px; overflow-y:auto; padding:6px 10px; }

/* Bright theme overrides for sidebar log */
body.theme-bright .sidebar-log { border-top-color:var(--frame); }
body.theme-bright .sidebar-log-header { color:#8a6820; }
body.theme-bright .sidebar-log-header:hover { background:rgba(0,0,0,0.03); }
body.theme-bright .sidebar-log-body { background:rgba(0,0,0,0.02); border-top-color:var(--frame); }
body.theme-bright .sidebar-log-body.open { border-top-color:var(--frame); }

/* ═══ CARDS ═══ */
.card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); padding:16px; margin-bottom:12px; }
.card:hover { border-color:var(--border-2); }

/* ═══ DROP ZONE ═══ */
.drop-zone { border:2px dashed var(--border-2); border-radius:var(--r-xl); padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s; background:var(--bg-1); }
.drop-zone:hover, .drop-zone.drag-over { border-color:var(--teal); background:var(--teal-dim); }
.drop-zone-icon { font-size:36px; margin-bottom:8px; }
.drop-zone-text { font-size:14px; font-weight:600; color:var(--text-2); }
.drop-zone-sub { font-size:12px; color:var(--text-3); margin-top:4px; }
.file-chips { display:flex; justify-content:center; gap:6px; margin-top:12px; }
.file-chip { font-size:10px; padding:3px 10px; border-radius:16px; background:var(--bg-2); color:var(--text-3); border:1px solid var(--border-1); }

/* ═══ FILE LIST ═══ */
.file-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--r-lg); background:var(--bg-1); border:1px solid var(--border-1); margin-bottom:6px; }
.file-icon { font-size:20px; margin-top:2px; flex-shrink:0; }
.file-info { flex:1; min-width:0; }
.file-name { font-size:12px; font-weight:500; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-ext { font-size:9px; padding:1px 6px; border-radius:8px; font-weight:600; display:inline-block; margin-left:4px; }
.file-ext.pdf { background:var(--red-dim); color:var(--red); }
.file-ext.pptx { background:var(--amber-dim); color:var(--amber); }
.file-ext.docx { background:rgba(59,130,246,0.12); color:#3B82F6; }
.file-ext.xlsx { background:var(--green-dim); color:var(--green); }
.file-ext.md { background:var(--purple-dim); color:var(--purple); }
.file-meta { font-size:10px; color:var(--text-3); margin-top:2px; }
.file-remove { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:16px; padding:2px; opacity:0.5; }
.file-remove:hover { opacity:1; color:var(--red); }
.img-badge { font-size:9px; padding:1px 6px; border-radius:8px; background:var(--purple-dim); color:var(--purple); font-weight:600; margin-left:4px; }

/* Thumbnails */
.thumb-row { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.thumb { width:48px; height:48px; border-radius:4px; overflow:hidden; cursor:pointer; border:1px solid var(--border-1); background:var(--bg-2); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-more { width:48px; height:48px; border-radius:4px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--text-3); border:1px solid var(--border-1); }

/* Quick chips */
.quick-chips { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.qchip { font-size:9px; padding:1px 6px; border-radius:10px; border:1px solid; }
.qchip.comp { background:var(--teal-dim); color:var(--teal); border-color:rgba(0,184,169,0.2); }
.qchip.res { background:var(--purple-dim); color:var(--purple); border-color:rgba(167,139,250,0.2); }

/* ═══ MAPPING ═══ */
.mapping-doc { margin-bottom:16px; }
.mapping-doc-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg-2); border-radius:var(--r-lg) var(--r-lg) 0 0; border:1px solid var(--border-1); border-bottom:none; }
.mapping-doc-body { padding:12px 14px; border:1px solid var(--border-1); border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--bg-1); }
.mapping-section-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin:10px 0 6px; }
.mapping-section-label.comp { color:var(--teal); }
.mapping-section-label.res { color:var(--purple); }
.mapping-section-label.img { color:var(--gold); }
.mapping-item { padding:8px 10px; background:var(--bg-panel); border-radius:var(--r-md); border:1px solid var(--border-1); margin-bottom:4px; }
.mapping-item-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.conf-badge { font-size:8px; padding:1px 6px; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.conf-badge.high { background:var(--green-dim); color:var(--green); }
.conf-badge.medium { background:var(--gold-dim); color:var(--gold); }
.conf-badge.low { background:var(--red-dim); color:var(--red); }
.evidence-chips { display:flex; flex-wrap:wrap; gap:3px; }
.ev-chip { font-size:10px; padding:2px 8px; border-radius:12px; background:var(--bg-2); color:var(--text-2); border:1px solid var(--border-1); }
.ev-chip.comp { background:var(--teal-dim); border-color:rgba(0,184,169,0.15); }
.ev-chip.res { background:var(--purple-dim); border-color:rgba(167,139,250,0.15); }
.excerpt { font-size:10px; color:var(--text-3); font-style:italic; margin-top:4px; }
.img-findings-box { padding:8px 12px; background:var(--gold-dim); border-radius:var(--r-md); border:1px solid rgba(212,168,67,0.2); margin-bottom:8px; }
.img-finding { font-size:11px; color:var(--text-2); padding:3px 0; }
.img-finding::before { content:'🖼 '; }

/* KPI */
.kpi-item { margin-bottom:6px; padding:6px 10px; background:var(--bg-panel); border-radius:var(--r-md); border:1px solid var(--border-1); }
.kpi-name { font-size:12px; font-weight:500; color:var(--text-1); }
.kpi-name-ar { font-size:10px; color:var(--text-3); font-family:var(--font-ar); }
.kpi-meta { font-size:10px; color:var(--text-3); }
.kpi-grid { display:grid; gap:3px; font-size:11px; margin-top:4px; font-family:var(--mono); }
.kpi-cell { text-align:center; padding:3px 4px; border-radius:3px; }
.kpi-cell.header { color:var(--text-3); font-weight:600; }
.kpi-cell.target { background:var(--bg-2); color:var(--text-2); }
.kpi-cell.achieved { background:var(--green-dim); color:var(--green); }

/* ═══ AREA CARDS ═══ */
.area-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:8px; transition:all 0.2s; }
.area-card.covered { border-color:var(--border-2); }
.area-card.uncovered { opacity:0.45; }
.area-card-header { display:flex; align-items:center; gap:10px; }
.area-icon { font-size:22px; }
.area-title { font-size:13px; font-weight:600; color:var(--text-1); }
.area-title-ar { font-size:10px; color:var(--text-3); font-family:var(--font-ar); }
.area-badge { margin-left:auto; font-size:10px; padding:2px 10px; border-radius:16px; font-weight:600; }
.area-badge.covered { background:var(--teal-dim); color:var(--teal); }
.area-badge.covered-res { background:var(--purple-dim); color:var(--purple); }
.area-badge.missing { background:var(--red-dim); color:var(--red); }
.area-sources { margin-top:8px; }
.source-chip { font-size:9px; padding:2px 6px; border-radius:8px; background:var(--bg-2); color:var(--text-3); border:1px solid var(--border-1); }

/* ═══ SUMMARY / GAPS ═══ */
.summary-banner { padding:10px 16px; border-radius:var(--r-lg); margin-bottom:12px; border:1px solid; }
.summary-banner.comp { background:var(--teal-dim); border-color:rgba(0,184,169,0.2); }
.summary-banner.res { background:var(--purple-dim); border-color:rgba(167,139,250,0.2); }
.summary-banner.warn { background:var(--amber-dim); border-color:rgba(255,136,32,0.2); }
.summary-count { font-size:14px; font-weight:700; }
.summary-count.comp { color:var(--teal); }
.summary-count.res { color:var(--purple); }
.summary-text { font-size:12px; color:var(--text-2); }
.summary-missing { font-size:11px; color:var(--amber); margin-top:2px; }
.gap-chip { display:inline-block; font-size:10px; padding:3px 10px; border-radius:16px; background:var(--red-dim); color:var(--red); border:1px solid rgba(255,48,64,0.15); margin:2px; }

/* ═══ SYNC PAGE ═══ */
.sync-icon { font-size:28px; }
.sync-icon.on { filter:drop-shadow(0 0 6px rgba(0,232,112,0.4)); }
.sync-summary { display:flex; gap:12px; padding:8px 0; }
.sync-stat { flex:1; text-align:center; padding:8px; background:var(--bg-2); border-radius:var(--r-md); border:1px solid var(--border-1); }
.sync-stat-val { font-size:16px; font-weight:700; font-family:var(--mono); color:var(--teal); }
.sync-stat-label { font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.8px; margin-top:2px; }

.sync-file-row { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-radius:var(--r-md); background:var(--bg-2); margin-bottom:3px; font-size:12px; }
.sync-file-status { font-size:10px; font-weight:600; }
.sync-file-status.ok { color:var(--green); }
.sync-file-status.pending { color:var(--gold); }

/* Sync log table */
.sync-log-table { font-size:11px; }
.sync-log-header { display:grid; grid-template-columns:70px 70px 1fr 40px 1fr; gap:6px; padding:6px 8px; color:var(--text-3); font-weight:600; text-transform:uppercase; font-size:9px; letter-spacing:0.8px; border-bottom:1px solid var(--border-1); }
.sync-log-row { display:grid; grid-template-columns:70px 70px 1fr 40px 1fr; gap:6px; padding:5px 8px; border-bottom:1px solid rgba(26,48,80,0.5); align-items:center; }
.sync-log-row:hover { background:var(--bg-2); }
.sl-time { font-family:var(--mono); color:var(--text-3); font-size:10px; }
.sl-action { font-weight:600; font-size:10px; }
.sl-action.write { color:var(--cyan); }
.sl-action.read { color:var(--green); }
.sl-action.connect { color:var(--teal); }
.sl-action.reconnect { color:var(--teal); }
.sl-action.disconnect { color:var(--red); }
.sl-file { font-family:var(--mono); color:var(--text-2); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-status { text-align:center; font-weight:700; }
.sl-status.ok { color:var(--green); }
.sl-status.err { color:var(--red); }
.sl-detail { color:var(--text-3); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ SETTINGS OVERLAY (accessible from any page) ═══ */
.settings-overlay { position:fixed; inset:0; z-index:5000; }
.settings-overlay-bg { position:absolute; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); }
.settings-float {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:560px; max-width:92vw; max-height:85vh; overflow-y:auto;
  padding:18px; background:var(--bg-1); border:1px solid var(--border-2);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
}

/* ═══ SETTINGS ═══ */
.settings-panel { padding:14px; background:var(--bg-1); border-radius:var(--r-lg); border:1px solid var(--border-1); margin-bottom:12px; }
.settings-title { font-size:12px; font-weight:600; color:var(--text-1); margin-bottom:10px; }
.radio-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; cursor:pointer; }
.radio-row label { font-size:12px; color:var(--text-2); cursor:pointer; }
.radio-row input[type=radio] { accent-color:var(--teal); }
.input-row { display:flex; gap:6px; margin:6px 0 10px 20px; }
.input-field { flex:1; padding:7px 10px; font-size:12px; background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--r-md); color:var(--text-1); outline:none; font-family:var(--font); }
.input-field:focus { border-color:var(--teal); }
.model-info { margin-left:20px; font-size:11px; color:var(--text-3); margin-bottom:8px; }
.model-label { font-size:11px; color:var(--text-3); width:90px; flex-shrink:0; }
.model-hint { font-size:10px; color:var(--text-3); margin:-2px 0 10px 98px; }
.pipeline-info { padding:8px 12px; background:var(--cyan-dim); border-radius:var(--r-md); border:1px solid rgba(0,212,255,0.15); font-size:11px; color:var(--text-2); line-height:1.5; }
.pipeline-info b { color:var(--cyan); }
.privacy-warn { margin:6px 0 0 20px; padding:8px 12px; background:var(--red-dim); border-radius:var(--r-md); border:1px solid rgba(255,48,64,0.15); }
.privacy-warn-title { font-size:11px; color:var(--red); font-weight:600; }
.privacy-warn-text { font-size:11px; color:var(--text-3); line-height:1.5; margin-top:2px; }

/* Cloud provider cards */
.cloud-config { margin-left:20px; }
.cp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; margin-bottom:10px; }
.cp-card {
  padding:8px; border-radius:var(--r-md); border:1px solid var(--border-1);
  background:var(--bg-2); cursor:pointer; text-align:center; transition:all 0.15s;
}
.cp-card:hover { border-color:var(--teal); background:var(--teal-dim); }
.cp-card.selected { border-color:var(--teal); background:var(--teal-dim); box-shadow:0 0 0 1px var(--teal); }
.cp-icon { font-size:18px; display:block; margin-bottom:2px; }
.cp-info { display:flex; align-items:center; justify-content:center; gap:4px; }
.cp-name { font-size:10px; font-weight:600; color:var(--text-1); }
.cp-key-badge { font-size:9px; }
.cp-detail { padding:10px; background:var(--bg-panel); border:1px solid var(--border-1); border-radius:var(--r-md); margin-bottom:8px; }
.cp-detail-header { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:2px; }
.cp-detail-note { font-size:10px; color:var(--text-3); margin-bottom:8px; line-height:1.5; }
.cp-reco-box { padding:10px; background:var(--bg-2); border-radius:var(--r-md); margin-top:8px; border:1px solid var(--border-1); }
.cp-reco-row { font-size:10px; color:var(--text-2); margin-bottom:4px; line-height:1.5; }
.cp-reco-row b { color:var(--text-1); }
.cp-reco-tag { display:inline-block; padding:1px 6px; border-radius:6px; font-size:9px; font-weight:700; margin-right:4px; }
.cp-reco-tag.anl { background:var(--teal-dim); color:var(--teal); }
.cp-reco-tag.bm { background:var(--purple-dim); color:var(--purple); }
.cp-reco-tag.build { background:var(--cyan-dim); color:var(--cyan); }
.cp-reco-tag.fast { background:var(--gold-dim); color:var(--gold); }
.cp-reco-tag.multi { background:var(--green-dim); color:var(--green); }

body.theme-bright .cp-card { background:rgba(255,255,255,0.7); border-color:#d0d8e0; }
body.theme-bright .cp-card:hover { background:rgba(0,136,120,0.04); border-color:#008878; }
body.theme-bright .cp-card.selected { background:rgba(0,136,120,0.06); border-color:#008878; }
body.theme-bright .cp-detail { background:rgba(255,255,255,0.8); border-color:#d0d8e0; }
body.theme-bright .cp-reco-box { background:rgba(0,0,0,0.02); border-color:#d8dce0; }

/* ═══ BUTTONS ═══ */
.btn { padding:8px 16px; font-size:12px; font-weight:600; border-radius:var(--r-md); border:1px solid var(--border-2); background:var(--bg-2); color:var(--text-2); cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.btn:hover { background:var(--bg-3); color:var(--text-1); }
.btn-primary { background:var(--teal-dim); border-color:rgba(0,184,169,0.3); color:var(--teal); }
.btn-primary:hover { background:rgba(0,184,169,0.2); }
.btn-analyze { padding:10px 24px; font-size:13px; font-weight:700; border-radius:var(--r-lg); border:none; cursor:pointer; font-family:var(--font); background:linear-gradient(135deg,#00b8a9,#009688); color:#fff; box-shadow:0 0 16px rgba(0,184,169,0.2); transition:all 0.2s; }
.btn-analyze:hover { box-shadow:0 0 24px rgba(0,184,169,0.35); transform:translateY(-1px); }
.btn-analyze:disabled { opacity:0.35; cursor:not-allowed; box-shadow:none; transform:none; }

/* ═══ PROGRESS / SPINNER ═══ */
.progress-bar { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--gold); padding:6px 0; }
.spinner { display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ═══ INFO BOX ═══ */
.info-box { padding:14px 16px; border-radius:var(--r-lg); border:1px solid; font-size:12px; line-height:1.7; color:var(--text-2); }
.info-box.teal { background:var(--teal-dim); border-color:rgba(0,184,169,0.2); }
.info-box b { color:var(--text-1); }
.info-title { font-size:12px; font-weight:600; margin-bottom:4px; }
.info-title.teal { color:var(--teal); }

/* ═══ IMAGE MODAL ═══ */
.img-modal { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.img-modal img { max-width:90vw; max-height:85vh; border-radius:8px; border:1px solid var(--border-1); }
.img-modal-close { position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-1); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.img-modal-caption { text-align:center; margin-top:8px; font-size:11px; color:var(--text-3); }

/* ═══ TOAST ═══ */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:10px 24px; border-radius:24px; font-size:12px; font-weight:600; font-family:var(--font); z-index:10000; animation:toastIn 0.3s var(--ease); white-space:nowrap; }
.toast-success { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,112,0.3); }
.toast-error { background:var(--red-dim); color:var(--red); border:1px solid rgba(255,48,64,0.3); }
.toast-info { background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,212,255,0.3); }
.toast.hiding { opacity:0; transition:opacity 0.35s; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ═══ GAP ANALYSIS ═══ */
.gap-analysis-card { background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:20px; margin-bottom:12px; }
.gap-header { font-size:15px; font-weight:700; color:var(--cyan); margin-bottom:4px; font-family:var(--font-display); letter-spacing:0.5px; }
.gap-disclaimer { font-size:10px; color:var(--text-3); margin-bottom:14px; font-style:italic; }
.gap-top-row { display:flex; gap:16px; margin-bottom:16px; }
.gap-score-box { flex:1; text-align:center; padding:16px; background:var(--bg-2); border-radius:var(--r-lg); border:1px solid var(--border-1); }
.gap-score-val { font-size:36px; font-weight:800; font-family:var(--mono); }
.gap-score-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin:2px 0 8px; }
.gap-band { display:inline-block; font-size:12px; font-weight:700; padding:3px 14px; border-radius:16px; border:1px solid; }
.gap-readiness-box { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:16px; background:var(--bg-2); border-radius:var(--r-lg); border:1px solid var(--border-1); }
.gap-readiness-val { font-size:16px; font-weight:700; }
.gap-readiness-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.gap-formula { font-size:11px; font-family:var(--mono); color:var(--text-3); }
.gap-band-just { font-size:11px; color:var(--text-2); line-height:1.6; padding:10px 12px; background:var(--bg-2); border-radius:var(--r-md); margin-bottom:14px; border-left:3px solid var(--cyan); }
.gap-section-title { font-size:13px; font-weight:700; color:var(--text-1); margin:14px 0 8px; }
.gap-axes { display:flex; flex-direction:column; gap:10px; }
.gap-axis { padding:10px 12px; background:var(--bg-panel); border-radius:var(--r-md); border:1px solid var(--border-1); }
.gap-axis.ceiling { border-color:var(--amber); border-width:2px; }
.gap-axis.was-capped { border-left:3px solid var(--amber); }
.gap-axis-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; flex-wrap:wrap; gap:4px; }
.gap-axis-score { font-family:var(--mono); font-weight:700; font-size:13px; }
.gap-bar { height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.gap-bar-fill { height:100%; border-radius:3px; transition:width 0.5s var(--ease); }
.gap-axis-rationale { font-size:11px; color:var(--text-3); line-height:1.5; }
.gap-subaxis { padding:6px 10px; margin:4px 0 4px 12px; background:var(--bg-2); border-radius:var(--r-sm); border-left:2px solid var(--border-2); }
.gap-subaxis-header { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-2); margin-bottom:4px; }
.gap-subaxis-bar { height:4px; background:var(--bg-3); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.gap-subaxis-bar .gap-bar-fill { height:100%; border-radius:2px; }
.gap-subaxis-rationale { font-size:10px; color:var(--text-3); line-height:1.4; }
.gap-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.gap-list-item { font-size:12px; padding:4px 8px; border-radius:var(--r-sm); line-height:1.5; }
.gap-list-item.strength { color:var(--green); background:var(--green-dim); }
.gap-list-item.critical { color:var(--red); background:var(--red-dim); }
.gap-actions { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.gap-action-item { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; background:var(--bg-panel); border-radius:var(--r-md); border:1px solid var(--border-1); }
.gap-action-item.elite { border-color:rgba(0,212,255,0.25); background:rgba(0,212,255,0.03); }
.gap-priority { font-size:11px; font-weight:700; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.gap-action-text { flex:1; }
.gap-action-do { font-size:12px; font-weight:600; color:var(--text-1); }
.gap-action-impact { font-size:11px; color:var(--teal); margin-top:2px; }
.gap-action-effort { font-size:10px; color:var(--text-3); margin-top:2px; font-style:italic; }
.gap-strategic { padding:12px; background:var(--cyan-dim); border:1px solid rgba(0,212,255,0.15); border-radius:var(--r-md); font-size:12px; color:var(--text-2); line-height:1.6; margin-top:12px; }
.suggestion-dgep-impact { font-size:11px; color:var(--teal); margin:2px 0 4px; }

/* ═══ JUSTIFICATION & SOURCE ═══ */
.justification { font-size:11px; color:var(--text-2); line-height:1.6; padding:4px 0 4px 0; border-left:2px solid var(--border-2); padding-left:8px; margin:4px 0; }
.source-loc { font-size:10px; color:var(--cyan); font-family:var(--mono); padding:2px 0; opacity:0.85; }
.source-loc-inline { font-size:9px; color:var(--cyan); font-family:var(--mono); opacity:0.8; }

/* ═══ SUGGESTIONS ═══ */
.suggestions-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); padding:16px; margin-bottom:12px; }
.suggestions-header { font-size:14px; font-weight:700; margin-bottom:2px; }
.suggestions-header.comp { color:var(--teal); }
.suggestions-header.res { color:var(--purple); }
.suggestions-sub { font-size:11px; color:var(--text-3); margin-bottom:12px; }
.suggestion-item { padding:10px 12px; background:var(--bg-panel); border-radius:var(--r-md); border:1px solid var(--border-1); margin-bottom:6px; }
.suggestion-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.suggestion-type { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
.suggestion-type.implied { background:var(--gold-dim); color:var(--gold); }
.suggestion-type.missing { background:var(--red-dim); color:var(--red); }
.suggestion-title { font-size:13px; font-weight:600; color:var(--text-1); margin-bottom:4px; }
.suggestion-reason { font-size:11px; color:var(--text-2); line-height:1.5; margin-bottom:4px; }
.suggestion-action { font-size:11px; color:var(--teal); font-weight:500; padding:4px 0; }

/* ═══ TEMPLATE FILL PAGE ═══ */
.template-header { padding:16px; margin-bottom:12px; }
.template-status { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; padding:12px 16px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); }
.tpl-status-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-3); }
.tpl-status-item.ok { color:var(--green); }
.tpl-status-item.ok .tpl-status-icon { color:var(--green); }
.tpl-status-item.pending .tpl-status-icon { color:var(--text-3); }
.template-drop { padding:32px 20px; text-align:center; border:2px dashed var(--border-2); border-radius:var(--r-lg); cursor:pointer; transition:all 0.2s; background:var(--bg-panel); }
.template-drop:hover, .template-drop.drag-over { border-color:var(--cyan); background:rgba(0,212,255,0.03); }
.tpl-section { padding:12px 14px; margin-bottom:8px; background:var(--bg-panel); border:1px solid var(--border-1); border-radius:var(--r-md); transition:border-color 0.2s; }
.tpl-section.filled { border-color:rgba(0,184,169,0.3); }
.tpl-section-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tpl-section-num { font-size:10px; font-weight:700; color:var(--text-3); background:var(--bg-2); padding:2px 8px; border-radius:10px; white-space:nowrap; }
.tpl-section-heading { font-size:13px; font-weight:600; color:var(--text-1); flex:1; }
.tpl-conf { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.tpl-original { font-size:11px; color:var(--text-3); line-height:1.5; padding:6px 10px; background:var(--bg-2); border-radius:var(--r-sm); max-height:60px; overflow:hidden; }
.tpl-areas { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.tpl-area-tag { font-size:10px; padding:2px 8px; border-radius:10px; }
.tpl-area-tag.comp { background:var(--teal-dim); color:var(--teal); }
.tpl-area-tag.res { background:var(--purple-dim); color:var(--purple); }
.tpl-filled-content { font-size:12px; color:var(--text-2); line-height:1.7; padding:10px 12px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-sm); margin:6px 0; max-height:300px; overflow-y:auto; }
.tpl-sources { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.tpl-notes { font-size:11px; color:var(--cyan); margin-top:6px; font-style:italic; line-height:1.5; }

/* ═══ FOLDER SCANNER ═══ */
.scan-bar { display:flex; align-items:center; gap:10px; margin:8px 0; }
.btn-scan {
  padding:8px 16px; font-size:12px; font-family:var(--font); font-weight:600;
  background:var(--bg-1); border:1px dashed var(--border-2); border-radius:var(--r-md);
  color:var(--cyan); cursor:pointer; transition:all 0.15s;
}
.btn-scan:hover { background:var(--cyan-dim); border-color:var(--cyan); border-style:solid; }
.scan-hint { font-size:11px; color:var(--text-3); }
body.theme-bright .btn-scan { background:rgba(255,255,255,0.7); border-color:#b0b8c4; color:#005577; }
body.theme-bright .btn-scan:hover { background:rgba(0,85,119,0.06); border-color:#005577; }

/* ═══ KPI BENCHMARK ═══ */
.btn-benchmark {
  padding:7px 16px; font-size:12px; font-family:var(--font); font-weight:600;
  background:var(--purple-dim); border:1px solid rgba(167,139,250,0.3); border-radius:var(--r-md);
  color:var(--purple); cursor:pointer; transition:all 0.15s;
}
.btn-benchmark:hover:not(:disabled) { background:rgba(167,139,250,0.2); border-color:var(--purple); }
.btn-benchmark:disabled { opacity:0.5; cursor:default; }
body.theme-bright .btn-benchmark { background:rgba(91,63,170,0.06); border-color:rgba(91,63,170,0.2); color:#5b3faa; }

.benchmark-card { background:var(--bg-1); border:1px solid var(--purple); border-radius:var(--r-lg); padding:16px; margin-bottom:14px; overflow:hidden; }
.benchmark-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bm-overall { font-size:12px; color:var(--text-2); line-height:1.7; padding:10px 12px; background:var(--bg-2); border-radius:var(--r-md); margin-bottom:12px; border-left:3px solid var(--purple); }

.bm-kpi { padding:12px; margin-bottom:8px; background:var(--bg-panel); border:1px solid var(--border-1); border-radius:var(--r-md); }
.bm-kpi-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.bm-kpi-name { font-size:13px; font-weight:600; color:var(--text-1); }
.bm-quality { font-size:10px; font-weight:700; letter-spacing:0.5px; }
.bm-assess { font-size:11px; color:var(--text-2); margin-bottom:4px; line-height:1.5; }
.bm-notes { font-size:11px; color:var(--text-3); margin-bottom:8px; font-style:italic; }

.bm-benchmarks-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.bm-bench-box { padding:10px; border-radius:var(--r-sm); font-size:11px; line-height:1.6; }
.bm-bench-box.regional { background:rgba(0,184,169,0.06); border:1px solid rgba(0,184,169,0.15); }
.bm-bench-box.global { background:rgba(167,139,250,0.06); border:1px solid rgba(167,139,250,0.15); }
.bm-bench-label { font-weight:700; margin-bottom:4px; color:var(--text-1); }
.bm-bench-row { color:var(--text-2); }
.bm-row-label { color:var(--text-3); font-weight:600; }
.bm-bench-row.target { color:var(--teal); font-weight:600; }
.bm-dgep { font-size:11px; color:var(--teal); margin-top:6px; }
.bm-improvements { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.bm-improve-chip { font-size:10px; padding:3px 8px; border-radius:10px; background:var(--gold-dim); color:var(--gold); border:1px solid rgba(212,168,67,0.15); }

.bm-missing-section { margin-top:12px; padding:12px; background:var(--amber-dim); border:1px solid rgba(255,136,32,0.2); border-radius:var(--r-md); }
.bm-missing-kpi { padding:8px 0; border-bottom:1px solid rgba(255,136,32,0.1); }
.bm-missing-kpi:last-child { border-bottom:none; }
.bm-missing-name { font-size:12px; font-weight:600; color:var(--text-1); }
.bm-missing-why { font-size:11px; color:var(--text-2); margin:2px 0; }
.bm-missing-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:10px; color:var(--text-3); margin-top:4px; }

body.theme-bright .benchmark-card { background:rgba(255,255,255,0.9); border-color:rgba(91,63,170,0.3); }
body.theme-bright .bm-kpi { background:rgba(255,255,255,0.7); border-color:#d8dce0; }
body.theme-bright .bm-overall { background:rgba(91,63,170,0.04); border-color:rgba(91,63,170,0.3); }
body.theme-bright .bm-bench-box.regional { background:rgba(0,136,120,0.04); border-color:rgba(0,136,120,0.12); }
body.theme-bright .bm-bench-box.global { background:rgba(91,63,170,0.04); border-color:rgba(91,63,170,0.12); }
body.theme-bright .bm-missing-section { background:rgba(136,85,0,0.04); border-color:rgba(136,85,0,0.15); }

/* ═══ BENCHMARKS PAGE ═══ */
.benchmarks-page { padding-bottom:20px; }
.bm-page-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bm-action-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.bm-status-chips { display:flex; flex-wrap:wrap; gap:6px; }
.bm-chip { font-size:10px; padding:4px 10px; border-radius:12px; font-weight:600; }
.bm-chip.ok { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,112,0.15); }
.bm-chip.warn { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(255,136,32,0.15); }
.bm-chip.off { background:var(--bg-3); color:var(--text-3); border:1px solid var(--border-1); }
.btn-run-bm { font-size:13px; padding:10px 20px; white-space:nowrap; }

/* Settings card */
.bm-settings-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; }
.bm-settings-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-2); transition:background 0.15s; }
.bm-settings-header:hover { background:var(--bg-2); }
.bm-settings-toggle { font-size:10px; color:var(--text-3); transition:transform 0.2s; }
.bm-settings-card.open .bm-settings-toggle { transform:rotate(90deg); }
.bm-settings-body { display:none; padding:12px 14px; border-top:1px solid var(--border-1); }
.bm-settings-card.open .bm-settings-body { display:block; }
.bm-settings-section { margin-bottom:14px; }
.bm-set-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.bm-set-title .bm-set-hint { font-weight:400; color:var(--text-3); font-size:11px; }
.bm-set-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.bm-set-label { font-size:11px; color:var(--text-3); min-width:90px; font-weight:600; }
.bm-set-input {
  flex:1; padding:6px 10px; font-size:12px; font-family:var(--font);
  background:var(--bg-panel); border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--text-1); transition:border-color 0.2s;
}
.bm-set-input:focus { outline:none; border-color:var(--teal); }
select.bm-set-input { cursor:pointer; }
.bm-set-hint-box { font-size:10px; color:var(--text-3); line-height:1.6; padding:8px 10px; background:var(--bg-2); border-radius:var(--r-sm); margin-top:6px; }
.bm-set-hint-box code { font-family:var(--mono); font-size:10px; background:var(--bg-3); padding:1px 4px; border-radius:3px; }

.bm-empty { text-align:center; padding:40px; }

.bm-kpi-preview { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border-1); }
.bm-kpi-preview:last-child { border-bottom:none; }
.bm-kpi-preview-name { font-size:12px; color:var(--text-1); font-weight:500; }
.bm-kpi-preview-meta { font-size:10px; color:var(--text-3); }

/* Bright theme */
body.theme-bright .bm-settings-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .bm-settings-body { border-top-color:#d8dce0; }
body.theme-bright .bm-settings-header:hover { background:rgba(0,0,0,0.02); }
body.theme-bright .bm-set-input { background:rgba(255,255,255,0.9); border-color:#c0c8d4; }
body.theme-bright .bm-set-hint-box { background:rgba(0,0,0,0.02); }

/* ═══ BUILDER ═══ */
.builder-page { padding-bottom:20px; }
.builder-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.builder-section { margin-bottom:16px; }
.bp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }
.bp-card {
  padding:12px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md);
  cursor:pointer; transition:all 0.15s;
}
.bp-card:hover { border-color:var(--teal); background:var(--teal-dim); }
.bp-card.built { border-color:rgba(0,232,112,0.2); }
.bp-card-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.bp-icon { font-size:20px; }
.bp-title { font-size:12px; font-weight:700; color:var(--text-1); line-height:1.3; }
.bp-title-ar { font-size:10px; color:var(--text-3); }
.bp-built-badge { font-size:9px; font-weight:700; color:var(--green); background:var(--green-dim); padding:2px 8px; border-radius:8px; }
.bp-desc { font-size:11px; color:var(--text-2); line-height:1.5; }
.builder-custom-input {
  flex:1; padding:10px; font-size:12px; font-family:var(--font);
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--r-md);
  color:var(--text-1); resize:vertical; line-height:1.5;
}
.builder-custom-input:focus { outline:none; border-color:var(--teal); }

/* Framework card */
.fw-card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; }
.fw-card-header { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:background 0.15s; }
.fw-card-header:hover { background:var(--bg-2); }
.fw-icon { font-size:18px; }
.fw-title { font-size:13px; font-weight:700; color:var(--text-1); }
.fw-title-ar { font-size:10px; color:var(--text-3); }
.fw-meta { font-size:10px; color:var(--text-3); }
.fw-toggle { font-size:10px; color:var(--text-3); }
.fw-card-body { padding:0 14px 14px; }
.fw-purpose { font-size:12px; color:var(--text-2); line-height:1.6; padding:8px 10px; background:var(--bg-2); border-radius:var(--r-sm); margin-bottom:10px; border-left:3px solid var(--teal); }
.fw-axes { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.fw-axis-tag { font-size:10px; padding:2px 10px; border-radius:10px; background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,212,255,0.15); }
.fw-subsection { margin-bottom:12px; }
.fw-sub-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border-1); }

/* Maturity */
.fw-maturity { display:flex; flex-direction:column; gap:6px; }
.fw-mat-level { padding:6px 0; }
.fw-mat-bar { height:6px; border-radius:3px; margin-bottom:4px; transition:width 0.5s; }
.fw-mat-info { display:flex; align-items:center; gap:6px; }
.fw-mat-num { font-size:10px; font-weight:700; color:var(--text-3); font-family:var(--mono); }
.fw-mat-name { font-size:12px; font-weight:600; color:var(--text-1); }
.fw-mat-name-ar { font-size:10px; color:var(--text-3); }
.fw-mat-desc { font-size:11px; color:var(--text-2); padding-left:30px; line-height:1.5; }

/* Components */
.fw-comp { padding:10px; margin-bottom:6px; background:var(--bg-panel); border:1px solid var(--border-1); border-radius:var(--r-sm); }
.fw-comp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; flex-wrap:wrap; gap:4px; }
.fw-comp-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-comp-name-ar { font-size:10px; color:var(--text-3); margin-left:6px; }
.fw-comp-badges { display:flex; gap:4px; }
.fw-comp-badge { font-size:9px; padding:1px 8px; border-radius:8px; }
.fw-comp-badge.timeline { background:var(--gold-dim); color:var(--gold); }
.fw-comp-badge.axis { background:var(--cyan-dim); color:var(--cyan); }
.fw-comp-desc { font-size:11px; color:var(--text-2); margin-bottom:4px; line-height:1.5; }
.fw-comp-detail { font-size:11px; color:var(--text-2); margin:2px 0; line-height:1.5; }
.fw-detail-label { font-weight:700; color:var(--text-3); }
.fw-comp-tools { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.fw-tool-chip { font-size:10px; padding:2px 8px; border-radius:8px; background:var(--bg-3); color:var(--text-2); }

/* KPIs */
.fw-kpis { display:flex; flex-direction:column; gap:6px; }
.fw-kpi { padding:10px; background:var(--bg-panel); border:1px solid var(--border-1); border-radius:var(--r-sm); }
.fw-kpi-top { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.fw-kpi-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-kpi-name-ar { font-size:10px; color:var(--text-3); }
.fw-kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; font-size:11px; color:var(--text-2); margin:4px 0; }
.fw-kpi-label { font-weight:600; color:var(--text-3); }
.fw-kpi-targets { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.fw-target { font-size:10px; padding:2px 8px; border-radius:6px; background:var(--bg-3); color:var(--text-2); }
.fw-target.elite { background:var(--gold-dim); color:var(--gold); font-weight:700; }

/* Evidence */
.fw-evidence { display:flex; flex-direction:column; gap:2px; }
.fw-ev-item { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-1); align-items:flex-start; }
.fw-ev-check { font-size:14px; color:var(--text-3); margin-top:1px; }
.fw-ev-text { font-size:11px; color:var(--text-1); }
.fw-ev-meta { font-size:10px; color:var(--text-3); }

/* Quick wins */
.fw-qw { display:flex; gap:8px; padding:6px 10px; background:var(--gold-dim); border-radius:var(--r-sm); margin:4px 0; align-items:flex-start; }
.fw-qw-icon { font-size:14px; }
.fw-qw-action { font-size:11px; font-weight:600; color:var(--text-1); }
.fw-qw-meta { font-size:10px; color:var(--text-3); }

/* Roadmap */
.fw-roadmap { display:flex; flex-direction:column; gap:6px; }
.fw-phase { padding:10px; border-left:3px solid var(--teal); background:var(--bg-panel); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.fw-phase-header { display:flex; justify-content:space-between; margin-bottom:4px; }
.fw-phase-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-phase-dur { font-size:10px; color:var(--text-3); }
.fw-phase-list { margin-top:4px; }
.fw-phase-label { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }
.fw-phase-item { font-size:11px; color:var(--text-2); padding-left:10px; }
.fw-phase-item.del { color:var(--teal); }

.fw-actions { display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border-1); }

/* Bright overrides */
body.theme-bright .bp-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .bp-card:hover { background:rgba(0,136,120,0.04); border-color:#008878; }
body.theme-bright .fw-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .fw-card-header:hover { background:rgba(0,0,0,0.02); }
body.theme-bright .fw-comp { background:rgba(255,255,255,0.7); border-color:#e0e4e8; }
body.theme-bright .fw-kpi { background:rgba(255,255,255,0.7); border-color:#e0e4e8; }
body.theme-bright .fw-phase { background:rgba(255,255,255,0.7); border-color:#008878; }
body.theme-bright .fw-purpose { background:rgba(0,136,120,0.04); border-color:#008878; }
body.theme-bright .builder-custom-input { background:rgba(255,255,255,0.9); border-color:#c0c8d4; }

/* ═══ IMPLEMENTATION HUB ═══ */
.impl-page { padding-bottom:20px; }
.impl-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.impl-empty { text-align:center; padding:50px 20px; }

/* Framework selector tabs */
.impl-fw-selector { display:flex; gap:4px; margin-bottom:10px; overflow-x:auto; padding-bottom:4px; }
.impl-fw-tab { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-md); border:1px solid var(--border-1); background:var(--bg-1); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.impl-fw-tab:hover { border-color:var(--teal); }
.impl-fw-tab.active { border-color:var(--teal); background:var(--teal-dim); }
.impl-fw-tab-icon { font-size:16px; }
.impl-fw-tab-name { font-size:11px; font-weight:600; color:var(--text-1); }
.impl-fw-tab-pct { font-size:10px; font-weight:700; color:var(--teal); }

/* Active framework info bar */
.impl-fw-info { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); margin-bottom:10px; border-left:3px solid var(--teal); }
.impl-fw-icon { font-size:20px; }
.impl-fw-name { font-size:14px; font-weight:700; color:var(--text-1); }
.impl-fw-name-ar { font-size:11px; color:var(--text-3); }
.impl-progress-mini { display:flex; align-items:center; gap:8px; min-width:140px; }
.impl-progress-bar { flex:1; height:8px; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.impl-progress-fill { height:100%; background:linear-gradient(90deg, var(--teal), var(--cyan)); border-radius:4px; transition:width 0.4s; }
.impl-progress-text { font-size:13px; font-weight:800; color:var(--teal); min-width:36px; text-align:right; }

/* Tab bar */
.impl-tabs { display:flex; gap:2px; margin-bottom:14px; background:var(--bg-2); border-radius:var(--r-md); padding:3px; overflow-x:auto; }
.impl-tab { display:flex; align-items:center; gap:5px; padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; font-size:11px; color:var(--text-3); transition:all 0.15s; white-space:nowrap; border:none; background:transparent; font-family:var(--font); }
.impl-tab:hover { background:var(--bg-3); color:var(--text-2); }
.impl-tab.active { background:var(--teal-dim); color:var(--teal); font-weight:600; }
.impl-empty-tab { text-align:center; padding:40px; font-size:12px; color:var(--text-3); }

/* ── Dashboard ── */
.impl-dashboard { }
.impl-stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px; }
.impl-stat-card { padding:14px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); text-align:center; }
.impl-stat-big { font-size:24px; font-weight:800; color:var(--text-1); }
.impl-stat-big.green { color:var(--green); }
.impl-stat-big.gold { color:var(--gold); }
.impl-stat-label { font-size:10px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.impl-stat-sub { font-size:10px; color:var(--text-3); margin-top:2px; }
.impl-mini-bar { height:5px; background:var(--bg-3); border-radius:3px; overflow:hidden; margin-top:6px; }
.impl-mini-fill { height:100%; border-radius:3px; transition:width 0.4s; }
.impl-mini-fill.green { background:var(--green); }
.impl-mini-fill.teal { background:var(--teal); }
.impl-mini-fill.purple { background:var(--purple); }

.impl-dash-cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:14px; }
.impl-dash-col { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); padding:12px; }
.impl-dash-col-title { font-size:11px; font-weight:700; color:var(--text-1); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border-1); }
.impl-dash-empty { font-size:11px; color:var(--text-3); font-style:italic; padding:10px 0; text-align:center; }
.impl-dash-item { display:flex; align-items:flex-start; gap:6px; padding:6px 8px; border-radius:var(--r-sm); margin-bottom:4px; font-size:11px; }
.impl-dash-item.wip { background:rgba(0,184,169,0.04); border-left:2px solid var(--teal); }
.impl-dash-item.blocked { background:rgba(204,41,54,0.04); border-left:2px solid var(--red); }
.impl-dash-item.kpi { background:rgba(176,128,255,0.04); border-left:2px solid var(--purple); }
.impl-dash-date { font-size:9px; color:var(--text-3); white-space:nowrap; }
.impl-dash-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Quick Wins & Roadmap tracker ── */
.impl-qw-list { display:flex; flex-direction:column; gap:8px; }
.impl-item-card { padding:12px 14px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); transition:border-color 0.15s; }
.impl-item-card.done { border-left:3px solid var(--green); }
.impl-item-card.wip { border-left:3px solid var(--teal); }
.impl-item-card.blocked { border-left:3px solid var(--red); }
.impl-item-card.todo { border-left:3px solid var(--border-1); }
.impl-item-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.impl-item-name { font-size:12px; font-weight:600; color:var(--text-1); }
.impl-item-meta { font-size:10px; color:var(--text-3); margin-top:1px; }
.impl-item-status-wrap { }
.impl-status-select { font-size:10px; padding:3px 6px; border-radius:8px; border:1px solid var(--border-1); background:var(--bg-2); color:var(--text-2); cursor:pointer; font-family:var(--font); }
.impl-status-select.done { background:var(--green-dim); color:var(--green); border-color:rgba(16,185,129,0.3); }
.impl-status-select.wip { background:var(--teal-dim); color:var(--teal); border-color:rgba(0,184,169,0.3); }
.impl-status-select.blocked { background:var(--red-dim); color:var(--red); border-color:rgba(204,41,54,0.3); }
.impl-toolkit-badge { font-size:9px; padding:3px 8px; border-radius:10px; background:var(--teal-dim); color:var(--teal); font-weight:600; cursor:pointer; }
.impl-item-body { display:flex; flex-direction:column; gap:5px; }
.impl-field-row { display:flex; align-items:center; gap:6px; }
.impl-field-row label { font-size:10px; color:var(--text-3); min-width:72px; white-space:nowrap; }
.impl-input { flex:1; padding:5px 8px; font-size:11px; font-family:var(--font); background:var(--bg-panel); border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--text-1); min-width:0; }
.impl-input:focus { outline:none; border-color:var(--teal); }

/* ── Roadmap Timeline ── */
.impl-roadmap-timeline { display:flex; flex-direction:column; gap:0; }
.impl-phase-card { display:flex; gap:0; }
.impl-phase-line { display:flex; flex-direction:column; align-items:center; width:32px; flex-shrink:0; padding-top:14px; }
.impl-phase-dot { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; border:2px solid var(--border-1); background:var(--bg-1); }
.impl-phase-dot.done { border-color:var(--green); color:var(--green); background:var(--green-dim); }
.impl-phase-dot.wip { border-color:var(--teal); color:var(--teal); background:var(--teal-dim); }
.impl-phase-dot.blocked { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.impl-phase-connector { flex:1; width:2px; background:var(--border-1); min-height:20px; }
.impl-phase-content { flex:1; padding:6px 0 16px 10px; }
.impl-phase-activities { font-size:10px; color:var(--text-2); line-height:1.6; padding:4px 0 4px 6px; border-left:2px solid var(--border-1); margin:6px 0; }
.impl-phase-act { padding:1px 0; }
.impl-phase-dels { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }
.impl-phase-del { font-size:9px; padding:2px 8px; border-radius:8px; background:var(--cyan-dim); color:var(--cyan); }

/* ── KPI Measurement ── */
.impl-kpi-section { display:flex; flex-direction:column; gap:12px; }
.impl-kpi-card { padding:14px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); }
.impl-kpi-header { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.impl-kpi-name { font-size:13px; font-weight:700; color:var(--text-1); }
.impl-kpi-name-ar { font-size:10px; color:var(--text-3); }
.impl-kpi-targets { display:flex; gap:4px; flex-shrink:0; }
.impl-kpi-target-chip { font-size:9px; padding:2px 8px; border-radius:8px; background:var(--bg-3); color:var(--text-2); font-weight:600; }
.impl-kpi-target-chip.elite { background:rgba(212,168,67,0.12); color:var(--gold); }
.impl-kpi-meta { display:flex; gap:12px; font-size:10px; color:var(--text-3); margin-bottom:10px; flex-wrap:wrap; }
.impl-kpi-current { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px; }
.impl-kpi-current-box { padding:10px; background:var(--bg-2); border-radius:var(--r-sm); text-align:center; }
.impl-kpi-current-box.latest { background:rgba(0,184,169,0.06); border:1px solid rgba(0,184,169,0.15); }
.impl-kpi-current-label { font-size:9px; color:var(--text-3); text-transform:uppercase; font-weight:600; letter-spacing:0.5px; margin-bottom:4px; }
.impl-kpi-current-val { font-size:16px; font-weight:700; color:var(--text-1); }
.impl-kpi-current-date { font-size:9px; color:var(--text-3); margin-top:2px; }
.impl-kpi-val-input { width:80px; padding:4px 8px; text-align:center; font-size:13px; font-weight:600; font-family:var(--font); background:transparent; border:1px dashed var(--border-2); border-radius:var(--r-sm); color:var(--text-1); }
.impl-kpi-val-input:focus { outline:none; border-color:var(--teal); border-style:solid; }
.impl-kpi-add { display:flex; gap:6px; align-items:center; padding:8px 0; border-top:1px dashed var(--border-1); margin-top:6px; }
.impl-kpi-history { margin-top:8px; }
.impl-kpi-history-header { display:grid; grid-template-columns:90px 1fr 1fr 30px; gap:6px; padding:4px 8px; font-size:9px; font-weight:700; color:var(--text-3); text-transform:uppercase; border-bottom:1px solid var(--border-1); }
.impl-kpi-history-row { display:grid; grid-template-columns:90px 1fr 1fr 30px; gap:6px; padding:5px 8px; font-size:11px; color:var(--text-2); border-bottom:1px solid var(--border-1); align-items:center; }
.impl-kpi-history-row:hover { background:var(--bg-2); }
.impl-kpi-history-val { font-weight:600; color:var(--text-1); }
.impl-kpi-history-note { font-size:10px; color:var(--text-3); }
.impl-kpi-del { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:11px; padding:2px 4px; border-radius:4px; }
.impl-kpi-del:hover { color:var(--red); background:var(--red-dim); }

/* ── Results Tab ── */
.impl-results-section { }
.impl-results-summary { padding:16px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); margin-bottom:14px; }
.impl-results-summary-title { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:10px; }
.impl-results-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.impl-results-metric { font-size:11px; color:var(--text-2); text-align:center; padding:8px; background:var(--bg-2); border-radius:var(--r-sm); }
.impl-results-val { font-size:18px; font-weight:800; color:var(--teal); display:block; }
.impl-results-kpi-table { margin-bottom:14px; }
.impl-results-kpi-table-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.impl-results-table { width:100%; border-collapse:collapse; font-size:11px; }
.impl-results-table th { background:var(--bg-2); padding:8px 10px; text-align:left; font-weight:700; color:var(--text-2); border-bottom:2px solid var(--border-1); }
.impl-results-table td { padding:8px 10px; border-bottom:1px solid var(--border-1); color:var(--text-2); }
.impl-results-table tr:hover td { background:var(--bg-2); }
.impl-kpi-status-ok { color:var(--green); font-weight:700; }
.impl-kpi-status-prog { color:var(--teal); font-weight:600; }
.impl-kpi-status-gap { color:var(--red); font-weight:600; }
.impl-results-completed { margin-bottom:14px; padding:12px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md); }
.impl-results-done-item { font-size:11px; color:var(--text-2); padding:4px 0; display:flex; align-items:flex-start; gap:4px; }
.impl-results-date { color:var(--text-3); font-size:10px; }
.impl-results-actions { text-align:center; padding:16px; margin-bottom:14px; }
.impl-results-narrative { background:var(--bg-1); border:1px solid rgba(0,184,169,0.2); border-radius:var(--r-md); overflow:hidden; }
.impl-results-narrative-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(0,184,169,0.04); border-bottom:1px solid var(--border-1); font-size:12px; font-weight:700; color:var(--teal); }
.impl-results-narrative-body { padding:14px; font-size:12px; line-height:1.7; color:var(--text-2); max-height:600px; overflow-y:auto; }

/* Responsive */
@media (max-width:768px) {
  .impl-stat-grid { grid-template-columns:repeat(2, 1fr); }
  .impl-dash-cols { grid-template-columns:1fr; }
  .impl-kpi-current { grid-template-columns:1fr; }
  .impl-results-grid { grid-template-columns:repeat(2, 1fr); }
  .impl-kpi-add { flex-wrap:wrap; }
}

/* Bright theme */
body.theme-bright .impl-fw-tab { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-fw-tab.active { background:rgba(0,136,120,0.06); border-color:#008878; }
body.theme-bright .impl-fw-info { background:rgba(255,255,255,0.92); border-color:#d0d8e0; border-left-color:#008878; }
body.theme-bright .impl-tabs { background:rgba(0,0,0,0.03); }
body.theme-bright .impl-tab.active { background:rgba(0,136,120,0.08); color:#008878; }
body.theme-bright .impl-stat-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-dash-col { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-item-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-kpi-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-results-summary { background:rgba(255,255,255,0.92); border-color:#d0d8e0; }
body.theme-bright .impl-results-completed { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .impl-results-narrative { background:rgba(255,255,255,0.92); border-color:rgba(0,136,120,0.2); }
body.theme-bright .impl-input { background:rgba(255,255,255,0.9); border-color:#c0c8d4; }

/* ═══ RESEARCH ═══ */
/* Research action buttons on Competencies/Results pages */
.rsch-action-btns { display:flex; gap:4px; flex-wrap:wrap; }
.btn-rsch-manus, .btn-rsch-papers {
  font-size:10px; padding:4px 10px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--font); border:1px solid var(--border-1); transition:all 0.15s;
}
.btn-rsch-manus { background:var(--bg-2); color:var(--teal); }
.btn-rsch-manus:hover { background:var(--teal-dim); border-color:var(--teal); }
.btn-rsch-papers { background:var(--bg-2); color:var(--purple); }
.btn-rsch-papers:hover { background:var(--purple-dim); border-color:var(--purple); }
.btn-rsch-sm {
  width:24px; height:24px; border-radius:4px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--border-1); font-size:11px;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s; padding:0;
}
.btn-rsch-sm:hover { background:var(--teal-dim); border-color:var(--teal); transform:scale(1.05); }

.research-page { padding-bottom:20px; }
.rsch-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }

/* Search bar */
.rsch-search-bar { display:flex; gap:8px; margin-bottom:8px; }
.rsch-search-input {
  flex:1; padding:10px 14px; font-size:13px; font-family:var(--font);
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md);
  color:var(--text-1); transition:border-color 0.15s;
}
.rsch-search-input:focus { outline:none; border-color:var(--teal); }

/* Suggestions */
.rsch-suggestions { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; align-items:center; }
.rsch-sug-label { font-size:10px; color:var(--text-3); margin-right:4px; }
.rsch-sug-chip {
  font-size:10px; padding:3px 8px; border-radius:10px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-3);
  font-family:var(--font); transition:all 0.15s; white-space:nowrap;
}
.rsch-sug-chip:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-dim); }

/* Loading */
.rsch-loading { text-align:center; padding:30px; font-size:12px; color:var(--text-3); }
.rsch-spinner { display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.rsch-empty { text-align:center; padding:30px; font-size:12px; color:var(--text-3); }

/* Results */
.rsch-results-header { font-size:11px; color:var(--text-3); margin-bottom:8px; }
.rsch-paper-card {
  padding:12px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-md); margin-bottom:8px; transition:border-color 0.15s;
}
.rsch-paper-card:hover { border-color:var(--teal); }
.rsch-paper-title { font-size:13px; font-weight:700; color:var(--text-1); line-height:1.4; margin-bottom:4px; }
.rsch-paper-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.rsch-meta-chip { font-size:9px; padding:2px 6px; border-radius:6px; background:var(--bg-3); color:var(--text-2); }
.rsch-meta-chip.cite { color:var(--teal); background:var(--teal-dim); }
.rsch-meta-chip.venue { color:var(--purple); background:var(--purple-dim); }
.rsch-paper-authors { font-size:10px; color:var(--text-3); margin-bottom:4px; }
.rsch-paper-abstract { font-size:11px; color:var(--text-2); line-height:1.6; margin-bottom:6px; }
.rsch-paper-actions { display:flex; gap:4px; flex-wrap:wrap; }
.rsch-link-btn {
  font-size:10px; padding:3px 8px; border-radius:4px; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--border-1); color:var(--text-2);
  text-decoration:none; font-family:var(--font); transition:all 0.15s;
}
.rsch-link-btn:hover { border-color:var(--teal); color:var(--teal); }
.rsch-link-btn.pdf { color:var(--green); }
.rsch-link-btn.pdf:hover { border-color:var(--green); }
.rsch-link-btn.doi { color:var(--cyan); }

/* Manus config */
.rsch-config-card {
  padding:10px 14px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-md); margin-bottom:12px;
}
.rsch-config-row { display:flex; align-items:center; gap:8px; }
.rsch-config-label { font-size:11px; font-weight:600; color:var(--text-2); white-space:nowrap; }
.rsch-config-input {
  flex:1; padding:6px 10px; font-size:12px; font-family:var(--font);
  background:var(--bg-panel); border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--text-1);
}
.rsch-config-input:focus { outline:none; border-color:var(--teal); }

/* Section titles */
.rsch-section-title { font-size:12px; font-weight:700; color:var(--text-1); margin:12px 0 8px; }

/* Template grid */
.rsch-template-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; margin-bottom:12px; }
.rsch-template-card {
  padding:12px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-md); cursor:pointer; transition:all 0.15s;
}
.rsch-template-card:hover { border-color:var(--teal); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.rsch-tmpl-icon { font-size:20px; margin-bottom:4px; }
.rsch-tmpl-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:3px; }
.rsch-tmpl-desc { font-size:10px; color:var(--text-3); line-height:1.4; }

/* Custom task */
.rsch-custom-task { margin-bottom:12px; }
.rsch-custom-textarea {
  width:100%; padding:10px; font-size:12px; font-family:var(--font);
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-md);
  color:var(--text-1); resize:vertical;
}
.rsch-custom-textarea:focus { outline:none; border-color:var(--teal); }

/* Task cards */
.rsch-task-card {
  padding:12px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-md); margin-bottom:8px;
}
.rsch-task-card.completed { border-left:3px solid var(--green); }
.rsch-task-card.error { border-left:3px solid var(--red); }
.rsch-task-card.running { border-left:3px solid var(--cyan); }
.rsch-task-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.rsch-task-status { font-size:11px; font-weight:700; }
.rsch-task-date { font-size:10px; color:var(--text-3); }
.rsch-task-prompt { font-size:11px; color:var(--text-2); margin-bottom:6px; line-height:1.4; }
.rsch-task-result {
  font-size:11px; color:var(--text-2); line-height:1.6; padding:10px;
  background:var(--bg-panel); border-radius:var(--r-sm); max-height:400px; overflow-y:auto;
}
.rsch-task-result.error { color:var(--red); background:var(--red-dim); }
.rsch-task-running { font-size:11px; color:var(--cyan); padding:8px 0; }

/* Bright theme */
body.theme-bright .rsch-search-input { background:rgba(255,255,255,0.9); border-color:#c0c8d4; }
body.theme-bright .rsch-paper-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .rsch-config-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .rsch-template-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .rsch-task-card { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .rsch-custom-textarea { background:rgba(255,255,255,0.9); border-color:#c0c8d4; }
body.theme-bright .rsch-task-result { background:rgba(0,0,0,0.02); }
body.theme-bright .btn-rsch-manus { background:rgba(0,136,120,0.06); color:#008878; border-color:#c0d8d4; }
body.theme-bright .btn-rsch-papers { background:rgba(130,80,220,0.04); color:#7050b0; border-color:#d0c8e0; }
body.theme-bright .btn-rsch-sm { background:rgba(0,0,0,0.03); border-color:#d0d8e0; }

/* ═══ AI CHAT ═══ */
.chat-container { display:flex; flex-direction:column; height:calc(100vh - var(--topbar-h) - 16px); max-height:calc(100vh - var(--topbar-h) - 16px); }
.chat-header { padding:14px 16px; flex-shrink:0; display:flex; align-items:center; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; }
.chat-messages { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:12px; }
.chat-welcome { padding:20px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--r-lg); text-align:center; }
.chat-quick-prompts { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.chat-quick-btn {
  padding:8px 14px; font-size:11px; font-family:var(--font);
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:20px;
  color:var(--text-2); cursor:pointer; transition:all 0.15s; text-align:left;
}
.chat-quick-btn:hover { background:var(--teal-dim); border-color:var(--teal); color:var(--teal); }
.chat-msg { display:flex; flex-direction:column; max-width:85%; }
.chat-msg.user { align-self:flex-end; align-items:flex-end; }
.chat-msg.assistant { align-self:flex-start; align-items:flex-start; }
.chat-msg-bubble {
  padding:10px 14px; border-radius:var(--r-lg); font-size:12.5px; line-height:1.7;
  word-break:break-word;
}
.chat-msg-bubble.user {
  background:var(--teal); color:#fff; border-bottom-right-radius:4px;
}
.chat-msg-bubble.assistant {
  background:var(--bg-1); border:1px solid var(--border-1); color:var(--text-2);
  border-bottom-left-radius:4px;
}
.chat-msg-ts { font-size:9px; color:var(--text-3); margin-top:3px; padding:0 4px; }
.chat-msg-bubble.typing { display:flex; gap:4px; padding:12px 18px; }
.typing-dot {
  width:6px; height:6px; border-radius:50%; background:var(--text-3);
  animation:typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay:0.2s; }
.typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-area {
  flex-shrink:0; padding:10px 16px; display:flex; gap:8px; align-items:flex-end;
  border-top:1px solid var(--border-1); background:var(--bg-panel);
}
.chat-input {
  flex:1; padding:10px 14px; font-size:13px; font-family:var(--font);
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--r-lg);
  color:var(--text-1); resize:none; line-height:1.5; min-height:42px; max-height:120px;
  transition:border-color 0.2s;
}
.chat-input:focus { outline:none; border-color:var(--teal); }
.chat-send-btn { width:42px; height:42px; padding:0; font-size:18px; border-radius:50%; flex-shrink:0; }

/* Bright theme chat overrides */
body.theme-bright .chat-msg-bubble.user { background:#008878; }
body.theme-bright .chat-msg-bubble.assistant { background:rgba(255,255,255,0.9); border-color:#d0d8e0; color:#2a3a50; }
body.theme-bright .chat-welcome { background:rgba(255,255,255,0.88); border-color:#d0d8e0; }
body.theme-bright .chat-quick-btn { background:rgba(255,255,255,0.7); border-color:#c0c8d4; color:#2a3a50; }
body.theme-bright .chat-quick-btn:hover { background:rgba(0,136,120,0.06); border-color:#008878; color:#008878; }
body.theme-bright .chat-input-area { background:rgba(255,255,255,0.9); border-top-color:#d0d8e0; }
body.theme-bright .chat-input { background:rgba(255,255,255,0.95); border-color:#c0c8d4; color:#0a0e18; }
body.theme-bright .chat-input:focus { border-color:#008878; }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-0); }
::-webkit-scrollbar-thumb { background:var(--border-1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-2); }

/* ═══ TOPBAR STATUS INDICATOR ═══ */
.topbar-status { display:flex; align-items:center; gap:6px; padding:3px 12px; border-radius:14px; background:rgba(0,184,169,0.06); margin-left:12px; max-width:380px; overflow:hidden; }
.topbar-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; transition:background 0.3s; }
.topbar-status-dot.idle { background:var(--green); }
.topbar-status-dot.busy { background:var(--gold); animation:pulse-dot 1.2s ease-in-out infinite; }
.topbar-status-dot.error { background:var(--red); }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
.topbar-status-text { font-size:10px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }

/* ═══ BUILD MODE SELECTOR ═══ */
.build-mode-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; margin-bottom:8px; border-radius:var(--r-md); background:rgba(0,184,169,0.03); border:1px solid var(--border-1); flex-wrap:wrap; }
.build-mode-label { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; margin-right:4px; }
.build-mode-btn { font-size:10px; padding:4px 10px; border-radius:12px; border:1px solid var(--border-1); background:transparent; color:var(--text-2); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.build-mode-btn:hover { border-color:var(--teal); color:var(--teal); }
.build-mode-btn.active { background:var(--teal); color:var(--bg-0); border-color:var(--teal); font-weight:700; }
.build-mode-info { font-size:9px; color:var(--text-3); margin-left:auto; font-style:italic; }

/* ═══ VALIDATION BADGE & PANEL ═══ */
.ai-provider-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:500; padding:2px 7px; border-radius:8px; background:rgba(0,184,169,0.08); color:var(--teal); border:1px solid rgba(0,184,169,0.15); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
body.theme-bright .ai-provider-badge { background:rgba(0,136,120,0.06); border-color:rgba(0,136,120,0.15); color:#008878; }
.validation-badge { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:6px; }
.validation-badge.pass { background:rgba(16,185,129,0.12); color:var(--green); }
.validation-badge.partial { background:rgba(212,168,67,0.12); color:var(--gold); }
.validation-badge.fail { background:rgba(204,41,54,0.12); color:var(--red); }
.validation-panel { margin-top:8px; padding:10px 14px; border-radius:var(--r-sm); border:1px solid rgba(139,92,246,0.2); background:rgba(139,92,246,0.03); }
.validation-panel .val-header { font-size:11px; font-weight:700; color:#a78bfa; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.validation-panel .val-score { font-size:16px; font-weight:800; }
.validation-panel .val-items { font-size:11px; line-height:1.7; color:var(--text-2); }
.validation-panel .val-pass { color:var(--green); }
.validation-panel .val-gap { color:var(--red); }
.btn-validate { font-size:9px; padding:2px 8px; border-radius:10px; border:1px solid rgba(139,92,246,0.3); color:#a78bfa; background:transparent; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.btn-validate:hover { background:rgba(139,92,246,0.1); }
.btn-validate.loading { opacity:0.6; cursor:wait; }
.btn-validate.done { border-color:var(--green); color:var(--green); }

body.theme-bright .topbar-status { background:rgba(0,136,120,0.06); }
body.theme-bright .build-mode-btn.active { background:#008878; color:white; }
body.theme-bright .validation-panel { background:rgba(139,92,246,0.04); }

/* ═══ API SETTINGS PAGE ═══ */
.api-page-header { margin-bottom:16px; }
.api-status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.api-status-card { padding:12px 14px; border-radius:var(--r-md); background:var(--bg-panel); border:1px solid var(--border-1); display:flex; flex-direction:column; gap:2px; }
.api-status-card.ok { border-color:rgba(0,184,169,0.3); }
.api-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; margin-right:4px; }
.api-status-dot.green { background:var(--green); box-shadow:0 0 6px rgba(16,185,129,0.4); }
.api-status-dot.gray { background:var(--text-3); }
.api-status-label { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }
.api-status-val { font-size:11px; font-weight:600; color:var(--text-1); }

.api-section { border:1px solid var(--border-1); border-radius:var(--r-md); padding:18px; margin-bottom:14px; background:var(--bg-panel); }
.api-section-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.api-section-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.api-section-title { font-size:14px; font-weight:700; color:var(--text-1); }
.api-section-desc { font-size:11px; color:var(--text-3); margin-top:2px; }
.api-conn-badge { font-size:10px; font-weight:700; padding:3px 10px; border-radius:12px; white-space:nowrap; margin-left:auto; flex-shrink:0; }
.api-conn-badge.ok { background:rgba(16,185,129,0.12); color:var(--green); }
.api-conn-badge.off { background:rgba(120,120,120,0.1); color:var(--text-3); }

.api-provider-toggle { display:flex; gap:8px; margin-bottom:10px; }
.api-prov-btn { flex:1; padding:12px; border-radius:var(--r-md); border:2px solid var(--border-1); background:var(--bg-0); color:var(--text-2); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; }
.api-prov-btn:hover { border-color:var(--teal); color:var(--teal); }
.api-prov-btn.active { border-color:var(--teal); background:rgba(0,184,169,0.08); color:var(--teal); }
.api-privacy-note { font-size:11px; padding:8px 12px; border-radius:var(--r-sm); background:rgba(0,184,169,0.04); color:var(--text-2); line-height:1.5; }

.api-field-group { display:flex; flex-direction:column; gap:10px; }
.api-field-row { display:flex; align-items:center; gap:10px; }
.api-field-label { font-size:11px; font-weight:700; color:var(--text-3); min-width:110px; text-align:right; flex-shrink:0; }
.api-input { flex:1; padding:7px 10px; border-radius:var(--r-sm); border:1px solid var(--border-1); background:var(--bg-0); color:var(--text-1); font-size:12px; font-family:inherit; outline:none; transition:border 0.2s; }
.api-input:focus { border-color:var(--teal); }
.api-key-input { font-family:'Share Tech Mono',monospace; letter-spacing:0.5px; }
.api-hint { font-size:10px; color:var(--text-3); line-height:1.5; padding:4px 0 0 0; }
.api-warn { font-size:11px; color:var(--amber); padding:6px 10px; background:rgba(212,168,67,0.08); border-radius:var(--r-sm); }

.api-subsection-title { font-size:12px; font-weight:700; color:var(--text-1); padding-bottom:4px; border-bottom:1px solid var(--border-1); }

.api-cloud-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:8px; }
.api-cloud-card { border:1px solid var(--border-1); border-radius:var(--r-md); overflow:hidden; transition:border-color 0.2s; }
.api-cloud-card.has-key { border-color:rgba(0,184,169,0.3); }
.api-cloud-card.active { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
.api-cloud-card-header { display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(0,184,169,0.03); border-bottom:1px solid var(--border-1); }
.api-cloud-icon { font-size:16px; }
.api-cloud-name { font-size:12px; font-weight:700; color:var(--text-1); flex:1; }
.api-key-badge { font-size:10px; }
.api-active-badge { font-size:9px; font-weight:800; color:var(--teal); background:rgba(0,184,169,0.12); padding:2px 6px; border-radius:8px; letter-spacing:0.5px; }
.api-cloud-card-body { padding:10px 12px; }
.api-cloud-note { font-size:10px; color:var(--text-3); line-height:1.4; }
.api-test-row { margin-top:4px; min-height:16px; }
.api-test-status { font-size:10px; font-weight:600; }
.api-test-status.ok { color:var(--green); }
.api-test-status.fail { color:var(--red); }
.api-test-status.testing { color:var(--gold); }

.api-reco-box { margin-top:14px; padding:12px 14px; border-radius:var(--r-md); background:rgba(0,184,169,0.04); border:1px solid rgba(0,184,169,0.1); }
.api-reco-title { font-size:11px; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.api-reco-row { font-size:10px; color:var(--text-2); padding:3px 0; display:flex; align-items:center; gap:8px; }
.api-reco-tag { font-size:9px; font-weight:700; padding:2px 8px; border-radius:8px; flex-shrink:0; min-width:60px; text-align:center; }
.api-reco-tag.analysis { background:rgba(139,92,246,0.15); color:#a78bfa; }
.api-reco-tag.benchmark { background:rgba(59,130,246,0.15); color:#60a5fa; }
.api-reco-tag.builder { background:rgba(16,185,129,0.15); color:#34d399; }
.api-reco-tag.fast { background:rgba(251,191,36,0.15); color:#fbbf24; }
.api-reco-tag.multi { background:rgba(244,114,182,0.15); color:#f472b6; }

@media (max-width:768px) {
  .api-status-grid { grid-template-columns:repeat(2,1fr); }
  .api-cloud-grid { grid-template-columns:1fr; }
  .api-field-row { flex-direction:column; align-items:stretch; }
  .api-field-label { text-align:left; min-width:0; }
  .api-provider-toggle { flex-direction:column; }
}

body.theme-bright .api-section { background:rgba(255,255,255,0.8); }
body.theme-bright .api-status-card { background:rgba(255,255,255,0.8); }
body.theme-bright .api-cloud-card-header { background:rgba(0,136,120,0.04); }
body.theme-bright .api-prov-btn { background:white; }
body.theme-bright .api-prov-btn.active { background:rgba(0,136,120,0.06); }
body.theme-bright .api-input { background:white; border-color:#d1d5db; }
body.theme-bright .api-reco-box { background:rgba(0,136,120,0.04); }

/* ═══ AI EXPAND BUTTONS & GUIDE PANELS ═══ */
.btn-ai-expand {
  font-size:10px; font-weight:700; padding:3px 10px; border-radius:12px;
  border:1px solid var(--teal); color:var(--teal); background:transparent;
  cursor:pointer; white-space:nowrap; transition:all 0.2s;
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.btn-ai-expand:hover { background:var(--teal); color:var(--bg-0); transform:scale(1.05); }
.btn-ai-expand.loading { opacity:0.6; cursor:wait; animation:spin 1s linear infinite; border-color:var(--gold); color:var(--gold); }
.btn-ai-expand.done { border-color:var(--green); color:var(--green); }
.btn-ai-expand.done:hover { background:var(--green); color:var(--bg-0); }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.ai-guide-panel {
  margin:6px 0 8px 0; border:1px solid var(--teal); border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(0,184,169,0.04), rgba(0,184,169,0.01));
  overflow:hidden;
}
.ai-guide-panel.roadmap { margin-top:10px; }
.ai-guide-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; cursor:pointer; font-size:11px; font-weight:700;
  color:var(--teal); background:rgba(0,184,169,0.06);
  transition:background 0.2s;
}
.ai-guide-header:hover { background:rgba(0,184,169,0.12); }
.ai-guide-toggle { font-size:10px; color:var(--text-3); }
.ai-guide-body {
  padding:12px 16px; font-size:11.5px; line-height:1.7; color:var(--text-2);
  max-height:800px; overflow-y:auto;
}
.ai-guide-body .guide-h1 { font-size:14px; font-weight:700; color:var(--text-1); margin:16px 0 8px 0; padding-bottom:6px; border-bottom:2px solid var(--teal); }
.ai-guide-body .guide-h2 { font-size:13px; font-weight:700; color:var(--teal); margin:14px 0 6px 0; padding-bottom:4px; border-bottom:1px solid var(--border-1); }
.ai-guide-body .guide-h3 { font-size:12px; font-weight:700; color:var(--text-1); margin:10px 0 4px 0; }
.ai-guide-body .guide-bullet { padding-left:14px; margin:2px 0; }
.ai-guide-body .guide-sub-bullet { padding-left:28px; margin:1px 0; font-size:11px; color:var(--text-3); }
.ai-guide-body .guide-numbered { padding-left:14px; margin:3px 0; }
.ai-guide-body .guide-para { margin:3px 0; }
.ai-guide-body .guide-spacer { height:6px; }
.ai-guide-body .guide-hr { border:none; border-top:1px solid var(--border-1); margin:10px 0; }
.ai-guide-body .guide-checkbox { padding-left:4px; margin:3px 0; }
.ai-guide-body strong { color:var(--text-1); }

/* Toolkit tables */
.ai-guide-body .guide-table-wrap { overflow-x:auto; margin:8px 0; border-radius:var(--r-sm); border:1px solid var(--border-1); }
.ai-guide-body .guide-table { width:100%; border-collapse:collapse; font-size:11px; }
.ai-guide-body .guide-table th { background:rgba(0,184,169,0.08); color:var(--text-1); font-weight:700; padding:7px 10px; text-align:left; border-bottom:2px solid var(--teal); white-space:nowrap; }
.ai-guide-body .guide-table td { padding:6px 10px; border-bottom:1px solid var(--border-1); vertical-align:top; }
.ai-guide-body .guide-table tr:last-child td { border-bottom:none; }
.ai-guide-body .guide-table tr:hover td { background:rgba(0,184,169,0.03); }

/* Time slots (agendas) */
.ai-guide-body .guide-timeslot { display:flex; gap:10px; padding:5px 8px; margin:2px 0; border-left:3px solid var(--gold); background:rgba(212,168,67,0.04); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.ai-guide-body .guide-time { font-weight:700; color:var(--gold); white-space:nowrap; min-width:100px; font-family:'Share Tech Mono',monospace; font-size:11px; }
.ai-guide-body .guide-activity { color:var(--text-1); }

/* Email templates */
.ai-guide-body .guide-email-subject { padding:6px 10px; background:rgba(59,130,246,0.06); border-left:3px solid #3b82f6; margin:4px 0; font-weight:600; color:var(--text-1); border-radius:0 var(--r-sm) var(--r-sm) 0; }

body.theme-bright .ai-guide-body .guide-table th { background:rgba(0,136,120,0.08); }
body.theme-bright .ai-guide-body .guide-table tr:hover td { background:rgba(0,136,120,0.03); }
body.theme-bright .ai-guide-body .guide-timeslot { background:rgba(212,168,67,0.06); }

body.theme-bright .ai-guide-panel { border-color:rgba(0,136,120,0.3); background:linear-gradient(135deg, rgba(0,184,169,0.06), rgba(0,184,169,0.02)); }
body.theme-bright .ai-guide-header { background:rgba(0,184,169,0.08); }
body.theme-bright .ai-guide-body { color:#374151; }
body.theme-bright .btn-ai-expand { border-color:#008878; color:#008878; }
body.theme-bright .btn-ai-expand:hover { background:#008878; color:white; }
body.theme-bright .btn-ai-expand.done { border-color:#059669; color:#059669; }

/* ═══ ANIMATIONS ═══ */
.anim-in { animation:fadeSlideUp 0.3s var(--ease) both; }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ===============================================================
   ELITE ANALYTICS PAGE
   =============================================================== */
.an-tabs{display:flex;gap:3px;margin-bottom:16px;background:var(--card-bg);border-radius:8px;padding:3px;border:1px solid var(--border)}
.an-tab{padding:7px 14px;border:none;background:transparent;color:var(--text-2);font-size:11px;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s;font-family:var(--font)}
.an-tab:hover{background:rgba(0,184,169,.08);color:var(--text-1)}
.an-tab.active{background:var(--accent);color:#fff}

.an-summary{display:flex;gap:20px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.an-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.an-ring{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--clr) calc(var(--pct) * 3.6deg),rgba(255,255,255,.06) 0);display:flex;align-items:center;justify-content:center;position:relative}
.an-ring::before{content:'';position:absolute;width:84px;height:84px;border-radius:50%;background:var(--bg)}
.an-ring span{position:relative;z-index:1;font-size:1.3rem;font-weight:700;font-family:var(--mono);color:var(--clr)}
.an-ring-label{font-size:11px;font-weight:600;color:var(--text-2)}

.an-quick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}
.an-qs{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;text-align:center}
.an-qs-v{font-size:1.1rem;font-weight:700;font-family:var(--mono);color:var(--accent)}
.an-qs-l{font-size:10px;color:var(--text-3)}

.an-section-title{font-size:12px;font-weight:700;color:var(--text-1);margin:18px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.an-issue{font-size:11px;color:#e8a820;padding:4px 0}
.an-ok{font-size:11px;color:#34d399;padding:8px 12px;background:rgba(52,211,153,.08);border-radius:6px;border:1px solid rgba(52,211,153,.2)}
.an-empty{font-size:11px;color:var(--text-3);padding:24px;text-align:center}

.an-axes{display:grid;gap:6px}
.an-axis{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--card-bg);border:1px solid var(--border);border-radius:6px;font-size:11px}
.an-axis-name{font-weight:600;color:var(--text-1);min-width:200px}
.an-axis-weight{font-family:var(--mono);color:var(--accent);font-weight:700;min-width:40px}
.an-axis-tip{color:var(--text-3);font-size:10px;flex:1}

.an-exp-section{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.an-exp-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.04)}
.an-exp-check{font-weight:700;width:18px;text-align:center;color:#ef4444;font-size:12px}
.an-exp-check.ok{color:#34d399}
.an-exp-body{flex:1}
.an-exp-name{color:var(--text-1);font-weight:500}
.an-exp-ar{font-size:10px;color:var(--text-3);direction:rtl;font-family:'Noto Kufi Arabic',sans-serif}
.an-exp-req{font-size:9px;font-weight:700;color:#ef4444;background:rgba(239,68,68,.1);padding:1px 6px;border-radius:4px;white-space:nowrap}

.an-ce-controls{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.an-select{background:var(--card-bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text-1);font-size:11px;font-family:var(--font);max-width:320px}
.an-ce-count{font-size:10px;color:var(--text-3);font-family:var(--mono)}

.ce-matrix{overflow-x:auto;margin-bottom:10px}
.ce-table{border-collapse:collapse;width:100%;font-size:11px}
.ce-table th,.ce-table td{border:1px solid var(--border);padding:5px 6px;text-align:center}
.ce-corner{background:var(--card-bg);font-weight:600;color:var(--text-2);text-align:left!important;min-width:160px;font-size:10px}
.ce-kpi-head{background:var(--card-bg);font-weight:600;color:var(--accent);font-size:9px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:vertical-lr;text-orientation:mixed;min-height:70px}
.ce-cap-name{text-align:left!important;font-weight:500;color:var(--text-1);background:var(--card-bg);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.ce-cell{cursor:pointer;transition:background .15s;min-width:36px;font-size:13px}
.ce-cell:hover{background:rgba(0,184,169,.1)}
.ce-cell.linked.strong{background:rgba(0,184,169,.18);color:var(--accent)}
.ce-cell.linked.moderate{background:rgba(0,184,169,.1);color:var(--accent);opacity:.8}
.ce-cell.linked.indirect{background:rgba(0,184,169,.04);color:var(--text-3)}

.ce-legend{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--text-2);padding:6px 0}
.ce-leg{display:flex;align-items:center;gap:3px}

.ce-link-item{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--card-bg);border-radius:6px;margin-bottom:3px;font-size:10px;border:1px solid var(--border)}
.ce-link-from{font-weight:600;color:var(--text-1);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-link-arrow{color:var(--accent);font-weight:700}
.ce-link-to{color:var(--accent);font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-link-str{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600}
.ce-link-str.strong{background:rgba(0,184,169,.15);color:var(--accent)}
.ce-link-str.moderate{background:rgba(255,255,255,.06);color:var(--text-2)}
.ce-link-str.indirect{background:rgba(255,255,255,.03);color:var(--text-3)}
.ce-link-narr{flex:1;border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:10px;background:var(--bg);color:var(--text-1);font-family:var(--font)}
.ce-link-narr:focus{border-color:var(--accent);outline:none}
.btn-x{background:none;border:none;color:#ef4444;cursor:pointer;font-size:12px;padding:2px 4px;opacity:.6}
.btn-x:hover{opacity:1}

.an-gap{padding:10px 14px;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
.an-gap.critical{border-left:3px solid #ef4444}
.an-gap.high{border-left:3px solid #e8a820}
.an-gap.medium{border-left:3px solid var(--accent)}
.an-gap-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.an-gap-sev{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;letter-spacing:.05em}
.an-gap.critical .an-gap-sev{background:rgba(239,68,68,.15);color:#ef4444}
.an-gap.high .an-gap-sev{background:rgba(232,168,32,.15);color:#e8a820}
.an-gap.medium .an-gap-sev{background:rgba(0,184,169,.15);color:var(--accent)}
.an-gap-title{font-size:12px;font-weight:700;color:var(--text-1)}
.an-gap-desc{font-size:11px;color:var(--text-2);margin-bottom:4px}
.an-gap-action{font-size:10px;color:var(--accent);font-weight:600}

@media(max-width:700px){
  .an-quick-stats{grid-template-columns:repeat(2,1fr)}
  .an-axis-name{min-width:120px}
}

/* Standards & References */
.fw-references{display:grid;gap:6px}
.fw-ref-item{display:flex;gap:10px;padding:6px 10px;background:rgba(0,184,169,.05);border:1px solid rgba(0,184,169,.15);border-radius:6px;font-size:11px;align-items:baseline}
.fw-ref-std{font-weight:700;color:var(--accent);white-space:nowrap;min-width:120px;font-family:var(--mono);font-size:10px}
.fw-ref-rel{color:var(--text-2);flex:1}
.fw-based-on{background:rgba(0,184,169,.04);border-radius:4px;padding:4px 8px;margin-top:4px;font-size:10px;color:var(--text-2);border-left:2px solid var(--accent)}
.fw-based-on .fw-detail-label{color:var(--accent)}
.fw-kpi-based-on{font-size:10px;color:var(--text-2);margin-top:4px;padding:3px 8px;background:rgba(0,184,169,.04);border-radius:4px;border-left:2px solid var(--accent)}
.fw-kpi-based-on .fw-kpi-label{color:var(--accent)}

/* MD Export button */
.btn-export-md{background:rgba(0,184,169,.1);border:1px solid rgba(0,184,169,.25);color:var(--accent);font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;font-family:var(--font);white-space:nowrap}
.btn-export-md:hover{background:rgba(0,184,169,.2)}

/* Framework header export buttons */
.btn-hdr-export{background:rgba(0,184,169,.08);border:1px solid rgba(0,184,169,.2);color:var(--accent);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;cursor:pointer;font-family:var(--font);white-space:nowrap;opacity:.7;transition:all .15s}
.btn-hdr-export:hover{opacity:1;background:rgba(0,184,169,.18)}

/* ═══════════════════════════════════════════════════════════
   TALENT MANAGEMENT PAGE
   ═══════════════════════════════════════════════════════════ */

.tm-tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.tm-tab{background:rgba(0,184,169,.06);border:1px solid rgba(0,184,169,.12);color:var(--text-2);font-size:13px;font-weight:600;padding:8px 18px;border-radius:6px;cursor:pointer;font-family:var(--font);transition:all .15s}
.tm-tab.active{background:rgba(0,184,169,.18);color:var(--accent);border-color:var(--accent)}
.tm-tab:hover:not(.active){background:rgba(0,184,169,.1)}

/* Stats Grid */
.tm-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.tm-stat-card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center}
.tm-stat-card.accent{border-color:var(--accent);background:rgba(0,184,169,.06)}
.tm-stat-val{font-size:28px;font-weight:700;color:var(--text-1);font-family:'Rajdhani',sans-serif}
.tm-stat-lbl{font-size:11px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* Panels */
.tm-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tm-panel{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:16px;min-width:0}
.tm-panel-title{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:12px}

/* Maturity bars */
.tm-maturity{display:flex;gap:6px;margin-bottom:10px}
.tm-mat-bar{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:8px 4px;text-align:center;opacity:.5;transition:all .2s}
.tm-mat-bar.filled{opacity:1;background:rgba(0,184,169,.12);border-color:var(--accent)}
.tm-mat-num{display:block;font-size:18px;font-weight:700;color:var(--accent);font-family:'Rajdhani',sans-serif}
.tm-mat-en{display:block;font-size:10px;color:var(--text-2);font-weight:600}
.tm-mat-ar{display:block;font-size:10px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl}
.tm-mat-desc{font-size:12px;color:var(--text-3);font-style:italic}

/* KPI table */
.tm-kpi-tbl{width:100%;border-collapse:collapse;font-size:12px}
.tm-kpi-tbl th{text-align:left;color:var(--text-3);font-size:10px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--border)}
.tm-kpi-tbl td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-2)}
.tm-kpi-val{color:var(--accent);font-weight:700;font-family:'Rajdhani',sans-serif;font-size:15px}

/* Gap chart */
.tm-gap-chart{display:flex;flex-direction:column;gap:10px}
.tm-gap-row{display:flex;align-items:center;gap:12px}
.tm-gap-label{width:200px;min-width:200px;font-size:11px;color:var(--text-2);line-height:1.3}
.tm-gap-label .ar{color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;font-size:10px;direction:rtl;display:inline-block}
.tm-gap-bars{flex:1;display:flex;align-items:center;gap:8px}
.tm-gap-bg{position:relative;height:14px;background:var(--surface-2);border-radius:7px;flex:1;overflow:visible}
.tm-gap-cur{height:100%;background:linear-gradient(90deg,rgba(0,184,169,.4),rgba(0,184,169,.7));border-radius:7px;transition:width .3s}
.tm-gap-tgt{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent);border-radius:1px}
.tm-gap-num{font-size:11px;color:var(--text-3);white-space:nowrap;min-width:56px;text-align:right}
.tm-gap-pri{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;min-width:55px;text-align:center}
.pri-critical{background:rgba(255,50,50,.15);color:#ff5555}
.pri-high{background:rgba(255,160,50,.15);color:#ffa032}
.pri-medium{background:rgba(255,220,50,.15);color:#ccbb33}
.pri-low{background:rgba(0,184,169,.12);color:var(--accent)}

/* Toolbar */
.tm-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tm-count{font-size:12px;color:var(--text-3)}

/* Data table */
.tm-table-wrap{overflow-x:auto}
.tm-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:700px}
.tm-tbl th{text-align:left;color:var(--text-3);font-size:10px;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--border);white-space:nowrap}
.tm-tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-2);vertical-align:middle}
.tm-tbl .ar{font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;font-size:11px;color:var(--text-3)}

/* Type badges */
.tm-type-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap}
.type-employee{background:rgba(100,100,200,.12);color:#8888cc}
.type-champion{background:rgba(255,180,50,.12);color:#ffb432}
.type-ambassador{background:rgba(0,184,169,.12);color:var(--accent)}

/* Cert badges */
.tm-cert{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}
.cert-none{background:rgba(100,100,100,.1);color:var(--text-3)}
.cert-bronze{background:rgba(180,120,60,.15);color:#b4783c}
.cert-silver{background:rgba(180,180,200,.15);color:#b4b4c8}
.cert-gold{background:rgba(255,200,50,.15);color:#ffc832}
.cert-platinum{background:rgba(0,220,220,.15);color:#00dcdc}

/* Button icons */
.btn-icon{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;opacity:.6;transition:opacity .15s}
.btn-icon:hover{opacity:1}
.btn-danger{color:#ff5555!important;border-color:rgba(255,50,50,.2)!important}
.btn-xs{font-size:10px;padding:3px 8px}

/* Training cards */
.tm-training-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.tm-train-card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px;transition:border-color .15s}
.tm-train-card:hover{border-color:rgba(0,184,169,.3)}
.tm-train-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.tm-train-name{font-size:13px;font-weight:700;color:var(--text-1)}
.tm-train-status{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.st-planned{background:rgba(100,100,200,.12);color:#8888cc}
.st-active{background:rgba(0,184,169,.12);color:var(--accent)}
.st-done{background:rgba(50,200,50,.12);color:#44cc44}
.tm-train-meta{display:flex;gap:12px;font-size:11px;color:var(--text-3);margin-bottom:8px;flex-wrap:wrap}
.tm-train-actions{display:flex;gap:6px}
.tm-train-attendees{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.tm-att-tag{font-size:10px;background:rgba(0,184,169,.08);border:1px solid rgba(0,184,169,.15);color:var(--text-2);padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:4px}
.tm-att-rm{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:12px;padding:0 2px}
.tm-att-rm:hover{color:#ff5555}

/* Assessment table */
.tm-assess-tbl th{font-size:9px;max-width:70px;overflow:hidden;text-overflow:ellipsis}
.tm-sc-good{color:var(--accent);font-weight:600}
.tm-sc-mid{color:#ccbb33;font-weight:600}
.tm-sc-low{color:#ff5555;font-weight:600}

/* Reference cards */
.tm-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.tm-ref-card{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;padding:10px 12px;font-size:11px;color:var(--text-2);line-height:1.4}
.tm-ref-card strong{color:var(--text-1);font-size:12px;display:block;margin-bottom:3px}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;background:var(--surface-1);border:1px dashed var(--border);border-radius:8px}

/* ═══════════════════════════════════════════════════════════
   STAFF DIRECTORY PAGE
   ═══════════════════════════════════════════════════════════ */

/* Stats row */
.sd-stats-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sd-stat{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px 20px;text-align:center;min-width:110px;flex:1}
.sd-stat.accent{border-color:var(--accent);background:rgba(0,184,169,.06)}
.sd-stat-val{font-size:26px;font-weight:700;color:var(--text-1);font-family:'Rajdhani',sans-serif}
.sd-stat-lbl{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Department bar */
.sd-dept-bar{display:flex;gap:2px;height:28px;margin-bottom:16px;border-radius:6px;overflow:hidden}
.sd-dept-seg{display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(0,184,169,.1);border-right:1px solid var(--bg);font-size:10px;color:var(--text-2);transition:all .15s;cursor:default;min-width:28px}
.sd-dept-seg:nth-child(2n){background:rgba(100,140,200,.1)}
.sd-dept-seg:nth-child(3n){background:rgba(200,160,60,.1)}
.sd-dept-seg:nth-child(5n){background:rgba(160,100,200,.1)}
.sd-dept-seg:hover{filter:brightness(1.3)}
.sd-dept-seg-icon{font-size:12px}
.sd-dept-seg-lbl{font-size:9px;font-weight:600;white-space:nowrap}

/* Toolbar */
.sd-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sd-search{background:var(--surface-1);border:1px solid var(--border);color:var(--text-1);font-size:12px;padding:7px 12px;border-radius:6px;width:220px;font-family:var(--font);outline:none;transition:border-color .15s}
.sd-search:focus{border-color:var(--accent)}
.sd-filter{background:var(--surface-1);border:1px solid var(--border);color:var(--text-1);font-size:12px;padding:7px 10px;border-radius:6px;font-family:var(--font);cursor:pointer}

/* Table */
.sd-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}
.sd-tbl th{text-align:left;color:var(--text-3);font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface-1)}
.sd-tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-2);vertical-align:middle}
.sd-tbl tbody tr:hover{background:rgba(0,184,169,.03)}
.sd-tbl .ar{font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;font-size:11px;color:var(--text-3)}
.sd-email a{color:var(--accent);text-decoration:none;font-size:11px}
.sd-email a:hover{text-decoration:underline}
.sd-actions{white-space:nowrap}

/* Status badge */
.sd-status{font-size:10px;font-weight:600;padding:3px 9px;border-radius:4px;white-space:nowrap;display:inline-block}

/* Section title */
.sd-section-title{font-size:14px;font-weight:700;color:var(--text-1);margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--border)}

/* Department cards */
.sd-dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:20px}
.sd-dept-card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px;transition:border-color .15s}
.sd-dept-card:hover{border-color:rgba(0,184,169,.25)}
.sd-dept-card-head{font-size:13px;font-weight:700;color:var(--text-1);display:flex;justify-content:space-between;align-items:center}
.sd-dept-card-count{background:rgba(0,184,169,.12);color:var(--accent);font-size:14px;font-weight:700;padding:2px 10px;border-radius:10px;font-family:'Rajdhani',sans-serif}
.sd-dept-card-ar{font-size:11px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;margin:2px 0 8px}
.sd-dept-card-grades{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.sd-grade-tag{font-size:9px;background:rgba(100,140,200,.1);color:var(--text-2);padding:2px 7px;border-radius:3px;font-weight:600}
.sd-dept-card-names{display:flex;flex-wrap:wrap;gap:4px}
.sd-name-tag{font-size:10px;background:var(--surface-2);color:var(--text-2);padding:2px 8px;border-radius:10px}
.sd-name-more{font-size:10px;color:var(--text-3);font-style:italic;padding:2px 4px}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS HUB PAGE
   ═══════════════════════════════════════════════════════════ */

.cl-cat-section{margin-bottom:24px}
.cl-cat-title{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

.cl-card{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:16px;transition:all .15s;position:relative}
.cl-card:hover{border-color:rgba(0,184,169,.3);transform:translateY(-1px)}
.cl-card.cl-no-url{opacity:.7;border-style:dashed}
.cl-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.cl-icon{font-size:28px;line-height:1}
.cl-card-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.cl-card:hover .cl-card-actions{opacity:1}
.cl-name{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:2px}
.cl-name-ar{font-size:12px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;margin-bottom:6px}
.cl-desc{font-size:11px;color:var(--text-3);line-height:1.4;margin-bottom:10px}
.cl-link{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;padding:5px 14px;border:1px solid rgba(0,184,169,.25);border-radius:6px;transition:all .15s}
.cl-link:hover{background:rgba(0,184,169,.1);border-color:var(--accent)}
.cl-no-link{font-size:11px;color:var(--text-3);font-style:italic;margin-top:6px}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS / EXTERNAL TOOL LINKS
   ═══════════════════════════════════════════════════════════ */

.cl-section-title{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:8px;display:flex;align-items:center}
.cl-hint{font-size:12px;color:var(--text-3);margin:0 0 14px;line-height:1.5}

/* Blueprint grid */
.cl-blueprint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:20px}
.cl-bp-card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px;display:flex;gap:12px;align-items:flex-start;transition:all .15s}
.cl-bp-card:hover{border-color:rgba(0,184,169,.2)}
.cl-bp-card.linked{border-color:rgba(0,184,169,.35);background:rgba(0,184,169,.03)}
.cl-bp-icon{font-size:26px;line-height:1;flex-shrink:0;width:36px;text-align:center}
.cl-bp-body{flex:1;min-width:0}
.cl-bp-name{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:1px}
.cl-bp-name-ar{font-size:11px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;margin-bottom:6px}
.cl-bp-link{font-size:11px;color:var(--accent);text-decoration:none;font-weight:600;display:inline-block;padding:3px 0;transition:opacity .15s}
.cl-bp-link:hover{opacity:.8;text-decoration:underline}

/* Custom links grid */
.cl-custom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.cl-custom-card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px;transition:border-color .15s}
.cl-custom-card:hover{border-color:rgba(0,184,169,.2)}
.cl-custom-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.cl-custom-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.cl-custom-name{font-size:13px;font-weight:700;color:var(--text-1)}
.cl-custom-ar{font-size:11px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl}
.cl-cat-tag{font-size:9px;font-weight:600;background:rgba(0,184,169,.08);color:var(--accent);padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.cl-custom-desc{font-size:11px;color:var(--text-2);line-height:1.4;margin-bottom:8px;padding-left:40px}
.cl-custom-foot{display:flex;justify-content:space-between;align-items:center;padding-left:40px}
.cl-custom-url{font-size:10px;color:var(--text-3);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;display:inline-block}
.cl-custom-url:hover{color:var(--accent)}
.cl-custom-actions{display:flex;gap:4px}

/* Summary bar */
.cl-summary{display:flex;gap:20px;margin-top:20px;padding:10px 14px;background:var(--surface-1);border:1px solid var(--border);border-radius:6px;font-size:11px;color:var(--text-3)}

/* Components hub additions */
.cl-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.cl-cat-ar{font-size:11px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;margin-left:8px}
.cl-cat-count{font-size:11px;background:rgba(0,184,169,.1);color:var(--accent);padding:1px 8px;border-radius:10px;margin-left:8px;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   KPI TRACKING PAGE
   ═══════════════════════════════════════════════════════════ */

.kt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.kt-card{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:16px;transition:border-color .15s}
.kt-card:hover{border-color:rgba(0,184,169,.25)}
.kt-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.kt-card-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.kt-card:hover .kt-card-actions{opacity:1}
.kt-name{font-size:13px;font-weight:700;color:var(--text-1)}
.kt-name-ar{font-size:11px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl;margin-bottom:4px}
.kt-meta{display:flex;gap:10px;font-size:10px;color:var(--text-3);margin-bottom:10px;flex-wrap:wrap}

/* Progress bar */
.kt-progress{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.kt-bar-bg{flex:1;height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.kt-bar-fill{height:100%;border-radius:5px;transition:width .4s ease}
.kt-bar-fill.kt-good{background:linear-gradient(90deg,rgba(0,184,169,.5),rgba(0,184,169,.8))}
.kt-bar-fill.kt-warn{background:linear-gradient(90deg,rgba(255,160,50,.4),rgba(255,160,50,.7))}
.kt-bar-fill.kt-bad{background:linear-gradient(90deg,rgba(255,60,60,.4),rgba(255,60,60,.7))}
.kt-pct{font-size:13px;font-weight:700;font-family:'Rajdhani',sans-serif;min-width:40px;text-align:right}
.kt-good{color:#00b8a9}
.kt-warn{color:#ffa032}
.kt-bad{color:#ff5555}
.kt-nodata{color:var(--text-3)}

/* Targets row */
.kt-targets{display:flex;gap:12px;font-size:11px;color:var(--text-3);margin-bottom:8px;flex-wrap:wrap}
.kt-targets strong{font-family:'Rajdhani',sans-serif;font-size:14px}

/* Actuals history */
.kt-history{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.kt-hist-pt{display:inline-flex;flex-direction:column;align-items:center;background:var(--surface-2);border-radius:4px;padding:3px 7px;font-size:9px;line-height:1.3}
.kt-hist-per{color:var(--text-3);font-weight:600}
.kt-hist-val{color:var(--accent);font-weight:700;font-family:'Rajdhani',sans-serif;font-size:12px}
.kt-hist-more{font-size:9px;color:var(--text-3);font-style:italic;align-self:center;padding:0 4px}

/* Formula */
.kt-formula{font-size:10px;color:var(--text-3);font-family:'Share Tech Mono',monospace;background:var(--surface-2);padding:4px 8px;border-radius:4px;margin-top:4px;word-break:break-word}

/* Collapsible nav section */
.nav-section-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:color .15s}
.nav-section-toggle:hover{color:var(--accent)}
.nav-section-arrow{font-size:10px;transition:transform .15s}
.nav-group .nav-item{padding-left:28px;font-size:12px}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS — Inline Form, Icon Picker, Quick Add
   ═══════════════════════════════════════════════════════════ */

/* Active toolbar button */
.btn-active{background:rgba(0,184,169,.18)!important;border-color:var(--accent)!important;color:var(--accent)!important}

/* Form wrap */
.cl-form-wrap{background:var(--surface-1);border:1px solid var(--accent);border-radius:10px;padding:18px;margin-bottom:16px}
.cl-form-title{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:12px}
.cl-form-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.cl-form-row label{min-width:60px;font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;padding-top:8px;letter-spacing:.4px}
.cl-input{background:var(--surface-2);border:1px solid var(--border);color:var(--text-1);font-size:13px;padding:7px 12px;border-radius:6px;font-family:var(--font);outline:none;flex:1;transition:border-color .15s}
.cl-input:focus{border-color:var(--accent)}
.cl-input-ar{font-family:'Noto Kufi Arabic',sans-serif;text-align:right}
.cl-form-actions{display:flex;gap:8px;margin-top:4px;padding-top:8px;border-top:1px solid var(--border)}

/* Icon picker */
.cl-icon-area{display:flex;flex-direction:column;gap:6px}
.cl-icon-preview{width:48px;height:48px;font-size:28px;background:var(--surface-2);border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.cl-icon-preview:hover{border-color:var(--accent);transform:scale(1.05)}
.cl-icon-grid{display:flex;flex-wrap:wrap;gap:4px;max-width:360px;padding:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px}
.cl-icon-btn{width:36px;height:36px;font-size:18px;background:none;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center}
.cl-icon-btn:hover{background:rgba(0,184,169,.1);border-color:rgba(0,184,169,.3);transform:scale(1.1)}
.cl-icon-btn.active{border-color:var(--accent);background:rgba(0,184,169,.15)}
.cl-icon-custom{width:80px;padding:4px 8px;font-size:16px;background:var(--surface-1);border:1px solid var(--border);border-radius:4px;color:var(--text-1);text-align:center;margin-left:4px}

/* Category pills */
.cl-cat-pills{display:flex;flex-wrap:wrap;gap:5px}
.cl-cat-pill{font-size:11px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .12s;font-family:var(--font)}
.cl-cat-pill:hover{border-color:rgba(0,184,169,.3);background:rgba(0,184,169,.05)}
.cl-cat-pill.active{border-color:var(--accent);background:rgba(0,184,169,.15);color:var(--accent);font-weight:600}

/* Category editor */
.cl-cat-editor{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px}
.cl-cat-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.cl-cat-input{background:var(--surface-2);border:1px solid var(--border);color:var(--text-1);font-size:12px;padding:5px 8px;border-radius:4px;font-family:var(--font);outline:none;flex:1;min-width:0}
.cl-cat-input:focus{border-color:var(--accent)}
.cl-cat-icon-input{width:40px;text-align:center;font-size:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:4px;color:var(--text-1)}

/* Card link row */
.cl-link-row{display:flex;align-items:center;gap:6px}
.cl-link-edit{background:none;border:none;cursor:pointer;font-size:12px;opacity:.4;transition:opacity .15s;padding:2px}
.cl-link-edit:hover{opacity:1}
.cl-set-url{display:block;width:100%;padding:8px;font-size:12px;background:rgba(0,184,169,.04);border:1px dashed rgba(0,184,169,.2);border-radius:6px;color:var(--accent);cursor:pointer;font-family:var(--font);text-align:center;transition:all .15s;margin-top:6px}
.cl-set-url:hover{background:rgba(0,184,169,.1);border-color:var(--accent)}

/* Quick Add panel */
.cl-quick-panel{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px}
.cl-quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.cl-quick-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;font-family:var(--font);text-align:center;position:relative}
.cl-quick-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(0,184,169,.08);transform:translateY(-1px)}
.cl-quick-btn.added{opacity:.45;cursor:default;border-style:solid}
.cl-quick-icon{font-size:24px;line-height:1}
.cl-quick-name{font-size:11px;font-weight:600;color:var(--text-1)}
.cl-quick-ar{font-size:10px;color:var(--text-3);font-family:'Noto Kufi Arabic',sans-serif;direction:rtl}
.cl-quick-check{position:absolute;top:4px;right:6px;font-size:11px;color:var(--accent);font-weight:700}

/* ═══════════════════════════════════════════════════════════
   PAGE SETTINGS
   ═══════════════════════════════════════════════════════════ */

.ps-help{font-size:11px;color:var(--text-3);margin-bottom:12px;font-style:italic}

.ps-list{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}

.ps-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-1);border:1px solid var(--border);border-radius:6px;transition:all .12s}
.ps-item:hover{border-color:rgba(0,184,169,.25)}
.ps-type-section{border-left:3px solid var(--accent)}
.ps-type-group{border-left:3px solid #ffa032}
.ps-grouped{margin-left:24px;border-left:3px solid rgba(0,184,169,.2)}
.ps-hidden{opacity:.4}

.ps-arrows{display:flex;flex-direction:column;gap:1px}
.ps-arrow{width:22px;height:16px;font-size:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:3px;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center;transition:all .1s;padding:0;line-height:1}
.ps-arrow:hover:not(:disabled){background:rgba(0,184,169,.15);border-color:var(--accent);color:var(--accent)}
.ps-arrow:disabled{opacity:.2;cursor:default}

.ps-body{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.ps-type-tag{font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(0,184,169,.1);color:var(--accent);letter-spacing:.5px;white-space:nowrap}
.ps-tag-group{background:rgba(255,160,50,.12);color:#ffa032}
.ps-page-icon{font-size:16px;min-width:20px;text-align:center}
.ps-label-input{background:transparent;border:1px solid transparent;color:var(--text-1);font-size:13px;font-weight:600;padding:3px 6px;border-radius:4px;font-family:var(--font);outline:none;flex:1;min-width:0;transition:border-color .15s}
.ps-label-input:hover{border-color:var(--border)}
.ps-label-input:focus{border-color:var(--accent);background:var(--surface-2)}
.ps-page-id{font-size:9px;color:var(--text-3);font-family:'Share Tech Mono',monospace;background:var(--surface-2);padding:2px 6px;border-radius:3px;white-space:nowrap}

.ps-group-sel{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:10px;padding:3px 6px;border-radius:4px;font-family:var(--font);cursor:pointer;max-width:130px}

.ps-vis-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:2px 4px;opacity:.7;transition:opacity .12s}
.ps-vis-btn:hover{opacity:1}
.ps-vis-off{opacity:.3}

/* Preview */
.ps-preview-title{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.ps-preview{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:12px;max-width:240px}
.ps-pv-section{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.8px;padding:6px 8px 3px;margin-top:4px}
.ps-pv-group{color:#ffa032}
.ps-pv-group-items{margin-left:8px}
.ps-pv-item{font-size:12px;color:var(--text-2);padding:4px 8px;border-radius:4px;transition:background .1s}
.ps-pv-indent{padding-left:20px;font-size:11px}
.ps-pv-active{background:rgba(0,184,169,.12);color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   DUAL-AI BUILDER STYLES
   ═══════════════════════════════════════════════════════════ */

.builder-mode-toggle {
  display:flex; gap:2px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:8px; padding:3px; margin-bottom:12px; width:fit-content;
}
.bmode-btn {
  display:flex; align-items:center; gap:6px; padding:7px 16px; border:none;
  background:transparent; color:var(--text-3); font-size:12px; font-weight:600;
  border-radius:6px; cursor:pointer; transition:all .2s;
  font-family:var(--font);
}
.bmode-btn:hover:not(:disabled) { color:var(--text-1); background:var(--bg-2); }
.bmode-btn.active { background:var(--bg-3); color:var(--cyan); box-shadow:0 0 8px rgba(0,212,255,.15); }
.bmode-btn:disabled { opacity:.35; cursor:not-allowed; }

.btn-dual {
  background:linear-gradient(135deg, rgba(0,212,255,.15), rgba(0,232,112,.15));
  border:1px solid rgba(0,212,255,.3); color:var(--cyan); font-weight:700;
  padding:8px 18px; border-radius:6px; cursor:pointer; font-size:12px;
  font-family:var(--font); transition:all .2s;
}
.btn-dual:hover:not(:disabled) { border-color:var(--cyan); box-shadow:0 0 16px rgba(0,212,255,.2); }
.btn-dual:disabled { opacity:.5; cursor:not-allowed; }

.dual-info {
  background:linear-gradient(135deg, var(--bg-1), var(--bg-2));
  border:1px solid var(--border-2); border-radius:10px; padding:16px; margin-bottom:14px;
}
.dual-info-header {
  font-size:13px; font-weight:700; color:var(--cyan); margin-bottom:12px;
  font-family:var(--font-display); letter-spacing:.5px;
}
.dual-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:768px) { .dual-info-grid { grid-template-columns:1fr; } }
.dual-info-card {
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:8px;
  border:1px solid var(--border-1); background:var(--bg-1);
}
.dual-info-card.lm { border-color:rgba(0,232,112,.2); }
.dual-info-card.cloud { border-color:rgba(0,212,255,.2); }
.dual-info-icon { font-size:22px; }
.dual-info-title { font-size:12px; font-weight:700; color:var(--text-1); }
.dual-info-desc { font-size:10px; color:var(--text-3); margin-top:2px; }
.dual-info-model { font-size:10px; color:var(--green); margin-top:3px; font-family:var(--mono); }
.dual-info-badge {
  font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px;
  white-space:nowrap; margin-left:auto;
}
.dual-info-badge.ok { color:var(--green); background:var(--green-dim); }
.dual-info-badge.off { color:var(--text-3); background:var(--bg-3); }
.dual-cloud-select {
  background:var(--bg-2); border:1px solid var(--border-1); color:var(--text-1);
  padding:4px 8px; border-radius:4px; font-size:11px; font-family:var(--font);
  margin-top:4px;
}
.dual-info-note {
  font-size:10px; color:var(--text-3); margin-top:10px; padding:8px;
  background:var(--bg-0); border-radius:6px; border:1px solid var(--border-1);
}

/* Progress Panel */
.dual-progress {
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:10px;
  padding:16px; margin-bottom:14px;
  animation:dualPulse 2s ease-in-out infinite;
}
@keyframes dualPulse { 0%,100%{border-color:var(--border-2)} 50%{border-color:rgba(0,212,255,.3)} }
.dual-progress-title {
  font-size:12px; font-weight:700; color:var(--cyan); margin-bottom:12px;
  font-family:var(--font-display);
}
.dual-progress-tracks { display:flex; flex-direction:column; gap:8px; }
.dual-track {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--bg-0); border-radius:6px; border:1px solid var(--border-1);
  transition:all .3s;
}
.dual-track.running { border-color:rgba(0,212,255,.3); background:rgba(0,212,255,.03); }
.dual-track.done { border-color:rgba(0,232,112,.3); }
.dual-track.error { border-color:rgba(255,48,64,.3); }
.dual-track-icon { font-size:14px; width:20px; text-align:center; }
.dual-track-label { font-size:11px; font-weight:600; color:var(--text-1); min-width:80px; }
.dual-track-status { font-size:10px; flex:1; }

/* Dual AI badge on framework cards */
.dual-badge {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  background:linear-gradient(135deg, rgba(0,212,255,.1), rgba(0,232,112,.1));
  border:1px solid rgba(0,212,255,.25); border-radius:4px;
  font-size:10px; font-weight:700; color:var(--cyan); white-space:nowrap;
}

/* Sources info */
.fw-sources {
  display:flex; gap:12px; flex-wrap:wrap; font-size:10px; color:var(--text-3);
  padding:6px 0; border-top:1px solid var(--border-1); margin-top:6px;
}
.fw-src { display:flex; align-items:center; gap:4px; }

/* Phase display */
.fw-phase {
  display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--border-1);
}
.fw-phase:last-child { border-bottom:none; }
.fw-phase-num {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--teal-dim); color:var(--teal);
  font-size:11px; font-weight:700; flex-shrink:0;
}
.fw-comp-deliverables { margin-top:3px; }

/* ═══════════════════════════════════════════════════════════
   BUILDER PAGE — FULL C7-PARITY STYLES
   ═══════════════════════════════════════════════════════════ */

.builder-page { padding:0; }
.builder-header { display:flex; align-items:center; gap:12px; padding:16px 0; }
.builder-section { margin-bottom:18px; }
.builder-custom-input {
  flex:1; background:var(--bg-1); border:1px solid var(--border-1); color:var(--text-1);
  padding:10px 14px; border-radius:8px; font-size:12px; font-family:var(--font);
  resize:vertical; min-height:60px;
}
.builder-custom-input:focus { border-color:var(--cyan); outline:none; }

/* Blueprint Grid */
.bp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.bp-card {
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:10px;
  padding:12px; cursor:pointer; transition:all .2s;
}
.bp-card:hover { border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,212,255,.1); }
.bp-card.built { border-color:rgba(0,232,112,.3); }
.bp-card-top { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.bp-icon { font-size:20px; }
.bp-title { font-size:12px; font-weight:700; color:var(--text-1); }
.bp-title-ar { font-size:11px; color:var(--text-3); direction:rtl; font-family:var(--font-ar); }
.bp-desc { font-size:10px; color:var(--text-3); line-height:1.5; }
.bp-built-badge {
  font-size:10px; font-weight:600; color:var(--green); background:var(--green-dim);
  padding:2px 6px; border-radius:4px; white-space:nowrap;
}

/* Build Mode Bar */
.build-mode-bar {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-bottom:14px; padding:8px 10px; background:var(--bg-1);
  border:1px solid var(--border-1); border-radius:8px;
}
.build-mode-label { font-size:11px; font-weight:600; color:var(--text-2); }
.build-mode-btn {
  padding:4px 10px; border:1px solid var(--border-1); background:transparent;
  color:var(--text-3); font-size:10px; font-weight:600; border-radius:5px;
  cursor:pointer; font-family:var(--font); transition:all .15s;
}
.build-mode-btn:hover { border-color:var(--cyan); color:var(--text-1); }
.build-mode-btn.active { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan); }
.build-mode-info { font-size:10px; color:var(--text-3); margin-left:auto; }

/* Framework Card */
.fw-card {
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:10px;
  margin-bottom:10px; overflow:hidden;
}
.fw-card-header {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  cursor:pointer; transition:background .15s;
}
.fw-card-header:hover { background:var(--bg-2); }
.fw-icon { font-size:18px; }
.fw-title { font-size:13px; font-weight:700; color:var(--text-1); }
.fw-title-ar { font-size:11px; color:var(--text-3); direction:rtl; font-family:var(--font-ar); }
.fw-meta { font-size:10px; color:var(--text-3); white-space:nowrap; }
.fw-toggle { font-size:10px; color:var(--text-3); }
.btn-hdr-export {
  padding:3px 8px; border:1px solid var(--border-1); background:transparent;
  color:var(--text-3); font-size:10px; border-radius:4px; cursor:pointer;
  font-family:var(--font); transition:all .15s;
}
.btn-hdr-export:hover { border-color:var(--cyan); color:var(--cyan); }
.fw-card-body { padding:0 16px 16px; }
.fw-purpose { font-size:12px; color:var(--text-2); padding:8px 0; line-height:1.6; }
.fw-axes { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.fw-axis-tag {
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px;
  background:var(--teal-dim); color:var(--teal);
}

/* Subsections */
.fw-subsection { margin-top:14px; }
.fw-sub-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:8px; }

/* References */
.fw-references { display:flex; flex-direction:column; gap:4px; }
.fw-ref-item {
  display:flex; gap:10px; padding:6px 10px; background:var(--bg-0);
  border:1px solid var(--border-1); border-radius:6px; font-size:11px;
}
.fw-ref-std { font-weight:700; color:var(--teal); min-width:140px; font-family:var(--mono); font-size:10px; }
.fw-ref-rel { color:var(--text-2); flex:1; }

/* Maturity Model */
.fw-maturity { display:flex; flex-direction:column; gap:6px; }
.fw-mat-level { position:relative; }
.fw-mat-bar { height:7px; border-radius:4px; margin-bottom:2px; transition:width .5s; }
.fw-mat-info { display:flex; align-items:center; gap:8px; }
.fw-mat-num { font-size:11px; font-weight:700; color:var(--text-1); min-width:20px; }
.fw-mat-name { font-size:12px; font-weight:600; color:var(--text-1); }
.fw-mat-name-ar { font-size:11px; color:var(--text-3); direction:rtl; font-family:var(--font-ar); }
.fw-mat-desc { font-size:10px; color:var(--text-3); padding-left:28px; margin-bottom:6px; }

/* Components */
.fw-comp {
  background:var(--bg-0); border:1px solid var(--border-1); border-radius:8px;
  padding:12px; margin-bottom:8px;
}
.fw-comp-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.fw-comp-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-comp-name-ar { font-size:11px; color:var(--text-3); margin-left:8px; direction:rtl; font-family:var(--font-ar); }
.fw-comp-badges { display:flex; gap:4px; flex-wrap:wrap; }
.fw-comp-badge {
  font-size:9px; font-weight:600; padding:2px 6px; border-radius:4px;
}
.fw-comp-badge.timeline { background:var(--cyan-dim); color:var(--cyan); }
.fw-comp-badge.axis { background:var(--teal-dim); color:var(--teal); }
.fw-comp-desc { font-size:11px; color:var(--text-2); line-height:1.5; margin-bottom:6px; }
.fw-comp-detail { font-size:11px; color:var(--text-2); margin:3px 0; line-height:1.5; }
.fw-detail-label { font-weight:600; color:var(--text-1); }
.fw-based-on { background:var(--teal-dim); padding:4px 8px; border-radius:4px; border-left:3px solid var(--teal); margin-top:6px; }
.fw-comp-tools { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.fw-tool-chip {
  font-size:10px; padding:2px 8px; background:var(--bg-2); border:1px solid var(--border-1);
  border-radius:4px; color:var(--text-2);
}

/* KPIs */
.fw-kpis { display:flex; flex-direction:column; gap:8px; }
.fw-kpi {
  background:var(--bg-0); border:1px solid var(--border-1); border-radius:8px; padding:10px;
}
.fw-kpi-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fw-kpi-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-kpi-name-ar { font-size:11px; color:var(--text-3); direction:rtl; font-family:var(--font-ar); }
.fw-kpi-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 16px;
  font-size:10px; color:var(--text-2);
}
.fw-kpi-label { font-weight:600; color:var(--text-1); }
.fw-kpi-based-on { font-size:10px; color:var(--teal); margin-top:6px; }
.fw-kpi-targets { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.fw-target {
  font-size:10px; padding:2px 8px; border-radius:4px; background:var(--bg-2);
  border:1px solid var(--border-1); color:var(--text-2);
}
.fw-target.elite { background:rgba(212,168,67,.1); border-color:rgba(212,168,67,.3); color:var(--gold); font-weight:700; }

/* Evidence Checklist */
.fw-evidence { display:flex; flex-direction:column; gap:4px; }
.fw-ev-item {
  display:flex; gap:8px; padding:6px 8px; font-size:11px;
  border-bottom:1px solid var(--border-1);
}
.fw-ev-check { color:var(--text-3); }
.fw-ev-text { color:var(--text-1); font-weight:500; }
.fw-ev-meta { font-size:10px; color:var(--text-3); }

/* Quick Wins */
.fw-qw {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-0); border:1px solid var(--border-1); border-radius:6px;
  margin-bottom:6px;
}
.fw-qw-icon { font-size:14px; }
.fw-qw-action { font-size:11px; font-weight:600; color:var(--text-1); }
.fw-qw-meta { font-size:10px; color:var(--text-3); }

/* AI Expand Button */
.btn-ai-expand {
  padding:4px 10px; border:1px solid var(--border-1); background:var(--bg-2);
  color:var(--text-2); font-size:10px; font-weight:600; border-radius:5px;
  cursor:pointer; font-family:var(--font); transition:all .15s; white-space:nowrap;
}
.btn-ai-expand:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan); }
.btn-ai-expand.loading { color:var(--amber); border-color:var(--amber); animation:pulse 1s infinite; }
.btn-ai-expand.done { color:var(--green); border-color:var(--green); }

/* AI Guide Panel */
.ai-guide-panel {
  background:var(--bg-0); border:1px solid var(--border-2); border-radius:8px;
  margin:6px 0 10px; overflow:hidden;
}
.ai-guide-panel.roadmap { margin-top:8px; }
.ai-guide-header {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  cursor:pointer; font-size:11px; font-weight:600; color:var(--teal);
  border-bottom:1px solid var(--border-1); transition:background .15s;
}
.ai-guide-header:hover { background:var(--bg-1); }
.ai-guide-toggle { font-size:10px; color:var(--text-3); }
.ai-guide-body {
  padding:14px 16px; font-size:12px; color:var(--text-2); line-height:1.8;
  max-height:600px; overflow-y:auto;
}
.ai-guide-body table { width:100%; border-collapse:collapse; margin:8px 0; }
.ai-guide-body td { border:1px solid var(--border-1); padding:4px 8px; font-size:11px; }
.ai-provider-badge {
  font-size:9px; padding:2px 6px; background:var(--bg-2); border-radius:4px;
  color:var(--text-3);
}

/* Validation */
.validation-badge {
  font-size:9px; font-weight:600; padding:2px 6px; border-radius:4px;
}
.validation-badge.pass { background:var(--green-dim); color:var(--green); }
.validation-badge.partial { background:rgba(212,168,67,.1); color:var(--gold); }
.validation-badge.fail { background:rgba(255,48,64,.1); color:var(--red); }
.btn-validate {
  padding:3px 8px; border:1px solid var(--border-1); background:transparent;
  color:var(--text-3); font-size:10px; border-radius:4px; cursor:pointer;
  font-family:var(--font); transition:all .15s;
}
.btn-validate:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.btn-validate.loading { color:var(--amber); }
.btn-export-md {
  padding:3px 8px; border:1px solid var(--border-1); background:transparent;
  color:var(--text-3); font-size:10px; border-radius:4px; cursor:pointer;
  font-family:var(--font);
}
.btn-export-md:hover { border-color:var(--cyan); color:var(--cyan); }
.validation-panel {
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:8px;
  padding:10px 14px; margin-top:12px; font-size:11px;
}
.val-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:600; }
.val-score { font-size:14px; font-weight:700; }
.val-items { line-height:1.7; }
.val-pass { color:var(--green); }
.val-gap { color:var(--red); }

/* Roadmap */
.fw-roadmap { display:flex; flex-direction:column; gap:8px; }
.fw-phase {
  background:var(--bg-0); border:1px solid var(--border-1); border-radius:8px;
  padding:12px; border-left:3px solid var(--teal);
}
.fw-phase-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.fw-phase-name { font-size:12px; font-weight:700; color:var(--text-1); }
.fw-phase-dur { font-size:10px; color:var(--text-3); }
.fw-phase-list { margin-top:6px; }
.fw-phase-label { font-size:10px; font-weight:600; color:var(--text-1); display:block; margin-bottom:3px; }
.fw-phase-item { font-size:10px; color:var(--text-2); padding:1px 0 1px 10px; }
.fw-phase-item.del { color:var(--teal); }

/* Actions */
.fw-actions {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border-1);
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ═══════════════════════════════════════════════════════════
   PIPELINE EXPLANATION PANEL
   ═══════════════════════════════════════════════════════════ */
.pipeline-explain {
  background:linear-gradient(135deg, var(--bg-1), var(--bg-2));
  border:1px solid rgba(0,212,255,.2); border-radius:10px;
  padding:16px; margin-bottom:14px;
}
.pipeline-explain-title {
  font-size:13px; font-weight:700; color:var(--cyan);
  margin-bottom:14px; font-family:var(--font-display); letter-spacing:.3px;
}
.pipeline-steps {
  display:flex; align-items:stretch; gap:0;
}
@media(max-width:768px) { .pipeline-steps { flex-direction:column; } .pipeline-arrow { transform:rotate(90deg); } }
.pipeline-step {
  flex:1; display:flex; gap:10px; padding:14px; background:var(--bg-0);
  border:1px solid var(--border-1); border-radius:8px;
}
.pipeline-step-num {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--cyan-dim); color:var(--cyan);
  font-size:12px; font-weight:700; flex-shrink:0;
}
.pipeline-step-body { display:flex; gap:10px; flex:1; }
.pipeline-step-icon { font-size:22px; flex-shrink:0; }
.pipeline-step-title { font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.pipeline-step-desc { font-size:10px; color:var(--text-3); line-height:1.5; margin-bottom:6px; }
.pipeline-step-status { font-size:10px; font-weight:600; font-family:var(--mono); }
.pipeline-step-status.ok { color:var(--green); }
.pipeline-step-status.off { color:var(--red); }
.pipeline-arrow {
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--cyan); font-weight:700; padding:0 10px; flex-shrink:0;
}
.pipeline-setup-hint {
  margin-top:10px; padding:8px 12px; background:rgba(255,48,64,.05);
  border:1px solid rgba(255,48,64,.2); border-radius:6px;
  font-size:11px; color:var(--red);
}
.pipeline-setup-hint a { color:var(--cyan); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════
   BUILD MODE MODAL
   ═══════════════════════════════════════════════════════════ */
.bm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9000;
  display:flex; align-items:center; justify-content:center;
  animation:bmFadeIn .15s ease;
}
@keyframes bmFadeIn { from{opacity:0} to{opacity:1} }
.bm-dialog {
  background:var(--bg-0); border:1px solid var(--border-2); border-radius:14px;
  width:520px; max-width:92vw; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4); animation:bmSlideUp .2s ease;
}
@keyframes bmSlideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.bm-header {
  display:flex; align-items:center; gap:12px; padding:18px 20px 12px;
  border-bottom:1px solid var(--border-1);
}
.bm-header-icon { font-size:26px; }
.bm-header-title { font-size:15px; font-weight:700; color:var(--text-1); }
.bm-header-ar { font-size:12px; color:var(--text-3); direction:rtl; font-family:var(--font-ar); }
.bm-close {
  margin-left:auto; background:none; border:none; color:var(--text-3);
  font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.bm-close:hover { background:var(--bg-2); color:var(--text-1); }
.bm-subtitle {
  padding:14px 20px 8px; font-size:12px; color:var(--text-2); font-weight:600;
}

/* Options */
.bm-option {
  display:flex; align-items:center; gap:14px; margin:6px 14px;
  padding:14px 16px; border:1px solid var(--border-1); border-radius:10px;
  cursor:pointer; transition:all .2s; background:var(--bg-1);
}
.bm-option:hover:not(.disabled) {
  border-color:var(--cyan); background:var(--bg-2);
  box-shadow:0 0 0 1px var(--cyan), 0 4px 16px rgba(0,212,255,.08);
  transform:translateX(4px);
}
.bm-option.dual:hover:not(.disabled) {
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal), 0 4px 16px rgba(0,232,112,.1);
}
.bm-option.disabled {
  opacity:.45; cursor:not-allowed;
}
.bm-opt-icon { font-size:28px; flex-shrink:0; }
.bm-opt-body { flex:1; min-width:0; }
.bm-opt-title { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.bm-opt-tag {
  font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px;
  letter-spacing:.5px; text-transform:uppercase;
}
.bm-opt-tag.local { background:rgba(0,232,112,.1); color:var(--green); }
.bm-opt-tag.cloud { background:var(--cyan-dim); color:var(--cyan); }
.bm-opt-tag.dual {
  background:linear-gradient(135deg, rgba(0,232,112,.15), rgba(0,212,255,.15));
  color:var(--teal);
}
.bm-opt-desc { font-size:11px; color:var(--text-3); line-height:1.5; margin-bottom:4px; }
.bm-opt-status { font-size:10px; font-weight:600; font-family:var(--mono); }
.bm-opt-status.ok { color:var(--green); }
.bm-opt-status.off { color:var(--red); }
.bm-opt-status a { color:var(--cyan); text-decoration:underline; }
.bm-opt-arrow {
  font-size:16px; color:var(--cyan); font-weight:700; flex-shrink:0; opacity:.5;
}
.bm-option:hover:not(.disabled) .bm-opt-arrow { opacity:1; }

/* Pipeline flow inside dual option */
.bm-opt-pipeline-flow {
  display:flex; align-items:center; gap:8px; margin:6px 0 4px;
  padding:6px 10px; background:var(--bg-0); border-radius:6px;
  border:1px solid var(--border-1);
}
.bm-pf-step {
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px;
}
.bm-pf-step.ok { color:var(--green); background:rgba(0,232,112,.08); }
.bm-pf-step.off { color:var(--red); background:rgba(255,48,64,.08); }
.bm-pf-arrow { color:var(--cyan); font-weight:700; font-size:12px; }

/* Footer */
.bm-footer {
  display:flex; justify-content:flex-end; padding:12px 20px 16px;
  border-top:1px solid var(--border-1); margin-top:8px;
}

/* Build status bar (always visible on builder page) */
.build-status-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:8px;
}
.build-status-label { font-size:11px; font-weight:600; color:var(--text-2); }
.build-status-item {
  font-size:10px; font-weight:600; padding:3px 8px; border-radius:5px;
  font-family:var(--mono);
}
.build-status-item.ok { color:var(--green); background:rgba(0,232,112,.08); }
.build-status-item.off { color:var(--text-3); background:var(--bg-2); }

/* ═══════════════════════════════════════════════════════════
   COMPONENT TOOLKITS
   ═══════════════════════════════════════════════════════════ */

/* ── Framework Selector ── */
.tk-fw-selector { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tk-fw-btn {
  padding:6px 14px; font-size:11px; font-weight:600; border-radius:6px;
  background:var(--bg-1); border:1px solid var(--border-1); color:var(--text-2);
  cursor:pointer; transition:all .15s;
}
.tk-fw-btn:hover { border-color:var(--border-2); color:var(--text-1); }
.tk-fw-btn.active { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan); }
.tk-fw-title { font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:14px; }

/* ── Component Grid ── */
.tk-comp-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:8px; margin-bottom:16px;
}
.tk-comp-card {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:8px;
  cursor:pointer; transition:all .2s; position:relative;
}
.tk-comp-card:hover { border-color:var(--border-2); background:var(--bg-2); }
.tk-comp-card.active { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 4px 20px rgba(0,212,255,.08); background:var(--cyan-dim); }
.tk-comp-icon { font-size:22px; flex-shrink:0; }
.tk-comp-info { flex:1; min-width:0; }
.tk-comp-name { font-size:12px; font-weight:700; color:var(--text-1); line-height:1.3; }
.tk-comp-ar { font-size:10px; color:var(--text-3); font-family:var(--font-ar); margin-top:1px; }
.tk-comp-type { font-size:9px; color:var(--teal); font-weight:600; margin-top:3px; }
.tk-comp-badge {
  position:absolute; top:6px; right:8px; font-size:9px; font-weight:700;
  background:var(--cyan-dim); color:var(--cyan); padding:2px 6px; border-radius:8px;
  font-family:var(--mono);
}

/* ── Workspace ── */
.tk-workspace {
  border:1px solid var(--border-1); border-radius:10px; background:var(--bg-1);
  padding:16px; margin-top:4px;
}
.tk-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tk-header-icon { font-size:28px; }
.tk-header-title { font-size:15px; font-weight:700; color:var(--text-1); }
.tk-header-ar { font-size:12px; color:var(--text-3); font-family:var(--font-ar); }
.tk-header-type { font-size:10px; color:var(--teal); font-weight:600; margin-top:2px; }
.tk-desc { font-size:11px; color:var(--text-2); line-height:1.6; margin-bottom:14px; padding:8px 10px; background:var(--bg-2); border-radius:6px; }

/* ── Add Bar ── */
.tk-add-bar {
  display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; align-items:center;
  padding:10px; background:var(--bg-0); border:1px dashed var(--border-2); border-radius:8px;
}
.tk-input {
  font-size:11px; padding:6px 10px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:5px; color:var(--text-1); outline:none; transition:border-color .15s;
}
.tk-input:focus { border-color:var(--cyan); }
.tk-input.flex { flex:1; min-width:120px; }
.tk-input.sm { font-size:10px; padding:4px 8px; }
.tk-add-bar select {
  font-size:11px; padding:5px 8px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:5px; color:var(--text-1);
}
.tk-empty {
  padding:24px; text-align:center; color:var(--text-3); font-size:12px;
  background:var(--bg-0); border:1px dashed var(--border-1); border-radius:8px; margin-top:8px;
}

/* ── Cards ── */
.tk-card {
  border:1px solid var(--border-1); border-radius:8px; margin-bottom:10px;
  background:var(--bg-0); overflow:hidden;
}
.tk-card-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--bg-2); border-bottom:1px solid var(--border-1); flex-wrap:wrap;
}
.tk-card-title { font-size:13px; font-weight:700; color:var(--text-1); flex:1; min-width:0; }
.tk-tag {
  font-size:9px; font-weight:600; padding:2px 7px; border-radius:4px;
  background:var(--bg-3); color:var(--text-3); white-space:nowrap;
}
.tk-tag.date { color:var(--gold); background:rgba(201,162,39,.08); }
.tk-tag.count { color:var(--cyan); background:var(--cyan-dim); }
.tk-tag.green { color:var(--green); background:rgba(0,232,143,.08); }

/* ── Sub-sections inside cards ── */
.tk-sub { padding:10px 14px; border-top:1px solid var(--border-1); }
.tk-sub.compact { padding:6px 14px; }
.tk-sub-header {
  font-size:10px; font-weight:700; color:var(--text-3); margin-bottom:6px;
  letter-spacing:.3px; text-transform:uppercase;
}
.tk-list-item {
  display:flex; align-items:center; gap:8px; padding:4px 0; font-size:11px;
  color:var(--text-2); border-bottom:1px solid rgba(255,255,255,.03);
}
.tk-list-item.compact { padding:3px 0; font-size:10px; }
.tk-list-item:last-of-type { border-bottom:none; }
.tk-time { font-size:10px; color:var(--gold); font-family:var(--mono); min-width:70px; white-space:nowrap; }
.tk-topic { flex:1; }
.tk-name { font-weight:600; color:var(--text-1); min-width:80px; }
.tk-dept { font-size:10px; color:var(--text-3); min-width:80px; }
.tk-done { text-decoration:line-through; opacity:.5; }
.tk-inline-add {
  display:flex; gap:4px; margin-top:6px; align-items:center;
}
.tk-inline-add.compact { margin-top:4px; }
.tk-select-sm {
  font-size:9px; padding:2px 4px; background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:3px; color:var(--text-2);
}
.tk-area {
  width:100%; min-height:60px; padding:8px 10px; font-size:11px; line-height:1.5;
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:5px;
  color:var(--text-2); resize:vertical; margin-top:4px;
}
.tk-area.sm { min-height:36px; font-size:10px; }
.tk-stats-mini {
  font-size:11px; color:var(--text-2); margin-bottom:12px; padding:8px 12px;
  background:var(--bg-2); border-radius:6px; font-weight:600;
}

/* ── Scenario Cards ── */
.tk-scenario-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:10px; }
.tk-scenario-card {
  border:1px solid var(--border-1); border-radius:8px; padding:12px;
  background:var(--bg-0);
}
.tk-scenario-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tk-scenario-name { font-size:13px; font-weight:700; color:var(--text-1); flex:1; }
.tk-scenario-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.tk-scenario-fields label { display:block; font-size:9px; font-weight:700; color:var(--text-3); margin-bottom:3px; text-transform:uppercase; letter-spacing:.3px; }
.tk-driver-type { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:10px; font-weight:700; flex-shrink:0; }
.tk-driver-type.uncertainty { background:rgba(255,184,48,.12); color:var(--amber); }
.tk-driver-type.certainty { background:rgba(0,232,143,.1); color:var(--green); }

/* ── STEEP/PESTLE Trends ── */
.tk-cat-section { margin-bottom:14px; }
.tk-cat-title {
  font-size:12px; font-weight:700; color:var(--text-1); margin-bottom:8px;
  padding:6px 10px; display:flex; align-items:center; gap:6px;
}
.tk-cat-count { font-size:9px; color:var(--text-3); font-weight:500; }
.tk-trend-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:8px; }
.tk-trend-card {
  padding:10px 12px; background:var(--bg-0); border:1px solid var(--border-1);
  border-radius:6px;
}
.tk-trend-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.tk-trend-name { flex:1; font-size:12px; font-weight:600; color:var(--text-1); }
.tk-trend-meta { display:flex; gap:6px; margin-bottom:6px; }

/* ── Champion Network ── */
.tk-champion-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:10px; }
.tk-champion-card {
  border:1px solid var(--border-1); border-radius:8px; background:var(--bg-0); overflow:hidden;
}
.tk-champion-header {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--bg-2); border-bottom:1px solid var(--border-1);
}
.tk-champion-level { font-size:22px; }
.tk-champion-info { flex:1; }
.tk-champion-name { font-size:12px; font-weight:700; color:var(--text-1); }
.tk-champion-dept { font-size:10px; color:var(--text-3); }
.tk-champion-expert { font-size:11px; color:var(--text-2); padding:8px 12px; }

/* ── Maturity Assessment ── */
.tk-assess-summary {
  display:flex; align-items:center; gap:16px; padding:16px;
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:10px;
  margin-bottom:16px; flex-wrap:wrap;
}
.tk-assess-score {
  font-size:36px; font-weight:800; font-family:var(--font-display); line-height:1;
}
.tk-assess-score span { font-size:16px; opacity:.4; }
.tk-assess-grade {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:18px; font-weight:800; color:#fff;
  font-family:var(--font-display);
}
.tk-assess-bar { flex:1; min-width:120px; height:8px; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.tk-assess-fill { height:100%; border-radius:4px; transition:width .5s; }
.tk-assess-pct { font-size:10px; color:var(--text-3); font-family:var(--mono); white-space:nowrap; }

.tk-assess-dims { display:flex; flex-direction:column; gap:10px; }
.tk-assess-dim {
  padding:12px; background:var(--bg-0); border:1px solid var(--border-1); border-radius:8px;
}
.tk-assess-dim-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tk-assess-dim-name { font-size:12px; font-weight:700; color:var(--text-1); flex:1; }
.tk-assess-dim-ar { font-size:10px; color:var(--text-3); font-family:var(--font-ar); }
.tk-assess-dim-score { font-size:12px; font-weight:700; font-family:var(--mono); }
.tk-assess-score-bar { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.tk-score-btn {
  width:28px; height:28px; border-radius:5px; border:1px solid var(--border-2);
  background:var(--bg-2); color:var(--text-3); font-size:11px; font-weight:700;
  cursor:pointer; transition:all .15s;
}
.tk-score-btn:hover { border-color:var(--cyan); }
.tk-score-btn.filled { color:#fff; border-color:transparent; }
.tk-score-labels { font-size:8px; color:var(--text-3); margin-left:6px; font-style:italic; }

/* ── Animation ── */
.anim-in { animation: tkFadeIn .25s ease; }
@keyframes tkFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }