/* ============================================================
   羽教工作台 · Badminton Coach Lab — 复刻版样式
   设计令牌取自原站 :root CSS 变量
   ============================================================ */
:root {
  --background: hsl(45 11% 96%);
  --foreground: hsl(160 12% 12%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(160 12% 12%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(160 12% 12%);
  --primary: hsl(164 52% 24%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(45 10% 93%);
  --secondary-foreground: hsl(164 40% 20%);
  --muted: hsl(45 10% 93%);
  --muted-foreground: hsl(160 5% 42%);
  --accent: hsl(150 30% 93%);
  --accent-foreground: hsl(164 52% 22%);
  --destructive: hsl(8 62% 44%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(40 8% 88%);
  --input: hsl(40 8% 86%);
  --ring: hsl(164 52% 24%);
  --radius: 0.625rem;
  --sidebar-bg: hsl(0 0% 100%);
  --sidebar-fg: hsl(160 8% 30%);
  --sidebar-accent: hsl(150 30% 94%);
  --sidebar-border: hsl(40 8% 90%);

  /* 动作配色 */
  --c-gy: hsl(160 55% 27%);   /* 高远球 绿 */
  --c-sq: hsl(10 55% 45%);    /* 杀球 红 */
  --c-dy: hsl(222 48% 46%);   /* 吊球 蓝 */
  --c-cq: hsl(52 62% 33%);    /* 网前搓球 橄榄 */
  --c-ft: hsl(268 38% 52%);   /* 防守挑球/挑球 紫 */
  --c-fq: hsl(336 62% 47%);   /* 发球 玫红 */
  --c-pt: hsl(186 45% 36%);   /* 平抽 青 */

  --shadow-card: 0 1px 2px rgba(20, 30, 25, 0.05), 0 1px 6px rgba(20, 30, 25, 0.04);
  --shadow-pop: 0 10px 40px rgba(15, 25, 20, 0.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  --background: hsl(160 10% 8%);
  --foreground: hsl(150 10% 90%);
  --card: hsl(160 9% 12%);
  --card-foreground: hsl(150 10% 90%);
  --popover: hsl(160 9% 13%);
  --popover-foreground: hsl(150 10% 90%);
  --primary: hsl(160 42% 42%);
  --primary-foreground: hsl(160 30% 8%);
  --secondary: hsl(160 7% 18%);
  --secondary-foreground: hsl(150 20% 80%);
  --muted: hsl(160 7% 17%);
  --muted-foreground: hsl(150 6% 62%);
  --accent: hsl(160 15% 18%);
  --accent-foreground: hsl(150 30% 85%);
  --border: hsl(160 7% 22%);
  --input: hsl(160 7% 24%);
  --ring: hsl(160 42% 42%);
  --sidebar-bg: hsl(160 9% 10%);
  --sidebar-fg: hsl(150 8% 70%);
  --sidebar-accent: hsl(160 15% 18%);
  --sidebar-border: hsl(160 7% 20%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 10px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0; }
p { margin: 0; }
.hidden { display: none !important; }

/* ---------------- 布局骨架 ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 256px; flex: 0 0 256px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, hsl(164 52% 26%), hsl(164 55% 18%));
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 3px 8px hsl(164 52% 24% / 0.35);
}
.brand-name { font-weight: 700; font-size: 16px; }
.brand-sub { font-size: 11px; color: var(--muted-foreground); letter-spacing: 0.02em; }

.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: transparent; border: none; text-align: left;
  color: var(--sidebar-fg); position: relative;
  transition: background 0.15s;
}
.side-nav-item:hover { background: var(--accent); }
.side-nav-item.active { background: var(--accent); color: var(--accent-foreground); }
.side-nav-item.active::after {
  content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 22px; border-radius: 4px; background: var(--primary);
}
.nav-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--secondary); display: grid; place-items: center; color: var(--secondary-foreground);
}
.side-nav-item.active .nav-ico { background: var(--primary); color: var(--primary-foreground); }
.nav-t1 { font-weight: 600; font-size: 14px; }
.nav-t2 { font-size: 11px; opacity: 0.75; }

.side-spacer { flex: 1; }

.week-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.week-card-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.week-card-top .num { color: var(--primary); font-weight: 700; }
.progress-track { height: 7px; border-radius: 99px; background: var(--muted); margin: 9px 0 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), hsl(160 45% 38%)); width: 0%; transition: width 0.4s; }
.week-card-note { font-size: 11px; color: var(--muted-foreground); }

.user-card {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--sidebar-border); padding-top: 12px;
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--secondary); display: grid; place-items: center; color: var(--secondary-foreground);
}
.user-name { font-weight: 600; font-size: 13px; }
.user-sub { font-size: 11px; color: var(--muted-foreground); }
.btn-login-sync {
  margin-left: auto; border: none; border-radius: 9px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 12px; font-weight: 600; padding: 7px 11px;
}
.btn-login-sync:hover { filter: brightness(1.08); }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; padding: 26px 34px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page-foot { text-align: center; font-size: 11.5px; color: var(--muted-foreground); padding: 18px 12px 26px; }

/* 移动端头部（桌面隐藏） */
.mobile-header { display: none; }

/* ---------------- 通用组件 ---------------- */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--card); color: var(--card-foreground);
  font-size: 13px; font-weight: 600; padding: 9px 14px;
  transition: transform 0.05s, background 0.15s, filter 0.15s;
  text-decoration: none;
}
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary); filter: brightness(1.1); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--accent); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600;
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid transparent;
}
.chip.green { background: hsl(150 45% 92%); color: hsl(160 55% 25%); }
.chip.amber { background: hsl(45 80% 92%); color: hsl(35 70% 35%); }
.chip.red { background: hsl(8 70% 94%); color: hsl(8 62% 40%); }
.chip.blue { background: hsl(215 70% 93%); color: hsl(218 55% 38%); }
.chip.plain { background: var(--secondary); color: var(--secondary-foreground); }
[data-theme="dark"] .chip.green { background: hsl(160 40% 18%); color: hsl(150 40% 70%); }
[data-theme="dark"] .chip.amber { background: hsl(40 40% 18%); color: hsl(45 70% 65%); }
[data-theme="dark"] .chip.red { background: hsl(8 40% 20%); color: hsl(10 80% 70%); }
[data-theme="dark"] .chip.blue { background: hsl(218 40% 20%); color: hsl(215 80% 72%); }

.badge-demo {
  display: inline-flex; align-items: center; border-radius: 8px;
  background: hsl(42 85% 90%); color: hsl(35 75% 32%);
  font-size: 12px; font-weight: 600; padding: 3px 9px; white-space: nowrap;
}
[data-theme="dark"] .badge-demo { background: hsl(42 50% 18%); color: hsl(45 80% 65%); }

.seg {
  display: inline-flex; background: var(--muted); border-radius: 12px; padding: 4px; gap: 2px;
}
.seg button {
  border: none; background: transparent; border-radius: 9px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--muted-foreground);
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button.active { background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-card); }

.meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--secondary); border-radius: 9px; padding: 5px 11px;
  font-size: 12.5px; color: var(--secondary-foreground);
}

/* 统计卡 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow-card);
}
.stat-num { font-size: 34px; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--muted-foreground); margin-top: 4px; }

/* 区块标题 */
.sec-title { font-size: 21px; font-weight: 800; letter-spacing: 0.01em; }
.sec-sub { color: var(--muted-foreground); font-size: 13.5px; margin-top: 5px; }

/* 上传区 */
.upload-card { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 340px; }
.upload-zone {
  margin: 18px; border: 2px dashed var(--input); border-radius: 14px;
  min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 28px; transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--accent); }
.upload-ico {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-foreground); display: grid; place-items: center;
}
.upload-t { font-weight: 700; font-size: 15px; }
.upload-d { color: var(--muted-foreground); font-size: 13px; max-width: 420px; }

.recent-panel { margin: 18px 18px 18px 0; }
.recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.recent-head h3 { font-size: 15px; }
.recent-head button { border: none; background: none; color: var(--muted-foreground); font-size: 12.5px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.recent-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.recent-item:hover { background: var(--accent); }
.recent-del {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--muted-foreground);
  font-size: 13px; cursor: pointer; background: none; border: none; padding: 0;
}
.recent-del:hover { background: hsl(8 70% 95%); color: var(--destructive); }
[data-theme="dark"] .recent-del:hover { background: hsl(8 40% 22%); }
.recent-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--secondary); display: grid; place-items: center; color: var(--secondary-foreground); flex: none; }
.recent-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.recent-meta { font-size: 11.5px; color: var(--muted-foreground); }

/* 分析进行面板 */
.analyze-panel { padding: 16px 18px; margin-top: 18px; }
.analyze-head { display: flex; align-items: center; gap: 12px; }
.analyze-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--accent-foreground); display: grid; place-items: center; flex: none; }
.analyze-fname { font-weight: 700; font-size: 15px; word-break: break-all; }
.analyze-close { margin-left: auto; border: none; background: none; color: var(--muted-foreground); font-size: 20px; padding: 4px 8px; border-radius: 8px; }
.analyze-close:hover { background: var(--muted); }
.tabs-line { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.tab-pill {
  border: 1px solid var(--border); background: var(--card); border-radius: 11px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted-foreground);
}
.tab-pill.active { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); margin: 12px 0 6px; display: block; }
.mode-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-chip {
  border: 1px solid var(--border); background: var(--card); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted-foreground);
}
.mode-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* 本地追踪区域 2×2 迷你球场 */
.roi-grid {
  display: grid; grid-template-columns: repeat(2, 64px);
  border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
  flex: none;
}
.roi-cell {
  height: 44px; border: none; background: var(--card); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; font-size: 10.5px; color: var(--muted-foreground); line-height: 1.25;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  padding: 0;
}
.roi-cell:nth-child(1), .roi-cell:nth-child(2) { border-top: none; }
.roi-cell:nth-child(odd) { border-left: none; }
.roi-cell:nth-child(-n+2) { border-bottom: 2px solid hsl(42 85% 58%); }   /* 球网分隔线 */
.roi-cell b { font-size: 12px; font-weight: 700; }
.roi-cell.active { background: var(--primary); color: var(--primary-foreground); }
.text-input {
  width: 100%; border: 1px solid var(--input); background: var(--card); color: var(--card-foreground);
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
}
.text-input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.pose-stage { position: relative; background: #000; border-radius: 12px; overflow: hidden; margin-top: 12px; aspect-ratio: 16 / 9; }
.pose-stage video, .pose-stage canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pose-status {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  background: rgba(10, 14, 12, 0.62); color: #fff; border-radius: 9px;
  font-size: 12.5px; padding: 5px 10px; display: flex; align-items: center; gap: 7px;
  backdrop-filter: blur(4px);
}
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-card { margin-top: 14px; }
.progress-label { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.progress-time { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-foreground); margin: 8px 0 6px; }
.info-banner {
  display: flex; gap: 9px; align-items: flex-start;
  background: hsl(205 70% 95%); color: hsl(207 60% 30%);
  border: 1px solid hsl(205 60% 86%); border-radius: 12px; padding: 10px 13px;
  font-size: 13px; margin: 12px 0;
}
[data-theme="dark"] .info-banner { background: hsl(207 40% 16%); border-color: hsl(207 35% 26%); color: hsl(205 60% 78%); }
.warn-banner {
  background: hsl(45 80% 93%); color: hsl(38 70% 32%); border: 1px solid hsl(45 70% 84%);
}
[data-theme="dark"] .warn-banner { background: hsl(40 45% 17%); border-color: hsl(40 40% 28%); color: hsl(45 75% 68%); }

/* 报告头部 */
.report-top { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; margin: 14px 0 6px; }
.report-top .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.report-top .stat-card { padding: 16px 18px; }
.report-top .stat-num { font-size: 28px; }
.crumb { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-foreground); font-size: 13px; background: none; border: none; padding: 0; }
.crumb:hover { color: var(--foreground); }
.report-h1 { font-size: 25px; font-weight: 800; margin: 8px 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-summary { color: var(--muted-foreground); font-size: 14px; max-width: 720px; }
.report-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.view-switcher {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; margin: 22px 0; flex-wrap: wrap;
}
.vs-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vs-label { font-weight: 700; font-size: 14px; }

/* 动作模式汇总卡片 */
.shot-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.shot-card {
  border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px 15px;
  background: var(--card); position: relative; overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
}
.shot-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--shot-color, var(--primary)); }
.shot-top { display: flex; justify-content: space-between; align-items: center; }
.shot-count-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--secondary); color: var(--secondary-foreground); }
.shot-name { font-weight: 700; margin-top: 8px; font-size: 14px; }
.shot-num { font-size: 34px; font-weight: 800; color: var(--shot-color, var(--primary)); line-height: 1.15; }
.shot-sub { font-size: 11.5px; color: var(--muted-foreground); }
.shot-bar { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; margin: 9px 0 12px; }
.shot-bar i { display: block; height: 100%; background: var(--shot-color); border-radius: 99px; }
.shot-actions { display: flex; flex-direction: column; gap: 6px; }
.shot-actions .btn { justify-content: flex-start; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.shot-actions .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* 汇总表格 */
.tbl-wrap { overflow-x: auto; margin-top: 18px; }
table.data-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.data-tbl th {
  text-align: left; font-size: 12.5px; color: var(--muted-foreground); font-weight: 600;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--muted);
  white-space: nowrap;
}
.data-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-tbl tr:last-child td { border-bottom: none; }
.data-tbl .act-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--shot-color); }

/* 球路 + 落点 双栏 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.panel { padding: 18px; }
.panel h3 { font-size: 15.5px; }
.panel .desc { font-size: 12.5px; color: var(--muted-foreground); margin: 5px 0 12px; }
.court-wrap { background: hsl(150 25% 92%); border-radius: 12px; padding: 12px; display: grid; place-items: center; }
[data-theme="dark"] .court-wrap { background: hsl(160 15% 15%); }
.court-svg text { font-size: 11px; fill: var(--muted-foreground); }
.land-row { margin-bottom: 12px; }
.land-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.land-top b { font-weight: 700; }
.land-top .pct { font-weight: 700; color: var(--land-color, var(--primary)); }
.land-track { height: 9px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.land-track i { display: block; height: 100%; border-radius: 99px; background: var(--land-color, var(--primary)); }
.land-insight {
  margin-top: 12px; font-size: 12.5px; color: var(--muted-foreground);
  background: var(--muted); border-radius: 10px; padding: 9px 12px;
}
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chip {
  border: 1px solid var(--border); background: var(--card); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
}
.filter-chip.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* 球速分布 */
.speed-flex { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-top: 24px; }
.hist { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 8px 4px 0; }
.hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hist-n { font-size: 12px; font-weight: 700; }
.hist-bar { width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--primary), hsl(160 45% 38%)); min-height: 4px; }
.hist-l { font-size: 11px; color: var(--muted-foreground); }
.hist-max { font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }
.hist-max b { color: var(--foreground); font-size: 20px; font-weight: 800; margin-right: 6px; }
.mini-stats { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.mini-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.mini-stat .l { font-size: 12px; color: var(--muted-foreground); }
.mini-stat .v { font-size: 19px; font-weight: 800; }
.mini-stat .s { font-size: 11.5px; color: var(--muted-foreground); }

/* 回合时间轴 */
.tl-game { margin-bottom: 16px; }
.tl-game-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.tl-game-head b { font-size: 14px; }
.tl-game-head span { color: var(--muted-foreground); font-size: 12px; }
.tl-strip { display: flex; gap: 2px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--muted); }
.tl-seg { height: 100%; min-width: 3px; }
.tl-ruler { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-foreground); margin-top: 4px; }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; }
.tl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* 问题卡片 */
.problems-head { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px; flex-wrap: wrap; }
.problem-card { padding: 16px 18px; margin-top: 14px; }
.problem-body { display: grid; grid-template-columns: 400px 1fr; gap: 20px; }
.pk-frame {
  position: relative; border-radius: 12px; overflow: hidden; background: #0c1210;
  aspect-ratio: 16 / 9; display: grid; place-items: center;
}
.pk-frame img, .pk-frame canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.pk-badges { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pk-badge { background: rgba(8, 12, 10, 0.6); color: #d9ffe9; font-size: 11px; border-radius: 6px; padding: 2px 7px; width: max-content; backdrop-filter: blur(3px); }
.pk-corner { position: absolute; right: 8px; top: 8px; background: rgba(8,12,10,0.6); color: #9fe8c2; font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.pk-bottom { position: absolute; left: 8px; bottom: 8px; background: rgba(8,12,10,0.6); color: #fff; font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.problem-info .p-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.problem-info h3 { font-size: 17px; margin: 8px 0 10px; }
.p-sec { margin-bottom: 10px; }
.p-sec .l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.p-sec .t { color: var(--muted-foreground); font-size: 13.5px; }
.p-fix {
  border-left: 3px solid var(--primary); background: var(--accent);
  border-radius: 0 10px 10px 0; padding: 9px 12px; font-size: 13.5px;
}
.problem-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 水平判定 */
.level-sec { margin-top: 28px; }
.level-card {
  margin-top: 12px; border-radius: 18px; padding: 22px 24px;
  background: linear-gradient(160deg, hsl(45 75% 93%), hsl(42 85% 88%));
  border: 1px solid hsl(43 60% 82%);
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
}
[data-theme="dark"] .level-card { background: linear-gradient(160deg, hsl(42 30% 16%), hsl(40 35% 12%)); border-color: hsl(43 30% 28%); }
.medal-ico { width: 74px; height: 74px; }
.level-grade { font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-tag { font-size: 12px; background: hsl(35 80% 55%); color: #fff; border-radius: 8px; padding: 2px 9px; font-weight: 700; }
.level-desc { color: hsl(35 30% 35%); font-size: 13.5px; margin-top: 6px; max-width: 560px; }
[data-theme="dark"] .level-desc { color: hsl(40 25% 70%); }
.advice-box {
  margin-top: 12px; background: hsl(0 0% 100% / 0.75); border: 1px solid hsl(43 55% 80%);
  border-radius: 12px; padding: 10px 14px; font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start;
}
[data-theme="dark"] .advice-box { background: hsl(0 0% 100% / 0.06); }
.score-ring { width: 74px; height: 74px; position: relative; display: grid; place-items: center; }
.score-ring svg { position: absolute; inset: 0; }
.score-ring .v { font-weight: 800; font-size: 20px; }
.score-ring .u { position: absolute; bottom: 10px; font-size: 9px; color: var(--muted-foreground); }
.level-src { font-size: 11px; color: var(--muted-foreground); text-align: right; margin-top: 10px; }

/* 弹窗 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 14, 12, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: var(--card); color: var(--card-foreground);
  border-radius: 18px; box-shadow: var(--shadow-pop);
  width: 100%; max-width: 460px; padding: 22px; position: relative;
  max-height: 88vh; overflow: auto;
}
.modal-wide { max-width: 720px; }
.modal-x {
  position: absolute; right: 14px; top: 14px; border: none; background: none;
  font-size: 20px; color: var(--muted-foreground); padding: 4px 8px; border-radius: 8px;
}
.modal-x:hover { background: var(--muted); }
.modal h3 { font-size: 18px; }
.modal .sub { color: var(--muted-foreground); font-size: 13px; margin-top: 6px; }
.field-label { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; display: block; }
.input-wrap { position: relative; }
.input-wrap .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.input-wrap input { padding-left: 34px; }
.clip-title { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.clip-stage { background: #000; border-radius: 12px; overflow: hidden; }
.clip-stage video { width: 100%; max-height: 60vh; display: block; background: #000; }
.it-img { border-radius: 12px; width: 100%; display: block; background: #000; }
.help-sec { margin-top: 14px; }
.help-sec h4 { font-size: 14px; margin-bottom: 6px; display: flex; gap: 7px; align-items: center; }
.help-sec p, .help-sec li { font-size: 13px; color: var(--muted-foreground); }
.help-sec ul { margin: 4px 0; padding-left: 18px; }

/* 通知 */
.notif-pop {
  position: fixed; z-index: 60; width: 300px; max-height: 380px; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 8px;
}
.notif-item { padding: 9px 11px; border-radius: 10px; font-size: 13px; }
.notif-item:hover { background: var(--muted); }
.notif-item .t { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.notif-empty { text-align: center; color: var(--muted-foreground); font-size: 12.5px; padding: 18px 8px; }

/* 浮动按钮 */
.fab-stack {
  position: fixed; right: 18px; bottom: 84px; z-index: 40;
  display: none; flex-direction: column; gap: 10px;
}
.fab {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-card);
  display: grid; place-items: center;
}
.fab:active { transform: scale(0.95); }
.help-fab {
  position: fixed; right: 18px; bottom: 22px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 6px 18px hsl(164 52% 24% / 0.4); font-size: 19px; font-weight: 700;
}
.upload-menu {
  position: fixed; z-index: 60; width: 190px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 6px; display: none;
}
.upload-menu.open { display: block; }
.upload-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: none; padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--card-foreground); text-align: left;
}
.upload-menu button:hover { background: var(--accent); }

/* Toast */
.toast-root { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 460px); }
.toast {
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow-pop); padding: 11px 15px; font-size: 13.5px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast.ok { border-left: 4px solid var(--primary); }
.toast.err { border-left: 4px solid var(--destructive); }
.toast.info { border-left: 4px solid hsl(210 60% 50%); }
.toast .tt { font-weight: 700; }
.toast .td { color: var(--muted-foreground); font-size: 12.5px; margin-top: 2px; }

/* ---------------- 训练计划 ---------------- */
.plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.plan-config { padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cfg-block .cfg-title { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); font-size: 16px; font-weight: 700; color: var(--card-foreground);
}
.stepper .v { font-size: 20px; font-weight: 800; min-width: 26px; text-align: center; }
.stepper .u { color: var(--muted-foreground); font-size: 12.5px; }
.focus-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.focus-chip {
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}
.focus-chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.plan-week-head { display: flex; align-items: baseline; gap: 14px; margin: 26px 0 4px; flex-wrap: wrap; }
.plan-week-head .btn { margin-left: auto; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 14px; }
.day-card {
  border: 1px solid var(--border); border-radius: 15px; background: var(--card);
  padding: 12px 12px 13px; position: relative; overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 8px;
}
.day-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3.5px; background: var(--day-color, var(--primary)); }
.day-head { display: flex; justify-content: space-between; align-items: baseline; }
.day-name { font-weight: 800; font-size: 14.5px; }
.day-date { font-size: 11.5px; color: var(--muted-foreground); }
.day-type { font-size: 11.5px; font-weight: 700; color: var(--day-color, var(--primary)); }
.ex-item { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; background: none; border: none; padding: 4px 2px; border-radius: 8px; }
.ex-item:hover { background: var(--muted); }
.ex-check {
  width: 17px; height: 17px; border-radius: 50%; border: 1.8px solid var(--input); flex: none; margin-top: 2px;
  display: grid; place-items: center; color: transparent; font-size: 11px;
}
.ex-item.done .ex-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.ex-item .ex-name { font-weight: 600; font-size: 12.8px; }
.ex-item.done .ex-name { text-decoration: line-through; color: var(--muted-foreground); }
.ex-item .ex-sets { font-size: 11px; color: var(--muted-foreground); }
.rest-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted-foreground); font-size: 12.5px; padding: 14px 0; }
.lib-tabs { margin: 8px 0 14px; }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.lib-card { padding: 14px 15px; }
.lib-row1 { display: flex; justify-content: space-between; margin-bottom: 8px; }
.lib-name { font-size: 15px; font-weight: 700; }
.lib-focus { font-size: 12px; color: var(--muted-foreground); margin: 3px 0 10px; }
.lib-sets { font-weight: 700; font-size: 13.5px; }
.lib-duration { position: absolute; right: 15px; top: 44px; font-size: 12px; color: var(--muted-foreground); }
.lib-flames { margin: 8px 0 4px; font-size: 12px; letter-spacing: 2px; }
.lib-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.lib-tag { font-size: 11px; background: hsl(45 70% 92%); color: hsl(38 65% 34%); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
[data-theme="dark"] .lib-tag { background: hsl(40 35% 17%); color: hsl(45 70% 62%); }
.lib-tip { font-size: 12.3px; color: var(--muted-foreground); border-top: 1px dashed var(--border); padding-top: 8px; }
.lib-card { position: relative; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .shot-cards { grid-template-columns: repeat(3, 1fr); }
  .week-grid { grid-template-columns: repeat(4, 1fr); }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .report-top { grid-template-columns: 1fr; }
  .speed-flex { grid-template-columns: 1fr; }
  .problem-body { grid-template-columns: 1fr; }
  .upload-card { grid-template-columns: 1fr; }
  .recent-panel { margin: 0 18px 18px; }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header {
    display: block; position: sticky; top: 0; z-index: 30;
    background: var(--background);
  }
  .mh-row1 { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
  .mh-row1 .brand-logo { width: 34px; height: 34px; }
  .mh-title { font-weight: 800; font-size: 16.5px; }
  .btn-login-sync.mh-login { margin-left: auto; background: var(--secondary); color: var(--secondary-foreground); }
  .mobile-tabs { display: flex; gap: 8px; padding: 2px 14px 10px; }
  .mobile-tabs .mtab {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; border-radius: 11px; padding: 8px 15px; font-size: 13.5px; font-weight: 700;
    background: var(--card); color: var(--muted-foreground); border: 1px solid var(--border);
  }
  .mobile-tabs .mtab.active { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }
  main { padding: 4px 14px 120px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-num { font-size: 26px; }
  .plan-config { grid-template-columns: 1fr; gap: 16px; }
  .plan-stats { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .week-grid { grid-template-columns: repeat(2, 1fr); }
  .fab-stack.on { display: flex; }
  .duo { grid-template-columns: 1fr; }
  .report-h1 { font-size: 20px; }
  .sec-title { font-size: 18px; }
  .level-card { grid-template-columns: auto 1fr; }
  .score-ring { grid-column: 2; justify-self: start; }
  .shot-cards { grid-template-columns: repeat(2, 1fr); }
  .lib-grid { grid-template-columns: 1fr; }
  .report-top .stat-grid { margin-top: 14px; }
  .view-switcher { gap: 8px; }
  .analyze-panel { padding: 13px 13px 15px; }
}
@media (max-width: 560px) {
  .week-grid { grid-template-columns: 1fr; }
}