/*! WAKE 用户端 v2（newui2）· 首页共享样式
 *  版本：1.0.0 · 2026-09-23
 *  口径：① 颜色只用皮肤令牌 --wk-*（skin-gold = 底#0f1216 / 卡#171b21 / 卡2#1e232a / 文字#e9edf2 / 次要#a8b1bd / 边框#2b3138
 *         / 金#e3b341 / 亮金#f0c95a / 金渐变#c99a2e→#9c751f）→ 禁自创配色 ✗ 禁金蓝混色 ✗
 *        ② 字号只用阶梯 12/13/14/16/20/24 · 间距只用 4/8/12/16/20/24/32 · 圆角只用 4/6/10/14
 *        ③ 控件一律库组件（Wk*）· 图标一律库线性图标（wk-icon）→ 零 emoji ✗ 零汉字当图标 ✗
 */
*{box-sizing:border-box}
html,body{margin:0;background:var(--wk-bg);color:var(--wk-text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none;cursor:pointer}
img{display:block}
.num{font-variant-numeric:tabular-nums}
.n2-body{max-width:1200px;margin:0 auto;padding:0 12px 24px}
@media(min-width:1000px){.n2-body{padding:0 24px 32px}}

/* ── 楼层头 ── */
.n2-sec{margin-top:20px}
@media(min-width:1000px){.n2-sec{margin-top:32px}}
.n2-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.n2-hd h2{font-size:16px;font-weight:800;letter-spacing:.2px;display:flex;align-items:baseline;gap:8px}
@media(min-width:1000px){.n2-hd h2{font-size:20px}}
.n2-hd .sub{font-size:12px;font-weight:400;color:var(--wk-text-3)}
.n2-hd .more{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--wk-text-2)}
.n2-hd .more:hover{color:var(--wk-brand-1)}

/* ── 手机顶部品牌条 ── */
.n2-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;
  height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;
  background:color-mix(in srgb,var(--wk-bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--wk-border)}
.n2-mk{width:28px;height:28px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:900;
  color:var(--wk-brand-on);background:linear-gradient(135deg,var(--wk-brand-2),var(--wk-brand-1))}
.n2-top .nm{flex:none;font-size:16px;font-weight:800;letter-spacing:.4px}
.n2-srch{flex:1;min-width:0;height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:10px;
  background:var(--wk-bg-2);border:1px solid var(--wk-border);color:var(--wk-text-3);font-size:13px;white-space:nowrap;overflow:hidden}
.n2-ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  background:var(--wk-bg-2);border:1px solid var(--wk-border);color:var(--wk-text-2)}
.n2-ico:hover{color:var(--wk-brand-1);border-color:color-mix(in srgb,var(--wk-brand-1) 40%,transparent)}

/* ── Hero（品牌 + 双 CTA + KPI） ── */
.n2-hero{margin:12px 12px 0;padding:20px 16px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--wk-grad-1) 28%,transparent),transparent 62%),var(--wk-bg-1);
  border:1px solid color-mix(in srgb,var(--wk-grad-1) 32%,transparent)}
@media(min-width:1000px){.n2-hero{margin:24px 0 0;padding:32px;display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}}
.n2-hero h1{font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.3px}
.n2-hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--wk-brand-2),var(--wk-brand-1));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.n2-hero .sub{margin-top:8px;font-size:13px;color:var(--wk-text-2)}
.n2-acts{display:flex;gap:12px;margin-top:20px;max-width:420px}
.n2-acts .wk-btn{flex:1}
.n2-kpis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-radius:14px;overflow:hidden;
  background:var(--wk-bg-2);border:1px solid var(--wk-border)}
.n2-kpi{padding:12px 8px;text-align:center;border-right:1px solid var(--wk-border)}
.n2-kpi:last-child{border-right:0}
.n2-kpi b{display:block;font-size:20px;font-weight:900;letter-spacing:-.4px;color:var(--wk-text)}
.n2-kpi span{display:block;margin-top:4px;font-size:12px;color:var(--wk-text-3)}
.n2-note{margin-top:12px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--wk-text-3)}

/* ── 公告条 ── */
.n2-notice{margin:16px 12px 0}
@media(min-width:1000px){.n2-notice{margin:16px 0 0}}

/* ── 游戏分区大图卡 ── */
.n2-games{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:1000px){.n2-games{grid-template-columns:repeat(4,1fr);gap:16px}}
.n2-game{position:relative;display:block;border-radius:14px;overflow:hidden;cursor:pointer;
  background:var(--wk-bg-1);border:1px solid var(--wk-border);transition:border-color .2s,transform .2s}
.n2-game:hover{border-color:color-mix(in srgb,var(--wk-brand-1) 46%,transparent);transform:translateY(-2px)}
.n2-game img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--wk-bg-2)}
.n2-game .ov{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--wk-bg) 92%,transparent))}
.n2-game .ov b{font-size:14px;font-weight:800}
.n2-game .ov span{flex:none;font-size:12px;color:var(--wk-text-2);font-variant-numeric:tabular-nums}
.n2-game .hot{position:absolute;top:8px;left:8px}

/* ── 快捷入口 ── */
.n2-quick{padding:16px 12px;border-radius:14px;background:var(--wk-bg-1);border:1px solid var(--wk-border)}
.n2-quick .wk-grid{background:transparent!important}

/* ── 热门服务卡 ── */
.n2-svcs{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1000px){.n2-svcs{grid-template-columns:repeat(3,1fr);gap:16px}}
.n2-svcnote{margin-top:8px;font-size:12px;color:var(--wk-text-3)}

/* ── 推荐接单人 ── */
.n2-people{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1000px){.n2-people{grid-template-columns:repeat(3,1fr);gap:16px}}
.n2-prow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:var(--wk-bg-1);border:1px solid var(--wk-border)}
.n2-prow .uc{flex:1;min-width:0}
.n2-prow .go{flex:none}

/* ── 公告列表 ── */
.n2-notes{border-radius:14px;overflow:hidden;background:var(--wk-bg-1);border:1px solid var(--wk-border)}

/* ── 手机吸底导航避让 ── */
.n2-safe{height:calc(54px + env(safe-area-inset-bottom))}
.n2-fixed-nav{position:fixed;left:0;right:0;bottom:0;z-index:40}

/* ── 电脑端（WkWebShell 内） ── */
.n2-wnav{display:flex;align-items:center;gap:12px}
.n2-wnav .n2-srch{width:240px;flex:none}
.n2-wbtn{display:flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:10px;cursor:pointer;
  font-size:13px;color:var(--wk-text-2);background:var(--wk-bg-2);border:1px solid var(--wk-border)}
.n2-wbtn:hover{color:var(--wk-brand-1)}
@media(min-width:1000px){.n2-quick{padding:16px 24px}}

/* ── 底栏贴底修正（2026-09-23）────────────────────────────────
 * 库 WkBottomNav 默认 `.wk-bnav.fixed` = position:sticky（短页/空态页内容不足一屏时，
 * 底栏会悬在内容下方而不贴底 —— 实测访客态 m-hall 页底栏停在 y=534/812）。
 * 新站所有底栏都用 .n2-fixed-nav 包裹 → 这里统一改 fixed（带 !important 是因为
 * 库选择器带 [data-v-*] 属性选择器，特异度高于单类）。仅影响 newui2 自己的底栏。 */
.n2-fixed-nav.wk-bnav{position:fixed!important;left:0;right:0;bottom:0;z-index:40}

/* 可读性补丁 · 次要文字令牌（用户端皮肤层覆写 · 2026-09-24）
 *   light: #6e7686(on #eef1f5)=4.03 → #626a76=4.82
 *   gold : #868f9c(on #2f2c23)=4.27 → #8f98a6=4.79
 *   库 0.21.11 不动；同特异性 · 本文件在库之后加载 → 生效
 */
.wk.skin-gold{--wk-text-3:#8f98a6}
.wk.skin-light{--wk-text-3:#626a76}
/* 可读性补丁 · 状态色（用户端皮肤层覆写 · 2026-09-24）
 *   light warning #a8580a(on#e9dbca)=3.80 → #8f4a06=4.90
 *   light success #1a7f37(on#e0e6da)=3.99 → #166f30=4.92
 *   gold  warning #d97a1f(on#433422)=3.85 → #e69440=4.95
 */
.wk.skin-light{--wk-warning:#8f4a06;--wk-success:#166f30}
.wk.skin-gold{--wk-warning:#e69440}