/* ============================================================
   HEIAPI · opencode 设计语言 公共样式 v2
   多页工作台：仪表盘/API密钥/使用量/订阅/订单/账户/设置
   ============================================================ */
::selection{background:hsl(62,84%,88%);color:#1d1d1f}
/* FAQ 折叠状态 */
[data-slot="faq-item"][data-closed] [data-slot="faq-answer"]{display:none}
:root{
  --color-white:#fff;--color-black:#000;
  --color-bg:#fff;--color-bg-surface:#f5f5f7;--color-bg-elevated:#fff;
  --color-text:#1d1d1f;--color-text-secondary:#424245;--color-text-muted:#6e6e73;--color-text-disabled:#6e6e73;--color-text-weak:#6e6e73;
  --color-accent:#0066d6;--color-accent-hover:#004a9f;--color-accent-active:#003a7a;
  --color-accent-black:#1d1d1f;--color-accent-black-hover:#3a3a3c;--color-accent-black-active:#000000;
  --color-success:#30d158;--color-success-dark:#1a8c3a;--color-warning:#ff9f0a;--color-danger:#ff3b30;
  --color-border:#d2d2d7;--color-border-muted:#e5e5ea;
  --color-primary:var(--color-accent-black);--color-primary-hover:var(--color-accent-black-hover);--color-primary-active:var(--color-accent-black-active);--color-primary-text:#fff;
  --color-surface:var(--color-bg-surface);--color-surface-hover:var(--color-bg-elevated);--color-surface-border:var(--color-border);
  --font-size-2xs:.6875rem;--font-size-xs:.75rem;--font-size-sm:.8125rem;--font-size-md:.9375rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;
  --font-mono:"Berkeley Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font-sans:var(--font-mono);
  --space-0:0;--space-0-5:.125rem;--space-0-75:.1875rem;
  --space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-2-5:.625rem;
  --space-3:.75rem;--space-3-5:.875rem;--space-4:1rem;--space-4-5:1.125rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;
  --space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;
  --border-radius-sm:.1875rem;--border-radius-md:.3125rem;--border-radius-lg:.5rem;
  /* 页头光学对齐魔法数字（单一来源，全站页面引用此变量） */
  --header-brand-offset:101px;
  --header-actions-offset:31px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--color-bg)}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--font-size-md);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--color-text)}

/* ---------- 顶栏 ---------- */
[data-component="workspace-header"]{
  position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-4) 2rem;border-bottom:1px solid var(--color-border);background-color:var(--color-bg);
}
[data-slot="header-brand"]{flex:0 0 auto;padding-top:4px;display:flex;align-items:center;gap:var(--space-4)}
[data-component="site-title"]{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);letter-spacing:-0.02em;line-height:0}
[data-component="site-title"] a{display:flex}
[data-slot="header-actions"]{display:flex;gap:var(--space-4);align-items:center;font-size:var(--font-size-sm)}
/* 页头"充值"入口：绿色下划线文字（非按钮），跳钱包页自动打开充值弹窗 */
[data-slot="header-actions"] .header-recharge{font-size:13px;color:var(--color-success-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;white-space:nowrap}
[data-slot="header-actions"] .header-recharge:hover{opacity:.75}
/* 余额与"充值"的间距：约为其他链接可见间距（客服链接带 8px margin）的一半（约12px） */
[data-slot="header-actions"] .header-balance{margin-right:calc(12px - var(--space-4))}
/* 页头导航/操作链接 hover 反馈（与首页一致：文字轻微变亮；内联 color 需 !important 覆盖） */
[data-slot="header-actions"] a{transition:color .15s}
[data-slot="header-actions"] #hdr-nav-links a{color:var(--color-text-muted);text-decoration:none;font-size:var(--font-size-sm)}
[data-slot="header-actions"] #hdr-nav-links a:hover{color:var(--color-text) !important}
[data-slot="header-actions"] a:not(.header-recharge):hover{color:var(--color-text) !important}
.user-chip{color:var(--color-text-muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.chev{color:var(--color-text-muted);display:inline-flex}

/* corner：顶栏 EMAIL 右边缘对齐下方升级按钮（由每页 override --email-mr） */
[data-slot="header-actions"]{margin-right:var(--email-mr,31px)}

/* ---------- 布局 ---------- */
[data-component="workspace-container"]{display:flex;min-height:calc(100vh - 73px)}
[data-component="workspace-nav"]{width:240px;flex-shrink:0;padding:var(--space-6) var(--space-4);display:flex;justify-content:flex-end}
[data-component="workspace-nav-items"]{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
[data-nav-button]{display:inline-block;padding:var(--space-3) var(--space-4);border-radius:var(--border-radius-sm);color:var(--color-text-muted);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:all .15s ease;white-space:nowrap}
[data-nav-button]:hover{color:var(--color-text)}
[data-nav-button].active{color:var(--color-text);font-weight:700;position:relative}
[data-nav-button].active::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background-color:var(--color-text);border-radius:0 2px 2px 0}

[data-component="workspace-content"]{flex:1;padding:var(--space-6) var(--space-8);display:flex;flex-direction:column}
[data-component="workspace-main"]{flex:1}
[data-page]{max-width:64rem;padding:var(--space-2) var(--space-4);width:100%;display:flex;flex-direction:column;gap:var(--space-10)}
[data-slot="sections"]{display:flex;flex-direction:column;gap:var(--space-8)}
[data-slot="sections"] > section:not(:last-child){border-bottom:1px solid var(--color-border);padding-bottom:var(--space-16)}

/* 区块标题 */
[data-slot="section-title"]{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-8)}
[data-slot="section-title"] h2{font-size:var(--font-size-md);font-weight:600;line-height:1.2;letter-spacing:-0.03125rem;color:var(--color-text)}
[data-slot="section-title"] p{line-height:1.5;font-size:var(--font-size-md);color:var(--color-text-muted)}
[data-slot="section-title"] p a{color:var(--color-text-muted)}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.title-row [data-slot="section-title"]{margin-bottom:0}

/* header section：logo 在上 + 一行 文字/右侧按钮 */
[data-component="header-section"]{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-8);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-10)}
[data-component="header-section"] p,[data-component="header-section"] h1{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);line-height:1.5;font-size:var(--font-size-md);color:var(--color-text);margin:0}
[data-component="header-section"] p a,[data-component="header-section"] h1 a{color:var(--color-text-muted)}
[data-component="header-section"] [data-slot="billing-info"]{flex-shrink:0;margin-left:auto}
.hero-logo{color:var(--color-text)}

/* ---------- 按钮 ---------- */
button{font-family:var(--font-sans);cursor:pointer}
[data-color="primary"]{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--space-2);
  background-color:var(--color-primary);color:var(--color-primary-text);border-color:var(--color-primary);
  font-size:var(--font-size-md);font-weight:500;line-height:1.25;transition:all .2s ease-in-out;user-select:none;
  min-height:44px;
}
[data-color="primary"]:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}
[data-color="primary"]:disabled{opacity:.5;cursor:not-allowed}
[data-size="sm"]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);gap:var(--space-1-5);min-height:40px}

[data-color="ghost"]{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--space-2);
  background-color:transparent;color:var(--color-text-muted);font-size:var(--font-size-md);font-weight:500;line-height:1.25;transition:all .15s ease;
  min-height:44px;
}
[data-color="ghost"]:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-border);color:var(--color-text)}
[data-color="ghost"]:disabled{opacity:.5;cursor:not-allowed}
[data-color="secondary"]{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--space-2);
  background-color:var(--color-bg);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;line-height:1.25;transition:all .15s ease;cursor:pointer;font-family:var(--font-sans);
  min-height:44px;
}
[data-color="secondary"]:hover:not(:disabled){background-color:var(--color-bg-surface);border-color:var(--color-text-muted)}
[data-size="xs"]{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm);gap:var(--space-1);min-height:32px}

/* ---------- 语义色 token（状态提示/徽章用，主题化） ---------- */
:root{
  --color-success-text:#2e7d32;--color-success-bg:#e8f5e9;
  --color-warning-text:#e65100;--color-warning-bg:#fff3e0;
  --color-danger-text:#c62828;--color-danger-bg:#ffebee;
  --color-info-text:#1565c0;--color-info-bg:#e3f2fd;
  --color-neutral-text:#6b6b6b;--color-neutral-bg:#f0f0f2;
  --color-refund-text:#c62828;--color-refund-bg:#fce4ec;
}

/* ---------- 分页器（触控目标） ---------- */
.pager{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;margin-top:var(--space-5);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.pager a{height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--color-text-muted);font-size:var(--font-size-sm);text-decoration:none;cursor:pointer;white-space:nowrap}
.pager a:hover{color:var(--color-text);border-bottom-color:var(--color-border)}
.pager a.on{color:var(--color-text);border-bottom-color:var(--color-text);font-weight:600}
.pager a.dim{color:var(--color-text-disabled);cursor:default;pointer-events:none}
.pager .info{height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-xs);margin:0 12px;white-space:nowrap}

/* ---------- 特性虚线框 ---------- */
.zen-root{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-6);background-color:var(--color-bg-surface);border:1px dashed var(--color-border);border-radius:var(--border-radius-sm)}
[data-component="feature-grid"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
[data-slot="feature"]{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--border-radius-sm)}
[data-slot="feature"] h3{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:-0.025rem}
[data-slot="feature"] p{font-size:var(--font-size-sm);line-height:1.5;color:var(--color-text-muted)}

/* ---------- 密钥框（2px 蓝色边框） ---------- */
[data-slot="key-display"]{display:flex;flex-direction:column;gap:var(--space-3)}
[data-slot="key-container"]{display:flex;gap:var(--space-3);padding:var(--space-4);border:2px solid var(--color-accent);border-radius:var(--border-radius-sm);align-items:center}
[data-slot="key-value"]{flex:1;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);background-color:var(--color-bg);padding:var(--space-3);border-radius:var(--border-radius-sm);border:1px solid var(--color-border);word-break:break-all;line-height:1.4}
[data-slot="key-container"] [data-color="primary"]{min-width:130px;white-space:nowrap}
[data-slot="key-container"] [data-color="primary"] svg{flex-shrink:0}

/* ---------- 步骤 ---------- */
[data-component="next-steps"]{display:flex;flex-direction:column;gap:var(--space-6)}
[data-component="next-steps"] ol{margin:0;padding-left:0;display:flex;flex-direction:column;gap:var(--space-2);list-style-position:inside}
[data-component="next-steps"] li{font-size:var(--font-size-md);line-height:1.5;color:var(--color-text-secondary)}
[data-component="next-steps"] code{font-family:var(--font-mono);font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);color:var(--color-text)}

/* ---------- 表格 ---------- */
[data-slot="models-list"]{display:flex;flex-direction:column}
[data-slot="models-table"]{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
thead{border-bottom:1px solid var(--color-border)}
th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:normal;color:var(--color-text-muted);text-transform:uppercase;white-space:nowrap}
td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-muted);color:var(--color-text-muted);font-family:var(--font-mono)}
td[data-slot="model-name"],td[data-slot="provider-name"],td.name-col{color:var(--color-text);font-weight:500}
td[data-slot="model-name"] div,td .name-flex{display:flex;align-items:center;gap:8px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background-color:var(--color-bg-surface)}
.pill-ico{color:var(--color-text)}

/* ---------- 自有通道 配置交互 ---------- */
td[data-slot="provider-name"]{font-weight:500;width:180px}
td[data-slot="provider-key"]{color:var(--color-text-secondary);font-family:var(--font-mono)}
td[data-slot="provider-action"]{white-space:nowrap;width:200px;font-family:var(--font-sans)}
[data-slot="edit-form"]{display:flex;flex-direction:column;gap:var(--space-3);max-width:100%}
[data-slot="input-wrapper"]{display:flex;flex-direction:column;gap:var(--space-1);max-width:100%}
[data-slot="input-wrapper"] input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-mono);width:100%;box-sizing:border-box}
[data-slot="input-wrapper"] input:focus{outline:none;border-color:var(--color-accent)}
[data-slot="input-wrapper"] input::placeholder{color:var(--color-text-disabled)}
[data-slot="form-error"]{color:var(--color-danger);font-size:var(--font-size-sm);line-height:1.4}
[data-slot="form-actions"]{display:flex;gap:var(--space-2)}
[data-slot="configured-actions"]{display:flex;gap:var(--space-2)}
[data-slot="delete-form"]{opacity:0;pointer-events:none;transition:opacity .2s}
tbody tr:hover [data-slot="delete-form"]{opacity:1;pointer-events:auto}
.key-disp{font-family:var(--font-mono)}

/* ---------- 绿色开关 ---------- */
.tgl{position:relative;display:inline-block;width:2.5rem;height:1.5rem;cursor:pointer}
.tgl input{opacity:0;width:0;height:0}
.tgl>.trk{position:absolute;inset:0;background-color:#ccc;border:1px solid #bbb;border-radius:1.5rem;transition:all .3s ease;cursor:pointer}
.tgl>.trk::before{content:"";position:absolute;top:50%;left:.125rem;width:1.25rem;height:1.25rem;background-color:#fff;border:1px solid #ddd;border-radius:50%;transform:translateY(-50%);transition:all .3s ease}
.tgl input:checked + .trk{background-color:#21ad0e;border-color:#148605}
.tgl input:checked + .trk::before{transform:translateX(1rem) translateY(-50%)}
.tgl:hover .trk{box-shadow:0 0 0 2px rgba(34,197,94,.2)}

/* ---------- 通用工具组件（多页使用） ---------- */

/* 余额/大数字 + 小标签 */
.bal{display:flex;flex-direction:column;gap:var(--space-1)}
.bal .amount{font-size:2rem;font-weight:500;letter-spacing:.5px;color:var(--color-text);line-height:1.1}
.bal .label{color:var(--color-text-muted);font-size:var(--font-size-sm)}

/* 价签内强强调 */
.strong-inline strong{color:var(--color-text);font-weight:600}

/* 设置项 行 */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-muted)}
.setting-row:last-child{border-bottom:none}
.setting-row .k{color:var(--color-text);font-size:var(--font-size-md)}
.setting-row .kd{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-top:2px}
.setting-row .v{color:var(--color-text);font-size:var(--font-size-md)}
.setting-row .vval{display:flex;align-items:center;gap:var(--space-4)}

/* 提示条 */
.beta{padding:var(--space-2-5) var(--space-3);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);color:var(--color-text);font-size:var(--font-size-sm);margin-bottom:var(--space-8)}
.beta a{color:var(--color-text-muted)}
.beta code{font-family:var(--font-mono);padding:1px 6px;border:1px solid var(--color-border);border-radius:3px}

/* 空状态 */
.empty-state{padding:var(--space-10) var(--space-8);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-md);border:1px dashed var(--color-border);border-radius:var(--border-radius-sm)}

/* 月份切换器 */
.month-picker{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:2px}
.month-picker button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;color:var(--color-text);cursor:pointer;font-size:var(--font-size-md)}
.month-picker button:disabled{color:var(--color-text-disabled);cursor:not-allowed}
.month-picker span{padding:0 var(--space-2-5);font-size:var(--font-size-sm);color:var(--color-text)}

/* 筛选按钮 */
.filter-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}

/* 输入行 */
.input-row{display:flex;gap:var(--space-2);align-items:center}
.input{flex:1;padding:var(--space-2-5) var(--space-3);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-mono)}
.input:focus{outline:none;border-color:var(--color-accent)}
.input::placeholder{color:var(--color-text-disabled)}

/* 普通输入框（表单） */
.field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.field label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}
.field .input{padding:var(--space-2-5) var(--space-3)}

/* 深色密钥小块 */
.dark-key{font-family:var(--font-mono);background:var(--color-bg-surface);border:1px solid var(--color-border);padding:var(--space-1) var(--space-2-5);border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);color:var(--color-text);word-break:break-all}

/* 下拉菜单占位容器 */
.menu-box{position:relative;display:inline-block}
.menu-box .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;max-height:240px;overflow-y:auto;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.08);padding:var(--space-1);z-index:50}
.menu-box .menu a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--border-radius-sm);color:var(--color-text);text-decoration:none;font-size:var(--font-size-sm)}
.menu-box .menu a:hover{background:var(--color-bg-surface)}

/* ---------- 用户下拉菜单（原版 dropdown 结构） ---------- */
[data-component="user-menu"]{position:relative}
[data-component="dropdown"]{position:relative}
[data-component="dropdown"] [data-slot="trigger"]{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border:none;border-radius:var(--border-radius-sm);
  background-color:transparent;color:var(--color-text);font-size:var(--font-size-sm);
  font-family:var(--font-sans);cursor:pointer;transition:all 0.15s ease;
}
[data-component="dropdown"] [data-slot="trigger"]:hover{background-color:var(--color-surface-hover)}
[data-component="dropdown"] [data-slot="trigger"] span{flex:1;text-align:left;font-weight:500;white-space:nowrap}
[data-component="dropdown"] [data-slot="chevron"]{flex-shrink:0;color:var(--color-text-secondary);transition:transform .15s ease}
[data-component="dropdown"][data-open="true"] [data-slot="chevron"]{transform:rotate(180deg)}
[data-component="dropdown"] [data-slot="dropdown"]{
  position:absolute;top:100%;right:0;z-index:1000;margin-top:var(--space-1);
  border:1px solid var(--color-border);border-radius:var(--border-radius-sm);
  background-color:var(--color-bg);box-shadow:0 4px 12px rgba(0,0,0,0.1);
  min-width:160px;padding:var(--space-1);display:none;
}
[data-component="dropdown"][data-open="true"] [data-slot="dropdown"]{display:block}
[data-component="dropdown"] [data-slot="item"]{
  display:block;width:100%;padding:var(--space-2-5) var(--space-3);border:none;background:none;
  color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-sans);
  text-align:left;cursor:pointer;transition:background-color 0.15s ease;text-decoration:none;box-sizing:border-box;
}
[data-component="dropdown"] [data-slot="item"]:hover{background-color:var(--color-bg-surface)}

/* ---------- legal ---------- */
.legal{margin:auto auto 0;padding:var(--space-8) 5rem;border-top:1px solid var(--color-border);color:var(--color-text-weak);display:flex;gap:var(--space-8);flex-wrap:wrap;max-width:1100px;width:100%}
.legal a{color:var(--color-text-weak);text-decoration:none}
.legal a:hover{color:var(--color-text);text-decoration:underline}

/* ---------- 响应式 ---------- */
@media (max-width: 48rem){
  html,body{overflow-x:hidden}
  [data-component="workspace-container"]{flex-direction:column}
  .legal{padding:var(--space-6) var(--space-4);gap:var(--space-4)}
  [data-component="workspace-nav"]{width:100%;padding:var(--space-3) var(--space-4);justify-content:flex-start;border-bottom:1px solid var(--color-border);overflow-x:auto}
  [data-component="workspace-nav-items"]{flex-direction:row;gap:var(--space-1);position:static;overflow-x:auto}
  [data-nav-button].active::before{display:none}
  [data-nav-button].active::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--color-text)}
  [data-component="workspace-content"]{padding:var(--space-6) var(--space-4)}
  [data-slot="header-brand"]{margin-left:0}
  [data-component="site-title"]{margin-left:0 !important}
  /* 移动端：隐藏桌面导航链接，保留余额/充值/用户菜单（客服由浮动按钮提供） */
  [data-slot="header-actions"] > :not([data-component="user-menu"]):not(.header-balance):not([data-action="recharge"]){display:none}
  [data-slot="header-actions"]{gap:var(--space-2)}
  [data-slot="header-actions"] .header-balance{font-size:12px}
  [data-slot="header-actions"] .header-recharge{font-size:12px;padding:6px 2px}
  [data-slot="header-actions"] [data-action="chatwoot-toggle"]{display:none}
  /* 头部动作区移动端：去掉桌面对齐余量，压缩用户菜单（邮箱截断）防汉堡被挤出屏幕 */
  [data-slot="header-actions"]{margin-right:6px}
  [data-slot="header-actions"] [data-component="dropdown"] [data-slot="trigger"]{padding:4px 6px;gap:4px}
  [data-slot="header-actions"] [data-component="dropdown"] [data-slot="trigger"] span{max-width:44px;overflow:hidden;text-overflow:ellipsis}
  /* hamburger 按钮 */
  /* 移动端触控目标：页头关键操作放大到 ≥40px 命中区（不改视觉尺寸，仅加高内边距） */
  [data-slot="header-actions"] [data-slot="trigger"]{min-height:40px}
  [data-slot="header-actions"] .header-recharge{min-height:40px;display:inline-flex;align-items:center}
  #hdr-mobile-menu{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .lang-switch .sw-btn{min-height:40px}
  #hdr-nav-links{display:none !important}
  #hdr-mobile-menu{display:inline-flex !important}
  /* 移动端下拉菜单（visibility 防屏外面板撑大页面宽度） */
  .mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-nav-overlay.open{opacity:1;pointer-events:auto}
  .mobile-nav-panel{position:fixed;top:0;right:0;width:280px;height:100%;background:var(--color-bg);z-index:201;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s;display:flex;flex-direction:column;padding:var(--space-6)}
  .mobile-nav-panel.open{transform:translateX(0);visibility:visible}
  .mobile-nav-panel a{display:block;padding:var(--space-3) 0;font-size:var(--font-size-md);color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-border-muted)}
  .mobile-nav-panel .close-btn{align-self:flex-end;background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-muted);padding:var(--space-2)}
}
@media (min-width: 48.01rem){
  #hdr-mobile-menu{display:none !important}
  .mobile-nav-overlay,.mobile-nav-panel{display:none}
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important}
  .cw-line-pulse{animation:none !important}
}
:focus-visible{outline:2px solid var(--color-accent-black);outline-offset:2px;border-radius:2px}

/* 跳过导航（屏幕阅读器） */
.skip-link{position:absolute;top:-100px;left:var(--space-4);background:var(--color-accent-black);color:#fff;padding:var(--space-2) var(--space-4);z-index:9999;border-radius:0 0 var(--border-radius-sm) var(--border-radius-sm);font-size:var(--font-size-sm);text-decoration:none}

.skip-link:focus{top:0}

/* 屏幕阅读器专用文本（视觉隐藏，读屏可见） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}



/* ---------- 充值弹窗（全站共享 recharge.js，原 account.html 迁入） ---------- */
.recharge-modal{display:none;position:fixed;z-index:200;top:0;left:0;right:0;bottom:0}
.recharge-modal.show{display:flex;align-items:center;justify-content:center}
.recharge-modal .bg{position:absolute;inset:0;background:rgba(24,26,32,.5)}
.recharge-modal .box{position:relative;background:var(--color-bg);border-radius:12px;width:400px;max-width:92vw;display:flex;flex-direction:column;box-shadow:0 16px 50px rgba(0,0,0,.22);overflow:hidden;max-height:92vh;overflow-y:auto}
.recharge-modal .topline{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--color-border-muted)}
.recharge-modal .topline .t{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--color-text)}
.recharge-modal .amt-row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--color-border-muted)}
.recharge-modal .amt-row .k{font-size:12px;color:var(--color-text-muted)}
.recharge-modal .amt-row .v{font-size:22px;font-weight:700;letter-spacing:-.01em;font-family:var(--font-mono)}
.recharge-modal .presets{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:13px;padding:0 20px}
.recharge-modal .presets button{padding:10px 2px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg);font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--color-text);cursor:pointer;transition:all .12s}
.recharge-modal .presets button:hover{border-color:var(--color-text-muted)}
.recharge-modal .presets button.on{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}
.recharge-modal .custom{display:flex;align-items:center;gap:6px;margin:8px 20px 0;padding:11px 12px;border:1px solid var(--color-border);border-radius:8px}
.recharge-modal .custom:focus-within{border-color:var(--color-text);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.recharge-modal .custom span{font-size:14px;color:var(--color-text-muted)}
.recharge-modal .custom input{border:none;outline:none;flex:1;font-size:14px;font-family:var(--font-sans);background:transparent;color:var(--color-text)}
.recharge-modal .method-row{display:flex;align-items:center;gap:10px;margin:12px 20px 0;padding:11px 12px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-bg-surface)}
.recharge-modal .method-row .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--color-text);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.recharge-modal .method-row .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-text)}
.recharge-modal .method-row .mico{width:20px;height:20px;flex-shrink:0}
.recharge-modal .method-row .mico svg{width:20px;height:20px}
.recharge-modal .method-row .mname{font-size:13px;font-weight:600;color:var(--color-text);flex:1}
.recharge-modal .method-row .mdesc{font-size:11px;color:var(--color-text-muted)}
.recharge-modal .method-row.pending{opacity:.6;cursor:wait}
.recharge-modal msg{display:block;font-size:var(--font-size-sm);padding:var(--space-3);border-radius:var(--border-radius-sm);margin:12px 20px 0;text-align:center}
.recharge-modal msg.ok{background:var(--color-success-bg);color:var(--color-success-text)}
.recharge-modal msg.err{background:var(--color-danger-bg);color:var(--color-danger-text)}
.recharge-modal msg.info{background:var(--color-info-bg);color:var(--color-info-text)}
.recharge-modal .foot{padding:12px 20px 18px}
.btn-main{width:100%;padding:13px;border:none;border-radius:9px;background:var(--color-text);color:var(--color-bg);font-size:14px;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all .14s}
.btn-main:hover{background:#2c2c2e}
.btn-main:active{transform:translateY(1px)}
.btn-main:disabled{opacity:.5;cursor:not-allowed}
.paying{display:none;flex-direction:column;padding:0 20px 18px}
.paying.show{display:flex}
.pay-head{display:flex;align-items:center;gap:10px;padding:15px 0 2px;border-bottom:1px solid var(--color-border-muted)}
.pay-head .ph-logo{width:24px;height:24px;flex-shrink:0}
.pay-head .ph-logo svg{width:24px;height:24px}
.pay-head .ph-title{font-size:14px;font-weight:600;color:var(--color-text)}
.pay-head .ph-sub{font-size:11px;color:var(--color-text-muted);margin-left:auto}
.pay-body{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px}
.amount-row{display:flex;align-items:baseline;gap:6px}
.amount-row .a-num{font-size:32px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-mono)}
.amount-row .a-cny{font-size:12px;color:var(--color-text-muted)}
.qr-zone{position:relative;margin:14px 0 6px;padding:14px;background:#fff;border:1px solid var(--color-border);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.qr-zone img{display:block;width:176px;height:176px}
.qr-zone .expired-tag{display:none;position:absolute;inset:0;background:rgba(255,255,255,.92);border-radius:14px;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.qr-zone.expired .expired-tag{display:flex}
.qr-zone.expired img{filter:grayscale(1);opacity:.35}
.expired-tag .et-ico{width:40px;height:40px;border-radius:50%;background:#f2f3f6;display:flex;align-items:center;justify-content:center;font-size:20px}
.expired-tag .et-t{font-size:14px;font-weight:600;color:#3a3a3c}
.expired-tag .et-s{font-size:11px;color:var(--color-text-muted)}
.timer-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:6px}
.timer-row .clock{width:16px;height:16px;flex-shrink:0;color:var(--color-text-muted)}
.timer-row .tnum{font-size:15px;font-weight:700;font-family:var(--font-mono);color:var(--color-text);font-variant-numeric:tabular-nums}
.timer-row .tnote{font-size:12px;color:var(--color-text-muted)}
.timer-row.expired .clock{color:var(--color-text-disabled)}
.timer-row.expired .tnum{color:var(--color-text-disabled)}
.oid-line{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:9px 12px;background:var(--color-bg-surface);border-radius:8px;font-size:11px;color:var(--color-text-muted)}
.oid-line b{font-family:var(--font-mono);font-weight:600;color:var(--color-text-secondary);font-size:11px}
.oid-line button{border:none;background:none;color:var(--color-accent);font-size:11px;font-family:var(--font-sans);cursor:pointer;padding:2px 6px}
.oid-line button:hover{text-decoration:underline}
.pay-actions{display:flex;flex-direction:column;align-items:stretch;margin-top:14px}
.btn-wide{width:100%}
.btn-link{border:none;background:none;color:var(--color-text-muted);font-size:12px;font-family:var(--font-sans);cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:3px}
.btn-link:hover{color:var(--color-text)}
.pay-status{margin-top:10px;text-align:center;font-size:12px;color:#2e7d32;display:none}
.pay-status.show{display:block}
.confirm-mask{position:fixed;z-index:300;top:0;left:0;right:0;bottom:0;background:rgba(24,26,32,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.confirm-box{background:var(--color-bg);border-radius:12px;width:300px;max-width:88vw;padding:24px 22px 20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 16px 50px rgba(0,0,0,.22)}
.confirm-ico{width:44px;height:44px;border-radius:50%;background:var(--color-bg-surface);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--color-text-muted);margin-bottom:14px}
.confirm-title{font-size:15px;font-weight:600;color:var(--color-text);text-align:center;letter-spacing:-.01em}
.confirm-sub{font-size:12px;color:var(--color-text-muted);margin-top:6px;text-align:center}
.confirm-actions{display:flex;gap:8px;width:100%;margin-top:20px}
.confirm-btn{flex:1;padding:11px;border-radius:9px;font-size:13px;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all .14s}
.confirm-btn.ghost{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-secondary)}
.confirm-btn.ghost:hover{border-color:var(--color-text-muted)}
.confirm-btn.main{border:none;background:var(--color-text);color:var(--color-bg)}
.confirm-btn.main:hover{background:#2c2c2e}
.confirm-btn:active{transform:translateY(1px)}

/* ============ 分割线(上)→内容 间距减半实验（可回撤：删除本块即可恢复） ============ */
/* 只减"上方分割线 → 下方内容"距离：页头底线到首块、块间线到标题、[data-page] 容器 gap */
[data-component="header-section"]{margin-bottom:var(--space-5)}
[data-slot="sections"]{gap:var(--space-4)}
[data-page]{gap:var(--space-5)}
/* ============ 间距减半实验结束 ============ */