:root{
  --primary: #890718;
  --secondary: #a39668;
  --primary-rgb: 137 7 24;
  --secondary-rgb: 163 150 104;
  --bg: var(--primary);
  --text: rgba(255,255,255,0.92);
  --muted2: rgba(255,245,224,0.62);
  --border: rgb(var(--secondary-rgb) / 0.20);
  --border2: rgb(var(--secondary-rgb) / 0.34);
  --shadow: 0 10px 30px rgba(9,0,2,0.42);
  --accent: var(--primary);
  --accent2: var(--secondary);
  --surface: rgb(var(--primary-rgb) / 0.72);
  --surface2: rgb(var(--primary-rgb) / 0.58);
  --gold: var(--secondary);
  --danger: #ff6b6b;
}

body[data-club-theme="local"]{
  --primary: #050505;
  --secondary: #ffffff;
  --primary-rgb: 5 5 5;
  --secondary-rgb: 255 255 255;
  --bg: var(--primary);
  --muted2: rgba(255,255,255,0.66);
  --shadow: 0 10px 30px rgba(0,0,0,0.48);
}

*{ box-sizing:border-box; }
html{
  min-height: 100%;
  background: var(--bg);
  background-color: var(--bg);
}

body{
  min-height: 100vh;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
}

#appRoot{
  min-height: 100vh;
}

.left-edge-hotzone{
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 100vh;
  z-index: 26;
}

.dashboard-drawer{
  position: fixed;
  left: 0;
  top: 0;
  width: min(320px, 88vw);
  height: 100vh;
  z-index: 25;
  padding: 14px;
  border-right: 1px solid rgb(var(--secondary-rgb) / 0.24);
  background: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.98), rgb(var(--primary-rgb) / 0.90));
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.45);
  transform: translateX(-100%);
  transition: transform .2s ease;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

body.dashboard-open .dashboard-drawer{
  transform: translateX(0);
}

.dashboard-drawer-toggle{
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 76px;
  border: 1px solid rgb(var(--secondary-rgb) / 0.30);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: rgb(var(--primary-rgb) / 0.96);
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dashboard-drawer-toggle:hover{
  background: rgb(var(--primary-rgb) / 0.86);
}

.dashboard-drawer-arrow{
  line-height: 1;
}

.dashboard-head{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.dashboard-title{
  font-size: 17px;
  font-weight: 1000;
}

.dashboard-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
}

.dashboard-section{
  display:flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.dashboard-btn{
  width: 100%;
  justify-content: flex-start;
}

.dashboard-btn.active{
  border-color: rgb(var(--secondary-rgb) / 0.58);
  background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.66), rgb(var(--primary-rgb) / 0.42));
}

.dashboard-btn-locked{
  filter: blur(1.4px);
  opacity: 0.7;
  pointer-events: none;
}

.dashboard-signout-btn{
  margin-top: auto;
  justify-content: center;
  color: #fff !important;
}

.dashboard-metrics{
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 10px;
  gap: 10px;
}

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

.dashboard-k{
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
}

.dashboard-v{
  max-width: 150px;
  font-size: 12px;
  font-weight: 1000;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-screen{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.auth-card{
  width: min(560px, 95vw);
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgb(var(--primary-rgb) / 0.94), rgb(var(--primary-rgb) / 0.72)),
    rgb(var(--primary-rgb) / 0.92);
  box-shadow: var(--shadow);
  padding: 18px;
}

.auth-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.auth-brand{
  min-width: 0;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
}

.auth-title{
  margin-top: 6px;
  font-size: 24px;
  font-weight: 1000;
}

.auth-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.auth-methods{
  margin-top: 14px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-method{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 900;
}

.auth-method.active{
  border-color: rgb(var(--secondary-rgb) / 0.62);
  background: rgb(var(--primary-rgb) / 0.42);
}

.auth-method-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

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

.auth-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-password-change-panel{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
}

.auth-subpanel-note{
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}

.auth-row{
  margin: 8px 0;
}

.auth-club-identity{
  max-width: 58%;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  min-height: 32px;
  text-align:left;
}

.auth-club-identity-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

.auth-club-identity-name{
  min-width: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 950;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-provider-btn{
  width: 100%;
  justify-content: center;
}

.auth-provider-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.auth-label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 900;
  margin-bottom: 8px;
}

.auth-input{
  width: 100%;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}

.auth-club-select-shell{
  position: relative;
  display:block;
}

.auth-club-native-select{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-club-select-button{
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  border-radius: 12px;
  padding: 7px 42px 7px 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  text-align:left;
  cursor:pointer;
}

.auth-club-select-button:disabled{
  cursor:not-allowed;
  opacity: 0.62;
}

.auth-club-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
  flex: 0 0 auto;
}

.auth-club-logo-placeholder{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
}

.auth-club-select-text{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
}

.auth-club-select-arrow{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 24px;
  line-height: 1;
  color: rgba(255,255,255,0.72);
}

.auth-club-select-menu{
  position:absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #050505;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.42);
}

.auth-club-option{
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 7px 12px;
  text-align:left;
  cursor:pointer;
}

.auth-club-option:hover,
.auth-club-option.is-selected{
  background: rgba(255,255,255,0.10);
}

select.auth-input{
  background: rgba(0,0,0,0.22);
  color: #fff;
}

select.auth-input.auth-club-has-logo{
  padding-left: 12px;
}

select.auth-input option{
  background: #111;
  color: #fff;
}

.auth-status{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.auth-status.error{
  color: #ffb3b3;
}

#phoneCaptchaContainer{
  margin-top: 8px;
}

.auth-consent{
  margin-top: 10px;
  display:flex;
  align-items:flex-start;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.auth-consent input{
  margin-top: 2px;
}

.auth-transition-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #000;
  pointer-events: auto;
}

.auth-transition-overlay.hidden{
  pointer-events: none;
}

.auth-transition-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  background: #000;
}

.app-header{
  --header-accent: rgb(var(--primary-rgb) / 0.44);
  --header-accent-strong: rgb(var(--secondary-rgb) / 0.72);
  --header-accent-alt: rgb(var(--primary-rgb) / 0.62);
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(120deg, var(--header-accent), transparent 48%),
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.96), rgb(var(--primary-rgb) / 0.70));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.app-header::after{
  content:"";
  position:absolute;
  inset:auto 14px 0 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--secondary);
  opacity: 0.95;
  pointer-events: none;
}

.app-header[data-view="cuts"]{
  --header-accent: rgb(var(--primary-rgb) / 0.44);
  --header-accent-strong: rgb(var(--secondary-rgb) / 0.72);
  --header-accent-alt: rgb(var(--primary-rgb) / 0.62);
}

.app-header[data-view="projects"]{
  --header-accent: rgb(var(--primary-rgb) / 0.44);
  --header-accent-strong: rgb(var(--secondary-rgb) / 0.72);
  --header-accent-alt: rgb(var(--primary-rgb) / 0.62);
}

.app-header[data-view="board"]{
  --header-accent: rgb(var(--primary-rgb) / 0.44);
  --header-accent-strong: rgb(var(--secondary-rgb) / 0.76);
  --header-accent-alt: rgb(var(--primary-rgb) / 0.62);
}

.brand{ display:flex; align-items:center; gap:12px; min-width: 260px; }
.brand-text{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.app-section-badge{
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--secondary-rgb) / 0.30);
  background: rgb(var(--primary-rgb) / 0.42);
  color: rgba(255,248,232,0.92);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-title{ font-weight: 1000; letter-spacing: 0.2px; }
.brand-sub{ font-size: 12px; color: var(--muted2); margin-top: 2px; }

.logo{
  width: 56px;
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgb(var(--primary-rgb) / 0.26);
  border: 1px solid rgb(var(--secondary-rgb) / 0.26);
}

.logo-img{
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  display:block;
}


.header-actions{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: flex-end;
  gap: 6px;
  row-gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.header-actions .btn{
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.header-actions .icon{
  font-size: 15px;
}

.header-actions > .pill,
.header-session .pill{
  min-height: 36px;
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--secondary);
  border-color: rgb(var(--secondary-rgb) / 0.42);
  background: rgb(var(--primary-rgb) / 0.28);
}

#status{
  max-width: min(260px, 24vw);
}

.header-session{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.header-session .pill{
  font-weight: 800;
}

#sessionScopeBadge{
  max-width: min(360px, 40vw);
}

.header-context-pill{ max-width: min(340px, 34vw); font-weight: 800; }

.divider{
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 2px;
}

@media (max-width: 1180px){
  .app-header{
    align-items: flex-start;
  }

  .brand{
    min-width: 220px;
  }

  .header-actions{
    justify-content: flex-start;
  }

  #status{
    max-width: min(360px, 42vw);
  }
}

@media (max-width: 760px){
  .app-header{
    flex-direction: column;
    align-items: stretch;
  }

  .brand{
    min-width: 0;
  }

  .header-actions{
    width: 100%;
  }

  .header-actions .btn{
    flex: 1 1 145px;
    justify-content: center;
  }

  .divider{
    display:none;
  }

  .header-session{
    width: 100%;
  }

  #status{
    max-width: none;
    width: 100%;
  }
}

.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover{ background: rgba(255,255,255,0.10); border-color: var(--border2); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: 0.45; cursor: not-allowed; }

.btn-primary{
  border-color: rgb(var(--secondary-rgb) / 0.56);
  background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.96), rgb(var(--primary-rgb) / 0.82));
  color: rgba(255,248,232,0.98);
}
.btn-primary:hover{
  border-color: rgb(var(--secondary-rgb) / 0.76);
  background: linear-gradient(135deg, rgb(var(--primary-rgb) / 1), rgb(var(--primary-rgb) / 0.90));
}
.btn-ghost{ background: rgba(255,255,255,0.04); }
.btn-danger{
  border-color: rgba(255,107,107,0.35);
  background: rgba(255,107,107,0.14);
}

.icon{
  font-size: 18px;  /* 👈 más grande */
  line-height: 1;
  opacity: 0.95;
}


.pill{
  font-size: 12px;
  color: #fff8e8;
  font-weight: 1000;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgb(var(--primary-rgb) / 0.72);
  max-width: 50ch;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header[data-view="cuts"] .app-section-badge,
.app-header[data-view="cuts"] .header-context-pill{
  border-color: rgb(var(--secondary-rgb) / 0.34);
  background: rgb(var(--primary-rgb) / 0.48);
  color: rgba(255,248,232,0.96);
}

.app-header[data-view="projects"] .app-section-badge,
.app-header[data-view="projects"] .header-context-pill{
  border-color: rgb(var(--secondary-rgb) / 0.34);
  background: rgb(var(--primary-rgb) / 0.48);
  color: rgba(255,248,232,0.96);
}

.app-header[data-view="board"] .app-section-badge,
.app-header[data-view="board"] .header-context-pill{
  border-color: rgb(var(--secondary-rgb) / 0.38);
  background: rgb(var(--primary-rgb) / 0.48);
  color: rgba(255,248,232,0.96);
}

.layout{
  display:grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(320px, 0.95fr);
  gap: 14px;
  padding: 14px;
  min-height: calc(100vh - 72px);
  align-items: start;
}

.cuts-team-folders-panel{
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.04);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow: hidden;
}

.cuts-team-folders-panel.is-collapsed{
  padding-bottom: 10px;
}

.cuts-team-folders-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cuts-team-folders-panel.is-collapsed .cuts-team-folders-head{
  margin-bottom: 0;
}

.cuts-team-folders-body{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.cuts-team-folders-panel.is-collapsed .cuts-team-folders-body{
  display:none;
}

.cuts-team-folders-title{
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.2px;
}

.cuts-team-folders-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted2);
}

.cuts-team-folders-actions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 8px;
}

.cuts-team-upload-video{
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.cuts-team-folders-meta{
  flex: 0 0 auto;
  min-height: 28px;
  display:inline-flex;
  align-items:center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.cuts-team-folders-toggle{
  appearance:none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  font-weight: 1000;
  line-height: 1;
}

.cuts-team-folders-toggle:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}

.cuts-team-folders-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cuts-team-folder-item{
  min-width: 0;
}

.cuts-team-folder{
  appearance:none;
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.14);
  color: var(--text);
  cursor: pointer;
  padding: 10px;
  text-align: left;
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.cuts-team-folder:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}

.cuts-team-folder:active{
  transform: translateY(1px);
}

.cuts-team-folder.active{
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.14);
}

.cuts-team-folder-icon{
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 27px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f7d46d, #d99b2b);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
}

.cuts-team-folder-icon::before{
  content:"";
  position:absolute;
  left: 3px;
  top: -5px;
  width: 15px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  background: #f4c95b;
}

.cuts-team-folder-info{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.cuts-team-folder-name{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 1000;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuts-team-folder-detail{
  font-size: 11px;
  color: var(--muted2);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuts-team-folders-empty{
  padding: 10px 0 2px 0;
  font-size: 12px;
  color: var(--muted2);
}

.cuts-team-db-videos-list{
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: 156px;
  overflow: auto;
}

.cuts-team-db-video{
  appearance:none;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
  padding: 8px 10px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items:center;
  color: inherit;
  text-align: left;
}

.cuts-team-db-video.cuts-team-local-video{
  cursor:pointer;
}

.cuts-team-db-video.cuts-team-local-video:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

.cuts-team-db-video-name{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 1000;
}

.cuts-team-db-video-meta{
  font-size: 11px;
  color: var(--muted2);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuts-team-db-video-count{
  min-width: 48px;
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 900;
  text-align:center;
}

.workspace-empty{
  min-height: calc(100vh - 72px);
  padding: 14px;
}

.workspace-pane{
  width: 100%;
  min-height: 100%;
}

#exercisesWorkspace:not(.hidden),
#teamWorkspace:not(.hidden){
  display:block;
}

#boardWorkspace:not(.hidden){
  display:flex;
  height: calc(100vh - 100px);
}

.hub-layout{
  width: 100%;
  min-height: 100%;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.hub-hero-card{
  overflow: hidden;
}

.hub-hero-body{
  display:flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.team-hero-card .hub-hero-body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.exercises-hero-card .hub-hero-body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.hub-hero-copy{
  max-width: 760px;
}

.hub-kicker{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 1000;
  color: rgba(255,255,255,0.64);
}

.hub-title{
  margin: 8px 0 10px 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 1000;
}

.hub-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

.hub-pill-list{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  align-content:flex-start;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 360px;
}

.hub-pill-list-start{
  justify-content:flex-start;
  max-width: none;
}

.hub-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.exercise-category-btn{
  appearance: none;
  flex: 1 1 112px;
  min-width: 112px;
  min-height: 40px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

.exercise-category-btn:hover,
.exercise-category-btn:focus-visible{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  outline: none;
}

.exercise-category-btn:active{
  transform: translateY(1px);
}

.exercise-space-card:focus{
  outline: none;
}

.exercise-space-card.is-scroll-target{
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 18px 34px rgba(0,0,0,0.28);
}

.team-hero-picker{
  position: relative;
  width: min(360px, 100%);
  margin-left: auto;
  align-self: flex-start;
  z-index: 5;
}

.team-create-local-btn{
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
}

.team-hero-card{
  overflow: visible;
}

.team-hero-picker-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.96);
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.team-hero-picker-btn:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}

.team-hero-picker-btn:active{
  transform: translateY(1px);
}

.team-hero-picker-btn:disabled{
  opacity: 0.72;
  cursor: default;
}

.team-hero-picker-arrow{
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

.team-hero-picker-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: min(360px, calc(100vw - 24px));
  min-width: 260px;
  padding: 10px;
  max-height: min(420px, 60vh);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,25,40,0.96);
  box-shadow: 0 20px 42px rgba(0,0,0,0.28);
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.team-hero-picker-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.team-hero-picker-item{
  width: 100%;
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.96);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, border-color .12s ease;
}

.team-hero-picker-item:hover,
.team-hero-picker-item.active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}

.team-hero-picker-item-name{
  font-size: 13px;
  font-weight: 1000;
}

.team-hero-picker-item-meta{
  font-size: 11px;
  color: rgba(255,255,255,0.66);
  font-weight: 800;
}

.team-hero-picker-empty{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  line-height: 1.5;
}

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

#teamWorkspace .hub-grid{
  grid-template-columns: minmax(0, 1fr);
}

.hub-info-card{
  height: 100%;
}

.hub-card-body{
  display:flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.hub-list-row{
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

button.hub-list-row{
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

button.hub-list-row:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

button.hub-list-row:active{
  transform: translateY(1px);
}

button.hub-list-row.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 12px 24px rgba(3,10,30,0.12);
}

button.hub-list-row:focus-visible{
  outline: none;
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.hub-list-row strong{
  font-size: 14px;
}

.hub-list-row span,
.hub-note{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

.hub-note{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
}

.exercise-space-card{
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

button.exercise-category-card{
  width: 100%;
  min-height: 260px;
  display:flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.exercise-category-card > .card-head,
button.exercise-category-card > .hub-card-body{
  width: 100%;
  box-sizing: border-box;
}

button.exercise-category-card .hub-card-body{
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
}

.exercise-space-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
}

.exercise-space-card[data-space="attack"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.05));
}

.exercise-space-card[data-space="defense"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.05));
}

.exercise-space-card[data-space="transition"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.05));
}

.exercise-space-card[data-space="special"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(210,210,210,0.07));
}

.exercise-space-card .card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.exercise-category-card-head{
  min-height: 86px;
  align-items:center;
}

.exercise-category-card-arrow{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  font-size: 28px;
  line-height: 1;
  color: rgba(255,255,255,0.86);
}

.exercise-category-card-meta{
  width: 100%;
  margin-top: auto;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,255,255,0.78);
}

.exercise-category-card .card-title{
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.exercise-category-card .card-sub{
  margin-top: 5px;
  line-height: 1.35;
  max-width: none;
}

.exercise-category-card .hub-note{
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.exercise-category-card .hub-pill-list{
  width: 100%;
}

.exercise-category-page{
  width: 100%;
}

.exercise-category-page-card{
  min-height: 560px;
}

.exercise-category-page-head{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.exercise-category-page-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.exercise-category-page-actions-right{
  justify-content:flex-end;
  flex-wrap: wrap;
}

.exercise-category-page-copy{
  min-width: 0;
}

.exercise-category-page-head .btn{
  min-height: 40px;
  justify-content: center;
  line-height: 1;
}

.exercise-category-back{
  white-space: nowrap;
}

.exercise-category-tags{
  padding: 16px 16px 0 16px;
}

.exercise-category-list{
  padding: 16px;
  margin-top: 0;
}

.exercise-folder-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 16px;
}

.exercise-folder-card{
  min-height: 112px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(9,15,34,0.26);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

.exercise-folder-card:hover,
.exercise-folder-card:focus-visible{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  outline: none;
}

.exercise-folder-card:active{
  transform: translateY(1px);
}

.exercise-folder-name{
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.2;
}

.exercise-folder-meta{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.66);
}

.exercise-space-head-copy{
  min-width: 0;
  flex: 1 1 auto;
}

.exercise-space-create-btn{
  flex: 0 0 auto;
  align-self: flex-start;
  padding-inline: 14px;
}

@media (max-width: 760px){
  .exercise-space-card .card-head{
    flex-direction: column;
    align-items: stretch;
  }

  .exercise-space-create-btn{
    align-self: flex-start;
  }

  .exercise-category-page-head{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .exercise-category-back{
    justify-self: flex-start;
  }
}

.exercise-library-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.exercise-library-empty{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.5;
}

.exercise-library-item{
  display:grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(9,15,34,0.26);
}

.exercise-library-preview{
  aspect-ratio: 420 / 230;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.exercise-library-preview svg{
  width: 100%;
  height: 100%;
  display: block;
}

.exercise-library-preview-empty{
  min-height: 108px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  text-align: center;
}

.exercise-library-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.exercise-library-title{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(255,255,255,0.96);
}

.exercise-library-meta,
.exercise-library-info{
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.68);
}

.exercise-library-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.exercise-library-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exercise-library-tag{
  font-size: 11px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.exercise-library-action{
  padding: 8px 10px;
  border-radius: 10px;
}

@media (max-width: 760px){
  .exercise-library-item,
  .exercise-picker-item{
    grid-template-columns: 1fr;
  }
}

.team-registry-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.team-registry-item{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

.team-registry-item:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.team-registry-item:focus-visible{
  outline: none;
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.team-registry-item.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.34);
  box-shadow: 0 16px 28px rgba(3,10,30,0.14);
}

.team-registry-info{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.team-registry-name{
  font-size: 14px;
  font-weight: 1000;
  word-break: break-word;
}

.team-registry-meta{
  font-size: 12px;
  color: rgba(255,255,255,0.68);
}

.team-registry-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.team-edit-btn{
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
}

.team-edit-btn:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.34);
}

.team-edit-btn:active{
  transform: translateY(1px);
}

.team-editor-panel{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.team-player-sheet-form{
  display:flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfcfe, #f1f4f8);
  border: 1px solid #cad3df;
  box-shadow: 0 18px 44px rgba(7,20,39,0.18);
  color: #162238;
}

.team-player-sheet-form-head{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid #d7dee7;
}

.team-player-sheet-form-title{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e3252;
}

.team-player-sheet-form-sub{
  font-size: 12px;
  line-height: 1.5;
  color: #4b5f7a;
}

.team-player-sheet-top{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
}

.team-player-photo-card{
  display:flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d3dbe6;
  border-radius: 10px;
  background: #f7f9fc;
}

.team-player-photo-frame{
  position: relative;
  min-height: 250px;
  border-radius: 8px;
  border: 1px solid #bcc7d5;
  background:
    linear-gradient(0deg, rgba(219,227,238,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219,227,238,0.6) 1px, transparent 1px),
    linear-gradient(180deg, #fefefe, #eef3f8);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-player-photo-placeholder{
  background:
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.88), rgb(var(--primary-rgb) / 0.68));
}

.team-player-photo-placeholder img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display:block;
}

.team-player-photo-preview{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.team-player-sheet-profile{
  min-width: 0;
}

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

.team-editor-field{
  display:flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 1px solid #c9d2de;
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
}

.team-editor-field span{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3c4f69;
  padding: 8px 10px 7px;
  background: #edf2f7;
  border-bottom: 1px solid #d2d9e3;
}

.team-editor-field-sm{
  max-width: none;
}

.team-editor-field-full{
  grid-column: 1 / -1;
}

.team-editor-input{
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #162238;
  padding: 10px 12px;
  outline: none;
  min-height: 42px;
  font-weight: 700;
}

.team-editor-input:focus{
  box-shadow: inset 0 0 0 2px rgba(54,101,166,0.18);
}

.team-editor-textarea{
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}

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

.team-rating-card{
  border-radius: 10px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #cad3df;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.team-rating-head{
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d6dde7;
}

.team-rating-title{
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #213655;
}

.team-rating-sub{
  font-size: 12px;
  line-height: 1.5;
  color: #5a6c85;
}

.team-rating-fields{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.team-rating-scale-note{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7f98;
}

.team-rating-item{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d4dce7;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.team-rating-item-main{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.team-rating-item-label{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #213655;
}

.team-rating-item-notes{
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.team-rating-item-notes > span{
  position: relative;
  padding-left: 12px;
  font-size: 11px;
  line-height: 1.4;
  color: #61758e;
}

.team-rating-item-notes > span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7e95b2;
}

.team-rating-item-subscores{
  gap: 8px;
  margin-top: 2px;
}

.team-rating-subscore-row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  background: #fff;
}

.team-rating-subscore-label{
  font-size: 11px;
  line-height: 1.35;
  color: #5b6f88;
}

.team-rating-subscore-input{
  min-height: 36px;
  padding: 8px 10px;
  text-align: center;
}

.team-rating-score{
  display:flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #c9d2de;
  background: #fff;
}

.team-rating-score span{
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3c4f69;
  padding: 8px 10px 7px;
  background: #edf2f7;
  border-bottom: 1px solid #d2d9e3;
}

.team-editor-actions{
  display:flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
  border-top: 2px solid #d7dee7;
}

.team-player-cards-list{
  display:flex;
  flex-direction: column;
  gap: 22px;
}

.team-player-sheet-card{
  border-radius: 14px;
  background: #ffffff;
  color: #172133;
  padding: 0;
  border: 1px solid #c8d2de;
  box-shadow: 0 22px 50px rgba(4,10,25,0.2);
  display:flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.team-player-sheet-card.is-collapsed{
  gap: 0;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-head{
  align-items: center;
}

.team-player-sheet-band{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #213a5f, #182d49);
  color: #f7fbff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.team-player-sheet-band-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.team-player-sheet-band-meta{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(247,251,255,0.8);
  text-align: right;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-photo{
  flex-basis: 82px;
  width: 82px;
  height: 100px;
  border-radius: 8px;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-identity-info{
  gap: 6px;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-title{
  font-size: 18px;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-meta{
  font-size: 12px;
  line-height: 1.35;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary{
  display: inline-flex;
  width: auto;
  max-width: 100%;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
  align-self: center;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip{
  display: none;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip:last-child{
  display: inline-flex;
  width: auto;
  min-width: 88px;
  padding: 8px 10px;
  gap: 2px;
  border: 1px solid #cad3df;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(9, 19, 35, 0.08);
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-label{
  font-size: 9px;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-value{
  font-size: 16px;
}

.team-player-sheet-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid #d8dee8;
}

.team-player-sheet-card-identity{
  display:flex;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}

.team-player-sheet-card-photo{
  flex: 0 0 120px;
  width: 120px;
  height: 150px;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(219,227,238,0.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219,227,238,0.75) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, #eef3f8);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  border: 1px solid #bcc7d5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.16em;
  color: #7b8798;
  overflow: hidden;
}

.team-player-sheet-card-photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.team-player-sheet-card-photo.has-club-logo-fallback{
  background:
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.88), rgb(var(--primary-rgb) / 0.68));
}

.team-player-sheet-card-photo-logo{
  width: 76%;
  height: 76%;
  object-fit: contain;
  display:block;
}

.team-player-sheet-card-identity-info{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.team-player-sheet-card-title{
  font-size: 26px;
  font-weight: 1000;
  line-height: 1.1;
  color: #16233b;
}

.team-player-sheet-card-meta{
  font-size: 12px;
  line-height: 1.5;
  color: #4f637f;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-player-sheet-card-body{
  display:flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
}

.team-player-inline-form-host{
  margin: 0 0 10px;
}

.team-player-inline-form-host .team-player-sheet-form{
  margin: 0;
  box-shadow: none;
}

.team-player-sheet-summary{
  display:grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #cad3df;
}

.team-player-sheet-summary-chip{
  min-width: 0;
  padding: 10px 10px 9px;
  border-radius: 0;
  background: #ffffff;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.team-player-sheet-summary-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5b6d86;
  font-weight: 900;
}

.team-player-sheet-summary-value{
  font-size: 18px;
  color: #172133;
  font-weight: 1000;
}

.team-player-sheet-info-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #cad3df;
}

.team-player-sheet-info-item{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 0;
  background: #ffffff;
  min-height: 76px;
  justify-content: space-between;
}

.team-player-sheet-info-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #657991;
  font-weight: 900;
}

.team-player-sheet-info-value{
  font-size: 13px;
  color: #172133;
  line-height: 1.4;
}

.team-player-attendance-summary{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #cad3df;
}

.team-player-attendance-stat{
  min-width: 0;
  padding: 11px 12px;
  background: #ffffff;
  display:flex;
  flex-direction: column;
  gap: 5px;
}

.team-player-attendance-stat-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #657991;
  font-weight: 900;
}

.team-player-attendance-stat-value{
  font-size: 20px;
  color: #172133;
  font-weight: 1000;
}

.team-player-attendance-stat.is-present .team-player-attendance-stat-value{
  color: #11743d;
}

.team-player-attendance-stat.is-justified .team-player-attendance-stat-value{
  color: #156a82;
}

.team-player-attendance-stat.is-unjustified .team-player-attendance-stat-value{
  color: #b93232;
}

.team-player-attendance-stat.is-pending .team-player-attendance-stat-value{
  color: #67748a;
}

.team-player-attendance-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.team-player-attendance-row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items:center;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.team-player-attendance-main{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.team-player-attendance-title{
  font-size: 13px;
  font-weight: 1000;
  color: #172133;
  word-break: break-word;
}

.team-player-attendance-meta{
  font-size: 11px;
  color: #657991;
  font-weight: 800;
  text-transform: capitalize;
}

.team-player-attendance-status{
  border-radius: 8px;
  border: 1px solid #d6dee8;
  background: #eef2f7;
  color: #4b5d72;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
  padding: 7px 9px;
  text-align:center;
  white-space: nowrap;
}

.team-player-attendance-status.present{
  border-color: #a9dec0;
  background: #e9f8ef;
  color: #11743d;
}

.team-player-attendance-status.justified_absence{
  border-color: #a8d9e8;
  background: #eaf8fb;
  color: #156a82;
}

.team-player-attendance-status.unjustified_absence{
  border-color: #efb5b5;
  background: #fff0f0;
  color: #b93232;
}

.team-player-attendance-reason{
  grid-column: 1 / -1;
  border-top: 1px solid #edf1f6;
  padding-top: 8px;
  color: #3f5168;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.team-player-attendance-empty{
  border: 1px dashed #c8d2de;
  border-radius: 8px;
  background: #ffffff;
  color: #657991;
  font-size: 12px;
  line-height: 1.45;
  padding: 12px;
}

.team-tracking-overview{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.team-tracking-overview .team-player-attendance-stat{
  padding: 18px;
  border-top: 3px solid #245b96;
}
.team-tracking-overview .team-player-attendance-stat-value{
  font-size: clamp(18px, 2vw, 26px);
}
.team-player-tracking-note{
  margin-top: 10px;
  color: #52657c;
  font-size: 12px;
  line-height: 1.6;
}
.team-progress-season{
  display: flex;
  align-items: center;
  gap: 12px;
  color: #172133;
  font-size: 13px;
  font-weight: 700;
}
.team-progress-season select{ width: auto; max-width: 100%; }
.team-progress-content{ display: grid; gap: 12px; min-width: 0; }
.team-progress-highlight{
  padding: 14px 16px;
  margin-top: 12px;
  border-left: 3px solid #245b96;
  border-radius: 6px;
  background: #eef4fb;
  color: #193b62;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}
.team-progress-chart{ display: block; width: 100%; max-height: 220px; background: #fff; border-radius: 8px; }
#teamWorkspace .team-hero-card .hub-title{ font-size: clamp(24px, 3vw, 34px); }
#teamWorkspace .team-hero-card .hub-text{ max-width: 640px; }
@media (max-width: 760px){
  .team-tracking-overview{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .team-tracking-overview{ grid-template-columns: 1fr; }
}
.team-player-progression-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.team-player-progression-row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items:center;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.team-player-progression-main{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.team-player-progression-title{
  font-size: 13px;
  font-weight: 1000;
  color: #172133;
  word-break: break-word;
}

.team-player-progression-meta{
  font-size: 11px;
  color: #657991;
  font-weight: 800;
}

.team-player-progression-score{
  min-width: 44px;
  border: 1px solid #bcc8d6;
  border-radius: 8px;
  background: #eef2f7;
  color: #172133;
  font-size: 14px;
  font-weight: 1000;
  padding: 7px 9px;
  text-align:center;
}

.team-player-progression-empty{
  border: 1px dashed #c8d2de;
  border-radius: 8px;
  background: #ffffff;
  color: #657991;
  font-size: 12px;
  line-height: 1.45;
  padding: 12px;
}

.team-player-sheet-section{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.team-player-sheet-section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d9e0e8;
}

.team-player-sheet-section-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #203455;
}

.team-player-sheet-section-sub{
  font-size: 11px;
  line-height: 1.45;
  color: #5c6f88;
  text-align: right;
}

.team-player-sheet-ratings-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-player-sheet-rating-sections{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.team-player-sheet-excel-section{
  display:flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #c8d2de;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.team-player-sheet-excel-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #1f3557;
  color: #fff;
}

.team-player-sheet-excel-title{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-player-sheet-excel-average{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.team-player-sheet-excel-body{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1.15fr);
  gap: 0;
}

.team-player-sheet-excel-detail{
  display:flex;
  flex-direction: column;
}

.team-player-sheet-detailed-row{
  display:grid;
  grid-template-columns: minmax(170px, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e0e6ee;
  background: #fff;
}

.team-player-sheet-detailed-row:nth-child(even){
  background: #f9fbfd;
}

.team-player-sheet-detailed-row:last-child{
  border-bottom: none;
}

.team-player-sheet-detailed-content{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.team-player-sheet-detailed-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1b2d49;
}

.team-player-sheet-detailed-notes{
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.team-player-sheet-detailed-note{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #dde4ed;
  border-radius: 6px;
  background: #fff;
}

.team-player-sheet-detailed-note-label{
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11px;
  line-height: 1.35;
  color: #5b6f88;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.team-player-sheet-detailed-note-value{
  flex: 0 0 auto;
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff3c4;
  color: #1c2d47;
  text-align: center;
  font-size: 11px;
  font-weight: 1000;
}

.team-player-sheet-scale{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)) 52px;
  gap: 1px;
  align-self: center;
  width: 100%;
  border: 1px solid #cad3df;
  background: #cad3df;
  border-radius: 6px;
  overflow: hidden;
}

.team-player-sheet-scale-cell,
.team-player-sheet-scale-value{
  min-height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
}

.team-player-sheet-scale-cell{
  font-size: 11px;
  font-weight: 900;
  color: #556982;
}

.team-player-sheet-scale-cell.is-active{
  background: #ffc000;
  color: #172133;
}

.team-player-sheet-scale-value{
  font-size: 12px;
  font-weight: 1000;
  color: #213655;
  background: #eef3f8;
}

.team-player-sheet-excel-side{
  display:flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-left: 1px solid #dbe2eb;
  background: #f5f8fb;
  min-width: 0;
}

.team-player-sheet-excel-side-title{
  padding: 10px 12px;
  border: 1px solid #1f3557;
  background: #1f3557;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.team-player-sheet-metrics-table{
  display:flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  background: #cad3df;
  border-radius: 6px;
}

.team-player-sheet-metrics-row{
  display:grid;
  gap: 1px;
  background: #cad3df;
  grid-template-columns: repeat(var(--team-metrics-columns, 1), minmax(0, 1fr));
}

.team-player-sheet-metrics-table .team-player-sheet-metrics-row{
  grid-template-columns: repeat(var(--team-metrics-columns, 1), minmax(0, 1fr));
}

.team-player-sheet-metrics-cell{
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: #53677f;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.team-player-sheet-metrics-cell.is-value{
  font-size: 13px;
  color: #1a2a43;
  background: #fff7d8;
}

.team-player-sheet-rating-card{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #cad3df;
  background: #ffffff;
}

.team-player-sheet-rating-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d6dde7;
}

.team-player-sheet-rating-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 1000;
  color: #203253;
}

.team-player-sheet-rating-average{
  font-size: 12px;
  font-weight: 900;
  color: #355a95;
}

.team-player-sheet-rating-list{
  display:flex;
  flex-direction: column;
  gap: 0;
}

.team-player-sheet-rating-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #e1e6ed;
}

.team-player-sheet-rating-row:last-child{
  padding-bottom: 0;
  border-bottom: none;
}

.team-player-sheet-rating-row-label{
  font-size: 12px;
  color: #4a6182;
  line-height: 1.4;
}

.team-player-sheet-rating-row-value{
  font-size: 13px;
  color: #172133;
  min-width: 36px;
  text-align: right;
}

.team-player-sheet-observations{
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #cad3df;
  background:
    linear-gradient(0deg, rgba(222,229,238,0.68) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, #f5f8fb);
  background-size: 100% 28px, 100% 100%;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.team-player-sheet-observations-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(134, 151, 177, 0.3);
}

.team-player-sheet-observations-label{
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3f587d;
}

.team-player-sheet-observations-edit{
  border: 1px solid #c8d3e0;
  background: #ffffff;
  color: #274066;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.team-player-sheet-observations-edit:hover{
  background: #edf3f9;
}

.team-player-sheet-observations-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: #223048;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-player-sheet-observations-body.is-empty{
  color: #60728b;
  font-style: italic;
}

.team-player-sheet-observations-item{
  position: relative;
  padding-left: 14px;
  min-width: 0;
}

.team-player-sheet-observations-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #5778ac;
}

.team-player-sheet-footer{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}

.team-player-sheet-medias{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid #cad3df;
  border-radius: 10px;
  background: #fff;
}

.team-player-sheet-medias-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f3557;
}

.team-player-sheet-medias-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  border-radius: 6px;
  background: #cad3df;
  width: 100%;
  max-width: 560px;
  align-self: flex-start;
}

.team-player-sheet-medias-cell{
  min-height: 54px;
  padding: 10px 8px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
}

.team-player-sheet-medias-cell.is-label{
  font-size: 10px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #576a81;
}

.team-player-sheet-medias-cell.is-value{
  font-size: 16px;
  font-weight: 1000;
  color: #172133;
  background: #fff7d8;
}

.team-player-card-delete{
  flex: 0 0 auto;
  border: 1px solid rgba(159,55,55,0.22);
  border-radius: 8px;
  background: #fff7f7;
  color: #a53d3d;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
}

.team-player-card-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-player-sheet-card.is-collapsed .team-player-card-actions{
  gap: 8px;
}

.team-player-card-toggle{
  flex: 0 0 auto;
  border: 1px solid #c8d1dd;
  border-radius: 8px;
  background: #f5f8fb;
  color: #32527f;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
}

.team-player-card-toggle:hover{
  background: #eaf0f7;
}

.team-player-card-edit{
  flex: 0 0 auto;
  border: 1px solid rgba(68,122,88,0.22);
  border-radius: 8px;
  background: #f6fbf7;
  color: #2d6e49;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
}

.team-player-card-edit:hover{
  background: #ebf5ed;
}

.team-player-card-delete:hover{
  background: #fdeeee;
}

@media (max-width: 1180px){
  .projects-session-header{
    align-items: stretch;
    flex-direction: column;
  }

  .projects-session-header-actions{
    justify-content: flex-start;
  }

  .team-player-sheet-top{
    grid-template-columns: 1fr;
  }

  .team-player-photo-frame{
    min-height: 220px;
  }

  .team-editor-form,
  .team-rating-grid,
  .team-player-sheet-summary,
  .team-player-attendance-summary,
  .team-player-sheet-medias-grid,
  .team-player-sheet-ratings-grid,
  .team-player-sheet-info-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .team-editor-form,
  .team-rating-grid,
  .team-player-sheet-summary,
  .team-player-attendance-summary,
  .team-player-sheet-medias-grid,
  .team-player-sheet-ratings-grid,
  .team-player-sheet-info-grid{
    grid-template-columns: 1fr;
  }

  .team-rating-item{
    grid-template-columns: 1fr;
  }

  .team-rating-subscore-row{
    grid-template-columns: 1fr;
  }

  .team-player-sheet-excel-body,
  .team-player-sheet-footer,
  .team-player-sheet-band,
  .team-player-sheet-card-head,
  .team-player-sheet-card-identity,
  .team-player-sheet-section-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .team-player-sheet-excel-body,
  .team-player-sheet-footer{
    display:flex;
  }

  .team-player-sheet-excel-side{
    width: 100%;
    border-left: none;
    border-top: 1px solid #dbe2eb;
  }

  .team-player-sheet-detailed-row{
    grid-template-columns: 1fr;
  }

  .team-player-attendance-row{
    grid-template-columns: 1fr;
  }

  .team-player-attendance-status{
    width: 100%;
    white-space: normal;
  }

  .team-player-sheet-scale{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .team-player-sheet-card-photo{
    width: 100%;
    max-width: 220px;
    height: 220px;
  }

  .team-player-sheet-band-meta,
  .team-player-sheet-section-sub{
    text-align: left;
  }

  .team-player-sheet-card.is-collapsed .team-player-card-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

.board-shell{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, #2a78e3 0%, #1f70da 100%);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2vw, 24px);
  display:flex;
  align-items: stretch;
  overflow: hidden;
}

.board-canvas-area{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handball-board{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(180deg, #2a78e3 0%, #1f70da 100%);
  padding: clamp(16px, 2.5vw, 30px) clamp(26px, 3.2vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.court-play-area{
  position: relative;
  width: 100%;
  width: min(100%, calc(100cqh * 1.826087));
  height: auto;
  aspect-ratio: 420 / 230;
  max-height: 100%;
  min-height: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.board-full-court-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.board-elements-layer{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: auto;
}

.board-rotate-controls{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.board-rotate-btn{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(9, 26, 48, 0.2);
  color: #eaf2ff;
  font-size: 40px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 2px 5px rgba(0,0,0,0.35);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}

.board-rotate-btn:hover{
  transform: translate(-50%, -50%) scale(1.08);
}

.board-rotate-btn:active{
  transform: translate(-50%, -50%) scale(0.95);
}

.board-arrow-handles{
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.board-arrow-handle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(231,240,255,0.72);
  background: rgba(219,232,255,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-arrow-handle::before{
  content: "";
  display: block;
}

.board-arrow-handle-bend::before{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(79,95,119,0.7);
}

.board-arrow-handle-tip::before{
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid rgba(79,95,119,0.85);
}

.board-arrow-handle-base::before{
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(79,95,119,0.85);
  transform: rotate(38deg);
}

.board-arrow-handle:hover{
  transform: translate(-50%, -50%) scale(1.06);
}

.board-arrow-handle:active{
  transform: translate(-50%, -50%) scale(0.95);
}

.board-half-court-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
  pointer-events: none;
}

.court-center-line{
  display: none;
  position:absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 6px solid #f5f5f5;
  transform: translateX(-50%);
  z-index: 1;
}

.court-center-circle{
  display: none;
  position:absolute;
  left: 50%;
  top: 50%;
  width: clamp(72px, 7vw, 120px);
  aspect-ratio: 1;
  border: 6px solid #f5f5f5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.court-end{
  display: none;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.court-end.left{
  left: 0;
}

.court-end.right{
  right: 0;
}

.court-goal,
.court-goal-area,
.court-nine-meter,
.court-seven-dot,
.court-mid-mark{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
}

.court-goal{
  width: 5.7%;
  height: 17%;
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    #ff3e3e 0 8px,
    #f6fbff 8px 16px
  ) 1;
  background-color: #2f7dea;
  overflow: hidden;
}

.court-goal::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(240,247,255,0.58) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(240,247,255,0.58) 0 2px, transparent 2px 7px);
}

.court-end.left .court-goal{
  left: 0%;
  transform: translate(-96%, -50%);
}

.court-end.right .court-goal{
  right: 0%;
  transform: translate(96%, -50%);
}

.court-goal-area{
  height: 76%;
  width: 30%;
  border: 6px solid #f5f5f5;
  background: #f89433;
}

.court-end.left .court-goal-area{
  left: 0;
  border-left: none;
  border-radius: 0 220px 220px 0;
}

.court-end.right .court-goal-area{
  right: 0;
  border-right: none;
  border-radius: 220px 0 0 220px;
}

.court-nine-meter{
  height: 100%;
  width: 47%;
  border: 6px dashed #f5f5f5;
}

.court-end.left .court-nine-meter{
  left: 0;
  border-left: none;
  border-radius: 0 280px 280px 0;
}

.court-end.right .court-nine-meter{
  right: 0;
  border-right: none;
  border-radius: 280px 0 0 280px;
}

.court-seven-dot{
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #f5f5f5;
}

.court-end.left .court-seven-dot{
  left: 19%;
}

.court-end.right .court-seven-dot{
  right: 19%;
}

.court-mid-mark{
  width: 0;
  height: 5.5%;
  border-left: 6px solid #f5f5f5;
}

.court-end.left .court-mid-mark{
  left: 35%;
}

.court-end.right .court-mid-mark{
  right: 35%;
}

.board-shell[data-board-layout="half"] .board-half-court-svg{
  display: block;
}

.board-shell[data-board-layout="half"] .board-full-court-svg{
  display: none;
}

.board-sidebar{
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  right: 0;
  bottom: clamp(12px, 2vw, 22px);
  width: 260px;
  border-radius: 14px;
  border: 1px solid rgba(236,243,255,0.35);
  background: linear-gradient(180deg, rgba(7,18,45,0.95), rgba(6,14,33,0.95));
  box-shadow: 0 14px 24px rgba(0,0,0,0.35);
  display:flex;
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: 7;
}

.board-shell.board-sidebar-open .board-sidebar{
  transform: translateX(0);
}

.board-sidebar-toggle{
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 76px;
  border: 1px solid rgba(236,243,255,0.35);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: rgba(8,18,43,0.95);
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.board-sidebar-toggle:hover{
  background: rgba(17,31,68,0.98);
}

.board-sidebar-arrow{
  line-height: 1;
}

.board-sidebar-content{
  width: 100%;
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

.board-sidebar-title{
  font-size: 15px;
  font-weight: 1000;
  color: #f5f5f5;
}

.board-sidebar-sub{
  font-size: 12px;
  color: rgba(236,243,255,0.75);
  margin-bottom: 4px;
}

.board-editor-meta{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(236,243,255,0.18);
  margin-bottom: 2px;
}

.board-context-label{
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,255,255,0.88);
}

.board-context-back{
  width: 100%;
  justify-content: center;
  border-color: rgba(236,243,255,0.24);
  background: rgba(236,243,255,0.08);
}

.board-add-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  border-color: rgba(236,243,255,0.24);
  background: rgba(236,243,255,0.08);
  min-height: 46px;
}

.board-add-text{
  flex: 1;
}

.board-add-preview{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.board-palette-icon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.board-palette-icon svg{ width: 100%; height: 100%; overflow: visible; }
.board-add-btn{ border-radius: 10px; transition: background .15s, border-color .15s; }
.board-add-btn:hover:not(:disabled), .board-extra-button:hover:not(:disabled){
  background: #ffffff12;
  border-color: #94a3b8;
}
.board-extra-button{ display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 5px; }
.board-extra-button > span:last-child{ line-height: 1.3; }


.board-sidebar-actions{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.board-side-action{
  width: 100%;
  justify-content: center;
}

.board-sidebar-tip{
  margin-top: auto;
  font-size: 12px;
  color: rgba(236,243,255,0.72);
  border-top: 1px solid rgba(236,243,255,0.18);
  padding-top: 10px;
}

.board-transform-panel{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(236,243,255,0.2);
  background: rgba(15,34,56,0.42);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.board-transform-title{
  font-size: 12px;
  font-weight: 900;
  color: rgba(236,243,255,0.9);
}

.board-transform-field{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(236,243,255,0.82);
}

.board-transform-panel input[type="range"]{
  width: 100%;
}

.board-transform-value{
  font-weight: 900;
  color: #ffffff;
}

.board-arrow-transform-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(236,243,255,0.18);
}

.board-transform-panel.is-disabled{
  opacity: 0.6;
}

.board-item{
  z-index: 2;
  touch-action: none;
  --board-rot: 0deg;
  --board-scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 1000;
  color: #f5f5f5;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  padding: 0;
  background-clip: padding-box;
  outline: none;
  transform: translate(-50%, -50%) rotate(var(--board-rot)) scale(var(--board-scale));
  overflow: visible;
}

.board-item:active{
  cursor: grabbing;
}

.board-item.dragging{
  transform: translate(-50%, -50%) rotate(var(--board-rot)) scale(var(--board-scale));
}

.board-item.board-item-zone{
  z-index: 0;
  border: 2px dashed;
  border-radius: 4px;
  box-shadow: none;
}
.board-item.board-item-zone-ellipse{ border-radius: 50%; }
.board-item-zone.selected{ outline: 3px solid #ffe77a; outline-offset: 3px; }
.board-item.board-item-symbol{
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}
.board-item-symbol svg{ width: 100%; height: 100%; pointer-events: none; }

.board-tools{ display: grid; gap: 10px; }
.board-tools details{ border: 1px solid #ffffff26; border-radius: 8px; padding: 10px; }
.board-tools summary{ cursor: pointer; font-weight: 700; padding: 3px 0; }
.board-tools p{ font-size: 12px; line-height: 1.5; color: #cbd5e1; margin: 8px 0; }
.board-tools label{ display: grid; gap: 5px; font-size: 12px; margin: 10px 0; }
.board-tools select, .board-tools input[type="number"]{ width: 100%; min-width: 0; color: #f8fafc; background: #172033; border: 1px solid #64748b; border-radius: 5px; padding: 7px; }
.board-tools input[type="range"]{ width: 100%; }
.board-tools-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.board-tools-grid .btn{ white-space: normal; font-size: 12px; min-height: 36px; }
.board-tools button:focus-visible, .board-tools summary:focus-visible, .board-item:focus-visible{ outline: 2px solid #ffe77a; outline-offset: 3px; }
.board-item.board-item-attack,
.board-item.board-item-defense,
.board-item.board-item-ball,
.board-item.board-item-cone,
.board-item.board-item-ladder{
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  isolation: isolate;
}
.board-item.board-item-attack,
.board-item.board-item-defense,
.board-item.board-item-symbol[data-board-type="goalkeeper"],
.board-item.board-item-symbol[data-board-type="defenderArms"]{
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: none;
  background: transparent;
}
.board-item.board-item-ball{ width: 34px; height: 34px; }
.board-item.board-item-cone{ width: 36px; height: 42px; border-radius: 8px; }
.board-item.board-item-ladder{ width: 28px; height: 78px; border-radius: 6px; }
.board-symbol-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #0f172a30);
}
.board-item-label{
  position: relative;
  z-index: 1;
  line-height: 1;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px 1px #0003;
}
.board-item-attack .board-item-label,
.board-item-defense .board-item-label{ position: absolute; top: 74%; transform: translateY(-50%); }


.board-item-arrow-solid,
.board-item-arrow-double,
.board-item-arrow-dash,
.board-item-arrow-wave{
  width: 92px;
  height: 180px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.board-arrow-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.board-item.selected{
  outline: 2px solid #fbbf24;
  outline-offset: 4px;
  box-shadow: none;
}
.board-item.selected .board-symbol-svg{ filter: drop-shadow(0 2px 3px #0f172a40); }
.board-item[class*="board-item-arrow-"].selected{
  outline: 1px dashed #d97706;
  outline-offset: 2px;
  border-radius: 8px;
}
.board-item[class*="board-item-arrow-"].selected .board-arrow-svg{
  filter: drop-shadow(0 0 2px #fbbf24);
}
.board-item.board-item-zone{
  border-radius: 8px;
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, #ffffff18 10px 11px);
}
.board-item.board-item-zone-ellipse{ border-radius: 50%; }
@media (max-width: 640px){
  .board-item.board-item-ball{ width: 30px; height: 30px; }
  .board-item.board-item-cone{ width: 30px; height: 36px; }
  .board-item.board-item-ladder{ width: 24px; height: 62px; }
  .board-item.board-item-symbol{ width: 40px; height: 40px; }
}


#projectsWorkspace:not(.hidden){
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: flex-start;
}

.projects-pdf-editor{
  min-height: calc(100vh - 100px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.projects-session-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
}

.projects-session-header-title{
  font-size: 17px;
  font-weight: 1000;
  color: #f5f8ff;
}

.projects-session-header-sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(235,244,255,0.74);
  line-height: 1.35;
}

.projects-session-header-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.projects-pdf-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.projects-pdf-btn{
  padding: 8px 10px;
  border-radius: 10px;
}

.projects-pdf-title{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.16);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
  font-weight: 900;
}

.projects-pdf-body{
  flex: 1;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.14);
  padding: 12px;
  outline: none;
  overflow: auto;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.projects-pdf-body:empty::before{
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.45);
}

.projects-session-sheet{
  border: 1px solid #a5a5a5;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f1f1;
  color: #2f2f2f;
}

.projects-session-lock{
  min-height: 240px;
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}

.projects-session-lock-title{
  font-size: 20px;
  font-weight: 1000;
  color: #f5f5f5;
}

.projects-session-lock-sub{
  max-width: 50ch;
  font-size: 13px;
  color: rgba(248,251,255,0.82);
  line-height: 1.45;
}

.session-court-defs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.session-sheet-head{
  border-bottom: 1px solid #a5a5a5;
  background: #ececec;
  padding: 8px 12px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 4px;
  text-align: center;
}

.session-sheet-club{
  font-size: 20px;
  line-height: 1.1;
  font-weight: 1000;
  color: #7a1f1f;
  letter-spacing: 0.3px;
}

.session-sheet-team{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-editable-head{
  min-height: auto;
  width: min(100%, 420px);
  border: 1px dashed transparent;
  background: transparent;
  padding: 2px 8px;
}

.session-editable-head:focus{
  border-color: rgba(122,31,31,0.26);
  box-shadow: 0 0 0 2px rgba(122,31,31,0.1);
}

.session-editable-club{
  font-size: 20px;
  line-height: 1.1;
  font-weight: 1000;
  color: #7a1f1f;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.session-editable-team{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-sheet-row{
  border-bottom: 1px solid #a5a5a5;
}

.session-sheet-meta{
  min-height: 30px;
  padding: 7px 10px;
  font-size: 12px;
  background: #f7f7f7;
  display:flex;
  align-items:center;
  gap: 8px;
}

.session-sheet-title{
  min-height: 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: #4f7f34;
  background: #f3f3f3;
}

.session-label{
  font-size: 12px;
  font-weight: 1000;
  color: #7a1f1f;
  text-transform: uppercase;
}

.session-label-green{
  color: #4f7f34;
}

.session-sheet-grid{
  display:grid;
  grid-template-columns: 52% 48%;
  border-bottom: 1px solid #a5a5a5;
}

.session-cell-title{
  min-height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 8px;
  text-align:center;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  color: #7a1f1f;
  background: #f3f3f3;
}

.session-cell-title-green{
  color: #4f7f34;
}

.session-sheet-grid-head > div:first-child,
.session-sheet-grid-body > div:first-child{
  border-right: 1px solid #a5a5a5;
}

.session-sheet-grid-body > div{
  min-height: 132px;
}

.session-sheet-grid-warmup > div{
  min-height: 96px;
}

.session-cell-empty{
  background: #f9f9f9;
}

.session-cell-text{
  padding: 8px;
  display:flex;
}

.session-editable{
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  border: 1px dashed #c8c8c8;
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  padding: 8px 10px;
  outline: none;
  font-size: 12px;
  line-height: 1.45;
  color: #2f2f2f;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.session-editable:focus{
  border-color: #4f7f34;
  box-shadow: 0 0 0 2px rgba(79,127,52,0.16);
}

.session-editable:empty::before{
  content: attr(data-placeholder);
  color: #8c8c8c;
}

.session-editable-inline{
  min-height: 28px;
}

.session-editable-title{
  min-height: 36px;
  text-align: center;
  font-weight: 900;
  color: #4f7f34;
}

.session-cell-diagram{
  position: relative;
  padding: 8px;
  background: #f9f9f9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}

.session-cell-diagram-editable{
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}

.session-cell-diagram-editable:hover{
  background: #f1f6fb;
  box-shadow: inset 0 0 0 2px rgba(42,120,227,0.18);
}

.session-cell-diagram-editable:focus-visible{
  outline: 2px solid rgba(42,120,227,0.55);
  outline-offset: -2px;
}

.session-cell-diagram-editable .session-court-svg{
  pointer-events: none;
}

.session-diagram-hint{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(7,18,45,0.82);
  color: #f5f5f5;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 8px;
  pointer-events: none;
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}

.session-court-svg{
  width: 100%;
  height: auto;
  max-width: 370px;
}

.session-court-svg-mini{
  max-width: 170px;
}

.session-court-svg-full{
  display: block;
  width: 100%;
  max-width: 100%;
}

.session-sheet-observation{
  border-bottom: none;
  align-items:flex-start;
}

.session-sheet-observation .session-editable-inline{
  min-height: 58px;
}

.projects-side-stack{
  display:flex;
  flex-direction: column;
  width: 280px;
  align-items: stretch;
  gap: 10px;
}

/* Calendario, equipos, biblioteca y notas comparten la columna lateral. */
.projects-side-stack > .sessions-library-panel{
  width: 100%;
  max-width: none;
}

.projects-calendar-card{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  padding: 10px;
}

.projects-teams-card{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  padding: 10px;
}

.projects-teams-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.projects-teams-title{
  font-size: 13px;
  font-weight: 1000;
}

.projects-create-team-btn{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
}

.projects-teams-list{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.projects-teams-row{
  display:flex;
  align-items: stretch;
  gap: 8px;
}

.projects-teams-item{
  flex: 1 1 auto;
  appearance: none;
  text-align: left;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.14);
  padding: 7px 9px;
  color: var(--text);
  cursor: pointer;
}

.projects-teams-item:hover{
  background: rgba(255,255,255,0.12);
}

.projects-teams-item.active{
  border-color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.2);
}

.projects-teams-name{
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  word-break: break-word;
}

.projects-teams-count{
  flex: 0 0 auto;
  min-width: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 1000;
  text-align: center;
  padding: 3px 8px;
}

.projects-teams-empty{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted2);
}

.projects-team-edit-btn{
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.projects-team-edit-btn{
  width: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
}

.projects-team-edit-btn:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.34);
}

.projects-team-edit-btn:active{
  transform: translateY(1px);
}

.projects-calendar-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.projects-cal-label{
  font-size: 13px;
  font-weight: 1000;
  text-transform: capitalize;
}

.projects-cal-nav{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  justify-content: center;
  padding: 0;
}

.projects-cal-weekdays,
.projects-cal-grid{
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.projects-cal-weekdays span{
  font-size: 11px;
  text-align: center;
  color: var(--muted2);
  font-weight: 900;
}

.projects-cal-day{
  position: relative;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}

.projects-cal-day.empty{
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.projects-cal-day.today{
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.16);
}

.projects-cal-day.selected{
  border-color: rgba(210,210,210,0.72);
  background: rgba(210,210,210,0.18);
}

.projects-cal-day.has-team::after{
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 1px rgba(16,22,46,0.78);
}

.projects-agenda-card{
  width: 260px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  padding: 10px;
}

.projects-agenda-title{
  font-size: 13px;
  font-weight: 1000;
}

.projects-agenda-list{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
}

.projects-team-sessions-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.projects-session-create-btn{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
}

.projects-team-sessions-list{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
}

.projects-team-session-row{
  display:flex;
  align-items: stretch;
  gap: 8px;
}

.projects-team-session-btn{
  flex: 1 1 auto;
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.14);
  color: var(--text);
  padding: 7px 8px;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.projects-team-session-btn:hover{
  background: rgba(210,210,210,0.18);
}

.projects-team-session-btn.active{
  border-color: rgba(210,210,210,0.72);
  background: rgba(210,210,210,0.22);
}

.projects-team-session-delete{
  flex: 0 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,107,107,0.42);
  border-radius: 10px;
  background: rgba(255,107,107,0.14);
  color: #ff6b6b;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.projects-team-session-attendance{
  flex: 0 0 auto;
  min-width: 82px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 1000;
  cursor: pointer;
  padding: 0 8px;
}

.projects-team-session-attendance:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.46);
}

.projects-team-session-attendance:active{
  transform: translateY(1px);
}

.projects-team-session-delete:hover{
  background: rgba(255,107,107,0.22);
  border-color: rgba(255,107,107,0.62);
}

.projects-team-session-delete:active{
  transform: translateY(1px);
}

.projects-team-session-delete svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.projects-team-session-date{
  font-size: 12px;
  font-weight: 1000;
}

.projects-team-session-title{
  font-size: 11px;
  color: var(--muted2);
}

.projects-agenda-item{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.14);
  padding: 6px 8px;
}

.projects-agenda-item-text{
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.projects-agenda-del{
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 8px;
  cursor:pointer;
}

.projects-agenda-empty{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted2);
}

.projects-agenda-actions{
  margin-top: 8px;
  display:flex;
  gap: 6px;
}

.projects-agenda-input{
  flex:1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 9px;
  outline:none;
  font-size: 12px;
}

.projects-agenda-add{
  padding: 8px 10px;
  border-radius: 10px;
}

.left, .right { min-width: 0; }
.right{ min-width: 320px; }
.cuts-sidebar{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.cuts-sidebar .card{
  height: auto;
}

.cuts-sidebar > .card:first-child{
  min-height: 0;
}

.card{
  height: 100%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.video-card{ display:flex; flex-direction: column; }

.card-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.cuts-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cuts-card-head > div:first-child{
  min-width: 0;
}

.cuts-card-head .cut-mode-tabs{
  flex: 0 0 min(220px, 44%);
  padding: 0;
  align-self: center;
}

.card-title{ font-weight: 1000; letter-spacing: 0.2px; }
.card-sub{ margin-top: 4px; font-size: 12px; color: var(--muted2); }

.video-wrap{
  padding: 12px;
  flex: 0 0 auto;
  display:flex;
}

.video-stage{
  position: relative;
  width: 100%;
  display: flex;
}

video{
  width: 100%;
  border-radius: 14px;
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.10);
}

.player-controls{
  padding: 0 12px 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.player-controls.disabled{
  opacity: 0.82;
}

.player-controls-row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.player-control-btn{
  min-width: 56px;
  height: 32px;
  padding: 0 10px;
  justify-content: center;
}

.player-time-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.86);
  min-width: 140px;
}

.cuts-timeline-panel{
  padding: 6px 0 0 0;
  border-radius: 10px;
  border: none;
  background: transparent;
}

.cuts-timeline-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cuts-timeline-title{
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,255,255,0.88);
}

.cuts-timeline-meta{
  font-size: 11px;
  color: var(--muted2);
}

.cuts-timeline{
  position: relative;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
}

.player-controls.disabled .cuts-timeline{
  cursor: not-allowed;
}

.cuts-timeline-progress{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(210,210,210,0.32));
  pointer-events: none;
}

.cuts-timeline-markers{
  position: absolute;
  inset: 0;
}

.cuts-timeline-marker{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.84);
  background: #fb923c;
  box-shadow: 0 0 0 1px rgba(11,16,32,0.65);
  cursor: pointer;
}

.cuts-timeline-marker.active{
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.24);
}

.cuts-created-panel{
  padding: 0 12px 12px 12px;
}

.cuts-created-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.cuts-created-title{
  font-size: 12px;
  font-weight: 1000;
}

.cuts-created-list{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
}

.cuts-created-empty{
  font-size: 12px;
  color: var(--muted2);
}

.cuts-created-row{
  display:flex;
  align-items: stretch;
  gap: 8px;
}

.cuts-created-item{
  flex: 1;
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.14);
  color: var(--text);
  cursor: pointer;
  padding: 7px 8px;
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.cuts-created-item:hover{
  background: rgba(255,255,255,0.14);
}

.cuts-created-item.active{
  border-color: rgba(255,255,255,0.38);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow: 0 10px 22px rgba(3,10,30,0.18);
}

.cuts-created-item-top{
  font-size: 12px;
  font-weight: 1000;
  display:flex;
  align-items:center;
  gap: 6px;
  justify-content: space-between;
}

.cuts-created-badge{
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
  font-size: 10px;
  font-weight: 1000;
}

.cuts-created-item-sub{
  font-size: 11px;
  color: var(--muted2);
}

.cuts-created-edit,
.cuts-created-delete{
  flex: 0 0 44px;
  min-width: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
}

.cuts-created-edit{
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
}

.cuts-created-edit:hover{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
}

.cuts-created-delete{
  border-color: rgba(255,107,107,0.28);
  background: rgba(255,107,107,0.12);
}

.cuts-created-delete:hover{
  background: rgba(255,107,107,0.2);
  border-color: rgba(255,107,107,0.45);
}

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

.speed-select{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #000;
  border-radius: 10px;
  padding: 6px 8px;
  outline: none;
}

.speed-select option{
  color: #000;
}

.speed-select:focus{
  border-color: rgba(255,255,255,0.55);
}

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

  .cuts-team-folders-list{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .cuts-team-folders-head{
    flex-wrap: wrap;
  }

  .cuts-team-folders-actions{
    width: 100%;
    justify-content: space-between;
  }

  .hub-hero-body{
    flex-direction: column;
  }

  .hub-pill-list{
    justify-content: flex-start;
    max-width: none;
  }

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

  .exercise-library-item{
    grid-template-columns: 1fr;
  }

  .hub-title{
    font-size: 24px;
  }

  .dashboard-drawer{
    width: min(290px, 92vw);
  }

  #projectsWorkspace{
    grid-template-columns: 1fr;
  }

  .projects-side-stack{
    align-items: stretch;
  }

  .projects-calendar-card,
  .projects-teams-card,
  .projects-agenda-card{
    width: 100%;
  }

  .projects-team-session-row{
    flex-wrap: wrap;
  }

  .projects-team-session-btn{
    min-width: 100%;
  }

  .projects-team-session-attendance{
    flex: 1 1 auto;
    min-height: 36px;
  }

  .session-sheet-grid{
    grid-template-columns: 1fr;
  }

  .session-sheet-grid-head > div:first-child,
  .session-sheet-grid-body > div:first-child{
    border-right: none;
  }

  .session-sheet-grid-head > div{
    border-bottom: 1px solid #a5a5a5;
  }

  .session-sheet-grid-head > div:last-child{
    border-bottom: none;
  }

  .session-sheet-grid-body > div{
    min-height: 112px;
    border-bottom: 1px solid #a5a5a5;
  }

  .session-sheet-grid-body > div:last-child{
    border-bottom: none;
  }

  .board-shell{
    border-radius: 18px;
    padding: 10px;
  }

  .handball-board{
    border-radius: 14px;
    padding: 10px 16px;
  }

  .court-play-area{
    min-height: 0;
    border-width: 4px;
  }

  .court-center-line{
    border-left-width: 4px;
  }

  .court-center-circle,
  .court-goal,
  .court-goal-area{
    border-width: 4px;
  }

  .court-nine-meter,
  .court-mid-mark{
    border-width: 4px;
  }

  .board-sidebar{
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 220px;
    transform: translateX(100%);
  }

  .board-sidebar-toggle{
    left: -30px;
    width: 30px;
    height: 68px;
  }

  .board-sidebar-content{
    padding: 10px;
  }

  .board-item{
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .board-rotate-btn{
    width: 40px;
    height: 40px;
    font-size: 34px;
  }

  .board-arrow-handle{
    width: 24px;
    height: 24px;
  }

  .board-item-ball{
    width: 34px;
    height: 34px;
  }

  .board-item-cone{
    width: 38px;
    height: 24px;
  }

  .board-item-ladder{
    width: 26px;
    height: 62px;
  }

  .layout{
    grid-template-columns: 1fr;
    height: auto;
  }

  .right{
    min-width: 0;
  }

  .session-attendance-section-head{
    flex-direction: column;
  }

  .session-attendance-all{
    width: 100%;
  }

  .session-attendance-list{
    grid-template-columns: 1fr;
  }

  .session-attendance-player-card{
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .session-attendance-status-actions{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 980px){
  #projectsWorkspace:not(.hidden){
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 10px;
  }

  .projects-pdf-editor{
    min-width: 0;
    padding: 10px;
  }

  .projects-side-stack{
    width: 230px;
    align-items: stretch;
  }

  .projects-calendar-card,
  .projects-teams-card,
  .projects-agenda-card{
    width: 100%;
  }
}

/* Sesiones conserva siempre su columna auxiliar a la derecha. */
#projectsWorkspace.workspace-pane:not(.hidden){
  position: relative;
  display: block;
}

#projectsWorkspace.workspace-pane:not(.hidden) .projects-pdf-editor{
  margin-right: 296px;
}

#projectsWorkspace.workspace-pane:not(.hidden) .projects-side-stack{
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  align-self: start;
}

@media (max-width: 980px){
  #projectsWorkspace.workspace-pane:not(.hidden) .projects-pdf-editor{
    margin-right: 240px;
  }

  #projectsWorkspace.workspace-pane:not(.hidden) .projects-side-stack{
    width: 230px;
  }
}

@media (max-width: 640px){
  #projectsWorkspace.workspace-pane:not(.hidden) .projects-pdf-editor{
    margin-right: 198px;
  }

  #projectsWorkspace.workspace-pane:not(.hidden) .projects-side-stack{
    width: 190px;
  }
}

.meta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.meta-item{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.meta-k{ font-size: 12px; color: var(--muted2); font-weight: 900; }
.meta-v{ margin-top: 3px; font-weight: 900; word-break: break-word; }

.cut-mode-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px 0 12px;
}

.cut-mode-tab{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.78);
  border-radius: 10px;
  padding: 9px 10px;
  min-height: 40px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.2px;
}

.cut-mode-tab:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}

.cut-mode-tab.active{
  color: rgba(0,0,0,0.95);
  background: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.95);
}

.cut-mode-panel{
  min-height: 0;
}

.field-cut-intro{
  padding: 10px 12px 0 12px;
}

.field-cut-intro .card-title{
  font-size: 13px;
}

.field-cut-intro .card-sub{
  font-size: 12px;
}

.presets-toolbar{ padding: 10px 12px 0 12px; }
.hint-chip{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.75);
}

.preset-grid{
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}

.preset-item{
  position: relative;
  min-width: 0;
}

.preset-btn{
  appearance: none;
  width: 100%;
  text-align:left;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 42px 10px 10px;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  min-height: 78px;
  position: relative;
}
.preset-btn:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.preset-btn:active{ transform: translateY(1px); }
.preset-btn:disabled{ opacity: 0.45; cursor:not-allowed; }

.preset-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 8px;
}
.preset-name{
  display:flex;
  align-items:center;
  gap: 7px;
  min-width: 0;
  font-weight: 1000;
  letter-spacing: 0.2px;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.preset-emoji{
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
}
.preset-sub{ margin-top: 5px; font-size: 11px; color: var(--muted2); }

.preset-hotkey{
  display:inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 1000;
  color: rgba(0,0,0,0.95);
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
  padding: 4px 8px;
}

.preset-tag{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.75);
}

.edit-btn{
  position:absolute;
  bottom: 10px;
  right: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.85);
  border-radius: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
}

.edit-btn:hover{ background: rgba(255,255,255,0.08); }

.add-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  font-weight: 1000;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(210,210,210,0.12));
  border-color: rgba(255,255,255,0.22);
}

.record-card{
  flex: 0 0 auto;
}

.record-toolbar{
  padding: 10px 12px 0 12px;
}

.record-status{
  min-height: 32px;
  display:flex;
  align-items:center;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
  color: var(--muted2);
  font-size: 12px;
  font-weight: 900;
}

.record-status.active{
  border-color: rgba(255,255,255,0.48);
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

.record-grid{
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.record-toggle-item{
  --record-theme-bg: rgb(var(--primary-rgb) / 0.52);
  --record-theme-bg-hover: rgb(var(--primary-rgb) / 0.64);
  --record-theme-bg-active: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.88), rgb(var(--primary-rgb) / 0.66));
  --record-theme-border: rgb(var(--secondary-rgb) / 0.34);
  --record-theme-border-hover: rgb(var(--secondary-rgb) / 0.56);
  --record-theme-dot: var(--secondary);
  display:grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: stretch;
}

.record-toggle-item[data-record-theme="attack"]{
  --record-theme-bg: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.90), rgba(239,68,68,0.34));
  --record-theme-bg-hover: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.98), rgba(239,68,68,0.44));
  --record-theme-bg-active: linear-gradient(135deg, rgba(239,68,68,0.88), rgb(var(--primary-rgb) / 0.74));
  --record-theme-border: rgba(239,68,68,0.54);
  --record-theme-border-hover: rgba(239,68,68,0.72);
  --record-theme-dot: #ef4444;
}

.record-toggle-item[data-record-theme="defense"]{
  --record-theme-bg: linear-gradient(135deg, rgba(17,17,17,0.92), rgb(var(--primary-rgb) / 0.60));
  --record-theme-bg-hover: linear-gradient(135deg, rgba(17,17,17,0.98), rgb(var(--primary-rgb) / 0.70));
  --record-theme-bg-active: linear-gradient(135deg, rgba(17,17,17,1), rgb(var(--secondary-rgb) / 0.34));
  --record-theme-border: rgba(255,255,255,0.34);
  --record-theme-border-hover: rgba(255,255,255,0.56);
  --record-theme-dot: #111111;
}

.record-toggle-item[data-record-theme="transition"]{
  --record-theme-bg: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.52), rgb(var(--primary-rgb) / 0.70));
  --record-theme-bg-hover: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.64), rgb(var(--primary-rgb) / 0.82));
  --record-theme-bg-active: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.88), rgb(var(--primary-rgb) / 0.68));
  --record-theme-border: rgb(var(--secondary-rgb) / 0.68);
  --record-theme-border-hover: rgb(var(--secondary-rgb) / 0.86);
  --record-theme-dot: var(--secondary);
}

.record-toggle-btn{
  appearance: none;
  text-align:left;
  border: 1px solid var(--record-theme-border);
  background: var(--record-theme-bg);
  color: var(--text);
  border-radius: 10px;
  padding: 9px;
  cursor:pointer;
  min-height: 64px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

.record-shortcut-edit{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.90);
  border-radius: 10px;
  min-height: 64px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 1000;
}

.record-shortcut-edit:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
}

.record-toggle-btn:hover{
  background: var(--record-theme-bg-hover);
  border-color: var(--record-theme-border-hover);
}

.record-toggle-btn:active{
  transform: translateY(1px);
}

.record-toggle-btn:disabled{
  opacity: 0.45;
  cursor:not-allowed;
}

.record-toggle-btn.recording{
  opacity: 1;
  border-color: var(--record-theme-border-hover);
  background: var(--record-theme-bg-active);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.20);
}

.record-toggle-top{
  display:flex;
  align-items:center;
  gap: 6px;
}

.record-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--record-theme-dot);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}

.record-toggle-btn.recording .record-dot{
  background: var(--record-theme-dot);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}

.record-toggle-name{
  font-weight: 1000;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.record-hotkey{
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 4px 7px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  font-size: 9px;
  font-weight: 1000;
}

.record-toggle-sub{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted2);
  font-weight: 800;
}

.record-toggle-btn.recording .record-toggle-sub{
  color: rgba(255,255,255,0.84);
}

.modal-card.record-result-card{
  width: min(920px, 96vw);
  min-height: min(420px, 76vh);
  border-color: var(--border2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
    rgba(5,5,5,0.96);
  box-shadow: var(--shadow);
}

.record-result-card .modal-head{
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.10);
}

.record-result-body{
  min-height: 320px;
  background: rgba(255,255,255,0.02);
}

.record-result-play-panel{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.record-result-question{
  font-size: 18px;
  font-weight: 1000;
  color: rgba(255,255,255,0.94);
}

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

.record-result-action{
  appearance: none;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
  overflow-wrap: anywhere;
}

.record-result-action:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.32);
}

.record-result-action.selected,
.record-result-action[aria-pressed="true"]{
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.record-result-action:active{
  transform: translateY(1px);
}

.record-result-custom-action-item{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.record-result-custom-action-item .record-result-action{
  min-width: 0;
}

.record-result-action-input{
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 13px;
  font-weight: 1000;
  outline: none;
}

.record-result-action-edit{
  appearance: none;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-weight: 1000;
}

.record-result-action-edit:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.32);
}

.modal-subtitle{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
}

.direct-cut-player-card{
  width: min(640px, 96vw);
}

.direct-cut-player-body{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.direct-cut-player-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
}

.direct-cut-player-option{
  appearance:none;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 1000;
}

.direct-cut-player-option:hover,
.direct-cut-player-option.selected{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.52);
}

.direct-cut-player-option:active{
  transform: translateY(1px);
}

@media (max-width: 560px){
  .cuts-card-head{
    flex-direction: column;
    align-items: stretch;
  }

  .cuts-card-head .cut-mode-tabs{
    flex: none;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .cut-mode-tabs,
  .preset-grid,
  .record-grid{
    grid-template-columns: 1fr;
  }

  .preset-btn,
  .record-toggle-btn,
  .record-shortcut-edit{
    min-height: 60px;
  }

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

.modal{
  position: fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.hidden{ display:none; }

.modal-card{
  width: min(560px, 96vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(16,22,46,0.92);
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
  overflow:hidden;
}
.modal-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content: space-between; gap:10px;
}
.modal-title{ font-weight: 1000; }
.btn-icon{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  cursor: pointer;
}
.btn-icon:hover{ background: rgba(255,255,255,0.10); }

.modal-body{ padding: 14px; }
.modal-label{ display:block; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 900; }
.modal-input{
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline:none;
}

.team-select-card{
  width: min(460px, 96vw);
}

.session-attendance-card{
  width: min(860px, 96vw);
  max-height: min(86vh, 760px);
  display:flex;
  flex-direction: column;
  border-color: rgb(var(--secondary-rgb) / 0.26);
  background:
    linear-gradient(145deg, rgb(var(--primary-rgb) / 0.94), rgb(var(--primary-rgb) / 0.78)),
    rgb(var(--primary-rgb) / 0.96);
}

.save-exercise-card{
  width: min(480px, 96vw);
}

.delete-cut-card{
  width: min(420px, 92vw);
}

.select-cuts-video-card{
  width: min(720px, 96vw);
  max-height: min(86vh, 760px);
  display:flex;
  flex-direction: column;
}

.load-exercise-card{
  width: min(760px, 96vw);
}

.delete-cut-body{
  padding-top: 20px;
  padding-bottom: 20px;
}

.delete-cut-message{
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}

.select-cuts-video-body{
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.select-cuts-video-toolbar{
  display:flex;
  align-items:center;
  gap: 8px;
}

.select-cuts-video-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(54vh, 460px);
  overflow: auto;
  padding-right: 2px;
}

.select-cuts-video-empty{
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted2);
  font-size: 13px;
}

.select-cuts-video-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

.select-cuts-video-item:hover{
  background: rgba(255,255,255,0.10);
}

.select-cuts-video-item input{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: rgb(var(--secondary-rgb));
}

.select-cuts-video-item-content{
  min-width: 0;
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.select-cuts-video-item-top{
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.select-cuts-video-item-title{
  min-width: 0;
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
  overflow-wrap: anywhere;
}

.select-cuts-video-origin{
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.14);
}

.select-cuts-video-origin.goalkeeper{
  background: rgba(34,197,94,0.16);
  color: #bbf7d0;
}

.select-cuts-video-origin.field{
  background: rgba(59,130,246,0.18);
  color: #bfdbfe;
}

.select-cuts-video-item-sub{
  font-size: 12px;
  color: var(--muted2);
  overflow-wrap: anywhere;
}

.team-select-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.save-exercise-body{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.load-exercise-body{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.team-select-date{
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
}

.session-attendance-meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
}

.session-attendance-brand{
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 10px;
}

.session-attendance-brand-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display:block;
  flex: 0 0 auto;
}

.session-attendance-body{
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.session-attendance-section-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.session-attendance-section-title{
  font-size: 16px;
  font-weight: 1000;
  color: rgba(255,255,255,0.96);
}

.session-attendance-summary,
.session-attendance-empty{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.68);
}

.session-attendance-all{
  flex: 0 0 auto;
  min-width: 118px;
  justify-content: center;
}

.session-attendance-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.session-attendance-player-card{
  position: relative;
  display:grid;
  grid-template-columns: minmax(58px, 72px) minmax(0, 1fr);
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(9,15,34,0.30);
  padding: 10px;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}

.session-attendance-player-card:hover{
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
}

.session-attendance-status-actions{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.session-attendance-status-btn{
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.70);
  font-size: 10px;
  font-weight: 1000;
  text-align:center;
  text-transform: uppercase;
  padding: 8px 7px;
  cursor: pointer;
  min-height: 36px;
}

.session-attendance-status-btn:hover,
.session-attendance-status-btn:focus-visible{
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.10);
  outline: none;
}

.session-attendance-status-btn.active[data-attendance-status="present"]{
  border-color: rgba(255,255,255,0.46);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}

.session-attendance-status-btn.active[data-attendance-status="justified_absence"]{
  border-color: rgba(255,255,255,0.46);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}

.session-attendance-status-btn.active[data-attendance-status="unjustified_absence"]{
  border-color: rgba(255,255,255,0.46);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}

.session-attendance-reason{
  grid-column: 1 / -1;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.session-attendance-reason.hidden{
  display:none;
}

.session-attendance-reason-label{
  font-size: 11px;
  font-weight: 1000;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}

.session-attendance-reason-input{
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: var(--text);
  outline: none;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.session-attendance-reason-input:focus{
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.session-attendance-photo{
  width: 58px;
  height: 68px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.48);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size: 10px;
  font-weight: 1000;
}

.session-attendance-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.session-attendance-photo.has-club-logo-fallback{
  background:
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.88), rgb(var(--primary-rgb) / 0.68));
  border-color: rgb(var(--secondary-rgb) / 0.42);
}

.session-attendance-photo-logo{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display:block;
}

.session-attendance-player-info{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.session-attendance-player-name{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(255,255,255,0.96);
  line-height: 1.25;
  word-break: break-word;
}

.session-attendance-player-meta,
.session-attendance-player-rating{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.66);
  word-break: break-word;
}

.save-exercise-help{
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}

.modal-select{
  appearance: none;
  cursor: pointer;
}

.load-exercise-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.exercise-picker-item{
  width: 100%;
  display:grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 12px;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(9,15,34,0.26);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.exercise-picker-item:hover,
.exercise-picker-item:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  outline: none;
}

.exercise-picker-item.is-selected{
  border-color: rgba(255,255,255,0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  box-shadow: 0 18px 30px rgba(3,10,30,0.18);
}

.exercise-picker-preview{
  aspect-ratio: 420 / 230;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.exercise-picker-preview svg{
  width: 100%;
  height: 100%;
  display: block;
}

.exercise-picker-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.exercise-picker-top{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.exercise-picker-title{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(255,255,255,0.96);
}

.exercise-picker-meta,
.exercise-picker-info{
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.68);
}

.team-select-actions{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content: flex-end;
  gap: 8px;
}

.row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.field{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.label{ font-size: 12px; color: rgba(255,255,255,0.60); font-weight: 900; }
.input{
  width: 90px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline: none;
}
.input-shortcut{
  width: 84px;
  text-transform: uppercase;
  text-align: center;
}
.suffix{ font-size: 12px; color: rgba(255,255,255
,0.60); }
.meta-k{ font-size: 13px; }
.meta-v{ font-size: 14px; }

/* Equipo: ficha de jugador con marca principal */
.team-player-sheet-form,
.team-player-sheet-card{
  background:
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.96), rgb(var(--primary-rgb) / 0.88)),
    var(--primary);
  border: 1px solid rgb(var(--secondary-rgb) / 0.42);
  color: var(--text);
  box-shadow: 0 22px 48px rgba(9,0,2,0.34);
}

.team-player-sheet-card{
  border-radius: 16px;
}

.team-player-sheet-band{
  background: rgb(0 0 0 / 0.16);
  border-bottom: 2px solid var(--secondary);
  color: #fff8e8;
}

.team-player-sheet-card-head{
  background:
    linear-gradient(135deg, rgb(var(--primary-rgb) / 0.92), rgb(0 0 0 / 0.10));
  border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.28);
}

.team-player-sheet-card-body,
.team-player-sheet-form{
  gap: 16px;
}

.team-player-sheet-card-title,
.team-player-sheet-form-title,
.team-rating-title,
.team-rating-item-label,
.team-player-sheet-section-title,
.team-player-sheet-rating-title,
.team-player-sheet-observations-label,
.team-player-sheet-medias-title,
.team-player-attendance-title{
  color: #fff8e8;
}

.team-player-sheet-card-meta,
.team-player-sheet-form-sub,
.team-rating-sub,
.team-rating-scale-note,
.team-rating-item-notes > span,
.team-rating-subscore-label,
.team-player-sheet-section-sub,
.team-player-sheet-rating-row-label,
.team-player-sheet-observations-body,
.team-player-sheet-observations-body.is-empty,
.team-player-sheet-medias-cell.is-label,
.team-player-attendance-meta,
.team-player-attendance-empty{
  color: rgb(255 248 232 / 0.72);
}

.team-player-sheet-form-head,
.team-rating-head,
.team-editor-actions,
.team-player-sheet-section-head,
.team-player-sheet-rating-head,
.team-player-sheet-observations-head,
.team-player-sheet-footer{
  border-color: rgb(var(--secondary-rgb) / 0.30);
}

.team-player-photo-card,
.team-rating-card,
.team-player-sheet-rating-card,
.team-player-sheet-observations,
.team-player-sheet-medias,
.team-player-sheet-excel-section{
  background: rgb(0 0 0 / 0.12);
  border: 1px solid rgb(var(--secondary-rgb) / 0.26);
  color: var(--text);
  box-shadow: none;
}

.team-player-photo-frame,
.team-player-sheet-card-photo{
  background:
    linear-gradient(180deg, rgb(var(--primary-rgb) / 0.74), rgb(var(--primary-rgb) / 0.54));
  border: 1px solid rgb(var(--secondary-rgb) / 0.42);
  color: rgb(255 248 232 / 0.66);
}

.team-player-sheet-card-photo{
  box-shadow: 0 12px 24px rgba(9,0,2,0.28);
}

.team-editor-field,
.team-rating-item,
.team-rating-subscore-row,
.team-rating-score,
.team-player-sheet-info-item,
.team-player-attendance-stat,
.team-player-attendance-row,
.team-player-sheet-excel-detail,
.team-player-sheet-detailed-row,
.team-player-sheet-rating-row,
.team-player-sheet-observations-item,
.team-player-sheet-medias-cell{
  background: rgb(255 255 255 / 0.055);
  border: 1px solid rgb(var(--secondary-rgb) / 0.20);
  color: var(--text);
}

.team-player-sheet-summary,
.team-player-sheet-info-grid,
.team-player-attendance-summary,
.team-player-sheet-scale,
.team-player-sheet-metrics-table,
.team-player-sheet-medias-grid{
  background: transparent;
  border: 0;
  gap: 8px;
  padding: 0;
}

.team-player-sheet-summary-chip,
.team-player-sheet-scale-cell,
.team-player-sheet-scale-value,
.team-player-sheet-metrics-row,
.team-player-sheet-metrics-cell{
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(var(--secondary-rgb) / 0.20);
  border-radius: 8px;
  color: var(--text);
}

.team-editor-field span,
.team-rating-score span,
.team-player-sheet-excel-header,
.team-player-sheet-excel-side-title,
.team-player-sheet-medias-cell.is-value{
  background: rgb(0 0 0 / 0.16);
  border-color: rgb(var(--secondary-rgb) / 0.28);
  color: var(--secondary);
}

.team-editor-input,
.team-rating-subscore-input,
.team-player-sheet-observations-edit{
  background: rgb(0 0 0 / 0.18);
  color: #fff8e8;
}

.team-editor-input:focus,
.team-player-sheet-observations-edit:focus{
  box-shadow: inset 0 0 0 2px rgb(var(--secondary-rgb) / 0.46);
}

.team-player-sheet-summary-label,
.team-player-sheet-info-label,
.team-player-attendance-stat-label,
.team-player-sheet-detailed-note-label,
.team-player-sheet-rating-average,
.team-player-sheet-excel-average,
.team-player-sheet-scale-value,
.team-player-sheet-metrics-cell.is-value{
  color: var(--secondary);
}

.team-player-sheet-summary-value,
.team-player-sheet-info-value,
.team-player-attendance-stat-value,
.team-player-sheet-detailed-title,
.team-player-sheet-detailed-note-value,
.team-player-sheet-rating-row-value,
.team-player-sheet-metrics-cell,
.team-player-sheet-medias-cell{
  color: #fff8e8;
}

.team-player-sheet-summary-chip:last-child,
.team-player-sheet-rating-average,
.team-player-sheet-excel-average{
  border-color: rgb(var(--secondary-rgb) / 0.42);
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip:last-child,
.team-player-sheet-detailed-row:nth-child(even),
.team-player-sheet-metrics-table .team-player-sheet-metrics-row{
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(var(--secondary-rgb) / 0.24);
  color: #fff8e8;
}

.team-player-sheet-scale-cell.is-active{
  background: rgb(var(--secondary-rgb) / 0.24);
  color: #fff8e8;
  box-shadow: inset 0 0 0 2px rgb(var(--secondary-rgb) / 0.42);
}

/* Equipo: lectura y jerarquia de texto */
.team-player-sheet-card,
.team-player-sheet-form{
  font-size: 14px;
  line-height: 1.45;
}

.team-player-sheet-band-title,
.team-player-sheet-form-title,
.team-player-sheet-section-title,
.team-rating-title,
.team-player-sheet-rating-title,
.team-player-sheet-observations-label,
.team-player-sheet-medias-title{
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.team-player-sheet-band-meta,
.team-player-sheet-card-meta,
.team-player-sheet-form-sub,
.team-player-sheet-section-sub,
.team-rating-sub{
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.team-player-sheet-card-title{
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
  word-break: break-word;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-title{
  font-size: 18px;
  line-height: 1.2;
}

.team-player-sheet-card-meta{
  font-size: 12px;
  color: rgb(255 248 232 / 0.80);
  word-break: break-word;
}

.team-player-sheet-summary-chip,
.team-player-sheet-info-item,
.team-player-attendance-stat,
.team-player-sheet-rating-row,
.team-player-sheet-medias-cell,
.team-player-sheet-metrics-cell{
  min-width: 0;
}

.team-player-sheet-summary-label,
.team-player-sheet-info-label,
.team-player-attendance-stat-label,
.team-player-sheet-detailed-note-label,
.team-player-sheet-medias-cell.is-label,
.team-player-sheet-rating-row-label,
.team-player-sheet-metrics-cell{
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.team-player-sheet-summary-value,
.team-player-sheet-info-value,
.team-player-attendance-stat-value,
.team-player-sheet-rating-row-value,
.team-player-sheet-detailed-title,
.team-player-sheet-detailed-note-value,
.team-player-sheet-medias-cell,
.team-player-sheet-metrics-cell{
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.team-player-sheet-summary-value,
.team-player-attendance-stat-value{
  font-size: 18px;
  line-height: 1.1;
}

.team-editor-field span,
.team-rating-score span{
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.team-editor-input,
.team-rating-subscore-input,
.team-player-sheet-observations-edit{
  font-size: 14px;
  line-height: 1.35;
}

.team-rating-item-notes > span,
.team-player-sheet-observations-body,
.team-player-sheet-observations-item,
.team-player-attendance-reason{
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.team-player-card-toggle{
  color: #fff8e8;
  border-color: rgb(var(--secondary-rgb) / 0.36);
  background: rgb(0 0 0 / 0.16);
  font-size: 12px;
  line-height: 1.2;
}

.team-player-save-confirmation{
  padding: 12px 18px;
  border-bottom: 1px solid #b9d8c3;
  background: #edf8f0;
  color: #245c3c;
  font-size: 13px;
  font-weight: 700;
}
.team-player-card-footer-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #d8dee8;
  background: #ffffff;
}
.team-player-card-footer-actions > button{
  width: auto;
}
.team-player-sheet-form > .team-editor-actions{
  padding-top: 16px;
  margin-top: 8px;
}
.team-player-card-edit,
.team-player-card-toggle,
.team-player-card-delete{
  border: 1px solid rgb(var(--secondary-rgb) / 0.42);
  background: var(--primary);
  color: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.team-player-card-edit:hover,
.team-player-card-toggle:hover,
.team-player-card-delete:hover{
  background: rgb(var(--primary-rgb) / 0.86);
  color: #000;
}

.team-player-card-edit:disabled,
.team-player-card-toggle:disabled,
.team-player-card-delete:disabled{
  color: rgb(0 0 0 / 0.62);
}

.team-player-sheet-summary{
  align-items: stretch;
}

.team-player-sheet-summary-chip{
  min-height: 74px;
  padding: 10px 8px;
  display:grid;
  grid-template-rows: 30px 1fr;
  align-items:center;
  justify-items:center;
  text-align:center;
  gap: 6px;
}

.team-player-sheet-summary-label{
  width: 100%;
  min-height: 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.team-player-sheet-summary-value{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-variant-numeric: tabular-nums;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip:last-child{
  min-height: 58px;
  grid-template-rows: 22px 1fr;
}

/* Equipo: ficha/informe claro con acento de club */
.team-player-sheet-form,
.team-player-sheet-card{
  background: linear-gradient(180deg, #fbfcfe, #f1f4f8);
  border: 1px solid #cad3df;
  color: #172133;
  box-shadow: 0 22px 50px rgba(4,10,25,0.18);
}

.team-player-sheet-card{
  border-radius: 14px;
}

.team-player-sheet-band{
  background: linear-gradient(180deg, #213a5f, #182d49);
  border-bottom: 3px solid var(--secondary);
  color: #f7fbff;
}

.team-player-sheet-card-head{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) 104px;
  grid-template-areas: "identity summary actions";
  align-items:start;
  gap: 16px;
  background: #ffffff;
  border-bottom: 1px solid #d8dee8;
}

.team-player-sheet-card-identity{
  grid-area: identity;
}

.team-player-sheet-summary{
  grid-area: summary;
  width: 100%;
  align-self: stretch;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #cad3df;
  border-radius: 8px;
  background: #cad3df;
}

.team-player-sheet-summary-chip{
  min-height: 64px;
  padding: 9px 8px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  color: #172133;
  text-align:center;
}

.team-player-sheet-summary-chip:last-child{
  grid-column: 1 / -1;
  background: #fff7d8;
  box-shadow: inset 0 0 0 1px rgb(var(--secondary-rgb) / 0.34);
}

.team-player-sheet-summary-label{
  min-height: 0;
  color: #5b6d86;
}

.team-player-sheet-summary-value{
  color: #172133;
}

.team-player-sheet-summary-chip:last-child .team-player-sheet-summary-label{
  color: #6f6131;
}

.team-player-sheet-summary-chip:last-child .team-player-sheet-summary-value{
  color: var(--primary);
  font-size: 22px;
}

.team-player-card-actions{
  grid-area: actions;
  width: 100%;
  display:flex;
  flex-direction: column;
  align-items: stretch;
  justify-content:flex-start;
  gap: 8px;
}

.team-player-card-edit,
.team-player-card-toggle,
.team-player-card-delete{
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  padding: 8px 10px;
  color: #172133;
  box-shadow: none;
}

.team-player-card-toggle{
  border-color: #c8d1dd;
  background: #f5f8fb;
  color: #32527f;
}

.team-player-card-edit{
  border-color: rgba(68,122,88,0.28);
  background: #f6fbf7;
  color: #2d6e49;
}

.team-player-card-delete{
  border-color: rgba(159,55,55,0.28);
  background: #fff7f7;
  color: #a53d3d;
}

.team-player-card-toggle:hover{
  background: #eaf0f7;
  color: #24466f;
}

.team-player-card-edit:hover{
  background: #ebf5ed;
  color: #245c3c;
}

.team-player-card-delete:hover{
  background: #fdeeee;
  color: #8f3030;
}

.team-player-card-edit:disabled,
.team-player-card-toggle:disabled,
.team-player-card-delete:disabled{
  color: #8b96a6;
  background: #eef2f7;
}

.team-player-sheet-form-title,
.team-rating-title,
.team-rating-item-label,
.team-player-sheet-section-title,
.team-player-sheet-rating-title,
.team-player-sheet-observations-label,
.team-player-sheet-medias-title,
.team-player-attendance-title{
  color: #1e3252;
}

.team-player-sheet-card-title{
  color: #16233b;
}

.team-player-sheet-card-meta,
.team-player-sheet-form-sub,
.team-rating-sub,
.team-rating-scale-note,
.team-rating-item-notes > span,
.team-rating-subscore-label,
.team-player-sheet-section-sub,
.team-player-sheet-rating-row-label,
.team-player-sheet-observations-body,
.team-player-sheet-observations-body.is-empty,
.team-player-sheet-medias-cell.is-label,
.team-player-attendance-meta,
.team-player-attendance-empty{
  color: #5a6c85;
}

.team-player-photo-card,
.team-rating-card,
.team-player-sheet-rating-card,
.team-player-sheet-observations,
.team-player-sheet-medias,
.team-player-sheet-excel-section{
  background: #ffffff;
  border: 1px solid #cad3df;
  color: #172133;
  box-shadow: none;
}

.team-rating-item,
.team-rating-subscore-row,
.team-rating-score,
.team-player-sheet-info-item,
.team-player-attendance-stat,
.team-player-attendance-row,
.team-player-sheet-excel-detail,
.team-player-sheet-detailed-row,
.team-player-sheet-rating-row,
.team-player-sheet-observations-item,
.team-player-sheet-medias-cell{
  background: #ffffff;
  border-color: #d4dce7;
  color: #172133;
}

.team-editor-field span,
.team-rating-score span,
.team-player-sheet-excel-header,
.team-player-sheet-excel-side-title{
  background: #edf2f7;
  border-color: #d2d9e3;
  color: #3c4f69;
}

.team-editor-input,
.team-rating-subscore-input,
.team-player-sheet-observations-edit{
  background: #ffffff;
  color: #162238;
}

.team-rating-score .team-editor-input[readonly]{
  background: #f6f8fb;
  color: #172133;
}

.team-player-sheet-summary-value,
.team-player-sheet-info-value,
.team-player-attendance-stat-value,
.team-player-sheet-detailed-title,
.team-player-sheet-detailed-note-value,
.team-player-sheet-rating-row-value,
.team-player-sheet-metrics-cell,
.team-player-sheet-medias-cell{
  color: #172133;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-card-head{
  grid-template-columns: minmax(0, 1fr) auto 104px;
  grid-template-areas: "identity summary actions";
  align-items:center;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary{
  display:block;
  width: auto;
  min-width: 116px;
  align-self:center;
  border: 0;
  background: transparent;
  padding: 0;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip{
  display:none;
}

.team-player-sheet-card.is-collapsed .team-player-sheet-summary-chip:last-child{
  display:flex;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--secondary-rgb) / 0.42);
  border-radius: 8px;
  background: #fff7d8;
}

@media (max-width: 1180px){
  .team-player-sheet-card-head{
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    grid-template-areas:
      "identity actions"
      "summary summary";
  }

  .team-player-card-actions{
    flex-direction: row;
    justify-content:flex-end;
  }

  .team-player-card-edit,
  .team-player-card-toggle,
  .team-player-card-delete{
    width: auto;
  }
}

@media (max-width: 760px){
  .team-player-sheet-card-head,
  .team-player-sheet-card.is-collapsed .team-player-sheet-card-head{
    display:flex;
    flex-direction: column;
    align-items: stretch;
  }

  .team-player-card-actions{
    flex-direction: row;
    justify-content:flex-start;
  }

  .team-player-sheet-summary{
      grid-template-columns: 1fr;
    }
  }

.team-player-sheet-summary,
.team-player-sheet-medias-grid{
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

/* Direct manipulation controls */
.board-item[class*="board-item-arrow-"]{ pointer-events: none; }
.board-arrow-svg > g{ pointer-events: visiblePainted; }
.board-arrow-svg .board-arrow-hit{ fill: none; stroke: transparent; stroke-width: 24px; pointer-events: stroke; cursor: grab; }
.board-rotate-controls .board-rotate-btn{ width: 30px; height: 30px; font-size: 23px; border: 1px solid #cbd5e1; background: #fff; color: #172b46; text-shadow: none; touch-action: none; }
.board-rotate-controls .board-transform-handle{ background: #172b46; color: #fff; cursor: grab; }
.board-arrow-handles .board-arrow-handle{ width: 24px; height: 24px; background: #fff; border-color: #2563eb; touch-action: none; cursor: grab; }
.board-arrow-handles .board-arrow-handle-bend{ border-color: #d97706; }
.board-quick-actions{ padding-bottom: 12px; border-bottom: 1px solid #ffffff26; }
#appGuide{
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  border: 1px solid #466181;
  border-radius: 20px;
  background: #102036;
  color: #f1f5f9;
  box-shadow: 0 24px 80px #0008;
}
#appGuide::backdrop{ background: #020617b8; backdrop-filter: blur(4px); }
.app-guide-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #ffffff14; }
#appGuideSection{ color: #b9cde4; font-size: 12px; font-weight: 650; }
#appGuideSkip{ font-size: 12px; padding: 7px 10px; }
.app-guide-body{ padding: 24px 28px 12px; }
#appGuideIcon{ font-size: 32px; font-weight: 800; color: #7dd3fc; letter-spacing: -.04em; }
#appGuideTitle{ font-size: 25px; line-height: 1.2; margin: 12px 0; outline: none; }
#appGuideDescription{ color: #cbd5e1; font-size: 14px; line-height: 1.6; }
#appGuidePoints{ padding-left: 20px; margin: 20px 0; font-size: 14px; line-height: 1.6; }
#appGuidePoints li{ padding-left: 5px; margin: 9px 0; }
#appGuidePoints li::marker{ color: #7dd3fc; }
#appGuideTip{ padding: 12px 14px; background: #1e3750; border-radius: 9px; color: #c7d9eb; font-size: 12px; line-height: 1.6; }
#appGuideSteps{ display: flex; justify-content: center; gap: 7px; padding: 6px 20px 18px; }
#appGuideSteps button{ width: 30px; height: 30px; border: 1px solid #58708b; background: transparent; border-radius: 50%; color: #cbd5e1; cursor: pointer; }
#appGuideSteps button[aria-current="step"]{ background: #dbeafe; color: #173b61; border-color: #dbeafe; font-weight: 750; }
.app-guide-footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 1px solid #ffffff14; }
.app-guide-footer > div{ display: flex; gap: 8px; }
#appGuideProgress{ color: #a7bed7; font-size: 12px; white-space: nowrap; }
#appGuide button:focus-visible{ outline: 3px solid #7dd3fc; outline-offset: 3px; }
@media(max-width: 420px){ .app-guide-body{ padding: 18px; } .app-guide-footer{ padding: 14px; } .app-guide-footer .btn{ padding: 8px 10px; } }
.board-animation-panel{
  border: 1px solid #587aa366;
  border-radius: 12px;
  padding: 12px;
  background: #102238;
  display: grid;
  gap: 9px;
}
#boardAnimationPanel [hidden]{ display: none !important; }
.board-animation-heading{ color: #f8fafc; font-size: 14px; font-weight: 750; }
.board-tools .board-animation-panel p{ margin: 0; line-height: 1.45; }
.board-animation-steps{ display: flex; gap: 6px; overflow-x: auto; padding: 3px 1px 7px; }
.board-animation-step{
  flex: 0 0 auto;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #60748d;
  border-radius: 7px;
  background: #1c3048;
  color: #e2e8f0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.board-animation-step[aria-pressed="true"]{ background: #dbeafe; border-color: #93c5fd; color: #153e75; font-weight: 750; }
.board-animation-step:disabled{ cursor: default; }
.board-animation-navigation{ display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.board-animation-navigation .btn{ min-width: 30px; padding: 3px 8px; font-size: 22px; }
#boardFrameLabel{ color: #e2e8f0; font-size: 12px; text-align: center; }
.board-animation-action{ width: 100%; justify-content: center; min-height: 38px; white-space: normal; }
.board-tools .board-animation-status{ font-size: 11px; color: #a5b4c8; text-align: center; }
.board-tools #boardAnimationSettings{ border: 0; border-top: 1px solid #ffffff20; border-radius: 0; padding: 8px 0 0; }
.board-tools #boardAnimationSettings summary{ font-size: 12px; color: #b7c7dd; font-weight: 500; }
.board-resize-line{
  position: absolute;
  height: 2px;
  background: #2563eb;
  box-shadow: 0 0 0 1px #ffffffb3;
  transform: translateY(-50%);
  pointer-events: none;
}
.board-rotate-controls #boardFreeResize{
  width: 34px;
  height: 34px;
  background: #2563eb;
  border: 2px solid #fff;
  color: #fff;
  cursor: ew-resize;
  font-size: 22px;
}
/* Local session recovery: native dialog keeps focus inside the review flow. */
.session-recovery-dialog { width: min(960px, 92vw); max-height: 85vh; overflow: auto; padding: 24px; border: 1px solid #53627a; border-radius: 16px; background: #152033; color: #f5f7fa; }
.session-recovery-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.session-recovery-dialog p { overflow-wrap: anywhere; }
.session-recovery-row { border-top: 1px solid #53627a; padding: 14px 0; }
.session-recovery-row label { display: flex; align-items: baseline; gap: 8px; }
.session-recovery-row input { flex-shrink: 0; }
.session-recovery-row pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.session-recovery-preview { max-width: 420px; }
.session-recovery-preview svg { width: 100%; height: auto; }
.session-recovery-dialog .btn { margin: 6px; }