/* ==========================================================================
   MYT Video Capture Hub - Stylesheet
   Clean User Experience, Live Recording Scorecard, Authentic UDisc Cardcast
   ========================================================================== */

:root {
  --bg-primary: #0a0d14;
  --bg-surface: #111722;
  --bg-surface-elevated: #182232;
  --bg-surface-card: rgba(22, 31, 46, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: #3b82f6;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Accents */
  --accent-emerald: #10b981;
  --accent-cyan: #06b6d4;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --accent-purple: #8b5cf6;
  --accent-blue: #38bdf8;

  /* Authentic UDisc Score Colors */
  --score-ace: #ffd700;
  --score-eagle: #2563eb;
  --score-birdie: #06b6d4;
  --score-par: #94a3b8;
  --score-bogey: #f97316;
  --score-double: #ef4444;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  --transition-fast: 0.15s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Visibility Control: Hide Admin Elements when not in Admin Mode */
body:not(.admin-active) .admin-only {
  display: none !important;
}

/* Typography & Utility */
.mono { font-family: var(--font-mono); }
.text-emerald { color: var(--accent-emerald) !important; }
.text-cyan { color: var(--accent-cyan) !important; }
.text-amber { color: var(--accent-amber) !important; }
.text-red { color: var(--accent-red) !important; }
.text-dim { color: var(--text-dim) !important; }
.font-bold { font-weight: 700; }
.hidden { display: none !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-gap { display: flex; gap: 0.75rem; align-items: center; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.25rem; }
.mb-2 { margin-bottom: 0.75rem; }

.hub-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   Header: Centered Title + Admin Toggle
   ========================================================================== */
.station-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-main-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.header-spacer {
  width: 140px;
}
@media (max-width: 600px) {
  .header-spacer { display: none; }
}

.hub-logo-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.logo-rec-indicator {
  width: 12px;
  height: 12px;
  background-color: var(--accent-red);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
  animation: pulse-dot 1.8s infinite;
}

.logo-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffffff 40%, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-toggle-wrapper {
  width: 140px;
  display: flex;
  justify-content: flex-end;
}

.btn-admin-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-fast);
}
.btn-admin-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
body.admin-active .btn-admin-toggle {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--accent-blue);
  color: #bae6fd;
}

/* Admin Telemetry Bar */
.telemetry-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.45rem 1.25rem;
  background: rgba(10, 13, 20, 0.85);
  font-size: 0.78rem;
  border-bottom: 1px solid var(--border-subtle);
}

.telemetry-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.telem-label {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.7rem;
}
.telem-val {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Navigation Tabs */
.station-nav {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  background: var(--bg-surface);
}

.nav-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: var(--transition-fast);
}
.nav-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.nav-tab.active {
  color: #fff;
  background: var(--bg-surface-elevated);
  border-bottom: 2px solid var(--accent-emerald);
}

/* Main Layout */
.station-main {
  flex: 1;
  padding: 1.25rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   Tab 1: Simple User Capture & Live In-Record Scoring
   ========================================================================== */
.user-capture-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 840px;
  margin: 0 auto;
}

.player-select-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.select-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.player-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}
.player-dropdown {
  background: var(--bg-surface-elevated);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.player-dropdown:focus {
  border-color: var(--border-focus);
}

/* Viewfinder Screen */
.viewfinder-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

#viewfinderVideo, .fallback-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewfinder-overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.viewfinder-overlay.top-left {
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.viewfinder-overlay.top-right {
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.viewfinder-overlay.bottom-right {
  bottom: 14px;
  right: 14px;
}

.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}

.rec-blink {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-dot 1s infinite;
}

.timer-display {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.player-tag-badge, .auto-upload-badge {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.audio-meter-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.75);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}
.meter-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-dim);
}
.audio-meter-bar {
  width: 70px;
  height: 8px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}
.audio-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981 60%, #ef4444 100%);
  transition: width 0.08s ease;
}

/* Hero Record Button */
.simple-record-controls {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0;
}

.btn-hero {
  width: 100%;
  max-width: 440px;
  padding: 1.1rem 2rem;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  letter-spacing: 0.04em;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.btn-hero:active {
  transform: scale(0.98);
}
.btn-hero.btn-record {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}
.btn-hero.btn-record:hover {
  background: #dc2626;
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6);
}
.btn-hero.btn-stop {
  background: linear-gradient(135deg, #475569, #334155);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Integrated On-Screen Quick Scoring Card */
.field-quick-scorecard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.quick-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.75rem;
}

.hole-title-group {
  display: flex;
  flex-direction: column;
}

.quick-hole-badge {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-blue);
}

.quick-course-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.hole-quick-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-players-scoring-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quick-player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem;
}

.player-info-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #334155;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.player-name-main {
  font-size: 0.9rem;
  font-weight: 700;
}

.player-stepper-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-step-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-step-sm:hover { background: rgba(255, 255, 255, 0.15); }

.score-num-display {
  font-size: 1.15rem;
  font-weight: 800;
  min-width: 28px;
  text-align: center;
}

.score-badge-inline {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  min-width: 60px;
  text-align: center;
}

.slice-stream-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
}

.stream-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
}
.stream-dot-divider { color: var(--text-dim); }

/* ==========================================================================
   Tab 2: Clean Cardcast Scorecard
   ========================================================================== */
.udisc-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.udisc-official-header-card {
  background: #0d1117;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

.udisc-breadcrumbs {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.udisc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.udisc-course-name {
  font-size: 2rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.udisc-sub-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.udisc-layout-chip {
  font-weight: 700;
  color: #f1f5f9;
}
.udisc-global-avg { color: var(--text-muted); }

.udisc-date-location {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.loc-pin { color: var(--accent-red); }

.udisc-cardcast-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.cardcast-chip {
  background: #f97316;
  color: #fff;
  font-weight: 900;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.08em;
}

.udisc-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.reset-button-wrapper {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-danger-outline {
  background: transparent;
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--accent-red);
}

.btn-danger-solid {
  background: var(--accent-red);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-danger-solid:hover { background: #dc2626; }

/* Hole Navigator Carousel */
.hole-nav-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hole-nav-arrow {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.hole-nav-arrow:hover {
  background: var(--bg-surface-elevated);
  color: #fff;
}

.hole-chips-scroll {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  flex: 1;
}

.hole-chip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-width: 52px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.hole-chip-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.hole-chip-btn.active {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-blue);
}

.chip-hole-num { font-size: 0.78rem; font-weight: 700; }
.chip-hole-par { font-size: 0.65rem; color: var(--text-dim); }
.chip-hole-score {
  font-size: 0.8rem;
  font-weight: 800;
  margin-top: 0.15rem;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* Hole Scoring Card */
.hole-scoring-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.hole-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.hole-big-badge {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-blue);
}

.hole-param-editor {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Player Scoring Rows */
.players-score-rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.player-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.15rem;
}

.player-meta-block {
  display: flex;
  flex-direction: column;
}
.player-name-text { font-size: 0.95rem; font-weight: 700; }
.player-udisc-handle { font-size: 0.75rem; color: var(--text-dim); }

.player-strokes-stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-step:hover { background: rgba(255, 255, 255, 0.15); }

.stroke-val {
  font-size: 1.35rem;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
}

/* Cardcast Table Styling (Without Distance) */
.udisc-table-container {
  background: #090d14;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.table-responsive { overflow-x: auto; }

.udisc-cardcast-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.udisc-cardcast-table th {
  padding: 0.65rem 0.5rem;
  font-weight: 700;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.3;
}

.th-hole-header {
  min-width: 48px;
}
.hole-par-sub {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
  margin-top: 0.1rem;
}

.th-pos { width: 50px; text-align: left; }
.th-player { text-align: left; min-width: 160px; }
.th-total { min-width: 65px; text-align: center; }

.udisc-cardcast-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.td-pos-val {
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
}

.td-player-cell { text-align: left; }

.player-cardcast-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.td-total-cell {
  font-weight: 800;
  font-size: 0.95rem;
}

.total-diff-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Disc Golf Score Badges */
.score-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9rem;
}
.score-empty {
  color: var(--text-dim);
  font-size: 1.1rem;
}

.score-ace { background: rgba(255, 215, 0, 0.25); color: var(--score-ace); border: 2px solid var(--score-ace); }
.score-eagle { background: rgba(37, 99, 235, 0.25); color: var(--score-eagle); border: 2px solid var(--score-eagle); }
.score-birdie { background: rgba(6, 182, 212, 0.25); color: var(--score-birdie); border: 1px solid var(--score-birdie); }
.score-par { background: rgba(148, 163, 184, 0.15); color: #f1f5f9; }
.score-bogey { background: rgba(249, 115, 22, 0.25); color: var(--score-bogey); border: 1px solid var(--score-bogey); border-radius: 4px; }
.score-double { background: rgba(239, 68, 68, 0.25); color: var(--score-double); border: 2px solid var(--score-double); border-radius: 4px; }

.chip-hole-score.score-ace,
.chip-hole-score.score-eagle,
.chip-hole-score.score-birdie,
.chip-hole-score.score-par,
.chip-hole-score.score-bogey,
.chip-hole-score.score-double {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ==========================================================================
   Admin Studio & Clickable Storage Explorer
   ========================================================================== */
.studio-container, .storage-container, .roster-container, .quota-container, .hub-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Clickable rows for storage explorer to open file in desktop OS */
.storage-table-clickable tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
.storage-table-clickable tbody tr:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

.timeline-overlap-chart {
  background: #080c12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.clip-track-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
}
.clip-track-label {
  width: 220px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-track-bar-container {
  flex: 1;
  height: 24px;
  background: #1e293b;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.clip-span {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.clip-span.clip-a { background: rgba(6, 182, 212, 0.7); }
.clip-span.clip-b { background: rgba(16, 185, 129, 0.7); }

.overlap-zone-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(245, 158, 11, 0.35);
  border-left: 2px dashed var(--accent-amber);
  border-right: 2px dashed var(--accent-amber);
}

/* Row 1: Source Streams Preview Strip (Supports infinite feeds) */
.studio-sources-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.source-feed-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.source-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}
.source-feed-title { font-weight: 700; }
.source-feed-offset { font-size: 0.72rem; }

.source-video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.source-preview-video { width: 100%; height: 100%; object-fit: cover; }
.source-timecode {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.68rem;
}

/* Interactive Camera Angle Selector Bar */
.angle-selector-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.angle-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.angle-selector-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.angle-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-xs-link {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.btn-xs-link:hover { text-decoration: underline; color: #fff; }

.angle-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.angle-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  color: var(--text-muted);
}
.angle-toggle-chip:hover {
  border-color: rgba(56, 189, 248, 0.5);
  color: #fff;
}
.angle-toggle-chip.selected {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}
.angle-toggle-chip input[type="checkbox"] {
  cursor: pointer;
  accent-color: #38bdf8;
}

/* Row 2: Master Multi-Angle Live Mixer (Big Center Screen) */
.master-mixer-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mixer-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mixer-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mixer-mode-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mixer-mode-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-right: 0.25rem;
}

.btn-mixer-mode {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-mixer-mode:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-mixer-mode.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}

.mixer-theater-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  margin: 0 auto;
}

.mixer-video-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.mixer-stage-pane {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  transition: opacity 0.3s ease;
}

.mixer-stage-pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pane-camera-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 3;
}

/* Dynamic N-Angle Responsive Multi-Grid Layouts */
.mixer-video-stage.mode-grid.grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.mixer-video-stage.mode-grid.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 2px;
}
.mixer-video-stage.mode-grid.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.mixer-video-stage.mode-grid.grid-3 .mixer-stage-pane:first-child {
  grid-column: 1 / -1;
}
.mixer-video-stage.mode-grid.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.mixer-video-stage.mode-grid.grid-5,
.mixer-video-stage.mode-grid.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
.mixer-video-stage.mode-grid.grid-7,
.mixer-video-stage.mode-grid.grid-8,
.mixer-video-stage.mode-grid.grid-9,
.mixer-video-stage.mode-grid.grid-10 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}

/* Display Mode: Picture-in-Picture (PiP) */
.mixer-video-stage.mode-pip .mixer-stage-pane:first-child {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 1;
  z-index: 1;
}
.mixer-video-stage.mode-pip .mixer-stage-pane:not(:first-child) {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 2px solid #10b981;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
  z-index: 5;
  opacity: 1;
}

/* Display Mode: Auto-Director Cuts */
.mixer-video-stage.mode-director-cut .mixer-stage-pane {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.mixer-video-stage.mode-director-cut .mixer-stage-pane.active-director {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Display Mode: Ghost Overlay */
.mixer-video-stage.mode-ghost-overlay .mixer-stage-pane {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.55;
  mix-blend-mode: lighten;
}
.mixer-video-stage.mode-ghost-overlay .mixer-stage-pane:first-child {
  opacity: 0.85;
}

/* Display Mode: Solo */
.mixer-video-stage.mode-solo .mixer-stage-pane {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
}
.mixer-video-stage.mode-solo .mixer-stage-pane.active-solo {
  opacity: 1;
  pointer-events: auto;
}

.mixer-burnin-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  z-index: 10;
}
.mixer-timecode-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  z-index: 10;
}

.master-timeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.timeline-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.transport-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.speed-selector {
  display: flex;
  gap: 0.2rem;
  background: var(--bg-surface-elevated);
  padding: 0.2rem;
  border-radius: var(--radius-sm);
}
.speed-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.speed-btn.active {
  background: var(--border-subtle);
  color: #fff;
}
.scrub-container { width: 100%; margin-bottom: 0.5rem; }
.scrub-slider { width: 100%; height: 8px; background: #1e293b; border-radius: 4px; outline: none; cursor: pointer; }

/* Buttons and Cards */
.card-section, .quota-card, .safety-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.section-title { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.section-subtext { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

.btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: var(--transition-fast);
}
.btn-primary { background: var(--accent-blue); color: #000; font-weight: 700; }
.btn-primary:hover { background: #7dd3fc; }
.btn-accent { background: var(--accent-cyan); color: #000; font-weight: 700; }
.btn-accent:hover { background: #22d3ee; }
.btn-secondary { background: rgba(255, 255, 255, 0.08); color: #fff; }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.15); }
.btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.7rem; }

/* Tables */
.clients-table, .quota-table, .queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.clients-table th, .clients-table td,
.quota-table th, .quota-table td,
.queue-table th, .queue-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.clients-table th { color: var(--text-dim); font-weight: 700; font-size: 0.72rem; }

.badge-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}
.badge-status.online { background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); }
.badge-status.completed { background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); }
.badge-status.queued { background: rgba(56, 189, 248, 0.2); color: var(--accent-blue); }

.lan-urls-box, .daemon-terminal {
  background: #080c12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  line-height: 1.6;
}
.lan-urls-box { color: var(--accent-cyan); }

.quota-cards-grid, .network-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .quota-cards-grid, .network-cards-grid { grid-template-columns: 1fr; }
}

.val-remaining { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.quota-meter-bar { height: 10px; background: #1e293b; border-radius: 5px; overflow: hidden; margin: 0.75rem 0; }
.quota-meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent-emerald), var(--accent-amber)); }

.hub-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.hub-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hub-stat-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.stat-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stat-card-icon { font-size: 1.1rem; }
.stat-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.stat-main-val {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-sub-val {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.sessions-grid, .roster-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.session-card, .roster-player-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.session-card.active-card {
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.btn-delete-session {
  background: transparent;
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-delete-session:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 460px;
  padding: 1.5rem;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-close-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; }
.modal-body { display: flex; flex-direction: column; gap: 0.85rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.form-input, .form-select, .form-select-sm, .form-input-sm {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
}
.form-select-sm, .form-input-sm { padding: 0.3rem 0.5rem; font-size: 0.78rem; }

.avatar-select-strip {
  display: flex;
  gap: 0.5rem;
}
.avatar-option {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
}
.avatar-option.selected {
  border-color: var(--accent-blue);
  background: #334155;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ==========================================================================
   Outdoor High-Contrast Large Thumb Shutter & Field Ergonomics
   ========================================================================== */
.outdoor-shutter-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.25rem 0 1rem 0;
  gap: 0.5rem;
}

.shutter-button {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 4px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shutter-button:active {
  transform: scale(0.92);
}

.shutter-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ef4444;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85);
}

.shutter-button.recording {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.2);
}

.shutter-button.recording .shutter-circle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 1);
  animation: pulse-shutter 1.5s infinite;
}

@keyframes pulse-shutter {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

.shutter-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f87171;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.shutter-button.recording + .shutter-label {
  color: #ef4444;
}

/* Wake Lock & Offline Status Badges */
.wake-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
  backdrop-filter: blur(4px);
  margin-top: 0.35rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.wake-lock-badge.inactive {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
}

.offline-buffer-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.35);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  backdrop-filter: blur(4px);
  margin-top: 0.35rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  animation: pulse-offline 2s infinite;
}

@keyframes pulse-offline {
  0% { opacity: 0.9; }
  50% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

.audio-meter-container.mic-disabled {
  opacity: 0.5;
  filter: grayscale(1);
}

/* ==========================================================================
   QR Code Tab & Mobile Quick-Join
   ========================================================================== */
.qr-join-container {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem 1rem;
}

.qr-card {
  max-width: 820px;
  width: 100%;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.qr-card-header {
  margin-bottom: 1.75rem;
}

.qr-badge {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  margin-bottom: 0.6rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.qr-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
}

.qr-subtitle {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}

.qr-display-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 720px) {
  .qr-display-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.qr-code-wrapper {
  background: #ffffff;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.qr-code-image {
  width: 220px;
  height: 220px;
  display: block;
}

.qr-scan-hint {
  margin-top: 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0f172a;
  text-align: center;
}

.qr-info-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.qr-column-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.qr-endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qr-endpoint-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface-elevated, #161f30);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  min-width: 0;
}

.endpoint-tag {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 0;
}

.endpoint-url {
  font-size: 0.88rem;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.endpoint-url:hover {
  text-decoration: underline;
  color: #7dd3fc;
}

.btn-copy-link {
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}

.qr-tips-box {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 6px;
  padding: 1rem;
}

.qr-tips-box h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.qr-tips-box ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.qr-tips-box li {
  margin-bottom: 0.35rem;
}

.native-only { display: none; }
body.native-app .native-only { display: inline-flex; }

.hub-connect-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 18, 0.92);
}

.hub-connect-panel[hidden] { display: none; }

.hub-connect-card {
  width: min(440px, 100%);
  background: #121a27;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
}

.hub-connect-card h2 { margin: 0 0 8px; }
.hub-connect-card p { color: #94a3b8; margin: 0 0 16px; }

.hub-connect-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.hub-connect-choice { justify-content: flex-start; font-family: var(--font-mono); }

.hub-connect-error { color: #f87171; }