/* 节点可达性标记：三个视角各一枚圆点，颜色即状态。
   颜色与后台状态点同源（绿 = 通畅，黄 = 被拒/部分，红 = 不通/异常，灰 = 未检），
   图例由各页自带。悬停/聚焦弹出的小面板是全站唯一允许的悬浮面：
   白底、1px 规则线、一层软阴影，方角。
   数据超过 24 小时未更新时圆点降为半透明，"数据可能过期"写在面板里。 */
.views{display:inline-flex;gap:14px;align-items:center;vertical-align:middle;flex-wrap:wrap}
/* 点前节点名标注：名字跟随后台节点，点=节点。 */
.view-unit{display:inline-flex;align-items:center;gap:5px}
.view-label{font-size:13px;color:#666;line-height:1;white-space:nowrap}
/* 名字下面的圆点行必须独占一行：.views 的 inline-flex 会覆盖 .subline 的 block。 */
.subline.views{display:flex;margin-top:4px}
/* 可达性标记：9px 方块、2px 圆角（用户 2026-09-18 选的款式 8）。
   站内其它元素都是方角，圆角 2px 让它比纯方块柔和一点，又不至于像圆点那样跟方角语言冲突。
   **未检 = 空心框**而不是浅灰实心：空心读作"这里还没有数据"，
   浅灰实心读作"有数据但很淡"；而且 #d4d4d8 在灰底上只有 1.34:1，等于看不见。 */
.view{position:relative;width:9px;height:9px;border-radius:2px;background:transparent;border:1px solid #8b8b8f;cursor:default;flex:none}
.view.ok{background:var(--dot-ok,#16a34a);border-color:transparent}
.view.warn{background:var(--dot-warn,#f59e0b);border-color:transparent}
.view.bad{background:var(--dot-bad,#dc2626);border-color:transparent}
.view.stale{opacity:.4}
.view:focus-visible{outline:2px solid #06c;outline-offset:3px}
/* 触屏热区：9px 的标记本身点不中，向外扩一圈隐形热区。 */
.view::after{content:"";position:absolute;inset:-6px}
.view .panel{position:absolute;top:calc(100% + 9px);left:0;z-index:40;min-width:236px;padding:10px 12px;border:1px solid #6d6d6d;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);font-size:13px;line-height:1.55;color:#000;white-space:nowrap;display:none;text-align:left}
.view:hover .panel,.view:focus-visible .panel{display:block}
/* 图例：两行、各带标题（节点可达性 / 可用性检测）。标题固定宽度让两行色块对齐。
   2026-09-18 简化：原来是一行 8 个色块 + 一句 30 字说明，信息重复、密度太高。
   现在 7 项、两行标题、没有长句——「Key 失效」交给条带下方那行文字讲。 */
.views-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:0 0 12px;color:#555;font-size:13px;line-height:20px}
.views-legend .legend-item{display:inline-flex;align-items:center;gap:7px}

.views-legend .legend-title{color:#8a8a8a}
.views-legend .views{gap:12px}
.views-legend .views .view{width:9px;height:9px}
/* 色块记号：图例与问号面板共用（问号面板里的色块由 colHelp.rich() 生成）。 */
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none;vertical-align:-1px}
.panel .swatch{margin-right:6px}
.swatch.g{background:#16a34a}
.swatch.r{background:#dc2626}
.swatch.nd{background:rgba(0,0,0,.22)}
/* 节点四态：与圆点同色；「未检」是空心框，跟圆点一致（少了这四条，面板里的节点色块是隐形的）。 */
.swatch.ok{background:#16a34a}
.swatch.warn{background:#f59e0b}
.swatch.bad{background:#dc2626}
.swatch.off{background:transparent;border:1px solid #8b8b8f}
.swatch.a{background:#97979d}
/* 站点卡片里的问号：`.site-fact span{display:block}` 会把它顶到下一行，这里压回来。 */
.site-fact .th-help{display:inline-block}
/* 最右列那个问号（节点访问）的面板要往**左**展开：默认 left:-8px 会在 1280/1024 下探出视口。 */
/* 只在宽屏：窄屏下 `.site-facts` 变成单列，第三个不再是右列，硬往左展开会跑到屏幕外。 */
@media(min-width:901px){.site-facts>.site-fact:nth-child(3) .th-help .panel{left:auto;right:-8px}}
/* 模型品牌图标：16px 定尺、不换行、超出计 +N，保证表格行永不错位。 */
/* 厂商图标：白底 PNG 用 multiply 融合进当前底色，悬停紫底不再出现白方块。 */
.brand-ico{width:21px;height:21px;flex:none;vertical-align:-4px;object-fit:contain;mix-blend-mode:multiply}
.brand-strip{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;max-width:100%;overflow:hidden;vertical-align:middle}
.brand-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;white-space:nowrap}
.brand-more{color:#6b6b6b;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.brand-none{color:#888;font-size:13px}
.brand-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* 编辑档位徽标（收录 / 推荐）：编辑选择，非评分。 */
/* 编辑挑选的档位标记（收录 / 推荐）：1px 灰框的角标，抬在站点名右上角。
   不用紫底——紫色在本站是悬停/选中色，铺底会在悬停时整个融进行背景里（旧版就是这样消失的）。 */
.tier-badge{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid #c9c9c9;color:#555;font-size:13px;line-height:16px;font-weight:400;vertical-align:4px;white-space:nowrap}
/* KEY 实测：84 格两小时热力条，3 排 × 28 列。
   **几何：每格 6×6 正方形、间隙 2px → 总宽 222px、总高 22px**（2026-09-18 定）。
   原来写的是 `grid-template-columns:repeat(28,1fr)` + `grid-auto-rows:5px`：
   列在 224px 里自动分配成 6.07px，行高写死 5px，格子宽高比 1.21 —— **横向拉长**，
   84 个拉长的格子排起来怎么填色都别扭（用户："为什么都看起来好像不是正方形"）。
   列宽和行高必须给同一个 px 值。

   每格 = 2 小时。**墨水量模型**：有数据才上色——
   全部成功 = 实心绿，出现过失败 = 实心红，监测 Key 失效 = 实心灰，
   **无样本 = 半透明中性填充 `rgba(0,0,0,.22)`**。
   半透明黑在**任何底色上都成立**（它压暗身后的颜色），所以白底、灰面板、
   悬停紫三种底不用分别调色；这也修掉了"浅灰填充在悬停紫底上 1.02:1 看不见"的坑。

   为什么不用"淡绿"表示无样本：原来 .nd 只是把"通畅"的同一个绿调淡到 38%，
   于是「我们什么都没测到」和「一切正常」穿同一件制服——图形比文字更响，
   新站默认满绿等于给它一个虚假的健康背书。 */
.meter{display:grid;grid-template-columns:repeat(28,6px);grid-auto-rows:6px;gap:2px;width:222px;margin-bottom:4px;cursor:default}
.meter .c{background:#16a34a}
.meter .c.r{background:#dc2626}
.meter .c.a{background:#97979d}
.meter .c.nd{background:rgba(0,0,0,.22)}
.meter:focus-visible{outline:2px solid #06c;outline-offset:3px}
.checkbar-note{display:block;font-size:13px;color:#666;line-height:19px}
.checkbar-note b{color:#050505}
/* 表头里的列级时间戳：跟「可用性检测 ?」同一排，字号小一号、颜色更淡，
   免得跟列名抢注意力。整列共用一个值（表头放不下每个站点各自的时间）。 */
.col-stamp{margin-left:6px;font-size:12px;font-weight:400;color:#8a8a8a;white-space:nowrap}
/* 表头问号：一枚 14px 的方框问号，悬停/聚焦弹出这一列的说明。
   与可达性圆点的浮层同一套语言（白底、1px 规则线、软阴影、方角）。 */
.th-help{position:relative;display:inline-block;margin-left:5px;width:14px;height:14px;border:1px solid #c9c9c9;color:#777;font-size:11px;line-height:12px;font-weight:400;text-align:center;vertical-align:1px;cursor:default;white-space:normal}
.th-help:hover,.th-help:focus-visible{outline:0;border-color:#6d6d6d;color:#050505}
.th-help .panel{position:absolute;top:calc(100% + 8px);left:-8px;z-index:40;width:284px;padding:10px 12px;border:1px solid #6d6d6d;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);font-size:13px;font-weight:400;line-height:20px;color:#000;text-align:left;display:none}
/* 浮层内容分两层：一句"这是什么"（墨色）+ 若干条"怎么读"（灰、带点）。
   一坨话没人看，分行带点才扫得动。可达性标记与表头问号共用同一套排版。 */
.panel .lead{display:block;color:#050505;margin-bottom:4px}
.panel .li{display:block;position:relative;padding-left:11px;color:#555}
/* 浮层不继承表头的 text-transform:uppercase —— 否则面板里的「Key」会显示成「KEY」。 */
.panel{text-transform:none}
.panel .li::before{content:"·";position:absolute;left:1px;color:#aaa}
.th-help:hover .panel,.th-help:focus-visible .panel{display:block}
/* 右侧几列的问号靠右展开，避免浮层伸出表格右边缘。
   首页站点表按列数取尾部两列；模型详情的站点表另算。
   （首页模型表不加问号——列名一目了然，用户明确说不用。） */
#sites .index-table th:nth-last-child(-n+2) .th-help .panel,
.site-table th:nth-last-child(-n+2) .th-help .panel{left:auto;right:-8px}
/* 模型详情那张表是自动布局、列窄，不加这条「充值比例」会把问号挤到第二行。
   表格会自动把列宽让出来，实测不产生横向滚动。 */
.site-table th{white-space:nowrap}
/* 支付与售后（首页 / 站点目录的紧凑列）：只有两种状态。
   支持 = 实底标记（品牌色淡底 + 同色字；退款 / 发票不是品牌，用中性淡灰）；
   没核实过的项不逐项出框，末尾用一句「未公开」兜底。 */
.fact-row{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.fact-token{font-size:13px;line-height:19px;white-space:nowrap;padding:0 5px}
.fact-token[data-key="alipay"]{background:#e8f1ff;color:#1677ff}
.fact-token[data-key="wechat_pay"]{background:#e6f8ef;color:#07c160}
.fact-token[data-key="usdt"]{background:#e7f5f1;color:#26a17b}
.fact-token[data-key="refundable"],
.fact-token[data-key="invoice_available"]{background:#f0efed;color:#5c5c5c}
/* 「未公开」兜底：也给个框，不然跟前面几个实底标记并排时看着缺一块。
   用**空心框**——实底 = 核实过，空心 = 没核实，一眼分得开。
   字色 #767676 而不是 #9c9c9c：后者在白底上只有 2.75:1，13px 正文要求 4.5:1。 */
.fact-unknown{font-size:13px;line-height:19px;white-space:nowrap;padding:0 5px;border:1px solid #dcdcdc;color:#767676;cursor:default}
.fact-ico{display:block;flex:none;object-fit:contain}
.fact-empty{color:#858585;font-size:13px}
/* 站点详情的事实岛是两列网格，这一块独占一行；类名不叫 .fact，避免被页面里
   的 `.fact span{display:block}` 命中（那会把图标逐个撑成竖排）。 */
.fact-block{grid-column:1/-1}
.fact-block-label{display:block;margin-bottom:6px;color:#555;font-size:14px;line-height:21px}
.fact-list{list-style:none;margin:0;padding:0;border-top:1px solid #e2e0dc}
.fact-list li{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #e2e0dc;font-size:13px;line-height:19px}
.fact-list-name{min-width:80px}
.fact-list-state{margin-left:auto;color:#050505}
.fact-list li[data-state="no"] .fact-list-state{color:#9c9c9c}
.fact-list li[data-state="unknown"] .fact-list-state{color:#8a8a8a}
.fact-list li[data-state="no"] .fact-ico,
.fact-list li[data-state="unknown"] .fact-ico{filter:grayscale(1);opacity:.38}