/* v3.7.6：与健康网站 v0.7.2 保持同一套设计语言，但保留健身网站的训练感。
   一致性：相同的圆角、卡片层级、按钮节奏、MiSans 字体、移动端卡片逻辑。
   区别性：健身站使用深青绿 + 琥珀点缀、训练网格背景、力量记录高亮。 */
:root {
  --fit-bg: #f5f7fb;
  --fit-bg-2: #eef4f1;
  --fit-card: rgba(255, 255, 255, 0.94);
  --fit-card-solid: #ffffff;
  --fit-card-soft: #f8faf9;
  --fit-surface-tint: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  --fit-border-soft: rgba(148, 163, 184, 0.22);
  --fit-border-green: rgba(15, 118, 110, 0.16);
  --fit-text: #172033;
  --fit-muted: #697386;
  --fit-muted-2: #8a95a6;
  --fit-primary: #0f766e;
  --fit-primary-dark: #115e59;
  --fit-primary-2: #14b8a6;
  --fit-primary-soft: #e6f6f3;
  --fit-accent: #f59e0b;
  --fit-accent-soft: #fff7ed;
  --fit-danger: #dc2626;
  --fit-danger-soft: #fff1f2;
  --fit-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  --fit-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.06);
  --fit-shadow-strong: 0 22px 58px rgba(15, 118, 110, 0.13);
  --fit-radius: 20px;
  --fit-radius-lg: 24px;
  --fit-radius-xl: 28px;

  --bg: var(--fit-bg) !important;
  --bg-soft: var(--fit-bg-2) !important;
  --card: var(--fit-card) !important;
  --card-solid: var(--fit-card-solid) !important;
  --card-soft: var(--fit-card-soft) !important;
  --text: var(--fit-text) !important;
  --muted: var(--fit-muted) !important;
  --muted-2: var(--fit-muted-2) !important;
  --line: var(--fit-border-soft) !important;
  --line-strong: rgba(15, 118, 110, 0.24) !important;
  --brand: var(--fit-primary) !important;
  --brand-2: var(--fit-primary-2) !important;
  --brand-deep: var(--fit-primary-dark) !important;
  --brand-soft: var(--fit-primary-soft) !important;
  --warm: var(--fit-accent) !important;
  --warm-soft: var(--fit-accent-soft) !important;
  --danger: var(--fit-danger) !important;
  --danger-soft: var(--fit-danger-soft) !important;
  --shadow: var(--fit-shadow) !important;
  --shadow-soft: var(--fit-shadow-soft) !important;
  --radius: var(--fit-radius) !important;
  --radius-lg: var(--fit-radius-lg) !important;
}

html[data-theme="dark"] {
  --fit-bg: #0f172a;
  --fit-bg-2: #111827;
  --fit-card: rgba(15, 23, 42, 0.94);
  --fit-card-solid: #111827;
  --fit-card-soft: #172033;
  --fit-surface-tint: linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.92));
  --fit-border-soft: rgba(148, 163, 184, 0.18);
  --fit-border-green: rgba(94, 234, 212, 0.18);
  --fit-text: #eef2ff;
  --fit-muted: #a8b3c7;
  --fit-muted-2: #7f8aa3;
  --fit-primary: #5eead4;
  --fit-primary-dark: #d8fff8;
  --fit-primary-2: #99f6e4;
  --fit-primary-soft: rgba(94, 234, 212, 0.12);
  --fit-accent: #fbbf24;
  --fit-accent-soft: rgba(251, 191, 36, 0.12);
  --fit-danger: #fb7185;
  --fit-danger-soft: rgba(251, 113, 133, 0.12);
  --fit-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  --fit-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.20);
  --fit-shadow-strong: 0 22px 58px rgba(0, 0, 0, 0.36);
}

html { background: var(--fit-bg) !important; }
body {
  color: var(--fit-text) !important;
  background:
    radial-gradient(circle at 6% -4%, rgba(20,184,166,.16), transparent 34rem),
    radial-gradient(circle at 94% 0%, rgba(245,158,11,.10), transparent 30rem),
    linear-gradient(180deg, var(--fit-bg), var(--fit-bg-2) 58%, var(--fit-bg)) !important;
  letter-spacing: -0.012em !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(15,118,110,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 74%);
}
html[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(94,234,212,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,.035) 1px, transparent 1px);
}

.app-header,
.container {
  width: min(1200px, calc(100% - 40px)) !important;
}
.container { padding: 10px 0 76px !important; }
.app-header-system,
.app-header {
  padding: 26px 0 18px !important;
  align-items: flex-start !important;
}
.header-copy {
  padding-left: 56px !important;
}
.header-copy::before {
  width: 44px !important;
  height: 44px !important;
  top: 4px !important;
  border-radius: 16px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M18 50h60' stroke='white' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M28 35v30M68 35v30M38 42v16M58 42v16' stroke='white' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M25 68c8 5 38 5 46 0' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' opacity='.72'/%3E%3C/svg%3E") center / 74% 74% no-repeat,
    linear-gradient(135deg, var(--fit-primary), var(--fit-primary-2)) !important;
  box-shadow: 0 16px 30px rgba(15,118,110,.22) !important;
}
.header-copy::after { display: none !important; }
.header-copy .eyebrow,
.eyebrow {
  color: var(--fit-primary) !important;
  letter-spacing: .10em !important;
  font-size: 11px !important;
}
.header-copy h1 {
  color: var(--fit-text) !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 8px !important;
}
.header-copy .sub,
.sub,
.page-head p,
.section-title p,
.trend-title-row span,
.chart-hint,
.training-advice-text,
.field-help {
  color: color-mix(in srgb, var(--fit-muted) 88%, var(--fit-text)) !important;
  line-height: 1.65 !important;
}

.nav-tabs,
.system-nav-tabs {
  min-height: 50px !important;
  padding: 6px !important;
  gap: 5px !important;
  border: 1px solid var(--fit-border-soft) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: var(--fit-shadow-soft) !important;
}
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .system-nav-tabs {
  background: rgba(15,23,42,.76) !important;
}
.nav-tabs a,
.system-nav-tabs a {
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: var(--fit-muted) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}
.nav-tabs a.active,
.nav-tabs a:hover,
.system-nav-tabs a.active,
.system-nav-tabs a:hover {
  color: var(--fit-primary-dark) !important;
  background: var(--fit-primary-soft) !important;
}

.header-actions,
.system-header-actions {
  gap: 10px !important;
  align-items: center !important;
}
.user-pill,
.ghost-btn,
.primary-btn,
.danger-btn,
.icon-btn,
.filter-btn,
.neutral-btn,
.home-secondary-link,
.home-text-link,
.small-btn,
.mini-link,
button {
  border-radius: 999px !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}
.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.filter-btn,
.neutral-btn,
.home-secondary-link,
.home-text-link {
  min-height: 42px !important;
  font-weight: 850 !important;
}
.primary-btn,
.home-primary-cta,
.train-finish-btn,
.big-start-btn,
.live-submit {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--fit-primary), var(--fit-primary-2)) !important;
  box-shadow: 0 14px 26px rgba(15,118,110,.18) !important;
}
.ghost-btn,
.icon-btn,
.filter-btn,
.neutral-btn,
.home-secondary-link,
.home-text-link,
.trend-title-row .mini-action-btn,
.user-pill {
  color: var(--fit-primary-dark) !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid var(--fit-border-soft) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .neutral-btn,
html[data-theme="dark"] .home-secondary-link,
html[data-theme="dark"] .home-text-link,
html[data-theme="dark"] .trend-title-row .mini-action-btn,
html[data-theme="dark"] .user-pill {
  background: rgba(255,255,255,.055) !important;
}
.primary-btn:hover,
.home-primary-cta:hover,
.train-finish-btn:hover,
.big-start-btn:hover,
.live-submit:hover,
.ghost-btn:hover,
.icon-btn:hover,
.filter-btn:hover,
.neutral-btn:hover,
.home-secondary-link:hover,
.home-text-link:hover {
  transform: translateY(-1px) !important;
}
.ghost-btn:hover,
.icon-btn:hover,
.filter-btn:hover,
.neutral-btn:hover,
.home-secondary-link:hover,
.home-text-link:hover {
  color: var(--fit-primary-dark) !important;
  background: var(--fit-primary-soft) !important;
  border-color: rgba(15,118,110,.24) !important;
}
.danger-btn,
button.danger-btn,
.delete-form .danger-btn {
  color: var(--fit-danger) !important;
  background: var(--fit-danger-soft) !important;
  border: 1px solid rgba(220,38,38,.18) !important;
  box-shadow: none !important;
}
.danger-btn:hover,
button.danger-btn:hover {
  color: #fff !important;
  background: var(--fit-danger) !important;
  border-color: var(--fit-danger) !important;
}

.card,
.page-head,
.toolbar,
.home-primary-card,
.home-advice-card,
.home-section-card,
.train-hero-card,
.training-mode-card,
.compact-week-card,
.dashboard-meta-card,
.joint-health-card,
.sync-detail-card,
.recommended-plan-card,
.status-card,
.form-card,
.trend-card,
.records-card,
.history-day,
.template-card,
.exercise-card,
.icon-preview-card,
.backup-card,
.analysis-summary-card,
.analysis-trend-card,
.analysis-history-card,
.analysis-card {
  border: 1px solid var(--fit-border-soft) !important;
  border-radius: var(--fit-radius-lg) !important;
  background: var(--fit-surface-tint) !important;
  box-shadow: var(--fit-shadow) !important;
  backdrop-filter: blur(12px) !important;
}
.card:hover,
.home-primary-card:hover,
.home-advice-card:hover,
.home-section-card:hover,
.exercise-card:hover,
.template-card:hover {
  border-color: rgba(15,118,110,.20) !important;
}
.page-head {
  padding: 20px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--fit-shadow-soft) !important;
}
.page-head h1 {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  letter-spacing: -0.035em !important;
}
.section-title,
.trend-title-row,
.home-section-title,
.history-head,
.template-card-head,
.plan-card-head {
  align-items: center !important;
  gap: 14px !important;
}
.section-title h2,
.trend-title-row h2,
.home-section-title h2,
.history-head h2 {
  letter-spacing: -0.02em !important;
}

input,
select,
textarea {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 11px 13px !important;
  color: var(--fit-text) !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--fit-border-soft) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255,255,255,.055) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fit-primary) !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.14) !important;
}
label {
  color: color-mix(in srgb, var(--fit-muted) 78%, var(--fit-text)) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

.today-item,
.metric-card,
.stat-card,
.status-kpi-grid div,
.compact-week-grid div,
.week-summary-grid div,
.joint-health-grid div,
.quality-card-list div,
.quality-mini-list div,
.plan-stat-grid div,
.personal-stat-grid div,
.pr-card-mini,
.analysis-stat-chips div,
.daily-meta-summary div,
.backup-status-grid div,
.template-quick-item,
.template-item-row,
.planned-item,
.home-kpi-row > div,
.home-list-item,
.home-entry-links a,
.exercise-insight-box,
.training-advice-text,
.sync-chip-group span,
.sync-missing-line span,
.empty-card {
  border: 1px solid var(--fit-border-soft) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .today-item,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .status-kpi-grid div,
html[data-theme="dark"] .compact-week-grid div,
html[data-theme="dark"] .week-summary-grid div,
html[data-theme="dark"] .joint-health-grid div,
html[data-theme="dark"] .quality-card-list div,
html[data-theme="dark"] .quality-mini-list div,
html[data-theme="dark"] .plan-stat-grid div,
html[data-theme="dark"] .personal-stat-grid div,
html[data-theme="dark"] .pr-card-mini,
html[data-theme="dark"] .analysis-stat-chips div,
html[data-theme="dark"] .daily-meta-summary div,
html[data-theme="dark"] .backup-status-grid div,
html[data-theme="dark"] .template-quick-item,
html[data-theme="dark"] .template-item-row,
html[data-theme="dark"] .planned-item,
html[data-theme="dark"] .home-kpi-row > div,
html[data-theme="dark"] .home-list-item,
html[data-theme="dark"] .home-entry-links a,
html[data-theme="dark"] .exercise-insight-box,
html[data-theme="dark"] .training-advice-text,
html[data-theme="dark"] .sync-chip-group span,
html[data-theme="dark"] .sync-missing-line span,
html[data-theme="dark"] .empty-card {
  background: rgba(255,255,255,.045) !important;
}

.today-item,
.metric-card,
.stat-card,
.compact-week-grid div,
.week-summary-grid div,
.status-kpi-grid div,
.joint-health-grid div,
.quality-card-list div,
.quality-mini-list div,
.analysis-stat-chips div,
.pr-card-mini,
.personal-stat-grid div,
.plan-stat-grid div,
.backup-status-grid div {
  text-align: center !important;
  justify-content: center !important;
  align-content: center !important;
}
.today-item strong,
.metric-card strong,
.stat-card strong,
.status-kpi-grid strong,
.compact-week-grid strong,
.week-summary-grid strong,
.joint-health-grid strong,
.quality-card-list strong,
.quality-mini-list strong,
.analysis-stat-chips strong,
.pr-card-mini strong,
.personal-stat-grid strong,
.plan-stat-grid strong,
.backup-status-grid strong,
.record-volume,
#restTimerDisplay {
  color: var(--fit-primary) !important;
  letter-spacing: -0.03em !important;
}
.today-item em,
.metric-card em,
.stat-card small,
.status-kpi-grid small,
.compact-week-grid small,
.week-summary-grid small,
.joint-health-grid small,
.quality-card-list small,
.quality-mini-list span,
.analysis-stat-chips small,
.pr-card-mini small,
.personal-stat-grid small,
.plan-stat-grid small,
.backup-status-grid small {
  max-width: 96% !important;
  margin-inline: auto !important;
}
.stat-card::after,
.today-item::after {
  background: var(--fit-accent) !important;
  opacity: .12 !important;
}

/* 首页与健康站的卡片节奏一致，但用训练专属的左侧重点信息 + 右侧建议结构。 */
.home-hero-grid,
.coach-hero-shell {
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, .82fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.home-primary-card,
.home-advice-card {
  min-height: 0 !important;
}
.home-primary-card h1,
.status-card-main h1,
.today-overview-head h1 {
  letter-spacing: -0.05em !important;
}
.home-kpi-row {
  gap: 12px !important;
}
.home-kpi-row > div {
  min-height: 100px !important;
  align-items: center !important;
}
.home-advice-list p,
.week-advice-list p,
.coach-advice-list div {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(245,158,11,.06)) !important;
  border: 1px solid rgba(15,118,110,.12) !important;
}

/* 分析页：两栏正常等宽，内部指标像健康站一样整齐居中。 */
body[data-page="/analysis"] .professional-analysis-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
body[data-page="/analysis"] .professional-analysis-grid > .training-quality-card,
body[data-page="/analysis"] .professional-analysis-grid > .analysis-joint-card {
  min-width: 0 !important;
  height: 100% !important;
}
body[data-page="/analysis"] .training-quality-card,
body[data-page="/analysis"] .analysis-joint-card {
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
}
body[data-page="/analysis"] .training-quality-card .quality-card-list,
body[data-page="/analysis"] .analysis-joint-card .joint-health-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: auto !important;
}
body[data-page="/analysis"] .training-quality-card .quality-card-list > div,
body[data-page="/analysis"] .analysis-joint-card .joint-health-grid > div {
  min-height: 106px !important;
  display: grid !important;
}
body[data-page="/analysis"] .analysis-joint-card .training-advice-text {
  margin-bottom: 12px !important;
}

/* 趋势图：继承健康站的细腻卡片感，同时保留健身站柱状图信息。 */
.bar-chart,
.analysis-bar-chart,
.trend-card .bar-chart,
.analysis-trend-card .analysis-bar-chart {
  border: 1px solid rgba(15,118,110,.16) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(to top, rgba(105,115,134,.12) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,0)),
    var(--fit-card-soft) !important;
}
html[data-theme="dark"] .bar-chart,
html[data-theme="dark"] .analysis-bar-chart,
html[data-theme="dark"] .trend-card .bar-chart,
html[data-theme="dark"] .analysis-trend-card .analysis-bar-chart {
  background:
    linear-gradient(to top, rgba(168,179,199,.12) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    var(--fit-card-soft) !important;
}
.bar,
.trend-card .bar,
.analysis-trend-card .analysis-bar-chart .bar {
  background: linear-gradient(180deg, var(--fit-primary-2), var(--fit-primary)) !important;
  box-shadow: 0 8px 16px rgba(15,118,110,.16) !important;
}
.duration-trend .bar,
.analysis-trend-card .duration-trend .analysis-bar-chart .bar {
  background: linear-gradient(180deg, var(--fit-accent), var(--fit-primary)) !important;
}
.bar-tooltip,
.analysis-bar-chart .bar-tooltip,
.analysis-trend-card .bar-tooltip {
  background: var(--fit-card-solid) !important;
  color: var(--fit-text) !important;
  border: 1px solid var(--fit-border-soft) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.16) !important;
  border-radius: 14px !important;
}
html[data-theme="dark"] .bar-tooltip,
html[data-theme="dark"] .analysis-bar-chart .bar-tooltip,
html[data-theme="dark"] .analysis-trend-card .bar-tooltip {
  background: var(--fit-card-solid) !important;
}
body[data-page="/analysis"] .analysis-trend-card,
body[data-page="/analysis"] .analysis-trend-grid,
body[data-page="/analysis"] .analysis-trend-panel,
body[data-page="/analysis"] .analysis-bar-chart,
body[data-page="/analysis"] .analysis-bar-chart .bar-item {
  overflow: visible !important;
}
body[data-page="/analysis"] .analysis-bar-chart .bar-tooltip,
body[data-page="/analysis"] .analysis-trend-card .bar-tooltip {
  min-width: 220px !important;
  max-width: min(380px, 86vw) !important;
  white-space: nowrap !important;
  text-align: left !important;
  z-index: 400 !important;
}

/* 动作百科保持训练站专属感：图标卡片更像器械资料库，而非健康记录表。 */
.exercise-library .exercise-card {
  position: relative !important;
  overflow: hidden !important;
}
.exercise-library .exercise-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -52px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.16), rgba(245,158,11,0) 70%);
  pointer-events: none;
}
.exercise-art,
.mini-icon {
  border-radius: 18px !important;
  border-color: rgba(15,118,110,.14) !important;
  background: #fff !important;
  color: var(--fit-primary) !important;
}
html[data-theme="dark"] .exercise-art,
html[data-theme="dark"] .mini-icon {
  background: rgba(255,255,255,.06) !important;
}
.pill,
.sets-badge,
.done-badge,
.sync-status-pill,
.readiness-badge,
.template-stats-line span,
.home-state-pill,
.muted-tag {
  border-radius: 999px !important;
  color: var(--fit-primary-dark) !important;
  background: var(--fit-primary-soft) !important;
}
.pill.soft,
.muted-tag {
  color: var(--fit-muted) !important;
  background: rgba(105,115,134,.10) !important;
}
.set-index {
  color: var(--fit-primary-dark) !important;
  background: var(--fit-primary-soft) !important;
  border-radius: 999px !important;
}
.remove-set,
.icon-btn.remove-set {
  color: var(--fit-danger) !important;
  background: var(--fit-danger-soft) !important;
  border: 1px solid rgba(220,38,38,.18) !important;
}

.bottom-nav,
.bottom-nav-v3 {
  border: 1px solid var(--fit-border-soft) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--fit-shadow) !important;
  backdrop-filter: blur(14px) !important;
}
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .bottom-nav-v3 {
  background: rgba(15,23,42,.94) !important;
}
.bottom-nav a {
  border-radius: 18px !important;
  color: var(--fit-muted) !important;
}
.bottom-nav a.active {
  color: var(--fit-primary-dark) !important;
  background: var(--fit-primary-soft) !important;
}
.bottom-nav-v3 .bottom-nav-add {
  color: #fff !important;
  background: linear-gradient(135deg, var(--fit-primary), var(--fit-primary-2)) !important;
  box-shadow: 0 14px 28px rgba(15,118,110,.28) !important;
}

@media (min-width: 1181px) {
  .app-header-system {
    width: min(1200px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(360px, 1fr) max-content !important;
    gap: 24px !important;
  }
  .app-header-system .header-right {
    justify-self: end !important;
    justify-items: end !important;
    width: max-content !important;
  }
  .app-header-system .system-nav-tabs {
    width: max-content !important;
    max-width: calc(100vw - 48px) !important;
  }
  .app-header-system .system-header-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
  .dashboard-system-grid {
    gap: 18px !important;
  }
}

@media (max-width: 1180px) {
  .app-header-system,
  .dashboard-status-shell,
  .home-hero-grid,
  .coach-hero-shell,
  .home-week-grid,
  .dashboard-system-grid,
  .professional-analysis-grid,
  .analysis-grid,
  .plan-admin-grid,
  .template-admin-grid {
    grid-template-columns: 1fr !important;
  }
  .app-header-system .header-right,
  .app-header-system .system-nav-tabs,
  .app-header-system .system-header-actions {
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-page="/analysis"] .training-quality-card .quality-card-list,
  body[data-page="/analysis"] .analysis-joint-card .joint-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    font-size: 15px !important;
  }
  .app-header-system,
  .app-header,
  .container {
    width: min(100% - 24px, 1200px) !important;
  }
  .app-header-system,
  .app-header {
    margin-top: 10px !important;
    padding: 16px !important;
    gap: 12px !important;
    border: 1px solid var(--fit-border-soft) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: var(--fit-shadow-soft) !important;
  }
  html[data-theme="dark"] .app-header-system,
  html[data-theme="dark"] .app-header {
    background: rgba(15,23,42,.72) !important;
  }
  .header-copy {
    padding-left: 48px !important;
  }
  .header-copy::before {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }
  .header-copy h1 {
    font-size: 26px !important;
    margin-bottom: 5px !important;
  }
  .header-copy .sub {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }
  .header-right .nav-tabs,
  .header-right .system-nav-tabs {
    display: none !important;
  }
  .system-header-actions,
  .header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .system-header-actions > *,
  .system-header-actions form,
  .system-header-actions form button,
  .system-header-actions .user-pill,
  .system-header-actions .ghost-btn,
  .settings-menu,
  .settings-menu > summary {
    width: 100% !important;
    min-width: 0 !important;
  }
  .settings-popover,
  .user-popover {
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-shadow: none !important;
  }
  .page-head,
  .card,
  .form-card,
  .trend-card,
  .records-card,
  .history-day,
  .template-card,
  .analysis-summary-card,
  .analysis-trend-card,
  .analysis-history-card,
  .analysis-card,
  .training-mode-card,
  .compact-week-card,
  .dashboard-meta-card,
  .joint-health-card,
  .sync-detail-card {
    border-radius: 22px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  .section-title,
  .trend-title-row,
  .history-head,
  .page-head,
  .home-section-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
  }
  .section-title p,
  .trend-title-row span,
  .page-head p,
  .analysis-chart-note {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .today-grid,
  .fitness-today-grid,
  .summary-grid,
  .home-kpi-row,
  .compact-week-grid,
  .week-summary-grid,
  .status-kpi-grid,
  .dashboard-metrics-row,
  .analysis-stat-chips,
  .personal-stat-grid,
  .pr-strip,
  .plan-stat-grid,
  .backup-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .today-item,
  .metric-card,
  .stat-card,
  .home-kpi-row > div,
  .compact-week-grid div,
  .week-summary-grid div,
  .status-kpi-grid div,
  .joint-health-grid div,
  .quality-card-list div,
  .analysis-stat-chips div,
  .personal-stat-grid div,
  .pr-strip div,
  .plan-stat-grid div,
  .backup-status-grid div {
    min-height: 94px !important;
    padding: 13px !important;
  }
  body[data-page="/analysis"] .training-quality-card .quality-card-list,
  body[data-page="/analysis"] .analysis-joint-card .joint-health-grid,
  .joint-health-grid,
  .quality-card-list {
    grid-template-columns: 1fr !important;
  }
  body[data-page="/analysis"] .training-quality-card .quality-card-list > div,
  body[data-page="/analysis"] .analysis-joint-card .joint-health-grid > div {
    min-height: 0 !important;
  }
  body[data-page="/analysis"] .analysis-bar-chart .bar-tooltip,
  body[data-page="/analysis"] .analysis-trend-card .bar-tooltip {
    min-width: 170px !important;
    max-width: min(260px, 82vw) !important;
    white-space: normal !important;
    font-size: 11px !important;
  }
  .date-switcher,
  .history-switcher,
  .status-card .compact-date-switcher {
    gap: 8px !important;
  }
  .bottom-nav,
  .bottom-nav-v3 {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 8px 6px !important;
    gap: 5px !important;
  }
  .bottom-nav a {
    min-height: 48px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 520px) {
  .app-header-system,
  .app-header,
  .container {
    width: min(100% - 20px, 1200px) !important;
  }
  .system-header-actions,
  .header-actions {
    grid-template-columns: 1fr !important;
  }
  .status-kpi-grid,
  .joint-health-grid,
  .quality-card-list,
  .plan-stat-grid,
  .personal-stat-grid,
  .pr-strip,
  .backup-status-grid {
    grid-template-columns: 1fr !important;
  }
  .today-grid,
  .fitness-today-grid,
  .summary-grid,
  .home-kpi-row,
  .compact-week-grid,
  .week-summary-grid,
  .dashboard-metrics-row,
  .analysis-stat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .date-switcher.compact-date-switcher,
  .status-card .compact-date-switcher {
    grid-template-columns: 36px minmax(98px, 1fr) 54px 36px 48px !important;
  }
}