:root {
  color-scheme: dark;
  --bg: #070b0f;
  --bg-soft: #0b1117;
  --panel: rgba(13, 18, 24, .88);
  --panel-2: rgba(18, 25, 33, .92);
  --line: rgba(148, 163, 184, .15);
  --line-strong: rgba(245, 185, 48, .42);
  --text: #f4f7fb;
  --muted: #9aa5b2;
  --muted-2: #66707c;
  --gold: #f5b930;
  --green: #63db4a;
  --blue: #8fb7ff;
  --purple: #ca61ff;
  --red: #ff5f5f;
  --scoreboard-steel: #9aa5b2;
  --scoreboard-gold: #d6a83b;
  --scoreboard-red: #b45a53;
  --scoreboard-icon-steel-filter: brightness(0) saturate(100%) invert(68%) sepia(10%) saturate(354%) hue-rotate(176deg) brightness(90%) contrast(86%);
  --scoreboard-icon-gold-filter: brightness(0) saturate(100%) invert(70%) sepia(36%) saturate(846%) hue-rotate(358deg) brightness(91%) contrast(91%);
  --scoreboard-icon-red-filter: brightness(0) saturate(100%) invert(48%) sepia(19%) saturate(1018%) hue-rotate(318deg) brightness(86%) contrast(89%);
  --commander-icon-filter: brightness(0) saturate(100%) invert(70%) sepia(36%) saturate(846%) hue-rotate(358deg) brightness(91%) contrast(91%);
}

/* Late SquadClans layout fixes: notifications, pool, training cameras, role highlights. */
.notifications-page.notifications-page-wide {
  width: min(1680px, calc(100vw - 48px));
  max-width: none;
}

.notifications-page-wide .section-hero {
  width: 100%;
}

.notifications-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.notification-group-card {
  min-width: 0;
  min-height: 260px;
}

.notification-total-pill {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 10px;
  background: rgba(245,185,48,.1);
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
}

.notification-group-card .notification-row {
  grid-template-columns: 88px minmax(0, 1fr) auto;
}

.clan-pool-page {
  width: min(1680px, calc(100vw - 48px));
  max-width: none;
}

.clan-pool-role-sections {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.clan-pool-role-section {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.clan-pool-role-section > header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.clan-pool-role-section > header em {
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 999px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  font-style: normal;
  text-align: center;
}

.clan-pool-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 7px;
}

.clan-pool-role-grid .clan-pool-member-chip {
  width: 100%;
  max-width: none;
  min-height: 42px;
}

.training-match-toolbar {
  grid-template-columns: minmax(172px, .72fr) minmax(190px, .88fr) minmax(300px, 1.35fr) minmax(190px, .88fr) minmax(172px, .72fr);
  grid-template-areas: "cam1 team1 map team2 cam2";
}

.training-camera-group-camera_one {
  grid-area: cam1;
}

.training-camera-group-camera_two {
  grid-area: cam2;
}

.training-match-side-one {
  grid-area: team1;
}

.training-match-side-two {
  grid-area: team2;
}

.training-match-map-center {
  grid-area: map;
}

.training-camera-group {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20,25,29,.9), rgba(11,15,18,.92));
}

.training-camera-group-title {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.training-camera-group-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.training-camera-group .training-camera-slot {
  min-width: 0;
  min-height: 42px;
  padding: 5px;
}

.training-camera-group .training-camera-label {
  display: none;
}

.training-camera-group .training-camera-player.training-slot-row {
  min-height: 34px;
  padding: 4px 5px;
  gap: 5px;
}

.training-camera-group .training-camera-player.training-slot-row strong {
  font-size: 10px;
}

.training-camera-group .training-camera-player.training-slot-row em,
.training-camera-group .training-camera-empty,
.training-camera-group .training-camera-slot button,
.training-camera-group .training-camera-slot a {
  font-size: 10px;
}

.training-role-count.commander-role,
.training-slot-row.commander-role,
.training-slot-role-button.commander-role {
  border-color: rgba(245,185,48,.82);
  background: linear-gradient(90deg, rgba(245,185,48,.14), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(245,185,48,.18);
}

.training-slot-row.commander-role .role-icon-mini,
.training-slot-role-button.commander-role .role-icon-mini,
.training-role-count.commander-role .role-icon-mini {
  border-color: rgba(245,185,48,.78);
  box-shadow: 0 0 0 1px rgba(245,185,48,.2);
}

.training-slot-row.commander-role .role-icon-mini img,
.training-slot-role-button.commander-role .role-icon-mini img,
.training-role-count.commander-role .role-icon-mini img {
  filter: var(--commander-icon-filter);
}

.stats-clan-zoom-preview {
  display: grid;
  grid-template-columns: 50px minmax(170px, 1.45fr) minmax(74px, .55fr) repeat(8, minmax(54px, .54fr));
  min-height: 86px;
}

.stats-clan-zoom-preview .stats-rank,
.stats-clan-zoom-preview .stats-player-main,
.stats-clan-zoom-preview .stats-history-cell {
  min-height: 86px;
}

.stats-clan-zoom-preview .stats-history-cell small {
  display: block;
}

.role-levels-page {
  width: min(1440px, calc(100vw - 48px));
  max-width: none;
}

.role-levels-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
}

.role-levels-hero span,
.role-levels-hero h1,
.role-levels-hero p {
  grid-column: 1;
}

.role-levels-hero .clan-section-button {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.role-levels-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, .95fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.role-level-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.role-level-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.role-level-form select,
.role-level-form input,
.role-level-form textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(4,8,11,.84);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.role-level-form select {
  min-height: 42px;
  padding: 0 12px;
}

.role-level-form input {
  min-height: 42px;
  padding: 0 12px;
}

.role-level-player-picker {
  position: relative;
}

.role-level-player-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  max-height: 290px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 10px;
  background: rgba(7,11,15,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
}

.role-level-player-results button,
.role-level-player-results p {
  min-height: 34px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.role-level-player-results button {
  cursor: pointer;
}

.role-level-player-results button:hover {
  border-color: rgba(245,185,48,.5);
  background: rgba(245,185,48,.1);
  color: var(--gold);
}

.role-level-form textarea {
  min-height: 92px;
  padding: 12px;
  resize: vertical;
}

.role-level-form-wide,
.role-level-form .primary-submit {
  grid-column: 1 / -1;
}

.role-level-form .primary-submit {
  min-height: 42px;
  border: 1px solid rgba(99,219,74,.55);
  border-radius: 8px;
  background: rgba(26,92,38,.42);
  color: #d8ffd2;
  font-weight: 950;
  cursor: pointer;
}

.role-levels-recent-list {
  display: grid;
  gap: 7px;
}

.role-level-recent-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1fr) auto minmax(0, .8fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.role-level-recent-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-level-recent-row em,
.role-level-recent-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-level-recent-row b {
  padding: 3px 7px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 6px;
  background: rgba(245,185,48,.09);
  color: var(--gold);
  font-size: 12px;
}

.empty-state {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--muted);
}

.not-found-page {
  min-height: calc(100vh - 62px);
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.not-found-content {
  width: min(620px, 100%);
  text-align: center;
}

.not-found-code {
  display: block;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
}

.not-found-content h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05;
}

.not-found-content p {
  max-width: 500px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.not-found-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.not-found-actions a {
  min-height: 42px;
}

.not-found-actions svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .not-found-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1180px) {
  .role-levels-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .notifications-page.notifications-page-wide,
  .clan-pool-page {
    width: min(100%, calc(100vw - 24px));
  }

  .notifications-grid {
    grid-template-columns: 1fr;
  }

  .training-match-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cam1"
      "team1"
      "map"
      "team2"
      "cam2";
  }

  .role-levels-page {
    width: min(100%, calc(100vw - 24px));
  }

  .role-level-form,
  .role-levels-hero {
    grid-template-columns: 1fr;
  }

  .role-levels-hero .clan-section-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .role-level-recent-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .role-level-recent-row em,
  .role-level-recent-row small {
    grid-column: 2 / -1;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 65% -10%, rgba(95, 129, 160, .18), transparent 36%),
    linear-gradient(180deg, rgba(10, 17, 25, .98), #05080b 420px),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.sprite {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 15, .9);
  backdrop-filter: blur(18px);
}

.brand,
.topnav,
.top-actions,
.search-box,
.steam-button,
.account-pill,
.side-menu a,
.side-profile-item a,
.badge,
.panel-head,
.legend,
.activity-list li,
.recent-row,
.tier-line,
.more-button,
.tag-cloud,
.format-pill {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 900;
  font-size: 22px;
}

.brand b {
  color: var(--gold);
}

.brand-crest {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 185, 48, .62);
  background: linear-gradient(135deg, rgba(245,185,48,.22), rgba(255,255,255,.02));
  color: var(--gold);
  clip-path: polygon(50% 0, 96% 18%, 87% 82%, 50% 100%, 13% 82%, 4% 18%);
}

.topnav {
  gap: 28px;
  color: #c9d0d7;
  font-size: 14px;
}

.topnav a:hover,
.side-menu a:hover,
.side-menu a.active,
.side-profile-item a:hover {
  color: var(--text);
}

.top-actions {
  gap: 10px;
}

.roster-role-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.roster-role-filter summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.roster-role-filter summary::-webkit-details-marker {
  display: none;
}

.roster-role-filter-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 6px;
  width: 230px;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.24);
  border-radius: 8px;
  background: rgba(9, 13, 18, .98);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
}

.roster-role-filter-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.roster-status-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 24px;
  border: 1px solid rgba(245,185,48,.24);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 11px;
  font-weight: 900;
}

.roster-role-filter-menu button.active,
.roster-role-filter-menu button:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.08);
}

.search-box {
  position: relative;
  gap: 10px;
  min-width: 310px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(20, 27, 36, .9);
  color: var(--muted-2);
  font-size: 13px;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.search-box input::placeholder {
  color: var(--muted-2);
}

.search-form-large {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: min(520px, 100%);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.search-form-large input {
  min-height: 42px;
}

.search-page {
  max-width: 1180px;
  margin: 0 auto;
}

.quick-search-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 360px;
  max-height: 380px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(243, 183, 49, .25);
  border-radius: 8px;
  background: rgba(9, 13, 18, .98);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
}

.quick-search-results[hidden],
.quick-search-results a[hidden],
.quick-search-empty[hidden] {
  display: none;
}

.quick-search-results a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
}

.quick-search-results a:hover {
  border-color: rgba(243, 183, 49, .42);
  background: rgba(243, 183, 49, .08);
}

.quick-search-results img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
}

.quick-search-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(243, 183, 49, .12);
  color: var(--gold);
}

.quick-search-avatar svg {
  width: 18px;
  height: 18px;
}

.quick-search-avatar.clan-letters {
  color: #f5b930;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.quick-search-results span {
  min-width: 0;
}

.quick-search-results strong,
.quick-search-results em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-search-results em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.quick-search-results b {
  color: var(--gold);
  font-size: 12px;
  white-space: nowrap;
}

.quick-search-empty {
  margin: 0;
  padding: 10px;
  color: var(--muted);
}

kbd {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  color: #aeb7c2;
  font: inherit;
  font-size: 11px;
}

.search-box kbd {
  display: none;
}

.icon-button,
.steam-button,
.account-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #d9dee5;
}

.badge-button span,
.side-menu b {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.badge-button span {
  position: absolute;
  top: -4px;
  right: -4px;
}

.side-menu b {
  margin-left: auto;
}

.icon-button:hover,
.steam-button:hover,
.account-pill:hover {
  border-color: var(--line-strong);
  color: var(--gold);
  background: rgba(245, 185, 48, .08);
}

.steam-button,
.account-pill {
  gap: 8px;
  padding: 0 12px;
  background: rgba(245, 185, 48, .08);
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}

.app-layout {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 18px;
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.landing-page {
  width: min(1680px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 26px 0 48px;
}

.landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: end;
  min-height: min(620px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,11,15,.96) 0 36%, rgba(7,11,15,.74) 56%, rgba(7,11,15,.92) 100%),
    radial-gradient(circle at 72% 36%, rgba(245,185,48,.24), transparent 24%),
    linear-gradient(135deg, rgba(245,185,48,.08), transparent 40%),
    #0b1016;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 34%, #000 74%, rgba(0,0,0,.35));
}

.landing-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-soldier {
  position: absolute;
  bottom: 70px;
  width: 72px;
  height: 150px;
  border-radius: 34px 34px 12px 12px;
  background: linear-gradient(180deg, rgba(198,205,210,.2), rgba(0,0,0,.4));
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  opacity: .55;
}

.landing-soldier::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -34px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(205,212,215,.18);
}

.landing-soldier::after {
  content: "";
  position: absolute;
  left: 52px;
  top: 42px;
  width: 120px;
  height: 8px;
  transform: rotate(-9deg);
  border-radius: 99px;
  background: rgba(210,218,222,.18);
}

.landing-soldier.one { right: 24%; transform: scale(1.22); }
.landing-soldier.two { right: 12%; transform: scale(.92); opacity: .38; }
.landing-soldier.three { right: 38%; transform: scale(.78); opacity: .3; }

.landing-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 54px;
}

.landing-copy h1 {
  margin: 8px 0 10px;
  font-size: clamp(54px, 8vw, 112px);
  line-height: .9;
  letter-spacing: 0;
}

.landing-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.landing-steam {
  min-width: 190px;
  background: rgba(245,185,48,.16);
  border-color: rgba(245,185,48,.38);
}

.landing-status {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 0 28px 38px 0;
}

.landing-status article {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(8,12,16,.7);
}

.landing-status span,
.landing-card span {
  color: var(--muted);
  font-size: 12px;
}

.landing-status strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 26px;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.landing-card {
  display: grid;
  gap: 8px;
  min-height: 130px;
  color: var(--text);
  text-decoration: none;
}

.landing-card svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.app-layout.public-profile-layout {
  grid-template-columns: minmax(0, 1fr);
  width: min(1440px, 100%);
}

.app-layout.profile-no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.app-layout.profile-no-sidebar > .sidebar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  gap: 28px;
}

.side-menu {
  display: grid;
  gap: 4px;
}

.side-menu a[href="/statistics/"] {
  display: none;
}

.side-menu a {
  gap: 14px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #aeb8c4;
  font-size: 15px;
}

.side-menu a.active,
.side-profile-item.active {
  border-color: rgba(245, 185, 48, .3);
  background: linear-gradient(90deg, rgba(245, 185, 48, .16), rgba(255,255,255,.025));
  box-shadow: inset 3px 0 0 var(--gold);
}

.side-profile-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
}

.side-profile-item > a:first-child {
  flex: 1;
  gap: 14px;
  min-height: 44px;
  padding: 0 10px 0 14px;
  color: var(--text);
  font-size: 15px;
}

.side-menu .side-profile-item > a:first-child {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.side-menu svg,
.side-profile-item svg {
  color: var(--gold);
}

.profile-settings-link {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin-right: 7px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--gold);
  cursor: pointer;
}

.profile-settings-link:hover,
.profile-settings-link.active {
  border-color: rgba(245,185,48,.45);
  background: rgba(245,185,48,.12);
}

.profile-settings-link svg {
  width: 17px;
  height: 17px;
}

.panel-gear-link {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  cursor: pointer;
}

.panel-gear-link:hover,
.panel-gear-link.active {
  border-color: rgba(245,185,48,.62);
  background: rgba(245,185,48,.14);
}

.panel-gear-link svg {
  width: 16px;
  height: 16px;
}

.profile-hero-settings {
  margin-left: 6px;
  border-color: rgba(245,185,48,.5);
  color: var(--gold);
  background: rgba(245,185,48,.12);
  z-index: 2;
}

.side-card {
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 28, 38, .92), rgba(5, 9, 13, .9));
}

.side-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.side-card p,
.side-card span {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.side-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9c8ff;
  font-size: 13px;
}

.content {
  min-width: 0;
}

.message-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.message {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.profile-hero,
.stat-strip,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(0,0,0,.26);
}

.profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr 360px;
  gap: 22px;
  min-height: 206px;
  padding: 32px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 15, .96), rgba(7, 11, 15, .52), rgba(7, 11, 15, .94)),
    radial-gradient(circle at 58% 30%, rgba(95, 129, 160, .38), transparent 34%),
    linear-gradient(135deg, rgba(45, 52, 58, .75), rgba(6, 10, 14, .94));
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.045) 35% 36%, transparent 36% 100%),
    repeating-linear-gradient(-16deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px);
  opacity: .65;
}

.profile-avatar,
.profile-main,
.clan-panel {
  position: relative;
  z-index: 1;
}

.profile-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 136px;
  min-height: 176px;
  border-radius: 0;
  overflow: visible;
}

.profile-avatar img {
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  object-fit: cover;
  background: #111821;
}

.avatar-time {
  width: 136px;
  max-width: 136px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.avatar-time small {
  display: block;
  margin-top: 2px;
  color: rgba(175, 185, 198, .72);
  font-size: 10px;
  font-weight: 700;
}

.profile-main {
  padding-top: 4px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1;
}

h2 {
  font-size: 16px;
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
}

.online-dot.offline {
  background: #6e7781;
  box-shadow: none;
}

.online-dot.online {
  background: var(--green);
  box-shadow: 0 0 14px rgba(99,217,113,.75);
}

.profile-view-mode {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 900;
}

.profile-view-mode.own {
  border-color: rgba(245,185,48,.42);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.profile-view-mode.public {
  border-color: rgba(135,158,183,.24);
  color: #b9c4d0;
}

.profile-main > p {
  margin-top: 16px;
  color: var(--text);
  font-size: 18px;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.badge {
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
}

.badge.gold {
  background: rgba(245,185,48,.14);
  color: var(--gold);
}

.badge.blue {
  background: rgba(143,183,255,.12);
  color: var(--blue);
}

.badge.burgundy {
  background: rgba(129, 28, 45, .22);
  color: #ff9dad;
}

.clan-panel {
  align-self: center;
  min-height: 140px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 14, 20, .72);
}

.clan-logo-box {
  float: left;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 16px 12px 0;
  border: 1px solid rgba(245,185,48,.32);
  border-radius: 8px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  overflow: hidden;
}

.clan-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.clan-logo-box > strong {
  display: block;
  max-width: calc(100% - 8px);
  margin: 0;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-panel span,
.clan-panel p {
  color: var(--muted);
  font-size: 13px;
}

.clan-panel strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 20px;
}

.clan-panel .clan-logo-box > strong {
  margin: 0;
  font-size: 18px;
}

.clan-logo-box > strong.clan-tag-wide,
.clan-panel .clan-logo-box > strong.clan-tag-wide {
  font-size: 15px;
}

.clan-logo-box > strong.clan-tag-medium,
.clan-panel .clan-logo-box > strong.clan-tag-medium {
  font-size: 13px;
}

.clan-logo-box > strong.clan-tag-small,
.clan-panel .clan-logo-box > strong.clan-tag-small {
  font-size: 10px;
}

.clan-logo-box > strong.clan-tag-xsmall,
.clan-panel .clan-logo-box > strong.clan-tag-xsmall {
  font-size: 8px;
}

/* Clan leadership guide */
.clan-guide-prompt {
  display: grid;
  grid-template-columns:44px minmax(0,1fr) auto 32px;
  gap:14px;
  align-items:center;
  margin:14px 0;
  padding:14px 16px;
  border:1px solid rgba(245,185,48,.34);
  border-radius:8px;
  background:rgba(245,185,48,.065);
}

.clan-guide-prompt-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(245,185,48,.35);
  border-radius:8px;
  color:var(--gold);
  background:rgba(245,185,48,.08);
}

.clan-guide-prompt-icon svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.clan-guide-prompt > div:nth-child(2) {
  display:grid;
  gap:4px;
  min-width:0;
}

.clan-guide-prompt strong { color:var(--text); font-size:15px; }
.clan-guide-prompt span { color:var(--muted); font-size:12px; }

.clan-guide-prompt > a,
.clan-guide-action,
.clan-guide-complete button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border:1px solid rgba(245,185,48,.48);
  border-radius:7px;
  color:var(--gold);
  background:rgba(245,185,48,.12);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.clan-guide-prompt form button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-size:20px;
  cursor:pointer;
}

.clan-guide-settings-link {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  padding:12px;
  border:1px solid rgba(245,185,48,.28);
  border-radius:8px;
  color:inherit;
  background:rgba(245,185,48,.055);
  text-decoration:none;
}

.clan-guide-settings-link > svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.8;
}

.clan-guide-settings-link > span { display:grid; gap:3px; min-width:0; }
.clan-guide-settings-link strong { color:var(--text); font-size:13px; }
.clan-guide-settings-link em { color:var(--muted); font-size:11px; font-style:normal; }
.clan-guide-settings-link > b { color:var(--gold); font-size:12px; }

.clan-guide-shell {
  margin:14px 0 18px;
  border-top:1px solid rgba(245,185,48,.3);
  border-bottom:1px solid rgba(245,185,48,.2);
  background:rgba(7,12,17,.84);
}

.clan-guide-head {
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 24px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.clan-guide-head > div { display:grid; gap:5px; }
.clan-guide-head span { color:var(--gold); font-size:11px; font-weight:950; text-transform:uppercase; }
.clan-guide-head h2 { margin:0; font-size:24px; }
.clan-guide-head p { max-width:760px; margin:0; color:var(--muted); font-size:13px; }

.clan-guide-head > a {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-size:22px;
  text-decoration:none;
}

.clan-guide-layout {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  min-height:520px;
}

.clan-guide-nav {
  display:grid;
  align-content:start;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.016);
}

.clan-guide-nav button {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:42px;
  padding:0 13px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--muted);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.clan-guide-nav button b { color:#6f7b87; font-size:10px; }
.clan-guide-nav button span { overflow:hidden; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.clan-guide-nav button.active { color:var(--text); background:rgba(245,185,48,.09); box-shadow:inset 3px 0 0 var(--gold); }
.clan-guide-nav button.active b { color:var(--gold); }

.clan-guide-pages {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-width:0;
}

.clan-guide-step {
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr);
  gap:28px;
  align-items:center;
  padding:28px;
}

.clan-guide-step[hidden] { display:none; }

.clan-guide-copy { display:grid; align-content:center; gap:12px; min-width:0; }
.clan-guide-copy > span { color:var(--gold); font-size:11px; font-weight:900; }
.clan-guide-copy h3 { margin:0; font-size:22px; line-height:1.2; }
.clan-guide-copy p { margin:0; color:#c8d1da; font-size:13px; line-height:1.55; }
.clan-guide-copy ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.clan-guide-copy li { position:relative; padding-left:17px; color:var(--muted); font-size:12px; line-height:1.45; }
.clan-guide-copy li::before { content:""; position:absolute; left:0; top:.52em; width:7px; height:7px; border:1px solid var(--gold); border-radius:2px; }
.clan-guide-action { justify-self:start; margin-top:3px; }

.clan-guide-visual {
  display:grid;
  grid-template-rows:36px minmax(250px,1fr);
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(245,185,48,.22);
  border-radius:8px;
  background:#0c1218;
  box-shadow:0 14px 36px rgba(0,0,0,.22);
}

.guide-visual-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#b7c2cc;
  background:#111920;
  font-size:11px;
  font-weight:850;
}

.guide-visual-bar b { color:var(--gold); }

.guide-visual-columns {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  align-self:start;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.guide-visual-columns i,
.guide-form-preview i {
  display:grid;
  place-items:center;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:#9eabb6;
  background:rgba(255,255,255,.025);
  font-size:10px;
  font-style:normal;
  font-weight:800;
  text-align:center;
}

.guide-visual-focus {
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  padding:24px;
}
.guide-visual-focus strong { color:var(--text); font-size:20px; }
.guide-visual-focus span { color:var(--gold); font-size:11px; }

.guide-form-preview {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:center;
  padding:24px;
}

.guide-form-preview i { min-height:48px; place-items:start; align-content:center; padding:0 12px; }

.guide-application-preview,
.guide-discord-preview {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-content:center;
  align-items:center;
  padding:28px;
}

.guide-application-preview strong,
.guide-discord-preview strong { grid-column:1/-1; color:var(--text); font-size:16px; }
.guide-application-preview span,
.guide-discord-preview span { grid-column:1/-1; color:var(--muted); font-size:11px; }
.guide-application-preview button,
.guide-discord-preview button,
.guide-ready-preview button,
.guide-war-preview button {
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(245,185,48,.4);
  border-radius:6px;
  color:var(--gold);
  background:rgba(245,185,48,.1);
  font-size:10px;
  font-weight:900;
}
.guide-application-preview i { color:#ff9393; font-size:10px; font-style:normal; font-weight:850; }

.guide-tree-preview {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:center;
  padding:26px 48px;
}
.guide-tree-preview strong { grid-column:1/-1; justify-self:center; padding:10px 24px; border:1px solid rgba(245,185,48,.38); border-radius:6px; color:var(--gold); }
.guide-tree-preview span,
.guide-tree-preview i { padding:9px; border:1px solid rgba(255,255,255,.09); border-radius:6px; color:#c9d2da; text-align:center; font-size:10px; font-style:normal; }
.guide-tree-preview i { margin:0 15px; color:var(--muted); }

.guide-access-preview {
  display:grid;
  grid-template-columns:minmax(86px,1fr) repeat(3,minmax(54px,.7fr));
  gap:1px;
  align-content:center;
  padding:24px;
}
.guide-access-preview > * { display:grid; place-items:center; min-height:34px; margin:0; border:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:9px; font-style:normal; }
.guide-access-preview strong,.guide-access-preview span { justify-items:start; padding-left:10px; color:#d7dee5; }
.guide-access-preview i { color:#76dc91; }

.guide-pool-preview {
  display:grid;
  grid-template-columns:minmax(120px,1fr) 70px repeat(2,70px);
  gap:7px;
  align-content:center;
  padding:24px;
}
.guide-pool-preview > * { min-height:34px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:var(--muted); font-size:9px; font-style:normal; }
.guide-pool-preview strong { color:var(--text); }
.guide-pool-preview i { color:var(--gold); text-align:center; }

.guide-drag-preview {
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:22px;
}
.guide-drag-preview section { display:grid; gap:7px; }
.guide-drag-preview section > * { padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:var(--muted); font-size:10px; }
.guide-drag-preview section strong { color:var(--gold); }
.guide-drag-preview > i { color:var(--gold); font-size:24px; font-style:normal; text-align:center; }
.guide-drag-preview .dragging { border-color:rgba(245,185,48,.65); background:rgba(245,185,48,.12); color:var(--text); }
.guide-drag-preview .target { border-style:dashed; border-color:#63c87d; color:#77dd91; }

.guide-ready-preview,
.guide-war-preview {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-content:center;
  align-items:center;
  padding:28px;
}
.guide-ready-preview strong { grid-column:1/-1; color:var(--text); text-align:center; }
.guide-ready-preview i { display:grid; place-items:center; width:34px; height:34px; justify-self:center; border:1px solid rgba(255,255,255,.1); border-radius:50%; color:var(--muted); font-style:normal; }
.guide-ready-preview i.ready { border-color:#49b968; color:#76dc91; background:rgba(73,185,104,.1); }
.guide-ready-preview button { grid-column:1/-1; justify-self:center; }
.guide-ready-preview span { padding:9px; border:1px solid rgba(245,185,48,.22); border-radius:6px; color:var(--gold); font-size:10px; text-align:center; }

.guide-war-preview strong { padding:14px 8px; border:1px solid rgba(245,185,48,.3); border-radius:7px; color:var(--text); text-align:center; }
.guide-war-preview > i { color:var(--gold); font-style:normal; font-weight:950; text-align:center; }
.guide-war-preview span { padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:var(--muted); font-size:10px; text-align:center; }
.guide-war-preview button { grid-column:1/-1; justify-self:center; }

.guide-discord-preview { grid-template-columns:minmax(0,1fr) auto; }
.guide-discord-preview i { color:#b6a4ff; font-size:11px; font-style:normal; font-weight:900; }

.guide-stats-preview {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:14px 12px;
  align-content:center;
  padding:30px;
}
.guide-stats-preview strong { color:#cbd4dd; font-size:10px; }
.guide-stats-preview i { position:relative; display:block; height:10px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.07); }
.guide-stats-preview i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--guide-value); background:var(--gold); }

.clan-guide-controls {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 28px;
  border-top:1px solid rgba(255,255,255,.08);
}
.clan-guide-controls span { justify-self:center; color:var(--muted); font-size:11px; }
.clan-guide-controls span b { color:var(--gold); }
.clan-guide-controls button {
  min-width:86px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.clan-guide-controls button:last-child { border-color:rgba(245,185,48,.4); color:var(--gold); background:rgba(245,185,48,.09); }
.clan-guide-controls button:disabled { opacity:.38; cursor:default; }

.clan-guide-complete {
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-top:1px solid rgba(245,185,48,.18);
  background:rgba(245,185,48,.035);
}
.clan-guide-complete > div { display:grid; gap:3px; }
.clan-guide-complete strong { color:var(--text); font-size:13px; }
.clan-guide-complete span { color:var(--muted); font-size:11px; }
.clan-guide-complete button { cursor:pointer; }

@media (max-width:1100px) {
  .clan-guide-layout { grid-template-columns:1fr; }
  .clan-guide-nav { grid-template-columns:repeat(6,minmax(120px,1fr)); overflow-x:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .clan-guide-nav button.active { box-shadow:inset 0 -3px 0 var(--gold); }
  .clan-guide-step { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .clan-guide-prompt { grid-template-columns:40px minmax(0,1fr) 30px; }
  .clan-guide-prompt > a { grid-column:1/-1; }
  .clan-guide-head { padding:18px 16px; }
  .clan-guide-head h2 { font-size:20px; }
  .clan-guide-nav { grid-template-columns:repeat(12,140px); }
  .clan-guide-step { gap:20px; padding:20px 16px; }
  .clan-guide-step h3 { font-size:19px; }
  .clan-guide-visual { grid-template-rows:34px minmax(220px,1fr); }
  .guide-visual-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clan-guide-complete { align-items:stretch; flex-direction:column; }
  .clan-guide-controls { padding:12px 16px; }
}

.clan-panel a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.06);
}

.clan-discord-edit {
  margin-top: 14px;
}

.clan-discord-edit label {
  display: grid;
  gap: 6px;
}

.clan-discord-edit label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.clan-discord-edit input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.045);
}

.clan-discord-edit button {
  margin-top: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(99,217,113,.5);
  border-radius: 7px;
  color: #a8f4b1;
  background: rgba(99,217,113,.1);
  font-weight: 900;
  cursor: pointer;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.stat-strip article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  min-height: 82px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}

.stat-strip article:last-child {
  border-right: 0;
}

.stat-strip article > i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  align-self: center;
  width: 34px;
  height: 34px;
  font-style: normal;
}

.stat-strip svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
}

.stat-strip .squad-score-stat > i {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
  position: relative;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(245, 185, 48, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .09), transparent 55%),
    rgba(13, 18, 24, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(0,0,0,.18);
}

.stat-strip .squad-score-stat > i::before {
  content: none;
}

.stat-strip .squad-profile-stat-kd > i::before {
  background: var(--scoreboard-gold);
}

.stat-strip .squad-profile-stat-kd > i {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.stat-strip .squad-profile-stat-deaths > i::before {
  background: var(--scoreboard-red);
}

.stat-strip .squad-profile-stat-deaths > i {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.stat-strip .squad-score-stat svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  color: #fff;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.35;
  filter: var(--squad-scoreboard-icon-filter, none) drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(255,255,255,.12));
}

.stat-strip span {
  color: var(--muted);
  font-size: 13px;
}

.stat-strip strong {
  font-size: 20px;
}

.stat-strip .green strong,
.stat-strip .green svg {
  color: var(--green);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.roles-panel {
  grid-column: 1;
  grid-row: 1;
}

.stats-inline {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}

.right-column {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.panel {
  padding: 20px;
}

.panel-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-head span,
.legend,
.activity-list span,
.recent-row p,
.role-card p {
  color: var(--muted);
  font-size: 13px;
}

.roles-panel .confidence-note {
  margin: -6px 0 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.legend {
  gap: 10px;
}

.legend span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}

.legend i {
  width: 12px;
  height: 12px;
  background: linear-gradient(90deg, rgba(245,185,48,.3), transparent);
}

.role-tier-guide {
  display: grid;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.13);
}

.role-tier-guide-page {
  margin: 0 0 14px;
}

.role-tier-guide h2 {
  margin: 0;
  font-size: 18px;
}

.role-tier-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tier-guide-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tier-guide-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  font-size: 12px;
}

.tier-guide-item b {
  color: var(--text);
  font-size: 11px;
}

.tier-guide-item.tier-1,
.tier-guide-item.tier-2 {
  border-color: rgba(245,185,48,.3);
  background: rgba(245,185,48,.07);
}

.tier-guide-item.tier-3,
.tier-guide-item.tier-4 {
  border-color: rgba(99,219,74,.28);
  background: rgba(99,219,74,.07);
}

.tier-guide-item.tier-5,
.tier-guide-item.tier-6 {
  border-color: rgba(202,97,255,.36);
  background: rgba(202,97,255,.08);
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.role-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto minmax(28px, auto) 5px;
  gap: 10px 12px;
  min-height: 136px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(22, 31, 40, .88), rgba(8, 13, 18, .8));
}

.role-card.tier-advanced {
  border-color: rgba(99, 219, 74, .28);
}

.role-card.tier-elite {
  border-color: rgba(202, 97, 255, .36);
}

.role-card.role-commander .role-icon-wrap {
  border: 1px solid rgba(245,185,48,.72);
  box-shadow: inset 0 0 0 1px rgba(245,185,48,.22), 0 0 18px rgba(245,185,48,.13);
}

.role-card.role-commander .role-icon-wrap img {
  filter: var(--commander-icon-filter);
}

.role-icon-wrap {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
}

.role-icon-wrap img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.role-card strong {
  display: block;
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-card p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier-line {
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  gap: 10px;
  margin-top: 8px;
  min-width: 0;
}

.tier-line span {
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
}

.tier-advanced .tier-line span {
  color: var(--green);
}

.tier-elite .tier-line span {
  color: var(--purple);
}

.tier-line em {
  min-width: 0;
  overflow: hidden;
  color: #d7dce3;
  font-style: normal;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier-line b {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.progress {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, var(--green) 0 18px, transparent 18px 24px);
}

.tier-regular .progress i {
  background: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 24px);
}

.tier-elite .progress i {
  background: repeating-linear-gradient(90deg, var(--purple) 0 18px, transparent 18px 24px);
}

.role-kd {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.vehicle-skill .role-icon-wrap img {
  max-width: 42px;
  max-height: 34px;
}

.vehicle-skill .tier-line span {
  min-width: 72px;
}

.vehicle-skill .progress i {
  background: repeating-linear-gradient(90deg, var(--blue) 0 18px, transparent 18px 24px);
}

.more-button {
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #cfd6df;
  background: rgba(255,255,255,.025);
}

.right-column {
  display: grid;
  gap: 14px;
}

.activity-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.activity-list li {
  gap: 12px;
  min-height: 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.activity-list li:last-child {
  border-bottom: 0;
}

.activity-list svg {
  color: var(--gold);
  width: 16px;
  height: 16px;
}

.activity-list strong {
  margin-left: auto;
}

.preference-panel {
  display: grid;
  gap: 14px;
}

.pref-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hex {
  display: grid;
  place-items: center;
  width: 48px;
  height: 54px;
  background: linear-gradient(145deg, rgba(245,185,48,.2), rgba(143,183,255,.08));
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.hex img {
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
}

.tag-cloud {
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #d5dbe3;
  font-size: 12px;
}

.tag-cloud .faction-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 8px;
}

.tag-cloud .faction-tag b {
  font-size: inherit;
  font-weight: inherit;
}

.tag-cloud .faction-tag .faction-flag-img,
.tag-cloud .faction-tag .faction-flag {
  width: 34px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
}

.clan-info-readonly .tag-cloud span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(245,185,48,.22);
  background: rgba(245,185,48,.06);
  color: var(--gold);
  font-weight: 900;
}

.clan-mode-strip {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.clan-mode-strip strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.clan-mode-strip div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.clan-mode-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(245,185,48,.22);
  border-radius: 999px;
  background: rgba(245,185,48,.06);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.recent-panel {
  display: grid;
  gap: 12px;
}

.lfc-panel {
  display: grid;
  gap: 12px;
}

.lfc-panel p {
  color: var(--muted);
  font-size: 13px;
}

.lfc-fields {
  display: grid;
  gap: 7px;
}

.lfc-fields span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  color: #d5dbe3;
  font-size: 12px;
}

.vehicle-stack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.vehicle-stack article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.vehicle-stack img,
.vehicle-leader img {
  width: 54px;
  height: 42px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0,0,0,.22);
}

.vehicle-stack span {
  color: var(--muted);
  font-size: 11px;
}

.vehicle-stack strong {
  color: #f4f7fb;
  font-size: 13px;
}

.vehicle-stack em {
  color: var(--green);
  font-style: normal;
  font-size: 12px;
}

.vehicle-item span,
.vehicle-item strong {
  grid-column: 2;
}

.vehicle-item em {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.vehicle-leader {
  min-height: 64px;
}

.recent-row {
  gap: 10px;
}

.event-thumb {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: rgba(245,185,48,.12);
  color: var(--gold);
}

.event-status {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(99,219,74,.12);
  color: var(--green);
  font-style: normal;
  font-size: 12px;
}

.event-status.status-pending {
  background: rgba(245,185,48,.12);
  color: var(--gold);
}

.event-status.status-signed,
.event-status.status-attended,
.event-status.status-accepted {
  background: rgba(99,219,74,.12);
  color: var(--green);
}

.event-status.status-waitlist {
  background: rgba(88,166,255,.12);
  color: var(--blue);
}

.event-status.status-declined,
.event-status.status-no_show {
  background: rgba(255,91,91,.12);
  color: #ff8d8d;
}

.stats-panel {
  margin-top: 14px;
}

.content > .stats-panel:not(.stats-inline) {
  display: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.stats-grid article {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.stats-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stats-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
}

.stat-source-select {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-source-select span,
.panel-note {
  color: var(--muted);
  font-size: 13px;
}

.stat-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.stat-source-grid article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.stat-source-grid span,
.stat-source-grid em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.chart-card {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 10, 14, .72);
}

.chart-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.chart-tabs .active {
  color: var(--text);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
}

.line-chart {
  width: 100%;
  height: 190px;
}

.grid-line {
  stroke: rgba(255,255,255,.07);
  stroke-width: 1;
}

.area {
  fill: rgba(99,219,74,.16);
}

.line {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
}

.empty {
  color: var(--muted);
}

.training-panel {
  margin-top: 14px;
}

.training-list {
  display: grid;
  gap: 10px;
}

.training-list article {
  display: grid;
  grid-template-columns: 1fr 120px 90px 220px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.training-list strong,
.training-list span {
  display: block;
}

.training-list span {
  color: var(--muted);
  font-size: 12px;
}

.training-list em {
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
}

.training-list b {
  color: var(--green);
}

.section-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  margin-bottom: 14px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(245,185,48,.10), transparent 46%),
    var(--panel);
}

.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.section-hero h1 {
  margin-bottom: 10px;
}

.section-hero p {
  color: var(--muted);
}

.section-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 8px;
  min-width: 420px;
}

.metrics-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.section-metrics article,
.section-card,
.hub-row,
.leader-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.section-metrics article {
  padding: 12px;
}

.section-metrics span,
.section-card p,
.hub-row span {
  color: var(--muted);
  font-size: 13px;
}

.section-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.slots-pill {
  display: inline-flex;
  gap: 2px;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(99,219,74,.35);
  border-radius: 999px;
  background: rgba(99,219,74,.12);
  color: var(--green);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.slots-pill b {
  color: var(--green);
}

.slots-pill span {
  color: var(--muted);
}

.reputation-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.reputation-row + .reputation-row {
  margin-top: 10px;
}

.reputation-row span {
  color: var(--muted);
  font-size: 12px;
}

.rep-bars {
  display: grid;
  gap: 7px;
}

.rep-bars span {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.rep-bars i {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.45) calc(10% - 1px) 10%),
    rgba(255,255,255,.08);
  overflow: hidden;
}

.rep-bars i::before {
  content: "";
  display: block;
  width: calc(var(--score) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.rep-bars i.rep-negative::before {
  background: #ff5f5f;
}

.rep-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(10% - 1px),
    rgba(0,0,0,.55) calc(10% - 1px) 10%
  );
  pointer-events: none;
}

.feedback-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.feedback-form label {
  display: grid;
  gap: 6px;
}

.feedback-form label span {
  color: var(--muted);
  font-size: 12px;
}

.feedback-form button {
  min-height: 38px;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.players-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.section-filter-row {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 14px;
}

.section-filter-row a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-weight: 900;
}

.section-filter-row a.active {
  border-color: rgba(245,185,48,.5);
  color: var(--gold);
  background: rgba(245,185,48,.1);
}

.player-section-card h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.clan-section-card {
  align-items: start;
}

.roster-tree {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.roster-tree h3 {
  margin: 0 0 2px;
  color: #f2f5f8;
  font-size: 13px;
}

.roster-branch {
  display: grid;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(245,185,48,.28);
}

.roster-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(9,14,20,.5);
}

.roster-line b {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
}

.roster-line span {
  color: #edf2f7;
  font-weight: 800;
}

.roster-line em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.roster-line.member {
  margin-left: 18px;
}

.roster-line.empty span {
  color: var(--muted);
  font-weight: 600;
}

.section-card h2 {
  margin-bottom: 6px;
  font-size: 18px;
}

.section-card > svg {
  width: 42px;
  height: 42px;
  color: var(--gold);
}

.section-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}

.section-card-meta {
  display: grid;
  gap: 3px;
  min-width: 112px;
  text-align: right;
}

.section-card-meta strong {
  color: var(--gold);
  font-size: 20px;
}

.section-card-meta span {
  color: var(--muted);
  font-size: 12px;
}

.section-card-meta a,
.section-card > a {
  justify-self: end;
  padding: 8px 10px;
  border: 1px solid rgba(245,185,48,.32);
  border-radius: 7px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.section-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.section-columns .panel:first-child:nth-last-child(3),
.section-columns .panel:first-child:nth-last-child(3) ~ .panel {
  min-height: 280px;
}

.hub-row,
.leader-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-top: 10px;
  padding: 12px;
}

.hub-row {
  align-items: flex-start;
  flex-direction: column;
}

.hub-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.hub-row a {
  padding: 7px 10px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 7px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.leader-row strong {
  color: var(--gold);
}

.leader-row b {
  margin-left: auto;
  color: var(--green);
}

.section-role-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-settings-form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.settings-page-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 164px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,11,15,.96), rgba(11,17,24,.74)),
    radial-gradient(circle at 78% 18%, rgba(245,185,48,.18), transparent 34%),
    linear-gradient(135deg, rgba(29,42,51,.9), rgba(5,8,11,.94));
}

.settings-page-hero span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-page-hero h1 {
  margin-top: 6px;
  font-size: 34px;
}

.settings-page-hero p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.settings-page-hero a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(245,185,48,.35);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.1);
  font-weight: 850;
  white-space: nowrap;
}

.profile-settings-page-panel {
  margin-top: 14px;
}

.profile-settings-page-panel .profile-settings-form {
  margin: 0;
  gap: 18px;
}

.settings-sync-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(64, 217, 96, .24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(9, 25, 18, .72), rgba(12, 18, 24, .9)),
    rgba(255, 255, 255, .025);
}

.settings-sync-card strong {
  display: block;
  font-size: 15px;
}

.settings-sync-card p {
  max-width: 720px;
  margin: 5px 0 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-sync-card span {
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
}

.settings-sync-card form {
  margin: 0;
}

.settings-sync-card button,
.settings-discord-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(64, 217, 96, .42);
  border-radius: 7px;
  color: #b9ffbf;
  background: rgba(64, 217, 96, .12);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.settings-sync-card button:hover,
.settings-discord-button:hover {
  border-color: rgba(64, 217, 96, .72);
  background: rgba(64, 217, 96, .18);
}

.settings-sync-card button:disabled {
  cursor: not-allowed;
  color: rgba(205, 216, 230, .5);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}

.discord-bind-card {
  border-color: rgba(251, 191, 36, .34);
  background:
    linear-gradient(90deg, rgba(42, 32, 10, .7), rgba(12, 18, 24, .9)),
    rgba(255, 255, 255, .025);
}

.discord-bind-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.discord-bind-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, .38);
  object-fit: cover;
}

.settings-danger-button {
  color: #ffcaca !important;
  border-color: rgba(255, 95, 95, .45) !important;
  background: rgba(255, 95, 95, .1) !important;
}

.settings-danger-button:hover {
  border-color: rgba(255, 95, 95, .78) !important;
  background: rgba(255, 95, 95, .16) !important;
}

.settings-sync-card svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.challenges-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
  gap: 16px 18px;
  width: min(1910px, calc(100vw - 8px));
  max-width: 1910px;
  margin-inline: auto;
}

.challenges-page:not(.challenge-detail-page) {
  grid-template-columns: minmax(0, 1320px);
  justify-content: center;
}

.challenges-page:not(.challenge-detail-page) .challenge-hero {
  grid-column: 1;
}

.challenge-create-page {
  display: block;
  width: min(1520px, calc(100vw - 36px));
  max-width: 1520px;
  margin-inline: auto;
}

.challenge-hero {
  grid-column: 1;
  min-height: 126px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.challenge-hero.compact {
  min-height: 104px;
}

.challenge-create-page .challenge-hero.compact {
  width: min(100%, 1320px);
  margin-inline: auto;
  justify-content: center;
  text-align: center;
}

.challenge-create-page .challenge-hero.compact > div {
  display: grid;
  justify-items: center;
  max-width: 760px;
}

.challenge-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 136px;
}

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

.challenge-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(245, 185, 48, .48);
  border-radius: 7px;
  background: rgba(245, 185, 48, .13);
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.challenge-primary-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.challenge-filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 185, 48, .32);
  border-radius: 7px;
  background: rgba(245, 185, 48, .08);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.challenge-journal-grid {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.challenge-journal-panel {
  min-width: 0;
}

.challenge-journal-grid.compact-center {
  grid-template-columns: minmax(0, 1120px);
  justify-content: center;
}

.challenge-all-panel {
  width: 100%;
}

.challenge-past-panel {
  grid-column: 1;
  width: min(1088px, 100%);
  justify-self: center;
}

.challenge-upcoming-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 78px;
}

.challenge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  border: 1px solid rgba(245, 185, 48, .34);
  border-radius: 7px;
  background: rgba(245, 185, 48, .1);
  color: var(--gold);
  font-weight: 950;
}

.challenge-count.muted {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.challenge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.challenge-list {
  display: grid;
  gap: 8px;
}

.challenge-record {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  text-decoration: none;
}

.challenge-record:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.06);
}

.challenge-row-upcoming .challenge-record {
  border-color: rgba(87, 232, 104, .42);
  background: linear-gradient(90deg, rgba(43, 142, 55, .13), rgba(255,255,255,.035));
}

.challenge-row-past .challenge-record {
  border-color: rgba(245,185,48,.22);
}

.challenge-record-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.challenge-record-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.challenge-record strong,
.challenge-record em {
  display: block;
  min-width: 0;
}

.challenge-record strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-record em {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-record b,
.challenge-record small {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.challenge-record b {
  color: var(--green);
}

.challenge-record.status-cancelled b,
.challenge-record.status-declined b {
  color: #ff9d9d;
}

.challenge-record.status-completed b {
  color: var(--gold);
}

.challenge-record small {
  color: var(--muted);
}

.challenge-upcoming-panel .challenge-record {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 8px;
}

.challenge-upcoming-panel .challenge-record-icon {
  width: 30px;
  height: 30px;
}

.challenge-upcoming-panel .challenge-record small {
  display: none;
}

.challenge-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}

.challenge-upcoming-panel .challenge-card {
  padding: 10px;
}

.challenge-card-head,
.challenge-actions,
.challenge-match-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.challenge-card-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.challenge-card-head h2,
.challenge-card-head h3 {
  margin-top: 4px;
  font-size: 19px;
}

.challenge-upcoming-panel .challenge-card-head h3 {
  font-size: 13px;
  line-height: 1.25;
}

.challenge-card-head h2 b,
.challenge-card-head h3 b {
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
}

.challenge-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.challenge-upcoming-panel .challenge-meta-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}

.challenge-meta-grid span,
.challenge-match-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.challenge-meta-grid svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}

.challenge-message,
.challenge-rules {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.45;
}

.challenge-match-line {
  margin-top: 12px;
}

.challenge-upcoming-panel .challenge-match-line {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.challenge-upcoming-panel .challenge-match-line b {
  display: none;
}

.challenge-upcoming-panel .challenge-message,
.challenge-upcoming-panel .challenge-rules {
  display: none;
}

.challenge-match-line span {
  flex: 1;
  border-color: rgba(245, 185, 48, .2);
  justify-content: space-between;
}

.challenge-match-line span em {
  color: #76ff87;
  font-size: 11px;
  font-style: normal;
}

.challenge-match-line b {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
}

.challenge-round-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(245, 185, 48, .18);
  border-radius: 7px;
  background: rgba(245, 185, 48, .045);
}

.challenge-round-maps span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.challenge-round-maps em {
  color: #9ff5a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.challenge-result-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(245, 185, 48, .24);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(245, 185, 48, .08), rgba(64, 217, 96, .045));
}

.challenge-result-score span {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-result-score span:last-of-type {
  text-align: right;
}

.challenge-result-score strong {
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid rgba(245, 185, 48, .38);
  border-radius: 7px;
  color: var(--gold);
  font-size: 22px;
  font-weight: 1000;
  text-align: center;
}

.challenge-result-score em {
  grid-column: 1 / -1;
  color: #9ff5a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.challenge-result-notes {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  line-height: 1.45;
}

.challenge-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.challenge-actions form,
.challenge-setup-form,
.challenge-create-panel form {
  margin: 0;
}

.challenge-actions button,
.challenge-setup-form button,
.challenge-create-panel button,
.challenge-submit {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(64, 217, 96, .42);
  border-radius: 7px;
  background: rgba(64, 217, 96, .12);
  color: #b9ffbf;
  font-weight: 900;
  cursor: pointer;
}

.challenge-actions button.danger {
  border-color: rgba(255, 92, 92, .45);
  background: rgba(255, 92, 92, .12);
  color: #ffb0b0;
}

.challenge-actions button.muted {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.challenge-setup-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.challenge-setup-form button,
.challenge-submit {
  grid-column: 1 / -1;
}

.challenge-create-panel {
  position: sticky;
  top: 78px;
}

.challenge-detail-page {
  width: min(1500px, calc(100vw - 36px));
  max-width: none;
  padding-top: 18px;
}

.challenge-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.challenge-detail-main .challenge-card {
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
}

.challenge-detail-side {
  position: sticky;
  top: 78px;
}

.challenge-result-grid {
  align-items: stretch;
}

.challenge-detail-page .challenge-card-head {
  align-items: flex-start;
}

.challenge-detail-page .challenge-card-head > div,
.challenge-detail-page .challenge-card-head h3,
.challenge-detail-page .challenge-meta-grid span,
.challenge-detail-page .challenge-match-line span,
.challenge-detail-page .challenge-round-maps span,
.challenge-detail-page .challenge-linked-card,
.challenge-detail-page .challenge-linked-card strong,
.challenge-detail-page .challenge-linked-card em {
  min-width: 0;
}

.challenge-detail-page .challenge-card-head h3,
.challenge-detail-page .challenge-meta-grid span,
.challenge-detail-page .challenge-match-line span,
.challenge-detail-page .challenge-round-maps span {
  overflow-wrap: anywhere;
}

.challenge-detail-page .challenge-match-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.challenge-detail-page .challenge-match-line span {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.challenge-detail-page .challenge-setup-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.challenge-detail-page .training-faction-menu,
.challenge-detail-page .challenge-faction-menu,
.challenge-detail-page .challenge-doctrine-menu {
  width: min(360px, calc(100vw - 48px));
  max-width: 100%;
}

.challenge-detail-page .challenge-linked-card {
  grid-template-columns: 78px minmax(0, 1fr) minmax(110px, auto);
}

.notifications-page {
  max-width: 1180px;
}

.notifications-panel {
  margin-top: 14px;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  text-decoration: none;
}

.notification-row:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.055);
}

.notification-row.status-new {
  border-color: rgba(87, 232, 104, .36);
}

.notification-type {
  display: inline-flex;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid rgba(245,185,48,.26);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
}

.notification-row strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.challenge-linked-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.challenge-linked-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: inherit;
  text-decoration: none;
}

.challenge-linked-card:hover {
  border-color: rgba(245, 185, 48, .36);
  background: rgba(245, 185, 48, .055);
}

.challenge-linked-card span {
  padding: 4px 7px;
  border: 1px solid rgba(245, 185, 48, .32);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
}

.challenge-linked-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-linked-card em,
.challenge-linked-card small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.challenge-linked-card em {
  grid-column: 2 / 3;
}

.challenge-linked-card small {
  text-align: right;
}

.challenge-result-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.challenge-result-rounds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.challenge-result-form label {
  display: grid;
  gap: 5px;
}

.challenge-result-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.challenge-result-form input,
.challenge-result-form select,
.challenge-result-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(3,7,10,.72);
  color: var(--text);
  font: inherit;
}

.challenge-result-form textarea {
  resize: vertical;
}

.challenge-result-check {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 8px !important;
}

.challenge-result-check input {
  width: 16px;
  min-height: 16px;
}

.training-result-panel.compact-result {
  margin-top: 14px;
}

.training-result-score.compact {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 5px 8px;
  align-items: center;
  min-width: 250px;
  padding: 8px 10px;
}

.training-result-score.compact em {
  grid-column: 1 / -1;
}

.training-result-form.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.training-result-form.compact .challenge-result-rounds {
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
}

.training-result-form.compact label {
  gap: 4px;
}

.training-result-form.compact input,
.training-result-form.compact select {
  min-height: 34px;
}

.training-result-form.compact .training-result-note {
  min-width: 0;
}

.training-result-log {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.training-result-log h3 {
  margin: 0;
  font-size: 13px;
}

.training-result-log-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.training-result-log-list article {
  display: grid;
  grid-template-columns: 100px 130px 100px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 12px;
}

.training-result-log-list strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-result-log-list em {
  color: #9af0a6;
  font-style: normal;
  font-weight: 850;
}

.training-result-log-list b {
  overflow: hidden;
  color: var(--gold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-detail-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.challenge-detail-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}

.challenge-detail-list dt,
.challenge-detail-list dd {
  margin: 0;
  font-size: 12px;
  font-weight: 850;
}

.challenge-detail-list dt {
  color: var(--muted);
}

.challenge-detail-list dd {
  color: var(--text);
  text-align: right;
}

.challenge-create-panel form,
.challenge-create-form {
  display: grid;
  gap: 10px;
}

.challenge-setup-form label,
.challenge-create-panel label,
.challenge-create-form label {
  display: grid;
  gap: 5px;
}

.challenge-setup-form label span,
.challenge-create-panel label span,
.challenge-create-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.challenge-opponent-field em,
.external-opponent-badge {
  color: #9ff5a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.challenge-setup-form input,
.challenge-setup-form select,
.challenge-create-panel input,
.challenge-create-panel select,
.challenge-create-panel textarea,
.challenge-create-form input,
.challenge-create-form select,
.challenge-create-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(3,7,10,.72);
  color: var(--text);
  font: inherit;
}

.challenge-create-panel textarea,
.challenge-create-form textarea {
  resize: vertical;
}

.challenge-create-wide {
  margin-top: 14px;
}

.challenge-create-page .challenge-create-wide {
  width: min(100%, 1320px);
  max-width: none;
  margin: 16px auto 0;
  padding: 18px;
}

.challenge-create-page .challenge-create-form {
  justify-items: stretch;
}

.challenge-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.challenge-create-page .challenge-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.challenge-message-field {
  grid-column: span 2;
}

.challenge-create-page .challenge-message-field {
  grid-column: span 2;
}

.challenge-create-page .challenge-submit {
  justify-self: end;
  width: min(100%, 320px);
  margin-top: 4px;
}

.challenge-empty {
  display: grid;
  gap: 6px;
  padding: 20px;
}

.challenge-empty strong {
  color: var(--gold);
}

.clan-card-challenge-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(245, 185, 48, .22);
  border-radius: 8px;
  background: rgba(245, 185, 48, .055);
}

.clan-card-challenge-form div {
  display: grid;
  gap: 4px;
}

.clan-card-challenge-form strong {
  color: var(--gold);
  font-size: 14px;
}

.clan-card-challenge-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.clan-card-challenge-form label {
  display: grid;
  gap: 5px;
}

.clan-card-challenge-form input,
.clan-card-challenge-form select {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(3,7,10,.76);
  color: var(--text);
  font: inherit;
}

.clan-card-challenge-form button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(245, 185, 48, .42);
  border-radius: 7px;
  background: rgba(245, 185, 48, .14);
  color: var(--gold);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .landing-hero,
  .landing-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
  }

  .landing-copy {
    padding: 34px 22px;
  }

  .landing-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 22px 24px;
  }

  .challenges-page {
    display: block;
    width: min(100% - 20px, 760px);
  }

  .challenge-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .challenge-toolbar {
    align-items: stretch;
    min-width: 0;
  }

  .challenge-toolbar .challenge-primary-link,
  .challenge-toolbar .challenge-filter label {
    width: 100%;
  }

  .challenge-layout,
  .challenge-journal-grid,
  .challenge-detail-grid {
    grid-template-columns: 1fr;
  }

  .challenge-create-panel,
  .challenge-upcoming-panel,
  .challenge-detail-side {
    position: static;
  }

  .challenge-journal-grid {
    display: grid;
    margin-top: 14px;
  }

  .challenge-past-panel,
  .challenge-upcoming-panel {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .challenge-setup-form,
  .challenge-meta-grid,
  .challenge-form-grid {
    grid-template-columns: 1fr;
  }

  .challenge-message-field {
    grid-column: auto;
  }

  .challenge-match-line {
    align-items: stretch;
    flex-direction: column;
  }

  .clan-card-challenge-form {
    grid-template-columns: 1fr;
  }

  .training-summary {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    min-width: 0;
  }
}

.profile-settings-page-panel .settings-group {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.profile-settings-page-panel .settings-group strong {
  font-size: 15px;
}

.settings-group.is-hidden {
  display: none;
}

.settings-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-settings-page-panel .settings-pick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}

.segmented-control label,
.checkbox-grid label {
  cursor: pointer;
}

.segmented-control input,
.checkbox-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  display: block;
  min-height: 36px;
  padding: 9px 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.segmented-control input:checked + span {
  background: rgba(245,185,48,.16);
  color: var(--gold);
}

.settings-group {
  display: grid;
  gap: 8px;
}

.settings-group strong {
  font-size: 12px;
  color: var(--text);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.checkbox-grid span {
  display: block;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
}

.checkbox-grid input:checked + span {
  border-color: rgba(95,215,83,.45);
  color: var(--green);
  background: rgba(95,215,83,.08);
}

.settings-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 328px;
  padding-right: 3px;
  overflow: auto;
}

.pick-card {
  cursor: pointer;
}

.pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pick-card span {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
}

.pick-card input:checked + span {
  border-color: rgba(95,215,83,.5);
  background: rgba(95,215,83,.08);
  color: var(--green);
}

.pick-card img,
.pick-card svg {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.pick-card b,
.pick-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pick-card b {
  color: #edf2f7;
  font-size: 12px;
  line-height: 1.15;
}

.pick-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.pick-order {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(245,185,48,.92);
  color: #15110a;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.pick-order:empty {
  display: none;
}

.vehicle-pick-grid {
  max-height: 260px;
}

.vehicle-pick-image {
  width: 38px;
  height: 28px;
  border-radius: 5px;
  background: rgba(0,0,0,.22);
}

.vehicle-pick-type-icon {
  width: 38px;
  height: 30px;
  min-width: 38px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 7px;
  background-color: rgba(0,0,0,.24);
}

.profile-settings-form button {
  min-height: 38px;
  border: 1px solid rgba(245,185,48,.45);
  border-radius: 7px;
  color: #141009;
  background: var(--gold);
  font-weight: 900;
}

.training-detail-page {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.training-detail-hero {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,11,15,.95), rgba(10,16,22,.76)),
    radial-gradient(circle at 82% 28%, rgba(95,215,83,.16), transparent 32%),
    linear-gradient(135deg, rgba(25,37,45,.88), rgba(5,8,11,.96));
}

.training-detail-hero h1 {
  margin-top: 10px;
  font-size: 36px;
}

.training-detail-hero p {
  margin-top: 8px;
  color: var(--muted);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.back-link svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

.page-back-link {
  width: fit-content;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 7px;
  background: rgba(245,185,48,.06);
}

.training-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(104px, 1fr));
  gap: 8px;
  min-width: min(660px, 100%);
}

.training-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.training-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.training-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
}

.training-summary em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-playtime-summary strong {
  color: #9af0a6;
}

.training-rounds-card {
  position: relative;
}

.training-slot-edit-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 7px;
  color: var(--accent);
  background: rgba(245,185,48,.08);
  cursor: pointer;
}

.training-slot-edit-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.training-slot-edit-toggle.active {
  border-color: rgba(99,217,113,.72);
  color: #7dff87;
  background: rgba(99,217,113,.12);
}

.training-status-card.cancelled {
  border-color: rgba(255,95,95,.42);
  background: rgba(255,95,95,.08);
}

.training-status-card.cancelled strong {
  color: #ff9e9e;
}

.training-cancel-form {
  display: none;
  align-self: start;
  justify-self: end;
  margin: 0;
}

body.training-admin-mode .training-cancel-form {
  display: grid;
}

.training-cancel-form button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,95,95,.55);
  border-radius: 8px;
  background: rgba(255,95,95,.1);
  color: #ffb0b0;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.training-start-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
}

.training-start-form input {
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  font: inherit;
  font-size: 12px;
}

.training-start-form button {
  height: 30px;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-weight: 900;
}

.training-slot-panel {
  margin-top: 14px;
}

.training-slot-panel .panel-head {
  align-items: center;
}

.training-slot-panel .panel-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.training-history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 980px;
  margin-top: 10px;
}

.legend-note {
  color: var(--muted);
  font-size: 11px;
}

.legend-note b {
  color: var(--text);
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.legend-chip.rating {
  border-color: rgba(95,215,83,.18);
  color: #9af0a6;
  background: rgba(95,215,83,.035);
}

.legend-chip.stat {
  border-color: rgba(255,255,255,.16);
  color: #f2f4f7;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}

.legend-chip.squad-score-chip {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
  position: relative;
  min-height: 32px;
  padding: 6px 8px 4px;
  border-color: rgba(245, 185, 48, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .08), transparent 55%),
    rgba(13, 18, 24, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(0,0,0,.18);
  color: #f6f7f8;
}

.legend-chip.squad-score-chip::before,
.training-history-column-label.game-stat-label::before {
  content: none;
}

.legend-chip.squad-score-chip.stat-icon-1::before,
.training-history-column-label.game-stat-label.stat-icon-1::before {
  background: var(--scoreboard-gold);
}

.legend-chip.squad-score-chip.stat-icon-1,
.training-history-column-label.game-stat-label.stat-icon-1 {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.legend-chip.squad-score-chip.stat-icon-4::before,
.legend-chip.squad-score-chip.stat-icon-5::before,
.training-history-column-label.game-stat-label.stat-icon-4::before,
.training-history-column-label.game-stat-label.stat-icon-5::before {
  background: var(--scoreboard-red);
}

.legend-chip.squad-score-chip.stat-icon-4,
.legend-chip.squad-score-chip.stat-icon-5,
.training-history-column-label.game-stat-label.stat-icon-4,
.training-history-column-label.game-stat-label.stat-icon-5 {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.legend-chip svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}

.legend-chip[data-tooltip],
.training-history-column-label[data-tooltip] {
  position: relative;
}

.legend-chip[data-tooltip]::after,
.training-history-column-label[data-tooltip]::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 80;
  width: max-content;
  max-width: 240px;
  padding: 7px 9px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 7px;
  background: rgba(7,10,14,.98);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  color: var(--text);
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  transform: translate(-50%, 4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
}

.legend-chip[data-tooltip]:hover::after,
.training-history-column-label[data-tooltip]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ghost-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
}

.ghost-button:hover {
  border-color: rgba(245,185,48,.36);
  color: var(--gold);
}

.training-team-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.training-team-tabs-with-cameras {
  display: grid;
  grid-template-columns: minmax(150px, 220px) auto minmax(150px, 220px);
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
}

.training-match-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(78px, 96px)) minmax(150px, .9fr) minmax(240px, 1.45fr) minmax(150px, .9fr) repeat(2, minmax(78px, 96px));
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.training-match-side,
.training-match-map {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20,25,29,.9), rgba(11,15,18,.92));
}

.training-select-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.training-match-side span,
.training-match-map > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.training-match-side strong,
.training-match-map strong {
  min-width: 0;
  overflow: hidden;
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-match-form,
.training-map-form {
  min-width: 0;
  margin: 0;
}

.training-faction-form {
  position: relative;
}

.training-match-form select,
.training-map-form input,
.training-faction-toggle {
  width: 100%;
  min-height: 34px;
  min-width: 0;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.training-faction-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
}

.training-faction-toggle span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-faction-toggle > i {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.training-faction-form.open .training-faction-toggle {
  border-color: rgba(245,185,48,.72);
  background: rgba(245,185,48,.09);
  color: var(--gold);
}

.training-faction-toggle.doctrine {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}

.training-faction-form.open .training-faction-toggle.doctrine {
  border-color: rgba(95,215,83,.46);
  background: rgba(95,215,83,.08);
  color: #9af0a6;
}

.training-doctrine-readonly {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #9af0a6;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doctrine-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.doctrine-select-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.challenge-doctrine-picker {
  position: relative;
}

.challenge-doctrine-picker .training-faction-toggle {
  width: 100%;
}

.challenge-doctrine-menu {
  left: 0;
  right: 0;
  min-width: 220px;
  max-height: 260px;
  overflow: auto;
}

.challenge-doctrine-menu button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
}

.challenge-faction-picker {
  position: relative;
}

.challenge-faction-picker .training-faction-toggle {
  width: 100%;
}

.challenge-faction-menu {
  left: 0;
  right: 0;
  min-width: 220px;
  max-height: 280px;
  overflow: auto;
}

.challenge-faction-menu button,
.training-faction-menu button {
  align-items: center;
}

.faction-flag {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.18)),
    #24313a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08);
  color: #f8fbff;
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  text-transform: uppercase;
  vertical-align: -8px;
}

.faction-flag-img {
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), transparent 50%),
    #11181d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
  vertical-align: -8px;
}

.training-faction-menu button .faction-flag,
.challenge-faction-menu button .faction-flag,
.training-faction-menu button .faction-flag-img,
.challenge-faction-menu button .faction-flag-img {
  margin-right: 8px;
}

.training-match-side strong .faction-flag,
.challenge-match-line .faction-flag,
.training-match-side strong .faction-flag-img,
.challenge-match-line .faction-flag-img {
  margin-right: 6px;
}

.faction-flag::before,
.faction-flag::after {
  content: "";
  position: absolute;
}

.faction-flag::before {
  z-index: 1;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 1px;
  background: rgba(5,7,9,.78);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  opacity: 1;
}

.faction-flag::after {
  content: "SQ";
  position: relative;
  inset: auto;
  z-index: 2;
}

.faction-us-army::after { content: "USA"; }
.faction-usmc::after { content: "USMC"; }
.faction-rgf::after { content: "RGF"; }
.faction-vdv::after { content: "VDV"; }
.faction-british-army::after { content: "BAF"; }
.faction-caf::before,
.faction-caf::after,
.faction-canadian-armed-forces::before,
.faction-canadian-armed-forces::after,
.faction-canadian-resistance-forces::before,
.faction-canadian-resistance-forces::after,
.faction-mea::before,
.faction-mea::after {
  content: none;
}
.faction-adf::after { content: "ADF"; }
.faction-pla::after { content: "PLA"; }
.faction-plagf::after { content: "PLAAGF"; font-size: 7px; }
.faction-planmc::after { content: "PLANMC"; font-size: 8px; }
.faction-gfi::after { content: "GFI"; }
.faction-imf::after { content: "IMF"; }
.faction-militia::after { content: "IMF"; }
.faction-insurgents::after { content: "MEI"; }
.faction-turkish-land-forces::after { content: "TLF"; }
.faction-wpmc::after { content: "PMC"; }
.faction-afu::after { content: "AFU"; }

.faction-us-army {
  background:
    linear-gradient(90deg, rgba(15,43,104,.95) 0 42%, transparent 42%),
    repeating-linear-gradient(180deg, #c9272d 0 3px, #f8fafc 3px 6px);
}

.faction-usmc {
  background:
    radial-gradient(circle at 50% 50%, rgba(20,94,45,.95) 0 17%, transparent 18%),
    linear-gradient(90deg, #151515 0 20%, #c12a2a 20% 80%, #151515 80%);
}

.faction-british-army,
.faction-adf {
  background:
    linear-gradient(35deg, transparent 0 42%, #f8fafc 42% 48%, #b91c1c 48% 54%, #f8fafc 54% 60%, transparent 60%),
    linear-gradient(145deg, transparent 0 42%, #f8fafc 42% 48%, #b91c1c 48% 54%, #f8fafc 54% 60%, transparent 60%),
    linear-gradient(90deg, #102f6d 0 100%);
}

.faction-caf,
.faction-canadian-resistance-forces {
  background:
    linear-gradient(90deg, #c92323 0 27%, #f8fafc 27% 73%, #c92323 73%);
}

.faction-rgf {
  background:
    linear-gradient(180deg, #f8fafc 0 33%, #244f9e 33% 66%, #b62020 66%);
}

.faction-vdv {
  background:
    linear-gradient(180deg, #2f80d0 0 33%, #f7fafc 33% 44%, #2f80d0 44% 57%, #15549b 57%);
}

.faction-pla,
.faction-planmc {
  color: #ffe779;
  background:
    radial-gradient(circle at 12px 7px, #ffdf4d 0 3px, transparent 3.4px),
    linear-gradient(90deg, #c71f1f 0 100%);
}

.faction-afu {
  color: #fff7a8;
  background: linear-gradient(180deg, #2362d4 0 50%, #e6bd22 50%);
}

.faction-mea {
  background:
    linear-gradient(135deg, transparent 0 43%, #f7fafc 43% 51%, #111 51% 59%, transparent 59%),
    linear-gradient(90deg, #c12a2a 0 34%, #f8fafc 34% 66%, #1d7a46 66%);
}

.faction-insurgents {
  background:
    linear-gradient(145deg, transparent 0 43%, #111 43% 51%, #f0b12b 51% 59%, transparent 59%),
    linear-gradient(90deg, #f1f5f9 0 50%, #e29a27 50%);
}

.faction-militia {
  background:
    linear-gradient(145deg, transparent 0 43%, #111 43% 51%, #f7fafc 51% 59%, transparent 59%),
    linear-gradient(90deg, #1f7a44 0 50%, #c21f1f 50%);
}

.faction-turkish-land-forces {
  background:
    radial-gradient(circle at 13px 11px, #f8fafc 0 4px, transparent 4.4px),
    linear-gradient(90deg, #d22525 0 100%);
}

.faction-wpmc {
  background:
    radial-gradient(circle at 23px 13px, rgba(245,245,245,.18) 0 8px, transparent 8.5px),
    linear-gradient(145deg, transparent 0 43%, #cbd5e1 43% 51%, #dc2626 51% 59%, transparent 59%),
    #111827;
}

.faction-default {
  background: linear-gradient(135deg, #334155, #111827);
}

.doctrine-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: #f4f6f7;
  vertical-align: -4px;
}

.doctrine-icon-img {
  width: 46px;
  height: 26px;
  object-fit: contain;
  padding: 3px;
  border-color: rgba(245,185,48,.38);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(245,185,48,.13), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    rgba(13,19,23,.92);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
}

.training-faction-toggle .doctrine-icon-img,
.training-faction-menu button .doctrine-icon-img,
.challenge-doctrine-menu button .doctrine-icon-img,
.training-doctrine-readonly .doctrine-icon-img,
.doctrine-badge .doctrine-icon-img {
  width: 46px;
  height: 26px;
}

.training-faction-menu button .doctrine-icon {
  margin-right: 7px;
}

.doctrine-icon::before,
.doctrine-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.doctrine-infantry::before {
  left: 5px;
  top: 4px;
  width: 7px;
  height: 9px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

.doctrine-mechanized::before,
.doctrine-motorized::before,
.doctrine-armored::before {
  left: 3px;
  top: 6px;
  width: 12px;
  height: 6px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.doctrine-mechanized::after,
.doctrine-motorized::after,
.doctrine-armored::after {
  left: 4px;
  bottom: 3px;
  width: 10px;
  height: 3px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 1px 1px, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 5px 1px, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 9px 1px, currentColor 0 1px, transparent 1.5px);
}

.doctrine-mechanized::before {
  transform: skewX(-12deg);
}

.doctrine-motorized::before {
  border-radius: 1px 3px 3px 1px;
}

.doctrine-armored::before {
  top: 7px;
  height: 5px;
  border-radius: 999px;
}

.doctrine-armored::after {
  top: 4px;
  left: 7px;
  width: 7px;
  height: 2px;
  border-radius: 0;
  background: currentColor;
  box-shadow: -2px 2px 0 currentColor;
}

.doctrine-airborne::before {
  left: 3px;
  top: 8px;
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: rotate(-12deg);
}

.doctrine-airborne::after {
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  background: currentColor;
  transform: rotate(42deg);
}

.doctrine-amphibious::before {
  left: 3px;
  right: 3px;
  top: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.doctrine-amphibious::after {
  left: 3px;
  bottom: 3px;
  width: 12px;
  height: 5px;
  border-top: 2px solid currentColor;
  border-radius: 50%;
}

.doctrine-support::before {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -4px 0 -1px currentColor, 0 4px 0 -1px currentColor;
}

.doctrine-support::after {
  left: 8px;
  top: 4px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.doctrine-logistics::before {
  left: 4px;
  top: 5px;
  width: 10px;
  height: 9px;
  border: 2px solid currentColor;
}

.doctrine-logistics::after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 4px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.08);
}

.doctrine-recon::before {
  left: 3px;
  top: 7px;
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 7px 0 0 -2px rgba(0,0,0,.8), 7px 0 0 0 currentColor;
}

.doctrine-recon::after {
  left: 8px;
  top: 9px;
  width: 2px;
  height: 2px;
  background: currentColor;
}

.doctrine-irregular::before {
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  background: currentColor;
  transform: rotate(24deg);
}

.doctrine-irregular::after {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  background: currentColor;
  transform: rotate(-22deg);
}

.doctrine-default::before {
  inset: 4px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.training-faction-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 5px;
  max-height: 318px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 8px;
  background: rgba(7, 10, 14, .98);
  box-shadow: 0 18px 44px rgba(0,0,0,.58);
}

.training-faction-menu[hidden] {
  display: none;
}

.training-faction-menu button {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: #dce3eb;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.training-faction-toggle [class^="faction-"],
.training-faction-toggle .faction-flag-img {
  margin-right: 7px;
}

.training-faction-menu button:hover,
.training-faction-menu button:focus-visible {
  border-color: rgba(245,185,48,.7);
  color: #fff;
  background: rgba(245,185,48,.14);
  outline: none;
}

input.readonly,
input[readonly] {
  cursor: not-allowed;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: var(--muted);
}

.training-faction-menu button.active {
  border-color: rgba(95,215,83,.58);
  color: #9af0a6;
  background: rgba(95,215,83,.1);
}

.training-faction-menu button:disabled {
  opacity: .36;
  cursor: not-allowed;
}

.training-faction-menu button:disabled:hover {
  border-color: rgba(255,255,255,.08);
  color: #dce3eb;
  background: rgba(255,255,255,.035);
}

.training-match-form select {
  padding: 0 8px;
}

.training-map-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
}

.training-round-deck-form {
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
}

.training-round-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.training-round-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(245,185,48,.13), rgba(255,255,255,.035));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

a.training-round-card {
  text-decoration: none;
}

.training-round-card:not(button):not(a) {
  cursor: default;
}

.training-round-deck-readonly {
  width: 100%;
}

.training-round-card:hover,
.training-round-card.active {
  border-color: rgba(245,185,48,.78);
  background: linear-gradient(145deg, rgba(245,185,48,.22), rgba(12,16,19,.92));
  transform: translateY(-1px);
}

.training-round-card span {
  grid-column: 2;
  color: var(--gold);
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.training-round-card strong {
  grid-column: 2;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-round-card em {
  grid-column: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-mini-icon {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(245, 185, 48, 0.28);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 8px),
    #182127;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24);
  color: #f5c84d;
  font-style: normal;
  overflow: hidden;
}

.map-mini-icon::before,
.map-mini-icon::after {
  content: "";
  position: absolute;
  inset: 7px 5px auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.26);
  transform: rotate(-18deg);
}

.map-mini-icon::after {
  inset: auto 5px 8px;
  transform: rotate(22deg);
}

.map-mini-icon b {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
}

.map-mini-icon small {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 900;
}

.map-mini-desert {
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 238, 156, 0.2), transparent 24px),
    repeating-linear-gradient(22deg, rgba(98, 74, 35, 0.28) 0 5px, transparent 5px 12px),
    #43351f;
}

.map-mini-forest {
  background:
    radial-gradient(circle at 30% 34%, rgba(102, 192, 109, 0.22), transparent 18px),
    repeating-linear-gradient(-35deg, rgba(174, 222, 137, 0.1) 0 4px, transparent 4px 10px),
    #1d3326;
}

.map-mini-urban {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    #27313a;
  background-size: 11px 11px;
}

.map-mini-coast {
  background:
    linear-gradient(135deg, rgba(56, 147, 190, 0.58) 0 46%, rgba(56, 92, 63, 0.82) 47% 100%),
    #1b3440;
}

.map-mini-snow {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.32), transparent 20px),
    repeating-linear-gradient(45deg, rgba(188, 218, 231, 0.18) 0 4px, transparent 4px 10px),
    #31434b;
}

.map-mini-default {
  background:
    radial-gradient(circle at 32% 38%, rgba(245, 185, 48, 0.18), transparent 18px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 8px),
    #1b252b;
}

.map-mini-icon {
  --map-base: #1d2c2f;
  --map-land: rgba(83, 122, 72, 0.82);
  --map-land-2: rgba(42, 76, 57, 0.86);
  --map-water: rgba(45, 112, 147, 0.42);
  --map-road: rgba(231, 224, 185, 0.68);
  --map-grid: rgba(255, 255, 255, 0.08);
  --map-road-angle: -18deg;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  aspect-ratio: 1;
  box-sizing: border-box;
  contain: layout paint;
  isolation: isolate;
  background:
    radial-gradient(circle at 75% 22%, var(--map-water), transparent 20px),
    radial-gradient(circle at 30% 70%, var(--map-land), transparent 24px),
    linear-gradient(135deg, var(--map-land-2), transparent 58%),
    var(--map-base);
}

.map-mini-icon::before {
  inset: 4px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--map-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--map-grid) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.75;
  transform: none;
}

.map-mini-icon::after {
  inset: 16px -4px auto;
  width: 52px;
  height: 11px;
  border-top: 2px solid var(--map-road);
  border-bottom: 1px solid rgba(231, 224, 185, 0.32);
  border-radius: 999px;
  background: transparent;
  transform: rotate(var(--map-road-angle));
}

.map-mini-icon b,
.map-mini-icon small {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.map-mini-desert {
  --map-base: #41331e;
  --map-land: rgba(194, 152, 76, 0.82);
  --map-land-2: rgba(89, 67, 31, 0.88);
  --map-water: rgba(91, 130, 126, 0.22);
  --map-road: rgba(246, 217, 141, 0.7);
}

.map-mini-forest {
  --map-base: #17271f;
  --map-land: rgba(74, 139, 73, 0.82);
  --map-land-2: rgba(31, 75, 48, 0.9);
  --map-water: rgba(48, 121, 109, 0.24);
}

.map-mini-urban {
  --map-base: #232e35;
  --map-land: rgba(70, 82, 87, 0.82);
  --map-land-2: rgba(35, 42, 48, 0.9);
  --map-water: rgba(38, 79, 108, 0.22);
  --map-grid: rgba(255, 255, 255, 0.12);
  --map-road-angle: 0deg;
}

.map-mini-coast {
  --map-base: #16323d;
  --map-land: rgba(58, 117, 68, 0.84);
  --map-land-2: rgba(28, 71, 58, 0.9);
  --map-water: rgba(61, 155, 198, 0.72);
}

.map-mini-snow {
  --map-base: #31434b;
  --map-land: rgba(199, 219, 222, 0.78);
  --map-land-2: rgba(92, 118, 126, 0.86);
  --map-water: rgba(101, 156, 180, 0.3);
  --map-road: rgba(255, 255, 255, 0.72);
}

.map-mini-albasrah,
.map-mini-fallujah,
.map-mini-tallil {
  --map-road-angle: 14deg;
}

.map-mini-blackcoast,
.map-mini-sanxian,
.map-mini-pacificprovinggrounds {
  --map-road-angle: -32deg;
}

.map-mini-gorodok,
.map-mini-yehorivka,
.map-mini-harju,
.map-mini-anvil {
  --map-road-angle: 24deg;
}

.map-mini-narva,
.map-mini-logar,
.map-mini-sumari {
  --map-road-angle: 0deg;
}

.map-mini-belaya,
.map-mini-goosebay,
.map-mini-manicouagan,
.map-mini-skorpo {
  --map-road-angle: -8deg;
}

.training-round-fields {
  display: grid;
  gap: 6px;
}

.training-round-fields input {
  display: none;
}

.training-round-fields input.active {
  display: block;
}

.training-map-form input {
  padding: 0 9px;
}

.training-map-form > button,
.training-map-form > button[type="submit"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 34px;
  border: 1px solid rgba(95,215,83,.36);
  border-radius: 7px;
  background: rgba(95,215,83,.09);
  color: #9af0a6;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.training-map-round-two {
  overflow: hidden;
  color: #9ff5a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-camera-slot.match-camera {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  min-height: 58px;
  padding: 7px;
}

.training-team-tabs-core {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.training-team-tab-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.training-team-tab-wrap form {
  margin: 0;
}

.training-team-tabs a,
.training-team-tab,
.training-team-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-weight: 900;
  cursor: pointer;
}

.training-team-tab.active {
  border-color: rgba(245,185,48,.72);
  background: rgba(245,185,48,.16);
  color: #fff;
}

.training-team-plus {
  width: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.training-camera-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.training-camera-slot.match-camera .training-camera-label {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.training-camera-slot.occupied {
  border-color: rgba(95,215,83,.32);
  background: rgba(95,215,83,.045);
}

.training-camera-slot > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-camera-slot form {
  margin: 0;
}

.training-camera-slot button:not(.training-camera-player),
.training-camera-slot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(95,215,83,.35);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(95,215,83,.07);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.training-camera-empty {
  justify-self: start;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.training-camera-player.training-slot-row {
  width: 100%;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 28px;
  padding: 3px 5px;
  border-color: rgba(95,215,83,.25);
  background: transparent;
}

.training-camera-player.training-slot-row .training-slot-identity,
.training-camera-player.training-slot-row span:last-child {
  min-width: 0;
}

.training-camera-player.training-slot-row .role-icon-mini {
  width: 18px;
  height: 18px;
}

.training-teams-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.training-team-panel {
  display: none;
  min-width: 0;
}

.training-team-panel.active {
  display: block;
}

.training-team-body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.training-team-body.counts-right {
  grid-template-columns: minmax(0, 1fr) 78px;
}

.training-slot-body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
}

.training-role-counts {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.training-role-counts > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.training-role-counts > div {
  display: grid;
  gap: 6px;
}

.training-role-count {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.training-role-count b {
  min-width: 17px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.training-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.training-slot-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.training-slot-grid-history {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.training-slot-squad {
  position: relative;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  overflow: visible;
}

.training-slot-squad header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-slot-squad header.history-header {
  grid-template-columns: 28px minmax(90px, 1.45fr) repeat(var(--history-cols, 7), minmax(30px, .72fr));
  gap: 0;
  align-items: stretch;
  margin: -4px 0 6px;
  height: 48px;
  min-height: 48px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(245,185,48,.025);
}

.training-squad-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  color: var(--gold);
}

.training-squad-name b {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.training-squad-label {
  color: #dce7f2;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.training-history-column-label {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 28px 18px;
  place-items: stretch;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.training-history-column-label.game-stat-label {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
  position: relative;
  gap: 0;
  padding: 0;
  border-left-color: rgba(245, 185, 48, .16);
  color: #f7f7f7;
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .075), transparent 58%),
    rgba(13, 18, 24, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.training-history-column-label.game-stat-label small {
  display: none;
  color: rgba(154, 240, 166, .72);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.training-history-column-label i {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 28px;
  font-style: normal;
}

.training-history-column-label b,
.training-history-column-label.game-stat-label b {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 185, 48, .14);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.training-history-column-label.icon-label {
  color: #9af0a6;
}

.training-history-column-label.icon-label.negative {
  color: #ff8f8f;
}

.training-history-column-label.icon-label b {
  color: currentColor;
}

.training-slot-squad header.history-header > .training-squad-name {
  grid-column: 1 / 3;
}

.training-history-column-label.icon-label svg {
  color: var(--scoreboard-gold);
}

.training-history-column-label svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.legend-chip.squad-score-chip svg,
.training-history-column-label.game-stat-label svg {
  width: 19px;
  height: 19px;
  color: #fff;
  filter: var(--squad-scoreboard-icon-filter, none) drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(255,255,255,.12));
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.35;
}

.training-squad-size-control {
  position: relative;
  display: block;
}

.training-squad-size-control summary {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.training-squad-size-control summary::-webkit-details-marker {
  display: none;
}

.training-squad-size-control summary:hover {
  border-color: rgba(245,185,48,.45);
  color: var(--gold);
}

.training-squad-size-control svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}

.training-squad-size-control form {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 38px;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 8px;
  background: #070a0e;
  box-shadow: 0 16px 34px rgba(0,0,0,.38);
  width: min(460px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
}

.training-squad-size-control input {
  width: 100%;
  height: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.training-squad-size-control input[name="squad_label"] {
  grid-column: 1 / -1;
  min-width: 150px;
  text-align: left;
}

.training-squad-label-presets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 1px;
}

.training-squad-label-presets button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0 8px;
  border-color: rgba(245,185,48,.28);
  background: rgba(255,255,255,.045);
  color: var(--text);
  white-space: nowrap;
}

.training-squad-label-presets button:hover,
.training-squad-label-presets button.active {
  border-color: rgba(245,185,48,.72);
  background: rgba(245,185,48,.14);
  color: var(--gold);
}

.training-squad-label-presets .role-icon-mini {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.training-squad-label-presets b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1;
}

.training-squad-label-presets button em {
  margin-left: auto;
  color: var(--accent);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}

.training-squad-size-control button {
  height: 28px;
  border: 1px solid rgba(95,215,83,.4);
  border-radius: 6px;
  background: rgba(95,215,83,.09);
  color: #9af0a6;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.training-squad-size-control .training-squad-label-presets button {
  border-color: rgba(245,185,48,.28);
  background: rgba(255,255,255,.045);
  color: var(--text);
}

.training-squad-size-control .training-squad-label-presets button:hover,
.training-squad-size-control .training-squad-label-presets button.active {
  border-color: rgba(245,185,48,.72);
  background: rgba(245,185,48,.14);
  color: var(--gold);
}

@media (max-width: 560px) {
  .training-squad-label-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.training-slot-list {
  position: relative;
  display: grid;
  gap: 6px;
  overflow: visible;
}

.training-slot-row,
.training-slot-empty summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.026);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
}

.training-slot-remove-form {
  display: none;
  justify-self: end;
  align-self: center;
}

.training-slot-remove-mode .training-slot-row.occupied {
  grid-template-columns: 26px minmax(0, 1fr) 28px;
}

.training-slot-remove-mode .training-slot-remove-form {
  display: block;
}

.training-slot-remove-form button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,95,95,.58);
  border-radius: 6px;
  color: #ffb0b0;
  background: rgba(255,95,95,.11);
  font-weight: 1000;
  cursor: pointer;
}

.training-slot-remove-form button:hover {
  border-color: rgba(255,120,120,.86);
  color: #fff;
  background: rgba(255,95,95,.22);
}

.training-slot-row.occupied {
  align-items: start;
}

.training-slot-row.occupied:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto auto;
  align-items: center;
}

.training-ready-form {
  justify-self: end;
}

.training-ready-form button,
.training-ready-badge {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(95,215,83,.4);
  border-radius: 6px;
  background: rgba(95,215,83,.08);
  color: #8cff88;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
}

.training-ready-form button.ready,
.training-ready-badge {
  border-color: rgba(95,215,83,.82);
  background: rgba(95,215,83,.2);
  box-shadow: 0 0 0 1px rgba(95,215,83,.16), 0 0 16px rgba(95,215,83,.12);
}

.training-readiness-summary.open strong {
  color: #8cff88;
}

.training-readiness-summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.training-edit-only {
  display: none;
}

.training-edit-mode .training-edit-only,
.training-slot-panel.training-slot-remove-mode .training-edit-only {
  display: grid;
}

.training-readiness-settings {
  grid-template-columns: auto auto auto 56px;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,194,57,.16);
  border-radius: 8px;
  background: rgba(255,194,57,.04);
}

.training-readiness-settings label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.training-readiness-settings input[type="number"] {
  width: 74px;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  font: inherit;
  padding: 5px 7px;
}

.training-readiness-settings button {
  min-height: 30px;
  border: 1px solid rgba(255,194,57,.42);
  border-radius: 6px;
  background: rgba(255,194,57,.08);
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.training-slot-row.history-row {
  grid-template-columns: 28px minmax(90px, 1.45fr) repeat(var(--history-cols, 7), minmax(30px, .72fr));
  gap: 0;
  min-height: 46px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(20,25,29,.98), rgba(15,19,23,.98));
  transform-origin: center center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

@media (max-width: 1180px) {
  .training-slot-grid-history {
    grid-template-columns: minmax(0, 1fr);
  }
}

.training-slot-row.history-row > .role-icon-mini,
.training-slot-row.history-row > .training-slot-identity,
.training-slot-row.history-row > .training-history-cell {
  min-height: 46px;
  border-left: 1px solid rgba(255,255,255,.08);
}

.training-slot-row.history-row:hover,
.training-slot-row.history-row:focus-visible {
  position: relative;
  z-index: 30;
  border-color: rgba(245,185,48,.68);
  background: linear-gradient(90deg, #171d21, #10161a);
  box-shadow: 0 18px 46px rgba(0,0,0,.76), 0 0 0 1px rgba(245,185,48,.28);
  transform: scale(1.24);
}

.training-slot-row.history-row > .role-icon-mini {
  width: 28px;
  height: 100%;
  border-left: 0;
}

.training-slot-row.history-row > .training-slot-identity {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 5px 6px;
}

.training-history-cell {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 3px 2px;
  background: rgba(18,23,27,.98);
  color: var(--muted);
}

.training-history-cell.stat {
  color: var(--text);
  background: rgba(27,30,31,.98);
}

.training-history-cell.positive {
  color: #9af0a6;
  background: rgba(16,42,25,.98);
}

.training-history-cell.negative {
  color: #ff9a9a;
  background: rgba(50,24,24,.98);
}

.training-history-cell svg {
  width: 13px;
  height: 13px;
  margin-bottom: 1px;
  fill: none;
  stroke: currentColor;
}

.training-history-cell small {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-history-cell b {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.training-history-text-icon {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 14px;
  color: var(--gold);
  font-size: 7px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.training-vehicle-stat-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  color: var(--scoreboard-gold);
  line-height: 0;
}

.training-vehicle-stat-icon > img {
  display: block;
  width: 30px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px rgba(245, 185, 48, .26));
}

.training-vehicle-stat-icon.destroyed > img {
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px rgba(238, 73, 68, .28));
}

.training-destroyed-vehicle-toggle {
  display: grid;
  grid-template-rows: 28px 18px;
  place-items: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(245, 185, 48, .16);
  border-radius: 0;
  color: #f7f7f7;
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .075), transparent 58%),
    rgba(13, 18, 24, .7);
  font: inherit;
  cursor: pointer;
}

.training-destroyed-vehicle-toggle:focus-visible {
  outline: 2px solid rgba(245, 185, 48, .82);
  outline-offset: -2px;
}

.training-destroyed-vehicle-toggle[aria-expanded="true"] {
  background: rgba(95, 215, 83, .09);
}

.training-destroyed-vehicle-list {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 9px;
  border: 1px solid rgba(245, 185, 48, .34);
  border-radius: 7px;
  background: rgba(8, 13, 17, .82);
  color: var(--text);
  text-align: left;
  text-transform: none;
}

.training-destroyed-vehicle-list[hidden] {
  display: none;
}

.training-destroyed-vehicle-list > strong {
  color: var(--gold);
  font-size: 10px;
}

.training-destroyed-vehicle-list > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.training-destroyed-vehicle-list em {
  overflow-wrap: anywhere;
  color: #dfe7ed;
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
}

.training-destroyed-vehicle-list b {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: #9be5a0;
  font-size: 11px;
  line-height: 1.2;
}

.stats-page {
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.stats-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
  gap: 18px;
  align-items: center;
}

.stats-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stats-hero h1 {
  margin: 6px 0;
  font-size: 34px;
  line-height: 1;
}

.stats-hero p {
  max-width: 760px;
  color: var(--muted);
}

.stats-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stats-metric-grid article {
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.stats-metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stats-metric-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.stats-table-section {
  display: grid;
  gap: 12px;
}

.stats-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}

.stats-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 13px;
}

.stats-table.compact {
  min-width: 680px;
}

.stats-table th,
.stats-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  white-space: nowrap;
}

.stats-table th {
  color: var(--gold);
  background: rgba(245,185,48,.045);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stats-table td {
  color: var(--text);
}

.stats-table tr:hover td {
  background: rgba(255,255,255,.025);
}

.stats-table a {
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}

.stats-table a:hover {
  color: var(--gold);
}

.stats-panel-head {
  align-items: center;
}

.stats-search {
  display: grid;
  grid-template-columns: 18px minmax(180px, 280px);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.stats-search svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
}

.stats-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.stats-search input::placeholder {
  color: var(--muted);
}

.stats-sort-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.stats-sort-toolbar > span {
  margin-right: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.stats-sort-toolbar button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(18,23,27,.92);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.stats-sort-toolbar button::after {
  content: "↕";
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.stats-sort-toolbar button[data-direction="desc"]::after {
  content: "↓";
  color: var(--gold);
}

.stats-sort-toolbar button[data-direction="asc"]::after {
  content: "↑";
  color: var(--gold);
}

.stats-sort-toolbar button.active,
.stats-sort-toolbar button:hover {
  border-color: rgba(245,185,48,.55);
  background: rgba(245,185,48,.09);
  color: var(--gold);
}

.stats-grid-header,
.stats-player-row {
  display: grid;
  grid-template-columns: 44px minmax(220px, 1.35fr) repeat(6, minmax(66px, .55fr));
  gap: 0;
  align-items: stretch;
}

.stats-grid-header.clan-grid,
.stats-player-row.clan-grid {
  grid-template-columns: 44px minmax(220px, 1.25fr) minmax(74px, .55fr) repeat(8, minmax(62px, .5fr));
}

.stats-grid-header {
  overflow: hidden;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(245,185,48,.035);
}

.stats-grid-header span {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 6px;
  border-left: 1px solid rgba(255,255,255,.08);
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.stats-grid-header span:first-child {
  border-left: 0;
}

.stats-header-sort-button {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-transform: inherit;
  cursor: pointer;
}

.stats-header-sort-button::after {
  content: "↕";
  color: rgba(176,184,194,.8);
  font-size: 11px;
  line-height: 1;
}

.stats-header-sort-button[data-direction="desc"]::after {
  content: "↓";
  color: var(--gold);
}

.stats-header-sort-button[data-direction="asc"]::after {
  content: "↑";
  color: var(--gold);
}

.stats-header-sort-button.active,
.stats-header-sort-button:hover {
  color: var(--gold);
}

.stats-player-list {
  display: grid;
  gap: 6px;
  overflow: visible;
}

.stats-player-row {
  position: relative;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(20,25,29,.98), rgba(15,19,23,.98));
  color: var(--text);
  text-decoration: none;
  transform-origin: center center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.stats-player-row:hover,
.stats-player-row:focus-visible {
  z-index: 40;
  border-color: rgba(245,185,48,.68);
  background: linear-gradient(90deg, #171d21, #10161a);
  box-shadow: 0 18px 46px rgba(0,0,0,.76), 0 0 0 1px rgba(245,185,48,.28);
  transform: scale(1.12);
}

.clan-stats-page .stats-player-row:hover,
.clan-stats-page .stats-player-row:focus-visible {
  transform: none;
}

.stats-zoom-preview {
  position: fixed;
  z-index: 1000;
  display: grid;
  grid-template-columns: 40px minmax(120px, 1.35fr) minmax(54px, .55fr) repeat(8, minmax(38px, .5fr));
  gap: 0;
  align-items: stretch;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(245,185,48,.78);
  border-radius: 8px;
  background: linear-gradient(90deg, #171d21, #10161a);
  box-shadow: 0 22px 58px rgba(0,0,0,.9), 0 0 0 1px rgba(245,185,48,.34);
  color: var(--text);
  text-decoration: none;
  transform: none;
  pointer-events: none;
}

.stats-zoom-preview > * {
  min-width: 0;
}

.stats-zoom-preview .stats-history-cell {
  padding-inline: 2px;
}

.stats-zoom-preview .stats-player-main strong {
  font-size: 15px;
}

.stats-zoom-preview .stats-player-main em {
  font-size: 11px;
}

.stats-zoom-preview .stats-history-cell b {
  font-size: 14px;
}

.stats-rank {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255,255,255,.08);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.stats-player-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.stats-player-main strong,
.stats-player-main em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-player-main strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.stats-player-main em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.stats-history-cell {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 4px 3px;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .045), transparent 58%),
    rgba(13, 18, 24, .78);
  color: var(--muted);
}

.stats-history-cell:last-child {
  border-right: 0;
}

.stats-history-cell.stat {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .045), transparent 58%),
    rgba(13, 18, 24, .78);
}

.stats-history-cell.positive {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .045), transparent 58%),
    rgba(13, 18, 24, .78);
}

.stats-history-cell.negative {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .045), transparent 58%),
    rgba(13, 18, 24, .78);
}

.stats-history-cell.squad-kills,
.stats-history-cell.squad-revives {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.stats-history-cell.squad-deaths {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
}

.stats-history-cell.squad-score {
  --squad-scoreboard-icon-filter: var(--scoreboard-icon-gold-filter);
  color: var(--scoreboard-gold);
  background:
    linear-gradient(135deg, rgba(245, 185, 48, .06), transparent 58%),
    rgba(13, 18, 24, .8);
}

.stats-history-cell svg {
  width: 13px;
  height: 13px;
  margin-bottom: 2px;
  fill: none;
  stroke: currentColor;
  filter: var(--squad-scoreboard-icon-filter, none) drop-shadow(0 1px 0 #000);
}

.stats-history-cell small {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stats-history-cell b {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.stats-empty-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.stats-mode-tabs {
  display: inline-flex;
  gap: 8px;
  width: fit-content;
  padding: 8px;
}

.stats-mode-tabs button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.stats-mode-tabs button.active,
.stats-mode-tabs button:hover {
  border-color: rgba(245,185,48,.55);
  color: var(--gold);
  background: rgba(245,185,48,.11);
}

.stats-tab-panel {
  display: none;
}

.stats-tab-panel.active {
  display: block;
}

.stats-role-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-role-top-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    radial-gradient(circle at 95% 0, rgba(245,185,48,.12), transparent 36%);
  overflow: visible;
}

.stats-role-top-card header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 40px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.stats-role-top-card header .role-icon-mini {
  width: 32px;
  height: 32px;
}

.stats-role-top-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.1;
}

.stats-role-top-card header span:not(.role-icon-mini) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.stats-role-top-list {
  display: grid;
  gap: 5px;
  overflow: visible;
}

.stats-role-top-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) repeat(4, minmax(48px, .46fr));
  align-items: stretch;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(20,25,29,.98), rgba(15,19,23,.98));
  color: var(--text);
  text-decoration: none;
  transform-origin: center center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.stats-role-top-row:hover,
.stats-role-top-row:focus-visible {
  z-index: 45;
  border-color: rgba(245,185,48,.68);
  background: linear-gradient(90deg, #171d21, #10161a);
  box-shadow: 0 18px 46px rgba(0,0,0,.76), 0 0 0 1px rgba(245,185,48,.28);
  transform: scale(1.08);
}

.global-stats-page .stats-player-row:hover,
.global-stats-page .stats-player-row:focus-visible,
.global-stats-page .stats-role-top-row:hover,
.global-stats-page .stats-role-top-row:focus-visible {
  transform: none;
}

.stats-global-zoom-preview,
.stats-role-zoom-preview {
  position: fixed;
  z-index: 1000;
  gap: 0;
  align-items: stretch;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(245,185,48,.78);
  border-radius: 8px;
  background: linear-gradient(90deg, #171d21, #10161a);
  box-shadow: 0 22px 58px rgba(0,0,0,.9), 0 0 0 1px rgba(245,185,48,.34);
  color: var(--text);
  text-decoration: none;
  transform: none;
  pointer-events: none;
}

.stats-global-zoom-preview {
  display: grid;
  grid-template-columns: 50px minmax(170px, 1.45fr) repeat(6, minmax(54px, .58fr));
  min-height: 86px;
}

.stats-role-zoom-preview {
  display: grid;
  grid-template-columns: 34px minmax(132px, 1fr) repeat(4, minmax(42px, .46fr));
  min-height: 68px;
}

.stats-global-zoom-preview > *,
.stats-role-zoom-preview > * {
  min-width: 0;
}

.stats-global-zoom-preview .stats-history-cell,
.stats-role-zoom-preview .stats-history-cell {
  padding-inline: 2px;
}

.stats-role-zoom-preview .stats-rank,
.stats-global-zoom-preview .stats-rank,
.stats-global-zoom-preview .stats-player-main,
.stats-global-zoom-preview .stats-history-cell,
.stats-role-zoom-preview .stats-player-main,
.stats-role-zoom-preview .stats-history-cell {
  min-height: 68px;
}

.stats-global-zoom-preview .stats-rank,
.stats-global-zoom-preview .stats-player-main,
.stats-global-zoom-preview .stats-history-cell {
  min-height: 86px;
}

.stats-role-zoom-preview .stats-player-main {
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 8px 9px;
}

.stats-role-zoom-preview .role-icon-mini {
  width: 28px;
  height: 28px;
}

.stats-global-zoom-preview .stats-player-main strong,
.stats-role-zoom-preview .stats-player-main strong {
  font-size: 15px;
}

.stats-global-zoom-preview .stats-player-main em,
.stats-role-zoom-preview .stats-player-main em {
  font-size: 11px;
}

.stats-global-zoom-preview .stats-history-cell b,
.stats-role-zoom-preview .stats-history-cell b {
  font-size: 14px;
}

.stats-role-zoom-preview .stats-player-main strong {
  font-size: 16px;
}

.stats-role-zoom-preview .stats-history-cell b {
  font-size: 15px;
}

.stats-global-zoom-preview .stats-player-main strong {
  font-size: 18px;
}

.stats-global-zoom-preview .stats-history-cell b {
  font-size: 18px;
}

.stats-global-zoom-preview .stats-player-main {
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 10px 12px;
}

.stats-global-zoom-preview .role-icon-mini {
  width: 32px;
  height: 32px;
}

.stats-global-zoom-preview .stats-player-main em,
.stats-global-zoom-preview .stats-history-cell small {
  font-size: 12px;
}

.stats-role-top-row .stats-rank {
  min-height: 42px;
}

.stats-role-top-row .stats-player-main {
  min-height: 42px;
  padding: 5px 7px;
}

.stats-role-top-row .stats-history-cell {
  min-height: 42px;
}

.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stats-role-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.stats-role-card span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stats-role-card strong {
  color: var(--text);
  font-size: 16px;
}

.stats-role-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stats-role-card b {
  color: #9af0a6;
}

.stats-role-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.stats-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stats-source-grid article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.stats-source-grid svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
}

.stats-source-grid strong {
  color: var(--text);
}

.stats-source-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.training-slot-row {
  cursor: pointer;
}

.training-slot-row.leader-slot,
.training-slot-empty.leader-slot summary {
  border-color: rgba(245,185,48,.36);
  background: rgba(245,185,48,.06);
}

.training-slot-row:hover,
.training-slot-row.active {
  border-color: rgba(245,185,48,.45);
  background: rgba(245,185,48,.09);
}

.training-slot-empty summary {
  grid-template-columns: minmax(0, 1fr);
  cursor: pointer;
  color: #9af0a6;
  font-weight: 500;
  list-style: none;
}

.training-slot-empty summary::-webkit-details-marker {
  display: none;
}

.training-slot-empty[open] summary {
  border-color: rgba(95,215,83,.45);
  background: rgba(95,215,83,.06);
}

.training-slot-empty.history-slot {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(255,255,255,.018);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.training-slot-empty.history-slot.leader-slot {
  border-color: rgba(245,185,48,.22);
  background: rgba(245,185,48,.035);
}

.training-slot-row > span:last-child {
  display: grid;
  min-width: 0;
}

.training-slot-row strong,
.training-slot-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-slot-row strong {
  font-size: 13px;
}

.training-slot-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.training-feedback-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  gap: 3px;
  margin-top: 5px;
}

.training-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-top: 6px;
}

.training-feedback-grid i,
.training-history-grid i {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 2px 4px;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-style: normal;
}

.training-history-grid i.stat {
  border-color: rgba(245,185,48,.14);
  color: var(--text);
  background: rgba(245,185,48,.035);
}

.training-feedback-grid i.positive,
.training-history-grid i.positive {
  border-color: rgba(95,215,83,.22);
  color: #9af0a6;
  background: rgba(95,215,83,.045);
}

.training-feedback-grid i.negative,
.training-history-grid i.negative {
  border-color: rgba(255,93,93,.24);
  color: #ff9a9a;
  background: rgba(255,93,93,.045);
}

.training-feedback-grid svg,
.training-history-grid svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}

.training-feedback-grid small,
.training-history-grid small {
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  opacity: .82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-feedback-grid b,
.training-history-grid b {
  font-size: 11px;
  font-weight: 900;
}

.role-icon-mini {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.role-icon-mini img,
.role-icon-mini svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
  fill: none;
  stroke: currentColor;
}

.role-icon-mini .role-icon-fallback {
  display: none;
}

.role-icon-mini img.role-icon-load-error {
  display: none;
}

.role-icon-mini img.role-icon-load-error + .role-icon-fallback {
  display: block;
}

.training-slot-role-menu {
  display: grid;
  gap: 5px;
  max-height: 275px;
  margin-top: 6px;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(95,215,83,.25);
  border-radius: 8px;
  background: rgba(5,8,11,.92);
}

.training-slot-role-button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  text-align: left;
  font-weight: 800;
}

.training-slot-role-button:hover {
  border-color: rgba(245,185,48,.42);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.training-slot-login {
  display: block;
  margin-top: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.training-pool-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.training-pool-panel h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.training-reserve-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.training-reserve-head h2 {
  margin-bottom: 4px;
}

.training-reserve-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.training-reserve-head form {
  margin: 0;
  flex: 0 0 auto;
}

.training-reserve-head button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(99,217,113,.48);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(99,217,113,.09);
  font-weight: 950;
  cursor: pointer;
}

.training-pool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.training-pool-chip,
.training-pool-empty {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.training-pool-chip {
  gap: 5px;
}

.training-pool-chip em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.training-pool-empty {
  color: var(--muted);
  font-weight: 800;
}

.training-slot-row[draggable="true"],
.training-pool-chip[draggable="true"] {
  cursor: grab;
}

.training-player-drag-handle,
.training-squad-drag-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.training-player-drag-handle:active,
.training-squad-drag-handle:active {
  cursor: grabbing;
}

.training-player-drag-handle {
  border-color: rgba(245,185,48,.55);
  box-shadow: inset 0 0 0 1px rgba(245,185,48,.14);
}

.training-squad-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 1px solid rgba(245,185,48,.4);
  border-radius: 6px;
  color: var(--gold);
  font-weight: 950;
  letter-spacing: -3px;
}

.training-slot-row.training-dragging,
.training-pool-chip.training-dragging {
  opacity: .55;
  border-color: rgba(245,185,48,.7);
}

.training-slot-drop-target.training-drag-over summary,
.training-reserve-panel.training-drag-over,
.training-pool-panel.training-drag-over {
  border-color: rgba(95,215,83,.78);
  background: rgba(95,215,83,.12);
  box-shadow: inset 0 0 0 1px rgba(95,215,83,.35);
}

.training-slot-squad > header[data-training-squad-draggable] {
  cursor: grab;
}

.training-slot-squad > header[data-training-squad-draggable]:active {
  cursor: grabbing;
}

.training-slot-squad > header.training-squad-dragging {
  opacity: .5;
}

.training-slot-squad.training-squad-drag-over {
  border-color: rgba(95,215,83,.78);
  background: rgba(95,215,83,.08);
  box-shadow: inset 0 0 0 1px rgba(95,215,83,.34);
}

.training-workspace,
.training-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.training-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, .72fr);
  gap: 14px;
  align-items: start;
}

.training-board-column {
  min-height: 420px;
}

.training-board-column.pool-column {
  border-color: rgba(245,185,48,.22);
}

.training-column-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.training-squad-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.training-squad-group h3 {
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
}

.training-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.training-player-card {
  display: grid;
  gap: 8px;
}

.training-player-row:hover,
.training-player-row.active {
  border-color: rgba(245,185,48,.45);
  background: rgba(245,185,48,.08);
}

.training-player-row span {
  display: grid;
  gap: 4px;
}

.training-player-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.training-player-row b {
  color: var(--green);
  font-size: 12px;
}

.training-assign-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.training-assign-form input {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
}

.training-assign-form div {
  display: flex;
  gap: 5px;
}

.training-assign-form button {
  min-width: 34px;
  height: 32px;
  border: 1px solid rgba(245,185,48,.32);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 12px;
  font-weight: 900;
}

.training-assign-form button:hover {
  background: rgba(245,185,48,.16);
}

.training-feedback-panel {
  position: relative;
}

.selected-training-player {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(245,185,48,.22);
  border-radius: 8px;
  background: rgba(245,185,48,.06);
}

.selected-training-player strong {
  font-size: 18px;
}

.selected-training-player span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.training-feedback-panel .feedback-form {
  display: grid;
  gap: 10px;
}

.training-feedback-panel button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.manage-page {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.manage-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,11,15,.96), rgba(11,17,24,.72)),
    radial-gradient(circle at 78% 20%, rgba(245,185,48,.18), transparent 33%),
    linear-gradient(135deg, rgba(26,38,48,.92), rgba(5,8,11,.96));
}

.manage-hero span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.manage-hero h1 {
  margin-top: 6px;
  font-size: 38px;
}

.manage-hero p {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.manage-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.manage-hero-actions a,
.manage-clan-row > a,
.manage-row > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.manage-hero-actions svg {
  width: 15px;
  height: 15px;
}

.manage-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.manage-metrics article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}

.manage-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.manage-metrics strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 24px;
}

.manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.manage-panel.wide {
  grid-column: 1 / -1;
}

.manage-card-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.manage-card-list.compact {
  gap: 8px;
}

.manage-clan-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.manage-clan-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.manage-clan-delete-form {
  margin: 0;
}

.manage-clan-delete-form button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,95,95,.55);
  border-radius: 7px;
  background: rgba(255,95,95,.1);
  color: #ffb0b0;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.manage-clan-delete-form button:hover {
  border-color: rgba(255,120,120,.82);
  background: rgba(255,95,95,.16);
}

.manage-clan-row .clan-logo-box {
  width: 52px;
  height: 52px;
}

.manage-clan-row strong,
.manage-row strong {
  color: var(--text);
}

.manage-clan-row span,
.manage-row span,
.manage-clan-row p {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.manage-row code {
  color: var(--gold);
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.manage-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.manage-action-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  font-weight: 850;
}

.manage-action-grid a:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.07);
}

.manage-action-grid svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.manage-cleanup-panel {
  margin-bottom: 14px;
  border-color: rgba(255,95,95,.2);
  background: linear-gradient(135deg, rgba(255,95,95,.055), rgba(255,255,255,.025));
}

.manage-cleanup-panel .panel-head strong {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  border: 1px solid rgba(255,95,95,.36);
  border-radius: 8px;
  color: #ffb0b0;
  background: rgba(255,95,95,.08);
}

.manage-cleanup-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.manage-cleanup-preview span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.manage-cleanup-preview em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.manage-cleanup-form {
  margin-top: 12px;
}

.manage-cleanup-form button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,95,95,.56);
  border-radius: 8px;
  background: rgba(255,95,95,.1);
  color: #ffb0b0;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.manage-cleanup-form button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.preview-body {
  background:
    linear-gradient(180deg, rgba(5,8,11,.98), rgba(8,12,15,.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
}

.design-preview-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 28px 18px 70px;
}

.preview-intro,
.preview-shell {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background: rgba(9,14,18,.86);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.preview-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 190px;
  padding: 26px;
  background:
    linear-gradient(90deg, rgba(5,8,11,.98), rgba(11,18,23,.72)),
    radial-gradient(circle at 80% 12%, rgba(245,185,48,.18), transparent 34%);
}

.preview-intro span,
.preview-label {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.preview-intro h1 {
  margin-top: 8px;
  font-size: 42px;
}

.preview-intro p {
  max-width: 820px;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.preview-intro a {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(245,185,48,.35);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-weight: 900;
  white-space: nowrap;
}

.preview-shell {
  margin-top: 18px;
  padding: 18px;
}

.tactical-panel {
  background:
    linear-gradient(135deg, rgba(7,12,13,.96), rgba(18,25,23,.9)),
    repeating-linear-gradient(0deg, rgba(95,215,83,.04) 0 1px, transparent 1px 26px);
}

.ops-topline {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(95,215,83,.18);
  background: rgba(95,215,83,.055);
  color: #9af38d;
  font-size: 12px;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ops-grid article,
.ops-log {
  border: 1px solid rgba(95,215,83,.16);
  border-radius: 7px;
  background: rgba(0,0,0,.22);
}

.ops-grid article {
  padding: 14px;
}

.ops-grid b,
.ops-grid span,
.ops-log p {
  color: #91a49a;
  font-size: 12px;
}

.ops-grid strong {
  display: block;
  margin: 8px 0;
  color: #dff8dd;
  font-size: 28px;
}

.ops-log {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
}

.ops-log span {
  color: var(--gold);
  font-weight: 900;
}

.deployment-columns {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(280px, .7fr);
  gap: 12px;
  margin-top: 14px;
}

.deployment-columns > div,
.deployment-columns aside {
  min-height: 360px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16,24,30,.82), rgba(7,10,13,.88));
}

.deployment-columns h2,
.vehicle-stage h2,
.record-card h2,
.room-brief h2 {
  font-size: 20px;
}

.deployment-columns article {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(245,185,48,.14);
  border-radius: 7px;
  background: rgba(245,185,48,.045);
}

.deployment-columns b,
.deployment-columns span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.deployment-columns strong {
  display: block;
  margin: 5px 0;
  color: var(--text);
}

.hangar-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-top: 14px;
}

.hangar-layout aside {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.hangar-layout aside span {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
}

.hangar-layout aside .active {
  border-color: rgba(245,185,48,.36);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.vehicle-stage {
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(9,14,18,.96), rgba(18,26,30,.76)),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
}

.vehicle-silhouette {
  display: grid;
  place-items: center;
  height: 170px;
  margin-bottom: 14px;
  border: 1px solid rgba(95,215,83,.16);
  border-radius: 8px;
  color: rgba(95,215,83,.88);
  background: radial-gradient(circle at center, rgba(95,215,83,.1), rgba(0,0,0,.22));
  font-size: 46px;
  font-weight: 950;
  letter-spacing: 0;
}

.vehicle-stage p {
  margin-top: 8px;
  color: var(--muted);
}

.vehicle-stage > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.vehicle-stage article,
.record-card aside article {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}

.vehicle-stage span,
.record-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.vehicle-stage strong,
.record-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
}

.record-card {
  display: grid;
  grid-template-columns: 110px 1fr 300px;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(15,22,29,.9), rgba(8,12,16,.96));
}

.record-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(245,185,48,.36);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 42px;
  font-weight: 950;
}

.record-card p,
.record-timeline p,
.room-brief p,
.room-feed p,
.room-roster p {
  color: var(--muted);
}

.record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.record-badges b,
.room-brief span {
  padding: 7px 9px;
  border: 1px solid rgba(95,215,83,.25);
  border-radius: 7px;
  color: #9af38d;
  background: rgba(95,215,83,.06);
  font-size: 12px;
}

.record-card aside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.record-timeline {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.record-timeline p {
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(255,255,255,.025);
}

.room-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 12px;
  margin-top: 14px;
}

.room-grid > div {
  min-height: 220px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.room-brief div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.room-grid h3 {
  margin-bottom: 10px;
  color: var(--gold);
}

.room-grid p {
  margin-top: 8px;
}

.clan-detail-page {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.clan-detail-hero {
  grid-template-columns: 132px minmax(300px, 1fr) minmax(260px, 320px);
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
}

.clan-detail-hero > .clan-panel {
  order: 3;
  align-self: stretch;
  display: grid;
  align-content: center;
  min-height: 0;
  padding: 14px 16px;
}

.clan-logo-large {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 8px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  overflow: hidden;
}

.clan-inline-edit {
  display: none;
}

.clan-settings-mode .clan-inline-edit {
  display: grid;
}

.clan-member-settings-only {
  display: none;
}

.clan-settings-mode .clan-member-settings-only {
  display: block;
}

.clan-logo-large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.clan-logo-large strong {
  font-size: 28px;
}

.clan-logo-upload {
  position: absolute;
  inset: 0;
  place-items: end center;
  padding: 8px;
  background: linear-gradient(180deg, transparent 34%, rgba(4,8,12,.82));
}

.clan-logo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.clan-logo-upload label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(245,185,48,.62);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(9,14,20,.88);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.clan-recruiting-toggle {
  margin: 0;
}

.clan-recruiting-toggle button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.clan-recruiting-toggle button.open {
  border: 1px solid rgba(84, 214, 91, .48);
  color: #72e66f;
  background: rgba(84, 214, 91, .14);
}

.clan-recruiting-toggle button.closed {
  border: 1px solid rgba(177, 47, 68, .44);
  color: #ff9dad;
  background: rgba(129, 28, 45, .22);
}

.clan-settings-mode .clan-recruiting-readonly,
.clan-settings-mode .clan-discord-link,
.clan-settings-mode .clan-info-readonly {
  display: none;
}

.clan-leave-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(177,47,68,.42);
  border-radius: 8px;
  background: rgba(129,28,45,.14);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.clan-leave-form div {
  display: grid;
  gap: 4px;
}

.clan-leave-form strong {
  color: #ffb0bc;
  font-size: 13px;
}

.clan-leave-form span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.clan-leave-form button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,110,130,.48);
  border-radius: 7px;
  background: rgba(177,47,68,.24);
  color: #ffd1d8;
  font-weight: 900;
  cursor: pointer;
}

.clan-leave-form button:hover {
  background: rgba(177,47,68,.34);
}

.clan-access-panel {
  grid-column: 1 / -1;
}

.clan-access-form {
  display: grid;
  gap: 14px;
}

.access-create-role {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.access-create-role label,
.access-member-roles label {
  display: grid;
  gap: 6px;
}

.access-create-role span,
.access-member-roles > strong,
.access-member-roles label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.access-create-role input,
.access-member-roles select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8,13,18,.86);
  color: var(--text);
  font: inherit;
}

.access-matrix {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.access-row {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(78px, 1fr));
  gap: 6px;
  align-items: stretch;
  min-width: 820px;
}

.access-row > strong,
.access-row > span,
.access-row label {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.access-row > strong,
.access-row > span {
  display: grid;
  place-items: center;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.access-row > strong {
  justify-content: start;
  color: var(--text);
}

.access-head > span {
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-weight: 900;
}

.access-row label {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.access-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.access-row label span {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
}

.access-row input:checked + span {
  border-color: rgba(99,217,113,.75);
  background: rgba(99,217,113,.26);
  box-shadow: inset 0 0 0 4px rgba(6,13,10,.9);
}

.access-row input:disabled + span {
  border-color: rgba(245,185,48,.65);
  background: rgba(245,185,48,.24);
}

.custom-access-row {
  grid-template-columns: 150px repeat(7, minmax(78px, 1fr)) 96px;
}

.access-delete-role {
  min-height: 34px;
  border: 1px solid rgba(177,47,68,.38);
  border-radius: 7px;
  color: #ffb0bc;
  background: rgba(177,47,68,.14);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.access-member-roles {
  display: grid;
  gap: 8px;
}

.access-member-roles > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.access-member-roles em {
  color: var(--gold);
  font-style: normal;
}

.clan-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.clan-info-panel,
.roster-detail-panel {
  grid-column: 1;
}

.clan-info-panel {
  grid-column: 1 / -1;
  grid-row: 1;
}

.roster-detail-panel {
  grid-row: 2;
}

.application-panel,
.clan-queue-panel {
  grid-column: 2;
}

.application-panel {
  grid-row: 2;
}

.clan-queue-panel {
  grid-row: 3;
}

.clan-polls-panel {
  grid-column: 2;
  grid-row: 4;
}

.clan-info-panel p,
.application-panel p,
.clan-queue-panel p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.clan-focus-text {
  margin-bottom: 18px;
}

.clan-inline-info-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.clan-inline-info-form label {
  display: grid;
  gap: 6px;
}

.clan-inline-info-form label span,
.clan-inline-info-form .settings-group > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.clan-inline-info-form input,
.clan-inline-info-form select,
.clan-inline-info-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  resize: vertical;
}

.clan-inline-wide,
.clan-inline-save {
  grid-column: 1 / -1;
}

.clan-inline-save {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(99,217,113,.52);
  border-radius: 7px;
  color: #a8f4b1;
  background: rgba(99,217,113,.1);
  font-weight: 900;
  cursor: pointer;
}

.member-list {
  display: grid;
  gap: 8px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.member-row span {
  color: var(--muted);
  font-size: 12px;
}

.requirements-box {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.requirements-box span {
  color: var(--muted);
  font-size: 13px;
}

.clan-visible-trainings {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(245,185,48,.32);
  border-radius: 8px;
  background: rgba(245,185,48,.045);
}

.clan-visible-trainings > strong {
  color: var(--gold);
}

.clan-visible-trainings a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.025);
}

.clan-visible-trainings a:hover {
  border-color: rgba(245,185,48,.55);
}

.clan-visible-trainings em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  text-align: right;
}

.clan-event-calendar {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.clan-profile-calendar {
  margin: 14px 0 0;
  padding: 16px 20px 14px;
  border: 1px solid var(--line);
}

.clan-event-calendar-head,
.clan-calendar-navigation,
.clan-calendar-legend,
.clan-calendar-details a {
  display: flex;
  align-items: center;
}

.clan-event-calendar-head {
  justify-content: space-between;
  gap: 14px;
}

.clan-event-calendar-head > div:first-child {
  display: grid;
  gap: 3px;
}

.clan-event-calendar-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.clan-event-calendar-head h3 svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
}

.clan-event-calendar-head span {
  color: var(--muted);
  font-size: 12px;
}

.clan-calendar-navigation {
  gap: 6px;
}

.clan-calendar-navigation strong {
  min-width: 146px;
  color: var(--text);
  font-size: 13px;
  text-align: center;
}

.clan-calendar-navigation button {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(245,185,48,.07);
  font: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.clan-calendar-navigation button:hover {
  border-color: rgba(245,185,48,.72);
  background: rgba(245,185,48,.13);
}

.clan-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 14px;
  align-items: start;
}

.clan-calendar-board {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.clan-calendar-weekdays,
.clan-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.clan-calendar-weekdays span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.clan-calendar-day,
.clan-calendar-spacer {
  min-height: 52px;
}

.clan-calendar-day {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 6px;
  color: var(--text);
  background: rgba(255,255,255,.022);
  font: inherit;
  cursor: pointer;
}

.clan-calendar-day:hover,
.clan-calendar-day.active {
  border-color: rgba(245,185,48,.55);
  background: rgba(245,185,48,.07);
}

.clan-calendar-day.has-event {
  border-color: rgba(239,78,96,.88);
  box-shadow: inset 0 0 0 1px rgba(239,78,96,.16);
}

.clan-calendar-day.has-event:hover,
.clan-calendar-day.has-event.active {
  background: rgba(239,78,96,.1);
}

.clan-calendar-day.is-outside-month {
  opacity: .36;
}

.clan-calendar-day.is-outside-month:hover,
.clan-calendar-day.is-outside-month.active {
  opacity: .72;
}

.clan-calendar-day.is-today::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 6px;
  left: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.clan-calendar-day-number {
  font-size: 13px;
  font-weight: 900;
}

.clan-calendar-day > i {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.clan-calendar-day > i.registered {
  border: 1px solid rgba(99,217,113,.75);
  color: #d9ffde;
  background: rgba(48,151,68,.72);
}

.clan-calendar-day > i.waitlist {
  border: 1px solid rgba(245,185,48,.8);
  background: rgba(245,185,48,.78);
}

.clan-calendar-day > b {
  position: absolute;
  right: 6px;
  bottom: 5px;
  min-width: 16px;
  color: #ffb1bc;
  font-size: 10px;
  text-align: center;
}

.clan-calendar-details {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 100%;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.clan-calendar-details > strong {
  color: var(--text);
  font-size: 13px;
}

.clan-calendar-details a {
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--text);
  background: rgba(255,255,255,.025);
}

.clan-calendar-details a:hover {
  border-color: rgba(245,185,48,.5);
}

.clan-calendar-details a > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.clan-calendar-details b,
.clan-calendar-details em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-calendar-details b {
  font-size: 12px;
}

.clan-calendar-details em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.clan-calendar-details i {
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.clan-calendar-details i.registered {
  color: #7ded89;
}

.clan-calendar-details i.waitlist {
  color: var(--gold);
}

.clan-calendar-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.clan-calendar-legend {
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.clan-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.clan-calendar-legend i {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  font-style: normal;
  font-size: 9px;
  font-weight: 950;
}

.clan-calendar-legend i.event {
  border: 2px solid #ff5f73;
  background: rgba(239,78,96,.12);
}

.clan-calendar-legend i.registered {
  border: 1px solid #82ee8f;
  color: #fff;
  background: #2f9845;
}

.clan-calendar-legend i.waitlist {
  border: 1px solid #ffd05e;
  background: #d99b12;
}

.clan-training-date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 7px;
  background: rgba(245,185,48,.055);
  color: var(--muted);
  font-size: 12px;
}

.clan-training-date-filter strong,
.clan-training-date-filter a {
  color: var(--gold);
}

.clan-training-date-filter a {
  font-weight: 900;
}

.leader-request-box,
.leader-request-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  background: rgba(245,185,48,.055);
}

.leader-request-box {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.leader-request-box strong,
.leader-request-list > strong {
  display: block;
  color: var(--text);
  font-weight: 900;
}

.leader-request-box span,
.leader-request-box em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.leader-request-box form,
.leader-request-list form {
  margin: 0;
}

.leader-request-box button,
.leader-request-list button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(95,215,83,.46);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(95,215,83,.09);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.leader-request-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.leader-request-list article > span {
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-request-list article > div {
  display: flex;
  gap: 6px;
}

.leader-request-list button.muted {
  border-color: rgba(255,95,95,.46);
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
}

.application-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.application-form label,
.application-form-wide {
  display: grid;
  gap: 6px;
}

.application-form-wide {
  grid-column: 1 / -1;
}

.application-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.application-form input,
.application-form textarea,
.application-form select,
.clan-settings-form input,
.clan-settings-form textarea,
.clan-settings-form select,
.question-form input,
.question-form select,
.poll-form input,
.poll-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 13, 18, .85);
  color: var(--text);
  font: inherit;
}

.application-form input,
.application-form select,
.clan-settings-form input,
.clan-settings-form select,
.question-form input,
.question-form select,
.poll-form input {
  min-height: 38px;
  padding: 0 10px;
}

.application-form textarea,
.clan-settings-form textarea,
.poll-form textarea {
  resize: vertical;
  padding: 10px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.application-form button,
.clan-settings-form button,
.question-form button,
.poll-form button,
.feedback-form button,
.application-row button,
.inline-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(245,185,48,.45);
  border-radius: 7px;
  background: rgba(245,185,48,.14);
  color: var(--gold);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.application-form button {
  grid-column: 1 / -1;
}

.clan-settings-form,
.question-form,
.poll-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clan-settings-form label,
.question-form label,
.poll-form label {
  display: grid;
  gap: 6px;
}

.clan-settings-form label span,
.question-form label span,
.poll-form label span,
.application-form label em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.clan-settings-form button {
  grid-column: 1 / -1;
}

.question-form button {
  align-self: end;
}

.poll-form button {
  align-self: end;
}

.clan-polls-create-form {
  grid-template-columns: 1fr;
}

.clan-polls-create-form button {
  width: 100%;
}

.clan-manage-panel,
.clan-questions-panel {
  grid-column: 1 / -1;
}

.clan-manage-panel,
.clan-questions-panel {
  display: none;
}

.clan-settings-mode .clan-questions-panel {
  display: block;
}

.clan-info-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.inline-clan-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.inline-clan-action button {
  font: inherit;
}

.clan-section-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.clan-section-button:hover {
  border-color: rgba(245,185,48,.58);
  background: rgba(245,185,48,.14);
}

.clan-info-actions .compact-green-button,
.clan-info-actions .tree-pool-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  line-height: 1;
}

.clan-trainings-page {
  max-width: 1420px;
  padding-top: 18px;
}

.clan-trainings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: start;
}

.clan-training-journal-panel,
.clan-training-create-panel {
  min-height: 0;
}

.clan-training-journal-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.clan-training-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 2px;
  margin-top: 12px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.clan-training-view-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.clan-training-view-switch a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}

.clan-training-view-switch a.active {
  border-color: rgba(245,185,48,.42);
  color: var(--text);
  background: rgba(245,185,48,.1);
}

.clan-training-view-switch b {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  color: var(--gold);
  background: rgba(245,185,48,.12);
  font-size: 11px;
  line-height: 1;
}

.clan-training-head-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.clan-training-edit-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.clan-training-record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.clan-training-record {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  text-decoration: none;
}

.clan-training-record:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.06);
}

.clan-training-record.ongoing {
  border-color: rgba(95,215,83,.32);
  background: rgba(95,215,83,.045);
}

.clan-training-record.ongoing b {
  color: #8df183;
}

.clan-training-record-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.clan-training-record-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.clan-training-record strong,
.clan-training-record em {
  display: block;
  min-width: 0;
}

.clan-training-record strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-training-record em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.clan-training-record b,
.clan-training-record small {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.clan-training-record b {
  color: var(--green);
}

.clan-training-record.cancelled {
  border-color: rgba(255,95,95,.22);
  background: rgba(255,95,95,.035);
}

.clan-training-record.cancelled b {
  color: #ff9e9e;
}

.clan-training-record small {
  color: var(--muted);
}

.clan-training-list-edit-only {
  display: none;
}

body.clan-trainings-edit-mode .clan-training-list-edit-only {
  display: grid;
}

.clan-training-delete-form {
  align-items: stretch;
}

.clan-training-delete-form button {
  min-width: 86px;
  border: 1px solid rgba(255,95,95,.55);
  border-radius: 8px;
  color: #ffb0b0;
  background: rgba(255,95,95,.12);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.clan-training-delete-form button:hover {
  border-color: rgba(255,95,95,.9);
  background: rgba(255,95,95,.2);
}

.clan-training-create-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.clan-training-create-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clan-training-create-form input,
.clan-training-create-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  font: inherit;
  font-size: 13px;
}

.clan-training-create-form textarea {
  resize: vertical;
}

.clan-training-create-form input[type="file"] {
  padding: 7px 9px;
}

.clan-training-create-form label small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.clan-training-create-form input:focus,
.clan-training-create-form textarea:focus {
  outline: none;
  border-color: rgba(245,185,48,.52);
}

@media (max-width: 780px) {
  .clan-event-calendar-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .clan-calendar-navigation {
    width: 100%;
    justify-content: space-between;
  }

  .clan-calendar-layout {
    grid-template-columns: 1fr;
  }

  .clan-calendar-details {
    min-height: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .clan-calendar-day,
  .clan-calendar-spacer {
    min-height: 44px;
  }
}

.clan-training-create-form button {
  height: 38px;
  border: 1px solid rgba(99,217,113,.48);
  border-radius: 8px;
  color: #dfffe4;
  background: rgba(99,217,113,.12);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.clan-training-create-form button:hover {
  border-color: rgba(99,217,113,.82);
  background: rgba(99,217,113,.18);
}

.clan-ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.clan-ops-summary article {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.clan-ops-summary span,
.clan-ops-alerts span,
.training-template-card span,
.training-template-card em,
.training-template-card small,
.recruit-checklist-card span,
.officer-note-card span {
  color: var(--muted);
  font-size: 12px;
}

.clan-ops-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1;
}

.clan-ops-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.clan-ops-alerts span {
  padding: 6px 8px;
  border: 1px solid rgba(245,185,48,.24);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-weight: 800;
}

.clan-training-template-panel {
  margin-top: 16px;
}

.panel-head.compact {
  margin-bottom: 8px;
}

.training-template-list,
.officer-note-list,
.recruit-checklist-grid {
  display: grid;
  gap: 8px;
}

.training-template-card,
.recruit-checklist-card,
.officer-note-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.training-template-card strong,
.recruit-checklist-card strong,
.officer-note-card strong {
  font-size: 13px;
  font-weight: 900;
}

.training-template-card form,
.clan-training-template-form,
.officer-note-form {
  display: grid;
  gap: 8px;
}

.training-template-card form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.training-template-card input,
.clan-training-template-form input,
.clan-training-template-form textarea,
.officer-note-form select,
.officer-note-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  font: inherit;
  font-size: 12px;
}

.training-template-card input,
.clan-training-template-form input,
.officer-note-form select {
  height: 34px;
  padding: 0 9px;
}

.officer-note-form textarea {
  min-height: 68px;
  padding: 9px;
  resize: vertical;
}

.clan-training-template-form textarea {
  min-height: 112px;
  padding: 9px;
  resize: vertical;
}

.training-template-flex-mark {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(99,217,113,.34);
  border-radius: 999px;
  color: #9af0a6;
  background: rgba(99,217,113,.08);
  font-weight: 900;
}

.training-template-card button,
.clan-training-template-form button,
.officer-note-form button {
  height: 34px;
  border: 1px solid rgba(99,217,113,.46);
  border-radius: 8px;
  color: #dfffe4;
  background: rgba(99,217,113,.12);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.clan-training-template-form {
  margin-top: 10px;
}

.clan-training-template-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clan-training-template-form label,
.officer-note-form label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.recruit-checklist-panel,
.officer-notes-panel,
.clan-pool-log-panel {
  margin-top: 16px;
}

.recruit-checklist-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.recruit-checklist-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recruit-checklist-items label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 800;
}

.recruit-checklist-items label.done {
  border-color: rgba(99,217,113,.38);
  color: #dfffe4;
  background: rgba(99,217,113,.1);
}

.officer-note-form {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto auto;
  align-items: center;
  margin-bottom: 10px;
}

.officer-note-card.pinned {
  border-color: rgba(245,185,48,.34);
  background: rgba(245,185,48,.07);
}

.officer-note-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.clan-pool-log-list {
  display: grid;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.clan-pool-log-card {
  display: grid;
  grid-template-columns: 64px minmax(110px, .72fr) minmax(140px, 1fr) minmax(130px, .9fr) minmax(110px, .7fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.clan-pool-log-card span,
.clan-pool-log-card em,
.clan-pool-log-card small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.clan-pool-log-card strong {
  color: var(--gold);
  font-size: 12px;
}

.clan-pool-log-card b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-pool-log-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.clan-pool-log-card.action-removed,
.clan-pool-log-card.action-application_declined {
  border-color: rgba(255,91,91,.22);
  background: rgba(255,91,91,.035);
}

.clan-pool-log-card.action-added,
.clan-pool-log-card.action-application_accepted {
  border-color: rgba(95,215,83,.2);
  background: rgba(95,215,83,.035);
}

@media (max-width: 980px) {
  .clan-trainings-layout {
    grid-template-columns: 1fr;
  }

  .clan-training-record {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .clan-training-record-row {
    grid-template-columns: 1fr;
  }

  .clan-training-delete-form button {
    min-height: 38px;
  }

  .clan-training-record b,
  .clan-training-record small {
    grid-column: 2;
  }

  .clan-training-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  .clan-training-view-switch a {
    min-width: 0;
    padding-inline: 8px;
  }

  .clan-ops-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .officer-note-form {
    grid-template-columns: 1fr;
  }
}

.clan-detail-members-pool {
  margin: 0 0 12px;
}

.clan-settings-mode .clan-member-remove,
.clan-pool-edit-mode .clan-member-remove {
  display: inline-grid;
}

.clan-pool-page {
  max-width: 1420px;
  padding-top: 18px;
}

.clan-pool-panel {
  min-height: calc(100vh - 118px);
}

.clan-pool-members {
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 0;
  padding: 10px;
}

.clan-pool-member-chip {
  min-width: 150px;
  max-width: 300px;
}

.clan-pool-member-chip.selectable-pool-card {
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
}

.clan-manage-panel {
  grid-row: 4;
}

.clan-questions-panel {
  grid-row: 5;
}

.question-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.question-edit-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.2fr) 140px 84px minmax(128px, auto) auto;
  gap: 8px;
  align-items: end;
  width: 100%;
}

.question-edit-form label {
  display: grid;
  gap: 4px;
}

.question-edit-form label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.question-edit-form input,
.question-edit-form select {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
}

.question-edit-form .check-row {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
}

.question-edit-form .check-row span {
  color: var(--text);
  font-size: 12px;
  text-transform: none;
}

.question-edit-form button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(99,217,113,.56);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(99,217,113,.08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.question-row > form:not(.question-edit-form) {
  justify-self: end;
}

.poll-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.clan-polls-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 14px;
  align-items: start;
}

.clan-polls-page .clan-polls-layout {
  margin-top: 12px;
}

.clan-polls-page .clan-polls-panel {
  grid-column: auto;
  grid-row: auto;
}

.clan-poll-create-panel {
  position: sticky;
  top: 86px;
}

.clan-polls-page .clan-poll-create-panel {
  align-self: start;
}

.current-poll-list {
  margin-top: 0;
}

.current-poll-list .poll-card {
  gap: 7px;
  padding: 8px 10px;
}

.current-poll-list .poll-head {
  align-items: center;
}

.current-poll-list .poll-head strong {
  font-size: 13px;
}

.current-poll-list .poll-card p {
  display: -webkit-box;
  max-height: 34px;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
}

.current-poll-list .poll-options {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}

.current-poll-list .poll-options label {
  min-height: 34px;
  padding: 6px 7px;
}

.current-poll-list .poll-options label span {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 4px 8px;
}

.current-poll-list .poll-options i {
  height: 4px;
}

.current-poll-list .poll-options small {
  font-size: 11px;
}

.current-poll-list .poll-options button {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 0 12px;
}

.poll-archive-list {
  margin-top: 10px;
}

.clan-poll-journal-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.clan-poll-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.clan-poll-record:hover {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.06);
}

.clan-poll-record .poll-head {
  display: contents;
}

.clan-poll-record .poll-head > div {
  min-width: 0;
}

.clan-poll-record .poll-head strong,
.clan-poll-record .poll-head span {
  display: block;
  min-width: 0;
}

.clan-poll-record .poll-head strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-poll-record .poll-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-poll-record .poll-head em {
  justify-self: end;
  min-width: 72px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.clan-poll-record > p,
.clan-poll-record .poll-results-only {
  display: none;
}

.poll-archive-head {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.poll-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.poll-card.closed {
  opacity: .7;
}

.poll-card.voted {
  border-color: rgba(99,217,113,.28);
  background: rgba(99,217,113,.035);
}

.poll-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.poll-head strong,
.poll-head span {
  display: block;
}

.poll-head span,
.poll-card p {
  color: var(--muted);
  font-size: 12px;
}

.poll-head em {
  color: var(--green);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.poll-options {
  display: grid;
  gap: 8px;
}

.poll-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
}

.poll-options label.selected,
.poll-result-row.selected {
  border-color: rgba(245,185,48,.38);
  background: rgba(245,185,48,.06);
}

.poll-options label span,
.poll-result-row span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 6px 10px;
  align-items: center;
}

.poll-options i,
.poll-result-row i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.poll-options i em,
.poll-result-row i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.poll-options small,
.poll-result-row small {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.poll-results-only {
  gap: 7px;
}

.poll-result-row {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: rgba(255,255,255,.02);
}

.public-question-list {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.editable-application {
  display: grid;
  gap: 12px;
}

.editable-application summary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(245,185,48,.45);
  border-radius: 7px;
  background: rgba(245,185,48,.14);
  color: var(--gold);
  font-weight: 900;
  cursor: pointer;
}

.editable-application[open] summary {
  margin-bottom: 12px;
}

.public-question-list strong {
  font-size: 13px;
}

.public-question-list span {
  color: var(--muted);
  font-size: 12px;
}

.question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.question-row strong,
.question-row span {
  display: block;
}

.question-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.application-row button.danger,
.inline-actions button.danger {
  border-color: rgba(255,95,95,.38);
  background: rgba(255,95,95,.10);
  color: #ff9a9a;
}

.form-steam {
  margin-top: 14px;
}

.roster-tree-large {
  gap: 10px;
}

.roster-pool {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.clan-tree {
  display: grid;
  gap: 18px;
}

.tree-root {
  display: flex;
  justify-content: center;
}

.tree-person,
.tree-member {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.tree-person {
  min-width: 220px;
  padding: 13px 15px;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.tree-person b,
.tree-person span,
.tree-member span,
.tree-pool-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.tree-person b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tree-person b img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tree-person strong {
  display: block;
  margin: 5px 0;
  font-size: 18px;
}

.roster-tree-head {
  position: relative;
  align-items: flex-start;
  padding-right: 330px;
}

.roster-tree-head h2 {
  margin: 0 0 4px;
}

.roster-tree-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tree-edit-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  width: auto;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.tree-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(99,217,113,.58);
  border-radius: 8px;
  color: #9af0a6;
  background: rgba(99,217,113,.08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.tree-clan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.tree-pool-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.tree-pool-toggle:hover,
.tree-clan-button:hover,
.tree-pool-toggle.active {
  border-color: rgba(245,185,48,.58);
  background: rgba(245,185,48,.14);
}

.tree-save-button:hover {
  border-color: rgba(99,217,113,.82);
  background: rgba(99,217,113,.14);
}

.tree-edit-toggle svg {
  width: 18px;
  height: 18px;
}

.tree-edit-toggle span {
  font-size: 12px;
  font-weight: 900;
}

.tree-edit-toggle:hover,
.tree-edit-toggle.active {
  border-color: rgba(245,185,48,.48);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.roster-view-toggle.active {
  border-color: rgba(245,185,48,.48);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.tree-person.leader {
  border-color: rgba(245,185,70,.45);
  background: linear-gradient(180deg, rgba(245,185,70,.18), rgba(255,255,255,.025));
}

.roster-members-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(0,0,0,.14);
}

.roster-members-pool[hidden] {
  display: none;
}

.roster-member-chip {
  display: inline-grid;
  grid-template-columns: 24px minmax(0, auto) auto;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  max-width: 220px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.roster-member-chip b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-member-chip em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.selectable-pool-card {
  position: relative;
  cursor: pointer;
}

.selectable-pool-card input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.selectable-pool-card:has(input:checked) {
  border-color: rgba(84, 214, 91, .75);
  background: linear-gradient(90deg, rgba(84, 214, 91, .16), rgba(255,255,255,.035));
  box-shadow: 0 0 0 1px rgba(84, 214, 91, .18) inset;
}

.selectable-pool.pool-selection-required {
  outline: 1px solid rgba(245,80,80,.62);
  outline-offset: 4px;
}

.selectable-pool.pool-selection-required::before {
  content: "Сначала выбери игрока в пуле";
  display: block;
  grid-column: 1 / -1;
  padding: 9px 11px;
  border: 1px solid rgba(245,80,80,.45);
  border-radius: 8px;
  color: #ff9a9a;
  background: rgba(245,80,80,.08);
  font-size: 12px;
  font-weight: 900;
}

.roster-member-remove-button {
  position: relative;
  z-index: 2;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255,95,95,.5);
  border-radius: 6px;
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.clan-pool-edit-mode .roster-member-remove-button {
  display: grid;
}

.roster-member-remove-button.clan-kick-button {
  width: auto;
  min-width: 72px;
  padding: 0 9px;
  border-color: rgba(255,95,95,.66);
  background: rgba(255,95,95,.11);
  font-size: 0;
}

.roster-member-remove-button.clan-kick-button::after {
  content: "Удалить";
  font-size: 11px;
}

.roster-member-remove-button.clan-kick-button:hover,
.roster-member-remove-button.clan-kick-button:focus-visible {
  border-color: rgba(255,120,120,.92);
  color: #ffd0d0;
  background: rgba(255,95,95,.18);
  outline: none;
}

.pool-role-actions {
  display: none;
  gap: 7px;
  max-width: 220px;
  margin: 0 0 18px;
}

.clan-pool-edit-mode .pool-role-actions {
  display: grid;
}

.pool-role-actions h3 {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.pool-role-actions button {
  justify-content: flex-start;
  min-height: 34px;
  border: 1px solid rgba(84, 214, 91, .35);
  border-radius: 7px;
  color: var(--text);
  background: rgba(84, 214, 91, .08);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.pool-role-actions button:hover {
  border-color: rgba(84, 214, 91, .7);
  background: rgba(84, 214, 91, .14);
}

.roster-member-remove {
  display: none;
  margin: 0;
}

.roster-edit-mode .roster-member-remove {
  display: inline-grid;
}

.roster-member-remove button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255,95,95,.5);
  border-radius: 6px;
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.tree-person.officer {
  border-color: rgba(99,162,255,.34);
}

.officer-request-click {
  width: 100%;
  margin: 0;
}

.officer-request-menu {
  display: grid;
  gap: 6px;
}

.request-edit-only {
  display: none;
}

.roster-edit-mode .request-edit-only {
  display: grid;
}

.roster-edit-mode .officer-readonly-line {
  display: none;
}

.officer-request-menu summary {
  list-style: none;
}

.officer-request-menu summary::-webkit-details-marker {
  display: none;
}

.officer-request-click .tree-person {
  width: 100%;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.officer-role-request-form {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 9px;
  border: 1px solid rgba(245,185,48,.2);
  border-radius: 8px;
  background: rgba(245,185,48,.055);
}

.officer-role-request-form label {
  display: grid;
  gap: 5px;
}

.officer-role-request-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.officer-role-request-form select,
.officer-role-request-form input {
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.04);
}

.clickable-officer {
  appearance: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.clickable-officer:hover {
  transform: translateY(-1px);
  border-color: rgba(245,185,48,.62);
  background: linear-gradient(180deg, rgba(99,162,255,.16), rgba(245,185,48,.06));
}

.tree-person em {
  display: block;
  margin-top: 7px;
  color: var(--gold);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.tree-person.empty,
.tree-member.empty {
  color: var(--muted);
  background: rgba(255,255,255,.025);
}

.tree-officers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 8px;
}

.tree-officers::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 26px;
  background: rgba(245,185,70,.35);
}

.tree-node {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.tree-node::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.16);
}

.tree-split {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tree-split-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tree-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.13);
}

.tree-squad-group {
  width: 100%;
  gap: 4px;
  padding: 0;
}

.tree-group h3,
.tree-pool h3 {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tree-group h3 span {
  float: right;
  color: var(--gold);
}

.tree-member {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 9px 10px;
}

.tree-squad-group .tree-member {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.squad-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.squad-leader-line {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(245,185,48,.22);
  background: rgba(245,185,48,.055);
}

.squad-leader-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.squad-fill-count {
  min-width: 34px;
  color: var(--gold) !important;
  font-size: 12px !important;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.roster-edit-mode .squad-fill-count {
  display: none;
}

.squad-role-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.squad-role-icon img {
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
}

.squad-line strong,
.squad-line b,
.squad-line span {
  display: block;
}

.squad-line strong,
.squad-line b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.squad-line span {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.15;
}

.squad-size-form {
  display: none;
  align-items: center;
  gap: 4px;
}

.roster-edit-mode .squad-size-form {
  display: inline-flex;
}

.squad-size-form input {
  width: 34px;
  height: 26px;
  padding: 0 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.tree-member-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.squad-line .tree-member-title {
  display: block;
}

.tree-member b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tree-member-action {
  display: none;
  margin: 0 0 0 auto;
}

.roster-edit-mode .tree-member-action {
  display: block;
}

.tree-member-action button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(245,185,48,.36);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.tree-member-action button:hover {
  border-color: rgba(255,95,95,.5);
  color: #ffb0a8;
  background: rgba(255,95,95,.08);
}

.tree-squad-group .member-role-line {
  justify-content: flex-end;
  margin-top: 0;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}

.tree-squad-group .member-role-line img {
  width: 15px;
  height: 15px;
}

.roster-draggable-member {
  touch-action: none;
}

.roster-sort-enabled .roster-draggable-member {
  cursor: grab;
}

.roster-sort-enabled .roster-draggable-member:active {
  cursor: grabbing;
}

.squad-slot {
  display: none;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px dashed rgba(99,217,113,.36);
  border-radius: 6px;
  color: rgba(154,240,166,.8);
  background: rgba(99,217,113,.035);
  font-size: 11px;
  font-weight: 800;
}

.roster-edit-mode .squad-slot {
  display: block;
}

.squad-request-slot {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.squad-request-slot summary {
  display: block;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px dashed rgba(99,217,113,.42);
  border-radius: 6px;
  color: rgba(154,240,166,.9);
  background: rgba(99,217,113,.045);
  cursor: pointer;
  list-style: none;
}

.squad-request-slot summary::-webkit-details-marker {
  display: none;
}

.roster-edit-mode .squad-request-placeholder {
  display: none;
}

.roster-inline-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  gap: 5px;
  align-items: center;
  border-style: solid;
  border-color: rgba(245,185,48,.34);
  color: var(--text);
  background: rgba(245,185,48,.06);
}

.roster-inline-request b,
.roster-inline-request span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-inline-request b {
  font-size: 12px;
}

.roster-inline-request span {
  color: var(--muted);
  font-size: 10px;
}

.roster-inline-request form {
  margin: 0;
}

.roster-inline-request button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.inline-request-accept {
  border: 1px solid rgba(99,217,113,.62);
  color: #9af0a6;
  background: rgba(99,217,113,.09);
}

.inline-request-decline {
  border: 1px solid rgba(255,95,95,.5);
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
}

.roster-role-hidden {
  display: none !important;
}

.slot-role-request-form {
  margin-top: 5px;
}

.slot-role-options {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 7px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.slot-role-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.slot-role-option:hover {
  border-color: rgba(245,185,48,.5);
  color: var(--gold);
  background: rgba(245,185,48,.08);
}

.slot-role-option b {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-dragging .squad-slot {
  border-color: rgba(99,217,113,.74);
  background: rgba(99,217,113,.1);
}

.roster-dragging .squad-slot.roster-slot-target {
  border-color: rgba(245,185,48,.9);
  color: var(--gold);
  background: rgba(245,185,48,.14);
  box-shadow: inset 0 0 0 1px rgba(245,185,48,.25);
}

.roster-sort-ghost {
  opacity: .42;
}

.roster-sort-chosen,
.roster-sort-drag {
  border-color: rgba(245,185,48,.58) !important;
  background: rgba(245,185,48,.12) !important;
}

.roster-list-denied {
  box-shadow: inset 0 0 0 1px rgba(255,95,95,.66);
}

.roster-sort-pool {
  display: grid;
  gap: 6px;
}

.roster-pool-member {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.roster-pool-member strong,
.roster-pool-member span {
  display: block;
  overflow-wrap: anywhere;
}

.roster-pool-member strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
}

.roster-pool-member span {
  color: var(--muted);
  font-size: 10.5px;
}

.roster-sort-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.roster-sort-status[data-type="success"] {
  color: #9af0a6;
}

.roster-sort-status[data-type="error"] {
  color: #ff9a9a;
}

.roster-only-tree {
  gap: 0;
}

.roster-only-tree .tree-root {
  justify-content: flex-start;
}

.roster-only-tree .tree-person {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
  box-shadow: none;
}

.roster-only-tree .tree-person strong {
  margin: 2px 0;
  font-size: 15px;
}

.roster-only-tree .tree-person b,
.roster-only-tree .tree-person span {
  justify-content: flex-start;
  font-size: 11px;
}

.roster-only-tree {
  overflow-x: auto;
  padding-top: 2px;
}

.roster-only-tree .tree-root {
  position: relative;
  justify-content: center;
  padding-bottom: 26px;
}

.roster-only-tree .tree-root::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 1px;
  height: 40px;
  background: rgba(245,185,70,.45);
}

.roster-only-tree .tree-person.leader {
  width: min(260px, 100%);
  min-width: 260px;
  max-width: 260px;
  border-color: rgba(245,185,48,.48);
  background: linear-gradient(180deg, rgba(245,185,48,.13), rgba(255,255,255,.025));
  text-align: center;
}

.roster-only-tree .tree-person.leader b,
.roster-only-tree .tree-person.leader span {
  justify-content: center;
}

.roster-only-tree .tree-officers {
  min-width: 920px;
  padding-top: 28px;
  gap: 14px 10px;
}

.roster-only-tree .tree-officers::before {
  display: block;
  top: 14px;
  left: 12.5%;
  width: 75%;
  height: 1px;
  background: rgba(245,185,70,.44);
}

.roster-only-tree .tree-node::before {
  display: block;
  top: -14px;
  height: 14px;
  background: rgba(245,185,70,.36);
}

.roster-only-tree .tree-node::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 17px;
  width: 1px;
  bottom: -14px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

.roster-only-tree .tree-node:nth-last-child(-n+4)::after {
  bottom: 4px;
}

.roster-only-tree .tree-group {
  position: relative;
  border: 0;
  background: transparent;
}

.roster-only-tree .tree-squad-group {
  padding: 0 0 0 18px;
}

.roster-only-tree .tree-squad-group .squad-line,
.roster-only-tree .tree-squad-group .squad-slot,
.roster-only-tree .tree-squad-group .tree-member {
  position: relative;
}

.roster-only-tree .tree-squad-group .squad-line::before,
.roster-only-tree .tree-squad-group .squad-slot::before,
.roster-only-tree .tree-squad-group .tree-member::before {
  display: none;
}

.tree-pool,
.tree-pilots {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.tree-member.pilot {
  border-color: rgba(99,162,255,.34);
  background: linear-gradient(180deg, rgba(99,162,255,.12), rgba(255,255,255,.025));
}

.tree-pool-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.roster-assign-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.roster-assign-form label {
  display: grid;
  gap: 6px;
}

.roster-assign-form label span {
  color: var(--muted);
  font-size: 12px;
}

.roster-assign-form select {
  width: 100%;
  min-height: 40px;
}

.application-queue-action-form {
  display: none;
}

.application-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.application-pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.application-pick-card:hover {
  transform: translateY(-1px);
  border-color: rgba(99,162,255,.34);
  background: rgba(99,162,255,.055);
}

.application-pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.application-pick-card:has(input:checked) {
  border-color: rgba(99,217,113,.76);
  background: rgba(99,217,113,.08);
  box-shadow: inset 0 0 0 1px rgba(99,217,113,.22);
}

.application-pick-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.application-pick-card strong,
.application-pick-card em {
  display: block;
}

.application-pick-card strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.application-pick-card em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.application-queue-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.application-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.application-player-link {
  display: block;
  min-width: 0;
}

.application-player-link strong,
.application-player-link span {
  display: block;
}

.application-player-link strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.application-player-link span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.application-row button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(99,217,113,.52);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(99,217,113,.08);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.application-row button.danger {
  border-color: rgba(255,95,95,.44);
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
}

.applications-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
}

.application-list-panel,
.application-answer-panel {
  min-height: 360px;
}

.application-pick-row {
  position: relative;
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.application-pick-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.application-pick-player {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.application-pick-row b,
.application-pick-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-pick-row small {
  color: var(--muted);
  font-size: 12px;
}

.application-pick-row.active,
.application-pick-row:has(input:checked) {
  border-color: rgba(245,185,48,.5);
  background: rgba(245,185,48,.075);
}

.application-answer-card {
  display: none;
  gap: 14px;
}

.application-answer-card.active {
  display: grid;
}

.application-answer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.application-answer-head strong,
.application-answer-head span {
  display: block;
}

.application-answer-head span,
.application-answer-grid span,
.application-custom-answers span {
  color: var(--muted);
  font-size: 12px;
}

.application-answer-head a {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.application-answer-grid,
.application-custom-answers {
  display: grid;
  gap: 8px;
}

.application-answer-grid {
  grid-template-columns: 120px minmax(0, 1fr);
}

.application-custom-answers div {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.application-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.application-inline-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(99,217,113,.52);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(99,217,113,.08);
  font-weight: 900;
}

.application-inline-actions button.danger {
  border-color: rgba(255,95,95,.44);
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
}

.application-detail-page,
.clan-roster-page {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.application-detail-hero,
.roster-page-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,11,15,.96), rgba(11,17,24,.72)),
    radial-gradient(circle at 78% 18%, rgba(245,185,48,.18), transparent 34%),
    linear-gradient(135deg, rgba(29,42,51,.9), rgba(5,8,11,.94));
}

.application-detail-hero > div > span,
.roster-page-hero span {
  display: block;
  margin-top: 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.application-detail-hero h1,
.roster-page-hero h1 {
  margin-top: 6px;
  font-size: 36px;
}

.application-detail-hero p,
.roster-page-hero p {
  margin-top: 8px;
  color: var(--muted);
}

.application-player-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 220px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.application-player-card img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
}

.application-player-card span {
  color: var(--muted);
  font-size: 12px;
}

.application-detail-grid,
.roster-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .45fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.application-detail-grid .panel:first-child,
.application-actions-panel,
.roster-tree-panel {
  grid-column: 1;
}

.application-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.application-info-grid article,
.application-answer-list article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.application-info-grid .wide {
  grid-column: 1 / -1;
}

.application-info-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.application-info-grid strong,
.application-answer-list strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
}

.application-info-grid p,
.application-answer-list p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.5;
}

.application-answer-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.application-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.application-action-row button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 7px;
  color: #141009;
  background: var(--gold);
  font-weight: 900;
}

.application-action-row button.danger {
  border-color: rgba(255,95,86,.4);
  color: #fff;
  background: rgba(255,95,86,.82);
}

.roster-page-grid {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.roster-view-mode .clan-roster-page {
  width: min(1860px, 100%);
  padding: 6px 10px 48px;
}

.roster-view-mode .roster-page-grid {
  margin-top: 0;
}

.roster-view-mode .message-stack {
  display: none;
}

.training-round-results-panel {
  margin-top: 14px;
}

.training-round-results-grid {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.training-round-result-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.training-round-result-card > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.training-round-result-card > header span {
  grid-column: 2;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.training-round-result-card > header strong {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-round-result-card > header em {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.training-round-result-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.training-round-result-team {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(7,10,14,.34);
}

.training-round-result-team.reserve {
  grid-column: 1 / -1;
}

.training-round-result-team-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.training-round-result-team-head strong {
  color: var(--text);
}

.training-round-result-team-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.training-round-result-player-list {
  display: grid;
  gap: 6px;
}

.training-round-result-player-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.training-round-result-player-list strong,
.training-round-result-player-list em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-round-result-player-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.training-round-result-player-list b {
  color: var(--gold);
  font-size: 12px;
}

.training-vehicle-squad-results {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(245,185,48,.2);
}

.training-vehicle-squad-results > strong {
  color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.training-vehicle-squad-result {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(245,185,48,.06);
  font-size: 12px;
}

.training-vehicle-squad-result span {
  color: var(--text);
  font-weight: 900;
}

.training-vehicle-squad-result b {
  color: var(--muted);
}

.training-vehicle-squad-result em {
  width: 100%;
  color: var(--gold);
  font-style: normal;
}

.roster-view-mode .roster-tree-head {
  display: none;
}

.roster-view-mode .roster-tree-panel {
  padding: 8px;
}

.roster-view-mode .roster-tree-actions,
.roster-view-mode .tree-save-button,
.roster-view-mode .tree-edit-toggle {
  display: none !important;
}

.roster-edit-top-toggle {
  border-color: rgba(245,185,48,.28);
}

.roster-edit-top-toggle.active,
.roster-dogtag-link:hover {
  border-color: rgba(245,185,48,.74);
  color: #ffd46a;
  background: rgba(245,185,48,.14);
}

.roster-pool-panel {
  display: none !important;
  grid-column: 1;
}

.roster-edit-mode .roster-page-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.roster-edit-mode .roster-pool-panel {
  display: none !important;
  gap: 16px;
}

.roster-side-pool {
  display: none;
}

.roster-sort-enabled .roster-side-pool {
  display: grid;
  gap: 4px;
  align-content: start;
  position: sticky;
  top: 92px;
  z-index: 8;
  width: auto;
  max-height: calc(100vh - 112px);
  min-height: 120px;
  overflow: hidden auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(7,10,14,.92);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}

.roster-side-pool-left {
  grid-column: 1;
}

.roster-side-pool-right {
  grid-column: 3;
}

.roster-edit-mode .roster-tree-panel {
  grid-column: 1;
}

.roster-sort-enabled .clan-roster-page {
  width: min(1860px, 100%);
}

.roster-sort-enabled .roster-page-grid {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, 190px);
  gap: 10px;
}

.roster-sort-enabled .roster-tree-panel {
  grid-column: 2;
}

.roster-side-player {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.roster-side-player b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-side-player > div > span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-side-player .squad-role-icon {
  display: grid;
  color: var(--muted);
}

.roster-sort-enabled .roster-side-player {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.roster-sort-enabled .roster-draggable-member,
.roster-sort-enabled .roster-draggable-member * {
  user-select: none;
  -webkit-user-select: none;
}

.roster-sort-enabled [data-empty-slot] {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.roster-sort-enabled [data-empty-label] {
  user-select: none;
  -webkit-user-select: none;
}

.roster-sort-enabled .tree-squad-group,
.roster-sort-enabled .roster-side-pool {
  user-select: none;
  -webkit-user-select: none;
}

.dogtag-preview-page {
  width: min(1660px, 100%);
  margin: 0 auto;
  padding: 24px 22px 60px;
}

.dogtag-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
}

.dogtag-hero h1 {
  margin: 4px 0 8px;
  color: var(--text);
  font-size: 36px;
  line-height: 1;
}

.dogtag-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.dogtag-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17,22,28,.86), rgba(8,11,15,.92));
}

.dogtag-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dogtag-grid-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dogtag-grid-compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dogtag-slot-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.dogtag-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 6px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(245,185,48,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.24);
}

.dogtag-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.025) 19px);
  opacity: .55;
}

.dogtag-hole {
  position: absolute;
  top: 50%;
  left: 9px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  transform: translateY(-50%);
}

.dogtag-card .squad-role-icon {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  color: var(--muted);
}

.dogtag-card strong,
.dogtag-card small,
.dogtag-card b,
.dogtag-card em {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.dogtag-card strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dogtag-card small,
.dogtag-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dogtag-card b {
  color: var(--gold);
  font-size: 12px;
}

.dogtag-card-wide {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 54px;
  padding: 8px 12px 8px 28px;
}

.dogtag-card-wide small {
  grid-column: 2;
  margin-top: -2px;
}

.dogtag-card-compact {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10px 7px 26px;
}

.dogtag-card-compact .squad-role-icon {
  width: 24px;
  height: 24px;
}

.dogtag-card-compact small {
  grid-column: 2;
  margin-top: -5px;
}

.dogtag-card-slot {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 10px 12px 10px 28px;
}

.dogtag-card-slot > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 1100px) {
  .dogtag-grid-wide,
  .dogtag-grid-compact,
  .dogtag-slot-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.roster-only-tree .tree-pool {
  display: none;
}

.roster-assign-form.standalone {
  margin-top: 14px;
}

.roster-queue-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.roster-queue-tabs button {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.roster-queue-tabs button + button {
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.16);
}

.roster-queue-tabs button.active {
  color: var(--text);
}

.roster-queue-tabs b {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  margin-left: auto;
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.08);
  font-size: 12px;
}

.roster-queue-note {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(70,180,255,.24);
  border-radius: 8px;
  color: #b9ced9;
  background: rgba(40,154,226,.08);
  font-size: 12px;
  line-height: 1.55;
}

.roster-structure-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(245,185,48,.22);
  border-radius: 8px;
  background: rgba(245,185,48,.045);
}

.roster-officer-targets {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(245,185,48,.045);
}

.roster-edit-mode .roster-officer-targets {
  display: grid;
}

.roster-officer-target {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) 28px 42px 28px auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(0,0,0,.14);
}

.roster-officer-target span,
.roster-officer-target small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-officer-target input {
  width: 42px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.roster-officer-target button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(95,215,83,.36);
  border-radius: 7px;
  color: #9af0a6;
  background: rgba(95,215,83,.08);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.roster-officer-target button:hover {
  border-color: rgba(245,185,48,.48);
  color: var(--gold);
  background: rgba(245,185,48,.1);
}

.roster-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.roster-panel-title strong {
  color: var(--text);
}

.roster-panel-title span {
  color: var(--muted);
  font-size: 12px;
}

.roster-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.roster-count-grid label {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(0,0,0,.14);
}

.roster-count-grid span,
.roster-count-grid small {
  color: var(--muted);
  font-size: 12px;
}

.roster-count-grid input {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
}

.roster-request-list {
  display: grid;
  gap: 8px;
}

.roster-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.roster-pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.roster-pick-card:hover {
  transform: translateY(-1px);
  border-color: rgba(99,162,255,.34);
  background: rgba(99,162,255,.055);
}

.roster-pick-card.requested {
  border-color: rgba(245,185,48,.2);
}

.roster-pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.roster-pick-card:has(input:checked) {
  border-color: rgba(99,217,113,.76);
  background: rgba(99,217,113,.08);
  box-shadow: inset 0 0 0 1px rgba(99,217,113,.22);
}

.roster-pick-card strong {
  display: block;
  color: var(--text);
  overflow-wrap: anywhere;
}

.roster-pick-card span,
.roster-pick-card p {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.roster-pick-card span b {
  color: #ff8e8a;
  font-size: 11px;
  font-style: italic;
  text-transform: uppercase;
}

.roster-action-form {
  display: none;
}

.roster-action-row,
.pool-transfer-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.pool-transfer-controls select {
  width: min(260px, 100%);
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
}

.compact-green-button,
.compact-muted-button {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.compact-green-button {
  border: 1px solid rgba(99,217,113,.72);
  color: #9af0a6;
  background: rgba(99,217,113,.08);
}

.compact-green-button:hover {
  background: rgba(99,217,113,.14);
}

.compact-muted-button {
  border: 1px solid rgba(255,255,255,.18);
  color: var(--muted);
  background: rgba(255,255,255,.035);
}

.compact-danger-button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255,95,95,.44);
  border-radius: 7px;
  color: #ff9a9a;
  background: rgba(255,95,95,.08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.compact-muted-button.disabled {
  opacity: .45;
  cursor: default;
}

.roster-tab-panel {
  display: none;
}

.roster-tab-panel.active {
  display: block;
}

.roster-request-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.roster-request-card.requested {
  border-color: rgba(255,95,86,.26);
  background: rgba(255,95,86,.055);
}

.request-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
}

.roster-request-card strong,
.roster-self-request strong {
  color: var(--text);
}

.roster-request-card span,
.roster-request-card p,
.roster-self-request p {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.roster-request-card span b {
  color: #ff8e8a;
  font-size: 11px;
  font-style: italic;
  text-transform: uppercase;
}

.member-role-line {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.member-role-line img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.request-actions {
  display: grid;
  gap: 6px;
}

.roster-request-card button,
.request-officer-form button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(245,185,48,.36);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.08);
  font-size: 12px;
  font-weight: 900;
}

.roster-request-card button.muted {
  border-color: rgba(255,255,255,.18);
  color: var(--muted);
  background: rgba(255,255,255,.035);
}

.request-officer-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.move-member-form {
  min-width: 0;
}

.request-officer-form input,
.request-officer-form select {
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.035);
}

.roster-self-request {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(245,185,48,.045);
}

.roster-self-request .request-officer-form {
  grid-template-columns: minmax(0, 1fr);
}

.inline-actions {
  display: inline-flex;
  margin-right: 8px;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto 1fr;
  }

  .topnav,
  .search-box {
    display: none;
  }

  .app-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .side-menu {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
  }

  .profile-hero,
  .clan-detail-hero,
  .clan-detail-grid,
  .clan-polls-layout,
  .applications-workspace,
  .roster-edit-mode .roster-page-grid,
  .main-grid,
  .section-hero,
  .section-columns,
  .directory-grid,
  .players-grid {
    grid-template-columns: 1fr;
  }

  .section-metrics {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-strip,
  .role-cards,
  .stats-grid,
  .stat-source-grid,
  .stats-role-top-grid,
  .segmented-control,
  .tree-split,
  .training-list article {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-officers,
  .roster-pick-grid,
  .application-pick-grid,
  .training-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-slot-body {
    grid-template-columns: 1fr;
  }

  .training-role-counts {
    position: static;
  }

  .training-role-counts > div {
    display: flex;
    flex-wrap: wrap;
  }

  .application-panel,
  .clan-info-panel,
  .clan-queue-panel,
  .clan-manage-panel,
  .clan-questions-panel,
  .roster-detail-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .roster-edit-mode .roster-pool-panel {
    grid-column: 1;
  }

  .roster-sort-enabled .roster-side-pool {
    position: static;
    width: auto;
    max-height: 260px;
  }

  .roster-side-pool-left,
  .roster-side-pool-right {
    grid-column: 1;
  }

  .clan-poll-create-panel {
    position: static;
  }

  .clan-inline-info-form,
  .question-edit-form,
  .access-create-role,
  .access-member-roles > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-teams-layout {
    grid-template-columns: 1fr;
  }

  .training-team-tabs-with-cameras {
    grid-template-columns: 1fr;
  }

  .training-match-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-match-map {
    grid-column: 1 / -1;
    order: 3;
  }

  .training-camera-slot {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .training-team-body,
  .training-team-body.counts-right {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .app-layout.public-profile-layout {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .landing-page {
    width: min(100% - 18px, 520px);
  }

  .landing-status {
    grid-template-columns: 1fr;
  }

  .topbar,
  .app-layout {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand span:last-child,
  .top-actions .icon-button {
    display: none;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 60px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .top-actions {
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .account-pill {
    max-width: 156px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
    gap: 16px;
  }

  .profile-avatar {
    width: 100%;
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }

  .profile-avatar img {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
  }

  .avatar-time {
    width: auto;
    max-width: none;
    margin-top: 0;
    text-align: left;
  }

  .profile-name-row {
    gap: 8px;
  }

  .profile-name-row h1 {
    width: 100%;
    font-size: 28px;
    line-height: 1.08;
  }

  .profile-main > p {
    margin-top: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .clan-panel {
    min-width: 0;
  }

  .quick-search-results {
    min-width: min(360px, calc(100vw - 24px));
  }

  .side-menu,
  .sidebar,
  .stat-strip,
  .role-cards,
  .stats-grid,
  .training-list article,
  .section-metrics,
  .segmented-control,
  .checkbox-grid,
  .application-form,
  .application-row,
  .clan-settings-form,
  .clan-inline-info-form,
  .question-form,
  .question-edit-form,
  .question-row,
  .tree-split,
  .tree-officers,
  .roster-pick-grid,
  .application-pick-grid,
  .roster-count-grid,
  .roster-assign-form,
  .feedback-form,
  .search-form-large,
  .section-role-grid,
  .stats-role-top-grid,
  .profile-settings-page-panel .settings-pick-grid {
    grid-template-columns: 1fr;
  }

  .training-slot-grid {
    grid-template-columns: 1fr;
  }

  .training-match-toolbar,
  .training-map-form {
    grid-template-columns: 1fr;
  }

  .training-match-map {
    order: 0;
  }

  .training-team-body,
  .training-team-body.counts-right {
    grid-template-columns: 1fr;
  }

  .tree-pool-head {
    display: grid;
  }

  .profile-hero {
    padding: 22px;
  }

  .clan-inline-save,
  .question-row > form:not(.question-edit-form) {
    justify-self: stretch;
  }

}

.notifications-page.notifications-page-wide,
.clan-pool-page {
  width: min(1680px, calc(100vw - 48px));
  max-width: none;
}

.clan-pool-role-grid {
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}

.training-match-toolbar {
  grid-template-columns: minmax(172px, .72fr) minmax(190px, .88fr) minmax(300px, 1.35fr) minmax(190px, .88fr) minmax(172px, .72fr);
}

.stats-clan-zoom-preview {
  display: grid;
  grid-template-columns: 50px minmax(170px, 1.45fr) minmax(74px, .55fr) repeat(8, minmax(54px, .54fr));
}

@media (max-width: 1080px) {
  .notifications-page.notifications-page-wide,
  .clan-pool-page {
    width: min(100%, calc(100vw - 24px));
  }

  .training-match-toolbar {
    grid-template-columns: 1fr;
  }
}

.landing-page {
  width: min(1760px, calc(100vw - 28px));
}

.landing-hero {
  min-height: min(720px, calc(100vh - 84px));
  border-color: rgba(245,185,48,.2);
  background:
    linear-gradient(90deg, rgba(5,8,11,.98) 0 34%, rgba(7,11,15,.78) 58%, rgba(7,11,15,.96) 100%),
    radial-gradient(circle at 78% 28%, rgba(245,185,48,.2), transparent 22%),
    linear-gradient(135deg, rgba(67,83,76,.22), transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px),
    #070b0f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 80px rgba(0,0,0,.34);
}

.landing-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(820px, 58vw);
  height: 74%;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(245,185,48,.18) 28% 29%, transparent 29% 100%),
    radial-gradient(ellipse at 48% 70%, rgba(210,218,222,.16), transparent 42%);
  opacity: .9;
  pointer-events: none;
}

.landing-copy h1 {
  text-transform: uppercase;
  text-shadow: 0 8px 34px rgba(0,0,0,.82);
}

.landing-copy p {
  color: #c3d3e3;
}

.landing-status article,
.landing-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(8,12,16,.82);
  border-color: rgba(245,185,48,.16);
}

.training-round-copy-inline {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.training-round-copy-form {
  margin: 6px 0 0;
}

.training-round-copy-form button {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(95,215,83,.46);
  border-radius: 7px;
  background: rgba(95,215,83,.08);
  color: #9af0a6;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.training-round-copy-form button:hover {
  background: rgba(95,215,83,.14);
}

.challenges-page:not(.challenge-detail-page) {
  width: min(1880px, calc(100vw - 48px));
  max-width: none;
}

.challenges-page:not(.challenge-detail-page) .challenge-hero {
  width: min(1480px, 100%);
  margin-inline: auto;
}

.challenges-page:not(.challenge-detail-page) .challenge-journal-grid.compact-center {
  width: min(1120px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

.challenges-page:not(.challenge-detail-page) .challenge-all-panel {
  width: 100%;
}

.challenges-page:not(.challenge-detail-page) .challenge-list {
  gap: 7px;
}

.challenges-page:not(.challenge-detail-page) .challenge-record {
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto minmax(180px, auto);
  padding: 8px 10px;
}

.challenges-page:not(.challenge-detail-page) .challenge-row-upcoming .challenge-record {
  border-color: rgba(95,215,83,.5);
  background:
    linear-gradient(90deg, rgba(31, 122, 43, .16), rgba(255,255,255,.032)),
    rgba(9,13,17,.84);
}

.challenges-page:not(.challenge-detail-page) .challenge-row-past .challenge-record {
  border-color: rgba(245,185,48,.18);
  background: rgba(255,255,255,.028);
}

.challenges-page:not(.challenge-detail-page) .challenge-row-past .challenge-record b {
  color: var(--gold);
}

.challenges-page:not(.challenge-detail-page) .challenge-record small {
  text-align: right;
}

@media (max-width: 900px) {
  .challenges-page:not(.challenge-detail-page) .challenge-record {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .challenges-page:not(.challenge-detail-page) .challenge-record b,
  .challenges-page:not(.challenge-detail-page) .challenge-record small {
    grid-column: 2;
    text-align: left;
  }
}

/* Stable challenge detail layout. Keep detail pages isolated from the wide journal view. */
.challenge-detail-page {
  width: min(1280px, calc(100vw - 32px));
  max-width: none;
  margin-inline: auto;
}

.challenge-detail-page .challenge-hero {
  width: 100%;
  margin-inline: 0;
}

.challenge-detail-page .challenge-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}

.challenge-detail-page .challenge-detail-main,
.challenge-detail-page .challenge-detail-side,
.challenge-detail-page .challenge-linked-trainings,
.challenge-detail-page .challenge-result-panel {
  min-width: 0;
  overflow: visible;
}

.challenge-detail-page .challenge-detail-side {
  position: static;
}

.challenge-detail-page .challenge-card {
  width: 100%;
}

.challenge-detail-page .challenge-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.challenge-detail-page .challenge-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.challenge-detail-page .challenge-match-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: stretch;
}

.challenge-detail-page .challenge-match-line b {
  display: grid;
  place-items: center;
}

.challenge-detail-page .challenge-match-line span,
.challenge-detail-page .challenge-meta-grid span,
.challenge-detail-page .challenge-round-maps span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.challenge-detail-page .challenge-setup-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.challenge-detail-page .challenge-setup-form label,
.challenge-detail-page .challenge-setup-form input,
.challenge-detail-page .challenge-setup-form select,
.challenge-detail-page .training-faction-toggle {
  min-width: 0;
  width: 100%;
}

.challenge-detail-page .training-faction-menu,
.challenge-detail-page .challenge-faction-menu,
.challenge-detail-page .challenge-doctrine-menu {
  width: min(340px, calc(100vw - 48px));
  max-width: 100%;
}

.challenge-detail-page .challenge-linked-card {
  grid-template-columns: 84px minmax(0, 1fr) minmax(140px, auto);
}

@media (max-width: 1180px) {
  .challenge-detail-page .challenge-setup-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .challenge-detail-page {
    width: min(100% - 18px, 680px);
  }

  .challenge-detail-page .challenge-card-head,
  .challenge-detail-page .challenge-meta-grid,
  .challenge-detail-page .challenge-match-line,
  .challenge-detail-page .challenge-setup-form,
  .challenge-detail-page .challenge-linked-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .challenge-detail-page .challenge-match-line b {
    justify-content: start;
  }
}

.stats-zoom-preview.stats-clan-zoom-preview {
  display: grid;
  grid-template-columns: 50px minmax(190px, 1.45fr) minmax(82px, .58fr) repeat(8, minmax(62px, .54fr));
  min-height: 92px;
}

.stats-zoom-preview.stats-clan-zoom-preview .stats-rank,
.stats-zoom-preview.stats-clan-zoom-preview .stats-player-main,
.stats-zoom-preview.stats-clan-zoom-preview .stats-history-cell {
  min-height: 92px;
}

.stats-zoom-preview.stats-clan-zoom-preview .stats-player-main {
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 10px 12px;
}

.stats-zoom-preview.stats-clan-zoom-preview .role-icon-mini {
  width: 32px;
  height: 32px;
}

.stats-zoom-preview.stats-clan-zoom-preview .stats-player-main strong {
  font-size: 18px;
}

.stats-zoom-preview.stats-clan-zoom-preview .stats-player-main em,
.stats-zoom-preview.stats-clan-zoom-preview .stats-history-cell small {
  display: block;
  font-size: 12px;
}

.stats-zoom-preview.stats-clan-zoom-preview .stats-history-cell b {
  font-size: 18px;
}

/* Final training match toolbar placement: camera 1 | team 1 | map | team 2 | camera 2. */
.training-match-toolbar {
  display: grid;
  grid-template-columns:
    minmax(150px, .72fr)
    minmax(190px, .88fr)
    minmax(320px, 1.35fr)
    minmax(190px, .88fr)
    minmax(150px, .72fr);
  grid-template-areas: "cam1 team1 map team2 cam2";
  gap: 10px;
  align-items: stretch;
}

.training-match-toolbar .training-camera-group-camera_one {
  grid-area: cam1;
}

.training-match-toolbar .training-match-side-one {
  grid-area: team1;
}

.training-match-toolbar .training-match-map-center {
  grid-area: map;
}

.training-match-toolbar .training-match-side-two {
  grid-area: team2;
}

.training-match-toolbar .training-camera-group-camera_two {
  grid-area: cam2;
}

@media (max-width: 1080px) {
  .training-match-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cam1"
      "team1"
      "map"
      "team2"
      "cam2";
  }
}

/* Wide training workspace for match preparation. */
.training-detail-page {
  width: min(1740px, calc(100vw - 28px));
  max-width: none;
}

.training-detail-hero {
  min-height: 150px;
  align-items: end;
  padding: 16px 24px 18px;
}

.training-detail-hero .back-link {
  width: fit-content;
  min-height: 34px;
  margin-bottom: 18px;
}

.training-detail-hero h1 {
  margin-top: 0;
  font-size: 32px;
}

.training-detail-hero p {
  max-width: 760px;
}

.training-summary {
  align-self: end;
  grid-template-columns: repeat(5, minmax(112px, 1fr)) 34px;
  align-items: stretch;
  gap: 8px;
}

.training-summary .training-slot-edit-toggle {
  align-self: start;
  justify-self: end;
  margin-top: 0;
}

.training-slot-panel {
  margin-top: 14px;
}

.training-slot-panel > .panel-head {
  margin-bottom: 10px;
}

.training-match-toolbar {
  grid-template-columns:
    minmax(188px, .72fr)
    minmax(250px, .95fr)
    minmax(420px, 1.35fr)
    minmax(250px, .95fr)
    minmax(188px, .72fr);
}

.training-camera-group,
.training-match-side,
.training-match-map {
  min-height: 120px;
  padding: 9px;
}

.training-camera-group-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.training-camera-slot {
  min-height: 42px;
}

.training-camera-join-form {
  display: grid;
  height: 100%;
  margin: 0;
}

.training-camera-empty-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 4px 7px;
  border: 1px solid rgba(95,215,83,.28);
  border-radius: 7px;
  background: rgba(95,215,83,.055);
  color: #9af0a6;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.training-camera-empty-button .role-icon-mini {
  width: 18px;
  height: 18px;
}

.training-camera-empty-button span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-map-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.training-map-title-row > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.training-map-actions {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.training-map-action-button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(245,185,48,.46);
  border-radius: 7px;
  background: rgba(245,185,48,.09);
  color: var(--gold);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.training-map-action-button.copy {
  border-color: rgba(95,215,83,.42);
  background: rgba(95,215,83,.08);
  color: #9af0a6;
}

.compact-hidden-form {
  display: none;
}

.training-round-deck-form {
  display: grid;
  gap: 6px;
}

.training-round-deck {
  gap: 6px;
}

.training-round-card {
  min-height: 54px;
  padding: 8px;
}

.training-round-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.training-team-tabs-core {
  margin-top: 6px;
}

.training-team-body {
  grid-template-columns: 68px minmax(0, 1fr);
}

.training-team-body.counts-right {
  grid-template-columns: minmax(0, 1fr) 68px;
}

.training-role-counts {
  top: 68px;
  padding: 8px 6px;
}

.training-slot-grid-three {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.training-slot-squad {
  padding: 8px;
}

.training-slot-row,
.training-slot-empty summary {
  min-height: 38px;
  padding: 6px 8px;
  font-weight: 500;
}

.training-pool-panel {
  margin-top: 12px;
  padding-top: 10px;
}

.training-pool-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 6px;
  align-items: stretch;
}

.training-pool-chip,
.training-pool-empty {
  min-height: 30px;
}

.training-pool-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  justify-content: stretch;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
  white-space: normal;
}

.training-pool-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.training-pool-player strong {
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.training-pool-player em {
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.training-reserve-remove-form {
  margin: 0;
  align-self: center;
}

/* Clan pool: grouped by role with symmetric chips. */
.clan-pool-page {
  width: min(1760px, calc(100vw - 28px));
  max-width: none;
}

.clan-pool-panel {
  min-height: 0;
}

.clan-pool-role-sections {
  gap: 12px;
}

.clan-pool-role-section {
  padding: 12px;
}

.clan-pool-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
  grid-auto-rows: 44px;
  gap: 8px;
}

.clan-pool-member-chip {
  display: grid;
  width: 100%;
  height: 44px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

.clan-pool-member-chip,
.clan-pool-member-chip.selectable-pool-card {
  grid-template-columns: 28px minmax(0, 1fr) minmax(58px, auto) auto;
  align-items: center;
}

.clan-pool-member-chip b,
.clan-pool-member-chip .clan-pool-profile-link,
.clan-pool-member-chip em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-pool-profile-link {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
}

.clan-pool-profile-link:hover,
.clan-pool-profile-link:focus-visible {
  color: var(--gold);
  text-decoration: underline;
  outline: none;
}

.clan-pool-member-chip em {
  justify-self: end;
  min-width: 52px;
  text-align: right;
}

.clan-kick-button {
  min-height: 26px;
  padding: 0 8px;
}

.clan-section-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.clan-section-card-link:hover {
  border-color: rgba(245,185,48,.42);
  background: linear-gradient(90deg, rgba(245,185,48,.055), rgba(255,255,255,.025));
}

.clan-section-card-link .section-card-meta {
  align-self: stretch;
}

@media (max-width: 1280px) {
  .training-slot-grid-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-match-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cam1"
      "team1"
      "map"
      "team2"
      "cam2";
  }
}

.feedback-score-ladder {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.feedback-score-ladder span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 950;
}

.feedback-score-ladder .negative {
  border-color: rgba(255,93,93,.28);
  background: rgba(255,93,93,.06);
  color: #ff9a9a;
}

.feedback-score-ladder .neutral {
  color: var(--muted);
}

.feedback-score-ladder .positive {
  border-color: rgba(95,215,83,.28);
  background: rgba(95,215,83,.06);
  color: #9af0a6;
}

.home-variants-page {
  width: min(1760px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.home-variants-head {
  margin-top: 18px;
  padding: 26px;
  border: 1px solid rgba(245,185,48,.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5,8,11,.96), rgba(13,18,24,.88)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px);
}

.home-variants-head span,
.home-variant-copy > span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.home-variants-head h1 {
  margin: 6px 0;
  font-size: 34px;
}

.home-variants-head p {
  max-width: 780px;
  color: var(--muted);
}

.home-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.home-variant-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(5,8,11,.98) 0 44%, rgba(15,21,27,.78) 70%, rgba(6,9,12,.98)),
    radial-gradient(circle at 78% 18%, rgba(245,185,48,.18), transparent 28%);
}

.home-variant-scene {
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px);
}

.home-variant-card.variant-command {
  background:
    linear-gradient(120deg, rgba(8,13,14,.98), rgba(21,26,21,.82)),
    radial-gradient(circle at 82% 22%, rgba(95,215,83,.18), transparent 26%);
}

.home-variant-card.variant-recruit {
  background:
    linear-gradient(120deg, rgba(7,10,15,.98), rgba(23,22,16,.82)),
    radial-gradient(circle at 82% 22%, rgba(245,185,48,.22), transparent 26%);
}

.home-variant-card.variant-stats {
  background:
    linear-gradient(120deg, rgba(7,10,14,.98), rgba(14,20,25,.86)),
    radial-gradient(circle at 82% 22%, rgba(120,174,255,.16), transparent 26%);
}

.variant-reticle {
  position: absolute;
  right: 72px;
  top: 54px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(245,185,48,.32);
  border-radius: 50%;
}

.variant-reticle::before,
.variant-reticle::after {
  position: absolute;
  content: "";
  background: rgba(245,185,48,.4);
}

.variant-reticle::before {
  left: 50%;
  top: -24px;
  width: 1px;
  height: 166px;
}

.variant-reticle::after {
  left: -24px;
  top: 50%;
  width: 166px;
  height: 1px;
}

.variant-line {
  position: absolute;
  right: 34px;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,185,48,.36));
}

.variant-line.one {
  top: 218px;
}

.variant-line.two {
  top: 244px;
  opacity: .5;
}

.home-variant-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 28px;
}

.home-variant-copy h2 {
  margin: 8px 0;
  font-size: 30px;
  line-height: 1;
}

.home-variant-copy p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.45;
}

.home-variant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.home-variant-actions b {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(245,185,48,.28);
  border-radius: 7px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  font-size: 12px;
}

.home-variant-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}

.home-variant-stats {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 28px;
}

.home-variant-stats span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.home-variant-stats b {
  color: var(--gold);
  font-size: 17px;
}

@media (max-width: 980px) {
  .home-variant-grid,
  .home-variant-card {
    grid-template-columns: 1fr;
  }

  .home-variant-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0;
  }
}

/* Commander icon yellow filter — catch-all for generic <img> tags (not crew-commander) */
img[src*="/commander.png"],
img[src*="/commander.webp"] {
  filter: var(--commander-icon-filter);
}

/* Scoreboard SVG commander icon */
svg use[href="#icon-squad-commander"] {
  filter: var(--commander-icon-filter);
}

.feedback-variants-page {
  width: min(1640px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 26px 0 54px;
}

.feedback-variants-head {
  margin-bottom: 18px;
}

.feedback-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feedback-variant-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(21, 27, 34, .94), rgba(8, 12, 16, .98));
  padding: 18px;
  min-height: 360px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .24);
}

.feedback-variant-card:nth-child(1) { border-color: rgba(255, 193, 45, .42); }
.feedback-variant-card:nth-child(2) { border-color: rgba(86, 211, 100, .34); }
.feedback-variant-card:nth-child(3) { border-color: rgba(92, 154, 255, .34); }
.feedback-variant-card:nth-child(4) { border-color: rgba(197, 99, 255, .34); }

.feedback-variant-title span {
  color: var(--gold);
  font: 12px "Russo One", sans-serif;
  text-transform: uppercase;
}

.feedback-variant-title h2 {
  margin: 6px 0;
  font: 22px "Russo One", sans-serif;
  color: var(--text);
  letter-spacing: 0;
}

.feedback-variant-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.feedback-variant-scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 16px 0;
}

.feedback-variant-scale span {
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
  font: 13px "Russo One", sans-serif;
}

.feedback-variant-scale .negative {
  color: #ff7b7b;
  border-color: rgba(255, 87, 87, .35);
}

.feedback-variant-scale .neutral {
  color: var(--muted);
}

.feedback-variant-scale .positive {
  color: #68ff72;
  border-color: rgba(86, 211, 100, .4);
}

.feedback-variant-scale .active {
  background: rgba(86, 211, 100, .16);
  box-shadow: inset 0 0 0 1px rgba(86, 211, 100, .35);
}

.feedback-variant-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.feedback-variant-metrics button {
  display: grid;
  grid-template-columns: 22px 1fr 28px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  text-align: left;
  cursor: default;
}

.feedback-variant-metrics svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  color: var(--gold);
}

.feedback-variant-metrics span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-variant-metrics b {
  color: #68ff72;
  text-align: right;
}

.feedback-variant-table {
  display: grid;
  gap: 7px;
}

.feedback-variant-row {
  display: grid;
  grid-template-columns: 30px minmax(130px, 1fr) minmax(110px, .8fr) 76px 42px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .035);
}

.feedback-variant-row strong {
  color: var(--text);
}

.feedback-variant-row em {
  color: var(--muted);
  font-style: normal;
}

.feedback-variant-row b {
  color: var(--text);
  font-size: 12px;
}

.feedback-variant-row i {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 6px;
  background: rgba(86, 211, 100, .14);
  color: #68ff72;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .feedback-variant-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .feedback-variant-card {
    padding: 14px;
  }

  .feedback-variant-row {
    grid-template-columns: 28px 1fr 40px;
  }

  .feedback-variant-row em,
  .feedback-variant-row b {
    display: none;
  }
}

.cinematic-hero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  min-height: min(760px, calc(100vh - 88px));
  background:
    linear-gradient(90deg, rgba(3, 6, 8, .98) 0%, rgba(3, 6, 8, .84) 34%, rgba(3, 6, 8, .3) 67%, rgba(3, 6, 8, .9) 100%),
    linear-gradient(180deg, rgba(3, 6, 8, .18), rgba(3, 6, 8, .82)),
    url("landing-cinematic.png") center / cover no-repeat;
  border-color: rgba(245, 185, 48, .32);
}

.landing-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .82;
  filter: saturate(.92) contrast(1.05) brightness(.74);
  pointer-events: none;
}

.cinematic-hero::before {
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  background-size: 72px 72px, 72px 72px, 100% 6px;
  opacity: .48;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.85), #000 72%, rgba(0,0,0,.55));
}

.cinematic-hero::after {
  z-index: 1;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(245,185,48,.24) 42% 42.4%, transparent 42.4% 100%),
    radial-gradient(circle at 72% 18%, rgba(245,185,48,.2), transparent 19%);
  opacity: .75;
}

.cinematic-hero .landing-scene {
  display: none;
}

.cinematic-hero .landing-copy {
  align-self: end;
  z-index: 2;
  max-width: 820px;
  padding: 76px 58px 70px;
  opacity: 0;
  transform: translateY(18px);
  animation: landing-copy-reveal .95s ease-out 10s forwards;
}

@keyframes landing-copy-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cinematic-hero .section-kicker {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 6px;
  background: rgba(245,185,48,.09);
  color: var(--gold);
  font: 12px "Russo One", sans-serif;
  text-transform: uppercase;
}

.cinematic-hero .landing-copy h1 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(58px, 8.4vw, 124px);
  text-shadow: 0 12px 34px rgba(0,0,0,.92);
}

.cinematic-hero .landing-copy p {
  max-width: 690px;
  color: #d2deea;
  font-size: clamp(17px, 1.4vw, 23px);
}

.cinematic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.cinematic-tags span {
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(10,15,20,.56);
  color: #c8d6e3;
  font-size: 12px;
  font-weight: 850;
}

.cinematic-hero .landing-actions {
  margin-top: 26px;
}

.cinematic-hero .landing-steam {
  min-height: 46px;
  padding-inline: 18px;
  background: linear-gradient(180deg, rgba(245,185,48,.28), rgba(245,185,48,.13));
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

.cinematic-hero .ghost-button {
  min-height: 46px;
  border-color: rgba(255,255,255,.15);
  background: rgba(10,15,20,.6);
}

.cinematic-status {
  align-self: end;
  z-index: 2;
  margin: 0 32px 40px 0;
  padding: 14px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(7,11,15,.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(18px);
  animation: landing-copy-reveal .95s ease-out 10s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .landing-video {
    display: none;
  }

  .cinematic-hero .landing-copy {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .cinematic-status {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.cinematic-status-title {
  display: block;
  margin: 2px 2px 4px;
  color: var(--gold);
  font: 11px "Russo One", sans-serif;
  text-transform: uppercase;
}

.cinematic-status article {
  min-width: 210px;
  padding: 12px 13px;
  background: rgba(255,255,255,.035);
}

.landing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-card {
  min-height: 122px;
}

@media (max-width: 1180px) {
  .cinematic-hero {
    grid-template-columns: 1fr;
  }

  .cinematic-status {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 22px 24px;
    padding: 10px;
  }

  .cinematic-status-title {
    grid-column: 1 / -1;
  }

  .cinematic-status article {
    min-width: 0;
  }

  .landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cinematic-hero .landing-copy {
    padding: 48px 24px 28px;
  }

  .cinematic-hero .landing-copy h1 {
    font-size: clamp(44px, 18vw, 70px);
  }

  .cinematic-status,
  .landing-grid {
    grid-template-columns: 1fr;
  }

  .cinematic-status {
    margin: 0 14px 18px;
  }
}

.training-team-lock {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(86, 211, 100, .42);
  border-radius: 7px;
  background: rgba(86, 211, 100, .1);
  color: #8cff95;
  font: 11px "Russo One", sans-serif;
  cursor: pointer;
}

.training-team-lock.locked {
  border-color: rgba(255, 92, 92, .5);
  background: rgba(255, 92, 92, .1);
  color: #ff8b8b;
}

.training-team-lock.readonly {
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.training-team-side-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(86, 211, 100, .24);
  border-radius: 7px;
  background: rgba(86, 211, 100, .055);
}

.training-team-side-note.locked {
  border-color: rgba(255, 92, 92, .28);
  background: rgba(255, 92, 92, .055);
}

.training-team-side-note strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-team-side-note span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.training-slot-empty.locked-slot,
.training-camera-empty.locked-slot {
  border-color: rgba(255, 92, 92, .28);
  background: rgba(255, 92, 92, .055);
  color: #ff9b9b;
}

.challenge-training-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(86, 211, 100, .28);
  border-radius: 7px;
  background: rgba(86, 211, 100, .065);
}

.challenge-training-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8cff95;
  text-decoration: none;
  font-weight: 900;
}

.challenge-training-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

.challenge-training-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clan-pool-page .clan-pool-role-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
  gap: 12px;
}

.clan-pool-page .clan-pool-role-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
}

.clan-pool-page-toolbar {
  display: grid;
  grid-template-columns: auto minmax(300px, 520px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.clan-pool-page-toolbar .page-back-link {
  margin-bottom: 0;
}

.clan-pool-about-link {
  grid-column: 4;
  justify-self: end;
}

.clan-pool-local-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 11px;
  width: 100%;
  max-width: 520px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(7,12,16,.74);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.clan-pool-local-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}

.clan-pool-local-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.clan-pool-local-search input::placeholder {
  color: var(--muted);
  font-weight: 700;
}

.clan-pool-local-search button {
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 7px;
  background: rgba(245,185,48,.12);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 9px;
  cursor: pointer;
}

.clan-pool-total {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.clan-pool-total span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.clan-pool-total strong {
  color: var(--gold);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.clan-pool-command-row {
  display: grid;
  grid-template-columns: minmax(280px, 340px);
  justify-content: center;
  margin: 0 0 16px;
}

.clan-pool-command-row:empty {
  display: none;
}

.clan-pool-command-section {
  min-height: 0;
  padding: 12px;
  border-color: rgba(245,185,48,.22);
  background:
    linear-gradient(135deg, rgba(245,185,48,.08), transparent 58%),
    rgba(255,255,255,.018);
}

.clan-pool-command-section .clan-pool-role-grid {
  display: flex;
  flex-direction: column;
}

.clan-pool-command-section .clan-pool-member-chip {
  height: 42px;
  min-height: 42px;
}

.clan-pool-search-empty {
  margin-top: 12px;
}

.clan-pool-page .clan-pool-role-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  grid-auto-rows: auto;
}

.clan-pool-page .clan-pool-member-chip,
.clan-pool-page .clan-pool-member-chip.selectable-pool-card {
  width: 100%;
  height: 42px;
  min-height: 42px;
}

@media (min-width: 1500px) {
  .clan-pool-page .clan-pool-role-sections {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.challenge-detail-page {
  width: min(1560px, calc(100vw - 32px));
}

.challenge-detail-page .challenge-hero.compact {
  min-height: 96px;
  margin-bottom: 10px;
  padding: 18px 22px;
}

.challenge-detail-page .challenge-hero.compact h1 {
  margin-top: 6px;
  font-size: clamp(26px, 2.2vw, 36px);
}

.challenge-detail-page .challenge-compact-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  margin-top: 10px;
}

.challenge-brief-panel,
.challenge-compact-side,
.challenge-compact-setup-panel,
.challenge-linked-trainings,
.challenge-result-panel {
  padding: 14px;
}

.challenge-brief-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.challenge-brief-head h2 {
  margin: 5px 0 0;
  font-size: 24px;
  line-height: 1.08;
}

.challenge-brief-head h2 b {
  color: var(--gold);
}

.challenge-brief-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.challenge-brief-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.032);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-brief-meta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.challenge-brief-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 10px;
}

.challenge-brief-versus > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(245,185,48,.18);
  border-radius: 8px;
  background: rgba(245,185,48,.045);
}

.challenge-brief-versus > b {
  display: grid;
  place-items: center;
  border: 1px solid rgba(245,185,48,.22);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 950;
}

.challenge-brief-versus strong {
  color: var(--text);
  font-size: 15px;
}

.challenge-brief-versus span,
.challenge-brief-versus em {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.challenge-brief-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(64,217,96,.22);
  border-radius: 8px;
  background: rgba(64,217,96,.055);
}

.challenge-brief-result span {
  color: var(--text);
  font-weight: 950;
}

.challenge-brief-result span:last-of-type {
  text-align: right;
}

.challenge-brief-result strong {
  padding: 6px 9px;
  border: 1px solid rgba(245,185,48,.4);
  border-radius: 7px;
  color: var(--gold);
  text-align: center;
}

.challenge-brief-result em {
  grid-column: 1 / -1;
  color: #9ff5a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.challenge-brief-notes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.challenge-brief-notes p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.032);
  color: var(--muted);
  font-size: 12px;
}

.compact-actions {
  margin-top: 10px;
}

.challenge-detail-list.compact {
  gap: 7px;
  margin-top: 8px;
}

.challenge-detail-list.compact div {
  min-height: 34px;
  padding: 7px 9px;
}

.challenge-compact-setup-panel {
  margin-top: 10px;
}

.compact-challenge-setup-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.compact-challenge-setup-form button[type="submit"] {
  align-self: end;
}

.challenge-detail-page .challenge-result-grid {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 10px;
  margin-top: 10px;
}

.challenge-detail-page .challenge-linked-list {
  margin-top: 8px;
}

.challenge-detail-page .challenge-linked-card {
  min-height: 52px;
  padding: 8px 10px;
  grid-template-columns: 72px minmax(0, 1fr) minmax(126px, auto);
}

.challenge-result-panel .panel-head,
.challenge-linked-trainings .panel-head {
  margin-bottom: 8px;
}

.challenge-result-panel .challenge-result-form {
  gap: 8px;
  margin-top: 0;
}

@media (max-width: 1180px) {
  .challenge-detail-page .challenge-compact-grid,
  .challenge-detail-page .challenge-result-grid,
  .compact-challenge-setup-form {
    grid-template-columns: 1fr;
  }

  .challenge-brief-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .challenge-brief-head,
  .challenge-brief-meta,
  .challenge-brief-versus,
  .challenge-brief-result,
  .challenge-detail-page .challenge-linked-card {
    grid-template-columns: 1fr;
  }

  .challenge-brief-result span:last-of-type {
    text-align: left;
  }
}

/* Stable compact challenge detail v2: the challenge itself is a passport;
   squad composition stays inside linked training pages. */
.challenge-detail-page {
  display: block;
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  margin-inline: auto;
  padding-top: 14px;
}

.challenge-detail-page .back-link {
  margin-bottom: 8px;
}

.challenge-detail-page .section-hero.challenge-hero.compact {
  width: 100%;
  min-height: 82px;
  margin: 0 0 10px;
  padding: 14px 18px;
}

.challenge-detail-page .section-hero.challenge-hero.compact h1 {
  margin: 4px 0 4px;
  font-size: clamp(24px, 2vw, 34px);
}

.challenge-detail-page .section-hero.challenge-hero.compact p {
  margin: 0;
}

.challenge-detail-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.challenge-detail-stack.challenge-compact-grid,
.challenge-detail-stack.challenge-result-grid {
  grid-template-columns: 1fr;
}

.challenge-detail-page .challenge-brief-panel,
.challenge-detail-page .challenge-compact-side,
.challenge-detail-page .challenge-compact-setup-panel,
.challenge-detail-page .challenge-linked-trainings,
.challenge-detail-page .challenge-result-panel {
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 12px;
}

.challenge-detail-page .challenge-compact-side {
  position: static;
}

.challenge-detail-page .challenge-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.challenge-detail-page .challenge-service-grid div {
  min-width: 0;
  min-height: 34px;
}

.challenge-detail-page .challenge-service-grid dd,
.challenge-detail-page .challenge-service-grid dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-detail-page .challenge-brief-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.challenge-detail-page .challenge-brief-versus {
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
}

.challenge-detail-page .challenge-brief-versus > div,
.challenge-detail-page .challenge-brief-meta span,
.challenge-detail-page .challenge-brief-notes p {
  min-width: 0;
}

.challenge-detail-page .compact-challenge-setup-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.challenge-detail-page .compact-challenge-setup-form label,
.challenge-detail-page .compact-challenge-setup-form input,
.challenge-detail-page .compact-challenge-setup-form select,
.challenge-detail-page .compact-challenge-setup-form textarea,
.challenge-detail-page .compact-challenge-setup-form .training-faction-toggle {
  min-width: 0;
  width: 100%;
}

.challenge-detail-page .compact-challenge-setup-form button[type="submit"] {
  min-height: 36px;
  align-self: end;
}

.challenge-detail-page .challenge-linked-card {
  width: 100%;
  min-height: 48px;
  grid-template-columns: 70px minmax(0, 1fr) minmax(120px, auto);
  padding: 8px 10px;
}

.challenge-detail-page .challenge-result-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.challenge-detail-page .challenge-result-form .challenge-result-rounds {
  grid-column: span 2;
}

.challenge-detail-page .challenge-result-form label:has(textarea) {
  grid-column: span 2;
}

.challenge-detail-page .challenge-result-form .challenge-result-check,
.challenge-detail-page .challenge-result-form .challenge-submit {
  align-self: end;
}

@media (max-width: 1180px) {
  .challenge-detail-page .challenge-service-grid,
  .challenge-detail-page .challenge-brief-meta,
  .challenge-detail-page .compact-challenge-setup-form,
  .challenge-detail-page .challenge-result-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .challenge-detail-page .challenge-result-form label:has(textarea) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .challenge-detail-page {
    width: min(100% - 18px, 680px);
  }

  .challenge-detail-page .challenge-service-grid,
  .challenge-detail-page .challenge-brief-head,
  .challenge-detail-page .challenge-brief-meta,
  .challenge-detail-page .challenge-brief-versus,
  .challenge-detail-page .challenge-brief-result,
  .challenge-detail-page .compact-challenge-setup-form,
  .challenge-detail-page .challenge-linked-card,
  .challenge-detail-page .challenge-result-form {
    grid-template-columns: 1fr;
  }

.challenge-detail-page .challenge-result-form .challenge-result-rounds,
  .challenge-detail-page .challenge-result-form label:has(textarea) {
    grid-column: auto;
  }
}

.training-slot-row.pending-confirmation {
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  border-color: rgba(245, 185, 48, .48);
  background:
    linear-gradient(90deg, rgba(245, 185, 48, .12), rgba(255,255,255,.028)),
    rgba(10, 14, 18, .92);
}

.training-slot-row.pending-confirmation.history-row {
  grid-template-columns: 26px minmax(0, 1fr) repeat(var(--history-cols), minmax(38px, 48px));
}

.training-slot-pending-badge {
  justify-self: end;
  min-width: 58px;
  padding: 4px 7px;
  border: 1px solid rgba(245, 185, 48, .38);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(245, 185, 48, .12);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.training-slot-confirm-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, 24px);
  gap: 4px;
  justify-self: end;
  align-items: center;
}

.training-slot-confirm-actions form {
  margin: 0;
}

.training-slot-confirm-actions button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.training-slot-confirm-actions .approve {
  border: 1px solid rgba(64, 217, 96, .55);
  color: #86ff98;
  background: rgba(64, 217, 96, .14);
}

.training-slot-confirm-actions .reject {
  border: 1px solid rgba(255, 95, 105, .55);
  color: #ff9ca4;
  background: rgba(255, 95, 105, .12);
}

.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) 28px;
}

.training-slot-panel.training-slot-remove-mode .training-slot-row.pending-confirmation:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) 58px auto 28px;
}

.training-slot-panel:not(.training-slot-remove-mode) .training-slot-remove-form {
  display: none !important;
}

/* 2026-06-25 training access and slot controls */
.training-summary {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) auto auto auto;
}

.training-visibility-toggle {
  display: grid;
  align-self: start;
  justify-self: end;
  margin: 0;
}

.training-visibility-toggle button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.training-visibility-toggle button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.training-visibility-toggle button.open {
  border: 1px solid rgba(99,219,74,.62);
  background: rgba(99,219,74,.1);
  color: #95ff9e;
}

.training-visibility-toggle button.closed {
  border: 1px solid rgba(255,95,95,.52);
  background: rgba(255,95,95,.09);
  color: #ffb0b0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.training-camera-group-slots {
  grid-template-columns: 1fr;
}

.training-camera-player-wrap {
  position: relative;
}

.training-slot-row.occupied:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
}

.training-slot-role-edit,
.training-slot-leave-cell-form,
.training-slot-move-control {
  justify-self: end;
  align-self: center;
}

.training-slot-role-edit {
  position: relative;
}

.training-slot-role-edit > summary {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 6px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.training-slot-role-edit > summary::-webkit-details-marker {
  display: none;
}

.training-slot-role-edit[open] {
  z-index: 50;
}

.training-slot-role-edit .training-slot-role-menu.compact {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(230px, 72vw);
  max-height: 250px;
  margin: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.58);
}

.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) auto 28px;
}

.training-slot-panel.training-slot-remove-mode .training-slot-row.pending-confirmation:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) 58px auto auto 28px;
}

.training-slot-leave-cell-form {
  margin: 0;
}

.training-slot-leave-cell-form button,
.training-slot-move-control > summary {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,95,95,.5);
  border-radius: 6px;
  background: rgba(255,95,95,.1);
  color: #ffb0b0;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.training-slot-move-control > summary {
  border-color: rgba(245,185,48,.42);
  background: rgba(245,185,48,.08);
  color: var(--gold);
  list-style: none;
}

.training-slot-move-control > summary::-webkit-details-marker {
  display: none;
}

.training-slot-move-control form {
  position: absolute;
  z-index: 20;
  right: 8px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 42px;
  gap: 6px;
  width: min(360px, calc(100vw - 48px));
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.34);
  border-radius: 8px;
  background: rgba(9,13,17,.98);
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
}

.training-slot-move-control select,
.training-slot-move-control button {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.training-slot-move-control button {
  border-color: rgba(99,219,74,.46);
  color: #9af0a6;
}

.training-camera-player-wrap .training-slot-leave-cell-form {
  position: absolute;
  top: 4px;
  right: 4px;
}

.training-slot-login.disabled {
  display: block;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.merc-application-form {
  margin-top: 10px;
}

.merc-application-form .ghost-button {
  width: 100%;
}

/* 2026-06-27: training counters, edit gear, clan pool columns. */
.training-detail-hero {
  position: relative;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.45fr);
  padding-right: 58px;
}

.training-summary .training-slot-edit-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  margin: 0;
}

.training-summary {
  grid-template-columns: repeat(5, minmax(132px, 1fr)) minmax(240px, 1.25fr);
  padding-right: 0;
  align-items: stretch;
}

.training-hero-result-card {
  min-width: 240px;
}

.training-hero-result-card .training-result-score {
  margin-top: 4px;
  transform: scale(.92);
  transform-origin: left center;
}

.training-hero-action.training-visibility-toggle {
  position: absolute;
  top: 74px;
  right: 16px;
  z-index: 3;
}

.training-map-edit-only {
  display: none;
}

body.training-edit-mode .training-map-edit-only {
  display: grid;
}

.training-result-edit-only {
  display: none;
}

body.training-edit-mode .training-result-edit-only {
  display: grid;
}

.training-result-inline-form {
  grid-template-columns: repeat(4, minmax(48px, 1fr)) auto;
  gap: 6px;
  align-items: end;
  margin-top: 8px;
}

.training-result-inline-form label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.training-result-inline-form label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.training-result-inline-form input,
.training-result-inline-form select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(5,8,10,.72);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.training-result-inline-form input[type="number"] {
  text-align: center;
}

.training-result-inline-form button {
  height: 30px;
  min-width: 42px;
  padding: 0 10px;
  border: 1px solid rgba(99,219,74,.62);
  border-radius: 7px;
  background: rgba(99,219,74,.12);
  color: #9eff9d;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.training-result-note-field {
  grid-column: 1 / -2;
}

/* 2026-06-27: compact training header and readable doctrine icons. */
.training-detail-page {
  width: min(1680px, 100%);
}

.training-detail-hero {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.7fr);
  align-items: center;
  min-height: 132px;
  padding: 18px 64px 18px 22px;
  gap: 18px;
}

.training-detail-hero h1 {
  margin-top: 8px;
  font-size: 32px;
  line-height: 1.05;
}

.training-summary {
  grid-template-columns: minmax(120px, .7fr) minmax(210px, .95fr) minmax(96px, .5fr) minmax(260px, 1.15fr);
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.training-summary article {
  min-height: 76px;
  padding: 10px 12px;
}

.training-summary span {
  font-size: 11px;
}

.training-summary strong {
  margin-top: 4px;
  font-size: 18px;
}

.training-hero-result-card {
  min-width: 0;
}

.training-hero-result-card .training-result-score {
  min-height: 0;
  margin-top: 0;
  transform: none;
}

.training-result-score.compact {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.training-result-score.compact strong {
  min-width: 58px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(245,185,48,.42);
  border-radius: 7px;
  background: rgba(245,185,48,.12);
  color: var(--gold);
  font-size: 22px;
  text-align: center;
}

.training-result-score.compact em {
  grid-column: 1 / -1;
  margin: 0;
  color: #9eff9d;
  font-size: 11px;
  line-height: 1.15;
}

.training-hero-action.training-visibility-toggle {
  top: 58px;
}

.training-summary .training-slot-edit-toggle {
  top: 16px;
}

.training-faction-toggle.doctrine {
  min-height: 38px;
}

.training-faction-toggle .doctrine-icon-img,
.training-faction-menu button .doctrine-icon-img,
.challenge-doctrine-menu button .doctrine-icon-img,
.training-doctrine-readonly .doctrine-icon-img,
.doctrine-badge .doctrine-icon-img {
  width: 54px;
  height: 30px;
  padding: 2px;
  border: 1px solid rgba(245,185,48,.5);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(245,185,48,.18), rgba(99,217,113,.05)),
    rgba(9,14,17,.96);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(245,185,48,.08);
}

.training-faction-menu button .doctrine-icon,
.challenge-doctrine-menu button .doctrine-icon {
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

@media (max-width: 1180px) {
  .training-detail-hero {
    grid-template-columns: 1fr;
    padding-right: 56px;
  }

  .training-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-06-27: final training toolbar/status cleanup. Keep this after older overrides. */
.training-detail-hero {
  grid-template-columns: minmax(260px, .74fr) minmax(0, 1.62fr);
  align-items: center;
  min-height: 128px;
  padding: 16px 64px 16px 22px;
}

.training-summary {
  grid-template-columns: minmax(118px, .68fr) minmax(206px, .95fr) minmax(88px, .46fr) minmax(254px, 1.12fr);
  align-items: stretch;
  gap: 8px;
}

.training-summary article {
  min-height: 72px;
  padding: 9px 11px;
}

.training-hero-action.training-visibility-toggle,
.training-cancel-form.training-hero-action,
.training-summary .training-slot-edit-toggle {
  position: absolute;
  right: 16px;
  z-index: 5;
  margin: 0;
}

.training-summary .training-slot-edit-toggle {
  top: 16px;
}

.training-hero-action.training-visibility-toggle {
  top: 52px;
}

.training-cancel-form.training-hero-action {
  top: 88px;
  display: grid;
}

.training-cancel-form.training-hero-action button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(255,95,95,.52);
  border-radius: 7px;
  background: rgba(255,95,95,.09);
  color: #ffb0b0;
  cursor: pointer;
}

.training-cancel-form.training-hero-action button.restore {
  border-color: rgba(99,219,74,.56);
  background: rgba(99,219,74,.1);
  color: #95ff9e;
}

.training-cancel-form.training-hero-action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.training-match-toolbar {
  align-items: start;
}

.training-detail-hero {
  grid-template-columns: minmax(260px, .58fr) minmax(0, 1.9fr);
  align-items: center;
}

.training-summary {
  display: grid;
  grid-template-columns:
    minmax(128px, .74fr)
    minmax(128px, .74fr)
    minmax(128px, .74fr)
    minmax(184px, max-content)
    minmax(112px, .55fr)
    minmax(230px, 1fr);
  align-items: stretch;
  grid-auto-flow: column;
}

.training-summary .training-hero-result-card {
  grid-column: 6;
  grid-row: 1;
}

.training-slot-row.occupied:not(.history-row) {
  grid-template-columns: 26px minmax(0, 1fr) auto;
}

.training-slot-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.training-slot-actions > * {
  flex: 0 0 auto;
}

.training-slot-actions .training-ready-form,
.training-slot-actions .training-slot-leave-cell-form,
.training-slot-actions .training-slot-remove-form {
  margin: 0;
}

.training-slot-actions .training-ready-form {
  justify-self: auto;
}

.training-ready-form button.ready,
.training-ready-badge {
  border-color: rgba(95,215,83,.95);
  background: rgba(95,215,83,.24);
  color: #99ff86;
}

.training-camera-group,
.training-match-side,
.training-match-map {
  display: grid;
  align-content: start;
  min-height: 112px;
}

.training-camera-group-title,
.training-match-side > span,
.training-map-title-row > span {
  display: flex;
  align-items: center;
  min-height: 13px;
  margin: 0 0 8px;
  line-height: 1;
}

.training-map-title-row {
  min-height: 21px;
}

.training-round-deck-form {
  position: relative;
  overflow: visible;
}

.training-round-fields {
  position: relative;
}

.training-map-layer-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  display: grid;
  gap: 4px;
  max-height: 260px;
  padding: 7px;
  overflow: auto;
  border: 1px solid rgba(245,185,48,.36);
  border-radius: 8px;
  background: rgba(7,10,12,.98);
  box-shadow: 0 20px 44px rgba(0,0,0,.7);
}

.training-map-layer-menu[hidden] {
  display: none;
}

.training-map-layer-menu button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.training-map-layer-menu button:hover {
  border-color: rgba(245,185,48,.62);
  background: rgba(245,185,48,.1);
  color: var(--gold);
}

.training-match-map-center {
  justify-items: stretch;
}

.training-match-map-center .training-round-deck-form,
.training-match-map-center .training-round-deck,
.training-match-map-center .training-round-deck-readonly,
.training-match-map-center .training-team-tabs-core {
  width: 100%;
}

.training-match-map-center .training-round-deck-form {
  grid-template-columns: 1fr;
}

.training-match-map-center .training-round-deck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-match-map-center .training-round-card {
  width: 100%;
}

.training-match-map-center .training-team-tabs-core {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.training-match-map-center .training-team-tab-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.training-match-map-center .training-team-tab-wrap.has-team-plus {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.training-match-map-center .training-team-tab-wrap.has-team-lock {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.training-match-map-center .training-team-tab-wrap.has-team-plus.has-team-lock {
  grid-template-columns: minmax(0, 1fr) 34px max-content;
}

.training-match-map-center .training-team-lock {
  min-width: 0;
  padding-inline: 8px;
  white-space: nowrap;
}

.training-match-map-center .training-team-tab {
  min-width: 0;
  padding-inline: 8px;
  width: 100%;
}

/* Keep the map/layer picker from collapsing into the second grid column. */
.training-match-map-center,
.training-match-map-center .training-round-deck-form {
  overflow: visible;
  z-index: 25;
}

.training-match-map-center .training-map-layer-menu {
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  width: min(520px, calc(100vw - 48px));
  max-width: 100%;
  min-width: min(360px, 100%);
  grid-template-columns: 1fr;
  overflow-x: hidden;
  overflow-y: auto;
}

.training-match-map-center .training-map-layer-menu button {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-faction-toggle .doctrine-icon-img,
.training-faction-menu button .doctrine-icon-img,
.challenge-doctrine-menu button .doctrine-icon-img,
.training-doctrine-readonly .doctrine-icon-img,
.doctrine-badge .doctrine-icon-img {
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 2px;
  object-fit: cover;
  background: rgba(13,19,23,.92);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.38);
}

.training-faction-menu button .doctrine-icon,
.challenge-doctrine-menu button .doctrine-icon {
  width: 46px;
  height: 26px;
  margin-right: 8px;
  border-radius: 2px;
}

.training-slot-empty summary {
  font-weight: 500;
}

.clan-pool-list-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.clan-pool-list-section > header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.clan-pool-list-section > header em {
  min-width: 28px;
  padding: 3px 8px;
  border: 1px solid rgba(245,185,48,.3);
  border-radius: 999px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  font-style: normal;
  text-align: center;
}

.clan-pool-column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  align-items: start;
}

.clan-pool-column {
  display: grid;
  gap: 7px;
}

.clan-pool-list-section .clan-pool-member-chip,
.clan-pool-list-section .clan-pool-member-chip.selectable-pool-card {
  width: 100%;
  min-height: 38px;
  height: 38px;
  grid-template-columns: 26px minmax(0, 1fr) minmax(54px, auto) auto;
}

.clan-pool-merc-section {
  border-color: rgba(143,183,255,.16);
  background: rgba(143,183,255,.025);
}

.section-layout-no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.section-layout-no-sidebar .sidebar {
  display: none;
}

.section-layout-no-sidebar .content {
  width: min(1500px, calc(100vw - 32px));
  margin-inline: auto;
}

.recruit-vote-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.recruit-vote-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recruit-vote-requirements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.recruit-vote-requirements span,
.recruit-ready-badge {
  display: grid;
  place-items: center;
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.recruit-vote-requirements span.ready,
.recruit-ready-badge.ready {
  border-color: rgba(95,215,83,.36);
  background: rgba(95,215,83,.08);
  color: #9af0a6;
}

.recruit-vote-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.recruit-vote-actions form:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recruit-vote-button,
.recruit-gym-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.recruit-vote-button.up {
  border-color: rgba(95,215,83,.32);
}

.recruit-vote-button.up.active {
  background: rgba(95,215,83,.12);
  color: #9af0a6;
}

.recruit-vote-button.down.active {
  border-color: rgba(255,95,95,.38);
  background: rgba(255,95,95,.12);
  color: #ffb0b0;
}

.recruit-gym-button {
  width: 100%;
  border-color: rgba(245,185,48,.36);
  color: var(--gold);
}

.recruit-gym-button.active {
  border-color: rgba(95,215,83,.38);
  background: rgba(95,215,83,.08);
  color: #9af0a6;
}

.recruit-ready-badge {
  margin-top: 8px;
}

.manage-admin-tools {
  margin-bottom: 14px;
}

.manage-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manage-create-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.manage-create-form .wide,
.manage-create-form button {
  grid-column: 1 / -1;
}

.manage-create-form .manage-checkbox-label,
.manage-create-form .mini-check {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  text-transform: none;
}

.manage-create-form .manage-checkbox-label input,
.manage-create-form .mini-check input {
  width: auto;
  min-height: auto;
}

.manage-create-form input,
.manage-create-form select,
.manage-create-form textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(0,0,0,.2);
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
}

.manage-member-tools-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.manage-inline-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manage-inline-actions button {
  grid-column: auto;
}

.manage-inline-actions button[data-danger] {
  border-color: rgba(255,91,91,.42);
  background: rgba(255,91,91,.08);
  color: #ff9d9d;
}

.manage-membership-list {
  display: grid;
  gap: 8px;
}

.manage-membership-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 90px 140px 120px 92px 58px 76px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.manage-membership-row div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.manage-membership-row strong,
.manage-membership-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-membership-row span {
  color: var(--muted);
  font-size: 11px;
}

.manage-membership-row a {
  color: var(--gold);
  font-weight: 950;
  text-decoration: none;
}

.manage-membership-row select {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

.manage-membership-row .mini-check {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.manage-membership-row button {
  min-height: 32px;
  border: 1px solid rgba(95,215,83,.38);
  border-radius: 7px;
  background: rgba(95,215,83,.08);
  color: #9af0a6;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.manage-membership-row button.muted {
  border-color: rgba(255,194,57,.35);
  background: rgba(255,194,57,.08);
  color: var(--gold);
}

.manage-membership-row button.danger {
  border-color: rgba(255,91,91,.42);
  background: rgba(255,91,91,.08);
  color: #ff9d9d;
}

.pool-add-member-panel {
  display: none;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,194,57,.16);
  border-radius: 8px;
  background: rgba(255,194,57,.04);
}

.clan-pool-edit-mode .pool-add-member-panel {
  display: block;
}

.pool-add-member-panel h3 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
}

.pool-add-member-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 180px) auto;
  gap: 8px;
}

.pool-add-member-form input,
.pool-add-member-form select {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
}

.pool-add-member-form button {
  min-height: 36px;
  border: 1px solid rgba(95,215,83,.38);
  border-radius: 7px;
  background: rgba(95,215,83,.08);
  color: #9af0a6;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.manage-create-form button,
.manage-leader-request-row button {
  min-height: 34px;
  border: 1px solid rgba(95,215,83,.38);
  border-radius: 7px;
  background: rgba(95,215,83,.08);
  color: #9af0a6;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.manage-leader-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.manage-leader-request-main {
  display: grid;
  gap: 4px;
}

.manage-leader-request-main em {
  color: #ffc857;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.manage-leader-request-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.manage-leader-request-actions form {
  margin: 0;
}

.manage-leader-request-row button {
  min-width: 132px;
}

.manage-leader-request-row button.decline {
  border-color: rgba(255,95,95,.38);
  background: rgba(255,95,95,.08);
  color: #ffb0b0;
}

@media (max-width: 760px) {
  .manage-leader-request-row {
    grid-template-columns: 1fr;
  }

  .manage-leader-request-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .manage-leader-request-row button {
    width: 100%;
  }
}

/* 2026-06-27: squad-level role locks and activity log. Keep after older training overrides. */
.training-squad-header-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.training-squad-header-actions em {
  color: var(--gold);
  font-style: normal;
}

.training-squad-lock-form {
  display: inline-flex;
  margin: 0;
}

.training-squad-lock-form button,
.training-squad-lock-state {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(245,185,48,.45);
  border-radius: 7px;
  background: rgba(245,185,48,.08);
  color: var(--gold);
  padding: 0;
}

.training-squad-lock-form button {
  cursor: pointer;
}

.training-squad-lock-form button:hover {
  border-color: rgba(245,185,48,.85);
  background: rgba(245,185,48,.14);
}

.training-squad-lock-form button.locked,
.training-squad-lock-state {
  border-color: rgba(255,95,95,.55);
  background: rgba(255,95,95,.1);
  color: #ffb0b0;
}

.training-squad-lock-form svg,
.training-squad-lock-state svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.training-activity-log-panel {
  margin-top: 14px;
}

.training-activity-log-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.training-activity-log-list article {
  display: grid;
  grid-template-columns: 64px 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}

.training-activity-log-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.training-activity-log-list strong {
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-activity-log-list b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* 2026-06-27: mobile baseline. Final overrides so desktop rules above stay intact. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body::before {
    background-size: 42px 42px;
  }

  .topbar {
    position: sticky;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 8px;
    min-height: 58px;
    height: auto;
    padding: 8px 10px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
    font-size: 18px;
  }

  .brand-crest {
    width: 30px;
    height: 30px;
  }

  .topnav {
    grid-column: 1 / -1;
    order: 8;
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .topnav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
  }

  .top-actions {
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .top-actions .search-box {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    display: flex;
  }

  .quick-search-results {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 58px;
    width: auto;
    min-width: 0;
    max-height: min(70vh, 520px);
    overflow: auto;
  }

  .account-pill,
  .steam-button {
    max-width: 150px;
    min-height: 36px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .app-layout,
  .manage-page,
  .training-detail-page,
  .clan-detail-page,
  .challenges-page,
  .section-layout,
  .section-layout-no-sidebar,
  .profile-settings-page {
    width: 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
  }

  .app-layout,
  .clan-detail-grid,
  .clan-detail-hero,
  .applications-workspace,
  .manage-grid,
  .manage-admin-tools,
  .training-board-layout,
  .training-teams-layout,
  .training-team-tabs-with-cameras,
  .training-slot-body,
  .challenge-journal-grid,
  .challenge-create-grid,
  .clan-polls-layout,
  .clan-pool-layout,
  .roster-page-grid,
  .tree-split,
  .profile-hero,
  .main-grid,
  .section-columns,
  .directory-grid,
  .players-grid,
  .stats-overview-grid,
  .stats-role-top-grid {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: static;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .side-menu {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scroll-snap-type: x proximity;
  }

  .side-menu a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .sidebar-card {
    display: none;
  }

  .panel,
  .clan-detail-info-panel,
  .training-slot-panel,
  .training-pool-panel,
  .manage-panel {
    border-radius: 8px;
  }

  .panel-head {
    align-items: flex-start;
    gap: 10px;
  }

  .panel-head h2,
  .panel-head h3 {
    font-size: 16px;
  }

  .profile-hero,
  .clan-detail-hero,
  .training-detail-hero,
  .manage-hero,
  .section-hero {
    min-height: 0;
    padding: 16px;
  }

  .profile-name-row h1,
  .clan-detail-main h1,
  .training-detail-hero h1,
  .manage-hero h1,
  .section-hero h1,
  .challenge-hero h1 {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .clan-detail-actions,
  .manage-hero-actions,
  .challenge-hero-actions,
  .training-reserve-head,
  .training-detail-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat-strip,
  .role-cards,
  .stats-grid,
  .section-metrics,
  .manage-metrics,
  .clan-meta-grid,
  .clan-format-list,
  .training-list article,
  .training-summary,
  .training-match-toolbar,
  .training-camera-layout,
  .training-pool-chips,
  .clan-pool-groups,
  .clan-pool-columns,
  .clan-pool-role-grid,
  .clan-stat-grid,
  .notification-tabs,
  .access-create-role,
  .access-member-roles > div,
  .application-form,
  .question-row,
  .question-edit-form,
  .feedback-form {
    grid-template-columns: 1fr !important;
  }

  .training-summary {
    align-items: stretch;
  }

  .training-summary article,
  .training-hero-action {
    min-width: 0;
  }

  .training-hero-action {
    justify-self: stretch;
  }

  .training-visibility-toggle button,
  .training-cancel-form button,
  .training-summary .training-slot-edit-toggle {
    width: 100%;
    min-height: 38px;
  }

  .training-match-map,
  .training-team-card,
  .training-camera-group {
    min-width: 0;
  }

  .training-slot-grid,
  .training-slot-grid-three {
    grid-template-columns: 1fr !important;
  }

  .training-slot-squad {
    min-width: 0;
  }

  .training-slot-squad header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .training-slot-row,
  .training-slot-empty summary {
    min-height: 38px;
    padding: 7px 8px;
  }

  .training-slot-row.occupied:not(.history-row) {
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
  }

  .training-slot-identity strong,
  .training-slot-identity em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .training-pool-player {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .training-role-counts {
    position: static;
    width: 100%;
  }

  .training-role-counts > div {
    display: flex;
    flex-wrap: wrap;
  }

  .training-activity-log-list article,
  .training-result-log-list article {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .training-activity-log-list b,
  .training-result-log-list b {
    grid-column: 1 / -1;
  }

  .training-slot-grid-history {
    overflow-x: auto;
  }

  .training-slot-row.history-row,
  .training-slot-squad.history-squad header.history-header {
    min-width: 720px;
  }

  .clan-card,
  .manage-clan-row,
  .application-row,
  .manage-row,
  .challenge-row,
  .notification-row {
    grid-template-columns: 1fr !important;
  }

  .manage-clan-actions,
  .application-inline-actions,
  .inline-actions {
    width: 100%;
    justify-content: stretch;
  }

  .manage-clan-actions > *,
  .application-inline-actions > *,
  .inline-actions > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .brand span:last-child {
    display: none;
  }

  .topbar {
    grid-template-columns: auto 1fr;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .top-actions .search-box {
    height: 38px;
  }

  .account-pill {
    max-width: 118px;
  }

  .profile-avatar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .profile-avatar img {
    width: 72px;
    height: 72px;
  }

  .stat-strip {
    gap: 8px;
  }

  .training-detail-page,
  .app-layout,
  .manage-page,
  .clan-detail-page {
    padding-left: 8px;
    padding-right: 8px;
  }

  .training-detail-hero,
  .profile-hero,
  .clan-detail-hero,
  .manage-hero,
  .panel {
    padding: 12px;
  }

  .training-start-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .training-slot-squad header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .training-squad-size-control {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .training-slot-row.occupied:not(.history-row) {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .training-slot-role-edit {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .training-slot-confirm-actions,
  .training-slot-remove-form,
  .training-slot-leave-cell-form {
    justify-self: end;
  }

  .training-faction-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 80px;
    width: auto;
    max-height: 70vh;
    overflow: auto;
  }

  .training-slot-role-menu {
    width: min(320px, calc(100vw - 34px));
  }

  .training-pool-chip {
    width: 100%;
  }

  .clan-logo-box {
    width: 56px;
    height: 56px;
  }
}
.training-detail-page {
  padding-top: 72px;
}

.training-role-count {
  cursor: pointer;
}

.training-role-count.active,
.training-slot-row.role-filter-match {
  border-color: rgba(255, 190, 48, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 190, 48, 0.36), 0 0 18px rgba(255, 190, 48, 0.16);
}

.training-slot-row.role-filter-dim {
  opacity: 0.38;
}

.training-reserve-remove-form,
.training-squad-delete-form {
  margin: 0;
}

.training-squad-delete-form {
  display: inline-flex;
}

.training-reserve-remove-form {
  margin-left: auto;
  display: none;
}

.training-slot-remove-mode .training-reserve-remove-form {
  display: inline-flex;
}

.training-reserve-remove-form button,
.training-squad-delete-form button {
  border: 1px solid rgba(255, 92, 92, 0.65);
  background: rgba(75, 15, 20, 0.55);
  color: #ffb7b7;
  border-radius: 8px;
  min-height: 28px;
  padding: 0 10px;
  font-weight: 800;
  cursor: pointer;
}

.training-squad-delete-form button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}

.training-squad-delete-form svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.training-delete-form button.delete {
  border-color: rgba(255, 92, 92, 0.75);
  background: rgba(75, 15, 20, 0.55);
  color: #ffb7b7;
}

.training-delete-form.training-hero-action {
  position: absolute;
  top: 88px;
  right: 52px;
  z-index: 5;
  margin: 0;
}

.training-delete-form.training-hero-action button.delete {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
}

.training-delete-form.training-hero-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.training-screenshots-panel {
  margin-top: 14px;
}

.training-screenshot-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.training-screenshot-form input {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(8, 12, 16, 0.82);
  color: #e5edf7;
  padding: 8px 10px;
}

.training-screenshot-form button {
  min-height: 38px;
  border: 1px solid rgba(38, 211, 102, 0.65);
  border-radius: 8px;
  background: rgba(15, 70, 32, 0.65);
  color: #adffbd;
  font-weight: 800;
}

.training-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.training-screenshot-grid a {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: #d7e4f4;
}

.training-screenshot-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(8, 12, 16, 0.85);
}

.training-screenshot-grid span {
  color: #9fb0c3;
  font-size: 12px;
}

@media (max-width: 800px) {
  .training-screenshot-form {
    grid-template-columns: 1fr;
  }
}

/* Editing must not squeeze both teams and eight squads into one row. */
body.training-edit-mode .training-teams-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.training-edit-mode .training-team-panel {
  display: none;
}

body.training-edit-mode .training-team-panel.active {
  display: block;
}

/* 2026-07-06: shared clan section navigation and six-column clan pool. */
.clan-side-nav {
  position: fixed;
  top: 72px;
  left: 14px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  width: 232px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(19,27,33,.94), rgba(7,10,14,.96)),
    rgba(0,0,0,.62);
  box-shadow: 0 18px 60px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.025);
}

.clan-side-nav-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.clan-side-nav-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(245,185,48,.22);
  border-radius: 7px;
  color: var(--text);
  background: rgba(245,185,48,.055);
  text-decoration: none;
}

.clan-side-nav-title b,
.clan-side-nav-title span,
.clan-side-nav nav a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-side-nav-title b {
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.clan-side-nav-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.clan-side-nav-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,185,48,.38);
  border-radius: 7px;
  color: var(--gold);
  background: rgba(245,185,48,.09);
  font: inherit;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.clan-side-nav nav {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
}

.clan-side-nav nav a {
  display: grid;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.clan-side-nav nav a:hover,
.clan-side-nav nav a.active {
  border-color: rgba(245,185,48,.44);
  color: var(--text);
  background: rgba(245,185,48,.1);
}

.clan-side-nav ~ main {
  width: min(1640px, calc(100vw - 284px));
  max-width: none;
  margin-left: 260px;
  margin-right: 24px;
}

body.clan-side-nav-collapsed .clan-side-nav {
  width: 58px;
}

body.clan-side-nav-collapsed .clan-side-nav-title {
  place-items: center;
  min-height: 34px;
  padding: 0;
}

body.clan-side-nav-collapsed .clan-side-nav-title span,
body.clan-side-nav-collapsed .clan-side-nav nav a span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.clan-side-nav-collapsed .clan-side-nav-head {
  grid-template-columns: 1fr;
}

body.clan-side-nav-collapsed .clan-side-nav-head button {
  transform: rotate(180deg);
}

body.clan-side-nav-collapsed .clan-side-nav nav a {
  min-height: 34px;
  padding: 0;
}

body.clan-side-nav-collapsed .clan-side-nav nav a::before {
  content: "";
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  opacity: .75;
}

body.clan-side-nav-collapsed .clan-side-nav ~ main {
  width: min(1720px, calc(100vw - 112px));
  margin-left: 88px;
  margin-right: 24px;
}

.clan-pool-list-section .clan-pool-column-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.clan-pool-list-section .clan-pool-member-chip,
.clan-pool-list-section .clan-pool-member-chip.selectable-pool-card {
  grid-template-columns: 24px minmax(0, 1fr) minmax(42px, auto) auto;
  padding-inline: 8px;
}

@media (max-width: 1500px) {
  .clan-pool-list-section .clan-pool-column-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .clan-side-nav {
    position: sticky;
    top: 60px;
    left: auto;
    bottom: auto;
    width: min(100%, calc(100vw - 24px));
    margin: 10px auto 0;
  }

  .clan-side-nav nav {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    overflow: visible;
  }

  .clan-side-nav ~ main,
  body.clan-side-nav-collapsed .clan-side-nav ~ main {
    width: min(100%, calc(100vw - 24px));
    margin-left: auto;
    margin-right: auto;
  }

  body.clan-side-nav-collapsed .clan-side-nav {
    width: min(100%, calc(100vw - 24px));
  }

  body.clan-side-nav-collapsed .clan-side-nav-title span,
  body.clan-side-nav-collapsed .clan-side-nav nav a span {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
  }

  body.clan-side-nav-collapsed .clan-side-nav-head {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  body.clan-side-nav-collapsed .clan-side-nav nav a {
    padding: 0 10px;
  }

  body.clan-side-nav-collapsed .clan-side-nav nav a::before {
    display: none;
  }

  .clan-pool-list-section .clan-pool-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .clan-pool-list-section .clan-pool-column-grid {
    grid-template-columns: 1fr;
  }
}

.stream-links-compact {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  margin: -4px 0 8px;
}

.stream-links-compact.empty {
  justify-content: flex-end;
  min-height: 30px;
  margin: -8px 0 2px;
}

.stream-link-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.stream-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  min-height: 30px;
  padding: 3px 9px 3px 4px;
  border: 1px solid rgba(255, 193, 35, 0.28);
  border-radius: 8px;
  background: rgba(12, 16, 19, 0.82);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}

.stream-link-icon.live {
  border-color: rgba(70, 211, 105, 0.58);
  box-shadow: inset 0 0 0 1px rgba(70, 211, 105, 0.08);
}

.stream-link-icon span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 193, 35, 0.16);
  color: var(--gold);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
}

.stream-link-icon.youtube span {
  background: #c91822;
  color: #fff;
}

.stream-link-icon.twitch span {
  background: #6441a5;
  color: #fff;
}

.stream-link-icon.kick span {
  background: #3bd63b;
  color: #071007;
}

.stream-link-icon.vk span {
  background: #2787f5;
  color: #fff;
}

.stream-link-icon.rutube span {
  background: #101820;
  color: #e9f1ff;
}

.stream-link-icon b {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-link-manage {
  position: relative;
  flex: 0 0 auto;
}

.stream-link-manage summary {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 193, 35, 0.52);
  border-radius: 8px;
  background: rgba(12, 16, 19, 0.88);
  color: var(--gold);
  cursor: pointer;
  list-style: none;
}

.stream-link-manage summary::-webkit-details-marker {
  display: none;
}

.stream-link-manage summary svg {
  width: 16px;
  height: 16px;
}

.stream-link-manage[open] summary {
  background: rgba(255, 193, 35, 0.14);
}

.stream-link-manage-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(255, 193, 35, 0.28);
  border-radius: 8px;
  background: rgba(9, 13, 17, 0.98);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.stream-link-manage-list {
  display: grid;
  gap: 6px;
}

.stream-link-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 4px 4px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.stream-link-manage-row a {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-link-manage-row button {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 98, 98, 0.55);
  border-radius: 7px;
  background: rgba(80, 10, 18, 0.72);
  color: #ffd5d5;
  font-weight: 900;
}

.stream-link-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(220px, 2fr) minmax(120px, auto) auto;
  gap: 8px;
  align-items: end;
}

.stream-link-form label {
  display: grid;
  gap: 5px;
}

.stream-link-form span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.stream-link-form input,
.stream-link-form select {
  min-height: 34px;
}

.stream-link-form button {
  min-height: 34px;
}

@media (max-width: 900px) {
  .stream-links-compact {
    align-items: flex-start;
  }

  .stream-link-form {
    grid-template-columns: 1fr;
  }
}

.stream-hub {
  display: grid;
  gap: 14px;
}

.stream-hub-main {
  display: grid;
  gap: 14px;
}

.stream-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stream-hub-head h2 {
  margin: 0 0 4px;
}

.stream-hub-head p {
  margin: 0;
  color: var(--muted);
}

.stream-hub-head > span {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 34px;
  border: 1px solid rgba(70, 211, 105, 0.42);
  border-radius: 8px;
  color: var(--green);
  font-weight: 900;
}

.stream-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.stream-hub-card {
  display: grid;
  min-height: 128px;
  border: 1px solid rgba(255, 193, 35, 0.26);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(70, 211, 105, 0.08), rgba(19, 25, 31, 0.96));
  overflow: hidden;
}

.stream-hub-card.live {
  box-shadow: inset 4px 0 0 rgba(70, 211, 105, 0.72);
}

.stream-hub-card > a:first-child {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}

.stream-hub-card span,
.stream-hub-row span {
  color: var(--muted);
}

.stream-hub-card span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stream-hub-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stream-hub-card em {
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.stream-context-link {
  align-self: end;
  margin: 0 14px 14px;
  color: var(--gold);
  font-weight: 800;
}

.stream-hub-row b,
.stream-hub-row a {
  overflow-wrap: anywhere;
}

.stream-empty-row {
  border-style: dashed;
}

@media (max-width: 760px) {
  .stream-hub-head {
    display: grid;
  }
}

/* Training objectives */
.training-objectives-panel {
  display: grid;
  gap: 14px;
}

.training-objectives-panel.training-objectives-settings-only {
  display: none;
}

body.training-edit-mode .training-objectives-panel.training-objectives-settings-only {
  display: grid;
}

.training-objectives-head {
  align-items: center;
}

.training-objectives-head p {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--muted);
}

.training-objectives-score {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 42px;
  border: 1px solid rgba(255, 193, 35, 0.46);
  border-radius: 8px;
  color: var(--gold);
  font-size: 18px;
}

.training-objective-grid,
.training-objective-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
}

.training-objective-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 193, 35, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 193, 35, 0.055), rgba(15, 20, 25, 0.96));
}

.training-objective-card.completed {
  border-color: rgba(70, 211, 105, 0.48);
  box-shadow: inset 3px 0 0 rgba(70, 211, 105, 0.7);
}

.training-objective-card.calibration {
  border-style: dashed;
}

.training-objective-card-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.training-objective-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 193, 35, 0.44);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 900;
}

.training-objective-card.completed .training-objective-mark {
  border-color: rgba(70, 211, 105, 0.64);
  color: var(--green);
}

.training-objective-card h3,
.training-objective-card p {
  margin: 0;
}

.training-objective-card h3 {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.training-objective-card-head em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.training-objective-card > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.training-objective-remove {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.training-objective-remove svg {
  width: 15px;
  height: 15px;
}

.training-objective-remove:hover {
  color: var(--red);
}

.training-objective-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.training-objective-meta .verification-ready {
  color: var(--green);
}

.training-objective-meta .verification-sample_needed {
  color: var(--gold);
}

.training-objective-progress-list {
  display: grid;
  gap: 6px;
}

.training-objective-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.training-objective-progress-row > span {
  display: flex;
  min-width: 0;
  gap: 6px;
}

.training-objective-progress-row b,
.training-objective-progress-row em,
.training-objective-progress-row strong {
  font-size: 11px;
}

.training-objective-progress-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-objective-progress-row em {
  color: var(--muted);
  font-style: normal;
}

.training-objective-progress-row > i {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--objective-progress), rgba(255,255,255,.08) var(--objective-progress));
}

.training-objective-progress-row.status-completed > i {
  background: linear-gradient(90deg, var(--green) var(--objective-progress), rgba(255,255,255,.08) var(--objective-progress));
}

.training-objective-progress-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

.training-objective-awaiting,
.training-objective-empty {
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}

.training-objective-catalog {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.training-objective-catalog > summary {
  width: fit-content;
  color: var(--gold);
  cursor: pointer;
  font-weight: 900;
}

.training-objective-catalog > form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.training-objective-preset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.training-objective-preset input {
  margin-top: 3px;
  accent-color: var(--gold);
}

.training-objective-preset span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.training-objective-preset b {
  font-size: 12px;
}

.training-objective-preset small,
.training-objective-preset em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.training-objective-preset.selected {
  border-color: rgba(70, 211, 105, 0.3);
  opacity: .58;
}

.training-objective-preset.unavailable {
  border-style: dashed;
  opacity: .42;
  cursor: not-allowed;
}

.training-objective-add {
  justify-self: start;
  padding: 9px 14px;
  border: 1px solid rgba(255, 193, 35, .5);
  border-radius: 6px;
  background: rgba(255, 193, 35, .11);
  color: var(--gold);
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 640px) {
  .training-objective-grid,
  .training-objective-preset-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the compact training header stable while its settings are open. */
@media (min-width: 1201px) {
  body.training-edit-mode .training-detail-hero {
    align-items: start;
    padding-bottom: 100px;
  }

  body.training-edit-mode .training-detail-hero > div:first-child,
  body.training-edit-mode .training-summary,
  body.training-edit-mode .training-summary > article {
    align-self: start;
  }

  body.training-edit-mode .training-summary {
    align-items: start;
  }

  body.training-edit-mode .training-summary > article {
    min-height: 100px;
    height: 100px;
  }

  body.training-edit-mode .training-hero-result-card {
    position: relative;
    overflow: visible;
  }

  body.training-edit-mode .training-result-inline-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 12;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    width: min(360px, calc(100vw - 96px));
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(245, 185, 48, .26);
    border-radius: 8px;
    background: rgba(10, 15, 18, .98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
  }

}

@media (min-width: 1201px) and (max-width: 1400px) {
  .training-summary {
    grid-template-columns:
      minmax(90px, .7fr)
      minmax(90px, .7fr)
      minmax(90px, .7fr)
      minmax(180px, 1.1fr)
      minmax(80px, .5fr)
      minmax(210px, 1fr);
  }
}

@media (max-width: 1200px) {
  .training-detail-hero {
    grid-template-columns: 1fr;
    padding-right: 56px;
  }

  .training-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .training-summary .training-hero-result-card {
    grid-column: auto;
    grid-row: auto;
  }

  body.training-edit-mode .training-summary,
  body.training-edit-mode .training-summary > article {
    align-self: start;
  }

  body.training-edit-mode .training-summary {
    align-items: start;
  }

  body.training-edit-mode .training-hero-result-card {
    height: auto;
  }

  body.training-edit-mode .training-result-inline-form {
    position: static;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 560px) {
  body.training-edit-mode .training-result-inline-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.training-edit-mode .training-result-winner-field,
  body.training-edit-mode .training-result-note-field,
  body.training-edit-mode .training-result-inline-form button {
    grid-column: 1 / -1;
  }
}

.training-detail-hero > .training-hero-actions {
  position: absolute;
  top: 16px;
  right: 16px !important;
  left: auto !important;
  z-index: 15;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.training-summary .training-hero-actions .training-slot-edit-toggle,
.training-hero-actions .training-hero-action {
  position: static;
  inset: auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  justify-self: center;
}

.training-hero-actions .training-hero-action button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

@media (max-width: 900px) {
  .training-detail-hero > .training-hero-actions {
    top: 12px;
    right: 12px !important;
  }
}

.training-discord-admin {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) auto;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 194, 57, .24);
  border-radius: 6px;
  background: rgba(255, 194, 57, .035);
}

.training-discord-admin-copy,
.training-discord-admin-state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.training-discord-admin-copy > svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.training-discord-admin-copy > div,
.training-discord-admin-state {
  min-width: 0;
}

.training-discord-admin-copy strong,
.training-discord-admin-copy span,
.training-discord-admin-state span {
  display: block;
}

.training-discord-admin-copy span,
.training-discord-admin-state span,
.training-discord-finalize-hint {
  color: var(--muted);
  font-size: 12px;
}

.training-discord-admin-state {
  flex-wrap: wrap;
}

.training-discord-admin-state .complete {
  color: #83ee8d;
}

.training-discord-admin-state .warning {
  color: #ffbf63;
}

.training-discord-finalize-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(105, 225, 120, .65);
  border-radius: 6px;
  background: rgba(53, 153, 72, .16);
  color: #9cf3a5;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .training-discord-admin {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .training-discord-admin form,
  .training-discord-finalize-button {
    width: 100%;
  }
}

/* Finished squads need room for the full server-stat row. */
.training-slot-grid-three.training-slot-grid-history {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.training-edit-mode .training-slot-grid-three.training-slot-grid-history {
  grid-template-columns: minmax(0, 1fr);
}

.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied.history-row {
  grid-template-columns: 28px minmax(90px, 1.45fr) repeat(var(--history-cols, 7), minmax(30px, .72fr));
  gap: 0;
  min-height: 46px;
  padding: 0;
}

/* Reserve cards must keep long nicknames readable at every viewport. */
.training-reserve-panel .training-pool-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 8px;
  align-items: stretch;
}

.training-reserve-panel .training-pool-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 54px;
  padding: 8px 10px;
  white-space: normal;
}

.training-reserve-panel .training-pool-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.training-reserve-panel .training-pool-player strong,
.training-reserve-panel .training-pool-player em {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.training-reserve-panel .training-pool-player strong {
  line-height: 1.25;
}

.training-reserve-panel .training-pool-player em {
  line-height: 1.2;
  justify-self: start;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .training-reserve-panel .training-pool-chips {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) and (max-width: 1399px) {
  .training-reserve-panel .training-pool-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 600px) and (max-width: 999px) {
  .training-reserve-panel .training-pool-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .training-reserve-panel .training-pool-chips {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Admin slot controls get their own row and never cover player information. */
body.training-edit-mode .training-teams-layout,
.training-slot-panel.training-slot-remove-mode .training-teams-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.training-edit-mode .training-team-panel:not(.active),
.training-slot-panel.training-slot-remove-mode .training-team-panel:not(.active),
.training-team-panel[hidden] {
  display: none !important;
}

body.training-edit-mode .training-team-panel.active,
.training-slot-panel.training-slot-remove-mode .training-team-panel.active {
  display: block;
}

body.training-edit-mode .training-slot-row.occupied:not(.history-row),
.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) {
  grid-template-areas:
    "icon identity"
    "actions actions";
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
  min-height: 68px;
}

body.training-edit-mode .training-slot-row.occupied:not(.history-row) > .role-icon-mini,
.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) > .role-icon-mini {
  grid-area: icon;
}

body.training-edit-mode .training-slot-row.occupied:not(.history-row) > .training-slot-identity,
.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) > .training-slot-identity {
  grid-area: identity;
  min-width: 0;
}

body.training-edit-mode .training-slot-row.occupied:not(.history-row) > .training-slot-actions,
.training-slot-panel.training-slot-remove-mode .training-slot-row.occupied:not(.history-row) > .training-slot-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  gap: 5px;
}

/* The current player's compact leave action stays beside the role control. */
.training-slot-row.own-player-slot:not(.history-row) .training-slot-actions {
  flex-wrap: nowrap;
}

body.training-edit-mode .training-slot-row.own-player-slot:not(.history-row),
.training-slot-panel.training-slot-remove-mode .training-slot-row.own-player-slot:not(.history-row) {
  grid-template-areas: "icon identity actions";
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  row-gap: 0;
  min-height: 40px;
}
/* Persistent team plans for approved commanders and squad leaders. */
.tactical-plan-map-trigger{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.tactical-plan-map-trigger:hover,.tactical-plan-map-trigger:focus-visible{transform:scale(1.08);box-shadow:0 0 0 3px rgba(245,185,48,.35);outline:0}
body.tactical-plan-open{overflow:hidden}
.tactical-plan-modal[hidden]{display:none!important}
.tactical-plan-modal{position:fixed;inset:0;z-index:1000;display:block;padding:12px;background:rgba(2,5,6,.94)}
.tactical-plan-shell{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border:1px solid #455154;border-radius:8px;background:#101617;box-shadow:0 24px 80px #000}
.tactical-plan-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:10px 14px;border-bottom:1px solid #303a3d;background:#171e20}
.tactical-plan-heading{min-width:0}
.tactical-plan-heading>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tactical-plan-heading span{color:#e9bd45;font-size:11px;text-transform:uppercase;letter-spacing:0}
.tactical-plan-heading strong{font-size:18px;letter-spacing:0}
.tactical-plan-heading small{color:#96a2a5;letter-spacing:0}
.tactical-plan-header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.tactical-plan-team-switcher{display:flex;gap:6px}
.tactical-plan-team-switcher[hidden]{display:none!important}
.tactical-plan-team-switcher button{height:36px;padding:0 12px;border:1px solid #455154;border-radius:6px;background:#111819;color:#c7d0d2;font:inherit;font-size:12px;font-weight:700;letter-spacing:0;cursor:pointer}
.tactical-plan-team-switcher button.active{border-color:#d4a72c;background:#332a10;color:#f7cf58}
.tactical-plan-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #4a5558;border-radius:6px;background:#101617;color:#fff;font:inherit;font-size:28px;line-height:1;cursor:pointer}
.tactical-plan-close:hover,.tactical-plan-close:focus-visible{border-color:#b84949;background:#351819;color:#ff9a9a;outline:0}
.squadcalc-plan-frame{display:block;width:100%;min-height:0;flex:1;border:0;background:#111}
@media(max-width:760px){
  .tactical-plan-modal{padding:0}
  .tactical-plan-shell{border:0;border-radius:0}
  .tactical-plan-header{align-items:flex-start;gap:8px;padding:8px 10px}
  .tactical-plan-header-actions{gap:6px}
  .tactical-plan-team-switcher button{width:42px;padding:0;font-size:0}
  .tactical-plan-team-switcher button::after{font-size:12px}
  .tactical-plan-team-switcher button[data-plan-assignment="team_one"]::after{content:"К1"}
  .tactical-plan-team-switcher button[data-plan-assignment="team_two"]::after{content:"К2"}
}

/* Stable drag handles for officers: keep the squad title and controls in
   their own columns at every responsive breakpoint. */
.training-slot-squad > header:has(.training-squad-drag-handle) {
  grid-template-columns:24px minmax(0,1fr) auto auto;
}

/* Separate reserve and full removal actions in training edit mode. */
.training-slot-delete-form,
.training-camera-admin-actions {
  display: none;
}

.training-slot-remove-mode .training-slot-delete-form {
  display: block;
}

.training-slot-actions .training-slot-delete-form,
.training-slot-actions .training-slot-reserve-form,
.training-camera-admin-actions form {
  margin: 0;
}

.training-slot-delete-form button,
.training-slot-reserve-form button,
.training-camera-admin-actions button,
.training-reserve-remove-form button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}

.training-slot-delete-form button,
.training-camera-admin-actions .training-camera-delete-form button,
.training-reserve-remove-form button {
  border: 1px solid rgba(255,95,95,.62);
  color: #ffb0b0;
  background: rgba(255,95,95,.12);
}

.training-slot-reserve-form button,
.training-camera-admin-actions .training-camera-reserve-form button {
  border: 1px solid rgba(245,185,48,.5);
  color: var(--gold);
  background: rgba(245,185,48,.1);
}

.training-slot-delete-form svg,
.training-slot-reserve-form svg,
.training-camera-admin-actions svg,
.training-reserve-remove-form svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.training-edit-mode .training-camera-admin-actions,
.training-slot-panel.training-slot-remove-mode .training-camera-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
}

.training-camera-admin-actions button:not(.training-camera-player) {
  min-height: 26px;
  padding: 0;
}

/* CMD ready-check: one independent check per team and round. */
.training-team-readiness-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 194, 57, .28);
  border-radius: 7px;
  background: #111820;
}

.training-team-readiness-bar > span {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.training-team-readiness-bar b {
  color: var(--text);
  font-size: 12px;
}

.training-team-readiness-bar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.training-team-readiness-bar.active {
  border-color: rgba(84, 218, 103, .62);
  background: #102018;
}

.training-team-readiness-bar.completed b,
.training-team-readiness-bar.completed em {
  color: #8cff9b;
}

.training-team-readiness-bar form {
  flex: 0 0 auto;
}

.training-team-readiness-bar button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 194, 57, .52);
  border-radius: 6px;
  background: #241f10;
  color: var(--gold);
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.training-ready-check {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 7, 11, .88);
  backdrop-filter: blur(4px);
}

.training-ready-check-dialog {
  position: relative;
  width: min(100%, 520px);
  min-height: 420px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 34px 32px 28px;
  border: 1px solid rgba(92, 229, 111, .56);
  border-radius: 8px;
  background: #0b1217;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(255, 255, 255, .035);
  text-align: center;
}

.training-ready-check-scan {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #55e26c;
  box-shadow: 0 0 24px rgba(85, 226, 108, .7);
}

.training-ready-check-eyebrow {
  color: #79e98b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.training-ready-check h2 {
  margin: 0;
  color: #f4f7fa;
  font-size: 27px;
  line-height: 1.1;
}

.training-ready-check p {
  max-width: 390px;
  margin: 0;
  color: #aeb8c3;
  font-size: 14px;
  line-height: 1.45;
}

.training-ready-check-progress {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.training-ready-check-progress strong {
  color: #8cff9b;
  font-size: 34px;
  line-height: 1;
}

.training-ready-check-progress span,
.training-ready-check-countdown span,
.training-ready-check small {
  color: #82909d;
  font-size: 11px;
}

.training-ready-check-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  width: min(100%, 410px);
  min-height: 16px;
}

.training-ready-check-players i {
  width: 13px;
  height: 13px;
  border: 1px solid #4c5964;
  border-radius: 50%;
  background: #1a242c;
}

.training-ready-check-players i.ready {
  border-color: #69ec7e;
  background: #55d96a;
  box-shadow: 0 0 9px rgba(85, 217, 106, .48);
}

.training-ready-check-players i.current {
  outline: 2px solid rgba(255, 194, 57, .78);
  outline-offset: 2px;
}

.training-ready-check-countdown {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.training-ready-check-countdown strong {
  color: #f1f4f7;
  font-size: 16px;
}

.training-ready-check-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 370px);
}

.training-ready-check-actions button {
  width: 100%;
  min-height: 46px;
  border-radius: 7px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.training-ready-check-actions .confirm {
  border: 1px solid #62e277;
  background: #197d31;
}

.training-ready-check-actions .decline {
  border: 1px solid #d1535d;
  background: #6e2028;
}

.training-ready-check.completed .training-ready-check-dialog {
  border-color: #8cff9b;
}

.training-ready-check.completed .training-ready-check-actions {
  visibility: hidden;
}

@media (max-width: 560px) {
  .training-ready-check-dialog {
    min-height: 390px;
    padding: 28px 18px 22px;
  }

  .training-ready-check-actions {
    grid-template-columns: 1fr;
  }

  .training-team-readiness-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .training-team-readiness-bar button {
    width: 100%;
  }
}