/* App 卡片的网页重搭（首页「一天」、帮助文档配图共用）。颜色取自 App 源码（Theme.swift / DYDTheme.swift 7580a21），
 * 字体走系统字（App 就是 SF），数字等宽。进场动画由 home.js / site.js 加 .on；没 JS 时直接是终态。 */

:root {
  --pro:#1FC65E; --carb:#168EF7; --fat:#FF922B;                        /* Theme.proteinArc / carbArc / fatArc */
  --s-awake:#F5A084; --s-rem:#7DB7F8; --s-core:#4258D6; --s-deep:#302E86; /* Theme.sleep* */
  --ui-bg:#fff; --ui-line:rgba(0,0,0,.06); --ui-fill:#F2F2F7; --ui-2:#6E6E73; --ui-3:#8E8E93;
  --ui-shadow: 0 1px 1px rgba(16,16,40,.04), 0 8px 24px -6px rgba(16,16,40,.10), 0 32px 64px -24px rgba(16,16,40,.18);
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --s-awake:#F7A98C; --s-rem:#67C5FD; --s-core:#6476E0; --s-deep:#5462B2;
          --ui-bg:#1C1C1E; --ui-line:rgba(255,255,255,.08); --ui-fill:#2C2C2E; --ui-2:#AEAEB2; --ui-3:#8E8E93;
          --ui-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.7); }
}

/* ================================================================ App 零件 */
.ui { font-family:var(--sys); background:var(--ui-bg); border-radius:24px; box-shadow:var(--ui-shadow); padding:18px;
      color:var(--n-900); font-variant-numeric:tabular-nums; text-align:left; letter-spacing:0; line-height:1.35; }
.ui-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.ui-cap { font-size:12px; font-weight:600; color:var(--ui-3); letter-spacing:.01em; }
.ui-chip { font-size:11px; font-weight:600; color:var(--ui-2); background:var(--ui-fill); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.ui-chip.brand { color:var(--accent-ink); background:var(--accent-50); }
.ui-chip.ok { color:#1E8E4A; background:rgba(52,199,89,.12); }
@media (prefers-color-scheme: dark){ .ui-chip.ok { color:#30D158; } }
.ui-title { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.ui-big { font-size:40px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.ui-unit { font-size:13px; font-weight:600; color:var(--ui-3); margin-top:2px; }
.ui-sub { display:block; font-size:12px; color:var(--ui-2); margin-top:6px; }

/* 圆环：进场从 0 画到 --p（.on 由 home.js 加；没 JS 时直接是终态） */
.ring { width:96px; height:96px; transform:rotate(-90deg); flex:none; }
.ring circle { fill:none; }
.ring .track { stroke:var(--ui-fill); }
.ring .arc { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p));
             transition:stroke-dashoffset 1.4s cubic-bezier(.22,.8,.24,1) .15s, stroke .4s; }
.js .ui:not(.on) .ring .arc { stroke-dashoffset:100; }

/* 今日还能吃 */
.remain-main { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mrow { display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:10px; font-size:12px; margin-top:8px; }
.mlab { display:flex; align-items:center; gap:6px; color:var(--ui-2); font-weight:500; }
.dot { width:7px; height:7px; border-radius:50%; flex:none; }
.pro { background:var(--pro); } .carb { background:var(--carb); } .fat { background:var(--fat); }
.mbar { height:6px; border-radius:3px; background:var(--ui-fill); overflow:hidden; }
.mbar i { display:block; height:100%; width:var(--w); border-radius:3px; transition:width 1.2s cubic-bezier(.22,.8,.24,1) .3s; }
.js .ui:not(.on) .mbar i { width:0; }
.mval { font-weight:600; font-size:12px; } .mval small { color:var(--ui-3); font-weight:500; }

/* 组间休息 */
.rest-dial { position:relative; width:150px; height:150px; margin:4px auto 12px; }
.rest-dial .ring { width:150px; height:150px; }
.rest-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rest-num b { font-size:40px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.rest-num span { font-size:11px; color:var(--ui-3); margin-top:4px; }
.rest-ring .arc { transition:stroke-dashoffset 1s linear; }
.rest-next { display:flex; flex-direction:column; gap:1px; padding:10px 12px; background:var(--ui-fill); border-radius:14px; font-size:12px; }
.rest-next b { font-size:14px; } .rest-next span:last-child { color:var(--ui-2); }
.rest-btns { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:10px; }
.rest-btns span { height:36px; border-radius:999px; background:var(--ui-fill); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.rest-btns .solid { background:var(--accent); color:#fff; }

/* 今日训练状态 */
.ui-ready .ui-title { font-size:22px; }
.ui-ready .ui-sub { margin-top:2px; font-size:13px; }
.hypno { width:100%; height:auto; margin:14px 0 6px; }
.s-awake { fill:var(--s-awake); background:var(--s-awake); } .s-rem { fill:var(--s-rem); background:var(--s-rem); }
.s-core { fill:var(--s-core); background:var(--s-core); } .s-deep { fill:var(--s-deep); background:var(--s-deep); }
.hypno-key { display:flex; gap:12px; font-size:11px; color:var(--ui-2); margin-bottom:12px; flex-wrap:wrap; }
.hypno-key span { display:flex; align-items:center; gap:5px; } .hypno-key i { width:8px; height:8px; border-radius:2px; }
.evi { display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--ui-line); }
.evi .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; }
.evi .ico svg { width:17px; height:17px; }
.evi .moon { background:rgba(66,88,214,.12); color:var(--s-core); } .evi .pulse { background:rgba(240,69,59,.1); color:#F0453B; }
.evi div { display:flex; flex-direction:column; font-size:12px; color:var(--ui-2); } .evi b { font-size:13px; color:var(--n-900); }

/* 饮食时间线 */
.tl { display:flex; flex-direction:column; gap:8px; }
.tl-row { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--ui-fill); }
.tl-row .t { font-size:12px; color:var(--ui-3); font-weight:600; }
.tl-row div { display:flex; flex-direction:column; min-width:0; } .tl-row b { font-size:14px; }
.tl-row div span { font-size:12px; color:var(--ui-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-row .k { font-weight:700; font-size:15px; }
.tl-row.now { background:var(--accent-50); box-shadow:inset 0 0 0 1px var(--accent-200); }
.tl-add { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:14px; border:1px dashed var(--n-300); font-size:14px; font-weight:600; }
.tl-add i { font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--n-900); color:var(--paper); display:grid; place-items:center; font-size:16px; line-height:1; }
.ways { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ways span { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ui-2); padding:5px 9px; border-radius:999px; background:var(--ui-fill); }
.ways svg { width:13px; height:13px; }

/* 组数 + 这组感觉 */
.sets { margin:12px 0 4px; }
.set { display:grid; grid-template-columns:28px 1fr 1fr 34px; align-items:center; gap:8px; padding:7px 8px; border-radius:12px; font-size:16px; font-weight:600; }
.set small { font-size:11px; color:var(--ui-3); margin-left:2px; font-weight:500; }
.set .no { font-size:12px; color:var(--ui-3); text-align:center; }
.set.live { background:var(--accent-50); }
.tick { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--n-300); display:grid; place-items:center; font-size:14px; color:#fff; justify-self:end; }
.tick.on { background:var(--accent); border-color:var(--accent); }
.effort { margin-top:10px; padding:12px; background:var(--ui-fill); border-radius:16px; }
.effort-head { display:flex; justify-content:space-between; align-items:baseline; }
.effort-val { display:flex; align-items:baseline; gap:6px; font-size:13px; font-weight:600; color:var(--ui-2); }
.effort-val b { font-size:24px; color:var(--n-900); }
.effort-left { font-size:12px; color:var(--ui-2); margin-top:4px; }
/* 彩虹轨道 = Theme.hrZoneColors（心率五区），拇指白色——和 App 里系统 Slider 换了轨道一样 */
.effort-range { -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:6px 0 0; cursor:pointer; touch-action:pan-y; }
.effort-range::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(90deg,#3B8BF5,#2BC4CF,#8DC63F,#F5A524,#F04E8A); }
.effort-range::-moz-range-track { height:6px; border-radius:3px; background:linear-gradient(90deg,#3B8BF5,#2BC4CF,#8DC63F,#F5A524,#F04E8A); }
.effort-range::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; margin-top:-11px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.16), 0 1px 1px rgba(0,0,0,.1); transition:transform .15s; }
.effort-range::-moz-range-thumb { width:28px; height:28px; border:0; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.16); }
.effort-range:active::-webkit-slider-thumb { transform:scale(1.12); }
.effort-range:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; border-radius:8px; }

/* 吃练日记 */
.dia { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.dia > div { background:var(--ui-fill); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.dia b { font-size:24px; font-weight:700; } .dia b small { font-size:12px; color:var(--ui-3); }
.dia .ui-sub { margin-top:0; }
.dia-line { margin-top:10px; padding:12px; border-radius:14px; border:1px solid var(--ui-line); font-size:14px; color:var(--n-800); }