/* ============================================================
   UU客服助手 · 门户官网样式（暗色科技感）
   ------------------------------------------------------------
   本文件只服务 public/index.php 一个页面，与后台的 app.css 完全隔离
   （后台是 aaPanel 风格的「工具感」，门户是「产品官网感」，两者各管各的，
    改这里不会波及后台，反之亦然）。

   口径约定（长期有效，改文案时不要破坏）：
     只讲「能做到什么」，不讲「怎么做到」。页面里不出现实现细节词
     （Cookie / 协议 / 模拟登录 / 抓取 / 脚本 / 自动化登录 / 并发 …）。
     所有示例数据一律脱敏为占位形态，不得换成真实店铺名或订单号。

   断点：1080px（双列收单列）/ 760px（手机）/ 420px（小屏微调）
   ============================================================ */

:root {
  --p-bg: #070a11;
  --p-bg-soft: #0b101a;
  --p-panel: rgba(255, 255, 255, .034);
  --p-panel-hi: rgba(255, 255, 255, .058);
  --p-line: rgba(255, 255, 255, .085);
  --p-line-hi: rgba(255, 255, 255, .16);
  --p-text: #e9eef8;
  --p-muted: #8b98ae;
  --p-dim: #616d82;
  --p-primary: #3b82f6;
  --p-primary-hi: #60a5fa;
  --p-cyan: #22d3ee;
  --p-violet: #8b5cf6;
  --p-green: #34d399;
  --p-amber: #fbbf24;
  --p-red: #f87171;
  --p-r: 14px;
  --p-max: 1140px;

  /* ---- 可随主题切换的表面（原先写死在规则里，三档主题上线后抽成变量）---- */
  --p-nav-bg: rgba(7, 10, 17, .78);
  --p-shot-bg: linear-gradient(160deg, #0e1420, #0a0f18);
  --p-shot-shadow: 0 26px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(59, 130, 246, .07);
  --p-shot-bar-bg: rgba(255, 255, 255, .022);
  --p-note-bg: rgba(255, 255, 255, .015);
  --p-mock-line: #2c3546;
  --p-body-bg:
    radial-gradient(900px 460px at 50% -140px, rgba(59, 130, 246, .18), transparent 70%),
    radial-gradient(700px 420px at 92% 12%, rgba(139, 92, 246, .10), transparent 72%),
    linear-gradient(180deg, #070a11 0%, #080c14 40%, #070a11 100%);
}

/* ---- 亮色：门户的「暗色科技感」在浅底上同样成立，只是把辉光收淡、把半透明白换成半透明黑 ---- */
html[data-theme="light"] {
  --p-bg: #eef1f6;
  --p-bg-soft: #ffffff;
  --p-panel: rgba(15, 23, 42, .035);
  --p-panel-hi: rgba(15, 23, 42, .06);
  --p-line: rgba(15, 23, 42, .10);
  --p-line-hi: rgba(15, 23, 42, .18);
  --p-text: #1b2130;
  --p-muted: #59637a;
  --p-dim: #8a93a5;
  --p-primary: #1677ff;
  --p-primary-hi: #0958d9;
  --p-cyan: #0891b2;
  --p-violet: #6d28d9;
  --p-green: #389e0d;
  --p-amber: #d48806;
  --p-red: #cf1322;

  --p-nav-bg: rgba(255, 255, 255, .85);
  --p-shot-bg: linear-gradient(160deg, #ffffff, #f4f7fb);
  --p-shot-shadow: 0 18px 44px rgba(15, 23, 42, .14), 0 0 0 1px rgba(22, 119, 255, .06);
  --p-shot-bar-bg: rgba(15, 23, 42, .03);
  --p-note-bg: rgba(15, 23, 42, .02);
  --p-mock-line: #cbd5e1;
  --p-body-bg:
    radial-gradient(900px 460px at 50% -140px, rgba(22, 119, 255, .10), transparent 70%),
    radial-gradient(700px 420px at 92% 12%, rgba(109, 40, 217, .06), transparent 72%),
    linear-gradient(180deg, #f5f8fc 0%, #eef1f6 40%, #f5f8fc 100%);
}

/* ---- 超暗（纯黑 OLED）：只压底，不动品牌色 ---- */
html[data-theme="ultra-dark"] {
  --p-bg: #000000;
  --p-bg-soft: #08080a;
  --p-panel: rgba(255, 255, 255, .05);
  --p-panel-hi: rgba(255, 255, 255, .08);
  --p-line: rgba(255, 255, 255, .10);
  --p-line-hi: rgba(255, 255, 255, .20);
  --p-nav-bg: rgba(0, 0, 0, .82);
  --p-shot-bg: linear-gradient(160deg, #0b0b0e, #050507);
  --p-shot-bar-bg: rgba(255, 255, 255, .03);
  --p-note-bg: rgba(255, 255, 255, .02);
  --p-mock-line: #3a3f4d;
  --p-body-bg:
    radial-gradient(900px 460px at 50% -140px, rgba(22, 104, 220, .16), transparent 70%),
    radial-gradient(700px 420px at 92% 12%, rgba(139, 92, 246, .09), transparent 72%),
    linear-gradient(180deg, #000 0%, #050507 40%, #000 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--p-bg);
  color: var(--p-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  /* 顶部一层极淡的主色辉光 + 网格底纹：不做整屏大图，只做「技术感」氛围 */
  background-image: var(--p-body-bg);
  background-repeat: no-repeat;
  transition: background-color .2s, color .2s;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--p-max); margin: 0 auto; padding: 0 22px; }

/* ---------------- 顶栏 ---------------- */
.p-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--p-nav-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--p-line);
}
.p-nav-in {
  height: 62px; display: flex; align-items: center; gap: 18px;
}
.p-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.p-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: .5px; color: #fff;
  background: linear-gradient(135deg, var(--p-primary), var(--p-violet));
  box-shadow: 0 4px 16px rgba(59, 130, 246, .42), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.p-brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.p-brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: .2px; }
.p-brand-sub { font-size: 11px; color: var(--p-dim); letter-spacing: .6px; }

.p-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.p-menu a {
  padding: 7px 13px; border-radius: 8px; font-size: 14px; color: var(--p-muted);
  transition: color .16s, background-color .16s;
}
.p-menu a:hover { color: var(--p-text); background: var(--p-panel-hi); }

/* 登录入口：固定在顶栏最右（2026-09-25 用户要求，此前是页脚小字）。
   刻意做成描边小按钮、不用主色 —— 比站内导航略轻一档，
   既让要进后台的人一眼能找到，又不把官网脸变成「后台入口页」。 */
.p-nav-cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 8px 15px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--p-muted);
  background: var(--p-panel); border: 1px solid var(--p-line);
  transition: color .16s, border-color .16s, background-color .16s;
}
.p-nav-cta:hover {
  color: var(--p-text); border-color: var(--p-line-hi); background: var(--p-panel-hi);
}
.p-nav-cta svg { width: 14px; height: 14px; }

/* 顶栏图标按钮（三档主题切换）：与「登录」同高，做成圆形描边小钮 */
.p-icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 50%;
  color: var(--p-muted); cursor: pointer; padding: 0;
  transition: color .16s, border-color .16s, background-color .16s, transform .15s;
}
.p-icon-btn:hover, .p-icon-btn:focus-visible {
  color: var(--p-primary-hi); border-color: var(--p-line-hi);
  background: var(--p-panel-hi); transform: scale(1.06); outline: none;
}
.p-icon-btn svg { width: 17px; height: 17px; }

/* 移动端汉堡：760px 以下出，菜单就地展开成竖排 */
.p-burger {
  display: none; margin-left: auto; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 10px;
  color: var(--p-text); cursor: pointer;
}
.p-burger svg { width: 20px; height: 20px; }

/* ---------------- Hero ---------------- */
.p-hero { padding: 66px 0 44px; position: relative; }
.p-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 46px; align-items: center;
}
.p-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 10px; border-radius: 999px;
  font-size: 12.5px; color: var(--p-primary-hi); letter-spacing: .3px;
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .34);
}
.p-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--p-green);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}
.p-h1 {
  margin: 18px 0 0; font-size: clamp(34px, 5.4vw, 54px); line-height: 1.14;
  font-weight: 800; letter-spacing: -.5px;
}
.p-h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--p-primary-hi), var(--p-cyan) 55%, var(--p-violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.p-lead {
  margin-top: 16px; font-size: clamp(15px, 1.6vw, 16.5px);
  color: var(--p-muted); max-width: 33em;
}
.p-lead b { color: var(--p-text); font-weight: 600; }
.p-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.p-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 11px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: transform .16s, box-shadow .16s, background-color .16s;
}
.p-btn svg { width: 17px; height: 17px; }
.p-btn-primary {
  color: #fff; background: linear-gradient(135deg, var(--p-primary), #2563eb);
  box-shadow: 0 8px 26px rgba(37, 99, 235, .38);
}
.p-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 99, 235, .5); }
.p-btn-ghost {
  color: var(--p-text); background: var(--p-panel); border-color: var(--p-line-hi);
}
.p-btn-ghost:hover { background: var(--p-panel-hi); transform: translateY(-2px); }

/* 首屏三个卖点：桌面两栏布局下左栏只有 510~530px，而三条文案实测要 526~626px
   —— 旧文案在 20px 字号下也是 586px，一直是挤成 2 行。
   字号收到 16px + gap 18px 后稳定在 481px 以内，**1100 / 1280 / 1440 各档都能一行放下**，
   三个卖点并排一眼扫完，比零散的 2+1 更像「卖点条」。窄屏单栏时空间更宽，不受影响。 */
.p-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.p-fact span { display: block; font-size: 12px; color: var(--p-dim); }
.p-fact b { font-size: 16px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.p-fact b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--p-muted); }

/* ---------------- 界面示意窗（纯 CSS 画的 mock，零真实数据） ---------------- */
.p-shot {
  position: relative; border-radius: var(--p-r); overflow: hidden;
  background: var(--p-shot-bg);
  border: 1px solid var(--p-line-hi);
  box-shadow: var(--p-shot-shadow);
}
.p-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 88% -40px, rgba(59, 130, 246, .16), transparent 70%);
}
.p-shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--p-line);
  background: var(--p-shot-bar-bg);
}
.p-shot-bar u {
  width: 10px; height: 10px; border-radius: 50%; background: var(--p-mock-line); text-decoration: none;
}
.p-shot-bar u:nth-child(1) { background: #ff5f57; }
.p-shot-bar u:nth-child(2) { background: #febc2e; }
.p-shot-bar u:nth-child(3) { background: #28c840; }
.p-shot-url {
  margin-left: 8px; font-size: 11.5px; color: var(--p-dim);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.p-shot-tag {
  margin-left: auto; font-size: 10.5px; letter-spacing: .4px;
  color: #fbbf24; background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .3);
  padding: 1px 8px; border-radius: 999px;
}
.p-shot-body { padding: 14px; display: flex; flex-direction: column; gap: 11px; }

.p-mock-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .028); border: 1px solid var(--p-line);
}
.p-mock-row.is-hit { border-color: rgba(59, 130, 246, .42); background: rgba(59, 130, 246, .09); }
.p-mock-row.is-warn { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); }
.p-mock-row.is-ok { border-color: rgba(52, 211, 153, .34); background: rgba(52, 211, 153, .07); }
.p-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #4a5568; }
.p-dot.ok { background: var(--p-green); }
.p-dot.warn { background: var(--p-amber); }
.p-dot.err { background: var(--p-red); }
.p-mock-main { flex: 1; min-width: 0; }
.p-mock-main b {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--p-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-mock-main em { font-style: normal; font-size: 11px; color: var(--p-dim); }
.p-plat {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #fff;
  padding: 1px 7px; border-radius: 4px; background: #3f6ae0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.p-plat.v1 { background: #7a4fd0; }
.p-plat.v2 { background: #b57320; }
.p-plat.v3 { background: #2f8f5b; }   /* 下级代理订单的来源标记 */
.p-state {
  flex-shrink: 0; font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid transparent;
}
.p-state.ok { color: #6ee7b7; background: rgba(52, 211, 153, .13); border-color: rgba(52, 211, 153, .3); }
.p-state.warn { color: #fcd34d; background: rgba(251, 191, 36, .13); border-color: rgba(251, 191, 36, .3); }
.p-state.err { color: #fca5a5; background: rgba(248, 113, 113, .13); border-color: rgba(248, 113, 113, .3); }
.p-shot-note {
  font-size: 11px; color: var(--p-dim); text-align: center;
  padding-top: 2px; letter-spacing: .2px;
}

/* ---------------- 通用区块 ---------------- */
.p-sec { padding: 60px 0; }
.p-sec-alt { background: linear-gradient(180deg, transparent, var(--p-note-bg) 18%, transparent); }
.p-sec-head { max-width: 46em; margin-bottom: 34px; }
.p-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--p-primary-hi);
}
.p-h2 {
  margin-top: 10px; font-size: clamp(23px, 3.1vw, 31px);
  font-weight: 750; line-height: 1.28; letter-spacing: -.3px;
}
.p-desc { margin-top: 12px; color: var(--p-muted); font-size: 15px; }

/* ---------------- 能力卡片 ---------------- */
.p-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-card {
  position: relative; overflow: hidden;
  padding: 22px; border-radius: var(--p-r);
  background: var(--p-panel); border: 1px solid var(--p-line);
  transition: transform .18s, border-color .18s, background-color .18s;
}
.p-card::before {
  content: ""; position: absolute; top: -54px; right: -54px;
  width: 140px; height: 140px; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, rgba(59, 130, 246, .3), transparent 68%);
  pointer-events: none; transition: opacity .18s;
}
.p-card:nth-child(3n+2)::before { background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 68%); }
.p-card:nth-child(3n+3)::before { background: radial-gradient(circle, rgba(34, 211, 238, .24), transparent 68%); }
.p-card:hover { transform: translateY(-3px); border-color: var(--p-line-hi); background: var(--p-panel-hi); }
.p-card:hover::before { opacity: .85; }
.p-ico {
  position: relative; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .3);
  color: var(--p-primary-hi);
}
.p-ico svg { width: 20px; height: 20px; }
.p-card:nth-child(3n+2) .p-ico { background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .3); color: #b79bf8; }
.p-card:nth-child(3n+3) .p-ico { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .28); color: #67e8f9; }
.p-card h3 { position: relative; margin: 15px 0 7px; font-size: 16px; font-weight: 650; }
.p-card p { position: relative; color: var(--p-muted); font-size: 13.6px; line-height: 1.75; }

/* ---------------- 工作流程 ---------------- */
.p-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.p-step {
  position: relative; padding: 20px 18px; border-radius: var(--p-r);
  background: var(--p-panel); border: 1px solid var(--p-line);
}
.p-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--p-primary), var(--p-violet));
  box-shadow: 0 3px 12px rgba(59, 130, 246, .38);
}
.p-step h3 { margin: 13px 0 6px; font-size: 15px; font-weight: 650; }
.p-step p { color: var(--p-muted); font-size: 13.4px; line-height: 1.72; }
/* 步骤之间的连接箭头：只在宽屏显示，窄屏靠竖排隐式的顺序表达 */
.p-step:not(:last-child)::after {
  content: ""; position: absolute; top: 33px; right: -9px; width: 16px; height: 1px;
  background: linear-gradient(90deg, var(--p-line-hi), transparent);
}

/* ---------------- 双列表（界面示意 / 特性） ---------------- */
.p-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.p-panel {
  border-radius: var(--p-r); border: 1px solid var(--p-line);
  background: var(--p-panel); padding: 20px;
}
.p-panel-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--p-line);
}
.p-panel-head h3 { font-size: 15px; font-weight: 650; }
.p-panel-head .p-state { margin-left: auto; }

.p-timeline { display: flex; flex-direction: column; gap: 9px; }
.p-tl-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .026); border: 1px solid var(--p-line);
}
.p-tl-time {
  flex-shrink: 0; font-size: 11px; color: var(--p-dim);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  padding-top: 1px;
}
.p-tl-main { flex: 1; min-width: 0; }
.p-tl-main b { display: block; font-size: 12.8px; font-weight: 550; }
.p-tl-main em { font-style: normal; font-size: 11.5px; color: var(--p-dim); }

/* ---------------- 特性清单 ---------------- */
.p-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-feat {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 16px; border-radius: 11px;
  background: var(--p-panel); border: 1px solid var(--p-line);
}
.p-feat-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .26);
  color: #6ee7b7;
}
.p-feat-ico svg { width: 16px; height: 16px; }
.p-feat b { display: block; font-size: 14px; font-weight: 620; }
.p-feat p { color: var(--p-muted); font-size: 13.2px; line-height: 1.68; margin-top: 3px; }

/* ---------------- 适用场景 ---------------- */
.p-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p-use {
  padding: 20px; border-radius: var(--p-r); text-align: left;
  background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  border: 1px solid var(--p-line);
}
.p-use h3 { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.p-use h3 span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--p-cyan); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
}
.p-use p { margin-top: 8px; color: var(--p-muted); font-size: 13.4px; line-height: 1.72; }

/* ---------------- 页脚 ---------------- */
.p-foot {
  margin-top: 20px; padding: 30px 0 34px;
  border-top: 1px solid var(--p-line);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3));
}
.p-foot-in {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.p-foot-brand { display: flex; align-items: center; gap: 9px; }
.p-foot-brand .p-mark { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.p-foot-name { font-size: 14px; font-weight: 650; }
.p-copy { color: var(--p-dim); font-size: 12.5px; }
.p-foot-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
  .p-hero { padding: 48px 0 34px; }
  .p-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-step:nth-child(2n)::after { display: none; }
  .p-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 16px; }

  /* 顶栏：菜单收进汉堡，点开就地展开成竖排面板 */
  .p-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 8px 14px 14px;
    background: rgba(8, 11, 18, .985);
    border-bottom: 1px solid var(--p-line);
    display: none;
  }
  .p-menu.is-open { display: flex; }
  .p-menu a { padding: 11px 12px; border-radius: 9px; font-size: 15px; }
  .p-burger { display: inline-flex; margin-left: 0; }
  .p-brand-sub { display: none; }
  /* 顶栏右侧收窄：登录按钮与汉堡并排、都在右上角 —— 由「登录」承担 margin-left:auto
     把这一组推到右边（窄屏下菜单是绝对定位不占位，汉堡不该再抢 auto）；
     间距收一点免得挤。 */
  .p-nav-in { gap: 10px; }
  .p-nav-cta { margin-left: 0; padding: 7px 12px; font-size: 13px; }
  .p-icon-btn { margin-left: auto; width: 34px; height: 34px; }

  .p-hero { padding: 34px 0 26px; }
  .p-h1 { margin-top: 14px; }
  .p-lead { font-size: 14.6px; }
  .p-cta { gap: 10px; }
  .p-cta .p-btn { flex: 1 1 100%; justify-content: center; }
  .p-facts { gap: 18px; margin-top: 24px; }
  .p-fact b { font-size: 18px; }

  .p-sec { padding: 40px 0; }
  .p-sec-head { margin-bottom: 24px; }
  .p-cards { grid-template-columns: 1fr; gap: 12px; }
  .p-card { padding: 18px; }
  .p-flow { grid-template-columns: 1fr; gap: 11px; }
  .p-step::after { display: none; }
  .p-split { grid-template-columns: 1fr; gap: 14px; }
  .p-panel { padding: 16px; }
  .p-feats { grid-template-columns: 1fr; gap: 10px; }
  .p-uses { grid-template-columns: 1fr; gap: 11px; }

  .p-shot-body { padding: 11px; gap: 8px; }
  .p-mock-row { padding: 8px 10px; gap: 7px; }
  .p-mock-main b { font-size: 12px; }
  .p-shot-url { display: none; }

  .p-foot { padding: 24px 0 28px; }
  .p-foot-in { gap: 10px; }
  .p-foot-right { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (max-width: 420px) {
  .p-brand-name { font-size: 14.5px; }
  .p-nav-cta { padding: 6px 10px; font-size: 12.5px; gap: 5px; }
  .p-facts { gap: 14px 20px; }
  .p-tl-time { font-size: 10.5px; }
  .p-plat { display: none; }
}

/* ---- 亮色主题下的对比度校准：暗底上挑出来的浅色文字，白底上读不清 ---- */
html[data-theme="light"] .p-state.ok   { color: var(--p-green); }
html[data-theme="light"] .p-state.warn { color: var(--p-amber); }
html[data-theme="light"] .p-state.err  { color: var(--p-red); }
html[data-theme="light"] .p-card .p-ico                        { color: var(--p-primary); }
html[data-theme="light"] .p-card:nth-child(3n+2) .p-ico        { color: var(--p-violet); }
html[data-theme="light"] .p-card:nth-child(3n+3) .p-ico        { color: var(--p-cyan); }
html[data-theme="light"] .p-badge i { box-shadow: 0 0 0 3px rgba(56, 158, 13, .16); }
html[data-theme="light"] .p-mock-row.is-hit  { color: var(--p-text); }
html[data-theme="light"] .p-btn-primary { box-shadow: 0 8px 22px rgba(22, 119, 255, .30); }
html[data-theme="light"] .p-btn-primary:hover { box-shadow: 0 14px 30px rgba(22, 119, 255, .38); }

/* 键盘可达性：门户里每个可点元素都要有可见焦点（规范 §6.3） */
.p-menu a:focus-visible, .p-nav-cta:focus-visible, .p-burger:focus-visible,
.p-btn:focus-visible, .p-foot a:focus-visible, .p-card a:focus-visible {
  outline: 2px solid var(--p-primary-hi); outline-offset: 2px;
}

/* Windows 高对比度模式（规范 §6.3） */
@media (forced-colors: active) {
  .p-nav, .p-shot, .p-card, .p-panel, .p-btn, .p-nav-cta, .p-burger { border: 1px solid CanvasText; box-shadow: none; }
  .p-mark, .p-plat { background: Highlight; color: HighlightText; }
  .p-h1 em { -webkit-text-fill-color: CanvasText; color: CanvasText; }
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .p-card, .p-btn { transition: none; }
}