@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* grey scale: page → card → block-in-card → hover/chip */
  --bg:               #e8eaee;
  --card-bg:          #f6f7f9;
  --bg-section:       #eef0f3;
  --bg-elevated:      #e3e6eb;
  --bg-2:             #d9dde3;
  --text:             #171a1f;
  --text-muted:       #565d6a;
  --text-soft:        #808894;
  --text-disabled:    #a9b0bb;
  --langbtcol:        #d9dde3;
  --border:           #d5d9e0;
  --border-strong:    #bcc3cc;

  /* action & selection */
  --accent:           #1f6fd1;
  --accent-hover:     #185fb8;
  --accent-soft:      rgba(31, 111, 209, 0.10);
  --accent-strong:    rgba(31, 111, 209, 0.18);
  --on-accent:        #ffffff;

  /* labels: NEW, recommended, core, type — tint only, never a fill */
  --accent-2:         #96590a;
  --accent-2-soft:    rgba(240, 168, 54, 0.20);

  /* status */
  --success:          #1a8f4e;
  --success-soft:     rgba(26, 143, 78, 0.12);
  --warning:          #b3620a;
  --warning-soft:     rgba(179, 98, 10, 0.12);
  --danger:           #d0353b;
  --danger-soft:      rgba(208, 53, 59, 0.12);
  --info:             #1f6fd1;

  /* paid tiers — brand colours the listing legend, VIP pills and card
     accent edges all share. Tuned to sit on the grey scale above. */
  --tier-premium:     #d0353b;
  --tier-supervip:    #b3620a;
  --tier-vip:         #1f6fd1;
  --tier-boost:       #7c3aed;
  --tier-premium-soft:  rgba(208, 53, 59, 0.12);
  --tier-supervip-soft: rgba(240, 168, 54, 0.20);
  --tier-vip-soft:      rgba(31, 111, 209, 0.10);
  --tier-boost-soft:    rgba(124, 58, 237, 0.12);

  /* shadows — slightly denser than on white, otherwise cards float away
     on the grey page */
  --shadow-sm:        0 1px 2px rgba(15, 20, 30, 0.06);
  --shadow:           0 1px 2px rgba(15,20,30,.06), 0 6px 18px rgba(15,20,30,.08);
  --shadow-lg:        0 4px 10px rgba(15,20,30,.10), 0 20px 40px rgba(15,20,30,.12);

  /* glass header while scrolled */
  --glass:            rgba(246, 247, 249, 0.78);
  --glass-2:          rgba(238, 240, 243, 0.78);

  /* "ink" — a surface that stays dark in BOTH themes: the tariff cards on
     /price, code blocks, hosting logo plates */
  --ink:              #1a1d22;
  --on-ink:           #eef0f3;
  --on-ink-muted:     #a7adb7;

  /* server load (players bar) — the one place the palette needs a 4-step
     ramp: empty → light → half → busy → full */
  --load-0:           #9aa3b0;
  --load-1:           #1a8f4e;
  --load-2:           #c98a12;
  --load-3:           #e0641a;
  --load-4:           #d0353b;

  --radius-sm:        4px;
  --radius:           8px;
  --radius-lg:        14px;
  --radius-pill:      999px;
  --transition:       150ms ease;

  /* control heights — buttons, inputs, selects, chips all pick from these
     four and nothing else. "md" is the default for anything a user clicks
     or types into; xs is for inline icon buttons that sit inside text. */
  --control-xs:       28px;
  --control-sm:       32px;
  --control:          40px;
  --control-lg:       48px;

  /* spacing — 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* type */
  --font-sans:        'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono:        'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --fs-100: 11px; --fs-200: 12px; --fs-300: 13px; --fs-400: 14px;
  --fs-500: 16px; --fs-600: 18px; --fs-700: 22px; --fs-800: 28px; --fs-900: 36px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* layout */
  --container:        1200px;
  --container-narrow: 720px;
  --card-pad:         26px;
  --sidebar-w:        260px;

  /* header geometry — the sticky stack is three rows on desktop and one on
     mobile; every offset in the file derives from these, nothing hardcoded */
  --preheader-h:      38px;   /* 36 + 2px breathing room under the top progress bar */
  --header-h:         60px;   /* row 1: brand + tools (this is THE header height) */
  --header-nav-h:     56px;   /* row 2: nav + CTA (desktop only) */
  --header-stack:     calc(var(--preheader-h) + var(--header-h) + var(--header-nav-h));
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:               #121417;
  --card-bg:          #1a1d22;
  --bg-section:       #22262c;
  --bg-elevated:      #22262c;
  --bg-2:             #2a2f36;
  --text:             #eef0f3;
  --text-muted:       #a7adb7;
  --text-soft:        #6c7380;
  --text-disabled:    #4f5661;
  --langbtcol:        #22262c;
  --border:           #2c3139;
  --border-strong:    #3a4049;

  --accent:           #3b8ded;
  --accent-hover:     #5a9ff0;
  --accent-soft:      rgba(59, 141, 237, 0.12);
  --accent-strong:    rgba(59, 141, 237, 0.22);
  --on-accent:        #ffffff;

  --accent-2:         #f0a836;
  --accent-2-soft:    rgba(240, 168, 54, 0.14);

  --success:          #3ecf8e;
  --success-soft:     rgba(62, 207, 142, 0.14);
  --warning:          #f0a836;
  --warning-soft:     rgba(240, 168, 54, 0.14);
  --danger:           #e5484d;
  --danger-soft:      rgba(229, 72, 77, 0.14);
  --info:             #3b8ded;

  --tier-premium:     #e5484d;
  --tier-supervip:    #f0a836;
  --tier-vip:         #3b8ded;
  --tier-boost:       #a78bfa;
  --tier-premium-soft:  rgba(229, 72, 77, 0.14);
  --tier-supervip-soft: rgba(240, 168, 54, 0.14);
  --tier-vip-soft:      rgba(59, 141, 237, 0.12);
  --tier-boost-soft:    rgba(167, 139, 250, 0.14);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:           0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  --shadow-lg:        0 4px 10px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.40);

  --glass:            rgba(26, 29, 34, 0.74);
  --glass-2:          rgba(34, 38, 44, 0.74);

  /* ink sits a step above the dark card so it still reads as a block */
  --ink:              #0f1114;
  --on-ink:           #eef0f3;
  --on-ink-muted:     #a7adb7;

  --load-0:           #5b6470;
  --load-1:           #3ecf8e;
  --load-2:           #f0c04a;
  --load-3:           #ff8c3a;
  --load-4:           #e5484d;
}


/* ==========================================================================
   4. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--text);
  /* faint dot grid on the page ground — texture, not decoration. Painted as
     a background layer (not a fixed ::before) so it can never sit on top of
     content that lacks its own stacking context. */
  background:
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 28px 28px fixed,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';   /* Inter: single-storey a, open digits */
  /* room for the fixed header stack */
  padding-top: var(--header-stack);
}
:root { --dot: rgba(15, 20, 30, 0.10); }
:root[data-theme="dark"] { --dot: rgba(255, 255, 255, 0.05); }
/* drawer open on mobile — freeze the page behind it */
body.has-drawer, body.no-scroll,
:root:has(> body.has-drawer), :root:has(> body.no-scroll) { overflow: hidden; }
.header, .main, .footer { position: relative; z-index: 1; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
h5, h6 { font-size: var(--fs-400); }
@media (max-width: 767px) {
  h1 { font-size: var(--fs-700); }
  h2 { font-size: var(--fs-600); }
}

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

small { font-size: var(--fs-200); }
strong, b { font-weight: var(--fw-semibold); }
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}
::selection { background: var(--accent-strong); }

/* ---- Container ----
   One max-width, fluid below it. Side padding grows with the viewport so
   content never touches the edge on phones and doesn't crowd on desktop. */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.container { max-width: calc(var(--container) + var(--s-4) * 2); }
@media (min-width: 768px) {
  .container,
  .container-fluid { padding-inline: var(--s-6); }
  .container { max-width: calc(var(--container) + var(--s-6) * 2); }
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--s-6) * 2); }

.main { flex: 1 0 auto; min-height: 50vh; }


/* ==========================================================================
   5. BUTTONS
   One scale for the whole site — the same four heights inputs use:
     .btn--xs 28   inline icon buttons (copy, vote, connect-in-table)
     .btn--sm 32   dense rows: filter chips, pagination, table actions
     .btn     40   DEFAULT — every ordinary action, incl. card CTAs
     .btn--lg 48   form submits, hero CTAs
   Radius --radius everywhere. A button that is not one of these heights is
   a bug.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform 80ms ease;
}
.btn i.fa { font-size: 13px; line-height: 1; }
.btn:hover { background: var(--bg-section); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled {
  color: var(--text-disabled);
  background: var(--bg-section);
  border-color: var(--border);
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.btn--subtle { background: transparent; border-color: transparent; }
.btn--subtle:hover { background: var(--bg-section); border-color: transparent; }

.btn--soft { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn--soft:hover { background: var(--accent-strong); border-color: transparent; color: var(--accent); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.08); color: #fff; }

.btn--success { background: var(--success); border-color: var(--success); color: #fff; }
.btn--success:hover { filter: brightness(1.08); color: #fff; }

.btn--lg { height: var(--control-lg); padding: 0 var(--s-6); font-size: var(--fs-400); gap: var(--s-2); }
.btn--sm { height: var(--control-sm); padding: 0 var(--s-3); font-size: var(--fs-200); gap: var(--s-1); }
.btn--sm i.fa { font-size: 12px; }
.btn--xs { height: var(--control-xs); padding: 0 var(--s-2); font-size: var(--fs-200); gap: var(--s-1); border-color: transparent; background: transparent; }
.btn--xs i.fa { font-size: 12px; }
.btn--xs:hover { background: var(--bg-section); border-color: transparent; }
.btn--block { width: 100%; }

.btn--icon { width: var(--control); padding: 0; }
.btn--icon.btn--lg { width: var(--control-lg); }
.btn--icon.btn--sm { width: var(--control-sm); }
.btn--icon.btn--xs { width: var(--control-xs); }

/* header tool buttons (language, theme, compact login, burger) share a look:
   square, chip-tinted, no border */
.header .btn--icon.btn--subtle {
  background: var(--langbtcol);
  color: var(--text-muted);
}
.header .btn--icon.btn--subtle:hover { background: var(--bg-2); color: var(--text); }


/* ==========================================================================
   6. DROPDOWN MENU  (.menu-wrap > [data-menu-toggle] + .menu)
   ========================================================================== */
.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  min-width: 200px;
  padding: var(--s-1);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
  animation: menuIn 120ms ease-out;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu--align-right { right: 0; left: auto; }
.menu--align-left  { left: 0;  right: auto; }
.menu.is-open { display: block; }

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.menu__item i.fa { width: 16px; text-align: center; color: var(--text-soft); font-size: 13px; }
.menu__item:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.menu__item:hover i.fa { color: var(--text-muted); }
.menu__item.is-active { background: var(--accent-soft); color: var(--accent); }
.menu__item.is-active i.fa { color: var(--accent); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger i.fa { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu__divider { height: 1px; margin: var(--s-1) 0; background: var(--border); }

/* phones: a 200px+ menu anchored to a 36px header button would hang off
   the viewport — cap it to the screen instead */
@media (max-width: 480px) {
  .menu { min-width: 0; width: calc(100vw - var(--s-6)); max-width: 320px; right: calc(-1 * var(--s-1)); }
}

/* account dropdown: identity header, balance row, 2x2 quick tiles, items */
.menu--account { min-width: 300px; padding: 0 0 var(--s-1); overflow: hidden; }
.menu__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-strong) 0%, transparent 60%),
    linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--border);
}
.menu__header-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.menu__header-name {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--text);
  min-width: 0;
}
.menu__header-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__header-role {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.menu__header-email {
  font-size: var(--fs-100);
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu__balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.menu__balance-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu__balance-label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.menu__balance-value {
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.menu__balance-cur {
  margin-left: var(--s-1);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); padding: var(--s-2) var(--s-2) var(--s-1); }
.menu__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  background: var(--bg-section);
  color: var(--text-muted);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.menu__tile i.fa {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--accent);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition);
}
.menu__tile:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.menu__tile:hover i.fa { background: var(--accent); color: var(--on-accent); }
.menu__tile.is-active { background: var(--accent-soft); color: var(--accent); }
.menu__tile.is-active i.fa { background: var(--accent); color: var(--on-accent); }
.menu--account .menu__item { margin: 0 var(--s-1); }
.menu--account .menu__divider { margin: var(--s-1) var(--s-2); }


/* ==========================================================================
   7. PRE-HEADER — share buttons + top-maps ticker
   Desktop only. On tablets/phones the whole strip is hidden and both blocks
   reappear inside the drawer, where they don't cost header height.
   ========================================================================== */
.pre-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--preheader-h);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-200);
  transition: background 200ms ease;
}
.pre-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: 100%;
}
body.is-scrolled .pre-header {
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
}

/* share */
.share { display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.share__label {
  margin-right: var(--s-1);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform 80ms;
}
.share__btn:hover { text-decoration: none; transform: translateY(-1px); background: var(--bg-2); color: var(--text); }
/* brand colours on hover — the one place literal colours are allowed
   because they ARE the brand, not our palette */
.share__btn--tg:hover { color: #229ED9; }
.share__btn--vk:hover { color: #2787F5; }
.share__btn--ok:hover { color: #EE8737; }
.share__btn--vb:hover { color: #7C5AB8; }
.share__btn--wa:hover { color: #25D366; }
.share__btn--tw:hover { color: var(--text); }

/* ticker */
.map-ticker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.map-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 100%;
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.map-ticker__label i { color: var(--danger); font-size: 13px; }
.map-ticker__viewport {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
}
.map-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
  padding-left: var(--s-5);
  white-space: nowrap;
  animation: tickerScroll 90s linear infinite;
  will-change: transform;
}
.map-ticker__track--static { animation: none; }
.map-ticker:hover .map-ticker__track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.map-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}
.map-ticker__item:hover { color: var(--accent); text-decoration: none; }
.map-ticker__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.map-ticker__item:hover .map-ticker__count { background: var(--accent-soft); color: var(--accent); }


/* ==========================================================================
   8. HEADER
   Desktop (≥1024): row 1 brand + game + tools, row 2 nav + download CTA.
   Mobile  (<1024): row 1 only — brand, game icon, theme, account, burger.
                    Nav, CTA, auth, language and share live in a drawer that
                    slides in from the right.
   ========================================================================== */
.header {
  position: fixed;
  top: var(--preheader-h);
  left: 0; right: 0;
  z-index: 100;
  /* NO backdrop-filter here: it would become the containing block of the
     fixed drawer below and pin it to the header instead of the viewport */
}

/* ---- row 1 ---- */
.header__top {
  height: var(--header-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  transition: background 200ms ease;
}
.header__top-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 100%;
}
@media (min-width: 1024px) {
  .header__top { position: relative; z-index: 2; }
}
body.is-scrolled .header__top {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  text-decoration: none;
  transition: opacity var(--transition);
}
.header__brand:hover { opacity: 0.85; text-decoration: none; }
.header__brand-img { display: block; height: 40px; width: auto; }
:root[data-theme="light"] .header__brand-img--dark  { display: none; }
:root[data-theme="dark"]  .header__brand-img--light { display: none; }

.header__divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  margin: var(--s-3) var(--s-1);
  background: var(--border);
}

/* game switcher */
.game-switcher { position: relative; flex-shrink: 0; }
.game-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-2) 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-section);
  color: var(--text);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.game-switcher__btn:hover { background: var(--card-bg); border-color: var(--border-strong); }
.game-switcher__btn:active,
.menu-wrap.is-open .game-switcher__btn {
  background: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.game-switcher__icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.game-switcher__icon--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
}
.game-switcher__label {
  max-width: 200px;
  padding-left: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-switcher__caret { font-size: 11px; color: var(--text-soft); transition: transform var(--transition); }
.menu-wrap.is-open .game-switcher__caret { transform: rotate(180deg); color: var(--accent); }
.game-switcher__menu {
  min-width: 240px;
  width: max-content;
  max-width: min(360px, calc(100vw - var(--s-6)));
  padding: var(--s-2);
}
.game-switcher__item { gap: var(--s-3); padding: var(--s-2) var(--s-3); font-weight: var(--fw-semibold); }
.game-switcher__item > span:not([class]) { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-switcher__item.is-active .game-switcher__icon { outline: 2px solid var(--accent); outline-offset: 1px; }
.game-switcher__check { margin-left: auto; color: var(--accent); font-size: 12px; }

/* right side of row 1 — nothing in here may shrink, or a long username
   squeezes the icon buttons to nothing on phones */
.header__utility {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.header__utility > * { flex-shrink: 0; }

/* guest auth */
.header__auth { display: flex; align-items: center; gap: var(--s-2); }
.header__auth .header__auth-compact { display: none; }
.header__auth-login,
.header__auth-register { height: var(--control); }

/* signed-in account button: avatar + name / balance + caret, chip-shaped */
.header__account-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-2) 0 var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.header__account-btn:hover,
.menu-wrap.is-open .header__account-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.header__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg,
    hsl(var(--avatar-hue, 210), 60%, 55%) 0%,
    hsl(var(--avatar-hue, 210), 70%, 38%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--shadow-sm);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.header__avatar--with-status::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--card-bg);
}
.header__avatar--lg { width: 44px; height: 44px; font-size: 18px; }
.header__avatar--lg.header__avatar--with-status::after { width: 12px; height: 12px; right: 0; bottom: 0; }
.header__account-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.header__account-name {
  max-width: 140px;
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header__account-balance {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header__account-balance i.fa { font-size: 10px; }
.header__account-caret { font-size: 13px; color: var(--text-soft); transition: transform var(--transition), color var(--transition); }
.menu-wrap.is-open .header__account-caret { transform: rotate(180deg); color: var(--accent); }

/* burger — row 1, mobile only */
.header__burger { display: none; }

/* ---- row 2 (desktop) ---- */
.header__main {
  height: var(--header-nav-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  transition: background 200ms ease;
}
.header__main-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 100%;
}
body.is-scrolled .header__main {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
}
/* phones/tablets: row 2 is a 0-height shell that hosts the fixed drawer.
   A backdrop-filter here would make it the drawer's containing block and
   collapse the open drawer to nothing once the page is scrolled. */
@media (max-width: 1023px) {
  body.is-scrolled .header__main { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.header__main-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* the drawer wraps nav + mobile-only extras; on desktop it is invisible
   as a box and only the nav shows */
.header__drawer { display: contents; }
.header__drawer-head,
.header__drawer-extra { display: none; }

.header__nav {
  display: flex;
  align-items: center;
  gap:  2px;
  flex: 1 1 auto;
  min-width: 0;
}
.header__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0  var(--s-3);
  border-radius: var(--radius);
  font-size: var(--fs-400);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header__nav a i.fa { font-size: 14px; width: 16px; text-align: center; color: var(--text-soft); transition: color var(--transition); }
.header__nav a:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.header__nav a:hover i.fa { color: var(--text-muted); }
.header__nav a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.header__nav a.is-active i.fa { color: var(--accent); }

/* download CTA — the one green control in the header */
.header__cta {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), transform 80ms;
}
.header__cta:hover { border-color: var(--success); color: var(--success); text-decoration: none; }
.header__cta:active { transform: translateY(1px); }
.header__cta i { font-size: 13px; }

/* backdrop behind the open drawer */
.header__backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(10, 12, 16, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* ---- tighter desktop (1024–1279): nav loses icons, keeps labels ---- */
@media (max-width: 1279px) {
  .header__nav a { padding: 0 var(--s-2); gap: var(--s-1); }
  .header__nav a i.fa { display: none; }
  .header__cta { padding: 0 var(--s-3); }
  .game-switcher__label { max-width: 140px; }
}

/* ---- tablet & phone (<1024): single row + drawer ---- */
@media (max-width: 1023px) {
  /* `:root[data-theme]` matches the specificity of the light/dark token
     blocks above (0,2,0) — a bare `:root` here would lose to
     `:root[data-theme="light"]` and the desktop heights would stick. */
  :root,
  :root[data-theme] {
    --preheader-h: 0px;
    --header-h: 100px;   /* two rows: brand + account/burger, then game + lang + theme */
    --header-nav-h: 0px;
  }
  .pre-header { display: none; }

  /* Two-level header. One flex container wraps into two rows; the utility
     wrapper is flattened (display: contents) so its children can be ordered
     across rows: row 1 = brand · account/auth · burger, row 2 = game switcher
     · language · theme. The ::before pseudo-element is the forced line break. */
  .header__top-inner { flex-wrap: wrap; align-content: space-between; gap: 0 var(--s-2); padding-top: 8px; padding-bottom: 8px; }
  .header__top-inner::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .header__utility { display: contents; }
  .header__brand { order: 1; height: var(--control); }
  .header__brand-img { height: 28px; }
  .header__account, .header__auth { order: 2; margin-left: auto; }
  .header__burger { order: 3; }
  .game-switcher { order: 5; }
  .header__tool-lang { order: 6; margin-left: auto; }
  .header__tool-theme { order: 7; }
  .header__divider { display: none; }

  /* row 2 collapses; its contents move into the drawer */
  .header__main { height: 0; border: 0; overflow: visible; }
  .header__main-inner { height: 0; padding: 0; }
  .header__main-right { display: none; }

  .header__burger { display: inline-flex; }

  /* drawer panel */
  .header__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 99;
    width: min(320px, 86vw);
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 240ms;
  }
  .header__drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .header__drawer.is-open ~ .header__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
  }

  .header__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    height: var(--header-h);
    padding: 0 var(--s-3) 0 var(--s-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .header__drawer-title {
    font-size: var(--fs-100);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .header__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--s-3);
  }
  .header__nav a {
    height: 44px;
    padding: 0 var(--s-3);
    font-size: var(--fs-400);
    color: var(--text);
  }
  .header__nav a i.fa { display: inline-block; width: 20px; text-align: center; font-size: 15px; }

  .header__drawer-extra {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: auto;
    padding: var(--s-4) var(--s-4) var(--s-5);
    border-top: 1px solid var(--border);
    background: var(--bg-section);
  }
  .header__drawer-extra .header__cta { height: var(--control-lg); justify-content: center; border-radius: var(--radius); }
  .header__drawer-auth { display: flex; gap: var(--s-2); }
  .header__drawer-auth .btn { flex: 1; height: var(--control-lg); }
  .header__drawer-account {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .header__drawer-account-info { flex: 1; min-width: 0; }
  .header__drawer-account-name { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header__drawer-account-balance { font-size: var(--fs-200); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .header__drawer-account-balance strong { color: var(--accent); }
  .header__drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .header__drawer-row .share__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  /* six share buttons + a label don't fit 320px on one line — the label
     goes above, the buttons spread across the full width */
  .header__drawer .share { flex-wrap: wrap; width: 100%; gap: var(--s-2); }
  .header__drawer .share__label { flex-basis: 100%; margin: 0; }
  .header__drawer .share__btn { flex: 1; height: var(--control); background: var(--langbtcol); }
}

/* ---- phone (<768) ---- */
@media (max-width: 767px) {
  /* the game switcher has its own row now — label stays, only trimmed */
  .game-switcher__btn { padding: 0 10px 0 6px; }
  .game-switcher__label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  /* guest: two buttons → one icon; signed in: avatar only */
  .header__auth-login,
  .header__auth-register { display: none; }
  .header__auth .header__auth-compact { display: inline-flex; }
  .header__account-info,
  .header__account-caret { display: none; }
  .header__account-btn { padding: 0; width: var(--control); justify-content: center; border-color: transparent; background: transparent; }
}


/* ==========================================================================
   9. FOOTER
   Row 1: site navigation · counters + "to top". Row 2: copyright · legal
   links (rules, privacy). Pushed to the viewport bottom on short pages by
   body{display:flex} + .main{flex:1}.
   ========================================================================== */
.footer {
  margin-top: var(--s-12);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-soft);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}
.footer__row + .footer__row {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); }
.footer__nav a {
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer__nav a:hover { color: var(--accent); text-decoration: none; }
.footer__nav a.is-active { color: var(--text); font-weight: var(--fw-semibold); }
.footer__right { display: flex; align-items: center; gap: var(--s-3); }
.footer__counters { display: flex; align-items: center; gap: var(--s-2); }
.footer__counter { display: inline-block; line-height: 0; border-radius: 2px; overflow: hidden; opacity: 0.75; transition: opacity var(--transition); }
.footer__counter:hover { opacity: 1; }
.footer__counter img { display: block; width: 88px; height: 15px; }
.footer__totop {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm); height: var(--control-sm);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all var(--transition);
}
.footer__totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.footer__totop:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.footer__copyright {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__copyright::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--accent);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-200); }
.footer__legal a { color: var(--text-soft); text-decoration: none; transition: color var(--transition); }
.footer__legal a:hover { color: var(--accent); text-decoration: none; }
.footer__legal-sep { opacity: 0.5; user-select: none; }
@media (max-width: 767px) {
  .footer { margin-top: var(--s-8); }
  .footer__row, .footer__nav, .footer__legal, .footer__right { justify-content: center; text-align: center; }
  .footer__nav { gap: var(--s-1) var(--s-4); }
  .footer__row > * { flex-basis: 100%; }
  .footer__copyright { justify-content: center; }
}


/* ==========================================================================
   10. UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-muted   { color: var(--text-muted); }
.text-soft    { color: var(--text-soft); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-accent  { color: var(--accent); }
.mono         { font-family: var(--font-mono); }
.tabular      { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   11. FORMS
   Inputs share the button scale: --sm 32 · default 40 · --lg 48.
   ========================================================================== */
.field { margin-bottom: var(--s-4); position: relative; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.4;
}
.field__label-required { color: var(--danger); font-weight: var(--fw-regular); }
.field__label-optional { margin-left: auto; font-size: var(--fs-200); font-weight: var(--fw-regular); color: var(--text-soft); }
.field__hint, .field__error, .field__success {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-200);
  line-height: 1.45;
}
.field__hint    { color: var(--text-soft); }
.field__error   { color: var(--danger); font-weight: var(--fw-medium); }
.field__success { color: var(--success); font-weight: var(--fw-medium); }
.field__hint i, .field__error i, .field__success i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  height: var(--control);
  padding: 0 var(--s-3);
  font-family: inherit;
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="number"] { -moz-appearance: textfield; }
.textarea { height: auto; min-height: 96px; padding: var(--s-2) var(--s-3); resize: vertical; }

.select {
  padding-right: var(--s-10);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808894' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 14px;
}
.input:hover:not(:focus):not(:disabled):not([readonly]),
.select:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled) { border-color: var(--text-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] {
  background: var(--bg-section);
  color: var(--text-soft);
  border-color: var(--border);
  cursor: not-allowed;
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-soft); opacity: 1; }
.input--sm, .select--sm { height: var(--control-sm); font-size: var(--fs-300); padding: 0 var(--s-2); }
.input--lg, .select--lg { height: var(--control-lg); font-size: var(--fs-500); padding: 0 var(--s-4); }

/* icons / affixes inside an input */
.input-wrap { position: relative; display: block; }
.input-wrap__icon {
  position: absolute;
  left: var(--s-3); top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  transition: color var(--transition);
}
.input-wrap--icon .input, .input-wrap--icon .select { padding-left: var(--s-10); }
.input-wrap:focus-within .input-wrap__icon { color: var(--accent); }
.input-wrap--icon-end .input-wrap__icon { left: auto; right: var(--s-3); }
.input-wrap--icon-end .input { padding-right: var(--s-10); padding-left: var(--s-3); }
.input-wrap__suffix {
  position: absolute;
  right: var(--s-1); top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 2;
}
.input-wrap__suffix .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm); height: var(--control-sm);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.input-wrap__suffix .icon-btn:hover { background: var(--bg-section); color: var(--text); }
.input-wrap--suffix .input { padding-right: var(--s-12); }
.input-wrap--suffix-2 .input { padding-right: 84px; }
.input-wrap__prefix-text, .input-wrap__suffix-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-300);
  color: var(--text-soft);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
.input-wrap__prefix-text { left: var(--s-3); }
.input-wrap__suffix-text { right: var(--s-3); }

.field-row { display: grid; gap: var(--s-3); }
.field-row--2 { grid-template-columns: 1fr 1fr; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 480px) { .field-row--2, .field-row--3 { grid-template-columns: 1fr; } }

/* checkbox / radio / switch */
.checkbox, .radio, .switch {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 2px 0;
  font-size: var(--fs-400);
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.radio, .switch { align-items: center; }
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.checkbox input[type="checkbox"] { border-radius: var(--radius-sm); margin-top: 2px; }
.radio input[type="radio"] { border-radius: 50%; }
.checkbox input:hover, .radio input:hover { border-color: var(--accent); }
.checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.radio input:checked { border-color: var(--accent); border-width: 5px; }
.checkbox input:focus-visible, .radio input:focus-visible, .switch input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.checkbox__hint { display: block; margin-top: 2px; font-size: var(--fs-200); color: var(--text-soft); }
.switch input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 40px; height: 22px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left var(--transition), background var(--transition);
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { left: 21px; background: var(--on-accent); }


/* ==========================================================================
   12. CARDS, BADGES, ALERTS, TABLES, STATS, SECTION RHYTHM
   Every card on the site: card-bg, 1px border, radius-lg, shadow-sm.
   Interactive cards lift on hover (shadow + 2px).
   ========================================================================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
}
.card--bare { padding: 0; overflow: hidden; }
.card__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.card__title { margin: 0; font-size: var(--fs-400); font-weight: var(--fw-semibold); }
.card__body { padding: var(--s-5); }
.card__footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-section);
}
@media (max-width: 767px) {
  .card { padding: var(--s-4); }
  .card__header, .card__body, .card__footer { padding-inline: var(--s-4); }
}

/* small uppercase caption used as card / block labels everywhere */
.caption,
.filter-card__label,
.listing-info__title,
.listing-page__title,
.home-stats__breakdown-title,
.home-stats__label,
.game-stat__num-lbl,
.vip-card__status,
.vip-card__players-label,
.promo-card--empty__sub {
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.stat {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
}
.stat__value { margin-bottom: var(--s-1); font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; }
.stat__label { font-size: var(--fs-200); color: var(--text-muted); }
.stat-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-grid--compact .stat--compact { display: block; padding: var(--s-4) var(--s-5); border: 0; border-radius: 0; background: var(--card-bg); }
.stat--compact .stat__label { margin-bottom: var(--s-1); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.stat--compact .stat__value { margin: 0; font-size: var(--fs-700); line-height: 1.2; }

.table { width: 100%; border-collapse: collapse; background: var(--card-bg); font-size: var(--fs-300); }
.table th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
}
.table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: var(--bg-section); }
.table tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-muted);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--info    { background: var(--accent-soft);  color: var(--accent); }

.alert {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--bg-section);
  font-size: var(--fs-300);
}
.alert__icon { flex-shrink: 0; font-size: 18px; padding-top: 1px; }
.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.alert--danger, .alert--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert--info    { background: var(--accent-soft);  border-color: var(--accent);  color: var(--accent); }

/* vertical rhythm between page sections */
.section-block { padding-top: var(--s-6); }
.main > .section-block:first-child,
.main > .container.section-block:first-child { padding-top: var(--s-5); }
.main > .section-block:last-child { padding-bottom: var(--s-2); }
@media (max-width: 767px) {
  .section-block { padding-top: var(--s-4); }
  .main > .section-block:first-child,
  .main > .container.section-block:first-child { padding-top: var(--s-4); }
}
.section { padding: var(--s-8) 0; }
.section--muted { background: var(--bg-section); border-top: 1px solid var(--border); margin-top: var(--s-4); }
.section__title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); font-size: var(--fs-600); }

/* section head: title (icon + text) left, one action right */
.section-head,
.promo-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.section-head__title,
.promo-strip__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text);
}
.section-head__title i.fa,
.promo-strip__title i { color: var(--accent-2); font-size: 15px; }
.section-head__title--sm { font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.section-head__action,
.promo-strip__info a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
}
.section-head__action:hover, .promo-strip__info a:hover { text-decoration: underline; }

.hero { padding: var(--s-12) 0 var(--s-10); background: linear-gradient(180deg, var(--accent-soft), transparent); border-bottom: 1px solid var(--border); }
.hero__title { margin-bottom: var(--s-3); font-size: var(--fs-900); letter-spacing: -0.02em; }
.hero__sub { max-width: 640px; margin-bottom: var(--s-5); font-size: var(--fs-500); color: var(--text-muted); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 767px) { .hero__title { font-size: var(--fs-700); } .hero__sub { font-size: var(--fs-400); } }

.server-name { font-weight: var(--fw-medium); color: var(--text); }
.server-name:hover { color: var(--accent); text-decoration: none; }
.muted { color: var(--text-soft); font-size: var(--fs-200); }
code.muted { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); }


/* ==========================================================================
   13. SMALL PARTS shared by cards and tables
   status dot · tag chips · address plaque · copy / vote / connect buttons ·
   players bar · bots badge · social links · project badge · VIP pills
   ========================================================================== */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-soft);
  flex-shrink: 0;
}
.status-dot--success { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot--danger  { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-soft); }

/* tag chips (categories + free #hashtags) */
.server-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  min-height: 22px;
}
.server-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-section);
  color: var(--text-muted);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
a.server-tag:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); text-decoration: none; }
.server-tag--free { background: transparent; border-color: transparent; color: var(--accent); font-weight: var(--fw-medium); padding: 0 var(--s-1); }
.server-tag--placeholder { background: transparent; border-color: transparent; color: var(--text-soft); opacity: 0.4; padding: 0 var(--s-1); }

/* flag + IP plaque (+ copy) */
.addr-cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  white-space: nowrap;
}
.addr-cluster__flag { display: block; width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
.addr-cluster__ip,
.promo-card__addr {
  display: inline-block;
  padding: 4px var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addr-cluster__ip { min-width: 150px; }

/* inline icon buttons: copy, vote, connect-in-table — all --xs */
.copy-btn,
.vote-btn,
.icon-btn--connect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-xs);
  height: var(--control-xs);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.copy-btn:hover, .vote-btn:hover, .icon-btn--connect:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.copy-btn.is-copied { background: var(--success-soft); color: var(--success); }
.copy-btn--inline { margin-left: 0; }
.vote-btn { position: relative; }
.vote-btn--up:hover   { background: var(--success-soft); color: var(--success); }
.vote-btn--down:hover { background: var(--danger-soft);  color: var(--danger); }
.vote-btn.is-loading { opacity: 0.5; pointer-events: none; }
.icon-btn--connect { font-size: 14px; }
.icon-btn--connect:hover { background: var(--accent-soft); color: var(--accent); }

.votes-count {
  display: inline-block;
  min-width: 36px;
  padding: 3px var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--bg-section);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  color: var(--text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.votes-count.is-updated { animation: votesPulse 600ms ease; }
@keyframes votesPulse {
  0%   { background: var(--accent-soft); color: var(--accent); transform: scale(1.15); }
  100% { background: var(--bg-section); color: var(--text); transform: scale(1); }
}
.vote-block {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-section);
}
.vote-block .votes-count { background: transparent; font-size: var(--fs-300); }
.vote-flash {
  position: absolute;
  left: 50%; top: -6px;
  transform: translate(-50%, 0);
  z-index: 5;
  padding: 2px var(--s-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  transition: all 800ms ease-out;
  box-shadow: var(--shadow);
}
.vote-flash--success { background: var(--success); }
.vote-flash--warn    { background: var(--warning); }
.vote-flash--error   { background: var(--danger); }

/* players load bar — 4px, colour by load level */
.players-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  overflow: hidden;
}
.players-bar__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--bar-w, 0%);
  border-radius: var(--radius-pill);
  background: var(--bar-color, var(--load-0));
  transition: width 240ms ease;
}
.players-bar--lvl-0 { --bar-color: var(--load-0); }
.players-bar--lvl-1 { --bar-color: var(--load-1); }
.players-bar--lvl-2 { --bar-color: var(--load-2); }
.players-bar--lvl-3 { --bar-color: var(--load-3); }
.players-bar--lvl-4 { --bar-color: var(--load-4); }

.bots-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bots-badge i { font-size: 11px; }

/* social links (site / telegram / youtube / discord / vk) */
.server-links { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.server-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-xs);
  height: var(--control-xs);
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.server-link:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.server-link[title*="Telegram"]:hover, .server-link[title*="telegram"]:hover { color: #229ED9; }
.server-link[title*="YouTube"]:hover,  .server-link[title*="youtube"]:hover  { color: #FF0033; }
.server-link[title*="Discord"]:hover,  .server-link[title*="discord"]:hover  { color: #5865F2; }
.server-link[title*="VK"]:hover { color: #2787F5; }
.social-icons { display: inline-flex; align-items: center; gap: 2px; }

/* "belongs to project X" badge next to a server name */
.server-project-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 180px;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.server-project-badge:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.server-project-badge i.fa { font-size: 10px; }
.server-project-badge > span { overflow: hidden; text-overflow: ellipsis; }
.server-project-badge__more { opacity: 0.75; }

/* VIP / SUPER VIP pills */
.vip-badge,
.vip-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--tier-supervip-soft);
  color: var(--tier-supervip);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.vip-badge i { font-size: 9px; }
.vip-badge--super { background: var(--tier-boost-soft); color: var(--tier-boost); }


/* ==========================================================================
   14. HOME — TOP-5 promo strip (paid placements)
   Five equal cards on desktop, three on tablet, a horizontal snap strip on
   phones. Every card carries its paid position (#1..#5); an unsold slot is a
   sales card with the lowest tariff price.
   ========================================================================== */
.promo-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.promo-strip__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.promo-strip__icon,
.vip-row__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7c04a, #e0891a);
  color: #2b1a00;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(240, 168, 54, 0.35);
}
.promo-strip__hint,
.vip-row__hint {
  font-size: var(--fs-200);
  font-weight: var(--fw-regular);
  color: var(--text-soft);
}
@media (max-width: 767px) { .promo-strip__hint, .vip-row__hint { display: none; } }

.promo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1279px) { .promo-grid { gap: var(--s-3); } }
@media (max-width: 1023px) {
  .promo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo-grid > :nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
  .promo-grid {
    display: flex;
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--s-4));
    padding: var(--s-1) var(--s-4) var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .promo-grid::-webkit-scrollbar { display: none; }
  .promo-grid > * { flex: 0 0 min(76vw, 290px); scroll-snap-align: start; display: flex; }
  .promo-grid > .promo-slot ~ .promo-slot { display: none; }
}

/* rank chip shared by cards and free slots */
.promo-rank {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  background: rgba(10, 13, 18, 0.72);
  color: #fff;
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.promo-rank--gold   { background: linear-gradient(135deg, #ffd66b, #e3961a); color: #2b1a00; }
.promo-rank--silver { background: linear-gradient(135deg, #e6ebf2, #aeb8c6); color: #1c2430; }
.promo-rank--bronze { background: linear-gradient(135deg, #e5a874, #b3642a); color: #2b1600; }

.promo-card {
  --promo-color: var(--accent);
  --promo-rgb: 31, 111, 209;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.promo-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--promo-color), rgba(var(--promo-rgb), 0.25));
}
.promo-card:hover {
  border-color: rgba(var(--promo-rgb), 0.6);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--promo-rgb), 0.35);
}
.promo-card.is-offline .promo-card__map-bg { filter: grayscale(1); opacity: 0.6; }

.promo-card__media,
.vip-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(circle at center, var(--dot) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--bg-section);
}
.promo-card__media { aspect-ratio: 16 / 10; }
.promo-card__media::before,
.vip-card__media::before {
  content: attr(data-no-image);
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-3);
  font-size: var(--fs-100); font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  color: var(--text-soft); opacity: 0.6;
  pointer-events: none;
}
.promo-card__map-bg,
.vip-card__map-bg {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 500ms ease, filter var(--transition), opacity var(--transition);
}
.promo-card:hover .promo-card__map-bg,
.vip-card:hover .vip-card__map-bg { transform: scale(1.06); }
.promo-card__map-bg.is-broken,
.vip-card__map-bg.is-broken { opacity: 0; }
.promo-card__media::after,
.vip-card__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(6,9,14,0.85) 100%);
  pointer-events: none;
}
.promo-card__live,
.vip-card__live {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: rgba(10, 13, 18, 0.6);
  color: rgba(255,255,255,0.85);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.promo-card__live { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3; }
.promo-card__live .status-dot,
.vip-card__live .status-dot { width: 6px; height: 6px; box-shadow: none; }
.promo-card__live .status-dot--success,
.vip-card__live .status-dot--success { box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.25); }
.promo-card__map-name {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: var(--fs-100); font-weight: var(--fw-semibold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.promo-card__map-name img { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.promo-card__players {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 3;
  display: inline-flex; align-items: baseline; gap: 4px;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-variant-numeric: tabular-nums;
}
.promo-card__players i.fa { font-size: 11px; opacity: 0.7; margin-right: 2px; }
.promo-card__players b { font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1; }
.promo-card__players small { font-size: var(--fs-200); opacity: 0.75; }
.promo-card__bots { margin-left: 4px; font-size: 10px; opacity: 0.8; }

.promo-card__body {
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.promo-card__name {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.005em;
  min-width: 0;
}
.promo-card__name a {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--text); text-decoration: none;
}
.promo-card__name a:hover { color: var(--accent); }
.promo-card__project { align-self: flex-start; max-width: 100%; }
.promo-card__tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; max-height: 44px; overflow: hidden; }
.promo-card__tags .server-tag { height: 20px; font-size: 10px; }
.promo-card__addr {
  display: flex; align-items: center; gap: var(--s-1);
  min-width: 0;
  height: var(--control-sm);
  padding: 0 var(--s-1) 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-section);
}
.promo-card__addr code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-200); color: var(--text); background: none; padding: 0; }
.promo-card__meta { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; min-height: 24px; }
.promo-card__bar { flex: 1; min-width: 0; }
.promo-card__foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.promo-card__socials { display: inline-flex; gap: 0; flex-shrink: 0; }
.promo-card__socials .server-link { width: 24px; height: 24px; font-size: 12px; }
.promo-card__connect { width: 100%; white-space: nowrap; }
.promo-strip__icon i, .vip-row__icon i { color: inherit; font-size: 14px; }

/* unsold slot — a sales card, not an empty box */
.promo-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-1);
  width: 100%;
  min-height: 300px;
  padding: var(--s-6) var(--s-4) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 55% at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--card-bg);
  text-align: center;
  text-decoration: none;
  color: var(--text-muted);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.promo-slot:hover {
  border-style: solid; border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), 0 0 0 1px var(--accent);
  text-decoration: none;
}
.promo-rank--slot { background: var(--bg-section); color: var(--text-soft); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--border); }
.promo-rank--slot.promo-rank--gold   { background: linear-gradient(135deg, #ffd66b, #e3961a); color: #2b1a00; border: 0; }
.promo-rank--slot.promo-rank--silver { background: linear-gradient(135deg, #e6ebf2, #aeb8c6); color: #1c2430; border: 0; }
.promo-rank--slot.promo-rank--bronze { background: linear-gradient(135deg, #e5a874, #b3642a); color: #2b1600; border: 0; }
.promo-slot__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.promo-slot:hover .promo-slot__icon { transform: scale(1.08); background: var(--accent); color: var(--on-accent); }
.promo-slot__title { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }
.promo-slot__sub { font-size: var(--fs-200); line-height: 1.4; color: var(--text-muted); }
.promo-slot__price { margin-top: var(--s-2); font-size: var(--fs-200); color: var(--text-muted); }
.promo-slot__price b { font-size: var(--fs-300); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; }
.promo-slot__price small { font-size: var(--fs-100); color: var(--text-soft); }
.promo-slot__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-3);
  height: var(--control-sm); padding: 0 var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  transition: background var(--transition), gap var(--transition);
}
.promo-slot:hover .promo-slot__cta { background: var(--accent-hover); gap: 10px; }


/* ==========================================================================
   15. HOME — SUPER VIP hero cards (paid placements)
   Two cards side by side on desktop; map on the left with a soft fade into
   the info column, tier colour as a top gradient line and a glow. When only
   one is sold, the second column is a sales card.
   ========================================================================== */
.vip-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.vip-row__title { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--fs-500); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.vip-row__buy { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.vip-row__buy:hover { gap: 10px; text-decoration: none; }

.vip-cards-row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.vip-cards-row--split { grid-template-columns: 1fr 1fr; }
@media (max-width: 1023px) { .vip-cards-row--split { grid-template-columns: 1fr; } }

.vip-card {
  --vip-color: var(--tier-supervip);
  --vip-rgb: 240, 168, 54;
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 210px;
  background: var(--card-bg);
  border: 1px solid rgba(var(--vip-rgb), 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(var(--vip-rgb), 0.08);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.vip-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  height: 3px;
  background: linear-gradient(90deg, var(--vip-color) 0%, rgba(var(--vip-rgb), 0.35) 60%, transparent 100%);
}
.vip-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(var(--vip-rgb), 0.16) 0%, transparent 60%),
    linear-gradient(90deg, rgba(var(--vip-rgb), 0.08) 0%, transparent 45%);
  pointer-events: none;
}
.vip-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--vip-rgb), 0.7);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--vip-rgb), 0.45), 0 0 40px rgba(var(--vip-rgb), 0.18);
}
.vip-card.is-offline .vip-card__map-bg { filter: grayscale(1); opacity: 0.6; }

.vip-card__media { z-index: 2; height: 100%; min-height: 100%; }
.vip-card__media::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 60%, var(--card-bg) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 50%, rgba(6,9,14,0.7) 100%);
}
.vip-card__map-name {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: var(--fs-100); font-weight: var(--fw-semibold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.vip-card__map-name i.fa { opacity: 0.7; }

.vip-card__info {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-3);
}
.vip-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-height: 24px; }
.vip-card__tier {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--s-2) 0 var(--s-2);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ffd66b 0%, var(--vip-color) 100%);
  color: #2b1a00;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(var(--vip-rgb), 0.35);
}
.vip-card__live { background: var(--bg-section); color: var(--text-muted); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--border); }
.vip-card__project { margin-left: auto; max-width: 55%; }
.vip-card__name {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.vip-card__name a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); text-decoration: none; }
.vip-card__name a:hover { color: var(--accent); }
.vip-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 22px; }
.vip-card__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.vip-card__socials { display: inline-flex; gap: 2px; flex-shrink: 0; margin-left: auto; }
.vip-card__addr { align-self: flex-start; }
.vip-card__foot {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.vip-card__players {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-2);
  row-gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.vip-card__players-val { font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.vip-card__players-val small { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-soft); }
.vip-card__bar { grid-column: 1 / -1; width: 100%; max-width: 260px; }
.vip-card__players .bots-badge { justify-self: start; }
.vip-card__connect { flex-shrink: 0; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .vip-card { grid-template-columns: 150px minmax(0, 1fr); }
  .vip-card__connect span { display: none; }
  .vip-card__connect { width: var(--control); padding: 0; }
  .vip-card__project { max-width: 45%; }
}
@media (max-width: 767px) {
  .vip-card { grid-template-columns: 1fr; min-height: 0; }
  .vip-card__media { height: 160px; }
  .vip-card__media::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 40%, var(--card-bg) 100%);
  }
  .vip-card__info { padding: var(--s-3) var(--s-4) var(--s-4); }
  .vip-card__project { margin-left: 0; max-width: 100%; order: 3; }
  .vip-card__name { font-size: var(--fs-500); }
  .vip-card__name a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vip-card__foot { flex-wrap: wrap; gap: var(--s-3); }
  .vip-card__connect { width: 100%; }
}

/* second Super VIP column unsold — offer it */
.vip-slot {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 210px;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 100% 0%, var(--tier-supervip-soft) 0%, transparent 60%),
    var(--card-bg);
  text-decoration: none;
  color: var(--text-muted);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.vip-slot:hover { border-style: solid; border-color: var(--tier-supervip); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 0 0 1px var(--tier-supervip); text-decoration: none; }
.vip-slot__icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ffd66b, #e0891a);
  color: #2b1a00;
  font-size: 26px;
  box-shadow: 0 8px 22px rgba(240, 168, 54, 0.35);
}
.vip-slot__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.vip-slot__title { font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--text); }
.vip-slot__sub { font-size: var(--fs-200); line-height: 1.45; color: var(--text-muted); }
.vip-slot__price { margin-top: var(--s-1); font-size: var(--fs-200); color: var(--text-muted); }
.vip-slot__price b { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; }
.vip-slot__price small { font-size: var(--fs-100); color: var(--text-soft); }
.vip-slot__cta { flex-shrink: 0; }
@media (max-width: 767px) {
  .vip-slot { flex-wrap: wrap; min-height: 0; padding: var(--s-4); }
  .vip-slot__cta { width: 100%; }
}


/* ==========================================================================
   16. HOME — filters (tags + search)
   ========================================================================== */
.filter-row { display: flex; flex-direction: column; gap: var(--s-3); }
.filter-card {
  min-width: 0;
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-clear:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); text-decoration: none; }
.filter-clear i { font-size: 9px; }

/* tag chips: wrap on desktop; on phones one scrolling row with a fade */
.tag-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 768px) { .tag-filter__btn { flex: 1 1 auto; } }
.tag-filter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-section);
  color: var(--text-muted);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tag-filter__btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.tag-filter__btn.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (max-width: 767px) {
  .filter-card--tags { padding-right: 0; }
  .filter-card--tags .filter-card__label { padding-right: var(--s-4); }
  .tag-filter {
    flex-wrap: nowrap;
    padding-right: var(--s-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
  }
  .tag-filter::-webkit-scrollbar { display: none; }
  .tag-filter__btn { flex: 0 0 auto; }
}

/* search row: type · query · search · | · Tas-IX */
.search-form { display: flex; align-items: center; gap: var(--s-2); }
.search-form__type { flex: 0 0 160px; }
.search-form__input { flex: 1 1 auto; min-width: 0; }
.search-form .btn { flex-shrink: 0; }
.search-form__divider { width: 1px; height: 24px; margin: 0 var(--s-1); background: var(--border-strong); flex-shrink: 0; }
.btn--tasix { background: var(--success-soft); border-color: transparent; color: var(--success); }
.btn--tasix:hover { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.btn--tasix.is-active { background: var(--success); border-color: var(--success); color: #fff; }
@media (max-width: 767px) {
  .search-form { display: grid; grid-template-columns: 1fr auto; }
  .search-form__type,
  .search-form__input { grid-column: 1 / -1; }
  .search-form__divider { display: none; }
  .search-form .btn--primary { grid-column: 1; }
  .btn--tasix { grid-column: 2; width: var(--control); padding: 0; }
  .btn--tasix span { display: none; }
}


/* ==========================================================================
   17. SERVER TABLE (home / search / tag pages)
   Desktop: a real table. Phone (<768): each row becomes a small card laid
   out on a grid — no sideways scrolling, nothing hidden.
   ========================================================================== */
.listing-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.server-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-size: var(--fs-300);
}
.server-table th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.server-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.server-table tbody tr:last-child td { border-bottom: 0; }
.server-table tbody tr:hover td { background: var(--bg-section); }

.server-table .game-col, .server-table .game-cell { width: 36px; padding-inline: var(--s-2) 0; text-align: center; }
.game-icon { display: inline-block; width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; }
.server-table .name { min-width: 200px; max-width: 360px; }
.name__row { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; overflow: hidden; }
.name__link { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
.name__link:hover { color: var(--accent); }
.server-table .server-tags { margin-top: var(--s-1); min-height: 20px; }
.server-table .server-tag { height: 20px; font-size: 10px; }
.server-table .social-col, .server-table .social { width: 120px; padding-inline: var(--s-1); }
.server-table .addr { width: 230px; }
.server-table .connect-col, .server-table .connect { width: 40px; padding: 0; text-align: center; }
.server-table .players-cell { min-width: 120px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.players-stack { display: flex; flex-direction: column; gap: var(--s-1); }
.players-stack__row { display: inline-flex; align-items: center; gap: var(--s-2); }
.players-val { font-size: var(--fs-300); font-weight: var(--fw-semibold); line-height: 1; }
.server-table tbody tr:hover .players-bar { height: 5px; }
.server-table .map-cell { position: relative; overflow: hidden; min-width: 130px; max-width: 200px; }
.server-table .map-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--map-bg);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0.2) 50%, transparent);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0.2) 50%, transparent);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--transition);
}
.server-table tbody tr:hover .map-cell::before { opacity: 0.95; }
.map-with-preview { position: relative; z-index: 1; display: inline-block; padding: 2px var(--s-1); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-200); cursor: help; }
.map-with-preview:hover { color: var(--accent); }
.server-table .votes-col, .server-table .votes { width: 116px; text-align: center; white-space: nowrap; }
.server-table .votes { padding-inline: var(--s-1); }
.server-table .vip-rail-col, .server-table .vip-rail { width: 6px; padding: 0; text-align: center; }

/* VIP row: tier-coloured edge + a gradient fading across the row */
.server-table tr.is-vip td { position: relative; background: transparent; }
.server-table tr.is-vip td:first-child { box-shadow: inset 3px 0 0 0 var(--vip-color, var(--tier-vip)); }
.server-table tr.is-vip td:first-child::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100vw;
  background: linear-gradient(90deg, rgba(var(--vip-rgb, 31,111,209), 0.18) 0%, rgba(var(--vip-rgb, 31,111,209), 0.08) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.server-table tr.is-vip:hover td:first-child::before { background: linear-gradient(90deg, rgba(var(--vip-rgb, 31,111,209), 0.26) 0%, rgba(var(--vip-rgb, 31,111,209), 0.12) 30%, transparent 70%); }
.server-table tr.is-vip td > * { position: relative; z-index: 1; }
.server-table tr.is-vip .vip-rail { width: 22px; background: var(--vip-color, var(--tier-vip)); }
.server-table tr.is-vip .vip-rail::before { display: none; }
.vip-rail__text {
  display: block;
  padding: var(--s-2) 0;
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  line-height: 2.3;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

/* sort carets in a column header */
.listing-th-sortable { white-space: nowrap; }
.listing-th-label { margin-right: var(--s-1); }
.listing-sort { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 0; }
.listing-sort__btn { display: block; width: 14px; height: 11px; line-height: 11px; text-align: center; color: var(--text-soft); opacity: 0.45; text-decoration: none; transition: opacity var(--transition), color var(--transition); }
.listing-sort__btn:hover { opacity: 0.9; }
.listing-sort__btn.is-active { opacity: 1; color: var(--accent); }
.listing-sort__btn i.fa { font-size: 11px; line-height: 1; }

/* AJAX loading */
#listing-target { position: relative; transition: opacity var(--transition); }
#listing-target.is-loading { opacity: 0.5; pointer-events: none; }
#listing-target.is-loading::after {
  content: "";
  position: absolute;
  top: var(--s-6); left: 50%;
  z-index: 10;
  width: 28px; height: 28px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: listingSpin 700ms linear infinite;
}
@keyframes listingSpin { to { transform: translateX(-50%) rotate(360deg); } }

/* ---- phone: rows become cards ---- */
@media (max-width: 767px) {
  .listing-block { overflow: visible; }
  .server-table { display: block; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .server-table thead { display: none; }
  .server-table tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .server-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "game name    votes"
      "addr addr    connect"
      "load load    map"
      "soc  soc     soc";
    gap: var(--s-2) var(--s-2);
    align-items: center;
    padding: var(--s-3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .server-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; max-width: none; }
  .server-table tbody tr:hover td { background: transparent; }
  .server-table .game-cell { grid-area: game; padding: 0; }
  .server-table .name { grid-area: name; }
  /* the name may wrap on a phone; the project badge drops to its own line
     instead of squeezing the name to one letter */
  .server-table .name__row { flex-wrap: wrap; white-space: normal; row-gap: var(--s-1); }
  .server-table .name__link { flex: 1 1 0; min-width: 0; white-space: normal; overflow: visible; }
  .server-table .server-project-badge { flex-basis: 100%; max-width: 100%; width: fit-content; }
  /* votes stay on one line: [+] 199 [−] */
  .server-table .votes { grid-area: votes; display: flex; align-items: center; justify-content: flex-end; gap: 2px; white-space: nowrap; align-self: start; }
  .server-table .addr { grid-area: addr; }
  .server-table .connect { grid-area: connect; justify-self: end; }
  .server-table .players-cell { grid-area: load; min-width: 0; }
  .server-table .map-cell { grid-area: map; overflow: visible; text-align: right; }
  .server-table .map-cell::before { display: none; }
  .server-table .social { grid-area: soc; width: auto; }
  .server-table .social:empty, .server-table .social .social-icons:empty { display: none; }
  .server-table .vip-rail { display: none; }
  .server-table .addr-cluster { max-width: 100%; }
  .server-table .addr-cluster__ip { min-width: 0; flex: 1; }
  /* connect becomes a real button on touch */
  .icon-btn--connect { width: var(--control-sm); height: var(--control-sm); background: var(--accent-soft); color: var(--accent); }
  /* VIP row on a card: coloured left edge, gradient across the card */
  .server-table tr.is-vip { box-shadow: inset 3px 0 0 0 var(--vip-color, var(--tier-vip)), var(--shadow-sm); }
  .server-table tr.is-vip td:first-child { box-shadow: none; }
  .server-table tr.is-vip td:first-child::before { display: none; }
  .server-table tr.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--vip-rgb, 31,111,209), 0.16), transparent 70%);
    pointer-events: none;
  }
  .server-table tr.is-vip td { z-index: 1; }
}

/* empty state block reuses .server-table with inline padding in the template */
.server-table .mt-3 { margin-top: var(--s-3); }

/* pagination — --sm controls */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-5); }
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination__btn i.fa { font-size: 10px; }
.pagination__btn:hover:not(.is-disabled):not(.is-active) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.pagination__btn.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); cursor: default; }
.pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.pagination__sep { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: var(--control-sm); color: var(--text-soft); font-size: var(--fs-200); }

/* floating map preview */
.map-preview-tip {
  position: fixed;
  z-index: 9999;
  display: none;
  width: 248px;
  padding: var(--s-1);
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 100ms;
}
.map-preview-tip.is-visible { display: block; opacity: 1; }
.map-preview-tip img {
  display: block;
  width: 240px; height: 135px;
  border-radius: 6px;
  object-fit: cover;
  background: radial-gradient(circle at center, var(--dot) 1px, transparent 1px) 0 0 / 14px 14px, var(--bg-section);
}
.map-preview-tip img.is-broken { opacity: 0; }
.map-preview-tip::after {
  content: attr(data-no-image);
  position: absolute;
  inset: var(--s-1);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-section);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  pointer-events: none;
}
.map-preview-tip:has(img.is-broken)::after { display: flex; }

/* search page head */
.search-page__head { margin-bottom: var(--s-4); }
.search-page__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-700); }


/* ==========================================================================
   18. HOME — stats footer (overview + per-game breakdown)
   The decorated variant is a band: a surface panel with the three stat cards
   centered and the two CS sprites standing in the bottom corners. Sprites
   only on wide desktops (≥1280), where the container has side slack.
   ========================================================================== */
.home-stats-wrap { position: relative; }
.home-stats-wrap--decor {
  display: block;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 50% -12%, var(--accent-soft) 0%, transparent 56%),
    var(--card-bg);
  overflow: hidden;
}
.home-stats-wrap--decor .home-stats { position: relative; z-index: 2; margin: 0; }
.home-stats__decor { display: none; }
@media (min-width: 1280px) {
  .home-stats-wrap--decor { display: flex; align-items: center; min-height: 146px; padding: var(--s-4) 168px; }
  .home-stats-wrap--decor .home-stats { width: 100%; }
  .home-stats-wrap--decor::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 0;
    height: 30px;
    pointer-events: none;
    background:
      radial-gradient(58px 13px at 86px 100%, rgba(0,0,0,0.25), transparent 72%),
      radial-gradient(62px 13px at calc(100% - 88px) 100%, rgba(0,0,0,0.25), transparent 72%);
  }
  .home-stats__decor {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: auto;
    height: 120px;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,0.28));
    transition: transform 220ms ease;
  }
  .home-stats__decor--left  { left: 18px; }
  .home-stats__decor--right { right: 18px; }
  .home-stats-wrap--decor:hover .home-stats__decor { transform: translateY(-2px); }
}

.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
@media (max-width: 767px) { .home-stats { grid-template-columns: 1fr; } }
.home-stats__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.home-stats__item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.home-stats__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
}
.home-stats__icon--success { background: var(--success-soft); color: var(--success); font-size: 11px; }
.home-stats__body { flex: 1; min-width: 0; }
.home-stats__val { font-size: var(--fs-800); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.home-stats__val .dot { display: inline-block; width: 8px; height: 8px; margin-left: var(--s-2); border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); vertical-align: middle; }
.home-stats__label { margin-top: var(--s-1); }

.home-stats__breakdown {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.home-stats__breakdown-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.home-stats__breakdown-title i.fa { color: var(--accent); font-size: 12px; }
.home-stats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
@media (max-width: 767px) { .home-stats__grid { grid-template-columns: 1fr; } }
.game-stat {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gs-accent, var(--accent));
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.game-stat:hover { background: var(--card-bg); border-color: var(--gs-accent, var(--accent)); transform: translateY(-1px); text-decoration: none; }
.game-stat.is-empty { opacity: 0.55; }
.game-stat.is-empty:hover { opacity: 1; }
.game-stat__icon { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.game-stat__icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
.game-stat__icon-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--radius); background: var(--gs-accent, var(--accent)); color: #fff; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; }
.game-stat__name { grid-column: 2; font-size: var(--fs-300); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-stat__numbers { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.game-stat__num { display: flex; flex-direction: column; min-width: 0; }
.game-stat__num strong { font-size: var(--fs-400); font-weight: var(--fw-bold); line-height: 1.1; }
.game-stat__num strong.is-online { color: var(--success); }
.game-stat__num-lbl { margin-top: 2px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ==========================================================================
   19. LISTING PAGE (/listing) — tier-grouped tables
   ========================================================================== */
.listing-page { padding: var(--s-5) var(--s-4) var(--s-8); }
@media (min-width: 768px) { .listing-page { padding-inline: var(--s-6); } }
.listing-page__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.listing-page__title { margin: 0; color: var(--text); font-size: var(--fs-300); }
.listing-page__title i.fa { margin-right: var(--s-1); color: var(--accent); }
.listing-page__meta { font-size: var(--fs-200); color: var(--text-soft); }
.listing-page__meta strong { color: var(--text-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .listing-page__header { flex-direction: column; align-items: flex-start; gap: var(--s-1); } }

/* info card */
.listing-info {
  margin-bottom: var(--s-6);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.listing-info__title { margin: 0; padding: var(--s-3) var(--s-5); color: var(--text); background: var(--bg-section); border-bottom: 1px solid var(--border); }
.listing-info__table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.listing-info__table th {
  padding: var(--s-2) var(--s-4);
  text-align: left;
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.listing-info__table th.num, .listing-info__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.listing-info__table td { padding: var(--s-3) var(--s-4); color: var(--text-muted); border-bottom: 1px solid var(--border); vertical-align: middle; }
.listing-info__table tr:last-child td { border-bottom: 0; }
.listing-info__hint-row td { background: var(--bg-section); font-size: var(--fs-200); color: var(--text-soft); }
.listing-info__link { font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.listing-info__link:hover { text-decoration: underline; }
.listing-tier-badge { display: inline-block; font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.listing-tier-badge--top5      { color: var(--tier-premium); }
.listing-tier-badge--super_vip { color: var(--tier-supervip); }
.listing-tier-badge--boost     { color: var(--tier-boost); }
.listing-tier-badge--vip       { color: var(--tier-vip); }
.listing-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.listing-status--free { background: var(--success-soft); color: var(--success); }
.listing-status--sold { background: var(--danger-soft);  color: var(--danger); }
@media (max-width: 767px) {
  /* the 4-column rules table becomes a stack of tier cards */
  .listing-info__table, .listing-info__table tbody, .listing-info__table tr, .listing-info__table td { display: block; }
  .listing-info__table thead { display: none; }
  .listing-info__table tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
  .listing-info__table tr:last-child { border-bottom: 0; }
  .listing-info__table td { padding: 0; border: 0; }
  .listing-info__table td:first-child { margin-bottom: var(--s-1); }
  .listing-info__table td:nth-child(2) { margin-bottom: var(--s-2); font-size: var(--fs-200); }
  .listing-info__table td.num { display: inline; margin-right: var(--s-3); text-align: left; color: var(--text); font-weight: var(--fw-semibold); }
  .listing-info__table td.num::before { content: "Места: "; font-weight: var(--fw-regular); color: var(--text-soft); }
  .listing-info__table td:last-child { display: inline; }
  .listing-info__hint-row td:first-child { display: block; margin: 0; }
}

/* section titles per tier */
.listing-section-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-3);
  padding-left: var(--s-2);
  border-left: 3px solid var(--text-soft);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.listing-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--text-muted);
}
.listing-section-title--top5      { color: var(--tier-premium);  border-left-color: var(--tier-premium); }
.listing-section-title--super-vip { color: var(--tier-supervip); border-left-color: var(--tier-supervip); }
.listing-section-title--vip       { color: var(--tier-vip);      border-left-color: var(--tier-vip); }
.listing-section-title--boost     { color: var(--tier-boost);    border-left-color: var(--tier-boost); }
.listing-section-title--regular   { color: var(--text-muted);    border-left-color: var(--border-strong); }

/* tier tables — same th/td as the home table */
.listing-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.listing-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.listing-table th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.listing-table th.num { text-align: center; }
.listing-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.listing-table tbody tr:last-child td { border-bottom: 0; }
.listing-table tbody tr:hover td { background: var(--bg-section); }
.listing-col-idx, .listing-row__idx { width: 36px; text-align: center; color: var(--text-soft); font-size: var(--fs-200); font-variant-numeric: tabular-nums; }
.listing-row__name a { font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
.listing-row__name a:hover { color: var(--accent); }
.listing-row__map code { font-size: var(--fs-200); color: var(--text-muted); }
.listing-row__end { font-size: var(--fs-200); white-space: nowrap; font-variant-numeric: tabular-nums; }
.listing-unlimited { color: var(--text-soft); font-style: italic; }
.listing-expired { color: var(--danger); font-style: italic; }
.listing-row__fill { width: 100px; }
.listing-fill { position: relative; width: 84px; height: 22px; border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; }
.listing-fill__bar { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-sm); transition: width 200ms; }
.listing-fill__txt { position: relative; z-index: 1; display: block; line-height: 22px; text-align: center; font-size: var(--fs-100); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.listing-row--tinted td:first-child { box-shadow: inset 3px 0 0 0 var(--row-tc, transparent); }
.listing-row--tinted td { background: color-mix(in srgb, var(--row-tc, transparent) 7%, transparent); }
@media (max-width: 767px) {
  .listing-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .listing-table { display: block; }
  .listing-table thead { display: none; }
  .listing-table tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .listing-table tbody tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "idx name fill"
      "idx addr fill"
      "end end  map";
    gap: var(--s-1) var(--s-2);
    align-items: center;
    padding: var(--s-3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .listing-table td { display: block; padding: 0; border: 0; width: auto; }
  .listing-table tbody tr:hover td { background: transparent; }
  .listing-row__idx  { grid-area: idx; text-align: left; }
  .listing-row__name { grid-area: name; }
  .listing-row__addr { grid-area: addr; }
  .listing-row__fill { grid-area: fill; }
  .listing-row__map  { grid-area: map; text-align: right; }
  .listing-row__end  { grid-area: end; font-size: var(--fs-100); color: var(--text-soft); }
  .listing-row__end::before { content: "до "; }
  .listing-row--tinted td:first-child { box-shadow: none; }
  .listing-row--tinted td { background: transparent; }
  .listing-row--tinted { box-shadow: inset 3px 0 0 0 var(--row-tc, transparent), var(--shadow-sm); background: color-mix(in srgb, var(--row-tc, transparent) 7%, var(--card-bg)); }
  .listing-section-title { margin-top: var(--s-5); }
}
.listing-empty {
  padding: var(--s-12) var(--s-6);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.listing-empty i.fa { display: block; margin-bottom: var(--s-3); font-size: 36px; color: var(--text-soft); }
.listing-empty h2 { margin: 0 0 var(--s-2); font-size: var(--fs-500); color: var(--text); }
.listing-empty p { margin: 0; font-size: var(--fs-300); }


/* ==========================================================================
   20. GLOBAL BITS — icon alignment, scrollbars, prose, status pills, misc
   ========================================================================== */
/* FontAwesome glyphs sit a hair high inside flex-centred boxes; normalise */
i.fa { display: inline-block; line-height: 1; vertical-align: -1px; }
.btn i.fa, .tag-filter__btn i.fa, .vote-btn i.fa, .copy-btn i.fa, .server-link i.fa,
.pagination__btn i.fa, .filter-clear i.fa, .bots-badge i.fa, .status-pill i.fa,
.section-title i.fa, .srv-card__heading i.fa, .srv-social-btn i.fa {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle;
}

/* themed scrollbars */
:root { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: padding-box; }

/* long-form HTML from the admin (pages, project descriptions) */
.prose { max-width: 760px; font-size: var(--fs-500); line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin: 1.8em 0 0.5em; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); font-size: var(--fs-700); }
.prose h3 { margin: 1.4em 0 0.4em; font-size: var(--fs-600); }
.prose h4 { margin: 1.2em 0 0; font-size: var(--fs-500); }
.prose p { margin: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0; padding-left: var(--s-6); }
.prose li { margin: var(--s-1) 0; }
.prose blockquote { margin: 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-section); color: var(--text-muted); font-style: italic; }
.prose code { padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); font-size: 0.9em; color: var(--accent); }
.prose pre { margin: 0; padding: var(--s-4); border-radius: var(--radius); background: var(--ink); color: var(--on-ink); font-size: var(--fs-300); line-height: 1.5; overflow-x: auto; }
.prose pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
.prose hr { margin: 1.5em 0; }
.prose img { border: 1px solid var(--border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-400); }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--bg-section); font-weight: var(--fw-bold); }

/* 404 */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: var(--s-8); text-align: center; }
.error-page__code { margin-bottom: var(--s-3); font-size: 96px; font-weight: var(--fw-bold); line-height: 1; color: var(--accent); }
.error-page__title { margin-bottom: var(--s-3); font-size: var(--fs-700); }
.error-page__msg { max-width: 480px; margin-bottom: var(--s-5); color: var(--text-muted); }

/* generic section title (server page similar servers, etc.) */
.section-title { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-400); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.section-title i { color: var(--accent); font-size: 13px; }

/* status pills — one component for server state AND invoice state */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-section);
  color: var(--text-muted);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.status-pill--online, .status-pill--paid      { background: var(--success-soft); border-color: transparent; color: var(--success); }
.status-pill--offline                          { background: var(--danger-soft);  border-color: transparent; color: var(--danger); }
.status-pill--pending                          { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.status-pill--refunded                         { background: var(--tier-boost-soft); border-color: transparent; color: var(--tier-boost); }
.status-pill--cancelled, .status-pill--neutral { background: var(--bg-section); color: var(--text-muted); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; background: var(--text-soft); }
.dot--success { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.dot--muted { background: var(--text-soft); }

.empty-state { padding: var(--s-16) var(--s-6); text-align: center; background: var(--card-bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.empty-state__icon { margin-bottom: var(--s-4); font-size: 56px; color: var(--text-soft); }
.empty-state h2 { margin: 0 0 var(--s-2); font-size: var(--fs-600); }

.link--back { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-4); font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; }
.link--back:hover { color: var(--accent); text-decoration: none; }
/* back button on the server page — a real --sm button */
.server-page__top { margin-bottom: var(--s-3); }
.server-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.server-page__back:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.server-page__back i { font-size: 10px; }

/* page head shared by listing / projects / mstats / hosting */
.page-head,
.projects-head,
.mstats-header,
.hosting-catalog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.page-head__title,
.projects-head__title,
.mstats-header__title,
.hosting-catalog__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-1);
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-head__title i.fa, .projects-head__title i.fa, .mstats-header__title i.fa { color: var(--accent); font-size: 20px; }
.page-head__sub, .projects-head__sub, .mstats-header__lead { max-width: 640px; margin: 0; font-size: var(--fs-400); line-height: 1.5; color: var(--text-muted); }
.projects-head__count { font-size: var(--fs-500); font-weight: var(--fw-medium); color: var(--text-soft); }
@media (max-width: 767px) {
  .page-head__title, .projects-head__title, .mstats-header__title, .hosting-catalog__title { font-size: var(--fs-600); }
}


/* ==========================================================================
   21. CMS PAGES (/pages/*, banlist)
   Hero (icon + title + lead) → two columns: the article and a sticky side
   with table of contents, page navigation and a contact card.
   ========================================================================== */
.cms-page { padding-top: var(--s-5); padding-bottom: var(--s-10); }
.cms-page__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); font-size: var(--fs-200); color: var(--text-soft); }
.cms-page__crumbs a { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; }
.cms-page__crumbs a:hover { background: var(--bg-section); color: var(--accent); }
.cms-page__crumbs-sep { opacity: 0.5; }
.cms-page__crumbs-current { padding: var(--s-1) var(--s-2); font-weight: var(--fw-semibold); color: var(--text); }

.cms-hero {
  position: relative;
  display: flex; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding: var(--s-6) var(--s-8);
  background:
    radial-gradient(70% 120% at 100% 0%, var(--accent-strong) 0%, transparent 55%),
    radial-gradient(40% 80% at 0% 100%, var(--accent-soft) 0%, transparent 60%),
    var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cms-hero__icon {
  width: 64px; height: 64px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  font-size: 26px;
  box-shadow: 0 10px 24px var(--accent-strong);
}
.cms-hero__text { min-width: 0; }
.cms-hero__title { margin: 0; font-size: var(--fs-800); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; }
.cms-hero__lead { max-width: 760px; margin: var(--s-2) 0 0; font-size: var(--fs-400); line-height: 1.55; color: var(--text-muted); }

.cms-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
.cms-page__article {
  min-width: 0;
  padding: var(--s-8);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cms-page__body.prose { max-width: none; font-size: var(--fs-400); }
.cms-page__body.prose > .lead { margin-bottom: var(--s-2); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); font-size: var(--fs-500); line-height: 1.6; color: var(--text); }
.cms-page__body.prose h2 { display: flex; align-items: center; gap: var(--s-3); margin: 2em 0 0.6em; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); font-size: var(--fs-600); scroll-margin-top: calc(var(--header-stack) + var(--s-4)); }
.cms-page__body.prose h2::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.cms-page__body.prose > h2:first-child { margin-top: 0; }
.cms-page__body.prose h3 { margin: 1.4em 0 0.4em; font-size: var(--fs-500); color: var(--text); }
.cms-page__body.prose ul li::marker { color: var(--accent); }
.cms-page__body.prose table { display: block; overflow-x: auto; font-size: var(--fs-300); border: 1px solid var(--border); border-radius: var(--radius); }
.cms-page__body.prose th, .cms-page__body.prose td { padding: var(--s-2) var(--s-3); vertical-align: top; }
.cms-page__body.prose tr:last-child td { border-bottom: 0; }
.cms-page__body.prose sup { font-size: 0.7em; }
.cms-page__empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-5); text-align: center; color: var(--text-soft); }
.cms-page__empty i.fa { font-size: 36px; color: var(--border-strong); }
.cms-page__empty-state { padding: var(--s-16) var(--s-8); text-align: center; }
.cms-page__empty-state i.fa { display: block; margin-bottom: var(--s-4); font-size: 56px; color: var(--border-strong); }
.cms-page__empty-state h2 { margin: 0 0 var(--s-2); font-size: var(--fs-600); color: var(--text-muted); }
.cms-page__empty-state p { max-width: 480px; margin: 0 auto; color: var(--text-soft); }
.cms-page__footer { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }

/* side column */
.cms-side { position: sticky; top: calc(var(--header-stack) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.cms-card { padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cms-card__title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.cms-card__title i.fa { color: var(--accent); }
.cms-card__text { margin: 0 0 var(--s-3); font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.cms-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cms-card--contact { background: radial-gradient(80% 60% at 100% 0%, var(--accent-soft) 0%, transparent 60%), var(--card-bg); }
.cms-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.cms-toc__list a {
  position: relative;
  display: block;
  padding: 6px var(--s-2) 6px var(--s-3);
  border-left: 2px solid var(--border);
  font-size: var(--fs-300);
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.cms-toc__list a:hover { color: var(--text); }
.cms-toc__list a.is-active { border-color: var(--accent); color: var(--accent); font-weight: var(--fw-semibold); }
.cms-nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cms-nav__link { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-2); border-radius: var(--radius); font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); }
.cms-nav__link i.fa { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--bg-section); color: var(--text-soft); font-size: 12px; }
.cms-nav__link:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.cms-nav__link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.cms-nav__link.is-active i.fa { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1023px) {
  .cms-layout { grid-template-columns: 1fr; }
  .cms-side { position: static; }
  .cms-toc { display: none; }
}
@media (max-width: 767px) {
  .cms-hero { gap: var(--s-4); padding: var(--s-5) var(--s-4); }
  .cms-hero__icon { width: 48px; height: 48px; font-size: 20px; border-radius: var(--radius); }
  .cms-hero__title { font-size: var(--fs-700); }
  .cms-page__article { padding: var(--s-5) var(--s-4); }
  .cms-page__body.prose > .lead { padding: var(--s-3) var(--s-4); font-size: var(--fs-400); }
  .cms-page__footer .btn { flex: 1 1 auto; }
}
/* banlist table lives inside the article: let it bleed to the card edges */
.cms-page__article > .mstats-table { margin: calc(-1 * var(--s-8)); width: calc(100% + var(--s-8) * 2); }
@media (max-width: 767px) { .cms-page__article > .mstats-table { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-4)); width: calc(100% + var(--s-4) * 2); } }


/* ==========================================================================
   22. SERVER PAGE (/server/{game}/{ip:port})
   ========================================================================== */
.srv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-4); align-items: start; }
.srv-main, .srv-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
@media (max-width: 1023px) { .srv-layout { grid-template-columns: 1fr; } }

.srv-card {
  padding: var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) { .srv-card { padding: var(--s-4); } }
.srv-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.srv-card__head--row { justify-content: space-between; }
.srv-card__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-600); font-weight: var(--fw-bold); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-card__heading { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.srv-card__head .srv-card__heading { margin: 0; }
.srv-card__heading i { color: var(--accent); font-size: 13px; }
.srv-card__heading-hint { margin-left: auto; font-size: var(--fs-100); font-weight: var(--fw-medium); font-style: italic; letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.srv-card__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; margin-left: var(--s-1); padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: var(--fw-bold); }
.srv-card__footer { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--border); font-size: var(--fs-100); color: var(--text-soft); }

/* header card: map + facts */
.srv-card__body { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 767px) { .srv-card__body { grid-template-columns: 1fr; gap: var(--s-4); } }
.srv-map {
  position: relative;
  width: 240px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(circle at center, var(--dot) 1px, transparent 1px) 0 0 / 14px 14px, var(--bg-section);
}
.srv-map::before { content: attr(data-no-image); position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--s-2); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--text-soft); opacity: 0.6; }
.srv-map__img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.srv-map__img.is-broken { opacity: 0; }
.srv-map__caption { position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 2; padding: 2px var(--s-2); border-radius: var(--radius-sm); background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; font-weight: var(--fw-semibold); }
@media (max-width: 767px) { .srv-map { width: 100%; aspect-ratio: 16 / 9; } }

.srv-info, .srv-meta { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--s-2) var(--s-4); align-items: center; margin: 0; font-size: var(--fs-300); }
.srv-info dt, .srv-meta dt { font-weight: var(--fw-medium); color: var(--text-soft); }
.srv-info dd, .srv-meta dd { margin: 0; color: var(--text); }
.srv-info dd strong { font-size: var(--fs-400); }
.srv-info__link { color: var(--accent); text-decoration: none; }
.srv-info__link:hover { text-decoration: none; }
.srv-meta__you { font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--accent); }
@media (max-width: 767px) {
  .srv-info, .srv-meta { grid-template-columns: 1fr; gap: 2px; }
  .srv-info dt, .srv-meta dt { margin-top: var(--s-2); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
}

.srv-card__progress { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.srv-card__progress .players-bar { flex: 1 1 auto; height: 12px; }
.srv-card__progress-val { min-width: 50px; text-align: right; font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* actions: primary + owner edit + social buttons (all --sm to sit in one row) */
.srv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.srv-actions__socials { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.srv-social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.srv-social-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.srv-social-btn i { width: 14px; font-size: 12px; text-align: center; }
@media (max-width: 767px) {
  .srv-actions > .btn { flex: 1 1 100%; }
  .srv-actions__socials { margin-left: 0; width: 100%; }
  .srv-social-btn { flex: 1; justify-content: center; }
}
.vote-block--inline { display: inline-flex; }

/* active services */
.srv-card--services { border-left: 3px solid var(--tier-supervip); }
.srv-services { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.srv-services__item { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-300); }
.srv-services__item:last-child { border-bottom: 0; padding-bottom: 0; }
.srv-services__item:first-child { padding-top: 0; }
.srv-services__name { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); }
.srv-services__sub { grid-column: 1; font-size: var(--fs-100); font-weight: var(--fw-medium); color: var(--text-muted); }
.srv-services__expires { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: var(--fs-100); font-weight: var(--fw-medium); color: var(--text-soft); }
.srv-services__expires strong { display: inline-block; margin-left: var(--s-1); padding: 3px var(--s-2); border-radius: var(--radius-sm); background: var(--accent-2-soft); color: var(--accent-2); font-size: var(--fs-100); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .srv-services__item { grid-template-columns: 1fr; }
  .srv-services__expires { grid-column: 1; grid-row: auto; text-align: left; }
}

/* map bars */
.map-bars { position: relative; display: flex; align-items: flex-end; gap: var(--s-1); height: 200px; padding: var(--s-6) 0 var(--s-16); overflow-x: auto; scrollbar-width: thin; }
.map-bars__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0; min-width: 22px; max-width: 48px; height: 100%; text-decoration: none; transition: transform var(--transition); }
.map-bars__col:hover { transform: translateY(-2px); text-decoration: none; }
.map-bars__bar { display: block; width: 100%; min-height: 4px; border-radius: 3px 3px 0 0; background: var(--bg-2); transition: background var(--transition); }
.map-bars__col.is-active .map-bars__bar { background: var(--success); box-shadow: 0 0 12px var(--success-soft); }
.map-bars__col:hover .map-bars__bar { background: var(--accent); }
.map-bars__count { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.map-bars__col.is-active .map-bars__count { color: var(--success); }
.map-bars__col:hover .map-bars__count { color: var(--accent); }
.map-bars__label { position: absolute; bottom: -10px; left: 50%; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, 100%) rotate(-50deg); transform-origin: 50% 0; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); color: var(--text-muted); pointer-events: none; }
.map-bars__col.is-active .map-bars__label { color: var(--text); font-weight: var(--fw-bold); }
.map-bars__col:hover .map-bars__label { color: var(--accent); }

/* online chart */
.chart-wrap { position: relative; width: 100%; margin-top: var(--s-1); }
.chart-body { transition: opacity var(--transition); }
.chart-body.is-loading { opacity: 0.45; pointer-events: none; }
.online-chart { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--fs-100); color: var(--text-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--s-1); }
.chart-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.chart-legend__dot--humans { background: var(--accent); }
.chart-legend__dot--bots { background: var(--bg-2); border: 1px solid var(--text-soft); }
.chart-legend__notice { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; font-size: 10px; font-style: italic; color: var(--text-soft); }

/* segmented range tabs (day / week / …) and the players "now / all-time" tabs */
.stats-card__tabs, .srv-badges__tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); }
.srv-badges__tabs { display: flex; margin-bottom: var(--s-2); }
.stats-card__tab, .srv-badges__tab {
  height: var(--control-xs);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.srv-badges__tab { flex: 1 1 0; }
.stats-card__tab:hover, .srv-badges__tab:hover { color: var(--text); }
.stats-card__tab.is-active, .srv-badges__tab.is-active { background: var(--card-bg); color: var(--accent); box-shadow: var(--shadow-sm); }
.stats-card__toggle { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-200); color: var(--text-muted); cursor: pointer; }

.player-tabs { display: flex; gap: var(--s-1); margin: 0 calc(-1 * var(--s-4)) var(--s-2); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); }
.player-tabs__tab { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: -1px; padding: var(--s-2) var(--s-3) var(--s-3); border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: var(--fs-200); font-weight: var(--fw-bold); color: var(--text-soft); cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.player-tabs__tab i.fa { font-size: 11px; }
.player-tabs__tab:hover { color: var(--text); }
.player-tabs__tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.player-tabs__live-dot { color: var(--success); font-size: 7px !important; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.player-tabs__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--bg-section); font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.player-tabs__tab.is-active .player-tabs__badge { background: var(--accent-soft); color: var(--accent); }
.player-tabs__panel { display: none; }
.player-tabs__panel.is-active { display: block; }
.player-tabs__empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; color: var(--text-soft); font-size: var(--fs-200); }
.player-tabs__empty i.fa { font-size: 24px; color: var(--border-strong); }

/* players table (sidebar) */
.srv-card--players { padding: var(--s-4); }
.player-stats { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
.player-stats th { padding: var(--s-2); border-bottom: 1px solid var(--border); text-align: left; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.player-stats td { position: relative; padding: var(--s-2); border-bottom: 1px solid var(--border); }
.player-stats tbody tr:last-child td { border-bottom: 0; }
.player-stats tbody tr:hover td { background: var(--bg-section); }
.player-stats tbody tr.is-bot { opacity: 0.55; font-style: italic; }
.player-stats--compact tbody { counter-reset: player-rank; }
.player-stats--compact tbody tr { counter-increment: player-rank; }
.player-stats--compact tbody td:first-child::before {
  content: counter(player-rank);
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--bg-section);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-align: center;
  color: var(--text-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.player-stats--compact tbody tr:nth-child(1) td:first-child::before { background: var(--tier-supervip); color: #fff; }
.player-stats--compact tbody tr:nth-child(2) td:first-child::before { background: var(--text-soft); color: #fff; }
.player-stats--compact tbody tr:nth-child(3) td:first-child::before { background: var(--load-3); color: #fff; }
.player-stats--compact tbody tr.is-bot td:first-child::before { background: transparent; border: 1px dashed var(--border); color: var(--text-soft); }
.player-stats__name-cell { font-weight: var(--fw-semibold); }
.player-stats__score, .player-stats__time { text-align: right; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.player-stats__score { width: 50px; }
.player-stats__time { width: 70px; font-weight: var(--fw-medium); color: var(--text-soft); }
.player-stats__bot-badge { display: inline-block; margin-left: var(--s-1); padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; font-size: 8px; font-weight: var(--fw-bold); font-style: normal; letter-spacing: 0.08em; color: var(--text-soft); vertical-align: middle; }
.player-stats--compact th:first-child, .player-stats--compact td:first-child { padding-left: var(--s-3); }
.player-stats--compact th:last-child, .player-stats--compact td:last-child { padding-right: var(--s-3); }

/* collapsible cards: settings + badge */
.srv-settings__body, .srv-badges__body { display: block; margin-top: var(--s-4); }
.srv-settings .srv-card__head, .srv-badges .srv-card__head { margin-bottom: 0; }
[data-collapsible].is-collapsed .srv-settings__body,
[data-collapsible].is-collapsed .srv-badges__body { display: none; }
[data-collapsible].is-collapsed .srv-card__head { padding-bottom: 0; border-bottom: 0; }
[data-collapsible] .btn--icon i { transition: transform 200ms; }
[data-collapsible].is-collapsed .btn--icon i { transform: rotate(-90deg); }

.srv-settings__engine { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bg-section); }
.srv-settings__row { display: flex; flex-direction: column; gap: 2px; }
.srv-settings__label { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.srv-settings__val { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.srv-settings__section { margin-top: var(--s-4); }
.srv-settings__section-title { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.plugin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; }
.plugin-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; padding: 5px var(--s-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--bg-section); font-size: var(--fs-200); }
.plugin-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.plugin-list__name--unknown { font-family: var(--font-mono); font-size: 10px; color: var(--text-soft); }
.plugin-list__ver { flex-shrink: 0; padding: 1px 6px; border-radius: 3px; background: var(--accent-soft); font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); color: var(--accent); white-space: nowrap; }
.plugin-list--core .plugin-list__item { border-left-color: var(--tier-supervip); }
.plugin-list--mod .plugin-list__item { border-left-color: var(--tier-boost); }
.plugin-list--plugin .plugin-list__item { border-left-color: var(--accent); }
.srv-settings__unknown { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--border); }
.srv-settings__unknown summary { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); cursor: pointer; user-select: none; }
.srv-settings__unknown summary:hover { color: var(--text); }
.srv-settings__unknown[open] summary { margin-bottom: var(--s-2); }

.srv-badges__hint { margin: 0 0 var(--s-3); font-size: var(--fs-100); line-height: 1.5; color: var(--text-soft); }
.srv-badges__controls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.srv-badges__ctrl { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 0; min-width: 120px; }
.srv-badges__ctrl > span { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.srv-badges__ctrl .select { height: var(--control-sm); padding: 0 var(--s-8) 0 var(--s-2); font-size: var(--fs-200); }
.srv-badges__preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-section);
  background-image:
    linear-gradient(45deg, var(--dot) 25%, transparent 25%, transparent 75%, var(--dot) 75%),
    linear-gradient(45deg, var(--dot) 25%, transparent 25%, transparent 75%, var(--dot) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  overflow-x: auto;
}
.srv-badges__preview img { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.srv-badges__snippet-wrap { position: relative; }
.srv-badges__snippet { width: 100%; min-height: 70px; padding: var(--s-2) var(--s-10) var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); font-family: var(--font-mono); font-size: var(--fs-100); line-height: 1.5; color: var(--text-muted); resize: vertical; word-break: break-all; }
.srv-badges__copy { position: absolute; top: var(--s-2); right: var(--s-2); width: var(--control-xs); height: var(--control-xs); }


/* ==========================================================================
   23. PROJECTS (/projects, /project/{slug})
   ========================================================================== */
.projects-page { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.projects-head__main { flex: 1; min-width: 0; }

.projects-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.projects-filters__games { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 1; min-width: 0; }
.projects-filters__sort { display: flex; align-items: center; gap: var(--s-2); }
.game-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--control-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-section);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.game-pill:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.game-pill.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.game-pill__count { padding: 1px 6px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.08); font-size: var(--fs-100); font-variant-numeric: tabular-nums; }
.game-pill.is-active .game-pill__count { background: rgba(255,255,255,0.25); }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.project-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.project-card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--bg-section), var(--bg-2)); }
.project-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--text-soft); }
.project-card__logo { position: absolute; left: var(--s-4); bottom: -18px; width: 48px; height: 48px; border: 2px solid var(--card-bg); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow); overflow: hidden; }
.project-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-4); }
.project-card__logo ~ * { }
.project-card__title { margin: var(--s-2) 0 0; font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.3; }
.project-card__title a { color: var(--text); text-decoration: none; }
.project-card__title a:hover { color: var(--accent); }
.project-card__games { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.game-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); }
.game-chip--lg { height: 26px; padding: 0 var(--s-3); font-size: var(--fs-200); }
.project-card__desc { flex: 1; margin: 0; font-size: var(--fs-300); line-height: 1.45; color: var(--text-muted); }
.project-card__meta { display: flex; gap: var(--s-4); margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--border); font-size: var(--fs-200); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.project-card__meta i.fa { margin-right: var(--s-1); opacity: 0.7; }
.project-card__meta .fa-star { color: var(--accent-2); }
.project-card__actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.project-card__actions .btn { flex: 1; }

/* detail page */
.project-page { padding-top: var(--s-4); padding-bottom: var(--s-8); }
.project-hero { margin-bottom: var(--s-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.project-hero__banner { width: 100%; aspect-ratio: 32 / 9; overflow: hidden; background: linear-gradient(135deg, var(--bg-section), var(--bg-2)); }
.project-hero__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-hero__main { display: grid; grid-template-columns: 88px 1fr 240px; gap: var(--s-5); align-items: flex-start; padding: var(--s-5); }
.project-hero__logo { width: 88px; height: 88px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); overflow: hidden; }
.project-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__logo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--text-soft); }
.project-hero__id { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.project-hero__title { margin: 0; font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.project-hero__games, .project-hero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.project-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--fs-300); color: var(--text-muted); }
.project-hero__meta i.fa { margin-right: var(--s-1); opacity: 0.7; }
.project-hero__side { display: flex; flex-direction: column; gap: var(--s-3); }
.project-hero__tags .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); }
.project-hero__tags .tag--primary { font-weight: var(--fw-bold); }
@media (max-width: 767px) {
  .project-hero__main { grid-template-columns: 64px 1fr; gap: var(--s-4); padding: var(--s-4); }
  .project-hero__logo { width: 64px; height: 64px; }
  .project-hero__side { grid-column: 1 / -1; }
  .project-hero__title { font-size: var(--fs-600); }
}

.vote-box { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); }
.vote-box__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control); height: var(--control);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.vote-box__btn:hover:not(:disabled) { border-color: var(--accent); }
.vote-box__btn--up:hover:not(:disabled) { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.vote-box__btn--down:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.vote-box__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vote-box__score { flex: 1; text-align: center; }
.vote-box__num { display: block; font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.vote-box__label { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); }

.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); }
@media (max-width: 1023px) { .project-grid { grid-template-columns: 1fr; } }
.project-grid .card__title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-500); }
.project-grid .card__title i.fa { color: var(--accent); }
.mt-4 { margin-top: var(--s-4); }
.project-attrs { margin: 0; padding: 0; }
.project-attrs__row { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.project-attrs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.project-attrs__row:first-child { padding-top: 0; }
.project-attrs__key { margin: 0; font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text-muted); }
.project-attrs__val { margin: 0; font-size: var(--fs-300); color: var(--text); word-break: break-word; }
@media (max-width: 480px) { .project-attrs__row { grid-template-columns: 1fr; gap: var(--s-1); } }
.project-links { margin: 0 calc(-1 * var(--s-2)); padding: 0; list-style: none; }
.project-links a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; transition: background var(--transition), color var(--transition); }
.project-links a:hover { background: var(--bg-section); color: var(--accent); text-decoration: none; }
.project-links a > i.fa:first-child { width: 24px; text-align: center; color: var(--accent); }
.project-links a > span { flex: 1; }
.project-links__ext { font-size: 11px; opacity: 0.5; }

/* project servers — compact cards with the map faded in behind */
.project-servers { margin-bottom: var(--s-6); }
.project-servers__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); font-size: var(--fs-600); font-weight: var(--fw-bold); }
.project-servers__title i.fa { color: var(--accent); }
.project-servers__count { display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: var(--bg-section); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text); }
.project-servers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.psrv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.psrv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.psrv-card__bg { position: absolute; inset: 0; z-index: 0; background-image: var(--srv-card-map, none); background-size: cover; background-position: center; opacity: 0.18; pointer-events: none; transition: opacity var(--transition); }
.psrv-card:hover .psrv-card__bg { opacity: 0.3; }
.psrv-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--card-bg) 0%, transparent 60%); }
.psrv-card > *:not(.psrv-card__bg) { position: relative; z-index: 1; }
.psrv-card.is-offline { opacity: 0.7; filter: grayscale(40%); }
.psrv-card.is-offline:hover { opacity: 1; filter: none; }
.psrv-card__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.psrv-card__status { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); }
.psrv-card.is-online .psrv-card__status { color: var(--success); }
.psrv-card__game { padding: 3px var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-size: 10px; letter-spacing: 0.02em; color: var(--text-muted); }
.psrv-card__name { margin: 0; font-size: var(--fs-400); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psrv-card__addr { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-200); color: var(--text-muted); }
.psrv-card__flag { width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
.psrv-card__addr code { flex: 1; min-width: 0; padding: 2px var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psrv-card__stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-200); color: var(--text-muted); }
.psrv-card__stats i.fa { margin-right: var(--s-1); opacity: 0.7; }
.psrv-card__map code { font-family: var(--font-mono); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text); }
.psrv-card__players { font-variant-numeric: tabular-nums; }
.psrv-card__players strong { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }
.psrv-card__offline-tag { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-100); color: var(--text-soft); }
.psrv-card__bar { height: 4px; margin-top: 2px; border-radius: var(--radius-pill); background: var(--bg-2); overflow: hidden; }
.psrv-card__bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--success); transition: width 250ms ease; }


/* ==========================================================================
   24. MSTATS (/mstats)
   ========================================================================== */
.mstats-page { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.mstats-cron { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control); padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.mstats-cron strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mstats-cron--ok i.fa { color: var(--success); }
.mstats-cron--stale { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.mstats-cron--stale i.fa { color: var(--warning); }
.mstats-cron__warn { font-weight: var(--fw-bold); }
.mstats-section-title { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-6) 0 var(--s-3); padding-left: var(--s-2); border-left: 3px solid var(--accent); font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.mstats-section-title i.fa { color: var(--accent); }
.mstats-section-title--inline { margin-top: 0; }

.mstats-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.mstats-tile {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mstats-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mstats-tile--online  { border-left-color: var(--success); }
.mstats-tile--offline { border-left-color: var(--danger); }
.mstats-tile--players { border-left-color: var(--accent); }
.mstats-tile__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); background: var(--bg-section); color: var(--text-muted); font-size: 16px; }
.mstats-tile--online  .mstats-tile__icon { background: var(--success-soft); color: var(--success); font-size: 11px; }
.mstats-tile--offline .mstats-tile__icon { background: var(--danger-soft);  color: var(--danger); }
.mstats-tile--players .mstats-tile__icon { background: var(--accent-soft);  color: var(--accent); }
.mstats-tile__body { flex: 1; min-width: 0; }
.mstats-tile__val { font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mstats-tile__label { margin-top: var(--s-1); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mstats-tile__sub { margin-top: var(--s-1); font-size: var(--fs-100); color: var(--text-soft); }

.mstats-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.mstats-tier { position: relative; padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: inset 3px 0 0 0 var(--tc, var(--accent)), var(--shadow-sm); overflow: hidden; }
.mstats-tier__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc, var(--text-muted)); }
.mstats-tier__count { font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mstats-tier__bar { height: 4px; margin-top: var(--s-3); border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.mstats-tier__bar-fill { height: 100%; border-radius: 2px; background: var(--tc, var(--accent)); transition: width 200ms; }
.mstats-tier__hint { margin-top: var(--s-3); font-size: var(--fs-100); font-style: italic; color: var(--text-soft); }

.mstats-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.mstats-game { padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.mstats-game__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.mstats-game__icon { width: 22px; height: 22px; flex-shrink: 0; }
.mstats-game__name { font-size: var(--fs-300); font-weight: var(--fw-bold); }
.mstats-game__slug { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mstats-game__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); }
.mstats-game__val { font-size: var(--fs-500); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mstats-game__val--online { color: var(--success); }
.mstats-game__lbl { margin-top: 2px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.mstats-game__bar { height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.mstats-game__bar-fill { height: 100%; border-radius: 2px; background: var(--success); transition: width 200ms; }

.mstats-table-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; }
.mstats-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.mstats-table th { padding: var(--s-2) var(--s-3); text-align: left; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); background: var(--bg-section); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mstats-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.mstats-table .num { text-align: right; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.mstats-table .rank { width: 36px; text-align: center; font-weight: var(--fw-semibold); color: var(--text-soft); }
.mstats-table tbody tr:last-child td { border-bottom: 0; }
.mstats-table tbody tr:hover td { background: var(--bg-section); }
.mstats-table code { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text); }
.mstats-table__name a { font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
.mstats-table__name a:hover { color: var(--accent); }
.mstats-table__pct { display: inline-block; margin-left: var(--s-1); padding: 1px 6px; border-radius: 3px; background: var(--accent-soft); font-size: 10px; font-weight: var(--fw-bold); color: var(--accent); }
.mstats-flag { width: 18px; height: auto; margin-right: var(--s-2); border-radius: 2px; vertical-align: middle; }
.mstats-country { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-width: 0; white-space: nowrap; }
.mstats-country__flag { display: block; width: 20px; height: 14px; flex-shrink: 0; border-radius: 2px; }
.mstats-country__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mstats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); }
.mstats-col { display: flex; flex-direction: column; }
.mstats-empty { padding: var(--s-6) var(--s-4); text-align: center; background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius-lg); font-size: var(--fs-300); color: var(--text-soft); }
@media (max-width: 1023px) { .mstats-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mstats-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mstats-cols { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .mstats-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mstats-hero, .mstats-tiers { grid-template-columns: 1fr; } .mstats-table th, .mstats-table td { padding: var(--s-2); } }
/* the "top servers now" table on a phone: keep the name + address, drop map */
@media (max-width: 767px) { .mstats-table--servers th:nth-child(4), .mstats-table--servers td:nth-child(4) { display: none; } }


/* ==========================================================================
   25. PRICE (/price) — support card + tariff cards
   The tariff row is deliberately dark in both themes (a "premium" strip);
   --ink / --on-ink are the tokens for that.
   ========================================================================== */
.price-page { padding-top: var(--s-6); padding-bottom: var(--s-8); }
.support-card { margin-bottom: var(--s-6); padding: var(--s-8); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.support-card__title { margin: 0 0 var(--s-4); font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.support-card__lead { margin: 0 0 var(--s-3); font-size: var(--fs-400); line-height: 1.65; color: var(--text-muted); }
.support-card__lead strong { color: var(--text); }
.support-card__h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.support-card__bonuses { display: flex; flex-direction: column; gap: var(--s-2); margin: 0 0 var(--s-2); padding-left: var(--s-6); list-style: disc; }
.support-card__bonuses li { font-size: var(--fs-400); line-height: 1.55; color: var(--text-muted); }
.support-card__bonuses strong { letter-spacing: 0.02em; }
.support-card__sep { margin: var(--s-6) 0 0; }
.support-card__how-lead { margin: 0 0 var(--s-3); font-size: var(--fs-400); color: var(--text-muted); }
.support-card__how-lead strong { color: var(--text); }
.support-card__methods { display: flex; flex-direction: column; padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); }
.support-method { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-300); line-height: 1.55; color: var(--text-muted); }
.support-method:last-child { border-bottom: 0; }
.support-method strong { margin-right: var(--s-1); color: var(--text); }
.support-card__legal { margin: var(--s-5) 0 0; font-size: var(--fs-300); line-height: 1.6; color: var(--text-soft); }
@media (max-width: 767px) { .support-card { padding: var(--s-5) var(--s-4); } }

.tariff-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.tariff-card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--ink); color: var(--on-ink); box-shadow: inset 4px 0 0 0 var(--tc, var(--accent)), var(--shadow-sm); overflow: hidden; }
.tariff-card__name { font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc, var(--on-ink)); }
.tariff-card__desc { flex-grow: 1; font-size: var(--fs-300); line-height: 1.5; color: var(--on-ink-muted); }
.tariff-card__price { margin-top: var(--s-2); font-size: var(--fs-600); font-weight: var(--fw-bold); color: var(--tc, var(--on-ink)); font-variant-numeric: tabular-nums; }
.tariff-card__cur { margin-left: 1px; font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.tariff-card__per { margin-left: var(--s-1); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--on-ink-muted); }
.tariff-cta { display: flex; justify-content: center; margin-top: var(--s-2); }
.tariff-cta .btn { min-width: 240px; }
@media (max-width: 1023px) { .tariff-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tariff-cards { grid-template-columns: 1fr; } }


/* ==========================================================================
   26. HOSTING RATING (/hosting, /hosting/{slug})
   ========================================================================== */
.hosting-catalog { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.hosting-catalog__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-6); align-items: start; }
@media (max-width: 1023px) { .hosting-catalog__layout { grid-template-columns: 1fr; } }
.hosting-catalog__head { display: block; }
.hosting-catalog__counters { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-300); color: var(--text-soft); }
.hosting-catalog__counters i.fa { margin-right: var(--s-1); }
.hosting-catalog__counters strong { color: var(--text); }
.hosting-catalog__active-filter { display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.hosting-catalog__active-filter a { color: var(--accent); opacity: 0.6; text-decoration: none; }
.hosting-catalog__active-filter a:hover { opacity: 1; }

.hosting-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hosting-toolbar__select-wrap { position: relative; }
@media (max-width: 767px) {
  .hosting-toolbar { grid-template-columns: 1fr 1fr; }
  .hosting-toolbar__search { grid-column: 1 / -1; }
}

.hosting-tags-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.hosting-chip { display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.hosting-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.hosting-chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
/* inline flow, not flex: the link is followed by ", чтобы…" and a flex gap
   would push the comma onto its own line on phones */
.hosting-auth-prompt { display: block; margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid transparent; border-left: 4px solid var(--warning); border-radius: var(--radius); background: var(--warning-soft); font-size: var(--fs-300); line-height: 1.5; color: var(--warning); }
.hosting-auth-prompt i.fa { margin-right: var(--s-2); }
.hosting-auth-prompt a { font-weight: var(--fw-bold); color: var(--warning); text-decoration: underline; }

.hosting-cards { display: flex; flex-direction: column; gap: var(--s-3); }
.hosting-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.hosting-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.hosting-card--featured { border-color: var(--accent-2); box-shadow: inset 4px 0 0 0 var(--accent-2), var(--shadow-sm); }
@media (max-width: 767px) { .hosting-card { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4); } }
.hosting-card__logo-col { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.hosting-card__logo, .hosting-show__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; border-radius: var(--radius); background: var(--ink); overflow: hidden; text-decoration: none; }
.hosting-card__logo img, .hosting-show__logo img { max-width: 90%; max-height: 80%; object-fit: contain; }
.hosting-card__initial, .hosting-show__initial { font-size: 36px; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--on-ink); }
.hosting-card__website { width: 100%; }
.hosting-card__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.hosting-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.hosting-card__name { font-size: var(--fs-600); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.hosting-card__name:hover { color: var(--accent); text-decoration: none; }
.hosting-card__category { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--accent); text-decoration: none; transition: background var(--transition); }
.hosting-card__category:hover { background: var(--accent-strong); text-decoration: none; }
.hosting-card__description { margin: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.hosting-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.hosting-card__tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); text-decoration: none; transition: background var(--transition), color var(--transition); }
.hosting-card__tag:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.hosting-card__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; margin-top: auto; padding-top: var(--s-2); }
@media (max-width: 767px) { .hosting-card__footer { grid-template-columns: 1fr; gap: var(--s-3); } }
.hosting-card__rating { min-width: 0; }
.hosting-card__bar, .hosting-show__bar { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--danger-soft); overflow: hidden; }
.hosting-card__bar-fill, .hosting-show__bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--success); transition: width 240ms; }
.hosting-card__bar-label, .hosting-show__bar-label { margin-top: var(--s-1); font-size: var(--fs-100); color: var(--text-soft); }
.hosting-card__vote-cluster, .hosting-show__vote-cluster { display: flex; gap: var(--s-2); }
.hosting-vote {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--control-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hosting-vote i.fa { font-size: 12px; }
.hosting-vote:hover:not(:disabled) { background: var(--bg-section); color: var(--text); }
.hosting-vote--up.is-active   { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.hosting-vote--down.is-active { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.hosting-vote:disabled { opacity: 0.6; cursor: wait; }
.hosting-card__updated { font-size: var(--fs-100); color: var(--text-soft); white-space: nowrap; }
.hosting-card__updated i.fa { margin-right: 3px; }

.hosting-catalog__side { display: flex; flex-direction: column; gap: var(--s-3); }
.hosting-side-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.hosting-side-card__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.hosting-side-card__head i.fa { color: var(--accent); }
.hosting-side-card__body { padding: var(--s-2); }
.hosting-side-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius); font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); }
.hosting-side-row i.fa { margin-right: var(--s-1); font-size: 12px; color: var(--text-soft); }
.hosting-side-row:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.hosting-side-row.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.hosting-side-row.is-active i.fa { color: var(--accent); }
.hosting-side-row__count { min-width: 24px; padding: 1px var(--s-2); border-radius: var(--radius-pill); background: var(--bg-section); font-size: var(--fs-100); font-weight: var(--fw-bold); text-align: center; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.hosting-side-row.is-active .hosting-side-row__count { background: var(--accent); color: var(--on-accent); }
.hosting-side-card__about { padding: var(--s-3) var(--s-4); font-size: var(--fs-200); line-height: 1.55; color: var(--text-muted); }
.hosting-side-card__about p { margin: 0 0 var(--s-2); }
.hosting-side-card__about p:last-child { margin: 0; }
.hosting-empty { padding: var(--s-16) var(--s-5); text-align: center; background: var(--card-bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.hosting-empty__icon { display: block; margin-bottom: var(--s-3); font-size: 48px; color: var(--text-soft); }
.hosting-empty__title { margin-bottom: var(--s-1); font-size: var(--fs-500); font-weight: var(--fw-bold); }
.hosting-empty__lead { font-size: var(--fs-300); color: var(--text-soft); }

/* detail */
.hosting-show { max-width: calc(var(--container-narrow) + 180px); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8); }
.hosting-show__crumb { margin-bottom: var(--s-3); font-size: var(--fs-300); }
.hosting-show__crumb a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); text-decoration: none; }
.hosting-show__crumb a:hover { color: var(--accent); }
.hosting-show__card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-6); margin-bottom: var(--s-4); padding: var(--s-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (max-width: 767px) { .hosting-show__card { grid-template-columns: 1fr; padding: var(--s-4); } }
.hosting-show__logo { height: 140px; }
.hosting-show__initial { font-size: 56px; }
.hosting-show__head { min-width: 0; }
.hosting-show__name { margin: 0 0 var(--s-3); font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.hosting-show__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.hosting-show__lead { margin: 0; font-size: var(--fs-400); line-height: 1.5; color: var(--text-muted); }
.hosting-show__rating { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; padding-top: var(--s-4); border-top: 1px dashed var(--border); }
.hosting-show__bar { height: 8px; }
.hosting-show__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.hosting-show__tags .hosting-card__tag { height: 24px; font-size: var(--fs-100); }
.hosting-show__body { padding: var(--s-5) var(--s-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-size: var(--fs-400); line-height: 1.65; color: var(--text-muted); }
.hosting-show__body p { margin: 0 0 var(--s-3); }
.hosting-show__body p:last-child { margin: 0; }


/* ==========================================================================
   27. AUTH PAGES (/account/login, /register, /recovery) + LOGIN MODAL
   One form module (.auth-form) drives three page shells and the header
   modal, so the login flow feels identical wherever it is opened from.
   ========================================================================== */
.auth-page {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-4) var(--s-16);
}
.auth-page--narrow { max-width: 460px; }
/* soft brand glow behind the card */
.auth-page::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 720px; max-width: 120%; height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-strong) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.auth-page > * { position: relative; z-index: 1; }

.auth-badge {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  font-size: 20px;
  box-shadow: 0 8px 20px var(--accent-strong);
}
.auth-page__header { margin-bottom: var(--s-6); }
.auth-page__title {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text);
}
.auth-page__subtitle { margin: 0; font-size: var(--fs-400); line-height: 1.55; color: var(--text-muted); }

.auth-card {
  position: relative;
  overflow: hidden;
  padding: var(--s-8) var(--s-6);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.auth-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 70%, transparent);
}
.auth-card__head { margin-bottom: var(--s-6); }

.auth-page__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--s-8);
  align-items: flex-start;
}

.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .field { margin-bottom: 0; }
.auth-form__footer {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-300);
  color: var(--text-muted);
}
.auth-form__footer a { font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.auth-form__footer a:hover { text-decoration: underline; }
.auth-form--compact { gap: var(--s-3); }
.auth-form--compact .auth-form__footer { padding-top: var(--s-3); }

/* label with a secondary link on the right ("Забыли пароль?") */
.field__label--row { display: flex; justify-content: space-between; align-items: baseline; }
.field__label-link { font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--accent); text-decoration: none; }
.field__label-link:hover { text-decoration: underline; }
.field__req { margin-left: 2px; color: var(--danger); font-weight: var(--fw-semibold); }

/* inline ✓ / ✕ status inside the input suffix slot */
.field-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-xs); height: var(--control-xs);
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.field-status--ok   { color: var(--success); }
.field-status--err  { color: var(--danger); }
.field-status--warn { color: var(--warning); }

/* password strength meter: 5 stages, .pw-meter__bar--s0…s4 */
.pw-meter {
  height: 4px;
  margin-top: var(--s-2);
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
}
.pw-meter__bar { height: 100%; width: 0; border-radius: 2px; transition: width 180ms ease, background 180ms ease; }
.pw-meter__bar--s0 { background: var(--danger); }
.pw-meter__bar--s1 { background: var(--load-3); }
.pw-meter__bar--s2 { background: var(--load-2); }
.pw-meter__bar--s3 { background: var(--success); }
.pw-meter__bar--s4 { background: var(--accent); }
.pw-meter__label { margin-top: var(--s-1); min-height: 14px; font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* register page: right-hand "why register" panel */
.auth-info {
  position: sticky;
  top: calc(var(--header-stack) + var(--s-4));
  padding: var(--s-6) var(--s-5);
  background:
    radial-gradient(130% 90% at 100% 0%, var(--accent-soft) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.auth-info__title {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.auth-info__title i.fa { color: var(--accent); }
.auth-info__art { margin: var(--s-1) 0 var(--s-4); text-align: center; }
.auth-info__art img { height: 130px; width: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2)); user-select: none; -webkit-user-drag: none; }
.auth-info__lead { margin: 0 0 var(--s-4); font-size: var(--fs-300); line-height: 1.55; color: var(--text-muted); }
.auth-info__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.auth-info__bullets li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-300); line-height: 1.45; color: var(--text-muted); }
.auth-info__bullets i.fa { flex-shrink: 0; margin-top: 2px; color: var(--success); }

@media (max-width: 1023px) {
  .auth-page__cols { grid-template-columns: 1fr; gap: var(--s-5); }
  .auth-info { position: static; }
  .auth-info__art img { height: 110px; }
}
@media (max-width: 767px) {
  .auth-page { padding: var(--s-6) var(--s-3) var(--s-10); }
  .auth-card { padding: var(--s-6) var(--s-4); }
  .auth-page__title { font-size: var(--fs-700); }
}

/* ==========================================================================
   28. CABINET SHELL — sidebar layout, user box, nav, page head, cards,
       empty states, tables, pager, form rows
   Desktop: 260px sticky sidebar + fluid main. Below 1024px the sidebar
   collapses into a compact identity strip + a horizontally scrolling nav,
   so the page content starts right under the header instead of one
   screen down.
   ========================================================================== */
.cab-wrap {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-6);
  padding-bottom: var(--s-12);
}
.cab-side {
  position: sticky;
  top: calc(var(--header-stack) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
.cab-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-5); }

/* --- user box ------------------------------------------------------- */
.cab-userbox {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cab-userbox__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-strong) 0%, transparent 60%),
    linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--border);
}
.cab-userbox__avatar {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg,
    hsl(var(--avatar-hue, 210), 60%, 55%) 0%,
    hsl(var(--avatar-hue, 210), 70%, 38%) 100%);
  box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,0.25);
  color: #fff;
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cab-userbox__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cab-userbox__name {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
}
.cab-userbox__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-userbox__crown {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cab-userbox__email,
.cab-userbox__since {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-100);
  line-height: 1.3;
  color: var(--text-muted);
  min-width: 0;
}
.cab-userbox__email i.fa,
.cab-userbox__since i.fa { width: 12px; font-size: 11px; color: var(--text-soft); text-align: center; }
.cab-userbox__email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cab-userbox__balance-wrap { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.cab-userbox__balance-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cab-userbox__balance-label i.fa { color: var(--accent); font-size: 11px; }
.cab-userbox__balance-amt { display: flex; align-items: baseline; gap: var(--s-1); margin-bottom: var(--s-1); }
.cab-userbox__amount {
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cab-userbox__currency { font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--text-soft); }

/* --- nav ------------------------------------------------------------ */
.cab-nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cab-nav__group { padding: var(--s-1) 0; border-bottom: 1px solid var(--border); }
.cab-nav__group:last-of-type { border-bottom: 0; }
.cab-nav__group-title {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cab-nav__group-title i.fa { font-size: 11px; }
.cab-nav__group.is-open .cab-nav__group-title { color: var(--accent); }
.cab-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cab-nav__list li { margin: 0; }
.cab-nav__link {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--control);
  padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--radius);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.cab-nav__link i.fa {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  color: var(--text-soft);
  font-size: 13px;
  transition: background var(--transition), color var(--transition);
}
.cab-nav__link:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.cab-nav__link:hover i.fa { background: var(--bg-2); color: var(--text); }
.cab-nav__link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.cab-nav__link.is-active i.fa { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 10px var(--accent-strong); }
.cab-nav__link.is-active::before {
  content: "";
  position: absolute; left: -8px; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.cab-nav__link.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.cab-nav__badge {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cab-nav__badge--new { background: var(--success); color: #fff; }
.cab-nav__footer { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.cab-nav__link--danger { color: var(--danger); }
.cab-nav__link--danger i.fa { color: var(--danger); background: var(--danger-soft); }
.cab-nav__link--danger:hover { background: var(--danger-soft); color: var(--danger); }
.cab-nav__link--danger:hover i.fa { background: var(--danger); color: #fff; }

/* --- page head ------------------------------------------------------ */
.cab-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  align-items: start;
}
.cab-page-head h1 {
  grid-column: 1;
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}
.cab-page-head h1 > i.fa {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
}
.cab-page-head__lead {
  grid-column: 1;
  margin: 0;
  max-width: 760px;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-muted);
}
.cab-page-head__lead strong { color: var(--text); font-weight: var(--fw-semibold); }
.cab-page-head__actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cab-page-head__count,
.cab-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.cab-page-head h1 .status-pill { margin-left: var(--s-1); }

/* section anchor between blocks on one page (balance page etc.) */
.cab-section-title {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-3) 0 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.cab-section-title i.fa {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
}
.cab-section-title .cab-section-count { min-width: 22px; height: 22px; font-size: var(--fs-100); }

/* --- generic card --------------------------------------------------- */
.cab-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
}
.cab-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.cab-card__title {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.cab-card__title i.fa { color: var(--accent); font-size: 14px; }
.cab-card__hint {
  margin-left: auto;
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.cab-card__hint:hover { text-decoration: underline; }

/* --- empty states --------------------------------------------------- */
.cab-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-5);
  text-align: center;
  color: var(--text-soft);
}
.cab-empty__icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-soft);
  font-size: 26px;
}
.cab-empty__title { font-size: var(--fs-500); font-weight: var(--fw-semibold); color: var(--text); }
.cab-empty__lead,
.cab-empty__text { max-width: 420px; margin: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.cab-empty .btn { margin-top: var(--s-3); }
.cab-empty--inline {
  background: var(--card-bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.cab-empty--soft { padding: var(--s-6) var(--s-4); background: transparent; border: 0; }

/* --- tables (invoices, balance log, projects) ----------------------- */
.cab-table-wrap {
  overflow-x: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cab-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.cab-table th {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.cab-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.cab-table tbody tr:last-child td { border-bottom: 0; }
.cab-table tbody tr:hover td { background: var(--bg-section); }
.cab-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.cab-table .rank { width: 64px; color: var(--text-soft); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cab-table__id { color: var(--accent); font-weight: var(--fw-bold); text-decoration: none; font-variant-numeric: tabular-nums; }
.cab-table__id:hover { text-decoration: underline; }
.cab-table__method {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
}
.cab-table__cur { margin-left: 2px; font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-soft); }
.cab-table__action { width: 1%; white-space: nowrap; text-align: right; }
.cab-table__action form { display: inline-flex; margin: 0; }
.cab-table__title { font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); }
.cab-table__title:hover { color: var(--accent); text-decoration: none; }
.cab-table__title i.fa { font-size: 11px; color: var(--text-soft); }
.cab-table__sub { margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--text-soft); }
.cab-table__count { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cab-table__count i.fa { color: var(--text-soft); font-size: 12px; }
.amount-delta { font-variant-numeric: tabular-nums; }
.amount-delta--plus  { color: var(--success); }
.amount-delta--minus { color: var(--danger); }

.pager { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pager__link:hover { background: var(--bg-section); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.pager__link.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* --- form rows (label | field), used by profile + project form ------ */
.form-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-1) var(--s-5);
  align-items: start;
  margin-bottom: var(--s-4);
}
.form-row:last-child { margin-bottom: 0; }
.form-row__label {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: 10px;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text);
}
.form-row__label i.fa { width: 16px; text-align: center; color: var(--accent); font-size: 13px; }
.form-row__label .text-danger { font-weight: var(--fw-bold); }
.form-row__field { min-width: 0; }
.form-row__hint { margin-top: var(--s-1); font-size: var(--fs-200); line-height: 1.45; color: var(--text-soft); }
.form-row__error { display: flex; align-items: center; gap: 5px; margin-top: var(--s-1); font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--danger); }
.form-row__error::before { content: "\f071"; font-family: FontAwesome; font-size: 11px; }
.form-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* section titles inside a long form card */
.project-form__section-title {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--text);
}
.project-form__section-title > i.fa {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent) !important;
  font-size: 13px;
}
.project-form__section-title > .text-danger { font-size: var(--fs-400); margin-left: -4px; }
.project-form > .project-form__section-title:first-of-type,
.cab-card > .project-form__section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.project-form__section-title + p,
.project-form__section-lead { margin: calc(-1 * var(--s-2)) 0 var(--s-4); font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }

/* --- responsive shell ----------------------------------------------- */
@media (max-width: 1023px) {
  .cab-wrap { grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-4); padding-bottom: var(--s-8); }
  .cab-side { position: static; gap: var(--s-3); }

  /* identity strip: avatar + name on the left, balance + top-up on the right */
  .cab-userbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .cab-userbox__top { padding: var(--s-3) var(--s-4); border-bottom: 0; border-right: 1px solid var(--border); }
  .cab-userbox__avatar { width: 44px; height: 44px; font-size: 15px; }
  .cab-userbox__since { display: none; }
  .cab-userbox__balance-wrap { flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .cab-userbox__balance-label { display: none; }
  .cab-userbox__balance-amt { margin: 0; }
  .cab-userbox__amount { font-size: var(--fs-600); }
  .cab-userbox__balance-wrap .btn { width: auto; padding: 0 var(--s-3); }

  /* nav becomes one scrollable row of chips */
  .cab-nav { flex-direction: row; align-items: center; gap: var(--s-1); padding: var(--s-1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cab-nav::-webkit-scrollbar { display: none; }
  .cab-nav__group { display: contents; }
  .cab-nav__group-title { display: none; }
  .cab-nav__list { flex-direction: row; gap: var(--s-1); }
  .cab-nav__link { height: 36px; padding: 0 var(--s-3) 0 var(--s-1); white-space: nowrap; gap: var(--s-2); }
  .cab-nav__link i.fa { width: 26px; height: 26px; }
  .cab-nav__link.is-active::before { display: none; }
  .cab-nav__badge { margin-left: 0; }
  .cab-nav__footer { flex-direction: row; gap: var(--s-1); margin: 0 0 0 auto; padding: 0 0 0 var(--s-1); border-top: 0; border-left: 1px solid var(--border); }
  .cab-nav__footer .cab-nav__link span { display: none; }
  .cab-nav__footer .cab-nav__link { padding: 0 var(--s-1); }
}
@media (max-width: 767px) {
  .cab-page-head { grid-template-columns: 1fr; }
  .cab-page-head__actions { grid-column: 1; grid-row: auto; }
  .cab-page-head__actions .btn { flex: 1 1 auto; }
  .cab-page-head h1 { font-size: var(--fs-600); }
  .cab-page-head h1 > i.fa { width: 34px; height: 34px; font-size: 15px; }
  .cab-card { padding: var(--s-4); }
  .cab-empty { padding: var(--s-8) var(--s-4); }
  .form-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .form-row__label { padding-top: 0; }
  .form-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .cab-userbox { grid-template-columns: 1fr; }
  .cab-userbox__top { border-right: 0; border-bottom: 1px solid var(--border); }
  .cab-userbox__balance-wrap { justify-content: space-between; }
}


/* ==========================================================================
   29. CABINET → DASHBOARD (stats, active services, recent operations)
   ========================================================================== */
.cab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.cab-stat {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background:
    radial-gradient(90% 70% at 100% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cab-stat:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.cab-stat__label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cab-stat__label i.fa {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  letter-spacing: 0;
  box-shadow: 0 6px 14px var(--accent-strong);
}
.cab-stat__value {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--fs-900);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cab-stat__cur { font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--text-soft); }
.cab-stat__foot { margin-top: auto; font-size: var(--fs-200); }
.cab-stat__foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: var(--fw-semibold); text-decoration: none; }
.cab-stat__foot a:hover { text-decoration: underline; }

.cab-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.cab-grid-2 > .cab-card { display: flex; flex-direction: column; min-height: 280px; }
.cab-grid-2 > .cab-card .cab-empty { flex: 1; justify-content: center; padding: var(--s-6) var(--s-4); }
.cab-grid-2 > .cab-card .cab-empty__icon { width: 56px; height: 56px; font-size: 22px; }

/* tier pill (dashboard + server cards) — colour passed via --tier-color */
.tier-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 var(--s-2);
  border: 1px solid color-mix(in srgb, var(--tier-color, var(--accent)) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tier-color, var(--accent)) 14%, transparent);
  color: var(--tier-color, var(--accent));
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-pill__days {
  margin-left: 4px; padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--tier-color, var(--accent)) 30%, transparent);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.cab-svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cab-svc {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-section);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.cab-svc:hover { border-color: var(--accent); background: var(--card-bg); }
.cab-svc__name { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
.cab-svc__name:hover { color: var(--accent); text-decoration: none; }
.cab-svc__addr { display: inline-flex; align-items: center; gap: var(--s-1); }
.cab-svc__tiers { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }

.cab-tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cab-tx {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-section);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.cab-tx:hover { border-color: var(--accent); background: var(--card-bg); }
.cab-tx::before {
  content: "\f062";
  grid-column: 1; grid-row: 1 / span 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-family: FontAwesome;
  font-size: 13px;
}
.cab-tx__title { grid-column: 2; font-size: var(--fs-300); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text); }
.cab-tx__date { grid-column: 2; font-size: var(--fs-100); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cab-tx__amount { grid-column: 3; grid-row: 1 / span 2; font-size: var(--fs-400); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cab-tx__amount--paid    { color: var(--success); }
.cab-tx__amount--pending { color: var(--text-soft); }

@media (max-width: 1023px) { .cab-grid-2 { grid-template-columns: 1fr; } .cab-grid-2 > .cab-card { min-height: 0; } }
@media (max-width: 767px) {
  .cab-stats { grid-template-columns: 1fr; gap: var(--s-3); }
  .cab-stat { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--s-4); }
  .cab-stat__label { flex: 1 1 100%; }
  .cab-stat__value { font-size: var(--fs-800); }
  .cab-stat__foot { margin: 0 0 0 auto; }
}


/* ==========================================================================
   30. CABINET → MY SERVERS (filter toolbar + server cards)
   ========================================================================== */
.server-filter {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.server-filter__search { position: relative; display: flex; align-items: center; }
.server-filter__search i.fa-search { position: absolute; left: var(--s-3); font-size: 14px; color: var(--text-soft); pointer-events: none; }
.server-filter__search input {
  flex: 1;
  height: var(--control);
  padding: 0 var(--s-10) 0 var(--s-10);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-400);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.server-filter__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.server-filter__search:focus-within i.fa-search { color: var(--accent); }
.server-filter__clear {
  position: absolute; right: 6px;
  width: var(--control-xs); height: var(--control-xs);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  text-decoration: none;
}
.server-filter__clear:hover { background: var(--bg-section); color: var(--text); }
.server-filter__row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.server-filter__label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-soft);
  user-select: none;
}
.server-filter__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.server-filter__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-sm); padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.server-filter__pill:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.server-filter__pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.server-filter__pill--tier-top5      { border-color: color-mix(in srgb, var(--tier-premium)  45%, transparent); }
.server-filter__pill--tier-super_vip { border-color: color-mix(in srgb, var(--tier-supervip) 45%, transparent); }
.server-filter__pill--tier-vip       { border-color: color-mix(in srgb, var(--tier-vip)      45%, transparent); }
.server-filter__pill--tier-boost     { border-color: color-mix(in srgb, var(--tier-boost)    45%, transparent); }
.server-filter__pill--tier-top5.is-active      { background: var(--tier-premium);  border-color: var(--tier-premium); }
.server-filter__pill--tier-super_vip.is-active { background: var(--tier-supervip); border-color: var(--tier-supervip); }
.server-filter__pill--tier-vip.is-active       { background: var(--tier-vip);      border-color: var(--tier-vip); }
.server-filter__pill--tier-boost.is-active     { background: var(--tier-boost);    border-color: var(--tier-boost); }
.server-filter__dot { font-size: 8px !important; }
.server-filter__dot--online  { color: var(--success); }
.server-filter__dot--offline { color: var(--danger); }
.server-filter__pill--online.is-active  { background: var(--success); border-color: var(--success); }
.server-filter__pill--offline.is-active { background: var(--danger);  border-color: var(--danger); }
.server-filter__pill--online.is-active .server-filter__dot,
.server-filter__pill--offline.is-active .server-filter__dot { color: rgba(255,255,255,0.85); }
.server-filter__pill--game { padding: 0 var(--s-2) 0 6px; }
.server-filter__icon { width: 20px; height: 20px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.server-filter__pill i.fa-th-large { font-size: 11px; color: var(--text-soft); }
.server-filter__pill.is-active i.fa-th-large { color: rgba(255,255,255,0.8); }
.server-filter__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.server-filter__pill.is-active .server-filter__count { background: rgba(255,255,255,0.25); color: #fff; }
.server-filter__select-wrap { position: relative; display: inline-block; }
.server-filter__select {
  height: var(--control-sm);
  padding: 0 var(--s-8) 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  outline: none;
  transition: border-color var(--transition);
}
.server-filter__select:hover, .server-filter__select:focus { border-color: var(--accent); }
.server-filter__select-chev { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-soft); pointer-events: none; }
.server-filter__summary { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--border); }
.server-filter__summary::before { content: ""; }
.server-filter__summary-text { font-size: var(--fs-200); color: var(--text-soft); }
.server-filter__reset { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.server-filter__reset:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .server-filter { padding: var(--s-3); }
  .server-filter__row, .server-filter__summary { grid-template-columns: 1fr; gap: 6px; }
  .server-filter__label { text-align: left; }
  .server-filter__summary::before { display: none; }
  .server-filter__pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .server-filter__pills::-webkit-scrollbar { display: none; }
}

/* --- server card ---------------------------------------------------- */
.my-servers-list { display: flex; flex-direction: column; gap: var(--s-3); }
.ms-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ms-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.ms-card__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--text-soft); }
.ms-card--online  .ms-card__stripe { background: var(--success); }
.ms-card--offline .ms-card__stripe { background: var(--danger); }
.ms-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6);
}
.ms-card__identity { min-width: 0; }
.ms-card__name-row { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); min-width: 0; }
.ms-card__status-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--text-soft); }
.ms-card--online .ms-card__status-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); animation: msPulse 2s infinite; }
.ms-card--offline .ms-card__status-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
@keyframes msPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--success-soft); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}
.ms-card__name {
  margin: 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-200); color: var(--text-muted); }
.ms-card__meta i.fa { margin-right: 4px; color: var(--text-soft); }
.ms-card__game, .ms-card__map { display: inline-flex; align-items: center; gap: 2px; }
.ms-card__map code { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); font-size: var(--fs-100); color: var(--text-muted); }

.ms-card__players { text-align: center; }
.ms-card__players-num { font-size: var(--fs-400); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ms-card__players-num strong { font-size: var(--fs-700); font-weight: var(--fw-bold); color: var(--text); letter-spacing: -0.02em; }
.ms-card__players-bar { width: 120px; height: 5px; margin: var(--s-1) auto; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.ms-card__players-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--load-1), var(--accent)); }
.ms-card__players-pct { font-size: var(--fs-100); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ms-card__players-offline {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-xs); padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ms-card__actions { display: flex; align-items: center; gap: var(--s-2); }
.ms-card__action { white-space: nowrap; }
.ms-card__action--danger { width: var(--control); padding: 0; justify-content: center; color: var(--danger); }
.ms-card__action--danger:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.ms-card__delete-form { display: flex; margin: 0; }

.ms-card__services {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-6);
  background: var(--bg-section);
  border-top: 1px solid var(--border);
}
.ms-card__services--empty { background: transparent; }
.ms-card__services-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ms-card__services-label i.fa { color: var(--success); font-size: 12px; }
.ms-card__services--empty .ms-card__services-label i.fa { color: var(--text-soft); }
.ms-card__services-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.ms-card__services-cta:hover { text-decoration: underline; }

/* tier pill with position + days-left chips */
.svc-pill {
  --tc: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tc) 10%, transparent);
  color: var(--tc);
  font-size: var(--fs-100);
}
.svc-pill strong { font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.svc-pill--top5  { --tc: var(--tier-premium); }
.svc-pill--super { --tc: var(--tier-supervip); }
.svc-pill--vip   { --tc: var(--tier-vip); }
.svc-pill--boost { --tc: var(--tier-boost); }
.svc-pill__pos { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--tc); color: #fff; font-size: 10px; font-weight: var(--fw-bold); }
.svc-pill__days { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-muted); font-size: 10px; font-weight: var(--fw-semibold); }
.svc-pill__days--urgent { background: var(--danger-soft);  color: var(--danger); }
.svc-pill__days--warn   { background: var(--warning-soft); color: var(--warning); }
.svc-pill__days--ok     { background: var(--card-bg);      color: var(--text-soft); }

@media (max-width: 1023px) {
  .ms-card__main { grid-template-columns: minmax(0, 1fr) auto; }
  .ms-card__players { grid-column: 1 / -1; grid-row: 2; text-align: left; display: flex; align-items: center; gap: var(--s-3); }
  .ms-card__players-bar { margin: 0; flex: 1; max-width: 220px; }
}
@media (max-width: 767px) {
  .ms-card__main { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
  .ms-card__players { grid-column: 1; grid-row: auto; }
  .ms-card__actions { flex-wrap: nowrap; }
  .ms-card__action--primary { flex: 1; }
  .ms-card__services { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); }
  .ms-card__services-cta { margin-left: 0; flex-basis: 100%; }
}


/* ==========================================================================
   31. CABINET → SERVER FORM, CLAIM FLOW, PROJECT FORM (rich text editor,
       chips, server picker, attributes, image upload)
   ========================================================================== */
.cab-form { display: flex; flex-direction: column; gap: var(--s-4); }
.cab-field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.cab-field:last-child { margin-bottom: 0; }
.cab-field__label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); }
.cab-field__label i.fa { width: 16px; text-align: center; color: var(--accent); font-size: 13px; }
.cab-field__req { color: var(--danger); }
.cab-field__hint { font-size: var(--fs-200); line-height: 1.45; color: var(--text-soft); }
.cab-field__err { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--danger); }
.cab-field__err::before { content: "\f071"; font-family: FontAwesome; font-size: 11px; }
.cab-field__inline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.input--error, .select--error { border-color: var(--danger) !important; }
.input--error:focus, .select--error:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; }
.cab-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.cab-color-wrap { display: flex; gap: var(--s-2); align-items: stretch; }
.cab-color-picker {
  width: 56px; height: var(--control);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}
.cab-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.cab-color-picker::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
.cab-color-picker:disabled { cursor: not-allowed; opacity: 0.5; }
.cab-color-text { flex: 1; font-family: var(--font-mono); text-transform: uppercase; }

/* VIP-only block: collapsible card with a lock badge when not unlocked */
.cab-vip-block__head { cursor: pointer; user-select: none; }
.cab-vip-block.is-collapsed .cab-vip-block__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cab-vip-block.is-collapsed .cab-vip-block__body { display: none; }
.cab-vip-block__head-right { display: inline-flex; align-items: center; gap: var(--s-3); }
.cab-vip-block__chevron { color: var(--text-soft); font-size: 12px; transition: transform 200ms, color var(--transition); }
.cab-vip-block.is-collapsed .cab-vip-block__chevron { transform: rotate(-90deg); }
.cab-vip-block__head:hover .cab-vip-block__chevron { color: var(--accent); }
.cab-vip-block__badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 70%, #000));
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cab-vip-block__notice {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-2-soft);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  border-radius: var(--radius);
  font-size: var(--fs-200);
  line-height: 1.45;
  color: var(--text-muted);
}
.cab-vip-block__notice i.fa { color: var(--accent-2); font-size: 14px; flex-shrink: 0; }
.cab-vip-block.is-locked .cab-field__label,
.cab-vip-block.is-locked .cab-field__hint { opacity: 0.6; }

/* --- claim flow ----------------------------------------------------- */
.claim-card { max-width: 760px; }
.claim-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.claim-intro__server { min-width: 0; }
.claim-intro__addr { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--accent); }
.claim-intro__name { margin-top: 2px; font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }
.claim-intro__text { font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.claim-steps { display: flex; flex-direction: column; gap: var(--s-5); margin-bottom: var(--s-5); }
.claim-step { display: flex; gap: var(--s-3); align-items: flex-start; }
.claim-step__num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 10px var(--accent-strong);
}
.claim-step__body { flex: 1; min-width: 0; }
.claim-step__title { margin-bottom: var(--s-1); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--text); }
.claim-step__text { margin-bottom: var(--s-2); font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.claim-token-wrap { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.claim-token {
  display: inline-block;
  padding: 0 var(--s-4);
  height: var(--control);
  line-height: var(--control);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  user-select: all;
}
.claim-example {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  overflow-x: auto;
}
.claim-example code { padding: 0; background: transparent; color: inherit; }
.claim-verify {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.claim-result { padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--fs-300); line-height: 1.5; }
.claim-result--pending { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); }
.claim-result--success { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); font-weight: var(--fw-semibold); }
.claim-result--error   { background: var(--danger-soft);  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);  color: var(--danger); }
.claim-result code { padding: 1px 5px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.06); font-family: var(--font-mono); font-size: var(--fs-200); word-break: break-all; }
.claim-footer { display: flex; align-items: center; gap: 6px; font-size: var(--fs-200); color: var(--text-soft); }
@media (max-width: 767px) {
  .claim-intro { grid-template-columns: 1fr; gap: var(--s-3); }
  .cab-field__inline { grid-template-columns: 1fr; }
}

/* --- rich-text editor ----------------------------------------------- */
.rt-editor {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rt-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rt-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--s-1) var(--s-2); background: var(--bg-section); border-bottom: 1px solid var(--border); }
.rt-editor__toolbar button {
  width: var(--control-xs); height: var(--control-xs);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.rt-editor__toolbar button:hover { background: var(--card-bg); border-color: var(--border); color: var(--text); }
.rt-editor__toolbar button.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rt-editor__sep { display: inline-block; width: 1px; height: 18px; margin: 0 var(--s-1); background: var(--border); }
.rt-editor__body { min-height: 140px; max-height: 360px; overflow-y: auto; padding: var(--s-3) var(--s-4); font-size: var(--fs-400); line-height: 1.55; color: var(--text); outline: none; }
.rt-editor__body:empty::before { content: attr(data-placeholder); color: var(--text-soft); pointer-events: none; }
.rt-editor__body p { margin: 0 0 var(--s-2); }
.rt-editor__body p:last-child { margin-bottom: 0; }
.rt-editor__body h3, .rt-editor__body h4 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-500); font-weight: var(--fw-bold); }
.rt-editor__body ul, .rt-editor__body ol { margin: var(--s-1) 0 var(--s-2); padding-left: var(--s-6); }
.rt-editor__body li { margin-bottom: 2px; }
.rt-editor__body a { color: var(--accent); text-decoration: underline; }

/* --- game chips ----------------------------------------------------- */
.project-form__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-check {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-sm); padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chip-check input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:hover { border-color: var(--accent); color: var(--text); }
.chip-check:has(input:checked), .chip-check.is-checked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* --- server picker -------------------------------------------------- */
.project-form__server-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 420px; overflow-y: auto; padding-right: var(--s-1); }
.server-pick {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.server-pick:hover { border-color: var(--accent); }
.server-pick:has(input:checked), .server-pick.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.server-pick input[type=checkbox] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.server-pick__status { width: 10px; height: 10px; border-radius: 50%; background: var(--text-soft); }
.server-pick__status[data-status="on"] { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.server-pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.server-pick__name { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-pick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-200); color: var(--text-muted); }
.server-pick__meta code { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); font-size: var(--fs-100); }
.project-form__empty {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  background: var(--bg-section);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.project-form__empty i.fa { font-size: 32px; opacity: 0.4; }
.project-form__empty p { margin: var(--s-2) 0 var(--s-4); }

/* --- attributes ----------------------------------------------------- */
.project-form__attrs { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-3); background: var(--bg-section); border-radius: var(--radius); }
.project-form__attr-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: var(--s-2); align-items: center; }
.project-form__attr-row .input { background: var(--card-bg); }
.project-form__attr-row .btn { width: var(--control); height: var(--control); padding: 0; justify-content: center; color: var(--danger); }
@media (max-width: 767px) {
  .project-form__attr-row { grid-template-columns: 1fr auto; }
  .project-form__attr-row > input:nth-child(2), .project-form__attr-row > input:nth-child(3) { grid-column: 1 / -1; }
}

/* --- image upload --------------------------------------------------- */
.upload-block { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-3); background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius); }
.upload-block__preview { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.upload-block__preview--square { width: 96px; height: 96px; }
.upload-block__preview--wide { width: 240px; height: 60px; }
.upload-block__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-block__placeholder { color: var(--text-soft); font-size: 26px; }
.upload-block__controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.upload-block__controls input[type=file] { font-size: var(--fs-300); color: var(--text-muted); max-width: 100%; }
.upload-block__controls input[type=file]::file-selector-button {
  height: var(--control-sm); margin-right: var(--s-2); padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--text);
  font-family: inherit; font-size: var(--fs-200); font-weight: var(--fw-semibold);
  cursor: pointer;
}
.upload-block__remove { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-200); color: var(--text-muted); cursor: pointer; user-select: none; }
.upload-block__remove input[type=checkbox] { margin: 0; accent-color: var(--danger); }
@media (max-width: 480px) {
  .upload-block { flex-direction: column; }
  .upload-block__preview--wide { width: 100%; max-width: 240px; }
}


/* ==========================================================================
   32. CABINET → BALANCE, TOP-UP, INVOICE DETAIL
   ========================================================================== */
.balance-widget {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-8);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--accent-strong) 0%, transparent 55%),
    radial-gradient(60% 100% at 0% 100%, var(--success-soft) 0%, transparent 60%),
    var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--on-ink);
  overflow: hidden;
}
.balance-widget__main { min-width: 0; position: relative; }
.balance-widget__label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}
.balance-widget__amount { font-size: var(--fs-900); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1; color: var(--on-ink); font-variant-numeric: tabular-nums; }
.balance-widget__cur { margin-left: var(--s-2); font-size: var(--fs-500); font-weight: var(--fw-semibold); color: var(--on-ink-muted); }
.balance-widget__actions { position: relative; display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.balance-widget__actions .btn--subtle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }
.balance-widget__actions .btn--subtle:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* --- top-up --------------------------------------------------------- */
.topup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-5); align-items: flex-start; }
.topup-form {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.topup-form .field { margin-bottom: 0; }
.topup-form__footer { margin-top: calc(-1 * var(--s-1)); padding-top: var(--s-4); border-top: 1px solid var(--border); text-align: center; font-size: var(--fs-300); }
.topup-form__footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; }
.topup-form__footer a:hover { color: var(--accent); }
.topup-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-2); }
.topup-preset {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.topup-preset:hover { border-color: var(--accent); transform: translateY(-1px); }
.topup-preset.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px var(--accent-strong); }
.topup-preset__cur { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--text-soft); }
.topup-preset.is-active .topup-preset__cur { color: rgba(255,255,255,0.8); }
.input-wrap__suffix--text { display: inline-flex; align-items: center; padding: 0 var(--s-3); font-size: var(--fs-300); font-weight: var(--fw-bold); color: var(--text-soft); pointer-events: none; }
.topup-info {
  position: sticky;
  top: calc(var(--header-stack) + var(--s-4));
  padding: var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.topup-info__balance { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.topup-info__label { margin-bottom: var(--s-1); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.topup-info__value { font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.topup-info__cur { margin-left: var(--s-1); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text-soft); }
.topup-info__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.topup-info__title i.fa { color: var(--accent); }
.topup-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.topup-info__list li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }
.topup-info__list i.fa { flex-shrink: 0; margin-top: 2px; color: var(--success); }
.topup-info__warn {
  display: flex; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius);
  color: var(--warning);
  font-size: var(--fs-200);
  line-height: 1.45;
}
.topup-info__warn i.fa { flex-shrink: 0; margin-top: 2px; }

/* --- invoice detail ------------------------------------------------- */
.invoice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-5); align-items: flex-start; }
.invoice-summary { padding: var(--s-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.invoice-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.invoice-summary__row:last-of-type { border-bottom: 0; }
.invoice-summary__label { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-soft); }
.invoice-summary__val { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text); text-align: right; }
.invoice-summary__val code { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--bg-section); font-family: var(--font-mono); font-size: var(--fs-200); }
.invoice-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-2); padding: var(--s-4) 0 var(--s-1); border-top: 2px solid var(--border); }
.invoice-summary__total-label { font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.invoice-summary__total-val { font-size: var(--fs-800); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.invoice-summary__cur { margin-left: var(--s-1); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text-soft); }
.invoice-summary__items { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.invoice-summary__items-title { margin-bottom: var(--s-2); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.invoice-items { list-style: none; margin: 0; padding: 0; }
.invoice-item { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-2) 0; font-size: var(--fs-300); }
.invoice-item__name { color: var(--text); font-weight: var(--fw-medium); }
.invoice-item__days { font-size: var(--fs-200); color: var(--text-soft); }
.invoice-item__price { color: var(--text-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.invoice-side { position: sticky; top: calc(var(--header-stack) + var(--s-4)); }
.invoice-action { margin-bottom: var(--s-3); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.invoice-action__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--text); }
.invoice-action__lead { margin: 0 0 var(--s-4); font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.invoice-action--paid { text-align: center; background: radial-gradient(100% 60% at 50% 0%, var(--success-soft) 0%, transparent 70%), var(--card-bg); }
.invoice-action--paid .invoice-action__title { justify-content: center; }
.invoice-action__big-icon { display: block; margin: var(--s-1) 0 var(--s-3); font-size: 56px; color: var(--success); }
.invoice-action--terminal { background: var(--bg-section); }
.invoice-side__back { text-align: center; font-size: var(--fs-300); }
.invoice-side__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; }
.invoice-side__back a:hover { color: var(--accent); }

@media (max-width: 1023px) {
  .topup-grid, .invoice-grid { grid-template-columns: 1fr; }
  .topup-info, .invoice-side { position: static; }
}
@media (max-width: 767px) {
  .balance-widget { padding: var(--s-5); }
  .balance-widget__amount { font-size: var(--fs-800); }
  .balance-widget__actions { width: 100%; }
  .balance-widget__actions .btn { flex: 1; }
  .topup-form { padding: var(--s-4); }
  .topup-presets { grid-template-columns: repeat(3, 1fr); }
  .invoice-summary { padding: var(--s-4); }
}


/* ==========================================================================
   33. CABINET → SERVICES (tier chooser, slot picker, duration + checkout,
       and the in-page services panel on the server edit screen)
   Tier colour comes from --tc (premium / supervip / vip / boost tokens).
   ========================================================================== */
.svc-context {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.svc-context__label, .svc-context__balance-label { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.svc-context__name { margin-top: 2px; font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--text); }
.svc-context__addr { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: 2px; }
.svc-context__addr code { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-muted); }
.svc-context__balance { text-align: right; }
.svc-context__balance-val { font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.svc-context__balance-val span { margin-left: var(--s-1); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text-soft); }

.svc-active-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: var(--radius);
}
.svc-active-row__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-200); font-weight: var(--fw-bold); color: var(--success); }
.svc-active-row__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.svc-active-pill { --tc: var(--accent); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s-3); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--tc); font-size: var(--fs-100); }
.svc-active-pill--top5  { --tc: var(--tier-premium); }
.svc-active-pill--super { --tc: var(--tier-supervip); }
.svc-active-pill--vip   { --tc: var(--tier-vip); }
.svc-active-pill--boost { --tc: var(--tier-boost); }
.svc-active-pill strong { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; }
.svc-active-pill__end { color: var(--text-muted); }

/* --- tier cards ----------------------------------------------------- */
.svc-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.svc-tier-card {
  --tc: var(--accent);
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--tc) 12%, transparent) 0%, transparent 60%),
    var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.svc-tier-card:hover:not(.is-blocked) { border-color: var(--tc); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-tier-card.is-blocked { opacity: 0.6; }
.svc-tier-card.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent), var(--shadow-sm); }
.svc-tier-card--top5  { --tc: var(--tier-premium); }
.svc-tier-card--super { --tc: var(--tier-supervip); }
.svc-tier-card--vip   { --tc: var(--tier-vip); }
.svc-tier-card--boost { --tc: var(--tier-boost); }
.svc-tier-card__head { display: flex; align-items: center; gap: var(--s-3); }
.svc-tier-card__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tc) 14%, transparent);
  color: var(--tc);
  font-size: 20px;
}
.svc-tier-card__title-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-tier-card__title { margin: 0; font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--text); }
.svc-tier-card__pill { display: inline-flex; align-items: center; gap: 4px; width: fit-content; min-height: 20px; padding: 2px var(--s-2); line-height: 1.3; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.svc-tier-card__pill--active  { background: var(--success-soft); color: var(--success); }
.svc-tier-card__pill--blocked { background: var(--bg-section); color: var(--text-soft); }
.svc-tier-card__descr { margin: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.svc-tier-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.svc-tier-card__features li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-300); line-height: 1.45; color: var(--text-muted); }
.svc-tier-card__features i.fa { flex-shrink: 0; margin-top: 3px; color: var(--tc); }
.svc-tier-card__block-note,
.svc-tier-card__warn { padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--fs-200); line-height: 1.5; }
.svc-tier-card__block-note { background: var(--bg-section); color: var(--text-muted); }
.svc-tier-card__block-note i.fa { margin-right: 4px; color: var(--text-soft); }
.svc-tier-card__warn { background: var(--warning-soft); color: var(--warning); }
.svc-tier-card__warn i.fa { margin-right: 4px; }
.svc-tier-card__cta { margin-top: auto; }
.svc-back-row { text-align: center; }
.svc-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-300); color: var(--text-muted); text-decoration: none; }
.svc-back:hover { color: var(--accent); }

/* --- banners -------------------------------------------------------- */
.svc-warn-banner {
  display: flex; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: var(--radius-lg);
}
.svc-warn-banner__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); font-size: 18px; }
.svc-warn-banner__body { min-width: 0; }
.svc-warn-banner__title { margin: 0 0 var(--s-1); font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--warning); }
.svc-warn-banner__lead { margin: 0 0 var(--s-2); font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.svc-warn-banner__lead:last-child { margin-bottom: 0; }
.svc-warn-banner__strong { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--warning); }
.svc-warn-banner__strong i.fa { margin-top: 3px; }
.svc-warn-banner--info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.svc-warn-banner--info .svc-warn-banner__icon { background: var(--accent-strong); color: var(--accent); }
.svc-warn-banner--info .svc-warn-banner__title { color: var(--text); }
.svc-warn-banner--compact { padding: var(--s-3) var(--s-4); gap: var(--s-3); border-radius: var(--radius); }
.svc-warn-banner--compact .svc-warn-banner__icon { width: 28px; height: 28px; font-size: 13px; }
.svc-warn-banner--compact .svc-warn-banner__lead { font-size: var(--fs-200); }
.svc-help-text { margin: 0 0 var(--s-3); font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }

/* --- slot context (duration page) ----------------------------------- */
.svc-slot-context {
  --tc: var(--accent);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tc);
  border-radius: var(--radius);
}
.svc-slot-context--top5  { --tc: var(--tier-premium); }
.svc-slot-context--super { --tc: var(--tier-supervip); }
.svc-slot-context > i.fa { font-size: 20px; color: var(--tc); }
.svc-slot-context__label { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.svc-slot-context__name { margin-top: 2px; font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }

/* --- duration cards ------------------------------------------------- */
.svc-duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.svc-duration {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4);
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.svc-duration input { display: none; }
.svc-duration:hover:not(.is-insufficient) { border-color: var(--accent); transform: translateY(-1px); }
.svc-duration:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.svc-duration:has(input:checked)::after {
  content: "\f00c";
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: FontAwesome;
  font-size: 10px;
}
.svc-duration.is-insufficient { cursor: not-allowed; opacity: 0.55; }
.svc-duration__days { font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.svc-duration__days span { margin-left: 4px; font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-soft); text-transform: lowercase; }
.svc-duration__price { font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.svc-duration__price span { margin-left: 4px; font-size: var(--fs-100); color: var(--text-soft); }
.svc-duration__perday { font-size: var(--fs-100); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.svc-duration__badge { margin-top: var(--s-1); width: fit-content; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--danger-soft); color: var(--danger); font-size: 10px; font-weight: var(--fw-bold); }

.svc-summary { margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius); }
.svc-summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-1) 0; font-size: var(--fs-300); color: var(--text-muted); }
.svc-summary__row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.svc-summary__row--total { margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px dashed var(--border-strong); font-weight: var(--fw-semibold); }
.svc-summary__row--total strong { font-size: var(--fs-500); }
.svc-confirm-check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius);
  font-size: var(--fs-300);
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.svc-confirm-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--warning); }
.svc-purchase-form { display: flex; flex-direction: column; }
.svc-purchase-form .cab-section-title { margin: 0 0 var(--s-4); }
.svc-purchase-form .svc-back-row { margin-top: var(--s-4); }

/* --- TOP-5 slot list ------------------------------------------------ */
.svc-slot-list { display: flex; flex-direction: column; gap: var(--s-2); }
.svc-slot-row-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.svc-slot-row-item--free { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.svc-slot-row-item--free:hover { border-color: var(--success); }
.svc-slot-row-item--mine { border-color: color-mix(in srgb, var(--success) 50%, transparent); background: var(--success-soft); }
.svc-slot-row-item--taken { opacity: 0.65; }
.svc-slot-row-item__rank { text-align: center; font-size: var(--fs-800); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1; color: var(--tier-premium); font-variant-numeric: tabular-nums; }
.svc-slot-row-item__rank-note { margin-top: 4px; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.svc-slot-row-item__body { min-width: 0; }
.svc-slot-row-item__server { margin-bottom: 2px; font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); word-break: break-word; }
.svc-slot-row-item__server--free { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--success); }
.svc-slot-row-item__server--free i.fa { font-size: 18px; }
.svc-slot-row-item__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-200); color: var(--text-muted); }
.svc-slot-row-item__meta i.fa { margin-right: 4px; }
.svc-slot-row-item__owner-mine  { color: var(--success); font-weight: var(--fw-semibold); }
.svc-slot-row-item__owner-other { color: var(--text-soft); }
.svc-slot-row-item__until { color: var(--text-soft); }
.svc-slot-row-item__free-hint { color: var(--success); font-weight: var(--fw-medium); }
/* radio-group variant (inline panel) */
.svc-slot-list--inline { margin-bottom: var(--s-4); }
.svc-slot-list--inline .svc-slot-row-item { cursor: default; }
.svc-slot-list--inline .svc-slot-row-item.is-pickable { cursor: pointer; }
.svc-slot-list--inline .svc-slot-row-item:has(.svc-slot-radio:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.svc-slot-list--inline .svc-slot-row-item--mine:has(.svc-slot-radio:checked) { border-color: var(--success); background: var(--success-soft); box-shadow: inset 0 0 0 1px var(--success); }
.svc-slot-radio { display: none; }
.svc-slot-row-item__check { font-size: 20px; color: var(--text-soft); opacity: 0; transition: opacity var(--transition); }
.svc-slot-list--inline .svc-slot-row-item:has(.svc-slot-radio:checked) .svc-slot-row-item__check { opacity: 1; color: var(--accent); }
.svc-slot-list--inline .svc-slot-row-item--mine:has(.svc-slot-radio:checked) .svc-slot-row-item__check { color: var(--success); }

/* --- SUPER VIP: two side-by-side hero cards ------------------------- */
.svc-slot-row--supervip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.svc-slot-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.svc-slot-card--free  { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.svc-slot-card--mine  { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: var(--success-soft); }
.svc-slot-card--taken { opacity: 0.72; }
.svc-slot-card__side-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.svc-slot-card__hero { position: relative; min-height: 110px; display: flex; flex-direction: column; justify-content: center; padding: var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg); }
.svc-slot-card__hero--super { background: linear-gradient(135deg, var(--tier-supervip-soft), transparent); border-color: color-mix(in srgb, var(--tier-supervip) 40%, transparent); }
.svc-slot-card__server-name { margin-bottom: 4px; font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); word-break: break-word; }
.svc-slot-card__owner { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-soft); }
.svc-slot-card__owner--mine { color: var(--success); }
.svc-slot-card__empty { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--text-muted); }
.svc-slot-card__empty i.fa { font-size: 26px; color: var(--success); }
.svc-slot-card__until { display: inline-flex; align-items: center; gap: 6px; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-200); color: var(--text-muted); }
.svc-slot-card__until i.fa { color: var(--text-soft); }

/* --- in-page services panel (server edit) --------------------------- */
.svc-panel { padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.svc-panel__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.svc-panel__title { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--text); }
.svc-panel__title i.fa { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.svc-panel__balance { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-300); color: var(--text-muted); }
.svc-panel__balance-label { font-weight: var(--fw-medium); color: var(--text-soft); }
.svc-panel__balance strong { color: var(--text); font-variant-numeric: tabular-nums; }
.svc-panel .svc-warn-banner { margin-bottom: var(--s-4); }

.svc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-bottom: var(--s-4); padding: var(--s-1); background: var(--bg); border-radius: var(--radius); }
.svc-tab {
  --tc: var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.svc-tab i.fa { flex-shrink: 0; font-size: 14px; color: var(--tc); }
.svc-tab:hover { background: var(--card-bg); color: var(--text); }
.svc-tab.is-active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--tc); }
.svc-tab--top5  { --tc: var(--tier-premium); }
.svc-tab--super { --tc: var(--tier-supervip); }
.svc-tab--vip   { --tc: var(--tier-vip); }
.svc-tab--boost { --tc: var(--tier-boost); }
.svc-tab__badge { margin-left: 2px; font-size: 11px !important; }
.svc-tab__badge--active { color: var(--success) !important; }
.svc-tab__badge--locked { color: var(--text-soft) !important; }
.svc-tabpanel { display: none; }
.svc-tabpanel.is-active { display: block; animation: svcFade 180ms ease; }
@keyframes svcFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.svc-tabpanel__status { margin-bottom: var(--s-4); }
.svc-tabpanel__status-row { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--fs-300); line-height: 1.5; }
.svc-tabpanel__status-row i.fa { flex-shrink: 0; margin-top: 2px; font-size: 15px; }
.svc-tabpanel__status-row--active { background: var(--success-soft); color: var(--success); }
.svc-tabpanel__status-row--active strong { color: var(--text); }
.svc-tabpanel__status-row--blocked { background: var(--bg-section); color: var(--text-muted); }
.svc-tabpanel__status-row--blocked i.fa { color: var(--text-soft); }
.svc-tabpanel__status-row--available { background: var(--accent-soft); color: var(--text-muted); }
.svc-tabpanel__status-row--available i.fa { color: var(--accent); }
.svc-tabpanel__hint { padding: var(--s-4); border-radius: var(--radius); background: var(--bg-section); font-size: var(--fs-300); text-align: center; color: var(--text-soft); }
.svc-tabpanel__section-title { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.svc-tabpanel__section-title i.fa { color: var(--accent); font-size: 12px; }
.svc-buy-form .svc-tabpanel__section-title:first-child { margin-top: 0; }

.svc-super-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.svc-super-slot {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: default;
  transition: border-color var(--transition), background var(--transition);
}
.svc-super-slot.is-pickable { cursor: pointer; }
.svc-super-slot.is-pickable:hover { border-color: var(--tier-supervip); }
.svc-super-slot:has(.svc-slot-radio:checked) { border-color: var(--tier-supervip); background: var(--tier-supervip-soft); }
.svc-super-slot--taken { opacity: 0.65; cursor: not-allowed; }
.svc-super-slot__side { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.svc-super-slot__server { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); word-break: break-word; }
.svc-super-slot__empty { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--success); }
.svc-super-slot__empty i.fa { font-size: 20px; }
.svc-super-slot__until { font-size: var(--fs-100); color: var(--text-soft); }
.svc-super-slot__pill { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.svc-super-slot__pill--mine  { color: var(--success); }
.svc-super-slot__pill--taken { color: var(--danger); }

@media (max-width: 767px) {
  .svc-context { padding: var(--s-4); }
  .svc-context__balance { text-align: left; }
  .svc-tabs { grid-template-columns: repeat(2, 1fr); }
  .svc-slot-row--supervip, .svc-super-row { grid-template-columns: 1fr; }
  .svc-slot-row-item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); }
  .svc-slot-row-item__rank { font-size: var(--fs-700); }
  .svc-slot-row-item__action { grid-column: 1 / -1; }
  .svc-slot-row-item__action .btn { width: 100%; }
  .svc-slot-list--inline .svc-slot-row-item__action { grid-column: 3; grid-row: 1; }
  .svc-slot-list--inline .svc-slot-row-item { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .svc-duration-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-warn-banner { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .svc-panel { padding: var(--s-4); }
  .svc-panel__balance { width: 100%; flex-wrap: wrap; }
  .svc-panel__balance .btn { margin-left: auto; }
}


/* ==========================================================================
   34. SKELETON LOADERS + UTILITIES
   ========================================================================== */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  position: relative;
  background: var(--bg-2);
  background-image: linear-gradient(90deg, transparent 0%, var(--bg-section) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -200% 0;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
.skeleton::after, .skeleton::before { display: none; }
.skeleton * { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background-image: none; } }
.skeleton-text { height: 12px; margin-bottom: var(--s-2); border-radius: var(--radius-sm); }
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-text.is-short  { width: 50%; }
.skeleton-text.is-medium { width: 75%; }
.skeleton-text.is-long   { width: 100%; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: var(--s-3); border-radius: var(--radius-sm); }
.skeleton-circle { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; }
.skeleton-box { border-radius: var(--radius); }
.skeleton-btn { height: var(--control-sm); width: 120px; border-radius: var(--radius); }
.skeleton-stat { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.skeleton-stat__icon { width: 44px; height: 44px; flex-shrink: 0; }
.skeleton-stat__body { flex: 1; min-width: 0; }
.skeleton-row { display: grid; grid-template-columns: 50px 1fr 200px 120px 90px; gap: var(--s-3); align-items: center; padding: var(--s-3); border-bottom: 1px solid var(--border); }
.skeleton-row:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  .skeleton-row { grid-template-columns: 40px 1fr 80px; }
  .skeleton-row > :nth-child(3), .skeleton-row > :nth-child(4) { display: none; }
}
.skeleton-card { padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-skeleton-target] { display: none; }
[data-skeleton-target].is-loaded { display: contents; }
[data-skeleton-placeholder] { display: block; }
[data-skeleton-placeholder].is-hidden { display: none; }

.text-secondary { color: var(--text-muted); }
.text-tertiary  { color: var(--text-soft); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.hidden { display: none !important; }
.full { width: 100%; }

/* non-interactive "button" used as a status label (e.g. project limit reached) */
.btn.is-static { cursor: default; pointer-events: none; }

/* admin sign-in page still uses the old centered card head */
.auth-card__title { margin: 0 0 var(--s-1); font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.015em; text-align: center; color: var(--text); }
.auth-card__subtitle { margin: 0 0 var(--s-6); font-size: var(--fs-300); line-height: 1.45; text-align: center; color: var(--text-muted); }
.auth-card__footer { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-300); text-align: center; color: var(--text-muted); }
.auth-card__footer a { font-weight: var(--fw-semibold); color: var(--accent); }


/* ==========================================================================
   35. TAG INPUT + LANGUAGE SWITCH
   .tag-input: chips + a text field; each chip carries its own hidden input,
   so the form posts a plain array. JS in app.js turns Enter / space / comma
   into a chip. .lang-switch: segmented flag+name control in the header.
   ========================================================================== */
.tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  min-height: var(--control);
  padding: 4px var(--s-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: text;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tag-input:hover { border-color: var(--text-soft); }
.tag-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag-input__chip {
  display: inline-flex; align-items: center; gap: 2px;
  height: 30px; padding: 0 4px 0 var(--s-2);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  line-height: 1;
  animation: chipIn 140ms ease-out;
}
@keyframes chipIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.tag-input__hash { opacity: 0.6; font-weight: var(--fw-regular); }
.tag-input__text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-input__remove {
  width: 22px; height: 22px;
  margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.7;
  transition: background var(--transition), opacity var(--transition);
}
.tag-input__remove:hover { background: var(--accent); color: var(--on-accent); opacity: 1; }
.tag-input__field {
  flex: 1 1 120px;
  min-width: 100px;
  height: 30px;
  padding: 0 var(--s-1);
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-400);
  outline: none;
}
.tag-input__field::placeholder { color: var(--text-soft); opacity: 1; }
.tag-input.is-full .tag-input__field { display: none; }
.tag-input.is-full { cursor: default; }
.tag-input__count {
  margin-left: auto;
  padding: 0 var(--s-1);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.tag-input.is-full .tag-input__count { color: var(--accent); }
.tag-input.is-invalid { border-color: var(--danger); }

/* language switch — segmented control in the header utility row */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  height: var(--control);
  padding: 3px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 100%;
  padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.lang-switch__btn:hover { color: var(--text); text-decoration: none; }
.lang-switch__btn.is-active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
.lang-switch__flag {
  width: 21px; height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.lang-switch__btn:not(.is-active) .lang-switch__flag { opacity: 0.7; }
.lang-switch__btn:hover .lang-switch__flag { opacity: 1; }
@media (max-width: 767px) {
  .lang-switch { height: 36px; padding: 2px; gap: 2px; }
  .lang-switch__btn { padding: 0 7px; }
  .lang-switch__label { display: none; }
  .lang-switch__flag { width: 22px; height: 16px; }
}


/* ==========================================================================
   36. DOWNLOAD MENU — "Скачать CS 1.6" client list
   Desktop: dropdown under the header CTA (hover or click). Mobile: the same
   list inline in the drawer. Items come from config('download.clients').
   ========================================================================== */
.header__cta-caret { font-size: 12px; margin-left: -2px; transition: transform var(--transition); }
.header__dl.is-open .header__cta-caret,
.header__dl:has(.menu.is-open) .header__cta-caret { transform: rotate(180deg); }
.menu--dl { min-width: 470px; max-width: calc(100vw - var(--s-6)); padding: 0; }
.menu--dl > .dl-list > .dl-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.menu--dl__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.menu--dl__head i.fa { color: var(--success); }
/* desktop: open on hover as well as on click. The panel stays mounted and
   fades in/out, with an invisible bridge over the gap under the button and
   a short grace period, so moving the cursor from the button into the panel
   never closes it. */
@media (hover: hover) and (min-width: 1024px) {
  .header__dl .menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    animation: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 200ms;
  }
  .header__dl .menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--s-2) - 4px);
    height: calc(var(--s-2) + 4px);
  }
  .header__dl:hover .menu,
  .header__dl .menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .header__dl:hover .header__cta,
  .header__dl:has(.menu.is-open) .header__cta { border-color: var(--success); background: var(--success); color: var(--on-accent); }
  .header__dl:hover .header__cta-caret { transform: rotate(180deg); }
}

.dl-list { display: flex; flex-direction: column; }
.dl-list__empty { padding: var(--s-5); text-align: center; font-size: var(--fs-300); color: var(--text-soft); }
.dl-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.dl-item:last-child { border-bottom: 0; }
.dl-item__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success);
  font-size: 18px;
  align-self: start;
}
.dl-item__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-item__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }
.dl-item__name .status-pill { height: 20px; font-size: 10px; }
.dl-item__tagline { font-size: var(--fs-200); line-height: 1.45; color: var(--text-muted); }
.dl-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: 2px; font-size: var(--fs-100); color: var(--text-soft); }
.dl-item__count {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 var(--s-2);
  margin-left: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.22);
  color: var(--on-accent);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.dl-item__site { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); text-decoration: none; }
.dl-item__site:hover { color: var(--accent); text-decoration: none; }
.dl-item__btn { white-space: nowrap; align-self: center; }
.dl-item.is-off .dl-item__icon { background: var(--bg-section); color: var(--text-soft); }
.dl-item.is-off .dl-item__name, .dl-item.is-off .dl-item__tagline { color: var(--text-soft); }

/* mobile drawer variant */
.header__drawer-dl { display: flex; flex-direction: column; gap: var(--s-2); }
.header__drawer-dl-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.header__drawer-dl-title i.fa { color: var(--success); }
.header__drawer-dl .dl-list { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.header__drawer-dl .dl-item { padding: var(--s-3); }
@media (max-width: 480px) {
  .dl-item { grid-template-columns: 40px minmax(0, 1fr); }
  .dl-item__btn { grid-column: 2; justify-self: start; }
}

/* tag filter (home): each button carries its category colour as --tag-color */
.tag-filter__btn { --tag-color: var(--accent); gap: 6px; }
.tag-filter__btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color); flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color) 25%, transparent); }
.tag-filter__btn:hover { border-color: var(--tag-color); background: color-mix(in srgb, var(--tag-color) 12%, transparent); color: var(--text); }
.tag-filter__btn.is-active { border-color: var(--tag-color); background: var(--tag-color); color: #fff; }
.tag-filter__btn.is-active::before { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
/* category chips in server rows / listing: same colour cue */
.server-tag[style*="--tag-color"] { --tc: var(--tag-color); border-color: color-mix(in srgb, var(--tc) 40%, transparent); background: color-mix(in srgb, var(--tc) 12%, transparent); color: var(--tc); }
.server-tag[style*="--tag-color"]:hover { background: var(--tc); border-color: var(--tc); color: #fff; }


/* ==========================================================================
   37. REGISTRATION — numbered sections + personal-data consent block
   ========================================================================== */
.auth-form--sections { gap: var(--s-5); }
.auth-section { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.auth-section:first-of-type { padding-top: 0; border-top: 0; }
.auth-section__title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.auth-section__num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.auth-consent {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.auth-consent:hover { border-color: var(--accent); }
.auth-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-consent__box {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: transparent;
  font-size: 12px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.auth-consent input:checked ~ .auth-consent__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.auth-consent input:focus-visible ~ .auth-consent__box { box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-consent:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.auth-consent__text { font-size: var(--fs-300); line-height: 1.5; color: var(--text); }
.auth-consent__text a { color: var(--accent); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.auth-consent__note { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-200); line-height: 1.5; color: var(--text-soft); }
.auth-consent__note i.fa { margin-top: 3px; color: var(--success); }
.auth-form__legal { margin-top: calc(-1 * var(--s-1)); font-size: var(--fs-200); line-height: 1.5; text-align: center; color: var(--text-soft); }
.auth-form__legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-form__legal a:hover { color: var(--accent); }
.auth-info__trust {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: var(--radius);
  background: var(--success-soft);
}
.auth-info__trust > i.fa { margin-top: 2px; color: var(--success); font-size: 16px; }
.auth-info__trust-title { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); }
.auth-info__trust-text { margin-top: 2px; font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }

/* banned server: notice strip in the owner's card */
.ms-card__ban { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-200); }
.ms-card__ban a { margin-left: auto; color: var(--danger); font-weight: var(--fw-semibold); text-decoration: underline; }
/* rich-text editor: source view + admin variant */
.rt-editor__source { display: block; width: 100%; min-height: 220px; padding: var(--s-3) var(--s-4); border: 0; background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: var(--fs-300); line-height: 1.5; resize: vertical; outline: none; }
.rt-editor--tall .rt-editor__body { min-height: 320px; max-height: 70vh; }
.rt-editor__toolbar button b { font-size: 11px; }
.rt-editor__source[hidden] { display: none; }

/* discounted price on a duration card */
.svc-duration__old { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-200); color: var(--text-soft); }
.svc-duration__off { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--success); color: #fff; font-size: 10px; font-weight: var(--fw-bold); }


/* ==========================================================================
   38. PROJECTS v2 — richer cards, cover hero, stats strip, project badges
   ========================================================================== */
.projects-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }
.project-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); }
.project-card__cover { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--bg-section); overflow: hidden; }
.project-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.project-card:hover .project-card__cover img { transform: scale(1.05); }
.project-card__cover--empty { background: radial-gradient(90% 80% at 100% 0%, var(--accent-strong) 0%, transparent 60%), linear-gradient(135deg, var(--bg-2), var(--bg-section)); }
.project-card__cover-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--text-soft); opacity: 0.35; }
.project-card__cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 40%, rgba(10,13,18,0.55) 100%); pointer-events: none; }
.project-card__games { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; gap: var(--s-1); }
.game-chip--glass { background: rgba(10,13,18,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(4px); }
.project-card__live { position: absolute; top: var(--s-3); right: var(--s-3); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-pill); background: rgba(10,13,18,0.6); color: #fff; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.project-card__live.is-on { color: #c8f5dc; }
.project-card__logo {
  position: absolute; left: var(--s-4); bottom: calc(-1 * var(--s-5));
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--card-bg);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: var(--fs-500); font-weight: var(--fw-bold); color: var(--accent);
}
.project-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.project-card__logo--placeholder { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; }
.project-card__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: calc(var(--s-5) + var(--s-3)) var(--s-4) var(--s-3); }
.project-card__title { margin: 0; font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.25; }
.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.project-card__desc { flex: 1; margin: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.project-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-200); color: var(--text-soft); }
.project-card__stats span { display: inline-flex; align-items: center; gap: 5px; }
.project-card__stats b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.project-card__stats .stars { margin-left: auto; }
.project-card__foot { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.project-card__foot .btn { flex: 1; }
.stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: var(--border-strong); white-space: nowrap; }
.stars s, .stars i { font-style: normal; text-decoration: none; }
.stars i { position: absolute; left: 0; top: 0; width: var(--fill, 0%); overflow: hidden; color: var(--accent-2); }

/* hero with cover */
.project-hero { position: relative; overflow: hidden; }
.project-hero__cover { display: none; }
.project-hero.has-banner .project-hero__cover { display: block; height: 220px; background: var(--project-cover) center / cover no-repeat; }
.project-hero.has-banner .project-hero__cover::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, rgba(10,13,18,0.1) 0%, rgba(10,13,18,0.75) 100%); }
.project-hero__main { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 260px; gap: var(--s-5); align-items: start; padding: var(--s-5) var(--s-6); }
.project-hero.has-banner .project-hero__main { margin-top: -56px; }
.project-hero__logo { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--card-bg); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow); overflow: hidden; font-size: var(--fs-700); font-weight: var(--fw-bold); color: var(--accent); }
.project-hero__logo--placeholder { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; }
.project-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.project-hero__flag { width: 21px; height: 14px; border-radius: 2px; object-fit: cover; }
.project-hero.has-banner .project-hero__chips { position: relative; z-index: 1; }
.project-hero__title { margin: var(--s-2) 0 var(--s-2); font-size: var(--fs-800); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; }
.project-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-300); color: var(--text-muted); }
.project-hero__meta a { color: var(--accent); text-decoration: none; }
.project-hero__side { padding-top: var(--s-2); }
.project-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); background: var(--bg-section); }
.project-stats__item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border-right: 1px solid var(--border); }
.project-stats__item:last-child { border-right: 0; }
.project-stats__icon { grid-row: 1 / span 2; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 15px; }
.project-stats__icon--success { background: var(--success-soft); color: var(--success); }
.project-stats__icon--warning { background: var(--accent-2-soft); color: var(--accent-2); }
.project-stats__val { font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.project-stats__val small { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-soft); }
.project-stats__label { font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.project-grid .cab-card__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-500); }
.project-grid .cab-card__title i.fa { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 13px; }

/* project badge next to server names (home cards, server page) */
.promo-card__name .server-project-badge, .vip-card__name .server-project-badge { margin-top: 4px; }
.promo-card__name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.server-project-badge--lg { height: 26px; padding: 0 var(--s-3); font-size: var(--fs-200); }
.srv-info__projects { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.srv-info__projects .fa { color: var(--accent); }

@media (max-width: 1023px) {
  .project-hero__main { grid-template-columns: 80px minmax(0, 1fr); }
  .project-hero__side { grid-column: 1 / -1; }
  .project-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-stats__item:nth-child(2) { border-right: 0; }
  .project-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 767px) {
  .project-hero__main { grid-template-columns: 1fr; padding: var(--s-4); }
  .project-hero.has-banner .project-hero__cover { height: 150px; }
  .project-hero.has-banner .project-hero__main { margin-top: -40px; }
  .project-hero__title { font-size: var(--fs-700); }
  .project-stats { grid-template-columns: 1fr; }
  .project-stats__item { border-right: 0; border-bottom: 1px solid var(--border); }
  .project-stats__item:last-child { border-bottom: 0; }
}

/* fixes: game icon never squashed by long names; player names clipped with ellipsis */
.server-table .game-col, .server-table .game-cell { min-width: 36px; }
.game-icon { max-width: none; flex-shrink: 0; min-width: 18px; }
.player-stats { table-layout: fixed; }
.player-stats th:first-child, .player-stats td:first-child { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-stats__score { width: 56px; }
.player-stats__time { width: 76px; }

/* reCAPTCHA widget: keeps its slot while the API loads; centred in the login modal */
.recaptcha-field { min-height: 78px; }
.recaptcha-box { display: flex; justify-content: center; }
.lm .recaptcha-field { margin-bottom: 0; }

/* ==========================================================================
   39. MSTATS — master-server block (sources, daily chart, hashes)
   ========================================================================== */
.ms-updated { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-100); font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.ms-updated i.fa { color: var(--success); font-size: 11px; }
.ms-updated.is-stale { color: var(--warning); }
.ms-updated.is-stale i.fa { color: var(--warning); }
.ms-lead { margin: calc(-1 * var(--s-1)) 0 var(--s-4); max-width: 820px; font-size: var(--fs-300); line-height: 1.55; color: var(--text-muted); }
.ms-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); }
.ms-sources { display: grid; gap: var(--s-3); align-content: start; }
.ms-source { position: relative; padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ms-source__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.ms-source__kind { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.ms-source__kind--external { background: var(--accent-2-soft); color: var(--accent-2); }
.ms-source__host { font-size: var(--fs-100); color: var(--text-soft); font-family: var(--font-mono, monospace); }
.ms-source__name { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); }
.ms-source__val { margin-top: var(--s-2); font-size: var(--fs-800); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ms-source__val small { font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); margin-left: 4px; }
.ms-source__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); font-size: var(--fs-200); color: var(--text-muted); }
.ms-source__meta i.fa { color: var(--text-soft); margin-right: 3px; }
.ms-source__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.ms-source__nodata { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-100); }
.ms-chart-card { padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.ms-chart-card__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ms-chart-card__head i.fa { color: var(--accent); }
.ms-chart svg { width: 100%; height: 240px; display: block; }
.ms-info { padding: var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ms-info__title { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-300); font-weight: var(--fw-bold); }
.ms-info__title i.fa { color: var(--accent); }
.ms-info__text { margin: 0 0 var(--s-2); font-size: var(--fs-200); line-height: 1.55; color: var(--text-muted); }
.ms-info .mstats-table-wrap { margin: var(--s-3) 0; box-shadow: none; }
.ms-info__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 1023px) { .ms-grid { grid-template-columns: 1fr; } .ms-sources { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ms-sources { grid-template-columns: 1fr; } .ms-updated { margin-left: 0; flex-basis: 100%; } .mstats-section-title { flex-wrap: wrap; } }

/* master-server chart keeps its aspect on phones so axis labels are not squashed */
.ms-chart svg.ms-chart__svg { height: auto; aspect-ratio: 800 / 240; }
@media (max-width: 767px) { .ms-chart svg.ms-chart__svg { aspect-ratio: 800 / 300; } }
@media (max-width: 767px) { .ms-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ms-chart svg.ms-chart__svg { min-width: 600px; aspect-ratio: 800 / 240; } }

/* 39b. MSTATS — master-server block, client cards layout */
.ms-block { margin: var(--s-4) 0 var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); }
.ms-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ms-block .mstats-section-title--inline { margin-bottom: 0; }
.ms-block .ms-lead { margin: var(--s-2) 0 var(--s-4); }
.ms-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.ms-client { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ms-client__id { display: flex; align-items: center; gap: var(--s-3); }
.ms-client__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; font-size: 18px; box-shadow: 0 6px 16px rgba(31, 111, 209, 0.3); }
.ms-client__name { font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.2; }
.ms-client__kind { font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.ms-client__stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-3); }
.ms-client__stat { padding: var(--s-3); border-radius: var(--radius); background: var(--bg-section); min-width: 0; }
.ms-client__stat--main { background: var(--accent-soft); }
.ms-client__val { font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-client__stat--main .ms-client__val { font-size: var(--fs-800); color: var(--accent); }
.ms-client__lbl { margin-top: var(--s-1); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.ms-client__delta { font-size: var(--fs-200); font-weight: var(--fw-semibold); margin-left: 4px; }
.ms-client__delta.is-up { color: var(--success); }
.ms-client__delta.is-down { color: var(--danger); }
.ms-client__nodata { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-100); }
.ms-block .ms-chart-card { margin-bottom: var(--s-4); }
.ms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.ms-col { min-width: 0; }
.ms-col__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-300); font-weight: var(--fw-bold); }
.ms-col__title i.fa { color: var(--accent); }
.ms-col .ms-info + .ms-col__title { margin-top: var(--s-4); }
.ms-col__empty { padding: var(--s-8) var(--s-4); }
.ms-col__empty i.fa { display: block; margin-bottom: var(--s-2); font-size: 22px; color: var(--border-strong); }
@media (max-width: 1023px) { .ms-cols { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .ms-client { padding: var(--s-4); } .ms-client__stats { grid-template-columns: 1fr 1fr; } .ms-client__stat--main { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ms-chart svg.ms-chart__svg { max-height: 280px; margin: 0 auto; } }

/* ==========================================================================
   40. SERVER PAGE v2 — hero polish, map stats + rotation, project card,
       chart tooltip, bots switch
   ========================================================================== */
.srv-card--hero { position: relative; overflow: hidden; }
.srv-card--hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.srv-card__body { grid-template-columns: 280px minmax(0, 1fr); }
.srv-map { width: 280px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.srv-map::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(6,9,14,0.65) 100%); pointer-events: none; }
.srv-map__caption { z-index: 2; padding: 3px var(--s-2); font-size: var(--fs-100); background: rgba(10,13,18,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.srv-card__title { font-size: var(--fs-700); letter-spacing: -0.015em; }
.srv-info { gap: var(--s-3) var(--s-4); }
.srv-info dt { font-size: var(--fs-200); letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--fw-semibold); }
.srv-info dd strong { font-size: var(--fs-600); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.srv-meta { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bg-section); }
.srv-card__progress { border-top: 0; border-bottom: 0; padding: 0; margin: var(--s-4) 0 var(--s-3); }
.srv-card__head--tight { margin-bottom: var(--s-3); padding-bottom: var(--s-3); }
@media (max-width: 767px) { .srv-map { width: 100%; } .srv-card__title { font-size: var(--fs-600); } }

/* chart tooltip */
.chart-wrap { position: relative; }
.online-chart__hit { cursor: crosshair; }
.chart-tip { position: absolute; z-index: 5; min-width: 150px; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: var(--fs-200); line-height: 1.5; color: var(--text); pointer-events: none; transform: translateY(-100%); }
.chart-tip__label { margin-bottom: 2px; font-weight: var(--fw-bold); font-size: var(--fs-100); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.chart-tip__row { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.chart-tip__row b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip__row--total { margin-top: 2px; padding-top: 2px; border-top: 1px dashed var(--border); }
.chart-legend__item--stat { padding-left: var(--s-3); border-left: 1px solid var(--border); }
.chart-legend__item--stat b { color: var(--text); }

/* bots switch */
.bots-switch { display: inline-flex; padding: 2px; border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); }
.bots-switch__btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 var(--s-3); border: 0; border-radius: var(--radius-pill); background: transparent; font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition); }
.bots-switch__btn.is-active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
.bots-switch__btn i.fa { font-size: 11px; color: var(--accent-2); }

/* map stats */
.srv-maps__table-wrap { overflow-x: auto; }
.srv-maps__table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
.srv-maps__table th { padding: var(--s-2); border-bottom: 1px solid var(--border); text-align: left; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.srv-maps__table td { padding: var(--s-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.srv-maps__table tbody tr:last-child td { border-bottom: 0; }
.srv-maps__table tbody tr:hover td { background: var(--bg-section); }
.srv-maps__table tr.is-current td { background: var(--accent-soft); }
.srv-maps__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-maps__map { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); text-decoration: none; min-width: 0; }
.srv-maps__map:hover .srv-maps__name { color: var(--accent); }
.srv-maps__thumb { width: 56px; height: 32px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: var(--bg-section); }
.srv-maps__name { font-family: var(--font-mono, monospace); font-size: var(--fs-200); font-weight: var(--fw-semibold); }
.srv-maps__live { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-family: var(--font-sans, inherit); font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.srv-maps__share-col { width: 150px; }
.srv-maps__share-col small { display: inline-block; margin-left: var(--s-2); width: 32px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.srv-maps__share { display: inline-block; vertical-align: middle; width: calc(100% - 44px); height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.srv-maps__share-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.srv-maps__last { color: var(--text-soft); }
.srv-maps__more { margin-top: var(--s-3); }
.srv-maps__subtitle { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.srv-maps__subtitle i.fa { color: var(--accent); }
.srv-rotation { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.srv-rotation__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) repeat(3, 84px); gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-section); }
.srv-rotation__item.is-live { border-color: var(--success); background: var(--success-soft); }
.srv-rotation__thumb { width: 56px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--bg-2); }
.srv-rotation__map { font-family: var(--font-mono, monospace); font-size: var(--fs-200); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-rotation__when { font-size: var(--fs-100); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.srv-rotation__stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.srv-rotation__stat b { font-size: var(--fs-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-rotation__stat small { font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.srv-rotation__bots { font-size: var(--fs-100); font-weight: var(--fw-medium); color: var(--text-soft); }
.srv-rotation__bots i.fa { margin-left: 2px; font-size: 10px; }
@media (max-width: 767px) {
  .srv-rotation__item { grid-template-columns: 48px minmax(0, 1fr); row-gap: var(--s-2); }
  .srv-rotation__stat { flex-direction: row; justify-content: space-between; align-items: baseline; grid-column: 2; }
  .srv-maps__share-col { width: 100px; }
}

/* project card */
.srv-project__head { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; }
.srv-project__head:hover .srv-project__name { color: var(--accent); }
.srv-project__logo { width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); overflow: hidden; background: var(--bg-section); border: 1px solid var(--border); font-weight: var(--fw-bold); color: var(--accent); }
.srv-project__logo img { width: 100%; height: 100%; object-fit: cover; }
.srv-project__logo--placeholder { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; border: 0; }
.srv-project__id { min-width: 0; }
.srv-project__name { display: block; font-size: var(--fs-400); font-weight: var(--fw-bold); line-height: 1.2; }
.srv-project__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: 4px; font-size: var(--fs-100); color: var(--text-soft); }
.srv-project__meta i.fa { margin-right: 3px; }
.srv-project__text { margin: var(--s-3) 0 0; font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }
.srv-project__list-title { margin: var(--s-4) 0 var(--s-2); font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.srv-project__list { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: flex; flex-direction: column; }
.srv-project__srv { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-200); }
.srv-project__srv:last-child { border-bottom: 0; }
.srv-project__srv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.srv-project__srv-name:hover { color: var(--accent); }
.srv-project__srv-players { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.srv-project--cta { background: radial-gradient(80% 60% at 100% 0%, var(--accent-soft) 0%, transparent 60%), var(--card-bg); }
.srv-project--cta .srv-project__text { margin: 0 0 var(--s-3); }
@media (max-width: 767px) { .srv-card__body { grid-template-columns: 1fr; } .srv-card__head--tight { flex-direction: column; align-items: flex-start; } }

/* 40b. server page — project link hover, game cvars, connects card */
.srv-project__head, .srv-project__head:hover, .srv-project__head:focus { text-decoration: none; }
.srv-project__head * { text-decoration: none; }
.srv-project__head:hover .srv-project__name { color: var(--accent); }
.srv-project__srv-name:hover { text-decoration: none; }
.srv-cvars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-2); }
.srv-cvars__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--bg-section); border: 1px solid var(--border); font-size: var(--fs-200); }
.srv-cvars__label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-cvars__val { flex-shrink: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text); }
.srv-cvars__val--on  { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; }
.srv-cvars__val--off { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-2); color: var(--text-soft); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; }
.srv-connects__stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-2); }
.srv-connects__stat { display: flex; flex-direction: column; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--bg-section); min-width: 0; }
.srv-connects__stat b { font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-connects__stat--main { background: var(--accent-soft); }
.srv-connects__stat--main b { color: var(--accent); font-size: var(--fs-700); }
.srv-connects__stat small { margin-top: 2px; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.srv-connects__delta { font-size: var(--fs-100); font-weight: var(--fw-semibold); margin-left: 2px; }
.srv-connects__delta.is-up { color: var(--success); }
.srv-connects__delta.is-down { color: var(--danger); }
.srv-connects__bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: var(--s-3); padding: 0 2px; border-bottom: 1px solid var(--border); }
.srv-connects__bar { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: var(--accent); opacity: 0.55; transition: opacity var(--transition); }
.srv-connects__bar:hover { opacity: 1; }
.srv-connects__bar.is-today { opacity: 1; background: var(--accent-2); }
.srv-connects__axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.srv-connects__hint { margin: var(--s-3) 0 0; font-size: var(--fs-100); line-height: 1.45; color: var(--text-soft); }
.srv-connects__hint i.fa { color: var(--accent); margin-right: 3px; }
.srv-cvars { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* 40c. server page — map rotation as tidy columns */
.srv-rotation__item { grid-template-columns: 56px minmax(0, 1fr) 96px 96px 72px; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); }
.srv-rotation__stat { align-items: flex-end; justify-content: center; line-height: 1.15; }
.srv-rotation__stat b { font-size: var(--fs-400); }
.srv-rotation__stat small { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; white-space: nowrap; }
.srv-rotation__bots { font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; color: var(--accent-2); }
.srv-rotation__bots i.fa { margin-left: 0; font-size: 9px; }
.srv-rotation__map .srv-maps__live { vertical-align: 1px; }
@media (max-width: 767px) {
  .srv-rotation__item { grid-template-columns: 48px minmax(0, 1fr); }
  .srv-rotation__stat { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: baseline; padding-top: 2px; border-top: 1px dashed var(--border); }
  .srv-rotation__stat b { font-size: var(--fs-300); }
}
.srv-rotation__stat { min-width: 0; }
.srv-rotation__stat small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* reCAPTCHA v2: the widget iframe carries a 1px light frame that Google draws even
   for the dark theme — clip 2px around it and round the corners so it sits flush. */
.recaptcha-box > div { width: 300px !important; height: 74px !important; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
.recaptcha-box > div > div { width: 304px !important; height: 78px !important; }
.recaptcha-box iframe { margin: -2px 0 0 -2px; display: block; }


/* ==========================================================================
   41. AUTH SHELL — standalone layout for /account/* (no site chrome)
   ========================================================================== */
.auth-body { min-height: 100vh; background: var(--bg); }
.auth-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.auth-brand {
  position: sticky; top: 0; height: 100vh; align-self: start; overflow: hidden;
  display: flex; align-items: center;
  padding: var(--s-10) var(--s-12);
  color: #e8edf5;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(31, 111, 209, 0.45) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(240, 168, 54, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, #0f1622 0%, #0b0f16 100%);
}
.auth-brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 22px 22px; pointer-events: none; }
.auth-brand__inner { position: relative; z-index: 1; max-width: 460px; }
.auth-brand__logo { display: inline-block; margin-bottom: var(--s-10); }
.auth-brand__logo img { display: block; height: 40px; width: auto; }
.auth-brand__title { margin: 0 0 var(--s-3); font-size: var(--fs-900); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.025em; color: #fff; }
.auth-brand__lead { margin: 0 0 var(--s-8); font-size: var(--fs-400); line-height: 1.6; color: rgba(232, 237, 245, 0.72); }
.auth-brand__points { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.auth-brand__points li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-300); line-height: 1.5; color: rgba(232, 237, 245, 0.85); }
.auth-brand__points i.fa { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(255,255,255,0.08); color: #8fc0ff; font-size: 14px; }
.auth-brand__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.1); }
.auth-brand__stat b { display: block; font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.auth-brand__stat small { display: block; margin-top: 2px; font-size: var(--fs-100); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(232, 237, 245, 0.55); }
.auth-brand__foot { margin-top: var(--s-10); font-size: var(--fs-100); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(232, 237, 245, 0.4); }

.auth-panel { display: flex; flex-direction: column; min-width: 0; }
.auth-panel__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); }
.auth-panel__back { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control-sm); padding: 0 var(--s-3); border-radius: var(--radius-pill); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); }
.auth-panel__back:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.auth-panel__logo { display: none; margin-left: var(--s-2); }
.auth-panel__logo img { display: none; height: 30px; width: auto; }
.auth-panel__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.auth-panel__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--s-6) var(--s-6) var(--s-8); }
.auth-panel__flashes { max-width: 460px; margin: 0 auto var(--s-4); width: 100%; }
.auth-panel__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); font-size: var(--fs-100); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.auth-panel__legal a { color: var(--text-muted); text-decoration: none; }
.auth-panel__legal a:hover { color: var(--accent); }
.auth-panel__legal span { margin: 0 var(--s-2); }

/* the page shells fit into the panel: no glow, no site paddings; the
   register aside is replaced by the brand panel */
.auth-shell .auth-page { max-width: 460px; margin: 0 auto; padding: 0; width: 100%; }
.auth-shell .auth-page::before { display: none; }
.auth-shell .auth-page--narrow { max-width: 420px; }
.auth-shell .auth-page__cols { grid-template-columns: 1fr; gap: 0; }
.auth-shell .auth-info { display: none; }
.auth-shell .auth-card { box-shadow: var(--shadow); }
.auth-shell .auth-page__title { font-size: var(--fs-700); }
.auth-shell .auth-page__header { margin-bottom: var(--s-5); }

@media (max-width: 1023px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel__logo { display: inline-block; }
  .auth-panel__logo .header__brand-img--light { display: block; }
  [data-theme="dark"] .auth-panel__logo .header__brand-img--light { display: none; }
  [data-theme="dark"] .auth-panel__logo .header__brand-img--dark { display: block; }
}
@media (max-width: 767px) {
  .auth-panel__bar { padding: var(--s-3) var(--s-4); }
  .auth-panel__body { padding: var(--s-4) var(--s-4) var(--s-6); justify-content: flex-start; }
  .auth-panel__foot { justify-content: center; text-align: center; }
  .auth-shell .auth-card { padding: var(--s-5) var(--s-4); }
}
.auth-body { padding-top: 0 !important; }
.auth-panel__back { white-space: nowrap; }

/* 41b. auth shell — frameless forms, wide register with paired fields */
.auth-shell .auth-page--wide { max-width: 640px; }
.auth-shell .auth-card { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.auth-shell .auth-card::before { display: none; }
.auth-shell .auth-card__head { margin-bottom: var(--s-5); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.field-row > .field { min-width: 0; }
.field__hint--live.is-ok   { color: var(--success); }
.field__hint--live.is-err  { color: var(--danger); }
.field__hint--live.is-warn { color: var(--warning); }
.field__hint--live.is-ok i.fa, .field__hint--live.is-err i.fa, .field__hint--live.is-warn i.fa { color: inherit; }
.auth-form--sections .auth-section { padding-bottom: var(--s-4); }
.auth-form__submit { display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 599px) { .field-row { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ==========================================================================
   42. BANLIST v2 — policy guide + responsive ban rows
   ========================================================================== */
.ban-page { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.ban-head__stat { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-200); font-weight: var(--fw-semibold); white-space: nowrap; }
.ban-head__stat b { font-size: var(--fs-500); color: var(--text); font-variant-numeric: tabular-nums; }
.ban-head__stat.is-active { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.ban-head__stat.is-active b { color: var(--danger); }
.ban-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.ban-guide__item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ban-guide__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--s-1); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 16px; }
.ban-guide__icon--danger { background: var(--danger-soft); color: var(--danger); }
.ban-guide__icon--success { background: var(--success-soft); color: var(--success); }
.ban-guide__item h3 { margin: 0; font-size: var(--fs-400); font-weight: var(--fw-bold); }
.ban-guide__item p { margin: 0; font-size: var(--fs-200); line-height: 1.55; color: var(--text-muted); }
.ban-guide__link { margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-200); font-weight: var(--fw-semibold); }
.ban-guide__link a:not(.btn) { text-decoration: none; }
.ban-guide__link a:not(.btn):hover { text-decoration: underline; }
.ban-empty { padding: var(--s-10) var(--s-6); text-align: center; background: var(--card-bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.ban-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--s-4); border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 26px; }
.ban-empty h2 { margin: 0 0 var(--s-2); font-size: var(--fs-600); font-weight: var(--fw-bold); }
.ban-empty p { max-width: 460px; margin: 0 auto var(--s-4); color: var(--text-muted); }
/* legend + per-game counters above the cards */
.ban-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-4); }
.ban-toolbar__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-100); color: var(--text-muted); }
.ban-toolbar__hint { margin-right: var(--s-2); }
.ban-toolbar__games { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ban-toolbar__game { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--border); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--text-muted); }
.ban-toolbar__game img { width: 16px; height: 16px; object-fit: contain; }
.ban-toolbar__game b { color: var(--text); font-variant-numeric: tabular-nums; }

/* the ban itself: server · full reason (never truncated) · last seen */
.ban-cards { display: flex; flex-direction: column; gap: var(--s-3); }
.ban-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 150px; gap: var(--s-4) var(--s-5); align-items: center; padding: var(--s-4) var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: var(--radius-lg); transition: border-color var(--transition), box-shadow var(--transition); }
.ban-card:hover { border-color: var(--border-strong); border-left-color: var(--danger); box-shadow: var(--shadow-sm); }
.ban-card--manual { border-left-color: var(--warning, #f0a836); }
.ban-card--manual:hover { border-left-color: var(--warning, #f0a836); }
.ban-card--none { border-left-color: var(--border-strong); }
.ban-card__server { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ban-card__game { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--bg-section); border: 1px solid var(--border); }
.ban-card__game img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) opacity(.7); }
.ban-card__id { min-width: 0; }
.ban-card__name { font-size: var(--fs-300); font-weight: var(--fw-semibold); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(220, 60, 60, .55); text-decoration-thickness: 1px; }
.ban-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); margin-top: 4px; font-size: var(--fs-100); color: var(--text-muted); }
.ban-card__addr { padding: 1px 6px; border-radius: 4px; background: var(--bg-section); font-family: var(--font-mono, monospace); color: var(--text); }
.ban-card__meta .copy-btn { margin-left: -4px; }
.ban-card__country { display: inline-flex; align-items: center; gap: 5px; }
.ban-card__country img { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.ban-card__map { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono, monospace); }
.ban-card__map i.fa { color: var(--text-soft); }
.ban-card__reason { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ban-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ban-badge--auto { background: var(--danger-soft); color: var(--danger); }
.ban-badge--manual { background: var(--warning-soft, rgba(240,168,54,.16)); color: var(--warning, #c47a12); }
.ban-badge--none { background: var(--bg-section); color: var(--text-soft); }
.ban-card__text { margin: 0; font-size: var(--fs-200); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ban-card__seen { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.ban-card__seen-label { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.ban-card__seen b { font-size: var(--fs-300); font-weight: var(--fw-semibold); white-space: nowrap; }
.ban-card__seen-date { font-size: var(--fs-100); color: var(--text-muted); }
@media (max-width: 1023px) { .ban-guide { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .ban-card { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4); }
  .ban-card__seen { flex-direction: row; align-items: baseline; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--border); }
  .ban-card__seen-label { margin-right: auto; }
  .ban-toolbar__hint { display: none; }
}

/* ==========================================================================
   43. MSTATS v2 — master-server dashboard
   ========================================================================== */
.mst { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.mst-status { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mst-chip { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control-sm); padding: 0 var(--s-3); border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); font-size: var(--fs-100); color: var(--text-muted); white-space: nowrap; }
.mst-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.mst-chip--ok i.fa { color: var(--success); }
.mst-chip--warn { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.mst-chip--warn b, .mst-chip--warn i.fa { color: inherit; }

.mst-clients { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
.mst-client { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mst-client::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.mst-client__id { display: flex; align-items: center; gap: var(--s-3); padding-right: var(--s-5); border-right: 1px solid var(--border); }
.mst-client__icon { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 20px; box-shadow: var(--shadow-sm); }
.mst-client__name { font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.2; }
.mst-client__kind { margin-top: 2px; font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mst-client__kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-3); align-items: center; }
.mst-kpi { min-width: 0; padding: 0 var(--s-4); border-left: 1px solid var(--border); }
.mst-kpi:first-child { border-left: 0; padding-left: 0; }
.mst-kpi b { display: block; font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mst-kpi--main b { font-size: var(--fs-900); color: var(--accent); }
.mst-kpi span { display: block; margin-top: var(--s-1); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mst-delta { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill); font-size: var(--fs-100); font-style: normal; font-weight: var(--fw-bold); letter-spacing: 0; vertical-align: middle; }
.mst-delta.is-up { background: var(--success-soft); color: var(--success); }
.mst-delta.is-down { background: var(--danger-soft); color: var(--danger); }
.mst-client__nodata { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-100); }

.mst-row { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); align-items: stretch; }
.mst-row--chart { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.mst-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mst-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mst-card--servers { margin-bottom: var(--s-4); }
.mst-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.mst-card__head h2, .mst-card__head h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-400); font-weight: var(--fw-bold); }
.mst-card__head i.fa { color: var(--accent); }
.mst-card__hint { font-size: var(--fs-100); color: var(--text-soft); }
.mst-card--chart .ms-chart svg { max-height: 300px; margin: 0 auto; }
.mst-summary__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); }
.mst-summary__item { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bg-section); }
.mst-summary__item b { display: block; font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mst-summary__item b small { margin-left: 6px; font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--text-muted); letter-spacing: 0; }
.mst-summary__item span { display: block; margin-top: 3px; font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }

.mst-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: var(--fs-200); color: var(--text-muted); }
.mst-empty i.fa { font-size: 22px; color: var(--border-strong); }

.mst-bar { height: 5px; margin-top: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.mst-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--fill, var(--accent)); transition: width .4s ease; }

.mst-rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.mst-rank__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 96px; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px dashed var(--border); }
.mst-rank__item:last-child { border-bottom: 0; }
.mst-rank__num { font-weight: var(--fw-bold); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.mst-rank__body { min-width: 0; }
.mst-rank__name { display: inline-block; max-width: 100%; font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
a.mst-rank__name:hover { color: var(--accent); text-decoration: none; }
.mst-rank__addr { display: block; font-family: var(--font-mono, monospace); font-size: var(--fs-100); color: var(--text-soft); }
.mst-rank__val { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mst-rank__val small { display: block; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }

.mst-connect p { margin: 0 0 var(--s-3); font-size: var(--fs-200); line-height: 1.55; color: var(--text-muted); }
.mst-steps { margin: 0 0 var(--s-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); counter-reset: step; }
.mst-steps li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-200); line-height: 1.5; color: var(--text); }
.mst-steps li::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-100); font-weight: var(--fw-bold); }
.mst-connect__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mst-hashes { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.mst-connect__actions + .mst-hashes { margin-top: var(--s-4); }
.mst-hashes h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.mst-hashes h3 i.fa { color: var(--accent); }
.mst-hashes p { margin-bottom: var(--s-3); font-size: var(--fs-100); }
.mst-kv { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
.mst-kv th { padding: var(--s-1) var(--s-2); text-align: left; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.mst-kv td { padding: var(--s-2); border-bottom: 1px dashed var(--border); vertical-align: middle; }
.mst-kv tr:last-child td { border-bottom: 0; }
.mst-kv code { font-family: var(--font-mono, monospace); font-size: var(--fs-100); padding: 1px 5px; border-radius: 4px; background: var(--bg-section); }
.mst-kv .num { text-align: right; }

.mst-sec { margin: var(--s-8) 0 var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.mst-sec h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: var(--fs-600); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.mst-sec h2 i.fa { color: var(--accent); font-size: 18px; }
.mst-sec p { margin: 0; font-size: var(--fs-300); color: var(--text-muted); }

.mst-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.mst-tile { position: relative; padding: var(--s-4) var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mst-tile::after { content: ""; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px; border-radius: 50%; background: var(--tile, var(--accent)); opacity: 0.08; pointer-events: none; }
.mst-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: var(--s-3); border-radius: var(--radius); background: var(--tile-soft, var(--accent-soft)); color: var(--tile, var(--accent)); font-size: 14px; }
.mst-tile__val { font-size: var(--fs-800); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mst-tile__label { margin-top: var(--s-2); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mst-tile__split { display: flex; height: 6px; margin-top: var(--s-3); border-radius: 3px; overflow: hidden; background: var(--bg-2); }
.mst-tile__split i { display: block; height: 100%; }
.mst-tile__sub { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); font-size: var(--fs-100); color: var(--text-muted); }
.mst-tile__sub b { color: var(--text); }
.mst-tile--online  { --tile: var(--success); --tile-soft: var(--success-soft); }
.mst-tile--offline { --tile: var(--danger);  --tile-soft: var(--danger-soft); }
.mst-tile--total   { --tile: var(--text-muted); --tile-soft: var(--bg-section); }

.mst-tiers { margin: 0; padding: 0; list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--s-3); }
.mst-tier { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px; gap: var(--s-3); align-items: center; }
.mst-tier__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--tc, var(--accent)); color: #fff; font-size: 12px; }
.mst-tier__name { display: block; font-size: var(--fs-200); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-tier__val { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mst-tier__val small { color: var(--text-soft); font-weight: var(--fw-medium); }

.mst-games { margin: 0; padding: 0; list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--s-3); }
.mst-game { display: grid; grid-template-columns: 32px minmax(0, 1fr) repeat(3, 68px); gap: var(--s-3); align-items: center; }
.mst-game__icon { display: block; width: 32px; height: 32px; object-fit: contain; border-radius: 7px; background: var(--bg-section); }
.mst-game__name { display: block; font-size: var(--fs-200); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-game__cells { display: contents; }
.mst-game__cell { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mst-game__cell small { display: block; margin-top: 2px; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.mst-game__cell--online { color: var(--success); }

.mst-servers { display: flex; flex-direction: column; }
.mst-servers__head, .mst-server { display: grid; grid-template-columns: 30px minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) 170px; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; }
.mst-servers__head { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.mst-servers__head-right { text-align: right; }
.mst-server { border-bottom: 1px dashed var(--border); }
.mst-server:last-child { border-bottom: 0; }
.mst-server__num { font-weight: var(--fw-bold); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.mst-server__name { min-width: 0; }
.mst-server__name a { display: block; font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-server__name a:hover { color: var(--accent); text-decoration: none; }
.mst-server__addr { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; font-size: var(--fs-100); }
.mst-server__addr img { width: 18px; height: 12px; flex-shrink: 0; border-radius: 2px; }
.mst-server__addr code { font-family: var(--font-mono, monospace); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-server__map { font-family: var(--font-mono, monospace); font-size: var(--fs-100); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-server__players { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: var(--s-2); align-items: center; }
.mst-server__players .mst-bar { margin-top: 0; height: 6px; }
.mst-server__players b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mst-server__players b small { color: var(--text-soft); font-weight: var(--fw-medium); }

.mst-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.mst-bars__item { display: grid; grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, 1fr) 44px 64px; gap: var(--s-3); align-items: center; font-size: var(--fs-200); }
.mst-bars__num { font-weight: var(--fw-bold); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.mst-bars__name { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; font-weight: var(--fw-semibold); }
.mst-bars__name img { width: 20px; height: 14px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.mst-bars__name > span, .mst-bars__name code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-bars__name code { font-family: var(--font-mono, monospace); font-size: var(--fs-200); }
.mst-bars .mst-bar { margin-top: 0; height: 8px; }
.mst-bars__val { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mst-bars__sub { text-align: right; font-size: var(--fs-100); color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mst-bars__sub i.fa { margin-right: 2px; font-size: 10px; }

@media (max-width: 1023px) {
  .mst-row--chart, .mst-row--2 { grid-template-columns: 1fr; }
  .mst-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mst-client { grid-template-columns: 1fr; gap: var(--s-4); }
  .mst-client__id { padding-right: 0; padding-bottom: var(--s-3); border-right: 0; border-bottom: 1px solid var(--border); }
  .mst-summary__list { flex-direction: row; }
  .mst-summary__item { flex: 1; }
}
@media (max-width: 767px) {
  .mst-client__kpis { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .mst-kpi { border-left: 0; padding: 0; }
  .mst-kpi--main { grid-column: 1 / -1; }
  .mst-kpi b { font-size: var(--fs-600); }
  .mst-kpi--main b { font-size: var(--fs-800); }
  .mst-summary__list { flex-direction: column; }
  .mst-servers__head { display: none; }
  .mst-server { grid-template-columns: 24px minmax(0, 1fr); row-gap: 4px; }
  .mst-server__addr, .mst-server__map, .mst-server__players { grid-column: 2; }
  .mst-bars__item { grid-template-columns: 24px minmax(0, 1fr) 44px 64px; row-gap: 4px; }
  .mst-bars__num { grid-row: 1; grid-column: 1; }
  .mst-bars__name { grid-row: 1; grid-column: 2; }
  .mst-bars__val { grid-row: 1; grid-column: 3; }
  .mst-bars__sub { grid-row: 1; grid-column: 4; }
  .mst-bars .mst-bar { grid-row: 2; grid-column: 2 / -1; height: 6px; }
  .mst-game { grid-template-columns: 32px minmax(0, 1fr); }
  .mst-game__cells { display: flex; gap: var(--s-4); grid-column: 2; }
  .mst-game__cell { text-align: left; }
  .mst-tier { grid-template-columns: 28px minmax(0, 1fr) 72px; }
}
@media (max-width: 480px) { .mst-tiles { grid-template-columns: 1fr; } }

/* 43b. mstats v2 — chart scrolls horizontally on narrow screens */
@media (max-width: 767px) { .mst-card--chart .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mst-card--chart .ms-chart svg { min-width: 560px; max-height: none; } }

/* 44. NextClient connects popover on IP:PORT hover (listing, TOP-5, SUPER VIP) */
[data-nc-addr] { cursor: help; }
.nc-pop {
  position: fixed; z-index: 9999; width: 300px; padding: var(--s-3);
  display: none; opacity: 0; pointer-events: none;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transition: opacity 120ms;
}
.nc-pop.is-visible { display: block; opacity: 1; }
.nc-pop::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--card-bg); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: rotate(45deg); }
.nc-pop.is-below::before { bottom: auto; top: -6px; transform: rotate(-135deg); }
.nc-pop__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: 0.02em; }
.nc-pop__head i.fa { color: var(--accent); }
.nc-pop__stats .srv-connects__stat { padding: var(--s-2); }
.nc-pop__stats .srv-connects__stat b { font-size: var(--fs-400); }
.nc-pop__stats .srv-connects__stat--main b { font-size: var(--fs-600); }
.nc-pop__bars { height: 40px; margin-top: var(--s-2); }
.nc-pop__hint { margin: var(--s-2) 0 0; font-size: 10px; line-height: 1.4; color: var(--text-soft); }
.nc-pop__hint i.fa { color: var(--accent); margin-right: 2px; }
@media (hover: none) { .nc-pop { display: none !important; } }

/* ==========================================================================
   45. HOSTING RATING v2 — catalog, hosting page, reviews, server card, popover
   ========================================================================== */
.hst { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.hst-head__stats { display: flex; gap: var(--s-5); }
.hst-head__stats span { display: flex; flex-direction: column; }
.hst-head__stats b { font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hst-head__stats small { margin-top: 4px; font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }

.hst-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius); background: var(--bg-section); border: 1px solid var(--border); overflow: hidden; }
.hst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.hst-logo b { display: none; font-size: 28px; font-weight: var(--fw-bold); color: var(--accent); }
.hst-logo--initial { background: var(--accent-soft); border-color: transparent; }
.hst-logo--initial b { display: block; }
.hst-logo--card { width: 88px; height: 88px; }
.hst-logo--hero { width: 132px; height: 132px; border-radius: var(--radius-lg); }
.hst-logo--hero b { font-size: 48px; }
.hst-logo--sm { width: 52px; height: 52px; }
.hst-logo--sm b { font-size: 20px; }
.hst-logo--xs { width: 36px; height: 36px; border-radius: 6px; }
.hst-logo--xs b { font-size: 14px; }
.hst-logo--xs img { padding: 3px; }

.hst-stars { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-200); white-space: nowrap; }
.hst-stars b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.hst-stars small { color: var(--text-soft); }
.stars--lg { font-size: 22px; letter-spacing: 2px; }

.hst-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.hst-tab { display: inline-flex; align-items: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-bg); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; transition: all var(--transition); }
.hst-tab span { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--bg-section); font-size: var(--fs-100); color: var(--text-soft); }
.hst-tab:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.hst-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hst-tab.is-active span { background: rgba(255,255,255,0.22); color: #fff; }

.hst-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.hst-search { position: relative; flex: 1 1 280px; }
.hst-search i.fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.hst-search .input { width: 100%; padding-left: 34px; padding-right: 34px; }
.hst-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-soft); text-decoration: none; }
.hst-search__clear:hover { background: var(--bg-section); color: var(--text); }
.hst-sort { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); }
.hst-sort__btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: var(--radius-pill); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.hst-sort__btn:hover { color: var(--text); text-decoration: none; }
.hst-sort__btn.is-active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }

.hst-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.hst-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s-3); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-bg); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; }
.hst-chip small { color: var(--text-soft); }
.hst-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.hst-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.hst-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--bg-section); font-size: var(--fs-200); color: var(--text-muted); }
.hst-filter-note i.fa { color: var(--accent); }
.hst-filter-note a { margin-left: auto; }

.hst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.hst-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.hst-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.hst-card--featured { border-color: var(--accent-2); box-shadow: inset 0 3px 0 0 var(--accent-2); }
.hst-card__rank { position: absolute; top: -10px; left: var(--s-4); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); font-size: var(--fs-100); font-weight: var(--fw-bold); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.hst-card__rank.is-top { background: var(--accent-2); border-color: var(--accent-2); color: #1a1200; }
.hst-card__top { display: flex; gap: var(--s-4); align-items: flex-start; }
.hst-card__logo-link { flex-shrink: 0; text-decoration: none; }
.hst-card__id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.hst-card__name { margin: 0; font-size: var(--fs-500); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.2; }
.hst-card__name a { color: var(--text); text-decoration: none; }
.hst-card__name a:hover { color: var(--accent); }
.hst-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hst-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
a.hst-badge:hover { background: var(--accent); color: #fff; text-decoration: none; }
.hst-badge--featured { background: var(--accent-2); color: #1a1200; }
.hst-badge--mine { background: var(--success-soft); color: var(--success); }
.hst-card__site { font-size: var(--fs-100); color: var(--text-soft); }
.hst-card__site i.fa { margin-right: 3px; }
.hst-card__desc { margin: 0; font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hst-card__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.hst-fact { position: relative; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--bg-section); }
.hst-fact b { display: block; font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hst-fact b.is-online, .hst-side-stats b.is-online, .srv-hosting__stats b.is-online { color: var(--success); }
.hst-fact small { display: block; margin-top: 2px; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hst-thumbs-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--danger-soft); overflow: hidden; }
.hst-thumbs-bar i { display: block; height: 100%; background: var(--success); }
.hst-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hst-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: var(--bg-section); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.hst-tag:hover { background: var(--accent); color: #fff; text-decoration: none; }
.hst-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); border-top: 1px dashed var(--border); }
.hst-card__ext { margin-left: auto; font-size: var(--fs-200); color: var(--text-muted); text-decoration: none; }
.hst-card__ext:hover { color: var(--accent); }
.hst-empty { padding: var(--s-10) var(--s-6); text-align: center; background: var(--card-bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.hst-empty i.fa { font-size: 40px; color: var(--text-soft); }
.hst-empty h2 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-500); }
.hst-empty p { margin: 0; color: var(--text-muted); }
.hst-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.hst-about__item { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-section); font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }
.hst-about__item i.fa { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--card-bg); color: var(--accent); }
.hst-about__item b { display: block; margin-bottom: 2px; color: var(--text); }

/* hosting page */
.hst-show__crumb { margin-bottom: var(--s-3); font-size: var(--fs-200); }
.hst-show__crumb a { color: var(--text-muted); text-decoration: none; }
.hst-show__crumb a:hover { color: var(--accent); }
.hst-note { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-2) var(--s-4); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-200); }
.hst-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) 220px; gap: var(--s-5); align-items: start; margin-bottom: var(--s-4); padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hst-hero--featured { border-color: var(--accent-2); box-shadow: inset 0 3px 0 0 var(--accent-2); }
.hst-hero__id { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.hst-hero__name { margin: 0; font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.15; }
.hst-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hst-hero__lead { margin: 0; font-size: var(--fs-300); line-height: 1.55; color: var(--text-muted); }
.hst-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hst-vote { display: inline-flex; gap: var(--s-1); margin-left: auto; }
.hst-vote__btn { display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; font-variant-numeric: tabular-nums; transition: all var(--transition); }
.hst-vote__btn:hover:not(:disabled) { background: var(--bg-section); color: var(--text); }
.hst-vote__btn--up.is-active { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.hst-vote__btn--down.is-active { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.hst-hero__score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-section); text-align: center; }
.hst-score { display: flex; align-items: baseline; gap: 6px; }
.hst-score b { font-size: 44px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hst-score small { font-size: var(--fs-200); color: var(--text-soft); }
.hst-score__count { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); }
.hst-score__thumbs { font-size: var(--fs-100); color: var(--text-soft); }
.hst-show__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-4); align-items: start; }
.hst-show__main, .hst-show__side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.hst-block { padding: var(--s-5); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hst-block__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: var(--fs-500); font-weight: var(--fw-bold); }
.hst-block__title--sm { font-size: var(--fs-300); margin-bottom: var(--s-3); }
.hst-block__title i.fa { color: var(--accent); }
.hst-block__count { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-section); font-size: var(--fs-100); color: var(--text-soft); }
.hst-body { font-size: var(--fs-300); line-height: 1.6; color: var(--text-muted); }
.hst-body p { margin: 0 0 var(--s-3); }
.hst-body p:last-child { margin: 0; }
.hst-body ul, .hst-body ol { margin: 0 0 var(--s-3); padding-left: 22px; }

.hst-review-form { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--bg-section); }
.hst-review-form__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hst-review-form__head > b { font-size: var(--fs-300); }
.hst-rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.hst-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.hst-rate label { font-size: 26px; line-height: 1; color: var(--border-strong); cursor: pointer; transition: color 80ms, transform 80ms; }
.hst-rate label:hover, .hst-rate label:hover ~ label, .hst-rate input:checked ~ label { color: var(--accent-2); }
.hst-rate label:hover { transform: scale(1.12); }
.hst-rate__word { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--accent-2); min-width: 80px; }
.hst-review-form__text { width: 100%; resize: vertical; min-height: 96px; }
.hst-review-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hst-review-form__hint { font-size: var(--fs-100); color: var(--text-soft); }
.hst-review-form__btns { display: flex; gap: var(--s-2); }
.hst-review-auth { margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bg-section); font-size: var(--fs-200); color: var(--text-muted); }
.hst-review-auth a { font-weight: var(--fw-bold); }
.hst-reviews-empty { padding: var(--s-6) var(--s-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: var(--fs-200); color: var(--text-muted); }
.hst-reviews { display: flex; flex-direction: column; gap: var(--s-3); }
.hst-review { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hst-review.is-mine { border-color: var(--success); }
.hst-review__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.hst-review__head .header__avatar { width: 36px; height: 36px; font-size: 14px; }
.hst-review__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hst-review__who b { font-size: var(--fs-300); }
.hst-review__who small { font-size: var(--fs-100); color: var(--text-soft); }
.hst-review__text { font-size: var(--fs-300); line-height: 1.55; color: var(--text); white-space: normal; }
.hst-review__reply { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); font-size: var(--fs-200); line-height: 1.5; }
.hst-review__reply b { display: block; margin-bottom: 4px; color: var(--accent); }
.hst-review__reply small { color: var(--text-soft); font-weight: var(--fw-medium); }

.hst-dist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hst-dist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: var(--s-2); font-size: var(--fs-200); }
.hst-dist li span { color: var(--text-muted); white-space: nowrap; }
.hst-dist li i { display: block; height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.hst-dist li b { display: block; height: 100%; border-radius: 4px; background: var(--accent-2); }
.hst-dist li em { font-style: normal; text-align: right; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.hst-side-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.hst-side-stats div { padding: var(--s-2); border-radius: var(--radius); background: var(--bg-section); text-align: center; }
.hst-side-stats b { display: block; font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hst-side-stats small { display: block; margin-top: 2px; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.hst-side-empty { margin: 0; font-size: var(--fs-200); color: var(--text-soft); }
.hst-srv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hst-srv-list li { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-200); }
.hst-srv-list li:last-child { border-bottom: 0; }
.hst-srv-list img { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.hst-srv-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-weight: var(--fw-semibold); }
.hst-srv-list__name:hover { color: var(--accent); }
.hst-srv-list__players { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.hst-srv-list__players.is-online { color: var(--success); }

/* server page card */
.srv-hosting__head { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; }
.srv-hosting__head:hover .srv-hosting__name { color: var(--accent); }
.srv-hosting__id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.srv-hosting__name { font-size: var(--fs-400); font-weight: var(--fw-bold); line-height: 1.2; }
.srv-hosting__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.srv-hosting__stats div { padding: var(--s-2); border-radius: var(--radius); background: var(--bg-section); text-align: center; }
.srv-hosting__stats b { display: block; font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.srv-hosting__stats small { display: block; margin-top: 2px; font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.srv-hosting__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.srv-hosting__hint { margin: var(--s-3) 0 0; font-size: var(--fs-100); color: var(--text-soft); }
.srv-hosting__hint i.fa { color: var(--accent); margin-right: 3px; }

/* popover block */
.nc-pop__host { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--border); }
.nc-pop__host:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nc-pop__host .hst-logo { width: 40px; height: 40px; border-radius: 8px; }
.nc-pop__host .hst-logo b { font-size: 16px; }
.nc-pop__host-id { min-width: 0; display: flex; flex-direction: column; }
.nc-pop__host-id small { font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.nc-pop__host-id b { font-size: var(--fs-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-pop__host-id span { font-size: var(--fs-100); color: var(--text-muted); }
.nc-pop__host-id span i { color: var(--accent-2); font-style: normal; }

@media (max-width: 1023px) {
  .hst-grid { grid-template-columns: 1fr; }
  .hst-hero { grid-template-columns: auto minmax(0, 1fr); }
  .hst-hero__score { grid-column: 1 / -1; flex-direction: row; justify-content: space-around; flex-wrap: wrap; }
  .hst-show__grid { grid-template-columns: 1fr; }
  .hst-about { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hst-head__stats { gap: var(--s-4); }
  .hst-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hst-hero { grid-template-columns: 1fr; }
  .hst-logo--hero { width: 96px; height: 96px; }
  .hst-sort { flex-wrap: wrap; }
  .hst-vote { margin-left: 0; }
}

/* 46. block-style links never get the text underline on hover */
.srv-hosting__head, .srv-hosting__head:hover, .srv-hosting__head *,
.srv-project__head, .srv-project__head:hover, .srv-project__head *,
.srv-project__srv-name:hover,
.srv-maps__map, .srv-maps__map:hover, .srv-maps__map *,
.hst-card__name a:hover, .hst-card__logo-link:hover, .hst-srv-list__name:hover, .hst-card__ext:hover,
.hst-tab:hover, .hst-chip:hover, .hst-tag:hover, a.hst-badge:hover, .hst-show__back a:hover,
.mst-server__name a:hover, a.mst-rank__name:hover,
.ban-guide__link .btn:hover, .nc-pop a:hover,
.promo-card__name a:hover, .vip-card__name a:hover, .server-project-badge:hover, .server-page__back:hover { text-decoration: none; }
.srv-hosting__site { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-100); color: var(--text-soft); }
.hst-show__back { margin-bottom: var(--s-3); }
.srv-hosting__tasix, .nc-pop__tasix { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: 10px; font-weight: var(--fw-bold); font-style: normal; letter-spacing: 0.04em; vertical-align: middle; }

/* ==========================================================================
   47. ERROR / MAINTENANCE SHELL — 404, 503 (standalone layouts)
   ========================================================================== */
.err-body { margin: 0; padding-top: 0 !important; min-height: 100vh; background:
    radial-gradient(60% 50% at 100% 0%, rgba(31, 111, 209, 0.14) 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(240, 168, 54, 0.10) 0%, transparent 60%),
    var(--bg); }
.err-shell { display: flex; flex-direction: column; min-height: 100vh; }
.err-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-6); }
.err-brand img { display: none; height: 30px; width: auto; }
.err-brand .header__brand-img--light { display: block; }
[data-theme="dark"] .err-brand .header__brand-img--light { display: none; }
[data-theme="dark"] .err-brand .header__brand-img--dark { display: block; }
.err-bar__tools { display: flex; align-items: center; gap: var(--s-2); }
.err-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); }
.err-card { width: 100%; max-width: 560px; padding: var(--s-8) var(--s-6); text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.err-code { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: 84px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.err-code i.fa { font-size: 64px; color: var(--accent); }
.err-title { margin: 0 0 var(--s-2); font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.err-text { margin: 0 auto var(--s-5); max-width: 440px; font-size: var(--fs-300); line-height: 1.55; color: var(--text-muted); }
.err-search { position: relative; display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.err-search i.fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.err-search .input { flex: 1; padding-left: 36px; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.err-path { margin-top: var(--s-5); font-size: var(--fs-100); color: var(--text-soft); }
.err-path code { font-family: var(--font-mono, monospace); padding: 2px 8px; border-radius: 4px; background: var(--bg-section); }
.err-foot { padding: var(--s-4) var(--s-6); text-align: center; font-size: var(--fs-100); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.err-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--s-4); border-radius: 22px; background: var(--accent-soft); color: var(--accent); font-size: 30px; box-shadow: 0 8px 24px rgba(31, 111, 209, 0.25); }
.err-badge--warn { background: var(--warning-soft); color: var(--warning); box-shadow: 0 8px 24px rgba(240, 168, 54, 0.25); }
.err-until { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background: var(--bg-section); font-size: var(--fs-200); color: var(--text-muted); }
.err-until b { color: var(--text); }
.err-progress { position: relative; height: 4px; margin: 0 auto var(--s-5); max-width: 320px; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.err-progress i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: err-slide 1.6s ease-in-out infinite; }
@keyframes err-slide { to { left: 100%; } }
@media (max-width: 599px) {
  .err-card { padding: var(--s-6) var(--s-4); }
  .err-code { font-size: 64px; } .err-code i.fa { font-size: 48px; }
  .err-search { flex-direction: column; }
  .err-search i.fa { display: none; }
  .err-search .input { padding-left: var(--s-3); }
  .err-bar { padding: var(--s-3) var(--s-4); }
}

/* 48. deferred home blocks — skeleton shapes + reveal fade */
.skeleton-vip { height: 230px; border-radius: var(--radius-lg); }
[data-skeleton-placeholder] .promo-grid .skeleton { aspect-ratio: 16 / 19; border-radius: var(--radius-lg); }
@keyframes sk-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-skeleton-target].is-deferred > * { animation: sk-reveal 260ms ease-out both; }
@media (prefers-reduced-motion: reduce) { [data-skeleton-target].is-deferred > * { animation: none; } }
@media (max-width: 767px) { .skeleton-vip { height: 190px; } [data-skeleton-placeholder] .promo-grid .skeleton:nth-child(n+3) { display: none; } }
.mst-client__icon--img { background: var(--bg-section); border: 1px solid var(--border); box-shadow: none; overflow: hidden; width: 56px; height: 56px; border-radius: 14px; }
.mst-client__icon--img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* 49. top progress bar + image shimmer */
#top-progress { position: fixed; top: 0; left: 0; z-index: 10000; height: 3px; width: 0; pointer-events: none; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent), 0 0 2px var(--accent); transition: width 240ms ease, opacity 400ms ease; }
#top-progress.is-done { opacity: 0; }
.img-shimmer { background: linear-gradient(90deg, var(--bg-section) 0%, var(--bg-2) 45%, var(--bg-section) 90%) !important; background-size: 200% 100% !important; animation: shimmer 1.4s ease-in-out infinite; }
.img-shimmer::before { opacity: 0 !important; }
.js .promo-card__map-bg:not(.is-loaded):not(.is-broken), .js .vip-card__map-bg:not(.is-loaded):not(.is-broken) { opacity: 0; }
.promo-card__map-bg.is-loaded, .vip-card__map-bg.is-loaded { animation: img-in 320ms ease-out both; }
@keyframes img-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .img-shimmer { animation: none; } .promo-card__map-bg.is-loaded, .vip-card__map-bg.is-loaded { animation: none; } }
.js td.map-cell.map-loading::before { background-image: linear-gradient(90deg, var(--bg-section) 0%, var(--bg-2) 45%, var(--bg-section) 90%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
/* 50. keep the share / top-maps strip 2px below the progress bar */
.pre-header { padding-top: 2px; box-sizing: border-box; }

/* 51. cookie consent bar */
.cookie-bar { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 9500; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); width: min(520px, calc(100vw - 2 * var(--s-5))); padding: var(--s-4) var(--s-5); background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px); transition: opacity 280ms ease, transform 280ms ease; }
.cookie-bar.is-visible { opacity: 1; transform: none; }
.cookie-bar__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.cookie-bar__body { min-width: 0; padding-right: var(--s-6); }
.cookie-bar__title { margin-bottom: 4px; font-size: var(--fs-300); font-weight: var(--fw-bold); }
.cookie-bar__text { margin: 0; font-size: var(--fs-200); line-height: 1.5; color: var(--text-muted); }
.cookie-bar__text a { font-weight: var(--fw-semibold); white-space: nowrap; }
.cookie-bar__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.cookie-bar__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); cursor: pointer; }
.cookie-bar__close:hover { background: var(--bg-section); color: var(--text); }
@media (max-width: 599px) {
  .cookie-bar { right: var(--s-3); left: var(--s-3); bottom: var(--s-3); width: auto; padding: var(--s-4); }
  .cookie-bar__actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }
.cookie-bar[hidden] { display: none !important; }
.cookie-bar:not(.is-visible) { pointer-events: none; }

/* 52. hosting identity blocks — server page card (v2) + popover; letter tile instead of logos */
.srv-hosting--v2 { text-align: center; }
.srv-hosting__hero { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--radius-lg); background: radial-gradient(80% 70% at 50% 0%, hsla(var(--h), 70%, 55%, 0.18) 0%, transparent 70%), var(--bg-section); }
.srv-hosting__letter { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(135deg, hsl(var(--h), 70%, 52%), hsl(calc(var(--h) + 40), 75%, 42%)); color: #fff; font-size: 30px; font-weight: var(--fw-bold); letter-spacing: -0.02em; box-shadow: 0 10px 24px hsla(var(--h), 70%, 45%, 0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.srv-hosting__name { display: block; margin-top: var(--s-1); font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text); text-decoration: none; }
a.srv-hosting__name:hover { color: var(--accent); text-decoration: none; }
.srv-hosting__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.srv-hosting__chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--border); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; }
a.srv-hosting__chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.srv-hosting__chip--tasix { background: var(--success-soft); border-color: transparent; color: var(--success); }
.srv-hosting__chip--stars .stars { font-size: 11px; }
.srv-hosting__chip--stars b { color: var(--text); }
.srv-hosting--v2 .srv-hosting__stats { margin-top: var(--s-3); }
.srv-hosting--v2 .srv-hosting__actions { justify-content: center; }
.srv-hosting--v2 .srv-hosting__hint { text-align: center; }

.nc-host { margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--radius); background: radial-gradient(90% 80% at 0% 0%, hsla(var(--h), 70%, 55%, 0.16) 0%, transparent 70%), var(--bg-section); border: 1px solid var(--border); }
.nc-host:first-child { margin-top: 0; }
.nc-host__eyebrow { margin-bottom: var(--s-2); font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.nc-host__row { display: flex; align-items: center; gap: var(--s-3); }
.nc-host__letter { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, hsl(var(--h), 70%, 52%), hsl(calc(var(--h) + 40), 75%, 42%)); color: #fff; font-size: 20px; font-weight: var(--fw-bold); box-shadow: 0 6px 16px hsla(var(--h), 70%, 45%, 0.35); }
.nc-host__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nc-host__id b { font-size: var(--fs-300); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-host__id > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-100); color: var(--text-muted); }
.nc-host__id .nc-pop__tasix { margin-left: 0; }
.nc-host__site i.fa { margin-right: 3px; color: var(--text-soft); }
.nc-host__stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--border); font-size: var(--fs-100); color: var(--text-muted); }
.nc-host__stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.nc-host__stats b.is-online { color: var(--success); }
.nc-host__stats b i { font-style: normal; color: var(--accent-2); }

/* 53. LOGIN DIALOG (header "Войти") — two-pane card: brand panel + form.
   Opened/closed by app.js: .is-open mounts it, .is-shown runs the transition. */
.lm { position: fixed; inset: 0; z-index: 9000; display: none; }
.lm.is-open { display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); overflow-y: auto; }
.lm__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 14, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms ease; }
.lm.is-shown .lm__backdrop { opacity: 1; }
.lm__dialog { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); width: 100%; max-width: 780px; margin: auto; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; outline: 0; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.lm.is-shown .lm__dialog { opacity: 1; transform: none; }
.lm__dialog.is-shake { animation: lmShake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes lmShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

/* brand pane */
.lm__brand { position: relative; display: flex; flex-direction: column; padding: 28px var(--s-6); color: #e8edf5; background: radial-gradient(70% 55% at 100% 0%, rgba(31, 111, 209, 0.5) 0%, transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(240, 168, 54, 0.22) 0%, transparent 60%), linear-gradient(160deg, #0f1622 0%, #0b0f16 100%); }
.lm__brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 22px 22px; pointer-events: none; }
.lm__brand > * { position: relative; z-index: 1; }
.lm__brand-logo { display: block; align-self: flex-start; height: 32px; width: auto; margin-bottom: 28px; }
.lm__brand-title { margin: 0 0 var(--s-3); font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.lm__brand-lead { margin: 0 0 var(--s-6); font-size: var(--fs-200); line-height: 1.55; color: rgba(232, 237, 245, 0.7); }
.lm__brand-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.lm__brand-points li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-200); line-height: 1.45; color: rgba(232, 237, 245, 0.85); }
.lm__brand-points i.fa { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,0.08); color: #8fc0ff; font-size: 13px; }
.lm__brand-foot { margin-top: auto; padding-top: var(--s-6); font-size: var(--fs-100); color: rgba(232, 237, 245, 0.5); }
.lm__brand-foot i.fa { margin-right: 4px; color: #6fd39a; }

/* form pane */
.lm__panel { position: relative; padding: 28px 28px var(--s-6); }
.lm__close { position: absolute; top: var(--s-4); right: var(--s-4); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-section); color: var(--text-soft); font-size: 15px; cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); }
.lm__close:hover { background: var(--border); color: var(--text); transform: rotate(90deg); }
.lm__head { margin-bottom: var(--s-5); padding-right: var(--s-8); }
.lm__title { margin: 0 0 var(--s-1); font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.lm__subtitle { margin: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--text-muted); }
.lm__alert { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--danger-soft); border: 1px solid var(--danger); font-size: var(--fs-200); line-height: 1.45; color: var(--danger); }
.lm__alert[hidden] { display: none; }
.lm__alert i.fa { margin-top: 2px; }
.lm__form { display: flex; flex-direction: column; gap: var(--s-4); }
.lm__form .field { margin-bottom: 0; }
.lm__input { position: relative; }
.lm__input > i.fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; text-align: center; color: var(--text-soft); font-size: 14px; pointer-events: none; transition: color var(--transition); }
.lm__input:focus-within > i.fa { color: var(--accent); }
.lm__input .input { height: 46px; padding-left: 42px; font-size: var(--fs-300); }
.lm__input--suffix .input { padding-right: 44px; }
.lm__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.lm__remember { display: flex; align-items: center; gap: 10px; margin-top: calc(-1 * var(--s-1)); padding: 0; font-size: var(--fs-200); line-height: 1.3; }
.lm__remember input[type="checkbox"] { margin: 0; }
.lm__remember span { padding-top: 1px; }
.lm__submit { position: relative; height: 48px; font-size: var(--fs-300); box-shadow: 0 8px 20px var(--accent-strong); }
.lm__submit .lm__submit-busy { display: none; }
.lm__submit.is-busy .lm__submit-label { display: none; }
.lm__submit.is-busy .lm__submit-busy { display: inline-flex; align-items: center; gap: var(--s-2); }
.lm__submit.is-busy, .lm__submit:disabled { opacity: 0.85; cursor: progress; }
.lm .recaptcha-field { margin: 0; }
.lm__divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-100); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.lm__divider::before, .lm__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lm__register { height: 46px; background: var(--bg-section); border-color: var(--border); color: var(--text); font-weight: var(--fw-semibold); }
.lm__register:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.lm__legal { margin: var(--s-4) 0 0; font-size: var(--fs-100); line-height: 1.5; text-align: center; color: var(--text-soft); }
.lm__legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.lm__legal a:hover { color: var(--accent); }

@media (max-width: 767px) {
  .lm.is-open { padding: var(--s-3); align-items: flex-start; }
  .lm__dialog { grid-template-columns: 1fr; max-width: 440px; border-radius: 16px; }
  .lm__brand { display: none; }
  .lm__panel { padding: var(--s-6) var(--s-4) var(--s-5); }
  .lm__title { font-size: var(--fs-600); }
}
@media (prefers-reduced-motion: reduce) { .lm__backdrop, .lm__dialog { transition: none; } .lm__dialog.is-shake { animation: none; } }

/* 54. ACCOUNT DROPDOWN (header) — flat, list-based: identity, balance row,
   cabinet sections, settings, logout. Radius = --radius like the buttons. */
.menu--account.acct { min-width: 320px; padding: 0; border-radius: var(--radius); border-color: var(--border-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); overflow: hidden; }
.acct__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--bg-section); border-bottom: 1px solid var(--border); }
.acct__head .header__avatar--lg { width: 42px; height: 42px; font-size: 17px; }
.acct__who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.acct__name { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); }
.acct__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__role { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--accent-2-soft); color: var(--accent-2); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.acct__email { font-size: var(--fs-100); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.acct__balance { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); }
.acct__balance-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 6px 0; color: var(--text); text-decoration: none; }
.acct__balance-main:hover { text-decoration: none; }
.acct__balance-main:hover .acct__balance-value { color: var(--accent); }
.acct__balance-label { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--text-muted); }
.acct__balance-label i.fa { width: 16px; text-align: center; color: var(--text-soft); margin-right: 2px; }
.acct__balance-value { transition: color var(--transition); font-size: var(--fs-400); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.acct__balance-value small { font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-soft); }
.acct__balance-topup { flex-shrink: 0; display: inline-flex; text-decoration: none; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: var(--fs-100); font-weight: var(--fw-semibold); white-space: nowrap; transition: background var(--transition); }
.acct__balance-topup:hover { background: var(--accent-hover); text-decoration: none; color: var(--on-accent); }

.acct__group { padding: var(--s-1); border-bottom: 1px solid var(--border); }
.acct__group--foot { border-bottom: 0; }
.acct__row { display: flex; align-items: center; gap: var(--s-3); height: 38px; padding: 0 var(--s-3); border-radius: 6px; color: var(--text); font-size: var(--fs-300); font-weight: var(--fw-medium); text-decoration: none; transition: background var(--transition), color var(--transition); }
.acct__row > i.fa { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-section); color: var(--text-muted); font-size: 13px; transition: background var(--transition), color var(--transition); }
.acct__row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__row > b { color: var(--text-soft); font-size: 11px; }
.acct__row:hover { background: var(--bg-section); color: var(--text); text-decoration: none; }
.acct__row:hover > i.fa { background: var(--accent); color: var(--on-accent); }
.acct__row.is-active { background: var(--accent-soft); color: var(--accent); }
.acct__row.is-active > i.fa { background: var(--accent); color: var(--on-accent); }
.acct__row--admin > i.fa { background: var(--accent-2-soft); color: var(--accent-2); }
.acct__row--admin:hover > i.fa { background: var(--accent-2); color: #fff; }
.acct__row--logout { color: var(--text-muted); }
.acct__row--logout:hover { background: var(--danger-soft); color: var(--danger); }
.acct__row--logout:hover > i.fa { background: var(--danger); color: #fff; }

/* 56. /mstats: instant chart tooltip + hover hooks */
.ms-chart { position: relative; }
.ms-chart__bar { transition: fill-opacity var(--transition); cursor: crosshair; }
.ms-chart__bar.is-hover { fill-opacity: 1 !important; stroke: var(--text); stroke-width: 1; }
.ms-tip { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: baseline; gap: var(--s-2); padding: 6px 10px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); white-space: nowrap; font-size: var(--fs-100); color: var(--text-muted); }
.ms-tip[hidden] { display: none; }
.ms-tip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tip-color, var(--accent)); align-self: center; }
.ms-tip b { font-size: var(--fs-400); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.mst-rank__addr code, .mst-server__addr code[data-nc-addr] { cursor: help; }
.mst-server__map .map-with-preview { padding: 0; font-size: inherit; }

/* 57. unsold TOP-5 / Super VIP slots: a random live server shows through, blurred and
   dimmed, not clickable; the whole card is one link to the shop with "место свободно" */
.promo-card--filler, .vip-card--filler { position: relative; border-style: dashed; border-color: var(--border-strong); }
.promo-card--filler > *:not(.slot-vacant), .vip-card--filler > *:not(.slot-vacant) { filter: blur(3px) saturate(.7) brightness(.55); pointer-events: none; user-select: none; }
.promo-card--filler:hover, .vip-card--filler:hover { border-style: solid; border-color: var(--accent); transform: none; }
.slot-vacant { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--s-4); text-align: center; text-decoration: none; color: var(--text); background: rgba(10, 13, 18, 0.18); border-radius: inherit; }
.slot-vacant:hover { text-decoration: none; color: var(--text); background: rgba(10, 13, 18, 0.28); }
.slot-vacant__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; box-shadow: 0 8px 20px var(--accent-strong); }
.slot-vacant--vip .slot-vacant__icon { background: linear-gradient(135deg, #ffd66b, #f0a836); color: #2b1a00; box-shadow: 0 8px 20px rgba(240, 168, 54, 0.35); }
.slot-vacant__title { font-size: var(--fs-500); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.slot-vacant__sub { font-size: var(--fs-200); color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.slot-vacant__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; height: 30px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: var(--fs-200); font-weight: var(--fw-semibold); transition: background var(--transition); }
.slot-vacant:hover .slot-vacant__cta { background: var(--accent); border-color: var(--accent); }
.slot-vacant--vip:hover .slot-vacant__cta { background: #f0a836; border-color: #f0a836; color: #2b1a00; }
/* light theme: wash the card out towards white instead of darkening it, dark text on top */
[data-theme="light"] .promo-card--filler > *:not(.slot-vacant), [data-theme="light"] .vip-card--filler > *:not(.slot-vacant) { filter: blur(3px) saturate(.5) brightness(1.18) contrast(.75); }
[data-theme="light"] .slot-vacant { background: rgba(255,255,255,.5); }
[data-theme="light"] .slot-vacant:hover { background: rgba(255,255,255,.62); }
[data-theme="light"] .slot-vacant__title { color: var(--text); text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(255,255,255,.8); }
[data-theme="light"] .slot-vacant__sub { color: var(--text-soft); text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 1px 8px rgba(255,255,255,.8); }
[data-theme="light"] .slot-vacant__cta { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.18); color: var(--text); }
[data-theme="light"] .slot-vacant:hover .slot-vacant__cta { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="light"] .slot-vacant--vip:hover .slot-vacant__cta { background: #f0a836; border-color: #f0a836; color: #2b1a00; }

/* 58. server page — hero card v2, colour swatches, hoverable map thumbs */
.srv-hero { position: relative; overflow: hidden; padding: 0; }
.srv-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--hero-color, var(--accent)), var(--accent-2)); z-index: 1; }
.srv-hero__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); background: radial-gradient(90% 100% at 0% 0%, rgba(var(--hero-rgb, 31,111,209), 0.10) 0%, transparent 60%); border-bottom: 1px solid var(--border); }
.srv-hero__titles { min-width: 0; flex: 1; }
.srv-hero__title { margin: 0 0 var(--s-3); font-size: var(--fs-700); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.15; overflow-wrap: anywhere; }
.srv-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.srv-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s-3); border-radius: var(--radius-pill); background: var(--bg-section); border: 1px solid var(--border); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.srv-chip i.fa { font-size: 11px; }
.srv-chip img { width: 16px; height: 16px; }
a.srv-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.srv-chip--online { background: var(--success-soft); border-color: transparent; color: var(--success); letter-spacing: .06em; }
.srv-chip--offline { background: var(--danger-soft); border-color: transparent; color: var(--danger); letter-spacing: .06em; }
.srv-chip--banned { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.srv-chip--tier { border-color: transparent; color: #fff; }
.srv-chip--top5 { background: linear-gradient(135deg, #f0a836, #d97a12); }
.srv-chip--super { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.srv-chip--vip { background: linear-gradient(135deg, var(--hero-color, #f0a836), color-mix(in srgb, var(--hero-color, #f0a836) 70%, #000)); }
.srv-chip--boost { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.srv-chip--project { color: var(--accent); }
.srv-hero__players { flex: 0 0 auto; min-width: 180px; text-align: right; }
.srv-hero__players-num { font-size: 34px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.srv-hero__players-num span { margin-left: 4px; font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--text-soft); }
.srv-hero__players-label { margin: 4px 0 8px; font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.srv-hero__bots { color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.srv-hero__bar { display: block; height: 8px; }
.srv-hero__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); }
.srv-hero__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); text-decoration: none; }
.srv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.srv-hero__img.is-broken { opacity: 0; }
.srv-hero__media:hover .srv-hero__img { transform: scale(1.04); }
.srv-hero__media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.65) 100%); }
.srv-hero__map { position: absolute; left: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(10,13,18,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-family: var(--font-mono, monospace); font-size: var(--fs-200); font-weight: var(--fw-semibold); }
.srv-hero__media-hint { position: absolute; right: var(--s-3); bottom: var(--s-3); padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(10,13,18,.45); color: rgba(255,255,255,.75); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity var(--transition); }
.srv-hero__media:hover .srv-hero__media-hint { opacity: 1; }
.srv-hero__meta { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 0 var(--s-4); margin: 0; font-size: var(--fs-300); align-content: start; }
.srv-hero__meta dt, .srv-hero__meta dd { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.srv-hero__meta dt:nth-last-of-type(1), .srv-hero__meta dd:last-of-type { border-bottom: 0; }
.srv-hero__meta dt { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-medium); color: var(--text-soft); }
.srv-hero__meta dt i.fa { width: 14px; text-align: center; color: var(--text-soft); font-size: 12px; }
.srv-hero__meta dd { margin: 0; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.srv-hero__addr .addr-cluster__ip { cursor: help; }
.srv-hero__tasix { padding: 1px 6px; border-radius: 4px; background: var(--success-soft); color: var(--success); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; }
.srv-hero__ext { font-size: 10px; margin-left: 2px; opacity: .6; }
.srv-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--bg-section); }
.srv-hero__connect { box-shadow: 0 8px 20px var(--accent-strong); }
.srv-hero.is-offline .srv-hero__img { filter: grayscale(.6); }
.srv-hero.is-offline .srv-hero__connect { opacity: .7; }
.srv-swatch { display: inline-block; width: 14px; height: 14px; margin-left: 4px; border-radius: 4px; background: var(--c, #888); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 2px var(--card-bg), 0 0 0 3px var(--border); vertical-align: -2px; }
.srv-maps__map, .srv-rotation__thumb, .srv-rotation__main { cursor: help; }
@media (max-width: 767px) {
  .srv-hero__head { flex-direction: column; }
  .srv-hero__players { text-align: left; min-width: 0; width: 100%; }
  .srv-hero__grid { grid-template-columns: 1fr; padding: var(--s-4); }
  .srv-hero__media { max-width: 100%; }
  .srv-hero__meta { grid-template-columns: 1fr; }
  .srv-hero__meta dt { padding-bottom: 2px; border-bottom: 0; }
  .srv-hero__meta dd { padding-top: 0; }
}

/* 59. map card on the header "top maps" ticker (shares .nc-pop shell with the IP card) */
.map-ticker__item[data-map-pop] { cursor: pointer; }
.map-pop { width: 320px; padding: 0; overflow: hidden; }
.map-pop__shot { position: relative; aspect-ratio: 16 / 9; background: var(--bg-section); }
.map-pop__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-pop__shot.is-noimg img { display: none; }
.map-pop__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.map-pop__name, .map-pop__game { position: absolute; bottom: var(--s-2); z-index: 1; font-size: var(--fs-200); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.map-pop__name { left: var(--s-3); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-weight: var(--fw-bold); }
.map-pop__name i.fa { color: var(--accent-2); }
.map-pop__game { right: var(--s-3); padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.map-pop__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.map-pop__stats > span { display: flex; flex-direction: column; gap: 1px; padding: var(--s-2) var(--s-3); font-size: 10px; line-height: 1.3; color: var(--text-soft); border-right: 1px solid var(--border); }
.map-pop__stats > span:last-child { border-right: 0; }
.map-pop__stats b { font-size: var(--fs-500); font-weight: var(--fw-bold); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.map-pop__stats b.is-online { color: var(--success); }
.map-pop__top { padding: var(--s-2) var(--s-3) 0; }
.map-pop__eyebrow { margin-bottom: 4px; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.map-pop__srv { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border-top: 1px dashed var(--border); font-size: var(--fs-200); }
.map-pop__srv:first-of-type { border-top: 0; }
.map-pop__srv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-pop__srv b { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.map-pop__srv b.is-online { color: var(--text); }
.map-pop__srv b i { font-style: normal; font-weight: var(--fw-medium); color: var(--text-soft); }
.map-pop__none { display: flex; align-items: center; gap: 6px; font-size: var(--fs-200); color: var(--text-muted); }
.map-pop__none i.fa { color: var(--text-soft); }
.map-pop .nc-pop__hint { margin: var(--s-2) var(--s-3) var(--s-3); }