/* Cabinet-specific layout. Palette and buttons come from the site theme. */
.gv-main{padding:38px 0 80px}
.gv-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
/* без запрета переноса длинные пункты ломались внутри себя, и шапка
   расползалась на три строки — пунктов стало восемь */
.gv-nav a{border-radius:999px;padding:9px 11px;color:#d7e3f9;font-weight:760;
  font-size:.94rem;white-space:nowrap}
.gv-nav a:hover{background:rgba(24,226,255,.1);color:#fff}

/* staff-only entry point: amber so it never competes with the main CTA */
.mvp-btn--admin{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.45);
  color:var(--mvp-warning);box-shadow:none}
.mvp-btn--admin:hover{background:rgba(255,209,102,.2);border-color:var(--mvp-warning);
  box-shadow:0 0 30px rgba(255,209,102,.18)}

/* просроченная подписка — единственный CTA в интерфейсе с настоящей тревогой,
   остальные кнопки нарочно спокойные */
.mvp-btn--danger{background:linear-gradient(135deg,#ff6b89,#e0435f);
  color:#fff;box-shadow:0 0 30px rgba(255,107,137,.3);border-color:transparent}
.mvp-btn--danger:hover{box-shadow:0 0 40px rgba(255,107,137,.42)}
.gv-nav a.gv-nav__admin{color:var(--mvp-warning)}
.gv-nav a.gv-nav__admin:hover{background:rgba(255,209,102,.12);color:var(--mvp-warning)}

.gv-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.gv-head h1{margin:0;font-size:2.1rem}
.gv-sub{color:var(--mvp-muted);margin:6px 0 0}

.gv-card{background:var(--mvp-card);border:1px solid var(--mvp-line);border-radius:var(--mvp-radius);padding:24px}
.gv-grid{display:grid;gap:16px}
.gv-grid--3{grid-template-columns:repeat(3,1fr)}
.gv-grid--2{grid-template-columns:repeat(2,1fr)}

/* ------------------------------------------------------------- вход
   На странице ровно одно дело — отнести код боту, поэтому код тут главный.
   Заголовок раньше наследовал размер от заголовков сайта и в узкой карточке
   разъезжался на три строки, перекрикивая сам код. */
.gv-login{max-width:520px;margin:0 auto}
.gv-login__card{position:relative;overflow:hidden;text-align:center;
  padding:38px 30px 30px;border-radius:28px;border:1px solid var(--mvp-line);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:0 30px 70px rgba(0,0,0,.28)}
/* мягкое свечение сверху — карточка перестаёт быть плоским прямоугольником */
.gv-login__card:before{content:"";position:absolute;left:50%;top:-120px;
  width:320px;height:220px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(24,226,255,.22),transparent 70%)}
.gv-login__card > *{position:relative}
.gv-login__badge{display:inline-block;margin-bottom:14px;padding:5px 13px;
  border-radius:999px;border:1px solid rgba(24,226,255,.35);
  background:rgba(24,226,255,.1);color:var(--mvp-cyan);
  font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.gv-login h1{margin:0 0 10px;font-size:clamp(1.5rem,4vw,1.95rem);
  line-height:1.2;letter-spacing:-.03em}
.gv-login__lead{margin:0 auto;max-width:38ch;color:var(--mvp-muted);
  font-size:.96rem;line-height:1.55}

/* код-«билет»: по нему же и копируется, поэтому это кнопка, а не текст */
.gv-codebox{margin:24px 0 22px;padding:18px 16px 14px;border-radius:22px;
  border:1px solid rgba(24,226,255,.28);background:rgba(7,16,31,.55)}
.gv-code{display:block;width:100%;border:0;background:transparent;cursor:pointer;
  /* кнопки по умолчанию не выделяются, а нам нужно уметь выделить код
     руками, если скопировать браузер не дал */
  user-select:text;-webkit-user-select:text;
  font:inherit;font-size:clamp(2rem,8vw,2.9rem);font-weight:950;
  letter-spacing:.2em;text-indent:.2em;line-height:1.1;
  background-image:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .15s ease,filter .15s ease}
.gv-code:hover{filter:brightness(1.15)}
.gv-code:active{transform:scale(.98)}
.gv-code.is-copied{filter:brightness(1.3)}
.gv-codebox__hint{display:block;margin-top:2px;color:var(--mvp-muted);
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* полоса времени: цифры внизу читают не все, а убывающую полосу видно сразу */
.gv-codebar{height:4px;margin:14px 0 8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.gv-codebar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mvp-cyan),var(--mvp-green));
  transition:width 1s linear,background .4s ease}
.gv-codebar i.is-low{background:linear-gradient(90deg,var(--mvp-warning),#ff6b89)}
.gv-hint{color:var(--mvp-muted);font-size:.9rem;margin:0}

/* два шага — чтобы не гадать, что делать с кодом */
.gv-loginsteps{counter-reset:gvstep;list-style:none;margin:0 0 22px;padding:0;
  display:grid;gap:10px;text-align:left}
.gv-loginsteps li{counter-increment:gvstep;position:relative;padding-left:34px;
  color:var(--mvp-soft);font-size:.94rem;line-height:1.45}
.gv-loginsteps li:before{content:counter(gvstep);position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(24,226,255,.14);color:var(--mvp-cyan);
  font-size:.78rem;font-weight:900}
.gv-login__actions{justify-content:center;margin-top:0}
.gv-state{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:20px 0 0;color:var(--mvp-soft);font-size:.92rem;min-height:1.4em}
/* пульс показывает, что страница ждёт ответа, а не зависла */
.gv-pulse{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--mvp-cyan);box-shadow:0 0 0 0 rgba(24,226,255,.55);
  animation:gvPulse 1.8s ease-out infinite}
.gv-state.is-done .gv-pulse{background:#34f5a5;animation:none}
@keyframes gvPulse{
  70%{box-shadow:0 0 0 9px rgba(24,226,255,0)}
  100%{box-shadow:0 0 0 0 rgba(24,226,255,0)}
}
.gv-login__note{margin:16px 0 0;text-align:center;color:var(--mvp-muted);
  font-size:.86rem}
@media (prefers-reduced-motion:reduce){.gv-pulse{animation:none}}

/* plans */
.gv-plan{display:flex;flex-direction:column;gap:14px}
.gv-plan__price{font-size:2rem;font-weight:950}
.gv-plan__price span{font-size:.95rem;font-weight:750;color:var(--mvp-muted)}
.gv-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--mvp-soft);font-size:.95rem}
.gv-plan li:before{content:"✓";color:var(--mvp-cyan);font-weight:900;margin-right:.5rem}
.gv-badge{position:absolute;top:16px;right:16px;border-radius:999px;padding:.3rem .6rem;
  font-size:.75rem;font-weight:850;background:rgba(24,226,255,.16);color:var(--mvp-cyan)}
.gv-plan-card{position:relative}
.gv-plan__name{margin:0}

/* standalone product, set apart from the subscription grid */
.gv-divider{height:1px;margin:40px 0 32px;
  background:linear-gradient(90deg,transparent,var(--mvp-line) 14%,
    var(--mvp-line) 86%,transparent)}
.gv-extra{display:flex;justify-content:center}
.gv-extra .gv-plan-card{width:100%;max-width:390px}
.gv-plan--compact{padding:22px;gap:12px}
.gv-plan--compact .gv-plan__name{font-size:1.45rem;line-height:1.22}
.gv-plan--compact .gv-plan__price{font-size:1.6rem}
/* long product names need the full width, so the badge sits in the flow */
.gv-plan--compact .gv-badge{position:static;align-self:flex-start;margin-bottom:2px}
/* quantity picker — local plans only, "how many units" */
.gv-count-box{padding:14px;border:1px solid var(--mvp-line);border-radius:18px;
  background:rgba(255,255,255,.04);transition:border-color .2s ease,background .2s ease}
.gv-count-box.is-multi{border-color:rgba(24,226,255,.4);background:rgba(24,226,255,.05)}

.gv-count-box__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:10px}
.gv-count-box__sum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.gv-count-box__total{font-size:1.22rem;font-weight:950;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.gv-count-box__calc{margin-top:2px;font-size:.76rem;font-weight:700;color:var(--mvp-muted);
  white-space:nowrap}
.gv-count-box__calc:empty{display:none}

/* one pill, three cells: −  [n]  + */
.gv-count-box__control{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;
  height:46px;border:1px solid var(--mvp-line);border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.28)}
.gv-count-box__btn{height:100%;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--mvp-cyan);font-size:1.35rem;font-weight:800;
  line-height:1;transition:background .18s ease,color .18s ease}
.gv-count-box__btn:hover:not(:disabled){background:rgba(24,226,255,.15)}
.gv-count-box__btn:active:not(:disabled){background:rgba(24,226,255,.26)}
.gv-count-box__btn:disabled{color:var(--mvp-muted);opacity:.35;cursor:default}

.gv-count-box__input{width:100%;height:100%;border:0;background:transparent;
  color:var(--mvp-text);text-align:center;font-weight:950;font-size:1.05rem;
  -moz-appearance:textfield}
.gv-count-box__input::-webkit-outer-spin-button,
.gv-count-box__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gv-count-box__input:focus{outline:0;background:rgba(24,226,255,.07)}

.gv-methods{display:grid;gap:8px;margin-top:4px}
.gv-method{display:flex;align-items:center;gap:10px;border:1px solid var(--mvp-line);
  border-radius:16px;padding:11px 14px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.gv-method:hover{border-color:rgba(24,226,255,.5);background:rgba(255,255,255,.04)}
.gv-method input{accent-color:var(--mvp-cyan)}

/* config type — dedicated step before the plans */
/* На этой странице всего две карточки, и на высоком экране они липли к
   шапке, оставляя внизу пустоту. Отступ растёт вместе с высотой окна:
   на большом мониторе выбор оказывается ближе к середине, а на ноутбуке
   и телефоне остаётся компактным. */
.gv-pick{margin-top:clamp(8px,11vh,120px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  align-items:stretch}
.gv-pick__card{display:flex;flex-direction:column;gap:12px;padding:32px;
  min-height:288px;
  border:1px solid var(--mvp-line);border-radius:var(--mvp-radius);
  background:var(--mvp-card);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.gv-pick__card:hover{transform:translateY(-3px);border-color:rgba(24,226,255,.55);
  box-shadow:0 0 44px rgba(24,226,255,.18)}
/* fixed box so the two emoji, which differ in height, line the cards up */
.gv-pick__icon{display:flex;align-items:center;height:52px;font-size:2.5rem;line-height:1}
.gv-pick__title{font-size:1.22rem;font-weight:950;letter-spacing:.01em;color:var(--mvp-text);
  min-height:1.6em}
.gv-pick__hint{color:var(--mvp-muted);line-height:1.55}
.gv-pick__go{margin-top:auto;padding-top:16px;font-weight:850;color:var(--mvp-cyan)}
.gv-pick__card.is-current{border-color:rgba(24,226,255,.45);
  box-shadow:0 0 30px rgba(24,226,255,.12)}

/* chosen type, shown above the plans */
.gv-chosen{display:flex;align-items:center;gap:14px;margin-bottom:26px;padding:14px 18px;
  border:1px solid var(--mvp-line);border-radius:20px;background:rgba(255,255,255,.045)}
.gv-chosen__icon{font-size:1.6rem;line-height:1}
.gv-chosen__text{display:flex;flex-direction:column;gap:2px}
.gv-chosen__text strong{font-weight:900;letter-spacing:.01em}
.gv-chosen__change{margin-left:auto;border:1px solid var(--mvp-line);border-radius:999px;
  padding:7px 14px;font-size:.84rem;font-weight:800;color:var(--mvp-text);white-space:nowrap}
.gv-chosen__change:hover{border-color:rgba(24,226,255,.5);color:var(--mvp-cyan)}

/* orders */
.gv-orders{display:grid;gap:12px}
.gv-order{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--mvp-line);border-radius:20px;padding:16px 18px;background:rgba(255,255,255,.045)}
.gv-order__meta{color:var(--mvp-muted);font-size:.88rem}
.gv-status{border-radius:999px;padding:.32rem .7rem;font-size:.8rem;font-weight:850;white-space:nowrap}
/* order row: a link for the body, a separate area for the actions, so the
   download button is not nested inside another link */
.gv-order__main{flex:1 1 240px;min-width:0;display:block}
.gv-order__main:hover .gv-order__meta{color:var(--mvp-soft)}
.gv-order__side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:flex-end}
.gv-order.is-ready{border-color:rgba(24,226,255,.4);background:rgba(24,226,255,.05)}
.gv-order.is-soon{border-color:rgba(255,209,102,.45);background:rgba(255,209,102,.06)}
.gv-order.is-expired{border-color:rgba(255,107,137,.5);background:rgba(255,107,137,.07)}
.gv-order__sub{margin-top:6px;color:var(--mvp-soft);font-size:.9rem;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gv-order__sub--expired{color:var(--mvp-danger);font-weight:750}

.gv-status--ready{background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  color:var(--mvp-bg)}
.gv-status--pending{background:rgba(255,209,102,.16);color:var(--mvp-warning)}
.gv-status--paid{background:rgba(24,226,255,.16);color:var(--mvp-cyan)}
.gv-status--expired,.gv-status--canceled{background:rgba(255,107,137,.14);color:var(--mvp-danger)}

/* payment */
.gv-pay{display:grid;gap:18px}
.gv-field{border:1px solid var(--mvp-line);border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.04)}
.gv-field__label{color:var(--mvp-muted);font-size:.82rem;margin-bottom:6px}
.gv-field__value{display:flex;align-items:center;gap:10px;justify-content:space-between;
  font-weight:850;word-break:break-all;line-height:1.35}
/* break-all нужен для адресов кошельков; даты и суммы так рвёт посреди числа */
.gv-field__value--text{word-break:normal}
.gv-copy{border:1px solid var(--mvp-line);background:rgba(255,255,255,.06);color:var(--mvp-text);
  border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap}
.gv-copy:hover{border-color:rgba(24,226,255,.5)}
.gv-note{color:var(--mvp-muted);font-size:.88rem;line-height:1.5}

/* paid order: compact confirmation instead of a giant heading */
.gv-done{display:flex;align-items:center;gap:14px}
.gv-done__icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;font-size:1.2rem;font-weight:900;color:var(--mvp-bg);
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  box-shadow:0 0 26px rgba(24,226,255,.3)}
.gv-done__title{font-size:1.35rem;font-weight:950;line-height:1.2}

/* config handed over as a file, never rendered on the page */
.gv-cfg{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:18px;border:1px solid var(--mvp-line);border-radius:20px;
  background:rgba(255,255,255,.045)}
.gv-cfg__file{display:flex;align-items:center;gap:14px;min-width:0}
.gv-cfg__ext{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  border-radius:14px;background:rgba(24,226,255,.12);color:var(--mvp-cyan);
  font-size:.7rem;font-weight:900;letter-spacing:.04em}
.gv-cfg__name{font-weight:850;word-break:break-all}
.gv-cfg__actions{display:flex;gap:10px;flex-wrap:wrap}

.gv-wait{display:flex;align-items:center;gap:14px;padding:18px;
  border:1px solid var(--mvp-line);border-radius:20px;background:rgba(255,255,255,.045)}
.gv-wait__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:var(--mvp-warning);box-shadow:0 0 0 6px rgba(255,209,102,.14)}

@media (max-width:560px){.gv-cfg__actions{width:100%}.gv-cfg__actions .mvp-btn{flex:1}}
.gv-warn{border-left:3px solid var(--mvp-warning);padding-left:12px}
/* NB: the horizontal padding is spelled out. This rule sits below
   .gv-card, so a bare `padding:26px 0` overrode the card's own 24px and
   pinned the text to the left border. */
.gv-empty{color:var(--mvp-muted);padding:26px 24px;text-align:center}

/* empty cabinet: something to look at and something to click */
.gv-blank{display:grid;justify-items:center;gap:10px;text-align:center;padding:44px 24px}
.gv-blank__icon{font-size:2.6rem;line-height:1;opacity:.85}
.gv-blank__title{font-size:1.25rem;font-weight:950}
.gv-blank .gv-note{max-width:380px}
.gv-blank .mvp-btn{margin-top:6px}

.gv-subline__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* payment QR */
.gv-qr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;
  border:1px solid var(--mvp-line);border-radius:20px;background:rgba(255,255,255,.04)}
.gv-qr__img{flex:0 0 auto;width:150px;height:150px;padding:10px;border-radius:14px;
  background:#0a1424}
.gv-qr__side{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 200px}
.gv-qr__amount{font-size:1.1rem;font-weight:950;word-break:break-all;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* active subscription cards in the cabinet */
/* one-line summary above the order list — deliberately not a copy of the rows */
.gv-summary{display:flex;align-items:center;gap:12px;margin-bottom:20px;
  padding:14px 18px;border-radius:18px;border:1px solid rgba(24,226,255,.3);
  background:rgba(24,226,255,.05);color:var(--mvp-soft);font-size:.95rem}
.gv-summary__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--mvp-cyan);box-shadow:0 0 0 5px rgba(24,226,255,.15)}

/* admin: search and filter chips */
.gv-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.gv-search{flex:1 1 240px;min-width:200px;height:42px;padding:0 16px;
  border:1px solid var(--mvp-line);border-radius:999px;background:rgba(255,255,255,.05);
  color:var(--mvp-text);font-size:.94rem}
.gv-search:focus{outline:0;border-color:rgba(24,226,255,.5)}
.gv-chips{display:flex;gap:8px;flex-wrap:wrap}
.gv-chip{border:1px solid var(--mvp-line);border-radius:999px;padding:8px 14px;
  font-size:.84rem;font-weight:800;color:var(--mvp-muted);white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.gv-chip:hover{border-color:rgba(24,226,255,.45);color:var(--mvp-text)}
.gv-chip.is-on{border-color:transparent;color:var(--mvp-bg);
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green))}

/* admin: per-order tools */
.gv-admin-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gv-inline-form{display:flex;gap:6px;align-items:center}
.gv-select,.gv-days{height:34px;border:1px solid var(--mvp-line);border-radius:999px;
  padding:0 12px;background:rgba(255,255,255,.06);color:var(--mvp-text);
  font-size:.84rem;font-weight:700}
.gv-select:focus,.gv-days:focus{outline:0;border-color:rgba(24,226,255,.5)}
/* the native dropdown list is painted by the OS and defaults to white on a
   dark page — the options need their colours set explicitly */
.gv-select option{background:#0d1832;color:var(--mvp-text)}
.gv-select option:checked{background:#16233f}
.gv-days{width:74px;text-align:center;-moz-appearance:textfield}
.gv-days::-webkit-outer-spin-button,.gv-days::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.gv-ordercard__foot{flex-wrap:wrap;gap:12px;justify-content:space-between}

/* admin: overview tiles */
.gv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
/* раньше эти правила стояли в файле выше основного и потому не срабатывали:
   на телефоне четыре плитки сжимались в один ряд и последняя уезжала за край */
@media (max-width:900px){.gv-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gv-stat__value{font-size:1.6rem}}
.gv-stat{padding:20px;border:1px solid var(--mvp-line);border-radius:20px;
  background:var(--mvp-card)}
.gv-stat__value{font-size:1.9rem;font-weight:950;line-height:1.1;letter-spacing:-.02em}
.gv-stat__label{margin-top:4px;color:var(--mvp-muted);font-size:.84rem}
.gv-stat.is-alert{border-color:rgba(255,209,102,.45);
  background:linear-gradient(135deg,rgba(255,209,102,.12),rgba(255,209,102,.04))}
.gv-stat.is-alert .gv-stat__value{color:var(--mvp-warning)}

/* admin: section blocks */
.gv-block{margin-bottom:32px}
.gv-block__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.gv-block__head h2{margin:0;font-size:1.3rem}
.gv-count{border-radius:999px;padding:.2rem .6rem;font-size:.78rem;font-weight:850;
  background:rgba(255,255,255,.08);color:var(--mvp-muted)}

/* admin: person + avatar */
.gv-avatar{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;font-size:.8rem;font-weight:900;letter-spacing:.02em;
  color:var(--mvp-bg);background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-violet))}
.gv-avatar--sm{width:32px;height:32px;font-size:.72rem}
.gv-avatar--lg{width:60px;height:60px;font-size:1.15rem}
.gv-person{display:flex;align-items:center;gap:12px;min-width:0}
.gv-person--lg{gap:16px}
.gv-person__name{font-weight:850}

/* admin: queue */
.gv-queue{display:grid;gap:10px}
.gv-qcard{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border:1px solid rgba(255,209,102,.28);border-radius:18px;
  background:rgba(255,209,102,.06);transition:border-color .2s ease,background .2s ease}
.gv-qcard:hover{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.1)}
.gv-qcard__body{min-width:0;flex:1}
.gv-qcard__title{font-weight:850}
.gv-qcard__go{flex:0 0 auto;font-weight:850;color:var(--mvp-warning);white-space:nowrap}

/* admin: order cards */
.gv-ordercard{padding:22px;margin-bottom:14px;border:1px solid var(--mvp-line);
  border-radius:var(--mvp-radius);background:var(--mvp-card)}
.gv-ordercard.is-awaiting{border-color:rgba(255,209,102,.35)}
.gv-ordercard__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px}
.gv-ordercard__title{font-weight:900;font-size:1.05rem;margin-bottom:4px}
.gv-issue__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gv-ordercard__foot{margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:flex-end}

/* destructive action: muted until hovered, so it is never the obvious click */
.gv-danger{border:1px solid rgba(255,107,137,.35);border-radius:999px;
  padding:8px 16px;background:transparent;color:var(--mvp-danger);
  font-size:.84rem;font-weight:800;cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.gv-danger:hover{background:rgba(255,107,137,.14);border-color:var(--mvp-danger)}

.gv-ok{border-color:rgba(24,226,255,.4);background:rgba(24,226,255,.07)}

/* admin: table */
.gv-num{text-align:right;white-space:nowrap}
.gv-rowactions{display:flex;align-items:center;gap:8px;justify-content:flex-end;
  white-space:nowrap}
.gv-tablewrap{overflow-x:auto;border:1px solid var(--mvp-line);border-radius:20px;
  background:var(--mvp-card)}
.gv-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
.gv-table th{text-align:left;padding:10px 12px;color:var(--mvp-muted);font-weight:800;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--mvp-line);white-space:nowrap}
.gv-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.gv-table tr:last-child td{border-bottom:0}
.gv-table tbody tr:hover{background:rgba(255,255,255,.03)}
.gv-table code{font-size:.86rem;color:var(--mvp-soft)}

.gv-issue{display:grid;gap:12px}
.gv-textarea{width:100%;resize:vertical;border:1px solid var(--mvp-line);border-radius:16px;
  padding:14px 16px;background:rgba(255,255,255,.04);color:var(--mvp-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;
  line-height:1.5}
.gv-textarea:focus{outline:0;border-color:rgba(24,226,255,.55)}
.gv-file{color:var(--mvp-muted);font-size:.9rem}
.gv-file::file-selector-button{margin-right:12px;border:1px solid var(--mvp-line);
  border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.06);
  color:var(--mvp-text);font-weight:800;cursor:pointer}
.gv-file::file-selector-button:hover{border-color:rgba(24,226,255,.5)}

.gv-config{margin:0;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.35);
  border:1px solid var(--mvp-line);color:var(--mvp-soft);overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;
  line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:320px}

@media (max-width:900px){.gv-grid--3{grid-template-columns:repeat(2,1fr)}}
.gv-burger{display:none}
/* Разделы сайта видны и на широком экране: ради них шапка кабинета и
   сравнялась с шапкой сайта. Раньше блок показывался только в меню
   телефона, а на десктопе кабинет жил со своим набором ссылок. */
.gv-nav__sections{display:flex;align-items:center;gap:2px}
/* приглашения нужны редко — в ряду им места нет, они остаются в меню
   телефона и ссылкой в самом кабинете */
.gv-nav a.gv-nav__ref{display:none}

/* Ниже 880px шапка кабинета раньше оставалась вообще без навигации: меню
   пряталось, а бургера тут не было. С телефона это значило, что из кабинета
   не уйти никуда, кроме как по логотипу. Теперь то же меню открывается
   бургером и внутри показывает разделы сайта. */
@media (max-width:1180px){
  .gv-burger{display:flex}
  .gv-nav{position:fixed;left:14px;right:14px;top:80px;display:none;
    max-height:calc(100vh - 104px);overflow:auto;padding:12px;
    flex-direction:column;align-items:stretch;gap:2px;
    border:1px solid var(--mvp-line);border-radius:24px;background:#0b1630;
    box-shadow:var(--mvp-shadow);z-index:1001}
  .mvp-header.is-open .gv-nav{display:flex}
  .gv-nav a{border-radius:14px;padding:12px 14px;font-size:1rem}
  .gv-nav__sections{display:flex;flex-direction:column;gap:2px;
    align-items:stretch}
  .gv-nav a.gv-nav__ref{display:block}
  /* черта отделяет разделы сайта от пунктов кабинета — у гостя пунктов
     кабинета нет, и черта висела бы сама по себе */
  .gv-nav__sections.is-split{margin-top:8px;padding-top:10px;
    border-top:1px solid var(--mvp-line)}
  /* «На сайт» уводит на главную — в мобильном меню это повторяет
     первый пункт списка разделов, поэтому прячем */
  .gv-nav a.gv-nav__site{display:none}
}
/* в один столбец карточки и так занимают почти весь экран — опускать их
   ещё ниже значит заставить листать на пустом месте */
@media (max-width:700px){.gv-pick{grid-template-columns:1fr;margin-top:22px}}
@media (max-width:640px){.gv-grid--3,.gv-grid--2{grid-template-columns:1fr}
  .gv-head h1{font-size:1.7rem}.gv-login__card{padding:30px 20px 24px}}

/* Кнопки в шапке страницы на телефоне. Тема сайта растягивает каждую на 100%
   её контейнера, а контейнер в шапке кабинета брал ширину по содержимому —
   выходили огромные кнопки на две трети экрана, прижатые влево. Теперь во
   всю ширину, по две в ряд; при нечётном числе первая (например «Админка»)
   занимает строку целиком. */
@media (max-width:680px){
  .gv-head>.mvp-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;
    gap:10px;margin-top:0}
  .gv-head>.mvp-actions .mvp-btn{width:auto;min-width:0;min-height:44px;
    padding:10px 12px;font-size:.92rem;line-height:1.15;white-space:normal;
    text-align:center}
  .gv-head>.mvp-actions .mvp-btn:first-child:nth-last-child(odd){grid-column:1/-1}
}

/* ---------------------------------------------------------------- balance */
/* NB: not .gv-field — that class is the read-only display box further up */
.gv-balance{position:relative;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;overflow:hidden;
  background:
    radial-gradient(130% 180% at 0% 0%,rgba(24,226,255,.15),transparent 58%),
    radial-gradient(130% 180% at 100% 100%,rgba(139,124,255,.15),transparent 58%),
    var(--mvp-card);
  border:1px solid var(--mvp-line);border-radius:var(--mvp-radius);
  padding:18px 24px;margin-bottom:20px}
/* accent rail: gives the card an anchor on the left instead of a bare edge */
.gv-balance::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--mvp-cyan),var(--mvp-violet))}

.gv-balance__icon{flex:0 0 auto;width:46px;height:46px;border-radius:15px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(24,226,255,.18),rgba(139,124,255,.18));
  border:1px solid var(--mvp-line)}
.gv-balance__icon svg{width:23px;height:23px;stroke:var(--mvp-cyan)}

.gv-balance__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.gv-balance__label{color:var(--mvp-muted);font-size:.74rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase}
.gv-balance__sum{font-size:2rem;font-weight:900;line-height:1.15;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-balance__hint{color:var(--mvp-muted);font-size:.86rem;margin-top:3px}
.gv-balance__cta{margin-left:auto}

.gv-balance--hero{padding:26px 30px}
.gv-balance--hero .gv-balance__icon{width:56px;height:56px;border-radius:18px}
.gv-balance--hero .gv-balance__icon svg{width:28px;height:28px}
.gv-balance--hero .gv-balance__sum{font-size:2.8rem}

.gv-topup{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.gv-formfield{display:flex;flex-direction:column;gap:7px;flex:1 1 190px;min-width:0}
.gv-formfield>span{color:var(--mvp-muted);font-size:.82rem;font-weight:760}
.gv-formfield input,.gv-formfield select{
  border:1px solid var(--mvp-line);border-radius:14px;padding:12px 14px;
  background:rgba(255,255,255,.05);color:var(--mvp-text);font:inherit;font-weight:760;
  width:100%}
.gv-formfield input:focus,.gv-formfield select:focus{
  outline:none;border-color:var(--mvp-cyan);box-shadow:0 0 0 3px rgba(24,226,255,.15)}
/* the dropdown sheet is drawn by the OS, not by the page: colour-scheme is what
   actually turns it dark, the option rules alone are ignored on Windows */
.gv-formfield input,.gv-formfield select{color-scheme:dark}
.gv-formfield select option{background:#101826;color:var(--mvp-text)}

.gv-alert{border:1px solid rgba(255,107,107,.45);background:rgba(255,107,107,.1);
  color:var(--mvp-danger);border-radius:16px;padding:13px 18px;margin-bottom:18px;
  font-weight:760}
/* предупреждение с кнопкой: на узком экране кнопка съезжает под текст,
   а не сжимает его в столбик из двух букв */
.gv-alert--act{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.gv-alert--act .mvp-btn{flex:0 0 auto}

.gv-h2{margin:32px 0 14px;font-size:1.25rem}

.gv-ledger{display:grid;gap:8px}
.gv-tx{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--mvp-card);border:1px solid var(--mvp-line);
  border-radius:var(--mvp-radius-sm);padding:14px 18px}
.gv-tx__main{flex:1 1 200px;min-width:0}
.gv-tx__kind{font-weight:850}
.gv-tx__sum{font-weight:900;font-size:1.05rem;white-space:nowrap}
.gv-tx__sum.is-plus{color:var(--mvp-green)}
.gv-tx__sum.is-minus{color:var(--mvp-muted)}
.gv-tx__after{color:var(--mvp-muted);font-size:.88rem;white-space:nowrap;
  min-width:74px;text-align:right}

/* balance shown in the header nav */
.gv-nav__balance{font-variant-numeric:tabular-nums}
.gv-nav a.gv-nav__balance{color:var(--mvp-cyan)}
.gv-nav a.gv-nav__balance:hover{background:rgba(24,226,255,.12)}

@media (max-width:560px){
  .gv-topup{flex-direction:column;align-items:stretch}
  .gv-topup .mvp-btn{width:100%}
  .gv-tx__after{min-width:0}
  .gv-balance{padding:16px 18px;gap:14px}
  .gv-balance__cta{margin-left:0;width:100%;text-align:center}
  .gv-balance--hero .gv-balance__sum{font-size:2.2rem}
}
.gv-method--balance{border-color:rgba(24,226,255,.4);background:rgba(24,226,255,.07)}

/* ------------------------------------------------------------------ modal */
/* native <dialog>: showModal() brings focus trapping, Esc and inertness for
   free, so none of that is reimplemented in script */
.gv-modal{
  width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid var(--mvp-line);
  border-radius:var(--mvp-radius);color:var(--mvp-text);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(24,226,255,.1),transparent 55%),
    radial-gradient(120% 90% at 100% 100%,rgba(139,124,255,.12),transparent 55%),
    var(--mvp-card-strong,var(--mvp-card));
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gv-modal::backdrop{background:rgba(4,9,18,.72);backdrop-filter:blur(3px)}
.gv-modal[open]{animation:gv-modal-in .16s ease-out}
@keyframes gv-modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.gv-modal[open]{animation:none}}

.gv-modal__x{display:flex;justify-content:flex-end;margin:-10px -10px 0 0}
.gv-modal__close{background:none;border:0;color:var(--mvp-muted);cursor:pointer;
  font-size:1.7rem;line-height:1;padding:2px 8px;border-radius:10px}
.gv-modal__close:hover{color:var(--mvp-text);background:rgba(255,255,255,.07)}
.gv-modal__title{margin:0 0 6px;font-size:1.4rem}
.gv-modal__lead{color:var(--mvp-muted);margin:0 0 18px;font-size:.92rem}

/* inside the dialog the two fields stack: there is no room for a row.
   The basis in `flex:1 1 190px` applies to the main axis, so once that axis is
   vertical it stretches every field to 190px tall — hence the reset. */
.gv-modal .gv-topup{flex-direction:column;align-items:stretch;gap:14px}
.gv-modal .gv-formfield{flex:0 0 auto}
.gv-modal .gv-topup .mvp-btn{width:100%;margin-top:4px}
.gv-modal .gv-alert{margin-bottom:16px}

/* -------------------------------------------------------------- admin log */
.gv-log__when{white-space:nowrap;color:var(--mvp-muted);font-variant-numeric:tabular-nums}
.gv-log__details{color:var(--mvp-muted);max-width:340px}
/* one tint per action so a column of entries can be skimmed by colour */
.gv-chip--config_issued{border-color:rgba(24,226,255,.4);color:var(--mvp-cyan)}
.gv-chip--config_revoked,.gv-chip--order_deleted{
  border-color:rgba(255,107,137,.4);color:var(--mvp-danger)}
.gv-chip--balance_adjusted{border-color:rgba(139,124,255,.45);color:var(--mvp-violet)}
.gv-chip--subscription_extended{border-color:rgba(46,213,150,.4);color:var(--mvp-green)}

/* ------------------------------------------------------- уведомления */
.gv-nav__bell{position:relative;font-size:1.05rem;line-height:1}
.gv-nav__count{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;
  padding:0 4px;border-radius:999px;background:var(--mvp-danger);color:#fff;
  font-size:.66rem;font-weight:900;display:grid;place-items:center;line-height:1}

.gv-notes{display:grid;gap:10px}
.gv-note-card{background:var(--mvp-card);border:1px solid var(--mvp-line);
  border-radius:var(--mvp-radius-sm);padding:16px 20px}
/* непрочитанное отмечаем полосой слева, а не цветом фона: так список
   остаётся спокойным, но новое видно сразу */
.gv-note-card.is-new{border-left:3px solid var(--mvp-cyan)}
.gv-note-card__when{color:var(--mvp-muted);font-size:.82rem;margin-bottom:6px}
.gv-note-card__text{line-height:1.6;white-space:pre-wrap;word-break:break-word}
.gv-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  color:var(--mvp-text);font-weight:760}
.gv-check input{width:17px;height:17px;accent-color:var(--mvp-cyan);cursor:pointer}
.gv-orderform{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;align-items:end}
.gv-orderform__wide{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;
  align-items:center}

/* --------------------------------------------- оформление текста рассылки */
.gv-richbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.gv-richbtn{border:1px solid var(--mvp-line);background:rgba(255,255,255,.05);
  color:var(--mvp-text);border-radius:12px;padding:7px 12px;cursor:pointer;
  font:inherit;font-size:.86rem;line-height:1}
.gv-richbtn:hover{border-color:rgba(24,226,255,.5);background:rgba(24,226,255,.08)}

/* картинка в уведомлении: не шире карточки и не выше половины экрана,
   иначе одна гифка вытесняет весь остальной список */
.gv-note-card__media{display:block;max-width:100%;max-height:50vh;
  border-radius:14px;margin:4px 0 12px;background:rgba(255,255,255,.04)}

/* ступени оптовой скидки над карточками тарифов */
.gv-tiers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}

/* экономия рядом с суммой в счётчике количества */
.gv-count-box__save{margin-top:3px;font-size:.78rem;font-weight:850;
  color:var(--mvp-green);white-space:nowrap}
.gv-count-box__save:empty{display:none}
/* при скидке зачёркиваем не итог, а показываем экономию отдельной строкой —
   так видно и сколько платить, и сколько сберегли */
.gv-count-box.has-save .gv-count-box__calc{text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.35)}

/* промокод стоит вплотную к способу оплаты: раньше между ними зияла дыра
   из-за двойного отступа — своего у поля и внешнего у блока оплаты */
.gv-promofield{margin-top:10px;margin-bottom:2px}

/* полоса оптовых скидок над карточками */
.gv-tiers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 18px;padding:10px 14px;border-radius:16px;
  border:1px solid rgba(46,213,150,.35);background:rgba(46,213,150,.08)}
.gv-tiers__label{font-weight:900;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mvp-green)}
.gv-tiers__item{font-weight:760;font-size:.92rem;color:var(--mvp-text);
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06)}

/* экономия в шапке заказа */
.gv-saved{display:inline-flex;align-items:baseline;gap:8px;margin-left:8px;
  padding:3px 10px;border-radius:999px;font-weight:850;font-size:.86rem;
  color:var(--mvp-green);background:rgba(46,213,150,.12)}
.gv-saved__was{color:var(--mvp-muted);font-weight:700;text-decoration:line-through}
/* промокод введён — старая цена зачёркнута рядом с новой, ещё до оплаты
   (app/static/promo-preview.js) */
.gv-promo-was{color:var(--mvp-muted);font-weight:700;font-size:.62em;
  text-decoration:line-through;text-decoration-thickness:2px;margin-right:.35em;
  vertical-align:middle}
/* --mvp-green в этой теме фиолетовый; скидке нужен настоящий зелёный */
.gv-promo-now{color:#2ed596}
.gv-promonote{margin:6px 2px 4px;font-size:.86rem;font-weight:750;line-height:1.35}
.gv-promonote.is-ok{color:#2ed596}
.gv-promonote.is-bad{color:#ff8a8a}
.gv-cancelpay{margin-top:14px}

/* фото поверх инициалов: если Telegram фото не отдал, картинка убирает себя
   сама и снизу остаются те же буквы, что были раньше */
.gv-avatar{position:relative;overflow:hidden}
.gv-avatar__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;background:var(--mvp-card)}

/* ссылка внутри строки текста: подчёркнутая, а не в виде кнопки —
   .gv-copy для этого не годится, он рисует чип и рвёт предложение */
.gv-textlink{color:var(--mvp-cyan);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.gv-textlink:hover{text-decoration-thickness:2px}

/* Карточка тарифа — колонка flex, а у .gv-formfield стоит flex:1 1 190px.
   В колонке это 190 пикселей ВЫСОТЫ плюс разрешение растягиваться, поэтому
   поле промокода раздувалось до 190px и под ним зияла пустота до способов
   оплаты. Здесь поле должно быть ровно по своему содержимому. */
.gv-plan-card>.gv-formfield{flex:0 0 auto}
/* кнопка оплаты остаётся прижатой к низу — карточки в ряду одной высоты */
.gv-plan-card>.mvp-btn{margin-top:auto}

/* Промокод — единственное необязательное поле на карточке, поэтому оно
   подсвечено по контуру. Рамка рисуется двумя слоями фона: внутренний идёт
   по padding-box, градиент — по border-box, и виден только в полосе рамки.
   Внутренний слой обязан быть непрозрачным, иначе градиент просвечивает
   насквозь и заливает поле целиком. Цвет — то, во что складывается
   полупрозрачный фон поля поверх карточки. */
.gv-promofield input{
  border-color:transparent;
  background:
    linear-gradient(rgb(37,45,58),rgb(37,45,58)) padding-box,
    linear-gradient(115deg,rgba(24,226,255,.75),rgba(155,92,255,.6) 45%,
                    rgba(24,226,255,.75)) border-box;
  background-size:100% 100%,220% 100%;
  box-shadow:0 6px 22px -14px rgba(24,226,255,.85);
  transition:box-shadow .25s ease}
.gv-promofield input::placeholder{color:rgba(215,227,249,.32);letter-spacing:.09em}
.gv-promofield input:hover{box-shadow:0 8px 26px -12px rgba(24,226,255,1)}
.gv-promofield input:focus{
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(24,226,255,.16),0 10px 30px -12px rgba(24,226,255,1);
  /* блик пробегает по рамке только при вводе — фоном это бы отвлекало */
  animation:gvPromoSheen 2.8s linear infinite}
@keyframes gvPromoSheen{
  from{background-position:0 0,0 0}
  to{background-position:0 0,220% 0}}
@media (prefers-reduced-motion:reduce){.gv-promofield input:focus{animation:none}}

/* бургер кабинета берёт вид у сайта, но живёт в своей шапке */
.gv-burger{margin-left:12px;flex:0 0 auto}
@media (max-width:1180px){.mvp-header .gv-burger{margin-left:0}}
/* Шапка темы выровнена влево, а вправо остальное отодвигает меню
   (margin-left:auto у .gv-nav). Когда меню свёрнуто в бургер, оно выпадает
   из ряда, и языки с бургером липли к логотипу, оставляя справа пустоту.
   Отодвигаем их сами — на тех же порогах, на которых меню сворачивается. */
@media (max-width:1180px){.mvp-header .mvp-header__inner>.mvp-lang{margin-left:auto}}
@media (max-width:1400px){.mvp-header.is-signed .mvp-header__inner>.mvp-lang{margin-left:auto}}
@media (max-width:560px){.gv-nav{top:74px}}

/* перенос заказа спрятан под раскрывашку: действие редкое, а место в карточке
   заказа дорогое — рядом выдача конфига и статус, ими пользуются постоянно */
.gv-transfer{margin:4px 0 14px}
.gv-transfer>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--mvp-line);border-radius:999px;padding:8px 14px;
  color:#d7e3f9;font-weight:760;font-size:.9rem;list-style:none}
.gv-transfer>summary::-webkit-details-marker{display:none}
.gv-transfer>summary::before{content:"⇄";font-size:1rem;opacity:.85}
.gv-transfer>summary:hover{border-color:rgba(24,226,255,.5)}
.gv-transfer[open]>summary{border-color:rgba(24,226,255,.5);margin-bottom:12px}
.gv-transfer__form{display:grid;gap:12px;max-width:460px;
  border:1px solid var(--mvp-line);border-radius:18px;padding:16px;
  background:rgba(255,255,255,.03)}
.gv-transfer__form .gv-formfield{flex:0 0 auto}

/* Доступы к серверу: пары «поле — значение» в одну колонку. Значения
   моноширинные, их переписывают руками в SSH-клиент или в окно RDP. */
.gv-conn{display:grid;gap:2px;border:1px solid var(--mvp-line);border-radius:16px;
  padding:6px 16px;background:rgba(255,255,255,.03)}
.gv-conn__row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 0;flex-wrap:wrap}
.gv-conn__row + .gv-conn__row{border-top:1px solid var(--mvp-line)}
.gv-conn__row > span{color:var(--mvp-muted);font-size:.86rem;font-weight:760}
.gv-conn__row > b{display:inline-flex;align-items:center;gap:10px;
  font-variant-numeric:tabular-nums}
.gv-conn code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95rem;letter-spacing:.02em}
/* пароль показывается только по кнопке, чтобы не светиться в скриншотах */
.gv-secret{min-width:9ch;display:inline-block}

/* колокольчик мельче остальных пунктов, из-за этого сидел выше строки.
   Высоту не задаём числом — она уедет вместе с отступами соседей */
.gv-nav a.gv-nav__bell{display:inline-flex;align-items:center;
  align-self:stretch;padding-block:0}

/* Окно заказа сервера: слева настройка, справа сводка, которая едет за
   прокруткой. На узком экране колонки просто встают друг под друга. */
.gv-deploy{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:20px;align-items:start}
.gv-deploy__config{display:grid;gap:16px}
.gv-deploy__config .gv-formfield{flex:0 0 auto}
.gv-deploy__title{margin:0 0 4px;font-size:1.15rem}
.gv-deploy__summary{position:sticky;top:96px;display:grid;gap:14px}
.gv-deploy__go{width:100%;justify-content:center}

.gv-sum{display:grid;gap:2px;border:1px solid var(--mvp-line);border-radius:16px;
  padding:4px 14px;background:rgba(255,255,255,.03)}
.gv-sum__row{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0}
/* display:flex сильнее стандартного [hidden] — без этого скрытая строка
   про надбавку показывалась всегда */
.gv-sum__row[hidden]{display:none}
.gv-sum__row + .gv-sum__row{border-top:1px solid var(--mvp-line)}
.gv-sum__row > span{color:var(--mvp-muted);font-size:.86rem;font-weight:760}
.gv-sum__row > b{text-align:right;font-size:.94rem}
.gv-sum__total{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(24,226,255,.14),rgba(155,92,255,.14));
  border:1px solid rgba(24,226,255,.35)}
.gv-sum__total > span{color:var(--mvp-soft);font-weight:800}
.gv-sum__total > b{font-size:1.5rem;color:var(--mvp-cyan);
  font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .gv-deploy{grid-template-columns:1fr}
  /* прилипшая сводка на телефоне только мешает — она уезжает вниз */
  .gv-deploy__summary{position:static}
}

/* Карточка арендованного сервера: заголовок, доступы, подсказка и кнопки
   группами. Раньше всё шло сплошняком, и кнопок стало столько, что было
   непонятно, какие из них что-то стоят. */
.gv-srv__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gv-srv__title h2{margin:0;font-size:1.25rem}
.gv-srv__title .gv-note{margin:4px 0 0}
.gv-srv__left{display:inline-block;margin-left:8px;border-radius:999px;
  padding:.16rem .55rem;background:rgba(24,226,255,.12);color:var(--mvp-cyan);
  font-size:.8rem;font-weight:760}
.gv-srv__left.is-soon{background:rgba(255,107,107,.14);color:var(--mvp-danger)}

.gv-srv__how{margin:14px 0 4px;border-left:3px solid var(--mvp-cyan);
  border-radius:0 14px 14px 0;padding:12px 16px;background:rgba(24,226,255,.06)}
.gv-srv__how b{display:block;margin-bottom:4px;font-size:.9rem}
.gv-srv__how p{margin:0;color:var(--mvp-soft);font-size:.92rem}
.gv-srv__how code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.gv-srv__group{margin-top:16px}
.gv-srv__label{display:block;margin-bottom:7px;color:var(--mvp-muted);
  font-size:.8rem;font-weight:760;text-transform:uppercase;letter-spacing:.06em}

/* ---------------------------------------------- витрина: выбор плитками
   Выпадающие списки прятали разницу между тарифами: чтобы сравнить, надо
   было открывать их по очереди. Плитки и строки показывают всё сразу. */
.gv-step{display:grid;gap:9px}
.gv-step__label{color:var(--mvp-muted);font-size:.8rem;font-weight:760;
  text-transform:uppercase;letter-spacing:.06em}

.gv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:10px}
.gv-tile input{position:absolute;opacity:0;pointer-events:none}
.gv-tile__box{display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:4px 10px;height:100%;
  border:1px solid var(--mvp-line);border-radius:16px;padding:12px 14px;
  background:rgba(255,255,255,.04);cursor:pointer;transition:.18s ease}
.gv-tile__box:hover{border-color:rgba(24,226,255,.45)}
.gv-tile input:checked + .gv-tile__box{border-color:var(--mvp-cyan);
  background:rgba(24,226,255,.1)}
.gv-tile input:focus-visible + .gv-tile__box{outline:2px solid var(--mvp-cyan);
  outline-offset:2px}
.gv-tile__name{font-weight:800;font-size:.95rem}
.gv-tile__note{grid-column:1 / -1;color:var(--mvp-muted);font-size:.8rem}
.gv-tiles > .gv-tile{display:grid}

/* Двухбуквенный код страны. Флаг-эмодзи здесь не годится: Windows рисует
   его парой букв в рамках, и получилось бы неопрятно вперемешку. */
.gv-cc{display:inline-grid;place-items:center;min-width:34px;height:24px;
  padding:0 7px;border-radius:8px;background:rgba(255,255,255,.1);
  color:#fff;font-size:.78rem;font-weight:900;letter-spacing:.06em;
  font-style:normal}

.gv-plans{display:grid;gap:8px}
.gv-planrow input{position:absolute;opacity:0;pointer-events:none}
.gv-planrow__box{display:grid;
  grid-template-columns:minmax(96px,.9fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,.7fr) auto;
  align-items:center;gap:12px;border:1px solid var(--mvp-line);
  border-radius:16px;padding:12px 16px;background:rgba(255,255,255,.04);
  cursor:pointer;transition:.18s ease}
.gv-planrow__box:hover{border-color:rgba(24,226,255,.45)}
.gv-planrow input:checked + .gv-planrow__box{border-color:var(--mvp-cyan);
  background:rgba(24,226,255,.1)}
.gv-planrow__name{display:grid}
.gv-planrow__name b{font-size:1rem}
.gv-planrow__name em{color:var(--mvp-muted);font-size:.76rem;font-style:normal;
  text-transform:uppercase;letter-spacing:.05em}
.gv-planrow__spec{color:var(--mvp-soft);font-size:.86rem}
.gv-planrow__price{color:var(--mvp-cyan);font-weight:900;white-space:nowrap;
  text-align:right;font-variant-numeric:tabular-nums}
.gv-planrow__price em{display:block;color:var(--mvp-muted);font-size:.72rem;
  font-style:normal;font-weight:700}

.gv-chips{display:flex;flex-wrap:wrap;gap:8px}
.gv-chipbox input{position:absolute;opacity:0;pointer-events:none}
.gv-chipbox > span{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--mvp-line);border-radius:999px;padding:9px 15px;
  background:rgba(255,255,255,.04);cursor:pointer;font-weight:760;
  font-size:.9rem;transition:.18s ease}
.gv-chipbox > span:hover{border-color:rgba(24,226,255,.45)}
.gv-chipbox input:checked + span{border-color:var(--mvp-cyan);
  background:rgba(24,226,255,.12);color:#fff}
.gv-dot{width:10px;height:10px;border-radius:50%;display:inline-block;
  flex:0 0 auto}

@media (max-width:760px){
  .gv-planrow__box{grid-template-columns:1fr auto;row-gap:4px}
  .gv-planrow__spec{grid-column:1 / -1}
  .gv-planrow__price{grid-row:1;grid-column:2}
}

/* ссылка-плитка на витрине сайта ведёт себя как выбранная */
a.gv-tile__box{text-decoration:none;color:inherit}
a.gv-tile__box.is-on{border-color:var(--mvp-cyan);background:rgba(24,226,255,.1)}
.gv-oschip{display:inline-flex;align-items:center;gap:7px;margin:0 10px 8px 0;
  color:var(--mvp-soft);font-size:.9rem;font-weight:700;white-space:nowrap}

/* ------------------------------------------- шапка кабинета в лад с сайтом
   Полоса шире, чем текст страниц: пунктов много, и в 1180 им было тесно. */
.mvp-header .mvp-header__inner{width:min(100% - 40px,1420px);height:82px}
.gv-nav{gap:4px}
.gv-nav a{padding:10px 13px}
/* «Мои серверы» — тот же отдельный продукт, что GRANDO Remote на сайте */
.gv-nav a.gv-nav__remote:before{content:"";width:7px;height:7px;
  margin-right:8px;border-radius:50%;display:inline-block;vertical-align:middle;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-violet));
  box-shadow:0 0 10px rgba(24,226,255,.7)}
.gv-nav a.gv-nav__remote{color:#fff}
.gv-nav a.gv-nav__remote:hover{background:rgba(124,92,255,.16)}

@media (max-width:1180px){
  .mvp-header .mvp-header__inner{width:min(100% - 36px,var(--mvp-container))}
}

/* ------------------------------------------- витрина: отбор и порядок
   Ряд стоит между плитками стран и таблицей: сначала «где», потом «какой»,
   потом сама выдача. Отдельными фишками выбранное тонуло среди соседних,
   поэтому каждая группа теперь цельный переключатель: рамка охватывает все
   варианты сразу, а выбранный лежит внутри подсвеченной таблеткой — тем же
   градиентом, что и кнопки сайта, так что взгляд цепляется за него первым. */
.gv-filters{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;
  justify-content:space-between;margin:0 0 14px}
.gv-seg{display:inline-flex;align-items:center;gap:4px;padding:5px;
  border:1px solid var(--mvp-line);border-radius:999px;
  background:rgba(255,255,255,.045)}
.gv-seg__label{padding:0 6px 0 12px;color:var(--mvp-muted);font-size:.76rem;
  font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.gv-seg__item{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;
  border-radius:999px;text-decoration:none;color:var(--mvp-muted);
  font-size:.93rem;font-weight:850;white-space:nowrap;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease}
.gv-seg__item:hover{color:#fff;background:rgba(255,255,255,.07)}
.gv-seg__item.is-on{color:var(--mvp-bg);
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  box-shadow:0 6px 24px rgba(24,226,255,.3)}
/* счётчик: сколько тарифов попадает в группу */
.gv-seg__item b{font-size:.78rem;font-weight:850;padding:2px 8px;
  border-radius:999px;background:rgba(255,255,255,.1);color:inherit}
.gv-seg__item.is-on b{background:rgba(7,16,31,.22)}
.gv-seg__item i{font-style:normal;font-size:1.02rem;line-height:1}

/* Точка в пояснении повторяет смысл группы: у общих она полая — машина
   делится, у выделенных сплошная — она ваша целиком. */
.gv-legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 20px;
  color:var(--mvp-muted);font-size:.9rem}
.gv-legend > span{display:inline-flex;align-items:flex-start;gap:9px;
  max-width:48ch;line-height:1.45}
.gv-legend b{color:var(--mvp-text);font-weight:850}
.gv-legend__dot{width:10px;height:10px;margin-top:5px;border-radius:50%;
  flex:0 0 auto;box-shadow:inset 0 0 0 2px rgba(24,226,255,.75)}
.gv-legend__dot.is-solid{
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  box-shadow:0 0 12px rgba(124,92,255,.55)}
/* «Выделенные» звучит как «лучше во всём», и цена дешевле общего тарифа
   читается как опечатка. Строкой ниже объясняем, за что на самом деле платят */
.gv-legend > .gv-legend__note{flex:1 0 100%;max-width:78ch;font-size:.86rem;
  opacity:.82}

.gv-sortmark{font-style:normal;color:var(--mvp-cyan)}
/* Девять столбцов в ширину телефона не влезают. Базовые 720px их только
   сжимают, и «VPS-150» ломается пополам, поэтому здесь запрещаем переносы:
   таблица берёт свою настоящую ширину и прокручивается внутри рамки. */
[data-loc-panel] .gv-table th,[data-loc-panel] .gv-table td{white-space:nowrap}
/* display у плиток и строк таблицы задан явно, поэтому одного [hidden] мало */
.gv-tiles > [hidden],.gv-table tr[hidden]{display:none}

@media (max-width:720px){
  /* в узкой полосе таблетки в один ряд не помещаются — пусть переносятся,
     не теряя общую рамку переключателя */
  .gv-filters{gap:12px}
  .gv-seg{flex-wrap:wrap;border-radius:24px}
  .gv-seg__item{padding:9px 13px;font-size:.87rem}
  .gv-seg__label{padding-left:8px}
}

/* --------------------------------------- витрина: полоса доверия и аптайм
   Про отсутствие KYC человек должен узнать до того, как дойдёт до цен, —
   ради этого сюда и приходят. Первая карточка крупнее остальных: она несёт
   главное обещание, остальные три его подпирают. */
.mvp-section--flat{padding-top:0}
/* два главных обещания идут первой строкой в половину ширины каждое,
   три подпорки — второй; сетка из шести колонок держит обе строки ровно */
.gv-trust{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
.gv-trust__item{grid-column:span 2}
.gv-trust__item--hero{grid-column:span 3}
.gv-trust__item{padding:20px;border-radius:22px;border:1px solid var(--mvp-line);
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.04))}
.gv-trust__item b{display:block;margin-bottom:8px;color:#fff;font-weight:950;
  letter-spacing:-.03em;font-size:1.5rem;line-height:1}
.gv-trust__item span{color:var(--mvp-muted);font-size:.92rem;line-height:1.5}
.gv-trust__item--hero{border-color:rgba(24,226,255,.45);
  background:linear-gradient(145deg,rgba(24,226,255,.16),rgba(124,92,255,.1));
  box-shadow:0 18px 50px rgba(24,226,255,.12)}
.gv-trust__item--hero b{font-size:2.1rem;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-trust__item--hero span{color:#d8e7ff}

/* цифра аптайма в строке показателей — единственная цветная из четырёх */
.mvp-stats--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:860px}
.mvp-stat--accent{border-color:rgba(24,226,255,.4);
  background:rgba(24,226,255,.09)}
.mvp-stat--accent strong{color:var(--mvp-cyan)}

.gv-safe__head{margin-bottom:26px}
.gv-safe__head h2{margin-bottom:12px}

@media (max-width:1020px){
  .gv-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-trust__item,.gv-trust__item--hero{grid-column:span 1}
  .mvp-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .gv-trust{grid-template-columns:1fr}
}

/* закончившийся тариф остаётся в таблице, но гаснет: видно, что он бывает,
   и сразу понятно, что взять его сейчас нельзя */
[data-loc-panel] .gv-table tr.is-out{opacity:.45}
[data-loc-panel] .gv-table tr.is-out:hover{opacity:.7;
  background:rgba(255,255,255,.03)}
[data-loc-panel] .gv-table tr.is-out b{color:var(--mvp-muted) !important}
.gv-outmark{display:inline-block;padding:7px 13px;border-radius:999px;
  border:1px dashed var(--mvp-line);color:var(--mvp-muted);
  font-size:.82rem;font-weight:800;white-space:nowrap}

/* год: скидка есть, кнопки нет — сделку подтверждает человек */
/* мятный тут читается лучше фиолетового: в переменной --mvp-green лежит
   как раз фиолетовый, а скидку хочется видеть сразу */
.gv-saveflag{display:inline-block;margin-left:6px;padding:2px 8px;
  border-radius:999px;background:rgba(52,245,165,.16);color:#34f5a5;
  font-size:.72rem;font-weight:900;letter-spacing:0}
.gv-yearprice{color:#34f5a5}
.gv-yearbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:12px;padding:14px 16px;border-radius:18px;
  border:1px dashed rgba(52,245,165,.4);background:rgba(52,245,165,.06)}
.gv-yearbox b{color:#34f5a5;font-weight:900;white-space:nowrap}
.gv-yearbox span{color:var(--mvp-muted);font-size:.9rem;flex:1 1 240px}

/* маржа, посчитанная на лету и ещё не сохранённая: пунктир снизу говорит,
   что это прикидка, а не то, что сейчас в базе */
.gv-table [data-margin-cell].is-preview{border-bottom:1px dashed currentColor;
  padding-bottom:1px}
.gv-preview{margin:0;color:var(--mvp-warning)}
.gv-preview b{color:inherit}

/* Третья карточка на выборе заказа: аренда машин. Сетка из двух колонок
   для трёх карточек не годится — одна повисала бы внизу одна. */
.gv-pick--three{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
/* аренда — новый продукт, ему нужен акцент, но не крик */
.gv-pick__card--remote{border-color:rgba(124,92,255,.45);
  background:linear-gradient(150deg,rgba(124,92,255,.12),rgba(255,255,255,.045))}
.gv-pick__card--remote:hover{border-color:rgba(124,92,255,.85);
  box-shadow:0 0 44px rgba(124,92,255,.2)}
.gv-pick__card--remote .gv-pick__go{color:var(--mvp-violet)}

/* ------------------------------------------------ кабинет: срок подписки
   Имя не gv-subcard: так назывался блок карточек подписки, который однажды
   дублировал строки заказов, и smoke стережёт, чтобы он не вернулся.
   Раньше это была плоская строка «Подписка: 3 · Активна до … · 10 дней».
   Главное там — сколько осталось, а оно терялось в конце. */
.gv-subline{margin-bottom:22px;padding:16px 18px;border-radius:20px;
  border:1px solid var(--mvp-line);background:rgba(255,255,255,.045)}
.gv-subline.is-soon{border-color:rgba(255,209,102,.45);
  background:rgba(255,209,102,.07)}
.gv-subline__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gv-subline__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--mvp-cyan);box-shadow:0 0 10px rgba(24,226,255,.7)}
.gv-subline.is-soon .gv-subline__dot{background:var(--mvp-warning);
  box-shadow:0 0 10px rgba(255,209,102,.7)}
.gv-subline__until{color:var(--mvp-muted);font-size:.94rem}
.gv-subline__until b{color:var(--mvp-text)}
.gv-subline__left{margin-left:auto;padding:4px 12px;border-radius:999px;
  background:rgba(24,226,255,.12);color:var(--mvp-cyan);
  font-size:.82rem;font-weight:850;white-space:nowrap}
.gv-subline.is-soon .gv-subline__left{background:rgba(255,209,102,.14);
  color:var(--mvp-warning)}
.gv-subline__bar{height:4px;margin-top:12px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.gv-subline__bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mvp-cyan),var(--mvp-green))}
.gv-subline.is-soon .gv-subline__bar i{
  background:linear-gradient(90deg,var(--mvp-warning),#ff6b89)}

/* ------------------------------------------------------ баланс: выписка */
.gv-ledger__totals{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.gv-ledger__total{flex:1 1 150px;padding:12px 16px;border-radius:16px;
  border:1px solid var(--mvp-line);background:rgba(255,255,255,.04)}
.gv-ledger__total span{display:block;color:var(--mvp-muted);font-size:.78rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gv-ledger__total b{font-size:1.15rem;font-weight:950}
.gv-ledger__total.is-plus b{color:#34f5a5}
.gv-ledger__total.is-minus b{color:var(--mvp-muted)}
/* знак операции значком: он ловится глазом быстрее, чем цвет цифры */
.gv-tx__mark{width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-weight:950;font-size:1rem}
.gv-tx__mark.is-plus{background:rgba(52,245,165,.14);color:#34f5a5}
.gv-tx__mark.is-minus{background:rgba(255,255,255,.07);color:var(--mvp-muted)}
.gv-tx__after span{display:block;color:var(--mvp-muted);font-size:.7rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* --------------------------------------------- админка: сколько заработано
   Отдельным блоком от счётчиков «сколько чего»: там количества, здесь деньги,
   и в одном ряду их приходилось бы каждый раз перечитывать. */
.gv-money{margin-bottom:26px;padding:18px;border-radius:22px;
  border:1px solid var(--mvp-line);background:rgba(255,255,255,.04)}
.gv-money__row{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gv-money__item{padding:14px 16px;border-radius:16px;
  border:1px solid var(--mvp-line);background:rgba(255,255,255,.035)}
.gv-money__item span{display:block;color:var(--mvp-muted);font-size:.78rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.gv-money__item b{display:block;margin:4px 0 2px;font-size:1.35rem;
  font-weight:950;color:var(--mvp-cyan)}
.gv-money__item i{color:var(--mvp-muted);font-size:.8rem;font-style:normal}
.gv-money__item.is-cost b{color:var(--mvp-danger)}
.gv-money__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--mvp-line)}
.gv-money__net{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.gv-money__net span{color:var(--mvp-muted);font-size:.82rem;font-weight:850;
  letter-spacing:.06em;text-transform:uppercase}
.gv-money__net b{font-size:2rem;font-weight:950;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-money__bottom .gv-note{flex:1 1 300px;margin:0}

/* --------------------------------------------------- шапка админки
   Раньше на каждой странице был свой набор кнопок в своём порядке: с
   «Клиентов» нельзя было попасть в аренду, из «Заказов» — в серверы.
   Теперь один ряд везде, текущий раздел не ссылка. */
.gv-adminnav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;padding:6px;
  border:1px solid var(--mvp-line);border-radius:26px;
  background:rgba(255,255,255,.04)}
.gv-adminnav__item{display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:999px;text-decoration:none;
  color:var(--mvp-muted);font-size:.9rem;font-weight:800;white-space:nowrap;
  transition:color .18s ease,background .18s ease}
.gv-adminnav__item:hover{color:#fff;background:rgba(255,255,255,.07)}
.gv-adminnav__item.is-here{color:var(--mvp-bg);
  background:linear-gradient(135deg,var(--mvp-cyan),var(--mvp-green))}
/* очередь выдачи с непустым счётчиком — единственное, что требует действия */
.gv-adminnav__item.is-alert{color:var(--mvp-warning);
  background:rgba(255,209,102,.12)}
.gv-adminnav__item.is-alert:hover{background:rgba(255,209,102,.2)}
.gv-adminnav__item b{min-width:20px;padding:1px 7px;border-radius:999px;
  background:var(--mvp-warning);color:var(--mvp-bg);
  font-size:.74rem;font-weight:900;text-align:center}
.gv-adminnav__item--out{margin-left:auto;color:var(--mvp-soft)}
@media (max-width:760px){
  .gv-adminnav{border-radius:22px}
  .gv-adminnav__item{padding:8px 12px;font-size:.85rem}
  .gv-adminnav__item--out{margin-left:0}
}

/* характеристики машины в карточке: «что я купил» рядом с «куда подключаться» */
.gv-specs{margin-top:14px;padding:14px 16px;border-radius:18px;
  border:1px solid var(--mvp-line);background:rgba(255,255,255,.03)}
.gv-specs__title{margin-bottom:10px;color:var(--mvp-muted);font-size:.76rem;
  font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.gv-specs__grid{display:grid;gap:10px 18px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gv-specs__grid span{display:block;color:var(--mvp-muted);font-size:.78rem}
.gv-specs__grid b{font-size:.94rem;font-weight:800}

/* ------------------------------------------- кабинет: разделы своих покупок
   Те же карточки, что при выборе тарифа, но ростом вдвое ниже: здесь их
   видят на каждом заходе, и полноразмерные съедали бы весь первый экран
   вместе со списком заказов, ради которого человек и пришёл. */
.gv-pick--own{margin:26px 0 24px;gap:14px}
.gv-pick__card--own{min-height:0;padding:18px 20px;gap:6px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:14px}
.gv-pick__card--own .gv-pick__icon{height:auto;font-size:1.7rem;grid-row:span 2}
.gv-pick__card--own .gv-pick__title{min-height:0;font-size:.98rem;
  letter-spacing:.03em}
.gv-pick__card--own .gv-pick__go{margin:0;padding:0;font-size:.82rem;
  grid-column:2;color:var(--mvp-muted);font-weight:700}
.gv-pick__count{grid-column:3;grid-row:span 2;font-size:1.6rem;font-weight:950;
  color:var(--mvp-cyan);font-variant-numeric:tabular-nums;line-height:1}
.gv-pick__card--own.is-empty{opacity:.62}
.gv-pick__card--own.is-empty .gv-pick__count{color:var(--mvp-muted)}
.gv-pick__card--own.is-current{border-color:rgba(24,226,255,.75);
  background:rgba(24,226,255,.07)}
.gv-pick__card--own.is-current .gv-pick__go{color:var(--mvp-cyan)}

/* строка «показаны такие-то» со сбросом фильтра */
.gv-filterline{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 16px;color:var(--mvp-muted)}
.gv-filterline b{color:var(--mvp-text)}

/* ------------------------------------------------------------ уведомления
   Были карточкой в пол-экрана с приглушённым текстом «как примечание»: их
   не замечали, а места они занимали больше, чем то, ради чего человек
   пришёл. Теперь это одна строка — тесная, но яркая, со свечением по краю,
   чтобы её видели боковым зрением. */
.gv-flash{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px;padding:11px 16px;border-radius:14px;
  font-size:.93rem;font-weight:760;line-height:1.45;
  border:1px solid rgba(24,226,255,.6);background:rgba(24,226,255,.13);
  color:#ccf7ff;box-shadow:0 0 26px rgba(24,226,255,.15)}
.gv-flash__icon{flex:0 0 auto;display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;font-size:.9rem;
  background:rgba(24,226,255,.22);color:var(--mvp-cyan)}
.gv-flash__text{flex:1 1 240px;min-width:0}
.gv-flash .mvp-btn{flex:0 0 auto;margin-left:auto}
.gv-flash--bad{border-color:rgba(255,107,107,.65);
  background:rgba(255,107,107,.13);color:#ffd8d8;
  box-shadow:0 0 26px rgba(255,107,107,.15)}
.gv-flash--bad .gv-flash__icon{background:rgba(255,107,107,.22);
  color:var(--mvp-danger)}
.gv-flash--warn{border-color:rgba(255,196,84,.6);
  background:rgba(255,196,84,.12);color:#ffeccb;
  box-shadow:0 0 26px rgba(255,196,84,.14)}
.gv-flash--warn .gv-flash__icon{background:rgba(255,196,84,.22);color:#ffc454}

/* --------------------------------------------------- повышение тарифа
   Не пряталось бы под раскрывашку, если бы это было опасное действие. Но
   данные, адрес и система при переходе остаются на месте — это покупка, и
   стоять она должна на виду, с ценой в самом списке вариантов. */
.gv-upgrade{margin-top:16px;padding:16px 18px;border-radius:18px;
  border:1px solid rgba(124,92,255,.42);
  background:linear-gradient(150deg,rgba(124,92,255,.13),rgba(255,255,255,.035))}
.gv-upgrade__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:12px}
.gv-upgrade__head b{font-size:1.02rem;font-weight:900}
.gv-upgrade__head .gv-note{margin:0;flex:1 1 240px}
.gv-upgrade__form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.gv-upgrade__form .gv-formfield{flex:1 1 320px;margin:0}

/* ------------------------------------------- шапка: место под полный ряд
   У вошедшего в ряду четыре лишних пункта — баланс, колокольчик, админка и
   кнопка кабинета. Полный ряд (четыре пункта меню + они) занимает около
   1265px, у админа около 1345px — помещается от 1400px: ниже RUS/ENG уехал
   бы за край. Поэтому такой шапке дана своя ширина и свой, более ранний
   порог складывания в бургер. */
.mvp-header.is-signed .mvp-header__inner{width:min(100% - 40px,1560px)}
@media (max-width:1400px){
  .mvp-header.is-signed .gv-burger{display:flex}
  .mvp-header.is-signed .gv-nav{position:fixed;left:14px;right:14px;top:80px;
    display:none;max-height:calc(100vh - 104px);overflow:auto;padding:12px;
    flex-direction:column;align-items:stretch;gap:2px;
    border:1px solid var(--mvp-line);border-radius:24px;background:#0b1630;
    box-shadow:var(--mvp-shadow);z-index:1001}
  .mvp-header.is-signed.is-open .gv-nav{display:flex}
  .mvp-header.is-signed .gv-nav a{border-radius:14px;padding:12px 14px;
    font-size:1rem}
  .mvp-header.is-signed .gv-nav__sections{flex-direction:column;
    align-items:stretch}
  .mvp-header.is-signed .gv-nav a.gv-nav__ref{display:block}
  .mvp-header.is-signed .gv-nav__sections.is-split{margin-top:8px;
    padding-top:10px;border-top:1px solid var(--mvp-line)}
  .mvp-header.is-signed .mvp-header__inner{
    width:min(100% - 36px,var(--mvp-container))}
}
/* Кнопка кабинета стоит после языков, вне меню. Меню на широком экране
   отделено от языков отступом — у сайта эту роль играет кнопка Remote. */
@media (min-width:1180.02px){.mvp-header:not(.is-signed) .gv-nav{margin-right:14px}}
@media (min-width:1400.02px){.mvp-header.is-signed .gv-nav{margin-right:14px}}

/* ---------------------------------------------------- уведомления лентой
   Полсотни одинаковых серых плашек с полной датой в каждой не читались:
   глазу не за что зацепиться, и «когда это было» приходилось вычитывать.
   Теперь день выносится заголовком, в строке остаётся время, а слева идёт
   нить с точками — по ней видно, где кончился один день и начался другой. */
.gv-feed{position:relative;margin-top:6px;padding-left:26px}
.gv-feed:before{content:"";position:absolute;left:5px;top:14px;bottom:14px;
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(24,226,255,.35),rgba(124,92,255,.12))}
.gv-feed__day{position:relative;margin:22px 0 10px;color:var(--mvp-muted);
  font-size:.78rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.gv-feed__day:first-child{margin-top:8px}
.gv-feed__item{position:relative;margin-bottom:10px;padding:14px 18px;
  border:1px solid var(--mvp-line);border-radius:16px;background:var(--mvp-card);
  transition:border-color .18s ease}
.gv-feed__item:hover{border-color:rgba(24,226,255,.3)}
.gv-feed__dot{position:absolute;left:-25px;top:21px;width:12px;height:12px;
  border-radius:50%;background:#0b1630;border:2px solid rgba(24,226,255,.4)}
.gv-feed__item.is-new{border-color:rgba(24,226,255,.5);
  background:linear-gradient(120deg,rgba(24,226,255,.08),var(--mvp-card) 60%)}
.gv-feed__item.is-new .gv-feed__dot{background:var(--mvp-cyan);
  border-color:var(--mvp-cyan);box-shadow:0 0 12px rgba(24,226,255,.75)}
.gv-feed__meta{display:flex;align-items:center;gap:10px;margin-bottom:5px;
  color:var(--mvp-muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.gv-feed__new{padding:2px 8px;border-radius:999px;font-size:.68rem;
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(24,226,255,.18);color:var(--mvp-cyan)}
.gv-feed__text{line-height:1.6;white-space:pre-wrap;word-break:break-word}
@media (max-width:560px){
  .gv-feed{padding-left:20px}
  .gv-feed:before{left:3px}
  .gv-feed__dot{left:-21px;width:10px;height:10px}
  .gv-feed__item{padding:12px 14px}
}

/* когда повышать не на что — тот же блок, но приглушённый и без формы */
.gv-upgrade.is-empty{border-color:var(--mvp-line);background:rgba(255,255,255,.03)}
.gv-upgrade.is-empty .gv-upgrade__head{margin-bottom:0}

/* сводка под выбором тарифа — как в панели площадки: слева за что, справа
   сколько. Отдельной строкой, потому что в списке стоит цена тарифа, а
   списывается другая сумма — за остаток срока */
.gv-upgrade__sum{flex:1 1 260px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(124,92,255,.3);background:rgba(0,0,0,.22)}
.gv-upgrade__line{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px}
.gv-upgrade__line .gv-note{margin:0}
.gv-upgrade__total{margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.1)}
.gv-upgrade__total b:last-child{font-size:1.2rem;font-weight:950;
  color:var(--mvp-violet);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- чат поддержки
   Тёмная тема с янтарным акцентом — по образцу привычного клиентам виджета
   службы поддержки площадки: почти чёрная панель, у сообщений поддержки
   янтарная рамка, у своих сообщений — ровный серый пузырь справа. */
.gv-chat{position:fixed;right:22px;bottom:22px;z-index:60;
  font-family:inherit}
.gv-chat__fab{position:relative;width:58px;height:58px;border-radius:50%;
  border:0;background:#FF9500;color:#0A0A0A;
  cursor:pointer;box-shadow:var(--mvp-shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease}
.gv-chat__fab:hover{transform:scale(1.06)}
.gv-chat__fab-icon{width:26px;height:26px}
.gv-chat__fab-badge{position:absolute;top:-3px;right:-3px;min-width:19px;
  height:19px;padding:0 5px;border-radius:999px;background:var(--mvp-danger);
  color:#1a0510;font-size:.72rem;font-weight:800;line-height:19px;
  text-align:center;box-shadow:0 0 0 2px var(--mvp-bg)}
.gv-chat__panel{position:absolute;right:0;bottom:72px;width:360px;
  max-width:calc(100vw - 32px);height:min(500px,72vh);display:flex;
  flex-direction:column;background:#141414;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--mvp-radius-sm);
  box-shadow:var(--mvp-shadow);overflow:hidden}
/* [hidden] и класс делят одну специфичность — без этого правило display:flex
   выше побеждает порядком объявления, и hidden-атрибут перестаёт скрывать
   панель вовсе */
.gv-chat__panel[hidden]{display:none}
.gv-chat__head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:800;color:#fff}
.gv-chat__close{background:none;border:0;color:var(--mvp-muted);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 6px}
.gv-chat__close:hover{color:var(--mvp-text)}
.gv-chat__body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;
  flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.6) transparent}
.gv-chat__body::-webkit-scrollbar{width:6px}
.gv-chat__body::-webkit-scrollbar-track{background:transparent}
.gv-chat__body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.6);
  border-radius:999px}
.gv-chat__body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.8)}
.gv-chat__empty{margin:auto;text-align:center;color:var(--mvp-muted);
  font-size:.88rem;padding:0 10px}
.gv-chat__msg{display:flex;flex-direction:column;max-width:82%}
.gv-chat__msg--client{align-self:flex-end;align-items:flex-end}
.gv-chat__msg--admin{align-self:flex-start;align-items:flex-start}
.gv-chat__bubble{padding:9px 12px;border-radius:14px;font-size:.9rem;
  line-height:1.42;white-space:pre-wrap;word-break:break-word}
.gv-chat__msg--client .gv-chat__bubble{background:rgba(255,255,255,.1);
  color:var(--mvp-text)}
.gv-chat__msg--admin .gv-chat__bubble{background:rgba(255,255,255,.04);
  color:var(--mvp-text);border:1px solid rgba(255,209,102,.45)}
.gv-chat__img{display:block;max-width:100%;max-height:220px;border-radius:10px;
  cursor:pointer}
.gv-chat__time{margin-top:3px;font-size:.68rem;color:var(--mvp-muted)}
/* правка своего сообщения в карточке клиента в админке */
.gv-chat__edit{margin-top:4px;font-size:.78rem;width:100%;max-width:420px}
.gv-chat__edit summary{cursor:pointer;color:var(--mvp-muted)}
.gv-chat__edit summary:hover{color:var(--mvp-text)}
.gv-chat__edit form{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.gv-chat__edit .mvp-btn{align-self:flex-start}
.gv-chat__form{display:flex;flex-direction:column;gap:8px;padding:10px;
  border-top:1px solid rgba(255,255,255,.08);background:#101010}
.gv-chat__input{resize:none;height:68px;max-height:160px;
  padding:9px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35);color:var(--mvp-text);font:inherit;
  font-size:.88rem;overflow-y:auto;scrollbar-width:none}
.gv-chat__input::-webkit-scrollbar{width:0;height:0}
.gv-chat__input:focus{outline:none;border-color:var(--mvp-warning)}
.gv-chat__form-row{display:flex;align-items:center;justify-content:space-between;
  gap:8px}
.gv-chat__form-left{display:flex;align-items:center;gap:10px;min-width:0}
.gv-chat__attach{background:none;border:0;color:var(--mvp-muted);
  font-size:.76rem;cursor:pointer;padding:0;white-space:nowrap}
.gv-chat__attach:hover{color:var(--mvp-text)}
.gv-chat__attach:disabled{opacity:.5;cursor:default}
.gv-chat__burn{border:0;border-radius:6px;padding:0 12px;height:26px;
  background:#DC3545;color:#FFFFFF;font-weight:800;cursor:pointer;
  font-size:.76rem;flex:none}
.gv-chat__burn:hover{filter:brightness(1.08)}
.gv-chat__burn:disabled{opacity:.5;cursor:default}
.gv-chat__send{border:0;border-radius:6px;padding:0 16px;height:26px;
  background:#FF9500;color:#0A0A0A;font-weight:800;cursor:pointer;
  font-size:.8rem;flex:none}
.gv-chat__send:hover{filter:brightness(1.08)}

@media (max-width:480px){
  .gv-chat{right:14px;bottom:14px}
  .gv-chat__panel{right:-6px;width:calc(100vw - 20px)}
}

/* ------------------------------------------------------------ техработы */
/* заглушка для клиентов */
.gv-maintpage{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.gv-maintpage__card{width:min(520px,100%);text-align:center;padding:40px 28px;
  border:1px solid var(--mvp-line);border-radius:var(--mvp-radius);
  background:var(--mvp-card);box-shadow:var(--mvp-shadow)}
.gv-maintpage__logo{margin:0 auto 18px;border-radius:16px}
.gv-maintpage__badge{display:inline-block;margin-bottom:14px;padding:6px 14px;
  border-radius:999px;background:rgba(255,209,102,.14);color:var(--mvp-warning);
  font-weight:850;font-size:.9rem}
.gv-maintpage h1{margin:0 0 12px;font-size:2rem}
.gv-maintpage__text{margin:0 0 24px;color:var(--mvp-soft);line-height:1.55;
  white-space:pre-line}
/* плашка у администратора, пока идут техработы */
.gv-maintbar{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;padding:10px 16px;background:rgba(255,209,102,.14);
  border-bottom:1px solid rgba(255,209,102,.45);color:var(--mvp-warning);
  font-weight:760;font-size:.92rem;text-align:center}
.gv-maintbar a{color:#2b1900;background:var(--mvp-warning);border-radius:999px;
  padding:5px 14px;font-weight:850}
/* страница техработ в админке */
.gv-maint{margin-bottom:18px}
.gv-maint__status{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  color:var(--mvp-soft)}
.gv-maint__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:#3ddc97;box-shadow:0 0 12px rgba(61,220,151,.6)}
.gv-maint.is-on{border-color:rgba(255,107,137,.5);background:rgba(255,107,137,.07)}
.gv-maint.is-on .gv-maint__dot{background:var(--mvp-danger);
  box-shadow:0 0 12px rgba(255,107,137,.7)}
.gv-maint__form{display:grid;gap:8px}
.gv-maint__list{margin:0;padding-left:18px;color:var(--mvp-soft);line-height:1.6}

/* ---------------------------------------------------- активность и аналитика */
.gv-feedsum{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;
  color:var(--mvp-soft);font-size:.9rem}
.gv-feedsum b{color:var(--mvp-text)}
.gv-afeed{list-style:none;margin:0;padding:0;max-height:460px;overflow-y:auto;
  border:1px solid var(--mvp-line);border-radius:16px}
.gv-afeed__day{position:sticky;top:0;z-index:1;padding:6px 14px;font-size:.78rem;
  font-weight:800;letter-spacing:.04em;color:var(--mvp-muted);
  background:var(--mvp-card);border-bottom:1px solid var(--mvp-line)}
.gv-afeed__row{display:grid;grid-template-columns:44px 22px minmax(0,1fr) auto;
  gap:8px;align-items:start;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.gv-afeed__row:last-child{border-bottom:0}
.gv-afeed__time{color:var(--mvp-muted);font-size:.84rem;font-variant-numeric:tabular-nums;
  padding-top:1px}
.gv-afeed__icon{text-align:center}
.gv-afeed__body{display:grid;gap:2px;min-width:0}
.gv-afeed__text{overflow-wrap:anywhere}
.gv-afeed__sub{color:var(--mvp-muted);font-size:.8rem;overflow-wrap:anywhere}
.gv-afeed__dev{font-size:.85rem;opacity:.8}
.gv-afeed__row--order{background:rgba(24,226,255,.05)}
.gv-afeed__row--order .gv-afeed__text{font-weight:700}
.gv-afeed__row--order.is-paid .gv-afeed__sub{color:var(--mvp-green)}
.gv-funnel{display:grid;gap:10px}
.gv-funnel__row{display:grid;grid-template-columns:170px minmax(0,1fr) 90px;gap:12px;
  align-items:center}
.gv-funnel__bar{height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.gv-funnel__bar i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--mvp-cyan),var(--mvp-green))}
.gv-funnel__num{text-align:right;font-variant-numeric:tabular-nums}
.gv-funnel__num small{color:var(--mvp-muted);margin-left:4px}
.gv-agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.gv-agrid .gv-card{margin:0}
.gv-alist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gv-alist li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.gv-alist li span{min-width:0;overflow-wrap:anywhere}
.gv-alist li small{display:block;color:var(--mvp-muted);font-size:.78rem}
.gv-alist li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.gv-trail{color:var(--mvp-soft);font-size:.85rem;overflow-wrap:anywhere}
.gv-trail i{color:var(--mvp-muted);font-style:normal;margin:0 4px}
.gv-wallet{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;
  overflow-wrap:anywhere}
@media (max-width:760px){
  .gv-agrid{grid-template-columns:1fr}
  .gv-funnel__row{grid-template-columns:1fr 80px}
  .gv-funnel__bar{grid-column:1/-1;grid-row:2}
  .gv-afeed__row{grid-template-columns:40px 20px minmax(0,1fr)}
  .gv-afeed__dev{display:none}
}

/* страница 404 — та же карточка, что у заглушки техработ */
.gv-maintpage__badge--nf{letter-spacing:.12em}
.gv-maintpage__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* удаление клиента — внизу карточки, свёрнуто, чтобы не нажать мимоходом */
.gv-dangerzone{margin-top:22px;border-color:rgba(255,107,137,.35)}
.gv-dangerzone summary{cursor:pointer;font-weight:800;color:var(--mvp-danger)}
.gv-dangerzone__body{display:grid;gap:10px;margin-top:12px}

/* ------------------------------------------------------------ каркас кабинета
   Слева — разделы по продуктам (Серверы, Прокси, VPN) и учётная часть,
   справа — сам раздел. У каждого пункта линейный значок в своей подложке;
   баланс — мини-кошелёк золотом, выход — отдельно внизу. */
.gv-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;align-items:start}
.gv-shell__main{min-width:0;container-type:inline-size}
.gv-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.gv-side__group{display:flex;flex-direction:column;gap:3px;padding:10px;
  border-radius:var(--mvp-radius);background:var(--mvp-card);border:1px solid var(--mvp-line)}
.gv-side__link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;
  color:var(--mvp-soft);font-weight:800;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.gv-side__link:hover{background:rgba(255,255,255,.05);color:var(--mvp-text)}
.gv-side__link.is-on{background:rgba(24,226,255,.12);color:#fff;
  box-shadow:inset 3px 0 0 var(--mvp-cyan)}
.gv-side__link:focus-visible,.gv-side__wallet a:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:2px}
.gv-side__icon{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.05);color:var(--mvp-muted);transition:color .15s ease,background .15s ease}
.gv-side__icon svg{width:17px;height:17px}
.gv-side__link:hover .gv-side__icon{color:var(--mvp-text)}
.gv-side__link.is-on .gv-side__icon{background:rgba(24,226,255,.16);color:var(--mvp-cyan)}
.gv-side__name{flex:1;min-width:0}
.gv-side__count{min-width:24px;padding:2px 8px;border-radius:999px;text-align:center;
  background:rgba(24,226,255,.16);color:var(--mvp-cyan);font-size:.8rem}
/* непрочитанные — заметной точкой с числом, а не серой цифрой в углу */
.gv-side__badge{display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:#ff6b89;color:#fff;font-size:.74rem;font-weight:900;font-variant-numeric:tabular-nums;
  box-shadow:0 0 12px rgba(255,107,137,.45)}
.gv-side__group--acct .gv-side__link{font-size:.93rem}
.gv-side__link--admin{color:var(--mvp-warning)}
.gv-side__sep{height:1px;margin:5px 8px;background:var(--mvp-line)}
.gv-side__link--out{color:var(--mvp-muted)}
.gv-side__link--out:hover{background:rgba(255,107,137,.08);color:#ff8aa2}
.gv-side__link--out:hover .gv-side__icon{background:rgba(255,107,137,.14);color:#ff6b89}

/* мини-кошелёк: сумма видна с любой страницы, «+» — сразу к пополнению.
   Вся плитка — ссылка на баланс (растянутая), «+» лежит поверх неё */
.gv-side__wallet{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:6px;padding:11px 11px 11px 10px;
  border-radius:15px;border:1px solid rgba(246,196,84,.26);
  background:linear-gradient(150deg,rgba(246,196,84,.13),rgba(246,196,84,.02) 62%),rgba(5,10,24,.45);
  transition:border-color .15s ease,box-shadow .15s ease}
.gv-side__wallet:hover{border-color:rgba(246,196,84,.45)}
.gv-side__wallet.is-on{border-color:rgba(246,196,84,.6);
  box-shadow:0 0 0 1px rgba(246,196,84,.14),0 0 24px rgba(246,196,84,.12)}
.gv-side__wallet-link{flex:1;display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.gv-side__wallet-link:after{content:"";position:absolute;inset:0;border-radius:inherit}
.gv-side__wallet-icon{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:10px;
  background:rgba(246,196,84,.15);color:var(--gv-gold)}
.gv-side__wallet-icon svg{width:18px;height:18px}
.gv-side__wallet-text{min-width:0}
.gv-side__wallet-label{display:block;font-size:.76rem;font-weight:700;color:var(--mvp-muted);line-height:1.2}
.gv-side__wallet-sum{display:block;font-size:1.14rem;font-weight:900;color:#fff;line-height:1.2;
  font-variant-numeric:tabular-nums}
.gv-side__wallet-add{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--gv-gold-grad);color:#1b1300;
  font-size:.8rem;font-weight:900;text-decoration:none;box-shadow:0 4px 14px rgba(246,196,84,.32);
  transition:filter .15s ease}
.gv-side__wallet-add:hover{filter:brightness(1.08)}
.gv-side__wallet-add svg{width:15px;height:15px}
.gv-side__wallet-add span{display:none}

/* окно «Выйти из кабинета?» */
.gv-modal--confirm{width:min(400px,calc(100vw - 32px));text-align:center}
.gv-confirm__icon{display:grid;place-items:center;width:54px;height:54px;margin:2px auto 14px;border-radius:16px;
  background:rgba(255,107,137,.12);color:#ff6b89}
.gv-confirm__icon svg{width:24px;height:24px}
.gv-confirm__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gv-confirm__acts form{display:flex;margin:0}
.gv-confirm__acts .mvp-btn{width:100%;margin:0}

/* На телефоне меню — плитками, а не лентой с прокруткой вбок: полосы
   прокрутки выглядели как поломка, а пункты за краем никто не находил.
   Продукты — три плитки; под ними кошелёк во всю ширину и кнопки два на
   два: Платежи, Приглашения, Уведомления, Выйти. В четыре в ряд
   «Уведомления» не влезали и рвались посередине слова. */
@media (max-width:900px){
  /* minmax(0,…): иначе колонка растягивается под меню, и страница
     становится шире экрана */
  .gv-shell{grid-template-columns:minmax(0,1fr);gap:16px}
  .gv-side{position:static;min-width:0;gap:8px}
  .gv-side__group{display:grid;gap:6px;padding:6px;min-width:0}
  .gv-side__group--prod{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gv-side__group--acct{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-side__link{position:relative;flex-direction:column;justify-content:center;
    gap:6px;min-width:0;padding:11px 4px 9px;text-align:center;line-height:1.15}
  .gv-side__name{flex:0 0 auto;overflow-wrap:anywhere}
  .gv-side__count{position:absolute;top:5px;right:5px;min-width:20px;height:20px;
    padding:0 6px;font-size:.7rem}
  /* число непрочитанных — на углу значка, чтобы не отнимать место у подписи */
  .gv-side__badge{position:absolute;left:27px;top:3px;min-width:18px;height:18px;
    padding:0 5px;font-size:.66rem;box-shadow:0 0 0 2px #0d1528,0 0 10px rgba(255,107,137,.45)}
  .gv-side__group--prod .gv-side__link.is-on{box-shadow:inset 0 -3px 0 var(--mvp-cyan)}
  .gv-side__group--acct .gv-side__link{flex-direction:row;justify-content:flex-start;gap:9px;
    padding:8px 10px 8px 8px;text-align:left;font-size:.86rem;background:rgba(255,255,255,.03)}
  .gv-side__group--acct .gv-side__name{flex:1 1 auto;overflow-wrap:normal}
  .gv-side__group--acct .gv-side__icon{width:28px;height:28px}
  .gv-side__wallet{grid-column:1 / -1;margin:0;padding:10px 10px 10px 12px}
  .gv-side__wallet-add{width:auto;padding:0 14px 0 11px;height:36px;border-radius:999px}
  .gv-side__wallet-add span{display:inline}
  .gv-side__sep{display:none}
  .gv-side__link--admin{grid-column:1 / -1}
  /* пунктов учёта четыре в два ряда — «Выйти» отдельной строкой */
  .gv-side__group--acct .gv-side__link--out{grid-column:1 / -1;justify-content:center}
}

/* ------------------------------------------------------------ прокси
   Строка покупки: вид × количество, страна, состояние, срок, кнопка. */
.gv-proxytable{display:grid;gap:3px;margin:4px 0 12px;font-size:.88rem}
.gv-proxytable__head,.gv-proxytable__row{display:grid;gap:10px;padding:8px 12px;border-radius:10px;
  grid-template-columns:minmax(120px,1.4fr) 80px 80px minmax(90px,1fr) minmax(90px,1fr)}
.gv-proxytable__head{color:var(--mvp-muted);font-weight:800;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.05em}
.gv-proxytable__row{background:rgba(255,255,255,.035)}
.gv-proxytable__row code{color:var(--mvp-cyan);overflow-wrap:anywhere}
.gv-proxytable__actions{margin:8px 0;flex-wrap:wrap;gap:8px}
@container (max-width:640px){
  .gv-proxytable__head{display:none}
  .gv-proxytable__row{grid-template-columns:1fr 1fr}
  .gv-proxytable__row code:first-child{grid-column:1 / -1;font-weight:800}
}
.gv-renew{margin-top:18px;padding-top:16px;border-top:1px solid var(--mvp-line);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gv-methods--row{display:flex;flex-wrap:wrap;gap:8px}
.gv-tile__price{display:block;margin-top:8px;color:var(--mvp-cyan);font-weight:900}
.gv-order--link{text-decoration:none;color:inherit}

/* админка прокси: заказ, по которому нужно решение, и кнопки под ним */
.gv-pxcase{display:flex;flex-direction:column;gap:10px;padding:14px 0;
  border-top:1px solid var(--mvp-line)}
.gv-pxcase:first-of-type{border-top:0}
.gv-pxcase__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gv-pxcase__acts .gv-inline{display:flex;gap:8px;align-items:center;margin:0}

/* колокольчик: на широком экране — значок, в мобильном меню — значок с подписью,
   иначе в списке пунктов висел одинокий смайлик */
.gv-nav__label{display:none}
@media (max-width:1400px){
  .mvp-header.is-signed .gv-nav a.gv-nav__bell{justify-content:flex-start;gap:10px}
  .mvp-header.is-signed .gv-nav__bell .gv-nav__label{display:inline;font-size:1rem;font-weight:800}
}

/* Тарифы GRANDO Remote на телефоне: строка таблицы — карточка. Таблица в
   девять колонок прокручивалась вбок, и цену с кнопкой было не найти. */
@media (max-width:680px){
  .gv-tablewrap:has(.gv-vpstable){overflow:visible;border:0;background:transparent}
  .gv-vpstable,.gv-vpstable tbody{display:block;width:100%;min-width:0}
  .gv-vpstable thead{display:none}
  .gv-vpstable tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;
    margin-bottom:12px;padding:16px;border:1px solid var(--mvp-line);border-radius:20px;
    background:rgba(255,255,255,.05)}
  .gv-vpstable tr[hidden]{display:none}
  .gv-vpstable td{display:block;padding:0;border:0;text-align:left;min-width:0}
  .gv-vpstable td:first-child,.gv-vpstable td:last-child{grid-column:1 / -1;text-align:center}
  .gv-vpstable td:first-child b{font-size:1.1rem}
  .gv-vpstable td[data-label]:before{content:attr(data-label);display:block;
    font-size:.72rem;font-weight:800;color:var(--mvp-muted);text-transform:uppercase;
    letter-spacing:.04em;margin-bottom:2px}
  .gv-vpstable td:last-child .mvp-btn{width:100%}
}

/* заголовок раздела кабинета на телефоне — по центру, как и на сайте */
@media (max-width:680px){
  .gv-head{flex-direction:column;align-items:center;text-align:center}
  .gv-head .mvp-actions{justify-content:center;width:100%}
}

/* ===================================================== чат поддержки v2
   Был серой коробкой с оранжевыми кнопками и английскими подписями —
   чужеродный кусок на тёмно-неоновом сайте. Теперь: стекло в цветах сайта,
   шапка с лицом бренда и «на связи», пузыри как в мессенджере, одна строка
   ввода с иконками, золотая кнопка вызова. */
:root{--gv-gold:#f6c454;--gv-gold-hi:#ffe6a3;--gv-gold-lo:#c98b16;
  --gv-gold-grad:linear-gradient(135deg,#ffe6a3 0%,#f6c454 45%,#c98b16 100%)}
.gv-chat__fab{background:var(--gv-gold-grad);color:#2a1a00;
  box-shadow:0 0 0 4px rgba(246,196,84,.14),0 12px 32px rgba(246,196,84,.35)}
.gv-chat__fab:before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(246,196,84,.55);animation:gv-ring 2.8s ease-out infinite;pointer-events:none}
@keyframes gv-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.gv-chat__fab-badge{background:#ff4d6d;color:#fff}
/* Окно висит над кнопкой (низ — в 94px от края экрана), а сверху его ждёт
   липкая шапка сайта высотой до 82px. Высота «экран минус 130» не учитывала
   шапку: на ноутбуке верх окна с заголовком уходил под неё. Теперь окно
   всегда между шапкой и кнопкой, с зазором; dvh — чтобы на телефоне его не
   резала панель браузера. */
.gv-chat__panel{width:380px;height:min(560px,calc(100vh - 196px));height:min(560px,calc(100dvh - 196px));
  min-height:260px;
  background-color:#0a1428;background-image:linear-gradient(180deg,#12203f,#08101f);
  border:1px solid rgba(246,196,84,.28);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 46px rgba(24,226,255,.10)}
.gv-chat__head{justify-content:flex-start;gap:12px;padding:14px 14px 14px 16px;
  background:linear-gradient(90deg,rgba(24,226,255,.10),rgba(142,52,245,.12));
  border-bottom:1px solid rgba(255,255,255,.08)}
.gv-chat__avatar{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(246,196,84,.6),0 0 16px rgba(246,196,84,.25)}
.gv-chat__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gv-chat__who b{font-size:.98rem;font-weight:900}
.gv-chat__who span{display:flex;align-items:center;gap:6px;font-size:.76rem;
  font-weight:600;color:var(--mvp-muted)}
.gv-chat__online{width:8px;height:8px;border-radius:50%;background:#34e39b;
  box-shadow:0 0 8px #34e39b;flex:0 0 auto}
.gv-chat__close{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:1.35rem;padding:0}
.gv-chat__close:hover{background:rgba(255,255,255,.08)}
.gv-chat__body{padding:16px 14px;gap:12px;
  background:radial-gradient(circle at 85% 0%,rgba(124,92,255,.10),transparent 45%),
    radial-gradient(circle at 0% 100%,rgba(24,226,255,.07),transparent 45%);
  scrollbar-color:rgba(255,255,255,.18) transparent}
.gv-chat__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.gv-chat__empty{max-width:26ch;line-height:1.5}
.gv-chat__bubble{padding:10px 13px;border-radius:16px;line-height:1.42}
.gv-chat__msg--client .gv-chat__bubble{background:linear-gradient(135deg,#18e2ff,#7c5cff);
  color:#04121f;font-weight:600;border:0;border-bottom-right-radius:6px}
.gv-chat__msg--admin .gv-chat__bubble{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);border-bottom-left-radius:6px}
.gv-chat__form{gap:6px;padding:12px 12px 8px;border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,16,31,.65)}
.gv-chat__compose{display:flex;align-items:flex-end;gap:8px}
.gv-chat__input{flex:1;min-width:0;height:42px;min-height:42px;max-height:120px;padding:11px 14px;
  border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:var(--mvp-text);font:inherit;font-size:.92rem;line-height:1.35;overflow-y:auto}
.gv-chat__input:focus{border-color:rgba(24,226,255,.6);box-shadow:0 0 0 3px rgba(24,226,255,.12)}
.gv-chat__attach{flex:0 0 42px;height:42px;padding:0;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--mvp-soft)}
.gv-chat__attach:hover{color:#fff;border-color:rgba(24,226,255,.5)}
.gv-chat__attach svg{width:20px;height:20px}
.gv-chat__send{flex:0 0 42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:var(--gv-gold-grad);color:#2a1a00;box-shadow:0 6px 18px rgba(246,196,84,.35)}
.gv-chat__send svg{width:19px;height:19px;margin-left:2px}
.gv-chat__form-row{justify-content:center}
.gv-chat__burn{height:auto;padding:2px 6px;background:none;border:0;border-radius:6px;
  color:var(--mvp-muted);font-size:.74rem;font-weight:600;
  text-decoration:underline dotted;text-underline-offset:3px}
.gv-chat__burn:hover{color:#ff6b89;filter:none}
@media (max-width:560px){
  .gv-chat__panel{width:calc(100vw - 20px);height:min(560px,calc(100vh - 190px));
    height:min(560px,calc(100dvh - 190px))}
}
@media (prefers-reduced-motion:reduce){.gv-chat__fab:before{animation:none;opacity:0}}

/* ===================================================== карточка покупки прокси
   Сверху — общее: вид золотом, количество, страна, состояние и срок полосой.
   Ниже — адреса с галочками и инструменты: что выбрано, то и копируется. */
.gv-pack{position:relative;margin-bottom:18px;padding:22px 22px 20px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.gv-pack.is-active{border-color:rgba(246,196,84,.38);
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 0 1px rgba(246,196,84,.10),0 0 40px rgba(246,196,84,.08)}
.gv-pack.is-active:before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,#f6c454,#ffe6a3,#f6c454,transparent);
  box-shadow:0 0 14px rgba(246,196,84,.6)}
.gv-pack__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:center}
.gv-pack__title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gv-pack__kind{font-size:1.25rem;font-weight:900;background-image:var(--gv-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-pack__qty{font-size:1.15rem;font-weight:900;color:#fff}
.gv-pack__num{font-style:normal;font-size:.8rem;font-weight:800;color:var(--mvp-muted)}
.gv-pack__meta{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.gv-pack__geo{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.gv-pack__state{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:.82rem;font-weight:800;background:rgba(255,255,255,.07);color:var(--mvp-soft)}
.gv-pack__state:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.gv-pack.is-active .gv-pack__state{background:rgba(52,227,155,.12);color:#34e39b}
.gv-pack.is-awaiting .gv-pack__state,.gv-pack.is-issuing .gv-pack__state,
.gv-pack.is-check .gv-pack__state{background:rgba(246,196,84,.12);color:var(--gv-gold)}
.gv-pack.is-expired .gv-pack__state,.gv-pack.is-refunded .gv-pack__state{color:var(--mvp-muted)}
.gv-pack__term{grid-column:1 / -1}
.gv-pack__term-row{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;
  color:var(--mvp-muted);margin-bottom:7px}
.gv-pack__term-row b{color:#fff}
.gv-pack__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.gv-pack__bar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#f6c454,#ffe6a3 40%,var(--mvp-cyan));
  box-shadow:0 0 12px rgba(246,196,84,.5)}
.gv-pack__term.is-soon .gv-pack__bar i{background:linear-gradient(90deg,#ff6b89,#f6c454)}
.gv-pack__wait{display:flex;align-items:center;gap:10px;margin-top:14px}

/* инструменты списка */
.gv-pxbox{margin-top:18px}
.gv-pxtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.gv-pxtools__all{position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;
  border-radius:12px;cursor:pointer;font-size:.88rem;font-weight:800;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1)}
.gv-pxtools__acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.gv-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1)}
.gv-seg button{border:0;background:none;color:var(--mvp-muted);font:inherit;font-size:.82rem;
  font-weight:800;padding:6px 12px;border-radius:9px;cursor:pointer}
.gv-seg button.is-on{background:rgba(24,226,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(24,226,255,.4)}
.gv-pxbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;
  cursor:pointer;font:inherit;font-size:.86rem;font-weight:800;color:var(--mvp-soft);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:.15s}
.gv-pxbtn:hover{color:#fff;border-color:rgba(24,226,255,.5)}
.gv-pxbtn svg{width:17px;height:17px}
.gv-pxbtn--gold{color:#2a1a00;background:var(--gv-gold-grad);border-color:transparent;
  box-shadow:0 6px 18px rgba(246,196,84,.28)}
.gv-pxbtn--gold:hover{color:#2a1a00;filter:brightness(1.05)}
.gv-pxbtn.is-done{background:rgba(52,227,155,.18);color:#34e39b;border-color:rgba(52,227,155,.45);box-shadow:none}

/* своя галочка: квадрат с золотой отметкой */
.gv-px__pick input,.gv-pxtools__all input{position:absolute;opacity:0;width:0;height:0}
.gv-tick{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid rgba(255,255,255,.3);
  display:grid;place-items:center;transition:.15s}
.gv-tick:after{content:"";width:9px;height:5px;border:2.5px solid #2a1a00;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0}
input:checked + .gv-tick{background:var(--gv-gold-grad);border-color:transparent}
input:checked + .gv-tick:after{opacity:1}
input:indeterminate + .gv-tick{background:rgba(246,196,84,.35);border-color:rgba(246,196,84,.7)}
input:focus-visible + .gv-tick{box-shadow:0 0 0 3px rgba(24,226,255,.35)}

/* строка прокси */
.gv-pxlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gv-px{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;
  gap:14px;padding:11px 12px 11px 14px;border-radius:14px;background:rgba(7,16,31,.55);
  border:1px solid rgba(255,255,255,.07);transition:border-color .15s,background .15s}
.gv-px:hover{border-color:rgba(24,226,255,.3)}
.gv-px.is-picked{border-color:rgba(246,196,84,.55);background:rgba(246,196,84,.06)}
.gv-pxbox:not(.is-expanded) .gv-px.is-more{display:none}
.gv-px__pick{display:flex;cursor:pointer;position:relative}
.gv-px__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.gv-px__ip{font-size:1rem;font-weight:800;color:#fff;letter-spacing:.01em}
.gv-px__ports,.gv-px__auth{display:flex;gap:14px;flex-wrap:wrap;font-size:.84rem;min-width:0}
.gv-px__auth{flex-direction:column;gap:3px}
.gv-px em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--mvp-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-right:6px}
.gv-px__ports span,.gv-px__auth code{color:var(--mvp-cyan);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gv-px__auth code{overflow-wrap:anywhere}
.gv-px__copy{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;
  color:var(--mvp-soft);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.15s}
.gv-px__copy:hover{color:#2a1a00;background:var(--gv-gold-grad);border-color:transparent}
.gv-px__copy svg{width:17px;height:17px}
.gv-px__copy.is-done{color:#34e39b;border-color:rgba(52,227,155,.5);background:rgba(52,227,155,.12)}
.gv-pxmore{margin-top:8px;width:100%;padding:10px;border-radius:12px;cursor:pointer;font:inherit;
  font-weight:800;color:var(--mvp-soft);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18)}
.gv-pxbox__note{margin-top:10px}

/* продление — компактно */
.gv-renew2{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.gv-renew2__title{font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mvp-muted);margin-bottom:10px}
.gv-renew2__terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gv-term{position:relative;cursor:pointer}
.gv-term input{position:absolute;opacity:0}
.gv-term span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;
  border-radius:14px;text-align:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);transition:.15s}
.gv-term b{font-size:.86rem;font-weight:800}
.gv-term i{font-style:normal;font-size:.95rem;font-weight:900;color:var(--mvp-cyan)}
.gv-term input:checked + span{border-color:rgba(246,196,84,.8);background:rgba(246,196,84,.10);
  box-shadow:0 0 18px rgba(246,196,84,.18)}
.gv-term input:checked + span i{background-image:var(--gv-gold-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.gv-term input:focus-visible + span{box-shadow:0 0 0 3px rgba(24,226,255,.35)}
.gv-renew2__pay{display:flex;align-items:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}
.gv-paysel{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;min-width:0}
.gv-paysel span{font-size:.74rem;font-weight:800;color:var(--mvp-muted)}
.gv-paysel select{appearance:none;-webkit-appearance:none;width:100%;padding:12px 40px 12px 14px;
  border-radius:14px;font:inherit;font-weight:700;color:#fff;background-color:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#a9b7d0 50%),linear-gradient(135deg,#a9b7d0 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.gv-paysel select:focus{outline:none;border-color:rgba(24,226,255,.6)}
.gv-paysel option{background:#0b1630;color:#fff}
.gv-renew2__pay .mvp-btn{flex:0 0 auto;min-height:46px}

@container (max-width:640px){
  .gv-pack{padding:18px 14px 16px}
  .gv-pack__head{grid-template-columns:1fr;justify-items:center;text-align:center}
  .gv-pack__title,.gv-pack__meta{justify-content:center}
  .gv-pack__term{width:100%}
  .gv-pxtools{justify-content:center}
  .gv-pxtools__acts{margin-left:0;width:100%}
  .gv-pxtools__acts .gv-pxbtn{flex:1;justify-content:center}
  .gv-px{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px}
  .gv-px__auth{grid-column:2 / 3;flex-direction:row;gap:12px}
  .gv-px__copy{grid-row:1 / span 2;grid-column:3}
  .gv-renew2__terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-renew2__pay .mvp-btn{width:100%}
}

/* GRANDO Remote: полоса доверия под шапкой страницы. Раньше стояла вплотную
   (padding-top:0), а со световой линией на стыке карточки упирались прямо в
   неё. Даём воздух, и линия остаётся одна — по низу шапки */

.mvp-section--flat:before{display:none}


/* название страны в плитке — в одну строку: «United / States» читалось плохо */

/* «Общие / Выделенные» — две карточки-переключателя */
.gv-kindcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 10px}
.gv-kindcard{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:20px;
  text-decoration:none;color:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  transition:border-color .15s,box-shadow .15s,transform .15s}
.gv-kindcard:hover{transform:translateY(-2px);border-color:rgba(24,226,255,.45)}
.gv-kindcard__icon{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:1.3rem;background:rgba(24,226,255,.12)}
.gv-kindcard.is-gold .gv-kindcard__icon{background:var(--gv-gold-grad)}
.gv-kindcard__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.gv-kindcard__body b{font-size:1.05rem;font-weight:900}
.gv-kindcard__body span{font-size:.9rem;line-height:1.4;color:var(--mvp-muted)}
.gv-kindcard.is-on{border-color:rgba(24,226,255,.7);box-shadow:0 0 0 1px rgba(24,226,255,.25),0 10px 30px rgba(24,226,255,.12)}
.gv-kindcard.is-gold.is-on{border-color:rgba(246,196,84,.8);box-shadow:0 0 0 1px rgba(246,196,84,.25),0 10px 30px rgba(246,196,84,.14)}
.gv-infonote{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 14px;border-radius:14px;
  font-size:.86rem;line-height:1.45;color:var(--mvp-muted);background:rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.14)}
.gv-infonote > span:first-child{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:900;color:#2a1a00;background:var(--gv-gold-grad)}
@media (max-width:680px){
  .gv-kindcards{grid-template-columns:1fr}
  .gv-kindcard{align-items:center;text-align:left}
}

/* GRANDO Remote на телефоне: «Все · Общие · Выделенные» — ровным рядом из
   трёх на всю ширину, а не двумя строками; порядок по цене — под ними */
@media (max-width:680px){
  .mvp-main .mvp-section > .mvp-container > h2{text-align:center}
}

/* ===================================================== GRANDO Remote: выбор
   Полоса доверия — дальше от линии под шапкой страницы */
.mvp-section--flat{padding-top:64px}
@media (max-width:680px){.mvp-section--flat{padding-top:40px}}

/* Табло стран: строка на дата-центр, от самой дешёвой. Огонёк — есть в
   наличии; выбранная строка подсвечена золотом */
.gv-board__title{margin:30px 0 12px;font-size:1.05rem;font-weight:900;color:var(--mvp-soft)}
.gv-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-bottom:26px}
.gv-board__row{display:grid;grid-template-columns:10px 44px minmax(0,1fr) auto auto;align-items:center;gap:14px;
  padding:13px 18px;border-radius:16px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  transition:border-color .15s,background .15s}
.gv-board__row[hidden]{display:none}
.gv-board__row:hover{border-color:rgba(24,226,255,.35);background:rgba(24,226,255,.05)}
.gv-board__row:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:2px}
.gv-board__led{width:8px;height:8px;border-radius:50%;background:#34e39b;box-shadow:0 0 8px rgba(52,227,155,.8)}
.gv-board__cc{display:grid;place-items:center;height:28px;border-radius:8px;font-size:.78rem;font-weight:900;
  letter-spacing:.04em;background:rgba(255,255,255,.08);color:#fff}
.gv-board__name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-board__count{font-size:.84rem;color:var(--mvp-muted);white-space:nowrap}
.gv-board__price{min-width:92px;text-align:right;font-weight:900;font-size:1.02rem;color:var(--mvp-cyan);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gv-board__price small{font-size:.74rem;font-weight:700;color:var(--mvp-muted)}
.gv-board__row.is-on{background:linear-gradient(90deg,rgba(246,196,84,.14),rgba(246,196,84,.03) 70%);
  border-color:rgba(246,196,84,.55);box-shadow:inset 3px 0 0 var(--gv-gold),0 10px 30px rgba(246,196,84,.08)}
.gv-board__row.is-on .gv-board__led{background:var(--gv-gold);box-shadow:0 0 10px rgba(246,196,84,.9)}
.gv-board__row.is-on .gv-board__cc{background:var(--gv-gold-grad);color:#2a1a00}
.gv-board__row.is-on .gv-board__price .gv-tile__note{background-image:var(--gv-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Тип сервера — три карточки-переключателя (вместо «таблеток» + пояснений) */
.gv-kindcards{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 14px}
.gv-kindcard__body b{display:flex;align-items:center;gap:8px}
.gv-kindcard__body b em{font-style:normal;font-size:.74rem;font-weight:900;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.1);color:var(--mvp-soft)}
.gv-kindcard.is-on b em{background:rgba(24,226,255,.22);color:#fff}
.gv-kindcard.is-gold.is-on b em{background:var(--gv-gold-grad);color:#2a1a00}

/* Над таблицей: примечание слева, порядок по цене справа */
.gv-tablebar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px}
.gv-tablebar .gv-infonote{margin:0;flex:1 1 auto;max-width:720px}
.gv-sortswitch{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:14px;flex:0 0 auto;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.gv-sortswitch__label{padding:0 8px 0 10px;font-size:.84rem;font-weight:700;color:var(--mvp-muted)}
.gv-sortswitch__opt{padding:8px 12px;border-radius:10px;font-size:.86rem;font-weight:800;color:var(--mvp-muted);
  text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.gv-sortswitch__opt:hover{color:#fff}
.gv-sortswitch__opt.is-on{color:#fff;background:rgba(24,226,255,.12);box-shadow:inset 0 -2px 0 var(--mvp-cyan)}

@media (max-width:1020px){
  .gv-kindcards{grid-template-columns:1fr}
}
@media (max-width:900px){
  .gv-board{grid-template-columns:1fr}
  .gv-tablebar{flex-direction:column;align-items:stretch}
  .gv-sortswitch{justify-content:center}
}
@media (max-width:680px){
  .gv-board__title{text-align:center}
  .gv-board__row{grid-template-columns:8px 38px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  .gv-board__count{display:none}
  .gv-sortswitch__label{display:none}
  .gv-sortswitch__opt{flex:1;text-align:center}
}

/* GRANDO Remote на телефоне: группы тарифов — ровным рядом из трёх плиток,
   без пояснений (их повторяет примечание ниже), чтобы до таблицы не листать
   три высокие карточки */
@media (max-width:680px){
  .gv-kindcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .gv-kindcard{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px 6px}
  .gv-kindcard:hover{transform:none}
  .gv-kindcard__icon{width:36px;height:36px;font-size:1.05rem;border-radius:12px}
  .gv-kindcard__body > span{display:none}
  .gv-kindcard__body b{flex-direction:column;gap:5px;font-size:.86rem;line-height:1.15}
}

/* ---------------------------------------------- шапка кабинета: выпадающие списки
   Тот же вид, что у списков в шапке сайта. На широком экране раскрываются
   при наведении и с клавиатуры (по фокусу). В меню под бургером подпункты
   видны сразу, с отступом под своим разделом: места там хватает, а лишний
   тап, чтобы раскрыть список, только мешает. */
.gv-dd{position:relative}
.gv-dd:before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.gv-nav a.gv-dd__top{display:inline-flex;align-items:center;gap:.35rem}
.gv-nav a.gv-dd__top:after{content:"";width:7px;height:7px;margin-top:-4px;opacity:.8;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.gv-dd__menu{position:absolute;top:calc(100% + 12px);left:0;z-index:1002;min-width:240px;
  display:flex;flex-direction:column;gap:2px;padding:10px;background:#0d1832;
  border:1px solid var(--mvp-line);border-radius:20px;box-shadow:var(--mvp-shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease}
.gv-dd:hover .gv-dd__menu,.gv-dd:focus-within .gv-dd__menu{opacity:1;visibility:visible;transform:none}
.gv-nav .gv-dd__menu a{border-radius:14px;padding:10px 12px}
@media (max-width:1180px){
  .gv-dd:before,.gv-nav a.gv-dd__top:after{display:none}
  .gv-nav a.gv-dd__top{display:flex}
  .gv-dd__menu{position:static;min-width:0;padding:0 0 6px 14px;background:none;border:0;
    border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .gv-nav .gv-dd__menu a{padding:9px 14px;font-size:.94rem;color:var(--mvp-soft)}
}
@media (max-width:1400px){
  .mvp-header.is-signed .gv-dd:before,.mvp-header.is-signed .gv-nav a.gv-dd__top:after{display:none}
  .mvp-header.is-signed .gv-nav a.gv-dd__top{display:flex}
  .mvp-header.is-signed .gv-dd__menu{position:static;min-width:0;padding:0 0 6px 14px;background:none;
    border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .mvp-header.is-signed .gv-nav .gv-dd__menu a{padding:9px 14px;font-size:.94rem;color:var(--mvp-soft)}
}

/* Меню под бургером у вошедшего: сначала его пункты — баланс, уведомления,
   приглашения, — под чертой разделы сайта. Разделы с подпунктами длинные,
   и раньше до баланса приходилось листать, а черта висела над пустотой. */
@media (max-width:1180px){.gv-nav__sections.is-split{order:2}}
@media (max-width:1400px){.mvp-header.is-signed .gv-nav__sections.is-split{order:2}}

/* Меню кабинета — посередине шапки, как на сайте. Ровно по центру страницы
   оно встаёт, где хватает места: у гостя от 1200px, у вошедшего от 1600px
   (справа у него ещё баланс и колокольчик). Уже этого — на равном
   расстоянии от логотипа и от правой группы, без наложений.
   «Админка» в ряду шапки не нужна: тот же пункт есть в боковом меню
   кабинета, а в ряду он съедал место и прижимал меню к балансу. В меню
   под бургером она остаётся. */
@media (min-width:1400.02px){.mvp-header.is-signed .gv-nav a.gv-nav__admin{display:none}}
@media (min-width:1180.02px){
  .mvp-header:not(.is-signed) .gv-nav{flex:1 1 auto}
  .mvp-header:not(.is-signed) .gv-nav__sections{margin-inline:auto}
}
@media (min-width:1400.02px){
  .mvp-header.is-signed .gv-nav{flex:1 1 auto}
  .mvp-header.is-signed .gv-nav__sections{margin-inline:auto}
}
@media (min-width:1200px){
  .mvp-header:not(.is-signed) .mvp-header__inner{position:relative}
  .mvp-header:not(.is-signed) .gv-nav{justify-content:flex-end}
  .mvp-header:not(.is-signed) .gv-nav__sections{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);margin:0}
}
@media (min-width:1600px){
  .mvp-header.is-signed .mvp-header__inner{position:relative}
  /* меню вынуто из ряда — баланс и колокольчик прижимаем к правой группе */
  .mvp-header.is-signed .gv-nav{justify-content:flex-end}
  .mvp-header.is-signed .gv-nav__sections{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);margin:0}
}

/* Витрина VPN: тариф один для обоих видов конфига, поэтому в карточке две
   строки — «свои устройства» и «свой сервер», у каждой свой трафик и цена.
   Кнопка прижата к низу, чтобы в ряду карточек кнопки стояли на одной линии. */
.gv-vtier{display:flex;flex-direction:column}
.gv-vtier h3{margin:0 0 4px}
.gv-vtier .mvp-check-list{margin:8px 0 16px}
.gv-vtier__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:8px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.gv-vtier__row span{display:grid;gap:2px;font-weight:800}
.gv-vtier__row small{font-size:.8rem;font-weight:600;color:var(--mvp-muted)}
.gv-vtier__row b{font-size:1.4rem;font-weight:900;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.gv-vtier__row b small{margin-left:4px;font-size:.76rem}
.gv-vtier.is-featured .gv-vtier__row b{background-image:var(--gv-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-vtier.is-featured .gv-vtier__row b small{-webkit-text-fill-color:var(--mvp-muted)}
.gv-vtier .mvp-btn{width:100%;margin-top:auto}
.gv-vtier .gv-vtier__row:last-of-type{margin-bottom:18px}

/* на телефоне общее правило центрует текст карточек — в строке тарифа подпись
   слева, цена справа, иначе строка читается как две отдельные надписи */
.gv-vtier__row span{text-align:left;justify-items:start}

/* ---------------------------------------------- админка: каркас с меню слева
   Меню — отдельная колонка, контент рядом. Полоса шире обычной страницы:
   таблицы клиентов и заказов в админке широкие, а колонка меню съедает
   ещё 260px. На узком экране меню сворачивается в кнопку над страницей. */
.gv-main--admin{width:min(100% - 40px,1480px);margin-inline:auto}
.gv-ashell{display:grid;grid-template-columns:256px minmax(0,1fr);gap:28px;align-items:start}
.gv-ashell__main{min-width:0}
.gv-ashell__side{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto}
.gv-anav{padding:10px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid var(--mvp-line)}
.gv-anav__toggle{display:none}
.gv-anav__group{display:grid;gap:1px;padding:4px 0}
.gv-anav__group + .gv-anav__group{margin-top:2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.gv-anav__label{padding:2px 12px 4px;font-size:.76rem;font-weight:800;color:var(--mvp-muted)}
.gv-anav__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
  color:#d7e3f9;font-weight:760;font-size:.9rem;line-height:1.2;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.gv-anav__item > span{flex:0 0 20px;text-align:center}
.gv-anav__item:hover{background:rgba(24,226,255,.08);color:#fff}
.gv-anav__item.is-here{background:rgba(24,226,255,.14);color:#fff;box-shadow:inset 3px 0 0 var(--mvp-cyan)}
.gv-anav__item:focus-visible,.gv-anav__toggle:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:2px}
.gv-anav__badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  display:inline-grid;place-items:center;font-size:.74rem;font-weight:900;color:#2a1a00;
  background:var(--gv-gold-grad);box-shadow:0 0 12px rgba(246,196,84,.35)}
.gv-anav__badge.is-warn{color:#fff;background:var(--mvp-danger);box-shadow:none}
@media (max-width:1100px){
  .gv-ashell{grid-template-columns:minmax(0,1fr);gap:16px}
  .gv-ashell__side{position:static;max-height:none;overflow:visible}
  .gv-anav{padding:6px}
  .gv-anav__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;border:0;border-radius:14px;background:none;color:#fff;font:inherit;
    font-weight:800;cursor:pointer}
  .gv-anav__toggle .gv-anav__badge{margin-left:0}
  .gv-anav__list{display:none;padding:4px 4px 6px}
  .gv-anav.is-open .gv-anav__list{display:block}
}

/* «всё выдано» вместо пропавшего блока: пустая очередь — тоже ответ */
.gv-allclear{margin:0 0 22px;padding:12px 16px;border-radius:14px;font-weight:700;color:#7ff0c0;background:rgba(52,227,155,.08);border:1px solid rgba(52,227,155,.25)}

/* карточка клиента: что ждёт выдачи — первой строкой, со ссылками к заказам */
.gv-waitbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 22px;padding:12px 16px;border-radius:16px;background:rgba(246,196,84,.08);border:1px solid rgba(246,196,84,.4)}
.gv-waitbar b{color:var(--gv-gold);margin-right:4px}
/* к заказу по ссылке — не под липкую шапку */
.gv-ordercard{scroll-margin-top:110px}

/* ===================================================== плитки: серверы и VPN
   Одна «семья» для «Моих серверов» и вкладки VPN, в духе карточки прокси:
   значок в своём цвете (система машины, металл тарифа), имя, состояние
   точкой; два подписанных поля; срок полосой. Цвет состояния — тоном:
   tone-ok работает, tone-wait готовится или ждёт оплаты, tone-bad срок
   вышел или сбой, tone-off возвращён, отменён. Две плитки в ряд, пока
   раздел шире ~700px. */
.gv-rigs{display:grid;gap:16px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.gv-rig{position:relative;padding:18px 18px 16px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);box-shadow:0 16px 44px rgba(0,0,0,.26);
  transition:border-color .18s ease}
.gv-rig:hover{border-color:rgba(255,255,255,.2)}
/* тонкая светящаяся кромка сверху — цвет состояния */
.gv-rig:before{content:"";position:absolute;left:26px;right:26px;top:-1px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--rig-edge,transparent),transparent);
  box-shadow:0 0 14px var(--rig-glow,transparent)}
.gv-rig.tone-ok{--rig-edge:#34e39b;--rig-glow:rgba(52,227,155,.45)}
.gv-rig.tone-wait{--rig-edge:#f6c454;--rig-glow:rgba(246,196,84,.45)}
.gv-rig.tone-bad{--rig-edge:#ff6b89;--rig-glow:rgba(255,107,137,.4)}
.gv-rig.tone-ok.is-soon{--rig-edge:#ff9b6b;--rig-glow:rgba(255,155,107,.45)}

.gv-rig__face{display:grid;gap:14px;cursor:pointer;list-style:none;color:inherit;text-decoration:none}
.gv-rig__face::-webkit-details-marker{display:none}
.gv-rig__face:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:6px;border-radius:14px}

.gv-rig__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.gv-rig__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  color:var(--tint,#7b8aa5);background:rgba(255,255,255,.06);
  background:color-mix(in srgb,var(--tint,#7b8aa5) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint,#7b8aa5) 34%,transparent)}
.gv-rig__icon svg{width:19px;height:19px}
.gv-rig__name{display:flex;flex-direction:column;gap:3px;min-width:0}
.gv-rig__name b{font-size:1.12rem;font-weight:900;color:#fff;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-rig__name i{font-style:normal;font-size:.8rem;font-weight:700;color:var(--mvp-muted);line-height:1.3}
/* у конфига имя — металл тарифа: «Золото» золотом, «Платина» холодным */
.gv-rig--vpn .gv-rig__name b{color:var(--tint)}
.gv-rig__qty{color:#fff;font-weight:900}

.gv-rig__state{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  font-size:.78rem;font-weight:800;white-space:nowrap;
  background:rgba(255,255,255,.07);color:var(--mvp-soft)}
.gv-rig__state:before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor}
.gv-rig.tone-ok .gv-rig__state{background:rgba(52,227,155,.12);color:#34e39b}
.gv-rig.tone-ok .gv-rig__state:before{box-shadow:0 0 8px currentColor}
.gv-rig.tone-wait .gv-rig__state{background:rgba(246,196,84,.12);color:var(--gv-gold)}
.gv-rig.tone-wait .gv-rig__state:before{animation:gv-rig-blink 1.4s ease-in-out infinite}
.gv-rig.tone-bad .gv-rig__state{background:rgba(255,107,137,.12);color:#ff6b89}
@keyframes gv-rig-blink{50%{opacity:.25}}

/* два подписанных поля в одной подложке */
.gv-rig__facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-radius:16px;background:rgba(5,10,24,.38);border:1px solid rgba(255,255,255,.06)}
.gv-rig__fact{display:flex;flex-direction:column;gap:5px;padding:11px 14px;min-width:0}
.gv-rig__fact + .gv-rig__fact{border-left:1px solid rgba(255,255,255,.06)}
.gv-rig__fact small{font-size:.72rem;font-weight:700;color:var(--mvp-muted)}
.gv-rig__fact > span{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;
  font-size:.9rem;font-weight:700;color:var(--mvp-text)}
.gv-rig__fact .gv-cc{height:20px;min-width:28px;padding:0 6px;font-size:.7rem;border-radius:6px}
.gv-rig__fact code{font-size:.92rem;color:var(--mvp-cyan);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-rig__fact b{color:#fff;font-weight:900}
.gv-rig__fact em{font-style:normal;font-size:.8rem;font-weight:600;color:var(--mvp-muted)}

/* срок: дата и остаток строкой, под ними полоса */
.gv-rig__term{display:grid;gap:7px}
.gv-rig__termrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:.84rem;color:var(--mvp-muted);font-variant-numeric:tabular-nums}
.gv-rig__termrow b{color:#fff}
.gv-rig__left{font-weight:800;color:var(--mvp-soft)}
.gv-rig.is-soon .gv-rig__left,.gv-rig.tone-bad .gv-rig__left{color:#ff6b89}
.gv-rig__bar{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.gv-rig__bar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--mvp-cyan),#34e39b);box-shadow:0 0 12px rgba(24,226,255,.45)}
.gv-rig.tone-wait .gv-rig__bar i{background:linear-gradient(90deg,#f6c454,#ffe6a3);
  box-shadow:0 0 12px rgba(246,196,84,.4)}
.gv-rig.is-soon .gv-rig__bar i{background:linear-gradient(90deg,#ff6b89,#f6c454)}
/* срока ещё нет (машина готовится, счёт не оплачен) — полоса «бежит» */
.gv-rig .gv-rig__bar.is-wait i{width:100%;box-shadow:none;opacity:.55;
  background:repeating-linear-gradient(115deg,rgba(246,196,84,.5) 0 10px,rgba(246,196,84,.12) 10px 20px);
  background-size:200% 100%;animation:gv-rig-run 2.4s linear infinite}
@keyframes gv-rig-run{to{background-position:-46px 0}}
.gv-rig.is-dim .gv-rig__face > :not(.gv-rig__top):not(.gv-rig__go){opacity:.7}

/* «Управление» сервера. Фон кнопки плотный: на полупрозрачном Windows
   красит светлый жирный текст подпиксельно, и вокруг букв вылезает кайма */
.gv-rig__go{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;
  border-radius:14px;border:1px solid var(--mvp-line);background:#1d2640;
  font-size:.86rem;font-weight:800;color:#e8f0ff;transition:background .15s ease}
.gv-rig__go svg{width:12px;height:12px;transition:transform .2s ease}
.gv-rig__face:hover .gv-rig__go{background:#25304f}
.gv-rig[open]{grid-column:1 / -1;border-color:rgba(24,226,255,.38)}
.gv-rig[open] .gv-rig__go{background:#103446;border-color:rgba(24,226,255,.45);color:var(--mvp-cyan)}
.gv-rig[open] .gv-rig__go svg{transform:rotate(180deg)}
.gv-rig__body{margin-top:16px;padding-top:6px;border-top:1px solid var(--mvp-line)}

/* VPN: плитки одной высоты в ряду, кнопки прижаты к низу */
.gv-rigs--vpn{align-items:stretch}
.gv-rig--vpn{display:flex;flex-direction:column}
.gv-rig--vpn .gv-rig__face{flex:1 1 auto;align-content:start}
.gv-rig__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.gv-rig__acts > *{flex:1 1 0;min-width:max-content}
.gv-rig__acts form{display:flex}
.gv-rig__acts .mvp-btn{width:100%;justify-content:center;text-align:center;margin:0}

/* открытая плитка сервера во всю ширину: поля и срок — рядом */
@container (min-width:720px){
  .gv-rig[open] .gv-rig__face{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:22px}
  .gv-rig[open] .gv-rig__top,.gv-rig[open] .gv-rig__go{grid-column:1 / -1}
  .gv-rig[open] .gv-rig__term{align-self:center}
  .gv-rig[open] .gv-rig__go{justify-self:end;padding:8px 18px}
}
/* телефон: поля плотнее, чтобы «United States» с кодом страны влезало в строку */
@container (max-width:420px){
  .gv-rig{padding:16px 14px 14px;border-radius:22px}
  .gv-rig__top{gap:10px}
  .gv-rig__icon{width:38px;height:38px;border-radius:12px}
  .gv-rig__fact{padding:10px 11px}
  .gv-rig__fact > span{gap:4px 6px;font-size:.86rem}
  .gv-rig__fact .gv-cc{min-width:24px;padding:0 5px}
  .gv-rig__fact code{font-size:.84rem;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){
  .gv-rig__state:before,.gv-rig .gv-rig__bar.is-wait i{animation:none!important}
}

/* ===================================================== страница «Баланс»
   Слева кошелёк — тёмная металлическая карта с золотой кромкой (золото
   логотипа), справа пополнение с быстрыми суммами. Ниже — ждущие оплаты
   пополнения и выписка одним листом по месяцам. */
.gv-purse{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:18px;align-items:stretch}
.gv-purse__card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:226px;padding:24px 26px 22px;border-radius:26px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(246,196,84,.17),transparent 55%),
    radial-gradient(90% 120% at 0% 100%,rgba(24,226,255,.10),transparent 60%),
    linear-gradient(155deg,#151d35,#0a1022 58%,#0e1529);
  border:1px solid rgba(246,196,84,.36);
  box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,236,190,.14)}
/* тонкая гильоширная сетка — фактура металла, а не просто градиент */
.gv-purse__card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 112% -18%,transparent 0 12px,rgba(246,196,84,.055) 12px 13px)}
/* один проблеск золота при открытии страницы — и всё */
.gv-purse__card:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-55%;width:38%;z-index:-1;
  pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(100deg,transparent,rgba(255,230,163,.14),transparent);
  animation:gv-purse-sheen 2.4s cubic-bezier(.3,.6,.3,1) .35s 1 both}
@keyframes gv-purse-sheen{from{left:-55%}to{left:125%}}
.gv-purse__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gv-purse__brand{font-size:.8rem;font-weight:900;letter-spacing:.16em;
  background-image:var(--gv-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-purse__chip{position:relative;width:40px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,#ffe6a3,#e2ae45 55%,#c98b16);box-shadow:inset 0 0 0 1px rgba(60,35,0,.25)}
.gv-purse__chip:before,.gv-purse__chip:after{content:"";position:absolute}
.gv-purse__chip:before{left:0;right:0;top:9px;bottom:9px;
  border-top:1px solid rgba(80,50,0,.38);border-bottom:1px solid rgba(80,50,0,.38)}
.gv-purse__chip:after{top:0;bottom:0;left:14px;right:14px;
  border-left:1px solid rgba(80,50,0,.38);border-right:1px solid rgba(80,50,0,.38)}
.gv-purse__label{margin-top:auto;padding-top:22px;font-size:.88rem;font-weight:700;color:var(--mvp-muted)}
.gv-purse__sum{font-size:3.4rem;font-weight:900;line-height:1.04;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 26px rgba(246,196,84,.2)}
.gv-purse__sum small{font-size:.5em;font-weight:800;letter-spacing:0;color:rgba(255,255,255,.55)}
.gv-purse__note{margin-top:10px;font-size:.84rem;color:var(--mvp-muted)}

.gv-purse__fill{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11)}
.gv-purse__title{margin:0;font-size:1.15rem}
.gv-purse__lead{margin:-6px 0 2px;font-size:.86rem;color:var(--mvp-muted)}
.gv-purse__amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gv-purse__amount{padding:13px 4px;border-radius:14px;border:1px solid var(--mvp-line);background:#131b31;
  color:#fff;font:inherit;font-size:1rem;font-weight:900;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.gv-purse__amount:hover{border-color:rgba(246,196,84,.55);background:#1a2340;color:var(--gv-gold-hi)}
.gv-purse__amount:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:2px}
.gv-purse__other{width:100%}
.gv-purse__methods{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.gv-purse__methods span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);
  font-size:.74rem;font-weight:700;color:var(--mvp-muted)}

/* пополнения, которые ещё ждут перевода */
.gv-waitlist{display:grid;gap:8px}
.gv-waitrow{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;
  background:rgba(246,196,84,.06);border:1px solid rgba(246,196,84,.24);color:inherit;text-decoration:none;
  transition:border-color .15s ease}
.gv-waitrow:hover{border-color:rgba(246,196,84,.5)}
.gv-waitrow__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--gv-gold);
  box-shadow:0 0 10px rgba(246,196,84,.8);animation:gv-rig-blink 1.4s ease-in-out infinite}
.gv-waitrow__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gv-waitrow__main b{font-weight:850}
.gv-waitrow__main i{font-style:normal;font-size:.8rem;color:var(--mvp-muted)}
.gv-waitrow__go{flex:0 0 auto;padding:8px 15px;border-radius:999px;background:var(--gv-gold-grad);
  color:#1b1300;font-size:.82rem;font-weight:900}

/* выписка */
.gv-hist__head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 18px;
  flex-wrap:wrap;margin:32px 0 12px}
.gv-hist__head .gv-h2{margin:0}
.gv-hist__totals{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--mvp-muted)}
.gv-hist__totals b{font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.gv-hist__totals .is-plus b{color:#34e39b}
.gv-hist{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.gv-hist__month{padding:9px 18px;font-size:.78rem;font-weight:800;color:var(--mvp-muted);
  background:rgba(5,10,24,.42);border-bottom:1px solid rgba(255,255,255,.05)}
.gv-hist__month:not(:first-child){border-top:1px solid rgba(255,255,255,.06)}
.gv-txn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;row-gap:1px;
  align-items:center;padding:13px 18px}
.gv-txn + .gv-txn{border-top:1px solid rgba(255,255,255,.05)}
.gv-txn__icon{grid-column:1;grid-row:1 / 3;display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;color:var(--tint,#9fb0d0);background:rgba(255,255,255,.05);
  background:color-mix(in srgb,var(--tint,#9fb0d0) 14%,transparent)}
.gv-txn__icon svg{width:18px;height:18px}
.gv-txn--topup{--tint:#34e39b}
.gv-txn--purchase{--tint:#9fb0d0}
.gv-txn--refund{--tint:#18e2ff}
.gv-txn--referral{--tint:#f6c454}
.gv-txn--admin{--tint:#a98bff}
.gv-txn__main{grid-column:2;grid-row:1 / 3;min-width:0}
.gv-txn__main b{display:block;font-weight:850}
.gv-txn__main i{display:block;font-style:normal;font-size:.8rem;color:var(--mvp-muted);overflow-wrap:anywhere}
.gv-txn__sum{grid-column:3;grid-row:1;align-self:end;text-align:right;white-space:nowrap;
  font-size:1.02rem;font-weight:900;color:#e8f0ff;font-variant-numeric:tabular-nums}
.gv-txn__sum.is-plus{color:#34e39b}
.gv-txn__after{grid-column:3;grid-row:2;align-self:start;text-align:right;white-space:nowrap;
  font-size:.74rem;color:var(--mvp-muted);font-variant-numeric:tabular-nums}
.gv-hist--empty{display:grid;justify-items:center;gap:10px;padding:30px 20px;text-align:center}
.gv-hist--empty p{margin:0;color:var(--mvp-muted)}
.gv-hist__emptyicon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:rgba(246,196,84,.12);color:var(--gv-gold)}
.gv-hist__emptyicon svg{width:24px;height:24px}

@container (max-width:720px){
  .gv-purse{grid-template-columns:minmax(0,1fr)}
  .gv-purse__card{min-height:200px}
}
@container (max-width:420px){
  .gv-purse__card{padding:20px 20px 18px;border-radius:22px}
  .gv-purse__sum{font-size:2.8rem}
  .gv-purse__fill{padding:18px 16px;border-radius:22px}
  .gv-txn{padding:12px 14px;column-gap:12px}
  .gv-txn__icon{width:34px;height:34px;border-radius:11px}
}
@media (prefers-reduced-motion:reduce){
  .gv-purse__card:after,.gv-waitrow__dot{animation:none!important}
  .gv-purse__card:after{display:none}
}

/* ===================================================== «Платежи»
   Тот же лист, что у выписки баланса: строка — ссылка на заказ, значок и
   цвет — продукт, справа сумма и состояние. Фильтр — сегментами сверху. */
.gv-hist__head--top{margin-top:4px}
.gv-hist [hidden]{display:none!important}
a.gv-txn{color:inherit;text-decoration:none;transition:background .15s ease}
a.gv-txn:hover{background:rgba(255,255,255,.035)}
a.gv-txn:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:-2px}
.gv-txn--servers{--tint:#18e2ff}
.gv-txn--proxies{--tint:#f6c454}
.gv-txn--vpn{--tint:#a98bff}
.gv-paystate{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;background:rgba(255,255,255,.06);color:var(--mvp-muted)}
.gv-paystate:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gv-txn.is-paid .gv-paystate{background:rgba(52,227,155,.12);color:#34e39b}
.gv-txn.is-pending .gv-paystate{background:rgba(246,196,84,.13);color:var(--gv-gold)}
.gv-txn.is-pending .gv-paystate:before{animation:gv-rig-blink 1.4s ease-in-out infinite}
.gv-txn.is-refunded .gv-paystate{background:rgba(24,226,255,.1);color:var(--mvp-cyan)}
.gv-txn.is-pending .gv-txn__sum{color:var(--gv-gold-hi)}
.gv-txn.is-canceled .gv-txn__sum,.gv-txn.is-expired .gv-txn__sum{color:var(--mvp-muted);
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.gv-txn.is-canceled .gv-txn__icon,.gv-txn.is-expired .gv-txn__icon{opacity:.55}
.gv-txn__after .gv-paystate{margin-top:2px}

/* сегменты фильтра */
.gv-segs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;
  background:rgba(5,10,24,.45);border:1px solid rgba(255,255,255,.07)}
.gv-segs button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--mvp-muted);font:inherit;font-size:.84rem;font-weight:800;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.gv-segs button:hover{color:var(--mvp-text)}
.gv-segs button.is-on{background:#1d2640;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.gv-segs button:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:1px}
.gv-segs i{font-style:normal;min-width:20px;padding:1px 6px;border-radius:999px;text-align:center;
  font-size:.72rem;background:rgba(255,255,255,.07);color:var(--mvp-soft)}
.gv-segs button.is-on i{background:rgba(24,226,255,.16);color:var(--mvp-cyan)}

/* ===================================================== «Приглашения»
   Пригласительный билет: слева ссылка и кнопки отправки, справа за
   перфорацией (пунктир и два выреза) — сколько ссылка приносит. Ниже —
   три шага, итоги и начисления тем же листом, что выписка баланса. */
.gv-invite{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px;
  border-radius:26px;overflow:hidden;border:1px solid rgba(246,196,84,.34);
  background:
    radial-gradient(110% 140% at 100% 0%,rgba(246,196,84,.16),transparent 55%),
    linear-gradient(155deg,#151d35,#0a1022 60%,#0e1529);
  box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,236,190,.12)}
.gv-invite__main{display:flex;flex-direction:column;gap:14px;padding:24px 26px;min-width:0}
.gv-invite__label{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--mvp-soft)}
.gv-invite__gift{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:rgba(246,196,84,.15);color:var(--gv-gold)}
.gv-invite__gift svg{width:19px;height:19px}
.gv-invite__link{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:16px;
  background:rgba(5,10,24,.55);border:1px solid rgba(255,255,255,.08)}
.gv-invite__link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.95rem;color:#fff;letter-spacing:.01em}
.gv-invite__copy{flex:0 0 auto;margin:0}
.gv-invite__share{display:flex;flex-wrap:wrap;gap:8px}
.gv-invite__btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--mvp-line);background:#18213b;color:#e8f0ff;font:inherit;font-size:.86rem;
  font-weight:800;text-decoration:none;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.gv-invite__btn:hover{border-color:rgba(24,226,255,.45);background:#1d2846}
.gv-invite__btn svg{width:16px;height:16px;color:#2aabee}
/* корешок билета */
.gv-invite__stub{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:22px 24px;border-left:2px dashed rgba(246,196,84,.32);
  background:linear-gradient(160deg,rgba(246,196,84,.10),rgba(246,196,84,.03))}
.gv-invite__stub:before,.gv-invite__stub:after{content:"";position:absolute;left:-13px;width:24px;height:24px;
  border-radius:50%;background:var(--mvp-bg);border:1px solid rgba(246,196,84,.34)}
.gv-invite__stub:before{top:-13px}
.gv-invite__stub:after{bottom:-13px}
.gv-invite__rate{display:flex;flex-direction:column;gap:2px}
.gv-invite__rate b{font-size:2.3rem;font-weight:900;line-height:1;letter-spacing:-.02em;
  background-image:var(--gv-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-invite__rate + .gv-invite__rate b{font-size:1.7rem}
.gv-invite__rate span{font-size:.82rem;font-weight:700;color:var(--mvp-muted)}

.gv-invgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-top:8px;align-items:start}
.gv-invsteps ol{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:4px}
.gv-invsteps li{counter-increment:step;position:relative;display:grid;gap:3px;padding:12px 14px 12px 54px;
  border-radius:16px}
.gv-invsteps li:before{content:counter(step);position:absolute;left:12px;top:12px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;font-size:.86rem;font-weight:900;color:var(--gv-gold);
  background:rgba(246,196,84,.12);box-shadow:inset 0 0 0 1px rgba(246,196,84,.3)}
/* тонкая линия между номерами: шаги идут один за другим */
.gv-invsteps li:not(:last-child):after{content:"";position:absolute;left:26px;top:44px;bottom:-8px;width:1px;
  background:linear-gradient(rgba(246,196,84,.35),rgba(246,196,84,.05))}
.gv-invsteps li b{font-weight:850;color:#fff}
.gv-invsteps li span{font-size:.86rem;color:var(--mvp-muted)}
.gv-invstats{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-radius:20px;overflow:hidden;
  background:rgba(5,10,24,.38);border:1px solid rgba(255,255,255,.07)}
.gv-invstats__cell{display:flex;flex-direction:column;gap:4px;padding:18px}
.gv-invstats__cell + .gv-invstats__cell{border-left:1px solid rgba(255,255,255,.07)}
.gv-invstats__cell span{font-size:.8rem;font-weight:700;color:var(--mvp-muted)}
.gv-invstats__cell b{font-size:1.9rem;font-weight:900;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.gv-invstats__cell.is-gold b{background-image:var(--gv-gold-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}

@container (max-width:760px){
  .gv-invgrid{grid-template-columns:minmax(0,1fr)}
  .gv-invstats{margin-top:0;order:-1}
}
@container (max-width:620px){
  /* билет встаёт вертикально: корешок снизу, перфорация — поперёк */
  .gv-invite{grid-template-columns:minmax(0,1fr)}
  .gv-invite__stub{flex-direction:row;justify-content:space-around;gap:12px;padding:18px 16px;
    border-left:0;border-top:2px dashed rgba(246,196,84,.32);text-align:center}
  .gv-invite__stub:before,.gv-invite__stub:after{top:-13px;bottom:auto}
  .gv-invite__stub:before{left:-13px}
  .gv-invite__stub:after{left:auto;right:-13px}
  .gv-invite__rate{align-items:center}
  .gv-invite__rate b,.gv-invite__rate + .gv-invite__rate b{font-size:1.9rem}
}
@container (max-width:420px){
  .gv-invite__main{padding:18px 16px;gap:12px}
  .gv-invite__link{flex-wrap:wrap;padding:10px}
  .gv-invite__link code{flex:1 1 100%;white-space:normal;word-break:break-all;font-size:.86rem}
  .gv-invite__copy{width:100%}
  .gv-invite__share .gv-invite__btn{flex:1 1 auto;justify-content:center}
  /* до трёх сегментов — в один ряд, четыре — два на два */
  .gv-segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
  .gv-segs:has(> button:nth-child(4)){grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .gv-segs button{justify-content:center;padding:8px 6px}
  /* в платежах состояние — под датой, а не справа: иначе название заказа
     сжимается в столбик */
  .gv-hist--pay .gv-txn__main{grid-row:1}
  .gv-hist--pay .gv-txn__icon{grid-row:1 / 3;align-self:start}
  .gv-hist--pay .gv-txn__sum{align-self:start}
  .gv-hist--pay .gv-txn__after{grid-column:2 / 4;grid-row:2;text-align:left;margin-top:5px}
}

/* ===================================================== «Уведомления»
   Лента одним листом по дням. Смысл сообщения — значком и цветом:
   готово (зелёный), скоро срок (золото), проблема (розовый), деньги
   (мятный), событие (голубой), новости сервиса (фиолетовый). Новое —
   светящаяся кромка слева и метка у времени. */
.gv-msg{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;
  align-items:start;padding:15px 18px}
.gv-msg + .gv-msg{border-top:1px solid rgba(255,255,255,.05)}
.gv-msg.tone-ok{--tint:#34e39b}
.gv-msg.tone-wait{--tint:#f6c454}
.gv-msg.tone-bad{--tint:#ff6b89}
.gv-msg.tone-money{--tint:#3ff0b0}
.gv-msg.tone-info{--tint:#18e2ff}
.gv-msg.tone-news{--tint:#a98bff}
.gv-msg__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  color:var(--tint);background:rgba(255,255,255,.05);
  background:color-mix(in srgb,var(--tint) 14%,transparent)}
.gv-msg__icon svg{width:18px;height:18px}
.gv-msg__body{min-width:0;padding-top:1px}
.gv-msg__from{display:block;margin-bottom:3px;font-size:.76rem;font-weight:800;color:var(--tint)}
.gv-msg__text{line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--mvp-text)}
.gv-msg__text b,.gv-msg__text strong{color:#fff}
.gv-msg__text a{color:var(--mvp-cyan)}
.gv-msg__media{display:block;max-width:min(100%,520px);max-height:50vh;margin-top:10px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08)}
.gv-msg__side{display:flex;align-items:center;gap:8px;padding-top:2px;white-space:nowrap}
.gv-msg__side time{font-size:.8rem;color:var(--mvp-muted);font-variant-numeric:tabular-nums}
.gv-msg__new{padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:900;
  background:rgba(24,226,255,.14);color:var(--mvp-cyan)}
.gv-msg__tg{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(42,171,238,.14);color:#2aabee}
.gv-msg__tg svg{width:11px;height:11px}
.gv-msg.is-new{background:linear-gradient(90deg,rgba(24,226,255,.07),transparent 60%)}
.gv-msg.is-new:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
  background:var(--mvp-cyan);box-shadow:0 0 12px rgba(24,226,255,.7)}
.gv-hist__totals .is-new b{color:var(--mvp-cyan)}
.gv-hist__emptyicon--cyan{background:rgba(24,226,255,.12);color:var(--mvp-cyan)}
.gv-hist--empty p b{color:var(--mvp-text)}
@container (max-width:420px){
  .gv-msg{padding:13px 14px;column-gap:12px}
  .gv-msg__icon{width:34px;height:34px;border-radius:11px}
  /* время — над текстом справа, чтобы текст шёл во всю ширину */
  .gv-msg{grid-template-columns:auto minmax(0,1fr)}
  .gv-msg__side{grid-column:2;grid-row:1;justify-content:flex-end;margin-bottom:4px}
  .gv-msg__body{grid-column:2;grid-row:2}
  .gv-msg__icon{grid-row:1 / 3}
}

/* ===================================================== баннер с промокодом
   Золотом, как кошелёк и приглашения: деньги в кабинете — золото. Подарок,
   заголовок и условия; справа код в «купоне» с пунктиром и «Скопировать». */
.gv-promo{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  margin-bottom:22px;padding:16px 52px 16px 18px;border-radius:20px;border:1px solid rgba(246,196,84,.34);
  background:radial-gradient(120% 160% at 100% 0%,rgba(246,196,84,.16),transparent 60%),
             linear-gradient(155deg,#151d35,#0a1022 60%,#0e1529);
  box-shadow:0 18px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,236,190,.1)}
.gv-promo[hidden]{display:none}
.gv-promo__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:rgba(246,196,84,.15);color:var(--gv-gold)}
.gv-promo__icon svg{width:22px;height:22px}
.gv-promo__text{min-width:0}
.gv-promo__text b{display:block;font-size:1.08rem;font-weight:900;color:#fff}
.gv-promo__text span{display:block;margin-top:2px;font-size:.88rem;color:var(--mvp-soft)}
.gv-promo__code{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:14px;
  border:1.5px dashed rgba(246,196,84,.55);background:rgba(5,10,24,.5)}
.gv-promo__code code{font:800 1.02rem ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--gv-gold-hi)}
.gv-promo__copy{padding:8px 13px;border:0;border-radius:10px;background:var(--gv-gold-grad);color:#1b1300;
  font:inherit;font-size:.82rem;font-weight:900;cursor:pointer}
.gv-promo__copy:hover{filter:brightness(1.07)}
.gv-promo__x{position:absolute;right:12px;top:12px;width:30px;height:30px;border:0;border-radius:9px;
  background:transparent;color:var(--mvp-muted);font-size:1.3rem;line-height:1;cursor:pointer}
.gv-promo__x:hover{background:rgba(255,255,255,.07);color:#fff}
@container (max-width:620px){
  .gv-promo{grid-template-columns:auto minmax(0,1fr);padding:14px 44px 14px 14px}
  .gv-promo__code{grid-column:1 / -1;justify-content:space-between}
}
/* галочки в формах админки и свёрнутая правка промокода */
.gv-formfield--check{flex-direction:row !important;align-items:center;gap:10px;align-self:end;min-height:46px}
.gv-formfield--check input{width:18px;height:18px;accent-color:#f6c454}
.gv-promoedit td{padding-top:0 !important;border-top:0 !important}
.gv-promoedit summary{cursor:pointer;font-size:.84rem;font-weight:700;color:var(--mvp-muted)}
.gv-promoedit summary:hover{color:var(--mvp-text)}
.gv-promoedit form{margin-top:12px}
.gv-promo--preview{margin-bottom:18px;padding-right:18px}
.gv-promo--preview .gv-promo__icon{font-size:1.3rem}

/* ===================================================== шапка кабинета как у сайта
   Шапка кабинета и админки — того же вида, что на сайте (mvp-header--site
   в style.css): разделы узким шрифтом заглавными, светлая плашка языка,
   золотая кнопка кабинета. Здесь — только пункты, которые есть лишь в
   шапке приложения: ссылки .gv-nav, выпадающие списки, баланс и колокольчик. */
.mvp-header--site .gv-nav__sections > a,.mvp-header--site .gv-nav a.gv-dd__top,
.mvp-header--site .gv-nav > a{border-radius:6px;padding:10px 14px;
  font:600 15px/1 Oswald,"Arial Narrow",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#dcdad4}
.mvp-header--site .gv-nav__sections > a:hover,.mvp-header--site .gv-nav a.gv-dd__top:hover,
.mvp-header--site .gv-nav > a:hover{background:rgba(255,255,255,.08);color:#fff}
/* подложку списка не трогаем: в меню телефона её быть не должно */
.mvp-header--site .gv-dd__menu{border-radius:12px;border-color:rgba(238,235,228,.1)}
.mvp-header--site .gv-nav .gv-dd__menu a{border-radius:8px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.3;
  letter-spacing:0;text-transform:none;color:#d6d3cc}
.mvp-header--site .gv-nav .gv-dd__menu a:hover{background:rgba(255,255,255,.06);color:#fff}
/* баланс в шапке — золотом, как деньги везде в кабинете */
.mvp-header--site .gv-nav a.gv-nav__balance{color:#f6c454;letter-spacing:.04em}
.mvp-header--site .gv-nav a.gv-nav__balance:hover{background:rgba(246,196,84,.1);color:#ffe6a3}
.mvp-header--site .gv-nav a.gv-nav__admin{color:var(--mvp-warning)}
/* кнопка «Личный кабинет» — та же золотая, что на сайте */
.mvp-header--site .mvp-header__inner > .gv-nav__go{min-height:42px;padding:0 18px;border:0;border-radius:6px;box-shadow:none;
  background:linear-gradient(135deg,#ffe6a3 0%,#f6c454 45%,#c98b16 100%);color:#1b1300;
  font:600 14px/1 Oswald,"Arial Narrow",sans-serif;letter-spacing:.07em;text-transform:uppercase}
.mvp-header--site .mvp-header__inner > .gv-nav__go:hover{transform:none;box-shadow:none;filter:brightness(1.07)}
.mvp-header--site .gv-burger{border-radius:6px}
@media (max-width:560px){
  .mvp-header--site .mvp-header__inner > .gv-nav__go{min-height:38px;padding:0 13px;font-size:13px}
}

/* ===================================================== раздел «API»
   Новый ключ — золотой плашкой (показывается один раз), список ключей —
   листом, как выписка; документация — таблица запросов и примеры. */
.gv-apikey{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;margin-bottom:22px;padding:18px 20px;
  border-radius:20px;border:1px solid rgba(246,196,84,.4);
  background:radial-gradient(120% 160% at 100% 0%,rgba(246,196,84,.16),transparent 60%),linear-gradient(155deg,#151d35,#0a1022 60%,#0e1529)}
.gv-apikey__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(246,196,84,.15);color:var(--gv-gold)}
.gv-apikey__icon svg{width:22px;height:22px}
.gv-apikey__body{min-width:0}
.gv-apikey__body > b{display:block;font-size:1.08rem;font-weight:900;color:#fff}
.gv-apikey__body > span{display:block;margin-top:2px;font-size:.88rem;color:var(--mvp-soft)}
.gv-apikey__value{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 8px 8px 14px;border-radius:12px;
  border:1.5px dashed rgba(246,196,84,.55);background:rgba(5,10,24,.55)}
.gv-apikey__value code{flex:1;min-width:0;overflow-wrap:anywhere;font:700 .92rem ui-monospace,Consolas,monospace;color:var(--gv-gold-hi)}
.gv-apikey__value .mvp-btn{flex:0 0 auto;margin:0}
.gv-apikey__prefix{margin-left:6px;font:600 .82rem ui-monospace,Consolas,monospace;color:var(--mvp-muted)}
.gv-apikey__revoke{grid-column:3;grid-row:1 / 3;margin:0}
.gv-apikey__new{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.gv-apikey__new input{flex:1 1 260px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--mvp-line);
  background:rgba(5,10,24,.5);color:var(--mvp-text);font:inherit}
.gv-apikey__new .mvp-btn{margin:0}
.gv-apikey__new .mvp-btn[disabled]{opacity:.45;cursor:not-allowed}

.gv-apidoc{padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--mvp-soft);font-size:.94rem}
.gv-apidoc p{margin:0 0 14px;line-height:1.65}
.gv-apidoc h3{margin:22px 0 10px;font-size:1.02rem;color:#fff}
.gv-apidoc code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.06);font:600 .86rem ui-monospace,Consolas,monospace;color:#e6ecfb}
.gv-apidoc pre{margin:0 0 12px;padding:14px 16px;border-radius:14px;background:#070b16;border:1px solid rgba(255,255,255,.07);overflow-x:auto}
.gv-apidoc pre code{padding:0;background:none;font-size:.84rem;line-height:1.6;color:#cfe3ff}
.gv-apidoc__table{display:grid;margin:4px 0 6px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.gv-apidoc__row{display:grid;grid-template-columns:62px minmax(0,230px) minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px}
.gv-apidoc__row + .gv-apidoc__row{border-top:1px solid rgba(255,255,255,.05)}
.gv-apidoc__row code{background:none;padding:0;color:#fff;overflow-wrap:anywhere}
.gv-apidoc__m{justify-self:start;padding:3px 8px;border-radius:6px;font:800 .7rem ui-monospace,Consolas,monospace;letter-spacing:.04em}
.gv-apidoc__m--get{background:rgba(24,226,255,.12);color:var(--mvp-cyan)}
.gv-apidoc__m--post{background:rgba(52,227,155,.12);color:#34e39b}
@container (max-width:620px){
  .gv-apidoc{padding:16px}
  .gv-apidoc__row{grid-template-columns:52px minmax(0,1fr)}
  .gv-apidoc__row > span:last-child{grid-column:1 / -1}
  .gv-apikey__value{flex-wrap:wrap}
  .gv-apikey__value .mvp-btn{width:100%}
}

/* автопродление прокси — строка с переключателем под формой продления */
.gv-autorenew{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
  padding:12px 14px;border-radius:14px;background:rgba(5,10,24,.4);border:1px solid rgba(255,255,255,.07)}
.gv-autorenew.is-on{border-color:rgba(52,227,155,.35);background:rgba(52,227,155,.06)}
.gv-autorenew__text b{display:block;font-weight:850;color:#fff}
.gv-autorenew__text i{display:block;margin-top:2px;font-style:normal;font-size:.82rem;color:var(--mvp-muted)}
.gv-switch{position:relative;flex:0 0 auto;width:46px;height:26px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);transition:background .15s ease}
.gv-switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease}
.gv-autorenew.is-on .gv-switch{background:#34e39b;box-shadow:0 0 12px rgba(52,227,155,.45)}
.gv-autorenew.is-on .gv-switch i{left:23px}
.gv-switch:focus-visible{outline:2px solid var(--mvp-cyan);outline-offset:2px}
/* итог промокода в админке: выручка крупно, под ней скидка и повторные */
.gv-promostat b{color:#34e39b;font-weight:900}
.gv-promostat span{display:block;font-size:.8rem;color:var(--mvp-muted);white-space:nowrap}

/* ---------- маржа и прибыль (админка) */
.gv-mcfg{margin-bottom:22px;padding:16px 20px}
.gv-mcfg summary{display:flex;justify-content:space-between;gap:14px;align-items:center;
  cursor:pointer;list-style:none;color:var(--mvp-soft);font-size:.92rem}
.gv-mcfg summary::-webkit-details-marker{display:none}
.gv-mcfg summary b{color:var(--mvp-text)}
.gv-mcfg__edit{flex:none;color:var(--mvp-cyan);font-weight:800;font-size:.85rem}
.gv-mcfg[open] .gv-mcfg__edit{opacity:.5}
.gv-mcfg form{margin:16px 0 12px}
.gv-mval.is-pos{color:#34e39b}
.gv-mval.is-neg{color:var(--mvp-danger)}
.gv-mtable td{font-variant-numeric:tabular-nums}
.gv-mtable tr.is-open td{background:rgba(24,226,255,.06)}
.gv-mtable tr.is-dim td{opacity:.55}
.gv-mtable td.gv-mserv{min-width:230px}
.gv-mdue{font-size:.8rem;color:var(--mvp-muted);font-weight:700;white-space:nowrap}
.gv-mtable tr.is-late .gv-mdue{color:var(--mvp-danger)}
.gv-mtable tr.is-soon .gv-mdue{color:var(--mvp-warning)}
.gv-mbar{display:block;width:90px;height:4px;margin-top:6px;border-radius:4px;
  background:rgba(255,255,255,.07);overflow:hidden}
.gv-mbar i{display:block;height:100%;background:#34e39b;border-radius:4px}
.gv-mbar.is-neg i{background:var(--mvp-danger)}
.gv-mlink{font-weight:800;font-size:.85rem;white-space:nowrap}
.gv-mip{display:block;width:max-content;margin:0 0 3px}
.gv-mkind{display:inline-block;padding:.12rem .45rem;margin-right:.35rem;border-radius:999px;
  font-size:.72rem;font-weight:850;background:rgba(24,226,255,.14);color:var(--mvp-cyan)}
.gv-mkind--servers{background:rgba(124,92,255,.18);color:#c2b2ff}
.gv-mkind--proxies{background:rgba(246,196,84,.16);color:var(--gv-gold)}
.gv-mfilters{display:grid;gap:10px;margin:-6px 0 20px}
.gv-mfilters .gv-chips{align-items:center}
.gv-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:900px){.gv-mgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gv-mgrid{grid-template-columns:1fr}}
.gv-msum{display:grid;gap:6px;align-content:start;padding:16px 18px;font-size:.88rem;color:var(--mvp-soft)}
.gv-msum>b{color:var(--mvp-text);font-size:1rem}
.gv-calc{display:grid;gap:16px;margin-bottom:26px}
.gv-calc [hidden]{display:none}
.gv-calc__in{display:flex;gap:14px;flex-wrap:wrap}
.gv-calc__in .gv-formfield{flex:1 1 160px}
.gv-calc__presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gv-calc__presets .gv-chip{cursor:pointer;font:inherit;font-size:.82rem;background:transparent;color:var(--mvp-soft)}
.gv-calc__out{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:900px){.gv-calc__out{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.gv-calc__out{grid-template-columns:repeat(2,1fr)}}
.gv-calc__out div{padding:12px 14px;border:1px solid var(--mvp-line);border-radius:14px;
  background:rgba(255,255,255,.03)}
.gv-calc__out span{display:block;color:var(--mvp-muted);font-size:.78rem;font-weight:760}
.gv-calc__out b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.gv-calc__out b.is-pos{color:#34e39b}
.gv-calc__out b.is-neg{color:var(--mvp-danger)}
.gv-mline{padding:0;margin-bottom:14px;overflow:hidden}
.gv-mline summary{padding:14px 18px;cursor:pointer}
.gv-mline .gv-tablewrap{border:0;border-top:1px solid var(--mvp-line);border-radius:0}

/* Повышение тарифа и смена протокола (vpn_change.html), выбор протокола в
   форме заказа. Плитки — те же .gv-term, что у сроков продления прокси */
.gv-change__grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gv-term small{font-size:.72rem;font-weight:700;color:var(--mvp-muted);min-height:1em}
.gv-term.is-off{cursor:not-allowed}
.gv-term.is-off span{opacity:.45}
.gv-change__calc{display:block;margin-top:2px;font-size:.8rem;font-weight:700;color:var(--mvp-muted)}
.gv-protopick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gv-protopick .gv-term span{padding:9px 6px}
/* на карточке конфига — третья строка действий: повысить и сменить протокол */
.gv-rig__acts--more{margin-top:8px}
.gv-rig__acts--more .mvp-btn{font-size:.8rem}
/* бесплатная смена протокола: способ оплаты не нужен — display:grid у
   .gv-methods иначе перебивает атрибут hidden */
.gv-methods[hidden]{display:none}

/* Панель быстрого подключения галочкой в тарифе «свой сервер» (plans.html) */
.gv-addon{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:12px 14px;border-radius:14px;cursor:pointer;background:rgba(246,196,84,.06);
  border:1px dashed rgba(246,196,84,.45);transition:.15s}
.gv-addon input{position:absolute;opacity:0}
.gv-addon__box{width:20px;height:20px;margin-top:1px;border-radius:6px;border:2px solid rgba(246,196,84,.7);
  display:grid;place-items:center}
.gv-addon__box::after{content:"";width:10px;height:6px;border:solid #1a1206;border-width:0 0 2.5px 2.5px;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.gv-addon input:checked ~ .gv-addon__box{background:var(--gv-gold-grad);border-color:transparent}
.gv-addon input:checked ~ .gv-addon__box::after{opacity:1}
.gv-addon:has(input:checked){border-style:solid;background:rgba(246,196,84,.12)}
.gv-addon input:focus-visible ~ .gv-addon__box{box-shadow:0 0 0 3px rgba(24,226,255,.35)}
.gv-addon__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.gv-addon__text b{font-size:.88rem;font-weight:850}
.gv-addon__text i{font-style:normal;font-weight:900;background-image:var(--gv-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gv-addon__text small{font-size:.76rem;line-height:1.45;color:var(--mvp-muted)}
.gv-addon__text .gv-addon__addr{margin-top:2px}
.gv-addon__addr b{font-size:inherit;font-weight:800;color:#f3dfa6;letter-spacing:.02em}

/* Адрес панели быстрого подключения на странице заказа (order.html) */
.gv-cfg__ext--web{font-size:.66rem}
.gv-panel-addr{font-size:1.15rem;font-weight:900;letter-spacing:.03em;color:#f3dfa6}

/* ===== Карточка клиента в админке (admin_user.html): сводка, «Нужно
   сделать», вкладки и заказы короткими строками, раскрываемыми по нажатию */
.gv-client{display:grid;gap:14px;margin-bottom:16px}
.gv-client__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gv-client__note{display:inline-block;margin-top:8px;max-width:680px;padding:6px 11px;border-radius:10px;
  background:rgba(246,196,84,.08);border:1px solid rgba(246,196,84,.25);color:#f3dfa6;
  font-size:.84rem;line-height:1.45;text-decoration:none}
.gv-client__nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.gv-client__num{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--mvp-line);color:inherit;text-decoration:none}
.gv-client__num b{font-size:1.15rem;font-weight:900;font-variant-numeric:tabular-nums}
.gv-client__num span{font-size:.74rem;font-weight:700;color:var(--mvp-muted)}
a.gv-client__num:hover{border-color:rgba(24,226,255,.45)}
.gv-client__num.is-alert{border-color:rgba(246,196,84,.55);background:rgba(246,196,84,.08)}
.gv-client__num.is-alert b{color:#f6c454}
.gv-client__num.is-bad{border-color:rgba(255,107,137,.5);background:rgba(255,107,137,.08)}
.gv-client__num.is-bad b{color:var(--mvp-danger)}

.gv-cc-todo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;padding:12px 14px;
  border-radius:16px;background:rgba(246,196,84,.06);border:1px solid rgba(246,196,84,.3)}
.gv-cc-todo__title{margin-right:4px;font-size:.86rem;font-weight:900;color:#f6c454}
.gv-cc-todo__item{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--mvp-line);color:#fff;font-size:.84rem;font-weight:700;text-decoration:none}
.gv-cc-todo__item:hover{background:rgba(255,255,255,.1)}
.gv-cc-todo__item.is-wait{border-color:rgba(246,196,84,.55)}
.gv-cc-todo__item.is-bad{border-color:rgba(255,107,137,.6)}

.gv-cc-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;padding:4px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--mvp-line)}
.gv-cc-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  color:var(--mvp-muted);font-size:.9rem;font-weight:800;text-decoration:none}
.gv-cc-tab span{padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:#cfd8ea;
  font-size:.72rem;font-variant-numeric:tabular-nums}
.gv-cc-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.gv-cc-tab.is-on{color:#fff;background:rgba(24,226,255,.12);box-shadow:inset 0 0 0 1px rgba(24,226,255,.4)}
.gv-cc-dot{width:8px;height:8px;border-radius:50%;background:#ff6b89;box-shadow:0 0 8px #ff6b89}
.gv-cc-pane{margin-bottom:22px}
.gv-cc-pane[hidden]{display:none}

.gv-cc-new{margin-bottom:14px}
.gv-cc-new > summary{display:inline-flex;list-style:none;cursor:pointer}
.gv-cc-new > summary::-webkit-details-marker,.gv-orow__sum::-webkit-details-marker{display:none}
.gv-cc-fold > summary,.gv-cc-old > summary{cursor:pointer;font-weight:850}
.gv-cc-old{margin-top:14px}
.gv-cc-old > summary{padding:10px 4px;color:#cfd8ea}
.gv-cc-old[open] > summary{margin-bottom:8px}
.gv-cc-chat{display:flex;flex-direction:column;gap:10px;max-height:440px;overflow-y:auto;padding:4px 2px}

.gv-orows{display:grid;gap:8px}
.gv-orow{--tone:#56627a;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.035);
  border:1px solid var(--mvp-line);border-left:4px solid var(--tone)}
.gv-orow.is-ok{--tone:#34e39b}
.gv-orow.is-wait{--tone:#f6c454}
.gv-orow.is-bad{--tone:#ff6b89}
.gv-orow[open]{background:rgba(255,255,255,.055)}
.gv-orow__sum{display:grid;grid-template-columns:58px minmax(0,1fr) 140px 112px 132px 14px;align-items:center;
  gap:12px;padding:10px 14px;list-style:none;cursor:pointer}
.gv-orow__sum:hover{background:rgba(255,255,255,.03)}
.gv-orow__sum::after{content:"›";color:var(--mvp-muted);font-size:1.2rem;transition:transform .15s}
.gv-orow[open] > .gv-orow__sum::after{transform:rotate(90deg)}
.gv-orow__id{color:#cfd8ea;font-weight:900;font-variant-numeric:tabular-nums}
.gv-orow__what{display:flex;flex-direction:column;min-width:0}
.gv-orow__what b{overflow:hidden;font-weight:850;white-space:nowrap;text-overflow:ellipsis}
.gv-orow small{display:block;overflow:hidden;color:var(--mvp-muted);font-size:.74rem;font-weight:600;
  white-space:nowrap;text-overflow:ellipsis}
.gv-orow__money,.gv-orow__term{min-width:0;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums}
.gv-orow__state{justify-self:end;padding:4px 10px;border-radius:999px;border:1px solid var(--tone);
  color:var(--tone);font-size:.76rem;font-weight:800;white-space:nowrap}
.gv-orow__body{padding:12px 16px 16px;border-top:1px solid var(--mvp-line)}
/* панель быстрого подключения — строкой под своим заказом конфигов */
.gv-orow--sub{margin-left:clamp(12px,3vw,32px)}
.gv-orow__bad{color:#ff6b89;font-weight:800}
.gv-orow__body .gv-ordercard__foot{margin-top:14px}

@media (max-width:860px){
  .gv-orow__sum{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px}
  .gv-orow__sum::after{display:none}
  .gv-orow__id{grid-row:span 2;align-self:start}
  .gv-orow__state{grid-column:3;grid-row:1}
  .gv-orow__money{grid-column:2;grid-row:2;display:flex;gap:6px;align-items:baseline}
  .gv-orow__term{grid-column:3;grid-row:2;justify-self:end;text-align:right}
  .gv-cc-tab{padding:8px 10px;font-size:.84rem}
}

/* Инструменты заказа в админке на узком экране: ряд «статус · продлить ·
   протокол» прижат вправо и не переносился внутри формы — лишняя ширина
   уходила влево, за край карточки. Формы переносятся и не шире карточки */
.gv-ordercard__foot > *{min-width:0;max-width:100%}
.gv-admin-tools{min-width:0}
.gv-inline-form{flex-wrap:wrap;max-width:100%}
.gv-inline-form .gv-select{min-width:0;max-width:100%}
@media (max-width:640px){
  .gv-ordercard__foot{justify-content:flex-start}
  .gv-admin-tools,.gv-inline-form{width:100%}
  .gv-inline-form .gv-select{flex:1 1 160px}
}
/* галочка панели и подсказки формы заказа в админке прячутся атрибутом
   hidden — display:flex у .gv-check иначе его перебивает */
.gv-orderform [hidden]{display:none}
/* список кошельков на странице «Кошельки для оплаты» в админке */
.gv-wallets{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gv-wallets .gv-wallet{word-break:break-all}
/* у панели быстрого подключения длинное название — в карточке переносим на
   вторую строку, а не обрезаем до «Панель быстр…» */
.gv-rig--panel .gv-rig__name b{white-space:normal;overflow:visible;text-overflow:clip}

/* ===== Мини-приложение Telegram (класс in-tg на <html>, см. base.html):
   шапку сайта прячем — сверху у Telegram своя, с кнопками «Назад» и «Закрыть».
   Отступ снизу — чтобы последние кнопки не уходили под жест закрытия */
.in-tg .mvp-header--site { display: none; }
/* выход внутри Telegram ни к чему: окно тут же войдёт заново по его данным */
.in-tg .gv-side__link--out { display: none; }
.in-tg .gv-maintbar { top: 0; }
.in-tg .gv-main { padding-top: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.in-tg body { overscroll-behavior-y: none; }

/* Платежи: итог над списком (payments.html) */
.gv-paysum{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:24px 0 14px;padding:16px 18px;border-radius:20px;
  background:linear-gradient(135deg,rgba(246,196,84,.12),rgba(24,226,255,.05) 55%,rgba(139,92,246,.10));
  border:1px solid rgba(246,196,84,.26);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.gv-paysum__icon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(246,196,84,.14);color:#f6c454}
.gv-paysum__icon svg{width:22px;height:22px}
.gv-paysum__main{display:flex;flex-direction:column;flex:1 1 140px;min-width:0}
.gv-paysum__label{font-size:.78rem;font-weight:700;color:var(--mvp-muted)}
.gv-paysum__sum{font-size:clamp(1.4rem,6.2vw,1.7rem);font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums;
  background:var(--gv-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-paysum__sum.is-zero{background:none;color:#c9d3e8}
.gv-paysum__stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.gv-paysum__stats span{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:6px 10px;
  border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:.7rem;font-weight:700;color:var(--mvp-muted)}
.gv-paysum__stats b{font-size:1.05rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.gv-paysum__stats .is-wait b{color:#f6c454}
.gv-paysum + .gv-hist__head{margin-top:0}