:root {
  --bg:#f5f4ef; --surface:#ffffff; --surface2:#faf9f5; --border:#e0ddd4;
  --accent:#6b4e2e; --accent2:#b87333; --text:#2b2a26; --text2:#8a857a; --accent-text:#ffffff;
  --red:#c0392b; --green:#27ae60; --blue:#2e6bb8; --purple:#7a4ab8;
  --chip-active-bg:rgba(107,78,46,.1); /* v618: 筛选钮选中/排序钮点开/珍珠chip选中 三处共用的「选中底色」, 暖色主题在 body.theme-warm 里集中覆盖 */
  --r:10px; --shadow:0 4px 16px rgba(0,0,0,.08);
  /* 2026-06-17 P1 字号 design token (4 档) — 新组件统一用这 4 个, 别再新增散装字号. 存量重度精调值(9/10.5/13)保留. */
  --fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:14px;
  /* 2026-09-10 跨项目视觉基准圆角三档 (对齐 DESIGN-SYSTEM-INTERNAL.md, 基线 remy-invest) — 新组件统一用这 3 个 */
  --radius-sm:6px; --radius:10px; --radius-pill:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 外壳不再用 vh (2026-10-11): Remy iPhone 真机读数「文档高 956 − 视口高 894 = 62 · #app 956 · body 956」: 主屏幕模式下 100vh=956 (屏高), 而页面可视区 innerHeight 只有 894,
   旧写法 body{min-height:100vh}/#app{height:100vh}/.layout{height:100vh} 让整个外壳比可视区高 62px, 文档变得可滚, 顶栏随内容滚走只剩 ☰ (fixed) 浮着。
   改成百分比链: html 取布局视口高 (=894), body/#app/.layout 都 height:100%, 不再出现 vh/dvh。
   html/body overflow:hidden + overscroll-behavior:none: 文档本身不可滚 (滚动只发生在 .content 等内部容器), 即使将来哪里又撑高也不会让整个页面连顶栏一起滚。 */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--text);font-family:Verdana,'Microsoft YaHei','PingFang SC',sans-serif;height:100%;overflow:hidden;overscroll-behavior:none;font-size:10.5px}
/* 防御: 全站统一 body 字体. code/pre/kbd/samp/tt 浏览器默认 monospace 偷渡覆盖 design system — 强制 inherit. 未来加新组件: 别写 inline font-family, 字体由 body 控制. */
code,kbd,pre,samp,tt,var{font-family:inherit}

/* ── LOCK SCREEN ── */
#lock{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;gap:0}
.lock-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px;width:340px;text-align:center;box-shadow:var(--shadow)}
.lock-gem{font-size:48px;margin-bottom:16px;display:block}
.lock-box h1{font-size:20px;font-weight:700;color:var(--accent);margin-bottom:6px}
.lock-box p{font-size:13px;color:var(--text2);margin-bottom:24px}
.lock-input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:12px 16px;font-size:15px;outline:none;text-align:center;letter-spacing:3px;margin-bottom:12px}
.lock-input:focus{border-color:var(--accent)}
.lock-btn{width:100%;background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.lock-btn:hover{background:#d4b47a}
.lock-err{font-size:12px;color:var(--red);margin-top:10px;min-height:18px}

/* ── APP LAYOUT ── */
#app{display:none;height:100%;overflow:hidden}
.layout{display:flex;height:100%;overflow:hidden}

/* ── VIEWS ── */
/* 2026-06-13: width:100% + align-self:stretch 强制 防 column-flex parent 不当 align-items 让 view-X 缩到内容宽 (各 tab topbar 宽度不一致) */
[id^="view-"]{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;width:100%;align-self:stretch;min-width:0;box-sizing:border-box}

/* ── SIDEBAR ── */
.sidebar{width:210px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.logo{padding:22px 18px 16px;border-bottom:1px solid var(--border)}
.logo h1{font-size:14px;font-weight:700;color:var(--accent)}
.logo p{font-size:11px;color:var(--text2);margin-top:3px}
.nav{padding:10px 8px;flex:1}
.nav-sec{font-size:10px;color:var(--text2);padding:14px 10px 5px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:6px}
.nav-sec:hover{color:var(--text);background:var(--surface2)}
.nav-sec-arrow{font-size:9px;transition:transform .18s;opacity:.55;margin-right:4px}
.nav-group.collapsed .nav-sec-arrow{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-body{display:none}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:13px;transition:.15s;margin-bottom:1px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:rgba(107,78,46,.15);color:var(--accent)}
.nav-icon{width:18px;text-align:center;font-size:14px}
/* 云端有新数据 — 合并进侧边栏「刷新数据」(替代右上角浮动横幅, 2026-06-14 用户嫌烦) */
.cloud-update-badge{display:none}
body.has-cloud-update .cloud-update-badge{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;color:#fff;background:#2563eb;padding:1px 7px;border-radius:9px;white-space:nowrap;vertical-align:middle;animation:slideDown .3s ease}
body.has-cloud-update #nav-refresh{background:rgba(37,99,235,.12);box-shadow:inset 0 0 0 1px rgba(37,99,235,.4)}
/* 抽屉收起时, 汉堡 ☰ 上加蓝点提示有云端更新 */
body.has-cloud-update .menu-fab::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#2563eb;border:2px solid var(--surface)}
.nav-bottom{padding:12px 8px;border-top:1px solid var(--border)}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* 2026-06-13: header zone 字号 design token — 新 tab/新行只要套 .topbar/.stats/.empty-chips-bar 自动 12px, 不靠手动维护 inline style */
:root{--row-font-size:12px;--chip-font-size:11px}
.topbar,.stats{font-size:var(--row-font-size)}
/* 空白筛选 chips 单独小一档 (2026-06-15 Remy): 改 --chip-font-size 一处全变, 不动 topbar/stats */
.empty-chips-bar{font-size:var(--chip-font-size)}
/* 子代强制继承, 兜底未来新加 label/button/span 不写 font-size 也正确; 含 [style*="font-size"] !important 灭 inline drift */
.topbar *,.empty-chips-bar *,.stats *{font-size:inherit}
.topbar [style*="font-size"],.stats [style*="font-size"]{font-size:var(--row-font-size) !important}
.empty-chips-bar [style*="font-size"]{font-size:var(--chip-font-size) !important}

.topbar{padding:6px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--surface);flex-shrink:0;min-height:38px;box-sizing:border-box;position:sticky;top:0;z-index:50}
.topbar h2{font-size:12px;font-weight:400;flex:0 0 auto;margin:0;padding:0;line-height:1.2;white-space:nowrap;color:var(--text)}
.view-toggle{display:flex;background:var(--surface2);border-radius:8px;padding:3px;gap:2px}
.vt-btn{padding:3px 10px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:400;color:var(--text2);background:transparent;transition:.15s;height:22px;line-height:14px;box-sizing:border-box}
.vt-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* 2026-10-04 手机工具条候选A桌面底座: 包裹层 display:contents 不参与布局; 手机专用钮桌面隐藏; .tb-ord 用 order 补回桌面原顺序 */
.tb-more-wrap,.tb-search-wrap,.tb-v,.tb-sum{display:contents}
.tb-search-btn,.tb-more-btn,.tb-search-close,.tb-m{display:none}
.tb-ord > .tb-sort{order:1}
.tb-ord .tb-more-wrap > .btn,.tb-ord .tb-more-wrap > .tb-scale{order:2}
.tb-ord > .tb-add,.tb-ord .tb-search-wrap > input{order:3}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:5px 14px;border-radius:var(--radius-pill);border:none;cursor:pointer;font-size:10.5px;font-weight:400;transition:.15s;box-sizing:border-box}
.btn-primary{background:var(--accent2);color:var(--accent-text)}
.btn-primary:hover{background:#d4b47a}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2);color:var(--text)}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(192,57,43,.3)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:3px 9px;font-size:var(--fs-xs);height:22px;line-height:1;box-sizing:border-box}
.btn-icon{width:28px;height:28px;padding:0;font-size:10.5px;box-sizing:border-box}

/* ── FILTERS ── */
.filter-bar{padding:10px 20px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.fi{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;font-size:10.5px;outline:none}
.fi:focus{border-color:var(--accent)}
.fi::placeholder{color:var(--text2)}
select.fi{cursor:pointer}

/* ── STATS ── */
.stats{padding:9px 18px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:22px;flex-shrink:0;align-items:center}
.stat{display:inline-flex;flex-direction:row;align-items:baseline;gap:5px}
.stat-v{font-size:12px;font-weight:400;color:var(--accent)}
.stat-l{font-size:12px;color:var(--text2);margin-top:0}

/* ── CONTENT AREA ── */
.content{flex:1;overflow:auto;padding:0 20px 16px}

/* ── GALLERY GRID ── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}
.gallery.prod-gallery{grid-template-columns:repeat(auto-fill,minmax(calc(185px * var(--prod-scale,1)),1fr))}
.gallery.prod-gallery .card-img,
.gallery.prod-gallery .card-img-wrap,
.gallery.prod-gallery .card-img-placeholder{height:calc(150px * var(--prod-scale,1))}
.gallery.stone-gallery{grid-template-columns:repeat(auto-fill,minmax(calc(185px * var(--stone-scale,1)),1fr))}
.gallery.stone-gallery .card-img,
.gallery.stone-gallery .card-img-wrap,
.gallery.stone-gallery .card-img-placeholder{height:calc(150px * var(--stone-scale,1))}
.prod-scale-ctrl,.stone-scale-ctrl{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-size:11px;color:var(--text2)}
.prod-scale-ctrl input[type=range],.stone-scale-ctrl input[type=range]{width:90px;accent-color:var(--accent)}
/* 2026-06-17 P2 顶栏减负: 缩放滑杆默认收进 🔍, 点一下展开 (滑杆是顶栏最占宽的非按钮元素) */
.prod-scale-ctrl .scale-icon,.stone-scale-ctrl .scale-icon{cursor:pointer;padding:1px 4px;border-radius:6px;user-select:none}
.prod-scale-ctrl .scale-icon:hover,.stone-scale-ctrl .scale-icon:hover{background:var(--surface2)}
.prod-scale-ctrl .scale-body,.stone-scale-ctrl .scale-body{display:none;align-items:center;gap:6px}
.prod-scale-ctrl.expanded .scale-body,.stone-scale-ctrl.expanded .scale-body{display:inline-flex}
.pager-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:0 0 8px 8px;border-top:none;margin:0 -20px 12px;font-size:12px;position:sticky;top:0;z-index:30;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pager-bar button[disabled]{opacity:.35;cursor:not-allowed}
.pager-info{color:var(--text2);font-size:11px;margin:0 6px}
.pg-last,.pg-first{white-space:nowrap}
/* v608 翻页条≤900px固定单行(防768换行抖动/375截半截) */
@media(max-width:900px){.pg-range{display:none}.pager-bar{flex-wrap:nowrap}.pager-bar > *{flex-shrink:0}}
.pager-jump{width:56px;padding:3px 6px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;text-align:center}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:.2s;position:relative;display:flex;flex-direction:column}
.card:hover{border-color:var(--accent2);transform:translateY(-2px);box-shadow:var(--shadow)}
/* 2026-06-04 IG 链接 🔗 默认藏, hover/选中才显, 平时不挡眼; touch 设备 (无 hover) 微亮保留可点 */
.card .pearl-prod-link{padding:3px 7px !important;font-size:12px !important;border-radius:8px !important;opacity:0;transition:opacity .15s,transform .15s,background .15s;box-shadow:0 1px 3px rgba(0,0,0,.12) !important}
.card:hover .pearl-prod-link,.card.selected .pearl-prod-link{opacity:.85}
.card .pearl-prod-link:hover{opacity:1 !important;background:rgba(255,255,255,1) !important;transform:scale(1.08)}
/* 触屏没有 hover, 徽章要一直看得见; 以前整个压到 .7 会连底色一起变半透明, 改成全不透明 (含点过之后粘住的 :hover/.selected 态, 它们的 .85 同样会透底) */
@media (hover:none){.card .pearl-prod-link,.card:hover .pearl-prod-link,.card.selected .pearl-prod-link{opacity:1}}
.card-del{position:absolute;top:6px;right:6px;background:rgba(224,92,92,.85);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:12px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2;line-height:1}
.card:hover .card-del{display:flex}
.card-img-wrap{position:relative;overflow:hidden;height:150px;background:var(--surface2)}
.card-img{width:100%;height:150px;object-fit:cover;background:var(--surface2);display:block}
.card-img-placeholder{width:100%;height:150px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--border)}
.img-repos-btn{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.72);color:#fff;border:none;border-radius:var(--radius-pill);padding:3px 8px;font-size:10px;cursor:grab;opacity:0;transition:opacity .18s;z-index:3;pointer-events:none;user-select:none}
.card-img-wrap:hover .img-repos-btn{opacity:1;pointer-events:auto}
.card-img-wrap.repositioning{cursor:grabbing}
.card-img-wrap.repositioning .card-img{pointer-events:none}
.card-img-wrap.repositioning .img-repos-btn{opacity:1;pointer-events:auto;background:var(--accent);color:var(--accent-text);cursor:pointer}
.card-body{padding:10px 11px 12px;flex:1;display:flex;flex-direction:column;min-height:0}
/* 2026-06-17 P1: 价格+产地+供应商沉到卡底 — 同行卡片页脚对齐一条线, 顶部内容不再悬空留白 (P0-#2 底部留白正解) */
.card-body > .card-price{margin-top:auto}
/* 2026-06-27 裸石画廊: Remy 要价格紧贴信息(不悬底), 改让「产地+供应商」(.card-foot)沉底, 价格回归自然流贴在 meta 下 (override 上面全局 price 沉底, 仅 stone-gallery) */
.stone-gallery .card-body > .card-price{margin-top:0}
.stone-gallery .card-body > .card-foot{margin-top:auto}
.card-title{font-size:12px;font-weight:500;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:11px;color:var(--text2);margin-bottom:7px}
/* 2026-06-16 P0-#2: 次要字段紧凑块 — 8 个属性一行内流式换行 (treatment/颜色/净度/尺寸/切割/光泽/圈号/评级), 取代每个各占一行 */
.card-meta{display:flex;flex-wrap:wrap;gap:1px 8px;font-size:10px;color:var(--text2);line-height:1.5;margin-bottom:5px}
.card-meta span{white-space:nowrap}
.card-price{font-size:12px;color:var(--text);margin-bottom:6px;font-weight:500}
/* 防御: card 内任何 <strong> 不再偷偷 bold (浏览器默认 700 覆盖 design system 的 .card-* 500). 字重统一靠 CSS class 控制 — 想加粗用 font-weight:600+ 显式, 不用 <strong> 偷渡. */
.card-body strong{font-weight:inherit}
.card-price strong{color:var(--accent);font-weight:inherit}
.card-price.suspicious strong{color:#8a7558;text-decoration:line-through;text-decoration-thickness:1px}
.card-price.suspicious{opacity:.7}
.card-price.excluded strong{color:#a87f4f;text-decoration:line-through}
.card-price.excluded{opacity:.55}
.card-price-flag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:#fcefd9;color:#9e6914;border:1px solid #e4c389;margin-left:5px;font-weight:500;vertical-align:middle;line-height:1.4}
.card-price-flag.excluded{background:#fde8d8;color:#a55a18;border-color:#e2a36a}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.card-loc{font-size:10px;color:var(--text2)}
.card-date{font-size:10px;color:var(--text2)}
.card-link-btn{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--blue);font-size:10px;font-weight:500;text-decoration:none;cursor:pointer;transition:.15s;line-height:1.4}
.card-link-btn:hover{border-color:var(--blue);background:rgba(92,139,224,.12);color:var(--blue)}

/* ── SUPPLIER LOGO UPLOAD OVERLAY ── */
.sup-logo-wrap{position:relative;display:block;line-height:0}
.sup-logo-upload-btn{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border:none;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;opacity:0;transition:opacity .18s;white-space:nowrap;z-index:3;pointer-events:none}
.sup-logo-wrap:hover .sup-logo-upload-btn{opacity:1;pointer-events:auto}
.sup-logo-wrap:hover .card-img{filter:brightness(.8)}

/* ── COLLAPSIBLE FILTER PANEL ── */
.filter-panel{overflow:hidden;max-height:0;opacity:0;flex-shrink:0;transition:max-height .28s ease,opacity .2s}
.filter-panel.open{max-height:320px;opacity:1}
.filter-bar-inner{padding:10px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:6px;width:fit-content;max-width:calc(100% - 24px);margin:8px 12px;box-sizing:border-box}
.nf-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.nf-row select,.nf-row input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:0 6px;font-size:10.5px;outline:none;height:22px;line-height:20px;box-sizing:border-box}
.nf-row .ss-display{height:22px;line-height:20px;padding:0 22px 0 8px;font-size:10.5px;display:flex;align-items:center}
.nf-row select:focus,.nf-row input:focus{border-color:var(--accent)}
/* Make pop-out pickers inside the filter bar match the row's compact native-select look */
.nf-row .ss-display{background:var(--surface);border-radius:6px;padding:0 22px 0 8px;font-size:10.5px;height:22px;line-height:20px}
.nf-row .ss-display::after{right:8px;font-size:9px}
.nf-del{background:none;border:none;color:var(--text2);cursor:pointer;font-size:13px;padding:2px 4px;opacity:.5}
.nf-del:hover{opacity:1;color:var(--red)}
.nf-rowtools{display:inline-flex;gap:5px;align-items:center;margin-left:8px}
/* 行内 ＋✕ 跟筛选控件同档缩小 (2026-06-15 Remy); 只缩筛选行内的, 不动排序 popup 的 fb-icon-btn */
.nf-row .fb-icon-btn{height:20px;font-size:12px;padding:1px 7px}
.nf-actions{display:flex;gap:8px;align-items:center}
.nf-add{background:none;border:1px dashed var(--border);color:var(--text2);border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px}
.nf-add:hover{border-color:var(--accent);color:var(--accent)}
.nf-sort-row{display:flex;gap:6px;align-items:center;padding-top:4px;border-top:1px solid var(--border);margin-top:2px}
.nf-sort-row label{font-size:10px;color:var(--text2);text-transform:uppercase}
.fb-twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.fb-twocol{grid-template-columns:1fr}}
.fb-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-col-header{display:flex;align-items:center;gap:6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.fb-col-title{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.3px;flex:none}
.fb-col-spacer{flex:1}
.fb-icon-btn{background:none;border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:1px 8px;font-size:13px;line-height:18px;cursor:pointer;height:22px}
.fb-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.fb-icon-btn.danger:hover{border-color:#c0392b;color:#c0392b}
.fb-col-body{display:flex;flex-direction:column;gap:5px}
.fb-col-body:empty::after{content:"(无)";color:var(--text2);font-size:11px;font-style:italic;padding:4px 2px}
.filter-toggle-btn{display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:12px;font-weight:400;cursor:pointer;transition:.15s;white-space:nowrap;height:22px;box-sizing:border-box}
.filter-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-toggle-btn.active{border-color:var(--accent);color:var(--accent);background:var(--chip-active-bg)}
.filter-badge{background:var(--accent);color:var(--accent-text);border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:2px}
.filter-clear-btn{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;margin-left:-2px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:12px;font-weight:400;line-height:1;cursor:pointer;transition:.15s;gap:3px;white-space:nowrap}

/* ── Empty-value filter chips (mirrors expense PWA) ── */
.empty-chips-bar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:5px 16px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:var(--chip-font-size)}
.empty-chips-bar .label{color:var(--text2);font-weight:400;font-size:var(--chip-font-size);letter-spacing:.3px}
.empty-chips-bar .sep{color:var(--border);user-select:none}
.empty-chip{padding:2px 8px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:var(--chip-font-size);cursor:pointer;border-radius:10px;transition:background .12s,color .12s,border-color .12s;line-height:17px;font-family:inherit}
.empty-chip:hover{border-color:var(--accent);color:var(--accent)}
.empty-chip.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.empty-chip.dirty.active{background:#c44;border-color:#c44;color:#fff}
.filter-clear-btn:hover{border-color:#e57373;color:#e57373;background:rgba(229,115,115,.1)}
.filter-clear-btn.show{border-color:#e57373;color:#e57373;background:rgba(229,115,115,.08);font-weight:400}

/* Sort chip (topbar) + sort popup (overlay) */
.sort-chip{padding:2px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:12px;font-weight:400;cursor:pointer;border-radius:11px;transition:.12s;line-height:18px;font-family:inherit;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
@media (hover:hover){.sort-chip:hover{border-color:var(--accent);color:var(--accent)}}
.sort-chip.active{background:var(--chip-active-bg);color:var(--accent);border-color:var(--accent)}
.sort-popup{position:fixed;top:calc(60px + var(--sat));right:12px;width:280px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.14);padding:6px 8px;z-index:9000}
.sort-popup-header{display:flex;align-items:center;gap:4px;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:5px}
.sort-popup-header .fb-col-title{font-size:10.5px}
.sort-popup .nf-row{margin-bottom:3px !important;gap:4px}
.sort-popup .nf-row select{height:22px !important;line-height:20px !important;font-size:10.5px !important;padding:0 4px !important}
.sort-popup .nf-row > span:first-child{font-size:10px !important;min-width:12px !important}
.sort-popup .nf-row button{height:22px !important;font-size:10px !important;padding:0 5px !important}
.sort-popup .fb-icon-btn{height:20px;padding:0 6px;font-size:11px;line-height:18px}
.sort-popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:8999;cursor:pointer}
/* 更多 (展开 ec) */
.empty-chips-bar .ec-toggle{display:none;order:99;padding:2px 8px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:var(--chip-font-size);cursor:pointer;border-radius:10px;line-height:17px;align-items:center}
.empty-chips-bar .ec-toggle:hover{border-color:var(--accent);color:var(--accent)}
/* 2026-06-16 洁癖整改 P0-#1: 桌面端也折叠次要空白 chip — 默认藏 .ec-more (技术/低频), 常驻只留 4 审计 + 4 常用字段 chip.
   updateAutoHideChips 给有可展开项的 bar 加 .has-more → 才显「更多」按钮 (无可展开项不显死按钮). */
.empty-chips-bar:not(.expanded) .ec-more{display:none !important}
/* 例外: 正在生效 (.active) 的折叠 chip 永远可见, 否则收起后看不到/取消不了正在用的筛选 */
.empty-chips-bar:not(.expanded) .ec-more.active{display:inline-flex !important}
.empty-chips-bar.has-more .ec-toggle{display:inline-flex}

/* ── BATCH SELECT MODE ── */
.batch-bar{padding:8px 20px;background:rgba(107,78,46,.08);border-bottom:1px solid var(--accent2);display:none;align-items:center;gap:10px;flex-shrink:0;font-size:13px}
.batch-bar.show{display:flex}
.card-cb{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:3;font-size:13px;transition:.1s;cursor:pointer}
.select-mode .card-cb{display:flex}
/* 颗数角标: 去掉每卡一个模糊层, 底色改不透明 #F8F7F5, 视觉一致; Remy 在 iPhone 对比手感 */
.stone-count-overlay{position:absolute;top:6px;left:6px;z-index:2;background:#F8F7F5;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.18);display:inline-flex;align-items:center}
.select-mode .stone-count-overlay{display:none}
.stone-count-overlay .stone-count-chip{background:transparent!important;color:var(--text)!important;font-size:10px!important;padding:3px 7px 2px!important;border-radius:7px!important;display:inline-flex!important;align-items:center;line-height:1}
.card .stone-link-overlay{padding:3px 7px 2px!important;font-size:10px!important;border-radius:7px!important;opacity:1!important;display:inline-flex!important;align-items:center;line-height:1}
.select-mode .card{cursor:pointer}
.card.selected{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(107,78,46,.35)}
.card.selected .card-cb{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}

/* ── TAGS / BADGES ── */
.tag{display:inline-block;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:500}
.ms-wrap{position:relative}
.ms-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);cursor:pointer;font-size:12px;min-height:34px;gap:6px}
.ms-btn:hover{border-color:var(--accent2)}
.ms-btn .ms-arrow{font-size:10px;color:var(--text2);transition:transform .2s}
.ms-wrap.open .ms-arrow{transform:rotate(180deg)}
.ms-tags{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-height:18px}
.ms-tags .ms-chip{display:inline-block;padding:1px 7px;border-radius:12px;font-size:10px;background:rgba(107,78,46,.18);color:var(--accent);font-weight:600}
.ms-placeholder{color:var(--text2);font-size:12px}
.ms-dd{display:none;position:absolute;top:100%;left:0;right:0;z-index:1000;background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-top:2px;max-height:240px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ms-wrap.open .ms-dd{display:block}
.ms-dd label{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--text)}
.ms-dd label:hover{background:var(--surface2)}
.ms-dd input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0}
.tag-wholesale{background:rgba(92,139,224,.15);color:#7aadff}
.tag-retail{background:rgba(92,184,112,.15);color:#7adc8a}
.tag-gem{font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px}
.chip-rainbow{background:linear-gradient(90deg,#fbb6c2,#fbcfa3,#fde9a3,#c5e8b7,#b3d9f5,#cdc0ee,#f0bce0)!important;color:#ffffff!important;font-weight:400!important;border:1px solid rgba(255,255,255,.5)}

/* ── TABLE ── */
.tbl-wrap{overflow:auto}
/* sticky 表头: 让含表格的 .content 变 flex 列 + 由 .tbl-wrap 内部纵向滚动, thead position:sticky top:0 才有可粘的滚动容器 (此前 .tbl-wrap 自身 overflow:auto 困住 sticky → 跟随 .content 滚走). 只对含 .tbl-wrap 的 content 生效, 画廊 grid 不受影响 */
.content:has(> .tbl-wrap){display:flex;flex-direction:column;overflow:hidden}
.content:has(> .tbl-wrap) > .tbl-wrap{flex:1;min-height:0}
table{width:100%;border-collapse:collapse}
/* 2026-09-10 对齐跨项目表格排版基准(基线 remy-invest): 深棕实底白字 600 sticky, 不用 uppercase/letter-spacing (中文无效)。
   全部限定在 .tbl-wrap 下 (只有供应商/裸石/成品这 3 张主列表表用它), 不碰 .pr-table/.melee-table/#sieve-table 这几个价格计算器专用表 — 它们各自有独立样式, 混进通用表格排版会动到计算器的可读性, 不在这次对齐范围内 */
/* 2026-09-25 修 375px 裸石表价格列叠字 (claim id=2026-09-13_223747_7eb8c903):
   全局 table{width:100%} (上面 line 305) 逼表格永远卡在容器实际宽度, initColResize()
   又把 table-layout 焊成 fixed + 15 列均分宽度 → 375px 时每列只剩约 20px, 单价/总价这种
   6-7 位数价格文字溢出糊到隔壁列。min-width:max-content 让表格按内容需要的最小宽度撑开,
   撑不下就交给 .tbl-wrap 的 overflow:auto 横滑, 不再硬挤 (跟 .melee-table 已用的
   min-width:600px + overflow-x:auto 是同一个套路, 那边早就这么修过) */
.tbl-wrap table{font-size:10.5px;min-width:max-content}
.tbl-wrap thead th{background:var(--accent);padding:3px 8px;text-align:center;color:var(--accent-text);font-weight:600;font-size:10.5px;border-bottom:1px solid var(--border);position:sticky;top:0;white-space:nowrap;z-index:1}
.tbl-wrap thead th[data-key]:hover{filter:brightness(1.15)}  /* 2026-07-10: 主数据表表头整格 hover (对齐 remy-expense/SUI; 只作用 data-key 列不碰 pr/melee); 09-10 表头改深棕实底后原 var(--border) 亮度不够改用 brightness */
.tbl-wrap thead th.resizable{position:sticky;top:0}  /* sticky (非 relative): 仍给绝对定位的 .col-resize 手柄当包含块, 但保住 thead 滚动固定 (relative 会盖掉 thead th 的 position:sticky → 表头跟着滚走) */
.tbl-wrap thead th .col-resize{position:absolute;right:-2px;top:0;bottom:0;width:6px;cursor:col-resize;user-select:none;z-index:2}
.tbl-wrap thead th .col-resize:hover,.tbl-wrap thead th .col-resize.active{background:#fff;opacity:.4;border-radius:2px}
.tbl-wrap thead th.drag-over{background:var(--accent2);opacity:1}
/* 2026-07-05: 表头 Excel 风格列筛选 ▾ */
/* 2026-09-26 根治「表头 ▾ 点不开」(ui-auditor 走查在供应商列抓到, 顺手全 class 扫了 14 个可筛选列,
   1024px 下实测 3 列中招: 供应商 ▾[946,952] 被自己那列的 .col-resize 手柄 [947,953] 整个盖住,
   种/种类 和 尺寸/切割 的 ▾ 干脆被挤出列宽外, 藏在右边那一列表头的不透明背景底下, 看不见也点不到)。
   根因两条, 都出在「▾ 是排在标签文字后面的 inline 元素」这个做法上:
   ① initColResize() 先按 th.offsetWidth 把列宽焊死 (table-layout:fixed), attachColFilterButtons()
      之后才把 ▾ 塞进去 —— 塞进去时宽度早已冻结, 列窄 + 标签长(尺寸/切割、种/种类)就必然挤出去;
   ② 就算没挤出去, ▾ 是普通流内元素 (z-index auto), 而 .col-resize 是 position:absolute + z-index:2,
      ▾ 只要落在最右那几像素就被手柄抢走点击。
   改法: ▾ 改成绝对定位钉在每列右侧固定位置 + z-index:3 压过手柄, 彻底退出正常流 —— 列多窄都不会
   被挤出去, 也不会再被手柄盖住; 顺带天然免疫 2026-07-09 那次「▾ 换行把表头撑高一倍」的老 bug
   (出了流就不可能把行撑高)。▾ 仍然是 <th> 的直接子节点, deploy_guard 的免疫架构锁照样通过。 */
.tbl-wrap thead th:has(> .col-filter-btn){padding-right:16px}  /* 给右侧 ▾ 留固定空位, 标签不压在它身上 */
.tbl-wrap thead th .col-filter-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);margin-left:0;z-index:3;padding:2px 1px;line-height:1}
.col-filter-btn{display:inline-block;margin-left:4px;opacity:.55;cursor:pointer;user-select:none;font-size:10px}
.col-filter-btn:hover{opacity:1}
.col-filter-btn.active{opacity:1;color:var(--accent2);font-weight:700}
.col-filter-popover{position:absolute;z-index:1500;width:220px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);padding:8px;font-size:12px;color:var(--text)}
.col-filter-popover .cf-search{width:100%;box-sizing:border-box;padding:4px 6px;margin-bottom:6px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--surface);color:var(--text)}
.col-filter-popover .cf-actions{display:flex;gap:10px;margin-bottom:6px}
.col-filter-popover .cf-actions a{color:var(--accent);text-decoration:underline;cursor:pointer}
.col-filter-popover .cf-list{max-height:220px;overflow-y:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.col-filter-popover .cf-item{display:flex;align-items:center;gap:6px;padding:3px 2px;cursor:pointer}
.col-filter-popover .cf-item:hover{background:var(--surface2)}
.col-filter-popover .cf-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-filter-popover .cf-count{color:var(--text2);font-size:10px}
.col-filter-popover .cf-empty{color:var(--text2);padding:8px 2px;text-align:center}
.col-filter-popover .cf-footer{margin-top:6px;text-align:right}
.col-filter-popover .cf-apply{background:var(--accent);color:var(--accent-text);border:none;border-radius:6px;padding:4px 14px;font-size:12px}
@media (max-width:640px){
  .col-filter-popover{width:min(280px,90vw);position:fixed !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%);max-height:70vh}
}
/* 2026-09-10: 选中态改到下面 tbody td 规则块跟斑马纹/hover 一起定, 保证优先级压过它们 (放源码更后) */
.tbl-cb{width:32px;text-align:center;padding:6px 4px !important;vertical-align:middle}
.tbl-cb-box{display:inline-flex;width:18px;height:18px;border-radius:4px;border:2px solid var(--border);align-items:center;justify-content:center;font-size:11px;transition:.15s;cursor:pointer;background:var(--surface)}
.tbl-cb-box.checked{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.tbl-cb-col{width:32px;padding:6px 4px !important}
tbody tr{border-bottom:1px solid var(--border);transition:.1s;cursor:pointer}
/* 2026-09-10 对齐跨项目表格排版基准 (同上, 限定 .tbl-wrap 不碰计算器专用表): 斑马纹(复用既有 --surface2, 值同基准 --fill) + hover(accent 6% 透明度) + 选中态(放最后保证优先级最高, 不被斑马纹盖掉) */
.tbl-wrap tbody tr:nth-child(even) td{background:var(--surface2)}
.tbl-wrap tbody tr:hover td{background:rgba(107,78,46,.06)}
.tbl-wrap tbody tr.selected-row td{background:rgba(107,78,46,.15)}
.tbl-wrap tbody td{padding:3px 8px;line-height:13.9px;vertical-align:middle;text-align:center}
/* 长文本类列(名称/描述/供应商)例外保持左对齐, 跟 remy-invest「名称/行业」例外同一套逻辑 */
.tbl-wrap td[data-key="name"],.tbl-wrap td[data-key="product_name"],.tbl-wrap td[data-key="main_business"],.tbl-wrap td[data-key="supplier"],.tbl-wrap td[data-key="main_stone"],.tbl-wrap td[data-key="measurement"],.tbl-wrap td[data-key="species_variety"]{text-align:left}
.td-img{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--border)}
.td-img-ph{width:40px;height:40px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--border)}
/* 2026-09-25: 价格数字列补溢出保护, 之前只有 .tcell-ell (供应商/种名等文字列) 有这层, 数字列
   当初被当成"肯定短不用管"漏了 (同 codebase 平行实现互不继承的老毛病) —— 极端窄屏就算 min-width
   兜底也可能被列宽拖拽/localStorage 存的旧宽度顶到很窄, 这里加 nowrap+ellipsis 保底不再糊字 */
.price{font-weight:400;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-cost,.price-total{color:var(--accent)}
/* 2026-06-17 表格视图: 文字单元格截断不外溢 (供应商长名别撞操作列) + 种名锁单行让行高统一. 全文 hover title 看 */
.tcell-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-prod{color:var(--accent)} /* 2026-10-04 商品价统一棕色, 原 .price-retail 绿 / .price-cost 蓝 不再用于商品 */
.empty-state{text-align:center;padding:60px 20px;color:var(--text2)}
.empty-icon{font-size:40px;display:block;margin-bottom:12px;opacity:.4}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.2s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:560px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;transform:translateY(16px);transition:.2s;box-shadow:var(--shadow);font-size:10px}
.overlay.open .modal{transform:translateY(0)}
.modal-hd{padding:8px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-hd h3{font-size:10px;font-weight:400}
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:10px 14px;overflow-y:auto;flex:1}
.modal-ft{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:5px;justify-content:flex-end}

/* ── FORM (全控件 26px hardcoded 高度, !important 防 native 渲染干扰) ── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.f{display:flex;flex-direction:column;gap:2px}
.f.full{grid-column:1/-1}
.f label{font-size:10px;color:var(--text2);font-weight:400;line-height:1.2;margin:0}
.f input:not([type="file"]),.f select,.f button,.f .sc-pick-chip,.f .ms-row .ms-add{
  background:var(--surface2)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  border-radius:6px!important;
  padding:0 7px!important;
  font-size:10px!important;
  font-family:inherit!important;
  height:26px!important;
  line-height:1!important;
  box-sizing:border-box!important;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  outline:none;
}
.f .ms-tag{
  background:rgba(107,78,46,.15)!important;
  color:var(--accent)!important;
  border:1px solid rgba(107,78,46,.3)!important;
  border-radius:12px!important;
  font-size:10px!important;font-weight:400!important;
  padding:0 5px 0 8px!important;
  height:20px!important;line-height:1!important;
  display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;
}
.f .ms-chip{font-weight:400!important;font-size:10px!important}
.f .sc-pick-chip{display:flex!important;align-items:center;justify-content:center;gap:3px;font-weight:400!important;cursor:pointer}
.f .sc-pick-chip.active{font-weight:400!important}
.f select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0l5 6 5-6z'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:right 6px center!important;
  padding-right:22px!important;
}
.f button{cursor:pointer}
.f textarea{
  background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--text)!important;
  border-radius:6px!important;padding:4px 7px!important;font-size:10px!important;
  font-family:inherit!important;line-height:1.4!important;resize:vertical;min-height:44px;box-sizing:border-box;outline:none;
}
.f input:focus,.f select:focus,.f textarea:focus,.f button:focus{border-color:var(--accent)!important}
.f input::placeholder,.f textarea::placeholder{color:var(--text2);opacity:.5}
.fsec{font-size:10px;text-transform:none;letter-spacing:.4px;color:var(--accent);font-weight:400;grid-column:1/-1;padding-bottom:2px;border-bottom:1px solid var(--border);margin-top:3px}
/* searchable-select 升级后的原 select 强制隐藏 (防 .f select 规则覆盖 inline display:none 导致 2 行) */
.f select.ss-done{display:none!important}
/* searchable-select 升级后的 facade 与 .f input/select 同高 */
.f .ss-display{
  background:var(--surface2)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  border-radius:6px!important;
  padding:0 22px 0 7px!important;
  font-size:10px!important;
  height:26px!important;
  line-height:24px!important;
  box-sizing:border-box!important;
}
.f .ss-display::after{right:7px;font-size:9px}
/* 行内按钮 (帖子链接 🔗 打开 / variety-scope toggle 🔗 限本种 等) 与 input 同高 */
.f .inline-act{
  background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--text2)!important;
  border-radius:6px!important;padding:0 9px!important;font-size:10px!important;
  height:26px!important;line-height:1!important;box-sizing:border-box!important;
  white-space:nowrap;cursor:pointer;
}
.f .inline-act:hover{border-color:var(--accent)!important;color:var(--accent)!important}
.f .variety-scope-toggle{height:26px!important;padding:0 7px!important;font-size:10px!important;font-weight:400!important;line-height:1!important;border-radius:6px!important}
/* mini button — 强制压小 (覆盖 .f button 全局 26px), 含边框 (🔄 刷新 类) */
.f button.btn-mini{height:18px!important;padding:0 6px!important;font-size:10px!important;line-height:1!important;border-radius:4px!important;background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--text2)!important;font-weight:400!important;display:inline-flex!important;align-items:center;gap:3px}
/* mini bare — 无边框小图标 (✏️ 选项管理 类) */
.f button.btn-mini-bare{height:16px!important;padding:0 4px!important;font-size:10px!important;line-height:1!important;background:none!important;border:none!important;color:var(--text2)!important;font-weight:400!important;border-radius:4px!important;cursor:pointer}
.f button.btn-mini-bare:hover{background:var(--surface2)!important;color:var(--accent)!important}
/* footer 按钮在 modal 内统一 10px / 不 bold */
.modal-ft .btn{font-size:10px!important;font-weight:400!important;padding:0 12px!important;height:28px!important;line-height:1!important}
/* v631 窄屏不折行 (第二批对照稿, e2e_modal_320_wrap.js 守护; 要回退删掉这一段): 按钮字永不切成两行也不被压扁; 手机颗数条/底部栏/供应商顶栏 */
.modal-ft .btn{white-space:nowrap;flex-shrink:0}
@media(max-width:640px){
  .modal-ft{flex-wrap:wrap}
  .f .sc-pick-chip{white-space:nowrap}
  /* 供应商页顶栏: 手机藏掉两个桌面才用的钮(要电脑上的文件夹), 把「＋ 添加」挪到标题后面, 375 宽不用横滑就点得到 (只用 CSS order, 不动 DOM) */
  #view-suppliers .topbar>button[onclick^="exportIGUsernames"],
  #view-suppliers .topbar>button[onclick*="local-logo-input"]{display:none}
  #view-suppliers .topbar>h2{order:-2}
  #view-suppliers .topbar>button[onclick^="openModal('suppliers'"]{order:-1}
}
@media(max-width:360px){
  .f .sc-pick-chip{padding:0 3px!important}
  .modal-ft .btn{padding:0 8px!important}
}
/* v632 文件选择按钮全站统一 (第三批对照稿, e2e_flex_width_scan.js 守护; 要回退删掉这一段): 24px 高 / 12px 圆角 / 10px 字的小胶囊。
   v633 改 B 方案 (浅棕底 + 棕边棕字, 比「保存」的实心铜色轻一档): 底 var(--chip-active-bg) 边 1px var(--accent) 字 var(--accent), 按下再深一点。
   标准写法和旧 iOS 写法必须各写一条, 不能用逗号合并: 旧 iOS(<14.1) 只认 -webkit-file-upload-button, 合在一个选择器列表里会被整条丢掉 */
input[type="file"]{font-family:inherit;font-size:10px;color:var(--text2);max-width:100%;vertical-align:middle}
input[type="file"]::file-selector-button{height:24px;padding:0 10px;margin-right:8px;border:1px solid var(--accent);border-radius:12px;background:var(--chip-active-bg);color:var(--accent);font:inherit;line-height:1;cursor:pointer;transition:.15s}
input[type="file"]::-webkit-file-upload-button{height:24px;padding:0 10px;margin-right:8px;border:1px solid var(--accent);border-radius:12px;background:var(--chip-active-bg);color:var(--accent);font:inherit;line-height:1;cursor:pointer;transition:.15s}
input[type="file"]::file-selector-button:hover{background:rgba(107,78,46,.18)}
input[type="file"]::file-selector-button:active{background:rgba(107,78,46,.22)}
input[type="file"]::-webkit-file-upload-button:hover{background:rgba(107,78,46,.18)}
input[type="file"]::-webkit-file-upload-button:active{background:rgba(107,78,46,.22)}

/* v633 手机安全区 (2026-10-09 对照稿 Remy 已确认, deploy_guard check_flex_ui_v632 + e2e_flex_width_scan.js 守护; 要回退删掉这一段和 index.html 的 viewport-fit=cover / #sb-cover):
   index.html 的 viewport 加了 viewport-fit=cover, 页面会延伸到灵动岛和底部横线下面, env(safe-area-inset-*) 才有值。
   env() 全部带 0px 兜底: 桌面和普通浏览器里 env 恒为 0, 下面每条规则都等于没写, 布局不变。
   (menu-fab / qc-fab / toast / sort-popup / lightbox-close 的 env 写在它们各自原来的规则里, 因为源码顺序靠后的同名规则会盖掉这里)
   1) 顶部: #sb-cover 是固定在最顶的纯色条 (底色同顶栏), 状态栏就跟着变纯色; .layout 整体让出 env 顶, 所有页面的顶栏/抽屉一起下移, 不用一个个补
   2) 底部: .layout 让出 env 底, 页面不会落到 Home 横线下面 (等于没加 cover 之前的老行为); 弹窗底栏单独留空 (见下) */
/* v637 顶部 (2026-10-10, 取代 v635 的 62px 下限): Remy 真机侧栏读数「顶 env 0 · 主屏幕应用」+ v633 的 ☰ top=env+4 却离屏幕顶约 67pt
   => iOS 27 主屏幕应用里页面的 0 点本来就在状态栏下面约 63pt (WebKit bug 301994: 系统在网页层上面自己画一块, env 读 0), 不是页面延伸到状态栏底下。
   所以页面里的任何东西 (固定条/让位) 都盖不到那一块, v635 的 max(env,62px) 只是把整页又往下推了 62px。已撤掉。
   --sat 只等于真实 env (带 0px 兜底, 现在读 0 = 不让位; 将来 iOS 修了 env 有值才让位), 顶部整套 (#sb-cover/.layout/☰/侧栏/横幅/排序弹层/大图关闭钮) 继续读同一个 --sat。
   系统那块的颜色页面能影响的只有 html/body 背景和 meta theme-color: 主屏幕应用里让 html 背景和顶栏同为纯白, 避免米色/深色底在顶部被系统模糊成渐变。 */
:root{--sat:env(safe-area-inset-top,0px)}
@media (display-mode:standalone) and (max-width:640px){html{background:var(--surface)}}
#sb-cover{position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--surface);z-index:98;pointer-events:none}
.layout{padding-top:var(--sat);padding-bottom:env(safe-area-inset-bottom,0px)}
#cloud-uploading-banner,#auth-fail-banner,#__runtime_err_bar{padding-top:calc(8px + var(--sat))!important}
#update-banner{top:calc(10px + var(--sat))!important}
@media(max-width:640px){
  /* 弹窗底栏: 按钮下沿离屏幕底 max(20px, 4px + 底部安全区), 真机(底 34)约 38px, 同时保证按钮不被圆角和 Home 横线挡住。
     全站 .modal-ft 一条规则覆盖 (供应商添加/批量编辑/编辑裸石等); 报价弹窗有 #quote-modal-bg 的更高优先级规则, 在 app.js 注入块里同步写 */
  .modal-ft{padding-bottom:max(20px,calc(4px + env(safe-area-inset-bottom,0px)))}
  .sidebar{padding-top:var(--sat);padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(min-width:641px) and (max-width:900px){
  body:not(.sb-pinned) .sidebar{padding-top:var(--sat);padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ── IMAGE UPLOAD ── */
.img-upload-area{border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:.15s;background:var(--surface2)}
.img-upload-area:hover{border-color:var(--accent);background:rgba(107,78,46,.05)}
.img-preview-list{display:flex;gap:10px 8px;flex-wrap:wrap;margin-top:10px;padding-bottom:4px}
.img-thumb-wrap{position:relative;display:inline-block;cursor:grab;margin-bottom:18px}
.img-thumb-wrap:active{cursor:grabbing}
.img-thumb{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.img-thumb-del{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.img-thumb-order{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:1px 5px;border-radius:6px;pointer-events:none}
.img-thumb-arrows{position:absolute;bottom:-20px;left:0;right:0;display:flex;justify-content:center;gap:2px;opacity:0;transition:opacity .15s}
.img-thumb-wrap:hover .img-thumb-arrows{opacity:1}
.img-thumb-arrows button{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:4px;padding:0 5px;font-size:9px;cursor:pointer;line-height:16px}
.img-thumb-arrows button:hover{background:var(--accent);color:var(--accent-text)}

/* ── IMAGE LIGHTBOX ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain}
.lightbox-close{position:absolute;top:calc(16px + var(--sat));right:20px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;opacity:.7}
.lightbox-close:hover{opacity:1}
.lightbox-nav{display:flex;gap:16px;margin-top:14px}
.lb-btn{background:rgba(255,255,255,.1);border:none;color:#fff;padding:8px 18px;border-radius:8px;cursor:pointer;font-size:13px}
.lb-btn:hover{background:rgba(255,255,255,.2)}

/* ── MULTI-SELECT TAGS ── */
.ms-wrap{display:flex;flex-direction:column;gap:2px}
.ms-tags{display:flex;flex-wrap:wrap;gap:3px;min-height:0}
.ms-tags:empty{display:none}
.ms-tag{display:inline-flex;align-items:center;gap:3px;background:rgba(107,78,46,.15);color:var(--accent);border:1px solid rgba(107,78,46,.3);border-radius:10px;padding:0 5px 0 8px;font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1.4}
.ms-tag-x{background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px;padding:0 1px;opacity:.6;line-height:1}
.ms-tag-x:hover{opacity:1;color:var(--red)}
.ms-row{display:flex;gap:3px}
/* 2026-06-25 multiSelectUI 内嵌 select 换成 popup picker, 跟速查卡品种 popup 同款 plk-opt 风格 */
.ms-picker-wrap{position:relative;flex:1;min-width:0}
.ms-picker-btn{width:100%;padding:5px 8px;border:1px solid var(--border);background:var(--surface);border-radius:6px;font-size:12px;color:var(--text2);cursor:pointer;text-align:left;box-sizing:border-box}
.ms-picker-btn:hover{background:var(--surface2);border-color:var(--accent)}
.ms-picker-popup{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:320px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:1500;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 2026-06-26 backlog ①: 手机 bottom-sheet 模拟 OS chooser (native select 优势) — < 640px popup 改 fixed bottom 上推 */
@media (max-width:640px){
  .ms-picker-popup.open{display:block !important;position:fixed !important;top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;max-height:60vh !important;border-radius:14px 14px 0 0 !important;box-shadow:0 -6px 24px rgba(0,0,0,.22) !important;z-index:99999 !important;padding-bottom:env(safe-area-inset-bottom,8px)}
  .ms-picker-popup.open::before{content:'';display:block;width:36px;height:4px;background:var(--border);border-radius:2px;margin:8px auto 6px}
}
/* 2026-06-26 backlog ②: 键盘 a11y — focus 蓝框 + 高亮当前 plk-opt (方向键选, Enter 选中, Esc 关) */
.ms-picker-btn:focus{outline:2px solid var(--accent);outline-offset:1px}
.plk-opt.ssp-focused{background:rgba(107,78,46,.16);outline:1px solid var(--accent)}
.ms-row select{flex:1}
.ms-row .ms-add{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:0 7px;cursor:pointer;font-size:11px;white-space:nowrap}
.ms-row .ms-add:hover{border-color:var(--accent);color:var(--accent)}

/* ── COMPARE ── */

/* ── TOAST ── */
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:20px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 16px;font-size:13px;box-shadow:var(--shadow);z-index:400;transform:translateY(60px);opacity:0;transition:.3s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{border-left:3px solid var(--green)}
.toast.err{border-left:3px solid var(--red)}

/* 浮动汉堡 (默认隐藏, mobile media query 开启) */
.menu-fab{display:none}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}

/* v608 平板641-900侧栏默认抽屉, sb-pinned=固定展开 */
.sb-pin-btn{display:none;margin-top:8px;padding:3px 10px;font-size:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--accent);cursor:pointer}
.sb-pin-btn .sb-p-off{display:none}
@media(min-width:641px) and (max-width:900px){
  .sb-pin-btn{display:inline-block}
  body.sb-pinned .sb-pin-btn .sb-p-on{display:none}
  body.sb-pinned .sb-pin-btn .sb-p-off{display:inline}
  body:not(.sb-pinned) .sidebar{position:fixed;left:-210px;top:0;bottom:0;z-index:100;transition:.3s}
  body:not(.sb-pinned) .sidebar.open{left:0}
  body:not(.sb-pinned) .menu-fab{display:flex;position:fixed;top:calc(var(--sat) + 6px);left:8px;z-index:210;width:34px;height:34px;align-items:center;justify-content:center;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:17px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08);padding:0}
  body:not(.sb-pinned).sidebar-open .menu-fab{display:none}
  body:not(.sb-pinned).sidebar-open .sidebar-backdrop{display:block}
  body:not(.sb-pinned) .topbar{padding-left:50px}
}
/* v609 641px 以上: 工具栏/统计行换行不竖排 (nowrap+wrap); 弹窗/侧栏开着时 ☰ 和相机钮压到遮罩下面 */
@media(min-width:641px){.topbar{flex-wrap:wrap;row-gap:4px}.topbar > *,.topbar .btn,.topbar .vt-btn,.stats > *,.stats label{white-space:nowrap;flex-shrink:0}.stats{flex-wrap:wrap;gap:4px 14px}}
body:has(.overlay.open) .menu-fab,body:has(.overlay.open) #qc-fab,body.sidebar-open #qc-fab{z-index:98}
/* ── MOBILE ── */
@media(max-width:640px){
  /* 全局放大一档, 表格/价格仍紧凑由具体规则 override */
  body{font-size:14px;-webkit-text-size-adjust:100%}
  .sidebar{position:fixed;left:-210px;top:0;bottom:0;z-index:100;transition:.3s}
  .sidebar.open{left:0}
  #qc-fab{left:auto !important;right:16px;width:40px;height:40px;opacity:.86}  /* v608 缩40px+86%透明缓解压价格 */
  /* 手机: FAB 放右下角. !important 压基础规则的 left:226px(源序在后否则在手机居中); 放右是因为左侧抽屉(z100)展开时, FAB(z800)会浮在其上盖住「刷新数据」等底部按钮 → 点不到. 右下角则永不与左抽屉重叠 — 2026-06-21 居中/2026-06-22 挡按钮 两次 Remy 报 */
  #qc-fab:active{opacity:1}
  /* v639 提示条 (Remy 真机: 「报价已保存」被右下角相机圆钮盖住, 只露「报价已保」): 手机上 toast 改成底部居中、抬到圆钮上方。
     圆钮顶 = 22 + 40 + 底安全区 = 62px+安全区; toast 底边 76px+安全区 (比圆钮顶高 14px), 横向居中、最宽 视口-32px, 一行放不下才折行; 桌面 (>640) 仍是右下 right:20px 不变 */
  .toast{right:auto;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center;transform:translate(-50%,60px)}
  .toast.show{transform:translate(-50%,0)}
  .menu-fab{display:flex;position:fixed;top:calc(var(--sat) + 4px);left:8px;z-index:210;width:34px;height:34px;align-items:center;justify-content:center;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:17px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08);padding:0}
  body.sidebar-open .menu-fab{display:none}
  body.sidebar-open .sidebar-backdrop{display:block}
  .layout{flex-direction:column}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  /* v630 弹窗右侧被切: 1fr=minmax(auto,1fr) 会被子项最小内容宽撑开(编辑有平台/链接时 340→386px), 改 minmax(0,1fr)+子项 min-width:0 */
  .fg{grid-template-columns:minmax(0,1fr)}
  .fg>*{min-width:0}
  /* 「上传平台/商家上传日期/帖子链接」那行(app.js 内联 1fr 1fr 1.6fr): 手机下平台+日期各半行, 链接独占一行 */
  .fg>.f.full[style*="1.6fr"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .fg>.f.full[style*="1.6fr"]>:nth-child(3){grid-column:1/-1}
  .f.full{grid-column:1}
  .modal{width:100%;max-width:100%;margin:0;border-radius:16px 16px 0 0;position:fixed;bottom:0;max-height:92vh}
  .overlay{align-items:flex-end}

  /* Topbar — 桌面 flex 一行 → 手机横向 scroll, 防止文字纵向被挤换行 */
  /* padding-left 46px 给浮动 menu-fab (34 + 8 边距 + 4 间) 留位 */
  .topbar{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;padding:3px 8px 3px 46px;gap:5px;-webkit-overflow-scrolling:touch;min-height:42px;box-sizing:border-box}
  .topbar > *{flex-shrink:0;white-space:nowrap}
  .topbar h2{font-size:12px;margin:0;white-space:nowrap}
  .topbar::-webkit-scrollbar{height:0}
  /* 2026-09-13 Remy 手机报告: 工具栏能横滑但原生滚动条被上面这行藏掉了, 静止状态完全看不出「还能往右滑」,
     用户以为按钮就是被裁掉了。加一个贴在右边缘的渐变+箭头, 只在「还有内容没滑到」时显示, 滑到底自动消失
     (状态由 app.js initTopbarScrollHints() 维护, 切 .tb-scrollable/.tb-at-end 两个 class) */
  .topbar.tb-scrollable:not(.tb-at-end)::after{
    content:'›';
    position:absolute;top:0;right:0;bottom:0;width:30px;
    display:flex;align-items:center;justify-content:flex-end;padding-right:3px;
    font-size:15px;font-weight:700;line-height:1;color:var(--text2);
    background:linear-gradient(to right, transparent, var(--surface) 60%);
    pointer-events:none;
  }

  /* ── 2026-10-04 手机工具条候选 A (稿 design-review-mobile-toolbar-round2-2026-10-04.html): 顶栏 42px 不横滑, 选择/缩放/清筛进「⋯」弹层, 搜索点 🔍 展开, 不新增右下浮钮 ── */
  .topbar.tb-bar{overflow:visible;height:42px;min-height:42px;padding:0 8px 0 46px;gap:0;align-items:center}
  .topbar.tb-bar::after{display:none !important}
  /* v639 报价单页顶栏发糊 (Remy 真机): 报价单页的顶栏没有 .tb-bar, 吃到上面 .topbar 的 overflow-x:auto + -webkit-overflow-scrolling:touch, iOS 会把它做成独立滚动合成层, 文字被重新光栅化发糊; 画廊/裸石页顶栏是 .tb-bar (overflow:visible) 所以清楚。
     这一页顶栏内容 (标题+新建钮+计数) 320 宽也放得下, 不需要横滑, 改成跟画廊页一样 overflow:visible, 并关掉横滑提示渐变。只改报价单页, 其余页面顶栏不动 */
  #view-quotes .topbar{overflow:visible}
  #view-quotes .topbar::after{display:none !important}
  /* 手机顺序: 排序(1) → 🔍(2) → 添加(3) → ⋯(4) (珍珠页无 .tb-ord, 靠 DOM 顺序) */
  .tb-ord > .tb-sort{order:1}
  .tb-ord > .tb-search-btn{order:2}
  .tb-ord > .tb-add{order:3}
  .tb-ord > .tb-more-btn{order:4}
  .tb-bar > h2{margin:0 4px 0 0}
  .tb-bar > .view-toggle{position:relative;height:42px;padding:0;background:none;border-radius:0;gap:0;align-items:stretch;margin:0 !important}
  .tb-bar > .view-toggle::before{content:'';position:absolute;left:0;right:0;top:6px;bottom:6px;background:var(--surface2);border-radius:8px}
  .tb-bar > .view-toggle .vt-btn{position:relative;isolation:isolate;height:42px;min-height:42px;padding:0 7px;font-size:12px;background:none !important;box-shadow:none !important;border-radius:0;color:var(--text2)}
  .tb-bar > .view-toggle .vt-btn.active{color:var(--text)}
  .tb-bar > .view-toggle .vt-btn.active::before{content:'';position:absolute;left:1px;right:1px;top:9px;bottom:9px;background:var(--surface);border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:-1}
  .tb-bar .filter-toggle-btn{position:relative;isolation:isolate;height:42px;min-height:42px;min-width:44px;padding:0 6px;border:0;background:none !important;border-radius:0;font-size:11px;justify-content:center}
  .tb-bar .filter-toggle-btn::before{content:'';position:absolute;left:2px;right:2px;top:7px;bottom:7px;border:1px solid var(--border);border-radius:7px;background:var(--surface);z-index:-1}
  .tb-bar .filter-toggle-btn.active::before{border-color:var(--accent);background:var(--chip-active-bg)}
  .tb-bar .tb-t{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:42px;min-height:42px;min-width:38px;padding:0 2px;border:0 !important;border-radius:0;background:none !important;color:var(--text2);font-family:inherit;line-height:1;cursor:pointer}
  .tb-bar .tb-t .tb-v{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:28px;min-width:28px;padding:0 5px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:12px}
  .tb-bar .tb-t .tb-sum{display:none}
  .tb-bar .tb-add .tb-v{background:var(--accent2);border-color:var(--accent2);color:#fff}
  .tb-bar .tb-sort.active .tb-v{background:var(--chip-active-bg);border-color:var(--accent);color:var(--accent)}
  .tb-bar .tb-search-btn,.tb-bar .tb-more-btn{display:inline-flex}
  .tb-bar .tb-dot{position:absolute;top:6px;right:5px;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:var(--accent2);border:2px solid #fff;display:none}
  .tb-bar:has(.tb-search-wrap input:not(:placeholder-shown)) .tb-search-btn .tb-dot{display:block}
  /* 搜索展开层 */
  .tb-bar .tb-search-wrap{display:none;position:absolute;top:0;left:46px;right:0;height:42px;background:var(--surface);border-bottom:1px solid var(--border);z-index:35;align-items:center;gap:6px}
  .tb-bar.tb-search-open .tb-search-wrap{display:flex}
  .tb-bar .tb-search-wrap > input{flex:1 1 0;min-width:0;width:auto !important;height:30px !important;padding:0 12px !important;border:1px solid var(--accent) !important;border-radius:15px !important;font-size:12px;order:0}
  .tb-bar .tb-search-wrap > #pearl-id-filter{flex:0 0 104px}
  .tb-bar .tb-search-close{display:block;flex:0 0 auto;width:44px;height:42px;border:0;background:none;color:var(--text2);font-size:15px;cursor:pointer}
  /* 「⋯」弹层 (v644 收紧, Remy 拍板对照稿 design-review-more-menu-and-count-chip-2026-10-11 最终方案: 宽 200 / 圆角 var(--radius)=10 / 每行 36 / 左右内边距 12 / 去末行底线 / 手机菜单里隐藏缩放行的「⤢」图标 / 珍珠按钮内边距 8) */
  .tb-bar .tb-more-wrap{display:none;position:absolute;top:44px;right:8px;width:200px;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:55;overflow:hidden}
  .tb-bar.tb-more-open .tb-more-wrap{display:flex}
  .tb-bar .tb-more-wrap > .btn,.tb-bar .tb-more-wrap > .filter-clear-btn{width:100%;height:36px !important;min-height:36px;margin:0;padding:0 12px !important;border:0 !important;border-radius:0 !important;background:none !important;font-size:var(--fs-md);justify-content:flex-start;gap:8px;order:0}
  .tb-bar .tb-more-wrap > .btn{color:var(--text)}
  .tb-bar .tb-more-wrap > .filter-clear-btn{color:var(--text2);order:3}
  .tb-bar .tb-more-wrap > .filter-clear-btn.show{color:#e57373}
  /* 行分隔线: 菜单行靠 flex order 排序, :last-child 不等于视觉最后一行, 所以不用「底线 + 去末行」, 改成「视觉第 2 行起画顶线、第 1 行 (选择 / 画廊表格) 不画」: 缩放行 order:1 和清除行 order:3 各画顶线 */
  .tb-bar .tb-more-wrap > .filter-clear-btn{border-top:1px solid var(--border) !important}
  .tb-bar .tb-d{display:none}
  .tb-bar .tb-m{display:inline}
  .tb-bar .tb-more-wrap > .tb-scale{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;margin:0;border-top:1px solid var(--border);order:1;font-size:var(--fs-md);color:var(--text)}
  .tb-bar .tb-more-wrap > .tb-scale .scale-icon{display:none}
  .tb-bar .tb-more-wrap > .tb-scale .scale-body{display:flex;flex:1;align-items:center;gap:8px}
  .tb-bar .tb-more-wrap > .tb-scale input[type=range]{flex:1;width:auto;min-width:0}
  .tb-bar .tb-more-wrap > .view-toggle{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;margin:0 !important;border-radius:0;background:none}
  .tb-bar .tb-more-wrap > .view-toggle::before{content:'▦ 画廊 / 表格';margin-right:auto;font-size:var(--fs-md);color:var(--text)}
  .tb-bar .tb-more-wrap > .view-toggle .vt-btn{height:28px;padding:0 8px;font-size:12px;border:1px solid var(--border)}
  .tb-bar .tb-more-wrap > .view-toggle .vt-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(107,78,46,.1)}

  /* Mobile header 紧凑 — 跟 desktop 高度对齐, font 11px */
  .btn,.vt-btn,.filter-toggle-btn,.filter-clear-btn{min-height:26px;padding-left:7px;padding-right:7px;font-size:11px}
  .btn-icon{min-width:26px}

  /* Filter / 批量 bar — 移动端更紧凑
     注意: .filter-panel 折叠靠 max-height:0+overflow:hidden(非 display:none), padding 不会被 max-height 裁掉,
     之前把 padding 无条件套在 .filter-panel 上 → 收起状态仍留 12px(6+6) 幽灵空白, 撑出「工具栏行→chip行」间隙 (2026-09-13 Remy 二次报告修正) */
  .batch-bar{padding:6px 10px}
  /* 窄屏没「太宽」问题, 卡片回到铺满 (桌面才收成左边小卡) */
  .filter-bar-inner{width:auto !important;max-width:100% !important;margin:4px 0 !important}
  .filter-panel .fb-twocol{gap:6px !important;grid-template-columns:1fr !important}
  .filter-panel .fb-col-header{padding-bottom:3px !important;gap:4px !important}
  .filter-panel .fb-col-title{font-size:10.5px !important}
  .filter-panel.open{max-height:none;padding:5px 10px}
  .fb-icon-btn{padding:2px 8px !important;font-size:11px !important;min-height:24px !important}
  /* 空 body: 去掉占位 (无) + 折叠空间 */
  .fb-col-body:empty::after{display:none}
  .fb-col-body:empty{min-height:0;padding:0;margin:0;display:none}
  .fb-col-body{gap:4px !important}
  /* 空白筛选 chips — mobile: 只显 🚨 待整理 + 更多 button, 其它默认隐藏 */
  .empty-chips-bar{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:5px 12px !important;gap:5px}
  .empty-chips-bar > *{flex-shrink:0}
  .empty-chips-bar::-webkit-scrollbar{height:0}
  .empty-chips-bar .label{display:none !important}
  .empty-chips-bar .ec-toggle{display:inline-flex !important}
  .empty-chips-bar:not(.expanded) .empty-chip:not([data-empty-key="__dirty__"]){display:none}
  .empty-chips-bar:not(.expanded) .sep{display:none}
  .empty-chip{padding:2px 8px !important;font-size:10.5px !important;line-height:18px !important}
  /* Sort popup 移动端定位 */
  .sort-popup{top:50px;right:8px;left:8px;width:auto;max-width:none}

  /* Stats — 横向 scroll 单行不换行 (省垂直空间) */
  .stats{flex-wrap:wrap !important;gap:2px 12px;padding:4px 12px;font-size:11px}
  .stats > *{white-space:nowrap}
  .stats > *{flex-shrink:0;white-space:nowrap}
  .stats::-webkit-scrollbar{height:0}
  /* 数字缩小到和正文同级，避免 stats 行撑太高 */
  .stat-v{font-size:12px !important}
  .stat-l{font-size:9px !important}

  /* Pagination — 紧凑: 隐藏「首页/尾页」, 缩字 + 缩 padding */
  .pager-bar{flex-wrap:nowrap;gap:4px;padding:6px 8px;font-size:11px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pager-bar > *{flex-shrink:0}
  .pg-first,.pg-last{display:none}
  .pager-info{font-size:10px;margin:0 4px}
  .pager-jump{width:42px;height:32px;font-size:12px;padding:0 4px}
  .pager-bar button{min-height:32px !important;padding:0 8px !important;font-size:11px}

  /* 价格参考表 — 手机紧凑 */
  .pr-table{font-size:11px}
  .pr-cell-n{font-size:10px}
  .pr-table td{padding:4px 8px}
  .pr-table thead th .pr-th-label{padding:6px 10px}
  #pricing-result{max-height:calc(100vh - 220px);overflow:auto;-webkit-overflow-scrolling:touch}
  /* Pricing filter 表单 — 手机 2 列 grid, 占屏 40%→ ~15% */
  #pricing-form{padding:8px 10px !important;gap:6px 10px !important;display:grid !important;grid-template-columns:1fr 1fr}
  #pricing-form label{font-size:12px !important;display:flex;align-items:center;gap:4px;min-width:0}
  #pricing-form select,#pricing-form input{font-size:12px !important;height:32px !important;min-width:0;flex:1}
  #pricing-form input[type="text"]{grid-column:1/-1}

  /* 卡片画廊 — 手机一行 2-3 个 */
  .gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
  .gallery.stone-gallery{grid-template-columns:repeat(auto-fill,minmax(calc(130px * var(--stone-scale,1)),1fr))}
  .gallery.prod-gallery{grid-template-columns:repeat(auto-fill,minmax(calc(130px * var(--prod-scale,1)),1fr))}
  .gallery.stone-gallery .card-img,
  .gallery.stone-gallery .card-img-wrap,
  .gallery.stone-gallery .card-img-placeholder{height:calc(110px * var(--stone-scale,1))}
  .gallery.prod-gallery .card-img,
  .gallery.prod-gallery .card-img-wrap,
  .gallery.prod-gallery .card-img-placeholder{height:calc(110px * var(--prod-scale,1))}
  .card-img-wrap,.card-img-placeholder{height:110px}
  .card-body{padding:6px 8px;font-size:11px}
  .card-title{font-size:12px}
  .card-price{font-size:12px}
}

/* ══ 2026-09-26 375px 裸石/商品/珍珠表两行式布局(第5轮, 设计稿 design-review-375px-two-line-row-2026-09-26.html): 每条记录 .tsm2-row 是 flex 容器, 第一行 名字(.tsm2-name 吃剩余宽度)+数量+价格(.tsm2-price 不压缩), 第二行 .tsm2-meta 自带 flex-wrap; 无嵌套表/无 sticky/无横滑。渲染走 app.js renderStoneTableMobile2Line / tsm2GenericRows。 ══ */
@media(max-width:640px){
  /* 2026-09-26: 右下角 #qc-fab(z800)会盖住列表最底行价格, 所以列表底部留 padding-bottom:78px(22+44+12) 让最后一行能滑到圆钮上方。 */
  .tsm2-wrap{overflow-x:hidden;padding-bottom:78px}      /* overflow-x 是双保险: 就算某处意外撑宽也不出滚动条, 而是内容自己挤裁 */
  /* display:block(而非默认 table): <table> 留着 display:table 的话, 底下 tbody 被改成 display:block
     后两者的盒模型对不上(anonymous table box 生成规则), width:100% 会失效, 改按内容自身最大宽度撑,
     实测量出来 862px(真实踩到的坑, 不是猜的)。整份表都用不到原生表格布局算法(排版全靠 flex),
     table/tbody 都改 block 是这类"响应式表格"最标准的做法。 */
  .tsm2-table{display:block;width:100%;max-width:100%;border-collapse:collapse;table-layout:auto}
  /* 这行本身就是根治第二个坑用的: 全局 `.tbl-wrap table{min-width:max-content}` (这份 CSS 第 314 行,
     桌面表格故意要的行为, 内容再多也不许挤变形, 宁可横滑) 选择器特异度是"1 class + 1 标签",
     比刚才那条 `.tsm2-table` 高, 会赢——而 flex 容器的 max-content 尺寸是"假装完全不换行时多宽",
     跟 .tsm2-meta 会不会真的换行无关, 实测量出来正好是 862px(把第一行 3 项 + 第二行 4 项全部
     摊成一条线的宽度)。这里用同等特异度("1 class + 1 标签")但写在后面, 靠层叠顺序赢回来, 把
     min-width 归零, 表格才能真正跟着容器收缩到 335px, 这也是 862px 那次真机实测直接抓到的坑,
     不是读 CSS 代码看出来的。 */
  .tsm2-wrap table{min-width:0}
  .tsm2-table tbody{display:block;width:100%}
  .tsm2-row{
    display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:3px;
    width:100%;max-width:100%;box-sizing:border-box;padding:10px 12px;
    border-bottom:1px solid var(--border);cursor:pointer;
  }
  .tsm2-row:active{background:var(--surface2)}
  .tsm2-row td{display:block;padding:0;border:0;background:transparent;max-width:100%}
  /* 2026-10-03 实测补: 全局 `.tbl-wrap tbody td{padding:3px 8px;text-align:center}` (特异度 0,1,2) 压过上面
     那行 `.tsm2-row td` (0,1,1), 导致 padding:0 其实一直没生效 —— 名字/克拉/价格三格各白占左右 8px (共 48px),
     且文字全被居中(短名字飘在中间、长短行左缘对不齐, 价格也没靠右)。这里用 0,2,1 的写法赢回来:
     格内 padding 归零 + 左对齐, 价格格右对齐。 */
  .tsm2-wrap .tsm2-row td{padding:0;text-align:left}
  /* 底色/斑马纹/选中态改由整行承担: 全局 .tbl-wrap tbody tr:nth-child(even) td 只给 td 上色, 一行里名字格/meta 格
     各涂一块、格子之间露出底下的米色, 看起来像补丁; 这里 td 一律透明, 行自己隔行淡底、选中时整行深一档 */
  .tsm2-wrap tbody tr.tsm2-row td{background:transparent}
  .tsm2-wrap tbody tr.tsm2-row:nth-child(even){background:var(--surface2)}
  .tsm2-wrap tbody tr.tsm2-row.selected-row:nth-child(n){background:rgba(107,78,46,.15)}
  /* 同一个特异度问题的另外两处 (ui-auditor 看真机截图抓到): ①`.tsm2-row td{display:block}` (0,1,1) 压过
     `.tsm2-meta{display:flex}` (0,1,0), meta 其实一直是普通块, 里面 column-gap/row-gap 全没生效, 字段标签和上一个
     字段的值粘成一串 ②全局 `tbody tr:nth-child(even) td` 的底色盖过 transparent, 第二行后面一块浅色底。
     这里同样用 0,2,1 赢回来; 值用正文色、标签保持灰色拉开层级。 */
  .tsm2-wrap .tsm2-row td.tsm2-meta{display:flex}
  .tsm2-meta .tsm2-m{color:var(--text)}
  .tsm2-wrap .tsm2-row td.tsm2-price{text-align:right}
  .tsm2-cb{order:0;flex:0 0 auto}
  .tsm2-cb:empty{display:none}
  /* flex-basis 必须是 0 不能是 auto (ui-auditor 走查抓到): basis:auto 时这一格的"假设宽度"按
     文字本身算, 而 flex 容器是先拿各格的假设宽度决定在哪里换行、之后才在同一行内压缩 —— 名字一长
     (比如「Tourmaline 碧玺 · Paraiba」)假设宽度就把单价/总价挤到第二行去了, 一条记录变三行,
     跟"两行式"这个定案对不上(短名字的记录又是正常两行, 长短不一看着更乱)。basis:0 等于告诉排版
     "这一格不占初始宽度, 有多少剩余给多少", 换行判断里它永远不构成换行理由, 名字再长也只是自己
     被省略号截断, 价格稳稳留在第一行右边。min-width:0 是配套的(不写的话 flex 默认最小宽度是
     min-content, 长名字照样能把行撑开)。 */
  .tsm2-name{
    order:1;flex:1 1 0;min-width:0;font-weight:400;font-size:13px;color:var(--text);
    overflow:hidden;overflow-wrap:anywhere;
  }
  /* 2026-10-04 第二轮: 名字允许折最多 3 行 (2 行时商品长标题仍有 6/60 被截, 放宽到 3) (之前 nowrap+省略号, 375px 首页 11/60 行被截)。-webkit-box+line-clamp
     必须挂在 0,2,1 选择器上才赢得过 `.tsm2-row td{display:block}`; 没折行的行高度不变(box 高度跟内容走)。
     克拉/价格仍在第一行, align-items:baseline 对齐名字第一行。 */
  .tsm2-wrap .tsm2-row td.tsm2-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
  /* 选择模式: 勾选框占第一行最左, 第二行 meta 缩进到跟名字对齐 (18px 框 + 8px column-gap = 26px, 加 padding-left) */
  .tsm2-wrap .tsm2-row:has(> .tsm2-cb:not(:empty)) td.tsm2-meta{padding-left:26px;box-sizing:border-box}
  .tsm2-qty{order:2;flex:0 0 auto;font-size:11px;color:var(--text2);white-space:nowrap}
  /* flex:0 0 auto + white-space:nowrap = 永远按内容自身宽度渲染, 绝不参与行内压缩/换行截断,
     这是"375px 下价格必须完整可见"这条硬要求的结构性保证, 不是靠量出来的宽度数字硬凑 */
  .tsm2-price{order:3;flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap;line-height:1.3}
  .tsm2-price .tsm2-unit{font-size:10px;color:var(--text2)}
  .tsm2-price .tsm2-total{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
  .tsm2-meta{
    order:4;flex:1 1 100%;display:flex;flex-wrap:wrap;column-gap:10px;row-gap:2px;
    font-size:11px;color:var(--text2);min-width:0;
  }
  .tsm2-meta .tsm2-m{max-width:100%;overflow-wrap:break-word;word-break:break-word}
  .tsm2-meta .tsm2-m::before{content:attr(data-lbl);color:var(--text2);opacity:.6;margin-right:3px}
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}

/* ── LIGHT THEME ── */
body.theme-light {
  --bg:#f4f4f8; --surface:#ffffff; --surface2:#ededf3; --border:#d8d8e8;
  --text:#1a1a2e; --text2:#60608a; --shadow:0 4px 20px rgba(0,0,0,.08);
}
body.theme-light .lock-box { box-shadow:0 8px 32px rgba(0,0,0,.1); }
body.theme-light table thead th { background:#e8e8f0; }
body.theme-light .card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }

/* ── WARM THEME ── */
body.theme-warm {
  --bg:#1a1510; --surface:#241e17; --surface2:#2e271e; --border:#3e3428;
  --text:#f0e8d8; --text2:#a09070; --accent:#d4a85c; --accent2:#a07a38; --accent-text:var(--accent-text);
  --shadow:0 8px 32px rgba(0,0,0,.5);
  /* v618: 暗色下选中底色 = accent(212,168,92) 的 22% 透明度 (原 107,78,46 的 10% 对暗底几乎看不见, 对比度 1.07); 实测对父底 1.55 / 对页面底 1.70, 金字对底 4.84 */
  --chip-active-bg:rgba(212,168,92,.22);
}

/* ── SETTINGS MODAL ── */
.settings-section { margin-bottom:24px; }
.settings-section h4 { font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:700;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border); }
.theme-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.theme-btn { border:2px solid var(--border);border-radius:10px;padding:12px 8px;cursor:pointer;text-align:center;font-size:12px;font-weight:600;transition:.15s;background:var(--surface2);color:var(--text2); }
.theme-btn:hover { border-color:var(--accent); }
.theme-btn.active { border-color:var(--accent);color:var(--accent);background:rgba(107,78,46,.08); }
.theme-preview { font-size:20px;display:block;margin-bottom:4px; }
.accent-grid { display:flex;gap:10px;flex-wrap:wrap; }
.accent-dot { width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.15s; }
.accent-dot.active,.accent-dot:hover { border-color:var(--text); }

/* ── NOTION IMPORT ── */

/* ── SEARCHABLE SELECT ── */
.ss-wrap{position:relative}
.ss-display{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 28px 8px 10px;font-size:13px;cursor:pointer;width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-display::after{content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text2);font-size:10px;pointer-events:none}
.ss-drop{display:none;position:fixed;min-width:200px;width:max-content;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:8px;z-index:9999;max-height:320px;overflow:hidden;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ss-drop.open{display:flex}
.ss-search{border:none;border-bottom:1px solid var(--border);background:var(--surface2);color:var(--text);padding:6px 10px;font-size:11px;outline:none;width:100%;box-sizing:border-box}
.ss-list{overflow-y:auto;max-height:240px}
.ss-item{padding:5px 10px;font-size:11px;cursor:pointer;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ss-item:hover,.ss-item.active{background:var(--accent);color:var(--accent-text)}
.ss-item .ss-count{color:var(--text2);font-size:10px;font-weight:400;flex:none;opacity:.75}
.ss-item:hover .ss-count,.ss-item.active .ss-count{color:var(--accent-text);opacity:.8}
.ss-item.hidden{display:none}
.ss-empty{padding:8px 10px;font-size:11px;color:var(--text2);text-align:center}

/* ── QUICK CAPTURE FAB ── */
/* 2026-06-13 桌面端 left:226px (210 侧边栏 + 16) 进内容区, 避免压住侧边栏底部版本号; 手机端侧边栏滑出屏外, media query 改回 left:16px */
#qc-fab{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:226px;z-index:800;background:var(--accent2);color:var(--accent-text);border:none;border-radius:50%;width:44px;height:44px;padding:0;font-size:22px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);display:none;align-items:center;justify-content:center;transition:transform .15s,background .15s}
#qc-fab:hover{background:#a0632a;transform:scale(1.08)}
#qc-fab .qf-icon{font-size:22px;line-height:1}

/* ── QUICK CAPTURE OVERLAY ── */
#qc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:850;display:none;align-items:flex-end;justify-content:center}
#qc-overlay.open{display:flex}
#qc-panel{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:640px;max-height:94vh;overflow-y:auto;display:flex;flex-direction:column}
.qc-hd{display:flex;align-items:center;padding:10px 14px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.qc-hd h3{flex:1;font-size:14px;font-weight:400;color:var(--accent)}
.qc-close{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.qc-body{padding:10px 14px;flex:1;display:flex;flex-direction:column;gap:8px}
.qc-sec{font-size:10px;color:var(--text2);font-weight:400;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.qc-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qc-photo-btn{background:var(--surface2);border:2px dashed var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;color:var(--text2);transition:.15s;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px}
.qc-photo-btn:hover{border-color:var(--accent);color:var(--accent)}
.qc-photo-btn .qpb-icon{font-size:20px}
.qc-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qc-row.row-3{grid-template-columns:1fr 1fr 1fr}
.qc-f{display:flex;flex-direction:column;gap:3px}
.qc-f.full{grid-column:1/-1}
.qc-f label{font-size:10.5px;color:var(--text2);font-weight:400}
.qc-f input,.qc-f select,.qc-f textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 9px;font-size:12px;outline:none;width:100%;box-sizing:border-box}
.qc-f input:focus,.qc-f select:focus,.qc-f textarea:focus{border-color:var(--accent)}
.qc-f textarea{resize:vertical;min-height:42px;font-family:inherit}
.qc-sup-wrap,.qc-ac-wrap{position:relative}
.qc-sup-drop,.qc-ac-drop{display:none;position:absolute;left:0;right:0;top:calc(100% + 2px);background:var(--surface);border:1px solid var(--border);border-radius:6px;max-height:140px;overflow-y:auto;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.qc-sup-drop.open,.qc-ac-drop.open{display:block}
.qc-sup-item,.qc-ac-item{padding:4px 8px;font-size:11px;line-height:1.3;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text)}
.qc-sup-item:last-child,.qc-ac-item:last-child{border-bottom:none}
.qc-sup-item:hover,.qc-ac-item:hover{background:var(--surface2)}
.qc-sup-new{color:var(--accent);font-weight:400;position:sticky;top:0;background:var(--surface);z-index:1;border-bottom:1px solid var(--accent2)}
.qc-total{background:rgba(107,78,46,.1);border:1px solid var(--accent2);border-radius:7px;padding:7px 11px;font-size:13px;font-weight:400;color:var(--accent);text-align:center;display:none}
.qc-ft{padding:10px 14px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}
/* v633: 必须放在 .qc-ft 基础规则之后 (同权重后来者赢); env=0 时仍是 20px */
@media(max-width:640px){
  .qc-ft{padding-bottom:max(20px,calc(4px + env(safe-area-inset-bottom,0px)))}
}
.qc-save{width:100%;background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:400;cursor:pointer;transition:.15s}
.qc-save:hover{background:#d4b47a}
.qc-save:disabled{opacity:.5;cursor:default}