/* ==========================================================================
   ShoeImage · WEB2.0-Fable  —  按 DesignCode UI（Figma MCP 读取的实际参数）重做的视觉系统
   容器：白 60%→50% 纵向渐变 + 1px 纯白描边 + 圆角 10 + 背景模糊 20，三档投影 sm / xl / strong
   按钮：圆角 8、内边距 6×16、Inter Medium 13/20；Secondary = 白 10%→5%，Primary = 白 50%→25%
   菜单选中：左侧 1px #2670E9 发光线 + 向右淡出的蓝色渐变；分割线：中间实两端虚
   ========================================================================== */

:root {
  /* Foreground */
  --text: #000000;
  --text-2: rgba(0, 0, 0, 0.7);
  --muted: rgba(0, 0, 0, 0.5);
  --muted-2: rgba(0, 0, 0, 0.35);
  --divider: rgba(0, 0, 0, 0.1);
  --swatch-line: rgba(0, 0, 0, 0.28);

  /* Container（Light Mode） */
  --container: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.5));
  --container-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.68));
  --container-border: #ffffff;
  --bg-secondary: rgba(255, 255, 255, 0.1);
  --bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.25));
  --btn-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  --btn-primary: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.25));
  --search-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05));
  --divider-line: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  --blur: 20px;
  --blur-sm: 10px;

  /* Shadow-Blur */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 5px 10px rgba(0, 0, 0, 0.1), 0 15px 30px rgba(0, 0, 0, 0.1), 0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 5px 10px rgba(0, 0, 0, 0.05), 0 15px 30px rgba(0, 0, 0, 0.15), 0 20px 40px rgba(0, 0, 0, 0.25);

  /* Accent（Button Primary Color / Side Menu selected） */
  --accent: #0a84ff;
  --accent-2: #0060df;
  --menu-accent: #2670e9;
  --menu-selected: linear-gradient(90deg, rgba(38, 112, 233, 0.3), rgba(38, 112, 233, 0));
  --accent-ring: rgba(38, 112, 233, 0.35);

  /* 状态色（iOS 系统色），只用于标签小圆点和色卡 */
  --ok: #1f9d4d; --warn: #ff9f0a; --bad: #ff453a; --info: #64d2ff; --violet: #bf5af2;
  --spot: #1f9d4d; --spot-bg: rgba(48, 209, 88, 0.14);

  /* Radius */
  --r-container: 10px;
  --r-button: 8px;
  --r-inner: 8px;

  /* 壁纸（Background Web 1：#F2F3FA 底 + 顶部 #4069E4 渐变 + 模糊色块 + 网格） */
  --page: #f6f7fb;
  --wp-top: #4069e4;
  --wp-top-alpha: 0.36;
  --wp-b1: #5f8dff; --wp-b2: #b39cff; --wp-b3: #ffb0d9; --wp-b4: #8de3ff;
  --wp-blob-alpha: 0.4;
  --grid-line: rgba(0, 0, 0, 0.12);

  --rail: 384px; --topbar: 60px;
  --font: "Inter", "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, "Microsoft YaHei", monospace;
}

[data-theme="dark"] {
  --spot: #30d158; --spot-bg: rgba(48, 209, 88, 0.18);
  --ok: #30d158;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --muted: rgba(255, 255, 255, 0.52);
  --muted-2: rgba(255, 255, 255, 0.36);
  --divider: rgba(255, 255, 255, 0.12);
  --swatch-line: rgba(255, 255, 255, 0.38);
  /* 深色容器：不用纯黑压底，改用白色低透明度的磨砂层（参考成品框），整体偏灰 */
  --container: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035));
  --container-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.07));
  --container-border: rgba(255, 255, 255, 0.15);
  --bg-secondary: rgba(255, 255, 255, 0.045);
  --bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.1));
  --btn-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
  --btn-primary: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.11));
  --search-bg: linear-gradient(0deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  --divider-line: radial-gradient(50% 100% at 50% 50%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 5px 10px rgba(0, 0, 0, 0.2), 0 15px 30px rgba(0, 0, 0, 0.2), 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-strong: 0 5px 10px rgba(0, 0, 0, 0.2), 0 15px 30px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.4);
  --accent-2: #409cff;
  --page: #0b0c10;
  --wp-top: #1b2748;
  --wp-top-alpha: 0.38;
  --wp-b1: #232a44; --wp-b2: #27243b; --wp-b3: #2e2634; --wp-b4: #1f2d33;
  --wp-blob-alpha: 0.6;
  --grid-line: rgba(255, 255, 255, 0.08);
}

/* ---------- 基础 ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* 页面最窄 1200px：再窄不再压缩，改为横向滚动查看右侧内容 */
html { overflow-x: auto; overflow-y: hidden; }
body { min-width: 1200px; display: flex; flex-direction: column; color: var(--text); font: 400 13px/20px var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; background: var(--page); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: 0; }
button { font: inherit; color: inherit; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--container-border); border-radius: 6px; padding: 3px 6px; background: var(--bg-secondary); }
.mono { font-family: var(--mono); }
.hint { color: var(--muted-2); font: 400 12px/18px var(--font); display: inline-flex; align-items: center; gap: 6px; }
.hint svg { width: 14px; height: 14px; }
.only-dark { display: none; }
[data-theme="dark"] .only-dark { display: block; }
[data-theme="dark"] .only-light { display: none; }

/* ---------- 壁纸 ---------- */

.wallpaper { position: fixed; inset: 0; z-index: -1; background: var(--page); overflow: hidden; }
.wallpaper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--wp-top), transparent 70%); opacity: var(--wp-top-alpha); }
.wallpaper::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(180deg, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: var(--wp-blob-alpha); animation: drift 30s ease-in-out infinite alternate; }
.b1 { width: 60vw; height: 60vw; left: -18vw; top: -24vw; background: var(--wp-b1); }
.b2 { width: 50vw; height: 50vw; right: -14vw; top: -12vw; background: var(--wp-b2); animation-delay: -9s; }
.b3 { width: 54vw; height: 54vw; right: 2vw; bottom: -28vw; background: var(--wp-b3); animation-delay: -16s; }
.b4 { width: 40vw; height: 40vw; left: 20vw; bottom: -22vw; background: var(--wp-b4); animation-delay: -22s; }
.grain { display: none; }
/* 色调滤镜：当前条目的色卡通过 color 混合模式给整张壁纸染色，白色（无）时透明 */
.tone { position: absolute; inset: 0; background: var(--page-tint, transparent); mix-blend-mode: color; opacity: .60; transition: background .45s ease, opacity .45s ease; pointer-events: none; }
[data-theme="dark"] .tone { mix-blend-mode: screen; opacity: .1; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, 3vw, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* ---------- 容器 ---------- */

.glass, .card, .hero, .drawer {
  background: var(--container);
  border: 1px solid var(--container-border);
  border-radius: var(--r-container);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-xl);
}
.card { position: relative; box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 12px; position: relative; }
.card-head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--divider-line); }
.card-head h2 { font: 500 16px/24px var(--font); color: var(--text); }
.card-head .num { font: 400 12px/18px var(--mono); color: var(--muted); border: 1px solid var(--divider); padding: 0 8px; border-radius: 6px; }
.card-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 16px 20px 20px; }

/* ---------- 按钮（Button Secondary / Primary Glass / Primary Color） ---------- */

.btn, .btn.sm, .btn.xs {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; min-height: 32px; padding: 0 16px;
  border: 1px solid var(--container-border); border-radius: var(--r-button);
  background: var(--btn-secondary); color: var(--text);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  font: 500 13px/20px var(--font); text-align: center; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.btn svg { display: none; }
.btn:hover { background: var(--btn-primary); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border-color: var(--text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost:hover { background: var(--bg-secondary); }
/* .btn 也会当成 <a> 用（QR 核对里的「定位」、抽屉里的「打开 QR 制作」），关掉默认下划线 */
a.btn { text-decoration: none; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* 焦点框：鼠标点过的按钮不留浏览器默认那圈黑框（键盘用过之后 Chromium 会把点击也算成
   「需要显示焦点」，黑框就一直挂在按钮上）；键盘 Tab 过来时给一圈主色，焦点仍然看得见 */
:focus:not(:focus-visible) { outline: none; }
button:focus-visible, a:focus-visible, label:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--menu-accent); outline-offset: 2px;
}
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--container-border); border-radius: 50%;
  background: var(--btn-secondary); color: var(--text); cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  box-shadow: var(--shadow-sm); transition: background .15s, transform .1s;
}
.icon-btn:hover { background: var(--btn-primary); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- 标签 / 分段控件 / 开关 ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px 0 7px; border-radius: 6px;
  font: 400 12px/18px var(--font); white-space: nowrap;
  background: var(--bg-secondary); color: var(--text-2); border: 1px solid var(--divider);
}
.pill.sm { height: 20px; padding: 0 7px 0 6px; font-size: 11px; gap: 5px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; }
.pill i { display: none; }
.pill-ok::before { background: var(--ok); }
.pill-bad::before { background: var(--bad); }
.pill-warn::before { background: var(--warn); }
.pill-info::before { background: var(--info); }
.pill-accent::before { background: var(--accent); }
.pill-muted { color: var(--muted); }

.seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 2px; border-radius: var(--r-button); border: 1px solid var(--divider); background: var(--bg-secondary); }
/* 轨道 2px 内边距 + 1px 边框 + 26px 按钮 = 32px，与旁边的输入框、普通按钮同高 */
.seg button { height: 26px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-2); font: 500 13px/24px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button.is-on { background: var(--btn-primary); color: var(--text); box-shadow: var(--shadow-sm); border-color: var(--container-border); }
.seg button.is-on[data-v="passed"] { color: var(--accent); }
.seg button.is-on[data-v="failed"] { color: var(--bad); }
.seg button.is-on[data-v="discuss"] { color: var(--warn); }

.toggle { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--divider); border-radius: 999px; background: var(--bg-secondary); font: 500 12px/18px var(--font); color: var(--text-2); cursor: pointer; }
.toggle i { width: 26px; height: 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.2); position: relative; transition: background .15s; }
[data-theme="dark"] .toggle i { background: rgba(255, 255, 255, 0.28); }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.toggle.is-on { color: var(--text); }
.toggle.is-on i { background: var(--accent); }
.toggle.is-on i::after { transform: translateX(12px); }

/* ---------- 顶栏 ---------- */

.topbar { position: relative; z-index: 20; flex: none; height: var(--topbar); margin: 10px 12px 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 16px; padding: 0 12px 0 10px; }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tb-title h1 { font: 500 16px/24px var(--font); }
.tb-note { color: var(--text-2); font: 400 13px/20px var(--font); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-stats { display: flex; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; }
.stat { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--divider); font: 400 12px/18px var(--font); color: var(--text-2); }
.stat b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.stat .bar { width: 56px; height: 4px; border-radius: 2px; background: var(--divider); overflow: hidden; }
.stat .bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.stat.ok .bar i, .stat.info .bar i { background: var(--ok); }

.tb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-sep { width: 1px; height: 20px; background: var(--divider); margin: 0 2px; }

/* ---------- 布局 ---------- */

.layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 12px; padding: 12px; }

/* ---------- 左：列表 ---------- */

.rail { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
.rail-tools { padding: 16px 16px 12px; display: grid; gap: 10px; }

.search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 14px;
  border: 1px solid var(--container-border); border-radius: 99px; background: var(--search-bg);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  box-shadow: var(--shadow-sm); transition: box-shadow .15s;
}
.search:focus-within { box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); }
.search svg { color: var(--text-2); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13px/20px var(--font); color: var(--text); }
.search input::placeholder { color: var(--muted); font-weight: 400; }

.chips { width: 100%; grid-auto-columns: 1fr; }
.chips button { padding: 0 6px; font-size: 12px; }

.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 8px; font: 400 12px/18px var(--font); color: var(--muted); position: relative; }
.rail-head::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--divider-line); }
.rail-head b { color: var(--text); font-weight: 500; }

.items { list-style: none; margin: 0; padding: 8px 8px 12px; overflow-y: auto; display: grid; gap: 4px; align-content: start; }

.item-wrap { position: relative; border-radius: var(--r-inner); }
.item {
  --tint: transparent;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px 12px 8px 10px;
  border: 1px solid transparent; border-radius: var(--r-inner);
  background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tint), transparent 100%); opacity: .22; pointer-events: none; transition: opacity .15s; }
/* 色卡的底色铺在行背景之上，会把悬停 / 选中的描边、投影和高亮压住：这两种状态下让它退到很淡，
   左边那道色条（::after）照旧，仍然看得出这条是什么颜色 */
.item:hover::before, .item.is-selected::before { opacity: .08; }
.item::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--tint); }
.item > * { position: relative; }
.item:hover { background: var(--bg-hover); box-shadow: var(--shadow-sm); }
.item.is-selected { background: var(--menu-selected); border-color: transparent; }
.item.is-selected:hover { box-shadow: var(--shadow-sm); }
/* 最上面一层：白描边（以及要加内阴影的话也放这儿）画在这里。
   它是行里最后一个子元素，色卡底色（::before）和选中的蓝色渐变都在它下面，盖不住它。 */
.item-edge { position: absolute; inset: 0; border-radius: var(--r-inner); pointer-events: none;
  box-shadow: none; transition: box-shadow .15s; }
.item:hover .item-edge { box-shadow: inset 0 0 0 1px var(--container-border); }
.item.is-selected::after { width: 1px; top: 0; bottom: 0; background: var(--menu-accent); box-shadow: 0 0 5px 2px rgba(38, 112, 233, 0.6); }
.item.is-selected .seq { color: var(--menu-accent); }

.item-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--r-inner); overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--container-border); box-shadow: var(--shadow-sm); }
.item-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.item-thumb.is-empty { display: grid; place-items: center; color: var(--muted-2); }

.item-body { display: grid; gap: 4px; min-width: 0; }
.item-top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
/* 编号是扫列表时最先找的东西，给它一个能站住的字号，和货号之间留开一段 */
.item-top .seq { font: 600 14px/20px var(--mono); color: var(--text-2); letter-spacing: .02em; flex: none; }
.item-top .code { font: 500 14px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-top .code.is-empty { color: var(--muted-2); }
.item-top .plus { font: 500 11px/16px var(--font); color: var(--menu-accent); background: rgba(38, 112, 233, 0.12); border-radius: 5px; padding: 0 6px; }
.item-kinds { display: flex; gap: 4px; }
.k { display: inline-flex; align-items: center; gap: 3px; font: 400 10.5px/16px var(--mono); color: var(--muted-2); padding: 0 6px; border-radius: 5px; background: var(--bg-secondary); border: 1px solid var(--divider); }
.k b { font-weight: 500; }
.k.on { color: var(--text-2); }
/* 左栏挑了某一类时，有这类图的条目把那个小标签挑出来：绿色加粗 */
.k.is-spot { color: var(--spot); font-weight: 700; border-color: var(--spot); background: var(--spot-bg); }
.k.is-spot b { font-weight: 800; }
.item-status { display: flex; gap: 4px; flex-wrap: wrap; }

.row-delete { position: absolute; top: 0; bottom: 0; right: 0; width: 84px; display: grid; place-items: center; border: 0; border-radius: var(--r-inner); background: var(--bad); color: #fff; font: 500 13px/20px var(--font); cursor: pointer; opacity: 0; transition: opacity .15s; }
.item-wrap.is-open .row-delete, .item-wrap.is-swiping .row-delete { opacity: 1; }
.item-wrap .item { will-change: transform; transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .15s; touch-action: pan-y; }
.item-wrap.is-swiping .item { transition: none; }
.item-wrap.is-open .item { transform: translateX(-92px); background: var(--container-strong); }

.item.item-add { border: 1px dashed var(--divider); }
.item.item-add:hover { border-color: var(--menu-accent); background: var(--bg-hover); }
.item.item-add .item-thumb { display: grid; place-items: center; color: var(--muted); font-size: 26px; font-weight: 300; box-shadow: none; background: var(--bg-secondary); }
.item.item-add .code { color: var(--muted); }
.add-row { display: none; }

/* ---------- 右：条目控制区 ---------- */

.main { overflow-y: auto; padding: 0 4px 30px 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 12px; align-content: start; min-height: 0; }

.hero {
  --tint: transparent;
  position: relative; z-index: 5; /* 让货号弹层盖过下面的卡片 */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 18px 20px;
  background: radial-gradient(900px 220px at 0% 0%, color-mix(in oklab, var(--tint) 35%, transparent), transparent 62%), var(--container);
}
.hero-main { display: flex; gap: 18px; align-items: center; min-width: 0; }
.hero-seq { font: 500 30px/36px var(--mono); letter-spacing: -0.02em; color: var(--text); padding-right: 18px; border-right: 1px solid var(--divider); }
.hero-seq small { display: block; font: 400 11px/16px var(--font); color: var(--muted-2); letter-spacing: .08em; }
.hero-info { display: grid; gap: 8px; min-width: 0; }
.hero-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px 0 14px;
  border: 1px solid var(--container-border); border-radius: var(--r-button); background: var(--btn-primary);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  font: 500 14px/20px var(--mono); cursor: copy; box-shadow: var(--shadow-sm); color: var(--text);
}
.code-chip:hover { box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); }
.code-chip svg { color: var(--muted); }
/* 没填货号：灰字 + 铅笔，点了弹窗填写 */
.code-chip.is-empty { color: var(--muted-2); cursor: text; font-family: var(--font); }
/* 多货号：只显示「+N 款」，鼠标移到货号或 +N 上弹出其余货号 */
.code-group { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.code-more { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 12px/18px var(--font); color: var(--menu-accent); background: rgba(38, 112, 233, 0.12); border: 1px solid rgba(38, 112, 233, 0.25); cursor: default; }
.code-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 260px;
  display: grid; gap: 4px; padding: 8px;
  background: var(--container-strong); border: 1px solid var(--container-border); border-radius: var(--r-container);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* 鼠标移出后等 2 秒再收 */
  transition: opacity .15s 2s, transform .15s 2s, visibility 0s 2.15s;
}
/* 移到别的菜单上就立刻收，不占着那 2 秒（:not(:hover) 兜底，鼠标回来照样能展开） */
.code-group.is-hushed:not(:hover) .code-pop { display: none; }
.code-group:hover .code-pop, .code-group:focus-within .code-pop, .code-group.is-pinned .code-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.code-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.code-pop-title { padding: 2px 8px 4px; font: 400 12px/18px var(--font); color: var(--muted); }
.code-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-inner); background: transparent; color: var(--text); font: 500 13px/20px var(--mono); cursor: copy; text-align: left; }
.code-pop-row:hover { background: var(--bg-hover); border-color: var(--divider); }
.code-pop-row.is-first { color: var(--menu-accent); }
.code-pop-row small { font: 400 11px/16px var(--font); color: var(--muted-2); }
.hero-status { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hero-status .sep { width: 1px; height: 14px; background: var(--divider); margin: 0 2px; }

.hero-side { display: grid; gap: 10px; justify-items: center; align-self: center; }
.hero-nav { display: inline-flex; align-items: center; gap: 6px; }
.hero-nav .icon-btn svg { display: block; }
.hero-row { display: flex; gap: 8px; align-items: center; }
.swatches { display: flex; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--swatch-line); border-radius: var(--r-button); background: var(--bg-secondary); }
/* 每个色块统一一圈相同的框线（外深内浅），深浅颜色的边缘看起来才等宽、对齐 */
.swatch { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--swatch-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; transition: transform .1s, box-shadow .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.swatch[data-value="#ffffff"] { background: #fff !important; }
[data-theme="dark"] .swatch[data-value="#ffffff"] { background: #2a2a2e !important; }
.swatch-pick { position: relative; width: 20px; height: 20px; padding: 0; border: 1px solid var(--swatch-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); border-radius: 6px; background: conic-gradient(#ff453a, #ffd60a, #30d158, #0a84ff, #bf5af2, #ff453a); cursor: pointer; overflow: hidden; }
.swatch-pick input { position: absolute; inset: -4px; width: 32px; height: 32px; opacity: 0; cursor: pointer; }
.swatch-pick.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }

.img-grid { display: grid; grid-template-columns: minmax(300px, 1.15fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 12px; }
.img-group { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; border: 1px solid var(--divider); border-radius: var(--r-inner); background: transparent; min-height: 0; }
.img-group.is-ok { grid-row: 1 / span 2; background: var(--bg-hover); }
.img-group header { display: flex; align-items: center; gap: 8px; }
.img-group header h3 { font: 500 13px/20px var(--font); }
.img-group header .kind { font: 400 11px/16px var(--mono); color: var(--muted-2); letter-spacing: .06em; }
.img-group header .count { font: 500 12px/18px var(--mono); color: var(--text-2); border: 1px solid var(--divider); padding: 0 7px; border-radius: 6px; }
.img-group header .spacer { flex: 1; }
.kind-dot { width: 6px; height: 6px; border-radius: 50%; }
.kind-dot.REAL { background: #8e8e93; } .kind-dot.OK { background: var(--ok); } .kind-dot.BOX { background: var(--warn); } .kind-dot.EXP { background: var(--violet); } .kind-dot.REF { background: var(--info); }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.thumb { position: relative; margin: 0; height: 118px; border-radius: var(--r-inner); overflow: hidden; border: 1px solid var(--container-border); background: rgba(255, 255, 255, 0.5); cursor: zoom-in; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s; }
.thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.thumb img { display: block; height: 100%; width: auto; }
.thumbs.tall .thumb { height: 236px; }
.thumb .flag { position: absolute; left: 6px; top: 6px; font: 500 10px/14px var(--font); padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25); }
.thumb .flag.ok { background: rgba(31, 157, 77, 0.88); }
.thumb .flag.warn { background: rgba(255, 159, 10, 0.9); }
.thumb .flag.bad { background: rgba(255, 69, 58, 0.88); }
.thumb .idx { position: absolute; right: 6px; bottom: 6px; font: 500 10px/14px var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); color: #000; border: 1px solid #fff; backdrop-filter: blur(6px); }
.qr-ghost { position: absolute; border: 2px dashed #111; opacity: .85; pointer-events: none; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.thumb-empty { display: grid; place-items: center; gap: 4px; height: 118px; min-width: 118px; flex: 1; border: 1px dashed var(--divider); border-radius: var(--r-inner); color: var(--muted-2); font: 400 12px/18px var(--font); text-align: center; }
.thumbs.tall .thumb-empty { height: 236px; }
.thumb-empty svg { width: 20px; height: 20px; }
.thumb-empty small { font-size: 11px; }
.group-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.group-actions .act-row { display: flex; gap: 6px; flex: 0 0 auto; } /* 成组换行：够宽时一行，否则第二组整体换到下一行 */

.prmt-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; padding: 16px 20px 20px; }
.editor, .input, .note textarea { width: 100%; border: 1px solid var(--divider); border-radius: var(--r-inner); background: var(--bg-secondary); color: var(--text); outline: 0; transition: border-color .15s, box-shadow .15s, background .15s; }
.editor:focus, .input:focus, .note textarea:focus { border-color: var(--menu-accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--bg-hover); }
.editor { min-height: 168px; resize: vertical; padding: 12px 14px; font: 400 13px/20px var(--mono); }
.editor::placeholder, .input::placeholder, .note textarea::placeholder { color: var(--muted-2); }
.prmt-side { display: grid; gap: 10px; align-content: start; }
.side-box { border: 1px solid var(--divider); border-radius: var(--r-inner); padding: 12px; display: grid; gap: 8px; }
.side-box h4 { font: 500 13px/20px var(--font); color: var(--text-2); }
.vars { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font: 400 13px/20px var(--font); margin: 0; }
.vars dt { color: var(--text-2); font-weight: 500; }
.vars dd { margin: 0; color: var(--text-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vars .var { cursor: text; margin-right: -6px; padding: 0 6px; border-radius: 5px; border: 1px dashed transparent; transition: background .12s, border-color .12s, color .12s; }
.vars .var:hover { background: var(--bg-hover); border-color: var(--divider); color: var(--text); }
.vars .var.is-custom { color: var(--text); text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.var-input { box-sizing: border-box; width: 100%; height: 22px; margin: -1px -6px -1px 0; padding: 0 6px; text-align: right; font: inherit; color: var(--text); background: var(--bg-secondary); border: 1px solid var(--menu-accent); border-radius: 5px; outline: 0; box-shadow: 0 0 0 3px var(--accent-ring); }
.var-input.mono { font-family: var(--mono); }

.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.pcard { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px 12px 16px; border: 1px solid var(--divider); border-radius: var(--r-inner); min-height: 150px; overflow: hidden; }
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--muted-2); }
.pcard.ok::before { background: var(--ok); box-shadow: 0 0 5px 2px rgba(48, 209, 88, 0.5); }
.pcard.bad::before { background: var(--bad); box-shadow: 0 0 5px 2px rgba(255, 69, 58, 0.5); }
.pcard.warn::before { background: var(--warn); box-shadow: 0 0 5px 2px rgba(255, 159, 10, 0.5); }
.pcard header { display: flex; align-items: center; gap: 8px; }
.pcard header h3 { font: 500 14px/20px var(--font); }
.pcard header .pill { margin-left: auto; }
.pcard header svg { display: none; }
.pcard p { margin: 0; font: 400 13px/20px var(--font); color: var(--text-2); }
.pcard p.empty { color: var(--muted-2); }
.pcard footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 400 12px/18px var(--font); color: var(--muted); }
.input { height: 32px; padding: 0 12px; font: 400 13px/20px var(--font); }

.qr-files { display: grid; gap: 6px; }
.qr-file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 6px 6px 10px; border: 1px solid var(--divider); border-radius: var(--r-inner); font: 400 12px/18px var(--font); }
.qr-file code { font: 500 12px/18px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.note { display: grid; gap: 6px; }
.note label { display: flex; align-items: center; gap: 6px; font: 500 13px/20px var(--font); color: var(--text-2); }
.note label svg { width: 14px; height: 14px; }
.note textarea { min-height: 92px; resize: vertical; padding: 10px 12px; font: 400 13px/20px var(--font); }

/* ---------- 工作区信息面板 ---------- */

.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.15); }
.drawer { position: fixed; top: 10px; right: 12px; bottom: 12px; width: 420px; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: var(--shadow-strong); animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 20px; position: relative; }
.drawer-head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--divider-line); }
.drawer-head h2 { font: 500 16px/24px var(--font); }
.drawer-head .hint { margin-left: auto; }
.drawer-body { overflow-y: auto; padding: 20px; display: grid; gap: 20px; align-content: start; }

.dsec { display: grid; gap: 8px; }
.dsec > h3 { display: flex; align-items: center; gap: 8px; font: 500 16px/24px var(--font); color: var(--text-2); }
.dsec > h3 .spacer { flex: 1; }
.dsec > h3 a { color: var(--text-2); text-decoration: none; font: 400 14px/20px var(--font); }
.dsec > h3 .pill { font-weight: 400; }

.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
.facts .f { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 -8px; padding: 2px 8px; border-radius: 6px; font: 400 13px/20px var(--font); color: var(--text-2); cursor: pointer; transition: background .12s, color .12s; }
.facts .f:hover { background: var(--bg-hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--container-border); }
.facts .f:active { transform: translateY(1px); }
.facts .f.wide { grid-column: 1 / -1; }
.facts dt { font-weight: 500; flex: none; }
.facts dd { margin: 0; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts .f-hint { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 99px; color: var(--muted); border: 1px solid var(--container-border); opacity: 0; transition: opacity .12s; }
.facts .f:hover .f-hint { opacity: 1; }

.flags { display: flex; gap: 8px; }
.flags .toggle { height: 32px; padding: 0 12px 0 8px; font-size: 13px; border-radius: var(--r-button); }

.qr-pick { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--divider); border-radius: var(--r-inner); cursor: pointer; transition: background .15s, border-color .15s; }
.qr-pick:hover { background: var(--bg-hover); }
.qr-pick.is-on { background: var(--container-strong); border-color: var(--container-border); box-shadow: var(--shadow-sm); }
.qr-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.qr-pick img { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--container-border); background: #fff; }
.qr-pick .body { display: grid; min-width: 0; }
.qr-pick strong { font: 500 13px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-pick small { font: 400 12px/18px var(--font); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-pick small.empty { color: var(--muted-2); }

/* ---------- Toast ---------- */

.toast-host { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 100; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-width: 240px; max-width: 380px; background: rgba(0, 0, 0, 0.8); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-container); backdrop-filter: blur(20px); box-shadow: var(--shadow-strong); font: 500 13px/20px var(--font); animation: toast-in .18s ease-out; pointer-events: auto; }
.toast svg { color: rgba(255, 255, 255, 0.7); flex: none; }
.toast.ok svg { color: var(--ok); }
/* 出错：红点缀 + 放得下接口原文 + 点一下整条复制 */
.toast.bad { align-items: flex-start; max-width: min(620px, calc(100vw - 40px)); padding: 12px 16px 12px 14px;
  border-color: rgba(255, 106, 106, .55); border-left: 3px solid #ff6a6a; cursor: copy; }
.toast.bad svg { color: #ff6a6a; margin-top: 2px; }
.toast.bad:hover { border-color: rgba(255, 106, 106, .85); }
.toast .toast-text { min-width: 0; }
.toast.bad .toast-text { flex: 1; max-height: 40vh; overflow-y: auto; overflow-wrap: anywhere;
  white-space: pre-wrap; font: 500 13px/20px var(--font); user-select: text; }
.toast .toast-copy { flex: none; align-self: flex-start; margin-top: 1px; padding: 1px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); font: 500 11px/18px var(--font); }
.toast .toast-copy.is-done { background: rgba(52, 199, 89, .25); color: #b7f0c4; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: all .18s; }

/* 批量任务的进度卡：和 toast 同一块区域，但会一直待到任务结束 */
.job-card { display: grid; gap: 8px; padding: 12px 14px; width: 320px; background: rgba(0, 0, 0, 0.82); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-container); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-strong); font: 500 13px/20px var(--font); animation: toast-in .18s ease-out; pointer-events: auto; }
.job-card .job-top { display: flex; align-items: center; gap: 8px; }
.job-card .job-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .job-pct { font: 600 13px/20px var(--mono); color: #fff; }
.job-card .job-x { min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; font: 500 12px/1 var(--font); white-space: nowrap; }
.job-card .job-x:hover { background: rgba(255, 255, 255, 0.24); }
.job-card .job-x:disabled { opacity: .55; cursor: default; }
.job-card .bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.job-card .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #64d2ff; transition: width .25s; }
.job-card.is-done .bar i { background: #30d158; }
.job-card.is-bad .bar i { background: #ff453a; }
/* 正在跑的每一条各一行（出图这种一条几十秒、还并发的任务才有） */
.job-card .job-steps { display: grid; gap: 6px; max-height: 168px; overflow-y: auto; }
.job-card .job-step { display: grid; gap: 3px; }
.job-card .job-step-top { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.78);
  font: 400 12px/16px var(--font); }
.job-card .job-step-top .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .job-step-top .s { font: 500 11px/16px var(--mono); color: rgba(255, 255, 255, 0.6); }
.job-card .job-step-idle { color: rgba(255, 255, 255, 0.6); font: 400 12px/16px var(--font); }
.job-card .bar.sub { height: 4px; }
.job-card .bar.sub i { background: #ffd60a; transition: width .4s linear; }
.job-card.is-done .bar.sub i { background: #30d158; }
.job-card.is-bad .bar.sub i { background: #ff9f0a; }
.job-card .job-sub { display: flex; gap: 10px; font: 400 11.5px/16px var(--mono); color: rgba(255, 255, 255, 0.72); }
.job-card .job-sub .bad { color: #ff8a80; }
/* 这批在调哪个模型，靠右放着 */
.job-card .job-sub .job-model { margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: rgba(255, 255, 255, 0.55); }
.job-card .job-errs { margin: 0; padding: 6px 8px; max-height: 92px; overflow: auto; list-style: none;
  background: rgba(255, 255, 255, 0.08); border-radius: 6px; font: 400 11.5px/17px var(--mono); color: rgba(255, 255, 255, 0.82); }
.job-card .job-errs li + li { margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 响应 ---------- */

@media (max-width: 1500px) {
  :root { --rail: 340px; }
  .img-grid { grid-template-columns: minmax(280px, 1.1fr) repeat(2, minmax(0, 1fr)); }
  .tb-actions .btn { padding: 0 12px; }
  .stat .bar { display: none; }
}
@media (max-width: 1280px) {
  .topbar { gap: 10px; }
  .tb-note { max-width: 150px; }
  .tb-stats { gap: 6px; }
  .tb-actions { gap: 6px; }
  .img-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .img-group.is-ok { grid-row: auto; grid-column: 1 / -1; }
  .prmt-body { grid-template-columns: 1fr; }
  .proof-grid, .notes-grid { grid-template-columns: 1fr; }
}

/* ---------- 页面切换（登录 ⇄ 工作区列表 ⇄ 主工作台） ---------- */
/* 进场：body 淡入 260ms；离场：JS 给 body 加 .is-leaving 淡出 180ms 后再跳转。
   不用 View Transitions：它在 file:// 下和部分浏览器里会静默失效，且后退时会留下离开态。只动 opacity，不动 transform，避免 fixed 元素错位。 */
body { animation: page-in .26s ease-out both; }
@keyframes page-in { from { opacity: 0; } }
body.is-leaving { opacity: 0 !important; animation: none; transition: opacity .18s ease-in; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.is-leaving { transition: none; } }

/* ---------- 二维码素材库管理（qrlib.js，抽屉内）：左滑删除 + 新增 ---------- */
.qr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qr-wrap { position: relative; border-radius: var(--r-inner); }
.qr-wrap.is-open .row-delete, .qr-wrap.is-swiping .row-delete { opacity: 1; }
.qr-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--divider); border-radius: var(--r-inner); background: var(--bg-secondary); will-change: transform; transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .15s; touch-action: pan-y; user-select: none; cursor: grab; }
.qr-wrap.is-swiping .qr-row { transition: none; cursor: grabbing; }
.qr-wrap.is-open .qr-row { transform: translateX(-92px); background: var(--container-strong); }
.qr-row img { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--container-border); background: #fff; }
.qr-row .body { display: grid; min-width: 0; }
.qr-row strong { font: 500 13px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-row small { font: 400 12px/18px var(--font); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-row small.empty { color: var(--muted); }
.qr-empty { padding: 18px; text-align: center; color: var(--muted); font: 400 13px/20px var(--font); border: 1px dashed var(--divider); border-radius: var(--r-inner); }
.qr-add { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--divider); border-radius: var(--r-inner); }
.qr-add-row { display: flex; gap: 8px; align-items: center; }
.qr-add-row .input { flex: 1; min-width: 0; }
.qr-add-row .spacer { flex: 1; }
.qr-file { cursor: pointer; }

/* ---------- 图片查看器（viewer.js）：单图 / 多图对比 ---------- */
body.vw-open { overflow: hidden; }
.vw-host { position: fixed; inset: 0; z-index: 90; }
.vw-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
[data-theme="dark"] .vw-backdrop { background: rgba(0, 0, 0, 0.72); }
/* 条目栏收起 / 展开带过渡：列宽 0 ↔ 168px，栏本身淡出并左移 */
.vw { position: absolute; inset: 0; display: grid; grid-template-columns: 0px minmax(0, 1fr); column-gap: 0; row-gap: 12px; padding: 14px 16px; box-sizing: border-box; transition: grid-template-columns .24s cubic-bezier(.2, .8, .2, 1), column-gap .24s cubic-bezier(.2, .8, .2, 1); }
.vw.has-rail { grid-template-columns: 168px minmax(0, 1fr); column-gap: 12px; }
.vw-rail { opacity: 0; transform: translateX(-14px); pointer-events: none; transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.vw.has-rail .vw-rail { opacity: 1; transform: none; pointer-events: auto; }
.vw.is-opening { animation: vw-in .18s ease-out; }
@keyframes vw-in { from { opacity: 0; transform: scale(.985); } }
.vw-main { display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content max-content; gap: 10px; min-width: 0; min-height: 0; }
.vw-rail[hidden] { display: none; }
/* 切换图片 / 条目时只让画面轻轻淡入 */
.vw-pane img.is-fading { animation: vw-fade .12s ease-out; }
@keyframes vw-fade { from { opacity: .55; } }
/* 左侧条目栏：Side Menu 玻璃容器；当前条目 = 左侧 1px 蓝线 + 发光 */
.vw-rail { display: grid; align-content: start; grid-auto-rows: max-content; gap: 4px; padding: 8px; box-sizing: border-box; min-height: 0; min-width: 0; width: 168px; overflow-y: auto; overflow-x: hidden; border-radius: var(--r-container); background: var(--container); border: 1px solid var(--container-border); box-shadow: var(--shadow-xl); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
/* 多行文本框的滚动条，和条目栏用同一套细滚动条 */
.vw-item { position: relative; overflow: hidden; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: var(--r-inner); background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
/* 已选色号：与主界面列表一致，整行从左往右的淡色渐变 + 右侧 2px 色条 */
.vw-item.has-tint::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tint), transparent 100%); opacity: .22; pointer-events: none; }
.vw-item.has-tint .vw-item-body::after { content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--tint); }
.vw-item > * { position: relative; }
.vw-item:hover { background: var(--bg-hover); border-color: var(--divider); }
.vw-item.is-cur { background: var(--menu-selected); }
.vw-item.is-cur::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--menu-accent); box-shadow: 0 0 5px 2px rgba(38, 112, 233, 0.6); border-radius: 1px; }
.vw-item-th { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--container-border); color: var(--muted-2); }
/* 缩略图取图片正中间一块：绝对定位铺满容器再 cover，避免 height:100% 在网格里失效导致从顶部裁 */
.vw-item-th { position: relative; }
.vw-item-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.vw-item-th svg { width: 16px; height: 16px; }
.vw-item-body { display: grid; min-width: 0; }
.vw-item-body b { font: 500 12px/16px var(--mono); color: var(--text); }
.vw-item.is-cur .vw-item-body b { color: var(--menu-accent); }
.vw-item-body small { font: 400 11px/16px var(--font); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-empty { display: grid; place-items: center; gap: 6px; padding: 40px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--r-container); color: #fff; font: 500 14px/20px var(--font); text-align: center; }
.vw-empty svg { width: 24px; height: 24px; }
.vw-empty small { font: 400 12px/18px var(--font); opacity: .7; }
/* 顶栏：Navigation Menu 胶囊 */
.vw-bar { position: relative; z-index: 12; justify-self: center; width: min(100%, 1180px); box-sizing: border-box; height: 44px; padding: 6px 8px 6px 14px; display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center; gap: 12px; border-radius: 99px; background: var(--container); border: 1px solid var(--container-border); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); box-shadow: var(--shadow-sm); }
/* 顶栏内所有控件统一 32px 高、垂直居中 */
.vw-bar > * { display: flex; align-items: center; height: 32px; min-width: 0; }
.vw-bar button, .vw-bar .icon-btn { margin: 0; vertical-align: middle; }
.vw-left { gap: 10px; }
.vw-seq { font: 500 12px/20px var(--mono); color: var(--muted); }
.vw-codes { position: relative; min-width: 0; }
.vw-code { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: 500 13px/20px var(--mono); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vw-code:hover { background: var(--bg-hover); border-color: var(--divider); }
.vw-code b { font: 500 11px/16px var(--font); color: var(--menu-accent); background: rgba(38, 112, 233, 0.12); border-radius: 5px; padding: 0 6px; }
.vw-code svg { width: 13px; height: 13px; color: var(--text-2); }
.vw-code-pop { display: grid; opacity: 0; visibility: hidden;
  /* 和别的悬停菜单一样：立刻出现，移出 2 秒后再收（display 切换没法做延时，所以走 opacity） */
  transition: opacity .15s 2s, visibility 0s 2.15s; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 8px; grid-template-columns: 1fr; gap: 2px; border-radius: var(--r-container); background: var(--container-strong); border: 1px solid var(--container-border); box-shadow: var(--shadow-xl); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3); backdrop-filter: blur(var(--blur)) saturate(1.3); animation: pop-in .12s ease-out; }
[data-theme="dark"] .vw-code-pop { background: linear-gradient(180deg, rgba(32, 34, 42, 0.72), rgba(32, 34, 42, 0.62)); }
.vw-codes:hover .vw-code-pop, .vw-codes.is-pinned .vw-code-pop { opacity: 1; visibility: visible; transition-delay: 0s; }
.vw-code-pop span { font: 500 13px/20px var(--mono); color: var(--text); padding: 4px 8px; border-radius: 6px; }
.vw-code-pop span.is-first { background: var(--menu-selected); color: var(--menu-accent); }
.vw-code-pop small { padding: 6px 8px 2px; color: var(--muted); font: 400 11px/16px var(--font); }
.vw-right { gap: 6px; justify-self: end; }
/* Browser Buttons：12px 圆点，黑 10%→5% 渐变 + 1px 黑描边；第一个是关闭 */
.browser-dots { display: flex; gap: 8px; align-items: center; }
.browser-dots i { width: 12px; height: 12px; box-sizing: border-box; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05)); }
[data-theme="dark"] .browser-dots i { border-color: rgba(255, 255, 255, 0.45); background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); }
.browser-dots i.close { cursor: pointer; transition: background .12s, border-color .12s; }
.browser-dots i.close:hover { background: linear-gradient(180deg, #ff5f57, #e0443e); border-color: rgba(0, 0, 0, 0.35); }
/* 工具组：Menu 胶囊（圆角 30、内边距 4、间距 4），Button Toggle 13 Medium */
.vw-center { justify-content: center; gap: 10px; }
.vw-menu { display: flex; align-items: center; height: 32px; box-sizing: border-box; gap: 4px; padding: 3px; border-radius: 30px; background: var(--container); border: 1px solid var(--container-border); box-shadow: var(--shadow-sm); }
.vw-tg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 24px; padding: 0 12px; border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--text); font: 500 13px/20px var(--font); cursor: pointer; white-space: nowrap; transition: background .12s; }
.vw-tg svg { width: 16px; height: 16px; }
.vw-tg:hover { background: var(--bg-hover); }
.vw-tg.is-on { background: var(--container); border-color: var(--container-border); box-shadow: var(--shadow-sm); }
.vw-tg:disabled { opacity: .35; cursor: not-allowed; }
.vw-tg b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
/* Tab：选中项底部 1px #06f + 5px 模糊发光，底部径向分割线 */
.vw-tabs { position: relative; display: flex; align-items: stretch; height: 32px; }
.vw-tabs.is-disabled { opacity: .4; }
.vw-tab:disabled { cursor: not-allowed; }
.vw-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--divider-line); }
.vw-tab { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border: 0; background: transparent; color: var(--text); font: 500 13px/20px var(--font); cursor: pointer; white-space: nowrap; }
.vw-tab.is-on { background: linear-gradient(0deg, rgba(38, 112, 233, 0.3), rgba(38, 112, 233, 0)); }
.vw-tab.is-on::before, .vw-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: #06f; }
.vw-tab.is-on::before { height: 2px; filter: blur(5px); }
.vw-tab.is-on::after { height: 1px; }
/* Navigation Outline：两个箭头 + 中间分隔 */
.vw-nav { display: inline-flex; align-items: stretch; height: 32px; box-sizing: border-box; border: 1px solid var(--divider); border-radius: 30px; overflow: hidden; }
.vw-nav button { width: 40px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.vw-nav button:hover { background: var(--bg-hover); }
.vw-nav button svg { width: 16px; height: 16px; }
.vw-nav i { width: 1px; background: var(--divider); }
/* 舞台 */
.vw-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
/* 两侧翻页：44px Button Circle */
/* 翻页箭头长在格子里：平时藏着，鼠标移到这一格才出来 */
.vw-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--container-border); border-radius: 32px; background: var(--container); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s, background .12s, transform .12s; }
.vw-pane:hover .vw-arrow { opacity: .85; visibility: visible; transition-delay: 0s; }
.vw-arrow svg { width: 20px; height: 20px; }
.vw-arrow.prev { left: 10px; }
.vw-arrow.next { right: 10px; }
.vw-arrow:hover { opacity: 1; background: var(--container-strong); }
.vw-arrow:active { transform: translateY(-50%) scale(.96); }
.vw-frame { position: relative; max-width: 100%; max-height: 100%; display: grid; place-items: center; cursor: grab; }
.vw-frame.is-dragging { cursor: grabbing; }
.vw-frame img { display: block; max-width: calc(100vw - 32px - 180px); max-height: calc(100vh - 44px - 28px - 24px - 84px); border: 1px solid #fff; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 30px 60px rgba(0, 0, 0, 0.5); transform-origin: center; transition: transform .1s ease-out; user-select: none; }
/* 底部三个小标签：文件名 · 尺寸 · 图片大小 */
.vw-metabar { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 16px; padding: 0 8px; justify-items: center; min-height: 22px; }
.vw-metabar[hidden] { display: none; }
.vw-tags { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.vw-tags .pn { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--menu-accent); color: #fff; font: 600 9px/1 var(--font); flex: none; }
.vw-tags i { font: 400 11px/16px var(--mono); font-style: normal; color: #fff; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-tags i.t-name { max-width: 220px; }
.vw-meta { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); font: 400 12px/18px var(--mono); color: #fff; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); white-space: nowrap; pointer-events: none; }
/* 格子排布交给 JS：两列 + 中间一条 16px 的缝当轨道，三格一边摞两个、四格 2×2 */
.vw-panes { display: grid; gap: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 0 8px; }
/* 可拖的缝：平时一条淡线，鼠标靠近或拖动时变主色 */
.vw-gutter { position: relative; z-index: 4; touch-action: none; }
.vw-gutter.col { cursor: col-resize; }
.vw-gutter.row { cursor: row-resize; }
.vw-gutter::after { content: ""; position: absolute; border-radius: 999px; background: var(--divider); transition: background .12s; }
.vw-gutter.col::after { left: 50%; top: 12px; bottom: 12px; width: 2px; transform: translateX(-50%); }
.vw-gutter.row::after { top: 50%; left: 12px; right: 12px; height: 2px; transform: translateY(-50%); }
.vw-gutter:hover::after, .vw-gutter.is-dragging::after { background: var(--menu-accent); }
.vw-strip-col .pn { flex: none; align-self: center; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--menu-accent); color: #fff; font: 600 9px/1 var(--font); }
.vw-pane { position: relative; display: grid; place-items: center; min-height: 0; padding: 10px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--r-container); cursor: pointer; overflow: hidden; transition: border-color .12s, background .12s, box-shadow .12s; }
.vw-pane.is-solo { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.vw-pane img { transform-origin: center; transition: transform .1s ease-out; cursor: grab; }
.vw-pane.is-dragging img { transition: none; cursor: grabbing; }
/* 每格顶部的缩放控件：Menu 小胶囊；平时只显示百分比，鼠标移入这一格才展开按钮 */
.vw-zoom { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 0; height: 30px; box-sizing: border-box; padding: 3px; border-radius: 30px; background: var(--container); border: 1px solid var(--container-border); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: default; }
/* 展开 / 收起带过渡：按钮始终在布局里，宽度 0 → 24px，透明度 0 → 1 */
.vw-zoom button { display: grid; width: 0; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 99px; background: transparent; color: var(--text); cursor: pointer; place-items: center; overflow: hidden; opacity: 0; transition: width .18s ease, margin .18s ease, opacity .14s ease; }
.vw-zoom button svg { width: 15px; height: 15px; }
.vw-zoom button:hover { background: var(--bg-hover); }
.vw-zoom b { font: 500 12px/24px var(--font); padding: 0 8px; min-width: 40px; text-align: center; border-radius: 99px; cursor: pointer; font-variant-numeric: tabular-nums; }
.vw-zoom b:hover { background: var(--bg-hover); }
/* 鼠标在这一格的图片上（或控件自身上）才展开按钮 */
.vw-pane:has(.vw-pimg:hover) .vw-zoom button, .vw-zoom:hover button { width: 24px; margin: 0 1px; opacity: 1; }
.vw-pane.is-solo .vw-cap { padding-left: 8px; }
.vw-pane:hover { border-color: var(--divider); }
.vw-pane.is-active { border-color: var(--menu-accent); background: rgba(38, 112, 233, 0.08); box-shadow: 0 0 0 3px var(--accent-ring); }
.vw-pimg { position: relative; display: inline-grid; max-width: 100%; max-height: 100%; }
.vw-pane img { display: block; max-width: 100%; max-height: calc(100vh - 44px - 28px - 24px - 84px - 20px); border: 1px solid #fff; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 30px 60px rgba(0, 0, 0, 0.5); user-select: none; }
.vw-pane-tl { position: absolute; left: 18px; top: 18px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.vw-edit { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 1px solid var(--container-border); border-radius: 999px; background: var(--container); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.vw-edit svg { width: 13px; height: 13px; }
.vw-edit:hover { background: var(--container-strong); }
.vw-cap svg { width: 12px; height: 12px; color: var(--text-2); }
.vw-cap:hover { background: var(--container-strong); }
.vw-cap { position: static; cursor: pointer; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--container); border: 1px solid var(--container-border); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); font: 500 12px/18px var(--font); color: var(--text); }
.vw-cap b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--menu-accent); color: #fff; font: 600 10px/1 var(--font); }
.vw-cap small { color: var(--text-2); font: 400 11px/16px var(--mono); }
/* 底部缩略条：Template Card 缩小版 */
/* 缩略条按格分：每格一条，横向和上面的格子对齐（和小标签行同一套列宽） */
.vw-strip { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 16px; padding: 0 8px; justify-items: center; min-width: 0; }
.vw-strip-col { max-width: 100%; display: flex; gap: 8px; padding: 6px; border-radius: 12px; background: var(--container); border: 1px solid var(--container-border); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); overflow-x: auto; }
/* 缩略条按类型分组，中间分割线 */
.vw-sep { flex: none; align-self: stretch; width: 1px; margin: 2px 6px; background: var(--divider); }
.vw-th { position: relative; flex: none; width: 60px; height: 60px; padding: 0; border: 1px solid #fff; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; opacity: .72; transition: opacity .12s, box-shadow .12s, transform .12s; }
.vw-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.vw-th small { position: absolute; left: 3px; bottom: 3px; font: 500 9px/12px var(--mono); padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.vw-th:hover { opacity: 1; transform: translateY(-2px); }
.vw-th.is-cur { opacity: 1; box-shadow: 0 0 0 2px var(--menu-accent), 0 0 12px 2px rgba(38, 112, 233, 0.55); }

/* 查看器内弹出菜单（换图 / 编辑）：不透明底，避免被玻璃层盖住 */
/* 查看器内弹出菜单：磨砂玻璃（Container 配方 + 20px 背景模糊）；它不在任何 backdrop-filter 元素之内，能正常采样到下面的画面 */
/* 右上角「显示选项」：鼠标移上去展开，和工作台顶栏菜单一个路子 */
.vw-hmenu { position: relative; display: inline-flex; }
.vw-hpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 196px; display: grid; gap: 2px; padding: 8px; border-radius: var(--r-container); background: var(--container-strong); border: 1px solid var(--container-border); box-shadow: var(--shadow-xl); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* 鼠标移出后等 2 秒再收，回头还能再点一次；移回菜单上就取消；移到别的菜单上立刻收 */
  transition: opacity .15s 2s, transform .15s 2s, visibility 0s 2.15s; }
/* 鼠标移到另一个菜单上时，其余菜单立刻收起，不占着那 2 秒（JS 挂 .is-hushed）。
   用 display:none 而不是改 transition-delay —— 淡出一旦已经排上队（鼠标刚离开那 2 秒里），
   再改延迟是不会重来的，菜单还是会挂满 2 秒。:not(:hover) 是兜底：这个类万一没被摘掉，
   鼠标移上去照样能展开。 */
.tb-menu.is-hushed:not(:hover) .tb-pop,
.vw-hmenu.is-hushed:not(:hover) .vw-hpop,
.vw-codes.is-hushed:not(:hover) .vw-code-pop { display: none; }
.vw-hmenu:hover .vw-hpop, .vw-hmenu:focus-within .vw-hpop, .vw-hmenu.is-pinned .vw-hpop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* 按钮和菜单之间留一条看不见的桥，鼠标走过去不会断 */
.vw-hpop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.vw-hrow { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-inner); background: transparent; color: var(--text); font: 500 13px/20px var(--font); cursor: pointer; text-align: left; }
.vw-hrow:hover { background: var(--bg-hover); border-color: var(--divider); }
.vw-hrow svg { width: 16px; height: 16px; flex: none; }
.vw-hrow > span { flex: 1; }
.vw-hrow[disabled] { opacity: .45; cursor: default; }
.vw-hrow[disabled]:hover { background: transparent; border-color: transparent; }
.vw-hpop .hr { height: 1px; margin: 4px 2px; background: var(--divider-line); }
.vw-hpop:has(.vw-swatches) { min-width: 0; padding: 2px 0 0; }
.vw-switch { width: 26px; height: 14px; flex: none; border-radius: 999px; background: rgba(0, 0, 0, 0.2); position: relative; transition: background .15s; }
.vw-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform .15s; }
.vw-hrow.is-on .vw-switch { background: var(--accent); }
.vw-hrow.is-on .vw-switch::after { transform: translateX(12px); }
/* 成品图上的二维码层：和图片同一个变换，缩放平移跟着走（inset 1px 让开图片那圈白边） */
.vw-qrs { position: absolute; inset: 1px; pointer-events: none; transform-origin: center; transition: transform .1s ease-out; }
.vw-qrs i { position: absolute; }
.vw-qrs i img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; image-rendering: pixelated; }
.vw-pop { position: absolute; z-index: 20; min-width: 200px; max-height: 60vh; overflow-y: auto; padding: 6px; display: grid; gap: 6px; border-radius: var(--r-container); background: var(--container-strong); border: 1px solid var(--container-border); box-shadow: var(--shadow-xl); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3); backdrop-filter: blur(var(--blur)) saturate(1.3); animation: pop-in .12s ease-out; }
[data-theme="dark"] .vw-pop { background: linear-gradient(180deg, rgba(32, 34, 42, 0.72), rgba(32, 34, 42, 0.62)); }
.vw-pop[hidden] { display: none; }
.vw-pop-group { display: grid; gap: 2px; }
.vw-pop-title { padding: 4px 10px 2px; font: 500 11px/16px var(--mono); color: var(--muted); letter-spacing: .04em; }
.vw-pop-row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 500 13px/20px var(--font); cursor: pointer; text-align: left; white-space: nowrap; }
.vw-pop-row img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid var(--container-border); background: #fff; }
.vw-pop-row svg { width: 14px; height: 14px; color: var(--text-2); }
.vw-pop-row small { margin-left: auto; color: var(--muted); font: 400 11px/16px var(--mono); }
.vw-pop-row:hover { background: var(--bg-hover); }
.vw-pop-row.is-danger { color: var(--bad); }
.vw-pop-row.is-danger svg { color: var(--bad); }
.vw-pop-row.is-on { background: var(--menu-selected); color: var(--menu-accent); }
.vw-bar [data-vw="rail"].is-on { background: var(--btn-primary); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
/* 条目栏收起后的左边缘热区：停留 1 秒展开；停留时显示一条渐亮的竖线作提示 */
.vw-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; z-index: 15; cursor: e-resize; }
.vw-edge[hidden] { display: none; }
.vw-edge i { position: absolute; left: 6px; top: 50%; width: 3px; height: 64px; transform: translateY(-50%); border-radius: 2px; background: var(--menu-accent); opacity: .35; transition: opacity 1s linear, height 1s linear; }
.vw-edge.is-armed i { opacity: 1; height: 120px; box-shadow: 0 0 8px 2px rgba(38, 112, 233, 0.5); }
/* 编辑菜单里的剪贴板预览 */
/* 只显示缩略图：最大 200×300，保持比例，按最大显示 */
.vw-clip { display: grid; place-items: center; min-height: 36px; padding: 6px 8px; border: 1px dashed var(--divider); border-radius: 8px; }
.vw-clip.has-img { padding: 6px; }
.vw-clip img { display: block; max-width: 200px; max-height: 300px; width: auto; height: auto; border-radius: 6px; border: 1px solid var(--container-border); background: #fff; box-shadow: var(--shadow-sm); }
.vw-clip .hint { padding: 4px 0; }
/* 查看器色盘按钮：右下角小圆点显示当前色卡 */
.vw-color { position: relative; }
.vw-color i { position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); display: none; }
.vw-color.is-set i { display: block; }
.vw-swatches { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; }
.vw-pop-hr { display: block; height: 1px; margin: 4px 6px; background: var(--divider-line); }
/* 全屏预览层：盖在查看器之上，默认 100% 尺寸 */
.vw-full { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, 0.94); cursor: zoom-out; animation: full-in .15s ease-out; }
@keyframes full-in { from { opacity: 0; } }
.vw-full[hidden] { display: none; }
.vw-full img { display: block; max-width: none; max-height: none; width: auto; height: auto; transform-origin: center; transition: transform .08s ease-out; cursor: grab; user-select: none; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.vw-full img:active { cursor: grabbing; }
.vw-full-zoom { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); cursor: default; }
.vw-full-zoom button { width: 24px; margin: 0 1px; opacity: 1; }
.vw-full-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; backdrop-filter: blur(10px); }
.vw-full-close:hover { background: rgba(255, 255, 255, 0.18); }
.vw-full-close svg { width: 16px; height: 16px; }
.vw-full-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font: 400 12px/18px var(--font); color: rgba(255, 255, 255, 0.55); pointer-events: none; }


/* ==========================================================================
   滚动条：平时细，鼠标压上去变粗、颜色加深，好按住拖
   轨道宽度定死 12px（宽度本身没法动，动了会引起重排），细的样子靠一圈透明边框
   让出来；hover 时把边框收掉，滑块就撑满整条轨道，看着也好按。
   ========================================================================== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--divider); border: 4px solid transparent;
  background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--muted); border-width: 1px; background-clip: padding-box; }
/* Firefox 改不了粗细，只能把颜色提上来。
   注意：Chrome 里只要设了 scrollbar-color，上面那套 ::-webkit-scrollbar 就整个失效，
   所以这段必须挡在「不支持 ::-webkit-scrollbar」的浏览器里。 */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--divider) transparent; }
  *:hover { scrollbar-color: var(--muted-2) transparent; }
}

/* 备案号：钉在页脚，不占布局、不挡内容 */
.icp { position: fixed; left: 0; right: 0; bottom: 6px; z-index: 5; text-align: center; pointer-events: none; }
.icp a { pointer-events: auto; color: var(--muted-2); font: 400 11px/16px var(--font); text-decoration: none; opacity: .75; }
.icp a:hover { opacity: 1; text-decoration: underline; }