/* ═══════════════════════════════════════════════════════════════
   Topology Design System — Theme & Layout
   Glassmorphism + ambient light + depth-of-field aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET + TOKENS ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Surface */
  --tds-bg:#1d1f27;
  --tds-panel:#22252e;
  --tds-panel2:#292d3a;
  --tds-border:#3e4550;
  /* Text */
  --tds-text:#e6e8e9;
  --tds-muted:#7d8a92;
  --tds-muted2:#606a70;
  --tds-bright:#b1b9be;
  /* Accent palette */
  --tds-green:#01a982;
  --tds-green-ok:#05cc93;
  --tds-blue:#65aef9;
  --tds-purple:#7764fc;
  --tds-gold:#deb146;
  --tds-red:#fc6161;
  --tds-orange:#ec8c25;
  --tds-teal:#00a4b3;
  --tds-pe:#068667;
  --tds-coral:#d25f4b;
  /* Glass */
  --tds-glass:rgba(34,37,46,.55);
  --tds-glass-border:rgba(255,255,255,.06);
  --tds-glass-highlight:rgba(255,255,255,.03);
  --tds-glass-blur:16px;
  --tds-glass-saturate:1.4;
  /* Glow */
  --tds-glow-green:rgba(1,169,130,.35);
  --tds-glow-purple:rgba(119,100,252,.25);
  --tds-glow-blue:rgba(101,174,249,.2);
  /* Timing */
  --tds-phase-ms:600ms;
  --tds-transition:0.55s ease;
  --tds-transition-fast:0.35s ease;
  /* Typography */
  --tds-font:'JetBrains Mono',monospace;
}

/* ── BODY ── */
.tds-root{
  min-height:100vh;background:var(--tds-bg);color:var(--tds-text);
  font-family:var(--tds-font);display:flex;flex-direction:column;
  align-items:center;padding:16px 20px;overflow-x:hidden;position:relative;
}

/* ── AMBIENT LIGHT LEAKS ── */
.tds-root::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, var(--tds-glow-green), transparent),
    radial-gradient(ellipse 500px 500px at 85% 75%, var(--tds-glow-purple), transparent),
    radial-gradient(ellipse 400px 350px at 50% 10%, var(--tds-glow-blue), transparent);
  animation:tds-ambientShift 20s ease-in-out infinite alternate;opacity:.6;
}
@keyframes tds-ambientShift{
  0%{filter:blur(80px) saturate(1.2);transform:scale(1) translate(0,0)}
  33%{filter:blur(90px) saturate(1.4);transform:scale(1.05) translate(20px,-10px)}
  66%{filter:blur(75px) saturate(1.3);transform:scale(.98) translate(-15px,15px)}
  100%{filter:blur(85px) saturate(1.5);transform:scale(1.02) translate(10px,5px)}
}
.tds-root::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle 300px at 70% 30%, rgba(222,177,70,.08), transparent),
    radial-gradient(circle 250px at 25% 80%, rgba(5,204,147,.1), transparent);
  animation:tds-ambientShift2 30s ease-in-out infinite alternate;opacity:.5;
}
@keyframes tds-ambientShift2{
  0%{filter:blur(100px);transform:translate(0,0) rotate(0deg)}
  100%{filter:blur(110px);transform:translate(-30px,20px) rotate(3deg)}
}

/* ── GLASS MIXIN ── */
.tds-glass{
  background:var(--tds-glass);
  backdrop-filter:blur(var(--tds-glass-blur)) saturate(var(--tds-glass-saturate));
  -webkit-backdrop-filter:blur(var(--tds-glass-blur)) saturate(var(--tds-glass-saturate));
  border:1px solid var(--tds-glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 var(--tds-glass-highlight),inset 0 -1px 0 rgba(0,0,0,.1);
  position:relative;z-index:1;
}
.tds-glass::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  pointer-events:none;border-radius:1px;
}

/* ── TOPBAR ── */
.tds-topbar{text-align:center;margin-bottom:10px;z-index:1;position:relative}
.tds-topbar h1{
  font-size:18px;font-weight:700;color:var(--tds-green);letter-spacing:2px;text-transform:uppercase;
  text-shadow:0 0 30px var(--tds-glow-green),0 0 60px rgba(1,169,130,.15);
}
.tds-topbar .tds-sub{font-size:10px;color:var(--tds-muted);margin-top:3px;letter-spacing:1px}

/* ── MAIN LAYOUT ── */
.tds-main{display:flex;gap:12px;width:100%;max-width:1260px;min-height:calc(100vh - 90px);z-index:1;position:relative}

/* ── SIDEBAR ── */
.tds-sidebar{
  width:230px;min-width:230px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(165deg,rgba(34,37,46,.7),rgba(29,31,39,.8));
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:8px 6px;overflow:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1200px) rotateY(.6deg);transform-origin:right center;transition:transform .4s ease;
}
.tds-sidebar:hover{transform:perspective(1200px) rotateY(0deg)}
.tds-sidebar::-webkit-scrollbar{width:4px}
.tds-sidebar::-webkit-scrollbar-thumb{background:#535c66;border-radius:2px}

/* Act groups */
.tds-act{border:1px solid rgba(255,255,255,.03);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.015);transition:all .25s}
.tds-act:hover{border-color:rgba(1,169,130,.12);background:rgba(1,169,130,.02)}
.tds-act-hdr{
  padding:7px 8px;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tds-muted2);
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;border-bottom:1px solid rgba(255,255,255,.02);transition:background .2s;
}
.tds-act-hdr:hover{background:rgba(255,255,255,.04)}
.tds-act-hdr .tds-left{display:flex;align-items:center;gap:8px}
.tds-act-body{padding:6px 4px 6px;display:flex;flex-direction:column;gap:2px}
.tds-act.collapsed .tds-act-body{display:none}

/* Step rows */
.tds-step-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  cursor:pointer;transition:all .2s ease;border:1px solid transparent;
  font-size:8.5px;color:var(--tds-muted2);line-height:1.25;
}
.tds-step-row:hover{background:rgba(1,169,130,.06);color:var(--tds-bright);transform:translateX(2px)}
.tds-step-row.active{color:var(--tds-bright)}
.tds-step-row.current{
  background:rgba(1,169,130,.1);color:var(--tds-green);border-color:rgba(1,169,130,.35);
  box-shadow:0 0 12px rgba(1,169,130,.1),inset 0 0 8px rgba(1,169,130,.03);
}
.tds-step-num{
  width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:700;background:rgba(255,255,255,.04);color:var(--tds-muted2);flex-shrink:0;transition:all .2s;
}
.tds-step-row.active .tds-step-num{background:rgba(1,169,130,.15);color:var(--tds-green)}
.tds-step-row.current .tds-step-num{background:var(--tds-green);color:var(--tds-bg);box-shadow:0 0 10px rgba(1,169,130,.4)}
.tds-step-state{
  margin-left:auto;width:8px;height:8px;border-radius:50%;border:1px solid #535c66;opacity:.75;transition:all .25s;
}
.tds-step-row.active .tds-step-state{background:rgba(148,163,184,.5)}
.tds-step-row.current .tds-step-state{background:var(--tds-green);border-color:var(--tds-green);opacity:1;box-shadow:0 0 6px rgba(1,169,130,.5)}

/* ── RIGHT COLUMN ── */
.tds-right{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;position:relative}

/* ── TOOLBAR ── */
.tds-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(34,37,46,.6),rgba(29,31,39,.7));
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:8px 10px;
  box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
.tds-pips{display:flex;align-items:center;gap:3px;padding:5px 10px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.04)}
.tds-pip{width:16px;height:5px;border-radius:3px;cursor:pointer;background:rgba(255,255,255,.06);transition:all .25s}
.tds-pip:hover{background:rgba(1,169,130,.25)}
.tds-pip.active{background:var(--tds-green);box-shadow:0 0 8px rgba(1,169,130,.4)}
.tds-step-label{display:flex;align-items:center;min-height:24px}
.tds-step-label span{font-size:10px;color:var(--tds-bright);background:rgba(255,255,255,.04);padding:3px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.06)}
.tds-toolgroup{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.tds-select,.tds-range,.tds-mini-btn{
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--tds-text);
  border-radius:8px;padding:6px 10px;font-size:10px;font-family:var(--tds-font);transition:all .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tds-select:hover,.tds-mini-btn:hover{background:rgba(1,169,130,.06);border-color:rgba(1,169,130,.2)}
.tds-range{padding:6px 10px;display:flex;align-items:center;gap:10px}
.tds-range input{width:130px;accent-color:var(--tds-green)}
.tds-range.hidden{display:none}
.tds-mini-btn{cursor:pointer}
.tds-kbd{font-size:9px;color:var(--tds-muted);padding:1px 6px;border:1px solid rgba(255,255,255,.06);border-radius:6px;background:rgba(255,255,255,.02)}

/* ── CANVAS ── */
.tds-canvas-row{display:flex;gap:10px;flex:1;min-height:0}
.tds-canvas{
  background:linear-gradient(180deg,rgba(34,37,46,.5) 0%,rgba(29,31,39,.65) 100%);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.15);
  flex:1;min-height:0;position:relative;overflow:hidden;
  transform:perspective(1800px) rotateX(.3deg);transform-origin:center top;transition:transform .5s ease;
}
.tds-canvas:hover{transform:perspective(1800px) rotateX(0deg)}
.tds-canvas::before{
  content:'';position:absolute;inset:-1px;border-radius:14px;padding:1px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(1,169,130,.15),transparent 40%,transparent 60%,rgba(119,100,252,.1));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:tds-borderGlow 8s ease-in-out infinite alternate;
}
@keyframes tds-borderGlow{0%{opacity:.5}50%{opacity:.9}100%{opacity:.5}}
.tds-canvas::after{
  content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(1,169,130,.06),transparent 70%);
  animation:tds-cornerPulse 6s ease-in-out infinite alternate;
}
@keyframes tds-cornerPulse{0%{opacity:.3;transform:scale(.9)}100%{opacity:.7;transform:scale(1.1)}}

/* SVG animation classes */
.tds-canvas svg text{font-family:var(--tds-font)}
.tds-phase-in{animation:tds-phaseIn var(--tds-transition) backwards}
@keyframes tds-phaseIn{from{opacity:0}}
.tds-draw-phase{animation:tds-drawStroke .7s ease backwards}
@keyframes tds-drawStroke{from{stroke-dashoffset:2000;opacity:0}}
.tds-fade{transition:opacity var(--tds-transition)}
.tds-fade-fast{transition:opacity var(--tds-transition-fast)}

/* ── CONTROLS ── */
.tds-controls{
  position:sticky;bottom:10px;display:flex;align-items:center;gap:8px;margin-top:4px;
  background:linear-gradient(135deg,rgba(29,31,39,.7),rgba(34,37,46,.6));
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.04);
  align-self:flex-start;
}
.tds-btn{
  padding:7px 14px;font-size:11px;font-weight:600;font-family:var(--tds-font);border-radius:10px;
  cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--tds-text);
}
.tds-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:translateY(-1px)}
.tds-btn:active{transform:translateY(0)}
.tds-btn:disabled{border-color:rgba(255,255,255,.03);background:rgba(255,255,255,.01);color:#535c66;cursor:not-allowed;transform:none}
.tds-btn.play{
  background:linear-gradient(135deg,rgba(1,169,130,.85),rgba(5,204,147,.75));border-color:rgba(1,169,130,.5);color:var(--tds-bg);
  box-shadow:0 0 20px rgba(1,169,130,.25),inset 0 1px 0 rgba(255,255,255,.15);
}
.tds-btn.play:hover{box-shadow:0 0 30px rgba(1,169,130,.4),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-1px)}
.tds-btn.pause{border-color:rgba(252,97,97,.4);color:var(--tds-text);box-shadow:0 0 15px rgba(252,97,97,.1)}

/* ── NARRATOR ── */
.tds-narrator{
  width:280px;min-width:280px;flex-shrink:0;
  background:linear-gradient(160deg,rgba(34,37,46,.88),rgba(29,31,39,.92));
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column;transition:width .3s ease,min-width .3s ease,opacity .3s ease,padding .3s ease;
}
.tds-narrator.collapsed{width:36px;min-width:36px;overflow:hidden}
.tds-narrator.collapsed .tds-nar-body{display:none}
.tds-narrator.collapsed .tds-nar-head .tds-title-text,
.tds-narrator.collapsed .tds-nar-head .tds-badge{display:none}
.tds-narrator.collapsed .tds-nar-head{flex-direction:column;padding:8px 4px;gap:8px}
.tds-narrator::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);pointer-events:none;
}
.tds-nar-head{
  display:flex;align-items:center;justify-content:space-between;padding:8px 10px;
  background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;
}
.tds-nar-head .tds-title{font-size:8px;color:var(--tds-muted);letter-spacing:1.6px;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.tds-dots{display:flex;gap:6px}
.tds-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px currentColor}
.tds-dot.r{background:rgba(252,97,97,.8);color:rgba(252,97,97,.3)}
.tds-dot.y{background:rgba(222,177,70,.8);color:rgba(222,177,70,.3)}
.tds-dot.g{background:rgba(5,204,147,.8);color:rgba(5,204,147,.3)}
.tds-nar-toggle{
  width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  color:var(--tds-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .2s;flex-shrink:0;
}
.tds-nar-toggle:hover{background:rgba(1,169,130,.1);border-color:rgba(1,169,130,.3);color:var(--tds-green)}
.tds-nar-body{padding:10px 12px 12px;overflow-y:auto;flex:1;min-height:0}
.tds-nar-body .tds-line{font-size:10px;color:var(--tds-bright);line-height:1.35;margin-bottom:6px}
.tds-nar-body .tds-meta{display:grid;grid-template-columns:52px 1fr;gap:6px 10px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.06)}
.tds-nar-body .tds-k{font-size:9px;color:var(--tds-muted2)}
.tds-nar-body .tds-v{font-size:9.5px;color:var(--tds-text)}
.tds-nar-body .tds-bullets{margin-top:4px}
.tds-nar-body .tds-bullets div{font-size:9.3px;color:var(--tds-text);opacity:.92;margin:3px 0}
.tds-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:9px;border:1px solid rgba(255,255,255,.06);
  padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.03);color:var(--tds-text);backdrop-filter:blur(6px);
}

/* ── MODAL ── */
.tds-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.tds-modal{
  width:min(720px,94vw);
  background:linear-gradient(160deg,rgba(34,37,46,.95),rgba(29,31,39,.97));
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.05);
}
.tds-modal .tds-mhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.04)}
.tds-modal .tds-mhead h3{font-size:12px;color:var(--tds-text)}
.tds-modal .tds-mclose{cursor:pointer}
.tds-term{padding:10px;border:1px solid rgba(255,255,255,.04);border-radius:10px;margin-bottom:10px;background:rgba(255,255,255,.02);transition:all .2s}
.tds-term:hover{background:rgba(1,169,130,.03);border-color:rgba(1,169,130,.1)}
.tds-term .tds-t{font-size:11px;color:var(--tds-green);font-weight:700;margin-bottom:4px;text-shadow:0 0 20px rgba(1,169,130,.2)}
.tds-term .tds-d{font-size:10px;color:var(--tds-text);line-height:1.35}

/* ── ACT INTRO CARD ── */
.tds-act-intro{
  margin-top:10px;padding:10px;border:1px dashed rgba(51,65,85,.75);border-radius:10px;
  background:rgba(15,23,42,.35);
}
.tds-act-intro-title{font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:6px}
.tds-act-intro-line{font-size:9.5px;color:var(--tds-text);opacity:.95;margin:3px 0}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  .tds-main{flex-direction:column}
  .tds-sidebar{width:100%;min-width:0;max-height:260px;transform:none}
  .tds-sidebar:hover{transform:none}
  .tds-canvas-row{flex-direction:column}
  .tds-canvas{transform:none}
  .tds-canvas:hover{transform:none}
  .tds-narrator{width:100%;min-width:0}
  .tds-narrator.collapsed{width:100%;min-width:0}
  .tds-narrator.collapsed .tds-nar-body{display:block}
  .tds-narrator.collapsed .tds-nar-head .tds-title-text,
  .tds-narrator.collapsed .tds-nar-head .tds-badge{display:inline-flex}
  .tds-narrator.collapsed .tds-nar-head{flex-direction:row}
  .tds-controls{align-self:stretch;justify-content:flex-start;flex-wrap:wrap}
}