:root{
  --bg:#07090f;
  --bg2:#0b0f1a;
  --panel:rgba(17,23,40,.72);
  --panel-solid:#101627;
  --line:rgba(120,150,255,.12);
  --line-strong:rgba(120,150,255,.25);
  --txt:#dbe4ff;
  --txt-dim:#8b96b8;
  --txt-mute:#5a6584;
  --acc:#22d3ee;
  --acc2:#a78bfa;
  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Inter',system-ui,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  min-height:100vh;overflow-x:hidden;
}
::selection{background:rgba(34,211,238,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1c2742;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2a3a63}

/* фон */
.bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.16}
.o1{width:560px;height:560px;background:#0ea5e9;top:-180px;left:-120px}
.o2{width:480px;height:480px;background:#7c3aed;bottom:-160px;right:-100px}
.o3{width:300px;height:300px;background:#14b8a6;top:40%;left:55%}
.bg-grid{position:fixed;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(120,150,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,150,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 100%);
}

/* шапка */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 28px;
  background:rgba(7,9,15,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:24px;font-weight:800;color:#04121a;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 0 24px rgba(34,211,238,.35);
}
.brand-title{font-family:var(--mono);font-weight:800;font-size:17px;letter-spacing:.5px}
.brand-title span{color:var(--acc);margin:0 2px}
.brand-sub{font-size:11.5px;color:var(--txt-mute);margin-top:2px}
.view-switch{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px}
.view-switch button{
  font-family:var(--sans);font-weight:600;font-size:13px;color:var(--txt-dim);
  background:transparent;border:0;border-radius:8px;padding:8px 16px;cursor:pointer;
  transition:all .2s;
}
.view-switch button:hover{color:var(--txt)}
.view-switch button.active{
  color:#051018;background:linear-gradient(135deg,var(--acc),#67e8f9);
  box-shadow:0 0 16px rgba(34,211,238,.35);
}

.layout{display:flex;max-width:1500px;margin:0 auto;gap:24px;padding:24px;align-items:flex-start}

/* сайдбар */
.sidebar{
  width:290px;flex-shrink:0;position:sticky;top:96px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:14px;backdrop-filter:blur(14px);
  max-height:calc(100vh - 120px);overflow-y:auto;
}
.side-title{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--txt-mute);padding:8px 10px 10px;text-transform:uppercase}
.dev-btn{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:12px;
  padding:10px 12px;cursor:pointer;color:var(--txt);transition:all .18s;margin-bottom:4px;
}
.dev-btn:hover{background:rgba(120,150,255,.07)}
.dev-btn.active{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.35);box-shadow:0 0 18px rgba(34,211,238,.12) inset}
.dev-ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;font-weight:800;flex-shrink:0;
  border:1px solid var(--line-strong);background:var(--bg2);
}
.dev-btn.active .dev-ico{border-color:var(--acc);color:var(--acc);text-shadow:0 0 12px rgba(34,211,238,.6)}
.dev-meta{min-width:0;flex:1}
.dev-name{font-family:var(--mono);font-weight:700;font-size:13.5px}
.dev-role{font-size:11px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-prog{height:4px;border-radius:3px;background:#1a2340;margin-top:6px;overflow:hidden}
.dev-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
.dev-pct{font-family:var(--mono);font-size:10.5px;color:var(--txt-mute);margin-left:4px}

/* контент */
.content{flex:1;min-width:0}
.dev-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px 26px;margin-bottom:20px;backdrop-filter:blur(14px);
  position:relative;overflow:hidden;
}
.dev-head::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 160px at 15% 0%,rgba(34,211,238,.1),transparent 70%);
  pointer-events:none;
}
.dev-head h1{font-family:var(--mono);font-size:30px;font-weight:800;letter-spacing:-.5px}
.dev-head h1 .fqdn{color:var(--txt-mute);font-size:16px;font-weight:400;margin-left:10px}
.dev-head .role{color:var(--acc);font-size:13px;font-weight:600;margin-top:5px}
.ip-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{
  font-family:var(--mono);font-size:11.5px;color:var(--txt-dim);
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;
}
.chip b{color:var(--acc2);font-weight:600}

/* табы задач */
.task-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.task-tab{
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--txt-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 13px;cursor:pointer;transition:all .18s;
}
.task-tab:hover{color:var(--txt);border-color:var(--line-strong);transform:translateY(-1px)}
.task-tab.done{color:var(--ok);border-color:rgba(52,211,153,.35)}
.task-tab.done::after{content:" ✓"}

/* карточка задачи */
.task-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  margin-bottom:22px;overflow:hidden;backdrop-filter:blur(14px);
}
.task-head{
  display:flex;align-items:center;gap:14px;padding:16px 22px;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;
}
.task-num{
  font-family:var(--mono);font-weight:800;font-size:13px;color:#051018;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  min-width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
}
.task-head h2{font-size:16px;font-weight:700;flex:1}
.task-head .collapse-mark{color:var(--txt-mute);font-size:18px;transition:transform .25s}
.task-card.closed .collapse-mark{transform:rotate(-90deg)}
.task-body{padding:20px 22px}
.task-card.closed .task-body{display:none}

.req{
  background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.22);
  border-radius:12px;padding:14px 18px;margin-bottom:18px;
}
.req-title{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--acc2);text-transform:uppercase;margin-bottom:8px}
.req ul{list-style:none}
.req li{font-size:13.5px;color:var(--txt-dim);padding:3px 0 3px 20px;position:relative}
.req li::before{content:"▸";position:absolute;left:2px;color:var(--acc2)}

/* шаги */
.step{display:flex;gap:16px;margin-bottom:20px;position:relative}
.step:not(:last-child)::before{
  content:"";position:absolute;left:17px;top:40px;bottom:-18px;width:2px;
  background:linear-gradient(180deg,var(--line-strong),transparent);
}
.step-check{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--bg2);
  display:grid;place-items:center;font-size:15px;color:transparent;
  font-family:var(--mono);font-weight:800;transition:all .2s;z-index:1;
}
.step-check:hover{border-color:var(--acc)}
.step-check.on{background:linear-gradient(135deg,var(--ok),#0ea5e9);border-color:transparent;color:#04120c;box-shadow:0 0 14px rgba(52,211,153,.4)}
.step-body{flex:1;min-width:0}
.step-title{font-weight:600;font-size:14.5px;margin:8px 0 10px}
.step-title .tag{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  padding:3px 8px;border-radius:6px;margin-left:10px;vertical-align:2px;text-transform:uppercase;
}
.tag.cli{background:rgba(34,211,238,.13);color:var(--acc);border:1px solid rgba(34,211,238,.3)}
.tag.gui{background:rgba(251,191,36,.12);color:var(--warn);border:1px solid rgba(251,191,36,.3)}
.tag.check{background:rgba(52,211,153,.1);color:var(--ok);border:1px solid rgba(52,211,153,.28)}

/* блоки кода */
.codeblock{
  background:#0a0e18;border:1px solid var(--line);border-radius:12px;
  margin:10px 0;overflow:hidden;
}
.codeblock:hover{border-color:var(--line-strong)}
.cb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px;background:rgba(120,150,255,.05);border-bottom:1px solid var(--line);
}
.cb-title{font-family:var(--mono);font-size:11px;color:var(--txt-mute)}
.cb-copy{
  font-family:var(--mono);font-size:11px;color:var(--acc);background:transparent;
  border:1px solid rgba(34,211,238,.3);border-radius:7px;padding:4px 11px;cursor:pointer;transition:all .18s;
}
.cb-copy:hover{background:rgba(34,211,238,.14);box-shadow:0 0 12px rgba(34,211,238,.25)}
pre{
  font-family:var(--mono);font-size:13px;line-height:1.65;padding:14px 16px;
  overflow-x:auto;color:#c8e1ff;
}
pre .cm{color:#5b6a8f}
pre .hl{color:#7ef0d4}

/* сноски */
.note{
  border-radius:12px;padding:14px 18px;margin:12px 0;font-size:13.5px;line-height:1.6;
  display:flex;gap:14px;
}
.note .n-ico{font-size:18px;flex-shrink:0;line-height:1.4}
.note b{color:var(--txt)}
.note ul{margin:6px 0 0 18px}
.note li{margin:3px 0;color:inherit}
.note code{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.35);padding:1px 6px;border-radius:5px}
.note.vmware{background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.3);color:#cdc3f5}
.note.vmware .n-ico{color:var(--acc2)}
.note.warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.28);color:#e8d9b0}
.note.ok{background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.25);color:#bfe9d7}

/* таблицы */
.tbl{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.tbl th{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--acc);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-strong);
}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--txt-dim);font-family:var(--mono);font-size:12.5px}
.tbl tr:hover td{background:rgba(120,150,255,.05);color:var(--txt)}
.tbl td:first-child{color:var(--txt);font-weight:600}

/* страницы топологии/vmware */
.page-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:22px;backdrop-filter:blur(14px)}
.page-card h2{font-family:var(--mono);font-size:20px;margin-bottom:6px}
.page-card h2 .accent{color:var(--acc)}
.page-card .sub{color:var(--txt-mute);font-size:13px;margin-bottom:18px}
.topo-svg{width:100%;height:auto;display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}

.empty-state{text-align:center;padding:80px 20px;color:var(--txt-mute)}
.empty-state .big{font-size:46px;margin-bottom:14px}

/* тост */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,80px);
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#051018;
  font-family:var(--mono);font-weight:700;font-size:13px;
  padding:11px 22px;border-radius:12px;z-index:99;opacity:0;transition:all .3s;
  box-shadow:0 8px 30px rgba(34,211,238,.4);
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* адаптив */
@media (max-width:900px){
  .layout{flex-direction:column;padding:14px}
  .sidebar{width:100%;position:static;max-height:none}
  .topbar{flex-wrap:wrap;padding:12px 16px}
  .dev-head h1{font-size:22px}
}
@media print{
  .bg-orbs,.bg-grid,.sidebar,.topbar,.cb-copy,.step-check,.toast{display:none!important}
  body{background:#fff;color:#000}
  .task-card,.page-card,.dev-head{border:1px solid #ccc;background:#fff}
  pre{color:#000;background:#f5f5f5}
}