/* assets/app.css — стиль, адаптированный под оригинальный index.php (магазинный UI) */

/* Theme variables */
:root{
  --bg900:#0b0b0e;
  --bg800:rgba(18,18,22,.78);
  --bg700:rgba(0,0,0,.18);

  --text900:#e7edf3;
  --text800:#cfd6df;
  --text700:#9aa4af;

  --border:rgba(255,255,255,.10);

  /* Rust palette */
  --rust:#f08c28;
  --rust2:#c26a18;
  --green:#3fb950;
  --red:#f85149;

  --accent: var(--rust);
  --accent2: var(--green);

  --r:14px;
  --r2:18px;

  /* Aliases used across old/new blocks (prevents invalid var() => black text) */
  --text: var(--text900);
  --muted: var(--text700);
  --shadow: 0 12px 28px rgba(0,0,0,.38);

  /* Auto-derived highlight colors for TOP-3 (JS can override) */
  --top1-rgb: 255,215,0;
  --top2-rgb: 192,192,192;
  --top3-rgb: 205,127,50;

  /* Spacing + radius tokens (for consistent UI) */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-1: 12px;
  --radius-2: 14px;
  --radius-3: 18px;

  /* Focus ring (keyboard UX) */
  --focus-ring: rgba(240,140,40,.60);
  --focus-ring-soft: rgba(240,140,40,.18);

  /* Economy chart series colors (JS reads from CSS vars) */
  --ea-phys: var(--accent);
  --ea-sr: var(--green);
  --ea-market: #60a5fa;

  /* Semantic tokens (for React/legacy shared UI) */
  --bg: var(--bg900);
  --surface: var(--bg800);
  --surface-2: var(--bg700);
  --danger: var(--red);
  --ok: var(--green);
  --warn: #ffd36b;

  --radius: var(--r);
  --radius-lg: var(--r2);

  --transition-fast: 120ms ease;
  --transition-med: 180ms ease;

  /* Layout tokens (Stage 3: wide rhythm + consistent grid) */
  --page-pad-x: clamp(12px, 2.2vw, 28px);
  /* Keep readable line-length on ultra-wide screens */
  --page-max-w: 1560px;
  --page-gap-top: 16px;
  --page-gap-bottom: 60px;

  /* Sticky offsets: default small offset; JS overrides on pages with sticky header (e.g. market) */
  --sticky-top: 12px;

  /* Safe-area insets (iOS notch). Defaults to 0 on non-notch devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --grid-gap: clamp(12px, 1.4vw, 20px);
  --stack-gap: clamp(12px, 1.2vw, 16px);

  --sidebar-w: clamp(320px, 24vw, 360px);

  --panel-pad: clamp(12px, 1.1vw, 16px);
  --panel-head-pad-y: 14px;
  --panel-head-pad-x: 16px;

  --card-pad: clamp(10px, 1vw, 12px);

  /* Design system tokens (Stage 14: keep style consistent & refactor-safe) */
  --panel-bg: var(--bg800);
  --panel-border: var(--border);
  --panel-shadow: var(--shadow);
  --panel-radius: var(--radius-2);
  --panel-head-bg: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.10));
  --panel-head-border: rgba(255,255,255,.10);

  --card-bg: var(--bg800);
  --card-border: var(--border);
  --card-shadow: var(--shadow);
  --card-radius: var(--radius-2);

  --control-bg: rgba(0,0,0,.18);
  --control-bg-hover: rgba(0,0,0,.22);
  --control-bg-active: rgba(0,0,0,.26);
  --control-border: rgba(255,255,255,.10);
  --control-border-hover: rgba(240,140,40,.45);
  --control-border-active: rgba(255,255,255,.22);
  --control-radius: var(--radius-2);

  --control-accent-bg-hover: rgba(240,140,40,.06);
  --control-accent-bg-active: rgba(255,106,0,.08);
  --control-accent-border-active: rgba(255,106,0,.45);

  --control-focus-border: rgba(255,255,255,.22);
  --control-focus-shadow: 0 0 0 4px rgba(255,255,255,.04);

  --btn-radius: var(--radius-2);
  --btn-border: rgba(240,140,40,.28);
  --btn-border-hover: rgba(63,185,80,.40);
  --btn-bg: linear-gradient(180deg, rgba(240,140,40,.12), rgba(0,0,0,.18));
  --btn-bg-hover: linear-gradient(180deg, rgba(63,185,80,.10), rgba(0,0,0,.18));
  --btn-shadow-hover: 0 10px 22px rgba(0,0,0,.35);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ background:#0b0b0e; }
body{
  margin:0;
  font-family: var(--font, Inter, system-ui, sans-serif);
  color: var(--text900);
  /* IMPORTANT: keep body transparent so fixed video background is visible */
  background: transparent;
}

/* Accessible focus for keyboard users */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
:where(.btn,.navLink,.tab,.viewBtn,.linkBtn,.chip,.eaChip):focus-visible{
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

a{ color: inherit; text-decoration: none; }
button, input{ font: inherit; }
.hint{ color: var(--text700); font-size: 13px; }

/* Typography rhythm (Stage 3) */
:where(h1,h2,h3){ margin: 0; }
:where(p,ul,ol){ margin: 0; }
.bodyText{ font-size: 14px; line-height: 1.45; color: var(--text800); }
.muted{ color: var(--text700); }


/* -------------------------------------------------------------
   Small layout utilities (Stage 2: remove inline styles)
   ------------------------------------------------------------- */
.hidden{ display:none !important; }
.ml-auto{ margin-left:auto !important; }
.mt-3{ margin-top: 12px !important; }
.p-3{ padding: 12px !important; }
.m-0{ margin:0 !important; }
.pl-4{ padding-left: 18px !important; }
.ml-1{ margin-left: 4px !important; }
.ml-2{ margin-left: 8px !important; }
.mr-2{ margin-right: 8px !important; }

.mt-2{ margin-top: 8px !important; }
.mt-1{ margin-top: 6px !important; }
.mt-4{ margin-top: 16px !important; }
.my-4{ margin: 16px 0 !important; }
.mb-3{ margin-bottom: 12px !important; }
.mb-2{ margin-bottom: 8px !important; }
.fs-14{ font-size:14px !important; }
.fs-12{ font-size:12px !important; }
.p-2{ padding: 8px !important; }
.p-4{ padding: 16px !important; }
.gap-2{ gap: 8px !important; }
.items-center{ align-items:center !important; }
.justify-end{ justify-content:flex-end !important; }
.justify-between{ justify-content:space-between !important; }
.overflow-auto{ overflow:auto !important; }
.minH-60vh{ min-height:60vh !important; }
.h-10{ height:10px !important; }

.row{ display:flex; align-items:center; }
.row--wrap{ flex-wrap:wrap; }
.row--gap-2{ gap:8px; }
.row--gap-3{ gap:12px; }

.stack{ display:flex; flex-direction:column; }
.stack--gap-2{ gap:8px; }
.stack--gap-3{ gap:12px; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breakWord{ word-break:break-word; }
.shopsEllipsis12{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inline{ display:inline !important; }
.inline-flex{ display:inline-flex !important; }
.inline-block{ display:inline-block !important; }
.cursor-pointer{ cursor:pointer !important; }

/* Hint row (replaces inline flex styles in news etc.) */
.hintRow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.preWrap{ white-space:pre-wrap; margin:0; color:var(--text700); }
.items-start{ align-items:flex-start !important; }

/* Flex row toolbar used across pages */
.toolbarRow{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

/* Simple 2-column grid helper */
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}
.gap-3{ gap: 12px !important; }

/* Economy chart wrapper spacing */
.eaChartWrap{ margin: 10px 0 14px 0; }

/* UI prefs: hide specific fields (controlled from localStorage) */
html.pref-hide-steamid [data-pref="steamid"],
html.pref-hide-server [data-pref="server"],
html.pref-hide-status [data-pref="status"],
html.pref-hide-lastseen [data-pref="last_seen"],
html.pref-hide-level [data-pref="level"],
html.pref-hide-points [data-pref="points"],
html.pref-hide-rads [data-pref="rads"],
html.pref-hide-prefix [data-pref="prefix"],
html.pref-hide-groups [data-pref="groups"],
html.pref-hide-playtime [data-pref="playtime"],
html.pref-hide-npc [data-pref="npc_kills"],
html.pref-hide-zombie [data-pref="zombie_kills"],
html.pref-hide-pvp [data-pref="player_kills"],
html.pref-hide-deaths [data-pref="deaths"],
html.pref-hide-heli [data-pref="helicopter_kills"],
html.pref-hide-bradley [data-pref="bradley_kills"],
html.pref-hide-toprank .topCard .pos,
html.pref-hide-toprank .topCard .rank{
  display:none !important;
}

/* Toggle list (profile settings) */
.toggleList{ display:flex; flex-direction:column; gap: 10px; }
.toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
   gap: 12px;
  padding: 10px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.toggleRow__meta{ min-width:0; }
.toggleRow__label{ font-weight: 950; }
.toggleRow__desc{ color: var(--text700); font-size: 12px; margin-top: 2px; }

.switch{ position:relative; display:inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  transition: .18s ease;
  border-radius: 999px;
}
.slider:before{
  content:"";
  position:absolute;
  height: 20px; width: 20px;
  left: 3px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.88);
  transition: .18s ease;
  border-radius: 999px;
}
.switch input:checked + .slider{
  background: rgba(240,140,40,.22);
  border-color: rgba(240,140,40,.35);
}
.switch input:checked + .slider:before{ transform: translate(18px, -50%); }

.bgVideo{ position: fixed; inset: 0; z-index: 0; overflow:hidden; }
.bgVideo video{
  width:100%; height:100%; object-fit: cover;
  /* Remove "black film": make background brighter and more alive */
  filter: saturate(1.18) contrast(1.08) brightness(1.00);
}
.bgOverlay{
  position:absolute; inset:0;
  /* Readability layer: keeps background атмосферным, но не "шумным" под текстом */
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(0,0,0,.08), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.48));
  pointer-events:none;
}

/* Header */
.topbar{ position: relative; z-index: 20; backdrop-filter: blur(10px);
  /* unify heights of logo / rails / profile blocks in the top line */
  /* +вертикаль, чтобы ленты/профиль выглядели свободнее */
  /* Taller header so rails show content without feeling cramped */
  --topline-box-h: 150px;
}
.topbar.is-sticky{ position: sticky; top:0; z-index: 50; }
.topline{
  display:flex;
  /* keep all top blocks ровно по высоте */
  align-items: stretch;
  justify-content:flex-start;
  gap: 14px;
  padding: 20px var(--page-pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,12,.52);
}
.topRight{ position: relative; z-index: 60; margin-left: auto; }
.brand{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:12px;
  text-decoration: none;
  color: inherit;
  /* make logo block visually match the rails */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0;
  width: var(--topline-box-h);
  height: var(--topline-box-h);
  overflow: hidden;
}
.brand:hover{ border-color: rgba(240,140,40,.35); background: rgba(0,0,0,.30); }
.logoSmall{ width: 64px; height:64px; object-fit:cover; border-radius: 16px; border:1px solid rgba(255,255,255,.12); }
.brandName{ font-weight: 900; letter-spacing:.2px; }
.brandSub{ color: var(--text700); font-size: 12px; }

/* Center area in topline: two rails in a row (wraps to 2 rows on narrow screens) */
.topCenter{
  /* Give rails a bit more room on desktop so “Базы месяца” stays readable.
     It can still shrink when the profile block needs space. */
  flex: 1 1 640px;
  min-width: 320px;
  display: flex;
  flex-direction: row;
  /* keep rails side-by-side on desktop; allow wrap only on smaller screens */
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
  /* important for flex children ellipsis/overflow to work and avoid forced wrapping */
  min-width: 0;
  height: var(--topline-box-h);
}

/*
  Keep both rails "one after another" (side-by-side) on most desktop widths.
  Stack them only on smaller screens.
*/
@media (max-width: 980px){
  .topline{ flex-wrap: wrap; }
  .topCenter{ order: 3; flex-basis: 100%; min-width: 0; flex-wrap: wrap; height: auto; }
  .topRight{ order: 2; }
  .brand{ width: auto; height: auto; padding: 10px 12px; }

  /* Profile widget: stop forcing "desktop rail" height on smaller screens */
  .profileWidget{ height: auto; padding: 10px 12px; }
  .profileAvatarLarge{ width: 56px; height: 56px; border-radius: 12px; }
  .profileWidgetMetrics{ flex-wrap: wrap; }
  .profileWidgetActions{ flex-wrap: wrap; }
  .profileWidgetActions > .btn,
  .profileWidgetActions > a.btn,
  .profileWidgetActions > .notifBell > .notifBellBtn{
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  /* On smaller screens keep bell tappable even when it sits next to likes */
  .profileWidgetMetrics > .notifBell > .notifBellBtn{
    min-height: 32px;
    padding: 6px 10px;
  }
}

@media (max-width: 520px){
  /* Make the right profile block align nicely under rails */
  .topRight{ width: 100%; }
  .profileWidget{ width: 100%; }
}

.navline{
  display:flex; justify-content:space-between;
 align-items:center;
  padding: 10px var(--page-pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,12,.44);
}
.nav{ display:flex; gap: 14px; flex-wrap: wrap; }
.navLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text900);
  text-decoration: none;
  border-radius: var(--control-radius);
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-weight: 800; font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.navLink:hover{ border-color: var(--control-border-hover); background: var(--control-accent-bg-hover); transform: translateY(-1px); }
.lang{ opacity:.85; font-weight: 800; font-size: 12px; padding: 6px 10px; border:1px solid var(--control-border); background: var(--control-bg); }

/* Mobile header/nav: keep menu usable on narrow screens */
@media (max-width: 520px){
  :root{ --page-pad-x: 12px; --page-gap-top: 12px; --page-gap-bottom: 28px; --grid-gap: 12px; --stack-gap: 12px; --panel-pad: 12px; }
  .topline{ padding: 10px 12px; }
  .navline{ padding: 8px 12px; }
  .brandSub{ display:none; }
  .topCenter{ gap: 8px; }

  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .nav::-webkit-scrollbar{ height: 0; }
  .navLink{ white-space: nowrap; }

}

/* Layout */
/* Center the main content on wide screens while keeping the background full-bleed */
.wrap{ width: 100%; max-width: var(--page-max-w); margin: var(--page-gap-top) auto var(--page-gap-bottom); padding: 0 var(--page-pad-x); position: relative; z-index: 1;
  /* Phase 5: protect against long unbroken strings causing page-level horizontal scroll */
  overflow-wrap: anywhere;
}
@media (max-width: 520px){
  .wrap{ width: 100%; }
}
.grid{ display:grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--grid-gap); align-items:start; }
/* Responsive layout modes (stable):
   - Home: keep sidebar visible longer (tablet landscape), collapse only on mobile
   - Other pages: collapse earlier to prevent narrow content
*/
@media (max-width: 980px){ html:not(.page-home) .grid{ grid-template-columns: 1fr; } }
/* Home: collapse a bit earlier for tablet portrait (better readability) */
@media (max-width: 920px){ html.page-home .grid{ grid-template-columns: 1fr; } }

.stack{ display:flex; flex-direction:column; gap: var(--stack-gap); }

/* Section utilities (Stage 3) */
.section{ display:flex; flex-direction:column; gap: 10px; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; }
.section__title{ font-size: 18px; font-weight: 1000; letter-spacing: .2px; }
.section__kicker{ font-size: 12px; color: var(--text700); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.section__actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

/* Panel */
.panel{
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  border-radius: var(--panel-radius);
  overflow:hidden;
}
.panel__head{
  display:flex;
  justify-content:space-between;
   align-items:flex-end;
  gap:12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.panel__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }


/* Sidebar: compact refresh button */
#monitor-refresh{
  padding: 7px 10px;
  border-radius: 12px;
  line-height: 1;
}
.h1{ margin:0 0 6px; font-size:20px; font-weight:950; letter-spacing:.2px; }

.panel-head{
  display:flex;
  justify-content:space-between;
   align-items:flex-end;
  gap: 12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.panel-title{ display:flex; align-items:center; gap:10px; font-weight: 950; letter-spacing:.2px; font-size: 15px; text-transform:none; }
.panel-title .bar{ display:inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 0 2px rgba(240,140,40,.12); flex:0 0 auto; }
.panel-body{ padding: var(--panel-pad); }
.panel-foot{ margin-top: 12px; display:flex; justify-content:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 12px;
  min-height: 42px;
  line-height: 1;
  border-radius: var(--btn-radius);
  border:1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text900);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    filter var(--transition-fast);
}
.btn:hover{
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.btn:disabled,
.btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  filter:none;
}
.btn:disabled:hover,
.btn.is-disabled:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}

.btn--ghost{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}

.btn--primary{
  border-color: rgba(240,140,40,.55);
  background: linear-gradient(180deg, rgba(240,140,40,.26), rgba(0,0,0,.14));
}
.btn--primary:hover{
  border-color: rgba(63,185,80,.45);
  background: linear-gradient(180deg, rgba(63,185,80,.14), rgba(0,0,0,.16));
}

.btn--danger{
  border-color: rgba(248,81,73,.55);
  background: linear-gradient(180deg, rgba(248,81,73,.18), rgba(0,0,0,.16));
}
.btn--danger:hover{
  border-color: rgba(248,81,73,.70);
  background: linear-gradient(180deg, rgba(248,81,73,.24), rgba(0,0,0,.16));
}

.btn--success{
  border-color: rgba(63,185,80,.55);
  background: linear-gradient(180deg, rgba(63,185,80,.16), rgba(0,0,0,.16));
}
.btn--success:hover{
  border-color: rgba(63,185,80,.75);
  background: linear-gradient(180deg, rgba(63,185,80,.22), rgba(0,0,0,.16));
}

.btn--block{ width:100%; }
.btn--icon{ padding: 10px; width: 42px; min-width:42px; }
.btn--icon i{ margin:0; }


/* Inputs */
.input{
  width: 240px;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: var(--control-radius);
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text900);
  outline:none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.input::placeholder{ color: var(--text700); opacity: .75; }
.input:focus{ border-color: var(--control-focus-border); box-shadow: var(--control-focus-shadow); }
.input:disabled{
  opacity:.60;
  cursor:not-allowed;
  background: rgba(0,0,0,.12);
}
.input--block{ width:100%; }
.input--sm{ padding: 7px 10px; min-height: 36px; font-size: 13px; border-radius: calc(var(--control-radius) - 2px); }
.input--xs{ padding: 6px 8px; min-height: 32px; font-size: 12px; border-radius: calc(var(--control-radius) - 4px); }

/* Select */
.select{
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text900);
  outline:none;
}
.select:focus{ border-color: var(--control-focus-border); box-shadow: var(--control-focus-shadow); }
.select--sm{ padding: 6px 8px; min-height: 34px; font-size: 13px; border-radius: calc(var(--control-radius) - 2px); }

/* Checkbox/label shell */
.check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
}
.check:hover{ border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.16); }
.check input{ margin:0; }
.check.is-disabled{ opacity:.60; cursor:not-allowed; }


/* Tabs */
.modeTabs{ display:flex; gap:10px; margin-bottom: 14px; }
.tab{
  padding: 10px 12px;
  border-radius: var(--control-radius);
  border:1px solid var(--control-border);
  background: var(--control-bg);
  font-weight: 950;
  cursor:pointer;
}
.tab.is-active{ border-color: var(--control-border-active); background: var(--control-bg-active); }

/* Players grid + cards (из оригинала) */
.players-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 800px){ .players-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .players-grid{ grid-template-columns: 1fr; } }

.player-card{
  position: relative;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  padding: 14px;
  min-height: 110px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  cursor:pointer;
  overflow:hidden;
}
.player-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
  background: rgba(0,0,0,.22);
}
.player-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: rgba(255,255,255,.10);
}
.player-avatar{
  width:60px; height:60px;
  border-radius: var(--r);
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  flex:0 0 auto;
}
.player-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.player-name{ font-weight:900; font-size:15px; line-height:1.15; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-meta{ color: var(--text700); font-size: 12px; font-weight:700; }
.player-value{
  font-weight:900;
  font-size:16px;
  padding:9px 12px;
  border-radius: var(--r);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
  white-space: nowrap;
}

/* All players list */
.controls{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.viewSwitch{ display:flex; gap:8px; padding:4px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); }
.viewBtn{
  padding:8px 10px;
  border:1px solid transparent;
  background: transparent;
  font-weight: 950;
  cursor:pointer;
  border-radius: var(--r);
  color: var(--text700);
}
.viewBtn.is-active{ color: var(--text900); border-color: rgba(255,255,255,.20); background: rgba(0,0,0,.26); }

.tableHead{
  display:grid;
  grid-template-columns: 1fr 110px 110px 110px 110px 110px;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  margin-bottom: 10px;
}
.tableHead--sticky{ position: sticky; top: var(--sticky-top); z-index: 20; }
.th{ border:none; background: transparent; color: var(--text700); font-weight: 950; cursor:pointer; text-align:center; padding:0; }
.th.is-left{ text-align:left; }
.th:hover{ color: var(--text900); }

.playersList{ display:flex; flex-direction:column; gap: 10px; }
.playersList[data-view="cards"]{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px){ .playersList[data-view="cards"]{ grid-template-columns: 1fr; } }

.playerRow{
  display:grid;
  grid-template-columns: 1fr 110px 110px 110px 110px 110px;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.playersList[data-view="cards"] .playerRow{ grid-template-columns: 1fr; }
.playerRow:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.22); transform: translateY(-1px); }
.playerRow__left{ display:flex; align-items:center; gap: 12px; min-width:0; }
.playerRow__avatar img{
  width: 44px; height:44px; object-fit:cover; border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
}
.playerRow__name{ font-weight: 950; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.playerRow__steamid{ color: var(--text700); font-size: 12px; font-weight:700; }
.playerRow__right{ display:grid; grid-template-columns: repeat(5, 110px); gap:10px; align-items:center; justify-content:end; }
.playersList[data-view="cards"] .playerRow__right{ display:flex; flex-wrap:wrap; }
.num{ text-align:center; font-weight: 950; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.badge--soft{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.badge--ok{ border-color: rgba(63,185,80,.55); background: rgba(63,185,80,.10); }
.badge--warn{ border-color: rgba(255,211,107,.55); background: rgba(255,211,107,.08); }
.badge--danger{ border-color: rgba(248,81,73,.55); background: rgba(248,81,73,.10); }


/* Monitoring progress */
.kv{ display:flex; justify-content:space-between;
 align-items:center; font-weight: 800; }
.progress{ width:100%; height: 8px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); }
.progress > div{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s ease; }
.monitorActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.monitorActions .btn-primary{ flex: 1 1 180px; }
.monitorActions .btn-ghost{ flex: 1 1 180px; }
.linkBtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 9px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-weight: 900;
}
.linkBtn:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.26); }

/* Profile dropdown */
.profileWidgetBtn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  border-radius: var(--r);
  position: relative;
  overflow: hidden; /* important for likes-glow clipping */
}
.profileAvatar{ width: 26px; height:26px; border-radius: var(--r); object-fit:cover; border:1px solid rgba(255,255,255,.12); }
.profileName{ font-weight: 900; max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.likeGhost{ display:none !important; }

.colorChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--chip);
  color: var(--chipText);
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  white-space: nowrap;
}
.colorChip::before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.colorChip--dark{
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 0 0 1px rgba(0,0,0,.32);
}
.profileMenu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 360px;
  z-index: 200;
  border:1px solid rgba(240,140,40,.28);
  background: linear-gradient(180deg, rgba(28,30,38,.98), rgba(14,16,22,.96));
padding: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.40);
  border-radius: var(--r);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.profileMenu.is-open{ opacity:1; transform: none; visibility: visible; pointer-events:auto; transition-delay: 0s; }
.profileMenu__tabs{ display:flex; gap:8px; margin-bottom: 10px; }
.profileMenu__stats{ min-height: 120px; }
.profileMenu__actions{ display:flex; gap:10px; margin-top: 12px; }

/* Profile menu content (v2) */
.profileDropHeader{ display:flex; align-items:center; gap: 10px; }
.profileDropAvatar{ width: 36px; height: 36px; border-radius: 12px; object-fit: cover; border:1px solid rgba(255,255,255,.12); flex: 0 0 auto; }
.profileDropMeta{ min-width:0; }
.profileDropName{ font-weight: 1100; letter-spacing: .2px; line-height: 1.1; max-width: 180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profileDropSub{ color: var(--text700); opacity: .88; font-size: 12px; margin-top: 2px; }
.profileDropRight{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.profileDropGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.kvMini{ padding: 10px 10px; border-radius: 12px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); }
.kvMini span{ display:block; color: var(--text700); font-size: 11px; font-weight: 900; opacity: .92; margin-bottom: 4px; }
.kvMini b{ display:block; color: var(--text900); font-weight: 1100; font-size: 13px; font-variant-numeric: tabular-nums; }
.profileDropRows{ margin-top: 12px; }
.profileDropRows .miniStats__row{ padding: 7px 0; }

@media (max-width: 520px){
  .profileMenu{ width: min(92vw, 360px); }
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; }

.miniStats--compact .miniStats__row b{ color: var(--text900); font-weight:1000; font-size:12px; font-variant-numeric: tabular-nums; word-break: break-word; }



/* miniStats (используется в модалке профиля и в виджете) */
.miniStats{ display:flex; flex-direction:column; gap: 6px; }
.miniStats__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
   gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.miniStats__row:last-child{ border-bottom:none; }
.miniStats__row span{ color: var(--text900); font-size: 12px; font-weight: 800; opacity: .90; }


.divider{ height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }

/* Profile overview tiles */

.statTile{
  display:flex; gap: 10px; align-items:center;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}

.statTile__icon{ width:28px; height:28px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.statTile__label{ color: var(--text700); font-size: 12px; font-weight: 800; }
.statTile__value{ font-size: 16px; font-weight: 1000; letter-spacing: .2px; }

.statTile--good{ border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.08); }
.statTile--accent{ border-color: rgba(240,140,40,.45); background: rgba(240,140,40,.10); }
.statTile--bad{ border-color: rgba(248,81,73,.35); background: rgba(248,81,73,.06); }

/* Skeleton */
.skeleton{
  position: relative;
  overflow:hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-20%);
  animation: skeletonMove 1.4s ease-in-out infinite;
}
.skeletonLine{
  height: 12px;
  margin: 10px 0;
  border-radius: 10px;
}
.skeletonLine.skeleton{ display:block; }
@keyframes skeletonMove{
  0%{ transform: translateX(-40%); }
  100%{ transform: translateX(40%); }
}

/* Modal (legacy) */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}
.modal-overlay.is-open{ display:flex; }

.modal-content{
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(18,18,22,.94);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.modal-content img,
.modal-content video{
  max-width: 100%;
  height: auto;
}
@supports (height: 100dvh){
  .modal-content{ max-height: calc(100dvh - 24px); }
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.modal-avatar{
  width: 46px;
  height:46px;
  border-radius: calc(var(--radius-lg) - 4px);
  border:1px solid rgba(255,255,255,.12);
  object-fit:cover;
}
.modal-title{ font-weight: 950; font-size: 16px; }
.modal-sub{ color: var(--text700); font-size: 12px; font-weight:700; }
.modal-close{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text900);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.modal-close:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.modal-body{ padding: 16px; }

@media (max-width: 520px){
  .panel-body{ padding: 12px; }
  .panel-head, .panel__head{ padding: 10px 10px; }

  .modal-content{ width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
  @supports (height: 100dvh){
    .modal-content{ max-height: calc(100dvh - 16px); }
  }
  .modal-header{ padding: 10px 10px; }
  .modal-body{ padding: 12px; }
  .modal-close{ padding: 7px 10px; }
}
.monitorMeta{display:flex; justify-content:space-between;
 gap:10px; margin-top:6px; font-size:12px;}
.monitorMeta .muted{color:var(--text700);} 
.monitorMeta b.is-stale, .telemetryUpdated.is-stale{ color: #ffd36b; }
.monitorMeta b.is-dead, .telemetryUpdated.is-dead{ color: #ff7a7a; }

.telemetryUpdated{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  opacity: .9;
  white-space: nowrap;
}

/* -------------------------
   Telemetry (online players)
------------------------- */
.telemetryHead{ display:flex; align-items:center; justify-content:space-between;
 gap:10px; margin-top:2px; }
.telemetryTitle{ font-weight:900; color: var(--text900); letter-spacing:.2px; }
.telemetryList{ display:grid; gap:8px; margin-top:10px; max-height:260px; overflow:auto; padding-right:4px; }
.telemetryRow{
  /* This is a <button>. Normalize native control rendering across browsers
     so layout sizing is identical on the Home (fixed-viewport) screen and
     on regular pages. */
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
   gap:10px;
  padding: 10px 10px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.telemetryRow:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,180,60,.35);
}
.telemetryRow:focus-visible{
  outline: 2px solid rgba(255,180,60,.55);
  outline-offset: 2px;
}
.telemetryLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.telemetryAvatar{ width:28px; height:28px; border-radius:10px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
.telemetryAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.telemetryDot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.35); flex:0 0 auto; }
.telemetryDot--moving{ background: rgba(80, 220, 160, .9); box-shadow: 0 0 0 4px rgba(80,220,160,.12); }
.telemetryDot--standing{ background: rgba(255, 200, 90, .95); box-shadow: 0 0 0 4px rgba(255,200,90,.12); }
.telemetryDot--afk{ background: rgba(255, 107, 107, .95); box-shadow: 0 0 0 4px rgba(255,107,107,.12); }
.telemetryDot--sleeping{ background: rgba(150, 170, 255, .9); box-shadow: 0 0 0 4px rgba(150,170,255,.12); }
.telemetryDot--leave{ background: rgba(255, 100, 100, .95); box-shadow: 0 0 0 4px rgba(255,100,100,.12); }

.telemetryRow--leave{ background: rgba(255, 90, 90, .05); border-color: rgba(255, 90, 90, .18); }
.telemetryName{ font-weight:800; color: var(--text900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.telemetryMeta{ font-size: 12px; color: var(--text700); white-space:nowrap; }
.telemetryEventsTitle{ margin-top:12px; font-weight:900; color: var(--text900); }
.telemetryEvents{ margin-top:8px; display:grid; gap:8px; max-height:170px; overflow:auto; padding-right:4px; }

/* Joined highlight + badge */
.telemetryRow--join{
  background: rgba(90,255,160,.06);
  border-color: rgba(90,255,160,.35);
}
.telemetryBadge{
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text900);
  flex:0 0 auto;
}
.telemetryBadge--join{
  border-color: rgba(90,255,160,.35);
  background: rgba(90,255,160,.10);
  color: rgba(210,255,230,.95);
}

/* Activity chips (ephemeral) */
.telemetryChip{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.telemetryChip:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,180,60,.35);
}
.telemetryChipAvatar{
  width:28px; height:28px;
  border-radius:10px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.telemetryChipAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.telemetryChipMain{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.telemetryChipName{
  font-weight:800;
  color: var(--text900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.telemetryChipMeta{ font-size:12px; color: rgba(255,255,255,.70); }
.telemetryChip--join{ border-color: rgba(90,255,160,.22); }
.telemetryChip--leave{ border-color: rgba(255,90,90,.22); }

@keyframes telemetryFadeInUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.telemetryChip--new{ animation: telemetryFadeInUp .22s ease-out; }

.telemetryModalList{ display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 560px){
  .telemetryModalList{ grid-template-columns: 1fr; }
}
.telemetryModalToolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
   margin-bottom:12px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 0 12px;
  background: rgba(11,15,22,.96);
}
.telemetrySearch{ width: 100%; padding: 10px 12px; border-radius: var(--r); border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color: var(--text900); }

.telemetryList::-webkit-scrollbar,
.telemetryEvents::-webkit-scrollbar{ width: 6px; }
.telemetryList::-webkit-scrollbar-thumb,
.telemetryEvents::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 10px; }

/* TOP players */
.tabs--wrap{ flex-wrap:wrap; }
.topList{ margin-top:14px; display:grid; gap:10px; }

.topCard__place{ font-weight:900; opacity:.8; }
.topCard__avatar img{
  width:40px;height:40px;border-radius:10px;object-fit:cover;
}
.topCard__name{ font-weight:900; }
.topCard__value{ font-weight:900; color:var(--accent); }

.place-1{
  background: linear-gradient(90deg, rgba(255,180,60,.18), rgba(255,255,255,.02));
  border-color: rgba(255,180,60,.55);
}
.place-2{
  background: linear-gradient(90deg, rgba(180,180,180,.18), rgba(255,255,255,.02));
  border-color: rgba(180,180,180,.55);
}
.place-3{
  background: linear-gradient(90deg, rgba(176,120,60,.22), rgba(255,255,255,.02));
  border-color: rgba(176,120,60,.55);
}


/* Category tabs (stats) */
.categoryTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.catTab{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 10px 12px;
  border-radius: var(--r);
  border:1px solid var(--control-border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.catTab:hover{ border-color: rgba(255,106,0,.35); background: rgba(255,106,0,.05); }
.catTab.is-active{
  background: linear-gradient(180deg, rgba(255,106,0,.96), rgba(255,146,46,.84));
  border-color: var(--control-accent-border-active);
  color: #1a120a;
}

/* Top grid/cards */
.topGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.topGrid.is-rich{
  grid-template-columns: 1fr;
}
@media (max-width: 980px){
  .topGrid{ grid-template-columns: 1fr; }
}
.topCard{
  appearance:none;
  border:none;
  text-align:left;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;
   gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  border:1px solid var(--border);
  background: rgba(15,23,34,.92);
  box-shadow: var(--shadow);
  color: var(--text900);

  pointer-events:auto;
}

.topCard__left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.topCard .pos{
  width: 30px; height: 30px;
  border-radius: var(--r);
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.topCard .ava{ width: 42px; height: 42px; border-radius: 14px; overflow:hidden; border:1px solid var(--border); }
.topCard .ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.topCard .meta{ min-width:0; }
.topCard .name{ font-weight: 950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topCard .id{ color: var(--muted); font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px; }
.topCard__right{ text-align:right; }
.topCard .val{ font-size: 18px; font-weight: 1000; }
.topCard .lbl{ color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Top 3 highlights */
.topCard.top1{ border-color: rgba(var(--top1-rgb),.35); background: linear-gradient(180deg, rgba(var(--top1-rgb),.10), rgba(15,23,34,.92)); }
.topCard.top2{ border-color: rgba(var(--top2-rgb),.35); background: linear-gradient(180deg, rgba(var(--top2-rgb),.08), rgba(15,23,34,.92)); }
.topCard.top3{ border-color: rgba(var(--top3-rgb),.45); background: linear-gradient(180deg, rgba(var(--top3-rgb),.10), rgba(15,23,34,.92)); }
.topCard.top1 .pos{ border-color: rgba(var(--top1-rgb),.45); }
.topCard.top2 .pos{ border-color: rgba(var(--top2-rgb),.45); }
.topCard.top3 .pos{ border-color: rgba(var(--top3-rgb),.55); }

/* News (home) */
.newsGrid{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 12px;
}
.newsCard{
  position: relative;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(8,12,18,.92), rgba(10,14,22,.96));
  border-radius: var(--r);
  overflow:hidden;
  padding: 16px;
  box-shadow: var(--shadow);
  display:flex;
  gap: 14px;
  align-items: stretch;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.newsCard::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width: 5px;
  background: linear-gradient(180deg, rgba(240,140,40,.95), rgba(194,106,24,.65));
  border-radius: var(--r) 0 0 var(--r);
  opacity:.35;
}
.newsCard:hover{
  border-color: rgba(240,140,40,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.newsCard__tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,106,0,.35);
  background: rgba(255,106,0,.08);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
}
.newsCard__title{ margin: 0; font-size: clamp(18px, 1.2vw, 20px); font-weight: 1000; letter-spacing:.15px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.newsCard__text{ margin: 0; color: rgba(231,237,243,.88); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.newsCard__meta{ margin-top: 0; color: var(--muted); font-size: 12px; }

.newsCard__cover{
  position: relative;
  display:block;
  /* Make cover size fluid so text doesn't become too narrow on mid widths */
  flex: 0 0 clamp(220px, 26vw, 340px);
  max-width: clamp(220px, 26vw, 340px);
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--control-radius) - 2px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  margin: 0;
}
.newsCard__cover img{
  width:100%;
  height: 100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.08) contrast(1.06);
}

.newsCard__cover--placeholder{
  background:
    radial-gradient(380px 220px at 30% 20%, rgba(240,140,40,.18), rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08));
}
.newsCard__cover--placeholder::after{
  content: "";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  pointer-events:none;
}
.newsCard__body{ flex: 1 1 auto; min-width: 0; padding-left: 6px; display:flex; flex-direction:column; gap: 8px; }

@media (max-width: 980px){
  .newsCard{ flex-direction: column; }
  .newsCard__cover{
  position: relative; max-width: 100%; flex-basis: auto; width: 100%; }

}

@media (max-width: 520px){
  .newsCard{ padding: 12px; gap: 12px; }
  .newsCard__actions{ justify-content: flex-start; }
}
.newsCard__head{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 8px;
}
.newsCard__actions{
  margin-top: auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.newsCard__link{ color: inherit; text-decoration:none; }
.newsCard__link:hover{ color: var(--accent); }

.newsHero{
  margin: 12px auto 0;
  max-width: 920px;
  border-radius: var(--r2);
  overflow:hidden;
  border: 1px solid var(--border);
  /* Smart frame: ONLY side black borders for non-wide images.
     IMPORTANT: we DO NOT shrink the image to fit the borders.
     Instead we keep cover (full size) and crop top/bottom if needed. */
  background: rgba(0,0,0,.72);
  aspect-ratio: 16 / 7; /* меньше по высоте, удобнее читать новость */
  --media-frame: 12%;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.newsHero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.08) contrast(1.05);
}
.newsHero.is-wide{ background: rgba(0,0,0,.72); }
.newsHero.is-boxed{ background: rgba(0,0,0,.72); }

/* Side borders rendered as overlays (do not affect layout, do not shrink media). */
.newsHero.is-boxed::before,
.newsHero.is-boxed::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: var(--media-frame);
  z-index: 2;
  pointer-events:none;
}
.newsHero.is-boxed::before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.90), rgba(0,0,0,.90) 70%, rgba(0,0,0,0));
}
.newsHero.is-boxed::after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.90), rgba(0,0,0,.90) 70%, rgba(0,0,0,0));
}
@media (max-width: 980px){
  .newsHero{ max-width: 100%; }
}

.pill--soft{
  border-color: rgba(46,204,113,.45);
  background: rgba(46,204,113,.10);
  color: var(--text);
}
.btn--sm{ padding: 7px 10px; font-size: 13px; border-radius: calc(var(--control-radius) - 2px); }
.btn--xs{ padding: 6px 8px; font-size: 12px; border-radius: calc(var(--control-radius) - 4px); }

.cmt__mod{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

/* Reactions active state */
.btn.is-active{
  border-color: rgba(255, 155, 80, .55);
  background: rgba(255, 155, 80, .12);
}

.newsBody{
  margin-top: 14px;
}

/* News empty state */
.emptyState{
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--r);
  padding: 18px;
  background: rgba(8,12,18,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.emptyState__title{
  font-weight: 1000;
  color: var(--text900);
  letter-spacing:.2px;
}
.emptyState__text{
  margin-top: 4px;
  color: rgba(231,237,243,.82);
  line-height: 1.5;
}

/* Unified state blocks (loading / empty / error) */
.state{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: rgba(0,0,0,.14);
  color: rgba(231,237,243,.90);
}
.state__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.state__icon i{ opacity:.92; }
.state__body{ min-width:0; }
.state__title{
  font-weight: 1000;
  letter-spacing:.2px;
  line-height: 1.2;
}
.state__text{
  margin-top: 4px;
  color: rgba(231,237,243,.78);
  line-height: 1.45;
  font-size: 13px;
}
.state__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.state--info{ border-style: solid; border-color: rgba(255,255,255,.10); }
.state--ok{ border-style: solid; border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.06); }
.state--warn{ border-style: solid; border-color: rgba(255,211,107,.35); background: rgba(255,211,107,.06); }
.state--error{ border-style: solid; border-color: rgba(248,81,73,.35); background: rgba(248,81,73,.06); }
.state--loading{ border-style: solid; border-color: rgba(255,255,255,.10); }

.spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.65);
  animation: spin 0.85s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; border-top-color: rgba(255,255,255,.18); }
}

/* News detail */
.newsDetail{ max-width: 920px; margin: 0 auto; }
.newsBody{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245,248,252,.94);
}
.newsBody p{ margin: 0 0 12px; }
.newsBody h2, .newsBody h3{
  margin: 18px 0 10px;
  line-height: 1.2;
  letter-spacing:.15px;
  color: var(--text900);
}
.newsBody h2{ font-size: 22px; }
.newsBody h3{ font-size: 18px; }
.newsBody a{ color: rgba(255,190,120,.95); text-decoration: underline; text-underline-offset: 3px; }
.newsBody a:hover{ color: var(--accent); }
.newsBody ul, .newsBody ol{ padding-left: 18px; margin: 0 0 12px; }
.newsBody li{ margin: 6px 0; }
.newsBody blockquote{
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(255,106,0,.45);
  background: rgba(255,255,255,.03);
  border-radius: calc(var(--control-radius) - 2px);
}
.newsBody code{
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.newsFooter{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,12,18,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.newsFooter__row{ display:flex; align-items:center; justify-content:space-between;
 gap: 12px; flex-wrap: wrap; }
.newsFooter__title{ font-weight: 1000; color: var(--text900); }
.newsFooter__actions{ display:flex; align-items:center; gap: 10px; }

/* News comments (MVP) */
.newsComments{ width: 100%; display: grid; gap: 12px; }
.newsComments__form{ width: 100%; display: grid; gap: 10px; }
.newsComments__textarea{ min-height: 84px; resize: vertical; }
.newsComments__actions{ display:flex; align-items:center; gap: 10px; justify-content:space-between;
 }
.newsComments__list{ display: grid; gap: 10px; }

.cmt{ display:flex; gap: 10px; padding: 10px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: calc(var(--control-radius) - 2px); background: rgba(255,255,255,.02); }
.cmt__av{ width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); object-fit: cover; background: rgba(0,0,0,.25); }
.cmt__main{ flex: 1; min-width: 0; }
.cmt__head{ display:flex; align-items:baseline; justify-content:space-between;
 gap: 10px; }
.cmt__name{ font-weight: 1000; color: var(--text900); }
.cmt__meta{ font-size: 12px; color: var(--muted); white-space: nowrap; }
.cmt__body{ margin-top: 4px; color: var(--text); line-height: 1.5; word-break: break-word; }

.navLink.is-active{ border-color: var(--control-accent-border-active); background: var(--control-accent-bg-active); }


/* Buttons (legacy aliases for old markup) */
.btn-primary,
.btn-ghost{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: var(--r);
  font-weight: 950;
  cursor:pointer;
  user-select:none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    filter var(--transition-fast);
}

.btn-primary{
  border:1px solid rgba(240,140,40,.60);
  background: linear-gradient(180deg, rgba(240,140,40,.30), rgba(0,0,0,.14));
  color: var(--text900);
}
.btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.btn-ghost{
  border:1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.btn-ghost:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
/* Modal */
html.modal-open{ overflow:hidden; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:none;
}
#baseLightbox{ z-index: 100500; }

.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
}
.modal__dialog{
  position:relative;
  width: min(920px, calc(100% - 24px));
  /* Ensure dialogs never hide under the sticky header */
  margin: calc(var(--sticky-top) + 14px) auto 14px;
  max-height: calc(100vh - var(--sticky-top) - 28px - var(--safe-bottom));
  display:flex;
  flex-direction:column;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  background: rgba(18,18,22,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
}

@supports (height: 100dvh){
  .modal__dialog{ max-height: calc(100dvh - var(--sticky-top) - 28px - var(--safe-bottom)); }
}

@media (max-width: 600px){
  .modal__dialog{ margin: calc(var(--sticky-top) + 10px) auto 10px; max-height: calc(100vh - var(--sticky-top) - 20px - var(--safe-bottom)); }
  @supports (height: 100dvh){
    .modal__dialog{ max-height: calc(100dvh - var(--sticky-top) - 20px - var(--safe-bottom)); }
  }
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
   padding: 14px 16px;
  border-bottom:1px solid var(--border);
}
.modal__title{ font-weight: 1000; }
.modal__close{
  width: 34px; height: 34px;
  border-radius: var(--r);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 18px;
  cursor:pointer;

  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.modal__close:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.modal__content{ padding: 16px; overflow:auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }



/* Modal animation (Rust-style) */
/*
  Важно: модалка не должна "блокировать" интерфейс, если JS не добавил доп.класс.
  Раньше видимость зависела от .is-anim → итог: backdrop невидим, но перекрывает клики.
  Делаем анимацию так, чтобы достаточно было одного класса .is-open.
*/
.modal__backdrop{
  opacity: 0;
  transition: opacity .16s ease;
}
.modal__dialog{
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.modal.is-open .modal__backdrop{ opacity: 1; }
.modal.is-open .modal__dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.playerHeader{
  display:grid;
  grid-template-columns: 72px 1fr 240px;
  gap: 14px;
  align-items:start;
}
@media (max-width: 900px){
  .playerHeader{ grid-template-columns: 72px 1fr; }
  .playerHeader__side{ grid-column: 1 / -1; }
}
.playerHeader__ava{
  width:72px; height:72px; border-radius: 18px;
  overflow:hidden; border:1px solid var(--border);
}
.playerHeader__ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.playerHeader__name{ font-size: 22px; font-weight: 1000; line-height:1.1; }
.playerHeader__id{ color: var(--muted); font-size: 12px; margin-top: 4px; }
.playerHeader__badges{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
.playerHeader__side{ display:grid; gap: 10px; }
.miniKV{ display:flex; justify-content:space-between;
 gap:10px; border:1px solid var(--border); border-radius: var(--r); padding:10px; background: rgba(255,255,255,.02); }
.miniKV span{ color: var(--muted); font-size: 12px; }
.miniKV b{ font-weight: 1000; font-size: 12px; }

.statsTable{ margin-top: 14px; border:1px solid var(--border); border-radius: var(--r); overflow:hidden; }
.statRow{
  display:grid;
  grid-template-columns: 1fr 140px 120px;
  gap: 10px;
  padding: 10px 12px;
  border-top:1px solid var(--border);
  align-items:center;
}
.statRow--head{
  border-top:none;
  background: rgba(255,255,255,.02);
  font-weight: 1000;
}
.statRow__name{ font-weight: 900; }
.statRow__value{ text-align:right; font-variant-numeric: tabular-nums; }
.statRow__rank{ text-align:right; }

.rank{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--control-border);
  background: rgba(255,255,255,.02);
  font-weight: 1000;
  font-size: 12px;
}
.rank--1{ border-color: rgba(255,215,0,.45); background: rgba(255,215,0,.10); }
.rank--2{ border-color: rgba(192,192,192,.45); background: rgba(192,192,192,.08); }
.rank--3{ border-color: rgba(205,127,50,.55); background: rgba(205,127,50,.12); }


/* Top places block */
.topPlaces{
  margin-top: 14px;
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.topPlaces__title{
  font-weight: 1000;
  margin-bottom: 10px;
}
.topPlaces__grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.topCard:focus{
  outline: 2px solid rgba(255,106,0,.45);
  outline-offset: 2px;
}



/* -------------------------
   Profile page (local)
-------------------------- */
.profileLayout{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .profileLayout{ grid-template-columns: 1fr; }
}

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

.profileTabsWrap{
  margin-bottom: 12px;
}

.profileCard{
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.16);
  padding: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden; /* likes-glow clipping */
}

.profileCard__top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.profileAvatarBig{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border:1px solid var(--border);
  object-fit: cover;
}
.profileCard__name{ font-weight: 1000; font-size: 16px; }
.profileCard__meta{ display:flex; flex-wrap:wrap; gap:6px; }

.profileQuickActions{ display:flex; gap:8px; margin-top:8px; }
.profileQuickActions .btn{ flex:1; justify-content:center; }

.profileMain .card__head{ padding-bottom: 10px; }

/* Mode switch (PVE/PVP) */
.modeSwitch{ margin-top:10px; display:inline-flex; gap:6px; padding:6px; border:1px solid var(--border); border-radius:12px; background: var(--surface-2); }
.modeSwitch__btn{ cursor:pointer; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text900); font-weight:900; letter-spacing:.02em; }
.modeSwitch__btn:hover{ background: rgba(255,255,255,.08); }
.modeSwitch__btn.is-active{ border-color: rgba(255,106,0,.45); background: linear-gradient(180deg, rgba(255,106,0,.20), rgba(255,106,0,.08)); }


/* Likes tab (profile) */
.profileLikesToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.profileLikesToolbar .modeSwitch{ margin-top: 0; }
.profileLikesSearch{ display:flex; gap:8px; align-items:center; min-width: 240px; flex: 1 1 320px; justify-content:flex-end; }
.profileLikesSearch .input{ max-width: 520px; width: 100%; }
.profileLikesSummary{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* -------------------------
   Profile inventory (rewards)
-------------------------- */
.invList{ display:flex; flex-direction:column; gap:10px; }
.invItem{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background: rgba(255,255,255,.03); }
.invItem__main{ min-width:0; flex:1 1 auto; }
.invItem__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.invItem__code{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invItem__sub{ margin-top:4px; font-size:12px; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invItem__meta{ margin-top:6px; font-size:12px; opacity:.7; }
.invItem__actions{ flex:0 0 auto; display:flex; align-items:flex-start; gap:8px; }
@media (max-width: 640px){
  .invItem{ flex-direction:column; }
  .invItem__actions{ width:100%; justify-content:flex-end; }
}

/* -------------------------
   Profile achievements
-------------------------- */
.achList{ display:flex; flex-direction:column; gap:10px; }
.achItem{ display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background: rgba(255,255,255,.03); }
.achItem__icon{ width:44px; height:44px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15); flex:0 0 auto; }
.achItem__icon--empty{ display:flex; align-items:center; justify-content:center; font-size:20px; }
.achItem__main{ min-width:0; flex:1 1 auto; }
.achItem__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.achItem__name{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.achItem__sub{ margin-top:4px; font-size:12px; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.achItem__desc{ margin-top:6px; font-size:12px; opacity:.72; }

/* Profile: referrals (MVP) */
.miniList{ display:grid; gap:10px; }
.miniRow{ display:grid; grid-template-columns: 1fr 1.2fr auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.02); }
@media (max-width: 680px){ .miniRow{ grid-template-columns:1fr; gap:4px; } }
.achBar{ margin-top:8px; height:8px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.08); }
.achBar__fill{ height:100%; background: rgba(255,255,255,.55); }


.likeUserList{ display:flex; flex-direction:column; gap:10px; }
.likeUserRow{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: var(--r);
}
.likeUserRow:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.22); transform: translateY(-1px); }
.likeUserRow__img{ width: 46px; height: 46px; border-radius: 14px; overflow:hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.likeUserRow__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.likeUserRow__main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.likeUserRow__title{ font-weight: 1000; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.likeUserRow__meta{ font-size: 12px; color: var(--text700); font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.likeUserRow__actions{ display:flex; align-items:center; gap:10px; flex: 0 0 auto; }
.likeUserRow__actions .btn{ white-space: nowrap; }


.profileNav{
  display:flex;
  gap: 8px;
  border:1px solid var(--border);
  border-radius: var(--r);
  padding: 10px;
  background: rgba(0,0,0,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Default (desktop): tabs on the left, as a vertical list */
.profileNav--side{
  flex-direction: column;
  align-items: stretch;
}
.profileNav--side .pTab{
  width: 100%;
  justify-content: space-between;
}

/* When the profile layout collapses to one column, tabs move to the top row */
@media (max-width: 980px){
  .profileNav--side{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .profileNav--side .pTab{ width:auto; justify-content: flex-start; }
}

/* On very small screens, keep tabs in one row with horizontal scroll.
   This prevents a tall multi-row tabbar when many new tabs are added. */
@media (max-width: 560px){
  .profileNav--side{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.pTab{
  width:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-align:left;
  padding: 9px 12px;
  border-radius: var(--r);
  border:1px solid var(--control-border);
  background: rgba(255,255,255,.02);
  color: var(--text900);
  font-weight: 900;
  cursor:pointer;
  white-space: nowrap;
  text-decoration: none;
}
.pTab:hover{ border-color: var(--control-accent-border-active); }
.pTab.is-active{
  background: linear-gradient(180deg, rgba(255,106,0,.18), rgba(255,106,0,.06));
  border-color: var(--control-accent-border-active);
}

.profileMain{ display:flex; flex-direction:column; gap:12px; }
.pPanel{ display:none; }
.pPanel.is-active{ display:block; }

.card{
  border:1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
}
.panel .card{ box-shadow: none; }
.card .panel{ box-shadow:none; }
.card__head{
  display:flex;
  justify-content:space-between;
   align-items:flex-start;
  gap:10px;
  margin-bottom: 10px;
}
.card__title{ font-weight: 1000; font-size: 16px; }

.profileCats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .profileCats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .profileCats{ grid-template-columns: 1fr; }
}

.pCat{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
  cursor: default;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pCat:hover{ border-color: rgba(255,106,0,.45); }
.pCat__top{ display:flex; justify-content:space-between;
 align-items:center; gap:8px; }
.pCat__label{ font-weight: 900; color: var(--text900); }
.pCat__val{ font-weight: 1000; color: var(--text900); }

/* -------------------------
   Admin panel (minimal)
-------------------------- */
.adminWrap{ max-width: none; width: 100%; margin: 0; padding: var(--page-pad-x); }
.adminTop{ display:flex; justify-content:space-between;
 align-items:center; gap:10px; margin-bottom: 14px; }
.adminTitle{ font-weight: 1000; font-size: 20px; }
.adminGrid{ display:grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--grid-gap); align-items:start; }
.adminGrid > nav{ position: sticky; top: 14px; align-self:start; max-height: calc(100vh - 28px); overflow:auto; padding-right: 6px; }
.adminGrid > main{ min-width: 0; }
@media (max-width: 980px){ .adminGrid{ grid-template-columns: 1fr; } }
@media (max-width: 980px){ .adminGrid > nav{ position: static; max-height: none; overflow: visible; padding-right: 0; } }
.adminMenu{ display:flex; flex-direction:column; gap:8px; }
.adminMenu a{ display:block; padding:10px 12px; border-radius: var(--r); border:1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text900); font-weight: 900; }
.adminMenu a:hover{ border-color: rgba(255,106,0,.45); }
.adminMenu a.is-active{ background: rgba(255,106,0,.10); border-color: rgba(255,106,0,.45); }
.adminTable{ width:100%; border-collapse: collapse; }
.adminTable th,.adminTable td{ padding:10px; border-bottom:1px solid var(--border); vertical-align:top; }
.adminTable th{ text-align:left; font-weight: 1000; color: var(--text700); }
.adminInput, .adminTextarea{
  width:100%;
  border-radius: var(--r);
  border:1px solid var(--control-border);
  background: rgba(255,255,255,.02);
  color: var(--text900);
  padding: 10px 12px;
}
.adminTextarea{ min-height: 220px; resize: vertical; }
.adminRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px){ .adminRow{ grid-template-columns: 1fr; } }

/* Typography accents */

.pill{ display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius: var(--r); background: rgba(0,0,0,.18); font-weight: 900; }
.pillList{ display:flex; flex-wrap:wrap; gap: 6px; }
.pillList .pill{ margin: 0; }
.nickSample{ font-weight: 1000; }
.pill--success{ border-color: rgba(63,185,80,.55); background: rgba(63,185,80,.10); }
.pill--danger{ border-color: rgba(248,81,73,.55); background: rgba(248,81,73,.10); }
.pill--gold{ border-color: rgba(240,140,40,.55); background: rgba(240,140,40,.10); }

/* Profile: My Bases blocks */
.myBasesBlock{ margin-top: 10px; }
.myBasesBlock__head{ display:flex; flex-direction:column; gap: 4px; margin-bottom: 8px; }
.myBasesBlock__title{ font-weight: 900; letter-spacing:.2px; }
.baseMiniRow--winner{ border-color: rgba(240,140,40,.22) !important; }


/* === CMS Page Content === */
.cmsPage{
  line-height:1.65;
  word-break:break-word;
}
.cmsPage > *:first-child{ margin-top:0; }
.cmsPage > *:last-child{ margin-bottom:0; }

.cmsPage img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

.cmsPage table{
  width:100%;
  margin:14px 0;
  display:block;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.14);
}
.cmsPage table{ border-collapse: separate; border-spacing:0; }
.cmsPage th,.cmsPage td{
  padding:10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space:nowrap;
}
.cmsPage tr:last-child td{ border-bottom:0; }
.cmsPage th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(0,0,0,.24);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  opacity: .85;
}
.cmsPage tr:hover td{ background: rgba(255,255,255,.03); }

.cmsPage pre{
  overflow:auto;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(0,0,0,0.28);
}
.cmsPage code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.cmsPage .cmsEmbedWrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin:14px 0;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,0.28);
}
.cmsPage .cmsEmbedWrap .cmsEmbed{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* === RustMaps embed === */
.mapEmbed{
  width:100%;
  aspect-ratio: 16 / 9;
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,0.25);
}
.mapEmbed iframe,
.mapEmbed img{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* === Map page: give RustMaps more room === */
html.page-map .wrap{
  width: 100%;
  max-width: none;
}

html.page-map .grid{
  grid-template-columns: 1fr 360px;
}
@media (max-width: 980px){
  html.page-map .grid{ grid-template-columns: 1fr; }
}

/* Taller map on map page (16:9 often feels too small inside the 1250px wrap) */
html.page-map .mapEmbed{
  aspect-ratio: auto;
  height: var(--map-h, 72vh);
  min-height: 640px;
}

/* Wide mode: hide sidebar and expand */
html.page-map.map-wide .grid{ grid-template-columns: 1fr; }
html.page-map.map-wide .grid > aside{ display:none !important; }
html.page-map.map-wide .mapEmbed{
  height: var(--map-h-wide, 82vh);
  min-height: 740px;
}


/*
  Market page layout
  ------------------
  Раньше мы фиксировали высоту страницы (100vh) и включали внутренний скролл в #marketApp,
  чтобы "шапка/сайдбар" были статичными. На практике на разных экранах это выглядит как
  "сжатая" страница (контент живёт в маленьком окне со скроллом внутри).

  Новое поведение: обычный скролл страницы (body), без 100vh-ограничений.
*/
html.page-market,
html.page-market body{
  height: auto;
  overflow: auto;
}

html.page-market .wrap{
  /* Use a wider clamp than default pages, but keep the layout centered.
     IMPORTANT: Market page should not reserve an empty right column (monitoring). */
  margin: var(--page-gap-top) auto var(--page-gap-bottom);
  padding: 0 var(--page-pad-x);
  max-width: 1760px;
  height: auto;
}

/* Market: do not reserve sidebar column on wide screens (prevents big empty area on the right) */
html.page-market .grid{ grid-template-columns: 1fr; }

html.page-market .shopsPage{
  height: auto;
  display:block;
}

html.page-market #marketApp{
  overflow: visible;
  padding-right: 0;
}

/* Avoid double padding: .panel-body already provides inner spacing */
html.page-market #marketApp.shopsApp{ padding: 0; }


/* === FOOTER (configurable) === */
.siteFooter{
  margin-top: 18px;
  padding: 16px 0 28px;
  flex-shrink: 0;
}
.siteFooter .wrap{
  padding-top: 6px;
}
.footerWidgets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.footerWidgetCard{
  background: var(--bg800);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.footerWidgetLink{
  display:block;
  color: inherit;
  text-decoration: none;
}
.footerWidgetTitle{
  font-weight: 700;
  margin-bottom: 8px;
}
.footerWidgetBody{
  color: var(--text700);
  font-size: 14px;
  line-height: 1.35;
}
.footerWidgetImg{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}
.footerMain{
  display: grid;
  grid-template-columns: 280px 240px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--bg800);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}
.footerLogo{
  font-weight: 800;
  letter-spacing: .5px;
}
.footerMeta{
  margin-top: 4px;
  color: var(--text700);
  font-size: 13px;
}
.footerContent{
  min-height: 44px;
}

.footerContactsTitle{
  font-weight: 800;
  letter-spacing: .3px;
}
.footerContactsList{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text700);
}
.footerContactItem{
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.footerContactLabel{
  color: var(--text700);
  opacity: .9;
  white-space: nowrap;
}
.footerContactValue{ color: var(--text); }
.footerContactValue a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.footerContactValue a:hover{ border-bottom-color: rgba(255,255,255,.5); }
@media (max-width: 980px){
  .footerMain{ grid-template-columns: 1fr; }
}


/* Cookie notice */

.cookieBanner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 99999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cookieBanner__inner{
  pointer-events: auto;
  width: 100%;
  max-width: 1100px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content:space-between;
   padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,15,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
}
.cookieBanner__text{
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.86);
}
.cookieBanner__actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookieBanner.is-hidden{ display:none; }
@media (max-width: 720px){
  .cookieBanner__inner{ flex-direction: column; align-items: stretch; }
  .cookieBanner__actions{ justify-content: flex-end; }
}


/* Shops UI */
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.shopTile{border:1px solid var(--border);border-radius:14px;background: rgba(0,0,0,.16);padding:10px;}
.shopTile__items{display:flex; align-items:center; justify-content:space-between;
 gap:8px;}
.itemBox{position:relative;width:72px;height:72px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.itemBox img{width:64px;height:64px;object-fit:contain;image-rendering:auto;}
.itemAmt{position:absolute;right:6px;bottom:6px;font-size:12px;font-weight:700;background:rgba(0,0,0,.45);border:1px solid var(--border);padding:2px 6px;border-radius:999px;}
.shopArrow{opacity:.6;font-weight:700;}

/* Shops Page (minimal) */
.shopsPage .card__head.shopsHead{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsHead__title{font-size:18px;font-weight:800;letter-spacing:.2px}
.shopsHead__meta{font-size:12px;color:rgba(255,255,255,.65)}

.shopsApp{margin-top:10px}

/* Stage 4: unify Market page shell with Panel style */
.card.shopsPage{ padding:0; overflow:hidden; }
.shopsPage > .hint{ padding: var(--panel-pad); }
.shopsPage .card__head.shopsHead{
  margin:0;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.shopsHead__title{ font-size: 20px; font-weight: 1000; letter-spacing: .2px; }
.shopsHead__meta{ color: var(--text700); }
.shopsApp{ margin-top:0; padding: var(--panel-pad); }

/* Stage 4: shops toolbar uses shared tokens */
.shopsToolbar{
  background: rgba(0,0,0,.14);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
}
html.page-market .shopsToolbar{
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.22);
}
.shopsTab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text900);
  font-weight:900;
}
.shopsTab.is-active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.shopsSearch input{
  border:1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.shopsChip{ border:1px solid var(--border); background: rgba(0,0,0,.12); color: var(--text900); }
.shopsSelect{ border:1px solid var(--border); background: rgba(0,0,0,.16); color: var(--text900); }


.shopsToolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px}

/* Market toolbar should stay visible while scrolling the offers list */
html.page-market .shopsToolbar{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.22);
}
.shopsTabs{display:flex;gap:8px;align-items:center}
.shopsTab{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.9);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px;transition:.15s}
.shopsTab:hover{transform:translateY(-1px)}
.shopsTab.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}

.shopsSearch{flex:1;min-width:220px;display:flex;align-items:center;gap:8px}
.shopsSearch input{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.92);padding:9px 12px;border-radius:14px;outline:none}
.shopsSearch input::placeholder{color:rgba(255,255,255,.45)}

.shopsFilters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shopsChip{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.10);border-radius:999px;padding:7px 10px;font-size:12px;color:rgba(255,255,255,.85)}
.shopsChip input{accent-color:var(--accent)}
.shopsSelect{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.9);padding:8px 10px;border-radius:12px;outline:none;font-size:12px}
.shopsRange{display:flex;gap:8px;align-items:center}
.shopsRange input{width:90px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.92);padding:8px 10px;border-radius:12px;outline:none;font-size:12px}

.shopsStatsLine{margin-top:10px;font-size:12px;color:rgba(255,255,255,.65)}

.shopsOwnerCard{background: rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px;margin-top:12px}
.shopsOwnerHead{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsOwnerInfo{display:flex;align-items:center;gap:10px}
.shopsOwnerAvatar{width:38px;height:38px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.shopsOwnerName{font-weight:800;line-height:1.1}
.shopsOwnerSub{font-size:12px;color:rgba(255,255,255,.6)}

.shopsShopCard{margin-top:10px;background: rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px}
.shopsShopTop{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsMetaRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.65)}
.shopsBadge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-size:11px}
.shopsBadge--bp{border-color:rgba(255,200,100,.25);background:rgba(255,200,100,.10)}
.shopsBadge--broadcast{border-color:rgba(255,255,255,.18)}
.shopsBadge--online{border-color:rgba(120,255,180,.22);background:rgba(120,255,180,.08)}
.shopsBadge--deal{border-color:rgba(255,210,120,.26);background:rgba(255,210,120,.10)}
.shopsBadge--best{border-color:rgba(130,210,255,.26);background:rgba(130,210,255,.10)}

.coordBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.10);color:rgba(255,255,255,.88);padding:6px 10px;border-radius:12px;cursor:pointer;font-size:12px}
.coordBtn:hover{transform:translateY(-1px)}

.shopsMarketGroup{margin-top:14px}
.shopsGroupTitle{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsGroupTitle h3{margin:0;font-size:14px;font-weight:900}
.shopsGroupCount{font-size:12px;color:rgba(255,255,255,.6)}
.shopsMarketList{margin-top:8px;display:flex;flex-direction:column;gap:8px}

.shopsOfferLeft{display:flex;align-items:center;gap:10px;min-width:0}
.shopsOfferItem{display:flex;align-items:center;gap:10px;min-width:0}
.shopsOfferItem .itemBox{width:62px;height:62px;border-radius:16px}
.shopsOfferItem .itemBox img{width:54px;height:54px}
.shopsOfferText{min-width:0}
.shopsOfferText .t1{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsOfferText .t2{font-size:12px;color:rgba(255,255,255,.65)}
.shopsOfferRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.shopsMiniBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);padding:6px 10px;border-radius:12px;cursor:pointer;font-size:12px}
.shopsMiniBtn:hover{transform:translateY(-1px)}

.shopsEmpty{margin-top:12px;padding:14px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:rgba(255,255,255,.65)}
.shopsEmpty.shopsEmptyCenter{display:flex;justify-content:center;align-items:center;padding:14px 0;border:none;background:transparent}

@media (max-width: 720px){
  .shopsToolbar{padding:10px}
  .shopsSearch{min-width:100%}
  .shopsRange input{width:80px}
}


/* =========================
   Shops minimal UI (player -> shops -> modal)
   ========================= */
.shopsBodyMinimal{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
@media (max-width: 1100px){
  .shopsBodyMinimal{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 720px){
  .shopsBodyMinimal{grid-template-columns:1fr;}
}
.shopsPlayer{padding:10px;border-radius:20px;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.shopsPlayer:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);box-shadow:0 10px 26px rgba(0,0,0,.38);background:rgba(0,0,0,.18)}
.shopsPlayerHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.shopsAvatar{width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.shopsAvatar{image-rendering:auto}
.shopsPlayerText{min-width:0}
.shopsPlayerName{font-weight:950;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsPlayerId{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

.shopsShopList{display:flex;flex-direction:column;gap:8px}

/* Compact shop scroller (player cards) */
.shopsShopScroller{display:flex;gap:6px;overflow:auto;padding:2px 2px 4px;scrollbar-width:thin;}
.shopsShopScroller::-webkit-scrollbar{height:8px;}
.shopsShopScroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;}
.shopsShopChip{flex:0 0 auto;min-width:140px;max-width:220px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:14px;padding:8px;text-align:left;cursor:pointer;}
.shopsShopChip:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);} 
.shopsShopChipName{font-weight:850;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shopsShopChipMeta{margin-top:3px;font-size:11px;color:rgba(255,255,255,.62);} 

.shopsShopChip--more{border-style:dashed;opacity:.95}

.shopsPlayerText{min-width:0;}
.shopsPlayerSub{font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;}

/* Owner modal shop switch */


/* Owner modal: stacked shops (many shops/items) */
.shopsOwnerStack{display:flex;flex-direction:column;gap:12px;}
.shopsShopSection{padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);backdrop-filter:blur(10px);}
.shopsShopSectionHead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.shopsShopSectionHead[data-shop-open="1"]{cursor:pointer;}
.shopsShopSection:hover{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.14);box-shadow:0 10px 26px rgba(0,0,0,.28);}

.shopsShopSectionTitle{min-width:180px;flex:1;min-width:0;}
.shopsShopName{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shopsShopCoords{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}
.shopsShopSectionMeta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.shopsShopSectionActions{display:flex;gap:8px;align-items:center;}
.shopsShopSectionBody{margin-top:10px;}
.shopsShopSectionFoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.shopsShopNote{font-size:12px;opacity:.85;}

/* Player card compact variant */
.shopsPlayer--compact{padding:10px;}
.shopsPlayer--compact .shopsPlayerHead{margin-bottom:0;}

.shopsOwnerSwitch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.shopsSelect--wide{min-width:260px;}
.shopsOwnerCoords{font-size:12px;color:rgba(255,255,255,.70);padding:6px 10px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(0,0,0,.12);} 
.shopsOwnerPreviewHead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px;}
.shopsOwnerPreviewTitle{font-weight:850;}
.shopsOwnerPreviewMeta{display:flex;gap:8px;flex-wrap:wrap;}
.shopsChipMini{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:12px;}

/* Compact offers */
.shopTile--mini{padding:10px;}
.shopsOffersList--mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:860px){.shopsOffersList--mini{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.shopsOffersList--mini{grid-template-columns:1fr;}}
.shopsOffersList--mini .itemBox{width:60px;height:60px;border-radius:16px;}
.shopsOffersList--mini .itemBox img{width:52px;height:52px;}

/* Coords pill (market rows) */
.shopsCoordPill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font-size:12px;}

/* Server monitor (no copy button) */
.serverConnectText{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.04);} 

.shopsShopRow{width:100%;display:flex; align-items:center; justify-content:space-between;
 gap:10px;
  appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);
  color:rgba(255,255,255,.92);padding:10px 12px;border-radius:14px;cursor:pointer;text-align:left}
.shopsShopRow:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.shopsShopTitle{font-weight:850;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsShopCoords{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.shopsShopCoords:hover{text-decoration:underline}

@media (max-width: 680px){
  .shopsAvatar{width:56px;height:56px;border-radius:14px}
  .shopsShopRow{flex-direction:column;align-items:flex-start}
  .shopsShopCoords{margin-left:auto}
}

/* Modal */
.shopsModal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.shopsModal.hidden{display:none}
.shopsModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.shopsModalPanel{position:relative;max-width:780px;width:100%;
  background:linear-gradient(180deg, rgba(22,22,26,.92), rgba(12,12,14,.90));
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden}
.shopsModalHead{display:flex; align-items:center; justify-content:space-between;
 gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:2}
.shopsModalTitle{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsModalClose{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:20px;line-height:28px}
.shopsModalClose:hover{transform:translateY(-1px)}
.shopsModalBody{padding:14px;max-height:72vh;overflow:auto}

.shopsModalSeller{display:flex; align-items:center; justify-content:space-between;
 gap:12px;margin-bottom:12px}
.shopsSellerLeft{display:flex;align-items:center;gap:12px;min-width:0}
.shopsSellerText{min-width:0}
.shopsSellerName{font-weight:900}
.shopsSellerMeta{margin-top:4px}

.shopsOffersList{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;margin-top:10px}
.shopsOffersList .shopTile{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.12)}
.shopsOffersList .shopTile:hover{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.04)}
.shopsOffersList .shopArrow{color:rgba(255,255,255,.6);font-weight:900}

@media (max-width: 860px){
  .shopsOffersList{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .shopsOffersList{grid-template-columns:1fr}
}
.shopsOfferRow{display:flex; align-items:center; justify-content:space-between;
 gap:10px;
  background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px}
.shopsOfferSide{display:flex;align-items:center;gap:10px;min-width:0}
.shopsItemIcon{width:46px;height:46px;border-radius:14px;object-fit:contain;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);padding:6px}
.shopsItemText{min-width:0}
.shopsItemName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsItemAmt{font-size:12px;color:rgba(255,255,255,.65)}
.shopsOfferArrow{color:rgba(255,255,255,.55);font-weight:900}

/* Modal tabs + history */
.shopsModalTabs{display:flex;gap:8px;align-items:center;margin:6px 0 12px;padding:2px}
.shopsModalTabs .shopsTab{padding:7px 12px;font-size:12px;background:rgba(0,0,0,.10)}
.shopsModalTabs .shopsTab.isActive{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.shopsPanel.hidden{display:none}

.shopsHistoryLoading{padding:12px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:rgba(255,255,255,.65)}
.shopsHistoryStats{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-bottom:12px}
.shopsStat{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);border-radius:18px;padding:12px}
.shopsStatVal{font-size:18px;font-weight:950}
.shopsStatLbl{font-size:12px;color:rgba(255,255,255,.65);margin-top:2px}
.shopsStat--wide{grid-column:1 / -1}
.shopsChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.shopsHistoryList{display:flex;flex-direction:column;gap:8px}
.shopsHistoryRow{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10)}
.shopsHistoryTime{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;min-width:78px}
.shopsHistoryBody{min-width:0}
.shopsHistoryLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:850;white-space:normal}
.shopsHistoryPair{display:inline-flex;align-items:center;gap:6px}
.shopsHistItem{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:140px}
.shopsHistShort{font-size:11px;font-weight:850;color:rgba(255,255,255,.70);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.shopsHistoryArrow{color:rgba(255,255,255,.55);font-weight:950}
.shopsHistoryNames{min-width:0;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.itemBox--hist{width:40px;height:40px;border-radius:13px}
.itemBox--hist img{width:34px;height:34px}
.itemBox--hist .itemAmt{font-size:11px;padding:1px 6px;border-radius:10px}
.shopsHistorySub{font-size:12px;margin-top:3px}



/* v71 - owner history modal + player card actions */
.shopsPlayerHead{position:relative}
.shopsPlayerActions{margin-left:auto;display:flex;align-items:center;gap:8px}
.shopsMiniBtn--ghost{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.shopsMiniBtn--ghost:hover{background:rgba(255,255,255,.06)}

.shopsShopList--modal{display:flex;flex-direction:column;gap:8px}
.shopsShopRow--modal{width:100%}

.shopsChip--tiny{padding:2px 8px;border-radius:999px;font-size:11px;opacity:.95}


/* Market (seller pill + currency inline icon) */
.shopsCur img{width:18px;height:18px;border-radius:6px;vertical-align:middle;margin:0 4px -3px 0}
.shopsSellerPill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);max-width:220px}
.shopsSellerAv{width:22px;height:22px;border-radius:999px;object-fit:cover}
.shopsSellerNm{font-size:12px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}

/* =========================
   Market v2 (aggregator, many sellers/items)
   ========================= */
.marketGroups{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.marketGroup{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);border-radius:18px;overflow:hidden}
.marketGroupHead{display:flex; align-items:center; justify-content:space-between;
 gap:12px;padding:12px 12px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.marketGroupHead:hover{background:rgba(0,0,0,.14);box-shadow:0 14px 36px rgba(0,0,0,.28)}

.marketGroupLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketGroupText{min-width:0}
.marketGroupText .t{font-weight:950;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketGroupText .s{font-size:12px;color:rgba(255,255,255,.60);margin-top:2px}

.marketGroupMid{flex:1;min-width:0;display:flex;justify-content:center}
.marketPrice{display:flex;align-items:center;gap:10px;min-width:0}
.marketPriceText{min-width:0}
.marketPriceText .p1{font-size:12px;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketPriceText .p2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.marketPriceText .u{color:rgba(255,255,255,.95);font-weight:900}

.unitPill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.unitPill .u{font-weight:900;color:rgba(255,255,255,.98)}

.marketBadges{display:inline-flex;align-items:center;gap:6px;margin-left:6px;vertical-align:middle}
.marketBadges .shopsBadge{padding:2px 8px;font-size:11px}

.marketGroupRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.marketExpandBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.88);padding:7px 12px;border-radius:999px;cursor:pointer;font-size:12px}
.marketExpandBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}

.marketGroupBody{border-top:1px solid rgba(255,255,255,.08);padding:10px 10px 12px}
.marketMoreWrap{display:flex;justify-content:center;padding:10px 0 0}

/* Market v3: tiles layout + actions */
.marketGroups--tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;
  margin-top:10px;
}
.marketTile{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  border-radius:18px;
  overflow:hidden;
  padding:12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.marketTile:hover{
  background:rgba(0,0,0,.14);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}
.marketTileTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.marketTileLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketTileText{min-width:0}
.marketTileText .t{font-weight:950;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTileText .s{font-size:12px;color:rgba(255,255,255,.60);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTilePrice{display:flex;align-items:center;gap:10px;margin-top:10px}
.marketTilePriceText{min-width:0}
.marketTilePriceText .p1{font-size:12px;color:rgba(255,255,255,.90);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTilePriceText .p2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTileBottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.marketTileBottom .marketExpandBtn{margin-left:auto}

.marketFavBtn{
  appearance:none;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.marketFavBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.marketFavBtn.is-on{background:rgba(255,215,120,.10);border-color:rgba(255,215,120,.25)}

.marketActionBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.90);
  padding:9px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.marketActionBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.marketActionBtn.is-on{background:rgba(255,215,120,.10);border-color:rgba(255,215,120,.25)}

.marketTabs--layout .shopsTab{min-width:84px}

@media (max-width: 720px){
  .marketGroups--tiles{grid-template-columns:1fr}
}

/* Offer rows inside expanded group */
.marketOfferRow{display:flex; align-items:center; justify-content:space-between;
 gap:12px;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.08);border-radius:16px;padding:10px 10px;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.marketOfferRow:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.12);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.marketOfferLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketOfferText{min-width:0}
.marketOfferText .l1{font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketOfferText .l2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.marketOfferText .u{color:rgba(255,255,255,.98);font-weight:900}
.marketOfferText .u{font-weight:900}
.marketOfferRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Bigger item boxes for market (sell icon & price icon are same size) */
.itemBox.marketBox{width:54px;height:54px;border-radius:16px}
.itemBox.marketBox img{width:46px;height:46px}

@media (max-width: 720px){
  .marketGroupHead{flex-wrap:wrap;align-items:flex-start}
  .marketGroupRight{width:100%;justify-content:flex-start}
}

@media (max-width: 980px){
  .marketPriceText .p2{max-width:180px}
  .marketOfferText .l2{max-width:180px}
}

/* Phone layout: stack blocks and keep rows readable */
@media (max-width: 520px){
  html.page-market .shopsTabs{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  html.page-market .shopsTabs::-webkit-scrollbar{ height: 0; }
  html.page-market .shopsTab{ white-space: nowrap; }

  .marketGroupHead{ padding: 10px; gap: 10px; }
  .marketGroupMid{ width: 100%; justify-content:flex-start; }
  .marketGroupRight{ width: 100%; justify-content:flex-start; }

  .itemBox.marketBox{ width: 50px; height: 50px; border-radius: 15px; }
  .itemBox.marketBox img{ width: 42px; height: 42px; }
  .itemBox.marketBox .itemAmt{ font-size: 11px; padding: 1px 6px; right: 5px; bottom: 5px; }

  .shopsCoordPill{ padding: 5px 9px; font-size: 11px; }
  .shopsSellerPill{ padding: 5px 9px; max-width: 240px; }
  .shopsSellerNm{ max-width: 140px; }

  .marketOfferRow{ flex-direction: column; align-items: stretch; gap: 8px; }
  .marketOfferRight{ justify-content:flex-start; }
}

/* =========================
   Home dashboard
   ========================= */
.homeHero{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; padding: 16px; }
@media (max-width: 980px){ .homeHero{ grid-template-columns: 1fr; } }

.homeHero__brand{ margin-bottom: 10px; }
.homeHero__title{ font-size: 26px; font-weight: 950; letter-spacing:.2px; }
.homeHero__sub{ color: var(--text700); font-size: 13px; margin-top: 4px; }

.homeKpis{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.homeActions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
.homeIpLine{ margin-top: 12px; }

.homeIpNote{ margin-left: 8px; opacity: .85; }

.homeOnlineList{ display:flex; flex-direction:column; gap: 8px; padding: 12px; }
.homeOnlineRow{ display:flex; align-items:center; gap: 10px; padding: 10px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); cursor:pointer; }
.homeOnlineRow:hover{ border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.22); transform: translateY(-1px); }
.homeOnlineAva{ width: 34px; height: 34px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.homeOnlineName{ font-weight: 900; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.homeOnlineStatus{ margin-left: auto; font-size: 12px; color: var(--text700); font-weight: 800; }

.homeQuickGrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.homeQuick{ display:flex; align-items:center; gap: 12px; padding: 12px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.homeQuick:hover{ border-color: rgba(240,140,40,.35); background: rgba(240,140,40,.06); transform: translateY(-1px); }
.homeQuick__icon{ width: 38px; height: 38px; display:flex; align-items:center; justify-content:center; border-radius: 14px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.10); }
.homeQuick__text{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.homeModeSwitch{ margin-top: 10px; }
.homeModeSwitch .modeSwitch{ justify-content: flex-start; }

/* =========================
   Profile sections
   ========================= */
.profileSection{ margin-top: 12px; }
.profileSection__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.profileSection__title{ font-weight: 950; letter-spacing:.2px; }
.profileMyShopsList{ margin-top: 10px; display:flex; flex-direction:column; gap: 8px; }
.profileMyShopRow{ display:flex; align-items:center; justify-content:space-between;
 gap: 12px; padding: 10px 12px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); }
.profileMyShopName{ font-weight: 900; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.profileMyShopMeta{ color: var(--text700); font-size: 12px; font-weight: 800; white-space: nowrap; }
.profileQuickActions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; }

/* My Bases tab */
.baseMiniList{ display:flex; flex-direction:column; gap: 10px; }
.baseMiniRow{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); text-decoration:none; color: inherit; }
.baseMiniRow:hover{ border-color: rgba(240,140,40,.32); background: rgba(240,140,40,.06); transform: translateY(-1px); }
.baseMiniRow__img{ width: 84px; height: 52px; border-radius: 12px; overflow:hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.baseMiniRow__img img{ width:100%; height:100%; object-fit: cover; display:block; }
.baseMiniRow__main{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.baseMiniRow__title{ font-weight: 950; letter-spacing: .2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.baseMiniRow__meta{ font-size: 12px; color: var(--text700); font-weight: 800; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.baseMiniRowWrap{ display:flex; gap: 10px; align-items: stretch; }
.baseMiniRowWrap .baseMiniRow{ flex: 1; min-width: 0; }
.baseMiniRowActions{ display:flex; align-items:center; }
.baseMiniRowActions .btn{ white-space: nowrap; }
.baseMiniRowActions .btn[disabled]{ opacity: .55; cursor: not-allowed; }
@media (max-width: 520px){
  .baseMiniRowWrap{ flex-direction: column; }
  .baseMiniRowActions{ justify-content: flex-end; }
}



/* Economy widget */
.ecoBig{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--r2); background: rgba(0,0,0,.14); }
.ecoBig__label{ font-size:12px; color: var(--text700); }
.ecoBig__value{ font-size:22px; font-weight:800; letter-spacing:.3px; }
.ecoGrid{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }
.ecoHint{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.ecoHint .btn-ghost{ padding:6px 10px; }



/* Rich tiers */
.richable[data-rich-tier]{
  position: relative;
}

.richable[data-rich-tier]::after{
  content: attr(data-rich-label);
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  letter-spacing: .2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  opacity: .92;
  pointer-events: none;
}

@keyframes richPulse {
  0% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255,255,255,.12)); }
  100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

.rich-20000 { box-shadow: 0 0 0 1px rgba(120, 200, 255, .12) inset; }
.rich-20000::after { background: rgba(120,200,255,.10); border-color: rgba(120,200,255,.18); }

.rich-50000 { box-shadow: 0 0 0 1px rgba(120, 255, 170, .12) inset; }
.rich-50000::after { background: rgba(120,255,170,.10); border-color: rgba(120,255,170,.18); }

.rich-100000 { box-shadow: 0 0 0 1px rgba(100, 255, 255, .14) inset; }
.rich-100000::after { background: rgba(100,255,255,.10); border-color: rgba(100,255,255,.20); }

.rich-300000 { animation: richPulse 3.5s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(255, 210, 120, .14) inset; }
.rich-300000::after { background: rgba(255,210,120,.10); border-color: rgba(255,210,120,.22); }

.rich-500000 { animation: richPulse 2.8s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(255, 120, 210, .16) inset; }
.rich-500000::after { background: rgba(255,120,210,.10); border-color: rgba(255,120,210,.24); }

/* Rich pill in profile */
.richPill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.richPill-20000 { border-color: rgba(120,200,255,.22); background: rgba(120,200,255,.10); }
.richPill-50000 { border-color: rgba(120,255,170,.22); background: rgba(120,255,170,.10); }
.richPill-100000 { border-color: rgba(100,255,255,.22); background: rgba(100,255,255,.10); }
.richPill-300000 { border-color: rgba(255,210,120,.26); background: rgba(255,210,120,.10); }
.richPill-500000 { border-color: rgba(255,120,210,.28); background: rgba(255,120,210,.10); }

/* Economy totals cards */
.totalsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .totalsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .totalsGrid{ grid-template-columns: 1fr; }
}
.metricCard{
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  padding: 12px;
}
.metricName{ font-size: 12px; opacity: .75; }
.metricVal{ font-size: 22px; font-weight: 800; margin-top: 4px; }
.metricHint{ font-size: 12px; opacity: .6; margin-top: 4px; }

/* Rich grids */
.richGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
@media (max-width: 980px){ .richGrid{ grid-template-columns: 1fr; } }

.richCard{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
.richCard:hover{ border-color: rgba(255,255,255,.12); }

.richAvatar{ width: 36px; height: 36px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.richAvatar img{ width:100%; height:100%; object-fit: cover; display:block; }

.richMeta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.richName{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.richLabel{ font-size: 12px; opacity: .75; }

.richRank{ margin-left:auto; opacity: .55; font-weight: 700; }

/* Stats rich list */
.richTopGrid{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.richRow{
  display:flex;
  justify-content:space-between;
   align-items: center;
  gap: 10px;
  width:100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
.richRow:hover{ border-color: rgba(255,255,255,.12); }
.richRowLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.richRowRank{ width: 26px; opacity:.6; text-align:right; }
.richRowAvatar{ width: 28px; height: 28px; border-radius: 10px; overflow:hidden; flex:0 0 auto; }
.richRowAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.richRowName{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.richRowBadge{ font-size: 12px; opacity:.75; }
.richRowRight{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.richRowAmount{ font-weight:800; }


/* Mini table (profile rads) */
.miniTable{ display:flex; flex-direction:column; gap:6px; }
.miniRow{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.miniKey{ opacity:.7; font-size:12px; }
.miniVal{ font-weight:800; }
.miniNote{ opacity:.55; font-size:12px; }

/* Events table (profile rads) */
.eventsTable{ display:flex; flex-direction:column; gap:8px; }
.evRow{
  display:grid;
  grid-template-columns: 120px 90px 1.2fr 1fr;
  gap: 10px;
  align-items:center;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
}
@media (max-width: 820px){
  .evRow{ grid-template-columns: 110px 80px 1fr; }
  .evWhere{ display:none; }
}
.evTs{ font-size:12px; opacity:.65; }
.evAmt{ font-weight:900; }
.evMeta{ font-size:12px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evWhere{ font-size:12px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.heatVal{ opacity: .75; margin-top: 2px; }


/* -------------------------
   Player page (Stage 1: HERO)
   ------------------------- */
.playerPage .panel__head { margin-bottom: 14px; }

.playerHero__card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.playerHero__avatar{
  width:84px;
  height:84px;
  border-radius:18px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,0.06);
}
.playerHero__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.playerHero__body{ flex:1 1 auto; min-width:0; }

.playerHero__top{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
   flex-wrap:wrap;
}

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

.playerLikes{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.likeBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font-size:14px;
  cursor:pointer;
  padding:0;
  line-height:1;
  opacity:0.9;
  transform: translateY(-0.5px);
}
.likeBtn:hover{ opacity:1; }
.likeBtn:disabled{ cursor:not-allowed; opacity:0.5; }
.likeBtn.is-on{ filter: drop-shadow(0 0 10px rgba(196,59,47,.35)); }
.likeBtn.is-loading{ opacity:0.6; }

.likeCount{
  font-weight:900;
  font-size:12px;
  opacity:0.9;
}

/* -------------------------
   Likes-based profile glow (dynamic intensity)
   - JS sets CSS vars: --lg-i (0..1), --lg-o, --lg-a, --lg-wa, --lg-glow, --lg-blur, --lg-speed, --lg-pulse
   - Applied to clickable player cards ([data-player-open]) and player hero card (.playerHero__card)
   ------------------------- */
.likeGlow{
  position:relative;
  isolation:isolate;
  contain: paint;
  /*
    IMPORTANT: the glow uses blurred/animated pseudo-elements.
    On compact tiles/rows (rank tiles, monitoring lists) it can visually spill outside.
    We clip it to the card bounds to keep the effect perfectly "inside".
    (Element's own box-shadow is NOT clipped by overflow.)
  */
  overflow:hidden;
}
.likeGlow::before{
  content:'';
  position:absolute;
  inset: calc(-2px + var(--lg-c,0) * 3px);
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
}
.likeGlow::before{
  /*
    Single pseudo-element on purpose:
    Some cards (e.g. podium #1) already use ::after, so we avoid collisions.
    Layer 1-2: stationary inner glow
    Layer 3: moving shine (we animate only the 3rd layer via background-position)
  */
  background:
    radial-gradient(circle at 18% 18%, rgba(196,59,47,var(--lg-a,.20)) 0%, rgba(196,59,47,0) 60%),
    radial-gradient(circle at 82% 82%, rgba(255,255,255,var(--lg-wa,.10)) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(120deg,
      rgba(196,59,47,0) 0%,
      rgba(196,59,47,.30) 38%,
      rgba(255,255,255,.58) 50%,
      rgba(196,59,47,.30) 62%,
      rgba(196,59,47,0) 100%);
  background-size: 100% 100%, 100% 100%, var(--lg-shine-size, 220% 220%);
  background-position: 0 0, 0 0, var(--lg-shine-start, -140% 0);
  opacity: var(--lg-o, 0);
  filter: blur(calc(var(--lg-blur, 14px) * (1 - var(--lg-c,0) * .42)));
  mix-blend-mode: screen;
  animation:
    likeShine var(--lg-speed, 9s) linear infinite,
    likePulse var(--lg-pulse, 4.6s) ease-in-out infinite;
}
.likeGlow > *{
  position:relative;
  z-index:1;
}


/* ------------------------------------------------------------
   Likes glow — compact player rows (monitoring/telemetry + home online)
   Problem: the sweeping shine/blur can visually "spill" outside narrow rows,
   especially inside scroll containers (telemetry list / monitoring widget).
   Fix: clip glow to row bounds + slightly tighten blur/glow for these rows.
------------------------------------------------------------ */
.telemetryRow.likeGlow,
.homeOnlineRow.likeGlow{
  /* Override base .likeGlow clipping: compact rows use inset:0 pseudo-element,
     so we don't need overflow:hidden (it can trigger scroll-container artifacts). */
  overflow: visible;
  /* IMPORTANT: do NOT use padding-box here.
     padding-box makes the background stop at the padding edge, which visually
     looks like the row "shrinks" (the border becomes a visible inner gutter),
     especially noticeable on the Home page where panels are flush-aligned.
     border-box keeps the fill consistent with non-glow rows. */
  background-clip: border-box;
  isolation: auto;
}

/* Keep the moving shine inside the rounded shape */
.telemetryRow.likeGlow::before,
.homeOnlineRow.likeGlow::before{
  /* Small rows live inside scroll/overflow containers: keep glow cheap + stable */
  inset: 0;
  filter: none;
  mix-blend-mode: normal;
  contain: none;
  /* Lightweight shimmer + pulse (no blur, no blend) to avoid "squeeze" artifacts on Home */
  animation:
    likeRowShine var(--lg-speed, 8s) linear infinite,
    likeRowPulse var(--lg-pulse, 4.2s) ease-in-out infinite;
  background-image:
    radial-gradient(120% 80% at 10% 50%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(255,120,80,0), rgba(255,120,80,.55), rgba(255,120,80,0));
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, -140% 0;
  /* Opacity scaled by intensity (via JS var --lg-i) */
  opacity: calc(0.08 + var(--lg-i,0) * 0.42);
}


/* Compact rows: disable paint containment to avoid rendering artifacts inside
   scroll containers (home sidebar). Overflow is already clipped by the row. */
.telemetryRow.likeGlow,
.homeOnlineRow.likeGlow{
  contain: none;
}

/* No ::after here (we use a single pseudo element for compatibility). */


/* ------------------------------------------------------------
   Likes glow — rank tiles/rows (Top lists)
   Top-3 podium cards are big (and already overflow:hidden).
   The tiles/rows below are smaller and sit close to each other,
   so we tighten the blur/glow a bit to prevent any visual "leak".
------------------------------------------------------------ */
.rankTile.likeGlow,
.rankRow.likeGlow,
.topCard.likeGlow{
  overflow:hidden;
}

.rankTile.likeGlow::before,
.rankRow.likeGlow::before,
.topCard.likeGlow::before{
  inset:0;
  filter: blur(calc(var(--lg-blur, 14px) * .55));
  opacity: calc(var(--lg-o, 0) * .94);
}

/* Vote modal rows are compact too */
.voteRow.likeGlow::before{
  inset:0;
  filter: blur(calc(var(--lg-blur, 14px) * .55));
  opacity: calc(var(--lg-o, 0) * .94);
}

/* (single pseudo element, so no ::after overrides) */


/* Avatar glow (chat + online lists + cards)
   - same JS vars: --lg-i, --lg-a, --lg-wa, --lg-glow, --lg-pulse
   - applied to: .webchatAvatar, .homeOnlineAva, .telemetryAvatar, .podiumCard__ava, .rankTile__ava, .playerHero__avatar, etc.
*/
.likeGlowAva{
  box-shadow:
    0 0 calc(var(--lg-glow, 18px) * .70) rgba(196,59,47,var(--lg-a,.20)),
    0 0 calc(var(--lg-glow, 18px) * .38) rgba(255,255,255,var(--lg-wa,.10));
  filter: saturate(calc(1 + var(--lg-i,0) * .85)) brightness(calc(1 + var(--lg-i,0) * .28));
  transition: box-shadow .22s ease, filter .22s ease;
  will-change: box-shadow, filter, transform;
  animation: likeAvaPulse var(--lg-pulse, 4.6s) ease-in-out infinite;
}

/* Compact avatar contexts: keep the aura tight so it doesn't touch tile edges */
.rankRow__ava.likeGlowAva,
.telemetryAvatar.likeGlowAva,
.homeOnlineAva.likeGlowAva{
  box-shadow:
    0 0 calc(var(--lg-glow, 18px) * .55) rgba(196,59,47,var(--lg-a,.20)),
    0 0 calc(var(--lg-glow, 18px) * .30) rgba(255,255,255,var(--lg-wa,.10));
}

/* Telemetry/Home compact lists: keep aura static (no pulsing) to avoid flicker/"squeeze" in scroll rows */
.telemetryAvatar.likeGlowAva,
.homeOnlineAva.likeGlowAva{
  animation: none;
  will-change: box-shadow, filter;
}
.rankTile__ava.likeGlowAva{
  box-shadow:
    0 0 calc(var(--lg-glow, 18px) * .45) rgba(196,59,47,var(--lg-a,.20)),
    0 0 calc(var(--lg-glow, 18px) * .24) rgba(255,255,255,var(--lg-wa,.10));
}
@media (prefers-reduced-motion: reduce){
  .likeGlowAva{ animation: none; }
  .likeGlow::before{ animation: none; }
}
@keyframes likeAvaPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(calc(1 + var(--lg-i,0) * .035)); }
}

@keyframes likeShine{
  0%{ background-position: 0 0, 0 0, var(--lg-shine-start, -140% 0); }
  100%{ background-position: 0 0, 0 0, var(--lg-shine-end, 140% 0); }
}
@keyframes likePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.006); }
}

/* Safe shimmer for compact monitoring rows (no blur / no blend-mode).
   We animate background-position only on the 2nd layer (linear gradient) and a gentle opacity pulse.
   This avoids the Chromium scroll-container artifacts that were visible on the Home page. */
@keyframes likeRowShine{
  0%{ background-position: 0 0, -140% 0; }
  100%{ background-position: 0 0, 140% 0; }
}
@keyframes likeRowPulse{
  0%,100%{ opacity: calc(0.07 + var(--lg-i,0) * 0.32); }
  50%{ opacity: calc(0.12 + var(--lg-i,0) * 0.52); }
}


.playerHero__name{
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.playerHero__status{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.playerHero__meta{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.playerHero__metaItem{
  display:flex;
  gap:8px;
  align-items:baseline;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.06);
  padding:8px 10px;
  border-radius:12px;
}
.playerHero__metaItem .k{
  opacity:0.75;
  font-size:12px;
}
.playerHero__metaItem .v{
  font-weight:700;
  font-size:14px;
}

/* ---------------------------------
   Player page: tabs (plugin-like)
----------------------------------*/
.playerTabs{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.playerTabBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
  padding:10px 14px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.playerTabBtn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.playerTabBtn.is-active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

.playerTabPanels{ margin-top:12px; }
.playerTabPanel__head{ margin: 2px 0 10px; }
.playerTabPanel__head .h2{ font-size:16px; font-weight:900; }

/* Resources simple sections */
.playerResources{ display:flex; flex-direction:column; gap:14px; }
.simpleSection{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  border-radius:18px;
  padding:12px;
}
.simpleSection__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
   gap:10px;
  margin-bottom:10px;
}
.simpleSection__title{ font-weight:900; }
.simpleSection__total{ opacity:0.75; font-size:12px; }
.simpleSection__grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }

/* Building panel */
.playerBuilding{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:14px;
}
.playerBuilding.playerBuilding--one{ grid-template-columns: 1fr; }

.buildingSubHead{
  margin: 12px 0 8px;
  font-weight: 900;
  font-size: 13px;
  opacity: .85;
}
.buildingHero{
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.10), rgba(0,0,0,0.08));
  border-radius:20px;
  padding:16px;
  min-height:220px;
}
.buildingHero__title{ font-weight:900; font-size:16px; }
.buildingHero__hint{ opacity:0.75; margin-top:6px; font-size:12px; }
.buildingList{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  border-radius:20px;
  padding:12px;
}
.buildingRow{ display:flex; align-items:center; gap:10px; padding:8px 6px; }
.buildingRow__icon{ width:28px; height:28px; border-radius:8px; overflow:hidden; flex:0 0 auto; background: rgba(255,255,255,0.04); }
.buildingRow__icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.buildingRow__name{ font-weight:800; }
.buildingRow__barWrap{ flex:1 1 auto; }
.buildingRow__bar{ height:8px; border-radius:999px; background: rgba(255,255,255,0.08); overflow:hidden; }
.buildingRow__bar > span{ display:block; height:100%; background: rgba(255,255,255,0.22); }
.buildingRow__meta{ text-align:right; min-width:74px; }
.buildingRow__meta .v{ font-weight:900; }
.buildingRow__meta .p{ opacity:0.75; font-size:12px; }

/* Accuracy panel */
.playerAccuracy{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.accuracyCard{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  border-radius:20px;
  padding:12px;
}
.accuracySilhouette{
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(110% 120% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.10));
  border-radius:20px;
  padding:12px;
  position:relative;
  min-height:260px;
}
.accTag{
  position:absolute;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.30);
  border:1px solid rgba(255,255,255,0.10);
  font-size:12px;
  font-weight:900;
}
.accTag small{ opacity:0.75; font-weight:700; }

.accTag--head{ top: 12px; left: 50%; transform: translateX(-50%); }
.accTag--chest{ top: 70px; left: 18px; }
.accTag--stomach{ top: 110px; right: 18px; }
.accTag--arms{ top: 160px; left: 18px; }
.accTag--legs{ bottom: 18px; left: 50%; transform: translateX(-50%); }

@media (max-width: 900px){
  .playerBuilding{ grid-template-columns: 1fr; }
  .playerAccuracy{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .playerHero__card{ padding:12px; }
  .playerHero__avatar{ width:72px; height:72px; border-radius:16px; }
  .playerHero__name{ font-size:18px; }
}





/* Player panels: Building & Accuracy (v111 polish) */
.statTiles--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statTile__icon--ghost{ width:36px; height:36px; border-radius:14px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }

.buildingList--panel{ margin-top: 12px; }

.accuracyGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}
.accuracyMain, .accuracyBreakdown{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  border-radius:20px;
  padding:12px;
}
.accBreakHead{ font-weight: 900; margin-bottom: 10px; }

.accMeter{
  --size: 160px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: conic-gradient(rgba(255,255,255,0.28) calc(var(--acc) * 1%), rgba(255,255,255,0.08) 0);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto;
  position:relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.accMeter__inner{
  width: calc(var(--size) - 26px);
  height: calc(var(--size) - 26px);
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.accMeter__value{ font-size: 28px; font-weight: 1000; line-height: 1; }
.accMeter__label{ opacity: 0.75; font-weight: 800; margin-top: 4px; font-size: 12px; }

.accRow{ display:flex; align-items:center; justify-content:space-between;
 gap:10px; padding: 8px 0; }
.accRow + .accRow{ border-top: 1px solid rgba(255,255,255,0.06); }
.accRow__l{ display:flex; align-items:center; gap:8px; min-width: 120px; }
.accRow__dot{ width:8px; height:8px; border-radius:99px; background: rgba(255,255,255,0.20); }
.accRow__icon{ width:18px; height:18px; object-fit:contain; opacity:0.9; }
.accRow__name{ font-weight: 900; }
.accRow__pctInline{ font-weight: 900; opacity: 0.9; margin-left: 2px; }
.accRow__r{ display:flex; align-items:center; gap:10px; flex: 1 1 auto; justify-content:flex-end; }
.accRow__bar{ height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow:hidden; width: 160px; max-width: 45vw; }
.accRow__bar > span{ display:block; height:100%; background: rgba(255,255,255,0.22); }
.accRow__pct{ width: 46px; text-align:right; font-weight: 900; opacity: 0.85; }

@media (max-width: 900px){
  .statTiles--3{ grid-template-columns: 1fr; }
  .accuracyGrid{ grid-template-columns: 1fr; }
  .accRow__bar{ width: 100%; max-width: none; }
}

/* ---------------------------------
   Player page: quick tiles + sections
----------------------------------*/
.playerQuick { margin-top: 14px; }
.statTiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.statTiles.statTiles--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.playerSections { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }

.playerFeatured { margin-top: 14px; }
.playerFeatured__title { font-weight: 900; font-size: 14px; margin: 4px 0 10px; }
.itemTiles--featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.itemTile--featured .itemTile__img { height: 44px; }
.itemTile--featured .itemTile__img img { max-height: 44px; }

.playerSection { background: var(--bg800); border: 1px solid var(--border); border-radius: 18px; padding: 14px; }
.playerSection__head { display: flex; align-items: baseline; justify-content:space-between;
 gap: 12px; margin-bottom: 12px; }

.playerSection__toggle{ appearance:none; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: inherit; width: 28px; height: 28px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex: 0 0 auto; }
.playerSection__toggle:hover{ background: rgba(255,255,255,0.09); }
.playerSection.is-collapsed .playerSection__toggle{ transform: rotate(-90deg); }

.playerSection.is-collapsed .playerSection__grid{ display:none; }
.playerSection.is-collapsed .playerSection__actions{ display:none !important; }

.playerGlobalSearch { margin: 12px 0 16px; }
.playerGlobalSearch .input { width: 100%; max-width: 520px; }

.playerSection__tools { display: flex; align-items: center; gap: 10px; }
.playerSection__title { font-weight: 900; letter-spacing: .2px; }
.playerSection__search{ flex: 1 1 auto; display:flex; justify-content:center; }
.playerSection__search .input{ width: 180px; padding: 7px 10px; border-radius: 12px; }
.input--sm{ padding:7px 10px; }
.playerSection__total { color: var(--text700); font-size: 12px; }

.playerSection__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.itemTile { background: var(--bg700); border: 1px solid var(--border); border-radius: 14px; padding: 10px; text-align: center; }
.itemTile__img { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.itemTile__img img { max-height: 40px; max-width: 100%; object-fit: contain; }
.itemTile__value { font-weight: 900; font-size: 14px; }
.itemTile__label { margin-top: 4px; font-size: 11px; color: var(--text700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.playerSection__actions { margin-top: 10px; display: flex; justify-content: center; }

@media (max-width: 1100px) {
  .playerSection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .statTiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .playerSection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* v111 Step 11: Player global search chips + highlight */
.playerGlobalSearch__row { display: flex; gap: 10px; align-items: center; }
.playerGlobalSearch__onlyFound { display:flex; gap:6px; align-items:center; font-size: 12px; opacity: 0.9; user-select:none; }
.playerGlobalSearch__chips { margin-top: 8px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.chip:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.chip.is-active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}
.itemTile__label mark { background: rgba(255,255,255,0.16); padding: 0 2px; border-radius: 3px; }
.playerSection.is-empty .playerSection__total { opacity: 0.65; }


/* Rich list (Богатеи) — make it look like a clean single-column list without duplicated label */
.topGrid.is-rich .topCard__right--rich{ display:none !important; }
.topGrid.is-rich .topCard--rich{ justify-content:flex-start; padding-right: 128px; }
.topGrid.is-rich .topCard--rich.richable[data-rich-tier]::after{
  top: 50%;
  transform: translateY(-50%);
}
.richable[data-rich-tier][data-rich-label=""]::after{ display:none; }


/* Economy wide mode: hide sidebar and use full width */
html.page-economy .grid{ grid-template-columns: 1fr; }
html.page-economy .grid > aside{ display:none !important; }

/* Economy global chart */
.eaChartWrap{
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  padding: 12px;
}
.eaChartTitle{ font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.eaChartBar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top: 8px; }
.eaLegend{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.eaChip{
  display:inline-flex; gap:8px; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor:pointer;
  user-select:none;
  font-weight: 700;
  font-size: 12px;
}
.eaChip input{ accent-color: #fff; }
.eaChip.is-off{ opacity: .45; }
.eaDot{ width:10px; height:10px; border-radius: 3px; background: currentColor; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.eaDot--phys{ color: var(--ea-phys); }
.eaDot--sr{ color: var(--ea-sr); }
.eaDot--market{ color: var(--ea-market); }
.eaChart{ width: 100%; display:block; margin-top: 10px; border-radius: 12px; }
.eaTip{
  position: absolute;
  z-index: 50;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  font-size: 12px;
  pointer-events:none;
  transform: translate(-50%, -120%);
  min-width: 170px;
}
.eaTip b{ font-size: 13px; }


/* === Sidebar auto-hide (Stage 2.6.4) === */
.grid > aside{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
html.sidebar-hidden .grid{
  grid-template-columns: 1fr !important;
}
html.sidebar-hidden .grid > aside{
  opacity: 0 !important;
  transform: translateX(14px) !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* === Sidebar drawer (Stage 2.6.5) === */
html.sidebar-lock, html.sidebar-lock body{ overflow: hidden; }

.sidebarOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 45;
}

@media (max-width: 980px){
  html.sidebar-drawer-enabled .grid{ grid-template-columns: 1fr !important; }

  html.sidebar-drawer-enabled .grid > aside{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    max-width: 92vw;
    padding: 14px;
    margin: 0;
    overflow: auto;
    background: var(--bg800);
    border-left: 1px solid var(--border);
    box-shadow: -14px 0 30px rgba(0,0,0,.35);
    transform: translateX(110%);
    opacity: 1;
    pointer-events: auto;
    z-index: 50;
  }

  html.sidebar-drawer-enabled.sidebar-drawer-open .grid > aside{ transform: translateX(0); }
  html.sidebar-drawer-enabled.sidebar-drawer-open .sidebarOverlay{ opacity: 1; pointer-events: auto; }

  /* When auto-hide class is present on mobile, do not hard-zero the drawer */
  html.sidebar-drawer-enabled.sidebar-hidden .grid > aside{
    width: min(420px, 92vw) !important;
    max-width: 92vw !important;
    padding: 14px !important;
    border-left: 1px solid var(--border) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    overflow: auto !important;
    transform: translateX(110%) !important;
  }
}

/* === Sidebar drawer on mobile (Stage 2.6.5) === */
html.sidebar-lock{ overflow: hidden; }

.sidebarOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 90;
}

html.sidebar-drawer-enabled .sidebarOverlay[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 980px){
  /* Force the right panel to be off-canvas on mobile */
  html.sidebar-drawer-enabled .grid{
    grid-template-columns: 1fr !important;
  }
  html.sidebar-drawer-enabled .grid > aside{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    max-width: 92vw;
    padding: 16px;
    margin: 0;
    overflow: auto;
    background: rgba(17, 19, 24, .92);
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 60px rgba(0,0,0,.35);
    transform: translateX(110%);
    opacity: 1;
    pointer-events: auto;
    z-index: 100;
  }
  html.sidebar-drawer-enabled.sidebar-drawer-open .grid > aside{
    transform: translateX(0);
  }
  /* When drawer mode is enabled, ignore desktop auto-hide width=0 tweaks */
  html.sidebar-drawer-enabled.sidebar-hidden .grid > aside{
    width: min(420px, 92vw) !important;
    max-width: 92vw !important;
    padding: 16px !important;
    overflow: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--border) !important;
  }
}

/* ТОП по ролям */
.roleGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 14px}
.roleCard{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);background:var(--bg800);border-radius:14px;cursor:pointer;text-align:left;color:var(--text);appearance:none}
.roleCard:focus{outline:none}
.roleCard:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-ring-soft);}
.roleCard::-moz-focus-inner{border:0}
.roleCard:hover{border-color:rgba(255,255,255,.18)}
.roleCard.is-active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(196,59,47,.35) inset}
.roleCard__icon{width:34px;height:34px;flex:0 0 34px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.roleCard__icon--fallback{border-radius:10px;background:rgba(255,255,255,.08)}
.roleCard__label{font-weight:800;font-size:14px;line-height:1.1}
.roleCard__desc{margin-top:2px;font-size:12px;color:var(--text700);line-height:1.2}

/* Premium Top UI */
.topRole{margin-top:8px;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:18px;box-shadow: var(--shadow);}
.topRole__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.topRole__kicker{font-weight:800;font-size:12px;color:var(--text700);letter-spacing:.02em;text-transform:uppercase}
.topRole__name{font-weight:900;font-size:22px;line-height:1.1;margin-top:2px}
.topRole__meta{margin-top:6px;font-size:12px;color:var(--text700)}
.topRole__actions{display:flex;gap:8px;align-items:center}

.topSearch{position:relative;display:flex;align-items:center;gap:6px;min-width:220px;max-width:320px}
.topSearch__input{width:100%;padding-right:34px;}
.topSearch__input::placeholder{ color: var(--text700); }
.topSearch__input:focus{ box-shadow: 0 0 0 4px var(--focus-ring-soft); }
.topSearch__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.topSearch__clear:hover{background:rgba(255,255,255,.10)}

.topRole__podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:stretch;margin-top:10px}
.podiumCard{position:relative;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 66px;border:1px solid var(--border);background:rgba(0,0,0,.22);border-radius:16px;cursor:pointer;min-height:84px;overflow:hidden}
.podiumCard:hover{border-color:rgba(255,255,255,.18)}
.podiumCard__rank{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:1000;font-size:34px;line-height:1;letter-spacing:-.6px;color:rgba(255,255,255,.18);text-shadow:0 10px 24px rgba(0,0,0,.55);pointer-events:none}
.podiumCard--pos1 .podiumCard__rank{color:rgba(var(--top1-rgb),.95);text-shadow:0 10px 26px rgba(0,0,0,.55),0 0 22px rgba(var(--top1-rgb),.26)}
.podiumCard--pos2 .podiumCard__rank{color:rgba(var(--top2-rgb),.92);text-shadow:0 10px 26px rgba(0,0,0,.55),0 0 22px rgba(var(--top2-rgb),.22)}
.podiumCard--pos3 .podiumCard__rank{color:rgba(var(--top3-rgb),.93);text-shadow:0 10px 26px rgba(0,0,0,.55),0 0 22px rgba(var(--top3-rgb),.24)}
.podiumCard--pos1{box-shadow:0 0 0 1px rgba(var(--top1-rgb),.14) inset, 0 12px 36px rgba(0,0,0,.32)}
.podiumCard--pos2{box-shadow:0 0 0 1px rgba(var(--top2-rgb),.12) inset, 0 12px 36px rgba(0,0,0,.32)}
.podiumCard--pos3{box-shadow:0 0 0 1px rgba(var(--top3-rgb),.13) inset, 0 12px 36px rgba(0,0,0,.32)}
.podiumCard__ava{width:48px;height:48px;border-radius:14px;overflow:hidden;flex:0 0 48px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.podiumCard__ava img{width:100%;height:100%;object-fit:cover}
.podiumCard__name{font-weight:900;font-size:14px;line-height:1.1}
.podiumCard__id{font-size:11px;color:var(--text700)}
.podiumCard__sub{display:flex;align-items:center;gap:10px;justify-content:space-between}
.podiumCard__val{margin-left:auto;text-align:right}
.podiumCard__num{font-weight:950;font-size:20px;line-height:1}
.podiumCard__lbl{font-size:11px;color:var(--text700);margin-top:3px}
.podiumCard--first{transform:translateY(-6px);border-color:rgba(196,59,47,.55);box-shadow:0 0 0 1px rgba(196,59,47,.25) inset, 0 20px 60px rgba(0,0,0,.35)}
.podiumCard--first::after{content:"";position:absolute;inset:-60px -40px auto auto;width:160px;height:160px;background:radial-gradient(circle, rgba(196,59,47,.25), transparent 60%);pointer-events:none}

.topRole__list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rankRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);background:rgba(0,0,0,.18);border-radius:14px;cursor:pointer}
.rankRow:hover{border-color:rgba(255,255,255,.18)}
.rankRow__pos{width:26px;text-align:center;font-weight:950;font-size:12px;color:var(--text700)}
.rankRow__ava{width:34px;height:34px;border-radius:12px;overflow:hidden;flex:0 0 34px}
.rankRow__ava img{width:100%;height:100%;object-fit:cover}
.rankRow__name{font-weight:850;font-size:13px;line-height:1.1}
.rankRow__id{font-size:11px;color:var(--text700)}
.rankRow__val{margin-left:auto;text-align:right}
.rankRow__num{font-weight:950}
.rankRow__bar{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.rankRow__bar > i{display:block;height:100%;background:rgba(196,59,47,.55)}


/* Stats: tiles under podium */
.rankTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.prSentinel{height:1px;width:100%;opacity:0;pointer-events:none;grid-column:1/-1;flex-basis:100%}
.vgSpacer{height:0;width:100%;opacity:0;pointer-events:none;grid-column:1/-1;}
.rankTile{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);background:rgba(0,0,0,.18);border-radius:14px;cursor:pointer;text-align:left}
.rankTile:hover{border-color:rgba(255,255,255,.18)}
.rankTile__pos{font-weight:950;font-size:12px;color:var(--text700);padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06)}
.rankTile__ava{width:34px;height:34px;border-radius:12px;overflow:hidden;flex:0 0 34px}
.rankTile__ava img{width:100%;height:100%;object-fit:cover}
.rankTile__body{min-width:0;flex:1}
.rankTile__name{font-weight:850;font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankTile__id{font-size:11px;color:var(--text700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankTile__sub{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rankTile__val{width:92px;text-align:right}
.rankTile__num{font-weight:950}
.rankTile__bar{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.rankTile__bar > i{display:block;height:100%;background:rgba(196,59,47,.55)}

.likeMini{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text700);padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.likeMini b{font-weight:950;color:var(--text)}
.likeMini--podium{margin-left:auto}

.likeMini--btn{cursor:pointer;user-select:none;transition:transform .12s ease,background .12s ease,border-color .12s ease,opacity .12s ease}
.likeMini--btn:hover{transform:translateY(-1px)}
.likeMini--btn.is-on{background:rgba(196,59,47,.12);border-color:rgba(196,59,47,.26);color:var(--text)}
.likeMini--btn.is-on b{color:var(--text)}
.likeMini--btn.is-disabled{cursor:not-allowed;opacity:.55;transform:none}
.likeMini--btn.is-loading{opacity:.7}
.likeMini--tiny{font-size:10px;padding:2px 6px;gap:5px}
.telemetryRow .likeMini--tiny,.homeOnlineRow .likeMini--tiny{margin-left:auto}


.topRole__more{display:flex;justify-content:center;margin-top:12px}

@media (max-width: 720px){
  .topRole__podium{grid-template-columns:1fr;}
  .podiumCard--first{transform:none}
  .podiumCard{padding-left:56px;min-height:76px}
  .podiumCard__rank{left:14px;font-size:28px}
  .podiumCard__ava{width:44px;height:44px;border-radius:13px;flex-basis:44px}

  .topSearch{min-width:160px;max-width:100%}
}


/* --- Stage3 Premium Top Roles: ensure readable text regardless of custom CSS --- */
.topRoles, .topRoles * { color: var(--text) !important; }
.topRoles .muted, .topRoles .hint { color: var(--text700) !important; }
.topRoles a { color: var(--text) !important; }



/* --- Stage3 Player Tabs: force readable button text even if browser/override styles --- */
.playerPage{ color: var(--text); }
.playerTabs .playerTabBtn{ color: var(--text) !important; }




/* ---------------------------------
   Accuracy tab v2 (HitRate images) — alignment
----------------------------------*/
.playerAccuracy--v2{
  grid-template-columns: minmax(560px, 1fr) minmax(420px, 520px);
  align-items: start;
}
.playerAccuracy--v2 .accuracyCard{ min-width: 0; }
.playerAccuracy--v2 .accMeter{ --size: 180px; }

/* When the right block is removed, let the left card occupy full width */
.playerAccuracy--v2 .accuracyCard--left{ grid-column: 1 / -1; }

/* Compact overall accuracy pill (we intentionally don't show shots/hits/misses) */
.accTop{ display:flex; justify-content:flex-end; margin-bottom: 10px; }
.accPill{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}
.accPill b{ font-weight:1100; font-size:14px; }
.accPill span{ font-weight:900; font-size:12px; opacity:.8; text-transform:uppercase; letter-spacing:.4px; }

.accViz{
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(110% 120% at 50% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  border-radius: 18px;
  padding: 10px;
  overflow: hidden;
  /* Keep the preview size consistent with admin editor to avoid \"different window\" effect */
  max-width: 720px;
  margin: 0 auto;
}
.accViz__img{
  width: 100%;
  height: auto;
  max-height: 290px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}

/* Accuracy: overlay labels (no red frames; positions are configurable via admin) */
.accViz{
  position: relative;
  /* defaults (can be overridden by CSS variables on this element) */
  --acc-head-top: 9%;
  --acc-head-left: 62%;
  --acc-head-width: 32%;
  --acc-chest-top: 46%;
  --acc-chest-left: 65%;
  --acc-chest-width: 29%;
  --acc-legs-top: 78%;
  --acc-legs-left: 65%;
  --acc-legs-width: 29%;
  --acc-arms-top: 22%;
  --acc-arms-left: 6%;
  --acc-arms-width: 30%;
  --acc-stomach-top: 46%;
  --acc-stomach-left: 6%;
  --acc-stomach-width: 30%;
}

/* Plain text labels (no border) */
.accBox{
  position: absolute;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
   gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.85), 0 1px 1px rgba(0,0,0,0.85);
  pointer-events: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.accBox span{ opacity:.92; }
.accBox b{ font-weight: 1100; opacity: .98; }
.accBox--arms, .accBox--stomach{ justify-content:flex-start; }
.accBox--arms b, .accBox--stomach b{ margin-right:0; }


/* Positions controlled by CSS variables */
.accBox--head{ top: var(--acc-head-top); left: var(--acc-head-left); width: var(--acc-head-width); }
.accBox--chest{ top: var(--acc-chest-top); left: var(--acc-chest-left); width: var(--acc-chest-width); }
.accBox--legs{ top: var(--acc-legs-top); left: var(--acc-legs-left); width: var(--acc-legs-width); }
.accBox--arms{ top: var(--acc-arms-top); left: var(--acc-arms-left); width: var(--acc-arms-width); }
.accBox--stomach{ top: var(--acc-stomach-top); left: var(--acc-stomach-left); width: var(--acc-stomach-width); }


.accList{ margin-top: 12px; }
.accStatTiles{ margin-top: 14px; }
.accHint{ margin-top: 12px; opacity: .8; }

@media (max-width: 1100px){
  .playerAccuracy--v2{ grid-template-columns: 1fr; }
  .accViz__img{ max-height: 320px; }
}


/* Accuracy: widen KPI tiles so labels/values never clip */
.accStatTiles{
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.accStatTiles .statTile{
  padding: 12px 14px;
  min-height: 60px;
}
.accStatTiles .statTile__value{
  font-size: 16px;
  white-space: nowrap;
}
.accStatTiles .statTile__label{
  white-space: nowrap;
}




/* === Market: toolbar (sticky) + table view === */
html.page-market .marketToolbar{
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.18);
}
html.page-market .marketToolbar.is-stuck{
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

/*
  Sticky toolbar must not visually cover the first visible cards/rows.
  When the toolbar becomes stuck, market.js toggles `.is-stuck` and sets
  `--market-tb-h` on the toolbar element.

  We then add top padding to the immediate list sibling so its first row
  starts just below the toolbar (+ small gap).
*/
html.page-market .marketToolbar.is-stuck + .marketGroups,
html.page-market .marketToolbar.is-stuck + .marketAll{
  padding-top: calc(var(--market-tb-h, 0px) + 12px);
}

html.page-market .marketToolbar .shopsControls{
  align-items:center;
}

/* Market toolbar v4: predictable row-based layout (market.js outputs .marketTbRow wrappers) */
.marketTbRow{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.marketTbRow--top .marketSearch{ flex: 1 1 460px; min-width: 260px; }
.marketTbRow--top .marketSort{ margin-left: auto; }

@media (max-width: 820px){
  .marketTbRow--top .marketSearch{ flex-basis: 100%; }
  .marketTbRow--top .marketSort{ margin-left: 0; flex: 1 1 220px; }
}

.marketTbRow--cats{ padding-top: 2px; }
.marketTbRow--filters{ gap: 10px; }

/* Market toolbar: group filters into 3 logical columns (stable on wide, predictable wrap on narrow) */
.marketFiltersLeft,
.marketFiltersMid,
.marketFiltersRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.marketFiltersLeft{ flex: 1 1 520px; }
.marketFiltersMid{ flex: 0 0 auto; }
.marketFiltersRight{ flex: 0 0 auto; margin-left: auto; justify-content:flex-end; }

@media (max-width: 1100px){
  .marketFiltersLeft{ flex-basis: 100%; }
  .marketFiltersMid{ flex-basis: 100%; }
  .marketFiltersRight{ flex-basis: 100%; margin-left: 0; justify-content:flex-start; }
}

/* Make controls feel uniform (height, radius) without fighting existing button styles */
html.page-market .marketToolbar{ --market-control-h: 38px; }
.marketGrid input,
.marketNum,
.marketSort .marketSelect{
  min-height: var(--market-control-h);
}
.marketActionBtn{ min-height: var(--market-control-h); }
.marketCheck{ min-height: var(--market-control-h); }

.marketPresets{flex:1 0 100%;display:flex;gap:8px;overflow:auto;padding:4px 2px 2px;}
.marketPresets::-webkit-scrollbar{height:0;}
.marketPresets .shopsTab{min-width:unset;padding:6px 10px;font-size:12px;border-radius:999px;}


.marketGrid{
  display:flex;
  align-items:center;
  gap:8px;
}

.marketGrid input{
  width: clamp(110px, 14vw, 140px);
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
}


.marketGrid input:focus{
  outline: none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketRange,
.marketQty{
  display:flex;
  align-items:center;
  gap:8px;
}

.marketNum{
  width: clamp(110px, 14vw, 140px);
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
}


.marketQty .marketNum{
  width: clamp(96px, 12vw, 120px);
}

.marketNum:focus{
  outline: none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketNum:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.marketSort .marketSelect{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
  min-width: clamp(160px, 18vw, 220px);
}


.marketSort .marketSelect:focus{
  outline:none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketCheck{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
}


.marketCheck input{ margin:0; }

.marketTabs--view .shopsTab{ min-width: 92px; }

.marketAll{
  margin-top: 10px;
}

.marketAllHead{
  display:grid;
  grid-template-columns: 1.2fr 1.3fr 1.4fr .6fr;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

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

/* Market "Все предложения" — virtualized mode
   When too many rows are shown, market.js switches to windowed rendering.
   We remove flex+gap here (spacers need exact pixel heights) and emulate
   spacing via margins on rows. */
.marketAllBody[data-virt-all="1"]{
  display:block;
  position:relative;
  gap: 0;
}
.marketAllBody[data-virt-all="1"] .mvSpacer{
  width:100%;
  height:0;
}
.marketAllBody[data-virt-all="1"] .mvRows{
  display:block;
}
.marketAllBody[data-virt-all="1"] .marketAllRow{
  margin: 0 0 10px 0;
}
.marketAllBody[data-virt-all="1"] .marketAllRow:last-child{
  margin-bottom: 0;
}

.marketAllHint{
  margin: 10px 0;
  font-size: 12px;
  opacity: .7;
  text-align: center;
}

.marketAllRow{
  display:grid;
  grid-template-columns: 1.2fr 1.3fr 1.4fr .6fr;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.marketAllRow:hover{
  background: rgba(0,0,0,.14);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}

.marketAllRow .c{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.marketAllRow .c .t{
  min-width:0;
}

.marketAllRow .c .t .l1{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketAllRow .c .t .l2{
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

.marketAllRow .c--grid{
  justify-content:flex-end;
  gap: 6px;
}

@media (max-width: 1000px){
  .marketAllHead{ display:none; }
  .marketAllRow{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .marketAllRow .c--grid{ justify-content:flex-start; }
  .marketSort .marketSelect{ min-width: 160px; }
}

/* ------------------------------
   WebChat (Home)
   ------------------------------ */
.homeMainGrid{
  display:grid;
  grid-template-columns: clamp(340px, 30vw, 460px) minmax(0, 1fr);
  grid-template-areas: "homeChat homeNews";
  gap: 14px;
  align-items:start;
}
.homeMainGrid__chat{ grid-area: homeChat; }
.homeMainGrid__news{ grid-area: homeNews; }

/* Tablet: keep page as 2 columns (main+sidebar), but stack chat under news */
@media (max-width: 1199px){
  .homeMainGrid{
    grid-template-columns: 1fr;
    grid-template-areas: "homeNews" "homeChat";
  }
}

.webchatPanel .panel__head .h1{ margin: 0; }

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

.webchat__list{
  height: 560px;
  overflow:auto;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(8,12,18,.55), rgba(10,14,22,.72));
  box-shadow: var(--shadow);
  padding: 10px;
}
@media (max-width: 1199px){
  .webchat__list{ height: 360px; }
}

.webchat__loading,
.webchat__empty{
  color: var(--muted);
  padding: 10px;
  font-size: 13px;
}

.webchatMsg{
  display:flex;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.16);
  margin-bottom: 8px;
}
@keyframes webchatPop{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.985);
    background: rgba(60,120,220,.10);
    border-color: rgba(120,180,255,.20);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(0,0,0,.16);
    border-color: rgba(255,255,255,.06);
  }
}
.webchatMsg--new{
  animation: webchatPop .22s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  .webchatMsg--new{ animation: none; }
}

.webchatMsg:last-child{ margin-bottom: 0; }

.webchatAvatar{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  flex: 0 0 auto;
}

.webchatBody{ min-width: 0; flex: 1; }

.webchatMeta{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.1;
  margin-bottom: 4px;
  min-width: 0;
}
.webchatTime{ color: var(--muted); font-variant-numeric: tabular-nums; }
.webchatPrefix{
  color: rgba(231,237,243,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.webchatNick{
  font-weight: 1000;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.webchatBadge{
  font-size: 11px;
  font-weight: 1000;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(240,140,40,.28);
  background: rgba(240,140,40,.10);
  color: rgba(240,140,40,.95);
  white-space: nowrap;
}

.webchatText{
  color: rgba(231,237,243,.92);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.webchat__composer{
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,34,.62);
  box-shadow: var(--shadow);
  padding: 10px;
}

.webchatMeRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.webchatMeName{ font-weight: 1000; line-height: 1.1; }
.webchatMeId{ color: var(--muted); font-size: 12px; }

.webchat__form{
  display:flex;
  gap: 8px;
  align-items:center;
}
.webchat__input{
  flex: 1;
  min-width: 0;
}
.webchat__send{ white-space: nowrap; }

@media (max-width: 520px){
  .webchat__form{ flex-direction: column; align-items: stretch; }
  .webchat__send{ width: 100%; }
  .webchat__list{ height: 320px; }
}


.webchat__status{
  margin-top: 8px;
  font-size: 12px;
  min-height: 16px;
}

/* =========================
   Global loader (GIF)
   ========================= */
.globalLoader{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,12,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.globalLoader.is-active{
  opacity: 1;
  pointer-events: auto;
}
.globalLoader__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(18, 22, 28, .72);
  box-shadow: 0 14px 45px rgba(0,0,0,.45);
}
.globalLoader__gif{
  width: 140px;
  height: auto;
}
.globalLoader__text{
  font: 600 14px/1.2 var(--font);
  color: var(--text900);
  opacity: .9;
}


/* Accessibility: reduced motion (global) */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,
  .btn-ghost:hover,
  .navLink:hover,
  .playerRow:hover,
  .telemetryRow:hover,
  .rankTile:hover,
  .shopsTab:hover,
  .podiumCard--first,
  .podiumCard:hover{
    transform:none !important;
  }
}


/* ============================================================
   UI Stage 5 — polish: news/comments, tables, modals, typography
   Non-breaking: only CSS, respects existing structure + tokens.
   ============================================================ */

/* ---- Micro-typography & readable rhythm ---- */
body{ line-height: 1.45; text-rendering: geometricPrecision; }
:where(h1,h2,h3,h4){ letter-spacing: .2px; }
:where(h1){ font-size: 28px; line-height: 1.15; margin: 0 0 10px 0; }
:where(h2){ font-size: 20px; line-height: 1.2; margin: 0 0 8px 0; }
:where(h3){ font-size: 16px; line-height: 1.25; margin: 0 0 6px 0; }
:where(p){ margin: 0 0 10px 0; }
:where(.muted){ color: var(--text700) !important; }
:where(.mono){ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:where(code,.code){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
}
:where(hr){
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 16px 0;
  opacity: .9;
}

/* ---- Section header helpers (can be adopted progressively) ---- */
.section{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  overflow: clip;
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.section__title{ font-weight: 1000; }
.section__kicker{ color: var(--text700); font-size: 12px; margin-top: 4px; }
.section__actions{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.section__body{ padding: var(--panel-pad); }

/* ---- News & comments (softer, more consistent surfaces) ---- */
.newsCard{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(8,12,18,.90), rgba(10,14,22,.96));
}
.newsCard::before{ opacity: .28; }
.newsCard__title{ font-weight: 950; }
.newsCard__text{ color: rgba(231,237,243,.86); }
.newsCard__tag{
  border-color: rgba(240,140,40,.30);
  background: rgba(240,140,40,.10);
  font-weight: 950;
}
.cmt{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
}
.cmt__av{ border-color: rgba(255,255,255,.10); }

/* ---- Table component (used by admin + diagnostics) ---- */
.table, .adminTable{
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table th, .table td,
.adminTable th, .adminTable td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table thead th,
.adminTable thead th{
  text-align:left;
  font-weight: 950;
  color: var(--text700);
  background: rgba(0,0,0,.14);
}
.table tbody tr:hover td,
.adminTable tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
.table--compact th, .table--compact td{ padding: 7px 10px; font-size: 13px; }
.tableMini th, .tableMini td{ padding: 7px 9px; font-size: 12px; }
.table td:last-child, .adminTable td:last-child{ word-break: break-word; }

/* Scroll container for wide tables (already used in some admin pages) */
.tableWrap{
  width:100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.12);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
.tableWrap > table{ min-width: 760px; }
.tableWrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Modal polish: subtle entrance, no JS changes required ---- */
@keyframes modalIn{
  from{ transform: translateY(6px) scale(.992); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.modal-overlay.is-open .modal-content{ animation: modalIn 140ms ease-out both; }
@media (prefers-reduced-motion: reduce){
  .modal-overlay.is-open .modal-content{ animation: none; }
}

/* ---- Market rows: clearer focus + consistent borders ---- */
.marketOfferRow{ border-color: var(--border); }
.marketOfferRow:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.marketAllRow:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- React small alignment (shared tokens) ---- */
.reactRow{ border: 1px solid var(--border) !important; }


/* ==============================
   Stage 6: Page polish (key pages)
   - consistent padding for stats/player/news/map
   - unified toolbars/empty states
   ============================== */

/* Panel head responsiveness: keep actions usable on narrow screens */
@media (max-width: 720px){
  .panel__head{ flex-direction: column; align-items: stretch; }
  .panel-head{ flex-direction: column; align-items: stretch; }
  .panel__actions{ justify-content: flex-start; flex-wrap: wrap; width: 100%; }
}

/* Stats page: when wrapped in panel-body, reduce nested shadows a bit */
.panel .topRole{ box-shadow: none; background: rgba(0,0,0,.14); }
.panel .topRole__head{ flex-wrap: wrap; }
.topRole__actions{ flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px){
  .topRole__actions{ justify-content: flex-start; width: 100%; }
  .topSearch{ min-width: 100%; max-width: 100%; }
}

/* Player page: move content into panel-body, keep spacing tight and consistent */
.playerPage .playerHero{ margin: 0; }
.playerPage .playerTabs{ margin-top: var(--space-4); }
.playerPage .playerTabPanels{ margin-top: var(--space-3); }

/* Player tabs: closer to site buttons, with proper focus ring */
.playerTabBtn{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
  color: var(--text900);
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 850;
  letter-spacing: .02em;
}
.playerTabBtn:hover{ background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.18); }
.playerTabBtn.is-active{
  background: rgba(240,140,40,.10);
  border-color: rgba(240,140,40,.45);
}
.playerTabBtn:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

/* News page: panel-body wrapper */
.newsGrid{ padding: 0; }
.newsList{ display:grid; gap: 12px; }
.newsItem{ border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(0,0,0,.12); overflow:hidden; }
.newsItem:hover{ border-color: rgba(255,255,255,.18); }
.newsItem__body{ padding: 12px 14px; }
.newsItem__title{ font-weight: 950; letter-spacing:.2px; }
.newsItem__meta{ font-size: 12px; color: var(--text700); margin-top: 4px; }

/* Map page: panel shell */
.mapPage .panel-body{ padding: var(--panel-pad); }
.mapEmbed{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: rgba(0,0,0,.10);
}
.mapEmbed iframe{
  width: 100%;
  height: min(72vh, 880px);
  border: 0;
  display:block;
}

/* Sidebar monitoring: avoid inline styles and keep divider rhythm */
aside .divider{ margin: 12px 0; }

/* ============================================================
   Stage 7 — Home + Market + Admin polish (page-level)
   Goals: unified surfaces, consistent wide rhythm, better focus/hover,
   zero logic/architecture changes.
   ============================================================ */

/* ---------- Home: WebChat + News ---------- */
.homeMainGrid{ gap: var(--grid-gap); }

.webchatPanel .panel-body{ padding: var(--panel-pad); }

.webchat__list{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.webchatMsg{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
}
.webchatMsg--new{
  /* keep animation, but use softer base */
}

.webchat__composer{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.panel-body .newsGrid{ margin-top: 0; }

.newsCard{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.18));
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.newsCard:hover{
  border-color: rgba(240,140,40,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.newsCard__text{ color: rgba(231,237,243,.88); }
.newsCard__meta{ color: var(--text700); }

@media (prefers-reduced-motion: reduce){
  .newsCard:hover{ transform:none; }
}

/* ---------- Sidebar: Online / Telemetry ---------- */
.telemetryUpdated{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  color: var(--text800);
}
.telemetryRow{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  transition: background var(--transition-med), border-color var(--transition-med);
}
.telemetryRow:hover{
  background: rgba(0,0,0,.18);
  border-color: rgba(240,140,40,.30);
}
.telemetryRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.telemetryAvatar{ border: 1px solid var(--border); background: rgba(0,0,0,.18); }

/* ---------- Market: page shell + toolbar + rows ---------- */
/* Keep ancestors overflow visible so `position: sticky` works predictably across browsers */
html.page-market .shopsPage{ overflow: visible; }

.shopsPage .panel__head.shopsHead{
  margin:0;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  align-items: center;
}

/* Market head meta: keep it compact and aligned */
html.page-market .shopsHead__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 8px;
  text-align:right;
  line-height: 1.1;
  min-width: 0;
}

@media (max-width: 720px){
  .shopsPage .panel__head.shopsHead{ flex-wrap: wrap; align-items: flex-start; }
  .shopsHead__meta{ width: 100%; text-align: left; }
}

.shopsToolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}

html.page-market .shopsToolbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.22);
}

.shopsTabs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.shopsTab{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text900);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.shopsTab:hover{ transform: translateY(-1px); }
.shopsTab.is-active{
  background: rgba(255,255,255,.08);
  border-color: rgba(240,140,40,.28);
}
.shopsTab:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .shopsTab:hover{ transform:none; }
}

.shopsSearch input,
.shopsSelect,
.shopsChip,
.marketSort .marketSelect,
.marketGrid input,
.marketNum{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.shopsSearch input:focus,
.shopsSelect:focus,
.marketSort .marketSelect:focus,
.marketGrid input:focus,
.marketNum:focus{
  outline:none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

.marketOfferRow{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-med), background var(--transition-fast), border-color var(--transition-fast);
}
.marketOfferRow:hover{
  transform: translateY(-1px);
  border-color: rgba(240,140,40,.28);
  background: rgba(0,0,0,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.marketOfferRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.marketAllRow{
  background: rgba(0,0,0,.12);
}
.marketAllRow:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(240,140,40,.22);
  transform: translateY(-1px);
}
.marketAllRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .marketOfferRow:hover,
  .marketAllRow:hover{ transform:none; }
}

.shopsEmpty{
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.10);
  color: var(--text700);
}

/* Market/shops modal: align to shared tokens */
.shopsModalPanel{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(12,12,14,.90));
}
.shopsModalHead{
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}
.shopsModalClose{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.shopsModalClose:hover{ transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){
  .shopsModalClose:hover{ transform:none; }
}

/* ============================================================
   UI Stage 8 — final page polish (home + market + admin)
   ============================================================ */
/* Global motion policy: keep UI snappy, but respect accessibility */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  :where(.btn,.shopsTab,.marketOfferRow,.marketAllRow,.newsCard,.marketActionBtn,.marketFavBtn):hover{
    transform: none !important;
  }
}

/* ---------------------------------
   HOME (news + webchat)
---------------------------------- */
.homeMainGrid{ gap: var(--grid-gap); }

.webchat__list{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.24));
}
.webchatMsg{
  border-color: rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.webchatMsg:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.webchat__authHint{ font-size: 13px; }

/* Subtle scrollbars (targeted, non-breaking) */
.webchat__list, .adminCard, .marketAll, .tableWrap, .tableScroll{
  scrollbar-color: rgba(255,255,255,.26) rgba(0,0,0,.18);
  scrollbar-width: thin;
}
.webchat__list::-webkit-scrollbar,
.adminCard::-webkit-scrollbar,
.marketAll::-webkit-scrollbar,
.tableWrap::-webkit-scrollbar,
.tableScroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.webchat__list::-webkit-scrollbar-thumb,
.adminCard::-webkit-scrollbar-thumb,
.marketAll::-webkit-scrollbar-thumb,
.tableWrap::-webkit-scrollbar-thumb,
.tableScroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
}
.webchat__list::-webkit-scrollbar-track,
.adminCard::-webkit-scrollbar-track,
.marketAll::-webkit-scrollbar-track,
.tableWrap::-webkit-scrollbar-track,
.tableScroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.14); border-radius: 999px; }

.newsCard{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.26));
}
.newsCard:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* ---------------------------------
   MARKET (density + typography + empty states)
---------------------------------- */
/* Keep market toolbar below the sticky site header (matches .tableHead--sticky) */
html.page-market .shopsToolbar{ top: var(--sticky-top); }
.shopsToolbar{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
}
html.page-market .shopsToolbar{ background: rgba(0,0,0,.22); }

.shopsTab{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text900);
}
.shopsTab.is-active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.shopsSearch input, .shopsSelect{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
  color: var(--text900);
}
.shopsChip{ border-color: var(--border); background: rgba(0,0,0,.12); color: var(--text900); }


/* Empty blocks used by market.js */
.shopsEmpty{
  margin: 12px 0;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: rgba(0,0,0,.14);
  color: rgba(231,237,243,.84);
}
.shopsEmptyCenter{ display:flex; justify-content:center; align-items:center; }

/* "All offers" table */
.marketAll{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.10);
  overflow: auto;
}
.marketAllHead{
  display:grid;
  grid-template-columns: minmax(260px,1fr) 260px 240px 140px;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text700);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 920px; /* enables horizontal scroll on small screens */
}
.marketAllBody{ padding: 10px; display:flex; flex-direction:column; gap: 10px; min-width: 920px; }
.mvRows{ display:flex; flex-direction:column; gap: 10px; }

/* Market "All" view: on laptop/tablet widths we should not force horizontal scrolling.
   We keep 4 columns but shrink them to fit typical 1024–1180 layouts.
   For smaller widths we switch to stacked cards (see @media 820px below).
*/
@media (max-width: 1180px){
  html.page-market .marketAllHead,
  html.page-market .marketAllBody{ min-width: 0; }

  html.page-market .marketAllHead,
  html.page-market .marketAllRow{
    grid-template-columns: minmax(220px,1fr) 220px 220px 120px;
  }
}

.marketAllRow{
  display:grid;
  grid-template-columns: minmax(260px,1fr) 260px 240px 140px;
  gap: 12px;
  align-items:center;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  padding: 10px 10px;
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.marketAllRow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.marketAllRow .c{ min-width: 0; }
.marketAllRow .t{ min-width:0; }
.marketAllRow .t .l1{ font-weight: 950; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marketAllRow .t .l2{ font-size: 12px; color: rgba(255,255,255,.60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Offer rows inside expanded group (density polish) */
.marketOfferRow{
  border-color: var(--border);
  background: rgba(0,0,0,.10);
  padding: 9px 10px;
}
.marketOfferRow:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
}

/* Pills/buttons within market rows */
.shopsCoordPill, .shopsSellerPill{
  border-color: var(--border);
  background: rgba(0,0,0,.12);
}
.marketFavBtn, .marketActionBtn{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}
.marketFavBtn:hover, .marketActionBtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

/* ---------------------------------
   ADMIN (tables/forms/toolbars)
---------------------------------- */

/* Reduced motion: avoid hover lifts on large lists */
@media (prefers-reduced-motion: reduce){
  .playerRow:hover,
  .navLink:hover,
  .pTab:hover,
  .viewBtn:hover{ transform:none !important; }
}


.profileWidgetChevron{ transition: transform .16s ease; }
.profileWidgetBtn.is-open .profileWidgetChevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .profileWidgetChevron{ transition: none; }
  .profileMenu{ transition: none; }
}


/* Vote modal */

/* Vote modal: dialog sizing */
.modal#voteModal .modal__dialog{
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - var(--sticky-top) - 60px);
}
@media (max-width: 600px){
  .modal#voteModal .modal__dialog{ max-height: calc(100vh - var(--sticky-top) - 20px); }
}
.modal#voteModal .modal__content{
  /* Only the votes list should scroll */
  overflow: hidden;
  display:flex;
  flex-direction:column;
  gap: 12px;
  min-height: 0;
}

.modal#voteModal .state{ margin: auto 0; }

.voteTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: calc(var(--radius-lg) - 2px);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,106,0,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 760px){
  .voteTop{ flex-direction:column; }
  .voteTop__right{ justify-content:flex-start; }
}

.voteTop__title{ font-weight: 1000; letter-spacing: .2px; font-size: 13px; opacity:.9; }
.voteTop__reward{ margin-top: 4px; color: rgba(231,237,243,.90); display:flex; align-items:center; gap: 8px; flex-wrap:wrap; }

.voteTop__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.votePill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.14);
  color: rgba(245,248,252,.92);
  font-weight: 800;
}
.votePill i{ opacity:.88; }
.votePill b{ font-size: 13px; }

.voteListCard{
  border-radius: var(--radius-lg);
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.14);
  padding: 10px 10px;
  display:flex;
  flex-direction:column;
  min-height:0;
  flex: 1 1 auto;
}

.voteListHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.voteListHead__title{ font-weight: 1000; letter-spacing:.2px; }
.voteListHead__meta{ display:flex; align-items:center; gap: 8px; }
.voteUpdated{ font-size: 12px; color: rgba(231,237,243,.70); }
.voteUpdated.is-stale{ color: rgba(255,211,107,.92); }

.voteListWrap{
  outline: none;
  scrollbar-gutter: stable;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height:0;
  flex: 1 1 auto;
  padding-right: 4px;
}

.voteHero{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 14px;
  padding: 14px 14px;
  border-radius: calc(var(--radius-lg) - 2px);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,106,0,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom: 14px;
}
@media (max-width: 860px){
  .voteHero{ grid-template-columns: 1fr; }
}
.voteHero__title{
  font-weight: 1100;
  font-size: 18px;
  letter-spacing: .2px;
}
.voteHero__text{
  margin-top: 8px;
  color: rgba(231,237,243,.86);
  line-height: 1.55;
}
.voteReward{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,106,0,.30);
  background: rgba(255,106,0,.08);
}
.voteHero__actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.voteStats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 860px){
  .voteStats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .voteStats{ grid-template-columns: 1fr; }
}
.voteStat{
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 10px 12px;
}
.voteStat b{
  display:block;
  margin-top: 2px;
  font-size: 22px;
  letter-spacing: .2px;
}
.voteMeta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.voteMeta__text.is-stale{ color: rgba(255,211,107,.92); }
.voteGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 860px){
  .voteGrid{ grid-template-columns: 1fr; }
}
.voteCard{
  border-radius: var(--radius-lg);
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.14);
  padding: 14px 14px;
}
.voteCard__title{
  font-weight: 1000;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.voteSteps{
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
  color: rgba(231,237,243,.86);
}
.voteSteps li{ margin: 6px 0; }
.voteNote{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255,106,0,.22);
  background: rgba(255,106,0,.06);
  color: rgba(245,248,252,.90);
}
.voteList{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.voteRow{
  width: 100%;
  text-align: left;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text900);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.voteRow--skeleton{
  cursor: default;
  pointer-events:none;
  background: rgba(255,255,255,.02);
}

.voteRow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.voteRow__ink{
  width: 3px;
  height: 32px;
  border-radius: 999px;
  background: var(--ink, rgba(255,106,0,.92));
  box-shadow: 0 0 0 1px rgba(0,0,0,.40) inset;
  flex: 0 0 auto;
}
.voteRow__ava{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  overflow:hidden;
  flex: 0 0 auto;
}
.voteRow__ava img{ width:100%; height:100%; object-fit: cover; display:block; }

.voteRow__main{ min-width:0; flex: 1 1 auto; }
.voteRow__main{ display:flex; flex-direction:column; gap: 2px; }
.voteRow__sub{ font-size: 11px; color: rgba(231,237,243,.72); line-height: 1.1; }
.voteRow__when{ font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); color: rgba(231,237,243,.86); }
.voteRow__top{ display:flex; align-items:baseline; gap: 8px; min-width:0; }
.voteRow__who{
  font-weight: 900;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voteRow__sid{
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  opacity: .86;
}
.voteRow__meta{
  margin-top: 2px;
  font-size: 12px;
  opacity: .92;
}
.voteRow__chev{
  opacity: .75;
  font-size: 18px;
  line-height: 1;
}
.voteRow__right{ margin-left:auto; display:flex; align-items:center; gap: 10px; }
.voteRow .likeMini{ margin-left: 0; }
@media (prefers-reduced-motion: reduce){
  .voteRow, .voteRow:hover{ transition: none; transform: none; }
}


.voteListWrap:focus-visible{ box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 12px; }

.voteRow--skeleton .voteRow__ink{ background: rgba(255,255,255,.08); box-shadow:none; }

/* ---- Header rails (bases and promo carousels) ---- */
.headerRails {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.headerRailBases,
.headerRailPromo {
  flex: 1 1 0;
  /* allow shrinking inside flex row without forcing wrap */
  min-width: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  /* больше воздуха сверху/снизу */
  padding: 12px 14px;
  height: var(--topline-box-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.headerRailBases { flex: 1 1 auto; }
/* Promo rail should not steal too much width from bases on wide screens.
   Keep it within a predictable range; bases will take the remaining space. */
.headerRailPromo {
  flex: 0 0 clamp(340px, 28vw, 520px);
  max-width: 520px;
}

/* Promo rail: full-bleed banner (no inner padding) */
.headerRailPromo{ padding: 0; }
.headerRailPromo .railBody{ border-radius: 12px; }

@media (max-width: 980px){
  .headerRailBases, .headerRailPromo{ flex-basis: 100%; height: auto; }
}
.railHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.railTitle {
  font-weight: 600;
  font-size: 14px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.railMore {
  font-size: 12px;
  opacity: 0.8;
  text-decoration: none;
}
.railMore:hover {
  text-decoration: underline;
}
.railBody {
  position: relative;
  overflow: hidden;
  /* allow the carousel to fill the fixed rail height without pushing layout */
  flex: 1 1 auto;
  min-height: 0;
}

/* Profile widget improvements */
.profileWidget {
  display: flex;
  /* Make the content align to the top-left inside the fixed-height header box.
     This makes the action buttons feel "anchored" and visually consistent with rails. */
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  /* make profile block visually match the rails */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  /*
    IMPORTANT:
    Не клипаем выпадающие меню (уведомления и др.).
    overflow:hidden ломал dropdown колокольчика: меню рендерилось "внутри" карточки профиля.
  */
  overflow: visible;
  height: var(--topline-box-h);
}
.profileAvatarLarge {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
}
.profileWidgetBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* allow the action row to wrap without pushing avatar */
  flex: 1 1 auto;
}
.profileWidgetHeaderRow{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.profileWidgetName {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.profileWidgetSteamId {
  font-size: 10px;
  opacity: 0.7;
}
.profileWidgetMetrics {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.profileWidgetMetrics .metric{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: var(--text900);
  text-decoration:none;
  cursor:pointer;
}
.profileWidgetMetrics .metric:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.18); }
.profileWidgetMetrics .metric i {
  margin-right: 4px;
}
.profileWidgetActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  align-items: center;
}
.profileWidgetActions > .btn,
.profileWidgetActions > a.btn,
.profileWidgetActions > .notifBell > .notifBellBtn {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Bell next to likes in the profile widget header row */
.profileWidgetMetrics > .notifBell > .notifBellBtn{
  min-height: 22px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1;
}

.badgeDot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b0b;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}

/* ------------------------------
   Site-wide notifications (bell + dropdown + toasts)
   ------------------------------ */
.notifBell{ position: relative; display: inline-flex; }
.notifBellBtn{ position: relative; }
.notifBellBtn .badgeDot{
  position: absolute;
  top: -8px;
  right: -8px;
  margin-left: 0;
}

.notifMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 360px;
  max-width: min(360px, 88vw);
  /* Было слишком прозрачно на стеклянном фоне, из-за чего меню "терялось" */
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  box-shadow: 0 26px 74px rgba(0,0,0,0.75);
  overflow: hidden;
  /* Поверх шапки/карточек, независимо от локальных stacking contexts */
  z-index: 9999;
}
.notifMenuHead{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.notifMenuTitle{
  font-weight: 700;
  font-size: 12px;
  opacity: 0.95;
}
/* Кнопки (Push/Прочитать всё) фиксируем в правом верхнем углу, чтобы не прыгали и не переносились */
.notifMenuActions{
  position: absolute;
  top: 8px;
  right: 8px;
  display:flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.notifMenuActions .btn{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.notifMenuActions .btn:hover{
  background: rgba(255,255,255,0.10);
}
/* Даем заголовку место, чтобы не налезал на кнопки (адаптивно) */
.notifMenuTitle{ padding-right: clamp(110px, 30vw, 160px); }
.notifMenuList{ max-height: 360px; overflow:auto; padding: 10px 10px 6px; }
.notifMenuList::-webkit-scrollbar{ width: 10px; }
.notifMenuList::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 99px; }

.notifItem{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  margin-bottom: 8px;
  cursor: pointer;
}
.notifItem:hover{ background: rgba(0,0,0,0.30); }
.notifItem:focus-visible{ outline: 2px solid rgba(240,140,40,.55); outline-offset: 2px; }
.notifItem.is-unread{
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 3px 0 0 var(--accent);
}
.notifItem__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.notifItem__title{ font-weight: 650; font-size: 12px; line-height: 1.25; }
.notifItem__time{ font-size: 11px; opacity: 0.7; white-space: nowrap; }
.notifItem__body{ margin-top: 6px; font-size: 12px; opacity: 0.9; line-height: 1.35; }

.notifMenuFoot{ padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.notifMenuFoot .hint{ font-size: 11px; opacity: 0.75; }

/* Toasts */
.toastStack{
  position: fixed;
  right: calc(16px + var(--safe-right));
  bottom: calc(16px + var(--safe-bottom));
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 32px);
}
.toast{
  position: relative;
  padding: 12px 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  cursor: pointer;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-hide{ opacity: 0; transform: translateY(8px); }
.toast__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.toast__title{ font-weight: 750; font-size: 12px; }
.toast__time{ font-size: 11px; opacity: 0.7; }
.toast__body{ margin-top: 6px; font-size: 12px; opacity: 0.92; line-height: 1.35; }
.toast__close{
  position:absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  cursor:pointer;
}
.toast__close:hover{ color: rgba(255,255,255,0.95); }
.toast:focus-visible{ outline: 2px solid rgba(240,140,40,.55); outline-offset: 2px; }

@media (max-width: 560px){
  /* On phones: menu becomes a fixed sheet so it never clips inside header/profile blocks */
  .notifMenu{
    position: fixed;
    left: calc(10px + var(--safe-left));
    right: calc(10px + var(--safe-right));
    top: calc(var(--sticky-top) + 10px);
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--sticky-top) - 20px);
    display:flex;
    flex-direction: column;
  }
  @supports (height: 100dvh){
    .notifMenu{ max-height: calc(100dvh - var(--sticky-top) - 20px); }
  }
  .notifMenuList{ max-height: none; flex: 1 1 auto; }

  /* Prevent the last actions/footer from being too close to iOS home indicator */
  .notifMenuFoot{ padding-bottom: calc(12px + var(--safe-bottom)); }

  /* Toasts respect safe areas on notched devices */
  .toastStack{
    left: calc(10px + var(--safe-left));
    right: calc(10px + var(--safe-right));
    bottom: calc(10px + var(--safe-bottom));
    width: auto;
    max-width: none;
  }
}

.hide-sm{ display:inline; }
@media (max-width: 560px){
  .hide-sm{ display:none; }
}

/* Carousel / scroller styles for header rails */
/*
  Реализация через scroll-snap + auto-scroll (JS scrollBy), чтобы:
  - в ленте баз было видно 3 карточки одновременно;
  - промо показывало 1 карточку;
  - при этом пользователь мог скроллить/свайпать вручную.
*/
.railScroller{
  position: relative;
  width: 100%;
  height: 100%;
  /* Center content vertically inside the rail box (prevents cards "sinking") */
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  /* Bases rail uses proximity snap (or none in loop mode). Promo uses mandatory. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.railScroller::-webkit-scrollbar{ display:none; }
.railScroller{ scrollbar-width: none; }

.railTrack{
  align-items: center;
  height: 100%;
  display:flex;
  gap: 10px;
  /* Track width is tied to the scroller viewport so % flex-basis works predictably.
     Scroll width still grows from child items. */
  width: 100%;
  min-width: 100%;
}
.railTrack .railSlide{
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  scroll-snap-align: start;
}

/* Bases: adaptive per-viewport sizing.
   IMPORTANT:
   - We keep the "3 per view" intent on wide screens.
   - On narrower viewports (and also browser zoom), cards should NOT get squashed into tiny squares.
     Instead, we enforce a reasonable minimum width and let the rail scroll horizontally.
*/
.railScroller--bases .railSlide{
  /* default (desktop): ~3 cards per view when space allows */
  /* NOTE: keep a softer minimum so 3 cards can still fit in the header on 1920px
     even when the profile/promo blocks are wide. */
  flex-basis: clamp(216px, calc((100% - 20px) / 3), 520px);
  max-width: clamp(216px, calc((100% - 20px) / 3), 520px);
}
/* When there is only ONE real base this month we add 2 placeholders to keep
   the rail visually consistent (3 slots). In this case the previous min-width
   (240px) often made the 3rd card partially clipped on common desktop widths.
   Reduce the minimum so 3 cards fit more often without requiring a horizontal swipe. */
.railScroller--bases[data-count="1"] .railSlide,
.railScroller--bases[data-count="3"] .railSlide{
  flex-basis: clamp(180px, calc((100% - 20px) / 3), 520px);
  max-width: clamp(180px, calc((100% - 20px) / 3), 520px);
}
/* exactly 2 items: still adaptive, but keep them comfortably wide */
.railScroller--bases[data-count="2"] .railSlide{
  flex-basis: clamp(234px, calc((100% - 10px) / 2), 680px);
  max-width: clamp(234px, calc((100% - 10px) / 2), 680px);
}
/* medium screens: prefer 2 per view, but keep a minimum width */
@media (max-width: 1200px){
  .railScroller--bases .railSlide{
    flex-basis: clamp(198px, calc((100% - 10px) / 2), 520px);
    max-width: clamp(198px, calc((100% - 10px) / 2), 520px);
  }
  .railScroller--bases[data-count="2"] .railSlide{
    flex-basis: clamp(216px, calc((100% - 10px) / 2), 680px);
    max-width: clamp(216px, calc((100% - 10px) / 2), 680px);
  }
}
@media (max-width: 560px){
  /* Override any data-count specific widths on small screens */
  .railScroller--bases .railSlide,
  .railScroller--bases[data-count="1"] .railSlide,
  .railScroller--bases[data-count="2"] .railSlide,
  .railScroller--bases[data-count="3"] .railSlide{
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Container-query responsive behavior for “Базы месяца”.
   Goal: when the available rail width shrinks (including browser zoom), switch from 3→2→1 visible cards,
   instead of clipping the 3rd card.
   Fallback: media queries above already cover many cases; container queries make it correct even on wide screens
   where the header rail itself becomes narrow due to promo/profile widths. */
@supports (container-type: inline-size){
  .headerRailBases{ container-type: inline-size; }

  /* 2-up when the rail container is not wide enough for 3 comfortable cards */
  @container (max-width: 760px){
    .headerRailBases .railScroller--bases .railSlide,
    .headerRailBases .railScroller--bases[data-count="1"] .railSlide,
    .headerRailBases .railScroller--bases[data-count="3"] .railSlide{
      flex-basis: clamp(198px, calc((100% - 10px) / 2), 520px);
      max-width: clamp(198px, calc((100% - 10px) / 2), 520px);
    }
    .headerRailBases .railScroller--bases[data-count="2"] .railSlide{
      flex-basis: clamp(216px, calc((100% - 10px) / 2), 680px);
      max-width: clamp(216px, calc((100% - 10px) / 2), 680px);
    }
  }

  /* 1-up on very narrow rail widths */
  @container (max-width: 520px){
    .headerRailBases .railScroller--bases .railSlide,
    .headerRailBases .railScroller--bases[data-count="1"] .railSlide,
    .headerRailBases .railScroller--bases[data-count="2"] .railSlide,
    .headerRailBases .railScroller--bases[data-count="3"] .railSlide{
      flex-basis: 100%;
      max-width: 100%;
    }
  }
}
.railSlide {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2);
  padding: 9px 11px;
  overflow: hidden;
  min-height: 78px;
  border: 1px solid rgba(255,255,255,.10);
}

/* Bases rail: add a bit of inner padding so card shadows/edges are not clipped by the rail body */
.railScroller--bases{ padding: 4px 4px; }

/* Promo rail remains truly full-bleed */
.railScroller--promo{ padding: 0; scroll-snap-type: x mandatory; }

/* Disable snapping while infinite loop is active to avoid "fighting" auto-scroll */
.railScroller--bases[data-loop="1"]{ scroll-snap-type: none; }

/* Base slides: richer meta layout (title + owner + stats)
   IMPORTANT: keep the frame consistent with the site cards/panels.
   Previous bevel+inner-frame made it look like there is an extra "card" layered on top.
*/
.railScroller--bases .railSlide{
  position: relative;
  display:flex;
  align-items:center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);

  border-radius: var(--radius-2);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);

  /* Softer, single-layer shadow (no "double frame" look). */
  box-shadow:
    0 12px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Subtle facet lighting: only a gentle top highlight + bottom shade.
   No inner pseudo-border (that was read as a second card). */
.railScroller--bases .railSlide:not(.railSlide--skeleton)::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(0deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 62%);
  opacity: .9;
}

.railScroller--bases .railSlide:hover{
  transform: translateY(-1px);
  border-color: rgba(240,140,40,.28);
  box-shadow:
    0 14px 30px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.railScroller--bases .railSlide:active{ transform: translateY(0px) scale(.995); }
.railScroller--bases .railSlide:focus-visible{
  outline: 2px solid rgba(240,140,40,.60);
  outline-offset: 3px;
}

.railScroller--bases .baseInfo{ display:flex; flex-direction:column; min-width:0; gap: 4px; }
.railScroller--bases .railTitle{
  font-weight: 700;
  font-size: 12px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.railScroller--bases .railSub{ font-size: 11px; opacity: .88; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.railScroller--bases .baseOwnerRow{ display:flex; align-items:center; gap: 8px; min-width:0; }
.railScroller--bases .baseOwnerAva{ width: 18px; height: 18px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); }
.railScroller--bases .baseCounts{ display:flex; align-items:center; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; opacity: .86; }
.railScroller--bases .baseCounts .c{ display:inline-flex; align-items:center; gap: 4px; }
.railScroller--bases .baseCounts i{ font-size: 12px; opacity: .9; }

/* Subtle highlighting for top-3 */
.railScroller--bases .railSlide[data-rank="1"]{ border-color: rgba(var(--top1-rgb), .32); box-shadow: 0 12px 26px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--top1-rgb), .12), inset 0 1px 0 rgba(255,255,255,.07); }
.railScroller--bases .railSlide[data-rank="2"]{ border-color: rgba(var(--top2-rgb), .22); box-shadow: 0 12px 26px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--top2-rgb), .10), inset 0 1px 0 rgba(255,255,255,.07); }
.railScroller--bases .railSlide[data-rank="3"]{ border-color: rgba(var(--top3-rgb), .20); box-shadow: 0 12px 26px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--top3-rgb), .10), inset 0 1px 0 rgba(255,255,255,.07); }

.railSlide img.baseCover {
  width: clamp(83px, 10vw, 99px);
  height: auto;
  aspect-ratio: 110 / 78;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
  /* Keep it crisp without heavy shadow (shadows got clipped and looked like an extra layer). */
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Bases rail: placeholders for sparse months (1 base only).
   We render 2 "empty" slides to keep the rail layout stable (no sudden stretch/flicker). */
.railScroller--bases .railSlide--empty{
  cursor: default;
  user-select: none;
  opacity: .75;
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.16);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.railScroller--bases .railSlide--empty::before{ content: none !important; }
.railScroller--bases .railSlide--empty:hover,
.railScroller--bases .railSlide--empty:active{ transform: none; border-color: rgba(255,255,255,.18); }
.railScroller--bases .railSlide--empty .emptySlide__icon{ font-size: 18px; line-height: 1; opacity: .9; }
.railScroller--bases .railSlide--empty .emptySlide__title{ font-weight: 700; font-size: 12px; }
.railScroller--bases .railSlide--empty .emptySlide__hint{ font-size: 11px; opacity: .8; }
.railSlide img.promoImage{
  width: 96px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* Promo slides: full-bleed image with text directly on the image (no "frame"). */
.railScroller--promo .railTrack{ height: 100%; align-items: stretch; }
.railScroller--promo .railSlide--promo{
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  /* Smart frame: boxed by default (black borders ~10-15%).
     Wide banners switch to full-bleed. */
  border: 1px solid rgba(0,0,0,.70);
  background-color: rgba(0,0,0,.78);
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  transition: transform var(--transition-fast), filter var(--transition-fast);
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.railScroller--promo .railSlide--promo .promoMedia{
  position:absolute;
  inset:0;
  z-index: 0;
  background: rgba(0,0,0,.78);
  /* Side black borders are overlays (do not affect layout, do not shrink media). */
  --media-frame: 12%;
  display:block;
}
.railScroller--promo .railSlide--promo .promoImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  position: relative;
  z-index: 0;
  filter: saturate(1.05) contrast(1.03);
}
.railScroller--promo .railSlide--promo.is-wide .promoMedia{ background: rgba(0,0,0,.78); }
.railScroller--promo .railSlide--promo.is-boxed .promoMedia{ background: rgba(0,0,0,.78); }

/* Side borders overlays for boxed promos. */
.railScroller--promo .railSlide--promo.is-boxed .promoMedia::before,
.railScroller--promo .railSlide--promo.is-boxed .promoMedia::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: var(--media-frame);
  z-index: 1;
  pointer-events:none;
}
.railScroller--promo .railSlide--promo.is-boxed .promoMedia::before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.90), rgba(0,0,0,.90) 70%, rgba(0,0,0,0));
}
.railScroller--promo .railSlide--promo.is-boxed .promoMedia::after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.90), rgba(0,0,0,.90) 70%, rgba(0,0,0,0));
}
.railScroller--promo .railSlide--promo::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.16) 55%, rgba(0,0,0,.42) 100%);
  pointer-events: none;
}
.railScroller--promo .railSlide--promo:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.railScroller--promo .railSlide--promo:active{ transform: translateY(0px) scale(.996); }
.railScroller--promo .railSlide--promo:focus-visible{
  outline: 2px solid rgba(240,140,40,.55);
  outline-offset: 3px;
}

.railScroller--promo .promoOverlay{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.railScroller--promo .promoTitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .2px;
}
.railScroller--promo .promoSub{
  font-size: 12px;
  opacity: .92;
  line-height: 1.25;
  max-width: 42ch;
}
.railScroller--promo .promoHint{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  opacity: .92;
}

/* Promo placeholder (when there are no promos yet) */
.railSlide--promoEmpty{
  /* Whole promo block reserved for content: no labels/buttons.
     Keep a subtle decorative placeholder so the rail doesn't look broken. */
  display:block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.14);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(240,140,40,.18), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(120,160,255,.14), rgba(0,0,0,0) 60%),
    rgba(0,0,0,.18);
}
.railSlide--promoEmpty::before{ content: none !important; }
.railSlide--promoEmpty .promoEmpty__icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 22px;
  flex: 0 0 auto;
}
.railSlide--promoEmpty .promoEmpty__manage{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(240,140,40,.24);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  color: var(--text900);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  width: fit-content;
}
.railSlide--promoEmpty .promoEmpty__manage:hover{ border-color: rgba(240,140,40,.36); background: rgba(0,0,0,.28); }
.railSlide--promoEmpty .promoEmpty__manage:active{ transform: translateY(1px); }
.railSlide .baseInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.railSlide .baseOwnerRow{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}
.railSlide .baseOwnerAva{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
}
.railSlide .baseCounts{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 11px;
  opacity: .86;
}
.railSlide .baseCounts .c{
  display:inline-flex;
  align-items:center;
  gap: 4px;
}
.railSlide .baseCounts i{ font-size: 12px; opacity: .9; }
.railSlide .baseOwner {
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.railSlide .baseScore {
  font-size: 11px;
  opacity: 0.8;
}
/* Rank badge (header bases rail): single badge layer (avoid nested frames) */
.railScroller--bases .railBadge .rankBadge{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .2px;
  background: none;
  border: 0;
  color: rgba(255,255,255,.92);
  padding: 0;
  margin: 0;
}
.railScroller--bases .railSlide[data-rank="1"] .railBadge{ border-color: rgba(var(--top1-rgb), .22); }
.railScroller--bases .railSlide[data-rank="2"] .railBadge{ border-color: rgba(var(--top2-rgb), .18); }
.railScroller--bases .railSlide[data-rank="3"] .railBadge{ border-color: rgba(var(--top3-rgb), .18); }
.railScroller--bases .railSlide[data-rank="1"] .railBadge .rankBadge{ color: rgb(var(--top1-rgb)); }
.railScroller--bases .railSlide[data-rank="2"] .railBadge .rankBadge{ color: rgb(var(--top2-rgb)); }
.railScroller--bases .railSlide[data-rank="3"] .railBadge .rankBadge{ color: rgb(var(--top3-rgb)); }

/* Skeleton: keep it lightweight and avoid bevel pseudo-elements */
.railScroller--bases .railSlide--skeleton{
  background: rgba(255,255,255,.04) !important;
  border-style: dashed !important;
  box-shadow: none !important;
}
.railScroller--bases .railSlide--skeleton::before,
.railScroller--bases .railSlide--skeleton::after{ content: none !important; }

/* Lightweight skeleton placeholders for the bases rail */
.railSlide--skeleton{ background: rgba(255,255,255,.04); border-style: dashed; }
.railSlide--skeleton .sk{ background: rgba(255,255,255,.08); border-radius: 8px; }
.railSlide--skeleton .sk--cover{ width:110px; height:78px; border-radius: 6px; }
.railSlide--skeleton .sk--ava{ width:18px; height:18px; border-radius: 999px; }
.railSlide--skeleton .sk--line{ height: 10px; border-radius: 999px; }
.railSlide--skeleton .sk--pill{ height: 12px; border-radius: 999px; }
.railSlide--skeleton .sk--w80{ width: 80%; }
.railSlide--skeleton .sk--w55{ width: 55%; }
.railSlide--skeleton .sk--w30{ width: 30px; }
.railSlide--skeleton .sk--w25{ width: 25px; }
.railControl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.railControl:hover {
  background: rgba(0, 0, 0, 0.6);
}
.railPrev {
  left: 4px;
}
.railNext {
  right: 4px;
}

/* ====================================================================
 * Player Base Albums (Базы) UI styles
 *
 * Custom styles for the albums listing and detail pages.  Follows the
 * existing dark glass aesthetic with rounded corners and subtle
 * borders.  Cards display preview images, owner name and score.
 */
.baseCard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  transition: background 0.15s ease;
  position: relative;
}
.baseCard:hover {
  background: rgba(255, 255, 255, 0.08);
}
.baseCard__rank{
  position:absolute;
  top:10px;
  left:10px;
  z-index: 4;
  padding: 4px 8px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--text900);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  pointer-events:none;
}

.baseCard__cover{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 8px 8px 0 0;
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
.baseCard__cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.baseCard__body {
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
.baseCard__title {
  /* Allow titles to wrap onto two lines without breaking the layout.
     Use a multi‑line clamp so longer titles do not overflow cards. */
  font-size: 14px;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  margin: 0;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.baseCard__title a {
  color: inherit;
  text-decoration: none;
}
.baseCard__title a:hover {
  text-decoration: underline;
}
.baseCard__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  opacity: 0.8;
}
.baseCard__owner {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.baseCard__score {
  flex: 0 0 auto;
  margin-left: auto;
}

.baseCard__ownerRow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  min-height: 26px;
  opacity:.88;
}
.baseCard__ava{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.baseCard__roommates{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.baseCard__rmStack{
  display: inline-flex;
  align-items: center;
}
.baseCard__rmAva{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  margin-left:-6px;
}
.baseCard__rmAva:first-child{ margin-left:0; }
.baseCard__rmMore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:0 6px;
  margin-left:4px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text900);
}
.baseCard__counts{
  display:flex;
  gap:8px;
  margin-top: auto;
  padding-top: 6px;
  font-size:12px;
  opacity:.85;
}
.baseCard__counts .c{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}

.basesFilters{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.basesPager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.basesWinnersGrid,
.basesTopGrid,
.basesListGrid {
  display: grid;
  /* Prevent overly narrow cards on mid screens / browser zoom.
     Narrow cards make covers look "square" and can overflow borders when content wraps. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.basesWinners,
.basesTop,
.basesList {
  margin-bottom: 24px;
}

/* Compact pill variant (used on Base hero overlay) */
.pill--sm{
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.1;
  border-radius: 999px;
}


/* Base detail (view) page: meta + votes blocks */
.baseView__meta{
  display:grid;
  gap:6px;
  padding: 10px 12px;
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
  font-size: 12px;
}
.baseView__votes{
  padding: 10px 12px;
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
}
.votesCount{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}
.votesActions{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.baseView__info p{ margin: 0 0 8px; }
.baseView__roommates h3{ margin: 10px 0 6px; font-size: 13px; font-weight: 900; }

/* Base view page */
.baseView {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.baseView__gallery {
  flex: 1 1 320px;
}
.baseGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.baseGallery__item {
  flex: 0 0 auto;
  width: clamp(130px, 22vw, 180px);
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.baseGallery__item:hover{
  transform: translateY(-1px);
  border-color: rgba(240,140,40,.35);
  background: rgba(0,0,0,.22);
}
.baseGallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.baseView__info {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.baseView__tags .tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 4px;
}
.roommateList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.roommateList li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.roommateAvatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ====================================================================
 * Base detail (v2): hero + thumbs + sticky info
 */
.basePage{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .basePage{ grid-template-columns: 1fr; }
}

.basePage__media{ min-width: 0; }
.basePage__info{ min-width: 0; }

.baseHero{
  position: relative;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.baseHero__img{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
}
.baseHero__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.baseHeroNav{
  position:absolute;
  top:50%;
  transform: translateY(-50%) scale(.96);
  width:44px;
  height:44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 3;
  opacity: 0;
  pointer-events:none;
  transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.baseHero:hover .baseHeroNav,
.baseHero:focus-within .baseHeroNav{
  opacity: 1;
  pointer-events:auto;
  transform: translateY(-50%) scale(1);
}
.baseHeroNav--prev{ left:10px; }
.baseHeroNav--next{ right:10px; }
.baseHeroNav:hover{
  background: rgba(0,0,0,.58);
  border-color: rgba(240,140,40,.35);
}
.baseHeroNav:active{ transform: translateY(-50%) scale(.98); }
.baseHeroNav:focus-visible{
  outline: 2px solid rgba(240,140,40,.75);
  outline-offset: 2px;
}
@media (max-width: 560px){
  .baseHeroNav{ width:38px; height:38px; }
}
@media (hover: none), (pointer: coarse){
  .baseHeroNav{
    opacity: .92;
    pointer-events:auto;
    transform: translateY(-50%) scale(1);
  }
}
.baseHero__overlay{
  position:absolute;
  inset:auto 10px 10px 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  pointer-events:none;
}
.baseHero__owner{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  font-weight: 900;
  font-size: 12px;
  color: var(--text900);
}
.baseHero__ava{
  width:22px; height:22px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
}
.baseHero__badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 520px){
  .baseHero__overlay{ inset:auto 8px 8px 8px; }
  .baseHero__owner{ padding: 5px 8px; font-size: 11px; }
  .baseHero__badges{ gap:5px; }
}
@media (max-width: 420px){
  .baseHero__overlay{ flex-direction: column; align-items:flex-start; }
  .baseHero__badges{ justify-content:flex-start; }
}

.baseThumbs{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  overflow-x:auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.baseThumb{
  display:block;
  flex: 0 0 auto;
  width: clamp(104px, 14vw, 160px);
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: zoom-in;
  scroll-snap-align: start;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
@media (max-width: 560px){
  .baseThumb{ width: clamp(96px, 36vw, 150px); }
}
.baseThumb:hover{
  transform: translateY(-1px);
  border-color: rgba(240,140,40,.35);
  background: rgba(0,0,0,.22);
}
.baseThumb.is-active{
  border-color: rgba(240,140,40,.55);
  box-shadow: 0 0 0 2px rgba(240,140,40,.16) inset;
}
.baseThumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.baseInfoCard{
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
@media (min-width: 981px){
  .basePage__info .baseInfoCard{
    position: sticky;
    top: calc(var(--sticky-top) + 14px);
  }
}

.baseInfoCard__desc{ font-size: 13px; line-height: 1.45; }
.baseInfoCard__tags .tag{ margin-right: 6px; margin-bottom: 6px; }

.baseMeta{
  display:grid;
  gap: 6px;
  padding: 10px 12px;
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.16);
  font-size: 12px;
}

.baseVotes{
  padding: 10px 12px;
  border:1px solid var(--border);
  border-radius: var(--r);
  background: rgba(0,0,0,.14);
}
.baseVotes__count{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
}
.baseVotes__count .v{ display:inline-flex; align-items:center; gap: 6px; }
.baseVotes__actions{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.baseVoteBtn.is-active{
  border-color: rgba(240,140,40,.55) !important;
  background: rgba(240,140,40,.12) !important;
}

.baseActions{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.baseRoommates h3{ margin: 6px 0 6px; font-size: 13px; font-weight: 1000; }

/* Base lightbox (modal gallery) */
.baseLb__dialog{
  width: min(1100px, calc(100vw - 28px));
}
.baseLb__content{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
.baseLb__img{
  max-width: 100%;
  max-height: calc(100vh - var(--sticky-top) - 170px - var(--safe-bottom));
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
@supports (height: 100dvh){
  .baseLb__img{ max-height: calc(100dvh - var(--sticky-top) - 170px - var(--safe-bottom)); }
}
.baseLb__counter{ opacity: .75; font-weight: 800; font-size: 12px; margin-left: 6px; }
.baseLb__tools{ display:flex; align-items:center; gap:8px; }
.baseLb__tools .btn{ padding: 8px 10px; min-height: 34px; }
.baseLb__zoomTools{ display:inline-flex; align-items:center; gap:8px; }
.baseLb__thumbs{ display:flex; gap:8px; padding: 10px 12px 14px; overflow-x:auto; scrollbar-width: thin; }
.baseLb__thumb{ width:72px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); padding:0; cursor:pointer; flex:0 0 auto; overflow:hidden; }
.baseLb__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.baseLb__thumb.is-active{ border-color: rgba(240,140,40,.55); box-shadow: 0 0 0 2px rgba(240,140,40,.18) inset; }
.baseLb__thumb:hover{ border-color: rgba(240,140,40,.35); }
.baseLb__thumb:focus-visible{ outline:2px solid rgba(240,140,40,.55); outline-offset:2px; }
.baseLb__img{ touch-action: pan-y; cursor: default; }
#baseLightbox.baseLb--zoom .baseLb__img{ touch-action: none; cursor: grab; }
#baseLightbox.baseLb--zoom .baseLb__img.is-panning{ cursor: grabbing; }
.baseLb__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  color: var(--text900);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.baseLb__nav:hover{ border-color: rgba(240,140,40,.35); background: rgba(0,0,0,.42); transform: translateY(-50%) scale(1.02); }
.baseLb__nav:active{ transform: translateY(-50%) scale(.98); }
.baseLb__nav--prev{ left: 10px; }
.baseLb__nav--next{ right: 10px; }
@media (max-width: 520px){
  .baseLb__nav{ width: 40px; height: 40px; font-size: 24px; }
  .baseLb__img{ max-height: calc(100vh - var(--sticky-top) - 200px - var(--safe-bottom)); }
  @supports (height: 100dvh){
    .baseLb__img{ max-height: calc(100dvh - var(--sticky-top) - 200px - var(--safe-bottom)); }
  }
  .baseLb__thumb{ width:64px; height:40px; border-radius:10px; }
}


/* ------------------------------
   Promo rail (right)
   ------------------------------ */
.headerRailPromo.is-hidden{ display:none; }
.railSlide--promo{
  text-decoration:none;
  color: inherit;
  position: relative;
  overflow:hidden;
  padding: 0;
  border-radius: 18px;
}
.railSlide--promo .promoImage{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.railSlide--promo .railMeta{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.railSlide--promo .railTitle{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 3px;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.railSlide--promo .railSub{
  font-size: 12px;
  opacity: .9;
  margin-bottom: 8px;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.railSlide--promo .promoCta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
}


/* ------------------------------
   Home viewport alignment (desktop)
   UX target:
   - Main grid ends exactly at the bottom of the viewport.
   - Footer is BELOW the screen (reachable by scrolling the page).
   Implementation:
   - JS sets :root --home-header-h (measured height of header.topbar).
   - main.wrap height = 100vh - header height.
   - All scrolling remains inside panels.
   ------------------------------ */
@media (min-width: 981px){
  /* Let the document grow so the footer can sit below the fold */
  body.page-home{ min-height: auto; display:block; }

  body.page-home main.wrap{
    height: calc(100vh - var(--home-header-h, 0px));
    min-height: 0;
    margin: 0 auto; /* keep centered max-width, remove outer gaps */
    padding: var(--page-gap-top) var(--page-pad-x) 0;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    overflow: hidden;
  }

  body.page-home main.wrap > .grid{
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }

  body.page-home .grid > section.stack,
  body.page-home .grid > aside.stack{ height: 100%; min-height: 0; }

  body.page-home .grid > aside.stack{ display:flex; flex-direction:column; }

  body.page-home .homeMainGrid{ height: 100%; min-height: 0; align-items: stretch; }

  body.page-home .homeMainGrid > section.panel{ min-height: 0; display:flex; flex-direction:column; }

  /* By default, panel body scrolls internally on the first screen (news, etc.) */
  body.page-home .homeMainGrid > section.panel > .panel-body{ flex: 1 1 auto; min-height: 0; overflow:auto; }

  /* WebChat: keep panel body fixed, only the list scrolls (composer stays visible) */
  body.page-home .webchatPanel > .panel-body{ overflow:hidden; display:flex; flex-direction:column; min-height:0; }
  body.page-home .webchat{ flex: 1 1 auto; min-height: 0; height:100%; overflow:hidden; }
  body.page-home .webchat__list{ flex: 1 1 auto; min-height: 0; height: auto; overflow:auto; }
  body.page-home .webchat__composer{ flex: 0 0 auto; }

  /* Sidebar: monitoring panel grows, list scrolls */
  body.page-home aside.stack > section.panel:first-child{
    flex: 1 1 auto;
    min-height: 0;
    display:flex;
    flex-direction:column;
  }
  body.page-home aside.stack > section.panel:first-child > .panel-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.page-home .telemetryList{ flex: 1 1 auto; min-height: 0; overflow:auto; max-height:none; scrollbar-gutter: stable; overscroll-behavior: contain; }
}


/*
 * Custom tweaks for the base carousel and chat layout.
 *
 * These styles improve readability of the “Базы месяца” rail by giving
 * more consistent spacing, multi‑line truncation for titles and a
 * subtle badge for ranks.  They also ensure that the webchat history
 * takes up all available space inside the panel on large screens so
 * the composer stays anchored at the bottom without the entire panel
 * scrolling.
 */

/* Base rail meta layout: moved to the main rail section above.
   Keep only the badge positioning here (used by both real slides and skeletons). */
/* Rank badge in the base rail */
.railScroller--bases .railBadge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
}

/* Webchat: on desktop the list fills the available height and scrolls internally */
@media (min-width: 981px) {
  .homeMainGrid .webchat {
    flex: 1 1 auto;
    min-height: 0;
  }
  .homeMainGrid .webchat__list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* ====================================================================
 * Base roommates (invites) + Profile invites tab
 */
.pTabBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(240,140,40,.16);
  border: 1px solid rgba(240,140,40,.32);
  color: var(--text900);
  font-size: 12px;
  font-weight: 950;
  line-height: 18px;
  vertical-align: middle;
}

.baseInviteList{ display:flex; flex-direction:column; gap: 10px; }
.baseInviteRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.baseInviteRow__img{ width: 84px; height: 52px; border-radius: 12px; overflow:hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
.baseInviteRow__img img{ width:100%; height:100%; object-fit: cover; display:block; }
.baseInviteRow__main{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.baseInviteRow__title{ font-weight: 950; letter-spacing: .2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.baseInviteRow__meta{ font-size: 12px; color: var(--text700); font-weight: 800; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.baseInviteActions{ margin-left:auto; display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end; }

.roommateSection{ margin-top: 12px; }
.roommateSection h3{ margin: 0 0 8px 0; font-size: 14px; font-weight: 950; }
.roommateNote{ font-size: 12px; color: var(--text700); margin-top: 6px; }
.roommateList li{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 8px;
}
.roommateList .rmRole{ margin-left: 4px; }
.roommateList .rmActions{ margin-left: 6px; display:flex; gap: 6px; }
.roommateList .rmActions .btn{ padding: 5px 8px; }

.roommateInviteForm{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.roommateInviteForm input{
  flex: 1 1 320px;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--control-border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.roommateInviteForm input:focus{ outline: none; border-color: var(--control-accent-border-active); }

/* ==============================
   Responsive phase 3 — Bases/Promo cards + admin forms + local table scrolling
   (non-breaking, monitoring sidebar untouched)
   ============================== */

.baseCard__meta{ gap: 10px; min-width: 0; }
.baseCard__counts{ flex-wrap: wrap; }
.baseCard__counts .c{ white-space: nowrap; }

@media (max-width: 720px){
  .basesWinnersGrid,
  .basesTopGrid,
  .basesListGrid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .baseCard__body{ padding: 10px; gap: 6px; }
  .baseCard__ownerRow{ flex-wrap: wrap; }
}
@media (max-width: 420px){
  .basesWinnersGrid,
  .basesTopGrid,
  .basesListGrid{ grid-template-columns: 1fr; }
}

.railScroller--promo .promoTitle{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.railScroller--promo .promoSub{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 520px){
  .railScroller--promo .promoOverlay{ left: 12px; right: 12px; bottom: 12px; }
  .railScroller--promo .railSlide--promo .promoMedia{ --media-frame: 10%; }
  .railScroller--promo .promoTitle{ font-size: 13px; }
  .railScroller--promo .promoSub{ font-size: 12px; max-width: 32ch; }
}
@media (max-width: 390px){
  .railScroller--promo .promoSub{ display:none; }
}

/* Auto table scroll wrapper (public + admin): used by JS */
.tableScroll{
  width:100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.12);
  scrollbar-gutter: stable both-edges;
}
.tableScroll > table{
  width: max-content;
  min-width: 100%;
}
.tableScroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tableScroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.tableScroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.tableScroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.14); border-radius: 999px; }


/* ==============================
   Responsive phase 4 — overlays + safe-area + mobile market
   Goal:
   - eliminate remaining "clipping" on phones (dropdowns/modals)
   - better iOS viewport behavior (dvh + safe-area)
   - remove horizontal scrolling UX on market mobile by stacking rows
   ============================== */

/* Market: stacked view for narrow/medium screens (no horizontal scroll required) */
@media (max-width: 820px){
  html.page-market .marketAll{ overflow: visible; }
  html.page-market .marketAllHead{ display:none; min-width: 0; }
  html.page-market .marketAllBody{ min-width: 0; padding: 10px; }
  html.page-market .marketAllRow{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 10px;
  }
  html.page-market .marketAllRow .c{ width: 100%; }
  html.page-market .marketAllRow .c--seller{ justify-content: space-between; }
  html.page-market .marketAllRow .c--grid{ justify-content: flex-start; gap: 8px; }
  html.page-market .marketAllRow .t .l1,
  html.page-market .marketAllRow .t .l2{ white-space: normal; }
}