:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --text: #10243e;
  --accent: #0b5ed7;
  --accent-strong: #0846a6;
  --danger: #c73636;
  --muted: #e3e8ef;
  --shadow: 0 6px 18px rgba(16, 36, 62, 0.08);
  --season-desktop-max-width: 1280px;
  --stats-desktop-max-width: 1280px;
  --staging-banner-height: 0px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  background-image:
    linear-gradient(135deg, rgba(9, 12, 18, 0.2), rgba(8, 10, 14, 0.45)),
    url("assets/fondecran8.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
}

body.dark-mode {
  --bg: #111111;
  --panel: #1a1a1a;
  --text: #e8e8e8;
  --accent: #6f6f6f;
  --accent-strong: #8a8a8a;
  --danger: #b74949;
  --muted: #2a2a2a;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  background-image:
    linear-gradient(140deg, rgba(6, 7, 9, 0.74), rgba(8, 9, 12, 0.84)),
    url("assets/fondecran8.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
}

body.staging-environment {
  padding-top: var(--staging-banner-height);
}

.staging-environment-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #d9480f, #b02a2a);
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(0.74rem, 1.75vw, 0.92rem);
  line-height: 1.2;
  text-align: center;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

body.staging-environment .topbar {
  top: var(--staging-banner-height);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #1f2328;
  color: #f8fbff;
  padding: 0.9rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.topbar-logo {
  width: 210px;
  height: 82px;
  object-fit: contain;
  flex-shrink: 0;
  cursor: pointer;
  transform: scale(1.14);
  transform-origin: center center;
}

.topbar-actions {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.35rem;
  max-width: min(72vw, 980px);
}

.topbar-actions .lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-actions .btn {
  background: #2b3138;
  color: #d7dee8;
  border: 1px solid #3a424c;
}

.topbar-actions .btn:hover {
  background: #353c45;
}

.topbar-actions .btn-danger {
  background: #4b2f33;
  border-color: #5c3a3f;
  color: #f0d9dc;
}

.topbar-actions .btn-danger:hover {
  background: #5a373c;
}

.topbar-actions .lang-toggle-btn {
  min-height: auto;
  padding: 0.33rem 0.56rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
}

.header-menu {
  position: relative;
  z-index: 50;
}

.header-menu.is-open {
  z-index: 140;
}

.header-menu-trigger {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.header-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 220px;
  background: #1f2328;
  border: 1px solid #2d3440;
  border-radius: 10px;
  padding: 0.5rem;
  display: none;
  gap: 0.45rem;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  z-index: 150;
  max-height: min(72vh, 520px);
  overflow: auto;
}

.header-menu.is-open > .header-menu-panel {
  display: flex;
}

.header-menu-panel .btn {
  width: 100%;
  text-align: left;
  background: #2b3138;
  color: #d7dee8;
  border: 1px solid #3a424c;
}

.header-menu-panel .btn:hover {
  background: #353c45;
}

.header-menu-panel .btn.menu-icon-option {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.header-menu-panel .menu-link-form {
  margin: 0;
  width: 100%;
}

.training-book-mount {
  width: 100%;
  min-height: calc(100dvh - 82px);
  border: 0;
  border-radius: 0;
  background: #101010;
  overflow: hidden;
}

.header-menu-panel a.btn.menu-icon-option,
.header-menu-panel a.btn.menu-icon-option:link,
.header-menu-panel a.btn.menu-icon-option:visited,
.header-menu-panel a.btn.menu-icon-option:hover,
.header-menu-panel a.btn.menu-icon-option:focus,
.header-menu-panel a.btn.menu-icon-option:active {
  text-decoration: none;
  color: inherit;
  font: inherit;
}

.menu-option-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
  flex: 0 0 auto;
}

.menu-option-icon-small {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.header-menu-separator {
  height: 1px;
  margin: 0.15rem 0;
  background: #3a424f;
}

.account-menu-panel {
  min-width: min(280px, calc(100vw - 1rem));
  width: min(320px, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
}

.account-name-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #eef3fb;
  overflow-wrap: anywhere;
}

.account-status-text {
  margin: 0;
  font-size: 0.86rem;
  color: #d9e1ec;
  overflow-wrap: anywhere;
}

.account-plan-row {
  margin: 0;
  font-size: 0.82rem;
  color: #c5d0e0;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan-badge.plan-free {
  background: #3a424f;
  color: #e8eef8;
}

.plan-badge.plan-paid {
  background: #0f7b35;
  color: #e7ffe8;
}

.account-message-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #b6c5d9;
}

.account-menu-panel .btn.btn-primary {
  background: #0b5ed7;
  color: #ffffff;
  border-color: #0b5ed7;
}

.account-menu-panel .btn.btn-primary:hover:enabled {
  background: #0846a6;
}

@media (min-width: 768px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: initial;
    background: rgba(248, 248, 251, 0.88);
    color: #1f2328;
    padding: 0.38rem 0.75rem;
    border-bottom: 1px solid #d4d8df;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }

  .topbar-brand {
    grid-column: 2;
    justify-self: center;
    min-width: auto;
  }

  .topbar-logo {
    width: 158px;
    height: 56px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    position: static;
    width: 100%;
    transform: none;
    top: auto;
    right: auto;
    gap: 0.2rem;
    align-items: center;
    pointer-events: none;
    max-width: none;
    justify-content: flex-start;
  }

  .topbar-actions > * {
    pointer-events: auto;
  }

  .topbar-actions .header-menu > .header-menu-trigger.btn {
    background: transparent;
    color: #1f2328;
    border: 1px solid transparent;
    border-radius: 7px;
    min-height: auto;
    padding: 0.3rem 0.58rem;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 500;
    box-shadow: none;
  }

  .topbar-actions .header-menu > .header-menu-trigger.btn:hover {
    background: #e7ebf1;
    border-color: #d5dae3;
  }

  .topbar-actions .header-menu.is-open > .header-menu-trigger.btn {
    background: #dbe2ec;
    border-color: #cdd6e3;
  }

  .topbar-actions #accountMenu {
    margin-left: auto;
  }

  .topbar-actions #accountMenu .header-menu-panel {
    left: auto;
    right: 0;
  }

  .topbar-actions .lang-toggle-btn {
    background: transparent;
    color: #1f2328;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
  }

  .topbar-actions .lang-toggle-btn:hover {
    background: #e7ebf1;
    border-color: #d5dae3;
  }

  .header-menu-panel {
    left: 0;
    right: auto;
    top: calc(100% + 0.2rem);
    min-width: 230px;
    border-radius: 10px;
    padding: 0.34rem;
    gap: 0.16rem;
    border: 1px solid #cfd5de;
    background: #fbfcff;
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.14);
  }

  .header-menu-panel .btn {
    min-height: auto;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #1c2430;
    font-size: 0.84rem;
    padding: 0.38rem 0.56rem;
    box-shadow: none;
  }

  .header-menu-panel .btn:hover {
    background: #e8edf6;
    border-color: #d2daea;
  }

  .header-menu-panel .btn.btn-danger {
    color: #ad2430;
  }

  .header-menu-separator {
    margin: 0.2rem 0.05rem;
    background: #d8deea;
  }

  .account-status-text {
    color: #243247;
  }

  .account-name-text {
    color: #0e1d30;
  }

  .account-plan-row {
    color: #32445e;
  }

  .account-message-text {
    color: #556884;
  }

  .account-menu-panel .btn.btn-primary {
    background: #0b5ed7;
    color: #ffffff;
    border-color: #084cb2;
  }

  .account-menu-panel .btn.btn-primary:hover:enabled {
    background: #0846a6;
    border-color: #063985;
  }
}

.video-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.video-analysis-title-block {
  flex: 1 1 auto;
  text-align: center;
}

.video-keyboard-help-btn {
  align-self: flex-start;
}

.video-analysis-layout {

  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.video-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.video-report-header > div:first-child {
  flex: 1 1 auto;
}

.video-report-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.video-report-panel {
  border: 1px solid #d7e0ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  padding: 0.9rem;
}

.video-report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
  max-height: min(48vh, 620px);
  overflow: auto;
}

.video-report-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.video-report-stage {
  min-height: 320px;
}

.video-report-video-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.video-report-video-tools .btn {
  padding: 0.3rem 0.58rem;
}

.video-report-draw-toolbar {
  margin-top: 0.6rem;
}

.video-report-saved-timelines {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.5rem;
}

.video-report-saved-timelines #videoReportSavedTimelineSelect {
  max-width: 280px;
}

.video-report-saved-timelines #videoReportTimelineNameInput {
  max-width: 280px;
}

.video-report-draw-tool-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.video-report-draw-tool-field span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #2a3d55;
}

.video-report-draw-tool-field select {
  min-width: 112px;
  padding: 0.24rem 0.34rem;
  border-radius: 8px;
  border: 1px solid #cfd9e6;
  background: #ffffff;
}

.video-report-draw-tool-field input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #cfd9e6;
  background: #ffffff;
}

.video-report-draw-layer {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
}

.video-report-draw-layer.is-enabled {
  pointer-events: auto;
}

.video-report-trim-overlay {
  position: absolute;
  left: 0.65rem;
  top: 0.65rem;
  z-index: 4;
  display: inline-flex;
  gap: 0.42rem;
  pointer-events: none;
}

.video-report-trim-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 196, 230, 0.55);
  background: rgba(10, 20, 34, 0.78);
  color: #f1f7ff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.video-report-trim-chip.is-active {
  border-color: rgba(129, 192, 255, 0.95);
  background: rgba(10, 47, 89, 0.88);
  box-shadow: 0 0 0 1px rgba(129, 192, 255, 0.35);
}

.video-report-event-item {
  margin: 0;
}

.video-report-event-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #fff;
  cursor: grab;
  user-select: none;
}

.video-report-event-block:active {
  cursor: grabbing;
}

.video-report-event-block.is-timeline {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

.video-report-event-main {
  display: grid;
  gap: 0.15rem;
}

.video-report-event-main strong {
  color: #0d2f5c;
}

.video-report-event-main span {
  color: #1c2c40;
  font-weight: 600;
}

.video-report-event-main small {
  color: #5d6d84;
  font-size: 0.78rem;
}

.video-report-event-actions {
  display: flex;
  align-items: flex-start;
}

.video-report-trim-handle {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 9px;
  border: 1px solid rgba(14, 36, 61, 0.34);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(212, 224, 239, 0.94));
  z-index: 2;
  padding: 0;
  cursor: ew-resize;
}

.video-report-trim-handle.is-start {
  left: 3px;
}

.video-report-trim-handle.is-end {
  right: 3px;
}

.video-report-event-block.is-trimming {
  box-shadow: 0 0 0 2px rgba(11, 94, 215, 0.34);
}

.video-report-event-block.is-trimming .video-report-trim-handle {
  border-color: rgba(11, 94, 215, 0.7);
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.98), rgba(188, 215, 249, 0.95));
}

.video-report-trim-feedback {
  position: absolute;
  top: -1.6rem;
  transform: translateX(-50%);
  background: rgba(12, 29, 54, 0.96);
  color: #f7fbff;
  border: 1px solid rgba(106, 167, 246, 0.55);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.video-report-timeline-list {
  border: 1px dashed #d0dceb;
  border-radius: 12px;
  padding: 0.55rem;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.8), rgba(245, 249, 255, 0.95));
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 108px;
  max-height: none;
  white-space: nowrap;
}

.video-report-timeline-list.is-drop-active {
  border-color: #6fa3e6;
  background: linear-gradient(180deg, rgba(234, 243, 255, 0.82), rgba(241, 248, 255, 0.96));
}

.video-report-timeline-list .video-report-event-item {
  flex: 0 0 280px;
  max-width: 280px;
}

.video-report-event-block.is-drop-before {
  box-shadow: inset 3px 0 0 #0b5ed7;
}

.video-report-event-block.is-drop-after {
  box-shadow: inset -3px 0 0 #0b5ed7;
}

.video-report-timeline-panel {
  margin-top: 0.1rem;
}

.video-report-timeline-transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.video-report-timeline-transport input[type="range"] {
  width: 100%;
}

.video-stage-card,
.video-sidebar-card {
  border: 1px solid #d7e0ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  padding: 0.9rem;
}

.video-stage-card {
  position: relative;
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
}

.video-exit-fs-btn {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  left: max(0.85rem, env(safe-area-inset-left));
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(24, 30, 38, 0.75);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.video-exit-fs-btn:hover:enabled {
  background: rgba(34, 40, 48, 0.9);
}

.video-fs-events-panel {
  --video-fs-panel-alpha: 0.34;
  --video-fs-panel-alpha-strong: 0.44;
  --video-fs-item-alpha: 0.46;
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 5;
  width: min(430px, calc(100vw - 1.2rem));
  max-height: calc(100dvh - 2.2rem);
  padding: 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(168, 196, 230, 0.24);
  background: linear-gradient(
    160deg,
    rgb(10 16 24 / var(--video-fs-panel-alpha)),
    rgb(6 10 16 / var(--video-fs-panel-alpha-strong))
  );
  backdrop-filter: blur(13px) saturate(130%);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.video-fs-events-header {
  cursor: move;
  user-select: none;
}

.video-fs-events-panel .video-events-header h3 {
  color: #f4f7fb;
}

.video-fs-events-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.video-fs-events-tools .field {
  margin-bottom: 0;
}

.video-fs-events-tools .field span {
  color: #dbe4f1;
  font-size: 0.78rem;
}

.video-fs-events-tools .field select,
.video-fs-events-tools .field input[type="range"] {
  background: rgb(13 21 32 / 0.52);
  border: 1px solid rgb(168 196 230 / 0.24);
  color: #f1f7ff;
}

.video-fs-opacity-field {
  grid-column: 1 / -1;
}

.video-fs-events-panel .shot-hint {
  color: #dbe4f1;
}

.video-fs-events-panel .video-events-list {
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 0.1rem;
}

.video-fs-events-panel .video-event-item {
  background: rgb(9 15 23 / var(--video-fs-item-alpha));
  border: 1px solid rgba(169, 196, 228, 0.18);
}

.video-fs-events-panel .video-event-jump {
  color: #eaf1fb;
}

.video-fs-events-panel .video-event-jump small {
  color: #b9c8dc;
}

.video-fs-events-panel .video-event-jump strong {
  color: #8ac6ff;
}

.video-fs-events-panel .video-event-actions .btn {
  background: rgba(22, 30, 41, 0.72) !important;
  color: #f2f7ff !important;
  border: 1px solid rgba(162, 188, 218, 0.26) !important;
}

.video-fs-events-header .history-icon-btn {
  background: rgba(22, 30, 41, 0.72) !important;
  color: #f2f7ff !important;
  border: 1px solid rgba(162, 188, 218, 0.26) !important;
}

.video-fs-events-header .history-icon-btn:hover:enabled {
  background: rgba(31, 40, 53, 0.82) !important;
}

.video-fs-events-panel .video-event-actions .btn:hover:enabled {
  background: rgba(31, 40, 53, 0.82) !important;
}

.video-stage-card:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .video-fs-events-panel {
  display: none !important;
}

body.video-pseudo-fullscreen {
  overflow: hidden;
}

.video-sidebar-card {
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
}

.video-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 14px;
  background: #11181f;
  min-height: 280px;
  min-width: 0;
}

.video-stage:fullscreen {
  border-radius: 0;
  padding: 0;
  background: #000;
}

.video-controls-bar {
  --video-controls-scale: 1;
  margin-top: 0.8rem;
}

.video-controls-seek {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.video-stage-card:fullscreen,
.video-stage-card:-webkit-full-screen {
  background: #000;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
}

.video-stage-card.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border: none;
}

.video-stage-card:fullscreen .video-stage,
.video-stage-card:-webkit-full-screen .video-stage {
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
}

.video-stage-card.is-pseudo-fullscreen .video-stage {
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
}

.analysis-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(82vh, 1100px);
  object-fit: contain;
  background: #11181f;
}

.video-stage-card:fullscreen .analysis-video,
.video-stage-card:-webkit-full-screen .analysis-video {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

.video-stage-card.is-pseudo-fullscreen .analysis-video {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

.video-overlay-controls {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.video-stage-card:fullscreen .video-controls-bar,
.video-stage-card:-webkit-full-screen .video-controls-bar,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(700px, calc(100vw - 1.2rem));
  max-height: calc(100vh - 1.2rem);
  max-height: calc(100dvh - 1.2rem);
  margin-top: 0;
  padding: 0.35rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(8, 12, 18, 0.26);
  backdrop-filter: blur(8px);
  z-index: 3;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.video-stage-card:fullscreen .video-controls-bar.is-auto-hidden,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-auto-hidden,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-auto-hidden {
  opacity: 0;
  pointer-events: none;
}

.video-stage-card:fullscreen .video-controls-bar.is-resizing,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resizing,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resizing {
  cursor: ew-resize;
}

.video-stage-card:fullscreen .video-controls-bar.is-resize-hover,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resize-hover,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resize-hover {
  cursor: ew-resize;
  border-color: rgba(255, 255, 255, 0.42);
}

.video-stage-card:fullscreen .video-controls-bar.is-resizing *,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resizing *,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resizing *,
.video-stage-card:fullscreen .video-controls-bar.is-resize-hover *,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resize-hover *,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resize-hover * {
  cursor: ew-resize !important;
}

.video-stage-card:fullscreen .video-flow-status,
.video-stage-card:-webkit-full-screen .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-flow-status {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.video-stage-card:fullscreen .video-controls-bar.is-dragging .video-flow-status,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-dragging .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-dragging .video-flow-status {
  cursor: grabbing;
}

.video-stage-card:fullscreen .video-controls-seek,
.video-stage-card:-webkit-full-screen .video-controls-seek,
.video-stage-card.is-pseudo-fullscreen .video-controls-seek {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(0.45rem * var(--video-controls-scale));
}

#videoFsGeneralActionsToggleWrap {
  display: none;
}

#videoFsEventsToggleWrap {
  display: none;
}

.video-stage-card:fullscreen .video-controls-seek,
.video-stage-card:-webkit-full-screen .video-controls-seek,
.video-stage-card.is-pseudo-fullscreen .video-controls-seek {
  position: relative;
}

.video-stage-card:fullscreen #videoFsGeneralActionsToggleWrap,
.video-stage-card:-webkit-full-screen #videoFsGeneralActionsToggleWrap,
.video-stage-card.is-pseudo-fullscreen #videoFsGeneralActionsToggleWrap {
  display: inline-flex;
  position: absolute;
  left: calc(0.55rem * var(--video-controls-scale));
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
}

.video-stage-card:fullscreen #videoFsEventsToggleWrap,
.video-stage-card:-webkit-full-screen #videoFsEventsToggleWrap,
.video-stage-card.is-pseudo-fullscreen #videoFsEventsToggleWrap {
  display: inline-flex;
  position: absolute;
  right: calc(0.55rem * var(--video-controls-scale));
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
}

.video-stage-card:fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-label,
.video-stage-card:-webkit-full-screen #videoFsGeneralActionsToggleWrap .season-system-toggle-label,
.video-stage-card.is-pseudo-fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-label,
.video-stage-card:fullscreen #videoFsEventsToggleWrap .season-system-toggle-label,
.video-stage-card:-webkit-full-screen #videoFsEventsToggleWrap .season-system-toggle-label,
.video-stage-card.is-pseudo-fullscreen #videoFsEventsToggleWrap .season-system-toggle-label {
  color: #b9c6d8;
  font-size: calc(0.75rem * var(--video-controls-scale));
}

.video-stage-card:fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider,
.video-stage-card:-webkit-full-screen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider,
.video-stage-card.is-pseudo-fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider,
.video-stage-card:fullscreen #videoFsEventsToggleWrap .season-system-toggle-slider,
.video-stage-card:-webkit-full-screen #videoFsEventsToggleWrap .season-system-toggle-slider,
.video-stage-card.is-pseudo-fullscreen #videoFsEventsToggleWrap .season-system-toggle-slider {
  background: rgba(176, 192, 214, 0.26);
}

.video-stage-card:fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider::after,
.video-stage-card:-webkit-full-screen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider::after,
.video-stage-card.is-pseudo-fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-slider::after,
.video-stage-card:fullscreen #videoFsEventsToggleWrap .season-system-toggle-slider::after,
.video-stage-card:-webkit-full-screen #videoFsEventsToggleWrap .season-system-toggle-slider::after,
.video-stage-card.is-pseudo-fullscreen #videoFsEventsToggleWrap .season-system-toggle-slider::after {
  background: #edf2f8;
}

.video-stage-card:fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider,
.video-stage-card:-webkit-full-screen #videoFsGeneralActionsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider,
.video-stage-card.is-pseudo-fullscreen #videoFsGeneralActionsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider,
.video-stage-card:fullscreen #videoFsEventsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider,
.video-stage-card:-webkit-full-screen #videoFsEventsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider,
.video-stage-card.is-pseudo-fullscreen #videoFsEventsToggleWrap .season-system-toggle-switch input:checked + .season-system-toggle-slider {
  background: rgba(108, 139, 176, 0.65);
}

.video-stage-card:fullscreen .video-controls-seek .btn,
.video-stage-card:-webkit-full-screen .video-controls-seek .btn,
.video-stage-card.is-pseudo-fullscreen .video-controls-seek .btn,
.video-stage-card:fullscreen #videoFsBack5Btn,
.video-stage-card:fullscreen #videoFsForward5Btn,
.video-stage-card:fullscreen #videoFsLineupBtn,
.video-stage-card:-webkit-full-screen #videoFsBack5Btn,
.video-stage-card:-webkit-full-screen #videoFsForward5Btn,
.video-stage-card:-webkit-full-screen #videoFsLineupBtn,
.video-stage-card.is-pseudo-fullscreen #videoFsBack5Btn,
.video-stage-card.is-pseudo-fullscreen #videoFsForward5Btn,
.video-stage-card.is-pseudo-fullscreen #videoFsLineupBtn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: calc(0.4rem * var(--video-controls-scale)) calc(0.55rem * var(--video-controls-scale)) !important;
  font-size: calc(0.72rem * var(--video-controls-scale)) !important;
  border-radius: 9px;
  min-width: calc(52px * var(--video-controls-scale)) !important;
  min-height: calc(36px * var(--video-controls-scale)) !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.video-stage-card:fullscreen .video-overlay-controls,
.video-stage-card:-webkit-full-screen .video-overlay-controls,
.video-stage-card.is-pseudo-fullscreen .video-overlay-controls {
  width: 100%;
  max-width: none;
  gap: calc(0.45rem * var(--video-controls-scale));
  padding: calc(0.45rem * var(--video-controls-scale));
  border-radius: 12px;
  background: rgba(17, 24, 31, 0.78);
  backdrop-filter: blur(10px);
}

.video-stage-card:fullscreen .video-custom-actions,
.video-stage-card:-webkit-full-screen .video-custom-actions,
.video-stage-card.is-pseudo-fullscreen .video-custom-actions {
  width: 100%;
  max-width: none;
  gap: calc(0.45rem * var(--video-controls-scale));
  margin-top: calc(0.45rem * var(--video-controls-scale));
}

.video-stage-card:fullscreen .btn,
.video-stage-card:-webkit-full-screen .btn,
.video-stage-card.is-pseudo-fullscreen .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-stage-card:fullscreen .video-overlay-controls .btn,
.video-stage-card:fullscreen .video-custom-actions .btn,
.video-stage-card:-webkit-full-screen .video-overlay-controls .btn,
.video-stage-card:-webkit-full-screen .video-custom-actions .btn,
.video-stage-card.is-pseudo-fullscreen .video-overlay-controls .btn,
.video-stage-card.is-pseudo-fullscreen .video-custom-actions .btn {
  min-height: calc(46px * var(--video-controls-scale));
  padding: calc(0.65rem * var(--video-controls-scale)) calc(0.72rem * var(--video-controls-scale)) !important;
  font-size: calc(0.95rem * var(--video-controls-scale)) !important;
}

.video-stage-card.video-hide-general-actions:fullscreen .video-standard-action-btn,
.video-stage-card.video-hide-general-actions:-webkit-full-screen .video-standard-action-btn,
.video-stage-card.is-pseudo-fullscreen.video-hide-general-actions .video-standard-action-btn {
  display: none !important;
}

.video-stage-card:fullscreen .btn:hover:enabled,
.video-stage-card:-webkit-full-screen .btn:hover:enabled,
.video-stage-card.is-pseudo-fullscreen .btn:hover:enabled {
  background: #23272b !important;
}

.video-stage-card:fullscreen .video-flow-status,
.video-stage-card:-webkit-full-screen .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-flow-status {
  width: 100%;
  max-width: none;
  margin: 0 auto calc(0.45rem * var(--video-controls-scale));
  font-weight: 700;
  color: #f4f7fb;
  background: rgba(8, 12, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: calc(0.42rem * var(--video-controls-scale)) calc(0.55rem * var(--video-controls-scale));
  font-size: calc(0.96rem * var(--video-controls-scale));
}


.video-overlay-controls .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-overlay-controls .btn:hover:enabled {
  background: #23272b !important;
}

.video-overlay-controls .btn.btn-primary {
  background: #1f2327 !important;
  color: #ffffff !important;
  border-color: #121518 !important;
}

.video-custom-actions {
  width: min(100%, 620px);
  margin: 0.45rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.video-custom-action-btn {
  font-weight: 700;
}

.video-standard-action-btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-standard-action-btn:hover:enabled {
  background: #23272b !important;
}

.video-overlay-controls.video-live-actions-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-overlay-controls.video-live-actions-layout .video-action-2pm {
  grid-column: 1;
  grid-row: 1;
}

.video-overlay-controls.video-live-actions-layout .video-action-3pm {
  grid-column: 2;
  grid-row: 1;
}

.video-overlay-controls.video-live-actions-layout .video-action-gain {
  grid-column: 1;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-foul {
  grid-column: 2;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-to {
  grid-column: 3;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-conceded {
  grid-column: 1 / -1;
  grid-row: 3;
}

.video-stage-footer {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.video-stage-footer .field {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.video-flow-panel {\n  display: none !important;\n}

.video-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.video-flow-header h3 {
  margin: 0;
}

.video-flow-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.45rem;
}

.video-quick-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.video-sidebar {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.video-sidebar-card h3 {
  margin-top: 0;
}

.video-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.video-events-header h3 {
  margin: 0;
}

.video-analysis-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.video-analysis-summary div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.video-analysis-summary span {
  font-size: 0.72rem;
  color: #5d6d84;
}

.video-events-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  max-height: 32vh;
  overflow: auto;
}

.video-event-item {
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  background: linear-gradient(180deg, #f4f6fa 0%, #e9edf4 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

.video-event-item.is-selected {
  border-color: #7aa7dd;
  box-shadow: 0 0 0 1px rgba(11, 94, 215, 0.22);
}

.video-event-jump {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.video-event-jump span {
  font-weight: 600;
}

.video-event-jump small {
  display: block;
  margin-top: 0.1rem;
  color: #5d6d84;
}

.video-event-jump strong {
  color: var(--accent);
}



.video-event-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0;
}

.video-event-index-tools {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin-top: 0.2rem;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(16, 36, 62, 0.12);
  background: rgba(255, 255, 255, 0.55);
}

.video-event-index-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.video-event-index-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0e2239;
}

.video-disclosure-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important;
  opacity: 0.9;
  min-width: 1.4rem;
  padding: 0.1rem 0.2rem;
  font-size: 0.9rem;
  line-height: 1;
}

.video-disclosure-btn:hover:enabled {
  opacity: 1;
  transform: none;
}



@media (max-width: 760px) {
  .video-analysis-header,
  .video-stage-footer,
  .video-report-header {
    flex-direction: column;
    align-items: stretch;
  }

  .video-analysis-layout,
  .video-report-layout {
    grid-template-columns: 1fr;
  }

  .video-report-filters {
    grid-template-columns: 1fr;
  }

  .video-report-timeline-transport {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .video-event-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .video-event-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .video-flow-actions {
    grid-template-columns: 1fr;
  }

  .video-overlay-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
  }

  .video-analysis-summary {
    grid-template-columns: 1fr;
  }


  .topbar {
    padding: 0.75rem;
  }

  .topbar-logo {
    width: 168px;
    height: 66px;
  }

  .header-menu-panel {
    right: auto;
    left: 0;
  }

  #accountMenu .header-menu-panel {
    left: auto;
    right: 0;
  }
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.app-grid.video-mode {
  max-width: min(1760px, calc(100vw - 1.2rem));
}

.app-grid.video-report-mode {
  max-width: calc(100vw - 0.6rem);
}

.app-grid.video-mode.video-wide-mode {
  max-width: calc(100vw - 0.6rem);
}

body.home-screen .app-footer {
  display: none;
}

body.home-screen {
  background: inherit;
}

.app-grid.home-mode {
  display: block;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

.app-grid.home-mode #homeCard {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1rem 2.2rem;
}


.card {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.card h2 {
  margin-top: 0;
}

.app-grid.season-mode,
.app-grid:has(#seasonCard:not(.hidden)) {
  grid-template-columns: minmax(0, var(--season-desktop-max-width));
  justify-content: center;
  max-width: none;
  width: min(var(--season-desktop-max-width), calc(100vw - 2rem));
}

.app-grid.season-mode #seasonCard,
.app-grid:has(#seasonCard:not(.hidden)) #seasonCard {
  grid-column: 1 / -1;
}

.season-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.season-header h2 {
  margin-bottom: 0.25rem;
}

.season-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.season-icon-btn {
  width: 62px;
  min-width: 62px;
  min-height: 62px;
  padding: 0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.season-action-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.season-filters {
  margin-top: 0.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: start;
}

#seasonDefinitionFilter {
  min-height: 120px;
}

.season-section {
  margin-top: 0.6rem;
}

.season-roster-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.season-roster-headline-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.season-roster-headline h3 {
  margin: 0;
  font-size: 1rem;
  color: #10243e;
}

.season-roster-filters {
  margin-bottom: 0.55rem;
  max-width: 420px;
  display: grid;
  gap: 0.35rem;
}

.season-system-toggle {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 40px;
  cursor: pointer;
}

.season-system-toggle-label {
  font-size: 0.9rem;
  color: #2a3f5d;
  line-height: 1.2;
}

.season-system-toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-flex;
}

.season-system-toggle-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.season-system-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #101215;
  transition: background-color 0.2s ease;
}

.season-system-toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.season-system-toggle-switch input:checked + .season-system-toggle-slider {
  background: #ff8a00;
}

.season-system-toggle-switch input:checked + .season-system-toggle-slider::after {
  transform: translateX(20px);
}

.season-system-toggle-switch input:focus-visible + .season-system-toggle-slider {
  outline: 2px solid #5a8cff;
  outline-offset: 2px;
}

.season-plus-btn {
  min-width: 38px;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
}

.season-roster-table-wrap table {
  min-width: 640px;
}

.season-roster-players-table-wrap table {
  min-width: 980px;
}

.season-roster-players-table td:last-child {
  white-space: nowrap;
}

.season-roster-table-wrap tbody tr {
  cursor: pointer;
}

.season-roster-table-wrap tbody tr.is-selected td {
  background: #e8f1ff;
  font-weight: 700;
}

.season-team-actions-cell {
  white-space: nowrap;
}

.season-team-actions-cell .history-icon-btn {
  margin-right: 0.3rem;
}

.season-team-actions-cell .history-icon-btn:last-child {
  margin-right: 0;
}

.season-roster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.season-roster-grid div {
  background: #f6f9fd;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 0.6rem;
  display: grid;
  gap: 0.2rem;
}

.season-roster-grid span {
  font-size: 0.82rem;
  color: #4f6685;
}

.season-roster-grid strong {
  font-size: 1.05rem;
  color: #10243e;
}

.season-table-wrap table {
  width: 100%;
}

.season-calendar-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.season-calendar-table th,
.season-calendar-table td {
  padding: 0.5rem 0.35rem;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.season-calendar-table th:nth-child(1),
.season-calendar-table td:nth-child(1) {
  width: 12%;
}

.season-calendar-table th:nth-child(2),
.season-calendar-table td:nth-child(2) {
  width: 15%;
}

.season-calendar-table th:nth-child(3),
.season-calendar-table td:nth-child(3) {
  width: 13%;
}

.season-calendar-table th:nth-child(4),
.season-calendar-table td:nth-child(4) {
  width: 16%;
}

.season-calendar-table th:nth-child(5),
.season-calendar-table td:nth-child(5) {
  width: 10%;
}

.season-calendar-table th:nth-child(6),
.season-calendar-table td:nth-child(6) {
  width: 13%;
}

.season-calendar-table th:nth-child(7),
.season-calendar-table td:nth-child(7) {
  width: 9%;
}

.season-calendar-table th:nth-child(8),
.season-calendar-table td:nth-child(8) {
  width: 12%;
}

.season-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.season-row-actions .btn {
  min-height: 34px;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}

.season-row-actions .season-open-btn {
  min-width: 0;
}

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

.season-individual-stats-wrap {
  margin-top: 0.85rem;
}

.season-individual-table-scroll {
  overflow-x: auto;
}

.season-individual-table {
  width: max-content !important;
  min-width: 100%;
  table-layout: auto !important;
}

.season-individual-table th,
.season-individual-table td {
  padding: 0.5rem 0.55rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.season-individual-stats-wrap h3 {
  margin: 0 0 0.35rem;
}

.season-individual-stats-wrap .shot-hint {
  margin: 0 0 0.45rem;
}

.season-individual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.season-individual-actions {
  display: inline-flex;
  gap: 0.4rem;
}

.season-sort-btn {
  border: none;
  background: transparent;
  width: 100%;
  text-align: inherit;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.season-sort-btn:hover {
  color: #0f5fc9;
}

.season-stat-card {
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  padding: 0.65rem;
  background: #f8fbff;
  display: grid;
  gap: 0.2rem;
}

.season-stat-card span {
  font-size: 0.8rem;
  color: #4f6685;
}

.season-stat-card strong {
  font-size: 1.15rem;
  color: #0f2a49;
}

@media (max-width: 700px) {
  .season-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .season-actions .btn {
    width: 100%;
  }

  .season-actions .season-icon-btn {
    width: 52px;
  }

  .season-roster-grid {
    grid-template-columns: 1fr;
  }

  .season-filters {
    grid-template-columns: 1fr;
  }

  .season-roster-filters {
    max-width: 100%;
  }

  .season-roster-table-wrap table {
    min-width: 100%;
  }

  .season-roster-players-table-wrap table {
    min-width: 860px;
  }

  .season-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-roster-players-grid {
    grid-template-columns: 1fr;
  }
}

.hidden {
  display: none !important;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.field input {
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 1rem;
}

.field input[type="color"] {
  padding: 0.2rem;
  height: 42px;
  min-width: 64px;
  background: #fff;
  cursor: pointer;
}

.field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.field input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.field select {
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
}

.field textarea {
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
}

.setup-section {
  margin-bottom: 0.8rem;
}

.setup-header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0.6rem;
}

.setup-header-row h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.field-label-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}

.field-checkbox span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.field-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #101215;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex: 0 0 auto;
}

.field-checkbox input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.field-checkbox input[type="checkbox"]:checked {
  background: #ff8a00;
}

.field-checkbox input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.field-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid #5a8cff;
  outline-offset: 2px;
}

.inline {
  display: flex;
  gap: 0.5rem;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--muted);
  color: var(--text);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: #1b1d21;
  color: #8e959f;
  border-color: #2a2e35;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-light {
  background: #eef3fb;
}

.players-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.setup-roster-players-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.season-player-actions {
  display: inline-flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.season-import-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 48vh;
  overflow: auto;
  margin-bottom: 0.8rem;
}

.season-import-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 1fr);
  gap: 0.6rem;
  align-items: end;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  background: #f8fbff;
}

.season-import-review-player {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.season-import-review-player strong {
  font-size: 0.95rem;
}

.season-import-review-meta {
  color: #6a7f99;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .season-import-review-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.video-custom-stats-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.video-custom-stat-item {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.video-custom-stat-details {
  flex: 1 1 auto;
  min-width: 0;
}

.video-custom-stat-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.video-custom-stat-enabled-toggle {
  min-height: 0;
}

.video-custom-stat-enabled-toggle .season-system-toggle-label {
  font-size: 0.82rem;
}

.video-custom-stat-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.video-custom-stat-item strong {
  display: block;
  margin-bottom: 0.18rem;
}

.video-custom-stat-item p {
  margin: 0;
  color: #4b5f79;
  font-size: 0.9rem;
}

.video-custom-stat-item input[type="color"] {
  width: 44px;
  height: 32px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  padding: 0.1rem;
  background: #fff;
  flex: 0 0 auto;
  cursor: pointer;
}

.video-custom-stat-meta {
  margin-top: 0.2rem !important;
  font-size: 0.82rem !important;
  color: #7b8ca3 !important;
}

.player-edit-btn {
  min-width: 34px;
  padding: 0.35rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
}

.live-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.live-title-row h2 {
  margin: 0;
}

.live-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.8rem;
  margin-top: 0.25rem;
  text-align: center;
}

.live-header strong {
  display: block;
  font-size: 1.05rem;
  color: #0e2239;
  font-weight: 700;
}

.live-undo-top-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  background: #f7fbff;
}

.score-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  padding: 0.25rem 0.45rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.score-side strong {
  font-size: 1.55rem;
}

.score-side.possession {
  background: #d8f3dc;
  color: #0f5132;
}

.score-sep {
  font-weight: 700;
  color: #5d6d84;
}

.bonus-badge {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: #d13b2f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.label {
  margin: 0;
  font-size: 0.78rem;
  color: #5d6d84;
}

.player-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 0.5rem;
}

.live-custom-stats-grid {
  margin-top: 0.5rem;
}

.action-btn {
  min-height: 56px;
  font-weight: 700;
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
}

.action-btn:hover:enabled {
  background: #23272b !important;
}

.action-btn.btn-primary {
  background: #1f2327 !important;
  color: #ffffff !important;
  border-color: #121518 !important;
}

.action-2pm {
  grid-column: 1;
  grid-row: 1;
}

.action-3pm {
  grid-column: 2;
  grid-row: 1;
}

.action-gain {
  grid-column: 1;
  grid-row: 2;
}

.action-foul {
  grid-column: 2;
  grid-row: 2;
}

.action-to {
  grid-column: 3;
  grid-row: 2;
}

.action-conceded {
  grid-column: 1 / -1;
  grid-row: 3;
}

.shot-zone {
  margin-top: 0.9rem;
}

.shot-hint {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #4f627e;
}

.shot-hint.pending {
  color: #0b5ed7;
  font-weight: 700;
}

.decision-assistant-panel {
  margin-top: 0.6rem;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  background: #f8fbff;
}

.decision-assistant-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.decision-assistant-item {
  border-radius: 10px;
  padding: 0.5rem 0.55rem;
  background: #ffffff;
  border: 1px solid #e1e8f2;
}

.decision-assistant-item strong {
  display: block;
  margin-bottom: 0.15rem;
}

.decision-assistant-item .shot-hint {
  margin-bottom: 0.25rem;
}

.decision-assistant-item .shot-hint:last-child {
  margin-bottom: 0;
}

.decision-assistant-item-critical {
  border-color: #e7b4b4;
  background: #fff5f5;
}

.decision-assistant-item-warning {
  border-color: #f1ddb0;
  background: #fffaf0;
}

.decision-assistant-item-info {
  border-color: #c8d9ee;
  background: #f4f9ff;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 62, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 80;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(16, 36, 62, 0.28);
  padding: 1rem;
}

.modal-card-small {
  width: min(480px, 100%);
}

#localDataModal {
  align-items: flex-start;
  padding: 0.6rem;
}

.local-data-modal-card {
  width: min(1120px, 96vw);
  max-height: calc(100vh - 1.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 auto;
}

#localDataModal .inline {
  flex-wrap: wrap;
}

#localDataModal .field {
  min-width: 0;
}

#localDataModal textarea {
  resize: vertical;
  min-height: 210px;
  max-height: 42vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#localDataModal .local-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 0;
}

#localDataModal .local-data-table-wrap table {
  width: max-content;
  min-width: 100%;
}

#localDataModal .season-team-actions-cell {
  white-space: nowrap;
}

#localDataModal .season-team-actions-cell .btn {
  margin: 0.1rem 0.18rem 0.1rem 0;
}

#localDataModal .season-team-actions-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

#videoKeyboardHelpModal {
  align-items: flex-start;
  justify-content: flex-start;
}

#seasonPlayerProfileModal .modal-card {
  width: min(980px, 96vw);
}

#playerStatsModal .modal-card {
  width: min(980px, 96vw);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  position: relative;
  padding-left: 2rem;
}

.modal-header h3 {
  margin: 0;
}

.local-data-warning-box {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid #f3c894;
  background: #fff7ec;
  color: #7a3f00;
}

.local-data-warning-box strong {
  display: inline-block;
  margin-bottom: 0.3rem;
}

.local-data-warning-box p {
  margin: 0;
}

.modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.45rem;
  height: 1.45rem;
  transform: translateY(-50%);
  border-radius: 6px;
  background-image: url("assets/lh-favicon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.season-player-profile-card {
  background: linear-gradient(170deg, #ffffff 0%, #f3f8ff 100%);
  color: #10243e;
}

.season-player-section-title {
  margin: 0.25rem 0 0.45rem;
  font-size: 0.92rem;
  color: #2f4f75 !important;
  letter-spacing: 0.01em;
}

#seasonPlayerModal .field span,
#seasonPlayerModal .field input,
#seasonPlayerModal .field select,
#seasonPlayerProfileModal,
#seasonPlayerProfileModal .modal-header h3,
#seasonPlayerProfileModal .season-player-profile-meta,
#seasonPlayerProfileModal .season-player-profile-grid strong,
#seasonPlayerProfileModal .season-player-profile-stats strong {
  color: #10243e;
}

#seasonPlayerModal .field {
  position: relative;
}

#seasonPlayerModal .modal-card,
#seasonPlayerProfileModal .modal-card {
  background: #ffffff !important;
}

#seasonPlayerModal .field span,
#seasonPlayerModal .field input,
#seasonPlayerModal .field select,
#seasonPlayerModal .field input::placeholder,
#seasonPlayerProfileModal h3,
#seasonPlayerProfileModal p,
#seasonPlayerProfileModal span,
#seasonPlayerProfileModal strong,
#seasonPlayerProfileModal div {
  color: #10243e !important;
  -webkit-text-fill-color: #10243e !important;
}

#seasonPlayerModal .field input,
#seasonPlayerModal .field select {
  background: #ffffff;
  border-color: #cfd8e5;
}

#seasonPlayerModal .field input::placeholder {
  color: #6a7f99;
  opacity: 1;
}

.season-player-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 0.2rem);
  z-index: 25;
  margin-top: 0;
  border: 1px solid #cfd8e5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(16, 36, 62, 0.14);
  padding: 0.25rem;
  max-height: 180px;
  overflow: auto;
}

.season-player-suggestion-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #10243e !important;
  -webkit-text-fill-color: #10243e !important;
  text-align: left;
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  font-size: 0.92rem;
}

.season-player-suggestion-item:hover {
  background: #eef4ff !important;
  color: #10243e !important;
}

#seasonPlayerProfileModal .season-player-profile-avatar {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.season-player-profile-hero {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 0.6rem 0 0.9rem;
}

.season-player-profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #0f3d73;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}

.season-player-profile-meta,
.season-player-profile-id {
  margin: 0;
  color: #455f80;
  font-size: 0.86rem;
}

.season-player-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.season-player-profile-grid div,
.season-player-profile-stats article {
  background: #fff;
  border: 1px solid #dce6f3;
  border-radius: 10px;
  padding: 0.5rem 0.55rem;
  display: grid;
  gap: 0.15rem;
}

.season-player-profile-grid span,
.season-player-profile-stats span {
  font-size: 0.78rem;
  color: #5c7290;
}

.season-player-profile-grid strong,
.season-player-profile-stats strong {
  font-size: 0.95rem;
  color: #0f2d4d;
}

.season-player-metric-tile {
  position: relative;
  padding: 0.6rem 2.45rem 0.72rem 0.72rem !important;
  border-radius: 16px !important;
  border: 1px solid #d4e3f7 !important;
  background: #ffffff !important;
}

.season-player-metric-label {
  display: block;
  font-size: 0.8rem;
  color: #557395 !important;
  margin-bottom: 0.2rem;
}

.season-player-metric-value {
  display: block;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: #12375f !important;
  line-height: 1.2;
}

.season-player-metric-add {
  position: absolute;
  right: 0.58rem;
  bottom: 0.52rem;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  border-radius: 999px;
  padding: 0;
  border: 1px solid #89aee0;
  background: #f5f9ff;
  color: #0d4ea3;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
}

.season-player-metric-add:hover {
  background: #e9f2ff;
  color: #0a4288;
}

.season-player-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.season-player-profile-shot-map {
  margin-bottom: 0.85rem;
}

.season-player-profile-shot-map h4 {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  color: #2f4f75;
}

#seasonPlayerProfileModal .season-player-profile-court {
  min-height: 300px;
  max-width: 480px;
  margin: 0 auto 0.45rem;
}

.season-player-open-link {
  border: none;
  background: transparent;
  color: #0b5ed7;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.season-player-open-link:hover {
  color: #0846a6;
}

.season-player-mirwald-box {
  background: #f2f8ff;
  border: 1px solid #bfd6f6;
  border-left: 5px solid #0f5fc9;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.8rem;
}

.season-player-mirwald-box h4 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: #0d396d;
}

.season-player-mirwald-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.season-player-mirwald-grid div {
  background: #ffffff;
  border: 1px solid #dbe8f8;
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.12rem;
}

.season-player-measures-section {
  margin-bottom: 0.9rem;
  background: #f8fbff;
  border: 1px solid #dbe8f8;
  border-radius: 12px;
  padding: 0.65rem;
}

.season-player-measures-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.season-player-measures-header h4 {
  margin: 0;
  font-size: 0.92rem;
  color: #0d396d;
}

.season-player-measurements-meta {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: #546f90 !important;
}

.season-player-measure-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.season-player-measure-charts {
  display: grid;
  gap: 0.5rem;
}

.season-player-measure-list {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.season-player-measure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe8f8;
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
}

.season-player-measure-row-main {
  display: grid;
  gap: 0.12rem;
}

.season-player-measure-date {
  font-size: 0.77rem;
  color: #5e7899 !important;
}

.season-player-measure-values {
  font-size: 0.82rem;
  color: #173c69 !important;
}

.season-player-measure-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.season-player-icon-btn {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.15rem 0.35rem;
  font-weight: 700;
  line-height: 1;
}

.season-player-measure-actions .btn {
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0.1rem;
}

.season-player-chart-card {
  background: #ffffff;
  border: 1px solid #dbe8f8;
  border-radius: 10px;
  padding: 0.5rem;
}

.season-player-chart-card h5 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: #154070;
}

.season-player-chart-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #657f9e;
}

.season-player-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(180deg, #fcfdff 0%, #f3f8ff 100%);
  border-radius: 8px;
}

.season-player-chart-caption {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: #5f7897;
}

.season-player-metric-card {
  max-width: min(700px, calc(100vw - 1rem));
}

.season-player-metric-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.45rem;
  align-items: end;
  margin-bottom: 0.55rem;
}

.auth-feedback-text {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  font-size: 0.85rem;
  line-height: 1.35;
  background: #f2f7ff;
  border: 1px solid #d4e3fb;
  color: #1f3962;
}

.auth-feedback-text.is-error {
  background: #fff2f2;
  border-color: #f5d2d2;
  color: #962f2f;
}

.stats-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
}

.stats-tabs .btn.active {
  background: var(--accent);
  color: #fff;
}

.definitions-list {
  display: grid;
  gap: 0.5rem;
}

.definitions-list div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.definitions-list strong {
  color: #0b5ed7;
}

.help-text-content {
  max-height: 70vh;
  overflow: auto;
  display: grid;
  gap: 0.6rem;
  line-height: 1.45;
  color: #20344f;
}

.help-text-content h4 {
  margin: 0.2rem 0 0.1rem;
  color: #0b5ed7;
}

.help-text-content p {
  margin: 0;
}

.help-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 0.45rem;
}

.help-logo {
  width: 260px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.help-version {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #44566d;
}

.author-profile {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.author-photo {
  width: 140px;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #d7e0ec;
  flex-shrink: 0;
}

.author-text {
  display: grid;
  gap: 0.5rem;
}

.pricing-modal-card {
  width: min(880px, 100%);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(26, 115, 232, 0.15), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(15, 123, 53, 0.13), transparent 60%),
    #ffffff;
}

.pricing-hero {
  margin: 0.9rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d9e7fb;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f9ff 0%, #f8fffb 100%);
}

.pricing-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c5cc3;
}

.pricing-hero h4 {
  margin: 0;
  font-size: 1.3rem;
  color: #0f2d4d;
}

.pricing-hero p {
  margin: 0.45rem 0 0;
  color: #3d5676;
}

.pricing-plan-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.pricing-plan {
  position: relative;
  border: 1px solid #d9e3f1;
  border-radius: 14px;
  padding: 0.85rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.pricing-plan h5 {
  margin: 0;
  font-size: 1.05rem;
}

.pricing-subtitle {
  margin: 0.28rem 0 0.55rem;
  color: #58708f;
  font-size: 0.88rem;
}

.pricing-free-price,
.pricing-pro-price {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.pricing-free-price {
  color: #0f5132;
}

.pricing-pro-price {
  color: #0f5fc9;
}

.pricing-feature-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.32rem;
  color: #1a3556;
}

.pricing-feature-list li::marker {
  color: #0f5fc9;
}

.pricing-pro {
  border-color: #84b8ff;
  box-shadow: 0 10px 24px rgba(18, 74, 153, 0.12);
}

.pricing-badge {
  position: absolute;
  top: -0.56rem;
  right: 0.65rem;
  margin: 0;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #0f7b35;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.pricing-offers {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.pricing-offer {
  display: grid;
  gap: 0.08rem;
  justify-items: center;
  align-items: center;
  min-height: 102px;
  border-radius: 14px;
  position: relative;
  color: #ffffff !important;
}

.pricing-offer * {
  color: #ffffff !important;
}

.pricing-offer .pricing-offer-title {
  font-size: 0.86rem;
  opacity: 0.92;
}

.pricing-offer strong {
  font-size: 1.5rem;
  line-height: 1.05;
}

.pricing-offer span {
  font-size: 0.86rem;
}

.pricing-offer-yearly {
  background: linear-gradient(135deg, #0f7b35 0%, #0d9b43 100%) !important;
  border-color: #0b6f31 !important;
}

.pricing-offer-tag {
  position: absolute;
  top: -0.56rem;
  right: 0.6rem;
  background: #f4b400;
  color: #3b2a00 !important;
  font-weight: 700;
  font-size: 0.72rem !important;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
}

@media (max-width: 820px) {
  .pricing-plan-compare,
  .pricing-offers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .author-photo {
    width: 100px;
    height: 150px;
  }

  .season-player-profile-grid {
    grid-template-columns: 1fr;
  }

  .season-player-profile-stats {
    grid-template-columns: 1fr;
  }

  .season-player-mirwald-grid,
  .season-player-measure-form {
    grid-template-columns: 1fr;
  }

  .season-player-metric-input-row {
    grid-template-columns: 1fr;
  }

  .individual-stats-layout {
    grid-template-columns: 1fr;
  }

  #playerStatsModal .individual-court-board,
  #playerStatsSummary,
  #playerCoachInsights {
    grid-column: 1;
  }
}

.court-board {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f2d6a2 0%, #efc68d 40%, #e8bb7f 100%);
  border: 2px solid #cc9c63;
  touch-action: manipulation;
}

.court-svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  margin: 0 auto;
}

.court-bg-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  margin: 0 auto;
}

.court-stroke {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
}

.court-stroke-thick {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5.5;
}

.court-dash {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-dasharray: 10 8;
}

.court-markers {
  position: absolute;
  inset: 0;
}

.shot-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}

.shot-marker.made {
  background: #0b5ed7;
}

.shot-marker.miss {
  background: transparent;
  border: none;
}

.shot-marker.miss::before,
.shot-marker.miss::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #d13b2f;
}

.shot-marker.miss::before {
  transform: rotate(45deg);
}

.shot-marker.miss::after {
  transform: rotate(-45deg);
}

.result-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
}

.result-actions .btn:active,
.result-actions .btn:focus-visible {
  background: #1f2327;
  color: #fff;
}

.result-actions .btn,
.gain-actions .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.result-actions .btn:hover:enabled,
.gain-actions .btn:hover:enabled {
  background: #23272b !important;
}

.gain-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.conceded-def-players {
  margin-top: 0.7rem;
}

.rebound-players {
  margin-top: 0.7rem;
}

.video-lineup-grid {
  margin-top: 0.6rem;
  grid-template-columns: 1fr 1fr;
}

.video-lineup-grid .btn.btn-primary {
  background: #0b5ed7 !important;
  color: #ffffff !important;
  border-color: #0846a6 !important;
}

.video-lineup-grid .btn.btn-primary:hover:enabled {
  background: #0846a6 !important;
}

#turnoverResultModal .modal-card-small {
  width: min(560px, 100%);
}

#turnoverResultModal .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  justify-content: stretch;
}

#turnoverResultModal .result-actions .btn {
  width: 100%;
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.player-stats-grid div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.player-stats-grid span {
  font-size: 0.74rem;
  color: #5d6d84;
}

.player-stats-grid strong {
  font-size: 1.05rem;
}

.player-stats-grid .stats-group-title {
  grid-column: 1 / -1;
  display: block;
  margin-top: 0.25rem;
  padding: 0.2rem 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0b5ed7;
  border-bottom: 1px solid #d7e0ec;
}

.individual-stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: 0.8rem;
  align-items: start;
}

#playerStatsSummary {
  grid-column: 1;
}

#playerStatsModal .individual-court-board {
  grid-column: 2;
}

#playerCoachInsights {
  grid-column: 1 / -1;
}

.player-coach-insights {
  grid-column: 1 / -1;
}

.coach-insights-card {
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  background: #f7fbff;
}

.coach-insights-card h4 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: #0b5ed7;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}

.coach-insights-warning {
  font-size: 0.74rem;
  color: #9a5b00;
  background: #fff4d6;
  border: 1px solid #f1d183;
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  font-weight: 600;
}

.coach-insights-card p {
  margin: 0 0 0.45rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #23364f;
}

.coach-insights-card ul {
  margin: 0.15rem 0 0;
  padding-left: 1rem;
}

.coach-insights-card li {
  margin: 0.2rem 0;
  font-size: 0.84rem;
  color: #23364f;
}

.collective-map-launch {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.possession-entry-chart {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.7rem;
  align-items: center;
}

.possession-pie-figure {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 0.25rem;
}

.possession-pie-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.possession-pie-donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  background: #fff;
  border-radius: 50%;
}

.possession-pie-figure figcaption {
  text-align: center;
}

.possession-pie-figure figcaption strong {
  font-size: 0.9rem;
  color: #10243e;
}

.possession-pie-figure figcaption span {
  display: block;
  font-size: 0.72rem;
  color: #5d6d84;
}

.possession-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.possession-pie-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.possession-pie-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.possession-pie-legend strong {
  font-size: 0.78rem;
  color: #20344f;
}

.possession-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: #5d6d84;
}

.top5-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}

.top5-card {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: #fcfdff;
  height: 220px;
  display: flex;
  flex-direction: column;
}

.top5-card h4 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: #1d3e66;
}

.top5-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.top5-card li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.top5-card strong {
  color: #1f2e40;
}

.btn-shot-map {
  background: #f08c00;
  color: #fff;
}

.btn-shot-map:hover {
  background: #d97900;
}

.player-court-board {
  max-width: 700px;
}

.individual-court-board {
  max-width: 360px;
}

.collective-map-wrap {
  margin-top: 0.9rem;
}

.collective-map-wrap h4 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: #24466f;
}

.stats-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.stats-header-row h2 {
  margin: 0;
}

.stats-header-row-compact {
  margin-bottom: 0.55rem;
}

.stats-header-row-compact h3 {
  margin: 0;
  font-size: 1rem;
}

.stats-inline-tabs {
  display: flex;
  gap: 0.45rem;
}

.stats-inline-tabs .btn.btn-opponent-active {
  background: #c73636;
  color: #fff;
}

#statsCard.opponent-theme .summary div,
#statsCard.opponent-theme .player-stats-grid div {
  border-color: #d86a6a;
  background: #fff6f6;
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.period-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.period-controls-action {
  display: flex;
  justify-content: flex-end;
}

.stats-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.period-tab-btn {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
}

.stats-live-shell {
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  background: #f7fbff;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.85rem;
}

.stats-live-shell .period-controls {
  margin-bottom: 0.7rem;
}

.live-stats-mobile-tabs {
  display: none;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.live-stats-panel {
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.72rem;
  background: #ffffff;
}

.live-collective-panel {
  width: min(100%, 720px);
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

.live-individual-shell {
  margin-top: 0.8rem;
}

.live-individual-panel h3,
.live-collective-panel h3 {
  margin: 0 0 0.6rem;
}

.live-individual-panel .table-wrap {
  margin-bottom: 0;
}

.summary div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary span {
  font-size: 0.76rem;
  color: #5d6d84;
}

.summary strong {
  font-size: 1.1rem;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

th,
td {
  text-align: center;
  border-bottom: 1px solid #e5e9f0;
  padding: 0.55rem;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

.player-name-btn {
  border: none;
  background: transparent;
  color: #0b5ed7;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.foul-limit {
  background: #ffe6e6;
  color: #9f1f1f;
}

.foul-limit .player-name-btn {
  color: #9f1f1f;
}

.player-fouled-out {
  background: #d13b2f !important;
  color: #ffffff !important;
}

.player-team-btn {
  border: 2px dashed #8ca4c2;
}

.team-row {
  background: #eef3fb;
  font-weight: 700;
}

.player-shot-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}

.player-shot-marker.made {
  background: #0b5ed7;
}

.player-shot-marker.miss {
  background: transparent;
  border: none;
}

.player-shot-marker.miss::before,
.player-shot-marker.miss::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #d13b2f;
}

.player-shot-marker.miss::before {
  transform: rotate(45deg);
}

.player-shot-marker.miss::after {
  transform: rotate(-45deg);
}

.event-log {
  margin: 0;
  margin-left: 0.2rem;
  padding-left: 1.5rem;
  max-height: 260px;
  overflow: auto;
}

.event-log li {
  margin-bottom: 0.35rem;
  padding-left: 0.1rem;
}

.event-row {
  cursor: pointer;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.log-header h2 {
  margin: 0;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.history-icon-btn {
  min-width: 2.15rem;
  padding: 0.55rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
}

.history-icon-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.app-footer {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem 1rem;
  font-size: 0.68rem;
  color: #b7c2d3;
  text-align: center;
}

@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 15px;
  }

  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.75rem 0.75rem;
  }

  .topbar-actions {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .stats-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .stats-inline-tabs {
    justify-content: flex-end;
  }

  .live-collective-panel {
    max-width: none;
    width: 100%;
  }

  .app-footer {
    font-size: 0.62rem;
    gap: 0.45rem;
    text-align: center;
  }

  .app-grid {
    padding: 0.7rem;
    gap: 0.7rem;
    width: 100%;
    max-width: 100%;
  }

  .card {
    border-radius: 12px;
    padding: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .btn {
    min-height: 44px;
    padding: 0.62rem 0.75rem;
    font-size: 0.92rem;
  }

  .inline {
    flex-wrap: wrap;
  }

  .inline .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .scoreboard {
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
  }

  .score-side strong {
    font-size: 1.3rem;
  }

  .player-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .action-btn {
    min-height: 50px;
  }

  .period-controls {
    align-items: stretch;
  }

  .stats-period-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }

  .period-controls-action {
    justify-content: flex-end;
  }

  .period-controls-action > .btn {
    width: auto;
  }

  .modal {
    padding: 0.5rem;
    align-items: flex-end;
  }

  .modal-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 14px 14px 10px 10px;
    padding: 0.8rem;
  }

  .modal-header h3 {
    font-size: 1rem;
  }

  .result-actions {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 0.5rem;
  }

  .result-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .gain-actions {
    grid-template-columns: 1fr;
  }

  .player-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-stats-grid strong {
    font-size: 1rem;
  }

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

  table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  th,
  td {
    padding: 0.28rem 0.15rem;
    font-size: 0.64rem;
    white-space: normal;
    word-break: break-word;
  }

  th:first-child,
  td:first-child {
    max-width: 72px;
  }

  .event-log {
    margin-left: 0.1rem;
    padding-left: 1.35rem;
  }
}

@media (min-width: 960px) {
  .app-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  .app-grid.match-mode {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  .app-grid.match-mode,
  .app-grid.match-mode:has(#statsCard:not(.hidden)),
  .app-grid:has(#statsCard:not(.hidden)) {
    grid-template-columns: minmax(0, var(--stats-desktop-max-width));
    justify-content: center;
    max-width: none;
    width: min(var(--stats-desktop-max-width), calc(100vw - 2rem));
  }

  .app-grid.video-mode {
    grid-template-columns: minmax(0, 1200px);
    justify-content: center;
    column-gap: 1rem;
  }

  .app-grid.video-report-mode {
    grid-template-columns: minmax(0, calc(100vw - 1.2rem));
    justify-content: stretch;
    column-gap: 1rem;
  }

  .app-grid.video-mode.video-wide-mode {
    grid-template-columns: minmax(0, calc(100vw - 1.2rem));
    justify-content: stretch;
  }

  .app-grid.video-mode #videoAnalysisCard {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .app-grid.video-report-mode #videoReportCard {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .app-grid.video-mode #liveCard,
  .app-grid.video-mode #statsCard,
  .app-grid.video-mode #individualStatsCard,
  .app-grid.video-mode #logCard {
    display: none !important;
  }

  .app-grid.video-report-mode #liveCard,
  .app-grid.video-report-mode #statsCard,
  .app-grid.video-report-mode #individualStatsCard,
  .app-grid.video-report-mode #logCard {
    display: none !important;
  }

  .app-grid:not(.match-mode):not(.home-mode):not(.video-mode):not(.video-report-mode):not(.training-book-mode) {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  .app-grid:not(.match-mode):not(.home-mode):not(.video-mode):not(.video-report-mode):not(.training-book-mode) #setupCard {
    grid-column: 1;
    justify-self: center;
    width: 100%;
  }

  .app-grid.season-mode,
  .app-grid:has(#seasonCard:not(.hidden)) {
    grid-template-columns: minmax(0, var(--season-desktop-max-width));
    justify-content: center;
    max-width: none;
    width: min(var(--season-desktop-max-width), calc(100vw - 2rem));
  }

  .app-grid.season-mode #seasonCard,
  .app-grid:has(#seasonCard:not(.hidden)) #seasonCard {
    grid-column: 1;
    width: 100%;
  }

  #setupCard {
    grid-column: 1;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #liveCard,
  #statsCard,
  #individualStatsCard,
  #logCard {
    grid-column: 2;
  }

  .app-grid.match-mode #liveCard,
  .app-grid.match-mode #statsCard,
  .app-grid.match-mode #individualStatsCard,
  .app-grid.match-mode #logCard {
    grid-column: 1;
  }

  .app-grid.match-mode #liveCard,
  .app-grid:has(#statsCard:not(.hidden)) #liveCard {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }

  .app-grid.match-mode #statsCard,
  .app-grid:has(#statsCard:not(.hidden)) #statsCard {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }

  .app-grid.match-mode #individualStatsCard,
  .app-grid:has(#statsCard:not(.hidden)) #individualStatsCard {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1199px) and (orientation: portrait) {
  .app-grid.season-mode,
  .app-grid:has(#seasonCard:not(.hidden)),
  .app-grid.match-mode,
  .app-grid.match-mode:has(#statsCard:not(.hidden)),
  .app-grid:has(#statsCard:not(.hidden)) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .app-grid.match-mode #liveCard,
  .app-grid.match-mode #statsCard,
  .app-grid.match-mode #individualStatsCard,
  .app-grid:has(#statsCard:not(.hidden)) #liveCard,
  .app-grid:has(#statsCard:not(.hidden)) #statsCard,
  .app-grid:has(#statsCard:not(.hidden)) #individualStatsCard {
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }
}

@media (hover: none) and (pointer: coarse) {
  .app-grid.season-mode,
  .app-grid:has(#seasonCard:not(.hidden)),
  .app-grid.match-mode,
  .app-grid.match-mode:has(#statsCard:not(.hidden)),
  .app-grid:has(#statsCard:not(.hidden)) {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

.print-report-root {
  display: none;
}

.print-page {
  background: #fff;
  color: #0e2239;
  padding: 0.7mm 3mm;
  display: grid;
  gap: 1.4mm;
}

.print-page-header {
  display: grid;
  grid-template-columns: 22mm 1fr;
  align-items: center;
  gap: 3mm;
  border-bottom: 1px solid #d5deea;
  padding-bottom: 2mm;
}

.print-logo {
  width: 20mm;
  height: 20mm;
  object-fit: contain;
}

.print-page-header h2 {
  margin: 0;
  font-size: 10.5pt;
}

.print-page-header p {
  margin: 1mm 0 0;
  font-size: 8pt;
  color: #4d6078;
}

.print-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2mm;
  border: 1px solid #d6dfea;
  border-radius: 2mm;
  padding: 1.5mm;
}

.print-scoreboard > div {
  display: grid;
  justify-items: center;
  gap: 0.7mm;
}

.print-scoreboard span {
  font-size: 8.5pt;
  color: #4a5c72;
}

.print-scoreboard strong {
  font-size: 14pt;
  color: #0d2238;
}

.print-score-sep {
  font-size: 12pt;
  font-weight: 700;
  color: #5a6c83;
}

.print-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8mm;
}

.print-stats-card,
.print-top-card,
.print-player-card {
  border: 1px solid #d6dfea;
  border-radius: 2mm;
  padding: 1.2mm;
  background: #fff;
}

.print-opponent-card {
  border-color: #efcaca;
}

.print-block h3,
.print-stats-card h4,
.print-top-card h4,
.print-player-card h3 {
  margin: 0 0 1mm;
  font-size: 8.6pt;
}

.print-subtitle {
  margin-top: 2mm !important;
}

.print-main-table,
.print-mini-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.print-main-table {
  table-layout: fixed;
}

.print-main-table th,
.print-main-table td,
.print-mini-table th,
.print-mini-table td {
  border: 1px solid #d7dfea;
  padding: 0.55mm 0.6mm;
  font-size: 6.5pt;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.print-main-table thead th {
  background: #f2f5fa;
  font-weight: 700;
}

.print-main-table td:nth-child(n + 2),
.print-main-table th:nth-child(n + 2) {
  text-align: center;
}

.print-main-table th,
.print-main-table td {
  width: calc(100% / 14);
}

.print-team-row td {
  font-weight: 700;
  background: #fafcff;
}

.print-top-card ol {
  margin: 0;
  padding-left: 5mm;
  display: grid;
  gap: 0.8mm;
}

.print-top-card li {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  font-size: 7pt;
}

.print-empty {
  margin: 0;
  font-size: 7pt;
  color: #5f7187;
}

.print-impact-summary {
  margin: 1mm 0 0;
  font-size: 7pt;
  color: #233950;
}

.print-shot-miss::before,
.print-shot-miss::after {
  content: none !important;
}

.print-miss-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #d13b2f;
  font-weight: 700;
  line-height: 1;
  font-size: 3.2mm;
}

.print-possession-chart {
  display: grid;
  grid-template-columns: 28mm 1fr;
  gap: 1.2mm;
  align-items: center;
}

.print-possession-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.8mm;
}

.print-possession-donut {
  width: 24mm;
  height: 24mm;
  display: block;
}

.print-possession-figure figcaption {
  display: grid;
  justify-items: center;
  font-size: 6.6pt;
  color: #4f6178;
  line-height: 1.1;
}

.print-possession-figure strong {
  font-size: 8.4pt;
  color: #142c46;
}

.print-possession-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6mm;
}

.print-possession-legend li {
  display: grid;
  grid-template-columns: 3mm 1fr auto;
  align-items: center;
  gap: 1mm;
  font-size: 6.4pt;
}

.print-possession-legend .dot {
  width: 2.4mm;
  height: 2.4mm;
  border-radius: 50%;
}

.print-court-board {
  width: 100%;
  max-width: none;
  margin: 0;
}

.print-collective-court-small {
  max-width: 80mm;
  margin: 0 auto;
}

.print-player-court {
  max-width: 52mm;
  margin: 0 auto;
}

.print-player-cards {
  display: grid;
  gap: 1.2mm;
}

.print-player-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 1.2mm;
  align-items: start;
}
@media print {
  @page {
    size: A4;
    margin: 6mm 10mm;
  }

  body {
    margin: 0;
    background: #fff;
    color: #111;
  }

  body.printing-report * {
    visibility: hidden;
  }

  body.printing-report .print-report-root,
  body.printing-report .print-report-root * {
    visibility: visible;
  }

  body.printing-report .print-report-root {
    display: block;
    position: relative;
  }

  body.printing-report .topbar,
  body.printing-report .app-grid,
  body.printing-report .app-footer,
  body.printing-report .modal {
    display: none !important;
  }

  body.printing-report .print-court-board {
    background: #f5e0bf !important;
    border-color: #87633d !important;
  }

  body.printing-report .print-court-board .court-stroke {
    stroke: #6f5230 !important;
  }

  body.printing-report .print-court-board .court-stroke-thick {
    stroke: #6f5230 !important;
  }

  body.printing-report .print-court-board .court-svg {
    position: relative;
    z-index: 1;
  }

  body.printing-report .print-court-board .court-markers {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
  }

  body.printing-report .print-court-board .player-shot-marker {
    width: 2.6mm !important;
    height: 2.6mm !important;
    display: block !important;
    border: 0.6mm solid #0b5ed7 !important;
    background: transparent !important;
  }

  body.printing-report .print-court-board .player-shot-marker.made {
    border-color: #0b5ed7 !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss::before,
  body.printing-report .print-court-board .player-shot-marker.miss::after {
    content: none !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss {
    border: none !important;
    background: transparent !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss::before {
    content: "×" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -52%) !important;
    color: #d13b2f !important;
    font-size: 3.4mm !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .topbar,
  .app-grid,
  .app-footer,
  .modal {
    visibility: visible;
  }

  .print-page {
    break-after: page;
    page-break-after: always;
  }

  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-player-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

.home-hero {
  text-align: center;
  margin-bottom: 0.8rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-tile {
  border: 1px solid #d7e0ec;
  border-radius: 16px;
  padding: 0.55rem;
  background: #f7fbff;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.home-tile-art {
  width: 100%;
  max-width: 185px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  pointer-events: none;
  margin: 0 auto;
}

.home-tile strong {
  font-size: 1rem;
  color: #10243e;
}

@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-tile {
    min-height: 240px;
  }

  .video-overlay-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Icon-only startup page */
.app-grid.home-mode {
  display: grid;
  place-items: center;
  max-width: none;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

.app-grid.home-mode #homeCard {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: 760px;
  width: 100%;
  padding: 0.75rem;
  margin: 0;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-tile {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  display: block;
}

.home-tile:hover,
.home-tile:focus-visible {
  background: transparent;
  outline: none;
}

.home-tile-art {
  width: min(100%, 280px);
  height: auto;
  max-width: 280px;
  display: block;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* Final responsive overrides: iPhone / iPad / Desktop + robust centering */
.app-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-grid.home-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  justify-content: center;
  align-content: start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.75rem 0.75rem 1rem;
}

.app-grid.home-mode #homeCard {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  padding: 0.5rem;
}

.home-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
  align-items: start;
}

.home-tile {
  width: 100%;
  display: flex;
  justify-content: center;
}

.home-tile-art {
  width: 100%;
  height: auto;
  max-width: 185px;
}

/* iPhone */
@media (max-width: 767px) {
  .topbar {
    background: rgba(248, 248, 251, 0.9);
    color: #1f2328;
    border-bottom: 1px solid #d4d8df;
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
    padding: 0.5rem 0.62rem;
    gap: 0.45rem;
  }

  .topbar-logo {
    width: 142px;
    height: 50px;
    transform: none;
  }

  .topbar-actions {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    justify-content: flex-end;
    gap: 0.3rem;
    row-gap: 0.3rem;
  }

  .topbar-actions .btn {
    background: #ffffff;
    color: #1e2a3b;
    border: 1px solid #d7dfec;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08);
  }

  .topbar-actions .btn:hover {
    background: #f1f5fb;
    border-color: #c7d3e6;
  }

  .topbar-actions .header-menu > .header-menu-trigger.btn {
    padding: 0.32rem 0.6rem;
    min-height: auto;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
  }

  .topbar-actions .header-menu.is-open > .header-menu-trigger.btn {
    background: #e6edf8;
    border-color: #c5d3e7;
  }

  .topbar-actions .lang-toggle-btn {
    background: #ffffff;
    color: #1e2a3b;
    border: 1px solid #d7dfec;
    border-radius: 999px;
  }

  .header-menu-panel {
    left: auto;
    right: 0;
    top: calc(100% + 0.3rem);
    width: min(300px, calc(100vw - 1rem));
    min-width: min(300px, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, 520px);
    overflow: auto;
    border-radius: 12px;
    padding: 0.38rem;
    gap: 0.24rem;
    border: 1px solid #cfd5de;
    background: #fbfcff;
    box-shadow: 0 16px 30px rgba(17, 24, 39, 0.16);
  }

  #accountMenu .header-menu-panel {
    right: 0;
  }

  .header-menu-panel .btn {
    min-height: auto;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: #1d2735;
    font-size: 0.85rem;
    padding: 0.48rem 0.6rem;
    box-shadow: none;
  }

  .header-menu-panel .btn:hover {
    background: #e8edf6;
    border-color: #d2daea;
  }

  .header-menu-panel .btn.btn-danger {
    color: #ad2430;
  }

  .header-menu-separator {
    margin: 0.18rem 0.08rem;
    background: #d8deea;
  }

  .app-grid {
    max-width: 100%;
    padding: 0.6rem;
    gap: 0.7rem;
  }

  .app-grid.home-mode {
    padding: 0.4rem 0.5rem 0.9rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 520px;
    padding: 0.25rem;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .home-tile-art {
    max-width: 120px;
  }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1199px) {
  .app-grid {
    max-width: 980px;
    padding: 0.85rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 860px;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .home-tile-art {
    max-width: 165px;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .app-grid {
    max-width: 1240px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 1160px;
  }

  .home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .home-tile-art {
    max-width: 155px;
  }
}

/* Startup screen overrides */
.app-grid.home-mode {
  max-width: none;
  width: 100%;
  min-height: calc(100vh - 82px);
  padding: 0;
  margin: 0;
}

.app-grid.home-mode #homeCard {
  display: block;
  width: 100%;
  min-height: calc(100vh - 82px);
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.startup-hero {
  width: 100%;
  min-height: calc(100vh - 82px);
  background-image:
    linear-gradient(135deg, rgba(9, 12, 18, 0.22), rgba(8, 10, 14, 0.5)),
    url("assets/fondecran8.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: end center;
  position: relative;
}

.home-version-text {
  position: absolute;
  left: 50%;
  bottom: 0.65rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #f4f7fb;
  background: rgba(6, 10, 16, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.startup-overlay {
  width: min(980px, 96vw);
  padding: 1.1rem 0.8rem 1.6rem;
}

.app-grid.home-mode .home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
}

.app-grid.home-mode .home-tile {
  width: 100%;
  display: flex;
  justify-content: center;
  background: rgba(8, 12, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 0.45rem;
  backdrop-filter: blur(2px);
}

.app-grid.home-mode .home-tile:hover,
.app-grid.home-mode .home-tile:focus-visible {
  background: rgba(8, 12, 18, 0.76);
  border-color: rgba(255, 255, 255, 0.38);
}

.app-grid.home-mode .home-tile-art {
  width: min(100%, 175px);
  max-width: 175px;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .app-grid.home-mode .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .app-grid.home-mode,
  .app-grid.home-mode #homeCard,
  .startup-hero {
    min-height: calc(100vh - 126px);
  }
}

/* Desktop alignment fixes for helper/justification texts */
@media (min-width: 961px) {
  .video-analysis-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }

  .video-report-layout {
    grid-template-columns: minmax(0, 2.35fr) minmax(240px, 0.72fr);
    align-items: start;
  }

  .video-stage-card,
  .video-sidebar-card {
    max-width: none;
  }

  .video-sidebar {
    width: 360px;
    align-self: start;
    position: sticky;
    top: 84px;
  }

  #shotHint,
  #videoLoadedLabel,
  #videoEventsEmpty,
  #videoLineupHint,
  .modal .shot-hint {
    text-align: center;
  }
}

.app-grid.training-book-mode {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: calc(100dvh - 82px);
  background: #101010;
}

#trainingBookCard {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #101010;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#trainingBookCard .training-book-mount {
  min-height: calc(100dvh - 82px);
}

@media (max-width: 640px) {
  .app-grid.training-book-mode,
  #trainingBookCard .training-book-mount {
    min-height: calc(100dvh - 126px);
  }
}

body.dark-mode .topbar {
  background: #1a1a1a;
  color: #f0f0f0;
  border-bottom: 1px solid #2a2a2a;
}

body.dark-mode .topbar-actions .btn,
body.dark-mode .header-menu-panel .btn {
  background: #232323;
  color: #ececec;
  border-color: #3b3b3b;
}

body.dark-mode .topbar-actions .btn:hover,
body.dark-mode .header-menu-panel .btn:hover {
  background: #2d2d2d;
  border-color: #4b4b4b;
}

body.dark-mode .header-menu-panel {
  background: #171717;
  border-color: #323232;
}

body.dark-mode .header-menu-separator {
  background: #343434;
}

body.dark-mode .card {
  background: var(--panel);
  color: var(--text);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #121212;
  color: #ececec;
  border-color: #3c3c3c;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #9a9a9a;
}

body.dark-mode .shot-hint,
body.dark-mode .field > span,
body.dark-mode .muted {
  color: #b7b7b7;
}

body.dark-mode .btn.btn-primary {
  background: #4f4f4f;
  border-color: #666666;
  color: #ffffff;
}

body.dark-mode .btn.btn-primary:hover:enabled {
  background: #676767;
  border-color: #7c7c7c;
}

@media (min-width: 768px) {
  body.dark-mode .topbar {
    background: rgba(24, 24, 24, 0.95);
    color: #f0f0f0;
    border-bottom-color: #2f2f2f;
    backdrop-filter: blur(12px) saturate(1);
    -webkit-backdrop-filter: blur(12px) saturate(1);
  }
}

body.dark-mode .modal {
  background: rgba(0, 0, 0, 0.66);
}

body.dark-mode .modal-card,
body.dark-mode .local-data-modal-card {
  background: #181818;
  color: #ececec;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

body.dark-mode .video-stage-card,
body.dark-mode .video-sidebar-card,
body.dark-mode .video-report-panel,
body.dark-mode .video-event-item,
body.dark-mode .video-report-event-block,
body.dark-mode .video-analysis-summary div,
body.dark-mode .summary div,
body.dark-mode .season-roster-grid div,
body.dark-mode .season-import-review-row,
body.dark-mode .definitions-list div,
body.dark-mode .auth-feedback-text,
body.dark-mode .local-data-warning-box,
body.dark-mode .decision-assistant-item-critical,
body.dark-mode .decision-assistant-item-warning,
body.dark-mode .decision-assistant-item-info {
  background: #1a1a1a;
  color: #ececec;
  border-color: #323232;
}

body.dark-mode .video-report-timeline-list {
  border-color: #3a3a3a;
  background: #1b1b1b;
}

body.dark-mode .video-report-timeline-list.is-drop-active {
  border-color: #5a5a5a;
  background: #232323;
}

body.dark-mode .auth-feedback-text {
  background: #1b1b1b;
  color: #d8d8d8;
  border-color: #353535;
}

body.dark-mode .auth-feedback-text.is-error {
  background: #2a1a1a;
  border-color: #5b2f2f;
  color: #f2c5c5;
}

body.dark-mode .season-player-profile-card,
body.dark-mode .season-player-profile-grid div,
body.dark-mode .season-player-profile-stats article,
body.dark-mode .season-player-metric-tile,
body.dark-mode .season-player-mirwald-box,
body.dark-mode .season-player-mirwald-grid div,
body.dark-mode .season-player-measures-section,
body.dark-mode .season-player-measure-row,
body.dark-mode .season-player-chart-card {
  background: #1a1a1a !important;
  color: #ececec !important;
  border-color: #343434 !important;
}

body.dark-mode .season-player-chart-svg {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
}

body.dark-mode .season-player-section-title,
body.dark-mode .season-player-profile-shot-map h4,
body.dark-mode .season-player-mirwald-box h4,
body.dark-mode .season-player-chart-card h5,
body.dark-mode .season-roster-grid strong,
body.dark-mode .season-roster-headline h3,
body.dark-mode .video-report-event-main strong,
body.dark-mode .video-report-event-main span,
body.dark-mode .summary strong {
  color: #f1f1f1 !important;
  -webkit-text-fill-color: #f1f1f1 !important;
}

body.dark-mode .season-player-profile-grid span,
body.dark-mode .season-player-profile-stats span,
body.dark-mode .season-player-metric-label,
body.dark-mode .season-player-measure-date,
body.dark-mode .season-player-measure-values,
body.dark-mode .season-player-chart-empty,
body.dark-mode .season-player-chart-caption,
body.dark-mode .season-roster-grid span,
body.dark-mode .season-import-review-meta,
body.dark-mode .video-report-event-main small,
body.dark-mode .summary span,
body.dark-mode .season-system-toggle-label {
  color: #b7b7b7 !important;
  -webkit-text-fill-color: #b7b7b7 !important;
}

body.dark-mode #seasonPlayerModal .modal-card,
body.dark-mode #seasonPlayerProfileModal .modal-card {
  background: #181818 !important;
}

body.dark-mode #seasonPlayerModal .field span,
body.dark-mode #seasonPlayerModal .field input,
body.dark-mode #seasonPlayerModal .field select,
body.dark-mode #seasonPlayerModal .field input::placeholder,
body.dark-mode #seasonPlayerProfileModal h3,
body.dark-mode #seasonPlayerProfileModal p,
body.dark-mode #seasonPlayerProfileModal span,
body.dark-mode #seasonPlayerProfileModal strong,
body.dark-mode #seasonPlayerProfileModal div {
  color: #e8e8e8 !important;
  -webkit-text-fill-color: #e8e8e8 !important;
}

body.dark-mode #seasonPlayerModal .field input,
body.dark-mode #seasonPlayerModal .field select,
body.dark-mode .season-player-suggestions {
  background: #131313 !important;
  border-color: #363636 !important;
}

body.dark-mode .season-player-suggestion-item {
  color: #e8e8e8 !important;
  -webkit-text-fill-color: #e8e8e8 !important;
}

body.dark-mode .season-player-suggestion-item:hover {
  background: #252525 !important;
}

body.dark-mode .table-wrap table,
body.dark-mode .season-table-wrap table,
body.dark-mode .season-individual-table,
body.dark-mode .season-calendar-table {
  background: #171717;
  color: #ececec;
}

body.dark-mode th {
  background: #242424;
  color: #f0f0f0;
  border-bottom-color: #3a3a3a;
}

body.dark-mode td {
  color: #e5e5e5;
  border-bottom-color: #333333;
}

body.dark-mode tbody tr:nth-child(even) td {
  background: #151515;
}

body.dark-mode tbody tr:nth-child(odd) td {
  background: #1a1a1a;
}

body.dark-mode tbody tr:hover td {
  background: #242424;
}

body.dark-mode .season-roster-table-wrap tbody tr.is-selected td {
  background: #2a2a2a;
}

body.dark-mode .player-item,
body.dark-mode .season-player-open-link,
body.dark-mode .player-name-btn {
  color: #d7d7d7;
  border-color: #3b3b3b;
}

body.dark-mode .player-name-btn,
body.dark-mode .season-player-open-link {
  text-decoration-color: #8f8f8f;
}

body.dark-mode .btn-light {
  background: #2a2a2a;
  color: #ececec;
  border: 1px solid #3d3d3d;
}

body.dark-mode .btn-light:hover:enabled {
  background: #343434;
  border-color: #4b4b4b;
}

body.dark-mode [class*="video"] .field span,
body.dark-mode .video-sidebar-card h3,
body.dark-mode .video-analysis-title-block h2,
body.dark-mode .video-analysis-title-block p {
  color: #d9d9d9;
}

body.dark-mode #pricingModal .modal-card,
body.dark-mode #aboutModal .modal-card,
body.dark-mode #licenseModal .modal-card {
  background: #181818;
  color: #eaeaea;
}

body.dark-mode #aboutModal .help-text-content,
body.dark-mode #licenseModal .help-text-content {
  color: #d8d8d8;
}

body.dark-mode #aboutModal .help-text-content h4,
body.dark-mode #licenseModal .help-text-content h4,
body.dark-mode #aboutModal .help-text-content strong,
body.dark-mode #licenseModal .help-text-content strong,
body.dark-mode #aboutModal .help-version,
body.dark-mode #licenseModal .help-version {
  color: #f1f1f1 !important;
  -webkit-text-fill-color: #f1f1f1 !important;
}

body.dark-mode #aboutModal .help-text-content a,
body.dark-mode #licenseModal .help-text-content a {
  color: #d7d7d7 !important;
  text-decoration-color: #8a8a8a;
}

body.dark-mode .pricing-modal-card {
  background: #181818;
}

body.dark-mode .pricing-hero {
  background: #1d1d1d;
  border-color: #343434;
}

body.dark-mode .pricing-kicker,
body.dark-mode .pricing-hero h4,
body.dark-mode .pricing-hero p,
body.dark-mode .pricing-subtitle,
body.dark-mode .pricing-free-price,
body.dark-mode .pricing-pro-price,
body.dark-mode .pricing-feature-list,
body.dark-mode .pricing-plan h5 {
  color: #ececec;
}

body.dark-mode .pricing-plan {
  background: #1b1b1b;
  border-color: #333333;
}

body.dark-mode .pricing-pro {
  border-color: #4a4a4a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.dark-mode .pricing-feature-list li::marker {
  color: #b0b0b0;
}

body.dark-mode .definitions-list strong,
body.dark-mode .player-stats-grid .stats-group-title {
  color: #efefef;
}

body.dark-mode .season-player-open-link,
body.dark-mode .player-name-btn {
  color: #dddddd;
}

@media (min-width: 768px) {
  body.dark-mode .topbar-actions .header-menu > .header-menu-trigger.btn {
    background: transparent;
    color: #efefef;
    border-color: transparent;
  }

  body.dark-mode .topbar-actions .header-menu > .header-menu-trigger.btn:hover {
    background: #2a2a2a;
    border-color: #3d3d3d;
  }

  body.dark-mode .topbar-actions .header-menu.is-open > .header-menu-trigger.btn {
    background: #313131;
    border-color: #454545;
    color: #f4f4f4;
  }

  body.dark-mode .topbar-actions .lang-toggle-btn {
    background: transparent;
    color: #efefef;
    border-color: transparent;
  }

  body.dark-mode .topbar-actions .lang-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #3d3d3d;
  }

  body.dark-mode .header-menu-panel .btn {
    color: #ececec;
  }
}

body.dark-mode .account-name-text,
body.dark-mode .account-status-text,
body.dark-mode .account-plan-row,
body.dark-mode .account-message-text {
  color: #e2e2e2 !important;
}

body.dark-mode .plan-badge.plan-free {
  background: #323232;
  color: #f1f1f1;
}

body.dark-mode .plan-badge.plan-paid {
  background: #3b3b3b;
  color: #f1f1f1;
}

body.dark-mode .account-menu-panel .btn.btn-primary {
  background: #4f4f4f;
  border-color: #666666;
  color: #ffffff;
}

body.dark-mode .account-menu-panel .btn.btn-primary:hover:enabled {
  background: #676767;
  border-color: #7c7c7c;
}

body.dark-mode .live-header strong,
body.dark-mode .live-title-row h2,
body.dark-mode .stats-header-row h2,
body.dark-mode .stats-header-row-compact h3,
body.dark-mode .collective-map-wrap h4,
body.dark-mode .top5-card strong,
body.dark-mode .event-log li {
  color: #efefef;
}

body.dark-mode .stats-live-shell,
body.dark-mode .live-stats-panel,
body.dark-mode #liveCard.card,
body.dark-mode #statsCard.card,
body.dark-mode #individualStatsCard.card,
body.dark-mode #logCard.card {
  background: #1a1a1a;
  border-color: #333333;
  color: #ececec;
}

body.dark-mode .summary div,
body.dark-mode .player-stats-grid div,
body.dark-mode .team-row {
  background: #202020;
  border-color: #363636;
  color: #ececec;
}

body.dark-mode #statsCard.opponent-theme .summary div,
body.dark-mode #statsCard.opponent-theme .player-stats-grid div {
  background: #242020;
  border-color: #4a3939;
}

body.dark-mode .summary span,
body.dark-mode .player-stats-grid span,
body.dark-mode .event-log,
body.dark-mode .shot-hint {
  color: #bdbdbd;
}

body.dark-mode .player-name-btn {
  color: #e0e0e0;
}

body.dark-mode th {
  background: #262626;
  color: #f0f0f0;
  border-bottom-color: #3a3a3a;
}

body.dark-mode td {
  color: #e5e5e5;
  border-bottom-color: #343434;
}

body.dark-mode .team-row {
  font-weight: 700;
}

body.dark-mode .foul-limit {
  background: #3a2323;
  color: #ffd7d7;
}

body.dark-mode .foul-limit .player-name-btn {
  color: #ffd7d7;
}

body.dark-mode .player-team-btn {
  border-color: #5a5a5a;
}

body.dark-mode .result-actions .btn,
body.dark-mode .gain-actions .btn {
  background: #2b2b2b !important;
  color: #f4f4f4 !important;
  border-color: #3b3b3b !important;
}

body.dark-mode .result-actions .btn:hover:enabled,
body.dark-mode .gain-actions .btn:hover:enabled {
  background: #363636 !important;
}

body.dark-mode .scoreboard {
  background: #1a1a1a;
  border-color: #343434;
}

body.dark-mode .score-side {
  background: #222222;
  color: #efefef;
}

body.dark-mode .score-side.possession {
  background: #2f6b45;
  color: #f4fff7;
}

body.dark-mode .score-sep,
body.dark-mode .label {
  color: #bdbdbd;
}

body.dark-mode .decision-assistant-panel,
body.dark-mode .coach-insights-card {
  background: #1a1a1a;
  border-color: #343434;
}

body.dark-mode .decision-assistant-item,
body.dark-mode .decision-assistant-list {
  color: #e5e5e5;
}

body.dark-mode .decision-assistant-item strong,
body.dark-mode .decision-assistant-item .shot-hint {
  color: #d4d4d4;
}

body.dark-mode .decision-assistant-item-critical,
body.dark-mode .decision-assistant-item-warning,
body.dark-mode .decision-assistant-item-info {
  background: #222222;
  border-color: #3a3a3a;
}

body.dark-mode .possession-pie-donut::after {
  background: #1a1a1a;
}

body.dark-mode .possession-pie-figure figcaption strong,
body.dark-mode .possession-pie-figure figcaption span,
body.dark-mode .possession-pie-legend strong,
body.dark-mode .possession-empty,
body.dark-mode .possession-pie-legend li {
  color: #d7d7d7;
}

body.dark-mode .top5-card {
  background: #1f1f1f;
  border-color: #363636;
}

body.dark-mode .top5-card h4,
body.dark-mode .top5-card li,
body.dark-mode .top5-card strong {
  color: #ececec;
}