/* 导航站 /links 的样式 —— 设计稿 dzpoker-site/index.html 的 <style> 原样搬出
 * （黑金 Token 与官网一致）。字体由 /home/fonts.css 自托管提供（Noto Serif SC /
 * Noto Sans SC / JetBrains Mono），本文件不声明任何字体、不引任何外链。
 * 末尾追加：空态 / 加载失败卡片（设计稿没有，接口无线路或不可用时用）。 */
/* ============ DZPoker 黑金设计 Token（与官网一致） ============ */
:root{
  --bg:#242321; --bg-deep:#171310; --bg-black:#0A0908;
  --surface:#363430; --surface-raised:#3E3C37; --surface-top:#46443E;
  --ink:#F2EFE8; --ink-2:rgba(242,239,232,.68); --ink-3:rgba(242,239,232,.5);
  --gold:#C4AC79; --gold-light:#E8DCC0; --gold-deep:#A18B57; --gold-shadow:#6E5A34;
  --ok:#66C29A; --warn:#E7A93F; --bad:#E78463; --info:#86A9CC;
  --hair:rgba(179,164,126,.26); --divider:rgba(242,239,232,.08);
  --gold-grad:linear-gradient(180deg,#E8DCC0 0%,#C4AC79 52%,#A18B57 100%);
  --shadow-card:0 4px 16px rgba(0,0,0,.45); --shadow-hero:0 8px 28px rgba(0,0,0,.55);
  --serif:'Songti SC','STSong','Noto Serif SC',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,'JetBrains Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg-black);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-light)}
button{font-family:inherit}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 背景氛围 */
.stage{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.stage .glow{position:absolute;left:50%;top:-30vh;width:120vw;height:90vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(196,172,121,.18),transparent)}
.stage .spade{position:absolute;right:-12vw;bottom:-18vh;width:64vw;max-width:760px;opacity:.045}
.stage .wm{position:absolute;left:-1%;top:38vh;font-family:var(--serif);font-weight:700;font-size:clamp(72px,14vw,220px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:rgba(196,172,121,.05);white-space:nowrap;user-select:none}
.page{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:40px 24px 48px;display:flex;flex-direction:column;gap:28px}

/* 按钮 / 胶囊 */
.btn-gold,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s,transform .08s}
.btn-gold{background:var(--gold-grad);border:1px solid var(--gold-deep);color:var(--bg);box-shadow:0 4px 10px rgba(0,0,0,.25),0 0 24px rgba(196,172,121,.28)}
.btn-gold:hover{color:var(--bg);filter:brightness(1.05)}
.btn-gold:active,.btn-line:active{transform:scale(.98)}
.btn-line{background:rgba(196,172,121,.10);border:1px solid rgba(196,172,121,.55);color:var(--gold-light)}
.btn-line:hover{background:rgba(196,172,121,.16);color:var(--gold-light)}
.btn-sm{height:44px;padding:0 18px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;border:1px solid var(--hair);color:var(--ink-2);background:var(--surface)}
.chip.rec{color:var(--bg);background:var(--gold-grad);border-color:var(--gold-deep)}
.chip[hidden]{display:none}
.ico{display:inline-block;flex:none}

/* 顶部品牌 */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name b{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--gold);letter-spacing:.02em}
.brand-name small{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.top-right{display:flex;align-items:center;gap:10px}
.nav-lang{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;background:transparent;border:1px solid var(--hair);color:rgba(242,239,232,.82);font-size:14px;cursor:pointer;white-space:nowrap}

/* 公告 */
.notice{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:rgba(196,172,121,.08);border:1px solid rgba(196,172,121,.35);color:var(--gold-light);font-size:13.5px;line-height:1.6}
.notice .ico{color:var(--gold);margin-top:3px}
.notice b{color:var(--gold)}

/* 线路 */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink)}
.sec-head .sub{font-size:13px;color:var(--ink-3)}
.recheck{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--hair);color:var(--gold-light);font-size:13px;font-weight:600;cursor:pointer}
.recheck:disabled{opacity:.5;cursor:default}
.recheck .ico{transition:transform .5s}
.recheck.spin .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:14px}
.line{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .3s,border-color .3s}
.line:hover{transform:translateY(-2px)}
.line.rec{border-color:rgba(196,172,121,.6);box-shadow:var(--shadow-card),inset 0 0 0 1px rgba(196,172,121,.35),0 0 28px rgba(196,172,121,.18)}
.line .rank{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--gold);letter-spacing:.02em;line-height:1}
.line .nm{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.line .note{font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
.line .host{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.line .lat{display:flex;flex-direction:column;align-items:flex-end;min-width:88px}
.line .lat b{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.line .lat b small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px}
.line .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);margin-top:4px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(196,172,121,.5)}
.dot.wait{animation:pulse 1.2s ease-out infinite}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.na{background:var(--ink-3)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,172,121,.5)}100%{box-shadow:0 0 0 10px rgba(196,172,121,0)}}
.line .go{justify-self:end}

/* 安全提示 */
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.tip{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid var(--hair);background:rgba(54,52,48,.5)}
.tip .ico{color:var(--gold);margin-top:2px}
.tip b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.tip span{font-size:12.5px;color:var(--ink-2)}

/* 页脚 */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding-top:20px;border-top:1px solid var(--divider);font-size:12px;color:var(--ink-3)}

/* 轻量提示条 */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:999px;background:var(--surface-top);border:1px solid var(--hair);color:var(--ink);font-size:13px;box-shadow:var(--shadow-hero);transition:opacity .25s,transform .25s;pointer-events:none;z-index:9}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ H5 ============ */
@media (max-width:720px){
  .page{padding:20px 16px 36px;gap:20px}
  .brand-name b{font-size:20px}
  .nav-lang{height:36px;padding:0 10px;font-size:13px}
  .line{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:14px}
  .line .rank{font-size:22px}
  .line .nm{font-size:17px}
  .line .lat{min-width:72px}
  .line .lat b{font-size:20px}
  .line .go{grid-column:1 / -1;justify-self:stretch;width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ 空态 / 加载失败（设计稿之外）============ */
.lines-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 18px;border-radius:16px;background:var(--surface);border:1px dashed var(--hair);text-align:center}
.lines-empty b{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.lines-empty span{font-size:13px;color:var(--ink-3)}

/* ============ 品牌标志（设计稿之外，运营 2026-10-26 换新 logo）============ */
/* 设计稿顶栏是内联黑桃 SVG；现在是新 logo「HA」金色字标位图，与官网同一张
   （/home/assets/img/apple-touch-icon.png）。全出血黑底方形，圆角沿用原 SVG 的 rx 比例 112/512。 */
.brand-logo{display:block;flex:none;border-radius:21.875%;background:#000}

/* ============ 在线客服（设计稿之外，运营 2026-10-26）============ */
/* 后台配了客服链接，links.js 才把入口插到顶栏右侧「收藏本页」左边（render-links.mjs renderSupport）：
   与「收藏本页」同一个描边胶囊 .nav-lang + 三端顶栏「客服」同一份耳机矢量；没配就没有这个元素。
   ≤720px 一行放不下「品牌 + 两枚胶囊」：客服收成 36px 圆形图标钮（与 App 顶栏客服图标同形），
   品牌副标题只留「官方导航」—— 360 宽仍是一行；再窄时右侧整组折到下一行靠右，不出横向滚动。 */
.top{flex-wrap:wrap;row-gap:12px}
.top-right{margin-left:auto}
@media (max-width:720px){
  .brand-en{display:none}
  .nav-lang.support{width:36px;padding:0;justify-content:center}
  .nav-lang.support .ico{width:18px;height:18px}
  .nav-lang.support .support-label{display:none}
}