/* ================================================================
   AimRun Liquid Glass — v107 UI 升级层（加载于 ui-refactor.css 之后）
   参考 Apple Liquid Glass：折射高光 · 悬浮玻璃 Dock · 弹性动效 ·
   弹窗从触发点弹出 · SF 线性图标
   只做视觉覆盖，不改任何 id / class / JS 行为。
   ================================================================ */

/* ── 1. 设计令牌升级（ui-refactor.css 大量引用这些变量，改这里=全局换肤） ── */
:root {
  --ar-bg: #eef2f4;
  --ar-surface: rgba(255, 255, 255, 0.60);
  --ar-surface-soft: rgba(255, 255, 255, 0.42);
  --ar-glass-strong: rgba(255, 255, 255, 0.74);
  --ar-glass-muted: rgba(250, 252, 253, 0.5);
  --ar-border: rgba(255, 255, 255, 0.72);
  --ar-border-strong: rgba(148, 163, 184, 0.36);
  --ar-radius: 20px;
  --ar-radius-sm: 13px;
  /* 玻璃上缘反光 + 更深的浮起投影 */
  --ar-shadow-sm:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 -1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 24px rgba(15, 23, 42, 0.07);
  --ar-shadow-md:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 0 rgba(255, 255, 255, 0.28) inset,
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 22px 52px rgba(15, 23, 42, 0.12);
  --ar-blur: blur(26px) saturate(185%);
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── 2. 背景：柔和光斑，供玻璃「折射」 ── */
body.aimrun-ui-v88 {
  background:
    radial-gradient(58rem 40rem at 90% -8%, rgba(52, 199, 89, 0.06), transparent 60%),
    radial-gradient(48rem 34rem at -12% 24%, rgba(64, 156, 255, 0.055), transparent 58%),
    linear-gradient(160deg, #f0f6f4 0%, #f6f8fa 46%, #edf1f5 100%) !important;
  background-attachment: fixed !important;
}

/* ================================================================
   3. 悬浮玻璃 Dock（底部导航）
   ================================================================ */
.aimrun-ui-v88 #appBottomNav {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 20px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 10px rgba(15, 23, 42, 0.05),
    0 20px 48px rgba(15, 23, 42, 0.2) !important;
  padding: 4px 8px !important;
  overflow: visible;   /* 教练球可凸出 */
}
/* Dock 悬浮后，正文与悬浮球让位 */
body.aimrun-ui-v88 { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
#coachFab { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }

.aimrun-ui-v88 #appBottomNav .app-tab-btn {
  min-height: 54px;
  border-radius: 24px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, transform 0.2s var(--lg-spring);
}
.aimrun-ui-v88 #appBottomNav .app-tab-btn:active { transform: scale(0.88); }

/* 激活态：液态玻璃泡在图标后升起（替代顶部指示线） */
.aimrun-ui-v88 #appBottomNav .app-tab-btn::before {
  content: '';
  top: 50% !important;
  left: 50% !important;
  width: 76% !important;
  height: 82% !important;
  transform: translate(-50%, -50%) scale(0.6);
  background: rgba(52, 199, 89, 0.13) !important;
  border: 1px solid rgba(52, 199, 89, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  border-radius: 18px !important;
  opacity: 0;
  transition: transform 0.32s var(--lg-spring), opacity 0.24s ease;
  position: absolute;
}
.aimrun-ui-v88 #appBottomNav .app-tab-btn.v6-tab-active::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.aimrun-ui-v88 #appBottomNav .app-tab-btn > * { position: relative; z-index: 1; }

/* 激活图标弹跳 */
.aimrun-ui-v88 #appBottomNav .app-tab-btn.v6-tab-active .tab-icon-wrap {
  animation: lgTabBounce 0.34s var(--lg-spring) both;
  display: inline-block;
}
@keyframes lgTabBounce {
  0%   { transform: scale(1) translateY(0); }
  55%  { transform: scale(1.22) translateY(-2px); }
  100% { transform: scale(1.06) translateY(-1px); }
}

/* SF 双态图标：默认线性 / 激活填充 */
#appBottomNav .tab-svg { width: 22px; height: 22px; display: block; }
#appBottomNav .tab-fill { display: none; stroke: none; }
#appBottomNav .tab-line { display: block; }
#appBottomNav .app-tab-btn.v6-tab-active .tab-line { display: none; }
#appBottomNav .app-tab-btn.v6-tab-active .tab-fill { display: block; }

/* ── 教练中央球：液态玻璃发光球 ── */
#appBottomNav .coach-orb {
  width: 52px !important;
  height: 52px !important;
  margin-top: -22px;
  border-radius: 999px !important;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
    linear-gradient(155deg, #46d66e 0%, #2fbd57 55%, #1ea24a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -2px 6px rgba(0, 70, 25, 0.18) inset,
    0 6px 14px rgba(34, 170, 80, 0.35),
    0 14px 34px rgba(34, 170, 80, 0.38) !important;
  color: #fff !important;
  transition: transform 0.22s var(--lg-spring), box-shadow 0.25s ease !important;
}
#appBottomNav .coach-tab:active .coach-orb {
  transform: scale(0.9) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 10px rgba(52, 199, 89, 0.16),
    0 10px 26px rgba(34, 170, 80, 0.45) !important;
}
#appBottomNav .coach-tab.v6-tab-active .coach-orb { transform: scale(1.05); }

/* ================================================================
   4. 控件 —— 弹性按压 + 发光（Liquid Glass 触感）
   ================================================================ */
/* 主按钮（生成 / 评估并应用 / 登录 / 开始） */
.aimrun-ui-v88 #generateBtn,
.aimrun-ui-v88 #rpEval,
.aimrun-ui-v88 [data-home-start],
.aimrun-ui-v88 #profileLoginBtn {
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #3ecf66 0%, #22b455 55%, #17994a 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 60, 20, 0.14) inset,
    0 10px 26px -8px rgba(34, 170, 80, 0.6) !important;
  transition: transform 0.22s var(--lg-spring), box-shadow 0.25s ease, filter 0.2s ease !important;
}
.aimrun-ui-v88 #generateBtn:hover,
.aimrun-ui-v88 #rpEval:hover {
  filter: brightness(1.05);
}
.aimrun-ui-v88 #generateBtn:active,
.aimrun-ui-v88 #rpEval:active,
.aimrun-ui-v88 [data-home-start]:active,
.aimrun-ui-v88 #profileLoginBtn:active {
  transform: scale(0.965);
  filter: brightness(1.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 9px rgba(52, 199, 89, 0.14),
    0 8px 20px -6px rgba(34, 170, 80, 0.65) !important;
}

/* 选择型胶囊（距离 / 周期 / 模式 / 星期 / 支付 tab）：按压回弹 */
.aimrun-ui-v88 .distance-btn,
.aimrun-ui-v88 .week-btn,
.aimrun-ui-v88 #modeBoth,
.aimrun-ui-v88 #modeStudent,
.aimrun-ui-v88 .day-chip,
.aimrun-ui-v88 .student-day-btn,
.aimrun-ui-v88 .training-cat-tab,
.sponsor-wall__tab,
.pay-tab {
  transition: all 0.22s var(--lg-spring) !important;
  -webkit-tap-highlight-color: transparent;
}
.aimrun-ui-v88 .distance-btn:active,
.aimrun-ui-v88 .week-btn:active,
.aimrun-ui-v88 #modeBoth:active,
.aimrun-ui-v88 #modeStudent:active,
.aimrun-ui-v88 .day-chip:active,
.aimrun-ui-v88 .student-day-btn:active,
.aimrun-ui-v88 .training-cat-tab:active,
.sponsor-wall__tab:active,
.pay-tab:active { transform: scale(0.94); }

/* 导出 / footer 按钮 */
.aimrun-ui-v88 #exportSection button,
.aimrun-ui-v88 footer button {
  border-radius: 999px !important;
  white-space: nowrap;
  transition: transform 0.2s var(--lg-spring), box-shadow 0.2s ease !important;
}
.aimrun-ui-v88 #exportSection button:active,
.aimrun-ui-v88 footer button:active { transform: scale(0.95); }

/* 输入框聚焦光晕（绿玻璃） */
.aimrun-ui-v88 input:focus,
.aimrun-ui-v88 select:focus,
.aimrun-ui-v88 textarea:focus {
  border-color: #2fbd57 !important;
  box-shadow:
    0 0 0 4px rgba(52, 199, 89, 0.15),
    0 2px 10px -2px rgba(52, 199, 89, 0.25) !important;
  outline: none !important;
  transition: box-shadow 0.22s var(--lg-ease), border-color 0.2s ease;
}

/* iOS 风格滑杆（疲劳弹窗 RPE 等） */
.aimrun-ui-v88 input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fbd57, rgba(15, 40, 30, 0.14));
  outline: none;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.aimrun-ui-v88 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 0.5px solid rgba(15, 40, 30, 0.12);
  box-shadow: 0 1px 0 #fff inset, 0 3px 8px rgba(15, 23, 42, 0.24);
  transition: transform 0.2s var(--lg-spring);
}
.aimrun-ui-v88 input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.28); }

/* 单选/复选统一品牌绿 */
.aimrun-ui-v88 input[type="radio"],
.aimrun-ui-v88 input[type="checkbox"] { accent-color: #22b455; }

/* ================================================================
   5. 弹窗 —— 厚玻璃 + 从触发点弹性浮出
   （--pop-origin 由 index.html 内的小脚本按最后按压位置注入）
   ================================================================ */
@keyframes lgGlassPop {
  0%   { opacity: 0; transform: scale(0.78) translateY(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 遮罩：轻黑 + 景深模糊 */
#privacyOverlay, #feedbackOverlay, #announcementOverlay, #updateOverlay,
.sponsor-wall-backdrop {
  background: rgba(24, 34, 30, 0.24) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  animation: lgFadeIn 0.24s ease both;
}
#dailyFatigueModal {
  background: rgba(24, 34, 30, 0.24) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

/* 弹窗面板：厚玻璃 + 弹性浮出 */
#privacyModal [style*="background:white"],
#feedbackModal [style*="background:white"],
#announcementModal [style*="background:white"],
#updateModal [style*="background:white"],
#dailyFatigueModal > div,
.sponsor-wall {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 30px 80px -18px rgba(15, 23, 42, 0.4) !important;
  transform-origin: var(--pop-origin, 50% 62%);
  animation: lgGlassPop 0.42s var(--lg-spring) both;
}

/* 弹窗关闭按钮 → 圆形玻璃 */
#closePrivacy, #closeAnnouncement, #closeSponsor {
  background: rgba(15, 40, 30, 0.06) !important;
  border-radius: 999px !important;
  transition: transform 0.18s var(--lg-spring), background 0.2s ease;
}
#closePrivacy:active, #closeAnnouncement:active, #closeSponsor:active { transform: scale(0.88); }

/* ================================================================
   6. 卡片微交互 & 动效节奏
   ================================================================ */
/* 结果/课表卡片进入：轻微上浮 + 缩放（spring） */
#results > *, #weekSchedule > * {
  animation: lgCardEnter 0.3s var(--lg-ease) both;
}
.v6-card-enter { animation: lgCardEnter 0.32s var(--lg-spring) both; }
@keyframes lgCardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 生成按钮待机呼吸光环（沿用 .pulse-idle 类） */
@keyframes lgPulseRing {
  0%   { box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 0 0 0 rgba(52, 199, 89, 0.32), 0 10px 26px -8px rgba(34,170,80,0.6); }
  70%  { box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 0 0 14px rgba(52, 199, 89, 0), 0 10px 26px -8px rgba(34,170,80,0.6); }
  100% { box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 0 0 0 rgba(52, 199, 89, 0), 0 10px 26px -8px rgba(34,170,80,0.6); }
}
.aimrun-ui-v88 #generateBtn.pulse-idle { animation: lgPulseRing 2.4s infinite; }

/* 折叠面板过渡更顺滑 */
.aimrun-ui-v88 .collapsible-content {
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(15, 40, 30, 0.16); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 减少动画偏好 ── */
@media (prefers-reduced-motion: reduce) {
  .aimrun-ui-v88 #appBottomNav .app-tab-btn,
  .aimrun-ui-v88 #appBottomNav .app-tab-btn::before,
  #privacyModal [style*="background:white"],
  #feedbackModal [style*="background:white"],
  #announcementModal [style*="background:white"],
  #updateModal [style*="background:white"],
  #dailyFatigueModal > div,
  .sponsor-wall,
  #results > *, #weekSchedule > * {
    animation: none !important;
    transition: none !important;
  }
}
