/* ==========================================================================
   L2Vote.com — DESIGN8
   Эволюция DESIGN7: палитра на 1–2 тона светлее, больше воздуха,
   строки с аватарами и таймерами, сводка цифр, подиум в рейтинге.
   ========================================================================== */

:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Sora", "Manrope", system-ui, sans-serif;

  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --wrap: 1460px;
  --bar-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.18s var(--ease);
}

/* ------------------------------------------------------------ тёмная тема
   Светлее DESIGN7: база #232a38 вместо #161a23, поверхности мягче,
   линии заметнее — интерфейс читается, но не выглядит мрачным. */

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #232a38;
  --bg-deep: #1e2431;
  --surface: #2b3242;
  --surface-2: #333b4d;
  --surface-3: #3d4659;
  --inset: rgba(9, 13, 22, 0.24);
  --glass: rgba(43, 50, 66, 0.84);

  --line: #3c4557;
  --line-2: #4c5670;

  --text: #f0f3fa;
  --muted: #b2bccf;
  --dim: #8792a8;

  --acc: #f3b950;
  --acc-hi: #ffd786;
  --acc-ink: #2a1c02;
  --acc-soft: rgba(243, 185, 80, 0.15);
  --acc-line: rgba(243, 185, 80, 0.36);

  --ice: #a99cff;
  --ice-soft: rgba(169, 156, 255, 0.17);
  --ice-line: rgba(169, 156, 255, 0.38);

  --hot: #ff8f8f;
  --hot-soft: rgba(255, 143, 143, 0.16);
  --info: #55e2d4;
  --info-soft: rgba(85, 226, 212, 0.15);
  --ok: #6ddba2;
  --ok-soft: rgba(109, 219, 162, 0.16);

  --sh-sm: 0 2px 10px rgba(10, 14, 24, 0.24);
  --sh-md: 0 18px 38px -18px rgba(8, 12, 20, 0.7);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fc;
  --bg-deep: #ecf0f9;
  --surface: #ffffff;
  --surface-2: #f5f8fd;
  --surface-3: #e9eef8;
  --inset: rgba(24, 40, 90, 0.05);
  --glass: rgba(255, 255, 255, 0.88);

  --line: #e2e8f3;
  --line-2: #cbd6e7;

  --text: #161d2e;
  --muted: #59637c;
  --dim: #828ca2;

  --acc: #b7770c;
  --acc-hi: #e29a1f;
  --acc-ink: #2a1c02;
  --acc-soft: rgba(226, 154, 31, 0.15);
  --acc-line: rgba(183, 119, 12, 0.3);

  --ice: #6354e3;
  --ice-soft: rgba(99, 84, 227, 0.12);
  --ice-line: rgba(99, 84, 227, 0.28);

  --hot: #e5514f;
  --hot-soft: rgba(229, 81, 79, 0.12);
  --info: #14b5a8;
  --info-soft: rgba(20, 181, 168, 0.14);
  --ok: #18a86e;
  --ok-soft: rgba(24, 168, 110, 0.13);

  --sh-sm: 0 2px 8px rgba(30, 45, 90, 0.07);
  --sh-md: 0 18px 34px -18px rgba(30, 45, 90, 0.3);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 460px at 4% -14%, var(--ice-soft), transparent 66%),
    radial-gradient(900px 420px at 98% -10%, var(--acc-soft), transparent 62%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 34%);
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
svg { display: block; flex: none; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.num { font-variant-numeric: tabular-nums; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 18px;
}

/* ------------------------------------------------------------------ шапка */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--line);
}

.bar__in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bar-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  transition: transform var(--t);
}

.logo:hover { transform: translateY(-1px); }

.logo svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 5px 12px rgba(243, 185, 80, 0.32));
  transition: filter var(--t);
}

.logo:hover svg { filter: drop-shadow(0 6px 16px rgba(243, 185, 80, 0.5)); }

.logo__txt { display: block; }

.logo__name {
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.logo__name b {
  background: linear-gradient(135deg, var(--acc-hi) 15%, var(--acc) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo__name i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: -0.02em;
}

.logo__sub {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
}

.ads { display: flex; gap: 12px; flex: 1; min-width: 0; }

.ad {
  display: grid;
  place-items: center;
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.bar__side { display: flex; align-items: center; gap: 9px; flex: none; }

/* ----------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding-inline: 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--t), background var(--t), border-color var(--t), filter var(--t);
}

.btn svg { width: 14px; height: 14px; }

.btn--acc {
  background: linear-gradient(135deg, var(--acc-hi), var(--acc));
  color: var(--acc-ink);
  box-shadow: 0 12px 24px -14px var(--acc);
}

.btn--acc:hover { filter: brightness(1.07); transform: translateY(-1px); }

.ibtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  transition: color var(--t), background var(--t), border-color var(--t);
}

.ibtn:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-2); }
.ibtn svg { width: 16px; height: 16px; }

.theme { position: relative; overflow: hidden; }
.theme svg { position: absolute; transition: transform var(--t), opacity var(--t); }
.theme .i-sun { opacity: 0; transform: translateY(16px); }
[data-theme="light"] .theme .i-sun { opacity: 1; transform: none; }
[data-theme="light"] .theme .i-moon { opacity: 0; transform: translateY(-16px); }

/* ----------------------------------------------------------------- тулбар */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 16px 12px;
  flex-wrap: wrap;
}

.nav {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding-inline: 14px;
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t), background var(--t);
}

.nav a:hover { color: var(--text); background: var(--surface-2); }

.nav a.on {
  color: var(--acc);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent),
    var(--surface-3);
  box-shadow:
    inset 0 0 0 1px var(--acc-line),
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 6px 16px -10px var(--acc);
}

.nav a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--acc-hi), var(--acc));
  box-shadow: 0 0 8px var(--acc);
}

.nav a.on:hover { background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 18%, transparent), transparent),
    var(--surface-3); }

.nav svg { width: 14px; height: 14px; }

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 150px;
  max-width: 190px;
  height: 40px;
  padding-inline: 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--dim);
  transition: border-color var(--t), box-shadow var(--t);
}

.search:focus-within {
  border-color: var(--acc-line);
  box-shadow: 0 0 0 3px var(--acc-soft);
}

.search svg { width: 14px; height: 14px; }
.search input { width: 100%; border: none; background: none; outline: none; font-size: 13px; }
.search input::placeholder { color: var(--dim); }

.filters {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.filters::-webkit-scrollbar { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t), border-color var(--t), background var(--t);
}

.pill:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }

.pill.on {
  color: var(--acc-ink);
  background: linear-gradient(135deg, var(--acc-hi), var(--acc));
  border-color: transparent;
}

.pill__n { font-size: 11px; opacity: 0.68; font-variant-numeric: tabular-nums; }

.sel {
  height: 32px;
  padding: 0 28px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238792a8' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--t);
}

.sel:hover { border-color: var(--line-2); }

/* ------------------------------------------------- лидеры по хроникам */

.tops {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding-bottom: 14px;
}

.sec__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 124px;
  font-size: 11px;
  color: var(--dim);
}

.sec__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.sec__meta b {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sec__meta svg { width: 12px; height: 12px; color: var(--dim); }

.tops__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.top {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--t-color) 9%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color var(--t);
}

.top:hover { border-color: color-mix(in srgb, var(--t-color) 45%, var(--line)); }

.top__h {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--t-color) 7%, var(--surface-2));
}

.top__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--t-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-color) 22%, transparent);
}

.top__h h3 {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top__n {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.top__list { padding: 3px; }

.tp {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  transition: background var(--t);
}

.tp:hover { background: var(--surface-2); }

.tp__r {
  text-align: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.tp:first-child .tp__r { color: var(--t-color); font-size: 13px; }

.tp__n {
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp__v {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- 2 колонки */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 40px;
}

.col {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.col__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ch-color, var(--acc)) 13%, transparent), transparent 58%),
    var(--surface-2);
}

.col__head svg { width: 17px; height: 17px; color: var(--ch-color, var(--acc)); }

.col__head h2 {
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.col__n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--inset);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.col__body { padding: 10px; }

.grp {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 12px 8px;
}

.grp:first-child { padding-top: 6px; }

.grp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-color, var(--dim));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-color, var(--dim)) 22%, transparent);
}

.grp h3 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.grp__n { font-size: 11px; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; }
.grp__date { margin-left: auto; font-size: 11.5px; color: var(--dim); }

/* ---------------------------------------------------------------- строка */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 52px 118px 76px 84px;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
}

.row:hover { background: var(--surface-2); border-color: var(--line); }

.av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  background: linear-gradient(140deg, hsl(var(--h) 62% 58%), hsl(var(--h2) 58% 44%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.row__name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.row__name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__chr,
.row__rate {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__chr { color: var(--muted); font-weight: 700; }
.row__rate { font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }

.badge {
  padding: 2px 7px;
  border-radius: var(--r-xs);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}

.badge--top { color: var(--acc); background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line); }
.badge--vip { color: var(--ice); background: var(--ice-soft); box-shadow: inset 0 0 0 1px var(--ice-line); }

.row__flags {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  flex: none;
}

.age__ic {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: #fff;
}

.age__ic svg { width: 11px; height: 11px; }

.age b {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.age--new .age__ic { background: #e85d5d; }
.age--new b { color: var(--hot); }

.age--mid .age__ic { background: #6b7388; }
.age--mid b { color: var(--muted); }

.age--old .age__ic { background: #2ec27a; }
.age--old b { color: var(--ok); }

.onl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 7px;
  border-radius: var(--r-pill);
  background: var(--info-soft);
  color: var(--info);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.onl i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 28%, transparent);
}

.onl--live i { animation: onl-pulse 1.8s ease-out infinite; }

@keyframes onl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 45%, transparent); }
  100% { box-shadow: 0 0 0 5px transparent; }
}

.row__when {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.tag--now { color: var(--info); background: var(--info-soft); }
.tag--next { color: var(--hot); background: var(--hot-soft); }
.tag--past {
  color: var(--ice);
  background: var(--ice-soft);
}

.vote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}

.vote svg { width: 12px; height: 12px; transition: transform var(--t); }

.vote:hover {
  color: var(--acc-ink);
  background: linear-gradient(135deg, var(--acc-hi), var(--acc));
  border-color: transparent;
  box-shadow: 0 10px 20px -10px var(--acc);
  transform: translateY(-1px);
}

.vote:hover svg { transform: translateY(-2px); }

.vote.voted {
  color: var(--acc);
  background: var(--acc-soft);
  border-color: var(--acc-line);
  pointer-events: none;
}

/* платное размещение */

.row--paid {
  height: 46px;
  margin-bottom: 5px;
  border-color: var(--acc-line);
  background: linear-gradient(90deg, var(--acc-soft), transparent 56%), var(--surface-2);
}

.row--paid .row__name { font-size: 14.5px; }
.row--paid:hover { border-color: var(--acc); }

.row--vip {
  border-color: var(--ice-line);
  background: linear-gradient(90deg, var(--ice-soft), transparent 56%), var(--surface-2);
}

.row--vip:hover { border-color: var(--ice); }

.empty {
  padding: 34px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

/* --------------------------------------------------------------- рейтинг */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 20px 14px;
}

.page-head h1 { font-size: 27px; }
.page-head p { font-size: 13px; color: var(--muted); margin-top: 5px; }

.tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-left: auto;
}

.tabs button {
  height: 30px;
  padding-inline: 13px;
  border-radius: var(--r-xs);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  transition: color var(--t), background var(--t);
}

.tabs button:hover { color: var(--text); }

.tabs button.on {
  color: var(--acc-ink);
  background: linear-gradient(135deg, var(--acc-hi), var(--acc));
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 18px;
}

.pod {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--p-color) 13%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}

.pod:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p-color) 50%, var(--line)); }

.pod .vote { width: 88px; flex: none; margin-top: 2px; }

.pod__rank {
  position: absolute;
  top: -10px;
  right: 10px;
  font-family: var(--font-head);
  font-size: 66px;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--p-color) 24%, transparent);
  pointer-events: none;
}

.pod .av { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; align-self: flex-start; }
.pod__id { display: block; min-width: 0; flex: 1; }

.pod__name {
  display: block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pod__sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pod__votes {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--p-color);
  font-variant-numeric: tabular-nums;
}

.table {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: var(--sh-sm);
}

.table__head,
.rrow {
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) 110px 150px 88px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

.table__head {
  height: 42px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.table__head .r-end { text-align: right; }

.rrow {
  height: 64px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}

.rrow:last-child { border-bottom: none; }
.rrow:hover { background: var(--surface-2); }

.rrow__rank {
  text-align: center;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.rrow--top .rrow__rank { color: var(--acc); font-size: 18px; }

.rrow__main { min-width: 0; }

.rrow__name {
  font-size: 14.5px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rrow__sub {
  display: flex;
  gap: 9px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--dim);
}

.rrow__cell {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rrow__votes b {
  display: block;
  font-size: 12.5px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.meter {
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--inset);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acc), var(--acc-hi));
}

/* ----------------------------------------------------------------- футер */

.foot { border-top: 1px solid var(--line); background: var(--surface); }

.foot__in {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-block: 22px;
  font-size: 12.5px;
  color: var(--dim);
}

.foot nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.foot nav a { transition: color var(--t); }
.foot nav a:hover { color: var(--acc); }

.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--acc-line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-md);
  font-size: 13px;
  font-weight: 800;
  animation: pop 0.28s var(--ease);
}

.toast svg { width: 15px; height: 15px; color: var(--acc); }

.toast--err { border-color: var(--hot-soft); background: var(--glass); }
.toast--err svg { color: var(--hot); }

@keyframes pop { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------- форма добавления сервера */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  padding: 24px;
  margin-bottom: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.form__wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.field > span {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--acc-line);
  box-shadow: 0 0 0 3px var(--acc-soft);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

/* Подсказка и текст ошибки занимают одно место: поле не должно скакать по высоте. */
.field small { font-size: 11.5px; color: var(--dim); min-height: 14px; }
.field small.err { color: var(--hot); font-weight: 700; }

.field input:user-invalid,
.field select:user-invalid { border-color: var(--hot-soft); }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.form__foot .btn { height: 42px; padding-inline: 22px; }
.form__foot p { font-size: 12.5px; color: var(--dim); }

.form__foot .btn[disabled] { opacity: 0.55; pointer-events: none; }

.note {
  padding: 15px 18px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--acc-line);
  background: var(--acc-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.note--ok { border-color: var(--ok-soft); background: var(--ok-soft); }

@media (max-width: 720px) {
  .form { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}

/* --------------------------------------------------------------- адаптив */

@media (max-width: 1280px) {
  .row { grid-template-columns: minmax(0, 1fr) 68px 48px 110px 72px 80px; gap: 10px; }
  .table__head, .rrow { grid-template-columns: 36px 36px minmax(0, 1fr) 100px 130px 84px; }
}

@media (max-width: 1340px) {
  .tops { grid-template-columns: minmax(0, 1fr); }
  .sec__meta { flex-direction: row; min-width: 0; }
  .tops__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .ads { display: none; }
}

@media (max-width: 940px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .tops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .table__head, .rrow { grid-template-columns: 34px 34px minmax(0, 1fr) 130px 84px; }
  .rrow__cell, .table__head .c-online { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 12px; }
  .tops__grid { grid-template-columns: minmax(0, 1fr); }
  .logo__sub { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) 88px 78px; gap: 10px; }
  .row__chr, .row__rate, .row__flags { display: none; }
  .table__head, .rrow { grid-template-columns: 30px minmax(0, 1fr) 80px; gap: 10px; padding-inline: 12px; }
  .rrow__av, .rrow__votes, .table__head .c-av, .table__head .c-votes { display: none; }
  .search { width: 100%; max-width: none; }
  .page-head h1 { font-size: 22px; }
  .foot nav { margin-left: 0; }
}