
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#173f36;background:#f4f8f6}
*{box-sizing:border-box}body{margin:0;background:#f4f8f6;color:#173f36}button,a,select,textarea,input{font:inherit}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(247,250,248,.96);backdrop-filter:blur(12px);border-bottom:1px solid #d9e5df}
.brand{font-weight:900;letter-spacing:.12em;color:#176b57;text-decoration:none}.header-actions{display:flex;gap:8px;align-items:center}.header-actions a,.header-actions button{border:1px solid #bcd4ca;background:#fff;color:#176b57;padding:9px 12px;border-radius:13px;text-decoration:none;font-weight:850}
main{max-width:860px;margin:0 auto;padding:18px 14px 50px}.hero,.card{background:#fff;border:1px solid #dbe7e1;border-radius:22px;padding:20px;margin:14px 0;box-shadow:0 8px 26px rgba(20,69,58,.04)}
.hero{background:linear-gradient(180deg,#f9fcfa,#eef7f3)}.hero h1{font-size:34px;margin:6px 0}.hero p,.card p{line-height:1.62;color:#567168}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:900;color:#598176}.mode-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.mode-switch a{padding:10px 14px;border:1px solid #bcd4ca;border-radius:999px;text-decoration:none;color:#176b57;background:#fff;font-weight:850}.mode-switch a.active{background:#176b57;color:#fff}
h2{margin:7px 0 6px;font-size:24px}video{width:100%;max-height:60vh;background:#000;border-radius:16px}.video-head,.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:10px 0}.video-head button{border:1px solid #bcd4ca;background:#fff;color:#176b57;border-radius:10px;padding:7px 10px}.transport,.quick-range,.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.transport button,.quick-range button,.result-actions button,.marker button{border:1px solid #bcd4ca;background:#fff;color:#176b57;border-radius:12px;padding:10px 12px;font-weight:800}
.player-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.player-grid button{padding:16px;border:1px solid #bfd5cb;border-radius:15px;background:#fff;color:#176b57;font-weight:850}.player-grid button.active{background:#176b57;color:#fff;border-color:#176b57}.selected-line{padding:10px 0 4px}.field{display:block;margin-top:14px}.field span{display:block;font-size:13px;font-weight:850;color:#5b766e;margin-bottom:6px}.field select,.field textarea{width:100%;border:1px solid #c7d9d0;border-radius:13px;padding:12px;background:#fff;color:#173f36}
.marker-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.marker{padding:14px;border:1px solid #d7e4de;border-radius:16px}.marker span,.mini-label{display:block;font-size:12px;font-weight:900;color:#648078;letter-spacing:.03em}.marker strong{display:block;font-size:25px;margin:5px 0 10px}.primary{background:#176b57!important;color:#fff!important;border-color:#176b57!important}.wide{width:100%;padding:14px;border:0;border-radius:14px;font-size:17px;font-weight:900}.message{margin-top:10px;line-height:1.5;color:#6a5a2d}.progress{height:8px;background:#e6eeea;border-radius:99px;margin-top:12px;overflow:hidden}.progress>div{height:100%;width:0;background:#176b57;transition:width .2s}
.confidence{font-weight:900;font-size:21px}.summary-card,.focus-card,.drill-card,.camera-card{margin:14px 0;padding:16px;border-radius:17px;border:1px solid #dbe7e1;background:#f8fbf9}.focus-card,.drill-card{background:#edf8f2}.camera-card{background:#fffaf0}.summary-card h3,.focus-card h3,.drill-card h3{font-size:21px;line-height:1.48;margin:8px 0}.card li{margin:7px 0;line-height:1.55}.issue-card{margin:14px 0;padding:16px;border:1px solid #d7e4de;border-radius:17px}.issue-card h3{margin:6px 0 8px}.evidence{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.evidence span{background:#e9f4ef;padding:5px 8px;border-radius:999px;font-size:13px;font-weight:800}.issue-card p{margin:7px 0}.issue-card .why{color:#5f746e}.result-actions button{flex:1 1 180px}
@media(max-width:640px){.hero h1{font-size:30px}.marker-grid{grid-template-columns:1fr}.player-grid{grid-template-columns:1fr 1fr}}

/* v0.7b: custom file picker avoids duplicated native filename */
.file-picker-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.file-input-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.file-picker-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #b9d1c6;border-radius:13px;background:#fff;color:#176b57;font-weight:850;cursor:pointer}
.picked-file-name{min-width:0;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#42665c}
@media(max-width:640px){.picked-file-name{max-width:58%}}

/* v0.7c UI hotfix */
.frontend-version-badge{
  display:inline-flex;align-items:center;margin-left:8px;padding:3px 8px;
  border-radius:999px;background:#e8f4ef;color:#176b57;
  font-size:12px;font-weight:900;letter-spacing:.03em
}

/* v0.7d portrait-phone layout fix */
@media(max-width:640px){
  .video-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "name time"
      "change change";
    gap:8px 10px;
    align-items:center;
  }
  #sourceName{
    grid-area:name;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #timeReadout{
    grid-area:time;
    white-space:nowrap;
    font-size:14px;
  }
  #changeVideo{
    grid-area:change;
    justify-self:start;
  }
  .transport{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  .transport button{
    min-width:0;
    padding:10px 6px;
  }
}
@media(max-width:390px){
  .transport{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* v0.8 long-match segment manager */
.segments-list{display:grid;gap:10px;margin:12px 0}
.segment-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border:1px solid #d6e4de;border-radius:14px;background:#fff}
.segment-row strong{white-space:nowrap}.segment-row span{color:#607a72;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.segment-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.segment-actions button{flex:1 1 180px}
@media(max-width:640px){.segment-row{align-items:flex-start;flex-direction:column}.segment-actions button{flex-basis:100%}}

/* v0.8a balanced whole-match evidence */
.recurrence{margin:10px 0 6px;font-weight:850;color:#176b57}
.segment-evidence{margin:8px 0;padding:9px 11px;border:1px solid #d7e6df;border-radius:12px;background:#f8fbfa}
.segment-evidence strong{display:block;margin-bottom:6px;color:#506d64;font-size:13px}
.segment-evidence .evidence{margin:0}

/* v0.8b persistent match-review history */
.saved-match-list{display:grid;gap:10px;margin:14px 0}
.saved-match-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:13px 15px;border:1px solid #d7e6df;border-radius:14px;background:#fff;color:inherit}
.saved-match-row span{min-width:0}.saved-match-row strong{display:block}.saved-match-row small{display:block;margin-top:4px;color:#617970;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-match-row b{font-size:22px}.danger-lite{border-color:#e5c9c9;color:#8b3c3c;background:#fff}

/* v0.9 Evidence Review */
.evidence-review{margin:14px 0;padding:12px;border:1px solid #cfe0da;border-radius:14px;background:#fbfdfc}
.evidence-review-head{font-weight:900;color:#176b57;margin-bottom:8px}
.evidence-review-group{margin:8px 0}.evidence-review-group>strong{display:block;margin-bottom:6px;color:#58736a}
.evidence-review-item{display:grid;gap:8px;padding:9px 0;border-top:1px solid #e5eeea}
.evidence-play{width:max-content;max-width:100%;padding:9px 12px;border:1px solid #9bc5b7;border-radius:999px;background:#eef7f3;color:#155f4d;font-weight:850}
.evidence-feedback{display:flex;flex-wrap:wrap;gap:7px}
.evidence-feedback button{padding:7px 10px;border:1px solid #d3dfda;border-radius:999px;background:#fff;color:#49655b;font-weight:750}
.evidence-feedback button.active{background:#176b57;color:#fff;border-color:#176b57}
