/* ============================================================
云镈 · 首饰场景复刻工作室 — 新中式视觉 (visual agent)
基调：水墨留白·雅 — 宣纸白底 · 淡墨细线 · 朱砂点睛 · 描金提亮
选择器与 index.html / app.js 实际 class 完全对齐
============================================================ */
:root {
/* 宪法四色(2026-08-12 宪法§五):宣纸 #F6F1E7 / 墨 #2B2417 / 鎏金 #C9A84F / 朱砂 #A03028 */
--paper: #F6F1E7;
--paper-warm: #EFE8D8;
--paper-sink: #E7DECB;
--card: #FBF8F1;
--ink: #2B2417;
--ink-soft: #5A5044;
--ink-faint: #8A7F6C;
--line: #CDBFA3;
--line-soft: #DCD2BC;
/* --rule 历史引用(存储区/清理区边框):收敛到 line 系 */
--rule: #CDBFA3;
--hairline: rgba(var(--ink-rgb), .08);
--cinnabar: #A03028;
--cinnabar-lit: #B43A30;
--cinnabar-deep:#7E211B;
--cinnabar-wash:#F3E2DC;
--gold: #C9A84F;
--gold-deep: #A8843F;
/* rgb 通道(供 rgba(var(--*-rgb), α) 透明色拼装,避免硬编码 rgba 数字) */
--paper-rgb: 246, 241, 231;
--paper-warm-rgb: 239, 232, 216;
--card-rgb: 251, 248, 241;
--ink-rgb: 43, 36, 23;
--gold-rgb: 201, 168, 79;
--gold-deep-rgb: 169, 139, 61;
--cinnabar-rgb: 160, 48, 40;
--cinnabar-deep-rgb: 126, 33, 27;
--ok: #5C7A52;
--warn: #B0803A;
--danger: #A03028;
--font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
--font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--r-sm: 4px;
--r: 8px;
--r-lg: 14px;
--gap: clamp(16px, 3vw, 32px);
--shadow: 0 8px 30px -14px rgba(var(--ink-rgb), .28);
--shadow-sm: 0 2px 10px -6px rgba(var(--ink-rgb), .3);
--maxw: 1180px;
/* 刘海屏/底部横条安全区(viewport-fit=cover 后必须自己让位) */
--sa-t: env(safe-area-inset-top, 0px);
--sa-b: env(safe-area-inset-bottom, 0px);
--sa-l: env(safe-area-inset-left, 0px);
--sa-r: env(safe-area-inset-right, 0px);
/* 触控最小目标 */
--tap: 44px;
}
/* ------------------------- reset & base ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* 横向兜底:任何一处溢出都不该让整页能左右拖。
clip 不建立滚动容器(比 hidden 安全),老 Safari 回落到 hidden。 */
overflow-x: hidden;
overflow-x: clip;
/* 永远预留纵向滚动条槽位：切换渠道/模型导致页面高度跨越视口时，
滚动条出现/消失会让内容宽度瞬变、整页左右「晃一下」。
stable 让槽位常驻，彻底消除这种抖动。移动端无常驻滚动条，无副作用。 */
scrollbar-gutter: stable;
}
/* hidden 属性优先级须压过下面的 display 规则(JS 靠切 hidden 显隐) */
[hidden] { display: none !important; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--ink);
line-height: 1.65;
background-color: var(--paper);
/* 祥云暗纹水印:低透明度平铺 + 微妙暖渐晕 */
background-image:
radial-gradient(120% 90% at 50% -10%, #FBF8F1 0%, transparent 55%),
url("cloud.svg");
background-size: auto, 300px 300px;
background-repeat: no-repeat, repeat;
background-attachment: fixed, fixed;
min-height: 100vh;
min-height: 100svh;
-webkit-font-smoothing: antialiased;
/* iOS 点击不闪蓝框(需要时各元素可自行开回来) */
-webkit-tap-highlight-color: transparent;
}
/* 水印压淡层 */
body::before {
content: "";
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: var(--paper);
opacity: .55;
pointer-events: none;
z-index: -1;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
/* 交互元素禁选,避免手机点击/长按时选中文字或弹放大镜。
注意:绝不对 img 加 user-select/touch-callout 限制 —— 长按存图靠它。 */
button, .chip, label, .drawer-tab, .btn-mini, .head-index, .brand-seal {
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
/* 去掉移动端 300ms 点击延迟 */
touch-action: manipulation;
}
/* 图片显式放开长按菜单(手机存图主路径) */
img { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
a { color: var(--cinnabar); text-decoration: none; }
a:hover { color: var(--cinnabar-lit); }
/* 只在鼠标设备画滚动条。触屏上显式声明宽度会让 WebKit 常驻占位,
抽屉本来就窄,再被吃掉 10px 更挤。 */
@media (pointer: fine) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
}
/* ------------------------- typography ------------------------- */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; }
h1 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
h2 { font-size: 1.15rem; margin: 0; color: var(--ink); }
/* 页面水印占位元素(水印已由 body 背景实现,此死元素隐去) */
.page-watermark { display: none; }
/* ------------------------- header ------------------------- */
.app-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
max-width: var(--maxw);
width: 100%; box-sizing: border-box; /* 固定宽度,防窗口飘动 */
margin: 0 auto;
/* 顶部让开刘海/状态栏,左右让开横屏耳朵 */
padding: calc(22px + var(--sa-t)) max(var(--gap), var(--sa-r)) 18px max(var(--gap), var(--sa-l));
border-bottom: 1px solid var(--line);
position: relative;
}
.app-header::after {
content: ""; position: absolute; left: max(var(--gap), var(--sa-l)); bottom: -1px; height: 1px;
width: 120px; background: linear-gradient(90deg, var(--gold), transparent);
}
.brand { display: flex; align-items: center; gap: .7em; min-width: 0; }
/* 品牌钤印方章 */
.brand-seal {
flex: none;
font-family: var(--font-serif);
color: #F7EDE6;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
border: 1px solid var(--cinnabar-deep);
border-radius: 5px;
width: 46px; height: 46px;
padding: 3px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
place-items: center;
box-shadow: inset 0 0 0 1.5px rgba(247,237,230,.55),
inset 0 0 0 2.5px rgba(var(--cinnabar-rgb),.9),
0 1px 3px rgba(126,32,27,.35);
}
.brand-seal .seal-char {
font-size: .82rem;
line-height: 1;
font-weight: 600;
letter-spacing: 0;
text-shadow: 0 0 1px rgba(126,32,27,.4);
}
/* 篆刻读序：右上→右下→左上→左下(鑫福一生)，用网格定位还原竖读 */
.brand-seal .seal-char:nth-child(1) { grid-area: 1 / 2; }
.brand-seal .seal-char:nth-child(2) { grid-area: 2 / 2; }
.brand-seal .seal-char:nth-child(3) { grid-area: 1 / 1; }
.brand-seal .seal-char:nth-child(4) { grid-area: 2 / 1; }
.brand-text { min-width: 0; }
.app-title { font-family: var(--font-serif); font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: .08em; }
/* 窄屏允许在「·」处换行,不做省略号(标题是品牌,不可截断) */
@media (max-width: 520px) {
.brand { gap: .5em; }
.brand-seal { width: 40px; height: 40px; }
.brand-seal .seal-char { font-size: .72rem; }
.app-title { font-size: .96rem; letter-spacing: .04em; line-height: 1.3; word-break: keep-all; }
}
.app-subtitle { margin: 2px 0 0; font-size: .78rem; color: var(--ink-faint); letter-spacing: .02em; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* 余额徽记 chip */
.balance-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: .8rem; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 20px;
padding: 5px 12px; background: var(--paper);
}
.balance-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.balance-chip.is-ok .balance-dot { background: var(--ok); }
.balance-value { font-family: var(--font-serif); color: var(--gold-deep); font-weight: 600; }
/* 齿轮设置按钮 */
.btn-gear {
flex: none;
width: var(--tap); height: var(--tap); border-radius: 50%;
border: 1px solid var(--line); background: var(--card);
color: var(--ink-soft); font-size: 1.2rem;
display: inline-flex; align-items: center; justify-content: center;
transition: all .18s;
}
.btn-gear:hover { color: var(--cinnabar); border-color: var(--cinnabar); }
.btn-gear:hover .gear-icon { transform: rotate(45deg); }
.gear-icon { display: inline-block; transition: transform .25s ease; line-height: 1; }
/* 2026-08-21 退出登录按钮(多租户切换账号) */
.btn-logout {
flex: none; height: calc(var(--tap) * .72); padding: 0 10px;
border-radius: 6px; border: 1px solid var(--line); background: var(--card);
color: var(--ink-soft); font-size: 12px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .18s;
}
.btn-logout:hover { color: var(--cinnabar); border-color: var(--cinnabar); background: rgba(160,48,40,.06); }
/* ------------------------- main layout ------------------------- */
.app-main {
max-width: 860px;
width: 100%; /* 固定宽度,防窗口缩放/侧边栏出现时页面飘动 */
margin: 0 auto;
/* 底部预留 FAB 高度 + 底部横条,否则最后一行提示被悬浮按钮压住 */
padding: var(--gap) max(var(--gap), var(--sa-r))
calc(104px + var(--sa-b)) max(var(--gap), var(--sa-l));
display: flex; flex-direction: column;
gap: var(--gap);
box-sizing: border-box; /* padding 计入宽度,防溢出 */
}
/* 纸面板:细线框 + 极淡投影,大留白 */
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(18px, 2.4vw, 30px);
box-shadow: var(--shadow);
}
/* 面板标题:朱砂序号 + 宋体 */
.panel-head {
font-family: var(--font-serif);
font-size: 1.15rem; color: var(--ink);
display: flex; align-items: center; gap: .55em;
margin: 0 0 1.1em;
letter-spacing: .08em;
}
.head-index {
flex: none;
font-family: var(--font-serif);
color: var(--cinnabar);
border: 1px solid var(--cinnabar);
border-radius: var(--r-sm);
font-size: .9rem;
padding: 1px 8px;
background: var(--cinnabar-wash);
}
/* ------------------------- upload slots ------------------------- */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .upload-grid { grid-template-columns: 1fr; } }
.upload-slot {
position: relative;
aspect-ratio: 1 / 1;
border: 1.5px dashed var(--line);
border-radius: var(--r);
background: var(--paper);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px; text-align: center;
color: var(--ink-faint);
padding: 16px;
cursor: pointer;
transition: border-color .2s, background .2s, box-shadow .2s;
overflow: hidden;
}
.upload-slot:hover { border-color: var(--gold); background: var(--paper-warm); }
.upload-slot:focus-visible { border-color: var(--cinnabar); }
/* 拖拽悬停态 (JS: .is-dragover) */
.upload-slot.is-dragover { border-color: var(--cinnabar); background: var(--cinnabar-wash); }
/* 有图 / 完成态 (JS: .has-image / .is-done) —— 实线框、去内边距让预览铺满 */
.upload-slot.has-image { border-style: solid; border-color: var(--line); padding: 0; }
.upload-slot.is-done { border-color: var(--ok); }
/* 上传中态 (JS: .is-uploading) —— 预览轻微压暗提示处理中 */
.upload-slot.is-uploading .upload-preview { filter: brightness(.82) saturate(.9); }
.upload-placeholder {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.upload-slot.has-image .upload-placeholder { display: none; }
/* 预览渲染失败(如 HEIC 浏览器不支持)——回显占位，不空格 */
.upload-slot.has-image.no-preview { padding: 16px; border-style: dashed; }
.upload-slot.has-image.no-preview .upload-placeholder { display: flex; }
.upload-icon { font-size: 1.7rem; color: var(--gold-deep); opacity: .9; }
.upload-label { font-family: var(--font-serif); color: var(--ink); font-size: 1rem; }
.opt-tag { font-style: normal; font-size: 0.7rem; color: var(--muted, #999); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
.upload-hint { font-size: .74rem; color: var(--ink-faint); line-height: 1.5; }
/* 手机上没有拖拽和粘贴,收掉这半句噪音 */
@media (hover: none) { .hint-desktop { display: none; } }
/* 预览图完整展示(contain 不裁切首饰)，深底衬托 */
.upload-preview {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
background: #1c1813;
}
.upload-slot.has-image:hover .upload-preview { filter: brightness(.92); }
/* 移除按钮 */
.upload-clear {
position: absolute; top: 8px; right: 8px; z-index: 3;
width: 30px; height: 30px; border-radius: 50%;
border: none; background: rgba(var(--ink-rgb),.6); color: #fff;
font-size: 1.05rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
/* 视觉保持小钤印感,热区隐形撑到 44×44 */
.upload-clear::after {
content: ""; position: absolute;
top: -7px; right: -7px; bottom: -7px; left: -7px;
}
.upload-clear:hover { background: var(--cinnabar); }
/* 上传状态钤印小标 */
.upload-status {
position: absolute; top: 8px; left: 8px; z-index: 2;
font-family: var(--font-serif);
background: var(--cinnabar); color: #F7EDE6;
font-size: .72rem; padding: 3px 9px;
border-radius: var(--r-sm); letter-spacing: .08em;
box-shadow: var(--shadow-sm);
/* 右侧留出移除按钮的位置,长文案(含「重试」按钮)折行而不是被盖住 */
max-width: calc(100% - 62px);
line-height: 1.5;
text-align: left;
}
/* 重试按钮在朱砂底上要看得见 */
.upload-status .link-retry { color: #FBEFD8; }
.upload-status.is-error { background: var(--danger); }
/* ------------------------- param groups ------------------------- */
.param-group { margin-bottom: 22px; }
.param-group:last-of-type { margin-bottom: 0; }
.param-row { display: flex; align-items: center; gap: 16px; }
.param-label {
display: block; margin-bottom: 10px;
font-size: .82rem; color: var(--ink-soft); letter-spacing: .05em;
}
.param-row .param-label { margin-bottom: 0; }
/* chip 行 */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* 通用可选项 chip:细线框,选中转朱砂 */
.chip {
appearance: none; -webkit-appearance: none;
/* 触控目标:高不低于 44,宽不低于 44(比例 1:1 这类短标签也点得到) */
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap); min-width: var(--tap);
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink-soft);
border-radius: var(--r);
padding: 10px 18px;
font-size: .9rem;
font-family: var(--font-serif);
letter-spacing: .04em;
transition: all .18s ease;
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
/* 选中态 (JS: .is-active + aria-checked) —— 朱砂描边 + 淡染 + 描金内影,点睛 */
.chip.is-active,
.chip[aria-checked="true"] {
border-color: var(--cinnabar);
color: var(--cinnabar);
background: var(--cinnabar-wash);
box-shadow: inset 0 0 0 1px var(--cinnabar), 0 2px 8px -5px var(--cinnabar);
}
/* 产品分类(上传区顶部,可扩展框架):品类 chip 复用通用 .chip 样式,
这里只补分类组的间距和提示文案样式。 */
.category-group { margin-bottom: 12px; }
/* 品类压缩成一行:允许横向滚动,不换行浪费两行 */
#dimCategory {
flex-wrap: nowrap; overflow-x: auto; gap: 8px;
padding-bottom: 2px; scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
#dimCategory .chip { flex: 0 0 auto; white-space: nowrap; }
.category-hint {
margin: 0 0 18px; padding: 0;
font-size: .78rem; color: var(--ink-faint);
letter-spacing: .03em; line-height: 1.5;
}
/* 张数步进器 */
.stepper {
display: inline-flex; align-items: stretch;
min-height: var(--tap);
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.stepper-btn {
/* 加减各自独立 44×44 热区,原来只有 ~24px 高 */
width: var(--tap); min-height: var(--tap); flex: none;
border: none; background: var(--paper);
color: var(--ink-soft); font-size: 1.25rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.stepper-btn:hover { background: var(--cinnabar-wash); color: var(--cinnabar); }
.stepper-input {
width: 58px; text-align: center;
border: none;
border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
background: var(--card);
/* 16px 起,否则 iOS Safari 聚焦时自动放大整页 */
/* 2026-08-10 C4:数字输入改系统 sans(product-ui 标准:数据位用 sans,数字对齐更稳) */
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.05rem; color: var(--ink);
-moz-appearance: textfield; -webkit-appearance: none; border-radius: 0;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus { outline: none; }
/* 补充约束文本框 */
.extra-input {
width: 100%; font-family: var(--font-sans); font-size: .9rem;
color: var(--ink); background: var(--paper);
border: 1px solid var(--line); border-radius: var(--r);
padding: 10px 12px; min-height: var(--tap);
-webkit-appearance: none; appearance: none;
transition: border-color .18s, background .18s;
/* textarea:长提示词可换行显示全文,不再单行溢出截断;允许纵向拉伸 */
line-height: 1.5; resize: vertical; box-sizing: border-box;
white-space: pre-wrap; word-break: break-word;
}
.extra-input:focus { outline: none; border-color: var(--gold); background: var(--card); }
.extra-input::placeholder { color: var(--ink-faint); }
/* 参数提示 */
.param-tip { margin: 12px 0 0; font-size: .8rem; color: var(--ink-faint); min-height: 1.2em; }
/* ------------------------- buttons ------------------------- */
/* 主行动:朱红钤印按钮 —— 实朱砂底 + 内描金细线 + 轻凸起 */
.btn-generate {
position: relative;
width: 100%;
margin-top: 26px;
font-family: var(--font-serif);
color: #F7EDE6;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
border: 1px solid var(--cinnabar-deep);
border-radius: var(--r);
padding: 14px 34px;
font-size: 1.02rem; letter-spacing: .18em;
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
box-shadow: 0 6px 18px -8px var(--cinnabar-deep), inset 0 0 0 1px rgba(var(--gold-rgb),.35);
transition: transform .12s ease, box-shadow .18s ease, filter .18s;
}
.btn-generate::after {
content: ""; position: absolute; inset: 4px;
border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 5px;
pointer-events: none;
}
.btn-generate-seal {
font-family: var(--font-serif);
border: 1px solid rgba(var(--gold-rgb),.6);
border-radius: var(--r-sm);
padding: 0 6px;
font-size: .9rem;
}
.btn-generate:hover { filter: brightness(1.05); box-shadow: 0 10px 24px -8px var(--cinnabar-deep), inset 0 0 0 1px rgba(var(--gold-rgb),.5); }
.btn-generate:active { transform: translateY(1px); box-shadow: 0 3px 10px -6px var(--cinnabar-deep); }
.btn-generate:disabled { filter: grayscale(.4) opacity(.6); cursor: not-allowed; }
/* 提交中态 (JS: .is-loading) */
.btn-generate.is-loading { pointer-events: none; filter: brightness(.95) saturate(.9); }
.btn-generate.is-loading .btn-generate-seal { animation: spin .8s linear infinite; }
/* 幽灵/次级按钮 */
.btn-ghost {
font-family: var(--font-serif);
background: transparent; border: 1px solid var(--line-soft); color: var(--ink-soft);
border-radius: var(--r); padding: 10px 22px; font-size: .92rem; letter-spacing: .06em;
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap);
transition: all .18s ease;
}
.btn-ghost:hover { color: var(--cinnabar); border-color: var(--cinnabar); background: var(--cinnabar-wash); }
/* 主要按钮(设置保存等) */
.btn-primary {
font-family: var(--font-serif);
color: #F7EDE6;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
border: 1px solid var(--cinnabar-deep);
border-radius: var(--r); padding: 10px 26px;
font-size: .92rem; letter-spacing: .1em;
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap);
box-shadow: 0 4px 14px -8px var(--cinnabar-deep);
transition: filter .18s, transform .12s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
/* 小按钮 / 链接按钮(下载、打包) */
.btn-mini {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-serif);
border: 1px solid var(--line); background: var(--paper);
color: var(--ink-soft);
border-radius: var(--r-sm); padding: 5px 12px; font-size: .78rem; letter-spacing: .04em;
min-height: 32px;
transition: all .16s;
}
.btn-mini:hover { border-color: var(--gold); color: var(--cinnabar); background: var(--paper-warm); }
.btn-mini:disabled { opacity: .45; cursor: not-allowed; }
/* ------------------------- drawer FAB (悬浮触发) ------------------------- */
.drawer-fab {
position: fixed;
right: calc(22px + var(--sa-r));
bottom: calc(26px + var(--sa-b));
z-index: 40;
width: 58px; height: 58px; border-radius: 50%;
font-family: var(--font-serif);
color: #F7EDE6;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
border: 1px solid var(--cinnabar-deep);
font-size: 1.25rem;
box-shadow: 0 10px 26px -10px var(--cinnabar-deep), inset 0 0 0 1px rgba(var(--gold-rgb),.4);
display: flex; align-items: center; justify-content: center;
transition: transform .15s, filter .18s;
}
.drawer-fab:hover { filter: brightness(1.06); transform: translateY(-2px); }
.drawer-fab:active { transform: translateY(0); }
.fab-icon { line-height: 1; }
.fab-badge {
position: absolute; top: -4px; right: -4px;
min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 10px;
background: var(--gold-deep); color: #fff;
font-family: var(--font-sans); font-size: .72rem;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--paper);
}
/* ------------------------- drawer 遮罩 ------------------------- */
.drawer-scrim {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 45;
background: rgba(var(--ink-rgb),.42);
/* 遮罩上滑动不该把底下页面带着滚 */
touch-action: none;
}
/* ------------------------- drawer off-canvas ------------------------- */
.drawer {
position: fixed; top: 0; right: 0;
height: 100%; /* 老 Safari 兜底 */
height: 100dvh; /* iOS 工具栏收放时不被截断 */
/* 92vw 在 375px 上只留 30px 遮罩,误触关不掉;固定留 44px 可点关闭带 */
width: min(420px, calc(100vw - var(--tap)));
z-index: 46;
background: var(--card);
border-left: 1px solid var(--line);
box-shadow: -12px 0 40px -20px rgba(var(--ink-rgb),.5);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.drawer.is-open { transform: none; }
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex: none;
/* 抽屉贴顶,标题栏必须自己躲刘海 */
padding: calc(14px + var(--sa-t)) max(16px, var(--sa-r)) 14px 16px;
border-bottom: 1px solid var(--line);
}
/* tab 切换(任务/资源库) */
.drawer-tabs {
display: inline-flex; gap: 4px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r); padding: 3px; background: var(--paper);
}
.drawer-tab {
border: none; background: transparent; color: var(--ink-soft);
font-family: var(--font-serif); padding: 6px 14px; border-radius: 6px;
min-height: var(--tap); white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center;
font-size: .88rem; transition: all .15s;
}
.drawer-tab.is-active { background: var(--cinnabar); color: #F7EDE6; }
.drawer-close {
flex: none;
width: var(--tap); height: var(--tap); border-radius: 50%;
border: 1px solid var(--line); background: var(--paper);
color: var(--ink-soft); font-size: 1.2rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: all .16s;
}
.drawer-close:hover { color: var(--cinnabar); border-color: var(--cinnabar); }
.drawer-body, .drawer-view {
/* 底部让开 home 横条,否则最后一条任务/最后一排图点不到 */
padding: 16px max(16px, var(--sa-r)) calc(20px + var(--sa-b)) 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1 1 auto;
min-height: 0;
}
/* 空态提示 */
.empty-hint {
text-align: center; color: var(--ink-faint);
padding: 32px 16px; font-family: var(--font-serif);
border: 1px dashed var(--line); border-radius: var(--r);
margin: 8px 0 0;
}
/* ------------------------- task list ------------------------- */
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.task-item {
display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center;
background: var(--paper); border: 1px solid var(--line-soft);
border-radius: var(--r); padding: 10px 12px;
border-left: 3px solid var(--line);
transition: border-color .2s, box-shadow .2s, background .2s;
}
/* 状态左条着色 (JS: .status-pending/.status-running/.status-done/.status-failed) */
.task-item.status-pending { border-left-color: var(--line); }
.task-item.status-running { border-left-color: var(--gold); box-shadow: var(--shadow-sm); }
.task-item.status-done { border-left-color: var(--ok); }
.task-item.status-failed { border-left-color: var(--danger); background: var(--cinnabar-wash); }
/* 失败态:错误文案挤在右侧 116px 里只能截断成「上游返回 429 并发超…」,
看不出下一步做什么。手机上把它放到整宽第二行,给足位置。
(子元素顺序由 app.js 固定为 缩略/信息/尾栏,这里只重排格子) */
.task-item.status-failed {
grid-template-columns: 56px minmax(0, 1fr);
grid-template-areas: "thumb info" "foot foot";
row-gap: 8px;
}
.task-item.status-failed > .task-thumb { grid-area: thumb; }
.task-item.status-failed > .task-info { grid-area: info; }
.task-item.status-failed > .task-foot { grid-area: foot; }
.task-item.status-failed .task-err {
max-width: none; -webkit-line-clamp: 3;
}
.task-thumb {
width: 56px; height: 56px; border-radius: var(--r-sm);
object-fit: cover; background: var(--paper-sink);
border: 1px solid var(--line-soft);
}
/* 占位缩略(未完成态):56px 方块里要竖排放「转圈 + 阶段」,
横排会把阶段文字挤出框(实测「AI 作画中」溢出) */
.task-thumb-ph {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 3px; overflow: hidden; padding: 2px;
}
.task-thumb-ph .task-spinner { width: 14px; height: 14px; flex: none; }
.task-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task-meta {
font-family: var(--font-serif); font-size: .9rem; color: var(--ink);
overflow-wrap: anywhere;
}
.task-thumb { flex: none; }
/* 状态徽记 */
.task-status { font-size: .72rem; padding: 3px 9px; border-radius: 20px; letter-spacing: .05em; white-space: nowrap; align-self: flex-start; }
.task-status.status-pending { background: var(--paper-sink); color: var(--ink-faint); }
.task-status.status-running { background: rgba(var(--gold-rgb),.18); color: var(--gold-deep); }
.task-status.status-done { background: rgba(92,122,82,.15); color: var(--ok); }
.task-status.status-failed { background: rgba(var(--cinnabar-rgb),.14); color: var(--danger); }
/* T2 真进度:阶段 + 已耗时 + 预计剩余 + 描金细进度条。
克制为先——只有一根 3px 的金线在走,不抢成品的视觉位置。 */
.task-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.task-prog-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-prog-phase {
font-size: .74rem; color: var(--gold-deep); letter-spacing: .04em;
}
/* 重试徽记:让用户看出系统在自救,而不是卡死 */
.task-retry {
font-size: .68rem; padding: 1px 6px; border-radius: 20px;
background: var(--cinnabar-wash); color: var(--cinnabar);
border: 1px solid rgba(var(--cinnabar-rgb),.2); white-space: nowrap;
}
.task-prog-bar {
height: 3px; border-radius: 3px; overflow: hidden;
background: var(--paper-sink); border: 0;
}
.task-prog-bar > i {
display: block; height: 100%; width: 0;
border-radius: 3px; transition: width .9s linear;
background: linear-gradient(90deg, rgba(var(--gold-rgb),.55), var(--gold-deep));
position: relative;
}
/* 流光:每秒只涨 0.6%,肉眼几乎看不出动;叠一道慢扫的高光才有"在跑"的实感 */
.task-prog-bar > i::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
animation: prog-sheen 1.8s ease-in-out infinite;
}
@keyframes prog-sheen {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.task-prog-time { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.task-prog-bar > i::after { animation: none; }
.task-prog-bar > i { transition: none; }
}
.task-foot { display: flex; align-items: center; flex: none; }
/* 手机上 title 提示看不到,失败原因改为最多两行折行显示,不再单行截断 */
.task-err {
font-size: .74rem; color: var(--danger);
max-width: 116px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; overflow-wrap: anywhere; white-space: normal;
line-height: 1.35;
}
/* running 态:描金细旋标 */
.task-spinner {
width: 16px; height: 16px; display: inline-block;
border: 2px solid rgba(var(--gold-rgb),.3); border-top-color: var(--gold-deep);
border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ------------------------- gallery ------------------------- */
.gallery-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 12px; flex-wrap: wrap;
}
.gallery-toolbar-actions { min-width: 0; }
#btnZip { max-width: 100%; }
/* 下载画质档选择器。手机上原图 5MB/张下不动,默认走手机档,
所以这个控件要显眼到用户知道自己拿的是哪一档。 */
.dl-variant {
display: inline-flex; align-items: center; gap: 6px;
font-size: .8rem; color: var(--ink-soft); cursor: pointer;
min-height: 44px; /* 手机热区 */
}
.dl-variant > span { white-space: nowrap; }
.dl-variant select {
font: inherit; color: var(--ink); background: var(--paper, #fff);
border: 1px solid var(--line, #d9d2c7); border-radius: 6px;
padding: 5px 8px; max-width: 11.5rem; cursor: pointer;
}
.dl-variant select:focus-visible { outline: 2px solid var(--cinnabar, #b93a2b); outline-offset: 1px; }
.select-all {
display: inline-flex; align-items: center; gap: 8px;
font-size: .84rem; color: var(--ink-soft); cursor: pointer;
/* 整个「全选」标签都是热区,撑到 44 高 */
min-height: var(--tap); padding-right: 4px;
}
.select-all input {
accent-color: var(--cinnabar);
width: 20px; height: 20px; margin: 0; flex: none;
}
.gallery-toolbar-actions { display: flex; gap: 10px; }
.gallery-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.gallery-item {
position: relative; aspect-ratio: 3 / 4; margin: 0;
border-radius: var(--r); overflow: hidden;
border: 1px solid var(--line);
background: var(--paper-sink);
transition: transform .18s, box-shadow .2s, border-color .2s;
}
.gallery-img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
/* 选中态 (JS: .is-selected) —— 朱砂角框 */
.gallery-item.is-selected { border-color: var(--cinnabar); box-shadow: inset 0 0 0 2px var(--cinnabar); }
/* 勾选框 */
.gallery-check {
position: absolute; top: 6px; left: 6px; z-index: 3;
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(var(--ink-rgb),.45); cursor: pointer;
}
/* 视觉 28,热区隐形扩到 44(仍只占图块左上一角,不妨碍长按存图) */
.gallery-check::after {
content: ""; position: absolute;
top: -8px; left: -8px; right: -8px; bottom: -8px;
}
.gallery-cb { accent-color: var(--cinnabar); cursor: pointer; margin: 0; width: 17px; height: 17px; }
/* 悬浮信息条 */
.gallery-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 16px 10px 8px; font-size: .72rem; color: #F7EDE6;
background: linear-gradient(0deg, rgba(var(--ink-rgb),.72), transparent);
font-family: var(--font-serif); letter-spacing: .04em;
opacity: 0; transition: opacity .2s;
/* 信息条常显后会盖住图片下缘,点击必须穿透到图上(否则点不开灯箱) */
pointer-events: none;
}
.gallery-item:hover .gallery-cap { opacity: 1; }
/* 触屏没有 hover:信息条与下载按钮常显,否则手机上永远看不到也点不到 */
@media (hover: none) {
.gallery-item .gallery-cap { opacity: 1; }
.gallery-item:hover { transform: none; box-shadow: none; border-color: var(--line); }
.upload-slot:hover { border-color: var(--line); background: var(--paper); }
.upload-slot.has-image:hover .upload-preview { filter: none; }
}
/* 下载链接(悬浮显示) */
.gallery-dl {
position: absolute; top: 6px; right: 6px; z-index: 3;
opacity: 0; transition: opacity .18s;
}
/* 触屏常显时:视觉保持小钤印,热区靠 ::after 扩到 44,不占满图块顶部。
选择器带 .gallery-item 提权,压过下面窄屏块里的 .btn-mini{min-height:44px}。 */
@media (hover: none) {
.gallery-item .gallery-dl {
/* 常显:触屏没有 hover,不常显就等于这个按钮不存在。
但缩略图只有 ~148px,按钮要压得住:小字号 + 半透明纸底,别抢图。 */
opacity: 1;
min-height: 26px; padding: 2px 8px; font-size: .68rem; letter-spacing: 0;
color: var(--ink-soft);
background: rgba(251,248,241,.82); border-color: transparent;
}
/* 视觉 26px 高,热区必须补到 44:上下各 -9,右侧贴齿到图块边 */
.gallery-item .gallery-dl::after {
content: ""; position: absolute;
top: -9px; right: -6px; bottom: -9px; left: -9px;
}
}
.gallery-item:hover .gallery-dl,
.gallery-item:focus-within .gallery-dl { opacity: 1; }
/* ------------------------- settings modal ------------------------- */
/* JS 靠切 hidden 显隐;此处补齐居中遮罩布局 */
.modal-scrim {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 60;
background: rgba(var(--ink-rgb),.45);
display: flex; align-items: center; justify-content: center;
padding: calc(16px + var(--sa-t)) max(16px, var(--sa-r))
calc(16px + var(--sa-b)) max(16px, var(--sa-l));
overscroll-behavior: contain;
}
.modal {
width: min(460px, 100%);
/* 用 dvh:iOS 弹出键盘后 90vh 会超出可视区,保存按钮点不到 */
max-height: 100%; overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--card);
border: 1px solid var(--line);
border-top: 3px solid var(--cinnabar);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px -20px rgba(var(--ink-rgb),.5);
padding: clamp(20px, 3vw, 32px);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-title { margin: 0; }
.modal-close {
flex: none;
width: var(--tap); height: var(--tap); border-radius: 50%;
border: 1px solid var(--line); background: var(--paper);
color: var(--ink-soft); font-size: 1.2rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: all .16s;
}
.modal-close:hover { color: var(--cinnabar); border-color: var(--cinnabar); }
.modal-body { display: flex; flex-direction: column; gap: 18px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
/* 表单字段 */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: .82rem; color: var(--ink-soft); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.field-input {
width: 100%; font-family: var(--font-sans); font-size: .9rem;
color: var(--ink); background: var(--paper);
border: 1px solid var(--line); border-radius: var(--r);
padding: 10px 12px; min-height: var(--tap);
/* iOS 默认给 input/select 加内阴影和圆角,清掉才是宣纸底 */
-webkit-appearance: none; appearance: none;
transition: border-color .18s, background .18s;
}
/* select 去掉原生箭头后自补一个描金小角标 */
select.field-input {
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 13px center;
}
.field-input:focus { outline: none; border-color: var(--gold); background: var(--card); }
/* key 状态徽记 */
.key-status {
font-size: .72rem; color: var(--ink-faint);
border: 1px solid var(--line); border-radius: 12px;
padding: 1px 9px; background: var(--paper);
}
.key-status.is-set { color: var(--ok); border-color: var(--ok); background: rgba(92,122,82,.1); }
/* ------------------------- toast ------------------------- */
.toast-stack {
position: fixed; left: 50%; bottom: calc(28px + var(--sa-b));
transform: translateX(-50%);
z-index: 80;
/* 窄屏不许顶宽:长错误文案会横向溢出 */
width: max-content; max-width: calc(100vw - 32px);
display: flex; flex-direction: column; gap: 8px; align-items: center;
pointer-events: none;
}
.toast {
background: var(--ink); color: var(--paper);
padding: 10px 20px; border-radius: var(--r);
font-size: .88rem; box-shadow: var(--shadow);
max-width: 100%; overflow-wrap: anywhere;
border-left: 3px solid var(--gold);
opacity: 0; transform: translateY(10px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: auto;
}
/* 显示态 (JS: .is-show) */
.toast.is-show { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--cinnabar-lit); }
.toast-success { border-left-color: var(--ok); }
.toast-info { border-left-color: var(--gold); }
/* ------------------------- responsive (手机优先可用) ------------------------- */
@media (max-width: 520px) {
/* 不换行:换行会把余额+齿轮甩到第二行,白占 50px 高。
标题改小字号后单行放得下,放不下就在「·」处折两行。 */
.app-header {
flex-wrap: nowrap; gap: 10px;
padding: calc(14px + var(--sa-t)) max(var(--gap), var(--sa-r)) 12px max(var(--gap), var(--sa-l));
}
.app-subtitle { display: none; }
.header-actions { gap: 8px; }
.balance-chip { padding: 4px 10px; font-size: .74rem; }
.panel { padding: 16px 14px; }
.panel-head { margin-bottom: .9em; font-size: 1.08rem; }
.param-group { margin-bottom: 18px; }
/* 两个方形上传框叠起来会把参数区推到两屏之外,限高换回滚动距离 */
.upload-slot { max-height: 40vh; }
.chip-row { gap: 8px; }
/* 高度不再压缩(触控目标底线 44),只收横向内边距 */
.chip { padding: 8px 15px; font-size: .92rem; }
.btn-generate { padding: 15px 24px; letter-spacing: .12em; }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.drawer-fab { right: calc(16px + var(--sa-r)); bottom: calc(16px + var(--sa-b)); }
/* 下载/打包按钮的 44px 提升放在 (pointer: coarse) 块里,横屏也要生效 */
.modal-footer > .btn-ghost, .modal-footer > .btn-primary { flex: 1 1 0; }
}
/* iPhone SE / mini 一档:375 及以下再让一次 */
@media (max-width: 380px) {
.app-title { font-size: .9rem; }
.chip { padding: 8px 12px; }
.drawer { width: calc(100vw - 36px); }
.drawer-tab { padding: 6px 11px; font-size: .84rem; }
.task-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
.task-thumb { width: 48px; height: 48px; }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
/* iOS Safari:输入框字号 < 16px 会在聚焦时自动放大整页且不回弹。
按「指针是粗的」判定而不是按宽度 —— 手机横屏宽 844,宽度断点会漏掉。 */
@media (pointer: coarse) {
.extra-input, .field-input, .login-input, .stepper-input,
input[type="text"], input[type="password"], input[type="number"], select, textarea {
font-size: 16px;
}
/* 同理:触控目标也不能只在窄屏生效 */
.btn-mini { min-height: var(--tap); padding: 6px 14px; font-size: .82rem; }
/* 图块内的下载不跟随放大,靠 ::after 扩热区(见上方 hover:none 块) */
.gallery-item .btn-mini { min-height: 26px; padding: 2px 8px; font-size: .68rem; }
}
/* 横屏矮屏:灯箱与登录卡不能再吃 80vh */
@media (max-height: 480px) and (orientation: landscape) {
.lightbox { padding-top: calc(56px + var(--sa-t)); gap: 8px; }
.lightbox-img {
max-height: calc(100vh - 130px - var(--sa-t) - var(--sa-b));
max-height: calc(100dvh - 130px - var(--sa-t) - var(--sa-b));
}
.upload-slot { max-height: 70vh; }
}
/* ------------------------- 图片放大灯箱 ------------------------- */
.lightbox {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200;
background: rgba(20, 17, 13, .92);
display: flex; align-items: center; justify-content: center;
/* 顶部让开关闭按钮 + 刘海,底部让开下载条 + home 横条 */
padding: calc(74px + var(--sa-t)) max(16px, var(--sa-r))
calc(20px + var(--sa-b)) max(16px, var(--sa-l));
flex-direction: column; gap: 16px;
overscroll-behavior: contain;
animation: lb-fade .2s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-img {
/* 92vw 在窄屏会超出 padding 后的可用宽度 → 用 100% 兜住 */
max-width: min(100%, 900px);
/* 80vh 在 667 高的 SE 上会把「下载原图」按钮顶出屏外(74+534+16+44 > 667),
所以再减去上下留白 + 按钮 + 安全区实测占位。
先 vh 兜底(iOS < 15.4 不认 dvh),再用 dvh 覆盖。 */
max-height: min(80vh, calc(100vh - 170px - var(--sa-t) - var(--sa-b)));
max-height: min(80vh, calc(100dvh - 170px - var(--sa-t) - var(--sa-b)));
object-fit: contain; border-radius: var(--r);
box-shadow: 0 8px 40px rgba(0,0,0,.5);
/* 手机存图主路径:长按必须能唤出「存储到照片」 */
-webkit-touch-callout: default;
-webkit-user-select: auto; user-select: auto;
pointer-events: auto;
touch-action: auto;
}
.lightbox-close {
position: absolute; top: calc(14px + var(--sa-t)); right: max(16px, var(--sa-r));
width: var(--tap); height: var(--tap); border-radius: 50%;
border: none; background: rgba(255,255,255,.14); color: #fff;
font-size: 1.6rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.lightbox-close:hover { background: var(--cinnabar); }
/* 带 .lightbox 提权,避免被窄屏块的 .btn-mini 规则改掉字号/内边距 */
.lightbox .lightbox-dl {
background: var(--gold); color: var(--ink); border: none; flex: none;
min-height: var(--tap); padding: 0 24px; font-size: .9rem;
}
/* 灯箱底部按钮排:存相册 + 下载原图并排，手机上够大好点 */
.lightbox-bar {
display: flex; gap: 12px; align-items: center; justify-content: center;
flex-wrap: wrap; z-index: 2;
}
.lightbox-tip {
margin: 10px 0 0; font-size: .76rem; color: rgba(255,255,255,.72);
text-align: center; z-index: 2;
}
/* ------------- 品牌叠加面板(灯箱内,后处理 Phase 4) ------------- */
.brand-panel {
z-index: 2; margin: 14px auto 0; max-width: 560px; width: 92%;
background: rgba(20,16,12,.82); border: 1px solid rgba(201,161,74,.4);
border-radius: 12px; padding: 14px 16px;
display: flex; flex-direction: column; gap: 12px;
backdrop-filter: blur(6px);
}
.brand-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brand-label { font-size: .82rem; color: rgba(255,255,255,.82); font-family: var(--font-serif); }
.brand-logo-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-logo-preview {
width: 40px; height: 40px; object-fit: contain;
background: rgba(255,255,255,.08); border-radius: 6px; padding: 3px;
}
.brand-hint { font-size: .72rem; color: rgba(255,255,255,.55); }
.brand-select, .brand-input {
font-family: var(--font-sans); font-size: .85rem;
color: #fff; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 6px 10px;
-webkit-appearance: none; appearance: none;
}
.brand-input { flex: 1; min-width: 180px; }
.brand-select option { color: #111; }
.brand-range { flex: 1; min-width: 100px; accent-color: var(--gold); }
.brand-val { font-size: .8rem; color: var(--gold); min-width: 40px; }
.brand-check { font-size: .8rem; color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 5px; }
.brand-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-status { font-size: .8rem; color: var(--gold); }
.brand-status.is-error { color: #ff9b8a; }
.btn-mini.btn-primary { background: var(--gold); color: var(--ink); border: none; }
.btn-mini.btn-primary:hover:not(:disabled) { background: #d8b767; }
.task-thumb-zoom { cursor: zoom-in; }
.task-phase { display: block; margin-top: 6px; font-size: .7rem; color: var(--ink-faint); }
/* 缩略图占位里的阶段字要塞进 56px:压字号、单行截断,不撑破方块 */
.task-thumb-ph .task-phase {
margin-top: 0; font-size: .58rem; line-height: 1.15;
max-width: 100%; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 状态区内联小转圈 */
.mini-spin {
display: inline-block; width: 11px; height: 11px; margin-right: 5px;
vertical-align: -1px; border: 2px solid rgba(160,140,90,.35);
border-top-color: var(--gold-deep); border-radius: 50%;
animation: mini-spin .7s linear infinite;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }
/* 内联「重试」按钮:文字流里不能撑高,靠 ::after 隐形扩热区 */
.link-retry {
position: relative;
border: none; background: none; color: var(--cinnabar); cursor: pointer;
font-size: inherit; text-decoration: underline; padding: 2px 4px;
}
.link-retry::after {
content: ""; position: absolute;
left: -6px; right: -6px; top: -12px; bottom: -12px;
}
.upload-slot.desc-failed { border-color: var(--cinnabar); border-style: solid; }
/* 破图兜底:不显示浏览器默认碎图标,给一块能看懂的占位 */
.img-broken {
background: var(--paper-sink) url("data:image/svg+xml;utf8,\
") center/40px no-repeat;
color: transparent;
min-height: 72px;
}
/* ------------------------- 访问口令登录浮层 ------------------------- */
.login-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
display: flex; align-items: center; justify-content: center;
padding: calc(24px + var(--sa-t)) max(20px, var(--sa-r))
calc(24px + var(--sa-b)) max(20px, var(--sa-l));
overflow-y: auto;
background: var(--paper);
background-image: radial-gradient(circle at 50% 30%, rgba(var(--gold-rgb),.14), transparent 62%);
}
.login-overlay[hidden] { display: none; }
.login-card {
width: 100%; max-width: 360px;
padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 32px);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
text-align: center;
}
.login-seal { margin: 0 auto 18px; }
.login-title {
margin: 0 0 6px; font-family: var(--font-serif);
font-size: 1.18rem; font-weight: 600; color: var(--ink); letter-spacing: .06em;
}
.login-sub { margin: 0 0 22px; font-size: .86rem; color: var(--ink-faint); }
.login-input {
width: 100%; padding: 12px 14px; margin-bottom: 14px;
/* 16px 是 iOS 不自动放大的下限,口令框千万别用 .9rem */
font-family: var(--font-sans); font-size: 16px; color: var(--ink);
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r); text-align: center; letter-spacing: .12em;
min-height: 48px;
-webkit-appearance: none; appearance: none;
}
.login-input:focus { border-color: var(--cinnabar); outline: none; }
.login-err {
margin: 0 0 12px; font-size: .82rem; color: var(--danger);
}
.login-err[hidden] { display: none; }
.login-btn {
width: 100%; padding: 12px 16px; min-height: 48px;
font-family: var(--font-serif); font-size: 1rem; letter-spacing: .1em;
color: var(--paper); background: var(--cinnabar);
border: none; border-radius: var(--r); cursor: pointer;
transition: background .18s ease;
}
.login-btn:hover:not(:disabled) { background: var(--cinnabar-lit); }
.login-btn:disabled { background: var(--ink-faint); cursor: default; }
/* ------------------------- a11y ------------------------- */
:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ------------- 对标图优先级闸门(增加变量开关 + 维度置灰) ------------- */
.ref-gate {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 0 0 14px; padding: 10px 12px;
border: 1px solid var(--gold);
border-left: 3px solid var(--cinnabar);
border-radius: var(--r);
background: rgba(var(--gold-rgb), .08);
}
.ref-gate-note { margin: 0; font-size: .78rem; color: var(--ink-faint); flex: 1 1 12ch; }
.ref-gate-toggle {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap); padding: 0 4px;
font-size: .84rem; cursor: pointer; white-space: nowrap;
}
.ref-gate-toggle input { width: 20px; height: 20px; accent-color: var(--cinnabar); cursor: pointer; }
/* 置灰:保持可见可读,但不可点。用户要能看到当前档位是什么 */
.dim-groups.is-locked { opacity: .42; }
.dim-groups.is-locked .chip { cursor: not-allowed; }
/* ============================================================
性能与弱网(perf agent):列表截断提示 / 连接状态 / 防抖动
============================================================ */
/* 前端截断必须明示条数(宪法第 7 条 no silent caps) */
.list-cap {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 14px 0 calc(4px + var(--sa-b));
padding: 10px 12px;
border-top: 1px solid var(--line-soft);
}
.list-cap-text {
font-family: var(--font-serif); font-size: .76rem;
color: var(--ink-faint); letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
.list-cap-more {
flex: none; min-height: var(--tap); padding: 0 18px;
border-color: var(--gold); color: var(--gold-deep);
}
.list-cap-more:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
/* 触屏:整条按钮撑满一行,拇指够得到 */
@media (pointer: coarse) {
.list-cap { justify-content: center; }
.list-cap-more { flex: 1 1 100%; min-height: var(--tap); }
}
/* 连接不稳定:一条克制的纸签,不弹窗不打断操作 */
.net-hint {
position: fixed; z-index: 90;
left: 50%; transform: translateX(-50%);
bottom: calc(12px + var(--sa-b));
padding: 6px 14px; border-radius: 20px;
font-size: .74rem; letter-spacing: .05em;
font-family: var(--font-serif);
color: var(--gold-deep);
background: rgba(251, 248, 241, .94);
border: 1px solid var(--gold);
box-shadow: var(--shadow-sm);
pointer-events: none;
max-width: calc(100vw - 32px);
white-space: nowrap;
}
/* 感知性能:占位与成品同尺寸,状态切换时卡片高度不跳(CLS) */
.task-item { min-height: 78px; }
.task-thumb { width: 56px; height: 56px; flex: none; }
.task-thumb-ph { animation: ph-breathe 2.2s ease-in-out infinite; }
@keyframes ph-breathe {
0%, 100% { background: var(--paper-sink); }
50% { background: var(--paper-warm); }
}
/* 成品缩略图淡入,避免弱网下"白块突然变图"的硬跳 */
.task-thumb[src] { animation: thumb-in .28s ease-out; }
@keyframes thumb-in { from { opacity: 0; } to { opacity: 1; } }
/* 资源库格位在图到达前就占好位(aspect-ratio 已定),再加一层呼吸底 */
.gallery-item:not(:has(.gallery-img[src])) { background: var(--paper-sink); }
@media (pointer: coarse) {
/* 触屏列表滚动更顺:离屏卡片不参与渲染计算 */
.task-item, .gallery-item { content-visibility: auto; contain-intrinsic-size: auto 78px; }
.gallery-item { contain-intrinsic-size: auto 160px; }
}
@media (prefers-reduced-motion: reduce) {
.task-thumb-ph, .task-thumb[src] { animation: none; }
}
/* ------------- 删除 / 清理 ------------- */
/* 危险动作用朱红描边区分,但不做成大红块 —— 避免误点又不至于扎眼 */
.btn-mini.btn-danger { border-color: var(--cinnabar); color: var(--cinnabar); }
.btn-mini.btn-danger:hover:not(:disabled) {
background: var(--cinnabar); color: #fff; border-color: var(--cinnabar);
}
.btn-mini.btn-quiet { color: var(--ink-faint); }
.storage-info {
display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px; border: 1px solid var(--rule);
border-radius: 8px; background: var(--paper-warm);
font-size: .84rem;
}
.stor-row { display: flex; align-items: baseline; gap: 8px; }
.stor-row > span:first-child { min-width: 4.5em; color: var(--ink-faint); }
.stor-row > b { font-variant-numeric: tabular-nums; }
.stor-sub { margin-left: auto; font-size: .76rem; color: var(--ink-faint); }
.clean-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding-top: 12px; border-top: 1px solid var(--rule);
}
.clean-row-danger { border-top-style: dashed; }
.clean-note { font-size: .76rem; color: var(--ink-faint); }
.clean-date { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.clean-date input {
min-height: var(--tap); padding: 0 10px;
border: 1px solid var(--rule); border-radius: 6px;
background: var(--paper); color: var(--ink); font: inherit;
}
/* ------------- 存相册按钮 + 回来提醒条 ------------- */
.btn-mini.btn-save, .gallery-save, .new-done-save {
border-color: var(--cinnabar);
color: var(--cinnabar);
font-weight: 500;
}
.btn-mini.btn-save:active, .gallery-save:active, .new-done-save:active {
background: var(--cinnabar); color: var(--paper);
}
.gallery-save { /* 与 .gallery-dl 并排,压在缩略图右下 */
position: absolute; right: 4px; bottom: 30px;
background: rgba(245, 241, 232, .92);
}
.new-done-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin: 0 0 12px; padding: 10px 12px;
border: 1px solid var(--gold);
border-left: 3px solid var(--cinnabar);
border-radius: var(--r);
background: rgba(var(--gold-rgb), .12);
font-size: .84rem;
}
.new-done-text { flex: 1 1 auto; color: var(--ink); }
.new-done-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.new-done-close { min-width: var(--tap); }
/* ===== 模型参数折叠区（并入宣纸朱砂品牌体系）===== */
.model-info-collapse {
margin: 14px 0 0;
border: 1px solid var(--line-soft);
border-radius: var(--r);
background: var(--paper);
}
.model-info-summary {
cursor: pointer;
padding: 11px 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: .85rem;
font-family: var(--font-serif);
color: var(--ink-soft);
user-select: none;
letter-spacing: .03em;
}
.model-info-summary:hover { background: var(--paper-warm); }
.collapse-arrow {
display: inline-block;
transition: transform 0.2s ease;
font-size: .7rem;
color: var(--cinnabar);
}
details[open] .collapse-arrow { transform: rotate(90deg); }
.collapse-label { flex: 1; }
.model-info-badge {
font-size: .74rem;
color: var(--cinnabar);
background: var(--cinnabar-wash);
padding: 3px 9px;
border-radius: var(--r-sm);
border: 1px solid var(--cinnabar);
font-family: var(--font-serif);
}
.model-info-content {
padding: 12px 14px;
border-top: 1px solid var(--line-soft);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
}
@media (max-width: 600px) {
.model-info-content { grid-template-columns: 1fr; }
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .8rem;
}
.info-label {
color: var(--ink-faint);
min-width: 56px;
letter-spacing: .04em;
}
.info-value {
color: var(--ink);
text-align: right;
flex: 1;
margin-left: 12px;
}
.info-value strong { color: var(--cinnabar); }
/* ===== 生成页渠道和模型样式 ===== */
.channel-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
/* 「引擎区」：渠道+模型圈成一个带浅描边的子容器，与上方参数分组拉开层次 */
.engine-group {
margin-top: 20px;
padding: 16px;
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
background: color-mix(in srgb, var(--card) 60%, transparent);
}
/* 模型列表小标题 */
.model-list-label {
display: block;
margin: 4px 0 8px;
font-size: .78rem;
color: var(--ink-faint);
letter-spacing: .05em;
}
/* 模型单选列表：整行卡片，选中转朱砂淡染，价格朱砂高亮做锚点 */
.model-list { display: flex; flex-direction: column; gap: 7px; }
.model-opt {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; min-height: var(--tap);
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--paper);
cursor: pointer;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.model-opt:hover { border-color: var(--gold); background: var(--paper-warm); }
.model-opt input[type="radio"] { flex: none; accent-color: var(--cinnabar); width: 16px; height: 16px; }
.model-opt-body {
flex: 1; display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.model-opt-name {
font-family: var(--font-serif); font-size: .9rem; color: var(--ink);
letter-spacing: .02em;
}
/* 价格锚点：金额本身加粗放大、朱砂色，单位与浮动说明弱化分级 */
.model-opt-price {
display: inline-flex; align-items: baseline; gap: 2px;
font-family: var(--font-serif); white-space: nowrap;
}
.model-opt-price b {
font-size: .95rem; font-weight: 600; color: var(--cinnabar); letter-spacing: .01em;
}
.model-opt-unit { font-size: .72rem; color: var(--ink-faint); }
.model-opt-pnote {
font-size: .66rem; color: var(--ink-faint);
border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 1px 5px; margin-left: 6px;
}
/* 选中态：整行朱砂淡染 + 左侧朱砂色条(区别于渠道方块选中态) */
.model-opt {
position: relative; overflow: hidden;
}
.model-opt:has(input:checked) {
border-color: var(--cinnabar);
background: var(--cinnabar-wash);
}
.model-opt:has(input:checked)::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: var(--cinnabar);
}
.model-opt:has(input:checked) .model-opt-name { color: var(--cinnabar-deep); font-weight: 600; }
/* 模型参数选项的说明小字（如"1440级·推荐"） */
.model-opt-note {
font-size: .74rem; color: var(--ink-faint);
white-space: nowrap; margin-left: auto;
}
.model-param-block { margin-bottom: 14px; }
.model-param-block:last-child { margin-bottom: 0; }
/* 尺寸档被顶栏「比例」锁定：置灰只读，选中档仍高亮但不可点 */
.model-opt.is-locked { cursor: not-allowed; opacity: .78; }
.model-opt.is-locked input { cursor: not-allowed; }
.model-opt.is-locked:not(:has(input:checked)) { opacity: .5; }
.model-opt.is-locked:has(input:checked) {
border-color: var(--gold); background: var(--paper-warm);
}
.model-lock-tip {
font-size: .7rem; color: var(--gold-deep, var(--cinnabar));
margin-left: 8px; font-weight: 400; white-space: nowrap;
}
/* ===== 功能节点(自定义固定提示词) ===================================== */
/* 节点 = 用户自己粘贴保存的成熟提示词,点一下直接推给生图模型。
视觉语言沿用预设按钮那套(纸底+金线+朱砂),但加 mode 标签区分"系统插手多少"。 */
.node-row { display: flex; flex-wrap: wrap; gap: 10px; }
.node-empty { font-size: .82rem; color: var(--ink-faint); letter-spacing: .03em; }
.node-chip {
display: inline-flex; align-items: stretch;
border: 1px solid var(--line); border-radius: var(--r);
background: linear-gradient(180deg, var(--paper), var(--paper-warm));
overflow: hidden; transition: border-color .18s, transform .18s;
}
.node-chip:hover { border-color: var(--gold); transform: translateY(-1px); }
/* 内置节点用金线描边:提示"这是出厂资产,删不掉" */
.node-chip.is-builtin { border-color: var(--gold); background: linear-gradient(180deg, #FBF6EA, var(--paper-warm)); }
.node-fire {
appearance: none; -webkit-appearance: none; border: 0; background: none;
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap); padding: 10px 14px;
color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: .9rem;
}
.node-fire:hover { color: var(--cinnabar); }
.node-ico { font-size: 1.1rem; color: var(--gold-deep); line-height: 1; }
.node-name { font-weight: 500; }
.node-mode {
font-size: .64rem; letter-spacing: .06em; padding: 2px 6px;
border: 1px solid var(--line-soft); border-radius: 3px;
color: var(--ink-faint); background: var(--card);
}
.node-ops { display: inline-flex; align-items: center; border-left: 1px solid var(--line-soft); }
.node-op {
appearance: none; border: 0; background: none; cursor: pointer;
padding: 0 8px; align-self: stretch;
font-family: inherit; font-size: .7rem; color: var(--ink-faint);
border-right: 1px solid var(--line-soft);
}
.node-op:last-child { border-right: 0; }
.node-op:hover { color: var(--ink); background: var(--paper-sink); }
.node-op-del:hover { color: #fff; background: var(--cinnabar); }
.node-add {
appearance: none; cursor: pointer; font-family: inherit;
border: 1px dashed var(--line); border-radius: var(--r-sm);
background: none; color: var(--ink-soft);
font-size: .78rem; padding: 5px 12px; letter-spacing: .03em;
}
.node-add:hover { border-color: var(--cinnabar); color: var(--cinnabar); border-style: solid; }
.node-tip { margin: 8px 0 0; font-size: .74rem; color: var(--ink-faint); letter-spacing: .02em; }
/* ===== 智能分析(从生图流程里拆出来的独立按钮) ========================= */
.analyze-row { display: flex; flex-wrap: wrap; gap: 10px; }
.analyze-btn {
appearance: none; cursor: pointer; font-family: inherit; font-size: .84rem;
min-height: 38px; padding: 8px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--ink-soft);
}
.analyze-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); }
.analyze-btn:disabled { opacity: .45; cursor: not-allowed; }
.analyze-btn.is-done { border-color: var(--ok); color: var(--ok); }
.analyze-state { margin: 8px 0 0; font-size: .74rem; color: var(--ink-faint); }
/* ===== 节点弹层(编辑器 + 提示词预览) ================================= */
.node-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(var(--ink-rgb), .55); backdrop-filter: blur(3px);
}
.node-overlay[hidden] { display: none; }
.node-card {
width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r); padding: 22px 24px;
box-shadow: 0 24px 60px -20px rgba(var(--ink-rgb), .5);
}
.node-ed-title {
margin: 0 0 16px; font-family: var(--font-serif); font-size: 1.15rem;
color: var(--ink); letter-spacing: .04em; font-weight: 500;
}
.node-ed-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.node-ed-grid .node-fld { flex: 1 1 240px; }
.node-fld { display: block; margin-bottom: 14px; }
.node-fld.node-fld-sm { flex: 0 0 110px; }
.node-fld > span {
display: block; margin-bottom: 5px;
font-size: .76rem; color: var(--ink-soft); letter-spacing: .04em;
}
.node-fld input, .node-fld select, .node-fld textarea {
width: 100%; box-sizing: border-box; font-family: inherit; font-size: .88rem;
padding: 9px 11px; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
}
.node-fld textarea { resize: vertical; line-height: 1.6; min-height: 120px; }
.node-fld input:focus, .node-fld select:focus, .node-fld textarea:focus {
outline: none; border-color: var(--cinnabar); box-shadow: 0 0 0 2px var(--cinnabar-wash);
}
.node-chk {
display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px;
font-size: .78rem; color: var(--ink-soft); cursor: pointer; line-height: 1.5;
}
.node-ed-err {
margin: 0 0 12px; font-size: .78rem; color: var(--cinnabar);
background: var(--cinnabar-wash); border-left: 2px solid var(--cinnabar);
padding: 7px 10px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* 2026-08-11:物理规律自动注入提醒条(编辑弹窗内) */
.node-phys-tip {
display: flex; gap: 8px; align-items: flex-start;
margin: 0 0 12px; padding: 9px 12px;
font-size: .78rem; line-height: 1.55; color: var(--ink-soft);
background: rgba(160,48,40,.08); /* 朱砂 wash，统一主题 */
border: 1px solid rgba(160,48,40,.25); border-radius: var(--r-sm);
}
.node-phys-ico { font-size: .95rem; line-height: 1.3; }
.node-phys-tip strong { color: var(--ink); }
.node-ed-actions { display: flex; justify-content: flex-end; gap: 10px; }
.node-btn-ghost, .node-btn-main {
appearance: none; cursor: pointer; font-family: inherit; font-size: .88rem;
min-height: 44px; padding: 9px 22px; border-radius: var(--r-sm); letter-spacing: .04em;
}
.node-btn-ghost { border: 1px solid var(--line); background: none; color: var(--ink-soft); }
.node-btn-ghost:hover { border-color: var(--ink-faint); color: var(--ink); }
.node-btn-main {
border: 1px solid var(--cinnabar-deep); color: #fff;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
}
.node-btn-main:hover { background: linear-gradient(180deg, var(--cinnabar), var(--cinnabar-deep)); }
.node-btn-main:disabled { opacity: .6; cursor: wait; }
/* 预览:让用户看清"最终发出去的是什么" —— 这是把抽卡变成可调试的关键 */
.node-pv-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
font-size: .76rem; color: var(--ink-soft); margin-bottom: 12px;
padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.node-pv-tag {
padding: 3px 9px; border-radius: 3px; letter-spacing: .06em;
background: var(--cinnabar-wash); color: var(--cinnabar); border: 1px solid var(--cinnabar);
}
.node-pv-meta b { color: var(--cinnabar); font-weight: 600; }
.node-pv-sys { flex: 1 1 100%; font-size: .72rem; color: var(--ink-faint); }
.node-pv-body {
margin: 0 0 18px; padding: 14px 16px; max-height: 42vh; overflow-y: auto;
background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
font-family: var(--font-sans); font-size: .82rem; line-height: 1.75; color: var(--ink);
white-space: pre-wrap; word-break: break-word;
}
/* ===== 多图参考(其他角度) ============================================== */
/* 形状 100% 还原靠多角度互证:1 张能出图,3–5 张才拼得出可靠几何档案。 */
.angle-block {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--hairline, rgba(0,0,0,.08));
}
.angle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.angle-title { font-size: .82rem; letter-spacing: .08em; color: var(--ink, #2b2b2b); }
.angle-tip { font-size: .72rem; color: var(--ink-3, #8a8a8a); font-style: normal; flex: 1; }
.angle-add {
border: 1px solid var(--hairline, rgba(0,0,0,.14)); background: transparent;
border-radius: 2px; padding: 4px 10px; font-size: .74rem; cursor: pointer;
color: var(--ink-2, #5a5a5a); transition: border-color .18s, color .18s;
}
.angle-add:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.angle-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.angle-card {
position: relative; width: 64px; height: 64px; border-radius: 2px;
overflow: hidden; border: 1px solid var(--hairline, rgba(0,0,0,.12));
background: var(--paper-2, #f6f4f1);
}
.angle-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.angle-card.pending { opacity: .5; }
.angle-card.pending::after {
content: '上传中'; position: absolute; inset: auto 0 0 0; text-align: center;
font-size: .6rem; background: rgba(0,0,0,.55); color: #fff; padding: 1px 0;
}
.angle-card.fail { border-color: var(--cinnabar); opacity: .6; }
.angle-card.fail::after {
content: '失败'; position: absolute; inset: auto 0 0 0; text-align: center;
font-size: .6rem; background: var(--cinnabar); color: #fff; padding: 1px 0;
}
.angle-rm {
position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
font-size: .7rem; line-height: 1; cursor: pointer; padding: 0;
}
.angle-rm:hover { background: var(--cinnabar); }
.angle-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.angle-state { font-size: .72rem; color: var(--ink-3, #8a8a8a); }
.angle-dossier { margin-top: 10px; }
.angle-dossier summary {
font-size: .74rem; color: var(--ink-2, #5a5a5a); cursor: pointer;
letter-spacing: .04em; padding: 4px 0;
}
.dossier-text {
font-size: .7rem; line-height: 1.7; color: var(--ink-2, #5a5a5a);
white-space: pre-wrap; word-break: break-word; margin: 6px 0 0;
max-height: 260px; overflow-y: auto; padding: 10px;
background: var(--paper-2, #f6f4f1); border-radius: 2px;
border-left: 2px solid var(--gold-deep, #9a7b4f);
}
.angle-dossier-btn {
border: 1px solid var(--cinnabar); background: transparent;
color: var(--cinnabar); border-radius: 2px; padding: 5px 12px;
font-size: .74rem; cursor: pointer; transition: background .18s, color .18s;
}
.angle-dossier-btn:hover:not(:disabled) {
background: var(--cinnabar); color: #fff;
}
.angle-dossier-btn:disabled { opacity: .4; cursor: not-allowed; }
.qc-line { font-size: .78rem; margin: 3px 0; }
.qc-ok { color: #2e7d32; font-weight: 600; }
.qc-weak { color: #b58900; font-weight: 600; }
.qc-reshoot { color: var(--cinnabar); font-weight: 600; }
/* ============================================================
首页门户 + 快捷节点大卡片(2026-08-03 portal.js)
============================================================ */
/* —— 模式遮罩:进站先选路 —— */
.portal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--ink-rgb), .42);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.portal-overlay[hidden] { display: none; }
.portal-card {
width: min(560px, 92vw); padding: 34px 30px 30px;
background: var(--paper);
border: 1px solid var(--gold);
border-radius: 10px;
box-shadow: 0 18px 50px rgba(var(--ink-rgb), .35);
animation: portal-in .28s ease-out;
}
@keyframes portal-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.portal-title {
margin: 0 0 4px; font-size: 1.35rem; letter-spacing: .06em;
color: var(--ink);
}
.portal-sub { margin: 0 0 22px; font-size: .8rem; color: var(--ink-faint, #8A7F6C); }
.portal-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-choice {
display: flex; flex-direction: column; align-items: flex-start;
padding: 18px 16px; text-align: left; cursor: pointer;
background: #fffdf7; border: 1px solid var(--paper-sink, #E7DECB);
border-radius: 8px; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.portal-choice:hover {
border-color: var(--gold-deep);
box-shadow: 0 6px 18px rgba(var(--gold-deep-rgb), .18);
transform: translateY(-2px);
}
.portal-choice-a { border-left: 3px solid var(--cinnabar); }
.portal-choice-b { border-left: 3px solid var(--gold-deep); }
.portal-ico {
font-size: 1.7rem; line-height: 1; margin-bottom: 10px;
color: var(--cinnabar);
}
.portal-choice-b .portal-ico { color: var(--gold-deep); }
.portal-name { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.portal-rec {
display: inline-block; margin-left: 6px; padding: 1px 7px;
font-size: .62rem; font-style: normal; font-weight: 600;
color: #fff; background: var(--cinnabar); border-radius: 20px;
vertical-align: 2px;
}
.portal-desc { margin-top: 6px; font-size: .72rem; line-height: 1.55; color: var(--ink-faint, #8A7F6C); }
/* —— 路 A 快捷节点区(列表行式:克制清晰,Linear/Vercel 风) —— */
.node-app-block { margin-top: 16px; }
.node-app-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.node-app-head .angle-title { font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.node-app-head .angle-tip { flex: 1; font-size: .68rem; }
/* 列表容器:白底面板 + 细分割线,不是卡片堆 */
.node-list {
background: #fffdf9;
border: 1px solid #EDE6D6;
border-radius: 10px;
overflow: hidden;
}
/* 每一行:主按钮占满左侧(44px+ 触达),操作按钮贴右 */
/* 只作用于快捷节点网格里的行(避免命中隐藏的 #nodeRow) */
#nodeGridA .node-row {
display: flex; align-items: center;
border-bottom: 1px solid #F1EBDF;
}
#nodeGridA .node-row:last-child { border-bottom: none; }
#nodeGridA .node-row:hover { background: #FBF7EE; }
#nodeGridA .node-row-main {
flex: 1; display: flex; align-items: center; gap: 10px;
min-height: 46px; padding: 0 14px;
background: none; border: none; cursor: pointer; text-align: left;
}
#nodeGridA .node-row-ico {
font-size: .95rem; line-height: 1; color: var(--gold-deep);
width: 20px; height: 20px; text-align: center; flex: none;
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; /* 超长符号(如 emoji 组合)裁剪,不撑破行 */
}
#nodeGridA .node-row-name {
font-size: .82rem; font-weight: 600; color: var(--ink);
letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.4; /* 固定行高,保证所有行名字垂直对齐 */
}
#nodeGridA .node-row-badge {
flex: none; padding: 1px 6px; font-size: .56rem; letter-spacing: .05em;
color: var(--ink-faint, #8A7F6C);
border: 1px solid #E8DFCC; border-radius: 20px; background: #FBFAF4;
line-height: 1.5;
}
#nodeGridA .node-row-mode {
flex: none; margin-left: auto; padding: 2px 8px;
font-size: .6rem; letter-spacing: .06em; color: var(--gold-deep);
border-radius: 20px; background: #F8F1E2;
line-height: 1.5;
}
/* 工作流步骤序号:金色小圆 */
.node-row-step {
flex: none; width: 18px; height: 18px; display: inline-flex;
align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; color: #fff;
background: var(--gold-deep); border-radius: 50%;
}
/* 操作按钮:44px 触达(hover 显,手机常驻) —— 只作用于快捷节点网格 */
#nodeGridA .node-row-ops {
display: flex; align-items: center; gap: 2px;
padding-right: 8px; opacity: 0; transition: opacity .15s;
}
#nodeGridA .node-row:hover .node-row-ops { opacity: 1; }
@media (pointer: coarse) { #nodeGridA .node-row-ops { opacity: 1; } }
#nodeGridA .node-row-ops .node-op {
width: 40px; height: 40px; font-size: .82rem; line-height: 1; cursor: pointer;
color: var(--ink-soft, #5A5044);
background: transparent; border: none; border-radius: 8px; transition: background .15s, color .15s;
}
#nodeGridA .node-row-ops .node-op:hover { background: #F3EBDD; color: var(--gold-deep); }
#nodeGridA .node-row-ops .node-op-del:hover { background: #F8E8E3; color: var(--cinnabar); }
.node-app-empty {
padding: 20px; text-align: center;
font-size: .78rem; color: var(--ink-faint, #8A7F6C);
border: 1px dashed var(--paper-sink, #E7DECB); border-radius: 8px;
}
/* —— 模式切换:路 A 隐藏参数区,路 B 显示全部 —— */
body.mode-a .param-panel { display: none; }
body.mode-a .node-app-block { display: block; }
/* 对标风格库只属于路 B 高级定制(对标图只有这里有) */
body.mode-a .sr-block { display: none; }
body.mode-b .node-app-block { display: none; }
.node-app-block { display: none; } /* 默认隐藏,由 mode-a 打开 */
/* ============================================================
排版重排 v2(2026-08-03):产品库抽屉 + 节点卡片操作 + 面包屑
============================================================ */
/* —— 一级二级关联:工作台面包屑 —— */
.mode-crumb {
max-width: 860px; margin: 0 auto 2px; padding: 10px 18px 0;
font-size: .74rem; letter-spacing: .03em;
}
.crumb-root { color: var(--ink-faint, #8A7F6C); }
.crumb-sep { margin: 0 6px; color: var(--paper-sink, #E7DECB); }
.crumb-cur { color: var(--cinnabar); font-weight: 600; }
.lib-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* —— 节点卡片:操作按钮(编辑/复制/删除) —— */
.node-app-card {
position: relative; display: flex; flex-direction: column; align-items: center;
padding: 14px 8px 10px; cursor: pointer;
background: #fffdf7; border: 1px solid var(--paper-sink, #E7DECB);
border-radius: 10px;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.node-app-card:hover {
border-color: var(--gold-deep);
box-shadow: 0 8px 20px rgba(var(--gold-deep-rgb), .16);
transform: translateY(-3px);
}
.node-app-main {
display: flex; flex-direction: column; align-items: center; width: 100%;
background: none; border: none; cursor: pointer; padding: 0;
}
.node-app-ops {
display: flex; gap: 3px; margin-top: 5px; opacity: 0;
transition: opacity .18s;
}
.node-app-card:hover .node-app-ops { opacity: 1; }
/* 手机上永远可见(无 hover) */
@media (pointer: coarse) { .node-app-ops { opacity: 1; } }
.node-app-ops .node-op {
width: 22px; height: 22px; font-size: .68rem; line-height: 1; cursor: pointer;
color: var(--ink-soft, #5A5044);
background: transparent; border: 1px solid var(--paper-sink, #E7DECB);
border-radius: 5px; transition: all .15s;
}
.node-app-ops .node-op:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.node-app-ops .node-op-del:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
/* —— 区块节奏:面板内统一呼吸 —— */
.angle-block { margin-top: 16px; }
.node-app-block { margin-top: 20px; }
/* —— 工作流分组(2026-08-03):同组节点按 order 构成流程 —— */
.node-flow { margin-bottom: 14px; }
.node-flow:last-child { margin-bottom: 0; }
.node-flow-head {
display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px;
}
.node-flow-name {
font-size: .74rem; font-weight: 700; letter-spacing: .08em;
color: var(--gold-deep);
}
.node-flow-tip {
font-size: .64rem; font-style: normal; color: var(--ink-faint, #8A7F6C);
}
.node-app-grid.is-flow .node-app-card { position: relative; }
.node-step {
position: absolute; top: -5px; left: -5px; z-index: 2;
width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
font-size: .58rem; font-weight: 700; color: #fff;
background: var(--gold-deep);
border: 2px solid #fffdf9; border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* (旧卡片版步骤角标,已由 .node-row-step 取代 —— 保留无害) */
/* —— 隐藏区:保留 DOM 但不显示(转发中枢/隐藏入口用) —— */
.is-hidden-zone { display: none !important; }
/* ============================================================
生成引擎摘要 + 风格变量折叠(2026-08-03 UI 重构)
============================================================ */
.engine-group { margin-top: 4px; }
.engine-summary {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 14px; cursor: pointer; text-align: left;
background: #fffdf9; border: 1px solid #EDE6D6; border-radius: 10px;
transition: border-color .18s, background .18s;
}
.engine-summary:hover { border-color: var(--gold); background: #fffdf4; }
.engine-model {
font-size: .84rem; font-weight: 600; color: var(--ink);
flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.engine-price {
font-size: .72rem; color: var(--cinnabar); font-weight: 600;
/* 2026-08-10 C4:金额数字用 sans + tabular-nums(对齐稳定) */
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums;
}
.engine-change {
font-size: .68rem; color: var(--gold-deep);
border: 1px solid var(--gold); border-radius: 20px;
padding: 2px 9px; white-space: nowrap;
}
.engine-hint {
margin: 6px 2px 0; font-size: .68rem; color: var(--ink-faint, #8A7F6C);
}
/* 风格变量折叠 */
.dim-collapse {
border: 1px solid #EDE6D6; border-radius: 10px;
background: #fffdf9; overflow: hidden;
}
.dim-collapse-summary {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; cursor: pointer; list-style: none;
user-select: none;
}
.dim-collapse-summary::-webkit-details-marker { display: none; }
.dim-collapse-summary:hover { background: #fbf7ee; }
.collapse-arrow { transition: transform .2s; color: var(--gold-deep); font-size: .7rem; }
.dim-collapse[open] .collapse-arrow { transform: rotate(180deg); }
.dim-collapse-label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.dim-collapse-tip { font-size: .66rem; font-style: normal; color: var(--ink-faint, #8A7F6C); }
.dim-collapse-body {
padding: 4px 14px 14px;
border-top: 1px solid #F1EBDF;
}
/* —— 设置抽屉:全局默认模型(2026-08-03) —— */
.global-model-box {
max-height: 240px; overflow-y: auto;
border: 1px solid #EDE6D6; border-radius: 10px;
background: #fffdf9; padding: 4px;
}
.gm-channel { margin-bottom: 6px; }
.gm-channel:last-child { margin-bottom: 0; }
.gm-channel-label {
display: block; padding: 6px 10px 3px;
font-size: .66rem; letter-spacing: .08em; color: var(--gold-deep);
}
.gm-opt {
display: flex; align-items: flex-start; gap: 8px;
padding: 7px 10px; cursor: pointer; border-radius: 8px;
transition: background .15s;
}
.gm-opt:hover { background: #fbf7ee; }
.gm-opt input { margin-top: 3px; accent-color: var(--cinnabar); }
.gm-opt-body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.gm-opt-name { font-size: .78rem; font-weight: 600; color: var(--ink); }
.gm-opt-price { font-size: .68rem; color: var(--ink-faint, #8A7F6C); }
.gm-opt input:checked + .gm-opt-body .gm-opt-name { color: var(--cinnabar); }
.global-model-hint {
margin: 6px 2px 0; font-size: .68rem; color: var(--ink-faint, #8A7F6C);
}
.global-model-loading { padding: 12px; text-align: center; font-size: .74rem; color: var(--ink-faint, #8A7F6C); }
/* —— 任务列表成本汇总条(2026-08-03) —— */
.task-cost-bar {
display: flex; align-items: baseline; gap: 8px;
padding: 8px 12px; margin-bottom: 8px;
background: #FBF7EE; border: 1px solid var(--gold); border-radius: 10px;
}
.task-cost-label { font-size: .7rem; color: var(--ink-faint, #8A7F6C); }
.task-cost-total {
font-size: .9rem; font-weight: 700; color: var(--cinnabar);
/* 2026-08-10 C4:金额数字用 sans + tabular-nums */
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums;
}
.task-cost-hint { font-size: .66rem; color: var(--ink-faint, #8A7F6C); }
/* —— 生成前确认行:当前模型+成本(2026-08-03) —— */
.gen-confirm-line {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 10px; padding: 7px 14px;
background: #fffdf9; border: 1px solid #EDE6D6; border-radius: 20px;
}
.gen-confirm-model {
font-size: .76rem; font-weight: 600; color: var(--ink);
}
.gen-confirm-cost {
font-size: .74rem; font-weight: 700; color: var(--cinnabar);
/* 2026-08-10 C4:金额数字用 sans + tabular-nums */
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums;
}
/* 节点预览弹层里的模型行 */
.node-pv-model {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 20px;
background: #F8F1E2; color: var(--gold-deep);
font-size: .68rem; font-weight: 600;
}
/* —— 对标风格库(2026-08-03 style_refs.js) —— */
.sr-block { margin-top: 12px; }
.sr-toggle { width: 100%; }
.sr-body {
margin-top: 8px; padding: 10px;
background: #fffdf9; border: 1px solid #EDE6D6; border-radius: 12px;
}
.sr-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.sr-title { font-size: .78rem; font-weight: 600; color: var(--ink); }
.sr-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 8px;
}
.sr-card {
position: relative; cursor: pointer; border-radius: 8px; overflow: hidden;
border: 1px solid #EDE6D6; background: #fff; transition: border-color .15s;
}
.sr-card:hover { border-color: var(--gold); }
.sr-thumb {
width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.sr-card-body { padding: 5px 6px; }
.sr-card-name {
display: block; font-size: .68rem; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-card-cat { font-size: .6rem; color: var(--ink-faint, #8A7F6C); }
.sr-card-del {
position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
font-size: .7rem; line-height: 1; cursor: pointer;
}
/* —— 节点风格案例缩略图 v2(2026-08-04:点击灯箱放大查看) —— */
.node-row-sample {
flex: none; width: 40px; height: 40px; object-fit: cover;
border-radius: 8px; border: 1px solid #EDE6D6; margin-left: 8px;
cursor: zoom-in; background: #F8F3E8; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.node-row-sample:hover {
transform: scale(1.15);
border-color: var(--gold);
box-shadow: 0 2px 8px rgba(var(--gold-deep-rgb), .25);
}
/* —— 设置抽屉:模型实测成功率(2026-08-04) —— */
.gm-opt-rate {
display: inline-block; margin-top: 2px;
font-size: .64rem; color: var(--ink-faint, #8A7F6C);
background: #F7F3E9; border-radius: 10px; padding: 0 6px;
}
/* ============================================================
Substrate 质提升级 v1 (2026-08-04, finesse-ui design-dna)
纯视觉层:颗粒质感 + 层次阴影 + 字重对比 + 节奏 —— 零 JS 改动
============================================================ */
/* ① 宣纸颗粒:SVG feTurbulence 噪点,灭掉「平面向量感」(黑名单头号) */
body::after {
content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
pointer-events: none; opacity: .028;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ② 纸面质感:body 背景加极淡暖晕 + 细纹,不再纯色平铺 */
body {
background-image:
radial-gradient(140% 90% at 50% -10%, #FCF9F2 0%, transparent 60%),
radial-gradient(120% 80% at 100% 100%, #F3ECDC 0%, transparent 55%),
url("cloud.svg");
background-size: auto, auto, 320px 320px;
}
/* ③ 面板层次:主面板轻浮起,内嵌面板下沉;阴影全部偏暖不纯黑 */
.panel {
background: linear-gradient(180deg, #FDFBF5 0%, #FAF6EC 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,
0 12px 32px -18px rgba(90, 70, 30, .22);
border-color: #E4D9C2;
}
.param-group, .lib-body, .sr-body {
background: rgba(255, 253, 248, .75);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
/* ④ 字重对比:面板标题从「灰色小字」提为「深色中等」+ 区间数字 tabular */
.angle-title, .lib-title, .sr-title, .param-label {
font-weight: 700; letter-spacing: .02em; color: var(--ink);
}
.app-title {
letter-spacing: .01em;
font-weight: 800;
}
.app-title::after {
content: ''; display: block;
width: 34px; height: 2px; margin-top: 5px;
background: linear-gradient(90deg, var(--cinnabar), var(--gold));
border-radius: 2px;
}
.count, .task-cost-total, .engine-price, .gen-confirm-cost {
font-variant-numeric: tabular-nums;
}
/* ⑤ 按钮/交互:悬停用细腻 ease-out,不用生硬缩放 */
.btn-generate, .node-row-main, .channel-btn, .chip {
transition: transform .18s cubic-bezier(.16,1,.3,1),
box-shadow .18s cubic-bezier(.16,1,.3,1),
background .18s, border-color .18s, color .18s;
}
.btn-generate:hover { transform: translateY(-1px); }
.node-row:hover .node-row-main { transform: translateX(2px); }
/* ⑥ 分割线全部改半透明暖色(禁硬 #333 感) */
.node-row { border-bottom-color: rgba(120, 100, 60, .10) !important; }
/* ⑦ 遮罩/弹层:加极淡颗粒感背衬 + 更柔和的进场 */
.modal, .node-card {
box-shadow: 0 24px 60px -24px rgba(60, 45, 20, .35),
0 1px 0 rgba(255,255,255,.6) inset;
}
/* ============================================================
东方仪式感升级 v2 (2026-08-04, Gold Luxury × 新中式)
印章美学:朱砂方印 + 描金边框 + 宣纸颗粒 —— 纯 CSS 零 JS
============================================================ */
/* ---------- ① 门户:印章式双卡 ---------- */
.portal-card {
position: relative;
background:
radial-gradient(120% 100% at 50% 0%, #FDFBF4 0%, #F5EFE0 58%, #EFE6CF 100%);
border: 1px solid rgba(var(--gold-rgb), .55);
box-shadow: 0 2px 0 rgba(255,255,255,.7) inset,
0 24px 64px -24px rgba(80, 60, 25, .4);
}
.portal-card::before { /* 顶部描金细线 */
content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.portal-title {
font-family: var(--font-serif, "Songti SC", serif);
font-size: 1.5rem; font-weight: 700; letter-spacing: .18em;
text-align: center; margin-bottom: 6px;
}
.portal-sub { text-align: center; }
.portal-choice {
position: relative; overflow: hidden;
background: rgba(255, 253, 247, .88);
border: 1px solid rgba(var(--gold-deep-rgb), .35);
border-radius: 10px;
}
.portal-choice::after { /* 角部淡描金 */
content: ''; position: absolute; top: 8px; right: 8px;
width: 16px; height: 16px; opacity: .35;
border-top: 1px solid var(--gold-deep);
border-right: 1px solid var(--gold-deep);
}
.portal-choice:hover { border-color: var(--gold-deep); box-shadow: 0 10px 28px -10px rgba(var(--gold-deep-rgb),.35); }
.portal-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; margin-bottom: 12px;
font-size: 1.35rem; font-style: normal;
background: linear-gradient(160deg, var(--cinnabar) 0%, var(--cinnabar-deep) 100%);
color: #FBF3E3; border-radius: 9px;
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
0 4px 10px -4px rgba(126, 32, 27, .55);
}
.portal-choice-b .portal-ico {
background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
0 4px 10px -4px rgba(140, 106, 47, .55);
}
.portal-rec {
padding: 2px 9px; border-radius: 999px;
background: linear-gradient(120deg, var(--cinnabar), var(--cinnabar-deep));
color: #FBF3E3; letter-spacing: .08em;
box-shadow: 0 2px 6px -2px rgba(126,32,27,.5);
}
/* ---------- ② 区块标题:朱砂方印数字 + 描金分隔 ---------- */
.panel-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--gold-deep-rgb), .28);
}
.head-index {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; flex: none;
font-family: var(--font-serif, serif); font-size: .85rem; font-weight: 700;
color: #FBF3E3;
background: linear-gradient(160deg, var(--cinnabar) 0%, var(--cinnabar-deep) 100%);
border-radius: 6px;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 6px -2px rgba(126,32,27,.5);
}
.panel-head::after { /* 标题后的描金延长线 */
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(var(--gold-rgb),.5), transparent);
}
/* ---------- ③ 生成按钮:朱砂大印 ---------- */
.btn-generate {
position: relative;
background: linear-gradient(160deg, var(--cinnabar-lit) 0%, var(--cinnabar) 55%, var(--cinnabar-deep) 100%);
border: 1px solid rgba(var(--gold-rgb), .65);
box-shadow: 0 2px 0 rgba(255,255,255,.22) inset,
0 12px 28px -10px rgba(126, 32, 27, .6);
letter-spacing: .22em;
}
.btn-generate-seal {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; font-size: .8rem;
border: 1px solid rgba(251, 243, 227, .75); border-radius: 5px;
background: rgba(251, 243, 227, .12);
}
/* ---------- ④ 产品库/风格库入口:描金虚线 + 印章箭头 ---------- */
.sr-toggle {
border: 1px dashed rgba(var(--gold-deep-rgb), .5) !important;
background: rgba(255, 253, 247, .6) !important;
transition: border-color .18s, background .18s;
}
.sr-toggle:hover {
border-color: var(--gold-deep) !important;
background: #FFFDF6 !important;
}
/* ---------- ⑤ 节点行:选中/悬停的印章反馈 ---------- */
.node-row:hover {
background: linear-gradient(90deg, rgba(var(--cinnabar-rgb), .05), transparent 60%);
}
.node-row .node-row-step {
background: linear-gradient(160deg, var(--cinnabar), var(--cinnabar-deep));
color: #FBF3E3;
}
/* ---------- ⑥ 上传槽:描金虚线框 ---------- */
.upload-slot, .slot {
border: 1.5px dashed rgba(var(--gold-deep-rgb), .45) !important;
border-radius: 10px !important;
transition: border-color .18s, box-shadow .18s;
}
.upload-slot:hover, .slot:hover { border-color: var(--gold-deep) !important; }
/* ---------- ⑦ 任务卡/图库:朱砂时间戳 + 描金角标 ---------- */
.task-item { border-radius: 10px; }
.task-item:hover { box-shadow: 0 6px 18px -8px rgba(80, 60, 25, .25); }
.gallery-img { border-radius: 8px; }
/* ============================================================
操作逻辑增强 v2b (2026-08-04)
完成态统一东方色系 + 悬停/聚焦反馈 + 步骤脉络
============================================================ */
/* ① 上传完成态:朱砂描金(替代绿框,统一色系) */
.upload-slot.is-done {
border-color: var(--cinnabar) !important;
border-style: solid !important;
box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .45), 0 4px 14px -6px rgba(var(--cinnabar-rgb), .35);
}
.upload-slot.is-done::after {
content: '✓ 已就绪'; position: absolute; right: 8px; top: 8px;
font-size: .62rem; letter-spacing: .06em; padding: 2px 8px;
background: linear-gradient(160deg, var(--cinnabar), var(--cinnabar-deep));
color: #FBF3E3; border-radius: 999px;
box-shadow: 0 2px 6px -2px rgba(126, 32, 27, .5);
}
.upload-slot { position: relative; }
/* ② 节点行:悬停微上浮 + 名称微移(操作感) */
.node-row { transition: background .15s, box-shadow .15s, transform .15s; }
.node-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -8px rgba(80, 60, 25, .3); }
.node-row-main { transition: transform .18s cubic-bezier(.16,1,.3,1); }
.node-row:hover .node-row-main { transform: translateX(3px); }
/* ③ 全站按钮:统一聚焦环(触达逻辑,键盘可达) */
button:focus-visible, .chip:focus-visible, .node-op:focus-visible {
outline: 2px solid var(--cinnabar);
outline-offset: 2px;
}
/* ④ 品类 chip:选中 = 朱砂填充 + 描金(当前可能是淡色底) */
.chip.is-active {
background: linear-gradient(160deg, var(--cinnabar), var(--cinnabar-deep)) !important;
color: #FBF3E3 !important;
border-color: var(--gold-deep) !important;
box-shadow: 0 2px 8px -3px rgba(126, 32, 27, .5);
}
/* ============================================================
高级定制精简 v3 (2026-08-04)
去一键预设/模型参数后:风格变量收紧、按钮缩小、密度提升
============================================================ */
/* ① 风格变量:整体缩小(标题行 + chip 更紧凑) */
.dim-collapse-summary { padding: 8px 2px !important; }
.dim-collapse-label { font-size: .9rem; }
.dim-collapse-body .param-group { margin-bottom: 8px; }
.dim-collapse-body .param-label {
font-size: .75rem; color: var(--ink-faint, #8A7F6C);
margin-bottom: 4px; letter-spacing: .06em;
}
.dim-collapse-body .chip {
padding: 5px 12px !important; font-size: .78rem !important;
min-height: 32px !important;
}
/* ② 全站按钮/控件整体缩小一档(触达仍≥40px) */
.chip { padding: 6px 14px; font-size: .8rem; min-height: 36px; }
.chip-row { gap: 8px; }
.param-label { font-size: .8rem; }
.param-group { padding: 10px 0; }
.stepper-btn { width: 36px; height: 36px; font-size: 1rem; }
.stepper-input { height: 36px; font-size: .9rem; width: 52px; }
.engine-summary { padding: 10px 14px !important; }
.btn-generate { padding: 13px 20px !important; font-size: .95rem !important; }
.engine-group { margin-top: 4px; }
/* ③ 高级定制面板整体更紧凑 */
body.mode-b .upload-panel { padding-bottom: 8px; }
body.mode-b .param-panel { gap: 2px; }
/* —— LLM 模型透明化按钮 + 分析等待秒数(2026-08-04) —— */
.analyze-llm {
margin-left: auto;
font-size: .72rem !important;
border: 1px dashed rgba(var(--gold-deep-rgb), .5) !important;
background: rgba(255, 253, 247, .7) !important;
color: var(--ink-soft, #5A5044) !important;
}
.analyze-llm:hover { border-color: var(--gold-deep) !important; color: var(--ink) !important; }
.desc-sec {
font-variant-numeric: tabular-nums;
color: var(--gold-deep);
font-weight: 700;
}
/* ============================================================
三大功能区 v4 (2026-08-04):快捷节点 / 复刻风格 / 单图变量
============================================================ */
/* 路 C 单图变量:节点列表 + 参数区(风格变量)都显示 */
body.mode-c .node-app-block { display: block; }
body.mode-c .param-panel { display: block; }
body.mode-c .dim-collapse { display: block; }
body.mode-c .sr-block { display: none; } /* 单图变量不需要对标风格库 */
/* 路 B 复刻风格:聚焦对标复刻,节点区/风格变量隐藏(JS 已控制 dimCollapse.hidden) */
/* 2026-08-10 前端优化 B2:勾选「增加变量」时 JS 加 .show-vars 类,变量区可见
(此前 display:none 硬隐藏,勾选开关毫无视觉反馈=死开关) */
body.mode-b .dim-collapse { display: none; }
body.mode-b .dim-collapse.show-vars { display: block !important; }
body.mode-b .node-app-block { display: none; }
/* 2026-08-10 B7:成员身份行(header-actions 内,克制小字,不抢按钮) */
.user-badge {
font-size: 12px;
color: var(--text-soft, rgba(247, 237, 230, .55));
margin-right: 10px;
white-space: nowrap;
}
/* 2026-08-10 规格参数区(产品库表单,v2 动态行) */
.lib-spec { margin: 10px 0 4px; padding: 10px; border: 1px dashed var(--line-soft, #E5DCC8); border-radius: 10px; background: rgba(248, 243, 232, .5); }
.lib-spec-label { display: block; font-size: .78rem; color: var(--ink-soft, #6B6152); margin-bottom: 8px; letter-spacing: .04em; }
.lib-spec-grid { display: flex; flex-direction: column; gap: 6px; }
.lib-spec-row { display: flex; align-items: center; gap: 6px; }
.lib-spec-row input { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--line, #E5DCC8); border-radius: 6px; background: #fff; font-size: .85rem; }
.lib-spec-row .spec-name, .lib-spec-row .spec-value {
height: 32px; border: 1px solid var(--hairline, rgba(0,0,0,.14));
border-radius: 6px; padding: 0 10px; font-size: .78rem;
color: var(--ink); background: #fff;
box-sizing: border-box;
}
.lib-spec-row .spec-name {
flex: 0 0 40%; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
padding-right: 26px;
}
.lib-spec-row .spec-value { flex: 1; min-width: 0; }
.lib-spec-row .spec-name:focus, .lib-spec-row .spec-value:focus {
border-color: var(--cinnabar); outline: none;
}
.lib-spec-row ::placeholder { color: var(--ink-faint, #8A7F6C); font-weight: 400; }
.lib-spec-row input:focus { outline: 2px solid rgba(var(--gold-rgb), .5); border-color: transparent; }
.spec-del {
flex: none; width: 26px; height: 26px; border: none; background: transparent;
color: var(--ink-faint, #8A7F6C); font-size: .9rem; cursor: pointer;
border-radius: 6px; line-height: 1; transition: background .15s, color .15s;
}
.spec-del { background: rgba(0,0,0,.04); }
.spec-del:hover { background: rgba(0,0,0,.09); color: var(--ink); }
.spec-del:hover { background: rgba(var(--cinnabar-rgb), .08); color: var(--cinnabar); }
.spec-add {
margin-top: 10px; font-size: .76rem; padding: 6px 12px;
border: 1px solid var(--hairline, rgba(0,0,0,.14)); border-radius: 6px;
background: transparent; color: var(--ink-soft, #5A5044); cursor: pointer;
transition: border-color .18s, color .18s;
}
.spec-add:hover { border-color: var(--gold); color: var(--gold); }
.spec-add:hover { background: rgba(var(--gold-rgb), .1); }
.lib-spec-tip { margin: 8px 0 0; font-size: .7rem; color: var(--ink-faint, #8A7F6C); line-height: 1.5; }
.lib-card-spec { display: block; margin-top: 4px; font-size: .7rem; color: var(--gold-deep); font-weight: 600; letter-spacing: .02em; }
/* ═══════ 2026-08-10 产品栏 + 全屏产品库 ═══════ */
.prod-bar {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px; padding: 8px 12px;
background: var(--panel, #FFFDF6); border: 1px solid var(--line-soft, #E5DCC8);
border-radius: 12px;
}
.prod-bar-main {
flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
background: none; border: none; padding: 4px; cursor: pointer; text-align: left;
border-radius: 8px;
}
.prod-bar-main:hover { background: rgba(var(--gold-rgb), .08); }
.prod-bar-thumb {
width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none;
background: var(--thumb-bg, #F3EEDF); display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line-soft, #E5DCC8);
}
.prod-bar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-bar-thumb-empty { font-size: 1.3rem; color: var(--ink-faint, #8A7F6C); }
.prod-bar-info { min-width: 0; }
.prod-bar-name {
display: block; font-size: .95rem; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-bar-spec {
display: block; font-size: .72rem; color: var(--ink-faint, #8A7F6C);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.prod-bar-arrow { color: var(--ink-faint, #8A7F6C); font-size: .8rem; flex: none; }
.prod-bar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.prod-bar-clear {
width: 26px; height: 26px; border: none; background: transparent; color: var(--ink-faint, #8A7F6C);
font-size: 1rem; cursor: pointer; border-radius: 6px;
}
.prod-bar-clear:hover { background: rgba(var(--cinnabar-rgb), .08); color: var(--cinnabar); }
/* 全屏覆盖层 */
.lib-overlay {
/* 2026-08-11 锁视口(全浏览器兼容版):必须用 top/left/right/bottom 四值
显式定位 —— inset 简写和 dvh 都是新特性,微信旧 WebView 不认,
会导致 fixed 定位失效 → 覆盖层被内容撑高 → 滚动时头部滚走被图片盖。
高度三级兜底:100% → 100vh → 100dvh(新浏览器用最后的)。 */
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 90;
height: 100%; max-height: 100%;
height: 100vh; max-height: 100vh;
height: 100dvh; max-height: 100dvh;
overflow: hidden;
background: var(--bg, #FAF6EC);
display: flex; flex-direction: column;
}
html.lib-open, body.lib-open { overflow: hidden; height: 100%; } /* 文档禁滚,固定层才可靠 */
.lib-overlay-head {
display: flex; align-items: center; gap: 10px; padding: 12px 16px;
border-bottom: 1px solid var(--line-soft, #E5DCC8); background: var(--panel, #FFFDF6);
flex: none; position: relative; z-index: 5;
}
.lib-overlay-back {
background: none; border: 1px solid var(--line, #E5DCC8); border-radius: 8px;
padding: 6px 12px; font-size: .8rem; color: var(--ink-soft, #6B6152); cursor: pointer;
}
.lib-overlay-back:hover { border-color: var(--gold); color: var(--gold-deep); }
.lib-overlay-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); }
.lib-overlay-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.lib-cats-col {
width: 130px; flex: none; border-right: 1px solid var(--line-soft, #E5DCC8);
padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.lib-cat-col {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding: 9px 10px; border: none; background: none; border-radius: 8px;
font-size: .85rem; color: var(--ink-soft, #6B6152); cursor: pointer; text-align: left;
}
.lib-cat-col em { font-style: normal; font-size: .7rem; color: var(--ink-faint, #8A7F6C); }
.lib-cat-col:hover { background: rgba(var(--gold-rgb), .08); }
.lib-cat-col.is-active { background: var(--gold-bg, #F5EBD5); color: var(--gold-deep); font-weight: 600; }
.lib-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.lib-cats {
display: flex; gap: 6px; padding: 10px 16px 4px; flex-wrap: wrap;
}
.lib-cat {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; border: 1px solid var(--line, #E5DCC8); border-radius: 999px;
background: #fff; font-size: .78rem; color: var(--ink-soft, #6B6152); cursor: pointer;
}
.lib-cat em { font-style: normal; font-size: .68rem; color: var(--ink-faint, #8A7F6C); }
.lib-cat.is-active { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.lib-cat.is-active em { color: rgba(255, 255, 255, .8); }
.lib-grid {
flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
grid-auto-rows: max-content; /* 2026-08-11 关键:auto 行高在 flex 内容+百分比 padding 下解析成 min-content(实测 37.7px 塌陷),max-content 强制按内容高度 */
gap: 12px; align-content: start;
-webkit-overflow-scrolling: touch;
}
.lib-card { min-width: 0; }
/* 竖版卡片:正方形图在上,信息在下(2026-08-11 重排) */
.lib-card {
position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
background: #fff; border: 1px solid var(--line-soft, #E5DCC8);
transition: transform .15s ease, box-shadow .15s ease;
display: flex; flex-direction: column;
}
.lib-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--ink-rgb), .1); }
.lib-card:active { transform: scale(.97); }
.lib-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .3); }
.lib-card .lib-thumb {
/* 2026-08-11 占位(终极兼容版):padding-top:100% 老式比例占位,
任何浏览器/任何加载时序都不塌陷。aspect-ratio 在某些 flex 场景
会被 flex-shrink 压成 0(实测 12px),padding hack 免疫。 */
position: relative; width: 100%; padding-top: 100%;
flex: none; overflow: hidden;
background: linear-gradient(135deg, #F7F2E5, #EFE7D3);
}
.lib-card .lib-thumb img {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.lib-card.no-img .lib-thumb { display: none; }
.lib-card-mat {
position: absolute; top: 8px; right: 8px; z-index: 2;
background: rgba(var(--ink-rgb), .72); color: #fff; font-size: .66rem;
padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(2px);
}
.lib-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.lib-card-name {
display: block; font-size: .84rem; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-card-cat {
display: inline-block; align-self: flex-start; font-size: .66rem;
color: var(--gold-deep); background: var(--gold-bg, #F5EBD5);
padding: 2px 8px; border-radius: 999px; margin-top: 2px;
}
.lib-card-spec {
display: block; margin-top: 3px; font-size: .7rem; color: var(--ink-soft, #6B6152);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-card-del {
position: absolute; top: 8px; left: 8px; width: 24px; height: 24px;
border: none; border-radius: 6px; background: rgba(var(--ink-rgb), .6); color: #fff;
font-size: .9rem; cursor: pointer; line-height: 1;
}
.lib-card-del:hover { background: var(--cinnabar); }
.lib-empty {
grid-column: 1 / -1; text-align: center; color: var(--ink-faint, #8A7F6C);
padding: 60px 20px; font-size: .9rem;
}
/* 2026-08-11 按需加载按钮 */
.lib-more {
grid-column: 1 / -1; margin: 6px auto 10px; padding: 10px 28px;
font-size: .82rem; color: var(--gold-deep);
background: var(--gold-bg, #F5EBD5); border: 1px solid var(--gold);
border-radius: 999px; cursor: pointer; text-align: center;
transition: background .15s ease;
}
.lib-more:hover { background: #EEDFC0; }
.lib-more:disabled { opacity: .6; cursor: default; }
/* 详情抽屉(右滑出) */
.lib-detail {
position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
background: var(--panel, #FFFDF6); border-left: 1px solid var(--line-soft, #E5DCC8);
display: flex; flex-direction: column; z-index: 5;
box-shadow: -8px 0 24px rgba(var(--ink-rgb), .08);
}
.lib-detail-head {
display: flex; align-items: center; gap: 8px; padding: 12px 14px;
border-bottom: 1px solid var(--line-soft, #E5DCC8); flex-wrap: wrap;
}
.lib-detail-name { font-size: .95rem; font-weight: 700; color: var(--ink); }
.lib-detail-cat { font-size: .72rem; color: var(--gold-deep); background: var(--gold-bg, #F5EBD5); padding: 2px 8px; border-radius: 999px; }
.lib-detail-body { flex: 1; overflow-y: auto; padding: 14px; }
.lib-detail-gallery { margin-bottom: 14px; }
.lib-detail-main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #F3EEDF; }
.lib-detail-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lib-detail-thumb {
width: 56px; height: 56px; object-fit: cover; border-radius: 8px; cursor: pointer;
border: 2px solid transparent; opacity: .8;
}
.lib-detail-thumb.is-active { border-color: var(--gold); opacity: 1; }
.lib-detail-section { margin-bottom: 14px; }
.lib-detail-label {
display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
margin-bottom: 8px;
}
.lib-detail-label em { font-style: normal; font-size: .7rem; color: var(--ink-faint, #8A7F6C); font-weight: 400; }
.lib-detail-material { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lib-mat { position: relative; width: 72px; height: 72px; }
.lib-mat img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft, #E5DCC8); }
.lib-mat-del {
position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
border: none; border-radius: 50%; background: rgba(var(--cinnabar-rgb), .85); color: #fff;
font-size: .75rem; cursor: pointer; line-height: 1;
}
.lib-mat-empty { width: 100%; font-size: .72rem; color: var(--ink-faint, #8A7F6C); padding: 6px 0; }
.lib-detail-desc { font-size: .78rem; color: var(--ink-soft, #6B6152); line-height: 1.6; white-space: pre-wrap; background: var(--gold-bg-soft, #FAF5E8); padding: 10px; border-radius: 8px; }
.lib-detail-foot {
display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft, #E5DCC8);
background: var(--panel, #FFFDF6);
}
.lib-detail-foot .angle-dossier-btn { flex: 1; }
.lib-detail-foot .btn-generate { flex: 1; margin: 0; }
/* 移动端:侧栏折叠为横向 chips,抽屉全宽 */
@media (max-width: 640px) {
.lib-cats-col { display: none; }
.lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 8px; padding: 12px 12px; }
.lib-card { min-width: 0; }
.lib-card-body { padding: 7px 8px 9px; }
.lib-card-name { font-size: .74rem; }
.lib-card-cat { font-size: .6rem; padding: 1px 6px; }
.lib-card-spec { font-size: .64rem; margin-top: 2px; }
.prod-bar { flex-wrap: wrap; }
.prod-bar-actions { width: 100%; justify-content: flex-end; }
.lib-detail { width: 100%; }
/* 移动端:分类横滑一行(以分类为主,简洁) */
.lib-overlay-head { padding: 10px 12px; }
.lib-cats { flex-wrap: nowrap; overflow-x: auto; align-items: center; padding: 6px 12px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lib-cats::-webkit-scrollbar { display: none; }
.lib-grid::-webkit-scrollbar { display: none; }
.lib-detail-body::-webkit-scrollbar { display: none; }
.lib-cat { flex: none; }
/* 横滑行里的「新建分组」按钮:侧栏的 block/100% 样式会把它挤成竖长条(文本换行),
再靠 align-items:stretch 把整条分类撑到 111px。改回 inline chip,与 .lib-cat 等高。 */
.lib-cats .lib-cat-add { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 0 0 auto; margin-top: 0; padding: 6px 12px; text-align: center; white-space: nowrap; border-radius: 999px; }
/* 2026-08-11 修复(正确滚动结构):只有卡片网格滚动,分类行固定。
之前 body 整体滚动 → 分类行跟着滚走、卡片盖住分类行(用户反复反馈的
「产品库下方导航栏被图片盖住」真根因)。
grid-auto-rows:max-content 已修内容高度,grid 内部滚动不再有空白问题。 */
.lib-overlay-body { overflow: hidden; }
.lib-main-col { overflow: hidden; flex: 1; min-width: 0; min-height: 0; }
.lib-grid { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; height: auto; }
}
/* ═══════ 门户三卡布局:三张等宽 ═══════ */
.portal-choices { grid-template-columns: repeat(3, 1fr); }
.portal-choice-c .portal-ico {
background: linear-gradient(160deg, #B0803A 0%, #8A5F1E 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 10px -4px rgba(138, 95, 30, .55);
}
/* 复刻风格区提示:标图区强调 */
body.mode-b .ref-gate { margin-top: 4px; }
/* ============================================================
第四功能区 · 东方美学模特 (2026-08-04)
============================================================ */
/* 路 D:只显示模特展示专属块 + 参数区(上传/比例/张数/生成) */
body.mode-d .node-app-block { display: none; } /* 隐藏路A的快捷节点块 */
body.mode-d #nodeAppBlockD { display: block; } /* 显示模特展示块 */
body.mode-d .param-panel { display: block; }
body.mode-d .dim-collapse { display: none; } /* 模特/场景已焊死,零参数 */
body.mode-d .dim-collapse.show-vars { display: block !important; } /* 2026-08-10 B2:勾选「增加变量」后可见 */
body.mode-d .sr-block { display: none; } /* 不需要对标风格库 */
body.mode-d .param-panel .btn-generate { display: none; } /* 2026-08-10 B4:双 CTA 去重,只留壹区「一键全部镜头」 */
/* 默认隐藏路D块(由 mode-d 打开) */
#nodeAppBlockD { display: none; }
/* 一键生成全部镜头按钮:与开始生成同规格,翡翠绿区分 */
.btn-generate-all {
margin-top: 14px;
background: linear-gradient(160deg, #3E7A5E 0%, #2C5C46 100%) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px rgba(44, 92, 70, .6) !important;
}
.btn-generate-all:hover { filter: brightness(1.08); }
/* 门户四卡:四张等宽 */
.portal-choices { grid-template-columns: repeat(4, 1fr); }
.portal-choice-d .portal-ico {
background: linear-gradient(160deg, #3E7A5E 0%, #2C5C46 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 10px -4px rgba(44, 92, 70, .55);
}
.portal-new {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: .66rem; font-style: normal; font-weight: 600;
color: #fff; background: var(--cinnabar); border-radius: 999px;
vertical-align: 1px; letter-spacing: .04em;
}
/* ═══════════════════════════════════════════
ui-polish.css 合并入(2026-08-11 刀②:双源合一)
原文件独立加载,现追加到 style.css 末尾 —— 层叠顺序与之前完全一致,
视觉零变化;以后改样式只改 style.css。
═══════════════════════════════════════════ */
/* ============================================================
ui-polish.css —— 中式纸墨工作台 · 视觉降噪层 (2026-08-06)
------------------------------------------------------------
原则(finesse product-register):
· 零逻辑改动:只覆盖视觉属性,不碰 HTML 结构/JS 行为
· 可回退:本文件独立,删掉即还原
· 统一:间距 4px 网格 / 圆角 3 档 / 阴影中性化 / 边框微透明
· 降噪:区块层级清晰、行式列表 hover 显隐操作、按钮三态统一
============================================================ */
:root {
/* 圆角收敛为 3 档(8/14/20) */
--r-sm: 6px;
--r: 12px;
--r-lg: 18px;
/* 阴影中性化:去金色、降不透明度 */
--shadow: 0 1px 2px rgba(var(--ink-rgb),.04), 0 8px 24px -12px rgba(var(--ink-rgb),.18);
--shadow-sm: 0 1px 2px rgba(var(--ink-rgb),.05), 0 3px 10px -4px rgba(var(--ink-rgb),.12);
--shadow-lg: 0 2px 4px rgba(var(--ink-rgb),.05), 0 20px 48px -20px rgba(var(--ink-rgb),.28);
/* 边框统一微透明,去硬边 */
--line: rgba(var(--ink-rgb),.10);
--line-soft: rgba(var(--ink-rgb),.06);
}
/* ---------- 1. 页面底纸:更干净的纸墨感 ---------- */
body {
background:
radial-gradient(140% 90% at 50% 0%, #FBF8F1 0%, var(--paper) 62%, #EFE8D8 100%) fixed;
letter-spacing: .01em;
}
/* ---------- 2. 顶栏:品牌突出,操作弱化 ---------- */
.app-header {
border-bottom-color: transparent;
background: rgba(251,248,241,.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.app-header::after { opacity: .5; }
.app-title {
letter-spacing: .08em;
font-weight: 700;
}
/* ---------- 3. 面板:分区清晰,间距呼吸 ---------- */
.panel {
border-radius: var(--r-lg);
box-shadow: var(--shadow);
border: 1px solid var(--line-soft);
background: rgba(255,253,249,.86);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.panel-head {
letter-spacing: .06em;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
}
.head-index {
opacity: .55; font-size: .72em; letter-spacing: .1em;
margin-right: 8px;
}
/* ---------- 4. 上传区:卡片化,层级分明 ---------- */
.upload-grid { gap: 14px; }
.upload-slot {
border-radius: var(--r);
border: 1.5px dashed rgba(var(--gold-deep-rgb),.35);
background: rgba(251,248,241,.6);
transition: border-color .2s, box-shadow .2s, background .2s;
}
.upload-slot:hover, .upload-slot:focus-within {
border-color: var(--gold-deep);
background: rgba(255,253,249,.92);
box-shadow: 0 0 0 3px rgba(var(--gold-deep-rgb),.08);
}
.upload-placeholder { gap: 4px; }
.upload-icon {
font-size: 22px; line-height: 1;
color: var(--gold-deep);
opacity: .8;
}
.upload-label { font-weight: 600; letter-spacing: .04em; }
.upload-hint { font-size: 12px; color: var(--ink-faint); }
/* ---------- 5. 产品库/风格库:折叠条简洁化 ---------- */
.sr-toggle {
border-radius: var(--r);
border: 1px solid var(--line-soft);
background: rgba(251,248,241,.7);
transition: border-color .18s, background .18s;
}
.sr-toggle:hover {
border-color: rgba(var(--gold-deep-rgb),.5);
background: rgba(255,253,249,.95);
}
.lib-body { border-radius: var(--r); }
/* ---------- 6. 节点列表:行式降噪 ---------- */
.node-flow { margin-bottom: 20px; }
.node-flow-head { margin-bottom: 8px; }
.node-row {
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: border-color .16s, background .16s, box-shadow .16s;
padding-left: 10px;
}
.node-row:hover {
background: rgba(251,248,241,.9);
border-color: var(--line-soft);
box-shadow: var(--shadow-sm);
}
/* 操作按钮 hover 显隐(降噪:平时只看见名字,悬停才见编辑/复制/删除) */
.node-row-ops { opacity: 0; transition: opacity .16s; }
.node-row:hover .node-row-ops, .node-row:focus-within .node-row-ops { opacity: 1; }
.node-row-main { gap: 10px; }
.node-row-ico {
width: 30px; height: 30px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(var(--gold-deep-rgb),.10);
color: var(--gold-deep);
font-size: 15px;
flex: none;
}
.node-row-name { font-weight: 500; letter-spacing: .02em; }
.node-row-badge {
border-radius: 4px;
background: rgba(var(--ink-rgb),.05);
color: var(--ink-faint);
font-size: 11px;
padding: 1px 6px;
}
.node-row-mode {
color: var(--ink-faint); font-size: 11px;
padding: 1px 6px; border-radius: 4px;
background: rgba(var(--ink-rgb),.04);
}
.node-op {
border-radius: 6px;
color: var(--ink-faint);
transition: color .14s, background .14s;
}
.node-op:hover { color: var(--cinnabar); background: rgba(var(--cinnabar-rgb),.08); }
.node-op-del:hover { color: var(--danger); background: rgba(var(--cinnabar-rgb),.1); }
/* ---------- 7. 按钮体系:三态统一(朱砂主/描边次/幽灵) ---------- */
.btn-generate, .btn-primary, .angle-dossier-btn[data-primary], .btn-shoot-all {
border-radius: var(--r-sm);
box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-sm);
transition: transform .12s ease, box-shadow .16s, filter .16s;
letter-spacing: .04em;
}
.btn-generate:active, .btn-primary:active, .angle-dossier-btn:active {
transform: translateY(1px);
box-shadow: none;
}
.angle-add, .btn-ghost {
border-radius: var(--r-sm);
border-color: var(--line);
color: var(--ink-soft);
transition: border-color .16s, color .16s, background .16s;
}
.angle-add:hover, .btn-ghost:hover {
border-color: var(--gold-deep);
color: var(--cinnabar-deep);
background: rgba(var(--gold-deep-rgb),.06);
}
/* ---------- 8. 建档/质检状态:克制徽章 ---------- */
.angle-state {
border-radius: 999px;
padding: 2px 10px;
font-size: 11px;
background: rgba(var(--ink-rgb),.05);
color: var(--ink-faint);
letter-spacing: .03em;
}
.angle-dossier-btn {
border-radius: var(--r-sm);
transition: border-color .16s, background .16s, color .16s;
}
/* ---------- 9. 门户:纸墨质感微调(已不错,锦上添花) ---------- */
.portal-card {
border-radius: 18px;
}
.portal-choice {
border-radius: 12px;
transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.portal-choice:hover {
border-color: rgba(var(--gold-deep-rgb),.6);
box-shadow: 0 2px 4px rgba(var(--ink-rgb),.04), 0 10px 28px -12px rgba(var(--gold-deep-rgb),.22);
transform: translateY(-1px);
background: rgba(255,253,249,.98);
}
.portal-name { letter-spacing: .05em; }
.portal-desc { color: var(--ink-faint); line-height: 1.6; }
/* ---------- 10. 弹层/抽屉:去廉价阴影 ---------- */
.modal-card, .drawer, [class*="modal"] {
box-shadow: var(--shadow-lg);
border-radius: var(--r-lg);
border-color: var(--line-soft);
}
/* ---------- 11. 触控友好:关键操作 ≥44px ---------- */
.node-row-main, .sr-toggle, .angle-add,
.btn-generate, .angle-dossier-btn, .node-op, .channel-tab {
min-height: 44px;
}
.channel-tab { border-radius: var(--r-sm); }
/* ---------- 12. 动效尊重系统(减动效偏好时全部静止) ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ---------- 13. 移动端(≤720px):间距收紧、操作触达 ---------- */
@media (max-width: 720px) {
.panel { border-radius: var(--r); box-shadow: none; border-color: var(--line-soft); }
.node-row { padding-left: 8px; }
.node-row-ops { opacity: 1; } /* 触屏没有 hover,操作常显 */
.app-header { padding-top: calc(10px + var(--sa-t)); }
.portal-card { border-radius: 14px; padding: 24px 18px 20px; }
.upload-slot { min-height: 96px; }
}
/* ---------- 14. 任务列表:信息分级(2026-08-06 v2) ---------- */
.task-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: border-color .16s, background .16s;
}
.task-item:hover {
background: rgba(251,248,241,.92);
border-color: var(--line-soft);
}
.task-thumb {
border-radius: 10px;
flex: none;
}
.task-thumb-zoom {
width: 56px; height: 56px;
object-fit: cover;
}
.task-info {
flex: 1;
min-width: 0; /* 允许文字截断,不挤爆行 */
display: flex;
flex-direction: column;
gap: 4px;
}
.task-meta {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.45;
}
.task-meta-main {
font-family: var(--font-serif, "Songti SC", serif);
font-size: 15px;
font-weight: 600;
color: var(--ink);
letter-spacing: .03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-meta-sub {
font-size: 12px;
color: var(--ink-faint);
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-meta-model {
display: inline-block;
max-width: 100%;
}
.task-status {
align-self: flex-start;
border-radius: 999px;
padding: 2px 10px;
font-size: 11px;
letter-spacing: .04em;
background: rgba(var(--ink-rgb),.05);
color: var(--ink-faint);
}
.task-status.status-done { background: rgba(92,122,82,.12); color: #4A6540; }
.task-status.status-running { background: rgba(var(--gold-deep-rgb),.14); color: var(--gold-deep); }
.task-status.status-failed { background: rgba(var(--cinnabar-rgb),.1); color: var(--danger); }
.task-status.status-pending { background: rgba(var(--ink-rgb),.05); color: var(--ink-soft); }
.task-foot {
display: flex;
flex-direction: column;
gap: 6px;
flex: none;
}
.task-foot .btn-mini, .task-foot .btn-save {
min-height: 32px;
padding: 4px 12px;
font-size: 12px;
border-radius: 8px;
white-space: nowrap;
}
.task-err {
font-size: 11px;
color: var(--danger);
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-prog { margin-top: 2px; }
/* ---------- 15. 节点列表:统一单行结构(2026-08-06) ----------
修复:flex-wrap 导致长名节点操作按钮掉到第二行(双行混乱) */
.node-row {
display: flex !important;
align-items: center;
flex-wrap: nowrap !important;
gap: 6px;
min-height: 56px;
padding: 4px 6px;
}
.node-row-main {
flex: 1 1 auto;
min-width: 0; /* 允许名字截断 */
min-height: 44px;
padding: 0 8px;
}
.node-row-name {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.node-row-ico {
width: 26px; height: 26px;
flex: none;
border-radius: 7px;
background: rgba(var(--gold-deep-rgb),.10);
color: var(--gold-deep);
}
.node-row-badge {
flex: none;
white-space: nowrap;
}
.node-row-mode {
flex: none;
white-space: nowrap;
margin-left: auto; /* 推到底部信息位 */
}
.node-row-sample {
flex: none;
width: 40px; height: 40px;
}
.node-row-ops {
flex: none;
white-space: nowrap;
padding-right: 4px;
}
.node-op {
width: 36px; height: 36px;
flex: none;
}
/* 触屏:操作常显但弱化,不抢视觉 */
@media (hover: none) {
.node-row-ops { opacity: 1 !important; }
.node-op { color: var(--ink-faint); font-size: 15px; }
}
/* ---------- 16. 任务详情弹窗(2026-08-06) ---------- */
.task-detail-card { width: min(440px, 92vw); }
.task-detail-card .modal-body { padding: 4px 20px 16px; }
.td-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 13px;
line-height: 1.5;
}
.td-row:last-child { border-bottom: none; }
.td-k {
color: var(--ink-faint);
flex: none;
letter-spacing: .03em;
}
.td-v {
color: var(--ink);
text-align: right;
word-break: break-all;
}
.td-err .td-v { color: var(--danger); }
/* 任务详情弹窗内部:收紧间距 */
.task-detail-card .modal-body { gap: 2px; padding: 4px 20px 8px; }
.task-detail-card .modal-header { margin-bottom: 10px; padding: 16px 20px 0; }
.task-detail-card .modal-footer { margin-top: 14px; padding: 0 20px 18px; }
/* ---------- 19. 深度审计 P0 修复(2026-08-06):门户/图标/按钮收敛 ---------- */
/* P0-3:门户手机 2×2,桌面 4 列保留 */
.portal-choices {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 520px) {
.portal-choices { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.portal-choice { min-height: 118px; padding: 12px 10px; }
.portal-desc { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; }
.portal-name { font-size: 14px; }
}
/* P0-4:门户图标统一 朱砂(a/c)/金(b/d) 双色,禁翡翠绿/琥珀 */
.portal-choice-a .portal-ico, .portal-choice-c .portal-ico {
background: linear-gradient(160deg, var(--cinnabar-lit) 0%, var(--cinnabar-deep) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 10px -4px rgba(var(--cinnabar-deep-rgb),.5);
}
.portal-choice-b .portal-ico, .portal-choice-d .portal-ico {
background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 10px -4px rgba(var(--gold-deep-rgb),.5);
}
/* 一键生成全部镜头:并入朱砂主按钮体系(翡翠绿移出) */
.btn-generate-all {
background: linear-gradient(160deg, var(--cinnabar-lit) 0%, var(--cinnabar-deep) 100%) !important;
box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, var(--shadow-sm) !important;
font-family: var(--font-serif, "Songti SC", serif);
letter-spacing: .06em;
}
.btn-generate-all:hover { filter: brightness(1.08); }
/* 渠道 tab 高亮:朱砂淡染(替换 Material 绿) */
.channel-tab.is-active {
background: var(--cinnabar) !important;
border-color: var(--cinnabar) !important;
color: #FBF3E3 !important;
}
/* mode-b/d 隐藏节点块(mode-a/c 显示,CSS 已处理;这里补 b/d 隐藏) */
body.mode-b .node-app-block { display: none; }
body.mode-d .node-app-block { display: none; }
/* 资源库:产品白描摘要(2026-08-06) */
.lib-card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 11px;
line-height: 1.5;
color: var(--ink-faint);
margin-top: 3px;
}
/* ---------- 20. 资源库成品图库(gallery)收敛(2026-08-06) ----------
用户反馈:资源库乱。根因:gallery-grid 定义 4 次(120/116/104px
三档)+ cap 3 次 + 按钮 26px 小字,互相覆盖。
此处为最终收敛层(文件最后,必胜)。 */
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
/* 卡片=纯图:按钮已移灯箱,图占满整卡 */
.gallery-item {
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--line-soft);
background: var(--paper-sink);
}
.gallery-item:hover { transform: none; box-shadow: none; border-color: var(--gold); }
.gallery-img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
/* 信息条:极淡(仅右下角场景字,不抢图),图为主角 */
.gallery-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 20px 8px 6px;
font-size: 10px; line-height: 1.3;
color: rgba(247,237,230,.85);
background: linear-gradient(0deg, rgba(var(--ink-rgb),.55), transparent);
font-family: var(--font-serif, "Songti SC", serif);
letter-spacing: .03em;
opacity: 1;
pointer-events: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 勾选框:右上角纸底圆钮 */
.gallery-check {
position: absolute; top: 6px; right: 6px; z-index: 3;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(251,248,241,.85);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(var(--ink-rgb),.25);
}
.gallery-check::after { display: none; }
.gallery-cb { width: 15px; height: 15px; accent-color: var(--cinnabar); }
/* 选中态:朱砂描边环 */
.gallery-item.is-selected {
border-color: var(--cinnabar);
box-shadow: inset 0 0 0 2px var(--cinnabar);
}
/* 资源库工具栏(2026-08-06 重构:成熟模式 —— 平时只有 选择/画质/一键全存) */
.gallery-toolbar {
display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
padding: 8px 2px 10px;
}
.gallery-toolbar .btn-mini { white-space: nowrap; flex: none; }
.gallery-toolbar .dl-variant { margin-left: auto; flex: none; }
/* 选择模式底部操作条:fixed 浮出,朱砂主操作 */
.gallery-selbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
display: flex; align-items: center; gap: 10px;
padding: 10px max(16px, var(--sa-l, 16px)) calc(10px + var(--sa-b, 0px));
background: rgba(251,248,241,.97);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px -12px rgba(var(--ink-rgb),.25);
backdrop-filter: blur(8px);
}
.gallery-selbar[hidden] { display: none; }
.gallery-selbar-count {
font-size: 13px; color: var(--ink-soft); white-space: nowrap;
font-family: var(--font-serif, "Songti SC", serif);
}
/* 2026-08-12 资源库精简:全选勾(选择态里显式操作,不默认全选) */
.sel-all {
display: inline-flex; align-items: center; gap: 4px;
font-size: .74rem; color: var(--ink-soft, #5A5044); cursor: pointer;
user-select: none;
}
.sel-all input { accent-color: var(--cinnabar); cursor: pointer; }
.gallery-selbar-count b { color: var(--cinnabar); font-size: 16px; }
.gallery-selbar .btn-mini {
flex: 1 1 0; min-height: 40px; font-size: 13px; white-space: nowrap;
border-radius: 8px;
}
.gallery-selbar .btn-mini.btn-quiet { flex: none; padding: 0 14px; }
/* 勾选框:选择态常显 */
.gallery-check { transition: opacity .15s; }
.gallery-toolbar .gallery-toolbar-actions {
display: flex; align-items: center; gap: 8px;
}
.gallery-toolbar .btn-mini {
min-height: 30px; padding: 2px 12px; font-size: 12px;
border-radius: 6px; letter-spacing: .01em;
white-space: nowrap; flex: none;
border: 1px solid rgba(var(--ink-rgb),.12); /* 描边=每个按钮独立成钮 */
background: var(--card);
}
.gallery-toolbar .select-all {
font-size: 12px; color: var(--ink-soft);
white-space: nowrap; flex: none;
padding-right: 10px;
border-right: 1px solid rgba(var(--ink-rgb),.1); /* 与操作组分隔 */
}
/* 计数徽章:去括号,小圆点数字 */
.gallery-toolbar .cnt {
display: inline-block; min-width: 16px; height: 16px;
line-height: 16px; padding: 0 4px; margin-left: 6px;
border-radius: 999px; background: var(--cinnabar);
color: #FBF3E3; font-size: 10px; text-align: center;
font-variant-numeric: tabular-nums;
}
/* 画质选择:紧凑,行尾 */
.gallery-toolbar .dl-variant {
margin-left: auto; flex: none;
}
.gallery-toolbar .dl-variant select {
min-height: 28px; font-size: 11px; border-radius: 6px;
border: 1px solid var(--line); background: var(--card);
color: var(--ink); padding: 0 4px;
}
/* ---------- 21. 节点行: sample 图替换小图标 + 对齐收敛(2026-08-06) ----------
用户:小 logo 歪歪扭扭不对齐;「直发」「出厂」标签没用。
JS 已删出厂徽章+直发标签;sample 图从行尾移到行首主位。 */
.node-row-sample {
width: 36px; height: 36px;
border-radius: 8px;
margin-left: 0;
flex: none;
}
.node-row-ico {
width: 36px; height: 36px;
font-size: 16px;
border-radius: 8px;
background: var(--paper-sink);
color: var(--gold-deep);
flex: none;
}
.node-row-name {
font-size: 14px;
letter-spacing: .02em;
}
/* 行高统一,垂直对齐 */
.node-row-main { min-height: 52px; }
/* 无 sample 的字符图标与有 sample 的图同样式,行首对齐 */
/* node-chip(mode-a 卡片)的 sample 缩略图 */
.node-sample {
width: 30px; height: 30px;
border-radius: 6px;
object-fit: cover;
flex: none;
background: var(--paper-sink);
border: 1px solid var(--line-soft);
}
.node-chip { align-items: center; }
/* 一键全存(主按钮):保持朱砂实底,不吃上面的描边样式 */
.gallery-toolbar .btn-mini.btn-primary {
background: linear-gradient(160deg, var(--cinnabar-lit) 0%, var(--cinnabar-deep) 100%);
border-color: transparent;
color: #FBF3E3;
}
.gallery-toolbar .btn-mini.btn-danger { color: var(--cinnabar); }
/* 微信长按保存:灯箱图必须允许长按菜单(微信 X5 长按图 → 存储到照片) */
.lightbox-img {
-webkit-touch-callout: default !important; /* 允许长按弹保存菜单 */
-webkit-user-select: none;
user-select: none;
pointer-events: auto;
}
/* ---------- 22. 成员身份/额度显示(2026-08-06 商业工具) ---------- */
.app-user {
margin: 2px 0 0;
font-size: 11px;
color: var(--gold-deep);
font-family: var(--font-serif, "Songti SC", serif);
letter-spacing: .04em;
}
.login-hint {
margin: -6px 0 10px;
font-size: 11px;
color: var(--ink-faint);
text-align: center;
}
/* 成员管理区(2026-08-06) */
.member-add-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 8px 0 10px;
}
.member-add-row .field-input { min-height: 40px; font-size: 13px; }
.member-add-row #memAdd { grid-column: 1 / -1; min-height: 40px; }
.member-list { display: flex; flex-direction: column; gap: 6px; }
.member-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px;
border: 1px solid var(--line-soft); background: var(--card);
}
.member-name { font-weight: 600; font-size: 13px; min-width: 56px; }
.member-owner { font-size: 11px; color: var(--ink-faint); min-width: 60px; }
.member-quota { flex: 1; font-size: 12px; color: var(--ink-soft); text-align: right; }
.member-row .btn-mini { min-height: 30px; font-size: 12px; padding: 2px 10px; }
/* ---------- 对标预设卡片(2026-08-06,无图纯提示词) ---------- */
.sr-thumb-preset {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold-deep, #8a6d3b), var(--gold, #b8935a));
color: #fff; font-family: var(--font-serif, "Songti SC", serif);
font-size: 2rem; font-weight: 600; letter-spacing: .05em;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
border-radius: 8px 8px 0 0;
}
/* 2026-08-11 O3:上传区引导提示(对标图按模式显隐) */
.upload-guide {
margin: 8px 0 0; font-size: .74rem; color: var(--ink-faint);
line-height: 1.5;
}
/* 2026-08-11 E1:任务搜索/筛选工具栏 */
.task-filter-bar { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.task-search {
width: 100%; min-height: 40px; padding: 8px 12px;
font-family: inherit; font-size: .84rem; color: var(--ink);
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-sm); box-sizing: border-box;
}
.task-search:focus { outline: none; border-color: var(--ink-faint); }
.task-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.task-fchip {
appearance: none; cursor: pointer; font-family: inherit; font-size: .74rem;
min-height: 30px; padding: 4px 12px; border-radius: 999px;
border: 1px solid var(--line); background: none; color: var(--ink-soft);
transition: background .15s, color .15s, border-color .15s;
}
.task-fchip.is-active { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
/* 2026-08-11 E2:任务取消按钮 */
.task-cancel {
appearance: none; cursor: pointer; font-family: inherit; font-size: .7rem;
min-height: 24px; padding: 2px 10px; margin-left: 8px;
border-radius: 999px; border: 1px solid var(--cinnabar, #d9534f);
background: none; color: var(--cinnabar, #d9534f);
transition: background .15s, color .15s;
}
.task-cancel:hover { background: var(--cinnabar, #d9534f); color: #fff; }
.task-cancel:disabled { opacity: .5; cursor: default; }
/* 2026-08-11 需求2️⃣:规格模板下拉 + 滑块 */
.lib-spec-tools { display: flex; gap: 8px; margin-bottom: 8px; }
.spec-template {
flex: 1; min-height: 36px; padding: 6px 10px; font-family: inherit; font-size: .8rem;
color: var(--ink); background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-sm); box-sizing: border-box; cursor: pointer;
}
.lib-spec-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lib-spec-row .spec-name { width: 90px; }
.lib-spec-row .spec-value { flex: 1; min-width: 0; }
.spec-slider { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.spec-range { flex: 1; min-width: 0; accent-color: var(--cinnabar); cursor: pointer; }
.spec-range-val { font-size: .78rem; color: var(--ink); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.spec-range-tip { font-size: .68rem; color: var(--ink-soft); white-space: nowrap; }
/* 2026-08-11 需求3️⃣改版:打火机参考图 */
.lib-refobj-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-refobj-box .angle-add {
border-radius: 6px; padding: 5px 12px; font-size: .76rem;
}
.lib-refobj-state { font-size: .74rem; color: var(--ink-faint, #8A7F6C); }
.lib-refobj-state::before { content: '· '; }
.lib-refobj-badge {
font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: 5px;
background: var(--gold-bg, #F5EBD5); color: var(--gold-deep);
border: 1px solid rgba(var(--gold-deep-rgb), .18);
}
.lib-refobj-desc { flex: 1 1 100%; font-size: .72rem; color: var(--ink-soft, #5A5044); margin-top: 2px; }
.lib-refobj-state { font-size: .74rem; color: var(--ink-soft); }
/* 2026-08-11 需求1️⃣:自定义分类管理 */
.lib-cat-add {
display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
font-family: inherit; font-size: .78rem; text-align: left; cursor: pointer;
color: var(--ink-soft); background: none; border: 1px dashed var(--line);
border-radius: var(--r-sm); transition: color .15s, border-color .15s;
}
.lib-cat-add:hover { color: var(--cinnabar); border-color: var(--cinnabar); }
.lib-cat-col { position: relative; }
.lib-cat-del {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-size: .72rem; color: var(--ink-soft); cursor: pointer;
padding: 0 4px; border-radius: 4px; opacity: 0; transition: opacity .15s;
}
.lib-cat-col:hover .lib-cat-del { opacity: 1; }
.lib-cat-del:hover { color: var(--cinnabar, #d9534f); }
/* 2026-08-11 P1:本次出图配置汇总 */
.cfg-summary {
margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--paper); overflow: hidden;
}
.cfg-summary-head {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; cursor: pointer; gap: 8px;
}
.cfg-summary-title { font-size: .8rem; font-weight: 600; color: var(--ink); }
.cfg-summary-preview {
appearance: none; cursor: pointer; font-family: inherit; font-size: .72rem;
min-height: 28px; padding: 3px 10px; border-radius: 999px;
border: 1px solid var(--cinnabar); background: none; color: var(--cinnabar);
}
.cfg-summary-preview:hover { background: var(--cinnabar); color: #fff; }
.cfg-summary-body { padding: 0 12px 10px; }
.cfg-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.cfg-item { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; }
.cfg-item b { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.cfg-item em { font-style: normal; color: var(--ink); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* 2026-08-11 P2:节点编辑器字段说明 */
.node-fld-hint { display: block; font-size: .68rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
/* 2026-08-11 反推提示词 */
.btn-reverse { display:block; width:100%; margin:6px 0; padding:7px 10px; border:1px dashed var(--cinnabar); border-radius:6px; background:rgba(160,48,40,.06); color:var(--cinnabar); font-size:13px; cursor:pointer; }
.btn-reverse:hover { background:rgba(160,48,40,.14); }
.reverse-result { margin:10px 0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.reverse-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.reverse-title { font-weight:600; color:var(--ink); font-size:13px; flex:1; }
.reverse-copy, .reverse-save { padding:4px 12px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid var(--cinnabar); color:var(--cinnabar); background:transparent; }
.reverse-save { background:var(--cinnabar); color:#fff; border-color:var(--cinnabar); }
.reverse-prompt { white-space:pre-wrap; font-size:12px; line-height:1.7; color:var(--ink-soft); max-height:260px; overflow:auto; margin:0; }
.reverse-prompt-edit { width:100%; min-height:180px; padding:8px; font-size:12px; line-height:1.7; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:4px; resize:vertical; font-family:inherit; }
.reverse-dims { margin-top:8px; font-size:12px; color:#888; }
.reverse-dims-text { white-space:pre-wrap; font-size:11px; line-height:1.6; color:var(--ink-soft); max-height:220px; overflow:auto; }
/* ===== 2026-08-16 J-UI-23 风格区管理闭环:上传对标 → 反推12维 → 存快捷节点 ===== */
.wb-refrev { margin-bottom: 14px; }
.wb-refrev-open {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 9px 12px;
border: 1px solid rgba(160,48,40,.35); border-radius: 8px;
background: rgba(160,48,40,.05);
color: var(--cinnabar); font-size: 13px; cursor: pointer;
transition: background .15s;
}
.wb-refrev-open:hover { background: rgba(160,48,40,.12); }
.wb-refrev-open .wb-refrev-ico { font-size: 14px; }
.wb-refrev-open .wb-refrev-t { font-weight: 600; letter-spacing: .5px; }
.wb-refrev-open .wb-refrev-hint { flex: 1; text-align: right; font-style: normal; font-size: 11px; color: #7d8aa5; letter-spacing: .3px; }
.wb-refrev-open .wb-refrev-arrow { transition: transform .15s; font-size: 11px; }
.wb-refrev-open.open .wb-refrev-arrow { transform: rotate(180deg); }
.wb-refrev-body { margin-top: 10px; padding: 12px; border: 1px solid rgba(160,48,40,.18); border-radius: 8px; background: rgba(160,48,40,.03); }
.wb-refrev-slot { min-height: 96px; }
.wb-refrev-actions { display: flex; gap: 10px; margin-top: 10px; }
.wb-refrev-actions .btn-reverse, .wb-refrev-actions .reverse-save { margin: 0; flex: 1; }
@media (max-width: 640px) {
.wb-refrev-open .wb-refrev-hint { display: none; }
.wb-refrev-actions { flex-direction: column; }
}
/* 2026-08-12 自动保存开关 */
.auto-save-toggle {
display: inline-flex; align-items: center; gap: 8px;
font-size: .78rem; color: var(--ink); cursor: pointer;
user-select: none;
}
.auto-save-toggle input { accent-color: var(--cinnabar); width: 15px; height: 15px; cursor: pointer; }
.field-hint { margin: 6px 0 0; font-size: .7rem; color: var(--ink-faint, #8A7F6C); line-height: 1.5; }
/* ========== 批量化工作台(2026-08-12 门户第5入口,独立区块) ========== */
.batch-panel {
max-width: 720px; margin: 16px auto; padding: 20px;
background: var(--card-bg, #fff); border: 1px solid var(--hairline, rgba(0,0,0,.1));
border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.batch-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.batch-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.batch-modes { display: flex; gap: 6px; flex: 1; }
.batch-mode {
padding: 5px 12px; font-size: .76rem; border: 1px solid var(--hairline, rgba(0,0,0,.14));
border-radius: 6px; background: transparent; color: var(--ink-soft, #5A5044); cursor: pointer;
}
.batch-mode.is-active {
border-color: var(--cinnabar); color: var(--cinnabar); background: rgba(160,48,40,.06);
}
.batch-close {
width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-faint, #8A7F6C);
font-size: 1.1rem; cursor: pointer; border-radius: 6px; line-height: 1;
}
.batch-close:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.batch-view { display: none; }
.batch-view.is-active { display: block; }
.batch-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.batch-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.batch-label {
display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.batch-label em { font-style: normal; font-weight: 400; font-size: .7rem; color: var(--ink-faint, #8A7F6C); }
.batch-style-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.batch-ref-preview {
display: flex; align-items: center; gap: 8px; margin: 8px 0;
font-size: .74rem; color: var(--ink-soft, #5A5044);
}
.batch-ref-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hairline); }
.batch-style-text {
width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: .78rem;
border: 1px solid var(--hairline, rgba(0,0,0,.14)); border-radius: 6px; resize: vertical;
font-family: inherit; color: var(--ink); line-height: 1.5;
}
.batch-style-text:focus { border-color: var(--cinnabar); outline: none; }
.batch-prod-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.batch-item {
display: flex; align-items: center; gap: 10px; padding: 6px 8px;
border: 1px solid var(--hairline, rgba(0,0,0,.1)); border-radius: 8px;
}
.batch-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.batch-item-name { flex: 1; font-size: .76rem; color: var(--ink-soft, #5A5044); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-item-del {
width: 24px; height: 24px; border: none; border-radius: 6px; background: rgba(0,0,0,.04);
color: var(--ink-faint, #8A7F6C); cursor: pointer; font-size: .9rem; line-height: 1;
}
.batch-item-del:hover { background: rgba(0,0,0,.09); color: var(--ink); }
.batch-params { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.batch-param {
display: inline-flex; align-items: center; gap: 6px;
font-size: .74rem; color: var(--ink-soft, #5A5044);
}
.batch-param .spec-name, .batch-param .spec-value { height: 30px; font-size: .74rem; padding: 0 8px; }
.batch-matrix { display: flex; gap: 32px; margin: 10px 0; }
.batch-col { display: flex; flex-direction: column; gap: 8px; }
.batch-col-title { font-size: .74rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.batch-col label {
display: inline-flex; align-items: center; gap: 6px;
font-size: .76rem; color: var(--ink-soft, #5A5044); cursor: pointer;
}
.batch-col input { accent-color: var(--cinnabar); cursor: pointer; }
/* mode-e(批量化):隐藏工作台主区,面板独占视口(2026-08-12) */
body.mode-e .app-main { display: none; }
body.mode-e .prod-bar { display: none; }
/* ========== 批量化选品弹层(2026-08-12,复用产品库卡片样式) ========== */
.batch-picker-mask {
position: fixed; inset: 0; z-index: 999; background: rgba(20,15,8,.45);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.batch-picker {
width: min(880px, 100%); max-height: 86vh; display: flex; flex-direction: column;
background: var(--card-bg, #fff); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
overflow: hidden;
}
.batch-picker-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.batch-picker-title { font-size: .92rem; font-weight: 700; color: var(--ink); }
.batch-picker-title em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--ink-faint, #8A7F6C); }
.batch-picker-cats {
display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 0;
}
.batch-picker-cat {
padding: 4px 10px; font-size: .74rem; border: 1px solid var(--hairline, rgba(0,0,0,.14));
border-radius: 999px; background: transparent; color: var(--ink-soft, #5A5044); cursor: pointer;
}
.batch-picker-cat.is-active {
border-color: var(--cinnabar); color: var(--cinnabar); background: rgba(160,48,40,.06);
}
.batch-picker-grid {
flex: 1; overflow-y: auto; padding: 14px 18px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
/* 2026-08-12 竖卡:图在上、文字在下(产品库横条布局在弹层里太乱) */
.batch-picker-grid .batch-picker-card {
flex-direction: column; padding: 0; overflow: hidden; border-radius: 10px;
}
.batch-picker-grid .batch-picker-card .lib-thumb {
position: relative;
width: 100%;
aspect-ratio: auto; /* 改：禁裸 aspect-ratio */
padding-top: 100%; /* 新增：padding 占位（免疫塌陷） */
flex: none; /* 新增：防 flex-shrink */
overflow: hidden;
border: none;
}
.batch-picker-grid .batch-picker-card .lib-thumb img {
width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.batch-picker-grid .batch-picker-card .lib-card-body {
padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 2px;
}
.batch-picker-grid .batch-picker-card .lib-card-name {
font-size: .72rem; line-height: 1.3; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.batch-picker-grid .batch-picker-card .lib-card-cat {
font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-picker-more {
margin: 0 18px 10px; padding: 7px 0; width: calc(100% - 36px); box-sizing: border-box;
border: 1px dashed var(--hairline, rgba(0,0,0,.18)); border-radius: 8px;
background: transparent; color: var(--ink-soft, #5A5044); font-size: .76rem; cursor: pointer;
}
.batch-picker-more:hover { border-color: var(--gold); color: var(--gold); }
.batch-picker-card { cursor: pointer; position: relative; }
.batch-picker-card.is-selected { outline: 2px solid var(--cinnabar); outline-offset: 1px; }
.batch-picker-check {
position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.18);
color: transparent; font-size: .72rem; display: flex; align-items: center; justify-content: center;
}
.batch-picker-check.is-on { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.batch-picker-foot {
display: flex; align-items: center; gap: 10px; justify-content: flex-end;
padding: 12px 18px; border-top: 1px solid rgba(0,0,0,.08);
}
.batch-picker-count { flex: 1; font-size: .78rem; color: var(--ink-soft, #5A5044); }
.batch-picker-count b { color: var(--cinnabar); }
/* 2026-08-12 批量①产品项:打火机同框标记(锁真实大小) */
.batch-item-lighter {
flex: none; width: 26px; height: 26px; border: 1px solid var(--hairline, rgba(0,0,0,.14));
border-radius: 6px; background: transparent; cursor: pointer; font-size: .8rem;
display: inline-flex; align-items: center; justify-content: center; filter: grayscale(1); opacity: .55;
}
.batch-item-lighter:hover { border-color: var(--cinnabar); }
.batch-item-lighter.is-on { filter: none; opacity: 1; border-color: var(--cinnabar); background: rgba(160,48,40,.08); }
/* ========== 批量化排版统一(2026-08-12:控件同高/同圆角/间距一致,去浮夸) ========== */
.batch-panel .angle-add {
height: 32px; padding: 0 14px; border-radius: 8px; font-size: .76rem;
display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
}
.batch-panel .spec-name, .batch-panel .spec-value { border-radius: 8px; }
.batch-panel .batch-style-text { border-radius: 8px; font-size: .78rem; }
/* 风格锁定:操作按钮行统一间距 */
.batch-panel .batch-style-row { gap: 8px; }
.batch-panel .batch-style-row .spec-name { height: 32px; }
/* 参数区:label 与控件同高对齐 */
.batch-panel .batch-param { height: 32px; align-items: center; }
.batch-panel .batch-param .spec-name, .batch-panel .batch-param .spec-value {
height: 32px; border-radius: 8px; margin-left: 2px;
}
/* 底部主按钮:去掉浮夸渐变金边,纯色深朱红 + 收敛高度(与控件同体系) */
.batch-panel .btn-generate {
background: var(--cinnabar); border: none; border-radius: 8px;
padding: 0; height: 44px; margin-top: 12px;
font-size: .9rem; letter-spacing: .1em;
box-shadow: none; font-family: inherit;
}
.batch-panel .btn-generate::after { display: none; } /* 去掉金色内框伪元素 */
.batch-panel .btn-generate:hover { filter: none; background: var(--cinnabar-deep, #7E241E); box-shadow: none; }
.batch-panel .btn-generate:disabled { opacity: .5; cursor: not-allowed; }
.batch-panel .btn-generate:hover:not(:disabled) { background: var(--cinnabar-deep, #7E241E); }
/* 区块间距统一 */
.batch-panel .batch-section { margin-bottom: 16px; padding-bottom: 14px; }
.batch-panel .batch-label { margin-bottom: 10px; }
/* 产品批量按钮行 */
.batch-panel .batch-prod-row { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-panel .batch-count { width: 64px; text-align: center; }
/* 2026-08-12 S1 矩阵轴:「＋风格多选」折叠块(单产品×多风格,默认收起) */
.batch-fold {
width: 100%; box-sizing: border-box; padding: 9px 12px;
border: 1px dashed var(--hairline, rgba(0,0,0,.18)); border-radius: 8px;
background: transparent; color: var(--ink-soft, #5A5044);
font-size: .78rem; font-weight: 600; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 6px;
}
.batch-fold em { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--ink-faint, #8A7F6C); }
.batch-fold:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.batch-fold.is-open { border-style: solid; border-color: var(--cinnabar); color: var(--cinnabar); background: rgba(160,48,40,.05); }
.batch-styles-body { margin-top: 10px; }
.batch-styles-prod {
font-size: .74rem; color: var(--ink-soft, #5A5044);
max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-col-styles { flex: 1; }
.batch-styles-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 6px; max-height: 220px; overflow-y: auto; padding-right: 4px; margin-top: 4px;
}
.batch-styles-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 8px; border: 1px solid var(--hairline, rgba(0,0,0,.12));
border-radius: 8px; font-size: .74rem; color: var(--ink-soft, #5A5044);
cursor: pointer; user-select: none;
}
.batch-styles-item input { accent-color: var(--cinnabar); cursor: pointer; }
.batch-styles-item.is-on { border-color: var(--cinnabar); color: var(--cinnabar); background: rgba(160,48,40,.06); }
.batch-styles-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-styles-cat { font-size: .62rem; color: var(--ink-faint, #8A7F6C); flex: none; }
.batch-col-title em { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--ink-faint, #8A7F6C); }
/* ===== 2026-08-12 S2-1:工作台双栏重排(开发宪法§五;零 JS 改动,纯样式) =====
左栏=产品栏+上传;右栏=功能面板+参数;面包屑通栏 */
.app-main {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 16px;
padding: 16px 20px;
align-items: start;
}
.app-main .mode-crumb { grid-column: 1 / -1; margin-bottom: 0; }
.app-main .prod-bar { grid-column: 1; width: auto; }
.app-main .upload-panel { grid-column: 1; margin: 0; }
.app-main .oriental-panel { grid-column: 2; margin: 0; }
.app-main .param-panel { grid-column: 2; margin: 0; }
@media (max-width: 900px) {
.app-main { grid-template-columns: 1fr; }
.app-main .prod-bar, .app-main .upload-panel,
.app-main .oriental-panel, .app-main .param-panel { grid-column: 1; }
}
/* ===== 2026-08-12 S2-1:顶栏单张/批量开关(宪法§一) ===== */
.header-mode-seg {
display: flex;
border: 1px solid rgba(169,139,61,.4);
border-radius: 18px;
padding: 2px;
margin-right: 8px;
}
.header-mode-seg button {
border: none;
background: transparent;
padding: 4px 14px;
font-size: 12.5px;
letter-spacing: 1px;
border-radius: 15px;
cursor: pointer;
color: #8A7A58;
font-family: "Songti SC", serif;
}
.header-mode-seg button.on {
background: var(--ink);
color: var(--paper);
}
body.dark .header-mode-seg button.on { background: #EDE4D0; color: #17130D; }
/* ===== 2026-08-12 S2:顶部主导航(工作台/资源库/队列) ===== */
.header-nav {
display: flex;
margin-left: 26px;
align-items: center;
}
.header-nav a {
padding: 6px 16px;
font-size: 13px;
letter-spacing: 2px;
color: #8A7A58;
cursor: pointer;
font-family: "Songti SC", "STSong", serif;
border-right: 1px solid rgba(169,139,61,.22);
}
.header-nav a:last-child { border-right: none; }
.header-nav a.on {
color: var(--ink);
font-weight: 700;
position: relative;
}
.header-nav a.on::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: -2px;
height: 2px;
background: var(--gold);
}
@media (max-width: 900px) {
.header-nav { margin-left: 12px; }
.header-nav a { padding: 5px 10px; font-size: 12px; }
}
/* ===== 2026-08-12 S2:工作台右栏(快捷节点区)+ 参数底部操作条 ===== */
.app-main .nodeAppBlock,
.app-main .oriental-panel { grid-column: 2; }
.app-main .param-panel {
grid-column: 1 / -1;
position: sticky;
bottom: 0;
background: var(--paper);
z-index: 5;
border-top: 1px solid rgba(169,139,61,.22);
padding-top: 12px;
}
/* 快捷节点区:卡片网格化(与风格库一致的 3 列竖卡视觉) */
.app-main .nodeAppBlock .node-grid,
.app-main .nodeGridA {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
/* ===== 2026-08-12 S2-2:风格区分类 chips + 配方卡 ===== */
.style-cats {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.style-cat {
border: 1px solid rgba(169,139,61,.4);
border-radius: 14px;
padding: 2px 13px;
font-size: 11.5px;
letter-spacing: 1px;
color: #8A7A58;
cursor: pointer;
background: transparent;
}
.style-cat.on {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.recipe-card {
border: 1px solid rgba(169,139,61,.22);
border-radius: 8px;
background: #FCF9F2;
cursor: pointer;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
box-shadow: 0 1px 0 rgba(169,139,61,.08), 0 6px 24px -18px rgba(var(--ink-rgb),.25);
}
.recipe-card:hover { border-color: var(--gold); }
.recipe-card.sel {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold), 0 10px 26px -14px rgba(201,168,79,.5);
}
.recipe-thumb {
aspect-ratio: 16/9;
background: linear-gradient(135deg, #EFE7D4, #DCCFB2);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #8A7A58;
font-family: "Songti SC", serif;
}
.recipe-name {
font-size: 12.5px;
font-weight: 700;
padding: 7px 10px 1px;
font-family: "Songti SC", serif;
letter-spacing: 1px;
}
.recipe-src {
font-size: 10px;
color: #8A7A58;
padding: 0 10px 8px;
letter-spacing: 1px;
}
/* ===== 2026-08-12 S2-3:产品一行快捷选取 ===== */
.prod-strip {
display: flex;
gap: 8px;
align-items: center;
margin-top: 10px;
overflow-x: auto;
padding-bottom: 4px;
}
.prod-strip-t {
font-size: 11px;
color: #8A7A58;
letter-spacing: 1px;
flex: none;
}
.prod-mini {
flex: none;
width: 56px;
cursor: pointer;
text-align: center;
}
/* 2026-08-16 J-UI-4:wbV2 产品区三卡放大(旧 prod-strip 横条 56px 小卡不受影响) */
.wb-strip .prod-mini {
width: auto;
min-width: 0;
}
.wb-strip .prod-mini-img {
width: 100%;
height: auto;
aspect-ratio: 3/4;
font-size: 24px;
}
.wb-strip .prod-mini-name {
font-size: 11px;
color: var(--ink-soft);
margin-top: 5px;
letter-spacing: .5px;
}
.prod-mini-img {
display: block;
width: 56px;
height: 56px;
border-radius: 8px;
background: linear-gradient(135deg, #EFE7D4, #DCCFB2);
border: 1px solid rgba(169,139,61,.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #8A7A58;
font-family: "Songti SC", serif;
transition: border-color .15s, box-shadow .15s;
}
.prod-mini:hover .prod-mini-img {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold);
}
.prod-mini-name {
display: block;
font-size: 9px;
color: #8A7A58;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-strip-more {
flex: none;
font-size: 11px;
color: #A98B3D;
cursor: pointer;
letter-spacing: 1px;
white-space: nowrap;
}
.prod-strip-more:hover { color: var(--gold); }
/* ===== 2026-08-12 S2 最终版工作台 wbV2(原型 v11.1 落地) ===== */
.wb-v2 {
max-width: 1080px;
margin: 0 auto;
padding: 18px 24px 96px;
display: grid;
grid-template-columns: 1fr;
gap: 26px;
align-items: start;
}
/* 第一排=选产品(上传卡+三张产品卡同排 grid);第二排=选风格(卡片网格) */
/* 2026-08-16 J-UI-12:上传入口改为产品卡样式(卡面+图标+文字),与产品卡同排同规格,
不再是一条横条(J-UI-4 只压高度未改形态,老板返工) */
.wb-prod .wb-upload {
min-height: 0;
}
/* 产品卡 grid:外层 4 列容器,上传卡占第 1 格,3 张产品卡占 2-4 格(display:contents 让
prod-mini 直接参与外层 grid,与上传卡同列同规格) */
.wb-prod-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
max-width: 470px;
}
.wb-librow { margin-top: 0; }
.wb-sec-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}
.wb-seal {
display: inline-flex;
width: 24px; height: 24px;
border: 1px solid var(--gold);
border-radius: 5px;
color: var(--gold-deep);
font-family: "Songti SC", serif;
font-size: 13px;
align-items: center;
justify-content: center;
flex: none;
}
.wb-sec-head h2 {
font-size: 17px;
font-family: "Songti SC", "STSong", serif;
letter-spacing: 3px;
color: var(--ink);
margin: 0;
}
.wb-sec-head em {
font-style: normal;
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 1px;
}
/* 壹 选产品 */
/* 2026-08-16 J-UI-12:上传入口 = 产品卡样式(卡面 3:4 + 卡内图标/文字,与产品卡同规格)。
J-UI-4 曾压成 44px 横条,老板返工「不要一条横条,换成和产品卡片一样的格式」 */
.wb-upload {
border: 1.5px dashed rgba(var(--gold-deep-rgb),.55);
border-radius: 8px;
background: rgba(var(--paper-rgb),.72);
aspect-ratio: 3 / 4;
align-self: start; /* 与产品卡「图」对齐(产品卡=图+名字行,整体更高),防 grid stretch 拉变形 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: border-color .18s, background .18s;
position: relative;
overflow: hidden;
padding: 10px;
}
.wb-upload:hover { border-color: var(--gold); background: rgba(var(--paper-rgb),1); }
.wb-upload.is-dragover { border-color: var(--cinnabar, var(--cinnabar)); background: var(--cinnabar-wash, rgba(var(--cinnabar-rgb),.08)); }
.wb-upload-plus { font-size: 24px; color: var(--gold-deep); line-height: 1; flex: none; }
.wb-upload-t { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 2px; font-family: "Songti SC", serif; flex: none; }
.wb-upload-sub { font-size: 10px; color: var(--ink-faint); letter-spacing: 1px; flex: none; }
.wb-upload img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* 2026-08-16 J-UI-4:产品库标题行(标签左,展开右) */
.wb-librow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.wb-librow-t { font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; flex: none; }
/* 2026-08-16 J-UI-4:产品库三张产品卡(原 56px 横滚条 → 三卡并列,卡放大)
J-UI-12:display:contents 让 prod-mini 直接参与 .wb-prod-grid 外层 4 列,
与上传卡同排同规格;卡宽由外层 grid 控制(桌面 4 列 ~110px,3:4 图高 ~147px) */
.wb-strip {
display: contents;
}
.wb-expand {
flex: none;
font-size: 11.5px;
color: var(--gold-deep);
cursor: pointer;
letter-spacing: 1px;
white-space: nowrap;
}
.wb-expand:hover { color: var(--gold); }
/* ============ 2026-08-16 J-UI-13:工作区内联选品区(展开=当前页网格,不跳管理页) ============ */
.wb-pick-panel {
margin-top: 10px;
border: 1px solid rgba(var(--gold-deep-rgb), .25);
border-radius: 12px;
background: rgba(var(--paper-rgb), .82);
padding: 12px;
max-width: 470px;
}
.wb-pick-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.wb-pick-title {
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: 2px;
font-family: "Songti SC", "STSong", serif;
}
.wb-pick-title em {
font-style: normal;
font-size: 10.5px;
font-weight: 400;
color: var(--ink-faint);
letter-spacing: .5px;
margin-left: 6px;
}
.wb-pick-close {
flex: none;
border: none;
background: transparent;
color: var(--gold-deep);
font-size: 12px;
cursor: pointer;
padding: 4px 6px;
letter-spacing: 1px;
}
.wb-pick-close:hover { color: var(--gold); }
/* 网格:与产品卡同规格(3:4 卡面),复用 lib-card 竖卡结构 */
.wb-pick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2026-08-16 J-UI-27:桌面 3 列(3卡一行,首屏 3行×3列=9张,替代原 4 列) */
gap: 12px; /* 2026-08-16 J-UI-24:10px→12px,162 卡拉开呼吸感(移动端 media 覆盖回 8px) */
max-height: none; /* 2026-08-16 J-UI-31:去 46vh 锁 — 加载更多后卡片自然撑开、页面整体滚动(原 J-UI-22 min(46vh,460px) 使 18+ 张堆进 291px 小窗内滚) */
overflow: visible; /* J-UI-31:同上,去掉网格内部滚动条 */
padding: 2px;
grid-auto-rows: max-content; /* 新增：补契约 */
align-content: start; /* 新增：与 lib-grid 对齐 */
}
/* 2026-08-16 J-UI-22:分类 chips(全部 + 各分类,点击过滤) */
.wb-pick-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.wb-pick-cat {
padding: 4px 12px;
border: 1px solid rgba(var(--gold-deep-rgb), .3);
border-radius: 999px;
font-size: 11px;
color: var(--ink-soft);
cursor: pointer;
background: rgba(255,255,255,.5);
letter-spacing: 1px;
transition: all .15s;
white-space: nowrap;
}
.wb-pick-cat:hover { border-color: var(--gold); color: var(--gold-deep); }
.wb-pick-cat.on {
background: var(--gold-deep);
border-color: var(--gold-deep);
color: #fff;
}
.wb-pick-grid .wb-pick-card { min-width: 0; }
/* ═══════ 2026-08-16 J-UI-21:选品卡独立皮肤(浅金描边+「选」角标+选中态金底),与产品库卡区分 ═══════ */
.wb-pick-grid .wb-pick-card {
border-color: rgba(var(--gold-rgb), .55); /* 浅金描边:区别于产品库卡米白线(--line-soft) */
}
.wb-pick-grid .wb-pick-card:hover { border-color: var(--gold); }
/* 「选」角标:纯 CSS 伪元素,不改 DOM(产品库卡无此标记) */
.wb-pick-grid .wb-pick-card::before {
content: '选';
position: absolute; top: 6px; left: 6px; z-index: 3;
background: var(--gold); color: #fff;
font-size: .62rem; font-weight: 700; line-height: 1;
padding: 4px 6px; border-radius: 5px;
letter-spacing: 1px;
box-shadow: 0 1px 4px rgba(var(--ink-rgb), .18);
}
/* ═══════ 2026-08-16 J-UI-24:选中态强化(朱砂描边+对勾角标+朱砂 wash 底),与未选中金边卡一眼可分 ═══════
三处强差异:① 描边 浅金→朱砂(2px 外圈光晕) ② 角标 「选」→朱砂「✓」 ③ 底色 白→朱砂 wash
仅作用于单张模式(:not(:has(.prod-check)));批量模式走下方旧金底(右上已有复选框,不抢视觉) */
.wb-pick-grid .wb-pick-card.is-selected:not(:has(.prod-check)) {
background: var(--cinnabar-wash, #F3E2DC);
border-color: var(--cinnabar);
border-width: 2px;
box-shadow: 0 0 0 3px rgba(var(--cinnabar-rgb), .22), 0 6px 14px -6px rgba(var(--cinnabar-rgb), .5);
}
/* 选中角标:朱砂「✓」+圆形底,覆盖在「选」位(未选中仍显示「选」) */
.wb-pick-grid .wb-pick-card.is-selected:not(:has(.prod-check))::before {
content: '✓';
background: var(--cinnabar);
box-shadow: 0 1px 5px rgba(var(--cinnabar-rgb), .45);
}
/* 选中卡信息层:名称转朱砂深色,与未选中(ink)区分 */
.wb-pick-grid .wb-pick-card.is-selected:not(:has(.prod-check)) .lib-card-name {
color: var(--cinnabar-deep);
}
.wb-pick-grid .wb-pick-card.is-selected:not(:has(.prod-check)) .lib-card-cat {
background: var(--cinnabar-wash, #F3E2DC);
color: var(--cinnabar-deep);
}
/* 批量模式选中态:保留浅金底(右上已有复选框,避免双勾冲突) */
.wb-pick-grid .wb-pick-card.is-selected:has(.prod-check) {
background: var(--gold-bg, #F5EBD5);
border-color: var(--gold-deep);
}
/* 与 J-UI-12 产品卡一致:3:4 卡面(桌面 4 列 ~110px → 图高 ~147px) */
.wb-pick-grid .wb-pick-card .lib-thumb {
width: 100%;
padding-top: 133.33%; /* 3:4 比例(替代 lib-card 默认 1:1) */
flex: none;
}
.wb-pick-grid .wb-pick-card .lib-thumb img {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.wb-pick-grid .wb-pick-card .lib-card-body { padding: 8px 10px 10px; }
.wb-pick-grid .wb-pick-card .lib-card-name {
/* 2026-08-16 J-UI-24:.76rem→.8rem,名字层级加大,162 卡扫读不糊 */
font-size: .8rem; line-height: 1.35;
font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-pick-grid .wb-pick-card .lib-card-cat {
/* 2026-08-16 J-UI-24:.62rem→.68rem+金底,品类标签更清晰 */
font-size: .68rem; padding: 2px 7px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 批量模式勾选复选框(2026-08-18 批量化多选:真 checkbox,accent-color 朱砂;替代原圆形 ✓ 角标) */
.wb-pick-card .prod-check {
position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px; margin: 0;
accent-color: var(--cinnabar, #A03028);
cursor: pointer; z-index: 2;
}
/* 批量模式底部操作条 */
.wb-pick-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(var(--gold-deep-rgb), .3);
}
.wb-pick-count {
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 1px;
}
/* 2026-08-25 对齐修复:批量选品条三个元素高度统一(44px 触达),防「里外没对齐」。
wbPickUse/wbPickNext 是内联样式按钮(padding 7px),count 是纯文字——高度不一致导致
flex 居中后视觉参差。统一 min-height + 行高,让计数/按钮在同一水平线。 */
#wbPickUse, #wbPickNext { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#wbPickCount { min-height: 44px; display: inline-flex; align-items: center; }
#wbStyleNext { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* wbPickUse 继承 .btn-generate 的 margin-top:26px,在 flex 行内会把它压下去 10px → 显式归零,与两侧对齐 */
#wbPickUse { margin-top: 0; }
@media (max-width: 640px) {
/* 手机端:按钮可能换行,保持对齐 */
#wbPickUse, #wbPickNext, #wbStyleNext { min-height: 44px; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 640px) {
/* 2026-08-16 J-UI-22:手机选品区改为底部下抽屉(bottom-sheet)——
底部滑出/圆角顶/拖拽手柄/max-height 70vh/安全区;z-index 50 高于 wb-tabbar(42)低于全局浮层(90+) */
.wb-pick-panel {
position: fixed;
left: 0; right: 0; bottom: 0;
width: 100%;
max-width: 100%;
max-height: 70vh;
margin: 0;
padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0));
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 24px rgba(0,0,0,.14);
z-index: 50;
display: flex;
flex-direction: column;
overflow-y: auto; /* 2026-08-16 J-UI-34:抽屉自身滚动 — 加载更多后网格自然高度超高时在抽屉内下滑选择(原 grid flex 伸缩被压扁) */
transform: translateY(105%);
transition: transform .28s ease;
}
.wb-pick-panel.wb-pick-open { transform: translateY(0); }
/* 拖拽手柄:纯 CSS 伪元素,顶部居中圆角横条 */
.wb-pick-panel::before {
content: '';
position: absolute;
top: 7px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
border-radius: 2px;
background: rgba(var(--ink-rgb), .18);
}
/* hidden 兜底:display:flex 会覆盖 UA 的 [hidden]{display:none} */
.wb-pick-panel[hidden] { display: none !important; }
.wb-pick-head { padding-top: 8px; flex: none; }
.wb-pick-cats { flex: none; }
.wb-pick-grid {
flex: none; /* 2026-08-16 J-UI-34:不参与伸缩 — 网格按内容自然高度,卡片固定不塌陷(原 1 1 auto 在 18 张卡超可视高后被压扁:124→58px,图溢出) */
min-height: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
max-height: none;
}
.wb-pick-foot { flex: none; }
.wb-pick-title em { display: none; }
}
/* 贰 选风格 */
.wb-style .style-cats { margin-bottom: 14px; }
.wb-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
.wb-cards .node-app-grid, .wb-cards .recipe-grid {
grid-column: 1 / -1;
}
.wb-cards .node-app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
/* 底部操作条 */
.wb-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 14px;
padding: 10px 26px;
background: rgba(var(--paper-rgb),.94);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(var(--gold-deep-rgb),.25);
}
.wb-params {
border: 1px solid rgba(var(--gold-deep-rgb),.45);
border-radius: 20px;
background: transparent;
padding: 7px 18px;
font-size: 12.5px;
color: var(--ink);
cursor: pointer;
letter-spacing: 1px;
font-family: "Songti SC", serif;
}
.wb-params:hover { border-color: var(--gold); }
.wb-params-note { font-size: 10.5px; color: var(--ink-faint); }
/* 2026-08-25 生产页 footer 对齐:拍摄参数/多角度/note 统一 44px 触达,与批量选品条一致防参差 */
.wb-params { min-height: 44px; display: inline-flex; align-items: center; }
.wb-angle { min-height: 44px; }
.wb-params-note { min-height: 44px; display: inline-flex; align-items: center; }
.wb-angle {
margin-left: auto;
font-size: 12px;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.wb-angle input { accent-color: var(--cinnabar); }
.wb-gen {
border: none;
border-radius: 22px;
background: var(--cinnabar);
color: var(--paper);
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
padding: 10px 40px;
cursor: pointer;
box-shadow: 0 8px 22px -8px rgba(var(--cinnabar-rgb),.55);
font-family: "Songti SC", serif;
}
.wb-gen:hover { background: var(--cinnabar-lit); }
.wb-gen:disabled { opacity: .45; cursor: not-allowed; }
/* 多角度子集选择(B2 2026-08-12):固定在底部操作条上方,勾选要出的角度(默认全选) */
.wb-angle-sel {
position: fixed;
left: 0; right: 0;
bottom: 58px;
z-index: 39;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 26px;
background: rgba(var(--paper-rgb),.96);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(var(--gold-deep-rgb),.25);
}
.wb-angle-sel-label { font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; margin-right: 4px; }
.wb-angle-chk {
display: flex; align-items: center; gap: 5px;
font-size: 12px; color: var(--ink); cursor: pointer;
border: 1px solid rgba(var(--gold-deep-rgb),.4);
border-radius: 16px;
padding: 5px 12px;
background: rgba(var(--card-rgb),.4);
}
.wb-angle-chk:hover { border-color: var(--gold); }
.wb-angle-chk input { accent-color: var(--cinnabar); }
@media (max-width: 900px) {
.wb-v2 { grid-template-columns: 1fr; padding: 14px 14px 84px; }
.wb-bar { padding: 8px 12px; flex-wrap: wrap; }
.wb-params-note { display: none; }
.wb-angle-sel { bottom: 84px; padding: 8px 12px; flex-wrap: wrap; }
}
/* ===== 2026-08-12 S2 卡片统一(简洁竖卡:图+名+来源,禁覆盖文字/杂色) ===== */
.wb-cards .node-chip,
.wb-cards .recipe-card {
width: 100%;
border: 1px solid rgba(var(--gold-deep-rgb),.22);
border-radius: 10px;
background: var(--card);
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.wb-cards .node-chip:hover,
.wb-cards .recipe-card:hover { border-color: var(--gold); }
.wb-cards .node-chip.sel,
.wb-cards .recipe-card.sel {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold);
}
/* 节点卡:图(3:4)+ 名 + 操作小字 */
.wb-cards .node-chip .node-fire {
display: block;
width: 100%;
border: none;
background: none;
padding: 0;
cursor: pointer;
text-align: left;
}
.wb-cards .node-chip .node-sample {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
border-radius: 0;
}
.wb-cards .node-chip .node-ico {
display: flex;
width: 100%;
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--paper-warm), var(--paper-sink));
align-items: center;
justify-content: center;
font-size: 30px;
}
.wb-cards .node-chip .node-name {
display: block;
padding: 8px 10px 2px;
font-size: 12.5px;
font-weight: 700;
font-family: "Songti SC", serif;
letter-spacing: 1px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-cards .node-chip .node-ops {
display: flex;
gap: 0;
padding: 2px 8px 8px;
}
.wb-cards .node-chip .node-op {
border: none;
background: none;
font-size: 10px;
color: var(--gold-deep);
padding: 2px 6px;
cursor: pointer;
border-radius: 8px;
}
.wb-cards .node-chip .node-op:hover { background: rgba(var(--gold-rgb),.14); }
.wb-cards .node-chip .node-op-del { color: var(--cinnabar); }
/* 新建节点虚线卡与普通卡同尺寸 */
.wb-cards .node-app-grid .node-add-card {
border: 1.5px dashed rgba(var(--gold-deep-rgb),.5);
border-radius: 10px;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--gold-deep);
cursor: pointer;
background: transparent;
}
.wb-cards .node-app-grid .node-add-card:hover { border-color: var(--gold); color: var(--gold); }
/* 分组头:小字分隔,不喧宾夺主 */
.wb-cards .node-app-grid .node-group-head {
grid-column: 1 / -1;
font-size: 11px;
letter-spacing: 2px;
color: var(--ink-faint);
margin: 10px 0 2px;
font-family: "Songti SC", serif;
}
.wb-cards .node-app-grid .node-group-head::before {
content: "— ";
color: var(--gold);
}
/* ===== 2026-08-12 S2 节点卡统一竖卡(与配方卡同视觉:案例图+名字) ===== */
.wb-cards .node-flow { margin-bottom: 2px; }
.wb-cards .node-flow-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
gap: 8px;
font-family: "Songti SC", serif;
letter-spacing: 2px;
margin: 12px 0 2px;
}
.wb-cards .node-flow-head .node-flow-name {
font-size: 12px;
color: var(--ink-faint);
font-weight: 700;
}
.wb-cards .node-flow-head .node-flow-name::before { content: "— "; color: var(--gold); }
.wb-cards .node-flow-head .node-flow-tip { display: none; }
.wb-cards .node-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
.wb-cards .node-list.is-flow { display: grid; }
.wb-cards .node-row {
border: 1px solid rgba(var(--gold-deep-rgb),.22);
border-radius: 10px;
background: var(--card);
overflow: hidden;
position: relative;
transition: border-color .15s, box-shadow .15s;
}
.wb-cards .node-row:hover { border-color: var(--gold); }
.wb-cards .node-row-main {
display: block;
width: 100%;
border: none;
background: none;
padding: 0;
cursor: pointer;
text-align: left;
}
.wb-cards .node-row-sample {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
}
.wb-cards .node-row-ico {
display: flex;
width: 100%;
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--paper-warm), var(--paper-sink));
align-items: center;
justify-content: center;
font-size: 30px;
}
.wb-cards .node-row-step {
position: absolute;
top: 8px; left: 8px;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(var(--cinnabar-rgb),.88);
color: var(--paper);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
border: 1px solid rgba(var(--paper-rgb),.5);
}
.wb-cards .node-row-name {
display: block;
padding: 8px 10px 2px;
font-size: 12.5px;
font-weight: 700;
font-family: "Songti SC", serif;
letter-spacing: 1px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-cards .node-row-ops {
display: flex;
padding: 2px 8px 8px;
}
.wb-cards .node-row-ops .node-op {
border: none;
background: none;
font-size: 11px;
color: var(--gold-deep);
padding: 2px 6px;
cursor: pointer;
border-radius: 8px;
}
.wb-cards .node-row-ops .node-op:hover { background: rgba(var(--gold-rgb),.14); }
.wb-cards .node-row-ops .node-op-del { color: var(--cinnabar); }
.wb-cards .node-app-empty { color: var(--ink-faint); font-size: 12px; padding: 18px 0; }
/* 2026-08-12 修复:is-flow 旧 flex 规则(0,3,0)压过竖卡覆盖 —— 强制 block */
.wb-v2 .wb-cards .node-list .node-row,
.wb-v2 .wb-cards .node-list.is-flow .node-row {
display: block !important;
width: 100%;
}
.wb-v2 .wb-cards .node-list.is-flow .node-row-main,
.wb-v2 .wb-cards .node-row-main {
display: block !important;
width: 100%;
}
.wb-v2 .wb-cards .node-row-sample,
.wb-v2 .wb-cards .node-row-ico {
width: 100% !important;
height: auto !important;
aspect-ratio: 3/4 !important;
}
/* 2026-08-19 分类筛选:隐藏节点不占 grid 位 */
.filtered-out {
display: none !important;
position: absolute !important;
visibility: hidden !important;
}
/* ===== 2026-08-12 S2-4 紧凑排版:卡更小更密,不撑屏 =====
2026-08-19 节点卡固定 5 列(老板「一排 5 个」):auto-fill 改固定 repeat(5, minmax(0,1fr)),
gap 10→12px;手机端 3 列见下方 @media(max-width:640px) 覆盖 */
.wb-cards {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.wb-cards .node-list {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.wb-cards .node-row-name,
.wb-cards .node-chip .node-name {
font-size: 11.5px;
padding: 6px 8px 1px;
}
.wb-cards .node-row-ops,
.wb-cards .node-chip .node-ops {
padding: 1px 6px 6px;
}
.wb-cards .node-op { font-size: 10px; }
.wb-cards .node-flow-head { margin: 8px 0 0; }
.wb-cards .node-flow-head .node-flow-name { font-size: 11px; }
/* 产品小卡:真实图 */
.prod-mini-img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(var(--gold-deep-rgb),.25);
background: var(--paper-warm);
transition: border-color .15s, box-shadow .15s;
}
.prod-mini:hover .prod-mini-img {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold);
}
/* 2026-08-12 修复:nodeGridA 嵌套 grid 把 node-list 压成单列 —— 外层容器改 block */
/* 2026-08-16 J-UI-29:display:block 覆盖了 J-UI-19 的三列 grid(总控实测节点区竖排一列)。
恢复 grid:桌面列数由下方 @media(min-width:641px) 固定 3 列;分组容器 node-flow
用 grid-column: 1 / -1 整行单独处理,不再用 display:block 干掉整个网格。
手机(≤640px)规则不动。 */
.wb-v2 .wb-cards .node-app-grid {
display: grid;
grid-column: 1 / -1;
}
/* 分组容器整行:一个分组占满整行,组内 node-list 保持 3 列 */
.wb-v2 .wb-cards .node-app-grid .node-flow {
grid-column: 1 / -1;
}
/* 2026-08-12:recipe-thumb 统一 3:4(与节点卡一致),对标真实图填充 */
.wb-cards .recipe-thumb {
aspect-ratio: 3/4;
position: relative;
overflow: hidden;
}
.wb-cards .recipe-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========== 2026-08-12 J-P1:40 张硬顶预估条(数据爆炸闸门) ========== */
.wb-est {
margin-left: 4px;
font-size: 12px;
color: var(--ink-faint);
letter-spacing: .5px;
white-space: nowrap;
}
.wb-est.is-over {
color: var(--danger);
font-weight: 700;
}
.batch-est {
margin-top: 10px;
font-size: .78rem;
color: var(--ink-faint);
letter-spacing: .4px;
line-height: 1.5;
}
.batch-est.is-over {
color: var(--danger);
font-weight: 700;
}
/* ---- J-UI-26 2026-08-16:批量提交摘要条(已选 N 件 + 锁定风格,克制浅金,与工作台摘要同语系) ---- */
.batch-summary {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(var(--gold-deep-rgb),.25);
border-radius: 10px;
padding: 10px 12px;
background: rgba(var(--gold-deep-rgb),.04);
font-size: .8rem;
line-height: 1.5;
color: var(--ink);
}
.batch-summary[hidden] { display: none; }
.batch-summary-key {
flex: 0 0 auto;
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 1px;
}
.batch-summary-body { min-width: 0; }
.batch-summary-body b {
color: var(--cinnabar);
font-size: .9rem;
font-weight: 700;
}
/* ============================================================
J-P3 手机端:步骤流 + 底部 Tab(2026-08-12 宪法§五/§七 S3)
手机视口(≤640px)wbV2 呈现 ①产品 ②风格 ③生成 三步流导航 +
底部 Tab,可点目标触达 ≥44×44。桌面默认隐藏。
============================================================ */
.wb-stepnav,
.wb-tabbar { display: none; }
@media (max-width: 640px) {
/* ---- 顶部步骤条 ---- */
.wb-stepnav {
display: flex;
align-items: stretch;
gap: 6px;
margin: 0 0 12px;
}
.wb-step {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 44px;
border: 1px solid rgba(var(--gold-deep-rgb),.35);
border-radius: 10px;
background: rgba(var(--paper-rgb),.7);
color: var(--ink-faint);
font-size: 13px;
font-family: "Songti SC", "STSong", serif;
letter-spacing: 1px;
text-decoration: none;
transition: border-color .15s, background .15s, color .15s;
}
.wb-step-no { font-size: 14px; }
/* 默认(或锚点=产品):第一步高亮 */
.wb-step.on,
.wb-step[data-step="prod"] {
border-color: var(--gold);
background: rgba(var(--gold-rgb),.14);
color: var(--ink);
font-weight: 700;
}
/* 锚点=风格:产品灭、风格亮 */
.wb-v2:has(#wbStyle:target) .wb-step[data-step="prod"] {
border-color: rgba(var(--gold-deep-rgb),.35);
background: rgba(var(--paper-rgb),.7);
color: var(--ink-faint);
font-weight: 400;
}
.wb-v2:has(#wbStyle:target) .wb-step[data-step="style"] {
border-color: var(--gold);
background: rgba(var(--gold-rgb),.14);
color: var(--ink);
font-weight: 700;
}
/* 锚点=生成:产品灭、生成亮 */
.wb-v2:has(#wbGenAnchor:target) .wb-step[data-step="prod"] {
border-color: rgba(var(--gold-deep-rgb),.35);
background: rgba(var(--paper-rgb),.7);
color: var(--ink-faint);
font-weight: 400;
}
.wb-v2:has(#wbGenAnchor:target) .wb-step[data-step="gen"] {
border-color: var(--gold);
background: rgba(var(--gold-rgb),.14);
color: var(--ink);
font-weight: 700;
}
/* ---- 底部 Tab(固定在底部,操作条 wb-bar 抬到其上方) ---- */
.wb-tabbar {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 42;
background: rgba(var(--paper-rgb),.97);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(var(--gold-deep-rgb),.25);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.wb-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 56px;
color: var(--ink-faint);
font-size: 11.5px;
font-family: "Songti SC", "STSong", serif;
letter-spacing: 1px;
text-decoration: none;
transition: color .15s;
}
.wb-tab-ico { font-size: 16px; line-height: 1; }
.wb-tab.on,
.wb-tab[data-step="prod"] { color: var(--cinnabar); font-weight: 700; }
/* ---- 布局让位:底部 Tab 占 56px,操作条/角度选择/页面底部同步抬升 ---- */
.wb-v2 { padding: 14px 14px 140px; }
.wb-bar { bottom: 56px; padding: 8px 12px; }
/* wb-bar 手机端换行后约 123px 高,角度选择条必须在其上方(bottom: 56+123+余量) */
.wb-angle-sel { bottom: 190px; }
/* 悬浮 FAB(任务与资源库)抬到底部 Tab 之上,避免被 Tab 遮住 */
.drawer-fab { bottom: calc(76px + var(--sa-b)); }
/* ---- 可点目标 ≥44×44(手机端 wbV2 内) ---- */
.wb-expand {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 10px;
}
.style-cat,
.wb-cat-add {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 12px;
}
.wb-sec-head .angle-add {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
}
.wb-params {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.wb-angle {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 6px;
}
.wb-gen {
min-height: 48px;
padding: 0 32px;
}
.wb-angle-chk {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
}
.wb-cards .node-chip .node-op,
.wb-cards .node-row .node-op {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
}
/* ============================================================
J-F3 手机端排版走查修复(2026-08-13)
实测 375/390 视口抓出 4 个乱点:
① wb-librow(产品库横条)min-content 把 wbV2 grid 轨道撑到
592px → 整页横向溢出 606>375,风格卡被撑成 2 列;
② 底部内容被 wb-bar 遮挡(原 padding-bottom 140px < bar 123+Tab 57);
③ drawer-fab 压住 wb-bar(实测 fab 完全落在 bar 区域内);
④ header 横向溢出 432>375(品牌+导航+模式开关+3 按钮必超宽)。
仅 ≤640px 响应式,桌面布局零改动。
============================================================ */
@media (max-width: 640px) {
/* ① grid 1fr 轨道防撑开:flex 容器(wb-librow)的 min-content 含内部
横向滚动条(wbStrip)的内容宽,grid item 默认 min-width:auto 把
1fr 轨道撑到内容宽。min-width:0 让轨道回到视口宽,风格卡
auto-fill 恢复单列、wbStrip 恢复内部横向滚动。 */
.wb-v2 > * { min-width: 0; }
/* ② 底部留白加大:wb-bar 换行后实测 123px + 底部 Tab 57px ≈ 180px,
原 140px 不够,滚到底时最后排卡片被操作条遮住。取 210px 留余量。 */
.wb-v2 { padding-bottom: 210px; }
/* ③ FAB 抬到操作条之上:bar 顶 = 56(bottom)+123(高)=179px,
FAB 底须 ≤179-余量,原 76px 让 FAB 落在 bar 区域内。 */
.drawer-fab { bottom: calc(192px + var(--sa-b)); }
/* ④ header 换行收纳,消除 432>375 横向溢出:
brand 第一行,导航+操作按钮换到第二行,副标题隐藏省空间 */
.app-header { flex-wrap: wrap; gap: 8px 10px; padding: 12px 12px 10px; }
.app-subtitle { display: none; }
.brand { flex: 1 1 auto; }
.header-nav { margin-left: 0; flex: 1 1 auto; }
.header-actions { gap: 8px; }
/* 成员身份行 nowrap 且文案长(你好,XX · 今日已用 N 张),手机端隐藏 */
.user-badge { display: none !important; }
/* ⑤ 多角度 checkbox 视觉放大(触达仍走 label,label 已 ≥44px) */
.wb-angle input[type="checkbox"] { width: 20px; height: 20px; }
/* ⑥ 风格卡 3 列(J-UI-33:老板「风格区一直两个卡片一行,要 3 个卡片一行,同一页看到更多风格」)。
recipe-grid 原是 minmax(140px,1fr),347px 内容区会排成 167px×2 列;
J-UI-15 曾强制 1fr 单列(窄卡看不清),J-UI-33 起 ≤640px 改 3 列与桌面口径一致。 */
.wb-cards .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ⑦ header 导航/模式开关可点目标 ≥44px 高(实测 30/25px) */
.header-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.header-mode-seg button { min-height: 44px; }
}
/* ========== 2026-08-13 J-F2:节点/风格卡无示例图占位 + 代表图 ==========
症状:33/34 节点无 sample,风格卡 thumb 是「名字前两字」文字块,用户分不清风格差异。
修法:① 节点无 sample 且无历史出图 → 浅色虚线底 + ◫ 图标 + 「点击生成示例」占位;
② 有历史出图(node_key 匹配 done 任务) → 自动回填最近一张;
③ 风格卡有 sample(style_id 匹配最近成功出图) → 显示真实代表图。 */
/* —— 节点卡占位:与 node-row-sample 同尺寸,浅色底+虚线框 —— */
.node-row-ph {
flex: none;
width: 36px; height: 36px;
border-radius: 8px;
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 1px;
background: linear-gradient(160deg, var(--paper), var(--paper-sink));
border: 1px dashed rgba(var(--gold-deep-rgb),.45);
color: var(--ink-faint);
line-height: 1;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.node-row:hover .node-row-ph {
border-color: var(--gold);
background: linear-gradient(160deg, var(--paper-warm), var(--paper-sink));
}
.node-row-ph i {
font-style: normal;
font-size: 14px;
color: var(--gold-deep);
}
.node-row-ph em {
font-style: normal;
font-size: 8.5px;
letter-spacing: .3px;
white-space: nowrap;
color: var(--ink-faint);
}
/* —— wbV2 竖卡:占位撑满 3:4 图区 —— */
.wb-v2 .wb-cards .node-row-ph {
width: 100% !important;
height: auto !important;
aspect-ratio: 3/4 !important;
border-radius: 0;
border-width: 0;
background: linear-gradient(160deg, var(--paper), var(--paper-sink));
}
.wb-v2 .wb-cards .node-row-ph i {
font-size: 26px;
margin-bottom: 3px;
}
.wb-v2 .wb-cards .node-row-ph em {
font-size: 10px;
letter-spacing: .5px;
}
/* —— 风格卡代表图(recipe-thumb 里真实图铺满;无 sample 保持渐变衬线字占位) —— */
.recipe-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wb-cards .recipe-thumb img {
aspect-ratio: 3/4;
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 前端排版优化 · 节点缩小 + 网格加密(珠宝官)
依据:老板指令「实例风格节点可以缩小,不要太大」+ 浏览器实测
覆盖:node-list 网格 minmax 180→140,节点卡 3:4 图变小,分组头压缩
原则:只追加覆盖,不动原规则;保持东方审美 token
═══════════════════════════════════════════════════════════ */
/* —— 节点网格加密:卡片更小、单屏可见更多 —— */
.wb-cards .node-list,
.wb-cards .node-app-grid .node-list,
.wb-cards .node-app-grid {
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 10px;
}
/* —— 节点卡缩小:圆角/边框更轻,图例 3:4 但整体更紧凑 —— */
.wb-cards .node-row {
border-radius: 8px;
border-color: rgba(var(--gold-deep-rgb),.18);
}
.wb-cards .node-row-main { border-radius: 8px; }
.wb-cards .node-row-sample {
aspect-ratio: 3/4;
}
.wb-cards .node-row-ico {
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--paper-warm), var(--paper-sink));
}
.wb-cards .node-row-ph i { font-size: 22px; margin-bottom: 2px; }
.wb-cards .node-row-ph em { font-size: 9px; letter-spacing: .4px; }
/* —— 节点名字更紧凑 —— */
.wb-cards .node-row-name {
font-size: 11.5px; /* 5 列窄卡保持可读(≥11px) */
padding: 4px 6px 5px;
letter-spacing: .5px;
white-space: nowrap; /* 名字单行省略,不换行 → 卡片等高整齐 */
overflow: hidden;
text-overflow: ellipsis;
}
/* —— 2026-08-19 来源标签/名字/操作按钮左对齐规整(5 列窄卡) —— */
.wb-cards .node-row-src {
margin-left: 6px; /* 与 .node-row-name 的 padding-left(6px) 对齐 */
margin-bottom: 4px; /* 标签与下方 ops 区留呼吸 */
}
.wb-cards .node-row-ops {
justify-content: flex-start; /* 操作按钮左对齐 */
align-items: center;
gap: 2px;
}
/* —— 分组流头压缩:标题更小,减少纵向占位 —— */
.wb-cards .node-flow-head {
margin: 8px 0 0;
}
.wb-cards .node-flow-head .node-flow-name {
font-size: 11px;
}
.wb-cards .node-app-grid .node-group-head {
margin: 6px 0 0;
font-size: 10.5px;
}
/* —— 配方卡同步微缩(与节点一致,整体密度统一) —— */
.wb-cards .recipe-card {
border-radius: 8px;
}
.wb-cards .recipe-thumb img {
aspect-ratio: 3/4;
}
/* —— 风格区容器:限宽更紧凑,减少空白 —— */
.wb-style .wb-cards {
gap: 10px;
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 前端排版优化 · 分区阶段感强化(珠宝官)
依据:老板指令「分区一定要明确」「符合操作逻辑」+ 浏览器实测
做法:壹选产品/贰选风格 各自独立卡片容器+描边+背景微差,中间留分隔
═══════════════════════════════════════════════════════════ */
/* 选产品区:独立容器,浅金描边,与风格区明显分层 */
.wb-prod {
background: linear-gradient(180deg, rgba(var(--paper-rgb),.9), rgba(var(--paper-rgb),.55));
border: 1px solid rgba(var(--gold-deep-rgb),.28);
border-radius: 14px;
padding: 16px 16px 14px;
box-shadow: 0 2px 12px -8px rgba(var(--ink-rgb),.14);
}
.wb-prod .wb-sec-head { margin-bottom: 10px; }
/* 选风格区:独立容器,更浅的纸色,与产品区形成层次 */
.wb-style {
background: rgba(var(--card-rgb),.5);
border: 1px solid rgba(var(--gold-deep-rgb),.16);
border-radius: 14px;
padding: 16px 16px 14px;
box-shadow: 0 2px 10px -10px rgba(var(--ink-rgb),.10);
}
/* 2026-08-19 板块隔离强化:产品区/风格区是两大独立步骤,拉开间距 + 顶部描边,
避免「选产品下面跟着选风格」像同一个大卡片里的两段(老板反馈乱)。 */
.wb-v2 .wb-prod,
.wb-v2 .wb-style {
margin-bottom: 0;
}
.wb-v2 .wb-style {
margin-top: 10px;
border-top: 3px solid rgba(var(--gold-deep-rgb),.55);
}
/* 分区标题强化:印章号更醒目,副标题留白 */
.wb-seal {
border-color: rgba(var(--gold-deep-rgb),.8);
background: rgba(var(--gold-rgb),.10);
}
.wb-sec-head h2 { letter-spacing: 4px; }
.wb-sec-head em { display: block; margin-top: 1px; font-size: 10.5px; }
/* 移动端:容器内边距收窄,保持清晰分区 */
@media (max-width: 640px) {
.wb-prod, .wb-style { padding: 12px 10px 10px; border-radius: 12px; }
/* 2026-08-16 J-UI-4:375px 产品区三卡收窄(卡宽 88px,3:4 图高 ~117px),
整区高度 ≤ 屏高 40%(667×0.4=267px),避免手机端超占比
J-UI-12:上传卡并入后由 .wb-prod-grid 4 列自适应收窄,比例保持 3:4 */
.wb-prod-grid { max-width: 320px; gap: 8px; }
.wb-strip .prod-mini-img { aspect-ratio: 3/4; }
.wb-upload-sub { display: none; }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 三大一级页面改造(方案B:产品库/风格库/资源库独立视图)
老板指令:第一页=产品管理与选品;第二页=对标/复刻/反推/节点/选风格;第三页=资产管理
机制:body.view-product / view-style / view-gallery 控制 wb-prod/wb-style 显隐;
底部生成条(wb-bar)任何视图常驻;手机端步骤条随之切换
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
2026-08-21 三步分页互斥显示铁律(宪法一·A,老板明令)
模型:默认三区全藏 + body view class 决定显哪一区(与 .wb-gen-panel 同构)。
取代两种错误模型:2026-08-20a「默认显示+例外隐藏」(漏显打补丁越补越乱)
与 2026-08-21a/b「三区常显」(违一·A.1,老板「所有页面都混在一起」)。
任何时刻只显一步内容;②选风格页节点/配方/对标完整显示(一·A.2)。
已删残留:view-product 常显 style(R1)、mode-a 双显(R2)、batch-mode 双显(R3)、
view-gallery 死规则(R10)。批量三态勾选与分页不冲突,批量仍走三步(一·A.4)。
═══════════════════════════════════════════════════════════ */
/* 默认三区全藏 */
.wb-v2 .wb-prod,
.wb-v2 .wb-style,
.wb-gen-panel { display: none; }
/* 互斥显示:body view class 决定显哪一区(同特异性后声明生效) */
body.view-product .wb-prod { display: block; } /* ① 只显产品区 */
body.view-style .wb-style { display: block; } /* ② 只显风格区(节点完整) */
body.view-gen .wb-gen-panel { display: block; } /* ③ 只显生成区 */
/* 视图切换动画(轻过渡,不抢眼) */
.wb-prod, .wb-style { transition: opacity .18s ease; }
/* 导航激活态(三页) */
#headerNav a[data-pg="product"] { position: relative; }
/* ═══════════════════════════════════════════════════════════
2026-08-16 页面逻辑重构 v2(老板反馈):
① 顶部三大导航(产品库/风格库/资源库)核心放大
② 中间步骤条已删(HTML),产品/风格/生成统一走底部导航栏(桌面+手机)
③ 单张/批量/设置铺顶部
④ 底部导航栏:产品/风格/生成三 Tab,点击联动 view class
═══════════════════════════════════════════════════════════ */
/* ---- 顶部三大导航:放大、居中、核心感 ---- */
.header-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
}
.header-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 26px;
border-radius: 12px;
font-family: "Songti SC", "STSong", serif;
font-size: 17px;
letter-spacing: 3px;
color: var(--ink-faint);
text-decoration: none;
border: 1px solid transparent;
transition: all .18s;
white-space: nowrap;
}
.header-nav a.on {
color: var(--ink);
border-color: rgba(var(--gold-rgb),.55);
background: linear-gradient(180deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.08));
box-shadow: 0 2px 10px -6px rgba(var(--gold-deep-rgb),.5);
font-weight: 700;
}
.header-nav a:hover { color: var(--ink); }
/* ---- 单张/批量/设置:铺顶部,与导航同排 ---- */
.header-actions { gap: 6px; }
#modeSegTop { flex: none; }
#modeSegTop button { min-height: 38px; padding: 0 14px; }
/* ---- 底部导航栏:桌面端也常驻 ---- */
.wb-tabbar {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 42;
background: rgba(var(--paper-rgb),.97);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(var(--gold-deep-rgb),.25);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.wb-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 54px;
color: var(--ink-faint);
font-size: 12px;
font-family: "Songti SC", "STSong", serif;
letter-spacing: 1px;
text-decoration: none;
transition: color .15s;
}
.wb-tab-ico { font-size: 16px; line-height: 1; }
.wb-tab.on,
.wb-tab[data-step="prod"] { color: var(--cinnabar); font-weight: 700; }
.wb-tab[data-step="style"] { color: var(--ink-faint); font-weight: 400; }
/* 2026-08-21 R7:删除 :has(:target) hash 双轨高亮(锚点跳转已禁,见 portal setView),
统一走 body view class 单一轨道;补 view-gen 高亮(R8) */
body.view-gen .wb-tab[data-step="gen"] { color: var(--cinnabar); font-weight: 700; }
body.view-gen .wb-tab[data-step="prod"],
body.view-gen .wb-tab[data-step="style"] { color: var(--ink-faint); font-weight: 400; }
/* 视图联动:view-style 时风格 Tab 高亮 */
body.view-style .wb-tab[data-step="style"] { color: var(--cinnabar); font-weight: 700; }
body.view-style .wb-tab[data-step="prod"] { color: var(--ink-faint); font-weight: 400; }
/* ---- 布局让位:底部 Tab 抬升操作条 ---- */
.wb-v2 { padding: 14px 14px 150px; }
.wb-bar { bottom: 54px; }
.wb-angle-sel { bottom: 190px; }
.drawer-fab { bottom: calc(74px + var(--sa-b)); }
/* ---- 选中产品提醒:卡片选中态高亮 ---- */
.prod-mini.is-sel,
.wb-strip .prod-mini.is-sel {
border-color: var(--cinnabar) !important;
box-shadow: 0 0 0 2px rgba(var(--cinnabar-rgb),.25);
background: rgba(var(--cinnabar-rgb),.06);
}
.prod-mini.is-sel .prod-mini-name { color: var(--cinnabar); font-weight: 700; }
@media (max-width: 640px) {
.header-nav a { padding: 0 12px; font-size: 14px; letter-spacing: 1px; min-height: 40px; }
#modeSegTop button { min-height: 36px; padding: 0 10px; }
.wb-v2 { padding: 12px 10px 150px; }
}
/* 2026-08-16 顶部导航加强(评审:核心入口视觉权重还不够) */
.header-nav a {
font-size: 18px;
padding: 0 30px;
min-height: 46px;
letter-spacing: 4px;
font-weight: 600;
}
.header-nav a.on {
color: var(--ink);
border-color: rgba(var(--gold-rgb),.7);
background: linear-gradient(180deg, rgba(var(--gold-rgb),.24), rgba(var(--gold-rgb),.10));
box-shadow: 0 3px 14px -6px rgba(var(--gold-deep-rgb),.55);
}
@media (max-width: 640px) {
.header-nav a { font-size: 15px; padding: 0 14px; letter-spacing: 1px; }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 顶部重构:库总入口下拉(产品库/风格库/资源库 对齐)
老板指令:顶部=操作层(单张/批量/设置);三库收进「库」中,点击直达
═══════════════════════════════════════════════════════════ */
/* 顶部导航容器:左品牌 + 中库入口 + 右操作 */
.header-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
min-width: 0;
padding-left: 4px;
}
/* 「库」总入口按钮 */
.lib-nav { position: relative; }
.lib-nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 20px;
border: 1px solid rgba(var(--gold-deep-rgb),.45);
border-radius: 12px;
background: linear-gradient(180deg, rgba(var(--paper-rgb),.95), rgba(var(--paper-warm-rgb),.75));
color: var(--ink);
font-family: "Songti SC", "STSong", serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
cursor: pointer;
box-shadow: 0 2px 10px -6px rgba(var(--gold-deep-rgb),.5);
transition: all .18s;
}
.lib-nav-btn:hover { border-color: rgba(var(--gold-rgb),.85); box-shadow: 0 3px 14px -6px rgba(var(--gold-deep-rgb),.6); }
.lib-nav-btn[aria-expanded="true"] { border-color: var(--cinnabar); }
.lib-nav-ico { color: var(--cinnabar); font-size: 15px; }
.lib-nav-caret { font-size: 11px; color: var(--ink-faint); transition: transform .18s; }
.lib-nav-btn[aria-expanded="true"] .lib-nav-caret { transform: rotate(180deg); }
/* 下拉菜单:宣纸底 + 鎏金描边,三项对齐 */
.lib-nav-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 90;
min-width: 236px;
background: rgba(var(--card-rgb),.98);
backdrop-filter: blur(12px);
border: 1px solid rgba(var(--gold-deep-rgb),.4);
border-radius: 14px;
box-shadow: 0 14px 40px -18px rgba(var(--ink-rgb),.45);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.lib-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 10px;
text-decoration: none;
color: var(--ink);
font-family: "Songti SC", "STSong", serif;
font-size: 15px;
letter-spacing: 2px;
transition: all .15s;
cursor: pointer;
}
.lib-nav-item em {
margin-left: auto;
font-style: normal;
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0;
}
.lib-nav-item:hover { background: rgba(var(--gold-rgb),.14); }
.lib-nav-item.is-active { background: rgba(var(--cinnabar-rgb),.08); color: var(--cinnabar); font-weight: 700; }
.lib-nav-item.is-active em { color: var(--cinnabar); }
.lib-nav-dot {
flex: none;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(var(--gold-deep-rgb),.55);
border-radius: 50%;
background: rgba(var(--gold-rgb),.12);
color: var(--cinnabar);
font-size: 11px;
}
/* 底部导航高亮跟随 view 视图(R8:补 view-gen,revUse 跳生成页 Tab 有指示) */
body.view-product .wb-tab[data-step="prod"] { color: var(--cinnabar); font-weight: 700; }
body.view-style .wb-tab[data-step="style"] { color: var(--cinnabar); font-weight: 700; }
body.view-gen .wb-tab[data-step="gen"] { color: var(--cinnabar); font-weight: 700; }
@media (max-width: 640px) {
.lib-nav-btn { padding: 0 12px; font-size: 15px; letter-spacing: 1px; min-height: 40px; }
.lib-nav-menu { min-width: 200px; left: -40px; }
.lib-nav-item em { display: none; }
}
/* 2026-08-16 顶部层级优化:品牌压缩,库+操作层突出(评审:品牌信息太密) */
.app-title { font-size: clamp(.95rem, 1.6vw, 1.15rem); }
.app-subtitle { font-size: 10.5px; opacity: .85; }
.brand-seal { transform: scale(.82); transform-origin: left center; }
@media (max-width: 640px) {
.app-subtitle { display: none; }
.brand-seal { transform: scale(.7); }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 顶部层级重构(老板手机实测反馈):
① 第一层 = 操作层(单张/批量/设置)最显眼
② 三库收进「库」下拉,对齐美观
③ 品牌压缩(手机端只留印章+短标题)
═══════════════════════════════════════════════════════════ */
/* 桌面:品牌左 + 库/操作右(保持一行) */
@media (min-width: 641px) {
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
}
/* 手机(≤640px):两行 —— 第一行=操作层(单张/批量/设置+库),第二行=品牌(压缩) */
@media (max-width: 640px) {
.app-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 10px;
padding-bottom: 10px;
}
/* 第一行:操作层(单张/批量/设置 + 库下拉),最显眼 */
.header-actions { order: 1; }
.header-nav { order: 2; margin-left: auto; }
/* 第二行:品牌压缩(印章小 + 标题短) */
.brand { order: 3; flex-basis: 100%; gap: 8px; }
.brand-seal { width: 32px; height: 32px; }
.brand-seal .seal-char { font-size: .58rem; }
.app-title { font-size: .86rem; letter-spacing: .02em; white-space: nowrap; }
.app-subtitle { display: none; }
.lib-nav-btn { min-height: 38px; padding: 0 12px; font-size: 14px; letter-spacing: 1px; }
.lib-nav-menu { min-width: 210px; left: auto; right: 0; }
.header-actions .btn-gear { width: 36px; height: 36px; }
#modeSegTop button { min-height: 34px; padding: 0 10px; font-size: 12.5px; }
}
/* 2026-08-16 操作层强化:批量/设置按钮更醒目(老板:第一顶=设置和批量) */
#modeSegTop button {
border: 1px solid rgba(var(--gold-deep-rgb),.35);
background: rgba(var(--paper-rgb),.7);
color: var(--ink-faint);
font-weight: 600;
}
#modeSegTop button.on {
background: linear-gradient(180deg, var(--ink), var(--ink-soft));
color: var(--paper);
border-color: var(--ink);
}
#btnSettings {
border-color: rgba(var(--gold-deep-rgb),.5);
background: linear-gradient(180deg, rgba(var(--paper-rgb),.9), rgba(var(--paper-warm-rgb),.7));
}
#btnSettings .gear-icon { color: var(--ink); font-size: 17px; }
/* ═══════════════════════════════════════════════════════════
2026-08-16 手机端 header 精简(375px 实测:第一行6元素太挤)
① 隐藏低频圆按钮(返回/刷新),第一行只留 单张|批量 + 设置 + 库
② 品牌第二行更紧凑
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* 刷新收进浏览器(低频,页面下拉/浏览器刷新可替代);返回保留(门户入口) */
.header-actions #btnRefresh { display: none; }
/* 第一行:单张|批量 + 设置 + 库 —— 紧凑对齐 */
.header-actions { gap: 6px; }
#modeSegTop button { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.header-actions .btn-gear { width: 36px; height: 36px; }
.lib-nav-btn { min-height: 36px; padding: 0 12px; font-size: 14px; letter-spacing: 1px; }
/* 品牌第二行:印章更小 + 标题更短 */
.brand { gap: 6px; margin-top: 2px; }
.brand-seal { width: 28px; height: 28px; }
.brand-seal .seal-char { font-size: .52rem; }
.app-title { font-size: .82rem; letter-spacing: .02em; white-space: nowrap; }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 顶部最终布局 + 生成页统一(老板明令):
① 第一行=品牌+设置(设置最右);第二行=单张/批量+库入口
② 产品/风格页不显示生成条;生成功能统一到第三个「生成」页
③ 生成页包含:比例/参考/多角度
═══════════════════════════════════════════════════════════ */
/* ---- header 两行布局 ---- */
.app-header {
display: block !important;
padding: calc(18px + var(--sa-t)) max(var(--gap), var(--sa-r)) 10px max(var(--gap), var(--sa-l));
}
.header-row-1 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.header-row-1 .brand { gap: .6em; }
.header-row-2 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.header-row-2 .header-mode-seg { margin-right: auto; }
.header-row-2 .header-nav { flex: none; margin: 0; }
.header-row-2 #btnBack { margin-left: 2px; }
.header-row-1-right { flex: none; display: flex; align-items: center; }
/* 品牌字号(更紧凑) */
.app-title { font-size: clamp(.95rem, 1.6vw, 1.2rem); }
.app-subtitle { font-size: .72rem; margin-top: 1px; }
/* ---- 生成条只在「生成」视图显示 ---- */
body.view-gen .wb-bar { display: flex !important; }
/* J-UI-15 2026-08-16:旧多角度 fixed 条(出图角度)在生成页强制隐藏 —— 生成页已有
#genAngleSel 新角度选择,portal.js 已设 hidden,但此前 display:flex!important
覆盖 hidden 使旧条浮出盖住 #wbGenBig 生成按钮;隐藏不影响提交逻辑(提交读 checked 状态) */
body.view-gen .wb-angle-sel { display: none !important; }
body.view-product .wb-bar,
body.view-style .wb-bar,
body.view-product .wb-angle-sel,
body.view-style .wb-angle-sel { display: none !important; }
/* 生成页视图:互斥模型下 wb-prod/wb-style 默认全藏,view-gen 只显生成面板。
2026-08-21a「只藏 prod 不藏 style」残留规则已删(违一·A.2);
.wb-gen-panel 显隐由上方统一互斥块管理(默认 none + view-gen 显示)。 */
@media (max-width: 640px) {
.app-header { padding: calc(14px + var(--sa-t)) 10px 8px; }
.header-row-1 { margin-bottom: 6px; }
.brand-seal { width: 30px; height: 30px; }
.brand-seal .seal-char { font-size: .54rem; }
.app-title { font-size: .84rem; letter-spacing: .02em; white-space: nowrap; }
.app-subtitle { display: none; }
.header-row-2 { gap: 8px; }
#modeSegTop button { min-height: 32px; padding: 0 10px; font-size: 12px; }
.lib-nav-btn { min-height: 32px; padding: 0 10px; font-size: 13px; letter-spacing: 1px; }
.header-row-2 .btn-gear { width: 32px; height: 32px; }
.lib-nav-menu { min-width: 200px; left: auto; right: 0; }
.lib-nav-item em { display: none; }
}
/* ---- 「生成」页面板样式 ---- */
.wb-gen-panel {
background: rgba(var(--card-rgb),.5);
border: 1px solid rgba(var(--gold-deep-rgb),.16);
border-radius: 14px;
padding: 16px;
margin-top: 0;
}
/* J-UI-15 2026-08-16:生成页底部安全间距 —— 生成按钮 #wbGenBig 是面板内最后一个元素,
底部被 wb-bar(操作条)+ wb-tabbar 遮挡区盖住(桌面 ≈102px,移动 ≈179px);
加 margin-bottom 把按钮完整抬到遮挡区之上,完整可见可点 */
/* J-UI-18 2026-08-16:移动端 140px→210px —— 老板「手机端生成管理区底部还是有遮挡」;
对齐列表页 .wb-v2 padding-bottom 210px 口径(style.css:4802),wb-bar 换行 123px + wb-tabbar 57px ≈ 180px,210px 留安全区余量 */
body.view-gen .wb-gen-panel { margin-bottom: 110px; }
@media (max-width: 640px) {
body.view-gen .wb-gen-panel { margin-bottom: 210px; }
}
.wb-gen-form { display: flex; flex-direction: column; gap: 18px; }
/* ---- 2026-08-20 双入口(反推风格/替换产品):生成页顶部二选一,选中态主题红高亮 ---- */
.wb-gen-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-gen-entry-btn {
border: 1px solid rgba(var(--gold-deep-rgb),.3);
background: rgba(var(--card-rgb),.4);
border-radius: 9px;
padding: 9px 16px;
font-size: 14px;
color: var(--ink);
cursor: pointer;
transition: all .15s ease;
min-height: 44px; /* 2026-08-25 触达铁律:双入口按钮统一≥44px(原约40-41px) */
display: inline-flex; /* 垂直居中,防 padding 叠加导致高度参差 */
align-items: center;
}
.wb-gen-entry-btn:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.wb-gen-entry-btn.on {
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar));
border-color: var(--cinnabar-deep);
color: #F7EDE6;
font-weight: 700;
box-shadow: 0 4px 12px -6px var(--cinnabar-deep);
}
.wb-gen-entry-tip { flex: 1 1 100%; font-size: 12px; color: var(--ink-faint); letter-spacing: .5px; }
/* ---- 2026-08-20 生成管理区风格提醒:已选风格时生成按钮上方「已选风格:xxx」 ---- */
.wb-gen-style-hint {
border: 1px solid rgba(var(--cinnabar-rgb),.3);
background: rgba(var(--cinnabar-rgb),.07);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
color: var(--cinnabar-deep);
text-align: center;
}
.wb-gen-style-hint b { font-weight: 700; }
.wb-gen-field { display: flex; flex-direction: column; gap: 8px; }
.wb-gen-label { font-size: 13px; color: var(--ink-faint); letter-spacing: 1px; }
/* ---- J-UI-26 2026-08-16:已选摘要区(产品+风格两行,克制浅金描边,与 genStyleSummary 同语系) ---- */
.wb-gen-summary {
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid rgba(var(--gold-deep-rgb),.25);
border-radius: 10px;
padding: 12px 14px;
background: rgba(var(--gold-deep-rgb),.04);
}
/* 2026-08-21 批量模式声明条:三种组合模式一眼明确(多品多风格/多品一风格/单品多风格) */
.wb-gen-mode {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(var(--cinnabar-rgb),.4);
border-radius: 8px;
padding: 8px 12px;
background: rgba(var(--cinnabar-rgb),.08);
margin-bottom: 10px;
}
.wb-gen-mode-tag {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
color: #fff;
background: var(--cinnabar);
border-radius: 4px;
padding: 2px 8px;
}
.wb-gen-mode-txt {
font-size: 13px;
color: var(--ink);
}
/* 2026-08-21 强制品类选择浮层:上传产品图后自动弹出,品类必选(防「全部默认项链」) */
.catpick-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.55);
backdrop-filter: blur(2px);
}
.catpick-box {
width: min(480px, 92vw);
max-height: 86vh;
overflow-y: auto;
background: var(--paper, #fff);
border-radius: 14px;
padding: 22px 20px 26px;
box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.catpick-title {
font-size: 18px;
font-weight: 700;
color: var(--ink, #222);
text-align: center;
margin-bottom: 6px;
}
.catpick-sub {
font-size: 12px;
color: var(--ink-faint, #888);
text-align: center;
margin-bottom: 18px;
line-height: 1.5;
}
.catpick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.catpick-btn {
min-height: 64px;
border: 1px solid rgba(var(--gold-deep-rgb, 201,168,79),.4);
border-radius: 10px;
background: rgba(var(--gold-deep-rgb, 201,168,79),.06);
font-size: 15px;
font-weight: 600;
color: var(--ink, #222);
cursor: pointer;
transition: all .15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.catpick-btn:hover { background: rgba(var(--gold-deep-rgb, 201,168,79),.16); border-color: var(--gold, #C9A84F); }
.catpick-btn:active { transform: scale(.96); }
@media (max-width: 480px) {
.catpick-grid { grid-template-columns: repeat(2, 1fr); }
}
.wb-gen-summary-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb-gen-summary-key {
flex: 0 0 auto;
width: 32px;
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 1px;
}
.wb-gen-summary-thumb {
flex: 0 0 auto;
width: 42px; height: 42px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(var(--gold-deep-rgb),.35);
background: rgba(var(--card-rgb),.6);
}
.wb-gen-summary-name {
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wb-gen-summary-name.is-batch {
color: var(--cinnabar);
background: rgba(var(--cinnabar-rgb),.08);
border: 1px solid rgba(var(--cinnabar-rgb),.25);
border-radius: 8px;
padding: 6px 10px;
font-weight: 600;
}
.wb-gen-summary-empty { color: var(--ink-faint); font-weight: 400; }
.wb-gen-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-gen-opt {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid rgba(var(--gold-deep-rgb),.3);
border-radius: 8px;
padding: 8px 14px;
font-size: 14px;
cursor: pointer;
transition: all .15s;
}
.wb-gen-opt input[type="radio"] { accent-color: var(--cinnabar); }
.wb-gen-opt:has(input:checked) {
border-color: var(--cinnabar);
background: rgba(var(--cinnabar-rgb),.06);
color: var(--cinnabar);
font-weight: 600;
}
.wb-gen-refs { min-height: 40px; display: flex; align-items: center; }
.wb-gen-ref-empty { font-size: 12.5px; color: var(--ink-faint); }
/* ---- 2026-08-19 三区联动:已选产品/风格卡片排版(选品区/风格区/生成区三处共用) ---- */
.wb-gen-chosen { display: flex; flex-direction: column; gap: 8px; }
.wb-gen-chosen-head, .wb-chosen-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; color: var(--ink-faint); letter-spacing: 1px;
}
.wb-gen-chosen-head em, .wb-chosen-head em {
font-style: normal; font-weight: 600; color: var(--cinnabar);
}
.wb-gen-chosen-grid, .wb-chosen-grid {
display: flex; flex-wrap: wrap; gap: 8px;
}
.wb-gen-chip {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid rgba(var(--gold-deep-rgb),.3);
border-radius: 8px;
padding: 4px 8px 4px 4px;
background: rgba(var(--card-rgb),.5);
font-size: 12px;
}
.wb-gen-chip img {
width: 32px; height: 42px; object-fit: cover; border-radius: 6px;
border: 1px solid rgba(var(--gold-deep-rgb),.35);
}
.wb-gen-chip > span {
max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--ink); font-weight: 500;
}
.wb-gen-chip-style {
padding: 6px 12px;
background: rgba(var(--gold-deep-rgb),.08);
color: var(--ink);
}
.wb-gen-chip-style > span { max-width: 140px; }
.wb-gen-chosen-empty { font-size: 12.5px; color: var(--ink-faint); }
.wb-chosen-bar {
margin-top: 12px;
display: flex; flex-direction: column; gap: 8px;
border: 1px dashed rgba(var(--gold-deep-rgb),.4);
border-radius: 10px;
padding: 10px 12px;
background: rgba(var(--gold-deep-rgb),.04);
}
.wb-gen-angle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.wb-gen-angle-sel { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 4px; }
.wb-gen-est { font-size: 13px; color: var(--cinnabar); font-weight: 600; }
.wb-gen-big {
width: 100%;
min-height: 52px;
font-size: 16px;
letter-spacing: 4px;
border: none;
border-radius: 12px;
background: linear-gradient(180deg, var(--cinnabar-lit), var(--cinnabar-deep));
color: var(--paper);
cursor: pointer;
box-shadow: 0 6px 18px -8px rgba(var(--cinnabar-rgb),.55);
transition: all .18s;
}
.wb-gen-big:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(var(--cinnabar-rgb),.65); }
.wb-gen-big:disabled { opacity: .5; cursor: default; transform: none; }
/* J-UI-6 2026-08-16:生成按钮统一反馈 —— 点击转圈+置灰,生成完复位(portal.js 控制 is-loading) */
.wb-gen-big.is-loading { pointer-events: none; opacity: .8; cursor: default; transform: none; box-shadow: none; }
.wb-gen-big.is-loading::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
border: 2px solid rgba(var(--paper-rgb),.35);
border-top-color: var(--paper);
border-radius: 50%;
animation: spin .8s linear infinite;
vertical-align: -2px;
}
/* 2026-08-16 手机端微调(375px 实测评审):
① 设置固定最右(品牌左、设置右)
② 第二行只留 单张/批量 + 库(隐藏刷新/返回,低频) */
@media (max-width: 640px) {
.header-row-1 { position: relative; }
.header-row-1-right { margin-left: auto; }
.header-row-2 #btnBack { display: none; }
.header-row-2 .header-mode-seg { margin-right: auto; }
.header-row-2 .header-nav { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 J-UI-3:风格库「3 列 + 3:4 图 + 缩卡排版」(老板指令)
依据:VS 报告第 1 节 + 老板「风格库缩小卡片按列 3 个排版」。
覆盖:① #styleGrid 固定 3 列(桌面/手机一致,ID 特异性压过 .lib-grid
的 auto-fill 双份定义);② 风格卡 3:4 代表图 .sl-thumb,无 sample
时衬线字占位(J-F2 逻辑保留);③ recipe-thumb 全站唯一 3:4。
原则:只追加覆盖,不动原规则;保持东方审美 token。
═══════════════════════════════════════════════════════════ */
/* —— ① 风格库网格固定 3 列(桌面也 3 列,卡片更大更可读) —— */
#styleGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* —— ② 风格卡 3:4 代表图(有图铺满 / 无图文字占位) —— */
.sl-thumb {
position: relative;
width: 100%;
padding-top: 133.33%; /* 3:4,老式 padding 占位,免疫 flex 塌陷 */
flex: none;
overflow: hidden;
background: linear-gradient(160deg, var(--paper), var(--paper-sink));
}
.sl-thumb img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.sl-thumb-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Songti SC", "Noto Serif SC", serif;
font-size: 1.5rem;
letter-spacing: .1em;
}
/* ===== J-UI-20:风格卡统一占位(非 2 字衬线字)—— 有图铺真图、无图统一占位 =====
与节点卡 node-row-ph 同范式:浅底 + 虚线框 + ◫ 图标 + 小字文案。
用于工作区配方卡/对标预设卡(recipe-thumb)与风格库卡(sl-thumb),三处共用。 */
.style-thumb-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
height: 100%;
background: linear-gradient(160deg, var(--paper), var(--paper-sink));
border: 1px dashed rgba(var(--gold-deep-rgb), .45);
color: var(--ink-faint);
font-family: inherit;
line-height: 1;
}
.style-thumb-ph i {
font-style: normal;
font-size: 26px;
color: var(--gold-deep);
}
.style-thumb-ph em {
font-style: normal;
font-size: 10px;
letter-spacing: .5px;
color: var(--ink-faint);
}
/* sl-thumb 是 padding-top 占位容器,占位需 absolute 撑满 */
.sl-thumb .style-thumb-ph {
position: absolute;
inset: 0;
width: auto;
height: auto;
}
/* —— ③ recipe-thumb 全站统一 3:4(16:9 旧值作废,消除自相矛盾) —— */
.recipe-thumb {
aspect-ratio: 3 / 4 !important;
}
/* —— 缩卡排版:信息区紧凑,卡高可控 —— */
#styleGrid .sl-card-top { padding: 7px 8px 0; }
/* 2026-08-16 J-UI-28:sl-swatches 色卡条已从 style_lib.js 移除(老板明确不要色卡),
原规则 #styleGrid .sl-swatches { height:16px; margin:5px 8px 0; } 作废,不再渲染 */
#styleGrid .lib-card-body { padding: 6px 8px 9px; gap: 2px; }
#styleGrid .lib-card-name { font-size: .78rem; }
#styleGrid .lib-card-cat { font-size: .62rem; padding: 1px 6px; }
#styleGrid .lib-card-spec { font-size: .64rem; }
#styleGrid .sl-tags { margin-top: 2px; }
/* 手机 375px:三列下信息只留 名称/品类,进一步压缩(卡高 ≤ 屏高 1/3) */
@media (max-width: 640px) {
#styleGrid { gap: 8px; padding: 12px 12px; }
#styleGrid .lib-card-spec { display: none; }
#styleGrid .sl-tags { display: none; }
#styleGrid .sl-rating { display: none; }
#styleGrid .sl-card-top { padding: 6px 6px 0; }
/* J-UI-28:手机端 sl-swatches 原规则 height:12px 作废(色卡条已移除) */
#styleGrid .lib-card-body { padding: 4px 6px 7px; }
#styleGrid .lib-card-name { font-size: .68rem; }
#styleGrid .lib-card-cat { font-size: .56rem; padding: 0 5px; }
#styleGrid .sl-thumb-ph { font-size: 1.1rem; }
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 J-UI-16:风格库弹层(styleGrid)桌面端限宽缩卡(复查收尾)
依据:老板「风格库卡片缩小,三排为一列做好适配」+ 复查实测
(375px 已 3 列达标 J-UI-3;桌面 1280px 卡高 622px 仍属大卡)。
做法:桌面/平板(>640px)列宽上限 200px + 网格居中,卡高≈337px,
与手机 3 列同密度;手机规则(J-UI-3 块)完全不动。
原则:只追加覆盖,不动原规则;与工作区风格卡(recipe-card 3:4)同规格。
═══════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
#styleGrid {
grid-template-columns: repeat(3, minmax(0, 200px));
justify-content: center;
align-content: start;
}
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 J-UI-33:手机端风格区 3 列一行(快捷节点 + 对标卡)
老板「风格区一直两个卡片一行,要 3 个卡片一行,同一页看到更多风格」。
根因:① 5082 行 .node-app-grid auto-fill minmax(132px,1fr) 在 375px 内容宽
下自动排 2 列,手机断点内无 3 列覆盖;② .recipe-grid 手机断点原 1fr 单列。
做法:本块置于 5082 全局规则之后,同等优先级后者胜出;
.node-list 与 .node-app-grid 同被 5082 命中,一并覆盖为 3 列。
只影响 ≤640px,桌面 min-width:641px 块不受影响。
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.wb-cards,
.wb-cards .node-app-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 2026-08-19:手机节点卡 3 列 + gap 缩到 8px(桌面 5 列已收紧) */
.wb-cards .node-list,
.wb-cards .node-app-grid .node-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════════
2026-08-16 J-UI-19:制作区风格三列一行
依据:老板「制作区风格要三列一行,两列视觉太大」+ VS第三批卡4;
实测 1280px 工作区 node-list 7 列/recipe-grid 6 列,卡太密,
auto-fill minmax(140px) 在 1018px 内容宽下仍 ≥6 列,无法达 3 列。
做法:桌面/平板(>640px)固定 3 列,与风格库 #styleGrid 三列口径一致;
手机(≤640px)原为 J-UI-15 单列规则,J-UI-33 起与桌面同为 3 列。
原则:只追加覆盖,不动原规则(原 200px 已统一改 140px 口径)。
2026-08-19 调整:节点卡(node-list/node-app-grid)固定 5 列(一排 5 个),
recipe-grid(风格/参考配方)保持 3 列不变 —— 节点网格与配方网格解耦。
═══════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
.wb-cards,
.wb-cards .node-app-grid,
.wb-cards .node-list,
.wb-cards .node-app-grid .node-list {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wb-cards .recipe-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ===== 2026-08-18 批量选品 UI 统一东方美学(覆盖旧蓝色 --brand) ===== */
.batch-picker {
background: var(--paper, #F6F1E7);
border: 1px solid rgba(169,139,61,.3);
}
.batch-picker-head { border-bottom: 1px solid rgba(169,139,61,.25); }
.batch-picker-title { font-family: "Songti SC", serif; letter-spacing: 1px; }
.batch-picker-cat {
border-color: rgba(169,139,61,.4);
color: #8A7A58;
font-family: "Songti SC", serif;
}
.batch-picker-cat.is-active {
border-color: #A03028;
color: #A03028;
background: rgba(160,48,40,.06);
}
.batch-picker-grid .batch-picker-card {
background: #FCF9F2;
border: 1px solid rgba(169,139,61,.22);
}
.batch-picker-grid .batch-picker-card:hover { border-color: #C9A84F; }
.batch-picker-card.is-selected {
outline: 2px solid #A03028;
outline-offset: 1px;
}
.batch-picker-check.is-on {
background: #A03028;
border-color: #A03028;
}
.batch-picker-more {
border-color: rgba(169,139,61,.35);
color: #8A7A58;
font-family: "Songti SC", serif;
letter-spacing: 1px;
}
.batch-picker-more:hover { border-color: #C9A84F; color: #A98B3D; }
.batch-picker-count b { color: #A03028; }
.batch-picker-foot { border-top: 1px solid rgba(169,139,61,.25); }
/* 2026-08-18 J-UI-35 滚动修复:grid 行被 stretch 压缩(卡 body 4px,内容无溢出→不能滚动)
→ align-items:start 行高按内容 + body flex:none 防压缩 + grid min-height:0 允许收缩滚动 */
.batch-picker-grid {
flex: 1 1 0;
min-height: 0;
align-items: start;
align-content: start;
grid-auto-rows: max-content; /* 新增：与 lib-grid 同契约 */
}
.batch-picker-grid .batch-picker-card .lib-card-body {
flex: none;
}
.batch-picker-grid .batch-picker-card {
flex: none;
height: auto;
}
/* 2026-08-18 J-UI-35b:batch-picker 高度明确化 —— flex:1 的 grid 才能分到剩余空间滚动 */
.batch-picker {
height: min(86vh, 900px);
}
/* ===== 2026-08-18 J-UI-36 批量面板主体 UI 统一东方美学(蓝→朱砂/鎏金) ===== */
.batch-mode.is-active {
border-color: #A03028;
color: #A03028;
background: rgba(160,48,40,.06);
}
.batch-style-text:focus { border-color: #C9A84F; }
.batch-col input { accent-color: #A03028; }
.batch-picker-cat.is-active {
border-color: #A03028;
color: #A03028;
background: rgba(160,48,40,.06);
}
.batch-picker-more:hover { border-color: #C9A84F; color: #A98B3D; }
.batch-picker-card.is-selected { outline: 2px solid #A03028; }
.batch-picker-check.is-on { background: #A03028; border-color: #A03028; }
.batch-picker-count b { color: #A03028; }
.batch-item-lighter:hover { border-color: #C9A84F; }
.batch-item-lighter.is-on {
border-color: #A03028;
background: rgba(160,48,40,.08);
}
.batch-fold:hover { border-color: #C9A84F; color: #A98B3D; }
.batch-fold.is-open {
border-color: #A03028;
color: #A03028;
background: rgba(160,48,40,.05);
}
/* 批量面板主容器:宣纸底 + 金线 */
.batch-panel {
background: var(--paper, #F6F1E7);
border: 1px solid rgba(169,139,61,.28);
border-radius: 14px;
}
.batch-head, .batch-panel .batch-title {
font-family: "Songti SC", "STSong", serif;
letter-spacing: 2px;
}
/* ===================== 2026-08-18 UI角色区分 ===================== */
/* 成员顶栏配额徽章「今日: 12/50 张」 */
.app-user-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
margin-right: 8px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(var(--gold-deep-rgb, 169, 139, 61), .35);
background: rgba(var(--gold-deep-rgb, 169, 139, 61), .08);
color: var(--ink-soft, #6b5b3e);
font-size: .74rem;
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.app-user-badge.is-exhausted {
color: var(--cinnabar, #A03028);
border-color: rgba(var(--cinnabar-rgb, 160, 48, 40), .5);
background: rgba(var(--cinnabar-rgb, 160, 48, 40), .08);
}
/* 机主「管理」入口:把圆形 btn-gear 拉成 pill 文案按钮 */
.btn-admin {
width: auto;
height: var(--tap, 40px);
border-radius: 999px;
padding: 0 14px;
font-size: .82rem;
letter-spacing: .06em;
font-weight: 600;
}
/* 生成前配额预估「本次将消耗 N 张, 剩余 M 张」 */
.gen-confirm-quota {
font-size: .74rem;
font-weight: 600;
color: var(--ink-soft, #6b5b3e);
padding-left: 10px;
border-left: 1px solid #EDE6D6;
}
.gen-confirm-quota.is-over {
color: var(--cinnabar, #A03028);
}
/* 管理后台弹层:比普通设置弹窗更宽 */
.admin-modal {
width: min(720px, 100%);
}
.admin-scrim { z-index: 70; }
/* 后台 Tab 栏 */
.admin-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line, #E8E1D0);
}
.admin-tab {
flex: none;
min-height: 34px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--line, #E8E1D0);
background: var(--card, #fff);
color: var(--ink-soft, #6b5b3e);
font-size: .82rem;
cursor: pointer;
transition: all .16s;
}
.admin-tab.is-active {
background: var(--cinnabar, #A03028);
border-color: var(--cinnabar, #A03028);
color: #F7EDE6;
}
.admin-tab:hover:not(.is-active) {
border-color: var(--gold, #b8935a);
color: var(--cinnabar, #A03028);
}
/* 后台内容区 */
.admin-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-loading { color: var(--ink-faint, #a99); text-align: center; padding: 24px 0; }
.admin-hint {
font-size: .78rem;
color: var(--ink-soft, #6b5b3e);
line-height: 1.6;
}
.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* 使用统计 / 数据看板的横向条形图 */
.admin-chart {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-chart-row {
display: flex;
align-items: center;
gap: 10px;
font-size: .8rem;
}
.admin-chart-name {
flex: 0 0 72px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink-soft, #6b5b3e);
font-weight: 600;
}
.admin-chart-bar {
flex: 1;
height: 14px;
border-radius: 7px;
background: rgba(var(--gold-deep-rgb, 169, 139, 61), .12);
overflow: hidden;
}
.admin-chart-bar i {
display: block;
height: 100%;
border-radius: 7px;
background: linear-gradient(90deg, var(--gold, #b8935a), var(--gold-deep, #8a6d3b));
}
.admin-chart-val {
flex: 0 0 auto;
font-size: .74rem;
color: var(--ink-faint, #a99);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* 数据看板统计卡 */
.admin-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.admin-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
border: 1px solid var(--line, #E8E1D0);
border-radius: 10px;
background: var(--card, #fff);
}
.admin-card b {
font-size: 1.3rem;
color: var(--cinnabar, #A03028);
font-variant-numeric: tabular-nums;
}
.admin-card span {
font-size: .72rem;
color: var(--ink-faint, #a99);
letter-spacing: .04em;
}
/* ===================== 2026-08-19 共享 UI:只读卡角标 + 共享开关 ===================== */
/* 只读卡「共享/出厂」角标(节点卡/配方卡通用,金色系小徽) */
.node-row-shared {
flex: none;
display: inline-flex;
align-items: center;
padding: 1px 7px;
font-size: .6rem;
font-weight: 600;
letter-spacing: .08em;
color: var(--gold-deep, #8a6d1f);
border: 1px solid rgba(var(--gold-rgb, 165, 130, 60), .45);
border-radius: 20px;
background: rgba(var(--gold-rgb, 165, 130, 60), .1);
line-height: 1.6;
white-space: nowrap;
}
.node-row-shared.is-builtin {
color: var(--cinnabar, #A03028);
border-color: rgba(var(--cinnabar-rgb, 160, 48, 40), .4);
background: rgba(var(--cinnabar-rgb, 160, 48, 40), .07);
}
/* 共享开关按钮(🔓共享=金色点亮;🔒私有=灰) */
.node-op-share {
font-size: .72rem !important;
letter-spacing: .02em;
color: var(--ink-faint, #8A7F6C) !important;
white-space: nowrap;
}
.node-op-share.is-shared {
color: var(--gold-deep, #8a6d1f) !important;
background: rgba(var(--gold-rgb, 165, 130, 60), .12) !important;
border-radius: 8px;
}
/* 只读卡「复制使用」 */
.node-op-dupuse {
font-size: .72rem !important;
letter-spacing: .02em;
color: var(--gold-deep, #8a6d1f) !important;
white-space: nowrap;
}
/* 窄卡(5 列 wb-cards)下开关/复制使用字号再收紧,防挤爆 */
.wb-cards .node-op-share,
.wb-cards .node-op-dupuse {
font-size: .62rem !important;
padding: 0 4px;
}
.wb-cards .node-row-shared {
font-size: .54rem;
padding: 0 5px;
}
/* ============================================================
2026-08-24 设置面板 · 东方美学分区(机主管理页排版)
1) 设置 tab 下划线式 —— 旧 HTML 内联 style 与 JS 内联写色
(switchSettingsTab 的 b.style.color)一律用 !important 压过;
等 index.html 收敛内联后本样式仍是唯一真源,双保险。
2) .settings-section 分组卡片 + .settings-section-title 分区小标题
3) 管理后台 4 Tab(成员/统计/设置/看板):胶囊 → 下划线式
4) 渠道选择 tab:非激活去内联白底,激活朱砂实底沿用
5) .member-list 成员行:行式卡片 / 鎏金徽章标签 / 间距统一
============================================================ */
/* ---------- 1. 设置页 Tab 栏:下划线式(通用设置 / 我的API密钥) ---------- */
.settings-tabs {
display: flex;
gap: 8px;
flex: none;
margin-bottom: 16px;
/* 压过旧内联 border-bottom: 2px solid #eee */
border-bottom: 1px solid var(--line-soft) !important;
}
.settings-tab {
flex: 1 !important;
position: relative;
min-height: var(--tap); /* ≥44px 触达 */
padding: 12px 8px !important;
border: none !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px !important; /* 下划线压住容器底线 */
background: none !important;
cursor: pointer;
/* 东方美学衬线:压过 index.html 内嵌 critical style 的 font-sans */
font-family: var(--font-serif) !important;
font-size: .92rem !important;
letter-spacing: .12em;
color: var(--ink-faint) !important; /* 压内联/JS 的 #999 */
white-space: nowrap;
transition: color .18s, border-color .18s;
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
.settings-tab:hover { color: var(--cinnabar) !important; }
.settings-tab.is-active {
color: var(--cinnabar) !important; /* 压 JS 内联 #A03028 */
border-bottom-color: var(--cinnabar) !important;
font-weight: 600 !important; /* 压 JS 内联 normal */
}
/* ---------- 2. 设置面板内分区:统一字段间距 + 分组卡片 ---------- */
/* 与 index.html 内嵌 critical style 的 .settings-panel(gap:18px)对齐,外部兜底 */
.settings-panel {
display: flex;
flex-direction: column;
gap: 18px; /* 统一字段间距,替代散落的内联 margin */
}
.settings-section {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--line-soft);
border-radius: var(--r);
background: var(--paper); /* 宣纸底,与 modal 卡底形成层次 */
}
/* 分区小标题:朱砂竖条 + 衬线墨字 + 鎏金渐隐线(中式卷首) */
.settings-section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--font-serif);
font-size: .95rem;
font-weight: 600;
letter-spacing: .14em;
color: var(--ink);
line-height: 1.5;
}
.settings-section-title::before {
content: "";
flex: none;
width: 3px;
height: 1em;
border-radius: 2px;
background: var(--cinnabar);
}
.settings-section-title::after {
content: "";
flex: 1;
height: 1px;
margin-left: 4px;
background: linear-gradient(90deg, rgba(var(--gold-rgb), .45), transparent);
}
/* —— HTML 重构实际用的类名(与内嵌 critical style 同设计,外部兜底) —— */
/* 分区小标题(鎏金小标 + 左描金短线):内嵌已定义,此处外部兜底防内嵌被移除 */
.section-label {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px;
font-size: .78rem; letter-spacing: .08em; font-weight: 600;
color: var(--gold-deep, #A8843F);
font-family: var(--font-serif);
}
.section-label::before {
content: ""; flex: none; width: 3px; height: 14px; border-radius: 2px;
background: linear-gradient(180deg, var(--gold, #C9A84F), var(--gold-deep, #A8843F));
}
/* 分组块(相邻虚线细分隔):内嵌已定义,此处外部兜底 */
.section-block { display: flex; flex-direction: column; gap: 12px; }
.section-block + .section-block { margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line, #E8E1D0); }
/* ---------- 3. 管理后台 4 Tab:胶囊 → 下划线式 ---------- */
.admin-tabs {
flex-wrap: nowrap;
gap: 2px;
padding-bottom: 0;
margin-bottom: 18px;
border-bottom: 1px solid var(--line-soft);
}
.admin-tab {
flex: 1;
min-width: 0;
min-height: var(--tap);
padding: 12px 6px;
border: none;
border-radius: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
color: var(--ink-faint);
font-family: var(--font-serif);
font-size: .86rem;
letter-spacing: .08em;
white-space: nowrap;
transition: color .18s, border-color .18s;
}
.admin-tab:hover:not(.is-active) {
border-color: transparent;
border-bottom-color: var(--gold);
color: var(--cinnabar);
}
.admin-tab.is-active {
background: none;
border-color: transparent;
border-bottom-color: var(--cinnabar);
color: var(--cinnabar);
font-weight: 600;
}
/* ---------- 4. 渠道选择 tab:去内联白底;激活态沿用朱砂实底(3180) ---------- */
.channel-tab {
flex: 1 !important;
min-height: var(--tap);
padding: 10px 6px !important;
border: 1px solid var(--line-soft) !important;
border-radius: var(--r) !important;
background: var(--card) !important;
color: var(--ink-soft) !important;
font-size: .85rem !important;
cursor: pointer;
transition: border-color .16s, background .16s;
}
/* 副标题文字由内嵌 .channel-tab-sub 专属规则负责(外部不重复覆盖) */
/* ---------- 5. 成员列表:行式卡片 + 徽章标签(白名单/月卡后台共用) ---------- */
.member-list { gap: 8px; }
.member-row {
gap: 10px;
padding: 10px 12px;
border-radius: var(--r);
flex-wrap: wrap; /* 窄屏放不下自动折行 */
transition: border-color .16s, background .16s;
}
.member-row:hover {
border-color: var(--gold);
background: var(--paper-warm);
}
.member-name {
min-width: 0;
font-family: var(--font-serif);
font-size: .9rem;
font-weight: 600;
letter-spacing: .04em;
}
/* 成员标识(owner/手机号)→ 鎏金描边徽章 */
.member-owner {
min-width: 0;
padding: 1px 9px;
font-size: .68rem;
line-height: 1.6;
letter-spacing: .06em;
white-space: nowrap;
color: var(--gold-deep);
border: 1px solid rgba(var(--gold-rgb), .4);
border-radius: 999px;
background: rgba(var(--gold-rgb), .1);
}
.member-quota {
flex: 1;
min-width: 0;
font-size: .76rem;
color: var(--ink-soft);
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* 注:.member-assets(资产数标签)由 admin.20260812dz.js 动态注入自包含样式
(数据隔离设计,灰色小徽),外部不重复定义避免打架 */
.member-row .btn-mini { min-height: 34px; }
/* ---------- 6. 375px 一档:tab 字收、分区内边距收、成员行折行 ---------- */
@media (max-width: 380px) {
.settings-tab { font-size: .86rem !important; letter-spacing: .06em; }
.settings-section { padding: 12px; }
.section-label { font-size: .74rem; }
.admin-tab { font-size: .78rem; letter-spacing: .04em; padding: 11px 2px; }
.channel-tab { font-size: .8rem !important; padding: 8px 4px !important; }
.member-row { padding: 9px 10px; gap: 8px; }
.member-quota {
flex-basis: 100%;
text-align: left;
white-space: normal;
font-size: .72rem;
}
.member-row .btn-mini { padding: 0 9px; font-size: .7rem; }
}
/* ============================================================
2026-08-24 手机端走查修复(M1/M5/H2/L2/L3)
- M1 触达尺寸 ≥44px:顶部操作钮 / 任务卡操作钮 / 状态chips / 搜索框
- M5 设置 4 tab 不溢出:均分 + 收 padding/字距,长名「我的API密钥」可折行
- H2 生成配置:模型列表去固定高、流式排列,提示文案不再压住第4选项
- L2 节点卡名称字号 11.5→13px
- L3 原生 checkbox/radio 13→20px
均为移动端 @media 增补,不删已有样式。
============================================================ */
@media (max-width: 640px) {
/* M1-① 顶部操作层:单张/批量/库▾/↻/管理/退出 触达 ≥44px
(压过历史 32/34/36px 规则;设置⚙ #btnSettings 已 44px 不动) */
#modeSegTop button { min-height: 44px; }
.lib-nav-btn { min-height: 44px; }
.header-row-2 .btn-gear { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.btn-logout { height: 44px; min-height: 44px; padding: 0 12px; }
/* M1-② 任务抽屉:卡操作钮(存相册/下载/⭐风格/ⓘ详情)+取消 ≥44px */
.task-foot .btn-mini,
.task-foot .btn-save { min-height: 44px; padding: 6px 14px; }
.task-cancel { min-height: 44px; padding: 6px 12px; }
/* M1-③ 任务筛选:状态 chips + 搜索框 ≥44px */
.task-fchip { min-height: 44px; padding: 8px 14px; }
.task-search { min-height: 44px; }
/* M5 设置 4 tab:flex:1 均分 + min-width:0 允许收缩 + 收 padding/字距,
长名「我的API密钥」折行不溢出卡片右缘 */
.settings-tabs { gap: 4px; }
.settings-tab {
min-width: 0;
padding: 10px 2px !important;
font-size: .8rem !important;
letter-spacing: .02em;
white-space: normal;
line-height: 1.3;
}
/* H2 生成配置:模型列表去固定高(240px),整块流式,不再内滚裁掉第4选项;
提示文案自然排其后,不再压住/遮挡模型选项 */
.global-model-box { max-height: none; overflow-y: visible; }
/* L2 节点卡名称字号 11.5→13px(手机 3 列卡更宽,名字更大更清楚) */
.wb-cards .node-row-name,
.wb-cards .node-chip .node-name { font-size: 13px; }
/* L3 原生 checkbox/radio 触达放大 13→20px */
.gm-opt input[type="radio"],
.wb-gen-opt input[type="radio"],
.model-opt input[type="radio"],
.auto-save-toggle input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
}
/* 2026-08-25 触达兜底(放文件末尾:后定义优先,压过前面基础规则的 24px/31px/32px)。
检测发现的 5 处 <44px 违规:详情复制/任务详情/产品库分类chips/删除×/返回工作台。
用 max-width:520px(真实手机窄屏,非 pointer:coarse —— ego 模拟设备 pointer 仍为 fine) */
@media (max-width: 520px) {
.td-copy-btn, .task-detail-btn { min-height: var(--tap); padding: 6px 12px; }
.lib-cat { min-height: var(--tap); padding: 8px 14px; }
.lib-cat-col { min-height: var(--tap); padding: 10px 12px; }
.lib-card-del { width: var(--tap); height: var(--tap); min-width: var(--tap); min-height: var(--tap); }
#btnBack { min-height: var(--tap); padding: 6px 14px; }
}
/* ===== 2026-08-25 批量模式风格勾选框(工作台节点卡) =====
用户需求:批量模式下选风格,点击卡片/勾选框即可勾选与取消(与产品库批量选择同逻辑)。
节点卡(.node-row)默认无勾选框视觉,现补:批量模式(batch-mode)显示勾选框,
选中态朱砂高亮。勾选逻辑由 nodes.js change 委托 → toggleNodeSel/toggleSel 处理。 */
.node-batch-check {
display: none;
width: 20px; height: 20px; margin: 0;
accent-color: var(--cinnabar, #A03028);
cursor: pointer; flex: none;
}
body.batch-mode .node-batch-check { display: inline-flex; align-items: center; justify-content: center; }
body.batch-mode .node-row {
position: relative;
padding-left: 4px;
}
body.batch-mode .node-row.is-selected {
border-color: var(--cinnabar, #A03028) !important;
box-shadow: 0 0 0 2px rgba(160,48,40,.25) inset, 0 2px 8px rgba(160,48,40,.15);
background: linear-gradient(180deg, rgba(160,48,40,.04), rgba(160,48,40,.02)) !important;
}
/* ===== 2026-09-02 主界面常驻任务进度条(老板要求:队列可视化进度) ===== */
.gen-progress { margin: 10px 0 4px; }
.gen-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gen-progress-text { font-size: .82rem; color: var(--ink-soft, #8a7a5c); font-weight: 600; }
.gen-progress-bar { height: 8px; border-radius: 999px; background: #EFE8D8; overflow: hidden; }
.gen-progress-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C9A84F, #E0C272); transition: width .8s ease; }