/* логотип на экране входа: изображение вместо букв «SH» */
.logo-badge-img { background: none !important; padding: 0 !important; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; }
.logo-badge-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* плавное раскрытие панели «Параметры подключения» */
.cfg-reveal { animation: cfgReveal .32s cubic-bezier(.16,.84,.44,1) both; overflow: hidden; }
@keyframes cfgReveal {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; margin-top: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 220px; }
}
.cfg-closing { animation: cfgClose .26s cubic-bezier(.4,0,.7,.2) both; }
@keyframes cfgClose {
  from { opacity: 1; transform: translateY(0); max-height: 220px; }
  to   { opacity: 0; transform: translateY(-6px); max-height: 0; margin-top: 0; }
}

/* кнопка «Войти»: мягкое свечение, hover-подъём, бегущий блик, состояние загрузки */
.login-btn { position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(99,194,72,.32); transition: transform .15s, box-shadow .2s, filter .15s; }
.login-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(99,194,72,.5); filter: brightness(1.05); }
.login-btn:not(:disabled):active { transform: translateY(0) scale(.985); box-shadow: 0 3px 10px rgba(99,194,72,.4); }
.login-btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); }
.login-btn:not(:disabled):hover::after { animation: loginSheen .7s ease; }
@keyframes loginSheen { from { left: -120%; } to { left: 130%; } }
.login-btn:not(:disabled) { animation: loginGlow 2.6s ease-in-out infinite; }
@keyframes loginGlow {
  0%,100% { box-shadow: 0 4px 14px rgba(99,194,72,.32); }
  50%     { box-shadow: 0 4px 20px rgba(99,194,72,.55); }
}
/* после нажатия — пульсация загрузки */
.login-btn-busy { animation: loginPulse 1s ease-in-out infinite !important; cursor: progress; }
@keyframes loginPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,194,72,.45); filter: brightness(1); }
  50%     { box-shadow: 0 0 0 7px rgba(99,194,72,0); filter: brightness(1.08); }
}
.login-foot .link { transition: opacity .15s; }
.login-foot .link:hover { opacity: .72; }

/* ============================================================
   serv.host — screen-specific components
   ============================================================ */
/* SSH-терминал + ИИ-агент */
.ssh-conn-grid { display: grid; grid-template-columns: 1fr auto; gap: 14px; }
.ssh-conn-grid .fgroup:nth-child(3), .ssh-conn-grid .fgroup:nth-child(4) { grid-column: span 1; }
.ssh-err { margin-top: 12px; color: var(--red); font-size: 13px; font-weight: 600; display: flex; gap: 7px; align-items: center; }
/* развёрнутая панель ошибки подключения с подсказками */
.ssh-err-panel { margin-top: 14px; border: 1px solid color-mix(in oklch, var(--red) 35%, var(--border)); background: var(--red-soft); border-radius: var(--r-md); padding: 13px 15px; animation: flashOkIn .3s cubic-bezier(.2,1,.4,1.05); }
.ssh-err-top { display: flex; gap: 8px; align-items: center; color: var(--red); font-weight: 700; font-size: 13.5px; }
.ssh-err-top svg { flex-shrink: 0; }
.ssh-err-hint { margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.ssh-err-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.ssh-err-list code { font-family: ui-monospace, monospace; font-size: 11.5px; background: color-mix(in oklch, var(--text) 8%, transparent); padding: 1px 5px; border-radius: 4px; }
.ssh-err-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ssh-layout { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: stretch; height: 640px; }
.ssh-term-wrap { display: flex; flex-direction: column; background: #0c1018; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ssh-term-bar { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #151b27; color: #c5cede; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid #222b3a; }
.ssh-term-bar .vm-link { color: #8fb6ff; }
.ssh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ssh-dot.connecting { background: var(--amber); } .ssh-dot.error, .ssh-dot.closed { background: var(--red); }
.ssh-term { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ssh-term pre { margin: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: #d6e0ee; white-space: pre-wrap; word-break: break-all; }
.ssh-input-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #0f141d; border-top: 1px solid #222b3a; }
.ssh-prompt { color: var(--green); font-family: ui-monospace, monospace; font-weight: 700; }
.ssh-input { flex: 1; background: none; border: none; outline: none; color: #e6edf6; font-family: ui-monospace, monospace; font-size: 13px; }
.ssh-agent { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ssh-agent-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border); color: var(--accent-deep); }
.ssh-auto-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-soft, rgba(31,138,91,.12)); padding: 3px 8px; border-radius: 20px; }
.ssh-agent-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ssh-msg { font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 11px; max-width: 92%; white-space: pre-wrap; word-break: break-word; }
.ssh-msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ssh-msg-assistant { align-self: flex-start; background: var(--bg-2); color: var(--text-1); border-bottom-left-radius: 4px; }
.ssh-msg-run { align-self: stretch; background: #0c1018; max-width: 100%; }
.ssh-msg-run code { color: #7fd88f; font-family: ui-monospace, monospace; font-size: 12px; }
.ssh-typing { letter-spacing: 2px; color: var(--text-3); padding: 12px 14px !important; }
.ssh-typing-dots { display: inline-flex; align-items: center; gap: 5px; }
.ssh-typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: sshTypeBounce 1.1s ease-in-out infinite; }
.ssh-typing-dots i:nth-child(2) { animation-delay: .16s; }
.ssh-typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes sshTypeBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ssh-typing-dots i { animation: sshTypeFade 1.1s ease-in-out infinite; } @keyframes sshTypeFade { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } }
.ssh-approve { align-self: stretch; max-width: 100%; border: 1px solid var(--accent-soft-bd); background: var(--accent-soft); border-radius: 11px; padding: 12px; }
.ssh-approve-t { font-size: 12.5px; font-weight: 700; color: var(--accent-deep); margin-bottom: 8px; }
.ssh-approve-cmds { background: #0c1018; color: #7fd88f; font-family: ui-monospace, monospace; font-size: 12px; padding: 10px; border-radius: 8px; margin: 0 0 10px; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow-y: auto; }
.ssh-agent-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.ssh-agent-input .input { flex: 1; }
@media (max-width: 980px) { .ssh-layout { grid-template-columns: 1fr; height: auto; } }
/* встроенный режим (в карточку VM, вместо графика): терминал сверху, чат снизу */
.ssh-embed-wrap { width: 100%; }

/* экран подключения: матовая консоль по центру на градиентном фоне */
.ssh-connect-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 30px; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 140% at 50% 0%, oklch(0.33 0.018 70) 0%, oklch(0.275 0.012 70) 55%, oklch(0.235 0.01 70) 100%); }
.ssh-connect-stage.embed { min-height: 480px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ssh-connect-bg { position: absolute; inset: 0; pointer-events: none; }
.ssh-connect-bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.ssh-connect-bg span:nth-child(1) { width: 280px; height: 280px; background: var(--accent); top: -80px; left: -60px; opacity: .22; }
.ssh-connect-bg span:nth-child(2) { width: 240px; height: 240px; background: var(--violet, #7c5cff); bottom: -90px; right: -40px; opacity: .18; }
.ssh-connect-bg span:nth-child(3) { width: 200px; height: 200px; background: var(--green); top: 40%; left: 55%; opacity: .12; }
.ssh-connect-card { position: relative; z-index: 1; width: 100%; max-width: 460px; padding: 22px; border-radius: 16px; background: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ssh-connect-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ssh-connect-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); color: #fff; flex-shrink: 0; }
.ssh-connect-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); }
.ssh-connect-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.ssh-traffic { margin-left: auto; display: flex; gap: 6px; }
.ssh-traffic i { width: 11px; height: 11px; border-radius: 50%; }
.ssh-traffic i:nth-child(1) { background: #ff5f57; } .ssh-traffic i:nth-child(2) { background: #febc2e; } .ssh-traffic i:nth-child(3) { background: #28c840; }
.ssh-connect-card .ssh-conn-grid { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.ssh-connect-card .fgroup label { color: var(--text-2); font-size: 12px; }
.ssh-connect-card .input { background: color-mix(in oklch, var(--bg) 70%, transparent); border-color: var(--border); color: var(--text); }
.ssh-connect-card .input:disabled { color: var(--text-3); cursor: not-allowed; }
.ssh-connect-card .input:focus { border-color: var(--accent); }
.ssh-remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.ssh-connect-btn { width: 100%; margin-top: 16px; justify-content: center; gap: 8px; }
/* состояние «идёт подключение»: спиннер, бегущие точки, индикатор прогресса */
.ssh-connect-btn.is-connecting { position: relative; overflow: hidden; opacity: 1 !important; cursor: progress; }
.ssh-conn-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sshConnSpin .7s linear infinite; flex-shrink: 0; }
@keyframes sshConnSpin { to { transform: rotate(360deg); } }
.ssh-conn-ell i { opacity: 0; animation: sshConnEll 1.3s steps(1) infinite; }
.ssh-conn-ell i:nth-child(2) { animation-delay: .25s; }
.ssh-conn-ell i:nth-child(3) { animation-delay: .5s; }
@keyframes sshConnEll { 0%, 80%, 100% { opacity: 0; } 30% { opacity: 1; } }
.ssh-connect-btn.is-connecting::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: sshConnBar 1.2s ease-in-out infinite; }
@keyframes sshConnBar { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .ssh-conn-spin { animation: sshConnSpin 1.4s linear infinite; } .ssh-conn-ell i { opacity: 1; } .ssh-connect-btn.is-connecting::after { display: none; } }
.ssh-connect-note { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.ssh-connect-card .ssh-err { color: #ff8a80; }

/* ===== Windows-сервер: SSH недоступен — показываем только карточку RDP ===== */
.ssh-rdp-standalone { max-width: 460px; }

/* ===== Скелетон загрузки списка (вместо «Список пуст» пока идёт первая загрузка) ===== */
.list-skel { padding: 4px 0; }
.list-skel-row { display: flex; align-items: center; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.list-skel-row:last-child { border-bottom: none; }
.list-skel .sk { height: 13px; border-radius: 6px; background: var(--bg-2); position: relative; overflow: hidden; }
.list-skel .sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--surface) 75%, transparent), transparent); animation: skShimmer 1.4s ease-in-out infinite; }
.list-skel .sk-a { width: 22%; }
.list-skel .sk-b { width: 42%; }
.list-skel .sk-c { width: 14%; margin-left: auto; }
@keyframes skShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .list-skel .sk::after { animation: none; } }

/* скелетон поля copy-field (пока грузится реф-ссылка/промокод — чтобы не мелькала демо-ссылка) */
.copy-skel { height: 46px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); position: relative; overflow: hidden; }
.copy-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--surface) 75%, transparent), transparent); animation: skShimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .copy-skel::after { animation: none; } }
.ssh-rdp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.ssh-rdp-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.ssh-rdp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ssh-rdp-sub { font-size: 12px; color: var(--text-3); }
.ssh-rdp-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.ssh-rdp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-radius: 9px; background: color-mix(in oklch, var(--bg) 55%, transparent); font-size: 13px; }
.ssh-rdp-row > span { color: var(--text-2); flex-shrink: 0; }
.ssh-rdp-row > b { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.ssh-rdp-row > b i { color: var(--text-3); font-weight: 400; font-style: normal; font-size: 11.5px; }
.ssh-rdp-row .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ssh-rdp-copy { background: none; border: none; cursor: pointer; color: var(--text-3); display: inline-flex; padding: 2px; border-radius: 5px; }
.ssh-rdp-copy:hover { color: var(--accent); background: var(--accent-soft); }
.ssh-rdp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ssh-rdp-btn { flex: 1 1 200px; justify-content: center; gap: 8px; }
.ssh-rdp-vnc { flex: 0 1 auto; justify-content: center; gap: 6px; white-space: nowrap; }
.ssh-rdp-steps { margin: 13px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ssh-rdp-steps li b { color: var(--text); }
.ssh-rdp-steps code { background: color-mix(in oklch, var(--bg) 55%, transparent); padding: 1px 5px; border-radius: 5px; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--text); }
.ssh-rdp-steps kbd { background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: ui-monospace, monospace; color: var(--text); }
.ssh-rdp-note { display: flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 11.5px; color: var(--text-3); }

/* ===== светлая тема: панель SSH-подключения вписана в светлый кабинет ===== */
[data-theme="light"] .ssh-connect-stage { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 45%, color-mix(in oklch, var(--sky, #5aa9e6) 14%, var(--surface)) 100%); border: 1px solid var(--border); }
[data-theme="light"] .ssh-connect-bg span:nth-child(1) { opacity: .16; filter: blur(70px); }
[data-theme="light"] .ssh-connect-bg span:nth-child(2) { opacity: .10; filter: blur(70px); }
[data-theme="light"] .ssh-connect-bg span:nth-child(3) { opacity: .08; filter: blur(70px); }
[data-theme="light"] .ssh-connect-card { background: rgba(255,255,255,.86); border: 1px solid var(--border); box-shadow: 0 24px 60px -22px rgba(40,60,90,.30), 0 2px 10px rgba(40,60,90,.06); }
[data-theme="light"] .ssh-connect-title { color: var(--text); }
[data-theme="light"] .ssh-connect-sub { color: var(--text-3); }
[data-theme="light"] .ssh-connect-card .fgroup label { color: var(--text-2); }
[data-theme="light"] .ssh-connect-card .input { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="light"] .ssh-connect-card .input:disabled { color: var(--text-3); background: var(--bg-2); }
[data-theme="light"] .ssh-connect-card .input:focus { border-color: var(--accent-soft-bd); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="light"] .ssh-remember { color: var(--text-2); }
[data-theme="light"] .ssh-connect-note { color: var(--text-3); }
/* встроенная панель: бесшовно продолжает белую плашку метрик сверху */
[data-theme="light"] .ssh-connect-stage.embed { border-top: none; background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 58%, color-mix(in oklch, var(--sky, #5aa9e6) 12%, var(--surface)) 100%); }
[data-theme="light"] .ssh-connect-stage.embed .ssh-connect-bg span:nth-child(1) { top: 30%; opacity: .10; }

/* hero рядом с карточкой (только на отдельной странице SSH, не в embed) */
.ssh-connect-stage:not(.embed) { gap: 54px; flex-wrap: wrap; }
.ssh-hero { position: relative; z-index: 1; max-width: 380px; }
.ssh-hero-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #cfe8c4; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.ssh-hero-title { font-family: var(--font-display); font-size: 30px; line-height: 1.12; font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -0.01em; }
.ssh-hero-sub { font-size: 13.5px; line-height: 1.6; color: #9fb0c4; margin: 0 0 22px; }
.ssh-hero-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ssh-hero-feats li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: #d4dde8; }
.ssh-hero-feats svg { flex-shrink: 0; color: var(--accent); }
[data-theme="light"] .ssh-hero-badge { background: var(--accent-soft); border-color: var(--accent-soft-bd); color: var(--accent-deep); }
[data-theme="light"] .ssh-hero-title { color: var(--text); }
[data-theme="light"] .ssh-hero-sub { color: var(--text-2); }
[data-theme="light"] .ssh-hero-feats li { color: var(--text); }

/* кастомная галочка «запомнить SSH» */
.ssh-remember { align-items: center; }
.ssh-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.ssh-check { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 6px; border: 2px solid rgba(255,255,255,.28); background: transparent; color: #fff; flex-shrink: 0; transition: background .18s ease, border-color .18s ease, transform .15s ease; }
.ssh-check svg { opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .24s cubic-bezier(.34,1.56,.64,1); }
.ssh-remember input:checked + .ssh-check { background: var(--accent); border-color: var(--accent); }
.ssh-remember input:checked + .ssh-check svg { opacity: 1; transform: scale(1); }
.ssh-remember:hover .ssh-check { border-color: var(--accent); }
.ssh-remember input:focus-visible + .ssh-check { box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="light"] .ssh-check { border-color: var(--border); }
[data-theme="light"] .ssh-remember input:checked + .ssh-check { border-color: var(--accent); }
/* кастомная галочка в формах VM (переустановка ОС и т.п.) */
.vm-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; position: relative; }
.vm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vm-check-box { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--surface); color: #fff; flex-shrink: 0; transition: background .16s ease, border-color .16s ease; }
.vm-check-box svg { opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .24s cubic-bezier(.34,1.56,.64,1); }
.vm-check input:checked + .vm-check-box { background: var(--accent); border-color: var(--accent); }
.vm-check input:checked + .vm-check-box svg { opacity: 1; transform: scale(1); }
.vm-check:hover .vm-check-box { border-color: var(--accent); }
.vm-check input:focus-visible + .vm-check-box { box-shadow: 0 0 0 3px var(--accent-soft); }

/* кастомные галочки согласий на форме регистрации (белая карточка, бренд-зелёный #63C248) */
.login-agreements .login-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; cursor: pointer; position: relative; }
.login-agreements .login-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-check-box { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 6px; border: 2px solid #cdd6cf; background: #fff; color: #fff; flex: 0 0 auto; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.login-check-box svg { opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .24s cubic-bezier(.34,1.56,.64,1); }
.login-check input:checked + .login-check-box { background: #63C248; border-color: #63C248; }
.login-check input:checked + .login-check-box svg { opacity: 1; transform: scale(1); }
.login-check:hover .login-check-box { border-color: #63C248; }
.login-check input:focus-visible + .login-check-box { box-shadow: 0 0 0 3px rgba(99,194,72,.28); }

/* кастомное название услуги: колонка фиксированной ширины, чтобы вход в режим правки
   не менял ширину колонки и таблица не «прыгала»; поле ввода плавно проявляется. */
.svc-name-wrap { width: 150px; max-width: 100%; }
.svc-name-cell { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.svc-name-text { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-name-input { height: 32px; padding: 4px 9px; font-size: 13px; width: 100%; box-sizing: border-box; animation: svcNameIn .16s ease; }
.svc-name-edit { flex-shrink: 0; display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px; opacity: .65; transition: color .15s ease, opacity .15s ease; }
.svc-name-edit:hover { color: var(--accent-deep); opacity: 1; }
tr:hover .svc-name-edit { opacity: 1; }
@keyframes svcNameIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-name-input { animation: none; } }
/* снекбар «пароль скопирован» при переустановке ОС */
.vm-copy-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 12px; max-width: 440px; padding: 13px 18px 13px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--accent-soft-bd); box-shadow: 0 16px 44px -12px rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent); animation: vmToastIn .42s cubic-bezier(.2,1.1,.4,1.05); }
.vm-copy-toast.out { animation: vmToastOut .4s cubic-bezier(.4,0,.6,1) forwards; }
/* ── Использовать сертификат / промокод ─────────────────────────── */
.cert-wrap { max-width: 560px; margin: 0 auto; }
.cert-card { text-align: center; }
.cert-card-in { animation: certCardIn .4s cubic-bezier(.2,1,.4,1.05); }
@keyframes certCardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cert-card-in { animation: none; } }
.cert-illus { width: 60px; height: 60px; margin: 2px auto 16px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-soft-bd); }
.cert-h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.cert-lead { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 auto 22px; max-width: 420px; }
.cert-field { text-align: left; max-width: 420px; margin: 0 auto; }
.cert-field > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 7px; }
.cert-input { width: 100%; text-align: left; font-family: var(--font-mono, ui-monospace, monospace); font-size: 17px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: border-color .16s ease, box-shadow .16s ease; }
.cert-input::placeholder { letter-spacing: .08em; text-transform: none; font-weight: 500; color: var(--text-3); }
.cert-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cert-input.has-err { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.cert-err { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--red); font-size: 12.5px; font-weight: 600; animation: certErrIn .28s ease; }
.cert-err svg { flex-shrink: 0; }
@keyframes certErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cert-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.cert-submit { min-width: 180px; position: relative; overflow: hidden; }
.cert-submit.is-busy { cursor: progress; }
.cert-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: certSpin .7s linear infinite; flex-shrink: 0; }
@keyframes certSpin { to { transform: rotate(360deg); } }
.cert-ell i { opacity: 0; animation: certEll 1.3s steps(1) infinite; }
.cert-ell i:nth-child(2) { animation-delay: .25s; }
.cert-ell i:nth-child(3) { animation-delay: .5s; }
@keyframes certEll { 0%, 80%, 100% { opacity: 0; } 30% { opacity: 1; } }
.cert-hint { display: flex; align-items: flex-start; gap: 7px; justify-content: center; margin: 20px auto 0; max-width: 430px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); line-height: 1.5; text-align: left; }
.cert-hint svg { flex-shrink: 0; margin-top: 1px; }
.cert-success { animation: certCardIn .45s cubic-bezier(.2,1,.4,1.05); }
@keyframes certCardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cert-check { position: relative; width: 76px; height: 76px; margin: 4px auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 28px -8px var(--accent); animation: certCheckPop .55s cubic-bezier(.34,1.56,.5,1) .1s both; }
.cert-check svg { position: relative; z-index: 1; animation: certCheckDraw .5s ease .25s both; }
@keyframes certCheckPop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes certCheckDraw { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.cert-check-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: certRing 1.1s ease-out .2s; }
@keyframes certRing { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.cert-amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--accent-deep); line-height: 1; margin-bottom: 14px; animation: certAmtIn .5s cubic-bezier(.2,1,.4,1.05) .25s both; }
.cert-amount-cur { font-size: 22px; margin-left: 4px; color: var(--accent); }
@keyframes certAmtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cert-success-msg { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 auto 20px; max-width: 430px; }
.cert-balance-row { display: flex; align-items: center; justify-content: space-between; max-width: 320px; margin: 0 auto; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.cert-balance-row > span { color: var(--text-2); font-weight: 600; }
.cert-balance-row > b { color: var(--text); font-weight: 800; font-family: var(--font-display); }
@media (prefers-reduced-motion: reduce) { .cert-check, .cert-check svg, .cert-check-ring, .cert-amount, .cert-success, .cert-spin, .cert-ell i, .cert-err { animation: none; } .cert-ell i { opacity: 1; } }
.vm-copy-toast .vct-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; animation: vmToastPop .5s cubic-bezier(.34,1.56,.5,1) .1s both; }
.vm-copy-toast .vct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-copy-toast .vct-body > b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.vm-copy-toast .vct-body > span { font-size: 12px; color: var(--text-2); line-height: 1.45; }
@keyframes vmToastIn { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes vmToastOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(16px); } }
@keyframes vmToastPop { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vm-copy-toast, .vm-copy-toast.out, .vm-copy-toast .vct-ic { animation: none; } }
@media (max-width: 760px) { .ssh-hero { display: none; } }

.ssh-layout.ssh-embed { display: flex; flex-direction: column; height: auto; gap: 14px; }
.ssh-layout.ssh-embed .ssh-term-wrap { height: 460px; }
/* встроенный терминал бесшовно продолжает плашку метрик сверху */
.vm-main-left .ssh-layout.ssh-embed > .ssh-term-wrap:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }
.ssh-layout.ssh-embed .ssh-agent { height: 420px; }

.grid { display: grid; gap: 16px; }

/* ============ DASHBOARD — modern lower section ============ */
.metric-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.mtile { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow .25s cubic-bezier(.2,.7,.3,1), border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1); text-align: left; position: relative; overflow: hidden; }
.mtile::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(99,194,72,.10), transparent); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; }
.mtile:hover { box-shadow: 0 12px 28px rgba(74,155,52,.16); border-color: var(--accent-soft-bd); transform: translateY(-4px); }
.mtile:hover::after { left: 130%; }
.mtile:active { transform: translateY(-1px) scale(.99); }
.mtile .mt-ic { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.mtile:hover .mt-ic { transform: scale(1.1) rotate(-4deg); box-shadow: 0 6px 14px rgba(74,155,52,.22); }
.mtile:hover .mt-go { opacity: 1; transform: none; }
.mtile .mt-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.mtile .mt-l { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.mtile .mt-v { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; white-space: nowrap; }
.mtile .mt-go { margin-left: auto; color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: all .15s; flex-shrink: 0; }

/* panel (card with header) */
.panel { overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.panel-head .ph-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.panel-head h2 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.panel-head .link { margin-left: auto; color: var(--accent-deep); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-sm); transition: gap .18s ease, background .16s ease, transform .16s ease; }
.panel-head .link svg { transition: transform .2s cubic-bezier(.3,.7,.3,1); }
.panel-head .link:hover { gap: 6px; background: var(--accent-soft); transform: translateX(1px); }
.panel-head .link:hover svg { transform: translateX(3px); }
.panel-head .link:active { transform: scale(.95); }

.panel-empty { padding: 30px 22px 28px; text-align: center; }
.panel-empty .pe-illo { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--accent-deep); background: var(--accent-soft); }
.panel-empty .pe-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
.panel-empty .pe-sub { color: var(--text-3); font-size: 13px; margin: 6px auto 16px; max-width: 320px; line-height: 1.5; }

/* finance panel (clean, replaces flashy balance card) */
.fin-panel .fin-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fin-balance { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.fin-balance .fb-l { font-size: 12px; color: var(--text-3); font-weight: 600; }
.fin-balance .fb-v { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: var(--text); display: inline-flex; align-items: baseline; gap: 4px; }
.fin-balance .fb-v .cur { color: var(--text-3); font-size: 22px; }
.fin-autopay { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: 20px; }
.fin-due { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--r-md); background: var(--amber-soft); border: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); }
.fin-due .fd-ic { width: 32px; height: 32px; border-radius: 9px; background: color-mix(in oklch, var(--amber) 20%, var(--surface)); color: var(--amber); display: grid; place-items: center; flex-shrink: 0; }
.fin-due .fd-l { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.fin-due .fd-v { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text); margin-top: 1px; }
.fin-due .btn { background: var(--amber); color: #fff; }
.fin-due .btn:hover { filter: brightness(.95); }
.fin-due.empty { background: var(--surface-2); border-color: var(--border); }
.fin-due.empty .btn { background: var(--accent-soft); color: var(--accent-deep); }
.fin-due.empty .btn:hover { background: var(--accent); color: #fff; filter: none; }
.fin-due.empty .fd-ic { background: var(--bg-2); color: var(--text-3); }
.fin-due .fd-muted { font-size: 13px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }
.fin-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.fin-stat-row .fsr-k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.fin-stat-row .fsr-k svg { color: var(--text-3); }
.fin-stat-row .fsr-v { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; }

/* account v2 */
.acct-v2 .acct-row2 { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.acct-v2 .acct-row2:last-of-type { border-bottom: none; }
.acct-v2 .ar-k { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-weight: 600; }
.acct-v2 .ar-k svg { color: var(--text-3); }
.acct-v2 .ar-v { font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.acct-row2 .ar-v, .acct-v2 .ar-v { display: inline-flex; align-items: center; gap: 7px; }
.ar-v .flag { border-radius: 3px; flex-shrink: 0; }
.ar-brand { color: #4ca835; font-size: 13px; }
[data-theme="dark"] .ar-brand { color: #7ed867; }
.brand-logo { font-weight: 800; font-size: 13.5px; letter-spacing: -0.01em; }
.brand-logo .bl-serv { color: #63C248; }
.brand-logo .bl-host { color: #1a1a1a; }
[data-theme="dark"] .brand-logo .bl-host { color: #fff; }

/* метрики: на планшете остаются 3 в ряд (место не простаивает); 1 колонка — только на телефоне (≤560) */
@media (min-width: 561px) and (max-width: 1100px) { .metric-tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ============ Notifications dropdown ============ */
.notif-wrap { position: relative; }
.icon-btn.active { background: var(--surface); border-color: var(--border); color: var(--text); }
/* анимированный колокольчик */
.bell-btn .bell-ic { display: inline-flex; transform-origin: 50% 3px; }
.bell-btn:hover .bell-ic { animation: bell-swing .6s cubic-bezier(.36,.07,.19,.97); }
.bell-btn.has-unread .bell-ic { animation: bell-swing 1.4s ease-in-out infinite; }
.bell-btn.active .bell-ic { animation: bell-ring-burst .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes bell-ring-burst { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-18deg) scale(1.15); } 45% { transform: rotate(15deg) scale(1.1); } 70% { transform: rotate(-8deg) scale(1.05); } 100% { transform: rotate(0) scale(1); } }
.bell-btn .dot { animation: bell-dot-pop .35s cubic-bezier(.5,1.7,.4,1); }
.bell-btn.has-unread .dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: bell-ring 1.8s ease-out infinite; }
@keyframes bell-swing { 0%,100% { transform: rotate(0); } 15% { transform: rotate(13deg); } 30% { transform: rotate(-11deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes bell-dot-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes bell-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bell-btn .bell-ic, .bell-btn.has-unread .dot::after { animation: none !important; } }
.notif-pop { position: absolute; top: 46px; right: 0; width: 360px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; animation: notifIn .16s cubic-bezier(.2,.7,.3,1); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } 60% { transform: translateY(2px) scale(1.005); } to { opacity: 1; transform: none; } }
.notif-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-head .nh-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.notif-head .nh-count { font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; }
.notif-head .nh-mark { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent-deep); }
.notif-head .nh-mark:hover { text-decoration: underline; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; width: 100%; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); transition: background .1s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: color-mix(in oklch, var(--accent-soft) 45%, var(--surface)); }
.notif-item.unread:hover { background: color-mix(in oklch, var(--accent-soft) 70%, var(--surface)); }
.notif-item .ni-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.notif-item .ni-ic.success { background: var(--green-soft); color: var(--green); }
.notif-item .ni-ic.warning { background: var(--amber-soft); color: var(--amber); }
.notif-item .ni-ic.info { background: var(--sky-soft); color: var(--sky); }
.notif-item .ni-body { min-width: 0; flex: 1; }
.notif-item .ni-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.notif-item .ni-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.notif-item .ni-text { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-top: 3px; }
.notif-item .ni-time { font-size: 11px; color: var(--text-3); font-weight: 600; margin-top: 5px; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; }
.notif-empty svg { color: var(--text-3); margin-bottom: 10px; opacity: .6; }


/* ============================================================
   ORDER FLOW (Товары/Услуги) — big-IT + AI aesthetic
   ============================================================ */
:root { --ai: oklch(0.72 0.11 200); --ai-soft: oklch(0.95 0.04 200); }
[data-theme="dark"] { --ai: oklch(0.78 0.1 200); --ai-soft: oklch(0.30 0.06 200); }

/* breadcrumb steps inside order flow */
.flow-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.flow-step { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.flow-step.cur { color: var(--accent-deep); }
.flow-step .fs-n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); color: var(--text-3); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.flow-step.cur .fs-n { background: var(--accent); color: #fff; }
.flow-step.done .fs-n { background: var(--green); color: #fff; }
.flow-sep { color: var(--text-3); }
.flow-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 700; font-size: 13px; }
.flow-back:hover { color: var(--accent-deep); }

/* AI hero on catalog */
.order-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 26px 28px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.order-hero .mesh { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(420px 220px at 12% -10%, color-mix(in oklch, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(380px 240px at 92% 120%, color-mix(in oklch, var(--ai) 22%, transparent), transparent 70%); }
.order-hero .dots { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 16px 16px; color: var(--border); mask: linear-gradient(180deg, #000, transparent 70%); }
.order-hero h1 { position: relative; font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 12px; }
.order-hero p { position: relative; color: var(--text-2); font-size: 14px; margin-top: 6px; max-width: 620px; }
.ai-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 20px; font-size: 12px; font-weight: 800; color: var(--ai); background: var(--ai-soft); border: 1px solid color-mix(in oklch, var(--ai) 30%, transparent); position: relative; }
.ai-pill svg { color: var(--ai); }
.order-hero h1 .ai-pill { padding-left: 10.5px; padding-right: 13.5px; }
.order-hero h1 .ai-pill > span { transform: translate(-2px, 1.5px); }
.hero-mark { position: relative; z-index: 3; width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); bo
.order-hero-row { position: relative; z-index: 3; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 30px; font-size: 15px; font-weight: 800; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--ai, var(--accent)), var(--accent-deep)); border: none; cursor: pointer; box-shadow: 0 8px 22px -8px color-mix(in oklch, var(--accent) 75%, transparent); position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s ease; animation: heroCtaPulse 2.8s ease-in-out infinite; }
.hero-cta svg:first-child { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.hero-cta svg { display: block; }
.hero-cta span { line-height: 1; }
.hero-cta svg:last-child { transition: transform .2s ease; }
.hero-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px -10px color-mix(in oklch, var(--accent) 85%, transparent); animation: none; }
.hero-cta:hover svg:last-child { transform: translateX(4px); }
.hero-cta:active { transform: translateY(0) scale(.98); }
.hero-cta::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: heroCtaShine 3.4s ease-in-out infinite; }
@keyframes heroCtaPulse { 0%,100% { box-shadow: 0 8px 22px -8px color-mix(in oklch, var(--accent) 75%, transparent); } 50% { box-shadow: 0 8px 30px -6px color-mix(in oklch, var(--accent) 95%, transparent); } }
@keyframes heroCtaShine { 0% { left: -120%; } 55%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .hero-cta, .hero-cta::after { animation: none; } }
@media (max-width: 720px) { .hero-cta { width: 100%; justify-content: center; } }
/* CTA как текстовая ссылка, выровненная по левому краю с заголовком */
.hero-cta-link { height: auto; padding: 4px 0; background: none; box-shadow: none; color: var(--accent-deep); font-size: 14px; font-weight: 700; gap: 8px; border-radius: 8px; align-items: center; }
.hero-cta-link span { line-height: 1; }
.order-hero .hero-cta-link svg { transform: none !important; vertical-align: -4px !important; }
.hero-cta-link:hover { background: none; box-shadow: none; transform: none; filter: none; }
.hero-cta-link::after { display: none; }
.hero-cta-link svg:first-child { color: var(--accent); filter: none; }
.hero-cta-link svg:last-child { transition: transform .16s ease; }
.hero-cta-link:hover svg:last-child { transform: translateX(3px) !important; vertical-align: -4px !important; }x-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 40%, transparent); }

/* category anchor rail (reuse .cat-rail, add count/icon styling already there) */
.order-layout { display: block; }

/* catalog category section */
.cat-section { margin-bottom: 30px; }
.cat-sec-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.cat-sec-head .ci { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; }
.cat-sec-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.cat-sec-head .all { margin-left: auto; color: var(--accent-deep); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); transition: background .16s ease, gap .15s ease, box-shadow .16s ease, transform .12s ease, color .16s ease; }
.cat-sec-head .all:hover { gap: 9px; background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 7px 18px -6px color-mix(in oklch, var(--accent) 70%, transparent); }
.cat-sec-head .all:hover svg { color: #fff; }
.cat-sec-head .all:active { transform: scale(.96); }

/* pricelist filter bar */
.pl-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; position: relative; z-index: 5; }
.pl-filter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-weight: 700; font-size: 13px; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.pl-filter:hover { border-color: var(--border-strong); }
.pl-filter.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pl-filter .pf-k { color: var(--text-3); font-weight: 600; }
.pl-filter > svg:last-child { color: var(--text-3); transition: transform .2s ease; }
.pl-filter.open > svg:last-child { transform: rotate(180deg); }
.pl-perpage { margin-left: auto; font-size: 12.5px; color: var(--text-3); font-weight: 600; }

/* datacenter selector popover */
.dc-pop { position: absolute; top: 48px; left: 0; z-index: 30; width: min(680px, 94vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px; transform-origin: top left; animation: dcPopIn .2s cubic-bezier(.2,1,.35,1); }
@keyframes dcPopIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dc-pop { animation: none; } }
.dc-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; color: var(--text-3); }
.dc-search input { border: none; outline: none; background: none; flex: 1; font-weight: 500; }
.dc-group-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 8px 2px 8px; display: flex; align-items: center; gap: 7px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dc-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .12s; }
.dc-chip:hover { border-color: var(--accent-soft-bd); background: var(--bg-2); color: var(--text); }
.dc-chip.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.dc-chip .plat { font-size: 10.5px; opacity: .7; font-weight: 700; }
.dc-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* pricelist rows (generic) */
.pl-row { display: grid; grid-template-columns: 1fr minmax(120px, auto) 132px; gap: 24px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); transition: background .1s; }
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: var(--surface-2); }
.pl-row .pr-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pl-row .pr-dc { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.pl-row .pr-spec { font-size: 12.5px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }
.pl-row .pr-specgrid { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.pr-sp .k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; }
.pr-sp .v { font-size: 13px; font-weight: 700; font-family: var(--font-mono); margin-top: 1px; }
.pl-row .pr-price { font-family: var(--font-display); font-weight: 800; font-size: 19px; white-space: nowrap; text-align: right; line-height: 1.15; }
.pl-row .pr-now { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.pl-row .pr-now .amt-from { font-size: 11px; font-weight: 700; color: var(--text-3); }
.pl-row .pr-price small { font-size: 11px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); margin-left: 5px; }
.pl-row .pr-old { font-size: 12px; color: var(--text-3); text-decoration: line-through; font-family: var(--font-ui); font-weight: 600; margin-bottom: 1px; }
.pl-row .pl-actions { display: flex; justify-content: stretch; }
.pl-row .pl-actions .btn { width: 100%; justify-content: center; }
.verify-tag { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--amber-soft); color: var(--amber); }
.disc-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 20px; font-size: 11px; font-weight: 800; background: var(--green-soft); color: var(--green); }
/* выпадающий список периода оплаты */
.period-pop { position: absolute; top: 48px; left: 0; z-index: 30; width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; transform-origin: top left; animation: dcPopIn .2s cubic-bezier(.2,1,.35,1); }
.period-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-1); text-align: left; transition: background .14s ease; }
.period-opt:hover { background: var(--accent-soft); }
.period-opt.on { color: var(--accent-deep); }
.period-opt .period-name { flex: 1; }
.period-opt .period-no { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.period-opt .period-ck { display: inline-flex; color: var(--accent); }
.pl-actions { display: flex; gap: 8px; align-items: center; }

/* ===== CONFIGURATOR ===== */
.cfg-grid2 { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cfg-form { padding: 24px; }
.cfg-f { margin-bottom: 22px; }
.cfg-f:last-child { margin-bottom: 0; }
.cfg-f > label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 9px; white-space: nowrap; }
.cfg-f > label:has(input[type="checkbox"]) { white-space: normal; flex-wrap: wrap; }
.cfg-f > label:has(input[type="checkbox"]) span { white-space: normal; min-width: 0; }
.cfg-f .hint-i { width: 15px; height: 15px; border-radius: 50%; background: var(--bg-2); color: var(--text-3); display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; }
/* всплывающая подсказка на «?» */
.hint-i[data-tip] { position: relative; cursor: help; }
.hint-i[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-16px) translateY(2px); width: max-content; max-width: 270px; white-space: normal; background: var(--text); color: var(--surface); padding: 9px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 1.45; text-align: left; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60; }
.hint-i[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; }
.hint-i[data-tip]:hover::after { opacity: 1; transform: translateX(-16px) translateY(0); }
.hint-i[data-tip]:hover::before { opacity: 1; }
.cfg-fixed { height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border); font-weight: 700; gap: 8px; }
.dd-row { display: flex; align-items: center; gap: 12px; }
.dd-row .input { flex: 1; height: 44px; }
.price-badge { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--accent-deep); background: var(--accent-soft); padding: 6px 11px; border-radius: var(--r-sm); white-space: nowrap; }

/* OS tiles */
.cfg-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--bg-2); padding: 2px 8px; border-radius: 20px; margin-left: 8px; }
.cfg-lock svg { color: var(--text-3); }

/* read-only fixed config */
.fixed-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.fixed-specs .fx { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--surface-2); }
/* нечётное число характеристик: одиночный последний пункт занимает обе колонки — не остаётся пустой серой ячейки */
.fixed-specs .fx:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fixed-specs .fx svg { color: var(--accent); flex-shrink: 0; }
.fixed-specs .fx .fk { font-size: 11px; color: var(--text-3); font-weight: 600; }
.fixed-specs .fx .fv { margin-left: auto; font-size: 12.5px; font-weight: 700; font-family: var(--font-mono); text-align: right; }

/* OS sections + tiles */
.os-section { margin-bottom: 14px; }
.os-section:last-child { margin-bottom: 0; }
.os-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 9px; }
.os-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.os-tile { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface); cursor: pointer; transition: all .14s; position: relative; }
.os-tile:hover { border-color: var(--accent-soft-bd); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.os-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); animation: osSelPop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes osSelPop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.os-tile.sel { background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--surface); }
.os-tile .ot-top, .os-tile .os-tick, .os-tile .ot-name, .os-tile .ot-ver { transition: color .16s ease; }
.os-tile .os-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); animation: osTickPop .32s cubic-bezier(.34,1.7,.5,1) .04s both; }
@keyframes osTickPop { 0% { transform: scale(0) rotate(-60deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.os-tile .os-tick svg { animation: osTickDraw .3s ease .12s both; }
@keyframes osTickDraw { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .os-tile.sel, .os-tile .os-tick, .os-tile .os-tick svg { animation: none !important; } }
.os-tile .ot-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.os-tile .ot-name { font-weight: 700; font-size: 13px; }
.os-tile .ot-ver { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.os-tile select { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 8px; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--text-2); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; }
/* версия ОС: кастомный select внутри плитки */
.os-tile .ot-ver-sel { margin-top: 2px; }
.os-tile .ot-ver-sel .fsel-btn { height: 32px; font-size: 11.5px; font-weight: 600; padding: 0 8px; }
.os-tile:hover { transform: none; }
.os-tile { transition: border-color .14s, box-shadow .14s; }
.os-tile:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-soft-bd); }
.os-tile:has(.fsel.open) { z-index: 20; }
/* плитки с одной версией: центрируем крупный логотип + полное имя, заполняя плитку */
.os-tile-single { display: flex; align-items: center; justify-content: center; }
.os-tile-single .ot-single { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; text-align: center; padding: 6px 4px; }
.os-tile-single .ot-single .ot-name { font-weight: 700; font-size: 15px; line-height: 1.3; text-wrap: balance; }
/* пометка «популярная для VPS» — звёздочка в углу */
.os-tile .os-pop { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber, #e0a83a); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px -2px rgba(0,0,0,.4); z-index: 2; transition: right .32s cubic-bezier(.34,1.4,.5,1); }
.os-tile.sel .os-pop { right: 34px; animation: osPopNudge .5s cubic-bezier(.34,1.56,.5,1); }
@keyframes osPopNudge { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.3) rotate(-18deg); } 70% { transform: scale(1.12) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .os-tile.sel .os-pop { animation: none; transition: none; } }
.os-tile .os-pop svg { fill: currentColor; }

/* IPv4 stepper */
.ipv4-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; height: 42px; }
.ipv4-stepper button { width: 42px; height: 100%; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--accent-deep); background: var(--surface); transition: background .12s; }
.ipv4-stepper button:hover:not(:disabled) { background: var(--accent-soft); }
.ipv4-stepper button:disabled { color: var(--text-3); opacity: .4; cursor: not-allowed; }
.ipv4-stepper .ipv4-val { width: 52px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); height: 100%; display: grid; place-items: center; }

/* summary panel (glassy, AI) */
.sum-panel { position: sticky; top: 20px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface); }
.sum-panel .spx { padding: 18px 20px; }
.sum-period { margin-bottom: 16px; }
.sum-period label { font-size: 12px; font-weight: 700; color: var(--text-2); display: block; margin-bottom: 7px; }
.sum-break { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sum-break .sb { display: flex; justify-content: space-between; font-size: 13px; }
.sum-break .sb .k { color: var(--text-3); font-weight: 600; }
.sum-break .sb .v { font-weight: 700; font-family: var(--font-mono); }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0 4px; }
.sum-total .tl { font-weight: 800; font-size: 15px; }
.sum-total .tv { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--accent-deep); }
.sum-total .tv small { font-size: 13px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }
.sum-cta { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.sum-auto { display: flex; gap: 11px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); align-items: flex-start; }
.sum-auto .note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* toggle switch */
.switch { width: 40px; height: 23px; border-radius: 20px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .28s cubic-bezier(.4,0,.2,1); flex-shrink: 0; border: none; }
.switch.on { background: var(--accent); }
.switch::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .32s cubic-bezier(.34,1.56,.5,1), width .2s ease; }
.switch:active::after { width: 22px; }
.switch.on:active::after { transform: translateX(13px); }
.switch.on::after { transform: translateX(17px); }

/* AI suggestion strip inside configurator */
.ai-strip { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 22px; border: 1px solid color-mix(in oklch, var(--ai) 28%, transparent); background: linear-gradient(100deg, var(--ai-soft), color-mix(in oklch, var(--ai-soft) 40%, var(--surface))); }
.ai-strip .ai-ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--ai), var(--accent)); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px color-mix(in oklch, var(--ai) 35%, transparent); }
.ai-strip .ai-tx { flex: 1; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.ai-strip .ai-tx b { color: var(--text); }

/* cart */
.cart-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cart-item:last-of-type { border-bottom: none; }
.cart-item .ci-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; }
.cart-item .ci-name { font-weight: 700; font-size: 14px; }
.cart-item .ci-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cart-item .ci-price { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 16px; white-space: nowrap; }
.cart-item .ci-price small { font-size: 11px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }

@media (max-width: 1100px) {
  .order-layout, .cfg-grid2 { grid-template-columns: 1fr; }
  .sum-panel { position: static; }
  .os-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .pl-row { grid-template-columns: 1fr; }
  .os-tiles { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- DASHBOARD ---------- */
.dash-hero { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.quick {
  display: flex; flex-direction: column; gap: 11px; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow .25s cubic-bezier(.2,.7,.3,1), border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1); cursor: pointer; text-align: left; min-height: 104px;
  position: relative; overflow: hidden;
}
.quick::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(99,194,72,.10), transparent); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; }
.quick:hover { box-shadow: 0 12px 28px rgba(74,155,52,.16); border-color: var(--accent-soft-bd); transform: translateY(-4px); }
.quick:hover::after { left: 130%; }
.quick:active { transform: translateY(-1px) scale(.99); }
.quick .qi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.quick:hover .qi { transform: scale(1.1) rotate(-4deg); box-shadow: 0 6px 14px rgba(74,155,52,.22); }
.quick .qt { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; line-height: 1.25; margin-top: auto; }

.dash-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }

/* account dropdown (topbar) */
.acct-wrap { position: relative; }
.acct.open { background: var(--accent-soft); }
.acct-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 14px 40px rgba(10,20,40,.16)); overflow: hidden; z-index: 120; padding: 5px; }
.acct-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; border-radius: calc(var(--r-md) - 4px); }
.acct-item:hover { background: var(--accent-soft); }
.acct-item .ai-ic { display: inline-flex; color: var(--text-2); }

/* account info card */
.acct-card { padding: 4px 0; }
.acct-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.acct-row:last-child { border-bottom: none; }
.acct-row .k { color: var(--text-2); font-weight: 600; }
.acct-row .v { font-weight: 700; }

/* balance hero card */
.balance-card { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border: none; padding: 22px; position: relative; overflow: hidden; }
.balance-card .glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); top: -100px; right: -70px; pointer-events: none; }
.balance-card .bl { font-size: 13px; opacity: .9; font-weight: 600; }
.balance-card .bv { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.balance-card .bmeta { margin-top: 4px; opacity: .85; font-size: 12.5px; }
.balance-card .btn { margin-top: 16px; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); }
.balance-card .btn:hover { background: rgba(255,255,255,.26); }

/* request (ticket) row */
.req-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
.req-row:last-child { border-bottom: none; }
.req-row:hover { background: var(--surface-2); }
.req-row .ri { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.req-row .rt { font-weight: 700; font-size: 13.5px; }
.req-row .rm { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* service mini card */
.svc-mini { display: flex; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background .1s; }
.svc-mini:last-child { border-bottom: none; }
.svc-mini:hover { background: var(--surface-2); }
.svc-os { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; }

/* ---------- STOREFRONT (Заказ услуги) ---------- */
.store-layout { display: grid; grid-template-columns: 1fr 232px; gap: 24px; align-items: start; }
.cat-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 3px; }
.cat-rail .ct { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: var(--r-md); font-weight: 600; font-size: 13.5px; color: var(--text-2); transition: background .12s, color .12s; text-align: left; }
.cat-rail .ct:hover { background: var(--bg-2); color: var(--text); }
.cat-rail .ct.active { background: var(--accent-soft); color: var(--accent-deep); }
.cat-rail .ct.active svg { color: var(--accent); }
.cat-rail .ct svg { color: var(--text-3); }
.cat-rail .ct .cc { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-weight: 700; }

.store-section { margin-bottom: 34px; }
.store-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.store-section-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.store-section-head .cnt { font-size: 12px; color: var(--text-3); font-weight: 700; background: var(--bg-2); padding: 2px 8px; border-radius: 20px; }

.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tariff {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 20px; display: flex; flex-direction: column; gap: 15px; transition: box-shadow .16s, border-color .16s, transform .16s; position: relative; overflow: hidden;
}
.tariff:hover { box-shadow: var(--shadow-md); border-color: var(--accent-soft-bd); transform: translateY(-3px); }
.tariff.hot { border-color: var(--accent-soft-bd); box-shadow: 0 0 0 1px var(--accent-soft-bd), var(--shadow-md); }
.tariff .hot-tag { position: absolute; top: 14px; right: -30px; transform: rotate(45deg); background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 36px; letter-spacing: .04em; }
.tariff-top { display: flex; align-items: flex-start; gap: 12px; }
.tariff-chip { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-deep); }
.tariff-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; }
.tariff-dc { font-size: 12.5px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.tariff-specs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.spec { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.spec:last-child { border-bottom: none; }
.spec svg { color: var(--text-3); flex-shrink: 0; }
.spec .sk { color: var(--text-2); font-weight: 500; }
.spec .sv { margin-left: auto; font-weight: 700; font-family: var(--font-mono); font-size: 12.5px; }
.tariff-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tariff-price { line-height: 1.1; }
.tariff-price .amt-old { font-size: 12.5px; color: var(--text-3); text-decoration: line-through; font-weight: 600; font-family: var(--font-ui); margin-bottom: 1px; }
.amt-from { font-size: 0.62em; font-weight: 700; color: var(--text-3); }
.tariff-price .amt { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tariff-price .per { font-size: 12px; color: var(--text-3); font-weight: 600; }
.tariff-foot .btn { margin-left: auto; }

/* virtual server rows (compact tariffs) */
.vrow { display: grid; grid-template-columns: 1.4fr 2.2fr auto auto; gap: 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background .1s; }
.vrow:last-child { border-bottom: none; }
.vrow:hover { background: var(--surface-2); }
.vrow .vname { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.vrow .vdc { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.vrow .vspecs { display: flex; gap: 18px; flex-wrap: wrap; }
.vspec { font-size: 12.5px; }
.vspec .vk { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.vspec .vv { font-weight: 700; font-family: var(--font-mono); }
.vrow .vprice { font-family: var(--font-display); font-weight: 800; font-size: 17px; white-space: nowrap; }
.vrow .vprice small { font-size: 11px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }

/* ---------- PAYMENT WIZARD (Оплата) ---------- */
.steps { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 22px; font-size: 13px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); }
.step .sn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--bg-2); color: var(--text-3); }
.step.active { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-soft-bd); }
.step.active .sn { background: var(--accent); color: #fff; }
.step.done { color: var(--green); }
.step.done .sn { background: var(--green); color: #fff; }
.step-arrow { color: var(--text-3); }

.amount-box { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.input { height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-weight: 600; font-size: 15px; transition: border-color .12s, box-shadow .12s, color .4s ease, text-shadow .4s ease; outline: none; }
.input:focus { border-color: var(--accent-soft-bd); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-lg { font-size: 20px; font-family: var(--font-display); font-weight: 800; }

.pay-group-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.pay-method { display: flex; align-items: center; gap: 15px; padding: 15px 18px; border-bottom: 1px solid var(--border); transition: background .1s; }
.pay-method:last-child { border-bottom: none; }
.pay-method:hover { background: var(--surface-2); }
.pay-logo { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 12px; color: #fff; }
.pay-name { font-weight: 700; font-size: 14px; }
.pay-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pay-method .btn { margin-left: auto; }

/* ---------- TICKET DETAIL (chat) ---------- */
.chat-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.chat { display: flex; flex-direction: column; gap: 18px; padding: 6px 4px; min-height: 280px; }
.chat-empty { margin: auto; text-align: center; color: var(--text-3); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0; }
.chat-empty .ce-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.msg { display: flex; gap: 13px; max-width: 80%; }
.msg.me { margin-left: auto; flex-direction: row-reverse; }
.msg .mav { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff; box-shadow: 0 3px 10px -3px rgba(0,0,0,.25); }
.msg .mbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg.me .mbody { align-items: flex-end; }
.msg .mhead { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.msg .mname { font-weight: 700; }
.msg .mtime { color: var(--text-3); }
.bubble { padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); word-break: break-word; }
.msg.me .bubble { background: linear-gradient(140deg, color-mix(in oklch, var(--accent) 16%, var(--surface)), var(--accent-soft)); border-color: var(--accent-soft-bd); border-bottom-right-radius: 5px; }
.msg.op .bubble { border-bottom-left-radius: 5px; }
/* тело сообщения тикета рендерится как HTML из панели — сохраняем абзацы и списки (как в оригинале) */
.bubble.ticket-md > :first-child { margin-top: 0; }
.bubble.ticket-md > :last-child { margin-bottom: 0; }
.bubble.ticket-md p { margin: 0 0 8px; }
.bubble.ticket-md ul, .bubble.ticket-md ol { margin: 6px 0; padding-left: 22px; }
.bubble.ticket-md ul { list-style: disc; }
.bubble.ticket-md ol { list-style: decimal; }
.bubble.ticket-md li { margin: 3px 0; }
.bubble.ticket-md a { color: var(--accent-deep); text-decoration: underline; word-break: break-all; }
.bubble.ticket-md h1, .bubble.ticket-md h2, .bubble.ticket-md h3, .bubble.ticket-md h4 { margin: 8px 0 4px; font-size: 1em; font-weight: 800; }
.bubble.ticket-md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-2); }
.bubble.ticket-md code { background: rgba(127,127,127,.16); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.bubble.ticket-md hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
/* code-блок команды (как в оригинале): рамка + шапка «код» + кнопка «Копировать» */
.bubble.ticket-md .codeblock { margin: 8px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-2, rgba(127,127,127,.08)); }
.bubble.ticket-md .codeblock:first-child { margin-top: 0; }
.bubble.ticket-md .codeblock:last-child { margin-bottom: 0; }
.bubble.ticket-md .code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px 5px 12px; background: rgba(127,127,127,.12); border-bottom: 1px solid var(--border); }
.bubble.ticket-md .code-lang { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.bubble.ticket-md .code-copy { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.bubble.ticket-md .code-copy:hover { color: var(--accent-deep); border-color: var(--accent-soft-bd); }
.bubble.ticket-md .code-copy.ok { color: var(--green); border-color: var(--green-soft-bd, var(--border)); }
.bubble.ticket-md .codeblock pre { margin: 0; padding: 10px 12px; background: none; border: none; border-radius: 0; overflow-x: auto; }
.bubble.ticket-md pre { background: rgba(127,127,127,.12); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; }
.bubble.ticket-md pre, .bubble.ticket-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

.editor { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.editor-toolbar { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fmt-btn { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); font-weight: 700; }
.fmt-btn:hover { background: var(--bg-2); color: var(--text); }
.fmt-btn { transition: background .14s ease, color .14s ease, transform .1s ease; }
.fmt-btn:active { transform: scale(.9); }
.fmt-btn:disabled { opacity: .4; pointer-events: none; }
.fmt-preview { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: 32px; white-space: nowrap; line-height: 1; }
.fmt-preview.on { background: var(--accent-soft); color: var(--accent-deep); }
.editor-preview { padding: 14px; font-size: 13.5px; line-height: 1.55; min-height: 96px; color: var(--text); }
.editor-preview p { margin: 0 0 8px; }
.editor-preview h4 { margin: 4px 0 8px; font-size: 15px; font-weight: 800; }
.editor-preview blockquote { margin: 0 0 8px; padding: 4px 12px; border-left: 3px solid var(--accent-soft-bd); color: var(--text-2); background: var(--accent-soft); border-radius: 0 6px 6px 0; }
.editor-preview li { margin-left: 18px; }
.editor-preview code { font-family: var(--font-mono, monospace); font-size: 12.5px; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }
.editor-preview a { color: var(--accent-deep); font-weight: 600; }
.editor-preview .ep-empty { color: var(--text-3); font-style: italic; }
.attach-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.attach-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); max-width: 240px; }
.attach-chip .ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .ac-size { color: var(--text-3); font-size: 11px; flex-shrink: 0; }
.attach-chip .ac-x { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--text-3); flex-shrink: 0; transition: background .14s, color .14s; }
.attach-chip .ac-x:hover { background: var(--danger-soft, #fde8e6); color: var(--danger, #d9453b); }
.fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.editor textarea { width: 100%; border: none; outline: none; resize: none; padding: 14px; background: none; font-size: 13.5px; min-height: 96px; line-height: 1.5; }
.dropzone { margin: 0 14px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); padding: 16px; text-align: center; color: var(--text-3); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dropzone:hover { border-color: var(--accent-soft-bd); color: var(--accent-deep); background: var(--accent-soft); }
.dropzone.over { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); border-style: solid; }
.avatar-replace { margin-left: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: 99px; padding: 3px 10px; }
.editor-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }

.rating { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-2); }
.rate-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; transition: all .12s; }
.rate-btn:hover { border-color: var(--accent-soft-bd); background: var(--accent-soft); transform: scale(1.05); }

/* info side panel */
.info-list .il { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.info-list .il:last-child { border-bottom: none; }
.info-list .ilk { color: var(--text-2); font-weight: 600; }
.info-list .ilv { font-weight: 700; }

/* ---------- referral / discounts / promo cards ---------- */
.copy-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.copy-field .cf-val { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.promo-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.promo-card .pp { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.promo-card > div:last-child > div { gap: 14px; align-items: baseline; }
.promo-card > div:last-child > div > b { text-align: right; }

/* form sections */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.fgroup { display: flex; flex-direction: column; gap: 7px; }
.fgroup label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.fgroup .input { height: 42px; font-size: 14px; }
.fgroup select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2363C248' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background-position .2s ease; }
.fgroup select.input:hover { border-color: var(--accent-soft-bd); background-position: right 10px center; }
.fgroup select.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* подсветка выбранного пункта в открытом списке — зелёная вместо системной синей */
.fgroup select.input { accent-color: var(--accent); }
.fgroup select.input option { background: var(--surface); color: var(--text-1); font-weight: 600; padding: 8px; }
.fgroup select.input option:checked, .fgroup select.input option:hover { background: var(--accent-soft); color: var(--accent-deep); }
.fgroup select.input:disabled { cursor: not-allowed; opacity: .7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
[data-theme="dark"] .fgroup select.input:disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ===== кастомный выпадающий список FancySelect ===== */
.fsel { position: relative; }
.fsel.full { width: 100%; }
.fsel-btn { display: flex; align-items: center; gap: 9px; width: 100%; height: 42px; cursor: pointer; text-align: left; font-weight: 600; font-size: 14px; }
.fsel-btn:hover:not(:disabled) { border-color: var(--accent-soft-bd); }
.fsel.open .fsel-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fsel.disabled .fsel-btn { cursor: not-allowed; opacity: .7; background: var(--bg-2); }
.fsel-lead { display: inline-flex; flex-shrink: 0; }
.fsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-val.ph { color: var(--text-3); font-weight: 500; }
.fsel-chev { display: inline-flex; color: var(--accent); flex-shrink: 0; transition: transform .2s ease; }
.fsel.open .fsel-chev { transform: rotate(180deg); }
.fsel-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 14px 40px -12px rgba(0,0,0,.28)); overflow: hidden; animation: fselIn .16s cubic-bezier(.22,.8,.3,1); }
@keyframes fselIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
.fsel-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; height: 40px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.fsel-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--text-1); height: 100%; }
.fsel-list { max-height: 260px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.fsel-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--text-1); text-align: left; transition: background .1s ease, color .1s ease; }
.fsel-opt.hi { background: var(--accent-soft); color: var(--accent-deep); }
.fsel-opt.on { color: var(--accent-deep); }
.fsel-opt-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-opt-ic { display: inline-flex; flex-shrink: 0; }
.fsel-opt-ck { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.fsel-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ===== анимации графика доходов ===== */
.chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chartDraw 1.05s ease forwards; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
.chart-pt { transition: r .18s cubic-bezier(.34,1.6,.64,1); }
.chart-fade-in { opacity: 0; animation: chartFadeIn .42s ease forwards; }
@keyframes chartFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.chart-halo { transform-box: fill-box; transform-origin: center; animation: chartHalo 1.5s ease-out infinite; }
@keyframes chartHalo { 0% { opacity: .4; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(2.8); } }
.chart-tip { transform-box: fill-box; transform-origin: center bottom; animation: chartTipIn .2s cubic-bezier(.34,1.56,.64,1); }
@keyframes chartTipIn { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line { animation: none; stroke-dashoffset: 0; }
  .chart-fade-in { animation: none; opacity: 1; }
  .chart-halo { animation: none; opacity: 0; }
  .chart-tip { animation: none; }
}

/* input with trailing icon actions */
.input-wrap { position: relative; }
.input-wrap .input { width: 100%; padding-right: 78px; }
.input-acts { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: flex; gap: 2px; }
.input-act { width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-3); cursor: pointer; transition: background .16s ease, color .16s ease, transform .1s ease; position: relative; overflow: hidden; }
.input-act:hover { background: var(--bg-2); color: var(--text-1); }
.input-act:active { transform: scale(.88); }
.input-act svg { transition: transform .2s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 1; }
/* мягкая вспышка-«пульс» при нажатии */
.input-act::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; transform: scale(.4); }
.input-act:active::after { animation: actPulse .42s ease; }
@keyframes actPulse { 0% { opacity: .18; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* кнопка генерации: «бросок» при клике через JS (Web Animations) — без hover-трансформа, чтобы не было рывка в конце */
.input-act-gen { color: var(--text-3); }
.input-act-gen:hover { color: var(--accent-deep); }

/* кнопка показа пароля: плавное «моргание» при переключении */
.input-act-eye:hover svg { transform: scale(1.14); }
.input-act-eye:active svg { animation: eyeBlink .34s ease; }
@keyframes eyeBlink { 0% { transform: scaleY(1); } 40% { transform: scaleY(.08); } 100% { transform: scaleY(1); } }
.input-act-eye.on { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .input-act svg, .input-act::after, .input-act-eye:active svg { animation: none !important; }
}
.input-act.ok { color: var(--green); background: var(--green-soft); }
.gen-hint { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--green); opacity: 0; max-height: 0; margin-top: 0; transform: translateY(-4px); overflow: hidden; transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin-top .35s ease; pointer-events: none; }
.gen-hint.show { opacity: 1; max-height: 24px; margin-top: 7px; transform: none; }

/* country select with flags */
.csel { position: relative; }
.csel-btn { width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; }
.csel-btn .csel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn .csel-chev { display: grid; place-items: center; color: var(--text-3); transition: transform .15s; }
.csel.open .csel-btn .csel-chev { transform: rotate(180deg); }
.csel.open .csel-btn { border-color: var(--accent-soft-bd); box-shadow: 0 0 0 3px var(--accent-soft); }
.csel-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; animation: cselIn .14s ease; }
@keyframes cselIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .csel-pop { animation: none; } }
.csel-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.csel-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--text-1); height: 100%; }
.csel-list { max-height: 248px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.csel-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--text-1); text-align: left; }
.csel-opt .csel-oname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-opt:hover { background: var(--bg-2); }
.csel-opt.active { background: var(--accent-soft); color: var(--accent-deep); }
.csel-none { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; }

/* роли: форма создания */
.req { color: var(--red); }
.f-hint { font-size: 12px; color: var(--text-3); font-weight: 600; }
.f-err { font-size: 12px; color: var(--red); font-weight: 700; }
.f-opt { color: var(--text-3); font-weight: 600; text-transform: none; }
.input-err { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft) !important; }
.trans-row { display: grid; grid-template-columns: 150px 1fr 36px; gap: 10px; align-items: center; }
.trans-row .input-act { justify-self: center; }
.trans-lang { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.lang-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.lang-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1.5px dashed var(--border-strong); border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); transition: border-color .12s, color .12s, background .12s; }
.lang-chip:hover { border-color: var(--accent-soft-bd); border-style: solid; color: var(--accent-deep); background: var(--accent-soft); }
.flash-ok { display: flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); padding: 10px 14px; border-radius: var(--r-md); font-weight: 700; font-size: 13.5px; margin-bottom: 14px; overflow: hidden; animation: flashOkIn .34s cubic-bezier(.2,1,.35,1); }
.flash-ok.out, .flash-ok.is-closing { animation: flashOkOut .42s cubic-bezier(.4,0,.6,1) forwards; }
.flash-ok svg { flex-shrink: 0; animation: flashOkPop .4s cubic-bezier(.34,1.6,.5,1) .08s both; }
@keyframes flashOkIn { from { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } to { opacity: 1; transform: none; max-height: 60px; } }
@keyframes flashOkOut { from { opacity: 1; transform: none; max-height: 60px; } to { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } }
@keyframes flashOkPop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.2) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .flash-ok, .flash-ok.out, .flash-ok svg { animation: none; } }

/* живые данные BILLmanager: индикатор загрузки / ошибки */
.live-bar { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.live-bar.live-wait { background: var(--accent-soft); color: var(--accent-deep); }
.live-bar.live-err { background: var(--red-soft); border: 1px solid color-mix(in oklch, var(--red) 35%, transparent); color: var(--text); align-items: center; gap: 13px; box-shadow: 0 4px 16px -8px color-mix(in oklch, var(--red) 45%, transparent); animation: lvErrIn .26s cubic-bezier(.2,.9,.3,1.1); }
@keyframes lvErrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.live-bar.live-err > svg { color: var(--red); flex-shrink: 0; margin-top: 1px; }
.lv-err-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklch, var(--red) 16%, transparent); color: var(--red); flex-shrink: 0; }
.lv-retry { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: var(--r-sm); font: inherit; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--red); cursor: pointer; transition: filter .16s ease, transform .12s ease, box-shadow .16s ease; }
.lv-retry svg { transition: transform .4s cubic-bezier(.34,1.4,.5,1); }
.lv-retry:hover { filter: brightness(1.06); box-shadow: 0 4px 12px -4px color-mix(in oklch, var(--red) 60%, transparent); }
.lv-retry:hover svg { transform: rotate(-180deg); }
.lv-retry:active { transform: scale(.96); }
.live-bar .lv-msg { font-weight: 500; font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.live-bar.live-err b { font-size: 13.5px; }
.lv-spin { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: lvspin .7s linear infinite; flex-shrink: 0; }
@keyframes lvspin { to { transform: rotate(360deg); } }
/* анимированная плашка загрузки: плавное появление/уход, бегущий блик, орбита и «...» */
.live-wait-anim { position: relative; overflow: hidden; animation: lvWaitIn .4s cubic-bezier(.2,1,.4,1.05); }
.live-wait-anim.is-out { animation: lvWaitOut .4s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes lvWaitIn { from { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } to { opacity: 1; transform: none; max-height: 56px; } }
@keyframes lvWaitOut { from { opacity: 1; transform: none; max-height: 56px; margin-bottom: 14px; } to { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } }
.lv-orbit { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.lv-orbit i { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: currentColor; animation: lvOrbit 1.1s ease-in-out infinite; }
.lv-orbit i:nth-child(2) { animation-delay: .15s; }
.lv-orbit i:nth-child(3) { animation-delay: .3s; }
@keyframes lvOrbit { 0%, 100% { transform: translate(-6px, 0) scale(.6); opacity: .4; } 50% { transform: translate(6px, 0) scale(1); opacity: 1; } }
.lv-wait-txt { position: relative; z-index: 1; }
.lv-ell i { opacity: 0; animation: lvEll 1.3s steps(1) infinite; }
.lv-ell i:nth-child(2) { animation-delay: .25s; }
.lv-ell i:nth-child(3) { animation-delay: .5s; }
@keyframes lvEll { 0%, 80%, 100% { opacity: 0; } 30% { opacity: 1; } }
.lv-sweep { position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, color-mix(in oklch, var(--accent) 22%, transparent), transparent); transform: skewX(-16deg); animation: lvSweep 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes lvSweep { 0% { left: -40%; } 60%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .live-wait-anim, .live-wait-anim.is-out, .lv-orbit i, .lv-ell i, .lv-sweep { animation: none; } .lv-sweep { display: none; } .lv-ell i { opacity: 1; } }

/* вход / BILLmanager API */
.login-stage { min-height: 100vh; display: grid; place-items: center; background: #0e1f12; padding: 24px; }
/* премиум-фон: глубокая зелёная аврора + точечная сетка + парящие орбы + подсветка за курсором */
.login-stage-mesh { position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 15% 18%, #2f6e34 0%, transparent 48%),
    radial-gradient(110% 110% at 88% 22%, #4ea33f 0%, transparent 46%),
    radial-gradient(130% 130% at 75% 95%, #1c4a22 0%, transparent 52%),
    linear-gradient(135deg, #1a3d1d, #2c6a30 45%, #1f4d24 100%); }
/* аврора-пятна смещаются параллаксом за курсором */
.login-stage-mesh::before, .login-stage-mesh::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(64px); opacity: .48; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.login-stage-mesh::before { width: 52vw; height: 52vw; left: -10vw; top: -12vw; background: radial-gradient(circle, #7fcf57, transparent 65%); animation: loginAur1 18s ease-in-out infinite; transform: translate(var(--px,0), var(--py,0)); }
.login-stage-mesh::after { width: 46vw; height: 46vw; right: -12vw; bottom: -14vw; background: radial-gradient(circle, #6bc24a, transparent 65%); animation: loginAur2 22s ease-in-out infinite; transform: translate(calc(var(--px,0) * -1.4), calc(var(--py,0) * -1.4)); }
@keyframes loginAur1 { 0%,100%{ background-position:0 0;} 50%{ filter: brightness(1.15);} }
@keyframes loginAur2 { 0%,100%{ background-position:0 0;} 50%{ filter: brightness(1.12);} }
/* точечная сетка поверх */
.login-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 34px 34px; mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 80%); transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.login-stage-mesh:hover .login-grid { transform: translate(calc(var(--px,0) * .4), calc(var(--py,0) * .4)); }
/* интерактивная сеть-созвездие на канвасе */
.login-net { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.login-card { width: 100%; max-width: 400px; padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 5; background: #fff; box-shadow: 0 30px 80px -24px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.12); }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-cube { position: relative; }
.login-tabs { position: relative; display: flex; gap: 4px; background: var(--bg-2, #eef3ee); border-radius: var(--r-md); padding: 4px; }
.login-tab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); background: #fff; border-radius: calc(var(--r-md) - 3px); box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: transform .34s cubic-bezier(.5,1.3,.4,1); z-index: 0; }
.login-tabs-register .login-tab-pill { transform: translateX(calc(100% + 4px)); }
.login-tab { position: relative; z-index: 1; flex: 1; padding: 8px 0; border: none; background: none; border-radius: calc(var(--r-md) - 3px); font-weight: 700; font-size: 13.5px; color: var(--text-3); cursor: pointer; transition: color .28s ease; }
.login-tab.on { color: #2e7d24; }
.login-tab:not(.on):hover { color: var(--text-2); }
.login-mode { display: flex; flex-direction: column; gap: 16px; animation: loginModeIn .32s cubic-bezier(.2,.7,.3,1); }
@keyframes loginModeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-mode { animation: none; } }
/* выбор страны с флагами (регистрация) */
.cpick { position: relative; }
.cpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; width: 100%; }
.cpick-cur { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cpick-cur .flag { border-radius: 3px; flex-shrink: 0; }
.cpick-globe { color: var(--text-3); display: inline-flex; }
.cpick-ph { color: var(--text-3); }
.cpick-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 16px 44px rgba(10,20,40,.2); overflow: hidden; animation: cpickIn .16s ease; }
@keyframes cpickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cpick-search { padding: 8px; border-bottom: 1px solid var(--border); }
.cpick-search .input { height: 36px; }
.cpick-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.cpick-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; color: var(--text-1); text-align: left; transition: background .12s ease; }
.cpick-item:hover { background: var(--bg-2, #eef3ee); }
.cpick-item.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.cpick-item .flag { border-radius: 3px; flex-shrink: 0; }
.cpick-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; }
/* кнопка смены темы в углу экрана входа */
.login-theme-btn { position: absolute; top: 20px; right: 22px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
/* переключатель языка на экране входа */
.login-lang { position: absolute; top: 22px; right: 76px; z-index: 6; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.login-lang-opt { border: none; background: none; cursor: pointer; font-weight: 800; font-size: 12px; color: rgba(255,255,255,.7); padding: 5px 10px; border-radius: 999px; transition: background .16s ease, color .16s ease; }
.login-lang-opt.on { background: #fff; color: var(--accent-deep, #2e7d24); }
.login-lang-opt:not(.on):hover { color: #fff; }
.login-theme-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.08) rotate(-12deg); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.login-theme-btn .ltb-sun, .login-theme-btn .ltb-moon { position: absolute; display: inline-flex; transition: opacity .25s ease, transform .35s cubic-bezier(.5,1.3,.4,1); }
.login-theme-btn .ltb-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="dark"] .login-theme-btn .ltb-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="dark"] .login-theme-btn .ltb-moon { opacity: 1; transform: none; }
/* анимация логотипа-кубика при наведении — премиальное мягкое «парение» */
.login-cube { transition: transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s ease; border-radius: 12px; }
.login-cube img { transition: transform .5s cubic-bezier(.22,.8,.3,1), filter .5s ease; will-change: transform; }
.login-logo:hover .login-cube { transform: translateY(-3px); }
.login-logo:hover .login-cube img { transform: scale(1.06); filter: drop-shadow(0 8px 14px rgba(99,194,72,.35)); animation: cubeFloat 3.2s ease-in-out infinite .5s; }
@keyframes cubeFloat { 0%,100% { transform: scale(1.06) translateY(0) rotate(0); } 50% { transform: scale(1.06) translateY(-3px) rotate(1.5deg); } }
/* мягкое свечение-ореол под кубиком при наведении */
.login-cube::after { content: ''; position: absolute; inset: 2px; border-radius: 14px; background: radial-gradient(circle, rgba(99,194,72,.4), transparent 68%); opacity: 0; transition: opacity .5s ease; z-index: -1; }
.login-logo:hover .login-cube::after { opacity: 1; animation: cubePulse 2.6s ease-in-out infinite; }
@keyframes cubePulse { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.1); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .login-cube, .login-theme-btn { transition: none; } .login-logo:hover .login-cube img { animation: none; } .login-logo:hover .login-cube::after { animation: none; } }

/* ===== Тёмная тема экрана входа ===== */
[data-theme="dark"] .login-stage { background: #0a1410; }
[data-theme="dark"] .login-stage-mesh {
  background:
    radial-gradient(120% 120% at 15% 18%, #103021 0%, transparent 48%),
    radial-gradient(110% 110% at 88% 22%, #185c3a 0%, transparent 46%),
    radial-gradient(130% 130% at 75% 95%, #07140d 0%, transparent 52%),
    linear-gradient(135deg, #08160e, #0e2a1a 45%, #091c12 100%); }
[data-theme="dark"] .login-stage-mesh::before { background: radial-gradient(circle, #2f7d46, transparent 65%); opacity: .32; }
[data-theme="dark"] .login-stage-mesh::after { background: radial-gradient(circle, #1f7a58, transparent 65%); opacity: .3; }
[data-theme="dark"] .login-card { background: #121a16 !important; border: 1px solid #243029; box-shadow: 0 30px 80px -24px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .login-card .login-sub { color: #8aa394; }
[data-theme="dark"] .login-card .login-brand { color: #eef4f0; }
[data-theme="dark"] .login-card label { color: #b6c7bd; }
[data-theme="dark"] .login-card .input { background: #1b241f; border-color: #2c3a31; color: #e8efea; }
[data-theme="dark"] .login-card .input::placeholder { color: #6f8377; }
[data-theme="dark"] .login-tabs { background: #1b241f; }
[data-theme="dark"] .login-tab-pill { background: #2a3a30; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
[data-theme="dark"] .login-tab { color: #8aa394; }
[data-theme="dark"] .login-tab.on { color: #8ee06a; }
[data-theme="dark"] .cpick-pop { background: #1b241f; border-color: #2c3a31; }
[data-theme="dark"] .cpick-item { color: #e8efea; }
[data-theme="dark"] .cpick-item:hover { background: #243029; }
[data-theme="dark"] .login-foot .link { color: #8ee06a; }
.login-brand { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.login-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.login-err { display: flex; gap: 9px; align-items: flex-start; background: var(--red-soft, #fde8e8); color: var(--red); border-radius: var(--r-md); padding: 11px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.login-err svg { flex-shrink: 0; margin-top: 1px; }
/* «сессия завершена» на входе — понятная надпись при вылете (как в оригинале), спокойный янтарь */
.login-expired { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px; background: var(--amber-soft, rgba(224,165,47,.14)); color: var(--amber, #b5791b); border: 1px solid rgba(224,165,47,.35); border-radius: var(--r-md); padding: 11px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.login-expired svg { flex-shrink: 0; margin-top: 1px; }
/* уведомление о финальном тестировании новой панели (нейтральное, всегда видно на экране входа) */
.login-notice { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; background: var(--sky-soft, rgba(74,144,226,.12)); color: var(--text-2); border: 1px solid rgba(74,144,226,.28); border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.login-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--sky, #4a90e2); }
.login-notice a { color: var(--accent-deep); font-weight: 800; text-decoration: underline; white-space: nowrap; }
.login-foot { display: flex; justify-content: space-between; gap: 10px; }
.login-foot .link { color: var(--accent-deep); font-weight: 700; font-size: 12.5px; }
.bm-toast { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; gap: 11px; align-items: flex-start; max-width: 380px; background: var(--surface); color: var(--text); border: 1px solid var(--red); border-left: 4px solid var(--red); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-lg, 0 14px 40px rgba(10,20,40,.18)); overflow: hidden; animation: bmToastIn .42s cubic-bezier(.2,1.1,.35,1); }
.bm-toast.leaving { animation: bmToastOut .3s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes bmToastIn { 0% { opacity: 0; transform: translateX(40px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bmToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px) scale(.96); } }
.bm-toast-ic { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--red); animation: bmToastShake .5s ease .1s; }
@keyframes bmToastShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.1); } 40% { transform: rotate(10deg) scale(1.1); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
.bm-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--red); border-radius: 0 3px 0 0; transform-origin: left; animation: bmToastBar 6s linear forwards; opacity: .55; }
@keyframes bmToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .bm-toast, .bm-toast.leaving, .bm-toast-ic, .bm-toast-bar { animation: none; } }
.bm-toast > svg { color: var(--red); flex-shrink: 0; margin-top: 1px; }
.bm-toast-x { border: none; background: none; cursor: pointer; color: var(--text-3); padding: 2px; margin-left: 4px; border-radius: 5px; transition: background .14s ease, color .14s ease, transform .12s ease; }
.bm-toast-x:active { transform: scale(.85); }
.bm-toast-x:hover { color: var(--text); }
/* типы тостов: error / warning / success / info — цвет рамки, иконки и полосы */
.bm-toast { --toast-c: var(--red); }
.bm-toast.t-error   { --toast-c: var(--red); }
.bm-toast.t-warning { --toast-c: var(--amber, #e0a400); }
.bm-toast.t-success { --toast-c: var(--green, #2d8e43); }
.bm-toast.t-info    { --toast-c: var(--accent-deep, #2d8e43); }
.bm-toast { border-color: var(--toast-c); border-left-color: var(--toast-c); }
.bm-toast .bm-toast-ic, .bm-toast > svg { color: var(--toast-c); }
.bm-toast .bm-toast-bar { background: var(--toast-c); }
/* тряску оставляем только ошибке/предупреждению */
.bm-toast.t-success .bm-toast-ic, .bm-toast.t-info .bm-toast-ic { animation: none; }

/* роли: права */
.perm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.perm-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-3); min-width: 220px; }
.perm-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-1); flex: 1; min-width: 0; }
.perm-ghead { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--bg-2); border-top: 1px solid var(--border); }
.perm-ghead:first-child { border-top: none; }
.perm-ghead .pg-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--surface); color: var(--text-2); display: grid; place-items: center; box-shadow: var(--shadow-xs); flex-shrink: 0; }
.perm-ghead .pg-name { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); flex: 1; }
.perm-ghead .pg-count { font-size: 12px; font-weight: 700; color: var(--text-3); }
.perm-thead { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.perm-thead .pr-name { flex: 1; }
.perm-row { display: flex; align-items: center; gap: 12px; padding: 7px 18px; border-top: 1px solid var(--border); font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; }
.perm-row:hover { background: var(--surface-2); }
.perm-row.sel, .perm-row.sel:hover { background: var(--accent-soft); }
.perm-row .pr-name { flex: 1; min-width: 0; }
.perm-row .pr-name .pr-sub-ic { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--text-3); }
.perm-row .check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); background: var(--surface); flex-shrink: 0; position: relative; display: inline-block; }
.perm-row .check.on { background: var(--accent); border-color: var(--accent); }
.perm-row .check.on::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.fn-badge { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; flex-shrink: 0; }
.fn-r { background: var(--green); }
.fn-w { background: oklch(0.56 0.21 0); }
.fn-a { background: var(--sky); }
.fn-l { background: var(--text-3); }
.fn-s { background: var(--amber); }
.acc-btn { width: 32px; height: 26px; border: none; border-radius: 999px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; background: var(--green-soft); color: var(--green); transition: background .12s, color .12s; }
.acc-btn.off { background: var(--red-soft); color: var(--red); }
.acc-btn:hover { filter: brightness(0.95); }

/* формы плательщика */
.fsection { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: var(--r-sm); }
.input:disabled { background: var(--bg-2); color: var(--text-3); cursor: not-allowed; }
.fgroup label { display: inline-flex; align-items: center; gap: 5px; }
.fgroup label .hint-i { width: 15px; height: 15px; border-radius: 50%; background: var(--bg-2); color: var(--text-3); display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.section-sub { font-size: 13.5px; font-weight: 800; color: var(--text); margin: 4px 0 14px; }
.input.area { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; font: inherit; }
.phone-row { display: flex; gap: 8px; align-items: center; }
.phone-flag { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 42px; color: var(--text-3); }
.phone-cc { flex: 0 0 auto; max-width: 190px; }
.phone-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* IP-адрес чипом с кнопкой копирования (в списке услуг) */
.ip-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.ip-chip:hover { border-color: var(--accent-soft-bd); background: var(--accent-soft); }
.ip-chip-val { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .02em; }
.ip-chip-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface); color: var(--text-3); flex-shrink: 0; transition: background .35s ease, color .35s ease; }
.ip-chip:hover .ip-chip-btn { color: var(--accent-deep); }
/* одна анимация при копировании IP */
.ip-chip { transition: background .35s ease, border-color .35s ease; }
.ip-chip.copied { border-color: var(--accent); background: var(--accent-soft); animation: ipCopiedFlash .5s ease; }
.ip-chip.copied .ip-chip-btn { background: var(--accent); color: #fff; }
.ip-chip.copied .ip-chip-btn svg { animation: ipCopiedPop .4s cubic-bezier(.34,1.56,.64,1); }
.ip-chip .ip-chip-btn svg { animation: ipIconIn .28s ease; }
@keyframes ipCopiedFlash { 0% { box-shadow: 0 0 0 0 var(--accent-soft-bd); } 40% { box-shadow: 0 0 0 4px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ipCopiedPop { 0% { transform: scale(.5); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes ipIconIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ip-chip.copied, .ip-chip.copied .ip-chip-btn svg, .ip-chip .ip-chip-btn svg { animation: none; } }

/* компактный селектор кода страны (флаг + код дозвона) */
.ccsel { position: relative; flex: 0 0 auto; }
.ccsel-btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font: inherit; color: var(--text-1); }
.ccsel-btn:hover { border-color: var(--accent-soft-bd); }
.ccsel-code { font-weight: 700; font-size: 14px; min-width: 34px; }
.ccsel-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 300px; max-width: 80vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); overflow: hidden; transform-origin: top left; animation: ccselIn .17s cubic-bezier(.22,.8,.3,1); }
@keyframes ccselIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.ccsel-search { padding: 8px; border-bottom: 1px solid var(--border); }
.ccsel-search .input { height: 36px; }
.cur-sel { position: relative; width: 150px; }
.cur-sel-btn { width: 100%; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font: inherit; color: var(--text-1); transition: border-color .15s ease, box-shadow .15s ease; }
.cur-sel-btn:hover { border-color: var(--accent-soft-bd); }
.cur-sel-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cur-sel .cur-sym { font-weight: 800; font-family: var(--font-display); color: var(--accent-deep); width: 16px; text-align: center; }
.cur-sel .cur-code { font-weight: 700; font-size: 14px; }
.cur-sel-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16)); overflow: hidden; padding: 5px; transform-origin: top right; animation: curPop .2s cubic-bezier(.2,1,.4,1.05); }
@keyframes curPop { from { opacity: 0; transform: translateY(-8px) scale(.93); } to { opacity: 1; transform: none; } }
.cur-sel-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: none; background: none; border-radius: var(--r-sm, 8px); cursor: pointer; font: inherit; color: var(--text-1); text-align: left; transition: background .14s ease, padding-left .14s ease; animation: curOptIn .26s ease backwards; animation-delay: calc(var(--opt-i, 0) * 45ms + 50ms); }
@keyframes curOptIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.cur-sel-opt:hover { background: var(--bg-2); padding-left: 14px; }
.cur-sel-opt.on { background: var(--accent-soft); }
.cur-sel-opt .cur-name { color: var(--text-3); font-size: 12.5px; }
/* селект периода оплаты */
.per-sel { position: relative; width: 100%; }
.per-sel-btn { width: 100%; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--text-1); transition: border-color .15s ease, box-shadow .15s ease; }
.per-sel-btn:hover { border-color: var(--accent-soft-bd); }
.per-sel-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.per-sel-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16)); overflow: hidden; padding: 5px; animation: curPop .16s ease; }
.per-sel-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: none; background: none; border-radius: var(--r-sm, 8px); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-1); text-align: left; transition: background .14s ease, transform .12s ease; opacity: 0; animation: perOptIn .26s ease forwards; }
.per-sel-opt:nth-child(1) { animation-delay: .02s; }
.per-sel-opt:nth-child(2) { animation-delay: .07s; }
.per-sel-opt:nth-child(3) { animation-delay: .12s; }
.per-sel-opt:nth-child(4) { animation-delay: .17s; }
.per-sel-opt:nth-child(5) { animation-delay: .22s; }
@keyframes perOptIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.per-sel-opt:hover { background: var(--bg-2); }
.per-sel-opt:active { transform: scale(.97); }
.per-sel-opt.on { background: var(--accent-soft); animation: perOptIn .26s ease forwards, perOptPick .4s ease; }
@keyframes perOptPick { 0% { background: var(--accent); } 100% { background: var(--accent-soft); } }
.per-sel-opt .per-disc { font-weight: 800; font-size: 12px; color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) { .per-sel-opt { animation: none; opacity: 1; } }
/* завершающая анимация после выбора периода */
.per-sel-btn.picked { animation: perBtnConfirm .5s cubic-bezier(.3,.8,.3,1); border-color: var(--accent); }
@keyframes perBtnConfirm { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 30% { box-shadow: 0 0 0 5px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.per-sel-btn .per-sel-val { display: inline-block; }
.per-sel-btn.picked .per-sel-val { animation: perValPop .45s ease; }
@keyframes perValPop { 0% { transform: scale(.92); opacity: .5; } 55% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
.per-sel-check { display: inline-flex; color: var(--accent-deep); animation: perCheckPop .45s cubic-bezier(.3,.9,.3,1); }
@keyframes perCheckPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.25) rotate(0); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .per-sel-btn.picked, .per-sel-btn.picked .per-sel-val, .per-sel-check { animation: none; } }
/* анимация суммы пополнения */
.amt-input { transition: color .12s ease; font-variant-numeric: tabular-nums; }
@keyframes amtPulse { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.amt-chip { transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.amt-chips .amt-chip { animation: chipIn .3s cubic-bezier(.2,1,.4,1.05) backwards; animation-delay: calc(var(--chip-i, 0) * 50ms); }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .amt-chips .amt-chip, .cur-sel-opt, .cur-sel-pop { animation: none; } }
.amt-chip:hover { transform: translateY(-1px); }
.amt-chip:active { transform: scale(.94); }
.amt-chip.btn-soft { animation: amtPulse .32s ease; }
.ccsel-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.ccsel-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; border-radius: var(--r-sm, 6px); cursor: pointer; font: inherit; color: var(--text-1); text-align: left; }
.ccsel-item:hover { background: var(--accent-soft); }
.ccsel-item.on { background: var(--accent-soft); }
.ccsel-item .ccsel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ccsel-item .ccsel-dial { color: var(--text-3); font-weight: 700; font-size: 13px; }
.ccsel-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.pcc { position: relative; flex-shrink: 0; }
.pcc-btn { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; color: var(--text-3); }
.pcc-btn:hover { border-color: var(--accent-soft-bd); }
.pcc-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.pcc-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-1); text-align: left; }
.pcc-opt:hover { background: var(--bg-2); }
.pcc-opt .dial { margin-left: auto; color: var(--text-3); font-weight: 700; font-size: 12.5px; }

/* реферальная программа: VIP-подсказка */
.ref-vip-note { display: flex; gap: 12px; margin-top: 12px; padding: 13px 15px; border: 1px solid var(--accent-soft-bd); border-radius: var(--r-md); background: var(--accent-soft); }
.ref-vip-note .rvn-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ref-vip-note .rvn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ref-vip-note .rvn-body > b { font-size: 13.5px; color: var(--accent-deep); font-weight: 800; }
.ref-vip-note .rvn-body > span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.rvn-btn { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); background: var(--surface); border: 1px solid var(--accent-soft-bd); border-radius: 8px; padding: 6px 11px; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.rvn-btn:hover { background: var(--surface-2); }
.rvn-btn:active { transform: scale(.97); }

/* реферальная программа: отчёты */
.report-links { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.report-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, background .12s; }
.report-link:hover { border-color: var(--accent-soft-bd); background: var(--accent-soft); }
.report-link .rl-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; }
.report-link .rl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.report-link .rl-tx b { font-size: 14px; }
.report-link .rl-tx small { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.report-link .rl-chev { color: var(--text-3); flex-shrink: 0; }

/* график доходов */
.chart-wrap { padding: 6px 0 0; }
.chart-legend { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.chart-legend .sw { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); opacity: .55; }
.hide-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-deep); font-weight: 700; font-size: 13px; background: none; border: none; cursor: pointer; padding: 8px 0; }
.hide-link:hover { text-decoration: underline; }
.pwd-menu-pop { transform-origin: top left; animation: pwdMenuIn .18s cubic-bezier(.2,1,.4,1); }
@keyframes pwdMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
/* плавное раскрытие «Подробности» на экране оформленного заказа */
.co-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.co-collapse.open { grid-template-rows: 1fr; }
.co-collapse-in { overflow: hidden; min-height: 0; }
.co-collapse-in > * { opacity: 0; transform: translateY(-6px); transition: opacity .28s ease .04s, transform .28s ease .04s; }
.co-collapse.open .co-collapse-in > * { opacity: 1; transform: none; }
.co-chev { display: inline-flex; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.co-chev.up { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .co-collapse, .co-collapse-in > *, .co-chev { transition: none; } }
.cell-link { color: var(--accent-deep); }

/* завершение оплаты */
.co-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .co-layout { grid-template-columns: 1fr; } }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.pm-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 88px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, background .12s, box-shadow .12s; }
.pm-card:hover { border-color: var(--accent-soft-bd); }
.pm-card.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.pm-card .pm-name { font-weight: 700; font-size: 13.5px; padding-right: 22px; }
.pm-card .pm-sub { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pm-radio { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); }
.pm-card.sel .pm-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px); }
.pm-more { align-items: center; justify-content: center; gap: 8px; color: var(--accent-deep); font-weight: 700; font-size: 13px; border-style: dashed; text-align: center; }
.co-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.co-dim { color: var(--text-3); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.co-val { font-weight: 600; font-size: 13px; }
.co-dc { display: inline-flex; align-items: center; gap: 7px; }
.co-dc .flag { flex-shrink: 0; }
.co-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
.co-item-head { display: flex; gap: 14px; align-items: flex-start; }
.co-item-head b { font-size: 14px; }
.co-qty { margin-left: auto; color: var(--text-2); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.co-sum { font-weight: 800; font-size: 14px; flex-shrink: 0; }
.co-cfg-label { font-weight: 700; font-size: 13px; margin: 14px 0 6px; }
.ct-row { display: grid; grid-template-columns: 1.2fr 1fr 110px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.ct-row span:last-child { text-align: right; }
.ct-head { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.co-auto { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.co-auto .on-txt { color: var(--green); font-weight: 700; }
.co-side .co-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.co-side .co-itogo { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.co-side .co-itogo b { color: var(--accent-deep); }
.co-okic { width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }

/* заказы: оплаченные услуги */
.order-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.order-row .or-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; }
.order-row .or-name { font-weight: 600; font-size: 14px; min-width: 0; }
.order-row .or-status { margin-left: auto; color: var(--green); font-weight: 700; font-size: 13.5px; }
/* кликабельная строка-ссылка к услуге */
.order-row-link { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; color: inherit; transition: background .15s ease; flex-wrap: nowrap; }
.order-row-link:last-child { border-bottom: 0; }
.order-row-link .or-status { margin-left: auto; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
.order-row-link:hover .or-status { background: var(--accent-soft); border-color: var(--accent-soft-bd); }
.order-row-link .or-go { color: var(--text-3); display: inline-flex; flex-shrink: 0; transition: transform .18s ease, color .15s ease; }
.order-row-link:hover .or-go { color: var(--accent-deep); transform: translateX(3px); }

/* письмо-инструкция */
.mail-head { background: var(--bg-2); padding: 11px 20px; font-weight: 800; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.mail-body { padding: 18px 22px; font-size: 13.5px; line-height: 1.7; }
.mail-body p { margin: 0 0 12px; }
.mail-body h3 { font-size: 14px; margin: 18px 0 8px; }
.mail-body ul { margin: 8px 0 14px; padding-left: 22px; }
.mail-body li { margin-bottom: 3px; }
.mail-body a { color: var(--accent-deep); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* настройки пользователя: аккордеоны */
.acc-block { overflow: visible; border-radius: var(--r-md); }
/* закрытый блок: голова занимает весь блок — скругляем все углы одинаково */
.acc-block:has(.acc-anim:not(.open)) .acc-head { border-radius: var(--r-md); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent-deep); font: inherit; font-weight: 700; font-size: 13px; padding: 10px 16px; border: none; cursor: pointer; text-align: left; border-radius: var(--r-md) var(--r-md) 0 0; }
.acc-block .acc-head:only-child { border-radius: var(--r-md); }
.acc-head .ch { display: grid; place-items: center; transition: transform .15s; }
.acc-body { padding: 16px 18px; }
/* плавное открытие/закрытие блоков настроек */
.acc-anim { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.acc-anim.open { grid-template-rows: 1fr; }
.acc-anim-in { overflow: hidden; min-height: 0; }
.acc-anim .acc-body { opacity: 0; transform: translateY(-6px); transition: opacity .26s ease .02s, transform .26s ease .02s; }
.acc-anim.open .acc-body { opacity: 1; transform: none; }
.acc-anim.open .acc-anim-in { overflow: visible; }
/* блок с открытым выпадающим списком должен перекрывать соседние блоки */
.acc-block:has(.fsel.open), .acc-block:has(.csel.open) { position: relative; z-index: 40; }
@media (prefers-reduced-motion: reduce) { .acc-anim, .acc-anim .acc-body { transition: none; } }
.ntf-tbl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
/* кастомный чекбокс */
.ui-chk { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0; border: 2px solid var(--border-strong); border-radius: 6px; background: var(--surface); cursor: pointer; position: relative; vertical-align: middle; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ui-chk:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ui-chk:checked { background: var(--accent); border-color: var(--accent); animation: chkPulse .26s ease; }
.ui-chk::after { content: ''; position: absolute; left: 50%; top: 46%; width: 5px; height: 9.5px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; transition: none; }
.ui-chk:checked::after { animation: chkDraw .22s cubic-bezier(.2,1.3,.5,1) forwards; }
@keyframes chkDraw { from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } }
@keyframes chkPulse { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ui-chk:active { transform: scale(.9); }
.ui-chk:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.pr-fns { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-sm); background: var(--bg-2); border: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); }
.pr-fns:hover { background: var(--accent-soft); color: var(--accent-deep); }

/* мультивыбор ролей (Добавить пользователя) */
.rms-pop .check.on::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.rms-pop button:last-child { border-bottom: none !important; }
.rms-pop button:hover { background: var(--accent-soft) !important; }

/* конфигуратор выделенного сервера: карточки опций */
.opt-group { margin-top: 14px; }
.opt-group:first-of-type { margin-top: 2px; }
.opt-lab { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.opt-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-col { display: flex; flex-direction: column; gap: 10px; }
.opt-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; min-width: 150px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, background .15s, transform .1s; }
.opt-card:hover { border-color: var(--accent); }
.opt-card:active { transform: scale(.985); }
.opt-card.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt-card .on { font-size: 13.5px; font-weight: 700; color: var(--text); }
.opt-card .op { font-size: 12px; font-weight: 700; color: var(--text-3); }
.opt-card.sel .op { color: var(--accent-deep); }
.opt-card.opt-row { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
.opt-tick { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.opt-card.opt-row .opt-tick { position: static; flex-shrink: 0; width: 20px; height: 20px; }
.ip-slider { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 480px; }
.ip-slider .input { width: 90px; height: 44px; }

/* кастомный ползунок IPv4 */
.ip-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 0%), var(--accent-soft) var(--fill, 0%), var(--accent-soft) 100%); outline: none; cursor: pointer; }
.ip-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: grab; transition: transform .14s ease, box-shadow .14s ease; }
.ip-range::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); }
.ip-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); box-shadow: 0 0 0 8px var(--accent-soft); }
.ip-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: grab; transition: transform .14s ease, box-shadow .14s ease; }
.ip-range::-moz-range-thumb:hover { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); }
.ip-range::-moz-range-track { background: transparent; }
.ip-range:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }

/* выбранная строка таблицы + чекбокс */
.tbl tbody tr.sel td { background: var(--accent-soft); }
.th-sort { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.th-sort:hover { color: var(--accent-deep); }
.th-sort svg { flex-shrink: 0; }
.tbl .check.on { background: var(--accent); border-color: var(--accent); position: relative; }
.tbl .check.on::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); animation: tblCheckPop .22s cubic-bezier(.34,1.6,.5,1); }
@keyframes tblCheckPop { 0% { opacity: 0; transform: rotate(42deg) scale(.3); } 60% { opacity: 1; transform: rotate(42deg) scale(1.15); } 100% { transform: rotate(42deg) scale(1); } }

/* ============================================================
   STOREFRONT CONFIGURATOR (изюминка)
   ============================================================ */
.ptabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-2); border-radius: var(--r-lg); margin-bottom: 4px; }
.ptab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-md); font-weight: 700; font-size: 13.5px; color: var(--text-2); transition: all .14s; }
.ptab:hover { color: var(--text); }
.ptab.active { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.ptab.active svg { color: var(--accent); }

.cfg-layout { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.cfg-step { margin-bottom: 28px; }
.cfg-step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; flex-wrap: wrap; }
.cfg-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; font-family: var(--font-display); }
.cfg-step-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.cfg-step-head .hint { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 600; }

.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.loc { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s; text-align: left; position: relative; }
.loc:hover { border-color: var(--accent-soft-bd); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.loc.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.loc .lc { font-weight: 700; font-size: 13px; line-height: 1.2; }
.loc .lcountry { font-size: 11px; color: var(--text-3); }
.loc .ping { margin-left: auto; font-size: 10.5px; font-weight: 700; font-family: var(--font-mono); padding: 2px 6px; border-radius: 20px; white-space: nowrap; }
.ping.fast { background: var(--green-soft); color: var(--green); }
.ping.mid { background: var(--amber-soft); color: var(--amber); }
.ping.slow { background: var(--red-soft); color: var(--red); }
.loc .sel-tick { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.loc-pop { position: absolute; top: 6px; right: 9px; font-size: 8.5px; font-weight: 800; color: var(--accent-deep); letter-spacing: .03em; }

.os-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.os-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: all .14s; position: relative; }
.os-card:hover { border-color: var(--accent-soft-bd); transform: translateY(-2px); }
.os-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.os-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.os-card .on { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.15; }
.os-card .ov { font-size: 10px; color: var(--text-3); }

.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.preset { padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: all .14s; position: relative; }
.preset:hover { border-color: var(--accent-soft-bd); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.preset.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.preset .pn { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.preset .pspec { font-size: 11.5px; color: var(--text-3); margin-top: 3px; font-family: var(--font-mono); }
.preset .pprice { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-top: 10px; }
.preset .pprice small { font-size: 10px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }
.preset .phot { position: absolute; top: -8px; right: 12px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 20px; }

.cfg-card { padding: 22px; }
.cfg-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-2); border-radius: var(--r-md); margin-bottom: 20px; }
.cfg-toggle button { padding: 6px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.cfg-toggle button.on { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-xs); }
.slider-row { margin-bottom: 22px; }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.slider-head .sl { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.slider-head .sl svg { color: var(--accent); }
.slider-head .sv { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.slider-head .sv small { font-size: 12px; color: var(--text-3); font-weight: 600; font-family: var(--font-ui); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 20px; outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow-md); cursor: grab; transition: transform .1s; }
.slider::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow-md); cursor: grab; }
.slider-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--text-3); font-weight: 600; font-family: var(--font-mono); }
.cfg-auto { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep); font-size: 13px; font-weight: 600; }

.summary { position: sticky; top: 20px; padding: 0; overflow: hidden; }
.summary-head { padding: 18px 20px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; position: relative; overflow: hidden; }
.summary-head::before, .balance-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 13px 13px; opacity: .5; pointer-events: none; }
.summary-head .glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%); top: -80px; right: -50px; }
.summary-head .st { font-size: 12px; opacity: .85; font-weight: 600; }
.summary-head .sp { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.summary-head .sp small { font-size: 14px; opacity: .85; font-weight: 600; }
.summary-body { padding: 16px 20px; }
.sum-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sum-row:last-of-type { border-bottom: none; }
.sum-row .srk { color: var(--text-3); font-weight: 600; }
.sum-row .srv { margin-left: auto; font-weight: 700; text-align: right; display: flex; align-items: center; gap: 6px; }

@media (max-width: 1100px) {
  .cfg-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .loc-grid { grid-template-columns: repeat(3, 1fr); }
  .os-grid { grid-template-columns: repeat(4, 1fr); }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .loc-grid, .os-grid, .preset-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-cols, .chat-layout { grid-template-columns: 1fr; }
  .tariff-grid { grid-template-columns: repeat(2, 1fr); }
  .store-layout { grid-template-columns: 1fr; }
  .cat-rail { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .quick-grid, .tariff-grid, .form-grid { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== VMmanager 6 — карточка управления сервером ===== */
.vm-crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; }
.vm-crumbs button { color: var(--text-3); font: inherit; }
.vm-crumbs button:hover { color: var(--accent-deep); }
.vm-crumbs span { color: var(--text); }
/* первая «крошка» = понятная кнопка «назад» с анимированной стрелкой */
.vm-crumbs button:first-child { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); font-weight: 700; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1); }
.vm-crumbs button:first-child::before { content: '←'; font-size: 14px; line-height: 1; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.vm-crumbs button:first-child:hover { background: var(--accent-soft); color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-soft-bd) inset; transform: translateX(-3px); }
.vm-crumbs button:first-child:hover::before { transform: none; }
.vm-crumbs button:first-child:active { transform: scale(.96); }
.vm-head { margin-bottom: 12px; }
.vm-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.vm-edit { color: var(--text-3); display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; transition: background .16s ease, color .16s ease, transform .12s ease; }
.vm-edit:hover { color: var(--accent-deep); background: var(--accent-soft); }
.vm-edit:active { transform: scale(.9); }
.vm-rename { display: inline-flex; align-items: center; gap: 8px; }
.vm-rename-input { font: inherit; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); padding: 2px 10px; border: 2px solid var(--accent); border-radius: var(--r-sm); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); min-width: 220px; }
.vm-rename-ok, .vm-rename-cancel { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; transition: background .16s ease, color .16s ease, transform .12s ease; }
.vm-rename-ok { background: var(--accent); color: #fff; }
.vm-rename-ok:hover { filter: brightness(1.06); }
.vm-rename-cancel { background: var(--bg-2); color: var(--text-3); }
.vm-rename-cancel:hover { background: var(--red-soft); color: var(--red); }
.vm-rename-ok:active, .vm-rename-cancel:active { transform: scale(.9); }
/* привлечение внимания к кнопке после генерации */
.attn-pulse { animation: attnPulse 1.4s ease-out 3; }
@keyframes attnPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
  60% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .attn-pulse { animation: none; box-shadow: 0 0 0 3px var(--accent-soft); } }
.vm-subbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
/* группа VNC+Меню всегда прижата к правому краю СВОЕЙ строки (в т.ч. после переноса на
   мобильном) — иначе якорь попапа .vm-menu (right:0 от кнопки) уезжает к левому краю экрана */
.vm-subbar-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vm-status { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 700; font-size: 13.5px; }
.vm-status svg { color: var(--green); }
.vm-status-off { color: var(--text-3); }
.vm-status-off svg { color: var(--text-3); }
.vm-meta { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.vm-hv { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.vm-action { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 6px 4px; }
.vm-action:hover { color: var(--accent-deep); }
.vm-action svg { color: var(--text-3); }
.vm-action:hover svg { color: var(--accent-deep); }
.vm-action-menu { padding-left: 14px; border-left: 1px solid var(--border); }
.vm-open-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep); font-size: 13px; font-weight: 600; }
.vm-open-bar > span { display: inline-flex; align-items: center; gap: 8px; }
.vm-layout { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.vm-side { display: flex; flex-direction: column; gap: 2px; }
.vm-side-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: left; transition: background .12s, color .12s; }
.vm-side-item:hover { background: var(--bg-2); color: var(--text); }
.vm-side-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.vm-side-item svg { color: var(--text-3); flex-shrink: 0; }
.vm-side-item.active svg { color: var(--accent); }
.vm-content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vm-stats-card { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 18px 4px; }
.vm-stat { flex: 1; display: flex; align-items: center; gap: 13px; padding: 0 18px; min-width: 0; }
.vm-stat-ic { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; }
.vm-stat-l { font-size: 12px; color: var(--text-3); font-weight: 600; margin-bottom: 3px; }
.vm-stat-v { font-size: 15px; font-weight: 700; color: var(--text); }
.vm-stat-sep { width: 1px; background: var(--border); margin: 2px 0; }
.vm-info-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 22px 24px; }
.vm-info-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.vm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vm-field-l { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-bottom: 5px; }
.vm-field-v { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.5; }
.vm-num { font-weight: 700; }
.vm-blue { color: var(--accent-deep); font-weight: 700; }
.vm-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); flex-shrink: 0; transition: background .3s ease, color .3s ease, transform .12s ease; }
.vm-copy:hover { background: var(--accent-soft); color: var(--accent-deep); }
.vm-copy:active { transform: scale(.85); }
.vm-copy.done { background: var(--accent); color: #fff; }
.vm-copy-ic { display: inline-flex; animation: vmCopyIn .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes vmCopyIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vm-copy-ic { animation: none; } }
.vm-link { color: var(--accent-deep); font-weight: 700; font-size: 13px; text-align: left; }
.vm-link:hover { text-decoration: underline; }
/* кнопки действий пароля VNC */
.vnc-act { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-weight: 700; font-size: 13px; color: var(--text-2); cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease; }
.vnc-act svg { color: var(--text-3); transition: color .16s ease, transform .2s ease; }
.vnc-act:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft-bd); }
.vnc-act:hover svg { color: var(--accent-deep); transform: scale(1.1); }
.vnc-act:active { transform: scale(.96); }
.vnc-act:disabled { opacity: .5; cursor: not-allowed; }
.vnc-act:disabled:hover { background: var(--surface); color: var(--text-2); border-color: var(--border); transform: none; }
.vnc-act.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.vnc-act.done svg { color: #fff; }
.vnc-pwd-input { position: relative; flex: 1; min-width: 200px; }
.vnc-pwd-input .input { width: 100%; padding-right: 44px; }
.vnc-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--text-3); cursor: pointer; transition: background .16s ease, color .16s ease; }
.vnc-eye:hover { background: var(--accent-soft); color: var(--accent-deep); }
.vnc-eye:active { transform: translateY(-50%) scale(.88); }
.vm-info-divider { height: 1px; background: var(--border); margin: 22px 0; }
.vm-events { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 20px 24px; }
.vm-events-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.vm-events-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.vm-events-tbl th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 0 12px 10px 0; border-bottom: 1px solid var(--border); }
.vm-events-tbl td { padding: 14px 12px 14px 0; vertical-align: top; color: var(--text-2); line-height: 1.5; border-bottom: 1px solid var(--border); }
.vm-ev-time { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.vm-ev-ok { color: var(--green); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.vm-ev-fail { color: var(--red); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.vm-ev-wait { color: var(--text-3); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.vm-ev-run { color: var(--sky, var(--accent-deep)); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.vm-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(40,50,70,.45); display: grid; place-items: center; animation: vmOvIn .2s ease; }
.vm-modal-overlay.closing { animation: vmOvOut .22s ease forwards; }
.vm-modal-overlay.closing .vm-modal { animation: vmModalOut .22s cubic-bezier(.4,0,.7,.2) forwards; }
@keyframes vmOvOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vmModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.97); } }
.vm-modal { position: relative; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 26px 28px; max-width: 440px; width: calc(100% - 40px); animation: tfaModalIn .26s cubic-bezier(.2,1,.4,1); }
.tfa-modal { max-width: 500px; animation: tfaModalIn .22s cubic-bezier(.2,1,.4,1); }
.gdpr-terms { display: flex; flex-direction: column; gap: 10px; }
.gdpr-terms-row { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--accent-soft-bd); border-radius: var(--r-md); background: var(--accent-soft); font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: not-allowed; opacity: .92; }
.gdpr-terms-row .gdpr-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px -2px var(--accent); }
.gdpr-terms-row .gdpr-lock { margin-left: auto; color: var(--text-3); display: inline-flex; flex-shrink: 0; }
/* кастомные галочки уведомлений */
.ntf-chk { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--border-strong); background: var(--surface); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; vertical-align: middle; }
.ntf-chk:hover { border-color: var(--accent); }
.ntf-chk:active { transform: scale(.88); }
.ntf-chk.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 8px -3px var(--accent); animation: ntfPop .28s cubic-bezier(.34,1.56,.5,1); }
@keyframes ntfPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.ntf-tbl th { vertical-align: top; }
/* аватар */
.avatar-row { display: flex; gap: 18px; align-items: flex-start; }
.avatar-prev { width: 84px; height: 84px; border-radius: 18px; overflow: hidden; flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-3); }
.avatar-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.avatar-drop { margin: 0; cursor: pointer; display: block; }
.avatar-drop-txt { display: inline-flex; align-items: center; gap: 8px; }
.avatar-clear { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 700; color: var(--red); background: var(--red-soft, rgba(224,82,77,.12)); border: none; border-radius: 8px; padding: 6px 11px; cursor: pointer; transition: filter .15s ease, transform .12s ease; }
.avatar-clear:hover { filter: brightness(1.05); }
.avatar-clear:active { transform: scale(.96); }
.avatar-hint { color: var(--text-3); font-size: 12px; font-weight: 600; }
.avatar-img-in { animation: avatarIn .42s cubic-bezier(.2,1.3,.4,1); }
.avatar-img-out { animation: avatarOut .26s ease forwards !important; }
@keyframes avatarOut { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.6) rotate(8deg); } }
@keyframes avatarIn { 0% { opacity: 0; transform: scale(.5) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
.avatar-clear-in { animation: avatarBtnIn .32s cubic-bezier(.2,1.2,.4,1) .08s backwards; }
@keyframes avatarBtnIn { 0% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .avatar-img-in, .avatar-clear-in { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ntf-chk.on { animation: none; } }
@keyframes tfaModalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.tfa-secret { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-2); cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 12.5px; line-height: 1.4; letter-spacing: .3px; color: var(--text-1); transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.tfa-secret:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.tfa-secret:active { transform: scale(.985); }
.tfa-secret.copied { border-color: var(--accent); background: var(--accent-soft); }
.tfa-secret-ic { flex-shrink: 0; display: inline-flex; color: var(--accent-deep); animation: tfaCopyPop .3s cubic-bezier(.34,1.56,.5,1); }
@keyframes tfaCopyPop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
.tfa-copied-toast { position: absolute; top: -10px; right: 8px; transform: translateY(-100%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px -6px var(--accent); animation: tfaToast .3s cubic-bezier(.2,1.3,.4,1); }
.tfa-copied-toast::after { content: ''; position: absolute; bottom: -4px; right: 14px; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
@keyframes tfaToast { 0% { opacity: 0; transform: translateY(-80%) scale(.8); } 100% { opacity: 1; transform: translateY(-100%) scale(1); } }
.tfa-copied-toast.out { animation: tfaToastOut .3s ease forwards; }
@keyframes tfaToastOut { 0% { opacity: 1; transform: translateY(-100%) scale(1); } 100% { opacity: 0; transform: translateY(-130%) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .tfa-secret-ic, .tfa-copied-toast { animation: none; } }
.tfa-code { letter-spacing: 9px; font-weight: 800; font-size: 21px; text-align: left; font-family: var(--font-mono, ui-monospace, monospace); width: 122px; max-width: 100%; padding-left: 12px; padding-right: 3px; caret-color: var(--accent); box-sizing: border-box; }
.tfa-code::placeholder { letter-spacing: 9px; color: var(--text-3); }
.tfa-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 9px 12px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); font-size: 11.5px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.tfa-note svg { color: var(--accent-deep); flex-shrink: 0; margin-top: 1px; }
.tfa-loading { display: flex; align-items: center; gap: 10px; padding: 28px 4px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.tfa-spin { display: inline-flex; color: var(--accent-deep); animation: tfaSpin 0.9s linear infinite; }
@keyframes tfaSpin { to { transform: rotate(360deg); } }
.tfa-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; font-size: 12px; }
.tfa-meta > span { color: var(--text-3); }
.tfa-meta > b { color: var(--text-2); font-weight: 700; word-break: break-all; }
.tfa-metarow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.tfa-metarow .tfa-meta { margin-top: 0; }
.tfa-dl { display: flex; gap: 14px; margin-top: 12px; }
.tfa-dl a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.tfa-dl a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tfa-spin { animation-duration: 1.6s; } }
.vm-modal-x { position: absolute; top: 16px; right: 16px; color: var(--text-3); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; transition: color .18s ease, background .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.vm-modal-x:hover { color: var(--text); background: var(--bg-2); transform: rotate(90deg); }
.vm-modal-x:active { transform: rotate(90deg) scale(.88); }
.vm-modal-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin-bottom: 12px; }
.input.scrambling { color: var(--accent-deep); text-shadow: 0 0 9px color-mix(in oklch, var(--accent) 45%, transparent); }
.vm-modal-body { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.vm-console-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vm-console-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.vm-console-status.connected { color: var(--green); } .vm-console-status.connected svg { color: var(--green); }
.vm-console-status.error { color: var(--red); } .vm-console-status.error svg { color: var(--red); }
.vm-console-status.connecting svg, .vm-console-status.init svg { color: var(--accent-deep); }
.vm-console-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0b0e14; border: 1px solid var(--border); box-shadow: 0 24px 60px -28px rgba(0,0,0,.6); }
.vm-console-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, #1a2233, #151b27); border-bottom: 1px solid #222b3a; }
.vmc-lights { display: flex; gap: 7px; }
.vmc-lights i { width: 11px; height: 11px; border-radius: 50%; }
.vmc-lights i:nth-child(1) { background: #ff5f57; } .vmc-lights i:nth-child(2) { background: #febc2e; } .vmc-lights i:nth-child(3) { background: #28c840; }
.vmc-name { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #c5cede; }
.vmc-name svg { color: #7f8da3; }
.vmc-badge { margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; color: #8fb6ff; background: rgba(143,182,255,.12); padding: 4px 9px; border-radius: 999px; }
.vm-console-screenwrap { position: relative; height: calc(100vh - 250px); min-height: 320px; max-height: 760px; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 130% at 50% 0%, #11151d 0%, #07090d 75%); overflow: hidden; }
/* боковые «рейлы» — заполняют чёрные поля по бокам кадра, как бортик CRT */
.vmc-rail { position: absolute; top: 0; bottom: 0; width: 26%; max-width: 340px; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(120,210,165,.14) 0, rgba(120,210,165,.14) 1px, transparent 1px, transparent 5px); }
.vmc-rail::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(120,210,165,.10), transparent 70%); }
.vmc-rail-l { left: 0; mask-image: linear-gradient(90deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); }
.vmc-rail-r { right: 0; mask-image: linear-gradient(270deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); }
.vmc-rail-txt { position: relative; z-index: 1; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(130,225,180,.6); text-shadow: 0 0 12px rgba(120,210,165,.45); white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.vmc-rail-r .vmc-rail-txt { transform: none; } }
.vm-console-screenwrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.55); }
.vm-console-screen { width: 100%; height: 100%; min-height: 0; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.vm-console-frame { width: 100%; height: 80vh; min-height: 600px; border: 0; display: block; background: #fff; }
.vm-console-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #cdd5e0; background: rgba(11,14,20,.85); font-size: 14px; font-weight: 600; }
.vm-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); border-radius: 50%; animation: vm-spin .8s linear infinite; }
@keyframes vm-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .vm-info-grid { grid-template-columns: repeat(2, 1fr); }
  .vm-stats-card { flex-wrap: wrap; gap: 14px 0; }
  .vm-stat { flex-basis: 33%; }
  .vm-stat-sep { display: none; }
}
@media (max-width: 820px) {
  .vm-layout { grid-template-columns: 1fr; }
  .vm-side { flex-direction: row; flex-wrap: wrap; }
}

/* клиентская карточка VM: метрики + график + правая колонка */
.vm-main-grid { display: grid; grid-template-columns: 1fr 220px; gap: 22px; align-items: stretch; }
.vm-main-left { display: flex; flex-direction: column; min-width: 0; }
.vm-main-left .ssh-connect-stage.embed { flex: 1; }
.vm-metrics-card { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); padding: 16px 6px; }
.vm-metric { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px; min-width: 0; }
.vm-metric-l { font-size: 12px; color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
.vm-metric-v { font-size: 16px; font-weight: 700; color: var(--text); }
.vm-metric-traf { font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 1px; }
.vm-metric-traf > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.vm-metric-v, .vm-metric-traf { font-variant-numeric: tabular-nums; }
.num-scramble { color: var(--accent-deep); text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 55%, transparent); transition: none; }
.vm-metric-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 0; }
.vm-chart-card { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface); padding: 14px 18px 16px; }
.vm-chart-axis { font-size: 11px; color: var(--text-3); text-align: right; }
.vm-chart-body { position: relative; height: 220px; border-bottom: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, transparent, transparent 43px, var(--border) 43px, var(--border) 44px); }
.vm-chart-line { position: absolute; left: 0; right: 0; bottom: 38%; height: 2px; background: var(--accent); opacity: .7; }
.vm-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 13px; font-weight: 600; }
.vm-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vm-live-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.vm-live-pill.on { color: var(--green); }
.vm-live-pill.on svg { animation: vm-pulse 1.4s ease-in-out infinite; }
@keyframes vm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.vm-chart-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.vm-aside { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; }
.vm-aside-v { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 4px; }
.vm-aside-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.vm-aside-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-weight: 700; font-size: 13px; color: var(--text-2); cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease; }
.vm-aside-btn svg { color: var(--text-3); transition: color .16s ease, transform .2s ease; }
.vm-aside-btn:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft-bd); }
.vm-aside-btn:hover svg { color: var(--accent-deep); transform: scale(1.1); }
.vm-aside-btn:active { transform: scale(.97); }
.vm-aside-btn:disabled { opacity: .45; cursor: not-allowed; }
.vm-aside-btn:disabled:hover { background: var(--surface); color: var(--text-2); border-color: var(--border); transform: none; }
/* кнопка перезагрузки: плавная анимация во время выполнения */
.vm-reboot-btn .vm-reboot-ic { display: inline-flex; transition: transform .3s ease; }
.vm-reboot-btn .vm-reboot-lbl { transition: opacity .25s ease; }
/* плавный переход всех состояний кнопки, чтобы конец не дёргался */
.vm-reboot-btn { transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .2s ease; }
.vm-reboot-btn.is-done { background: var(--accent); border-color: var(--accent); color: #fff; animation: rebootSettle .55s cubic-bezier(.34,1.4,.5,1); }
.vm-reboot-btn.is-done .vm-reboot-ic svg { color: #fff; }
.vm-reboot-btn.is-done .vm-reboot-ic { animation: rebootCheckPop .5s cubic-bezier(.34,1.56,.5,1); }
@keyframes rebootSettle { 0% { transform: scale(1.03); } 60% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes rebootCheckPop { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
.vm-reboot-btn.is-rebooting { opacity: 1 !important; cursor: progress; border-color: var(--accent-soft-bd); background: var(--accent-soft); color: var(--accent-deep); animation: rebootPulse 1.6s ease-in-out infinite; }
.vm-reboot-btn.is-rebooting .vm-reboot-ic { animation: rebootSpin 1s cubic-bezier(.5,.1,.4,.95) infinite; }
.vm-reboot-btn.is-rebooting .vm-reboot-ic svg { color: var(--accent-deep); }
@keyframes rebootSpin { to { transform: rotate(360deg); } }
@keyframes rebootPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 18%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .vm-reboot-btn.is-rebooting { animation: none; } .vm-reboot-btn.is-rebooting .vm-reboot-ic { animation: rebootSpin 1.4s linear infinite; } .vm-reboot-btn.is-done, .vm-reboot-btn.is-done .vm-reboot-ic { animation: none; } }
/* виртуальные диски VM */
.vm-disk-top { display: flex; align-items: center; gap: 36px; }
.vm-disk-legend { display: flex; flex-direction: column; gap: 16px; }
.vm-disk-leg { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.vm-disk-leg b { font-weight: 700; }
.vm-disk-leg div div { font-size: 12.5px; color: var(--text-3); font-weight: 500; margin-top: 1px; }
.vm-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.vm-dot-green { background: var(--green); }
.vm-dot-gray { background: var(--border-strong, #c7ccd6); }
.vm-disk-tbl td { vertical-align: middle; }
.vm-disk-bar-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.vm-disk-free { color: var(--text-3); }
.vm-disk-bar { height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.vm-disk-bar-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .35s cubic-bezier(.2,.7,.3,1); }
/* VM подстраницы: вкладки, сегмент, IP-модель, поп IP, статистика */
.vm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.vm-tab { font-size: 16px; font-weight: 700; color: var(--text-3); padding: 0 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vm-tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.vm-ip-model-l { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.vm-ip-model { margin-bottom: 22px; }
.vm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.vm-seg-i { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface); border-right: 1px solid var(--border); }
.vm-seg-i:last-child { border-right: none; }
.vm-seg-i:hover { background: var(--bg-2); }
.vm-seg-i.on { background: var(--accent-soft); color: var(--accent-deep); }
.vm-ip-count { text-align: right; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.vm-ip-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(40,60,90,.18); padding: 12px 14px; min-width: 200px; animation: vmIpPopIn .18s cubic-bezier(.2,1,.4,1.05); transform-origin: top left; }
@keyframes vmIpPopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.vm-ip-pop-x { position: absolute; top: 8px; right: 8px; color: var(--text-3); border-radius: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.vm-ip-pop-x:hover { background: var(--bg-2); color: var(--text); }
.vm-ip-pop-row { font-size: 13px; font-family: var(--font-mono, monospace); padding: 3px 0; color: var(--text-1); }
.vm-stat-block { padding: 14px 0 4px; }
.vm-stat-h { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.vm-stat-unit { font-size: 12px; color: var(--text-3); margin: 2px 0 8px; }
.vm-stat-svg { width: 100%; height: 150px; display: block; }
.vm-stat-wrap { position: relative; cursor: crosshair; }
.vm-stat-peak { position: absolute; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.08); z-index: 3; }
.vm-stat-tip { position: absolute; background: #1c2230; color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 4; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.vm-stat-tip span { opacity: .7; }
.vm-ip-all { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: 999px; padding: 2px 7px 2px 10px; transition: background .15s ease, transform .12s ease; vertical-align: middle; }
.vm-ip-all:hover { background: color-mix(in oklch, var(--accent) 16%, transparent); text-decoration: none; }
.vm-ip-all:active { transform: scale(.94); }
.vm-ip-all svg { transition: transform .22s cubic-bezier(.34,1.4,.5,1); }
.vm-ip-all.open svg { transform: rotate(180deg); }
.flash-run { background: var(--accent-soft); color: var(--accent-deep); }
.flash-err { background: var(--red-soft); color: var(--red); }
.vm-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); padding: 8px; transform-origin: top right; animation: vmMenuIn .18s cubic-bezier(.2,1,.4,1.05); }
.vm-menu.closing { animation: vmMenuOut .16s ease forwards; }
@keyframes vmMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vmMenuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(.96); } }
.vm-menu-i { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm, 6px); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: none; cursor: pointer; transition: background .14s ease, color .14s ease, padding-left .14s ease; }
.vm-menu-i:hover:not(:disabled) { padding-left: 16px; }
@media (prefers-reduced-motion: reduce) { .vm-menu, .vm-menu.closing { animation: none; } .vm-menu-i:hover:not(:disabled) { padding-left: 12px; } }
.vm-menu-i:hover { background: var(--accent-soft); color: var(--accent-deep); }
.vm-menu-i:disabled { color: var(--text-3); opacity: .5; cursor: not-allowed; }
.vm-menu-i:disabled:hover { background: none; color: var(--text-3); }
.vm-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
@media (max-width: 900px) { .vm-main-grid { grid-template-columns: 1fr; } }

/* ============ МЕРЧ ============ */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 230px)); justify-content: center; gap: 18px; }
.merch-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.merch-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(0,0,0,.35); border-color: var(--accent-soft-bd); }
.merch-card:active { transform: translateY(-1px); }
/* ФИКСИРОВАННАЯ пропорция рамки + object-fit:cover — фото ЛЮБОГО размера (портрет/квадрат/
   ландшафт, в т.ч. загруженные через админку) вписываются в одинаковую карточку кропом:
   без пустого поля снизу И без вертикального растяжения (был регресс — height:auto тянул
   портретные фото в полный рост на широких карточках). object-position:top — показываем верх
   (модель в футболке, принт на груди виден). */
.merch-card-img { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--bg-2), var(--surface-2)); overflow: hidden; display: flex; }
.merch-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; transition: transform .35s ease; }
.merch-card:hover .merch-card-img img { transform: scale(1.04); }
.merch-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.merch-card-name { font-weight: 700; font-size: 14.5px; color: var(--text); }
/* скелетон карточки товара на время загрузки реальных данных — квадратные пропорции,
   совпадающие с реальными фото (1254×1254), чтобы высота карточки не менялась при
   подмене скелетона на настоящую карточку (без этого была заметная "просадка" грида). */
.merch-card-skel { cursor: default; }
.merch-card-img-skel { aspect-ratio: 1 / 1; }
.merch-card-img-skel, .skel-line { background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-2) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: merchSkelPulse 1.4s ease-in-out infinite; border-radius: var(--r-sm); }
.skel-line { height: 15px; margin-top: 8px; }
.skel-line:first-child { margin-top: 0; }
@keyframes merchSkelPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .merch-card-img-skel, .skel-line { animation: none; } }
.merch-card-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.merch-swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong) inset; flex-shrink: 0; }
.merch-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.merch-card-price { font-weight: 800; font-size: 16px; color: var(--text); }
.merch-card-go { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); }
.merch-card:hover .merch-card-go svg { transform: translateX(3px); transition: transform .18s ease; }

/* витрина с промо-баннером (вариант B) */
.nav-play-cta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 5px 9px; border: none; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; color: var(--accent-deep); background: none; transition: background .14s ease, transform .12s ease; }
.nav-play-cta svg { color: var(--accent-deep); flex-shrink: 0; }
.nav-play-cta:hover { background: var(--accent-soft); transform: translateY(-1px); }
.nav-play-cta:active { transform: translateY(0) scale(.96); }
.nav-merch-row { display: flex; align-items: center; gap: 2px; }
.nav-merch-row .nav-item.active { border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .nav-play-cta { animation: none; } }
.nav-play-cta svg { color: var(--accent-deep); flex-shrink: 0; }
.nav-play-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-play-cta:active { transform: translateY(0) scale(.97); }
@keyframes navPlayPulse { 0%, 100% { box-shadow: 0 5px 14px -6px var(--accent), 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 5px 14px -6px var(--accent), 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .nav-play-cta { animation: none; } }
.merch-play-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; vertical-align: middle; font: inherit; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(110deg, var(--accent), #2a6fdb); border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; box-shadow: 0 6px 18px -6px var(--accent); animation: merchCtaPulse 1.8s ease-in-out infinite; transition: transform .14s ease, filter .14s ease; }
.merch-play-cta svg { color: #fff; }
.merch-play-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.merch-play-cta:active { transform: translateY(0) scale(.96); }
@keyframes merchCtaPulse { 0%, 100% { box-shadow: 0 6px 18px -6px var(--accent), 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 6px 18px -6px var(--accent), 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .merch-play-cta { animation: none; } }
.merch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.merch-feats { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.merch-feat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; }
.merch-feat svg { color: var(--accent-deep); flex-shrink: 0; }
@media (max-width: 720px) { .merch-feats { display: none; } }
.merch-b-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 20px; align-items: stretch; max-width: 1560px; margin: 0 auto; }
.merch-promo { position: relative; overflow: hidden; border: none; border-radius: var(--r-lg); cursor: pointer; text-align: center; color: #fff; background: linear-gradient(150deg, #1f8a5c, #2a6fdb 92%); padding: 28px 26px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 100%; box-shadow: 0 14px 32px -16px rgba(31,138,92,.6); transition: transform .16s ease, box-shadow .16s ease; }
.merch-promo:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(31,138,92,.7); }
.merch-promo:active { transform: translateY(-1px); }
.merch-promo-glow { position: absolute; inset: 0; background: radial-gradient(circle at 75% 18%, rgba(255,255,255,.2), transparent 55%); pointer-events: none; }
/* декоративная иллюстрация приза в пустой верхней части баннера */
.merch-promo-art { position: relative; height: 144px; display: flex; align-items: center; justify-content: center; margin: 16px 0 10px; pointer-events: none; }
.merch-promo-art .mpa-badge { position: relative; top: auto; left: auto; transform: none; width: 124px; height: 124px; border-radius: 32px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; color: #fff; box-shadow: 0 18px 40px -14px rgba(0,0,0,.4); animation: mpaFloat 3.4s ease-in-out infinite; }
.merch-promo-art .mpa-rank { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: #155e3c; background: #fff; padding: 5px 16px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.merch-promo-art .mpa-spark { position: absolute; border-radius: 50%; background: rgba(255,255,255,.7); }
.mpa-spark-1 { width: 7px; height: 7px; top: 18px; right: 30px; animation: mpaTwinkle 2.2s ease-in-out infinite; }
.mpa-spark-2 { width: 5px; height: 5px; top: 70px; left: 22px; animation: mpaTwinkle 2.6s ease-in-out .5s infinite; }
.mpa-spark-3 { width: 4px; height: 4px; top: 36px; left: 40px; animation: mpaTwinkle 3s ease-in-out 1s infinite; }
@keyframes mpaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mpaTwinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .merch-promo-art .mpa-badge, .merch-promo-art .mpa-spark { animation: none; } }
.merch-promo-tag { position: absolute; top: 22px; left: 26px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: rgba(255,255,255,.2); padding: 5px 11px; border-radius: 999px; }
.merch-promo-spark { position: relative; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18); display: grid; place-items: center; margin-bottom: 14px; }
.merch-promo-title { position: relative; font-family: var(--font-display); font-size: 25px; font-weight: 800; line-height: 1.15; margin: 2px 0 0; letter-spacing: -.015em; }
.merch-promo-sub { position: relative; font-size: 13px; opacity: .85; line-height: 1.5; max-width: 320px; margin: 0 auto 4px; text-wrap: balance; }
.merch-promo-btn { position: relative; align-self: center; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #155e3c; font-weight: 800; font-size: 14px; padding: 12px 28px; border-radius: 999px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.42); transition: gap .15s ease, transform .15s ease, box-shadow .15s ease; }
.merch-promo:hover .merch-promo-btn { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.5); }
.merch-promo:hover .merch-promo-btn { gap: 9px; }
.merch-promo:hover .merch-promo-btn svg { transform: translateX(3px); transition: transform .15s ease; }
.merch-promo-cap { position: relative; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #fff; opacity: .95; text-align: center; text-wrap: balance; letter-spacing: -0.005em; max-width: 300px; margin: 0 auto; }
/* было ≤900 — дыра в 901-980 (drawer-режим сайдбара, полная ширина контента), где ничем
   не перекрытое базовое правило (1fr 1fr 1.15fr, 3 колонки) снова становилось активным. */
@media (max-width: 980px) {
  .merch-b-grid { grid-template-columns: 1fr 1fr; }
  .merch-promo { grid-column: 1 / -1; min-height: 200px; }
}
@media (max-width: 560px) { .merch-b-grid { grid-template-columns: 1fr; } }

/* карточка товара */
.merch-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 8px; }
.merch-gallery { position: sticky; top: 16px; }
.merch-gallery-main { background: linear-gradient(160deg, var(--bg-2), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; }
.merch-gallery-main img { width: 100%; height: auto; display: block; }
.merch-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.merch-thumb { width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--border); background: var(--bg-2); cursor: pointer; padding: 0; transition: border-color .15s ease; }
.merch-thumb.on { border-color: var(--accent); }
.merch-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.merch-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--text); }
.merch-art { font-size: 12.5px; color: var(--text-3); margin-bottom: 16px; }
.merch-price { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 22px; }
.merch-field { margin-bottom: 20px; }
.merch-field-label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 9px; }
.merch-field-label b { color: var(--text); font-weight: 700; }
.merch-req { color: var(--danger, #d9453b); font-weight: 600; }
.merch-colors { display: flex; gap: 10px; }
.merch-color { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border); background: none; cursor: pointer; padding: 3px; transition: border-color .15s ease, transform .12s ease; }
.merch-color.on { border-color: var(--accent); }
.merch-color:active { transform: scale(.92); }
.merch-color span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px var(--border) inset; }
.merch-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.merch-size { min-width: 46px; height: 44px; padding: 0 12px; border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--surface); font: inherit; font-weight: 700; font-size: 14px; color: var(--text-2); cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease, transform .1s ease; }
.merch-size:hover { border-color: var(--accent); color: var(--text); }
.merch-size:active { transform: scale(.94); }
.merch-size.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.merch-buy { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.merch-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); height: 46px; overflow: hidden; }
.merch-qty button { width: 42px; height: 100%; display: grid; place-items: center; background: none; border: none; color: var(--text-2); cursor: pointer; transition: background .14s ease, color .14s ease; }
.merch-qty button:hover:not(:disabled) { background: var(--bg-2); color: var(--text); }
.merch-qty button:disabled { opacity: .4; cursor: not-allowed; }
.merch-qty span { min-width: 36px; text-align: center; font-weight: 700; font-size: 15px; }
.merch-order { height: 46px; padding: 0 28px; font-size: 14.5px; gap: 8px; }
.merch-fav { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-3); display: grid; place-items: center; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .12s ease; }
.merch-fav:hover { border-color: var(--accent); color: var(--text); }
.merch-fav:active { transform: scale(.9); }
.merch-fav.on { color: var(--danger, #d9453b); border-color: color-mix(in oklch, var(--danger, #d9453b) 45%, transparent); }
.merch-split { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: var(--surface); border-radius: var(--r-md); padding: 12px 18px; font-size: 13.5px; font-weight: 700; margin-bottom: 22px; }
.merch-split svg:last-child { margin-left: auto; opacity: .7; }
.merch-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.merch-desc p { margin: 0 0 12px; }
.merch-desc b { color: var(--text); }
.merch-model { color: var(--text-3); font-size: 12.5px; }
@media (max-width: 860px) { .merch-detail { grid-template-columns: 1fr; gap: 24px; } .merch-gallery { position: static; } }

/* ============ КНОПКА «ПОДАРОК» (день рождения) ============ */
.bday-banner { position: relative; width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; margin-bottom: 18px; padding: 16px 20px; border: none; border-radius: var(--r-lg); cursor: pointer; overflow: hidden; color: #fff; background: linear-gradient(110deg, #1f8a5c, #2a6fdb 88%); box-shadow: 0 12px 30px -12px rgba(31,138,92,.6); transition: transform .14s ease, box-shadow .14s ease; }
.bday-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(31,138,92,.7); }
.bday-banner:active { transform: translateY(0) scale(.995); }
.bday-spark { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex-shrink: 0; animation: bdayPulse 2.2s ease-in-out infinite; }
@keyframes bdayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.bday-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bday-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.bday-sub { font-size: 12.5px; opacity: .92; line-height: 1.4; }
.bday-cta { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13.5px; background: rgba(255,255,255,.16); padding: 9px 15px; border-radius: 999px; flex-shrink: 0; transition: background .15s ease, gap .15s ease; }
.bday-banner:hover .bday-cta { background: rgba(255,255,255,.26); gap: 8px; }
.bday-confetti { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1.5px, transparent 1.6px); background-size: 26px 26px; opacity: .12; }
/* фирменное имя на праздничном баннере: зелёный «serv» + белый «.host» (баннер всегда тёмный градиент) */
.bday-brand .bl-serv { color: #8ff0bf; }
.bday-brand .bl-host { color: #fff; }
@media (prefers-reduced-motion: reduce) { .bday-spark { animation: none; } }
@media (max-width: 640px) { .bday-banner { flex-wrap: wrap; } .bday-cta { order: 3; } }

/* ============ ИГРА «БАШНЯ СЕРВЕРОВ» ============ */
.twr-gate { display: flex; align-items: center; justify-content: center; }
.twr-gate-card { max-width: 340px; text-align: center; padding: 28px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.twr-gate-card .lv-spin { width: 26px; height: 26px; border-width: 3px; color: var(--accent); }
.twr-gate-ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.twr-gate-card h3 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.twr-gate-card p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 0; text-wrap: pretty; }
.twr-gate-card .twr-play { margin-top: 6px; }
.twr-game-page { animation: twrPageIn .5s cubic-bezier(.2,.7,.3,1); }
@keyframes twrPageIn { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
.twr-game-page .twr-stage { animation: twrStageIn .55s ease .06s both; }
@keyframes twrStageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .twr-game-page, .twr-game-page .twr-stage { animation: none; } }
.twr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.twr-stage { position: relative; height: 560px; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--accent) 10%, var(--surface)), var(--surface) 70%); cursor: pointer; user-select: none; touch-action: manipulation; }
.twr-canvas { display: block; width: 100%; height: 100%; }
.twr-score-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 16px; color: var(--text); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.1)); }
.twr-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in oklch, var(--bg) 55%, transparent); backdrop-filter: blur(3px); animation: fadeIn .2s ease; }
.twr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 28px; max-width: 340px; text-align: center; box-shadow: 0 20px 50px -16px rgba(0,0,0,.4); }
.twr-card-ic { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.twr-card-ic.gameover { background: var(--red-soft, #fdecea); color: var(--red, #d9453b); }
.twr-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.twr-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; }
.twr-card p b { color: var(--text); }
.twr-play { width: 100%; justify-content: center; height: 46px; font-size: 15px; }
.twr-side { display: flex; flex-direction: column; gap: 16px; }
.twr-timer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; text-align: center; }
.twr-timer.over { opacity: .7; }
.twr-timer-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 12px; }
.twr-clock { display: flex; align-items: flex-start; justify-content: center; gap: 4px; }
.twr-clock-unit { display: flex; flex-direction: column; align-items: center; min-width: 46px; }
.twr-clock-unit b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 28px; font-weight: 800; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; display: inline-block; }
.twr-clock-num { animation: twrNumIn .42s cubic-bezier(.2,1.3,.4,1); transform-origin: 50% 0; }
@keyframes twrNumIn { 0% { opacity: 0; transform: translateY(-60%) rotateX(-75deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .twr-clock-num { animation: none; } }
.twr-clock-unit i { font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.twr-clock-sep { font-size: 24px; font-weight: 800; color: var(--border-strong); line-height: 1.05; }
/* блок «акция длится ещё N дней» */
.twr-event { text-align: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--border); }
.twr-event-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.twr-event-v { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 6px; }
.twr-event-v b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent-deep); display: inline-block; }
.twr-event-v span { font-size: 16px; font-weight: 700; color: var(--text-2); }
.twr-event-note { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.twr-timer-label-2 { margin-top: 0; }
.twr-lb { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.twr-lb-head { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 12px; }
.twr-lb-list { display: flex; flex-direction: column; gap: 8px; }
.twr-lb-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-md); background: var(--bg-2); }
.twr-lb-row.first { background: color-mix(in oklch, #e7b008 16%, transparent); }
.twr-lb-row.you { outline: 1.5px solid var(--accent); }
.twr-lb-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff; flex-shrink: 0; }
.twr-lb-name { flex: 1; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twr-lb-score { font-weight: 800; font-size: 15px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.twr-lb-empty { padding: 14px 11px; text-align: center; font-size: 12.5px; color: var(--text-3); background: var(--bg-2); border-radius: var(--r-md); line-height: 1.4; }
.twr-lb-prize { margin-top: 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); line-height: 1.4; background: var(--accent-soft); border-radius: var(--r-md); padding: 10px 12px; }
.twr-lb-prize svg { color: var(--accent-deep); flex-shrink: 0; }
/* фирменное имя в игре: чёткий зелёный, адаптируется к теме */
.page-sub .brand-logo, .twr-lb-prize .brand-logo { opacity: 1; font-weight: 800; }
.page-sub .brand-logo .bl-serv, .twr-lb-prize .brand-logo .bl-serv { color: var(--accent-deep); }
.page-sub .brand-logo .bl-host, .twr-lb-prize .brand-logo .bl-host { color: var(--text); }
/* промо-карточка мерча — всегда тёмный градиент: serv светло-зелёный, .host белый (в обеих темах) */
.merch-promo .brand-logo { font-weight: 800; opacity: 1; }
.merch-promo .brand-logo .bl-serv { color: #8ff0bf; }
.merch-promo .brand-logo .bl-host { color: #fff; }
/* было ≤880 — между этим правилом и следующим "1 колонка" на 981-1100 оставалась дыра
   881-980px, где ничем не перекрытое базовое правило (1fr 300px, 2 колонки) снова
   становилось активным. Расширили до ≤980 — сплошное покрытие. */
@media (max-width: 980px) { .twr-layout { grid-template-columns: 1fr; } .twr-stage { height: 460px; } }
/* поздравление при закрытии стойки */
.twr-congrats { position: relative; overflow: hidden; animation: twrCongratsIn .5s cubic-bezier(.2,1.3,.4,1); }
.twr-card-ic-win { background: var(--accent); color: #fff; animation: twrWinPop .6s cubic-bezier(.34,1.56,.5,1); }
@keyframes twrCongratsIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes twrWinPop { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.twr-confetti { position: absolute; inset: 0; pointer-events: none; }
.twr-confetti i { position: absolute; top: -8px; left: calc(var(--i) * 7% + 3%); width: 7px; height: 12px; border-radius: 2px; background: var(--accent); opacity: 0; transform-origin: center; animation: twrConfetti 1.5s ease-in calc(var(--i) * 70ms) infinite; }
.twr-confetti i:nth-child(3n) { background: #e7b008; }
.twr-confetti i:nth-child(3n+1) { background: #2a6fdb; }
@keyframes twrConfetti { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(280px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .twr-congrats, .twr-card-ic-win, .twr-confetti i { animation: none; } .twr-confetti { display: none; } }

/* ============ ИИ-ПОДДЕРЖКА (запросы) ============ */
.sup-offer { width: 100%; display: flex; align-items: center; gap: 15px; text-align: left; margin-bottom: 16px; padding: 15px 18px; border: 1px solid var(--accent-soft-bd); border-radius: var(--r-lg); background: var(--accent-soft); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.sup-offer:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px var(--accent); }
.sup-offer:active { transform: translateY(0); }
.sup-offer-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.sup-offer-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sup-offer-t { font-weight: 800; font-size: 14.5px; color: var(--text); }
.sup-offer-s { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.sup-offer-cta { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; color: var(--accent-deep); flex-shrink: 0; }
.sup-offer:hover .sup-offer-cta svg { transform: translateX(3px); transition: transform .15s ease; }
@media (max-width: 620px) { .sup-offer { flex-wrap: wrap; } .sup-offer-cta { order: 3; } }

.sup-chat { display: flex; flex-direction: column; height: 560px; overflow: hidden; }
.sup-chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sup-welcome { margin: auto; text-align: center; max-width: 360px; }
.sup-orb { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.sup-welcome-t { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.sup-welcome-s { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sup-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.sup-chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.sup-escalate { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.sup-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.sup-input input { flex: 1; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: 0 14px; font: inherit; font-size: 14px; color: var(--text); outline: none; transition: border-color .14s ease, box-shadow .14s ease; }
.sup-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sup-input .ai-send { width: 44px; height: 44px; border-radius: var(--r-md); border: none; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: filter .14s ease, transform .12s ease; }
.sup-input .ai-send:hover:not(:disabled) { filter: brightness(1.07); }
.sup-input .ai-send:active:not(:disabled) { transform: scale(.92); }
.sup-input .ai-send:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 880px) { .sup-chat { height: 70vh; } }

/* ============ ПРОМО: ПОДПИСКА НА ИИ-ПОМОЩНИКА ============ */
.ai-promo { max-width: 440px; text-align: center; }
.ai-promo-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: 999px; padding: 5px 11px; margin-bottom: 16px; }
.ai-promo-ic { width: 60px; height: 60px; border-radius: 17px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); box-shadow: 0 10px 24px -8px var(--accent); }
.ai-promo-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.ai-promo-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 16px; }
.ai-promo-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.ai-promo-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); }
.ai-promo-list li svg { color: var(--accent-deep); flex-shrink: 0; }
.ai-promo-price { background: var(--bg-2); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; }
.ai-promo-price-now { font-size: 30px; font-weight: 800; color: var(--text); font-family: var(--font-display); }
.ai-promo-price-now span { font-size: 15px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.ai-promo-price-note { font-size: 12px; color: var(--accent-deep); font-weight: 600; margin-top: 4px; }
.ai-promo .form-actions { justify-content: center; }
/* блокировка ИИ-агента до подключения */
.ssh-agent { position: relative; }
.ssh-agent.locked .ssh-agent-msgs, .ssh-agent.locked .ssh-agent-input { filter: blur(2.5px); opacity: .5; pointer-events: none; user-select: none; }
.ssh-agent-lock { position: absolute; inset: 44px 0 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 22px; background: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(2px); }
.ssh-agent-lock-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); box-shadow: 0 10px 24px -8px var(--accent); }
.ssh-agent-lock-t { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); }
.ssh-agent-lock-s { font-size: 12.5px; color: var(--text-2); line-height: 1.5; max-width: 340px; }
.ssh-agent-lock-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: 999px; padding: 4px 10px; }

/* ============ адаптив: сетки и компоненты (доп.) ============ */
@media (max-width: 980px) {
  .co-layout { grid-template-columns: 1fr; }        /* конфигуратор: панель расчёта уходит вниз */
  .co-layout .sum-panel { position: static; }
}
@media (max-width: 760px) {
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-item { flex-wrap: wrap; }
  .vm-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); } /* быстрые действия 2-в-ряд (а не 1) */
  .pm-grid { grid-template-columns: 1fr; }
  .metric-tiles { grid-template-columns: 1fr; }
  .pr-specgrid { gap: 12px 16px; }
  .dash-hero { gap: 12px; }
}

/* ============================================================================
   Responsive consolidation — phone/tablet fixes (appended to components.css)
   Breakpoints descending: 1320 → 1100 → 980 → 760 → 560 → 480 → 360
   ============================================================================ */

@media (max-width: 1100px) {
  /* Discounts promo cards (inline repeat(3,1fr) grid override) */
  .discount-grid { grid-template-columns: repeat(2, 1fr); }
  .page .grid[style*='repeat(3'] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 980px) {
  /* Referral info + balance card (inline 1.4fr 1fr grid override) */
  .ref-grid { grid-template-columns: 1fr; }
  .page .grid[style*='1.4fr'] { grid-template-columns: 1fr !important; }
}

/* было ограничено ≤760px — инлайновая колонка 1fr 320px (JSX) оставалась активной на
   761-1100px (планшет/ноутбук с видимым сайдбаром) и вылезала за экран, ровно как
   .cfg-layout/.cfg-grid2/.co-layout раньше (тот же паттерн, тот же диапазон). */
@media (max-width: 1100px) {
  .cart-grid { grid-template-columns: 1fr !important; }
  .cart-grid .sum-panel { position: static; }
}
/* genuine планшет (761-980) — места достаточно, возвращаем 2 колонки как у соседних сеток */
@media (min-width: 761px) and (max-width: 980px) {
  .cart-grid { grid-template-columns: 1fr 320px !important; }
  .cart-grid .sum-panel { position: sticky; top: 20px; }
}

@media (max-width: 760px) {
  /* --- Tables without .tbl-wrap clipped by .card{overflow:hidden} --- */
  .card:has(> .tbl) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .card:has(> .tbl) > .tbl { min-width: 560px; }
  .page[data-screen-label="Роли пользователей"] .card { overflow-x: auto; overflow-y: visible; }
  .page[data-screen-label="Роли пользователей"] .card > table.tbl { min-width: 100%; }
  .page[data-screen-label="Роли пользователей"] .tool-search { display: none; }

  /* --- Accordion-body tables (Privacy / Actions / Notifications) --- */
  .acc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .acc-body > .tbl,
  .acc-body table.tbl { min-width: 520px; }

  /* --- Data-table density (Payments / Expenses / Autoprolong) --- */
  .tbl td { padding: 11px 12px; font-size: 13px; }
  .tbl th { padding: 10px 12px; }
  .tbl-foot { gap: 16px; }

  /* --- Form grid: align collapse to system 760 breakpoint --- */
  .form-grid { grid-template-columns: 1fr; }

  /* --- Discounts promo cards: single column --- */
  .discount-grid { grid-template-columns: 1fr; }
  .page .grid[style*='repeat(3'] { grid-template-columns: 1fr !important; }

  /* --- VM metrics card: 4-up flex row → 2-up grid --- */
  .vm-metrics-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .vm-metric { padding: 14px 12px; gap: 10px; }
  .vm-metric-sep { display: none !important; }
  .vm-metric:nth-child(1),
  .vm-metric:nth-child(5) { border-bottom: 1px solid var(--border); }
  .vm-metric:nth-child(odd) { border-right: 1px solid var(--border); }

  /* --- VM events table (no overflow wrapper) --- */
  .vm-events { padding: 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vm-events-tbl { min-width: 460px; }

  /* --- VNC console decorative side rails --- */
  .vmc-rail { display: none; }
}
/* было покрыто только ≤760 и 981+ — дыра 761-980 (планшет, drawer-режим), таблица с
   фиксированными th (150/170px) переполнялась без скролл-обёртки. */
@media (min-width: 761px) and (max-width: 980px) {
  .vm-events { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vm-events-tbl { min-width: 460px; }
}

@media (max-width: 560px) {
  /* --- Account button: avatar-only, hide email/chevron --- */
  .acct .em { display: none; }
  .acct > svg { display: none; }
  .acct { padding: 0; width: 38px; justify-content: center; border-radius: 50%; }

  /* --- Order-details config table (.ct-row) --- */
  .ct-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ct-row.ct-head span:nth-child(2) { display: none; }
  .ct-row span:nth-child(2) { grid-column: 1 / -1; color: var(--text-3); font-weight: 600; }
  .ct-row span:last-child { text-align: right; }

  /* --- Configurator form + option cards --- */
  .cfg-form { padding: 16px; }
  .opt-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .opt-card { min-width: 0; }
  .cfg-f .ipv4-stepper { flex-shrink: 0; }

  /* --- Cart item wrapping --- */
  .cart-item { flex-wrap: wrap; row-gap: 8px; }
  .cart-item .ci-name,
  .cart-item .ci-meta { word-break: break-word; }
  .cart-item .ci-price { margin-left: 54px; }
  .cart-item .row-act { margin-left: auto; }

  /* --- Checkout sum total --- */
  .sum-total { flex-wrap: wrap; gap: 4px; }
  .sum-total .tv { font-size: 24px; }

  /* --- Payment-method card radio spacing --- */
  .pm-card .pm-name { padding-right: 26px; }
  .pm-card .pm-radio { top: 14px; right: 14px; }

  /* --- Checkout autorenew checkbox row --- */
  .co-check { width: 100%; align-items: flex-start; }
  .co-check input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; }

  /* --- Top-up wizard table footer --- */
  .tbl-foot { flex-wrap: wrap; gap: 6px 18px; padding: 12px 14px; }
  .tbl-foot > span { flex: 1 1 100%; }

  /* --- Top-up wizard amount + currency controls --- */
  .amount-box { gap: 12px; }
  .amount-box .field { flex: 1 1 100%; min-width: 0; }
  .cur-sel { width: 100%; }
  .cur-sel-btn { height: 46px; }
  .cur-sel-pop { left: 0; right: 0; }
  .cur-sel-opt { padding: 11px 12px; }

  /* --- Pay-method / preset tap targets --- */
  .pay-method .btn-sm { height: 40px; padding: 0 14px; }
  .amt-chips .amt-chip.btn-sm { height: 38px; }

  /* --- VM rename / title --- */
  .vm-rename { flex-wrap: wrap; }
  .vm-rename-input { min-width: 0; width: 100%; font-size: 19px; }
  .vm-title { font-size: 20px; }

  /* --- VM sub-bar --- */
  .vm-subbar { gap: 10px 14px; }
  .vm-meta { font-size: 12.5px; }
  .vm-action { padding: 6px 2px; }

  /* --- VM events table cells --- */
  .vm-events-tbl th,
  .vm-events-tbl td { padding-right: 10px; font-size: 12.5px; }

  /* --- VM disk table (inline min-width:280 cell) --- */
  .vm-disk-tbl td { min-width: 0 !important; }
  .vm-disk-bar-row { font-size: 11.5px; }

  /* --- VM disk top (ring + legend) --- */
  .vm-disk-top { gap: 18px; }

  /* --- VM segmented control (IP model / stats period) --- */
  .vm-seg { display: flex; flex-wrap: wrap; width: 100%; }
  .vm-seg-i { flex: 1 1 auto; min-width: 0; text-align: center; padding: 8px 10px; font-size: 12px; }

  /* --- 2FA QR row (inline nowrap override) --- */
  .tfa-qrrow { flex-wrap: wrap; justify-content: center; }
  .tfa-modal > div[style] { flex-wrap: wrap !important; gap: 14px !important; }
  .tfa-modal > div[style] > div:first-child { align-self: center !important; }

  /* --- Accordion-body table cell density --- */
  .acc-body .tbl th,
  .acc-body .tbl td { padding: 9px 10px; font-size: 12.5px; }

  /* --- Notification table first column --- */
  .ntf-tbl th,
  .ntf-tbl td { padding: 9px 8px; }
  .ntf-tbl td:first-child { white-space: normal; min-width: 150px; }
  .ntf-tbl th:first-child { white-space: normal; }

  /* --- Timezone/start-page dropdown height guard --- */
  .csel-list { max-height: 200px; }

  /* --- Income chart: keep legible min width, scroll --- */
  .chart-wrap { overflow-x: auto; }
  .chart-wrap svg { min-width: 560px; }

  /* --- User permissions rows --- */
  .perm-thead,
  .perm-ghead,
  .perm-row { padding-left: 14px; padding-right: 14px; }
  .perm-row { padding-top: 11px; padding-bottom: 11px; gap: 10px; }

  /* --- Roles: access toggle tap target --- */
  .acc-btn { width: 44px; height: 36px; }
}

@media (max-width: 480px) {
  /* --- Topbar: drop theme toggle + crumbs to save width --- */
  .topbar .theme-toggle { display: none; }
  .crumbs { display: none; }

  /* --- Condense balance pill --- */
  .balance-pill { gap: 4px; padding: 0 4px 0 8px; height: 36px; }
  .balance-pill .bv { font-size: 12.5px; }
  .balance-pill .topup { height: 26px; width: 26px; padding: 0; justify-content: center; border-radius: 50%; }

  /* --- Notification / account dropdowns: keep off the edge --- */
  .notif-pop { width: min(360px, calc(100vw - 24px)); right: -6px; }
  .acct-pop { right: 0; min-width: 180px; max-width: calc(100vw - 20px); }

  /* --- Checkout item head wrapping --- */
  .co-item-head { flex-wrap: wrap; }
  .co-item-head .co-qty { order: 3; margin-left: 0; }
  .co-item-head .co-sum { order: 2; margin-left: auto; }

  /* --- IPv4 slider --- */
  .ip-slider { gap: 10px; }
  .ip-slider .input { width: 72px; height: 40px; }

  /* --- VDS fixed specs single column --- */
  .fixed-specs { grid-template-columns: 1fr; }

  /* --- Checkout steps --- */
  .steps { font-size: 12px; gap: 6px; }
  .steps .step { white-space: nowrap; padding: 6px 11px; }
  .step .sn { width: 20px; height: 20px; font-size: 11px; }
  .step-arrow { transform: scale(.85); }

  /* --- DC popup: span page width (avoids wrapped-button misalign) --- */
  .dc-pop { left: 0; right: 0; width: auto; max-width: none; }

  /* --- Configurator config-value breakdown row --- */
  .sum-break .sb { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sum-break .sb .v { text-align: left !important; max-width: none !important; }

  /* --- Catalog hero --- */
  .order-hero { padding: 18px 16px; }
  .order-hero h1 { font-size: 21px; flex-wrap: wrap; gap: 8px; }
  .order-hero p { font-size: 13px; }

  /* --- Pay-method row density --- */
  .pay-method { gap: 11px; padding: 13px 14px; }
  .pay-logo { width: 40px; height: 40px; }

  /* --- AutoprolongEdit form actions --- */
  .form-actions { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
  .form-actions .btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 120px;
    justify-content: center;
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
  }

  /* --- VM title --- */
  .vm-title { font-size: 19px; letter-spacing: -0.01em; line-height: 1.2; }

  /* --- VM side nav pills --- */
  .vm-side-item { font-size: 12.5px; gap: 7px; padding: 9px 10px; }

  /* --- VM copy toast: clamp to viewport --- */
  .vm-copy-toast { left: 12px; right: 12px; transform: none; max-width: none; width: auto; bottom: 16px; }

  /* --- VNC console toolbar --- */
  .vm-console-bar > div[style*='flex'] { display: none; }
  .vm-console-bar { gap: 8px 10px; }
  .vm-console-bar .btn-sm { flex: 1 1 auto; }

  /* --- VNC console screen sizing --- */
  .vm-console-screenwrap { height: calc(100vh - 200px); min-height: 240px; }
  .vm-console-chrome { padding: 8px 10px; gap: 8px; }
  .vmc-badge { display: none; }

  /* --- VM IP popover --- */
  .vm-ip-pop { min-width: 0; width: max-content; max-width: 78vw; left: auto; right: 0; }

  /* --- VNC password rows --- */
  .vnc-pwd-input { min-width: 0; flex: 1 1 100%; }
  .vnc-act { flex: 1 1 auto; justify-content: center; }

  /* --- VM modal padding --- */
  .vm-modal { padding: 22px 18px; width: calc(100% - 24px); max-width: calc(100% - 24px); }
  .vm-modal-title { font-size: 17px; }
  .vm-modal-x { top: 10px; right: 10px; }

  /* --- VM aside padding --- */
  .vm-aside { padding: 16px 16px; }

  /* --- 2FA meta row single column --- */
  .tfa-metarow { grid-template-columns: 1fr; gap: 10px; }

  /* --- 2FA / vm modal padding (privacy screen) --- */
  .tfa-modal { max-width: calc(100% - 24px); }

  /* --- Referral copy field wrapping --- */
  .copy-field { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .copy-field .cf-val { flex: 1 1 100%; white-space: normal; word-break: break-all; }
  .copy-field .btn { flex: 0 0 auto; }

  /* --- Orders row link wrapping --- */
  .order-row-link { flex-wrap: wrap; }
  .order-row-link .or-name { flex: 1 1 100%; order: 2; }
  .order-row-link .or-status { margin-left: 0; order: 3; }
  .order-row-link .or-go { order: 1; margin-left: auto; }

  /* --- Roles perm toolbar: totals stack, comfortable buttons --- */
  .toolbar .tool-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px 14px; }
  .toolbar .tool-total { font-size: 12px; }
  .toolbar .tool-btn { height: 40px; padding: 0 11px; }
  .toolbar { gap: 6px; }
  .tool-sep { display: none; }

  /* --- Roles drill-down back-header title wrap --- */
  .page-head .page-title { white-space: normal; overflow-wrap: anywhere; font-size: 17px; line-height: 1.25; }
}

/* --- Long dynamic sub-screen titles (SvHead: edit/prolong/history/tariff-change) must wrap
   on tablet too, not just <=480px — otherwise nowrap + ancestor overflow-x:hidden clips them --- */
@media (min-width: 481px) and (max-width: 1024px) {
  .page-head .page-title { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  /* --- VM OS reinstall tiles single column --- */
  .os-tiles { grid-template-columns: 1fr; gap: 8px; }
  .os-tile { padding: 10px 12px; }
}

@media (max-width: 400px) {
  /* --- VM disk top stacks --- */
  .vm-disk-top { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 380px) {
  /* --- Order OS tiles + option cards single column --- */
  .os-tiles { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }

  /* --- VM metrics card single column --- */
  .vm-metrics-card { grid-template-columns: 1fr; }
  .vm-metric:nth-child(odd) { border-right: none; }
  .vm-metric { border-bottom: 1px solid var(--border); }

  /* --- Tariff footer stacks --- */
  .tariff-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .tariff-foot .btn { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
  /* --- Topbar tighten so cluster never clips --- */
  .topbar { gap: 5px; padding: 0 8px; }
  .top-actions { gap: 4px; }

  /* --- Mobile drawer merch row + play CTA --- */
  .nav-play-cta { min-height: 34px; padding: 0 8px; flex-shrink: 0; }
  .nav-merch-row { gap: 6px; }

  /* --- Certificate success amount --- */
  .cert-amount { font-size: 32px; }
  .cert-amount-cur { font-size: 18px; }

  /* --- 2FA code input + download links --- */
  .tfa-code { letter-spacing: 6px; font-size: 19px; width: 110px; }
  .tfa-dl { gap: 12px; }

  /* --- Avatar upload row --- */
  .avatar-row { gap: 12px; }
  .avatar-prev { width: 64px; height: 64px; border-radius: 14px; }

  /* --- Phone country popover viewport clamp --- */
  .pcc-pop { width: min(230px, calc(100vw - 32px)); }
  .phone-row { gap: 6px; }
  .phone-row .phone-num { min-width: 0; }
}

/* === Responsive consolidation: phone/tablet fixes (acct rows, merch promo, support, game, AI card, SSH) — descending breakpoints === */

@media (max-width: 900px) {
  /* Merch promo full-width row (iPad portrait): linearize the absolute art/cap/tag stack into normal flow so caption/art don't overlap flow content */
  .merch-promo {
    min-height: auto;
    padding: 20px 18px;
    gap: 14px;
  }
  .merch-promo-tag {
    position: static;
    top: auto;
    left: auto;
    align-self: flex-start;
  }
  .merch-promo-art {
    position: static;
    height: auto;
    inset: auto;
    display: flex;
    justify-content: center;
    margin: 30px 0 4px;
  }
  .merch-promo-art .mpa-badge {
    position: relative;
    transform: none;
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }
  .merch-promo-art .mpa-badge svg {
    width: 44px;
    height: 44px;
  }
  .merch-promo-art .mpa-rank {
    bottom: -10px;
  }
  .merch-promo-art .mpa-spark {
    display: none;
  }
  .merch-promo-cap {
    position: static;
    inset: auto;
    top: auto;
    font-size: var(--fs-cap, 17px);
    line-height: 1.3;
    margin: 4px 0 0;
  }
}

@media (max-width: 560px) {
  /* BuyAdmin plan card: stack the 3-col icon/body/price flex row vertically */
  .page[data-screen-label="Заказ администрирования"] .card-pad {
    flex-direction: column;
    gap: 14px;
  }
  .page[data-screen-label="Заказ администрирования"] .card-pad > div:last-child {
    text-align: left;
    width: 100%;
  }
  .page[data-screen-label="Заказ администрирования"] .card-pad > div:last-child .btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* SSH connect form (Хост/Порт/Пользователь/Пароль): раньше схлопывание в 1 колонку
   работало только до 480px — на планшете (561-1024, drawer-режим) форма оставалась
   двухколоночной и вылезала за экран. */
@media (max-width: 1024px) {
  .ssh-conn-grid, .ssh-connect-card .ssh-conn-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  /* Support: TicketDetail reply editor footer — allow buttons to wrap */
  .editor-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  .editor-foot .btn {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Support: NewTicket attachment chips — constrain width + ellipsis filename */
  .attach-list .attach-chip {
    max-width: 100%;
  }
  .attach-list .attach-chip > :nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Support: markdown preview link/url wrapping (NewTicket + TicketDetail) */
  .ticket-preview,
  .editor-preview {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ticket-preview a,
  .editor-preview a {
    overflow-wrap: anywhere;
  }

  /* Game: condense the absolutely-positioned score badge over the canvas */
  .twr-score-badge {
    top: 10px;
    left: 10px;
    font-size: 13px;
    padding: 5px 10px;
    gap: 5px;
    max-width: calc(100% - 20px);
  }
  .twr-score-badge .twr-badge-u {
    font-size: 12px;
    color: var(--text-2);
  }
  .twr-score-badge .twr-badge-sep {
    color: var(--border-strong);
    margin: 0 1px;
  }

  /* Dashboard AI card: square the submit button (hide label) + reduce side padding */
  .ai-card {
    padding: 18px 16px;
  }
  .ai-card-input .ai-card-go span {
    display: none;
  }
  .ai-card-go {
    padding: 0;
    width: 40px;
  }

  /* SSH connect form: stack credential grid to a single column.
     Нужен и вариант с .ssh-connect-card — та версия (встроенная карточка на странице VM)
     задаёт grid-template-columns: 1fr auto с более высокой специфичностью и без этого
     дублирования перебивала бы схлопывание в колонку, вылезая за экран. */
  .ssh-conn-grid .fgroup[style] {
    max-width: none !important;
  }
  .ssh-connect-stage,
  .ssh-connect-stage.embed {
    padding: 16px 12px;
    min-height: 0;
  }
  .ssh-connect-card {
    padding: 18px 16px;
  }

  /* SSH terminal title bar: truncate user@host, protect the disconnect link */
  .ssh-term-bar {
    min-width: 0;
  }
  .ssh-term-bar > span:nth-of-type(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .ssh-term-bar .vm-link {
    flex-shrink: 0;
  }

  /* SSH command/agent input: guarantee >=44px tap target, >=16px font (no iOS zoom) */
  .ssh-input-row {
    padding: 10px 12px;
    min-height: 44px;
  }
  .ssh-input {
    min-height: 24px;
    font-size: 16px;
  }
  .ssh-agent-input .input {
    font-size: 16px;
  }

  /* SSH agent messages: break long command tokens, tighten column padding */
  .ssh-msg-run code {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .ssh-agent-msgs {
    padding: 12px 10px;
  }
}

@media (max-width: 380px) {
  /* Merch promo: condense caption/title type on the smallest phones */
  .merch-promo-cap {
    font-size: 16px;
  }
  .merch-promo-title {
    font-size: 19px;
  }
}

@media (max-width: 360px) {
  /* Dashboard 'Об аккаунте' rows: protect key/value from overflow, ellipsis the value */
  .acct-v2 .acct-row2 {
    gap: 12px;
  }
  .acct-v2 .ar-k {
    min-width: 0;
    flex-shrink: 0;
  }
  .acct-v2 .ar-v {
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Game: push the score badge smaller still on tiny phones */
  .twr-score-badge {
    font-size: 12px;
    padding: 4px 9px;
  }

  /* Dashboard AI card: drop decorative leading icon + chips label */
  .ai-card-input-ic {
    display: none;
  }
  .ai-card-chips .ai-chips-label {
    display: none;
  }

  /* Drawer placeholder overlay: align with input's own 16px text padding */
  .ai-ph {
    left: 14px;
    right: 14px;
  }
}

/* === Mobile overflow/off-screen consolidation (360–430px phones): tables→internal scroll, popovers/tooltips/modals→viewport-clamped+repositioned, wide flow→min-width:0/wrap. Appended; breakpoints descending 760→560→480. === */
@media (max-width: 760px) {
  /* AI support bubble: break long unbreakable tokens (SSH cmds, URLs, IPv6) so it can't push past .sup-chat right edge */
  .ai-bubble { word-break: break-word; overflow-wrap: anywhere; }

  /* UsrParam accordion blowout: let grid item / flex card shrink so .acc-body overflow-x:auto scrolls wide tables internally instead of widening the page */
  .acc-anim-in { min-width: 0; }
  .acc-block { min-width: 0; max-width: 100%; }
  .acc-body { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .acc-body > div:has(> table.tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
  .acc-body > div > table.tbl { min-width: 520px; }

  /* VmNet "Настройки сети" card: keep non-clipping so the IP popover can escape; table stays narrow (3 cols) */
  .page[data-screen-label="Настройки сети"] .card:has(> .tbl),
  .page[data-screen-label="Настройки сети"] .card { overflow: visible !important; }
  .page[data-screen-label="Настройки сети"] .card > table.tbl { min-width: 0; display: table; }

  /* VM IP popover: clamp to viewport and right-anchor across the 480–760 range (not only <=480) */
  .vm-ip-pop,
  .page[data-screen-label="Настройки сети"] .vm-ip-pop { min-width: 0; width: max-content; max-width: calc(100vw - 24px); left: auto; right: 0; }
}

@media (max-width: 560px) {
  /* VM action dropdown: clamp to viewport, pin to right edge, let long RU labels wrap */
  .vm-menu { min-width: 200px; max-width: calc(100vw - 24px); right: 0; left: auto; }
  .vm-menu-i { white-space: normal; }

  /* 2FA modal QR row: wrap fixed ~188px QR above the secret column, center the QR, full-width the key column */
  .tfa-modal > div[style] { flex-wrap: wrap !important; gap: 14px !important; align-items: flex-start !important; }
  .tfa-modal > div[style] > div:first-child { align-self: center !important; max-width: 100%; }
  .tfa-modal > div[style] > div[style*='flex: 1'],
  .tfa-modal > div[style] > div[style*='flex:1'] { min-width: 0; width: 100%; flex: 1 1 100% !important; }

  /* 2FA manual-entry key: break the grouped secret so it can't exceed the modal */
  .tfa-secret { min-width: 0; flex-wrap: wrap; }
  .tfa-secret > span:first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }

  /* 2FA code-confirmation row: allow download links + input to wrap/shrink */
  .tfa-dl { flex-wrap: wrap; min-width: 0; }
  .input.tfa-code { max-width: 100%; }

  /* Avatar upload row: let the dropzone label text wrap inside the flexible column */
  .avatar-ctl { min-width: 0; }
  .avatar-drop { white-space: normal; }
  .avatar-drop-txt { flex-wrap: wrap; min-width: 0; justify-content: center; }
  .avatar-drop-txt > span { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  /* Renewal-status tooltip (topbar + service/pricelist rows): re-anchor right:0, clamp to viewport, nudge arrow back over the dot */
  .renew-tip { right: 0; left: auto; width: auto; min-width: 0; max-width: calc(100vw - 24px); }
  .renew-tip::before { right: 14px; }

  /* Field-hint tooltip (Profile / Configurator): right-anchor to the icon + clamp so it never spills past either viewport edge */
  .hint-i[data-tip]::after { left: 50%; right: auto; transform: translateX(-16px) translateY(2px); max-width: calc(100vw - 32px); white-space: normal; }
  .hint-i[data-tip]:hover::after { transform: translateX(-16px) translateY(0); }
  .hint-i[data-tip]::before,
  .hint-i[data-tip]:hover::before { left: auto; right: 6px; transform: none; }

  /* Pricelist period popover: clamp to viewport (was hard width:250px; left:0 that could wrap off the right edge) */
  .period-pop { left: 0; right: 0; width: auto; max-width: calc(100vw - 24px); }

  /* Game score badge: contain content so the trailing 'Стойка N' ellipsizes instead of clipping at the overflow:hidden stage edge */
  .twr-score-badge { overflow: hidden; white-space: nowrap; }
  .twr-score-badge .twr-badge-u { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* NewTicket attachment chip: bare-text filename node has no wrapper — break on the chip itself */
  .attach-list .attach-chip { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

  /* Dashboard AiCard search bar: wrap the fixed-width button onto its own full-width line under the input */
  .ai-card-input { flex-wrap: wrap; height: auto; padding: 8px; row-gap: 8px; }
  .ai-card-input input { flex: 1 1 100%; min-width: 0; height: 36px; }
  .ai-card-input-ic { order: -1; }
  .ai-card-go { flex: 1 1 100%; width: 100%; justify-content: center; }

  /* SSH connect header: let the host/sub block shrink so traffic dots don't get pushed off the right edge */
  .ssh-connect-head > div:nth-child(2) { min-width: 0; }
  .ssh-connect-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ssh-traffic { flex-shrink: 0; }
}

@media (max-width: 360px) {
  /* Dashboard AI card: tighten input row (overrides the 480px block's padding:8px above — must stay declared after it) */
  .ai-card-input {
    gap: 8px;
    padding: 0 6px 0 12px;
  }
}

/* ===== мелкие таблицы в аккордеоне «Настройки/Конфиденциальность» — умещаем переносом,
       а не горизонтальным скроллом (данные короткие: даты, статусы) ===== */
@media (max-width: 640px) {
  .acc-body table.tbl { min-width: 0 !important; width: 100%; }
  .acc-body > div:has(> table.tbl) { overflow-x: visible; }
  .acc-body .tbl th, .acc-body .tbl td { white-space: normal; word-break: break-word; padding: 8px 9px; font-size: 12px; }
  .acc-body .tbl th { font-size: 10.5px; }
}

/* Tablet-range responsive consolidation (561–1100px). Phones <=560 untouched: every rule is either min-width:561+ scoped, or a max-width that is also correct for phones. */

/* ===== Tablet portrait drawer band — content is full-width, keep desktop two-column layouts (561–980) ===== */
@media (min-width: 561px) and (max-width: 980px) {
  .summary,
  .cfg-grid2 .sum-panel,
  .co-layout .sum-panel { position: sticky; top: 20px; }
}
/* Реферальная сетка (карточка инфо + баланс, 1.4fr/1fr) — на 561-760 слишком тесно,
   раньше отменяла собственное же схлопывание в 1 колонку (та же причина, тот же паттерн). */
@media (min-width: 761px) and (max-width: 980px) {
  .page .grid[style*='1.4fr'] { grid-template-columns: 1.4fr 1fr !important; }
}

/* ===== Discounts promo grid — full-width portrait keeps 3-up (761–980) ===== */
@media (min-width: 761px) and (max-width: 980px) {
  .page .grid[style*='repeat(3'] { grid-template-columns: repeat(3, 1fr) !important; }
  /* .cfg-layout/.cfg-grid2/.co-layout: 300px фиксированная колонка не влезает от 561px —
     крупные телефоны (частый CSS-viewport ~380–650px в этом диапазоне) ловили эту "планшетную"
     сетку и контент вылезал за экран (обрезался overflow-x:hidden). Двухколоночную раскладку
     оставляем только от ГЕНУИННОГО планшета (761px+), ниже — одна колонка (см. правило ≤1100px). */
  .cfg-layout { grid-template-columns: 1fr 300px; }
  .cfg-grid2 { grid-template-columns: 1fr 300px; gap: 18px; }
  .co-layout { grid-template-columns: 1fr 300px; }
}

/* ===== Metric tiles — keep 3-up across the whole tablet band, never single column (561–1100) ===== */
@media (min-width: 561px) and (max-width: 1100px) {
  .metric-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ===== Two-column content layouts kept through tablet, trimmed side panels (561–1100) ===== */
@media (min-width: 561px) and (max-width: 1100px) {
  .dash-cols { grid-template-columns: 1.2fr 1fr; }
}
/* .chat-layout: колонка 260px фиксированная (не fr, в отличие от .dash-cols) — на 561-760px
   не помещается вместе с минимально читаемым чатом и вылезает за экран (та же причина, что
   у .cart-grid/.cfg-layout). Нижнюю границу подняли до 761 — там места уже достаточно. */
@media (min-width: 761px) and (max-width: 1100px) {
  .chat-layout { grid-template-columns: 1fr 260px; gap: 16px; }
}

/* ===== Lower tablet / large-phablet band — keep multi-column where phones drop to one (561–760) ===== */
@media (min-width: 561px) and (max-width: 760px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Payment grid stable 2-up reaches iPad portrait; also correct for phones (<=820) ===== */
@media (min-width: 561px) and (max-width: 820px) {
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Virtual-server rows stack from iPad portrait down; also correct for phones (<=1024) ===== */
@media (max-width: 1024px) {
  .vrow { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== Roles / permissions — touch-grade density and tap targets on tablet (561–1024) ===== */
@media (min-width: 561px) and (max-width: 1024px) {
  .perm-row {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 12px;
    min-height: 48px;
  }
  .acc-btn { width: 40px; height: 34px; }
}

/* ===== OS tile version popover — .os-tile shrinks to ~113–186px in the tablet band (561–1024,
   .cfg-grid2 keeps a 300px sidebar while .os-tiles stays 2–3 columns), but .fsel-pop has a fixed
   min-width:220px and overflows the tile; .content{overflow-x:hidden} then clips it (see phone-only
   fix at max-width:560px above, which doesn't cover this range) ===== */
@media (min-width: 561px) and (max-width: 1024px) {
  .os-tile .fsel-pop { min-width: 0; max-width: calc(100vw - 26px); }
}
@media (min-width: 561px) and (max-width: 834px) {
  .perm-thead,
  .perm-ghead,
  .perm-row { padding-left: 16px; padding-right: 16px; }
}

/* ===== AI-support chat uses viewport-relative height on tablet portrait; also correct for phones (<=880) ===== */
@media (max-width: 880px) {
  .sup-chat { height: min(72vh, 680px); }
}

/* ===== Settings accordion tables — wrap short-data tables instead of horizontal scroll (641–1100) ===== */
@media (min-width: 641px) and (max-width: 1100px) {
  .acc-body table.tbl { min-width: 0; width: 100%; }
  .acc-body > div:has(> table.tbl) { overflow-x: visible; }
  .acc-body .tbl th,
  .acc-body .tbl td { white-space: normal; word-break: break-word; }
  .acc-body .tbl td { padding: 11px 12px; }
  .acc-body .tbl th { padding: 10px 12px; }
  .ntf-tbl th,
  .ntf-tbl td { padding: 11px 10px; }
  .ntf-tbl td:first-child,
  .ntf-tbl th:first-child { padding-left: 14px; }
}

/* ===== OS picker fills the wider tablet row (641–1100) ===== */
@media (min-width: 641px) and (max-width: 1100px) {
  .os-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== Game page — full-width portrait drawer band (881–980) ===== */
@media (min-width: 881px) and (max-width: 980px) {
  .twr-stage { height: 520px; }
}

/* ===== Sidebar-visible narrow-content band (981–1100): stack panels the sidebar squeezes, restore grids the <=1100 rules collapse too early ===== */
@media (min-width: 981px) and (max-width: 1100px) {
  /* keep 3 metric tiles across narrow content */
  .metric-tiles { grid-template-columns: repeat(3, 1fr); }

  /* dashboard + configurator + checkout: keep desktop columns, trim panels */
  .dash-cols { grid-template-columns: 1.2fr 1fr; }
  .cfg-grid2 { grid-template-columns: 1fr 300px; gap: 18px; }
  .cfg-grid2 .os-tiles { grid-template-columns: repeat(2, 1fr); }
  .co-layout { grid-template-columns: 1fr 280px; gap: 16px; }
  /* .chat-layout уже покрыт отдельным блоком (761-1100) выше */

  /* order/configurator inner option grids сайзинг к реальному месту */
  .os-grid { grid-template-columns: repeat(3, 1fr); }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }

  /* storefront: keep two-column store, single-column tariff cards in narrow main */
  .store-layout { grid-template-columns: 1fr 232px; gap: 20px; }
  .cat-rail {
    position: sticky;
    top: 20px;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  /* .tariff-grid общий класс для двух разных контекстов: Storefront (узкая колонка рядом с
     .cat-rail — тут 1 колонка оправдана) и Каталог screens-order.jsx (.order-layout,
     полная ширина без рельса — там же 1fr отбирал место без причины). Скоупим к Storefront. */
  .store-layout .tariff-grid { grid-template-columns: 1fr; }

  /* merch storefront 2-up + full-width promo, tighter detail gutter */
  .merch-b-grid { grid-template-columns: 1fr 1fr; }
  .merch-promo { grid-column: 1 / -1; min-height: 200px; }

  /* discounts promo grid: 2-up only while sidebar is visible */
  .page .grid[style*='repeat(3'] { grid-template-columns: repeat(2, 1fr) !important; }

  /* VM panel: stack everything the sidebar leaves no room for */
  .vm-layout { grid-template-columns: 1fr; }
  .vm-side { flex-direction: row; flex-wrap: wrap; }
  .vm-main-grid { grid-template-columns: 1fr; }
  .vm-metrics-card { flex-wrap: wrap; }
  .vm-metric { flex: 1 1 45%; padding: 12px 14px; }
  .vm-metric-sep { display: none; }
  .vm-events { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vm-events-tbl { min-width: 480px; }
  .vm-stat { flex-basis: 50%; }

  /* game page: drop side panel below stage, lay its cards side-by-side */
  .twr-layout { grid-template-columns: 1fr; }
  .twr-stage { height: 480px; }
  .twr-side { flex-direction: row; }
  .twr-side > * { flex: 1 1 0; min-width: 0; }
  .twr-prizes [style*="1 1 220px"] { flex-basis: 180px; }
  .twr-prizes [style*="1 1 240px"] { flex-basis: 200px; }
}

/* ===== Merch product detail — tighter gutter across the tablet band where the info column is narrow (861–1180) ===== */
@media (min-width: 861px) and (max-width: 1180px) {
  .merch-detail { gap: 20px; }
}

/* ===== Wider sidebar-visible bands for VM layout/grid (981–1200) ===== */
@media (min-width: 981px) and (max-width: 1200px) {
  .vm-layout { grid-template-columns: 1fr; }
  .vm-side { flex-direction: row; flex-wrap: wrap; }
  .vm-main-grid { grid-template-columns: 1fr; }
  .vm-metrics-card { flex-wrap: wrap; }
  .vm-events { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vm-events-tbl { min-width: 480px; }
  .referral-noop { /* placeholder removed */ }
}

/* ── FancyDate — фирменный календарь (вместо нативного input type=date) ── */
.fdate-pop { padding: 10px; min-width: 250px; }
.fdate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fdate-title { font-weight: 700; font-size: 13.5px; }
.fdate-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.fdate-nav:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.fdate-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.fdate-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; padding: 2px 0; }
.fdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fdate-day { height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.fdate-day:hover { background: var(--accent-soft); }
.fdate-day.today { border-color: var(--border); }
.fdate-day.on { background: var(--accent); color: #fff; }
.fdate-empty { height: 32px; }
.fdate-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.fdate-link { background: none; border: none; color: var(--accent-deep); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.fdate-link:hover { text-decoration: underline; }

/* аватар-фото в шапке (загруженный в настройках) */
.avatar.avatar-photo { padding: 0; overflow: hidden; }
.avatar.avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ── фильтр-поповер тулбара (рабочие фильтры таблиц) ── */
.filt-pop { min-width: 210px; }
.filt-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 8px; }
.filt-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.filt-opt { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.filt-opt:hover { border-color: var(--accent); color: var(--accent-deep); }
.filt-opt.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── мобильная страховка недавно добавленного (акт сверки/фильтры/тулбары/оплата) ── */
@media (max-width: 560px) {
  /* поповеры (календарь/фильтры/селект) не шире экрана, контент умещается */
  .fsel-pop, .fdate-pop, .filt-pop { min-width: 0 !important; max-width: calc(100vw - 26px); }
  /* тулбары с кучей действий переносим; поиск на всю ширину строки */
  .toolbar { flex-wrap: wrap; row-gap: 8px; }
  .toolbar .tool-right { width: 100%; }
  .toolbar .tool-search { flex: 1 1 auto; width: auto; min-width: 0; }
}
/* кнопки действий форм (Печать/Скачать/Отмена…): 44%-ряд только выше 480px —
   на ≤480px уже действует более строгий фикс (колонка на всю ширину, см. @media max-width:480px) */
@media (min-width: 481px) and (max-width: 560px) {
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions .btn { flex: 1 1 44%; justify-content: center; white-space: normal; }
}
@media (max-width: 380px) {
  .fdate-grid { gap: 1px; }
  .fdate-day { font-size: 12px; height: 30px; }
  .form-actions .btn { flex: 1 1 100%; }
}

/* ── мобильный аудит (авто-консолидация): реальные фиксы на 360–390px ── */
@media (max-width: 560px) {
  /* Inline-styled name cells (minWidth:280 on Расходы/Автопродление rows) force the
     table far past a 360-390px viewport. .tbl-wrap already scrolls, but dropping the
     hard min lets the name reflow (whiteSpace:normal) and the table fit without scroll. */
  .tbl td[style*="min-width"] { min-width: 0 !important; }

  /* Table row action (wallet/chevron/edit) tap target: base is padding 4px 6px (~20-24px).
     Enlarge toward the 40px finger minimum without affecting desktop. */
  .row-act { padding: 8px 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* Row-select checkbox: base 18px is well below a comfortable tap target. */
  .tbl .check { width: 22px; height: 22px; }

  /* AI-support welcome block: base max-width 360px equals/exceeds the ~336px available
     at 360px viewport (12px page padding), risking horizontal overflow. Clamp to container. */
  .sup-welcome { max-width: 100%; }
}

@media (max-width: 390px) {
  /* Payments toolbar has 6 .tool-btn actions; shrink height/padding/font so they pack
     into fewer rows and stay comfortable after wrapping (.toolbar already wraps at 560).
     Селектор с префиксом .toolbar — иначе более специфичный ".toolbar .tool-btn" (40px,
     из блока ≤480px) всегда побеждал этот bare ".tool-btn" независимо от ширины экрана. */
  .toolbar .tool-btn { height: 34px; padding: 0 10px; font-size: 12px; gap: 5px; }
  .tool-btn.accent { padding: 0 12px; }
  .tool-btn svg { width: 16px; height: 16px; }

  /* Table footer totals: base gap 26px (wraps at 560); tighten on the narrowest phones. */
  .tbl-foot { gap: 4px 12px; padding: 10px 12px; font-size: 12px; }
  .tbl-foot .k { margin-right: 4px; }

  /* Support quick-question chips: reduce spacing/size so wrapped chips fit the clamped welcome. */
  .sup-chips { gap: 6px; }
  .sup-chip { padding: 8px 12px; font-size: 12px; }
  .sup-welcome-s { font-size: 12.5px; line-height: 1.4; }
}
/* мерч: кнопки формы доставки в столбик на узких телефонах (Оплатить · N ₽ длинная) */
@media (max-width: 390px) { .df-actions { flex-direction: column; } .df-actions .btn { width: 100%; flex: 1 1 auto; } }

/* ---------- Способы оплаты (SavedPay) — карточки вместо одинокой таблицы ---------- */
.spm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.spm-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 118px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  cursor: pointer; font: inherit; text-align: left; transition: border-color .14s, background .14s, box-shadow .14s, transform .1s;
}
.spm-card:hover { border-color: var(--accent-soft-bd); transform: translateY(-1px); }
.spm-card:active { transform: translateY(0) scale(.99); }
.spm-card.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.spm-card .pm-radio { top: 14px; right: 14px; }
.spm-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep)); color: #fff;
}
.spm-ic.wallet { background: linear-gradient(140deg, var(--text-3), var(--text-2)); }
.spm-name { font-weight: 700; font-size: 14px; padding-right: 22px; }
.spm-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-top: -4px; }
.spm-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spm-svc { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.spm-add {
  align-items: center; justify-content: center; flex-direction: row; gap: 8px; min-height: 118px;
  color: var(--accent-deep); font-weight: 700; font-size: 13.5px; border-style: dashed; text-align: center;
}
.spm-info { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.spm-info-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
}
.spm-info-tx { flex: 1 1 320px; min-width: 0; }
.spm-info-tx b { font-size: 14px; }
.spm-info-tx p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.spm-info-tx p:last-child { color: var(--text-3); }
.spm-info-cta { flex-shrink: 0; align-self: center; }
@media (max-width: 760px) {
  .spm-grid { grid-template-columns: 1fr; }
  .spm-info { flex-direction: column; }
  .spm-info-cta { align-self: stretch; }
}

/* плавающая кнопка «ИИ-подбор» (position:fixed, справа-снизу) на узких экранах
   схлопывается в кружок ~52px + отступ 22px = ~74px «мёртвой зоны» снизу справа.
   Штатного нижнего паддинга страницы (52px) на этой ширине не хватает — последняя
   карточка (напр. SSH-подключение) частично перекрывается кнопкой даже при полной
   прокрутке. Увеличиваем запас, чтобы контент всегда можно было докрутить выше FAB. */
@media (max-width: 520px) {
  .page { padding-bottom: 96px; }
}

/* ── модалка «оформляем заказ, ожидайте» (screens-order2 OrderWait) ── */
.order-wait-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: color-mix(in oklch, var(--bg, #0b0b0b) 55%, transparent); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); animation: owFade .18s ease; }
@keyframes owFade { from { opacity: 0; } to { opacity: 1; } }
.order-wait-card { width: 100%; max-width: 420px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(0,0,0,.5)); padding: 30px 26px 28px; }
.order-wait-spinner { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; border: 3.5px solid var(--border-strong, rgba(127,127,127,.3)); border-top-color: var(--accent, #33b36b); animation: owSpin .8s linear infinite; }
@keyframes owSpin { to { transform: rotate(360deg); } }
.order-wait-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.order-wait-sub { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.order-wait-sub b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .order-wait-spinner { animation-duration: 1.6s; } .order-wait-overlay { animation: none; } }
/* SSH: блокировка подключения, пока сервер недоступен (переустановка ОС / остановлен) */
.ssh-locked-note { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--amber-soft, rgba(224,165,47,.14)); color: var(--amber, #b5791b); border: 1px solid rgba(224,165,47,.35); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.ssh-locked-note svg { flex-shrink: 0; margin-top: 1px; }
.ssh-connect-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
/* «К оплате X CUR» в списке методов пополнения — конвертация суммы в валюту метода (как оригинал) */
.pay-topay { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; margin-right: 6px; text-align: right; }
/* реф-программа: примечание о начислении процентов */
.ref-payout-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding: 12px 15px; border-radius: var(--r-md); background: var(--sky-soft, rgba(74,144,226,.10)); border: 1px solid rgba(74,144,226,.24); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ref-payout-note svg { flex-shrink: 0; margin-top: 1px; color: var(--sky, #4a90e2); }

/* ══════════════════ Договор и документы ══════════════════
   Анимации входа для новых окон/блоков. Стиль совпадает с уже принятым в проекте
   (tfaModalIn/vmOvIn): плавное появление + лёгкий подъём со скейлом. Всё уважает
   prefers-reduced-motion — при выключенной анимации элементы просто появляются. */

/* окно выбора договора: подложка и карточка */
.ctr-ov { animation: ctrOvIn .18s ease; }
.ctr-modal { animation: ctrModalIn .28s cubic-bezier(.2,1,.4,1); }
@keyframes ctrOvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctrModalIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }

/* шаги внутри окна: смена «резидентство → выбор компании» без рывка */
.ctr-step { animation: ctrStepIn .26s cubic-bezier(.2,1,.4,1); }
@keyframes ctrStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* карточки компаний и строки документов: короткий каскад появления */
.ctr-card { animation: ctrCardIn .3s cubic-bezier(.2,1,.4,1) backwards; }
.ctr-card:nth-child(2) { animation-delay: .05s; }
@keyframes ctrCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* плавное размытие страницы под окном (а не рывком) */
.content { transition: filter .22s ease; }

/* строки документов: наведение приподнимает, как у прочих кликабельных карточек */
.doc-row { animation: ctrCardIn .28s cubic-bezier(.2,1,.4,1) backwards; }
.doc-row:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; transform: translateY(-1px); }
.doc-row:active { transform: translateY(0); }
.doc-row { transition: border-color .15s ease, background .15s ease, transform .12s ease; }

@media (prefers-reduced-motion: reduce) {
  .ctr-ov, .ctr-modal, .ctr-step, .ctr-card, .doc-row { animation: none; }
  .content { transition: none; }
  .doc-row:hover, .doc-row:active { transform: none; }
}

/* ══════════════════ Индикатор статуса системы (топбар) ══════════════════
   Уровень и подпись приходят с бэкенда (GET /api/status), их правит администратор:
   ok — зелёный, warn — оранжевый, crit — красный. Геометрия пилюли повторяет соседей
   по шапке (.tg-card / .balance-pill): та же высота, радиус и типографика — не инородное
   тело. Подпись не растягивает шапку (nowrap + ellipsis), а в тесноте пилюля схлопывается
   до одной точки — текст остаётся в title. */
.sys-status {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 22px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; min-width: 0; flex-shrink: 1; cursor: help;
}
.sys-status .ss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: block; }
/* кап только предохранитель от простыни, которую может написать админ: штатные подписи warn/crit
   (самые длинные — «Критическая ошибка, специалисты работают», ~281px) должны влезать целиком,
   а на узкой полосе пилюлю ужимает flex-shrink, а не этот предел */
.sys-status .ss-tx { min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* уровень несут точка (цвет + форма) и рамка. Подпись остаётся --text-2: --amber/--red не
   переопределены в тёмной теме и на подложке пилюли не добирают AA 4.5:1 для 12.5px/600
   (warn на светлой 2.73:1, crit на тёмной 3.08:1), а --text-2 даёт 7+ в обеих темах.
   Форма — второй, нецветовой канал (WCAG 1.4.1): круг «ок», ромб «трудности», квадрат «авария». */
.sys-status.sys-ok .ss-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.sys-status.sys-warn .ss-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); border-radius: 2px; transform: rotate(45deg); animation: sysStPulseW 2.4s ease-in-out infinite; }
.sys-status.sys-crit .ss-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); border-radius: 2px; animation: sysStPulseC 1.4s ease-in-out infinite; }
.sys-status.sys-warn { border-color: color-mix(in oklch, var(--amber) 35%, var(--border)); }
.sys-status.sys-crit { border-color: color-mix(in oklch, var(--red) 35%, var(--border)); }

/* мягкая пульсация — только у warn/crit; «всё работает» не мигает и не отвлекает */
@keyframes sysStPulseW { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--amber) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes sysStPulseC { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--red) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) {
  /* специфичность ровно как у правил уровня (три класса) — с более слабым селектором
     `animation: none` проигрывает каскад и точка продолжает мигать, а работающая анимация
     вдобавок перекрывает статическое кольцо своими кейфреймами */
  .sys-status.sys-warn .ss-dot, .sys-status.sys-crit .ss-dot { animation: none; }
  .sys-status.sys-warn .ss-dot { box-shadow: 0 0 0 3px var(--amber-soft); }
  .sys-status.sys-crit .ss-dot { box-shadow: 0 0 0 3px var(--red-soft); }
}

/* шапка теснится (крошки на этой границе уже схлопнуты) — оставляем только точку */
@media (max-width: 1100px) {
  .sys-status { width: 38px; padding: 0; gap: 0; justify-content: center; flex-shrink: 0; position: relative; cursor: pointer; }
  .sys-status .ss-tx { display: none; }
  /* тач-браузеры тултип по title не показывают, поэтому подпись раскрывается по тапу —
     иначе на телефоне об аварии сообщает одна только точка (карточка как у .renew-tip) */
  .sys-status.ss-open .ss-tx {
    display: block; position: absolute; top: calc(100% + 9px); right: 0; z-index: 200;
    width: max-content; max-width: min(76vw, 300px); white-space: normal; text-align: left;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); box-shadow: var(--shadow-md); color: var(--text-2); line-height: 1.35;
  }
}
/* телефон: высота как у .balance-pill (36px), чтобы шапка не подросла */
@media (max-width: 560px) {
  .sys-status { width: 36px; height: 36px; }
}

/* ── SSH-агент: автономный режим, прерывание прогона, стоп-лист опасных команд ──────────
   Плашка автономного режима намеренно ЯНТАРНАЯ и во всю ширину над чатом: клиент должен
   видеть, что прямо сейчас команды уходят на его сервер без подтверждения. */
.ssh-auto-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--amber-soft); color: var(--text); position: relative; z-index: 6; }
.ssh-auto-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.ssh-auto-ic { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; color: #fff; background: var(--amber); }
.ssh-auto-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ssh-auto-tx b { font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.ssh-auto-tx i { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.ssh-auto-off { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-1); border-radius: 999px;
  padding: 5px 11px 5px 7px; font-size: 12px; font-weight: 700; transition: border-color .15s ease, color .15s ease; }
.ssh-auto-off:hover { border-color: var(--amber); color: var(--amber); }
.ssh-auto-sw { width: 28px; height: 16px; border-radius: 999px; background: var(--amber); position: relative; flex-shrink: 0; transition: background .15s ease; }
.ssh-auto-sw i { position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.ssh-auto-off:hover .ssh-auto-sw i { left: 2px; }

/* строка «идёт выполнение» с кнопкой «Прервать» — тоже над чатом, а не внутри ленты */
.ssh-run-bar { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-2); font-size: 12.5px; color: var(--text-2); position: relative; z-index: 6; }
.ssh-run-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: sshRunPulse 1s ease-in-out infinite; }
@keyframes sshRunPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
.ssh-run-stop { margin-left: auto; flex-shrink: 0; }

/* карточка стоп-листа: что именно опасно и чем это кончится */
.ssh-approve.ssh-danger { border-color: var(--red); background: var(--red-soft); }
.ssh-danger-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--red); margin-bottom: 8px; }
.ssh-danger-why { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
.ssh-danger-why b { color: var(--text); }
.ssh-danger-why span { color: var(--text-1); }
.ssh-danger-frag { font-size: 11.5px; color: var(--text-2); margin-bottom: 10px; word-break: break-all; }
.ssh-danger-frag code { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--red); }
/* та же расшифровка, но внутри обычной панели подтверждения */
.ssh-danger-note { border: 1px solid var(--red); background: var(--red-soft); border-radius: 9px; padding: 9px 10px; margin: 0 0 10px; }
.ssh-danger-note-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--red); margin-bottom: 6px; }
.ssh-danger-note-i { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.45; margin-top: 6px; }
.ssh-danger-note-i code { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--red); word-break: break-all; }
.ssh-danger-note-i b { color: var(--text); }
.ssh-danger-note-i span { color: var(--text-1); }

/* блокировка ручного ввода стоп-листом моста — прямо над строкой ввода терминала */
.ssh-blocked { border-top: 1px solid var(--red); background: var(--red-soft); padding: 11px 12px; }
.ssh-blocked-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--red); margin-bottom: 5px; }
.ssh-blocked-why { font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
.ssh-blocked-cmd { background: #0c1018; color: #ff9a9a; font-family: ui-monospace, monospace; font-size: 11.5px;
  padding: 8px 10px; border-radius: 8px; margin: 8px 0 0; white-space: pre-wrap; word-break: break-all; }
.ssh-blocked-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

@media (max-width: 560px) {
  .ssh-auto-bar { flex-wrap: wrap; }
  .ssh-auto-off { margin-left: 0; width: 100%; justify-content: center; }
}