/* ════════════════════════════════════════════════════════════════
   VolleyCode Pro — visual redesign
   Logic untouched. All JS-referenced IDs / classes preserved.
   ════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ---- new design tokens ---- */
  --bg:#eceef3;
  --surface:#ffffff;
  --surface-2:#f5f6f9;
  --line:#e4e7ee;
  --line-strong:#d2d7e1;
  --ink:#14171f;
  --ink-2:#3d434f;
  --muted:#787f8c;
  --muted-2:#9aa0ad;

  --accent:#3a55e6;          /* home / primary */
  --accent-strong:#2b40c4;
  --accent-soft:#eef0fe;
  --accent-ink:#ffffff;

  --away:#e07a36;            /* away */
  --away-strong:#c5631f;
  --away-soft:#fdf1e8;

  --good:#15924a; --good-soft:#e6f6ec;
  --bad:#d3413a;  --bad-soft:#fdeceb;
  --warn:#c2811c; --warn-soft:#fcf3e1;

  --navy:#1a2340;
  --court:#0d3b66;
  --court-play:#1763a6;

  --radius:16px; --radius-sm:11px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(20,23,31,.06);
  --shadow:0 1px 2px rgba(20,23,31,.05), 0 12px 28px -18px rgba(20,23,31,.28);
  --shadow-lg:0 1px 3px rgba(20,23,31,.08), 0 26px 50px -24px rgba(20,23,31,.40);

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---- legacy aliases (JS emits inline var(--x); keep them resolving) ---- */
  --blue:var(--accent); --blue-light:#5970ef; --blue-bg:var(--accent-soft);
  --orange:var(--away); --orange-light:#ee9a5e;
  --green:var(--good); --green-light:#28a85d; --green-bg:var(--good-soft);
  --red:var(--bad); --red-bg:var(--bad-soft);
  --gray:var(--muted); --gray-light:var(--muted-2);
  --gray-bg:var(--surface-2); --gray-border:var(--line);
  --white:#fff; --text:var(--ink); --text-light:var(--muted);
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
.mono{font-family:var(--mono)}

/* ═══════════════════════ HEADER ═══════════════════════ */
.header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:0 22px;
  height:60px;
  display:flex;
  align-items:center;
  gap:13px;
  position:sticky;top:0;z-index:50;
}
.logo-box{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;letter-spacing:-.04em;
  box-shadow:0 6px 14px -6px var(--accent);
}
.logo-text{font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.logo-text small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:-2px}
.header-meta{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--muted);
}
.header-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink-2);
}
.header-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}

/* ═══════════════════════ PAGE SWITCHER ═══════════════════════ */
.page{display:none}
.page.active{display:block}

/* ════════════════════════════════════════════════════════════════
   SETUP VIEW
   ════════════════════════════════════════════════════════════════ */
.setup-view{min-height:100vh;background:var(--bg);padding:28px max(28px,4vw)}
.setup-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:22px;
}
.setup-title{font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.025em}
.setup-subtitle{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:60ch;line-height:1.55}
.setup-actions{display:flex;gap:10px;flex-wrap:wrap}
.setup-btn{
  padding:11px 18px;border-radius:11px;border:1px solid var(--line-strong);
  background:var(--surface);cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);
  transition:all .15s;box-shadow:var(--shadow-sm);
}
.setup-btn:hover{border-color:var(--muted-2);background:var(--surface-2)}
.setup-btn.primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 8px 18px -8px var(--accent);
}
.setup-btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.setup-btn.orange{background:var(--away);color:#fff;border-color:var(--away)}

/* stepper */
.setup-progress{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.setup-progress-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;font-weight:800;letter-spacing:.01em;
}
.setup-progress-pill::before{
  content:'';width:18px;height:18px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-strong);
  display:inline-block;flex:none;
}
.setup-progress-pill.active{background:var(--accent-soft);border-color:#c5cdfb;color:var(--accent-strong)}
.setup-progress-pill.active::before{background:var(--accent);border-color:var(--accent)}

.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.setup-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow);
}
.setup-card.full{grid-column:1/-1}
.setup-card-title{
  font-weight:800;font-size:16px;color:var(--ink);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;letter-spacing:-.01em;
}
.setup-card-title .tmark{width:10px;height:10px;border-radius:50%;flex:none}
.setup-card-title .tmark.home{background:var(--accent)}
.setup-card-title .tmark.away{background:var(--away)}
.setup-card-title .tmark.neutral{background:var(--navy)}

.setup-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.setup-form-grid.two{grid-template-columns:repeat(2,1fr)}
.setup-field{display:flex;flex-direction:column;gap:7px}
.setup-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.setup-input,.setup-select,.setup-textarea{
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:14px;background:var(--surface);color:var(--ink);
  outline:none;transition:border .15s,box-shadow .15s;
}
.setup-input:focus,.setup-select:focus,.setup-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.setup-input::placeholder,.setup-textarea::placeholder{color:var(--muted-2)}
.setup-textarea{min-height:108px;resize:vertical;line-height:1.6;font-family:var(--mono);font-size:13px}

.setup-help{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.55}
.setup-help strong{color:var(--ink-2);font-weight:800}
.tm-num-error{font-size:12px;color:var(--bad);margin-top:6px;line-height:1.4}

/* add player row */
.add-player-row{display:grid;grid-template-columns:84px 1fr 108px auto;gap:9px;margin-top:11px;align-items:center}
.add-player-row .setup-input,.add-player-row .setup-select{padding:9px 11px}
.add-num-error{font-size:12px;color:var(--bad);margin-top:5px;line-height:1.4}
.setup-input.input-error{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(211,65,58,.15)!important}
.setup-small-btn{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-xs);
  padding:9px 13px;font-size:12.5px;font-weight:800;cursor:pointer;color:var(--accent);
  white-space:nowrap;transition:all .15s;
}
.setup-small-btn:hover{background:var(--accent-soft);border-color:#c5cdfb}

.international-rules-note,.setup-system-note,.setup-libero-note,.setup-system-box,.setup-libero-box{ }
.international-rules-note{
  background:var(--accent-soft);border:1px solid #ccd3fb;color:var(--accent-strong);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:12px;font-weight:700;margin-top:14px;line-height:1.5;
}

/* team system box */
.setup-system-box{margin-top:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px}
.setup-system-title{font-size:10.5px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.setup-system-options{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.setup-system-option{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);
  cursor:pointer;padding:8px 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
  transition:all .15s;
}
.setup-system-option:hover{border-color:var(--muted-2)}
.setup-system-option input{accent-color:var(--accent);width:15px;height:15px}
.setup-system-note{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.45}

/* rotation selector */
.setup-rotation-wrap{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.setup-rotation-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
  font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;
}
.setup-court{
  display:grid;grid-template-columns:repeat(3,1fr);gap:13px;
  background:var(--court);
  border-radius:16px;padding:16px;margin-top:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 14px rgba(0,0,0,.18);
}
.setup-slot{
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.6);
  border-radius:12px;padding:11px;min-height:100px;
  box-shadow:0 2px 8px -4px rgba(0,0,0,.35);
}
.setup-slot.front{background:#fff}
.setup-slot.back{background:#f3f6fb}
.setup-slot-label{font-size:9.5px;font-weight:900;color:var(--accent);letter-spacing:.07em;margin-bottom:7px;text-align:center;text-transform:uppercase}
.setup-slot select{
  width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:8px 9px;
  font-weight:800;font-size:12.5px;background:#fff;outline:none;color:var(--ink);
  text-align:center;text-align-last:center;
}
.setup-slot select:focus{border-color:var(--accent)}
.setup-player-preview{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.4;min-height:30px;text-align:center}
.setup-player-preview strong{color:var(--ink)}
.role-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-strong);font-size:9.5px;font-weight:900;
  margin-left:5px;text-transform:uppercase;letter-spacing:.04em;
}

.libero-warning{
  display:none;margin-top:12px;background:var(--warn-soft);border:1px solid #f1d699;
  color:var(--warn);border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;font-weight:700;
}
.libero-warning.show{display:block}

.setup-libero-box{margin-top:14px;background:var(--accent-soft);border:1px solid #d6dcfa;border-radius:14px;padding:16px}
.setup-libero-title{font-size:10.5px;font-weight:900;color:var(--accent-strong);text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.setup-libero-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.setup-libero-field label{display:block;font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.setup-libero-field select{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:10px 12px;font-weight:700;background:#fff;outline:none;font-size:13px;color:var(--ink)}
.setup-libero-field select:focus{border-color:var(--accent)}
.setup-libero-note{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}

.setup-step{display:none}
.setup-step.active{display:block}

/* legacy rotation-grid (kept) */
.rotation-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.rotation-cell{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px}
.rotation-cell label{font-size:10px;font-weight:800;color:var(--muted);display:block;margin-bottom:5px;text-align:center}
.rotation-cell input,.rotation-cell select{width:100%;text-align:center;border:1px solid var(--line-strong);border-radius:7px;padding:7px 4px;font-weight:800;font-family:var(--mono);background:#fff}

/* ════════════════════════════════════════════════════════════════
   MATCH VIEW
   ════════════════════════════════════════════════════════════════ */
.match-view{min-height:100vh;background:var(--bg)}

/* scorebar */
.scorebar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:16px 26px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-sm);position:relative;
}
.scorebar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent) 50%,var(--away) 50%,var(--away))}
.team-side{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.team-side:last-child{justify-content:flex-end}
.team-name{font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serving-badge{
  padding:5px 11px;border-radius:999px;background:var(--away-soft);
  border:1px solid #f0c69e;color:var(--away-strong);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.serving-dot{width:7px;height:7px;border-radius:50%;background:var(--away);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.set-score{
  font-weight:800;font-size:11px;background:var(--navy);color:#fff;
  padding:6px 11px;border-radius:8px;min-width:96px;text-align:center;white-space:nowrap;letter-spacing:.02em;
}
.score-main{display:flex;align-items:center;gap:22px;flex:none;padding:0 8px}
.score-num{
  font-family:var(--mono);font-weight:700;font-size:56px;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums;transition:transform .2s,color .2s;min-width:64px;text-align:center;
}
.score-num.bump{transform:scale(1.18);color:var(--good)}
.score-dash{font-weight:300;font-size:34px;color:var(--muted-2)}
.set-label{
  background:var(--surface);border-bottom:1px solid var(--line);text-align:center;
  padding:8px;font-weight:800;font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
}

.main-grid{display:grid;grid-template-columns:272px 1fr 208px;height:calc(100vh - 112px);min-height:480px}

/* LEFT — play by play */
.sidebar-left{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.sidebar-title{
  padding:13px 16px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;
}
.sidebar-title::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--accent)}
.pbp-list{flex:1;overflow-y:auto;padding:6px 0}
.pbp-item{
  padding:11px 16px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:44px 56px 1fr;gap:9px;align-items:center;font-size:12px;transition:background .12s;
}
.pbp-item:hover{background:var(--surface-2)}
.pbp-score{font-family:var(--mono);font-weight:700;color:var(--ink-2);font-size:12px}
.pbp-code{
  font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;text-align:center;
}
.pbp-code.pos{background:var(--good-soft);color:var(--good)}
.pbp-code.neg{background:var(--bad-soft);color:var(--bad)}
.pbp-code.neu{background:var(--warn-soft);color:var(--warn)}
.pbp-text{color:var(--muted);line-height:1.4}

/* CENTER — court + command */
.center-panel{background:var(--bg);overflow-y:auto;padding:24px}

.court{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:880px;min-height:420px;margin:0 auto 18px;padding:42px 54px;
  background:var(--court);border-radius:18px;overflow:hidden;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.10), var(--shadow-lg);
}
/* net line down the centre */
.court::before{
  content:'';position:absolute;left:50%;top:30px;bottom:30px;width:5px;
  background:repeating-linear-gradient(0deg,#fff 0 8px,rgba(255,255,255,.55) 8px 12px);
  transform:translateX(-50%);z-index:6;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
/* net top tape */
.court::after{
  content:'';position:absolute;left:50%;top:26px;width:13px;height:9px;
  background:#fff;transform:translateX(-50%);z-index:7;border-radius:2px;
}
.court-half{
  position:relative;z-index:2;padding:24px 26px;min-height:300px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);
  gap:16px;align-items:center;justify-items:center;
  background:var(--court-play);border:5px solid rgba(255,255,255,.92);
}
.court-half.home{border-right-width:0}
.court-half.away{border-left-width:0}
/* attack (3 m) lines */
.court-half.home::after{content:'';position:absolute;top:0;bottom:0;right:33%;width:3px;background:rgba(255,255,255,.78);z-index:1}
.court-half.away::after{content:'';position:absolute;top:0;bottom:0;left:33%;width:3px;background:rgba(255,255,255,.78);z-index:1}

.court-half.home .player-spot:nth-child(1){grid-column:2;grid-row:1}.court-half.home .player-spot:nth-child(2){grid-column:2;grid-row:2}.court-half.home .player-spot:nth-child(3){grid-column:2;grid-row:3}.court-half.home .player-spot:nth-child(4){grid-column:1;grid-row:1}.court-half.home .player-spot:nth-child(5){grid-column:1;grid-row:2}.court-half.home .player-spot:nth-child(6){grid-column:1;grid-row:3}
.court-half.away .player-spot:nth-child(1){grid-column:1;grid-row:1}.court-half.away .player-spot:nth-child(2){grid-column:1;grid-row:2}.court-half.away .player-spot:nth-child(3){grid-column:1;grid-row:3}.court-half.away .player-spot:nth-child(4){grid-column:2;grid-row:1}.court-half.away .player-spot:nth-child(5){grid-column:2;grid-row:2}.court-half.away .player-spot:nth-child(6){grid-column:2;grid-row:3}

.player-spot{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:transform .14s;z-index:5}
.player-spot:hover{transform:translateY(-3px) scale(1.06)}
.player-pos{
  font-size:9.5px;font-weight:800;color:var(--ink-2);letter-spacing:.04em;
  background:rgba(255,255,255,.92);padding:2px 8px;border-radius:999px;
}
.player-num{
  font-weight:800;font-size:17px;width:60px;height:60px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:3px solid;background:#fff;line-height:1;
  box-shadow:0 5px 12px -3px rgba(0,0,0,.4);
}
.court-number{font-family:var(--mono);font-size:18px;font-weight:700;line-height:1}
.court-role{font-size:8.5px;font-weight:900;line-height:1;color:#5a626f;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.court-half.home .player-num{border-color:var(--accent);color:var(--accent)}
.court-half.away .player-num{border-color:var(--away);color:var(--away-strong)}

/* command bar */
.code-area{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm);max-width:880px;margin-left:auto;margin-right:auto;
}
.code-hint{font-size:12px;color:var(--muted);margin-bottom:11px;text-align:center;line-height:1.6}
.code-hint strong{color:var(--ink);font-weight:700;font-family:var(--mono);background:var(--surface-2);padding:1px 6px;border-radius:5px}
.input-row{display:flex;gap:9px;max-width:580px;margin:0 auto}
.code-field{
  flex:1;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 16px;font-family:var(--mono);font-size:16px;font-weight:600;outline:none;transition:all .15s;color:var(--ink);
}
.code-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.code-field::placeholder{color:var(--muted-2);font-family:var(--font);font-size:13px;font-weight:500}
.icon-btn{
  width:48px;height:48px;border-radius:var(--radius-sm);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .15s;flex:none;
}
.icon-btn svg{width:20px;height:20px}
.mic-btn{background:var(--surface-2);color:var(--ink-2);border:1.5px solid var(--line-strong)}
.mic-btn:hover{background:var(--line)}
.mic-btn.recording{background:var(--bad-soft);color:var(--bad);border-color:var(--bad);animation:pulse-rec 1.1s infinite}
@keyframes pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(211,65,58,.32)}50%{box-shadow:0 0 0 7px rgba(211,65,58,.06)}}
.submit-btn{background:var(--accent);color:#fff;box-shadow:0 8px 16px -8px var(--accent)}
.submit-btn:hover{background:var(--accent-strong)}

/* voice / transcript */
.voice-area{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);max-width:880px;margin:0 auto}
.voice-status{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rec-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--muted-2)}
.rec-dot.active{background:var(--bad);animation:pulse 1s infinite}
.rec-timer{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
.detected-bar{
  display:flex;align-items:center;gap:9px;background:var(--good-soft);border:1px solid #a9e0bd;
  border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:10px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--good);transition:background .12s;
}
.detected-bar:hover{background:#d8f1e0}
.confirm-box{background:var(--good-soft);border:1px solid #a9e0bd;border-radius:var(--radius-sm);padding:13px;margin-bottom:10px}
.confirm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:var(--radius-xs);overflow:hidden;margin-bottom:9px}
.cg-cell{background:var(--surface);padding:9px 11px}
.cg-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;margin-bottom:5px}
.cg-val{font-weight:700;font-size:14px;color:var(--ink)}
.code-display{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent)}
.eval-badge{display:inline-flex;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800}
.eval-pos{background:var(--good-soft);color:var(--good)}
.eval-neg{background:var(--bad-soft);color:var(--bad)}
.eval-neu{background:var(--warn-soft);color:var(--warn)}
.confirm-btns{display:flex;gap:9px}
.btn-save{padding:10px 18px;border-radius:var(--radius-xs);border:none;cursor:pointer;font-size:13px;font-weight:800;background:var(--good);color:#fff;transition:opacity .15s}
.btn-save:hover{opacity:.9}
.btn-discard{padding:10px 16px;border-radius:var(--radius-xs);border:1px solid var(--line-strong);cursor:pointer;font-size:13px;font-weight:700;background:var(--surface);color:var(--ink-2);transition:all .15s}
.btn-discard:hover{background:var(--surface-2)}
.transcript{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:11px 14px;min-height:38px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.transcript.empty{color:var(--muted-2);font-style:italic}

/* RIGHT — actions */
.sidebar-right{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto}
.sb-section{padding:15px 16px;border-bottom:1px solid var(--line)}
.sb-title{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:11px}
.sb-section-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.sb-btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px}
.sb-pair-btn{margin-bottom:0!important;justify-content:center;gap:5px!important;padding:10px 6px!important;font-size:12px!important}
.action-btn{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  background:var(--surface);cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:9px;margin-bottom:8px;transition:all .13s;text-align:left;
}
.action-btn:last-child{margin-bottom:0}
.action-btn:hover{background:var(--surface-2);border-color:var(--muted-2);transform:translateY(-1px)}
.action-btn svg{width:16px;height:16px;flex:none;opacity:.85}
.action-btn.success{border-color:#a9e0bd;color:var(--good);background:var(--good-soft)}
.action-btn.success:hover{background:#d8f1e0}
.action-btn.info{border-color:#c5cdfb;color:var(--accent-strong);background:var(--accent-soft)}
.action-btn.info:hover{background:#e3e8fd}
.action-btn.warn{background:var(--warn-soft);border-color:#f1d699;color:var(--warn)}
.action-btn.warn:hover{background:#f9ecd2}
.action-btn.danger{border-color:#edc4c1;color:var(--bad);background:var(--bad-soft)}
.action-btn.danger:hover{background:#f9d8d7}
.action-btn.mic-side.recording{background:var(--bad-soft);border-color:#eda9a4;color:var(--bad)}
.voice-hint{font-size:11px;color:var(--muted);line-height:1.55;margin-top:6px}

.rotation-status{background:var(--accent-soft);border:1px solid #ccd3fb;border-radius:var(--radius-sm);padding:11px 13px;margin-top:9px;font-size:12px;line-height:1.5}
.rotation-status-row{padding:7px 0;border-bottom:1px solid #d4dafb}
.rotation-status-row:last-child{border-bottom:none}
.rotation-status strong{color:var(--accent-strong);font-weight:800}
.rotation-status .ok{color:var(--good);font-weight:800}
.rotation-status .warn{color:var(--warn);font-weight:800}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(60px);
  background:var(--navy);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:13px;font-weight:700;z-index:999;opacity:0;transition:all .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-lg);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ════════════════════════════════════════════════════════════════
   ANALYTICS VIEW
   ════════════════════════════════════════════════════════════════ */
.analytics-view{min-height:100vh;background:var(--bg);padding:28px max(28px,4vw)}
.analytics-header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;
}
.analytics-title-area{display:flex;align-items:center;gap:14px}
.analytics-icon{
  width:46px;height:46px;border-radius:13px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;
}
.analytics-title{font-weight:800;font-size:28px;color:var(--ink);letter-spacing:-.025em}
.analytics-subtitle{font-size:13.5px;color:var(--muted);margin-top:3px;font-weight:600}

/* Season Dashboard header */
.season-dash-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid #d0d6fb;border-radius:12px;padding:12px 18px;margin-bottom:16px}
.season-match-count{font-size:15px;font-weight:800;color:var(--accent-strong)}
.season-period-label{font-size:12px;font-weight:700;color:var(--muted);padding:3px 10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px}
.analytics-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-back{padding:11px 17px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;transition:all .15s;box-shadow:var(--shadow-sm)}
.btn-back:hover{background:var(--surface-2)}
.btn-export{padding:11px 19px;border-radius:11px;border:none;cursor:pointer;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;transition:all .15s}
.btn-export.csv{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)}
.btn-export.csv:hover{background:var(--surface-2)}
.btn-export.pdf{background:var(--accent);color:#fff;box-shadow:0 8px 18px -8px var(--accent)}
.btn-export.pdf:hover{background:var(--accent-strong)}

.filters-bar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 18px;margin-bottom:18px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow);flex-wrap:nowrap;
}
.filter-group{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.filter-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;flex:none}
.filter-select{padding:8px 10px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;width:100%;min-width:0;outline:none;transition:border .15s}
.filter-select:hover{border-color:var(--muted-2)}
.filter-select:focus{border-color:var(--accent)}

.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-strong)}
.stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;margin-bottom:10px}
.stat-value{font-family:var(--mono);font-weight:700;font-size:42px;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-value.blue{color:var(--accent)}
.stat-value.orange{color:var(--away-strong)}
.stat-value.green{color:var(--good)}
.stat-value.red{color:var(--bad)}
.stat-detail{font-size:12.5px;color:var(--muted);margin-top:5px}

.player-stats-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.section-title{font-weight:800;font-size:18px;color:var(--ink);margin-bottom:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.section-title::before{content:'';width:7px;height:18px;border-radius:3px;background:var(--accent)}
.stats-table{width:100%;border-collapse:collapse;font-size:13px}
.stats-table thead{background:var(--surface-2)}
.stats-table th{text-align:left;padding:11px 13px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;border-bottom:1px solid var(--line-strong)}
.stats-table th.center{text-align:center}
.stats-table td{padding:13px;border-bottom:1px solid var(--line);color:var(--ink)}
.stats-table td.center{text-align:center}
.stats-table tbody tr{transition:background .12s}
.stats-table tbody tr:hover{background:var(--surface-2)}
.stats-table tbody tr:last-child{font-weight:800;background:var(--surface-2)}
.stats-table tbody tr:last-child td{border-bottom:none}
.stats-team-hdr td{padding:10px 13px 5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface)!important;border-top:1.5px solid var(--line);border-bottom:none;font-style:normal}
.stats-table tbody tr.stats-team-hdr:first-child td{border-top:none}
.stats-table tbody tr.stats-team-hdr:hover{background:var(--surface)!important}
.skill-group{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;text-align:center;font-size:12px}
.skill-group .head{font-size:9.5px;color:var(--muted);font-weight:700}
.skill-val{font-weight:700;font-family:var(--mono)}
.skill-val.green{color:var(--good)}
.skill-val.red{color:var(--bad)}
.skill-val.gray{color:var(--muted)}
.eff-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;min-width:52px;font-family:var(--mono)}
.eff-high{background:var(--good-soft);color:var(--good)}
.eff-mid{background:var(--warn-soft);color:var(--warn)}
.eff-low{background:var(--bad-soft);color:var(--bad)}
.pts-num{font-weight:800;font-size:15px;font-family:var(--mono)}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .main-grid{grid-template-columns:240px 1fr 190px}
}
@media(max-width:980px){
  .setup-grid{grid-template-columns:1fr}
  .setup-form-grid,.setup-form-grid.two{grid-template-columns:1fr}
  .setup-libero-grid{grid-template-columns:1fr}
  .add-player-row{grid-template-columns:1fr}
  .rotation-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .filters-bar{flex-wrap:wrap}
  .filter-group{flex:1 1 calc(50% - 12px);min-width:140px}
}
@media(max-width:900px){
  .main-grid{display:block;height:auto;min-height:0}
  .sidebar-left,.sidebar-right{display:none}
  .center-panel{min-height:60vh}
}

@media (max-width:700px){
  html,body{width:100%;overflow-x:hidden}
  .header{padding:0 14px;height:54px}
  .logo-box{width:34px;height:34px;font-size:12px}
  .logo-text{font-size:17px}
  .header-meta{display:none}
  .scorebar{padding:11px 12px;gap:8px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .team-side{gap:8px;flex:0 0 auto}
  .team-side:last-child{justify-content:flex-start}
  .team-name{font-size:16px}
  .serving-badge{padding:3px 8px;font-size:10px}
  .set-score{min-width:auto;padding:5px 8px;font-size:10px}
  .score-main{gap:10px;flex:0 0 auto;padding:0}
  .score-num{font-size:42px;min-width:48px}
  .score-dash{font-size:26px}
  .main-grid{display:block;height:auto;min-height:0}
  .center-panel{padding:12px;overflow-x:hidden}
  .court{width:100%;max-width:100%;min-height:260px;padding:18px 12px;margin:0 auto 12px}
  .court::before{top:18px;bottom:18px;width:4px}
  .court::after{top:14px;width:11px;height:7px}
  .court-half{padding:12px 8px;min-height:230px;gap:10px;border-width:4px}
  .player-spot{gap:3px}
  .player-pos{font-size:9px;padding:1px 6px}
  .player-num{width:46px;height:46px;border-width:2.5px}
  .court-number{font-size:15px}
  .court-role{font-size:8px;margin-top:1px}
  .code-area,.voice-area{padding:13px}
  .input-row{max-width:100%;gap:7px}
  .code-field{min-width:0;font-size:14px;padding:12px}
  .icon-btn{width:46px;height:46px}
  .confirm-grid{grid-template-columns:1fr 1fr}
  .analytics-view,.setup-view{padding:14px}
  .analytics-header,.setup-header{flex-direction:column;align-items:flex-start;gap:14px}
  .analytics-title,.setup-title{font-size:23px}
  .analytics-actions,.setup-actions{width:100%;flex-wrap:wrap}
  .setup-btn,.btn-back,.btn-export{flex:1 1 auto;justify-content:center}
  .setup-court{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:14px 14px}
  .stat-value{font-size:30px}
  .player-stats-section{overflow-x:auto;padding:16px}
  #playerStatsTable,#rotationStatsTable{display:none}
  #playerStatsMobTabs,#rotationStatsMobTabs{display:block}
}

/* ════════════════════════════════════════════════════════════════
   PRINT / PDF REPORT  (unchanged — used by exportPDF)
   ════════════════════════════════════════════════════════════════ */
@page{size:A4;margin:8mm}
@media print{
  body{font-family:Arial,Helvetica,sans-serif;color:#111;background:white;font-size:9px}
  .report{max-width:1120px;margin:0 auto}
  .title{font-size:16px;font-weight:700;border-bottom:1px solid #333;padding-bottom:4px;margin-bottom:5px}
  .top{display:grid;grid-template-columns:1.2fr 1fr 1.1fr;gap:8px;align-items:start}
  .scorebox{font-size:16px;font-weight:700}.scorebox table{width:100%;font-size:16px}
  .meta{display:grid;grid-template-columns:70px 1fr 80px 1fr;gap:2px 8px}.meta b{font-weight:700}
  .report-table{border-collapse:collapse;width:100%;margin:4px 0}
  .report-table th,.report-table td{border:1px solid #555;padding:2px 4px;text-align:center;vertical-align:middle}
  .report-table th{background:#e5e5e5;font-weight:700}
  .team-title,.mini-title{font-weight:700;font-size:12px;border-bottom:1px solid #333;margin-top:6px;padding:2px 0}
  .team-table td:nth-child(2),.team-table th:nth-child(2){text-align:left}
  .setbox{display:inline-block;width:10px;height:10px;border:1px solid #555;margin:0 1px;font-size:7px;line-height:9px;text-align:center}
  .totals{font-weight:700;background:#eee}
  .bottom-grid{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:8px;margin-top:8px}
  .legend{border:1px solid #333;padding:6px;font-size:9px;margin-top:6px}
  .footer{font-size:8px;margin-top:6px;display:flex;justify-content:space-between}
  .actions{display:none}
}
.actions{position:fixed;top:8px;right:8px}
.actions button{padding:8px 12px;font-weight:700}

/* ════════════════════════════════════════════════════════════════
   APP SHELL + SIDEBAR NAV
   ════════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh;background:var(--bg)}
.app-nav{
  width:236px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;gap:6px;
  position:sticky;top:0;height:100vh;z-index:40;overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1);
}
/* collapse toggle */
.nav-toggle{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:700;
  cursor:pointer;text-align:left;transition:background .13s,color .13s;margin-bottom:6px;
}
.nav-toggle:hover{background:var(--surface-2);color:var(--ink)}
.nav-toggle svg{width:18px;height:18px;flex:none;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-toggle span,.logo-text,.nav-item span{white-space:nowrap;overflow:hidden}
.nav-toggle span,.nav-item span{transition:opacity .18s,max-width .28s cubic-bezier(.4,0,.2,1),margin .2s;max-width:160px}
.logo-text{transition:opacity .18s,max-width .28s cubic-bezier(.4,0,.2,1)}
.nav-foot{transition:opacity .18s,max-height .28s,padding .2s}

/* collapsed state — icons only */
.app.nav-collapsed .app-nav{width:72px !important;min-width:0 !important;padding:18px 12px !important}
.app.nav-collapsed .nav-brand{justify-content:center;gap:0;padding:6px 0 16px}
.app.nav-collapsed .logo-text{max-width:0 !important;opacity:0;margin:0}
.app.nav-collapsed .nav-item{justify-content:center;gap:0;padding:11px}
.app.nav-collapsed .nav-item span{max-width:0 !important;opacity:0;margin:0}
.app.nav-collapsed .nav-toggle{justify-content:center;gap:0;padding:9px}
.app.nav-collapsed .nav-toggle span{max-width:0 !important;opacity:0;margin:0}
.app.nav-collapsed .nav-toggle svg{transform:rotate(180deg)}
.app.nav-collapsed .nav-foot{opacity:0;max-height:0;padding:0;pointer-events:none}
.nav-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.nav-items{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:11px;
  border:none;background:transparent;color:var(--ink-2);font-size:14px;font-weight:700;
  cursor:pointer;text-align:left;transition:all .13s;
}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.65;stroke:currentColor}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong)}
.nav-item.active svg{opacity:1;color:var(--accent)}
.nav-foot{margin-top:auto;padding:8px 6px 4px}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
body.coding .app-nav{display:none}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.dash-view{padding:36px max(28px,4vw);max-width:1080px;width:100%}
.dash-head{margin-bottom:26px}
.dash-title{font-size:29px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.dash-sub{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.55}
.dash-newmatch{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;text-align:left;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;border:none;
  border-radius:20px;padding:30px 34px;cursor:pointer;margin-bottom:36px;
  box-shadow:0 20px 44px -22px var(--accent);transition:transform .16s,box-shadow .16s;
}
.dash-newmatch:hover{transform:translateY(-3px);box-shadow:0 28px 56px -22px var(--accent)}
.dash-newmatch-row{display:flex;align-items:center;gap:16px;font-size:27px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.dash-plus{
  width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;font-size:30px;font-weight:400;line-height:1;
}
.dash-newmatch-sub{font-size:13.5px;font-weight:600;opacity:.88;padding-left:62px}
.dash-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dash-link{background:none;border:none;color:var(--accent);font-weight:800;font-size:13px;cursor:pointer;padding:4px}
.dash-link:hover{color:var(--accent-strong)}
.recent-list{display:flex;flex-direction:column;gap:11px}
.recent-item{
  display:grid;grid-template-columns:1fr auto auto 22px;align-items:center;gap:18px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:17px 22px;cursor:pointer;
  transition:all .14s;box-shadow:var(--shadow-sm);
}
.recent-item:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateX(3px)}
.recent-teams{font-size:15.5px;font-weight:700;color:var(--ink)}
.recent-teams strong{font-weight:800}
.recent-meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.recent-score{font-family:var(--mono);font-weight:700;font-size:18px;padding:4px 12px;border-radius:9px;white-space:nowrap}
.recent-score.win{background:var(--good-soft);color:var(--good)}
.recent-score.loss{background:var(--bad-soft);color:var(--bad)}
.recent-go{color:var(--muted-2);font-weight:800;text-align:right}
.empty-note{color:var(--muted);font-style:italic;padding:22px;background:var(--surface);border:1px dashed var(--line-strong);border-radius:14px;text-align:center}

/* ════════════════════════════════════════════════════════════════
   MATCHES (history)
   ════════════════════════════════════════════════════════════════ */
.matches-view{padding:36px max(28px,4vw);max-width:1080px;width:100%}
.matches-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:26px}
.matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
/* ── Status badges (Draft / Live / Completed) ────────────────────── */
.status-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.status-badge.draft{background:var(--surface-2);color:var(--muted);border:1px solid var(--line-strong)}
.status-badge.live{background:var(--good-soft);color:var(--good);border:1px solid #a8dcbc;animation:badge-pulse 2s infinite}
.status-badge.completed{background:var(--accent-soft);color:var(--accent-strong);border:1px solid #c5cdfb}
.status-badge.demo{background:#e8f0fe;color:#1a56db;border:1px solid #a4c2f9}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ── Resume banner ───────────────────────────────────────────────── */
.resume-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--good-soft);border:1px solid #a8dcbc;border-radius:14px;padding:16px 20px;margin-bottom:20px}
.resume-banner-body{display:flex;align-items:center;gap:12px}
.resume-banner-icon{font-size:22px;flex:none}
.resume-banner-title{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:3px}
.resume-banner-sub{font-size:12px;color:var(--muted);font-weight:600}
.resume-banner-actions{display:flex;gap:9px;flex-wrap:wrap}
.resume-btn{padding:9px 16px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .13s;white-space:nowrap}
.resume-btn:hover{background:var(--surface-2)}
.resume-btn.primary{background:var(--good);color:#fff;border-color:var(--good)}
.resume-btn.primary:hover{background:#128040}

/* ── Match card score row (score + badge side by side) ───────────── */
.match-card-score-row{display:flex;align-items:center;gap:10px;margin-top:13px}
.match-card-score-val{font-family:var(--mono);font-size:25px;font-weight:700}

.match-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;cursor:pointer;
  transition:all .15s;box-shadow:var(--shadow-sm);
}
.match-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.match-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.match-card-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:14px}
.match-card-comp{text-transform:uppercase;letter-spacing:.06em}
.match-card-teams{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.match-card-teams .vs{font-size:12px;font-weight:700;color:var(--muted-2)}
.match-card-score{margin-top:13px}
.match-card-score span{font-family:var(--mono);font-size:25px;font-weight:700;padding:4px 14px;border-radius:10px}
.match-card-score .win{background:var(--good-soft);color:var(--good)}
.match-card-score .loss{background:var(--bad-soft);color:var(--bad)}
.match-card-actions{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.match-card.selected .match-card-actions{display:grid}
.mc-btn{padding:10px 12px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .13s}
.mc-btn:hover{background:var(--surface-2);border-color:var(--muted-2)}
.mc-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.mc-btn.primary:hover{background:var(--accent-strong)}
.mc-btn.danger{color:var(--bad);border-color:#edc4c1}
.mc-btn.danger:hover{background:var(--bad-soft)}

/* ════════════════════════════════════════════════════════════════
   NAV — TABLET / MOBILE
   ════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .app-nav{width:200px}
}
@media(max-width:700px){
  .app{flex-direction:column}
  .nav-toggle{display:none}
  .app.nav-collapsed .app-nav{width:auto !important;padding:8px 10px !important}
  .app.nav-collapsed .nav-item{padding:9px 12px;gap:12px}
  .app.nav-collapsed .nav-item span{max-width:none !important;opacity:1 !important;margin:0}
  .app-nav{
    width:auto;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;
    padding:8px 10px;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);
  }
  .nav-brand{display:none}
  .nav-items{flex-direction:row;gap:4px}
  .nav-item{padding:9px 12px;white-space:nowrap;font-size:13px}
  .nav-item svg{display:none}
  .nav-foot{display:none}
  body.coding .app-nav{display:flex}
  .dash-view,.matches-view{padding:18px 14px}
  .dash-newmatch{padding:24px}
  .dash-newmatch-sub{padding-left:0}
  .recent-item{grid-template-columns:1fr auto;gap:6px 12px}
  .recent-meta{grid-column:1;grid-row:2}
  .recent-go{display:none}
  .match-card-actions{grid-template-columns:1fr 1fr}
}/* ══════════════════════════════════════════════════════════════════
   ONBOARDING / WELCOME MODAL  (ob-*)
   Append to css/style.css
   ══════════════════════════════════════════════════════════════════ */

/* ── Overlay backdrop ─────────────────────────────────────────── */
.ob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 30, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── Modal card ───────────────────────────────────────────────── */
.ob-modal {
  background: var(--surface, #131d2b);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px 28px;
  box-shadow: 0 32px 64px -16px rgba(0,0,0,.6);
  position: relative;
}

/* ── Screens (step switcher) ──────────────────────────────────── */
.ob-screen {
  display: none;
}
.ob-screen.active {
  display: block;
}

/* ── Header area ─────────────────────────────────────────────── */
.ob-header {
  text-align: center;
  margin-bottom: 24px;
}
.ob-logo {
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
}
.ob-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #e8edf3);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.ob-subtitle {
  font-size: 14px;
  color: var(--muted, #787f8c);
  margin: 0;
  line-height: 1.5;
}

/* ── Animation wrapper ───────────────────────────────────────── */
.ob-anim-wrap {
  background: var(--bg, #0d1623);
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: 12px;
  padding: 16px 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.ob-anim {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* ── Action buttons row ──────────────────────────────────────── */
.ob-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.ob-btn-primary {
  padding: 13px 20px;
  background: var(--accent, #3a55e6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
  font-family: inherit;
}
.ob-btn-primary:hover  { background: #2f47cc; }
.ob-btn-primary:active { transform: scale(.98); }

.ob-btn-secondary {
  padding: 11px 20px;
  background: var(--surface-2, #1a2535);
  color: var(--text, #e8edf3);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.ob-btn-secondary:hover { background: var(--surface-3, #1e2c3e); }

.ob-btn-success {
  padding: 13px 20px;
  background: var(--good, #15924a);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.ob-btn-success:hover { background: #117a3d; }

.ob-btn-ghost {
  padding: 10px 16px;
  background: transparent;
  color: var(--muted, #787f8c);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s;
  text-align: center;
}
.ob-btn-ghost:hover { color: var(--text, #e8edf3); }

/* ── Voice test screen ───────────────────────────────────────── */
.ob-vt-phrase {
  background: var(--bg, #0d1623);
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.ob-vt-phrase-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #787f8c);
  margin-bottom: 8px;
}
.ob-vt-phrase-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent, #3a55e6);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  line-height: 1.4;
}

.ob-vt-status-row {
  margin-bottom: 16px;
}
.ob-vt-status {
  font-size: 13px;
  color: var(--muted, #787f8c);
  padding: 10px 14px;
  background: var(--surface-2, #1a2535);
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.06));
  transition: background .2s, color .2s;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.ob-vt-status.listening {
  color: var(--accent, #3a55e6);
  background: rgba(58,85,230,.08);
  border-color: rgba(58,85,230,.2);
}
.ob-vt-status.success {
  color: var(--good, #15924a);
  background: rgba(21,146,74,.08);
  border-color: rgba(21,146,74,.2);
}
.ob-vt-status.error, .ob-vt-status.warn {
  color: var(--bad, #d63545);
  background: rgba(214,53,69,.06);
  border-color: rgba(214,53,69,.15);
}
.ob-vt-status.warn {
  color: var(--warn, #d97706);
  background: rgba(217,119,6,.06);
}

.ob-vt-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.ob-vt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted, #787f8c);
}
.ob-vt-check.pass { color: var(--good, #15924a); }
.ob-vt-check.fail { color: var(--bad, #d63545); }
.ob-vt-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.ob-vt-check.pass .ob-vt-check-icon {
  background: rgba(21,146,74,.15);
  color: var(--good, #15924a);
}
.ob-vt-check.fail .ob-vt-check-icon {
  background: rgba(214,53,69,.12);
  color: var(--bad, #d63545);
}

/* ── Dashboard onboarding reminder strip ──────────────────────── */
.ob-dash-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--accent-soft, #eef0fe);
  border: 1px solid rgba(58,85,230,.18);
  border-radius: 14px;
  flex-wrap: wrap;
}
.ob-dash-reminder-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ob-dash-reminder-emoji { font-size: 22px; flex-shrink: 0; }
.ob-dash-reminder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--ink-2, #3a4760);
  min-width: 0;
}
.ob-dash-reminder-text strong { color: var(--ink, #1a2c3e); font-size: 13.5px; }
.ob-dash-reminder-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ob-dash-reminder-cta {
  height: 34px; padding: 0 14px; border-radius: 8px;
  background: var(--accent, #3a55e6); color: #fff; border: none;
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.ob-dash-reminder-cta:hover { background: #2f47cc; }
.ob-dash-reminder-close {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: transparent; color: var(--muted, #787f8c); font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ob-dash-reminder-close:hover { background: rgba(0,0,0,.06); }

/* ════════════════════════════════════════════════════════════════
   MOBILE — BOTTOM TAB BAR  (Phase 1)
   Desktop is completely unaffected: .bottom-tab-bar{display:none}
   only becomes visible inside the ≤700px media query below.
   ════════════════════════════════════════════════════════════════ */

.bottom-tab-bar { display: none; }

@media (max-width: 700px) {

  /* ── Kill the existing horizontal-scrolling top-nav bar ────── */
  .app-nav              { display: none !important; }
  body.coding .app-nav  { display: none !important; }

  /* ── Breathing room so content isn't hidden under the tab bar  */
  .app-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 16px));
  }

  /* ── Hide tab bar during live coding (full-screen experience) ─ */
  body.coding .bottom-tab-bar { display: none !important; }

  /* ── Tab bar shell ─────────────────────────────────────────── */
  .bottom-tab-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px -6px rgba(20,23,31,.10);
  }

  /* ── Individual tab button ─────────────────────────────────── */
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px 8px;
    border: none;
    background: none;
    color: var(--muted-2);
    font-size: 9.5px;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: .01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
  }

  .tab-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    flex-shrink: 0;
  }

  .tab-item.active { color: var(--accent); }

  /* Placeholder tabs — greyed out, non-interactive until feature ships */
  .tab-placeholder {
    opacity: .38;
    pointer-events: none;
  }

  /* ── FAB (centre, elevated) ────────────────────────────────── */
  .tab-fab-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
  }

  .tab-fab {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -18px;
    box-shadow: 0 8px 18px -6px var(--accent);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, box-shadow .12s;
  }

  .tab-fab:active {
    transform: scale(0.93);
    box-shadow: 0 4px 10px -4px var(--accent);
  }

  .tab-fab svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
  }

}

/* ════════════════════════════════════════════════════════════════
   MOBILE — AUTHENTICATION  (Phase 2)
   auth.css owns all auth styles; nothing to add here.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   MOBILE — DASHBOARD  (Phase 3)
   Desktop dashboard is untouched; all rules below are either
   hidden by default or wrapped in the ≤700px media query.
   ════════════════════════════════════════════════════════════════ */

/* Hidden on desktop, shown on mobile */
.dash-mobile-header  { display: none; }
.dash-nm-mobile-cta  { display: none; }
.dash-kpi-row        { display: none; }

@media (max-width: 700px) {

  /* ── Header: greeting + hamburger + avatar ──────────────────── */
  .dash-head { display: none; }

  .dash-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    background: var(--bg);
  }

  .dash-greeting-time {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 2px;
  }

  .dash-greeting-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .dash-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .dash-header-notif {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .dash-header-notif svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink-2);
  }

  .dash-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
  }

  /* ── Dashboard layout ───────────────────────────────────────── */
  .dash-view { padding: 0 0 24px; max-width: 100%; }

  /* ── New Match card: + icon stacked above text ───────────────── */
  .dash-newmatch {
    margin: 6px 16px 22px;
    padding: 22px 22px 20px;
    border-radius: 20px;
    gap: 0;
    cursor: pointer;
  }

  .dash-newmatch-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 26px;
    font-weight: 800;
    white-space: normal;
    margin-bottom: 8px;
  }

  .dash-plus {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
  }

  .dash-newmatch-sub {
    padding-left: 0;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 18px;
    display: block;
    opacity: .88;
    line-height: 1.45;
  }

  /* Set Up Match white button */
  .dash-nm-mobile-cta {
    display: flex;
    gap: 10px;
    margin-top: 0;
  }

  .dash-nm-mobile-cta button {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    background: #fff;
    color: var(--accent-strong);
    border: none;
    font-family: var(--font);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: .01em;
  }

  /* ── Section header ─────────────────────────────────────────── */
  .dash-section { padding: 0 16px; }
  .dash-section-head { margin-bottom: 12px; }
  .section-title { font-weight: 800; font-size: 16px; color: var(--ink); }

  /* ── "View all" — 44px tap target ───────────────────────────── */
  .dash-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 700;
  }

  /* ── Recent items: chip | name+meta | score+WIN/LOSS ─────────── */
  .recent-item {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 14px;
    transform: none !important;
  }

  /* Team chip — col 1, spans both rows */
  .recent-item::before {
    content: attr(data-short);
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10px;
    font-family: var(--mono);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .recent-item[data-winner="away"]::before {
    background: var(--away-soft);
    color: var(--away-strong);
  }

  .recent-item:not([data-winner="home"]):not([data-winner="away"])::before {
    background: var(--surface-2);
    color: var(--muted);
  }

  /* Team name — col 2, row 1 */
  .recent-teams {
    grid-column: 2;
    grid-row: 1;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: end;
  }

  /* Competition · Date — col 2, row 2 */
  .recent-meta {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: start;
  }

  .recent-meta .status-badge { display: none; }

  /* Score — col 3, row 1, plain bold */
  .recent-score {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 15px;
    color: var(--ink) !important;
    background: none !important;
    padding: 0 !important;
    text-align: right;
    white-space: nowrap;
    align-self: end;
  }

  /* WIN / LOSS — col 3, row 2 */
  .recent-go {
    grid-column: 3;
    grid-row: 2;
    font-size: 0;
    text-align: right;
    align-self: start;
  }

  .recent-item[data-winner="home"] .recent-go::after {
    content: 'WIN';
    font-size: 11px;
    font-weight: 800;
    color: var(--good);
    letter-spacing: .04em;
    font-family: var(--font);
  }

  .recent-item[data-winner="away"] .recent-go::after {
    content: 'LOSS';
    font-size: 11px;
    font-weight: 800;
    color: var(--bad);
    letter-spacing: .04em;
    font-family: var(--font);
  }

  /* ── Resume banner ──────────────────────────────────────────── */
  .resume-banner {
    margin: 0 16px 16px;
    border-radius: 14px;
  }

  /* ── Onboarding reminder ────────────────────────────────────── */
  .ob-dash-reminder {
    margin: 0 16px 16px;
    border-radius: 14px;
  }

  /* ── Roster row (in team modal) ─────────────────────────────── */
  .roster-row { grid-template-columns: 42px 1fr auto auto; gap: 5px; padding: 7px 10px; }

  /* ── Team modal: slide up from bottom on mobile ─────────────── */
  .team-modal-overlay { align-items: flex-end; padding: 0; }
  .team-modal-card { border-radius: 18px 18px 0 0; max-height: 92vh; }

}

/* ══════════════════════════════════════════════════════════════
   Phase 4 — Landing Page Mobile (≤700px)
   All rules use !important to override inline styles.
   Desktop layout is completely unaffected.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Prevent horizontal overflow on the landing page */
  #landingPage > div {
    overflow-x: hidden !important;
  }

  /* ── Sticky nav ──────────────────────────────────────────── */
  .lp-nav-inner {
    padding: 0 18px !important;
    height: 56px !important;
    gap: 8px !important;
  }

  /* Hide desktop nav links (Features / Analytics / Voice Coding) */
  .lp-nav-links { display: none !important; }

  /* ── Hero ────────────────────────────────────────────────── */
  .lp-hero {
    grid-template-columns: 1fr !important;
    padding: 32px 20px 28px !important;
    gap: 0 !important;
  }

  /* Hide the complex product mock (overflows on small screens) */
  .lp-hero-mock { display: none !important; }

  /* Hero heading */
  .lp-hero-text h1 {
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin-top: 14px !important;
  }

  /* Hero body copy */
  .lp-hero-text > p {
    font-size: 14.5px !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  /* CTA buttons: stack vertically */
  .lp-hero-text > div:nth-child(4) {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }
  .lp-hero-text > div:nth-child(4) a {
    justify-content: center !important;
    text-align: center !important;
    padding: 13px 20px !important;
  }

  /* Stats trio (Voice / P1–P6 / Auto): reduce gap, allow wrap on narrow screens */
  .lp-hero-text > div:last-child {
    gap: 14px !important;
    margin-top: 22px !important;
    flex-wrap: wrap !important;
  }

  /* ── How it works ────────────────────────────────────────── */
  .lp-how { padding: 8px 20px !important; }

  .lp-how-card { padding: 20px 18px !important; }

  .lp-how-header { justify-content: flex-start !important; }

  /* Hide the tagline "— one rally, four taps of nothing" */
  .lp-how-sub { display: none !important; }

  /* Stack steps vertically */
  .lp-how-steps {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  /* Step items: left-align */
  .lp-how-steps > div:nth-child(odd) {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 10px 6px !important;
  }

  /* Arrow divs between steps: hide */
  .lp-how-steps > div:nth-child(even) { display: none !important; }

  /* ── Pain point comparison ───────────────────────────────── */
  .lp-pain { padding: 32px 20px 12px !important; }
  .lp-pain-grid { grid-template-columns: 1fr !important; }

  /* Pain section heading */
  .lp-pain h2 { font-size: 26px !important; }

  /* ── Features ────────────────────────────────────────────── */
  #features { padding: 32px 20px 16px !important; }

  /* Header row: stack label + subtitle */
  #features > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  #features > div:first-child h2 { font-size: 26px !important; }

  #features > div:first-child > p {
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }

  /* 3-col grid → 1 col */
  #features > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Real product screens ────────────────────────────────── */
  .lp-screens { padding: 32px 20px 8px !important; }

  .lp-screens > div:first-child { margin-bottom: 16px !important; }

  .lp-screens h2 { font-size: 26px !important; }

  /* Each screen row: 1 column, text always first */
  .lp-screens > div {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
    align-items: start !important;
  }

  /* Section labels (chips) */
  .lp-screens h3 { font-size: 19px !important; margin-top: 10px !important; }

  /* B row has order:1 text and order:2 image — reset so text comes first */
  .lp-screens > div > div[style*="order:1"] { order: 1 !important; }
  .lp-screens > div > div[style*="order:2"] { order: 2 !important; }

  /* ── Analytics showcase ──────────────────────────────────── */
  #analytics { padding: 28px 20px !important; }

  #analytics > div > div:first-child {
    padding: 20px 18px 16px !important;
  }

  #analytics > div > div:first-child h2 { font-size: 22px !important; }

  /* KPI grid: 2 columns */
  #analytics > div > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 16px 18px !important;
  }

  #analytics > div > div:last-child > div {
    padding: 14px 12px !important;
  }

  /* Large KPI numbers: shrink from 42px */
  #analytics > div > div:last-child > div > div:nth-child(3) {
    font-size: 26px !important;
    margin-top: 6px !important;
  }
  #analytics > div > div:last-child > div > div:nth-child(3) span {
    font-size: 16px !important;
  }

  /* ── Voice coding workflow ───────────────────────────────── */
  #voice {
    grid-template-columns: 1fr !important;
    padding: 20px 20px 40px !important;
    gap: 24px !important;
  }

  #voice h2 {
    font-size: 24px !important;
    margin-top: 6px !important;
  }

  #voice > div:first-child > p {
    font-size: 14.5px !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }

  /* Terminal code block: allow horizontal scroll if lines are long */
  #voice > div:last-child { overflow-x: auto !important; }

  /* ── Built by volleyball people ──────────────────────────── */
  .lp-about { padding: 8px 20px !important; }

  .lp-about > div {
    grid-template-columns: 1fr !important;
    padding: 28px 22px !important;
    gap: 18px !important;
    text-align: center !important;
  }

  .lp-about > div > div:first-child { align-items: center !important; }

  .lp-about h2 {
    font-size: 21px !important;
    margin-top: 6px !important;
  }

  .lp-about p {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  /* ── CTA band ────────────────────────────────────────────── */
  .lp-cta { padding: 0 20px 44px !important; }

  .lp-cta > div {
    padding: 32px 22px !important;
    border-radius: 18px !important;
  }

  .lp-cta h2 {
    font-size: 24px !important;
    letter-spacing: -.02em !important;
  }

  .lp-cta p {
    font-size: 14px !important;
    margin-top: 10px !important;
    max-width: 100% !important;
  }

  /* CTA buttons: stack vertically */
  .lp-cta > div > div > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .lp-cta > div > div > div:last-child a {
    text-align: center !important;
    justify-content: center !important;
    padding: 13px 20px !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .lp-footer > div {
    padding: 22px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .lp-footer > div > div:last-child {
    margin-left: 0 !important;
    gap: 16px !important;
  }

}

/* ══════════════════════════════════════════════════════════════
   TEAM MODAL — Create / Edit team
   ══════════════════════════════════════════════════════════════ */

.team-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.team-modal-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.team-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.team-modal-title {
  font-size: 16px; font-weight: 700; color: var(--ink); margin: 0;
}
.team-modal-close {
  width: 30px; height: 30px; border-radius: 6px;
  border: none; background: transparent; color: var(--muted);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.team-modal-close:hover { background: var(--line); color: var(--ink); }
.team-modal-body {
  flex: 1; overflow-y: auto; padding: 18px 20px;
}
.team-modal-section-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 10px;
}
.team-modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.team-modal-footer-left { margin-right: auto; }

/* ── Roster list (inside form or modal) ─────────────────────── */
.team-roster-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
  min-height: 36px;
}
.teams-roster-empty {
  padding: 12px 4px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.roster-row {
  display: grid;
  grid-template-columns: 46px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.roster-row-editing {
  border-color: var(--accent);
  background: var(--accent-soft, #eef0fe);
}
.roster-num  { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.roster-name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-pos  { color: var(--muted); font-size: 12px; white-space: nowrap; }
.roster-actions { display: flex; gap: 4px; }

/* ── Danger variant for delete buttons ─────────────────────── */
.setup-small-btn.danger {
  background: rgba(214,53,69,.1);
  color: var(--bad, #d63545);
  border-color: rgba(214,53,69,.22);
}
.setup-small-btn.danger:hover { background: rgba(214,53,69,.18); }

/* ── Setup page: Team picker ─────────────────────────────────── */
.setup-team-picker { margin-bottom: 18px; }
.setup-team-picker-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.setup-team-picker-row .setup-select { flex: 1; }
.setup-team-create-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 14px; height: 34px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.setup-team-create-btn:hover { background: var(--accent-soft, #eef0fe); }

/* ══════════════════════════════════════════════════════════════
   Phase 5 — Match Setup + Live Coding Mobile (≤700px)
   ══════════════════════════════════════════════════════════════ */

/* ── Hide all mobile-only elements on desktop ── */
.mob-setup-header,.mob-setup-progress,.mob-setup-footer,
.mob-peek-bar,.mob-quick-btns,.mob-back-btn { display: none; }
.mob-confirm-chips { display: none; }

/* Chevron hidden on desktop (team cards not collapsible there) */
.setup-team-chevron { display: none; }

/* ── Match dock: transparent wrapper on desktop ── */
.mob-dock { display: contents; }

@media (max-width: 700px) {
  /* ─────────────────────────────────────────────────────────────
     SETUP PAGE
     ───────────────────────────────────────────────────────────── */

  /* Full-screen flex column layout */
  .setup-view {
    padding: 0 !important;
    min-height: 100dvh !important;
    background: var(--bg) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide desktop header + progress pills */
  .setup-header, .setup-progress { display: none !important; }

  /* Mobile header bar */
  .mob-setup-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 52px 20px 10px;
    background: var(--bg);
    flex: none;
  }
  .mob-setup-back {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none; color: var(--ink);
  }
  .mob-setup-title-text {
    font-size: 18px; font-weight: 800;
    color: var(--ink); letter-spacing: -.02em;
  }

  /* Two-segment progress bar */
  .mob-setup-progress {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    padding: 0 20px 14px;
    background: var(--bg);
    flex: none;
  }
  .mob-prog-bar {
    display: flex; gap: 5px;
  }
  .mob-prog-seg {
    flex: 1; height: 4px; border-radius: 4px;
    background: var(--line-strong);
    transition: background .25s;
  }
  .mob-prog-seg.mob-prog-active { background: var(--accent); }
  .mob-prog-labels {
    display: flex; justify-content: space-between;
  }
  .mob-prog-label {
    font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: .01em;
  }
  .mob-prog-label.mob-prog-label-active { color: var(--accent-strong); }

  /* Steps: scrollable, with bottom padding for fixed footer */
  #setupStepInfo.active,
  #setupStepRotation.active {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 4px 16px 96px !important;
    display: block !important;
  }

  /* Single-column card grid */
  .setup-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }
  .setup-card {
    border-radius: 17px !important;
    padding: 16px !important;
  }
  .setup-card.full { grid-column: 1 !important; }

  /* Touch-friendly inputs */
  .setup-input, .setup-select {
    height: 46px !important;
    padding: 0 14px !important;
    background: #f5f6f9 !important;
    border-color: transparent !important;
    font-size: 15px !important;
    border-radius: 11px !important;
  }
  .setup-input:focus, .setup-select:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
  }
  .setup-textarea {
    background: #f5f6f9 !important;
    border-color: transparent !important;
    border-radius: 11px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 90px !important;
  }
  .setup-textarea:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
  }

  /* Hide the international rules note on mobile */
  .international-rules-note { display: none !important; }

  /* Single-column form grids */
  .setup-form-grid, .setup-form-grid.two {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Match Information card: Competition full-width, Date + Venue side by side */
  .setup-card.full .setup-form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .setup-card.full .setup-form-grid .setup-field:first-child {
    grid-column: 1 / -1 !important;
  }

  /* ── Collapsible team cards ─────────────────────────────────── */
  .setup-team-card .setup-card-title {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    margin-bottom: 0 !important;
  }
  .setup-team-card .setup-team-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  .setup-team-card.expanded .setup-team-body {
    max-height: 1400px;
    transition: max-height 0.5s ease;
  }
  .setup-team-card.expanded .setup-card-title {
    margin-bottom: 16px !important;
  }

  /* Add-player row: number + name, then role + button below */
  .add-player-row {
    grid-template-columns: 72px 1fr !important;
    gap: 8px !important;
  }
  .add-player-row select { grid-column: 1 / -1 !important; }
  .add-player-row .setup-small-btn {
    grid-column: 1 / -1 !important;
    height: 42px !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: var(--accent-soft) !important;
    border-color: #c5cdfb !important;
    color: var(--accent-strong) !important;
  }

  /* System radio options: stack */
  .setup-system-options { flex-direction: column !important; gap: 7px !important; }

  /* Rotation court: KEEP 3-col (override the existing 700px 1-col rule) */
  .setup-court {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
    border-radius: 14px !important;
    padding: 12px !important;
  }
  .setup-slot {
    padding: 8px 5px !important;
    min-height: 76px !important;
    border-radius: 10px !important;
  }
  .setup-slot-label { font-size: 8px !important; margin-bottom: 4px !important; }
  .setup-slot select { font-size: 11px !important; padding: 5px 3px !important; border-radius: 7px !important; }
  .setup-player-preview { font-size: 10px !important; margin-top: 4px !important; min-height: 16px !important; }

  /* Libero box */
  .setup-libero-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .setup-libero-field select { height: 44px !important; font-size: 14px !important; padding: 0 12px !important; }

  /* Hide the desktop back/start button card in rotation step */
  #setupStepRotation .setup-card.full { display: none !important; }

  /* Mobile sticky footer */
  .mob-setup-footer {
    display: none; /* JS controls; footer1 overridden below */
    position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 30;
    padding: 12px 16px 28px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    gap: 10px;
    align-items: center;
    box-shadow: 0 -2px 16px rgba(20,23,31,.08);
  }
  #mobSetupFooter1 { display: flex; }
  .mob-setup-quick-btn {
    height: 52px; padding: 0 18px; border-radius: 13px;
    border: 1.5px solid var(--line-strong); background: var(--surface);
    color: var(--ink); font-size: 14px; font-weight: 700; font-family: var(--font);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
  }
  .mob-setup-quick-btn:active { transform: scale(.98); }
  .mob-setup-next-btn, .mob-setup-start-btn {
    flex: 1; height: 52px; border: none;
    border-radius: 13px; font-size: 15.5px; font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 10px 22px -10px var(--accent);
    font-family: var(--font);
  }
  .mob-setup-start-btn {
    background: linear-gradient(135deg, var(--good), #0f7a3c) !important;
    box-shadow: 0 10px 22px -10px var(--good) !important;
  }
  .mob-setup-next-btn:active, .mob-setup-start-btn:active { transform: scale(.98); }
  .mob-setup-back-btn {
    width: 52px; height: 52px;
    border-radius: 13px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    font-size: 20px; cursor: pointer; flex: none;
  }

  /* ─────────────────────────────────────────────────────────────
     LIVE CODING (MATCH PAGE)
     ───────────────────────────────────────────────────────────── */

  /* Dark full-screen background */
  body.coding,
  body.coding .app,
  body.coding .app-main { background: #0b1830 !important; }

  .match-view {
    background: #0b1830 !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dark scorebar */
  .scorebar {
    background: #1a2340 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 50px 14px 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: space-between !important;
    overflow: visible !important;
    flex: none !important;
  }
  .scorebar::after { display: none !important; }

  /* Mobile back button */
  .mob-back-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.1);
    border: none; border-radius: 9px;
    color: #fff; cursor: pointer; flex: none;
  }

  /* Hide the separate set-label element */
  .set-label { display: none !important; }

  /* Team sides: column layout */
  #homeTeamSide, #awayTeamSide {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
  #awayTeamSide {
    align-items: flex-end !important;
  }
  /* Reorder away children: name first, set-score last */
  #awayTeamSide .set-score { order: 2 !important; }
  #awayTeamSide .team-name { order: 0 !important; }
  #awayTeamSide .serving-badge { order: 1 !important; }

  .team-name {
    font-size: 13px !important;
    color: rgba(255,255,255,.85) !important;
    max-width: 90px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -.01em !important;
  }
  .serving-badge {
    background: #e07a36 !important;
    border: none !important;
    color: #fff !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    gap: 0 !important;
  }
  .serving-dot { display: none !important; }
  .set-score {
    background: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.65) !important;
    font-size: 10px !important;
    padding: 3px 7px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
  }

  /* Large central score */
  .score-main {
    flex: none !important;
    gap: 6px !important;
    padding: 0 6px !important;
    align-items: center !important;
  }
  .score-num {
    font-size: 34px !important;
    min-width: 36px !important;
    color: #fff !important;
    text-align: center !important;
  }
  .score-dash {
    font-size: 20px !important;
    color: rgba(255,255,255,.3) !important;
  }

  /* Peek bar (last action) */
  .mob-peek-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: #13294a;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex: none;
  }
  .mob-peek-chip {
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    background: rgba(21,146,74,.25);
    color: #5ddba0;
    padding: 3px 8px; border-radius: 6px;
    white-space: nowrap; flex: none;
    border: 1px solid rgba(21,146,74,.25);
  }
  .mob-peek-text {
    font-size: 12px; color: rgba(255,255,255,.6);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mob-peek-link {
    font-size: 11.5px; font-weight: 700;
    color: #7b9fd4; background: none; border: none;
    cursor: pointer; white-space: nowrap; flex: none;
    padding: 0; font-family: var(--font);
  }

  /* Main grid: flex column, fill remaining space */
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .sidebar-left, .sidebar-right { display: none !important; }

  /* Center panel: dark bg, flex column */
  .center-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    background: #0b1830 !important;
    overflow: visible !important;
    gap: 0 !important;
  }

  /* ── Court: vertical orientation ── */
  .court {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
    padding: 12px 8px !important;
    margin: 0 0 8px !important;
    border-radius: 16px !important;
    flex: 1 !important;
  }
  /* Horizontal net line */
  .court::before {
    left: 12px !important; right: 12px !important;
    top: 50% !important; bottom: auto !important;
    width: auto !important; height: 4px !important;
    background: repeating-linear-gradient(90deg,#fff 0 8px,rgba(255,255,255,.4) 8px 12px) !important;
    transform: translateY(-50%) !important;
    border-radius: 2px !important;
  }
  .court::after { display: none !important; }

  /* Away on top */
  .court-half.away { order: -1 !important; }

  /* Each half: 3×2 grid */
  .court-half {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px 4px !important;
    min-height: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 1 !important;
  }
  .court-half::after { display: none !important; }

  /* Home: P4=front-left P3=front-mid P2=front-right P5=back-left P6=back-mid P1=back-right */
  .court-half.home .player-spot:nth-child(1){grid-column:1!important;grid-row:1!important}
  .court-half.home .player-spot:nth-child(2){grid-column:2!important;grid-row:1!important}
  .court-half.home .player-spot:nth-child(3){grid-column:3!important;grid-row:1!important}
  .court-half.home .player-spot:nth-child(4){grid-column:1!important;grid-row:2!important}
  .court-half.home .player-spot:nth-child(5){grid-column:2!important;grid-row:2!important}
  .court-half.home .player-spot:nth-child(6){grid-column:3!important;grid-row:2!important}

  /* Away (shown on top, inverted): P2→bottom-right P3→bottom-mid P4→bottom-left P1→top-right P6→top-mid P5→top-left */
  .court-half.away .player-spot:nth-child(1){grid-column:3!important;grid-row:2!important}
  .court-half.away .player-spot:nth-child(2){grid-column:2!important;grid-row:2!important}
  .court-half.away .player-spot:nth-child(3){grid-column:1!important;grid-row:2!important}
  .court-half.away .player-spot:nth-child(4){grid-column:3!important;grid-row:1!important}
  .court-half.away .player-spot:nth-child(5){grid-column:2!important;grid-row:1!important}
  .court-half.away .player-spot:nth-child(6){grid-column:1!important;grid-row:1!important}

  /* Circular player spots */
  .player-spot {
    flex-direction: column !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .player-pos {
    font-size: 8px !important;
    padding: 1px 5px !important;
    order: 2 !important;
    background: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.7) !important;
    border-radius: 999px !important;
  }
  .player-num {
    width: 44px !important; height: 44px !important;
    border-width: 2.5px !important;
    order: 1 !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 3px 8px -3px rgba(0,0,0,.5) !important;
  }
  .court-half.home .player-num { border-color: var(--accent) !important; color: var(--accent) !important; }
  .court-half.away .player-num { border-color: var(--away) !important; color: var(--away-strong) !important; }
  .court-number { font-size: 14px !important; }
  .court-role { font-size: 7px !important; margin-top: 1px !important; }

  /* ── White coding dock at bottom ── */
  .mob-dock {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -4px 28px rgba(0,0,0,.25) !important;
    padding: 14px 14px 28px !important;
    gap: 10px !important;
    margin: 0 -10px !important; /* bleed to edge, cancel center-panel padding */
    flex: none !important;
  }

  /* 9-button quick-action grid (3 columns × 3 rows) */
  .mob-quick-btns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .mob-qbtn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 50px !important;
    border-radius: 11px !important;
    border: 1.5px solid var(--line-strong) !important;
    background: var(--surface-2) !important;
    font-size: 10.5px !important; font-weight: 800 !important;
    color: var(--ink-2) !important;
    cursor: pointer !important;
    transition: all .13s !important;
    font-family: var(--font) !important;
    padding: 4px 2px !important;
  }
  .mob-qbtn:active { transform: scale(.94) !important; }
  .mob-qbtn svg { width: 14px !important; height: 14px !important; opacity: .7 !important; }
  .mob-qbtn-home {
    background: var(--good-soft) !important;
    border-color: #a9e0bd !important;
    color: var(--good) !important;
  }
  .mob-qbtn-away {
    background: rgba(224,122,54,.1) !important;
    border-color: rgba(224,122,54,.28) !important;
    color: var(--away) !important;
  }
  .mob-qbtn-warn {
    background: var(--warn-soft) !important;
    border-color: rgba(194,129,28,.3) !important;
    color: var(--warn) !important;
  }
  .mob-qbtn-danger {
    background: var(--bad-soft) !important;
    border-color: #edc4c1 !important;
    color: var(--bad) !important;
  }
  .mob-qbtn-info {
    background: var(--accent-soft) !important;
    border-color: #c5cdfb !important;
    color: var(--accent) !important;
  }
  .mob-qbtn[disabled] {
    opacity: .4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
  /* Show chevron on mobile */
  .setup-team-chevron {
    display: block !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    color: var(--muted-2) !important;
  }
  .setup-team-card.expanded .setup-team-chevron {
    transform: rotate(180deg) !important;
  }

  /* Code area: transparent inside dock */
  .code-area {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .code-hint { display: none !important; }
  .input-row {
    max-width: none !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .code-field {
    flex: 1 !important;
    height: 52px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    background: var(--surface-2) !important;
    border: 1.5px solid var(--line-strong) !important;
  }
  .code-field:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
  }

  /* Mic FAB: blue gradient, bigger */
  #micIconBtn {
    width: 58px !important; height: 58px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 22px -8px var(--accent) !important;
    flex: none !important;
  }
  #micIconBtn.recording {
    background: linear-gradient(135deg, var(--bad), #a82f29) !important;
    box-shadow: 0 10px 22px -8px var(--bad) !important;
  }
  #micIconBtn svg { width: 24px !important; height: 24px !important; }
  .center-panel .submit-btn { display: none !important; }

  /* Voice area: transparent inside dock */
  .voice-area {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .voice-status { margin-bottom: 6px !important; }
  .rec-label { color: var(--muted) !important; }

  .transcript {
    font-size: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    max-height: 72px !important;
    overflow-y: auto !important;
    line-height: 1.5 !important;
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
  }
  .transcript.empty { font-size: 11.5px !important; }

  .confirm-box {
    border-radius: 12px !important;
    padding: 11px !important;
  }
  .mob-confirm-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .mob-cc-chip {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: #f5f6f9 !important;
    color: #3d434f !important;
  }
  .mob-cc-chip-player {
    font-family: var(--mono) !important;
    background: #f5f6f9 !important;
    color: #14171f !important;
  }
  .confirm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-bottom: 8px !important;
  }
  .confirm-btns { gap: 7px !important; }
  .btn-save { flex: 2 !important; border-radius: 10px !important; }
  .btn-discard { flex: 1 !important; border-radius: 10px !important; }
  .detected-bar {
    border-radius: 10px !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  /* Toast: offset above bottom dock */
  body.coding .toast { bottom: 24px !important; }
}

/* ── Mobile stats tab views (hidden on desktop) ──────────────────── */
#playerStatsMobTabs,#rotationStatsMobTabs{display:none}

@media(max-width:700px){
  /* Re-assert display:block here so this rule beats the global display:none above */
  #playerStatsMobTabs,#rotationStatsMobTabs{display:block}
  /* Tab navigation strip */
  .mob-tab-nav{
    display:flex;gap:6px;overflow-x:auto;
    padding:2px 0 10px;margin-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mob-tab-nav::-webkit-scrollbar{display:none}
  .mob-tab-btn{
    flex:none;padding:7px 14px;border-radius:999px;
    border:1.5px solid var(--line-strong);background:var(--surface-2);
    font-size:12px;font-weight:700;color:var(--muted);
    cursor:pointer;font-family:var(--font);letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent;white-space:nowrap;
    transition:background .15s,color .15s,border-color .15s;
  }
  .mob-tab-btn.active{
    background:var(--accent);border-color:var(--accent);color:#fff;
  }
  .mob-tab-content{display:none}
  .mob-tab-content.active{display:block}

  /* Compact stat table */
  .mob-stat-table{
    width:100%;border-collapse:collapse;
    font-size:12.5px;
  }
  .mob-stat-table thead th{
    background:var(--surface-2);
    color:var(--muted);
    font-size:10px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;
    padding:8px 6px;text-align:center;
    border-bottom:1.5px solid var(--line);
    white-space:nowrap;
  }
  .mob-stat-table thead th:first-child{
    text-align:center;
    position:sticky;left:0;
    background:var(--surface-2);z-index:2;
  }
  .mob-stat-table thead th:nth-child(2){
    text-align:left;padding-left:6px;
  }
  .mob-stat-table tbody td{
    padding:9px 6px;text-align:center;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    font-family:var(--mono);font-size:13px;font-weight:600;
  }
  .mob-stat-table tbody td:first-child{
    text-align:center;
    font-family:var(--mono);font-size:13px;font-weight:700;
    position:sticky;left:0;
    background:var(--surface);z-index:1;
  }
  .mob-stat-table tbody td:nth-child(2){
    text-align:left;padding-left:6px;
    font-family:var(--font);font-size:12px;font-weight:600;
    white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;
  }
  .mob-stat-table tbody tr:last-child td{border-bottom:none}
  .mob-stat-table .mob-totals-row td{
    background:var(--surface-2);font-weight:800;
    border-top:1.5px solid var(--line);
  }
  .mob-stat-table .mob-totals-row td:first-child{background:var(--surface-2)}
  .mob-stat-table .val-green{color:var(--good)}
  .mob-stat-table .val-red{color:var(--bad)}
  .mob-stat-table td.center{text-align:center}

  /* Team separator rows inside a shared table */
  .mob-stat-table tbody tr.mob-team-sep td{
    position:static;
    text-align:left;padding:10px 10px 5px;
    font-family:var(--font);font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--muted);
    background:var(--surface)!important;
    border-top:1.5px solid var(--line);border-bottom:none;
  }
  .mob-stat-table tbody tr.mob-team-sep:first-child td{border-top:none;padding-top:4px}

  .mob-player-tbl{table-layout:fixed;width:100%}
  .mob-player-tbl th:first-child,.mob-player-tbl td:first-child{width:34px}
  .mob-player-tbl th:nth-child(2),.mob-player-tbl td:nth-child(2){width:100px}
  .mob-rotation-tbl{table-layout:fixed;width:100%}
  .mob-rotation-tbl th:first-child,.mob-rotation-tbl td:first-child{width:48px}
  .mob-stat-table .eff-badge{min-width:40px;padding:3px 6px;font-size:11px;display:inline-block;box-sizing:border-box}
}