:root{
  --bg:#0B0C0E; --panel:#141619; --panel2:#1A1D22; --line:#262A30;
  --txt:#E8E9EB; --muted:#8A909A; --faint:#5A616B;
  --accent:#6E78FF; --accent2:#A78BFA;
  --live:#34D399; --wait:#FBBF24; --risk:#F87171; --park:#6B7280; --ext:#60A5FA;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;
  line-height:1.45;-webkit-font-smoothing:antialiased;padding-bottom:60px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,12,14,.82);
  backdrop-filter:blur(10px);z-index:10}
.brand{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px}
.logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#0B0C0E}
.brand b{font-weight:700;letter-spacing:.2px;color:var(--txt)}
.brand .sub{color:var(--faint);font-size:11px;font-weight:600;letter-spacing:1.5px;
  border-left:1px solid var(--line);padding-left:11px;margin-left:4px}
.crumb b{color:var(--txt)}
.navright{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f0a,#92f);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}

h2.eyebrow{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:30px 0 14px}
.count-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(110,120,255,.13);
  color:var(--accent);border:1px solid rgba(110,120,255,.3);border-radius:30px;
  padding:2px 10px;font-size:11px;font-weight:700;margin-left:8px;vertical-align:middle}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.pulse{animation:p 2s infinite}@keyframes p{0%,100%{opacity:1}50%{opacity:.45}}

.badge{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:6px;
  text-transform:uppercase;display:inline-block}
.b-inhouse_product{background:rgba(110,120,255,.14);color:#9aa2ff}
.b-customer{background:rgba(96,165,250,.14);color:#7fb4ff}
.b-strategic_bet{background:rgba(167,139,250,.16);color:#c4b1ff}
.b-side{background:rgba(52,211,153,.13);color:#5fe0b3}
.b-operational{background:rgba(148,163,184,.15);color:#aeb6c2}

.runner{font-size:10.5px;color:var(--faint);background:var(--panel2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;font-weight:600}
.chip{font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:3px 9px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0B0C0E}
.btn.go{background:var(--live);border-color:var(--live);color:#08130D}
.btn.ghost{background:transparent;color:var(--muted)}

/* overview: waiting-on-you */
.waitgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.wcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--wait);
  border-radius:14px;padding:16px 17px;display:flex;flex-direction:column;gap:11px}
.wcard .top{display:flex;align-items:center;gap:8px}
.wproj{font-weight:650;font-size:13.5px}
.wctx{color:var(--muted);font-size:12px}
.wq{font-size:13.5px;color:var(--txt);font-weight:550;line-height:1.4}
.wactions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}

/* overview: stats */
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:12px 16px;display:flex;align-items:center;gap:10px;flex:1;min-width:130px}
.stat .num{font-size:21px;font-weight:700;letter-spacing:-.5px}
.stat .lbl{font-size:11.5px;color:var(--muted);font-weight:550}

/* overview: rows */
.grouphead{display:flex;align-items:center;gap:9px;padding:14px 4px 9px;color:var(--muted);
  font-size:12px;font-weight:700;letter-spacing:.4px}
.grouphead .gc{color:var(--faint);font-weight:600}
.row{display:grid;grid-template-columns:18px 1.7fr 1.4fr 2.5fr 1.6fr 26px;align-items:center;
  gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;margin-bottom:8px;transition:.12s;cursor:pointer}
.row:hover{background:var(--panel2);border-color:#33373f}
.pname{font-weight:620;font-size:13.5px;display:flex;align-items:center;gap:8px}
.status{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550}
.chev{color:var(--faint);text-align:right;font-size:15px}
.runmode{font-size:11px;color:var(--live);font-weight:600}
.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;margin-top:10px}
.legend span{display:flex;align-items:center;gap:6px}

/* stage rail */
.rail{display:flex;flex-direction:column;gap:5px}
.segs{display:flex;gap:3px}
.seg{height:6px;flex:1;border-radius:3px;background:#23262c}
.seg.done{background:var(--accent)}
.seg.cur{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 0 1px rgba(167,139,250,.4)}
.railtxt{font-size:11px;color:var(--muted)}
.railtxt b{color:var(--txt);font-weight:600}

/* deep-dive header */
.phead{display:flex;align-items:flex-start;justify-content:space-between;margin:24px 0 2px}
.ptitle{display:flex;align-items:center;gap:12px}
.ptitle h1{font-size:22px;font-weight:700;letter-spacing:-.4px}
.pmeta{display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap}
.railbar{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:15px 18px;margin:18px 0 0;display:flex;align-items:center;gap:18px}
.stages{display:flex;flex:1;gap:5px}
.st{flex:1;text-align:center}
.st .bar{height:6px;border-radius:3px;background:#23262c;margin-bottom:7px}
.st.done .bar{background:var(--accent)}
.st.cur .bar{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.st .lab{font-size:9.5px;letter-spacing:.6px;color:var(--faint);font-weight:700}
.st.done .lab{color:var(--muted)}.st.cur .lab{color:var(--accent2)}
.railpct{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}
.railpct b{color:var(--txt);font-size:15px}

.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin:18px 0 20px}
.tab{padding:10px 15px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-family:inherit}
.tab.on{color:var(--txt);border-bottom-color:var(--accent)}

.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
section.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px 18px;margin-bottom:16px}
.card h3{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3 .r{margin-left:auto;font-size:11px;letter-spacing:.3px;text-transform:none}

.gate{border-left:3px solid var(--wait)}
.crit{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.crit:last-of-type{border-bottom:none}
.ck{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0}
.ck.ok{background:rgba(52,211,153,.16);color:var(--live)}
.ck.no{background:rgba(251,191,36,.16);color:var(--wait);border:1px dashed rgba(251,191,36,.5)}
.cname{font-size:13px;font-weight:520;flex:1}.cev{font-size:11.5px;color:var(--muted)}

/* plan / tasks */
.task{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:11px;padding:9px 4px;border-radius:8px}
.task:hover{background:var(--panel2)}
.tcheck{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0}
.tcheck.implemented{background:rgba(52,211,153,.16);color:var(--live)}
.tcheck.ongoing{background:rgba(251,191,36,.16);color:var(--wait);border:1px dashed rgba(251,191,36,.5)}
.tcheck.todo{background:var(--panel2);border:1px solid var(--line);color:transparent}
.tcheck.blocked{background:rgba(248,113,113,.16);color:var(--risk)}
.ttitle{font-size:13px;font-weight:520}
.task.is-done .ttitle{color:var(--muted)}
.as{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.as-agent{background:rgba(110,120,255,.13);color:#9aa2ff}.as-mohamed{background:rgba(240,0,170,.12);color:#f49ada}
.subs{margin:2px 0 6px 30px;border-left:1px solid var(--line);padding-left:10px}
.stagelabel{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--accent2);margin:12px 0 4px}
.stagelabel.done{color:var(--faint)}

/* cicd / insights / activity */
.env{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.env:last-of-type{border-bottom:none}
.envname{font-size:12.5px;font-weight:600;flex:1}.envmeta{font-size:11px;color:var(--muted)}
.pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.3px}
.pill.live{background:rgba(52,211,153,.15);color:var(--live)}
.pill.none{background:var(--panel2);color:var(--faint);border:1px solid var(--line)}
.pipe{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--muted)}
.pipe span{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.ok{color:var(--live)}
.ins{display:flex;align-items:center;gap:10px;padding:8px 0}
.ins .k{font-size:12.5px;color:var(--muted);flex:1}.ins .v{font-size:13px;font-weight:650}
.ins .v.warn{color:var(--wait)}.ins .v.good{color:var(--live)}
.act{display:flex;gap:9px;padding:7px 0;font-size:12px}
.act .t{color:var(--faint);white-space:nowrap;font-size:11px;width:62px;flex-shrink:0}
.act .e{color:var(--muted)}.act .e b{color:var(--txt);font-weight:600}
.loading{color:var(--faint);padding:40px 0;text-align:center}