/* ============================================================================
 * 「宣纸与墨玉」· 二开视觉主题层 v2（完全重制）
 * ----------------------------------------------------------------------------
 * 设计概念：一方宣纸，托着几枚墨玉。
 *   前台 —— 暖宣纸底上的水墨留白，商品像印章般克制落位（印刷品气质，非货架）。
 *   后台 —— 把宣纸翻到背面，露出被磨得发亮的石墨工作台（玻璃 + 铜金细线）。
 *
 * 加载顺序：styles.css -> admin-clone.css -> motion.css -> theme.css
 * 本文件只做「外观」覆盖，不改动 DOM 结构与 class 名，
 * 因此 app.js / admin-clone.js 的全部交互逻辑保持可用。
 *
 * 专家评审结论（docs/ 内 6 份）落地要点：
 *   · 视觉总监：暖灰纸底 + 松烟青主色 + 烫金点缀（金占比 <3%），禁红金促销配色
 *   · 前台版式：悬浮胶囊导航 / 首屏 7:5 错层 / 12 栏不等宽瀑布 / 分类横向轨道
 *   · 后台版式：图标轨道 + 悬浮命令条 + 深色数据带 + 无竖线清单
 *   · 无障碍：所有文字对 ≥4.5:1，渐变文字先给不透明 fallback，玻璃层上叠不透明底
 *   · 性能：零外部资源；滚动路径不读布局；hover 用 background 不用 box-shadow 逐行重绘
 * ========================================================================== */

:root {
  /* ---- 前台：宣纸 ---------------------------------------------------- */
  --paper-bg: #f7fbf8;
  --paper-sheet: #f1f6f3;
  --paper-raised: #ffffff;
  --paper-line: #cfe2d8;
  --paper-line-strong: #9dbfae;
  --paper-ink: #14231d;
  --paper-ink-soft: #4a5f55;
  --paper-ink-muted: #587469;
  --paper-sink: #0c2a1e;
  --paper-section: #e3f2ea;
  --footer-bg: #0c2a1e;
  --on-brand: #ffffff;

  /* ---- 后台：墨玉石墨 ------------------------------------------------ */
  --ink-bg: #f7f9fc;
  --ink-surface: #ffffff;
  --ink-raised: #ffffff;
  --ink-line: #e2e9f1;
  --ink-line-strong: #c9d6e4;
  --ink-fg: #16202e;
  --ink-fg-soft: #55637a;
  --ink-fg-muted: #5e6c84;
  --ink-brand: #1a5aa8;
  --ink-brand-deep: #103f7a;

  /* ---- 共享语义（默认取前台值，后台段落内重声明） -------------------- */
  --bg: var(--paper-bg);
  --surface: var(--paper-raised);
  --surface-soft: var(--paper-sheet);
  --surface-2: #e3f2ea;
  --text: var(--paper-ink);
  --text-soft: var(--paper-ink-soft);
  --muted: var(--paper-ink-muted);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);

  /* 主色：松烟青。装修页会以内联样式覆盖 --brand，
     因此所有交互色统一走 --brand-ink 降噪，商家选任何色都不会跑出高级感。 */
  --brand: #0b7a55;
  --brand-dark: #075b3f;
  --brand-soft: #d8eee3;
  --brand-ink: var(--brand);
  --accent: #d98a0b;
  --accent-soft: #fdf3df;
  --green: #0b6b48;
  --green-soft: #c9eddd;
  --amber: #7a4e08;
  --amber-soft: #f7d9a6;
  --red: #8f2a1e;
  --red-soft: #f3c6c0;
  --focus: #0b7a55;

  /* ---- 几何：4 / 8 / 12 / 16 / 20 ---------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* ---- 阴影：暖色弥散，最多两层 ------------------------------------ */
  --shadow-ink: 12, 42, 30;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-ink), .05);
  --shadow-sm: 0 2px 6px -2px rgba(var(--shadow-ink), .07);
  --shadow: 0 10px 30px -14px rgba(var(--shadow-ink), .14), 0 1px 2px rgba(var(--shadow-ink), .05);
  --shadow-lg: 0 32px 64px -32px rgba(var(--shadow-ink), .24), 0 2px 8px -4px rgba(var(--shadow-ink), .08);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ---- 排版节奏 ---------------------------------------------------- */
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --measure: 34em;
  --gap-section: clamp(40px, 5vh, 72px);

  /* ---- 动效令牌（与 motion.css 对齐） ------------------------------- */
  --dur-1: .12s;
  --dur-2: .18s;
  --dur-3: .24s;
  --dur-4: .42s;
  --dur-5: .56s;
  --ease-1: cubic-bezier(.4, 0, 1, 1);
  --ease-2: cubic-bezier(.2, 0, 0, 1);
  --ease-3: cubic-bezier(.22, 1, .36, 1);
  --ease-4: cubic-bezier(.16, 1, .3, 1);
  --ease-5: cubic-bezier(.34, 1.36, .64, 1);

}

/* ---------------------------------------------------------------- 基础重置 */

body {
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: 0; line-height: 1.4; }
h1 { font-size: clamp(24px, 2.2vw, 28px); font-weight: 600; line-height: 1.36; }
h2 { font-size: 22px; font-weight: 600; line-height: 1.41; }
h3 { font-size: 17px; font-weight: 500; line-height: 1.53; }
p { line-height: 1.7; }

/* 前台大标题用系统衬线点缀（≥28px 才启用，中文小字仍走黑体） */
.client-app .banner-copy h1,
.client-app .catalog-head h1,
.client-app .auth-intro h1,
.client-app .account-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
}

::selection { background: #dfe7ea; color: var(--paper-ink); }

* { scrollbar-width: thin; scrollbar-color: #9dbfae transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: #9dbfae;
}
::-webkit-scrollbar-thumb:hover { background-color: #b3aa9c; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------ 通用控件 */

.btn {
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: none;
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2),
    color var(--dur-2) var(--ease-2), transform var(--dur-1) var(--ease-1);
}
.btn:hover { color: var(--brand-ink); border-color: var(--brand-ink); background: var(--surface); }
.btn:active { transform: translateY(1px); }

/* 主按钮：实色松烟青，不用渐变发光（视觉总监禁令 1） */
.btn.primary {
  border-color: var(--brand-ink);
  background: var(--brand-ink);
  color: #fff;
  font-weight: 500;
}
.btn.primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.btn.ghost { background: var(--surface-soft); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brand-ink); }
.btn.danger { border-color: var(--red); background: var(--red); color: #fff; }
.btn.danger:hover { background: #8d2f25; border-color: #8d2f25; color: #fff; }
.btn.large { min-height: 50px; padding-inline: 26px; font-weight: 600; letter-spacing: .04em; }

.icon-btn, .mobile-menu, .sidebar-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  transition: border-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2),
    transform var(--dur-2) var(--ease-5);
}
.icon-btn:hover, .mobile-menu:hover, .sidebar-toggle:hover { color: var(--brand-ink); border-color: var(--brand-ink); transform: rotate(-3deg); }

.badge {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}
.badge::before { width: 5px; height: 5px; margin-right: 6px; }
.badge.success { color: #0f5132; background: #d7f0e1; border-color: #b6dfc8; }
.badge.warning { color: #7a4a00; background: #fcebc8; border-color: #efd7a4; }
.badge.danger { color: #8c1d18; background: #fbdDDc; border-color: #f0c2c0; }

.field label { color: var(--text-soft); font-size: 13px; font-weight: 500; letter-spacing: .02em; margin-bottom: 7px; }
.field input, .field select, .field textarea, .filter-bar input, .filter-bar select,
.store-search input, .catalog-head input, .query-hero input, .modal-form input,
.modal-form select, .modal-form textarea {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.field input:hover, .field select:hover, .field textarea:hover,
.catalog-head input:hover, .store-search input:hover { border-color: var(--brand-ink); }
.field input:focus, .field select:focus, .field textarea:focus, .filter-bar input:focus,
.catalog-head input:focus, .store-search input:focus, .query-hero input:focus, .modal-form input:focus {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.form-note, .plain-note, .field small, .subtle { color: var(--muted); letter-spacing: .01em; }
.inline-error { color: var(--red); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 面板：宣纸上的纸片。默认无重阴影，靠留白分层（高级感手法 3） */
.admin-panel, .panel-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
}
.panel-head h2 { font-size: 17px; font-weight: 600; }
.panel-head p { color: var(--muted); font-size: 13px; }

/* 表格：无竖线，仅底部细线；悬停用 background 不逐行重绘阴影（性能阻塞 3） */
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line-strong);
}
.data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid #e3f2ea; }
.data-table tbody tr { transition: background-color var(--dur-2) var(--ease-2); }
.data-table tbody tr:hover { background: #eef6f1; }
.data-table tbody tr:hover td:first-child { background: #f2efe9; }
.table-scroll {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
}
/* 前台表格：浅纸表头 + 细线分隔（原版这两处是深色底，会让前台出现色块） */
.client-app .table-scroll th,
.client-app .data-table th,
.client-app .order-workbench th {
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  border-bottom: 1px solid var(--line-strong);
}
.client-app .table-scroll td,
.client-app .data-table td { border-bottom: 1px solid #dcebe3; color: var(--text); }
.client-app .data-table tbody tr:hover { background: #eef6f1; }
.client-app .data-table tbody tr:hover td:first-child { background: #f2efe9; }
.client-app .reference-order-table th,
.client-app .reference-order-table td { border-right: 1px solid #dcebe3; }
/* 会员中心/订单查询里的行表：原版把整行刷成深灰，这里恢复纸面行 */
.client-app .reference-order-table tbody tr,
.client-app .reference-order-table tbody tr:nth-child(n),
.client-app .table-scroll tbody tr,
.client-app .data-table tbody tr {
  background: var(--surface);
  color: var(--text);
}
.client-app .reference-order-table tbody tr:hover,
.client-app .table-scroll tbody tr:hover,
.client-app .data-table tbody tr:hover { background: #eef6f1; }
.client-app .reference-order-table tbody td,
.client-app .table-scroll tbody td,
.client-app .data-table tbody td { background: transparent; color: var(--text); }
.client-app .reference-order-table tbody td strong,
.client-app .table-scroll tbody td strong { color: var(--text); }
.client-app .reference-order-table .order-inline-select,
.client-app .table-scroll .order-inline-select {
  border-color: var(--line-strong);
  background-color: var(--surface);
  color: var(--text-soft);
}
.client-app .table-actions button { color: var(--brand-ink); }
.client-app .reference-order-table .amount-cell { color: var(--brand-ink); }
.client-app .execution-value, .client-app .table-scroll small { color: var(--muted); }

/* 弹窗：遮罩带模糊，卡片圆角 20 */
.modal-backdrop {
  background: rgba(27, 26, 24, .34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.modal-head h2 { font-size: 18px; font-weight: 600; }
.modal-head p { color: var(--muted); font-size: 13px; }
.modal-head .icon-btn { border-color: transparent; }
.modal-body { padding: 22px 24px 26px; }
.modal-actions { gap: 10px; padding-top: 6px; }

.notice-bar {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text-soft);
}
.toast {
  right: 24px;
  bottom: 24px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  border: 1px solid #2b313a;
  background: #1c2026;
  color: var(--ink-fg);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
  font-size: 13px;
}
.toast.error { background: #3b1113; border-color: #5a2124; color: #ffd7d9; }

.empty, .support-chat-empty { color: var(--muted); }

/* ==========================================================================
 * 前台 · 宣纸
 * ======================================================================== */

.client-app { background: var(--paper-bg); }
.client-main { min-height: calc(100vh - 112px); padding-top: 104px; }

/* 顶部：悬浮胶囊导航（脱离文档流，滚动才长描边） */
.client-header {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 40;
  width: min(1440px, calc(100% - 64px));
  height: 64px;
  transform: translateX(-50%);
  border: 1px solid transparent;
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transition: border-color var(--dur-4) var(--ease-4), background-color var(--dur-4) var(--ease-4);
}
.fx-scrolled .client-header {
  border-color: var(--paper-line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 40px -32px rgba(42, 38, 34, .5);
}
.client-head-inner {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0 12px 0 18px;
  gap: 18px;
}
.client-brand { min-width: 0; gap: 10px; color: var(--paper-ink); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.client-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(42, 38, 34, .08);
}
.client-brand span { white-space: nowrap; }

/* 导航：填充胶囊选中，彻底去掉下划线（前台版式专家：必须删除） */
.client-nav { order: 3; gap: 4px; margin-left: auto; }
.client-nav a {
  position: relative;
  min-width: 0;
  padding: 0 16px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.client-nav a::after { display: none; }
.client-nav a:hover { color: var(--brand-ink); background: #e8f4ee; }
.client-nav a.active { color: #fff; background: var(--brand-ink); }

.header-search {
  order: 2;
  flex: 1 1 auto;
  width: auto;
  max-width: 340px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef6f1;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.header-search:focus-within { border-color: var(--focus); background: #fff; }
.header-search input {
  border: 0;
  background: transparent;
  padding: 0 4px 0 18px;
  color: var(--text);
  font-size: 14px;
}
.header-search button {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 18px;
  transition: color var(--dur-2) var(--ease-2);
}
.header-search button:hover { color: var(--brand-ink); }
.client-account { order: 4; gap: 14px; }
.client-account > a:first-child { color: var(--text-soft); font-weight: 500; }
.mobile-menu { order: 5; border-color: var(--line); }

.reference-home { width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 40px; }

/* 首屏：7:5 错层，公告条压住主视觉右下角 */
.reference-top {
  height: 420px;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: stretch;
}
.reference-banner {
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--paper-section);
  background-image: none;
  box-shadow: none;
}
.reference-banner::after { opacity: .18; background-size: 20px 20px; }
.banner-brand { left: 28px; top: 26px; gap: 10px; color: rgba(255, 255, 255, .92); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.banner-brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.banner-copy {
  place-items: start;
  align-content: end;
  padding: 0 44px 46px;
  text-align: left;
}
.banner-copy > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.banner-copy h1 {
  margin: 14px 0 16px;
  max-width: 12em;
  color: #fdfcfa;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.3;
  text-shadow: none;
}
.banner-copy p {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(233, 240, 243, .78);
  font-size: 14px;
  letter-spacing: .04em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.banner-copy > div { justify-content: flex-start; gap: 10px; margin-top: 22px; }
.banner-copy b {
  min-width: 0;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(240, 245, 247, .9);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.banner-copy b:hover { transform: none; border-color: var(--accent); background: rgba(169, 137, 80, .14); }
.banner-copy b:nth-child(n) { color: rgba(240, 245, 247, .9); }
.banner-ribbon { display: none; }

/* 轮播位（装修页配置后启用） */
.banner-carousel { height: 100%; border: 0; border-radius: 24px; background: #16303f; box-shadow: var(--shadow); }
.banner-arrow { width: 36px; height: 44px; border-radius: var(--r-sm); background: rgba(16, 31, 42, .6); }
.banner-arrow:hover { background: var(--brand-ink); transform: none; }
.banner-dots button { width: 20px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .42); }
.banner-dots button.active { width: 30px; background: var(--accent); }

/* 账号区：右移下沉，形成错层 */
.reference-account {
  grid-template-rows: minmax(0, 148px) minmax(0, 1fr);
  gap: 20px;
  margin: 26px 0 0 -6px;
}
.account-member-card, .account-grid {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.account-member-card { padding: 20px 22px; gap: 16px; }
.account-member-card > img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 5px #e8f4ee;
}
.account-member-copy dt { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.account-member-copy dd { color: var(--text); font-weight: 600; }
.account-member-copy dd a { border-radius: 999px; background: var(--accent-soft); color: var(--amber); font-weight: 500; }
.account-member-copy > strong { color: var(--text); font-weight: 600; }
.account-member-copy > span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-member-actions a, .account-member-actions button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: .04em;
  transition: border-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.account-member-actions a:hover, .account-member-actions button:hover { border-color: var(--brand-ink); color: var(--brand-ink); transform: none; }
.account-member-actions a.primary { border-color: var(--brand-ink); background: var(--brand-ink); color: #fff; box-shadow: none; }
.account-member-actions a.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; filter: none; }

.account-grid { padding: 12px 14px 14px; gap: 4px; }
.account-grid a, .account-grid button {
  padding: 10px 4px;
  border-radius: var(--r-md);
  gap: 8px;
  color: var(--text-soft);
  font-size: 12px;
  letter-spacing: .04em;
  transition: background-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2);
}
.account-grid a:hover, .account-grid button:hover { background: #e8f4ee; color: var(--brand-ink); transform: none; }
.account-grid b {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #e8f4ee;
  background-image: none;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}
.account-grid a:nth-child(n) b { background-color: #e8f4ee; color: var(--text-soft); }
.account-grid a:hover b { background-color: var(--brand-soft); color: var(--brand-ink); }

/* 公告：细线纸带 + 暂停滚动 */
.reference-notice {
  position: relative;
  z-index: 2;
  width: 62%;
  min-height: 48px;
  margin: -30px 0 0 4px;
  padding: 0 20px;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(251, 250, 247, .94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reference-notice strong {
  padding-right: 16px;
  border-right: 1px solid var(--line);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}
.reference-notice .notice-marquee { color: var(--text-soft); font-size: 13px; }
.reference-notice a { color: var(--muted); font-size: 12px; letter-spacing: .04em; }

/* 推荐位 */
.reference-recommend { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-xs); }
.recommend-title { background: var(--accent-soft); color: var(--amber); }
.recommend-title h2 { font-family: var(--serif); font-weight: 600; }
.home-flash-countdown span { border-radius: var(--r-xs); background: var(--brand-ink); box-shadow: none; }
.home-flash-countdown i { color: var(--amber); }
.recommend-title a { border-radius: 999px; background: var(--brand-ink); box-shadow: none; }
.recommend-title a:hover { transform: none; background: var(--brand-dark); filter: none; }
.compact-product div strong { color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* 分区标题：金字细线，去掉品牌色粗竖条 */
.reference-category { margin-top: var(--gap-section); }
.reference-category:first-of-type { margin-top: 32px; }
.reference-category-head { height: 52px; margin-bottom: 18px; }
.reference-category-head h2 {
  position: relative;
  padding-left: 18px;
  border-left: 0;
  border-image: none;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .02em;
}
.reference-category-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  bottom: .28em;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.reference-category-head a { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.reference-category-head a:hover { color: var(--brand-ink); }

/* 商品条目：横排编辑式（图文左右），圆角 16，悬停仅上移 3px */
.reference-category-products {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 18px;
}
.reference-category-card,
.home-product-card {
  grid-column: span 2;
  min-width: 0;
  height: auto;
  min-height: 132px;
  padding: 0;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  transition: border-color var(--dur-3) var(--ease-3), transform var(--dur-3) var(--ease-3),
    background-color var(--dur-3) var(--ease-3);
}
/* 每条占 2 栏（每行 3 条），图区宽度在奇偶之间微调，形成编辑式节奏 */
.reference-category-products > :nth-child(odd) { grid-template-columns: 104px minmax(0, 1fr); }
.reference-category-products > :nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); }
.reference-category-card:hover,
.home-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--paper-line-strong);
  box-shadow: var(--shadow);
}
.reference-category-card .product-visual,
.home-product-image .product-visual {
  width: 100%;
  height: 100%;
  min-height: 118px;
  border-radius: 0;
  overflow: hidden;
}
.reference-category-card .product-visual span { font-size: 17px; font-weight: 500; letter-spacing: .1em; }
.reference-category-card .product-visual small { opacity: .7; font-size: 11px; letter-spacing: .14em; }
.reference-category-card > div:last-child {
  min-width: 0;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reference-category-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reference-category-card span { margin-top: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.reference-category-card strong + span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 瀑布卡内的价格行（结构与首页不同，统一用末尾 span 承担） */
.reference-category-card > div:last-child > span:last-child {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* 首页网格卡（若启用） */
.home-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-product-card { grid-template-columns: 1fr; grid-column: auto; }
.home-product-image { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); background: #e8f4ee; }
.home-product-body { padding: 16px 18px 18px; }
.home-product-name { min-height: 44px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 22px; }
.home-product-name:hover { color: var(--brand-ink); }
.home-product-stock { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.home-product-price { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.home-product-price strong { color: var(--brand-ink); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-product-price span { color: var(--muted); }

/* ------------------------------------------------ 分类目录页（catalog） */

.catalog-head {
  width: min(1440px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: calc(var(--gap-section) * .6) 0 30px;
  align-items: flex-end;
}
.catalog-head .eyebrow { color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.catalog-head h1 { margin: 12px 0 0; font-size: clamp(28px, 3vw, 40px); }
.catalog-head form { width: min(420px, 100%); grid-template-columns: 1fr 92px; }
.catalog-head input {
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--surface);
}
.catalog-head form button {
  border: 1px solid var(--brand-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-ink);
  color: #fff;
  font-weight: 500;
  letter-spacing: .08em;
  box-shadow: none;
}
.catalog-head form button:hover { background: var(--brand-dark); filter: none; }

.catalog-section { width: min(1440px, calc(100% - 64px)); max-width: none; margin: 0 auto; padding: 0; gap: 32px; grid-template-columns: 208px minmax(0, 1fr); }
.catalog-navigation { position: sticky; top: 108px; }
/* 分类目录导航：图标收小、文字不再被挤到换行 */
.catalog-navigation .category-rail button { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 8px 14px; }
.catalog-navigation .home-category-icon,
.catalog-navigation .home-category-icon.tone-douyin,
.catalog-navigation .home-category-icon.tone-wechat,
.catalog-navigation .home-category-icon.tone-kuaishou,
.catalog-navigation .home-category-icon.tone-xiaohongshu,
.catalog-navigation .home-category-icon.tone-tech {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 11px;
}
.catalog-navigation .category-rail b { font-size: 13px; line-height: 18px; }
.catalog-navigation .category-rail small { font-size: 11px; }
.catalog-results .product-card p { height: 44px; }
.catalog-results .product-bottom { gap: 10px; }
.category-rail { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.category-rail button { border-bottom: 1px solid #dcebe3; background: transparent; color: var(--text-soft); }
.category-rail button:last-child { border-bottom: 0; }
.category-rail button:hover { background: #eef6f1; color: var(--brand-ink); }
.category-rail button.active { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 2px 0 0 var(--accent); }
.category-rail b { font-weight: 500; letter-spacing: .02em; }
.category-rail small { color: var(--muted); }
.subcategory-rail { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 12px; }
.subcategory-rail button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 13px; }
.subcategory-rail button:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: transparent; transform: none; }
.subcategory-rail button.active { border-color: var(--brand-ink); background: var(--brand-ink); color: #fff; }

.section-head { margin-bottom: 22px; align-items: baseline; }
.section-head h2 { font-size: 20px; font-weight: 600; }
.section-head p { color: var(--muted); font-size: 13px; }
.catalog-results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  transition: border-color var(--dur-3) var(--ease-3), transform var(--dur-3) var(--ease-3);
}
.product-card:hover { transform: translateY(-3px); border-color: var(--paper-line-strong); box-shadow: var(--shadow); }
.product-visual { background-image: none; }
.product-visual.has-image { background: #e8f4ee; }
.product-visual > span { font-weight: 500; letter-spacing: .12em; }
.product-card-body { padding: 18px 20px 20px; }
.product-title { min-height: 46px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 23px; }
.product-meta { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.product-card p { color: var(--muted); font-size: 13px; line-height: 22px; }
.product-bottom { padding-top: 14px; border-top: 1px solid var(--line); }
.product-bottom strong { color: var(--brand-ink); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy-link { color: var(--brand-ink); font-weight: 500; letter-spacing: .06em; }
.buy-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.catalog-pagination { margin-top: 32px; }
.catalog-pagination button { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-soft); }
.catalog-pagination button.active { border-color: var(--brand-ink); background: var(--brand-ink); color: #fff; }

/* -------------------------------------------------- 其余前台路由 */

.store-section { width: min(1180px, calc(100% - 48px)); max-width: none; margin: calc(var(--gap-section) + 16px) auto var(--gap-section); padding: 0; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.account-head h1, .store-section > h1 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); }
.account-head p { color: var(--muted); }
.member-metrics > div, .member-metrics.compact > div {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
}
.member-metrics strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.member-metrics a { color: var(--brand-ink); }
.auth-page { width: min(1180px, calc(100% - 48px)); max-width: none; gap: 48px; margin: var(--gap-section) auto; }
.auth-intro h1 { font-size: clamp(28px, 3vw, 38px); }
.auth-intro li { color: var(--text-soft); }
.auth-forms { gap: 20px; }
.auth-forms form, .member-form {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  transition: border-color var(--dur-3) var(--ease-3);
}
.auth-forms form:hover { border-color: var(--paper-line-strong); box-shadow: var(--shadow-xs); }
.auth-forms h2 { font-size: 18px; font-weight: 600; }
.auth-forms form > .btn.primary { min-height: 48px; }
.captcha-field img { border-radius: var(--r-sm); border-color: var(--line); background: var(--surface-soft); }
.legal-consent { color: var(--muted); font-size: 12px; }
.legal-consent a { color: var(--brand-ink); }
.query-hero, .recharge-page, .help-page, .support-settings-page { --_x: 0; }
.support-setting-previews > article { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.progress { border-radius: 999px; background: #e3f2ea; overflow: hidden; }
.progress > * { background: var(--brand-ink); }

/* 页脚：墨底 + 烫金细线 */
.client-footer {
  margin-top: var(--gap-section);
  padding: 56px 0 40px;
  border-top: 1px solid var(--ink-line);
  background: var(--ink-bg);
  color: var(--ink-fg-soft);
}
.client-footer h3, .client-footer strong { color: var(--ink-fg); font-weight: 500; letter-spacing: .06em; }
.client-footer a { color: var(--ink-fg-soft); font-size: 13px; transition: color var(--dur-2) var(--ease-2); }
.client-footer a:hover { color: var(--accent); }
.client-footer > div { width: min(1440px, calc(100% - 64px)); margin: 0 auto; }

/* ---------------------------------------------------------------- 右侧悬浮工具条
 * 设计：竖向排列的圆角方形图标按钮；悬停/聚焦时左侧浮出文字气泡（读 aria-label）。
 * 未读数量用暖黄圆点角标，在线状态用右下角小圆点。
 * ------------------------------------------------------------------------------ */
.service-dock {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.service-dock-actions { display: grid; gap: 8px; overflow: visible; }

.service-dock a,
.service-dock button {
  position: relative;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(12, 42, 30, .06), 0 10px 22px -16px rgba(12, 42, 30, .45);
  transition: transform var(--dur-3) var(--ease-3), border-color var(--dur-2) var(--ease-2),
    color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2),
    box-shadow var(--dur-3) var(--ease-3);
}
.service-dock a:hover,
.service-dock button:hover,
.service-dock a:focus-visible,
.service-dock button:focus-visible {
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--paper-line));
  background: var(--surface);
  transform: translateX(-3px);
  box-shadow: 0 2px 6px rgba(12, 42, 30, .08), 0 18px 34px -18px rgba(12, 42, 30, .55);
}
.service-dock .icon { width: 20px; height: 20px; }

/* 主按钮（在线客服）：品牌实色，最醒目 */
.service-dock button.is-primary {
  border-color: transparent;
  background: var(--brand-ink);
  color: #fff;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 90%, transparent);
}
.service-dock button.is-primary:hover,
.service-dock button.is-primary:focus-visible {
  background: var(--brand-dark);
  color: #fff;
  border-color: transparent;
}
.service-dock button.is-primary .service-status {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px var(--brand-ink);
}
.service-dock button > b {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}

/* 悬停文字气泡（读取按钮上的 aria-label，无需额外 DOM） */
.service-dock a::before,
.service-dock button::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  background: rgba(12, 42, 30, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  max-width: 46vw;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition: opacity var(--dur-2) linear, transform var(--dur-2) var(--ease-3);
}
.service-dock a:hover::before,
.service-dock button:hover::before,
.service-dock a:focus-visible::before,
.service-dock button:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.service-method-icon { display: contents; }
.back-to-top, .float-tools { border-radius: 14px; }

/* 移动端 */
.mobile-home-head h1 { font-family: var(--serif); font-weight: 600; }
.mobile-bottom-nav {
  border-top: 1px solid var(--line);
  background: rgba(251, 250, 247, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mobile-bottom-nav a, .mobile-bottom-nav button { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color: var(--brand-ink); }
.mobile-bottom-nav a.active b, .mobile-bottom-nav button.active b {
  border-color: transparent;
  background: var(--brand-ink);
  color: #fff;
}
.mobile-bottom-nav b { border: 1px solid var(--line-strong); }


/* ---------------------------------------------- 分类树 / 平台图标去色处理 */
/* 原版把平台各自品牌色刷在分类树上，是廉价感的主要来源；统一收成纸墨灰阶 */
.home-category-sidebar { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.home-category-all {
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  background-image: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
}
.home-category-all:hover, .home-category-all.active { background: #eef6f1; background-image: none; color: var(--brand-ink); }
.home-category-all b { background: #e3f2ea; color: var(--text-soft); border-radius: 999px; font-weight: 500; }
.home-category-all.active b, .home-category-all:hover b { background: var(--brand-soft); color: var(--brand-ink); }
.home-category-group + .home-category-group { border-top: 1px solid #dcebe3; }
.home-category-root { min-height: 42px; color: var(--text-soft); background: transparent; font-weight: 500; }
.home-category-root:hover, .home-category-root.active { color: var(--brand-ink); background: #eef6f1; }
.home-category-root.active { box-shadow: inset 2px 0 0 var(--accent); }
.home-category-root small { color: var(--muted); }
.home-category-root i { color: var(--muted); }
.home-category-icon,
.home-category-icon.tone-douyin,
.home-category-icon.tone-wechat,
.home-category-icon.tone-kuaishou,
.home-category-icon.tone-xiaohongshu,
.home-category-icon.tone-tech {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e8f4ee;
  background-image: none;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px var(--line);
}
.home-category-root:hover .home-category-icon,
.home-category-root.active .home-category-icon { background: var(--brand-soft); color: var(--brand-ink); }
.home-category-children { background: #f4faf7; }
.home-category-children button:hover, .home-category-children button.active { color: var(--brand-ink); background: #fff; box-shadow: inset 2px 0 0 #e2ddd3; }
.home-category-child-group + .home-category-child-group { border-top: 1px solid #dcebe3; }
.reference-category-head a span, .home-catalog-results > header a:hover { color: var(--muted); }
.home-catalog-results > header h2 { color: var(--text); }
.home-catalog-results > header span, .home-catalog-results > header a { color: var(--muted); }
.platform-name, .platform-video, .platform-douyin { color: var(--text-soft); font-weight: 500; }
/* 商品图区色块：降低饱和度并叠加纸感光晕，避免廉价纯色块 */
.product-visual.tone-0, .product-visual.tone-1, .product-visual.tone-2,
.product-visual.tone-3, .product-visual.tone-4 {
}
.product-visual.tone-0 { background-color: #3f5d68; }
.product-visual.tone-1 { background-color: #46645a; }
.product-visual.tone-2 { background-color: #8a6a3c; }
.product-visual.tone-3 { background-color: #4f5566; }
.product-visual.tone-4 { background-color: #7a4a45; }

/* ------------------------------------------------ 后台工作台（深色看板） */
.admin-shell .clone-workbench { min-height: 0; color: var(--ink-fg); }
.admin-shell .clone-workbench-dark {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.admin-shell .clone-periods {
  width: max-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
}
.admin-shell .clone-periods button {
  min-width: 62px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-fg-soft);
  font-size: 13px;
  letter-spacing: .04em;
}
.admin-shell .clone-periods button + button { border-left: 0; }
.admin-shell .clone-periods button:hover { color: var(--ink-fg); background: rgba(255, 255, 255, .06); }
.admin-shell .clone-periods button.active { background: var(--ink-brand); color: #0f1216; font-weight: 600; }
.admin-shell .clone-analytics-head { align-items: flex-end; margin-bottom: 20px; }
.admin-shell .clone-analytics-head > div > span { color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.admin-shell .clone-analytics-head h2 { color: var(--ink-fg); font-size: 22px; font-weight: 600; }
.admin-shell .clone-analytics-head p { color: var(--ink-fg-muted); font-size: 12px; }
.admin-shell .clone-analytics-head > strong {
  color: var(--ink-fg);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.admin-shell .clone-analytics-summary { gap: 1px; padding: 1px; border: 1px solid var(--ink-line); border-radius: var(--r-lg); background: var(--ink-line); overflow: hidden; }
.admin-shell .clone-analytics-summary article {
  min-height: 96px;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: var(--ink-surface);
  box-shadow: none;
}
.admin-shell .clone-analytics-summary span { color: var(--ink-fg-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.admin-shell .clone-analytics-summary strong { color: var(--ink-fg); font-family: var(--mono); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-shell .clone-analytics-summary small { color: var(--ink-fg-muted); font-size: 11px; }
.admin-shell .clone-analytics-grid { gap: 16px; }
.admin-shell .clone-analytics-panel {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  box-shadow: none;
}
.admin-shell .clone-analytics-panel-head h3 { color: var(--ink-fg); font-size: 15px; font-weight: 600; }
.admin-shell .clone-analytics-panel-head p { color: var(--ink-fg-muted); }
.admin-shell .clone-analytics-panel-head > span { color: var(--ink-brand); font-family: var(--mono); font-weight: 600; }
.admin-shell .clone-chart-grid { stroke: rgba(255, 255, 255, .08); }
.admin-shell .clone-chart-axis { fill: var(--ink-fg-muted); }
.admin-shell .clone-chart-area { fill: rgba(107, 143, 163, .16); }
.admin-shell .clone-chart-line { stroke: var(--ink-brand); stroke-width: 2; }
.admin-shell .clone-chart-dot { fill: var(--ink-surface); stroke: var(--ink-brand); stroke-width: 2; }
.admin-shell .clone-chart-bar { fill: rgba(169, 137, 80, .4); }
.admin-shell .clone-status-donut {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  filter: saturate(.5) brightness(.92);
}
.admin-shell .clone-status-legend i { filter: saturate(.5) brightness(.95); }
.admin-shell .clone-analytics-ranking i span { filter: none; }
.admin-shell .clone-status-donut > div { background: var(--ink-surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); }
.admin-shell .clone-status-donut strong { color: var(--ink-fg); font-family: var(--mono); }
.admin-shell .clone-status-donut span { color: var(--ink-fg-muted); }
.admin-shell .clone-status-legend span { color: var(--ink-fg-soft); }
.admin-shell .clone-status-legend b { color: var(--ink-fg); font-variant-numeric: tabular-nums; }
.admin-shell .clone-analytics-muted, .admin-shell .clone-analytics-empty { color: var(--ink-fg-muted) !important; }
.admin-shell .clone-analytics-empty strong { color: var(--ink-fg-soft); }
.admin-shell .clone-analytics-ranking li > b { border: 1px solid var(--ink-line-strong); color: var(--ink-fg-soft); background: transparent; border-radius: 999px; }
.admin-shell .clone-analytics-ranking li > b.top-1 { color: var(--amber); border-color: var(--accent); background: rgba(169, 137, 80, .16); }
.admin-shell .clone-analytics-ranking li > b.top-2 { color: var(--ink-fg-soft); border-color: var(--ink-line-strong); background: rgba(255, 255, 255, .06); }
.admin-shell .clone-analytics-ranking li > b.top-3 { color: var(--amber); border-color: rgba(216, 180, 140, .4); background: rgba(216, 180, 140, .12); }
.admin-shell .clone-analytics-ranking em { color: var(--ink-fg); }
.admin-shell .clone-analytics-ranking strong { color: var(--ink-fg-muted); font-variant-numeric: tabular-nums; }
.admin-shell .clone-analytics-ranking i { background: rgba(255, 255, 255, .07); border-radius: 999px; }
.admin-shell .clone-analytics-ranking i span { background: var(--ink-brand); border-radius: 999px; }
.admin-shell .clone-settings, .admin-shell .clone-form-page, .admin-shell .clone-product-editor, .admin-shell .clone-data-clean {
  border: 1px solid var(--ink-line);
  background: var(--ink-surface);
}
.admin-shell .clone-list-page { color: var(--ink-fg); }
.admin-shell .clone-control-area { color: var(--ink-fg); }
.admin-shell .analytics-hero, .admin-shell .dashboard-hero { border-color: var(--ink-line); background: var(--ink-surface); color: var(--ink-fg); }
.admin-shell .analytics-head > div:first-child > span { color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.admin-shell .analytics-head h2 { color: var(--ink-fg); }
.admin-shell .analytics-head p { color: var(--ink-fg-muted); }
.admin-shell .analytics-range { border: 1px solid var(--ink-line); border-radius: 999px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.admin-shell .analytics-range button { min-width: 68px; height: 34px; border: 0; border-right: 0; color: var(--ink-fg-soft); background: transparent; font-size: 13px; }
.admin-shell .analytics-range button:hover { color: var(--ink-fg); background: rgba(255, 255, 255, .07); }
.admin-shell .analytics-range button.active { color: #0f1216; background: var(--ink-brand); font-weight: 600; }
.admin-shell .analytics-panel, .admin-shell .analytics-panel.analytics-trend {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  box-shadow: none;
  color: var(--ink-fg);
}
.admin-shell .analytics-panel-head { color: var(--ink-fg); }
.admin-shell .analytics-panel-head h3 { color: var(--ink-fg); }
.admin-shell .analytics-panel-head p { color: var(--ink-fg-muted); }
.admin-shell .monitoring-summary > div { border: 1px solid var(--ink-line); border-radius: var(--r-lg); background: var(--ink-surface); color: var(--ink-fg); }
.admin-shell .monitoring-summary span { color: var(--ink-fg-muted); }
.admin-shell .monitoring-summary strong { color: var(--ink-fg); font-family: var(--mono); }
.admin-shell .support-admin-panel, .admin-shell .staff-payment-panel, .admin-shell .stop-ratio-panel,
.admin-shell .tracker-onboarding, .admin-shell .order-workbench, .admin-shell .support-settings-page {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  color: var(--ink-fg);
}
.admin-shell .tracker-onboarding li { border: 1px solid var(--ink-line); background: rgba(255, 255, 255, .02); }
.admin-shell .tracker-onboarding b { background: var(--ink-brand); color: #0f1216; }
.admin-shell .section-head h2, .admin-shell .store-section h2 { color: var(--ink-fg); }
.admin-shell .plain-note, .admin-shell .form-note { color: var(--ink-fg-muted); }
.admin-shell .clone-plain-form label > span, .admin-shell .clone-settings-form label > span { color: var(--ink-fg-soft); }
.admin-shell .support-conversation-list, .admin-shell .support-thread-messages, .admin-shell .support-chat-messages { border-color: var(--ink-line); background: var(--ink-surface); }

/* ==========================================================================
 * 运营后台 · 墨玉石墨
 * ======================================================================== */

.admin-shell {
  grid-template-columns: 104px minmax(0, 1fr);
  background: var(--ink-bg);
  background-image: none;
  color: var(--ink-fg);
  --text: var(--ink-fg);
  --text-soft: var(--ink-fg-soft);
  --muted: var(--ink-fg-muted);
  --line: var(--ink-line);
  --line-strong: var(--ink-line-strong);
  --surface: var(--ink-surface);
  --surface-soft: var(--ink-raised);
  --surface-2: #171b21;
  --brand-ink: var(--ink-brand);
  --brand-soft: var(--brand-soft);
  --focus: #5fa8c4;
  --ring: 0 0 0 2px var(--ink-bg), 0 0 0 4px var(--focus);
  --shadow-xs: 0 1px 2px rgba(16, 32, 58, .08);
  --shadow-sm: 0 2px 8px -2px rgba(16, 32, 58, .08);
  --shadow: 0 18px 40px -24px rgba(16, 32, 58, .1);
  --shadow-lg: 0 40px 90px -40px rgba(16, 32, 58, .12);
}

/* 侧栏：图标轨道 */
.admin-sidebar {
  width: 104px;
  background: #f3f7fc;
  padding-bottom: 16px;
  border-right: 1px solid var(--ink-line);
  background: #f3f7fc;
  background-image: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { display: none; }
.admin-brand {
  height: 72px;
  padding: 0;
  justify-content: center;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
}
.admin-brand > div { display: none; }
.admin-brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(31, 95, 208, .14); }
.admin-sidebar nav { padding: 14px 10px 20px; display: grid; gap: 4px; }
.admin-nav-group { margin: 0; }
.admin-nav-group + .admin-nav-group { border-top: 1px solid rgba(31, 95, 208, .06); padding-top: 6px; margin-top: 2px; }
.admin-nav-parent {
  position: relative;
  min-height: 62px;
  padding: 9px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2);
}
.admin-nav-parent > span {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(31, 95, 208, .06);
  color: var(--ink-fg-soft);
  font-size: 12px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(31, 95, 208, .06);
  transition: background-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2);
}
.admin-nav-parent i { display: none; }
.admin-nav-parent:hover { color: var(--ink-fg); background: rgba(31, 95, 208, .06); transform: none; }
.admin-nav-parent:hover > span { background: rgba(31, 95, 208, .1); color: var(--ink-brand); }
.admin-nav-parent.active { color: var(--ink-fg); background: var(--brand-soft); }
.admin-nav-parent.active > span { background: var(--ink-brand); color: #ffffff; }
.admin-nav-parent.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 22px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  transform: translateY(-50%);
}
.admin-nav-children { display: none; }
.admin-nav-group.open .admin-nav-children {
  display: grid;
  gap: 2px;
  margin: 4px 0 8px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: rgba(31, 95, 208, .06);
}
.admin-nav-children a {
  min-height: 30px;
  padding: 5px 7px;
  border-radius: var(--r-xs);
  color: var(--ink-fg-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2);
}
.admin-nav-children a:hover { color: var(--ink-fg); background: rgba(31, 95, 208, .09); padding-left: 7px; }
.admin-nav-children a.active { color: #ffffff; background: var(--ink-brand); box-shadow: none; }
.admin-nav-unread {
  position: absolute;
  top: 6px;
  right: 12px;
  min-width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  font-size: 0;
  box-shadow: 0 0 0 3px rgba(20, 22, 26, .9);
}
.sidebar-foot {
  padding: 14px 10px 0;
  gap: 10px;
  border-top: 1px solid var(--ink-line);
  text-align: center;
}
.sidebar-foot > a { color: var(--ink-fg-muted); font-size: 11px; line-height: 1.4; }
.sidebar-foot > a:hover { color: var(--ink-fg); }
.sidebar-foot > a.runtime-badge {
  min-height: 34px;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: .04em;
}
.sidebar-foot > a.runtime-badge i { display: none; }
.sidebar-foot > a.runtime-badge.success { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); }
.sidebar-foot > a.runtime-badge.warning { color: var(--amber); border-color: var(--amber-soft); background: var(--amber-soft); }
.sidebar-foot > a.runtime-badge.danger { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }

/* 顶栏：悬浮命令条 */
.admin-main { min-width: 0; background: transparent; }
.admin-content > * { min-width: 0; }
.admin-content .admin-panel, .admin-content .clone-list-page, .admin-content .clone-control-area { min-width: 0; }
.table-scroll, .clone-table-scroll { width: 100%; max-width: 100%; }
.admin-top {
  top: 16px;
  height: 60px;
  margin: 16px 0 0;
  width: auto;
  inset-inline: 24px;
  padding: 0 10px 0 18px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 0 rgba(31, 95, 208, .08);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  color: var(--ink-fg);
}
.admin-top h1 { font-size: 18px; }
.admin-breadcrumb { gap: 10px; color: var(--ink-fg-soft); font-size: 12px; letter-spacing: .04em; }
.admin-breadcrumb span, .admin-breadcrumb b {
  padding: 4px 10px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(31, 95, 208, .05);
  color: var(--ink-fg-soft);
  font-weight: 400;
}
.admin-breadcrumb b { color: var(--ink-fg); border-color: var(--ink-brand); }
.admin-breadcrumb i { color: var(--ink-fg-muted); }
.admin-top-actions { gap: 6px; }
.admin-top-recharge {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(169, 137, 80, .42);
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 500;
}
.admin-top-recharge:hover { border-color: var(--accent); background: var(--amber-soft); color: var(--amber); }
.admin-top-recharge b { border-radius: 50%; background: var(--accent); color: #17140e; font-weight: 600; }
.top-icon-button, .top-text-button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-fg-soft);
  font-size: 15px;
}
.top-text-button { width: auto; padding: 0 14px; border-radius: 999px; }
.top-icon-button:hover { background: rgba(31, 95, 208, .1); color: var(--ink-fg); }
.top-text-button:hover { background: var(--red-soft); color: var(--red); }
.sidebar-toggle { border-color: var(--ink-line); background: transparent; color: var(--ink-fg-soft); }
.sidebar-toggle:hover { color: var(--ink-fg); border-color: var(--ink-line-strong); transform: none; }

.admin-content { max-width: 1680px; padding: 24px 24px 56px; overflow-x: clip; }
.table-scroll, .clone-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* 数据带：指标卡改为玻璃条，数字等宽放大 */
.metric-grid { gap: 1px; padding: 1px; border: 1px solid var(--ink-line); border-radius: var(--r-lg); background: var(--ink-line); overflow: hidden; }
.metric-card {
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: var(--ink-surface);
  box-shadow: none;
  transition: background-color var(--dur-2) var(--ease-2);
}
.metric-card::before { display: none; }
.metric-card:hover { background: var(--ink-raised); transform: none; box-shadow: none; }
.metric-card span { display: block; color: var(--ink-fg-muted); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.metric-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--ink-fg);
  font-family: var(--mono);
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.metric-card small { color: var(--ink-fg-muted); font-size: 11px; letter-spacing: .04em; }
.metric-card-link:hover strong { color: var(--ink-brand); }

/* 面板与图表 */
.admin-panel {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  box-shadow: none;
}
.admin-panel > .notice-bar {
  border: 1px solid rgba(169, 137, 80, .3);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
}
.panel-head h2 { color: var(--ink-fg); }
.panel-head p { color: var(--ink-fg-muted); }
.clone-analytics-panel, .clone-trend-panel, .analytics-panel, .clone-settings, .clone-form-page, .clone-workbench {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  background: var(--ink-surface);
  box-shadow: none;
  color: var(--ink-fg);
}
.clone-analytics-panel h2, .clone-trend-panel h2, .analytics-panel h2 { color: var(--ink-fg); font-weight: 600; }
.clone-chart-axis, .clone-status-legend, .clone-status-body { color: var(--ink-fg-muted); }
.clone-chart-area { fill: var(--brand-soft); }
.clone-chart-dot { fill: var(--ink-surface); stroke: var(--ink-brand); }
.clone-status-donut { color: var(--ink-fg-soft); }

/* 筛选与批量操作 */
.clone-filters { gap: 12px 10px; }
.clone-filters input, .clone-filters select,
.reference-order-filters input, .reference-order-filters select,
.order-inline-select {
  height: 38px;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--r-sm);
  background: var(--ink-raised);
  color: var(--ink-fg);
  font-size: 13px;
}
.clone-filters input::placeholder { color: var(--ink-fg-muted); }
.clone-filters input:focus, .clone-filters select:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: none; }
.clone-toolbar { gap: 8px; }
.clone-button {
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--ink-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-fg-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: none;
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2),
    color var(--dur-2) var(--ease-2), transform var(--dur-1) var(--ease-1);
}
.clone-button:hover { border-color: var(--ink-brand); color: var(--ink-fg); background: var(--brand-soft); box-shadow: none; }
.clone-button:active { transform: translateY(1px); }
.clone-button.primary { border-color: var(--ink-brand); background: var(--ink-brand); color: #ffffff; font-weight: 600; }
.clone-button.primary:hover { background: var(--ink-brand-deep); border-color: var(--ink-brand-deep); color: #ffffff; filter: none; }
.clone-button.danger { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.clone-toolbar .clone-button:not(.primary) { border-color: var(--ink-line-strong); background: transparent; color: var(--ink-fg-soft); }
.clone-toolbar .clone-button:not(.primary):hover { border-color: var(--ink-brand); background: var(--brand-soft); }
.clone-toolbar .clone-button.active,
.clone-toolbar .clone-button.selection-ready,
.reference-batch-actions button.selection-ready,
.reference-batch-actions button[data-requires-selection].selection-ready {
  border-color: var(--accent);
  background: var(--amber-soft);
  color: var(--amber);
  box-shadow: none;
}
.reference-batch-actions button, .control-batch-actions button, .tracker-batch-actions button {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--ink-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-fg-soft);
  font-size: 13px;
  font-weight: 500;
}
.reference-batch-actions button:hover { border-color: var(--ink-brand); background: var(--brand-soft); color: var(--ink-fg); transform: none; }
.reference-batch-actions button:first-child { border-color: var(--ink-line-strong); background: transparent; color: var(--ink-fg-soft); }
.filter-search { border: 1px solid var(--ink-brand); border-radius: 999px; background: var(--ink-brand); color: #ffffff; font-weight: 600; }
.filter-reset { border: 1px solid var(--ink-line-strong); border-radius: 999px; background: transparent; color: var(--ink-fg-soft); }

/* 表格：无竖线、无底色表头、行高 36 */
.table-scroll, .clone-table-scroll {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  background: var(--ink-surface);
  box-shadow: none;
}
.clone-table { color: var(--ink-fg); }
.clone-table th {
  height: 36px;
  background: transparent;
  color: var(--ink-fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(31, 95, 208, .12);
}
.clone-table td { height: 40px; border-bottom: 1px solid rgba(31, 95, 208, .06); }
.clone-table tbody tr { transition: background-color var(--dur-2) var(--ease-2); }
.clone-table tbody tr:hover { background: rgba(31, 95, 208, .04); }
.clone-table tbody tr:hover td:first-child { background: var(--amber-soft); }
.data-table { color: var(--ink-fg); }
.data-table th {
  background: transparent;
  color: var(--ink-fg-muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(31, 95, 208, .12);
}
.data-table th, .data-table td { border-bottom-color: rgba(31, 95, 208, .06); }
.data-table tbody tr:hover { background: rgba(31, 95, 208, .04); }
.data-table tbody tr:hover td:first-child { background: var(--amber-soft); }
.data-table td > small { color: var(--ink-fg-muted); }
.reference-order-table th { background: transparent; color: var(--ink-fg-muted); }
.reference-order-table th, .reference-order-table td { border-right: 1px solid rgba(31, 95, 208, .05); }
.reference-order-table tbody tr:hover { background: rgba(31, 95, 208, .04); }
.reference-order-table .amount-cell { color: var(--amber); font-weight: 600; }
.order-remark-edit, .order-param-summary, .order-target-link, .order-assignee-edit, .order-param-summary span { color: var(--ink-brand); }
.order-authorization-stack { border-color: var(--ink-line-strong); background: var(--ink-raised); }
.data-monitor-auth { background: var(--green-soft); border-bottom-color: var(--ink-line); color: var(--green); }
.order-authorization-subject b { color: var(--ink-fg); }
.table-actions button { color: var(--ink-brand); font-weight: 500; }
.table-actions .refund-action { color: var(--red); }
.danger-text { color: var(--red) !important; }
.text-btn { color: var(--ink-brand); }
.clone-pagination button, .clone-pagination select, .clone-pagination input {
  height: 32px;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-fg-soft);
}
.clone-pagination button.active, .clone-periods button.active {
  border-color: var(--ink-brand);
  background: var(--ink-brand);
  color: #ffffff;
}
.clone-periods button { border: 1px solid var(--ink-line-strong); border-radius: 999px; background: transparent; color: var(--ink-fg-soft); }
.clone-tabs { border-bottom-color: var(--ink-line); }
.clone-tabs button { background: transparent; color: var(--ink-fg-muted); border-bottom-color: transparent; }
.clone-tabs button.active { color: var(--ink-fg); border-bottom-color: var(--accent); }
.clone-image-cell { border-radius: var(--r-xs); background: var(--brand-soft); color: var(--ink-brand); }
.clone-segment { border-bottom-color: var(--ink-line); }
.clone-segment button { border: 1px solid var(--ink-line-strong); background: transparent; color: var(--ink-fg-soft); }
.clone-segment button.active { border-color: var(--ink-brand); background: var(--ink-brand); color: #ffffff; }
.settings-subsection { border: 1px solid var(--ink-line); border-radius: var(--r-md); background: rgba(31, 95, 208, .03); }
.settings-subsection h3 { color: var(--ink-fg); }
.adgroup-import-list { border-color: var(--ink-line); background: var(--ink-bg); }
.adgroup-import-option { background: var(--ink-surface); border-bottom-color: var(--ink-line); }
.adgroup-import-option:hover { background: var(--ink-raised); }
.order-parameter-modal table { border-color: var(--ink-line); }
.order-parameter-modal th { background: var(--ink-raised); color: var(--ink-fg-soft); }
.order-parameter-modal td { color: var(--ink-fg); border-bottom-color: var(--ink-line); }

/* 后台表单与弹窗 */
.admin-shell .field label { color: var(--ink-fg-soft); }
.admin-shell .field input, .admin-shell .field select, .admin-shell .field textarea,
.admin-shell .clone-settings-form input, .admin-shell .clone-settings-form select, .admin-shell .clone-settings-form textarea,
.admin-shell .clone-plain-form input, .admin-shell .clone-plain-form select, .admin-shell .clone-plain-form textarea {
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--r-sm);
  background: var(--ink-raised);
  color: var(--ink-fg);
}
.admin-shell .field input::placeholder, .admin-shell textarea::placeholder { color: var(--ink-fg-muted); }
.admin-shell .field input:focus, .admin-shell .field select:focus, .admin-shell .field textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.admin-shell .clone-settings-form label > span, .admin-shell .clone-plain-form label > span { color: var(--ink-fg-soft); }
.admin-shell .modal-backdrop { background: rgba(16, 32, 58, .34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.admin-shell .modal-card { border: 1px solid var(--ink-line); background: var(--ink-surface); color: var(--ink-fg); }
.admin-shell .modal-head { border-bottom-color: var(--ink-line); background: var(--ink-surface); }
.admin-shell .modal-head h2 { color: var(--ink-fg); }
.admin-shell .modal-head p { color: var(--ink-fg-muted); }
.admin-shell .modal-head .icon-btn { color: var(--ink-fg-soft); border-color: transparent; }
.admin-shell .destructive-warning { color: var(--red); }
.admin-shell .toast { border-color: var(--ink-line-strong); background: var(--ink-raised); color: var(--ink-fg); }
.admin-shell .empty { color: var(--ink-fg-muted); }
.admin-shell .loading-page { color: var(--ink-fg-muted); }
.admin-shell .admin-top h1, .admin-shell .admin-top p { color: var(--ink-fg); }
.admin-shell .admin-top p { color: var(--ink-fg-muted); }

/* 登录页：墨底 + 烫金细线 */
.admin-login-page {
  background: var(--ink-bg);
  background-image: none;
}
.admin-login-panel {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 40px 90px -44px rgba(255, 255, 255, .97);
  color: var(--ink-fg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.admin-login-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent);
}
.admin-login-brand strong { color: var(--ink-fg); letter-spacing: .08em; }
.admin-login-brand span, .admin-login-back { color: var(--ink-fg-muted); }
.admin-login-heading span { color: var(--accent); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.admin-login-heading h1 { font-family: var(--serif); font-weight: 600; color: var(--ink-fg); }
.admin-login-panel .field label { color: var(--ink-fg-soft); }
.admin-login-panel .field input { border: 1px solid var(--ink-line-strong); background: rgba(31, 95, 208, .05); color: var(--ink-fg); }
.admin-login-panel .field input:focus { border-color: var(--focus); outline-color: var(--focus); }
.admin-login-panel .btn.primary { border-color: var(--ink-brand); background: var(--ink-brand); color: #ffffff; font-weight: 600; }
.admin-login-panel .btn.primary:hover { background: var(--ink-brand-deep); border-color: var(--ink-brand-deep); color: #ffffff; }
.admin-login-error { color: var(--red); }



/* ==========================================================================
 * 青潮 · 清新绿白：细节收口
 *   · 首页轮播/主视觉改为浅绿分区，logo 不再被拉满整屏
 *   · 分区浅绿只作模块底，全屏留白优先（专家：白比绿多才清新）
 *   · 去除买家端残留渐变，价格与主 CTA 统一用主绿
 * ======================================================================== */

/* 首页主视觉：浅绿纸面 + 品牌标识居中克制落位 */
.banner-carousel {
  background: var(--paper-section);
  border: 1px solid var(--paper-line);
  box-shadow: none;
}
.banner-slides > a { background: var(--paper-section); }
.banner-slides > a img {
  width: auto;
  height: auto;
  max-width: 46%;
  max-height: 58%;
  object-fit: contain;
  background: transparent;
  margin: auto;
  filter: none;
}
.banner-slides > a { display: flex; align-items: center; justify-content: center; }
.banner-slides > a span {
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(20, 35, 29, .82);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
}
.banner-arrow { background: rgba(20, 35, 29, .55); border-radius: var(--r-sm); }
.banner-arrow:hover { background: var(--brand); }
.banner-dots button { background: rgba(20, 35, 29, .22); }
.banner-dots button.active { background: var(--brand); }
.banner-brand { color: var(--paper-ink); text-shadow: none; }
.banner-brand img { box-shadow: 0 0 0 1px var(--paper-line); }

/* 兜底主视觉（未配置轮播时）：浅绿底 + 深墨字，去掉深色块 */
.reference-banner {
  background: var(--paper-section);
  background-image: none;
  border: 1px solid var(--paper-line);
  box-shadow: none;
}
.reference-banner::after { display: none; }
.banner-copy > span { color: var(--brand); letter-spacing: .24em; }
.banner-copy h1 { color: var(--paper-ink); text-shadow: none; }
.banner-copy p { color: var(--text-soft); }
.banner-copy b {
  border-color: var(--paper-line-strong);
  background: var(--surface);
  color: var(--brand-ink);
  font-weight: 500;
}
.banner-copy b:nth-child(n) { color: var(--brand-ink); }
.banner-copy b:hover { border-color: var(--brand); background: var(--brand-soft); }

/* 分区底色：浅绿模块带，用于"我的"分组与商品分区标题行 */
.reference-category-head { border-bottom: 1px solid var(--paper-line); padding-bottom: 10px; }
.home-catalog-results > header {
  border-radius: var(--r-md);
  background: var(--paper-section);
  padding: 0 14px;
}
.store-section > .section-head { border-bottom: 1px solid var(--paper-line); padding-bottom: 12px; }

/* 登录/注册：浅绿面 + 主绿按钮 */
.auth-intro .eyebrow, .eyebrow { color: var(--brand); }
.auth-forms form:hover { border-color: var(--brand); }
.captcha-field img { border-color: var(--paper-line-strong); }

/* 页脚：深墨绿底（唯一允许大面积深色的地方） */
.client-footer {
  background: var(--footer-bg);
  border-top: 0;
  color: #cfe6da;
}
.client-footer h3, .client-footer strong { color: #ffffff; }
.client-footer a { color: #a9d8c2; }
.client-footer a:hover { color: #ffffff; }

/* 买家端最后的渐变清理：全部改为纯色 */
.product-visual.tone-0, .product-visual.tone-1, .product-visual.tone-2,
.product-visual.tone-3, .product-visual.tone-4 { background-image: none; }
.product-visual.tone-0 { background-color: #cfe6da; color: #0b6b48; }
.product-visual.tone-1 { background-color: #d8eee3; color: #0b6b48; }
.product-visual.tone-2 { background-color: #fdf3df; color: #7a4e08; }
.product-visual.tone-3 { background-color: #e3f0e8; color: #0b6b48; }
.product-visual.tone-4 { background-color: #eef4f0; color: #4a5f55; }
.product-visual > span { color: inherit; font-size: 22px; font-weight: 500; letter-spacing: .06em; }
.product-visual-mark > span { font-family: var(--serif); }
.product-visual-mark > small { font-size: 10px; letter-spacing: .1em; opacity: .8; }
.recommend-title { background: var(--accent-soft); color: var(--amber); }

/* ==========================================================================
 * 买家端专项优化
 *   1) 商品详情：价格块/步进器/规格表全部换宣纸语言（原版是红橙促销风）
 *   2) 移动端下单：图片下沉、标题与价格优先、下单区吸底
 *   3) 空状态、搜索、信任信息与留白收敛
 * ======================================================================== */

/* ------------------------------------------------ 1) 商品详情 · 桌面 */
.product-detail {
  width: min(1320px, calc(100% - 64px));
  max-width: none;
  margin: calc(var(--gap-section) + 16px) auto 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}
.detail-media { position: sticky; top: 128px; }
.detail-media .product-visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.detail-media .product-visual.has-image { background: var(--surface); }
.detail-badges span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12px;
  letter-spacing: .04em;
}
.detail-main { min-width: 0; padding-top: 4px; }
.breadcrumbs { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.breadcrumbs a { color: var(--text-soft); }
.breadcrumbs a:hover { color: var(--brand-ink); }
.breadcrumbs b { color: var(--text-soft); font-weight: 500; }
.detail-main h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.32;
  margin: 12px 0 10px;
}
.detail-description { color: var(--text-soft); font-size: 15px; line-height: 1.75; max-width: var(--measure); }

/* 价格块：从"浅红促销条"改为纸面价格卡 */
.detail-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
}
.detail-price small { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.detail-price strong {
  color: var(--paper-ink);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.detail-price strong::first-letter { font-size: .62em; }
.detail-price span { color: var(--muted); font-size: 13px; text-decoration: line-through; }

/* 规格表：细线 + 交替纸纹，去掉直角盒子 */
.product-spec {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
}
.product-spec div { padding: 11px 14px; border-bottom: 1px solid #dcebe3; grid-template-columns: 88px 1fr; }
.product-spec div:nth-child(odd) { background: var(--surface-soft); }
.product-spec div:nth-last-child(-n+2) { border-bottom: 0; }
.product-spec dt { color: var(--muted); font-size: 13px; }
.product-spec dd { color: var(--text); font-weight: 500; }

/* 购买区 */
.purchase-form {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  gap: 16px;
}
.purchase-form .field label { color: var(--text-soft); }
.purchase-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.purchase-total > span { flex: 1 1 240px; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.purchase-total b, .purchase-total [data-order-total] { color: var(--brand-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.purchase-actions { display: flex; gap: 10px; margin-left: auto; }
.purchase-login {
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  text-align: center;
}
.purchase-login p { color: var(--text-soft); }
.purchase-login.unavailable { border-style: solid; border-color: var(--line); }

/* 数量步进器：纸面圆角控件，去掉红色悬停 */
.package-quantity-control {
  width: min(100%, 460px);
  grid-template-columns: 46px minmax(80px, 1fr) 46px auto;
  gap: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--line);
}
.package-quantity-control button {
  height: 46px;
  border: 0;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 20px;
  transition: background-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2);
}
.package-quantity-control button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.package-quantity-control button:first-child,
.package-quantity-control button:nth-of-type(2) { border-radius: 0; }
.package-quantity-control input {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.package-quantity-control input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.package-quantity-control span {
  min-width: 132px;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--brand-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.package-quantity-field small b { color: var(--brand-ink); }

/* 服务说明区：收敛留白 */
.store-section.detail-info { margin-top: 56px; }
.detail-copy { max-width: var(--measure); color: var(--text-soft); font-size: 15px; line-height: 1.8; }
.detail-copy p { margin-bottom: 14px; }
.detail-info .section-head { margin-bottom: 16px; }
.product-detail-gallery { gap: 16px; margin-top: 24px; }
.product-detail-gallery img { border-radius: var(--r-md); border: 1px solid var(--line); }
.product-auth-entry, .product-auth-content { border-radius: var(--r-lg); }

/* 空状态：纸面居中，给下一步动作留位置 */
.empty {
  padding: 56px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
  line-height: 1.9;
}
.empty .btn { margin-top: 14px; }
.query-results .empty, .my-orders-page .empty { margin-top: 8px; }

/* 订单自助查询：把标题、说明与输入框收成一张卡 */
.query-hero {
  width: min(1180px, calc(100% - 48px));
  max-width: none;
  margin: calc(var(--gap-section) + 16px) auto 0;
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.query-hero h1 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); }
.query-hero p { color: var(--text-soft); }
.query-hero form { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; margin-top: 20px; }
.query-hero input { min-height: 48px; border-radius: var(--r-sm); border-color: var(--line-strong); }
.query-hero form button {
  border: 1px solid var(--brand-ink);
  border-radius: var(--r-sm);
  background: var(--brand-ink);
  color: #fff;
  font-weight: 500;
  letter-spacing: .08em;
}
.query-hero form button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }


/* ------------------------------------------ 3) 商品列表卡：转化细节打磨 */
/* 价格用衬线大字，立即购买升级为实心按钮（移动端也要有足够点击面积） */
.catalog-results .product-bottom { align-items: center; }
.catalog-results .product-bottom strong { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.catalog-results .product-bottom strong::first-letter { font-size: .62em; }
.buy-link {
  min-height: 38px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-ink);
  border-radius: 999px;
  background: var(--brand-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  transition: background-color var(--dur-2) var(--ease-2), border-color var(--dur-2) var(--ease-2);
}
.buy-link:hover { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; text-decoration: none; }
/* 卡片主标题与缩略图之间增加"平台 · 状态"的呼吸感 */
.catalog-results .product-meta { margin-bottom: 4px; }
.catalog-results .product-card-body { display: flex; flex-direction: column; }
.catalog-results .product-card p { margin-bottom: auto; }
.section-head .text-btn { color: var(--muted); font-size: 13px; }
.section-head .text-btn:hover { color: var(--brand-ink); }

/* 首页快捷入口（移动端）与页脚在窄屏的触控尺寸 */
@media (max-width: 640px) {
  .catalog-results .product-bottom { align-items: center; gap: 12px; }
  .catalog-results .product-bottom strong { font-size: 22px; }
  .catalog-results .product-card-body { padding: 16px 16px 18px; }
  .client-footer { padding: 40px 0 28px; }
  .client-footer a { display: inline-block; padding: 5px 0; font-size: 13px; }
  .client-footer h3, .client-footer strong { font-size: 14px; }
}


/* ------------------------------------------ 4) 再来一单（复购快捷区） */
.repeat-order-strip { margin-top: 28px; }
.repeat-order-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.repeat-order-card {
  min-width: 0;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-2);
}
.repeat-order-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.repeat-order-name { color: var(--paper-ink); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.repeat-order-meta {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repeat-order-cta { margin-top: 4px; color: var(--brand-ink); font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.repeat-order-card::after { content: ""; }
@media (max-width: 640px) {
  .repeat-order-list { grid-template-columns: 1fr; gap: 10px; }
  .repeat-order-card { padding: 14px 16px; }
}


/* ==========================================================================
 * 站点图标（Lucide Icons v1.47.0，ISC 许可）
 *   所有图标继承 currentColor，因此自动跟随主题色与深色后台；
 *   线宽统一 2px，尺寸按所在位置给定，移动端与桌面端一致。
 * ======================================================================== */

.icon {
  display: block;
  flex: none;
  stroke-width: 2;
  vertical-align: middle;
  pointer-events: none;
}

/* 顶部导航搜索按钮 */
.header-search button .icon { margin: 0 auto; }
.mobile-menu .icon, .sidebar-toggle .icon { margin: 0 auto; }

/* 移动端底部导航：图标在圆形底内 */
.mobile-bottom-nav b .icon { width: 20px; height: 20px; }
.mobile-bottom-nav a.active b .icon,
.mobile-bottom-nav button.active b .icon { stroke-width: 2.2; }

/* 账号区快捷入口 / 移动端工具区 */
.account-grid b .icon { width: 20px; height: 20px; }
.mobile-home-tools b .icon { width: 22px; height: 22px; }

/* 首页分类树与分类轨道 */
.home-category-icon .icon { width: 15px; height: 15px; }
.category-rail .home-category-icon .icon { width: 14px; height: 14px; }
.home-category-root i .icon,
.reference-category-head a .icon,
.home-catalog-results > header a .icon { width: 14px; height: 14px; }
.home-category-root i,
.reference-category-head a span,
.home-catalog-results > header a span { display: inline-flex; align-items: center; }
.reference-category-head a,
.home-catalog-results > header a,
.reference-notice a { display: inline-flex; align-items: center; gap: 3px; }

/* 面包屑分隔符 */
.crumb-sep { color: var(--line-strong); }

/* 客服悬浮工具 */
.service-method-icon .icon { width: 18px; height: 18px; }
.service-dock .service-method-icon { background: transparent; color: currentColor; }
@media (max-width: 640px) {
  /* 移动端只显示一个圆形客服球，用图标代替原来的文字 */
  .service-dock button.is-primary .service-status { right: 4px; bottom: 4px; width: 10px; height: 10px; }
}

/* 后台侧栏：图标轨道 */
.admin-nav-parent > span .icon { width: 18px; height: 18px; }
.admin-nav-parent i .icon { width: 14px; height: 14px; }
.admin-nav-parent > span { background: transparent; box-shadow: none; }
.admin-nav-parent:hover > span .icon { stroke-width: 2.2; }
.admin-nav-parent.active > span .icon { stroke-width: 2.3; }
.admin-shell .admin-top .top-icon-button .icon,
.admin-shell .admin-top .sidebar-toggle .icon { width: 17px; height: 17px; }

/* 按钮里的图标与文字对齐 */
.btn .icon, .clone-button .icon { width: 16px; height: 16px; }
.btn, .clone-button { gap: 6px; }

/* 后台表格里的分类图标 */
.category-admin-icon .icon { width: 18px; height: 18px; }

/* 加载与空状态 */
.empty .icon { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--line-strong); }

/* 移动端微调：图标略放大以便点按 */
@media (max-width: 640px) {
  .account-grid b .icon { width: 22px; height: 22px; }
  .home-category-icon .icon { width: 16px; height: 16px; }
  .admin-nav-parent > span .icon { width: 20px; height: 20px; }
}

/* ==========================================================================
 * 响应式
 * ======================================================================== */

@media (max-width: 1280px) {
  .catalog-head, .catalog-section, .reference-home, .client-head-inner { width: min(100%, calc(100% - 40px)); }
  .client-header { width: calc(100% - 40px); }
  .header-search { max-width: 240px; }
  .reference-top { height: 380px; grid-template-columns: 6fr 5fr; }
  .reference-notice { width: 72%; }
  .reference-category-products > :nth-child(n) { grid-column: span 3; }
  .catalog-results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: 96px minmax(0, 1fr); }
  .admin-sidebar { width: 96px; }
  .admin-top { margin: 12px 0 0; inset-inline: 16px; }
  .admin-content { padding: 20px 16px 48px; }
}

@media (max-width: 1024px) {
  .reference-top { height: auto; grid-template-columns: 1fr; gap: 20px; }
  .reference-banner, .banner-carousel { min-height: 340px; }
  .reference-account { grid-template-rows: auto auto; margin: 0; }
  .reference-notice { width: 100%; margin-top: 18px; }
  .catalog-section { grid-template-columns: 1fr; gap: 20px; }
  .catalog-navigation { position: static; }
  .category-rail { display: flex; overflow-x: auto; gap: 8px; padding: 10px; border-radius: var(--r-lg); scrollbar-width: none; }
  .category-rail::-webkit-scrollbar { display: none; }
  .category-rail button {
    min-width: max-content;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .category-rail button.active { box-shadow: none; border-color: var(--brand-ink); }
  .catalog-results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .client-main { padding-top: 92px; }
  .client-header { top: 12px; height: 58px; border-radius: 24px; }
  .client-brand span { display: none; }
  .reference-category-products > :nth-child(n) { grid-column: span 12; }
  .member-metrics, .member-metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-sidebar {
    width: 268px;
    left: -280px;
    background: #16191e;
    border-right: 1px solid var(--ink-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sidebar-open .admin-sidebar { left: 0; box-shadow: 0 0 0 100vmax rgba(8, 9, 11, .6); }
  .admin-brand { justify-content: flex-start; padding: 0 18px; }
  .admin-brand > div { display: block; }
  .admin-nav-parent {
    min-height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
    font-size: 13px;
  }
  .admin-nav-parent > span { width: 26px; height: 26px; border-radius: 8px; }
  .admin-nav-parent i { display: inline; margin-left: auto; color: var(--ink-fg-muted); font-style: normal; transition: transform var(--dur-2) var(--ease-2); }
  .admin-nav-group.open .admin-nav-parent i { transform: rotate(180deg); }
  .admin-nav-group + .admin-nav-group { border-top: 0; }
  .admin-nav-parent.active::before { left: 0; width: 2px; }
  .admin-nav-children a { text-align: left; padding: 7px 12px 7px 46px; font-size: 12.5px; }
  .admin-nav-children a:hover { padding-left: 50px; }
  .admin-nav-unread { position: static; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; box-shadow: none; }
  .sidebar-foot { text-align: left; padding: 14px 18px 20px; }
  .sidebar-foot > a.runtime-badge { min-height: 36px; place-items: center start; padding: 0 12px; }
  .sidebar-foot > a.runtime-badge i { display: inline; }
  .admin-top { margin: 10px 0 0; inset-inline: 12px; padding: 0 8px 0 12px; height: 54px; }
  /* 面包屑胶囊链在窄屏只保留"当前页 + 一级分组"，避免截断成"我..." */
  .admin-breadcrumb { min-width: 0; flex: 1 1 auto; }
  .admin-breadcrumb span:nth-of-type(1) { display: none; }
  .admin-breadcrumb i:nth-of-type(1) { display: none; }
  .admin-breadcrumb span {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-breadcrumb b {
    min-width: 0;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-breadcrumb i { display: none; }
  .admin-top-actions { flex: 0 0 auto; }
  /* 看板金额在窄屏缩小并允许收缩 */
  .admin-shell .clone-analytics-head { flex-wrap: wrap; align-items: center; gap: 8px; }
  .admin-shell .clone-analytics-head > div { min-width: 0; flex: 1 1 100%; }
  .admin-shell .clone-analytics-head h2 { font-size: 19px; }
  /* 窄屏金额单独占一行并缩小，避免被右侧裁切 */
  .admin-shell .clone-analytics-head > strong { flex: 0 0 auto; margin-left: auto; font-size: 19px; }
  .admin-shell .clone-analytics-head p { overflow-wrap: anywhere; font-size: 12px; }
  .admin-shell .clone-analytics-panel { padding: 14px; }
  .admin-content { padding: 16px 12px 40px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .client-header { display: none; }
  .client-main { padding-top: 0; }
  .reference-home, .catalog-head, .catalog-section, .store-section, .auth-page { width: calc(100% - 32px); }
  .reference-top { gap: 16px; }
  .reference-banner, .banner-carousel { min-height: 260px; border-radius: 20px; }
  .banner-copy { padding: 0 24px 28px; }
  .banner-copy h1 { font-size: 26px; }
  .reference-notice { border-radius: var(--r-md); }
  .reference-category-card, .home-product-card { grid-template-columns: 104px minmax(0, 1fr); min-height: 118px; }
  .reference-category-card > div:last-child { padding: 14px 16px 12px; }
  .catalog-results .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-dock { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); top: auto; }
  .service-dock a, .service-dock button { width: 48px; height: 48px; min-height: 48px; }
  .mobile-bottom-nav { height: calc(58px + env(safe-area-inset-bottom)); }
  .mobile-home-tools b { width: 46px; height: 46px; border-radius: 14px; background: #e8f4ee; color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--line); }
  .mobile-home-tools a b,
  .mobile-home-tools a:nth-child(n) b,
  .mobile-home-tools button b,
  .mobile-home-tools button:nth-child(n) b {
    background: #e8f4ee;
    background-image: none;
    color: var(--text-soft);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 14px;
  }
  .mobile-home-tools button:active b, .mobile-home-tools a:active b { background: var(--brand-soft); color: var(--brand-ink); }
  /* 移动端：单个圆角方形客服按钮，浮在底部导航之上，不遮挡正文 */
  .service-dock {
    right: 14px;
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    transform: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .service-dock .service-dock-actions > * { display: none; }
  .service-dock .service-dock-actions > button.is-primary { display: grid; }
  .service-dock a, .service-dock button {
    width: 50px;
    height: 50px;
    min-height: 50px;
    border-radius: 16px;
    box-shadow: 0 12px 26px -16px rgba(12, 42, 30, .6);
  }
  .service-dock .icon { width: 22px; height: 22px; }
  .mobile-home-tools a:active b, .mobile-home-tools button:active b { transform: scale(.94); }
  .mobile-home-head form { border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
  .admin-content { padding: 14px 12px 40px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .modal-card { border-radius: var(--r-lg); }
}


/* -------------------------------------------- 2) 商品详情 · 移动端下单动线 */
@media (max-width: 900px) {
  .product-detail {
    width: calc(100% - 32px);
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* 图在上但压矮，标题与价格提前出现 */
  .detail-media { position: static; display: block; order: 1; }
  .detail-media .product-visual { height: 240px; min-height: 240px; }
  .detail-main { order: 2; padding-top: 0; }
  .detail-main h1 { font-size: 24px; margin: 8px 0 8px; }
  .detail-description { font-size: 14px; }
  .detail-price { margin: 16px 0; padding: 16px 18px; }
  .detail-price strong { font-size: 28px; }
  .product-spec { grid-template-columns: 1fr; }
  .product-spec div:nth-child(n) { border-bottom: 1px solid #dcebe3; }
  .product-spec div:last-child { border-bottom: 0; }
  .purchase-form { padding: 18px; }
  .store-section.detail-info { margin-top: 36px; }
  .query-hero { width: calc(100% - 32px); padding: 26px 20px; margin-top: 24px; }
  .query-hero form { grid-template-columns: 1fr; }
  .query-hero form button { min-height: 46px; }
}
@media (max-width: 640px) {
  /* 首图高度进一步压缩，第一屏能看到标题与价格 */
  .detail-media .product-visual { height: 210px; min-height: 210px; }
  .detail-badges { margin-top: 10px; }
  .detail-badges span { padding: 5px 10px; font-size: 11px; }
  .product-spec div { grid-template-columns: 76px 1fr; padding: 10px 12px; }
  .purchase-login { padding: 18px; }

  /* 下单区吸底：滑动时价格与提交按钮始终在拇指区 */
  .client-main:has(#orderForm) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .purchase-form #orderForm > .purchase-total,
  .purchase-form .purchase-total {
    position: sticky;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 5;
    margin: 4px -18px -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(251, 250, 247, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -12px 30px -26px rgba(42, 38, 34, .8);
  }
  .purchase-total > span { flex: 1 1 100%; font-size: 12px; }
  .purchase-actions { width: 100%; margin-left: 0; gap: 8px; }
  .purchase-actions .btn { flex: 1 1 0; min-height: 46px; }
  .purchase-actions .btn.primary { flex: 1.4 1 0; }
  .package-quantity-control { width: 100%; }

  /* 首页：分类轨道第二行小字不再换行错位 */
  .home-category-children button span, .home-category-grandchildren button span { overflow-wrap: anywhere; }
  .reference-category-head { height: 44px; margin-bottom: 12px; }
  .reference-category-head h2 { font-size: 20px; padding-left: 14px; }
  .reference-category-head a { font-size: 12px; }
  .reference-category { margin-top: 34px; }
}

/* 触屏：禁用悬停位移，改用按压反馈 */
@media (hover: none) {
  .reference-category-card:hover, .home-product-card:hover, .product-card:hover,
  .metric-card:hover, .admin-nav-parent:hover { transform: none; }
  .client-nav a:hover { background: transparent; }
  .reference-category-card:active, .home-product-card:active, .product-card:active { transform: scale(.994); }
  .btn:active, .clone-button:active { transform: scale(.985); }
}

/* 高对比度与打印 */
@media (prefers-contrast: more) {
  .reference-category-card, .home-product-card, .product-card, .admin-panel, .metric-card,
  .btn, .clone-button, .category-rail button { border-color: currentColor !important; }
}
@media print {
  .client-header, .admin-sidebar, .admin-top, .service-dock, .mobile-bottom-nav { display: none !important; }
  body, .admin-shell { background: #fff; color: #000; }
}

/* ==========================================================================
 * 老浏览器降级：不支持 color-mix() 的浏览器
 * （Safari < 16.2 / Chrome < 111 / Firefox < 113 / 旧版 X5）
 * 本主题层已把关键色写成字面量，此处只补玻璃与方向描边。
 * ======================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .client-header { background: #ffffff; }
  .fx-scrolled .client-header { background: #ffffff; }
  .reference-notice { background: #fbfaf7; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .admin-sidebar { background: #16191e; }
  .admin-top { background: #1c2026; }
  .admin-login-panel { background: #1c2026; }
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .client-header, .admin-top, .admin-sidebar, .reference-notice,
  .mobile-bottom-nav, .modal-backdrop, .admin-shell .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .client-header { background: #ffffff; border-color: var(--paper-line); }
  .admin-top { background: #1c2026; }
  .admin-sidebar { background: #16191e; }
}