/* ── team.css ── */

/* ── Nav (matches homeNav from other pages) ── */
.homeNav {
  background: var(--card);
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  z-index: 100;
}
.homeNavInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.homeNavLogo {
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.5px;
}
.homeNavLogo .navLogoImg {
  height: 108px;
  width: auto;
  display: block;
  margin: -38px 0;
}
.homeNavLinks {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* .homeNavLink removed — nav simplified */
.homeNavBtn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s;
}
.homeNavBtn:hover {
  background: #6d28d9;
}
.homeNavUserPill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 200px;
  transition: border-color 0.15s;
}
.homeNavUserPill:hover {
  border-color: rgba(124,58,237, 0.35);
}
.homeNavAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(124,58,237, 0.10);
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.homeNavAvatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.homeNavAvatar.hasInitials {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.homeNavUserPill span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Gate ── */
.teamGate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 32px 16px;
}
.teamGateInner {
  text-align: center;
  max-width: 440px;
}
.teamGateIcon {
  font-size: 56px;
  margin-bottom: 12px;
}
.teamGateInner h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.teamGateInner p {
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.teamGateBtn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 32px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: opacity .15s;
}
.teamGateBtn:hover { opacity: .9; }
.teamGateLink {
  display: block;
  margin-top: 12px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
}
.teamGateLink:hover { text-decoration: underline; }

/* ── Invite Preview ── */
.teamInvitePreview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 32px 16px;
}
.teamInviteLogo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--bg);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
}
.teamInviteLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Layout ── */
.teamWrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
.teamHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.teamHeader h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.teamBackBtn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.teamBackBtn:hover { text-decoration: underline; }

.teamDetailTitle {
  display: flex;
  align-items: center;
  gap: 16px;
}
.teamDetailLogo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.teamDetailLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teamDetailLocation {
  color: var(--muted);
  font-size: 14px;
}

/* ── Cards ── */
.teamCard {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.teamCardHd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.teamCardTitle {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.teamCardBd {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teamMuted {
  color: var(--muted);
  font-size: 13px;
}
.teamBioText {
  color: var(--text);
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Team Code ── */
.teamCodeBox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.teamCodeValue {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--accent);
  background: var(--bg);
  padding: 10px 20px;
  border-radius: 10px;
  border: 2px dashed var(--bd);
}

/* ── Buttons ── */
.teamBtn {
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 20px;
  transition: opacity .15s;
  font-family: inherit;
}
.teamBtn:hover { opacity: .85; }
.teamBtnPrimary {
  background: var(--accent);
  color: #fff;
}
.teamBtnOutline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.teamBtnDanger {
  background: transparent;
  color: #dc2626;
  border: 1.5px solid #dc2626;
}
.teamBtnSmall {
  padding: 6px 14px;
  font-size: 13px;
}

/* ── Team List ── */
.teamList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teamListItem {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.teamListItem:hover {
  border-color: var(--accent);
}
.teamListLogo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
}
.teamListLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teamListInfo {
  flex: 1;
  min-width: 0;
}
.teamListName {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.teamListMeta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.teamListBadge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.teamListBadge.coach {
  background: #7c3aed20;
  color: var(--accent);
}
.teamListBadge.athlete {
  background: #2563eb20;
  color: #2563eb;
}
.teamListBadge.pending {
  background: #f59e0b20;
  color: #b45309;
}
.teamListChevron {
  color: var(--muted);
  font-size: 18px;
}
.teamEmpty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}

/* ── Form ── */
.teamFormGroup {
  margin-bottom: 16px;
}
.teamFormGroup label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.teamFormGroup input,
.teamFormGroup textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  transition: border-color .15s;
  box-sizing: border-box;
}
.teamFormGroup input:focus,
.teamFormGroup textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.teamFormRow {
  display: flex;
  gap: 12px;
}
.teamFormRow .teamFormGroup { flex: 1; }
.teamFormActions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.teamFormError {
  color: #dc2626;
  font-size: 13px;
}
.teamLogoUpload {
  display: flex;
  align-items: center;
  gap: 16px;
}
.teamLogoPreview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  border: 1.5px dashed var(--bd);
}
.teamLogoPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Search Athletes ── */
.teamSearchRow {
  display: flex;
  gap: 8px;
}
.teamSearchRow input {
  flex: 1;
  padding: 8px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
}
.teamSearchRow input:focus {
  border-color: var(--accent);
  outline: none;
}
.teamSearchResults {
  margin-top: 8px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  overflow: hidden;
}
.teamSearchItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
}
.teamSearchItem:last-child { border-bottom: none; }
.teamSearchAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.teamSearchInfo {
  flex: 1;
  min-width: 0;
}
.teamSearchName {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.teamSearchEmail {
  color: var(--muted);
  font-size: 12px;
}

/* ── Search result status tags ── */
.teamTagUnclaimed,
.teamTagOnTeam,
.teamTagOtherTeam {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1;
}
.teamTagUnclaimed {
  background: #fef3c7;
  color: #92400e;
  cursor: pointer;
}
.teamTagUnclaimed:hover {
  background: #fde68a;
}
.teamTagOnTeam {
  background: rgba(124,58,237,.12);
  color: #7c3aed;
}
.teamTagOtherTeam {
  background: #e5e7eb;
  color: #6b7280;
}

/* ── Search error modal ── */
.teamModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.teamModalBox {
  background: var(--card, #fff);
  border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.teamModalIcon {
  font-size: 36px;
  margin-bottom: 12px;
}
.teamModalMsg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #333);
  margin-bottom: 20px;
}
.teamModalClose {
  min-width: 100px;
}

/* ── Invite Section ── */
.teamInviteSection {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
}
.teamInviteSection h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.teamInviteActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.teamInvitesList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teamInviteItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}
.teamInviteUrl {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamInviteRole {
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #7c3aed20;
  color: var(--accent);
}

/* ── Email Invites ── */
.teamEmailInviteSection {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bd);
}
.teamEmailInviteSection h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.teamEmailInviteMsg {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.teamEmailInviteMsg.success {
  background: #dcfce7;
  color: #166534;
}
.teamEmailInviteMsg.error {
  background: #fee2e2;
  color: #991b1b;
}
.teamEmailInvitesList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.teamEmailInviteItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}
.teamEmailInviteAddr {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamEmailInviteStatus {
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.teamEmailInviteStatus.pending {
  background: #fef3c7;
  color: #92400e;
}
.teamEmailInviteStatus.joined {
  background: #dcfce7;
  color: #166534;
}
.teamEmailInviteDate {
  font-size: 12px;
  white-space: nowrap;
}
.teamEmailInviteActions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Members List ── */
.teamMembersList {
  display: flex;
  flex-direction: column;
}
.teamMemberRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
}
.teamMemberRow:last-child { border-bottom: none; }
.teamMemberAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.teamMemberAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teamMemberInfo {
  flex: 1;
  min-width: 0;
}
.teamMemberName {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.teamMemberSub {
  color: var(--muted);
  font-size: 12px;
}
.teamMemberRole {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.teamMemberRole.head_coach {
  background: #7c3aed20;
  color: var(--accent);
}
.teamMemberRole.assistant_coach {
  background: #8b5cf620;
  color: #7c3aed;
}
.teamMemberRole.athlete {
  background: #2563eb20;
  color: #2563eb;
}
.teamMemberRole.pending {
  background: #f59e0b20;
  color: #b45309;
}

/* ── Invite Response ── */
.teamInviteResponse p {
  margin: 0 0 16px;
  color: var(--text);
}
.teamInviteResponseBtns {
  display: flex;
  gap: 12px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .teamWrap { padding: 16px 12px 60px; }
  .teamHeader h1 { font-size: 20px; }
  .teamFormRow { flex-direction: column; gap: 0; }
  .teamCodeValue { font-size: 22px; letter-spacing: 4px; padding: 8px 14px; }
  .teamSearchRow { flex-direction: column; }
  .teamInviteActions { flex-direction: column; }
  .teamListItem { padding: 12px 14px; }
}
@media (max-width: 540px) {
  .homeNavLinks { gap: 4px; }
  .homeNavBtn { padding: 4px 10px; font-size: 12px; }
  .mobileHide { display: none; }
  #navAccountName { display: none; }
  .homeNavUserPill { padding: 4px; gap: 0; }
}


/* ═══════════════════════════════════════════════════════════
   Practice Sessions — AI Coach for team roster
   ═══════════════════════════════════════════════════════════ */

/* ── Upload zone ── */
.prcUpload { margin-bottom: 16px; }
.prcUploadDrop {
  border: 2px dashed var(--bd);
  border-radius: 14px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.prcUploadDrop:hover, .prcUploadDrop.dragover {
  border-color: var(--accent);
  background: rgba(124,58,237,.04);
}
.prcUploadIcon { font-size: 32px; margin-bottom: 8px; }
.prcUploadText { font-size: 14px; color: var(--text); margin: 0; }
.prcUploadBrowse {
  background: none; border: none; color: var(--accent); font-weight: 700;
  cursor: pointer; text-decoration: underline; font-size: 14px; padding: 0;
}
.prcUploadHint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.prcUploadForm { padding: 0; }
.prcUploadPreview { position: relative; margin-bottom: 14px; }
.prcPreviewEl {
  width: 100%; max-height: 240px; border-radius: 10px;
  background: #000; object-fit: contain;
}
.prcRemoveBtn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 28px; height: 28px;
  font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.prcFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 600px) { .prcFields { grid-template-columns: 1fr; } }
.prcLabel { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.prcReq { color: #dc2626; }
.prcOpt { color: var(--muted); font-weight: 400; }
.prcSelect, .prcInput {
  padding: 8px 12px; border: 1px solid var(--bd); border-radius: 8px;
  font-size: 14px; background: var(--bg); color: var(--text);
}
.prcSelect:focus, .prcInput:focus { outline: none; border-color: var(--accent); }
.prcActions { display: flex; gap: 8px; justify-content: flex-end; }

/* Progress bar */
.prcProgress { margin-top: 10px; }
.prcProgressBar {
  height: 6px; background: var(--bd); border-radius: 3px; overflow: hidden;
}
.prcProgressFill {
  height: 100%; background: var(--accent); border-radius: 3px;
  width: 0; transition: width .2s;
}
.prcProgressText { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }

/* Spinner */
.prcSpinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: prcSpin .6s linear infinite;
}
.prcSpinnerLg {
  width: 32px; height: 32px;
  border: 3px solid rgba(124,58,237,.2); border-top-color: var(--accent);
  border-radius: 50%; animation: prcSpin .6s linear infinite;
  margin: 0 auto 12px;
}
@keyframes prcSpin { to { transform: rotate(360deg); } }

/* ── Filter bar ── */
.prcFilterBar {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--bd);
  margin-bottom: 8px; flex-wrap: wrap;
}
.prcFilterSelect { max-width: 200px; font-size: 13px; padding: 6px 10px; }
.prcVideoCount { font-size: 12px; color: var(--muted); margin-left: auto; }

/* ── Video list ── */
.prcVideoList { margin-top: 4px; }
.prcVideoCard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bd);
}
.prcVideoCard:last-child { border-bottom: none; }
.prcVideoIcon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(124,58,237,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.prcVideoInfo { flex: 1; min-width: 0; }
.prcVideoName { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prcVideoMeta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 2px; }
.prcVideoMeta span:not(:last-child)::after { content: "·"; margin-left: 8px; }
.prcVideoActions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.prcAnalyzeBtn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.prcAnalyzeBtn:hover { background: var(--accent); color: #fff; }
.prcAnalyzeBtn.processing {
  background: rgba(124,58,237,.1); color: var(--accent);
  cursor: wait; border-style: dashed;
}

.prcScore {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; border: none; cursor: pointer;
}
.prcScore.scoreHigh { background: rgba(5,150,105,.15); color: #059669; }
.prcScore.scoreMid { background: rgba(217,119,6,.15); color: #d97706; }
.prcScore.scoreLow { background: rgba(220,38,38,.15); color: #dc2626; }

.prcDeleteBtn {
  background: none; border: none; cursor: pointer; font-size: 16px;
  padding: 4px; opacity: .5; transition: opacity .15s;
}
.prcDeleteBtn:hover { opacity: 1; }

/* ── Empty state ── */
.prcEmpty { text-align: center; padding: 32px 12px; color: var(--muted); }
.prcEmptyIcon { font-size: 32px; margin-bottom: 8px; }
.prcEmpty p { margin: 4px 0; font-size: 14px; }
.prcEmptySub { font-size: 12px; }

/* ── Analysis Modal ── */
.prcOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; overflow-y: auto;
}
.prcModal {
  background: var(--card); border-radius: 18px;
  width: 100%; max-width: 640px;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  position: relative; padding: 0; margin: auto 0;
}
.prcModalClose {
  position: absolute; top: 14px; right: 14px;
  background: rgba(0,0,0,.06); border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); z-index: 2;
}
.prcModalClose:hover { background: rgba(0,0,0,.12); }
.prcModalHd { padding: 20px 24px 0; }
.prcModalTitle { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); }
.prcModalMeta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.prcModalBody { padding: 16px 24px 24px; }

.prcLoading { text-align: center; padding: 40px 0; color: var(--muted); }

/* Analysis video */
.prcAnalysisPlayerEl { width: 100%; border-radius: 10px; max-height: 340px; background: #000; object-fit: contain; }

/* Score ring */
.prcScoreSection { text-align: center; margin: 16px 0; }
.prcScoreRing { position: relative; display: inline-block; width: 120px; height: 120px; }
.prcScoreRing svg { width: 100%; height: 100%; }
.prcScoreVal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  font-size: 28px; font-weight: 800; color: var(--text);
}
.prcScoreLbl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, 40%);
  font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px;
}

/* Category scores */
.prcCategories { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.prcCatCard {
  background: var(--bg); border-radius: 10px; padding: 10px 14px;
  text-align: center; min-width: 90px;
}
.prcCatName { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.prcCatScore { font-size: 18px; font-weight: 700; }
.prcCatScore.scoreHigh { color: #059669; }
.prcCatScore.scoreMid { color: #d97706; }
.prcCatScore.scoreLow { color: #dc2626; }

/* Feedback */
.prcFeedback { margin-top: 16px; }
.prcFeedbackTitle { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.prcFeedbackList { display: flex; flex-direction: column; gap: 8px; }
.prcFbItem {
  display: flex; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--bd);
}
.prcFbItem.strength { border-color: rgba(5,150,105,.3); background: rgba(5,150,105,.05); }
.prcFbItem.critical { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.05); }
.prcFbItem.warning { border-color: rgba(217,119,6,.3); background: rgba(217,119,6,.05); }
.prcFbItem.improvement { border-color: rgba(124,58,237,.2); background: rgba(124,58,237,.04); }
.prcFbIcon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.prcFbBody { flex: 1; min-width: 0; }
.prcFbLabel { font-weight: 600; font-size: 13px; color: var(--text); }
.prcFbScore { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.prcFbScore.scoreHigh { background: rgba(5,150,105,.15); color: #059669; }
.prcFbScore.scoreMid { background: rgba(217,119,6,.15); color: #d97706; }
.prcFbScore.scoreLow { background: rgba(220,38,38,.15); color: #dc2626; }
.prcFbTip { font-size: 13px; color: var(--text); margin: 2px 0 0; line-height: 1.5; }
.prcFbMeta { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Metrics grid */
.prcMetrics { margin-top: 16px; }
.prcMetricsTitle { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.prcMetricsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prcMetricCard {
  background: var(--bg); border-radius: 10px; padding: 10px 12px;
}
.prcMetricName { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.prcMetricVal { font-size: 18px; font-weight: 700; color: var(--text); }
.prcMetricUnit { font-size: 12px; color: var(--muted); font-weight: 400; }
.prcMetricInfo {
  font-size: 13px; cursor: help; position: relative; line-height: 1; flex-shrink: 0;
}
.prcMetricInfo:hover::after,
.prcMetricInfo:focus::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--card); color: var(--text); border: 1px solid var(--bd); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0;
  line-height: 1.45; white-space: normal; width: 220px; max-width: 80vw; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); pointer-events: none;
}

/* Analysis error */
.prcAnalysisError { text-align: center; padding: 32px 12px; }

/* Delete modal */
.prcDeleteModal {
  background: var(--card); border-radius: 16px; padding: 24px;
  max-width: 380px; width: 100%; margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center;
}
.prcDeleteModal h3 { margin: 0 0 8px; font-size: 16px; }
.prcDeleteModal p { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.prcDeleteActions { display: flex; gap: 8px; justify-content: center; }

/* ── Dark-mode overrides ── */
[data-theme="dark"] .teamTagUnclaimed { background: rgba(245,158,11,.15); color: #fbbf24 }
[data-theme="dark"] .teamTagUnclaimed:hover { background: rgba(245,158,11,.25) }
[data-theme="dark"] .teamTagOtherTeam { background: var(--bd); color: var(--muted) }
[data-theme="dark"] .teamEmailInviteMsg.success { background: rgba(34,197,94,.12); color: #4ade80 }
[data-theme="dark"] .teamEmailInviteMsg.error { background: rgba(239,68,68,.12); color: #f87171 }
[data-theme="dark"] .teamEmailInviteStatus.pending { background: rgba(245,158,11,.15); color: #fbbf24 }
[data-theme="dark"] .teamEmailInviteStatus.joined { background: rgba(34,197,94,.12); color: #4ade80 }
[data-theme="dark"] .teamMemberRole.head_coach { background: rgba(124,58,237,.2) }
[data-theme="dark"] .teamMemberRole.assistant_coach { background: rgba(139,92,246,.2) }

/* ═══════════════════════════════════════════════════════════════
 *  Team Videos — grouped by athlete
 * ═══════════════════════════════════════════════════════════════ */

.tvFilterBar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}

.tvAthleteGroups {
  display: flex; flex-direction: column; gap: 12px;
}

/* Athlete section */
.tvAthleteSection {
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  transition: box-shadow .2s;
}
.tvAthleteSection:hover {
  box-shadow: 0 2px 12px rgba(124,58,237,.08);
}

/* Athlete header (expandable) */
.tvAthleteHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background .15s;
}
.tvAthleteHeader:hover {
  background: rgba(124,58,237,.04);
}

.tvAthleteAvatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(124,58,237,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--accent);
  flex-shrink: 0; overflow: hidden;
}
.tvAthleteAvatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

.tvAthleteName {
  flex: 1; font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tvAthleteCount {
  font-size: 12px; color: var(--muted); font-weight: 600;
  background: var(--bg); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}

.tvChevron {
  font-size: 14px; color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0; margin-left: 4px;
}
.tvAthleteSection.collapsed .tvChevron {
  transform: rotate(-90deg);
}

/* Video grid inside each athlete section */
.tvVideoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--bd);
}
.tvAthleteSection.collapsed .tvVideoGrid {
  display: none;
}

/* Individual video card */
.tvVideoCard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--bd-rgb, 128,128,128), .3);
  transition: background .12s;
}
.tvVideoCard:last-child { border-bottom: none; }
.tvVideoCard:hover {
  background: rgba(124,58,237,.03);
}

.tvVideoIcon {
  font-size: 22px; flex-shrink: 0; width: 36px; text-align: center;
}

.tvVideoBody {
  flex: 1; min-width: 0;
}
.tvVideoName {
  font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvVideoMeta {
  font-size: 12px; color: var(--muted); margin-top: 1px;
}
.tvVideoNotes {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tvVideoActions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .tvAthleteHeader { padding: 12px 12px; gap: 10px; }
  .tvVideoCard { padding: 10px 12px; gap: 8px; }
  .tvAthleteAvatar { width: 34px; height: 34px; font-size: 14px; }
  .tvAthleteCount { padding: 2px 8px; font-size: 11px; }
}