*{box-sizing:border-box}
body{margin:0;background:#02070d;color:#eef7ff;font-family:Segoe UI,Arial,sans-serif;min-height:100vh;overflow-x:hidden}.space{position:fixed;inset:0;background:radial-gradient(circle at 18% 45%,rgba(0,117,255,.22),transparent 32%),radial-gradient(circle at 83% 18%,rgba(0,170,255,.12),transparent 26%),linear-gradient(#02050a,#020a12);z-index:-2}.space:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#0d77b8 1px,transparent 1px);background-size:48px 48px;opacity:.16}.studio{width:min(1500px,96vw);margin:24px auto;display:grid;grid-template-columns:250px 1fr 280px;gap:28px}.panel{border:1px solid #0b5d8a;background:rgba(1,10,18,.82);box-shadow:0 0 25px rgba(0,150,255,.08);padding:20px}.panel h3,.timeline-wrap h3{color:#35bfff;letter-spacing:1px;font-size:14px}.panel p{font-size:13px;border-bottom:1px solid #102633;padding:11px 0}.panel span{float:right;color:#43ff58}.hero{text-align:center;padding:15px}.logo{width:110px;height:110px;border:5px solid #f3b52f;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:70px;font-weight:800;color:#ffc94b;box-shadow:0 0 35px rgba(255,177,0,.22)}h1{font-size:76px;letter-spacing:8px;margin:8px 0;background:linear-gradient(90deg,#e9f5ff,#fff,#f6ad20);-webkit-background-clip:text;color:transparent}h1 strong{font-weight:700}h2{font-weight:400;letter-spacing:9px;font-size:22px;margin:0}.studio-title{color:#efad26;font-size:32px;letter-spacing:15px;margin:18px}.tagline{font-size:20px;color:#dbe5ec}#startStory{margin:18px auto 25px;padding:22px 70px;font-size:26px;font-weight:700;letter-spacing:2px;color:white;background:linear-gradient(180deg,#103656,#051423);border:2px solid #12aaff;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);box-shadow:0 0 24px #008fe8;cursor:pointer}.modes{display:flex;justify-content:center;gap:20px}.mode{width:280px;height:120px;background:#030b13;border:1px solid #0c8dcc;color:#24baff;font-size:20px;font-weight:700;text-align:left;padding:22px;cursor:pointer}.mode.tech{border-color:#d9900d;color:#f5b72f}.mode small{display:block;color:#fff;font-size:14px;font-weight:400;margin-top:12px;line-height:1.4}.brain-icon{font-size:95px;text-align:center;color:#21aefd;text-shadow:0 0 25px #007cdc}.chart{height:95px;color:#20b8ff;font-size:28px;display:flex;align-items:center;justify-content:center}.health{color:#35e760;font-size:26px;letter-spacing:8px}.right b{color:#50ff52;float:right}.timeline-wrap{grid-column:1/4;border:1px solid #0b5d8a;background:rgba(1,10,18,.88);padding:20px}.timeline-wrap>h3{text-align:center;color:#d9ebf6}.timeline{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;position:relative}.timeline:before{content:"";position:absolute;top:28px;left:4%;right:4%;height:2px;background:linear-gradient(90deg,#1aa8ff,#16d9ff,#d6e848,#ffc62e,#ff7f1f,#d86cff);z-index:0}.chapter{text-align:center;position:relative;z-index:1}.chapter b{width:55px;height:55px;border:2px solid #28aaff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:auto;background:#071321;box-shadow:0 0 15px rgba(0,153,255,.5);font-size:18px}.chapter span{display:block;margin-top:16px;color:#7ed7ff;font-size:12px;font-weight:700}.chapter small{display:block;margin-top:8px;color:#d4dce2;font-size:11px;line-height:1.3}footer{grid-column:1/4;display:flex;justify-content:space-between;border-top:1px solid #0a4c72;padding:20px;color:#1caeff;font-size:13px;letter-spacing:1px}footer strong{letter-spacing:6px}@media(max-width:1050px){.studio{grid-template-columns:1fr}.status,.right,.timeline-wrap,footer{grid-column:1}.timeline{grid-template-columns:repeat(2,1fr)}.timeline:before{display:none}h1{font-size:48px}.modes{flex-direction:column;align-items:center}}

/* ===== ZENITH STARTUP SEQUENCE ===== */
body{overflow:hidden}
.studio{opacity:0;animation:zenithStudioReveal 1s ease forwards .35s}
.hero .logo{opacity:0;transform:scale(.45) rotate(-18deg);animation:zenithLogoWake 1.4s cubic-bezier(.16,.84,.32,1.15) forwards .45s}
.hero h1{opacity:0;transform:translateY(18px);animation:zenithTitleIn .9s ease forwards 1.15s}
.hero h2,.studio-title,.tagline{opacity:0;transform:translateY(12px);animation:zenithSoftIn .8s ease forwards 1.55s}
.studio-title{animation-delay:1.75s}.tagline{animation-delay:1.95s}
.status{opacity:0;transform:translateX(-45px);animation:zenithPanelLeft .85s ease forwards 1.9s}
.right{opacity:0;transform:translateX(45px);animation:zenithPanelRight .85s ease forwards 2.05s}
#startStory{opacity:0;transform:scale(.92);animation:zenithButtonIn .85s ease forwards 2.35s,zenithPulse 2.6s ease-in-out infinite 3.3s}
.modes{opacity:0;transform:translateY(22px);animation:zenithSoftIn .9s ease forwards 2.55s}
.timeline-wrap{opacity:0;transform:translateY(28px);animation:zenithSoftIn .9s ease forwards 2.75s}
.timeline .chapter{opacity:0;transform:translateY(18px)}
.timeline .chapter:nth-child(1){animation:zenithChapterIn .5s ease forwards 3.00s}
.timeline .chapter:nth-child(2){animation:zenithChapterIn .5s ease forwards 3.12s}
.timeline .chapter:nth-child(3){animation:zenithChapterIn .5s ease forwards 3.24s}
.timeline .chapter:nth-child(4){animation:zenithChapterIn .5s ease forwards 3.36s}
.timeline .chapter:nth-child(5){animation:zenithChapterIn .5s ease forwards 3.48s}
.timeline .chapter:nth-child(6){animation:zenithChapterIn .5s ease forwards 3.60s}
.timeline .chapter:nth-child(7){animation:zenithChapterIn .5s ease forwards 3.72s}
.timeline .chapter:nth-child(8){animation:zenithChapterIn .5s ease forwards 3.84s}
.timeline .chapter:nth-child(9){animation:zenithChapterIn .5s ease forwards 3.96s}
.timeline .chapter:nth-child(10){animation:zenithChapterIn .5s ease forwards 4.08s}
footer{opacity:0;animation:zenithSoftIn .8s ease forwards 4.25s}
.space:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:50%;top:8%;transform:translateX(-50%) scale(.25);background:radial-gradient(circle,rgba(0,170,255,.18),rgba(0,80,160,.05) 45%,transparent 72%);filter:blur(10px);opacity:0;animation:zenithCoreGlow 2.3s ease forwards .2s}

@keyframes zenithStudioReveal{to{opacity:1}}
@keyframes zenithLogoWake{0%{opacity:0;transform:scale(.45) rotate(-18deg);filter:blur(8px)}60%{opacity:1;filter:blur(0);box-shadow:0 0 65px rgba(255,177,0,.5)}100%{opacity:1;transform:scale(1) rotate(0);box-shadow:0 0 35px rgba(255,177,0,.22)}}
@keyframes zenithTitleIn{to{opacity:1;transform:translateY(0)}}
@keyframes zenithSoftIn{to{opacity:1;transform:translateY(0)}}
@keyframes zenithPanelLeft{to{opacity:1;transform:translateX(0)}}
@keyframes zenithPanelRight{to{opacity:1;transform:translateX(0)}}
@keyframes zenithButtonIn{to{opacity:1;transform:scale(1)}}
@keyframes zenithChapterIn{to{opacity:1;transform:translateY(0)}}
@keyframes zenithPulse{0%,100%{box-shadow:0 0 18px rgba(0,143,232,.55)}50%{box-shadow:0 0 38px rgba(0,181,255,.95)}}
@keyframes zenithCoreGlow{0%{opacity:0;transform:translateX(-50%) scale(.25)}50%{opacity:1}100%{opacity:.45;transform:translateX(-50%) scale(1.15)}}

body.startup-complete{overflow-x:hidden;overflow-y:auto}
body.startup-complete .studio{opacity:1}

/* ===== STEP 9 - ZENITH STORY EXPERIENCE / CHAPTER 01 ===== */
.story-experience{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,106,184,.22),transparent 30%),
    radial-gradient(circle at 18% 72%,rgba(14,97,180,.13),transparent 25%),
    linear-gradient(135deg,#010409 0%,#020b14 52%,#010308 100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .8s ease,visibility .8s ease;
  overflow:hidden;
}
.story-experience.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.story-stars{
  position:absolute;
  inset:-20%;
  background-image:
    radial-gradient(circle,#50bfff 1px,transparent 1.5px),
    radial-gradient(circle,#ffffff 1px,transparent 1.4px);
  background-size:74px 74px,123px 123px;
  background-position:0 0,31px 47px;
  opacity:.13;
  animation:storyStarDrift 28s linear infinite;
}
.story-stars:after{
  content:"";
  position:absolute;
  width:760px;
  height:760px;
  border:1px solid rgba(0,160,255,.12);
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 120px rgba(0,125,255,.12),inset 0 0 120px rgba(0,125,255,.06);
}
.story-close{
  position:absolute;
  right:30px;
  top:22px;
  width:46px;
  height:46px;
  border:1px solid #17638d;
  background:rgba(2,12,20,.8);
  color:#bfeaff;
  font-size:27px;
  cursor:pointer;
  z-index:4;
  transition:.25s;
}
.story-close:hover{
  border-color:#25b7ff;
  color:white;
  box-shadow:0 0 20px rgba(0,174,255,.4);
}
.story-progress{
  position:absolute;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,62vw);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  z-index:3;
  color:#72cfff;
  font-size:11px;
  letter-spacing:2px;
}
.story-progress-track{
  height:2px;
  background:#102c3e;
  overflow:hidden;
}
.story-progress-bar{
  height:100%;
  width:10%;
  background:linear-gradient(90deg,#18a6ff,#54e4ff,#f4bd32);
  box-shadow:0 0 14px #19aaff;
}
.chapter-scene{
  width:min(1260px,90vw);
  text-align:center;
  position:relative;
  z-index:2;
  padding:80px 40px 45px;
}
.chapter-kicker{
  color:#40c9ff;
  font-size:13px;
  letter-spacing:7px;
  opacity:0;
}
.chapter-number{
  position:absolute;
  left:50%;
  top:33px;
  transform:translateX(-50%);
  font-size:260px;
  line-height:1;
  font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(38,160,225,.10);
  opacity:0;
  user-select:none;
}
.chapter-title{
  margin:28px 0 5px;
  font-size:clamp(64px,8vw,126px);
  letter-spacing:14px;
  color:#f4f8fb;
  background:none;
  -webkit-text-fill-color:initial;
  opacity:0;
  transform:scale(.88);
  text-shadow:0 0 34px rgba(34,172,255,.18);
}
.chapter-subtitle{
  color:#e9b83a;
  font-size:20px;
  letter-spacing:5px;
  margin:0 0 62px;
  opacity:0;
  transform:translateY(14px);
}
.origin-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  margin:0 auto 58px;
  color:#d8edf8;
  font-size:13px;
  letter-spacing:1px;
}
.origin-line span,.origin-line i{
  opacity:0;
  transform:translateY(10px);
}
.origin-line span{
  border:1px solid rgba(31,160,223,.35);
  background:rgba(3,19,30,.72);
  padding:10px 15px;
  box-shadow:inset 0 0 20px rgba(0,133,212,.05);
}
.origin-line i{
  color:#39bdff;
  font-style:normal;
}
.chapter-message{
  width:min(840px,86vw);
  margin:0 auto;
  border-top:1px solid rgba(43,166,224,.32);
  border-bottom:1px solid rgba(43,166,224,.32);
  padding:27px 35px 31px;
  background:linear-gradient(90deg,transparent,rgba(0,113,180,.08),transparent);
  opacity:0;
  transform:translateY(20px);
}
.chapter-message p{
  margin:0 0 10px;
  color:#8ecbe9;
  font-size:15px;
  letter-spacing:2px;
}
.chapter-message strong{
  display:block;
  color:#f2f7fa;
  font-size:clamp(19px,2vw,27px);
  line-height:1.45;
  font-weight:500;
}
.chapter-foot{
  margin-top:58px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  color:#38b8f2;
  font-size:11px;
  letter-spacing:3px;
  opacity:0;
}
.chapter-pulse{
  color:#f0b832;
  text-shadow:0 0 12px #f0b832;
  animation:chapterPulse 1.5s ease-in-out infinite;
}
.story-experience.active .chapter-kicker{animation:chapterFade .7s ease forwards .55s}
.story-experience.active .chapter-number{animation:chapterNumber .9s ease forwards .8s}
.story-experience.active .chapter-title{animation:chapterTitle .9s cubic-bezier(.17,.84,.32,1.18) forwards 1.0s}
.story-experience.active .chapter-subtitle{animation:chapterUp .75s ease forwards 1.45s}
.story-experience.active .origin-line span:nth-of-type(1){animation:chapterUp .45s ease forwards 1.95s}
.story-experience.active .origin-line i:nth-of-type(1){animation:chapterUp .35s ease forwards 2.12s}
.story-experience.active .origin-line span:nth-of-type(2){animation:chapterUp .45s ease forwards 2.25s}
.story-experience.active .origin-line i:nth-of-type(2){animation:chapterUp .35s ease forwards 2.42s}
.story-experience.active .origin-line span:nth-of-type(3){animation:chapterUp .45s ease forwards 2.55s}
.story-experience.active .origin-line i:nth-of-type(3){animation:chapterUp .35s ease forwards 2.72s}
.story-experience.active .origin-line span:nth-of-type(4){animation:chapterUp .45s ease forwards 2.85s}
.story-experience.active .origin-line i:nth-of-type(4){animation:chapterUp .35s ease forwards 3.02s}
.story-experience.active .origin-line span:nth-of-type(5){animation:chapterUp .45s ease forwards 3.15s}
.story-experience.active .origin-line i:nth-of-type(5){animation:chapterUp .35s ease forwards 3.32s}
.story-experience.active .origin-line span:nth-of-type(6){animation:chapterUp .45s ease forwards 3.45s}
.story-experience.active .chapter-message{animation:chapterUp .8s ease forwards 4.0s}
.story-experience.active .chapter-foot{animation:chapterFade .75s ease forwards 4.65s}
body.story-open .studio{
  filter:blur(12px) brightness(.18);
  transform:scale(.985);
  transition:filter .75s ease,transform .75s ease;
}
@keyframes storyStarDrift{to{transform:translate3d(70px,40px,0)}}
@keyframes chapterFade{to{opacity:1}}
@keyframes chapterNumber{to{opacity:1}}
@keyframes chapterTitle{to{opacity:1;transform:scale(1)}}
@keyframes chapterUp{to{opacity:1;transform:translateY(0)}}
@keyframes chapterPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
@media(max-width:900px){
  .story-progress{width:75vw}
  .chapter-scene{padding-left:18px;padding-right:18px}
  .chapter-number{font-size:180px}
  .chapter-title{letter-spacing:8px}
  .origin-line{gap:8px}
  .origin-line span{padding:8px 10px}
}

/* ===== STEP 10 - CHAPTER 01 MINI STORY ===== */
.story-step{
  display:none;
  width:min(1050px,88vw);
  margin:0 auto;
  min-height:470px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  opacity:0;
}
.story-step.active-step{
  display:flex;
  animation:sceneEnter .85s cubic-bezier(.16,.84,.32,1) forwards;
}
.scene-eyebrow{
  color:#36c4ff;
  font-size:12px;
  letter-spacing:6px;
  margin-bottom:25px;
}
.scene-big-title{
  font-size:clamp(38px,5vw,78px);
  letter-spacing:8px;
  margin:10px 0 30px;
  color:#f4f8fb;
  text-align:center;
}
.scene-big-title.gold{color:#efb632}
.scene-copy{
  max-width:820px;
  font-size:20px;
  line-height:1.65;
  color:#dbeaf2;
  text-align:center;
  margin:28px auto 0;
}
.cinematic-line{margin-top:34px}
.scene-arrow{
  font-size:44px;
  color:#2bbcff;
  margin:8px 0 16px;
  text-shadow:0 0 18px #1aaeff;
}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  width:min(900px,90vw);
  margin:30px auto 20px;
}
.concept-grid span{
  border:1px solid #176a94;
  background:rgba(4,20,32,.8);
  padding:20px 12px;
  color:#8fdcff;
  font-size:13px;
  letter-spacing:2px;
  box-shadow:inset 0 0 25px rgba(0,147,220,.05),0 0 18px rgba(0,147,220,.06);
}
.next-chapter{
  margin-top:42px;
  color:#5dd5ff;
  border-top:1px solid #175878;
  border-bottom:1px solid #175878;
  padding:22px 36px;
  letter-spacing:4px;
  line-height:1.8;
}
.next-chapter strong{color:#f2b735}
.story-controls{
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  width:min(900px,82vw);
  display:grid;
  grid-template-columns:150px 1fr 150px;
  align-items:center;
  gap:20px;
  z-index:5;
}
.story-nav{
  border:1px solid #17678f;
  background:#03101a;
  color:#81d8ff;
  padding:13px 18px;
  font-size:12px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.25s;
}
.story-nav:hover:not(:disabled){
  border-color:#27baff;
  color:#fff;
  box-shadow:0 0 18px rgba(0,174,255,.28);
}
.story-nav:disabled{opacity:.25;cursor:default}
.story-dots{
  display:flex;
  justify-content:center;
  gap:14px;
}
.story-dots .dot{
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  border:1px solid #2c86af;
  background:#062032;
  cursor:pointer;
  transition:.3s;
}
.story-dots .dot.active{
  background:#f1b631;
  border-color:#ffd35a;
  box-shadow:0 0 15px rgba(255,188,43,.85);
}
@keyframes sceneEnter{
  0%{opacity:0;transform:translateY(28px) scale(.985);filter:blur(5px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media(max-width:850px){
  .concept-grid{grid-template-columns:repeat(2,1fr)}
  .story-controls{grid-template-columns:105px 1fr 105px}
  .story-nav{padding:11px 8px;font-size:10px}
}

/* ===== STEP 11 - CHAPTER 02 / QUANT PHASE ===== */
.chapter-two{display:none}
.chapter-two.active-chapter{display:block}
.chapter-one.hidden-chapter{display:none}

.quant-orbit{
  position:relative;
  width:150px;
  height:150px;
  margin:0 auto 10px;
}
.orbit-ring{
  position:absolute;
  inset:15px;
  border:1px solid rgba(35,177,255,.42);
  border-radius:50%;
  animation:quantSpin 7s linear infinite;
}
.orbit-ring.r2{
  inset:32px;
  border-color:rgba(240,181,47,.5);
  animation-direction:reverse;
  animation-duration:5s;
}
.orbit-ring:before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#37c7ff;
  left:50%;
  top:-5px;
  box-shadow:0 0 16px #26baff;
}
.orbit-ring.r2:before{
  background:#efb632;
  box-shadow:0 0 16px #efb632;
}
.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #efb632;
  color:#ffd25c;
  font-size:28px;
  font-weight:800;
  box-shadow:0 0 30px rgba(239,182,50,.25);
}
.quant-tagline{
  margin-top:32px;
  color:#3ecaff;
  letter-spacing:6px;
  font-size:12px;
}
.gold-text{color:#efb632}

.fusion-flow,.execution-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:30px auto;
}
.fusion-flow span,.execution-flow span{
  min-width:125px;
  padding:18px 22px;
  border:1px solid #176d98;
  background:rgba(3,20,31,.82);
  color:#81dbff;
  letter-spacing:2px;
  font-size:13px;
}
.fusion-flow i,.execution-flow i{
  color:#efb632;
  font-style:normal;
  font-size:24px;
}
.fusion-flow strong{
  padding:19px 25px;
  border:1px solid #bc861c;
  color:#ffd269;
  letter-spacing:2px;
  background:rgba(35,25,5,.46);
}

.architecture-stack{
  width:min(620px,78vw);
  margin:25px auto;
  display:grid;
  gap:7px;
}
.architecture-stack div{
  border:1px solid rgba(31,153,211,.48);
  padding:13px;
  background:linear-gradient(90deg,transparent,rgba(0,134,205,.13),transparent);
  color:#bceaff;
  letter-spacing:4px;
  font-size:12px;
}
.architecture-stack div:nth-child(4){
  border-color:rgba(239,182,50,.5);
  color:#ffd36c;
}

.quant-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(820px,82vw);
  margin:25px auto;
}
.quant-pillars span{
  border:1px solid #175e84;
  padding:18px 12px;
  color:#9ee2ff;
  background:rgba(2,16,26,.8);
  letter-spacing:2px;
  font-size:12px;
}
.quant-pillars span:nth-child(5){
  border-color:#9b711c;
  color:#ffd166;
}

@keyframes quantSpin{to{transform:rotate(360deg)}}

@media(max-width:800px){
  .quant-pillars{grid-template-columns:repeat(2,1fr)}
  .execution-flow,.fusion-flow{gap:8px}
}

/* ===== STEP 12 - CHAPTER 03 / BIRTH OF ZENITH AI ===== */
.chapter-three{display:none}
.chapter-three.active-chapter{display:block}
.chapter-two.hidden-chapter{display:none}

.birth-field{
  position:relative;
  width:210px;
  height:210px;
  margin:0 auto 8px;
}
.birth-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(39,176,255,.32);
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.birth-ring.b1{width:200px;height:200px;animation:birthSpin 10s linear infinite}
.birth-ring.b2{width:150px;height:150px;border-color:rgba(239,182,50,.48);animation:birthSpinReverse 7s linear infinite}
.birth-ring.b3{width:105px;height:105px;box-shadow:0 0 40px rgba(0,157,255,.12)}
.zenith-birth-z{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:78px;height:78px;
  border:3px solid #efb632;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#ffd15b;
  font-size:48px;
  font-weight:900;
  text-shadow:0 0 20px rgba(255,191,48,.4);
  box-shadow:0 0 45px rgba(239,182,50,.22),inset 0 0 25px rgba(239,182,50,.05);
  animation:birthPulse 2.4s ease-in-out infinite;
}
.stable-grid,.sensor-grid{
  display:grid;
  gap:12px;
  width:min(850px,84vw);
  margin:28px auto;
}
.stable-grid{grid-template-columns:repeat(3,1fr)}
.stable-grid span{
  border:1px solid #176c96;
  background:rgba(3,19,29,.8);
  padding:22px 12px;
  color:#a8e6ff;
  letter-spacing:3px;
  font-size:12px;
}
.stable-grid span:nth-child(2){
  border-color:#b98218;
  color:#ffd167;
}
.sensor-grid{grid-template-columns:repeat(5,1fr)}
.sensor-grid div{
  border:1px solid #17648a;
  background:rgba(3,18,29,.82);
  padding:22px 10px;
}
.sensor-grid strong{
  display:block;
  font-size:22px;
  color:#65d2ff;
  margin-bottom:8px;
}
.sensor-grid small{
  color:#c4d9e4;
  letter-spacing:2px;
  font-size:10px;
}
.quality-engine{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  width:min(900px,85vw);
  margin:25px auto;
}
.quality-engine span,.quality-engine strong{
  border:1px solid #165e83;
  padding:18px 10px;
  color:#9edfff;
  background:rgba(2,17,27,.82);
  letter-spacing:2px;
  font-size:12px;
}
.quality-engine strong{
  grid-column:1/4;
  border-color:#b47d16;
  color:#ffd167;
  font-size:15px;
  box-shadow:0 0 25px rgba(239,182,50,.08);
}
.system-growth{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:28px auto;
}
.system-growth div{
  border:1px solid #17658c;
  padding:18px 20px;
  color:#9de2ff;
  letter-spacing:2px;
  background:rgba(2,16,26,.82);
  font-size:12px;
}
.system-growth i{
  color:#efb632;
  font-size:22px;
  font-style:normal;
}
@keyframes birthSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes birthSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes birthPulse{0%,100%{filter:brightness(.9);transform:translate(-50%,-50%) scale(.96)}50%{filter:brightness(1.25);transform:translate(-50%,-50%) scale(1.05)}}
@media(max-width:850px){
  .sensor-grid{grid-template-columns:repeat(2,1fr)}
  .stable-grid{grid-template-columns:1fr}
  .quality-engine{grid-template-columns:repeat(2,1fr)}
  .quality-engine strong{grid-column:1/3}
}

/* =========================================================
   STEP 13 - READABILITY / SAFE LAYOUT / ADAPTIVE READ TIME
   ========================================================= */

.story-experience{
  overflow:hidden !important;
}

.chapter-scene{
  width:min(1380px,94vw) !important;
  height:100vh !important;
  max-height:100vh !important;
  padding:92px 48px 145px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
  scrollbar-color:#155b7c transparent;
}

.chapter-scene::-webkit-scrollbar{
  width:7px;
}

.chapter-scene::-webkit-scrollbar-thumb{
  background:#155b7c;
  border-radius:10px;
}

.story-step{
  width:min(1120px,88vw) !important;
  min-height:calc(100vh - 235px) !important;
  height:auto !important;
  margin:0 auto !important;
  padding:18px 0 115px !important;
  justify-content:center !important;
  overflow:visible !important;
}

.scene-big-title{
  font-size:clamp(32px,4vw,64px) !important;
  line-height:1.15 !important;
  letter-spacing:6px !important;
  max-width:1000px;
  margin:10px auto 25px !important;
  overflow-wrap:anywhere;
}

.chapter-title{
  font-size:clamp(48px,6vw,92px) !important;
  line-height:1.05 !important;
  letter-spacing:10px !important;
  max-width:100%;
}

.scene-copy{
  width:min(860px,82vw) !important;
  max-width:860px !important;
  font-size:clamp(16px,1.25vw,20px) !important;
  line-height:1.7 !important;
  margin:24px auto 20px !important;
  padding:0 20px !important;
}

.chapter-message{
  width:min(880px,84vw) !important;
  padding:25px 34px !important;
  margin:25px auto 20px !important;
}

.chapter-message p{
  font-size:15px !important;
  line-height:1.6 !important;
}

.chapter-message strong{
  font-size:clamp(18px,1.7vw,25px) !important;
  line-height:1.55 !important;
}

.origin-line{
  max-width:1000px !important;
  margin:25px auto 30px !important;
}

.quality-engine,
.sensor-grid,
.stable-grid,
.quant-pillars,
.concept-grid{
  margin-top:20px !important;
  margin-bottom:20px !important;
}

.quality-engine span,
.quality-engine strong,
.sensor-grid div,
.stable-grid span,
.quant-pillars span,
.concept-grid span{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.next-chapter{
  margin-top:28px !important;
  margin-bottom:20px !important;
}

.story-controls{
  position:fixed !important;
  left:50% !important;
  bottom:24px !important;
  transform:translateX(-50%) !important;
  width:min(900px,82vw) !important;
  z-index:10020 !important;
  padding:10px 14px !important;
  background:linear-gradient(90deg,rgba(1,7,12,.15),rgba(1,12,20,.90),rgba(1,7,12,.15));
  border-top:1px solid rgba(27,124,167,.22);
  backdrop-filter:blur(9px);
}

.story-progress{
  position:fixed !important;
  top:22px !important;
  z-index:10030 !important;
}

.story-close{
  position:fixed !important;
  z-index:10040 !important;
}

.story-read-timer{
  position:fixed;
  right:28px;
  top:82px;
  z-index:10035;
  min-width:170px;
  padding:10px 14px;
  border:1px solid rgba(22,106,145,.55);
  background:rgba(2,13,22,.88);
  color:#72d7ff;
  font-size:10px;
  letter-spacing:1.4px;
  text-align:center;
  box-shadow:0 0 18px rgba(0,143,220,.08);
}

.story-read-timer strong{
  color:#f3bd3c;
  font-size:12px;
  margin-left:5px;
}

.story-read-timer.paused{
  border-color:rgba(239,182,50,.55);
  color:#f3bd3c;
}

.story-pause-hint{
  display:block;
  margin-top:5px;
  color:#6d8998;
  font-size:8px;
  letter-spacing:1px;
}

body.story-open{
  overflow:hidden !important;
}

@media(max-height:850px){
  .chapter-scene{
    padding-top:72px !important;
    padding-bottom:125px !important;
  }

  .story-step{
    min-height:auto !important;
    padding-top:10px !important;
    padding-bottom:100px !important;
  }

  .scene-big-title{
    font-size:clamp(28px,3.4vw,50px) !important;
    margin-bottom:16px !important;
  }

  .scene-copy{
    font-size:15px !important;
    line-height:1.55 !important;
    margin-top:15px !important;
  }

  .birth-field{
    width:135px !important;
    height:135px !important;
  }

  .birth-ring.b1{
    width:130px !important;
    height:130px !important;
  }

  .birth-ring.b2{
    width:100px !important;
    height:100px !important;
  }

  .birth-ring.b3{
    width:75px !important;
    height:75px !important;
  }

  .zenith-birth-z{
    width:58px !important;
    height:58px !important;
    font-size:35px !important;
  }
}

@media(max-width:1100px){
  .story-read-timer{
    right:18px;
    top:76px;
  }

  .scene-big-title{
    letter-spacing:4px !important;
  }

  .story-controls{
    width:88vw !important;
  }
}

@media(max-width:760px){
  .chapter-scene{
    width:98vw !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .story-step{
    width:94vw !important;
  }

  .scene-big-title{
    letter-spacing:2px !important;
  }

  .story-read-timer{
    display:none;
  }
}

/* ===== STEP 14 - CHAPTER 04 / AI & TRADING INTELLIGENCE ===== */
.chapter-four{display:none}
.chapter-four.active-chapter{display:block}
.chapter-three.hidden-chapter{display:none}

.decision-chain,
.execution-pipeline,
.reentry-flow,
.master-flow{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:28px auto;
}

.decision-chain span,
.execution-pipeline span,
.reentry-flow span,
.master-flow span{
  border:1px solid #17658c;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:16px 18px;
  font-size:12px;
  letter-spacing:2px;
}

.decision-chain strong,
.execution-pipeline strong,
.reentry-flow strong,
.master-flow strong{
  border:1px solid #b57d16;
  background:rgba(40,28,5,.45);
  color:#ffd168;
  padding:17px 20px;
  font-size:12px;
  letter-spacing:2px;
}

.decision-chain i,
.execution-pipeline i,
.reentry-flow i,
.master-flow i{
  color:#efb632;
  font-style:normal;
  font-size:20px;
}

.intelligence-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  width:min(930px,86vw);
  margin:25px auto;
}

.intelligence-grid div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:22px 10px;
}

.intelligence-grid strong{
  display:block;
  color:#65d2ff;
  font-size:23px;
  margin-bottom:8px;
}

.intelligence-grid small{
  color:#c2d8e4;
  font-size:10px;
  letter-spacing:1.5px;
}

.ai-request-flow{
  display:grid;
  grid-template-columns:1fr auto 130px auto 1fr;
  align-items:center;
  gap:15px;
  width:min(980px,88vw);
  margin:32px auto;
}

.ai-box{
  border:1px solid #17658c;
  background:rgba(2,18,29,.84);
  padding:24px 15px;
  color:#a4e4ff;
  letter-spacing:2px;
  font-size:12px;
}

.ai-core{
  width:115px;
  height:115px;
  margin:auto;
  border:2px solid #23baff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5ed7ff;
  font-size:36px;
  font-weight:800;
  box-shadow:0 0 34px rgba(0,174,255,.22),inset 0 0 28px rgba(0,174,255,.08);
  animation:aiCorePulse 2.3s ease-in-out infinite;
}

.ai-request-flow i{
  color:#efb632;
  font-style:normal;
  font-size:10px;
  line-height:1.5;
  letter-spacing:1px;
  max-width:170px;
}

.quality-vote-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  width:min(900px,85vw);
  margin:25px auto;
}

.quality-vote-grid span,
.quality-vote-grid strong{
  border:1px solid #176084;
  background:rgba(2,17,27,.82);
  color:#a2e2ff;
  padding:17px 10px;
  font-size:11px;
  letter-spacing:2px;
}

.quality-vote-grid strong{
  grid-column:1/4;
  color:#ffd164;
  border-color:#a97717;
}

.approval-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:30px auto;
}

.approval-signal{
  min-width:150px;
  border:1px solid #17678d;
  padding:17px 12px;
  background:rgba(2,18,29,.82);
  color:#7ed9ff;
  font-size:10px;
  letter-spacing:2px;
}

.approval-signal b{
  display:block;
  color:#f2f7fa;
  margin-top:8px;
  font-size:15px;
}

.approval-plus,
.approval-equals{
  color:#efb632;
  font-size:25px;
}

.approval-final{
  min-width:165px;
  border:1px solid #af7c18;
  padding:17px 12px;
  color:#ffd169;
  background:rgba(39,27,4,.5);
  font-size:10px;
  letter-spacing:2px;
}

.approval-final strong{
  display:block;
  margin-top:8px;
  font-size:17px;
}

.exit-brain{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
  width:min(850px,84vw);
  margin:25px auto;
}

.exit-brain span,
.exit-brain strong{
  border:1px solid #17658a;
  background:rgba(2,18,28,.82);
  padding:18px 12px;
  color:#a4e4ff;
  font-size:11px;
  letter-spacing:2px;
}

.exit-brain strong{
  grid-column:1/3;
  border-color:#ad7918;
  color:#ffd164;
}

@keyframes aiCorePulse{
  0%,100%{transform:scale(.96);filter:brightness(.9)}
  50%{transform:scale(1.05);filter:brightness(1.3)}
}

@media(max-width:900px){
  .intelligence-grid{grid-template-columns:repeat(2,1fr)}
  .ai-request-flow{grid-template-columns:1fr}
  .quality-vote-grid{grid-template-columns:repeat(2,1fr)}
  .quality-vote-grid strong{grid-column:1/3}
  .exit-brain{grid-template-columns:1fr}
  .exit-brain strong{grid-column:1}
}

/* ===== CHAPTER 05 / ENTERPRISE INFRASTRUCTURE ===== */
.chapter-five{display:none}
.chapter-five.active-chapter{display:block}
.chapter-four.hidden-chapter{display:none}

.infra-flow,
.vps-core,
.server-map{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:28px auto;
}

.infra-flow span,
.infra-flow strong,
.vps-node,
.server-node{
  border:1px solid #17658c;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:17px 18px;
  font-size:12px;
  letter-spacing:2px;
}

.infra-flow strong,
.gold-node,
.vps-node.active{
  border-color:#b57d16;
  color:#ffd168;
  background:rgba(40,28,5,.45);
}

.infra-flow i,
.vps-core i,
.server-map i{
  color:#efb632;
  font-style:normal;
  font-size:18px;
}

.infra-card-grid,
.runtime-grid,
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(900px,86vw);
  margin:25px auto;
}

.infra-card-grid div,
.runtime-grid span,
.dashboard-grid div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:20px 12px;
  color:#a0e1ff;
}

.infra-card-grid strong{
  display:block;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.infra-card-grid small{
  color:#c4d9e4;
}

.portfolio-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  width:min(1000px,88vw);
  margin:25px auto;
}

.portfolio-flow span{
  border:1px solid #17658a;
  padding:18px 10px;
  background:rgba(2,18,28,.82);
  color:#9ddfff;
  font-size:10px;
  letter-spacing:1.5px;
}

.infra-master{
  position:relative;
  width:min(900px,86vw);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
  margin:25px auto;
}

.infra-center{
  grid-column:2;
  border:2px solid #b98118;
  color:#ffd16a;
  padding:22px 12px;
  background:rgba(38,26,4,.5);
  font-weight:700;
  letter-spacing:3px;
}

.infra-master span{
  border:1px solid #17658a;
  color:#9edfff;
  padding:17px 10px;
  background:rgba(2,18,28,.82);
  font-size:11px;
  letter-spacing:2px;
}

@media(max-width:900px){
  .infra-card-grid,
  .runtime-grid,
  .dashboard-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .portfolio-flow{
    grid-template-columns:repeat(2,1fr);
  }

  .infra-master{
    grid-template-columns:repeat(2,1fr);
  }

  .infra-center{
    grid-column:1/3;
  }
}

/* ===== CHAPTER 06 / LEARNING, TRADE DNA & FORENSICS ===== */
.chapter-six{display:none}
.chapter-six.active-chapter{display:block}
.chapter-five.hidden-chapter{display:none}

.learning-flow,.feature-pipeline,.shadow-flow,.closed-loop{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:26px auto;
}
.learning-flow span,.feature-pipeline span,.shadow-flow span,.closed-loop span{
  border:1px solid #17658c;background:rgba(2,17,27,.82);color:#9edfff;padding:16px 18px;font-size:11px;letter-spacing:2px;
}
.learning-flow strong,.feature-pipeline strong,.shadow-flow strong,.closed-loop strong{
  border:1px solid #b57d16;background:rgba(40,28,5,.45);color:#ffd168;padding:17px 20px;font-size:11px;letter-spacing:2px;
}
.learning-flow i,.feature-pipeline i,.shadow-flow i,.closed-loop i{color:#efb632;font-style:normal;font-size:19px}

.dna-grid,.forensic-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(920px,86vw);margin:24px auto;
}
.dna-grid span,.dna-grid strong,.forensic-grid span,.forensic-grid strong{
  border:1px solid #17648a;background:rgba(2,17,27,.82);padding:17px 9px;color:#a0e1ff;font-size:10px;letter-spacing:1.5px;
}
.dna-grid strong,.forensic-grid strong{
  grid-column:1/5;border-color:#a97818;color:#ffd168;
}

.outcome-compare{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:min(760px,80vw);margin:30px auto;
}
.outcome-compare div,.truth-grid div{
  border:1px solid #17648a;background:rgba(2,17,27,.82);padding:26px 16px;color:#a3e3ff;
}
.outcome-compare b,.truth-grid b{display:block;font-size:18px;letter-spacing:3px;margin-bottom:9px}
.outcome-compare small,.truth-grid small{color:#d0e0e8;line-height:1.6}
.outcome-compare i,.truth-arrow{color:#efb632;font-size:30px;font-style:normal}

.gold-panel{border-color:#a97818 !important;color:#ffd168 !important;background:rgba(39,27,4,.45) !important}

.mfe-mae{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(900px,84vw);margin:27px auto;
}
.mfe-card,.mae-card{
  border:1px solid #17648a;background:rgba(2,17,27,.82);padding:26px 22px;text-align:left;
}
.mfe-card strong,.mae-card strong{display:block;font-size:37px;color:#54d3ff;margin-bottom:10px}
.mae-card strong{color:#efb632}
.mfe-card b,.mae-card b{display:block;color:#eef8fd;font-size:11px;letter-spacing:1.5px;margin-bottom:11px}
.mfe-card small,.mae-card small{color:#bcd0db;line-height:1.55}

.safety-lock{
  width:min(520px,75vw);margin:22px auto;border:1px solid #a97818;color:#ffd168;background:rgba(40,28,5,.44);padding:15px;letter-spacing:4px;font-size:11px;box-shadow:0 0 28px rgba(239,182,50,.07);
}

.truth-grid{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:min(800px,82vw);margin:28px auto;
}

@media(max-width:850px){
  .dna-grid,.forensic-grid{grid-template-columns:repeat(2,1fr)}
  .dna-grid strong,.forensic-grid strong{grid-column:1/3}
  .mfe-mae{grid-template-columns:1fr}
  .outcome-compare,.truth-grid{grid-template-columns:1fr}
}

/* ===== CHAPTER 07 / DASHBOARD, WHATSAPP & COMMUNICATION ===== */
.chapter-seven{display:none}
.chapter-seven.active-chapter{display:block}
.chapter-six.hidden-chapter{display:none}

.comm-flow,
.runtime-live-flow,
.event-pipeline,
.contact-map{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:26px auto;
}

.comm-flow span,
.runtime-live-flow span,
.event-pipeline span,
.contact-map span{
  border:1px solid #17658c;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:16px 18px;
  font-size:11px;
  letter-spacing:2px;
}

.comm-flow strong,
.runtime-live-flow strong,
.event-pipeline strong,
.contact-map strong{
  border:1px solid #b57d16;
  background:rgba(40,28,5,.45);
  color:#ffd168;
  padding:17px 20px;
  font-size:11px;
  letter-spacing:2px;
}

.comm-flow i,
.runtime-live-flow i,
.event-pipeline i,
.contact-map i{
  color:#efb632;
  font-style:normal;
  font-size:19px;
}

.dashboard-vision,
.monitor-grid,
.health-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  width:min(900px,86vw);
  margin:25px auto;
}

.dashboard-vision span,
.monitor-grid div,
.health-grid div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:20px 12px;
  color:#a0e1ff;
}

.monitor-grid strong{
  display:block;
  margin-bottom:7px;
  font-size:14px;
  letter-spacing:2px;
}

.monitor-grid small{
  color:#c4d9e4;
}

.health-grid b{
  display:block;
  color:#a8dff7;
  font-size:10px;
  letter-spacing:1.5px;
  margin-bottom:10px;
}

.health-grid strong{
  color:#49f36c;
  font-size:17px;
  letter-spacing:2px;
}

.phone-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:35px;
  margin:25px auto;
}

.trade-event{
  width:300px;
  border:1px solid #17658c;
  background:rgba(2,18,29,.85);
  padding:25px;
  text-align:left;
}

.trade-event b{
  display:block;
  color:#69d7ff;
  margin-bottom:12px;
  letter-spacing:2px;
}

.trade-event small{
  color:#d0e0e8;
  line-height:1.7;
}

.phone-stage>i{
  color:#efb632;
  font-size:30px;
  font-style:normal;
}

.phone-frame{
  width:180px;
  height:300px;
  border:2px solid #1a86b8;
  border-radius:25px;
  background:#030b11;
  padding:16px 11px;
  box-shadow:0 0 35px rgba(0,150,220,.15);
}

.phone-speaker{
  width:50px;
  height:4px;
  border-radius:5px;
  background:#174e68;
  margin:0 auto 18px;
}

.phone-screen{
  height:235px;
  border:1px solid #14516d;
  background:linear-gradient(180deg,#061522,#02080e);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:15px;
}

.phone-screen strong{
  color:#4ed1ff;
  margin-bottom:12px;
}

.phone-screen span{
  color:#ffd168;
  margin-bottom:12px;
}

.phone-screen small{
  color:#c3d5df;
  line-height:1.5;
}

.visible-world{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:min(800px,82vw);
  margin:25px auto;
}

.visible-backend{
  border:1px solid #b47d17;
  color:#ffd168;
  background:rgba(40,28,5,.45);
  padding:18px 35px;
  letter-spacing:3px;
}

.visible-world>i{
  color:#efb632;
  font-style:normal;
  font-size:24px;
}

.visible-middle,
.visible-front{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.visible-middle span,
.visible-front span{
  min-width:150px;
  border:1px solid #17658b;
  background:rgba(2,18,28,.82);
  color:#9edfff;
  padding:16px;
  letter-spacing:2px;
  font-size:11px;
}

@media(max-width:850px){
  .dashboard-vision,
  .monitor-grid,
  .health-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .phone-stage{
    flex-direction:column;
  }

  .phone-stage>i{
    transform:rotate(90deg);
  }
}

/* ===== CHAPTER 08 / ERRORS, REPAIRS & EVOLUTION ===== */
.chapter-eight{display:none}
.chapter-eight.active-chapter{display:block}
.chapter-seven.hidden-chapter{display:none}

.evolution-cycle,
.forensic-timeline,
.rollback-flow{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:26px auto;
}

.evolution-cycle span,
.forensic-timeline span,
.rollback-flow span{
  border:1px solid #17658c;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:16px 18px;
  font-size:11px;
  letter-spacing:2px;
}

.evolution-cycle strong,
.forensic-timeline strong,
.rollback-flow strong{
  border:1px solid #b57d16;
  background:rgba(40,28,5,.45);
  color:#ffd168;
  padding:17px 20px;
  font-size:11px;
  letter-spacing:2px;
}

.evolution-cycle i,
.forensic-timeline i,
.rollback-flow i{
  color:#efb632;
  font-style:normal;
  font-size:19px;
}

.compiler-panel{
  width:min(700px,82vw);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin:30px auto;
}

.compiler-panel span,
.compiler-panel strong{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:24px 12px;
  letter-spacing:2px;
}

.compiler-panel span{color:#9edfff}
.compiler-panel strong{color:#4bf06d}
.compiler-panel strong:last-child{color:#ffd168}

.diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  width:min(920px,86vw);
  margin:25px auto;
}

.diagnostic-grid span,
.diagnostic-grid strong{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:16px 8px;
  color:#9edfff;
  font-size:10px;
  letter-spacing:1.4px;
}

.diagnostic-grid strong{
  grid-column:1/5;
  border-color:#aa7717;
  color:#ffd168;
}

.recovery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(900px,86vw);
  margin:25px auto;
}

.recovery-grid div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:21px 12px;
}

.recovery-grid b{
  display:block;
  color:#9edfff;
  letter-spacing:2px;
  font-size:12px;
  margin-bottom:8px;
}

.recovery-grid small{
  color:#d0e0e8;
}

.deployment-stack{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  width:min(930px,86vw);
  margin:25px auto;
}

.deployment-stack span,
.deployment-stack strong{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:17px 9px;
  color:#9edfff;
  font-size:10px;
  letter-spacing:1.5px;
}

.deployment-stack strong{
  border-color:#ab7818;
  color:#ffd168;
}

.problem-evolution{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:min(900px,84vw);
  margin:25px auto;
}

.problem-evolution div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:22px 18px;
  text-align:left;
}

.problem-evolution b{
  display:block;
  color:#9edfff;
  margin-bottom:9px;
  letter-spacing:2px;
}

.problem-evolution small{
  color:#ffd168;
}

.engineering-truth{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  width:min(820px,82vw);
  margin:26px auto;
}

.engineering-truth span,
.engineering-truth strong{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:20px 12px;
  color:#9edfff;
  letter-spacing:2px;
  font-size:11px;
}

.engineering-truth strong{
  grid-column:1/3;
  border-color:#ad7918;
  color:#ffd168;
}

@media(max-width:850px){
  .compiler-panel,
  .recovery-grid,
  .deployment-stack,
  .diagnostic-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .diagnostic-grid strong{
    grid-column:1/3;
  }

  .problem-evolution{
    grid-template-columns:1fr;
  }
}

/* ===== CHAPTER 09 / ZENITH TODAY ===== */
.chapter-nine{display:none}
.chapter-nine.active-chapter{display:block}
.chapter-eight.hidden-chapter{display:none}

.today-identity{
  width:min(680px,80vw);
  margin:28px auto;
  display:grid;
  gap:8px;
}

.today-identity span,
.today-identity strong,
.today-identity small{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:15px 12px;
  letter-spacing:3px;
}

.today-identity span{color:#78d9ff}
.today-identity strong{color:#ffd168;border-color:#aa7818;font-size:17px}
.today-identity small{color:#52ef70}

.build-card{
  width:min(680px,82vw);
  margin:27px auto;
  border:1px solid #a97918;
  background:linear-gradient(180deg,rgba(39,27,4,.45),rgba(2,16,26,.8));
  padding:25px 20px;
  box-shadow:0 0 30px rgba(239,182,50,.07);
}

.build-card>small{
  display:block;
  color:#5fd3ff;
  letter-spacing:4px;
  margin-bottom:16px;
}

.build-card>strong{
  color:#ffd168;
  font-size:clamp(14px,1.5vw,20px);
  line-height:1.5;
  letter-spacing:1px;
}

.build-version{
  margin-top:17px;
  border-top:1px solid rgba(239,182,50,.28);
  padding-top:13px;
  color:#dcebf2;
  font-family:Consolas,monospace;
}

.today-status-grid,
.validation-grid{
  width:min(920px,86vw);
  margin:25px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}

.today-status-grid div,
.validation-grid span{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:18px 10px;
}

.today-status-grid b{
  display:block;
  color:#8ddfff;
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:9px;
}

.today-status-grid strong{
  color:#51ef70;
  font-size:14px;
  letter-spacing:1.5px;
}

.validation-grid span{
  color:#9edfff;
  font-size:10px;
  letter-spacing:1.5px;
}

.today-entry-flow,
.today-reentry,
.today-road{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:27px auto;
}

.today-entry-flow span,
.today-reentry span,
.today-road span{
  border:1px solid #17658c;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:16px 17px;
  font-size:10px;
  letter-spacing:2px;
}

.today-entry-flow strong,
.today-reentry strong,
.today-road strong{
  border:1px solid #ad7918;
  background:rgba(39,27,4,.46);
  color:#ffd168;
  padding:17px 19px;
  font-size:10px;
  letter-spacing:2px;
}

.today-entry-flow i,
.today-reentry i,
.today-road i{
  color:#efb632;
  font-style:normal;
  font-size:20px;
}

.today-example{
  width:min(650px,78vw);
  margin:20px auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:15px;
  align-items:center;
}

.today-example div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:18px;
}

.today-example b,
.today-truth b{
  display:block;
  color:#8edfff;
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.today-example strong{
  color:#f0f8fc;
}

.today-not-equal,
.risk-versus{
  color:#efb632 !important;
  border:0 !important;
  background:none !important;
  font-size:28px;
}

.hold-protection{
  width:min(620px,78vw);
  margin:30px auto;
  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;
  border:1px solid #a97918;
  background:rgba(30,22,5,.35);
}

.hold-clock{
  font-size:55px;
  color:#ffd168;
  padding:25px;
  border-right:1px solid #a97918;
  font-family:Consolas,monospace;
}

.hold-copy{
  padding:22px;
  text-align:left;
}

.hold-copy b{
  display:block;
  color:#ffd168;
  font-size:18px;
  letter-spacing:3px;
}

.hold-copy span{
  display:block;
  margin-top:8px;
  color:#cfe3ed;
}

.risk-balance{
  width:min(820px,84vw);
  margin:28px auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.risk-balance>div:not(.risk-versus){
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:23px 14px;
}

.risk-balance b{
  display:block;
  color:#92defe;
  letter-spacing:2px;
  font-size:11px;
}

.risk-balance strong{
  display:block;
  color:#f5f9fb;
  font-size:24px;
  margin:10px;
}

.risk-balance small{
  color:#c3d6e0;
}

.risk-emergency{
  border-color:#aa7818 !important;
}

.risk-emergency strong{
  color:#ffd168 !important;
}

.today-ecosystem{
  width:min(900px,86vw);
  margin:25px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.today-ecosystem span{
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  color:#9edfff;
  padding:17px 8px;
  font-size:10px;
  letter-spacing:1.5px;
}

.today-ecosystem span:first-child{
  border-color:#a97918;
  color:#ffd168;
}

.today-truth{
  width:min(830px,84vw);
  margin:27px auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
}

.today-truth>div:not(.today-not-equal){
  border:1px solid #17648a;
  background:rgba(2,17,27,.82);
  padding:22px;
}

.today-truth span{
  display:block;
  color:#d1e0e8;
  margin:7px 0;
}

@media(max-width:850px){
  .today-status-grid,
  .validation-grid,
  .today-ecosystem{
    grid-template-columns:repeat(2,1fr);
  }

  .today-example,
  .risk-balance,
  .today-truth{
    grid-template-columns:1fr;
  }

  .hold-protection{
    grid-template-columns:1fr;
  }

  .hold-clock{
    border-right:0;
    border-bottom:1px solid #a97918;
  }
}

/* =========================================================
   CHAPTER 10 — THE FUTURE OF ZENITH
   ========================================================= */

.chapter-ten{
  display:none;
}

.chapter-ten.active-chapter{
  display:block;
}

.chapter-nine.hidden-chapter{
  display:none;
}

.future-opening,
.future-data-flow,
.future-vision-line,
.finale-history{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  width:min(1000px,88vw);
  margin:28px auto;
}

.future-opening span,
.future-data-flow span,
.future-vision-line span,
.finale-history span{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  color:#9edfff;
  padding:16px 17px;
  font-size:10px;
  letter-spacing:2px;
}

.future-opening strong,
.future-data-flow strong,
.future-vision-line strong,
.finale-history strong{
  border:1px solid #b27b18;
  background:rgba(42,29,4,.48);
  color:#ffd168;
  padding:17px 19px;
  font-size:10px;
  letter-spacing:2px;
}

.future-opening i,
.future-data-flow i,
.future-vision-line i,
.finale-history i{
  color:#efb632;
  font-style:normal;
  font-size:18px;
}

.future-learning{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  width:min(980px,88vw);
  margin:28px auto;
}

.future-learning>div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  padding:22px 15px;
}

.future-learning b{
  display:block;
  color:#39bfff;
  font-size:22px;
  margin-bottom:12px;
}

.future-learning strong{
  display:block;
  color:#e9f6fc;
  letter-spacing:1.5px;
  font-size:11px;
  margin-bottom:10px;
}

.future-learning small{
  color:#9fb9c7;
  line-height:1.5;
}

.future-learning .future-gold-card{
  border-color:#ad7918;
}

.future-learning .future-gold-card b,
.future-learning .future-gold-card strong{
  color:#ffd168;
}

.future-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(850px,84vw);
  margin:28px auto;
}

.future-metrics div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  padding:20px;
}

.future-metrics b{
  display:block;
  color:#9edfff;
  font-size:10px;
  letter-spacing:2px;
}

.future-metrics strong{
  display:block;
  color:#55ef72;
  font-size:25px;
  margin-top:8px;
}

.future-regimes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  width:min(820px,84vw);
  margin:26px auto 13px;
}

.future-regimes span{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  color:#9edfff;
  padding:18px 10px;
  font-size:10px;
  letter-spacing:2px;
}

.future-regime-core{
  width:min(820px,84vw);
  margin:0 auto 25px;
  padding:17px;
  border:1px solid #ad7918;
  color:#ffd168;
  background:rgba(40,28,4,.42);
  letter-spacing:2px;
  font-size:11px;
}

.future-autonomy{
  width:min(850px,84vw);
  margin:28px auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
}

.autonomy-left,
.autonomy-right{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  padding:21px;
}

.autonomy-left b,
.autonomy-right b{
  display:block;
  color:#9edfff;
  letter-spacing:3px;
  margin-bottom:12px;
}

.autonomy-right{
  border-color:#ad7918;
}

.autonomy-right b{
  color:#ffd168;
}

.autonomy-left span,
.autonomy-right span{
  display:block;
  color:#c8dce6;
  margin:7px;
}

.autonomy-center{
  color:#efb632;
  font-size:32px;
}

.future-explain{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  width:min(900px,86vw);
  margin:27px auto;
}

.future-explain span,
.future-explain strong{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  padding:18px 10px;
  color:#9edfff;
  font-size:10px;
  letter-spacing:1.5px;
}

.future-explain strong{
  border-color:#ad7918;
  color:#ffd168;
}

.future-platform{
  width:min(900px,86vw);
  margin:25px auto;
}

.future-platform-core{
  width:210px;
  margin:0 auto 16px;
  border:1px solid #ad7918;
  background:rgba(40,28,4,.45);
  color:#ffd168;
  padding:20px;
  font-size:17px;
  font-weight:700;
  letter-spacing:4px;
}

.future-platform-ring{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.future-platform-ring span{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  color:#9edfff;
  padding:16px 8px;
  font-size:10px;
  letter-spacing:1.5px;
}

.future-proof{
  width:min(920px,86vw);
  margin:27px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}

.future-proof div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.84);
  padding:20px 12px;
}

.future-proof small{
  display:block;
  color:#7ba6bb;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.future-proof strong{
  color:#d8e8ef;
  letter-spacing:1.5px;
  font-size:12px;
}

.future-proof-main{
  grid-column:1/4;
  border-color:#ad7918 !important;
  background:rgba(40,28,4,.44) !important;
}

.future-proof-main small,
.future-proof-main strong{
  color:#ffd168;
}

.story-finale{
  text-align:center;
}

.finale-logo{
  width:90px;
  height:90px;
  border:3px solid #efb632;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 25px;
  color:#ffd168;
  font-size:52px;
  font-weight:800;
  box-shadow:
    0 0 20px rgba(239,182,50,.22),
    inset 0 0 20px rgba(239,182,50,.08);
}

.finale-title{
  font-size:clamp(40px,5vw,75px);
}

.finale-history{
  margin-top:30px;
}

.finale-history span,
.finale-history strong{
  padding:11px 12px;
  font-size:8px;
}

.finale-statement{
  width:min(800px,82vw);
  margin:27px auto;
  color:#d8e7ee;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.7;
}

.finale-values{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:25px auto;
}

.finale-values span{
  color:#82d9ff;
  letter-spacing:3px;
  font-size:10px;
}

.finale-values span:not(:last-child)::after{
  content:" •";
  color:#efb632;
  margin-left:12px;
}

.finale-signature{
  margin-top:35px;
  padding-top:20px;
  border-top:1px solid rgba(41,171,226,.25);
  width:min(550px,70vw);
  margin-left:auto;
  margin-right:auto;
}

.finale-signature small{
  display:block;
  color:#43c7ff;
  letter-spacing:7px;
  margin-bottom:10px;
}

.finale-signature strong{
  display:block;
  color:#ffd168;
  letter-spacing:5px;
  font-size:13px;
}

@media(max-width:900px){

  .future-learning{
    grid-template-columns:repeat(2,1fr);
  }

  .future-platform-ring{
    grid-template-columns:repeat(2,1fr);
  }

  .future-autonomy{
    grid-template-columns:1fr;
  }

  .autonomy-center{
    transform:rotate(90deg);
  }
}

@media(max-width:700px){

  .future-metrics,
  .future-regimes,
  .future-explain,
  .future-proof{
    grid-template-columns:1fr;
  }

  .future-proof-main{
    grid-column:auto;
  }

  .future-learning{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FINAL STORY END / COMPLETION SCREEN
   ========================================================= */

.story-complete{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(0,137,220,.20),transparent 32%),
    radial-gradient(circle at 50% 52%,rgba(239,182,50,.07),transparent 20%),
    linear-gradient(135deg,#010409,#03101a 50%,#010409);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .8s ease,visibility .8s ease;
}

.story-complete.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.story-complete:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(#24aef2 1px,transparent 1.5px),
    radial-gradient(#ffffff 1px,transparent 1.4px);
  background-size:75px 75px,121px 121px;
  background-position:0 0,40px 35px;
  opacity:.09;
  animation:completeStars 35s linear infinite;
}

.complete-core{
  position:relative;
  z-index:2;
  width:min(920px,88vw);
  text-align:center;
  padding:40px;
}

.complete-logo{
  width:110px;
  height:110px;
  margin:0 auto 26px;
  border:4px solid #efb632;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffd168;
  font-size:64px;
  font-weight:900;
  box-shadow:
    0 0 55px rgba(239,182,50,.30),
    inset 0 0 28px rgba(239,182,50,.08);
  animation:completeLogo 2.6s ease-in-out infinite;
}

.complete-kicker{
  color:#49caff;
  font-size:11px;
  letter-spacing:7px;
  margin-bottom:22px;
}

.complete-core h2{
  margin:0;
  color:#f1f7fa;
  font-size:clamp(38px,5vw,72px);
  letter-spacing:7px;
  font-weight:400;
}

.complete-core h2 span{
  display:block;
  color:#efb632;
  margin-top:8px;
}

.complete-core>p{
  color:#c7dce6;
  font-size:17px;
  line-height:1.7;
  margin:25px auto 30px;
  max-width:720px;
}

.complete-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(700px,80vw);
  margin:30px auto;
}

.complete-stats div{
  border:1px solid #17648a;
  background:rgba(2,17,27,.78);
  padding:20px;
}

.complete-stats strong{
  display:block;
  color:#ffd168;
  font-size:26px;
  margin-bottom:6px;
}

.complete-stats small{
  color:#7fdcff;
  font-size:9px;
  letter-spacing:3px;
}

.complete-message{
  width:min(720px,82vw);
  margin:32px auto;
  border-top:1px solid rgba(40,166,224,.32);
  border-bottom:1px solid rgba(40,166,224,.32);
  padding:23px;
}

.complete-message strong{
  display:block;
  color:#ffd168;
  letter-spacing:5px;
  margin-bottom:11px;
}

.complete-message small{
  color:#abc4d0;
  line-height:1.6;
}

.complete-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:32px;
}

.complete-actions button{
  min-width:230px;
  padding:16px 20px;
  border:1px solid #1681b2;
  background:#03111b;
  color:#71d7ff;
  font-size:11px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.25s;
}

.complete-actions button:last-child{
  border-color:#a97918;
  color:#ffd168;
}

.complete-actions button:hover{
  box-shadow:0 0 22px rgba(0,170,255,.25);
  color:white;
}

@keyframes completeLogo{
  0%,100%{transform:scale(.96);filter:brightness(.95)}
  50%{transform:scale(1.05);filter:brightness(1.25)}
}

@keyframes completeStars{
  to{transform:translate3d(80px,45px,0)}
}

@media(max-width:700px){
  .complete-stats{
    grid-template-columns:1fr;
  }

  .complete-actions{
    flex-direction:column;
    align-items:center;
  }
}

/* =========================================================
   STEP 15 - CUSTOMER MODE
   ========================================================= */

body.customer-mode .scene-eyebrow{
  color:#63d8ff;
}

body.customer-mode .chapter-kicker{
  color:#6fdbff;
}

body.customer-mode .chapter-number{
  opacity:.45;
}

body.customer-mode .build-version,
body.customer-mode .safety-lock,
body.customer-mode .story-read-timer{
  display:none !important;
}

body.customer-mode .scene-copy{
  max-width:780px !important;
  font-size:clamp(17px,1.35vw,21px) !important;
  line-height:1.75 !important;
}

body.customer-mode .scene-big-title{
  max-width:950px !important;
}

.customer-mode-badge{
  position:fixed;
  left:24px;
  top:22px;
  z-index:10050;
  border:1px solid rgba(34,165,224,.65);
  background:rgba(2,15,24,.88);
  color:#67d9ff;
  padding:10px 14px;
  font-size:9px;
  letter-spacing:2px;
  display:none;
}

body.customer-mode .customer-mode-badge{
  display:block;
}

.customer-mode-badge strong{
  color:#ffd168;
}

body.customer-mode .technical-only{
  display:none !important;
}

body.customer-mode .story-controls{
  opacity:.88;
}

body.customer-mode .story-nav{
  min-width:120px;
}

body.customer-mode .story-progress-label{
  color:#70d9ff;
}

body.customer-mode .story-progress-count{
  color:#ffd168;
}

/* =========================================================
   STEP 16 - TECHNIKMODUS
   ========================================================= */

.tech-mode-badge{
  position:fixed;
  left:24px;
  top:22px;
  z-index:10055;
  display:none;
  border:1px solid rgba(239,182,50,.70);
  background:rgba(14,11,3,.90);
  color:#ffd168;
  padding:10px 14px;
  font-size:9px;
  letter-spacing:2px;
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

body.tech-mode .tech-mode-badge{
  display:block;
}

.tech-mode-badge strong{
  color:#ffffff;
}

body.tech-mode .customer-mode-badge{
  display:none !important;
}

body.tech-mode .story-read-timer{
  display:block !important;
}

body.tech-mode .scene-eyebrow{
  color:#efb632;
}

body.tech-mode .chapter-kicker{
  color:#efb632;
}

body.tech-mode .scene-copy{
  max-width:900px !important;
}

body.tech-mode .technical-only{
  display:block !important;
}

body.tech-mode .story-progress-bar{
  background:linear-gradient(90deg,#21baff,#efb632);
  box-shadow:0 0 14px rgba(239,182,50,.35);
}

body.tech-mode .story-progress-count{
  color:#ffd168;
}

body.tech-mode .story-nav{
  border-color:#8b681d;
}

body.tech-mode .story-nav:hover:not(:disabled){
  border-color:#efb632;
  box-shadow:0 0 18px rgba(239,182,50,.20);
}

body.tech-mode .story-dots .dot.active{
  background:#efb632;
  border-color:#ffd168;
  box-shadow:0 0 14px rgba(239,182,50,.70);
}

body.tech-mode .build-version{
  display:block !important;
}

body.tech-mode .safety-lock{
  display:block !important;
}

/* =========================================================
   TECH-01 - TECHNICAL INTELLIGENCE OVERLAY
   ========================================================= */

.tech-intelligence-overlay{
  display:none;
}

body.tech-mode .tech-intelligence-overlay{
  display:block;
}

.tech-overlay-toggle{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10070;
  border:1px solid #a97918;
  background:rgba(14,10,2,.92);
  color:#ffd168;
  padding:12px 16px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

.tech-overlay-toggle:hover{
  border-color:#efb632;
  color:white;
}

.tech-overlay-panel{
  position:fixed;
  left:50%;
  bottom:78px;
  transform:translateX(-50%) translateY(20px);
  width:min(1240px,92vw);
  max-height:72vh;
  overflow:auto;
  z-index:10065;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  padding:20px;
  border:1px solid rgba(176,126,25,.65);
  background:
    linear-gradient(180deg,rgba(4,13,20,.97),rgba(2,8,13,.98));
  box-shadow:0 0 55px rgba(0,0,0,.65),0 0 25px rgba(239,182,50,.08);
  transition:.28s ease;
}

.tech-intelligence-overlay.open .tech-overlay-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.tech-overlay-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(239,182,50,.22);
  padding-bottom:14px;
  margin-bottom:18px;
}

.tech-overlay-head small{
  display:block;
  color:#4fc9ff;
  letter-spacing:4px;
  margin-bottom:5px;
}

.tech-overlay-head strong{
  color:#ffd168;
  letter-spacing:3px;
}

.tech-overlay-head button{
  width:34px;
  height:34px;
  border:1px solid #17648a;
  background:#03111b;
  color:#8edfff;
  cursor:pointer;
}

.tech-map-chain{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:12px auto;
}

.tech-map-chain.second{
  margin-top:18px;
}

.tech-map-chain>div{
  min-width:145px;
  border:1px solid #17648a;
  background:rgba(2,17,27,.9);
  padding:14px 12px;
  cursor:pointer;
  transition:.2s;
}

.tech-map-chain>div:hover,
.tech-map-chain>div.active{
  border-color:#efb632;
  background:rgba(45,31,4,.5);
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

.tech-map-chain b{
  display:block;
  color:#3fc7ff;
  font-size:9px;
  margin-bottom:5px;
}

.tech-map-chain strong{
  display:block;
  color:#e9f7fd;
  font-size:10px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.tech-map-chain small{
  color:#7898a8;
  font-size:8px;
}

.tech-map-chain i{
  color:#efb632;
  font-style:normal;
}

.tech-overlay-detail{
  width:min(980px,86vw);
  margin:22px auto 12px;
  border-top:1px solid rgba(39,160,214,.25);
  border-bottom:1px solid rgba(39,160,214,.25);
  padding:18px 22px;
  text-align:left;
}

.tech-overlay-detail small{
  display:block;
  color:#4fc9ff;
  letter-spacing:3px;
  margin-bottom:7px;
}

.tech-overlay-detail strong{
  display:block;
  color:#ffd168;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.tech-overlay-detail p{
  margin:0;
  color:#c7dbe5;
  line-height:1.65;
  font-size:12px;
}

.tech-overlay-footer{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(239,182,50,.16);
  margin-top:18px;
  padding-top:12px;
  color:#668594;
  font-size:8px;
  letter-spacing:2px;
}

@media(max-width:800px){
  .tech-overlay-panel{
    width:95vw;
  }

  .tech-map-chain{
    flex-direction:column;
  }

  .tech-map-chain i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-01 - TECHNICAL INTELLIGENCE OVERLAY
   ========================================================= */

.tech-intelligence-overlay{
  display:none;
}

body.tech-mode .tech-intelligence-overlay{
  display:block;
}

.tech-overlay-toggle{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10070;
  border:1px solid #a97918;
  background:rgba(14,10,2,.92);
  color:#ffd168;
  padding:12px 16px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

.tech-overlay-toggle:hover{
  border-color:#efb632;
  color:white;
}

.tech-overlay-panel{
  position:fixed;
  left:50%;
  bottom:78px;
  transform:translateX(-50%) translateY(20px);
  width:min(1240px,92vw);
  max-height:72vh;
  overflow:auto;
  z-index:10065;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  padding:20px;
  border:1px solid rgba(176,126,25,.65);
  background:
    linear-gradient(180deg,rgba(4,13,20,.97),rgba(2,8,13,.98));
  box-shadow:0 0 55px rgba(0,0,0,.65),0 0 25px rgba(239,182,50,.08);
  transition:.28s ease;
}

.tech-intelligence-overlay.open .tech-overlay-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.tech-overlay-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(239,182,50,.22);
  padding-bottom:14px;
  margin-bottom:18px;
}

.tech-overlay-head small{
  display:block;
  color:#4fc9ff;
  letter-spacing:4px;
  margin-bottom:5px;
}

.tech-overlay-head strong{
  color:#ffd168;
  letter-spacing:3px;
}

.tech-overlay-head button{
  width:34px;
  height:34px;
  border:1px solid #17648a;
  background:#03111b;
  color:#8edfff;
  cursor:pointer;
}

.tech-map-chain{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:12px auto;
}

.tech-map-chain.second{
  margin-top:18px;
}

.tech-map-chain>div{
  min-width:145px;
  border:1px solid #17648a;
  background:rgba(2,17,27,.9);
  padding:14px 12px;
  cursor:pointer;
  transition:.2s;
}

.tech-map-chain>div:hover,
.tech-map-chain>div.active{
  border-color:#efb632;
  background:rgba(45,31,4,.5);
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

.tech-map-chain b{
  display:block;
  color:#3fc7ff;
  font-size:9px;
  margin-bottom:5px;
}

.tech-map-chain strong{
  display:block;
  color:#e9f7fd;
  font-size:10px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.tech-map-chain small{
  color:#7898a8;
  font-size:8px;
}

.tech-map-chain i{
  color:#efb632;
  font-style:normal;
}

.tech-overlay-detail{
  width:min(980px,86vw);
  margin:22px auto 12px;
  border-top:1px solid rgba(39,160,214,.25);
  border-bottom:1px solid rgba(39,160,214,.25);
  padding:18px 22px;
  text-align:left;
}

.tech-overlay-detail small{
  display:block;
  color:#4fc9ff;
  letter-spacing:3px;
  margin-bottom:7px;
}

.tech-overlay-detail strong{
  display:block;
  color:#ffd168;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.tech-overlay-detail p{
  margin:0;
  color:#c7dbe5;
  line-height:1.65;
  font-size:12px;
}

.tech-overlay-footer{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(239,182,50,.16);
  margin-top:18px;
  padding-top:12px;
  color:#668594;
  font-size:8px;
  letter-spacing:2px;
}

@media(max-width:800px){
  .tech-overlay-panel{
    width:95vw;
  }

  .tech-map-chain{
    flex-direction:column;
  }

  .tech-map-chain i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-02 - CHAPTER TECHNICAL INSPECTOR
   ========================================================= */

.tech-chapter-inspector{
  display:none;
}

body.tech-mode .tech-chapter-inspector{
  display:block;
}

.tech-inspector-toggle{
  position:fixed;
  right:24px;
  bottom:70px;
  z-index:10072;
  min-width:122px;
  border:1px solid #17648a;
  background:rgba(2,15,24,.94);
  color:#63d5ff;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.22s;
}

.tech-inspector-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-inspector-panel{
  position:fixed;
  top:82px;
  right:25px;
  width:min(470px,88vw);
  max-height:calc(100vh - 175px);
  overflow-y:auto;
  z-index:10071;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(18px);
  border:1px solid rgba(28,117,158,.75);
  background:
    linear-gradient(180deg,rgba(2,15,24,.98),rgba(2,8,13,.98));
  box-shadow:
    0 0 45px rgba(0,0,0,.60),
    0 0 25px rgba(0,154,225,.08);
  transition:.28s ease;
}

.tech-chapter-inspector.open .tech-inspector-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}

.tech-inspector-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  border-bottom:1px solid rgba(31,142,190,.28);
}

.tech-inspector-head small{
  display:block;
  color:#52cfff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:6px;
}

.tech-inspector-head strong{
  color:#ffd168;
  font-size:12px;
  letter-spacing:1.6px;
}

.tech-inspector-head button{
  width:32px;
  height:32px;
  border:1px solid #17648a;
  background:#03111b;
  color:#76d9ff;
  cursor:pointer;
}

.tech-inspector-status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#16445b;
  border-bottom:1px solid #16445b;
}

.tech-inspector-status span{
  background:#03111b;
  padding:11px 7px;
  color:#718f9e;
  font-size:7px;
  letter-spacing:1px;
}

.tech-inspector-status strong{
  display:block;
  color:#54d2ff;
  margin-top:4px;
  font-size:9px;
}

.tech-inspector-modules{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  padding:18px;
}

.tech-inspector-module{
  position:relative;
  min-height:74px;
  border:1px solid #155b7d;
  background:rgba(3,18,29,.90);
  padding:13px;
  text-align:left;
}

.tech-inspector-module:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:#25b9f2;
}

.tech-inspector-module.gold{
  border-color:#8e6819;
  background:rgba(30,22,4,.55);
}

.tech-inspector-module.gold:before{
  background:#efb632;
}

.tech-inspector-module b{
  display:block;
  color:#7edcff;
  font-size:9px;
  letter-spacing:1.5px;
  margin-bottom:7px;
}

.tech-inspector-module.gold b{
  color:#ffd168;
}

.tech-inspector-module small{
  color:#9bb3bf;
  font-size:8px;
  line-height:1.4;
}

.tech-inspector-detail{
  margin:0 18px 18px;
  padding:17px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  text-align:left;
}

.tech-inspector-detail small{
  display:block;
  color:#efb632;
  letter-spacing:2px;
  font-size:8px;
  margin-bottom:8px;
}

.tech-inspector-detail p{
  color:#c8dbe5;
  font-size:11px;
  line-height:1.65;
  margin:0;
}

.tech-inspector-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 18px;
  border-top:1px solid rgba(31,142,190,.20);
  color:#557382;
  font-size:7px;
  letter-spacing:1.3px;
}

@media(max-width:750px){
  .tech-inspector-panel{
    top:70px;
    right:2.5vw;
    width:95vw;
  }

  .tech-inspector-modules{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-03 - TECHNICAL DEEP DIVE
   ========================================================= */

.tech-deep-dive{
  display:none;
}

body.tech-mode .tech-deep-dive{
  display:block;
}

.tech-deep-dive-toggle{
  position:fixed;
  right:24px;
  bottom:116px;
  z-index:10075;
  min-width:122px;
  border:1px solid #8d6719;
  background:rgba(25,18,3,.96);
  color:#ffd168;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.22s;
}

.tech-deep-dive-toggle:hover{
  border-color:#efb632;
  color:#fff;
  box-shadow:0 0 22px rgba(239,182,50,.18);
}

.tech-deep-dive-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1120px,92vw);
  max-height:82vh;
  overflow-y:auto;
  z-index:10074;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(174,124,24,.75);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,132,208,.12),transparent 38%),
    linear-gradient(180deg,rgba(3,15,24,.99),rgba(1,7,12,.995));
  box-shadow:
    0 0 70px rgba(0,0,0,.78),
    0 0 34px rgba(239,182,50,.09);
  transition:.28s ease;
}

.tech-deep-dive.open .tech-deep-dive-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.deep-dive-head{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid rgba(239,182,50,.25);
  background:rgba(2,11,18,.98);
}

.deep-dive-head small{
  display:block;
  color:#4dcaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:7px;
}

.deep-dive-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.deep-dive-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#82ddff;
  cursor:pointer;
  font-size:18px;
}

.deep-dive-status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#16475f;
  border-bottom:1px solid #16475f;
}

.deep-dive-status span{
  background:#03111b;
  color:#668999;
  padding:12px 15px;
  font-size:8px;
  letter-spacing:1.5px;
}

.deep-dive-status strong{
  display:block;
  margin-top:4px;
  color:#55d0ff;
  font-size:10px;
}

.deep-dive-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  padding:18px 22px 5px;
}

.deep-dive-tabs button{
  min-height:42px;
  border:1px solid #155c7f;
  background:rgba(3,18,29,.92);
  color:#7bcfec;
  font-size:8px;
  letter-spacing:1.4px;
  cursor:pointer;
  transition:.2s;
}

.deep-dive-tabs button:hover{
  border-color:#36bdf6;
  color:#fff;
}

.deep-dive-tabs button.active{
  border-color:#b68019;
  color:#ffd168;
  background:rgba(43,30,4,.55);
  box-shadow:0 0 18px rgba(239,182,50,.07);
}

.deep-dive-content{
  padding:28px 32px 30px;
  text-align:left;
}

.deep-dive-label{
  color:#4ccaff;
  font-size:9px;
  letter-spacing:4px;
  margin-bottom:10px;
}

.deep-dive-content h3{
  margin:0 0 17px;
  color:#ffd168;
  font-size:clamp(18px,2vw,27px);
  letter-spacing:1.5px;
  font-weight:500;
}

.deep-dive-content>p{
  max-width:980px;
  margin:0;
  color:#c7dae4;
  font-size:13px;
  line-height:1.75;
}

.deep-dive-flow{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:27px 0;
  padding:20px 0;
  border-top:1px solid rgba(32,143,191,.20);
  border-bottom:1px solid rgba(32,143,191,.20);
}

.deep-dive-flow span{
  border:1px solid #17648a;
  background:rgba(3,18,29,.9);
  color:#91defb;
  padding:13px 15px;
  font-size:9px;
  letter-spacing:1.5px;
}

.deep-dive-flow span:last-child{
  border-color:#a97818;
  color:#ffd168;
  background:rgba(39,27,4,.45);
}

.deep-dive-flow i{
  color:#efb632;
  font-style:normal;
  font-size:16px;
}

.deep-dive-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:22px;
}

.deep-dive-meta div{
  border:1px solid #155774;
  background:rgba(2,15,24,.80);
  padding:15px;
}

.deep-dive-meta small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:7px;
}

.deep-dive-meta strong{
  color:#70d9ff;
  font-size:10px;
  letter-spacing:1.5px;
}

.deep-dive-meta div:last-child strong{
  color:#ffd168;
}

.deep-dive-footer{
  display:flex;
  justify-content:space-between;
  padding:13px 22px;
  border-top:1px solid rgba(239,182,50,.16);
  color:#526f7e;
  font-size:7px;
  letter-spacing:1.5px;
}

body.customer-mode .tech-deep-dive{
  display:none !important;
}

@media(max-width:850px){
  .deep-dive-tabs{
    grid-template-columns:repeat(2,1fr);
  }

  .deep-dive-meta{
    grid-template-columns:1fr;
  }

  .tech-deep-dive-panel{
    width:96vw;
    max-height:86vh;
  }
}

/* =========================================================
   TECH-04 - LIVE ARCHITECTURE TRACE
   ========================================================= */

.tech-live-trace{
  display:none;
}

body.tech-mode .tech-live-trace{
  display:block;
}

body.customer-mode .tech-live-trace{
  display:none !important;
}

.tech-live-trace-toggle{
  position:fixed;
  right:24px;
  bottom:162px;
  z-index:10080;
  min-width:122px;
  border:1px solid #17729c;
  background:rgba(2,15,24,.96);
  color:#65d8ff;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.22s;
}

.tech-live-trace-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-live-trace-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1280px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10079;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(24,118,159,.78);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,153,230,.14),transparent 34%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.78);
  transition:.28s ease;
}

.tech-live-trace.open .tech-live-trace-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.live-trace-head{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(36,164,218,.24);
  background:rgba(2,11,18,.98);
}

.live-trace-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.live-trace-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.live-trace-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#7cdcff;
  cursor:pointer;
}

.live-trace-status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#16475f;
}

.live-trace-status span{
  background:#03111b;
  padding:11px 14px;
  color:#698a99;
  font-size:8px;
  letter-spacing:1.4px;
}

.live-trace-status strong{
  display:block;
  color:#58d1ff;
  margin-top:4px;
}

.live-trace-controls{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:18px 18px 8px;
}

.live-trace-controls button{
  min-width:150px;
  border:1px solid #17648a;
  background:#03111b;
  color:#7cdcff;
  padding:11px 14px;
  font-size:8px;
  letter-spacing:1.5px;
  cursor:pointer;
}

.live-trace-controls button:first-child{
  border-color:#a97918;
  color:#ffd168;
}

.live-trace-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  padding:22px;
}

.trace-node{
  width:145px;
  min-height:88px;
  padding:13px 11px;
  border:1px solid #165f82;
  background:rgba(3,18,29,.90);
  text-align:left;
  transition:.25s;
}

.trace-node b{
  display:block;
  color:#4ecbff;
  font-size:8px;
  margin-bottom:7px;
}

.trace-node strong{
  display:block;
  color:#eaf7fc;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:7px;
}

.trace-node small{
  color:#7897a6;
  font-size:7px;
  line-height:1.4;
}

.trace-node.active{
  border-color:#efb632;
  background:rgba(44,31,4,.55);
  box-shadow:
    0 0 25px rgba(239,182,50,.18),
    inset 0 0 20px rgba(239,182,50,.05);
  transform:translateY(-3px);
}

.trace-node.done{
  border-color:#1a9bce;
  background:rgba(2,29,42,.72);
}

.live-trace-flow>i{
  color:#efb632;
  font-style:normal;
  font-size:15px;
}

.live-trace-detail{
  width:min(980px,88vw);
  margin:5px auto 20px;
  padding:18px 20px;
  border-top:1px solid rgba(36,158,209,.22);
  border-bottom:1px solid rgba(36,158,209,.22);
  text-align:left;
}

.live-trace-detail small{
  display:block;
  color:#4fcaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.live-trace-detail strong{
  display:block;
  color:#ffd168;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.live-trace-detail p{
  color:#c8dbe5;
  font-size:12px;
  line-height:1.65;
  margin:0;
}

.live-trace-meter{
  width:min(980px,88vw);
  margin:0 auto 22px;
}

.live-trace-meter-head{
  display:flex;
  justify-content:space-between;
  color:#6e96a9;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.live-trace-meter-head strong{
  color:#ffd168;
}

.live-trace-meter-track{
  height:4px;
  background:#102c3e;
  overflow:hidden;
}

.live-trace-meter-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#1ba9ff,#49dbff,#efb632);
  box-shadow:0 0 12px rgba(38,183,255,.45);
  transition:width .35s ease;
}

.live-trace-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(36,158,209,.18);
  color:#526e7c;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:850px){
  .tech-live-trace-panel{
    width:96vw;
  }

  .live-trace-controls{
    flex-direction:column;
    align-items:center;
  }

  .live-trace-flow{
    flex-direction:column;
  }

  .live-trace-flow>i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-05 - EVIDENCE & VALIDATION MATRIX
   ========================================================= */

.tech-evidence-matrix{
  display:none;
}

body.tech-mode .tech-evidence-matrix{
  display:block;
}

body.customer-mode .tech-evidence-matrix{
  display:none !important;
}

.tech-evidence-toggle{
  position:fixed;
  right:24px;
  bottom:208px;
  z-index:10085;
  min-width:122px;
  border:1px solid #476e82;
  background:rgba(2,15,24,.96);
  color:#a7dff5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:2px;
  cursor:pointer;
  transition:.22s;
}

.tech-evidence-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-evidence-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1180px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10084;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(37,125,164,.75);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,139,207,.12),transparent 36%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.80);
  transition:.28s ease;
}

.tech-evidence-matrix.open .tech-evidence-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.evidence-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.evidence-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.evidence-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.evidence-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.evidence-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#154760;
}

.evidence-summary div{
  background:#03111b;
  padding:15px 18px;
}

.evidence-summary small{
  display:block;
  color:#688b9c;
  font-size:8px;
  letter-spacing:1.7px;
  margin-bottom:7px;
}

.evidence-summary strong{
  font-size:11px;
  letter-spacing:1.4px;
}

.ev-green{color:#4af06c}
.ev-gold{color:#ffd168}

.evidence-legend{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  padding:18px;
  color:#819eac;
  font-size:8px;
  letter-spacing:1.4px;
}

.evidence-legend i{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:7px;
  border-radius:50%;
}

.evidence-legend i.green{
  background:#49ef6b;
  box-shadow:0 0 10px rgba(73,239,107,.55);
}

.evidence-legend i.blue{
  background:#3bc7ff;
  box-shadow:0 0 10px rgba(59,199,255,.50);
}

.evidence-legend i.gold{
  background:#efb632;
  box-shadow:0 0 10px rgba(239,182,50,.50);
}

.evidence-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  padding:0 22px 24px;
}

.evidence-card{
  position:relative;
  min-height:123px;
  padding:14px;
  border:1px solid #175d7f;
  background:rgba(3,18,29,.88);
  text-align:left;
}

.evidence-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
}

.evidence-card.green:before{
  background:#49ef6b;
}

.evidence-card.blue:before{
  background:#36bfff;
}

.evidence-card.gold:before{
  background:#efb632;
}

.evidence-card.green{
  border-color:rgba(61,179,91,.55);
}

.evidence-card.gold{
  border-color:rgba(168,121,25,.65);
  background:rgba(30,22,4,.45);
}

.evidence-card b{
  display:block;
  color:#678b9c;
  font-size:8px;
  margin-bottom:8px;
}

.evidence-card strong{
  display:block;
  color:#e7f5fb;
  font-size:10px;
  letter-spacing:1.2px;
  margin-bottom:8px;
}

.evidence-card small{
  display:block;
  min-height:30px;
  color:#829fac;
  font-size:8px;
  line-height:1.45;
}

.evidence-card em{
  display:block;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(89,130,149,.18);
  font-style:normal;
  font-size:7px;
  letter-spacing:1.1px;
}

.evidence-card.green em{
  color:#4af06c;
}

.evidence-card.blue em{
  color:#55ceff;
}

.evidence-card.gold em{
  color:#ffd168;
}

.evidence-truth{
  width:min(980px,88vw);
  margin:0 auto 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:20px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
}

.evidence-truth>div:not(.evidence-not-equal){
  border:1px solid #175d7e;
  background:rgba(3,18,29,.78);
  padding:18px;
}

.evidence-truth small{
  display:block;
  color:#54ccfb;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.evidence-truth strong{
  color:#c9dde6;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.8px;
}

.evidence-truth>div:last-child{
  border-color:#98701a !important;
  background:rgba(35,25,4,.45) !important;
}

.evidence-truth>div:last-child small,
.evidence-truth>div:last-child strong{
  color:#ffd168;
}

.evidence-not-equal{
  color:#efb632;
  font-size:31px;
}

.evidence-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .evidence-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .evidence-truth{
    grid-template-columns:1fr;
  }

  .evidence-not-equal{
    text-align:center;
  }
}

@media(max-width:600px){
  .evidence-grid{
    grid-template-columns:1fr;
  }

  .evidence-summary{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-06 - SYSTEM DEPENDENCY MAP
   ========================================================= */

.tech-dependency-map{
  display:none;
}

body.tech-mode .tech-dependency-map{
  display:block;
}

body.customer-mode .tech-dependency-map{
  display:none !important;
}

.tech-dependency-toggle{
  position:fixed;
  right:24px;
  bottom:254px;
  z-index:10090;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#9fdcf5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.7px;
  cursor:pointer;
  transition:.22s;
}

.tech-dependency-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-dependency-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1180px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10089;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(35,124,163,.78);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,140,210,.12),transparent 35%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.80);
  transition:.28s ease;
}

.tech-dependency-map.open .tech-dependency-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.dependency-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.dependency-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.dependency-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.dependency-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.dependency-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#15465e;
}

.dependency-summary span{
  background:#03111b;
  padding:13px;
  color:#698b9b;
  font-size:7px;
  letter-spacing:1.2px;
}

.dependency-summary strong{
  display:block;
  margin-top:5px;
  color:#5bd1ff;
  font-size:9px;
}

.dependency-main{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:18px;
  padding:22px;
}

.dependency-core{
  border:1px solid rgba(27,103,139,.45);
  padding:18px;
  background:rgba(2,14,23,.55);
}

.dep-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.dep-node{
  min-height:87px;
  border:1px solid #175f81;
  background:rgba(3,18,29,.88);
  padding:13px;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}

.dep-node.core{
  width:min(300px,90%);
  margin:0 auto 14px;
  border-color:#a97918;
  background:rgba(38,27,4,.45);
}

.dep-node:hover,
.dep-node.active{
  border-color:#efb632;
  box-shadow:0 0 20px rgba(239,182,50,.10);
  transform:translateY(-2px);
}

.dep-node b{
  display:block;
  color:#4bcaff;
  font-size:8px;
  margin-bottom:7px;
}

.dep-node strong{
  display:block;
  color:#edf8fc;
  font-size:10px;
  letter-spacing:1.3px;
  margin-bottom:7px;
}

.dep-node small{
  color:#7795a4;
  font-size:8px;
}

.dependency-detail{
  border:1px solid rgba(169,121,24,.55);
  background:rgba(28,20,4,.35);
  padding:20px;
  text-align:left;
}

.dependency-detail>small{
  display:block;
  color:#4ecaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:8px;
}

.dependency-detail>strong{
  display:block;
  color:#ffd168;
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.dependency-detail>p{
  color:#c5d9e3;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.dependency-boxes{
  display:grid;
  gap:8px;
}

.dependency-boxes div{
  border:1px solid #175b7c;
  background:rgba(2,16,26,.75);
  padding:12px;
}

.dependency-boxes small{
  display:block;
  color:#688b9b;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.dependency-boxes strong{
  color:#72d8ff;
  font-size:9px;
  letter-spacing:1.1px;
}

.dep-critical{
  color:#ffd168 !important;
}

.dependency-matrix{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.dependency-matrix div{
  border:1px solid #175a7a;
  background:rgba(3,18,29,.82);
  padding:11px;
  text-align:left;
}

.dependency-matrix span{
  display:block;
  color:#dff4fc;
  font-size:9px;
  margin-bottom:5px;
}

.dependency-matrix b{
  display:block;
  color:#66cdef;
  font-size:7px;
  letter-spacing:1px;
  margin-bottom:7px;
}

.dependency-matrix em{
  font-style:normal;
  color:#ffd168;
  font-size:7px;
}

.dependency-truth{
  width:min(960px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.dependency-truth span{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.dependency-truth strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.dependency-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .dependency-main{
    grid-template-columns:1fr;
  }

  .dependency-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .dependency-matrix{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .dep-row{
    grid-template-columns:1fr;
  }

  .dependency-summary,
  .dependency-matrix{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-07 - FAILURE & RECOVERY INTELLIGENCE
   ========================================================= */

.tech-recovery-intelligence{
  display:none;
}

body.tech-mode .tech-recovery-intelligence{
  display:block;
}

body.customer-mode .tech-recovery-intelligence{
  display:none !important;
}

.tech-recovery-toggle{
  position:fixed;
  right:24px;
  bottom:300px;
  z-index:10095;
  min-width:122px;
  border:1px solid #6e5f2d;
  background:rgba(20,15,3,.96);
  color:#ffd168;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.8px;
  cursor:pointer;
  transition:.22s;
}

.tech-recovery-toggle:hover{
  border-color:#efb632;
  color:#fff;
  box-shadow:0 0 20px rgba(239,182,50,.14);
}

.tech-recovery-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1180px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10094;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(155,115,28,.70);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,135,205,.10),transparent 34%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.80);
  transition:.28s ease;
}

.tech-recovery-intelligence.open .tech-recovery-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.recovery-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(239,182,50,.20);
  background:rgba(2,11,18,.985);
}

.recovery-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.recovery-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.recovery-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.recovery-state-line{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:18px 20px;
  border-bottom:1px solid rgba(41,126,164,.18);
}

.recovery-state{
  min-width:150px;
  border:1px solid #175f81;
  background:rgba(3,18,29,.88);
  padding:12px;
  text-align:left;
}

.recovery-state b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:5px;
}

.recovery-state strong{
  display:block;
  color:#e8f6fb;
  font-size:9px;
  letter-spacing:1.3px;
  margin-bottom:5px;
}

.recovery-state small{
  color:#7897a6;
  font-size:7px;
}

.recovery-state.active{
  border-color:#efb632;
  background:rgba(42,30,4,.50);
  box-shadow:0 0 20px rgba(239,182,50,.10);
}

.recovery-state-line>i{
  color:#efb632;
  font-style:normal;
}

.recovery-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:18px;
  padding:22px;
}

.recovery-components{
  border:1px solid rgba(26,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:16px;
}

.recovery-components>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.recovery-component{
  width:100%;
  margin-bottom:8px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  color:#9fdcf3;
  padding:12px;
  text-align:left;
  font-size:9px;
  letter-spacing:1.2px;
  cursor:pointer;
}

.recovery-component:hover,
.recovery-component.active{
  border-color:#efb632;
  color:#ffd168;
  background:rgba(39,28,4,.42);
}

.recovery-detail{
  border:1px solid rgba(159,116,24,.58);
  background:rgba(30,22,4,.32);
  padding:20px;
  text-align:left;
}

.recovery-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.recovery-detail>strong{
  display:block;
  color:#ffd168;
  font-size:19px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.recovery-detail>p{
  color:#c6d9e2;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.recovery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}

.recovery-grid div{
  border:1px solid #175a79;
  background:rgba(2,16,26,.72);
  padding:13px;
}

.recovery-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.4px;
  margin-bottom:6px;
}

.recovery-grid strong{
  color:#72d7ff;
  font-size:9px;
  line-height:1.5;
}

.recovery-severity{
  margin-top:12px;
  border-top:1px solid rgba(239,182,50,.20);
  padding-top:12px;
}

.recovery-severity span{
  color:#698b9b;
  font-size:8px;
  letter-spacing:1.5px;
  margin-right:10px;
}

.recovery-severity strong{
  color:#ffd168;
  font-size:10px;
}

.recovery-validation{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:0 22px 22px;
}

.recovery-validation div{
  width:155px;
  min-height:82px;
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:12px;
  text-align:left;
}

.recovery-validation b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:5px;
}

.recovery-validation strong{
  display:block;
  color:#e9f6fb;
  font-size:9px;
  margin-bottom:5px;
}

.recovery-validation small{
  color:#7896a4;
  font-size:7px;
}

.recovery-validation>i{
  color:#efb632;
  font-style:normal;
}

.recovery-truth{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.recovery-truth small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.recovery-truth strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.recovery-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:850px){
  .recovery-layout{
    grid-template-columns:1fr;
  }

  .recovery-grid{
    grid-template-columns:1fr;
  }

  .recovery-state-line,
  .recovery-validation{
    flex-direction:column;
  }

  .recovery-state-line>i,
  .recovery-validation>i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-08 - SECURITY & CONTROL BOUNDARIES
   ========================================================= */

.tech-security-boundaries{
  display:none;
}

body.tech-mode .tech-security-boundaries{
  display:block;
}

body.customer-mode .tech-security-boundaries{
  display:none !important;
}

.tech-security-toggle{
  position:fixed;
  right:24px;
  bottom:346px;
  z-index:10100;
  min-width:122px;
  border:1px solid #4b6370;
  background:rgba(2,15,24,.96);
  color:#b2e6fa;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.8px;
  cursor:pointer;
  transition:.22s;
}

.tech-security-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-security-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1200px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10099;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,142,211,.11),transparent 35%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-security-boundaries.open .tech-security-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.security-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.security-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.security-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.security-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.security-authority-line{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  padding:20px 22px;
}

.security-authority{
  border:1px solid #175d7e;
  background:rgba(3,18,29,.82);
  padding:16px;
  text-align:left;
}

.security-authority.primary{
  border-color:#a97918;
  background:rgba(37,27,4,.45);
}

.security-authority small{
  display:block;
  color:#5acfff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:6px;
}

.security-authority strong{
  display:block;
  color:#eef8fc;
  font-size:12px;
  letter-spacing:1.4px;
  margin-bottom:7px;
}

.security-authority.primary strong{
  color:#ffd168;
}

.security-authority span{
  color:#819eac;
  font-size:9px;
}

.security-not-equal{
  color:#efb632;
  font-size:30px;
}

.security-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:18px;
  padding:0 22px 22px;
}

.security-layers{
  border:1px solid rgba(27,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:16px;
}

.security-layers>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.security-layer{
  width:100%;
  margin-bottom:8px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  padding:11px 12px;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}

.security-layer:hover,
.security-layer.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.security-layer b{
  display:inline-block;
  color:#4ccaff;
  font-size:8px;
  width:28px;
}

.security-layer strong{
  color:#dff4fb;
  font-size:9px;
  letter-spacing:1.1px;
}

.security-layer span{
  display:block;
  margin-left:28px;
  margin-top:4px;
  color:#7897a6;
  font-size:7px;
  letter-spacing:1px;
}

.security-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
  text-align:left;
}

.security-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.security-detail>strong{
  display:block;
  color:#ffd168;
  font-size:19px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.security-detail>p{
  color:#c7dae4;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.security-permissions{
  display:grid;
  gap:8px;
}

.security-permissions div{
  border:1px solid #175b7c;
  background:rgba(2,16,26,.72);
  padding:12px;
}

.security-permissions small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.security-permissions strong{
  color:#72d8ff;
  font-size:9px;
  line-height:1.5;
}

.security-high{
  color:#ffd168 !important;
}

.security-boundary-map{
  width:min(1000px,90vw);
  margin:0 auto 22px;
  padding:18px;
  border-top:1px solid rgba(37,151,200,.18);
  border-bottom:1px solid rgba(37,151,200,.18);
}

.boundary-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.boundary-row span,
.boundary-row strong{
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:11px 14px;
  font-size:8px;
  letter-spacing:1.2px;
}

.boundary-row span{
  color:#78d7f8;
}

.boundary-row strong{
  border-color:#9b7019;
  color:#ffd168;
  background:rgba(37,27,4,.40);
}

.boundary-row i{
  color:#efb632;
  font-style:normal;
}

.boundary-wall{
  width:min(760px,80vw);
  margin:14px auto;
  border-top:1px solid #2388b8;
  border-bottom:1px solid #2388b8;
  color:#5ccfff;
  padding:6px 0;
  text-align:center;
  font-size:7px;
  letter-spacing:3px;
}

.boundary-wall.gold{
  border-color:#a77919;
  color:#ffd168;
}

.security-matrix{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.security-matrix div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.82);
  padding:11px;
  text-align:left;
}

.security-matrix span{
  display:block;
  color:#e5f5fb;
  font-size:9px;
  margin-bottom:5px;
}

.security-matrix b{
  display:block;
  color:#65ceef;
  font-size:7px;
  letter-spacing:1px;
  margin-bottom:6px;
}

.security-matrix em{
  color:#ffd168;
  font-size:7px;
  font-style:normal;
}

.security-principles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.security-principles div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.74);
  padding:14px;
  text-align:left;
}

.security-principles b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:6px;
}

.security-principles strong{
  display:block;
  color:#ffd168;
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:7px;
}

.security-principles small{
  color:#819ca9;
  font-size:8px;
  line-height:1.5;
}

.security-truth{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.security-truth small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.security-truth strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.security-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .security-authority-line,
  .security-layout{
    grid-template-columns:1fr;
  }

  .security-not-equal{
    text-align:center;
  }

  .security-matrix,
  .security-principles{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .security-matrix,
  .security-principles{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-09 - DATA & EVENT FLOW INSPECTOR
   ========================================================= */

.tech-data-flow-inspector{
  display:none;
}

body.tech-mode .tech-data-flow-inspector{
  display:block;
}

body.customer-mode .tech-data-flow-inspector{
  display:none !important;
}

.tech-data-flow-toggle{
  position:fixed;
  right:24px;
  bottom:392px;
  z-index:10105;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.8px;
  cursor:pointer;
  transition:.22s;
}

.tech-data-flow-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-data-flow-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1220px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10104;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,142,211,.11),transparent 35%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-data-flow-inspector.open .tech-data-flow-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.data-flow-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.data-flow-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.data-flow-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.data-flow-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.data-flow-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#15465e;
}

.data-flow-summary span{
  background:#03111b;
  padding:13px;
  color:#698b9b;
  font-size:7px;
  letter-spacing:1.2px;
}

.data-flow-summary strong{
  display:block;
  margin-top:5px;
  color:#5bd1ff;
  font-size:9px;
}

.data-flow-main{
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:18px;
  padding:22px;
}

.data-flow-map{
  border:1px solid rgba(26,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:18px;
}

.flow-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}

.flow-node{
  width:150px;
  min-height:84px;
  border:1px solid #175f81;
  background:rgba(3,18,29,.88);
  padding:12px;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}

.flow-node:hover,
.flow-node.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
  box-shadow:0 0 20px rgba(239,182,50,.10);
}

.flow-node b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:6px;
}

.flow-node strong{
  display:block;
  color:#e8f6fb;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:6px;
}

.flow-node small{
  color:#7897a6;
  font-size:7px;
}

.flow-row>i{
  color:#efb632;
  font-style:normal;
}

.flow-divider{
  width:min(700px,90%);
  margin:15px auto;
  border-top:1px solid #2388b8;
  border-bottom:1px solid #2388b8;
  color:#5ccfff;
  padding:5px 0;
  text-align:center;
  font-size:7px;
  letter-spacing:3px;
}

.flow-divider.gold{
  border-color:#a77919;
  color:#ffd168;
}

.data-flow-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
  text-align:left;
}

.data-flow-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.data-flow-detail>strong{
  display:block;
  color:#ffd168;
  font-size:19px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.data-flow-detail>p{
  color:#c7dae4;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.data-flow-boxes{
  display:grid;
  gap:8px;
}

.data-flow-boxes div{
  border:1px solid #175b7c;
  background:rgba(2,16,26,.72);
  padding:12px;
}

.data-flow-boxes small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.data-flow-boxes strong{
  color:#72d8ff;
  font-size:9px;
  line-height:1.5;
}

.data-flow-type{
  margin-top:12px;
  border-top:1px solid rgba(239,182,50,.20);
  padding-top:12px;
}

.data-flow-type span{
  color:#698b9b;
  font-size:8px;
  letter-spacing:1.5px;
  margin-right:10px;
}

.data-flow-type strong{
  color:#ffd168;
  font-size:10px;
}

.data-flow-event-table{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin:0 22px 22px;
  background:#17435a;
}

.data-flow-event-head,
.data-flow-event-table>div:not(.data-flow-event-head){
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr 1.2fr;
  gap:1px;
}

.data-flow-event-head span{
  background:#03111b;
  color:#5bcfff;
  padding:10px;
  font-size:7px;
  letter-spacing:1.2px;
}

.data-flow-event-table>div:not(.data-flow-event-head)>*{
  background:rgba(3,18,29,.92);
  padding:10px;
  font-size:8px;
  text-align:left;
}

.data-flow-event-table>div:not(.data-flow-event-head)>span{
  color:#e8f6fb;
}

.data-flow-event-table b{
  color:#78d4f4;
  font-weight:500;
}

.data-flow-event-table em{
  color:#ffd168;
  font-style:normal;
}

.data-flow-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.data-flow-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.data-flow-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.data-flow-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .data-flow-main{
    grid-template-columns:1fr;
  }

  .data-flow-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .data-flow-event-head,
  .data-flow-event-table>div:not(.data-flow-event-head){
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .data-flow-summary{
    grid-template-columns:1fr;
  }

  .flow-row{
    flex-direction:column;
  }

  .flow-row>i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-10 - RUNTIME & SERVICE TOPOLOGY
   ========================================================= */

.tech-runtime-topology{
  display:none;
}

body.tech-mode .tech-runtime-topology{
  display:block;
}

body.customer-mode .tech-runtime-topology{
  display:none !important;
}

.tech-runtime-toggle{
  position:fixed;
  right:24px;
  bottom:438px;
  z-index:10110;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.8px;
  cursor:pointer;
  transition:.22s;
}

.tech-runtime-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  box-shadow:0 0 20px rgba(239,182,50,.12);
}

.tech-runtime-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1220px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10109;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,142,211,.11),transparent 35%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-runtime-topology.open .tech-runtime-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.runtime-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.runtime-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.runtime-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.runtime-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.runtime-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#15465e;
}

.runtime-summary span{
  background:#03111b;
  padding:13px;
  color:#698b9b;
  font-size:7px;
  letter-spacing:1.2px;
}

.runtime-summary strong{
  display:block;
  margin-top:5px;
  color:#5bd1ff;
  font-size:9px;
}

.runtime-topology-map{
  padding:20px 22px;
}

.runtime-layer{
  border:1px solid rgba(26,103,139,.40);
  background:rgba(2,14,23,.50);
  padding:14px;
}

.runtime-layer.public{
  border-color:rgba(159,116,24,.52);
}

.runtime-layer>small{
  display:block;
  text-align:center;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:11px;
}

.runtime-layer.public>small{
  color:#ffd168;
}

.runtime-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.runtime-node{
  width:180px;
  min-height:86px;
  border:1px solid #175f81;
  background:rgba(3,18,29,.88);
  padding:12px;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}

.runtime-node:hover,
.runtime-node.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
  box-shadow:0 0 20px rgba(239,182,50,.10);
}

.runtime-node b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:6px;
}

.runtime-node strong{
  display:block;
  color:#e8f6fb;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:6px;
}

.runtime-node span{
  color:#7897a6;
  font-size:7px;
}

.runtime-row>i,
.runtime-connector{
  color:#efb632;
  font-style:normal;
}

.runtime-connector{
  text-align:center;
  font-size:18px;
  padding:5px;
}

.runtime-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:18px;
  padding:0 22px 22px;
}

.runtime-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
  text-align:left;
}

.runtime-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.runtime-detail>strong{
  display:block;
  color:#ffd168;
  font-size:19px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.runtime-detail>p{
  color:#c7dae4;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.runtime-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.runtime-detail-grid div{
  border:1px solid #175b7c;
  background:rgba(2,16,26,.72);
  padding:12px;
}

.runtime-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.runtime-detail-grid strong{
  color:#72d8ff;
  font-size:9px;
  line-height:1.5;
}

.runtime-service-matrix{
  display:grid;
  gap:1px;
  background:#17435a;
}

.runtime-service-head,
.runtime-service-matrix>div:not(.runtime-service-head){
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  gap:1px;
}

.runtime-service-head span{
  background:#03111b;
  color:#5bcfff;
  padding:10px;
  font-size:7px;
  letter-spacing:1.2px;
}

.runtime-service-matrix>div:not(.runtime-service-head)>*{
  background:rgba(3,18,29,.92);
  padding:10px;
  font-size:8px;
  text-align:left;
}

.runtime-service-matrix span{
  color:#e8f6fb;
}

.runtime-service-matrix b{
  color:#78d4f4;
  font-weight:500;
}

.runtime-service-matrix em{
  color:#ffd168;
  font-style:normal;
}

.runtime-boundaries{
  width:min(980px,90vw);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:10px;
  align-items:center;
}

.runtime-boundaries div{
  border:1px solid #175c7d;
  background:rgba(3,18,29,.78);
  padding:14px;
  text-align:left;
}

.runtime-boundaries small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:6px;
}

.runtime-boundaries strong{
  color:#c7dce5;
  font-size:9px;
  line-height:1.5;
}

.runtime-boundaries i{
  color:#efb632;
  font-style:normal;
}

.runtime-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.runtime-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.runtime-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.runtime-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .runtime-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .runtime-layout{
    grid-template-columns:1fr;
  }

  .runtime-boundaries{
    grid-template-columns:1fr;
  }

  .runtime-boundaries i{
    text-align:center;
    transform:rotate(90deg);
  }
}

@media(max-width:600px){
  .runtime-summary{
    grid-template-columns:1fr;
  }

  .runtime-detail-grid{
    grid-template-columns:1fr;
  }

  .runtime-service-head,
  .runtime-service-matrix>div:not(.runtime-service-head){
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-11 - LIVE HEALTH & SERVICE STATUS
   ========================================================= */

.tech-health-status{
  display:none;
}

body.tech-mode .tech-health-status{
  display:block;
}

body.customer-mode .tech-health-status{
  display:none !important;
}

.tech-health-toggle{
  position:fixed;
  right:24px;
  bottom:484px;
  z-index:10115;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.8px;
  cursor:pointer;
  transition:.22s;
}

.tech-health-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-health-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1180px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10114;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,142,211,.11),transparent 35%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-health-status.open .tech-health-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.health-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(37,151,200,.22);
  background:rgba(2,11,18,.985);
}

.health-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.health-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.health-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
}

.health-mode-warning{
  margin:16px 22px 0;
  border:1px solid rgba(168,121,25,.58);
  background:rgba(33,24,4,.42);
  padding:14px;
  text-align:left;
}

.health-mode-warning span{
  color:#708f9e;
  font-size:7px;
  letter-spacing:1.5px;
  margin-right:10px;
}

.health-mode-warning strong{
  color:#ffd168;
  font-size:9px;
  letter-spacing:1.2px;
}

.health-mode-warning small{
  display:block;
  margin-top:7px;
  color:#91a8b3;
  font-size:8px;
}

.health-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:16px 22px;
}

.health-summary div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.82);
  padding:13px;
}

.health-summary small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:6px;
}

.health-summary strong{
  color:#e8f6fb;
  font-size:18px;
}

.health-layout{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:18px;
  padding:0 22px 22px;
}

.health-services{
  border:1px solid rgba(27,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:14px;
}

.health-service{
  width:100%;
  display:grid;
  grid-template-columns:28px 1fr auto auto;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.health-service:hover,
.health-service.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.health-service b{
  color:#4ccaff;
  font-size:8px;
}

.health-service strong{
  color:#dff4fb;
  font-size:9px;
  letter-spacing:1px;
}

.health-service em{
  font-style:normal;
  color:#8ca6b2;
  font-size:7px;
}

.health-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}

.health-dot.online{
  background:#48ef6a;
  box-shadow:0 0 10px rgba(72,239,106,.55);
}

.health-dot.degraded{
  background:#efb632;
  box-shadow:0 0 10px rgba(239,182,50,.50);
}

.health-dot.offline{
  background:#e95f5f;
  box-shadow:0 0 10px rgba(233,95,95,.48);
}

.health-dot.unknown{
  background:#6b8591;
}

.health-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
  text-align:left;
}

.health-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.health-detail>strong{
  display:block;
  color:#ffd168;
  font-size:19px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.health-detail>p{
  color:#c7dae4;
  font-size:11px;
  line-height:1.7;
  margin-bottom:18px;
}

.health-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.health-detail-grid div{
  border:1px solid #175b7c;
  background:rgba(2,16,26,.72);
  padding:12px;
}

.health-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.health-detail-grid strong{
  color:#72d8ff;
  font-size:9px;
  line-height:1.5;
}

.health-truth{
  margin-top:13px;
  border-top:1px solid rgba(239,182,50,.20);
  padding-top:12px;
}

.health-truth span{
  color:#688b9c;
  font-size:8px;
  letter-spacing:1.5px;
  margin-right:10px;
}

.health-truth strong{
  color:#ffd168;
  font-size:9px;
}

.health-status-legend{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.health-status-legend div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.78);
  padding:12px;
  text-align:left;
}

.health-status-legend strong{
  display:block;
  color:#e7f5fb;
  font-size:9px;
  margin:7px 0 5px;
}

.health-status-legend small{
  color:#7896a4;
  font-size:7px;
}

.health-check-flow{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:0 22px 22px;
}

.health-check-flow div{
  width:155px;
  min-height:82px;
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:12px;
  text-align:left;
}

.health-check-flow b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:5px;
}

.health-check-flow strong{
  display:block;
  color:#e9f6fb;
  font-size:9px;
  margin-bottom:5px;
}

.health-check-flow small{
  color:#7896a4;
  font-size:7px;
}

.health-check-flow>i{
  color:#efb632;
  font-style:normal;
}

.health-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
  text-align:left;
}

.health-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.health-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
}

.health-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
  letter-spacing:1.5px;
}

@media(max-width:900px){
  .health-layout{
    grid-template-columns:1fr;
  }

  .health-summary,
  .health-status-legend{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .health-summary,
  .health-status-legend,
  .health-detail-grid{
    grid-template-columns:1fr;
  }

  .health-check-flow{
    flex-direction:column;
  }

  .health-check-flow>i{
    transform:rotate(90deg);
  }
}

/* =========================================================
   TECH-12 - LIVE CONNECTIVITY & ENDPOINT MATRIX
   ========================================================= */

.tech-connectivity-matrix{
  display:none;
}

body.tech-mode .tech-connectivity-matrix{
  display:block;
}

body.customer-mode .tech-connectivity-matrix{
  display:none !important;
}

.tech-connectivity-toggle{
  position:fixed;
  right:24px;
  bottom:530px;
  z-index:10120;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.5px;
  cursor:pointer;
}

.tech-connectivity-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-connectivity-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1220px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10119;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-connectivity-matrix.open .tech-connectivity-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.connectivity-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  background:rgba(2,11,18,.985);
  border-bottom:1px solid rgba(37,151,200,.22);
}

.connectivity-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.connectivity-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.connectivity-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
}

.connectivity-warning{
  margin:16px 22px 0;
  border:1px solid #8d681c;
  background:rgba(34,25,4,.40);
  padding:13px;
}

.connectivity-warning span,
.connectivity-warning small{
  color:#869fab;
  font-size:7px;
}

.connectivity-warning strong{
  margin:0 12px;
  color:#ffd168;
  font-size:9px;
}

.connectivity-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:16px 22px;
}

.connectivity-summary div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.82);
  padding:12px;
}

.connectivity-summary small{
  display:block;
  color:#688b9c;
  font-size:7px;
  margin-bottom:6px;
}

.connectivity-summary strong{
  color:#e9f6fb;
  font-size:16px;
}

.connectivity-map{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding:0 22px 22px;
}

.connection-node{
  width:170px;
  min-height:92px;
  border:1px solid #175f81;
  background:rgba(3,18,29,.88);
  padding:12px;
  text-align:left;
  cursor:pointer;
}

.connection-node.active,
.connection-node:hover{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.connection-node b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:5px;
}

.connection-node strong{
  display:block;
  color:#e8f6fb;
  font-size:9px;
  margin-bottom:5px;
}

.connection-node small{
  display:block;
  color:#7897a6;
  font-size:7px;
  margin-bottom:8px;
}

.connection-node em{
  color:#ffd168;
  font-size:7px;
  font-style:normal;
}

.connectivity-map>i{
  color:#efb632;
  font-style:normal;
}

.connectivity-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:0 22px 22px;
}

.connectivity-detail,
.connectivity-verification{
  border:1px solid rgba(25,99,135,.55);
  background:rgba(3,18,29,.72);
  padding:18px;
}

.connectivity-detail>small,
.connectivity-verification>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.connectivity-detail>strong{
  display:block;
  color:#ffd168;
  font-size:17px;
  margin-bottom:9px;
}

.connectivity-detail>p{
  color:#c7dae4;
  font-size:10px;
  line-height:1.6;
}

.connectivity-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
  margin-top:14px;
}

.connectivity-detail-grid div{
  border:1px solid #175a79;
  background:rgba(2,15,24,.82);
  padding:10px;
}

.connectivity-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  margin-bottom:5px;
}

.connectivity-detail-grid strong{
  color:#72d8ff;
  font-size:8px;
}

.verify-chain{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}

.verify-chain div{
  flex:1;
  min-width:90px;
  border:1px solid #175a79;
  padding:9px;
}

.verify-chain b{
  display:block;
  color:#4ccaff;
  font-size:7px;
}

.verify-chain strong{
  display:block;
  color:#e8f6fb;
  font-size:8px;
  margin:4px 0;
}

.verify-chain span{
  color:#7897a6;
  font-size:7px;
}

.verify-chain>i{
  color:#efb632;
  font-style:normal;
}

.connectivity-truth{
  margin-top:16px;
  border-top:1px solid rgba(239,182,50,.20);
  padding-top:12px;
}

.connectivity-truth span{
  color:#688b9c;
  font-size:7px;
  margin-right:10px;
}

.connectivity-truth strong{
  color:#ffd168;
  font-size:8px;
}

.connectivity-table{
  margin:0 22px 22px;
  display:grid;
  gap:1px;
  background:#17435a;
}

.connectivity-table-head,
.connectivity-table>div:not(.connectivity-table-head){
  display:grid;
  grid-template-columns:1.3fr 1fr 1.3fr 1.1fr 1fr;
  gap:1px;
}

.connectivity-table-head span,
.connectivity-table>div:not(.connectivity-table-head)>*{
  background:#03111b;
  padding:9px;
  font-size:7px;
}

.connectivity-table-head span{
  color:#5bcfff;
}

.connectivity-table span{
  color:#e7f5fb;
}

.connectivity-table b{
  color:#78d4f4;
}

.connectivity-table em{
  color:#ffd168;
  font-style:normal;
}

.connectivity-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
}

.connectivity-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.connectivity-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
}

.connectivity-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
}

@media(max-width:900px){
  .connectivity-layout{
    grid-template-columns:1fr;
  }

  .connectivity-summary{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .connectivity-summary,
  .connectivity-detail-grid{
    grid-template-columns:1fr;
  }

  .connectivity-table-head,
  .connectivity-table>div:not(.connectivity-table-head){
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-13 - AUTHENTICATION & TRUST CHAIN
   ========================================================= */

.tech-trust-chain{display:none;}
body.tech-mode .tech-trust-chain{display:block;}
body.customer-mode .tech-trust-chain{display:none!important;}

.tech-trust-toggle{
  position:fixed;
  right:24px;
  bottom:576px;
  z-index:10125;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.7px;
  cursor:pointer;
}

.tech-trust-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-trust-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1220px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10124;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-trust-chain.open .tech-trust-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.trust-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  background:rgba(2,11,18,.985);
  border-bottom:1px solid rgba(37,151,200,.22);
}

.trust-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.trust-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.trust-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
}

.trust-warning{
  margin:16px 22px 0;
  border:1px solid #8d681c;
  background:rgba(34,25,4,.40);
  padding:13px;
}

.trust-warning span{
  color:#758f9c;
  font-size:7px;
  margin-right:10px;
}

.trust-warning strong{
  color:#ffd168;
  font-size:9px;
  margin-right:12px;
}

.trust-warning small{
  color:#8ca4af;
  font-size:7px;
}

.trust-chain-flow{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding:18px 22px;
}

.trust-step{
  width:150px;
  min-height:78px;
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:11px;
  text-align:left;
}

.trust-step.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.trust-step b{
  display:block;
  color:#4ccaff;
  font-size:7px;
}

.trust-step strong{
  display:block;
  color:#e8f6fb;
  font-size:8px;
  margin:5px 0;
}

.trust-step small{
  color:#7896a4;
  font-size:7px;
}

.trust-chain-flow>i{
  color:#efb632;
  font-style:normal;
}

.trust-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:18px;
  padding:0 22px 22px;
}

.trust-domains{
  border:1px solid rgba(27,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:14px;
}

.trust-domains>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.trust-domain{
  width:100%;
  margin-bottom:7px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.trust-domain:hover,
.trust-domain.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.trust-domain b{
  display:inline-block;
  width:28px;
  color:#4ccaff;
  font-size:8px;
}

.trust-domain strong{
  color:#dff4fb;
  font-size:9px;
}

.trust-domain span{
  display:block;
  margin-left:28px;
  margin-top:4px;
  color:#7897a6;
  font-size:7px;
}

.trust-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
}

.trust-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.trust-detail>strong{
  display:block;
  color:#ffd168;
  font-size:18px;
  margin-bottom:10px;
}

.trust-detail>p{
  color:#c7dae4;
  font-size:10px;
  line-height:1.65;
}

.trust-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:14px;
}

.trust-detail-grid div{
  border:1px solid #175a79;
  background:rgba(2,15,24,.82);
  padding:11px;
}

.trust-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  margin-bottom:5px;
}

.trust-detail-grid strong{
  color:#72d8ff;
  font-size:8px;
}

.trust-rule{
  margin-top:13px;
  border-top:1px solid rgba(239,182,50,.2);
  padding-top:12px;
}

.trust-rule span{
  color:#688b9c;
  font-size:7px;
  margin-right:10px;
}

.trust-rule strong{
  color:#ffd168;
  font-size:8px;
}

.trust-boundary-map{
  width:min(1000px,90vw);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:8px;
  align-items:center;
}

.trust-zone{
  border:1px solid #175c7d;
  background:rgba(3,18,29,.78);
  padding:13px;
}

.trust-zone.public{
  border-color:#a77919;
  background:rgba(37,27,4,.4);
}

.trust-zone small{
  display:block;
  color:#4ccaff;
  font-size:7px;
  margin-bottom:5px;
}

.trust-zone strong{
  display:block;
  color:#e8f6fb;
  font-size:8px;
  margin-bottom:5px;
}

.trust-zone span{
  color:#7897a6;
  font-size:7px;
}

.trust-boundary-map>i{
  color:#efb632;
  font-style:normal;
}

.trust-matrix{
  margin:0 22px 22px;
  display:grid;
  gap:1px;
  background:#17435a;
}

.trust-matrix-head,
.trust-matrix>div:not(.trust-matrix-head){
  display:grid;
  grid-template-columns:1.1fr 1.2fr 1.2fr 1.2fr 1fr;
  gap:1px;
}

.trust-matrix-head span,
.trust-matrix>div:not(.trust-matrix-head)>*{
  background:#03111b;
  padding:9px;
  font-size:7px;
}

.trust-matrix-head span{color:#5bcfff;}
.trust-matrix span{color:#e7f5fb;}
.trust-matrix b{color:#78d4f4;}
.trust-matrix em{color:#ffd168;font-style:normal;}

.trust-principles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.trust-principles div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.78);
  padding:13px;
}

.trust-principles b{
  display:block;
  color:#4ccaff;
  font-size:7px;
}

.trust-principles strong{
  display:block;
  color:#ffd168;
  font-size:8px;
  margin:5px 0;
}

.trust-principles small{
  color:#819ca9;
  font-size:7px;
  line-height:1.45;
}

.trust-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
}

.trust-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.trust-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
}

.trust-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
}

@media(max-width:900px){
  .trust-layout{
    grid-template-columns:1fr;
  }

  .trust-boundary-map,
  .trust-principles{
    grid-template-columns:1fr;
  }

  .trust-boundary-map>i{
    text-align:center;
    transform:rotate(90deg);
  }
}

@media(max-width:600px){
  .trust-detail-grid{
    grid-template-columns:1fr;
  }

  .trust-matrix-head,
  .trust-matrix>div:not(.trust-matrix-head){
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-14 - SECURITY EVENT & AUDIT TRAIL
   ========================================================= */

.tech-audit-trail{display:none;}
body.tech-mode .tech-audit-trail{display:block;}
body.customer-mode .tech-audit-trail{display:none!important;}

.tech-audit-toggle{
  position:fixed;
  right:24px;
  bottom:622px;
  z-index:10130;
  min-width:122px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 15px;
  font-size:9px;
  letter-spacing:1.7px;
  cursor:pointer;
}

.tech-audit-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-audit-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1220px,94vw);
  max-height:84vh;
  overflow-y:auto;
  z-index:10129;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.76);
  background:linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-audit-trail.open .tech-audit-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.audit-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  background:rgba(2,11,18,.985);
  border-bottom:1px solid rgba(37,151,200,.22);
}

.audit-head small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.audit-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:2px;
}

.audit-head button{
  width:36px;
  height:36px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
}

.audit-warning{
  margin:16px 22px 0;
  border:1px solid #8d681c;
  background:rgba(34,25,4,.40);
  padding:13px;
}

.audit-warning span{
  color:#758f9c;
  font-size:7px;
  margin-right:10px;
}

.audit-warning strong{
  color:#ffd168;
  font-size:9px;
  margin-right:12px;
}

.audit-warning small{
  color:#8ca4af;
  font-size:7px;
}

.audit-chain{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding:18px 22px;
}

.audit-step{
  width:150px;
  min-height:78px;
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:11px;
  text-align:left;
}

.audit-step.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.audit-step b{
  display:block;
  color:#4ccaff;
  font-size:7px;
}

.audit-step strong{
  display:block;
  color:#e8f6fb;
  font-size:8px;
  margin:5px 0;
}

.audit-step small{
  color:#7896a4;
  font-size:7px;
}

.audit-chain>i{
  color:#efb632;
  font-style:normal;
}

.audit-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:18px;
  padding:0 22px 22px;
}

.audit-events{
  border:1px solid rgba(27,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:14px;
}

.audit-events>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.audit-event{
  width:100%;
  margin-bottom:7px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.audit-event:hover,
.audit-event.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.audit-event b{
  display:inline-block;
  width:28px;
  color:#4ccaff;
  font-size:8px;
}

.audit-event strong{
  color:#dff4fb;
  font-size:9px;
}

.audit-event span{
  display:block;
  margin-left:28px;
  margin-top:4px;
  color:#7897a6;
  font-size:7px;
}

.audit-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:20px;
}

.audit-detail>small{
  display:block;
  color:#4ccaff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:7px;
}

.audit-detail>strong{
  display:block;
  color:#ffd168;
  font-size:18px;
  margin-bottom:10px;
}

.audit-detail>p{
  color:#c7dae4;
  font-size:10px;
  line-height:1.65;
}

.audit-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:14px;
}

.audit-detail-grid div{
  border:1px solid #175a79;
  background:rgba(2,15,24,.82);
  padding:11px;
}

.audit-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:7px;
  margin-bottom:5px;
}

.audit-detail-grid strong{
  color:#72d8ff;
  font-size:8px;
}

.audit-truth{
  margin-top:13px;
  border-top:1px solid rgba(239,182,50,.2);
  padding-top:12px;
}

.audit-truth span{
  color:#688b9c;
  font-size:7px;
  margin-right:10px;
}

.audit-truth strong{
  color:#ffd168;
  font-size:8px;
}

.audit-timeline{
  margin:0 22px 22px;
  display:grid;
  gap:1px;
  background:#17435a;
}

.audit-timeline-head,
.audit-timeline>div:not(.audit-timeline-head){
  display:grid;
  grid-template-columns:.55fr 1.3fr 1.1fr 1.1fr 1.3fr 1fr;
  gap:1px;
}

.audit-timeline-head span,
.audit-timeline>div:not(.audit-timeline-head)>*{
  background:#03111b;
  padding:9px;
  font-size:7px;
}

.audit-timeline-head span{color:#5bcfff;}
.audit-timeline span{color:#e7f5fb;}
.audit-timeline b{color:#78d4f4;}
.audit-timeline em{color:#ffd168;font-style:normal;}

.audit-evidence-map{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 22px;
}

.audit-evidence-map div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.78);
  padding:13px;
}

.audit-evidence-map small{
  display:block;
  color:#4ccaff;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:6px;
}

.audit-evidence-map strong{
  color:#c8dbe5;
  font-size:8px;
  line-height:1.5;
}

.audit-principle{
  width:min(950px,88vw);
  margin:0 auto 22px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:18px 20px;
}

.audit-principle small{
  display:block;
  color:#efb632;
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:7px;
}

.audit-principle strong{
  color:#c8dbe5;
  font-size:10px;
  line-height:1.6;
}

.audit-footer{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:7px;
}

@media(max-width:900px){
  .audit-layout{
    grid-template-columns:1fr;
  }

  .audit-evidence-map{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .audit-detail-grid,
  .audit-evidence-map{
    grid-template-columns:1fr;
  }

  .audit-timeline-head,
  .audit-timeline>div:not(.audit-timeline-head){
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-15 - LOGGING & EVIDENCE CORRELATION
   PC-OPTIMIZED TECH PANELS
   ========================================================= */

.tech-evidence-correlation{display:none;}
body.tech-mode .tech-evidence-correlation{display:block;}
body.customer-mode .tech-evidence-correlation{display:none!important;}

.tech-correlation-toggle{
  position:fixed;
  right:24px;
  bottom:668px;
  z-index:10135;
  min-width:138px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.96);
  color:#a6def5;
  padding:12px 16px;
  font-size:10px;
  letter-spacing:1.6px;
  cursor:pointer;
}

.tech-correlation-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-correlation-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%) scale(.985);
  width:min(1540px,96vw);
  max-height:88vh;
  overflow-y:auto;
  z-index:10134;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(36,126,165,.78);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,142,211,.10),transparent 34%),
    linear-gradient(180deg,rgba(2,14,23,.99),rgba(1,7,12,.995));
  box-shadow:0 0 70px rgba(0,0,0,.82);
  transition:.28s ease;
}

.tech-evidence-correlation.open .tech-correlation-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.correlation-head{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  background:rgba(2,11,18,.985);
  border-bottom:1px solid rgba(37,151,200,.22);
}

.correlation-head small{
  display:block;
  color:#4ccaff;
  font-size:9px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.correlation-head strong{
  color:#ffd168;
  font-size:16px;
  letter-spacing:2px;
}

.correlation-head button{
  width:38px;
  height:38px;
  border:1px solid #17648a;
  background:#03111b;
  color:#80dcff;
  cursor:pointer;
  font-size:16px;
}

.correlation-warning{
  margin:18px 24px 0;
  border:1px solid #8d681c;
  background:rgba(34,25,4,.40);
  padding:14px 16px;
}

.correlation-warning span{
  color:#758f9c;
  font-size:8px;
  margin-right:12px;
}

.correlation-warning strong{
  color:#ffd168;
  font-size:10px;
  margin-right:14px;
}

.correlation-warning small{
  color:#9ab0ba;
  font-size:9px;
}

.correlation-chain{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:20px 24px;
}

.correlation-step{
  width:165px;
  min-height:82px;
  border:1px solid #175c7d;
  background:rgba(3,18,29,.82);
  padding:12px;
  text-align:left;
}

.correlation-step.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.correlation-step b{
  display:block;
  color:#4ccaff;
  font-size:8px;
}

.correlation-step strong{
  display:block;
  color:#e8f6fb;
  font-size:10px;
  margin:6px 0;
}

.correlation-step small{
  color:#7896a4;
  font-size:8px;
}

.correlation-chain>i{
  color:#efb632;
  font-style:normal;
  font-size:16px;
}

.correlation-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:20px;
  padding:0 24px 24px;
}

.correlation-domains{
  border:1px solid rgba(27,103,139,.45);
  background:rgba(2,14,23,.55);
  padding:16px;
}

.correlation-domains>small{
  display:block;
  color:#4ccaff;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:11px;
}

.correlation-domain{
  width:100%;
  margin-bottom:8px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.85);
  padding:12px;
  text-align:left;
  cursor:pointer;
}

.correlation-domain:hover,
.correlation-domain.active{
  border-color:#efb632;
  background:rgba(39,28,4,.42);
}

.correlation-domain b{
  display:inline-block;
  width:30px;
  color:#4ccaff;
  font-size:9px;
}

.correlation-domain strong{
  color:#dff4fb;
  font-size:11px;
}

.correlation-domain span{
  display:block;
  margin-left:30px;
  margin-top:5px;
  color:#8ca4af;
  font-size:9px;
}

.correlation-detail{
  border:1px solid rgba(163,118,24,.56);
  background:rgba(30,22,4,.31);
  padding:22px;
}

.correlation-detail>small{
  display:block;
  color:#4ccaff;
  font-size:9px;
  letter-spacing:3px;
  margin-bottom:8px;
}

.correlation-detail>strong{
  display:block;
  color:#ffd168;
  font-size:21px;
  margin-bottom:11px;
}

.correlation-detail>p{
  color:#c7dae4;
  font-size:12px;
  line-height:1.7;
}

.correlation-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:16px;
}

.correlation-detail-grid div{
  border:1px solid #175a79;
  background:rgba(2,15,24,.82);
  padding:13px;
}

.correlation-detail-grid small{
  display:block;
  color:#688b9c;
  font-size:8px;
  margin-bottom:6px;
}

.correlation-detail-grid strong{
  color:#72d8ff;
  font-size:10px;
  line-height:1.45;
}

.correlation-rule{
  margin-top:15px;
  border-top:1px solid rgba(239,182,50,.2);
  padding-top:13px;
}

.correlation-rule span{
  color:#688b9c;
  font-size:8px;
  margin-right:12px;
}

.correlation-rule strong{
  color:#ffd168;
  font-size:10px;
}

.correlation-example{
  margin:0 24px 24px;
  border:1px solid rgba(26,103,139,.48);
  background:rgba(3,18,29,.60);
  padding:18px;
}

.correlation-example>small{
  display:block;
  color:#4ccaff;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:13px;
}

.correlation-example-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.correlation-example-row div{
  min-width:175px;
  border:1px solid #175a79;
  background:#03111b;
  padding:12px;
}

.correlation-example-row b{
  display:block;
  color:#4ccaff;
  font-size:8px;
  margin-bottom:5px;
}

.correlation-example-row strong{
  display:block;
  color:#e8f6fb;
  font-size:10px;
  margin-bottom:5px;
}

.correlation-example-row span{
  color:#ffd168;
  font-size:10px;
}

.correlation-example-row>i{
  color:#efb632;
  font-style:normal;
  font-size:18px;
}

.correlation-example-note{
  margin-top:14px;
  border-top:1px solid rgba(239,182,50,.18);
  padding-top:12px;
}

.correlation-example-note span{
  color:#688b9c;
  font-size:8px;
  margin-right:10px;
}

.correlation-example-note strong{
  color:#ffd168;
  font-size:9px;
}

.correlation-table{
  margin:0 24px 24px;
  display:grid;
  gap:1px;
  background:#17435a;
}

.correlation-table-head,
.correlation-table>div:not(.correlation-table-head){
  display:grid;
  grid-template-columns:1fr 1.25fr 1.25fr 1.4fr 1fr;
  gap:1px;
}

.correlation-table-head span,
.correlation-table>div:not(.correlation-table-head)>*{
  background:#03111b;
  padding:11px;
  font-size:9px;
}

.correlation-table-head span{color:#5bcfff;}
.correlation-table span{color:#e7f5fb;}
.correlation-table b{color:#78d4f4;font-weight:500;}
.correlation-table em{color:#ffd168;font-style:normal;}

.correlation-principles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  padding:0 24px 24px;
}

.correlation-principles div{
  border:1px solid #175a79;
  background:rgba(3,18,29,.78);
  padding:15px;
}

.correlation-principles b{
  display:block;
  color:#4ccaff;
  font-size:8px;
}

.correlation-principles strong{
  display:block;
  color:#ffd168;
  font-size:10px;
  margin:6px 0;
}

.correlation-principles small{
  color:#92a9b4;
  font-size:9px;
  line-height:1.5;
}

.correlation-principle{
  width:min(1180px,92vw);
  margin:0 auto 24px;
  border-top:1px solid rgba(239,182,50,.20);
  border-bottom:1px solid rgba(239,182,50,.20);
  padding:20px 22px;
}

.correlation-principle small{
  display:block;
  color:#efb632;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:8px;
}

.correlation-principle strong{
  color:#c8dbe5;
  font-size:11px;
  line-height:1.65;
}

.correlation-footer{
  display:flex;
  justify-content:space-between;
  padding:13px 22px;
  border-top:1px solid rgba(37,151,200,.18);
  color:#526f7d;
  font-size:8px;
}

/* PC readability improvement for TECH-14 */
@media(min-width:1200px){
  .tech-audit-panel{
    width:min(1540px,96vw)!important;
    max-height:88vh!important;
  }

  .audit-head strong{
    font-size:16px!important;
  }

  .audit-warning small,
  .audit-event span,
  .audit-step small,
  .audit-evidence-map small{
    font-size:9px!important;
  }

  .audit-event strong,
  .audit-step strong,
  .audit-detail-grid strong{
    font-size:10px!important;
  }

  .audit-detail>strong{
    font-size:21px!important;
  }

  .audit-detail>p{
    font-size:12px!important;
  }

  .audit-timeline-head span,
  .audit-timeline>div:not(.audit-timeline-head)>*{
    font-size:9px!important;
    padding:11px!important;
  }

  .audit-evidence-map strong,
  .audit-principle strong{
    font-size:10px!important;
  }

  .audit-layout{
    grid-template-columns:.68fr 1.32fr!important;
    gap:20px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

@media(max-width:1000px){
  .correlation-layout{
    grid-template-columns:1fr;
  }

  .correlation-detail-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .correlation-principles{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .correlation-detail-grid,
  .correlation-principles{
    grid-template-columns:1fr;
  }

  .correlation-table-head,
  .correlation-table>div:not(.correlation-table-head){
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TECH-16 - INCIDENT & ROOT CAUSE INTELLIGENCE
   FULL DESKTOP CONTROL ROOM LAYOUT
   ========================================================= */

.tech-incident-intelligence{
  display:none;
}

body.tech-mode .tech-incident-intelligence{
  display:block;
}

body.customer-mode .tech-incident-intelligence{
  display:none!important;
}

.tech-incident-toggle{
  position:fixed;
  right:24px;
  bottom:714px;
  z-index:10140;
  min-width:138px;
  height:40px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.97);
  color:#a6def5;
  padding:0 16px;
  font-size:10px;
  letter-spacing:1.6px;
  cursor:pointer;
}

.tech-incident-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
  background:rgba(37,27,4,.48);
}

.tech-incident-panel{
  position:fixed;
  inset:14px 170px 14px 14px;
  z-index:10139;
  overflow-y:auto;
  overflow-x:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(32,124,166,.80);
  background:
    radial-gradient(circle at 48% 5%,rgba(0,132,198,.09),transparent 32%),
    linear-gradient(180deg,rgba(1,12,20,.998),rgba(0,7,12,.998));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 0 80px rgba(0,0,0,.76);
  transition:.24s ease;
}

.tech-incident-intelligence.open .tech-incident-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.incident-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid rgba(32,124,166,.35);
  background:rgba(1,11,18,.985);
}

.incident-brand small{
  display:block;
  margin-bottom:6px;
  color:#35c7ff;
  font-size:10px;
  letter-spacing:4px;
}

.incident-brand strong{
  display:block;
  color:#ffd05c;
  font-size:18px;
  letter-spacing:2px;
}

.incident-close{
  width:38px;
  height:38px;
  border:1px solid #17648a;
  background:#03121c;
  color:#73d9ff;
  font-size:17px;
  cursor:pointer;
}

.incident-close:hover{
  border-color:#efb632;
  color:#ffd168;
}

.incident-modebar{
  margin:12px 20px 0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
  border:1px solid rgba(174,125,24,.70);
  background:rgba(38,27,4,.38);
}

.incident-modebar span{
  color:#7895a2;
  font-size:9px;
  letter-spacing:1.4px;
}

.incident-modebar strong{
  color:#ffd168;
  font-size:10px;
  letter-spacing:.7px;
}

.incident-modebar small{
  color:#a4b7bf;
  font-size:9px;
}

.incident-process{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items:center;
  gap:6px;
  padding:14px 20px;
}

.incident-process-step{
  min-height:74px;
  border:1px solid #175d7c;
  background:rgba(2,17,28,.88);
  padding:11px 12px;
}

.incident-process-step.active{
  border-color:#d39a21;
  background:rgba(42,30,4,.43);
}

.incident-process-step b{
  display:block;
  color:#55d2ff;
  font-size:9px;
  margin-bottom:6px;
}

.incident-process-step strong{
  display:block;
  color:#f0f9fc;
  font-size:11px;
  letter-spacing:.4px;
  margin-bottom:6px;
}

.incident-process-step small{
  display:block;
  color:#94a9b2;
  font-size:9px;
}

.incident-process>i{
  color:#efb632;
  font-style:normal;
  font-size:18px;
  text-align:center;
}

.incident-workspace{
  display:grid;
  grid-template-columns:24% 48% 28%;
  gap:10px;
  padding:0 20px 12px;
}

.incident-left-column,
.incident-center-column,
.incident-right-column{
  min-width:0;
}

.incident-left-column{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.70);
  padding:10px;
}

.incident-center-column{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.62);
  padding:12px;
}

.incident-right-column{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.incident-section-title{
  margin-bottom:10px;
  color:#43cfff;
  font-size:10px;
  letter-spacing:2.4px;
}

.incident-class{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:34px 1fr 32px;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.90);
  color:#fff;
  padding:7px 9px;
  cursor:pointer;
  text-align:left;
}

.incident-class:hover,
.incident-class.active{
  border-color:#d89b1f;
  background:rgba(40,28,4,.42);
}

.incident-number{
  color:#4ccaff;
  font-size:10px;
  font-weight:700;
}

.incident-class-copy strong{
  display:block;
  color:#f0f7fa;
  font-size:11px;
  letter-spacing:.5px;
  margin-bottom:4px;
}

.incident-class-copy span{
  display:block;
  color:#91a7b1;
  font-size:9px;
}

.incident-symbol{
  color:#dcecf3;
  font-size:18px;
  text-align:center;
}

.incident-selected-title{
  color:#ffd05c;
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:10px;
}

.incident-description{
  margin:0 0 12px;
  color:#c9dbe3;
  font-size:11px;
  line-height:1.6;
}

.incident-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.incident-detail-grid>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 10px;
}

.incident-detail-grid small{
  display:block;
  color:#4ebddd;
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:7px;
}

.incident-detail-grid strong{
  display:block;
  color:#e8f5fa;
  font-size:10px;
  line-height:1.35;
}

.incident-rule-line{
  margin-top:10px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:8px 10px;
  border-top:1px solid rgba(213,155,34,.25);
}

.incident-rule-line span{
  color:#73909d;
  font-size:8px;
  letter-spacing:1.2px;
  flex:none;
}

.incident-rule-line strong{
  color:#ffd05c;
  font-size:9px;
  line-height:1.4;
}

.incident-root-cause-box{
  margin-top:9px;
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.66);
  padding:10px;
}

.incident-root-title,
.incident-history-title{
  color:#42cfff;
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:9px;
}

.incident-cause-chain{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:5px;
  align-items:center;
}

.incident-cause-chain>div{
  min-height:61px;
  border:1px solid #175b7b;
  background:#03131e;
  padding:8px;
}

.incident-cause-chain b{
  display:block;
  color:#49c9f6;
  font-size:8px;
  margin-bottom:5px;
}

.incident-cause-chain strong{
  display:block;
  color:#e7f2f6;
  font-size:9px;
  line-height:1.35;
}

.incident-cause-chain i{
  color:#efb632;
  font-style:normal;
  text-align:center;
}

.incident-history-title{
  margin-top:12px;
}

.incident-history-table{
  display:grid;
  gap:1px;
  background:#16445a;
}

.incident-history-head,
.incident-history-table>div:not(.incident-history-head){
  display:grid;
  grid-template-columns:.48fr .85fr 1.3fr 1.15fr .9fr;
  gap:1px;
}

.incident-history-head span,
.incident-history-table>div:not(.incident-history-head)>*{
  background:#03111b;
  padding:7px 8px;
  font-size:8px;
}

.incident-history-head span{
  color:#49c9f6;
}

.incident-history-table span{
  color:#eaf5f9;
}

.incident-history-table b{
  color:#8bd8f3;
  font-weight:500;
}

.incident-history-table em{
  color:#ffd05c;
  font-style:normal;
}

.incident-evidence-card{
  min-height:68px;
  display:grid;
  grid-template-columns:50px 1fr;
  align-items:center;
  gap:8px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 11px;
}

.incident-evidence-icon{
  color:#14bdf5;
  font-size:29px;
  text-align:center;
}

.incident-evidence-card small{
  display:block;
  color:#42cfff;
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:6px;
}

.incident-evidence-card strong{
  display:block;
  color:#e4f0f5;
  font-size:10px;
  line-height:1.35;
}

.incident-principle-card{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
}

.incident-principle-icon{
  color:#f0ad28;
  font-size:34px;
  text-align:center;
}

.incident-principle-card small,
.incident-note-card small{
  display:block;
  color:#42cfff;
  font-size:9px;
  letter-spacing:1.4px;
  margin-bottom:7px;
}

.incident-principle-card p,
.incident-note-card p{
  margin:0 0 7px;
  color:#d3e2e8;
  font-size:10px;
  line-height:1.55;
}

.incident-note-card{
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
  flex:1;
}

.incident-bottom-principle{
  margin:0 20px 12px;
  padding:12px 14px;
  border-top:1px solid rgba(213,155,34,.28);
  border-bottom:1px solid rgba(213,155,34,.28);
}

.incident-bottom-principle small{
  display:block;
  color:#e5aa28;
  font-size:9px;
  letter-spacing:1.6px;
  margin-bottom:6px;
}

.incident-bottom-principle strong{
  color:#d1e1e7;
  font-size:10px;
  line-height:1.55;
  font-weight:500;
}

.incident-footer{
  min-height:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  border-top:1px solid rgba(32,112,149,.35);
  color:#35c7ff;
  font-size:8px;
  letter-spacing:1.5px;
}

/* =========================================================
   DESKTOP TECH PANEL UNIFICATION
   Macht TECH-14 / TECH-15 / TECH-16 auf PC groß wie Vorlage
   ========================================================= */

@media(min-width:1200px){

  .tech-audit-panel,
  .tech-correlation-panel{
    position:fixed!important;
    inset:14px 170px 14px 14px!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
    left:auto!important;
    top:auto!important;
  }

  .tech-audit-trail.open .tech-audit-panel,
  .tech-evidence-correlation.open .tech-correlation-panel{
    transform:none!important;
  }

  .audit-head,
  .correlation-head{
    min-height:68px!important;
    padding:13px 20px!important;
  }

  .audit-head small,
  .correlation-head small{
    font-size:9px!important;
    letter-spacing:3px!important;
  }

  .audit-head strong,
  .correlation-head strong{
    font-size:17px!important;
  }

  .audit-warning,
  .correlation-warning{
    margin:10px 18px 0!important;
    min-height:36px!important;
    padding:9px 12px!important;
  }

  .audit-warning span,
  .audit-warning small,
  .correlation-warning span,
  .correlation-warning small{
    font-size:9px!important;
  }

  .audit-warning strong,
  .correlation-warning strong{
    font-size:10px!important;
  }

  .audit-chain,
  .correlation-chain{
    padding:12px 18px!important;
    gap:7px!important;
  }

  .audit-step{
    width:auto!important;
    flex:1 1 0!important;
    min-width:0!important;
    min-height:68px!important;
    padding:10px!important;
  }

  .correlation-step{
    width:auto!important;
    flex:1 1 0!important;
    min-width:0!important;
    min-height:68px!important;
    padding:10px!important;
  }

  .audit-step strong,
  .correlation-step strong{
    font-size:10px!important;
  }

  .audit-step small,
  .correlation-step small{
    font-size:8px!important;
  }

  .audit-layout{
    grid-template-columns:25% 48% 27%!important;
    gap:10px!important;
    padding:0 18px 10px!important;
  }

  .audit-events{
    padding:9px!important;
  }

  .audit-event{
    min-height:48px!important;
    margin-bottom:4px!important;
    padding:7px 9px!important;
  }

  .audit-event strong{
    font-size:11px!important;
  }

  .audit-event span{
    font-size:9px!important;
  }

  .audit-detail{
    padding:13px!important;
  }

  .audit-detail>strong{
    font-size:19px!important;
  }

  .audit-detail>p{
    font-size:10px!important;
    line-height:1.55!important;
  }

  .audit-detail-grid{
    grid-template-columns:repeat(3,1fr)!important;
    gap:5px!important;
    margin-top:10px!important;
  }

  .audit-detail-grid div{
    padding:9px!important;
  }

  .audit-detail-grid small{
    font-size:8px!important;
  }

  .audit-detail-grid strong{
    font-size:10px!important;
  }

  .audit-timeline{
    margin:0 18px 10px!important;
  }

  .audit-timeline-head span,
  .audit-timeline>div:not(.audit-timeline-head)>*{
    font-size:8px!important;
    padding:7px!important;
  }

  .audit-evidence-map{
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
    padding:0 18px 10px!important;
  }

  .audit-evidence-map div{
    padding:10px!important;
  }

  .audit-evidence-map small{
    font-size:8px!important;
  }

  .audit-evidence-map strong{
    font-size:9px!important;
  }

  .audit-principle{
    width:auto!important;
    margin:0 18px 10px!important;
    padding:10px 12px!important;
  }

  .audit-principle small{
    font-size:8px!important;
  }

  .audit-principle strong{
    font-size:9px!important;
  }

  .correlation-layout{
    grid-template-columns:26% 74%!important;
    gap:10px!important;
    padding:0 18px 10px!important;
  }

  .correlation-domains{
    padding:9px!important;
  }

  .correlation-domain{
    min-height:48px!important;
    padding:7px 9px!important;
    margin-bottom:4px!important;
  }

  .correlation-domain strong{
    font-size:11px!important;
  }

  .correlation-domain span{
    font-size:9px!important;
  }

  .correlation-detail{
    padding:13px!important;
  }

  .correlation-detail>strong{
    font-size:19px!important;
  }

  .correlation-detail>p{
    font-size:10px!important;
  }

  .correlation-detail-grid{
    grid-template-columns:repeat(3,1fr)!important;
    gap:5px!important;
  }

  .correlation-detail-grid div{
    padding:9px!important;
  }

  .correlation-detail-grid strong{
    font-size:10px!important;
  }

  .correlation-example{
    margin:0 18px 10px!important;
    padding:10px!important;
  }

  .correlation-example-row{
    flex-wrap:nowrap!important;
  }

  .correlation-example-row div{
    min-width:0!important;
    flex:1!important;
    padding:9px!important;
  }

  .correlation-example-row strong,
  .correlation-example-row span{
    font-size:9px!important;
  }

  .correlation-table{
    margin:0 18px 10px!important;
  }

  .correlation-table-head span,
  .correlation-table>div:not(.correlation-table-head)>*{
    padding:7px!important;
    font-size:8px!important;
  }

  .correlation-principles{
    padding:0 18px 10px!important;
    gap:6px!important;
  }

  .correlation-principles div{
    padding:10px!important;
  }

  .correlation-principles strong{
    font-size:9px!important;
  }

  .correlation-principles small{
    font-size:8px!important;
  }

  .correlation-principle{
    width:auto!important;
    margin:0 18px 10px!important;
    padding:10px!important;
  }

  .correlation-principle strong{
    font-size:9px!important;
  }
}

@media(max-width:1199px){

  .tech-incident-panel{
    inset:6vh 5vw!important;
  }

  .incident-workspace{
    grid-template-columns:1fr!important;
  }

  .incident-right-column{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
  }

  .incident-process{
    grid-template-columns:repeat(3,1fr)!important;
  }

  .incident-process>i{
    display:none!important;
  }

  .incident-cause-chain{
    grid-template-columns:1fr!important;
  }

  .incident-cause-chain i{
    transform:rotate(90deg);
  }
}

@media(max-width:700px){

  .incident-detail-grid{
    grid-template-columns:1fr!important;
  }

  .incident-right-column{
    grid-template-columns:1fr!important;
  }

  .incident-process{
    grid-template-columns:1fr!important;
  }

  .incident-history-head,
  .incident-history-table>div:not(.incident-history-head){
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   TECH-17 - CHANGE DEPLOYMENT ROLLBACK
   FULL DESKTOP CONTROL ROOM
   ========================================================= */

.tech-deployment-intelligence{display:none;}
body.tech-mode .tech-deployment-intelligence{display:block;}
body.customer-mode .tech-deployment-intelligence{display:none!important;}

.tech-deployment-toggle{
  position:fixed;
  right:24px;
  bottom:760px;
  z-index:10145;
  min-width:138px;
  height:40px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.97);
  color:#a6def5;
  font-size:10px;
  letter-spacing:1.5px;
  cursor:pointer;
}

.tech-deployment-toggle:hover{
  border-color:#efb632;
  color:#ffd168;
}

.tech-deployment-panel{
  position:fixed;
  inset:14px 170px 14px 14px;
  z-index:10144;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(32,124,166,.8);
  background:
    radial-gradient(circle at 48% 5%,rgba(0,132,198,.09),transparent 32%),
    linear-gradient(180deg,rgba(1,12,20,.998),rgba(0,7,12,.998));
  box-shadow:0 0 80px rgba(0,0,0,.76);
  transition:.24s ease;
}

.tech-deployment-intelligence.open .tech-deployment-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.deployment-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 20px;
  border-bottom:1px solid rgba(32,124,166,.35);
  background:rgba(1,11,18,.985);
}

.deployment-topbar small{
  display:block;
  color:#35c7ff;
  font-size:10px;
  letter-spacing:4px;
  margin-bottom:6px;
}

.deployment-topbar strong{
  color:#ffd05c;
  font-size:18px;
  letter-spacing:2px;
}

.deployment-topbar button{
  width:38px;
  height:38px;
  border:1px solid #17648a;
  background:#03121c;
  color:#73d9ff;
  font-size:17px;
  cursor:pointer;
}

.deployment-modebar{
  margin:11px 18px 0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  border:1px solid rgba(174,125,24,.70);
  background:rgba(38,27,4,.38);
}

.deployment-modebar span{
  color:#7895a2;
  font-size:9px;
}

.deployment-modebar strong{
  color:#ffd168;
  font-size:10px;
}

.deployment-modebar small{
  color:#a4b7bf;
  font-size:9px;
}

.deployment-process{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:6px;
  align-items:center;
  padding:13px 18px;
}

.deployment-process-step{
  min-height:72px;
  border:1px solid #175d7c;
  background:rgba(2,17,28,.88);
  padding:10px 11px;
}

.deployment-process-step.active{
  border-color:#d39a21;
  background:rgba(42,30,4,.43);
}

.deployment-process-step b{
  display:block;
  color:#55d2ff;
  font-size:9px;
  margin-bottom:6px;
}

.deployment-process-step strong{
  display:block;
  color:#f0f9fc;
  font-size:11px;
  margin-bottom:5px;
}

.deployment-process-step small{
  color:#94a9b2;
  font-size:9px;
}

.deployment-process>i{
  color:#efb632;
  font-style:normal;
  text-align:center;
  font-size:18px;
}

.deployment-workspace{
  display:grid;
  grid-template-columns:24% 48% 28%;
  gap:10px;
  padding:0 18px 11px;
}

.deployment-left{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.70);
  padding:10px;
}

.deployment-center{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.62);
  padding:12px;
}

.deployment-right{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.deployment-section-title{
  color:#43cfff;
  font-size:10px;
  letter-spacing:2.2px;
  margin-bottom:9px;
}

.deployment-domain{
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:34px 1fr 30px;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.90);
  color:#fff;
  padding:7px 9px;
  text-align:left;
  cursor:pointer;
}

.deployment-domain:hover,
.deployment-domain.active{
  border-color:#d89b1f;
  background:rgba(40,28,4,.42);
}

.deployment-number{
  color:#4ccaff;
  font-size:10px;
  font-weight:700;
}

.deployment-domain strong{
  display:block;
  color:#f0f7fa;
  font-size:11px;
  margin-bottom:4px;
}

.deployment-domain span{
  color:#91a7b1;
  font-size:9px;
}

.deployment-domain em{
  font-style:normal;
  color:#dcecf3;
  font-size:18px;
  text-align:center;
}

.deployment-selected-title{
  color:#ffd05c;
  font-size:20px;
  font-weight:700;
  margin-bottom:9px;
}

.deployment-description{
  color:#c9dbe3;
  font-size:11px;
  line-height:1.6;
  margin:0 0 11px;
}

.deployment-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.deployment-detail-grid>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 10px;
}

.deployment-detail-grid small{
  display:block;
  color:#4ebddd;
  font-size:8px;
  margin-bottom:7px;
}

.deployment-detail-grid strong{
  display:block;
  color:#e8f5fa;
  font-size:10px;
  line-height:1.35;
}

.deployment-rule{
  margin-top:9px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-top:1px solid rgba(213,155,34,.25);
}

.deployment-rule span{
  color:#73909d;
  font-size:8px;
  flex:none;
}

.deployment-rule strong{
  color:#ffd05c;
  font-size:9px;
  line-height:1.4;
}

.deployment-path-title,
.deployment-history-title{
  color:#42cfff;
  font-size:9px;
  letter-spacing:2px;
  margin:11px 0 8px;
}

.deployment-path{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
  gap:4px;
}

.deployment-path>div{
  min-height:66px;
  border:1px solid #175b7b;
  background:#03131e;
  padding:8px;
}

.deployment-path b{
  display:block;
  color:#49c9f6;
  font-size:8px;
  margin-bottom:4px;
}

.deployment-path strong{
  display:block;
  color:#e7f2f6;
  font-size:9px;
  margin-bottom:4px;
}

.deployment-path span{
  color:#91a7b1;
  font-size:8px;
  line-height:1.3;
}

.deployment-path i{
  color:#efb632;
  font-style:normal;
  text-align:center;
}

.deployment-table{
  display:grid;
  gap:1px;
  background:#16445a;
}

.deployment-table-head,
.deployment-table>div:not(.deployment-table-head){
  display:grid;
  grid-template-columns:.8fr 1.15fr 1.3fr 1.4fr .9fr;
  gap:1px;
}

.deployment-table-head span,
.deployment-table>div:not(.deployment-table-head)>*{
  background:#03111b;
  padding:7px 8px;
  font-size:8px;
}

.deployment-table-head span{color:#49c9f6;}
.deployment-table span{color:#eaf5f9;}
.deployment-table b{color:#8bd8f3;font-weight:500;}
.deployment-table em{color:#ffd05c;font-style:normal;}

.deployment-control-card{
  min-height:68px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 11px;
}

.deployment-control-icon{
  color:#14bdf5;
  font-size:29px;
  text-align:center;
}

.deployment-control-card small{
  display:block;
  color:#42cfff;
  font-size:8px;
  margin-bottom:6px;
}

.deployment-control-card strong{
  display:block;
  color:#e4f0f5;
  font-size:10px;
  line-height:1.35;
}

.deployment-decision-card{
  border:1px solid #9b711d;
  background:rgba(34,25,4,.38);
  padding:12px;
}

.deployment-decision-card>small{
  display:block;
  color:#ffd168;
  font-size:9px;
  letter-spacing:1.5px;
  margin-bottom:9px;
}

.deployment-decision-line{
  display:grid;
  grid-template-columns:1fr 30px 1fr;
  align-items:center;
  text-align:center;
  border-bottom:1px solid rgba(213,155,34,.18);
  padding:8px 0;
}

.deployment-decision-line span{
  color:#d7e6ec;
  font-size:10px;
}

.deployment-decision-line strong{
  color:#efb632;
}

.deployment-decision-final{
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding-top:11px;
}

.deployment-decision-final strong{
  color:#ffd05c;
  font-size:11px;
}

.deployment-decision-final span{
  color:#829aa5;
  font-size:9px;
}

.deployment-notes{
  flex:1;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
}

.deployment-notes small{
  display:block;
  color:#42cfff;
  font-size:9px;
  margin-bottom:8px;
}

.deployment-notes p{
  margin:0 0 8px;
  color:#d3e2e8;
  font-size:10px;
  line-height:1.5;
}

.deployment-bottom-principle{
  margin:0 18px 11px;
  padding:11px 13px;
  border-top:1px solid rgba(213,155,34,.28);
  border-bottom:1px solid rgba(213,155,34,.28);
}

.deployment-bottom-principle small{
  display:block;
  color:#e5aa28;
  font-size:9px;
  margin-bottom:6px;
}

.deployment-bottom-principle strong{
  color:#d1e1e7;
  font-size:10px;
  line-height:1.5;
  font-weight:500;
}

.deployment-footer{
  min-height:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-top:1px solid rgba(32,112,149,.35);
  color:#35c7ff;
  font-size:8px;
  letter-spacing:1.4px;
}

@media(max-width:1199px){
  .tech-deployment-panel{inset:6vh 5vw!important;}
  .deployment-workspace{grid-template-columns:1fr!important;}
  .deployment-right{display:grid!important;grid-template-columns:repeat(2,1fr)!important;}
  .deployment-process{grid-template-columns:repeat(3,1fr)!important;}
  .deployment-process>i{display:none!important;}
  .deployment-path{grid-template-columns:repeat(3,1fr)!important;}
  .deployment-path>i{display:none!important;}
}

@media(max-width:700px){
  .deployment-detail-grid{grid-template-columns:1fr!important;}
  .deployment-right{grid-template-columns:1fr!important;}
  .deployment-process{grid-template-columns:1fr!important;}
  .deployment-path{grid-template-columns:1fr!important;}
  .deployment-table-head,
  .deployment-table>div:not(.deployment-table-head){grid-template-columns:1fr!important;}
}

/* =========================================================
   TECH-18 - SYSTEM EVOLUTION VERSION LINEAGE
   FULL DESKTOP CONTROL ROOM
   ========================================================= */

.tech-evolution-lineage{display:none;}
body.tech-mode .tech-evolution-lineage{display:block;}
body.customer-mode .tech-evolution-lineage{display:none!important;}

.tech-evolution-toggle{
  position:fixed;
  right:24px;
  bottom:806px;
  z-index:10150;
  min-width:138px;
  height:40px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.97);
  color:#a6def5;
  font-size:10px;
  letter-spacing:1.5px;
  cursor:pointer;
}

.tech-evolution-toggle:hover{border-color:#efb632;color:#ffd168;}

.tech-evolution-panel{
  position:fixed;
  inset:14px 170px 14px 14px;
  z-index:10149;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(32,124,166,.8);
  background:
    radial-gradient(circle at 48% 5%,rgba(0,132,198,.09),transparent 32%),
    linear-gradient(180deg,rgba(1,12,20,.998),rgba(0,7,12,.998));
  box-shadow:0 0 80px rgba(0,0,0,.76);
  transition:.24s ease;
}

.tech-evolution-lineage.open .tech-evolution-panel{opacity:1;visibility:visible;pointer-events:auto;}

.evolution-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 20px;
  border-bottom:1px solid rgba(32,124,166,.35);
  background:rgba(1,11,18,.985);
}

.evolution-topbar small{display:block;color:#35c7ff;font-size:10px;letter-spacing:4px;margin-bottom:6px;}
.evolution-topbar strong{color:#ffd05c;font-size:18px;letter-spacing:2px;}

.evolution-topbar button{
  width:38px;height:38px;border:1px solid #17648a;background:#03121c;color:#73d9ff;font-size:17px;cursor:pointer;
}

.evolution-modebar{
  margin:11px 18px 0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  border:1px solid rgba(174,125,24,.70);
  background:rgba(38,27,4,.38);
}

.evolution-modebar span{color:#7895a2;font-size:9px;}
.evolution-modebar strong{color:#ffd168;font-size:10px;}
.evolution-modebar small{color:#a4b7bf;font-size:9px;}

.evolution-process{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:6px;
  align-items:center;
  padding:13px 18px;
}

.evolution-process-step{
  min-height:72px;
  border:1px solid #175d7c;
  background:rgba(2,17,28,.88);
  padding:10px 11px;
}

.evolution-process-step.active{border-color:#d39a21;background:rgba(42,30,4,.43);}
.evolution-process-step b{display:block;color:#55d2ff;font-size:9px;margin-bottom:6px;}
.evolution-process-step strong{display:block;color:#f0f9fc;font-size:11px;margin-bottom:5px;}
.evolution-process-step small{color:#94a9b2;font-size:9px;}
.evolution-process>i{color:#efb632;font-style:normal;text-align:center;font-size:18px;}

.evolution-workspace{
  display:grid;
  grid-template-columns:24% 48% 28%;
  gap:10px;
  padding:0 18px 11px;
}

.evolution-left{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.70);
  padding:10px;
}

.evolution-center{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.62);
  padding:12px;
}

.evolution-right{display:flex;flex-direction:column;gap:8px;}
.evolution-section-title{color:#43cfff;font-size:10px;letter-spacing:2.2px;margin-bottom:9px;}

.evolution-generation{
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:34px 1fr 30px;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.90);
  color:#fff;
  padding:7px 9px;
  text-align:left;
  cursor:pointer;
}

.evolution-generation:hover,
.evolution-generation.active{border-color:#d89b1f;background:rgba(40,28,4,.42);}

.evolution-number{color:#4ccaff;font-size:10px;font-weight:700;}
.evolution-generation strong{display:block;color:#f0f7fa;font-size:11px;margin-bottom:4px;}
.evolution-generation span{color:#91a7b1;font-size:9px;}
.evolution-generation em{font-style:normal;color:#dcecf3;font-size:18px;text-align:center;}

.evolution-selected-title{color:#ffd05c;font-size:20px;font-weight:700;margin-bottom:9px;}
.evolution-description{color:#c9dbe3;font-size:11px;line-height:1.6;margin:0 0 11px;}

.evolution-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.evolution-detail-grid>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 10px;
}

.evolution-detail-grid small{display:block;color:#4ebddd;font-size:8px;margin-bottom:7px;}
.evolution-detail-grid strong{display:block;color:#e8f5fa;font-size:10px;line-height:1.35;}

.evolution-rule{
  margin-top:9px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-top:1px solid rgba(213,155,34,.25);
}

.evolution-rule span{color:#73909d;font-size:8px;flex:none;}
.evolution-rule strong{color:#ffd05c;font-size:9px;line-height:1.4;}

.evolution-lineage-title,
.evolution-table-title{
  color:#42cfff;
  font-size:9px;
  letter-spacing:2px;
  margin:11px 0 8px;
}

.evolution-lineage-track{
  display:grid;
  grid-template-columns:1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
  align-items:center;
  gap:3px;
}

.evolution-lineage-track>div{
  min-height:62px;
  border:1px solid #175b7b;
  background:#03131e;
  padding:7px;
}

.evolution-lineage-track>div.current{
  border-color:#d89b1f;
  background:rgba(40,28,4,.42);
}

.evolution-lineage-track b{display:block;color:#49c9f6;font-size:8px;margin-bottom:4px;}
.evolution-lineage-track strong{display:block;color:#e7f2f6;font-size:8px;margin-bottom:4px;}
.evolution-lineage-track span{color:#91a7b1;font-size:7px;}
.evolution-lineage-track i{color:#efb632;font-style:normal;text-align:center;}

.evolution-table{
  display:grid;
  gap:1px;
  background:#16445a;
}

.evolution-table-head,
.evolution-table>div:not(.evolution-table-head){
  display:grid;
  grid-template-columns:1.25fr 1.2fr .85fr 1.35fr 1.1fr .9fr;
  gap:1px;
}

.evolution-table-head span,
.evolution-table>div:not(.evolution-table-head)>*{
  background:#03111b;
  padding:7px 8px;
  font-size:8px;
}

.evolution-table-head span{color:#49c9f6;}
.evolution-table span{color:#eaf5f9;}
.evolution-table b{color:#8bd8f3;font-weight:500;}
.evolution-table em{color:#ffd05c;font-style:normal;}

.evolution-card{
  min-height:68px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 11px;
}

.evolution-icon{color:#14bdf5;font-size:24px;text-align:center;}
.evolution-card small{display:block;color:#42cfff;font-size:8px;margin-bottom:6px;}
.evolution-card strong{display:block;color:#e4f0f5;font-size:10px;line-height:1.35;}

.evolution-current-card{
  border:1px solid #9b711d;
  background:rgba(34,25,4,.38);
  padding:12px;
}

.evolution-current-card>small{display:block;color:#ffd168;font-size:9px;letter-spacing:1.5px;margin-bottom:6px;}
.evolution-current-card>strong{display:block;color:#ffd05c;font-size:17px;margin-bottom:9px;}

.evolution-current-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(213,155,34,.15);
}

.evolution-current-line span{color:#cbdce4;font-size:9px;}
.evolution-current-line b{color:#72d8ff;font-size:8px;}

.evolution-notes{
  flex:1;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
}

.evolution-notes small{display:block;color:#42cfff;font-size:9px;margin-bottom:8px;}
.evolution-notes p{margin:0 0 8px;color:#d3e2e8;font-size:10px;line-height:1.5;}

.evolution-bottom-principle{
  margin:0 18px 11px;
  padding:11px 13px;
  border-top:1px solid rgba(213,155,34,.28);
  border-bottom:1px solid rgba(213,155,34,.28);
}

.evolution-bottom-principle small{display:block;color:#e5aa28;font-size:9px;margin-bottom:6px;}
.evolution-bottom-principle strong{color:#d1e1e7;font-size:10px;line-height:1.5;font-weight:500;}

.evolution-footer{
  min-height:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-top:1px solid rgba(32,112,149,.35);
  color:#35c7ff;
  font-size:8px;
  letter-spacing:1.4px;
}

/* nutzt TECH-16/17/18 vertikal besser aus */
@media(min-width:1200px) and (min-height:850px){
  .incident-workspace,
  .deployment-workspace,
  .evolution-workspace{
    min-height:calc(100vh - 350px);
  }

  .incident-left-column,
  .incident-center-column,
  .deployment-left,
  .deployment-center,
  .evolution-left,
  .evolution-center{
    height:100%;
  }
}

@media(max-width:1199px){
  .tech-evolution-panel{inset:6vh 5vw!important;}
  .evolution-workspace{grid-template-columns:1fr!important;}
  .evolution-right{display:grid!important;grid-template-columns:repeat(2,1fr)!important;}
  .evolution-process{grid-template-columns:repeat(3,1fr)!important;}
  .evolution-process>i{display:none!important;}
  .evolution-lineage-track{grid-template-columns:repeat(3,1fr)!important;}
  .evolution-lineage-track>i{display:none!important;}
}

@media(max-width:700px){
  .evolution-detail-grid{grid-template-columns:1fr!important;}
  .evolution-right{grid-template-columns:1fr!important;}
  .evolution-process{grid-template-columns:1fr!important;}
  .evolution-lineage-track{grid-template-columns:1fr!important;}
  .evolution-table-head,
  .evolution-table>div:not(.evolution-table-head){grid-template-columns:1fr!important;}
}

/* =========================================================
   TECH-19 - TRADING DECISION ANATOMY
   FULL DESKTOP CONTROL ROOM
   ========================================================= */

.tech-decision-anatomy{display:none;}
body.tech-mode .tech-decision-anatomy{display:block;}
body.customer-mode .tech-decision-anatomy{display:none!important;}

.tech-decision-toggle{
  position:fixed;
  right:24px;
  bottom:852px;
  z-index:10155;
  min-width:138px;
  height:40px;
  border:1px solid #315f76;
  background:rgba(2,15,24,.97);
  color:#a6def5;
  font-size:10px;
  letter-spacing:1.5px;
  cursor:pointer;
}

.tech-decision-toggle:hover{border-color:#efb632;color:#ffd168;}

.tech-decision-panel{
  position:fixed;
  inset:14px 170px 14px 14px;
  z-index:10154;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(32,124,166,.8);
  background:
    radial-gradient(circle at 48% 5%,rgba(0,132,198,.09),transparent 32%),
    linear-gradient(180deg,rgba(1,12,20,.998),rgba(0,7,12,.998));
  box-shadow:0 0 80px rgba(0,0,0,.76);
  transition:.24s ease;
}

.tech-decision-anatomy.open .tech-decision-panel{opacity:1;visibility:visible;pointer-events:auto;}

.decision-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 20px;
  border-bottom:1px solid rgba(32,124,166,.35);
  background:rgba(1,11,18,.985);
}

.decision-topbar small{display:block;color:#35c7ff;font-size:10px;letter-spacing:4px;margin-bottom:6px;}
.decision-topbar strong{color:#ffd05c;font-size:18px;letter-spacing:2px;}

.decision-topbar button{
  width:38px;height:38px;border:1px solid #17648a;background:#03121c;color:#73d9ff;font-size:17px;cursor:pointer;
}

.decision-modebar{
  margin:11px 18px 0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  border:1px solid rgba(174,125,24,.70);
  background:rgba(38,27,4,.38);
}

.decision-modebar span{color:#7895a2;font-size:9px;}
.decision-modebar strong{color:#ffd168;font-size:10px;}
.decision-modebar small{color:#a4b7bf;font-size:9px;}

.decision-process{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:6px;
  align-items:center;
  padding:13px 18px;
}

.decision-process-step{
  min-height:72px;
  border:1px solid #175d7c;
  background:rgba(2,17,28,.88);
  padding:10px 11px;
}

.decision-process-step.active{border-color:#d39a21;background:rgba(42,30,4,.43);}
.decision-process-step b{display:block;color:#55d2ff;font-size:9px;margin-bottom:6px;}
.decision-process-step strong{display:block;color:#f0f9fc;font-size:11px;margin-bottom:5px;}
.decision-process-step small{color:#94a9b2;font-size:9px;}
.decision-process>i{color:#efb632;font-style:normal;text-align:center;font-size:18px;}

.decision-workspace{
  display:grid;
  grid-template-columns:24% 48% 28%;
  gap:10px;
  padding:0 18px 11px;
  min-height:calc(100vh - 330px);
}

.decision-left{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.70);
  padding:10px;
}

.decision-center{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.62);
  padding:12px;
}

.decision-right{display:flex;flex-direction:column;gap:8px;}
.decision-section-title{color:#43cfff;font-size:10px;letter-spacing:2.2px;margin-bottom:9px;}

.decision-domain{
  width:100%;
  min-height:50px;
  display:grid;
  grid-template-columns:34px 1fr 30px;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.90);
  color:#fff;
  padding:7px 9px;
  text-align:left;
  cursor:pointer;
}

.decision-domain:hover,
.decision-domain.active{border-color:#d89b1f;background:rgba(40,28,4,.42);}

.decision-number{color:#4ccaff;font-size:10px;font-weight:700;}
.decision-domain strong{display:block;color:#f0f7fa;font-size:11px;margin-bottom:4px;}
.decision-domain span{color:#91a7b1;font-size:9px;}
.decision-domain em{font-style:normal;color:#dcecf3;font-size:18px;text-align:center;}

.decision-selected-title{color:#ffd05c;font-size:20px;font-weight:700;margin-bottom:9px;}
.decision-description{color:#c9dbe3;font-size:11px;line-height:1.6;margin:0 0 11px;}

.decision-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.decision-detail-grid>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 10px;
}

.decision-detail-grid small{display:block;color:#4ebddd;font-size:8px;margin-bottom:7px;}
.decision-detail-grid strong{display:block;color:#e8f5fa;font-size:10px;line-height:1.35;}

.decision-rule{
  margin-top:9px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-top:1px solid rgba(213,155,34,.25);
}

.decision-rule span{color:#73909d;font-size:8px;flex:none;}
.decision-rule strong{color:#ffd05c;font-size:9px;line-height:1.4;}

.decision-path-title,
.decision-matrix-title{
  color:#42cfff;
  font-size:9px;
  letter-spacing:2px;
  margin:11px 0 8px;
}

.decision-path{
  display:grid;
  grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
  align-items:center;
  gap:2px;
}

.decision-path>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:#03131e;
  padding:6px;
}

.decision-path>div.decision-current{
  border-color:#d89b1f;
  background:rgba(40,28,4,.42);
}

.decision-path b{display:block;color:#49c9f6;font-size:7px;margin-bottom:4px;}
.decision-path strong{display:block;color:#e7f2f6;font-size:7px;margin-bottom:4px;}
.decision-path span{color:#91a7b1;font-size:6px;}
.decision-path i{color:#efb632;font-style:normal;text-align:center;}

.decision-table{
  display:grid;
  gap:1px;
  background:#16445a;
}

.decision-table-head,
.decision-table>div:not(.decision-table-head){
  display:grid;
  grid-template-columns:1.1fr 1.3fr .9fr 1.1fr 1.3fr .9fr;
  gap:1px;
}

.decision-table-head span,
.decision-table>div:not(.decision-table-head)>*{
  background:#03111b;
  padding:7px 8px;
  font-size:8px;
}

.decision-table-head span{color:#49c9f6;}
.decision-table span{color:#eaf5f9;}
.decision-table b{color:#8bd8f3;font-weight:500;}
.decision-table em{color:#ffd05c;font-style:normal;}

.decision-card{
  min-height:68px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 11px;
}

.decision-icon{color:#14bdf5;font-size:24px;text-align:center;}
.decision-card small{display:block;color:#42cfff;font-size:8px;margin-bottom:6px;}
.decision-card strong{display:block;color:#e4f0f5;font-size:10px;line-height:1.35;}

.decision-authority-card{
  border:1px solid #9b711d;
  background:rgba(34,25,4,.38);
  padding:12px;
}

.decision-authority-card>small{display:block;color:#ffd168;font-size:9px;letter-spacing:1.5px;margin-bottom:7px;}

.decision-authority-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(213,155,34,.15);
}

.decision-authority-line span{color:#cbdce4;font-size:9px;}
.decision-authority-line b{color:#72d8ff;font-size:8px;}

.decision-notes{
  flex:1;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
}

.decision-notes small{display:block;color:#42cfff;font-size:9px;margin-bottom:8px;}
.decision-notes p{margin:0 0 8px;color:#d3e2e8;font-size:10px;line-height:1.5;}

.decision-bottom-principle{
  margin:0 18px 11px;
  padding:11px 13px;
  border-top:1px solid rgba(213,155,34,.28);
  border-bottom:1px solid rgba(213,155,34,.28);
}

.decision-bottom-principle small{display:block;color:#e5aa28;font-size:9px;margin-bottom:6px;}
.decision-bottom-principle strong{color:#d1e1e7;font-size:10px;line-height:1.5;font-weight:500;}

.decision-footer{
  min-height:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-top:1px solid rgba(32,112,149,.35);
  color:#35c7ff;
  font-size:8px;
  letter-spacing:1.4px;
}

@media(max-width:1199px){
  .tech-decision-panel{inset:6vh 5vw!important;}
  .decision-workspace{grid-template-columns:1fr!important;}
  .decision-right{display:grid!important;grid-template-columns:repeat(2,1fr)!important;}
  .decision-process{grid-template-columns:repeat(3,1fr)!important;}
  .decision-process>i{display:none!important;}
  .decision-path{grid-template-columns:repeat(3,1fr)!important;}
  .decision-path>i{display:none!important;}
}

@media(max-width:700px){
  .decision-detail-grid{grid-template-columns:1fr!important;}
  .decision-right{grid-template-columns:1fr!important;}
  .decision-process{grid-template-columns:1fr!important;}
  .decision-path{grid-template-columns:1fr!important;}
  .decision-table-head,
  .decision-table>div:not(.decision-table-head){grid-template-columns:1fr!important;}
}

/* =========================================================
   TECH-20 - TECHNICAL COMMAND SUMMARY
   FINAL FULL DESKTOP CONTROL ROOM
   ========================================================= */

.tech-command-summary{display:none;}
body.tech-mode .tech-command-summary{display:block;}
body.customer-mode .tech-command-summary{display:none!important;}

.tech-command-toggle{
  position:fixed;
  right:24px;
  bottom:898px;
  z-index:10160;
  min-width:138px;
  height:40px;
  border:1px solid #d39a21;
  background:rgba(37,27,4,.72);
  color:#ffd168;
  font-size:10px;
  letter-spacing:1.6px;
  cursor:pointer;
}

.tech-command-toggle:hover{
  background:rgba(61,43,5,.85);
  box-shadow:0 0 18px rgba(239,182,50,.14);
}

.tech-command-panel{
  position:fixed;
  inset:14px 170px 14px 14px;
  z-index:10159;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(32,124,166,.85);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,145,215,.11),transparent 34%),
    linear-gradient(180deg,rgba(1,12,20,.998),rgba(0,7,12,.998));
  box-shadow:0 0 90px rgba(0,0,0,.78);
  transition:.24s ease;
}

.tech-command-summary.open .tech-command-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.command-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 20px;
  border-bottom:1px solid rgba(32,124,166,.35);
  background:rgba(1,11,18,.988);
}

.command-topbar small{display:block;color:#35c7ff;font-size:10px;letter-spacing:4px;margin-bottom:6px;}
.command-topbar strong{color:#ffd05c;font-size:18px;letter-spacing:2px;}

.command-topbar button{
  width:38px;height:38px;border:1px solid #17648a;background:#03121c;color:#73d9ff;font-size:17px;cursor:pointer;
}

.command-modebar{
  margin:11px 18px 0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  border:1px solid rgba(174,125,24,.72);
  background:rgba(38,27,4,.4);
}

.command-modebar span{color:#7895a2;font-size:9px;}
.command-modebar strong{color:#ffd168;font-size:10px;}
.command-modebar small{color:#a4b7bf;font-size:9px;}

.command-process{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap:6px;
  align-items:center;
  padding:13px 18px;
}

.command-process-step{
  min-height:72px;
  border:1px solid #175d7c;
  background:rgba(2,17,28,.88);
  padding:10px 11px;
}

.command-process-step.active{
  border-color:#d39a21;
  background:rgba(42,30,4,.43);
}

.command-process-step b{display:block;color:#55d2ff;font-size:9px;margin-bottom:6px;}
.command-process-step strong{display:block;color:#f0f9fc;font-size:11px;margin-bottom:5px;}
.command-process-step small{color:#94a9b2;font-size:9px;}
.command-process>i{color:#efb632;font-style:normal;text-align:center;font-size:18px;}

.command-workspace{
  display:grid;
  grid-template-columns:24% 48% 28%;
  gap:10px;
  padding:0 18px 11px;
  min-height:calc(100vh - 330px);
}

.command-left{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.70);
  padding:10px;
}

.command-center{
  border:1px solid rgba(32,112,149,.62);
  background:rgba(1,14,23,.62);
  padding:12px;
}

.command-right{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.command-section-title{
  color:#43cfff;
  font-size:10px;
  letter-spacing:2.2px;
  margin-bottom:9px;
}

.command-domain{
  width:100%;
  min-height:50px;
  display:grid;
  grid-template-columns:34px 1fr 30px;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  border:1px solid #175d7d;
  background:rgba(3,18,29,.90);
  color:#fff;
  padding:7px 9px;
  text-align:left;
  cursor:pointer;
}

.command-domain:hover,
.command-domain.active{
  border-color:#d89b1f;
  background:rgba(40,28,4,.42);
}

.command-number{
  color:#4ccaff;
  font-size:10px;
  font-weight:700;
}

.command-domain strong{
  display:block;
  color:#f0f7fa;
  font-size:11px;
  margin-bottom:4px;
}

.command-domain span{
  color:#91a7b1;
  font-size:9px;
}

.command-domain em{
  font-style:normal;
  color:#dcecf3;
  font-size:18px;
  text-align:center;
}

.command-selected-title{
  color:#ffd05c;
  font-size:20px;
  font-weight:700;
  margin-bottom:9px;
}

.command-description{
  color:#c9dbe3;
  font-size:11px;
  line-height:1.6;
  margin:0 0 11px;
}

.command-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.command-detail-grid>div{
  min-height:58px;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 10px;
}

.command-detail-grid small{
  display:block;
  color:#4ebddd;
  font-size:8px;
  margin-bottom:7px;
}

.command-detail-grid strong{
  display:block;
  color:#e8f5fa;
  font-size:10px;
  line-height:1.35;
}

.command-rule{
  margin-top:9px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-top:1px solid rgba(213,155,34,.25);
}

.command-rule span{
  color:#73909d;
  font-size:8px;
  flex:none;
}

.command-rule strong{
  color:#ffd05c;
  font-size:9px;
  line-height:1.4;
}

.command-map-title,
.command-summary-title{
  color:#42cfff;
  font-size:9px;
  letter-spacing:2px;
  margin:11px 0 8px;
}

.command-map{
  border:1px solid rgba(32,112,149,.45);
  background:rgba(2,15,24,.48);
  padding:8px;
}

.command-map-row{
  display:grid;
  grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;
  gap:5px;
  align-items:center;
}

.command-map-row>div{
  min-height:57px;
  border:1px solid #175b7b;
  background:#03131e;
  padding:7px;
}

.command-map-row b{
  display:block;
  color:#49c9f6;
  font-size:8px;
  margin-bottom:4px;
}

.command-map-row strong{
  display:block;
  color:#e7f2f6;
  font-size:9px;
  margin-bottom:4px;
}

.command-map-row span{
  color:#91a7b1;
  font-size:8px;
}

.command-map-row i{
  color:#efb632;
  font-style:normal;
  text-align:center;
  font-size:16px;
}

.command-map-separator{
  color:#efb632;
  text-align:center;
  font-size:15px;
  padding:3px 0;
}

.command-summary-table{
  display:grid;
  gap:1px;
  background:#16445a;
}

.command-summary-head,
.command-summary-table>div:not(.command-summary-head){
  display:grid;
  grid-template-columns:.8fr 1.1fr 2fr 1fr;
  gap:1px;
}

.command-summary-head span,
.command-summary-table>div:not(.command-summary-head)>*{
  background:#03111b;
  padding:6px 8px;
  font-size:8px;
}

.command-summary-head span{color:#49c9f6;}
.command-summary-table span{color:#eaf5f9;}
.command-summary-table b{color:#8bd8f3;font-weight:500;}
.command-summary-table em{color:#ffd05c;font-style:normal;}

.command-current-row>*{
  background:rgba(38,27,4,.72)!important;
}

.command-card{
  min-height:68px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:9px 11px;
}

.command-card-icon{
  color:#14bdf5;
  font-size:24px;
  text-align:center;
}

.command-card small{
  display:block;
  color:#42cfff;
  font-size:8px;
  margin-bottom:6px;
}

.command-card strong{
  display:block;
  color:#e4f0f5;
  font-size:10px;
  line-height:1.35;
}

.command-state-card{
  border:1px solid #9b711d;
  background:rgba(34,25,4,.38);
  padding:12px;
}

.command-state-card>small{
  display:block;
  color:#ffd168;
  font-size:9px;
  letter-spacing:1.5px;
  margin-bottom:5px;
}

.command-state-card>strong{
  display:block;
  color:#ffd05c;
  font-size:17px;
  margin-bottom:8px;
}

.command-state-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(213,155,34,.15);
}

.command-state-line span{
  color:#cbdce4;
  font-size:9px;
}

.command-state-line b{
  color:#72d8ff;
  font-size:8px;
}

.command-final-card{
  flex:1;
  border:1px solid #175b7b;
  background:rgba(2,16,26,.84);
  padding:12px;
}

.command-final-card small{
  display:block;
  color:#42cfff;
  font-size:9px;
  margin-bottom:9px;
}

.command-final-card p{
  margin:0 0 9px;
  color:#d3e2e8;
  font-size:10px;
  line-height:1.55;
}

.command-bottom-principle{
  margin:0 18px 11px;
  padding:11px 13px;
  border-top:1px solid rgba(213,155,34,.28);
  border-bottom:1px solid rgba(213,155,34,.28);
}

.command-bottom-principle small{
  display:block;
  color:#e5aa28;
  font-size:9px;
  margin-bottom:6px;
}

.command-bottom-principle strong{
  color:#d1e1e7;
  font-size:10px;
  line-height:1.5;
  font-weight:500;
}

.command-footer{
  min-height:38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-top:1px solid rgba(32,112,149,.35);
  color:#35c7ff;
  font-size:8px;
  letter-spacing:1.4px;
}

@media(max-width:1199px){
  .tech-command-panel{inset:6vh 5vw!important;}
  .command-workspace{grid-template-columns:1fr!important;}
  .command-right{display:grid!important;grid-template-columns:repeat(2,1fr)!important;}
  .command-process{grid-template-columns:repeat(3,1fr)!important;}
  .command-process>i{display:none!important;}
  .command-map-row{grid-template-columns:repeat(2,1fr)!important;}
  .command-map-row i{display:none!important;}
}

@media(max-width:700px){
  .command-detail-grid{grid-template-columns:1fr!important;}
  .command-right{grid-template-columns:1fr!important;}
  .command-process{grid-template-columns:1fr!important;}
  .command-map-row{grid-template-columns:1fr!important;}
  .command-summary-head,
  .command-summary-table>div:not(.command-summary-head){grid-template-columns:1fr!important;}
}

/* =========================================================
   NARRATOR-01 - STORY NARRATOR ENGINE
   ========================================================= */

.zenith-narrator{
  position:fixed;
  z-index:12000;
  right:24px;
  top:122px;
  font-family:inherit;
}

.narrator-launcher{
  width:138px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid #c89321;
  background:rgba(34,25,4,.90);
  color:#ffd168;
  font-size:10px;
  letter-spacing:1.8px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(239,182,50,.08);
}

.narrator-launcher:hover{
  background:rgba(61,43,5,.94);
  box-shadow:0 0 22px rgba(239,182,50,.18);
}

.narrator-launcher-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid #d69d24;
  border-radius:50%;
  color:#ffd168;
  font-size:10px;
}

.zenith-narrator.speaking .narrator-launcher-icon{
  animation:zenithNarratorPulse 1.35s infinite;
}

@keyframes zenithNarratorPulse{
  0%{box-shadow:0 0 0 0 rgba(255,199,63,.44);}
  70%{box-shadow:0 0 0 11px rgba(255,199,63,0);}
  100%{box-shadow:0 0 0 0 rgba(255,199,63,0);}
}

.narrator-panel{
  position:fixed;
  right:24px;
  top:174px;
  width:min(520px,calc(100vw - 48px));
  max-height:calc(100vh - 195px);
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  border:1px solid rgba(40,132,172,.88);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,143,210,.10),transparent 32%),
    linear-gradient(180deg,rgba(2,15,24,.995),rgba(0,8,13,.995));
  box-shadow:0 18px 60px rgba(0,0,0,.62);
  transition:.22s ease;
}

.zenith-narrator.open .narrator-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.narrator-head{
  position:sticky;
  top:0;
  z-index:3;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 15px;
  background:rgba(1,12,20,.985);
  border-bottom:1px solid rgba(38,124,164,.32);
}

.narrator-head small{
  display:block;
  color:#41caff;
  font-size:8px;
  letter-spacing:3px;
  margin-bottom:5px;
}

.narrator-head strong{
  color:#ffd168;
  font-size:14px;
  letter-spacing:1.7px;
}

.narrator-head button{
  width:34px;
  height:34px;
  border:1px solid #17648a;
  background:#03131e;
  color:#74d8ff;
  cursor:pointer;
  font-size:16px;
}

.narrator-statusbar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid rgba(38,124,164,.30);
}

.narrator-statusbar>div{
  min-height:55px;
  padding:10px;
  border-right:1px solid rgba(38,124,164,.25);
}

.narrator-statusbar>div:last-child{
  border-right:none;
}

.narrator-statusbar small{
  display:block;
  color:#688b9b;
  font-size:7px;
  margin-bottom:5px;
}

.narrator-statusbar strong{
  color:#72d8ff;
  font-size:9px;
}

.narrator-now{
  margin:13px;
  padding:14px;
  border:1px solid rgba(174,125,24,.62);
  background:rgba(37,27,4,.34);
}

.narrator-now small{
  display:block;
  color:#41caff;
  font-size:8px;
  letter-spacing:1.5px;
  margin-bottom:6px;
}

.narrator-now strong{
  display:block;
  color:#ffd168;
  font-size:15px;
  margin-bottom:8px;
}

.narrator-now p{
  margin:0;
  color:#d6e4e9;
  font-size:11px;
  line-height:1.55;
}

.narrator-progress-wrap{
  padding:0 13px 12px;
}

.narrator-progress-track{
  height:4px;
  background:#082331;
  overflow:hidden;
}

.narrator-progress{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#19bdf1,#efb632);
  transition:width .25s ease;
}

.narrator-progress-labels{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  color:#6f919f;
  font-size:8px;
}

.narrator-controls{
  display:grid;
  grid-template-columns:54px 1fr 54px 54px 54px;
  gap:6px;
  padding:0 13px 13px;
}

.narrator-controls button{
  min-height:42px;
  border:1px solid #175d7d;
  background:#03131e;
  color:#8fdfff;
  cursor:pointer;
  font-size:10px;
}

.narrator-controls button:hover{
  border-color:#efb632;
  color:#ffd168;
}

.narrator-controls .narrator-primary{
  border-color:#b37f1e;
  background:rgba(37,27,4,.44);
  color:#ffd168;
  letter-spacing:1px;
}

.narrator-options{
  display:grid;
  gap:9px;
  padding:13px;
  border-top:1px solid rgba(38,124,164,.28);
}

.narrator-options label{
  display:grid;
  grid-template-columns:155px 1fr;
  align-items:center;
  gap:10px;
}

.narrator-options label>span{
  color:#80a1af;
  font-size:8px;
  letter-spacing:.8px;
}

.narrator-options label b{
  color:#ffd168;
  font-weight:500;
}

.narrator-options select{
  width:100%;
  min-height:34px;
  border:1px solid #175d7d;
  background:#03131e;
  color:#d8edf5;
  padding:6px 8px;
  font-size:9px;
}

.narrator-options input[type=range]{
  width:100%;
  accent-color:#d8a128;
}

.narrator-switches{
  display:grid;
  gap:7px;
  padding:12px 13px;
  border-top:1px solid rgba(38,124,164,.28);
}

.narrator-switches label{
  display:flex;
  gap:9px;
  align-items:center;
  min-height:31px;
  color:#a9c0ca;
  font-size:8px;
  letter-spacing:.5px;
}

.narrator-switches input{
  accent-color:#e0aa2d;
}

.narrator-chapters{
  padding:12px 13px;
  border-top:1px solid rgba(38,124,164,.28);
}

.narrator-chapters>small{
  display:block;
  color:#41caff;
  font-size:8px;
  letter-spacing:1.5px;
  margin-bottom:9px;
}

.narrator-chapter-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:4px;
}

.narrator-chapter-grid button{
  min-height:32px;
  border:1px solid #175d7d;
  background:#03131e;
  color:#8fdfff;
  font-size:8px;
  cursor:pointer;
}

.narrator-chapter-grid button.active{
  border-color:#d39a21;
  color:#ffd168;
  background:rgba(42,30,4,.46);
}

.narrator-note{
  margin:0 13px 13px;
  padding:11px 12px;
  border-top:1px solid rgba(213,155,34,.26);
  border-bottom:1px solid rgba(213,155,34,.26);
}

.narrator-note small{
  display:block;
  color:#e5aa28;
  font-size:8px;
  margin-bottom:6px;
}

.narrator-note strong{
  display:block;
  color:#c8dbe4;
  font-size:9px;
  line-height:1.5;
  font-weight:500;
}

.narrator-footer{
  min-height:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 13px;
  border-top:1px solid rgba(38,124,164,.28);
  color:#476d7d;
  font-size:7px;
  letter-spacing:1px;
}

body.tech-mode .narrator-launcher{
  border-color:#3b7b96;
  background:rgba(2,18,28,.94);
  color:#8edfff;
}

body.tech-mode .zenith-narrator.speaking .narrator-launcher{
  border-color:#d39a21;
  color:#ffd168;
}

@media(max-width:700px){
  .zenith-narrator{
    right:10px;
    top:90px;
  }

  .narrator-launcher{
    width:112px;
  }

  .narrator-panel{
    right:10px;
    top:140px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 150px);
  }

  .narrator-statusbar{
    grid-template-columns:repeat(2,1fr);
  }

  .narrator-options label{
    grid-template-columns:1fr;
  }

  .narrator-chapter-grid{
    grid-template-columns:repeat(5,1fr);
  }
}

/* =========================================================
   NARRATOR-02 - NATURAL VOICE UPGRADE
   ========================================================= */

.zenith-narrator.speaking .narrator-now{
  border-color:rgba(224,165,40,.9);
  box-shadow:inset 0 0 28px rgba(224,165,40,.045);
}

.zenith-narrator.speaking .narrator-progress{
  box-shadow:0 0 10px rgba(25,189,241,.26);
}

.narrator-now p{
  min-height:54px;
}

.narrator-options select{
  line-height:1.35;
}

/* =========================================================
   NARRATOR-03 - STORY SYNC REPAIR
   ========================================================= */

.zenith-narrator.speaking .narrator-launcher{
  box-shadow:0 0 22px rgba(239,182,50,.16);
}

.narrator-statusbar strong{
  white-space:nowrap;
}

#narratorStatus{
  color:#ffd168;
}

/* ============================================================
   ZENITH MOBILE STEP 9 - NATIVE INNER STORY
   True smartphone layout inside iframe
   Desktop untouched
   ============================================================ */
@media (max-width:1100px), (hover:none) and (pointer:coarse){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  #storyExperience{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100vh!important;
    margin:0!important;
    padding:54px 14px 90px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
  }

  #storyExperience .story-progress{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto 28px!important;
    transform:none!important;
    grid-template-columns:auto 1fr auto!important;
    gap:10px!important;
  }

  #storyExperience .chapter-scene{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
  }

  #storyExperience .story-step{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:12px 2px 20px!important;
    transform:none!important;
  }

  #storyExperience .story-step:not(.active-step){
    display:none!important;
  }

  #storyExperience .story-step.active-step{
    display:block!important;
  }

  #storyExperience .chapter-number{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #storyExperience .chapter-title{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(34px,12vw,58px)!important;
    line-height:1.02!important;
    letter-spacing:3px!important;
    overflow-wrap:anywhere!important;
    transform:none!important;
  }

  #storyExperience .chapter-subtitle{
    width:100%!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.45!important;
    letter-spacing:2px!important;
    transform:none!important;
  }

  #storyExperience .scene-big-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(25px,8vw,40px)!important;
    line-height:1.12!important;
    letter-spacing:1.5px!important;
    overflow-wrap:anywhere!important;
    transform:none!important;
  }

  #storyExperience .scene-copy,
  #storyExperience .chapter-message{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:16px!important;
    line-height:1.58!important;
    letter-spacing:0!important;
    text-align:left!important;
  }

  #storyExperience .chapter-kicker,
  #storyExperience .scene-eyebrow{
    width:100%!important;
    max-width:100%!important;
    font-size:10px!important;
    line-height:1.4!important;
    letter-spacing:2px!important;
    overflow-wrap:anywhere!important;
  }

  #storyExperience .concept-grid,
  #storyExperience .quant-pillars,
  #storyExperience .stable-grid,
  #storyExperience .sensor-grid,
  #storyExperience .quality-engine,
  #storyExperience .intelligence-grid,
  #storyExperience .quality-vote-grid,
  #storyExperience .dna-grid,
  #storyExperience .forensic-grid,
  #storyExperience .truth-grid,
  #storyExperience .outcome-compare{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr!important;
  }

  #storyExperience .story-controls{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:28px auto 0!important;
    padding:12px 0!important;
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    gap:8px!important;
    transform:none!important;
  }

  #storyExperience .story-nav{
    min-width:0!important;
    width:auto!important;
    padding:12px 8px!important;
    font-size:10px!important;
    transform:none!important;
  }

  #storyExperience .story-dots{
    min-width:0!important;
  }

  #storyExperience .next-chapter{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-wrap:anywhere!important;
  }

  #storyExperience img,
  #storyExperience svg,
  #storyExperience canvas{
    max-width:100%!important;
  }

  #zenithNarrator{
    max-width:calc(100vw - 20px)!important;
    transform:none!important;
  }
}

@media(max-width:600px){
  #storyExperience{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  #storyExperience .scene-copy,
  #storyExperience .chapter-message{
    font-size:15px!important;
    line-height:1.55!important;
  }

  #storyExperience .story-progress-label{
    font-size:8px!important;
    letter-spacing:1px!important;
  }

  #storyExperience .story-progress-count{
    font-size:9px!important;
  }
}

/* ===== END ZENITH MOBILE STEP 9 ===== */

/* ============================================================
   ZENITH MOBILE STEP 10B
   Restore Martin narrator controls on real mobile devices
   Story layout remains untouched
   ============================================================ */
@media (max-width:1100px), (hover:none) and (pointer:coarse){

  #zenithNarrator.zenith-narrator{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:fixed!important;
    z-index:2147483000!important;
    top:auto!important;
    left:auto!important;
    right:12px!important;
    bottom:16px!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    transform:none!important;
    pointer-events:auto!important;
    margin:0!important;
    padding:0!important;
  }

  #zenithNarrator .narrator-launcher{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:2147483001!important;
    width:auto!important;
    min-width:112px!important;
    height:44px!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0!important;
    padding:0 14px!important;
    pointer-events:auto!important;
    transform:none!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  #zenithNarrator .narrator-launcher-icon{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #zenithNarrator .narrator-panel{
    position:fixed!important;
    display:block!important;
    z-index:2147483002!important;
    top:auto!important;
    left:10px!important;
    right:10px!important;
    bottom:68px!important;
    width:auto!important;
    max-width:none!important;
    max-height:72vh!important;
    overflow-y:auto!important;
    transform:translateY(10px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #zenithNarrator.open .narrator-panel{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #zenithNarrator.open .narrator-launcher{
    display:flex!important;
  }
}

/* ===== END ZENITH MOBILE STEP 10B ===== */