/* ════════ SELECTEUR NIVEAU (1 2 3 4 5 visibles) ════════ */
.bl-level-pick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: transparent;
  min-height: 42px;
}

.bl-level-pick-btn {
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  color: rgba(220,232,245,.42);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control);
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  min-height: 32px;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}

.bl-level-pick-btn:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.bl-level-pick-btn:active {
  transform: scale(.96);
}

.bl-level-pick-btn.active {
  background: rgba(255,212,59,.12);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,212,59,.22);
}
/* ══════════════════════════════════════════════════════
   BALANCED.CSS — PhysEdBoard · Équipes équilibrées
   Même esthétique que teams.css
══════════════════════════════════════════════════════ */

:root {
  --bg:         #061428;
  --accent:     #ffd43b;
  --accent-rgb: 255, 212, 59;
  --panel:      #0d2040;
  --border:     #1a3a60;
  --text:       #c8daea;
  --dim:        #3a608a;
  --red:        #ff3c3c;

  --header-h:       64px;
  --ctrl-h:         60px;
  --grid-gap:       6px;
  --grid-pad-x:     8px;
  --card-radius:    8px;
  --card-header-h:  28px;
  --card-header-fs: 12px;
  --card-pad-x:     8px;
  --card-pad-y:     4px;

  /* Typographic scale (aligned with roles) */
  /* Typographic scale */
  --fs-label:       clamp(11px, 1.2vw, 12px);
  --fs-body:        clamp(13px, 1.5vw, 15px);
  --fs-control-sm:  clamp(12px, 1.5vw, 14px);
  --fs-control:     clamp(13px, 1.6vw, 15px);
  --fs-title:       clamp(16px, 2vw, 20px);
  --fs-subtitle:    clamp(15px, 1.8vw, 18px);

  /* settings-panel tokens */
  --sp-panel-bg:      var(--panel);
  --sp-panel-border:  var(--border);
  --sp-divider:       var(--border);
  --sp-accent:        var(--accent);
  --sp-accent-rgb:    var(--accent-rgb);
  --sp-text:          var(--text);
  --sp-text-dim:      rgba(255,255,255,.42);
  --sp-section-label: rgba(255,255,255,.25);
  --sp-hover-bg:      rgba(255,255,255,.05);
  --sp-fab-bg:        rgba(13,32,64,.95);
  --sp-icon-muted:    rgba(255,255,255,.45);
}

@media (min-width: 768px)  { :root { --grid-gap:8px;  --grid-pad-x:12px; --card-radius:10px; --card-header-h:32px; --card-header-fs:10px; --card-pad-x:10px; --card-pad-y:6px;  } }
@media (min-width: 1024px) { :root { --grid-gap:10px; --grid-pad-x:16px; --card-radius:11px; --card-header-h:34px; --card-header-fs:10px; --card-pad-x:12px; --card-pad-y:8px;  } }
@media (min-width: 1280px) { :root { --grid-gap:12px; --grid-pad-x:20px; --card-radius:12px; --card-header-h:36px; --card-header-fs:11px; --card-pad-x:14px; --card-pad-y:10px; } }
@media (min-width: 1536px) { :root { --grid-gap:14px; --grid-pad-x:24px; --card-radius:13px; --card-header-h:38px; --card-header-fs:11px; --card-pad-x:16px; --card-pad-y:11px; } }
@media (min-width: 1920px) { :root { --grid-gap:16px; --grid-pad-x:32px; --card-radius:14px; --card-header-h:42px; --card-header-fs:12px; --card-pad-x:18px; --card-pad-y:12px; } }
@media (max-height: 500px) { :root { --grid-gap:4px; --card-header-h:24px; --card-header-fs:8px; --card-pad-x:6px; --card-pad-y:3px; } }

/* ════════ RESET ════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; touch-action: manipulation; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  height: 100dvh; overflow: hidden; overscroll-behavior: none;
} 

/* ════════ STAGE ════════ */
.bl-stage {
  position: relative; z-index: 1;
  height: calc(100dvh - var(--ctrl-h));
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Results zone: fills space above presence bar */
.bl-results-zone {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}

/* ════════ EMPTY STATE ════════ */
.bl-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; animation: fadeUp .4s ease both;
}
.bl-empty-icon  { font-size: clamp(48px,8vw,80px); color: rgba(255,255,255,.05); line-height: 1; }
.bl-empty-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,4vw,40px); letter-spacing:.1em; color:rgba(255,255,255,.10); }
.bl-empty-sub   { font-size:clamp(11px,1.4vw,14px); font-weight:600; letter-spacing:.08em; color:rgba(255,255,255,.18); text-align:center; max-width:280px; line-height:1.6; }

/* ════════ PRESENCE BAR (bas de l'écran) ════════ */
.bl-presence-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #0a1628;
  border-top: 1px solid rgba(255, 212, 59, .12);
  backdrop-filter: blur(12px);
  animation: slideUp .25s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
}

.bl-presence-bar.collapsed {
  border-top-color: rgba(255,212,59,.08);
}
.bl-presence-bar.collapsed .bl-pbar-chips {
  padding: 0;
  max-height: 0;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.bl-pbar-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  padding: 8px 12px;
  gap: 10px;
  background: #0d1f3c;
}

.bl-pbar-label {
  font-size: 12px; font-weight: 700; letter-spacing: .45em; text-transform: uppercase;
  color: rgba(255,255,255,.25); display: flex; align-items: center; gap: 7px;
}
.bl-pbar-label i { color: rgba(255,212,59,.4); }
.bl-pbar-count {
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,212,59,.65);
  flex: 1;
  text-align: center;
}

/* Collapse toggle arrow */
.bl-pbar-toggle {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  color: rgba(255,255,255,.35);
  width: 28px; height: 28px; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, transform .25s;
  flex-shrink: 0;
}
.bl-pbar-toggle:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.7); }
.bl-presence-bar.collapsed .bl-pbar-toggle {
  transform: rotate(180deg);
}

/* Chips grid */
.bl-pbar-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 5px;
  overflow-y: auto;
  max-height: 140px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.06) transparent;
  padding: 0 12px 8px;
  transition: max-height .25s cubic-bezier(.22,1,.36,1), padding .25s;
}
.bl-pbar-chips::-webkit-scrollbar { height: 3px; }
.bl-pbar-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }


/* Chip présence */
.bl-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 14px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .04em;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  min-height: 36px;
  transition: background .15s, border-color .15s, opacity .15s, transform .1s;
  user-select: none; animation: chipIn .18s ease both;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-chip:hover { background: rgba(255,255,255,.09); }
.bl-chip:active { transform: scale(.94); }
.bl-chip.present {
  background: rgba(255,212,59,.10);
  border-color: rgba(255,212,59,.35);
  color: rgba(255,255,255,.95);
}
.bl-chip.absent {
  opacity: .38;
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.38) !important;
}

/* Gender-specific chips */
.bl-chip--m {
  background: rgba(96,165,250,0.14) !important;
  border-color: rgba(96,165,250,.4) !important;
  color: #93c5fd !important;
}
.bl-chip--f {
  background: rgba(244,114,182,0.14) !important;
  border-color: rgba(244,114,182,.4) !important;
  color: #f9a8d4 !important;
}
.bl-chip.absent.bl-chip--m,
.bl-chip.absent.bl-chip--f {
  opacity: .38;
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.38) !important;
}


/* Apply button (in modal footer) */
.bl-btn-apply {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  padding: 12px 28px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #000; border: none;
  box-shadow: 0 4px 20px rgba(255,212,59,.2); transition: all .15s; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%;
}
.bl-btn-apply:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 6px 28px rgba(255,212,59,.35); }
.bl-btn-apply:disabled { opacity: .35; cursor: not-allowed; }

/* Generate button */
.bl-btn-generate {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  padding: 0 22px; border-radius: 7px; cursor: pointer;
  background: var(--accent); color: #000; border: none;
  box-shadow: 0 3px 14px rgba(255,212,59,.25); transition: all .15s;
  height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.bl-btn-generate:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 5px 22px rgba(255,212,59,.38); }
.bl-btn-generate:disabled { opacity: .35; cursor: not-allowed; }

.bl-grid {
  display: grid; animation: fadeUp .3s ease both; overflow: hidden;
}
.bl-team-card {
  background: rgba(255,255,255,.025); border: 1px solid var(--border);
  border-radius: var(--card-radius); overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .15s;
  animation: cardIn .32s cubic-bezier(.22,1,.36,1) both;
}
.bl-team-card:nth-child(1)  { animation-delay:.02s } .bl-team-card:nth-child(2)  { animation-delay:.04s }
.bl-team-card:nth-child(3)  { animation-delay:.06s } .bl-team-card:nth-child(4)  { animation-delay:.08s }
.bl-team-card:nth-child(5)  { animation-delay:.10s } .bl-team-card:nth-child(6)  { animation-delay:.12s }
.bl-team-card:nth-child(7)  { animation-delay:.14s } .bl-team-card:nth-child(8)  { animation-delay:.16s }
.bl-team-card:nth-child(9)  { animation-delay:.18s } .bl-team-card:nth-child(10) { animation-delay:.20s }
.bl-team-card:nth-child(11) { animation-delay:.22s } .bl-team-card:nth-child(12) { animation-delay:.24s }
.bl-team-card:hover { border-color:rgba(255,212,59,.35); background:rgba(255,212,59,.04); transform:translateY(-2px); }

.bl-card-header {
  height: var(--card-header-h); padding: 0 var(--card-pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(255,212,59,.04);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.bl-card-title {
  font-size: var(--card-header-fs); font-weight: 700;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; flex: 1;
} 
.bl-card-count {
  font-size: var(--card-header-fs); font-weight: 600;
  letter-spacing: .12em; color: var(--text); white-space: nowrap;
}

.bl-card-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--card-pad-y) var(--card-pad-x); overflow: visible;
}
.bl-member {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  letter-spacing: .02em; color: var(--text);
  line-height: 1.35; white-space: nowrap; overflow: visible;
  display: flex; align-items: baseline; gap: 4px;
}

/* ════════ OVERLAY BASE ════════ */
.bl-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(2,2,8,.85);
  align-items: center; justify-content: center;
  backdrop-filter: blur(18px);
}
.bl-overlay.visible { display: flex; animation: rFadeIn .18s ease; }

/* ════════ MODAL ════════ */
.bl-modal {
  width: min(880px, 96vw);
  height: 80dvh;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  background: #08111f;
  border: 1px solid rgba(255,212,59,.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 60px rgba(255,212,59,.04);
  animation: rPop .26s cubic-bezier(.34,1.4,.64,1) both;
}

/* Modal top header bar */
.bl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid rgba(255,212,59,.10);
  background: #0a1628;
  flex-shrink: 0;
  gap: 10px;
}

.bl-modal-header-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-title); letter-spacing: .25em;
  display: flex; align-items: center; gap: 10px;
}

.bl-modal-header-title i { font-size: var(--fs-label); opacity: .5; color: var(--accent) }

/* Open book modal columns */
.bl-modal-columns {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bl-modal-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.06) transparent;
  width: auto;
}
.bl-modal-col::-webkit-scrollbar { width: 3px; }
.bl-modal-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 2px; }

.bl-modal-col-left {
  background: rgba(255,212,59,.02);
  border-right: 1px solid rgba(255,212,59,.08);
}
.bl-modal-col-right {
  background: rgba(255,255,255,.01);
}

@media (max-width: 680px) {
  .bl-modal-columns {
    flex-direction: column;
    overflow-y: auto;
  }
  .bl-modal-col-left { border-right: none; border-bottom: 1px solid rgba(255,212,59,.08); }
}


.bl-close {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(210,225,240,.4);
  width: 36px;
  height: 36px;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-close:hover { background: rgba(255,60,60,.1); border-color: rgba(255,60,60,.25); color: rgba(255,100,100,.9); }


.bl-section {
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 10px;
}
.bl-section:last-child { border-bottom: none; }

.bl-section-label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .5em; text-transform: uppercase; color: rgba(255,212,59,.65);
}
.bl-section-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.bl-section-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Count row */
.bl-count-row {
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.bl-count-btn {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  color: var(--text); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s; user-select: none;
}
.bl-count-btn:hover { color:var(--accent); border-color:rgba(255,212,59,.3); }
.bl-count-btn:active { transform:scale(.92); }
.bl-count-display {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 4vw, 40px);
  min-width: 44px; text-align: center; color: var(--text);
}

/* Mode toggle */
.bl-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bl-mode-toggle--3 { grid-template-columns: 1fr 1fr 1fr; }
.bl-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.3);
  font-family: 'Barlow Condensed', sans-serif; transition: all .15s;
}
.bl-mode-btn i     { font-size: 17px; margin-bottom: 2px; }
.bl-mode-btn span  { font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bl-mode-btn small { font-size: 10px; color: rgba(255,255,255,.18); letter-spacing: .04em; text-align: center; }
.bl-mode-btn:hover { border-color:rgba(255,212,59,.2); color:rgba(255,255,255,.6); background: rgba(255,212,59,.04); }
.bl-mode-btn.active {
  background: rgba(255,212,59,.08);
  border-color: rgba(255,212,59,.4);
  color: var(--accent);
  box-shadow: 0 0 16px rgba(255,212,59,.07);
}
.bl-mode-btn.active small { color:rgba(255,212,59,.35); }
.bl-mode-btn:disabled,
.bl-mode-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.2);
}

/* Import / Clear buttons */
.bl-import-btn, .bl-clear-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 12px; height: 30px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap;
}
.bl-import-btn {
  background: transparent; border: 1px solid rgba(255,212,59,.3); color: rgba(255,212,59,.75);
}
.bl-import-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(255,212,59,.06); }
.bl-clear-btn {
  background: transparent; border: 1px solid rgba(255,80,80,.3); color: rgba(255,100,100,.85);
}
.bl-clear-btn:hover { border-color:var(--red); color:var(--red); background:rgba(255,60,60,.06); }

/* Add block (2-row input area) */
.bl-add-block {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.bl-add-row--main { display: flex; gap: 6px; align-items: center; }
.bl-add-row--meta {
  display: grid;
  grid-template-columns: minmax(104px, 132px) 1fr;
  gap: 8px;
  align-items: stretch;
  padding: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,.008) 100%);
  border-radius: 10px;
}
.bl-name-input {
  flex: 1; min-width: 120px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px; color: var(--text);
  padding: 10px 14px; outline: none; min-height: 42px;
  transition: border-color .15s, box-shadow .15s;
}
.bl-name-input:focus { border-color: rgba(255,212,59,.45); box-shadow: 0 0 0 3px rgba(255,212,59,.06); }
.bl-name-input::placeholder { color: rgba(255,255,255,.18); }

/* Gender pick */
.bl-gender-pick {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09)
}
.bl-gender-pick {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 10px;
  width: 100%;
}
.bl-gpick-btn {
  width: 100%;
  background: rgba(255,255,255,.03); border: none;
  color: rgba(255,255,255,.3);
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  padding: 0 10px; height: 42px; cursor: pointer;
  transition: background .13s, color .13s;
}
.bl-gpick-btn:not(:last-child) { border-right: 1px solid rgba(255,255,255,.07); }
.bl-gpick-btn.active { background: rgba(255,212,59,.10); color: var(--accent); }
.bl-gpick-btn:hover:not(.active) { background:rgba(255,255,255,.07); color:rgba(255,255,255,.65); }

@media (max-width: 680px) {
  .bl-add-row--meta {
    grid-template-columns: 1fr;
  }
}

.bl-add-btn {
  width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); border: none; color: #000;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s, transform .1s;
}
.bl-add-btn:hover { filter: brightness(1.1); }
.bl-add-btn:active { transform: scale(.92); }

/* Participants list */
.bl-participants-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
.bl-participants-list::-webkit-scrollbar { width: 3px; }
.bl-participants-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }
.bl-participants-list:empty::after {
  content: 'Aucun participant ajouté';
  display: block; font-size: 12px; color: rgba(255,255,255,.15);
  letter-spacing: .06em; padding: 10px 2px;
}

/* Participant row */
.bl-prow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 7px 10px;
  border-radius: 8px;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.bl-prow:hover {
  border-color: rgba(255,212,59,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px rgba(255,212,59,.08);
}

.bl-prow-name {
  min-width: 0;
  font-size: var(--fs-control);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bl-prow-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  border: 1px solid;
}
.bl-prow-badge--m {
  background: rgba(96,165,250,.15);
  color: #60a5fa;
  border-color: rgba(96,165,250,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(96,165,250,.12);
}
.bl-prow-badge--f {
  background: rgba(244,114,182,.15);
  color: #f9a8d4;
  border-color: rgba(244,114,182,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(244,114,182,.12);
}

.bl-prow-level {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #eaf6ff;
  background: rgba(13,32,64,0.60);
  border: 1.5px solid #233a54;
  border-radius: 8px;
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(13,32,64,.08);
}

.bl-prow-del {
  background: none; border: none; color: rgba(210,225,240,.25);
  cursor: pointer; font-size: clamp(13px, 1.5vw, 15px); padding: 4px 5px; border-radius: 4px;
  transition: color .1s, background .1s; flex-shrink: 0;
}
.bl-prow-del:hover { color: var(--red); }

/* Summary */
.bl-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255,212,59,.03);
  border-top: 1px solid rgba(255,212,59,.07);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(210,225,240,.55);
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
}

.bl-summary i { color: rgba(255,212,59,.4); }
#blSummaryText { color: rgba(255,255,255,.38); }

/* Footer */
.bl-footer {
  display: flex; gap: 8px; padding: 12px 20px;
  justify-content: flex-end;
  border-top: 1px solid rgba(255,212,59,.10);
  background: rgba(255,212,59,.025);
  flex-shrink: 0;
}
.bl-btn-cancel {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: rgba(210,225,240,.6); transition: all .15s;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.bl-btn-cancel:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); border-color: rgba(255,255,255,.18); }


/* ════════ FOCUS OVERLAY ════════ */
.bl-focus-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(6,20,40,.92); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
}
.bl-focus-overlay.active { display: flex; animation: rFadeIn .2s ease; }
.bl-focus-card {
  width: min(520px, 90vw); max-height: 80dvh;
  display: flex; flex-direction: column;
  background: #08111f; border: 1px solid rgba(255,212,59,.18);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.9), 0 0 40px rgba(255,212,59,.06);
  animation: rPop .28s cubic-bezier(.34,1.4,.64,1);
}
.bl-focus-header {
  padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(135deg, rgba(255,212,59,.07) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.bl-focus-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .3em; color: var(--accent);
}
.bl-focus-close {
  background: none; border: none; color: rgba(255,255,255,.3); font-size: 14px; cursor: pointer;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  transition: color .15s; border-radius: 8px;
}
.bl-focus-close:hover { color:rgba(255,255,255,.8); background:rgba(255,255,255,.06); }
.bl-focus-body {
  padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
}
.bl-focus-member {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  letter-spacing: .04em; color: rgba(255,255,255,.9); line-height: 1.3;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.bl-focus-member:last-child { border-bottom: none; }
.bl-focus-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.bl-focus-badge--m { background:rgba(96,165,250,.12); color:#60a5fa; }
.bl-focus-badge--f { background:rgba(244,114,182,.12); color:#f472b6; }
.bl-focus-level { font-family:'Bebas Neue',sans-serif; font-size:16px; color:rgba(255,212,59,.55); flex-shrink:0; margin-left: auto; }

/* ════════ ANIMATIONS ════════ */
@keyframes fadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes cardIn  { from{opacity:0;transform:scale(.93) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes chipIn  { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes rFadeIn { from{opacity:0} to{opacity:1} }
@keyframes rPop    { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }

@media (prefers-reduced-motion:reduce) {
  *, .bl-team-card { animation:none !important; transition:none !important; }
}
@media (hover:none) and (pointer:coarse) {
  .bl-team-card:hover { transform:none; }
  .bl-team-card:active { opacity:.85; }
}

/* ════════ ROLES PARITY OVERRIDES ════════ */
body {
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 25%, rgba(6,20,40,.85) 100%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
  color: var(--text);
}

body::before,
body::after {
  content: none;
}

.bl-results-zone {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.bl-results-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, #0a1a31 0%, #061428 100%);
  z-index: 0;
  pointer-events: none;
}

.bl-empty-state,
.bl-grid {
  position: relative;
  z-index: 2;
}

.bl-pbar-label {
  font-size: var(--fs-label);
  letter-spacing: .4em;
  color: rgba(210,225,240,.45);
}

.bl-pbar-count {
  font-size: var(--fs-control);
  letter-spacing: .18em;
  color: #ffd43b;
}

.bl-pbar-toggle {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.bl-pbar-chips {
  grid-template-columns: repeat(8, 1fr);
  padding: 8px 12px 6px;
  max-height: none;
  background: #0a1628;
  transition: max-height .25s cubic-bezier(.22,1,.36,1), padding .25s;
}

.bl-btn-generate {
  font-size: var(--fs-control);
  letter-spacing: .2em;
  height: 36px;
}

.bl-modal {
  height: 80dvh;
  max-height: 82dvh;
  background: #08111f;
  border: 1px solid rgba(255,212,59,.14);
  border-radius: 16px;
}

.bl-modal-header {
  justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid rgba(255,212,59,.10);
  background: #0a1628;
  margin-bottom: 0;
}

.bl-modal-header-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-title);
  letter-spacing: .25em;
}

.bl-modal-header-title i {
  font-size: var(--fs-control);
}

.bl-section {
  padding: 16px 20px;
  gap: 10px;
}

.bl-section-label {
  font-size: var(--fs-label);
  letter-spacing: .5em;
  color: rgba(255,212,59,.65);
}

.bl-section-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bl-section-actions .bl-import-btn,
.bl-section-actions .bl-clear-btn {
  font-size: var(--fs-label);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

.bl-section-actions .bl-import-btn {
  background: transparent;
  border: 1px solid rgba(255,212,59,.3);
  color: rgba(255,212,59,.75);
}

.bl-section-actions .bl-import-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,212,59,.06);
}

.bl-section-actions .bl-clear-btn {
  background: transparent;
  border: 1px solid rgba(255,80,80,.3);
  color: rgba(255,100,100,.85);
}

.bl-section-actions .bl-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255,60,60,.06);
}

.bl-name-input {
  font-size: var(--fs-body);
}

.bl-gpick-btn,
.bl-level-pick {
  font-size: var(--fs-control);
}

.bl-add-btn {
  font-size: var(--fs-control);
}

.bl-prow-name {
  font-size: var(--fs-control);
}

.bl-summary {
  justify-content: center;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: .25em;
  color: rgba(210,225,240,.55);
}

#blSummaryText {
  color: #c8daea;
}

.bl-footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
}

.bl-btn-cancel {
  font-size: var(--fs-control);
  letter-spacing: .15em;
  padding: 0 20px;
  height: 36px;
  min-height: 36px;
  color: rgba(210,225,240,.6);
  display: inline-flex;
  align-items: center;
}

.bl-btn-apply {
  font-size: var(--fs-control);
  letter-spacing: .18em;
  padding: 0 24px;
  height: 36px;
  min-height: 36px;
  color: #0a1628;
  box-shadow: 0 3px 14px rgba(255,212,59,.2);
}

.bl-close {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(210,225,240,.4);
  width: 36px;
  height: 36px;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bl-modal-label-icon {
  opacity: .5;
  font-size: var(--fs-label);
}

.bl-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bl-modal-header-icon {
  font-size: var(--fs-label);
  opacity: .5;
  color: var(--accent);
}

.bl-modal-header-title-text {
  color: var(--text);
}

.bl-section--grow {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bl-section--participants .bl-participants-list {
  flex: 1;
  max-height: none;
}

.bl-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bl-section-header > .bl-section-label {
  margin-bottom: 2px;
}

.bl-section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bl-participants-list:empty::after {
  font-size: var(--fs-control-sm);
}

.bl-help-btn:hover {
  background: rgba(255,212,59,.1) !important;
  border-color: rgba(255,212,59,.3) !important;
  color: var(--accent) !important;
}

.bl-help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(2,2,8,.88);
  backdrop-filter: blur(16px);
  align-items: center;
  justify-content: center;
}

.bl-help-overlay.visible { display: flex; animation: rFadeIn .18s ease; }

.bl-help-card {
  width: min(520px, 92vw);
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: #0b1626;
  border: 1px solid rgba(150,180,210,.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.8);
  animation: rPop .24s cubic-bezier(.34,1.4,.64,1) both;
}

.bl-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0f1d31;
}

.bl-help-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-subtitle);
  letter-spacing: .22em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}

.bl-help-title i { color: rgba(255,212,59,.72); }

.bl-help-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.06) transparent;
}

.bl-help-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bl-help-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255,212,59,.72);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  margin-top: 1px;
}

.bl-help-step strong {
  display: block;
  font-size: var(--fs-control);
  font-weight: 700;
  letter-spacing: .04em;
  color: #eef4fa;
  margin-bottom: 4px;
}

.bl-help-step p {
  font-size: var(--fs-body);
  font-weight: 500;
  color: rgba(220,232,244,.78);
  line-height: 1.6;
  letter-spacing: .02em;
}

.bl-help-step em {
  color: var(--accent);
  font-style: normal;
}

.bl-help-step code {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .9em;
  color: #d8e3ee;
  font-family: monospace;
}

.bl-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(2,2,8,.82);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bl-confirm-overlay.visible { display: flex; animation: rFadeIn .18s ease; }

.bl-confirm-card {
  width: min(430px, 94vw);
  background: #08111f;
  border: 1px solid rgba(255,80,80,.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 70px rgba(0,0,0,.75);
  animation: rPop .2s cubic-bezier(.34,1.4,.64,1) both;
}

.bl-confirm-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,80,80,.08);
}

.bl-confirm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--fs-subtitle);
  letter-spacing: .2em;
  color: #ffb0b0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bl-confirm-body {
  padding: 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #d6e2ef;
}

.bl-confirm-actions {
  padding: 0 18px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bl-btn-danger {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-control);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,90,90,.6);
  background: rgba(255,60,60,.15);
  color: #ffbcbc;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.bl-btn-danger:hover {
  background: rgba(255,60,60,.24);
  border-color: rgba(255,110,110,.9);
  color: #ffe1e1;
}