* { box-sizing: border-box; }
:root {
  /* ===== 设计规范 Token（V1.0）===== */
  /* 主题色 */
  --brand-primary:        #2563EB;
  --brand-primary-hover:  #1D4ED8;
  --brand-primary-active: #1E40AF;
  --brand-primary-soft:   rgba(37, 99, 235, 0.08);
  --brand-on-primary:     #FFFFFF;

  /* 中性色 */
  --gray-25:  #FCFCFD;
  --gray-50:  #F7F8FA;
  --gray-100: #F2F4F7;
  --gray-200: #E4E7EC;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;

  /* 文本语义 */
  --text-title:     var(--gray-900);
  --text-body:      var(--gray-700);
  --text-secondary: var(--gray-500);
  --text-disabled:  var(--gray-400);

  /* 背景与描边 */
  --bg-body:      #F5F7FA;
  --bg-card:      #FFFFFF;
  --bg-sidebar:   #FFFFFF;
  --bg-hover:     #F2F4F7;
  --border-base:  #E4E7EC;
  --border-light: #F2F4F7;

  /* 状态色 */
  --success:      #16A34A;
  --success-bg:   #EAF8F1;
  --warning:      #F59E0B;
  --warning-bg:   #FFF6E5;
  --danger:       #DC2626;
  --danger-bg:    #FEF3F2;
  --info:         #0EA5E9;
  --info-bg:      #EFF6FF;

  /* 间距（4px 栅格）*/
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;

  /* 圆角 */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-card:       0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-dropdown:   0 4px 12px rgba(16, 24, 40, 0.08);

  /* 动效 */
  --duration-fast:   120ms;
  --duration-normal: 180ms;
  --duration-slow:   240ms;
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);

  /* ===== 兼容旧变量（映射到新 Token）===== */
  --text:   var(--text-title);
  --muted:  var(--text-secondary);
  --soft:   var(--text-disabled);
  --line:   var(--border-base);
  --blue:   var(--brand-primary);
  --navy:   var(--brand-primary-active);
  --card:   var(--bg-card);
  --green:  var(--success);
}
html, body { margin: 0; min-width: 1280px; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text-title);
  background: var(--bg-body);
  font-variant-numeric: tabular-nums;
}
button, a, input, textarea, select { font: inherit; }
button { border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
.native-file { display: none; }
.app { width: 100%; min-width: 1280px; height: 100vh; overflow: hidden; }

/* ===== 顶部栏（规范 7.2：用户入口与全局辅助，不承载一级导航）===== */
.topbar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 56px; min-width: 1280px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border-bottom: 1px solid var(--border-base);
}
.brand { height: 56px; padding-left: 20px; display: flex; align-items: center; gap: 10px; }
.brand img { width: 32px; height: 32px; border-radius: var(--radius-md); }
.brand-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--text-title); }
.brand-sub { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; padding-right: 20px; }
.credits-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--brand-primary-soft); color: var(--brand-primary);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.credits-pill:hover { background: rgba(37, 99, 235, 0.14); }
.account-top { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--brand-primary); }
.account-name { display: block; font-weight: 600; font-size: 14px; line-height: 1.1; color: var(--text-title); }
.account-sub { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; }

/* ===== 侧栏（规范 7.3：7 项一级菜单 + 底部管理项）===== */
.sidebar {
  position: fixed; z-index: 15; top: 56px; bottom: 0; left: 0; width: 240px;
  padding: var(--space-3) var(--space-3); display: flex; flex-direction: column;
  background: var(--bg-sidebar); border-right: 1px solid var(--border-base); overflow-y: auto; overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.side-nav { flex: 1; }
.side-label { margin: var(--space-3) var(--space-3) var(--space-2); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.side-section { margin-bottom: var(--space-1); }

/* 一级菜单项 */
.side-row, .side-link {
  height: 44px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3);
  border-radius: var(--radius-md); color: var(--text-title); font-size: 14px; font-weight: 600; white-space: nowrap;
  position: relative; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.side-row { justify-content: space-between; }
.side-row:hover, .side-link:hover { background: var(--bg-hover); color: var(--brand-primary); }
.side-main { display: flex; align-items: center; gap: var(--space-3); overflow: hidden; }
.side-title { overflow: hidden; text-overflow: ellipsis; }

/* 选中态：浅蓝底 + 左侧3px竖条 + 蓝色文字图标 */
.side-link.active, .side-row.active {
  background: var(--brand-primary-soft); color: var(--brand-primary);
}
.side-link.active::before, .side-row.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 2px; background: var(--brand-primary);
}
.side-link.active .icon, .side-row.active .icon { color: var(--brand-primary); }

/* 图标 */
.icon { width: 20px; height: 20px; display: inline-grid; place-items: center; color: var(--text-secondary); font-size: 16px; flex: 0 0 20px; }
.side-link.active .icon, .side-row.active .icon { color: var(--brand-primary); }

/* 数量角标 */
.badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--gray-100); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.chev { color: var(--text-disabled); font-size: 14px; transition: transform var(--duration-normal) var(--ease-out); }

/* 二级菜单（去图标，缩进+引导线） */
.branch { position: relative; margin: 2px 0 var(--space-2) 0; padding-left: 0; }
.branch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 28px; width: 1px; background: var(--border-light); }
.branch .side-link {
  height: 40px; padding-left: var(--space-8); color: var(--text-body); font-weight: 500;
}
.branch .side-link::before { display: none; }
.branch .side-link:hover { background: var(--bg-hover); color: var(--brand-primary); }
.branch .side-link.active {
  background: var(--brand-primary-soft); color: var(--brand-primary); font-weight: 600;
}
.branch .side-link.active::before {
  display: block; left: 16px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 2px; background: var(--brand-primary);
}

/* 分隔线 */
.divider { height: 1px; background: var(--border-base); margin: var(--space-3) 0 var(--space-2); }

/* 底部管理项 */
.side-admin { padding-bottom: var(--space-2); }

/* ===== 主内容区 ===== */
.main {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 240px;
  margin-left: 0;
  padding: 76px var(--space-6) var(--space-8);
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  overflow: auto;
}
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 16px 44px rgba(72,102,137,.13); }
.hero-grid { display: grid; grid-template-columns: 1fr 320px 178px; gap: 16px; align-items: stretch; }
.hero { position: relative; height: 290px; padding: 32px 28px; border: 1px solid rgba(201,216,232,.9); border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 82% 42%, rgba(224,250,252,.82) 0, rgba(224,250,252,.14) 330px, transparent 500px), linear-gradient(105deg, rgba(245,249,255,.98), rgba(255,255,255,.92) 58%, rgba(232,246,252,.68)); box-shadow: 0 16px 44px rgba(72,102,137,.12); }
.hero:after { content: ""; position: absolute; right: -14px; bottom: -1px; width: 72px; height: 170px; background: rgba(194,231,248,.72); clip-path: polygon(46% 0,100% 0,100% 100%,0 100%); }
.eyebrow { color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .03em; margin-bottom: 16px; }
.hero h1 { margin: 0 0 18px; font-size: 34px; line-height: 1.16; font-weight: 900; }
.hero p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.actions { display: flex; gap: 10px; }
.action { border: 1px solid rgba(15,23,42,.08); border-radius: 999px; height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--text); font-weight: 800; box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.action.primary { border-color: rgba(15,43,105,.9); background: linear-gradient(180deg,#163d91,#0c2d73); color: #fff; }
.profile { height: 290px; padding: 22px 18px 18px; }
.profile-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.person { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.profile .avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.person strong { display: block; font-size: 17px; }
.person span span { display: block; margin-top: 8px; color: var(--soft); font-size: 12px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { height: 72px; border-radius: 10px; background: #f8fafc; padding: 14px 12px; }
.mini span { display: block; color: var(--soft); font-size: 12px; margin-bottom: 9px; }
.mini b { font-size: 20px; }
.clock { height: 290px; padding: 97px 18px 0; }
.weekday { color: #64748b; font-size: 13px; margin-bottom: 10px; }
.time { font-size: 44px; line-height: 1; font-weight: 900; margin-bottom: 16px; }
.date { color: var(--soft); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.stat { height: 146px; padding: 22px 18px; position: relative; }
.label { color: var(--muted); font-size: 14px; margin-bottom: 13px; }
.big { font-size: 31px; font-weight: 900; line-height: 1; margin-bottom: 13px; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.65; }
.corner { position: absolute; top: 18px; right: 18px; color: var(--muted); }
.brand-stat .big { font-size: 25px; margin-bottom: 10px; background: linear-gradient(90deg,#0f172a,#2563eb 48%,#0f766e); -webkit-background-clip: text; color: transparent; }
.section-title { margin: 18px 0 14px 18px; font-size: 20px; font-weight: 900; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0 18px; overflow: hidden; }
.quick-card { height: 214px; padding: 10px; overflow: hidden; text-align: left; }
.quick-image { position: relative; height: 116px; border-radius: 11px; overflow: hidden; background: #eef4fb; }
.quick-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill { position: absolute; right: 10px; bottom: 9px; min-width: 46px; height: 32px; padding: 0 10px; border-radius: 18px; background: rgba(15,23,42,.78); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.quick-card strong { display: block; margin: 11px 0 5px; font-size: 16px; line-height: 1; }
.quick-card p { margin: 0; color: var(--muted); font-size: 13px; }
.models { margin: 18px 24px 0; min-height: 260px; padding: 18px 18px 16px; overflow: hidden; }
.models-head, .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.models h2, .page-head h1 { margin: 0 0 12px; font-size: 22px; }
.desc { color: var(--muted); font-size: 13px; }
.refresh, .ghost-btn, .primary-btn { min-height: 36px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; box-shadow: 0 8px 18px rgba(15,23,42,.06); }
.primary-btn { color: #fff; border-color: #14327d; background: linear-gradient(180deg,#1d4ed8,#0f2f6f); }
.model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.model-card { position: relative; min-height: 96px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; grid-template-columns: 50px minmax(0, 1fr) 68px; align-items: center; padding: 10px 12px; box-shadow: 0 10px 26px rgba(72,102,137,.08); }
.model-card img, .doubao-mark { width: 40px; height: 40px; object-fit: contain; justify-self: start; }
.doubao-mark { border-radius: 12px; background: linear-gradient(90deg,#e9f6ff,#f7fbff); display: grid; place-items: center; color: #62c6ee; font-size: 25px; font-weight: 900; }
.model-copy { text-align: center; min-width: 0; }
.model-copy strong { display: block; font-size: 12px; margin-bottom: 4px; line-height: 1.28; }
.vendor { display: block; color: var(--soft); font-size: 11px; margin-bottom: 5px; }
.model-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.model-meta { justify-self: end; text-align: right; }
.speed { display: inline-grid; place-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; background: #eef6ff; color: #2f54eb; font-size: 11px; line-height: 1.2; font-weight: 800; margin-bottom: 7px; }
.kind { color: var(--green); font-size: 11px; line-height: 1.2; font-weight: 700; }
.single { margin-top: 12px; width: 258px; }
.tool-grid, .hub-grid, .design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tool-card { min-height: 250px; padding: 22px; text-align: left; position: relative; overflow: hidden; }
.tool-card h2,
.tool-card-title { display: block; margin: 12px 0 12px; font-size: 22px; line-height: 1.25; color: var(--text); }
.tool-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; }
.hub-card { min-height: 330px; padding-top: 16px; }
.hub-card img {
  width: 100%;
  aspect-ratio: 16 / 8.2;
  display: block;
  margin-bottom: 14px;
  border-radius: 12px;
  object-fit: cover;
  background: #eef2f7;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.tag { min-height: 26px; padding: 5px 10px; border-radius: 999px; background: #eef6ff; color: #2f54eb; font-size: 12px; font-weight: 800; }
.cost-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 15px; }
.design-summary-grid { display: grid; grid-template-columns: 220px 320px 1fr; gap: 14px; margin-bottom: 16px; }
.design-detail-hero { min-height: 220px; padding: 24px; display: grid; grid-template-columns: minmax(520px, 1fr) 420px; gap: 24px; align-items: center; margin-bottom: 12px; }
.design-detail-hero h1 { margin: 16px 0 14px; font-size: 32px; line-height: 1.2; }
.design-detail-hero p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 780px; }
.design-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.design-detail-layout { display: grid; grid-template-columns: 446px 1fr; gap: 12px; align-items: start; height: calc(100vh - 392px); min-height: 430px; overflow: hidden; }
.design-side, .design-main { display: grid; gap: 12px; min-width: 0; max-height: 100%; overflow: auto; padding-right: 4px; align-content: start; }
.design-detail-layout .panel { border-radius: 12px; box-shadow: 0 10px 30px rgba(72,102,137,.1); }
.design-param-group { padding: 12px 0; border-bottom: 1px solid #edf2f7; }
.design-param-group h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.design-param-group .toolbar-row { margin: 0; }
.design-note {
  padding: 12px 0 0;
}
.design-note h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.design-note p {
  min-height: 64px;
  margin: 0;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  line-height: 1.6;
}
.design-steps { display: grid; gap: 10px; }
.design-steps .history-mini { grid-template-columns: 42px 1fr; }
.workflow-panel { min-height: 156px; }
.design-preview-card { min-height: 190px; border-radius: 16px; padding: 20px; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(45,212,191,.32), transparent 240px), linear-gradient(135deg, #16213f 0%, #1e293b 52%, #0f766e 130%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.design-preview-card.alt { background: radial-gradient(circle at 20% 20%, rgba(251,191,36,.24), transparent 260px), linear-gradient(135deg, #111827 0%, #334155 58%, #7c2d12 130%); }
.design-preview-card h3 { margin: 0; font-size: 28px; line-height: 1.2; }
.design-preview-card p { margin: 10px 0 0; color: rgba(255,255,255,.74); line-height: 1.7; }
.design-preview-card span { color: rgba(255,255,255,.7); font-weight: 800; }
.design-preview-card strong { font-size: 22px; }
.preview-mode { width: max-content; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 900; }
.design-preview-inner { min-height: 92px; border-radius: 14px; padding: 14px; background: rgba(255,255,255,.1); display: grid; gap: 7px; backdrop-filter: blur(10px); }
.design-preview-inner b { color: #fff; font-size: 16px; }
.design-preview-inner em { color: rgba(255,255,255,.78); font-style: normal; }
.history-mini.active { border-color: rgba(37,99,235,.35); background: #eef6ff; }
.design-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.design-example-grid .upload-card { min-height: 104px; }
.design-example-grid .tag { display: inline-flex; margin: 8px 0; }
.image-tools-hero { grid-template-columns: minmax(520px, 1fr) 600px; }
.image-tools-hero .image-hub-entry { justify-self: end; align-self: end; }
.image-workbench-hero {
  min-height: 176px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 420px;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}
.image-workbench-hero h1 { margin: 10px 0 12px; font-size: 32px; line-height: 1.2; }
.image-workbench-hero p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 820px; }
.image-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.image-status-grid .mini, .image-tools-hero .mini { min-height: 98px; height: auto; }
.image-status-grid .mini b, .image-tools-hero .mini b { display: block; font-size: 18px; line-height: 1.25; margin-bottom: 8px; }
.image-status-grid .mini span:last-child, .image-tools-hero .mini span:last-child { margin: 0; color: var(--muted); line-height: 1.35; }
.image-workspace { grid-template-columns: minmax(360px, 430px) minmax(420px, 1fr); }
.text-edit-workspace {
  grid-template-columns: 420px minmax(300px, 1fr) 240px;
  align-items: start;
}
.text-edit-history-panel {
  max-height: calc(100vh - 260px);
  overflow: hidden;
}
.text-edit-history-list {
  max-height: calc(100vh - 340px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.text-edit-history-card {
  min-height: 176px;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
}
.text-edit-history-card img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
}
.text-edit-history-card strong,
.text-edit-history-card span,
.text-edit-history-card em { display: block; }
.text-edit-history-card strong { color: var(--text); margin-bottom: 6px; }
.text-edit-history-card span { color: #0f766e; font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.text-edit-history-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-edit-history-card em { color: #64748b; font-size: 12px; font-style: normal; }
.text-edit-history-card .record-actions { margin-top: 8px; }
.image-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.image-option-grid .upload-card { min-height: 76px; }
.image-option-grid .upload-card.active { border-color: rgba(37,99,235,.32); background: #eef6ff; }
.image-upload-zone {
  min-height: 150px;
  margin: 14px 0;
  padding: 18px;
  border: 1px dashed #c9d8e8;
  border-radius: 14px;
  background: linear-gradient(135deg,#f8fbff,#eef7fb);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.image-upload-zone strong { display: block; margin-bottom: 8px; font-size: 16px; }
.image-upload-zone p { margin: 0; color: var(--muted); line-height: 1.55; }
.image-upload-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.image-upload-meta span {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbe4f0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.image-compare {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  place-items: stretch;
}
.image-preview-cell {
  min-height: 360px;
  border: 1px dashed #c9d8e8;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.image-preview-cell strong { display: block; margin: 14px 0 8px; font-size: 20px; color: #334155; }
.image-preview-cell p { margin: 0; color: var(--muted); line-height: 1.55; }
.image-result-box { min-height: 330px; }
.image-result-box strong { display: block; margin-bottom: 10px; font-size: 22px; color: #334155; }
.image-result-box p { margin: 0 0 8px; color: var(--muted); }
.image-result-box span { color: var(--soft); }
.image-result-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.image-result-meta div {
  min-height: 70px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.image-result-meta span { display: block; margin-bottom: 8px; color: var(--soft); font-size: 12px; }
.image-result-meta b { color: #334155; font-size: 14px; line-height: 1.45; }
.image-bottom-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.image-bottom-status span {
  min-height: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.image-recent-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}
.image-recent-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.image-recent-card.no-thumb { grid-template-columns: 1fr; }
.image-recent-card img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef6ff;
}
.image-recent-card strong,
.image-recent-card span { display: block; }
.image-recent-card strong { margin-bottom: 4px; font-size: 13px; }
.image-recent-card span { color: #0f766e; font-size: 12px; font-weight: 900; }
.image-recent-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-state {
  min-height: 150px;
  border: 1px dashed #c9d8e8;
  border-radius: 12px;
  background: #f8fbff;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}
.expert-hero {
  width: 1200px;
  min-height: 120px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 596px 520px;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}
.expert-kicker { display: flex; align-items: center; gap: 12px; color: #334155; font-size: 13px; font-weight: 800; }
.back-square {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.expert-title-block h1 { margin: 10px 0 8px; font-size: 26px; line-height: 1.2; }
.expert-title-block p { margin: 0; color: var(--muted); line-height: 1.55; }
.expert-status-block { display: grid; gap: 12px; }
.expert-status-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.expert-status-head strong, .expert-status-head span { display: block; }
.expert-status-head strong { margin-bottom: 8px; font-size: 15px; }
.expert-status-head span { color: var(--soft); font-size: 12px; }
.expert-status-head .toolbar-row { margin: 0; justify-content: flex-end; }
.expert-status-head .ghost-btn { min-height: 34px; border-radius: 9px; box-shadow: none; }
.expert-workbench-strip {
  height: 52px;
  border-radius: 16px;
  padding: 14px 18px;
  color: #fff;
  background: radial-gradient(circle at 84% 48%, rgba(63,224,230,.62), transparent 120px), linear-gradient(105deg,#234861,#16859b 58%,#16d4dc);
  position: relative;
  overflow: hidden;
}
.expert-workbench-strip:after {
  content: "";
  position: absolute;
  right: 90px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
}
.expert-workbench-strip span { display: block; color: rgba(255,255,255,.72); font-size: 12px; }
.expert-workbench-strip b { display: block; margin-top: 5px; font-size: 16px; }
.expert-workbench-strip em {
  position: absolute;
  right: 18px;
  top: 17px;
  font-style: normal;
  min-height: 28px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 800;
}
.expert-workspace { width: 1200px; grid-template-columns: 498px 374px 278px; gap: 20px; }
.expert-input-panel, .expert-result-panel { border-radius: 18px; }
.panel-pill {
  width: max-content;
  min-height: 38px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(90deg,#234861,#11c7d8);
  margin-bottom: 12px;
}
.panel-pill span {
  margin-left: 176px;
  color: #d84d75;
  background: #fff3f7;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
}
.expert-result-panel .panel-pill span { margin-left: 158px; color: var(--soft); background: #f8fafc; }
.expert-mode-box {
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  margin-bottom: 12px;
}
.expert-mode-box h2, .expert-upload-head h2 { margin: 0 0 8px; font-size: 18px; }
.expert-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.expert-mode-card {
  min-height: 74px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  text-align: left;
  background: #fff;
}
.expert-mode-card.active {
  color: #fff;
  border-color: transparent;
  background: radial-gradient(circle at 90% 30%, rgba(45,212,191,.45), transparent 110px), linear-gradient(135deg,#233c50,#2c7682);
}
.expert-mode-card strong, .expert-mode-card span { display: block; }
.expert-mode-card strong { margin-bottom: 10px; font-size: 16px; }
.expert-mode-card span { color: inherit; opacity: .78; line-height: 1.45; }
.expert-upload-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.expert-upload-head p { margin: 0; color: var(--muted); font-size: 13px; }
.expert-count {
  min-width: 108px;
  min-height: 56px;
  padding: 10px;
  border-radius: 16px;
  background: #eef6ff;
  text-align: right;
}
.expert-count b { display: block; color: #1d4ed8; font-size: 18px; margin-bottom: 6px; }
.expert-count span { color: var(--muted); font-size: 12px; }
.expert-upload-card { min-height: 64px; display: grid; grid-template-columns: 46px 1fr; align-items: center; column-gap: 12px; }
.expert-upload-card:before {
  content: "▣";
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eef6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.expert-upload-card strong, .expert-upload-card span { grid-column: 2; }
.expert-empty {
  min-height: 44px;
  padding: 12px;
  border: 1px dashed #dbe4f0;
  border-radius: 14px;
  background: #fbfdff;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.expert-label-row { display: flex; justify-content: space-between; color: var(--muted); font-weight: 800; }
.expert-prompt-field textarea { min-height: 94px; }
.expert-output-head { display: flex; justify-content: space-between; align-items: start; margin: 10px 0; }
.expert-output-head strong, .expert-output-head b { display: block; color: var(--text); font-size: 18px; margin-bottom: 8px; }
.expert-output-head span { color: var(--muted); line-height: 1.45; }
.expert-output-head div:last-child { text-align: right; }
.expert-output-head div:last-child b {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 14px;
}
.expert-output-head div:last-child span {
  display: inline-grid;
  min-height: 30px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.expert-result-empty {
  min-height: 154px;
  border: 1px dashed #c9d8e8;
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: #fff;
  padding: 16px;
}
.expert-result-empty div {
  width: 56px;
  height: 60px;
  border-radius: 22px;
  background: linear-gradient(180deg,#bfddfb,#dbeafe);
  margin-bottom: 10px;
}
.expert-result-empty strong { font-size: 18px; margin-bottom: 10px; }
.expert-result-empty p { margin: 0; color: var(--muted); }
.expert-info-box {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.expert-info-box strong, .expert-info-box span { display: block; }
.expert-info-box strong { margin-bottom: 8px; }
.expert-info-box span { color: #1d4ed8; font-weight: 900; margin-bottom: 8px; }
.expert-info-box p { margin: 0; color: var(--muted); line-height: 1.55; }
.expert-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.expert-model-mark {
  min-height: 40px;
  margin: 8px 0 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.expert-model-mark img { width: 32px; height: 32px; object-fit: contain; }
.expert-history-panel { max-height: 100%; overflow: hidden; }
.expert-history-list {
  max-height: calc(100vh - 370px);
  min-height: 420px;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.expert-history-card {
  min-height: 104px;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
}
.expert-thumb-stack { display: flex; gap: 4px; align-items: flex-start; }
.expert-history-card img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef6ff;
}
.expert-history-card strong,
.expert-history-card span { display: block; }
.expert-history-card strong {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expert-history-card span { color: #0f766e; font-size: 12px; font-weight: 900; }
.expert-history-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-history-card .record-actions { margin-top: 8px; }
.expert-footer-status {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.expert-footer-status span {
  min-height: 62px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  color: var(--muted);
}
.expert-footer-status b { color: var(--text); }
.workspace { display: grid; grid-template-columns: minmax(360px, 430px) minmax(420px, 1fr); gap: 14px; align-items: start; }
.panel { padding: 16px; }
.panel h2 { margin: 0 0 16px; font-size: 18px; }
.ai-cap-head {
  min-height: 116px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.ai-cap-title { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 900; }
.ai-cap-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.ai-cap-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.panel-kicker { margin: 2px 0 12px; font-size: 15px; font-weight: 900; color: #334155; }
.panel-kicker span { display: block; margin-top: 4px; color: var(--soft); font-size: 12px; font-weight: 800; }
.wide-btn { width: 100%; min-height: 42px; margin-top: 6px; }
.route-ai-multi-angle .page,
.route-ai-region-repaint .page,
.route-ai-prompt .page {
  max-width: 1530px;
  margin: 0 auto;
}
@media (min-width: 1800px) {
  .route-ai-multi-angle .page,
  .route-ai-region-repaint .page,
  .route-ai-prompt .page {
    transform: translateX(80px);
  }
}
.ai-workbench-topline {
  min-height: 52px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
}
.ai-back {
  width: max-content;
  color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.ai-workbench-crumb {
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.ai-workbench-crumb span { margin: 0 8px; color: #cbd5e1; }
.ai-workbench-crumb strong { color: var(--text); }
.ai-workbench-crumb em {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e9fff4;
  color: #16a34a;
  font-style: normal;
  font-size: 12px;
}
.ai-workbench-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ai-angle-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ai-param-panel {
  min-height: calc(100vh - 236px);
  border-radius: 14px;
}
.ai-param-panel h1 {
  margin: 0 0 8px;
  font-size: 20px;
}
.ai-angle-preview {
  min-height: calc(100vh - 236px);
  border-radius: 14px;
}
.ai-task-panel .task-list { max-height: 372px; overflow: auto; padding-right: 4px; }
.angle-empty {
  min-height: 68px;
  border: 1px dashed #c9d8e8;
  border-radius: 8px;
  background: #f7faff;
  display: grid;
  place-items: start;
  align-content: center;
  text-align: left;
  color: var(--muted);
  padding: 14px;
}
.angle-empty strong { color: #334155; margin-bottom: 8px; }
.angle-empty p { margin: 0; }
.angle-empty.done { border-style: solid; border-color: rgba(37,99,235,.28); background: #eef6ff; }
.angle-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.angle-result-card {
  min-height: 240px;
  padding: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  overflow: hidden;
}
.angle-placeholder {
  height: 196px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#fbfdff,#f7f8fb);
}
.angle-placeholder:before {
  content: "";
  width: 54px;
  height: 78px;
  border: 2px solid #d1d5db;
  border-radius: 18px 18px 10px 10px;
  box-shadow: 0 28px 0 -24px #d1d5db;
}
.angle-result-card strong { display: block; padding: 12px 12px 4px; }
.angle-result-card p { margin: 0; padding: 0 12px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.angle-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.angle-choice-grid button {
  min-height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 800;
}
.angle-choice-grid button.active {
  border-color: #2563eb;
  background: #eef6ff;
  color: #1d4ed8;
}
.angle-kicker { margin-top: 12px; }
.ai-task-strip {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e5edf7;
  border-radius: 10px;
  background: #fff;
}
.ai-task-strip > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.task-row.rich {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 74px 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #fff;
}
.task-row.rich strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row.rich span { color: #0f766e; font-weight: 900; }
.task-row.rich em { color: var(--muted); font-style: normal; font-size: 12px; text-align: right; }
.repaint-mode {
  width: 100%;
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}
.repaint-mode.active { background: #eef6ff; color: #1d4ed8; }
.repaint-mode strong, .repaint-mode span { display: block; }
.repaint-mode strong { margin-bottom: 5px; font-size: 14px; }
.repaint-mode span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.repaint-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 286px;
  gap: 0;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.repaint-left-rail {
  min-height: calc(100vh - 236px);
  padding: 14px 10px;
  border-right: 1px solid #e5edf7;
  background: #fbfdff;
}
.rail-title {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.repaint-left-rail .toolbox {
  display: grid;
  gap: 8px;
}
.repaint-left-rail .tool {
  justify-content: flex-start;
  width: 100%;
  border-radius: 8px;
  background: transparent;
}
.repaint-left-rail .tool.active {
  background: #fff;
  border-color: #dbe4f0;
  color: #1d4ed8;
}
.mask-stack {
  display: grid;
  gap: 10px;
}
.mask-stack label {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}
.mask-stack b { justify-self: end; color: #334155; }
.rail-actions {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.rail-actions button {
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.repaint-canvas-panel {
  min-height: calc(100vh - 236px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.repaint-canvas-head {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e5edf7;
}
.repaint-canvas-head strong,
.repaint-canvas-head span { display: block; }
.repaint-canvas-head span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.mask-toolbar {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mask-toolbar span { color: #1d4ed8; }
.mask-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.mask-toolbar input { width: 86px; }
.repaint-canvas {
  min-height: 560px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background-image: linear-gradient(#e8eef6 1px, transparent 1px), linear-gradient(90deg,#e8eef6 1px,transparent 1px);
  background-size: 32px 32px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 24px;
}
.repaint-canvas strong { display: block; font-size: 22px; margin-bottom: 10px; }
.repaint-canvas span { color: var(--muted); }
.repaint-canvas .upload-row { width: 340px; margin-top: 20px; }
.canvas-upload-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 10px;
  background: #fff;
  color: #2563eb;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.result-film {
  margin: 0 12px 12px;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.result-film div { display: flex; justify-content: space-between; margin-bottom: 8px; }
.result-film span { color: #1d4ed8; font-weight: 900; }
.result-film p { margin: 0; color: var(--muted); line-height: 1.5; }
.mode-copy {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg,#f8fbff,#eef7fb);
  border: 1px solid #dbe4f0;
  margin-bottom: 12px;
}
.mode-copy > span { color: var(--soft); font-size: 12px; font-weight: 900; }
.panel-title { margin: 0 0 8px; font-size: 18px; line-height: 1.28; font-weight: 900; color: var(--text); }
.mode-copy .panel-title { margin: 10px 0 8px; }
.mode-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.model-skill-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
}
.model-skill-box strong, .model-skill-box b { display: block; margin-bottom: 8px; }
.model-skill-box b { color: #1d4ed8; }
.model-skill-box p { margin: 0; color: var(--muted); font-size: 12px; }
.route-ai-buyer-show .page {
  max-width: 1484px;
  margin: 0 auto;
}
@media (min-width: 1800px) {
  .route-ai-buyer-show .page {
    max-width: 1530px;
    transform: translateX(80px);
  }
}
.buyer-topline {
  min-height: 52px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
}
.buyer-back {
  width: max-content;
  color: #f97316;
  border-color: #fed7aa;
  background: #fff7ed;
}
.buyer-crumb {
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.buyer-crumb span { margin: 0 8px; color: #cbd5e1; }
.buyer-crumb strong { color: var(--text); }
.buyer-crumb em {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff1e8;
  color: #fb6a35;
  font-style: normal;
  font-size: 12px;
}
.buyer-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.buyer-layout {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.buyer-input-panel, .buyer-results-panel {
  min-height: calc(100vh - 236px);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}
.buyer-input-panel { padding: 16px; }
.buyer-results-panel { padding: 18px; }
.buyer-title-block { margin-bottom: 18px; }
.buyer-title-block h1 {
  margin: 6px 0 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}
.buyer-title-block p { margin: 0; color: var(--muted); }
.buyer-queue-head,
.buyer-param-head {
  align-items: center;
  margin-bottom: 10px;
}
.buyer-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.buyer-upload-row .upload-card {
  min-height: 60px;
  border-radius: 8px;
}
.buyer-prompt-field {
  padding: 18px 20px 16px;
  border: 1px solid #e3ebf5;
  border-radius: 12px;
  background: #fff;
}
.buyer-prompt-field textarea {
  min-height: 146px;
  margin-top: 8px;
  border-radius: 8px;
}
.buyer-prompt-field .toolbar-row { margin: 0; justify-content: flex-end; }
.buyer-paste-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.buyer-dropzone {
  display: none !important;
  min-height: 82px;
  border: 1px dashed #c9d8e8;
  border-radius: 14px;
  background: #fbfdff;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  padding: 14px;
  margin: 12px 0;
}
.buyer-param-head {
  margin-top: 14px;
  padding-top: 10px;
}
.buyer-select-card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}
.buyer-select-card span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.buyer-select-card strong {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
}
.buyer-select-card img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.buyer-select-card em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 900;
}
.buyer-input-panel .wide-btn {
  min-height: 38px;
  margin-top: 16px;
  border-radius: 8px;
  background: #92a7f5;
  box-shadow: none;
}
.buyer-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.buyer-template {
  min-height: 150px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #fff;
  text-align: left;
}
.buyer-template span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}
.buyer-template strong { display: block; margin-bottom: 8px; }
.buyer-template p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.buyer-template em { color: #0f766e; font-style: normal; font-weight: 900; }
.buyer-task-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 338px);
  overflow: auto;
  padding-right: 4px;
}
.buyer-task {
  min-height: 132px;
  padding: 14px 10px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  cursor: pointer;
}
.buyer-task.active { border-color: rgba(37,99,235,.38); background: #fff; }
.buyer-task-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f7;
  align-self: start;
}
.buyer-task-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.buyer-task-title, .buyer-task-state { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.buyer-task strong { color: var(--text); }
.buyer-task-title span { color: var(--soft); font-size: 12px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyer-task em { color: var(--muted); font-style: normal; font-size: 12px; }
.buyer-task b {
  width: max-content;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 12px;
}
.buyer-task-state span { color: #1d4ed8; font-weight: 900; }
.buyer-progress {
  height: 4px;
  margin: 3px 0 2px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}
.buyer-progress:before {
  content: "";
  display: block;
  width: var(--p, 100%);
  height: 100%;
  background: #2456ff;
}
.buyer-task p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 12px; }
.buyer-model-mark { margin-top: 0; }
.refresh-note { color: var(--muted); font-size: 12px; font-weight: 800; }
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; padding: 11px 12px; color: var(--text); outline: none; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.upload-row.single-action { grid-template-columns: 1fr; }
.upload-card { min-height: 68px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; padding: 12px; text-align: left; }
.upload-card strong { display: block; margin-bottom: 8px; }
.upload-card span { color: var(--soft); font-size: 12px; }
.seg { display: flex; border-radius: 12px; background: #f1f5f9; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 34px; border-radius: 9px; color: var(--muted); font-weight: 800; }
.seg button.active { background: #fff; color: var(--blue); box-shadow: 0 8px 18px rgba(15,23,42,.06); }
.toolbox, .angle-pack, .template-row, .result-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.toolbar-row .active, .ghost-btn.active { color: #1d4ed8; border-color: rgba(37,99,235,.24); background: #eef6ff; }
.param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.tool, .template {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #dbe4f0;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}
.tool.active, .template.active, .angle-pack .active {
  color: #1d4ed8;
  border-color: rgba(37,99,235,.24);
  background: #eef6ff;
}
.preview-box { min-height: 330px; border: 1px dashed #c9d8e8; border-radius: 14px; background: linear-gradient(135deg,#f8fbff,#eef7fb); display: grid; place-items: center; text-align: center; color: var(--muted); }
.preview-box.done { border-style: solid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
.fake-image { min-height: 260px; width: 100%; border-radius: 14px; background: linear-gradient(135deg,#e8efff,#fff 45%,#cffafe); display: grid; place-items: center; font-weight: 900; color: #1d4ed8; }
.prompt-output { min-height: 330px; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; padding: 18px; color: #334155; line-height: 1.7; overflow: auto; white-space: normal; }
.prompt-output.preview { background: linear-gradient(135deg,#f8fbff,#eef7fb); font-size: 15px; }
.result-strip {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.result-strip button {
  min-width: 88px;
  min-height: 54px;
  border-radius: 12px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
}
.mini-result {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#2563eb,#0f766e);
  font-size: 12px;
}
.history-list { display: grid; gap: 12px; }
.history-mini { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.thumb { width: 58px; height: 58px; border-radius: 10px; background: linear-gradient(135deg,#e0f2fe,#ede9fe); overflow: hidden; display: grid; place-items: center; color: #2563eb; font-weight: 900; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.muted { color: var(--muted); }
.table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.table th { text-align: left; color: var(--muted); font-size: 13px; padding: 0 14px; }
.table td { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px; }
.table td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.table td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.table input, .table select { max-width: 170px; height: 34px; border: 1px solid #dbe4f0; border-radius: 9px; background: #fff; padding: 0 9px; }
.table.dense th, .table.dense td { padding: 10px 12px; font-size: 12px; }
.table.dense input[type="number"] { width: 76px; }
.table.dense input[type="checkbox"] { width: 18px; height: 18px; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input, .filter-bar select { height: 38px; border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; padding: 0 12px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.asset-card { overflow: hidden; text-align: left; }
.asset-media { height: 210px; background: linear-gradient(135deg,#eef6ff,#f8fbff); display: grid; place-items: center; overflow: hidden; }
.asset-media img { width: 100%; height: 100%; object-fit: cover; }
.asset-body { padding: 12px; }
.asset-status { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 9px; border-radius: 999px; background: #eef6ff; color: #1d4ed8; font-size: 12px; font-weight: 900; margin-bottom: 8px; }
.asset-body h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.35; word-break: break-word; }
.asset-source { color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.asset-file { margin: 0; color: #64748b; font-size: 12px; line-height: 1.35; word-break: break-all; }
.material-hero {
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 118px auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 14px 0;
}
.material-hero h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.2; }
.material-hero p { margin: 0; color: var(--muted); line-height: 1.55; }
.material-count {
  height: 86px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  background: #eef6ff;
  color: #1d4ed8;
}
.material-count b { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.material-count span { color: var(--muted); font-size: 13px; font-weight: 800; }
.material-panel {
  height: calc(100vh - 276px);
  min-height: 430px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.material-tabs { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.material-filter { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.material-filter label { color: var(--muted); font-size: 12px; font-weight: 800; display: inline-grid; gap: 6px; }
.material-filter label input,
.material-filter label select { min-width: 156px; }
.material-card-grid {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  align-items: start;
  gap: 16px;
  padding: 2px 0 12px 0;
}
.material-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  overflow: visible;
  cursor: pointer;
}
.route-materials .material-card {
  min-height: 420px;
}
.material-card-media {
  width: 100%;
  min-height: 0;
  border-radius: 12px;
  background: #eef6ff;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.route-materials .material-card-media {
  height: 210px;
}
.route-materials .material-card-media img {
  height: 100%;
  object-fit: cover;
}
.material-card-media img { width: 100%; height: auto; object-fit: cover; display: block; }
.material-card-body { padding: 10px 0 0; }
.material-card-body h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.35; color: #1f2937; word-break: break-word; }
.material-card-body p,
.material-card-body em,
.material-card-body small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.35; word-break: break-all; }
.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.record-card { overflow: hidden; }
.record-img { height: 190px; background: linear-gradient(135deg,#dbeafe,#f5f3ff); display: grid; place-items: center; color: #1d4ed8; font-weight: 900; }
.record-body { padding: 14px; }
.record-body h3 { margin: 0 0 8px; font-size: 16px; }
.record-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.record-actions button { height: 28px; padding: 0 10px; border-radius: 999px; background: #f1f5f9; color: var(--muted); font-size: 12px; font-weight: 800; }
.history-hero,
.data-hero {
  min-height: 150px;
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
}
.history-hero h1,
.data-hero h1,
.settings-head h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
}
.history-hero p,
.data-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.history-count {
  width: 134px;
  height: 92px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  background: #eef6ff;
  color: #1d4ed8;
}
.history-count b { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.history-count span { color: var(--muted); font-size: 13px; font-weight: 800; }
.history-shell { padding: 16px; }
.history-shell {
  height: calc(100vh - 262px);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.history-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.history-filter-row input {
  height: 38px;
  min-width: 150px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
}
.history-filter-row.compact { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.history-feed {
  min-height: 0;
  flex: 1;
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}
.history-record {
  min-height: 148px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(72,102,137,.08);
}
.history-thumb {
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef6ff;
  display: grid;
  place-items: center;
  color: #1d4ed8;
  font-weight: 900;
  text-align: center;
  padding: 10px;
}
.history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-pager input {
  width: 48px;
  height: 28px;
  margin: 0 4px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  text-align: center;
  background: #fff;
  color: var(--text);
  font-weight: 800;
}
.history-record-main { min-width: 0; }
.history-record-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.history-record-top h2 { margin: 0 0 8px; font-size: 17px; }
.history-record-top span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.history-meta-line { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.history-meta-line span {
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.history-record p {
  margin: 0;
  color: #4b5563;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-record .record-actions { margin-top: 8px; }
.history-record .record-actions button { height: 26px; }
.history-pager { justify-content: center; border-top: 1px solid var(--line); padding-top: 12px; }
.data-update { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.data-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.data-tabs button {
  min-height: 78px;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 24px rgba(72,102,137,.08);
}
.data-tabs button.active { border-color: rgba(37,99,235,.28); background: #eef6ff; }
.data-tabs strong { display: block; margin-bottom: 8px; font-size: 16px; }
.data-tabs span { color: var(--muted); font-size: 12px; }
.data-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.data-stat-grid .stat { height: 112px; padding: 18px; }
.data-stat-grid .big { font-size: 26px; }
.data-table-card { padding: 16px; margin-bottom: 14px; overflow: auto; }
.data-table-card {
  max-height: calc((100vh - 398px) / 2);
  min-height: 210px;
}
.page-size-row { display: flex; gap: 8px; justify-content: flex-end; margin: -8px 0 10px; }
.data-table { min-width: 920px; }
.data-table td strong { display: block; margin-bottom: 5px; }
.data-table td span:not(.tag) { display: block; color: var(--muted); font-size: 12px; }
.permission-head {
  min-height: 126px;
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.permission-head h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.permission-section {
  padding: 18px;
  margin-bottom: 14px;
}
.permission-section:last-child {
  height: calc(100vh - 458px);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.permission-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.permission-section-head h2,
.permission-section-title { display: block; margin: 0 0 7px; font-size: 20px; line-height: 1.25; color: var(--text); }
.permission-section-head p { margin: 0; color: var(--muted); }
.permission-model-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.model-config-card {
  min-height: 184px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(72,102,137,.07);
}
.model-config-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.model-config-title strong,
.model-config-title span { display: block; }
.model-config-title strong { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
.model-config-title span { color: var(--muted); font-size: 11px; line-height: 1.35; word-break: break-word; }
.model-toggle {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}
.model-toggle input { width: 16px; height: 16px; }
.model-toggle em { font-style: normal; }
.model-limit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.model-limit-grid label span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.model-limit-grid input {
  width: 100%;
  height: 32px;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  padding: 0 8px;
  background: #f8fafc;
}
.permission-table-wrap { min-height: 0; flex: 1; max-height: 360px; overflow: auto; }
.permission-table { min-width: 980px; }
.permission-table td strong,
.permission-table td span { display: block; }
.permission-table td strong { margin-bottom: 5px; }
.permission-table td > span { color: var(--muted); font-size: 12px; }
.permission-table select {
  width: 170px;
  height: 34px;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  padding: 0 8px;
  background: #fff;
}
.default-model-pill {
  width: max-content;
  max-width: 190px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.model-choice-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.model-choice-row label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}
.model-choice-row input { width: 13px; height: 13px; }
.settings-head {
  min-height: 86px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.settings-layout {
  height: calc(100vh - 190px);
  min-height: 510px;
  display: grid;
  grid-template-columns: 430px minmax(560px, 1fr);
  gap: 16px;
  align-items: start;
  overflow: hidden;
}
.settings-column { display: grid; gap: 16px; min-width: 0; max-height: 100%; overflow: auto; padding-right: 4px; align-content: start; }
.settings-panel { border-radius: 14px; }
.settings-panel.compact { min-height: 178px; }
.settings-section-title { margin-bottom: 14px; }
.settings-section-title span {
  display: block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}
.settings-section-title h2 { margin: 0; display: flex; gap: 8px; align-items: center; }
.settings-section-title em {
  font-style: normal;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
}
.empty-notice {
  height: 70px;
  border: 1px dashed #d8dee8;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  margin-bottom: 12px;
}
.site-state {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  margin-bottom: 12px;
}
.model-select-line { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.model-select-line > span {
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.settings-prompt-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 14px; }
.settings-prompt-list { display: grid; gap: 8px; align-content: start; }
.settings-prompt-list button {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}
.settings-prompt-list button.active { border-color: rgba(37,99,235,.3); background: #eef6ff; }
.settings-prompt-list strong,
.settings-prompt-list span { display: block; }
.settings-prompt-list strong { margin-bottom: 5px; font-size: 13px; }
.settings-prompt-list span { color: var(--muted); font-size: 11px; }
.settings-prompt-editor {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
}
.settings-prompt-editor h3,
.settings-editor-title { display: block; margin: 0 0 8px; font-size: 17px; line-height: 1.3; color: var(--text); }
.settings-prompt-editor p { margin: 0 0 12px; color: var(--muted); }
.settings-prompt-editor textarea {
  width: 100%;
  min-height: 260px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  padding: 14px;
  line-height: 1.65;
  resize: vertical;
  margin-bottom: 12px;
}
.readonly-note {
  min-height: 74px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  line-height: 1.55;
}
.ai-topline {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ai-topline .crumb { margin: 0; }
.prompt-compact-workspace {
  width: 1110px;
  max-width: 100%;
  margin: 0 auto;
}
.prompt-main-panel {
  min-height: 435px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.prompt-system-toggle {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 160px auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  box-shadow: 0 16px 44px rgba(72,102,137,.08);
}
.prompt-system-toggle span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f1eaff;
  color: #8b5cf6;
}
.prompt-system-toggle strong { color: var(--text); }
.prompt-system-toggle em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.prompt-system-toggle b { color: #94a3b8; }
.prompt-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(1040px, calc(100% - 80px));
  margin: 0 auto 30px;
  transform: translateY(-2px);
}
.prompt-tabs button {
  min-height: 70px;
  padding: 14px 22px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  text-align: left;
  box-shadow: 0 18px 38px rgba(139,92,246,.10);
}
.prompt-tabs button.active {
  border-color: rgba(139,92,246,.35);
  background: #f5f0ff;
}
.prompt-tabs strong,
.prompt-tabs span { display: block; }
.prompt-tabs strong { margin-bottom: 8px; font-size: 15px; }
.prompt-tabs span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.prompt-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
  margin-bottom: 10px;
}
.prompt-input-head label {
  color: #334155;
  font-size: 15px;
  font-weight: 900;
}
.prompt-main-panel > textarea {
  width: 100%;
  min-height: 238px;
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 18px;
  resize: none;
  line-height: 1.65;
}
.prompt-bottom-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px 18px;
  margin-top: 0;
  border-top: 1px solid #eef2f7;
}
.prompt-model-btn img { width: 32px; height: 32px; object-fit: contain; }
.canvas { min-height: 690px; padding: 28px; position: relative; overflow: hidden; }
.canvas-board { height: 520px; border: 1px dashed #c9d8e8; border-radius: 18px; background-image: linear-gradient(#edf2f7 1px, transparent 1px), linear-gradient(90deg,#edf2f7 1px,transparent 1px); background-size: 32px 32px; position: relative; }
.node { position: absolute; width: 170px; min-height: 86px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(72,102,137,.14); }
.node:nth-child(1) { left: 220px; top: 120px; }
.node:nth-child(2) { left: 520px; top: 220px; }
.node:nth-child(3) { left: 820px; top: 130px; }
.route-ai-canvas {
  background: #05090b;
  grid-template-columns: 1fr;
  grid-template-rows: 58px 1fr;
}
.route-ai-canvas .topbar {
  grid-column: 1;
  grid-row: 1;
  height: 58px;
  background: rgba(7,12,15,.96);
  border-bottom: 1px solid rgba(148,163,184,.12);
  box-shadow: none;
}
.route-ai-canvas .brand,
.route-ai-canvas .account-top,
.route-ai-canvas .sidebar,
.route-ai-canvas .nav { display: none; }
.route-ai-canvas .page-head {
  position: fixed;
  z-index: 4;
  inset: 0 0 auto 0;
  height: 58px;
  margin: 0;
  padding: 11px 18px;
  background: rgba(7,12,15,.96);
  border-bottom: 1px solid rgba(148,163,184,.12);
  color: #e5f9f4;
  align-items: center;
}
.route-ai-canvas .page-head h1 {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
}
.route-ai-canvas .page-head .desc {
  color: #2dd4bf;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  order: -1;
  margin-bottom: 2px;
}
.route-ai-canvas .page-head .actions {
  gap: 8px;
  margin-left: auto;
}
.route-ai-canvas .ghost-btn,
.route-ai-canvas .primary-btn {
  min-height: 34px;
  border-color: rgba(148,163,184,.18);
  background: rgba(255,255,255,.055);
  color: #dbeafe;
  box-shadow: none;
}
.route-ai-canvas .primary-btn {
  background: linear-gradient(180deg,#48d7e8,#0891b2);
  color: #06242b;
}
.route-ai-canvas .main {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-left: 0;
  width: 100vw;
  min-width: 1280px;
  max-width: none;
  height: 720px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 54%, rgba(20,184,166,.14), transparent 240px),
    linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px),
    linear-gradient(#05090b,#05090b);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.route-ai-canvas .canvas {
  height: 720px;
  min-height: 720px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f8fafc;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.route-ai-canvas .canvas h2 {
  width: 360px;
  max-width: 72vw;
  margin: 0 0 18px;
  color: #f8fafc;
  font-size: 23px;
  line-height: 1.14;
}
.route-ai-canvas .canvas h2:before {
  content: "FIRST WORKFLOW";
  display: block;
  margin-bottom: 12px;
  color: #2dd4bf;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}
.route-ai-canvas .canvas > .primary-btn {
  width: 120px;
  min-height: 34px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: #eef2ff;
  border-color: rgba(148,163,184,.2);
  backdrop-filter: blur(8px);
}
.route-ai-canvas .canvas-board {
  position: absolute;
  inset: 58px 0 0;
  z-index: -1;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.route-ai-canvas .node { display: none; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.task-list { display: grid; gap: 8px; margin-top: 12px; }
.task-list.compact { max-height: 150px; overflow: auto; }
.task-row { min-height: 36px; border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; padding: 0 12px; text-align: left; color: #334155; font-weight: 700; }
.subject-list { display: grid; gap: 8px; margin: 8px 0 14px; }
.subject-row { min-height: 42px; border: 1px solid #dbe4f0; border-radius: 11px; background: #fff; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.subject-row button { height: 28px; padding: 0 10px; border-radius: 999px; background: #f1f5f9; color: var(--muted); font-size: 12px; font-weight: 800; }
.add-card { border-style: dashed; }
.check-row { min-height: 34px; display: flex; align-items: center; gap: 8px; color: #334155; font-size: 13px; font-weight: 700; }
.check-row input { width: 16px; height: 16px; }
.video-flow-layout {
  height: calc(100vh - 116px);
  min-height: 604px;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
}
.video-input-panel,
.video-gallery-panel { min-height: 0; overflow: auto; }
.video-intro {
  min-height: 118px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg,#f8fbff,#eef7fb);
  border: 1px solid #dbe4f0;
}
.video-intro strong { display: block; margin-bottom: 10px; font-size: 20px; line-height: 1.28; }
.video-intro p { margin: 0; color: var(--muted); line-height: 1.55; }
.video-flow-layout .field textarea { min-height: 126px; }
.video-flow-layout .add-card strong { font-size: 20px; line-height: 1.2; }
.video-task-list {
  height: calc(100% - 58px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.video-task {
  min-height: 178px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  display: grid;
  gap: 10px;
}
.video-task.failed { background: #fffafa; border-color: #fee2e2; }
.video-task-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.video-task-status span,
.video-task-status em {
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.video-task.failed .video-task-status span,
.video-task.failed .video-task-status em { background: #fef2f2; color: #b91c1c; }
.video-task-status strong { color: var(--text); }
.video-task p {
  margin: 0;
  color: #334155;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.video-meta-row span {
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}
.video-error {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.45;
}
.video-download {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.route-ai-video-flow {
  background: #050607;
  grid-template-columns: 1fr;
  grid-template-rows: 58px 1fr;
}
.route-ai-video-flow .brand,
.route-ai-video-flow .account-top,
.route-ai-video-flow .sidebar,
.route-ai-video-flow .nav { display: none; }
.route-ai-video-flow .topbar {
  grid-column: 1;
  grid-row: 1;
  height: 58px;
  background: #090d11;
  border-bottom: 1px solid rgba(148,163,184,.12);
  box-shadow: none;
}
.route-ai-video-flow .main {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-left: 0;
  width: 100vw;
  min-width: 1280px;
  max-width: none;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #050607;
  color: #e5e7eb;
}
.route-ai-video-flow .page-head {
  height: 58px;
  margin: 0;
  padding: 9px 18px;
  background: #090d11;
  border-bottom: 1px solid rgba(148,163,184,.12);
  color: #f8fafc;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.route-ai-video-flow .page-head > div:first-child {
  order: 2;
}
.route-ai-video-flow .page-head h1 {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
}
.route-ai-video-flow .page-head .desc {
  color: #7dd3a8;
  font-size: 11px;
  font-weight: 900;
  order: -1;
  margin-bottom: 2px;
}
.route-ai-video-flow .page-head .actions {
  order: 1;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.route-ai-video-flow .page-head .actions .ghost-btn:first-child {
  order: -1;
}
.route-ai-video-flow .page-head .actions .ghost-btn:last-child {
  margin-left: auto;
}
.route-ai-video-flow .video-head-status,
.route-ai-video-flow .video-head-param {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #d1d5db;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.route-ai-video-flow .video-head-status {
  color: #9af3ad;
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.2);
}
.route-ai-video-flow .ghost-btn,
.route-ai-video-flow .primary-btn,
.route-ai-video-flow .template {
  border-color: rgba(148,163,184,.14);
  background: rgba(255,255,255,.06);
  color: #d1d5db;
  box-shadow: none;
}
.route-ai-video-flow .primary-btn {
  background: linear-gradient(180deg,#35d04e,#16942e);
  color: #f0fdf4;
}
.route-ai-video-flow .video-flow-layout {
  height: calc(100vh - 58px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(460px, 36vw) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}
.route-ai-video-flow .video-input-panel,
.route-ai-video-flow .video-gallery-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #e5e7eb;
}
.route-ai-video-flow .video-input-panel {
  padding: 18px 20px 16px;
  background: linear-gradient(180deg,#10141c 0%,#101823 55%,#082018 100%);
  border-right: 1px solid rgba(148,163,184,.12);
  display: flex;
  flex-direction: column;
}
.route-ai-video-flow .video-intro {
  min-height: min(68vh, 930px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.route-ai-video-flow .video-intro strong {
  color: #f8fafc;
  font-size: 26px;
  line-height: 1.25;
}
.route-ai-video-flow .video-intro p,
.route-ai-video-flow .field label,
.route-ai-video-flow .check-row { color: #9ca3af; }
.route-ai-video-flow .seg {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.route-ai-video-flow .seg button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}
.route-ai-video-flow .seg button,
.route-ai-video-flow .upload-card,
.route-ai-video-flow textarea,
.route-ai-video-flow .subject-row {
  border-color: rgba(148,163,184,.16);
  background: rgba(255,255,255,.055);
  color: #e5e7eb;
}
.route-ai-video-flow .upload-card span,
.route-ai-video-flow .video-intro p { color: #94a3b8; }
.route-ai-video-flow .video-gallery-panel {
  padding: 14px 18px 0 16px;
  background: #050607;
}
.route-ai-video-flow .video-gallery-panel .models-head {
  height: 48px;
  margin-bottom: 12px;
  color: #f8fafc;
}
.route-ai-video-flow .video-task-list {
  height: calc(100% - 60px);
  gap: 18px;
  padding-right: 8px;
}
.route-ai-video-flow .video-task {
  min-height: 230px;
  padding: 18px 22px 18px 396px;
  border-color: rgba(148,163,184,.13);
  background: #0b0d0f;
  border-radius: 8px;
  position: relative;
  align-content: start;
}
.route-ai-video-flow .video-task:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 360px;
  height: 194px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 22px, #0b0b0b 23px 26px, transparent 27px),
    linear-gradient(180deg,#3a3a3a,#181818);
  box-shadow: inset 0 -34px 50px rgba(0,0,0,.55);
}
.route-ai-video-flow .video-task:nth-child(2n):before {
  background-image: url("assets/buyer.webp");
  background-size: cover;
  background-position: center;
}
.route-ai-video-flow .video-task:nth-child(4n):before {
  background-image: url("assets/repaint.webp");
  background-size: cover;
  background-position: center;
}
.route-ai-video-flow .video-task-status {
  grid-template-columns: 1fr auto;
}
.route-ai-video-flow .video-task-status > span { display: none; }
.route-ai-video-flow .video-task-status strong,
.route-ai-video-flow .video-task p { color: #e5e7eb; }
.route-ai-video-flow .video-task p {
  -webkit-line-clamp: 2;
  color: #cbd5e1;
}
.route-ai-video-flow .video-meta-row span,
.route-ai-video-flow .record-actions button,
.route-ai-video-flow .video-download {
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: #d1d5db;
}
.pager { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.switch { width: 46px; height: 26px; border-radius: 999px; background: #dbe4f0; position: relative; display: inline-block; vertical-align: middle; }
.switch:after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.2); }
.switch.on { background: #2563eb; }
.switch.on:after { left: 23px; }
.toast { position: fixed; z-index: 50; right: 28px; top: 84px; min-width: 260px; padding: 14px 16px; border-radius: 14px; color: #fff; background: rgba(15,23,42,.9); box-shadow: 0 18px 40px rgba(15,23,42,.25); }
.modal-mask { position: fixed; z-index: 40; inset: 0; background: rgba(15,23,42,.28); display: grid; place-items: center; }
.modal { width: 720px; max-height: 82vh; overflow: auto; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(15,23,42,.28); padding: 22px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.modal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.selectable { border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: left; background: #fff; }
.selectable .thumb { width: 100%; height: 116px; margin-bottom: 10px; }
.empty-page { height: 620px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.crumb { margin: 0 0 12px; color: #64748b; font-size: 13px; text-align: center; }
.online-blank { min-height: 720px; }
.help-doc-layout {
  display: grid;
  grid-template-columns: 230px minmax(720px, 1fr);
  gap: 14px;
  align-items: start;
  max-height: calc(100vh - 172px);
  overflow: hidden;
}
.help-toc {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 172px);
  overflow: auto;
  padding: 18px 14px;
}
.help-toc h2 {
  margin: 0 0 14px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.help-toc button {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.help-toc button:hover,
.help-toc button.active {
  color: #1d4ed8;
  background: #eef6ff;
}
.help-doc {
  max-height: calc(100vh - 172px);
  overflow: auto;
  padding: 24px 30px 34px;
  color: #1f2937;
  line-height: 1.75;
}
.help-doc > h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
}
.help-doc > p {
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 14px;
}
.help-doc section {
  scroll-margin-top: 16px;
  padding: 18px 0;
  border-top: 1px solid #eef2f7;
}
.help-doc section h2 {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.35;
}
.help-doc section h3 {
  margin: 18px 0 8px;
  font-size: 16px;
}
.help-doc section p,
.help-doc section li {
  color: #4b5563;
  font-size: 14px;
}
.help-doc ul,
.help-doc ol {
  margin: 0;
  padding-left: 22px;
}
.help-table {
  border-spacing: 0;
  margin: 4px 0 2px;
  overflow: hidden;
}
.help-table th {
  padding: 12px 14px;
  background: #f8fafc;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.help-table th:first-child {
  border-left: 1px solid var(--line);
  border-radius: 10px 0 0 0;
}
.help-table th:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 10px 0 0;
}
.help-table td {
  border-radius: 0;
}
.prompt-tabs { background: transparent; gap: 14px; padding: 0; }
.prompt-tabs button { min-height: 72px; border: 1px solid var(--line); background: #fff; border-radius: 999px; display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; padding: 0 22px; }
.prompt-tabs button:before { content: "✳"; width: 42px; height: 42px; border-radius: 50%; background: #f3e8ff; color: #7c3aed; display: grid; place-items: center; margin-right: 12px; }
.prompt-tabs button span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.prompt-tabs button.active { border-color: rgba(124,58,237,.28); box-shadow: 0 14px 36px rgba(124,58,237,.12); }
.prompt-system-panel { margin-bottom: 18px; }
.system-panel-head { min-height: 68px; border: 1px solid #e5e7eb; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; margin-bottom: 14px; }
.system-panel-head h2 { margin: 0 0 4px; }
.system-rule-grid { display: grid; grid-template-columns: minmax(520px, 1fr) 360px; gap: 18px; }
.system-rule-text { width: 100%; min-height: 230px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; line-height: 1.7; resize: vertical; }
.suggest-row { display: grid; grid-template-columns: 1fr 64px; gap: 10px; align-items: stretch; }
.suggest-row textarea { min-height: 74px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; resize: vertical; }
.empty-suggestion { height: 104px; border: 1px dashed #d8dee8; border-radius: 12px; margin-top: 10px; display: grid; place-items: center; color: var(--muted); }
.modal { border-radius: 10px; }
.modal-mask:has(.picker-modal) {
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(6px);
}
.modal.picker-modal { width: min(1120px, calc(100vw - 90px)); height: min(820px, calc(100vh - 72px)); display: flex; flex-direction: column; padding: 18px; }
.modal.category-modal { width: 760px; }
.picker-head { align-items: flex-start; }
.icon-close { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); font-size: 22px; color: #64748b; }
.picker-source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.source-card { min-height: 74px; border: 1px solid #dbe4f0; border-radius: 8px; padding: 14px; text-align: left; background: #fff; }
.source-card.active { border-color: #2563eb; background: #eef6ff; }
.source-card strong, .source-card span { display: block; }
.source-card span { margin-top: 8px; color: var(--muted); font-size: 12px; }
.modal-filter { display: grid; grid-template-columns: 1fr 280px 280px; }
.picker-modal .modal-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)); overflow: auto; padding-right: 6px; flex: 1; align-content: start; }
.selectable.selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.picker-modal .selectable .thumb { height: 220px; }
.picker-modal .selectable {
  border-radius: 8px;
  overflow: hidden;
  min-height: 360px;
}
.picker-modal .selectable strong,
.picker-modal .selectable .muted {
  display: block;
  padding: 0 12px;
}
.picker-modal .selectable strong { margin-top: 12px; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #e5e7eb; background: #fff; }
.modal-footer > div:first-child { display: grid; gap: 4px; }
.category-inline { display: grid; grid-template-columns: 1fr 160px 160px auto; gap: 12px; align-items: end; }
.category-inline label { color: var(--muted); font-size: 13px; font-weight: 700; }
.category-inline input, .category-inline select { width: 100%; height: 36px; margin-top: 8px; border: 1px solid #dbe4f0; border-radius: 4px; padding: 0 8px; }
.empty-category { height: 60px; border: 1px dashed #d8dee8; border-radius: 8px; margin-top: 18px; display: flex; align-items: center; padding-left: 18px; color: var(--muted); }
.control-popover {
  position: fixed;
  z-index: 55;
  width: 384px;
  max-height: min(680px, calc(100vh - 120px));
  overflow: auto;
  padding: 14px;
  border: 1px solid #e5edf7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
}
.control-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.control-title strong { color: var(--text); }
.control-sub {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.model-dd-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.model-dd-head strong { font-size: 16px; color: var(--text); font-weight: 800; }
.model-dd-head span { font-size: 13px; color: var(--soft); }
.model-pop-list {
  display: grid;
  gap: 12px;
}
.model-pop-list button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  border: 1.5px solid #e5edf7;
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.model-pop-list button.active { border-color: #2f6bff; background: #eef4ff; }
.model-pop-list .mdl-top { display: flex; align-items: center; gap: 8px; padding-right: 44px; }
.model-pop-list .mdl-icon { width: 26px; height: 26px; object-fit: contain; border-radius: 7px; flex: none; }
.model-pop-list strong { color: var(--text); font-size: 14px; font-weight: 800; line-height: 1.25; }
.model-pop-list .mdl-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  padding-right: 44px;
}
.model-pop-list .mdl-eta {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff5e6;
  color: #f59e0b;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}
.model-pop-list .mdl-picked {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 700;
  display: none;
}
.model-pop-list button.active .mdl-picked { display: block; }
.param-pop-group {
  margin-top: 12px;
}
.param-pop-group strong {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.param-pop-group div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.param-pop-group button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e5edf7;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}
.param-pop-group button.active {
  border-color: #2563eb;
  background: #eef6ff;
  color: #1d4ed8;
}
.page { animation: fade .16s ease-out; }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Production pages use the full workspace width on wide screens. */
.route-materials .page {
  max-width: 1602px;
  margin: 0 auto;
}
@media (min-width: 1800px) {
  .route-materials .page {
    transform: translateX(98px);
  }
}
.route-ai-hub .page {
  max-width: 1502px;
  margin: 0 auto;
}
.route-ai-hub .hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 31px;
}
@media (min-width: 1800px) {
  .route-ai-hub .page {
    max-width: 1550px;
    transform: translateX(100px);
  }
  .route-ai-hub .hub-grid {
    grid-template-columns: repeat(3, 480px);
  }
  .route-ai-hub .page-head {
    min-height: 116px;
    margin-top: 59px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 44px rgba(72,102,137,.13);
    align-items: center;
  }
  .route-ai-hub .hub-card {
    width: 480px;
    height: 330px;
    min-height: 330px;
    padding: 0 0 20px;
    border-radius: 8px;
    overflow: hidden;
  }
  .route-ai-hub .hub-card img {
    width: 480px;
    height: 246px;
    aspect-ratio: auto;
    margin-bottom: 14px;
    border-radius: 8px 8px 0 0;
  }
  .route-ai-hub .hub-card .tag {
    position: absolute;
    z-index: 1;
    margin: 0;
  }
  .route-ai-hub .hub-card .tag:first-of-type {
    left: 14px;
    top: 206px;
    background: rgba(255,255,255,.72);
  }
  .route-ai-hub .hub-card .tag:nth-of-type(2) {
    right: 14px;
    top: 14px;
  }
  .route-ai-hub .hub-card .tool-card-title {
    margin: 12px 14px 8px;
    font-size: 18px;
    line-height: 1.25;
  }
  .route-ai-hub .hub-card p {
    margin: 0 14px;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.route-history .page {
  max-width: 1530px;
  margin: 0 auto;
}
.route-history .history-count {
  position: relative;
  width: 168px;
  height: 92px;
  display: block;
  background: transparent;
  color: var(--muted);
}
.route-history .history-count b {
  position: absolute;
  inset: 0 0 50px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}
.route-history .history-count b::after {
  content: " 条记录";
  margin-left: 4px;
  font-size: 13px;
}
.route-history .history-count span {
  display: none;
}
.route-history .history-count::after {
  content: "我的记录";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}
@media (min-width: 1800px) {
  .route-history .page {
    transform: translateX(65px);
  }
}
.route-history .history-feed {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
  gap: 12px;
}
@media (min-width: 1800px) {
  .route-history .history-feed {
    grid-template-columns: repeat(5, 250px);
  }
}
.route-history .history-record {
  min-height: 384px;
  display: block;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(72,102,137,.08);
}
.route-history .history-thumb {
  width: 100%;
  height: 168px;
  border-radius: 12px 12px 0 0;
  padding: 0;
}
.route-history .history-record-main {
  padding: 10px;
}
.route-history .history-record-top {
  display: block;
}
.route-history .history-record-top h2 {
  font-size: 14px;
}
.route-history .history-record-top span {
  display: block;
  margin-bottom: 8px;
}
.route-history .history-meta-line {
  gap: 5px;
}
.route-history .history-meta-line span {
  min-height: 22px;
  padding: 3px 6px;
  font-size: 10px;
}
.route-history .history-record p {
  -webkit-line-clamp: 4;
  font-size: 11px;
}
.route-history .history-record .record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.route-history .history-record .record-actions button {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
.page .expert-hero {
  width: 100%;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 420px);
}
.page .workspace.expert-workspace {
  width: 100%;
  grid-template-columns: minmax(360px, 1.1fr) minmax(320px, .9fr) minmax(240px, .7fr);
  gap: 14px;
  max-height: calc(100vh - 252px);
  overflow: auto;
  padding-right: 4px;
}
.page .expert-footer-status {
  width: 100%;
}
@media (max-width: 1799px) {
  .route-expert .page .panel-pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .route-expert .page .panel-pill span,
  .route-expert .page .expert-result-panel .panel-pill span {
    margin-left: 0;
  }
}
@media (min-width: 1800px) {
  .route-expert .page .expert-hero {
    grid-template-columns: minmax(760px, 1fr) 520px;
  }
  .route-expert .page .workspace.expert-workspace {
    grid-template-columns: 980px minmax(0, 1fr) 289px;
    gap: 20px;
  }
  .route-expert .page .expert-input-panel {
    min-height: 1173px;
  }
  .route-expert .page .expert-prompt-field textarea {
    min-height: 360px;
  }
  .route-expert .page .expert-history-card {
    height: 212px;
  }
}
.page .image-tools-hero,
.page .image-workbench-hero {
  width: 100%;
}
.page .image-tools-hero {
  grid-template-columns: minmax(420px, 1fr) 420px;
}
.page .image-workbench-hero {
  grid-template-columns: minmax(420px, 1fr) 420px;
}
.page .workspace.image-workspace {
  width: 100%;
  grid-template-columns: minmax(390px, 460px) minmax(420px, 1fr);
  gap: 14px;
  max-height: calc(100vh - 278px);
  overflow: auto;
  padding-right: 4px;
}
.page .workspace.image-workspace.text-edit-workspace {
  grid-template-columns: 420px minmax(300px, 1fr) 240px;
}
.page .image-tools-hero + .tool-grid {
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
}

.route-text-edit .page,
.route-subject-replace .page,
.route-product-retouch .page,
.route-batch-beauty .page {
  max-width: 1780px;
  margin: 0 auto;
}
.route-text-edit .image-workbench-hero,
.route-subject-replace .image-workbench-hero,
.route-product-retouch .image-workbench-hero,
.route-batch-beauty .image-workbench-hero {
  min-height: 148px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(520px, 620px);
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
}
.image-back {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  font-size: 28px;
  line-height: 1;
  vertical-align: middle;
}
.image-crumb-label {
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}
.image-workbench-hero h1 {
  margin: 12px 0 8px;
  font-size: 28px;
  line-height: 1.16;
}
.image-workbench-hero p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}
.image-work-status { display: grid; gap: 12px; }
.image-status-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.image-status-line strong,
.image-status-line span { display: block; }
.image-status-line strong { margin-bottom: 8px; font-size: 15px; }
.image-status-line span { color: var(--soft); font-size: 12px; }
.image-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.image-status-pills span {
  min-height: 34px;
  padding: 9px 12px;
  border: 1px solid #e5edf6;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 900;
}
.image-workbench-strip {
  min-height: 58px;
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  background: var(--strip-bg);
  position: relative;
  overflow: hidden;
}
.image-workbench-strip:before,
.image-workbench-strip:after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
}
.image-workbench-strip:before {
  right: 96px;
  top: 20px;
  width: 26px;
  height: 26px;
}
.image-workbench-strip:after {
  right: 30px;
  top: -6px;
  width: 54px;
  height: 54px;
}
.image-workbench-strip span { display: block; color: rgba(255,255,255,.72); font-size: 12px; }
.image-workbench-strip b { display: block; margin-top: 5px; font-size: 16px; }
.image-workbench-strip em {
  position: absolute;
  right: 18px;
  top: 18px;
  min-height: 28px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.image-tool-shell {
  display: grid;
  grid-template-columns: minmax(430px, 46%) minmax(520px, 1fr);
  gap: 18px;
  align-items: start;
}
.image-input-panel,
.image-preview-panel {
  border-radius: 18px;
  min-height: calc(100vh - 276px);
}
.image-upload-actions {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
.image-upload-button {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
.image-upload-button:before {
  content: "▣";
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eef6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  font-size: 18px;
  grid-row: 1 / span 2;
}
.image-upload-button:nth-child(2):before { content: "☁"; }
.image-upload-button strong,
.image-upload-button span {
  grid-column: 2;
}
.image-text-row { margin-bottom: 10px; }
.image-prompt-tools { margin: 0 0 10px; }
.image-prompt-field { margin-top: 10px; }
.image-prompt-card {
  min-height: 286px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(180deg,#f8fbff 0%, #fff 54%);
  overflow: hidden;
}
.image-prompt-card-head {
  min-height: 54px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.image-prompt-card-head > span {
  min-height: 34px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.image-prompt-card-head div { display: flex; gap: 8px; }
.image-prompt-card-head .ghost-btn {
  min-height: 32px;
  padding: 0 13px;
  box-shadow: none;
}
.image-prompt-card textarea {
  width: calc(100% - 28px);
  min-height: 176px;
  margin: 0 14px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  color: #334155;
  line-height: 1.68;
  resize: vertical;
  outline: none;
}
.image-prompt-card p {
  margin: 12px 14px 14px;
  color: var(--muted);
  font-size: 12px;
}
.image-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 12px;
}
.image-select-card {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 6px 10px;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.image-select-card span {
  grid-column: 1 / -1;
  color: var(--soft);
  font-size: 12px;
  font-weight: 900;
}
.image-select-card strong {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: var(--text);
}
.image-select-card img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.image-select-card em {
  color: #8aa1b6;
  font-style: normal;
  align-self: center;
}
.image-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
}
.image-submit-row .primary-btn,
.image-submit-row .ghost-btn { min-height: 42px; border-radius: 8px; }
.image-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.image-preview-head h2,
.image-output-title {
  display: block;
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text);
  font-weight: 900;
}
.image-preview-head p,
.image-output-head p { margin: 0; color: var(--muted); }
.image-result-layout,
.image-preview-workarea {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 260px;
  gap: 12px;
  align-items: stretch;
}
.image-result-main {
  min-width: 0;
  display: grid;
  align-content: start;
}
.image-result-layout.no-preview .image-output-head {
  margin-top: 0;
}
.image-before-after {
  min-height: 392px;
  padding: 14px;
  border: 1px dashed #c9d8e8;
  border-radius: 14px;
  background: #f6fbff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.image-before-after.single { grid-template-columns: minmax(250px, 360px); }
.image-before-after.compare { grid-template-columns: 1fr 1fr; }
.text-edit-carousel {
  position: relative;
  padding: 0 42px 30px;
}
.text-edit-carousel .image-before-after {
  min-height: 390px;
}
.image-preview-cell.done {
  border-style: solid;
}
.image-preview-cell.done > img {
  width: 100%;
  height: 210px;
  border-radius: 10px;
  object-fit: cover;
  align-self: stretch;
}
.carousel-nav {
  position: absolute;
  top: 174px;
  z-index: 1;
  width: 32px;
  height: 44px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.carousel-dots button.active {
  width: 20px;
  border-radius: 999px;
  background: #2563eb;
}
.image-preview-cell {
  min-height: 360px;
  border: 1px dashed #c9d8e8;
  border-radius: 12px;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  align-items: center;
  padding: 14px;
  text-align: center;
}
.image-preview-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--muted);
}
.image-preview-label strong { color: var(--text); }
.image-preview-label span { color: var(--soft); font-size: 12px; }
.image-file-ghost {
  width: 128px;
  height: 158px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(145deg,#fff,#eef4fb);
  position: relative;
}
.image-file-ghost:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 38px solid #dbe4f0;
  border-left: 38px solid transparent;
}
.image-preview-cell b {
  display: block;
  color: #334155;
  font-size: 18px;
}
.image-preview-cell p {
  margin: 0;
  color: var(--muted);
}
.image-history-box {
  min-height: 156px;
  align-self: start;
  border: 1px solid #e5edf6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.image-history-head {
  min-height: 70px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  background: #f8fafc;
}
.image-history-head strong,
.image-history-head span { display: block; }
.image-history-head strong { margin-bottom: 6px; }
.image-history-head span { color: var(--muted); font-size: 12px; font-weight: 900; }
.image-history-head .refresh {
  min-height: 30px;
  padding: 0 10px;
  box-shadow: none;
  font-size: 12px;
}
.image-history-empty {
  min-height: 78px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}
.image-mini-history {
  padding: 12px 14px;
  border-top: 1px solid #edf2f7;
}
.image-mini-history strong,
.image-mini-history span { display: block; }
.image-mini-history span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  margin-top: 6px;
}
.image-mini-history p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.image-output-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin: 18px 0 12px;
}
.image-output-head div:last-child {
  display: flex;
  gap: 8px;
  align-items: center;
}
.image-output-head b,
.image-output-head span {
  min-height: 34px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
}
.image-output-head b {
  background: #0f172a;
  color: #fff;
}
.image-output-head span {
  background: #eef6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.image-output-empty {
  min-height: 210px;
  border: 1px dashed #dbe4f0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: #fff;
  padding: 18px;
}
.image-output-empty div {
  width: 58px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(180deg,#bfddfb,#dbeafe);
  margin-bottom: 12px;
}
.image-output-empty strong { font-size: 18px; margin-bottom: 8px; }
.image-output-empty p { margin: 0; color: var(--muted); }
.image-result-meta-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.image-footer-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.image-footer-status span {
  min-height: 74px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  color: var(--muted);
}
.image-footer-status b {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 16px;
}
.image-strength-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1500px) {
  .route-text-edit .image-workbench-hero,
  .route-subject-replace .image-workbench-hero,
  .route-product-retouch .image-workbench-hero,
  .route-batch-beauty .image-workbench-hero {
    grid-template-columns: minmax(360px, 1fr) minmax(430px, 520px);
    gap: 18px;
  }
  .image-tool-shell {
    grid-template-columns: minmax(390px, 520px) minmax(520px, 1fr);
  }
  .image-result-layout,
  .image-preview-workarea {
    grid-template-columns: minmax(320px, 1fr);
  }
  .image-history-box { order: -1; }
}

/* High-fidelity density pass for captured production pages. */
@media (min-width: 1800px) {
  .route-materials .page,
  .route-history .page {
    max-width: 1074px;
    margin: 0 auto;
    transform: none;
  }
  .route-ai-hub .page {
    max-width: 1420px;
    margin: 0 auto;
    transform: none;
  }

  .route-ai-hub .page-head {
    min-height: 104px;
    margin-top: 50px;
    margin-bottom: 14px;
    padding: 20px 22px;
    border-radius: 8px;
  }
  .route-ai-hub .page-head h1 { font-size: 20px; margin-bottom: 8px; }
  .route-ai-hub .hub-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .route-ai-hub .hub-card {
    width: auto;
    height: 286px;
    min-height: 286px;
    padding: 0 0 12px;
    border-radius: 8px;
  }
  .route-ai-hub .hub-card img {
    width: 100%;
    height: 196px;
    margin-bottom: 8px;
    border-radius: 8px 8px 0 0;
  }
  .route-ai-hub .hub-card .tag:first-of-type { left: 10px; top: 166px; }
  .route-ai-hub .hub-card .tag:nth-of-type(2) { right: 10px; top: 8px; }
  .route-ai-hub .hub-card .tool-card-title {
    margin: 8px 12px 6px;
    font-size: 14px;
  }
  .route-ai-hub .hub-card p {
    margin: 0 12px;
    font-size: 11px;
    line-height: 1.45;
  }

  .route-materials .material-hero {
    min-height: 104px;
    grid-template-columns: minmax(420px, 1fr) 74px auto;
    margin-top: 44px;
    margin-bottom: 12px;
  }
  .route-materials .material-hero h1 { font-size: 22px; margin-bottom: 8px; }
  .route-materials .material-hero p { font-size: 12px; }
  .route-materials .material-count {
    width: 62px;
    height: 62px;
    background: transparent;
  }
  .route-materials .material-count b { font-size: 26px; margin-bottom: 4px; }
  .route-materials .material-count span { font-size: 11px; white-space: nowrap; }
  .route-materials .material-panel {
    height: calc(100vh - 224px);
    min-height: 400px;
    padding: 12px;
    border-radius: 8px;
  }
  .material-kind-tabs,
  .route-materials .material-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }
  .route-materials .material-filter {
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 8px;
  }
  .route-materials .material-filter label input,
  .route-materials .material-filter label select {
    min-width: 130px;
    height: 32px;
    border-radius: 4px;
  }
  .route-materials .material-card-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding-bottom: 18px;
  }
  .route-materials .material-card { min-height: 350px; }
  .route-materials .material-card-media {
    height: 178px;
    border-radius: 4px;
  }
  .route-materials .material-card-body { padding-top: 9px; }
  .route-materials .material-card-body h3 {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .route-materials .asset-status {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 10px;
    margin-bottom: 4px;
  }
  .route-materials .material-card-body p,
  .route-materials .material-card-body em,
  .route-materials .material-card-body small {
    font-size: 10px;
    line-height: 1.35;
    margin-top: 4px;
  }

  .route-history .history-hero {
    min-height: 104px;
    margin-top: 44px;
    margin-bottom: 12px;
    padding: 18px 20px;
    border-radius: 8px;
  }
  .route-history .history-hero h1 { font-size: 22px; margin-bottom: 8px; }
  .route-history .history-hero p { font-size: 12px; }
  .route-history .history-count { width: 118px; height: 72px; }
  .route-history .history-count b {
    inset: 0 0 38px 0;
    padding-right: 12px;
    font-size: 12px;
  }
  .route-history .history-count b::after { font-size: 12px; }
  .route-history .history-count::after {
    height: 32px;
    padding-right: 12px;
    font-size: 12px;
  }
  .route-history .history-shell {
    height: calc(100vh - 224px);
    min-height: 410px;
    padding: 10px;
    border-radius: 8px;
  }
  .route-history .history-filter-row {
    gap: 8px;
    margin-bottom: 8px;
  }
  .route-history .history-filter-row.compact {
    padding-bottom: 8px;
  }
  .route-history .history-filter-row input {
    height: 30px;
    min-width: 118px;
    border-radius: 4px;
    font-size: 12px;
  }
  .route-history .primary-btn,
  .route-history .ghost-btn,
  .route-materials .primary-btn,
  .route-materials .ghost-btn {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
    box-shadow: none;
  }
  .route-history .history-feed {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .route-history .history-record {
    min-height: 382px;
    border-radius: 4px;
  }
  .route-history .history-thumb {
    height: 184px;
    border-radius: 4px 4px 0 0;
  }
  .route-history .history-record-main { padding: 8px; }
  .route-history .history-record-top h2 {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .route-history .history-record-top span {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .route-history .history-meta-line {
    gap: 4px;
    margin-bottom: 6px;
  }
  .route-history .history-meta-line span {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 9px;
  }
  .route-history .history-record p {
    font-size: 10px;
    line-height: 1.45;
    -webkit-line-clamp: 5;
  }
  .route-history .history-record .record-actions {
    margin-top: 6px;
    gap: 4px;
  }
  .route-history .history-record .record-actions button {
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 9px;
  }
  .route-history .history-pager {
    min-height: 32px;
    padding-top: 8px;
    gap: 6px;
    justify-content: flex-end;
    font-size: 11px;
  }
  .route-history .history-pager input {
    width: 34px;
    height: 24px;
    border-radius: 4px;
    font-size: 11px;
  }
}

/* Responsive normalization: keep every route usable across desktop widths. */
:root { --sidebar-w: 200px; }

html,
body,
.app,
.topbar {
  min-width: 0;
}

.topbar {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) minmax(156px, 214px);
}

.brand,
.nav,
.account-top,
.main,
.page,
.panel,
.card {
  min-width: 0;
}

.nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 12px;
}

.nav::-webkit-scrollbar { display: none; }

.main {
  left: var(--sidebar-w);
  padding: 84px clamp(14px, 1.45vw, 28px) 32px;
}

.page,
.route-materials .page,
.route-history .page,
.route-ai-hub .page,
.route-expert .page,
.route-ai-multi-angle .page,
.route-ai-region-repaint .page,
.route-ai-prompt .page,
.route-ai-buyer-show .page,
.route-text-edit .page,
.route-subject-replace .page,
.route-product-retouch .page,
.route-batch-beauty .page {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  transform: none !important;
}

.main.page,
.route-materials .main.page,
.route-history .main.page,
.route-ai-hub .main.page,
.route-expert .main.page,
.route-ai-multi-angle .main.page,
.route-ai-region-repaint .main.page,
.route-ai-prompt .main.page,
.route-ai-buyer-show .main.page,
.route-text-edit .main.page,
.route-subject-replace .main.page,
.route-product-retouch .main.page,
.route-batch-beauty .main.page,
.route-data-intelligence .main.page,
.route-permission-management .main.page,
.route-system-settings .main.page {
  width: auto;
  max-width: none;
  margin: 0;
  transform: none !important;
}

.hero-grid {
  grid-template-columns: minmax(420px, 1fr) minmax(260px, 320px) minmax(150px, 178px);
}

.stat-grid,
.quick-grid,
.model-grid,
.data-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tool-grid,
.hub-grid,
.design-grid,
.route-ai-hub .hub-grid,
.page .image-tools-hero + .tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.hub-card,
.route-ai-hub .hub-card {
  width: auto;
  height: auto;
  min-height: 292px;
}

.hub-card img,
.route-ai-hub .hub-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.2;
}

.material-hero,
.route-materials .material-hero,
.history-hero,
.route-history .history-hero {
  grid-template-columns: minmax(320px, 1fr) auto auto;
  margin-top: 0;
}

.material-panel,
.route-materials .material-panel,
.history-shell,
.route-history .history-shell {
  height: auto;
  min-height: calc(100vh - 276px);
}

.material-filter,
.route-materials .material-filter,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.material-filter label,
.route-materials .material-filter label {
  min-width: min(180px, 100%);
  flex: 1 1 160px;
}

.material-filter label input,
.material-filter label select,
.route-materials .material-filter label input,
.route-materials .material-filter label select {
  width: 100%;
  min-width: 0;
}

.material-card-grid,
.route-materials .material-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
}

.material-card,
.route-materials .material-card {
  min-height: 0;
}

.material-card-media,
.route-materials .material-card-media {
  height: auto;
  aspect-ratio: 1 / 1;
}

.material-card-media img,
.route-materials .material-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-feed,
.route-history .history-feed {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.history-record,
.route-history .history-record {
  min-height: 0;
}

.workspace,
.page .workspace.expert-workspace,
.page .workspace.image-workspace,
.page .workspace.image-workspace.text-edit-workspace,
.image-tool-shell,
.video-flow-layout,
.buyer-layout {
  grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
  max-height: none;
}

.page .workspace.image-workspace.text-edit-workspace {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) minmax(210px, 260px);
}

.route-text-edit .image-workbench-hero,
.route-subject-replace .image-workbench-hero,
.route-product-retouch .image-workbench-hero,
.route-batch-beauty .image-workbench-hero,
.page .image-workbench-hero,
.page .image-tools-hero,
.design-detail-hero,
.image-tools-hero {
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 520px);
}

.image-result-layout,
.image-preview-workarea {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.settings-grid,
.system-rule-grid,
.design-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
}

.route-ai-canvas .main,
.route-ai-video-flow .main {
  left: 0;
  width: 100vw;
  min-width: 0;
}

.route-ai-video-flow .topbar {
  min-width: 0;
}

@media (min-width: 1900px) {
  .page,
  .route-materials .page,
  .route-history .page,
  .route-ai-hub .page,
  .route-expert .page,
  .route-ai-multi-angle .page,
  .route-ai-region-repaint .page,
  .route-ai-prompt .page,
  .route-ai-buyer-show .page,
  .route-text-edit .page,
  .route-subject-replace .page,
  .route-product-retouch .page,
  .route-batch-beauty .page {
    max-width: 1760px;
  }

  .material-card-grid,
  .route-materials .material-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }

  .history-feed,
  .route-history .history-feed {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 1280px) {
  :root { --sidebar-w: 176px; }

  .brand {
    padding-left: 14px;
    gap: 9px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand-title { font-size: 14px; }
  .brand-sub { font-size: 10px; }
  .sidebar { width: var(--sidebar-w); padding: 18px 14px; }
  .main {
    right: 0;
    width: auto;
  }
  .nav { justify-content: flex-start; gap: 8px; }
  .nav-link { min-width: 64px; font-size: 13px; }
  .account-top { width: 156px; padding-right: 14px; }
  .hero-grid,
  .material-hero,
  .route-materials .material-hero,
  .history-hero,
  .route-history .history-hero {
    grid-template-columns: 1fr;
  }

  .material-hero .actions,
  .route-materials .material-hero .actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .material-count,
  .route-materials .material-count,
  .history-count,
  .route-history .history-count {
    justify-self: start;
  }

  .page .workspace.image-workspace.text-edit-workspace,
  .workspace,
  .page .workspace.expert-workspace,
  .page .workspace.image-workspace,
  .image-tool-shell,
  .buyer-layout,
  .video-flow-layout,
  .settings-grid,
  .system-rule-grid,
  .design-detail-layout {
    grid-template-columns: 1fr;
  }

  .image-history-box { order: 0; }
  .image-result-layout,
  .image-preview-workarea {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }

  html,
  body {
    overflow: auto;
  }

  .app {
    min-height: 100vh;
    height: auto;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    grid-template-columns: minmax(132px, auto) minmax(0, 1fr) 52px;
  }

  .brand {
    border-right: 0;
  }

  .brand-sub,
  .account-name,
  .account-sub {
    display: none;
  }

  .account-top {
    width: 52px;
    padding-right: 12px;
  }

  .account-top .avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .sidebar {
    display: none;
  }

  .main {
    position: relative;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 12px 28px;
    min-height: calc(100vh - 64px);
  }

  .models-head,
  .page-head,
  .ai-cap-head,
  .buyer-topline,
  .ai-workbench-topline,
  .history-record-top,
  .image-preview-head,
  .image-output-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .route-text-edit .image-workbench-hero,
  .route-subject-replace .image-workbench-hero,
  .route-product-retouch .image-workbench-hero,
  .route-batch-beauty .image-workbench-hero,
  .page .image-workbench-hero,
  .page .image-tools-hero,
  .design-detail-hero,
  .image-tools-hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .stat-grid,
  .quick-grid,
  .model-grid,
  .data-stat-grid,
  .tool-grid,
  .hub-grid,
  .design-grid,
  .route-ai-hub .hub-grid,
  .material-card-grid,
  .route-materials .material-card-grid,
  .history-feed,
  .route-history .history-feed,
  .modal-grid,
  .picker-source-grid,
  .picker-modal .modal-grid {
    grid-template-columns: 1fr;
  }

  .image-before-after,
  .image-before-after.compare {
    grid-template-columns: 1fr;
  }

  .modal,
  .modal.picker-modal,
  .modal.category-modal {
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100vh - 24px);
  }

  .modal-filter,
  .category-inline {
    grid-template-columns: 1fr;
  }

  .buyer-upload-row,
  .buyer-template-grid,
  .buyer-task,
  .upload-row,
  .image-upload-actions,
  .image-control-grid {
    grid-template-columns: 1fr;
  }

  .buyer-task-title,
  .buyer-task-state,
  .buyer-top-actions,
  .actions,
  .toolbar-row {
    flex-wrap: wrap;
  }

  .buyer-task-title span {
    max-width: 100%;
  }
}

/* ============================================================
   共享控件库（从买家秀页迁入，供全站复用）
   在 components-gallery.html 里可总览与审阅
   ============================================================ */

/* 次级按钮 soft-btn */
.soft-btn {
  min-height: 36px; padding: 0 17px; border-radius: 999px;
  border: 1px solid rgba(37,99,235,.15); background: #eef6ff; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800;
}

/* 小按钮 small-btn（含 primary/danger/soft/disabled 变体）*/
.small-btn {
  min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #dbe4f0; background: #fff;
  color: #334155; font-size: 12px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.small-btn.primary { color: #fff; border-color: #1d4ed8; background: #1d4ed8; }
.small-btn.danger { color: #dc2626; border-color: rgba(220,38,38,.2); background: #fff5f5; }
.small-btn.soft { color: #1d4ed8; border-color: rgba(37,99,235,.16); background: #eef6ff; }
.small-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; color: #64748b; background: #f8fafc; border-color: #dbe4f0; }

/* 上传两列布局 upload-grid */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 模块分组 module */
.module { border: 1px solid #e5edf6; border-radius: 14px; background: #fff; padding: 12px; }
.module-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.module-title strong { font-size: 15px; }
.module-title span { color: var(--soft); font-size: 12px; font-weight: 700; }

/* 下拉选择卡片 select-card + 下拉面板 dropdown-panel */
.select-card {
  width: 100%; min-height: 58px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff;
  padding: 10px 12px; text-align: left; display: flex; flex-direction: column; justify-content: center;
}
.select-card span { color: var(--soft); font-size: 12px; margin-bottom: 6px; }
.select-card strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.param-dropdown-anchor { position: relative; }
.dropdown-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  border: 1px solid #dbe4f0; border-radius: 18px; background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(15,23,42,.14); padding: 12px; display: none;
}
.dropdown-panel.show { display: block; }

/* 分段选择 segmented（比例/清晰度这类等分选择）*/
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 14px; background: #f3f4f6; }
.segment { min-height: 44px; border-radius: 12px; background: transparent; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #475569; }
.segment.active { background: #fff; color: #0f172a; box-shadow: 0 8px 18px rgba(15,23,42,.08); }

/* 比例选择器 ratio-grid + ratio-card（带比例示意图标）*/
.ratio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 14px; background: #f3f4f6; }
.ratio-card { min-height: 80px; border-radius: 12px; background: transparent; display: grid; justify-items: center; align-content: center; gap: 6px; color: #475569; font-weight: 800; font-size: 13px; }
.ratio-card.active { background: #fff; color: #0f172a; box-shadow: 0 8px 18px rgba(15,23,42,.08); }
.ratio-icon { border: 3px solid currentColor; border-radius: 4px; }
.ratio-square { width: 28px; height: 28px; }
.ratio-vertical { width: 24px; height: 38px; }
.ratio-horizontal { width: 38px; height: 24px; }
.ratio-smart { width: 24px; height: 32px; position: relative; border: 3px solid currentColor; border-radius: 4px; }
.ratio-smart:after { content: ""; position: absolute; right: -14px; top: 4px; width: 20px; height: 14px; border: 3px solid currentColor; border-radius: 4px; }

/* 数量九宫选择 count-grid */
.count-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 14px; background: #f3f4f6; }
.count-card { min-height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #475569; background: transparent; }
.count-card.active { background: #fff; color: #0f172a; box-shadow: 0 8px 18px rgba(15,23,42,.08); }

/* 数量步进器 stepper（新增控件：− 数字 ＋，供每类图独立设数量）*/
.stepper { display: inline-flex; align-items: center; border: 1px solid #dbe4f0; border-radius: 999px; background: #fff; overflow: hidden; }
.stepper button { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #1d4ed8; background: #f8fbff; }
.stepper button:hover { background: #eef6ff; }
.stepper button[disabled] { color: #cbd5e1; cursor: not-allowed; background: #f8fafc; }
.stepper .stepper-value { min-width: 44px; text-align: center; font-size: 14px; font-weight: 900; color: #0f172a; }

/* ============================================================
   AI 商品套图（SPA 内嵌）
   页面内容限定 #suiteRoot / .route-ai-product-suite 作用域；
   弹窗（挂 body，在作用域外）保持全局。
   ============================================================ */
/* 主区改为纵向 flex、两栏各自内部滚动（覆盖 SPA .main.page 的 overflow:auto） */
.route-ai-product-suite .main.page { display: flex; flex-direction: column; overflow: hidden; }
#suiteRoot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#suiteRoot > .page-head { flex: 0 0 auto; }
/* 生成参数在配置栏底部，下拉向上展开，避免超出视口 */
#suiteRoot .param-row .dropdown-panel { top: auto; bottom: calc(100% + 8px); max-height: 60vh; overflow-y: auto; }
/* 模型下拉需容纳两列大卡片，加宽并向右溢出锚点 */
#suiteRoot .param-row .dropdown-panel.model-dd { left: 0; right: auto; width: max(100%, 460px); padding: 16px; border-radius: 16px; }
/* 左右 30% / 70%（覆盖 app.css 的 .workspace），并让 workspace 充满可视高度 */
#suiteRoot .workspace { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
/* 左侧配置：内容滚动 + 底部按钮固定 */
#suiteRoot .suite-config { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; position: relative; }
#suiteRoot .suite-config-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; gap: 14px; align-content: start; }
#suiteRoot .suite-config-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 12px 16px 14px; border-top: 1px solid #eef2f7; background: #fff; }
#suiteRoot .suite-config-foot .primary-btn { flex: 1 1 auto; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 800; box-shadow: 0 10px 22px rgba(29,78,216,.26); }
#suiteRoot .suite-config-foot .ghost-btn { flex: 0 0 auto; min-width: 92px; min-height: 46px; border-radius: 12px; font-size: 14px; }
/* 右侧结果：始终满高，标题固定、内容滚动 */
#suiteRoot .suite-result { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
#suiteRoot .suite-result-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid #eef2f7; }
#suiteRoot .suite-result-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
#suiteRoot .suite-result-scroll .suite-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
#suiteRoot .suite-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
#suiteRoot .suite-title-row h1 { margin:0; }
#suiteRoot .suite-title-sub { color:var(--muted); font-size:13px; font-weight:600; }
#suiteRoot .suite-history-btn { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#1d4ed8; font-weight:800; box-shadow:0 8px 18px rgba(15,23,42,.06); }
#suiteRoot .suite-history-btn .ic { font-size:16px; }
#suiteRoot .suite-prd-dl { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px; background:#1d4ed8; border:1px solid #1d4ed8; color:#fff; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 8px 18px rgba(29,78,216,.22); transition:background .12s ease; }
#suiteRoot .suite-prd-dl:hover { background:#1746c0; }
#suiteRoot .suite-prd-dl .ic { font-size:15px; }
#suiteRoot .suite-language-field { margin-top: 14px; }
#suiteRoot .suite-language-field > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
#suiteRoot .suite-language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px; border-radius: 12px; background: #f3f4f6; }
#suiteRoot .suite-language-option { min-height: 38px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #64748b; font-size: 14px; font-weight: 800; }
#suiteRoot .suite-language-option.active { border-color: #bfdbfe; background: #fff; color: #1d4ed8; box-shadow: 0 5px 14px rgba(15,23,42,.08); }
/* buyer-show 风格参数块 */
#suiteRoot .param-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#suiteRoot .param-section { margin-bottom: 14px; }
#suiteRoot .param-section:last-child { margin-bottom: 0; }
#suiteRoot .param-section h4 { margin: 0 0 8px; font-size: 14px; }
/* 覆盖共享 .select-card 的纵向布局：两列 grid（值|箭头） */
#suiteRoot .select-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 8px; }
#suiteRoot .select-card span { grid-column: 1 / -1; }
#suiteRoot .select-card strong { grid-column: 1; grid-row: 2; display: flex; align-items: center; }
#suiteRoot .select-card em { grid-column: 2; grid-row: 2; align-self: center; margin: 0; color: #94a3b8; font-size: 14px; font-style: normal; }
#suiteRoot .select-card img { width: 22px; height: 22px; object-fit: contain; margin-right: 6px; }
/* 主副图类型行 */
#suiteRoot .suite-type-row { border:1px solid #e5edf6; border-radius:12px; background:#fff; padding:10px 12px; margin-bottom:8px; }
#suiteRoot .suite-type-head { display:flex; align-items:center; gap:10px; }
#suiteRoot .suite-type-head .chk { width:20px; height:20px; border-radius:6px; border:2px solid #cbd5e1; display:grid; place-items:center; color:#fff; font-size:13px; flex-shrink:0; cursor:pointer; }
#suiteRoot .suite-type-row.on .chk { background:#1d4ed8; border-color:#1d4ed8; }
#suiteRoot .suite-type-head strong { font-size:14px; flex:1; }
#suiteRoot .suite-type-body { margin-top:10px; padding-top:10px; border-top:1px dashed #e5edf6; display:grid; gap:10px; }
#suiteRoot .suite-type-row:not(.on) .suite-type-body { display:none; }
#suiteRoot .suite-inline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#suiteRoot .suite-inline .layout-pick { flex:1; min-width:150px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #dbe4f0; border-radius:10px; background:#f8fbff; padding:8px 12px; font-weight:800; font-size:13px; color:#334155; }
#suiteRoot .suite-inline .layout-pick .muted { font-weight:600; }
#suiteRoot .suite-notext { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#475569; }
#suiteRoot .switch { width:38px; height:22px; border-radius:999px; background:#cbd5e1; position:relative; transition:.15s; flex-shrink:0; }
#suiteRoot .switch.on { background:#1d4ed8; }
#suiteRoot .switch:after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; }
#suiteRoot .switch.on:after { left:18px; }
#suiteRoot .suite-note { border-radius:10px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; font-size:12px; padding:8px 12px; }
/* 结果区 tab / 分组 / 网格 / 进度 */
#suiteRoot .suite-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #eef2f7; }
#suiteRoot .suite-tab { min-height:34px; padding:0 14px; border-radius:999px; border:1px solid #dbe4f0; background:#fff; color:#475569; font-weight:800; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
#suiteRoot .suite-tab span { font-size:11px; color:#94a3b8; background:#f1f5f9; border-radius:999px; padding:1px 7px; }
#suiteRoot .suite-tab.active { color:#fff; border-color:#1d4ed8; background:linear-gradient(180deg,#1d4ed8,#0f2f6f); }
#suiteRoot .suite-tab.active span { color:#dbeafe; background:rgba(255,255,255,.18); }
#suiteRoot .suite-result-group { margin-bottom:18px; }
#suiteRoot .suite-result-group h3 { margin:0 0 10px; font-size:14px; display:flex; align-items:center; gap:8px; }
#suiteRoot .suite-group-head { cursor:pointer; user-select:none; }
#suiteRoot .suite-group-head .caret { color:#94a3b8; font-size:12px; width:14px; }
#suiteRoot .suite-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
#suiteRoot .suite-grid.wide { grid-template-columns:repeat(2, minmax(0,1fr)); }
#suiteRoot .suite-cell { position:relative; border:1px solid #dbe4f0; border-radius:12px; overflow:hidden; background:#eef2f8; aspect-ratio:1/1; cursor:zoom-in; }
#suiteRoot .suite-grid.wide .suite-cell { aspect-ratio:1464/600; }
#suiteRoot .suite-cell.aplus-mobile { aspect-ratio:600/450; }
#suiteRoot .suite-cell img { width:100%; height:100%; object-fit:cover; display:block; }
#suiteRoot .suite-cell .cell-badge { position:absolute; left:8px; top:8px; background:rgba(15,23,42,.76); color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; }
#suiteRoot .suite-progress { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:12px 14px; border-radius:12px; background:#eef4ff; border:1px solid rgba(37,99,235,.15); }
#suiteRoot .suite-progress .ptxt { font-weight:800; font-size:13px; color:#1d4ed8; white-space:nowrap; }
#suiteRoot .suite-progress .bar { flex:1; height:8px; border-radius:999px; background:#dbe4f0; overflow:hidden; }
#suiteRoot .suite-progress .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#1d4ed8,#0f2f6f); border-radius:999px; transition:width .3s; }
#suiteRoot .suite-cell.loading { background:linear-gradient(100deg,#e9eef6 30%,#f6f9fd 50%,#e9eef6 70%); background-size:200% 100%; animation:suiteShimmer 1.2s infinite; }
#suiteRoot .suite-cell .spinner { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; font-size:12px; font-weight:800; }
#suiteRoot .suite-cell.reveal img { animation:suiteFade .38s ease; }
@keyframes suiteShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes suiteFade { from{opacity:0;transform:scale(.97);} to{opacity:1;transform:none;} }
#suiteRoot .suite-cell .cell-actions { position:absolute; inset:auto 0 0 0; display:flex; gap:6px; padding:8px; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent); opacity:0; transition:.15s; }
#suiteRoot .suite-cell:hover .cell-actions { opacity:1; }
#suiteRoot .suite-cell .cell-actions button { flex:1; font-size:11px; font-weight:800; color:#fff; background:rgba(255,255,255,.22); border-radius:8px; padding:5px 0; }
#suiteRoot .suite-empty { border:2px dashed #cbd5e1; border-radius:14px; padding:44px 20px; text-align:center; color:var(--muted); }
#suiteRoot .suite-empty strong { display:block; font-size:16px; color:var(--text); margin-bottom:6px; }
/* 商品原图·已选图片列表 */
#suiteRoot .prod-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
#suiteRoot .prod-item { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:#f8fafc; border:1px solid #edf2f7; cursor:grab; }
#suiteRoot .prod-item.dragging { opacity:.45; cursor:grabbing; }
#suiteRoot .prod-thumb { position:relative; width:64px; height:48px; }
#suiteRoot .prod-thumb img { width:64px; height:48px; object-fit:cover; border-radius:8px; background:#fff; }
#suiteRoot .prod-main-badge { position:absolute; left:3px; bottom:3px; padding:1px 5px; border-radius:5px; background:rgba(15,23,42,.78); color:#fff; font-size:9px; font-weight:800; }
#suiteRoot .prod-info { min-width:0; }
#suiteRoot .prod-info strong { display:block; font-size:13px; }
#suiteRoot .prod-info span { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#suiteRoot .prod-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; max-width:126px; }
#suiteRoot .prod-act { min-width:38px; height:28px; padding:0 7px; border-radius:8px; background:#fff; border:1px solid #e2e8f0; font-size:11px; font-weight:800; display:grid; place-items:center; cursor:pointer; transition:.12s; }
#suiteRoot .prod-act:hover { background:#f1f5f9; border-color:#cbd5e1; }
#suiteRoot .prod-act.danger:hover { color:#dc2626; border-color:#fecaca; background:#fff1f2; }
#suiteRoot .upload-card.disabled { opacity:.5; cursor:not-allowed; background:#f8fafc; }
#suiteRoot .suite-upload-feedback { margin-top:8px; padding:8px 10px; border-radius:9px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:11px; line-height:1.6; }
#suiteRoot .suite-upload-empty { padding:12px; text-align:center; color:#94a3b8; font-size:12px; border:1px dashed #dbe4f0; border-radius:10px; }
#suiteRoot .suite-char-count { margin-top:4px; text-align:right; color:#94a3b8; font-size:11px; }
#suiteRoot .suite-aplus-note { margin-top:10px; padding:8px 10px; border-radius:9px; background:#eef4ff; border:1px solid #cfe0ff; color:#1d4ed8; font-size:11px; line-height:1.6; }
#suiteRoot .stepper.is-disabled { opacity:.65; }
#suiteRoot .suite-config-foot button:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.mp-no-result { grid-column:1/-1; padding:56px 20px; border:1px dashed #cbd5e1; border-radius:12px; text-align:center; color:#94a3b8; font-size:13px; }
.mp-card.existing { opacity:.55; }
.suite-overlay-mask { position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(15,23,42,.66); backdrop-filter:blur(5px); }
.suite-overlay-modal { width:min(760px,94vw); max-height:88vh; overflow:hidden; display:flex; flex-direction:column; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.4); }
.suite-overlay-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px; border-bottom:1px solid #eef2f7; }
.suite-overlay-head h3 { margin:0; font-size:17px; }
.suite-overlay-head p { margin:4px 0 0; color:#64748b; font-size:12px; }
.suite-overlay-head > button { width:34px; height:34px; border-radius:50%; background:#f1f5f9; color:#475569; font-size:20px; }
.suite-overlay-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #eef2f7; }
.suite-confirm-modal { width:min(480px,92vw); }
.suite-confirm-copy { padding:24px 20px; color:#334155; font-size:14px; line-height:1.8; }
.suite-overlay-foot .primary-btn.danger { background:#dc2626; }

/* AI 卖点润色弹窗（按线上买家秀润色样式：贴左侧配置栏顶部的浮层，仅遮罩配置栏，无全屏暗蒙版）*/
.suite-polish-scrim { position:absolute; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:16px; background:rgba(248,250,252,.55); backdrop-filter:blur(1px); }
.suite-polish-modal { width:100%; margin-top:8px; display:flex; flex-direction:column; gap:14px; padding:18px 20px 16px; border-radius:14px; background:#fff; box-shadow:0 18px 44px rgba(15,23,42,.18); border:1px solid #eef2f7; }
.suite-polish-head { display:flex; align-items:center; justify-content:space-between; }
.suite-polish-head strong { font-size:15px; font-weight:800; color:var(--text); }
.suite-polish-head .polish-status { font-size:13px; font-weight:700; color:#2f6bff; }
.suite-polish-body { color:#334155; font-size:14px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; max-height:40vh; overflow-y:auto; }
.suite-polish-foot { display:flex; justify-content:flex-end; gap:10px; }
.suite-polish-foot .ghost-btn { min-width:64px; padding:8px 16px; border-radius:8px; }
.suite-polish-foot .primary-btn { min-width:64px; padding:8px 20px; border-radius:8px; }
@media (max-width: 1320px) {
  #suiteRoot .workspace { grid-template-columns:minmax(390px,4fr) minmax(0,6fr); gap:12px; }
  #suiteRoot .suite-config-scroll, #suiteRoot .suite-result-scroll { padding:12px; }
  #suiteRoot .suite-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #suiteRoot .prod-item { grid-template-columns:56px minmax(0,1fr); }
  #suiteRoot .prod-thumb, #suiteRoot .prod-thumb img { width:56px; height:44px; }
  #suiteRoot .prod-actions { grid-column:1/-1; max-width:none; justify-content:flex-end; }
  .mp-grid { grid-template-columns:repeat(4,1fr); }
}

/* ---- 套图弹窗（挂 body，全局；名字零碰撞）---- */
/* 点击放大 lightbox */
.lightbox-mask { position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:40px; }
#layZoomRoot .lightbox-mask { z-index:100; }
.lightbox-body { position:relative; max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:14px; }
.lightbox-img { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.lightbox-img img { max-width:100%; max-height:72vh; object-fit:contain; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.5); background:#fff; }
.lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff; }
.lightbox-bar .lb-title { font-weight:800; font-size:15px; }
.lightbox-bar .lb-title span { color:#cbd5e1; font-weight:600; margin-left:8px; font-size:13px; }
.lightbox-bar .lb-actions { display:flex; gap:8px; }
.lightbox-bar .lb-actions button { min-height:34px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-weight:800; font-size:13px; }
.lightbox-bar .lb-actions button:hover { background:rgba(255,255,255,.28); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:22px; display:grid; place-items:center; }
.lightbox-nav:hover { background:rgba(255,255,255,.3); }
.lightbox-nav.prev { left:-58px; }
.lightbox-nav.next { right:-58px; }
.lightbox-close { position:absolute; top:-40px; right:0; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:20px; display:grid; place-items:center; }
/* 局部编辑弹窗 */
.ed-mask { position:fixed; inset:0; z-index:95; background:rgba(15,23,42,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:32px; }
.ed-modal { width:min(1120px,95vw); height:min(720px,90vh); background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.4); display:flex; flex-direction:column; overflow:hidden; }
.ed-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eef2f7; }
.ed-head h3 { margin:0; font-size:16px; }
.ed-head .sub { color:#64748b; font-size:12px; margin-top:2px; }
.ed-close { width:34px; height:34px; border-radius:50%; background:#f1f5f9; color:#334155; font-size:20px; display:grid; place-items:center; }
.ed-close:hover { background:#e2e8f0; }
.ed-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 300px; }
.ed-left { min-width:0; display:flex; flex-direction:column; padding:18px; border-right:1px solid #eef2f7; background:#f8fafc; }
.ed-stage { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; }
.ed-imgwrap { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.ed-imgwrap img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.15); display:block; }
#edMaskCanvas { position:absolute; cursor:crosshair; touch-action:none; }
.ed-genmask { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.35); backdrop-filter:blur(2px); border-radius:10px; }
.ed-genmask .spinner { font-weight:800; color:#7c3aed; }
.ed-hint { background:#eef4ff; border:1px solid rgba(37,99,235,.15); color:#1d4ed8; font-size:12px; padding:8px 12px; border-radius:10px; }
.ed-progress { display:flex; flex-direction:column; gap:6px; }
.ed-progress .ptxt { font-size:12px; font-weight:800; color:#7c3aed; }
.ed-progress .bar { height:6px; border-radius:99px; background:#e9d5ff; overflow:hidden; }
.ed-progress .bar i { display:block; height:100%; background:#7c3aed; transition:width .16s; }
.ed-compare { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ed-compare figure { margin:0; display:flex; flex-direction:column; gap:8px; min-height:0; }
.ed-compare img { flex:1; min-height:0; width:100%; object-fit:contain; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.12); }
.ed-compare figcaption { text-align:center; font-size:12px; font-weight:800; color:#64748b; }
.ed-compare .after figcaption { color:#7c3aed; }
.ed-side { display:flex; flex-direction:column; gap:14px; padding:18px; min-height:0; overflow-y:auto; }
.ed-side h4 { margin:0; font-size:14px; }
.ed-desc { font-size:12px; color:#64748b; line-height:1.7; margin:0; }
.ed-tools { display:flex; gap:8px; }
.ed-tool { flex:1; padding:10px 0; border-radius:10px; border:2px solid #e5edf6; background:#fff; font-weight:800; font-size:13px; color:#334155; cursor:pointer; }
.ed-tool.active { border-color:#7c3aed; color:#7c3aed; background:#faf5ff; }
.ed-tool:disabled { opacity:.45; cursor:not-allowed; }
.ed-brush { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#334155; }
.ed-brush b { color:#7c3aed; }
.ed-brush input { flex:1; }
.ed-rowbtns { display:flex; gap:8px; }
.ed-rowbtns .ghost-btn { flex:1; }
.ed-field label, .ed-prompt-recap label { display:block; font-size:12px; font-weight:800; color:#334155; margin-bottom:6px; }
.ed-field textarea { width:100%; min-height:96px; resize:vertical; border:1px solid #e2e8f0; border-radius:10px; padding:10px; font-size:13px; font-family:inherit; }
.ed-prompt-recap div { font-size:13px; color:#475569; background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:10px; line-height:1.6; }
.ed-foot { margin-top:auto; display:flex; gap:10px; padding-top:6px; }
.ed-foot .primary-btn.wide { flex:1; }
.ed-foot button:disabled { opacity:.5; cursor:not-allowed; }
/* 素材库选择弹窗 */
.mp-mask { position:fixed; inset:0; z-index:96; background:rgba(15,23,42,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:32px; }
.mp-modal { width:min(1120px,95vw); height:min(760px,92vh); background:#f8fafc; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.4); display:flex; flex-direction:column; overflow:hidden; }
.mp-head { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 22px 12px; background:#fff; }
.mp-tag { display:inline-block; font-size:11px; font-weight:800; color:#7c3aed; background:#faf5ff; border-radius:6px; padding:2px 8px; margin-bottom:6px; }
.mp-head h3 { margin:0; font-size:18px; }
.mp-head .sub { color:#64748b; font-size:12px; margin:4px 0 0; }
.mp-close { width:34px; height:34px; border-radius:50%; background:#f1f5f9; color:#334155; font-size:20px; display:grid; place-items:center; }
.mp-close:hover { background:#e2e8f0; }
.mp-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:12px 22px; background:#fff; border-bottom:1px solid #eef2f7; }
.mp-tab { text-align:left; padding:12px 16px; border-radius:12px; border:2px solid #e5edf6; background:#fff; cursor:pointer; transition:.12s; }
.mp-tab strong { display:block; font-size:14px; color:#0f172a; }
.mp-tab span { font-size:12px; color:#64748b; }
.mp-tab:hover { border-color:#c3d4ea; }
.mp-tab.active { border-color:#3b82f6; background:#eff6ff; }
.mp-filter { display:flex; gap:10px; padding:14px 22px; background:#fff; }
.mp-filter input, .mp-filter select { height:36px; border:1px solid #e2e8f0; border-radius:9px; padding:0 10px; font-size:13px; background:#fff; }
.mp-filter input { flex:1; }
.mp-filter select { min-width:130px; }
.mp-body { flex:1; min-height:0; overflow-y:auto; padding:16px 22px; }
.mp-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.mp-card { position:relative; border:2px solid #e5edf6; border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; transition:.12s; }
.mp-card:hover { border-color:#c3d4ea; }
.mp-card.on { border-color:#3b82f6; }
.mp-thumb { width:100%; aspect-ratio:1/1; overflow:hidden; background:#eef2f8; }
.mp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mp-card-info { padding:8px 10px; }
.mp-card-info strong { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-card-info .muted { font-size:11px; color:#94a3b8; }
.mp-check { position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.9); border:1px solid #cbd5e1; display:grid; place-items:center; }
.mp-check .tick { font-size:13px; color:transparent; }
.mp-card.on .mp-check { background:#3b82f6; border-color:#3b82f6; }
.mp-card.on .mp-check .tick { color:#fff; }
.mp-upload-area { display:grid; place-items:center; padding:40px 0; }
.mp-upload-card { width:min(420px,90%); display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px; border:2px dashed #cbd5e1; border-radius:14px; background:#fff; color:#64748b; cursor:pointer; transition:.12s; }
.mp-upload-card:hover { border-color:#3b82f6; color:#3b82f6; }
.mp-upload-card .plus { font-size:36px; line-height:1; }
.mp-upload-card strong { font-size:15px; color:#0f172a; }
.mp-foot { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; background:#fff; border-top:1px solid #eef2f7; }
.mp-count strong { font-size:13px; }
.mp-count .muted { color:#94a3b8; font-size:12px; margin-left:8px; }
.mp-actions { display:flex; gap:10px; }
/* 选择排版弹窗 */
.lay-mask { position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:32px; }
.lay-modal { width:min(1080px,94vw); height:min(680px,88vh); background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.35); display:flex; flex-direction:column; overflow:hidden; }
.lay-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eef2f7; }
.lay-head h3 { margin:0; font-size:17px; }
.lay-head .sub { color:var(--muted); font-size:12px; margin-top:3px; }
.lay-close { width:34px; height:34px; border-radius:50%; background:#f1f5f9; color:#475569; font-size:20px; display:grid; place-items:center; }
.lay-close:hover { background:#e2e8f0; }
.lay-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 240px; }
.lay-left { display:flex; flex-direction:column; min-height:0; border-right:1px solid #eef2f7; }
.lay-toolbar { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:14px 20px; flex-wrap:wrap; }
.lay-tabs { display:flex; gap:6px; }
.lay-tab { min-height:34px; padding:0 16px; border-radius:999px; border:1px solid #dbe4f0; background:#fff; color:#475569; font-weight:800; font-size:13px; }
.lay-tab.active { color:#fff; border-color:#1d4ed8; background:linear-gradient(180deg,#1d4ed8,#0f2f6f); }
.lay-dir { margin-left:auto; display:flex; gap:6px; background:#f3f4f6; border-radius:12px; padding:4px; }
.lay-dir button { min-height:28px; padding:0 12px; border-radius:9px; font-size:12px; font-weight:800; color:#64748b; }
.lay-dir button.active { background:#fff; color:#1d4ed8; box-shadow:0 2px 6px rgba(15,23,42,.08); }
.lay-grid-wrap { flex:1; min-height:0; overflow-y:auto; padding:0 20px 18px; }
.lay-tips { background:#eef4ff; border:1px solid rgba(37,99,235,.15); color:#1d4ed8; font-size:12px; padding:8px 12px; border-radius:10px; margin-bottom:12px; }
.lay-grid { display:grid; gap:12px; align-items:start; }
.lay-grid.dir-vertical { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lay-grid.dir-square { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lay-grid.dir-horizontal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lay-card { position:relative; border:2px solid #e5edf6; border-radius:12px; overflow:hidden; background:#f8fbff; cursor:pointer; transition:.12s; }
.lay-card:hover { border-color:#c3d4ea; }
.lay-card.on { border-color:#7c3aed; }
.lay-card .thumb { width:100%; height:auto; overflow:hidden; background:#eef2f8; line-height:0; display:block; }
.lay-card .thumb img { width:100%; height:auto; display:block; }
.lay-zoom { position:absolute; left:8px; top:8px; z-index:3; width:28px; height:28px; border-radius:50%; background:rgba(15,23,42,.55); color:#fff; font-size:14px; line-height:1; display:grid; place-items:center; cursor:zoom-in; transition:.12s; opacity:0; }
.lay-card:hover .lay-zoom { opacity:1; }
.lay-zoom:hover { background:rgba(15,23,42,.78); }
.lay-fav { position:absolute; right:8px; top:8px; z-index:3; width:28px; height:28px; border-radius:50%; background:rgba(15,23,42,.55); color:#fff; font-size:15px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:.12s; opacity:0; }
.lay-card:hover .lay-fav { opacity:1; }
.lay-fav:hover { background:rgba(15,23,42,.72); }
.lay-fav.on { opacity:1; background:#fff; color:#f59e0b; box-shadow:0 2px 8px rgba(15,23,42,.18); }
.lay-grid-empty { grid-column:1 / -1; text-align:center; color:#94a3b8; font-size:13px; line-height:1.9; padding:48px 16px; border:1px dashed #e2e8f0; border-radius:12px; }
.lay-card .mask-on { position:absolute; inset:0; background:rgba(124,58,237,.34); display:none; align-items:center; justify-content:center; padding:8px; }
.lay-card.on .mask-on { display:flex; }
.lay-card .mask-on .tick { width:24px; height:24px; border-radius:50%; background:#7c3aed; color:#fff; display:grid; place-items:center; font-size:14px; }
.lay-upload { min-height:160px; border:2px dashed #cbd5e1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#64748b; gap:6px; cursor:pointer; background:#fff; }
.lay-upload:hover { border-color:#7c3aed; color:#7c3aed; }
.lay-upload .plus { font-size:30px; line-height:1; }
.lay-upload span { font-size:12px; font-weight:800; }
.lay-right { display:flex; flex-direction:column; min-height:0; }
.lay-right h4 { margin:0; padding:16px 16px 10px; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
.lay-right h4 em { font-style:normal; color:#7c3aed; }
.lay-sel-list { flex:1; min-height:0; overflow-y:auto; padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.lay-sel-item { display:grid; grid-template-columns:40px 1fr auto; gap:8px; align-items:center; background:#f8fafc; border:1px solid #edf2f7; border-radius:10px; padding:6px; }
.lay-sel-item img { width:40px; height:40px; object-fit:cover; border-radius:7px; }
.lay-sel-item strong { font-size:12px; }
.lay-sel-item .rm { width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid #e2e8f0; color:#94a3b8; font-size:14px; display:grid; place-items:center; }
.lay-sel-item .rm:hover { color:#ef4444; border-color:#fecaca; }
.lay-sel-empty { color:#94a3b8; font-size:12px; text-align:center; padding:36px 10px; border:1px dashed #e2e8f0; border-radius:10px; }
.lay-foot { flex:0 0 auto; padding:12px 16px 16px; border-top:1px solid #eef2f7; display:flex; gap:10px; }
.lay-foot .ghost-btn { flex:0 0 auto; }
.lay-foot .primary-btn { flex:1; }

/* ===== PRD 标注层样式（prd-prototype-annotation 模块） ===== */
.prd-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 13px; min-width: 13px; padding: 0 2px; margin-left: 2px;
  border-radius: 3px; border: 1px solid #2563eb; color: #2563eb; background: #fff;
  font-size: 9px; font-weight: 700; font-style: normal; line-height: 1;
  cursor: pointer; vertical-align: super; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.prd-badge:hover { background: #2563eb; color: #fff; }
/* 角落浮标：不占布局空间，贴控件右上角。外层 .prd-anchor 需 position:relative */
.prd-anchor { position: relative; }
.prd-badge-corner {
  position: absolute; top: -6px; right: -6px; z-index: 5;
  margin: 0; vertical-align: baseline; box-shadow: 0 1px 3px rgba(20,28,50,.18);
}
.prd-pop-backdrop { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, 0.32); }
.prd-pop-backdrop.show { display: block; }
.prd-popover {
  display: none; position: fixed; z-index: 9999; width: 420px; max-width: calc(100vw - 32px);
  max-height: 70vh; overflow: auto; border-radius: 12px; background: #fff; border: 1px solid #e6e9f0;
  box-shadow: 0 24px 60px rgba(20, 28, 50, 0.22); padding: 16px 18px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
.prd-popover.show { display: block; }
.prd-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.prd-pop-tag { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px; background: #eaf1ff; color: #2563eb; font-size: 11px; font-weight: 700; }
.prd-pop-title { margin: 0; font-size: 14px; font-weight: 700; color: #16213a; line-height: 1.4; }
.prd-pop-close { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; background: #f6f8fc; color: #5b6678; font-size: 14px; line-height: 1; cursor: pointer; }
.prd-pop-body { margin-top: 10px; font-size: 13px; line-height: 1.7; color: #344054; white-space: pre-wrap; }
.prd-pop-source { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6e9f0; color: #8a93a6; font-size: 11.5px; }
.prd-pop-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6e9f0; }
.prd-pop-actions button { flex: none; padding: 6px 12px; border-radius: 7px; border: 1px solid #e6e9f0; background: #fff; color: #16213a; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.prd-pop-actions button.primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.prd-pop-actions button.danger { border-color: #fca5a5; color: #e0383f; background: #fff; }
.prd-pop-actions .spacer { flex: 1; }
.prd-pop-edit-field { display: block; margin-bottom: 8px; }
.prd-pop-edit-field input, .prd-pop-edit-field textarea {
  width: 100%; border: 1px solid #e6e9f0; border-radius: 7px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; color: #16213a; background: #fbfcfe; resize: vertical;
}
.prd-pop-edit-field textarea { min-height: 140px; line-height: 1.6; }
.prd-pop-edited-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.custom-pin {
  position: absolute; width: 18px; height: 18px; margin: 0; padding: 0; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid #16a34a; background: #fff; color: #15803d; font-size: 10px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 30; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}
.custom-pin:hover { background: #16a34a; color: #fff; }
.custom-pin-layer { position: absolute; inset: 0; pointer-events: none; }
.custom-pin-layer .custom-pin { pointer-events: auto; }
body.placing-mark { cursor: crosshair; }
.placing-hint {
  display: none; position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9990;
  padding: 8px 16px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px rgba(22, 163, 74, 0.35);
}
body.placing-mark .placing-hint { display: block; }
.anno-toolbar { position: fixed; right: 22px; bottom: 22px; z-index: 9970; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.anno-fab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid #e6e9f0;
  background: #fff; color: #16213a; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); font-family: inherit;
}
.anno-fab.active { border-color: #16a34a; background: #16a34a; color: #fff; }
.anno-fab.copy { border-color: #2563eb; background: #2563eb; color: #fff; }
.anno-toast {
  position: fixed; bottom: 90px; right: 22px; z-index: 9980; background: #16213a; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px;
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.anno-toast.show { opacity: 1; transform: translateY(0); }