/* ==========================================================================
   HENGKUN — Shared Styles  (assets/styles.css)
   设计系统: Linear (深色工业精密) × Modern Minimal (医疗洁净浅色) — 见 /design/DESIGN.md
   规则: 唯一强色为 WhatsApp 绿 #25D366 且仅用于 CTA; CTA 一律"绿底深墨绿字";
        卡片圆角 ≤16px; 无彩色渐变; 状态=颜色+图标+文字 三编码。
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* Surfaces */
  --color-bg: #FFFFFF;
  --color-bg-soft: #FCFCFD;
  --color-surface: #F7F8FA;
  --color-surface-2: #EFF1F4;
  --color-border: #E2E5EA;
  --color-border-strong: #C7CCD3;

  /* Dark / Industrial */
  --color-ink-950: #0B0D10;
  --color-ink-900: #12151A;
  --color-ink-800: #171A20;
  --color-ink-700: #1E222A;
  --color-ink-600: #2A2F38;
  --color-ink-500: #3A4048;
  --brand-graphite: #1A1D22;

  /* Text */
  --text-strong: #0F1319;
  --text-body: #3A424E;
  --text-muted: #5C6673;
  --text-faint: #7C8794;
  --text-onDark-strong: #F2F4F7;
  --text-onDark-body: #C3C9D2;
  --text-onDark-muted: #8A93A0;

  /* CTA — only strong color */
  --cta: #25D366;
  --cta-hover: #1FBE5A;
  --cta-pressed: #128C7E;
  --cta-ink: #06301D;
  --cta-tint: #E9FBF0;

  /* Semantic */
  --success: #1E9E62;
  --warning: #E9A23B;
  --danger: #E5484D;
  --info: #4C8DFF;

  /* Data-viz */
  --data-1: #4C8DFF;
  --data-2: #35B6C9;
  --data-3: #8A93A0;
  --data-track: #EFF1F4;

  /* Type — 拉丁字形优先，中文走系统黑体回退（后台界面为中文） */
  --font-heading: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-display: clamp(2.125rem, 1.2rem + 4.2vw, 4rem);
  --fs-h1: clamp(1.75rem, 1.15rem + 2.6vw, 2.875rem);
  --fs-h2: clamp(1.4375rem, 1.1rem + 1.5vw, 2.125rem);
  --fs-h3: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);

  /* Radius */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px;

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(2,6,12,.06), 0 1px 3px rgba(2,6,12,.08);
  --shadow-2: 0 8px 24px rgba(2,6,12,.12);
  --shadow-3: 0 24px 64px rgba(2,6,12,.28);
  --shadow-cta: 0 0 0 1px rgba(37,211,102,.35), 0 8px 24px rgba(37,211,102,.22);
  --inner-hl: inset 0 1px 0 rgba(255,255,255,.04);

  /* Focus / Overlay */
  --focus-ring: #4C8DFF;
  --focus-ring-dark: #6BA6FF;
  --overlay: rgba(4,6,10,.60);

  /* Motion */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-reveal: 480ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --z-header: 200; --z-pop: 300; --z-float: 350; --z-sidebar: 400; --z-modal: 500; --z-toast: 600;
}

/* ------------------------------------------------------------------ 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 16px; } }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-strong); margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: rgba(76,141,255,.22); color: var(--text-strong); }

/* ------------------------------------------------------------------ 3. TYPE */
.t-display { font-family: var(--font-heading); font-size: var(--fs-display); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--text-strong); }
.t-h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 600; line-height: 1.10; letter-spacing: -.02em; }
.t-h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.t-h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.t-h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.30; }
.t-bodyL { font-size: 1rem; line-height: 1.6; }
@media (min-width: 1024px) { .t-bodyL { font-size: 1.125rem; } }
.t-body { font-size: .9375rem; line-height: 1.65; }
@media (min-width: 1024px) { .t-body { font-size: 1rem; } }
.t-small { font-size: .8125rem; line-height: 1.55; }
@media (min-width: 1024px) { .t-small { font-size: .875rem; } }
.t-micro { font-size: .6875rem; line-height: 1.4; font-weight: 500; letter-spacing: .02em; }
.t-overline { font-size: .6875rem; line-height: 1.4; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; }
@media (min-width: 1024px) { .t-overline { font-size: .75rem; } }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.c-strong { color: var(--text-strong); }
.c-body { color: var(--text-body); }
.c-muted { color: var(--text-muted); }
.c-faint { color: var(--text-faint); }
.c-info { color: var(--info); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 4. LAYOUT */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 40px; } }
@media (min-width: 1440px) { :root { --container: 1320px; } }
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
.section--dark { background: var(--color-ink-950); color: var(--text-onDark-body); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-onDark-strong); }
.section--soft { background: var(--color-bg-soft); }
.section-head { max-width: 660px; margin-bottom: var(--space-8); }
.section-head .t-overline { color: var(--text-muted); margin-bottom: var(--space-3); display: block; }
.section--dark .section-head .t-overline { color: var(--text-onDark-muted); }
.section-head p { margin-top: var(--space-3); color: var(--text-muted); }
.section--dark .section-head p { color: var(--text-onDark-body); }
.divider { height: 1px; background: var(--color-border); border: 0; }

/* ------------------------------------------------------------------ 5. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: .875rem; font-weight: 600; line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm { height: 32px; padding: 0 14px; font-size: .8125rem; }
.btn--lg { height: 48px; padding: 0 24px; font-size: 1rem; }
.btn--full { width: 100%; }

/* CTA — green fill, DARK INK text (never white on green) */
.btn--cta { background: var(--cta); color: var(--cta-ink); }
.btn--cta:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: var(--shadow-cta); }
.btn--cta:active { background: var(--cta-pressed); transform: translateY(0); box-shadow: none; }

/* Secondary (light) */
.btn--sec { background: #fff; color: var(--text-strong); border-color: var(--color-border); }
.btn--sec:hover { background: var(--color-surface); border-color: var(--color-border-strong); }

/* Secondary (dark surface) */
.btn--sec-dark { background: transparent; color: var(--text-onDark-strong); border-color: var(--color-ink-600); }
.btn--sec-dark:hover { background: var(--color-ink-800); border-color: var(--color-ink-500); }

/* Ghost */
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--color-surface); color: var(--text-strong); }

/* Danger */
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: #FEF1F1; }
.btn--danger-solid { background: var(--danger); color: #fff; }
.btn--danger-solid:hover { background: #C93A3F; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------------------------ 6. BADGE / CHIP */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: .6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge--published { background: rgba(30,158,98,.12); color: var(--success); }
.badge--published .badge__dot { background: var(--success); }
.badge--draft { background: var(--color-surface-2); color: var(--text-muted); }
.badge--draft .badge__dot { background: var(--text-faint); }
.badge--out { background: rgba(233,162,59,.14); color: #8A5A0B; }
.badge--out .badge__dot { background: var(--warning); }
.badge--archived { background: var(--color-surface); color: var(--text-faint); }
.badge--archived .badge__dot { background: var(--text-faint); }
.badge--neutral { background: var(--color-surface-2); color: var(--text-body); }
.badge--neutral .badge__dot { background: var(--text-faint); }
.badge--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; background: #fff; border: 1px solid var(--color-border); color: var(--text-strong); }
.badge--onDark { background: var(--color-ink-800); color: var(--text-onDark-body); border: 1px solid var(--color-ink-600); }
.badge--mono.badge--onDark { background: var(--color-ink-800); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--text-body);
  font-size: .6875rem; font-weight: 500;
}
.chip--mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------------ 7. CARD */
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card--dark { background: var(--color-ink-900); border-color: var(--color-ink-600); color: var(--text-onDark-body); border-radius: var(--radius-xl); box-shadow: var(--inner-hl); }
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4 { color: var(--text-onDark-strong); }

/* ------------------------------------------------------------------ 8. INPUTS */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: .8125rem; font-weight: 500; color: var(--text-strong); }
.field .hint { font-size: .75rem; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px;
  background: var(--color-surface); color: var(--text-strong);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: .9375rem; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: #fff; border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(76,141,255,.22);
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input--lg { height: 44px; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field--error .input:focus { box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.field__err { display: none; align-items: center; gap: 5px; font-size: .8125rem; color: var(--danger); }
.field__err svg { width: 14px; height: 14px; }
.field--error .field__err { display: flex; }

/* checkbox */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .8125rem; color: var(--text-body); user-select: none; }
.check input { position: absolute; opacity: 0; width: 16px; height: 16px; }
.check__box { width: 16px; height: 16px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-xs); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: all var(--dur-fast) var(--ease-standard); }
.check input:checked + .check__box { background: var(--color-ink-950); border-color: var(--color-ink-950); }
.check input:checked + .check__box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--color-border-strong); position: relative; transition: background var(--dur-base) var(--ease-standard); }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-standard); }
.switch input:checked + .switch__track { background: var(--success); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ 9. TABLE */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-surface-2); color: var(--text-muted);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 10px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
table.data tbody td { padding: 10px 14px; height: 54px; border-bottom: 1px solid var(--color-border); color: var(--text-body); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
table.data tbody tr:hover { background: var(--color-surface); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .col-actions { text-align: right; white-space: nowrap; }
.thumb-40 { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-2); object-fit: cover; border: 1px solid var(--color-border); }
.row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--color-surface-2); color: var(--text-strong); }
.icon-btn--danger:hover { background: #FEF1F1; color: var(--danger); }
@media (max-width: 767px) { table.data thead th, table.data tbody td { padding: 8px 10px; } table.data tbody td { height: 48px; } }

/* empty state */
.empty { text-align: center; padding: 56px 20px; }
.empty svg { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--text-faint); }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--color-surface-2) 25%, #e7eaee 37%, var(--color-surface-2) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--radius-sm); height: 14px; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ------------------------------------------------------------------ 10. PAGINATION */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--space-5); flex-wrap: wrap; }
.pager__pages { display: flex; gap: 6px; align-items: center; }
.page-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #fff; color: var(--text-body); font-size: .8125rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast); }
.page-btn:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.page-btn.is-active { background: var(--color-ink-950); color: #fff; border-color: var(--color-ink-950); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager__info { font-size: .8125rem; color: var(--text-muted); }

/* ------------------------------------------------------------------ 11. MODAL / DRAWER */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3); padding: var(--space-6);
  transform: translateY(8px) scale(.98); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.overlay.is-open .modal { transform: none; opacity: 1; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.modal__close { width: 44px; height: 44px; margin: -10px -10px 0 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); transition: background var(--dur-fast), color var(--dur-fast); flex: none; }
.modal__close:hover { background: var(--color-surface-2); color: var(--text-strong); }
.modal__close svg { width: 20px; height: 20px; }
.modal__product { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.modal__product img { width: 64px; height: 64px; border-radius: var(--radius-md); border: 1px solid var(--color-border); flex: none; background: var(--color-surface-2); }
.modal__channels { display: flex; flex-direction: column; gap: 10px; }
.agent-block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.agent-block__name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-strong); font-size: .9375rem; }
.agent-block__name svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; }
.agent-block .channel-row { border: 0; border-top: 1px dashed var(--color-border); border-radius: 0; padding: 10px 2px; }
.agent-block .btn--cta { margin-top: 2px; }
.channel-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: var(--text-strong); transition: background var(--dur-fast), border-color var(--dur-fast); text-align: left; width: 100%; }
.channel-row:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.channel-row svg { width: 20px; height: 20px; flex: none; }
.channel-row .chev { margin-left: auto; color: var(--text-faint); }
.channel-row .chev svg { width: 16px; height: 16px; }

/* desktop: keep centered dialog. mobile: bottom sheet */
@media (max-width: 559px) {
  .overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; transform: translateY(100%); max-height: 90vh; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
  .overlay.is-open .modal { transform: translateY(0); transition: transform 280ms var(--ease-spring), opacity 200ms var(--ease-out); }
}
body.no-scroll { overflow: hidden; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4,6,10,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--dur-base); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(560px, 92vw); max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); background: #fff; }
.lightbox video { max-width: min(760px, 92vw); max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); background: #000; }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lightbox__close:hover { background: rgba(255,255,255,.22); }

/* ------------------------------------------------------------------ 12. TOAST */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--color-ink-900); color: var(--text-onDark-strong); border: 1px solid var(--color-ink-600); border-radius: var(--radius-md); box-shadow: var(--shadow-2); font-size: .875rem; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); max-width: 92vw; }
.toast.is-show { opacity: 1; transform: none; }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast--ok svg { color: var(--success); }
.toast--err svg { color: var(--danger); }

/* ------------------------------------------------------------------ 13. LANDING : NAV */
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: 56px; display: flex; align-items: center; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: background var(--dur-base), border-color var(--dur-base); }
.site-header.is-scrolled { background: rgba(255,255,255,.85); border-bottom-color: var(--color-border); }
@media (min-width: 1024px) { .site-header { height: 64px; } }
.site-header .container { display: flex; align-items: center; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; letter-spacing: .02em; color: var(--text-strong); }
.nav-links { display: none; gap: var(--space-1); margin-left: auto; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link { padding: 8px 12px; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; color: var(--text-muted); transition: color var(--dur-fast), background var(--dur-fast); }
.nav-link:hover, .nav-link.is-active { color: var(--text-strong); background: var(--color-surface); }
.header-cta { display: none; margin-left: auto; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } .nav-links { margin-left: auto; margin-right: 0; } }
@media (min-width: 1024px) { .site-header .container { gap: var(--space-8); } }
.hamburger { display: inline-flex; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-strong); }
.hamburger:hover { background: var(--color-surface); }
@media (min-width: 1024px) { .hamburger { display: none; } }
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-sidebar); background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.mobile-menu a.m-link { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; padding: 14px 4px; border-bottom: 1px solid var(--color-border); color: var(--text-strong); }
.mobile-menu .btn { margin-top: auto; }

/* ------------------------------------------------------------------ 14. LANDING : HERO */
.hero { padding: 32px 0 48px; }
@media (min-width: 768px) { .hero { padding: 48px 0 72px; } }
@media (min-width: 1024px) { .hero { padding: 64px 0 96px; } }
.hero__grid { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; } }
.hero__media { order: -1; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); position: relative; }
@media (min-width: 1024px) { .hero__media { order: 0; aspect-ratio: 4 / 5; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-md); background: rgba(11,13,16,.68); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text-onDark-strong); font-size: .75rem; font-weight: 500; }
.hero__tag svg { width: 15px; height: 15px; }
.overline-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--text-muted); }
.overline-pill .t-overline { color: var(--text-muted); }
.hero h1 { margin: var(--space-4) 0 var(--space-4); }
.hero__sub { max-width: 560px; color: var(--text-muted); }
.hero__actions { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-6); }
@media (min-width: 480px) { .hero__actions { flex-direction: row; } }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: var(--space-4); }
.stat__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.375rem; font-weight: 600; color: var(--text-strong); letter-spacing: .01em; }
.stat__label { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------------ 15. LANDING : PRODUCTS */

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.product-card { display: flex; flex-direction: column; min-width: 0; text-align: left; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px; cursor: pointer; transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), box-shadow var(--dur-base); }
.product-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-2); }
.product-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); margin-bottom: 12px; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__purity { position: absolute; top: 8px; left: 8px; }
.product-card__status { position: absolute; top: 8px; right: 8px; }
.product-card__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.product-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.product-card__catrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 28px; }
.product-card__cat { font-size: .75rem; color: var(--text-muted); }
.product-card__catrow .product-card__cat { margin-top: 0; }
.product-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: .8125rem; font-weight: 600; color: var(--text-strong); }
.product-card__cta svg { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.product-card:hover .product-card__cta svg { transform: translateX(3px); }
/* 商品卡分类行右端渠道按钮（渠道由后台指定）——与主 CTA 同族的绿色 CTA：绿底 + 深墨绿图标 */
.product-card__contact { margin-left: auto; width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--cta); border: 1px solid rgba(6, 48, 29, .18); color: var(--cta-ink); transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), transform var(--dur-fast); }
.product-card__contact svg { width: 15px; height: 15px; color: var(--cta-ink); }
.product-card__contact:hover { border-color: var(--cta-ink); transform: translateY(-1px); }
.product-card__contact:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.product-card:hover .product-card__contact svg { transform: none; }
/* 联系弹窗里「全部渠道被关闭」时的空态 */
.modal__empty { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.modal__empty svg { width: 18px; height: 18px; color: var(--text-faint); flex: none; margin-top: 2px; }

/* ------------------------------------------------------------------ 16. LANDING : COLLECTIONS / ADVANTAGES / ABOUT */
.collection-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .collection-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.collection-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base), box-shadow var(--dur-base); }
.collection-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-2); }
.collection-card__code { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; color: var(--text-faint); letter-spacing: .02em; line-height: 1; }
.collection-card h3 { margin: 14px 0 6px; }
.collection-card p { color: var(--text-muted); font-size: .875rem; }
.collection-card .collection-card__desc { color: var(--text-muted); font-size: .875rem; }
.collection-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.collection-card__count { font-size: .75rem; color: var(--text-faint); font-family: var(--font-mono); }
.collection-card__arrow { color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.collection-card:hover .collection-card__arrow { transform: translateX(4px); color: var(--text-strong); }
.section--dark .collection-card { background: var(--color-ink-900); border-color: var(--color-ink-600); }
.section--dark .collection-card h3 { color: var(--text-onDark-strong); }
.section--dark .collection-card p { color: var(--text-onDark-body); }
.section--dark .collection-card .collection-card__desc { color: var(--text-onDark-body); }
.section--dark .collection-card__code { color: var(--color-ink-500); }
.section--dark .collection-card:hover { border-color: var(--color-ink-500); box-shadow: none; }

.adv-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adv-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.adv-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }
.adv-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-strong); margin-bottom: 16px; }
.adv-card__icon svg { width: 24px; height: 24px; }
.adv-card h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.adv-card p { color: var(--text-muted); font-size: .875rem; }
.adv-card .adv-card__desc { color: var(--text-muted); font-size: .875rem; }

.about-card { padding: var(--space-8); }
@media (min-width: 1024px) { .about-card { padding: var(--space-12); } }
.about-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 768px) { .about-metrics { grid-template-columns: repeat(4, 1fr); } }
.about-metric__num { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--text-onDark-strong); font-variant-numeric: tabular-nums; }
.about-metric__label { font-size: .75rem; color: var(--text-onDark-muted); margin-top: 2px; }

/* ------------------------------------------------------------------ 17. LANDING : CERTS CAROUSEL */
.cert-carousel { position: relative; }
.cert-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 12px; -ms-overflow-style: none; scrollbar-width: none; }
.cert-track::-webkit-scrollbar { display: none; }
.cert-slide { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 640px) { .cert-slide { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .cert-slide { flex-basis: calc((100% - 60px) / 4); } }
.cert-card { background: var(--color-ink-900); border: 1px solid var(--color-ink-600); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--inner-hl); cursor: zoom-in; height: 100%; }
.cert-card__doc { position: relative; background: var(--color-surface-2); padding: 14px; }
.cert-card__doc img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.cert-card__doc video { display: block; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #000; aspect-ratio: 3/4; object-fit: cover; }
.cert-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cert-card__play svg { width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); opacity: .92; }
.cert-card__body { padding: 14px 16px 16px; }
.cert-card__lab { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-onDark-muted); }
.cert-card__lab svg { width: 14px; height: 14px; }
.cert-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.cert-card__prod { font-family: var(--font-heading); font-size: .9375rem; font-weight: 600; color: var(--text-onDark-strong); }
.cert-card__batch { font-family: var(--font-mono); font-size: .75rem; color: var(--text-onDark-muted); margin-top: 6px; }
/* 证书描述：富文本（可含图片 / 视频），由 common.js 注入 .cms-rich */
.cert-card__desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-ink-700);
  font-size: .8125rem; line-height: 1.65; color: var(--text-onDark-body); }
.cert-card__desc p { margin: 0 0 8px; }
.cert-card__desc p:last-child { margin-bottom: 0; }
.cert-card__desc img, .cert-card__desc video { margin: 10px 0; }
.cert-card__desc ul, .cert-card__desc ol { margin: 0 0 8px; padding-left: 18px; }
.cert-card__desc a { color: var(--text-onDark-strong); text-decoration: underline; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-btn { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-ink-600); background: transparent; color: var(--text-onDark-strong); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast), border-color var(--dur-fast); }
.carousel-btn:hover { background: var(--color-ink-800); border-color: var(--color-ink-500); }
.carousel-btn svg { width: 18px; height: 18px; }
.section-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; max-width: none; }
@media (max-width: 640px) { .section-head--row { flex-wrap: wrap; } }
.section-head__tools { display: flex; align-items: center; gap: 16px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--text-strong); background: var(--color-surface-2); border: 1px solid var(--color-border); padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color .18s, border-color .18s, background .18s; }
.more-link svg { width: 15px; height: 15px; }
.more-link:hover { color: var(--cta); border-color: var(--cta); background: #fff; }
.section--dark .more-link { color: var(--text-onDark-strong); background: rgba(255,255,255,.06); border-color: var(--color-ink-600); }
.section--dark .more-link:hover { color: var(--cta); border-color: var(--cta); }

/* ------------------------------------------------------------------ 18. LANDING : FEEDBACK */
.feedback-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .feedback-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feedback-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.fb-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: 12px; }
.fb-head { display: flex; align-items: center; gap: 10px; }
.fb-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-2); color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8125rem; flex: none; border: 1px solid var(--color-border); }
.fb-name { font-size: .875rem; font-weight: 600; color: var(--text-strong); }
.fb-role { font-size: .75rem; color: var(--text-muted); }
/* NOTE: label text uses --text-muted (5.9:1) instead of --info (2.9:1) so the
   11px "Verified buyer" line passes WCAG AA; the blue check glyph keeps --info. */
.fb-verified { display: inline-flex; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 500; color: var(--text-muted); }
.fb-verified svg { width: 13px; height: 13px; color: var(--info); }
.fb-bubble { background: var(--color-surface); border-radius: 14px; padding: 12px 14px; font-size: .875rem; color: var(--text-body); flex: 1; }
.fb-thumb { width: 100%; height: 120px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ 19. LANDING : BOTTOM CTA + FOOTER + FLOAT */
.bottom-cta { text-align: left; }
.bottom-cta .btn { margin-top: var(--space-6); }
.channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.channel-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-ink-600); color: var(--text-onDark-strong); background: transparent; font-size: .875rem; transition: background var(--dur-fast), border-color var(--dur-fast); }
.channel-pill:hover { background: var(--color-ink-800); border-color: var(--color-ink-500); }
.channel-pill svg { width: 18px; height: 18px; }
.site-footer { background: var(--brand-graphite); color: var(--text-onDark-muted); padding: var(--space-12) 0 var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-brand .brand__name { color: var(--text-onDark-strong); }
.site-footer h4 { color: var(--text-onDark-strong); font-size: .875rem; margin-bottom: 14px; }
.footer-links li + li { margin-top: 9px; }
.footer-links a { font-size: .875rem; color: var(--text-onDark-muted); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--text-onDark-strong); }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-ink-600); display: flex; flex-direction: column; gap: 10px; font-size: .75rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-disclaimer { padding: 10px 12px; border: 1px solid var(--color-ink-600); border-radius: var(--radius-md); color: var(--text-onDark-muted); font-size: .75rem; display: inline-flex; align-items: center; gap: 8px; }
.footer-disclaimer svg { width: 15px; height: 15px; flex: none; }

.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-float); width: 56px; height: 56px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-cta); transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast); }
.wa-float:hover { transform: translateY(-2px) scale(1.04); background: var(--cta-hover); }
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 1024px) { .wa-float { right: 28px; bottom: 28px; width: 60px; height: 60px; } .wa-float svg { width: 30px; height: 30px; } }
.wa-float__pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 20. ADMIN SHELL (dark app) */
.admin-body { background: var(--color-ink-950); color: var(--text-onDark-body); min-height: 100vh; }
.admin-body h1, .admin-body h2, .admin-body h3, .admin-body h4 { color: var(--text-onDark-strong); }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #171A20 0%, #0B0D10 60%); }
.login-card { width: 100%; max-width: 400px; background: var(--color-ink-900); border: 1px solid var(--color-ink-600); border-radius: var(--radius-xl); box-shadow: var(--shadow-3), var(--inner-hl); padding: var(--space-8); }
.login-card .brand__name { color: var(--text-onDark-strong); }
.admin-label { font-size: .8125rem; font-weight: 500; color: var(--text-onDark-body); }
.admin-body .input, .admin-body .select, .admin-body .textarea { background: var(--color-ink-700); border-color: var(--color-ink-600); color: var(--text-onDark-strong); }
.admin-body .input::placeholder, .admin-body .textarea::placeholder { color: var(--text-onDark-muted); }
.admin-body .input:focus, .admin-body .select:focus, .admin-body .textarea:focus { background: var(--color-ink-700); border-color: var(--focus-ring-dark); box-shadow: 0 0 0 3px rgba(107,166,255,.28); }
.admin-body .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.admin-body .field > label { color: var(--text-onDark-body); }
.admin-body .field .hint { color: var(--text-onDark-muted); }

.admin-shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex: none; background: var(--color-ink-900); border-right: 1px solid var(--color-ink-700); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: var(--z-sidebar); transition: transform var(--dur-base) var(--ease-standard); }
.sidebar__brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--color-ink-700); flex: none; }
.sidebar__nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-onDark-body); font-size: .875rem; font-weight: 500; position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
.side-link svg { width: 18px; height: 18px; flex: none; color: var(--text-onDark-muted); }
.side-link:hover { background: var(--color-ink-800); color: var(--text-onDark-strong); }
.side-link.is-active { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.side-link.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: #fff; }
.side-link.is-active svg { color: var(--text-onDark-strong); }
.side-link.is-hidden { display: none; }
.side-group.is-hidden { display: none; }
.sidebar__foot { padding: 12px; border-top: 1px solid var(--color-ink-700); font-size: .75rem; color: var(--text-onDark-muted); }
.admin-main { flex: 1; margin-left: 240px; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { height: 56px; flex: none; position: sticky; top: 0; z-index: var(--z-header); background: rgba(18,21,26,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-ink-700); display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-onDark-muted); }
.breadcrumb .sep { color: var(--color-ink-500); }
.breadcrumb .cur { color: var(--text-onDark-strong); font-weight: 500; }
.topbar-search { margin-left: auto; position: relative; display: none; }
@media (min-width: 768px) { .topbar-search { display: block; } }
.topbar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-onDark-muted); }
.topbar-search .input { width: 240px; height: 36px; padding-left: 32px; }
.user-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-onDark-body); }
@media (min-width: 768px) { .user-btn { margin-left: 0; } }
.user-btn:hover { background: var(--color-ink-800); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-ink-700); border: 1px solid var(--color-ink-600); display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 600; color: var(--text-onDark-strong); flex: none; }
.admin-content { padding: 20px; flex: 1; }
@media (min-width: 1024px) { .admin-content { padding: 28px 32px; } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head h1 { font-size: 1.375rem; }
.page-head .sub { color: var(--text-onDark-muted); font-size: .875rem; margin-top: 4px; }
.sidebar-scrim { position: fixed; inset: 0; background: rgba(4,6,10,.6); z-index: calc(var(--z-sidebar) - 1); opacity: 0; visibility: hidden; transition: opacity var(--dur-base); }
.sidebar-scrim.is-open { opacity: 1; visibility: visible; }
.menu-toggle { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-onDark-body); }
.menu-toggle:hover { background: var(--color-ink-800); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-3); }
  .sidebar.is-open { transform: none; }
  .admin-main { margin-left: 0; }
}

/* admin panel / cards */
.panel { background: var(--color-ink-900); border: 1px solid var(--color-ink-700); border-radius: var(--radius-lg); }
.panel__head { padding: 16px 20px; border-bottom: 1px solid var(--color-ink-700); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__head h3 { font-size: 1rem; }
.panel__body { padding: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.admin-stat { background: var(--color-ink-900); border: 1px solid var(--color-ink-700); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--inner-hl); }
.admin-stat__icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-ink-800); color: var(--text-onDark-body); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.admin-stat__icon svg { width: 18px; height: 18px; }
.admin-stat__num { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--text-onDark-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.admin-stat__label { font-size: .8125rem; color: var(--text-onDark-muted); margin-top: 4px; }

/* dark table */
.admin-body .table-wrap { background: var(--color-ink-900); border-color: var(--color-ink-700); }
.admin-body table.data thead th { background: var(--color-ink-800); color: var(--text-onDark-muted); border-bottom-color: var(--color-ink-700); }
.admin-body table.data tbody td { color: var(--text-onDark-body); border-bottom-color: var(--color-ink-700); }
.admin-body table.data tbody tr:hover { background: var(--color-ink-800); }
.admin-body .thumb-40 { background: var(--color-ink-800); border-color: var(--color-ink-600); }
.admin-body .icon-btn { color: var(--text-onDark-muted); }
.admin-body .icon-btn:hover { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.admin-body .icon-btn--danger:hover { background: rgba(229,72,77,.12); color: var(--danger); }
.admin-body .input, .admin-body .select { }

/* toolbar above table */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.toolbar .search { position: relative; flex: 1 1 220px; max-width: 320px; }
.toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-onDark-muted); }
.toolbar .search .input { padding-left: 32px; }
.toolbar .select { width: auto; min-width: 160px; }
.toolbar__spacer { flex: 1; }

/* form layout in modal / page */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cert-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-ink-600); color: var(--text-onDark-body); font-size: .8125rem; cursor: pointer; transition: all var(--dur-fast); }
.cert-chip svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-fast); }
.cert-chip.is-on { background: rgba(76,141,255,.14); border-color: var(--info); color: var(--text-onDark-strong); }
.cert-chip.is-on svg { opacity: 1; }
.img-drop { border: 1px dashed var(--color-ink-600); border-radius: var(--radius-lg); padding: 16px; display: flex; gap: 16px; align-items: center; background: var(--color-ink-800); }
.img-drop__preview { width: 84px; height: 84px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-ink-700); border: 1px solid var(--color-ink-600); flex: none; }
.img-drop__preview img { width: 100%; height: 100%; object-fit: cover; }

/* modal dark variant for admin */
.admin-body .overlay { }
.modal--admin { background: var(--color-ink-900); border: 1px solid var(--color-ink-700); color: var(--text-onDark-body); }
.modal--admin h1, .modal--admin h2, .modal--admin h3, .modal--admin h4 { color: var(--text-onDark-strong); }
.modal--lg { max-width: 640px; }
.modal--sm { max-width: 400px; }

/* utility */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1.6fr 1fr; gap: 20px; } }
.stack { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-right { text-align: right; }

/* ------------------------------------------------------------------ 21. SUBPAGES（Products / Collections / Advantages / About / Certifications / Feedback 二级页） */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--space-6); }
.filter-bar .search { position: relative; flex: 1 1 200px; max-width: 280px; }
.filter-bar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.filter-bar .search .input { padding-left: 32px; background: #fff; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: #fff; color: var(--text-body); font-size: .8125rem; font-weight: 500; white-space: nowrap; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.chip-btn .cnt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .6875rem; color: var(--text-faint); }
.chip-btn:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.chip-btn.is-on { background: var(--color-ink-950); border-color: var(--color-ink-950); color: #fff; }
.chip-btn.is-on .cnt { color: var(--text-onDark-muted); }
.cert-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(4, 1fr); } }
.about-split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .about-split { grid-template-columns: 5fr 7fr; gap: var(--space-12); } }
.about-split__media { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); aspect-ratio: 4 / 5; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.steps { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.step-card__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--text-faint); }
.step-card h3 { font-size: 1.0625rem; margin: 10px 0 6px; }
.step-card p { color: var(--text-muted); font-size: .875rem; }
.spec-list { display: grid; gap: 10px; margin-top: var(--space-5); }
.spec-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; color: var(--text-body); }
.spec-list li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--text-strong); }

/* ------------------------------------------------------------------ 22. ADMIN : CONTENT MANAGERS + STOREFRONT SHORTCUTS */
.side-group { padding: 14px 12px 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--text-onDark-muted); }
/* 可折叠分组：「前台页面」7 个前台快捷入口默认收起，避免把系统配置挤出可视区 */
.side-group--toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 12px 6px; background: none; border: 0; font: inherit; font-size: .6875rem; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--text-onDark-muted); cursor: pointer; text-align: left; }
.side-group--toggle:hover { color: var(--text-onDark-strong); }
.side-group__chev { flex: none; transition: transform var(--dur-fast) var(--ease-standard); color: currentColor; }
.side-group--toggle[aria-expanded="true"] .side-group__chev { transform: rotate(180deg); }
.side-subnav { display: flex; flex-direction: column; gap: 2px; }
.side-subnav[hidden] { display: none; }
/* 系统配置常驻侧栏底部（不随导航区滚动），保证任何窗口高度下都可点 */
.sidebar__pin { flex: none; padding: 6px 12px 10px; border-top: 1px solid var(--color-ink-700); display: flex; flex-direction: column; gap: 2px; }
.sidebar__pin .side-group { padding-top: 8px; }
.content-note { display: flex; align-items: flex-start; gap: 7px; margin: -4px 0 14px; font-size: .8125rem; color: var(--text-onDark-muted); }
.content-note svg { flex: none; margin-top: 2px; color: var(--text-onDark-muted); }
.content-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-ink-800); border: 1px solid var(--color-ink-700); color: var(--text-onDark-body); flex: none; }
.content-icon--lg { width: 44px; height: 44px; }
.content-rows { display: flex; flex-direction: column; }
.content-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.content-row + .content-row { margin-top: 4px; }
.content-row:hover { background: var(--color-ink-800); border-color: var(--color-ink-700); }
.content-row__text { display: flex; flex-direction: column; min-width: 0; }
.content-row__title { color: var(--text-onDark-strong); font-weight: 500; font-size: .875rem; }
.content-row__sub { color: var(--text-onDark-muted); font-size: .75rem; }
.content-row .chev { margin-left: auto; color: var(--text-onDark-muted); }
.content-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 12px 2px; margin-top: 12px; border-top: 1px solid var(--color-ink-700); }

/* ---- Contact channels (admin) ---- */
.ch-row { display: grid; grid-template-columns: 34px minmax(140px, 180px) minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--color-ink-700); border-radius: var(--radius-md); background: var(--color-ink-850, transparent); }
.ch-row + .ch-row { margin-top: 8px; }
.ch-row.is-off { opacity: .6; }
.ch-row__icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); background: var(--color-ink-800); border: 1px solid var(--color-ink-600); display: inline-flex; align-items: center; justify-content: center; color: var(--text-onDark-strong); }
.ch-row__icon svg { width: 18px; height: 18px; }
.ch-row__name { color: var(--text-onDark-strong); font-weight: 500; font-size: .875rem; display: flex; align-items: center; gap: 8px; }
.ch-row__desc { color: var(--text-onDark-muted); font-size: .75rem; margin-top: 2px; }
.ch-row__val { min-width: 0; }
.ch-row__actions { display: inline-flex; gap: 6px; align-items: center; }
.ch-preview { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: .6875rem; color: var(--text-onDark-muted); word-break: break-all; }
.ch-tag { font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-onDark-muted); border: 1px solid var(--color-ink-600); border-radius: var(--radius-xs); padding: 1px 5px; }
table.data.slot-table tbody td { height: auto; padding-top: 12px; padding-bottom: 12px; vertical-align: top; }
table.data.slot-table .chip { margin: 0 4px 4px 0; }

@media (max-width: 860px) {
  .ch-row { grid-template-columns: 34px minmax(0, 1fr); }
  .ch-row__val, .ch-row__actions { grid-column: 1 / -1; }
}
.chip--link { background: var(--color-ink-800); border: 1px solid var(--color-ink-700); color: var(--text-onDark-body); font-size: .75rem; }
.chip--link:hover { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.chip--link svg { color: var(--text-onDark-muted); }
#view .fb-avatar { background: var(--color-ink-800); color: var(--text-onDark-strong); border-color: var(--color-ink-700); }
.fb-avatar--sm { width: 34px; height: 34px; font-size: .75rem; }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: var(--text-onDark-muted); }
.thumb-40 + .thumb-40 { margin-top: 4px; }

/* ------------------------------------------------------------------ 23. MOTION PREF */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== 详情页与预览（二级页面） ===== */
.is-clickable { cursor: pointer; }
.is-zoomable { cursor: zoom-in; }
.admin-stat { display: block; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.admin-stat:hover { border-color: var(--color-ink-600); transform: translateY(-1px); }
.admin-stat__label { display: flex; align-items: center; gap: 5px; }
.admin-stat__chev { color: var(--text-onDark-muted); opacity: .7; }
.admin-stat:hover .admin-stat__chev { opacity: 1; }
.detail-media { width: 100%; max-width: 260px; border-radius: var(--radius-md); border: 1px solid var(--color-ink-700); background: var(--color-ink-800); }
.preview-img { max-width: 100%; max-height: 62vh; border-radius: var(--radius-md); border: 1px solid var(--color-ink-700); background: var(--color-ink-800); }
.preview-video { max-width: 100%; max-height: 62vh; border-radius: var(--radius-md); border: 1px solid var(--color-ink-700); background: #000; }
.data--kv th { width: 168px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-onDark-muted); white-space: nowrap; }
.data--kv td { color: var(--text-onDark-strong); }
.detail-quote { display: flex; gap: 14px; align-items: flex-start; }
.detail-quote .fb-avatar--lg { width: 52px; height: 52px; font-size: 1rem; }
.detail-adv { display: flex; gap: 14px; align-items: flex-start; }
.fb-avatar--lg { width: 52px; height: 52px; font-size: 1rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-ink-700); border-radius: var(--radius-md); background: var(--color-ink-800); font-size: .875rem; color: var(--text-onDark-body); }

/* 存储降级提示：浏览器禁用 localStorage 时的顶部横幅（琥珀色，CTA 绿不越界） */
.storage-notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; font-size: .8125rem; line-height: 1.55; background: #FFF8E6; border-bottom: 1px solid #F0D9A8; color: #6B4E00; }
.storage-notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #B8860B; }
.storage-notice code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .75rem; padding: 1px 4px; border-radius: 4px; background: rgba(184, 134, 11, .12); }
.admin-body .storage-notice { background: rgba(245, 158, 11, .12); border-bottom: 1px solid rgba(245, 158, 11, .32); color: #FCD34D; }
.admin-body .storage-notice svg { color: #F59E0B; }

/* ==========================================================================
   24. ADMIN : 页面装修（PAGE EDITOR）
   规范来源: /design/page-editor-spec.md
   强色纪律: 绿色仅出现在「保存」按钮与页面卡片「编辑内容」按钮（CTA 家族）；
             已定制=信息蓝 · 未保存=琥珀 · 默认/已隐藏=中性灰。
   ========================================================================== */

/* ---- 24.1 布局尺寸令牌（追加；JS 会读 --scroll-offset 做滚动定位） ---- */
:root {
  --admin-topbar-h: 56px;
  --admin-pad-y: 20px; --admin-pad-x: 20px;
  --ed-bar-h: 56px;
  --anchor-top: 124px;          /* = 56 + 56 + 12，左栏锚点 sticky top */
  --scroll-offset: 128px;       /* = 56 + 56 + 16，区块 panel 的 scroll-margin-top */
  --z-editor-bar: 150;
  --z-anchor: 140;
  --z-savebar: 160;
  --z-anchor-drawer: 450; --z-anchor-scrim: 440;

  /* 编辑器表面（取值全部来自既有 ink 阶梯，不新增色相） */
  --rte-bar: var(--color-ink-800);
  --rte-surface: var(--color-ink-700);
  --rte-btn: 28px;
  --rte-min: 140px; --rte-max: 420px;

  /* 前台效果预览卡（浅色面，与后台形成对比） */
  --fx-surface: var(--color-bg-soft);
  --fx-ink: var(--text-strong);
  --fx-border: var(--color-border);

  /* 语义：未保存（琥珀）/ 已定制（信息蓝）—— 均非绿色 */
  --warn-ink: #FCD34D;  --warn-line: rgba(245,158,11,.45);  --warn-fill: rgba(245,158,11,.12);
  --custom-ink: #9CC0FF; --custom-line: rgba(76,141,255,.38); --custom-fill: rgba(76,141,255,.14);

  /* 补丁：既有 .ch-row 引用了未定义的 ink-850 */
  --color-ink-850: #14171C;
}
@media (min-width: 1024px) { :root { --admin-pad-y: 28px; --admin-pad-x: 32px; } }

/* ---- 24.2 装修视图布局 ---- */
.ed-layout { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 88px; } /* 88px 让位给固定保存条 */
@media (min-width: 1024px) { .ed-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; } }
@media (min-width: 1440px) { .ed-layout { grid-template-columns: 224px minmax(0, 1fr); } }

.ed-bar {
  position: sticky; top: var(--admin-topbar-h); z-index: var(--z-editor-bar);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: calc(-1 * var(--admin-pad-y)) calc(-1 * var(--admin-pad-x)) 16px;
  padding: 10px var(--admin-pad-x);
  background: var(--color-ink-950); border-bottom: 1px solid var(--color-ink-700);
}
.ed-bar__title { font-size: .9375rem; font-weight: 600; color: var(--text-onDark-strong); }
.ed-bar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 本页独立标记：说明这一页的内容只输出给自己，改它不影响其它页面 */
.ed-page-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-ink-800); border: 1px solid var(--color-ink-700);
  color: var(--text-onDark-muted); font-size: .6875rem; font-family: var(--font-mono);
}
.ed-page-tag svg { width: 12px; height: 12px; flex: none; color: var(--info); }
@media (max-width: 900px) { .ed-page-tag { display: none; } }

.ed-save {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-savebar);
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--admin-pad-x) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(18,21,26,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-ink-700);
}
@media (min-width: 1024px) { .ed-save { left: 240px; } }   /* 让开固定侧栏 */
.ed-save__inner { width: 100%; max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-save__spacer { margin-left: auto; }

/* ---- 24.3 页面列表卡片（#/pages） ---- */
.pages-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pages-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1440px) { .pages-grid { grid-template-columns: repeat(4, 1fr); } }

.pcard { display: flex; flex-direction: column; min-width: 0; padding: 16px;
  background: var(--color-ink-900); border: 1px solid var(--color-ink-700);
  border-radius: var(--radius-lg); box-shadow: var(--inner-hl);
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.pcard:hover { border-color: var(--color-ink-600); transform: translateY(-1px); }
.pcard__head { display: flex; align-items: flex-start; gap: 12px; }
.pcard__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
  background: var(--color-ink-800); border: 1px solid var(--color-ink-700);
  color: var(--text-onDark-body); display: inline-flex; align-items: center; justify-content: center; }
.pcard__icon svg { width: 18px; height: 18px; }
.pcard__title { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--text-onDark-strong); }
.pcard__file { font-family: var(--font-mono); font-size: .75rem; color: var(--text-onDark-muted); margin-top: 3px; }
.pcard__badge { margin-left: auto; flex: none; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: .75rem; color: var(--text-onDark-muted); }
.pcard__meta .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-onDark-body); }
.pcard__meta .dot { color: var(--color-ink-500); }
.pcard__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-ink-700); }
.pcard__foot .spacer { margin-left: auto; }

/* 状态徽章：已定制=信息蓝（非绿），默认/已隐藏=中性灰 */
.badge--custom { background: var(--custom-fill); border: 1px solid var(--custom-line); color: var(--custom-ink); }
.badge--custom .badge__dot { background: #4C8DFF; }
.badge--default { background: var(--color-ink-800); border: 1px solid var(--color-ink-700); color: var(--text-onDark-muted); }
.badge--default .badge__dot { background: var(--color-ink-500); }

/* ---- 24.4 区块 panel ---- */
.sec { scroll-margin-top: var(--scroll-offset); }
.sec + .sec { margin-top: 16px; }
.sec__head { padding: 12px 16px 12px 12px; }
.sec__toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 6px 8px; margin: -6px -8px; border-radius: var(--radius-md); color: var(--text-onDark-strong); text-align: left; }
.sec__toggle:hover { background: var(--color-ink-800); }
.sec__chev { width: 16px; height: 16px; flex: none; color: var(--text-onDark-muted);
  transition: transform var(--dur-fast) var(--ease-standard); }
.sec.is-collapsed .sec__chev { transform: rotate(-90deg); }
.sec.is-collapsed .sec__body { display: none; }
.sec__name { font-size: .9375rem; font-weight: 600; }
.sec__key { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-onDark-muted); }
.sec.is-off { border-color: var(--color-ink-700); }
.sec.is-off .sec__name { color: var(--text-onDark-muted); }
.sec.is-off .sec__body { display: none; }
.panel__head .switch { flex: none; }
.panel__head .badge { flex: none; }

/* ---- 24.5 区块锚点导航 ---- */
.anchor-nav { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1024px) {
  .anchor-nav { position: sticky; top: var(--anchor-top); z-index: var(--z-anchor); align-self: start;
    max-height: calc(100vh - var(--anchor-top) - 24px); overflow-y: auto; padding-right: 4px; }
}
.anchor-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 10px;
  border-radius: var(--radius-md); font-size: .8125rem; color: var(--text-onDark-muted);
  text-align: left; position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
.anchor-item:hover { background: var(--color-ink-800); color: var(--text-onDark-strong); }
.anchor-item.is-active { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.anchor-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: #fff; }
.anchor-item__idx { font-family: var(--font-mono); font-size: .6875rem; width: 16px; flex: none; color: var(--color-ink-500); }
.anchor-item.is-active .anchor-item__idx { color: var(--text-onDark-muted); }
.anchor-item__state { margin-left: auto; font-size: .625rem; color: var(--text-onDark-muted); }

/* 窄屏抽屉（复用既有 .sidebar 的分层语言） */
.ed-anchor-toggle { display: inline-flex; }
@media (min-width: 1024px) { .ed-anchor-toggle { display: none; } }
.anchor-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); z-index: var(--z-anchor-drawer);
  background: var(--color-ink-900); border-left: 1px solid var(--color-ink-700); padding: 16px; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-standard); box-shadow: var(--shadow-3); }
.anchor-drawer.is-open { transform: none; }
.anchor-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; font-size: .8125rem; font-weight: 600; color: var(--text-onDark-strong); }
.anchor-scrim { position: fixed; inset: 0; z-index: var(--z-anchor-scrim); background: rgba(4,6,10,.6);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base); }
.anchor-scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .anchor-drawer, .anchor-scrim { display: none; } }

/* ---- 24.6 富文本编辑器 ---- */
.rte { border: 1px solid var(--color-ink-700); border-radius: var(--radius-md); background: var(--rte-surface); overflow: hidden; }
.rte.is-focus { border-color: var(--focus-ring-dark); box-shadow: 0 0 0 3px rgba(107,166,255,.28); }
.rte__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px;
  background: var(--rte-bar); border-bottom: 1px solid var(--color-ink-700); }
.rte-btn { width: var(--rte-btn); height: var(--rte-btn); flex: none; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-onDark-muted);
  transition: background var(--dur-fast), color var(--dur-fast); }
.rte-btn svg { width: 14px; height: 14px; }
.rte-btn:hover { background: var(--color-ink-700); color: var(--text-onDark-strong); }
/* 激活态一律中性，绝不用绿/蓝填充 */
.rte-btn.is-on { background: var(--color-ink-600); color: var(--text-onDark-strong); box-shadow: inset 0 0 0 1px var(--color-ink-500); }
.rte-btn:disabled { opacity: .35; cursor: not-allowed; }
.rte-btn:disabled:hover { background: transparent; color: var(--text-onDark-muted); }
.rte-btn:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 1px; }

/* 产品联系渠道点亮开关（后台）—— 点亮 = 前端展示，未点亮 = 前端不展示 */
.channel-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: transparent; color: var(--text-onDark-muted); font-size: .875rem; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.channel-toggle svg { width: 16px; height: 16px; opacity: .55; }
.channel-toggle:hover { border-color: var(--color-ink-500); color: var(--text-onDark-strong); }
.channel-toggle.is-lit { background: rgba(30,158,98,.14); border-color: rgba(30,158,98,.55); color: var(--success); }
.channel-toggle.is-lit svg { opacity: 1; }
.channel-toggle.is-lit:hover { box-shadow: 0 0 0 3px rgba(30,158,98,.12); }
.channel-toggle:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 1px; }
input.is-dim { opacity: .45; }

/* 固定联系位渠道点亮小按钮（后台表格内） */
.slot-lit { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 6px; border-radius: 10px; border: 1px solid var(--color-border); background: transparent; color: var(--text-onDark-muted); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); vertical-align: middle; }
.slot-lit svg { width: 16px; height: 16px; opacity: .55; }
.slot-lit:hover { border-color: var(--color-ink-500); color: var(--text-onDark-strong); }
.slot-lit.is-lit { background: rgba(30,158,98,.14); border-color: rgba(30,158,98,.55); color: var(--success); }
.slot-lit.is-lit svg { opacity: 1; }
.slot-lit:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 1px; }
.slot-table td { vertical-align: middle; }
.rte-sep { width: 1px; height: 18px; background: var(--color-ink-700); margin: 0 4px; flex: none; }
@media (max-width: 767px) { .rte__bar { gap: 4px; } .rte-btn { width: 32px; height: 32px; } .rte-btn svg { width: 16px; height: 16px; } }

.rte__area { min-height: var(--rte-min); max-height: var(--rte-max); overflow-y: auto; padding: 12px 14px;
  font-size: .9375rem; line-height: 1.7; color: var(--text-onDark-strong); outline: none; }
.rte__area:empty::before { content: attr(data-placeholder); color: var(--text-onDark-muted); }
.rte__area p { margin: 0 0 8px; } .rte__area p:last-child { margin-bottom: 0; }
.rte__area h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 12px 0 6px; color: var(--text-onDark-strong); }
.rte__area h4 { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin: 10px 0 4px; color: var(--text-onDark-strong); }
.rte__area ul { list-style: disc; padding-left: 20px; } .rte__area ol { list-style: decimal; padding-left: 20px; }
.rte__area li { margin: 2px 0; }
.rte__area blockquote { margin: 10px 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--color-ink-500); color: var(--text-onDark-body); }
.rte__area a { color: #6BA6FF; text-decoration: underline; }
/* 富文本内的媒体（编辑态预览） */
.rte__area img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: var(--radius-md); }
.rte__area video { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: var(--radius-md); background: #000; }
.rte__hint { display: flex; align-items: flex-start; gap: 6px; padding: 6px 14px 10px;
  font-size: .75rem; line-height: 1.6; color: var(--text-onDark-muted); }
.rte__hint svg { flex: none; margin-top: 2px; }
.rte-host { margin-top: 2px; }

/* ---- 24.6b 前台富文本内的图片 / 视频（.cms-rich 由 common.js 注入） ---- */
.cms-rich img { display: block; max-width: 100%; height: auto; margin: 16px 0; border-radius: var(--radius-md); }
.cms-rich video { display: block; width: 100%; max-width: 720px; height: auto; margin: 16px 0; border-radius: var(--radius-md); background: #000; }
.cms-rich img:first-child, .cms-rich video:first-child { margin-top: 0; }
.cms-rich img:last-child, .cms-rich video:last-child { margin-bottom: 0; }
/* 联系弹窗内的产品描述区 */
.modal__desc { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.modal__desc img { margin: 12px 0; }

/* ---- 24.7 repeater ---- */
.repeater { display: flex; flex-direction: column; gap: 8px; }
.rep-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--color-ink-800);
  border: 1px solid var(--color-ink-700); border-radius: var(--radius-md); }
.rep-item:hover { border-color: var(--color-ink-600); }
.rep-item__idx { width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm); background: var(--color-ink-700);
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-onDark-muted);
  display: inline-flex; align-items: center; justify-content: center; }
.rep-item__fields { display: grid; gap: 8px; grid-template-columns: 1fr; min-width: 0; }
.rep-item__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rep-item__label { font-size: .6875rem; color: var(--text-onDark-muted); }
@media (min-width: 560px) { .rep-item__fields--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .rep-item__fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rep-item__acts { display: inline-flex; gap: 2px; }
.rep-empty { padding: 14px; text-align: center; font-size: .8125rem; color: var(--text-onDark-muted);
  border: 1px dashed var(--color-ink-600); border-radius: var(--radius-md); background: var(--color-ink-800); }
.rep-add { align-self: flex-start; }
.icon-btn--sm { width: 28px; height: 28px; } .icon-btn--sm svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .rep-item__acts .icon-btn { width: 34px; height: 34px; } }  /* 触控目标 ≥32，尽量 44 */

/* ---- 24.8 image 字段 ---- */
.imgf { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; position: relative; }
@media (max-width: 559px) { .imgf { grid-template-columns: 1fr; } }
.imgf__preview { width: 84px; height: 84px; flex: none; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-ink-700); border: 1px solid var(--color-ink-600); display: flex; align-items: center; justify-content: center; }
.imgf__preview img { width: 100%; height: 100%; object-fit: cover; }
.imgf__preview svg { width: 28px; height: 28px; color: var(--text-onDark-muted); }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-ink-800);
  border: 1px solid var(--color-ink-700); border-radius: var(--radius-md); align-self: flex-start; }
.seg__btn { height: 28px; padding: 0 10px; border-radius: var(--radius-sm); font-size: .75rem;
  font-weight: 500; color: var(--text-onDark-muted); transition: background var(--dur-fast), color var(--dur-fast); }
.seg__btn:hover { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.seg__btn.is-on { background: var(--color-ink-600); color: var(--text-onDark-strong); }
.imgf__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.imgf__hint { font-size: .75rem; color: var(--text-onDark-muted); }

/* ---- 24.9 link 字段 ---- */
.linkf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
@media (max-width: 639px) { .linkf { grid-template-columns: 1fr; } }
.linkf__new { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--text-onDark-body); }

/* ---- 24.10 前台效果预览小卡 ---- */
.fx-preview { margin-top: 8px; border: 1px solid var(--color-ink-600); border-radius: var(--radius-md); overflow: hidden; }
.fx-preview__bar { display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--color-ink-800); border-bottom: 1px solid var(--color-ink-700);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--text-onDark-muted); }
.fx-preview__bar svg { width: 12px; height: 12px; }
.fx-preview__body { background: var(--fx-surface); color: var(--fx-ink); padding: 14px 16px; }
.fx-preview__body > * { max-width: 100%; }
.fx-preview__clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 关键：覆盖 .admin-body 给标题/正文套上的「深色面文字色」，否则深色文字会掉进浅底 */
.admin-body .fx-preview__body,
.admin-body .fx-preview__body h1, .admin-body .fx-preview__body h2,
.admin-body .fx-preview__body h3, .admin-body .fx-preview__body h4,
.admin-body .fx-preview__body p, .admin-body .fx-preview__body li { color: var(--text-strong); }
.admin-body .fx-preview__body .c-muted { color: var(--text-muted); }
.admin-body .fx-preview__body .c-faint { color: var(--text-faint); }

/* ---- 24.11 未保存指示器（琥珀，非绿） ---- */
.ed-dirty { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--warn-ink); }
.ed-dirty__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #F59E0B; box-shadow: 0 0 0 3px var(--warn-fill); }
.ed-bar.is-dirty { border-bottom-color: var(--warn-line); }
.content-note--warn { color: var(--warn-ink); }
.content-note--warn svg { color: #F59E0B; }

/* ---- 24.12 侧栏：页面装修条目 + 前台查看小图标 ---- */
.side-row { position: relative; display: flex; align-items: center; }
.side-row .side-link { flex: 1; min-width: 0; padding-right: 38px; }
.side-act { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm); color: var(--text-onDark-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.side-act svg { width: 14px; height: 14px; }
.side-act:hover { background: var(--color-ink-700); color: var(--text-onDark-strong); }
.side-act:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 1px; }
.side-row:hover .side-act { color: var(--text-onDark-body); }

/* ---- 24.13 触控目标兜底（可点目标 ≥32px，尽量 44px） ---- */
@media (max-width: 767px) {
  .seg__btn { height: 32px; padding: 0 12px; }
  .imgf__row .btn { min-height: 34px; }
  .rep-add { min-height: 34px; }
}
@media (max-width: 1023px) {
  .side-act { width: 34px; height: 34px; }
  .side-act svg { width: 16px; height: 16px; }
  .side-row .side-link { padding-right: 44px; }
  .anchor-item { padding: 12px 10px; }
  .ed-save__inner .btn { min-height: 38px; }
}

/* ==========================================================================
   25. 证书双形态（生成式 A4 / 上传式）—— 仅追加，不改动既有规则
   依赖: .panel / .btn / .btn--sec-dark / .input / .field / table.data / .icon-btn
   命名冲突规避: .cert-chip / .cert-card* / .cert-grid / .cert-track / .img-drop 已存在
                → 类型标记用 .cert-kind，表单用 .cert-form / .cert-seg / .cert-up / .cert-items
   ========================================================================== */

/* ---- 25.0 前台证书卡：文档区固定 3/4 容器，保证网格 / 轮播内卡片高度对齐 ----
   生成式（A4 竖版 SVG）用 cover + 顶部对齐：只裁掉底部约 6% 的页脚留白区，
   标题 / 产品 / 批号 / 检测项目全部可见，高度与改造前一致（零布局位移）。
   上传式（用户上传的任意比例扫描件 / 照片）必须完整显示 —— 用 contain + 白底，
   绝不裁切：横版扫描件若走 cover 会被裁掉约 47% 的横向内容，属静默数据损失。
   两种形态都由统一的 aspect-ratio: 3/4 保证卡片高度对齐。 */
.cert-card__doc--gen img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
.cert-card__doc--img img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--color-bg); }

/* ---- 25.1 新增语义化令牌（追加；不覆盖既有变量；取值全部来自既有色阶 / 阴影 / 圆角） ---- */
:root {
  /* 类型切换器（分段控件） */
  --cert-seg-track:      var(--color-ink-950);
  --cert-seg-line:       var(--color-ink-700);
  --cert-seg-fg:         var(--text-onDark-body);
  --cert-seg-hover:      var(--color-ink-800);
  --cert-seg-on-bg:      var(--color-ink-700);
  --cert-seg-on-line:    var(--color-ink-600);
  --cert-seg-on-fg:      var(--text-onDark-strong);

  /* 上传区 */
  --cert-up-bg:          var(--color-ink-800);
  --cert-up-line:        var(--color-ink-600);
  --cert-up-bg-hover:    var(--color-ink-700);
  --cert-up-line-hover:  var(--color-ink-500);
  --cert-up-over-bg:     rgba(76,141,255,.10);
  --cert-up-over-line:   var(--info);
  --cert-up-warn-line:   var(--warning);
  --cert-up-err-bg:      rgba(229,72,77,.10);
  --cert-up-err-line:    var(--danger);
  --cert-up-fg-strong:   var(--text-onDark-strong);

  /* 检测项目表 */
  --cert-items-line:       var(--color-ink-700);
  --cert-items-head-bg:    var(--color-ink-800);
  --cert-items-head-fg:    var(--text-onDark-muted);
  --cert-items-row-hover:  var(--color-ink-800);
  --cert-items-empty-bg:   var(--color-ink-800);
  --cert-items-empty-line: var(--color-ink-600);

  /* A4 证书预览 —— 纸面排版（色带 / 表格 / 签名 / 页脚）全部在 data.js 的 SVG 内完成，
     这里只留 HTML 侧真正用到的 4 个：预览宽度、浅色纸托底、纸面圆角与投影。 */
  --cert-a4-w:           340px;
  --cert-a4-mount:       var(--color-surface);
  --cert-a4-shadow:      var(--shadow-2);
  --cert-a4-radius:      var(--radius-sm);
}

/* ---- 25.2 布局：字段列 + 预览列（沿用 .grid-2 的 1.6fr / 1fr） ---- */
.cert-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) {
  .cert-form { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
  .cert-form__side { position: sticky; top: 76px; }
}

/* ---- 25.3 类型切换器（分段控件 · 与 .btn--sec-dark 同族，不用 select） ---- */
.cert-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--cert-seg-track);
  border: 1px solid var(--cert-seg-line);
  border-radius: var(--radius-md);
}
.cert-seg__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--cert-seg-fg); cursor: pointer;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cert-seg__btn svg { width: 14px; height: 14px; flex: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.cert-seg__btn:hover { background: var(--cert-seg-hover); color: var(--cert-seg-on-fg); }
.cert-seg__btn.is-on { background: var(--cert-seg-on-bg); border-color: var(--cert-seg-on-line); color: var(--cert-seg-on-fg); }
.cert-seg__btn.is-on svg { opacity: 1; }
.cert-seg__btn:disabled { opacity: .5; cursor: not-allowed; }
.cert-seg__btn:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 2px; }
@media (max-width: 479px) {
  .cert-seg { width: 100%; }
  .cert-seg__btn { flex: 1; justify-content: center; padding: 0 8px; }
}

/* ---- 25.4 类型标记 chip（复用 .badge--onDark 基底；不与既有 .cert-chip 冲突） ---- */
.cert-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-ink-800); border: 1px solid var(--color-ink-600);
  color: var(--text-onDark-body);
  font-size: .6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.cert-kind svg { width: 12px; height: 12px; flex: none; }
.cert-kind--gen { color: var(--text-onDark-strong); }

/* ---- 25.5 上传区（沿用 .img-drop 视觉基因：虚线 ink-600 + radius-lg + ink-800 底） ---- */
.cert-up {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 132px; padding: 20px;
  text-align: center; cursor: pointer;
  background: var(--cert-up-bg);
  border: 1px dashed var(--cert-up-line);
  border-radius: var(--radius-lg);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cert-up:hover { background: var(--cert-up-bg-hover); border-color: var(--cert-up-line-hover); }
.cert-up.is-over { background: var(--cert-up-over-bg); border-color: var(--cert-up-over-line); border-style: solid; }
.cert-up.is-warn { border-color: var(--cert-up-warn-line); border-style: solid; }
.cert-up.is-error { background: var(--cert-up-err-bg); border-color: var(--cert-up-err-line); border-style: solid; }
.cert-up:focus-within { outline: 2px solid var(--focus-ring-dark); outline-offset: 2px; }

.cert-up__drop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cert-up__icon svg { width: 26px; height: 26px; color: var(--text-onDark-muted); }
.cert-up.is-warn .cert-up__icon svg { color: var(--warning); }
.cert-up.is-error .cert-up__icon svg { color: var(--danger); }
.cert-up__title { font-size: .875rem; font-weight: 600; color: var(--cert-up-fg-strong); }
.cert-up__hint { font-size: .75rem; color: var(--text-onDark-muted); }

.cert-up__msg { display: none; align-items: center; gap: 6px; font-size: .8125rem; color: var(--cert-up-fg-strong); }
.cert-up__msg svg { width: 14px; height: 14px; flex: none; color: var(--cert-up-fg-strong); }
.cert-up.is-warn .cert-up__msg { display: flex; }
.cert-up.is-error .cert-up__msg { display: flex; }
.cert-up.is-warn .cert-up__msg svg { color: var(--warning); }
.cert-up.is-error .cert-up__msg svg { color: var(--danger); }

.cert-up__file { display: none; }
.cert-up.is-filled {
  flex-direction: row; justify-content: flex-start; text-align: left;
  gap: 12px; min-height: 0; padding: 14px; border-style: solid;
}
.cert-up.is-filled .cert-up__drop,
.cert-up.is-filled .cert-up__msg { display: none; }
/* 已上传状态下再传一个超限 / 偏大文件时，.is-filled 会与 .is-warn / .is-error 同时存在：
   上面那条 display:none 会把提示文案一起藏掉，这里把警告 / 错误状态重新放出来。
   .is-filled 把容器改成了 row 布局，所以还要让提示整行换行到文件行下方，不能挤在右侧。 */
.cert-up.is-filled.is-warn,
.cert-up.is-filled.is-error { flex-wrap: wrap; }
.cert-up.is-filled.is-warn .cert-up__msg,
.cert-up.is-filled.is-error .cert-up__msg { display: flex; flex: 1 0 100%; margin-top: 2px; }
.cert-up.is-filled .cert-up__file { display: flex; align-items: center; gap: 12px; width: 100%; }
.cert-up__file .btn { flex: none; }
.cert-up__thumb {
  width: 48px; height: 48px; flex: none; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ink-700); border: 1px solid var(--color-ink-600);
}
.cert-up__thumb img, .cert-up__thumb video { width: 100%; height: 100%; object-fit: cover; }
.cert-up__thumb > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-onDark-muted); }
.cert-up__thumb svg { width: 20px; height: 20px; }
.cert-up__text { flex: 1; min-width: 0; }
.cert-up__name { display: block; font-family: var(--font-mono); font-size: .8125rem; color: var(--cert-up-fg-strong); word-break: break-all; }
.cert-up__meta { display: block; font-size: .6875rem; color: var(--text-onDark-muted); margin-top: 2px; }

/* ---- 25.6 检测项目（后台：一张卡片 = 一行；窄屏由 .form-grid--2 自动堆叠为 2×2） ---- */
.cert-items__w { display: block; }
.cert-items__cards { display: flex; flex-direction: column; gap: 12px; }
.cert-items__card {
  padding: 12px; border: 1px solid var(--color-ink-700);
  border-radius: var(--radius-md); background: var(--color-ink-800);
}
.cert-items__card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cert-items__card-no { font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--text-onDark-muted); }
.cert-items__add { margin-top: 12px; }
.cert-items__count { font-size: .75rem; color: var(--text-onDark-muted); }

.cert-items__empty {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 14px;
  border: 1px dashed var(--cert-items-empty-line);
  border-radius: var(--radius-md);
  background: var(--cert-items-empty-bg);
}
.cert-items__empty svg { width: 18px; height: 18px; color: var(--text-faint); flex: none; margin-top: 2px; }
.cert-items__empty p { flex: 1; min-width: 0; margin: 0; font-size: .8125rem; color: var(--text-onDark-muted); }
.cert-items__empty .btn { flex: none; }

/* 检测项目表（宽屏形态）：后台在 ≥768px 时把 .cert-items__cards 收起、改渲染
   table.data（#cItemTable），两套 DOM 由 hidden 互斥切换，下面这些规则是宽屏表格的实际样式。 */
.cert-items table.data { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .875rem; }
.cert-items table.data thead th {
  background: var(--cert-items-head-bg); color: var(--cert-items-head-fg);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 8px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--cert-items-line);
}
.cert-items table.data tbody td {
  padding: 6px 10px; height: 52px;
  border-bottom: 1px solid var(--cert-items-line);
  color: var(--text-onDark-body); vertical-align: middle;
}
.cert-items table.data tbody tr:last-child td { border-bottom: 0; }
.cert-items table.data tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.cert-items table.data tbody tr:hover { background: var(--cert-items-row-hover); }
.cert-items .input { height: 34px; padding: 0 8px; font-size: .8125rem; }

/* ---- 25.7 A4 证书预览纸托（纸面本身是 SVG data URI；放大复用现有 lightbox / data-preview） ---- */
.cert-a4-mount {
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; padding: 10px;
  border: 1px solid var(--color-ink-700);
  border-radius: var(--radius-md); background: var(--cert-a4-mount);
}
.cert-a4-mount img, .cert-a4-mount video {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--cert-a4-radius); box-shadow: var(--cert-a4-shadow);
}
.cert-a4-mount video { background: #000; }
.cert-a4-mount > div { color: var(--text-faint); }
.cert-a4-mount > div svg { color: var(--text-faint); }
.cert-a4-mount > div p { margin: 0; }

/* ---- 25.8 证书列表里的视频缩略图标记（复用 .thumb-40） ---- */
.cert-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--text-onDark-muted); }
.cert-thumb__ic { width: 20px; height: 20px; }
.cert-thumb__play {
  position: absolute; right: 1px; bottom: 1px;
  width: 14px; height: 14px; border-radius: var(--radius-xs);
  background: var(--overlay); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cert-thumb__play svg { width: 8px; height: 8px; }

/* ---- 25.9 暗色区焦点环（后台面板内统一用 --focus-ring-dark） ---- */
.admin-body .cert-seg__btn:focus-visible,
.admin-body .cert-items .input:focus-visible,
.admin-body .cert-up:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 2px; }