:root {
  --elo-bg: #182027;
  --elo-surface: #222b32;
  --elo-raised: #303a41;
  --elo-control: #354047;
  --elo-text: #f3f2e8;
  --elo-muted: #c2c9ca;
  --elo-orange: #d9b977;
  --elo-orange-hi: #f0ce89;
  --elo-orange-line: #e4be764f;
  --elo-orange-tint: #dcba7826;
  --elo-action: linear-gradient(125deg,#7a9b51,#506f37);
  --elo-card: linear-gradient(145deg,#29343c,#212930);
  --elo-promo: linear-gradient(120deg,#3f453d,#313831);
  --dashboard-line: #e9f4ff22;
  --dashboard-gold: #efd39b;
  --client-header: 57px;
}

html, body { background: #192127; }
body { padding: 0; color: var(--elo-text); }
.launcher-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  max-width: none;
  background: radial-gradient(ellipse at 12% 0%,#3c4b4e,#222d34 45%,#192127 86%);
  border-radius: 0;
  box-shadow: none;
}
body .launcher-shell .sidebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  position: sticky;
  z-index: 32;
  inset: 0 auto auto;
  width: 100%;
  height: var(--client-header);
  margin: 0;
  padding: 0 clamp(7px,1.6vw,26px);
  overflow: visible;
  background: #192228f5;
  border: 0;
  border-bottom: 1px solid #acb3ad36;
  border-radius: 0;
}
body .launcher-shell .sidebar nav {
  display: flex;
  flex: 1;
  justify-content: start;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
body .launcher-shell .sidebar .nav:not(.mobile-chat-nav), body .launcher-shell .sidebar .mobile-chat-nav {
  width: auto;
  flex: none;
  min-height: 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 7px;
  border-radius: 0;
  color: #cad1d0;
  white-space: nowrap;
}
body .launcher-shell .sidebar .nav span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
body .launcher-shell .sidebar .nav .nav-features-short,
body .launcher-shell .sidebar .nav small { display: none; }
body .launcher-shell .sidebar .nav svg { width: 16px; height: 16px; }
body .launcher-shell .sidebar .nav.active {
  color: #f0d197;
  background: linear-gradient(0deg,#d8b77024,transparent);
  box-shadow: inset 0 -2px #dfbf80;
}
body .launcher-shell .sidebar .nav.active::before { display: none; }
body .launcher-shell .sidebar-bottom { display: flex; margin: 0 0 0 auto; padding: 0; }
body .launcher-shell .sidebar-bottom .nav:not(.mobile-chat-nav) { padding: 0 8px; }
body .launcher-shell .sidebar-bottom .nav span { display: none; }
.dashboard-wordmark {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex: none;
  margin: 0 13px 0 0;
  gap: 7px;
  color: #f4f3ed;
  font: 900 18px/1 Manrope,sans-serif;
  letter-spacing: -.045em;
}
.dashboard-wordmark img { width: 29px; height: 29px; }
.dashboard-wordmark span { display: inline; }
.dashboard-wordmark b { color: #e5c184; }

body .launcher-shell .app > .topbar {
  position: static;
  height: 53px;
  min-height: 0;
  padding-block: 6px;
  background: #20292f;
  border-color: #d1ddeb19;
  gap: 8px;
}
.launcher-shell .topbar .launcher-brand { display: none; }
.launcher-shell .quick-search { max-width: 330px; background: #151e24; border-color: #c5d3d72a; border-radius: 4px; }
.launcher-shell .quick-search input { height: 31px; }
.launcher-shell .site-online { background: #27383a; border-radius: 4px; }
.launcher-shell .top-actions .vk-login, .launcher-rail .chat-login-block .vk-login {
  background: #3a474e;
  color: #f0f2ed;
  border: 1px solid #d6e0dc2a;
  border-radius: 4px;
}
.launcher-shell .steam-login-icon, .launcher-rail .steam-login-icon { filter: none; }

@media (min-width: 651px) {
  .launcher-shell {
    grid-template-columns: minmax(0,1fr) clamp(185px,22vw,320px);
    --launcher-gutter: clamp(10px,1.65vw,28px);
  }
  body .launcher-shell .sidebar .mobile-chat-nav { display: none; }
  body .launcher-shell .launcher-rail {
    top: var(--client-header);
    height: calc(100dvh - var(--client-header));
    margin: 0;
    border: 0;
    border-left: 1px solid var(--dashboard-line);
    border-radius: 0;
    background: #202930;
  }
}
@media (max-width: 850px) {
  .dashboard-wordmark span { display: none; }
  .dashboard-wordmark { margin-inline-end: 3px; }
  body .launcher-shell .sidebar .nav:not(.mobile-chat-nav), body .launcher-shell .sidebar .mobile-chat-nav { padding-inline: 8px; }
  body .launcher-shell .sidebar .nav span { font-size: 10px; }
}

body .launcher-shell .play-first-row { grid-template-columns: minmax(0,1fr); gap: 10px; }
.client-lobby {
  min-width: 0;
  position: relative;
  min-height: clamp(380px,40vw,550px);
  display: flex;
  align-items: end;
  isolation: isolate;
  border: 1px solid #d7dfda33;
  background: linear-gradient(90deg,#172026fa,#202a2ab3 40%,transparent 74%),
    linear-gradient(0deg,#121a20e0,transparent 64%),url('/assets/img/client-lobby.webp') right center / cover;
}
.client-lobby[hidden] { display: none; }
.client-lobby-content { width: min(100%,550px); padding: clamp(14px,2.8vw,40px); }
.client-lobby-kicker { color: #e8c98e; font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.client-lobby h1 { margin: 4px 0 5px; font: 850 clamp(35px,5vw,72px)/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: -.05em; }
.client-lobby p { color: #e1e6df; font-size: 13px; }
.client-modes { margin: 20px 0 15px; padding: 0; border: 0; min-width: 0; }
.client-modes legend { margin-bottom: 7px; font-weight: 800; font-size: 12px; text-transform: uppercase; color: #ede4cf; }
.client-mode-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.client-mode {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 67px;
  padding: 5px;
  isolation: isolate;
  cursor: pointer;
  border: 1px solid #bdc8c944;
  color: #e9eeeb;
  background: #24333b;
}
.client-mode input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.client-mode img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.client-mode::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#101719,#10171931 86%); }
.client-mode strong { pointer-events: none; font-size: 11px; line-height: 1.2; }
.client-mode:has(input:checked) { border-color: #edc783; box-shadow: inset 0 -2px #edc783; color: #ffe0a3; }
.client-mode:has(input:focus-visible) { outline: 2px solid #f3d18d; outline-offset: 2px; }
.client-launch { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.client-selection { display: grid; gap: 1px; min-width: 110px; }
.client-selection span { font-size: 10px; color: #ced8d9; }
.client-selection strong { font-size: 14px; }
.client-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 19px;
  min-width: 128px;
  border: 1px solid #a4bc7e80;
  background: #698445;
  color: white;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}
.client-play:hover { background: #789750; }
.client-play svg { width: 15px; height: 15px; }

.launcher-shell .arcade-side { display: grid; grid-template-columns: minmax(140px,24%) minmax(0,1fr); align-items: start; }
.launcher-shell .servers-only .arcade-side { display: block; }
.launcher-shell .launcher-promo-summary { min-height: 58px; }
body .launcher-shell .arcade-side .frag-promo,
body .launcher-shell .compact-servers .server-card,
body .launcher-shell :is(.match-card,.match-bet-panel,.cap-card,.restore,.home-match),
body .launcher-shell #quest-section {
  background: var(--elo-card);
  border-color: var(--dashboard-line);
  border-radius: 4px;
}
body .launcher-shell .arcade-side .frag-promo[hidden] { display: none; }
body .launcher-shell .compact-servers { padding: 0; }
.launcher-shell .compact-servers .server-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body .launcher-shell .compact-servers .card-actions .primary { background: #455b40; color: #e9f1df; }
.launcher-shell .launcher-promo-summary strong { color: #e4cb98; }
.launcher-shell .launcher-promo-summary small { color: #d2d7cf; }
.pass-panel { background: var(--elo-card); border-radius: 4px; }
.pass-overview :is(.pass-progress,.pass-stat), .pass-missions li, .track-reward, .track-labels { background: #202930; }
.track-labels > b { background: #36464e; }
.track-labels > b:last-child, .track-reward:last-child, .pass-premium { background: #484235; }
.track-level.track-next > b { background: #e5c68a; color: #292819; }
.track-reward > span, .track-reward .dash-icon { color: #e7d3a8; }
.pass-progress progress::-webkit-progress-value { background: #d9b977; }
.pass-progress progress::-webkit-progress-bar { background: #465259; }
.track-controls button { background: #39454d; border-radius: 4px; }
body #quest-section .quest, body dialog { background: #222d34; border-color: var(--dashboard-line); border-radius: 4px; }
body #quest-section :is(.quest-vk,.reward-opt.is-active) { background: #404b3e; color: #f1e2ba; }
body .launcher-rail .chat-panel { background: #202930; }
.launcher-community-head,.dashboard-chat-title { background: #2b353d; }
.launcher-community-head svg,.dashboard-chat-title svg { color: #e6c78c; }
body .launcher-rail .chat-panel .roulette { background: #303a40; scrollbar-color: #758185 #2d383f; }
body .launcher-rail .chat-messages { background: #1e272e; scrollbar-color: #617077 #202930; }
body .launcher-rail .chat-panel .message { background: #2a353d; border-radius: 4px; }
body .launcher-rail .chat-panel .message:nth-of-type(even) { background: #253139; }
body .launcher-rail .chat-panel .message.mine { background: #374548; }
body .launcher-rail .chat-panel .message-name { color: #e8d3aa; }
body .launcher-rail .chat-panel .message-time { color: #bcc8cc; }
body .launcher-rail .chat-panel .message-body { color: #e9eeeb; }
body .launcher-rail .chat-panel .message-quote, .launcher-rail .chat-input-area textarea { background: #202b33; }
body .launcher-rail .chat-panel .chat-input-area, .launcher-rail .chat-login-block { background: #27323a; }

@media (max-width: 650px) {
  :root { --client-header: 48px; }
  body .launcher-shell .sidebar-bottom { display: none; }
  body .launcher-shell .sidebar .nav:not(.mobile-chat-nav), body .launcher-shell .sidebar .mobile-chat-nav { gap: 4px; padding-inline: 6px; }
  body .launcher-shell .sidebar .nav svg { width: 13px; height: 13px; }
  body .launcher-shell .app > .topbar { flex-wrap: nowrap; }
  .launcher-shell .quick-search { order: 0; flex-basis: 100px; margin: 0; }
  .client-lobby { min-height: 345px; background-position: 68% center; }
  .launcher-shell .arcade-side { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 651px) and (max-width: 920px) {
  .launcher-shell .arcade-side { grid-template-columns: minmax(0,1fr); }
}