* { 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; }
  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; }
  h1 { font-size:20px; margin:0; }
  h2 { font-size:15px; 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:14px; }
  .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); }
  .legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:12px; }
  .legend i { display:inline-block; width:12px; height:12px; border-radius:3px;
              margin-right:5px; vertical-align:-1px; }
  .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:5px; flex:none; }
  .help .tip { display:none; position:absolute; bottom:140%; left:50%;
               transform:translateX(-50%); width:290px; 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); text-align:left;
               font-weight:400; text-transform:none; letter-spacing:normal;
               box-shadow:var(--popover-shadow); pointer-events:auto; cursor:auto;
               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; bottom:100%; left:-30px; right:-30px; height:10px; }
  .help:hover .tip { display:block; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th,td { text-align:right; padding:4px 8px; border-bottom:1px solid var(--line); }
  th { color:var(--muted); font-weight:500; }
  th:first-child,td:first-child { text-align:left; }