/* ---------- 公共组件（前端精简 A 批，规范见 docs/前端设计规范.md）----------
   只用 style.css 的变量。类名都是新的，不改原有样式。 */

/* 单选按钮行：2～5 个互斥选项；下面只显示当前选中那项的说明 */
.choice-field { display: grid; gap: 6px; min-width: 0; }
.choices { display: flex; gap: 6px; flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel); cursor: pointer; font: inherit; font-size: 13px; color: var(--text-2); text-align: left; line-height: 1.35; white-space: normal; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--faint); }
.choice.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; box-shadow: 0 0 0 1px var(--amber) inset; }
.choice.off, .choice:disabled { opacity: .5; cursor: not-allowed; }
.choice em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: var(--panel-3); color: var(--mute); }
.choice.on em { background: var(--panel); }
.choice-hint:empty { display: none; }

/* 多选开关行：和单选同一外形，左侧多一个小方格，点亮即选中 */
.choices.toggles .choice { padding-left: 10px; }
.choices.toggles .choice::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-2); flex: none; display: inline-grid; place-items: center; font-size: 10px; color: #fff; }
.choices.toggles .choice.on::before { content: "✓"; background: var(--amber-deep); border-color: var(--amber-deep); }

/* 版式预设：一键设多项，每个带两页示意 */
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preset { text-align: left; display: grid; gap: 2px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, background .15s; }
.preset:hover { border-color: var(--faint); }
.preset b { font-weight: 700; } .preset small { color: var(--mute); font-size: 12px; }
.preset.on { border-color: var(--amber-line); background: var(--amber-soft); box-shadow: 0 0 0 1px var(--amber-line) inset; } .preset.on b { color: var(--amber-deep); }
.preset em { font-style: normal; font-size: 10.5px; color: var(--amber-deep); background: var(--panel); border: 1px solid var(--amber-line); border-radius: 99px; padding: 1px 7px; justify-self: start; }
.thumb { position: relative; display: flex; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--panel-3); }
.thumb .page { flex: 1 1 0; aspect-ratio: 3 / 4; background: #fff; border-radius: 3px; padding: 6px 5px; display: grid; align-content: start; gap: 3px; box-shadow: 0 1px 3px rgba(80,50,20,.15); }
.thumb i { display: block; height: 3px; border-radius: 2px; background: #d9d2c8; } .thumb i.w { width: 55%; height: 4px; background: #b9afa1; } .thumb i.s { width: 70%; }
.thumb i.ph { height: 22px; border-radius: 3px; background: linear-gradient(135deg, #9db8a8, #5f8a72); }
.thumb i.fg { height: 16px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--amber-2) 0 18%, transparent 18% 26%); opacity: .8; }
.thumb i.tb { height: 14px; border-radius: 2px; background: repeating-linear-gradient(0deg, #e2dcd3 0 3px, #fff 3px 4px), #e2dcd3; border: 1px solid #cfc6b9; }
.thumb em { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-style: normal; font-size: 10px; color: #fff; background: rgba(40,30,20,.55); border-radius: 99px; padding: 2px 8px; }
.thumb.real { padding: 8px 8px 0; overflow: hidden; aspect-ratio: 16 / 11; align-items: flex-start; }
.thumb.real img { flex: 1 1 0; min-width: 0; width: 0; aspect-ratio: 520 / 736; border-radius: 3px 3px 0 0; box-shadow: 0 1px 3px rgba(80,50,20,.18); background: #fff; }
.thumb .pv-btn { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 11.5px; color: #fff; background: rgba(40,30,20,.6); border-radius: 99px; padding: 3px 12px; cursor: zoom-in; }
.thumb .pv-btn:hover { background: rgba(40,30,20,.78); }
.dlg.preset-view { width: min(980px, 100%); }
.preset-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; border-radius: 14px; background: var(--panel-3); }
.preset-pages img { width: 100%; border-radius: 4px; box-shadow: 0 2px 10px rgba(80,50,20,.18); background: #fff; }
@media (max-width: 640px) { .preset-pages { grid-template-columns: 1fr; } }
.pics-field { margin-top: 16px; }
.pics-field .field-label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pics-field .field-label .link { margin-left: auto; }
.pics-field > .hint { display: block; margin-top: 6px; }
.dlg.fig-samples { width: min(760px, 100%); }
.fig-samples figure { margin: 14px 0 0; padding: 12px; border-radius: 12px; background: var(--panel-3); }
.fig-samples img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.fig-samples figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-2); }

/* 品种列表：新建页左栏，可往后加行 */
.kinds { display: grid; gap: 8px; position: sticky; top: 16px; align-content: start; }
.kgroup { font-size: 11px; color: var(--mute); letter-spacing: 1px; padding: 4px 6px 0; }
.kind { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, background .15s; }
.kind:hover { border-color: var(--faint); }
.kind .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); color: var(--amber-deep); flex: none; }
.kind .ic svg { width: 18px; height: 18px; }
.kind b { display: block; font-weight: 600; } .kind small { display: block; color: var(--mute); margin-top: 2px; font-size: 12px; line-height: 1.5; }
.kind.on { border-color: var(--amber-line); background: var(--amber-soft); box-shadow: 0 0 0 1px var(--amber-line) inset; } .kind.on b { color: var(--amber-deep); }
.kind.soon { border-style: dashed; background: transparent; cursor: default; color: var(--mute); } .kind.soon .ic { background: transparent; border: 1px dashed var(--line-2); color: var(--mute); } .kind.soon b { color: var(--mute); font-weight: 500; }
.newgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .newgrid { grid-template-columns: 1fr; } .kinds { position: static; } }
.khero { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); padding: 20px 22px; }
.ktitle { display: flex; gap: 8px 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; } .ktitle h2 { margin: 0; font-size: 18px; } .ktitle .hint { flex: 1 1 320px; }
.feats { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-bottom: 16px; }
.feats span::before { content: "✓"; color: var(--ok); margin-right: 5px; font-weight: 700; }

/* 短说明三格：文件 / 步骤 / 费用 */
.notes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
@media (max-width: 760px) { .notes3 { grid-template-columns: 1fr; } }
.notes3 b { display: block; font-size: 12.5px; margin-bottom: 3px; } .notes3 small { color: var(--mute); font-size: 12px; line-height: 1.6; }

/* 分段控件（小号）：视图切换 */
.seg.compact { display: inline-flex; grid-template-columns: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg.compact button { height: 30px; padding: 0 12px; border-radius: 0; font-size: 12.5px; color: var(--text-2); }
.seg.compact button + button { border-left: 1px solid var(--line); }
.seg.compact button.on { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; box-shadow: none; }

/* 摘要带：识别结果压成一条 */
.brief { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 18px; margin-bottom: 16px; }
.brief-facts { display: flex; gap: 10px 28px; flex-wrap: wrap; }
.brief-facts > span { display: grid; gap: 2px; } .brief-facts small { color: var(--mute); font-size: 11px; } .brief-facts b { font-weight: 600; font-size: 13.5px; }
.brief-facts .tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--amber-deep); background: var(--amber-soft); border-radius: 6px; padding: 1px 8px; }
.brief p { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }

/* 进度环：撰写页进度卡左侧 */
.ring { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; } .ring .bg { stroke: var(--panel-3); }
.ring .fg { stroke: var(--amber-deep); stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.ring.busy .fg { animation: ringPulse 2.4s ease-in-out infinite; }
@keyframes ringPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ring b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--amber-deep); }
.ring.ok .fg { stroke: var(--ok); } .ring.ok b { color: var(--ok); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .ring .fg { animation: none !important; } }

/* 字段（div 版，和 label.field 同样式） */
div.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mute); min-width: 0; }
div.field > span:first-child { color: var(--text); font-weight: 600; font-size: 13px; }
.field-label { font-weight: 600; font-size: 13px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid.two { grid-template-columns: 1fr; } }
a.lnk { color: var(--amber-deep); font-weight: 600; border-bottom: 1px solid var(--amber-line); }

/* 确认大纲：每章一行的目录列表 */
.olist { display: grid; gap: 8px; font-size: 13.5px; }
.ochap { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.ochap .okids { display: none; padding: 4px 10px 8px 34px; border-top: 1px dashed var(--line); }
.ochap.open .okids { display: block; } .ochap.open .otg { transform: rotate(90deg); }
.olist[data-level="1"] .okids { display: none !important; } .olist[data-level="1"] .otg { visibility: hidden; }
.olist[data-level="2"] .orow.lv3 { display: none; }
.orow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.orow.ch { padding: 10px 12px; font-weight: 700; }
.orow:not(.ch):hover { background: var(--panel-2); }
.orow.lv3 { padding-left: 26px; color: var(--text-2); }
.otg { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--mute); font-size: 11px; transition: transform .2s var(--ease); flex: none; }
.ono { font-size: 11px; font-weight: 600; color: var(--amber-deep); background: var(--amber-soft); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.orow input.ttl { flex: 1 1 auto; min-width: 0; height: 30px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; padding: 0 2px; font: inherit; }
.orow input.ttl:hover { border-bottom-color: var(--line-2); } .orow input.ttl:focus { outline: 0; border-bottom-color: var(--amber); box-shadow: none; }
.opts { color: var(--amber-deep); font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 64px; text-align: right; }
.ocnt { color: var(--mute); font-size: 12px; font-weight: 400; white-space: nowrap; min-width: 36px; text-align: right; }
.opg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); font-weight: 400; } .opg input { height: 28px; width: 60px; padding: 0 6px; text-align: right; font-family: var(--mono); }
.oops { display: inline-flex; gap: 2px; color: var(--mute); opacity: 0; transition: opacity .15s; }
.orow:hover .oops, .orow:focus-within .oops { opacity: 1; }
.oops button { width: 24px; height: 24px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; color: var(--mute); font-size: 12px; }
.oops button:hover { background: var(--panel-3); color: var(--text); } .oops button:disabled { opacity: .3; cursor: default; }
.levelbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cov { border-radius: 10px; padding: 10px 12px; background: var(--panel-3); margin-top: 8px; } .cov small { display: block; color: var(--mute); font-size: 11px; } .cov b { font-weight: 600; }
.cov.ok { background: var(--ok-soft); } .cov.ok b { color: var(--ok); }
@media (max-width: 760px) { .ocnt, .opts { display: none; } .oops { opacity: 1; } }

/* 撰写页：正文位置的骨架条（第一节写出来前） */
.skel { display: grid; gap: 10px; padding: 10px 0 30px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-3) 25%, var(--panel-2) 50%, var(--panel-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel .hint { margin-top: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }

/* 折叠的设置组（新建规划页“更多设置”） */
details.more-set { padding: 0; }
details.more-set > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 16px 22px; font-size: 14px; }
details.more-set > summary::-webkit-details-marker { display: none; }
details.more-set > summary::before { content: "▸"; color: var(--mute); font-size: 12px; transition: transform .2s var(--ease); }
details.more-set[open] > summary::before { transform: rotate(90deg); }
details.more-set > .inner { padding: 14px 22px 18px; border-top: 1px dashed var(--line); }
details.more-set > details.site-card { margin: 0; border-radius: 0; border: 0; border-top: 1px dashed var(--line); box-shadow: none; }
.khero .card { box-shadow: none; }
.khero .drop { margin-bottom: 14px; }
.khero .actions { margin-top: 16px; }

/* 设置页：摘要带 → 通栏卡 → 两列卡 → 底部操作条 */
.setcols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; margin-bottom: 4px; }
.setcols > .card { margin-bottom: 0; } .setcols .span2 { grid-column: 1 / -1; }
.setcols .col { display: grid; gap: 16px; }
@media (max-width: 1180px) { .setcols { grid-template-columns: 1fr; } }
.brief .scoring-line { margin: 8px 0 0; font-size: 13px; color: var(--text-2); } .brief .scoring-line b { color: var(--text); }
.brief .files-line { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.brief .files-line em { font-style: normal; color: var(--mute); }
.brief .files-line .bad { color: var(--bad); }
.presets-field { margin: 16px 0 4px; } .presets-field .field-label { margin-bottom: 8px; }
.choices.disabled .choice { opacity: .5; }

/* 确认大纲：章行下的提示、小节编号、折叠计数 */
.ohint { padding: 0 12px 10px 46px; } .ohint.over { color: #a35a12; }
.onum { color: var(--faint); font: 500 12px var(--mono); min-width: 3.6em; }
.orow.ch input.ttl { font-weight: 700; font-size: 14px; }
.orow.closed input.ttl { font-weight: 600; }
.ocnt.link { background: none; border: 0; cursor: pointer; color: var(--amber-deep); min-width: 0; }
.otg.open { transform: rotate(90deg); }
.ol-main .olist { margin-top: 4px; }
/* 没有鼠标悬停（触屏）或窄屏：↑ ↓ + ✕ 常显，“鼠标移到一行”的提示不显示 */
@media (hover: none) { .orow .oops { opacity: 1; } .hover-hint { display: none; } }
/* 手机：标题占满一行，页数与 ↑ ↓ + ✕ 折到下一行靠右；目录排在篇幅、评分卡前；底栏不放档位，主按钮可换行 */
@media (max-width: 760px) {
  .hover-hint { display: none; }
  .orow { flex-wrap: wrap; row-gap: 2px; }
  .orow input.ttl { flex-basis: 55%; }
  .orow .opg, .orow .oops { margin-left: auto; }
  .orow .opg + .oops { margin-left: 0; }
}
.action-bar .bar-price { color: var(--text-2); }
.action-bar .bar-band + .bar-price:not(:empty)::before { content: "·"; margin-right: 8px; color: var(--faint); }
@media (max-width: 680px) {
  .ol-side { order: 0; }
  .action-bar .bar-band { display: none; }
  .action-bar > .hint.bar-price { display: block; min-width: 0; font-size: 12px; line-height: 1.35; }
  .action-bar .bar-band + .bar-price:not(:empty)::before { content: none; }
  .action-bar .btn.lg { flex: 0 1 auto; min-width: 0; height: auto; min-height: 42px; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.25; text-align: center; }
}

/* 工作台页头里的四步：小号，不占一行 */
.steps.mini { margin: 0; gap: 6px; flex-wrap: nowrap; }
.steps.mini .s { font-size: 12px; gap: 6px; }
.steps.mini .s i { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.steps.mini .s.on i { box-shadow: 0 0 0 3px var(--amber-soft); }
.steps.mini .ln { width: 12px; }
.steps.mini .s span { display: none; } .steps.mini .s.on span { display: inline; }

/* 工作台：依据抽屉默认收起；进度环放在状态条前 */
.work.side-off { grid-template-columns: 290px minmax(0, 1fr); }
.work.side-off .side-pane { display: none; }
.ib.basis-toggle { width: auto; padding: 0 10px; font-size: 12px; }
.pstate .ring { width: 34px; height: 34px; } .pstate .ring b { font-size: 10px; } .pstate .ring.ok b { font-size: 13px; }
.paper .skel { margin-top: 10px; }
.tree .sst.pending { opacity: .35; }
@media (max-width: 1180px) { .work.side-off { grid-template-columns: 260px minmax(0, 1fr); } .work.side-off .side-pane.open { display: block; } }
@media (max-width: 820px) { .work.side-off { grid-template-columns: minmax(0, 1fr); } }

/* 我的标书：状态筛选（带数目）+ 一行一本 */
.list-head { align-items: center; }
.list-head h1 { margin: 0; }
.list-head input.search { width: 260px; margin: 0; height: 40px; }
.filters .f b { font: 600 11.5px var(--mono); margin-left: 6px; opacity: .65; }
.plist { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.prow { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.7fr) 120px 128px; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.prow:first-child { border-top: 0; }
.prow:hover { background: var(--panel-2); }
.prow.phead { padding-top: 10px; padding-bottom: 10px; background: var(--panel-2); color: var(--mute); font-size: 12.5px; cursor: default; }
.pname { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pname b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptag { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 6px; margin-left: 8px; vertical-align: 1px; }
.pstat { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pstat > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pstat .seal { width: 42px; height: 42px; font-size: 11px; flex: none; }
.pprog { display: flex; align-items: center; gap: 8px; }
.pprog .bar { width: 140px; height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.pprog .bar i { display: block; height: 100%; border-radius: 3px; background: var(--amber); transition: width .6s; }
.pact { text-align: right; }
.pact .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .list-head input.search { order: 3; width: 100%; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; }
  .prow.phead, .prow .pwhen { display: none; }
  .prow .pstat { grid-column: 1; grid-row: 2; }
  .prow .pact { grid-column: 2; grid-row: 1 / 3; }
  .pprog .bar { width: 96px; }
}

/* 新建页：返回链接 + 标题；图纸折叠成一行 */
.new-head .back { font-size: 13px; color: var(--mute); }
.new-head .back:hover { color: var(--text); }
.new-head h1 { margin: 4px 0 0; }
details.drawings-pick > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
details.drawings-pick > summary::-webkit-details-marker { display: none; }
details.drawings-pick > summary::before { content: "▸"; color: var(--mute); font-size: 12px; transition: transform .2s var(--ease); }
details.drawings-pick[open] > summary::before { transform: rotate(90deg); }
details.drawings-pick > .inner { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
details.drawings-pick .up-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

/* 设置页：单栏；篇幅档位“更多”；工程类设置收起；篇幅优先说明收起 */
.setcols.one { grid-template-columns: minmax(0, 1fr); }
details.works-set > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
details.works-set > summary::-webkit-details-marker { display: none; }
details.works-set > summary h3 { margin: 0; }
details.works-set > summary h3::after { content: " ▸"; color: var(--mute); font-weight: 400; }
details.works-set[open] > summary h3::after { content: " ▾"; }
details.works-set[open] > summary .hint { display: none; }
details.works-set > summary + .hint { margin: 10px 0 0; }
details.lm-more { margin-top: 8px; }
details.lm-more > summary { cursor: pointer; font-size: 12.5px; color: var(--amber-deep); width: fit-content; }
.set-group > div > .drawings-box { margin-top: 0; padding-top: 0; border-top: 0; }

/* 工作台页头：第一行 返回+书名（占满剩余宽度）、标签、四步、删除；第二行 状态在左、按钮靠右 */
.phead-bar { row-gap: 10px; }
.phead-title { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.phead-bar .crumb { font: 500 12px var(--sans); letter-spacing: 0; color: var(--mute); }
.phead-bar .pstate { order: 9; flex: 1 0 100%; margin-left: 0; }
.pstate > .pacts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* 版式卡片（配图收费 v2）：张数与套餐一行，基础配图的 AI 开关，加购步进与三行账单 */
.layouts .preset { cursor: pointer; }
.layouts .preset.off { opacity: .45; cursor: not-allowed; }
.layouts .preset small.carry { color: var(--amber-deep); font-weight: 600; }
.layouts .preset { position: relative; }
.layouts .preset .free-tag { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--amber-2), var(--amber-deep)); border-radius: 99px; padding: 5px 9px; }
.layouts .switch.small { font-size: 12px; gap: 6px; margin: 4px 0 2px; }
.layouts .switch.small i { width: 30px; height: 18px; }
.layouts .switch.small i::after { width: 12px; height: 12px; }
.layouts .switch.small input:checked + i::after { transform: translateX(12px); }
.extra-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; }
.extra-pics .num { min-width: 2.2em; text-align: center; font-size: 15px; }
.extra-pics .btn:disabled { opacity: .4; cursor: not-allowed; }
.bill-lines { display: grid; gap: 4px; margin: 12px 0 0; max-width: 460px; font-size: 13px; }
.bill-row { display: flex; justify-content: space-between; gap: 12px; }
.bill-row.total { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 700; }
/* 生成设置底部条：预计费用一行，点“明细”向上弹出账单 */
.bar-price { position: relative; flex: none; }
.bar-price:empty { display: none; }
.bar-price + .hint { border-left: 1px solid var(--line); padding-left: 14px; }
.bp-sum { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--text); white-space: nowrap; }
.bp-k { font-size: 13px; color: var(--mute); }
.bp-n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bp-n small { font-size: 12.5px; font-weight: 600; margin-left: 2px; }
.bp-sum s { color: var(--faint); font-size: 13.5px; }
.bp-sum em { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--amber-deep); border-radius: 6px; padding: 1px 7px; }
.bp-more { font-size: 12.5px; font-weight: 700; color: var(--amber-deep); }
.bp-more::after { content: " ▴"; font-size: 10px; display: inline-block; transition: transform .2s; }
.bar-price.open .bp-more::after { transform: rotate(180deg); }
.bp-pop { display: none; position: absolute; left: -8px; bottom: calc(100% + 18px); width: 380px; max-width: calc(100vw - 32px); padding: 14px 16px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(80,50,20,.35); font-size: 13px; animation: popin .16s var(--ease); }
.bar-price.open .bp-pop { display: grid; gap: 6px; }
.bp-pop h4 { margin: 0 0 4px; font-size: 13.5px; }
.bp-pop .bill-row span { color: var(--text-2); }
.bp-pop .bill-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-pop .bill-row s { color: var(--faint); font-weight: 500; margin-right: 6px; }
.bp-pop .bill-row.total { padding-top: 8px; margin-top: 2px; }
.bp-pop .hint { margin: 2px 0 0; font-size: 12px; line-height: 1.6; }
@media (max-width: 680px) { .bp-k, .bp-sum s { display: none; } .bp-n { font-size: 19px; } }
.fig.scene-wait .ph { display: grid; place-items: center; aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto 6px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--panel-3); color: var(--mute); font-size: 13px; }

/* ---- 用户协议、隐私政策、账号与数据（page-legal.js） ---- */
.legal-doc { max-width: 820px; margin: 0 auto; padding: 40px 20px 64px; line-height: 1.85; color: var(--text-2); }
.legal-doc h1 { font-size: 26px; color: var(--text); margin: 14px 0 4px; }
.legal-doc h2 { font-size: 16px; color: var(--text); margin: 28px 0 6px; }
.legal-doc p { margin: 0 0 8px; font-size: 14px; }
.legal-doc b { color: var(--text); }
.legal-doc .crumb { font-size: 13px; color: var(--mute); }
.legal-switch { margin-top: 32px !important; }
.legal-links a { color: var(--amber-deep); }
.login-agree { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--mute); text-align: left; cursor: pointer; }
.login-agree input { margin: 2px 0 0; accent-color: var(--amber); flex: none; }
.lp-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-top: 4px; padding-bottom: 28px; font-size: 12px; color: var(--mute); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-grid > .card { padding: 20px 22px; }
.account-grid > .card h3 { margin: 0 0 12px; }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.acc-row > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.acc-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.acc-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.acc-count { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; }
.acc-count b { font-size: 20px; color: var(--text); }
a.acc-count:hover { border-color: var(--amber-line); }
.account-grid .card > .btn { margin-top: 12px; }
.acc-danger { border-color: var(--bad-soft); }
.acc-danger .btn.danger { border-color: var(--bad-soft); }
.dlg input[type=text] { width: 100%; margin: 4px 0 12px; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } .acc-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }