/* ==================================================================
   主题层 · Theme layer
   ------------------------------------------------------------------
   换主题只替换蓝色系 7 个变量，中性色（--bg/--ink/--t1/--t2/--line）
   保持不变，保证所有页面排版、对比度、层级完全一致。

   对比度说明：每套主题的 --blue 都已按「最深底 wash-deep」复算，
   均 ≥ 4.5:1，可安全承载白字与文字型 text。
   状态色（--red/--ok/--warn）不随主题变化 —— 语义色改了会误导。
   ================================================================== */

:root{
  --theme-anim:320ms var(--ease);
}

/* 1 · 晨雾蓝（默认）—— 已由 :root 定义，此处只需声明标签 */
[data-accent="blue"]{}

/* 2 · 松林绿（绿意安然） */
[data-accent="green"]{
  --blue:#2F6A4E;
  --blue-hover:#255740;
  --blue-lt:#4E9A74;
  --blue-soft:#E7F1EB;
  --blue-line:#C8DED1;
  --blue-deep-1:#3A7D5D;
  --blue-deep-2:#245844;
  --sh-blue:0 2px 10px -4px rgba(47,106,78,.42);
  --sh-blue-h:0 4px 14px -4px rgba(47,106,78,.5);
}

/* 3 · 樱雾粉（柔和，不抢数据） */
[data-accent="pink"]{
  --blue:#9A4A66;
  --blue-hover:#823C55;
  --blue-lt:#C67791;
  --blue-soft:#F8EBF0;
  --blue-line:#EAD2DC;
  --blue-deep-1:#AE5A78;
  --blue-deep-2:#7C3A52;
  --sh-blue:0 2px 10px -4px rgba(154,74,102,.42);
  --sh-blue-h:0 4px 14px -4px rgba(154,74,102,.5);
}

/* 4 · 石墨灰（低刺激，夜间/长读） */
[data-accent="graphite"]{
  --blue:#4A5C6E;
  --blue-hover:#3C4C5C;
  --blue-lt:#7A8FA3;
  --blue-soft:#EDF1F5;
  --blue-line:#D5DFE8;
  --blue-deep-1:#56697C;
  --blue-deep-2:#38485A;
  --sh-blue:0 2px 10px -4px rgba(74,92,110,.42);
  --sh-blue-h:0 4px 14px -4px rgba(74,92,110,.5);
}

/* 5 · 暮山紫 */
[data-accent="violet"]{
  --blue:#5A5490;
  --blue-hover:#4A4478;
  --blue-lt:#8781BC;
  --blue-soft:#EEEDF8;
  --blue-line:#D8D5EC;
  --blue-deep-1:#6660A0;
  --blue-deep-2:#464078;
  --sh-blue:0 2px 10px -4px rgba(90,84,144,.42);
  --sh-blue-h:0 4px 14px -4px rgba(90,84,144,.5);
}

/* 6 · 琥珀棕（暖色，沙地地图观感） */
[data-accent="amber"]{
  --blue:#8A6124;
  --blue-hover:#72501D;
  --blue-lt:#B98D48;
  --blue-soft:#F7F0E2;
  --blue-line:#E6D8BE;
  --blue-deep-1:#9C7133;
  --blue-deep-2:#6E4D1C;
  --sh-blue:0 2px 10px -4px rgba(138,97,36,.42);
  --sh-blue-h:0 4px 14px -4px rgba(138,97,36,.5);
}

/* 切主题时让蓝系变量平滑过渡，避免闪跳 */
:root{transition:--blue var(--theme-anim);}
body,.hd,.card,.tool,.btn,.tag,.eye,.logo-m{
  transition:background-color var(--theme-anim),color var(--theme-anim),border-color var(--theme-anim);
}

/* 深色模式：中性色全部由 tokens.css 的 [data-theme="dark"]:root 成对提供；
   这里只覆盖「深底 + 各主题色」的蓝系取值（R4-003）。 */
[data-theme="dark"][data-accent="blue"]{--blue:#5C9BCB;--blue-hover:#4C89B7;--blue-lt:#7FB6DE;--blue-soft:#1B2C3A;--blue-line:#2E4557;--blue-deep-1:#3E7EA8;--blue-deep-2:#275A7C}
[data-theme="dark"][data-accent="green"]{--blue:#5FA57F;--blue-hover:#4F9270;--blue-lt:#84C0A1;--blue-soft:#182B22;--blue-line:#2B4438;--blue-deep-1:#428063;--blue-deep-2:#2A5A46}
[data-theme="dark"][data-accent="pink"]{--blue:#CE7E98;--blue-hover:#B96C85;--blue-lt:#E0A0B5;--blue-soft:#2E1E25;--blue-line:#47313B;--blue-deep-1:#A65C79;--blue-deep-2:#7A3C53}
[data-theme="dark"][data-accent="graphite"]{--blue:#8FA3B7;--blue-hover:#7D91A5;--blue-lt:#AEBECD;--blue-soft:#212C36;--blue-line:#34424F;--blue-deep-1:#5A6C7E;--blue-deep-2:#3A4A5A}
[data-theme="dark"][data-accent="violet"]{--blue:#9C96D6;--blue-hover:#8A83C8;--blue-lt:#B8B3E4;--blue-soft:#22213A;--blue-line:#383653;--blue-deep-1:#6B65A6;--blue-deep-2:#4A447C}
[data-theme="dark"][data-accent="amber"]{--blue:#D2A257;--blue-hover:#BE8F47;--blue-lt:#E2BE83;--blue-soft:#2B2418;--blue-line:#443A28;--blue-deep-1:#9C7332;--blue-deep-2:#6E4F1D}

@media (prefers-reduced-motion:reduce){
  body,.hd,.card,.tool,.btn,.tag,.eye,.logo-m{transition:none}
}

/* ==================================================================
   顶栏控件 · 主题色 / 语言切换
   ------------------------------------------------------------------
   两个图标按钮 + 一个共用的弹出面板。
   面板尺寸固定，避免因文案长度变化而跳动。
   ================================================================== */
.hd-ctl{display:flex;align-items:center;gap:6px;margin-right:2px}

.ic-btn{
  width:34px;height:34px;border-radius:999px;
  /* R4-040：横排 + 垂直居中（原先 grid 会把图标与「中」堆成两行并溢出按钮） */
  display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;
  color:var(--t2);background:transparent;
  transition:background var(--t-fast),color var(--t-fast);
}
.ic-btn:hover{background:var(--wash);color:var(--ink)}
.ic-btn[aria-expanded="true"]{background:var(--wash);color:var(--ink)}
.ic-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic-btn .ic-txt{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.02em;color:inherit;
}
.ic-btn.has-txt{width:auto;padding:0 11px;gap:8px}

/* 主题按钮上的当前色点 */
.ic-dot{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:var(--blue);
  box-shadow:inset 0 0 0 1.5px var(--on-blue-hair);
  transition:background var(--t-fast);
}

/* ---------- 弹出面板 ---------- */
.pop{
  position:fixed;z-index:200;
  background:var(--card);
  border-radius:var(--r-m);
  box-shadow:var(--sh-pop);
  padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.pop.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.pop[hidden]{display:none}

.pop-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 2px 10px;
}
.pop-hd h3{
  font-size:var(--t-xs);font-weight:500;color:var(--t2);
  letter-spacing:.06em;text-transform:uppercase;
}
.pop-x{
  width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  color:var(--t2);transition:background var(--t-fast),color var(--t-fast);
}
.pop-x:hover{background:var(--wash);color:var(--ink)}
.pop-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- 主题网格 ---------- */
.sw-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;width:246px;
}
.sw{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px 9px;border-radius:var(--r-s);
  transition:background var(--t-fast);
  position:relative;
}
.sw:hover{background:var(--wash)}
.sw.is-on{background:var(--blue-soft)}
.sw-c{
  width:30px;height:30px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.sw-c i{
  width:100%;height:100%;border-radius:50%;display:block;
}
.sw.is-on .sw-c::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--blue);
}
.sw-n{font-size:var(--t-xs);color:var(--t2);line-height:1.2;text-align:center}
.sw.is-on .sw-n{color:var(--blue);font-weight:500}

/* 深浅模式分段 */
.pop-seg{
  display:flex;gap:4px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.pop-seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  height:32px;border-radius:var(--r-s);
  font-size:var(--t-xs);color:var(--t2);
  transition:background var(--t-fast),color var(--t-fast);
}
.pop-seg button svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
.pop-seg button:hover{background:var(--wash);color:var(--ink)}
.pop-seg button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue);font-weight:500}

/* ---------- 语言列表 ---------- */
.lang-list{display:flex;flex-direction:column;gap:2px;width:196px}
.lang{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-s);
  transition:background var(--t-fast);
  text-align:left;width:100%;
}
.lang:hover{background:var(--wash)}
.lang.is-on{background:var(--blue-soft)}
.lang-t{flex:1;font-size:var(--t-sm);color:var(--t1);line-height:1.3}
.lang.is-on .lang-t{color:var(--blue);font-weight:500}
.lang-s{font-size:var(--t-xs);color:var(--t2);font-family:var(--f-mono);letter-spacing:-.01em}
.lang.is-on .lang-s{color:var(--blue)}
.lang-tick{
  width:14px;height:14px;flex-shrink:0;
  opacity:0;transition:opacity var(--t-fast);
}
.lang.is-on .lang-tick{opacity:1}
.lang-tick svg{width:14px;height:14px;stroke:var(--blue);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 遮罩（移动端） ---------- */
.pop-mask{
  position:fixed;inset:0;z-index:190;background:transparent;
  opacity:0;visibility:hidden;transition:opacity var(--t-fast),visibility var(--t-fast);
}
.pop-mask.is-open{opacity:1;visibility:visible}

@media (max-width:680px){
  .hd-ctl{display:none}
  .pop{left:12px!important;right:12px;width:auto}  /* important-ok: 下拉位置由 app.js 写行内 left，需压行内值 */
  .sw-grid,.lang-list{width:100%;grid-template-columns:repeat(3,1fr)}
}

/* ==================================================================
   v26-10-20 第二批 UI
   ================================================================== */

/* ---------- 幽灵按钮（hero 次按钮去底色） ---------- */
.btn-ghost{
  padding:11px 20px;color:var(--blue);
  box-shadow:inset 0 0 0 1px transparent;
}
.btn-ghost:hover{background:var(--blue-soft)}
.btn-ghost.btn-lg{padding:14px 26px;font-size:var(--t-body)}

/* ---------- 未查询前的居中初始态 ---------- */
.search-gate{
  min-height:calc(100vh - clamp(66px,5.2vw,78px) - 120px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(32px,5vw,64px) var(--pad);
}
body.is-pristine .search-gate{display:flex}
body:not(.is-pristine) .search-gate{display:none}
body.is-pristine .page-hd,
body.is-pristine .split{display:none}

.gate-in{width:min(560px,100%);text-align:center}
.gate-in h1{
  margin-top:clamp(16px,2vw,22px);
  font-size:var(--t-h2);font-weight:600;letter-spacing:-.014em;
  color:var(--ink);line-height:1.35;
}
.gate-lead{margin-top:8px;font-size:var(--t-body);color:var(--t2)}
.gate-panel{margin-top:clamp(22px,2.6vw,30px);padding:clamp(18px,2.2vw,24px);text-align:left}
.gate-panel .search{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.gate-panel .field{flex:1;min-width:170px}
.gate-panel .field-sel{flex:0 0 130px;min-width:130px}
.gate-panel .btn{height:46px;align-self:flex-end}
.gate-note{margin-top:14px;font-size:var(--t-xs);color:var(--t2)}
.gate-in .eye i{background:var(--blue)}

/* ---------- 武器图鉴模块 tabs ---------- */
.mod-tabs{
  display:inline-flex;gap:4px;padding:4px;
  background:var(--wash);border-radius:999px;
  margin-bottom:clamp(22px,2.6vw,30px);
}
.mod-tab{
  padding:9px 20px;border-radius:999px;
  font-size:var(--t-sm);font-weight:500;color:var(--t2);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
}
.mod-tab:hover{color:var(--ink)}
.mod-tab.is-on{
  background:var(--card);color:var(--ink);
  box-shadow:var(--sh-1);
}

/* ---------- 排行榜赛季下拉 ---------- */
.season-pick{position:relative}
.season-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  background:var(--blue-soft);
  font-size:var(--t-xs);font-weight:500;color:var(--blue);
  transition:background var(--t-fast),box-shadow var(--t-fast);
}
.season-btn:hover{box-shadow:inset 0 0 0 1px var(--blue-line)}
.season-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;transition:transform var(--t-fast)}
.season-pick.is-open .season-btn svg{transform:rotate(180deg)}
.season-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:168px;padding:6px;
  background:var(--card);border-radius:var(--r-m);
  box-shadow:var(--sh-pop);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.season-pick.is-open .season-menu{opacity:1;visibility:visible;transform:translateY(0)}
.season-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:9px 12px;border-radius:var(--r-s);
  font-size:var(--t-sm);color:var(--t1);text-align:left;
  transition:background var(--t-fast);
}
.season-menu button:hover{background:var(--wash)}
.season-menu button[aria-selected="true"]{background:var(--blue-soft);color:var(--blue);font-weight:500}
.season-menu .ss-now{
  font-size:var(--t-xs);color:var(--blue);font-weight:400;
}
.season-menu button[aria-selected="true"] .ss-now::after{content:""}