:root {
  /* Surfaces */
  --bg: #111111;
  --bg-panel: #171513;
  --bg-pill: #201d1a;
  --bg-pill-hover: #2a2521;
  --bg-elevated: #24201d;
  --bg-dropdown: #24201d;
  --surface: var(--bg-panel);
  --surface-2: var(--bg-elevated);

  /* Borders */
  --border: #342e29;
  --border-subtle: #29241f;

  /* Text */
  --text: #f0ede9;
  --text-muted: #aaa39c;
  --text-dim: #7f7871;
  --text-bright: #fafafa;

  /* Brand / accent */
  --accent: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.14);
  --accent-glow: rgba(249, 115, 22, 0.22);
  --accent-premium: #fb923c;
  --accent-premium-soft: rgba(251, 146, 60, 0.14);
  --primary: var(--accent);
  --secondary: #ea580c;

  /* Semantic */
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --error: #f87171;
  --error-soft: rgba(248, 113, 113, 0.14);

  /* Shape */
  --radius: 11px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type scale */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.05rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.75rem, 4vw, 2.35rem);
  --text-3xl: clamp(2.4rem, 6vw, 3.6rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* Controls */
  --control-h-sm: 32px;
  --control-h: 40px;
  --control-h-lg: 44px;
  --nav-control: 38px;
  --nav-avatar: 46px;
  --touch-min: 44px;

  /* Layout */
  --section-gap: 76px;
  --content-max: 1160px;
  --page-pad-x: 28px;

  /* Motion / fonts */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.22);
  --font-sans: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Unbounded", var(--font-sans);
  --font-motd: "Minecraft MOTD", "Minecraft MOTD Cyr", ui-monospace, monospace;
  --motd-dirt: #33221a url("/assets/motd-bg.png") left top / 96px 96px repeat;
}

@font-face {
  font-family: "Minecraft MOTD";
  src: url("/assets/fonts/minecraft-motd.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Minecraft MOTD Cyr";
  src: url("/assets/fonts/minecraft-motd-cyr.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

html[data-theme="light"] {
  color-scheme: light;
  /* чистый белый без кофейного оттенка */
  --bg: #ffffff;
  --bg-panel: #ffffff;
  --bg-pill: #f4f4f6;
  --bg-pill-hover: #eaeaee;
  --bg-elevated: #ffffff;
  --bg-dropdown: #ffffff;
  --surface: var(--bg-panel);
  --surface-2: var(--bg-elevated);
  --border: #e2e2e8;
  --border-subtle: #ededf2;
  --text: #1d1d23;
  --text-muted: #5c5c66;
  --text-dim: #83838d;
  --text-bright: #09090b;
  --accent: #ea580c;
  --accent-soft: rgba(234, 88, 12, 0.1);
  --accent-glow: rgba(234, 88, 12, 0.14);
  --success: #059669;
  --warning: #d97706;
  --error: #dc2626;
  --shadow-1: 0 8px 24px rgba(20, 20, 30, 0.07);
  --shadow-2: 0 14px 40px rgba(20, 20, 30, 0.1);
}

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

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

button,
[type="button"],
[type="submit"],
[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
}

input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}

[hidden] {
  display: none !important;
}

html {
  /* Unbounded шире Onest — базовый размер держим стандартным, иначе всё громоздко */
  font-size: 100%;
  /* smooth здесь нельзя: браузер тогда восстанавливает скролл при обновлении с анимацией, и страница «сползает» */
  scroll-behavior: auto;
  scroll-padding-top: 88px;
  scrollbar-gutter: stable;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: var(--leading-normal);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.motion-on {
  scroll-behavior: auto;
}

body.is-page-in .main,
body.is-page-in .header {
  animation: page-in 0.62s var(--ease) both;
}

body.is-page-in .header {
  animation-duration: 0.48s;
}

html.motion-on .motion-ready:not(.is-revealed) {
  opacity: 0;
  transform: translateY(22px);
}

html.motion-on .motion-ready.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.62s var(--ease),
    transform 0.62s var(--ease);
  transition-delay: calc(var(--motion-i, 0) * 55ms);
}

.motion-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 46%, #fff 18%);
  pointer-events: none;
  z-index: 3;
  animation: motion-ripple 0.7s var(--ease) forwards;
}

.is-pop {
  animation: motion-pop 0.28s var(--ease);
}

.pill,
.settings-chip,
.service-card,
.promo__card,
.social-card,
.profile-menu__link,
.servers-quick-tag,
.server-row,
.footer__control {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.service-card:hover,
.promo__card:hover,
.social-card:hover,
.server-row:hover,
.profile-card:hover {
  transform: none;
}

.pill:hover,
.servers-quick-tag:hover,
.settings-chip:hover {
  transform: none;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes motion-ripple {
  to {
    transform: scale(16);
    opacity: 0;
  }
}

@keyframes motion-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.965);
  }
  100% {
    transform: scale(1);
  }
}

::selection {
  background: var(--accent-soft);
  color: var(--text-bright);
}

.section-label {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Keep page heroes direct: navigation already provides product context. */
.page-head .section-label,
.forum-head .section-label,
.services__intro > .section-label,
.content-page__hero > .section-label,
.doc-hero > .section-label,
.hosting-soon .section-label {
  display: none;
}

.app {
  position: relative;
  min-height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}

.ambient__glow,
.ambient__noise {
  display: none;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
}

.header::before {
  display: none;
}

.nav-panel {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: min(100%, calc(100vw - 16px));
  margin: 0 auto;
  padding: 9px 18px;
  border-radius: calc(var(--radius) + 3px);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2, 0 14px 40px rgba(0, 0, 0, 0.14));
  transition:
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

.header.is-scrolled .nav-panel {
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  border-color: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-control);
  padding: 0;
  line-height: 0;
}

.logo__svg,
.logo__img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.pill--brand {
  padding: 0;
  width: var(--nav-control);
  min-width: var(--nav-control);
  min-height: var(--nav-control);
  height: var(--nav-control);
  gap: 0;
  border: none;
  background: transparent;
  color: var(--text-bright);
}

/* логотип — это бренд, а не кнопка: без отклика при наведении */
.pill--brand:hover {
  background: transparent;
  color: var(--text-bright);
}

.nav__divider {
  display: none;
}

.nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nav__side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav__side--end {
  justify-self: end;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.pill,
.settings-chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

.pill.is-pressed,
.settings-chip.is-pressed {
  background: color-mix(in srgb, var(--bg-pill-hover) 88%, var(--text) 6%);
  color: var(--text-bright);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.pill--btn {
  font: inherit;
}

.pill:hover {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.pill:active,
.settings-chip:active {
  transform: none;
  background: color-mix(in srgb, var(--bg-pill-hover) 88%, var(--text) 6%);
  color: var(--text-bright);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.pill--active {
  background: var(--bg-pill);
  color: var(--text-bright);
}

.pill--active .pill__icon {
  color: var(--pill-accent, var(--text-bright));
}

.pill--active:hover {
  background: var(--bg-pill-hover);
}

.pill--disabled,
.pill--disabled:hover,
.pill--disabled:active,
.pill--disabled:focus {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;
  background: transparent !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: grayscale(0.2);
}

.pill--disabled .pill__icon {
  color: var(--text-dim) !important;
}

.footer__link--disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.profile-menu__link--disabled,
.profile-nav__link--disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.locale-panel.is-open .pill--icon-nav {
  background: var(--bg-pill);
  color: var(--text-bright);
}

.pill[data-page="home"] { --pill-accent: #fb923c; }
.pill[data-page="services"] { --pill-accent: #fb923c; }
.pill[data-page="shop"] { --pill-accent: #fbbf24; }
.pill[data-page="hosting"] { --pill-accent: #f59e0b; }
.pill[data-page="forum"] { --pill-accent: #f97316; }
.pill[data-page="marketplace"] { --pill-accent: #f472b6; }
.pill[data-page="servers"] { --pill-accent: #fb923c; }
.pill[data-page="tools"] { --pill-accent: #38bdf8; }
.pill[data-page="reviews"] { --pill-accent: #facc15; }
.pill[data-page="portfolio"] { --pill-accent: #34d399; }
.pill[data-page="support"] { --pill-accent: #f97316; }
.pill[data-page="admin"] { --pill-accent: #f97316; }

.pill__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.pill--icon {
  padding: 8px;
  gap: 0;
}

.pill--icon-nav {
  width: var(--nav-control);
  height: var(--nav-control);
  min-width: var(--nav-control);
  min-height: var(--nav-control);
  padding: 0;
  justify-content: center;
}

.pill--icon-nav .pill__icon {
  width: 18px;
  height: 18px;
}

.pill__avatar {
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.pill--avatar {
  padding: 0;
  width: var(--nav-avatar);
  height: var(--nav-avatar);
  min-width: var(--nav-avatar);
  min-height: var(--nav-avatar);
  border: none;
  background: transparent;
  box-shadow: none;
}

.pill--avatar .pill__avatar {
  width: var(--nav-avatar);
  height: var(--nav-avatar);
  border-radius: var(--radius);
}

.pill--avatar:hover {
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: 0.85;
}

.pill--avatar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 28%, transparent);
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon circle[r="0.5"] {
  fill: currentColor;
  stroke: none;
}

/* ── Lang picker in nav ── */
.lang-panel {
  position: relative;
  display: inline-flex;
}

.pill--lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 9px;
  height: var(--nav-control);
}

.pill__flag {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
  flex-shrink: 0;
}

.pill__lang-code {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-bright);
}

.pill__chevron-sm {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  transition: transform 0.16s var(--ease);
  flex-shrink: 0;
}

.lang-panel.is-open .pill__chevron-sm {
  transform: rotate(180deg);
}

.lang-menu {
  position: fixed;
  z-index: 200;
  min-width: 170px;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  font-family: var(--font-sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0.16s ease;
}

.lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.lang-option:hover {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.lang-option.is-active {
  background: var(--accent-soft);
  color: var(--text-bright);
  font-weight: 700;
}

.lang-option__flag {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  flex-shrink: 0;
}

.locale-panel {
  position: relative;
  display: inline-flex;
}

.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 196px;
  padding: 10px;
  border-radius: var(--radius);
  border: none;
  background: var(--bg-elevated);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  overflow: hidden;
  isolation: isolate;
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0.16s ease,
    background 0.2s ease;
}

html[data-theme="light"] .settings-menu {
  box-shadow: 0 10px 28px rgba(15, 15, 20, 0.08);
}

.settings-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.settings-menu__row--theme {
  display: flex;
  gap: 5px;
}

.settings-menu__row--theme .settings-chip--icon {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  background: color-mix(in srgb, var(--bg-pill) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
}

.settings-menu__row--theme .settings-chip--icon.is-active {
  background: var(--bg-pill);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-bright);
}

.settings-menu__row {
  display: flex;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.settings-chip {
  flex: 1;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  transform: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.settings-chip:active {
  transform: none;
}

.settings-chip--icon {
  flex: none;
  width: 100%;
  height: 34px;
  padding: 0;
}

.settings-chip__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.settings-chip:hover {
  color: var(--text-bright);
  background: color-mix(in srgb, var(--bg-pill-hover) 80%, transparent);
}

.settings-chip.is-active {
  background: var(--bg);
  color: var(--text-bright);
  box-shadow: none;
}

html[data-theme="light"] .settings-chip {
  background: color-mix(in srgb, var(--bg-pill) 70%, transparent);
}

html[data-theme="light"] .settings-chip.is-active {
  background: var(--bg-panel);
  color: var(--text-bright);
}

.settings-chip.is-active:hover {
  background: var(--bg-pill-hover);
}

.settings-chip--flag {
  padding: 0 10px;
  position: relative;
}

.settings-chip--flag.is-active {
  background: var(--bg-pill);
  opacity: 1;
}

.settings-chip--flag:not(.is-active) {
  opacity: 0.5;
}

html[data-theme="light"] .settings-chip--flag.is-active {
  background: var(--bg-pill-hover);
}

.settings-chip__flag {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
}

.settings-chip--currency {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.settings-chip--currency.is-active {
  color: var(--accent);
}

.settings-chip--currency:hover {
  color: var(--text-bright);
}

.profile-panel {
  position: relative;
  display: inline-flex;
}

.profile-panel.is-open .pill--avatar {
  opacity: 1;
  background: var(--bg-pill);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 272px;
  padding: 10px;
  border-radius: var(--radius);
  border: none;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0.16s ease,
    background 0.2s ease;
}

html[data-theme="light"] .profile-menu {
  box-shadow: 0 10px 28px rgba(15, 15, 20, 0.08);
}

.profile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.settings-menu__section + .settings-menu__section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--text-dim) 14%, transparent);
}

.settings-menu__label {
  display: block;
  margin-bottom: 6px;
  padding: 0 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-menu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 10px;
}

.profile-menu__avatar-btn {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  flex-shrink: 0;
  overflow: visible;
  cursor: pointer;
  isolation: isolate;
}

.profile-menu__avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  object-fit: cover;
  image-rendering: pixelated;
  flex-shrink: 0;
  pointer-events: none;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.profile-menu__avatar-shade {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, #111 62%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.profile-menu__avatar-edit {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 92%, #111);
  color: var(--text-bright);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.profile-menu__avatar-pen {
  width: 11px;
  height: 11px;
  color: currentColor;
  opacity: 1;
  transform: none;
}

.profile-menu__avatar-btn:hover .profile-menu__avatar,
.profile-menu__avatar-btn:focus-visible .profile-menu__avatar {
  filter: grayscale(1) brightness(0.72);
}

.profile-menu__avatar-btn:hover .profile-menu__avatar-shade,
.profile-menu__avatar-btn:focus-visible .profile-menu__avatar-shade {
  opacity: 1;
}

.profile-menu__avatar-btn:hover .profile-menu__avatar-edit,
.profile-menu__avatar-btn:focus-visible .profile-menu__avatar-edit {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
  color: var(--accent);
}

.profile-menu__avatar-btn.is-busy .profile-menu__avatar {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.7;
}

.profile-menu__user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-menu__name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-bright);
}

.profile-menu__meta {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-dim);
}

a.profile-menu__meta,
.profile-menu__meta--login {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

a.profile-menu__meta:hover,
.profile-menu__meta--login:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-subtle));
  color: var(--text-bright);
}

.profile-menu__balance {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.profile-menu__balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.profile-menu__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-menu__balance-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.profile-menu__balance-link:hover {
  opacity: 0.8;
}

.profile-menu__balance-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
}

.profile-menu__profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 11px 12px;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--bg-pill) 75%, transparent);
  color: var(--text-bright);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.profile-menu__profile-link:hover {
  background: var(--bg-pill-hover);
}

.profile-menu__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.profile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--text-dim) 14%, transparent);
}

.profile-menu__link {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.profile-menu__link:hover {
  background: color-mix(in srgb, var(--bg-pill-hover) 80%, transparent);
  color: var(--text-bright);
}

.profile-menu__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.profile-menu__link:hover .profile-menu__icon {
  color: var(--text-bright);
}

.profile-menu__logout {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.profile-menu__logout:hover {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #f87171;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0);
  opacity: 0.75;
  pointer-events: none;
  animation: ripple 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.pill:focus-visible,
.settings-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 28%, transparent);
}

.main {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0 var(--page-pad-x) 88px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto var(--section-gap);
  padding: clamp(16px, 3vw, 40px) 12px clamp(12px, 2.5vw, 24px);
  text-align: center;
  animation: hero-in 0.7s var(--ease) both;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo mark only in nav island, footer, and favicon — hide stray page brands */
.hero__logo,
.page-brand,
.page-brand__img,
.profile-page-brand,
.doc-brand__img {
  display: none !important;
}

.hero__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.5vw, 4.25rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--text-bright);
}

.hero__lead {
  max-width: 52ch;
  margin: 0 auto;
  font-size: clamp(0.98rem, 2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: balance;
}

.promo {
  max-width: var(--content-max);
  margin: 0 auto calc(var(--section-gap) - 8px);
}

.promo__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  border: none;
  border-radius: calc(var(--radius) + 1px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 42%),
    linear-gradient(135deg, #4ade80 0%, #22c55e 48%, #16a34a 100%);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease),
    filter 0.15s ease;
}

.promo__card:hover {
  filter: brightness(1.04);
}

.promo__card:active {
  filter: brightness(0.98);
}

.promo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, 0.14);
  color: #ecfdf5;
}

.promo__mark-icon {
  width: 17px;
  height: 17px;
}

.promo__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.promo__badge {
  display: inline-block;
  width: fit-content;
  margin-bottom: 1px;
  padding: 2px 7px;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(236, 253, 245, 0.95);
}

.promo__title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f4fff8;
}

.promo__desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(236, 253, 245, 0.82);
}

.promo__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: #166534;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.promo__card:hover .promo__btn {
  background: #fff;
  color: #14532d;
}

.promo__btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 2.25;
}

.stats {
  max-width: var(--content-max);
  margin: 0 auto var(--section-gap);
  padding: 0 24px;
}

.stats__grid,
.servers-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stats-card {
  --stat-shadow: #08080a;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  text-align: left;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.14s ease;
}

.stats-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.9;
}

.stats-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--accent));
}

.stats-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-pill);
  color: var(--text-dim);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.stats-card:hover .stats-card__icon {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent-soft);
  color: var(--accent);
}

.stats-card__icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.stats-card__content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.stats-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

.stats-card__label {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
}

.stats-card:not(:has(.stats-card__icon)) {
  grid-template-columns: 1fr;
  padding-left: 18px;
}

.stats-card:not(:has(.stats-card__icon))::before {
  opacity: 0.75;
}

.services {
  max-width: var(--content-max);
  margin: 0 auto;
}

.services__intro {
  margin-bottom: 28px;
}

.services__heading {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

.services__lead {
  max-width: 40ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.service-card {
  --card-accent: #b4b4bc;
  --card-accent-bg: var(--bg-pill);
  --card-accent-surface: var(--bg-pill-hover);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 252px;
  padding: 22px;
  border-radius: var(--radius);
  border: none;
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease),
    background 0.15s ease;
}

.service-card:hover {
  background: var(--bg-pill);
  transform: translateY(-2px);
}

html[data-theme="light"] .service-card:hover {
  background: #efeff4;
}

html[data-theme="light"] .service-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 42%);
}

html[data-theme="light"] .ripple {
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .stats-card {
  --stat-shadow: #c8c8d4;
  background: #fff;
  border-color: var(--border);
}

html[data-theme="light"] .stats-card:hover {
  background: color-mix(in srgb, #fff 92%, var(--accent));
}

html[data-theme="light"] .stats-card__icon {
  background: var(--bg-pill);
  border-color: var(--border);
  color: var(--text-dim);
}

html[data-theme="light"] .stats-card:hover .stats-card__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.service-card--wide {
  grid-column: span 2;
}

.service-card:active {
  transform: scale(0.985);
}

.service-card[data-service="plugins"] {
  --card-accent: #fb923c;
}

.service-card[data-service="mods"] {
  --card-accent: #f97316;
}

.service-card[data-service="builds"] {
  --card-accent: #f0c14b;
}

.service-card[data-service="constructions"] {
  --card-accent: #ea580c;
}

.service-card[data-service="design"] {
  --card-accent: #f472b6;
}

.service-card[data-service="other"] {
  --card-accent: #fb923c;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 42%);
  pointer-events: none;
  z-index: 1;
}

.service-card__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  max-width: 58%;
}

.service-card--wide .service-card__head {
  max-width: 50%;
}

.service-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius);
  border: none;
  background: var(--card-accent-bg);
  color: var(--text-bright);
  font-size: 0.875rem;
  font-weight: 500;
}

.service-card__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 6px;
  background: var(--card-accent-surface);
  color: var(--card-accent);
}

.service-card__action {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 34px;
  padding-inline: 10px;
  gap: 6px;
  border-radius: var(--radius);
  border: none;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-pill));
  color: var(--accent);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.service-card__action-label {
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
}

.service-card__action-icon {
  width: 16px;
  height: 16px;
}

.service-card:hover .service-card__action {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-pill-hover));
  transform: translate(1px, -1px);
}

.service-card__title {
  position: relative;
  z-index: 2;
  max-width: 54%;
  padding-right: 10px;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

.service-card--wide .service-card__title {
  max-width: 46%;
}

.service-card__desc {
  position: relative;
  z-index: 2;
  max-width: 52%;
  padding-right: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.service-card--wide .service-card__desc {
  max-width: 44%;
}

.service-card__tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 6px;
  max-width: 54%;
}

.service-card--wide .service-card__tags {
  max-width: 46%;
}

.service-card__tag {
  padding: 6px 11px;
  border-radius: var(--radius);
  border: none;
  background: var(--card-accent-bg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.service-card__visual {
  position: absolute;
  z-index: 0;
  right: -4px;
  bottom: 0;
  width: auto;
  height: min(66%, 168px);
  max-width: 34%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to left, #000 68%, transparent 100%);
  mask-image: linear-gradient(to left, #000 68%, transparent 100%);
  transition: transform 0.25s ease;
}

.service-card--wide .service-card__visual {
  height: min(70%, 188px);
  max-width: 32%;
  right: 0;
  bottom: -8px;
}

.service-card:hover .service-card__visual,
.service-card:focus-visible .service-card__visual {
  transform: scale(1.02) translateY(-2px);
}

.service-card[data-service="plugins"] .service-card__tags {
  max-width: 54%;
}

.service-card[data-service="plugins"] .service-card__visual {
  height: min(74%, 200px);
}

.service-card[data-service="mods"] .service-card__visual {
  height: min(70%, 175px);
}

.service-card[data-service="builds"] .service-card__visual {
  height: min(75%, 205px);
}

.service-card[data-service="constructions"] .service-card__visual {
  height: min(68%, 165px);
}

.service-card[data-service="design"] .service-card__title,
.service-card[data-service="design"] .service-card__desc,
.service-card[data-service="design"] .service-card__tags {
  max-width: 56%;
}

.service-card[data-service="design"] .service-card__title {
  font-size: 1.05rem;
  line-height: 1.18;
}

.service-card[data-service="design"] .service-card__desc {
  font-size: 0.78rem;
  line-height: 1.45;
}

.service-card[data-service="design"] .service-card__visual {
  height: min(56%, 148px);
  max-width: 32%;
  right: 6px;
  bottom: -10px;
  -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%);
  mask-image: linear-gradient(to left, #000 58%, transparent 100%);
}

.service-card[data-service="other"] .service-card__visual {
  height: min(73%, 195px);
}

.service-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card-accent);
}

@media (max-width: 900px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .promo__card {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .promo__btn {
    width: 100%;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 0 12px 36px;
  }

  .hero {
    margin-bottom: 28px;
    padding: 0 4px 10px;
  }

  .hero__title {
    font-size: 2.25rem;
    margin-bottom: 12px;
  }

  .hero__lead {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .promo {
    margin-bottom: 28px;
  }

  .stats {
    margin-bottom: 28px;
    padding: 0 12px;
  }

  .stats__grid,
  .servers-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stats-card {
    min-height: 84px;
    padding: 13px 14px 13px 16px;
    gap: 10px;
  }

  .stats-card:hover {
    transform: none;
  }

  .stats-card__icon {
    width: 34px;
    height: 34px;
  }

  .stats-card__icon .icon {
    width: 16px;
    height: 16px;
  }

  .stats-card__value {
    font-size: 1.35rem;
  }

  .stats-card__label {
    font-size: 0.7rem;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service-card--wide {
    grid-column: span 1;
  }

  .services__intro {
    margin-bottom: 20px;
  }

  .services__lead {
    font-size: 0.88rem;
  }

  .service-card {
    min-height: 220px;
    padding: 18px;
  }

  .service-card__title,
  .service-card__desc,
  .service-card__tags,
  .service-card--wide .service-card__title,
  .service-card--wide .service-card__desc,
  .service-card--wide .service-card__tags,
  .service-card[data-service="design"] .service-card__title,
  .service-card[data-service="design"] .service-card__desc,
  .service-card[data-service="design"] .service-card__tags,
  .service-card[data-service="plugins"] .service-card__tags {
    max-width: 58%;
  }

  .service-card__visual,
  .service-card--wide .service-card__visual {
    height: min(54%, 128px);
    max-width: 36%;
    right: -2px;
  }
}

/* ——— Hosting page ——— */

.hosting-page {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.hosting-soon {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: min(62vh, 560px);
  padding: 32px 20px 48px;
}

.hosting-soon__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 860px);
  padding: 42px 32px;
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.hosting-soon .section-label {
  margin-bottom: 8px;
}

.hosting-soon__title {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text-bright);
}

.hosting-soon__lead {
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.hosting-soon__features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: left;
}

.hosting-feature {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 78%, transparent);
}

.hosting-feature__index {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--accent);
}

.hosting-feature__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-bright);
}

.hosting-feature__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .hosting-soon {
    align-items: flex-start;
    padding-inline: var(--page-pad-x);
  }

  .hosting-soon__card {
    padding: 28px 18px;
  }

  .hosting-soon__features {
    grid-template-columns: 1fr;
  }
}

/* ——— Servers page ——— */

.main--page {
  padding-top: 8px;
}

.page-head {
  max-width: var(--content-max);
  margin: 0 auto var(--section-gap);
}

.page-head__content {
  max-width: 640px;
}

.page-head__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text-bright);
}

.page-head__lead {
  font-size: clamp(0.95rem, 2vw, 1.02rem);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: balance;
}

.servers-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.servers-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.servers-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.servers-action-btn:hover {
  background: var(--bg-pill-hover);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

.servers-action-btn--ghost {
  background: var(--bg-panel);
}

.servers-action-btn__icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.servers-boost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #fb923c 0%, #f97316 52%, #ea580c 100%);
  color: #f5f7ff;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), filter 0.15s ease;
}

.servers-boost-btn:hover {
  filter: brightness(1.06);
}

.servers-boost-btn:active {
  filter: brightness(0.96);
}

.servers-boost-btn__icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.servers-summary {
  gap: 10px;
}

.stats-card--meta .stats-card__value--meta {
  font-size: clamp(0.92rem, 2vw, 1.1rem);
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
  font-weight: 600;
}

.stats-card--compact {
  min-height: 84px;
  padding: 13px 15px 13px 17px;
  gap: 11px;
}

.stats-card--compact .stats-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.stats-card--compact .stats-card__icon .icon {
  width: 16px;
  height: 16px;
}

.servers-toolbar {
  max-width: var(--content-max);
  margin: 0 auto 18px;
  padding: 14px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
}

.servers-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servers-filters__row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.servers-filters__row--tags {
  align-items: center;
}

.servers-filters__hint {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
}

.servers-filters__reset {
  margin-left: auto;
  padding: 6px 10px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.servers-filters__reset:hover {
  background: var(--bg-pill);
  color: var(--text);
}

.servers-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg-pill);
}

.servers-search__icon {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.servers-search__input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  outline: none;
}

.servers-search__input::placeholder {
  color: var(--text-dim);
}

.servers-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.servers-filter--compact {
  min-width: 96px;
  max-width: 110px;
}

.servers-filter__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.servers-filter__select,
.servers-filter__input {
  min-height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg-pill);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}

.servers-filter__select {
  cursor: pointer;
}

.servers-filter--segments {
  min-width: 0;
}

.servers-filter--picker {
  min-width: 200px;
  flex: 1 1 200px;
}

.servers-filter--sort {
  min-width: 220px;
  flex: 1 1 220px;
}

.servers-segments {
  display: flex;
  gap: 3px;
  min-height: 40px;
  padding: 3px;
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg-pill);
}

.servers-segment {
  flex: 1;
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.servers-segment:hover {
  color: var(--text-bright);
}

.servers-segment.is-active {
  background: var(--bg);
  color: var(--text-bright);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.servers-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.servers-picker--wide {
  width: 100%;
}

.servers-picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-bright);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.servers-picker__toggle:hover,
.servers-picker.is-open .servers-picker__toggle {
  background: color-mix(in srgb, var(--bg-pill-hover) 85%, transparent);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text-bright);
}

.servers-picker__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.servers-picker__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.16s ease;
}

.servers-picker.is-open .servers-picker__chevron {
  transform: rotate(180deg);
}

.servers-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.servers-picker__option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.servers-picker__option:hover,
.servers-picker__option.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-pill));
  color: var(--text-bright);
}

.servers-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.servers-quick-tag {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.servers-quick-tag:hover,
.servers-quick-tag.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.servers-results-meta {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.servers {
  max-width: var(--content-max);
  margin: 0 auto;
}

.servers__state {
  padding: 28px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.servers__state--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #f87171;
}

.servers__state--error .servers-action-btn {
  color: var(--text);
}

.servers-empty[hidden],
.servers__list[hidden],
.servers__state[hidden],
#servers-pagination[hidden] {
  display: none !important;
}

.servers__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-row {
  display: grid;
  grid-template-columns: 72px 200px minmax(0, 1fr) 176px;
  gap: 16px;
  align-items: center;
  min-height: 108px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.server-row:hover {
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.server-row--boosted {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.server-row__icon {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.server-row__rank {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border: 2px solid color-mix(in srgb, var(--bg-panel) 96%, transparent);
  border-radius: 6px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  color: #052e1a;
}

.server-row--rank-1 .server-row__rank {
  background: linear-gradient(135deg, #fdba74, var(--accent));
}

.server-row--rank-2 .server-row__rank {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #292524;
}

.server-row--rank-3 .server-row__rank {
  background: linear-gradient(135deg, #fdba74, #ea580c);
  color: #431407;
}

.server-row__banner-wrap {
  width: 200px;
  height: 72px;
  border-radius: calc(var(--radius) - 1px);
  overflow: hidden;
  background: var(--bg-pill);
}

.server-row__banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-row__banner--fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), var(--bg-pill));
}

.server-row__avatar {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: calc(var(--radius) - 1px);
  object-fit: cover;
  background: transparent;
}

.server-row__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-bright);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--bg-pill)), var(--bg-pill));
}

.server-row__main {
  min-width: 0;
}

.server-row__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.server-row__name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.server-row__points {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #f97316 18%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fb923c;
}

html[data-theme="light"] .server-row__points {
  background: color-mix(in srgb, #ea580c 14%, transparent);
  color: #c2410c;
}

.server-row__boost {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.server-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 18%, transparent);
}

.server-row__desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.server-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.server-row__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.server-row__meta-item strong {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-row__meta-item--online strong {
  color: #4ade80;
}

.server-row__meta-item--version {
  color: var(--text-dim);
}

.server-row__meta-item--tags {
  flex-wrap: wrap;
  gap: 0;
  color: var(--text-dim);
}

.server-row__meta-icon {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.server-row__vote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 2px 8px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.server-row__vote strong {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-row__vote:hover,
.server-row__vote:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.server-row__vote:hover .server-row__meta-icon,
.server-row__vote:focus-visible .server-row__meta-icon,
.server-row__vote.is-voted .server-row__meta-icon {
  color: var(--accent);
}

.server-row__vote:hover strong,
.server-row__vote:focus-visible strong,
.server-row__vote.is-voted strong {
  color: var(--accent);
}

.server-row__vote.is-voted {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}

.server-row__vote:disabled {
  cursor: wait;
  opacity: 0.75;
}

.server-row__sep {
  margin: 0 6px;
  color: var(--text-dim);
}

.server-row__badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.server-row__side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.server-row__ip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: calc(var(--radius) - 1px);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.server-row__ip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-row__ip-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.server-row__ip:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.server-row__ip--empty {
  justify-content: center;
  border-style: dashed;
  color: var(--text-dim);
  font-weight: 600;
  cursor: default;
}

.server-row__details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease;
}

.server-row__details:hover {
  color: var(--text-bright);
}

.server-row:hover .server-row__details {
  color: var(--text);
}

.servers-empty,
.servers-no-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 42px 20px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  text-align: center;
}

.servers-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--bg-pill);
  color: var(--text-dim);
}

.servers-empty__icon .icon {
  width: 24px;
  height: 24px;
}

.servers-empty__title,
.servers-no-match__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-bright);
}

.servers-empty__text,
.servers-no-match__text {
  max-width: 42ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg-pill);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pagination__btn:hover:not(:disabled):not(.is-active) {
  background: var(--bg-pill-hover);
  color: var(--text);
}

.pagination__btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination__btn--nav {
  padding: 0;
}

.pagination__icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) {
  .server-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "icon banner"
      "main main"
      "side side";
  }

  .server-row__icon {
    grid-area: icon;
  }

  .server-row__banner-wrap {
    grid-area: banner;
    width: auto;
    max-width: none;
  }

  .server-row__main {
    grid-area: main;
  }

  .server-row__side {
    grid-area: side;
    flex-direction: row;
    align-items: center;
  }

  .server-row__details,
  .server-row__ip {
    flex: 1;
  }
}

@media (max-width: 900px) {
  .servers-head__row {
    flex-direction: column;
    align-items: stretch;
  }

  .servers-head__actions {
    justify-content: stretch;
  }

  .servers-action-btn,
  .servers-boost-btn {
    flex: 1;
  }

  .servers-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .servers-filters__row--main {
    flex-direction: column;
    align-items: stretch;
  }

  .servers-filter,
  .servers-filter--compact {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .servers-search,
  .servers-filter--picker,
  .servers-filter--sort {
    flex: none;
  }
}

@media (max-width: 640px) {
  .servers-summary {
    grid-template-columns: 1fr;
  }

  .servers-toolbar {
    padding: 12px;
  }

  .servers-filters__row--main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .servers-search {
    grid-column: 1 / -1;
    width: 100%;
    min-height: var(--touch-min);
  }

  .servers-filter--picker,
  .servers-filter--sort {
    min-width: 0;
  }

  .servers-filters__row--tags {
    align-items: flex-start;
    flex-direction: column;
  }

  .servers-filters__reset {
    margin-left: 0;
  }

  .server-row {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "icon banner"
      "main main"
      "side side";
    gap: 12px;
  }

  .server-row__banner-wrap {
    width: auto;
    height: 72px;
  }

  .server-row__side {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.is-page-in .main,
  body.is-page-in .header,
  .is-pop,
  .motion-ripple {
    animation: none !important;
  }

  .motion-ready,
  .motion-ready.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .forum-view.is-entering,
  .forum-anim,
  .forum-head__title,
  .forum-head__lead,
  .forum-head__stats,
  .forum-loading,
  .forum-ripple {
    animation: none !important;
  }

  .forum-row:hover,
  .forum-board__row:hover,
  .forum-member:hover,
  .forum-post:hover,
  .forum-side__action:hover,
  .forum-chip:hover,
  .forum-btn--primary:hover {
    transform: none;
    box-shadow: none;
  }

  .hero {
    animation: none;
  }

  .pill,
  .settings-chip {
    transition: background 0.15s ease, color 0.15s ease;
  }

  .header,
  .nav-panel,
  .settings-menu {
    transition: none;
  }

  .header::before {
    transition: none;
  }

  .pill:active {
    transform: none;
  }

  .stats-card:hover,
  .service-card:hover,
  .social-card:hover,
  .server-row:hover {
    transform: none;
  }

  .ripple {
    animation: none;
    display: none;
  }

  .service-card:hover .service-card__action {
    transform: none;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-control: 34px;
    --nav-avatar: 36px;
  }

  .header {
    padding: 10px 12px;
  }

  .nav-panel {
    padding: 6px 28px 6px 10px;
    border-radius: var(--radius);
  }

  .header.is-scrolled .nav-panel {
    padding: 6px 28px 6px 10px;
  }

  .nav__side--end {
    margin-right: 0;
  }

  .pill--avatar {
    overflow: visible;
  }

  .nav {
    gap: 6px;
  }

  .nav__side {
    gap: 4px;
  }

  .nav__links {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: min(52vw, 280px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .pill,
  .settings-chip,
  .settings-menu {
    font-size: 0.8rem;
  }

  .logo__svg,
  .logo__img {
    width: 28px;
    height: 28px;
  }

  .nav__divider {
    display: none;
  }

  .pill span {
    display: none;
  }

  .pill:not(.pill--icon):not(.pill--brand) {
    padding: 7px 9px;
  }

  .pill--icon {
    padding: 7px;
  }

  .pill--icon-nav {
    width: var(--nav-control);
    height: var(--nav-control);
    min-width: var(--nav-control);
    min-height: var(--nav-control);
  }

  .pill--icon-nav .pill__icon {
    width: 17px;
    height: 17px;
  }

  .pill--brand {
    width: var(--nav-control);
    height: var(--nav-control);
    min-width: var(--nav-control);
    min-height: var(--nav-control);
    padding: 0;
  }

  .pill--avatar {
    width: var(--nav-avatar);
    height: var(--nav-avatar);
    min-width: var(--nav-avatar);
    min-height: var(--nav-avatar);
    padding: 0;
  }

  .pill--avatar .pill__avatar {
    width: var(--nav-avatar);
    height: var(--nav-avatar);
  }

  .settings-menu {
    right: 0;
    left: auto;
    width: 196px;
  }

  .profile-menu {
    right: 0;
    left: auto;
    width: min(272px, calc(100vw - 24px));
  }
}

.footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 56px 24px 32px;
  background: transparent;
}

.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 0.55fr);
  gap: 36px 40px;
}

.footer__col--social {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--text-bright);
  text-decoration: none;
}

.footer__logo-svg,
.footer__logo-img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  color: var(--text-bright);
}

.footer__logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer__desc {
  max-width: 36ch;
  margin-bottom: 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.footer__control-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.footer__control,
.footer__locale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.footer__control {
  width: 36px;
  padding: 0;
}

.footer__control:hover,
.footer__locale:hover {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.footer__control.is-active {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.footer__locale {
  background: var(--bg-panel);
  padding: 4px 10px 4px 8px;
}

.footer__locale-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__locale-divider {
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}

.footer__flag {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}

.footer__currency {
  min-width: 1ch;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}

.footer__control-icon {
  width: 16px;
  height: 16px;
}

.footer__copy {
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.footer__title {
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a,
.footer__nav-col a,
.footer__nav-col span {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__links a:hover,
.footer__nav-col a:hover {
  color: var(--text-bright);
}

.footer__meta-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.footer__meta-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__meta-links a:hover {
  color: var(--text-bright);
}

.footer__meta-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.footer__socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.social-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 156px;
  padding: 18px 20px;
  border-radius: calc(var(--radius) + 2px);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease),
    filter 0.15s ease;
}

.social-card--telegram {
  background: linear-gradient(135deg, #3cc3f8 0%, #229ed9 52%, #1a8fc9 100%);
}

.social-card--discord {
  background: linear-gradient(135deg, #7280f7 0%, #5865f2 52%, #4752c4 100%);
}

.social-card--telegram:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.social-card--discord:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.social-card:hover {
  transform: translateY(-2px);
}

.social-card:active {
  transform: scale(0.985);
}

html[data-theme="light"] .social-card--telegram:hover,
html[data-theme="light"] .social-card--discord:hover {
  filter: brightness(1.04);
}

.social-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-card__icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
}

.social-card--telegram .social-card__icon {
  border-radius: 50%;
}

.social-card--discord .social-card__icon {
  border-radius: 10px;
}

.social-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.social-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.social-card__meta {
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
}

.social-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
}

.social-card__stat strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.social-card__stat--online strong {
  color: #fff;
}

.social-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.social-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: #111114;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.social-card--telegram .social-card__btn {
  color: #0d6e9d;
}

.social-card--discord .social-card__btn {
  color: #4752c4;
}

.social-card:hover .social-card__btn {
  transform: translateY(-1px);
}

.social-card--telegram:hover .social-card__btn {
  background: #f0fbff;
}

.social-card--discord:hover .social-card__btn {
  background: #f4f5ff;
}

.social-card__btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke-width: 2.25;
}

.footer__legal {
  margin-top: 36px;
  padding-top: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--text-dim);
}

@media (max-width: 980px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__col--social {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer {
    padding: 40px 12px 28px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer__col--social {
    grid-column: auto;
  }

  .footer__desc {
    max-width: none;
  }

  .footer__socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Servers active filters */
.servers-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 80%, transparent);
}

.servers-active-filters__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
}

.servers-active-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.servers-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px 0 10px;
  border: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.servers-filter-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.servers-filter-chip:active {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.servers-filter-chip__icon {
  width: 14px;
  height: 14px;
  padding: 2px;
  border-radius: 999px;
  opacity: 0.8;
  flex-shrink: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.servers-filter-chip:hover .servers-filter-chip__icon {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.servers-active-filters__clear,
.servers-toolbar .servers-filters__reset {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.servers-active-filters__clear:hover,
.servers-toolbar .servers-filters__reset:hover {
  text-decoration: underline;
}

.servers-quick-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.servers-quick-tag__count {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.servers-filters__empty-tags {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.servers-toolbar {
  display: grid;
  gap: 8px;
}

/* Profile */
.profile-page-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 24px 20px 64px;
  min-height: 50vh;
}

.profile-hero {
  margin-bottom: 24px;
}

.profile-hero__title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text-bright);
}

.profile-hero__lead {
  color: var(--text-muted);
  line-height: 1.6;
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.profile-tab {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.profile-tab:hover,
.profile-tab.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-pill));
  color: var(--text-bright);
}

.profile-section {
  display: none;
  padding: 20px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-section.is-active {
  display: block;
}

.profile-section__title {
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-stat {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.profile-stat__value {
  display: block;
  margin-bottom: 4px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-stat__label {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.profile-form {
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.profile-field {
  display: grid;
  gap: 6px;
}

.profile-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}

.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text);
  font: inherit;
  outline: none;
}

.profile-field textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.profile-field > span,
.profile-field__legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}

.profile-field__hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.profile-links-grid {
  display: grid;
  gap: 8px;
}

.profile-links-grid__item {
  display: grid;
  gap: 4px;
}

.profile-links-grid__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-links-grid__item input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text);
  font: inherit;
}

.profile-boost-empty {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.profile-boost-panel {
  display: grid;
  gap: 18px;
}

.profile-section__lead {
  margin-top: 6px;
  max-width: 52ch;
}

.profile-boost-toolbar {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent) 8%, var(--bg-panel)),
    color-mix(in srgb, var(--bg-panel) 94%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.profile-field--inline {
  gap: 8px;
}

.profile-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-boost-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-boost-stat {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

.profile-boost-stat--points {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent) 12%, var(--bg-pill)),
    color-mix(in srgb, var(--bg-pill) 92%, transparent)
  );
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.profile-boost-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-boost-stat__value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-bright);
}

.profile-boost-stat__link {
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.profile-boost-stat__link:hover {
  text-decoration: underline;
}

.profile-points-head {
  display: grid;
  gap: 4px;
}

.profile-points-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-points-head__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.profile-points-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 156px;
  padding: 14px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.profile-points-card:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
}

.profile-points-card.is-popular {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.profile-points-card.is-featured {
  border-color: color-mix(in srgb, #fbbf24 38%, transparent);
}

.profile-points-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 6px;
}

.profile-points-card__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  line-height: 1.2;
}

.profile-points-card__num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-points-card.is-featured .profile-points-card__num {
  color: #fcd34d;
}

.profile-points-card__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}

.profile-points-card__badge {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.profile-points-card__badge--boost {
  background: color-mix(in srgb, #fbbf24 22%, transparent);
  color: #fcd34d;
}

.profile-points-card__sub {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}

.profile-points-card__rate {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.3;
}

.profile-points-card__rate--empty {
  display: block;
  min-height: 0.95rem;
}

.profile-points-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.profile-points-card__price {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-points-card__buy {
  padding: 5px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
}

.profile-points-card:hover:not(:disabled) .profile-points-card__buy,
.profile-points-card.is-popular .profile-points-card__buy {
  background: var(--accent);
  color: #fff;
}

.profile-points-card.is-featured .profile-points-card__buy {
  background: color-mix(in srgb, #fbbf24 20%, transparent);
  color: #fcd34d;
}

.profile-points-card.is-featured:hover:not(:disabled) .profile-points-card__buy {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #1a1205;
}

.profile-points-card:disabled,
.profile-points-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.profile-points-card:disabled .profile-points-card__buy {
  background: var(--bg-pill);
  color: var(--text-dim);
}

.server-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.server-row__link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}

.server-row__link:hover {
  color: var(--text-bright);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-pill));
}

.profile-tag-picker {
  display: block;
}

.profile-tag-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 92%, #000 8%);
}

.profile-tag-panel__section {
  display: grid;
  gap: 8px;
}

.profile-tag-panel__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-tag-panel__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.profile-tag-panel__chips,
.profile-tag-panel__pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-tag-selected,
.profile-tag-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-tag-pool__empty {
  margin: 0;
}

.profile-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-pill));
  color: var(--text-bright);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-tag-chip .icon,
.forum-tag-chip .icon {
  width: 12px;
  height: 12px;
  opacity: 0.65;
}

.profile-tag-create {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.profile-tag-create__input {
  flex: 1;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-bright);
  font: inherit;
}

.profile-tag-create__input:disabled {
  opacity: 0.5;
}

.profile-tag-create__btn {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.profile-tag-create__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-field__hint {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.profile-tag-option {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 8px;
  background: var(--bg-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.profile-tag-option:hover {
  color: var(--text-bright);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-pill));
}

.profile-tag-option.is-selected {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-pill));
  color: var(--text-bright);
}

#profile-version-picker .servers-picker__menu {
  max-height: 300px;
}

.profile-server-form .servers-picker,
.profile-field .servers-picker {
  width: 100%;
}

.profile-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.profile-empty-cta__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.profile-empty-cta .servers-action-btn {
  min-width: min(100%, 280px);
  justify-content: center;
}

.profile-version-fallback {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-bright);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  outline: none;
}

.profile-version-fallback:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}


.profile-server-form {
  display: grid;
  gap: 18px;
  padding: 0;
  border-radius: calc(var(--radius) + 6px);
  background: transparent;
  overflow: visible;
}

.profile-server-form__fields {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.server-media-hero {
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.server-media-hero__cover {
  position: relative;
  min-height: 180px;
  background:
    radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 55%),
    radial-gradient(circle at 82% 0%, color-mix(in srgb, #3ecf9a 26%, transparent), transparent 52%),
    linear-gradient(135deg, #241d18, #12100e);
}

.server-media-hero__cover.has-cover {
  background: #12100e;
}

.server-media-hero__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-media-hero__cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--bg) 88%, transparent));
  pointer-events: none;
}

.server-media-hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  margin-top: -48px;
  padding: 0 20px 18px;
  position: relative;
  z-index: 1;
}

.server-media-hero__avatar {
  position: relative;
  display: block;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 26px;
  overflow: hidden;
  border: 4px solid color-mix(in srgb, var(--bg-panel) 95%, transparent);
  background: transparent;
  box-shadow: 0 12px 32px color-mix(in srgb, #000 35%, transparent);
  cursor: pointer;
}

.server-media-hero__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-media-hero__avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.server-media-hero__avatar.has-icon .server-media-hero__avatar-fallback {
  display: none;
}

.server-media-hero__avatar-edit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
}

.server-media-hero__avatar-edit .icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.server-media-hero__meta {
  padding-bottom: 8px;
}

.server-media-hero__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-media-hero__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-upload-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent);
  background: var(--bg-pill);
  cursor: pointer;
}

.profile-upload-card--wide {
  grid-column: 1 / -1;
}

.profile-upload-card__preview {
  display: grid;
  place-items: center;
  min-height: 120px;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  overflow: hidden;
}

.profile-upload-card__preview--banner {
  min-height: 96px;
}

.profile-upload-card__placeholder {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.profile-upload-card__label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-upload-card__hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.profile-upload-card__img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
}

.profile-upload-card__img--banner {
  min-height: 96px;
}

.profile-list {
  display: grid;
  gap: 10px;
}

.profile-card {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.profile-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.profile-card__title {
  font-weight: 700;
  color: var(--text-bright);
}

.profile-card__status {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-card__status--pending { color: #fbbf24; }
.profile-card__status--approved { color: #34d399; }
.profile-card__status--rejected { color: #f87171; }

.profile-card__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.profile-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-msg {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.profile-msg.is-error { color: #f87171; }
.profile-msg.is-success { color: #34d399; }

.profile-loading,
.profile-auth-gate {
  padding: 28px;
  text-align: center;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-loading {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Единый вид загрузки: спиннер с акцентом и мягкой подложкой вместо голого текста.
   Только для элементов, которые существуют лишь во время загрузки,
   либо явно помечены классом is-loading (счётчики и статусы без него — обычный текст). */
.profile-loading,
.forum-loading,
.plugin-loading,
.server-loading,
.servers__state--loading,
.market-status.is-loading,
.checkout-page-status.is-loading,
.store-results.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.profile-loading::before,
.forum-loading::before,
.plugin-loading::before,
.server-loading::before,
.servers__state--loading::before,
.market-status.is-loading::before,
.checkout-page-status.is-loading::before,
.store-results.is-loading::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: md-spin 0.8s linear infinite;
}

@keyframes md-spin {
  to { transform: rotate(360deg); }
}

/* когда загрузка скрыта — ничего не рисуем */
.profile-loading[hidden],
.forum-loading[hidden],
.servers__state--loading[hidden],
.checkout-page-status[hidden],
.market-status[hidden] {
  display: none !important;
}

/* на узком экране спиннер над текстом */
@media (max-width: 620px) {
  .profile-loading,
  .forum-loading,
  .plugin-loading,
  .server-loading,
  .servers__state--loading,
  .market-status.is-loading,
  .checkout-page-status.is-loading,
  .store-results.is-loading {
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
    padding: 20px;
  }
}

.profile-auth-gate a {
  color: var(--accent);
  font-weight: 600;
}

.profile-boost-link {
  margin-top: 14px;
  display: inline-flex;
}

/* Profile cabinet */
.profile-auth-gate__card {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px;
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  text-align: center;
}

.profile-auth-gate__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-bright);
}

.profile-cabinet {
  display: grid;
  gap: 18px;
  align-items: start;
}

.profile-hero {
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.profile-media-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  background: color-mix(in srgb, #000 42%, transparent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.profile-media-btn .icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.profile-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
}

.profile-hero__name {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 800;
  color: var(--text-bright);
}

.profile-hero__handle {
  margin-bottom: 8px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.profile-hero__bio {
  max-width: 56ch;
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

.profile-hero__bio.is-empty {
  color: var(--text-muted);
  font-style: italic;
}

.profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.profile-hero__tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-pill);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.profile-hero__tag--premium {
  background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 40%, var(--bg-pill)), color-mix(in srgb, #f59e0b 18%, var(--bg-pill)));
  color: #fde68a;
  border: 1px solid color-mix(in srgb, #fbbf24 45%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, #fbbf24 22%, transparent);
}

.profile-hero__tag--admin {
  background: color-mix(in srgb, #f59e0b 22%, var(--bg-pill));
  color: #fcd34d;
}

.profile-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
}

.profile-hero__stats div {
  min-width: 72px;
}

.profile-hero__stats dt {
  margin-bottom: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-hero__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}

.profile-hero__msg {
  padding: 0 20px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.profile-hero__msg.is-error { color: #f87171; }
.profile-hero__msg.is-success { color: #34d399; }

.profile-settings-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.profile-settings-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-settings-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-settings-card__handle {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.profile-settings-card__bio {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

.profile-settings-card__bio.is-empty {
  color: var(--text-dim);
  font-style: italic;
}

.profile-settings-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-premium-crown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: color-mix(in srgb, #fbbf24 16%, var(--bg-pill));
  border: 1px solid color-mix(in srgb, #fbbf24 32%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, #fbbf24 24%, transparent);
  cursor: help;
}

.profile-premium-crown__icon {
  width: 16px;
  height: 16px;
  color: #fcd34d;
}

.profile-settings-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--bg-pill);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.profile-purchase-card__icon,
.profile-purchase-card__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.profile-purchase-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.profile-sidebar {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 88px;
}

.profile-sidebar__card,
.profile-balance-card,
.profile-forum-card,
.profile-empty-panel {
  padding: 16px;
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-balance-card {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent) 10%, var(--bg-panel)),
    color-mix(in srgb, var(--bg-panel) 94%, transparent)
  );
}

.profile-sidebar__avatar-wrap {
  position: relative;
  width: fit-content;
  margin-bottom: 12px;
}

.profile-sidebar__avatar {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--bg-pill);
}

.profile-sidebar__status {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #34d399;
  color: #052e1a;
  font-size: 0.68rem;
  font-weight: 700;
}

.profile-sidebar__name {
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-sidebar__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.profile-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.profile-sidebar__tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-pill);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.profile-sidebar__tag--premium {
  background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 35%, var(--bg-pill)), var(--bg-pill));
  color: #fde68a;
  border: 1px solid color-mix(in srgb, #fbbf24 35%, transparent);
}

.profile-balance-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.profile-balance-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-balance-card__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.profile-balance-card__refresh .icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.profile-balance-card__refresh:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.profile-balance-card__refresh:hover .icon {
  transform: rotate(-45deg);
}

.profile-balance-card__refresh:active .icon {
  transform: rotate(-90deg) scale(0.92);
}

.profile-balance-card__refresh.is-loading {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  cursor: progress;
}

.profile-balance-card__refresh.is-loading .icon {
  transform: none;
  transition: none;
  animation: profile-refresh-spin 0.75s linear infinite;
}

@keyframes profile-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.profile-balance-card__value {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.profile-balance-card__topup-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-topup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.profile-topup-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 8px;
}

.profile-topup-custom__input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: calc(var(--radius) - 1px);
  background: color-mix(in srgb, var(--bg-pill) 90%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  appearance: textfield;
}

.profile-topup-custom__input::-webkit-inner-spin-button,
.profile-topup-custom__input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.profile-topup-custom__input::placeholder {
  color: var(--text-muted);
  font-size: 0.78rem;
  opacity: 1;
}

.profile-topup-custom__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.profile-topup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: calc(var(--radius) - 1px);
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  color: var(--text-bright);
  font: inherit;
  font-family: var(--font-sans);
  line-height: 1.2;
  letter-spacing: normal;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.profile-topup-btn__value {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.profile-topup-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-pill));
  color: var(--text-bright);
}

.profile-topup-btn--primary {
  min-width: 96px;
  padding: 0 14px;
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.profile-topup-btn--primary:hover {
  filter: brightness(1.06);
  background: var(--accent);
  border-color: transparent;
}

.profile-balance-card__link {
  align-self: start;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.14s ease;
}

.profile-balance-card__link:hover {
  color: var(--text-bright);
  text-decoration: underline;
}

.profile-balance-card__hint {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.profile-balance-card__hint.is-error { color: #f87171; }
.profile-balance-card__hint.is-success { color: #86efac; }

.profile-sidebar__nav {
  display: none;
}

.profile-nav {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-nav__link {
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 1px);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.profile-nav__link:hover,
.profile-nav__link.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-pill));
  color: var(--text-bright);
}

.profile-nav__link--accent {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-bright);
}

.profile-nav__link--premium {
  color: #fcd34d;
}

.profile-nav__link--premium:hover,
.profile-nav__link--premium.is-active {
  background: color-mix(in srgb, #fbbf24 16%, var(--bg-pill));
  color: #fde68a;
  border: 1px solid color-mix(in srgb, #fbbf24 35%, transparent);
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.profile-btn:hover { filter: brightness(1.06); }
.profile-btn:active { transform: scale(0.98); }

.profile-btn--ghost {
  background: var(--bg-pill);
  color: var(--text-bright);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.profile-btn--primary,
.profile-btn--submit {
  color: #fff;
  background: var(--accent);
}

.profile-btn--premium {
  color: #1a1205;
  background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #d97706);
  box-shadow: 0 8px 28px color-mix(in srgb, #f59e0b 35%, transparent);
}

.profile-btn--premium.is-active {
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
}

.profile-btn--admin {
  color: #fff;
  background: linear-gradient(135deg, #57534e, #292524);
  box-shadow: 0 8px 24px color-mix(in srgb, #292524 30%, transparent);
}

.profile-btn--submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  font-size: 0.92rem;
}

.profile-purchase-card__btn--primary {
  background: var(--accent);
  color: #fff;
}

.link-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-section__action,
.profile-dash-card__link,
.profile-panel-block__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.profile-dash-card--premium {
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, #fbbf24 28%, transparent), transparent 55%),
    color-mix(in srgb, #f59e0b 12%, var(--bg-pill));
  border: 1px solid color-mix(in srgb, #fbbf24 28%, transparent);
}

.profile-dash-card--premium.is-active {
  box-shadow: 0 0 24px color-mix(in srgb, #fbbf24 18%, transparent);
}

.profile-dash-card--premium .profile-dash-card__label,
.profile-dash-card--premium .profile-dash-card__link {
  color: #fcd34d;
}

.profile-premium {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, #fbbf24 28%, transparent);
}

.profile-premium.is-active {
  box-shadow: 0 0 40px color-mix(in srgb, #fbbf24 16%, transparent);
}

.profile-premium__glow {
  position: absolute;
  inset: -20% auto auto -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #fbbf24 35%, transparent), transparent 70%);
  pointer-events: none;
}

.profile-premium__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.profile-premium__badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #1a1205;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-premium__status {
  min-width: 140px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, #fbbf24 12%, var(--bg-pill));
  border: 1px solid color-mix(in srgb, #fbbf24 25%, transparent);
}

.profile-premium__status-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fcd34d;
}

.profile-premium__status strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-bright);
}

.profile-premium__perks {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
}

.profile-premium__perks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, #fbbf24 8%, var(--bg-pill));
  border: 1px solid color-mix(in srgb, #fbbf24 14%, transparent);
}

.profile-premium__perk-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #1a1205;
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-premium__perks strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.88rem;
  color: var(--text-bright);
}

.profile-premium__perks span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-premium__plans {
  position: relative;
  display: grid;
  gap: 10px;
}

.profile-premium-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-pill);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.profile-premium-plan--forever {
  border-color: color-mix(in srgb, #fbbf24 40%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #fbbf24 18%, transparent), transparent 50%),
    var(--bg-pill);
}

.profile-premium-plan__title {
  margin-bottom: 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-premium-plan__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-premium-plan__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.profile-premium-plan__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fcd34d;
}

.profile-main { min-width: 0; }

.profile-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-section__action {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.profile-subtitle {
  margin: 18px 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.profile-dash-card {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.profile-dash-card--accent {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-pill));
}

.profile-dash-card__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.profile-dash-card__value {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-dash-card__link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.profile-panel-block {
  padding: 16px;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-panel-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.profile-panel-block__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-panel-block__more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.profile-purchase-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.profile-purchase-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.profile-purchase-card__img {
  width: 72px;
  height: 72px;
  border-radius: calc(var(--radius) - 2px);
  object-fit: cover;
  background: var(--bg-panel);
}

.profile-purchase-card__img--fallback {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

.profile-purchase-card__title {
  margin-bottom: 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
}

.profile-purchase-card__meta,
.profile-purchase-card__date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.profile-purchase-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.profile-purchase-card__btn {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-panel));
  color: var(--text-bright);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-purchase-card__btn--ghost {
  background: transparent;
  color: var(--text-muted);
}

.profile-card__amount {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
}

.profile-card__amount--plus { color: #34d399; }
.profile-card__amount--minus { color: #f87171; }
.profile-card__amount--hold { color: var(--text-muted); }

#profile-withdraw-msg.is-error {
  color: #f87171;
}

.profile-forum-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 960px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    position: static;
  }

  .profile-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .profile-nav::-webkit-scrollbar {
    display: none;
  }

  .profile-nav__link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .profile-points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-boost-stats {
    grid-template-columns: 1fr;
  }

  .profile-topup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-topup-custom {
    grid-template-columns: 1fr;
  }

  .profile-hero__body {
    grid-template-columns: 1fr;
  }

  .profile-hero__actions {
    justify-self: start;
  }

  .profile-server-form {
    gap: 14px;
  }

  .server-media-hero__cover {
    min-height: 140px;
  }

  .server-media-hero__avatar {
    width: 92px;
    height: 92px;
    border-radius: 22px;
  }
}

/* Forum — premium global board */
.forum-page {
  --forum-card: color-mix(in srgb, var(--bg-panel) 88%, #000 12%);
  --forum-line: color-mix(in srgb, var(--text) 8%, transparent);
  --forum-hover: color-mix(in srgb, var(--text) 4%, transparent);
  display: block;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.forum-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forum-ico--sm {
  width: 13px;
  height: 13px;
}

.forum-shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: start;
  width: 100%;
}

.forum-shell--focus {
  grid-template-columns: 228px minmax(0, 1fr);
}

.forum-side,
.forum-rail {
  position: sticky;
  top: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.forum-side__actions {
  display: grid;
  gap: 8px;
}

.forum-side__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--forum-line);
  border-radius: 10px;
  background: var(--forum-card);
  color: var(--text-bright);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.forum-side__action--primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.forum-side__action--primary .forum-ico,
.forum-side__action--primary:hover {
  color: #fff;
}

.forum-side__action:hover {
  background: var(--bg-pill-hover);
}

.forum-side__action .forum-ico {
  color: var(--accent);
}

.forum-side__block,
.forum-rail__card,
.forum-board,
.forum-feed,
.forum-composer,
.forum-reply-box,
.forum-empty,
.forum-auth-hint,
.forum-loading,
.forum-locked-note {
  border: 1px solid var(--forum-line);
  border-radius: 14px;
  background: var(--forum-card);
}

.forum-side__block,
.forum-rail__card {
  padding: 12px;
}

.forum-side__title,
.forum-rail__title,
.forum-board__title,
.forum-feed__title {
  margin: 0 6px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.forum-side__nav {
  display: grid;
  gap: 2px;
}

.forum-side__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.forum-side__link:hover {
  background: var(--forum-hover);
  color: var(--text-bright);
}

.forum-side__link.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-bright);
  font-weight: 650;
}

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

.forum-side__count {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.forum-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.forum-main--topic {
  gap: 12px;
}

.forum-view--topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 760px;
}

.forum-head {
  display: grid;
  gap: 16px;
}

.forum-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-bright);
}

.forum-head__lead {
  margin: 8px 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.forum-head__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-metric {
  min-width: 92px;
  padding: 10px 14px;
  border: 1px solid var(--forum-line);
  border-radius: 12px;
  background: var(--forum-card);
}

.forum-metric strong {
  display: block;
  color: var(--text-bright);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.forum-metric span {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.forum-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.forum-toolbar__link,
.forum-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.forum-toolbar__current {
  color: var(--text-bright);
  font-weight: 600;
}

.forum-toolbar__sep {
  width: 12px;
  height: 12px;
  opacity: 0.35;
}

.forum-loading,
.forum-auth-hint,
.forum-empty,
.forum-locked-note {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.forum-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding: 36px 24px;
  min-height: 148px;
  text-align: center;
}

.forum-empty__text {
  margin: 0;
  max-width: 38ch;
  line-height: 1.55;
  color: var(--text-muted);
}

.forum-empty__btn {
  min-width: 196px;
}

.forum-empty__guest {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.forum-empty__guest a {
  color: var(--accent);
  font-weight: 600;
}

.forum-auth-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.forum-auth-hint p {
  margin: 0;
}

.forum-auth-hint a,
.forum-locked-note a {
  color: var(--accent);
  font-weight: 600;
}

.forum-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--forum-line);
  border-radius: 14px;
  background: var(--forum-card);
}

.forum-feed__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.forum-feed__title {
  margin: 0;
}

.forum-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--forum-line);
}

.forum-row:last-child {
  border-bottom: 0;
}

.forum-row.is-pinned {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.forum-row:hover {
  background: var(--forum-hover);
}

.forum-row__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.forum-row__copy,
.forum-row__title,
.forum-row__meta {
  display: block;
  min-width: 0;
}

.forum-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-bright);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.35;
}

.forum-row__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.forum-row__meta {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.forum-row__tags:empty {
  display: none;
}

.forum-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 112px;
}

.forum-row__stat,
.forum-row__time {
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
}

.forum-row__time {
  color: var(--text-muted);
}

.forum-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--forum-line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.forum-delete:hover {
  color: #e74c3c;
  border-color: color-mix(in srgb, #e74c3c 35%, transparent);
  background: color-mix(in srgb, #e74c3c 8%, transparent);
}

.forum-delete--row {
  margin-top: 2px;
}

.forum-thread-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.forum-thread__delete {
  flex-shrink: 0;
  min-height: 34px;
  padding-inline: 12px;
  color: var(--text-dim);
}

.forum-thread__delete:hover {
  color: #e74c3c;
}

.forum-row__dot {
  margin: 0 4px;
}

.forum-board {
  overflow: hidden;
  padding: 6px 0 2px;
}

.forum-board__title {
  margin: 12px 16px 6px;
}

.forum-board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
  gap: 12px;
  align-items: center;
  padding: 0 8px;
  border-top: 1px solid var(--forum-line);
}

.forum-board__open {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.forum-board__row:hover {
  background: var(--forum-hover);
}

.forum-board__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-pill));
  color: var(--accent);
}

.forum-board__name {
  display: block;
  color: var(--text-bright);
  font-weight: 650;
}

.forum-board__desc {
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

.forum-board__stat {
  color: var(--text-dim);
  font-size: 0.75rem;
  white-space: nowrap;
}

.forum-board__stat strong {
  display: block;
  color: var(--text-bright);
  font-size: 0.95rem;
}

.forum-board__last {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.forum-board__last.is-empty {
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: default;
}

.forum-board__last-title {
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-board__last-meta {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.forum-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}

.forum-author__avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-pill));
  color: var(--text-bright);
  font-size: 0.72rem;
  font-weight: 800;
}

.forum-author__avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
}

.forum-author__avatar--img {
  object-fit: cover;
  background: var(--bg-pill);
}

.forum-tag,
.forum-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 14%, transparent);
  color: var(--tag-color, var(--accent));
  font-size: 0.7rem;
  font-weight: 700;
}

.forum-badge--muted {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
}

.forum-tag--btn {
  padding: 3px 9px;
  border: 0;
  cursor: pointer;
}

.forum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.forum-chips + .forum-feed,
.forum-chips + .forum-empty,
.forum-chips + .forum-feed__head {
  margin-top: 12px;
}

.forum-feed__head + .forum-feed,
.forum-feed__head + .forum-empty {
  margin-top: 8px;
}

.forum-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--forum-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.forum-chip:hover {
  color: var(--text-bright);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

.forum-chip.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: transparent;
  color: var(--text-bright);
}

.forum-thread-head {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.forum-thread__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text-bright);
}

.forum-thread__meta,
.forum-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.forum-thread__body {
  margin-top: 12px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}

.forum-replies {
  display: grid;
  gap: 10px;
}

.forum-replies__title {
  margin: 4px 2px 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.forum-post,
.forum-reply {
  display: grid;
  gap: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--forum-line);
  border-radius: 14px;
  background: var(--forum-card);
}

.forum-post__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--forum-line);
}

.forum-post__author-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.forum-post__author-info strong {
  color: var(--text-bright);
  font-size: 0.88rem;
  font-weight: 700;
}

.forum-post__role {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.forum-post__header .forum-post__meta {
  margin-left: auto;
  flex-shrink: 0;
}

.forum-post__body {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}

.forum-reply-box {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
}

.forum-reply-box__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-bright);
}

.forum-reply-box textarea,
.forum-composer__body textarea,
.forum-composer__body input,
.forum-composer__body select {
  width: 100%;
  min-height: 42px;
  padding: 12px 14px;
  border: 1px solid var(--forum-line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.forum-reply-box textarea {
  min-height: 108px;
}

.forum-reply-box__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.forum-reply-box__footer .forum-msg {
  margin-right: auto;
}

.forum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.forum-btn--primary {
  background: var(--accent);
  color: #fff;
}

.forum-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000);
}

.forum-btn--ghost {
  background: transparent;
  border-color: var(--forum-line);
  color: var(--text-bright);
}

.forum-btn--ghost:hover {
  background: var(--forum-hover);
}

.forum-composer {
  overflow: hidden;
}

.forum-composer__head {
  padding: 18px 20px 0;
}

.forum-composer__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-bright);
}

.forum-composer__body {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
}

.forum-field {
  display: grid;
  gap: 6px;
}

.forum-field span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.forum-composer__body textarea {
  min-height: 160px;
}

.forum-composer__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 18px;
}

.forum-msg {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.forum-msg.is-success { color: var(--accent); }
.forum-msg.is-error { color: #e74c3c; }

.forum-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--forum-line);
  border-radius: var(--radius);
  background: var(--forum-card);
  color: var(--text-muted);
}

.forum-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.forum-search input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text-bright);
  font: inherit;
  outline: none;
}

.forum-kind {
  display: flex;
  gap: 8px;
}

.forum-kind__btn {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--forum-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.forum-kind__btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: transparent;
  color: var(--text-bright);
}

.forum-field__hint,
.forum-rail__empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.45;
}

.forum-rail__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.forum-rail__stats div {
  display: grid;
  gap: 2px;
}

.forum-rail__stats strong {
  color: var(--text-bright);
  font-size: 1rem;
}

.forum-rail__stats span,
.forum-rail__card--guide p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.5;
}

.forum-rail__link {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.forum-rail__link:hover {
  text-decoration: underline;
}

.forum-composer__terms {
  margin: 0 auto 0 0;
  align-self: center;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.forum-composer__terms a {
  color: var(--accent);
  text-decoration: none;
}

.forum-composer__terms a:hover {
  text-decoration: underline;
}

.forum-rules {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--forum-line);
  border-radius: 14px;
  background: var(--forum-card);
}

.forum-rules__lead {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.forum-rules__block {
  display: grid;
  gap: 10px;
}

.forum-rules__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-bright, var(--text));
}

.forum-rules__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.forum-rules__list li::marker {
  color: color-mix(in srgb, var(--accent) 70%, var(--text-dim));
  font-weight: 700;
}

.forum-rules__list a {
  color: var(--accent);
  text-decoration: none;
}

.forum-rules__list a:hover {
  text-decoration: underline;
}

@media (max-width: 620px) {
  .forum-rules {
    padding: 16px;
  }

  .forum-composer__terms {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
  }
}

.forum-tag-create {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.forum-tag-create__input,
.forum-tag-create__btn {
  min-height: 38px;
  border: 1px solid var(--forum-line);
  border-radius: 10px;
  font: inherit;
}

.forum-tag-create__input {
  flex: 1;
  padding: 0 12px;
  background: var(--bg);
  color: var(--text-bright);
}

.forum-tag-create__btn {
  padding: 0 14px;
  background: var(--bg-pill);
  color: var(--text-bright);
  font-weight: 600;
  cursor: pointer;
}

.forum-tag-selected,
.forum-tag-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.forum-tag-chip,
.forum-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--forum-line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.forum-tag-chip {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: transparent;
  color: var(--text-bright);
}

.forum-members {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--forum-line);
  border-radius: 14px;
  background: var(--forum-card);
}

.forum-member {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) repeat(3, auto);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--forum-line);
}

.forum-member:last-child { border-bottom: 0; }
.forum-member:hover { background: var(--forum-hover); }

.forum-member__rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-pill);
  color: var(--text-bright);
  font-size: 0.78rem;
  font-weight: 800;
}

.forum-member__stat {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.forum-member__stat strong {
  color: var(--text);
}

.forum-view.is-entering {
  animation: forum-view-in 0.35s var(--ease) both;
}

.forum-anim {
  animation: forum-rise 0.4s var(--ease) both;
  animation-delay: calc(var(--forum-i, 0) * 28ms);
}

.forum-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  pointer-events: none;
  animation: forum-ripple 0.55s var(--ease) forwards;
}

.forum-side__action,
.forum-btn,
.forum-chip,
.forum-kind__btn {
  position: relative;
  overflow: hidden;
}

@keyframes forum-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes forum-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes forum-ripple {
  to { transform: scale(16); opacity: 0; }
}

@media (max-width: 1120px) {
  .forum-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .forum-rail {
    display: none;
  }
}

@media (max-width: 860px) {
  .forum-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .forum-side,
  .forum-rail {
    position: static;
  }

  .forum-side__actions {
    grid-template-columns: 1fr 1fr;
  }

  .forum-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .forum-row__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
  }

  .forum-row__stat,
  .forum-row__time {
    text-align: left;
  }

  .forum-board__row,
  .forum-member {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .forum-board__stat,
  .forum-board__last {
    display: none;
  }

  .forum-thread-head__top {
    flex-direction: column;
    align-items: stretch;
  }

  .forum-post__header {
    flex-wrap: wrap;
  }

  .forum-post__header .forum-post__meta {
    width: 100%;
    margin-left: 56px;
  }
}

@media (max-width: 600px) {
  .profile-points-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .forum-side__actions {
    grid-template-columns: 1fr;
  }
}

.avatar--mc-head,
.pill__avatar.avatar--mc-head,
.profile-menu__avatar.avatar--mc-head,
.skin-modal__preview,
.profile-skin-preview__img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: cover;
}

.pill__avatar,
.profile-menu__avatar {
  cursor: pointer;
}

.profile-skin-preview {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 16px;
  background: var(--bg-pill);
  box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--accent) 45%, #000);
  cursor: pointer;
  overflow: hidden;
}

.profile-skin-preview__img {
  display: block;
  width: 72px;
  height: 72px;
}

.profile-skin-preview__edit {
  position: absolute;
  inset: auto 0 0;
  padding: 4px 0;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.skin-modal-open {
  overflow: hidden;
}

.skin-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  overflow-y: auto;
}

.skin-modal[hidden] {
  display: none !important;
}

.skin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 52%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: skin-modal-fade 0.18s ease both;
}

.skin-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--bg-panel);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: skin-modal-in 0.22s var(--ease, ease) both;
}

@keyframes skin-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes skin-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.skin-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
}

.skin-modal__header-text {
  flex: 1;
  min-width: 0;
}

.skin-modal__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.skin-modal__close .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.skin-modal__close:hover {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.skin-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.25;
  color: var(--text-bright);
}

.skin-modal__lead {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.skin-modal__body {
  display: grid;
  gap: 14px;
  padding: 0 20px 18px;
}

.skin-modal__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: calc(var(--radius) + 3px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 70%, transparent);
}

.skin-modal__preview-box {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  padding: 4px;
  border-radius: calc(var(--radius) + 3px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--bg-panel);
}

.skin-modal__preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.skin-modal__hero-text {
  min-width: 0;
}

.skin-modal__hero-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.skin-modal__hero-source {
  margin: 5px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}

.skin-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: calc(var(--radius) + 3px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 60%, transparent);
}

.skin-modal__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.skin-modal__tab .icon {
  width: 15px;
  height: 15px;
}

.skin-modal__tab:hover {
  color: var(--text-bright);
}

.skin-modal__tab.is-active {
  background: var(--bg-panel);
  color: var(--text-bright);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.skin-modal__panel {
  display: none;
  gap: 8px;
}

.skin-modal__panel.is-active {
  display: grid;
}

.skin-modal__field {
  display: grid;
  gap: 7px;
}

.skin-modal__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
}

.skin-modal__input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-bright);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skin-modal__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.skin-modal__drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: calc(var(--radius) + 3px);
  background: color-mix(in srgb, var(--bg-pill) 55%, transparent);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.skin-modal__drop:hover,
.skin-modal__drop.is-over {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.skin-modal__drop-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.skin-modal__drop-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-bright);
}

.skin-modal__drop-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.skin-modal__file-name {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-bright);
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-modal__hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.skin-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 40%, transparent);
}

.skin-modal__footer-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.skin-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.skin-modal__btn--quiet {
  padding: 0 10px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}

.skin-modal__btn--quiet:hover {
  color: var(--text-bright);
  background: var(--bg-pill);
}

.skin-modal__btn--ghost {
  background: var(--bg-pill);
  border-color: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text-bright);
}

.skin-modal__btn--ghost:hover {
  background: var(--bg-pill-hover);
}

.skin-modal__btn--primary {
  background: var(--accent);
  color: #fff;
}

.skin-modal__btn--primary:hover {
  filter: brightness(1.05);
}

.skin-modal__msg {
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 420px) {
  .skin-modal__hero {
    flex-direction: column;
    text-align: center;
  }

  .skin-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .skin-modal__footer-main {
    margin-left: 0;
  }

  .skin-modal__footer-main .skin-modal__btn {
    flex: 1;
  }
}

.skin-modal__msg.is-success {
  color: #5cb85c;
}

.skin-modal__msg.is-error {
  color: #e74c3c;
}

/* ——— Server detail page ——— */

.server-page-shell {
  display: grid;
  gap: 18px;
  max-width: calc(var(--content-max) + 40px);
  margin: 0 auto;
  padding: 0 4px;
}

.server-page-toolbar {
  display: flex;
  align-items: center;
}

.server-back-link .icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.server-loading,
.server-empty {
  margin: 0;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  text-align: center;
}

.server-detail {
  display: grid;
  gap: 14px;
}

.server-detail-hero {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 96%, transparent), color-mix(in srgb, var(--bg-panel) 88%, transparent));
  box-shadow: 0 18px 48px color-mix(in srgb, #000 28%, transparent);
}

.server-detail-hero__media {
  position: relative;
  height: clamp(140px, 22vw, 200px);
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--server-accent, #fb923c) 22%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-pill) 92%, transparent);
}

.server-detail__banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

.server-detail__banner--fallback {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 16% 24%, color-mix(in srgb, var(--server-accent, #fb923c) 34%, transparent), transparent 58%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-pill) 84%, transparent), color-mix(in srgb, var(--bg-panel) 96%, transparent));
}

.server-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg-panel) 18%, transparent) 42%, color-mix(in srgb, var(--bg-panel) 96%, transparent) 100%);
}

.server-detail-hero__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: -52px;
  padding: 0 22px 20px;
  position: relative;
  z-index: 1;
}

.server-detail-hero__identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
}

.server-detail__avatar {
  width: 88px;
  height: 88px;
  border-radius: calc(var(--radius) + 4px);
  border: 3px solid color-mix(in srgb, var(--bg-panel) 94%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 14px 34px color-mix(in srgb, #000 34%, transparent);
  object-fit: cover;
  flex-shrink: 0;
}

.server-detail__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--server-accent, #fb923c) 24%, var(--bg-pill)), var(--bg-pill));
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
}

.server-detail-hero__info {
  min-width: 0;
  padding-bottom: 2px;
}

.server-detail-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.server-detail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.6vw, 1.72rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text-bright);
}

.server-detail-rank {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--text-bright);
  font-size: 0.72rem;
  font-weight: 700;
}

.server-detail-boost {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fbbf24 30%, transparent);
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
}

.server-detail-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.server-detail-submeta__item {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-pill) 72%, transparent);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.server-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.server-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--server-accent, #fb923c) 24%, transparent);
  background: color-mix(in srgb, var(--server-accent, #fb923c) 10%, transparent);
  color: var(--text-bright);
  font-size: 0.72rem;
  font-weight: 700;
}

.server-detail-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  flex-shrink: 0;
}

.server-detail-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent);
  animation: server-live-pulse 1.8s ease-in-out infinite;
}

@keyframes server-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: 0.72; }
}

.server-detail-live__value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-detail-live__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.server-detail-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.server-detail-aside,
.server-detail-main {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
}

.server-detail-aside {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.server-detail-stats {
  display: grid;
  gap: 0;
}

.server-detail-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

.server-detail-stat:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.server-detail-stat--online .server-detail-stat__value {
  color: var(--success);
}

.server-detail-stat__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
}

.server-detail-stat__value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  text-align: right;
}

.server-info-card {
  display: grid;
  gap: 0;
}

.server-info-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--text-bright);
}

.server-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.server-info-row:last-child {
  border-bottom: 0;
}

.server-info-row__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}

.server-info-row__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.server-info-row__value,
.server-info-row__copy {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text-bright);
  text-align: right;
}

.server-info-row__copy {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.server-info-row__copy-icon {
  width: 14px;
  height: 14px;
  stroke: color-mix(in srgb, var(--text) 45%, transparent);
  fill: none;
  stroke-width: 1.8;
}

.server-info-row__status {
  gap: 7px;
}

.server-info-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 28%, transparent);
}

.server-info-row__status.is-online {
  color: #16a34a;
}

.server-info-row__status.is-online .server-info-row__dot {
  background: #16a34a;
}

.server-info-row__version {
  color: #38bdf8;
}

.server-info-row__players {
  color: #16a34a;
  font-weight: 750;
}

.server-info-row__boosts {
  gap: 8px;
}

.server-info-promote {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: #16a34a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.server-info-row__hint {
  margin: -2px 0 4px;
  padding: 0 2px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: right;
}

.server-detail-actions {
  display: grid;
  gap: 10px;
}

.server-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.server-vote-btn .icon {
  width: 16px;
  height: 16px;
}

.server-vote-btn:hover,
.server-vote-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.server-vote-btn.is-voted {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}

.server-vote-btn:disabled {
  cursor: wait;
  opacity: 0.75;
}

.server-vote-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.server-detail-ip {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: calc(var(--radius) + 1px);
  background: color-mix(in srgb, var(--bg-pill) 72%, transparent);
  color: var(--text-bright);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.server-detail-ip:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  background: color-mix(in srgb, var(--bg-pill-hover) 88%, transparent);
}

.server-detail-ip:active {
  transform: scale(0.985);
}

.server-detail-ip.is-copied {
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-pill));
}

.server-detail-ip--empty {
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: default;
}

.server-detail-ip__label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.server-detail-ip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.server-detail-ip__text {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.server-detail-ip__state {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.server-detail-ip__icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  color: var(--text-muted);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease);
}

.server-detail-ip__icon--check {
  opacity: 0;
  transform: scale(0.7);
  color: var(--brand);
}

.server-detail-ip.is-copied .server-detail-ip__icon--copy {
  opacity: 0;
  transform: scale(0.7);
}

.server-detail-ip.is-copied .server-detail-ip__icon--check {
  opacity: 1;
  transform: scale(1);
}

.server-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.server-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.server-detail-link:hover {
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 70%, transparent);
  color: var(--text-bright);
}

.server-detail-main {
  min-width: 0;
  padding: 16px 18px 18px;
}

.server-detail-tabs-wrap {
  display: grid;
  gap: 16px;
}

.server-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 72%, transparent);
  width: fit-content;
}

.server-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.server-tab:hover {
  color: var(--text-bright);
}

.server-tab.is-active {
  background: var(--bg-elevated);
  color: var(--text-bright);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 18%, transparent);
}

.server-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 0.68rem;
}

.server-tab-panel[hidden] {
  display: none !important;
}

.server-detail-desc {
  margin: 0 0 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.server-detail-desc--empty {
  color: var(--text-muted);
  font-style: italic;
}

.server-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.server-detail-fact {
  display: grid;
  gap: 2px;
  min-width: 132px;
  flex: 1 1 132px;
  padding: 10px 12px;
  border-radius: calc(var(--radius) + 1px);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
}

.server-detail-fact dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.server-detail-fact dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-similar-grid {
  display: grid;
  gap: 8px;
}

.server-similar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: calc(var(--radius) + 1px);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.server-similar:hover {
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
  background: color-mix(in srgb, var(--bg-pill-hover) 82%, transparent);
  transform: translateY(-1px);
}

.server-similar__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}

.server-similar__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-pill);
  color: var(--text-bright);
  font-weight: 700;
}

.server-similar__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.server-similar__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-bright);
}

.server-similar__meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.server-similar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.server-similar__tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
}

.server-similar__chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  stroke-width: 2;
  color: var(--text-dim);
}

.server-detail-promo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--bg-panel)), color-mix(in srgb, var(--bg-panel) 96%, transparent));
}

.server-detail-promo__glow {
  position: absolute;
  inset: auto -10% -60% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 68%);
  pointer-events: none;
}

.server-detail-promo__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.server-detail-promo__text {
  margin: 0;
  max-width: 52ch;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.server-detail-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .server-detail-layout {
    grid-template-columns: 1fr;
  }

  .server-detail-hero__body {
    flex-direction: column;
    align-items: flex-start;
    margin-top: -36px;
    padding-inline: 16px;
  }

  .server-detail-hero__identity {
    width: 100%;
  }

  .server-detail-live {
    margin-left: 104px;
  }

  .server-detail-promo {
    flex-direction: column;
    align-items: stretch;
  }

  .server-detail-promo__actions {
    width: 100%;
  }

  .server-detail-promo__actions .servers-action-btn,
  .server-detail-promo__actions .servers-boost-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .server-detail-hero__identity {
    flex-direction: column;
    align-items: flex-start;
  }

  .server-detail-live {
    margin-left: 0;
  }

  .server-detail-fact {
    min-width: calc(50% - 4px);
    flex-basis: calc(50% - 4px);
  }
}

/* Unified component and responsive hardening */
.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  translate: 0 -160%;
}

.skip-link:focus {
  translate: 0;
}

.profile-menu__name,
.profile-menu__meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Кастомный select: нативный элемент лежит под кнопкой, чтобы форма работала как обычно */
.md-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.md-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}

.md-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h, 42px);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-bright);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.md-select__btn:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}

.md-select.is-open .md-select__btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.md-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-select__value.is-placeholder {
  color: var(--text-dim);
}

.md-select__chevron,
.md-select__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.md-select__chevron {
  color: var(--text-dim);
  transition: transform 160ms ease;
}

.md-select.is-open .md-select__chevron {
  transform: rotate(180deg);
}

.md-select__check {
  color: var(--accent);
}

.md-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  max-height: 300px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.md-select__menu[hidden] {
  display: none;
}

.md-select.is-open .md-select__menu {
  opacity: 1;
  transform: none;
}

.md-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: calc(var(--radius) - 3px);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.md-select__option:hover {
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.md-select__option:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--bg-pill-hover);
  color: var(--text-bright);
}

.md-select__option.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-bright);
  font-weight: 600;
}

.forum-composer__body .md-select__btn {
  min-height: 42px;
  padding: 12px 14px;
  border-color: var(--forum-line);
  background: var(--bg);
  color: var(--text);
}

.admin-users-search .md-select {
  width: auto;
  min-width: 180px;
}

.admin-users-search .md-select__btn {
  min-height: 40px;
  padding: 0 12px;
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--bg-panel);
}

:where(button, [role="button"], a, summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

:where(input, textarea, select):focus,
:where(input, textarea, select):focus-visible {
  outline: none;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select
):focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

.servers-search__input:focus-visible,
.forum-search input:focus-visible {
  box-shadow: none;
}

:where(button, input, textarea, select) {
  font: inherit;
}

:where(button, [role="button"], a) {
  -webkit-tap-highlight-color: transparent;
}

:where(
  .promo__badge,
  .server-row__points,
  .server-row__boost,
  .server-row__badge-new,
  .servers-filter-chip,
  .servers-quick-tag__count,
  .server-row__link,
  .profile-hero__tag,
  .profile-sidebar__status,
  .profile-sidebar__tag,
  .profile-premium__badge,
  .forum-tag,
  .forum-badge,
  .forum-chip,
  .profile-status,
  .promo__badge,
  .server-row__points,
  .server-row__boost,
  .server-row__badge-new,
  .servers-filter-chip,
  .servers-quick-tag__count,
  .server-row__link,
  .profile-hero__tag,
  .profile-sidebar__status,
  .profile-sidebar__tag,
  .server-detail-rank,
  .server-detail-boost,
  .server-detail-submeta__item,
  .server-tab-count,
  .profile-tag-chip,
  .profile-tag-option,
  .profile-tag-create__input,
  .profile-tag-create__btn
) {
  border-radius: var(--radius);
}

:where(
  .service-card__title,
  .service-card__desc,
  .profile-card__title,
  .profile-card__meta,
  .server-row__name,
  .server-row__desc,
  .forum-row__title-text,
  .forum-board__name,
  .forum-board__desc
) {
  overflow-wrap: anywhere;
}

:where(
  .servers-action-btn,
  .servers-boost-btn,
  .profile-btn,
  .forum-btn,
  .profile-section__action,
  .profile-topup-btn
) {
  min-height: var(--control-h);
  border-radius: var(--radius);
}

:where(
  button,
  [role="button"],
  input,
  textarea,
  select,
  .pill,
  .servers-action-btn,
  .servers-boost-btn,
  .profile-btn,
  .forum-btn
):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

:where(button, [role="button"], a):not(:disabled):not([aria-disabled="true"]) {
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease,
    box-shadow 140ms ease;
}

.main--page {
  width: 100%;
}

.page-head,
.forum-head,
.profile-auth-gate__card,
.hosting-soon__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-head::after,
.forum-head::after,
.profile-auth-gate__card::after,
.hosting-soon__card::after {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --page-pad-x: 20px;
    --section-gap: 52px;
  }

  .nav__links {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  }

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

  .nav__links .pill {
    flex: 0 0 auto;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-page-main,
  .servers-main,
  .server-detail-main,
  .plugin-page,
  .forum-page {
    padding-inline: var(--page-pad-x);
  }

  .server-detail-live {
    margin-left: 0;
  }

  .forum-member {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .forum-member__stat {
    grid-column: 2;
  }

  :where(.profile-layout, .forum-shell) {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad-x: 14px;
    --section-gap: 42px;
  }

  html {
    font-size: 100%;
  }

  .main {
    padding-inline: var(--page-pad-x);
  }

  .header {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }

  .nav-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 6px 28px 6px 10px;
  }

  .nav__links {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    scroll-snap-type: x proximity;
  }

  .nav__links .pill {
    min-height: var(--touch-min);
    scroll-snap-align: start;
  }

  .nav__side--end {
    flex: 0 0 auto;
  }

  .hero {
    padding-top: 44px;
    padding-bottom: 28px;
  }

  .hero__title {
    font-size: clamp(2.25rem, 14vw, 3.35rem);
  }

  .hero__lead,
  .page-head__lead,
  .forum-head__lead {
    max-width: 58ch;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .promo__card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .promo__btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-min);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-card,
  .service-card,
  .profile-panel-block,
  .profile-section,
  .forum-board,
  .forum-rail__card {
    min-width: 0;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .service-card--wide {
    grid-column: auto;
    min-height: 220px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer__nav-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__socials {
    grid-template-columns: 1fr;
  }

  .profile-page-main,
  .servers-main,
  .server-detail-main,
  .plugin-page,
  .forum-page {
    padding-inline: var(--page-pad-x);
  }

  .profile-section__head,
  .profile-panel-block__head,
  .servers-head__actions,
  .page-head__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-section__action,
  .servers-head__actions > *,
  .page-head__actions > * {
    width: 100%;
    justify-content: center;
  }

  .profile-topup-custom,
  .profile-tag-create,
  .forum-tag-create {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(input, textarea, select) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  :where(
    button,
    [role="button"],
    .servers-action-btn,
    .servers-boost-btn,
    .profile-btn,
    .forum-btn
  ) {
    min-height: var(--touch-min);
  }

  .profile-balance-card__refresh,
  .close-cart,
  .plugin-lightbox__close,
  .server-media-hero__avatar-edit {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .server-row,
  .forum-board__row,
  .forum-row {
    min-width: 0;
  }

  .server-row__side,
  .server-row__ip,
  .server-row__details {
    width: 100%;
  }

  .server-detail-promo__actions {
    flex-direction: column;
  }

  .server-detail-promo__actions > * {
    width: 100%;
  }

  .forum-member {
    align-items: start;
  }

  .forum-member__stat {
    white-space: normal;
  }

  .forum-thread-head__top,
  .forum-reply-box__footer,
  .forum-composer__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .forum-thread__delete,
  .forum-composer__footer .forum-btn {
    width: 100%;
    justify-content: center;
  }

  :where(.profile-list, .admin-table-wrap, .forum-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 360px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }

  .footer__nav-cols {
    grid-template-columns: 1fr;
  }

  .pill {
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Legal documents */
.doc-header {
  position: sticky;
  z-index: 40;
  top: 0;
  padding: 10px var(--page-pad-x);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
}

.doc-header__inner {
  width: min(100%, var(--content-max));
  min-height: 52px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-bright);
  text-decoration: none;
}

.doc-nav,
.doc-locale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.doc-locale {
  justify-self: end;
}

.doc-header__inner > .locale-panel {
  justify-self: end;
}

.doc-nav__link {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
}

.doc-nav__link:hover,
.doc-nav__link.is-active {
  background: var(--bg-pill);
  color: var(--text-bright);
}

.doc-main {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 72px var(--page-pad-x) 96px;
}

.doc-hero {
  position: relative;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.doc-hero__title {
  max-width: 22ch;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.05em;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}

.doc-hero__lead {
  max-width: 58ch;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.doc-hero__updated {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.doc-article {
  display: grid;
  gap: var(--space-3);
}

.doc-article section {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.doc-article h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-bright);
}

.doc-article h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--text);
}

.doc-article p,
.doc-article li {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-muted);
}

.doc-article p + p {
  margin-top: var(--space-3);
}

.doc-article ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.doc-article strong {
  color: var(--text);
}

.doc-article a,
.doc-footer a {
  color: var(--accent);
}

.doc-footer {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: var(--space-5) var(--page-pad-x);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .doc-header__inner {
    grid-template-columns: 1fr auto;
  }

  .doc-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  .doc-nav::-webkit-scrollbar {
    display: none;
  }

  .profile-auth-gate__card .servers-action-btn {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
    white-space: normal;
    text-align: center;
  }

  .doc-main {
    padding-top: 44px;
  }

  .doc-hero__title {
    max-width: none;
    font-size: 2rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
  }

  .doc-article section {
    padding: var(--space-4);
  }

  .doc-footer {
    flex-direction: column;
  }
}

/* Content pages: services, FAQ and support */
.content-page {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 72px var(--page-pad-x) 96px;
}

.content-page--wide {
  width: min(100%, var(--content-max));
}

.content-page__hero {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.content-page__title {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.05em;
  color: var(--text-bright);
}

.content-page__lead {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.support-grid,
.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.support-card,
.service-detail {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.support-card__index,
.service-detail > span {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--accent);
}

.support-card h2,
.service-detail h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-bright);
}

.support-card p,
.service-detail p,
.content-cta p {
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.support-card a {
  display: inline-flex;
  margin-top: var(--space-4);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.content-cta {
  margin-top: var(--space-5);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-panel));
}

.content-cta h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-bright);
}

@media (max-width: 640px) {
  .content-page {
    padding-top: 44px;
  }

  .support-grid,
  .service-detail-grid {
    grid-template-columns: 1fr;
  }

  .content-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Calm interaction feedback: no ripples, jumps or springy clicks. */
.motion-ripple {
  display: none !important;
}

.is-pop {
  animation: none !important;
}

:where(
  .pill,
  .settings-chip,
  .servers-action-btn,
  .servers-boost-btn,
  .servers-filter-chip,
  .profile-btn,
  .profile-topup-btn,
  .forum-btn,
  .forum-chip,
  .forum-side__action,
  .skin-modal__btn,
  .server-detail-ip,
  .server-detail-link,
  .service-card,
  .social-card
) {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease,
    filter 120ms ease !important;
}

:where(
  .pill,
  .settings-chip,
  .servers-action-btn,
  .servers-boost-btn,
  .servers-filter-chip,
  .profile-btn,
  .profile-topup-btn,
  .forum-btn,
  .forum-chip,
  .forum-side__action,
  .skin-modal__btn,
  .server-detail-ip,
  .server-detail-link,
  .service-card,
  .social-card
):hover {
  transform: none !important;
}

:where(
  .pill,
  .settings-chip,
  .servers-action-btn,
  .servers-boost-btn,
  .servers-filter-chip,
  .profile-btn,
  .profile-topup-btn,
  .forum-btn,
  .forum-chip,
  .forum-side__action,
  .skin-modal__btn,
  .server-detail-ip,
  .server-detail-link,
  .service-card,
  .social-card
):active {
  transform: none !important;
  box-shadow: none !important;
  filter: brightness(0.92);
}

.service-card:hover .service-card__action,
.service-card:hover .service-card__visual,
.service-card:focus-visible .service-card__visual,
.social-card:hover .social-card__btn {
  transform: none !important;
}

/* Server cards: compact monitoring layout with live MOTD */
.server-row {
  grid-template-columns: 64px minmax(210px, 0.72fr) minmax(460px, 1.7fr) 150px;
  gap: 14px;
  min-height: 104px;
  padding: 10px 14px;
}

.server-row__icon,
.server-row__avatar {
  width: 64px;
  height: 64px;
}

.server-row__main {
  align-self: center;
  overflow: hidden;
}

.server-row__top {
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}

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

.server-row__desc {
  -webkit-line-clamp: 1;
  margin-bottom: 3px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.server-row__links {
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 3px;
  overflow: hidden;
}

.server-row__link {
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
}

.server-row__meta {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  overflow: visible;
}

.server-row__meta-item {
  white-space: nowrap;
}

.server-row__meta-item--tags {
  min-width: 0;
  flex: 1 1 100%;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
}

.server-row__motd {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: var(--radius);
  background: var(--motd-dirt);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: default;
  overflow: hidden;
}

.server-row__motd-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fb923c;
}

.server-row__motd-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  width: 100%;
  max-height: 36px;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 0;
  font-family: var(--font-motd);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  font-variant-ligatures: none;
  font-smooth: never;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.server-row__ip {
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 78%, transparent);
  color: var(--text-bright);
}

.server-row__ip:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--bg-pill-hover);
}

/* Server page: identity, live MOTD and address in one compact card */
.server-detail-hero {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: none;
}

.server-detail-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.25fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 0;
  padding: 18px 20px;
}

.server-detail-hero__identity {
  align-items: center;
}

.server-detail__avatar {
  width: 76px;
  height: 76px;
  border-width: 1px;
  border-radius: var(--radius);
  box-shadow: none;
}

.server-detail-hero__motd {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: var(--radius);
  background: var(--motd-dirt);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: default;
  overflow: hidden;
}

.server-detail-hero__motd-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fb923c;
}

.server-detail-hero__motd-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  width: 100%;
  max-height: 36px;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 0;
  font-family: var(--font-motd);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  font-variant-ligatures: none;
  font-smooth: never;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.minecraft-motd {
  transition: border-color 0.15s ease, filter 0.15s ease;
}

.minecraft-motd:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  filter: brightness(1.05);
}

.minecraft-motd:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, #fff);
}

.minecraft-motd.is-copied {
  border-color: color-mix(in srgb, var(--success) 68%, transparent);
}

.minecraft-motd__segment {
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.minecraft-motd__segment.is-bold {
  font-weight: 400;
  text-shadow:
    1px 0 0 currentColor,
    2px 2px 0 #3f3f3f,
    3px 2px 0 #3f3f3f;
}

.minecraft-motd__segment.is-italic {
  font-style: normal;
}

.minecraft-motd__segment.is-underlined {
  text-decoration: underline;
}

.minecraft-motd__segment.is-strikethrough {
  text-decoration: line-through;
}

.minecraft-motd__segment.is-underlined.is-strikethrough {
  text-decoration: underline line-through;
}

.minecraft-motd__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  color: rgba(255, 255, 255, 0.48);
  transition: color 0.15s ease;
}

.minecraft-motd:hover .minecraft-motd__copy {
  color: rgba(255, 255, 255, 0.9);
}

.minecraft-motd.is-copied .minecraft-motd__copy {
  color: var(--success);
}

.server-detail-screens {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.server-detail-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 750;
  color: var(--text-bright);
}

.server-detail-screen {
  display: block;
  width: min(100%, 720px);
  max-height: 360px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  background: var(--bg-pill);
}

@media (max-width: 920px) {
  .server-row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "icon main"
      "motd motd"
      "side side";
  }

  .server-row__motd {
    grid-area: motd;
  }
}

@media (max-width: 900px) {
  .server-detail-hero__body {
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 0;
    padding: 16px;
  }

  .server-detail-hero__identity {
    width: 100%;
  }

  .server-detail-live {
    width: fit-content;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .server-row {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "icon main"
      "motd motd"
      "side side";
    padding: 12px;
  }

  .server-row__icon,
  .server-row__avatar {
    width: 58px;
    height: 58px;
  }

  .server-row__motd {
    min-height: 46px;
    padding: 4px 10px;
  }

  .server-row__side {
    flex-direction: column;
  }

  .server-detail-hero__identity {
    flex-direction: row;
    align-items: center;
  }

  .server-detail__avatar {
    width: 64px;
    height: 64px;
  }

  .server-detail-submeta {
    gap: 5px;
  }
}

.server-media-hero--icon-only {
  overflow: visible;
}

.server-media-hero--icon-only .server-media-hero__body {
  align-items: center;
  margin-top: 0;
  padding: 18px;
}

.server-media-hero--icon-only .server-media-hero__avatar {
  width: 96px;
  height: 96px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  box-shadow: none;
}

.server-media-hero--icon-only .server-media-hero__meta {
  padding-bottom: 0;
}

.profile-server-screens {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.profile-server-screens__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-server-screens__title {
  margin: 0 0 3px;
  font-weight: 750;
  color: var(--text-bright);
}

.profile-server-screens__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.profile-server-screens__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-bright);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-server-screens__add:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--bg-pill-hover);
}

.profile-server-screens__preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-server-screens__preview:not([hidden]) {
  display: grid;
}

.profile-server-screens__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.server-detail-screens__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.server-detail-screens__grid a {
  display: block;
  min-width: 0;
}

.server-detail-screens__grid .server-detail-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
}

.server-detail-rules {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.server-detail-rules__text {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 700px) {
  .profile-server-screens__head {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-server-screens__preview,
  .server-detail-screens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact statistics: quiet, readable and consistent across the product */
.stats__grid,
.servers-summary {
  gap: 6px;
}

.stats-card,
.stats-card--compact {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  min-height: 62px;
  padding: 9px 11px;
  border-color: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  box-shadow: none;
}

.stats-card::before {
  display: none;
}

.stats-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
}

.stats-card__icon,
.stats-card--compact .stats-card__icon {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--text-dim);
}

.stats-card:hover .stats-card__icon {
  border: 0;
  background: transparent;
  color: var(--text-muted);
}

.stats-card__icon .icon,
.stats-card--compact .stats-card__icon .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.stats-card__content {
  gap: 1px;
}

.stats-card__value,
.stats-card--meta .stats-card__value--meta {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.stats-card__label {
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-card:not(:has(.stats-card__icon)) {
  grid-template-columns: 1fr;
  padding-left: 11px;
}

.profile-stat {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
}

.profile-stat__value {
  margin-bottom: 1px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 650;
}

.profile-stat__label {
  font-size: 0.7rem;
}

.profile-boost-stats {
  gap: 6px;
}

.profile-boost-stat,
.profile-boost-stat--points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  min-height: 58px;
  padding: 9px 11px;
  border-color: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
}

.profile-boost-stat__label {
  flex: 1 1 100%;
  font-size: 0.69rem;
  font-weight: 500;
}

.profile-boost-stat__value {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 650;
}

.profile-boost-stat__link {
  margin: 0 0 0 auto;
  font-size: 0.7rem;
}

.server-detail-stat {
  padding: 8px 1px;
}

.server-detail-stat__label {
  font-size: 0.72rem;
  font-weight: 500;
}

.server-detail-stat__value {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 650;
}

.forum-rail__stats {
  gap: 6px;
}

.forum-rail__stats strong {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 650;
}

.forum-rail__stats span,
.forum-member__stat,
.social-card__stat {
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  .stats-card,
  .stats-card--compact {
    min-height: 58px;
    padding: 8px 9px;
  }

  .stats-card__label {
    white-space: normal;
  }
}

.profile-balance-card__value {
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.profile-dash-grid {
  gap: 6px;
}

.profile-dash-card,
.profile-dash-card--accent {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-pill) 58%, transparent);
}

.profile-dash-card__label {
  margin-bottom: 2px;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.profile-dash-card__value {
  margin-bottom: 3px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 650;
}

.profile-dash-card__link {
  font-size: 0.7rem;
  font-weight: 600;
}

.forum-head__metrics {
  gap: 8px 20px;
}

.forum-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.forum-metric strong {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0;
}

.forum-metric span {
  font-size: 0.7rem;
}

.server-detail-live {
  gap: 6px;
  min-height: 32px;
  padding: 0 9px;
  border-color: color-mix(in srgb, var(--success) 18%, transparent);
  background: color-mix(in srgb, var(--success) 6%, transparent);
}

.server-detail-live__dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
  animation: none;
}

.server-detail-live__value {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 650;
}

.server-detail-live__label {
  font-size: 0.69rem;
  font-weight: 500;
}

.server-settings-page {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0 72px;
}

.server-settings {
  display: grid;
  gap: 18px;
}

.server-settings__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.server-settings__chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.server-settings__chip.is-live {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 14%, var(--bg-panel));
  border-color: color-mix(in srgb, #22c55e 28%, transparent);
}

.server-settings__chip.is-hidden {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-panel));
  border-color: color-mix(in srgb, #f59e0b 26%, transparent);
}

.server-settings__chip.is-boost {
  color: #c2410c;
  background: color-mix(in srgb, #f97316 14%, var(--bg-panel));
  border-color: color-mix(in srgb, #f97316 28%, transparent);
}

.server-settings__panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.server-settings__panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-bright);
}

.server-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.server-settings__save {
  width: 100%;
  min-height: 46px;
}

.server-settings__admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.server-settings__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  font-size: 0.84rem;
  font-weight: 700;
}

.server-settings__check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: calc(var(--radius) - 5px);
  background: var(--bg-panel);
  cursor: pointer;
}

.server-settings__check input:checked {
  border-color: #f97316;
  background-color: #f97316;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2 6.4 11l6.1-6.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.server-settings__check input:focus,
.server-settings__check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, #f97316 28%, transparent);
}

.servers-action-btn--danger {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-panel));
  border-color: color-mix(in srgb, #ef4444 28%, transparent);
  color: #ef4444;
}

.servers-action-btn--danger:hover {
  background: color-mix(in srgb, #ef4444 18%, var(--bg-panel));
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
}

.server-media-hero__meta .servers-action-btn {
  margin-top: 10px;
}

.server-settings-shot {
  position: relative;
  margin: 0;
}

.server-settings-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.server-settings-shot__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}

.server-settings-shot__remove .icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 700px) {
  .server-settings__admin-grid {
    grid-template-columns: 1fr;
  }
}


/* —— Auth page (new shell) —— */
.auth-page {
  display: flex;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 48px;
}

.auth-shell {
  width: min(440px, 100%);
  margin: 0 auto;
}

.auth-card {
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, #000 28%, transparent);
}

.auth-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-bright);
}

.auth-card__lead {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.auth-social {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.auth-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.14s ease;
}

.auth-social__btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.auth-social__btn:hover {
  filter: brightness(1.06);
}

.auth-social__btn--tg {
  background: #229ed9;
}

.auth-social__btn--dc {
  background: #5865f2;
}

.auth-or {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-tab {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-tab.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-bright);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-field {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.auth-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text-bright);
  font: inherit;
}

.auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #111;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit:hover {
  filter: brightness(1.05);
}

.auth-msg {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.auth-msg.is-error {
  color: #f87171;
}

.auth-msg.is-success {
  color: #4ade80;
}

/* ---- File picker: styled replacement for native file inputs ---- */

.file-pick {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.file-pick__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.file-pick__zone {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.file-pick__zone.is-drag {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

.file-pick__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}

.file-pick__btn:hover {
  background: var(--bg-pill-hover);
}

.file-pick__btn .icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file-pick__hint {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.file-pick__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-pick__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.file-pick__thumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  object-fit: cover;
}

.file-pick__thumb--icon {
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.file-pick__thumb--icon .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file-pick__meta {
  display: grid;
  min-width: 0;
}

.file-pick__name {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.file-pick__size {
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.file-pick__remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.file-pick__remove:hover {
  background: var(--error-soft);
  color: var(--error);
}

.file-pick__remove .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Rich text: formatting toolbar + rendered markup ---- */

.rt-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rt-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rt-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rt-tool:hover {
  color: var(--text);
  background: var(--bg-pill-hover);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.rt-tool__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rt-tool--icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.rt-tool--preview {
  gap: 6px;
  min-width: 0;
  height: 32px;
  font-weight: 700;
}

.rt-tool--preview.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
}

.rt-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rt-preview {
  min-height: 96px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
}

.rt-empty {
  margin: 0;
  color: var(--text-dim);
}

.rt-content.rt-content {
  white-space: normal;
  overflow-wrap: anywhere;
}

.rt-content > *:first-child {
  margin-top: 0;
}

.rt-content > *:last-child {
  margin-bottom: 0;
}

.rt-content p {
  margin: 0 0 8px;
}

.rt-content .rt-heading {
  margin: 14px 0 6px;
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--text-bright);
}

.rt-content h3.rt-heading {
  font-size: 1.14rem;
}

.rt-content h6.rt-heading {
  font-size: 0.94rem;
  color: var(--text-muted);
}

.rt-content .rt-list {
  margin: 0 0 8px;
  padding-left: 20px;
  display: grid;
  gap: 3px;
}

.rt-content .rt-task {
  list-style: none;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin-left: -20px;
}

.rt-content .rt-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-panel);
  font-size: 0.7rem;
  color: var(--accent);
}

.rt-content .rt-task.is-done {
  color: var(--text-dim);
  text-decoration: line-through;
}

.rt-content .rt-quote {
  margin: 0 0 8px;
  padding: 6px 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-muted);
}

.rt-content .rt-hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.rt-content .rt-inline-code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-pill);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.rt-content .rt-code {
  position: relative;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow-x: auto;
}

.rt-content .rt-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre;
}

.rt-content .rt-code__lang {
  position: absolute;
  top: 6px;
  right: 10px;
  color: var(--text-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rt-content .rt-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rt-content .rt-mark {
  padding: 0 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--text-bright);
}

.rt-content .rt-img {
  max-width: 100%;
  height: auto;
  margin: 4px 0;
  border-radius: var(--radius);
}

.rt-content .rt-spoiler {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--bg-pill-hover);
  color: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  user-select: none;
}

.rt-content .rt-spoiler.is-open {
  background: var(--bg-pill);
  color: inherit;
  cursor: text;
  user-select: text;
}

.rt-content u {
  text-underline-offset: 2px;
}

/* ===== Уведомления: бейджи и лента ===== */
.notify-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.notify-badge[hidden] {
  display: none;
}

.notify-badge--pill {
  position: absolute;
  top: 2px;
  right: 2px;
  border: 2px solid var(--bg);
  height: 20px;
  min-width: 20px;
}

.pill--avatar {
  position: relative;
}

.profile-nav__link .notify-badge {
  margin-left: 6px;
}

.profile-nav__link--chats {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-bright);
}

.profile-nav__link--chats .notify-badge {
  margin-left: auto;
}

.profile-nav__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.profile-menu__link .notify-badge {
  margin-left: auto;
}

.notify-feed {
  display: grid;
  gap: 8px;
}

.notify-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-pill);
  color: inherit;
  text-decoration: none;
}

.notify-item.is-unread {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-pill));
}

.notify-item__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 1rem;
}

.notify-item__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notify-item__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.notify-item__meta,
.notify-item__text {
  color: var(--text-muted);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.notify-item__text {
  color: var(--text-dim);
}

.notify-item__time {
  color: var(--text-dim);
  font-size: 0.74rem;
  white-space: nowrap;
}

.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Пополнение баланса ===== */
.topup {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  margin: 14px 0 22px;
}

.topup__state,
.topup__form {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}

.topup__state {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent) 10%, var(--bg-panel)),
    color-mix(in srgb, var(--bg-panel) 94%, transparent)
  );
}

.topup__label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.topup__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

.topup__note,
.topup__hint {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-dim);
}

.topup__hint {
  margin: 0;
}

.topup__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.topup__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  color: var(--text-bright);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.topup__chip {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.topup__custom {
  display: grid;
  gap: 10px;
}

.topup__chip .profile-topup-btn__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.topup__chip:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

.topup__chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-pill));
}

.topup__field {
  display: grid;
  gap: 6px;
}

.topup__field-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.topup__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-pill) 88%, transparent);
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  appearance: textfield;
}

.topup__input::-webkit-inner-spin-button,
.topup__input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.topup__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.topup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.14s ease;
}

.topup-cta:hover {
  filter: brightness(1.07);
}

.topup-cta--compact {
  width: 100%;
  min-height: 42px;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .topup {
    grid-template-columns: minmax(0, 1fr);
  }
}