/* ========= 全局 ========= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    -system-ui, "PingFang SC", "Microsoft Yahei", sans-serif;
  background: radial-gradient(circle at 0 0, #283a5b 0, #050814 55%, #02030a 100%);
  color: #f5f7ff;
}

body {
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

/* ========= 顶部 Header ========= */

.pageHeader {
  margin-bottom: 24px;
}

.logoRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

.dot--live {
  position: relative;
}

.dot--live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(74, 222, 128, 0.7);
  opacity: 0.7;
}

.appName {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #e2e8f0;
}

.tag--beta {
  border-color: rgba(251, 191, 36, 0.9);
  color: #facc15;
}

.subtitle {
  font-size: 13px;
  color: #94a3b8;
}

/* ========= 通用 Card ========= */

.card {
  background: radial-gradient(circle at 0 0, #1f2937 0, #020617 65%);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);
}

.card--section {
  margin-top: 8px;
}

.card--sub {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), #020617);
  border-radius: 16px;
}

.cardHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.cardHeaderRow h3 {
  margin: 0;
  font-size: 14px;
}

/* ========= 表单 & 上传区域 ========= */

h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.label {
  font-size: 13px;
  color: #e2e8f0;
}

.labelHint {
  font-size: 11px;
  color: #64748b;
  margin-left: 4px;
}

.input,
select.input {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 8px 12px;
  font-size: 13px;
  color: #e2e8f0;
  outline: none;
}

.input::placeholder {
  color: #64748b;
}

.input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

/* 上传 + 按钮行 */

.uploadRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.uploadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.2);
  color: #bfdbfe;
  font-size: 13px;
  border: 1px solid rgba(59, 130, 246, 0.7);
  cursor: pointer;
}

.uploadBtn:hover {
  background: rgba(30, 64, 175, 0.35);
}

.primaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #0b1220;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.6);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.09s ease;
}

.primaryBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.7);
  filter: brightness(1.05);
}

.primaryBtn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* AI 结果顶部的分享图按钮：高亮大号 */

#shareSummaryBtn,
.primaryBtn--share {
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4);
  color: #022c22;
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.8);
  border: none;
}

#shareSummaryBtn:hover,
.primaryBtn--share:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(16, 185, 129, 0.95);
}

/* 上传状态 pill */

.status-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #cbd5f5;
  background: rgba(15, 23, 42, 0.9);
}

.status-pill--idle {
  opacity: 0.9;
}

/* 提示文字 */

.hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

.hint--inline {
  margin-left: 6px;
}

/* ========= AI 小结 & 分数 ========= */

.summaryText {
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #e5e7eb;
}

.scoreBox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.scoreNumberWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.scoreNumber {
  font-size: 30px;
  font-weight: 700;
}

.scoreSuffix {
  font-size: 14px;
  color: #9ca3af;
  margin-top: -4px;
}

.scoreMeta {
  flex: 1;
}

.scoreBar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  overflow: hidden;
  margin-bottom: 4px;
}

.scoreBarInner {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #14b8a6, #0ea5e9);
  transition: width 0.25s ease-out;
}

.scoreLabel {
  font-size: 12px;
  color: #9ca3af;
}

/* 细分评分条 */

.scoreDetail {
  margin-top: 12px;
}

.scoreDetailRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12px;
}

.scoreDetailLabel {
  width: 80px;
  color: #cbd5f5;
}

.scoreDetailBar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  overflow: hidden;
}

.scoreDetailBarInner {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #10b981);
  width: 0;
  transition: width 0.25s ease-out;
}

.scoreDetailValue {
  width: 40px;
  text-align: right;
  color: #9ca3af;
}

/* ========= 问题 & 训练清单 ========= */

.issueList,
.planList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #e5e7eb;
}

.issueList li + li,
.planList li + li {
  margin-top: 8px;
}

.emptyText {
  color: #64748b;
}

/* ========= 关键帧区域 ========= */

.frames {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* 缩略图卡片大小恢复成之前那种比例：宽度自适应，高度统一 */

.frames img {
  width: 100%;
  height: 190px;          /* 控制高度，避免过高 */
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.frameCard,
.frameItem {
  background: radial-gradient(circle at 0 0, #111827 0, #020617 70%);
  border-radius: 16px;
  border: 1px solid rgba(51, 65, 85, 0.8);
  padding: 6px;
  text-align: center;
  font-size: 12px;
  color: #cbd5f5;
}
/* 选中的关键帧高亮效果 */
.frameCard--active {
  border-color: rgba(56, 189, 248, 0.9); /* 青蓝色边框 */
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7),
              0 0 18px rgba(56, 189, 248, 0.55);
  transform: translateY(-2px);
}

.frameCard--active img {
  filter: brightness(1.08);
}

.frameCard {
  transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

.frameIndex {
  font-size: 11px;
  color: #64748b;
}

.frameClickHint {
  font-size: 11px;
  color: #60a5fa;
}

/* 当前帧提示 */

.currentFrameTip {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at 0 0, #0f172a 0, #020617 70%);
  border: 1px solid rgba(55, 65, 81, 0.8);
}

.frameTipLine {
  margin: 0 0 4px;
  font-size: 12px;
}

.frameTipLine--problem {
  color: #fecaca;
}

.frameTipLine--advice {
  color: #bbf7d0;
}

/* ========= 导出当前帧点评图按钮 ========= */

.exportRow {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.exportBtn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 12px;
  cursor: pointer;
}

.exportBtn:hover {
  background: rgba(15, 23, 42, 1);
}

/* ========= 调试 / JSON ========= */

.rawText {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(15, 23, 42, 0.95);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(30, 64, 175, 0.5);
  max-height: 260px;
  overflow: auto;
}

.devDetails summary {
  cursor: pointer;
  font-size: 12px;
  color: #9ca3af;
}

/* ========= 底部隐私说明 ========= */

.footerNotice {
  margin-top: 12px;
  font-size: 11px;
  color: #64748b;
  text-align: center;
}

.footerNotice a {
  color: #60a5fa;
  text-decoration: none;
}

.footerNotice a:hover {
  text-decoration: underline;
}
/* ========= 覆盖 1：关键帧改成两排三张 ========= */
/* 大屏固定 3 列，刚好 6 张 = 2 行，每行 3 张 */

.frames {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* iPad 竖屏 / 窄一点时，自动变 2 列，再窄变 1 列，避免挤爆 */

@media (max-width: 900px) {
  .frames {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .frames {
    grid-template-columns: 1fr;
  }
}

/* ========= 覆盖 2：两个 PNG 按钮都高亮 ========= */
/* 一键生成训练结果分享图（PNG） + 生成当前帧教练点评图（PNG） */

#shareSummaryBtn,
.exportBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4);
  color: #022c22;
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.8);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  white-space: nowrap;
}

#shareSummaryBtn:hover,
.exportBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(16, 185, 129, 0.95);
  filter: brightness(1.05);
}

#shareSummaryBtn:active,
.exportBtn:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.7);
}
/* ========= 覆盖 3：确保分享图按钮也高亮（按 class） ========= */

.primaryBtn--share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4);
  color: #022c22;
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.8);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  white-space: nowrap;
}

.primaryBtn--share:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(16, 185, 129, 0.95);
  filter: brightness(1.05);
}

.primaryBtn--share:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.7);
}
/* ========= 排行榜预告区域 ========= */

.leaderboardCard {
  margin-top: 8px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), #020617);
  border: 1px dashed rgba(148, 163, 184, 0.6);
}

.leaderboardHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.leaderboardTitleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.lbTitle {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
}

.lbBadge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.85);
  color: #bfdbfe;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(15, 23, 42, 0.9);
}

.lbSubtitle {
  margin: 0;
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

.lbMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lbMetaTag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(55, 65, 81, 0.95);
  color: #cbd5f5;
  white-space: nowrap;
}
/* ========= 语言切换小 Tab ========= */

.cardHeaderLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

.langTabs {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(51, 65, 85, 0.9);
}

.langTab {
  border: none;
  background: transparent;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  color: #9ca3af;
  cursor: pointer;
  white-space: nowrap;
}

.langTab--active {
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  color: #022c22;
}
/* 排行榜表格 */

.leaderboardTable {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: radial-gradient(circle at 0 0, #020617 0, #020617 55%, #020617 100%);
  overflow: hidden;
}

.lbRow {
  display: grid;
  grid-template-columns: 40px 1.4fr 1.2fr 80px;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  align-items: center;
}

.lbRow--header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  background: rgba(15, 23, 42, 0.98);
}

.lbRow--placeholder:nth-child(odd) {
  background: rgba(15, 23, 42, 0.9);
}

.lbRow--placeholder:nth-child(even) {
  background: rgba(15, 23, 42, 0.8);
}

.lbRow--placeholder span:nth-child(1) {
  color: #e5e7eb;
  font-weight: 500;
}

.lbRow--placeholder span:nth-child(2) {
  color: #cbd5f5;
}

.lbRow--placeholder span:nth-child(3) {
  color: #93c5fd;
}

.lbRow--placeholder span:nth-child(4) {
  color: #facc15;
  font-weight: 600;
  text-align: right;
}

.lbFooter {
  margin: 10px 2px 0;
  font-size: 11px;
  color: #9ca3af;
}

/* 小屏适配 */

@media (max-width: 600px) {
  .leaderboardHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .lbRow {
    grid-template-columns: 30px 1.5fr 1fr 60px;
    padding: 6px 8px;
  }
}
/* ========= 关掉前端调试 JSON 展示 ========= */
/* 现在只隐藏展开的完整 JSON，不隐藏右侧英文建议卡片 */

.devDetails {
  display: none;
}
/* ========= 分享图语言选择 ========= */

.shareLangRow {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shareLangLabel {
  font-size: 11px;
  color: #64748b;
}

.shareLangSelect {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 11px;
  outline: none;
}
/* ===== Fix: mobile button wrap (keep desktop style) ===== */
@media (max-width: 600px) {
  #shareReportBtn {
    width: 100%;
    max-width: 100%;
    white-space: normal;         /* 允许换行 */
    overflow-wrap: anywhere;     /* 英文长词也能断行 */
    word-break: break-word;
    text-align: center;
    line-height: 1.2;
  }
}
@media (max-width: 600px) {
  #exportFrameBtn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.2;
  }
}
/* ========= 单次完整动作提示（新增，放在文件末尾避免被覆盖） ========= */
.singleStrokeTip {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at 0 0, #1a1406 0, #020617 70%);
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.singleStrokeTip__title {
  font-size: 12px;
  font-weight: 600;
  color: #facc15;
  margin-bottom: 6px;
}

.singleStrokeTip__text {
  font-size: 12px;
  color: #cbd5f5;
  line-height: 1.55;
}
/* ===== 每帧下方教练点评（缩略版） ===== */
.frameTipMini {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.85);
  text-align: left;
}

.frameTipMiniLine {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.92);
}

.frameTipMiniLine + .frameTipMiniLine {
  margin-top: 4px;
  color: rgba(167, 243, 208, 0.92);
}