@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:#06090d; --card:#0d1117; --border:#1a2332; --border-hi:#243044;
  --text:#f1f5f9; --text2:#a8b2bd; --text3:#7a8494;
  --accent:#f97316; --green:#22c55e; --red:#ef4444; --gold:#eab308; --cyan:#06b6d4;
  --bar-bg:#1e293b;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;touch-action:manipulation}
body{font-family:'JetBrains Mono','SF Mono',monospace;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ── auth screen ─────────────────────────────────── */
.auth-screen{display:flex;align-items:center;justify-content:center;flex:1;padding:20px}
.auth-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:40px;
  width:100%;max-width:380px;position:relative;overflow:hidden}
.auth-box::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-hi),transparent)}
.auth-logo{font-size:28px;font-weight:700;color:var(--text2);text-align:center;margin-bottom:8px}
.auth-logo b{color:var(--accent);font-weight:800}
.auth-subtitle{font-size:12px;color:var(--text3);text-align:center;text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:32px}
.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:6px;font-weight:600}
.auth-field input{width:100%;padding:12px 14px;background:var(--bar-bg);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
.auth-field input:focus{border-color:var(--accent)}
.auth-field input::placeholder{color:var(--text3)}
.auth-btn{width:100%;padding:14px;background:var(--accent);border:none;border-radius:6px;
  color:#fff;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;transition:opacity .2s;margin-top:8px}
.auth-btn:disabled{opacity:0.4;cursor:not-allowed}
.auth-btn:hover:not(:disabled){opacity:0.9}
.auth-error{color:var(--red);font-size:12px;text-align:center;margin-top:12px;min-height:18px}

/* ── app screen ─────────────────────────────────── */
#app-screen{flex:1;display:flex;flex-direction:column;min-height:0}
#operator-view{flex:1;display:flex;flex-direction:column;min-height:0}

/* ── role selection screen ──────────────────────── */
.role-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:40px}
.role-header{text-align:center}
.role-subtitle{font-size:13px;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-top:8px;font-weight:600}
.role-grid{display:flex;gap:20px;width:100%;max-width:720px}
@media(max-width:600px){.role-grid{flex-direction:column;max-width:320px}}
.role-card{flex:1;background:var(--card);border:2px solid var(--border);border-radius:16px;padding:32px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:all .2s;
  font-family:inherit;color:var(--text);-webkit-tap-highlight-color:transparent}
.role-card:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.role-card:active{transform:scale(0.97)}
.role-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;letter-spacing:-1px}
.role-court-1 .role-icon{background:rgba(249,115,22,0.12);color:var(--accent);border:2px solid rgba(249,115,22,0.3)}
.role-court-2 .role-icon{background:rgba(6,182,212,0.12);color:var(--cyan);border:2px solid rgba(6,182,212,0.3)}
.role-clips .role-icon{background:rgba(139,148,158,0.12);color:var(--text2);border:2px solid rgba(139,148,158,0.3)}
.role-court-1:hover{border-color:var(--accent)}
.role-court-2:hover{border-color:var(--cyan)}
.role-clips:hover{border-color:var(--text2)}
.role-label{font-size:18px;font-weight:700;letter-spacing:0.5px}
.role-desc{font-size:12px;color:var(--text3);letter-spacing:0.5px}

/* ── role badge in topbar ───────────────────────── */
.role-badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  padding:4px 14px;border-radius:4px;margin-left:12px}
.role-badge.court-1{background:rgba(249,115,22,0.12);color:var(--accent);border:1px solid rgba(249,115,22,0.3)}
.role-badge.court-2{background:rgba(6,182,212,0.12);color:var(--cyan);border:1px solid rgba(6,182,212,0.3)}
.role-badge.past-sessions{background:rgba(139,148,158,0.12);color:var(--text2);border:1px solid rgba(139,148,158,0.3)}
.switch-role-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;cursor:pointer;transition:all .2s}
.switch-role-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── topbar ──────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.logo{font-size:22px;font-weight:700;color:var(--text2)}
.logo b{color:var(--accent);font-weight:800}
.sep{color:var(--text3);font-size:18px}
.tag{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);padding:3px 12px;border:1px solid var(--border);border-radius:4px}
.court-selector{display:flex;gap:0;margin-left:12px}
.court-btn{background:var(--bar-bg);border:1px solid var(--border);color:var(--text3);font-family:inherit;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 14px;
  cursor:pointer;transition:all .2s;white-space:nowrap}
.court-btn{border-radius:0}
.court-btn:first-child{border-radius:4px 0 0 4px}
.court-btn:last-child{border-radius:0 4px 4px 0}
.court-btn+.court-btn{border-left:none}
.court-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.court-btn:hover:not(.active){border-color:var(--border-hi);color:var(--text)}
.conn{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0}
.dot.on{background:var(--green);box-shadow:0 0 12px var(--green)}
.logout-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;cursor:pointer;transition:all .2s;margin-left:8px}
.logout-btn:hover{border-color:var(--red);color:var(--red)}

/* ── main layout ─────────────────────────────────── */
.main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;min-height:0;overflow:hidden}
@media(max-width:900px){.main{grid-template-columns:1fr;overflow-y:auto}}

/* ── cards ────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border-hi),transparent)}
.card-t{font-size:14px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card-t::before{content:'>';color:var(--accent);font-weight:800}

/* ── left column: control ────────────────────────── */
.control-col{display:flex;flex-direction:column;gap:16px}

/* ── START button ────────────────────────────────── */
.start-zone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px}
.start-btn{width:220px;height:220px;border-radius:50%;border:4px solid var(--green);background:radial-gradient(circle at 40% 35%,rgba(34,197,94,0.15),rgba(34,197,94,0.03));
  color:var(--green);font-family:inherit;font-size:28px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:all .15s;position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px rgba(34,197,94,0.1),inset 0 0 30px rgba(34,197,94,0.05);-webkit-tap-highlight-color:transparent}
.start-btn:active{transform:scale(0.94);box-shadow:0 0 60px rgba(34,197,94,0.3),inset 0 0 40px rgba(34,197,94,0.1)}
.start-btn::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(34,197,94,0.15);pointer-events:none}
.start-btn.disabled{opacity:0.3;pointer-events:none}

/* ── STOP: slide-to-unlock ───────────────────────── */
.stop-zone{display:none;flex-direction:column;align-items:center;gap:16px}
.stop-zone.active{display:flex}
.start-zone.hidden{display:none}
.slide-track{width:100%;max-width:340px;height:64px;border-radius:32px;background:var(--bar-bg);border:2px solid rgba(239,68,68,0.25);
  position:relative;overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent}
.slide-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(239,68,68,0.4);pointer-events:none;transition:opacity .2s}
.slide-thumb{position:absolute;top:4px;left:4px;width:56px;height:56px;border-radius:50%;
  background:var(--red);display:flex;align-items:center;justify-content:center;cursor:grab;
  box-shadow:0 0 20px rgba(239,68,68,0.3);transition:left 0.1s ease-out;touch-action:none}
.slide-thumb svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.slide-thumb.dragging{transition:none;cursor:grabbing}
.slide-hint{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.operator-hint{display:block;text-align:center;font-size:13px;color:var(--text3);margin-top:12px;line-height:1.4}
.extend-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--cyan);
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.5px;padding:8px 20px;
  cursor:pointer;transition:all .2s;margin-top:8px;-webkit-tap-highlight-color:transparent}
.extend-btn:hover{border-color:var(--cyan);background:rgba(6,182,212,0.08)}
.extend-btn:disabled{opacity:0.3;pointer-events:none}
.extend-info{font-size:11px;color:var(--cyan);margin-top:4px;min-height:16px}

/* ── confirm modal ──────────────────────────────── */
.confirm-modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);display:flex;
  align-items:center;justify-content:center;animation:qr-fade-in .15s ease}
.confirm-box{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:28px 24px 20px;max-width:360px;width:90%;text-align:center}
.confirm-text{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:20px}
.confirm-actions{display:flex;gap:10px}
.confirm-btn{flex:1;padding:12px;border-radius:8px;font-family:inherit;font-size:13px;
  font-weight:700;letter-spacing:0.5px;cursor:pointer;transition:all .2s;border:none}
.confirm-cancel{background:var(--bar-bg);color:var(--text2);border:1px solid var(--border)}
.confirm-cancel:hover{border-color:var(--border-hi);color:var(--text)}
.confirm-ok{background:var(--cyan);color:#fff}
.confirm-ok:hover{opacity:0.9}

/* ── session status strip ────────────────────────── */
.status-strip{display:flex;align-items:center;gap:12px;padding:12px 0}
.status-tag{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:2px}
.status-tag.idle{color:var(--text3)}
.status-tag.active{color:var(--green)}
.shot-dots{display:flex;gap:8px}
.shot-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;transition:all .3s}
.shot-dot.make{border-color:var(--green);background:rgba(34,197,94,0.15);color:var(--green)}
.shot-dot.miss{border-color:var(--red);background:rgba(239,68,68,0.15);color:var(--red)}
.shot-dot.pending{border-color:var(--text3);color:var(--text3)}

/* ── countdown ───────────────────────────────────── */
.countdown-row{display:flex;align-items:center;gap:16px;padding:8px 0}
.session-num-wrap{display:flex;flex-direction:column;align-items:center;min-width:60px}
.session-num{font-size:48px;font-weight:800;color:var(--cyan);line-height:1;letter-spacing:-2px}
.session-num-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px}
.countdown-time{font-size:56px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-3px}
.countdown-time.warn{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.countdown-extend-label{font-size:11px;color:var(--cyan);letter-spacing:0.5px;min-height:16px}
.countdown-bar{height:10px;background:var(--bar-bg);border-radius:5px;overflow:hidden;margin-top:8px}
.countdown-fill{height:100%;border-radius:5px;background:var(--cyan);transition:width .5s ease;box-shadow:0 0 8px rgba(6,182,212,0.5)}
.countdown-fill.warn{background:var(--red);box-shadow:0 0 10px rgba(239,68,68,0.5)}

/* ── right column: stats ─────────────────────────── */
.stats-col{display:flex;flex-direction:column;gap:16px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;
  background:var(--bar-bg);border-radius:8px;border:1px solid var(--border)}
.stat-val{font-size:48px;font-weight:800;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px;font-weight:600}

/* ── last completed session ──────────────────────── */
.last-session{border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.last-session .ls-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;font-weight:600}
.ls-row{display:flex;gap:16px}
.ls-item{display:flex;flex-direction:column;align-items:center;flex:1}
.ls-val{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ls-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1px}

/* ── error toast ─────────────────────────────────── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 24px;border-radius:8px;
  background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:var(--red);font-size:13px;font-weight:600;
  letter-spacing:.5px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:100}
.toast.show{opacity:1}

/* ── tab content ─────────────────────────────────── */
.tab-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tab-content.hidden{display:none!important}

/* ── past sessions ───────────────────────────────── */
.past-sessions-wrap{padding:16px 20px;overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch}
.past-sessions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.refresh-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}
.refresh-btn:hover{border-color:var(--accent);color:var(--accent)}

.court-filter{display:flex;gap:0;margin-bottom:12px}
.filter-btn{flex:1;background:none;border:1px solid var(--border);color:var(--text3);
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.5px;
  padding:8px 0;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}
.filter-btn:first-child{border-radius:6px 0 0 6px}
.filter-btn:last-child{border-radius:0 6px 6px 0}
.filter-btn+.filter-btn{border-left:none}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

.clips-list{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.clips-loading,.clips-empty{text-align:center;padding:40px 0;color:var(--text3);font-size:13px;
  letter-spacing:1px;text-transform:uppercase;font-weight:600}

/* ── clip card ───────────────────────────────────── */
.clip-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px;
  position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s;
  border-left:3px solid var(--text3);-webkit-tap-highlight-color:transparent}
.clip-card:hover{border-color:var(--border-hi)}
.clip-card.court-1{border-left-color:var(--accent)}
.clip-card.court-2{border-left-color:var(--cyan)}

.clip-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.clip-court{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.clip-card.court-1 .clip-court{color:var(--accent)}
.clip-card.court-2 .clip-court{color:var(--cyan)}
.clip-ago{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-0.5px}
.clip-meta{font-size:11px;color:var(--text3);margin-top:4px}

/* ── QR fullscreen modal ─────────────────────────── */
.qr-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.85);display:flex;align-items:center;
  justify-content:center;animation:qr-fade-in .2s ease}
@keyframes qr-fade-in{from{opacity:0}to{opacity:1}}
.qr-modal-content{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:90vw}
.qr-modal-header{display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-modal-court{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px}
.qr-modal.court-1 .qr-modal-court{color:var(--accent)}
.qr-modal.court-2 .qr-modal-court{color:var(--cyan)}
.qr-modal-date{font-size:13px;color:var(--text2);font-weight:600;letter-spacing:0.5px}
.qr-modal-body{display:flex;align-items:center;gap:24px}
.qr-modal-video{width:auto;height:50vh;max-height:400px;border-radius:12px;object-fit:contain;background:#000}
.qr-modal-right{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-modal-qr{width:220px;height:220px;background:#fff;border-radius:16px;padding:10px;display:flex;align-items:center;justify-content:center}
.qr-modal-qr img{width:100%;height:100%;display:block}
.qr-modal-hint{font-size:11px;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.qr-modal-nav{background:none;border:1px solid var(--border);border-radius:50%;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:all .2s;-webkit-tap-highlight-color:transparent}
.qr-modal-nav svg{width:24px;height:24px;stroke:var(--text2);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.qr-modal-nav:hover{border-color:var(--accent)}
.qr-modal-nav:hover svg{stroke:var(--accent)}
.qr-modal-nav.hidden-nav{visibility:hidden;pointer-events:none}
.qr-modal-close{background:rgba(255,255,255,0.1);border:1px solid var(--border);border-radius:8px;
  color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:1px;
  padding:12px 48px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}
.qr-modal-close:hover{background:rgba(255,255,255,0.15);color:var(--text)}
@media(max-width:700px){.qr-modal-body{flex-direction:column;gap:20px}.qr-modal-video{height:30vh;max-width:80vw}
  .qr-modal-nav{position:absolute;top:50%}.qr-modal-nav.prev{left:12px}.qr-modal-nav.next{right:12px}}

.hidden{display:none!important}