/* ════════════════════════════════════════════════════════════
   Speech Combat — базовый стиль (header + токены).
   Взято из проекта speechcombat (frontend/styles/01-tokens.css
   и 02-layout.css, секция NEW HEADER WITH PROFILE).
   ════════════════════════════════════════════════════════════ */

/* ───── DESIGN TOKENS ───── */
:root, html[data-theme="dark"] {
  --red:        #FF1744;
  --red-soft:   #E0102F;
  --red-deep:   #8B0024;
  --red-glow:   rgba(255, 23, 68, 0.22);

  --blue:       #4F8FE0;
  --blue-bright:#5AA0F0;
  --blue-deep:  #0E3D68;
  --blue-glow:  rgba(79, 143, 224, 0.22);

  --bg:         #0A0B14;
  --bg2:        #0F1120;
  --bg3:        #161827;
  --surface:    #141627;
  --surface-2:  #1A1D32;
  --surface-hover: #20243C;

  --text:       #ECEEF8;
  --text2:      #B1B7CB;
  --text3:      #7A7F94;

  --border:     rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --border-accent: rgba(255, 23, 68, 0.45);

  --card:       linear-gradient(180deg, #15182A 0%, #0F1224 100%);
  --card-hover: linear-gradient(180deg, #1B1E33 0%, #14172A 100%);
  --chip-bg:    #181B2D;
  --chip-border: rgba(255,255,255,0.10);

  --shadow:     0 1px 0 rgba(255,255,255,0.04) inset,
                0 12px 30px rgba(0,0,0,0.50),
                0 0 0 1px rgba(255,255,255,0.04);
  --shadow-soft: 0 4px 16px rgba(0,0,0,0.30);
  --radius:     12px;
  --radius-lg:  18px;

  color-scheme: dark;
}
html[data-theme="light"] {
  --red:        #D6002B;
  --red-soft:   #B40026;
  --red-deep:   #6E0018;
  --red-glow:   rgba(214,0,43,0.12);

  --blue:       #1F66AB;
  --blue-bright:#1F66AB;
  --blue-deep:  #0E3D68;
  --blue-glow:  rgba(31,102,171,0.12);

  --bg:         #F6F7FB;
  --bg2:        #FFFFFF;
  --bg3:        #EEF0F6;
  --surface:    #FFFFFF;
  --surface-2:  #F8F9FC;
  --surface-hover: #EEF0F6;

  --text:       #0E1224;
  --text2:      #475066;
  --text3:      #8B91A4;

  --border:     rgba(14,18,36,0.10);
  --border-strong: rgba(14,18,36,0.18);
  --border-accent: rgba(214,0,43,0.32);

  --card:       #FFFFFF;
  --card-hover: #F8F9FC;
  --chip-bg:    #FFFFFF;
  --chip-border: rgba(14,18,36,0.10);

  --shadow:     0 1px 0 rgba(14,18,36,0.04) inset,
                0 8px 24px rgba(14,61,104,0.07),
                0 0 0 1px rgba(14,18,36,0.04);
  --shadow-soft: 0 4px 12px rgba(14,18,36,0.06);
  --radius:     12px;
  --radius-lg:  18px;

  color-scheme: light;
}

/* ───── BASE ───── */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; user-select: none;
}

/* ───── HEADER (NEW HEADER WITH PROFILE) ───── */
.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.sc-header-left { display: flex; align-items: center; gap: 20px; }
.sc-header-right { display: flex; align-items: center; gap: 12px; }

.sc-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sc-logo img { width: 38px; height: 38px; }
.sc-logo .logo-dark { display: none; }
.sc-logo .logo-light { display: block; filter: drop-shadow(0 2px 8px rgba(227,0,48,0.3)); }
.sc-logo-text { font-size: 20px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.05; }
.sc-logo-speech { color: var(--text); }
.sc-logo-combat { color: var(--red); }

.sc-header-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.sc-header-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.sc-header-btn svg { width: 20px; height: 20px; stroke: var(--text); }
.sc-icon-btn { padding: 8px; width: 40px; height: 40px; border-radius: 50%; border-color: var(--border-strong); }

/* Profile Dropdown */
.sc-profile-menu { position: relative; }
.sc-profile-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #ff5544);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--border); transition: all 0.15s;
}
.sc-profile-avatar:hover { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,0,48,0.15); }
.sc-profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 8px 0; display: none; z-index: 1000;
}
.sc-profile-dropdown.show { display: block; animation: dropdownFade 0.2s ease; }
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sc-profile-dropdown-item {
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: background 0.15s; color: var(--text); font-size: 14px;
}
.sc-profile-dropdown-item:hover { background: var(--surface-hover); }
.sc-profile-dropdown-item svg { width: 18px; height: 18px; color: var(--text2); }
.sc-profile-dropdown-divider { height: 1px; background: var(--border); margin: 8px 0; }
.sc-profile-badge {
  margin-left: auto; padding: 2px 8px; background: rgba(227,0,48,0.15); color: var(--red);
  border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase;
}

/* ───── CONTAINER ───── */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* ───── Адаптив шапки / Header responsive ─────
   На мобильном шапка переполнялась (кнопка «Регистрация» обрезалась),
   поэтому ужимаем отступы, шрифты и кнопки; на узких экранах прячем
   текст логотипа, оставляя только иконку.
   //
   On mobile the header overflowed (the "Регистрация" button was clipped),
   so we shrink paddings, fonts and buttons; on narrow screens we hide the
   logo text and keep only the icon. */
@media (max-width: 600px) {
  .sc-header { padding: 10px 14px; }
  .sc-header-left { gap: 10px; }
  .sc-header-right { gap: 8px; }
  .sc-logo { gap: 8px; }
  .sc-logo img { width: 32px; height: 32px; }
  .sc-logo-text { font-size: 16px; }
  .sc-header-btn { padding: 7px 11px; font-size: 13px; }
  .sc-icon-btn { width: 36px; height: 36px; padding: 6px; }
  .sc-profile-avatar { width: 36px; height: 36px; font-size: 14px; }
  .container { padding: 14px; }
}
@media (max-width: 460px) {
  /* Иначе логотип + 2 кнопки + аватар не помещаются в одну строку.
     Otherwise logo + 2 buttons + avatar don't fit on one line. */
  .sc-logo-text { display: none; }
}