/* =====================================================================
   DOTA 2 · MAIN MENU THEME  (последний слой — переопределяет всё остальное)
   ===================================================================== */
:root {
  --bg-0: #08090b; --bg-1: #0e1013; --bg-2: #15181d; --bg-3: #1d2128;
  --line: rgba(212, 196, 160, .10); --line-strong: rgba(222, 200, 150, .26);
  --text: #ebe7de; --text-dim: #a8a396; --text-faint: #716e64;
  --radiant: #e3bd6a; --dire: #d8402e; --gold: #f0cf84; --ok: #7bd35a;
  --glow-radiant: 0 0 22px rgba(227, 189, 106, .28);
  --glow-dire: 0 0 22px rgba(216, 64, 46, .38);
  --glow-gold: 0 0 22px rgba(240, 207, 132, .28);
  --font-display: "Radiance", "Reaver", "Bahnschrift", "Segoe UI Semibold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px;
  --gold-line: linear-gradient(90deg, transparent, rgba(227, 189, 106, .75) 20%, rgba(255, 232, 170, .95) 50%, rgba(227, 189, 106, .75) 80%, transparent);
  --panel: linear-gradient(180deg, rgba(31, 34, 40, .93), rgba(15, 17, 21, .95));
  --bevel: inset 0 1px 0 rgba(255, 240, 200, .07), inset 0 0 0 1px rgba(0, 0, 0, .55);
}

/* ---------- фон: тёмный графит, виньетка, угли ---------- */
html { background: #08090b; }
body { background: #08090b; color: var(--text); font-size: 14px; user-select: auto; }
body::before {
  background:
    radial-gradient(1200px 520px at 50% -12%, rgba(227, 189, 106, .13), transparent 62%),
    radial-gradient(900px 640px at 108% 112%, rgba(216, 64, 46, .20), transparent 62%),
    radial-gradient(760px 560px at -8% 105%, rgba(70, 120, 90, .10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #101215 0%, #090a0c 55%, #060708 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .65) 100%);
}
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .75; }
.bg-fx i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #ffb15a; box-shadow: 0 0 8px 2px rgba(255, 140, 50, .65);
  animation: ember linear infinite;
}
.bg-fx i:nth-child(1) { left: 8%;  animation-duration: 17s; animation-delay: -2s; }
.bg-fx i:nth-child(2) { left: 19%; animation-duration: 23s; animation-delay: -9s;  width: 2px; height: 2px; }
.bg-fx i:nth-child(3) { left: 31%; animation-duration: 19s; animation-delay: -14s; }
.bg-fx i:nth-child(4) { left: 46%; animation-duration: 26s; animation-delay: -5s;  width: 2px; height: 2px; }
.bg-fx i:nth-child(5) { left: 58%; animation-duration: 21s; animation-delay: -11s; }
.bg-fx i:nth-child(6) { left: 69%; animation-duration: 28s; animation-delay: -18s; width: 4px; height: 4px; }
.bg-fx i:nth-child(7) { left: 81%; animation-duration: 18s; animation-delay: -7s;  width: 2px; height: 2px; }
.bg-fx i:nth-child(8) { left: 93%; animation-duration: 24s; animation-delay: -3s; }
@keyframes ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: .9; }
  60% { opacity: .5; }
  100% { transform: translate(40px, -105vh) scale(.3); opacity: 0; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
a { color: var(--radiant); text-underline-offset: 4px; }
a:hover { color: var(--gold); }
::selection { background: rgba(227, 189, 106, .35); color: #fff; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .35); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6e5a30, #3d3320); border: 2px solid #0c0d10; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a98a47, #5b4a28); }

/* ---------- каркас ---------- */
#app { grid-template-columns: 286px minmax(0, 1fr); grid-template-rows: 66px minmax(0, 1fr); }
body.guest #app, body.guest.demo-mode #app { grid-template-columns: minmax(0, 1fr); }
body.guest .sidebar, body.guest.demo-mode .sidebar { display: none; }

/* ---------- верхняя панель (как в главном меню) ---------- */
.titlebar {
  position: relative; z-index: 20; gap: 0; padding: 0 20px 0 22px;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, .06), transparent 40%),
    linear-gradient(180deg, #181a1f 0%, #0c0d10 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .6);
  backdrop-filter: none;
}
.titlebar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-line); opacity: .8; pointer-events: none; }
.titlebar__drag { display: none; }
.titlebar__brand {
  display: flex; align-items: center; gap: 14px; padding-right: 26px; margin-right: 8px;
  color: var(--text); text-decoration: none; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .16em; line-height: 1.1;
  border-right: 1px solid var(--line); height: 100%; white-space: nowrap;
}
.brand-subtitle { display: block; margin-top: 5px; font-size: 8.5px; letter-spacing: .34em; color: var(--radiant); font-weight: 600; }
.logo {
  position: relative; display: block; flex: none; width: 30px; height: 34px; border-radius: 0; transform: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #f6dc9a, #8a6428 60%, #f0cf84); box-shadow: none;
}
.logo::after {
  content: ""; position: absolute; inset: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 38%, #f0603a 0%, #a52a18 48%, #3a0d08 100%);
}
.logo::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg); background: linear-gradient(135deg, #ffe9b0, #c9922f); }

/* навигация — прямо в шапке */
.titlebar .nav {
  flex: 1; min-width: 0; align-self: stretch; flex-direction: row; align-items: stretch; gap: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.titlebar .nav::-webkit-scrollbar { display: none; }
.nav-caption { display: none; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 0 15px; border: 0; border-radius: 0; background: transparent;
  color: var(--text-dim); text-decoration: none; text-transform: uppercase;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  transition: color .15s, background .2s, text-shadow .2s;
}
.nav a::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, var(--red-2), #ffcf7a, var(--red-2)); box-shadow: 0 0 14px rgba(255, 170, 80, .8); transition: width .22s; }
.nav a:hover { color: #fff; background: linear-gradient(180deg, transparent 30%, rgba(227, 189, 106, .10)); text-shadow: 0 0 12px rgba(255, 225, 160, .55); }
.nav a:hover::before { width: 46%; }
.nav a.is-active { color: var(--gold); background: linear-gradient(180deg, rgba(255, 220, 140, .05) 0%, rgba(227, 189, 106, .16) 100%); text-shadow: 0 0 14px rgba(255, 210, 120, .6); }
.nav a.is-active::before { width: 100%; }
.nav__glyph { width: auto; font-size: 10px; color: rgba(227, 189, 106, .55); transition: color .15s; }
.nav a:hover .nav__glyph, .nav a.is-active .nav__glyph { color: var(--gold); }
.nav-plus { margin: 0 0 0 6px; color: var(--gold) !important; border: 0 !important; background: linear-gradient(180deg, transparent, rgba(240, 207, 132, .09)) !important; }
.nav-plus .nav__glyph { color: var(--gold); }

.titlebar .pill { margin: 0 14px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(0, 0, 0, .35); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pill--live .pill__dot { width: 6px; height: 6px; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
#titlebar-user { padding: 0 0 0 10px; }

/* ---------- левая колонка: профиль ---------- */
.sidebar {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 16px 18px; overflow-y: auto;
  background: linear-gradient(180deg, rgba(20, 22, 27, .92), rgba(9, 10, 12, .96));
  border-right: 1px solid #000; box-shadow: inset -1px 0 0 var(--line), 8px 0 30px rgba(0, 0, 0, .35);
  backdrop-filter: none;
}
.sidebar::before { content: "Профиль героя"; display: block; padding: 0 2px 10px; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--radiant); border-bottom: 1px solid var(--line); }
.sidebar__player {
  margin: 0; padding: 16px; font-size: 12.5px; border-radius: 0; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(40, 36, 28, .55), rgba(14, 15, 18, .85)); box-shadow: var(--bevel); position: relative;
}
.sidebar__player::before, .sidebar__player::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--radiant); pointer-events: none; }
.sidebar__player::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.sidebar__player::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.sidebar__player .avatar--sm { width: 42px; height: 42px; }

/* ---------- рабочая область ---------- */
.view { padding: 34px clamp(20px, 3.2vw, 56px) 70px; scroll-behavior: smooth; }
.view > * { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.view > *:nth-child(2) { animation-delay: .06s; } .view > *:nth-child(3) { animation-delay: .12s; } .view > *:nth-child(n+4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.view__head { position: relative; margin-bottom: 30px; padding-bottom: 20px; }
.view__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(227, 189, 106, .8), rgba(227, 189, 106, .15) 55%, transparent); }
.view__head::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 70px; height: 3px; background: linear-gradient(90deg, var(--red-1), #ffcf7a); box-shadow: 0 0 12px rgba(255, 150, 70, .8); }
.view__head h1 {
  font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  background: linear-gradient(180deg, #fff6dc 10%, #e9c775 55%, #9d7632 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.view__head p { margin-top: 10px; color: var(--text-dim); font-size: 13.5px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .32em; font-weight: 700; color: var(--red-1); text-transform: uppercase; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red-1); box-shadow: 0 0 8px var(--red-1); }

/* ---------- панели ---------- */
.card {
  position: relative; padding: 22px 24px; background: var(--panel);
  border: 1px solid rgba(212, 196, 160, .13); border-top-color: rgba(240, 207, 132, .30);
  border-radius: 0; box-shadow: var(--bevel), 0 14px 40px rgba(0, 0, 0, .35);
  backdrop-filter: none;
}
.card::before, .card::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--radiant); pointer-events: none; opacity: .85; transition: width .25s, height .25s; }
.card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.card:hover::before, .card:hover::after { width: 22px; height: 22px; }
.card--glow-radiant { border-color: rgba(227, 189, 106, .4); box-shadow: var(--bevel), 0 0 34px rgba(227, 189, 106, .10), 0 14px 40px rgba(0, 0, 0, .4); background: linear-gradient(180deg, rgba(44, 38, 26, .85), rgba(15, 16, 19, .95)); }
.grid { gap: 20px; }
.card__title { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card__title h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #f4e6bf; font-weight: 700; }
.card__title h2::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); background: linear-gradient(135deg, var(--red-1), var(--red-3)); box-shadow: 0 0 10px rgba(226, 85, 47, .8); }
.card__title small { text-transform: none; letter-spacing: 0; }
.profile-cover { overflow: hidden; }
.profile-banner { height: 160px; margin: -22px -24px 20px; }
.profile-banner::after { background: linear-gradient(transparent 30%, #101215); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 20px;
  border: 1px solid #4a4a46; border-radius: 0; text-decoration: none; text-transform: uppercase;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #e9e3d2;
  background: linear-gradient(180deg, #353941 0%, #20242a 52%, #15181d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: filter .15s, color .15s, transform .08s, background .2s;
}
.btn:hover:not(:disabled) { color: #fff; filter: brightness(1.22); background: linear-gradient(180deg, #3e434c 0%, #262b32 52%, #191d22 100%); transform: none; }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.92); }
.btn--primary {
  border-color: #e9a05a; color: #fff6e6; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #ee6a3c 0%, #c63a20 48%, #8e2412 52%, #6a190d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .5), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(226, 85, 47, .38);
}
.btn--primary:hover:not(:disabled) { color: #fff; filter: brightness(1.15); background: linear-gradient(180deg, #f87a4a 0%, #d6452a 48%, #a02b18 52%, #7a1f10 100%); box-shadow: inset 0 1px 0 rgba(255, 230, 190, .6), 0 0 32px rgba(240, 100, 55, .6); }
.btn--danger { border-color: #8a3a34; color: #fff; background: linear-gradient(180deg, #8f2a24, #581410); }
.btn--danger:hover:not(:disabled) { background: linear-gradient(180deg, #b0352d, #6c1a14); box-shadow: var(--glow-dire); }
.btn--ghost { background: rgba(0, 0, 0, .25); border-color: var(--line-strong); box-shadow: none; }
.btn--sm { min-height: 28px; padding: 5px 13px; font-size: 10.5px; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.btn:disabled { opacity: .4; filter: grayscale(.6); }
.btn--steam, .btn-steam { color: #fff; border: 1px solid #6aa7c8; background: linear-gradient(180deg, #34627e, #1a3447 55%, #12232f); }
.btn--steam:hover:not(:disabled), .btn-steam:hover { filter: brightness(1.25); }
.btn-steam { display: flex; width: 100%; padding: 16px 22px; min-height: 56px; font-size: 14px; box-shadow: 0 0 28px rgba(102, 192, 244, .22), inset 0 1px 0 rgba(255, 255, 255, .2); transform: none; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }

/* ---------- поля ---------- */
.field { gap: 7px; }
.field > label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); font-weight: 600; }
.input, .select {
  min-height: 40px; padding: 8px 13px; border-radius: 0; color: var(--text);
  background: linear-gradient(180deg, #060708, #0d0f12); border: 1px solid #34363b; border-bottom-color: #4d4a3f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
.input:hover, .select:hover { border-color: #55503f; }
.input:focus, .select:focus { border-color: var(--radiant); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 0 1px rgba(227, 189, 106, .35), 0 0 18px rgba(227, 189, 106, .18); outline: none; }
.select option { background: #14171b; }
.check input { accent-color: var(--red-1); }
.seg { padding: 3px; border-radius: 0; background: #07080a; border: 1px solid #2b2d31; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7); }
.seg button { padding: 7px 16px; border-radius: 0; text-transform: uppercase; font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; font-weight: 600; transition: color .15s, background .15s; }
.seg button:hover { color: #fff; }
.seg button.is-on { color: var(--gold); background: linear-gradient(180deg, rgba(227, 189, 106, .22), rgba(227, 189, 106, .06)); box-shadow: inset 0 -2px 0 var(--radiant); }

/* ---------- чипы, бейджи, статусы ---------- */
.chip { padding: 3px 10px; border-radius: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); background: rgba(0, 0, 0, .35); border: 1px solid rgba(212, 196, 160, .22); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding-inline: 13px; }
.chip--ok { color: var(--ok); border-color: rgba(123, 211, 90, .5); background: rgba(123, 211, 90, .08); }
.chip--bad { color: #ff7767; border-color: rgba(216, 64, 46, .6); background: rgba(216, 64, 46, .10); }
.chip--gold { color: var(--gold); border-color: rgba(240, 207, 132, .5); background: rgba(240, 207, 132, .08); }
.chip--info { color: #cfe3ef; border-color: rgba(143, 160, 173, .5); background: rgba(143, 160, 173, .08); }
.badge { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 600; background: linear-gradient(180deg, rgba(240, 207, 132, .18), rgba(240, 207, 132, .05)); border: 1px solid rgba(240, 207, 132, .45); color: var(--gold); }
.plus-badge { border-radius: 0; background: linear-gradient(180deg, rgba(240, 207, 132, .3), rgba(160, 110, 40, .1)); border-color: rgba(240, 207, 132, .6); }

/* ---------- прогресс ---------- */
.bar { height: 9px; border-radius: 0; background: #050607; border: 1px solid #2a2a2a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9); overflow: hidden; }
.bar > i, .bar i { position: relative; border-radius: 0; background: linear-gradient(180deg, #f6d98e, #c8962f 55%, #8a621c); box-shadow: 0 0 12px rgba(240, 190, 90, .5); }
.bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 200% 100%; animation: sheen 2.8s linear infinite; }
@keyframes sheen { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.ch-progress .bar { height: 14px; }
.xp__track { height: 12px; border-radius: 0; background: #050607; border: 1px solid #2d2a22; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9); }
.xp__fill { border-radius: 0; box-shadow: 0 0 16px rgba(255, 220, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
.xp--compact .xp__track { height: 8px; }
.xp__level { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* ---------- таблицы ---------- */
.table th { padding: 10px 14px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--radiant); border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(227, 189, 106, .07), transparent); }
.table td { padding: 11px 14px; border-bottom: 1px solid rgba(212, 196, 160, .07); }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(227, 189, 106, .09), transparent); }
.empty { border: 1px dashed var(--line-strong); border-radius: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .015) 0 8px, transparent 8px 16px); }
pre.code { border-radius: 0; background: #050607; border: 1px solid #2c2c2c; border-left: 3px solid var(--radiant); }
.notice { border-radius: 0; border: 1px solid var(--line-strong); border-left: 3px solid var(--steel); background: rgba(143, 160, 173, .06); }
.notice--warn { border-color: rgba(240, 207, 132, .4); border-left-color: var(--gold); background: rgba(240, 207, 132, .07); }
.notice--ok { border-color: rgba(123, 211, 90, .35); border-left-color: var(--ok); background: rgba(123, 211, 90, .06); color: #cdeec1; }

/* ---------- аватары ---------- */
.avatar { border-radius: 0; border: 2px solid #5b4b2a; background: #0a0b0d; box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, .5); clip-path: none; }
.avatar--sm, .avatar--xs { border-width: 1px; }
.hero-ico { border-radius: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(227, 189, 106, .25); }
.player-card__name { font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: #fff3d2; }
.profile-title { color: var(--radiant); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-family: var(--font-display); }

/* ---------- челленджи ---------- */
.ch-title { font-size: 24px; letter-spacing: .03em; text-transform: uppercase; color: #fff3d2; }
.ch-item { border-radius: 0; border: 1px solid var(--line); border-left: 3px solid #3a3a38; background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); transition: background .2s, border-color .2s, transform .2s; }
.ch-item:hover { transform: translateX(3px); background: linear-gradient(90deg, rgba(227, 189, 106, .1), rgba(255, 255, 255, .01)); }
.ch-item.is-active { border-left-color: var(--red-1); border-color: rgba(226, 85, 47, .35); background: linear-gradient(90deg, rgba(226, 85, 47, .14), rgba(255, 255, 255, .01)); }
.challenge-summary + .challenge-summary { border-top: 1px solid var(--line); }
.tpl, .tier { border-radius: 0; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .25)); box-shadow: var(--bevel); transition: border-color .15s, background .15s, transform .15s; }
.tpl:hover, .tier:hover:not(.is-locked) { border-color: rgba(227, 189, 106, .5); transform: translateY(-2px); }
.tpl.is-on, .tier.is-on { border-color: var(--radiant); background: linear-gradient(180deg, rgba(227, 189, 106, .16), rgba(0, 0, 0, .3)); box-shadow: var(--bevel), var(--glow-radiant); }
.tpl strong { text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-display); font-size: 13px; color: #fff3d2; }
.kpi { border-radius: 0; border: 1px solid var(--line); border-bottom: 2px solid rgba(227, 189, 106, .45); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .3)); }
.kpi small { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.kpi b { font-family: var(--font-display); color: #fff3d2; letter-spacing: .02em; text-shadow: 0 0 18px rgba(227, 189, 106, .25); }
.steam-box { border-radius: 0; border: 1px solid rgba(240, 207, 132, .5); background: linear-gradient(120deg, rgba(240, 207, 132, .13), rgba(216, 64, 46, .10)); }
.sidequest { border-radius: 0; border: 1px solid rgba(240, 207, 132, .3); border-left: 3px solid var(--gold); background: linear-gradient(110deg, rgba(240, 207, 132, .10), transparent); }

/* ---------- слоты билда: как инвентарь Dota ---------- */
.slot { border-radius: 0; min-height: 156px; border: 1px solid #3d3a31; background: radial-gradient(circle at 50% 30%, #2a2c31, #0d0e11 75%); box-shadow: inset 0 0 0 1px #000, inset 0 2px 14px rgba(0, 0, 0, .8), 0 6px 14px rgba(0, 0, 0, .4); transition: border-color .15s, box-shadow .2s, transform .15s; }
.slot.slot--pick:hover, .slot--empty:hover:not(:disabled) { border-color: var(--radiant); box-shadow: inset 0 0 0 1px #000, inset 0 2px 14px rgba(0, 0, 0, .8), var(--glow-radiant); transform: translateY(-2px); }
.slot--locked, .slot--boots { border-color: var(--gold); box-shadow: inset 0 0 0 1px #000, inset 0 0 22px rgba(240, 207, 132, .12), var(--glow-gold); }
.slot--empty { border-style: dashed; background: rgba(0, 0, 0, .35); }
.slot__plus { color: var(--radiant); font-weight: 300; }
.slot__img { border-radius: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.slot__lock { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.slot__xp { color: var(--ok); text-shadow: 0 0 10px rgba(123, 211, 90, .5); }
.pip { border-radius: 0; background: linear-gradient(135deg, var(--red-1), var(--red-3)); box-shadow: 0 0 12px rgba(226, 85, 47, .7); }
.pip--off { background: transparent; border: 1px solid var(--line-strong); box-shadow: none; }
.picker-item { border-radius: 0; border: 1px solid #2f2e29; background: radial-gradient(circle at 50% 30%, #23252a, #0e0f12); transition: border-color .15s, transform .15s; }
.picker-item:hover:not(:disabled) { border-color: var(--radiant); background: radial-gradient(circle at 50% 30%, #3a3322, #0e0f12); transform: translateY(-2px); }
.build-timer { border-radius: 0; background: rgba(227, 189, 106, .07); border: 1px solid rgba(227, 189, 106, .32); }
.build-opts { border-radius: 0; }
.current-build { border-radius: 0; background: rgba(0, 0, 0, .3); }

/* ---------- модалки и тосты ---------- */
.modal-back { background: rgba(2, 2, 3, .78); backdrop-filter: blur(5px) saturate(.8); }
.modal { position: relative; border-radius: 0; padding: 26px; background: linear-gradient(180deg, #23262c, #101215); border: 1px solid var(--line-strong); border-top: 2px solid var(--radiant); box-shadow: 0 40px 100px #000, 0 0 60px rgba(227, 189, 106, .07); }
.modal__head h2, .modal__head h3 { text-transform: uppercase; letter-spacing: .12em; font-size: 15px; color: #f4e6bf; }
.toast { border-radius: 0; background: linear-gradient(180deg, rgba(34, 36, 42, .98), rgba(14, 15, 18, .98)); border: 1px solid var(--line-strong); border-left: 4px solid var(--radiant); box-shadow: 0 12px 30px #000a; }
.toast--ok { border-left-color: var(--ok); } .toast--bad { border-left-color: var(--dire); } .toast--gold { border-left-color: var(--gold); box-shadow: var(--glow-gold), 0 12px 30px #000a; }

/* ---------- выбор героя ---------- */
.hero-select__panel { border-radius: 0; background: #0f1114; border: 1px solid var(--line-strong); border-top: 2px solid var(--radiant); box-shadow: 0 22px 50px #000d; }
.hero-select__list > button { border-radius: 0; }
.hero-select__list > button:hover, .hero-select__list > button:focus-visible { background: linear-gradient(90deg, rgba(227, 189, 106, .14), transparent); border-color: rgba(227, 189, 106, .3); }
.hero-select__list > button[aria-selected=true] { background: linear-gradient(90deg, rgba(226, 85, 47, .22), transparent); border-color: rgba(226, 85, 47, .5); }

/* ---------- рейтинг и графики ---------- */
.lb__icon { border-radius: 0; transform: rotate(45deg); background: rgba(240, 207, 132, .12); border: 1px solid rgba(240, 207, 132, .5); }
.lb__icon > * { transform: rotate(-45deg); }
.lb__row { border-radius: 0; border-left: 2px solid transparent; transition: background .15s; }
.lb__row:hover { background: linear-gradient(90deg, rgba(227, 189, 106, .09), transparent); }
.lb__row.is-me { background: linear-gradient(90deg, rgba(226, 85, 47, .2), transparent); border-color: transparent; border-left-color: var(--red-1); }
.lb__rank { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); width: 28px; height: 28px; background: #23262b; color: var(--text-dim); }
.lb__rank--gold { background: linear-gradient(135deg, #ffe7a0, #c58a24); color: #2a1a00; }
.lb__rank--silver { background: linear-gradient(135deg, #f1f4f8, #8e99a6); color: #141a24; }
.lb__rank--bronze { background: linear-gradient(135deg, #e6a874, #8f5226); color: #2a1200; }
.lb__val { color: var(--gold); letter-spacing: .03em; }
.chart__line { stroke: var(--gold); filter: drop-shadow(0 0 7px rgba(240, 190, 90, .6)); }
.chart__area { fill: rgba(240, 190, 90, .10); }
.chart__dot { stroke: var(--gold); }
.chart__dot:hover { fill: var(--gold); }
.chart__bar.is-win { fill: rgba(123, 211, 90, .85); }
.chart__bar.is-loss { fill: rgba(216, 64, 46, .88); }
.wl-strip__cell { border-radius: 0; }
.wl-strip__cell.is-win { background: var(--ok); box-shadow: 0 0 8px rgba(123, 211, 90, .5); }
.wl-strip__cell.is-loss { background: var(--dire); box-shadow: 0 0 8px rgba(216, 64, 46, .5); }

/* ---------- сезоны, матчи, лента ---------- */
.season-podium a { border-radius: 0; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(240, 207, 132, .10), rgba(0, 0, 0, .3)); transition: transform .2s, border-color .2s; }
.season-podium a:hover { transform: translateY(-3px); border-color: var(--gold); }
.season-rank { font-family: var(--font-display); text-shadow: 0 0 16px rgba(240, 207, 132, .5); }
.result-hero { border-radius: 0; border: 1px solid rgba(216, 64, 46, .5); border-left: 4px solid var(--dire); background: linear-gradient(100deg, rgba(216, 64, 46, .16), transparent); }
.result-hero--win { border-color: rgba(123, 211, 90, .5); border-left-color: var(--ok); background: linear-gradient(100deg, rgba(123, 211, 90, .14), transparent); }
.result-hero h2 { text-transform: uppercase; letter-spacing: .08em; }
.result-item { border-radius: 0; background: rgba(255, 255, 255, .025); }
.result-item.is-collected { background: rgba(123, 211, 90, .08); }
.result-item.is-collected b { color: var(--ok); }
.feed-mark { border-radius: 0; transform: rotate(45deg); background: rgba(227, 189, 106, .12); border: 1px solid rgba(227, 189, 106, .4); }
.feed-mark > * { transform: rotate(-45deg); }
.online-player { border-radius: 0; border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.online-player:hover { background: linear-gradient(90deg, rgba(227, 189, 106, .1), transparent); border-color: var(--line); border-left-color: var(--radiant); }
.online-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.prize-contacts, .season-earned { border-radius: 0; }

/* ---------- вход ---------- */
.login { position: relative; }
.login::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 380px at 50% 42%, rgba(226, 85, 47, .16), transparent 70%); pointer-events: none; }
.login__card { position: relative; padding: 40px 36px; gap: 16px; }
.login__card h1 { font-size: 25px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(180deg, #fff6dc 10%, #e9c775 60%, #9d7632); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login__logo .logo { width: 56px; height: 64px; filter: drop-shadow(0 0 22px rgba(226, 85, 47, .55)); animation: logo-pulse 3.6s ease-in-out infinite; }
.login__logo .logo::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
@keyframes logo-pulse { 50% { filter: drop-shadow(0 0 34px rgba(255, 140, 70, .85)); } }
.login__facts li::before { color: var(--red-1); }

/* ---------- демо и ПЛЮС ---------- */
.demo-hero, .plus-hero { border-bottom: 1px solid var(--line-strong); }
.demo-hero h1, .plus-hero h1, .membership-copy h1 { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; line-height: 1.04; }
.demo-hero h1 { font-size: clamp(32px, 4.2vw, 62px); }
.plus-hero h1 { font-size: clamp(36px, 5vw, 68px); }
.membership-copy h1 { font-size: clamp(38px, 4.6vw, 72px); }
.demo-hero em, .plus-hero em { color: var(--gold); text-shadow: 0 0 30px rgba(240, 190, 90, .45); }
.demo-benefits strong, .plan-price { font-family: var(--font-display); color: var(--gold); }
.membership-plan, .membership-feature, .activation-form, .review-card, .subscription-status { border-radius: 0; }
.membership-plan { background: linear-gradient(180deg, rgba(48, 41, 28, .9), rgba(14, 15, 18, .96)); border-color: rgba(240, 207, 132, .45); box-shadow: 0 0 50px rgba(227, 189, 106, .08), 0 16px 55px #0008; }
.membership-feature, .activation-form, .review-card { background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(240, 207, 132, .25); }
.membership-feature > span { border-radius: 0; transform: rotate(45deg); }
.membership-feature > span > * { transform: rotate(-45deg); }
.membership-label { color: var(--red-1); } .membership-label i { background: var(--red-1); box-shadow: 0 0 10px var(--red-1); }
.section-heading h2, .membership-activate h2, .membership-faq > h2 { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); }
.art-tag { border-radius: 0; }
.plus-orbit { color: var(--gold); }

@media (max-width: 1760px) { .titlebar .pill { display: none; } }
.table { display: table; width: 100%; }
@media (max-width: 1720px) { .nav a { padding: 0 12px; letter-spacing: .07em; } .nav__glyph { display: none; } }
@media (max-width: 1280px) { .nav a { padding: 0 11px; font-size: 11.5px; letter-spacing: .06em; } .nav__glyph { display: none; } }
@media (max-width: 1000px) { #app { grid-template-columns: 1fr; } .sidebar { display: none; } }
@media (max-width: 800px) {
  #app, body.guest #app, body.guest.demo-mode #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .titlebar { flex-wrap: wrap; padding: 0 12px; height: auto; }
  .titlebar__brand { height: 54px; border-right: 0; font-size: 13px; padding-right: 10px; }
  #titlebar-user { margin-left: auto; }
  .titlebar .nav { order: 9; flex: 0 0 100%; height: 44px; border-top: 1px solid var(--line); }
  .nav a { padding: 0 13px; font-size: 11px; }
  .view { padding: 24px 16px 50px; }
  .card { padding: 18px; }
  .profile-banner { margin: -18px -18px 16px; }
}

/* Sequential hero trial */
.hero-trial{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:10px;background:#0003}
.hero-trial__current{display:flex;align-items:center;gap:8px}.hero-trial p{margin:12px 0}.hero-trial summary{cursor:pointer;color:var(--gold)}
.hero-trial__roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;max-height:320px;overflow:auto;margin-top:12px}
.hero-trial__roster>div{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid transparent;border-radius:6px;font-size:12px}
.hero-trial__roster .is-done{opacity:.5}.hero-trial__roster .is-current{border-color:var(--gold);background:#ffffff08}

.hero-trial__portrait{position:relative;display:inline-flex;flex-shrink:0}.hero-trial__cross{position:absolute;inset:0;display:grid;place-items:center;color:#ff302d;font-size:38px;font-weight:900;line-height:1;text-shadow:0 0 3px #000,0 0 7px #700}.hero-trial__roster .is-done{opacity:.8}.hero-trial__roster .is-done .hero-ico{filter:grayscale(.8);opacity:.6}

/* Wide dashboard achievement slider */
.feed-carousel{min-width:0}.feed-carousel .card__title{flex-wrap:wrap;gap:14px}.feed-carousel__controls{margin-left:auto;flex-wrap:wrap}
.achievement-feed--slider{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;padding:6px 2px 14px;align-items:stretch}
.achievement-feed--slider .feed-event{flex:0 0 clamp(260px,30%,390px);min-width:0;scroll-snap-align:start;margin:0;padding:18px;border:1px solid var(--line-strong);background:rgba(0,0,0,.22);border-radius:4px}
.achievement-feed--slider .feed-event>div{min-width:0;overflow-wrap:anywhere}
.hero-trial__roster>div:not(.is-done){border-color:rgba(227,189,106,.28)}
.hero-trial__roster .is-done{opacity:1;border:1px solid #777;background:#77777712;color:#9b9b9b}
.hero-trial__roster .is-done .hero-ico{filter:grayscale(1);opacity:.65}
@media(max-width:600px){.achievement-feed--slider .feed-event{flex-basis:85%}.feed-carousel__controls{margin-left:0}}
@media(prefers-reduced-motion:reduce){.achievement-feed--slider{scroll-behavior:auto}}

.achievement-feed--slider::-webkit-scrollbar{display:none;width:0;height:0}

.negative-effect{margin:16px 0;padding:16px;border:1px solid #d8402e66;background:#d8402e0b;border-radius:4px}.negative-effect p{margin:12px 0}.negative-effect>small{display:block;margin-top:8px}.negative-skill{color:#f0cf84;font-size:18px}
.negative-items{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.negative-items>span{display:flex;flex-direction:column;align-items:center;gap:6px;width:100px;text-align:center}.negative-items .hero-ico{width:54px;height:40px;object-fit:contain}.negative-items small{font-size:10px;color:var(--text-dim)}
.profile-match-history{display:grid;gap:8px;max-height:420px;overflow:auto}.profile-history-match{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);color:var(--text);text-decoration:none;flex-wrap:wrap}.profile-history-match>span:first-of-type{flex:1;min-width:150px}.profile-history-match small{display:block;color:var(--text-dim);margin-top:4px}.profile-build-history{display:grid;gap:16px;max-height:600px;overflow:auto}.profile-build-history article{padding:14px;border:1px solid var(--line);border-radius:4px}

.multi-challenge-results{display:grid;gap:12px}.multi-challenge-results article{padding:12px;border:1px solid var(--line);border-radius:4px}.multi-challenge-results p{margin:8px 0}

.build-check-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.build-check-columns .card{min-width:0;overflow-wrap:anywhere}.build-check-columns h3{margin-bottom:14px}@media(max-width:600px){.build-check-columns{grid-template-columns:1fr}}