@import url('./tokens.css');
/* 4.css — 高保真首页样式 */
:root{
  /* token: paint_13:12803 */
  --tabbar-bg: var(--color-tabbar-bg, #E5F0FF);
  /* token: paint_1:060 */
  --card-bg: var(--card, #FFFFFF);
  /* token: paint_1:083 */
  --banner-bg: var(--color-video-bg, #E2E5EB);
  /* token: paint_13:755 / paint_13:31328 */
  --tab-color: var(--tab, #3D3D3D);
  --tab-active: var(--tab-active, #1E40AF);
  /* spacing scale */
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;align-items:center;justify-content:center;background:#FFFFFF;color:var(--text-base);font-family:var(--font);overflow:hidden}
.app{width:390px;height:844px;background:var(--bg-grad);display:grid;grid-template-rows:auto auto auto 1fr auto;box-shadow:0 12px 36px rgba(0,0,0,0.06);overflow-y:auto;overflow-x:hidden}

/* 状态栏 */
.statusbar{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--statusbar-bg,#C1DCFE)}
.statusbar .bat{display:inline-block;width:24px;height:12px;border:1px solid rgba(0,0,0,.36);border-radius:2px;position:relative}
.statusbar .bat i{position:absolute;inset:2px;background:#000;border-radius:1px}
.statusbar .wifi,.statusbar .sig{width:16px;height:12px;background:#000;display:inline-block;border-radius:2px;opacity:.9}

/* ---- 从 2.css 迁移的样式（状态栏/topbar/tabs/tabbar） ---- */
.status-bar{height:47px;background:#C1DCFE;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--divider);z-index:10;position:relative}
.status-bar .time{font-weight:700;font-size:14px;color:#000}
.status-bar .sb-icons{display:flex;align-items:center;gap:8px}
.status-bar .sb-icon{display:block}

/* Topbar */
.topbar { display:flex; align-items:center; gap:12px; padding:8px 20px; }
.icon-btn { appearance:none; border:none; background:transparent; padding:0; cursor:pointer; }
.ios-icon { color:#231F20; }
.topbar .icon-btn.ios-icon{ color:#0B1F86; }
.search-pill { flex:1; height:32px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06); display:flex; align-items:center; padding:0 12px; color:#9ca3af; }

/* Tabs */
.tabs { display:flex; align-items:center; gap:30px; padding:8px 20px; overflow-x:auto; margin-bottom: var(--space-md); }
.tabs .tab { padding:6px 0; border:none; background:transparent; color: var(--tab-color); font-size:16px; }
.tabs .current { color: #000; position:relative; font-weight:600; }
.tabs .current::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:#3B7CFF; border-radius:2px; }

/* Bottom tabbar (from 2.css) */
.tabbar{position:sticky; left:0; right:0; bottom:0; height:50px; background:rgba(208,228,255,0.55); display:flex; align-items:center; justify-content:space-around; border-top:1px solid transparent}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; color:#3D3D3D; font-size:12px}
.tabbar .tab.active{color:#1E40AF}
.tab span{font-size:12px}
.tab .tab-icon{stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* Blue circular background for AI tab */
.tab .tab-icon.tab-ai,
.tabbar-item svg.tab-ai,
.tabbar-item .tab-icon.tab-ai {
  display: inline-grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  background: linear-gradient(180deg, #E9F1FF 0%, #D0E2FF 100%);
  color: var(--tab);
  padding: 8px;
  box-sizing: border-box;
  /* configurable via --tab-ai-shift */
  transform: translateY(var(--tab-ai-shift));
}
.tab .tab-icon.tab-ai *,
.tabbar-item svg.tab-ai * {
  stroke: currentColor !important;
  fill: currentColor !important;
  vector-effect: non-scaling-stroke;
}

.tab .tab-icon.tab-ai + .tab-link,
.tab .tab-icon.tab-ai + span,
.tabbar-item svg.tab-ai + .tab-link,
.tabbar-item svg.tab-ai + span,
.tabbar-item .tab-icon.tab-ai + .tab-link,
.tabbar-item .tab-icon.tab-ai + span {
  display:inline-block;
  transform: translateY(var(--tab-ai-shift));
}

.tabbar { overflow: visible; }

/* 顶部标签 */
.top-tabs{display:flex;gap:30px;align-items:center;padding:12px 24px}
.top-tabs a{color:var(--tab-color);text-decoration:none;font-size:16px}
.top-tabs a.active{color:var(--tab-active);font-weight:600}

/* 轮播 */
.carousel{width:350px;height:164px;background:var(--banner-bg);border-radius:12px;margin:4px auto var(--space-lg);position:relative;overflow:hidden;box-shadow:var(--shadow-card,0 2px 10px rgba(120,162,215,.6))}
.carousel .slides{display:flex;width:100%;height:100%;transition:transform .5s ease}
.carousel .slides img{width:100%;height:100%;object-fit:cover;flex:0 0 100%}
.carousel .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:8px}
.carousel .dot{width:32px;height:4px;border-radius:2px;background:#fff;opacity:.4;border:none}
.carousel .dot.active{opacity:1}

.section-title{font-size:14px;font-weight:600;color:var(--tab-color);padding:0 20px;margin:0 0 var(--space-md)}

/* 统计卡片 */
.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);padding:0 20px 0}
.card{background:var(--card-bg);border-radius:8px;box-shadow:var(--shadow-weak,0 1px 2px rgba(0,0,0,.05));padding:6px}
.card-hd{font-size:11px;font-weight:600;color:var(--tab-color);opacity:.85;letter-spacing:.2px;margin-bottom:6px}
.card .badge{margin-left:auto;width:fit-content;padding:2px 6px;border-radius:4px;background:linear-gradient(180deg,#7FE6F9 0%,#8A74FB 100%);color:#0a2540;font-size:9px}
.card .metric{font-size:13px;color:var(--tab-color);display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.card .metric .k{font-weight:600}
.card .metric .label{opacity:.7}
.card .metric .value{font-weight:700;font-size:14px}
.card .metric .unit{opacity:.7;font-size:12px;margin-left:2px}
.card .metric .dot{display:inline-block;width:4px;height:4px;background:#9CA3AF;border-radius:50%;margin:0 6px;transform:translateY(-1px)}
.card .metric.multiline{white-space:pre-line;font-size:12px}
.card .state{font-size:11px;color:var(--tab-color);margin-top:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;line-height:1;border:1px solid transparent;width:fit-content}
.card .state .icon{width:12px;height:12px}
.card .state.ok{background:#E6F7EC;color:#16a34a;border-color:#B7E3C0}
.card .state.pending{background:#EFF6FF;color:#1E40AF;border-color:#C7D2FE}

/* 迷你曲线图 */
.mini-graph{height:42px;margin-bottom:8px}
.mini-graph svg{width:100%;height:100%;display:block}

/* 进度条 */
.progressbar{height:6px;background:#EEF2F7;border-radius:999px;overflow:hidden;margin-top:6px}
.progressbar .bar{height:100%;width:75%;background:linear-gradient(90deg,#8A74FB 0%,#7FE6F9 100%)}

/* 训练区 */
.row-title{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-top:20px}
.row-title .section-title{padding:0;transform:translateY(2px)}
.action-link{color:var(--tab-color);text-decoration:none;font-size:12px}
.train-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:8px 20px 0}
.train-card{position:relative;margin:0}
.train-card img{width:100%;height:90px;object-fit:cover;border-radius:8px;display:block}
.train-card figcaption{position:absolute;left:8px;top:6px;font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.train-card figcaption.dark{color:#111;text-shadow:none}

/* 会员横幅 */
.vip-banner{position:relative;margin:var(--space-sm) 20px var(--space-lg);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-card,0 2px 10px rgba(120,162,215,.6))}
.vip-banner img{width:100%;height:88px;object-fit:cover;display:block}
.vip-overlay{position:absolute;inset:0;display:grid;align-content:center;justify-items:end;padding-right:12px;gap:4px}
.vip-chip{position:absolute;left:9px;top:6px;font-size:9px;background:#CDBE37;color:#0f172a;padding:2px 6px;border-radius:12px}
.vip-tt{font-size:22px;color:#111}
.vip-sub{font-size:12px;color:#111}

/* 底部导航（对齐 2.css） */
.tabbar{position:sticky; left:0; right:0; bottom:0; height:50px; background:rgba(208,228,255,0.55); display:flex; align-items:center; justify-content:space-around; border-top:1px solid transparent}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; color:#3D3D3D; font-size:12px}
.tabbar .tab.active{color:#1E40AF}
.tab span{font-size:12px}
.tab .tab-icon{stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* 固定高度为 844 时不再使用 100dvh 自适应高度 */

/* Toast 提示（对齐 2/3 页） */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px); background: rgba(0,0,0,0.8); color: #fff; padding: 8px 12px; border-radius: 16px; font-size: 12px; opacity: 0; pointer-events: none; z-index: 1000; backdrop-filter: blur(2px); }
.toast.show { animation: toast-in 120ms ease-out forwards, toast-out 200ms ease-in 1800ms forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(12px); } }