/* ============================================================
   SPUTNIK VPS — оформление заказа, оплата, панель, база знаний
   ============================================================ */

.steps{display:flex;border:1px solid var(--line);background:var(--panel);border-radius:2px;overflow:hidden}
.step{flex:1;padding:14px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);border-right:1px solid var(--line);display:flex;align-items:center;gap:9px;text-transform:uppercase}
.step:last-child{border-right:0}
.step i{font-style:normal;color:var(--line-2);font-weight:700}
.step.is-on{color:var(--acc);background:rgba(0,255,157,.045)}
.step.is-on i{color:var(--acc)}
.step.is-done{color:var(--txt-2)}
.step.is-done i{color:var(--acc)}

.ord{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(20px,3vw,34px);align-items:start}
.ord-blk{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}
.ord-blk:last-child{border-bottom:0;margin-bottom:0}
.ord-blk__h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.ord-blk__h .mono{font-size:11px;color:var(--acc);letter-spacing:.16em}
.ord-blk__h h2{font-size:20px}

.sum{position:sticky;top:calc(var(--hdr) + 20px)}
.sum__h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.sum__body{padding:18px}
.sum__plan b{font-family:var(--disp);font-size:20px;display:block;letter-spacing:-.03em}
.sum__lines{margin:0;border-top:0;font-size:13px}
.sum__lines li{padding:7px 0}
.sum__total{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.sum__total span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sum__total b{font-family:var(--disp);font-size:26px;letter-spacing:-.04em;color:var(--acc)}
.sum__steps{margin:0;padding-left:18px;font-size:13px;color:var(--txt-2);display:grid;gap:7px}
.sum__steps li::marker{color:var(--acc);font-family:var(--mono);font-size:11px}

/* ---------- оплата ---------- */
.pay{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(20px,3vw,34px);align-items:start}
.coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px}
.coin{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:.18s var(--ease);border-radius:2px;text-align:left}
.coin:hover{border-color:var(--line-2);background:var(--panel-2)}
.coin.is-on{border-color:var(--acc);background:rgba(0,255,157,.05)}
.coin__t{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--acc);letter-spacing:-.02em}
.coin.is-on .coin__t{border-color:var(--acc);background:var(--acc-dim)}
.coin__n{font-size:13.5px;font-weight:500;line-height:1.2}
.coin__s{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.03em}

.inv{border:1px solid var(--line);background:var(--panel);border-radius:2px;overflow:hidden}
.inv__h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);flex-wrap:wrap}
.inv__no{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--txt-2)}
.inv__b{padding:clamp(18px,3vw,26px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,28px)}
.qr{width:186px;height:186px;border:1px solid var(--line-2);background:#fff;padding:9px;border-radius:2px;flex:none}
.qr canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.amt{font-family:var(--disp);font-size:clamp(23px,3.2vw,32px);letter-spacing:-.04em;line-height:1.1;word-break:break-all}
.amt small{font-family:var(--mono);font-size:14px;color:var(--acc);letter-spacing:0;margin-left:6px}
.addr{display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;margin-top:6px}
.addr code{flex:1;min-width:0;padding:11px 13px;font-family:var(--mono);font-size:12.5px;color:var(--txt);background:var(--bg-2);word-break:break-all;line-height:1.5}
.addr button{flex:none;border:0;border-left:1px solid var(--line-2);background:var(--panel-2);padding:0 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-2);cursor:pointer;transition:.18s}
.addr button:hover,.addr button.is-ok{background:var(--acc);color:#04150e}
.timer{font-family:var(--mono);font-size:13px;color:var(--warn);letter-spacing:.06em}
.timer.is-low{color:var(--err)}
.bar{height:3px;background:var(--line);overflow:hidden;border-radius:2px}
.bar i{display:block;height:100%;background:var(--acc);width:100%;transition:width 1s linear}
.bar.is-low i{background:var(--err)}

.plog{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px}
.plog li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);color:var(--dim)}
.plog li:last-child{border-bottom:0}
.plog li b{color:var(--txt-2);font-weight:400}
.plog li.is-on,.plog li.is-on b{color:var(--txt)}
.plog li.is-ok,.plog li.is-ok b{color:var(--acc)}
.plog__i{width:14px;flex:none;text-align:center}

.spin{display:inline-block;width:11px;height:11px;border:1.5px solid var(--line-2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- выдача сервера ---------- */
.creds{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.creds__r{display:grid;grid-template-columns:158px minmax(0,1fr) auto;background:var(--panel);align-items:center}
.creds__r>*{padding:12px 15px}
.creds__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-right:1px solid var(--line)}
.creds__v{font-family:var(--mono);font-size:13px;color:var(--txt);word-break:break-all}
.creds__c{border:0;background:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);cursor:pointer;transition:.18s}
.creds__c:hover,.creds__c.is-ok{color:var(--acc)}

/* ---------- статус сети ---------- */
.srv{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) 120px;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.srv:last-child{border-bottom:0}
.srv__n{display:flex;align-items:center;gap:10px}
.srv__m{font-family:var(--mono);font-size:12px;color:var(--txt-2)}
.spark{display:flex;gap:2px;align-items:flex-end;height:26px}
.spark i{width:4px;background:var(--acc);opacity:.5;border-radius:1px;display:block}
.spark i.w{background:var(--warn);opacity:.9}
.spark i.e{background:var(--err);opacity:.9}
.inc{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.inc:last-child{border-bottom:0}
.inc__d{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.05em}
.inc__t{font-weight:500;margin-bottom:6px}
.inc__x{font-size:13.5px;color:var(--txt-2)}

/* ---------- вход ---------- */
.auth{max-width:430px;margin:0 auto}
.auth__box{border:1px solid var(--line);background:var(--panel);padding:clamp(22px,3vw,32px);border-radius:2px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:11px 6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.18s;margin-bottom:-1px}
.tabs button.is-on{color:var(--acc);border-bottom-color:var(--acc)}

/* ---------- база знаний ---------- */
.kb-l{display:grid;border-top:1px solid var(--line)}
.kb-i{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);align-items:baseline;transition:.2s var(--ease)}
.kb-i:hover{background:rgba(255,255,255,.02);padding-left:12px;padding-right:12px}
.kb-i__d{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.kb-i__t{font-size:16.5px;font-weight:500}
.kb-i:hover .kb-i__t{color:var(--acc)}
.kb-i__s{font-size:13.5px;color:var(--txt-2);margin-top:5px}
.kb-i__c{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.art{max-width:76ch;font-size:15.5px;color:var(--txt-2);line-height:1.75}
.art h2{margin:40px 0 14px;font-size:23px;color:var(--txt)}
.art h3{margin:28px 0 10px;font-size:17px;color:var(--txt)}
.art ul,.art ol{padding-left:20px;margin:0 0 18px}
.art li{margin-bottom:8px}
.art b{color:var(--txt)}
.art code{font-family:var(--mono);font-size:13px;background:var(--panel-2);border:1px solid var(--line);padding:1px 5px;border-radius:2px;color:var(--acc)}
.art pre{background:#0c0d0f;border:1px solid var(--line);border-radius:2px;padding:15px 16px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--txt-2);margin:0 0 18px}
.art pre code{background:none;border:0;padding:0;color:inherit}
.art blockquote{margin:0 0 18px;padding:12px 16px;border-left:2px solid var(--acc);background:rgba(0,255,157,.04)}
.art blockquote p:last-child{margin-bottom:0}
.art table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 18px}
.art th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500}
.art td{padding:10px 12px;border-bottom:1px solid var(--line)}

@media (max-width:1120px){
  .ord,.pay{grid-template-columns:1fr}
  .sum{position:static}
  .inv__b{grid-template-columns:1fr}
  .qr{margin-inline:auto}
  .srv{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}
  .kb-i{grid-template-columns:1fr;gap:6px}
  .inc{grid-template-columns:1fr;gap:6px}
}
@media (max-width:760px){
  .steps{flex-direction:column}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .creds__r{grid-template-columns:1fr auto}
  .creds__k{border-right:0;grid-column:1/-1;padding-bottom:4px}
}

/* ---------- юридические страницы ---------- */
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);
  --x:0;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr;gap:20px}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .toc a{border-left:0;border:1px solid var(--line);padding:6px 10px;border-radius:2px;font-size:12px}
}

/* ---------- панель управления ---------- */
.pnl-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}
.pnl-user{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12.5px;color:var(--txt-2)}
.pnl-av{width:32px;height:32px;border:1px solid var(--acc);border-radius:50%;display:grid;place-items:center;color:var(--acc);font-family:var(--mono);font-size:12px;background:var(--acc-dim)}
.pane{display:none}
.pane.is-on{display:block}
.metric{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:16px 0}
.metric>div{background:var(--panel);padding:14px 16px}
.metric__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.metric__v{font-family:var(--mono);font-size:17px;color:var(--txt);margin-top:6px}
.gauge{height:4px;background:var(--line);margin-top:9px;border-radius:2px;overflow:hidden}
.gauge i{display:block;height:100%;background:var(--acc);transition:width .6s var(--ease)}
.gauge i.w{background:var(--warn)}
.chart{width:100%;height:64px;display:block}
.toast-w{position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:10px;max-width:330px}
.toast{border:1px solid var(--acc);background:rgba(10,12,11,.96);backdrop-filter:blur(8px);padding:12px 15px;font-size:13px;border-radius:2px;box-shadow:0 20px 50px -25px #000;animation:tin .25s var(--ease)}
.toast b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.toast--err{border-color:var(--err)}
.toast--err b{color:var(--err)}
@keyframes tin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .metric{grid-template-columns:1fr}
  .toast-w{left:14px;right:14px;bottom:14px;max-width:none}
}

.legal-grid>*{min-width:0}
.ord>*,.pay>*{min-width:0}
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1120px){
  .ord,.pay{grid-template-columns:minmax(0,1fr)}
}

/* ---------- лестница развёртывания ---------- */
.dprog{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:6px}
.dprog i{display:block;height:100%;background:var(--acc);width:0;transition:width .6s var(--ease)}
.dsteps{border-top:1px solid var(--line);margin-top:12px}
.dstep{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.dstep__i{width:23px;height:23px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--dim);flex:none}
.dstep.is-run .dstep__i{border-color:var(--acc);color:var(--acc)}
.dstep.is-ok .dstep__i{background:var(--acc);border-color:var(--acc);color:#04150e;font-weight:700}
.dstep__t{font-size:14px;color:var(--dim);transition:color .3s}
.dstep.is-run .dstep__t,.dstep.is-ok .dstep__t{color:var(--txt)}
.dstep__x{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.dstep.is-ok .dstep__x{color:var(--acc)}

/* ---------- 404 ---------- */
.e404-w{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,54px);align-items:center}
.e404{font-family:var(--disp);font-weight:700;font-size:clamp(84px,17vw,190px);line-height:.82;letter-spacing:-.07em;position:relative;color:var(--txt);user-select:none}
.e404::before,.e404::after{content:'404';position:absolute;inset:0;pointer-events:none}
.e404::before{color:var(--acc);transform:translate(-4px,3px);opacity:.5;animation:gl404 7s infinite}
.e404::after{color:var(--amb);transform:translate(4px,-3px);opacity:.35;animation:gl404 7s .4s infinite reverse}
@keyframes gl404{
  0%,90%{clip-path:inset(0 0 0 0)}
  92%{clip-path:inset(28% 0 46% 0)}
  94%{clip-path:inset(62% 0 12% 0)}
  96%{clip-path:inset(8% 0 74% 0)}
  98%{clip-path:inset(44% 0 30% 0)}
}
@media (max-width:760px){
  .e404-w{grid-template-columns:1fr;gap:18px}
}