/* AthleteVideoPlus — 短跑生物力学分析（荧光白浅色主题） */
:root{
  color-scheme: light;
  --bg:#f4f5ef; --panel:#ffffff; --panel2:#eef0e6; --line:#e3e7d4; --line2:#d3d8bd;
  --text:#1b1e12; --dim:#666d57; --dim2:#959c82;
  --acc:#5c8a00; --acc-dim:#4a6f00; --acc-soft:rgba(92,138,0,.10);
  --good:#3e8f1e; --warn:#b07d10; --bad:#cc332b; --blue:#1a6fd6; --orange:#d97706;
  --r:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,"MiSans","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d3d8bd;border-radius:4px}

#app{margin:0 auto;min-height:100vh;background:
  radial-gradient(1200px 500px at 80% -10%, rgba(200,241,79,.05), transparent 60%), var(--bg);
  position:relative}
#scr-home{max-width:520px;margin:0 auto;min-height:100vh}
.screen{min-height:100vh;padding-bottom:40px}

/* ============ 顶栏 ============ */
.topbar{display:flex;align-items:baseline;justify-content:space-between;padding:20px 22px 0}
.brand{font-size:15px;letter-spacing:.5px;color:var(--dim);font-weight:500}
.brand b{color:var(--text);font-weight:700}
.brand-sub{font-size:11px;color:var(--dim2);letter-spacing:1px}

.hero{font-size:36px;line-height:1.28;font-weight:800;letter-spacing:.5px;margin:26px 22px 6px;color:var(--text)}

/* ============ Tabs ============ */
.tabs{display:flex;gap:26px;padding:10px 22px 0;border-bottom:1px solid var(--line)}
.tab{font-size:16.5px;font-weight:700;color:var(--dim);padding:10px 2px 12px;position:relative}
.tab.active{color:var(--text)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;
  background:var(--acc);box-shadow:0 0 12px rgba(200,241,79,.55)}
.lead{margin:16px 22px 0;font-size:13.5px;color:var(--dim)}

/* ============ Sections ============ */
.sec{margin:20px 16px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-head .idx{color:var(--acc);font-size:12px;font-weight:700;letter-spacing:1px}
.sec-head b{font-size:15.5px}

/* mode cards */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{background:#f7f8f1;border:1px solid var(--line2);border-radius:14px;padding:15px 8px 13px;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.mode .m-t{font-size:16px;font-weight:700}
.mode .m-c{font-size:10px;letter-spacing:2px;color:var(--dim2)}
.mode.active{border-color:var(--acc);background:var(--acc-soft)}
.mode.active .m-c{color:var(--acc-dim)}

/* upload */
.drop{margin-top:12px;border:1.5px dashed rgba(200,241,79,.45);border-radius:16px;padding:26px 14px 22px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:.15s}
.drop.drag{background:var(--acc-soft);border-color:var(--acc)}
.drop .d-ico{color:var(--acc)}
.d-t{font-size:17px;font-weight:700;margin-top:2px}
.d-s{font-size:12.5px;color:var(--dim)}
.d-l{font-size:13.5px;color:var(--acc);font-weight:600;margin-top:6px}
.hint{font-size:11.5px;color:var(--dim2);text-align:center;margin-top:10px}
.linklike{display:block;margin:10px auto 0;font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.linklike:hover{color:var(--acc)}

.vready{margin-top:12px;border:1px solid var(--line2);border-radius:14px;padding:10px;display:flex;gap:12px;align-items:center}
.vready video{width:132px;height:88px;object-fit:cover;border-radius:10px;background:#000;flex:none}
.vr-info{flex:1;min-width:0}
.vr-info b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-info span{font-size:11.5px;color:var(--dim)}
.ghost-btn{font-size:12px;color:var(--dim);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;flex:none}
.ghost-btn:hover{color:var(--text);border-color:var(--dim)}
.ghost-btn.danger{color:var(--bad);border-color:rgba(255,107,107,.4)}

/* gender */
.gender-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.gbtn{border:1px solid var(--line2);border-radius:12px;padding:10px;font-size:14px;font-weight:600;color:var(--dim)}
.gbtn.active{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}

/* fields */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-top:12px}
.f-l{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--text);margin-bottom:7px}
.f-l i{font-style:normal;font-size:12px;color:var(--dim)}
.field input,.field select{width:100%;height:46px;background:#f7f8f1;border:1px solid var(--line2);border-radius:12px;
  color:var(--text);font-size:16px;padding:0 13px;outline:none}
.field input:focus,.field select:focus{border-color:var(--acc)}
.field select option{background:#ffffff;color:#1b1e12}
.field select option:checked,.field select option:hover{background:#eef0e6;color:#1b1e12}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.fnote{font-size:11.5px;color:var(--dim2);margin-top:7px}
.adv{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.adv summary{font-size:12.5px;color:var(--dim);cursor:pointer;list-style:none}
.adv summary::before{content:"⚙ ";color:var(--dim2)}

/* start */
.start-wrap{padding:18px 16px 8px}
.start{width:100%;height:54px;border-radius:14px;background:var(--acc);color:#fff;font-size:16.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:.15s;border:1px solid var(--acc-dim)}
.start span{font-size:18px}
.start:hover:not(:disabled){background:var(--acc-dim)}
.start:disabled{opacity:.4;cursor:not-allowed}

/* ============ 历史 ============ */
.arch-head{display:flex;justify-content:space-between;padding:22px 22px 0;font-size:10.5px;letter-spacing:2px;color:var(--dim2)}
.arch-title-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 22px 0}
.arch-title-row b{font-size:22px}
#arch-date{font-size:11px;color:var(--dim2)}
.empty{padding:30px 0 20px;text-align:center}
.empty .ghost{font-size:64px;font-weight:800;color:#e3e6d3;line-height:1}
.empty .e-t{font-size:19px;font-weight:700;margin-top:14px}
.empty .e-s{font-size:12.5px;color:var(--dim);margin-top:6px}
.pill{margin-top:16px;background:var(--acc);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:11px 24px}
.pill:hover{filter:brightness(1.06)}

.hist-list{padding:16px 16px 0;display:flex;flex-direction:column;gap:12px}
.hcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.hcard .h-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hcard .h-date{font-size:12px;color:var(--dim)}
.hbadge{font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--dim)}
.hbadge.maxv{color:var(--acc);border-color:rgba(200,241,79,.4)}
.hbadge.accel{color:var(--orange);border-color:rgba(255,165,61,.4)}
.hscore{margin-left:auto;font-size:20px;font-weight:800}
.hscore.g{color:var(--good)}.hscore.w{color:var(--warn)}.hscore.b{color:var(--bad)}
.hmetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 10px}
.hm{background:#f5f6ee;border-radius:10px;padding:7px 4px;text-align:center}
.hm i{display:block;font-style:normal;font-size:10px;color:var(--dim2)}
.hm b{font-size:13px}
.hactions{display:flex;gap:8px}
.hactions button{flex:1;font-size:12.5px;border:1px solid var(--line2);border-radius:10px;padding:8px 0;color:var(--dim)}
.hactions button:hover{color:var(--text);border-color:var(--dim)}
.hactions button.primary{background:var(--acc-soft);border-color:rgba(200,241,79,.4);color:var(--acc);font-weight:600}
.hdel{flex:0 0 40px;color:var(--dim2)}
.hdel:hover{color:var(--bad)}

/* ============ 分析页 ============ */
#scr-analysis{max-width:none}
.abar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(244,245,239,.92);backdrop-filter:blur(8px);z-index:20}
.ab-title{flex:1;text-align:center;font-weight:700;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);font-size:18px;color:var(--dim);flex:none}
.icon-btn:hover{color:var(--text);border-color:var(--dim)}
.badge{font-size:11px;color:#fff;background:var(--acc);padding:2px 10px;border-radius:999px;font-weight:700}

.an-body{display:grid;grid-template-columns:1fr;max-width:1280px;margin:0 auto;gap:18px;padding:16px}
@media(min-width:1020px){
  .an-body{grid-template-columns:minmax(0,7fr) minmax(360px,5fr);align-items:start}
  #scr-analysis .abar{max-width:1280px;margin:0 auto}
}
.video-col{min-width:0}
.video-wrap{position:relative;background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
#player{display:block;width:100%;height:100%;object-fit:contain;background:#000}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hud{position:absolute;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap;z-index:5}
.hud span{background:rgba(10,12,8,.72);border:1px solid rgba(200,241,79,.25);color:#e6ffb0;font-size:11.5px;
  padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.hud span.hot{color:#c8f14f;border-color:#c8f14f}

.ctrlbar{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;gap:9px;z-index:6}
.cbtn{width:42px;height:42px;border-radius:50%;background:rgba(15,17,12,.78);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:15px;backdrop-filter:blur(6px)}
.cbtn:hover{border-color:var(--acc);color:var(--acc)}
.cbtn.wide{width:auto;border-radius:999px;padding:0 16px;font-weight:700;font-size:13px}
.ctime{position:absolute;right:12px;bottom:2px;font-size:10.5px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}

.timeline{position:relative;padding:10px 14px 12px;background:rgba(240,242,230,.92)}
.ribbon{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line2);margin-bottom:6px}
.ribbon i{display:block;height:100%}
#scrub{width:100%;appearance:none;height:16px;background:transparent;margin:0}
#scrub::-webkit-slider-runnable-track{height:4px;background:#d3d8bd;border-radius:2px}
#scrub::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);margin-top:-5px;
  box-shadow:0 0 8px rgba(200,241,79,.6)}

/* scan overlay */
.scan-overlay{position:absolute;inset:0;background:rgba(244,245,239,.92);display:flex;align-items:center;justify-content:center;z-index:30;backdrop-filter:blur(3px)}
.scan-card{width:min(400px,84%);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:22px;text-align:center}
.scan-t{font-size:15.5px;font-weight:700;margin-bottom:14px}
.progress{height:8px;background:#d3d8bd;border-radius:4px;overflow:hidden}
#scan-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--acc-dim),var(--acc));border-radius:4px;transition:width .2s}
.scan-s{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:8px;font-variant-numeric:tabular-nums}
.scan-tip{font-size:11px;color:var(--dim2);margin-top:10px}
.scan-card .ghost-btn{margin-top:14px}

/* keyframes */
.kf-strip{margin-top:12px}
.kf-title{font-size:12px;color:var(--dim);letter-spacing:1px;margin-bottom:8px}
.kf-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.kf{flex:none;width:150px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--panel)}
.kf img{display:block;width:100%;height:86px;object-fit:cover;cursor:pointer}
.kf .kf-l{font-size:10.5px;color:var(--dim);padding:5px 8px;display:flex;justify-content:space-between}
.kf .kf-l b{color:var(--acc);font-weight:600}

/* ============ 报告 ============ */
.report{display:flex;flex-direction:column;gap:14px;min-width:0}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.rcard h3{margin:0 0 12px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.rcard h3 .sub{font-size:10.5px;color:var(--dim2);letter-spacing:1.5px;font-weight:500}
.verdict-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.vd{font-size:19px;font-weight:800}
.vd-tag{font-size:11px;color:var(--acc);border:1px solid rgba(200,241,79,.4);border-radius:999px;padding:3px 12px}
.score-ring{margin-left:auto;text-align:center}
.score-ring b{font-size:30px;font-weight:800}
.score-ring i{display:block;font-style:normal;font-size:10px;color:var(--dim);letter-spacing:1px}
.score-g{color:var(--good)}.score-w{color:var(--warn)}.score-b{color:var(--bad)}
.vd-note{width:100%;font-size:12px;color:var(--dim)}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.mgrid{grid-template-columns:repeat(2,1fr)}}
.mtile{background:#f5f6ee;border:1px solid var(--line);border-radius:13px;padding:12px 10px 10px}
.mtile i{display:block;font-style:normal;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtile b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.mtile b s{text-decoration:none;font-size:11px;color:var(--dim);font-weight:500;margin-left:2px}
.mtile .delta{font-size:10.5px;margin-top:2px}
.mtile .delta.g{color:var(--good)}.mtile .delta.w{color:var(--warn)}.mtile .delta.b{color:var(--bad)}

.ctable{width:100%;border-collapse:collapse;font-size:12.5px}
.ctable th{font-size:10.5px;color:var(--dim2);letter-spacing:1px;text-align:right;font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.ctable th:first-child,.ctable td:first-child{text-align:left}
.ctable td{padding:7px 6px;text-align:right;border-bottom:1px solid rgba(27,30,18,.08);font-variant-numeric:tabular-nums}
.ctable tr:last-child td{border-bottom:none}
.ctable .cname{color:var(--text);font-weight:600}
.ctable .cmp-champ{color:var(--acc)}
.ctable .diff{font-weight:700}
.ctable .diff.g{color:var(--good)}.ctable .diff.w{color:var(--warn)}.ctable .diff.b{color:var(--bad)}
.rate{font-size:10px;border-radius:999px;padding:1px 7px}
.rate.g{background:rgba(126,224,129,.14);color:var(--good)}
.rate.w{background:rgba(242,193,78,.14);color:var(--warn)}
.rate.b{background:rgba(255,107,107,.14);color:var(--bad)}

.chart-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.chart-tabs button{font-size:11.5px;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:5px 12px}
.chart-tabs button.active{color:var(--acc);border-color:var(--acc);background:var(--acc-soft)}
.chart-box canvas{width:100%;height:230px;display:block}
.chart-note{font-size:10.5px;color:var(--dim2);margin-top:6px}

.ang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ang-item{background:#f5f6ee;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ang-item i{font-style:normal;font-size:11px;color:var(--dim);display:block}
.ang-item b{font-size:17px;font-variant-numeric:tabular-nums}
.ang-item b s{text-decoration:none;font-size:10.5px;color:var(--dim)}
.ang-item .ref{font-size:10px;color:var(--acc-dim);display:block;margin-top:1px}

.sug{display:flex;gap:10px;padding:10px 2px;border-bottom:1px dashed var(--line)}
.sug:last-child{border-bottom:none}
.sug .dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px}
.sug.g .dot{background:var(--good)}.sug.w .dot{background:var(--warn)}.sug.b .dot{background:var(--bad)}
.sug .s-t{font-size:13.5px;font-weight:700}
.sug .s-d{font-size:12px;color:var(--dim)}
.sug .s-r{font-size:10.5px;color:var(--acc-dim);margin-top:2px}

.exp-row{display:flex;gap:10px}
.exp-row button{flex:1;height:46px;border-radius:12px;border:1px solid var(--line2);font-size:13.5px;font-weight:600;color:var(--dim)}
.exp-row button:hover{color:var(--text);border-color:var(--dim)}
.exp-row button.primary{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700}

.method{font-size:10.5px;color:var(--dim2);line-height:1.7}

/* toast */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:#20261a;color:#e6ffb0;
  border:1px solid rgba(200,241,79,.4);border-radius:12px;padding:10px 18px;font-size:13px;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* ================= 视频叠加导出 ================= */
.cbtn.primary-sm{border-color:rgba(126,188,0,.55);color:#b8e04a}
.cbtn.primary-sm:disabled{opacity:.4;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.cbtn.ol-active{border-color:var(--acc);color:var(--acc)}
.ol-layers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2px 0 14px}
.ol-layers label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);
  border:1px solid var(--line2);border-radius:999px;padding:6px 12px;cursor:pointer;user-select:none}
.ol-layers label:has(input:checked){color:var(--acc);border-color:var(--acc);background:var(--acc-soft)}
.ol-layers input{accent-color:var(--acc);margin:0}
.exp-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.primary-btn{background:var(--acc);color:#fff;border:none;border-radius:12px;padding:10px 22px;
  font-size:13.5px;font-weight:700;cursor:pointer}
.primary-btn:hover{filter:brightness(1.08)}

/* 实时播放旁的叠加显示选择 */
.live-layers{margin:10px 0 4px}
.live-layers .ll-t{font-size:12px;color:var(--dim);align-self:center;margin-right:2px}