:root{
  --bg:#883CF0;
  --surface:#883cf050;
  --surface2:#3a1c6350;
  --border:#3a1c63;
  --border2:#5e309d;
  --teal:#883CF0;
  --teal2:#a169f0;
  --purple:#a78bfa;
  --green:#883CF0;
  --amber:#883CF0;
  --red:#883CF0;
  --blue:#883CF0;
  --text:#c8d8f0;
  --muted:#d6d6d6;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

.delinea-platform-upgrade-center-guide{
  background:#191127;color:var(--text);font-size:14px;line-height:1.6;min-height:100vh;display:flex;overflow-x:hidden;
  position: relative;
}

.delinea-platform-upgrade-center-guide::before{
  content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(150, 150, 150, 0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(166, 166, 166, 0.018) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;
}

/* ── SIDEBAR ── */
#sidebar{
  width:290px;min-width:290px;background:#180f26;border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:1;
}

.sb-head{
  padding:24px 20px 18px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}

.sb-head::after{
  content:'';position:absolute;top:-50px;right:-50px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#5d309d4a 0%,transparent 70%);pointer-events:none
}

.live-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--teal);text-transform:uppercase;background:#23133a;border:1px solid #3a1c63;border-radius:20px;padding:3px 10px;margin-bottom:10px
}

.live-dot{
  width:5px;height:5px;border-radius:50%;background:var(--teal);animation:blink 2.5s ease infinite
}

@keyframes blink{
  0%,100%{opacity:1}50%{opacity:.2}
}

.path-row{
  display:flex;align-items:center;gap:7px;margin-bottom:10px
}

.p-from{
  font-size:10px;padding:3px 8px;border-radius:4px;font-weight:600;background:rgba(251,191,36,.1);color:var(--amber);border:1px solid rgba(251,191,36,.2)
}

.p-to{
  font-size:10px;padding:3px 8px;border-radius:4px;font-weight:600;background:#23133a;color:var(--teal);border:1px solid #3a1c63;
}

.p-arr{
  color:var(--muted);font-size:11px
}

.sb-title{
  font-size:17px;font-weight:800;color:#fff;line-height:1.25
}

.sb-title span{
  color:var(--teal)
}

/* progress */
.prog-block{
  padding:16px 20px;border-bottom:1px solid var(--border)
}

.prog-label{
  font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:9px;display:flex;justify-content:space-between
}

#progress-pct{
  color:var(--teal);font-weight:600
}

.prog-track{
  width:100%;height:4px;background:#282035;border-radius:2px;overflow:hidden
}

#prog-bar{
  height:100%;background:linear-gradient(90deg,var(--teal),var(--teal2));border-radius:2px;width:0%;transition:width .4s ease
}

/* nav */
.ns{padding:12px 14px 5px}
.ns-label{font-size:10px;color:var(--muted);text-transform:uppercase;padding:0 7px;margin-bottom:5px}
.ni{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s;color:var(--muted);font-size:12px;border:1px solid transparent;line-height:1.3}
.ni:hover{background:#23133a9f;color:var(--text)}
.ni.active{background:#23133a;color:#fff;border-color:#3a1c63}
.ni.completed{color:var(--green)}
.nd{width:20px;height:20px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;transition:background .2s}
.ni.active .nd{background:var(--teal);color:#000}
.ni.completed .nd{background:var(--green);color:#000}

/* step badges in nav */
.ni-step{font-size:9px;padding:1px 5px;border-radius:3px;margin-left:auto;flex-shrink:0;background:#1f1232;color:var(--teal);border:1px solid #3a1c63}

/* ── MAIN ── */
#main{flex:1;
  overflow-y:auto;
  margin:0 auto;
  position:relative;
  height: 100vh;}

/* HERO */
.hero{padding:52px 60px 40px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.hero::before{content:'UPGRADE';position:absolute;right:-15px;top:-15px;font-size:140px;font-weight:800;color:#1f1c2e58;line-height:1;pointer-events:none;user-select:none;}
.upgrade-path{display:inline-flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px 16px;margin-bottom:22px;font-size:12px}
.up-from{color:var(--amber);font-weight:600}
.up-line{width:36px;height:1px;background:linear-gradient(90deg,var(--amber),var(--teal))}
.up-to{color:var(--teal);font-weight:600}
.hero-title{font-size:42px;font-weight:800;line-height:1.08;color:#fff;margin-bottom:16px;}
.hero-title em{color:var(--teal);font-style:normal}
.hero-desc{font-size:14px;color:var(--muted);max-width:640px;line-height:1.8}
.hero-stats{display:flex;gap:36px;margin-top:28px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat-n{font-size:26px;font-weight:600;color:var(--teal2)}
.stat-l{font-size:12px;color:var(--muted)}

/* what-changes banner */
.changes-banner{margin:0;padding:20px 60px;background:rgba(167,139,250,.04);border-bottom:1px solid rgba(167,139,250,.15);display:flex;gap:20px;align-items:flex-start}
.cb-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.cb-body{flex:1}
.cb-title{font-size:11px;text-transform:uppercase;color:var(--purple);margin-bottom:10px}
.cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb-card{border-radius:7px;padding:12px 14px;font-size:12.5px}
.cb-card.changes{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);color:#b07070}
.cb-card.same{background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.15);color:#5aaa80}
.cb-card-title{font-size:10px;text-transform:uppercase;margin-bottom:7px}
.cb-card.changes .cb-card-title{color:var(--red)}
.cb-card.same .cb-card-title{color:var(--green)}
.cb-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.cb-list li{display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.cb-list li::before{content:'·';flex-shrink:0;margin-top:0}

/* phase summary */
.phase-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:24px 60px;border-bottom:1px solid var(--border)}
.ps{border-radius:10px;padding:16px;border:1px solid var(--border);cursor:pointer;transition:border-color .2s,transform .15s}
.ps:hover{transform:translateY(-2px)}
.ps.pre  {border-color:rgba(251,191,36,.2);background:rgba(251,191,36,.03)}
.ps.core {border-color:rgba(45,212,191,.2);background:rgba(45,212,191,.03)}
.ps.eng  {border-color:rgba(167,139,250,.2);background:rgba(167,139,250,.03)}
.ps.post {border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.03)}
.ps-lbl{font-size:9.5px;text-transform:uppercase;margin-bottom:5px}
.ps.pre  .ps-lbl{color:var(--amber)}
.ps.core .ps-lbl{color:var(--teal)}
.ps.eng  .ps-lbl{color:var(--purple)}
.ps.post .ps-lbl{color:var(--green)}
.ps-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
.ps-cnt{font-size:11.5px;color:var(--muted)}
.ps-bar{height:3px;border-radius:2px;margin-top:10px;background:var(--border);overflow:hidden}
.ps-fill{height:100%;border-radius:2px;transition:width .5s ease}
.ps.pre  .ps-fill{background:var(--amber)}
.ps.core .ps-fill{background:var(--teal)}
.ps.eng  .ps-fill{background:var(--purple)}
.ps.post .ps-fill{background:var(--green)}

/* phase divider */
.pdiv{display:flex;align-items:center;gap:16px;padding:34px 60px 0}
.pline{flex:1;height:1px;background:var(--border)}
.plabel{font-size:10.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* sections */
.sec{padding:44px 60px;border-bottom:1px solid var(--border);animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sec-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:26px}
.sec-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid var(--border2)}
.i-teal  {background:#23133a; border-color:#3a1c63}
.i-amber {background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.25)}
.i-green {background:#23133a; border-color:#3a1c63}
.i-purple{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25)}
.i-red   {background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25)}
.i-blue  {background:#23133a; border-color:#3a1c63}
.sec-meta{flex:1}
.sec-tag{font-size:10px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.step-badge{font-size:10px;padding:2px 8px;border-radius:4px;background:#1f1232;color:var(--teal);border:1px solid #3a1c63}
.sec-title{font-size:24px;font-weight:700;color:#fff;line-height:1.2}
.sec-desc{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.75}

/* phase pills */
.ppill{display:inline-flex;align-items:center;gap:7px;font-size:10px;padding:4px 12px;border-radius:20px;margin-bottom:20px;}
.ppill.pre  {background:rgba(167,139,250,.08); color:var(--amber); border:1px solid rgba(167,139,250,.2)}
.ppill.core {background:rgba(167,139,250,.08); color:var(--teal);  border:1px solid rgba(167,139,250,.2)}
.ppill.eng  {background:rgba(167,139,250,.08);color:var(--purple);border:1px solid rgba(167,139,250,.2)}
.ppill.post {background:rgba(167,139,250,.08); color:var(--green); border:1px solid rgba(167,139,250,.2)}

/* task cards */
.tgrid{display:flex;flex-direction:column;gap:10px}
.tc{border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}
.tc:hover{border-color:var(--border2)}
.tc.done{border-color:rgba(52,211,153,.28)}
.th{display:flex;align-items:center;gap:13px;padding:15px 17px;cursor:pointer;user-select:none;transition:background .15s}
.th:hover{background:rgba(255,255,255,.015)}
.chk{width:22px;height:22px;border:2px solid var(--border2);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;cursor:pointer;font-size:13px}
.tc.done .chk{background:var(--green);border-color:var(--green);color:#000}
.ti{flex:1}
.tt{font-size:13.5px;font-weight:500;color:var(--text)}
.tc.done .tt{color:var(--muted);text-decoration:line-through}
.ts{font-size:10.5px;color:var(--muted);margin-top:2px}
.tbadge{font-size:10px;padding:3px 8px;border-radius:20px;flex-shrink:0}
.b-crit{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.22)}
.b-req {background:rgba(251,191,36,.1);  color:var(--amber);border:1px solid rgba(251,191,36,.2)}
.b-opt {background:rgba(96,165,250,.1);  color:var(--blue); border:1px solid rgba(96,165,250,.2)}
.b-step{background:#23133a;  color:var(--teal); border:1px solid #3a1c63;}
.tchev{font-size:11px;color:var(--muted);transition:transform .25s;width:16px;text-align:center}
.tc.open .tchev{transform:rotate(90deg)}
.tbody{display:none;padding:0 17px 17px 52px;border-top:1px solid var(--border)}
.tc.open .tbody{display:block}
.tbody p{font-size:13.5px;color:#7e8aa0;line-height:1.75;margin-bottom:13px;margin-top:13px}

/* steps list */
.sl{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.sl li{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:#7e8aa0}
.sn{font-size:10px;color:var(--teal);background:#1f1232;border:1px solid #3a1c63;border-radius:4px;padding:1px 6px;margin-top:1px;flex-shrink:0}

/* code blocks */
.cb{background:#060810;border:1px solid var(--border);border-radius:8px;padding:13px 15px;font-size:11.5px;color:#7e8aa0;line-height:1.75;overflow-x:auto;margin-bottom:13px}
.cb .cm{color:#fff}
.cb .kw{color:var(--blue)}
.cb .vl{color:var(--green)}
.cb .cmd{color:var(--teal)}
.cb .old{color:var(--red);text-decoration:line-through;opacity:.7}
.cb .nw{color:var(--teal)}

/* note boxes */
.nb{border-radius:8px;padding:11px 14px;font-size:13px;display:flex;gap:10px;margin-bottom:10px;line-height:1.65}
.nb.warn   {background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.18);color:#b09040}
.nb.info   {background:rgba(45,212,191,.06);border:1px solid rgba(45,212,191,.18);color:#4a9e90}
.nb.danger {background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.18);color:#c06060}
.nb.success{background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.18);color:#3a8a65}
.nb.purple {background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.18);color:#9070c0}
.ni2{font-size:14px;flex-shrink:0;margin-top:1px}

/* subtasks */
.stl{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.st{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.015);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;font-size:12.5px;color:#c4cbd9;user-select:none}
.st:hover{background:#1f1232;border-color:var(--border)}
.st.checked{color:var(--muted);background:rgba(52,211,153,.04);border-color:rgba(52,211,153,.14)}
.st.checked span{text-decoration:line-through}
.sc{width:15px;height:15px;border:1.5px solid var(--border2);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;transition:all .2s}
.st.checked .sc{background:var(--green);border-color:var(--green);color:#000}

/* tables */
.ct{width:100%;border-collapse:collapse;margin-bottom:13px;font-size:12.5px}
.ct th{font-size:10px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
.ct td{padding:9px 12px;border-bottom:1px solid rgba(24,29,46,.8);color:#7e8aa0}
.ct tr:last-child td{border-bottom:none}
.ct tr:hover td{background:rgba(255,255,255,.01)}
.dg{color:var(--green)} .da{color:var(--amber)} .dr{color:var(--red)} .dt{color:var(--teal)}

/* nav path row for settings instruction */
.nav-path{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:rgba(45,212,191,.06);border:1px solid rgba(45,212,191,.15);border-radius:5px;padding:4px 10px;margin-bottom:10px;color:var(--teal2)}
.nav-path span{color:var(--muted)}

/* footer */
.footer{padding:34px 60px;color:var(--muted);font-size:11.5px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

@media(max-width:820px){
  #sidebar{display:none}
  .sec,.hero{padding:28px 20px}
  .phase-sum{grid-template-columns:1fr 1fr;padding:20px}
  .pdiv{padding:20px 20px 0}
  .footer{padding:20px}
  .hero-title{font-size:28px}
  .changes-banner{padding:16px 20px;flex-direction:column}
  .cb-grid{grid-template-columns:1fr}
}