/* =============================================
   217xNR — SPORT PICKER, ROLE SCREENS & BADMINTON
   Football = night pitch (black + neon green, Outfit)
   Badminton = indoor court (teal glass + mint/white, Space Grotesk)
   ============================================= */

:root {
  --bd-ink: #f2fbf8;
  --bd-mute: #a9c9bf;
  --bd-dim: #7fa79b;
  --bd-mint: #6ef2cf;
  --bd-deep: #073b31;
  --bd-glass: rgba(8, 52, 44, 0.62);
  --bd-card: rgba(255, 255, 255, 0.05);
  --bd-line: rgba(255, 255, 255, 0.08);
  --bd-font: 'Space Grotesk', system-ui, sans-serif;
}

/* ── SPORT PICKER (sits over the running slideshow) ── */
.onboarding-wrapper.picking .onboarding-card,
.onboarding-wrapper.picking .onboarding-topbar { display: none; }

.sp-screen {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(5, 7, 12, 0.72);
  overflow-y: auto; overscroll-behavior: none;
  font-family: 'Outfit', system-ui, sans-serif;
  color: #f0f4ff;
}
.sp-inner {
  height: 100%; min-height: 520px; max-width: 480px; margin: 0 auto;
  box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 22px;
}
.sp-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.sp-brand { font-weight: 800; font-size: 15px; letter-spacing: 3px; color: #c8d0e0; }
.sp-title { margin: 0; padding: 0 4px; font-weight: 300; font-size: 40px; line-height: 1.1; letter-spacing: -0.5px; }
.sp-title b { font-weight: 800; }
.sp-cards { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.sp-card {
  flex: 1; min-height: 130px; position: relative; overflow: hidden;
  border-radius: 28px; padding: 24px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: inherit; font: inherit;
  transition: transform var(--ease), border-color var(--ease);
}
.sp-card:active { transform: scale(0.98); }
.sp-card .sp-art { position: absolute; right: -60px; top: -40px; width: 220px; height: 220px; pointer-events: none; }
.sp-num { font-size: 13px; font-weight: 500; letter-spacing: 2px; }
.sp-row { display: flex; justify-content: space-between; align-items: center; position: relative; }
.sp-name { font-size: 34px; font-weight: 700; letter-spacing: -0.5px; }
.sp-go { width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-football { background: rgba(6, 24, 16, 0.72); border: 1px solid rgba(0, 230, 118, 0.35); }
.sp-football .sp-num { color: #00e676; }
.sp-football .sp-go { background: #00e676; color: #04210f; }
.sp-badminton { background: rgba(8, 52, 44, 0.72); border: 1px solid rgba(110, 242, 207, 0.35); font-family: var(--bd-font); }
.sp-badminton .sp-num { color: var(--bd-mint); font-weight: 600; }
.sp-badminton .sp-name { font-weight: 600; letter-spacing: -1px; }
.sp-badminton .sp-go { background: #fff; color: var(--bd-deep); }

/* ── ROLE SCREEN (one per sport, themed) ── */
.rs-screen { position: fixed; inset: 0; z-index: 170; overflow-y: auto; overscroll-behavior: none; }
.rs-bg { position: fixed; inset: 0; background-size: cover; background-position: center; }
.rs-inner {
  position: relative; min-height: 100%; max-width: 480px; margin: 0 auto;
  box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 26px;
}
.rs-top { display: flex; justify-content: space-between; align-items: center; }
.rs-back {
  width: 44px; height: 44px; border-radius: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: inherit;
}
.rs-sport { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; }
.rs-title { margin: 0; font-size: 36px; line-height: 1.12; letter-spacing: -0.5px; font-weight: 300; }
.rs-title b { font-weight: 800; }
.rs-list { display: flex; flex-direction: column; gap: 12px; }
.rs-card {
  box-sizing: border-box; width: 100%; padding: 18px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.10); background: transparent; color: inherit; font: inherit;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.rs-head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.rs-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rs-text { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.rs-name { font-weight: 700; font-size: 19px; }
.rs-desc { font-size: 14px; }
.rs-radio { width: 20px; height: 20px; border-radius: 10px; box-sizing: border-box; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, 0.28); }
.rs-pw { display: none; gap: 10px; margin-top: 18px; }
.rs-card.selected .rs-pw { display: flex; }
.rs-pw input {
  flex-grow: 1; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 16px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); color: inherit; font: inherit; font-size: 16px; outline: none;
}
.rs-go { width: 50px; height: 50px; border-radius: 14px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rs-err { display: none; margin-top: 10px; font-size: 13px; font-weight: 600; color: #ff8a8a; }
.rs-spacer { flex-grow: 1; }
.rs-cta { display: none; height: 56px; border-radius: 28px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 17px; }
.rs-screen.viewer-picked .rs-cta { display: block; }

/* football theme */
.rs-screen[data-sport="football"] { color: #eefaf3; font-family: 'Outfit', system-ui, sans-serif; }
.rs-screen[data-sport="football"] .rs-bg {
  background-color: #05070c;
  background-image: linear-gradient(180deg, rgba(4,8,20,0.82) 0%, rgba(4,8,20,0.55) 40%, rgba(4,10,12,0.78) 75%, rgba(4,8,12,0.94) 100%), url('assets/phone-football-wallpaper-hd.jpg');
}
.rs-screen[data-sport="football"] .rs-card { background: rgba(4, 8, 18, 0.58); border-color: rgba(255, 255, 255, 0.12); }
.rs-screen[data-sport="football"] .rs-sport { color: #00e676; }
.rs-screen[data-sport="football"] .rs-icon { background: rgba(0, 230, 118, 0.12); color: #00e676; }
.rs-screen[data-sport="football"] .rs-desc { color: #b3c4bc; }
.rs-screen[data-sport="football"] .rs-card.selected { background: rgba(6, 30, 20, 0.8); border-color: rgba(0, 230, 118, 0.6); }
.rs-screen[data-sport="football"] .rs-card.selected .rs-radio { border: 6px solid #00e676; }
.rs-screen[data-sport="football"] .rs-pw input { background: rgba(2, 6, 4, 0.75); }
.rs-screen[data-sport="football"] .rs-go,
.rs-screen[data-sport="football"] .rs-cta { background: #00e676; color: #04210f; }

/* badminton theme */
.rs-screen[data-sport="badminton"] { color: var(--bd-ink); font-family: var(--bd-font); }
.rs-screen[data-sport="badminton"] .rs-bg {
  background-image: linear-gradient(180deg, rgba(3,18,14,0.88) 0%, rgba(3,18,14,0.55) 45%, rgba(3,18,14,0.9) 100%), url('assets/main-badmintonpage.jpeg');
}
.rs-screen[data-sport="badminton"] .rs-title { font-weight: 400; letter-spacing: -1px; }
.rs-screen[data-sport="badminton"] .rs-title b { font-weight: 700; }
.rs-screen[data-sport="badminton"] .rs-sport { color: var(--bd-mint); }
.rs-screen[data-sport="badminton"] .rs-card { background: rgba(3, 18, 14, 0.6); border-color: rgba(255, 255, 255, 0.12); }
.rs-screen[data-sport="badminton"] .rs-name { font-weight: 600; }
.rs-screen[data-sport="badminton"] .rs-icon { background: rgba(110, 242, 207, 0.14); color: var(--bd-mint); }
.rs-screen[data-sport="badminton"] .rs-desc { color: var(--bd-mute); }
.rs-screen[data-sport="badminton"] .rs-card.selected { background: rgba(8, 52, 44, 0.78); border-color: rgba(110, 242, 207, 0.6); }
.rs-screen[data-sport="badminton"] .rs-card.selected .rs-radio { border: 6px solid var(--bd-mint); }
.rs-screen[data-sport="badminton"] .rs-pw input { background: rgba(2, 12, 9, 0.7); }
.rs-screen[data-sport="badminton"] .rs-go,
.rs-screen[data-sport="badminton"] .rs-cta { background: #fff; color: var(--bd-deep); }

/* ── BADMINTON APP ── */
.bd-app { position: fixed; inset: 0; z-index: 155; overflow-y: auto; overscroll-behavior: none; color: var(--bd-ink); font-family: var(--bd-font); background: #04140f; }
.bd-bg {
  position: fixed; inset: 0; background-size: cover; background-position: center;
  background-image: linear-gradient(180deg, rgba(3,18,14,0.55) 0%, rgba(3,18,14,0.4) 28%, rgba(3,18,14,0.9) 55%, rgba(3,18,14,0.97) 100%), url('assets/main-badmintonpage.jpeg');
}
.bd-inner { position: relative; max-width: 480px; margin: 0 auto; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.bd-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bd-title { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-iconbtn {
  width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--bd-ink);
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16);
}
.bd-pill { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.bd-pill-live { background: #fff; color: var(--bd-deep); }
.bd-pill-live i { width: 7px; height: 7px; border-radius: 4px; background: #0fa37f; animation: bdPulse 1.4s infinite; }
.bd-pill-role { background: rgba(255, 255, 255, 0.08); color: var(--bd-mute); border: 1px solid var(--bd-line); }
@keyframes bdPulse { 50% { opacity: 0.3; } }

.bd-glass { border-radius: 26px; background: var(--bd-glass); border: 1px solid rgba(110, 242, 207, 0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 20px; }
.bd-card { border-radius: 18px; background: var(--bd-card); border: 1px solid var(--bd-line); }
.bd-label { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: var(--bd-mint); text-transform: uppercase; }
.bd-mute { color: var(--bd-mute); }
.bd-section-title { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bd-mute); margin: 8px 4px 0; }

/* live card */
.bd-live { display: flex; flex-direction: column; gap: 16px; }
.bd-live-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.bd-score-grid { display: grid; align-items: center; row-gap: 10px; column-gap: 6px; }
.bd-score-grid .h { font-size: 12px; color: var(--bd-mute); text-align: center; }
.bd-score-grid .h.now { color: var(--bd-mint); font-weight: 600; }
.bd-pname { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 20px; }
.bd-pname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-serve { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; }
.bd-serve.on { background: var(--bd-mint); }
.bd-g { text-align: center; font-size: 17px; font-weight: 600; }
.bd-g.lost { color: var(--bd-mute); font-weight: 500; }
.bd-now { text-align: center; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -2px; }
.bd-now.lead { color: var(--bd-mint); }
.bd-live-foot { font-size: 13px; color: var(--bd-mute); }
.bd-empty-live { display: flex; flex-direction: column; gap: 6px; }
.bd-empty-live b { font-size: 22px; font-weight: 700; }

/* tabs */
.bd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(3, 18, 14, 0.7); border: 1px solid var(--bd-line); }
.bd-tab { height: 44px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--bd-mute); }
.bd-tab.active { background: #fff; color: var(--bd-deep); }

/* rows */
.bd-list { display: flex; flex-direction: column; gap: 8px; }
.bd-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%; box-sizing: border-box; color: inherit; font: inherit; text-align: left; }
button.bd-row { cursor: pointer; }
button.bd-row:active { transform: scale(0.99); }
.bd-row-main { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.bd-row-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row-title em { font-style: normal; font-weight: 400; color: var(--bd-dim); }
.bd-row-sub { font-size: 13px; color: var(--bd-mute); }
.bd-result { font-weight: 700; font-size: 15px; white-space: nowrap; }
.bd-chip { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; background: rgba(255, 255, 255, 0.08); color: var(--bd-mute); }
.bd-chip.next { background: var(--bd-mint); color: var(--bd-deep); }
.bd-chip.live { background: #fff; color: var(--bd-deep); }
.bd-winner { color: var(--bd-mint); }

/* table */
.bd-table { overflow: hidden; }
.bd-tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px 30px 30px 46px; gap: 8px; padding: 14px 16px; font-size: 15px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bd-tr:last-child { border-bottom: 0; }
.bd-tr.head { font-size: 12px; font-weight: 600; color: var(--bd-mute); padding: 12px 16px; }
.bd-tr .c { text-align: center; }
.bd-tr .r { text-align: right; }
.bd-tr .pts { font-weight: 700; color: var(--bd-mint); }
.bd-tr .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* buttons */
.bd-btn { height: 52px; border-radius: 26px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.bd-btn-white { background: #fff; color: var(--bd-deep); }
.bd-btn-mint { background: var(--bd-mint); color: var(--bd-deep); }
.bd-btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--bd-ink); border: 1px solid var(--bd-line); }
.bd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bd-link { background: none; border: 0; color: var(--bd-mute); font: inherit; font-size: 14px; cursor: pointer; padding: 12px; align-self: center; }
.bd-link.danger { color: #ff9b9b; }
.bd-empty { text-align: center; padding: 36px 20px; color: var(--bd-mute); font-size: 15px; line-height: 1.6; }

/* bottom sheet */
.bd-sheet-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(1, 8, 6, 0.7); display: flex; align-items: flex-end; justify-content: center; }
.bd-sheet {
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; overscroll-behavior: none; box-sizing: border-box;
  background: #062a23; border: 1px solid rgba(110, 242, 207, 0.25); border-bottom: 0;
  border-radius: 28px 28px 0 0; padding: 12px 20px 28px; color: var(--bd-ink); font-family: var(--bd-font);
  display: flex; flex-direction: column; gap: 18px;
}
.bd-sheet > * { flex-shrink: 0; }
.bd-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); align-self: center; }
.bd-sheet h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.bd-field { display: flex; flex-direction: column; gap: 8px; }
.bd-field > label { font-size: 13px; font-weight: 600; color: var(--bd-mute); }
.bd-input {
  height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(2, 12, 9, 0.7); color: var(--bd-ink);
  font: inherit; font-size: 16px; outline: none; color-scheme: dark;
}
.bd-input:focus { border-color: var(--bd-mint); }
.bd-inline { display: flex; gap: 10px; }
.bd-inline .bd-input { flex: 1; min-width: 0; }
.bd-square { width: 50px; height: 50px; border-radius: 14px; border: 0; background: #fff; color: var(--bd-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(110, 242, 207, 0.14); color: var(--bd-ink); font-size: 14px; font-weight: 600; border: 0; font-family: inherit; }
.bd-pchip button { width: 26px; height: 26px; border-radius: 13px; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--bd-ink); cursor: pointer; font-size: 14px; line-height: 1; }
.bd-pchip.add { background: rgba(255, 255, 255, 0.06); color: var(--bd-mute); padding: 8px 14px; cursor: pointer; border: 1px dashed rgba(255, 255, 255, 0.2); }
.bd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(2, 12, 9, 0.7); border: 1px solid var(--bd-line); }
.bd-seg button { height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--bd-mute); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.bd-seg button.on { background: #fff; color: var(--bd-deep); }
.bd-hint { font-size: 13px; color: var(--bd-mute); }

/* scoring pad */
.bd-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-padbtn {
  min-height: 170px; border-radius: 22px; border: 1px solid rgba(110, 242, 207, 0.3); cursor: pointer;
  background: rgba(8, 52, 44, 0.8); color: var(--bd-ink); font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; position: relative;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.bd-padbtn:active { transform: scale(0.97); background: rgba(16, 80, 66, 0.9); }
.bd-padbtn:disabled { opacity: 0.5; cursor: default; }
.bd-padbtn .nm { font-size: 15px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-padbtn .pt { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -3px; }
.bd-padbtn .plus { font-size: 13px; color: var(--bd-mint); font-weight: 600; }
.bd-padbtn .srv { position: absolute; top: 14px; right: 14px; }
.bd-games { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bd-games span { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--bd-mute); }
.bd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── No bounce on the new full-screen panels. The football screens scroll the page
   itself and keep the browser's normal scrolling (a page-wide rule made it stick on iPhones). ── */
.onboarding-wrapper { overscroll-behavior: none; }

/* ── New-session player picker ── */
.bd-field-head { display: flex; justify-content: space-between; align-items: center; }
.bd-field-head label { font-size: 13px; font-weight: 600; color: var(--bd-mute); }
.bd-count { min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 13px; background: rgba(110, 242, 207, 0.14); color: var(--bd-mint); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bd-addbar { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 18px; box-sizing: border-box; border-radius: 28px; background: rgba(2, 12, 9, 0.7); border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.2s; }
.bd-addbar:focus-within { border-color: var(--bd-mint); }
.bd-addbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--bd-ink); font: inherit; font-size: 16px; }
.bd-addbar input::placeholder { color: var(--bd-dim); }
.bd-addbar button { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--bd-mint); color: var(--bd-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-roster-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--bd-line); min-width: 0; }
.bd-avatar { width: 32px; height: 32px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
.bd-avatar.sm { width: 24px; height: 24px; border-radius: 12px; font-size: 10px; }
.bd-av0 { background: #6ef2cf; color: #073b31; }
.bd-av1 { background: #9cc8ff; color: #0b2a4f; }
.bd-av2 { background: #f5d77a; color: #4a3600; }
.bd-av3 { background: #f2a7c6; color: #4d1530; }
.bd-av4 { background: #c3b5ff; color: #2a1c5c; }
.bd-roster-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-roster-x { width: 28px; height: 28px; border-radius: 14px; border: 0; background: none; color: var(--bd-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-roster-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--bd-ink); }
.bd-roster-empty { padding: 18px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.14); text-align: center; color: var(--bd-dim); font-size: 14px; }
.bd-quick { display: flex; flex-direction: column; gap: 8px; }
.bd-quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-quick-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--bd-mute); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.bd-quick-chip:hover { border-color: var(--bd-mint); color: var(--bd-ink); }