/* ============================================================
   serv.host — Личный кабинет (BILLmanager redesign)
   Design system · orange brand · cyrillic-ready
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Onest:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* brand accent — serv.host green #63C248 (tweakable via --accent-h) */
  --accent-h: 142;
  --accent: #63C248;
  --accent-strong: #55ad3c;
  --accent-deep: #4a9b34;
  --accent-soft: oklch(0.955 0.032 var(--accent-h));
  --accent-soft-bd: oklch(0.885 0.062 var(--accent-h));
  --accent-contrast: #fff;

  /* warm-neutral light theme */
  --bg: oklch(0.984 0.004 70);
  --bg-2: oklch(0.965 0.005 70);
  --surface: #ffffff;
  --surface-2: oklch(0.982 0.004 70);
  --border: oklch(0.918 0.006 70);
  --border-strong: oklch(0.855 0.008 70);
  --text: oklch(0.23 0.012 70);
  --text-2: oklch(0.46 0.012 70);
  --text-3: oklch(0.62 0.01 70);

  --green: oklch(0.58 0.13 145);
  --green-soft: oklch(0.95 0.04 148);
  --amber: oklch(0.70 0.14 75);
  --amber-soft: oklch(0.955 0.05 80);
  --red: oklch(0.57 0.19 25);
  --red-soft: oklch(0.95 0.04 25);
  --sky: oklch(0.60 0.12 235);
  --sky-soft: oklch(0.95 0.04 235);
  --violet: oklch(0.58 0.16 295);
  --violet-soft: oklch(0.95 0.04 295);

  --shadow-xs: 0 1px 2px oklch(0.4 0.02 70 / 0.05);
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 70 / 0.06), 0 1px 1px oklch(0.4 0.02 70 / 0.04);
  --shadow-md: 0 6px 16px oklch(0.4 0.02 70 / 0.08), 0 2px 5px oklch(0.4 0.02 70 / 0.05);
  --shadow-lg: 0 20px 44px oklch(0.32 0.03 60 / 0.16), 0 6px 14px oklch(0.32 0.03 60 / 0.08);

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 22px;

  --sidebar-w: 260px;
  --topbar-h: 64px;

  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-display: 'Onest', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --accent: oklch(0.72 0.165 var(--accent-h));
  --accent-strong: oklch(0.77 0.155 var(--accent-h));
  --accent-deep: oklch(0.82 0.13 var(--accent-h));
  --accent-soft: oklch(0.32 0.07 var(--accent-h));
  --accent-soft-bd: oklch(0.42 0.09 var(--accent-h));
  --accent-contrast: oklch(0.17 0.02 70);

  --bg: oklch(0.215 0.035 155);
  --bg-2: oklch(0.245 0.034 155);
  --surface: oklch(0.265 0.03 155);
  --surface-2: oklch(0.305 0.028 155);
  --border: oklch(0.345 0.026 155);
  --border-strong: oklch(0.42 0.03 155);
  --text: oklch(0.97 0.006 155);
  --text-2: oklch(0.79 0.012 155);
  --text-3: oklch(0.63 0.014 155);

  --green-soft: oklch(0.30 0.06 150);
  --amber-soft: oklch(0.32 0.07 80);
  --red-soft: oklch(0.32 0.07 25);
  --sky-soft: oklch(0.30 0.06 235);
  --violet-soft: oklch(0.30 0.06 295);

  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.40);
  --shadow-lg: 0 24px 50px oklch(0 0 0 / 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { background: var(--bg); }
/* фирменное написание названия: serv — зелёным, .host — по теме, строчными */
.brand-serv { color: #4ca835; font-weight: 800; }
[data-theme="dark"] .brand-serv { color: #7ed867; }
.brand-host { color: var(--text); font-weight: 800; }
body {
  font-family: var(--font-ui);
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}
#root { height: 100vh; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 9px; margin: 3px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; transition: background .2s ease; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent-deep, var(--accent)); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
.mono { font-family: var(--font-mono); }
.bn-serv { color: #4ca835; font-weight: 700; }
.bn-host { color: var(--text); font-weight: 700; }
[data-theme="dark"] .bn-serv { color: #7ed867; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; overflow: hidden; }

.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: 11px; padding: 17px 20px 15px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 5px 12px oklch(0.67 0.18 var(--accent-h) / 0.38);
}
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.brand-name .dim { color: var(--text-3); font-weight: 600; }
.brand-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); transition: transform .2s; }
/* логотип-картинка в сайдбаре вместо иконки-ракеты */
.brand-mark-img { background: none !important; box-shadow: none !important; padding: 0; }
.brand-mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s cubic-bezier(.3,.7,.3,1); }
.brand:hover .brand-mark-img { transform: scale(1.06); }
/* кликабельный бренд → на главную: подъём, плавный логотип, мягкое свечение названия */
.brand { transition: transform .16s ease; cursor: pointer; border-radius: var(--r-md); }
.brand:hover { transform: translateY(-1px); }
.brand:active { transform: translateY(0) scale(.985); }
.brand:hover .brand-mark-img img { transform: scale(1.08) rotate(-6deg); }
.brand .brand-name, .brand .brand-tag { transition: color .18s ease; }
.brand:active .brand-mark-img img { animation: brand-pop .4s ease; }
@keyframes brand-pop { 0% { transform: scale(.9); } 50% { transform: scale(1.14) rotate(-8deg); } 100% { transform: scale(1.06); } }
.brand:hover .brand-name .dim { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .brand, .brand:hover, .brand:active, .brand-mark-img img, .brand:active .brand-mark-img img { transform: none !important; animation: none !important; } }

.nav { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; min-height: 0; }
.nav::-webkit-scrollbar { width: 7px; }
.cdisp { display: contents; }

.grp-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border-radius: var(--r-sm); color: var(--text-3); transition: background .12s, color .12s; }
.grp-head:hover { background: var(--bg-2); color: var(--text-2); }
.grp-head.cur { color: var(--text); }
.grp-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-2); display: grid; place-items: center; color: var(--text-2); flex-shrink: 0; transition: background .14s, color .14s; }
.grp-head.cur .grp-ic { background: var(--accent-soft); color: var(--accent-deep); }
.grp-label { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-chev { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: var(--text-3); flex-shrink: 0; transition: transform .22s cubic-bezier(.3,.7,.3,1); }
.nav-group.collapsed .grp-chev { transform: rotate(-90deg); }

.grp-items { overflow: hidden; max-height: 620px; transition: max-height .26s cubic-bezier(.3,.7,.3,1), opacity .2s; opacity: 1; padding-left: 12px; margin: 2px 0 2px 13px; border-left: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.nav-group.collapsed .grp-items { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 600; font-size: 13px; position: relative; transition: background .12s, color .12s;
  text-align: left; width: 100%;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.nav-item.active::before { content: ''; position: absolute; left: -13.5px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-item.active svg { color: var(--accent); }
.nav-item svg { color: var(--text-3); flex-shrink: 0; }
.nav-item .ni-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.solo { padding: 9px 11px; font-size: 13.5px; font-weight: 700; }
.nav-item.solo svg { color: var(--text-2); }
.nav-item.solo.active svg { color: var(--accent); }
.nav-item .count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--bg-2); color: var(--text-2); padding: 1px 7px; border-radius: 20px; min-width: 20px; text-align: center; }
.nav-item.active .count { background: var(--accent); color: #fff; }
/* промо-подсветка пункта «Мерч» во время акции */
.nav-item.nav-promo .nav-promo-dot { margin-left: auto; font-size: 9px; color: var(--accent); animation: navPromoBlink 1.4s ease-in-out infinite; }
.nav-item.nav-promo:not(.active) { color: var(--accent-deep); }
.nav-item.nav-promo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-soft), transparent 75%); opacity: 0; animation: navPromoGlow 2.2s ease-in-out infinite; }
@keyframes navPromoGlow { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }
@keyframes navPromoBlink { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-item.nav-promo .nav-promo-dot, .nav-item.nav-promo::after { animation: none; } .nav-item.nav-promo::after { opacity: 0; } }

/* ===== Анимации навигации (1: индикатор · 3: живые иконки · 4: плавные группы) ===== */
/* 3 — иконки и текст оживают при наведении */
.nav-item { transition: background .16s ease, color .16s ease, padding-left .18s cubic-bezier(.3,.7,.3,1); }
.nav-item svg { transition: transform .18s ease, color .16s ease; }
.nav-item:hover { padding-left: 15px; }
.nav-item:hover svg { transform: scale(1.12) translateY(-1px); color: var(--accent); }
.nav-item:active { transform: none; }
.nav-item:active svg { transform: scale(.92); }
.nav-item .ni-label { transition: transform .18s cubic-bezier(.3,.7,.3,1); }
.nav-item:hover .ni-label { transform: translateX(2px); }
/* лёгкая «подсветка-заливка» слева при наведении */
.nav-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity .18s ease; pointer-events: none; z-index: -1; }
.nav-item:hover::after { opacity: .5; }
/* у промо-пункта «Мерч» при наведении гасим пульс и показываем ровную плавную заливку */
.nav-item.nav-promo:hover::after { animation: none; opacity: .6; }
.nav-item.active::after { opacity: 0; }

/* 1 — индикатор активного пункта: плавно появляется при смене раздела */
.nav-item.active { transition: background .22s ease, color .22s ease; }
.nav-item.active::before { animation: nav-pill .26s ease; }
@keyframes nav-pill { 0% { height: 0; opacity: 0; } 100% { height: 18px; opacity: 1; } }
.nav-item.active svg { animation: nav-ic-pop .26s ease; }
@keyframes nav-ic-pop { 0% { transform: scale(.7); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

/* 4 — плавное появление вложенных пунктов каскадом при разворачивании группы */
.nav-group:not(.collapsed) .grp-items .nav-item { animation: nav-item-in .32s ease both; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(1) { animation-delay: .02s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(2) { animation-delay: .05s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(3) { animation-delay: .08s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(4) { animation-delay: .11s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(5) { animation-delay: .14s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(6) { animation-delay: .17s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(7) { animation-delay: .2s; }
.nav-group:not(.collapsed) .grp-items .nav-item:nth-child(8) { animation-delay: .23s; }
@keyframes nav-item-in { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
/* шеврон группы — мягкий «отскок» при раскрытии */
.grp-head:hover .grp-chev { color: var(--accent); }
.grp-head:hover .grp-ic svg { transform: scale(1.12); transition: transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-item svg, .nav-item .ni-label, .nav-item.active::before,
  .nav-item.active svg, .nav-group:not(.collapsed) .grp-items .nav-item { animation: none !important; transition: background .12s, color .12s !important; }
  .nav-item:hover { padding-left: 11px; }
}

.sidebar-foot { border-top: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mini-balance { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklch, var(--accent-soft) 60%, var(--surface))); border: 1px solid var(--accent-soft-bd); }
.mini-balance .mb-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.mini-balance .mb-l { font-size: 10.5px; color: var(--accent-deep); font-weight: 700; opacity: .8; line-height: 1; }
.mini-balance .mb-v { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--accent-deep); margin-top: 2px; }
.mini-balance .mb-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .12s; }
.mini-balance .mb-btn:hover { background: var(--accent-strong); }
.old-link { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 12.5px; color: var(--text-3); font-weight: 600; border-radius: var(--r-sm); }
.old-link:hover { background: var(--bg-2); color: var(--text-2); }

/* ---------- main ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: var(--topbar-h); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px); display: flex; align-items: center; gap: 14px; padding: 0 24px; flex-shrink: 0; z-index: 20;
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); font-weight: 600; min-width: 0; overflow: hidden; flex-shrink: 1; }
.crumbs .cdisp:last-child { min-width: 0; overflow: hidden; }  /* текущая крошка усекается, а не наезжает на tg-card */
.crumbs > button:first-child { display: inline-flex; align-items: center; transition: color .12s, transform .12s; }
.crumbs > button:first-child:hover { color: var(--accent-deep); transform: scale(1.12); }
.crumbs > button:first-child:active { transform: scale(.9); }
.crumbs .crumb-link:active { transform: scale(.94); }
.crumbs .cdisp { display: inline-flex; align-items: center; gap: 7px; }
.crumbs .cur { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.crumbs .crumb-link { color: var(--text-3); font: inherit; white-space: nowrap; transition: color .12s, transform .12s; }
.crumbs .crumb-link:hover { color: var(--accent-deep); text-decoration: underline; }
/* Telegram pill (topbar) */
.tg-card {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px 0 7px;
  border-radius: 12px; background: var(--surface); padding: 0 13px 0 5px;
  border: 1px solid var(--border); color: var(--text); white-space: nowrap; flex-shrink: 0;
  transition: transform .15s, box-shadow .2s, border-color .2s; position: relative;
}
.tg-card:hover { transform: translateY(-1px); border-color: #ade0fb; box-shadow: 0 6px 16px rgba(42,171,238,.22); }
.tg-card:active { transform: translateY(0); }
.tg-card-ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #29a9ea, #2aabee); box-shadow: 0 3px 9px rgba(42,171,238,.4); position: relative; }
/* единственная, спокойная анимация — мягкое кольцо-пинг вокруг иконки */
.tg-card-ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(42,171,238,.5); animation: tgPing 2.6s ease-out infinite; }
@keyframes tgPing { 0% { box-shadow: 0 0 0 0 rgba(42,171,238,.45); } 70%,100% { box-shadow: 0 0 0 9px rgba(42,171,238,0); } }
.tg-card-ic svg { display: block; margin-left: -1px; }
.tg-card-tx { display: flex; flex-direction: column; line-height: 1.25; gap: 1px; }
.tg-card-tx b { font-weight: 700; font-size: 12.5px; }
.tg-card-tx span { font-size: 10.5px; color: var(--text-3); }
.tg-arr { display: inline-flex; opacity: .5; transition: transform .14s; color: var(--text-3); }
.tg-card:hover .tg-arr { transform: translateX(3px); opacity: 1; }
@media (max-width: 1600px) {
  /* на ноутбуках (13″ FHD со скейлом ~1280–1536) полная плашка «Мы в Telegram» съедает место
     и крошки схлопываются в одну букву — поэтому сворачиваем её в квадратную иконку-кнопку.
     Полная плашка остаётся только на широких мониторах (>1600). */
  .tg-card { padding: 0; width: 42px; justify-content: center; margin-left: 2px; }
  .tg-card .tg-card-tx, .tg-card .tg-arr { display: none; }
}

.search {
  margin-left: 6px; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 0 12px; height: 38px; width: 260px; color: var(--text-3); transition: border-color .12s, box-shadow .12s;
}
.search:focus-within { border-color: var(--accent-soft-bd); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { border: none; outline: none; background: none; flex: 1; font-weight: 500; min-width: 0; }
.search .kbd { font-size: 10.5px; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.balance-pill { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 13px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.balance-pill .bl { font-size: 11px; color: var(--text-3); font-weight: 600; line-height: 1; }
.balance-pill .bv { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.balance-pill .topup { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 18px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; }
.balance-pill .topup:hover { background: var(--accent-strong); }

.icon-btn { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-2); border: 1px solid transparent; transition: background .12s, border-color .12s; position: relative; }
.icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); }

/* анимированный переключатель темы (солнце ↔ луна) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2, #eef3ee); border-radius: 999px; padding: 3px; }
.lang-opt { border: none; background: none; cursor: pointer; font-weight: 700; font-size: 12px; color: var(--text-3); padding: 4px 9px; border-radius: 999px; transition: background .16s ease, color .16s ease, transform .12s cubic-bezier(.34,1.56,.64,1); }
.lang-opt.on { background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.lang-opt:not(.on):hover { color: var(--accent-deep); background: var(--surface); transform: translateY(-1px); }
.lang-opt:not(.on):active { transform: translateY(0) scale(.92); }
.lang-opt.on:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0,0,0,.14); }
/* оверлей-анимация при смене языка */
.lang-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(10,22,14,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s ease; }
.lang-overlay.on { opacity: 1; }
.lang-ov-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 34px; border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 24px 70px rgba(0,0,0,.3); transform: translateY(10px) scale(.96); transition: transform .32s cubic-bezier(.3,.8,.3,1); }
.lang-overlay.on .lang-ov-card { transform: none; }
.lang-ov-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--accent-soft, #d7f0cf); border-top-color: var(--accent, #63C248); animation: langSpin .7s linear infinite; }
@keyframes langSpin { to { transform: rotate(360deg); } }
.lang-ov-txt { font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.theme-toggle { overflow: hidden; }
.theme-toggle .tt-icon { position: relative; width: 20px; height: 20px; display: block; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .5s cubic-bezier(.5,1.6,.4,1), opacity .35s ease; }
.theme-toggle .tt-sun-core { width: 11px; height: 11px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 6px rgba(245,166,35,.6); display: block; }
.theme-toggle .tt-ray { position: absolute; left: 50%; top: 50%; width: 2px; height: 4px; margin-left: -1px; margin-top: -2px; border-radius: 2px; background: #f5a623; transform-origin: center; transition: opacity .3s ease; }
.theme-toggle .tt-moon { background: none; }
.theme-toggle .tt-moon::before { content: ''; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset -5px -3px 0 0 #cdd6e8; transform: scale(0) rotate(-40deg); transition: transform .5s cubic-bezier(.5,1.6,.4,1); }
/* состояние по умолчанию (светлая тема): видна луна */
.theme-toggle .tt-sun { transform: scale(0) rotate(90deg); opacity: 0; }
.theme-toggle .tt-moon { transform: scale(1) rotate(0); opacity: 1; }
.theme-toggle .tt-moon::before { transform: scale(1) rotate(0); }
/* тёмная тема (атрибут на <html>): видно солнце */
[data-theme="dark"] .theme-toggle .tt-sun { transform: scale(1) rotate(0); opacity: 1; }
[data-theme="dark"] .theme-toggle .tt-moon { transform: scale(0) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .theme-toggle .tt-moon::before { transform: scale(0) rotate(40deg); }
.theme-toggle:hover .tt-sun-core { box-shadow: 0 0 10px rgba(245,166,35,.9); }
.theme-toggle:active .tt-icon { transform: scale(.82); transition: transform .15s; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .tt-sun, .theme-toggle .tt-moon, .theme-toggle .tt-moon::before { transition: opacity .2s; }
}
.icon-btn .dot { position: absolute; top: 7px; right: 8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 9px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); }
.acct { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.acct:hover { background: var(--bg-2); border-color: var(--accent-soft-bd); }
.acct.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acct > svg { transition: transform .2s ease; color: var(--text-3); }
.acct.open > svg { transform: rotate(180deg); }
.avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 11.5px; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); box-shadow: 0 2px 8px -2px color-mix(in oklch, var(--accent) 70%, transparent); transition: transform .18s cubic-bezier(.3,.7,.3,1); }
.acct:hover .avatar { transform: scale(1.06); }
.avatar::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid color-mix(in oklch, var(--accent) 45%, transparent); opacity: 0; transition: opacity .2s; }
.acct:hover .avatar::before { opacity: 1; }
.avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); animation: acctOnline 2.4s ease-in-out infinite; }
@keyframes acctOnline { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--green) 45%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
.avatar.has-ind::after { display: none; }
.avatar .renew-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); cursor: help; z-index: 5; }
.avatar .renew-dot.renew-ok { background: var(--green); animation: acctOnline 2.4s ease-in-out infinite; }
.avatar .renew-dot.renew-warn { background: #f5a623; animation: acctRenewW 1.6s ease-in-out infinite; }
.avatar .renew-dot.renew-crit { background: var(--red); animation: acctRenewC 1s ease-in-out infinite; }
.avatar .renew-dot.renew-none { background: var(--sky, #3aa0e0); animation: acctOnline 2.4s ease-in-out infinite; }
.avatar .renew-dot.renew-unknown { background: var(--text-3, #889); animation: none; }
.renew-tip { position: absolute; top: calc(100% + 11px); right: -8px; width: 248px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px -10px rgba(0,0,0,.28); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .18s ease, transform .18s cubic-bezier(.3,.8,.3,1), visibility .18s; z-index: 200; pointer-events: none; text-align: left; white-space: normal; }
.renew-dot:hover .renew-tip { opacity: 1; visibility: visible; transform: none; }
.renew-tip::before { content: ''; position: absolute; top: -6px; right: 12px; width: 11px; height: 11px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.renew-tip b { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px; line-height: 1.25; }
.renew-tip b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.renew-ok ~ .renew-tip { } /* placeholder */
.renew-dot.renew-ok .renew-tip b::before { background: var(--green); }
.renew-dot.renew-warn .renew-tip b::before { background: #f5a623; }
.renew-dot.renew-crit .renew-tip b::before { background: var(--red); }
.renew-dot.renew-none .renew-tip b::before { background: var(--sky, #3aa0e0); }
.renew-tip span { font-size: 11.5px; color: var(--text-2); line-height: 1.45; font-weight: 500; }
.renew-tip .renew-cap { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.renew-tip .renew-mean { color: var(--text-3); font-size: 11px; padding-bottom: 5px; margin-bottom: 1px; border-bottom: 1px dashed var(--border); font-weight: 600; }
@keyframes acctRenewW { 0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,.5); } 50% { box-shadow: 0 0 0 4px transparent; } }
@keyframes acctRenewC { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--red) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.acct .em { font-size: 12.5px; font-weight: 600; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content { overflow-y: auto; flex: 1; min-height: 0; position: relative; background: transparent; }
#app-bg-net { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .85; transform: translateZ(0); will-change: transform; }
.content > .page { position: relative; }
.page { max-width: 1240px; margin: 0 auto; padding: 28px 30px 70px; }
.page-wide { max-width: 1480px; }

.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
/* overflow-wrap вместо nowrap — короткие заголовки не переносятся (незачем), а длинные
   динамические (напр. "Редактирование услуги — #123 Тариф (domain, ip)") не вылезают за
   экран на любой ширине, а не только на телефоне (было пофикшено только для ≤480px). */
.page-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.page-sub { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.page-head .spacer { flex: 1; }

.section-head { display: flex; align-items: center; gap: 11px; margin: 28px 0 13px; }
.section-head h2 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.section-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; }
.section-head .link svg { transition: transform .2s cubic-bezier(.3,.7,.3,1); }
.section-head .link:hover { gap: 6px; background: var(--accent-soft); transform: translateX(1px); }
.section-head .link:hover svg { transform: translateX(3px); }
.section-head .link:active { transform: scale(.95); }

/* ---------- primitives ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--r-md); font-weight: 700; font-size: 13.5px; transition: background .14s, transform .04s, box-shadow .14s, border-color .14s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
/* ===== Премиум-анимации кнопок ===== */
.btn { position: relative; overflow: hidden; transition: background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.3,.7,.3,1), box-shadow .2s ease, filter .16s ease; }
.btn svg { transition: transform .18s ease; }
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 8px 20px -6px rgba(99,194,72,.55); }
.btn-ghost:hover { box-shadow: 0 6px 16px -8px rgba(0,0,0,.18); }
.btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px -2px rgba(99,194,72,.4); }
/* стрелка/иконка едет, корзина чуть качается */
.btn:hover svg { transform: translateX(2px); }
/* блик-полоса по primary при наведении */
.btn-primary::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.btn-primary:hover::after { animation: btn-shine .7s ease; }
@keyframes btn-shine { 0% { left: -75%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active, .btn svg, .btn-primary::after { transform: none !important; animation: none !important; } }
.btn-primary { background: #63C248; color: #fff; box-shadow: 0 1px 2px rgba(99,194,72,.35); }
.btn-primary:hover { background: #55ad3c; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--border-strong); }
.btn-soft { background: var(--accent-soft); color: var(--accent-deep); }
.btn-soft:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--accent-soft) 75%, var(--accent)); box-shadow: 0 6px 16px -7px rgba(99,194,72,.5); }
.btn-soft:active { transform: translateY(0) scale(.97); }
.btn-soft:hover { background: var(--accent-soft-bd); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 14.5px; }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-danger:hover { filter: brightness(0.97); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge .pulse { width: 7px; height: 7px; border-radius: 50%; }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-green .pulse { background: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-amber .pulse { background: var(--amber); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-red .pulse { background: var(--red); }
.badge-gray { background: var(--bg-2); color: var(--text-2); }
.badge-gray .pulse { background: var(--text-3); }
.badge-sky { background: var(--sky-soft); color: var(--sky); }
.badge-sky .pulse { background: var(--sky); }
.badge-violet { background: var(--violet-soft); color: var(--violet); }
.badge-accent { background: var(--accent-soft); color: var(--accent-deep); }
/* пульс на переходных статусах (Перезапускается/Запускается/Обрабатывается/…): halo цвета самого
   бейджа (currentColor наследуется от .badge-*), а не хардкод-зелёный. Работает для sky/amber/red/green. */
.badge-green .pulse, .badge-amber .pulse, .badge-red .pulse, .badge-sky .pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 50%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.divider { height: 1px; background: var(--border); border: none; }
.meter { height: 7px; background: var(--bg-2); border-radius: 20px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 20px; background: var(--accent); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.meter.green > span { background: var(--green); }
.meter.amber > span { background: var(--amber); }
.meter.red > span { background: var(--red); }

/* ---------- list toolbar (BILLmanager grid) ---------- */
.toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px; color: var(--text-2); transition: background .15s ease, color .15s ease, transform .35s cubic-bezier(.2,1,.4,1), box-shadow .15s ease, opacity .35s ease; }
.tool-btn:hover { background: var(--bg-2); color: var(--text); transform: translateY(-1px); }
.tool-btn:active { transform: translateY(0) scale(.95); }
.tool-btn.primary { color: var(--accent-deep); }
.tool-btn.primary:hover { background: var(--accent-soft); box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--accent) 60%, transparent); }
.tool-btn svg { color: var(--text-3); transition: color .15s ease, transform .25s cubic-bezier(.34,1.5,.6,1); }
.tool-btn:hover svg { color: var(--text); transform: scale(1.12); }
.tool-btn.primary svg { color: var(--accent); }
.tool-btn.primary:hover svg { color: var(--accent); transform: scale(1.16) translateY(-1px); }
/* компактная кнопка-иконка «Обновить» в тулбаре — только список/данные, без полной перезагрузки страницы */
.tool-btn-icon { width: 36px; padding: 0; justify-content: center; }
.tool-btn-icon:disabled { cursor: default; opacity: .6; transform: none; }
.tool-btn-icon.spinning svg { animation: tbSpin .7s linear infinite; }
@keyframes tbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tool-btn-icon.spinning svg { animation: none; } }
/* акцентная кнопка-CTA в тулбаре (Перейти в VMmanager) */
.tool-btn.accent { background: var(--accent); color: #fff; font-weight: 700; padding: 0 16px; }
.tool-btn.accent svg { color: #fff; }
.tool-btn.accent:hover { background: var(--accent); color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px -7px var(--accent); }
.tool-btn.accent:hover svg { color: #fff; transform: translateX(3px); }
.tool-btn.accent:active { transform: translateY(0) scale(.96); }
.tool-btn.accent:disabled { background: var(--bg-2); color: var(--text-3); box-shadow: none; }
.tool-btn.accent:disabled svg { color: var(--text-3); }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.tool-btn:disabled:hover { background: none; transform: none; box-shadow: none; }
.tool-btn:disabled:hover svg { transform: none; color: var(--text-3); }
/* анимация «активации» кнопок тулбара при выборе строки */
.toolbar.is-armed .tool-btn:not(:disabled):not(.primary):not(.accent) { animation: toolArm .42s cubic-bezier(.2,1,.4,1.05) backwards; animation-delay: calc(var(--ti, 0) * 45ms); }
@keyframes toolArm { 0% { opacity: .4; transform: translateY(5px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toolbar.is-armed .tool-btn { animation: none; } }
.tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.tool-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tool-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-3); width: 230px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.tool-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tool-search input { border: none; outline: none; background: none; flex: 1; font-weight: 500; min-width: 0; }
.tool-total { font-size: 12.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }

/* фильтр-поповер в тулбаре */
.tool-btn.on { background: var(--accent-soft); color: var(--accent-deep); }
.tool-btn.on svg { color: var(--accent); }
.tool-filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 1px; }
.tool-filter-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 12px; animation: tfPop .2s cubic-bezier(.34,1.4,.6,1); transform-origin: top right; }
@keyframes tfPop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tool-filter-body { display: flex; flex-direction: column; gap: 3px; }
.tff-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 5px; }
.tff-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .18s ease, color .18s ease; }
.tff-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tff-opt:hover { background: var(--bg-2); color: var(--text); }
.tff-opt.on { background: var(--accent-soft); color: var(--accent-deep); }
/* 18px + бордер 2px даёт чётную внутреннюю область (14px) — точка 8px внутри центрируется
   ровно на целых пикселях (по 3px с каждой стороны). При нечётной внутренней области (было
   17px → 13px) отступ дробный (2.5px) и на нецелых масштабах/DPI округляется в одну сторону
   заметнее, чем в другую — точка визуально уезжает от центра. */
.tff-radio { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); flex-shrink: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.tff-opt:hover .tff-radio { border-color: var(--accent-soft-bd); }
.tff-radio::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.tff-opt.on .tff-radio { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tff-opt.on .tff-radio::after { transform: scale(1); }
.tff-opt-t { transition: transform .18s ease; }
.tff-opt.on .tff-opt-t { transform: translateX(1px); }
.tff-reset { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); cursor: pointer; border: none; transition: background .16s ease, transform .12s ease; animation: tfPop .2s ease; }
.tff-reset:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); }
.tff-reset:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .tool-filter-pop, .tff-reset, .tff-radio::after { animation: none; transition: none; } }

/* ---------- table ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { font-family: var(--font-mono); font-weight: 600; }
.tbl .check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-block; transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.tbl .check:hover { border-color: var(--accent); }
.tbl .check:active { transform: scale(.86); }
.tbl-foot { padding: 13px 16px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 26px; font-size: 13px; font-weight: 700; }
.tbl-foot .k { color: var(--text-3); font-weight: 600; margin-right: 8px; }

/* row-action dots */
.row-act { color: var(--text-3); padding: 4px 6px; border-radius: 6px; }
.row-act:hover { background: var(--bg-2); color: var(--text); }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 56px 24px; }
.empty .illo { width: 132px; height: 96px; margin: 0 auto 20px; }
.empty h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.empty p { color: var(--text-3); font-size: 13.5px; margin: 6px 0 18px; }

/* ====================== RESPONSIVE / АДАПТИВ ====================== */
/* гамбургер и бэкдроп дровера — по умолчанию скрыты (десктоп) */
.nav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid transparent; background: none; cursor: pointer; flex-shrink: 0; margin-right: 2px; }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-2); transition: transform .25s, opacity .2s; }
.nav-burger:hover { background: var(--surface); border-color: var(--border); }
.nav-backdrop { display: none; }

/* 2K и крупнее: даём контенту больше ширины, чтобы не «терялся» в центре */
@media (min-width: 1700px) {
  .page { max-width: 1360px; }
  .page-wide { max-width: 1680px; }
}
@media (min-width: 2200px) {
  .page { max-width: 1520px; }
  .page-wide { max-width: 1880px; }
}

/* ноутбуки / компактный десктоп ~1280 */
@media (max-width: 1320px) {
  :root { --sidebar-w: 232px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .page { padding: 26px 24px 64px; }
}
@media (max-width: 1100px) {
  .search { width: 150px; }
}
/* тесная полоса (компактные ноутбуки/планшеты в альбомной): даже с иконкой-Telegram
   крошки поджаты — оставляем только текущую страницу с многоточием (дом › Страница),
   а не обрезок «Ф». Полный путь всё равно дублируется заголовком страницы ниже. */
@media (max-width: 1200px) {
  .crumbs .cdisp:not(:last-child) { display: none; }
  .crumbs .cur { max-width: 260px; }
}

/* планшеты (iPad) и телефоны: сайдбар → выезжающий дровер */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; height: 100svh; height: 100dvh; }
  .nav-burger { display: inline-flex; }
  .tg-card { display: none; }            /* в дровер-режиме Telegram уже в меню (≡) — плашку из топбара убираем */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 84vw; z-index: 60;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.3,.85,.3,1);
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }
  .app.nav-open .sidebar { transform: none; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8,16,12,.45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
  .app.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  .app.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .app.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .app.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .page { padding: 22px 18px 60px; }
  .page-title { font-size: 22px; }
}

/* узкие планшеты / крупные телефоны */
@media (max-width: 760px) {
  .topbar { padding: 0 12px; gap: 8px; height: 56px; }
  .search { display: none; }             /* поиск прячем (есть в разделах) */
  .crumbs { font-size: 12px; min-width: 0; }
  .crumbs .cdisp:not(:last-child) { display: none; } /* оставляем только текущую крошку */
  .crumbs .cur { max-width: 120px; }
  .top-actions { gap: 7px; }
  .balance-pill { padding: 0 5px 0 11px; gap: 7px; }
  .balance-pill .bl { display: none; }   /* подпись «Баланс» прячем, оставляем сумму */
  .balance-pill .bv { font-size: 12.5px; }
  /* аккаунт — только аватар (email и стрелка прячем), как иконка-кнопка */
  .acct .em, .acct > svg { display: none; }
  .acct { padding: 0; width: 38px; justify-content: center; }
  .page { padding: 18px 14px 56px; }
  .page-head { margin-bottom: 16px; }
  .page-title { font-size: 20px; }
}

/* телефоны (iPhone) */
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 0 9px; }
  .top-actions { gap: 5px; }
  .crumbs { display: none; }             /* на телефоне навигация через гамбургер + заголовок страницы */
  .top-actions > .lang-switch { display: none; }  /* прячем ТОЛЬКО прямой топбарный переключатель; RU/EN в меню аккаунта (QuickSettings, вложен глубже) остаётся */
  .topbar .theme-toggle { display: none; }       /* тема — только из топбара; в дровере/меню остаётся */
  .balance-pill .topup .tu-tx { display: none; } /* кнопка пополнения — только «+» */
  .balance-pill .topup { padding: 0 8px; height: 26px; }
  .balance-pill { height: 36px; }
  .icon-btn { width: 36px; height: 36px; }
  .page { padding: 16px 12px 52px; }
  .page-title { font-size: 18px; }
  .card-pad { padding: 16px; }
}

/* очень узкие (≤360, маленькие телефоны) — баланс ещё компактнее */
@media (max-width: 380px) {
  .balance-pill .bv { font-size: 12px; }
  .balance-pill { padding: 0 4px 0 9px; }
  .nav-burger { margin-right: 0; }
}

/* ---------- tweakable: density + corners ---------- */
[data-density="compact"] .tbl td { padding: 9px 16px; }
[data-density="compact"] .card-pad { padding: 15px; }
[data-density="compact"] .page { padding-top: 20px; }
[data-density="comfy"] .tbl td { padding: 17px 18px; }
[data-density="comfy"] .card-pad { padding: 26px; }
[data-corners="sharp"] { --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; }
[data-corners="soft"]  { --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; }

/* ---------- entrance (opacity-safe) ---------- */
.fade-in { animation: fadeIn .34s cubic-bezier(.2,.7,.3,1); }
@keyframes fadeIn { from { transform: translateY(7px); } to { transform: none; } }

/* ===== быстрые настройки (язык/тема/Telegram) для мобильных: дровер + меню аккаунта ===== */
.qsettings { display: flex; flex-direction: column; gap: 9px; }
.qs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qs-lab { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.qs-theme { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 12.5px; color: var(--text-2); transition: border-color .15s, color .15s; }
.qs-theme:hover { border-color: var(--accent-soft-bd); color: var(--text); }
.qs-theme-ic { font-size: 14px; line-height: 1; }
.qs-tg { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 12.5px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.qs-tg-ic { display: inline-flex; color: #2aabee; }
.qs-tg:hover { border-color: #ade0fb; box-shadow: 0 4px 12px rgba(42,171,238,.18); }
/* видимость: по умолчанию (десктоп) скрыто; показываем там, где функции ушли из топбара */
.drawer-only { display: none; }
.acct-extras.mobile-only { display: none; }
@media (max-width: 980px) {
  .drawer-only { display: block; }       /* дровер активен — даём язык/тему/telegram внизу меню */
}
@media (max-width: 560px) {
  .acct-extras.mobile-only { display: block; padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
}
/* поиск в тулбарах разделов — на телефоне на всю ширину (своя строка), функция сохранена */
@media (max-width: 640px) {
  .tool-search { width: 100%; min-width: 0; order: 99; }
}

/* ===== ПРЕДОХРАНИТЕЛЬ: страница никогда не «уезжает» вбок (горизонт. переполнение) ===== */
html, body { overflow-x: hidden; max-width: 100%; }
.content { overflow-x: hidden; }                 /* область контента не скроллится по горизонтали */
.page, .page-wide { max-width: 100%; }
/* широкие таблицы внутри карточек/аккордеонов/обёрток скроллятся ВНУТРИ себя, а не тянут страницу */
.acc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acc-body table.tbl { min-width: 480px; }
/* ВАЖНО: не трогаем display таблицы (был баг — display:block ломал .tbl{width:100%},
   таблица схлопывалась к ширине контента, оставляя пустой хвост внутри .card на ЛЮБой
   ширине экрана, не только на узких). Скроллится сама .card, таблица остаётся table. */
.card:has(> table.tbl), .card-pad:has(> table.tbl) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }