:root{
  --bg:#0d1016; --bg2:#131824; --card:#161c28; --card2:#1c2433;
  --line:#252f42; --fg:#e8edf6; --fg2:#98a4b8; --fg3:#6b7891;
  --ps:#2e7ff0; --ps2:#4d9bff; --win:#25c39a; --lose:#7b8798;
  --warn:#f0a63a; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#17233a 0%,var(--bg) 60%);
  color:var(--fg); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.hidden{display:none !important}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(13,16,22,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ps),#1a5fc4);color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(46,127,240,.35)
}
h1{font-size:17px;margin:0;letter-spacing:.2px}
.sub{margin:1px 0 0;font-size:12px;color:var(--fg3)}
.rates{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--fg2);flex-wrap:wrap}
.rate-item b{color:var(--ps2);font-size:14px;font-variant-numeric:tabular-nums}
.rate-item em{font-style:normal;color:var(--fg2);margin-right:6px}
.rate-src{color:var(--fg3);font-size:11px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- search ---- */
.searchbox{margin:26px 0 18px}
.input-row{display:flex;gap:10px}
#q{
  flex:1;padding:15px 18px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--card);color:var(--fg);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s;
}
#q:focus{border-color:var(--ps);box-shadow:0 0 0 3px rgba(46,127,240,.18)}
#q::placeholder{color:var(--fg3)}
.btn{
  padding:15px 26px;border:0;border-radius:var(--radius);cursor:pointer;font-size:15px;font-weight:600;
  background:linear-gradient(145deg,var(--ps),#1d63cf);color:#fff;white-space:nowrap;
  box-shadow:0 4px 16px rgba(46,127,240,.3);transition:transform .1s,filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.chip{
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--fg2);font-size:13px;cursor:pointer;transition:.15s
}
.chip:hover{border-color:var(--ps);color:var(--fg)}

/* ---- status ---- */
.status{
  padding:14px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  color:var(--fg2);font-size:14px;display:flex;align-items:center;gap:10px
}
.status.err{border-color:#5a2b2b;background:#1e1418;color:#ffb4b4}
.spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--ps);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- summary ---- */
.summary{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;
}
.stat{
  flex:1;min-width:130px;padding:12px 16px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line)
}
.stat b{display:block;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.3}
.stat span{font-size:12px;color:var(--fg3)}
.stat.hi b{color:var(--win)}
.stat.lo b{color:var(--warn)}

/* ---- result card ---- */
.results{display:flex;flex-direction:column;gap:14px}
.card{
  border-radius:var(--radius);background:var(--card);border:1px solid var(--line);overflow:hidden;
  transition:border-color .15s
}
.card:hover{border-color:#33415c}
.card-head{
  display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card2);
  border-bottom:1px solid var(--line)
}
.card-head img{width:46px;height:46px;border-radius:9px;object-fit:cover;background:var(--bg2);flex:none}
.card-title{flex:1;min-width:0}
.card-title .n{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-title .meta{font-size:11.5px;color:var(--fg3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  flex:none;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px
}
.badge.win{background:rgba(37,195,154,.14);color:var(--win);border:1px solid rgba(37,195,154,.4)}
.badge.save{background:rgba(240,166,58,.12);color:var(--warn);border:1px solid rgba(240,166,58,.35);margin-left:8px}
.head-right{display:flex;align-items:center;flex:none}

.sides{display:grid;grid-template-columns:1fr 1fr}
.side{padding:14px 16px;display:flex;flex-direction:column;gap:4px;position:relative}
.side+.side{border-left:1px dashed var(--line)}
.side.better{background:linear-gradient(180deg,rgba(37,195,154,.07),transparent)}
.side .tag{
  font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--fg3);text-transform:uppercase
}
.side.better .tag{color:var(--win)}
.side .name{font-size:13px;color:var(--fg2);line-height:1.45;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side .price{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.side .cny{font-size:13px;color:var(--fg2);font-variant-numeric:tabular-nums}
.side.better .cny{color:var(--win);font-weight:600}
.side .orig{font-size:12px;color:var(--fg3);text-decoration:line-through}
.side .sale{font-size:11px;color:var(--warn);font-weight:600}
.side a{color:inherit;text-decoration:none}
.side a:hover .name{color:var(--fg)}

.single-list{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.single{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);font-size:13px
}
.single img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg2)}
.single .sn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg2);text-decoration:none}
.single .sp{font-variant-numeric:tabular-nums;font-weight:600;flex:none}
.single .sc{font-size:12px;color:var(--fg3);flex:none}

/* ---- extras ---- */
.extras{margin-top:24px}
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:0 16px;margin-bottom:10px}
summary{cursor:pointer;padding:14px 0;font-size:14px;color:var(--fg2);font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary:before{content:"▸";display:inline-block;margin-right:8px;color:var(--fg3);transition:transform .15s}
details[open] summary:before{transform:rotate(90deg)}

/* ---- 评分 / 发售日 ---- */
.card-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  padding:9px 16px;border-top:1px solid var(--line);background:var(--card2)
}
.stars{
  position:relative;display:inline-block;font-size:11px;line-height:1;
  letter-spacing:.5px;color:#39435a;vertical-align:-1px
}
.stars::before{content:"★★★★★"}
.stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#ffb340}
.stars i::before{content:"★★★★★"}
.mline{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--fg3);min-height:16px
}
.mline .rel{font-variant-numeric:tabular-nums}
.mline .rt{display:inline-flex;align-items:center;gap:4px}
.mline .rt b{color:#ffb340;font-weight:600;font-variant-numeric:tabular-nums}
.mline .rt em{font-style:normal;color:var(--fg3)}
.mline .rt.none{color:var(--fg3)}
.mline.loading{opacity:.55}
.revlink{
  font-size:11.5px;color:var(--ps2);text-decoration:none;white-space:nowrap;
  border-bottom:1px dashed rgba(77,155,255,.45)
}
.revlink:hover{color:#8cc0ff}
.gname2{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.gname2 .gname{flex:1;min-width:0}
.single .mline{width:100%}
.single{flex-wrap:wrap}
.single .srow{display:flex;align-items:center;gap:12px;width:100%}

/* ---- 评价子页面 ---- */
.rv-hero{display:flex;gap:18px;align-items:flex-start;margin:22px 0 6px}
.rv-hero img{width:120px;height:120px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg2)}
.rv-hero .h-body{flex:1;min-width:0}
.rv-hero h2{margin:0 0 6px;font-size:20px;line-height:1.35}
.rv-fact{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rv-fact span{
  font-size:12px;color:var(--fg2);background:var(--card);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px
}
.rv-fact span b{color:var(--fg);font-weight:600}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.rv-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px
}
.rv-card h3{margin:0 0 14px;font-size:13px;color:var(--fg2);font-weight:700;letter-spacing:.4px}
.rv-score{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.rv-score b{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.rv-score .stars{font-size:16px}
.rv-score em{font-style:normal;font-size:12px;color:var(--fg3)}
.rv-bars{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.rv-bar{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--fg3)}
.rv-bar .k{width:32px;flex:none;font-variant-numeric:tabular-nums}
.rv-bar .t{flex:1;height:7px;border-radius:4px;background:var(--card2);overflow:hidden}
.rv-bar .t i{display:block;height:100%;background:linear-gradient(90deg,#ffb340,#ff8c1a);border-radius:4px}
.rv-bar .v{width:38px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.rv-empty{color:var(--fg3);font-size:13px;padding:10px 0}
.rv-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.rv-actions a{
  padding:10px 18px;border-radius:10px;text-decoration:none;font-size:13.5px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--fg2);transition:.15s
}
.rv-actions a:hover{border-color:var(--ps);color:var(--fg)}
.rv-actions a.primary{background:linear-gradient(145deg,var(--ps),#1d63cf);color:#fff;border-color:transparent}

@media (max-width:720px){
  .rv-grid{grid-template-columns:1fr}
  .rv-hero img{width:88px;height:88px}
  .rv-hero h2{font-size:17px}
  .rv-score b{font-size:28px}
}

.foot{margin:40px 0 30px;padding-top:18px;border-top:1px solid var(--line);color:var(--fg3);font-size:12px;line-height:1.7}
.foot p{margin:2px 0}

/* ---- 页签 ---- */
.tabs{display:flex;gap:8px;margin:22px 0 16px}
.tab{
  padding:9px 18px;border-radius:999px;font-size:14px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);color:var(--fg2);transition:.15s
}
.tab:hover{border-color:var(--ps);color:var(--fg)}
.tab.active{background:linear-gradient(145deg,var(--ps),#1d63cf);color:#fff;border-color:transparent}

@media (max-width:720px){
  .sides{grid-template-columns:1fr}
  .side+.side{border-left:0;border-top:1px dashed var(--line)}
  .topbar .wrap{padding:10px 14px}
  h1{font-size:15px}
  .rates{font-size:11px;gap:10px}
  .rate-src{display:none}
  #q{padding:13px 14px;font-size:15px}
  .btn{padding:13px 18px}
  .side .price{font-size:19px}
}


/* ---- 价格趋势（评价页） ---- */
.rv-trend{margin:26px 0 0;padding:18px 20px;background:var(--card,#161c28);
  border:1px solid var(--line,#252f42);border-radius:16px}
.rv-trend-title{font-size:15px;font-weight:700;margin:0 0 12px;display:flex;
  align-items:center;gap:12px}
.rv-trend-tabs{margin-left:auto;display:flex;gap:6px;font-weight:400}
.rv-trend-tabs b{padding:4px 12px;border-radius:999px;font-size:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line,#252f42);
  color:var(--fg2,#98a4b8)}
.rv-trend-tabs b.on{background:#2e7ff0;border-color:#2e7ff0;color:#fff;font-weight:600}
.rv-chart svg{display:block;width:100%}
.rv-trend-note{margin-top:8px;font-size:12px;color:var(--fg3,#5b6883);line-height:1.7}

/* ---- 返回 NS 比价 ---- */
.topbar .wrap { position: relative; }
.tonav {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #cfe0ff; text-decoration: none;
  background: rgba(46, 127, 240, .14); border: 1px solid rgba(46, 127, 240, .45);
}
.tonav:hover { background: rgba(46, 127, 240, .3); color: #fff; }
@media (max-width: 900px) {
  .tonav { position: static; transform: none; margin-top: 10px; display: inline-block; }
}