/* 贴图侠 · 视觉对齐小红书 PC 版：白底、#333 文字分级、#FF2442 主红、圆角 16 / 胶囊按钮、浅灰填充无边框 */
:root {
  --red: #FF2442; --red-hover: #FF2E4D; --red-soft: rgba(255, 36, 66, .08);
  --t1: #333; --t2: rgba(51, 51, 51, .8); --t3: rgba(51, 51, 51, .6); --t4: rgba(51, 51, 51, .3);
  --line: rgba(0, 0, 0, .08); --fill: rgba(0, 0, 0, .03); --fill-hover: rgba(0, 0, 0, .06); --fill-active: rgba(0, 0, 0, .08);
  --bg: #fff; --page: #fff; --panel: #f7f7f7;
  --ok: #17a86b; --warn: #f5a623; --danger: #ff2442; --blue: #3d8af5;
  --r: 16px; --r-sm: 12px; --pill: 999px;
  --side: 168px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; color: var(--t1); background: var(--bg); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 8px; } h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; } h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; color: var(--t2); }
h4 { font-size: 14px; margin: 0 0 6px; }
code { background: var(--fill); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.muted { color: var(--t3); } .small { font-size: 12px; } .error { color: var(--danger); } .warn { color: var(--warn); }
.inline { display: inline; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--red-soft); }
/* 滚动条：细、圆角、悬停才加深 */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .32); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 壳：左侧栏 + 主区（对齐小红书 PC 的 side-bar / main） */
.shell { display: flex; min-height: 100vh; }
.side-bar { width: var(--side); flex: none; position: sticky; top: 0; height: 100vh; padding: 20px 12px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); background: #fff; }
.logo { display: flex; align-items: center; gap: 8px; padding: 6px 12px 22px; font-weight: 700; font-size: 17px; color: var(--t1); }
.logo .logo-img { height: 30px; width: auto; display: block; }   /* 完整 logo（图标 + 字，assets/images/logo.svg） */
.logo .logo-mark { height: 30px; width: 30px; display: block; }  /* 仅图标（深色底上配白字用） */
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border-radius: var(--pill); font-size: 15px; color: var(--t1); cursor: pointer; transition: background .15s; }
.nav-item:hover { background: var(--fill-hover); }
.nav-item.active { background: var(--fill-active); font-weight: 600; }
.nav-item svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.primary { background: var(--red); color: #fff; font-weight: 600; margin: 10px 0 4px; }
.nav-item.primary:hover { background: var(--red-hover); }
.side-foot { margin-top: auto; padding: 8px 4px 0; display: flex; align-items: center; gap: 10px; color: var(--t2); font-size: 13px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.side-foot .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { flex: 1; min-width: 0; padding: 28px 40px 60px; }
.editor-page .main { padding: 20px 32px 60px; }

/* ---------- 基础控件 */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card.narrow { max-width: 640px; margin: 8vh auto; padding: 36px 44px; border-radius: 20px; }
.card.narrow .check { white-space: nowrap; } .card.narrow .check .small { white-space: normal; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.form label { display: block; margin: 14px 0 6px; font-weight: 500; color: var(--t1); }
.form label > span.small, .form label > .small { font-weight: 400; color: var(--t3); }
.form h3 { margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.form h3 .small { font-weight: 400; color: var(--t3); margin-left: 6px; }
.form h3:first-child, .form > div > h3:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
.form .row { margin-top: 20px; }
input:disabled { color: var(--t3); cursor: not-allowed; }
input[type=text], input[type=tel], input[type=url], input[type=month], input[type=password], input[type=email], input[type=number], input[type=search], input:not([type]), textarea, select {
  width: 100%; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; background: var(--fill); color: var(--t1); transition: background .15s, border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--t4); }
textarea { resize: vertical; line-height: 1.6; }
input:hover, textarea:hover, select:hover { background: var(--fill-hover); }
input:focus, textarea:focus, select:focus { outline: none; background: #fff; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .row.wrap { flex-wrap: wrap; }
.row input:not([type=checkbox]):not([type=range]) { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
/* 两栏中间竖线（第 2 步文案、设置里的角色表单等），窄屏退化为横线 */
.two-col.split { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.two-col.split > :nth-last-child(2) { padding-right: 32px; }
.two-col.split > :last-child { border-left: 1px solid var(--line); padding-left: 32px; }
.check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--red); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 14px 12px; margin: 14px 0; } legend { color: var(--t3); font-size: 12px; padding: 0 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px; border-radius: var(--pill); border: none; background: var(--fill); color: var(--t1); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { background: var(--fill-hover); } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--red); color: #fff; font-weight: 600; } .btn.primary:hover { background: var(--red-hover); }
.btn.secondary { background: var(--fill); }
.btn.ghost { background: transparent; border: 1px solid var(--line); } .btn.ghost:hover { background: var(--fill); }
.btn.block { width: 100%; height: 48px; font-size: 16px; margin-top: 20px; }
.btn.tiny { height: 28px; padding: 0 12px; font-size: 12px; }
.btn.link, button.link { background: none; border: none; color: var(--t2); cursor: pointer; font: inherit; padding: 0; height: auto; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--fill); border-radius: var(--pill); font-size: 12px; color: var(--t2); margin-right: 4px; }
.status { font-size: 12px; padding: 2px 10px; border-radius: var(--pill); background: var(--fill); color: var(--t2); }
.s-generated { background: rgba(61, 138, 245, .1); color: var(--blue); } .s-exported { background: rgba(23, 168, 107, .1); color: var(--ok); } .s-drafted { background: rgba(245, 166, 35, .12); color: #b26a00; }
.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .8); color: #fff; padding: 10px 20px; border-radius: var(--pill); z-index: 100; max-width: 80vw; font-size: 14px; }
.toast.error { background: var(--red); }
.flash { background: rgba(23, 168, 107, .08); color: #0f7a4c; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px; word-break: break-all; }
.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 56px; text-align: center; color: var(--t3); }
.empty a { color: var(--red); }

/* 顶部频道式选项卡（对齐小红书 推荐/穿搭/美食 一排胶囊） */
.channels { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.channels .tab, .tabs .tab, .platform-tabs .tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: var(--pill); border: none; background: transparent; cursor: pointer; font: inherit; font-size: 16px; color: var(--t2); transition: background .15s; }
.channels .tab:hover, .tabs .tab:hover, .platform-tabs .tab:hover { background: var(--fill-hover); }
.channels .tab.active, .tabs .tab.active, .platform-tabs .tab.active { background: var(--fill-active); color: var(--t1); font-weight: 600; }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; margin-bottom: 20px; } .filters select { width: auto; border-radius: var(--pill); padding-left: 16px; }

/* 作品列表：小红书笔记卡（封面 3:4 圆角 16 + 标题 + 作者行） */
.grid.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px 18px; }
.project-card { display: block; color: var(--t1); }
.project-card .thumb { aspect-ratio: 3/4; background: var(--fill); border-radius: var(--r); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .2s; }
.project-card:hover .thumb { transform: translateY(-2px); }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card .body { padding: 10px 4px 0; }
.project-card .title { font-weight: 500; font-size: 14px; line-height: 1.45; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-card .meta { font-size: 12px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.project-card .meta .mini-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }

.table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; } .table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
.table th { color: var(--t3); font-weight: 500; font-size: 12px; }
.table.small td, .table.small th { font-size: 12px; padding: 5px 6px; }
.table input, .table select { padding: 6px 10px; } .table tr.stale td { background: rgba(245, 166, 35, .08); }
h2 .inline input[type=month] { width: auto; padding: 4px 10px; font-size: 13px; font-weight: 400; margin-left: 8px; vertical-align: middle; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 24px; }
.stat { background: var(--fill); border-radius: var(--r-sm); padding: 14px 16px; } .stat b { display: block; font-size: 22px; font-weight: 600; } .stat span { font-size: 12px; color: var(--t3); }
.spec-form { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; } .spec-form .row label { display: flex; flex-direction: column; font-size: 12px; margin: 0; color: var(--t3); } .spec-form .row input { width: 76px; }

/* ---------- 登录（对齐小红书手机号登录弹层） */
.login-card .logo .logo-img { height: 40px; }
.login-card { max-width: 420px; margin: 10vh auto; padding: 40px 44px 32px; border-radius: 20px; box-shadow: 0 12px 48px rgba(0, 0, 0, .08); text-align: center; }
.login-card h1 { font-size: 18px; margin-bottom: 26px; }
.login-card .field { position: relative; margin: 12px 0; }
.login-card .field input { height: 48px; padding: 0 16px; font-size: 15px; }
.login-card .field.phone input { padding-left: 56px; }
.login-card .prefix { position: absolute; left: 16px; top: 0; height: 48px; display: flex; align-items: center; color: var(--t2); font-size: 15px; }
.login-card .code-btn { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; background: transparent; color: var(--red); font-weight: 600; }
.login-card .code-btn:disabled { color: var(--t4); }
.login-card .agree { font-size: 12px; color: var(--t3); margin-top: 18px; line-height: 1.7; }
.login-card .agree a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 编辑器 */
.editor-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.editor-head .project-title { flex: 1; min-width: 200px; }
.editor-head .project-title input { background: transparent; font-size: 20px; font-weight: 600; padding: 6px 8px; border-radius: var(--r-sm); }
.editor-head .project-title input:hover { background: var(--fill); }
.editor-head .save-state { font-size: 12px; color: var(--ok); white-space: nowrap; } .save-state.busy { color: var(--warn); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.step-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.step-nav li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border-radius: var(--pill); cursor: pointer; font-size: 15px; color: var(--t2); transition: background .15s; }
.step-nav li:hover { background: var(--fill-hover); }
.step-nav li b { width: 22px; height: 22px; border-radius: 50%; background: var(--fill-active); color: var(--t2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.step-nav li.active { background: var(--fill-active); color: var(--t1); font-weight: 600; } .step-nav li.active b { background: var(--red); color: #fff; }
.step-nav li.disabled { opacity: .4; cursor: not-allowed; } .step-nav li.disabled:hover { background: none; }
.step-nav .count { font-size: 12px; color: var(--t3); font-weight: 400; }
.platform-tabs { display: flex; gap: 4px; align-items: center; }
.platform-tabs .tab { height: 34px; font-size: 13px; padding: 0 14px; }
.platform-tabs .tab.active { background: var(--red-soft); color: var(--red); }
.platform-tabs .tab .icon { width: 1em; height: 1em; margin-left: -6px; }
.step-panel { max-width: 1100px; }
.step-panel.cards-panel { max-width: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .panel-head .actions { display: flex; gap: 8px; }
.panel-foot { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.panel-foot .btn.primary { padding: 0 28px; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--r); padding: 40px; text-align: center; color: var(--t3); background: var(--fill); cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.upload-progress { margin: 12px 0; font-size: 12px; color: var(--t2); }
.up-item { display: grid; grid-template-columns: 1fr 200px 160px; gap: 10px; align-items: center; padding: 3px 0; }
.up-item .bar { height: 6px; background: var(--fill-active); border-radius: 3px; overflow: hidden; } .up-item .bar i { display: block; height: 100%; background: var(--red); width: 0; transition: width .2s; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
.asset { position: relative; aspect-ratio: 3/4; background: var(--fill); border-radius: var(--r); overflow: hidden; border: 2px solid transparent; cursor: grab; transition: transform .15s; }
.asset:hover { transform: translateY(-2px); }
.asset.cover { border-color: var(--red); } .asset.dragging { opacity: .5; } .asset.over { outline: 2px dashed var(--red); }
.asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 2px; font-size: 13px; }
.asset.missing { border-style: dashed; border-color: rgba(255, 36, 66, .35); cursor: default; }
.asset.missing .tools, .asset.missing:hover .tools { display: none; }   /* 文件都没了，照片卡 / 人脸 / 裁切都没意义，不给工具栏 */
.asset .missing-tag { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); font-size: 11px; padding: 3px 10px; border: none; border-radius: var(--pill); background: var(--red); color: #fff; white-space: nowrap; cursor: pointer; font: inherit; font-size: 11px; }
.asset .missing-tag:hover { background: var(--red-hover); }
.asset-pick img[data-missing] { opacity: .6; }
.asset .flags span { display: inline-flex; align-items: center; background: rgba(0, 0, 0, .45); color: #fff; border-radius: var(--pill); padding: 3px 5px; }
.asset .dim { position: absolute; bottom: 8px; left: 8px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .45); border-radius: var(--pill); padding: 1px 8px; }
.asset .tools { position: absolute; bottom: 8px; right: 8px; display: none; gap: 2px; padding: 4px; background: rgba(255, 255, 255, .95); border-radius: var(--pill); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.asset:hover .tools { display: flex; } .asset .tools button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; cursor: pointer; font-size: 14px; padding: 0; border-radius: 50%; color: var(--t2); } .asset .tools button:hover { background: var(--fill-hover); }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: #fff; border-radius: 20px; padding: 28px; width: 440px; max-width: 92vw; box-shadow: 0 12px 48px rgba(0, 0, 0, .12); }
.modal-box h3 { margin-top: 0; color: var(--t1); font-size: 16px; }
.qr svg { width: 240px; height: 240px; display: block; margin: 14px auto; border-radius: var(--r-sm); } .qr.small svg { width: 140px; height: 140px; margin: 0; }
.crop-box { width: 540px; } .crop-stage { position: relative; width: 100%; height: 380px; overflow: hidden; background: #1a1a1a; border-radius: var(--r-sm); touch-action: none; cursor: grab; }
.crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-frame { position: absolute; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; }
input[type=range] { accent-color: var(--red); width: 100%; }
.gen-live { background: var(--fill); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; }
.gen-live .stage { font-weight: 600; } .gen-live .first-title { color: var(--red); font-size: 18px; font-weight: 600; margin: 8px 0; }
.gen-live details summary { color: var(--t3); cursor: pointer; font-size: 12px; }
.gen-live pre { max-height: 200px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: #fff; padding: 10px; border-radius: var(--r-sm); color: var(--t2); }
/* 做图：等 AI 排卡时的动画——三张卡轮流浮起 + 闪光扫过，下面一行阶段文字和三个跳动的点 */
.cards-live { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 60vh; text-align: center; }
.cards-live .stage { color: var(--t2); }
.cards-live .card-loader, .cards-live .dots { display: none; }
.cards-live.busy .card-loader, .cards-live.busy .dots { display: flex; }
.cards-live.busy .stage { color: var(--t1); }
.card-loader { position: relative; width: 210px; height: 190px; }
.card-loader i { position: absolute; left: 50%; bottom: 0; width: 120px; height: 160px; margin-left: -60px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .10); overflow: hidden; transform-origin: 50% 100%; animation: cardFloat 2.4s ease-in-out infinite; }
.card-loader i::before { content: ''; position: absolute; left: 16px; right: 16px; top: 22px; height: 12px; border-radius: 6px; background: var(--red-soft); box-shadow: 0 26px 0 var(--fill-active), 0 46px 0 var(--fill-active), 0 66px 0 var(--fill); }
.card-loader i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-120%); animation: cardShine 2.4s ease-in-out infinite; }
.card-loader i:nth-child(1) { transform: rotate(-12deg) translateX(-34px); animation-delay: 0s; }
.card-loader i:nth-child(2) { z-index: 1; animation-delay: .4s; }
.card-loader i:nth-child(3) { transform: rotate(12deg) translateX(34px); animation-delay: .8s; }
.card-loader i:nth-child(1)::after { animation-delay: 0s; } .card-loader i:nth-child(2)::after { animation-delay: .4s; } .card-loader i:nth-child(3)::after { animation-delay: .8s; }
@keyframes cardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes cardShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.cards-live .dots { gap: 6px; }
.cards-live .dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: .3; animation: dotPulse 1.2s ease-in-out infinite; }
.cards-live .dots b:nth-child(2) { animation-delay: .2s; } .cards-live .dots b:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.badge, .ai-badge { display: inline-flex; align-items: center; height: 18px; font-size: 11px; padding: 0 7px; border-radius: var(--pill); background: var(--fill-active); color: var(--t3); font-weight: 500; vertical-align: middle; }
.ai-badge.ai { background: rgba(61, 138, 245, .12); color: var(--blue); } .ai-badge.assisted { background: rgba(23, 168, 107, .1); color: var(--ok); }
/* 标题选项两行：第 1 行单选 + 标题输入框占满，第 2 行字数 / 手法 + 改写按钮 */
.title-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin: 6px 0; padding: 8px 10px; border-radius: var(--r-sm); }
.title-row .title-text { min-width: 0; }
.title-row .title-meta { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .title-row .title-meta .count { margin-right: auto; }
.title-row.chosen { background: var(--red-soft); } .title-row input[type=radio] { accent-color: var(--red); }
.title-row .count.over, #bodyCount.over { color: var(--danger); font-weight: 600; }
.points { padding-left: 20px; } .points li { margin: 8px 0; } .points li b { font-weight: 500; }
.issues { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.issues li { padding: 6px 10px; border-radius: var(--r-sm); margin: 4px 0; background: var(--fill); color: var(--t2); }
.issues li.error, .issues li.block { background: var(--red-soft); color: var(--red); } .issues li.warn { background: rgba(245, 166, 35, .12); color: #b26a00; } .issues li.ok { background: rgba(23, 168, 107, .1); color: var(--ok); }
/* 做图：卡片列表 | 预览 | 竖线开关 | 编辑栏（默认收起，点竖线顶上的图标展开） */
.cards-layout { display: grid; grid-template-columns: 216px minmax(320px, 1fr) 32px 380px; gap: 16px; min-height: 70vh; }
.cards-layout.slots-collapsed { grid-template-columns: 216px minmax(320px, 1fr) 32px; }
.col-left { border-right: 1px solid var(--line); padding-right: 16px; }
.cards-layout.slots-collapsed .col-right { display: none; }
.col-toggle { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#btnRedraw.spin svg { animation: spin .8s linear infinite; }
.col-toggle::before { content: ''; position: absolute; top: 80px; bottom: 0; left: 50%; border-left: 1px solid var(--line); }
.col-toggle button { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; }
.col-toggle button:hover { background: var(--red-soft); color: var(--red); border-color: transparent; }
.col-toggle button svg { width: 16px; height: 16px; }
/* 收起时显示编辑图标，展开时显示 > */
.col-toggle .ic-close, .cards-layout.slots-collapsed .col-toggle .ic-open { display: block; }
.col-toggle .ic-open, .cards-layout.slots-collapsed .col-toggle .ic-close { display: none; }
.col-head { font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-head select { width: auto; padding: 4px 28px 4px 10px; font-size: 12px; border-radius: var(--pill); }
.card-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.card-item { position: relative; border: 2px solid transparent; border-radius: var(--r-sm); cursor: pointer; overflow: hidden; background: var(--fill); transition: transform .15s; }
.card-item:hover { transform: translateY(-1px); }
.card-item.active { border-color: var(--red); } .card-item.blocked { border-color: var(--warn); } .card-item.over { outline: 2px dashed var(--red); }
.card-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.card-item .ci-meta { font-size: 12px; padding: 5px 8px; color: var(--t2); } .card-item .ci-meta b { color: var(--t1); }
.card-item .ci-del { position: absolute; top: 6px; right: 6px; border: none; background: rgba(0, 0, 0, .5); color: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.card-item:hover .ci-del { display: inline-flex; }
.preview-wrap { position: relative; background: var(--fill); border-radius: var(--r); display: flex; justify-content: center; padding: 16px; }
.preview-wrap img { max-width: 100%; max-height: 72vh; aspect-ratio: 3/4; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, .12); background: #fff; cursor: zoom-in; }
/* 预览放大灯箱 */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100vw - 160px); max-height: calc(100vh - 110px); border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .5); background: #fff; transition: opacity .15s; }
.lightbox img.loading { opacity: .4; }
.lightbox button { position: absolute; border: none; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; transition: background .15s; }
.lightbox button:hover { background: rgba(255, 255, 255, .28); }
.lightbox .lb-close { top: 20px; right: 20px; width: 40px; height: 40px; } .lightbox .lb-close .icon { width: 22px; height: 22px; }
.lightbox .lb-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; } .lightbox .lb-arrow .icon { width: 28px; height: 28px; }
.lightbox .lb-arrow.prev { left: 24px; } .lightbox .lb-arrow.next { right: 24px; }
.lightbox .lb-counter { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 13px; }
.preview-loading { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .6); color: #fff; padding: 4px 12px; border-radius: var(--pill); font-size: 12px; }
.preview-loading .spin { width: 14px; height: 14px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 预览骨架（渲染中 / 换卡时）：与成图同尺寸，条块呼吸 + 扫光 + 中间闪光 */
.preview-skeleton { width: 100%; max-width: calc(72vh * 3 / 4); height: auto; aspect-ratio: 3/4; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, .12); background: #fff; display: block; }
.preview-skeleton[hidden] { display: none; }
.preview-skeleton .sk-bars { animation: skBreathe 1.6s ease-in-out infinite; }
.preview-skeleton .sk-shine { animation: skShine 1.8s ease-in-out infinite; }
.preview-skeleton .sk-spark { transform-box: fill-box; transform-origin: center; animation: skSpark 2.4s ease-in-out infinite; }
.preview-skeleton .sk-spark-2 { transform-box: fill-box; transform-origin: center; animation: skSpark 2.4s ease-in-out infinite .6s; }
@keyframes skBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes skShine { 0% { transform: translateX(0); } 100% { transform: translateX(800px); } }
@keyframes skSpark { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .6; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.col-right { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; max-height: 80vh; overflow: auto; }
.slot { margin-bottom: 16px; } .slot label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.slot .lock { font-size: 12px; color: var(--t3); } .slot .row { margin-top: 6px; }
.slot .slot-tools { display: flex; align-items: center; gap: 6px; }
.slot .hl-key { min-width: 32px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--red); background: var(--red-soft); border: none; }
.slot .hl-key:hover { background: rgba(255, 36, 66, .16); }
.slot .hl-key ~ [data-unlock] { margin-left: auto; }
.srow { display: flex; gap: 4px; margin: 4px 0; } .srow input { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.asset-pick { display: flex; flex-wrap: wrap; gap: 8px; } .asset-pick img { width: 96px; height: 128px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.asset-pick img.picked { border-color: var(--red); }
.prompt-pre { white-space: pre-wrap; font-size: 12px; max-height: 300px; overflow: auto; background: var(--fill); padding: 10px; border-radius: var(--r-sm); }
.hints { padding-left: 18px; font-size: 13px; color: var(--t2); } .hints li { margin: 8px 0; } .hints b { color: var(--t1); }
.hints a { color: var(--red); }
.export-done { background: var(--fill); border-radius: var(--r); padding: 18px; margin: 14px 0 0; }
.export-done .files { font-size: 12px; columns: 2; color: var(--t2); }
/* 第 5 步 导出：左边确认 + 导出，右边文案 / 提醒 / 历史；明细弹窗列出全部卡片与文案 */
.step-panel.export-panel { max-width: none; }
.export-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.ex-side { display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); padding-left: 32px; }
.ex-card { padding: 0 32px 0 0; }
.ex-side .ex-card { padding: 0; }
.ex-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ex-head h3 { margin: 0; font-size: 15px; }
.ex-checks { display: flex; flex-direction: column; gap: 8px; }
.ex-check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fill); cursor: pointer; transition: background .15s; font-weight: 400; margin: 0; }
.ex-check:hover { background: var(--fill-hover); }
.ex-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ex-check-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong, rgba(0, 0, 0, .18)); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .15s; }
.ex-check-box svg { width: 14px; height: 14px; opacity: 0; }
.ex-check input:checked ~ .ex-check-box { background: var(--red); border-color: var(--red); }
.ex-check input:checked ~ .ex-check-box svg { opacity: 1; }
.ex-check input:focus-visible ~ .ex-check-box { box-shadow: 0 0 0 3px var(--red-soft); }
.ex-check b { display: block; font-weight: 600; color: var(--t1); }
.ex-check small { display: block; font-size: 12px; color: var(--t3); margin-top: 2px; }
.ex-check input:checked ~ span b { color: var(--t1); }
.ex-actions { display: flex; gap: 10px; margin-top: 16px; }
.ex-copy { display: flex; flex-direction: column; gap: 10px; }
.ex-copy-item { background: var(--fill); border-radius: var(--r-sm); padding: 10px 12px; }
.ex-copy-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ex-copy-head b { font-size: 13px; }
.ex-copy-text { font-size: 13px; color: var(--t2); line-height: 1.6; word-break: break-word; }
.ex-copy-text.pre { white-space: pre-wrap; max-height: 160px; overflow: auto; }
.ex-titles { display: flex; flex-direction: column; gap: 6px; }
.ex-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 8px; font-size: 13px; color: var(--t2); }
.ex-title.chosen { color: var(--t1); font-weight: 500; }
.ex-title-text { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ex-title em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--red); background: var(--red-soft); border-radius: var(--pill); padding: 1px 7px; flex: none; }
.export-done h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; } .export-done h4 svg { color: var(--ok); }
.ex-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.ex-detail-title { font-weight: 600; margin-bottom: 10px; }
.ex-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.ex-detail-card { background: var(--fill); border-radius: var(--r-sm); padding: 8px; }
.ex-detail-img { position: relative; border-radius: 8px; overflow: hidden; }
.ex-detail-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; display: block; background: #fff; transition: filter .15s; }
/* 下载按钮居中压在图上：悬停时图片略暗、按钮浮现；触屏设备常显 */
.ex-detail-img .ex-dl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94); height: 34px; padding: 0 14px; font-size: 13px; box-shadow: 0 6px 18px rgba(255, 36, 66, .35); opacity: 0; transition: opacity .15s, transform .15s; }
.ex-detail-img:hover img { filter: brightness(.82); }
.ex-detail-img:hover .ex-dl, .ex-detail-img .ex-dl:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .ex-detail-img .ex-dl { opacity: 1; transform: translate(-50%, -50%); } }
.ex-detail-meta { margin-top: 8px; font-size: 12px; color: var(--t2); text-align: center; }
.ex-detail-copy .ex-copy-item { margin-bottom: 10px; }
@media (max-width: 1000px) { .export-grid, .ex-detail { grid-template-columns: 1fr; } .ex-side { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; margin-top: 24px; } .ex-card { padding-right: 0; } }
/* 手机视图：iPhone 17 Pro 机身（402pt 逻辑宽、灵动岛、窄边框）内模拟小红书笔记页 */
.phone-frame { width: 340px; margin: 0 auto; padding: 4px; border-radius: 54px; background: linear-gradient(160deg, #3a3a3c, #1c1c1e 40%, #2c2c2e); box-shadow: 0 0 0 2px #0a0a0a, 0 18px 50px rgba(0, 0, 0, .28); position: relative; }
.phone-frame::before, .phone-frame::after { content: ''; position: absolute; left: -5px; width: 3px; border-radius: 2px; background: #1c1c1e; }
.phone-frame::before { top: 108px; height: 26px; } .phone-frame::after { top: 150px; height: 52px; box-shadow: 0 64px 0 #1c1c1e; }
.phone-screen { display: flex; flex-direction: column; height: 740px; background: #fff; border-radius: 48px; overflow: hidden; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.ph-status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 6px 26px 0 32px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.ph-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 106px; height: 31px; border-radius: 18px; background: #000; }
.ph-sys { display: inline-flex; align-items: center; gap: 6px; fill: currentColor; }
.ph-nav { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; }
.ph-nav .icon { width: 24px; height: 24px; stroke-width: 1.8; } .ph-nav .icon:last-child { margin-left: 12px; }
.ph-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.ph-brand { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-follow { margin-left: auto; height: 26px; padding: 0 12px; border: 1px solid var(--red); color: var(--red); border-radius: var(--pill); font-size: 12px; display: inline-flex; align-items: center; }
.ph-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ph-scroll::-webkit-scrollbar { display: none; }
.ph-status, .ph-nav, .ph-bar, .ph-home { flex: none; }
.ph-carousel { position: relative; background: #000; }
.ph-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ph-track::-webkit-scrollbar { display: none; }
.ph-track img { width: 100%; flex: none; display: block; scroll-snap-align: start; }
.ph-counter { position: absolute; top: 10px; right: 12px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: var(--pill); }
.ph-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; opacity: 0; pointer-events: none; border-radius: 50%; border: none; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s; }
.ph-carousel:hover .ph-arrow:not([hidden]) { opacity: 1; pointer-events: auto; } .ph-arrow:hover { background: rgba(0, 0, 0, .7); } .ph-arrow.prev { left: 12px; } .ph-arrow.next { right: 12px; }
.ph-arrow .icon { width: 18px; height: 18px; }
.ph-dots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 2px; background: #fff; }
.ph-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .15); } .ph-dots i.on { background: var(--red); }
.ph-content { padding: 6px 14px 14px; }
.ph-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.ph-body { font-size: 14px; line-height: 1.7; color: var(--t1); }
.ph-tags { margin-top: 6px; } .ph-tags span { color: #13386c; margin-right: 6px; }
.ph-meta { margin-top: 12px; font-size: 12px; color: var(--t4); }
.ph-bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--t1); }
.ph-bar span { display: inline-flex; align-items: center; gap: 4px; } .ph-bar .icon { width: 20px; height: 20px; }
.ph-say { flex: 1; height: 34px; border-radius: var(--pill); background: var(--fill-hover); color: var(--t3); padding: 0 12px; font-size: 13px; }
.ph-say .icon { width: 15px; height: 15px; }
.ph-home { width: 120px; height: 5px; border-radius: var(--pill); background: #1a1a1a; margin: 8px auto 10px; }
@media (max-width: 1100px) { .cards-layout, .cards-layout.slots-collapsed { grid-template-columns: 180px 1fr; } .col-toggle { display: none; } .cards-layout.slots-collapsed .col-right { display: block; } .col-right { grid-column: 1 / -1; max-height: none; } }
@media (max-width: 900px) {
  .shell { flex-direction: column; } .side-bar { width: auto; height: auto; position: static; flex-direction: row; align-items: center; gap: 4px; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--line); }
  .logo { padding: 0 8px 0 0; } .logo .logo-img { height: 26px; } .nav-item { height: 38px; padding: 0 12px; font-size: 14px; white-space: nowrap; } .nav-item.primary { margin: 0; } .side-foot { margin-top: 0; margin-left: auto; }
  .main { padding: 20px 16px 40px; } .two-col, .cards-layout { grid-template-columns: 1fr; }
  .two-col.split > :nth-last-child(2) { padding-right: 0; } .two-col.split > :last-child { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; margin-top: 24px; }
}

/* 设置 · 角色与标签：左列角色清单，右侧表单 + 事实库 */
.persona-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.persona-list { position: sticky; top: 16px; }
.persona-list .pl-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.persona-list .pl-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); color: var(--t1); transition: background .15s; }
.persona-list .pl-item:hover { background: var(--fill-hover); }
.persona-list .pl-item.active { background: var(--fill-active); }
.persona-list .pl-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.persona-list .pl-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.persona-list .pl-body b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
@media (max-width: 900px) { .persona-layout { grid-template-columns: 1fr; } .persona-list { position: static; } }
/* 设置 · 角色：从文案提取 + 默认角色标签（可勾选的胶囊） */
.persona-form .extract-box { grid-column: 1 / -1; background: var(--fill); border-radius: var(--r); padding: 2px 18px 14px; margin-bottom: 20px; }
.persona-form .extract-box h3 { margin-top: 12px; }
.persona-form .more-opt { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 8px; }
.persona-form .rules-grid label:first-child { margin-top: 0; }
#btnMoreOpts svg { transition: transform .2s; } #btnMoreOpts.open svg { transform: rotate(180deg); }
.persona-form .extract-box textarea { width: 100%; }
.persona-form .extract-box .row { margin-top: 10px; }
.tag-pick-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tag-pick-groups .tg-name { font-size: 12px; color: var(--t3); margin-bottom: 6px; }
.tag-pick-groups .tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.form .tag-pick { display: inline-flex; position: relative; margin: 0; font-weight: 400; cursor: pointer; }
.tag-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tag-pick span { height: 30px; padding: 0 12px; border-radius: var(--pill); border: 2px solid transparent; background: var(--red-soft); font-size: 13px; color: var(--red); display: inline-flex; align-items: center; transition: border-color .15s, background .15s; }
.tag-pick:hover span { background: rgba(255, 36, 66, .14); }
.tag-pick input:checked + span { border-color: var(--red); font-weight: 500; }
.tag-pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* 登录 / 注册 / 找回密码 */
.login-card .auth-tabs { justify-content: center; margin-bottom: 18px; }
.login-card .auth-tabs .tab { height: 36px; font-size: 15px; }
.login-card .auth-links { font-size: 13px; color: var(--t3); margin: 14px 0 0; display: flex; gap: 8px; justify-content: center; }
.login-card .auth-links a { color: var(--t2); } .login-card .auth-links a:hover { color: var(--red); }

/* 编辑器 · 三步流程 */
/* 第 1 步：左右两栏，中间竖线分隔（与导出页一致） */
.brief-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.brief-layout > div:first-child { padding-right: 32px; }
.brief-layout > div:last-child { border-left: 1px solid var(--line); padding-left: 32px; }
.brief-layout textarea, .brief-layout > div > input { width: 100%; }
.brief-layout > div > input { margin-top: 10px; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }
.inline-field select { width: auto; }
.tag-groups { display: flex; flex-direction: column; gap: 12px; }
.tag-group { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 8px; }
.tag-group .tg-name { font-size: 12px; color: var(--t3); }
.tag-group .tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 标签胶囊：默认浅红底红字，选中后外面加一圈红边 */
.tag-chip { height: 32px; padding: 0 14px; border-radius: var(--pill); border: 2px solid transparent; background: var(--red-soft); font: inherit; font-size: 13px; color: var(--red); cursor: pointer; transition: border-color .15s, background .15s; }
.tag-chip:hover { background: rgba(255, 36, 66, .14); }
.tag-chip.active { border-color: var(--red); font-weight: 500; }
.tag-groups.only-rec .tag-chip:not(.rec):not(.active) { display: none; }
.tag-groups.only-rec .tag-group:not(.has-rec) { display: none; }
.tags-foot { margin-top: 12px; }
.tags-foot button { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--t3); cursor: pointer; }
.tags-foot button:hover { color: var(--red); }
.persona-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; background: var(--fill); border-radius: var(--r-sm); }
.persona-pick .pp-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.persona-pick select, .persona-pick .ui-select { width: auto; min-width: 180px; max-width: 60%; }
.persona-pick .pp-meta { font-size: 12px; color: var(--t3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.panel-foot .muted { margin-right: auto; }
.chart-list .chart-item { padding: 8px 12px; background: var(--fill); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 13px; }
/* 第 3 步选项区：风格、封面风格各占一整行；页数 / 内容 与 照片 并排 */
.layout-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin-bottom: 20px; }
.layout-options .lo-block { padding: 20px 0; min-width: 0; border-top: 1px solid var(--line); }
.layout-options .lo-block:first-child { border-top: 0; padding-top: 0; }
.layout-options .lo-block:not(.lo-wide):nth-last-child(2) { padding-right: 32px; }
.layout-options .lo-block:not(.lo-wide):last-child { border-left: 1px solid var(--line); padding-left: 32px; }
.layout-options .lo-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.layout-options .lo-title .muted { font-weight: 400; }
.layout-options .switch { display: flex; margin: 10px 0; }
.layout-options input[type=range] { width: 100%; margin: 4px 0 2px; }
.layout-options .lo-photos { display: flex; margin: 10px 0 0; }
.layout-options .lo-photos .ui-select, .layout-options .lo-photos select { width: auto; min-width: 110px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.style-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--fill); font: inherit; font-size: 12px; color: var(--t2); cursor: pointer; }
.style-card.static { cursor: default; align-items: flex-start; padding: 12px; }
.style-card:hover { border-color: var(--line); }
.style-card.active { border-color: var(--red); color: var(--t1); font-weight: 600; }
.style-card .swatches { display: inline-flex; gap: 0; border-radius: 8px; overflow: hidden; }
.style-card .swatches i { display: block; width: 18px; height: 22px; }
.plan-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.plan-chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--t2); border: 1px solid var(--line); }
.plan-chip.r-cover, .plan-chip.r-closing { background: var(--t1); color: #fff; border-color: var(--t1); }
.plan-chip.r-chart { background: var(--blue); color: #fff; border-color: var(--blue); }
.plan-chip.r-photo { background: var(--ok); color: #fff; border-color: var(--ok); }
.dropzone.small { padding: 14px; font-size: 12px; }
/* 第 3 步的照片区：缩略图放大到 120px 宽，浮动工具条缩小并留在图内 */
.asset-grid.small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.asset-grid.small .asset .dim { display: none; }
.asset-grid.small .asset .tools { bottom: 6px; right: 6px; left: 6px; justify-content: center; padding: 2px; gap: 0; }
.asset-grid.small .asset .tools button { width: 24px; height: 24px; font-size: 12px; }
.asset-grid.small .asset .tools button svg { width: 14px; height: 14px; }
.nav-form { display: block; } .nav-form .nav-item { border: none; font-family: inherit; text-align: left; }
.tag-lib { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tag-lib-item { display: inline-block; padding: 4px 12px; border-radius: var(--pill); background: var(--fill); font-size: 13px; }
.tag-lib-item.builtin { color: var(--t2); }
.tag-lib-item.mine { background: var(--red-soft); color: var(--t1); } .tag-lib-item.mine summary { cursor: pointer; }
.tag-lib-item.mine[open] { display: block; width: 100%; border-radius: var(--r-sm); padding: 8px 14px; }
@media (max-width: 1000px) { .brief-layout, .layout-options { grid-template-columns: 1fr; } .layout-options .lo-block:not(.lo-wide):nth-last-child(2) { padding-right: 0; } .layout-options .lo-block:not(.lo-wide):last-child { border-left: 0; padding-left: 0; } .brief-layout > div:first-child { padding-right: 0; } .brief-layout > div:last-child { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; margin-top: 24px; } }

.layout-options .lo-wide { grid-column: 1 / -1; }
/* 封面风格：缩略图卡片（public/assets/thumbs/templates，3:4），选中描红框 */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.cover-chip { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 8px; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--fill); font: inherit; font-size: 12px; color: var(--t2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.cover-chip:hover { border-color: var(--line); background: var(--fill-hover); }
.cover-chip.active { border-color: var(--red); color: var(--t1); font-weight: 600; }
.cover-thumb { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cover-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-chip.auto .cover-thumb { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff1ec, #ffe3d6); color: var(--red); }
.cover-chip.auto .cover-thumb .icon { width: 28px; height: 28px; }
.cover-name { display: inline-flex; align-items: center; justify-content: center; gap: 3px; line-height: 1.3; }
.cover-name .icon { width: 13px; height: 13px; color: var(--t3); }