/* 寸毫 Inchly · 设计规范
   风格：严谨、克制、高级（用户 2026-10-20 定的品牌风格）。
   - 白底、墨黑、细线；不用渐变、不发光，阴影只给浮起来的东西（菜单、工具条、弹层）。
   - 颜色只留给红、黄、绿三种核对状态；朱红同时是品牌标志里「核过的点」。
   - 数字一律等宽数字，英文原文用等宽字体；图纸元素（尺寸线、标题栏、图框网格）点到为止。 */

:root {
  --bg: #F7F7F5;
  --paper: #FFFFFF;
  --panel: #FAFAF9;
  --sunken: #F1F1EE;
  --line: #E8E8E4;
  --line-2: #D7D7D2;
  --ink: #0E0F11;
  --ink-2: #2A2C31;
  --text: #17181B;
  --text-2: #50535A;
  --muted: #85888F;
  --faint: #B2B4B8;
  --red: #E5483B;
  --red-ink: #B23224;
  --red-soft: #FCEDEA;
  --amber: #D9961C;
  --amber-ink: #87580C;
  --amber-soft: #FAF2E1;
  --green: #2E8B5E;
  --green-ink: #236B49;
  --green-soft: #E9F3EE;
  --slate-ink: #3B4A6B;
  --slate-soft: #EEF0F5;
  --radius: 10px;
  --radius-l: 14px;
  --shadow-pop: 0 2px 6px rgba(14, 15, 17, .05), 0 16px 40px rgba(14, 15, 17, .11);
  --ring: 0 0 0 3px rgba(14, 15, 17, .11);
  --grid-line: rgba(14, 15, 17, .045);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: none; }
p a, li a, dd a, .note a, .small a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
p a:hover, li a:hover, dd a:hover, .small a:hover { text-decoration-color: var(--ink); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
p { margin: 0; }
ol, ul { margin: 0; }
svg { flex: none; }
::selection { background: rgba(229, 72, 59, .16); }
::placeholder { color: var(--faint); }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 500 13.5px/1 var(--font);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--sunken); color: var(--ink); }
.btn-primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-primary:hover { border-color: var(--ink-2); background: var(--ink-2); color: #fff; }
.btn-outline { border-color: var(--ink); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }
.btn-danger { border-color: #EEC9C3; color: var(--red-ink); }
.btn-danger:hover { border-color: var(--red); background: var(--red-soft); color: var(--red-ink); }
.btn-dark { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; }
.btn-dark:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-lg { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.btn-sm { height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: not-allowed; opacity: .45; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .method:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ---------- 表单 ---------- */
.field { display: grid; gap: 6px; margin-bottom: 14px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.field input, .field select, .field textarea, .input {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper); color: var(--text); font: 400 14px var(--font); transition: border-color .15s, box-shadow .15s;
}
.field textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { border-color: var(--ink); outline: none; box-shadow: var(--ring); }
.inline-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form .input { min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.error { min-height: 20px; margin-top: 8px; color: var(--red-ink); font-size: 13px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.check:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.check input { accent-color: var(--ink); }
.check span { flex: 1; }
.pick { display: grid; gap: 8px; margin: 12px 0 16px; }

/* ---------- 卡片、状态、表格 ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); }
.card-pad { padding: 22px 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.card-head h3 { font-size: 14.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--sunken); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--green-soft); color: var(--green-ink); }
.chip.warn { background: var(--amber-soft); color: var(--amber-ink); }
.chip.gray { background: var(--sunken); color: var(--muted); }
.chip.bad { background: var(--red-soft); color: var(--red-ink); }
.chip.violet { background: var(--slate-soft); color: var(--slate-ink); }
.badge-soon { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--sunken); color: var(--muted); font-size: 11.5px; line-height: 20px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--sunken); color: var(--text-2); font-size: 12px; font-weight: 500; }
.table-wrap { overflow-x: auto; }
.table-wrap:has(details.more[open]) { overflow: visible; }   /* 行尾「⋯」菜单打开时别被表格裁掉 */
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FCFCFB; }
.table .r { text-align: right; }
.table .dim td { color: var(--faint); }
.table .warn-row td { background: #FFFBF3; }
.empty { padding: 40px 20px; color: var(--muted); font-size: 13.5px; text-align: center; }
.list { padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--sunken); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 15, 17, .08), 0 0 0 1px rgba(14, 15, 17, .04); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; }

/* 图框网格：很淡，只在大面积的底子上用 */
.grid-bg {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.banner-local { padding: 7px 16px; background: var(--ink); color: rgba(255, 255, 255, .78); font-size: 12.5px; text-align: center; }

/* ---------- 标志 ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand img { display: block; width: auto; height: 30px; }
.brand .sub { padding-left: 10px; border-left: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }

/* ===================== 官网 ===================== */
body.landing { background: var(--paper); }
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 36px; height: 64px; padding: 0 max(24px, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
.site-nav { display: flex; gap: 28px; }
.site-nav a { color: var(--text-2); font-size: 14px; }
.site-nav a:hover { color: var(--ink); }
.site-header .actions { display: flex; gap: 8px; margin-left: auto; }
.wrap { width: min(1200px, calc(100vw - 48px)); margin: 0 auto; }

.hero { position: relative; padding: 92px 0 0; text-align: center; }
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 640px; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 100%);
}
.hero > * { position: relative; }
.kicker { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text-2); font-size: 12.5px; }
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.kicker .en { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font: 11.5px var(--mono); letter-spacing: .02em; }
.hero h1 { margin-top: 26px; font-size: clamp(40px, 6.4vw, 78px); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; }
.hero .lead { max-width: 700px; margin: 24px auto 0; color: var(--text-2); font-size: 17px; line-height: 1.8; text-wrap: balance; }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.hero .note { margin-top: 14px; color: var(--muted); font-size: 12.5px; }

/* 首页 v2（10-24 照 mirasim.ai 首页的思路改；用户嫌第一版太细、字幕压在画面下面难看）：
   首屏收敛；演示框左上角一句两截的标题讲这一幕（墨黑＋灰），右上角四步分段，画面只放图纸和几张浮着的卡片；
   细节放到下面「怎么用」。舞台按 1080×540 画，整块按框的宽度缩放（demo.js）。 */
.hero.v2 { padding-top: 80px; padding-bottom: 104px; }
.hero.v2::before { height: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--text-2); font-size: 15px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.hero.v2 h1 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -.03em; }
.hero.v2 .lead { margin-top: 14px; font-size: 17px; }
.hero.v2 .cta { margin-top: 28px; }
.show-card { position: relative; max-width: 1080px; margin: 56px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 1px 2px rgba(14, 15, 17, .04), 0 50px 100px -60px rgba(14, 15, 17, .35); text-align: left; }
.show-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 0 24px; }
.show-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 18px; line-height: 1.45; letter-spacing: -.01em; }
.show-title img { flex: none; width: 22px; height: 22px; }
.show-title .txt { transition: opacity .26s, transform .26s; }
.show-title .txt.out { opacity: 0; transform: translateY(-5px); }
.show-title b { color: var(--ink); font-weight: 600; }
.show-title .txt > span { margin-left: .4em; color: var(--muted); font-weight: 500; }
.show-tabs { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sunken); }
.show-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; overflow: hidden; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px var(--font); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.show-tabs button i { color: var(--faint); font: 11px var(--mono); font-style: normal; transition: color .2s; }
.show-tabs button:hover { color: var(--ink); }
.show-tabs button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 15, 17, .1), 0 0 0 1px rgba(14, 15, 17, .04); }
.show-tabs button.on i { color: var(--red); }
.show-tabs s { position: absolute; right: 13px; bottom: 4px; left: 13px; height: 1.5px; border-radius: 2px; }
.show-tabs button.on s { background: var(--line); }
.show-tabs s::after { content: ''; display: block; width: var(--p, 0%); height: 100%; border-radius: 2px; background: var(--ink); }
.show-view { position: relative; overflow: hidden; }
.show-stage { position: absolute; top: 0; left: 0; width: 1080px; height: 540px; overflow: hidden; transform-origin: 0 0; color: var(--text); font: 13px/1.5 var(--font); }
.show-stage.instant, .show-stage.instant * { transition: none !important; animation: none !important; }
.show-pause { position: absolute; right: 16px; bottom: 14px; z-index: 5; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5h2v9H3zM7 1.5h2v9H7z' fill='%230E0F11'/%3E%3C/svg%3E"); cursor: pointer; }
.show-pause.paused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5l7 4.5-7 4.5z' fill='%230E0F11'/%3E%3C/svg%3E"); }
.show-pause:hover { background-color: var(--sunken); }
.st-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 32% 50%, #000 15%, transparent 80%); mask-image: radial-gradient(ellipse 55% 70% at 32% 50%, #000 15%, transparent 80%); }
.st-drop { position: absolute; top: 46px; left: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 584px; height: 451px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, .55); color: var(--muted); font-size: 12.5px; opacity: 0; transition: opacity .35s, border-color .2s, background .2s; }
.st-drop svg { width: 28px; height: 28px; margin-bottom: 4px; }
.st-drop b { color: var(--ink); font-size: 15px; font-weight: 600; }
.st-drop.on { opacity: 1; }
.st-drop.over { border-color: var(--ink); background: #fff; }
.st-sheet { position: absolute; z-index: 1; aspect-ratio: 2200 / 1700; transition-property: left, top, width, opacity, transform; transition-duration: .8s, .8s, .8s, .45s, .45s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.st-sheet.hide { opacity: 0; transform: scale(.97); }
.st-sheet .st-paper { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(14, 15, 17, .08), 0 24px 50px -22px rgba(14, 15, 17, .28); transition: width .5s; }
.st-sheet.wide .st-paper { width: 119.7273%; }
.st-sheet img { position: absolute; top: 0; left: 0; display: block; height: 100%; pointer-events: none; user-select: none; }
.st-sheet .en { width: 100%; }
.st-sheet .zh { display: none; width: 119.7273%; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s linear, opacity .5s; }
.st-sheet .zh.vis { display: block; }
.st-sheet .zh.on { clip-path: inset(0 0 0 0); }
.st-sheet .zh.on.sheet { clip-path: inset(0 16.4768% 0 0); }   /* 工时页：中文图纸收起右边栏（2200 / 2634） */
.st-sheet .scan-h { position: absolute; top: 0; right: -1.5%; left: -1.5%; height: 1.5px; background: var(--ink); opacity: 0; pointer-events: none; }
.st-sheet .scan-h.go { animation: stscanh 1.9s linear forwards; }
.st-sheet .scan-v { position: absolute; top: -2%; bottom: -2%; left: 0; width: 2px; background: var(--red); opacity: 0; pointer-events: none; }
.st-sheet .scan-v.go { animation: stscanv 1.8s linear forwards; }
.st-bx { position: absolute; border: 1.5px solid rgba(14, 15, 17, .45); border-radius: 2px; opacity: 0; transform: scale(1.25); transition: opacity .25s, transform .25s, border-color .3s, background .3s, box-shadow .3s; }
.st-bx.in { opacity: 1; transform: none; }
.st-bx.c.r { border-color: var(--red); background: rgba(229, 72, 59, .1); }
.st-bx.c.y { border-color: var(--amber); background: rgba(217, 150, 28, .1); }
.st-bx.c.g { border-color: var(--green); background: rgba(46, 139, 94, .07); }
.dimg .st-bx.c.g { opacity: .22; }
.ry .st-bx.g { opacity: 0; }
.st-bx.ok { border-color: var(--faint) !important; background: rgba(14, 15, 17, .03) !important; }
.st-bx.ok::after { content: ''; position: absolute; top: -8px; right: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--green) center / 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hours .st-bx { opacity: 0; }
.hours .st-bx.hk.in { opacity: 1; border-color: var(--ink); background: rgba(14, 15, 17, .04); }
.hours .st-bx.hk.sel { box-shadow: 0 0 0 3px rgba(14, 15, 17, .14); }
.nobox .st-bx { opacity: 0 !important; }
.st-ring { position: absolute; border: 2px solid var(--ink); border-radius: 7px; opacity: 0; transform: scale(1.25); transition: opacity .3s, transform .3s; pointer-events: none; }
.st-ring.on { opacity: 1; transform: none; }
.st-lines { position: absolute; top: 0; left: 0; z-index: 3; width: 1080px; height: 540px; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s; }
.st-lines.on { opacity: 1; }
.st-lines path { fill: none; stroke-linecap: round; }
.st-lines .halo { stroke: #fff; stroke-width: 5; }
.st-lines .ln { stroke: var(--ink); stroke-width: 1.3; }
.st-lines .d1 { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.st-lines .d2 { fill: var(--ink); transition: opacity .2s; }
.fc { position: absolute; left: 724px; z-index: 4; width: 300px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(14, 15, 17, .05), 0 18px 40px -18px rgba(14, 15, 17, .22); opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .4s; }
.fc.on { opacity: 1; transform: none; }
.st-b { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: transform .12s, background .15s, opacity .35s; }
.st-b.dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.show-stage .press { transform: scale(.96); }
.fc-status { top: 140px; }
.st-fh { display: flex; align-items: center; gap: 10px; }
.st-fh .st-fi { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--sunken); color: var(--text-2); }
.st-fh .st-fi svg { width: 18px; height: 18px; }
.st-fh b { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.st-fh small { color: var(--muted); font-size: 11.5px; }
.st-fh .st-fn { transition: opacity .2s; }
.st-fh .st-fn.swap { opacity: 0; }
.st-ph { margin: 12px 0 0; padding: 0; list-style: none; }
.st-ph li { display: flex; align-items: center; gap: 9px; height: 28px; color: var(--faint); font-size: 13px; transition: color .25s; }
.st-ph li i { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: 50%; transition: border-color .25s, background-color .25s; }
.st-ph li.on { color: var(--ink); font-weight: 500; }
.st-ph li.on i { border-color: var(--ink); border-right-color: transparent; animation: stspin .8s linear infinite; }
.st-ph li.ok { color: var(--text-2); }
.st-ph li.ok i { border-color: var(--ink); background: var(--ink) center / 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st-ph li em { margin-left: auto; color: var(--muted); font: 11.5px var(--mono); font-style: normal; }
.fc .st-pb { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: var(--sunken); }
.fc .st-pb i { display: block; width: 0; height: 100%; background: var(--ink); transition: width .45s linear; }
.fc .st-eta { margin: 8px 0 0; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.fc-status .st-res { display: none; margin-top: 14px; }
.fc-status.done .st-ph, .fc-status.done .st-pb, .fc-status.done .st-eta { display: none; }
.fc-status.done .st-res { display: block; animation: stin .4s both; }
.st-res b { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.st-res .vsplit { margin-top: 10px; animation: stwipe .7s .15s both; }
.st-res .st-lg { display: flex; gap: 14px; margin-top: 10px; color: var(--text-2); font-size: 12px; }
.st-res .st-lg span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.st-res .st-lg .r::before { background: var(--red); }
.st-res .st-lg .y::before { background: var(--amber); }
.st-res .st-lg .g::before { background: var(--green); }
.fc-pick { top: 88px; }
.pk-top { display: flex; align-items: center; gap: 8px; }
.pk-top .kind { color: var(--muted); font-size: 12px; }
.pk-top .lv { margin-left: auto; padding: 1px 7px; border-radius: 5px; background: var(--red-soft); color: var(--red-ink); font-size: 11px; font-weight: 600; transition: background .25s, color .25s; }
.fc-pick.ok .lv { background: var(--green-soft); color: var(--green-ink); }
.fc .st-why { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--red-soft); color: var(--red-ink); font-size: 12px; line-height: 1.55; }
.fc .st-crop { position: relative; height: 110px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fc .st-crop i { position: absolute; top: 50%; left: 50%; background-repeat: no-repeat; transform: translate(-50%, -50%); }
.st-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; transition: border-color .2s, background .2s, box-shadow .2s; }
.st-opt .key { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-2); font: 600 11px var(--mono); transition: all .2s; }
.st-opt .en { display: block; color: var(--ink); font: 12px/1.5 var(--mono); }
.st-opt .zh { display: block; color: var(--text-2); font-size: 12.5px; }
.st-opt .zh small, .fc-mag small { color: var(--muted); font-size: 10.5px; }
.st-opt.on { border-color: var(--ink); background: var(--panel); box-shadow: inset 2px 0 var(--ink); }
.st-opt.on .key { border-color: var(--ink); background: var(--ink); color: #fff; }
.fc-check { top: 178px; }
.ck-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 40px; gap: 10px; align-items: center; height: 42px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ck-row:first-child { margin-top: -6px; }
.ck-row .lab { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; }
.ck-row .d { width: 8px; height: 8px; border-radius: 50%; }
.ck-row .d.r { background: var(--red); }
.ck-row .d.y { background: var(--amber); }
.ck-row .d.g { background: var(--green); }
.ck-row.g, .ck-row.g .lab { color: var(--muted); font-weight: 400; }
.st-ticks { display: flex; gap: 5px; }
.st-ticks i { width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 5px; transition: border-color .25s, background-color .25s; }
.st-ticks i.ok { border-color: var(--green); background: var(--green) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ck-row .n { color: var(--muted); font: 12px var(--mono); text-align: right; }
.ck-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ck-foot .lock { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; transition: color .25s; }
.ck-foot .lock svg { width: 13px; height: 13px; }
.ck-foot .exp { opacity: 0; transform: translateY(4px); }
.fc-check.ready .lock { color: var(--green-ink); }
.fc-check.ready .lock svg { display: none; }
.fc-check.ready .lock::before { content: '✓'; font-weight: 700; }
.fc-check.ready .exp { opacity: 1; transform: none; animation: stflash 1s .3s 2; }
.fc-mag { top: 92px; padding: 10px; }
.fc-mag .st-crop { height: 300px; margin: 0; }
.fc-mag p { margin: 9px 4px 1px; color: var(--muted); font-size: 12px; }
.fc-hours { top: 50px; padding: 0; overflow: hidden; }
.fc-hours .st-hh { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 10px; }
.fc-hours .st-hh b { color: var(--ink); font-size: 14px; }
.fc-hours .st-hh small { color: var(--muted); font-size: 11.5px; }
.st-hr { display: grid; grid-template-columns: minmax(0, 1fr) 34px 78px; gap: 8px; align-items: center; height: 40px; padding: 0 16px; border-top: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s, background .2s, box-shadow .2s; }
.st-hr.in { opacity: 1; transform: none; }
.st-hr .nm { color: var(--ink); font-weight: 500; }
.st-hr .q { color: var(--muted); font-size: 12px; text-align: right; }
.st-hr .m { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); transition: border-color .2s, box-shadow .2s, color .2s; }
.st-hr .m.ref { color: var(--faint); }
.st-hr .m em { margin-left: auto; padding: 0 4px; border: 1px dashed var(--line-2); border-radius: 4px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 14px; }
.st-hr .m:not(.ref) em, .st-hr .m.edit em { display: none; }
.st-hr .m.edit { border-color: var(--ink); box-shadow: var(--ring); color: var(--ink); }
.st-hr.sel { background: var(--panel); box-shadow: inset 2px 0 var(--ink); }
.st-hs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 4px; border-top: 1px solid var(--line); }
.st-hs small { display: block; color: var(--muted); font-size: 11px; }
.st-hs b { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-hs b i { margin-left: 3px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0; }
.st-hf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 14px; }
.st-hf small { color: var(--muted); font-size: 11.5px; }
.fc-hours .st-hs, .fc-hours .st-hf { opacity: 0; transition: opacity .35s; }
.fc-hours.sum .st-hs, .fc-hours.sum .st-hf { opacity: 1; }
.st-file { position: absolute; top: 0; left: 0; z-index: 6; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; box-shadow: var(--shadow-pop); color: var(--ink); font-size: 13px; font-weight: 500; opacity: 0; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .25s; }
.st-file svg { width: 20px; height: 20px; color: var(--text-2); }
.st-file em { padding: 0 5px; border-radius: 4px; background: var(--red-soft); color: var(--red-ink); font: 600 10px/16px var(--mono); font-style: normal; }
.st-file.on { opacity: 1; }
.st-file.drop { opacity: 0; }
.st-end { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.st-end.on { opacity: 1; }
.st-end img { width: 46px; height: 46px; }
.st-end h3 { margin: 10px 0 0; color: var(--ink); font-size: 32px; font-weight: 650; letter-spacing: -.03em; }
.st-end p { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: .25em; }
.st-toast { position: absolute; top: 18px; left: 50%; z-index: 9; padding: 8px 14px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap; opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s, transform .25s; }
.st-toast::before { content: '✓'; margin-right: 8px; color: #7FD3A8; }
.st-toast.on { opacity: 1; transform: translate(-50%, 0); }
.st-cur { position: absolute; top: 0; left: 0; z-index: 10; width: 22px; height: 22px; margin: -3px 0 0 -4px; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); transition: transform .65s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.st-cur.on { opacity: 1; }
.st-cur svg { display: block; width: 100%; height: 100%; transition: transform .12s; }
.st-cur.down svg { transform: scale(.85); }
.st-ripple { position: absolute; z-index: 9; width: 0; height: 0; pointer-events: none; }
.st-ripple::after { content: ''; position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 50%; animation: string .6s ease-out forwards; }
@keyframes stin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes stspin { to { transform: rotate(360deg); } }
@keyframes stwipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stflash { 50% { box-shadow: 0 0 0 5px rgba(14, 15, 17, .16); } }
@keyframes string { from { opacity: .45; transform: scale(.3); } to { opacity: 0; transform: scale(1); } }
@keyframes stscanh { 0% { top: 0; opacity: .7; } 94% { opacity: .7; } 100% { top: 100%; opacity: 0; } }
@keyframes stscanv { 0% { left: 0; opacity: 1; } 94% { opacity: 1; } 100% { left: 119.7%; opacity: 0; } }

/* 图纸保密（10-24 用户要首页重点讲保密：照行业做法、按正式上线的标准写；上线前要兑现的见待办） */
.trust-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text-2); font-size: 13px; transition: border-color .2s, color .2s; }
.trust-pill:hover { border-color: var(--line-2); color: var(--ink); }
.trust-pill svg { width: 15px; height: 15px; color: var(--ink); }
.trust-pill i { color: var(--faint); font-style: normal; }
.hero.v2 .trust-pill + .note { margin-top: 12px; }
.secure-band { padding: 112px 0; background: var(--ink); color: #fff; }
.secure-band .section-title .no { color: rgba(255, 255, 255, .5); }
.secure-band .section-title .no::before { background: rgba(255, 255, 255, .35); }
.secure-band .section-title h2 { color: #fff; }
.secure-band .section-title h2 .mute { color: rgba(255, 255, 255, .45); }
.secure-band .section-title p { color: rgba(255, 255, 255, .62); }
.secure-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); border-left: 1px solid rgba(255, 255, 255, .14); }
.sec-item { padding: 28px 28px 30px; border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sec-ic { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; color: #fff; }
.sec-ic svg { width: 19px; height: 19px; }
.sec-item b { display: block; margin-top: 18px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sec-item p { margin-top: 8px; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.75; }
.secure-foot { margin-top: 22px; color: rgba(255, 255, 255, .5); font-size: 13px; }
.secure-foot a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.secure-foot a:hover { color: #fff; }

/* 规则库「越用越精准」（10-24 用户：规则库是「越用越聪明」的好卖点，要讲清楚）：修订 → 沉淀 → 沿用，底下一条回环线 */
.learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.lr-step { position: relative; display: flex; flex-direction: column; gap: 18px; }
.lr-step + .lr-step::before { content: ''; position: absolute; top: 9px; left: -36px; width: 24px; height: 1.5px; background: var(--line-2); }
.lr-step + .lr-step::after { content: ''; position: absolute; top: 5px; left: -17px; width: 7px; height: 7px; border-top: 1.5px solid var(--line-2); border-right: 1.5px solid var(--line-2); transform: rotate(45deg); }
.lr-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; row-gap: 6px; }
.lr-no { color: var(--faint); font: 12px var(--mono); transition: color .3s; }
.lr-head b { color: var(--ink); font-size: 18px; font-weight: 600; }
.lr-head > span:last-child { grid-column: 2; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.lr-step.on .lr-no { color: var(--red); }
.lr-card { display: flex; flex: 1; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 1px 2px rgba(14, 15, 17, .04); transition: border-color .35s, box-shadow .35s; }
.lr-step.on .lr-card { border-color: var(--line-2); box-shadow: 0 1px 2px rgba(14, 15, 17, .05), 0 22px 44px -28px rgba(14, 15, 17, .32); }
.lr-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.lr-k { color: var(--muted); font-size: 12px; }
.lr-en { overflow: hidden; color: var(--ink); font: 12px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.lr-zh { color: var(--text-2); font-size: 13.5px; }
.lr-old { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--red); }
.lr-new { color: var(--ink); font-weight: 600; }
.lr-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 14px; }
.lr-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; }
.lr-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; }
.lr-title span { color: var(--muted); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
.lr-lib { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 9px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.lr-lib .lr-zh { grid-column: 2; }
.lr-tag { display: grid; grid-row: span 2; place-items: center; height: 22px; border-radius: 5px; background: var(--sunken); color: var(--text-2); font-size: 11px; }
.lr-fresh { background: var(--panel); box-shadow: inset 2px 0 var(--ink); }
.lr-step.on .lr-fresh .lr-tag { background: var(--ink); color: #fff; }
.lr-use { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lr-use .lr-zh { grid-row: 2; color: var(--ink); }
.lr-chip { grid-row: span 2; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: 11px; font-weight: 500; white-space: nowrap; }
.lr-loop { position: relative; height: 34px; margin: 6px 16.66% 0; border: 1.5px dashed var(--line-2); border-top: 0; border-radius: 0 0 16px 16px; }
.lr-loop::before { content: ''; position: absolute; top: -2px; left: -5.5px; width: 8px; height: 8px; border-top: 1.5px solid var(--line-2); border-left: 1.5px solid var(--line-2); background: transparent; transform: rotate(45deg); }
.lr-loop span { position: absolute; bottom: -10px; left: 50%; padding: 0 14px; background: var(--paper); color: var(--muted); font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; transform: translateX(-50%); }
.lr-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--line); }
.lr-notes > div { padding: 20px 22px 0 0; }
.lr-notes > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.lr-notes b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.lr-notes span { display: block; margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.7; }

/* 第五步「沉淀」：修订一条存为规则，下一张图纸自动沿用（10-24 用户：越用越精准要在演示和功能里都看得到） */
.fc-learn { top: 104px; width: 326px; }
.fc-learn .lr-en, .fc-learn .lr-zh { overflow: visible; white-space: normal; }
.fc-learn .lv { background: var(--sunken); color: var(--text-2); }
.fc-learn.saved .lv { background: var(--green-soft); color: var(--green-ink); }
.fc-learn .lr-row { grid-template-columns: 46px minmax(0, 1fr); }
.fc-learn .st-save { transition: background .3s, color .3s, border-color .3s, transform .12s; }
.fc-learn.saved .st-save { border-color: var(--line-2); background: #fff; color: var(--muted); }
.st-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; background: var(--ink); vertical-align: -2px; animation: stblink 1s steps(1) infinite; }
.fc-learn.saved .st-caret { display: none; }
@keyframes stblink { 50% { opacity: 0; } }
.fc-lib { top: 132px; left: 118px; width: 316px; }
.fc-lib .lr-fresh .lr-tag { background: var(--ink); color: #fff; }
.fc-lib .lr-fresh.flash { animation: stflash 1s 1; }
.st-libsum { margin-top: 12px; color: var(--text-2); font-size: 12px; }
.st-libsum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-next { top: 112px; left: 496px; width: 444px; }
.st-nrows { margin-top: 10px; }
.fc-next .lr-use { opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; }
.fc-next .lr-use.in { opacity: 1; transform: none; }
.st-nsum { margin-top: 12px; color: var(--text-2); font-size: 12.5px; opacity: 0; transition: opacity .35s; }
.fc-next.sum .st-nsum { opacity: 1; }

/* 怎么用：左边九条短句（按演示的五步排），右边跟着换示意（照 mirasim 的功能导览）；细节都放这里 */
.tour { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.tour-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.tour-list li { border-bottom: 1px solid var(--line); }
.tour-list button { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); width: 100%; padding: 15px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tour-list i { padding-top: 3px; color: var(--faint); font: 12px var(--mono); font-style: normal; transition: color .2s; }
.tour-list b { color: var(--text-2); font-size: 16px; font-weight: 500; transition: color .2s; }
.tour-list button > span { display: none; grid-column: 2; margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.75; }
.tour-list s { position: absolute; right: 0; bottom: -1px; left: 38px; height: 1.5px; }
.tour-list s::after { content: ''; display: block; width: var(--p, 0%); height: 100%; background: var(--ink); }
.tour-list button:hover b, .tour-list button.on b { color: var(--ink); }
.tour-list button.on b { font-weight: 600; }
.tour-list button.on i { color: var(--red); }
.tour-list button.on > span { display: block; animation: stin .35s both; }
.tour-view { position: sticky; top: 96px; display: grid; min-height: 480px; padding: 40px; border-radius: 20px; background: var(--bg); }
.tv { display: grid; grid-area: 1 / 1; align-content: center; gap: 10px; width: min(100%, 480px); margin: 0 auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s, transform .4s, visibility .4s; }
.tv.on { opacity: 1; visibility: visible; transform: none; }
.tv-crop { position: relative; margin-bottom: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff no-repeat; box-shadow: 0 18px 40px -26px rgba(14, 15, 17, .3); }
.tv-crop i { position: absolute; border: 1.5px solid var(--amber); border-radius: 2px; background: rgba(217, 150, 28, .1); }
.tv-crop i.r { border-color: var(--red); background: rgba(229, 72, 59, .1); }
.tv-crop i.g { border-color: var(--green); background: rgba(46, 139, 94, .08); }
.tv-crop i b { position: absolute; bottom: 100%; left: -1.5px; padding: 0 4px; border-radius: 3px 3px 0 0; background: var(--amber); color: #fff; font: 600 10px/14px var(--mono); }
.tv-crop i.r b { background: var(--red); }
.tv-crop i.g b { background: var(--green); }
.tv-chips { display: flex; justify-content: center; gap: 8px; }
.tv-chips span { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text-2); font-size: 12.5px; }
.ht.ht-mini { overflow: visible; box-shadow: 0 18px 40px -26px rgba(14, 15, 17, .3); }
.ht.ht-mini .ht-head { padding: 12px 16px; }
.ht.ht-mini .ht-row { grid-template-columns: 18px minmax(0, 1fr) 30px 86px 34px; padding: 6px 16px; font-size: 12.5px; }
.ht.ht-mini .ht-row .m { height: 26px; }
.ht.ht-mini .ht-sum { padding: 12px 16px; }
.ht.ht-mini .ht-sum b { font-size: 20px; }
.section-title h2 .mute { color: var(--muted); }
.tv-next { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
/* 功能导览的动效（10-25）：demo.js 切到哪块给哪块加 .play，进场依次出现；不加 .play 就是最后的样子（减少动态效果时不加） */
.tv-scan::after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 1.5px; background: var(--ink); opacity: 0; pointer-events: none; }
.tv-draw .tv-en { position: absolute; inset: 0; background-repeat: no-repeat; background-size: inherit; background-position: inherit; clip-path: inset(0 0 0 100%); }
.tv-draw::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--red); opacity: 0; pointer-events: none; }
.tv .lr-old { justify-self: start; }
.tv.play .tv-scan::after { animation: stscanh 1s .15s linear both; }
.tv.play .tv-scan i { animation: tv-box .25s both; }
.tv.play .tv-scan i:nth-child(1) { animation-delay: .7s; }
.tv.play .tv-scan i:nth-child(2) { animation-delay: .9s; }
.tv.play .vrow, .tv.play .vlevel, .tv.play .tv-m3, .tv.play .tv-chips span, .tv.play .vnote, .tv.play .ht-row, .tv.play .ht-sum,
.tv.play .lr-row, .tv.play .tv-next + .lr-card, .tv.play .tv-next { animation: tv-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.tv.play .vrow:nth-child(2) { animation-delay: 1s; }
.tv.play .vrow:nth-child(3) { animation-delay: 1.15s; }
.tv.play .vlevel:nth-child(2) { animation-delay: .1s; }
.tv.play .vlevel:nth-child(3) { animation-delay: .2s; }
.tv.play .vsplit { animation: stwipe .8s .45s both; }
.tv.play[data-k="1"] .vnote { animation-delay: 1.2s; }
.tv.play .tv-draw .tv-en { animation: tv-uncover 1.3s .3s linear both; }
.tv.play .tv-draw::after { animation: tv-line 1.3s .3s linear both; }
.tv.play .tv-m3 { animation-delay: 1.7s; }
.tv.play .tv-chips span:nth-child(1) { animation-delay: 2s; }
.tv.play .tv-chips span:nth-child(2) { animation-delay: 2.06s; }
.tv.play .tv-chips span:nth-child(3) { animation-delay: 2.12s; }
.tv.play .tv-chips span:nth-child(4) { animation-delay: 2.18s; }
.tv.play .tv-chips span:nth-child(5) { animation-delay: 2.24s; }
.tv.play .ht-row:nth-child(3) { animation-delay: .07s; }
.tv.play .ht-row:nth-child(4) { animation-delay: .14s; }
.tv.play .ht-row:nth-child(5) { animation-delay: .21s; }
.tv.play .ht-row:nth-child(6) { animation-delay: .28s; }
.tv.play .ht-row:nth-child(7) { animation-delay: .35s; }
.tv.play .ht-row:nth-child(8) { animation-delay: .42s; }
.tv.play .ht-sum { animation-delay: .6s; }
.tv.play .ht-row.on .m { animation: stflash .8s 1.5s; }
.tv.play .lr-row:nth-child(2) { animation-delay: .12s; }
.tv.play .lr-old { position: relative; text-decoration: none; }
.tv.play .lr-old::after { content: ''; position: absolute; top: 52%; right: 0; left: 0; height: 1px; background: var(--red); transform-origin: left; animation: tv-strike .45s .55s both; }
.tv.play .lr-row:nth-child(3) { animation-delay: 1.05s; }
.tv.play .lr-btn { animation: stflash .8s 1.45s; }
.tv.play .tv-next { animation-delay: 1.9s; }
.tv.play .tv-next + .lr-card { animation-delay: 2.1s; }
.tv.play[data-k="4"] .vnote { animation-delay: 2.5s; }
@keyframes tv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tv-box { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
@keyframes tv-uncover { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes tv-line { 0% { left: 0; opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes tv-strike { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tv.play *, .tv.play *::after { animation: none !important; } }
.tv-next::before, .tv-next::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.tv .vnote a { margin-left: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

/* 序号标签（官网、核对页共用） */
.seqno { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--amber-soft); color: var(--amber-ink); font: 600 11px var(--mono); }
.seqno.c-red, .c-red .seqno { background: var(--red-soft); color: var(--red-ink); }
.seqno.c-green, .c-green .seqno { background: var(--green-soft); color: var(--green-ink); }
.seqno.done, .done .seqno, .seqno.skip, .skip .seqno { background: var(--sunken); color: var(--muted); }

/* 规格条 */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 96px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec { padding: 26px 26px 28px; border-left: 1px solid var(--line); }
.spec:first-child { border-left: 0; padding-left: 0; }
.spec b { display: block; color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.spec span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }

.section { padding: 112px 0; }
.section.alt { background: var(--bg); }
.section-title { max-width: 720px; margin-bottom: 48px; }
.section-title .no { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.section-title .no::before { content: ''; width: 18px; height: 1px; background: var(--faint); }
.section-title h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.section-title p { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.section-title.center { margin-right: auto; margin-left: auto; text-align: center; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feature { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.feature .txt { padding: 26px 28px 22px; }
.feature .no { color: var(--muted); font: 12px var(--mono); letter-spacing: .08em; }
.feature h3 { margin-top: 10px; font-size: 19px; letter-spacing: -.015em; }
.feature p { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.75; }
.feature .vis { display: grid; flex: 1; align-content: center; gap: 8px; min-height: 230px; margin: 0 16px 16px; padding: 22px; border-radius: 12px; background: var(--bg); }
.vrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; }
.vrow.rule { grid-template-columns: 44px minmax(0, 1fr) auto; }
.vrow .tag { justify-content: center; padding: 0 6px; }
.vrow .en { color: var(--ink); font: 12px var(--mono); }
.vrow .zh { color: var(--text-2); font-size: 12.5px; }
.vrow .r { color: var(--muted); font-size: 12px; }
.vnote { margin-top: 4px; color: var(--muted); font-size: 12px; }

.vlevel { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; }
.vlevel .lv { display: grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.vlevel .lv.red { background: var(--red-soft); color: var(--red-ink); }
.vlevel .lv.amber { background: var(--amber-soft); color: var(--amber-ink); }
.vlevel .lv.green { background: var(--green-soft); color: var(--green-ink); }
.vlevel b { color: var(--ink); font-weight: 600; }
.vlevel .cnt { color: var(--text-2); font: 12px var(--mono); }
.vsplit { display: flex; gap: 2px; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 9px; }
.vsplit i.red { background: var(--red); }
.vsplit i.amber { background: var(--amber); }
.vsplit i.green { background: var(--green); }

/* 导出效果：拖动竖线对照（demo.js） */
.compare { position: relative; max-width: min(100%, calc((100svh - 150px) * 22 / 17)); margin: 0 auto; overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -45px rgba(14, 15, 17, .4); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare img { display: block; width: 100%; height: auto; pointer-events: none; }
.compare .c-zh { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.c-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; outline: none; }
.c-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ink); }
.c-handle i { position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; margin-top: -20px; border: 1px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: var(--shadow-pop); transition: transform .15s; }
.c-handle i::before, .c-handle i::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.6px solid var(--ink); border-left: 1.6px solid var(--ink); }
.c-handle i::before { left: 11px; transform: rotate(-45deg); }
.c-handle i::after { right: 11px; transform: rotate(135deg); }
.compare.drag .c-handle i, .c-handle:focus-visible i { transform: scale(1.08); box-shadow: var(--ring), var(--shadow-pop); }
.c-label { position: absolute; top: 16px; padding: 4px 10px; border-radius: 7px; background: rgba(14, 15, 17, .82); color: #fff; font-size: 12px; pointer-events: none; }
.c-label.l { left: 16px; }
.c-label.r { right: 16px; }
.compare-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid var(--line); }
.compare-notes > div { padding: 20px 22px 0 0; }
.compare-notes > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.compare-notes b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.compare-notes span { display: block; margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.compare-foot { margin-top: 22px; color: var(--muted); font-size: 12.5px; }

/* 工时表（「怎么用」第 07 条的示意） */
.ht { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); box-shadow: 0 30px 70px -45px rgba(14, 15, 17, .4); }
.ht-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ht-head b { color: var(--ink); font-size: 15px; }
.ht-head span { font-size: 12.5px; }
.ht-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px 96px 44px; gap: 10px; align-items: center; padding: 9px 20px; border-top: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.ht-row.th { border-top: 0; background: var(--panel); color: var(--muted); font-size: 12px; }
.ht-row .i { color: var(--muted); font: 12px var(--mono); }
.ht-row b { display: block; color: var(--ink); font-weight: 600; }
.ht-row small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.ht-row > span:nth-child(3), .ht-row > span:nth-child(5) { text-align: right; }
.ht-row .m { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--ink); }
.ht-row .m.ref { color: var(--faint); }
.ht-row .m em { margin-left: auto; padding: 0 5px; border: 1px dashed var(--line-2); border-radius: 4px; color: var(--muted); font-size: 10.5px; font-style: normal; line-height: 15px; }
.ht-row .m em.mine { border: 1px solid var(--ink); color: var(--ink); }   /* 本厂工时实线、参考值虚线，跟工时页一样 */
.ht-row.on { background: var(--panel); box-shadow: inset 2px 0 var(--ink); }
.ht-row.on .m { border-color: var(--ink); }
.ht-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 20px; border-top: 1px solid var(--line); }
.ht-sum > div { display: flex; flex-direction: column; }
.ht-sum > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.ht-sum span { color: var(--muted); font-size: 12px; }
.ht-sum b { color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ht-sum small { color: var(--muted); font-size: 12px; }
.ht-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--panel); }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.step { position: relative; padding: 28px 26px 30px; border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; }
.step .idx { color: var(--muted); font: 12px var(--mono); letter-spacing: .08em; }
.step h3 { margin-top: 18px; font-size: 17px; }
.step p { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.75; }
.step .ic { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 18px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
.step .ic svg { width: 18px; height: 18px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.plan h3 { color: var(--text-2); font-size: 14px; font-weight: 500; }
.plan .price { margin-top: 16px; color: var(--ink); font-size: 40px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan .price .cur { margin-right: 2px; color: var(--muted); font-size: 20px; font-weight: 500; }
.plan .price .unit { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.plan .per { min-height: 20px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.plan ul { display: grid; flex: 1; gap: 9px; margin: 18px 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--text-2); font-size: 13.5px; }
.plan li { position: relative; padding-left: 20px; }
.plan li::before { content: ''; position: absolute; top: .55em; left: 1px; width: 9px; height: 5px; border-bottom: 1.6px solid var(--ink); border-left: 1.6px solid var(--ink); transform: rotate(-45deg); }
.plan.featured { border-color: var(--ink); background: var(--ink); }
.plan.featured h3, .plan.featured .per, .plan.featured .price .cur, .plan.featured .price .unit { color: rgba(255, 255, 255, .6); }
.plan.featured .price { color: #fff; }
.plan.featured ul { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); }
.plan.featured li::before { border-color: #fff; }
.plan.featured .btn-primary { border-color: #fff; background: #fff; color: var(--ink); }
.plan.featured .btn-primary:hover { background: #ECECEA; }
.ribbon { position: absolute; top: 22px; right: 20px; padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; color: #fff; font-size: 12px; }
.ribbon.amber { border-color: var(--line-2); color: var(--text-2); }
/* 价目（10-25 订阅）：月付／年付切换、计量方式、份数逐项折合、按需购买一行（common.js 的 plansHTML、meterHTML）。
   一个小方块（.plan-pips i）＝1 份：计量方式、卡片、按需购买、工作台那一行都用它，读者一眼对得上。 */
.plan-switch { display: inline-flex; gap: 2px; margin-bottom: 20px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.plan-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.plan-switch button em { color: var(--muted); font-size: 12px; font-style: normal; }
.plan-switch button.on { background: var(--ink); color: #fff; }
.plan-switch button.on em { color: rgba(255, 255, 255, .65); }
.plan-pips { display: inline-flex; flex: none; gap: 2px; }
.plan-pips i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--ink); }
.plan-pips i.none { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.plan.featured .plan-pips i { background: #fff; }
.plan-meter { margin-bottom: 44px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.plan-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.plan-meter-head b { color: var(--ink); font-size: 15px; font-weight: 600; }
.plan-meter-head span { color: var(--muted); font-size: 13px; }
.plan-meter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-meter-cell { padding: 24px 24px 26px; }
.plan-meter-cell + .plan-meter-cell { border-left: 1px solid var(--line); }
.plan-meter-art { margin-bottom: 18px; color: var(--ink); line-height: 0; }
.plan-meter-art svg { width: 92px; height: 64px; }
.plan-meter-cell > b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.plan-meter-rule { display: flex; align-items: center; gap: 10px; min-height: 28px; margin-top: 8px; color: var(--text-2); font-size: 14px; white-space: nowrap; }   /* 定高：「不计费」没有大号数字，四格下面的说明照样对齐 */
.plan-meter-rule .plan-pips { gap: 3px; }
.plan-meter-rule .plan-pips i { width: 12px; height: 12px; border-radius: 2px; }
.plan-meter-rule strong { margin: 0 1px; color: var(--ink); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.plan-meter-cell p { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.plan-meter-cell.free .plan-meter-art { color: var(--faint); }
.plan-meter-cell.free .plan-meter-rule { color: var(--muted); }
.plan-meter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 24px; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--panel); }
.plan-meter-k { color: var(--muted); font-size: 13px; }
.plan-sum { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.plan-sum .op { color: var(--muted); font-style: normal; }
.plan-sum-item { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); white-space: nowrap; }
.plan-sum-eq { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }   /* 等号和结果不分行 */
.plan-sum b { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.plan-meter-gift { margin-left: auto; color: var(--text-2); font-size: 13px; }
.plan-meter-gift strong { color: var(--ink); font-weight: 600; }
.plan-meter-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -2px 0 18px; color: var(--text-2); font-size: 13px; }
.plan-meter-line > span { display: inline-flex; align-items: center; gap: 7px; }
.plan-units { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-units > b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-eq { margin-top: 12px; }
.plan-eq-cap { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.plan-eq-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--text-2); font-size: 13px; }
.plan-eq-row .plan-pips { width: calc(var(--pips, 3) * 9px - 2px); align-self: center; }
.plan-eq-dots { flex: 1; min-width: 10px; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); }
.plan-eq-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-eq-row em { margin-left: 3px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 400; }
.plan .plan-units + ul { margin-top: 16px; padding-top: 0; border-top: 0; }
.plan.featured .plan-units { border-top-color: rgba(255, 255, 255, .14); }
.plan.featured .plan-units > b, .plan.featured .plan-eq-row b, .plan.featured .plan-chips b { color: #fff; }
.plan.featured .plan-eq-row, .plan.featured .plan-chips { color: rgba(255, 255, 255, .78); }
.plan.featured .plan-eq-cap, .plan.featured .plan-eq-row em, .plan.featured .plan-chips em { color: rgba(255, 255, 255, .55); }
.plan.featured .plan-eq-dots { border-bottom-color: rgba(255, 255, 255, .22); }
.plan-once { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.plan-once-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--text-2); font-size: 13.5px; }
.plan-once-head b { color: var(--ink); font-size: 15px; font-weight: 600; }
.plan-once-price { color: var(--ink); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-once-price em { margin-left: 4px; color: var(--muted); font-size: 13px; font-style: normal; font-weight: 400; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; color: var(--text-2); font-size: 13px; }
.plan-chips > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.plan-chips b { margin-left: 2px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-chips em { color: var(--muted); font-size: 12px; font-style: normal; }
.plan-once .btn { flex: none; min-width: 112px; }
.plan-once-buy { display: flex; flex: none; align-items: center; gap: 14px; }
.plan-qty { display: inline-flex; height: 38px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper); overflow: hidden; }
.plan-qty button { width: 34px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 16px; cursor: pointer; }
.plan-qty button:hover { background: var(--sunken); color: var(--ink); }
.plan-qty input { width: 58px; border: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.plan-qty input::-webkit-outer-spin-button, .plan-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.plan-qty input:focus { outline: none; background: var(--panel); }
.plan-qty-sum { min-width: 92px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.plan-qty-sum b { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 份数用完：升级套餐、按份加购两格（common.js 的 overHTML） */
.plan-over { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.plan-over-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.plan-over-head b { color: var(--ink); font-size: 15px; font-weight: 600; }
.plan-over-head span { color: var(--muted); font-size: 13px; }
.plan-over-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-over-cell { display: flex; gap: 16px; padding: 20px 24px 22px; }
.plan-over-cell + .plan-over-cell { border-left: 1px solid var(--line); }
.plan-over-ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.plan-over-ic svg { width: 20px; height: 20px; }
.plan-over-cell b { color: var(--ink); font-size: 15px; font-weight: 600; }
.plan-over-cell p { margin-top: 6px; color: var(--text-2); font-size: 13.5px; line-height: 1.7; text-wrap: pretty; }
.plan-over-cell small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 760px) {
  .plan-over-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-over-cell + .plan-over-cell { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 900px) {
  .plan-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-meter-cell:nth-child(3) { border-left: 0; }
  .plan-meter-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plan-meter-gift { margin-left: 0; }
}
@media (max-width: 640px) {
  .plan-once { flex-direction: column; align-items: stretch; }
  .plan-once-buy { flex-wrap: wrap; }
  .plan-once-buy .btn { flex: 1; }
}
@media (max-width: 480px) {
  .plan-meter-head, .plan-meter-foot { padding: 14px 16px; }
  .plan-meter-cell { padding: 18px 16px 20px; }
  .plan-meter-art { margin-bottom: 14px; }
  .plan-meter-art svg { width: 76px; height: 53px; }
  .plan-meter-rule strong { font-size: 19px; }
  .plan-sum { gap: 5px; font-size: 12px; }
  .plan-sum-item { gap: 5px; padding: 3px 8px; }
  .plan-sum-eq { gap: 5px; }
}
.pay-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 26px; color: var(--muted); font-size: 13px; }
.pay-logos span { display: inline-flex; align-items: center; gap: 6px; }
.pay-logos .mark { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--line); }
.faq .qa { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq h4 { font-size: 15px; }
.faq p { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.75; }

.cta-band { padding: 96px 0; background: var(--ink); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; }
.cta-band p { margin-top: 14px; color: rgba(255, 255, 255, .6); font-size: 15px; }
.cta-band .cta { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.cta-band .btn-primary { border-color: #fff; background: #fff; color: var(--ink); }
.cta-band .btn-primary:hover { background: #ECECEA; }

/* 页脚：做成图纸标题栏的样子 */
.site-footer { padding: 40px 0 48px; background: var(--paper); }
.site-footer .wrap { width: min(1200px, calc(100vw - 48px)); margin: 0 auto; }
.tblock { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--ink); }
.tblock .tb-brand { display: grid; place-items: center start; padding: 18px 20px; border-right: 1px solid var(--ink); }
.tblock .tb-brand img { height: 32px; }
.tblock dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.tblock dl > div { padding: 10px 14px 12px; border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.tblock dl > div:nth-child(3n + 1) { border-left: 0; }
.tblock dl > div:nth-last-child(-n + 3) { border-bottom: 0; }
.tblock dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.tblock dd { margin: 2px 0 0; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.foot-note { margin-top: 14px; color: var(--faint); font: 11.5px var(--mono); letter-spacing: .02em; }

/* ===================== 登录注册 ===================== */
.auth-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.auth-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px; overflow: hidden; background: var(--ink); color: #fff; }
.auth-side::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.auth-side > * { position: relative; }
.auth-side h2 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.auth-side .en { margin-top: 14px; color: rgba(255, 255, 255, .45); font: 12px var(--mono); letter-spacing: .04em; }
.ticks { display: grid; gap: 14px; margin-top: 36px; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.ticks svg { width: 16px; height: 16px; color: #fff; }
.auth-side .muted { color: rgba(255, 255, 255, .45); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--paper); }
.auth-card { width: min(400px, 100%); padding: 0; border: 0; }
.auth-card h1 { font-size: 24px; letter-spacing: -.02em; }
.auth-card .hint { margin: 6px 0 24px; color: var(--muted); font-size: 13.5px; }
.join-box { display: grid; gap: 10px; }
.join-box #join-note { margin-bottom: 6px; line-height: 1.7; }
.join-box .error { margin-top: 0; }
.tabs { display: flex; gap: 2px; margin-bottom: 24px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.invite-card { margin-bottom: 24px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--ink); border-radius: 10px; background: var(--panel); }
.invite-card .k { color: var(--muted); font-size: 12px; }
.invite-card .v { margin: 2px 0 4px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.invite-card.bad { border-color: #EEC9C3; border-left-color: var(--red); background: var(--red-soft); }
.invite-card.bad .v { margin: 0; color: var(--red-ink); font-size: 13.5px; font-weight: 500; }
.agree { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 18px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; cursor: pointer; }
.agree input { flex: none; margin: 3px 0 0; accent-color: var(--ink); }
.agree a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
#forgot-line { margin-top: 2px; }
.forgot-note { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text-2); font-size: 12.5px; line-height: 1.8; }
.forgot-note p + p { margin-top: 6px; }
.tabs button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 15, 17, .08); }

/* ===================== 工作台 ===================== */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; height: 100vh; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar .brand { padding: 6px 10px 18px; }
.sidebar .brand img { height: 28px; }
.nav-label { padding: 18px 12px 6px; color: var(--faint); font-size: 11.5px; letter-spacing: .08em; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; }
.nav-item svg { width: 17px; height: 17px; color: var(--muted); }
.nav-item:hover { background: var(--sunken); color: var(--ink); }
.nav-item.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(14, 15, 17, .04); }
.nav-item.on svg { color: var(--ink); }
.side-card { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.side-card .big { margin: 2px 0 12px; color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.side-card .big small { margin-left: 4px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(247, 247, 245, .86); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); }
.topbar h1 { font-size: 16px; font-weight: 600; }
.topbar .right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.balance-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text-2); font-size: 12.5px; }
.balance-pill b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* 切换企业（一人在两个以上账户里才出现） */
.acct-switch { position: relative; }
.acct-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 240px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text-2); font: 12.5px var(--font); cursor: pointer; }
.acct-pill:hover { border-color: var(--line-2); color: var(--ink); }
.acct-pill span { display: inline-flex; }
.acct-pill svg { width: 15px; height: 15px; }
.acct-pill b { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.acct-switch .menu { min-width: 260px; }
.menu .acct-item { align-items: center; gap: 10px; }
.acct-item .acct-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item .acct-r { color: var(--muted); font-size: 12px; }
.acct-item svg, .acct-item i { flex: none; width: 15px; height: 15px; }
.acct-item.on { color: var(--ink); font-weight: 600; }
.menu .acct-manage { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--text-2); font-size: 12.5px; }
.user-menu { position: relative; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 600 13px var(--font); cursor: pointer; }
.menu { position: absolute; top: 42px; right: 0; z-index: 40; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-pop); }
.menu .who { margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.menu a, .menu button { display: flex; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13.5px var(--font); text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--sunken); color: var(--ink); }
.menu button.danger { color: var(--red-ink); }
.content { display: grid; gap: 24px; width: 100%; max-width: 1280px; padding: 28px 32px 72px; }
.content > *, .admin-main > *, .checkout > * { min-width: 0; }

.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; border-left: 3px solid var(--amber); color: var(--text-2); font-size: 13.5px; }
.inv-link { display: flex; gap: 8px; margin: 18px 0 8px; }
.inv-link .input { flex: 1; min-width: 0; font-size: 12px; }
.role-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.reset-box { border-top: 1px solid var(--line); }
.reset-box .inv-link { margin-top: 10px; }
.role-note h4 { margin-bottom: 6px; font-size: 13px; }
.role-note ul { padding-left: 18px; color: var(--text-2); font-size: 12.5px; line-height: 1.85; }
.ref-code { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ref-code b { font-size: 20px; letter-spacing: .14em; }
.ref-code .btn { margin-left: auto; }
.ref-rules { margin-top: 10px; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.9; }
.ref-rules b { color: var(--text); }
.acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; }
.row-acts { display: inline-flex; align-items: center; gap: 2px; }
.welcome h2 { font-size: 26px; letter-spacing: -.02em; }
.welcome p { margin-top: 4px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 16px 18px; }
.stat .label { color: var(--muted); font-size: 12.5px; }
.stat .value { margin-top: 6px; color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat .value small { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.stat .value.text { font-size: 20px; }
.stat .sub { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.stat.dashed { border-style: dashed; background: var(--panel); }
.stat .btn { margin-top: 10px; }

.upload { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); overflow: hidden; }
.dropzone { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 220px; margin: 14px; padding: 28px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--panel); text-align: center; transition: border-color .15s, background .15s; }
label.dropzone { cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--ink); background: #F4F4F1; }
.dropzone.busy { opacity: .6; pointer-events: none; }
.dz-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.dz-icon svg { width: 22px; height: 22px; }
.dz-title { color: var(--ink); font-size: 16px; font-weight: 600; }
.dropzone .btn { margin-top: 4px; }
.flow { display: grid; align-content: center; gap: 18px; margin: 0; padding: 26px 30px; border-left: 1px solid var(--line); list-style: none; counter-reset: s; }
.flow li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; counter-increment: s; }
.flow li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; padding-top: 2px; color: var(--muted); font: 500 12px var(--mono); }
.flow b { color: var(--ink); font-size: 14px; font-weight: 600; }
.flow span { color: var(--muted); font-size: 12.5px; }
.upload-side { display: grid; align-content: center; gap: 4px; padding: 24px 28px; border-left: 1px solid var(--line); }
.upload-side .field { margin-bottom: 6px; }
.engine { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text-2); font-size: 12.5px; }
.engine i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.engine.off { border-color: #F2C9C3; background: var(--red-soft); color: var(--red-ink); }
.engine.off i { background: var(--red); }
/* 上传前确认图纸类型（10-25）：首页上传框右侧整块，图纸页侧栏紧凑版；开关记在这台电脑上（app.js precheckToggle） */
.upc { display: grid; align-content: center; gap: 12px; padding: 24px 28px; border-left: 1px solid var(--line); }
.upc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upc-head b { color: var(--ink); font-size: 15px; font-weight: 600; }
.upc-desc { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.upc-rates { display: grid; margin: 2px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); list-style: none; transition: opacity .2s; }
.upc-rates li { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; font-size: 13px; }
.upc-rates li + li { border-top: 1px solid var(--line); }
.upc-rates span { color: var(--text-2); }
.upc-rates b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.upc-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.upc.off .upc-rates { opacity: .55; }
.upc-switch { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.upc-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upc-switch i { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.upc-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(14, 15, 17, .25); transition: transform .2s; }
.upc-switch input:checked + i { background: var(--ink); }
.upc-switch input:checked + i::after { transform: translateX(16px); }
.upc-switch input:focus-visible + i { box-shadow: var(--ring); }
.upc.compact { gap: 6px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.upload.up-home .flow { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 20px 28px 22px; border-top: 1px solid var(--line); border-left: 0; }
.upload.up-home .flow li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
@media (prefers-reduced-motion: reduce) { .upc-switch i, .upc-switch i::after, .upc-rates { transition: none; } }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.two.wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

/* 图纸卡片墙 */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 16px; padding: 18px; }
.dcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .15s, box-shadow .2s; }
.dcard:has(details[open]) { z-index: 5; }
.dcard:hover { border-color: var(--line-2); box-shadow: 0 10px 28px -12px rgba(14, 15, 17, .18); }
.dthumb { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; aspect-ratio: 4 / 3; padding: 14px; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; background-color: #EFEFEC; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 16px 16px; }
.dthumb > img, .dthumb > .ph { grid-area: 1 / 1; }
.dthumb img { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 1px 2px rgba(14, 15, 17, .1), 0 6px 16px rgba(14, 15, 17, .08); }
.dthumb .ph { display: grid; place-items: center; gap: 6px; color: var(--faint); font-size: 12px; }
.dthumb .ph svg { width: 28px; height: 28px; }
.dthumb .dstate { position: absolute; top: 10px; left: 10px; box-shadow: 0 0 0 1px rgba(14, 15, 17, .05); }
.dthumb .reading { position: absolute; right: 0; bottom: 0; left: 0; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--text-2); font-size: 12px; }
.dthumb .reading .pbar { width: 100%; margin: 6px 0 0; }
.dthumb .reading .rd-steps + .pbar { margin-top: 0; }
/* 读图进度（10-23）：四步、进度条、还要多久。只用墨黑和灰，颜色留给核对的红黄绿 */
.rd-steps { display: flex; flex-wrap: wrap; margin: 0 0 7px; padding: 0; list-style: none; color: var(--faint); font-size: 11.5px; }
.rd-steps li + li::before { content: '›'; margin: 0 5px; color: var(--line-2); font-weight: 400; }
.rd-steps li.done { color: var(--text-2); }
.rd-steps li.on { color: var(--ink); font-weight: 600; }
.rd-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.rd-eta { margin-top: 3px; color: var(--ink-2); }
.busy-note { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.busy-note[hidden] { display: none; }
.busy-note b { color: var(--ink); font-weight: 600; }
.dbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 14px; }   /* 文件名长了不撑宽卡片，省略号收尾 */
.dtitle { display: flex; align-items: center; gap: 6px; }
.dname { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
a.dname:hover { text-decoration: underline; text-underline-offset: 3px; }
.dmeta { color: var(--muted); font-size: 12px; }
.dprog { display: grid; gap: 6px; }
.dprog .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.dfoot { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.dmeta.cost { margin-top: -4px; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dcard.failed .dthumb { opacity: .7; }
.pbar, .mini { width: 150px; height: 4px; overflow: hidden; border-radius: 9px; background: var(--sunken); }
.pbar { margin: 4px 0 6px; }
.pbar span, .mini span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .5s; }
.mini { width: 100%; }
.mini span { background: var(--green); }
.tally { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tally i { width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; }
.tally i:first-child { margin-left: 0; }
.tally i.red { background: var(--red); }
.tally i.amber { background: var(--amber); }
.tally i.green { background: var(--green); }
.fail-msg { margin-top: 4px; color: var(--red-ink); font-size: 12px; overflow-wrap: anywhere; }
.wait-msg { margin-top: 4px; color: var(--amber-ink); font-size: 12px; overflow-wrap: anywhere; }
.dname-row { display: flex; align-items: center; gap: 8px; }
details.more { position: relative; }
details.more summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); font-size: 15px; letter-spacing: 1px; list-style: none; cursor: pointer; }
details.more summary:hover { background: var(--sunken); color: var(--ink); }
details.more summary::-webkit-details-marker { display: none; }
details.more .menu { top: 32px; right: 0; min-width: 220px; text-align: left; }
.rule-form { margin-top: 14px; }
.rule-form > p { margin: 10px 0 14px; }
.row-btns { display: flex; gap: 8px; }
details.builtin summary { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
details.builtin summary::-webkit-details-marker { display: none; }
details.builtin summary::before { content: '+'; width: 12px; color: var(--muted); font: 14px var(--mono); }
details.builtin[open] summary::before { content: '−'; }
details.builtin[open] summary { border-bottom: 1px solid var(--line); }

/* ===================== 核对页 ===================== */
body.rv { height: 100vh; overflow: hidden; }
.rv-top { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px 0 10px; border-bottom: 1px solid var(--line); background: var(--paper); }
.rv-back { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); font-size: 22px; line-height: 1; }
.rv-back:hover { background: var(--sunken); color: var(--ink); }
.rv-logo { display: block; flex: none; width: 26px; height: 26px; }
.rv-name { display: flex; flex-direction: column; min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.35; }
.rv-name b { overflow: hidden; color: var(--ink); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.rv-name .chip { height: 18px; padding: 0 6px; font-size: 11px; }
.rv-name .dot { margin: 0 6px; color: var(--faint); }
.rv-prog { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--text-2); }
.rv-bar { width: 180px; height: 4px; overflow: hidden; border-radius: 9px; background: var(--sunken); }
.rv-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .3s; }
.rv-acts { display: flex; flex: none; gap: 8px; }
.rv-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 33vw, 500px); height: calc(100vh - 56px); }
.rv-sheet { position: relative; min-width: 0; overflow: hidden; background-color: #ECECE9; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; }
.rv-canvas { position: absolute; inset: 0; overflow: auto; cursor: grab; overscroll-behavior: contain; }
.rv-canvas.grabbing { cursor: grabbing; }
.rv-canvas.lassoing, .rv-canvas.lassoing .bx { cursor: crosshair; }
.rv-pad { position: relative; display: flex; box-sizing: border-box; width: max-content; min-width: 100%; min-height: 100%; padding: 64px 32px 40px; }
.rv-stage { position: relative; flex: none; margin: auto; background: #fff; box-shadow: 0 1px 3px rgba(14, 15, 17, .08), 0 18px 44px rgba(14, 15, 17, .12); user-select: none; -webkit-user-select: none; }
.rv-stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.bx { position: absolute; border: 1.5px solid var(--amber); border-radius: 2px; background: rgba(217, 150, 28, .06); cursor: pointer; }
.bx:hover { background: rgba(217, 150, 28, .14); }
.bx.c-red { border-color: var(--red); background: rgba(229, 72, 59, .07); }
.bx.c-green { border-color: var(--green); background: rgba(46, 139, 94, .06); }
.bx.done { border: 1px solid rgba(14, 15, 17, .32); background: transparent; }
.bx.skip { border: 1px dashed var(--faint); background: transparent; }
.bx.on { z-index: 5; border-width: 2px; box-shadow: 0 0 0 3px rgba(14, 15, 17, .14); }
.bx .tag { position: absolute; bottom: 100%; left: -1.5px; height: auto; margin-bottom: 2px; padding: 0 4px; border-radius: 3px; background: var(--amber); color: #fff; font: 600 10px/14px var(--mono); white-space: nowrap; pointer-events: none; }
.bx.c-red .tag { background: var(--red); }
.bx.c-green .tag { background: var(--green); }
.bx.done .tag { background: var(--ink); opacity: .45; }
.bx.skip .tag { background: var(--faint); }
.bx.on .tag { z-index: 6; padding: 0 6px; font-size: 11.5px; line-height: 17px; opacity: 1; }
.no-tags .bx .tag { display: none; }
.no-tags .bx.on .tag { display: block; }
.rv-tools { position: absolute; top: 12px; left: 50%; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-pop); white-space: nowrap; }
.rv-pages { display: flex; align-items: center; gap: 2px; }
.tool { height: 30px; min-width: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 13px var(--font); cursor: pointer; }
.tool:hover { background: var(--sunken); color: var(--ink); }
.tool.on { background: var(--ink); color: #fff; }
.tool-text { min-width: 48px; color: var(--muted); font: 12px var(--mono); text-align: center; }
.tool-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.rv-lasso { position: absolute; z-index: 7; border: 1.5px dashed var(--ink); background: rgba(14, 15, 17, .05); pointer-events: none; }
.rv-pop, .rv-hint { position: absolute; bottom: 22px; left: 50%; z-index: 12; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; transform: translateX(-50%); border-radius: 12px; background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); font-size: 13px; white-space: nowrap; }
.rv-hint { padding: 9px 16px; background: rgba(14, 15, 17, .86); pointer-events: none; }
.rv-pop .btn-primary { border-color: #fff; background: #fff; color: var(--ink); }
.rv-pop .btn-ghost { color: rgba(255, 255, 255, .8); }
.rv-pop .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rv-wait { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: rgba(247, 247, 245, .9); color: var(--text-2); text-align: center; white-space: pre-line; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rv-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--paper); }
.rv-filter { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rv-filter .seg { flex: 1; min-width: 0; overflow-x: auto; }
.rv-filter .seg button { padding: 0 8px; white-space: nowrap; }
.rv-filter .seg small { margin-left: 3px; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.rv-filter .seg .f-红 small { color: var(--red); }
.rv-filter .seg .f-黄 small { color: var(--amber); }
.rv-filter .seg .f-绿 small { color: var(--green); }
.rv-filter select.input { flex: none; width: 100px; height: 34px; padding: 0 8px; font-size: 13px; }
.rv-detail { flex: 0 1 auto; min-height: 0; padding: 14px 16px 16px; overflow: auto; border-bottom: 1px solid var(--line); }
.rv-list { flex: 1 0 110px; min-height: 110px; margin: 0; padding: 4px 0; overflow: auto; list-style: none; }
.rv-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 8px; align-items: start; padding: 9px 14px 9px 11px; border-left: 2px solid transparent; cursor: pointer; }
.rv-row:hover { background: var(--panel); }
.rv-row.on { border-left-color: var(--ink); background: var(--panel); }
.rv-none { padding: 26px 18px; color: var(--muted); font-size: 13px; text-align: center; }
.rv-txt .en { color: var(--ink); font: 12.5px/1.45 var(--mono); overflow-wrap: anywhere; }
.rv-txt .zh { margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.rv-row.done .rv-txt .en, .rv-row.done .rv-txt .zh { color: var(--muted); }
.rv-row.skip .rv-txt { color: var(--faint); text-decoration: line-through; }
.rv-row.skip .rv-txt .en, .rv-row.skip .rv-txt .zh { color: var(--faint); }
.rv-mark { color: var(--green); font-size: 12px; text-align: right; }
.rv-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; }
.rv-keys kbd { margin-right: 4px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--text-2); font: 11px var(--mono); }
.dt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dt-head .grow { flex: 1; }
.dt-head .chip { height: 20px; }
.icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text-2); font-size: 17px; line-height: 1; cursor: pointer; }
.icon-btn:hover { border-color: var(--line-2); background: var(--sunken); color: var(--ink); }
.dt-crop { display: grid; place-items: center; min-height: 110px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dt-crop img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; }
.dt-why { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; line-height: 1.55; }
.dt-why.c-red { background: var(--red-soft); color: var(--red-ink); }
.dt-why.c-green { background: var(--green-soft); color: var(--green-ink); }
.dt-why.done { background: var(--sunken); color: var(--muted); }
.dt-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: baseline; margin-top: 10px; }
.dt-row > label { color: var(--muted); font-size: 12.5px; }
.dt-en { color: var(--ink); font: 13px/1.55 var(--mono); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.dt-conv { color: var(--text-2); font: 12.5px/1.6 var(--mono); }
.dt-row textarea { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--text); font: 14.5px/1.5 var(--font); resize: vertical; }
.dt-row textarea:focus { border-color: var(--ink); outline: none; box-shadow: var(--ring); }
.dt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rv-detail > .dt-acts { position: sticky; bottom: -16px; z-index: 2; margin: 14px -16px -16px; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.dt-acts kbd { margin-left: 2px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); font: 11px var(--mono); }
.dt-twins { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); font: 13px var(--font); text-align: left; cursor: pointer; }
.dt-twins:hover { border-color: var(--ink); }
.dt-who { margin-top: 10px; }
.dt-rule { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dt-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dt-rule > p { margin: 8px 0 12px; }
.dt-rule .field { margin-bottom: 10px; }
.dt-rule .field input { height: 36px; font-size: 14px; }
.dt-rule .check { margin-bottom: 10px; background: #fff; }

/* 核对页 10-22：先红后黄、选读法、改原文、转正、重新框、扫一眼 */
.rv-left { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--red-ink); }
.rv-mode { padding: 10px 12px 0; }
.rv-mode .seg { display: flex; width: 100%; }
.rv-mode .seg button { flex: 1; }
.rv-mode .seg small { margin-left: 4px; color: var(--amber); font-size: 11px; font-variant-numeric: tabular-nums; }
.rv-group { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; background: var(--paper); color: var(--text-2); font-size: 12px; font-weight: 600; }
.rv-group::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.rv-group.c-red::before { background: var(--red); }
.rv-group.c-amber::before { background: var(--amber); }
.rv-group.c-green::before { background: var(--green); }
.rv-group small { color: var(--muted); font-weight: 500; }
.rv-group-go { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink); font: 500 12px var(--font); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.rv-group-go:hover { text-decoration-color: var(--ink); }
.link-btn { flex: none; padding: 0; border: 0; background: none; color: var(--text-2); font: 12.5px var(--font); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.link-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }
.link-btn kbd, .dt-tip kbd, .dt-guide kbd, .dt-en-edit kbd, .gd-head kbd, .gd-foot kbd { margin: 0 1px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--text-2); font: 11px var(--mono); text-decoration: none; }
.gd-foot .btn-primary kbd { border-color: transparent; background: rgba(255, 255, 255, .18); color: #fff; }
.dt-tip { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text-2); font-size: 12px; line-height: 1.65; }
.dt-tip b { color: var(--ink); }
.dt-tip .icon-btn { flex: none; width: 24px; height: 24px; font-size: 15px; }
.dt-crop-bar { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.dt-crop-bar .grow { flex: 1; }
.dt-cands { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--amber-soft); }
.dt-cands.c-red { background: var(--red-soft); }
.dt-cands.done { background: var(--sunken); }
.dt-cands-q { color: var(--amber-ink); font-size: 12.5px; }
.dt-cands.c-red .dt-cands-q { color: var(--red-ink); }
.dt-cands.done .dt-cands-q { color: var(--muted); }
.dt-cand { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--text); font: 13px var(--font); text-align: left; cursor: pointer; }
.dt-cand:hover { border-color: var(--ink); }
.dt-cand.cur { background: var(--panel); }
.dt-cand kbd { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--panel); color: var(--text-2); font: 11px var(--mono); }
.dt-cand-en { color: var(--ink); font: 14px/1.45 var(--mono); overflow-wrap: anywhere; }
.dt-cand-en mark { background: none; color: var(--red-ink); font-weight: 600; text-decoration: underline 2px var(--red); text-underline-offset: 3px; }
.dt-cand-why { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.dt-cand-why em { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--sunken); color: var(--text-2); font-style: normal; }
.dt-cand-main { display: grid; gap: 3px; min-width: 0; }
.dt-cand-zh { display: flex; gap: 8px; align-items: baseline; color: var(--text); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.dt-cand-zh i { flex: none; color: var(--muted); font-size: 11.5px; font-style: normal; }
.dt-cand-warn { margin-left: 8px; color: var(--amber-ink); font-size: 11.5px; font-style: normal; white-space: nowrap; }
.dt-cand-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; }
.dt-zh { flex: 1; min-width: 0; color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.zh-inch { color: var(--muted); font-size: .86em; }
.zh-keep { font-family: var(--mono); font-size: .92em; }
.zh-note { margin-left: 8px; color: var(--muted); font-size: 11.5px; }
.dt-en-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dt-en-line .dt-en { flex: 1; min-width: 0; }
.dt-en-edit { display: grid; gap: 6px; }
.dt-en-edit .input { width: 100%; height: 38px; padding: 0 10px; font: 14px var(--mono); }
.dt-en.was { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(229, 72, 59, .55); }
.dt-hints > div { margin-top: 2px; }
.dt-guide { display: grid; gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.75; }
.dt-guide b { color: var(--ink); }
.dt-guide-red { padding: 8px 12px; border-radius: 8px; background: var(--red-soft); color: var(--red-ink); }
.rv-gridding .rv-tools, .rv-gridding .rv-filter, .rv-gridding .rv-list { display: none; }
.rv-gridding .rv-detail { flex: 1; max-height: none; border-bottom: 0; }
.rv-grid { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; background: var(--bg); }
.gd-head, .gd-foot { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px 20px; background: var(--paper); }
.gd-head { border-bottom: 1px solid var(--line); }
.gd-foot { border-top: 1px solid var(--line); }
.gd-head .grow, .gd-foot .grow { flex: 1; }
.gd-cards { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; padding: 16px 20px; overflow: auto; }
.gd-card { position: relative; display: grid; grid-template-rows: 100px auto auto; align-content: start; gap: 6px; height: 212px; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gd-card:hover { border-color: var(--line-2); box-shadow: 0 1px 3px rgba(14, 15, 17, .07); }
.gd-img { display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--panel); }
.gd-img img { display: block; max-width: 100%; max-height: 100px; object-fit: contain; pointer-events: none; }
.gd-en { display: -webkit-box; overflow: hidden; color: var(--ink); font: 12.5px/1.45 var(--mono); overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-en .seqno { margin-right: 6px; vertical-align: 1px; }
.gd-zh { display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-flag { position: absolute; top: 12px; right: 12px; display: none; padding: 1px 7px; border-radius: 5px; background: var(--red); color: #fff; font: 600 11px/18px var(--font); }
.gd-card.flag { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.gd-card.flag .gd-flag { display: block; }
.gd-empty { display: grid; gap: 10px; justify-items: center; margin: auto; padding: 40px; text-align: center; }
/* 10-22 下午：AI 有把握的免核，核对页只列要人看的 */
.rv-need { color: var(--red-ink); }
.rv-auto { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); }
.rv-filter .seg .f-要看的 small { color: var(--red); }
.bx.auto { border: 1px solid rgba(46, 139, 94, .55); background: transparent; }
.bx.auto .tag { background: var(--green); opacity: .8; }
.seqno.auto, .auto .seqno { background: var(--green-soft); color: var(--green-ink); }
.rv-row.auto .rv-txt .en, .rv-row.auto .rv-txt .zh { color: var(--muted); }
.rv-row.auto .rv-mark { color: var(--green); font: 600 10px var(--mono); }
.rv-group-why { color: var(--muted); font-weight: 400; }
.rv-glance { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--amber-ink); }
.dt-tip .tip-red { color: var(--red-ink); }
.dt-tip .tip-amber { color: var(--amber-ink); }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 14px 10px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--text-2); font-size: 12.5px; }
.rv-foot > span { flex: 1 1 auto; }
.rv-foot .rv-group-go { margin-left: 0; }

/* ===================== 收银台 ===================== */
.pay-header { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 max(20px, calc((100vw - 1000px) / 2)); border-bottom: 1px solid var(--line); background: var(--paper); }
.pay-header .secure { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.pay-header .secure svg { width: 15px; height: 15px; color: var(--ink); }
.checkout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; width: min(1000px, calc(100vw - 32px)); margin: 32px auto 56px; }
.summary { overflow: hidden; }
.summary .top { padding: 22px 22px 18px; }
.summary .amount { margin: 4px 0 2px; color: var(--ink); font-size: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.summary .kv { padding: 18px 22px; border-top: 1px dashed var(--line-2); }
.countdown { margin: 0 22px 22px; padding: 10px 12px; border-radius: 9px; background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; }
.methods { display: grid; gap: 10px; margin-top: 16px; }
.method { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.method:hover:not([disabled]) { border-color: var(--ink); }
.method.on { border-color: var(--ink); box-shadow: var(--ring); }
.method[disabled] { background: var(--panel); cursor: not-allowed; opacity: .55; }
.mark { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 700; }
.mark.alipay { background: #1677FF; }
.mark.wechat { background: #07C160; }
.mark.transfer { background: var(--ink-2); }
.mark.mock { background: var(--amber); }
.method .t { font-weight: 600; }
.method .d { color: var(--muted); font-size: 12.5px; }
.method .tail { margin-left: auto; }
.pay-panel { margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.memo { margin-top: 14px; padding: 12px 14px; border-radius: 9px; background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; }
.qr { display: grid; justify-items: center; gap: 8px; text-align: center; }
.qr img { width: 228px; height: 228px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.qr .hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; }
.waiting { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; }
.copy-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.copy-row:last-of-type { border-bottom: 0; }
.copy-row .k { flex: none; width: 66px; color: var(--muted); font-size: 13px; }
.copy-row .v { flex: 1; font-weight: 500; overflow-wrap: anywhere; }
.result { display: grid; justify-items: center; gap: 10px; padding: 46px 24px; text-align: center; }
.result .icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: #fff; }
.result .icon svg { width: 28px; height: 28px; }
.result .icon.gray { background: var(--sunken); color: var(--muted); }
.result h2 { font-size: 22px; }
.result .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.mock-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.mock-card { width: min(420px, 100%); padding: 30px 28px; border: 1.5px dashed var(--line-2); text-align: center; }
.mock-card .tag { margin-bottom: 14px; }
.mock-card .amount { margin: 10px 0 4px; color: var(--ink); font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-card .row { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

/* ===================== 管理后台 ===================== */
.admin-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 24px; background: var(--ink); color: rgba(255, 255, 255, .86); }
.admin-top .brand img { height: 26px; }
.admin-top .tag { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-tabs { display: flex; gap: 2px; margin-left: 14px; }
.admin-tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .55); font: 13.5px var(--font); cursor: pointer; }
.admin-tabs button:hover { color: #fff; }
.admin-tabs button.on { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-top .right { display: flex; gap: 8px; margin-left: auto; }
.admin-main { display: grid; gap: 16px; max-width: 1400px; margin: 0 auto; padding: 24px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.toolbar .input { width: 240px; height: 34px; }
.admin-login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-box { width: min(380px, 100%); padding: 30px 28px 22px; }
.login-box img { width: 40px; height: 40px; margin-bottom: 14px; }
.login-box h2 { margin-bottom: 4px; }
.alert-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #FFFBF3; }
.alert-item:last-child { border-bottom: 0; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ch-row:last-child { border-bottom: 0; }
.codes-out { width: 100%; min-height: 110px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; font: 13px/1.7 var(--mono); }
.events { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.event { padding: 8px 10px; border-radius: 8px; background: var(--panel); font-size: 12.5px; }
.event pre { margin: 4px 0 0; color: var(--muted); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.actions-box { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.actions-box h4 { margin-bottom: 10px; font-size: 14px; }
.actions-box .row { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-box .row .input { flex: 1; min-width: 140px; height: 36px; }
.backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(14, 15, 17, .35); }
.modal { width: min(680px, 100%); max-height: 88vh; overflow: auto; box-shadow: var(--shadow-pop); }
.modal .card-head { position: sticky; top: 0; z-index: 1; background: #fff; }
.modal-body { display: grid; gap: 18px; padding: 20px 22px 24px; }
.modal-body > * { min-width: 0; }               /* 表格宽了在表格里横向滚，别把弹窗撑出去 */
.modal.wide { width: min(880px, 100%); }

/* ---------- 提示、条款 ---------- */
#toast { position: fixed; bottom: 28px; left: 50%; z-index: 99; display: grid; gap: 8px; transform: translateX(-50%); }
.toast { padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-pop); transition: opacity .3s, transform .3s; }
.toast.bad { background: var(--red-ink); }
.toast.out { opacity: 0; transform: translateY(6px); }
.doc { width: min(780px, calc(100vw - 40px)); margin: 40px auto 60px; padding: 40px 44px; }
.doc h1 { margin-bottom: 6px; font-size: 26px; letter-spacing: -.02em; }
.doc h2 { margin: 30px 0 10px; font-size: 16px; }
.doc p, .doc li { color: var(--text-2); line-height: 1.8; }
.doc ul { padding-left: 20px; }
.doc .draft { margin: 14px 0 6px; padding: 10px 14px; border-radius: 9px; background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1100px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .tour { gap: 36px; }
  .compare-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-notes > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .compare-notes > div:nth-child(n + 3) { margin-top: 18px; }
}
@media (max-width: 960px) {
  .checkout, .upload { grid-template-columns: minmax(0, 1fr); }
  .flow, .upload-side, .upc { border-top: 1px solid var(--line); border-left: 0; }
  .upc.compact { border: 1px solid var(--line); }
  .upload.up-home .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(odd) { border-left: 0; }
  .step:nth-child(5) { grid-column: 1 / -1; }
  .tour { grid-template-columns: minmax(0, 1fr); }
  .secure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 520px; }
  .lr-step + .lr-step::before, .lr-step + .lr-step::after, .lr-loop { display: none; }
  .lr-notes { grid-template-columns: minmax(0, 1fr); }
  .lr-notes > div { padding-left: 0 !important; border-left: 0 !important; }
  .tour-view { position: relative; top: 0; order: -1; min-height: 400px; padding: 28px; }
  .show-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .show-tabs { align-self: stretch; }
  .show-tabs button { flex: 1; justify-content: center; }
  .step:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec:nth-child(3) { border-left: 0; padding-left: 0; }
  .spec:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stats, .stats.three, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .two.wide-left, .faq { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; flex-direction: row; height: auto; padding: 8px 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand, .nav-label, .side-card { display: none; }
  .nav-item { flex: none; }
  .topbar, .content { padding-right: 18px; padding-left: 18px; }
  .tblock { grid-template-columns: minmax(0, 1fr); }
  .tblock .tb-brand { border-right: 0; border-bottom: 1px solid var(--ink); }
  .admin-top { flex-wrap: wrap; height: auto; padding: 10px 16px; }
  .admin-tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  body.rv { height: auto; overflow: auto; }
  .rv-top { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  .rv-prog { order: 3; width: 100%; margin-left: 0; }
  .rv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58vh auto; height: auto; }
  .rv-side { border-top: 1px solid var(--line); border-left: 0; }
  .rv-detail { max-height: none; }
  .rv-list { max-height: 60vh; }
}
@media (max-width: 760px) {
  .kicker .en { display: none; }
  .show-card { margin-top: 40px; border-radius: 16px; box-shadow: 0 18px 36px -24px rgba(14, 15, 17, .35); }
  .show-head { padding: 16px 14px 0 16px; }
  .show-title { align-items: flex-start; font-size: 15px; }
  .show-title img { width: 18px; height: 18px; margin-top: 2px; }
  .show-title .txt > span { display: block; margin-left: 0; }
  .show-tabs button { padding: 0 6px; font-size: 12px; }
  .show-pause { right: 10px; bottom: 8px; width: 26px; height: 26px; }
  .tour-view { min-height: 360px; padding: 20px; }
  .secure-band { padding: 80px 0; }
  .hero.v2 { padding-bottom: 64px; }
  .secure-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-item { padding: 22px 20px 24px; }
  .trust-pill { font-size: 12px; }
  .compare-notes { grid-template-columns: minmax(0, 1fr); }
  .compare-notes > div { padding-left: 0 !important; border-left: 0 !important; }
  .ht-row { grid-template-columns: 18px minmax(0, 1fr) 30px 76px 36px; gap: 8px; padding: 9px 14px; }
  .acct { grid-template-columns: minmax(0, 1fr); }
  .inv-link { flex-direction: column; }
}
@media (max-width: 560px) {
  .grid-2, .stats.three { grid-template-columns: minmax(0, 1fr); }
  .stats, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px 16px; }
  .stat .value { font-size: 24px; }
  .balance-pill { display: none; }
  .acct-pill { max-width: 150px; }
  .doc { padding: 26px 22px; }
  .site-header { gap: 12px; padding: 0 16px; }
  .wrap, .site-footer .wrap { width: calc(100vw - 32px); }
  .hero { padding-top: 64px; }
  .steps, .specs { grid-template-columns: minmax(0, 1fr); }
  .step, .spec { border-left: 0 !important; }
  .spec { padding-left: 0; }
  .step { padding: 24px 22px 26px; }
  .step + .step, .spec + .spec { border-top: 1px solid var(--line); }
  .tblock dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 工时页（10-23，Siya 要的「每道工序填工时、合计总工时，方便报价」）：布局照核对页，图上的框只用墨黑 ---------- */
.hr-tabs { flex: none; margin-left: 18px; }
.hr-tabs a { display: inline-grid; place-items: center; height: 28px; padding: 0 14px; border-radius: 7px; color: var(--muted); font: 500 13px var(--font); }
.hr-tabs a:hover { color: var(--ink); }
.hr-tabs a.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 15, 17, .08), 0 0 0 1px rgba(14, 15, 17, .04); cursor: default; }
.hr .rv-acts { margin-left: auto; }
.hr-sum { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.hr-total { display: flex; align-items: baseline; gap: 8px; color: var(--text-2); }
.hr-total b { color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.hr-cost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--text-2); }
.hr-cost label { display: flex; align-items: center; gap: 6px; }
.hr-cost .input { width: 84px; height: 30px; padding: 0 8px; font-size: 13px; text-align: right; }
.hr-cost b { color: var(--ink); font-size: 15px; }
.hr-warn { margin-top: 8px; color: var(--muted); }
.hr-refnote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; color: var(--muted); }
.hr-refnote .link-btn { font-size: 12px; }
.hr-side { position: relative; }
.hr-refpop { position: absolute; top: 12px; right: 12px; left: 12px; z-index: 30; max-height: calc(100% - 24px); padding: 16px 18px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 40px rgba(14, 15, 17, .14); color: var(--text-2); font-size: 12.5px; line-height: 1.65; animation: rv-rise .22s cubic-bezier(.2, .8, .2, 1); }
.hr-refpop p { margin: 8px 0 0; }
.hr-refpop-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 14px; }
.hr-reftab { margin: 12px 0 0; border-top: 1px solid var(--line); }
.hr-reftab > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hr-reftab dt { color: var(--ink); font-weight: 600; }
.hr-reftab dd { margin: 0; }
.hr-head { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.hr-head .grow { flex: 1; }
.hr-list { flex: 1 1 auto; min-height: 120px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.hr-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.hr-row:hover { background: #FCFCFB; }
.hr-row.on { background: var(--panel); box-shadow: inset 2px 0 0 var(--ink); }
.hr-no { display: grid; place-items: center; height: 22px; margin-top: 4px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 11px var(--mono); }
.hr-main { min-width: 0; }
.hr-line1, .hr-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hr-line2 { margin-top: 2px; }
.hr-name, .hr-detail { min-width: 0; margin-left: -6px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-overflow: ellipsis; }
.hr-name { flex: 1; height: 30px; color: var(--ink); font: 600 14px var(--font); }
.hr-detail { flex: 1; height: 26px; color: var(--text-2); font: 12.5px var(--font); }
.hr-name:hover, .hr-detail:hover { border-color: var(--line); }
.hr-name:focus, .hr-detail:focus { border-color: var(--ink); background: #fff; outline: none; box-shadow: var(--ring); }
.hr-line3 { display: none; margin-top: 4px; }                         /* 备注：选中这一道或写了备注才显示（10-26） */
.hr-row.on .hr-line3, .hr-row.has-memo .hr-line3 { display: flex; }
.hr-memo { flex: 1; min-width: 0; height: 26px; margin-left: -6px; padding: 0 6px; border: 1px dashed var(--line); border-radius: 6px; background: transparent; color: var(--text-2); font: 12.5px var(--font); text-overflow: ellipsis; }
.hr-memo:not(:placeholder-shown) { border-color: transparent; }
.hr-memo:hover { border-color: var(--line-2); }
.hr-memo:focus { border-style: solid; border-color: var(--ink); background: #fff; outline: none; box-shadow: var(--ring); }
.hr-memo::placeholder { color: var(--muted); }
.hr-loc { flex: none; font-size: 12px; white-space: nowrap; }
.hr-calc { display: flex; flex: none; align-items: center; gap: 4px; font-size: 12.5px; }
.hr-calc .input { width: 52px; height: 30px; padding: 0 6px; font-size: 13px; text-align: right; }
.hr-calc .hr-min { width: 58px; }
.hr-calc .hr-min:placeholder-shown { border-style: dashed; }
.hr-calc .hr-min::placeholder { color: var(--muted); }
.hr-tags { display: contents; }
.hr-tag.ref { border: 1px dashed var(--line-2); background: transparent; line-height: 16px; }
.hr-tag.mine { border: 1px solid var(--ink); background: transparent; color: var(--ink); line-height: 16px; }   /* 本厂工时：实线；参考值：虚线 */
.hr-cost .hr-tag.ref { margin-left: 2px; }
.hr-refsub { color: var(--muted); }
.hr-sub { flex: none; width: 66px; color: var(--ink); font-size: 13px; text-align: right; white-space: nowrap; }
.hr-tag { flex: none; padding: 0 6px; border-radius: 4px; background: var(--sunken); color: var(--muted); font-size: 11px; line-height: 18px; white-space: nowrap; }
.hr-ops { display: flex; gap: 4px; padding-top: 2px; opacity: 0; transition: opacity .12s; }
.hr-row:hover .hr-ops, .hr-row.on .hr-ops { opacity: 1; }
.hr-ops .icon-btn { width: 26px; height: 26px; font-size: 13px; }
.hr-empty { padding: 32px 24px; color: var(--muted); font-size: 13px; text-align: center; }
.hr-add { display: flex; gap: 8px; padding: 12px 14px 10px; border-top: 1px solid var(--line); background: var(--panel); }
.hr-add select.input { flex: none; width: 108px; }
.hr-add input.input { flex: 1; min-width: 0; }
.hr-note { margin: 0; padding: 0 16px 14px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.6; }
.hs { position: absolute; border: 1.5px solid rgba(14, 15, 17, .5); border-radius: 2px; background: rgba(14, 15, 17, .035); cursor: pointer; }
.hs:hover, .hs.hot { border-color: var(--ink); background: rgba(14, 15, 17, .08); }
.hs.on { z-index: 5; border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(14, 15, 17, .14); }
.hs-no { position: absolute; bottom: 100%; left: -1.5px; margin-bottom: 2px; padding: 0 5px; border-radius: 3px; background: var(--ink); color: #fff; font: 600 10.5px/15px var(--mono); white-space: nowrap; pointer-events: none; }
.hr-pop-op { width: 110px; height: 30px; padding: 0 8px; font-size: 13px; }
.ad-note { padding: 0 20px 10px; }
.rule-by { white-space: nowrap; }
.rule-src { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ad-file { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-file div { overflow: hidden; text-overflow: ellipsis; }
.ad-people { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 420px; }
.ad-people span { white-space: nowrap; }
.ad-marks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ad-marks img { display: block; max-width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; }
.ad-people span.own { font-weight: 600; }
.ad-people i { margin-left: 5px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 400; }
.ad-co { font-size: 13.5px; color: var(--ink); white-space: normal; text-align: left; }
.ad-in { display: flex; align-items: baseline; gap: 8px; }
.ad-in + .ad-in { margin-top: 4px; }
.ad-in span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ad-titles { flex-wrap: wrap; }
.ad-titles span { margin-left: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- 改进计划（账户设置）、读图质量（管理后台） ---------- */
.improve { margin-top: 16px; }
.improve-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.improve-list { display: grid; gap: 6px; margin: 14px 0 16px; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.65; }
.improve-list b { color: var(--ink); font-weight: 600; }
.improve-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.q-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.q-kpis > div { display: grid; gap: 2px; padding: 16px 20px; border-right: 1px solid var(--line); }
.q-kpis > div:last-child { border-right: 0; }
.q-kpis span { color: var(--muted); font-size: 12.5px; }
.q-kpis b { color: var(--ink); font-size: 24px; font-weight: 600; line-height: 1.2; }
.q-kpis em { color: var(--muted); font-size: 12px; font-style: normal; }
.q-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px 20px 20px; }
.q-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.q-img { display: grid; place-items: center; min-height: 90px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.q-img img { display: block; width: 100%; height: auto; }
.q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-read { color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.q-err { margin-left: 8px; padding: 0 6px; border-radius: 4px; background: var(--red-soft); color: var(--red-ink); font: 11px var(--font); }

/* ---------- 核对完成（10-23）：核完、确认完才能导出 ---------- */
.rv-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.rv-lock::before { content: ""; width: 11px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.rv-export.reveal .xp-btn { animation: rv-rise .42s cubic-bezier(.2, .8, .2, 1) both, rv-ring 1.6s .6s; }

/* 导出（10-24）：顶栏一个按钮，点开选格式；核对页、工时页、对照页共用（common.js 的 exportMenu） */
.xp { position: relative; }
.xp[hidden] { display: none; }
.xp-btn { gap: 6px; }
.xp-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.xp-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.xp-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; width: 288px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-pop); animation: xp-in .14s ease-out; }
.xp-menu[hidden] { display: none; }
.xp-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
.xp-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); }
a.xp-item:hover, a.xp-item:focus-visible { background: var(--sunken); outline: none; }
.xp-item.off { color: var(--faint); cursor: not-allowed; }
.xp-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.xp-t b { font-size: 13.5px; font-weight: 600; }
.xp-t span { color: var(--muted); font-size: 12px; }
.xp-item.off .xp-t span { color: var(--faint); }
.xp-item i { flex: none; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text-2); font: 10.5px var(--mono); font-style: normal; }
.xp-item.off i { border-color: var(--line); color: var(--faint); }
.xp-lock { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px 6px; color: var(--muted); font-size: 12px; }
.xp-lock::before { content: ""; width: 10px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes xp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#done.ready { animation: rv-ring 1.8s ease-out 2; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rv-ring { 0% { box-shadow: 0 0 0 0 rgba(14, 15, 17, .28); } 70%, 100% { box-shadow: 0 0 0 9px rgba(14, 15, 17, 0); } }

.rv-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(247, 247, 245, 0); transition: background .18s ease; }
.rv-modal.in { background: rgba(247, 247, 245, .74); }
.rv-modal-card { width: min(420px, 100%); padding: 26px 26px 20px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--shadow-pop); text-align: center; opacity: 0; transform: translateY(10px) scale(.985); }
.rv-modal.in .rv-modal-card { opacity: 1; transform: none; transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1); }
.rv-modal-card h3 { margin-top: 14px; font-size: 17px; }
.rv-modal-card p { margin: 8px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.7; }
.rv-modal-acts { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.rv-modal-acts .btn kbd { margin-left: 4px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); font: 11px var(--mono); }
.rv-modal-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; }
.rv-modal-mark svg, .dn-check { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rv-modal-mark svg circle, .dn-check circle { stroke: var(--line-2); }
.rv-modal.in .rv-modal-mark svg path, .dn.fresh .dn-check path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: rv-draw .45s .12s cubic-bezier(.4, 0, .2, 1) forwards; }
.rv-modal-mark.red span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red-soft); color: var(--red-ink); font: 600 20px/1 var(--font); }
@keyframes rv-draw { to { stroke-dashoffset: 0; } }
.spinner-sm { display: inline-block; width: 13px; height: 13px; border-width: 1.5px; border-color: rgba(255, 255, 255, .35); border-top-color: #fff; vertical-align: -2px; }

/* 核完了的样子：右边是导出面板，左边是中文图纸 */
body.rv-finished .rv-filter, body.rv-finished .rv-detail, body.rv-finished .rv-list, body.rv-finished .rv-keys { display: none; }
.rv-done { flex: 1; min-height: 0; overflow: auto; }
.dn { padding: 22px 22px 26px; }
.dn-head { display: flex; align-items: center; gap: 14px; }
.dn-head b { font-size: 16px; }
.dn-check { flex: none; }
.dn-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.dn-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.dn-stats > div + div { border-left: 1px solid var(--line); }
.dn-stats b { color: var(--ink); font-size: 20px; font-weight: 600; }
.dn-stats span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.dn-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 10px; color: var(--ink); font-size: 13px; font-weight: 600; }
.dn-other { font-size: 12.5px; font-weight: 400; }
.dn-exps { display: grid; gap: 8px; }
.dn-exp { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color .15s, background .15s; }
.dn-exp:hover { border-color: var(--line-2); background: var(--panel); }
.dn-exp-t { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.dn-exp-t b { font-size: 14px; }
.dn-exp-t span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.dn-exp i { flex: none; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-2); font: 11px var(--mono); font-style: normal; }
.dn-exp.prime { border-color: var(--ink); }
.dn-exp.prime:hover { background: var(--ink); color: #fff; }
.dn-exp.prime:hover .dn-exp-t span { color: rgba(255, 255, 255, .7); }
.dn-exp.prime:hover i { border-color: rgba(255, 255, 255, .4); color: #fff; }
.dn-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dn-note { margin: 16px 0 0; line-height: 1.7; }
.dn.fresh .dn-stats, .dn.fresh .dn-sec, .dn.fresh .dn-exp, .dn.fresh .dn-more { animation: rv-rise .42s cubic-bezier(.2, .8, .2, 1) both; }
.dn.fresh .dn-sec { animation-delay: .1s; }
.dn.fresh .dn-exp { animation-delay: .16s; }
.dn.fresh .dn-more { animation-delay: .24s; }
.rv-view { display: flex; align-items: center; gap: 2px; }
.rv-en-tools { display: contents; }
.rv-en-tools[hidden] { display: none; }
.rv-stage.zh { cursor: default; }
.rv-stage.hr-zh { overflow: hidden; }          /* 工时页的中文图纸：按高铺开，右边栏藏在图台外（10-27） */
.rv-stage.hr-zh img { width: auto; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-export.reveal .xp-btn, .xp-menu, #done.ready, .dn.fresh *, .rv-modal-card, .rv-modal.in .rv-modal-card, .rv-modal-mark svg path { animation: none !important; transition: none !important; }
}
.menu-note { display: block; padding: 8px 10px; color: var(--faint); font-size: 12.5px; }

/* ---------- 规则库「越用越精准」（10-24）：改过中文提示存为规则、套上规则的标出来、规则库页的累计 ---------- */
.dt-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: inset 2px 0 var(--ink); animation: rv-learn-in .3s both; }
.dt-learn-t { flex: 1 1 220px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.dt-learn-t b { margin-right: 6px; color: var(--ink); }
.dt-learn-t .mono { color: var(--ink); font-size: 12px; }
.dt-learn-b { display: flex; gap: 6px; }
@keyframes rv-learn-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dt-rule-tag { flex: none; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: 11px; font-weight: 500; }
.dmeta-rule { color: var(--green-ink); white-space: nowrap; }
.rules-lead { margin: -4px 0 16px; color: var(--text-2); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dt-learn { animation: none; } }

/* ---------- 在线对照（10-24，compare.html）：核对完的图纸，原图和译图拖动分隔线对照；放大以后滚动平移 ---------- */
.cmp-main { height: calc(100vh - 56px); }
.cmp-view { position: absolute; inset: 0; overflow: auto; padding: 64px 32px 32px; }
.cmp-box { position: relative; margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(14, 15, 17, .08), 0 18px 40px rgba(14, 15, 17, .12); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cmp-box img { display: block; pointer-events: none; }
.cmp-en { width: 100%; height: 100%; }
.cmp-zh { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 50%); }
.cmp-zh img { position: absolute; top: 0; left: 0; width: auto; max-width: none; height: 100%; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; outline: none; }
.cmp-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ink); }
.cmp-handle i { position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; margin-top: -20px; border: 1px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: var(--shadow-pop); transition: transform .15s; }
.cmp-handle i::before, .cmp-handle i::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.6px solid var(--ink); border-left: 1.6px solid var(--ink); }
.cmp-handle i::before { left: 11px; transform: rotate(-45deg); }
.cmp-handle i::after { right: 11px; transform: rotate(135deg); }
.cmp-box.drag .cmp-handle i, .cmp-handle:focus-visible i { transform: scale(1.08); box-shadow: var(--ring), var(--shadow-pop); }
.cmp-label { position: absolute; top: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(14, 15, 17, .78); color: #fff; font-size: 12px; pointer-events: none; }
.cmp-label.l { left: 12px; }
.cmp-label.r { right: 12px; }
.cmp .rv-acts { margin-left: auto; }

/* 规则库页「工时规则」（10-24）：参考值、本厂工时并排，孔类按孔径一档一行 */
.hrl-lead { margin: 0; padding: 12px 20px; color: var(--text-2); font-size: 13px; }
.hrl-seg button { white-space: nowrap; }
.hrl table.table td { padding-top: 7px; padding-bottom: 7px; }
.hrl tr:has(+ tr.hrl-cont) td { border-bottom-color: var(--sunken); }     /* 同一道工序的几档：线淡一些，工序名那格不画线 */
.hrl tr:has(+ tr.hrl-cont) td:first-child { border-bottom-color: transparent; }
.hrl td:first-child { vertical-align: top; }
.hrl tr.hrl-mine td:nth-child(4) b { color: var(--ink); }
.hrl-edit { display: inline-flex; align-items: center; gap: 6px; }
.hrl-edit .input { width: 74px; height: 30px; text-align: right; }

/* ---------- 三维（10-24，model3d.*）：申请建模、看进度，交付后网页里转着看（three.js） ---------- */
.m3-stage { position: relative; }
.m3-sheet { position: absolute; top: 64px; left: 48px; width: calc(100% - 96px); height: calc(100% - 112px); object-fit: contain; opacity: .3; filter: grayscale(1); pointer-events: none; }
.m3-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.m3-canvas:active { cursor: grabbing; }
.m3-sheet[hidden], .m3-canvas[hidden], .m3-tools[hidden], .m3-hint[hidden] { display: none; }
.m3-pins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m3-pin { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 1.5px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11px/1 var(--mono); box-shadow: 0 2px 6px rgba(14, 15, 17, .25); cursor: pointer; pointer-events: auto; }
.m3-pin[hidden] { display: none; }
.m3-pin.on { background: var(--red); }
.m3-pin.m3-diff { background: var(--amber); }
.m3-pin.m3-diff.on { background: var(--red); }
.m3-pin-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 5px 9px; transform: translateX(-50%); border-radius: 6px; background: var(--ink); color: #fff; font: 12px/1.4 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.m3-pin:hover .m3-pin-tip, .m3-pin.on .m3-pin-tip { opacity: 1; }
.m3-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.m3-side { overflow: auto; }
.m3-card { padding: 26px 24px 28px; }
.m3-kicker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.m3-ok { padding: 1px 7px; border-radius: 5px; background: var(--green-soft); color: var(--green-ink); font-size: 11.5px; letter-spacing: 0; }
.m3-todo { padding: 1px 7px; border-radius: 5px; background: var(--amber-soft); color: var(--amber-ink); font-size: 11.5px; letter-spacing: 0; }
.m3-card h2 { margin: 8px 0 0; color: var(--ink); font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.m3-lead { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.7; }
.m3-list { display: grid; gap: 8px; margin: 16px 0 18px; padding: 0; list-style: none; }
.m3-list li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13.5px; }
.m3-list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.m3-card .field textarea { min-height: 72px; }
.m3-agree { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 16px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; cursor: pointer; }
.m3-agree input { flex: none; margin-top: 3px; accent-color: var(--ink); }
.m3-foot { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.m3-foot .link-btn { margin-left: 6px; font-size: 12px; }
.m3-note { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.m3-note b { margin-right: 8px; color: var(--ink); font-weight: 600; }
.m3-steps { margin: 18px 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.m3-steps li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.m3-steps li::before { content: ""; position: absolute; top: 16px; left: 2px; width: 9px; height: 9px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--paper); }
.m3-steps li.done::before { border-color: var(--ink); background: var(--ink); }
.m3-steps li.on::before { border-color: var(--ink); }
.m3-steps li span { color: var(--muted); font-size: 12.5px; }
.m3-steps li:not(.done):not(.on) b { color: var(--muted); font-weight: 500; }
.m3-spec { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--radius); }
.m3-spec > div { padding: 11px 14px; }
.m3-spec > div:nth-child(even) { border-left: 1px solid var(--line); }
.m3-spec > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.m3-spec dt { color: var(--muted); font-size: 12px; }
.m3-spec dd { margin: 3px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.m3-spec dd .m3-marked { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.m3-sec { margin: 20px 0 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.m3-pinlist { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); list-style: none; }
.m3-pinlist li { display: flex; gap: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.6; cursor: pointer; }
.m3-pinlist li + li { border-top: 1px solid var(--line); }
.m3-pinlist li:hover, .m3-pinlist li.on { background: var(--panel); }
.m3-no { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 10.5px var(--mono); }
.m3-pinlist li.on .m3-no { background: var(--red); }
.m3-difflist .m3-no { background: var(--amber); }
.m3-check { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; color: var(--text-2); font-size: 12.5px; line-height: 1.65; }
.m3-check b { margin-right: 8px; font-weight: 600; }
.m3-check.g0 { background: var(--green-soft); }
.m3-check.g0 b { color: var(--green-ink); }
.m3-check.g1 { background: var(--amber-soft); }
.m3-check.g1 b { color: var(--amber-ink); }
.m3-check.g2 { background: var(--red-soft); }
.m3-check.g2 b { color: var(--red-ink); }
.m3-models { margin: 12px 0 4px; }
.m3-spec dd .m3-marked.off { color: var(--red-ink); }
.m3-reply { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.m3-card .btn-block { margin-top: 18px; }
.dmeta-3d { white-space: nowrap; }
.m3-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.m3-price b { color: var(--ink); font-size: 16px; font-weight: 600; }
.m3-short { color: var(--red-ink); }
.m3-short a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.m3-sub { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.m3-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.m3-acts[hidden] { display: none; }
/* 三维：建模方案、在模型上打标记、原图框选（10-26） */
.m3-stage.m3-read .m3-sheet { top: 56px; left: 24px; width: calc(100% - 48px); height: calc(100% - 80px); opacity: 1; filter: none; }
.m3-sheet-tools .m3-page { padding: 0 6px; color: var(--text-2); font-size: 12.5px; }
.m3-sheet-tools a.tool { display: inline-flex; align-items: center; }
.m3-sheet-tools .tool:disabled { color: var(--faint); cursor: default; }
.m3-sheet-tools[hidden], .m3-sheet-tools [hidden] { display: none; }
.m3-frame { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; }
.m3-frame[hidden] { display: none; }
.m3-box { position: absolute; border: 2px solid var(--red); background: rgba(229, 72, 59, .08); pointer-events: none; }
.m3-marking .m3-canvas { cursor: crosshair; }
.m3-marking .m3-canvas:active { cursor: grabbing; }
.m3-marking .m3-pin { opacity: .4; }
.m3-mark { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--red); color: #fff; font: 600 11.5px/1 var(--mono); box-shadow: 0 2px 6px rgba(14, 15, 17, .3); cursor: pointer; pointer-events: auto; }
.m3-mark.on { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 13px; box-shadow: 0 0 0 3px rgba(14, 15, 17, .22), 0 2px 6px rgba(14, 15, 17, .3); }
.m3-mark[hidden] { display: none; }
.m3-count { padding: 1px 7px; border-radius: 5px; background: var(--sunken); color: var(--text-2); font-size: 11.5px; letter-spacing: 0; }
.m3-kicker .muted { letter-spacing: 0; }
.m3-plan h2 { font-size: 17px; line-height: 1.55; }
.m3-warn { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; line-height: 1.6; }
.m3-list.m3-tight { gap: 6px; margin: 0; }
.m3-list.m3-tight li { align-items: flex-start; font-size: 13px; line-height: 1.65; }
.m3-list.m3-tight li::before { margin-top: 9px; }
.m3-feats { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); list-style: none; }
.m3-feats li { display: flex; gap: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.55; }
.m3-feats li + li { border-top: 1px solid var(--line); }
.m3-feats b { color: var(--ink); font-weight: 600; }
.m3-feat-size { margin-left: 8px; color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.m3-feats small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.m3-steplist { margin: 0; padding-left: 20px; color: var(--text); font-size: 13px; line-height: 1.75; }
.m3-q { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.m3-q p { display: flex; gap: 8px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.m3-opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.m3-opt { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--paper); color: var(--text-2); font: 12.5px var(--font); cursor: pointer; }
.m3-opt:hover { border-color: var(--ink); color: var(--ink); }
.m3-opt.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.m3-q-other { width: 100%; height: 32px; margin-top: 2px; font-size: 12.5px; }
.m3-q-other[hidden] { display: none; }
.m3-plan-note { margin-top: 12px; }
.m3-plan-note:not(.open) .field { display: none; }
.m3-plan-note.open .m3-note-open { display: none; }
.m3-note-open { padding: 0; border: 0; background: none; color: var(--text-2); font: 13px var(--font); cursor: pointer; }
.m3-note-open:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.m3-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.m3-plan-foot .btn { flex: none; }
/* 方案精简（10-26 晚）：一句话、外形、关键结构、要回答的问题；摆放、特征、步骤收进「完整方案」；按钮贴在侧栏底部 */
.m3-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; color: var(--text-2); font-size: 12.5px; }
.m3-facts b { margin-left: 4px; color: var(--ink); font-weight: 600; }
.m3-pill { padding: 1px 7px; border-radius: 5px; background: var(--amber-soft); color: var(--amber-ink); font-size: 11.5px; }
.m3-keys { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); list-style: none; }
.m3-keys li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.6; }
.m3-keys li.bare { grid-template-columns: minmax(0, 1fr); }
.m3-keys li + li { border-top: 1px solid var(--line); }
.m3-keys b { color: var(--ink); font-weight: 600; }
.m3-keys span { color: var(--text); }
.m3-omit { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.m3-omit b { margin-right: 6px; color: var(--text-2); font-weight: 600; }
.m3-more { margin: 10px 0 0; }
.m3-more summary { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; cursor: pointer; list-style: none; }
.m3-more summary::-webkit-details-marker { display: none; }
.m3-more summary::before { content: "›"; display: inline-block; width: 8px; transition: transform .15s; }
.m3-more[open] summary::before { transform: rotate(90deg); }
.m3-more summary:hover { color: var(--ink); }
.m3-more summary span { color: var(--muted); }
.m3-more summary span::before { content: "· "; }
.m3-sec .m3-count { margin-left: 8px; font-weight: 400; }
.m3-qn { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 10.5px var(--mono); }
.m3-q .m3-opts { margin-left: 26px; }
.m3-q .m3-q-other { width: calc(100% - 26px); margin-left: 26px; }
/* 结构示意（10-26 晚）：方案里的形体搭出的四视图，点了在左边放大 */
.m3-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.m3-choice { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m3-choice:hover:not(.on) { border-color: var(--line-2); }
.m3-choice.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.m3-choice b { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.m3-choice span { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m3-preview { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; cursor: zoom-in; }
.m3-preview:hover { border-color: var(--line-2); }
.m3-preview img { display: block; width: 100%; height: auto; }
.m3-preview figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.m3-preview figcaption span { flex: none; color: var(--text-2); }
.m3-plan-acts { position: sticky; bottom: 0; z-index: 2; margin: 16px -24px 0; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--paper); }
.m3-raw { margin: 14px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.m3-fold { margin: 18px 0 0; border-top: 1px solid var(--line); }
.m3-fold summary { display: flex; align-items: center; gap: 8px; padding: 12px 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.m3-fold summary::-webkit-details-marker { display: none; }
.m3-fold summary::after { content: "展开"; margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.m3-fold[open] summary::after { content: "收起"; }
.m3-fold summary .muted { font-size: 12px; font-weight: 400; }
.m3-marklist { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.m3-marklist > li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.m3-marklist > li.on { border-color: var(--ink); box-shadow: var(--ring); }
.m3-mark-head { display: flex; align-items: center; gap: 8px; }
.m3-mark-no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font: 600 11px var(--mono); }
.m3-mark-type { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; }
.m3-mark-note { width: 100%; height: 34px; margin-top: 8px; font-size: 13px; }
/* 标记：在原图上框出更醒目（10-26 夜）：顶上一句提示、每处一个整行按钮、框好后给框中那块的小图；框选时提示条用深色 */
.m3-tip { display: flex; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.m3-tip b { display: block; color: var(--ink); font-weight: 600; }
.m3-tip > i, .m3-frame-btn > i { flex: none; width: 16px; height: 12px; margin-top: 4px; border: 1.5px dashed var(--red); border-radius: 2px; }
.m3-frame-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.m3-frame-btn > i { margin-top: 0; }
.m3-frame-btn:hover { border-color: var(--ink); }
.m3-frame-btn small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.m3-framed { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.m3-frame-thumb { flex: none; border: 2px solid var(--red); border-radius: 4px; background-color: #fff; background-repeat: no-repeat; }
.m3-framed b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.m3-framed small { color: var(--muted); font-size: 12px; }
.m3-framed-acts { display: flex; gap: 12px; margin-top: 4px; }
.m3-unframed { color: var(--text-2); }
.m3-framing .m3-hint { bottom: 20px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: var(--shadow-pop); }
.m3-empty { margin: 16px 0; padding: 18px 12px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--muted); font-size: 12.5px; text-align: center; }
.dn-exp.dn-3d { margin-top: 8px; }

/* ---------- 首页三维（10-24 夜）：首屏演示「导出」一步的三维一幕（.fc-m3、st-m3-）、功能 03 的示意（tv-m3）、导出效果里的查看器（show-m3-，home3d.js） ---------- */
.fc-m3 { top: 58px; padding: 0; overflow: hidden; }
.st-m3-top { display: flex; align-items: center; gap: 8px; padding: 13px 14px 0; }
.st-m3-top b { color: var(--ink); font-size: 13px; font-weight: 600; }
.st-m3-top small { color: var(--muted); font-size: 11.5px; }
.st-m3-top .lv { margin-left: auto; padding: 1px 7px; border-radius: 5px; background: var(--sunken); color: var(--muted); font-size: 11px; font-weight: 600; transition: background .25s, color .25s; }
.fc-m3.todo .st-m3-top .lv { background: var(--amber-soft); color: var(--amber-ink); }
.fc-m3.ok .st-m3-top .lv { background: var(--green-soft); color: var(--green-ink); }
.st-m3-view { position: relative; height: 196px; margin-top: 4px; }
.st-m3-view img, .st-m3-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.fc-m3.built .st-m3-img { opacity: 1; }
.fc-m3.built.playing .st-m3-vid { opacity: 1; }
.fc-m3.built.playing .st-m3-img { opacity: 0; }
.st-m3-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 12px; transition: opacity .3s; }
.st-m3-wait .st-pb { width: 168px; margin: 0; }
.fc-m3.built .st-m3-wait { opacity: 0; }
.st-m3-spec { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin: 0 14px; border-top: 1px solid var(--line); opacity: 0; transition: opacity .35s; }
.st-m3-spec div { padding: 9px 0 2px; }
.st-m3-spec div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.st-m3-spec small { display: block; color: var(--muted); font-size: 11px; }
.st-m3-spec b { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-m3-spec em { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; font-style: normal; line-height: 1.35; font-variant-numeric: tabular-nums; }
.st-m3-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; opacity: 0; transition: opacity .35s; }
.fc-m3.built .st-m3-spec, .fc-m3.built .st-m3-acts { opacity: 1; }
.fc-m3.ok .st-m3-acts .st-b.dark { opacity: .55; }

.tv-m3 { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tv-m3 img { flex: none; width: 88px; height: 62px; object-fit: contain; }
.tv-m3 span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.tv-m3 b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.tv-m3 small { color: var(--muted); font-size: 12px; }
.tv-m3 em { flex: none; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-2); font: 11px var(--mono); font-style: normal; }

.show-m3-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.show-m3-k { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.show-m3-k::before { content: ''; width: 18px; height: 1px; background: var(--faint); }
.show-m3-text h3 { margin-top: 14px; color: var(--ink); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.show-m3-text h3 .mute { color: var(--muted); }
.show-m3-text > p { margin-top: 12px; color: var(--text-2); font-size: 15px; line-height: 1.75; text-wrap: pretty; }
.show-m3-list { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.show-m3-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.show-m3-list b { color: var(--ink); font-weight: 600; }
.show-m3-list span { color: var(--text-2); }
.show-m3 { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -45px rgba(14, 15, 17, .4); }
.show-m3-stage { position: relative; aspect-ratio: 4 / 3; }
.show-m3-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
.show-m3-stage canvas:active { cursor: grabbing; }
.show-m3-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .4s; }
.show-m3.ready .show-m3-poster { opacity: 0; }
.show-m3-pins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.show-m3-pin { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1.5px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11px/1 var(--mono); box-shadow: 0 2px 6px rgba(14, 15, 17, .25); pointer-events: auto; }
.show-m3-pin[hidden] { display: none; }
.show-m3-pin i { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 5px 9px; transform: translateX(-50%); border-radius: 6px; background: var(--ink); color: #fff; font: 400 12px/1.4 var(--font); font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.show-m3-pin:hover i { opacity: 1; }
.show-m3-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
.show-m3-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.show-m3-tools button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; }
.show-m3-tools button:hover { background: var(--sunken); }
.show-m3-tools button.on { border-color: var(--line-2); background: var(--paper); color: var(--ink); }
.show-m3-hint { color: var(--muted); font-size: 12px; white-space: nowrap; }
.show-m3-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.show-m3-spec span { padding: 10px 14px; color: var(--muted); font-size: 12px; }
.show-m3-spec span + span { border-left: 1px solid var(--line); }
.show-m3-spec b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.show-m3-check { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.show-m3-check i { display: grid; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); font-size: 10px; font-style: normal; font-weight: 700; }
@media (max-width: 900px) {
  .show-m3-row { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; padding-top: 40px; }
}
@media (max-width: 520px) {
  .show-m3-spec span { padding: 9px 10px; }
  .show-m3-spec b { font-size: 12px; }
  .show-m3-list li { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .show-m3-hint { display: none; }
  .show-m3-stage canvas { cursor: default; }
}

/* 图纸按零件分类（10-26）：分类一行（筛选）、全部时按类分组；卡片标题是起的名称或 AI 认出的零件名 */
.dcats { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 0; }
.dcats button { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); color: var(--muted); font: 500 12.5px var(--font); cursor: pointer; }
.dcats button:hover { color: var(--ink); }
.dcats button.on { border-color: var(--ink); color: var(--ink); }
.dcats button .num { margin-left: 5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dgroup + .dgroup { border-top: 1px solid var(--line); }
.dgroup-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px 0; font-size: 13.5px; font-weight: 600; }
.dgroup-head .muted { font-weight: 400; }
.dgroup .dgrid { padding-top: 12px; }