/* =========================================================================
   ANAGHA — ENGINEERING COMMAND CENTER
   A single product-grade dashboard that demonstrates engineering depth:
   live service topology, observability, CI/CD, SLO budget, incident ops.
   Loads after style.css + next.css.
   ========================================================================= */

.engine{
  position:relative;
  background:linear-gradient(180deg,#06050F 0%, #0A0820 55%, #07061A 100%);
  color:#fff;overflow:hidden;padding:118px 0 124px;
  border-top:1px solid rgba(255,255,255,.06);
}
.engine::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 460px at 88% -4%, rgba(70,210,255,.13), transparent 60%),
    radial-gradient(680px 460px at 4% 104%, rgba(243,180,48,.07), transparent 58%);
}
.engine::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(1100px 760px at 50% 40%, #000, transparent 80%);
}
.engine .wrap{position:relative;z-index:2;}
.engine .section-head h2{color:#fff;}
.engine .section-head p{color:rgba(255,255,255,.7);}
.engine .section-head .eyebrow{color:var(--cyan-300);}

/* ---- intro row: copy + proof chips ---- */
.eng-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.eng-proof{display:flex;gap:10px;flex-wrap:wrap;}
.eng-proof .pchip{
  display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:8px 13px;
  background:rgba(255,255,255,.03);
}
.eng-proof .pchip i{width:6px;height:6px;border-radius:50%;background:#5fe39a;box-shadow:0 0 8px #5fe39a;}

/* =========================================================================
   THE CONSOLE FRAME
   ========================================================================= */
.console-frame{
  margin-top:42px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg, rgba(20,18,46,.78), rgba(9,8,26,.86));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 130px -40px #000, 0 10px 40px -20px rgba(70,210,255,.18), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.cf-bar{
  display:flex;align-items:center;gap:13px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);
}
.cf-dots{display:flex;gap:8px;}
.cf-dots i{width:11px;height:11px;border-radius:50%;display:block;}
.cf-dots i:nth-child(1){background:#ff5f57;}.cf-dots i:nth-child(2){background:#febc2e;}.cf-dots i:nth-child(3){background:#28c840;}
.cf-url{
  display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 13px;margin-left:6px;
}
.cf-url svg{width:12px;height:12px;color:#5fe39a;}
.cf-meta{margin-left:auto;display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);}
.cf-live{display:flex;align-items:center;gap:7px;color:var(--cyan-300);letter-spacing:.12em;}
.cf-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 9px var(--cyan-400);animation:pulse 1.6s infinite;}
@media(max-width:720px){.cf-meta .hideS{display:none;}}

/* body: icon rail + workspace */
.cf-body{display:flex;min-height:560px;}
.cf-rail{
  width:54px;flex-shrink:0;background:rgba(4,3,15,.6);border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;
}
.cf-rail .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,var(--gold-500),var(--gold-600));color:#14102E;font-family:var(--display);font-weight:800;font-size:15px;margin-bottom:10px;}
.cf-rail s{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:rgba(255,255,255,.4);cursor:default;transition:.2s;}
.cf-rail s svg{width:17px;height:17px;}
.cf-rail s.on{background:rgba(70,210,255,.14);color:var(--cyan-300);box-shadow:inset 0 0 0 1px rgba(70,210,255,.25);}
.cf-rail s:hover{color:rgba(255,255,255,.8);}
.cf-rail .sp{flex:1;}

.cf-work{flex:1;min-width:0;padding:20px 22px 24px;display:flex;flex-direction:column;gap:16px;}
.cf-work-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.cf-title h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;}
.cf-title p{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:3px;}
.cf-tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:4px;}
.cf-tabs button{
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);
  background:none;border:none;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.2s;white-space:nowrap;
}
.cf-tabs button.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}

/* ---- KPI strip ---- */
.kpi-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.kbox{
  border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:13px 14px;background:rgba(255,255,255,.025);
  position:relative;overflow:hidden;
}
.kbox .kt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.46);display:flex;align-items:center;gap:6px;}
.kbox .kt .kd{width:6px;height:6px;border-radius:50%;background:#5fe39a;box-shadow:0 0 7px #5fe39a;}
.kbox .kv{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;margin-top:8px;line-height:1;}
.kbox .kv small{font-size:13px;font-weight:600;color:rgba(255,255,255,.5);}
.kbox .kf{font-family:var(--mono);font-size:10.5px;margin-top:7px;display:flex;align-items:center;gap:5px;}
.kbox .kf.up{color:#5fe39a;}.kbox .kf.dn{color:#ff8fb0;}.kbox .kf.flat{color:rgba(255,255,255,.45);}
.kbox .kspark{position:absolute;right:10px;bottom:10px;width:46px;height:18px;opacity:.6;}

/* ---- main analytics grid ---- */
.cf-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;}
.panel{
  border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.022);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel-h{display:flex;align-items:center;gap:9px;padding:13px 15px 11px;border-bottom:1px solid rgba(255,255,255,.06);}
.panel-h .pi{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;}
.panel-h .pi svg{width:14px;height:14px;}
.panel-h h4{font-size:13.5px;font-family:var(--display);font-weight:700;letter-spacing:-.01em;}
.panel-h .tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 7px;}
.pi.cy{background:rgba(70,210,255,.14);color:var(--cyan-300);}
.pi.go{background:rgba(243,180,48,.16);color:var(--gold-400);}
.pi.gr{background:rgba(95,227,154,.14);color:#5fe39a;}
.pi.pi2{background:rgba(255,143,176,.14);color:#ff8fb0;}
.pi.in{background:rgba(113,102,224,.18);color:var(--indigo-200);}

/* ===== service topology ===== */
.topo{position:relative;flex:1;padding:6px;min-height:300px;}
.topo svg{width:100%;height:100%;display:block;}
.topo .edge{fill:none;stroke:rgba(120,150,200,.22);stroke-width:1.4;}
.topo .edge.hot{stroke:rgba(70,210,255,.4);}
.topo .pkt{fill:var(--cyan-300);filter:drop-shadow(0 0 5px var(--cyan-glow));}
.topo .pkt.go{fill:var(--gold-400);filter:drop-shadow(0 0 5px var(--gold-glow));}
.node-box{}
.node-box rect{fill:rgba(18,18,44,.92);stroke:rgba(255,255,255,.16);stroke-width:1;}
.node-box.acc rect{stroke:rgba(70,210,255,.45);}
.node-box .nlabel{fill:#fff;font-family:var(--sans);font-weight:700;font-size:11px;}
.node-box .nsub{fill:rgba(255,255,255,.5);font-family:var(--mono);font-size:8px;}
.node-box .ndot{fill:#5fe39a;}
.node-box .ndot.warn{fill:var(--gold-400);}
.topo-legend{position:absolute;left:14px;bottom:10px;display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);}
.topo-legend span{display:flex;align-items:center;gap:6px;}
.topo-legend i{width:8px;height:2px;border-radius:2px;display:block;}

/* ===== right column stack ===== */
.cf-right{display:flex;flex-direction:column;gap:14px;}
.cf-right .panel{flex:none;}

/* throughput chart */
.tp-body{padding:12px 14px 14px;}
.tp-chart{position:relative;height:88px;}
.tp-chart svg{width:100%;height:100%;overflow:visible;}
.tp-grid line{stroke:rgba(255,255,255,.05);}
.tp-area{fill:url(#engFill);opacity:.55;}
.tp-line{fill:none;stroke:var(--cyan-400);stroke-width:2.2;filter:drop-shadow(0 0 5px var(--cyan-glow));}
.tp-stats{display:flex;gap:22px;margin-top:11px;}
.tp-stats .v{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;}
.tp-stats .v small{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;}
.tp-stats .l{font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.5);margin-top:2px;letter-spacing:.04em;}

/* SLO / error-budget gauges */
.slo-body{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.gauge2{display:flex;flex-direction:column;align-items:center;gap:7px;}
.gauge2 .ring{width:92px;height:92px;position:relative;}
.gauge2 .ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.gauge2 .ring .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:8;}
.gauge2 .ring .fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease;}
.gauge2 .ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gauge2 .ring .ctr b{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;}
.gauge2 .ring .ctr s{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.45);letter-spacing:.08em;text-transform:uppercase;}
.gauge2 .gl{font-size:11.5px;color:rgba(255,255,255,.62);font-weight:600;text-align:center;}

/* ===== bottom row: pipeline + incidents ===== */
.cf-grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;}

/* CI/CD pipeline */
.pipe-body{padding:16px 16px 14px;}
.pipeline{display:flex;align-items:stretch;gap:0;}
.pstage{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
.pstage .pn{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);
  position:relative;z-index:2;transition:.35s;
}
.pstage .pn svg{width:18px;height:18px;}
.pstage .plabel{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.6);margin-top:9px;letter-spacing:-.01em;}
.pstage .ptime{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.38);margin-top:3px;}
.pstage::after{content:"";position:absolute;top:20px;left:50%;width:100%;height:2px;background:rgba(255,255,255,.1);z-index:1;}
.pstage:last-child::after{display:none;}
.pstage.done .pn{background:rgba(95,227,154,.16);border-color:rgba(95,227,154,.5);color:#5fe39a;}
.pstage.done::after{background:linear-gradient(90deg,#5fe39a,rgba(95,227,154,.3));}
.pstage.active .pn{background:rgba(70,210,255,.18);border-color:var(--cyan-400);color:var(--cyan-300);box-shadow:0 0 0 4px rgba(70,210,255,.12);animation:pulse 1.3s infinite;}
.pipe-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55);}
.pipe-foot b{color:var(--gold-400);font-weight:500;}
.pipe-foot .ok{color:#5fe39a;}

/* incident feed */
.inc-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:8px;}
.inc{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);transition:.4s;}
.inc .id2{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;background:rgba(255,255,255,.3);}
.inc .it{font-size:12px;font-weight:600;line-height:1.3;}
.inc .is{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.4;}
.inc .itm{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.38);flex-shrink:0;}
.inc.warn{border-color:rgba(243,180,48,.4);background:rgba(243,180,48,.06);}
.inc.warn .id2{background:var(--gold-400);box-shadow:0 0 8px var(--gold-400);animation:pulse 1.1s infinite;}
.inc.fix{border-color:rgba(70,210,255,.35);background:rgba(70,210,255,.05);}
.inc.fix .id2{background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);}
.inc.ok{border-color:rgba(95,227,154,.32);background:rgba(95,227,154,.05);}
.inc.ok .id2{background:#5fe39a;box-shadow:0 0 8px #5fe39a;}

/* region mesh footer strip inside frame */
.cf-foot{
  display:flex;align-items:center;gap:18px;padding:13px 22px;border-top:1px solid rgba(255,255,255,.07);
  background:rgba(4,3,15,.45);flex-wrap:wrap;
}
.cf-foot .rgl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.region{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.66);}
.region i{width:7px;height:7px;border-radius:50%;background:#5fe39a;box-shadow:0 0 8px #5fe39a;}
.region.scaling i{background:var(--gold-400);box-shadow:0 0 8px var(--gold-400);animation:pulse 1.2s infinite;}
.cf-foot .build{margin-left:auto;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);}
.cf-foot .build b{color:var(--cyan-300);font-weight:500;}

/* ---- capability strip beneath the console ---- */
.eng-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;}
.eng-cap{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;background:rgba(255,255,255,.022);transition:.25s;}
.eng-cap:hover{transform:translateY(-3px);border-color:rgba(70,210,255,.3);background:rgba(70,210,255,.04);}
.eng-cap .ci{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,var(--indigo-700),var(--indigo-600));color:var(--cyan-300);margin-bottom:14px;}
.eng-cap .ci svg{width:19px;height:19px;}
.eng-cap h4{font-size:15.5px;margin-bottom:7px;letter-spacing:-.01em;}
.eng-cap p{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.55;}

/* =========================================================================
   responsive
   ========================================================================= */
@media(max-width:1080px){
  .kpi-strip{grid-template-columns:repeat(3,1fr);}
  .cf-grid,.cf-grid2{grid-template-columns:1fr;}
  .eng-caps{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .engine{padding:80px 0;}
  .cf-rail{display:none;}
  .kpi-strip{grid-template-columns:repeat(2,1fr);}
  .cf-tabs{display:none;}
  .slo-body{grid-template-columns:1fr 1fr;}
  .eng-caps{grid-template-columns:1fr;}
  .pstage .plabel{font-size:9px;}
}