/* ============================================================
   贴图号营销助手 · 统一设计系统（Apple 风格）
   原则：中性色大面积、彩色小点缀；8px 间距节奏；4 级字阶；
        柔和阴影分层，不用硬边框；动效轻、慢、短。
   布局（layout.php）与原型（preview）共用本文件。
   ============================================================ */

:root {
  /* 中性色 */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;          /* 主文字，不用纯黑 */
  --text-2: #6e6e73;       /* 次级文字 */
  --text-3: #86868b;       /* 辅助小字 */
  --hairline: rgba(0, 0, 0, .08);
  --hairline-2: rgba(0, 0, 0, .05);

  /* 彩色点缀（小面积专用） */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, .10);
  --green: #1d8a4a;
  --green-deep: #176f3b;
  --green-soft: rgba(52, 199, 89, .13);
  --red: #d70015;
  --red-soft: rgba(255, 59, 48, .09);
  --amber: #b25000;
  --amber-soft: rgba(255, 149, 0, .13);

  /* 柔和阴影（低透明度，靠光影分层） */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 14px rgba(0, 0, 0, .05);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .10);

  /* 圆角与间距（8px 倍数） */
  --r-lg: 16px;
  --r-md: 10px;
  --r-pill: 999px;
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 48px; --sp-6: 96px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Microsoft YaHei", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* hidden 属性必须永远生效（组件的 display:flex/grid 会盖过浏览器默认的 [hidden] 规则） */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { text-decoration: underline; }
small { color: var(--text-2); font-size: 12px; }
summary { cursor: pointer; }
::selection { background: var(--accent-soft); }

/* ---------- 布局骨架 ---------- */
.app { display: flex; min-height: 100vh; }

/* 侧边栏：浅色、安静，活跃项用蓝色胶囊 */
.sidebar {
  width: 232px; flex: 0 0 232px;
  background: #f2f2f7;
  border-right: 1px solid var(--hairline-2);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.logo { padding: var(--sp-3) 20px 4px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.logo span { color: var(--accent); }
.logo-sub { padding: 0 20px var(--sp-3); font-size: 11px; color: var(--text-3); letter-spacing: 1.5px; }
.menu { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
.menu a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 17px; }
.menu a:hover { background: rgba(0, 0, 0, .05); color: var(--ink); text-decoration: none; }
.menu a.active { background: var(--accent); color: #fff; }
.side-foot {
  margin-top: auto; padding: var(--sp-2) 20px;
  font-size: 11px; color: var(--text-3);
  border-top: 1px solid var(--hairline-2);
}

/* 右侧：毛玻璃顶栏 + 居中限宽主区（宽屏自动留白） */
.right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 64px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline-2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-3);
  position: sticky; top: 0; z-index: 10;
}
.crumb { font-size: 13px; color: var(--text-3); }
.crumb b { color: var(--ink); font-weight: 600; }
.right-tools { display: flex; align-items: center; gap: 12px; }
.badge {
  font-size: 12px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent);
  padding: 4px 12px; border-radius: var(--r-pill);
}
.badge-success { background: var(--green-soft); color: var(--green); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e8e8ed; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.main {
  width: 100%; max-width: 1680px;
  margin: 0 auto;
  padding: 40px var(--sp-5) var(--sp-6);
}

/* ---------- 字阶（仅 4 级） ---------- */
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 8px; }
.page-sub { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0 0 40px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: var(--sp-4) 0 var(--sp-2); }

/* ---------- 组件 ---------- */
/* 提示文字：去边框去底色，用留白分隔 */
.hint { color: var(--text-2); font-size: 13px; line-height: 1.7; }

.cards { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); flex-wrap: wrap; }
.card {
  flex: 1; min-width: 200px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-3);
}
.card .num { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.card div:last-child { color: var(--text-2); font-size: 13px; margin-top: 2px; }

.frm {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-3);
}

/* 输入框：白底、细灰边、聚焦蓝色光环。
   表单内的输入框可伸可缩（flex 收缩），窄屏永不撑破容器 */
input[type="text"], input[type="password"], input[type="url"], input[type="email"],
input[type="number"], input[type="tel"], input[type="date"], input[type="time"],
input[type="search"], input:not([type]), select, textarea {
  padding: 10px 14px;
  border: 1px solid #d2d2d7; border-radius: var(--r-md);
  background: var(--surface);
  font: inherit; font-size: 14px; color: var(--ink);
  max-width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .18);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
textarea { width: 100%; font-family: inherit; }

/* 表单：输入项均分伸缩，按钮固定不换行 */
.frm input:not([type="checkbox"]):not([type="radio"]),
.frm select { flex: 1 1 220px; min-width: 0; width: auto; }
.frm button, form button { flex: 0 0 auto; white-space: nowrap; }
.frm label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
/* 长字段：占满整行（设置页用） */
.fld-full { flex: 1 1 100% !important; width: 100%; }

/* 纵向表单（设置页）：主轴为纵向时上面的 flex-basis 会变成「高度 220px」把输入框拉成大方块。
   纵向布局下输入框恢复自然高度，横向占满（受字段自身 max-width 约束） */
.frm-col { flex-direction: column; align-items: stretch; }
.frm-col input:not([type="checkbox"]):not([type="radio"]),
.frm-col select { flex: 0 0 auto; width: 100%; }
.frm-col h2, .frm-col > small, .frm-col > p { width: 100%; }
/* label 包裹输入框（回填数据表单）：文本类输入框紧跟文字吃剩余空间；
   checkbox / radio 保持原生尺寸，绝不可被拉伸（否则整行布局被撑爆） */
.frm-col label { flex: 0 0 auto; }
.frm-col label > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 auto; width: auto; }
.frm-col label > input[type="checkbox"],
.frm-col label > input[type="radio"] { flex: 0 0 auto; width: auto; }

/* 地址 / 小程序页：分组标注表单（每组一条细分隔线，字段上方带小标签） */
.link-frm { display: block; }
.lf-group { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--hairline-2); }
.lf-group:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.lf-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.lf-title small { font-weight: 400; color: var(--text-3); margin-left: 10px; }
.lf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.lf-grid .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-grid .fld > span { font-size: 12px; color: var(--text-2); }
.lf-grid .fld > span b { color: var(--red); font-weight: 600; }
.lf-grid .fld.w2 { grid-column: span 2; }
.lf-grid .fld.w3 { grid-column: 1 / -1; }
.link-frm .lf-grid input:not([type="checkbox"]):not([type="radio"]) { width: 100%; flex: none; }
.lf-foot { display: flex; gap: 10px; align-items: center; }
.lf-foot a.btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr 1fr; } .lf-grid .fld.w2, .lf-grid .fld.w3 { grid-column: 1 / -1; } }

/* 挂载方式分段选择（二选一）：灰底胶囊 + 选中白底浮起 */
.seg { display: inline-flex; gap: 4px; background: var(--bg); border-radius: var(--r-md); padding: 3px; align-self: flex-start; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 16px; border-radius: 7px; font-size: 13px; color: var(--text-2); cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.seg input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: none; box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .18); }

/* 小程序挂载方式徽标（列表列内） */
.pill-link { background: var(--accent-soft); color: var(--accent); margin-left: 8px; }
.pill-path { background: var(--green-soft); color: var(--green); margin-left: 8px; }

/* 页内 Tab（添加信息 / 列表）：浅灰胶囊轨道 + 选中深色胶囊浮起 */
.page-tabs { display: inline-flex; gap: 6px; background: rgba(0, 0, 0, .06); border-radius: var(--r-pill); padding: 4px; margin: 0 0 20px; }
.page-tabs a { display: inline-flex; cursor: pointer; align-items: center; gap: 7px; padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.page-tabs a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-tabs a:hover { color: var(--ink); text-decoration: none; }
.page-tabs a.on { background: var(--ink); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .20); }

/* 按钮：默认主操作蓝；辅操作灰；语义绿仅用于公众号推送 */
button {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  color: #fff; background: var(--accent);
  padding: 10px 20px; border-radius: var(--r-md);
  white-space: nowrap;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
button:hover { background: var(--accent-hover); }
button:active { transform: scale(.97); }
.btn-secondary { background: #e8e8ed; color: var(--ink); }
.btn-secondary:hover { background: #dcdce1; }
.btn-success { background: var(--green); }
.btn-success:hover { background: var(--green-deep); }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 8px; }
button:disabled, .btn-secondary:disabled, .btn-success:disabled {
  background: #ececf0; color: #b0b0b6; cursor: not-allowed; opacity: 1;
}
button:disabled:hover, .btn-secondary:disabled:hover, .btn-success:disabled:hover {
  background: #ececf0; transform: none;
}

/* 表格：白卡承载，仅极细分隔线，无竖线无外框。
   列多时放进 .tbl-wrap 横向滚动，永不挤压变形 */
.tbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.tbl-wrap table { box-shadow: none; border-radius: 0; }
.tbl-wrap > table { min-width: 640px; }
.tbl-wrap > table.tbl-wide { min-width: 880px; }
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden; font-size: 14px;
}
th, td { text-align: left; padding: 14px 20px; vertical-align: top; }
td { overflow-wrap: anywhere; }
td b { overflow-wrap: break-word; }
td img { border-radius: 8px; display: block; max-width: 100%; }
/* 状态 / 日期等短列禁止断词换行（draft 不再断成 draf t） */
.tbl-wrap td.nw { white-space: nowrap; }
th {
  font-size: 12px; font-weight: 500; color: var(--text-3);
  letter-spacing: .02em; background: transparent;
  border-bottom: 1px solid var(--hairline-2);
}
td { padding: var(--sp-2) 20px; border-bottom: 1px solid var(--hairline-2); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(0, 0, 0, .02); }

/* 状态提示：低刺激底色，无边框硬线 */
.err, .ok, .warn {
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: var(--sp-3); font-size: 14px;
}
.err { background: var(--red-soft); color: var(--red); }
.ok  { background: var(--green-soft); color: var(--green-deep); }
.warn { background: var(--amber-soft); color: var(--amber); }
.err ul, .ok ul { margin: 8px 0 0; padding-left: 20px; }
.ok a { color: inherit; text-decoration: underline; }

/* 文本色点缀 */
.text-success { color: var(--green); font-weight: 600; }
.text-danger  { color: var(--red); font-weight: 600; }
.text-warn    { color: var(--amber); }

/* 生成结果：多卡网格（min() 保证极窄屏不溢出） */
.result {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-2);
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-3);
}
.result > .meta { grid-column: 1 / -1; min-width: 280px; }
.result .cover {
  width: 100%; max-width: 240px; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 12px;
  border: 1px solid var(--hairline-2);
}
.result ol { margin: 6px 0 var(--sp-2); padding-left: 20px; line-height: 1.9; }
.result p { margin: 6px 0; line-height: 1.7; }

.card-box {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  background: rgba(0, 0, 0, .025); border-radius: 12px; padding: var(--sp-2);
}
.card-imgs { display: flex; flex-direction: column; flex: 0 0 auto; align-items: center; }
.card-actions { flex: 1 1 220px; min-width: 0; }
.card-actions form { background: transparent; }
.card-actions .hint { overflow-wrap: anywhere; }

/* ---------- 生成页版式重排：表单三段式 + 结果区「左信息、右卡片」 ---------- */
/* 表单：名称/品类/城市一行三个，卖点整行，比例/风格/数量与生成按钮一行 */
.gen-frm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; }

/* 生成页头部：左说明右表单（纵向紧凑），提示横幅仍全局流式 */
.gen-head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.gen-intro h1 { margin: 0 0 8px; font-size: 20px; }
.gen-intro .page-sub { font-size: 12.5px; line-height: 1.65; margin: 0 0 10px; }
.gen-intro .hint { font-size: 12px; }
.gen-head .gen-frm { gap: 10px; }
.gen-head .gen-frm input:not([type="checkbox"]):not([type="radio"]),
.gen-head .gen-frm select { padding: 9px 12px; }
.gen-head .gen-frm .gen-opts { grid-column: 1 / -1; }
@media (max-width: 900px) { .gen-head { grid-template-columns: 1fr; } }
.gen-frm input:not([type="checkbox"]):not([type="radio"]),
.gen-frm select { flex: none; width: 100%; }
.gen-frm .fld-wide { grid-column: 1 / -1; }
.gen-frm .gen-opts {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  border-top: 1px solid var(--hairline-2); padding-top: 12px;
}
.gen-frm .gen-opts select { flex: 0 0 auto; width: auto; min-width: 170px; }
.gen-frm .gen-opts button { margin-left: auto; }

/* 结果区：左侧标题组/话题/配文信息栏（粘性跟随），右侧卡片自适应铺满 */
.gen-result {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.gen-result > .gen-meta {
  grid-column: 1; min-width: 0;
  position: sticky; top: 16px;
  background: var(--bg); border-radius: 12px; padding: 16px;
}
.gen-result > .gen-cards {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
.gen-result > .gen-foot { grid-column: 1 / -1; margin-top: 4px; }

/* 挂载地址自定义下拉：原生 select 展开时选项宽度跟随控件、长地址会被截断；
   自绘面板向上弹出（控件位于页面底部）、选项完整换行显示 */
.link-pick { position: relative; flex: 0 0 auto; }
.link-pick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 320px; padding: 9px 14px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface); font-size: 13px; color: var(--ink);
  cursor: pointer; line-height: 1.4;
}
.link-pick-btn:hover { border-color: var(--accent); }
.link-pick-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-pick-btn .caret { font-style: normal; font-size: 10px; color: var(--text-3); }
.link-pick-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px);
  min-width: 100%; max-width: 400px; max-height: 260px; overflow: auto;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  padding: 6px; z-index: 70;
}
.link-pick-opt { padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.link-pick-opt:hover { background: var(--bg); }
.link-pick-opt.is-cur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* 卡片改为竖排：图在上、操作在下，宽度跟随网格列 */
.gen-cards .card-box { flex-direction: column; }
.gen-cards .card-imgs { width: 100%; position: relative; }
.gen-cards .card-imgs img, .gen-cards .card-imgs .cover { width: 100%; max-width: none; }
/* 图册卡片来源徽标：样卡(灰蓝) / AI 生成(紫) / 手动上传(绿)，左上角常驻 */
.gal-src { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6; background: rgba(60, 64, 72, .78); color: #fff; pointer-events: none; }
.gal-src[data-src="ai"] { background: rgba(124, 77, 255, .85); }
.gal-src[data-src="upload"] { background: rgba(46, 125, 50, .85); }
/* 卡片高度贴内容：取消纵向拉伸（flex:1 1 220px 是旧横排规则，会在按钮下方撑出大块空白），各行等高改为顶部对齐 */
.gen-cards { align-items: start; }
.gen-cards .card-actions { flex: none; }

@media (max-width: 1200px) {
  .gen-result { grid-template-columns: 1fr; }
  .gen-result > .gen-meta { grid-column: 1; position: static; }
  .gen-result > .gen-cards { grid-column: 1; }
}

/* ---------- 作品管理：行内规整（整齐 / 清晰 / 通透） ---------- */
/* 行距放宽一点，信息分层靠留白与字色，不靠线框；
   整行垂直居中：勾选框 / ID / 缩略图 / 胶囊 / 状态 / 日期 / 按钮组统一对齐行中轴 */
.tbl-posts td { padding: 18px 20px; vertical-align: middle; }
.tbl-posts th { vertical-align: middle; }
/* 标题 / 配文分层：标题实、配文虚，配文最多两行截断 */
.post-main { max-width: 420px; }
.post-tt { font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.post-sub { color: var(--text-3); font-size: 12px; line-height: 1.7; margin-top: 4px; overflow-wrap: anywhere; }
.post-cap {
  color: var(--text-2); font-size: 12px; line-height: 1.7; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 缩略图统一尺寸：首图竖版 3:4，封面横版 16:9，图册徽标与图同宽（上下宽度一致） */
.post-media { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: fit-content; }
.post-thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hairline-2); }
.post-cover { width: 128px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hairline-2); }
.post-media .badge { text-align: center; padding: 4px 2px; font-size: 11px; white-space: nowrap; }
/* 合规状态用低刺激胶囊，命中明细收进胶囊下方的辅助小字 */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.pill-ok { background: var(--green-soft); color: var(--green); }
.pill-block { background: var(--red-soft); color: var(--red); }
/* 卡片操作四按钮：两列等宽网格，与卡片同宽对齐（微调 chips 不用此类，保持流式） */
.gal-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gal-ops .btn-sm { width: 100%; display: inline-flex; align-items: center; justify-content: center; }

/* AI 配图面板：微调指令小号芯片（多指令下紧凑排列）。
   注意：全局 button:hover 是蓝色主按钮样式且优先级更高，必须用 .ai-chip:hover（0,2,0）显式压回，
   否则点击后蓝底叠蓝字、只剩一个蓝色色块 */
.ai-chip { padding: 4px 10px; font-size: 12px; border-radius: 999px; border: 1px solid var(--hairline-2); background: var(--bg); color: var(--ink); cursor: pointer; line-height: 1.4; }
.ai-chip, .ai-chip:hover, .ai-chip:focus, .ai-chip:active { transform: none; }
.ai-chip:hover, .ai-chip:focus, .ai-chip:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 数据列：主行实字、互动率辅助行，与标题列同一套层级 */
.m-line { line-height: 1.7; }
/* 操作列：两列网格，按钮等宽对齐，永不因换行错位 */
.row-actions { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 8px; }
.row-actions .btn-sm { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.row-actions form { display: contents; }
.btn-danger { background: #d70015; }
.btn-danger:hover { background: #b00012; }

/* 键盘可达：统一的焦点光环 */
a:focus-visible, button:focus-visible, .menu a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .28);
  border-radius: 8px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .app { flex-direction: column; }
  .sidebar {
    position: static; width: auto; flex: none; height: auto;
    flex-direction: row; align-items: center;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--hairline-2);
  }
  .logo { padding: 8px 12px; }
  .logo-sub, .side-foot { display: none; }
  .menu { flex-direction: row; flex: 1; overflow-x: auto; padding: 0 8px; }
  .menu a { white-space: nowrap; }
  .main { padding: var(--sp-3) var(--sp-2) 64px; }
  h1 { font-size: 24px; }
  .page-sub { margin-bottom: var(--sp-3); }
  .card-box { flex-direction: column; }
  .card-imgs { flex-direction: row; gap: 12px; }
  .card-imgs img, .card-imgs .cover { width: 120px; min-width: 120px; }
  th, td { padding: 12px 14px; }
}

/* 动效尊重系统偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   登录页 · Apple 风格（views/login.php）
   版式对标 appleid.apple.com：图标 → 大标题 → 副标题 →
   灰底填充输入框 → 整宽蓝色按钮 → 小字脚注
   ============================================================ */
.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: var(--sp-3);
  -webkit-font-smoothing: antialiased;
}
.login-wrap {
  width: 100%; max-width: 400px;
  animation: login-in .55s cubic-bezier(.25,.8,.35,1) both;
}
@keyframes login-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.login-card {
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.10);
  padding: 44px 40px 34px;
  text-align: center;
}
.login-mark {
  display: inline-flex; margin-bottom: 18px;
  filter: drop-shadow(0 6px 14px rgba(10,111,232,.28));
}
.login-title {
  margin: 0; font-size: 26px; font-weight: 700;
  letter-spacing: -.022em; color: var(--ink);
}
.login-sub {
  margin: 8px 0 26px; font-size: 14px; color: var(--text-2);
}
.login-error {
  background: var(--red-soft); color: var(--red);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; margin-bottom: 18px;
  animation: login-shake .4s ease;
}
@keyframes login-shake {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-field { display: block; }
.login-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin: 0 0 6px 2px;
}
.login-field input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 12px;
  background: #f5f5f7; color: var(--ink);
  font-size: 15px; font-family: var(--font);
  outline: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-field input::placeholder { color: var(--text-3); }
.login-field input:hover { background: #efeff2; }
.login-field input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.login-btn {
  margin-top: 6px; height: 48px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 600; font-family: var(--font);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.login-btn:hover { background: var(--accent-hover); box-shadow: 0 8px 20px rgba(0,113,227,.28); }
.login-btn:active { transform: scale(.975); }
.login-btn svg { margin-top: 1px; }
.login-foot {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
  color: var(--text-3); font-size: 12px; line-height: 1.8;
}
.login-foot code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px; color: var(--text-2);
  background: #f5f5f7; border-radius: 5px; padding: 1px 6px;
}

/* 深色模式（跟随系统） */
@media (prefers-color-scheme: dark) {
  .login-body { background: #000; }
  .login-card {
    background: #1c1c1e;
    box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
  }
  .login-title { color: #f5f5f7; }
  .login-sub, .login-label { color: #98989d; }
  .login-field input { background: #2c2c2e; color: #f5f5f7; }
  .login-field input:hover { background: #323234; }
  .login-field input:focus { background: #1c1c1e; }
  .login-foot { border-top-color: rgba(255,255,255,.08); color: #636366; }
  .login-foot code { background: #2c2c2e; color: #98989d; }
}

/* 动效尊重系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .login-wrap, .login-error { animation: none; }
}

/* 窄屏 */
@media (max-width: 480px) {
  .login-card { padding: 36px 24px 28px; border-radius: 18px; }
}

/* 顶栏用户区（layout.php 右上角） */
.topbar .whoami { display: flex; align-items: center; gap: 10px; }
.topbar .whoami .uname { color: var(--text-2); font-size: 13px; }
.topbar .logout-link {
  color: var(--text-2); font-size: 13px; text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-pill);
  transition: background .2s ease, color .2s ease;
}
.topbar .logout-link:hover { background: var(--hairline-2); color: var(--ink); }

/* ============================================================
   登录页 · 动态背景（柔光色块缓慢漂移 + 鼠标视差）
   Apple 壁纸质感：大尺度、高模糊、低透明度、极慢速
   ============================================================ */
.login-bg {
  position: fixed; inset: 0;
  overflow: hidden; z-index: 0;
  pointer-events: none;
}
.login-wrap { position: relative; z-index: 1; }
.orb {
  position: absolute;
  border-radius: 50%;
  /* 性能：不用 filter: blur（大面积高斯模糊逐帧重光栅化，很卡），
     柔边全部由 radial-gradient 多段渐隐实现，纯合成器绘制 */
  will-change: transform;
  transform: translate(calc(var(--mx, 0) * var(--px, 0px)), calc(var(--my, 0) * var(--px, 0px)));
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1);
}
/* 视差系数（每个色块幅度不同，制造景深） */
.orb-a { --px: 26px; }
.orb-b { --px: -18px; }
.orb-c { --px: 12px; }

/* 浅色模式：蓝 / 绿 / 橙三色柔光 */
.orb-a {
  width: 58vmax; height: 58vmax;
  left: -18vmax; top: -22vmax;
  background: radial-gradient(circle, rgba(0,113,227,.20) 0%, rgba(0,113,227,.15) 32%, rgba(0,113,227,.06) 55%, rgba(0,113,227,0) 72%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.orb-b {
  width: 52vmax; height: 52vmax;
  right: -20vmax; top: 8vmax;
  background: radial-gradient(circle, rgba(52,199,89,.17) 0%, rgba(52,199,89,.12) 32%, rgba(52,199,89,.05) 55%, rgba(52,199,89,0) 72%);
  animation: drift-b 42s ease-in-out infinite alternate;
}
.orb-c {
  width: 46vmax; height: 46vmax;
  left: 22vmax; bottom: -24vmax;
  background: radial-gradient(circle, rgba(255,149,0,.13) 0%, rgba(255,149,0,.09) 32%, rgba(255,149,0,.04) 55%, rgba(255,149,0,0) 72%);
  animation: drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { translate: 0 0; scale: 1; }
  to   { translate: 9vmax 7vmax; scale: 1.12; }
}
@keyframes drift-b {
  from { translate: 0 0; scale: 1; }
  to   { translate: -8vmax 10vmax; scale: .92; }
}
@keyframes drift-c {
  from { translate: 0 0; scale: 1; }
  to   { translate: 7vmax -8vmax; scale: 1.15; }
}

/* 深色模式：深空蓝 / 靛紫 / 青（Apple 深色壁纸质感） */
@media (prefers-color-scheme: dark) {
  .orb-a { background: radial-gradient(circle, rgba(10,132,255,.30) 0%, rgba(10,132,255,.22) 32%, rgba(10,132,255,.09) 55%, rgba(10,132,255,0) 72%); }
  .orb-b { background: radial-gradient(circle, rgba(94,92,230,.26) 0%, rgba(94,92,230,.19) 32%, rgba(94,92,230,.08) 55%, rgba(94,92,230,0) 72%); }
  .orb-c { background: radial-gradient(circle, rgba(100,210,255,.16) 0%, rgba(100,210,255,.12) 32%, rgba(100,210,255,.05) 55%, rgba(100,210,255,0) 72%); }
}

/* 减动效：停掉漂移与视差 */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; transition: none; }
}

/* ============================================================
   登录页 · 滑块人机验证（views/login.php 内 .cap-*）
   ============================================================ */
.cap-box { text-align: left; }
.cap-canvas {
  position: relative; width: 280px; margin: 0 auto 10px;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 1px var(--hairline);
}
.cap-bg { display: block; width: 280px; height: 150px; transition: opacity .2s ease; }
.cap-piece {
  position: absolute; left: 10px; top: 55px;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.cap-refresh {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); color: var(--text-2);
  border: 0; border-radius: 8px; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .18s ease, background .18s ease;
}
.cap-refresh:hover { color: var(--ink); background: rgba(255,255,255,.92); }
.cap-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-2);
}
.cap-slider {
  position: relative; width: 280px; height: 42px; margin: 0 auto;
  background: #f5f5f7; border-radius: 12px;
  overflow: hidden; cursor: grab;
  box-shadow: inset 0 0 0 1px var(--hairline);
  user-select: none; touch-action: none;
}
.cap-slider.dragging { cursor: grabbing; }
.cap-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent-soft);
  transition: none;
}
.cap-tip {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-3);
  pointer-events: none; transition: opacity .2s ease;
}
.cap-slider.ok .cap-tip { color: var(--green); font-weight: 600; }
.cap-handle {
  position: absolute; left: 0; top: 0; width: 40px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2);
  box-shadow: 0 1px 4px rgba(0,0,0,.14), inset 0 0 0 1px var(--hairline-2);
  border-radius: 12px;
  transition: background .18s ease, color .18s ease;
}
.cap-slider.dragging .cap-handle { color: var(--accent); }
.cap-slider.ok { cursor: default; }
.cap-slider.ok .cap-handle { background: var(--green); color: #fff; box-shadow: 0 1px 4px rgba(29,138,74,.35); }
.cap-slider.ok .cap-fill { background: var(--green-soft); }
.cap-slider.bad { animation: login-shake .4s ease; }
.cap-state {
  min-height: 18px; margin-top: 6px; text-align: center;
  font-size: 12px; color: var(--red);
}
.cap-state:empty { min-height: 0; margin: 0; }

/* ============================================================
   登录页 · reCAPTCHA 式人机验证（views/login.php 内 .rc-*）
   ============================================================ */
.rc-widget {
  width: 302px; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3; border-radius: 10px;
  padding: 0 12px; height: 76px;
  cursor: pointer; user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rc-widget:hover { border-color: #b5b5b5; }
.rc-widget:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rc-widget.busy { cursor: progress; }
.rc-widget.done { cursor: default; border-color: #cfe8d8; background: #f4faf6; }
.rc-widget.bad { animation: login-shake .4s ease; }

.rc-check {
  position: relative; width: 26px; height: 26px; flex: 0 0 auto;
}
.rc-box-square {
  position: absolute; inset: 0;
  width: 24px; height: 24px;
  background: #fff; border: 2px solid #c1c1c1; border-radius: 5px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rc-widget:hover .rc-box-square { border-color: #9a9a9a; }
.rc-spinner, .rc-done {
  position: absolute; inset: 0; display: none;
  left: -1px; top: -1px;
}
.rc-widget.busy .rc-box-square { display: none; }
.rc-widget.busy .rc-spinner {
  display: block; color: var(--accent);
  animation: rc-spin 1s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-widget.done .rc-box-square, .rc-widget.done .rc-spinner { display: none; }
.rc-widget.done .rc-done {
  display: block; color: #1e9e50;
  animation: rc-pop .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes rc-pop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.rc-label {
  flex: 1 1 auto; font-size: 14px; color: rgba(0,0,0,.85);
}
.rc-brand {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding-left: 10px;
  border-left: 1px solid #e3e3e3;
}
.rc-brand-name { font-size: 9px; color: #7d7d7d; letter-spacing: .02em; }
.rc-foot {
  margin: 8px auto 0; width: 302px; max-width: 100%;
  font-size: 10px; color: #9a9a9a; text-align: left;
}

/* 升级挑战弹窗（滑块拼图） */
.rc-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.42);
  animation: rc-fade .2s ease;
}
@keyframes rc-fade { from { opacity: 0; } }
.rc-modal-card {
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  width: 340px; max-width: calc(100vw - 32px);
  overflow: hidden;
  animation: rc-in .25s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes rc-in {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
}
.rc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--hairline-2);
}
.rc-modal-close {
  display: inline-flex; padding: 6px;
  background: none; border: 0; border-radius: 8px;
  color: var(--text-2); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.rc-modal-close:hover { background: var(--hairline-2); color: var(--ink); }
.rc-modal-body { padding: 18px 16px 14px; }

@media (prefers-color-scheme: dark) {
  .rc-widget { background: #2c2c2e; border-color: #3a3a3c; }
  .rc-widget:hover { border-color: #55555a; }
  .rc-widget.done { background: #1c2a22; border-color: #2c4a38; }
  .rc-label { color: rgba(255,255,255,.88); }
  .rc-box-square { background: #1c1c1e; border-color: #636366; }
  .rc-widget:hover .rc-box-square { border-color: #8e8e93; }
  .rc-brand { border-left-color: #3a3a3c; }
  .rc-brand-name { color: #98989d; }
  .rc-modal-card { background: #1c1c1e; }
}

/* 验证失败提示行（勾选框下方） */
.rc-msg {
  width: 302px; max-width: 100%; margin: 6px auto 0;
  min-height: 16px; font-size: 12px; color: var(--red); text-align: left;
}
.rc-msg:empty { min-height: 0; margin: 0; }

/* ---- 紧凑化调整（验证区域留白收紧）---- */
.login-form { gap: 12px; }
.rc-widget { height: 66px; }
.rc-foot { margin: 2px auto 0; }
.login-card { padding: 36px 40px 30px; }

/* ============================================================
   发布设置页 · 创作来源声明网格（views/pub.php 内 .pub-srcs）
   ============================================================ */
.pub-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pub-srcs label {
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: 10px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pub-srcs label:hover { border-color: var(--text-3); }
.pub-srcs label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pub-srcs input { flex: 0 0 auto; }
@media (max-width: 640px) { .pub-srcs { grid-template-columns: 1fr; } }

/* ===== 生成进度弹层：3D 设计师创作中（接入 AI 生图后，生成提交时显示） ===== */
.gen-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(6px); animation: genFade .25s ease; }
.gen-card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); padding: 30px 40px 26px;
  width: min(470px, 92vw); text-align: center; }
.gen-card h3 { margin: 0 0 4px; font-size: 17px; }
.gen-card > small { color: var(--text-2); font-size: 12px; }
.gen-bar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: 14px 0 8px; }
.gen-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #7c5cff); transition: width 1.2s ease; }
.gen-status { margin: 0 0 2px; font-size: 14px; color: var(--ink); min-height: 20px; }

/* —— 3D 舞台 —— */
.gen-3d { position: relative; width: 250px; height: 168px; margin: 0 auto 14px; perspective: 700px; }
.d3-desk { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 96px; border-radius: 10px;
  background: linear-gradient(160deg, #a06a3c, #7c4a24);
  transform: rotateX(56deg); transform-origin: bottom; box-shadow: 0 18px 24px -14px rgba(0,0,0,.35); }
.d3-screen { position: absolute; left: 26px; bottom: 52px; width: 128px; height: 92px; border-radius: 8px;
  background: #1f2430; padding: 6px; transform: rotateY(-16deg) rotateX(2deg);
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.4); }
.d3-screen::after { content: ''; position: absolute; left: 50%; bottom: -14px; width: 34px; height: 14px;
  transform: translateX(-50%); background: #2c3242; border-radius: 0 0 6px 6px; }
.d3-paint { display: block; width: 100%; height: 100%; border-radius: 4px;
  background: linear-gradient(120deg, #ffd9a8, #ff9e7d, #7cc4ff, #b78cff, #ffd9a8) 0 0 / 300% 300%;
  animation: paintSweep 2.6s ease-in-out infinite; }
.d3-card { position: absolute; width: 26px; height: 34px; border-radius: 5px; opacity: 0;
  box-shadow: 0 6px 12px -4px rgba(0,0,0,.3); animation: cardFloat 3.6s ease-in-out infinite; }
.d3-card.c1 { left: 168px; bottom: 96px; background: linear-gradient(140deg, #7cc4ff, #4f7cff); }
.d3-card.c2 { left: 196px; bottom: 76px; background: linear-gradient(140deg, #ffcf7d, #ff8a5c); animation-delay: 1.2s; }
.d3-card.c3 { left: 182px; bottom: 56px; background: linear-gradient(140deg, #b78cff, #7c5cff); animation-delay: 2.4s; }
.d3-guy { position: absolute; right: 6px; bottom: 26px; width: 118px; height: 138px; animation: guyBob 2.8s ease-in-out infinite; }
.g-arm { transform-origin: 80px 98px; animation: armDraw 1.5s ease-in-out infinite alternate; }
.g-beret { transform-origin: 60px 46px; animation: beretTilt 2.8s ease-in-out infinite alternate; }
@keyframes genFade { from { opacity: 0; } }
@keyframes paintSweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes cardFloat { 0% { opacity: 0; transform: translateY(14px) rotate(-6deg) scale(.8); }
  25% { opacity: 1; } 70% { opacity: 1; transform: translateY(-16px) rotate(5deg) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) rotate(-4deg) scale(.9); } }
@keyframes guyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes armDraw { from { transform: rotate(8deg); } to { transform: rotate(26deg); } }
@keyframes beretTilt { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }