/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Theme tokens, reset, utilities and base typography
 * Source lines: 1-320
 */

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

/* Theme variables */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

: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;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 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;
}