:root{
  --bg:#0b0f17; --bg2:#0e1420; --card:#131b2a; --card2:#182234;
  --line:#22304a; --txt:#e8eef7; --mut:#8b98ad; --mut2:#5d6b84;
  --gold:#e8b33d; --green:#2fbf71; --red:#e5484d; --amber:#f5a524; --blue:#4f9cf7;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.6; min-height:100vh;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:var(--bg2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
  gap:10px; min-width:0;
}
.brand{font-size:19px; font-weight:700; letter-spacing:.5px; white-space:nowrap}
.brand .sub{font-size:12px; color:var(--mut); font-weight:400; margin-left:8px;
  border:1px solid var(--line); padding:2px 8px; border-radius:20px}
.clock{font-size:13px; color:var(--mut); font-variant-numeric:tabular-nums}

/* ---- 用户信息条（2026-10-02）---- */
.user-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line);
  padding:4px 6px 4px 12px; border-radius:20px; font-size:12.5px;
}
.user-chip b{font-weight:600}
.user-chip .tag{
  font-size:10.5px; padding:1px 7px; border-radius:20px;
  border:1px solid var(--line); color:var(--mut);
}
.user-chip .tag.admin{color:var(--gold); border-color:rgba(212,167,86,.5)}
.user-chip .tag.off{color:var(--red); border-color:rgba(239,68,68,.4)}
.user-chip .tag.mut{color:var(--mut)}
.link-btn{
  background:transparent; border:none; color:var(--mut);
  font-size:12px; cursor:pointer; padding:3px 8px; border-radius:6px;
}
.link-btn:hover{color:var(--red)}

/* ---- 访问令牌（2026-10-01）---- */
.topright{display:flex; align-items:center; gap:14px}
.token-btn{
  background:var(--card); border:1px solid var(--line); color:var(--mut);
  padding:6px 14px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.token-btn:hover{color:var(--gold); border-color:var(--gold)}
.token-mask{
  position:fixed; inset:0; background:rgba(4,7,12,.72); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
/* 2026-10-01 修复：HTML 的 hidden 属性只提供一条低优先级 display:none，
   会被上面 .token-mask 的 display:flex 覆盖 → 面板藏不住、关不掉。
   必须显式提升 [hidden] 的优先级。 */
.token-mask[hidden]{display:none !important}
.token-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; width:100%; max-width:460px; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.token-panel h3{margin:0 0 10px; font-size:17px}
.token-hint{margin:0 0 14px; font-size:13px; color:var(--mut); line-height:1.65}
.token-hint code{
  background:var(--bg2); border:1px solid var(--line);
  padding:1px 6px; border-radius:5px; font-size:12px; color:var(--gold);
}
.token-panel input{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  padding:10px 12px; border-radius:8px; font-size:14px; font-family:monospace;
}
.token-panel input:focus{outline:none; border-color:var(--gold)}
.token-actions{display:flex; gap:8px; margin-top:14px}
.token-actions button{
  background:var(--gold); border:none; color:#0b0f17; font-weight:700;
  padding:9px 18px; border-radius:8px; font-size:14px; cursor:pointer;
}
.token-actions button.ghost{
  background:transparent; border:1px solid var(--line); color:var(--mut); font-weight:400;
}
.token-actions button.ghost:hover{color:var(--txt)}
.token-msg{margin-top:12px; font-size:13px; min-height:19px; color:var(--mut)}
.token-msg.n-ok{color:var(--green)}
.token-msg.n-err{color:var(--red)}
.tabs{
  display:flex; gap:6px; padding:10px 16px; background:var(--bg2);
  border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:57px; z-index:9;
}
.tabs button{
  flex:0 0 auto; background:transparent; border:1px solid transparent; color:var(--mut);
  padding:8px 16px; border-radius:8px; font-size:14px; cursor:pointer; white-space:nowrap;
}
.tabs button:hover{color:var(--txt); background:var(--card)}
.tabs button.active{color:#0b0f17; background:var(--gold); font-weight:700}
main{max-width:1180px; margin:0 auto; padding:18px 16px 60px}
.page{display:none}
.page.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
h2.ptitle{font-size:18px; margin:4px 0 14px; display:flex; align-items:center; gap:10px}
h2.ptitle .refresh{margin-left:auto}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; min-width:0;
}
.card h3{margin:0 0 10px; font-size:15px; color:var(--txt); display:flex; align-items:center; gap:8px}
.card h3 .tag{margin-left:auto}
.mut{color:var(--mut)} .small{font-size:12.5px}
.badge{display:inline-block; padding:3px 12px; border-radius:20px; font-size:13px; font-weight:700}
.b-green{background:rgba(47,191,113,.15); color:var(--green); border:1px solid rgba(47,191,113,.4)}
.b-red{background:rgba(229,72,77,.15); color:var(--red); border:1px solid rgba(229,72,77,.4)}
.b-amber{background:rgba(245,165,36,.15); color:var(--amber); border:1px solid rgba(245,165,36,.4)}
.b-gray{background:rgba(139,152,173,.12); color:var(--mut); border:1px solid var(--line)}
.b-blue{background:rgba(79,156,247,.15); color:var(--blue); border:1px solid rgba(79,156,247,.4)}
.b-gold{background:rgba(232,179,61,.15); color:var(--gold); border:1px solid rgba(232,179,61,.4)}
.regime-big{font-size:26px; font-weight:800; padding:10px 22px; border-radius:12px; display:inline-block; margin:6px 0 12px}
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:8px}
.kv .k{background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-width:0}
.kv .k .l{font-size:12px; color:var(--mut); overflow-wrap:anywhere}
.kv .k .v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; word-break:break-word}
.up{color:var(--red)} .down{color:var(--green)} .flat{color:var(--mut)}
.idxrow{display:flex; gap:10px; flex-wrap:wrap}
.idx{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; min-width:150px}
.idx .n{font-size:13px; color:var(--mut)}
.idx .p{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums}
.idx .c{font-size:13px; font-weight:700}
.sectors{display:flex; flex-wrap:wrap; gap:8px}
.sector{background:var(--card2); border:1px solid var(--line); border-radius:20px; padding:4px 14px; font-size:13.5px}
.rec-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.rec-item{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px}
.rec-item .code{font-weight:700; font-size:15px}
.rec-item .name{color:var(--mut); font-size:13px; margin-left:6px}
.rec-item .meta{display:flex; justify-content:space-between; font-size:13px; margin-top:4px; color:var(--mut)}
.score{font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
table.tbl th,table.tbl td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
table.tbl th{color:var(--mut); font-weight:600; font-size:13px; white-space:nowrap}
table.tbl tr:last-child td{border-bottom:none}
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card)}
.notice{border-radius:10px; padding:12px 16px; margin-bottom:14px; font-size:14px; border:1px solid}
.n-info{background:rgba(79,156,247,.08); border-color:rgba(79,156,247,.35); color:#bcd7fb}
.n-warn{background:rgba(245,165,36,.08); border-color:rgba(245,165,36,.35); color:#f7cf87}
.n-err{background:rgba(229,72,77,.08); border-color:rgba(229,72,77,.35); color:#f3a8ab}
.n-ok{background:rgba(47,191,113,.08); border-color:rgba(47,191,113,.35); color:#9fe0bd}
.n-gray{background:rgba(139,152,173,.07); border-color:var(--line); color:var(--mut)}
.loading,.empty{padding:34px 10px; text-align:center; color:var(--mut)}
.loading::before{content:""; display:inline-block; width:18px; height:18px; margin-right:10px;
  border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%;
  animation:spin 1s linear infinite; vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
button.btn{background:var(--gold); color:#0b0f17; border:none; border-radius:8px;
  padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer}
button.btn:hover{filter:brightness(1.08)}
button.btn:disabled{opacity:.5; cursor:not-allowed}
button.btn2{background:var(--card2); color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:8px 16px; font-size:13.5px; cursor:pointer}
button.btn2:hover{border-color:var(--gold)}
button.btn2.preset-on{border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,.12)}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:9px 12px; font-size:14px; font-family:inherit;
}
input:focus,textarea:focus{outline:none; border-color:var(--gold)}
.formrow{margin-bottom:14px}
.formrow label{display:block; font-size:13.5px; color:var(--mut); margin-bottom:6px}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.switchrow{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.switch{position:relative; width:48px; height:26px; flex:0 0 auto}
.switch input{opacity:0; width:0; height:0}
.sl{position:absolute; inset:0; background:var(--card2); border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:.2s}
.sl:before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--mut); border-radius:50%; transition:.2s}
.switch input:checked + .sl{background:rgba(47,191,113,.25); border-color:var(--green)}
.switch input:checked + .sl:before{transform:translateX(22px); background:var(--green)}
.credbar{height:6px; background:var(--card2); border-radius:4px; overflow:hidden; margin-top:6px}
.credbar i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--green))}
.news-item{padding:12px 0; border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none}
.news-item .t{font-size:14.5px}
.news-item .t a{color:var(--txt); text-decoration:none}
.news-item .t a:hover{color:var(--gold)}
.news-item .m{display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--mut); margin-top:4px; flex-wrap:wrap}
.cat{font-size:11.5px; border:1px solid var(--line); border-radius:12px; padding:1px 9px; color:var(--mut)}
pre.json{background:#0a0e15; border:1px solid var(--line); border-radius:10px; padding:14px;
  overflow-x:auto; font-size:12.5px; line-height:1.55; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.jk{color:#7dd3fc} .js{color:#a5d6a7} .jn{color:#f5a524} .jb{color:#e5484d}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px}
.d-green{background:var(--green); box-shadow:0 0 6px var(--green)}
.d-amber{background:var(--amber); box-shadow:0 0 6px var(--amber)}
.d-red{background:var(--red); box-shadow:0 0 6px var(--red)}
.d-gray{background:var(--mut2)}
footer{text-align:center; color:var(--mut2); font-size:12px; padding:22px 0 30px}
/* ==========================================================================
   响应式（2026-10-02 重写）
   三档：平板 ≤1100 / 手机 ≤760 / 小屏 ≤420
   关键：.tabs 的 sticky top 必须等于顶栏实际高度，否则手机会叠在一起。
   ========================================================================== */

/* ---- 中等屏：4 列降 2 列 ---- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .rec-cols{grid-template-columns:repeat(2,1fr)}
}

/* ---- 手机 ---- */
@media (max-width:760px){
  body{font-size:14.5px}

  /* 顶栏：品牌一行，用户条换到第二行（2026-10-04：让剩余额度信息在手机上完整可见） */
  .topbar{padding:9px 12px; gap:8px; align-items:center; flex-wrap:wrap; row-gap:6px}
  .brand{font-size:16px; letter-spacing:0; flex:0 0 auto}
  .brand .sub{display:none}
  .topright{gap:8px; min-width:0; flex:0 0 auto; justify-content:flex-end; margin-left:auto}
  .clock{display:none}   /* 时钟让位给额度信息 */

  /* 用户条独占第二行，保证「剩 N 天 · 对话剩 M 次」不换行 */
  .user-chip{
    order:10; flex:1 0 100%; max-width:100%; min-width:0;
    padding:5px 6px 5px 10px; font-size:12px; gap:6px;
    justify-content:flex-start; flex-wrap:nowrap;
  }
  .user-chip b{max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto}
  .user-chip #userRole{flex:0 0 auto}
  /* ⚠️ 额度标签不能压缩（之前被 flex 压成 0 宽 → 看不见） */
  .user-chip #userQuota{
    flex:0 0 auto; white-space:nowrap;
    font-size:10.5px; padding:2px 7px;
  }
  .user-chip .tag{font-size:9.5px; padding:0 5px}
  .link-btn{font-size:12px; padding:4px 7px; margin-left:auto; flex:0 0 auto}

  /* 关键修复：sticky 偏移跟着顶栏走。
     实测顶栏高度 = 54px（品牌与用户条同在一行，未换行），
     这里必须用实测值，写大了滚动时会出现明显缝隙。 */
  .tabs{top:54px; padding:8px 10px; gap:5px}
  .tabs button{padding:7px 13px; font-size:13.5px}

  /* 栅格：手机一律单列 */
  .g2,.g3,.g4,.formgrid{grid-template-columns:1fr}
  .rec-cols{grid-template-columns:1fr}
  main{padding:12px 12px 90px}   /* 底部留白，避免被宠物球挡住 */

  /* 卡片与间距收紧 */
  .card{padding:13px}
  .card h3{font-size:14px}
  h2.ptitle{font-size:16.5px; flex-wrap:wrap; gap:8px}
  h2.ptitle .refresh{margin-left:auto}

  /* KV 小格：手机上 2 列更好读 */
  .kv{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .kv .k{padding:7px 9px}
  .kv .k .v{font-size:16px}

  /* 指数横排 → 2 列网格 */
  .idxrow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .idx{min-width:0; padding:9px 11px}
  .idx .p{font-size:16px}

  /* 大号环境徽章收小 */
  .regime-big{font-size:20px; padding:8px 16px}

  /* 表格：允许横滑 + 触摸友好 */
  .tblwrap{-webkit-overflow-scrolling:touch}
  table.tbl{font-size:13px}
  table.tbl th,table.tbl td{padding:8px 9px}

  /* 按钮触摸目标 ≥40px */
  button.btn,button.btn2{min-height:40px; padding:10px 16px; font-size:14px}
  input[type=text],input[type=password],input[type=number],textarea,select{
    font-size:16px;   /* ≥16px 防 iOS 聚焦自动放大 */
    padding:10px 12px;
  }
  /* 开关也放大一点 */
  .switch{width:52px; height:28px}
  .sl:before{width:20px; height:20px}
  .switch input:checked + .sl:before{transform:translateX(24px)}

  /* 新闻/推荐条目间距 */
  .news-item{padding:11px 0}
  .news-item .t{font-size:14px}
  .rec-item{padding:10px}
  pre.json{font-size:11.5px; padding:11px}
  .sector{font-size:13px; padding:4px 12px}
}

/* ---- 小屏（iPhone SE 等）---- */
@media (max-width:420px){
  .topbar{padding:8px 10px}
  .brand{font-size:15px}

  /* 小屏：用户条仍是两行；额度信息必须保留（2026-10-04 修复：
     原规则 .user-chip .tag{display:none} 会把「剩 N 天 · 对话剩 M 次」整个隐藏，
     导致手机上看不到剩余额度）。这里只隐藏「只读」角色标签，额度标签保留。 */
  .user-chip #userRole{display:none}
  .user-chip b{max-width:76px}
  .user-chip #userQuota{font-size:10px; padding:2px 6px; flex:0 0 auto; white-space:nowrap}
  .clock{display:none}

  .kv{grid-template-columns:1fr 1fr}
  .idxrow{grid-template-columns:1fr 1fr}
  .tabs button{padding:7px 11px; font-size:13px}
  main{padding:10px 10px 88px}
  .card{padding:12px}
}

/* ---- 横屏矮屏：把顶部占位压到最小 ---- */
@media (max-height:520px) and (orientation:landscape){
  .topbar{padding:6px 12px}
  .tabs{top:48px; padding:6px 10px}
  main{padding-top:8px}
}

/* ---- 情绪周期面板（2026-10-02 新增） ---- */
.emo-top{display:flex; gap:18px; align-items:flex-start}
.emo-gauge{position:relative; width:240px; flex:0 0 auto; margin:0 auto}
.emo-gauge .emo-svg{width:100%; height:auto; display:block}
.emo-temp{position:absolute; left:0; right:0; bottom:2px; text-align:center; pointer-events:none}
.emo-temp b{font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.emo-temp span{display:block; font-size:12px; color:var(--mut); margin-top:2px}
.emo-side{flex:1; min-width:260px}
.emo-stage{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.emo-stage .up{color:var(--red)}
.emo-stage .down{color:var(--green)}
.emo-stage .flat{color:var(--mut)}
.emo-advice{margin-bottom:12px}
.emo-axis{display:flex; align-items:stretch; gap:2px}
.emo-step{flex:1; text-align:center; padding:7px 2px; border:1px solid var(--line); border-radius:8px; background:var(--card2); font-size:12px; color:var(--mut); min-width:0}
.emo-step .e{font-size:16px; line-height:1.3}
.emo-step.on{color:var(--txt); font-weight:700}
.emo-arrow{align-self:center; color:var(--mut2); font-size:12px; flex:0 0 auto}
.emo-inds{margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.emo-ind{background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.emo-ind.off{opacity:.55}
.emo-ind-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; margin-bottom:6px}
.emo-ind-h .n{color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.emo-ind-h .v{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.emo-bar{height:6px; background:var(--bg2); border-radius:4px; overflow:hidden}
.emo-bar i{display:block; height:100%; border-radius:4px}
.emo-ind.off .emo-bar i{background:var(--mut2)}
.emo-hist{margin-top:14px}
.emo-hist .emo-svg{width:100%; height:auto; display:block}
.emo-q{font-style:normal; cursor:help; color:var(--mut2); border:1px solid var(--line); border-radius:50%; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; margin-left:4px; vertical-align:1px}
@media (max-width:640px){
  .emo-top{flex-direction:column}
  .emo-axis{flex-wrap:wrap}
  .emo-step{flex:1 1 28%}
  .emo-arrow{display:none}
}

/* ---- 游资流水线（2026-10-02 新增） ---- */
.pipe-stage h3 .tag{margin-left:8px}
.pipe-tasks{display:flex; flex-direction:column; gap:8px; margin:10px 0 14px}
.pipe-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer; background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:9px 12px}
.pipe-check input{margin-top:3px; accent-color:var(--green); width:16px; height:16px; flex:0 0 auto}
.pipe-check input:checked + span{color:var(--mut); text-decoration:line-through}
.pipe-h4{font-size:14px; margin:16px 0 8px; color:var(--txt)}
.pipe-tbl{font-size:13px}
.pipe-tbl select{background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:6px; padding:3px 6px; font-size:13px}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.formrow{margin-bottom:10px}
.formrow label{display:block; font-size:13px; color:var(--mut); margin-bottom:6px}
.formrow input[type="text"], .formrow input[type="number"], .formrow textarea{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 12px; font-size:14px; box-sizing:border-box}
.formrow textarea{resize:vertical; min-height:56px; line-height:1.6}
@media (max-width:640px){ .pipe-tbl{font-size:12px} }

/* 交叉验证 v1.0（2026-10-03）：共振徽标与高亮 */
.b-fire{background:rgba(229,72,77,.18); color:#ff7070; border:1px solid rgba(229,72,77,.55); font-weight:700}
.rec-item.reso{border-left:3px solid #e5484d; background:rgba(229,72,77,.06)}

/* 本站运行原理卡（2026-10-03） */
.aflow{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.astep{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:rgba(139,152,173,.07);border-radius:8px}
.anum{flex:0 0 24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:#2b5cb8;color:#fff;font-size:12px;font-weight:700}

/* ---- 出海天气（2026-10-03） ---- */
.wx-hero{background:linear-gradient(135deg,var(--wx,#f5a524),rgba(0,0,0,.45));border-radius:12px;padding:16px 18px;color:#fff;margin-bottom:10px}
.wx-hero-top{display:flex;justify-content:space-between;font-size:12px;opacity:.9;margin-bottom:2px}
.wx-hero-main{font-size:28px;font-weight:800;letter-spacing:1px}
.wx-hero-sub{font-size:13px;opacity:.95;margin-top:2px}
.wx-hero-advice{font-size:12px;opacity:.9;margin-top:6px}
.wx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.wx-chip{font-size:11px;padding:3px 10px;border-radius:20px;border:1px solid var(--line)}
.wx-chip.r{color:#ff8a8a;border-color:var(--red);background:rgba(229,72,77,.12)}
.wx-chip.y{color:var(--amber);border-color:var(--amber);background:rgba(245,165,36,.12)}
.wx-chip.m{color:var(--mut);border-color:var(--line);background:var(--card2)}
.wx-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:720px){.wx-grid{grid-template-columns:1fr 1fr 1fr}}
.wx-card{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px}
.wx-card h4{margin:0 0 8px;font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px}
.wx-big{font-size:20px;font-weight:800;margin-bottom:6px}
.wx-tempbar{position:relative;height:8px;border-radius:5px;background:linear-gradient(90deg,#4f9cf7,#2fbf71,#f5a524,#e5484d);margin:8px 0}
.wx-tempmark{position:absolute;top:-3px;width:3px;height:14px;background:#fff;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.wx-axis{display:flex;gap:4px;margin:6px 0}
.wx-seg{flex:1;text-align:center;font-size:10px;padding:4px 1px;border-radius:6px;background:var(--card);color:var(--mut);line-height:1.4}
.wx-seg.on{color:#fff;font-weight:700}
.wx-kv{font-size:12px;color:var(--mut)}
.wx-note{font-size:11px;color:var(--mut);margin-top:6px;line-height:1.6}
.wx-hero{position:relative;overflow:hidden}
.wx-hero.wx-sky-go{background:linear-gradient(135deg,#2b8fd9,#8fd4f5)}
.wx-hero.wx-sky-caution{background:linear-gradient(135deg,#7d8ba1,#4d5a70)}
.wx-hero.wx-sky-danger{background:linear-gradient(135deg,#232c3d,#0d1118)}
.wx-hero-top,.wx-hero-main,.wx-hero-sub,.wx-hero-advice,.wx-chips{position:relative;z-index:1}
.wx-hero-main{text-shadow:0 2px 10px rgba(0,0,0,.35)}
.wx-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wx-sun{position:absolute;top:6px;right:14px;width:64px;height:64px;opacity:.95}
.wx-sun .wx-rays{transform-box:fill-box;transform-origin:center;animation:wx-spin 18s linear infinite}
@keyframes wx-spin{to{transform:rotate(360deg)}}
.wx-cloud{position:absolute;width:90px;height:26px;background:rgba(255,255,255,.75);border-radius:999px}
.wx-cloud::before{content:'';position:absolute;width:34px;height:34px;background:inherit;border-radius:50%;top:-16px;left:16px}
.wx-cloud::after{content:'';position:absolute;width:24px;height:24px;background:inherit;border-radius:50%;top:-11px;left:44px}
.wx-cloud.dk{background:rgba(28,36,52,.92)}
.wx-cloud.c1{top:12px;left:6%;animation:wx-drift 11s ease-in-out infinite alternate}
.wx-cloud.c2{top:52px;left:55%;width:70px;height:20px;animation:wx-drift 14s ease-in-out infinite alternate-reverse}
.wx-cloud.c3{top:90px;left:28%;width:60px;height:18px;opacity:.5;animation:wx-drift 17s ease-in-out infinite alternate}
@keyframes wx-drift{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.wx-bolt{position:absolute;top:6px;right:26px;width:34px;height:60px;filter:drop-shadow(0 0 8px #ffe27a);animation:wx-flash 2.6s infinite}
@keyframes wx-flash{0%,52%,100%{opacity:0}58%,68%{opacity:1}63%{opacity:.25}73%{opacity:0}}
/* 后层雨滴（2026-10-04 v2）：真正的水滴，一粒一粒 */
.wx-rain{position:absolute;inset:-40px;background-image:
  radial-gradient(1.6px 2.4px at 6px 18px, rgba(198,218,245,.55) 0 70%, transparent 100%),
  radial-gradient(1.4px 2.1px at 31px 62px, rgba(186,208,238,.45) 0 70%, transparent 100%),
  radial-gradient(1.5px 2.2px at 18px 40px, rgba(198,218,245,.5) 0 70%, transparent 100%),
  radial-gradient(1.3px 2px at 38px 10px, rgba(186,208,238,.4) 0 70%, transparent 100%),
  radial-gradient(1.5px 2.3px at 44px 78px, rgba(198,218,245,.48) 0 70%, transparent 100%);
  background-size:52px 96px;background-repeat:repeat;
  animation:wx-rainfall .60s linear infinite}
@keyframes wx-rainfall{to{background-position:-4px 96px}}

.wx-refs{margin-top:10px;border:1px dashed var(--line,#e2e5ea);border-radius:12px;padding:10px 12px;background:var(--card,#fff)}
.wx-refs-t{font-size:11px;color:var(--mut,#8b98ad);margin-bottom:6px}
.wx-ref{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:13px;border-top:1px solid var(--line,#eef1f5)}
.wx-ref:first-of-type{border-top:none}
.wx-ref-k{flex:none;font-weight:700;color:var(--ink,#1f2937)}
.wx-ref-v{color:var(--mut,#5d6b84)}

/* ============ 雷暴怒海（2026-10-04 重做）：雨 + 闪电 + 大浪，突出危险 ============
   追加到 website/static/style.css 末尾即可。同名旧规则（.wx-bolt / .wx-hero.wx-sky-danger
   背景 / @keyframes wx-flash）会被后面的新定义覆盖，无需删除旧代码。 */
.wx-hero.wx-sky-danger{background:linear-gradient(180deg,#1b2438 0%,#111a2b 55%,#0a111e 100%)}
/* 全屏电光：闪电划过时整个天空一亮 */
.wx-stormflash{position:absolute;inset:0;background:#cfe4ff;opacity:0;animation:wx-stormflash 4.6s infinite}
@keyframes wx-stormflash{0%,100%{opacity:0}5%{opacity:.5}7%{opacity:.06}9%{opacity:.38}12%{opacity:0}55%{opacity:0}57%{opacity:.28}59%{opacity:0}}
/* 暗云：加深颜色 + 一片被大风吹的快云 */
.wx-cloud.dk{background:rgba(13,19,32,.95)}
.wx-cloud.c4{top:34px;left:34%;width:120px;height:28px;animation:wx-drift 6.5s ease-in-out infinite alternate}
/* 闪电：更大更曲折，与电光同节奏 */
.wx-bolt{position:absolute;top:0;left:14%;width:52px;height:96px;filter:drop-shadow(0 0 12px #ffe27a);animation:wx-flash 4.6s infinite}
@keyframes wx-flash{0%,100%{opacity:0}5%{opacity:1}7%{opacity:.15}9%{opacity:.9}12%,54%{opacity:0}57%{opacity:.7}60%{opacity:0}}
/* 前层暴雨：更粗更斜更快，与旧的后层雨叠加出纵深 */
/* 前层雨滴（2026-10-04 v2）：更大更亮更快，离镜头更近 */
.wx-rain2{position:absolute;inset:-60px;background-image:
  radial-gradient(2.3px 3.4px at 12px 26px, rgba(214,232,252,.85) 0 68%, transparent 100%),
  radial-gradient(2px 3px at 55px 84px, rgba(205,226,250,.72) 0 68%, transparent 100%),
  radial-gradient(2.2px 3.2px at 34px 8px, rgba(214,232,252,.8) 0 68%, transparent 100%),
  radial-gradient(1.9px 2.8px at 72px 50px, rgba(205,226,250,.66) 0 68%, transparent 100%),
  radial-gradient(2.1px 3.1px at 20px 66px, rgba(214,232,252,.75) 0 68%, transparent 100%),
  radial-gradient(1.8px 2.7px at 80px 18px, rgba(205,226,250,.62) 0 68%, transparent 100%);
  background-size:96px 132px;background-repeat:repeat;
  animation:wx-rainfall2 .42s linear infinite}
@keyframes wx-rainfall2{to{background-position:-7px 132px}}
/* 怒海：底部双层海浪反向翻滚，突出风浪大 */
.wx-sea{position:absolute;left:0;right:0;bottom:-2px;height:58px;overflow:hidden}
.wx-sea svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.wx-wave1{animation:wx-waveroll 5.5s linear infinite}
.wx-wave2{animation:wx-waveroll 8.5s linear infinite reverse;opacity:.85}
@keyframes wx-waveroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}