:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;color:#e9eef4;background:#090f17;font-size:16px;color-scheme:dark;--muted:#97a6b7;--teal:#5ce0cc;--orange:#ffb178;--border:#263341}*{box-sizing:border-box}body{margin:0}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--border)}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.12em;font-size:16px;font-weight:750}.brand-mark{display:grid;place-items:center;border:1px solid var(--teal);color:var(--teal);width:32px;height:32px;font-style:italic}.edition{font-size:12px;color:var(--muted);margin-left:20px;letter-spacing:.16em}.private-note{font-size:14px;color:var(--muted)}main{max-width:1700px;margin:auto;padding:34px 4vw}.titlebar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{margin:0 0 12px;font-size:12px;color:var(--teal);letter-spacing:.16em}h1{margin:0;font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:.03em}.intro{color:var(--muted);margin:10px 0 0;font-size:15px}.file-actions,.controls,.range-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}button,.button,select,input[type=number]{font:inherit;font-size:14px;border:1px solid #344353;border-radius:6px;background:#15202c;color:#e9eef4;min-height:38px;padding:8px 13px}button,.button,select{cursor:pointer}button:hover,.button:hover{border-color:var(--teal)}button:disabled{opacity:.4;cursor:not-allowed}.button{display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--teal);border-color:var(--teal);color:#08261f;font-weight:650}label{font-size:14px;color:#b9c6d2}select{padding-right:28px}input[type=checkbox]{accent-color:var(--teal);width:16px;height:16px}.check{display:flex;align-items:center;gap:7px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--border)}#filename{font-size:14px;color:#c5d0da;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusline{min-height:40px;display:flex;gap:20px;align-items:center;margin-bottom:14px;font-size:14px;color:var(--muted)}progress{width:160px;height:7px;accent-color:var(--teal)}.workspace{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}.panel{background:#101923;border:1px solid var(--border);border-radius:10px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);min-height:62px}h2{margin:0;font-size:16px;font-weight:550;display:flex;align-items:center;gap:10px}.index{color:#72919f;font-family:monospace;font-size:12px}.tag{border:1px solid #3b4c5b;color:var(--muted);font-size:12px;padding:2px 5px;border-radius:3px}.view-buttons{display:flex;gap:4px}.view-buttons button{min-height:30px;padding:5px 10px;border-color:transparent;background:transparent;color:var(--muted)}.view-buttons .selected{background:#223e40;color:var(--teal)}.video-stage,.skeleton-stage{position:relative;height:440px;background:#0a111a;overflow:hidden}.video-stage video{width:100%;height:100%;object-fit:contain;display:block}.video-stage #overlayCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;color:var(--muted);border:1px dashed #344657;margin:26px;border-radius:8px}.empty-symbol{font-size:42px;font-weight:200;color:var(--teal);margin-bottom:12px}.empty strong{color:#d5dee6;font-size:17px;font-weight:500}.empty p{font-size:14px}.empty small{font-size:13px}.skeleton-stage canvas{width:100%;height:100%;touch-action:none;cursor:grab}.skeleton-stage canvas:active{cursor:grabbing}.skeleton-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;color:var(--muted);font-size:14px}.skeleton-empty strong{font-weight:400}.skeleton-empty span{font-size:13px}.legend{position:absolute;bottom:16px;left:20px;right:20px;display:flex;gap:20px;align-items:center;font-size:13px;color:var(--muted)}.legend>span:before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}.left:before{background:var(--teal)}.right:before{background:var(--orange)}.legend .check{margin-left:auto;font-size:13px}.transport{margin-top:16px;display:flex;align-items:center;gap:18px;padding:16px}.play-controls{display:flex;align-items:center;gap:8px}.play{min-width:70px;background:#243a41;color:var(--teal)}input[type=range]{accent-color:var(--teal);cursor:pointer;min-width:60px}#timeline{flex:1}#time{font-variant-numeric:tabular-nums;font-size:14px;color:#c6d3df;white-space:nowrap}.analysis-area{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}.muted{font-size:13px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px}.metrics>div{display:flex;flex-direction:column;gap:6px}.metrics span{font-size:14px;color:#b9c7d3}.metrics strong{font-size:28px;font-weight:450;font-variant-numeric:tabular-nums}.metrics small{color:#778b9d;font-size:12px}.metric-note{color:var(--muted);font-size:13px;line-height:1.7;margin:0;padding:0 24px 22px}.chart-panel canvas{display:block;width:100%;height:260px;cursor:crosshair}.range-panel{margin-top:16px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:22px}.range-panel h2{font-size:15px}.range-panel p{font-size:13px;color:var(--muted);margin-bottom:0}.range-controls{gap:10px}.range-controls input[type=number]{width:85px}.range-controls button{font-size:13px}.range-controls label{display:flex;align-items:center;gap:6px}footer{display:flex;justify-content:space-between;gap:20px;margin:24px 0 0;font-size:12px;line-height:1.8;color:#8397a9}footer a{white-space:nowrap;color:#a4bbcb}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.dragover{outline:2px solid var(--teal)}@media(min-width:1500px){.video-stage,.skeleton-stage{height:520px}}@media(max-width:1100px){.range-panel{align-items:flex-start;flex-direction:column}.edition{display:none}.toolbar{align-items:flex-start}.controls{justify-content:flex-end}.view-buttons button{padding:5px 7px}.metrics{gap:18px}.transport{gap:10px}}@media(max-width:760px){header{height:64px}.private-note{font-size:12px}.brand{font-size:14px}.workspace,.analysis-area{grid-template-columns:1fr}.titlebar{align-items:flex-start;flex-direction:column}main{padding-top:26px}.file-actions{width:100%}.toolbar{flex-direction:column}#filename{max-width:100%}.controls{justify-content:flex-start}.video-stage{height:420px}.skeleton-stage{height:400px}.transport{flex-wrap:wrap}#timeline{order:3;flex-basis:100%}#time{margin-left:auto}.panel-head{padding:14px}.metrics{padding:20px;gap:18px}.metrics strong{font-size:25px}.metrics span{font-size:13px}.range-controls{gap:12px}footer{flex-direction:column;gap:6px}.statusline{line-height:1.7;align-items:flex-start;flex-direction:column;gap:6px}.legend{gap:10px}.legend .check{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.equipment-panel{margin-top:16px}.equipment-toggles,.equipment-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.equipment-body{padding:18px 20px}.equipment-body p{margin:0 0 12px;font-size:14px;line-height:1.7}.equipment-body .muted{font-size:13px}.equipment-actions{margin-top:16px;gap:8px}.equipment-actions button{font-size:13px}.equipment-body .edit-hint{margin:14px 0 0;color:#f8dc6b}.bat-key:before{background:#f8dc6b}.ball-key:before{background:#fff;border-radius:50%;height:8px!important;width:8px!important}.legend{flex-wrap:wrap;gap:12px}.legend .check{margin-left:0}.skeleton-stage .legend{bottom:12px}.equipment-panel .panel-head{flex-wrap:wrap}@media(max-width:760px){.equipment-toggles{gap:10px}.equipment-toggles label{font-size:13px}.equipment-body{padding:16px}.legend{gap:10px}}
.speed-panel{margin-top:16px}.speed-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px}.speed-metrics>div{display:flex;flex-direction:column;gap:8px}.speed-metrics span{font-size:14px;color:#b9c7d3}.speed-metrics strong{font-size:34px;font-weight:500;color:#f8dc6b;font-variant-numeric:tabular-nums}.speed-metrics small{font-size:13px;color:var(--muted)}.calibration-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:0 22px 16px}.calibration-controls label{display:flex;align-items:center;gap:7px}.calibration-controls input{width:88px}.calibration-controls span{font-size:13px;color:#a8bbca}.speed-guidance,.speed-note{font-size:13px;line-height:1.8;color:var(--muted);padding:0 22px;margin:0 0 14px}.speed-note{color:#b8c6d0;padding-bottom:8px}@media(max-width:760px){.speed-metrics{gap:14px;padding:18px}.speed-metrics strong{font-size:28px}.speed-metrics span{font-size:13px}.calibration-controls{padding:0 18px 14px}.speed-guidance,.speed-note{padding-left:18px;padding-right:18px}}
.speed-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.speed-metrics span{font-size:14px}
/* Phone layout and comfortable touch targets. */
.header-actions{display:flex;align-items:center;gap:16px}
.account-menu{position:relative;z-index:20}
.account-menu summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:14px}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.account-card{position:absolute;top:calc(100% + 10px);right:0;width:min(340px,calc(100vw - 32px));padding:18px;background:#101923;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px #0008}
.account-card strong{font-size:16px}
.account-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:12px 0}
.account-card a{width:100%;min-height:44px;margin-top:8px}
.account-card .account-note{font-size:12px;margin-bottom:0}
@media(max-width:760px){header .private-note{display:none}.header-actions{gap:8px}.account-menu summary{font-size:13px}}
.video-panel .transport{border:0;border-top:1px solid var(--border);border-radius:0;margin:0;flex-wrap:wrap}
.timeline-trim{width:100%;flex-basis:100%;order:4;border-top:1px solid var(--border);padding-top:12px}
.trim-hint,.trim-note,.timeline-trim #clipStatus{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 12px}
.trim-markers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.trim-markers button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;flex-wrap:wrap}
.trim-markers output{color:var(--teal);font-variant-numeric:tabular-nums}
.trim-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.trim-details{margin-bottom:12px;font-size:14px}
.trim-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}
.video-panel .play-controls{width:100%}
.video-panel #time{width:100%;text-align:right}
.video-panel #timeline{order:3;flex-basis:100%;width:100%;min-height:44px}
@media(max-width:760px){.trim-actions>button{width:100%}.trim-markers button{font-size:14px}.trim-markers output{font-size:13px}}
.video-actions{max-width:440px;min-width:0}
.video-actions p{line-height:1.7;margin:10px 0 0}
.file-actions button:disabled+label{opacity:.4}
button,.button,select,input{touch-action:manipulation}
.panel,.titlebar>div,.controls,.play-controls{min-width:0}
@media(max-width:760px){
  main{padding:22px max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  button,.button,select,input[type=number]{min-height:44px;font-size:16px}
  .check{min-height:44px}
  input[type=checkbox]{width:20px;height:20px;flex-shrink:0}
  .file-actions .button{width:100%;min-height:48px}
  .video-actions{width:100%;max-width:none}
  #camera{width:100%;min-height:48px}
  .controls{width:100%;gap:10px}
  .controls>label{width:100%;display:flex;align-items:center;justify-content:space-between}
  .controls>button{flex:1 1 130px}
  .video-stage{height:clamp(220px,65vw,360px)}
  .skeleton-stage{height:clamp(280px,80vw,380px)}
  .panel-head{flex-wrap:wrap;gap:8px}
  .view-buttons{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .view-buttons button{min-height:44px;font-size:15px}
  .empty{margin:14px;padding:14px}
  .skeleton-empty{padding:20px;text-align:center}
  .legend{left:12px;right:12px;gap:8px;font-size:12px}
  .legend .check{min-height:32px}
  .transport{padding:12px;gap:8px}
  .play-controls{width:100%;display:grid;grid-template-columns:44px 1fr 44px auto;gap:6px}
  .play-controls button{padding:8px}
  .play-controls select{width:100%;padding:8px}
  #time{width:100%;text-align:right;margin:0}
  #timeline{min-height:44px;margin:0;width:100%}
  .metrics,.speed-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;padding:16px}
  .speed-metrics strong{font-size:26px;overflow-wrap:anywhere}
  .equipment-actions{display:grid;grid-template-columns:1fr;width:100%}
  .equipment-actions button,.range-controls button{min-height:44px;font-size:14px}
  .calibration-controls button{width:100%}
  .range-panel{padding:16px}
  .range-controls{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
  .range-controls label{justify-content:space-between}
  .range-controls .check{justify-content:flex-start}
  .intro,.equipment-body p,.metric-note,.speed-guidance,.speed-note,footer{overflow-wrap:anywhere}
}

.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(100%, 440px); padding: 32px; background: #101a26; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 40px #0000000a; }
.auth-card h1 { font-size: 28px; margin: 24px 0; }
.auth-intro { margin-top: 20px; color: var(--muted); font-size: 14px; }
.auth-card form, .auth-card label { display: grid; gap: 10px; }
.auth-card form { gap: 20px; }
.auth-card input { width: 100%; min-height: 48px; font-size: 16px; padding: 10px 12px; border: 1px solid #344353; border-radius: 8px; background: #090f17; color: #e9eef4; }
.auth-card button { min-height: 48px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.auth-links button, .auth-back { background: transparent; border: 0; color: var(--teal); text-decoration: underline; padding: 6px; }
.auth-error { color: #ffadad; }
.auth-message { color: var(--teal); }
.account-card strong { overflow-wrap: anywhere; }
@media (max-width: 480px) { .auth-card { padding: 24px 20px; } }

.app-views { display: flex; gap: 8px; margin-bottom: 30px; }
.app-views button { min-height: 48px; flex: 0 1 190px; }
.app-views button[aria-pressed=true] { color: #08261f; background: var(--teal); border-color: var(--teal); font-weight: 650; }
.score-storage { color: var(--muted); line-height: 1.8; max-width: 760px; }
.score-fieldset { padding: 0; margin: 24px 0; border: 0; min-width: 0; }
.score-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.score-games { display: flex; flex-direction: column; gap: 12px; }
.score-games h2, .score-panel h2 { font-size: 20px; margin: 0 0 20px; }
.score-games h2 { margin: 16px 0 0; }
.score-games h2 span, .score-panel h2 span { color: var(--muted); font-size: 14px; }
.score-games button { min-height: 48px; text-align: left; }
.score-games button span, .score-games button strong { display: block; overflow-wrap: anywhere; margin: 5px 0; }
.score-games button[aria-pressed=true] { border-color: var(--teal); }
.score-content { min-width: 0; }
.score-panel { padding: 24px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: #101a26; }
.score-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.score-form label { display: grid; gap: 8px; min-width: 0; }
.score-form input, .score-form select, .score-form textarea { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: #e9eef4; background: #090f17; border: 1px solid #344353; border-radius: 6px; padding: 10px 12px; }
.score-form textarea { min-height: 84px; resize: vertical; }
.score-wide { grid-column: 1/-1; }
.scorebook button { min-height: 44px; }
.score-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.score-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.score-photos { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }
.score-photos figure { margin: 0; min-width: 0; }
.score-photos img { width: 100%; max-height: 300px; object-fit: contain; background: #090f17; border-radius: 8px; }
.score-photos figcaption { overflow-wrap: anywhere; color: var(--muted); font-size: 13px; margin: 8px 0; }
.score-entries { list-style: none; margin: 0; padding: 0; }
.score-entries li { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.score-entries strong, .score-inning, .score-result { display: block; margin-bottom: 8px; overflow-wrap: anywhere; }
.score-inning { color: var(--muted); font-size: 13px; }
.score-result { color: var(--teal); }
.score-entries p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.score-entries .score-actions { align-content: start; flex-shrink: 0; }
.score-delete { color: #ffadad; }
@media(max-width:760px) { .score-layout { grid-template-columns: minmax(0,1fr); } .score-games { max-height: 300px; overflow-y: auto; } .score-panel { padding: 18px 14px; } .score-entries li { flex-direction: column; } }
@media(max-width:380px) { .score-form { grid-template-columns: minmax(0,1fr); } }
.session-label { color: var(--teal); font-size: 14px; margin: 0 0 20px; overflow-wrap: anywhere; }
.session-label span { display: block; color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 6px; }
.development-login { margin: 0 0 20px; }

.member-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); max-width: 1940px; margin: 0 auto; }
.member-layout main { width: 100%; min-width: 0; padding: 30px 24px; }
.member-sidebar { border-right: 1px solid var(--border); background: #0d1621; padding: 28px 16px; }
.member-sidebar nav { position: sticky; top: 24px; }
.sidebar-heading { color: var(--muted); font-size: 12px; letter-spacing: .08em; margin: 0 12px 18px; }
.member-sidebar nav > button { width: 100%; text-align: left; margin-bottom: 8px; min-height: 48px; background: transparent; border-color: transparent; }
.member-sidebar nav > button[aria-pressed=true] { background: #183a38; border-color: #39756c; color: var(--teal); font-weight: 650; }
.sidebar-analysis-links { margin: 0 0 18px 14px; padding-left: 10px; border-left: 1px solid var(--border); }
.sidebar-analysis-links button { display: block; width: 100%; min-height: 44px; text-align: left; background: transparent; border-color: transparent; color: #b9c6d2; padding: 8px; }
.sidebar-analysis-links button:hover { color: var(--teal); }
.sidebar-note { margin: 0 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sidebar-toggle { display: none; }
#workspace-section, #speed-section, #equipment-section, #form-section { scroll-margin-top: 20px; }
@media(max-width:760px) {
  .member-layout { display: block; }
  .member-layout main { padding: 24px 4vw; }
  .member-sidebar { padding: 12px 4vw; border-right: 0; border-bottom: 1px solid var(--border); }
  .member-sidebar nav { position: static; margin-top: 18px; }
  .sidebar-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; }
}
.staging-banner { padding: 12px 4vw; background: #3a2915; color: #ffcb85; border-bottom: 1px solid #745026; line-height: 1.7; font-size: 13px; }
.staging-banner strong { display: inline-block; margin-right: 12px; letter-spacing: .1em; }
.sidebar-close, .sidebar-backdrop { display: none; }
@media(max-width:760px) {
  .member-sidebar nav { position: fixed; z-index: 1002; top: 0; left: 0; bottom: 0; width: min(82vw,300px); margin: 0; padding: max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); overflow-y: auto; background: #0d1621; border-right: 1px solid var(--border); box-shadow: 8px 0 30px #0008; animation: sidebar-enter .2s ease-out; }
  .sidebar-backdrop { display: block; position: fixed; z-index: 1001; inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; background: #0008; }
  .member-sidebar nav > .sidebar-close { display: block; margin-bottom: 24px; text-align: right; color: var(--muted); }
}
@keyframes sidebar-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media(prefers-reduced-motion:reduce) { .member-sidebar nav { animation: none; } }
.sidebar-recent { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.sidebar-recent .sidebar-heading { color: var(--teal); margin-bottom: 6px; }
.sidebar-recent .sidebar-note { margin-bottom: 10px; }
.sidebar-recent button { display: block; width: 100%; min-height: 44px; margin-bottom: 6px; text-align: left; background: #152b2d; border-color: #2b4a49; }
.team-preview-note { padding: 14px 16px; border: 1px solid #745026; color: #ffcb85; border-radius: 8px; line-height: 1.7; margin: 20px 0; }
.team-create, .team-consent-form { display: grid; gap: 16px; }
.team-create label, .team-consent-form label:not(.check) { display: grid; gap: 8px; }
.team-create input, .team-consent-form input:not([type=checkbox]) { width: 100%; min-height: 48px; font: inherit; font-size: 16px; padding: 10px 12px; background: #090f17; color: #e9eef4; border: 1px solid #344353; border-radius: 6px; }
.team-consent-form .check { line-height: 1.8; align-items: flex-start; }
.team-consent-form .check input { flex-shrink: 0; margin-top: 5px; }
.team-row { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.team-row strong, .team-consent strong { overflow-wrap: anywhere; }
.reel-toolbar { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 20px 0; }
.reel-toolbar p span { display: block; color: var(--muted); margin-top: 8px; }
.reel-feed { max-height: 76dvh; overflow-y: auto; scroll-snap-type: y proximity; max-width: 540px; margin: 20px auto; overscroll-behavior-y: contain; }
.reel-card { scroll-snap-align: start; position: relative; background: #05080d; margin-bottom: 24px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.reel-card video { display: block; width: 100%; height: 55dvh; min-height: 260px; object-fit: contain; }
.reel-caption { padding: 16px; overflow-wrap: anywhere; }
.reel-caption small { display: block; color: var(--muted); margin-bottom: 12px; }
.reel-preview { display: block; max-width: 100%; width: 320px; max-height: 400px; }
@media(max-width:480px) { .team-row { align-items: flex-start; flex-direction: column; } }
.sidebar-team { padding: 14px 10px; margin-bottom: 20px; border: 1px solid #39756c; border-radius: 8px; background: #152b2d; }
.sidebar-team .sidebar-heading { margin: 0 0 8px; color: var(--teal); }
.sidebar-team .sidebar-note { margin: 0 0 12px; }
.sidebar-team button { width: 100%; min-height: 44px; text-align: left; color: var(--teal); }
.sidebar-linked-team { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.sidebar-linked-team .sidebar-heading { margin-bottom: 10px; }
.sidebar-linked-team button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 12px; text-align: left; border-color: #39756c; background: #152b2d; }
.sidebar-linked-team button span:last-child { min-width: 0; }
.sidebar-linked-team strong { display: block; overflow-wrap: anywhere; color: var(--teal); }
.sidebar-linked-team small { display: block; color: var(--muted); margin-top: 5px; }
@media(min-width:761px) { .member-sidebar nav { max-height: calc(100dvh - 48px); overflow-y: auto; scrollbar-width: thin; } }
.team-notices textarea { width: 100%; min-height: 130px; resize: vertical; font: inherit; font-size: 16px; padding: 12px; background: #090f17; color: #e9eef4; border: 1px solid #344353; border-radius: 6px; }
.notice-list { display: grid; gap: 16px; margin-top: 28px; }
.notice-card { padding: 18px; border: 1px solid var(--border); background: #0d1621; border-radius: 8px; min-width: 0; }
.notice-card h3 { margin: 0 0 12px; overflow-wrap: anywhere; }
.notice-meta { color: var(--muted); font-size: 12px; line-height: 1.8; }
.notice-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.annotation-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0; }
.annotation-scroll { overflow:auto; max-height:70dvh; border:1px solid var(--border); background:#05080d; }
.annotation-image { position:relative; min-width:100%; max-width:none; }
.annotation-image img { width:100%; height:100%; display:block; object-fit:fill; pointer-events:none; }
.annotation-image svg { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.annotation-boxes { list-style:none; padding:0; }
.annotation-boxes li { display:flex; gap:16px; align-items:center; margin:10px 0; }
.annotation-panel > .check { margin:16px 0; line-height:1.8; align-items:flex-start; }

.help-panel { max-width: 960px; margin-inline: auto; }
.help-guides { display: grid; gap: 12px; }
.help-guides summary { cursor: pointer; font-weight: 700; padding-block: 10px; min-height: 44px; }
.help-guides li { margin-block: 12px; line-height: 1.8; }
.help-panel p { line-height: 1.8; overflow-wrap: anywhere; }

.profile-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--bg); }
.profile-menu summary { gap: 6px; }
.profile-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-block: 16px; }
.profile-options button { min-width: 44px; min-height: 44px; font-size: 24px; }
.profile-options button[aria-pressed="true"] { outline: 2px solid var(--teal); }
.profile-photo { display: grid; gap: 8px; }
.profile-photo input { max-width: 100%; min-width: 0; }
@media(max-width:760px) { .profile-menu summary > span:last-child { display: none; } }

.team-members { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; }
.team-members-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.team-members-list { display: flex; gap: 20px; overflow-x: auto; padding: 16px 0; margin: 0; list-style: none; }
.team-members-list li { display: flex; flex: 0 0 76px; flex-direction: column; align-items: center; gap: 6px; text-align: center; overflow-wrap: anywhere; }
.team-members-list img,.team-member-icon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #edf6f3; }
.team-member-icon { display: flex; align-items: center; justify-content: center; font-size: 32px; }

.team-member-avatar { position: relative; padding-bottom: 9px; }
.practice-badge { display: inline-block; background: #137b53; color: white; border-radius: 12px; padding: 3px 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.team-member-avatar .practice-badge { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.practice-control { margin-top: 16px; min-height: 44px; }
@media(max-width:760px) { .profile-menu .account-card { position: fixed; top: 76px; right: 12px; left: auto; width: min(320px,calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow-y: auto; } }

.dev-toolbar { position: fixed; z-index: 10000; display: flex; gap: 6px; padding: 6px; border: 1px solid #5ce0cc; border-radius: 10px; background: #15202cf5; box-shadow: 0 4px 20px #0008; max-width: calc(100vw - 16px); }
.dev-toolbar button { min-height: 44px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.dev-toolbar button[aria-pressed="true"] { background: #5ce0cc; color: #08261f; }
.dev-drag { touch-action: none; cursor: grab; color: #5ce0cc; }
.dev-pick-highlight { position: fixed; z-index: 9998; pointer-events: none; border: 2px solid #5ce0cc; background: #5ce0cc20; }
.dev-pick-hint { position: fixed; top: 8px; left: 8px; right: 8px; z-index: 9999; pointer-events: none; background: #15202c; border: 1px solid #5ce0cc; padding: 10px; text-align: center; font-size: 13px; }
.dev-note-panel { position: fixed; z-index: 9999; right: 8px; top: 84px; width: min(360px,calc(100vw - 16px)); max-height: calc(100dvh - 170px); overflow: auto; padding: 16px; background: #15202c; border: 1px solid #5ce0cc; border-radius: 12px; box-shadow: 0 4px 20px #0008; }
.dev-note-head { display: flex; justify-content: space-between; align-items: center; }
.dev-note-panel label { display: grid; gap: 8px; margin: 16px 0; }
.dev-note-panel textarea { width: 100%; font: inherit; background: #090f17; color: #e9eef4; padding: 10px; border: 1px solid #344353; }
.dev-note-panel code,.dev-note-panel p { overflow-wrap: anywhere; }

.auth-card .auth-return { display: block; margin-top: 16px; }
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .member-layout { display: block; padding-left: 24px; }
  .member-sidebar { position: fixed; z-index: 1002; left: 0; top: 123px; bottom: 0; width: 254px; padding: 20px 40px 20px 16px; transform: translateX(-230px); transition: transform .18s ease; box-shadow: 8px 0 24px #0005; }
  .member-sidebar:hover,.member-sidebar:focus-within { transform: translateX(0); }
  .member-sidebar nav { position: static; max-height: 100%; overflow-y: auto; visibility: hidden; }
  .member-sidebar:hover nav,.member-sidebar:focus-within nav { visibility: visible; }
  .member-sidebar .sidebar-toggle { display: block; position: absolute; right: 0; top: 12px; width: 24px; min-height: 100px; padding: 4px; font-size: 0; border: 0; background: transparent; color: var(--teal); }
  .member-sidebar .sidebar-toggle span { display: none; }
  .member-sidebar .sidebar-toggle::after { content: 'メニュー'; font-size: 12px; writing-mode: vertical-rl; letter-spacing: .12em; }
}
@media(prefers-reduced-motion:reduce) { .member-sidebar { transition: none; } }

.profile-logout { width: 100%; margin-top: 16px; min-height: 44px; }

.profile-menu[open] { z-index: 1200; }
.profile-menu[open] > summary { position: relative; z-index: 2; }
.profile-backdrop { position: fixed; inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; background: #0003; z-index: 0; cursor: default; }
.profile-menu .account-card { z-index: 1; }
.member-sidebar .sidebar-heading { color: #8ba4b8; font-size: 11px; font-weight: 700; letter-spacing: .1em; margin: 22px 8px 10px; }
.member-sidebar nav > button { border-radius: 10px; padding: 12px; font-weight: 600; line-height: 1.5; }
.member-sidebar nav > button:hover { background: #1a2937; }
.member-sidebar nav > button[aria-pressed=true] { border-left: 3px solid var(--teal); background: #183a38; }
.sidebar-recent { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.sidebar-recent button { width: 100%; text-align: left; margin-top: 6px; border-radius: 10px; }
.sidebar-analysis-group { margin: 0 0 16px 12px; padding-left: 12px; border-left: 1px solid #344353; }
.sidebar-analysis-group summary { min-height: 40px; display: list-item; cursor: pointer; padding: 10px 4px; font-size: 13px; color: #b9c6d2; }
.sidebar-analysis-links { margin: 0; padding: 0; }
.sidebar-analysis-links button { min-height: 44px; padding: 8px; width: 100%; text-align: left; font-size: 13px; }
.sidebar-linked-team { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border); }

.profile-display-name { display: inline-block !important; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-name-input { display: grid; gap: 8px; margin-top: 16px; }
.profile-name-input input { width: 100%; min-height: 44px; font: inherit; padding: 10px; color: #e9eef4; background: #090f17; border: 1px solid #344353; border-radius: 8px; }
@media(max-width:760px) { .profile-display-name { max-width: 72px; font-size: 12px; } }

.practice-badge { background: #fff0ce; color: #754b19; border: 1px solid #f1c97c; box-shadow: 0 2px 5px #0002; border-radius: 999px; padding: 4px 8px; font-size: 11px; line-height: 1.4; }
.practice-badge span { display: inline-block; font-size: 13px; vertical-align: middle; }
.team-member-avatar:has(.practice-badge) > img,.team-member-avatar:has(.practice-badge) > .team-member-icon { outline: 3px solid #f1c97c; outline-offset: 3px; }

.staging-ribbon { position: fixed; top: 0; left: 0; width: 116px; height: 116px; overflow: hidden; pointer-events: none; z-index: 1300; }
.staging-ribbon span { position: absolute; width: 170px; top: 28px; left: -43px; transform: rotate(-45deg); background: #ffd56a; color: #402b09; box-shadow: 0 2px 8px #0005; text-align: center; padding: 7px 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; }

.profile-menu > summary { display: flex; gap: 10px; padding: 6px 10px; min-height: 48px; max-width: 240px; text-align: left; }
.profile-menu .profile-avatar { flex: 0 0 32px; }
.profile-menu .profile-summary-info { display: flex !important; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
.profile-menu .profile-display-name { display: block !important; max-width: 150px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.profile-menu .profile-chevron { display: inline-block !important; flex-shrink: 0; font-size: 16px; color: var(--muted); }
.profile-menu summary .practice-badge { padding: 2px 7px; font-size: 10px; line-height: 1.3; }
@media(max-width:760px) { .profile-menu > summary { gap: 6px; padding: 5px 7px; max-width: 170px; } .profile-menu .profile-display-name { max-width: 88px; font-size: 12px; } .profile-menu .profile-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 22px; } }
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .member-sidebar { box-shadow: none; background: transparent; border-right: 0; }
  .member-sidebar:hover,.member-sidebar:focus-within { background: #0d1621; box-shadow: 8px 0 24px #0005; border-right: 1px solid var(--border); }
  .member-sidebar .sidebar-toggle { right: -12px; top: 12px; width: 44px; min-height: 44px; height: 44px; padding: 0; border: 1px solid #344353; border-radius: 12px; background: #15202c; box-shadow: 0 3px 12px #0004; display: grid; place-items: center; color: #b9c6d2; }
  .member-sidebar .sidebar-toggle::after { content: '☰'; writing-mode: horizontal-tb; font-size: 21px; line-height: 1; letter-spacing: 0; }
  .member-sidebar .sidebar-toggle:hover { border-color: var(--teal); color: var(--teal); background: #183a38; }
}
/* Compact navigation entry */
.sidebar-toggle { font-size: 0; }
.sidebar-toggle > span { display: none; }
.sidebar-toggle::before { content: ''; width: 18px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; display: block; flex-shrink: 0; }
.sidebar-toggle::after { content: 'MENU'; font-size: 11px; font-weight: 600; letter-spacing: .2em; }
@media(max-width:760px) {
  .member-sidebar > .sidebar-toggle { width: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: #c6d5df; }
  .member-sidebar { border-bottom: 1px solid #263341; }
}
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .member-sidebar .sidebar-toggle { right: -40px; top: 12px; width: 78px; min-height: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid #34435380; border-radius: 22px; background: #101923ee; color: #bdd0db; box-shadow: 0 4px 16px #0002; transition: color .18s,border-color .18s,background .18s; }
  .member-sidebar .sidebar-toggle::before { width: 14px; height: 8px; }
  .member-sidebar .sidebar-toggle::after { content: 'MENU'; writing-mode: horizontal-tb; font-size: 10px; line-height: 1; letter-spacing: .15em; }
  .member-sidebar .sidebar-toggle:hover { color: #5ce0cc; border-color: #5ce0cc80; background: #142c30; }
  .member-layout { padding-left: 48px; }
}
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .member-sidebar .sidebar-toggle { width: 84px; right: -46px; top: -38px; min-height: 36px; height: 36px; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 10px; color: #94a9b8; }
  .member-sidebar .sidebar-toggle:hover { background: transparent; border-color: transparent; color: var(--teal); }
  .member-sidebar .sidebar-toggle::before { width: 16px; height: 7px; }
  .member-sidebar .sidebar-toggle::after { font-size: 10px; letter-spacing: .22em; }
}
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .member-sidebar .sidebar-toggle { opacity: 0; }
  .member-sidebar .sidebar-toggle:focus-visible { opacity: 1; }
}

.pitching-panel { margin-block: 16px; }
.pitching-settings { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 16px; }
.pitching-settings label { display: grid; gap: 8px; }
.pitching-phases { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; margin-block: 16px; }
.pitching-phases > div { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }

.lineup-rows { list-style: none; padding: 0; display: grid; gap: 10px; }
.lineup-rows li { display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.lineup-rows label { display: grid; gap: 6px; min-width: 0; }
.lineup-rows select { width: 100%; min-width: 0; }
.lineup-saved { display:flex; gap:8px; margin-top:12px; }
.lineup-panel summary { cursor:pointer; min-height:44px; }
@media(max-width:760px) { .lineup-rows li { grid-template-columns: 36px minmax(0,1fr); gap: 10px; } .lineup-rows li > label:nth-of-type(2) { grid-column:2; } .lineup-rows .score-actions { grid-column:2; } .lineup-saved { flex-wrap:wrap; } }

.ocr-preview { position: relative; width: 100%; margin-block:16px; background:#090f17; }
.ocr-preview canvas { width:100%; height:auto; display:block; }
.ocr-crop { position:absolute; border:2px solid var(--teal); background:#5ce0cc15; pointer-events:none; }
.ocr-crop-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-block:16px; }
.ocr-crop-controls label,.ocr-target,.ocr-text { display:grid; gap:8px; margin-block:12px; }
.ocr-text textarea { width:100%; min-height:120px; font:inherit; padding:12px; color:#e9eef4; background:#090f17; border:1px solid var(--border); }
.photo-reader .check { margin-block:16px; }
.clip-save-options { padding:14px; margin-bottom:12px; border:1px solid var(--border); border-radius:10px; }
.clip-save-options .trim-note { margin-bottom:0; }