* { box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,sans-serif; margin:0; padding:18px; }
  @media (min-width:1100px){ body{ padding:26px max(40px,calc((100vw - 1200px)/2)); } }
  html[data-lang="zh"] body { font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",-apple-system,sans-serif; }
  a { text-decoration:none; color:var(--link); }
  h1 { font-size:20px; margin:0; } h2 { font-size:14px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
  .topline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .navbtn { display:inline-block; padding:5px 11px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-size:13px; font-weight:600; }
  .muted { color:var(--muted); }
  .lad { display:inline-block; padding:2px 10px; border-radius:11px; font-weight:700; font-size:12px;
         background:color-mix(in srgb, var(--c, var(--muted)) 16%, var(--panel)); color:color-mix(in srgb, var(--c, var(--muted)) 82%, var(--text)); }
  .lad.up { --c:var(--up); } .lad.down { --c:var(--down); } .lad.flat { --c:var(--muted); }
  .entrybar { display:flex; gap:10px; align-items:flex-start; margin:10px 0 4px; padding:9px 12px; border-radius:9px; background:var(--panel2); border-left:4px solid var(--muted); font-size:14px; }
  .entrytag { font-weight:800; font-size:12px; padding:3px 9px; border-radius:7px; background:var(--panel); border:1px solid var(--line); white-space:nowrap; }
  .urg-now .entrytag{background:var(--up);color:#fff;} .urg-now{border-left-color:var(--up);}
  .urg-imminent .entrytag{background:var(--g-cold);color:#fff;} .urg-imminent{border-left-color:var(--g-cold);}
  .urg-caution .entrytag{background:var(--warn);color:#1a1a1a;} .urg-caution{border-left-color:var(--warn);}
  .urg-exit .entrytag{background:var(--down);color:#fff;} .urg-exit{border-left-color:var(--down);}
  .agewhen { margin:6px 0; padding:7px 11px; border-radius:8px; background:var(--panel2); border-left:3px solid var(--link); font-size:13px; color:var(--text); }
  .agechip { font-size:11px; font-weight:700; padding:2px 7px; border-radius:9px; background:var(--panel); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
  .cyclebox { margin:8px 0; padding:9px 12px; border-radius:9px; background:var(--panel2); font-size:13px; line-height:1.6; }
  .card { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin:9px 0; }
  .help { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:10px; font-weight:600; cursor:help; position:relative; vertical-align:middle; margin-left:4px; }
  .help .tip { display:none; position:absolute; top:140%; left:50%; transform:translateX(-50%); width:280px; background:var(--panel); border:1px solid var(--line); padding:9px 11px; border-radius:8px; z-index:60; font-size:12px; line-height:1.45; color:var(--text); font-weight:400; text-transform:none; letter-spacing:normal; box-shadow:var(--popover-shadow); max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain; }
  /* invisible hover pad across the icon→tip gap — keeps :hover alive mid-travel (on .help, not .tip: the tip is a scroll container and clips its pseudos) */
  .help:hover::before { content:''; position:absolute; top:100%; left:-30px; right:-30px; height:10px; }
  .help:hover .tip { display:block; }
  .tv { margin-top:8px; }