/**
 * Rekaptr Next-Gen Squad Hub & Multi-POV Collaboration Center Styling
 * Immersive gaming dark theme, neon glows, glassmorphic cards, multi-camera stage, and responsive panels
 */

.teams-container-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: var(--bg-app);
  /* Top padding cleared to 38px (was 20px) so the header banner's rounded
     corner doesn't sit under the fake window-controls overlay used when
     this markup is embedded as a marketing "screenshot" — see
     assets/mock-embed.js, a 90x22px cluster pinned to the frame's
     top-right corner. */
  padding: 38px 24px 80px 24px;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
 * 1. Immersive Squad Identity Header Banner
 * ------------------------------------------------------------- */
.squad-top-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(26, 29, 45, 0.95) 0%, rgba(13, 15, 24, 0.98) 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.squad-header-background-glow {
  position: absolute;
  top: -80px;
  left: 30px;
  width: 320px;
  height: 200px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0) 70%);
  pointer-events: none;
  filter: blur(30px);
}

.squad-header-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 2;
}

.squad-identity-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}

.squad-emblem-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.squad-emblem-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.squad-emblem-badge:hover {
  transform: scale(1.04);
}

.squad-level-tag {
  position: absolute;
  bottom: -6px;
  background: #111827;
  border: 1px solid #f59e0b;
  color: #fcd34d;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.squad-title-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.squad-headline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.squad-active-name {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.squad-clan-tag {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: #c4b5fd;
}

.squad-verified-tick {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: #0b0d14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.squad-active-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid var(--accent-iris);
  color: #c4b5fd;
  letter-spacing: 0.4px;
}

.squad-activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.squad-live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.squad-current-game-status {
  font-weight: 700;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 12px;
}

.squad-headline-motto {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
}

.squad-meta-divider {
  color: var(--text-muted);
  opacity: 0.5;
}

.squad-stats-chips-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 2;
}

.squad-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 17, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.squad-stat-chip .stat-dot.dot-online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.squad-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.squad-facepile-group {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.squad-facepile-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #141622;
  margin-left: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.squad-facepile-avatar:first-child {
  margin-left: 0;
}

.squad-facepile-avatar:hover {
  transform: translateY(-2px) scale(1.1);
  z-index: 5;
}

.facepile-online-ring {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid #141622;
}

.btn-squad-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--accent-iris), #5b21b6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.btn-squad-action-primary:hover {
  background: linear-gradient(135deg, var(--accent-iris-hover), #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
}

.btn-squad-action-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-squad-action-accent:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  transform: translateY(-1px);
}

.btn-squad-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-squad-action-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
 * 2. Squad Navigation Subnav Hub (5 Views)
 * ------------------------------------------------------------- */
.squad-subnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.squad-nav-tabs-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.squad-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.squad-nav-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.squad-nav-tab.active {
  background: rgba(124, 58, 237, 0.18);
  border-color: var(--accent-iris);
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.squad-tab-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--bg-surface-raised);
  padding: 1px 6px;
  border-radius: 9999px;
  color: var(--text-muted);
}

.squad-nav-tab.active .squad-tab-badge {
  background: var(--accent-iris);
  color: #fff;
}

.squad-tab-badge-glow {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  background: #ef4444;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: pulse-glow 1.5s infinite ease-in-out;
}

.squad-subnav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.squad-game-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-squad-game-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-squad-game-pill:hover {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}

.btn-squad-game-pill.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #0284c7;
  color: #38bdf8;
  font-weight: 700;
}

.pill-game-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* -------------------------------------------------------------
 * 3. Tab Panel Container Architecture
 * ------------------------------------------------------------- */
.squad-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  flex-shrink: 0;
}

/* -------------------------------------------------------------
 * 4. Hero Spotlight Player (Recently Shared / Top of the Week)
 * ------------------------------------------------------------- */
.squad-hero-spotlight {
  background: linear-gradient(180deg, #151724 0%, #0d0f16 100%);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hero-spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-tag-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------
 * 4. Squad Overview & Weekly Stats Strip (3-Card Header)
 * ------------------------------------------------------------- */
.squad-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .squad-stats-strip {
    grid-template-columns: 1fr;
  }
}

.squad-stat-card {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.squad-stat-card[role="button"] {
  cursor: pointer;
}

.squad-stat-card[role="button"]:hover {
  border-color: rgba(124, 58, 237, 0.4);
  background: var(--bg-surface-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.stat-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stat-category-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-pill-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.stat-pill-badge.badge-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.stat-pill-badge.badge-purple {
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.stat-pill-badge.badge-gold {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.stat-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.stat-card-subtext {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
}

.stat-session-facepile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.stat-facepile-avatars {
  display: flex;
  align-items: center;
}

.stat-face-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  border: 2px solid var(--bg-surface-raised);
  margin-left: -6px;
}

.stat-face-dot:first-child {
  margin-left: 0;
}

.stat-facepile-names {
  font-size: 11px;
  color: var(--text-muted);
}

.stat-storage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-storage-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #c4b5fd;
}

.stat-storage-track {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 9999px;
  overflow: hidden;
  margin: 4px 0 6px 0;
}

.stat-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%);
  border-radius: 9999px;
}

.stat-metrics-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.stat-metric-item {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.metric-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stat-contributor-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-contributor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.stat-contributor-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-contributor-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-contributor-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-contributor-stat {
  font-size: 11px;
  color: var(--text-muted);
}

.stat-contributor-top-clip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  background: var(--bg-surface);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 2px;
}

.top-clip-label {
  color: var(--text-muted);
  font-weight: 600;
}

.top-clip-title {
  color: #c4b5fd;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-action-link {
  font-size: 11px;
  font-weight: 600;
  color: #c4b5fd;
  transition: color var(--transition-fast);
}

.squad-stat-card:hover .stat-action-link {
  color: #ffffff;
}

.stat-storage-status {
  font-size: 10px;
  font-family: var(--font-mono);
  color: #10b981;
}
  border-radius: var(--radius-xs);
  padding: 2px;
  gap: 2px;
}

.btn-hero-view-tab {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-hero-view-tab:hover {
  color: #ffffff;
}

.btn-hero-view-tab.active {
  background: var(--bg-surface-raised);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Cinema Stage Player */
.hero-cinema-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  background: #06070a;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.85);
}

.hero-cinema-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
  transition: filter var(--transition-fast), transform 0.4s ease;
}

.hero-cinema-stage:hover .hero-cinema-art {
  filter: brightness(0.8);
  transform: scale(1.01);
}

.hero-cinema-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 22px;
  z-index: 10;
  pointer-events: none;
}

.hero-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-pov-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(11, 12, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

.hero-overlay-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-reactions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.hero-comments-count-tag {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.85);
}

.hero-play-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
}

.hero-play-center-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--accent-iris);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.6);
}

/* Teammate Perspectives Switcher Bar */
.teammate-pov-match-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface-raised);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.pov-match-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pov-match-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #c4b5fd;
  text-transform: uppercase;
}

.pov-match-count-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-mic);
  font-weight: 700;
}

.pov-match-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-pov-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-pov-switch:hover {
  border-color: var(--border-hover);
  color: #ffffff;
  background: var(--bg-surface-hover);
}

.btn-pov-switch.active {
  background: rgba(124, 58, 237, 0.28);
  border-color: var(--accent-iris);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.btn-pov-switch .pov-avatar-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.pov-active-tag {
  font-size: 9px;
  color: #c4b5fd;
  font-family: var(--font-mono);
}

.pov-switch-hint {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* -------------------------------------------------------------
 * 5. Shared Feed Grid & Clip Cards
 * ------------------------------------------------------------- */
.squad-feed-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.squad-feed-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.squad-member-chips-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.squad-filter-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.squad-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.squad-filter-chip:hover {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}

.squad-filter-chip.active {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--accent-iris);
  color: #c4b5fd;
}

.chip-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
}

.filter-count-bubble {
  font-size: 9px;
  font-family: var(--font-mono);
  background: var(--bg-surface-raised);
  padding: 0 5px;
  border-radius: 9999px;
  color: var(--text-muted);
}

.squad-filter-chip.active .filter-count-bubble {
  background: var(--accent-iris);
  color: #fff;
}

.vault-sort-pills-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.vault-sort-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.vault-sort-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-raised);
}

.vault-sort-btn.active {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.4);
}

.squad-clips-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.squad-clip-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.squad-clip-card:hover {
  border-color: var(--accent-iris);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 14px rgba(124, 58, 237, 0.2);
}

.squad-card-thumbnail-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0b0d14;
  overflow: hidden;
}

.squad-card-thumb-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.squad-clip-card:hover .squad-card-thumb-bg {
  transform: scale(1.04);
}

.squad-card-top-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}

.badge-multipov {
  background: rgba(124, 58, 237, 0.3) !important;
  border: 1px solid var(--accent-iris) !important;
  color: #c4b5fd !important;
}

.squad-card-duration-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(4, 5, 8, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  z-index: 5;
}

.squad-card-details {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.squad-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.squad-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.squad-author-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.squad-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.squad-author-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.squad-author-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.squad-author-role {
  font-size: 8.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}

.squad-post-time {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.squad-card-reactions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.squad-reactions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.squad-reaction-btn {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.squad-reaction-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--accent-iris);
  color: #ffffff;
  transform: scale(1.05);
}

/* -------------------------------------------------------------
 * 6. Multi-POV Synchronized Theater Stage
 * ------------------------------------------------------------- */
.squad-theater-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0b0d14;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

.theater-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.theater-heading-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theater-capsule-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
  letter-spacing: 0.5px;
}

.theater-title-text {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.theater-subtitle-text {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.theater-footer-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theater-layout-toggle-group {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 2px;
  gap: 2px;
}

.btn-theater-layout {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-theater-layout.active {
  background: var(--bg-surface-raised);
  color: #ffffff;
}

.btn-sync-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  background: var(--accent-iris);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-sync-play:hover {
  background: var(--accent-iris-hover);
  transform: scale(1.02);
}

.theater-viewports-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

@media (max-width: 900px) {
  .theater-viewports-row {
    grid-template-columns: 1fr;
  }
}

.theater-screen-card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
}

.theater-screen-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.theater-pov-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(8, 10, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(6px);
}

.theater-live-cam-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #38bdf8;
}

.theater-clock-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(8, 10, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #c4b5fd;
}

.theater-duration-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(4, 5, 8, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}

.theater-sync-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

.theater-sync-timeline-box {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
}

.timeline-event-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 5;
}

.marker-pin {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(124, 58, 237, 0.85);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.theater-sync-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
}

.sync-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-iris), #38bdf8);
  border-radius: 3px;
}

.sync-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent-iris);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.8);
}

.theater-sync-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.theater-sync-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.theater-actions-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -------------------------------------------------------------
 * 7. Match & Raid Sessions View
 * ------------------------------------------------------------- */
.squad-sessions-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sessions-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.sessions-main-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.sessions-sub-title {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.sessions-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #38bdf8;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.3);
  padding: 4px 10px;
  border-radius: 9999px;
}

.squad-session-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--transition-fast);
}

.squad-session-card:hover {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.session-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.session-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.session-game-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.session-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.session-status-pill {
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.session-status-pill.pill-live {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
}

.session-status-pill.pill-win {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  color: #4ade80;
}

.session-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 3px;
}

.session-angles-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.session-angle-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.session-angle-thumb:hover {
  transform: scale(1.02);
  border-color: var(--accent-iris);
}

.session-angle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.angle-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(8, 10, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}

.angle-time {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(8, 10, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #c4b5fd;
}

/* -------------------------------------------------------------
 * 8. Hall of Fame & MVP Leaderboard
 * ------------------------------------------------------------- */
.squad-leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.squad-mvp-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(20, 22, 34, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15);
}

.mvp-badge-crown {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 900;
  color: #fcd34d;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.mvp-content-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mvp-avatar-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mvp-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.mvp-tier-ribbon {
  position: absolute;
  bottom: -6px;
  background: #f59e0b;
  color: #0b0d14;
  font-size: 8.5px;
  font-family: var(--font-mono);
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 3px;
}

.mvp-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mvp-player-name {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}

.mvp-stats-summary {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.mvp-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mvp-pill {
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.squad-leaderboard-table-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.leaderboard-table-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
}

.squad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.squad-table th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}

.squad-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.table-teammate-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teammate-name {
  font-weight: 700;
  color: #fff;
}

.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 11px;
}

.medal-gold { background: #f59e0b; color: #0b0d14; }
.medal-silver { background: #94a3b8; color: #0b0d14; }
.medal-bronze { background: #b45309; color: #fff; }

.role-pill {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.role-owner { background: rgba(124, 58, 237, 0.2); border: 1px solid var(--accent-iris); color: #c4b5fd; }
.role-admin { background: rgba(2, 132, 199, 0.2); border: 1px solid #0284c7; color: #38bdf8; }
.role-member { background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.3); color: #cbd5e1; }
.role-fragger { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; color: #f87171; }
.role-igl { background: rgba(124, 58, 237, 0.2); border: 1px solid var(--accent-iris); color: #c4b5fd; }
.role-support { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; color: #6ee7b7; }
.role-lurker { background: rgba(148, 163, 184, 0.2); border: 1px solid #94a3b8; color: #cbd5e1; }

.activity-meter {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.activity-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-iris), #38bdf8);
  border-radius: 3px;
}

/* -------------------------------------------------------------
 * 9. Squad Roster & Member Directory
 * ------------------------------------------------------------- */
.squad-roster-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.roster-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.roster-main-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.roster-sub-title {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.squad-roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.roster-member-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all var(--transition-fast);
}

.roster-member-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.roster-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roster-avatar-box {
  position: relative;
}

.roster-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.roster-online-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-panel);
}

.roster-online-badge.online { background: #22c55e; }
.roster-online-badge.offline { background: #6b7280; }

.roster-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.roster-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.roster-handle {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.roster-card-status-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.roster-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

.roster-status-dot.offline {
  background: #6b7280;
}

.roster-specs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.roster-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spec-label {
  color: var(--text-muted);
}

.spec-val {
  color: var(--text-primary);
  font-weight: 600;
}