/* ============================================================
   京宏AI - 设计系统 · Apple 风格浅色主题
   ------------------------------------------------------------
   纯视觉换肤：所有类名 / CSS 变量名与旧版保持一致，
   app.js 与 index.html 内联样式引用的变量均已保留。
   ============================================================ */

:root {
  /* 品牌色板 → Apple 系统蓝 */
  --brand-50:  #f4f3fe;
  --brand-100: #eae7fd;
  --brand-200: #d4cdfb;
  --brand-300: #b3a8fa;
  --brand-400: #8b7ffa;
  --brand-500: #6d5efc;   /* Apple System Blue */
  --brand-600: #584df5;
  --brand-700: #4a3ce0;
  --brand-800: #3b2fb8;

  --pink-400: #8b7ffa;
  --pink-500: #6d5efc;
  --pink-600: #584df5;

  /* 中性色 → Apple 灰阶 */
  --ink-900: #1d1d1f;   /* 近黑 */
  --ink-700: #3a3a3c;
  --ink-500: #6e6e73;   /* 次级文字 */
  --ink-400: #86868b;   /* Apple 中灰 */
  --ink-300: #aeaeb2;   /* System Gray 3 */
  --line:   rgba(0,0,0,.08);   /* 发丝分割线 */
  --line-2: #d2d2d7;            /* 可交互描边 */

  /* 功能色 → iOS 系统色 */
  --ok:    #34c759;
  --ok-bg: #eff9f1;
  --warn:  #ff9500;
  --warn-bg: #fff6e9;
  --err:   #ff3b30;
  --err-bg:#fff0ef;

  /* 渐变 → 靛紫罗兰 → 洋红（品牌主视觉） */
  --grad: linear-gradient(135deg, #6d5efc 0%, #a855f7 55%, #ec4899 130%);
  --grad-soft: linear-gradient(135deg, rgba(109,94,252,.09), rgba(236,72,153,.06));

  /* 圆角 / 阴影（大圆角 + 多层低透明度） */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 2px 4px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.06), 0 24px 64px rgba(0,0,0,.16);

  /* 动效曲线 */
  --ease-apple: cubic-bezier(.25,.1,.25,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink-900);
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02","cv03","cv04";
}

/* 键盘可达性：蓝色聚焦环 */
:focus-visible { outline: 3px solid rgba(109,94,252,.35); outline-offset: 2px; }

/* 背景装饰：极淡蓝色光斑 + 缓慢视差漂移 */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 480px at 85% -12%, rgba(109,94,252,.055), transparent 62%),
    radial-gradient(900px 420px at -8% 18%, rgba(34,211,238,.045), transparent 60%);
}
.bg-scene::before,
.bg-scene::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.bg-scene::before {
  width: 560px; height: 560px;
  right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(109,94,252,.06), transparent 70%);
  animation: blob-drift 38s var(--ease-apple) infinite alternate;
}
.bg-scene::after {
  width: 480px; height: 480px;
  left: -180px; top: 32%;
  background: radial-gradient(circle, rgba(100,210,255,.05), transparent 70%);
  animation: blob-drift 46s var(--ease-apple) infinite alternate-reverse;
}
@keyframes blob-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-70px,60px,0) scale(1.12); }
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ---------- 顶部导航：毛玻璃 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,251,253,.78);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 11px; user-select: none; }
.brand-logo {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(109,94,252,.32);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-apple);
}
.brand:hover .brand-logo { transform: scale(1.06) rotate(-2deg); box-shadow: 0 6px 20px rgba(109,94,252,.4); }
.brand-name { font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; }
.brand-sub { font-size: 11px; color: var(--ink-400); font-weight: 500; }

.nav {
  display: flex; align-items: center; gap: 2px;
  background: rgba(251,251,253,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.nav-btn {
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s var(--ease-apple), background .2s var(--ease-apple), transform .2s var(--ease-spring), box-shadow .2s var(--ease-apple);
  white-space: nowrap;
}
.nav-btn:hover { color: var(--ink-900); background: rgba(0,0,0,.045); }
.nav-btn:active { transform: scale(.95); }
.nav-btn.active {
  color: #fff;
  background: var(--brand-500);
  box-shadow: 0 3px 10px rgba(109,94,252,.35);
}

.top-actions { display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-500);
  background: rgba(251,251,253,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.pill .coin { font-size: 13px; }
.pill b { color: var(--brand-600); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;                       /* 胶囊按钮 */
  letter-spacing: -.01em;
  transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-apple), opacity .15s ease, background .2s var(--ease-apple), border-color .2s var(--ease-apple), color .2s var(--ease-apple);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { color: #fff; background: var(--brand-500); box-shadow: 0 4px 14px rgba(109,94,252,.32); }
.btn-primary:hover:not(:disabled) { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(109,94,252,.4); }
.btn-primary:active:not(:disabled) { transform: scale(.96); }
.btn-ghost { background: #fff; color: var(--ink-900); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-300); background: #fafafa; }
.btn-ghost:active:not(:disabled) { transform: scale(.96); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.btn-block { width: 100%; }

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6e2fd, #d4cdfb);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: var(--brand-700);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}

/* ---------- 布局 ---------- */
.main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ---------- 卡片：大圆角 + 发丝边 + 柔和多层阴影 ---------- */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 26px; }

/* 卡片标题行 */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.card-sub { font-size: 12px; color: var(--ink-400); margin-top: 2px; }

/* ---------- 步骤徽标 ---------- */
.step-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(109,94,252,.1);
  color: var(--brand-600);
  display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  flex: none;
}

/* ---------- 上传区 ---------- */
.dropzone {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  background: #fafafa;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s var(--ease-apple), background .25s var(--ease-apple), box-shadow .25s var(--ease-apple), transform .25s var(--ease-spring);
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--brand-400);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 4px rgba(109,94,252,.06);
}
.dropzone.drag { transform: scale(.99); }
.dropzone-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-spring);
}
.dropzone:hover .dropzone-icon { transform: translateY(-2px); }
.dropzone-icon svg { width: 24px; height: 24px; stroke: var(--brand-500); }
.dropzone-title { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.dropzone-hint { font-size: 11.5px; color: var(--ink-400); margin-top: 4px; }

/* 预设样图 */
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.preset-btn {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  background: #fff;
  padding: 9px 6px;
  cursor: pointer;
  transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-apple), border-color .2s var(--ease-apple);
  text-align: center;
}
.preset-btn:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.preset-btn.sel {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(109,94,252,.12);
}
.preset-swatch {
  height: 46px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,.05);
  margin-bottom: 7px;
  background-size: cover;
  background-position: center;
}
.preset-name { font-size: 10.5px; color: var(--ink-500); font-weight: 600; }

/* 已选图片预览 */
.preview-wrap { position: relative; margin-top: 12px; }
.preview-wrap img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
}
.preview-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(29,29,31,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- 分段选择器（iOS 风格） ---------- */
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: rgba(118,118,128,.10);
  border-radius: 14px;
  padding: 5px;
}
.seg-btn {
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 9px 6px;
  cursor: pointer;
  transition: background .25s var(--ease-apple), box-shadow .25s var(--ease-apple), transform .2s var(--ease-spring);
  text-align: center;
}
.seg-btn:active { transform: scale(.96); }
.seg-btn .seg-ic { font-size: 17px; line-height: 1.2; }
.seg-btn .seg-tx { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-500); margin-top: 3px; transition: color .2s var(--ease-apple); }
.seg-btn:hover .seg-tx { color: var(--ink-900); }
.seg-btn.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}
.seg-btn.active .seg-tx { color: var(--brand-600); }

.mode-hint {
  font-size: 11.5px; color: var(--ink-400);
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: 10px;
}
.mode-hint svg { width: 14px; height: 14px; stroke: var(--brand-500); flex: none; margin-top: 1px; }

/* ---------- 表单 ---------- */
.field-label { font-size: 11.5px; font-weight: 600; color: var(--ink-400); text-transform: uppercase; letter-spacing: .05em; }
.select, .input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-900);
  background: #fff;
  outline: none;
  transition: border-color .2s var(--ease-apple), box-shadow .2s var(--ease-apple);
}
.select:hover, .input:hover { border-color: var(--ink-300); }
.select:focus, .input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(109,94,252,.14); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }

/* ---------- 模型选择卡片 ---------- */
.model-list { display: grid; gap: 8px; }
.model-opt {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  transition: transform .22s var(--ease-spring), border-color .2s var(--ease-apple), background .2s var(--ease-apple), box-shadow .2s var(--ease-apple);
  background: #fff;
}
.model-opt:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.model-opt.active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 0 0 3.5px rgba(109,94,252,.12);
}
.radio-dot {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--ink-300);
  border-radius: 50%;
  margin-top: 2px;
  display: grid; place-items: center;
  transition: all .2s var(--ease-spring);
}
.radio-dot::after {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .2s var(--ease-spring);
}
.model-opt.active .radio-dot { border-color: var(--brand-500); background: var(--brand-500); }
.model-opt.active .radio-dot::after { transform: scale(1); }
.model-name { font-size: 13px; font-weight: 700; }
.model-desc { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.model-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  flex: none;
}
.badge-price { background: var(--ok-bg); color: #1e8e3e; }
.badge-main { background: var(--warn-bg); color: #c25e00; }
.badge-up  { background: var(--brand-50); color: var(--brand-600); }

/* ---------- 结果区 ---------- */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 1024px) { .result-grid { grid-template-columns: repeat(2, 1fr); } }

.result-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-apple);
}
.result-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.result-media { position: relative; aspect-ratio: 4/5; background: #f5f5f7; overflow: hidden; }
.result-media img { width: 100%; height: 100%; object-fit: cover; animation: img-in .5s var(--ease-apple); }
@keyframes img-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.result-body { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-label { font-size: 12px; font-weight: 600; color: var(--ink-900); }
.result-model { font-size: 10.5px; color: var(--ink-300); margin-top: 1px; }

.icon-btn {
  width: 30px; height: 30px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 9px;
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-400);
  transition: all .18s var(--ease-apple);
}
.icon-btn:hover { color: var(--brand-600); border-color: var(--brand-300); background: var(--brand-50); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- 空状态 ---------- */
.empty {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  background: #fafafa;
  text-align: center;
  padding: 48px 20px;
}
.empty-ic {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.empty-ic svg { width: 26px; height: 26px; stroke: var(--brand-400); }
.empty-title { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.empty-sub { font-size: 12px; color: var(--ink-400); margin-top: 4px; }

/* ---------- 加载动效（骨架屏） ---------- */
.skeleton {
  background: linear-gradient(90deg, #f5f5f7 0%, #ebebed 50%, #f5f5f7 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.gen-loading { position: relative; overflow: hidden; }
.gen-loading::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(109,94,252,.14) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 1.6s infinite;
}

/* ---------- 状态标签 ---------- */
.status-tag { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.status-tag .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-idle { color: var(--ink-400); }
.status-idle .dot { background: var(--ink-300); }
.status-run { color: var(--brand-600); }
.status-run .dot { background: var(--brand-500); animation: pulse 1.1s infinite; }
.status-done { color: var(--ok); }
.status-done .dot { background: var(--ok); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Toast（iOS HUD 风格） ---------- */
.toast-wrap {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: rgba(29,29,31,.86);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  animation: toast-in .4s var(--ease-spring);
  white-space: nowrap;
}
.toast svg { width: 16px; height: 16px; flex: none; }
.toast.err { background: rgba(209,38,27,.92); }
.toast.ok { background: rgba(38,122,68,.92); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: none; } }
.toast.out { animation: toast-out .28s var(--ease-apple) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(.94); } }

/* ---------- 通用工具 ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.muted { color: var(--ink-400); }
.tiny { font-size: 11.5px; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }

/* 页面切换动画（增强：淡入 + 上浮 + 微缩放） */
.page-fade { animation: pagefade .5s var(--ease-apple) both; }
@keyframes pagefade {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* 分段样式：可编辑页通用 */
.section-gap { display: grid; gap: 18px; }

/* 响应式 */
@media (max-width: 900px) {
  .nav { display: none; }
  .main { padding: 18px 14px 60px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }

/* ---------- 首页 Hero（临时展示位，可删） ---------- */
.hero { display: none; }

/* ============================================================
   演示版组件（登录 / 弹窗 / 印花 / 批量 / 设置 / 管理后台 等）
   ============================================================ */

/* ---------- 登录遮罩：浅色 + 蓝色光晕 ---------- */
.login-mask {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(109,94,252,.14), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, rgba(34,211,238,.12), transparent 60%),
    #f5f5f7;
}
.login-mask.hidden { display: none; }
.login-card {
  width: 100%; max-width: 400px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 32px 80px rgba(0,0,0,.18);
  padding: 36px 32px 28px;
  display: grid; gap: 16px;
  animation: login-in .55s var(--ease-spring);
}
@keyframes login-in {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-logo { width: 46px; height: 46px; font-size: 21px; border-radius: 14px; }
.login-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.login-sub { font-size: 12px; color: var(--ink-400); }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-300); font-weight: 600;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.08); }
.login-foot { font-size: 11px; color: var(--ink-300); text-align: center; line-height: 1.7; }

/* ---------- 头像下拉菜单：毛玻璃 ---------- */
.avatar-wrap { position: relative; }
.avatar-btn { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; display: block; transition: transform .25s var(--ease-spring); }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px rgba(109,94,252,.18), var(--shadow-sm); }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 176px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 120;
  transform-origin: top right;
  animation: menu-in .28s var(--ease-spring);
}
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-pop.hidden { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  transition: background .18s var(--ease-apple), color .18s var(--ease-apple);
}
.menu-item:hover { background: rgba(109,94,252,.07); color: var(--brand-600); }
.menu-item.danger:hover { background: var(--err-bg); color: var(--err); }
.menu-head { padding: 8px 12px 6px; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 4px; }
.menu-head .mn { font-size: 13px; font-weight: 700; }
.menu-head .mr { font-size: 10.5px; color: var(--ink-400); margin-top: 1px; }

/* ---------- 汉堡菜单（移动端） ---------- */
.hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .2s var(--ease-apple), transform .2s var(--ease-spring);
}
.hamburger:hover { background: #f5f5f7; }
.hamburger:active { transform: scale(.92); }
.hamburger svg { width: 19px; height: 19px; stroke: var(--ink-900); }

/* ---------- 移动端底部导航：毛玻璃 ---------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(251,251,253,.88);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav .bn-inner { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 560px; margin: 0 auto; }
.bn-btn {
  border: 0; background: transparent; cursor: pointer;
  display: grid; gap: 2px; justify-items: center;
  padding: 5px 2px; border-radius: 12px;
  transition: transform .2s var(--ease-spring);
}
.bn-btn:active { transform: scale(.9); }
.bn-btn .bn-ic { font-size: 17px; line-height: 1; }
.bn-btn .bn-tx { font-size: 9.5px; font-weight: 600; color: var(--ink-400); }
.bn-btn.active .bn-tx { color: var(--brand-600); }
.bn-btn.active .bn-ic { filter: saturate(1.6); }

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .bottom-nav { display: block; }
  .main { padding-bottom: 96px; }
  .login-card { padding: 28px 20px 22px; }
}

/* ---------- 全屏菜单面板（移动端） ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 74px 12px 0;
  animation: pagefade .18s var(--ease-apple);
}
.sheet-mask.hidden { display: none; }
.sheet {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 196px;
  transform-origin: top right;
  animation: menu-in .3s var(--ease-spring);
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: pagefade .18s var(--ease-apple);
}
.modal-mask.hidden { display: none; }
.modal {
  width: 100%; max-width: 440px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 26px;
  display: grid; gap: 14px;
  animation: modal-in .42s var(--ease-spring);
}
@keyframes modal-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.modal-text { font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ---------- 图片预览灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(10,10,12,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px;
  animation: pagefade .2s var(--ease-apple);
}
.lightbox.hidden { display: none; }
.lightbox img { max-width: min(88vw, 620px); max-height: 70vh; border-radius: 16px; box-shadow: var(--shadow-lg); object-fit: contain; background: #fff; animation: img-in .45s var(--ease-spring); }
.lightbox-meta { color: #d2d2d7; font-size: 12.5px; text-align: center; line-height: 1.8; }
.lightbox-actions { display: flex; gap: 10px; }
.lightbox-actions .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.lightbox-actions .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.lb-close { position: absolute; top: 18px; right: 20px; }

/* ---------- 筛选 chips ---------- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-500);
  font-size: 12px; font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s var(--ease-apple);
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-600); }
.chip:active { transform: scale(.95); }
.chip.active { background: var(--brand-500); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(109,94,252,.3); }

/* ---------- 搜索框 ---------- */
.search-box { position: relative; }
.search-box .input { padding-left: 34px; border-radius: 999px; }
.search-box svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--ink-300);
}

/* ---------- 比例选择 ---------- */
.ratio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ratio-btn {
  border: 1.5px solid var(--line-2);
  background: #fff; border-radius: 13px;
  padding: 7px 12px; cursor: pointer;
  display: grid; gap: 5px; justify-items: center;
  transition: all .2s var(--ease-apple);
}
.ratio-btn .rbox { border: 1.5px solid var(--ink-300); border-radius: 4px; background: #fafafa; transition: all .2s var(--ease-apple); }
.ratio-btn .rtx { font-size: 10.5px; font-weight: 700; color: var(--ink-500); }
.ratio-btn:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.ratio-btn.active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(109,94,252,.12); }
.ratio-btn.active .rbox { border-color: var(--brand-500); }
.ratio-btn.active .rtx { color: var(--brand-600); }

/* ---------- 颜色选择 ---------- */
.color-dot-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.color-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-sm);
  cursor: pointer; transition: transform .22s var(--ease-spring), box-shadow .2s var(--ease-apple);
}
.color-dot:hover { transform: scale(1.14); }
.color-dot:active { transform: scale(.94); }
.color-dot.active { box-shadow: 0 0 0 2.5px var(--brand-500); }
input[type="color"].color-input {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2);
  border-radius: 50%; cursor: pointer; background: #fff; overflow: hidden;
}

/* ---------- 印花图案卡 ---------- */
.pattern-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pattern-card {
  border: 1.5px solid var(--line-2); border-radius: 14px;
  background: #fff; padding: 8px 4px; cursor: pointer;
  display: grid; gap: 6px; justify-items: center;
  transition: all .2s var(--ease-apple);
}
.pattern-card:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pattern-card.active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(109,94,252,.12); }
.pattern-prev { width: 44px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,.06); overflow: hidden; }
.pattern-name { font-size: 10.5px; font-weight: 600; color: var(--ink-500); }

/* ---------- 进度条 ---------- */
.progress {
  height: 7px; border-radius: 999px;
  background: rgba(118,118,128,.14); overflow: hidden;
}
.progress .bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7d6ffe, #584df5);
  transition: width .45s var(--ease-apple);
}
.progress.thin { height: 5px; }

/* ---------- 批量任务行 ---------- */
.batch-row {
  border: 1px solid rgba(0,0,0,.07); border-radius: 16px;
  background: #fff; padding: 13px 14px;
  display: grid; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.batch-row .br-top { display: flex; align-items: center; gap: 11px; }
.batch-row .br-idx {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: rgba(109,94,252,.09);
  color: var(--brand-600); font-weight: 800; font-size: 13px;
  display: grid; place-items: center;
}
.batch-row .br-thumbs { display: flex; gap: 7px; flex-wrap: wrap; }
.batch-row .br-thumb {
  width: 52px; height: 64px; border-radius: 9px; object-fit: cover;
  border: 1px solid rgba(0,0,0,.06);
}
.br-status { font-size: 11px; font-weight: 700; }
.br-status.queued { color: var(--ink-300); }
.br-status.running { color: var(--brand-600); }
.br-status.done { color: var(--ok); }
.br-status.failed { color: var(--err); }

/* ---------- 开关（iOS Toggle） ---------- */
.switch { position: relative; width: 42px; height: 25px; flex: none; cursor: pointer; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(120,120,128,.28); transition: background .22s var(--ease-apple);
}
.switch .track::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .24s var(--ease-spring);
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* ---------- 设置页 ---------- */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row .sr-label { font-size: 13px; font-weight: 600; }
.setting-row .sr-desc { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.api-box {
  border: 1px dashed var(--brand-300);
  background: var(--brand-50);
  border-radius: var(--r-md); padding: 16px;
  display: grid; gap: 10px;
}
.api-box .field-label { color: var(--brand-600); }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.tag-ok { background: var(--ok-bg); color: #1e8e3e; }
.tag-warn { background: var(--warn-bg); color: #c25e00; }
.tag-err { background: var(--err-bg); color: var(--err); }
.tag-info { background: var(--brand-50); color: var(--brand-600); }

/* ---------- 管理后台 ---------- */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { padding: 18px; display: grid; gap: 4px; }
.stat-num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11.5px; color: var(--ink-400); font-weight: 600; }
.stat-trend { font-size: 11px; font-weight: 700; }
.up { color: var(--ok); } .down { color: var(--err); }

.table-wrap { overflow-x: auto; border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-md); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 620px; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 14px; background: rgba(118,118,128,.05); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-700); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s var(--ease-apple); }
.tbl tr:hover td { background: #fafafa; }

.bar-chart {
  display: flex; align-items: flex-end; gap: 12px;
  height: 170px; padding: 8px 4px 0;
}
.bc-col { flex: 1; display: grid; gap: 6px; justify-items: center; align-content: end; height: 100%; }
.bc-bar {
  width: 100%; max-width: 44px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #8b7ffa, #6d5efc);
  opacity: .9;
  transition: height .5s var(--ease-spring), opacity .2s var(--ease-apple);
  min-height: 4px;
}
.bc-bar:hover { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; }
.bc-val { font-size: 10px; font-weight: 700; color: var(--ink-500); }
.bc-day { font-size: 10.5px; color: var(--ink-400); font-weight: 600; }

.tpl-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-md);
  padding: 12px 14px; background: #fff;
}
.tpl-row .tpl-swatch { width: 46px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,.06); flex: none; }

/* ---------- 订单 / 记录列表 ---------- */
.order-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.order-row:last-child { border-bottom: 0; }

/* ---------- 收藏星 ---------- */
.fav-btn { background: transparent; border: 0; cursor: pointer; font-size: 15px; opacity: .35; transition: all .2s var(--ease-spring); padding: 2px; }
.fav-btn:hover { opacity: .8; transform: scale(1.15); }
.fav-btn.on { opacity: 1; animation: fav-pop .35s var(--ease-spring); }
@keyframes fav-pop { 50% { transform: scale(1.35); } }

/* ---------- 结果图角标 ---------- */
.result-media .corner-tag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(29,29,31,.6); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.result-media .acts {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: center; gap: 8px;
  padding: 26px 0 10px;
  background: linear-gradient(transparent, rgba(10,10,12,.55));
  opacity: 0; transition: opacity .22s var(--ease-apple);
}
.result-card:hover .acts { opacity: 1; }
.acts .mini-btn {
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.94);
  color: var(--ink-900);
  font-size: 11px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease-apple);
}
.acts .mini-btn:hover { background: #fff; color: var(--brand-600); transform: translateY(-1px); }
.acts .mini-btn:active { transform: scale(.94); }
.acts .mini-btn.danger:hover { color: var(--err); }

/* ---------- 通用卡片网格（模特选择等） ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 900px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
.pick-card {
  border: 1.5px solid var(--line-2); border-radius: 14px;
  background: #fff; padding: 10px 6px; cursor: pointer;
  display: grid; gap: 7px; justify-items: center;
  transition: all .2s var(--ease-apple);
}
.pick-card:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pick-card.active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(109,94,252,.12); }
.pick-card img, .pick-card .pick-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 9px; border: 1px solid rgba(0,0,0,.05); }
.pick-card .pick-name { font-size: 11px; font-weight: 600; color: var(--ink-500); text-align: center; }
.pick-card.active .pick-name { color: var(--brand-600); }

/* 页面内的小节标题 */
.sub-title {
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
  letter-spacing: -.01em;
}

/* 单选胶囊组（横向） */
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-chip {
  border: 1.5px solid var(--line-2); background: #fff;
  font-size: 12px; font-weight: 600; color: var(--ink-500);
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  transition: all .2s var(--ease-apple);
}
.opt-chip:hover { border-color: var(--brand-300); color: var(--brand-600); }
.opt-chip:active { transform: scale(.95); }
.opt-chip.active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-600); box-shadow: 0 0 0 3px rgba(109,94,252,.12); }

/* 智能替换 - 作品库选图卡 */
.rp-src { cursor: pointer; }
.rp-src:hover { border-color: var(--brand-300); }

/* 批量行删除按钮（基于 icon-btn） */
.br-del:hover { color: var(--err); border-color: rgba(255,59,48,.35); background: var(--err-bg); }

/* 套餐热门卡 */
.plan-hot { box-shadow: 0 2px 4px rgba(109,94,252,.08), 0 14px 40px rgba(109,94,252,.16) !important; }
.plan-hot:hover { transform: translateY(-4px); }
.card.plan-hot { transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-apple); }

/* 空状态小号 */
.empty.small { padding: 24px 16px; }

/* ---------- 两栏页面响应式 ---------- */
@media (max-width: 980px) {
  .studio-grid { grid-template-columns: 1fr !important; }
  .plan-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #studioOptGrid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: 1fr !important; }
  #galleryGrid { grid-template-columns: repeat(2, 1fr) !important; }
  #replaceSrcList { grid-template-columns: repeat(2, 1fr) !important; }
  .pattern-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .pill span:nth-child(2) { display: none; }
  #topRecharge { display: none; }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   v3 · 概念首页（Landing）+ 工作台分离架构 · 顶级 SaaS 视觉
   ------------------------------------------------------------
   首页 = 营销概念页（Hero / 对比 / 3D 能力卡 / 交互演示 / 画廊 / CTA）
   工作台 = 左侧优雅导航 + 右侧沉浸式操作区
   ============================================================ */

.hidden { display: none !important; }

/* ---------- 概念首页容器 ---------- */
#viewLanding {
  position: relative;
  min-height: 100vh;
  background: #fbfbff;
}
body.on-landing .bg-scene { display: none; }
#viewLanding section[id] { scroll-margin-top: 86px; }

/* ---------- 弥散光斑背景（Mesh Gradient / Aurora） ---------- */
.lp-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -14px), 0);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.aurora { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.aurora.a1 {
  width: 46vw; height: 46vw; min-width: 520px; min-height: 520px;
  left: -12vw; top: -18vw;
  background: radial-gradient(circle at 35% 35%, rgba(139,92,246,.32), transparent 64%);
  animation: aurora-drift 30s var(--ease-apple) infinite alternate;
}
.aurora.a2 {
  width: 40vw; height: 40vw; min-width: 480px; min-height: 480px;
  right: -10vw; top: -6vw;
  background: radial-gradient(circle at 60% 40%, rgba(236,72,153,.20), transparent 62%);
  animation: aurora-drift 36s var(--ease-apple) infinite alternate-reverse;
}
.aurora.a3 {
  width: 44vw; height: 44vw; min-width: 500px; min-height: 500px;
  left: 28vw; top: 52vh;
  background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.14), transparent 60%);
  animation: aurora-drift 42s var(--ease-apple) infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  to   { transform: translate3d(6vw,4vh,0) scale(1.15) rotate(8deg); }
}
.lp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,10,40,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,10,40,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1200px 640px at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(1200px 640px at 50% 0%, #000 0%, transparent 78%);
}

/* ---------- 顶部导航（毛玻璃） ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,251,255,.72);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(15,10,40,.06);
}
.lp-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.lp-brand {
  display: flex; align-items: center; gap: 13px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.lp-brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lp-brand-sub { font-size: 10.5px; color: var(--ink-400); font-weight: 700; letter-spacing: .12em; margin-top: 1px; }
.lp-links { display: flex; gap: 6px; align-items: center; }
.lp-links a {
  font-size: 15.5px; font-weight: 600; color: var(--ink-500);
  text-decoration: none; padding: 9px 18px; border-radius: 999px;
  transition: color .2s var(--ease-apple), background .2s var(--ease-apple);
}
.lp-links a:hover { color: var(--ink-900); background: rgba(15,10,40,.05); }
.lp-nav-actions { display: flex; align-items: center; gap: 12px; }
.lp-nav-actions .btn { padding: 11px 26px; font-size: 15px; }
/* 2026-09-16 lp-nav 全宽（brand 左 / 链接中 / 按钮组贴最右）+ 登录态两按钮尺寸统一 */
.nav-user .btn {
  height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;
  padding: 0 22px; font-size: 15px; line-height: 1;
}
.nav-user .btn #navUserMark { width: 24px; height: 24px; flex: 0 0 24px; }

.lp-main { position: relative; z-index: 1; }

/* ---------- ① Hero ---------- */
.lp-hero {
  position: relative;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; gap: 24px;
  max-width: 1240px; margin: 0 auto;
  padding: 44px 28px 100px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #4c3fd8;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(109,94,252,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 7px 16px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: pulse 2s infinite;
}
.hero-title {
  margin: 26px 0 0;
  font-size: clamp(44px, 6.4vw, 94px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
  color: #141222;
}
.grad-text {
  background: linear-gradient(115deg, #6d5efc 5%, #a855f7 42%, #ec4899 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad-text-lt {
  background: linear-gradient(115deg, #a78bfa, #f472b6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub {
  margin-top: 24px;
  font-size: clamp(15px, 1.5vw, 18.5px);
  line-height: 1.8;
  color: var(--ink-500);
  max-width: 34em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }
.hero-meta { margin-top: 22px; font-size: 12.5px; color: var(--ink-400); font-weight: 500; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-300); letter-spacing: .18em;
  display: grid; justify-items: center; gap: 8px; font-weight: 600;
}
.hero-scroll span {
  width: 1px; height: 34px;
  background: linear-gradient(var(--ink-300), transparent);
  animation: scroll-hint 2.2s var(--ease-apple) infinite;
}
@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* CTA 主按钮 */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: -.01em;
  padding: 15px 30px; border-radius: 999px;
  background: linear-gradient(135deg, #6d5efc, #a855f7 55%, #ec4899);
  background-size: 170% 170%; background-position: 0% 50%;
  box-shadow: 0 10px 30px rgba(124,90,250,.36), 0 2px 8px rgba(109,94,252,.22), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .25s var(--ease-spring), box-shadow .3s var(--ease-apple), background-position .6s var(--ease-apple);
  -webkit-tap-highlight-color: transparent;
}
.btn-cta:hover {
  transform: translateY(-2px); background-position: 95% 50%;
  box-shadow: 0 16px 44px rgba(124,90,250,.48), 0 4px 12px rgba(109,94,252,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-cta:active { transform: scale(.97); }
.btn-cta.lg { font-size: 17px; padding: 17px 40px; }
.btn-cta .arr { font-style: normal; transition: transform .25s var(--ease-spring); }
.btn-cta:hover .arr { transform: translateX(4px); }
.btn-cta.demo-run { width: 100%; }
.btn-ghost-lg {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-700);
  text-decoration: none; padding: 14px 26px; border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,10,40,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .22s var(--ease-apple);
}
.btn-ghost-lg:hover { border-color: rgba(15,10,40,.22); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Hero 浮动展示卡（视差 + 悬浮） */
.hero-visual {
  position: relative; height: 560px;
  transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px), 0);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.hv-card {
  position: absolute; display: flex; flex-direction: column;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 24px 60px rgba(31,18,74,.16), 0 4px 14px rgba(31,18,74,.08);
  padding: 10px 10px 8px;
  animation: hv-float 7s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
.hv-img { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; }
.hv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-card figcaption {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 4px 4px;
  font-size: 11px; font-weight: 600; color: var(--ink-500);
}
.hv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.hv-main { width: 62%; height: 84%; right: 4%; top: 5%; z-index: 2; }
.hv-a { width: 34%; height: 38%; left: 0; top: 10%; z-index: 3; }
.hv-b { width: 30%; height: 56%; left: 7%; bottom: 2%; z-index: 1; }
.hv-c { width: 30%; height: 33%; right: 0; bottom: 7%; z-index: 3; }
@keyframes hv-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-14px,0); }
}
.hv-chip {
  position: absolute; z-index: 4;
  display: inline-flex; gap: 7px; align-items: center;
  font-size: 12px; font-weight: 700;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(20,16,38,.68); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-md);
}
.hv-chip.c1 { top: 1%; left: 7%; animation: hv-float 8s ease-in-out infinite .4s; }
.hv-chip.c2 { bottom: 3%; right: 1%; animation: hv-float 9s ease-in-out infinite 1.2s; }

/* ---------- ② 数据速览 ---------- */
.lp-stats {
  position: relative; z-index: 2;
  max-width: 1240px; margin: -46px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.stat {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 24px 22px;
  display: grid; gap: 5px;
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-apple);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat b {
  font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(135deg, #6d5efc, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat span { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }

/* ---------- 通用小节头 ---------- */
.sec-head {
  text-align: center; max-width: 660px;
  margin: 0 auto 54px;
  display: grid; gap: 14px; justify-items: center;
}
.sec-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .24em;
  color: #7c6ffe; text-transform: uppercase;
}
.sec-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.12;
  color: #141222;
}
.sec-head p { font-size: 15px; color: var(--ink-500); line-height: 1.7; }

/* ---------- ③ 痛点对比（暗色戏剧区） ---------- */
.lp-compare {
  position: relative; margin-top: 110px;
  padding: 100px 28px 116px;
  background: #0c0a16;
  overflow: hidden;
}
.lp-compare::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 20% 0%, rgba(124,90,250,.16), transparent 60%),
    radial-gradient(800px 420px at 85% 100%, rgba(236,72,153,.12), transparent 60%);
}
.lp-compare .sec-head { position: relative; }
.lp-compare .sec-head h2 { color: #fff; }
.lp-compare .sec-head p { color: rgba(255,255,255,.55); }
.lp-compare .sec-kicker { color: #a78bfa; }
.compare-grid {
  position: relative;
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: stretch;
}
.cmp-card {
  border-radius: 26px; padding: 32px 30px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cmp-card.old {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}
.cmp-card.new {
  background: linear-gradient(160deg, rgba(124,90,250,.20), rgba(236,72,153,.12));
  border: 1px solid rgba(167,139,250,.35);
  box-shadow: 0 24px 70px rgba(124,90,250,.25);
}
.cmp-tag {
  display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 6px 15px; border-radius: 999px; margin-bottom: 22px;
}
.old .cmp-tag { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.new .cmp-tag { background: linear-gradient(135deg, #6d5efc, #ec4899); color: #fff; }
.cmp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cmp-card li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.85);
}
.old li { color: rgba(255,255,255,.48); }
.cmp-ic {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; margin-top: 1px;
}
.old .cmp-ic { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }
.new .cmp-ic { background: rgba(52,199,89,.18); color: #4ade80; }
.vs-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: 15px; color: #fff;
  background: #171226;
  border: 1px solid rgba(167,139,250,.4);
  box-shadow: 0 0 0 9px rgba(12,10,22,.9), 0 12px 30px rgba(0,0,0,.4);
}

/* ---------- ④ 核心能力（3D 悬浮卡） ---------- */
.lp-caps { padding: 116px 28px 0; max-width: 1240px; margin: 0 auto; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1300px; }
.cap-card {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 28px 26px 26px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-md);
  cursor: pointer; font-family: inherit; text-align: left;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s ease-out, box-shadow .3s var(--ease-apple);
}
.cap-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(124,90,250,.14), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.cap-card:hover::before { opacity: 1; }
.cap-card:hover { box-shadow: 0 30px 70px rgba(31,18,74,.16); }
.cap-ic-lg {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, rgba(109,94,252,.14), rgba(236,72,153,.12));
  border: 1px solid rgba(124,90,250,.22);
  margin-bottom: 18px;
  transform: translateZ(34px);
}
.cap-ic-lg.cap-fb { display: none; }
.cap-thumb {
  margin: -28px -26px 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eceafb;
  transform: translateZ(10px);
}
.cap-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ease-spring, ease);
}
.cap-card:hover .cap-thumb img { transform: scale(1.05); }
.cap-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; transform: translateZ(26px); }
.cap-card p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-500); transform: translateZ(18px); }
.cap-go {
  margin-top: 16px; font-size: 12.5px; font-weight: 700; color: #6d5efc;
  display: inline-flex; align-items: center; gap: 5px;
  transform: translateZ(12px);
}
.cap-go i { font-style: normal; transition: transform .25s var(--ease-spring); }
.cap-card:hover .cap-go i { transform: translateX(4px); }

/* ---------- ⑤ 交互式演示 ---------- */
.lp-demo { padding: 116px 28px 0; max-width: 1240px; margin: 0 auto; }
.demo-wrap { display: grid; grid-template-columns: 400px 1fr; gap: 26px; align-items: stretch; }
.demo-panel {
  border-radius: 26px; padding: 28px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 22px; align-content: start;
}
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.demo-chip {
  border: 1.5px solid var(--line-2); background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-500);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: all .2s var(--ease-apple);
}
.demo-chip:hover { border-color: #b3a8fa; color: #4c3fd8; }
.demo-chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, #6d5efc, #a855f7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,90,250,.35);
}
.demo-dots { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 9px; }
.demo-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-sm);
  transition: transform .22s var(--ease-spring), box-shadow .2s var(--ease-apple);
}
.demo-dot:hover { transform: scale(1.12); }
.demo-dot.active { box-shadow: 0 0 0 2.5px #6d5efc; }
.demo-stage {
  position: relative; border-radius: 26px;
  background: linear-gradient(160deg, #141126, #221a3f);
  display: grid; place-items: center;
  padding: 36px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 480px;
}
.demo-stage::before {
  content: ""; position: absolute; inset: -42%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(124,90,250,.34), rgba(34,211,238,.16), rgba(236,72,153,.28), rgba(124,90,250,.34));
  filter: blur(72px);
  animation: demo-spin 16s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-frame {
  position: relative; width: min(100%, 430px); aspect-ratio: 4/5;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14);
  background: #f5f5f7;
}
.demo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s, filter .3s; }
.demo-frame.loading img { opacity: .35; filter: blur(4px) saturate(.7); }
.demo-frame.loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 1.1s infinite;
}
.demo-badge {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(20,16,38,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  padding: 5px 11px; border-radius: 999px;
}
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.6s infinite; }

/* ---------- ⑥ 案例画廊（瀑布流） ---------- */
.lp-gallery { padding: 116px 28px 0; max-width: 1240px; margin: 0 auto; }
.masonry { columns: 4 240px; column-gap: 18px; }
.gal-item {
  break-inside: avoid; margin: 0 0 18px;
  border-radius: 18px; overflow: hidden; position: relative;
  background: #fff;
  border: 1px solid rgba(15,10,40,.06);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-apple);
}
.gal-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gal-item img { width: 100%; display: block; transition: transform .7s var(--ease-apple); }
.gal-item:hover img { transform: scale(1.05); }
.gal-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 32px 14px 12px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(10,8,20,.62));
  opacity: 0; transition: opacity .3s var(--ease-apple);
}
.gal-item:hover figcaption { opacity: 1; }

/* ---------- ⑦ 工作流程 ---------- */
.lp-steps { padding: 120px 28px 0; max-width: 1240px; margin: 0 auto; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 30px 28px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-apple);
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.step-card::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,90,250,.12), transparent 70%);
}
.step-num {
  font-size: 64px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, #e7e3fd, #fce7f3);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step-card h3 { margin-top: 14px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.step-card p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.75; }

/* ---------- ⑧ 高转化 CTA ---------- */
.lp-cta {
  position: relative;
  margin: 120px 28px 110px;
  border-radius: 32px;
  padding: 92px 40px;
  text-align: center; overflow: hidden;
  background: linear-gradient(140deg, #181238, #2a1a5e 45%, #4a1d68);
  box-shadow: 0 40px 100px rgba(42,26,94,.35);
}
.lp-cta::before {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(167,139,250,.35), transparent 60%),
    radial-gradient(700px 320px at 80% 85%, rgba(236,72,153,.28), transparent 60%);
  animation: aurora-drift 24s ease-in-out infinite alternate;
}
.lp-cta h2 {
  position: relative;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 900; color: #fff; letter-spacing: -.03em;
}
.lp-cta p { position: relative; margin-top: 16px; color: rgba(255,255,255,.62); font-size: 15.5px; }
.lp-cta .btn-cta { position: relative; margin-top: 36px; }
.cta-note { position: relative; margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.4); }

/* ---------- 页脚 ---------- */
.lp-footer {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(15,10,40,.07);
  background: rgba(251,251,255,.6);
  padding: 28px; display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  font-size: 12px; color: var(--ink-400);
}

/* ---------- 滚动揭示动效 ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   工作台（SaaS 布局：左侧导航 + 右侧主区域）
   ============================================================ */
.topbar-inner { max-width: none; padding: 0 26px; }
.app-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
}
.sidebar {
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  padding: 16px 12px 14px;
  background: linear-gradient(180deg, rgba(247,246,253,.92), rgba(251,251,255,.66));
  border-right: 1px solid var(--line);
}
.side-scroll {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  margin: 0 -4px; padding: 0 4px 8px;
}
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(15,10,40,.12); border: 0; }
.side-group {
  font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-300);
  margin: 18px 10px 7px;
}
.side-group:first-child { margin-top: 4px; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-500);
  padding: 9px 12px; border-radius: 12px;
  text-align: left; position: relative;
  transition: background .2s var(--ease-apple), color .2s var(--ease-apple), transform .2s var(--ease-spring), box-shadow .2s var(--ease-apple);
}
.side-link .ic { font-size: 16px; width: 22px; text-align: center; flex: none; }
.side-link:hover { background: rgba(109,94,252,.08); color: var(--ink-900); transform: translateX(2px); }
.side-link.active {
  background: linear-gradient(135deg, #6d5efc, #8b5cf6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(109,94,252,.35);
}
.side-link.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 20px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #6d5efc, #a855f7);
}
.side-foot {
  border-top: 1px solid var(--line);
  padding: 13px 4px 0;
  display: grid; gap: 6px;
}
.side-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; }
.side-user .avatar { width: 34px; height: 34px; font-size: 13px; }
.side-user-name { font-size: 12.5px; font-weight: 700; }
.side-user-role { font-size: 10.5px; color: var(--ink-400); margin-top: 1px; }
#app.main { padding: 34px 36px 100px; }

/* 等级头衔徽章（用户名旁） */
.up-tier { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.up-tier.t-trial { background: #f1f2f6; color: #7f8c8d; }
.up-tier.t-personal { background: #e8f8ef; color: #27ae60; }
.up-tier.t-team { background: #e8f1fd; color: #2980ff; }
.up-tier.t-enterprise { background: linear-gradient(135deg, #fdf3e0, #fde9c8); color: #c87f0a; }
/* 2026-09-16 用户名下拉卡片（绘柚同款交互） */
.user-pop { position: fixed; top: 84px; right: 28px; width: 264px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(15,10,40,.14), 0 2px 8px rgba(15,10,40,.06); border: 1px solid rgba(15,10,40,.06); padding: 18px 16px 10px; z-index: 60; animation: upPop .18s var(--ease-apple); }
@keyframes upPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.user-pop.hidden { display: none; }
.up-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(15,10,40,.07); }
.up-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #6C5CE7, #a855f7); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.up-name { font-size: 15px; font-weight: 700; color: var(--ink-900, #1b1830); }
.up-phone { font-size: 12px; color: var(--ink-400, #8a8fa3); margin-top: 2px; }
.up-points { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; }
.up-pts-left { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.up-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd76e, #f5a623); display: inline-flex; align-items: center; justify-content: center; color: #b06d00; font-size: 10px; }
.up-recharge { background: #6C5CE7; color: #fff; border: none; border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.up-recharge:hover { background: #5a4bd1; }
.up-menu { display: flex; flex-direction: column; border-top: 1px solid rgba(15,10,40,.07); padding-top: 6px; }
.up-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; font-size: 14px; color: var(--ink-600, #3d3a55); text-decoration: none; background: none; border: none; cursor: pointer; border-radius: 8px; width: 100%; text-align: left; }
.up-item:hover { background: rgba(15,10,40,.04); color: var(--ink-900, #1b1830); }
.up-item svg { opacity: .6; }
.up-logout { color: #e74c3c; }
.up-logout:hover { background: #fdecea; color: #e74c3c; }
/* 2026-09-26 联系客服二维码弹窗 */
.cqr-mask { position: fixed; inset: 0; background: rgba(15,10,40,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: upPop .18s var(--ease-apple); }
.cqr-box { position: relative; background: #fff; border-radius: 16px; padding: 26px 26px 20px; width: 300px; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 20px 60px rgba(15,10,40,.25); }
.cqr-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px; color: #999; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cqr-x:hover { color: #333; }
.cqr-title { font-size: 16px; font-weight: 800; color: var(--ink-900, #1b1830); }
.cqr-qr { width: 240px; height: 240px; margin: 14px auto 0; background: #fafafa; border: 1px solid rgba(15,10,40,.08); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cqr-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cqr-placeholder { font-size: 12px; color: var(--ink-400, #8a8fa3); padding: 0 18px; line-height: 1.7; }
.cqr-tip { font-size: 13px; color: var(--ink-600, #3d3a55); margin-top: 12px; line-height: 1.6; }
/* 2026-09-16 v2：导航禁止折行；隐藏导航积分徽章腾空间；字号保持原版 15.5/15px 不动 */
.lp-nav-inner { flex-wrap: nowrap; }
.lp-links { flex-wrap: nowrap; }
.lp-links a, .lp-nav-actions, .lp-nav-actions .btn, #navUserChip, .nav-user { white-space: nowrap; }
#navUserPoints { display: none; }
@media (max-width: 1080px) {
  .lp-links { display: none; }
  .lp-hero { grid-template-columns: 1fr; padding-top: 26px; }
  .hero-visual { height: 470px; max-width: 580px; width: 100%; margin: 0 auto; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-wrap { grid-template-columns: 1fr; }
  .masonry { columns: 3 220px; }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  #app.main { padding: 22px 16px 96px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .lp-nav-inner { padding: 0 16px; height: 62px; }
  .lp-hero { padding: 24px 18px 70px; min-height: 0; }
  .hero-visual { height: 400px; }
  .hv-c { display: none; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); margin-top: -28px; gap: 10px; }
  .stat { padding: 18px 16px; }
  .lp-compare { padding: 72px 16px 84px; margin-top: 84px; }
  .compare-grid { grid-template-columns: 1fr; }
  .vs-badge { display: none; }
  .lp-caps, .lp-demo, .lp-gallery, .lp-steps { padding-left: 16px; padding-right: 16px; padding-top: 88px; }
  .cap-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2 140px; column-gap: 12px; }
  .gal-item { margin-bottom: 12px; border-radius: 14px; }
  .lp-cta { margin: 88px 16px 72px; padding: 64px 22px; border-radius: 24px; }
  .demo-stage { min-height: 0; padding: 18px; }
  .hero-scroll { display: none; }
  .lp-footer { flex-direction: column; text-align: center; justify-content: center; gap: 6px; }
}

/* ---------- 登录卡片关闭按钮 ---------- */
.login-card { position: relative; }
.login-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink-400);
  font-size: 13px; cursor: pointer; font-family: inherit;
  transition: all .25s var(--ease-apple);
}
.login-close:hover { color: var(--ink-900); background: #f5f5f7; transform: rotate(90deg); }

/* ===== ����������ԭ��CSS��������Tailwind�� ===== */
.hy-nav{position:fixed;top:0;left:0;right:0;height:72px;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.65);box-shadow:0 1px 0 rgba(59,130,246,.05),0 8px 24px -16px rgba(59,130,246,.14);font-size:16px}
.hy-nav-inner{max-width:100%;height:72px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;min-width:1280px;box-sizing:border-box}
.hy-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;margin-right:8px;cursor:pointer}
.hy-logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#6366f1);color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(37,99,235,.25)}
.hy-logo-text{font-size:21px;font-weight:900;color:#0f172a;letter-spacing:.5px;line-height:1.1;font-style:normal;display:flex;flex-direction:column}
.hy-logo-text i{font-style:normal;font-size:20px;font-weight:900;color:#0f172a}
.hy-logo-text em{font-style:normal;font-size:10px;font-weight:600;color:#94a3b8;letter-spacing:2.5px;text-transform:uppercase}
.hy-menu{flex:1;display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.hy-menu::-webkit-scrollbar{display:none}
/* 2026-09-16 右侧导航组（创意商拍+个人中心，靠右，与左侧菜单同款样式尺寸） */
.hy-menu-right{flex:0 0 auto;margin-left:auto;overflow:visible;gap:4px}
.hy-menu-right a{font-size:16px;padding:8px 14px;gap:7px}
.hy-menu a{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;color:#475569;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;transition:all .15s}
.hy-menu a:hover{color:#2563eb;background:rgba(59,130,246,.07)}
.hy-menu a.on{color:#2563eb;background:rgba(59,130,246,.1);font-weight:600}
.hy-nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hy-avatar{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid rgba(191,219,254,.6);border-radius:999px;background:linear-gradient(90deg,rgba(59,130,246,.08),rgba(99,102,241,.08));cursor:pointer;transition:background .15s}
.hy-avatar:hover{background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(99,102,241,.16))}
.hy-avatar-mark{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#6366f1);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.hy-avatar-name{font-size:14px;font-weight:500;color:#334155;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ���������������72px */
.hy-below-nav{padding-top:72px}
.hy-h-below-nav{height:calc(100vh - 72px)}

/* ============================================================
   �������²ο�ͼ�����9�ţ��Ա���֣� 2026-09-09
   ============================================================ */
#garmentThumbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:4px 0 6px}
.gt-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:visible;flex-shrink:0}
.gt-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1.5px solid #e5e7eb;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.gt-thumb img:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.25)}
.gt-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;pointer-events:auto}
.gt-del:hover{background:#ef4444}
.gt-badge{position:absolute;left:2px;bottom:2px;font-size:9px;line-height:1;padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.5);color:#fff;pointer-events:none}
.gt-badge-main{background:linear-gradient(135deg,#3b82f6,#2563eb);font-weight:700}
.gt-add{width:64px;height:64px;border-radius:8px;border:1.5px dashed #cbd5e1;background:#fafbfc;color:#94a3b8;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.gt-add:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}

/* ============================================================
   �����ڼ���ӻ�����UI���Ա���֣� 2026-09-09
   ============================================================ */
.studio-loading-body{display:flex;gap:20px;align-items:center;padding:8px 4px;flex-wrap:wrap}
.studio-loading-left{flex-shrink:0;max-width:340px}
.sl-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.sl-thumb{position:relative;width:56px;height:56px}
.sl-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1.5px solid #e5e7eb}
.sl-thumb .sl-anchor{position:absolute;left:2px;bottom:2px;font-size:8px;padding:2px 3px;border-radius:3px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-weight:700}
.sl-thumb .sl-idx{position:absolute;left:2px;bottom:2px;font-size:8px;padding:2px 3px;border-radius:3px;background:rgba(0,0,0,.5);color:#fff}
.sl-thumb.sl-empty{display:flex;align-items:center;justify-content:center;font-size:11px;color:#9ca3af;border:1.5px dashed #e5e7eb;border-radius:8px}
.studio-loading-right{flex:1;min-width:220px}
.sl-spinner-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sl-spinner{width:26px;height:26px;border-radius:999px;border:3px solid #dbeafe;border-top-color:#2563eb;animation:sl-spin 0.9s linear infinite;flex-shrink:0}
.sl-spinner-error{border-color:#fecaca;border-top-color:#ef4444;animation:none}
@keyframes sl-spin{to{transform:rotate(360deg)}}
.sl-percent{font-size:22px;font-weight:700;color:#2563eb;font-variant-numeric:tabular-nums}
.sl-percent-error{color:#ef4444}
.sl-bar{height:8px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-bottom:8px}
.sl-bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#2563eb);transition:width .25s ease}
.sl-bar-error{background:linear-gradient(90deg,#ef4444,#dc2626)!important}
.sl-phase{font-size:13px;color:#4b5563;font-weight:500;margin-bottom:2px}
.sl-phase-error{color:#ef4444}
.sl-count{font-size:11px;color:#9ca3af}
.sl-error{margin-top:10px;padding:8px 12px;border-radius:8px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12px;line-height:1.6;word-break:break-all}
.sl-actions{margin-top:10px;display:flex;gap:8px}
.sl-retry-btn{padding:6px 16px;border-radius:8px;border:1px solid #fca5a5;background:#fff;color:#dc2626;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.sl-retry-btn:hover{background:#fef2f2;border-color:#ef4444}


/* ===== 快捷提示词模态面板 ===== */
.hy-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
.hy-modal-overlay.show { display: flex; }
.hy-modal {
  width: min(680px, 94vw); max-height: 70vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  animation: hyPop .18s ease;
}
@keyframes hyPop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.hy-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #f1f5f9;
}
.hy-modal-title { font-size: 15px; font-weight: 700; color: #1f2937; }
.hy-close {
  border: none; background: #f3f4f6; color: #6b7280;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 16px; line-height: 1; cursor: pointer; transition: all .15s;
}
.hy-close:hover { background: #e5e7eb; color: #111827; }
.hy-tabs { display: flex; gap: 4px; padding: 10px 18px 0; }
.hy-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 10px 10px 0 0;
  font-size: 13px; font-weight: 600; color: #6b7280;
}
.hy-tab.active { background: #eff6ff; color: #2563eb; }
.hy-modal-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }
.hy-tip {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
  font-size: 12px; line-height: 1.7; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.hy-cat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hy-cat-tab {
  border: 1.5px solid #e5e7eb; background: #fff; color: #4b5563;
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.hy-cat-tab:hover { border-color: #93c5fd; color: #2563eb; }
.hy-cat-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235));
}
.hy-list, .hy-group { display: flex; flex-direction: column; gap: 8px; }
.hy-group-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: #374151; margin: 4px 0 2px;
}
.hy-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 9px 12px;
  background: #fff; transition: border-color .15s;
}
.hy-item:hover { border-color: #bfdbfe; }
.hy-item-text { flex: 1; font-size: 12.5px; line-height: 1.65; color: #374151; word-break: break-all; }
.hy-insert-btn {
  flex-shrink: 0; border: 1.5px solid #bfdbfe; background: #eff6ff; color: #2563eb;
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.hy-insert-btn:hover { background: #dbeafe; }
.hy-item-ops { flex-shrink: 0; display: flex; gap: 4px; }
.hy-op {
  border: none; background: #f3f4f6; border-radius: 6px; padding: 4px 7px;
  font-size: 12px; cursor: pointer; color: #6b7280; transition: all .15s;
}
.hy-op:hover { background: #e5e7eb; color: #111827; }
.hy-add-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hy-add-tag, .hy-add-text {
  border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 8px 12px;
  font-size: 12.5px; outline: none; transition: border-color .15s;
}
.hy-add-tag { width: 130px; }
.hy-add-text { flex: 1; min-width: 180px; }
.hy-add-tag:focus, .hy-add-text:focus { border-color: #60a5fa; }
.hy-add-btn {
  border: none; border-radius: 10px; padding: 8px 18px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235));
}
.hy-empty { font-size: 12.5px; color: #9ca3af; text-align: center; padding: 18px 0; }

/* ============================================================
   ���������Ƭ�� + ��Ʒ���鵯����2026-09-09 �Ա���ָ��죩
   ============================================================ */
.studio-task-card { margin-bottom: 14px; }
.stc-head { padding-right: 30px; }
.stc-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid #e5e7eb;
  background: #fff; color: #c4c9d4; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s;
}
.stc-fav:hover { color: #f59e0b; border-color: #fcd34d; }
.stc-fav.on { color: #f59e0b; background: #fffbeb; border-color: #fcd34d; }
.stc-thumb { position: relative; }
.stc-thumb-box { width: 140px; height: 180px; }
.stc-thumb:hover .stc-thumb-box { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(59,130,246,.12); }
.stc-badge {
  position: absolute; top: 6px; left: 6px; padding: 1px 6px;
  color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px;
  line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.stc-badge-orig { background: #6366f1; }
.stc-badge-ref  { background: #6b7280; }
.stc-badge-work { background: #22c55e; }
.stc-progress { width: 240px; min-width: 200px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 4px 6px; border-left: 1px dashed #e5e7eb; }
.stc-progress.hidden { display: none; }

/* ---- ��Ʒ���鵯�� ---- */
.wd-mask {
  position: fixed; inset: 0; z-index: 1200; background: rgba(10,12,20,.78);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(3px);
}
.wd-modal {
  position: relative; background: #fff; border-radius: 10px;
  width: min(calc(100vw - 48px), 1600px); height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,.45);
  animation: wdIn .2s ease-out;
}
@keyframes wdIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.wd-close {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: 14px; cursor: pointer; line-height: 1;
}
.wd-close:hover { color: #111827; background: #f3f4f6; }
.wd-body { flex: 1; display: flex; gap: 16px; min-height: 0; padding: 18px 20px; overflow: hidden; }
.wd-view { flex: 1; display: flex; gap: 16px; min-width: 0; min-height: 0; }
.wd-pane { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; border: 1px solid #e7eaf0; border-radius: 12px; padding: 10px 10px 8px; background: #fafbfc; }
.wd-pane-title { font-size: 12.5px; font-weight: 700; color: #475569; margin-bottom: 8px; flex-shrink: 0; }
.wd-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: repeating-conic-gradient(#f1f3f6 0 25%, #fff 0 50%) 50%/16px 16px; }
.wd-img-wrap img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .16s ease-out; will-change: transform; }
.wd-zoom { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-shrink: 0; }
.wd-zoom button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #dfe3ea; background: #fff;
  color: #475569; font-size: 14px; cursor: pointer; line-height: 1;
}
.wd-zoom button:hover { border-color: #93c5fd; color: #2563eb; }
.wd-side { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0; }
.wd-actions { display: flex; flex-direction: column; gap: 8px; }
.wd-actions .btn { white-space: nowrap; width: 100%; }
.wd-meta { border-top: 1px solid #eef0f4; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wd-meta-row { font-size: 12px; color: #64748b; display: flex; gap: 6px; min-width: 0; flex-wrap: wrap; }
.wd-meta-row span { color: #94a3b8; flex-shrink: 0; }
.wd-meta-row b { font-weight: 600; color: #334155; word-break: break-all; }
.wd-meta-prompt { display: block; }
.wd-copy {
  margin-left: auto; font-size: 11px; padding: 2px 10px; border-radius: 6px;
  border: 1px solid #dfe3ea; background: #fff; color: #475569; cursor: pointer;
}
.wd-copy:hover { border-color: #93c5fd; color: #2563eb; }
.wd-prompt-text { margin-top: 3px; color: #334155; line-height: 1.6; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
/* 单图全屏查看（点击图片切换） */
.wd-modal.wd-solo .wd-pane:not(.is-solo) { display: none; }
.wd-modal.wd-solo .wd-pane.is-solo { flex: 1 1 100%; }
.wd-modal.wd-solo .wd-img-wrap img { cursor: zoom-out; }
/* 窄屏降级：图区上、操作横排下 */
@media (max-width: 1100px) {
  .wd-modal { width: calc(100vw - 24px); height: calc(100vh - 24px); }
  .wd-body { flex-direction: column; overflow: auto; }
  .wd-view { flex-direction: column; }
  .wd-pane { flex: 1 1 auto; }
  .wd-img-wrap { min-height: 300px; flex: 1 1 auto; }
  .wd-side { width: auto; overflow: visible; }
  .wd-actions { flex-direction: row; flex-wrap: wrap; }
  .wd-actions .btn { width: auto; flex: 1 1 auto; }
}

/* ============ 从历史获取图片 双tab选择弹窗（对标绘柚） ============ */
.hp-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
.hp-overlay.show { display: flex; }
.hp-modal {
  width: min(720px, 94vw); max-height: 78vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  animation: hyPop .18s ease;
}
.hp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #f1f5f9;
}
.hp-title { font-size: 15px; font-weight: 700; color: #1f2937; }
.hp-close {
  border: none; background: #f3f4f6; color: #6b7280;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 16px; line-height: 1; cursor: pointer; transition: all .15s;
}
.hp-close:hover { background: #e5e7eb; color: #111827; }
.hp-tabs { display: flex; gap: 4px; padding: 10px 18px 0; }
.hp-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 10px 10px 0 0;
  font-size: 13px; font-weight: 600; color: #6b7280;
}
.hp-tab.active { background: #eff6ff; color: #2563eb; }
.hp-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px 0; font-size: 12px; color: #2563eb; font-weight: 600;
}
.hp-body { flex: 1; overflow-y: auto; padding: 14px 18px 6px; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.hp-cell {
  position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden;
  border: 2px solid #e5e7eb; background: #f9fafb; cursor: pointer; transition: all .15s;
}
.hp-cell:hover { border-color: #93c5fd; }
.hp-cell.sel { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.hp-cell.hp-full { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.hp-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-check {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  border-radius: 6px; border: 1.5px solid #fff; background: rgba(255,255,255,.75);
  color: transparent; font-size: 13px; line-height: 17px; text-align: center; font-weight: 700;
}
.hp-cell.sel .hp-check { background: #2563eb; border-color: #2563eb; color: #fff; }
.hp-fav {
  position: absolute; top: 6px; right: 6px; font-size: 14px; color: #f59e0b;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none;
}
.hp-time {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff; font-size: 10px; padding: 12px 6px 4px; text-align: center; pointer-events: none;
}
.hp-ribbon-tip {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(37,99,235,.92); color: #fff; font-size: 10px; white-space: nowrap;
  border-radius: 999px; padding: 2px 8px; pointer-events: none;
}
.hp-empty {
  text-align: center; color: #9ca3af; font-size: 13px; line-height: 2;
  padding: 48px 12px;
}
.hp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px; border-top: 1px solid #f1f5f9;
}
.hp-foot-hint { font-size: 12px; color: #9ca3af; }
.hp-foot-btns { display: flex; gap: 8px; }
.hp-btn-ghost, .hp-btn-primary {
  border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; transition: all .15s;
}
.hp-btn-ghost { border: 1px solid #e5e7eb; background: #fff; color: #6b7280; }
.hp-btn-ghost:hover { background: #f3f4f6; }
.hp-btn-primary { border: none; background: #2563eb; color: #fff; }
.hp-btn-primary:hover { background: #1d4ed8; }
.hp-shake { animation: hpShake .3s; }
@keyframes hpShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ===== 京宏AI brand logos (2026-09-09) ===== */
.lp-brand .brand-logo-img{width:52px;height:52px}
.brand-logo-img{width:64px;height:64px;object-fit:contain;border-radius:16px;display:block}
.login-brand .brand-logo-img{width:46px;height:46px}
.hy-logo-img{width:46px;height:46px;border-radius:12px;object-fit:cover;display:block;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.hy-logo-text{font-size:21px;font-weight:600;color:#0f172a;letter-spacing:.5px;line-height:1.1;font-style:normal}

/* ==== ģ�ؿ���� 2026-09-09���������� + ģ�ؿⵯ�� ==== */
.studio-model-select {
  appearance: none; -webkit-appearance: none;
  padding: 6px 26px 6px 10px;
  font-size: 12px; font-weight: 500; color: #374151;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s;
}
.studio-model-select:hover { border-color: #93c5fd; }
.studio-model-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

.mlb-mask { position: fixed; inset: 0; z-index: 1200; background: rgba(17,24,39,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mlb-panel { width: 680px; max-width: 96vw; max-height: 88vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.mlb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid #f3f4f6; position: sticky; top: 0; background: #fff; z-index: 1; }
.mlb-title { font-size: 15px; font-weight: 700; color: #111827; }
.mlb-close { border: none; background: #f3f4f6; color: #6b7280; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.mlb-close:hover { background: #e5e7eb; color: #111827; }
.mlb-body { padding: 12px 18px 18px; }
.mlb-sec-title { font-size: 12px; font-weight: 700; color: #374151; margin: 8px 0 8px; }
.mlb-sec-title.mt { margin-top: 16px; }
.mlb-sub { font-size: 11px; font-weight: 400; color: #9ca3af; margin-left: 6px; }
.mlb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mlb-card { position: relative; border: 2px solid #eef0f3; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mlb-card:hover { border-color: #93c5fd; transform: translateY(-1px); }
.mlb-card.on { border-color: #3b82f6; box-shadow: 0 4px 14px rgba(59,130,246,.22); }
/* 悬停大图预览 */
.mlb-preview { display: none; position: fixed; z-index: 2000; width: 340px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 12px 36px rgba(15,23,42,.18); border: 1px solid #e5e7eb; pointer-events: none; }
.mlb-preview-img { width: 320px; height: 420px; object-fit: cover; object-position: top; border-radius: 12px; display: block; background: #f1f5f9; }
.mlb-preview-name { font-size: 13px; font-weight: 700; color: #0f172a; margin-top: 6px; text-align: center; }
.mlb-preview-sub { font-size: 11px; color: #64748b; text-align: center; }
.mlb-thumb { position: relative; aspect-ratio: 3/4; background: #f3f4f6; }
.mlb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlb-thumb.mlb-missing img { display: none; }
.mlb-shape-tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(17,24,39,.55); color: #fff; backdrop-filter: blur(2px); }
.mlb-name { font-size: 11px; color: #374151; padding: 6px 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-check { color: #2563eb; }
.mlb-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(17,24,39,.5); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.mlb-del:hover { background: #ef4444; }
.mlb-empty { grid-column: 1/-1; font-size: 12px; color: #9ca3af; padding: 14px; text-align: center; background: #f9fafb; border-radius: 10px; }
.mlb-aiform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mlb-gen-btn { padding: 7px 14px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235)); border: none; border-radius: 8px; cursor: pointer; transition: opacity .15s; }
.mlb-gen-btn:hover { opacity: .92; }
.mlb-gen-btn:disabled { opacity: .55; cursor: default; }
.mlb-hint { margin-top: 8px; font-size: 11px; color: #9ca3af; }

/* ��Ʒ���飺����Ʒ����ͼ�л��� */
.wd-thumbs { display: flex; gap: 8px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: thin; flex-shrink: 0; }
.wd-thumbs img { width: 60px; height: 76px; object-fit: cover; border-radius: 8px; border: 2px solid #e2e8f0; cursor: pointer; opacity: .75; transition: all .15s; flex-shrink: 0; }
.wd-thumbs img:hover { opacity: 1; transform: translateY(-1px); }
.wd-thumbs img.on { border-color: #3b82f6; opacity: 1; box-shadow: 0 3px 10px rgba(59,130,246,.3); }

/* ģ�ؿ������ѡ����Ϣ + ȷ����ť */
.mlb-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid #eef0f3; background: #fafbfc; border-radius: 0 0 16px 16px; }
.mlb-selinfo { font-size: 13px; color: #475569; }
.mlb-selinfo b { color: #2563eb; font-weight: 700; }
.mlb-ok-btn { padding: 9px 26px; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.mlb-ok-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.35); }

/* ===== 双模式（轻松/专业）· 2026-09-09 ===== */
#customPromptInput.easy-prompt-hero { font-size: 16px; line-height: 1.75; min-height: 230px; }
#proModeToggle.pro-on { background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235)); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(37,99,235,.25); }
#proAdvancedArea.hidden { display: none; }
.easy-tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.easy-tier-cards.hidden { display: none; }
.easy-tier-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; transition: all .15s; text-align: center; }
.easy-tier-card:hover { border-color: #93c5fd; transform: translateY(-1px); }
.easy-tier-card.on { border-color: transparent; color: #fff; background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235)); box-shadow: 0 4px 10px rgba(37,99,235,.25); }
.easy-tier-card .et-name { font-size: 13px; font-weight: 700; }
.easy-tier-card .et-desc { font-size: 10.5px; opacity: .78; line-height: 1.4; }
.easy-tier-card .et-cost { font-size: 10px; opacity: .65; margin-top: 2px; }

/* רҵ/����ģʽ���أ����ư棺��������� */
#proModeToggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; font-size: 13px; font-weight: 700; border-radius: 999px; border: 1.5px solid #bfdbfe; background: #eff6ff; color: #2563eb; cursor: pointer; line-height: 1; box-shadow: none; transition: all .18s; }
#proModeToggle:hover { border-color: #60a5fa; background: #dbeafe; }
#proModeToggle .pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
#proModeToggle.pro-on { background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; border-color: transparent; }
#proModeToggle.pro-on .pm-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
#proModeToggle .pro-mode-label { letter-spacing: .02em; }

/* ģʽ�ֶ�ѡ����������/רҵ˫ѡ� */
#proModeToggle.pm-seg { display: inline-flex; align-items: stretch; gap: 0; padding: 0; border: 1.5px solid #bfdbfe; background: #eff6ff; border-radius: 999px; overflow: hidden; cursor: default; box-shadow: none; }
#proModeToggle.pm-seg .pm-opt { padding: 6px 14px; font-size: 13px; font-weight: 700; line-height: 1; color: #2563eb; background: transparent; border: none; cursor: pointer; transition: all .18s; white-space: nowrap; }
#proModeToggle.pm-seg .pm-opt + .pm-opt { border-left: 1.5px solid #bfdbfe; }
#proModeToggle.pm-seg .pm-opt:hover { background: #dbeafe; }
#proModeToggle.pm-seg .pm-cur { background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; }
#proModeToggle.pm-seg .pm-cur:hover { background: linear-gradient(135deg,#3b82f6,#2563eb); }

/* ��������ռλ�����Ա���ֶ�ͼͬʱ���ɣ� */
.stc-work-slot { width: 132px; height: 170px; border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; position: relative; }
.stc-work-slot .swl-spin { width: 22px; height: 22px; border: 2.5px solid #dbeafe; border-top-color: #3b82f6; border-radius: 50%; animation: swlRot 0.9s linear infinite; }
@keyframes swlRot { to { transform: rotate(360deg); } }
.stc-work-slot .swl-pct { font-size: 12px; font-weight: 700; color: #2563eb; }
.stc-work-slot .swl-bar { width: 100%; height: 4px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.stc-work-slot .swl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#3b82f6,#2563eb); border-radius: 99px; transition: width .25s; }
.stc-work-slot .swl-phase { font-size: 10.5px; color: #64748b; text-align: center; line-height: 1.3; }
.stc-work-slot.swl-fail { border-color: #fca5a5; background: #fef2f2; }
.stc-work-slot .swl-err { font-size: 11.5px; color: #dc2626; text-align: center; line-height: 1.5; font-weight: 600; }

/* ===== AI详情页区块画布 ===== */
.dp-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.dp-block > header { margin-bottom: 10px; font-size: 14px; }
.dp-prompt { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; font-size: 12.5px; line-height: 1.5; resize: vertical; font-family: inherit; background: #fafafa; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; }
.dp-grid:not(:empty) + * , .dp-block .stc-work-slot {  }
.dp-block .stc-work-slot { aspect-ratio: 3 / 4; }
.dp-shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; cursor: pointer; aspect-ratio: 3 / 4; background: #f3f4f6; }
.dp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-shot-rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 9999px; background: rgba(17,24,39,.75); color: #fff; font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; }
.dp-shot:hover .dp-shot-rm { display: inline-flex; }
.dp-size-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.dp-size-table th { text-align: left; font-size: 12px; color: #6b7280; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.dp-size-table td { padding: 4px 6px; }


/* =============== 个人中心（用户后台 v2，对标绘柚） =============== */
.ac-page{max-width:1200px;margin:0 auto;padding:96px 28px 60px;background:transparent}
.ac-headcard{display:flex;align-items:center;gap:28px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:28px 32px;margin-bottom:24px;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.ac-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ac-avatar-sm{width:44px;height:44px;font-size:18px}
.ac-head-info{flex:1;min-width:0}
.ac-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ac-name{font-size:28px;font-weight:700;color:#101828;margin:0}
.ac-role{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:5px 12px;border-radius:999px;background:#faf5ff;color:#a855f7;border:1px solid #f0e2ff}
.ac-role svg{width:15px;height:15px}
/* 2026-09-16 等级头衔配色（个人中心头卡） */
.ac-role-trial{background:#f1f2f6;color:#7f8c8d;border-color:#e3e6ea}
.ac-role-personal{background:#e8f8ef;color:#27ae60;border-color:#cdeedd}
.ac-role-team{background:#e8f1fd;color:#2980ff;border-color:#cde2fc}
.ac-role-enterprise{background:linear-gradient(135deg,#fdf3e0,#fde9c8);color:#c87f0a;border-color:#f3ddb0}
.ac-phone{display:flex;align-items:center;gap:8px;color:#98a2b3;font-size:15px;margin:8px 0 0}
.ac-phone svg{width:16px;height:16px}
.ac-head-div{width:1px;height:64px;background:#eef1f5;flex-shrink:0}
.ac-balance{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ac-balance>span:first-child{font-size:56px;font-weight:700;color:#101828;line-height:1}
.ac-balance-unit{font-size:16px;color:#98a2b3}
.ac-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.ac-tabs{display:flex;border-bottom:1px solid #e4e7ec;padding:0 16px}
.ac-tab{display:flex;align-items:center;gap:9px;padding:0 28px;height:58px;font-size:16px;color:#667085;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s}
.ac-tab svg{width:17px;height:17px}
.ac-tab:hover{color:#344054}
.ac-tab.on{color:#3478f6;border-bottom-color:#3478f6}
.ac-panel{padding:20px 24px 24px}
.ac-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f8fafc;border:1px solid #eef1f5;border-radius:12px;padding:16px}
.ac-sel{height:38px;padding:0 14px;border:1px solid #d8dee8;border-radius:8px;font-size:14px;color:#344054;background:#fff;cursor:pointer;outline:none}
.ac-daterange{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #d8dee8;border-radius:8px;background:#fff;color:#98a2b3}
.ac-daterange svg{width:16px;height:16px;flex-shrink:0}
.ac-daterange input{border:none;outline:none;font-size:14px;color:#344054;background:transparent;width:118px}
.ac-btn-primary{height:38px;padding:0 20px;font-size:14px;font-weight:500;color:#fff;background:#3478f6;border:none;border-radius:8px;cursor:pointer;transition:background .15s}
.ac-btn-primary:hover{background:#2868d8}
.ac-btn-ghost{height:38px;padding:0 20px;font-size:14px;color:#667085;background:#fff;border:1px solid #e4e7ec;border-radius:8px;cursor:pointer}
.ac-btn-ghost:hover{color:#344054}
.ac-filter-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ac-consumed{font-size:13px;color:#667085}
.ac-consumed b{color:#f79009;font-weight:600}
.ac-btn-export{display:flex;align-items:center;gap:7px;height:38px;padding:0 18px;font-size:13px;font-weight:500;color:#3478f6;background:#eff6ff;border:1px solid #dbeafe;border-radius:8px;cursor:pointer}
.ac-btn-export svg{width:15px;height:15px}
.ac-btn-export:hover{background:#dbeafe}
.ac-note{display:flex;align-items:center;gap:7px;font-size:13px;color:#98a2b3;margin:16px 2px}
.ac-note svg{width:14px;height:14px;flex-shrink:0}
.ac-tablewrap{border:1px solid #e4e7ec;border-radius:12px;overflow:hidden}
.ac-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ac-table th{height:56px;background:#f8fafc;font-size:14px;font-weight:500;color:#98a2b3;text-align:left;padding:0 24px}
.ac-table th.ta-r,.ac-table td.ta-r{text-align:right}
.ac-table td{padding:0 24px;height:64px;border-top:1px solid #f0f2f5;font-size:15px;color:#344054}
.ac-table tr:hover td{background:#f8fafc}
.ac-desc{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-time{font-size:14px;color:#98a2b3;white-space:nowrap}
.ac-account{font-size:14px;color:#667085}
.ac-type{display:inline-block;font-size:13px;padding:5px 14px;border-radius:999px;font-weight:500}
.ac-type-consume{background:#fff7ed;color:#f79009}
.ac-type-recharge{background:#ecfdf3;color:#12b76a}
.ac-type-refund{background:#eff6ff;color:#3478f6}
.ac-delta{font-size:24px;font-weight:600;color:#101828}
.ac-delta-pos{color:#12b76a}
.ac-bal{font-size:14px;color:#98a2b3}
.ac-pager{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.ac-pager-total{font-size:14px;color:#98a2b3}
.ac-pager-btns{display:flex;align-items:center;gap:12px}
.ac-pager-btns button{height:38px;padding:0 18px;font-size:14px;color:#667085;background:#fff;border:1px solid #e4e7ec;border-radius:8px;cursor:pointer}
.ac-pager-btns button:hover:not(:disabled){color:#3478f6;border-color:#dbeafe}
.ac-pager-btns button:disabled{opacity:.4;cursor:not-allowed}
.ac-pager-btns span{font-size:14px;color:#667085;padding:0 6px}
.ac-empty{text-align:center;padding:70px 0;color:#98a2b3}
.ac-empty p{font-size:16px;color:#667085;margin:16px 0 4px}
.ac-empty small{font-size:13px}
.ac-settings{max-width:460px;margin:0 auto;padding:20px 0}
.ac-set-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border:1px solid #eef1f5;border-radius:12px;margin-bottom:14px}
.ac-set-row b{font-size:15px;color:#101828;font-weight:500}
.ac-set-row small{display:block;font-size:12px;color:#98a2b3;margin-top:3px}
.ac-input{height:36px;padding:0 12px;border:1px solid #d8dee8;border-radius:8px;font-size:14px;outline:none;width:180px}
.ac-input:focus{border-color:#3478f6}
.ac-set-val{font-size:15px;font-weight:600;color:#101828}
@media (max-width:900px){.ac-head-div,.ac-balance{display:none}.ac-page{padding:16px 14px 60px}.ac-table th:nth-child(3),.ac-table td:nth-child(3){display:none}}


/* ---- 个人中心：我的订单 + 账号设置 ---- */
.ac-ord-table td{height:56px;font-size:14px}
.ac-ord-goods{display:flex;align-items:center;gap:10px;font-size:14px;color:#4b5563}
.ac-ord-ico{width:28px;height:28px;border-radius:7px;background:#eff7ff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ac-ord-ico svg{width:16px;height:16px;color:#68b4ea}
.ac-ord-no{font-size:12px;color:#9aa3af}
.ac-ord-time{font-size:12px;color:#9aa3af}
.ac-ord-amt{font-size:13px;color:#202936;font-weight:500}
.ac-ord-status{display:inline-block;font-size:12px;padding:4px 9px;border-radius:999px;background:#ecfdf3;color:#20a05a}
.ac-set-wrap{max-width:768px;padding:4px 0}
.ac-info-card{border:1px solid #dfe3e8;border-radius:12px;overflow:hidden;margin-bottom:22px}
.ac-info-head{height:60px;display:flex;align-items:center;padding:0 24px;font-size:16px;color:#344054;border-bottom:1px solid #eef0f3}
.ac-info-row{display:grid;grid-template-columns:112px 1fr;align-items:center;min-height:64px;padding:0 24px;border-bottom:1px solid #f1f3f5}
.ac-info-last{border-bottom:none}
.ac-info-label{font-size:16px;color:#98a2b3}
.ac-info-value{font-size:16px;color:#4b5565;display:flex;align-items:center;gap:14px}
.ac-icon-btn{border:none;background:none;padding:4px;cursor:pointer;color:#98a2b3;display:flex}
.ac-icon-btn:hover{color:#3478f6}
.ac-icon-btn svg{width:16px;height:16px}
.ac-id-badge{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid #d7e8ff;border-radius:999px;background:#eff6ff;color:#3478e5;font-size:14px}
.ac-id-badge svg{width:16px;height:16px}
.ac-mono{font-family:Consolas,Monaco,monospace;font-weight:600;color:#98a2b3;font-size:14px}
.ac-sec-row{min-height:90px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.ac-sec-row b{font-size:16px;font-weight:500;color:#344054}
.ac-sec-row small{display:block;font-size:14px;color:#98a2b3;margin-top:5px}
.ac-text-btn{border:0;background:transparent;color:#3478e5;font-size:14px;cursor:pointer}
.ac-text-btn:hover{text-decoration:underline}

/* ---- 首页demo区补全 ---- */
.demo-dots { align-items: center; }
.demo-sel-label { font-size: 13px; font-weight: 700; color: #4c3fd8; margin-left: 6px; padding: 4px 10px; background: #f1eaff; border-radius: 999px; }
#demoScenes { max-width: 100%; }
#demoScenes .demo-chip, #demoModels .demo-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- AI视频页 ---- */
.vp-label{font-size:13px;font-weight:700;color:#374151;margin-bottom:8px}
.vp-drop{border:1.5px dashed #d1d5db;border-radius:12px;padding:22px 12px;text-align:center;cursor:pointer;transition:all .2s}
.vp-drop:hover{border-color:#93c5fd;background:#f8faff}
.vp-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vp-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}
.vp-thumb img{width:100%;height:100%;object-fit:cover}
.vp-thumb button{position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;cursor:pointer}
.vp-input{width:100%;border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:13px;resize:vertical;font-family:inherit}
.vp-input:focus{outline:none;border-color:#60a5fa}
.vp-chips{display:flex;gap:8px;flex-wrap:wrap}
.vp-chip{border:1.5px solid #e5e7eb;background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#4b5563;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.vp-chip small{font-weight:500;color:#9ca3af;font-size:10.5px}
.vp-chip.on{border-color:#2563eb;color:#1d4ed8;background:#eff6ff}
.vp-chip.on small{color:#3b82f6}
.vp-seg{display:flex;border:1.5px solid #e5e7eb;border-radius:10px;overflow:hidden}
.vp-seg button{flex:1;padding:9px 0;background:#fff;border:none;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .15s}
.vp-seg button.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.vp-run{width:100%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:12px;padding:13px 0;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.vp-run:hover{filter:brightness(1.06)}
.vp-run:disabled{opacity:.6;cursor:not-allowed}
.vp-cost{background:#fff;color:#2563eb;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px}
.vtf-grid{display:flex;flex-direction:column;gap:14px}
.vt-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.vt-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#9ca3af}
.vt-mode{color:#2563eb;font-weight:700}
.vt-body{display:flex;gap:14px;margin-top:12px;align-items:flex-start;flex-wrap:wrap}
.vt-video{width:220px;border-radius:10px;overflow:hidden;position:relative;background:#111;flex-shrink:0}
.vt-video img{width:100%;display:block;opacity:.82;max-height:340px;object-fit:cover}
.vt-video video{width:100%;height:auto;max-height:340px;display:block;object-fit:contain;background:#000}
.vt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vt-play span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:16px;color:#1f2937}
.vt-info{flex:1;min-width:200px}
.vt-info .p{font-size:13px;color:#374151;line-height:1.6;word-break:break-all}
.vt-info .t{font-size:12px;color:#9ca3af;margin-top:8px}
.vt-bar{height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-top:14px}
.vt-bar div{height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);transition:width .4s}
.vt-actions{display:flex;gap:8px;margin-top:12px}
.vt-actions button{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:5px 12px;font-size:12px;color:#4b5563;cursor:pointer}
.vt-actions button:hover{border-color:#93c5fd;color:#1d4ed8}

/* ---- AI视频页 v2（步骤卡片式，绘柚同款）---- */
#videoPanel {}
aside .vp-step{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:6px;background:#eff6ff;color:#3b82f6;font-size:12px;font-weight:800;border:1px solid #bfdbfe;flex-shrink:0}
.vp-teach{display:flex;align-items:center;gap:4px;margin-left:auto;padding:2px 8px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;cursor:pointer;transition:all .2s;flex-shrink:0}
.vp-teach:hover{background:#dbeafe;border-color:#93c5fd}
#videoTplRow button{border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 4px;font-size:12.5px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .15s}
#videoTplRow button:hover{border-color:#93c5fd;color:#1d4ed8;background:#f8faff}
.vp-model-btn{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .15s;text-align:left}
.vp-model-btn:hover{border-color:#93c5fd}
.vp-model-btn .row1{display:flex;align-items:center;justify-content:space-between}
.vp-model-btn .nm{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#1f2937}
.vp-model-btn .nm svg{color:#2563eb}
.vp-model-btn .pr{font-size:12px;color:#9ca3af}
.vp-model-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:40;overflow:hidden}
.vp-model-menu button{display:block;width:100%;padding:10px 12px;background:#fff;border:none;text-align:left;cursor:pointer;font-size:13px}
.vp-model-menu button:hover{background:#f0f7ff}
.vp-model-menu button.on{background:#eff6ff;font-weight:700;color:#1d4ed8}
.vp-seg-sm button{padding:6px 0;font-size:12.5px}
.vp-toggle{position:relative;width:44px;height:24px;border-radius:999px;background:#e5e7eb;border:none;cursor:pointer;transition:background .2s}
.vp-toggle span{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.vp-toggle.on{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.vp-toggle.on span{transform:translateX(20px)}

/* ---- 导航 v2（绘柚同款视觉）---- */
.hy-menu{gap:4px}
.hy-menu a{font-size:16px;padding:8px 14px;gap:7px;color:#475569}
.hy-menu a:hover{color:#2563eb;background:rgba(59,130,246,.09)}
.hy-menu a.on{color:#2563eb;background:rgba(59,130,246,.12);font-weight:600}
.hy-nav-ico{width:17px;height:17px;flex-shrink:0;position:relative;z-index:10;transition:transform .2s}
.hy-menu a:hover .hy-nav-ico{transform:rotate(-45deg)}

/* ---- 电商专用左栏 v2 ---- */
.dp-select{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;background:#fff;color:#374151;outline:none;transition:border-color .15s}
.dp-select:focus{border-color:#60a5fa}
.dp-upbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px dashed #cbd5e1;border-radius:10px;background:#fff;color:#475569;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.dp-upbtn:hover{border-color:#93c5fd;color:#1d4ed8;background:#f8faff}
#dpPlatformRow button{border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;padding:9px 6px;font-size:13px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .15s;text-align:center;line-height:1.35}
#dpPlatformRow button small{display:block;font-size:10.5px;font-weight:500;color:#9ca3af;margin-top:2px}
#dpPlatformRow button:hover{border-color:#93c5fd;color:#1d4ed8}
#dpPlatformRow button.on{border-color:transparent;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
#dpPlatformRow button.on small{color:rgba(255,255,255,.85)}
#suiteTierRow button{display:flex;align-items:center;justify-content:space-between;border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .15s}
#suiteTierRow button:hover{border-color:#93c5fd;color:#1d4ed8}
#suiteTierRow button.on{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
#suiteTierRow button .pr{font-size:12px;color:#9ca3af;font-weight:500}
#suiteTierRow button.on .pr{color:#3b82f6}

/* ---- AI视频工具栏 ---- */
.vt-tool{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-top-left-radius:8px;transition:all .15s;cursor:pointer;color:#666}
.vt-tool:hover{background:#f3f4f6;color:#2563eb}
.vt-tool svg{width:24px;height:24px;color:#333}
.vt-tool:hover svg{color:#2563eb}
.vt-tool.on{background:#eff6ff;color:#2563eb}
.vt-tool.on svg{color:#2563eb}
.vt-tool-label{font-size:12px;font-weight:700;text-align:center;line-height:1.6}
.vt-tool-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;border-radius:0 999px 999px 0;background:transparent}
.vt-tool.on .vt-tool-bar{background:#3b82f6}

/* 落地页导航 登录/注册 (2026-09-11) */
.btn-ghost-lp{padding:11px 22px;font-size:15px;font-weight:600;color:var(--ink-700,#3f3d56);background:rgba(15,10,40,.04);border:0;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn-ghost-lp:hover{background:rgba(15,10,40,.08);color:var(--ink-900,#111)}

/* ===== 登录弹窗 v2（绘柚风 2026-09-11） ===== */
.lgm-card{width:400px;max-width:calc(100vw - 32px);padding:26px 32px 24px;position:relative}
.lgm-card .login-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:0;background:none;color:#9ca3af;cursor:pointer;border-radius:8px;transition:.2s}
.lgm-card .login-close:hover{color:#111;background:rgba(15,10,40,.06)}
.lgm-logo{display:flex;justify-content:center;margin-bottom:22px}
.lgm-logo .brand-logo-img{width:56px;height:56px;border-radius:16px;box-shadow:0 8px 24px rgba(37,99,235,.18)}
.lgm-title{font-size:21px;font-weight:600;color:#1f2937;text-align:center;margin:0 0 18px}
.lgm-tabs{display:flex;background:#f3f4f6;border-radius:10px;padding:4px;margin-bottom:18px}
.lgm-tab{flex:1;padding:8px 0;font-size:14px;font-weight:500;color:#6b7280;border:0;background:none;border-radius:8px;cursor:pointer;transition:.25s}
.lgm-tab.on{background:#fff;color:#2563eb;box-shadow:0 1px 3px rgba(15,10,40,.1)}
.lgm-form{display:flex;flex-direction:column;gap:14px}
.lgm-row{display:flex;align-items:center;gap:10px}
.lgm-star{color:#ef4444;font-weight:700;flex-shrink:0}
.lgm-field{display:flex;flex:1;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff;transition:.2s;align-items:center}
.lgm-field:focus-within{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.lgm-pre{display:flex;align-items:center;padding:0 12px;font-size:14px;color:#6b7280;background:#f9fafb;border-right:1px solid #e5e7eb;height:44px;flex-shrink:0}
.lgm-field input{flex:1;min-width:0;border:0;outline:0;padding:12px;font-size:14px;color:#1f2937;background:transparent}
.lgm-count{padding:0 10px;font-size:12px;color:#9ca3af;flex-shrink:0}
.lgm-sms-btn{border:0;background:none;color:#2563eb;font-size:13px;font-weight:500;padding:0 12px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.lgm-sms-btn:disabled{color:#9ca3af;cursor:not-allowed}
.lgm-submit{width:100%;padding:13px 0;margin-top:2px;border:0;border-radius:14px;color:#fff;font-size:16px;font-weight:600;letter-spacing:6px;cursor:pointer;background:linear-gradient(90deg,#3b82f6,#6366f1);box-shadow:0 6px 16px rgba(59,130,246,.35);transition:.25s}
.lgm-submit:hover{filter:brightness(1.05)}
.lgm-demo{width:100%;margin-top:14px;padding:11px 0;border:1.5px dashed #c7d2fe;border-radius:14px;background:rgba(37,99,235,.05);color:#2563eb;font-size:14px;font-weight:600;cursor:pointer;transition:.25s}
.lgm-demo:hover{background:rgba(37,99,235,.1)}
.lgm-agree{margin:14px 0 0;font-size:12px;color:#9ca3af;text-align:center}
.lgm-agree a{color:#6b7280;text-decoration:none}
.lgm-reg{margin:10px 0 0;font-size:14px;color:#9ca3af;text-align:center}
.lgm-reg-btn{border:0;background:none;color:#3b82f6;font-size:14px;font-weight:500;cursor:pointer;padding:0}
.lgm-reg-btn:hover{color:#2563eb}

/* 注册视图（绘柚风 2026-09-11） */
.lgm-view{display:flex;flex-direction:column}
.lgm-view.hidden{display:none}
.lgm-sms-btn-b{border-left:1px solid #e5e7eb;height:100%}

/* ===== 印花设计 v2（左工作区/右交付区 2026-09-11） ===== */
.pr-page{display:flex;min-height:calc(100vh - 72px);min-width:1280px;background:#fff}
.pr-left{width:480px;flex-shrink:0;border-right:1px solid #e5e7eb;background:#fff;display:flex;flex-direction:column;overflow-y:auto;padding:20px 22px 24px;gap:18px;position:sticky;top:72px;max-height:calc(100vh - 72px)}
.pr-tools{display:flex;gap:10px}
.pr-tool{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 0;border:1.5px solid #e5e7eb;border-radius:14px;background:#fff;color:#64748b;font-size:15px;font-weight:600;cursor:pointer;transition:.2s}
.pr-tool:hover{border-color:#c7d2fe;color:#334155}
.pr-tool.on{border-color:#2563eb;background:linear-gradient(135deg,#eff6ff,#eef2ff);color:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.12)}
.pr-panel{display:flex;flex-direction:column;gap:18px}
.pr-panel.hidden{display:none}
.pr-step{background:#fff}
.pr-step-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#0f172a;margin-bottom:10px}
.pr-step-h i{font-style:normal;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#2563eb,#6366f1);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700}
.pr-drop{position:relative;border:1.5px dashed #cbd5e1;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;overflow:hidden}
.pr-drop:hover{border-color:#2563eb;background:#f8faff}
.pr-drop-hint{text-align:center;color:#94a3b8;font-size:14px;line-height:1.7}
.pr-drop-hint span{font-size:12px;color:#c0c8d4}
.pr-preview{max-width:100%;max-height:260px;object-fit:contain;display:block}
.pr-del{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;border:0;background:rgba(15,10,40,.6);color:#fff;cursor:pointer;display:grid;place-items:center}
.pr-chips{display:flex;flex-wrap:wrap;gap:8px}
.pr-chip{padding:7px 14px;border:1.5px solid #e5e7eb;border-radius:999px;background:#fff;color:#475569;font-size:13.5px;font-weight:500;cursor:pointer;transition:.2s}
.pr-chip:hover{border-color:#c7d2fe}
.pr-chip.on{border-color:#2563eb;background:#eff6ff;color:#2563eb;font-weight:600}
.pr-textarea{width:100%;box-sizing:border-box;min-height:88px;border:1.5px solid #e5e7eb;border-radius:12px;padding:12px;font-size:14px;color:#1f2937;resize:vertical;outline:none;font-family:inherit;transition:.2s}
.pr-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.pr-colors{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.pr-cdot{width:26px;height:26px;border-radius:50%;border:2px solid #e5e7eb;cursor:pointer;transition:.15s;padding:0}
.pr-cdot.on{border-color:#2563eb;transform:scale(1.15);box-shadow:0 2px 8px rgba(15,10,40,.2)}
.pr-cpick{width:26px;height:26px;border:0;background:none;cursor:pointer;padding:0}
.pr-model{border-top:1px solid #f1f5f9;padding-top:16px}
.pr-model-row{display:flex;gap:8px}
.pr-mcard{flex:1;border:1.5px solid #e5e7eb;border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;transition:.2s;background:#fff}
.pr-mcard b{display:block;font-size:13.5px;color:#0f172a}
.pr-mcard span{font-size:11.5px;color:#94a3b8}
.pr-mcard.on{border-color:#2563eb;background:#eff6ff}
.pr-mcard.on b{color:#2563eb}
.pr-right{flex:1;background:#f4f6fa;display:flex;flex-direction:column;min-width:0}
.pr-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:#fff;border-bottom:1px solid #e5e7eb}
.pr-title{font-size:19px;font-weight:800;color:#0f172a;margin:0}
.pr-sub{font-size:12.5px;color:#94a3b8;margin:3px 0 0}
.pr-bar-right{display:flex;align-items:center;gap:16px}
.pr-count{font-size:12.5px;color:#94a3b8}
.pr-go{position:sticky;bottom:0;margin-top:auto;border:0;border-radius:14px;padding:14px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(90deg,#2563eb,#6366f1);box-shadow:0 -6px 18px rgba(248,250,252,.9),0 6px 16px rgba(37,99,235,.3);transition:.25s;z-index:5}
.pr-go:hover{filter:brightness(1.06)}
.pr-go:disabled{opacity:.6;cursor:not-allowed}
.pr-go b{font-weight:800}
.pr-canvas{flex:1;overflow-y:auto;padding:24px 28px 48px}
.pr-flow{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.pr-task{background:#fff;border-radius:18px;box-shadow:0 4px 18px rgba(15,10,40,.06);overflow:hidden}
.pr-task-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f5f9}
.pr-task-h .l{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#0f172a}
.pr-task-mode{padding:3px 10px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:12px;font-weight:600}
.pr-task-time{font-size:12px;color:#94a3b8;font-weight:400}
.pr-task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:#f1f5f9}
.pr-shot{position:relative;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.pr-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pr-shot .tag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;background:rgba(15,10,40,.55);color:#fff;font-size:12px;backdrop-filter:blur(4px)}
.pr-shot.loading{background:linear-gradient(110deg,#f8fafc 8%,#eef2f7 18%,#f8fafc 33%);background-size:200% 100%;animation:prShimmer 1.4s linear infinite}
@keyframes prShimmer{to{background-position-x:-200%}}
.pr-shot.err{color:#ef4444;font-size:13px}
.pr-empty{text-align:center;padding:120px 20px;color:#94a3b8}
.pr-empty-t{font-size:17px;font-weight:700;color:#64748b;margin-bottom:8px}
.pr-empty-s{font-size:13.5px}

/* 2026-09-21: plan card hover */
.plan-grid .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; }
.plan-grid .card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(15,10,40,.12); border-color: #6C5CE7; }
.plan-grid .card:hover .btn { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }

/* 2026-09-21: 子账号表单（对齐个人中心ac风格） */
.ac-sub-quota { font-size:12px; color:#9ca3af; font-weight:normal; margin-left:6px; }
.ac-sub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.ac-sub-input { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:9px 12px; font-size:13px; outline:none; background:#fff; transition:border-color .15s; }
.ac-sub-input:focus { border-color:#6C5CE7; }

/* 2026-09-21: 修头衔双层胶囊——内层去掉背景边框padding，只保留颜色 */
.ac-role .ac-role.ac-role-trial,.ac-role .ac-role.ac-role-personal,.ac-role .ac-role.ac-role-team,.ac-role .ac-role.ac-role-enterprise{padding:0;border:none;background:transparent}

/* ===== 移动端适配 20260921k-mobile ===== */
/* 全局防横溢 */
@media (max-width: 768px) {
  img, video { max-width: 100%; }
  html, body { overflow-x: hidden; }
  .hy-nav-inner { min-width: 0 !important; padding: 0 10px; height: 56px; gap: 8px; }
  .hy-logo-text { font-size: 15px; }
  .hy-menu a { padding: 6px 7px !important; font-size: 12px; }
  .hy-menu a span { font-size: 11px; }
  .hy-avatar-name { display: none; }
  /* 工作台模板：去掉内联 1280px 最小宽，纵向堆叠 */
  .hy-below-nav { min-width: 100% !important; }
  .hy-below-nav .flex-row { flex-direction: column !important; }
  .hy-below-nav [class*="w-[480px]"] { width: 100% !important; }
  .hy-below-nav .overflow-x-auto { overflow-x: hidden !important; }
  .hy-h-below-nav { height: auto !important; }
  #app.main { padding: 12px 10px 70px; }
}

@media (max-width: 560px) {
  /* --- 顶部导航：去掉拥挤 --- */
  .lp-nav-inner { padding: 0 12px; height: 58px; gap: 8px; }
  .lp-brand { gap: 8px; }
  .lp-brand .brand-logo-img { width: 28px; height: 28px; }
  .lp-brand-name { font-size: 16px; }
  .lp-brand-sub { display: none; }
  .nav-guest { gap: 6px; }
  .btn-ghost-lp { padding: 8px 12px; font-size: 13px; }
  .nav-guest .btn-primary, .nav-guest button { padding: 8px 13px !important; font-size: 13px !important; white-space: nowrap; }

  /* --- Hero：标题/按钮 --- */
  .hero-badge { font-size: 11.5px; padding: 6px 12px; }
  .hero-title { font-size: clamp(30px, 8.8vw, 40px); margin-top: 18px; letter-spacing: -.02em; }
  .hero-title em { display: inline; }
  .hero-sub { font-size: 14px; line-height: 1.75; margin-top: 14px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero-cta .btn-cta, .hero-cta .btn-ghost-lg { width: 100%; padding: 14px 20px; font-size: 15px; }
  .hero-meta { font-size: 11.5px; }
  .hero-visual { height: 320px !important; }
  .hero-scroll { display: none; }
  .lp-hero { padding: 18px 16px 50px; }

  /* --- 卡片网格：单列 --- */
  .cap-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .compare-grid { grid-template-columns: 1fr !important; }
  .demo-wrap { grid-template-columns: 1fr !important; }
  .demo-chips { gap: 6px; }
  .demo-chips .chip { font-size: 12px; padding: 6px 10px; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-cta { padding: 44px 18px; }
  .lp-cta h2 { font-size: 24px; }
  .sec-head h2 { font-size: 22px !important; }
  .sec-head p { font-size: 13px !important; }

  /* --- 登录弹窗 --- */
  .lgm-card { width: calc(100vw - 32px); max-height: 90vh; overflow-y: auto; padding: 20px 18px 18px; box-sizing: border-box; }
  .lgm-tabs { padding: 3px; }
  .lgm-tab { flex: 1 1 0; min-width: 0; padding: 9px 0; font-size: 13.5px; white-space: nowrap; }
  .lgm-agree { font-size: 12px; line-height: 1.7; margin: 12px 0 0; }
  .lgm-title { font-size: 20px; }
  .lgm-form .lgm-field input { font-size: 15px; }
  .lgm-submit { padding: 12px 0; font-size: 15px; }
}