/* ===== Amazon Listing Helper · Web — 设计系统 =====
   主题：亚马逊物流/包装语汇 —— 墨黑 + 琥珀橙 + 米白纸感
   签名元素：商品标签式分区卡 + 等宽字符/字节计数器 + 流式生成进度条
   ============================================================ */
:root {
  /* 色板 */
  --ink: #1f2328;          /* 主文字 / 深色块 */
  --ink-soft: #3f454c;     /* 次级文字 */
  --muted: #78716c;        /* 弱化文字（暖灰） */
  --paper: #faf8f4;        /* 页面背景（暖白纸感） */
  --surface: #ffffff;      /* 卡片 */
  --line: #e7e1d8;         /* 边框（暖灰） */
  --line-strong: #d3cbbc;
  --amber: #e8590c;        /* 品牌主色 */
  --amber-deep: #c2410c;   /* 深琥珀（hover / 文字，保证对比度） */
  --amber-soft: #fff1e6;   /* 琥珀浅底（激活 / 高亮） */
  --mark: #ffe8c2;         /* 关键词高亮 */
  --ok: #15803d;
  --danger: #b91c1c;
  /* 字体 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  /* 间距刻度（0.25rem 进制） */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(31, 35, 40, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.55;
}
::selection { background: var(--mark); }

/* ===== 顶栏（墨色）===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: #f5f1ea;
  position: sticky; top: 0; z-index: 20;
}
.brand {
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; gap: var(--s2);
  color: #f5f1ea;
}
.brand .tag {
  font-size: 11px; font-weight: 600;
  color: var(--ink); background: var(--amber);
  padding: 2px 8px; border-radius: 999px; letter-spacing: .04em;
}
.topbar-right { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.market { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #b8b2a8; }
.market select {
  font-family: inherit; font-size: 12.5px; padding: 4px 8px;
  background: #2a2f35; color: #f5f1ea; border: 1px solid #3a4047; border-radius: var(--radius);
}
.market select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.quota {
  font-size: 12.5px; color: #b8b2a8;
  font-variant-numeric: tabular-nums;
}
.quota b { color: var(--amber); font-weight: 700; }
.user-email {
  font-size: 12px; color: #b8b2a8; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-badge {
  font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--amber); padding: 2px 8px; border-radius: 999px;
}

/* ===== 升级专业版弹窗 ===== */
.pay-box { max-width: 460px; }
.pay-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s3) 0; }
.pay-plan {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; text-align: left;
}
.pay-plan:hover { border-color: var(--ink-soft); }
.pay-plan.selected { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }
.pay-plan.hot { position: relative; }
.pay-plan.hot::before {
  content: "推荐"; position: absolute; top: -8px; right: 10px;
  background: var(--amber); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
}
.pay-plan .pp-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.pay-plan .pp-price { font-size: 22px; font-weight: 800; color: var(--amber-deep); }
.pay-plan .pp-unit { font-size: 12px; font-weight: 500; color: var(--muted); }
.pay-plan .pp-desc { font-size: 12px; color: var(--muted); }
.pay-qr-area { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.qr-wrap { padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pay-qr-meta { font-size: 12.5px; color: var(--muted); text-align: center; }

/* ===== 按钮 ===== */
button {
  font-family: inherit; font-size: 13px; cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  padding: 7px 14px;
  background: var(--surface); color: var(--ink);
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
button:hover { border-color: var(--ink-soft); }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary {
  background: var(--amber); border-color: var(--amber); color: #fff; font-weight: 700;
  letter-spacing: .02em;
}
button.primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
button.ghost {
  background: transparent; border-color: transparent; color: var(--muted);
}
button.ghost:hover { background: rgba(31, 35, 40, .06); color: var(--ink); }
/* 顶栏里的幽灵按钮（深色底上） */
.topbar button.ghost { color: #b8b2a8; }
.topbar button.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

button.mini { padding: 3px 8px; font-size: 12px; color: var(--muted); border-color: transparent; background: transparent; }
button.mini:hover { background: var(--amber-soft); color: var(--amber-deep); }
button.mini.update { color: var(--amber-deep); }
button.mini.update:hover { background: var(--amber-soft); }
button.copy { padding: 3px 10px; font-size: 12px; color: var(--muted); }
button.copy:hover { color: var(--amber-deep); border-color: var(--line-strong); }

/* ===== 布局：双栏工作台 ===== */
.layout {
  max-width: 1280px; margin: var(--s5) auto var(--s6); padding: 0 var(--s4);
  display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: var(--s4); align-items: start;
}
@media (max-width: 920px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--s5);
}
.card h2 { font-size: 15px; margin-bottom: 2px; letter-spacing: .01em; }
.card .hint { font-size: 12.5px; color: var(--muted); margin-bottom: var(--s4); }

/* ===== 左栏表单 ===== */
.field { margin-bottom: var(--s3); }
.field label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 4px;
}
.field input, .field textarea, .options select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; color: var(--ink);
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field textarea:focus, .options select:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14);
}
.field textarea { resize: vertical; line-height: 1.5; }

/* 竞品列表（多行） */
.comp-list { display: flex; flex-direction: column; gap: 8px; }
.comp-row { display: flex; gap: 8px; align-items: flex-start; }
.comp-row .comp-input { flex: 1; }
.comp-row .comp-del { flex: 0 0 auto; margin-top: 2px; }
.comp-add {
  margin-top: 6px; font-size: 12.5px; color: var(--amber-deep);
  background: transparent; border: 1px dashed var(--amber); border-radius: var(--radius);
  padding: 5px 12px; cursor: pointer;
}
.comp-add:hover { background: var(--amber-soft); }

/* 联想词（Amazon 搜索建议） */
.kw-field { position: relative; }
.kw-wrap { position: relative; }
.kw-wrap .mini { position: absolute; right: 6px; bottom: 8px; z-index: 2; }
.suggest-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(31, 35, 40, .12); padding: 6px; max-height: 240px; overflow: auto;
}
.suggest-pop[hidden] { display: none; }
.suggest-empty { font-size: 12.5px; color: var(--muted); padding: 6px 8px; }
.suggest-item {
  display: block; width: 100%; text-align: left; font-size: 13px; color: var(--ink);
  background: transparent; border: none; border-radius: 4px; padding: 6px 8px; cursor: pointer;
}
.suggest-item:hover { background: var(--amber-soft); color: var(--amber-deep); }

/* 记忆可见性:生成完成后提示应用了哪些标准 */
.profile-applied {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  margin-top: var(--s3); padding: 8px 12px; font-size: 12.5px; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid #f3cba8; border-radius: var(--radius);
}
.profile-applied[hidden] { display: none; }
.profile-applied button { flex: 0 0 auto; font-size: 14px; line-height: 1; }

/* 五点 5 个独立输入框 */
.bullet-list { display: flex; flex-direction: column; gap: 8px; }
.bullet-row { display: flex; align-items: stretch; gap: 8px; }
.bullet-row .bl-label {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 11.5px; color: var(--muted); background: var(--surface);
}
.bullet-row .bl-wrap { flex: 1; }
.bullet-row .bl-ta { resize: none !important; min-height: 44px; }
.bullet-row .bl-count {
  flex: 0 0 auto; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap;
}
.bullet-row .bl-count.over { color: var(--danger); font-weight: 700; }
.bullet-row .bl-opt { flex: 0 0 auto; align-self: center; }

/* 标准提示条（未设置「我的标准」时显示） */.profile-hint { margin: var(--s3) 0 0; }
.profile-hint button {
  width: 100%; font-size: 12.5px; color: var(--amber-deep); background: var(--amber-soft);
  border: 1px dashed var(--amber); border-radius: var(--radius); padding: 7px 10px; cursor: pointer; text-align: left;
}
.profile-hint button:hover { background: #fde8d8; }

/* 加群交流弹窗 */
.wx-qr { display: flex; justify-content: center; padding: var(--s3) 0; }.wx-qr img { width: 260px; height: 260px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
.wx-qr-fallback {
  width: 260px; height: 260px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--muted); font-size: 13px; text-align: center; padding: var(--s3);
}

.warn { display: block; font-size: 12px; color: var(--danger); margin-top: 3px; }
.warn:empty { display: none; }

/* 生成选项条 */
.options {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0; border-top: 1px dashed var(--line-strong); margin-top: var(--s1);
}
.opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.opt select { width: auto; padding: 5px 8px; font-size: 12.5px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.chk input { width: auto; flex: 0 0 auto; accent-color: var(--amber); }
/* 弹窗/表单的 input 宽度规则会覆盖勾选框，需提高优先级保证 checkbox 不被撑开 */
.modal-box .chk input { width: auto; flex: 0 0 auto; }

.actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
/* 弹窗内：勾选项与操作按钮右对齐（符合中文弹窗习惯） */
.modal-box .actions { justify-content: flex-end; }
.modal-box .chk { justify-content: flex-end; }
.toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.status { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.status.error { color: var(--danger); font-weight: 600; }

/* ===== 试用横幅 ===== */
.trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-bottom: var(--s3); padding: 8px 12px;
  background: var(--amber-soft); border: 1px solid #f5cba7; border-radius: var(--radius);
  font-size: 12.5px; color: var(--amber-deep);
}
.trial-banner[hidden] { display: none; }
.trial-banner button { flex: 0 0 auto; }

/* ===== 生成反馈条 ===== */
.feedback {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s2) 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--paper);
}
.feedback[hidden] { display: none; }
.feedback .fb-ask { font-size: 12.5px; color: var(--muted); }
.feedback input {
  width: 200px; padding: 4px 8px; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-family: inherit;
}
.feedback input:focus { outline: none; border-color: var(--amber); }
.feedback .mini.primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.feedback .mini.primary:hover { background: var(--amber-deep); }

/* ===== 右栏编辑器 ===== */
.editor-card { min-width: 0; }

/* 生成进度条（签名元素之一） */
.gen-progress {
  height: 3px; margin: var(--s2) 0 0;
  background: var(--line);
  border-radius: 999px; overflow: hidden;
}
.gen-progress::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--amber);
  border-radius: 999px;
  animation: gen-slide 1.1s ease-in-out infinite;
}
@keyframes gen-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .gen-progress::after { animation: none; width: 100%; }
}

/* 分区卡（商品标签式） */
.section {
  margin-bottom: var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3);
  background: var(--surface);
  transition: border-color .12s;
}
.section:focus-within { border-color: var(--line-strong); }
.sec-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.sec-name { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }
.sec-name::before { content: ""; display: inline-block; width: 3px; height: 12px; background: var(--amber); border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sec-head .spacer { flex: 1; }
.sec-head .count {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px;
}
.sec-head .count.over { color: var(--danger); background: #fef2f2; border-color: #fecaca; font-weight: 700; }

/* ===== 高亮覆盖层 ===== */
.hl-wrap { position: relative; }
.hl-back {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink);
}
.hl-wrap .hl-ta {
  position: relative; z-index: 2;
  background: transparent !important; color: transparent !important; caret-color: var(--ink);
  border-color: var(--line-strong);
}
.hl-wrap .hl-ta:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }
.hl-wrap .hl-ta::selection { background: rgba(232, 89, 12, .22); }
.hl-back mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.hl-back b.lead { color: var(--amber-deep); font-weight: 700; }

/* ===== 编辑器 textarea（与 hl 层一致）===== */
.editor {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; line-height: 1.6;
  color: var(--ink); background: var(--surface); resize: vertical;
}
.editor.bullets { white-space: pre-wrap; word-break: break-word; }

.issues {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
  border-radius: var(--radius); padding: 9px 12px; font-size: 12.5px; margin-bottom: var(--s3);
  white-space: pre-wrap; line-height: 1.5;
}

/* ===== 草稿列表 ===== */
.draft-list {
  margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2); max-height: 200px; overflow: auto;
  background: var(--surface);
}
.draft-item { display: flex; align-items: center; gap: var(--s2); padding: 5px 4px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.draft-item:last-child { border-bottom: none; }
.draft-item .d-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.draft-item .d-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.draft-item button { padding: 2px 8px; font-size: 11px; }

/* ===== 弹窗 ===== */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(31, 35, 40, .5);
  display: flex; align-items: center; justify-content: center; padding: var(--s4);
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(31, 35, 40, .18);
  padding: var(--s5); width: 100%; max-width: 760px; max-height: 88vh; overflow: auto;
  border: 1px solid var(--line);
}
.modal-box h3 { font-size: 15px; margin-bottom: 4px; }
.modal-box label { display: block; font-size: 12.5px; font-weight: 600; margin: var(--s3) 0 4px; color: var(--ink-soft); }
.modal-box input, .modal-box textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; line-height: 1.6; resize: vertical;
}
.modal-box input:focus, .modal-box textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }

/* 登录/注册页签 */
.auth-box { max-width: 380px; }
.auth-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.auth-tabs .tab {
  flex: 1; padding: 7px 0; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--muted);
}
.auth-tabs .tab.active { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }

/* 我的标准（profile） */
.profile-box { max-width: 560px; }

/* 标准摘要卡（签名元素） */
.pf-summary {
  margin: var(--s3) 0;
  padding: 10px 12px;
  background: var(--amber-soft);
  border: 1px solid #f5cba7;
  border-radius: var(--radius);
  color: var(--amber-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 20px;
}
.pf-summary.has { border-color: var(--amber); }
.pf-summary:empty::before { content: ""; }

/* 分组 */
.pf-group { margin-bottom: var(--s4); }
.pf-group-head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2); padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.pf-group-head.pf-collapse { cursor: pointer; user-select: none; }
.pf-group-name { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pf-group-tip { font-size: 11.5px; color: var(--muted); }
.pf-chev { margin-left: auto; color: var(--muted); font-size: 11px; }
.pf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 480px) { .pf-row-2 { grid-template-columns: 1fr; } }

/* 自定义下拉（类目/品牌调性） */
.dd { position: relative; }
.dd-native { display: none; }
.dd-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-family: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.dd-btn:hover { border-color: var(--ink-soft); }
.dd-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.dd-btn .dd-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-btn .dd-chev {
  color: var(--muted); font-size: 11px;
  transition: transform .15s;
}
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 35, 40, .12);
  padding: 4px;
}
.dd-opt {
  padding: 7px 10px; font-size: 13px; cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dd-opt:hover { background: var(--amber-soft); }
.dd-opt.selected { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.dd-opt.selected::after { content: "✓"; font-weight: 700; }

/* 词库 chip 输入 */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
  min-height: 36px;
}
.chip-input:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--amber-soft); color: var(--amber-deep);
  border: 1px solid #f5cba7; border-radius: 999px;
  font-size: 12px;
}
.chip button {
  border: none; background: transparent; color: var(--amber-deep);
  font-size: 13px; line-height: 1; padding: 0 2px; cursor: pointer;
}
.chip button:hover { color: var(--danger); }

/* 已学习规则 */
.pf-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.pf-learned-list { display: flex; flex-direction: column; gap: 6px; }
.pf-rule {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12.5px;
}
.pf-rule span:first-child { flex: 1; }
.pf-rule .pf-rule-src {
  flex: 0 0 auto;
  font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 7px;
}
.pf-rule button {
  padding: 1px 8px; font-size: 12px; color: var(--muted);
  background: transparent; border-color: transparent;
}
.pf-rule button:hover { color: var(--danger); }
.pf-learned-empty { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
.pf-memory { margin: var(--s2) 0 var(--s1); }

/* 新旧对比 */
.old-new { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
@media (max-width: 640px) { .old-new { grid-template-columns: 1fr; } }
.on-col { min-width: 0; }
.on-label { font-size: 12px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 4px; }
.on-body {
  min-height: 60px; padding: var(--s2) 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: var(--paper);
}
.on-body:empty::before { content: "—"; color: var(--line-strong); }

/* ===== 历史列表 ===== */
.history-list { max-height: 55vh; overflow: auto; margin-top: var(--s3); }
.history-item {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) 10px; margin-bottom: var(--s2);
}
.history-item .h-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.history-item .h-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.history-item .h-meta { font-size: 11px; color: #a8a29e; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.history-item .h-ops { display: flex; gap: var(--s2); }
.history-item .h-ops button { padding: 2px 10px; font-size: 11px; }
.history-empty { padding: var(--s5) 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ===== Footer ===== */
.footer { text-align: center; padding: var(--s4) 0 var(--s6); font-size: 12px; color: var(--muted); }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--amber-deep); }

/* ===== 响应式（320 / 768）===== */
@media (max-width: 640px) {
  .topbar { padding: var(--s2) var(--s3); }
  .layout { margin: var(--s3) auto var(--s4); padding: 0 var(--s2); gap: var(--s3); }
  .card { padding: var(--s4); }
  .brand .tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}