/* ============================================================
   产品选型报价工具 — Design System
   ------------------------------------------------------------
   黑白灰极简 + 单一亮绿强调色。字体分三层：
     Fustat            标题（大字号、紧字距）
     Schibsted Grotesk 界面（导航、按钮、标签）
     Inter / Noto Sans 正文与数据（含中文 Noto Sans SC）
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- tokens: dark (default) ----------
   暗色底取自设计稿的深色徽章 #0e1311（近黑、微偏绿），
   与亮绿强调色同源，不会像纯黑那样把绿色衬得发荧光。 */
:root {
  --bg:            #0e1311;
  --bg-sidebar:    #0a0e0d;
  --bg-panel:      #141a18;
  --bg-elevated:   #1a2220;
  --bg-hover:      rgba(255,255,255,.06);
  --bg-active:     rgba(255,255,255,.11);
  --bg-input:      #131917;

  --border:        rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.22);

  --text:          #ffffff;
  --text-2:        #b4bcb8;
  --text-3:        #848d89;

  /* 强调色即前景色本身：暗底用白，亮底用黑（见 light）。
     设计稿里主按钮就是纯黑填充 + 白字，反过来即可。 */
  --accent:        #ffffff;
  --accent-hover:  #e6e6e6;
  --accent-text:   #0e1311;
  --accent-soft:   rgba(255,255,255,.10);
  --accent-line:   rgba(255,255,255,.34);
  --accent-grad:   rgba(90,225,76,.89);

  /* 设计稿唯一的彩色：Upgrade 按钮的亮绿 */
  --brand-green:   rgba(90,225,76,.89);
  --green:         rgba(90,225,76,.89);
  --green-soft:    rgba(90,225,76,.15);
  --amber:         #ffd569;
  --amber-soft:    rgba(255,213,105,.15);
  --red:           #ff7a7a;
  --red-soft:      rgba(255,122,122,.15);
  --blue:          #6cb6ff;
  --blue-soft:     rgba(108,182,255,.15);

  /* 圆角对齐设计稿：搜索框 18、输入框 12、小按钮 6 */
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,.38);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.58), 0 0 0 1px var(--border);

  --sidebar-w: 232px;
  --t: .12s cubic-bezier(.4,0,.2,1);

  --cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font:         "Inter", "Noto Sans", var(--cjk);
  --font-ui:      "Schibsted Grotesk", "Inter", var(--cjk);
  --font-display: "Fustat", "Schibsted Grotesk", var(--cjk);
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  color-scheme: dark;
}

/* ---------- tokens: light ----------
   设计稿本身是亮色：纯白底、纯黑字、#505050 次级文字、#f8f8f8 浅灰块。 */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-sidebar:    #f8f8f8;
  --bg-panel:      #ffffff;
  --bg-elevated:   #ffffff;
  --bg-hover:      rgba(0,0,0,.04);
  --bg-active:     rgba(0,0,0,.06);
  --bg-input:      #f8f8f8;

  --border:        rgba(0,0,0,.10);
  --border-strong: rgba(0,0,0,.20);

  --text:          #000000;
  --text-2:        #505050;      /* 设计稿的次级文字色，白底 7.7:1 */
  --text-3:        #767676;      /* 白底 4.5:1，再浅就过不了 WCAG AA */

  --accent:        #000000;
  --accent-hover:  #262626;
  --accent-text:   #ffffff;
  --accent-soft:   rgba(0,0,0,.05);
  --accent-line:   rgba(0,0,0,.28);
  --accent-grad:   rgba(90,225,76,.89);

  --brand-green:   rgba(90,225,76,.89);
  /* 亮绿在白底上做文字对比度不够（约 1.6:1），文字用深绿，填充仍用亮绿 */
  --green:         #1f8f3c;
  --green-soft:    rgba(90,225,76,.20);
  --amber:         #a5760a;
  --amber-soft:    rgba(200,150,20,.13);
  --red:           #c8322c;
  --red-soft:      rgba(200,50,44,.08);
  --blue:          #1f6fd0;
  --blue-soft:     rgba(31,111,208,.09);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.14), 0 0 0 1px var(--border);

  color-scheme: light;
}

/* ---------- base ---------- */
body {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}
h1, h2, h3 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.02em; }
.tab, .btn, .cat-chip, .admin-tab, .toolbar-label, .sb-section, th {
  font-family: var(--font-ui);
}
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 12px 8px 8px;
}
.sb-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; }
.sb-logo {
  width: 22px; height: 22px; border-radius: var(--r-sm); flex: none;
  background: linear-gradient(140deg, var(--accent), var(--accent-grad));
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.sb-brand-text { min-width: 0; }
.sb-brand-name { font-size: 12.5px; font-weight: 560; letter-spacing: -.01em; white-space: nowrap; }
.sb-brand-sub { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }

.cmdk-trigger {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-input); color: var(--text-3);
  font-size: 12.5px; transition: var(--t);
}
.cmdk-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.cmdk-trigger .kbd { margin-left: auto; }

.kbd {
  font-family: var(--font); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 1px 4px; background: var(--bg-hover); line-height: 1.4;
}

.sb-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.sb-section {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 8px 5px;
}
.sb-section:first-child { padding-top: 2px; }
/* nav items keep .tab / .admin-tab for JS compatibility */
.sidebar .tab, .sidebar .admin-tab, .sb-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: var(--r);
  color: var(--text-2); font-size: 13px; text-align: left;
  transition: background var(--t), color var(--t);
}
.sidebar .tab:hover, .sidebar .admin-tab:hover, .sb-item:hover { background: var(--bg-hover); color: var(--text); }
.sidebar .tab.active, .sidebar .admin-tab.active, .sb-item.active { background: var(--bg-active); color: var(--text); font-weight: 510; }
/* 图标槽：内容是 logo.js 注入的 24×24 SVG，尺寸由 font-size 控制（svg 是 1em），
   所以同一个类在侧栏 15px、图标栏 19px、手机底栏 20px 下都不用改结构 */
.sb-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; font-size: 15px; flex: none; color: inherit;
}
.ui-icon { width: 1em; height: 1em; display: block; overflow: visible; }
.sidebar .tab .sb-ico { opacity: .8; }
.sidebar .tab:hover .sb-ico, .sidebar .tab.active .sb-ico { opacity: 1; }
/* 顶栏按钮里的图标跟文字并排，别顶到基线上方 */
.topbar-actions .sb-ico { font-size: 15px; margin-right: -1px; }
.sb-count { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.sb-foot { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.sb-meta { font-size: 10.5px; color: var(--text-3); padding: 4px 8px 6px; }

/* user card */
.user-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r); transition: var(--t); width: 100%; }
.user-card:hover { background: var(--bg-hover); }
.avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--accent), var(--accent-grad));
  display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 600;
}
.user-info { min-width: 0; flex: 1; text-align: left; }
.user-name { font-size: 12.5px; font-weight: 510; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.user-card .plan-badge { flex: none; }
.sb-actions { display: flex; gap: 4px; padding: 2px 4px 0; }
.sb-actions .btn { flex: 1; justify-content: center; }

/* ---------- main area ---------- */
/* min-height:0 不是可有可无：手机上 .app 变成纵向 flex，弹性子项的自动最小尺寸
   等于内容高度，.main-wrap 会被内容顶到比屏幕还高，而 .app 是 overflow:hidden，
   于是 main 的滚动条永远出不来——首屏以下的内容直接够不着。 */
.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 46px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-bottom: 1px solid var(--border);
  background: var(--bg); position: relative; z-index: 5;
}
.page-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.page-sub { font-size: 12.5px; color: var(--text-3); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

main { flex: 1; overflow-y: auto; padding: 18px; }
.panel { display: none; max-width: 1600px; margin: 0 auto; }
.panel.active { display: block; animation: fade .16s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ============================================================
   COMPONENTS
   ============================================================ */
.card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { font-size: 14.5px; font-weight: 600; }
.hint { color: var(--text-3); font-size: 12.5px; }
.hint code {
  font-family: var(--mono); font-size: 11px; background: var(--bg-hover);
  padding: 1px 5px; border-radius: var(--r-xs); color: var(--text-2);
}
.summary { color: var(--text-2); font-size: 13px; margin: 10px 0; }
.summary b { color: var(--text); font-weight: 560; }
.spacer { flex: 1; }
.empty-tip { color: var(--text-3); text-align: center; padding: 52px 20px; font-size: 12.5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-elevated); color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background var(--t), border-color var(--t), opacity var(--t);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
/* accent 是"正向动作"按钮（AI、加入报价单、分享、生成合同）。
   用设计稿里唯一的彩色——亮绿实底 + 近黑文字，和 Hero 的免费试用按钮同款。 */
.btn.accent {
  background: var(--brand-green); border-color: transparent; color: #0e1311; font-weight: 560;
}
.btn.accent:hover:not(:disabled) { filter: brightness(1.07); border-color: transparent; background: var(--brand-green); }
.btn.danger { color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); border-color: transparent; }
.btn.small { height: 23px; padding: 0 8px; font-size: 11.5px; border-radius: var(--r-sm); }
.btn.block { width: 100%; justify-content: center; }
.icon-btn {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--text-3); font-size: 12px; transition: var(--t);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--red); }
.btn-row { display: flex; align-items: center; gap: 7px; margin: 12px 0; flex-wrap: wrap; }

/* ---------- inputs ---------- */
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 13px;
  padding: 7px 10px; transition: border-color var(--t), box-shadow var(--t);
  font-family: inherit;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea {
  width: 100%; min-height: 118px; resize: vertical;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; padding: 10px 11px;
}
select { cursor: pointer; padding-right: 26px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a8f98' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.sel { max-width: 260px; }
.num-input { width: 68px; }
.kw-input { flex: 1; min-width: 180px; }
.inline-label { color: var(--text-2); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }

/* ---------- tables ---------- */
.table-wrap {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-panel);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.data-table th {
  background: var(--bg-panel); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  text-align: left; padding: 9px 12px; position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--border-strong);
}
.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t); }
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table .mlfb { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; letter-spacing: -.2px; }
.data-table .desc { white-space: normal; min-width: 240px; max-width: 400px; line-height: 1.55; color: var(--text-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .price { color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }
.data-table tr.err td { background: var(--red-soft); }
.data-table tr.warn td { background: var(--amber-soft); }
.err-text { color: var(--red); font-weight: 500; }
.qty-cell input, .sd-cell input { width: 56px; padding: 3px 6px; text-align: right; font-size: 12px; }
.sd-cell input { width: 58px; }
.remark-input { width: 120px; padding: 3px 6px; font-size: 12px; }

/* ---------- tags / badges ---------- */
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 10.5px; font-weight: 500; background: var(--bg-active); color: var(--text-2);
  border: 1px solid var(--border);
}
.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 20px;
  background: var(--bg-active); color: var(--text-2); border: 1px solid var(--border);
  white-space: nowrap; flex: none;      /* 否则窄侧栏里「草稿」会被拆成两行 */
}

/* ---------- 多品牌 ---------- */
.brand-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  max-height: 92px; overflow-y: auto;
}
/* 品牌角标：跟在订货号后面，不抢戏但一眼能分辨 */
.brand-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 10px; font-weight: 500; line-height: 16px;
  background: var(--bg-active); color: var(--text-2); border: 1px solid var(--border);
  vertical-align: 1px; white-space: nowrap;
}
/* 套装：多件组合装，面价对应整套。跟单件的订货号往往只差两位，
   必须比 brand-tag 更抢眼，否则十几万的报价错误就这么过去了 */
.kit-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600; line-height: 16px;
  background: var(--warn-bg, #fff4e5); color: var(--warn-fg, #a35200);
  border: 1px solid var(--warn-border, #f0c896);
  vertical-align: 1px; white-space: nowrap; cursor: help;
}
:root[data-theme="dark"] .kit-tag {
  background: #40280d; color: #ffc078; border-color: #6b4415;
}
/* 候选按钮里的 `.cand span` 有 ellipsis + max-width，会把角标截成「套…」，
   角标必须整个显示出来才有意义 */
.cand .kit-tag, .cand .brand-tag { flex: none; overflow: visible; max-width: none; }
/* 该号是别的套装的组件 —— 提示另有整套卖法 */
.kit-note {
  display: block; font-size: 10px; color: var(--text-3); font-weight: 400;
  margin-top: 1px; white-space: nowrap;
  border-bottom: 1px dashed var(--text-3); cursor: help; width: fit-content;
}
/* 按型号兜底命中：显示出来的订货号和用户输入的不是一回事，要说明 */
.match-note {
  display: block; font-size: 10px; color: var(--text-3); font-weight: 400;
  margin-top: 1px; white-space: nowrap;
}
/* 标扣来自品牌默认值而非产品数据 —— 虚线下划线 + 上标「默」 */
.disc-default { border-bottom: 1px dashed var(--text-3); cursor: help; }
.disc-default sup {
  font-size: 8.5px; margin-left: 1px; color: var(--text-3); font-weight: 500;
}

/* ---------- 报价输出弹窗 ---------- */
.qo-modes { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.qo-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.qo-modes .cat-chip:disabled { opacity: .4; cursor: not-allowed; }
.qo-modes .cat-chip:disabled:hover { border-color: var(--border); color: var(--text-3); }
.qo-fields {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg-active); border: 1px solid var(--border); border-radius: 7px;
}
.qo-chk {
  display: inline-flex !important; flex-direction: row !important; align-items: center;
  gap: 5px; margin: 0 !important; font-size: 11.5px; color: var(--text-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.qo-chk input { margin: 0; cursor: pointer; }
.qo-total {
  display: flex; align-items: baseline; margin-bottom: 8px;
  font-size: 12.5px; color: var(--text-2);
}
.qo-total b { font-size: 16px; color: var(--accent); margin-left: 6px; font-variant-numeric: tabular-nums; }
#qo-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.6;
}
.status-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-dot.st-draft { color: var(--text-3); }
.status-dot.st-sent  { color: var(--blue); background: var(--blue-soft); border-color: transparent; }
.status-dot.st-won   { color: var(--green); background: var(--green-soft); border-color: transparent; }
.status-dot.st-lost  { color: var(--red); background: var(--red-soft); border-color: transparent; }
.plan-badge {
  font-size: 10px; font-weight: 560; padding: 1.5px 7px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad)); color: #fff; letter-spacing: .01em;
}
.plan-badge.free { background: var(--bg-active); color: var(--text-3); border: 1px solid var(--border); }
.sub-mlfb { font-family: var(--mono); font-size: 11px; }
.sub-btn { margin-left: 5px; }

/* ---------- loading / toast ---------- */
.loading-mask { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: grid; place-items: center; }
.loading-box { text-align: center; color: var(--text-3); font-size: 12.5px; }
.spinner {
  width: 22px; height: 22px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%;
  margin: 0 auto 12px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; bottom: 22px; left: 50%; z-index: 300;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  padding: 9px 16px; border-radius: var(--r-md); font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.cmdk-mask {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  display: flex; justify-content: center; padding-top: 14vh;
  animation: fade .1s ease;
}
:root[data-theme="light"] .cmdk-mask { background: rgba(10,12,20,.28); }
.cmdk {
  width: 580px; max-width: 92vw; max-height: 62vh;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pop .13s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pop { from { opacity: 0; transform: scale(.975) translateY(-6px); } to { opacity: 1; transform: none; } }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.cmdk-input-row .ico { color: var(--text-3); font-size: 14px; }
#cmdk-input {
  flex: 1; background: none; border: none; outline: none; box-shadow: none;
  font-size: 14px; padding: 0; color: var(--text);
}
#cmdk-input:focus { box-shadow: none; border: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 10.5px; font-weight: 550; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 9px 4px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: var(--r); color: var(--text-2);
  font-size: 12.5px; text-align: left; transition: background var(--t);
}
.cmdk-item .ci-ico { width: 16px; text-align: center; flex: none; opacity: .8; }
.cmdk-item .ci-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; overflow: hidden; }
.cmdk-item .ci-title { color: var(--text); white-space: nowrap; flex: none; }
.cmdk-item .ci-title.mlfb { font-family: var(--mono); font-size: 12px; }
.cmdk-item .ci-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cmdk-item .ci-right { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.cmdk-item.sel { background: var(--accent-soft); }
.cmdk-item.sel .ci-title { color: var(--text); }
.cmdk-foot {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3);
}
.cmdk-foot .kbd { margin-right: 3px; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-mask {
  position: fixed; inset: 0; z-index: 240; padding: 20px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fade .1s ease;
}
:root[data-theme="light"] .modal-mask { background: rgba(10,12,20,.28); }
.modal {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 420px; max-width: 96vw; max-height: 90vh; overflow-y: auto;
  padding: 18px 20px 16px; animation: pop .13s cubic-bezier(.2,.9,.3,1.1);
}
.modal.wide { width: 780px; }
.modal h3 { font-size: 14px; font-weight: 560; margin-bottom: 14px; }
.modal label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-2); margin-bottom: 11px; }
/* 复选框那种「勾 + 一句话」的 label 是横着的，别被上面这条掰成两行 */
.modal .inline-label { flex-direction: row; align-items: center; margin-bottom: 0; font-size: 12px; }
.modal-ta { min-height: 130px; }
.modal-ta.tall { min-height: 300px; }

/* ---------- auth ---------- */
.auth-tabs { display: flex; gap: 2px; margin-bottom: 15px; border-bottom: 1px solid var(--border); }
.auth-tab { padding: 7px 12px; font-size: 12.5px; color: var(--text-3); border-bottom: 1.5px solid transparent; margin-bottom: -1px; transition: var(--t); }
.auth-tab:hover { color: var(--text-2); }
.auth-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 510; }
.auth-sep { text-align: center; color: var(--text-3); margin: 14px 0 10px; font-size: 11px; position: relative; }
.auth-sep::before, .auth-sep::after { content: ""; position: absolute; top: 50%; width: calc(50% - 20px); height: 1px; background: var(--border); }
.auth-sep::before { left: 0; } .auth-sep::after { right: 0; }
.wechat-btn { background: #07c160; border-color: #07c160; color: #fff; }
.wechat-btn:hover:not(:disabled) { background: #06ad56 !important; border-color: #06ad56 !important; color: #fff; }
.reg-mode { display: flex; gap: 16px; margin: 2px 0 11px; }
.profile-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; font-size: 12.5px; }
.profile-box > div { display: flex; gap: 10px; padding: 2px 0; }
.profile-box .hint { width: 72px; flex: none; }

/* ============================================================
   FEATURE: 价格查询
   ============================================================ */
/* 左边贴文本、右边扔文件，两条路进同一个解析流程 */
.query-io { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 12px; align-items: stretch; }
.query-io textarea { height: 100%; min-height: 152px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 14px 12px; min-height: 152px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-input); cursor: pointer; transition: var(--t);
}
.dropzone:hover { border-color: var(--accent-line); background: var(--bg-hover); }
.dropzone:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--border); }
.dz-icon { font-size: 19px; line-height: 1; color: var(--text-2); }
.dz-title { font-size: 12.5px; font-weight: 550; color: var(--text); }
.dz-sub { font-size: 11px; color: var(--text-3); line-height: 1.7; }
.dz-sub u { text-decoration: none; color: var(--text-2); border-bottom: 1px solid var(--accent-line); }
.dz-files { width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 88px; overflow-y: auto; }
.dz-files:empty { display: none; }
.dz-files li {
  display: flex; align-items: center; gap: 6px; padding: 4px 7px;
  border-radius: var(--r-sm); background: var(--bg-elevated); font-size: 11px;
}
.dz-file-name { flex: 1; min-width: 0; text-align: left; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-file-x { flex: none; color: var(--text-3); font-size: 13px; line-height: 1; padding: 0 2px; }
.dz-file-x:hover { color: var(--red); }
@media (max-width: 900px) {
  .query-io { grid-template-columns: 1fr; }
  .dropzone { min-height: 108px; }
}

/* 查询汇总条。宽屏是一句话，手机上（见 RESPONSIVE）变成并排的数字块 */
.qsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.qsum:empty { display: none; }   /* 手机上它有边框，空着会留一条灰杠 */
.qsum .sm-i { display: inline-flex; align-items: baseline; gap: 6px; }
.qsum .sm-i i { font-style: normal; font-size: 12px; color: var(--text-3); }
.qsum .sm-i b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.qsum .is-err b { color: var(--red); }
.qsum .sm-total b { font-size: 15px; letter-spacing: -.02em; }

/* ============================================================
   结果卡片（手机）
   ------------------------------------------------------------
   查询结果与报价明细都是十几列的宽表，手机上只能左右拖，
   一行读不完也对不上是哪个号。窄屏改成一行一张卡片：
   订货号 → 描述 → 价格 三段竖排，次要字段收进「更多信息」。
   卡片与表格同时在 DOM 里，由断点决定谁出场（app.js 只渲染出场的那一边）。
   ============================================================ */
.rcards { display: none; }
.rcard {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-panel); padding: 12px 13px; margin-bottom: 9px;
}
.rcard:last-child { margin-bottom: 0; }
.rcard.is-warn { border-color: var(--amber); background: var(--amber-soft); }
.rcard.is-err  { border-color: var(--red);   background: var(--red-soft); }

.rc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-idx {
  flex: none; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--bg-active);
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.rc-code {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--text); letter-spacing: -.2px; word-break: break-all;
}
.rc-qty { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rc-del { flex: none; }
.rcard .match-note, .rcard .kit-note { white-space: normal; }
.rc-desc {
  margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-errline { margin-top: 6px; font-size: 12.5px; }

/* 价格三段：折后单价 · 数量 · 小计。小计推到最右，钱落在视线终点 */
.rc-price {
  display: flex; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.rc-p { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-p i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.rc-p b {
  font-size: 15px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.rc-p input { width: 72px; padding: 4px 8px; text-align: right; }
.rc-p-total { margin-left: auto; align-items: flex-end; text-align: right; }
.rc-p-total b { font-size: 17px; }
/* 可编辑（报价单）时数量和特扣是输入框，一行塞不下四段：
   小计单独占一行，标签靠左、金额靠右，别在半空中孤零零地飘着 */
.rc-price.is-edit .rc-p-total {
  flex-basis: 100%; flex-direction: row; align-items: baseline;
  justify-content: space-between; margin: 4px 0 0; padding-top: 9px;
  border-top: 1px solid var(--border); text-align: left;
}
.rc-basis { margin-top: 7px; font-size: 11.5px; color: var(--text-3); }

/* 库存 / PG / 部门 / 替代品：报价时八成用不上，默认折起来 */
.rc-more { margin-top: 9px; }
.rc-more summary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-3); cursor: pointer; list-style: none;
}
.rc-more summary::-webkit-details-marker { display: none; }
.rc-more summary::after { content: "▾"; font-size: 9px; }
.rc-more[open] summary::after { content: "▴"; }
.rc-more summary span { background: var(--bg-active); border-radius: 20px; padding: 0 6px; font-size: 10px; }
.rc-more dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 12px; margin-top: 9px; font-size: 12px; }
.rc-more dt { color: var(--text-3); white-space: nowrap; }
.rc-more dd { color: var(--text-2); min-width: 0; word-break: break-all; }

.rc-acts { display: flex; gap: 7px; margin-top: 11px; }
.rc-acts .btn { flex: 1; justify-content: center; }
.rcard .cand-row { margin-top: 8px; }
.rcard .cand { max-width: 100%; }
.rcard .cand span { max-width: 40vw; }

/* ============================================================
   FEATURE: 选型
   ============================================================ */
/* 品牌入口：选型页的第一步，横跨整页压在三栏之上 */
.brand-entry { margin-bottom: 14px; }
.brand-entry .card-head #brand-q { width: 168px; max-width: 40vw; }
.brand-entry .brand-row { max-height: 128px; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.brand-more-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.brand-more-row .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-nav-empty {
  margin-top: 4px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--r-md);
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}
.wiz-main .card-head .brand-tag { margin-left: 0; }

.sel-layout { display: grid; grid-template-columns: 214px minmax(0,1fr) 232px; gap: 14px; align-items: start; }
.wiz-nav ul { display: flex; flex-direction: column; gap: 1px; }
.wiz-nav-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: var(--r); font-size: 12.5px; color: var(--text-2);
  cursor: pointer; transition: var(--t);
  white-space: nowrap; overflow: hidden;
}
.wiz-nav-item:hover { background: var(--bg-hover); color: var(--text); }
.wiz-nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 510; }
.wn-ico { flex: none; width: 15px; text-align: center; }
.wn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-nav-item small { flex: none; margin-left: 4px; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.wiz-progress { flex: none; margin-left: 4px; background: var(--accent); color: #fff; border-radius: 20px; font-size: 10px; padding: 0 6px; font-weight: 550; }
.wiz-nav-sep { font-size: 10.5px; font-weight: 550; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 14px 8px 5px; border-top: 1px solid var(--border); margin-top: 10px; }

.wiz-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 14px; }
.wiz-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-panel);
  font-size: 11.5px; color: var(--text-3); transition: var(--t);
}
.wiz-chip:hover { border-color: var(--border-strong); }
.wiz-chip b { color: var(--text); font-weight: 550; }
.wc-idx { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-active); display: grid; place-items: center; font-size: 10px; flex: none; }
.wiz-chip.current { border-color: var(--accent-line); color: var(--text-2); background: var(--accent-soft); }
.wiz-chip.current .wc-idx { background: var(--accent); color: #fff; }
.wiz-chip.done .wc-idx { background: var(--green); color: #fff; }
.wiz-step-title { font-size: 12.5px; font-weight: 550; margin: 14px 0 9px; }
.wiz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px,1fr)); gap: 7px; }
.wiz-opt {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel);
  font-size: 12.5px; color: var(--text); text-align: left; transition: var(--t);
}
.wiz-opt:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.wiz-opt small { color: var(--text-3); font-size: 11px; }
.wiz-opt.skip { border-style: dashed; color: var(--text-3); }
.wiz-acc-head { font-size: 12.5px; font-weight: 550; margin: 18px 0 7px; }
.wiz-acc { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 7px; padding: 8px 11px; }
.wiz-acc summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.wiz-acc summary:hover { color: var(--text); }
.wiz-acc[open] summary { margin-bottom: 8px; color: var(--text); }

/* 物料清单 */
.staging-panel { position: sticky; top: 0; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
#staging-list { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.staging-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 9px; margin-bottom: 6px; background: var(--bg-panel); }
.si-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.si-top .mlfb { font-family: var(--mono); font-size: 11px; color: var(--text); }
.si-desc { color: var(--text-3); font-size: 11px; margin: 3px 0 6px; line-height: 1.4; }
.si-bottom { display: flex; align-items: center; justify-content: space-between; }
.si-bottom input { width: 52px; padding: 2px 5px; text-align: right; font-size: 11.5px; }
.si-bottom .price { color: var(--text); font-weight: 550; font-size: 11.5px; }
.staging-foot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }
.cat-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-chip {
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-panel); font-size: 12px; color: var(--text-2); transition: var(--t);
}
.cat-chip:hover { border-color: var(--border-strong); color: var(--text); }
.cat-chip small { color: var(--text-3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 510; }
.cat-chip.active small { color: rgba(255,255,255,.7); }
.filter-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.example-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.example-chips .wiz-opt { flex-direction: row; align-items: center; font-size: 12px; padding: 5px 10px; }

/* ============================================================
   FEATURE: 报价单
   ============================================================ */
.quote-layout { display: grid; grid-template-columns: 214px minmax(0,1fr) 288px; gap: 14px; align-items: start; }

/* 常驻批量输入面板 */
.bulk-panel { position: sticky; top: 0; }
.bulk-panel textarea { min-height: 152px; font-size: 11.5px; line-height: 1.6; }
.qb-tip { margin-bottom: 8px; }
/* 另一条输入路径：虚线块贴在输入框下面，和「粘贴文本」并列而不是塞进按钮堆 */
.qb-file {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; padding: 9px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--r);
  background: var(--bg-input); color: var(--text-2);
  font-size: 12px; cursor: pointer; transition: var(--t);
}
.qb-file:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.qb-file-ico { font-size: 14px; line-height: 1; }
/* 设置项：标签靠左、数值靠右，和下面的动作用一条分隔线断开 */
.qb-sd-row {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-2);
}
.qb-sd-row .num-input { margin-left: auto; width: 78px; text-align: right; }
/* 次级动作等宽两列，别再是三种宽度排三行 */
.qb-minor { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.qb-minor .btn { width: 100%; justify-content: center; }
.qb-sum {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r);
  background: var(--green-soft); color: var(--green); font-size: 12px; line-height: 1.6;
}
.qb-sum b { font-weight: 600; }
.qb-bad {
  margin-top: 8px; padding: 9px 11px; border-radius: var(--r);
  background: var(--red-soft); font-size: 11.5px; line-height: 1.7; color: var(--text-2);
}
.qb-bad .qb-bad-list { font-family: var(--mono); font-size: 11px; color: var(--red); word-break: break-all; margin: 4px 0 7px; }
.qb-hint { margin-top: 9px; font-size: 11.5px; color: var(--text-3); }
.quote-list ul { display: flex; flex-direction: column; gap: 1px; }
.quote-list li { padding: 7px 9px; border-radius: var(--r); cursor: pointer; transition: var(--t); }
.quote-list li:hover { background: var(--bg-hover); }
.quote-list li.active { background: var(--accent-soft); }
.q-title { font-size: 12.5px; font-weight: 510; color: var(--text); display: flex; align-items: center; gap: 6px; }
.q-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { color: var(--text-3); font-size: 11px; margin-top: 2px; }
.quote-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.quote-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-3); }
.quote-fields input, .quote-fields select { width: 168px; }
.quote-total { text-align: right; font-size: 12.5px; color: var(--text-2); padding: 14px 4px 2px; }
.quote-total b { font-size: 18px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.num.neg { color: var(--red); }
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 4px; }
.toolbar-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }

/* ============================================================
   FEATURE: 团队 / 套餐
   ============================================================ */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 14px; }
.team-tab, .admin-tab, .seg-btn {
  padding: 5px 12px; border-radius: var(--r-sm); font-size: 12.5px;
  color: var(--text-2); transition: var(--t);
}
.team-tab:hover, .admin-tab:hover, .seg-btn:hover { color: var(--text); background: var(--bg-hover); }
.team-tab.active, .admin-tab.active, .seg-btn.active { background: var(--bg-active); color: var(--text); font-weight: 510; }

/* ---- 求购逐行录入 ---- */
.want-meta { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 10px; margin-bottom: 12px; }
.want-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.wrow {
  display: grid; gap: 8px; align-items: center; padding: 5px 0;
  grid-template-columns: 180px minmax(0,1fr) 96px 76px 84px 28px;
}
.wrow-head { padding: 0 0 6px; font-size: 11.5px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.wrow-head .num { text-align: right; }
.wrow .re-f.num { text-align: right; }
/* 匹配结果整行铺开放在型号下面，候选按钮才有地方站 */
.wr-hit {
  grid-column: 1 / -1; min-width: 0; font-size: 12px; color: var(--text-2);
  padding: 0 0 2px 2px; line-height: 1.5;
}
.wr-hit:empty { display: none; }
.wr-hit.miss { color: var(--text-3); }
.wr-hit .mlfb { font-family: var(--mono); font-size: 11.5px; }
.wr-cands { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.wr-cand {
  padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; color: var(--text-2); transition: var(--t);
}
.wr-cand:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 手机上一行六格塞不下，型号单独占一行，其余挤在下面一排 */
@media (max-width: 720px) {
  .want-meta { grid-template-columns: 1fr; }
  .wrow { grid-template-columns: 1fr 1fr 1fr !important; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .wrow .re-code { grid-column: 1 / -1; }
  .wrow-head { display: none; }
}

/* ---- 求购单据 ---- */
.worder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.worder {
  text-align: left; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--bg-panel); transition: var(--t);
}
.worder:hover { border-color: var(--accent); background: var(--accent-soft); }
.worder.off { opacity: .55; }
.worder-t { display: flex; align-items: center; gap: 6px; font-weight: 550; margin-bottom: 6px; }
.worder-t b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worder-codes {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px;
}
.worder-m { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); }
.worder-m b { font-variant-numeric: tabular-nums; color: var(--text); }
/* 建联过的单据要一眼区分开，否则在大厅里会重复点进去 */
.worder .tag.done { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.qr-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-box img { width: 148px; height: 148px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.wc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.wc-row:first-child { border-top: none; }
.wc-row .spacer { flex: 1; }
.invite-code {
  font-family: var(--mono); font-size: 13px; letter-spacing: 2px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  padding: 4px 11px; border-radius: var(--r); border: 1px solid var(--accent-line);
}
.plan-current { display: grid; grid-template-columns: 172px 1fr; gap: 20px; padding: 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 16px; align-items: start; }
.plan-current h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 3px 0; }
.quota-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.quota-item { font-size: 11.5px; color: var(--text-3); }
.quota-item b { color: var(--text); margin-left: 5px; font-variant-numeric: tabular-nums; }
.quota-bar { height: 3px; background: var(--bg-active); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.quota-bar div { height: 100%; background: var(--accent); border-radius: 2px; }
.feature-list { grid-column: 1 / -1; display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.feat { font-size: 11px; padding: 2px 9px; border-radius: 20px; }
.feat.on { background: var(--green-soft); color: var(--green); }
.feat.off { background: var(--bg-active); color: var(--text-3); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px,1fr)); gap: 12px; }
.plan-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px; background: var(--bg-panel); transition: var(--t); }
.plan-card:hover { border-color: var(--border-strong); }
.plan-card.current { border-color: var(--accent-line); background: var(--accent-soft); }
.plan-card h3 { font-size: 12.5px; font-weight: 550; color: var(--text-2); }
.plan-price { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 12px; }
.plan-price small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.plan-card ul { font-size: 11.5px; color: var(--text-2); margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.plan-card li.off { color: var(--text-3); opacity: .6; }
.order-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; margin: 11px 0; font-size: 12.5px; line-height: 1.9; }
.order-box code { font-family: var(--mono); background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: var(--r-xs); font-weight: 600; }

/* 分享记录 */
.share-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 9px; margin-bottom: 6px; background: var(--bg-panel); }
.share-item.revoked { opacity: .45; }
.share-item .s-title { font-size: 12px; font-weight: 510; color: var(--text); }
.share-item .si-bottom { gap: 5px; margin-top: 6px; justify-content: flex-start; }

/* ============================================================
   FEATURE: 管理后台
   ============================================================ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; }
.stat-num { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.heat-bar { width: 74px; height: 4px; background: var(--bg-active); border-radius: 2px; overflow: hidden; }
.heat-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), #e8a33c); border-radius: 2px; }
.upload-zone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 12.5px;
  transition: var(--t); background: var(--bg-panel);
}
.upload-zone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--text-2); }
.upload-zone .uz-ico { font-size: 26px; margin-bottom: 8px; opacity: .5; }
.analysis-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; margin: 12px 0; font-size: 12.5px; line-height: 1.8; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* ---------- AI ---------- */
.ai-result { min-height: 110px; }
.ai-text {
  white-space: pre-wrap; font-family: var(--font); font-size: 12.5px; line-height: 1.85;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 15px 17px; color: var(--text-2);
}
.ai-applied { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; margin-top: 11px; font-size: 12.5px; line-height: 1.9; }

/* ---------- 合同 ---------- */
.tpl-layout { display: grid; grid-template-columns: 176px 1fr; gap: 13px; }
.tpl-list select { width: 100%; padding: 4px; background-image: none; }
.ctr-form label { margin-bottom: 9px; }
#ctr-vars { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 8px; }
.contract-preview {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 26px;
  font-family: var(--font); font-size: 12.5px; line-height: 1.95;
  max-height: 54vh; overflow-y: auto; background: var(--bg-panel); color: var(--text-2);
}
.contract-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 11.5px; }
.contract-table th, .contract-table td { border: 1px solid var(--border-strong); padding: 5px 8px; }
.contract-table th { color: var(--text-3); font-weight: 550; }

/* ============================================================
   分享页（客户视角）
   ============================================================ */
.share-body { display: block; background: var(--bg); }
.share-topbar {
  height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 22px; border-bottom: 1px solid var(--border);
}
.share-main { max-width: 880px; margin: 0 auto; padding: 26px 20px 60px; }
.share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.share-head h1 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.share-actions { display: flex; gap: 7px; }
.share-foot { text-align: center; padding: 18px; color: var(--text-3); font-size: 11.5px; }
.confirmed-badge {
  margin-top: 16px; padding: 11px; border-radius: var(--r-md); text-align: center;
  background: var(--green-soft); color: var(--green); font-weight: 550; font-size: 12.5px;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar, .topbar, .toast, .btn-row, .toolbar, .share-actions, .share-topbar,
  .quote-list, .cmdk-mask, .modal-mask { display: none !important; }
  /* 打印永远走表格：手机上打印时纸张宽度会命中 740px 断点，
     不强制回来的话打出去的是一叠卡片，而不是客户要的明细表 */
  .rcards { display: none !important; }
  .table-wrap { display: block !important; }
  .app { display: block; height: auto; }
  main { overflow: visible; padding: 0; }
  .quote-layout, .sel-layout { display: block; }
  .card, .table-wrap { border: none; background: #fff; padding: 0; }
  body, :root { background: #fff !important; color: #000 !important; }
  .data-table { white-space: normal; font-size: 10.5px; color: #000; }
  .data-table th, .data-table td { border-bottom: 1px solid #ddd; color: #000; }
  #print-header { display: block !important; }
}
#print-header { display: none; margin-bottom: 14px; }
#print-header h1 { font-size: 18px; }
#print-header .ph-meta { color: #444; font-size: 11.5px; margin-top: 5px; }

/* 系统设置 */
.cfg-section { border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px 16px; margin-bottom: 14px; background: var(--bg-panel); }
.cfg-section h3 { font-size: 13px; font-weight: 560; display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.cfg-desc { font-size: 11.5px; color: var(--text-3); margin-bottom: 13px; line-height: 1.6; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 11px 14px; }
.cfg-field { display: flex; flex-direction: column; gap: 5px; }
.cfg-field label { font-size: 11.5px; color: var(--text-2); }
.cfg-field .hint { font-size: 10.5px; }
.cfg-status { font-size: 11px; padding: 1.5px 8px; border-radius: 20px; font-weight: 500; }
.cfg-status.on { background: var(--green-soft); color: var(--green); }
.cfg-status.off { background: var(--bg-active); color: var(--text-3); }
.cfg-test-result { margin-top: 10px; font-size: 12px; }

/* ============================================================
   模糊匹配候选
   ============================================================ */
.cand-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.cand-label { font-size: 10.5px; color: var(--text-3); }
.cand {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-panel); font-size: 11px; transition: var(--t); text-align: left;
}
.cand:hover { border-color: var(--accent); background: var(--accent-soft); }
.cand b { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 550; }
.cand span { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.cand em { color: var(--text-2); font-style: normal; font-variant-numeric: tabular-nums; }
.cand i { font-style: normal; color: var(--accent); font-size: 10px; opacity: .85; }

.qb-bad-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.qb-bad-item:first-of-type { border-top: none; padding-top: 4px; }
.qb-bad-mlfb { font-family: var(--mono); font-size: 11.5px; color: var(--red); }
.qb-bad-item .cand-row { margin-top: 5px; }
.qb-bad-item .cand { width: 100%; }
.qb-bad-item .cand span { max-width: 100px; }

.cand-list { display: flex; flex-direction: column; gap: 5px; }
.cand-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-panel); transition: var(--t); text-align: left;
}
.cand-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.cand-item .ci-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cand-item .ci-l .mlfb { font-family: var(--mono); font-size: 12px; }
.cand-item .ci-l .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-item .ci-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.cand-item .ci-r i { font-style: normal; font-size: 10.5px; color: var(--accent); }

/* ============================================================
   登录门禁（未登录不可使用）
   ============================================================ */
/* 只在"没有 Hero"的降级形态下才把登录卡居中；
   带 .hero 时整个容器是落地页，必须铺满，否则 ID 优先级会把壳子挤成内容宽。 */
#auth-gate:not(.hero) {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: grid; place-items: center; padding: 20px;
  overflow-y: auto;
}
#auth-gate:not(.hero)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(720px 420px at 50% -10%, rgba(0,168,150,.16), transparent 70%);
}
.gate-card {
  position: relative; width: 372px; max-width: 100%;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
  animation: pop .18s cubic-bezier(.2,.9,.3,1.1);
}
.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gate-title { font-size: 15px; font-weight: 570; letter-spacing: -.015em; }
.gate-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.gate-card .auth-tabs { margin-bottom: 16px; }
.gate-card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; color: var(--text-2); margin-bottom: 12px;
}
.gate-card .inline-label { flex-direction: row; align-items: center; margin-bottom: 0; }
.gate-card .btn.block { height: 32px; margin-top: 2px; }
.gate-card .err-text { font-size: 11.5px; margin-bottom: 8px; min-height: 1px; }
.gate-fatal {
  background: var(--red-soft); color: var(--text-2); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 12.5px; line-height: 1.8; text-align: center;
}
.gate-fatal code {
  display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-panel); padding: 3px 9px; border-radius: var(--r-xs); color: var(--text);
}

/* ============================================================
   未登录首屏 HERO（渐变背景）
   尺寸/字号/字距按设计稿，中文部分的字距做了放宽 —— 设计稿的
   -4.8px/-1.44px 是给拉丁字母调的，直接套到汉字上会挤成一团。
   ============================================================ */
/* 背景：一层柔和渐变 + 左上角一抹品牌绿。
   纯 CSS 实现，没有额外请求，也不受自动播放策略影响。 */
.hero {
  position: fixed; inset: 0; z-index: 500;
  overflow: hidden;
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 620px at 8% -12%,  rgba(90,225,76,.22), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,    rgba(0,0,0,.05),     transparent 60%),
    radial-gradient(760px 620px at 50% 108%,  rgba(90,225,76,.10), transparent 65%),
    linear-gradient(168deg, #ffffff 0%, #f6f8f5 44%, #eceff0 100%);
}
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(1100px 620px at 8% -12%,  rgba(90,225,76,.16), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,    rgba(255,255,255,.05), transparent 60%),
    radial-gradient(760px 620px at 50% 108%,  rgba(90,225,76,.08), transparent 65%),
    linear-gradient(168deg, #151d19 0%, #0e1311 52%, #090d0c 100%);
}
.hero-shell {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  overflow-y: auto;
}

/* ---------- 导航 ---------- */
.hero-nav {
  flex: none; display: flex; align-items: center; gap: 40px;
  padding: 16px 120px;
}
.hero-logo {
  font-family: var(--font-ui); font-weight: 600; font-size: 24px;
  letter-spacing: -.06em; color: var(--text); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.hero-logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-green); display: inline-block;
}
.hero-menu { display: flex; align-items: center; gap: 30px; margin-left: 12px; }
.hero-menu button {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px;
  letter-spacing: -.0125em; color: var(--text); white-space: nowrap;
  opacity: .86; transition: opacity var(--t);
}
.hero-menu button:hover { opacity: 1; }
.hero-caret { width: 14px; height: 14px; display: inline-flex; opacity: .7; }
.hero-caret svg { width: 100%; height: 100%; }
.hero-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hero-btn-ghost, .hero-btn-solid {
  height: 40px; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 500; font-size: 15px;
  letter-spacing: -.01em; transition: all var(--t);
}
.hero-btn-ghost { width: 82px; background: transparent; color: var(--text); }
.hero-btn-ghost:hover { background: var(--bg-active); }
.hero-btn-solid { width: 101px; background: var(--accent); color: var(--accent-text); }
.hero-btn-solid:hover { background: var(--accent-hover); }

/* ---------- 主体 ---------- */
.hero-content {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 44px;                 /* 标题组 → 搜索框 */
  padding: 60px 120px 40px;  /* 导航 → 内容 60px */
  margin-top: -50px;
}
.hero-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 34px; text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-panel); border-radius: 999px;
  padding: 5px 16px 5px 5px;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
  font-family: "Inter", var(--cjk); font-weight: 400; font-size: 14px; color: var(--text);
}
.hb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  /* 深色主题下徽章底色和卡片底色几乎一样，用强调色才分得开 */
  background: var(--accent); color: var(--accent-text); border-radius: 999px;
  padding: 3px 11px; font-size: 12.5px; font-weight: 500;
}
.hb-chip svg { width: 11px; height: 11px; }
.hb-text { color: var(--text); }
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 80px; line-height: 1; color: var(--text);
  letter-spacing: -.035em;   /* 汉字比拉丁需要更宽的字距，-4.8px 会粘连 */
  margin: 0;
}
.hero-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 1.55; letter-spacing: -.012em;
  color: var(--text-2); max-width: 736px; width: 620px;
}

/* ---------- 搜索框 ---------- */
/* 原先是压在照片上的磨砂面板（rgba(0,0,0,.24) + blur）。换成渐变底后
   底下没东西可糊，那个透明度会变成一块浅灰、白字对比度不足，
   所以改成实心深色面板 —— 在浅色渐变上反而是更强的视觉落点。 */
.hero-search {
  width: 100%; max-width: 728px; min-height: 200px;
  border-radius: 18px; padding: 14px;
  background: rgba(14,19,17,.92);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* 深色主题下底色本来就深，实心黑会糊成一片，改用提亮的玻璃面板 */
:root[data-theme="dark"] .hero-search {
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.14) inset;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hs-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: #fff;
}
.hs-top-l, .hs-top-r { display: flex; align-items: center; gap: 8px; }
.hs-top-r svg { width: 14px; height: 14px; }
.hs-upgrade {
  background: var(--brand-green); color: #0e1311;
  font-family: var(--font-ui); font-weight: 600; font-size: 11.5px;
  padding: 3px 10px; border-radius: 999px; transition: filter var(--t);
}
.hs-upgrade:hover { filter: brightness(1.08); }
.hs-input {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 8px 8px 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.hs-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 16px; color: #000; min-width: 0;
}
.hs-input input::placeholder { color: rgba(0,0,0,.6); }
.hs-send {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #000; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.hs-send:hover { background: #333; }
.hs-send svg { width: 17px; height: 17px; }
.hs-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hs-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-actions button {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.86); color: #333;
  border-radius: 6px; padding: 5px 10px;
  font-family: var(--font-ui); font-weight: 500; font-size: 12px;
  transition: background var(--t);
}
.hs-actions button:hover { background: #fff; }
.hs-actions svg { width: 13px; height: 13px; }
.hs-count { font-size: 12px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }

/* ---------- 登录卡浮层 ---------- */
.hero-auth {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.hero-auth[hidden] { display: none; }
.hero-auth .gate-card { animation: pop .18s cubic-bezier(.2,.9,.3,1.1); }
.hero-auth-close {
  position: absolute; top: 20px; right: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #000; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-auth-close:hover { background: #fff; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1080px) {
  .hero-nav { padding: 16px 40px; gap: 20px; }
  .hero-menu { display: none; }
  .hero-content { padding: 40px 40px 32px; gap: 32px; }
  .hero-title { font-size: 54px; letter-spacing: -.03em; }
  .hero-sub { width: auto; font-size: 17px; }
  .hero-header { gap: 22px; }
}
@media (max-width: 620px) {
  .hero-nav { padding: 14px 20px; }
  .hero-logo { font-size: 20px; }
  .hero-content { padding: 24px 20px; margin-top: -20px; }
  .hero-title { font-size: 38px; }
  .hero-search { min-height: 0; padding: 12px; }
  .hs-actions button span { display: none; }
}
.gate-note {
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 12px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--text-2);
}

/* ============================================================
   套餐页：计费周期 / 增值包
   ============================================================ */
.plan-cycle { display: flex; align-items: center; gap: 6px; margin: 16px 0 14px; flex-wrap: wrap; }
.plan-card.featured { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.plan-flag {
  position: absolute; top: 10px; right: 10px;
  background: var(--brand-green); color: #0e1311;
  font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}
.plan-card { position: relative; }
.plan-sub { font-size: 11.5px; color: var(--text-3); font-weight: 400; margin-top: 3px; }
.plan-desc { font-size: 12px; color: var(--text-2); margin: 6px 0 10px; line-height: 1.6; }
.trial-tag {
  display: inline-block; background: var(--green-soft); color: var(--green);
  border: 1px solid var(--green); border-radius: 999px;
  padding: 1px 10px; font-size: 11px; font-weight: 560;
}
.addon-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 10px; background: var(--bg-panel);
}
.addon-main { flex: 1; min-width: 0; }
.addon-card h3 { font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.addon-price { font-size: 15px; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.addon-card .plan-desc { margin: 4px 0 0; }
.optout-row { margin-top: 12px; font-size: 12px; color: var(--text-2); }
.buy-total {
  margin: 6px 0 12px; padding: 10px 12px; border-radius: var(--r);
  background: var(--bg-active); font-size: 13px;
}
.buy-total b { font-size: 17px; font-family: var(--font-display); }

/* ============================================================
   价格参考
   ============================================================ */
.row-acts { white-space: nowrap; }
.pr-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.pr-list { text-align: right; white-space: nowrap; }
.pr-list b { display: block; font-size: 17px; font-family: var(--font-display); }
.pr-block { margin-top: 18px; }
.pr-block h4 {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.pr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.pr-stats > div { background: var(--bg-panel); padding: 9px 12px; }
.pr-stats span { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.pr-stats b { font-size: 14.5px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.pr-stats b.pr-best { color: var(--green); }
.pr-empty {
  padding: 16px; border-radius: var(--r-lg); background: var(--bg-active);
  font-size: 12.5px; color: var(--text-2); line-height: 1.8;
}
.pr-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.pr-chart { width: 100%; height: 170px; display: block; }
.pr-grid { stroke: var(--border); stroke-width: 1; }
.pr-ylab, .pr-xlab { fill: var(--text-3); font-size: 10px; font-family: var(--font); }
.pr-ylab { text-anchor: end; }
.pr-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pr-area { fill: var(--accent-soft); stroke: none; }
.pr-dot { fill: var(--bg-panel); stroke: var(--accent); stroke-width: 2; }
.pr-table { margin-top: 4px; }
.pr-upsell { padding: 8px 2px; }
.pr-upsell h4 { font-size: 15px; margin-bottom: 8px; }
.pr-upsell p { font-size: 13px; color: var(--text-2); line-height: 1.8; margin-bottom: 10px; }
.pr-upsell ul { margin: 0 0 14px; padding-left: 2px; }
.pr-upsell li {
  font-size: 12.5px; color: var(--text-2); line-height: 2;
  padding-left: 18px; position: relative;
}
.pr-upsell li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; }
.pr-upsell-price {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
}
.pr-upsell-price small { font-size: 14px; font-weight: 500; color: var(--text-3); }
.plan-was {
  font-size: 15px; font-weight: 500; color: var(--text-3);
  text-decoration: line-through; margin-right: 8px;
}

/* ============================================================
   品牌标识 SAVE HMI
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text); min-width: 0; }
.logo-mark { flex: none; height: 1em; width: auto; color: inherit; }
.logo-word { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.logo-name {
  font-family: var(--font-ui); font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; display: inline-flex; align-items: flex-start;
}
/* 原标识里 SAVE 与 HMI 上下两行；横向排布时用一个细间隔替代换行 */
.logo-hmi { margin-left: .28em; }
.logo-name sup { font-size: .42em; line-height: 1; margin-left: .18em; font-weight: 500; }
.logo-sub {
  font-family: var(--font); font-size: .58em; font-weight: 400;
  color: var(--text-3); letter-spacing: 0; white-space: nowrap;
}

.logo-sm { font-size: 15px; }
.logo-sm .logo-mark { height: 15px; }
.logo-md { font-size: 19px; }
.logo-md .logo-mark { height: 19px; }
.logo-lg { font-size: 26px; }
.logo-lg .logo-mark { height: 26px; }

/* ============================================================
   首页落地版块（顶部菜单锚点）
   ============================================================ */
/* 首屏占满视口，下面的版块滚上来时盖住视频，保证正文可读 */
.hero-content { min-height: calc(100vh - 72px); }
.lp {
  position: relative; z-index: 2;
  background: var(--bg); color: var(--text);
  padding: 72px 120px;
  border-top: 1px solid var(--border);
}
.lp-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 40px; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px;
}
.lp-sub { font-size: 16px; color: var(--text-2); max-width: 640px; line-height: 1.7; }
.lp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 34px;
}
.lp-card {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 22px 24px; background: var(--bg-panel);
}
.lp-card h3 { font-size: 16px; margin-bottom: 8px; }
.lp-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.8; }

.lp-price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 34px;
}
.lp-price {
  position: relative; border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 26px 24px; background: var(--bg-panel);
}
.lp-price.featured { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.lp-flag {
  position: absolute; top: 14px; right: 14px;
  background: var(--brand-green); color: #0e1311;
  font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}
.lp-price h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.lp-tag {
  font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-active); color: var(--text-2); border: 1px solid var(--border);
}
.lp-amt {
  font-family: var(--font-display); font-weight: 700; font-size: 38px;
  letter-spacing: -.03em; margin: 12px 0 2px;
}
.lp-amt small { font-size: 15px; font-weight: 500; color: var(--text-3); }
.lp-note { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.lp-price ul { display: flex; flex-direction: column; gap: 7px; }
.lp-price li {
  font-size: 13px; color: var(--text-2); padding-left: 18px; position: relative; line-height: 1.6;
}
.lp-price li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; }
.lp-cta { margin-top: 28px; }

.lp-contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 28px;
}
.lp-contact > div {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; background: var(--bg-panel);
}
.lp-contact span { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; }
.lp-contact b { font-size: 13.5px; font-weight: 500; }
.lp-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
}

/* 汉堡菜单：窄屏才出现 */
.hero-burger { display: none; width: 40px; height: 40px; border-radius: 10px; }
.hero-burger span {
  display: block; width: 18px; height: 2px; margin: 3.5px auto;
  background: var(--text); border-radius: 2px; transition: var(--t);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 「更多」抽屉入口只属于手机底栏，其余断点一律不出现。
   选择器要带 .sidebar：它顶着 .tab 的样式，而 .sidebar .tab 那条设了 display:flex，
   单写 .m-more 权重不够，压不住。 */
.sidebar .m-more { display: none; }
@media (max-width: 1320px) {
  .quote-layout { grid-template-columns: 214px minmax(0,1fr); }
  .bulk-panel { grid-column: 1 / -1; position: static; }
  .bulk-panel textarea { min-height: 96px; }
}
@media (max-width: 1180px) {
  .sel-layout { grid-template-columns: 214px minmax(0,1fr); }
  .staging-panel { grid-column: 1 / -1; position: static; max-height: none; }
  .admin-2col { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  /* minmax(0,1fr)：单列下网格项的最小尺寸默认是 auto，
     报价明细表一宽就把整页撑出去，导致 body 横向滚动 */
  .quote-layout, .sel-layout { grid-template-columns: minmax(0, 1fr); }
  .wiz-nav, .quote-list { position: static; max-height: none; }
}

/* ---------- 平板：侧栏收成图标栏 ----------
   收窄后标签没了，光把 13px 的字符图标居中，就成了一列悬空的小点：
   看不清是什么，也点不准。图标栏要按图标栏的规矩来——
   每个入口是一个 44×44 的方块（触控最小尺寸），图标 19px，
   选中态是整块底色而不是一条细横杠，计数收成右上角的角标。
   标签靠 title 提示补上（HTML 里每个 .tab 都带 title）。 */
@media (max-width: 900px) and (min-width: 741px) {
  :root { --sidebar-w: 72px; }
  .sidebar { padding: 12px 10px 10px; align-items: center; }
  .sb-brand { justify-content: center; padding: 2px 0 14px; }
  .sb-brand .logo-word, .sb-section, .sb-meta, .sb-brand-sub { display: none; }
  .sb-brand .logo-mark { width: 26px; }

  /* 搜索也是一个同尺寸方块，不再是一条空荡荡的横槽 */
  .cmdk-trigger {
    width: 44px; height: 44px; padding: 0; margin-bottom: 12px;
    justify-content: center; border-radius: var(--r-md);
  }
  .cmdk-trigger span:not(:first-child) { display: none; }
  .cmdk-trigger .sb-ico { font-size: 19px; }

  .sb-nav { align-items: center; gap: 4px; }
  .sidebar .tab, .sidebar .admin-tab {
    position: relative; width: 44px; height: 44px;
    padding: 0; gap: 0; justify-content: center; border-radius: var(--r-md);
  }
  /* .admin-tab 也要一起收：后台侧栏用的是同一个骨架，
     漏掉它的话标签会留在 72px 的窄栏里折成三行 */
  .sidebar .tab span:not(.sb-ico), .sidebar .admin-tab span:not(.sb-ico) { display: none; }
  .sidebar .tab .sb-ico, .sidebar .admin-tab .sb-ico { width: auto; font-size: 19px; opacity: 1; }
  .sidebar .tab.active, .sidebar .admin-tab.active { background: var(--bg-active); color: var(--text); }
  /* 「← 返回前台」这类纯文字入口在窄栏里塞不下，压成小字 */
  .sb-foot .btn.block { font-size: 10.5px; padding: 0 2px; }

  /* 计数没有标签可依附，改挂右上角。
     选择器必须写成 span.sb-count：上面那条 span:not(.sb-ico) 的 display:none
     多带一个元素选择器，权重更高，写成 .sb-count 压不住它。 */
  .sidebar .tab span.sb-count, .sidebar .admin-tab span.sb-count {
    display: block; position: absolute; top: 4px; right: 4px; margin: 0;
    min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
    background: var(--accent); color: var(--accent-text);
    font-size: 9.5px; font-weight: 600; line-height: 15px; text-align: center;
  }
  .sidebar .tab span.sb-count:empty, .sidebar .admin-tab span.sb-count:empty { display: none; }

  .sb-foot { width: 100%; }
  .user-card { justify-content: center; padding: 6px 0; }
  .user-card .user-info, .user-card .plan-badge { display: none; }
  .user-card .avatar { width: 30px; height: 30px; font-size: 12.5px; }
  /* 「后台 / 退出登录」竖着摞，字号压到刚好塞得进 52px 的内容宽 */
  .sb-actions { flex-direction: column; gap: 5px; padding: 6px 0 0; }
  .sb-actions .btn { width: 100%; height: 26px; padding: 0 2px; font-size: 10.5px; }
}

/* ============================================================
   手机：侧栏变底部导航栏（拇指可达），品牌与账号移到顶栏
   ============================================================ */
@media (max-width: 740px) {
  .app { flex-direction: column; height: 100dvh; }

  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    width: 100%; height: auto; flex-direction: row; align-items: stretch; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    border-right: none; border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
  }
  .sb-brand, .cmdk-trigger, .sb-section, .sb-meta { display: none; }
  .sb-nav { flex-direction: row; flex: 1; gap: 0; padding: 0; overflow: visible; }

  /* 375px 宽最多塞得下 4 格。主入口留「查价 / 选型 / 报价单」，
     其余（我的发布、我在找、团队与客户、账号、通知…）收进「更多」抽屉，
     否则标签会折行并被底栏裁掉。 */
  .sidebar .tab[data-tab="listing"],
  .sidebar .tab[data-tab="want"],
  .sidebar .tab[data-tab="hist"],
  .sidebar .tab[data-tab="team"],
  .sb-foot { display: none; }
  .sidebar .m-more { display: flex; }
  .sidebar .tab {
    flex: 1; flex-direction: column; justify-content: center; gap: 2px;
    height: 54px; padding: 0; border-radius: 0; font-size: 10.5px;
  }
  .sidebar .tab .sb-ico { font-size: 21px; margin: 0; opacity: 1; }
  .sidebar .tab.active { background: transparent; color: var(--accent); font-weight: 600; }
  /* 角标要挂在各自的 tab 上；不加 relative 会以 fixed 的侧栏为基准，跑到别的格子里 */
  .sidebar .tab { position: relative; }
  .sb-count { position: absolute; top: 5px; left: 50%; margin-left: 6px; }
  /* 账号入口挪进「更多」抽屉，底栏不再单独占格 */
  .sb-actions { display: none; }

  .topbar {
    position: sticky; top: 0; z-index: 90;
    padding: 8px 14px; gap: 8px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .page-title { font-size: 14px; }
  .page-sub { display: none; }

  /* 顶栏只留通知（带角标，会有新消息）。反馈与主题在「更多」抽屉里同样能到，
     摆在顶栏只是把一行挤满。注意用 display:none 而不是删元素——
     抽屉里的条目是去 .click() 这两个按钮的。 */
  #btn-feedback, #theme-toggle { display: none; }

  main { padding: 12px 12px calc(66px + env(safe-area-inset-bottom)); }
  .card { padding: 14px; border-radius: var(--r-lg); }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head h2 { font-size: 14px; }
  /* 说明文字沉到最后一行：不然它夹在标题和按钮中间，把一行撑成三行 */
  .card-head .hint { order: 99; flex-basis: 100%; font-size: 11.5px; line-height: 1.5; }

  /* 结果表 → 卡片。表格留在 DOM 里但不出场，导出 / 打印仍然走它 */
  #tab-query .table-wrap, #quote-detail .table-wrap, #browse-panel .table-wrap { display: none; }
  .rcards { display: block; }
  /* 选型浏览的卡片一页 50 张，动作按钮挤在一行就好，不必个个撑满 */
  #sel-cards .rc-acts .btn { flex: 1; padding: 0 4px; }

  /* 其余还在用表格的页面：横向滚动 + 首列吸附，至少能对上是哪一行 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 7px 8px; }
  .data-table td.mlfb, .data-table th:nth-child(2) { position: sticky; left: 0; z-index: 2; }
  .data-table td.mlfb { background: var(--bg-panel); }
  .data-table th:nth-child(2) { background: var(--bg-panel); }

  /* 查询汇总：三块数字，合计单独占一行 */
  .qsum:not(:empty) {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin: 12px 0; background: var(--border);
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  }
  .qsum .sm-i {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 9px 11px; background: var(--bg-panel);
  }
  .qsum .sm-i i { font-size: 11px; }
  .qsum .sm-i b { font-size: 16px; letter-spacing: -.02em; }
  .qsum .sm-total { grid-column: 1 / -1; }
  .qsum .sm-total b { font-size: 20px; }

  /* 查询动作：六个按钮平铺会折成三排乱麻。
     查询 / 清空 常驻一行；四个输出动作没结果时整组不出现。 */
  .query-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
  .query-actions .spacer { display: none; }
  .query-actions .btn { width: 100%; justify-content: center; }
  #tab-query:not(.has-results) .qa-res { display: none; }
  #btn-query, #btn-query-clear { order: 0; }
  #btn-query-newquote { order: 1; grid-column: 1 / -1; }
  #btn-query-addall   { order: 2; grid-column: 1 / -1; }
  #btn-query-out      { order: 3; }
  #btn-query-export   { order: 4; }

  /* 文件区在手机上是「点一下选文件」，不需要占满一屏的拖放靶子 */
  .dropzone { min-height: 0; padding: 12px; gap: 4px; }
  .dz-icon { font-size: 16px; }
  .dz-sub br { display: none; }

  /* ---- 报价单页 ---- */
  /* 单列布局下报价单列表排在明细前面，整整吃掉一个首屏。压成一段可滚的短列表 */
  .quote-list ul { max-height: 172px; overflow-y: auto; }
  .quote-list #share-list { max-height: 136px; overflow-y: auto; }

  /* 抬头字段：名称整行，其余两列一排，168px 的固定宽度在手机上只会留白 */
  .quote-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .quote-fields label:first-child { grid-column: 1 / -1; }
  .quote-fields input, .quote-fields select { width: 100%; }
  /* 输入框 + 添加 占一行，spacer 撑满宽度把「删除报价单」顶到下一行，
     免得输入框被挤成 80px 只看得见「输入单个订」 */
  #q-add-mlfb { flex: 1; min-width: 0; }
  .quote-head .btn-row .spacer { flex-basis: 100%; }

  /* 输出工具条：九个按钮自由折行会排成三行乱麻，压成等宽网格 */
  .toolbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .toolbar .toolbar-label, .toolbar .spacer { display: none; }
  .toolbar .btn { width: 100%; justify-content: center; padding: 0 6px; }
  #btn-q-out { grid-column: 1 / -1; }

  /* 触控目标放大到 40px 以上 */
  .btn { height: 36px; padding: 0 14px; }
  .btn.small { height: 32px; padding: 0 11px; }
  .btn-row { gap: 8px; }
  input, select, textarea { font-size: 16px; }   /* iOS 聚焦时不再自动放大页面 */

  /* 弹窗接近全屏，长表单才有地方 */
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal, .modal.wide {
    width: 100%; max-width: 100%; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .qo-fields { max-height: 132px; overflow-y: auto; }
  .cmdk { width: 100%; max-width: 100%; margin: 0; border-radius: 0; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .plan-grid, .lp-grid, .lp-price-grid, .lp-contact { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row .sel, .filter-row .kw-input { max-width: none; width: 100%; }

  /* 品牌入口：手机上一行只站得下两三个 chip，铺 12 个就是四行墙。
     app.js 的 brandTopN() 已经收到 6 个，这里把搜索框提成整行，
     找不到的品牌走搜索或「更多品牌」，而不是全部罗列出来。 */
  .brand-entry .card-head #brand-q { order: 98; flex-basis: 100%; width: 100%; max-width: none; }
  .brand-row { max-height: none; overflow: visible; }
  .brand-more-row { flex-wrap: wrap; }
  .brand-more-row .hint { flex-basis: 100%; white-space: normal; }
  .addon-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .addon-card .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   历史报价汇总表
   ============================================================ */
#hist-table .desc {
  max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text-2);
}
#hist-table tbody tr { cursor: pointer; }
#hist-table .hist-sep { color: var(--text-3); margin: 0 2px; font-weight: 400; }
/* 最优折扣是这张表真正的看点：以前最低给到过几折，决定这次敢报多少 */
#hist-table .hist-best { color: var(--accent); font-weight: 600; }
#hist-table .row-acts { white-space: nowrap; }
.hist-loading { padding: 34px 16px; text-align: center; color: var(--text-3); font-size: 13px; }
#hist-pager { align-items: center; gap: 10px; margin-top: 12px; }
#hist-pager .hint { font-variant-numeric: tabular-nums; }

/* ============================================================
   手机「更多」抽屉：从底部升起，盖住底栏
   ============================================================ */
.msheet-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: flex-end;
  animation: msheet-fade .16s ease;
}
.msheet {
  width: 100%; max-height: 86dvh; overflow-y: auto;
  background: var(--bg-panel);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  animation: msheet-up .2s cubic-bezier(.32, .72, 0, 1);
}
@keyframes msheet-fade { from { opacity: 0; } }
@keyframes msheet-up { from { transform: translateY(100%); } }
.msheet-grip {
  width: 36px; height: 4px; margin: 4px auto 10px;
  background: var(--border); border-radius: 2px;
}
.msheet-sec {
  padding: 12px 20px 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--text-3); text-transform: uppercase;
}
.msheet-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; height: 50px; padding: 0 20px;
  background: none; border: none; text-align: left;
  font-size: 15px; color: var(--text); cursor: pointer;
}
.msheet-item:active { background: var(--bg-active); }
.msheet-item.on { color: var(--accent); font-weight: 600; }
.msheet-item .mi-ico {
  flex: none; width: 22px; font-size: 20px; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.msheet-item.on .mi-ico { color: var(--accent); }
.msheet-item .mi-sub { font-size: 12px; color: var(--text-3); font-weight: 400; }
.msheet-item .mi-right { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.msheet-item .mi-badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.msheet-user {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 20px 14px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.msheet-user .avatar { width: 38px; height: 38px; font-size: 15px; }
.msheet-user .mu-name { font-size: 15px; font-weight: 600; }
.msheet-user .mu-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* ============================================================
   首页：数据条 / 品牌墙 / 流程 / 专区 / 反馈表单
   ============================================================ */
.lp-alt { background: var(--bg-sidebar); }
.lp-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); background: var(--bg-active);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px;
}

/* ---------- 数据条 ---------- */
.lp-stats-band { padding-top: 56px; padding-bottom: 56px; }
.lp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
}
.lp-stats > div { background: var(--bg-panel); padding: 24px 22px; }
.lp-stats b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 34px; letter-spacing: -.03em; line-height: 1.1;
}
.lp-stats span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }

/* ---------- 品牌墙 ---------- */
.lp-brands { margin-top: 34px; }
.lp-brands-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-brands-head h3 { font-size: 15px; }
.lp-brand-wall { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-brand {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; background: var(--bg-panel);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.lp-brand i {
  font-style: normal; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.lp-brand.more { color: var(--text-3); font-weight: 400; }

/* ---------- 三步流程 ---------- */
.lp-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin-top: 34px;
}
.lp-step {
  position: relative; padding: 26px 24px 24px;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-panel);
}
.lp-step-n {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.lp-step h3 { font-size: 16px; margin-bottom: 8px; }
.lp-step p { font-size: 13.5px; color: var(--text-2); line-height: 1.8; }

/* ---------- 功能卡加序号 ---------- */
.lp-card { position: relative; }
.lp-card-n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--text-3); margin-bottom: 10px;
  letter-spacing: .04em;
}

/* ---------- 左右分栏（价格参考 / 反馈） ---------- */
.lp-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 48px; align-items: center;
}
.lp-split-l .lp-sub { margin-bottom: 4px; }
.lp-checks { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.lp-checks li {
  font-size: 13.5px; color: var(--text-2); line-height: 1.7;
  padding-left: 22px; position: relative;
}
.lp-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}

/* ---------- 价格参考示意卡 ---------- */
.lp-mock {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-panel); padding: 20px; box-shadow: var(--shadow-md);
}
.lp-mock-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
}
.lp-mock-head b { font-family: var(--mono); font-size: 14px; }
.lp-mock-head span {
  font-size: 11px; color: var(--text-2); background: var(--bg-active);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px;
}
.lp-mock-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
}
.lp-mock-stats > div { background: var(--bg-panel); padding: 9px 12px; }
.lp-mock-stats span { display: block; font-size: 10.5px; color: var(--text-3); }
.lp-mock-stats b { font-size: 15px; font-family: var(--font-display); }
.lp-mock-stats b.g { color: var(--green); }
.lp-mock-chart { width: 100%; height: 90px; display: block; }
.lp-mock-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lp-mock-area { fill: var(--accent-soft); stroke: none; }
.lp-mock-foot { margin-top: 10px; font-size: 11px; color: var(--text-3); text-align: center; }

/* ---------- 反馈表单 ---------- */
.lp-form {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-panel); padding: 24px; box-shadow: var(--shadow-sm);
}
.lp-field { margin-bottom: 16px; }
.lp-field > label {
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); margin-bottom: 7px;
}
.lp-field textarea, .lp-field input[type="text"] {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 12px; font-size: 14px; resize: vertical;
}
.lp-kinds { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-kind { cursor: pointer; }
.lp-kind input { position: absolute; opacity: 0; pointer-events: none; }
.lp-kind span {
  display: inline-block; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--text-2);
  background: var(--bg-panel); transition: var(--t);
}
.lp-kind input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 500;
}
.lp-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-form-msg { font-size: 12.5px; color: var(--text-2); }
.lp-form-msg.ok { color: var(--green); font-weight: 500; }
.lp-form-msg.err { color: var(--red); }

/* ---------- 首页落地版块 ---------- */
@media (max-width: 1080px) {
  .lp { padding: 56px 40px; }
  .lp-h { font-size: 32px; }
  .lp-sub { font-size: 15px; }
}
@media (max-width: 900px) {
  /* 左右分栏在窄屏堆成上下 */
  .lp-split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .lp { padding: 44px 20px; }
  .lp-stats > div { padding: 18px 16px; }
  .lp-stats b { font-size: 26px; }
  .lp-form { padding: 18px 16px; }
  .lp-step { padding: 20px 18px; }
  .lp-h { font-size: 26px; }
  .lp-sub { font-size: 14px; }
  .lp-card, .lp-price { padding: 18px 18px; }
  .lp-amt { font-size: 32px; }
  .lp-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- 首页导航：窄屏收进汉堡菜单 ---------- */
@media (max-width: 1080px) {
  .hero-burger { display: block; }
  .hero-menu {
    display: none; position: absolute; top: 64px; left: 20px; right: 20px;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--bg-panel); border-radius: var(--r-xl); padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 5;
  }
  .hero.menu-open .hero-menu { display: flex; }
  .hero-menu li { display: block; }
  .hero-menu button {
    width: 100%; justify-content: flex-start; height: 46px; padding: 0 14px;
    border-radius: var(--r); font-size: 15px;
  }
  .hero-menu button:hover { background: var(--bg-hover); }
  .hero-nav { position: relative; }
}
@media (max-width: 460px) {
  .hero-btn-ghost { display: none; }        /* 注册入口在首屏 CTA 里已有 */
  .hero-btn-solid { width: 78px; height: 38px; font-size: 14px; }
  .hero-nav { padding: 12px 16px; }
  .hero-content { padding: 20px 16px 28px; }
}

/* ---------- 首页窄屏细节 ---------- */
@media (max-width: 1080px) {
  /* 这条必须排在 .hero-burger 的基础规则之后：同优先级下后写的赢，
     否则基础的 display:none 会把媒体查询里的 display:block 盖掉。 */
  .hero-burger { display: block; order: -1; }   /* 放最前面，免得被登录按钮挤出视口 */
}
@media (max-width: 560px) {
  .hero-logo .logo { font-size: 15px; }
  .hero-logo .logo-mark { height: 15px; }
  .hero-nav { gap: 8px; }
  .hero-nav-actions { gap: 4px; }

  /* 搜索框顶栏：窄屏堆两行，AI 标签只留图标 */
  .hs-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hs-top-l { flex-wrap: wrap; gap: 8px; }
  .hs-upgrade { padding: 3px 12px; }
  .hs-top-r span { display: none; }
  .hs-top-r { position: absolute; top: 14px; right: 14px; }
  .hero-search { position: relative; }
  .hs-bottom { flex-wrap: wrap; gap: 8px; }
  .hs-actions { flex: 1; }
  .hs-count { margin-left: auto; }
  .hs-input { padding: 6px 6px 6px 12px; }
  .hs-input input { font-size: 15px; }
}

/* ---------- 后台手机版：9 个标签塞不进底部栏，改成顶部横向滚动 ---------- */
@media (max-width: 740px) {
  .admin-page .app { height: auto; }
  .admin-page .sidebar {
    position: static; width: 100%; height: auto;
    flex-direction: column; align-items: stretch;
    border-top: none; border-bottom: 1px solid var(--border);
    padding: 8px 0 0;
  }
  .admin-page .sb-brand {
    display: flex; justify-content: flex-start; padding: 0 14px 8px;
  }
  .admin-page .sb-nav {
    flex-direction: row; flex: none; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 14px 8px; scrollbar-width: none;
  }
  .admin-page .sb-nav::-webkit-scrollbar { display: none; }
  .admin-page .sidebar .admin-tab {
    flex: none; flex-direction: row; width: auto; height: 34px;
    padding: 0 12px; gap: 6px; border-radius: 999px;
    font-size: 13px; white-space: nowrap;
    border: 1px solid var(--border); background: var(--bg-panel);
  }
  .admin-page .sidebar .admin-tab.active {
    background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  }
  .admin-page .sidebar .admin-tab .sb-ico { font-size: 13px; }
  .admin-page .sb-foot {
    width: auto; flex: none; display: flex; gap: 8px;
    padding: 0 14px 8px; border: none;
  }
  .admin-page .sb-meta { display: none; }
  .admin-page main { padding: 12px 12px 24px; }
}

/* ---------- 后台：用户反馈 ---------- */
.fb-item {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 10px; background: var(--bg-panel);
}
.fb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-status {
  font-size: 10.5px; font-weight: 500; padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-active); color: var(--text-2);
}
.fb-status.st-new { border-color: var(--accent-line); color: var(--text); font-weight: 600; }
.fb-status.st-done { border-color: var(--green); color: var(--green); }
.fb-status.st-closed { opacity: .6; }
.fb-body { font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.fb-contact { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.fb-reply {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--r);
  background: var(--bg-active); font-size: 12.5px; color: var(--text-2);
}
.fb-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fb-acts .kw-input { flex: 1; min-width: 180px; }
.fb-mine { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.fb-mine-head { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.fb-mine-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px;
}
.fb-mine-item:last-child { border-bottom: none; }
.fb-mine-txt { color: var(--text-2); flex: 1; min-width: 0; }
.fb-mine .fb-reply { flex-basis: 100%; margin-top: 4px; }

/* ---------- 免费模式：说明条 / 解锁卡 ---------- */
.free-banner {
  border: 1px solid var(--border); border-left: 3px solid var(--brand-green);
  border-radius: var(--r-lg); padding: 14px 18px; margin: 16px 0 14px;
  background: var(--bg-panel);
}
.free-banner b { display: block; font-size: 14px; margin-bottom: 4px; }
.free-banner span { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

.unlock-card {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 20px 22px; background: var(--bg-panel);
}
.unlock-card.done { border-color: var(--green); }
.unlock-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.unlock-card h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.unlock-badge {
  font-size: 10.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px;
  background: var(--brand-green); color: #0e1311;
}
.unlock-bars { display: flex; flex-direction: column; gap: 12px; }
.ub-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--text-2); margin-bottom: 5px;
}
.ub-top b { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.pr-need {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  background: var(--bg-active); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 14px;
}
.pr-need > div:not(.pr-need-tip) { text-align: center; }
.pr-need b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.1; color: var(--accent);
}
.pr-need span { font-size: 11.5px; color: var(--text-3); }
.pr-need-tip {
  flex: 1; min-width: 200px; font-size: 12px; color: var(--text-2); line-height: 1.7;
}

/* ---------- 首页：免费说明版块 ---------- */
.lp-free {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 32px; align-items: start; margin-top: 34px;
}
.lp-free-main p {
  font-size: 15px; color: var(--text-2); line-height: 1.9; margin-bottom: 14px;
}
.lp-free-main b { color: var(--text); font-weight: 600; }
.lp-free-side {
  border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  padding: 26px 24px; background: var(--bg-panel); box-shadow: var(--shadow-md);
}
.lp-free-price {
  font-family: var(--font-display); font-weight: 700; font-size: 52px;
  letter-spacing: -.04em; line-height: 1; margin-bottom: 18px;
}
.lp-free-price small { font-size: 16px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.lp-card-n { text-transform: none; }
@media (max-width: 900px) { .lp-free { grid-template-columns: 1fr; gap: 24px; } }
.risk-tag {
  display: inline-block; min-width: 30px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 1px 8px; border-radius: 999px;
}
.risk-tag.r2 { background: var(--amber-soft); color: var(--amber); }
.risk-tag.r3 { background: var(--red-soft); color: var(--red); }

/* ============================================================
   现货发布
   ============================================================ */
.lst-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px; margin-bottom: 12px;
}
.lst-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--text-2);
}
.lst-form .lst-wide { grid-column: 1 / -1; }
.lst-preview { min-height: 0; margin-bottom: 10px; }
.lst-hit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--green-soft); border: 1px solid var(--green);
  border-radius: var(--r); padding: 7px 12px; font-size: 12.5px;
}
.lst-hit.miss { background: var(--amber-soft); border-color: var(--amber); }
.row-off { opacity: .55; }

/* 查价结果里的现货角标 */
.stock-badge {
  display: inline-block; margin-left: 6px; padding: 0 7px;
  border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 16px;
  background: var(--brand-green); color: #0e1311;
  vertical-align: 1px; white-space: nowrap; cursor: pointer;
  transition: filter var(--t);
}
.stock-badge:hover { filter: brightness(1.08); }
.of-remark td { padding-top: 0 !important; border-top: none !important; }

/* ============================================================
   通知中心 / 求购订阅
   ============================================================ */
.ok-text   { color: var(--green); font-weight: 500; }
.warn-text { color: var(--amber); font-weight: 500; }
.tag.warn  { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

/* 顶栏未读角标 */
#btn-notify { position: relative; }
.nb-dot {
  display: none; position: absolute; top: -5px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 20px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.nb-dot.on { display: inline-block; }

/* 收件箱条目 */
.nt-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-bottom: 1px solid var(--border);
}
.nt-item:last-child { border-bottom: none; }
.nt-item.unread { background: var(--bg-active); }
.nt-item.focus  { box-shadow: inset 3px 0 0 var(--brand-green); }
.nt-ico {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-active); color: var(--text-2); font-size: 13px;
}
.nt-main  { flex: 1; min-width: 0; }
.nt-title { font-size: 13px; font-weight: 550; margin-bottom: 3px; }
.nt-item .nt-body { font-size: 12px; }
.nt-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 11px;
}

/* 求购页的通道提示条 */
.want-chan-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border-radius: var(--r);
  background: var(--bg-active); border: 1px solid var(--border); font-size: 12.5px;
}
.want-chan-hint:empty { display: none; }