/* Aivaro 导航站 · 视觉令牌与样式（原创实现） */
:root{
  /* v4 浅色：黑白中性语言（对标真机截图的搭配关系）——白底、近黑字、黑实心主操作、
     绿/橙仅作语义色；行动色为黑白中性（品牌图标本身的蓝紫丝带不动）。 */
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --ink:#111113;
  --ink-2:rgba(17,17,19,.74);
  --ink-3:rgba(17,17,19,.62);
  --line:rgba(17,17,19,.16);
  --line-soft:rgba(17,17,19,.08);
  --accent:#111113;
  --link:#111113;
  --accent-ink:#FFFFFF;
  --accent-dim:rgba(17,17,19,.06);
  --wash:rgba(17,17,19,.04);
  --solid:#111113;
  --solid-ink:#FFFFFF;
  --field:#F4F4F5;
  --bar:#22C55E;
  --ok:#15803D;
  --warn:#9A3412;
  --err:#DC2626;
  --glass-bg:rgba(255,255,255,.88);
  --glass-blur:16px;
  --glass-border:1px solid rgba(17,17,19,.10);
  --glass-shadow:0 24px 60px rgba(17,17,19,.14), inset 0 1px 0 rgba(255,255,255,.6);
  --r-s:2px; --r-m:2px; --r-l:3px; --r-xl:3px;
  --shadow-card:0 1px 2px rgba(17,17,19,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--surface); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* 顶栏：图标＋字标＋右上角单一入口（沿用 final-w 收纳模式，简化） */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--line-soft);
}
.topbar-in{display:flex; align-items:center; gap:10px; height:60px; max-width:1120px; margin:0 auto; padding:0 20px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:19px; letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px; border-radius:2px}
.brand small{font-weight:500; color:var(--ink-3); font-size:12px; margin-left:2px}
.topbar-sp{flex:1}
.menu-btn{
  width:40px; height:40px; border-radius:2px; border:1px solid var(--line-soft);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.menu-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.menu-btn svg{width:20px; height:20px; stroke:var(--ink)}
.sheet{
  position:absolute; top:68px; right:16px; width:280px; max-width:calc(100vw - 32px);
  background:rgba(255,255,255,.97); border:var(--glass-border); border-radius:var(--r-l);
  box-shadow:var(--glass-shadow); padding:10px; display:none;
}
.sheet.open{display:block}
.sheet a{display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:2px; color:var(--ink); font-size:15px}
.sheet a:hover{background:var(--wash); text-decoration:none}
.sheet .sheet-h{font-size:12px; color:var(--ink-3); padding:10px 12px 4px}
.sheet hr{border:none; border-top:1px solid var(--line-soft); margin:6px 4px}

/* 首页头图区：极光只作低饱和水彩晕 */
.hero{position:relative; overflow:hidden; padding:64px 0 40px}
.hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:420px; pointer-events:none;
  background:none;
}
.hero h1{position:relative; font-size:34px; line-height:1.3; margin:0 0 10px; font-weight:800; letter-spacing:.2px}
.hero p.lede{position:relative; color:var(--ink-2); font-size:16px; margin:0 0 26px; max-width:640px}
.bigsearch{position:relative; display:flex; gap:10px; max-width:720px}
.bigsearch input{
  flex:1; height:62px; border-radius:2px; border:2px solid var(--ink-2);
  padding:0 18px; font-size:17px; color:var(--ink); background:#fff;
}
.bigsearch input::placeholder{color:var(--ink-3)}
.bigsearch .btn{height:62px}
.bigsearch input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:54px; padding:0 26px; border-radius:2px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:600;
}
.btn:hover{filter:brightness(1.07)}
.btn.sm{height:42px; padding:0 18px; font-size:14px; border-radius:2px}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{filter:none; background:var(--wash)}

/* 分类入口 */
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:8px 0 6px}
.cat{
  border:1px solid var(--line-soft); border-radius:var(--r-l); padding:16px; background:#fff; color:var(--ink);
  box-shadow:var(--shadow-card);
}
.cat:hover{text-decoration:none; border-color:var(--line)}
.cat b{display:block; font-size:16px; margin-bottom:2px}
.cat span{font-size:13px; color:var(--ink-3)}
.cat em{font-style:normal; color:var(--accent); font-size:13px; display:block; margin-top:8px}

section.blk{padding:30px 0 6px}
.blk-h{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
.blk-h h2{font-size:21px; margin:0; font-weight:750; flex:none}
.blk-h span{color:var(--ink-3); font-size:13px}
.blk-h a{margin-left:auto; font-size:14px; flex:none; white-space:nowrap}

/* 服务卡片 */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.card{
  border:1px solid var(--line-soft); border-radius:var(--r-l); background:#fff;
  padding:20px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;
}
.card-top{display:flex; align-items:flex-start; gap:10px}
.card h3{margin:0; font-size:17px; line-height:1.35}
.card h3 a{color:var(--ink)}
.card .tag{color:var(--ink-2); font-size:14px; margin:0}
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:2px; white-space:nowrap;
}
.badge.rec{background:var(--accent); color:#fff}
.badge.nav{background:rgba(185,122,18,.12); color:var(--warn)}
.badge.ok{background:rgba(30,158,98,.10); color:var(--ok)}
.badge.dim{background:var(--wash); color:var(--ink-2)}
.card .meta{font-size:13px; color:var(--ink-2); display:grid; gap:3px}
.card .meta b{color:var(--ink); font-weight:600}
.card .foot{margin-top:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3)}
.card .foot a.go{margin-left:auto; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; padding:3px 9px; border-radius:2px; background:var(--accent-dim); color:var(--accent); font-weight:600}
.chip.grey{background:var(--wash); color:var(--ink-2)}

/* 推荐 tooltip */
.tip{position:relative; display:inline-flex}
.tip .tip-body{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:250px; background:var(--ink); color:#fff; font-size:13px; font-weight:400; line-height:1.55;
  border-radius:2px; padding:10px 12px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:5;
  box-shadow:var(--glass-shadow); text-align:left;
}
.tip:hover .tip-body, .tip:focus-within .tip-body{opacity:1}
.tip button{
  all:unset; cursor:pointer; display:inline-flex;
}
.tip button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

/* 最新收录列表 */
.latest{border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden}
.latest a{
  display:flex; gap:14px; align-items:baseline; padding:14px 18px; color:var(--ink);
  border-top:1px solid var(--line-soft);
}
.latest a:first-child{border-top:none}
.latest a:hover{background:var(--wash); text-decoration:none}
.latest time{color:var(--ink-3); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums}
.latest .lt{color:var(--ink-2); font-size:14px; margin-left:auto; text-align:right}

/* 目录筛选栏 */
.filters{
  border:1px solid var(--line-soft); border-radius:var(--r-l); background:#fff;
  box-shadow:var(--shadow-card); padding:16px; display:grid; gap:12px; margin:18px 0;
}
.filters .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.filters label{font-size:13px; color:var(--ink-3); display:flex; flex-direction:column; gap:4px}
.filters select, .filters input[type=search]{
  height:40px; border:1px solid var(--line); border-radius:2px; padding:0 10px; font-size:14px; color:var(--ink); background:#fff;
}
.filters input[type=search]{min-width:200px; flex:1}
.filters select:focus, .filters input:focus{outline:2px solid var(--accent); outline-offset:1px}
.preset-note{display:flex; gap:10px; align-items:center; font-size:14px}
.preset-note .chip{font-size:13px; padding:5px 12px}
.result-line{color:var(--ink-3); font-size:14px; margin:4px 0 14px}
.empty{border:1px dashed var(--line); border-radius:var(--r-l); padding:34px; text-align:center; color:var(--ink-2)}

/* 比价 */
.seg{display:inline-flex; background:rgba(17,17,19,.06); border-radius:2px; padding:3px; gap:2px; flex-wrap:wrap}
.seg button{
  border:none; background:transparent; cursor:pointer; padding:8px 16px; border-radius:2px;
  font-size:14px; color:var(--ink-2); font-weight:600;
}
.seg button[aria-pressed=true]{background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(17,17,19,.12)}
.tablewrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-l); box-shadow:var(--shadow-card)}
table.cmp{border-collapse:collapse; width:100%; min-width:760px; background:#fff}
table.cmp th, table.cmp td{padding:13px 16px; text-align:left; border-top:1px solid var(--line-soft); font-size:14px; vertical-align:top}
table.cmp thead th{border-top:none; background:var(--wash); font-size:13px; color:var(--ink-2)}
table.cmp td.price{font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap}
table.cmp tr.best td{background:rgba(30,158,98,.05)}
.note{font-size:13px; color:var(--ink-3); margin-top:12px}

/* 详情页 */
.detail-h{padding:34px 0 6px}
.detail-h h1{font-size:28px; margin:0 0 6px}
.detail-h .tag{color:var(--ink-2); font-size:16px; margin:0}
.kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:18px 0}
.kv .cell{border:1px solid var(--line-soft); border-radius:var(--r-m); padding:14px 16px}
.kv .cell h4{margin:0 0 5px; font-size:13px; color:var(--ink-3); font-weight:600}
.kv .cell div{font-size:15px}
.unknown{color:var(--warn); font-weight:600}
.pc-list{margin:0; padding-left:20px}
.pc-list li{margin:6px 0}
.pc-list .basis{color:var(--ink-3); font-size:12px}
.leave-note{font-size:13px; color:var(--ink-3); margin-top:8px; max-width:520px}
.src-box{border:1px solid var(--line-soft); border-radius:var(--r-m); padding:16px; background:var(--wash); font-size:14px}

/* 页脚 */
footer{margin-top:56px; border-top:1px solid var(--line-soft); padding:28px 0 44px; color:var(--ink-2); font-size:13px}
footer .rel{max-width:760px}
footer .disclaimer{max-width:760px; color:var(--ink-3); font-size:12px; line-height:1.7}
footer nav{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px}
footer nav a{color:var(--ink-2)}

.page-h{padding:30px 0 4px}
.page-h h1{font-size:26px; margin:0 0 6px}
.page-h p{color:var(--ink-2); margin:0; max-width:680px}

@media (max-width:640px){
  .hero{padding:44px 0 30px}
  .hero h1{font-size:27px}
  .bigsearch{flex-direction:column}
  .bigsearch input{flex:none} /* 纵向 flex 下 flex:1 的 basis 会压掉 height，须解除（2026-11-04 断言 h=24 抓到） */
  .bigsearch .btn{width:100%}
  .grid{grid-template-columns:1fr}
  .latest .lt{display:none}
  .detail-h h1{font-size:24px}
  /* 推荐 tooltip 在窄屏改为贴右缘展开，避免探出视口 */
  .tip .tip-body{left:auto; right:-6px; transform:none; width:min(230px,72vw)}
}

/* ===== v2 高保真对标升级（原创样式） ===== */

/* 顶栏搜索入口 */
.search-btn{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  border-radius:2px; border:1px solid var(--line-soft); background:#fff; cursor:pointer;
  color:var(--ink-3); font-size:13px;
}
.search-btn:hover{border-color:var(--line); color:var(--ink-2)}
.search-btn svg{width:17px; height:17px; stroke:var(--ink-3)}
.search-btn kbd{
  font-family:inherit; font-size:11px; color:var(--ink-3); background:var(--wash);
  border:1px solid var(--line-soft); border-radius:2px; padding:1px 5px;
}
.search-btn .sb-label{font-size:13px}
.topbar-actions{display:flex; gap:8px; align-items:center}

/* 全局搜索面板 */
.search-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.34);
  display:flex; align-items:flex-start; justify-content:center; padding:9vh 16px 16px;
}
.search-overlay[hidden]{display:none}
.search-panel{
  width:640px; max-width:100%; background:#fff; border-radius:var(--r-l);
  box-shadow:var(--glass-shadow); overflow:hidden; display:flex; flex-direction:column; max-height:76vh;
}
.search-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft)}
.search-head svg{width:20px; height:20px; stroke:var(--ink-3); flex:none}
.search-head input{flex:1; border:none; font-size:17px; color:var(--ink); background:transparent; min-width:0}
.search-head input:focus{outline:none}
.search-head kbd{
  font-family:inherit; font-size:11px; color:var(--ink-3); background:var(--wash);
  border:1px solid var(--line-soft); border-radius:2px; padding:2px 6px; flex:none;
}
.search-results{overflow-y:auto; padding:6px}
.search-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:2px; color:var(--ink);
}
.search-item:hover{text-decoration:none; background:var(--wash)}
.search-item.sel{background:var(--accent-dim); text-decoration:none}
.si-main{display:flex; flex-direction:column; min-width:0}
.si-main strong{font-size:15px}
.si-main span{font-size:13px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.si-side{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); flex:none}
.search-empty{padding:22px; text-align:center; color:var(--ink-2); font-size:14px}
.search-foot{
  display:flex; justify-content:space-between; gap:10px; padding:10px 16px;
  border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-3);
}

/* 卡片 v2 */
.card-badges{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.badge.new{background:var(--ink); color:#fff}
.badge.com{background:rgba(201,58,58,.10); color:var(--err)}
.chip.more{background:transparent; border:1px dashed var(--line); color:var(--ink-3)}
.domain{font-size:12.5px; color:var(--ink-3); margin-top:-6px}
.payrow{display:flex; align-items:center; flex-wrap:wrap; gap:5px}
.payrow-h{color:var(--ink-3); margin-right:2px}
.pay{
  font-size:11.5px; padding:2px 8px; border-radius:2px; background:#fff;
  border:1px solid var(--line-soft); color:var(--ink-2); font-weight:600;
}
.statusline{display:inline-flex; align-items:center; gap:7px}
.dot{width:8px; height:8px; border-radius:2px; flex:none; display:inline-block}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.card-actions{display:flex; gap:8px; border-top:1px solid var(--line-soft); padding-top:12px; margin-top:auto}
.card-actions a.go{
  flex:1; text-align:center; padding:9px 0; border-radius:2px; font-weight:600; font-size:14px;
  background:var(--wash); color:var(--ink);
}
.card-actions a.go:hover{text-decoration:none; background:var(--accent-dim); color:var(--accent)}
.card-actions a.go.site{background:#fff; border:1px solid var(--line-soft); color:var(--link)}

/* 目录布局：左筛选栏＋右结果 */
.dir-layout{display:grid; grid-template-columns:272px 1fr; gap:20px; align-items:start; margin-top:18px}
.dir-side{
  border:1px solid var(--line-soft); border-radius:var(--r-l); background:#fff;
  box-shadow:var(--shadow-card); padding:6px 16px 14px; position:sticky; top:76px;
}
.dir-side-h{display:none}
.fgroup{border:none; border-top:1px solid var(--line-soft); margin:0; padding:12px 0 6px}
.fgroup:first-of-type{border-top:none}
.fgroup legend{font-size:13px; font-weight:700; color:var(--ink); padding:0; margin-bottom:8px; float:left; width:100%}
.fgroup .opts{clear:both; display:grid; gap:2px}
.chk{
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2);
  padding:5px 8px; border-radius:2px; cursor:pointer;
}
.chk:hover{background:var(--wash)}
.chk input{accent-color:var(--accent); width:16px; height:16px; margin:0; flex:none}
.chk .cnt{margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.dir-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px}
.dir-tools .grow{flex:1; min-width:180px}
.dir-tools input[type=search]{
  width:100%; height:42px; border:1px solid var(--line); border-radius:2px; padding:0 14px; font-size:15px; color:var(--ink); background:#fff;
}
.dir-tools select{
  height:42px; border:1px solid var(--line); border-radius:2px; padding:0 10px; font-size:14px; color:var(--ink); background:#fff;
}
.dir-tools input:focus, .dir-tools select:focus{outline:2px solid var(--accent); outline-offset:1px}
.filter-toggle{display:none}
.active-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px}
.active-chips .ac-h{font-size:13px; color:var(--ink-3)}
.fchip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:4px 6px 4px 11px;
  border-radius:2px; background:var(--accent-dim); color:var(--accent); font-weight:600;
}
.fchip button{
  all:unset; cursor:pointer; width:18px; height:18px; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  background:rgba(128,128,128,.28);
}
.fchip button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.clear-all{font-size:13px; color:var(--link); background:none; border:none; cursor:pointer; padding:4px 2px}
.loadmore{margin:22px auto 4px; display:flex; justify-content:center}
[hidden]{display:none !important}
.btn.ghost.sm{height:42px}

/* 核实时间线 */
.timeline{list-style:none; margin:6px 0 0; padding:0 0 0 8px}
.timeline li{position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line-soft)}
.timeline li:last-child{padding-bottom:2px}
.timeline li::before{
  content:""; position:absolute; left:-6px; top:5px; width:10px; height:10px; border-radius:2px;
  background:#fff; border:2px solid var(--accent);
}
.timeline time{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.timeline div{font-size:14.5px}

/* 同类推荐 */
.rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.rel-card{border:1px solid var(--line-soft); border-radius:var(--r-m); padding:16px; background:#fff}
.rel-card h3{margin:0 0 4px; font-size:16px}
.rel-card h3 a{color:var(--ink)}
.rel-card p{margin:0 0 8px; font-size:13.5px; color:var(--ink-2)}
.rel-card .why{font-size:12.5px; color:var(--ink-3)}

/* 免费额度页 */
.free-list{display:grid; gap:14px}
.free-row{
  border:1px solid var(--line-soft); border-radius:var(--r-l); background:#fff; box-shadow:var(--shadow-card);
  padding:20px; display:grid; gap:8px;
}
.free-row h3{margin:0; font-size:17px}
.free-row h3 a{color:var(--ink)}
.free-quota{font-size:15px; background:rgba(30,158,98,.06); border:1px solid rgba(30,158,98,.18); border-radius:var(--r-m); padding:12px 14px}
.free-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--ink-3); align-items:center}
.free-meta a{font-weight:600}

/* 规范/关于页 */
.std-sec{max-width:780px}
.std-sec h2{font-size:19px; margin:30px 0 8px}
.std-sec h2:first-child{margin-top:6px}
.std-sec p, .std-sec li{font-size:15px; color:var(--ink-2)}
.std-sec ul{padding-left:20px}
.std-sec li{margin:5px 0}
.std-callout{
  border:1px solid var(--line); background:var(--accent-dim); border-radius:var(--r-m);
  padding:14px 16px; font-size:14.5px; color:var(--ink); max-width:780px;
}

@media (max-width:900px){
  .dir-layout{grid-template-columns:1fr}
  .filter-toggle{
    display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px;
    border-radius:2px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);
  }
  .dir-side{
    position:fixed; inset:0 auto 0 0; width:min(320px,86vw); z-index:80; border-radius:0;
    transform:translateX(-105%); transition:transform .22s ease; overflow-y:auto; box-shadow:var(--glass-shadow);
  }
  .dir-side.open{transform:none}
  .dir-side-h{
    display:flex; align-items:center; justify-content:space-between;
    font-weight:700; font-size:15px; padding:12px 0 4px;
  }
  .dir-side-h button{all:unset; cursor:pointer; font-size:20px; line-height:1; padding:4px 8px}
  .search-btn .sb-label{display:none}
  .search-overlay{padding:0}
  .search-panel{width:100%; max-height:none; height:100%; border-radius:0}
}
@media (prefers-reduced-motion: reduce){
  .dir-side{transition:none}
  .tip .tip-body{transition:none}
}

/* ===== v3/v4 夜间模式：纯黑（用户指定）＋黑白中性语言 =====
   启用方式：<html data-theme="dark">（页首内联脚本按 localStorage 偏好/系统决定，
   顶栏切换钮可手动覆盖）。页面底纯黑 #000000；表面近黑中性 #131316、填充 #1C1C1F，
   靠发丝线分层；主操作反转为白底黑字；绿/橙仅作语义色。蓝紫不作底色也不作强调。 */
:root[data-theme="dark"]{
    --surface:#000000;
    --card:#131316;
    --ink:#F5F5F4;
    --ink-2:rgba(245,245,244,.76);
    --ink-3:rgba(245,245,244,.58);
    --line:rgba(245,245,244,.20);
    --line-soft:rgba(245,245,244,.10);
    --accent:#F5F5F4;
    --link:#F5F5F4;
    --accent-dim:rgba(245,245,244,.09);
    --wash:rgba(245,245,244,.05);
    --solid:#F5F5F4;
    --solid-ink:#000000;
    --field:#1C1C1F;
    --bar:#22C55E;
    --ok:#4ADE80;
    --warn:#FBBF24;
    --err:#F87171;
    --glass-bg:rgba(8,8,9,.86);
    --glass-border:1px solid rgba(245,245,244,.13);
    --glass-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
  /* 组件背景全部由 v4 层的变量驱动（--card/--field/--solid），此处只补深色专属项 */
  .search-overlay{background:rgba(0,0,0,.7)}
  input::placeholder{color:var(--ink-3)}
}

/* ===== v4 排版对齐层（页面结构对标真机截图的信息组织；自有 CSS 实现） =====
   语言：几乎方角（2–3px）、发丝线描边、扁平无彩底、主操作实心反色
   （浅色黑底白字／深色白底黑字）、文字两级灰、绿与橙仅作语义色。 */

/* —— 全局组件背景改由变量驱动（双模式不漏白） —— */
body{background:var(--surface)}
.menu-btn,.search-btn{background:var(--surface); border-radius:2px}
.bigsearch input{background:var(--field); border-radius:2px}
.cat,.card,.rel-card,.free-row{background:var(--card); border-radius:3px}
.filters{background:var(--card)}
.filters select,.filters input[type=search]{background:var(--field); border-radius:2px}
.search-panel{background:var(--card); border-radius:3px}
.sheet{background:var(--card); border-radius:3px}
table.cmp{background:var(--surface)}
.pay{background:var(--field); border-radius:2px}
.timeline li::before{background:var(--surface)}
.tip .tip-body{background:var(--solid); color:var(--solid-ink)}
.std-callout{border-color:var(--line); background:var(--wash)}
.free-quota{background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.30)}
table.cmp tr.best td{background:rgba(34,197,94,.08)}

/* —— 方角与扁平 —— */
.btn,.btn.sm,.btn.ghost{border-radius:2px}
.bigsearch .btn{border-radius:2px}
.cat,.card,.filters,.latest,.tablewrap,.dir-side,.empty,.rel-card,.free-row{border-radius:3px}
.chip,.badge,.pay,.fchip,.search-btn kbd,.search-head kbd{border-radius:2px}
.seg{border-radius:2px; background:var(--wash); border:1px solid var(--line-soft)}
.seg button{border-radius:2px}
.card,.cat,.filters,.tablewrap,.dir-side,.free-row{box-shadow:none}

/* —— 主操作：实心反色；次操作：描边 —— */
.btn{background:var(--solid); color:var(--solid-ink); border:1px solid var(--solid)}
.btn:hover{filter:none; opacity:.88}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--wash)}
.btn.outline{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.outline:hover{background:var(--wash); opacity:1}
.btn.block{width:100%}
.seg button[aria-pressed=true]{background:var(--solid); color:var(--solid-ink); box-shadow:none}
.badge.rec,.badge.new{background:var(--solid); color:var(--solid-ink)}
.badge.bonus{background:rgba(245,158,11,.15); color:var(--warn)}
.badge.fkind{background:var(--wash); color:var(--ink-2); border:1px solid var(--line)}
.badge.disc{background:rgba(59,130,246,.12); color:#3b82f6; border:1px solid rgba(59,130,246,.35)}
.badge.tier{background:var(--wash); color:var(--ink-2); border:1px solid var(--line)}
.badge.tier.abn{background:rgba(220,38,38,.10); color:var(--err); border:1px solid rgba(220,38,38,.35)}
.abn-tag{color:var(--err); font-size:12px; margin-top:2px}
.grp-tag{color:var(--warn); font-size:12px; margin-top:2px}
.tier-line{color:var(--ink-3); font-size:12px}
.tier-line.abn{color:var(--err)}
.fkind-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.cat .cat-sub{display:block; font-size:12px; color:var(--ink-3); margin-top:6px}
.badge.nav{background:rgba(245,158,11,.15); color:var(--warn)}
.badge.com{background:rgba(220,38,38,.10); color:var(--err)}
.badge.ok{background:rgba(34,197,94,.12); color:var(--ok)}
.cat em{color:var(--ink); font-weight:700}
.fchip button{background:rgba(128,128,128,.28)}

/* —— 顶栏：方形 Logo 位＋分段导航＋方形主题切换钮 —— */
.topbar-in{flex-wrap:wrap; height:auto; min-height:60px; row-gap:8px; padding-top:8px; padding-bottom:8px}
.brand-tile{display:inline-flex; width:34px; height:34px; border:1px solid var(--line); border-radius:2px; overflow:hidden; flex:none}
.brand-tile img{width:100%; height:100%}
.brand img{border-radius:0}
.seg-nav{display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; margin:0 auto}
.seg-nav a{padding:8px 18px; font-size:14.5px; font-weight:600; color:var(--ink-2); border-left:1px solid var(--line-soft); white-space:nowrap}
.seg-nav a:first-child{border-left:none}
.seg-nav a:hover{color:var(--ink); text-decoration:none; background:var(--wash)}
.seg-nav a[aria-current="page"]{background:var(--solid); color:var(--solid-ink)}
.theme-btn{
  width:40px; height:40px; border-radius:2px; border:1px solid var(--line);
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.theme-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.theme-btn svg{width:20px; height:20px; stroke:var(--ink); display:none}
.theme-btn .ic-auto{display:block}
:root[data-pref="light"] .theme-btn svg{display:none}
:root[data-pref="light"] .theme-btn .ic-sun{display:block}
:root[data-pref="dark"] .theme-btn svg{display:none}
:root[data-pref="dark"] .theme-btn .ic-moon{display:block}
@media (max-width:900px){
  .seg-nav{order:3; flex-basis:100%; margin:0}
  .seg-nav a{flex:1; text-align:center; padding:8px 4px}
}

/* —— 首页：去掉极光，回到扁平底 —— */
.hero::before{display:none}
.hero{padding:48px 0 32px}

/* —— 卡片行序：方形 Logo 位＋名称/域名＋起充右对齐 → 简介 → 模型 → 标签 → 支付/价格 → 状态与绿分段条 → 双按钮 —— */
.logo-tile{
  width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center; background:var(--wash);
  font-size:20px; font-weight:800; color:var(--ink);
}
.card-id{min-width:0}
.card-id h3{margin:0; font-size:17px; line-height:1.35}
.card-id h3 a{color:var(--ink)}
.card-id .domain{font-size:12.5px; color:var(--ink-3); margin-top:1px}
.card .topup{margin-left:auto; font-weight:700; font-size:15px; white-space:nowrap; padding-left:10px}
.labelrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.status-block{border-top:1px solid var(--line-soft); padding-top:10px}
.segbar{display:flex; gap:2px; margin-top:7px}
.segbar i{height:9px; flex:1; background:var(--line-soft)}
.segbar i.on{background:var(--bar)}
.segbar.warn i.on{background:var(--warn)}
.segbar-cap{font-size:11.5px; color:var(--ink-3); margin-top:4px}
.card-actions a.go{background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:2px}
.card-actions a.go:hover{background:var(--wash); color:var(--ink)}
.card-actions a.go.site{background:var(--solid); border-color:var(--solid); color:var(--solid-ink)}
.card-actions a.go.site:hover{opacity:.88; color:var(--solid-ink)}

/* —— 目录：搜索条＋下拉筛选组＋视图切换（替代侧栏） —— */
.dir-search input{
  width:100%; height:48px; background:var(--field); border:1px solid var(--line-soft);
  border-radius:2px; padding:0 16px; font-size:15.5px; color:var(--ink);
}
.dir-search input:focus{outline:2px solid var(--ink); outline-offset:1px}
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px}
.dd{position:relative}
.dd-btn{
  height:42px; padding:0 14px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; gap:8px; align-items:center; border-radius:2px;
}
.dd-btn .cnt-badge{background:var(--solid); color:var(--solid-ink); font-size:11.5px; padding:0 6px; border-radius:2px; line-height:18px}
.dd-btn .car{color:var(--ink-3); font-size:12px}
.dd-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; width:252px; max-height:330px; overflow:auto;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--glass-shadow); padding:8px; border-radius:2px;
}
.dd-panel .opts{display:grid; gap:2px}
.dd-panel .dd-clear{font-size:12.5px; color:var(--link); background:none; border:none; cursor:pointer; padding:6px 8px; text-align:left; text-decoration:underline}
.sort-sel{
  height:42px; border:1px solid var(--line); border-radius:2px; padding:0 10px;
  font-size:14px; font-weight:600; color:var(--ink); background:var(--surface);
}
.view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; margin-left:auto}
.view-toggle button{
  width:42px; height:40px; background:var(--surface); border:none; cursor:pointer; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
}
.view-toggle button + button{border-left:1px solid var(--line-soft)}
.view-toggle button[aria-pressed="true"]{background:var(--solid); color:var(--solid-ink)}
.view-toggle svg{width:18px; height:18px; stroke:currentColor}
.grid.list-view{grid-template-columns:1fr}
@media (max-width:900px){
  .filter-bar{display:grid; grid-template-columns:1fr 1fr}
  .dd-btn{width:100%; justify-content:space-between}
  .dd-panel{width:min(252px,82vw)}
  .dd:nth-child(even) .dd-panel{left:auto; right:0}
  .view-toggle{margin-left:0}
}

/* —— 广告位：招商占位卡（虚线）与已售广告卡（独立字段集） —— */
.ad-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin:6px 0 16px}
.ad-card{
  border:1px dashed var(--line); border-radius:3px; background:var(--card);
  padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; min-height:180px;
}
.ad-card.sold{border-style:solid}
.ad-tag{
  position:absolute; top:12px; right:12px; font-size:11.5px; font-weight:700;
  border:1px solid var(--line); padding:2px 8px; color:var(--ink-2); border-radius:2px; background:var(--card);
}
.ad-card .ad-name{font-size:17px; font-weight:700; margin:0}
.ad-card .ad-dom{font-size:12.5px; color:var(--ink-3)}
.ad-card .ad-intro{font-size:14px; color:var(--ink-2); margin:0}
.ad-card .ad-empty{margin:auto; text-align:center; padding:16px 0}
.ad-card .ad-empty b{font-size:21px; display:block; margin-bottom:6px; letter-spacing:.06em}
.ad-card .ad-empty span{color:var(--ink-3); font-size:13.5px}
.ad-card .ad-go{align-self:flex-start}

/* —— 详情：四格指标条 —— */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--line-soft); border-radius:3px; overflow:hidden; margin:20px 0 4px}
.metrics .m{padding:14px 16px; border-left:1px solid var(--line-soft)}
.metrics .m:first-child{border-left:none}
.metrics .m h4{margin:0 0 4px; font-size:12.5px; color:var(--ink-3); font-weight:600}
.metrics .m div{font-size:16.5px; font-weight:700}
@media (max-width:640px){ .metrics{grid-template-columns:1fr 1fr} .metrics .m{border-top:1px solid var(--line-soft)} .metrics .m:nth-child(-n+2){border-top:none} .metrics .m:nth-child(odd){border-left:none} }

/* —— 免费页：条目序号 —— */
.free-list{counter-reset:fr}
.free-row{position:relative; overflow:hidden}
.free-row::after{
  counter-increment:fr; content:counter(fr,decimal-leading-zero);
  position:absolute; top:8px; right:16px; font-size:30px; font-weight:800; color:var(--line-soft);
}

/* —— 表单（投稿页）与流程段 —— */
.form-card{border:1px solid var(--line-soft); border-radius:3px; background:var(--card); padding:22px; max-width:720px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:650; font-size:14.5px; margin-bottom:6px}
.field label .req{color:var(--err)}
.field .hint{font-size:12.5px; color:var(--ink-3); margin-top:4px; font-weight:400}
.field input,.field textarea{
  width:100%; border:1px solid var(--line); border-radius:2px; background:var(--field);
  color:var(--ink); padding:11px 12px; font-size:15px; font-family:inherit;
}
.field textarea{min-height:84px; resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink); outline-offset:1px}
.field .err{display:none; color:var(--err); font-size:13px; margin-top:5px; font-weight:600}
.field.invalid input,.field.invalid textarea{border-color:var(--err)}
.field.invalid .err{display:block}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:18px 0}
.step{border:1px solid var(--line-soft); border-radius:3px; padding:16px; background:var(--card)}
.step .no{font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.1em}
.step h3{margin:6px 0 4px; font-size:16px}
.step p{margin:0; font-size:13.5px; color:var(--ink-2)}

/* —— 广告合作页（弹窗式信息排布的页面版） —— */
.adv-band{border:1px solid var(--line-soft); background:var(--card); border-radius:3px; padding:26px; margin:18px 0}
.adv-tag{display:inline-block; border:1px solid var(--line); padding:3px 10px; font-size:12px; letter-spacing:.14em; font-weight:700; color:var(--ink-2); border-radius:2px}
.stat-row{display:flex; align-items:baseline; gap:16px; padding:16px 4px; border-top:1px solid var(--line-soft); flex-wrap:wrap}
.stat-row b{font-size:24px; min-width:112px}
.stat-row span{color:var(--ink-2); font-size:14.5px}
.price-card{border:1px solid var(--line); border-radius:3px; padding:22px; max-width:560px; background:var(--card)}
.price-big{font-size:32px; font-weight:800}
.seat-chip{display:inline-block; background:var(--solid); color:var(--solid-ink); padding:4px 10px; font-weight:700; font-size:13.5px; border-radius:2px}

/* ===== 上线前修正追加层 ===== */
/* 首页首屏信任条 */
.trust-bar{
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; position:relative;
  border:1px solid var(--line); border-radius:2px; padding:10px 14px;
  font-size:14px; background:var(--card); max-width:680px; margin:0 0 18px;
}
.trust-bar b{font-weight:700}
.trust-bar a{font-weight:700; text-decoration:underline}
/* 目录筛选折叠钮：仅移动端出现 */
.filter-toggle-btn{display:none}
.filter-toggle-btn .ft-badge{background:var(--solid); color:var(--solid-ink); font-size:11.5px; padding:0 6px; border-radius:2px; line-height:18px}
@media (max-width:900px){
  .filter-toggle-btn{
    display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; margin-top:12px;
    border:1px solid var(--line); border-radius:2px; background:var(--surface); color:var(--ink);
    font-size:14px; font-weight:600; cursor:pointer;
  }
  #filterBar{display:none}
  #filterBar.open{display:grid}
}
/* 分类卡片：手机端横向滑动行（桌面网格不变） */
@media (max-width:640px){
  .cats{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
  .cat{flex:0 0 72%; scroll-snap-align:start}
}

/* ===== 预留能力：页脚订阅区（默认隐藏，SUBSCRIBE_MODE 控制） ===== */
.sub-box{max-width:520px; margin:0 0 18px; border:1px solid var(--line-soft); border-radius:3px; padding:16px; background:var(--card)}
.sub-h{font-weight:700; font-size:15px; margin-bottom:10px; color:var(--ink)}
.sub-row{display:flex; gap:8px}
.sub-row input{flex:1; min-width:0; height:42px; border:1px solid var(--line); border-radius:2px; background:var(--field); color:var(--ink); padding:0 12px; font-size:14.5px}
.sub-row input:focus{outline:2px solid var(--ink); outline-offset:1px}
.sub-consent{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); margin-top:10px; cursor:pointer}
.sub-consent input{margin-top:3px; flex:none}
.sub-msg{font-size:13.5px; margin:8px 0 0; color:var(--ink-2)}
.sub-msg.err{color:var(--err); font-weight:600}
.sub-note{font-size:12.5px; color:var(--ink-3); margin:8px 0 0}

/* ===== 数据时效标记（verified_at 驱动） ===== */
.card.stale{opacity:.62; filter:grayscale(.6)}
.card.stale:hover{opacity:.88; filter:grayscale(.3)}
.detail-h.stale{opacity:.72; filter:grayscale(.5)}
.stale-badge{display:inline-block; font-size:12px; font-weight:700; color:var(--ink-2); border:1px solid var(--line); border-radius:2px; padding:2px 8px; margin-left:8px; background:var(--chip); vertical-align:2px}
.stale-tag{display:inline-block; font-size:11.5px; color:var(--ink-2); border:1px dashed var(--line); border-radius:2px; padding:1px 6px}
.src-type{display:inline-block; font-size:11.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:2px; padding:1px 6px; margin-right:8px; white-space:nowrap}

/* ===== 服务商站点图标（真实 icon 接入；无图标/加载失败回退字母块） ===== */
/* 图标底色：渲染层统一浅灰底 #EDEDEF（深/浅两模式同值）＋描边，保证深色模式下近黑图标也可见；
   底色只在 CSS 容器层，不烘焙进图标图片数据（icons.json 内各条 data URI 内容未因此改动）。 */
.logo-tile{position:relative; overflow:hidden}
.logo-tile .logo-letter{display:flex; align-items:center; justify-content:center; width:100%; height:100%}
.logo-tile.has-icon{background:#EDEDEF; border-color:#C9C9CE}
.logo-tile .logo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#EDEDEF; padding:5px; box-sizing:border-box}
.detail-top{display:flex; gap:14px; align-items:flex-start}
.detail-top .logo-tile{width:54px; height:54px; font-size:25px; margin-top:2px}
.detail-tt{min-width:0}

/* ===== 区块标题行：手机端换行堆叠，避免标题/说明/链接挤压叠字（桌面不变） ===== */
@media (max-width:640px){
  .blk-h{flex-wrap:wrap; row-gap:4px}
  .blk-h>span{flex:1 1 100%; order:3}
}

/* 手机端导航去重（2026-11-04）：≤640px 时顶栏分段导航整行平铺、已覆盖全部栏目，
   再叠加 ≡ 抽屉触发按钮属重复入口，隐藏之；抽屉内的分类/投稿/广告经页脚直达。
   641–900px 与桌面端保持原样（分段导航与抽屉并存）。 */
@media (max-width: 640px){
  .menu-btn{display:none}
}