/* ============================================================================
   AI互通科技平台 · 顾客端样式（深色主题）
   视觉基准：参考稿「绘画创作」页 —— 深色底、圆角卡片、青绿渐变主按钮、底部四 Tab
   ========================================================================== */

:root {
  --bg: #0b0a13;
  --card: #15121e;
  --card-2: #1b1725;
  --line: #272033;
  --text: #e8eef4;
  --text-2: #8b98a5;
  --text-3: #5c6873;
  --accent: #2ee6a8;
  --accent-2: #19b8ff;
  --grad: linear-gradient(90deg, #2ee6a8 0%, #1fc0e8 100%);
  --danger: #ff6b6b;
  --radius: 16px;

  /* ---- 自适应三档布局的基准宽度（断点规则见文件末尾「自适应」章节）----
     shell = 主区（含导航）宽度；panel = 全屏浮层页宽度；login = 登录页宽度；
     nav = 桌面左侧竖导航宽度（手机/平板为 0，导航走底部 Tab）。
     ★ 手机档（默认）就是原来的 480px H5 骨架，平板/桌面在末尾逐级放大。 */
  --shell-w: 480px;
  --panel-w: 480px;
  --login-w: 480px;
  --nav-w: 0px;
  --nav-gap: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ==================== 浏览器自动填充白底修复 ====================
   Chrome/Edge/Safari 对「自动填充过的输入框」会强制画一层浅色背景（UI 优先级
   高于普通规则，连 background 带 !important 都压不住），暗色主题下就是一整块白。
   解法：用 inset box-shadow 把主题色铺满整框 + -webkit-text-fill-color 保住文字色。
   transition 把背景色过渡拖到近乎永久，双保险挡住浏览器重绘。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--card-2) inset;
  box-shadow: 0 0 0 1000px var(--card-2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 999999s ease-in-out 0s;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ==================== 科技感氛围背景 ====================
   z-index:-1 → 绘制在内容之下、body 底色之上（不能用 0：z:0 的定位元素会盖在
   非定位内容的文字之上，把正文压暗）。pointer-events:none 保证不拦点击。
   动的元素只用 transform / opacity，交给合成层，不触发重排。
   手机 / 平板走这里的基础档；桌面档（网格放大、扫描线开启）在 desktop.css。 */
.tech-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* 顶部两团氛围光 + 四周压暗的暗角（暗角让中间内容更聚焦） */
  background:
    radial-gradient(1100px 600px at 82% -14%, rgba(139, 92, 246, .14), transparent 62%),
    radial-gradient(820px 520px at 4% 112%, rgba(168, 85, 247, .12), transparent 62%),
    radial-gradient(130% 96% at 50% 0%, transparent 40%, rgba(6, 3, 12, .55) 100%);
}

/* 等距网格：两条 1px 渐变线交错；四周用 mask 渐隐，免得边缘出现硬切边 */
.tech-bg .tb-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, .01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, .01) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 38%, #000 26%, transparent 100%);
          mask-image: radial-gradient(115% 85% at 50% 38%, #000 26%, transparent 100%);
}

/* 两团缓慢漂移的光晕（青绿 / 科技蓝），只动 transform，不触发重排 */
.tech-bg .tb-glow {
  position: absolute;
  width: 58vmax;
  height: 58vmax;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.tech-bg .tb-glow-a {
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, rgba(168, 85, 247, .34), transparent 62%);
  animation: tbFloatA 38s ease-in-out infinite;
}
.tech-bg .tb-glow-b {
  right: -14vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(99, 102, 241, .30), transparent 62%);
  animation: tbFloatB 52s ease-in-out infinite;
}

/* 扫描光带：默认关闭（手机端省电省重绘），桌面档在 desktop.css 里开启 */
.tech-bg .tb-scan {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, rgba(167, 139, 250, .07) 55%, transparent);
  animation: tbScan 22s linear infinite;
}

/* 极淡噪点，去掉纯色渐变的塑料感（一次性栅格化，之后不重绘） */
.tech-bg .tb-noise {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'><filter%20id='n'><feTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/></filter><rect%20width='160'%20height='160'%20filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

@keyframes tbFloatA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(9%, 7%, 0) scale(1.10); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes tbFloatB {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  50%  { transform: translate3d(-8%, -6%, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1.06); }
}
@keyframes tbScan {
  0%   { transform: translate3d(0, -220px, 0); }
  100% { transform: translate3d(0, 105vh, 0); }
}

/* 系统开了「减少动态效果」就整体静止 —— 尊重用户设置，也省电 */
@media (prefers-reduced-motion: reduce) {
  .tech-bg .tb-glow-a,
  .tech-bg .tb-glow-b,
  .tech-bg .tb-scan { animation: none; }
  .tech-bg .tb-scan { display: none; }
}

/* ==================== 登录页 ==================== */
.login-page {
  /* ★ 改为全屏浮层：新交互下它是「按需弹出」的，必须盖在广场之上，
     而不是像原来那样跟 #app 二选一占文档流（否则两者会上下堆叠）。
     z-index 60 与作品预览浮层同级，高于底部 Tab 栏。 */
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  /* 半透明：透出底下的科技背景（.tech-bg），登录页不再是死板的一块纯色 */
  background: rgba(11, 10, 19, .93);

  padding: 48px 20px 32px;
  display: flex;
  flex-direction: column;
  /* ★ 内容居中的唯一正确做法：flex 交叉轴居中 + 子项统一限宽。
     （不要用 margin:auto 逐项覆盖 —— 会被后面的 .login-card 等规则干扰）
     .login-back 是 fixed 定位，不参与这个布局，不受影响。 */
  align-items: center;
}

/* 子项统一限宽到登录卡宽度，居中交给上面的 align-items */
.login-page > * { width: 100%; max-width: var(--login-w); }

/* ★ .card 全局样式带不对称 margin（0 14px 14px），会在居中布局里造成 7px 左偏；
   登录浮层内清零左右 margin，居中完全交给 align-items */
.login-page > .card { margin-left: 0; margin-right: 0; }

.login-head { text-align: center; margin-bottom: 26px; }
.login-head .logo { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.login-head .sub { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.login-card { flex: 0 0 auto; }

/* ---- 登录卡「欢迎回来」式布局（参考 Mason Studio） ----
   结构：大标题 + 副标题 → 手机号(内嵌获取验证码) → 6 格验证码 →
   (可折叠)设置密码 → 大按钮 → 协议勾选 → 切换链接 → 底部政策行 */
.lc-title { font-size: 26px; font-weight: 800; margin: 2px 0 8px; }
.lc-sub { color: var(--text-2); font-size: 14px; margin-bottom: 22px; }
.lc-label { display: block; font-size: 13px; color: var(--text-2); margin: 14px 0 8px; }
.lc-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 0 12px; height: 50px;
  transition: border-color .15s ease;
}
.lc-field:focus-within { border-color: rgba(139, 92, 246, .55); }
/* 输入框后紧跟的主按钮（密码登录）：.lc-field 无下边距，这里补上间距，避免贴死 */
.lc-field + .btn { margin-top: 16px; }
.lc-field input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  color: var(--text); font-size: 15px; font-family: inherit;
}
.lc-get {
  flex: none; background: none; border: none;
  color: var(--accent); font-size: 13.5px; font-weight: 700;
  cursor: pointer; padding: 6px 2px;
}
.lc-get:disabled { color: var(--text-3); cursor: default; }
/* 6 格分格验证码 */
.lc-otp { display: flex; gap: 8px; }
.lc-otp-cell {
  flex: 1; min-width: 0; height: 52px; padding: 0; text-align: center;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 22px; font-weight: 700; outline: none;
  transition: border-color .15s ease;
}
.lc-otp-cell:focus { border-color: rgba(139, 92, 246, .65); }
.lc-toggle {
  background: none; border: none; padding: 0; margin-top: 12px;
  color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.lc-toggle:hover { color: var(--text); }
/* 协议勾选：不勾就发不了码、登不了录 */
.lc-agree {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 4px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.6; cursor: pointer;
}
.lc-agree input { margin-top: 3px; accent-color: #8b5cf6; flex: none; }
.lc-agree a, .pl-link { color: #a78bfa; text-decoration: none; }
.lc-agree a:hover, .pl-link:hover { text-decoration: underline; }
.pl-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.lc-alt { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 4px; }
.lc-alt-sep { color: var(--text-3); }
.lc-linkbtn { background: none; border: none; padding: 4px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.lc-linkbtn:hover { color: var(--text); }
/* 底部政策行（登录前也能看全文） */
.lc-policies { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; font-size: 12.5px; }
.lc-policies a, .lc-policies .pl-link { color: var(--text-2); text-decoration: none; }
.lc-policies .pl-link:hover { color: #a78bfa; text-decoration: none; }
.lc-policies i { color: var(--text-3); font-style: normal; }
/* 政策弹窗正文：后台发的纯文本按行展示 */
.policy-body {
  /* ms-body 只有 padding-top，纯文本内容自己补齐左右下边距，否则贴框边 */
  padding: 2px 18px 20px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
}
.login-foot { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 22px; }

/* 登录页返回按钮：固定在左上角（登录页是可滚动浮层，用 fixed 才不会随内容滚走） */
.login-back {
  position: fixed;
  top: 14px; left: 16px;
  z-index: 61;
  padding: 6px 12px 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
}
.login-back:hover { background: rgba(0, 0, 0, .05); }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px; color: var(--text-3); font-size: 12px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==================== 通用卡片 ==================== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 14px 14px;
}
.card-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.card-label { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.counter { font-size: 12px; color: var(--text-3); font-weight: 400; }

.field { margin-bottom: 12px; }
.field input, .param-input, textarea {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .param-input:focus, textarea:focus { border-color: var(--accent); }
.field input::placeholder, textarea::placeholder { color: var(--text-3); }

.row2 { display: flex; gap: 10px; }
.row2 .field { flex: 1; }

textarea { resize: none; min-height: 96px; line-height: 1.6; }

/* ==================== 按钮 ==================== */
.btn {
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; padding: 12px 18px;
  transition: opacity .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; display: block; }
.btn.small { padding: 9px 16px; font-size: 14px; }
.btn.primary { background: var(--grad); color: #06251b; }
.btn.ghost { background: var(--card-2); color: var(--text); border: 1px solid var(--line); }
.btn.danger-text { color: var(--danger); }

/* ==================== 主框架 ==================== */
.app { max-width: var(--shell-w); margin: 0 auto; min-height: 100vh; padding-bottom: 70px; }

/* 桌面端侧栏/顶栏专属区块：手机与平板一律隐藏（桌面规则在 desktop.css） */
.desk-only { display: none; }
.main { padding-top: 2px; }
.announce {
  margin: 10px 14px 2px;
  background: rgba(46, 230, 168, .08);
  border: 1px solid rgba(46, 230, 168, .25);
  color: var(--accent);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px;
}
.topbar h1 { font-size: 20px; font-weight: 800; flex: 1; text-align: center; }
.topbar .topbar-link {
  color: var(--accent); font-size: 14px; cursor: pointer; flex: 0 0 72px; text-align: right;
}
.topbar .back { color: var(--text); cursor: pointer; flex: 0 0 72px; display: flex; }

/* ==================== Tab：绘画 · 类型选择 ==================== */
/* 任务类型：胶囊 Tab（2026-10-26 由折叠下拉改，样式与广场 .plaza-tabs/.ptab 同款）。
   .ttab 不直接复用 .ptab 类名：ptab 的 margin 由 .plaza-tabs 容器管，这里自带容器内边距 */
.type-card { padding: 12px 14px 10px; }
.type-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ttab {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line);
  color: var(--text-2); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; cursor: pointer;
}
.ttab.active { background: var(--grad); color: #06231c; border-color: transparent; font-weight: 700; }
/* 说明小字（B 方案）：当前类型的说明，如「输入文字直接生成」 */
.type-sub { margin-top: 8px; font-size: 12px; color: var(--text-3); min-height: 15px; }
.type-sub:empty { display: none; }
.chev { color: var(--text-3); margin-left: auto; transition: transform .2s; }

/* ==================== Tab：绘画 · 上传 ==================== */
.upload-zone {
  border: 1.5px dashed #33414f;
  border-radius: 12px;
  min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-3); font-size: 13px;
  cursor: pointer;
  transition: border-color .15s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); }
.up-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(46, 230, 168, .12); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.preview-box { position: relative; text-align: center; }
.preview-box img {
  max-width: 100%; max-height: 300px; border-radius: 12px; border: 1px solid var(--line);
}
.re-pick { color: var(--accent); font-size: 13px; cursor: pointer; display: inline-block; margin-top: 10px; }

/* 多张参考图（图生视频，上限 10 张）：缩略图网格。
   第 1 张 = 视频首帧，加高亮边框 + 「首帧」角标；点其它缩略图可换首帧，× 删除。
   注意别复用 .preview-box —— 那个类名同时也给「作品预览浮层」用了。 */
.ref-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.ref-thumb {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); cursor: pointer;
}
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-thumb.first { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ref-badge {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(0,0,0,.66); color: #fff;
  font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 20px;
}
.ref-thumb.first .ref-badge { background: var(--accent); color: #06251b; font-weight: 700; }
.ref-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ref-add {
  aspect-ratio: 1 / 1; border: 1.5px dashed #33414f; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer;
}
.ref-add:hover { border-color: var(--accent); color: var(--accent); }
.ref-grid-tip { margin-top: 9px; color: var(--text-3); font-size: 12px; line-height: 1.6; }

/* ==================== Tab：绘画 · 风格 ==================== */
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: 0 0 auto;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-2);
  border-radius: 9px; padding: 7px 15px; font-size: 14px; cursor: pointer;
}
.cat-tab.active { background: var(--accent); border-color: var(--accent); color: #06251b; font-weight: 700; }

/* 风格改为自动换行的网格：9 种全部可见，不用左右滑。
   列数随容器宽度自适应（手机 3 列、桌面浮层 6~7 列）。 */
.style-strip {
  display: grid; gap: 10px;
  /* 96px：390 屏内容宽约 330px 时正好 3 列（再大就会掉到 2 列、9 项排 5 行太占屏） */
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.style-item {
  position: relative;
  height: 132px;
  border-radius: 12px; overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--card-2);
}
.style-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-item .ph-cover {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  background: linear-gradient(160deg, #22303f, #18212c);
}
.style-item .s-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 8px 7px;
  font-size: 12px; font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.style-item.active { border-color: var(--accent); }
.style-item .s-price {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.55); color: var(--accent);
  font-size: 11px; padding: 2px 7px; border-radius: 8px;
}

/* ==================== 锁定人脸特征 / 参考图相关性 ==================== */
.face-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 2px 0 14px;
  border-bottom: 1px solid var(--line);
}
.face-text { display: flex; flex-direction: column; gap: 3px; }
.face-title { font-size: 14px; font-weight: 700; }
.face-sub { font-size: 12px; color: var(--text-3); }
.switch {
  flex: 0 0 46px; height: 26px; border-radius: 13px;
  background: #2a3644; position: relative; cursor: pointer;
  transition: background .18s;
}
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: left .18s;
}
.switch.on { background: var(--accent); }
.switch.on i { left: 23px; }
.rel-block { padding-top: 14px; }
.rel-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rel-val {
  flex: 0 0 44px; text-align: center;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 800; padding: 5px 0;
}
.rel-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 43%, #2a3644 43%);
  outline: none;
}
.rel-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; cursor: pointer;
  border: 2px solid var(--accent);
}
.rel-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; cursor: pointer; border: 2px solid var(--accent);
}
.rel-hint { margin-top: 8px; }

/* ==================== Tab：绘画 · 底部操作 ==================== */
.action-row { display: flex; gap: 12px; margin: 0 14px 10px; }
/* 尺寸选择网格：7 个尺寸（智能 + 6 比例）一排铺开（2026-10-25 用户要求：不要两排） */
.ratio-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.ratio-item {
  background: var(--card-2);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.ratio-item.active { border-color: var(--accent); }
.ratio-shape {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.ratio-shape i {
  display: block;
  background: var(--text-2);
  border-radius: 3px;
}
.ratio-item.active .ratio-shape i { background: var(--accent); }
/* 「智能」比例档：没有固定比例，画虚线方框示意自动匹配 */
.ratio-shape i.ratio-auto {
  background: transparent;
  border: 2px dashed var(--text-2);
  border-radius: 5px;
}
.ratio-item.active .ratio-shape i.ratio-auto { border-color: var(--accent); }
.ratio-r { font-size: 12px; font-weight: 800; line-height: 1; }
.ratio-use { font-size: 10px; color: var(--text-3); line-height: 1.2; white-space: nowrap; }
/* 窄屏（<720px）7 列放不下用途文案，回落 4 列两排 */
@media (max-width: 719px) {
  .ratio-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 图片质量：5 档一排。档位（720p~8K）与加价积分来自后台配置 */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
/* 视频质量档位（480P/720P/1080P 三档）：三列铺开 */
#videoTierGrid {
  grid-template-columns: repeat(3, 1fr);
}
#videoTierGrid .quality-item {
  padding: 12px 8px 10px;
}
.quality-item {
  background: var(--card-2);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
}
.quality-item.active { border-color: var(--accent); }
.quality-name { font-size: 12px; font-weight: 800; line-height: 1; }
.quality-item.active .quality-name { color: var(--accent); }
.quality-tag { font-size: 9px; color: var(--text-3); line-height: 1.1; text-align: center; }
.quality-item.active .quality-tag { color: var(--accent); }
.quality-hint { font-size: 11px; color: var(--text-3); line-height: 1.4; margin-top: 10px; }
/* 出图通道三条：铺成三列。每格要放「名称 + 速度 + 一句说明」，
   比质量档那五格承载的信息多，所以高度更大、文字左对齐。 */
.chan-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.chan-grid .quality-item {
  align-items: flex-start;
  padding: 11px 9px 10px;
  gap: 4px;
  position: relative;
  /* ★ 三格等高：说明文字长短不一会让底板参差不齐，视觉上像三个不同尺寸的按钮。
     grid 自动拉伸只能等高到最高那格，这里再加 min-height 兜住两行说明的空间，
     短说明的格子底部就留白而不是塌下去。 */
  min-height: 92px;
}
.chan-grid .quality-name {
  font-size: 12.5px;
  line-height: 1.2;
}
.chan-grid .quality-tag {
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
}
/* 说明文字：两行够用，超出省略 —— 三列窄屏放不下更多 */
.chan-grid .chan-desc {
  font-size: 9.5px;
  color: var(--text-3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 「推荐」角标：只有默认第一条挂，避免三条都像被推荐 */
.chan-flag {
  position: absolute;
  top: -7px; left: 7px;
  font-size: 8.5px; font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--accent);
  color: #06251b;
}
/* 不可用：灰掉但**不隐藏** —— 条目凭空消失会让顾客以为自己点错了 */
.chan-grid .quality-item.disabled {
  opacity: .38;
  cursor: not-allowed;
}
.chan-grid .quality-item.disabled .quality-name { color: var(--text-3); }
/* 占位档（视频 1080P 等）：同上，通用到所有 quality 网格 */
.quality-item.disabled {
  opacity: .38;
  cursor: not-allowed;
}
.quality-item.disabled .quality-name { color: var(--text-3); }
.gen-btn {
  flex: 1;
  border: none; border-radius: 14px;
  background: var(--grad); color: #06251b;
  font-size: 17px; font-weight: 800;
  min-height: 58px; cursor: pointer;
  transition: opacity .15s, transform .05s;
}
.gen-btn:active { transform: scale(.985); }
.gen-btn:disabled { opacity: .4; cursor: not-allowed; }
.quota-line { text-align: center; color: var(--text-3); font-size: 12px; min-height: 18px; margin: 0 14px 10px; }

/* 产能状态条：下单前就告诉顾客「要不要等、等多久」。
   在线 = 绿点 + 排队与预计时间；离线 = 橙点 + 预约说明。
   放在「立即生成」正上方，是因为顾客此刻才真正在评估「点了之后要等多久」。 */
.cap-bar {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 14px 10px; padding: 10px 14px;
  border-radius: 12px; font-size: 13px; line-height: 1.55;
  background: #f3f6fb; color: var(--text-2);
  border: 1px solid #e3e8ef;
}
.cap-bar.online { background: #eefaf3; border-color: #c9ecd9; color: #0f6b43; }
.cap-bar.offline { background: #fff7e8; border-color: #f6dcb0; color: #8a5a12; }
.cap-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  margin-top: 5px; background: #12b76a;
}
.cap-bar.offline .cap-dot { background: #f79009; }
.cap-text { flex: 1; }
.cap-text b { font-weight: 700; }

.adv-toggle {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-2); font-size: 14px; cursor: pointer; padding: 14px 16px;
}
.adv-toggle.open .chev { transform: rotate(180deg); }
.adv-panel .field-label { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 6px; }

/* 参数 chip 组（尺寸/张数这类枚举参数） */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-2);
  border-radius: 9px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.chip.active { background: rgba(46,230,168,.14); border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* ==================== Tab：我的 ==================== */
.me-head { display: flex; align-items: center; gap: 14px; }
.me-head .avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.me-info { display: flex; flex-direction: column; gap: 3px; }
.me-info b { font-size: 16px; }
.me-info span { color: var(--text-2); font-size: 13px; }

.balance-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.balance-num { font-size: 34px; font-weight: 800; color: var(--accent); }
.balance-unit { color: var(--text-2); font-size: 13px; }
.balance-meta { color: var(--text-3); font-size: 12px; }

.menu-card { padding: 4px 0; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  font-size: 15px; padding: 14px 16px; cursor: pointer;
}
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item i { color: var(--text-3); font-style: normal; font-size: 18px; }
.menu-item.danger { color: var(--danger); }

/* ==================== 页脚（版权 + 备案） ====================
   每个页面底部都有一份，由 customer.js 从 <template id="footTpl"> 克隆注入。
   备案号没配置时 .sf-icp 退化成一句灰色说明（.pending），不做成可点链接。 */
.site-foot {
  margin: 22px 14px calc(14px + env(safe-area-inset-bottom));
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.9;
}
.site-foot .sf-owner { color: var(--text-2); font-weight: 600; }
.site-foot a { color: var(--text-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.site-foot a.pending { color: var(--text-3); cursor: default; }
.site-foot .sf-meta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.site-foot .sf-note { color: #4a5460; font-size: 11px; margin-top: 2px; }

/* 登录页是 flex 纵向布局：把页脚推到屏幕底部，未登录访客也看得见 */
.login-page > .site-foot { margin-top: auto; padding-top: 18px; }

/* ==================== 广场底部「开始创作」引导 ====================
   参考浅色稿做的深色适配：柔和紫→青渐变底，三步小卡、主按钮直达创作页 */
.plaza-cta {
  margin: 26px 14px 4px;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  border: 1px solid #2a3244;
  background:
    radial-gradient(560px 300px at 88% -30%, rgba(46, 230, 168, .12) 0%, rgba(46, 230, 168, 0) 60%) no-repeat,
    radial-gradient(640px 340px at 0% 120%, rgba(124, 92, 255, .16) 0%, rgba(124, 92, 255, 0) 55%) no-repeat,
    var(--card);
}
.cta-title {
  font-size: 21px; font-weight: 800; line-height: 1.45;
  background: linear-gradient(92deg, #e8eef4 0%, #b9c8ff 55%, #7ee9c8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-sub { color: var(--text-2); font-size: 13.5px; margin-top: 10px; line-height: 1.7; }
.cta-steps { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 18px 0 20px; }
.cta-step {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px;
}
.cta-step i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(46, 230, 168, .14); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.cta-step b { display: block; font-size: 14.5px; margin: 8px 0 4px; }
.cta-step span { display: block; color: var(--text-2); font-size: 12.5px; line-height: 1.65; }
.cta-note { color: var(--text-3); font-size: 12px; margin-top: 12px; }

/* ==================== 底部导航 ==================== */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--shell-w);
  background: rgba(13, 18, 24, .96);
  border-top: 1px solid var(--line);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
  backdrop-filter: blur(8px);
}
.tab {
  flex: 1;
  background: none; border: none; cursor: pointer;
  color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; padding: 9px 0 7px;
}
.tab svg { width: 23px; height: 23px; }
.tab.active { color: var(--accent); }

/* ==================== 生成记录（全屏页） ==================== */
.overlay-page {
  position: fixed; inset: 0;
  max-width: var(--panel-w); margin: 0 auto;
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
}
.page-body { padding-bottom: 30px; }

/* ==================== 弹窗（邀请有礼 / 积分超市 / 会员中心 / 我的兑换） ====================
   这几个原本是「整页切换」的全屏页：点一下就把当前浏览位置顶掉，退回来还得重新找。
   改成浮层弹窗后，从哪点就在哪弹，关掉原地返回，浏览位置不丢。
   层级从 63 起：压在作品预览（60）之上、登录浮层（70）之下，
   JS 里 openModal 会按打开顺序递增，保证后开的盖在上面（会员中心 → 邀请有礼 这种嵌套）。 */
.modal-mask {
  position: fixed; inset: 0;
  z-index: 63;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 8, 12, .64);
  backdrop-filter: blur(6px);
  animation: modalMaskIn .16s ease-out;
}
.modal-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: min(84vh, 820px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: modalSheetIn .2s cubic-bezier(.2, .9, .3, 1);
}
/* 头部固定不滚：标题 + 右侧动作（如「我的兑换」）+ 关闭按钮 */
.ms-head {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.ms-head h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.ms-head .ms-link {
  flex: none;
  /* 它现在是 <button>，不压掉默认样式会带出一块白底，跟深色弹窗格格不入 */
  background: transparent;
  border: 0;
  font-family: inherit;
  color: var(--accent-2); font-size: 13px; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.ms-head .ms-link:hover { background: rgba(25, 184, 255, .12); }
.ms-close {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  font-size: 13px; line-height: 1;
  cursor: pointer;
}
.ms-close:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
/* 内容区自己滚，弹窗本体不滚；overscroll-behavior 防止滚到底继续带动页面 */
.ms-body {
  flex: 1; min-height: 0;
  padding-top: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ms-body .page-foot { margin-top: 6px; }

/* 底部按钮条：与 ms-head 对称，固定不滚（同意弹层用） */
.ms-foot {
  flex: none;
  display: flex; gap: 10px;
  padding: 12px 18px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.ms-foot .btn { flex: 1; }

/* ---- 人脸单独同意弹层（上传前必读）----
   ★ 这是《个人信息保护法》要求的「单独同意」界面：必须能独立勾选、
     不能与登录协议混在一起、必须写明用途/期限/删除方式。 */
.consent-lead {
  margin: 0 18px 10px;
  font-size: 13.5px; line-height: 1.7;
  color: var(--text);
}
.consent-list {
  margin: 0 18px 14px;
  padding-left: 18px;
  font-size: 13px; line-height: 1.75;
  color: var(--text-2);
}
.consent-list li { margin-bottom: 7px; }
.consent-list b { color: var(--text); font-weight: 600; }
/* 后台自定义条款正文：纯文本按行展示，不解析 HTML（与政策弹层同一口径，防注入） */
.consent-custom {
  margin: 0 18px 14px;
  font-size: 13px; line-height: 1.75;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.consent-check {
  display: flex; gap: 9px;
  margin: 0 18px 18px;
  font-size: 13px; line-height: 1.6;
  color: var(--text);
  cursor: pointer;
}
.consent-check input {
  flex: none;
  width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--accent-2);
  cursor: pointer;
}

/* 弹窗打开时锁住底层页面滚动。
   ★ 只能这么写，不能只加 overflow:hidden —— 本站 html/body 都是 height:100%，
     滚动条挂在 body 上，单纯 overflow:hidden 会让 body 立刻滚回顶部，
     关掉弹窗后用户发现自己被踢回了页面开头。用 position:fixed + 负 top 把
     当前滚动位置"冻"住，关闭时再由 JS 还原（见 customer.js 的 lockScroll）。 */
body.modal-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

@keyframes modalMaskIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalSheetIn {
  from { opacity: 0; transform: translateY(16px) scale(.985) }
  to { opacity: 1; transform: none }
}

.order-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  margin: 0 14px 12px; padding: 14px;
}
.order-item .oi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-item .mid { flex: 1; min-width: 0; }
.order-item b { font-size: 15px; }
.order-item .meta { margin-top: 4px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.order-item .sub { font-size: 12px; color: var(--text-3); margin-top: 3px; word-break: break-all; }
/* 订单号可以必要时折行，时间不许被拆开（窄屏 360 下「2026-10-20 / 00:03」很难看） */
.order-item .sub { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 1px; }
.order-item .sub .otime { white-space: nowrap; }

/* ---- 记录页：多单同时进行时的汇总条 ---- */
.orders-summary {
  margin: 0 14px 10px; padding: 10px 14px;
  background: rgba(25, 184, 255, .10);
  border: 1px solid rgba(25, 184, 255, .24);
  border-radius: 12px;
  font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.orders-summary b { color: var(--accent-2); }

/* ---- 记录页：单个订单的实时进度 ---- */
.oq { margin-top: 10px; }
.oq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.oq-top .oq-strong { color: var(--accent-2); font-weight: 600; }
.oq-top .oq-eta { color: var(--text-3); }
.oq-bar { height: 4px; border-radius: 2px; background: var(--card-2); margin-top: 6px; overflow: hidden; }
.oq-bar i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .45s; }
.oq-bar i.run { background: var(--grad); }
.oq-bar i.wait { background: #ffc850; opacity: .55; }
.oq-sub { margin-top: 4px; font-size: 11px; color: var(--text-3); }

.status-tag { border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.status-tag.pending { background: rgba(255, 200, 80, .14); color: #ffc850; }
.status-tag.processing { background: rgba(25, 184, 255, .14); color: #4fc3ff; }
.status-tag.done { background: rgba(46, 230, 168, .14); color: var(--accent); }
.status-tag.failed { background: rgba(255, 107, 107, .14); color: var(--danger); }

/* ==================== 订单进度抽屉 ====================
   ★ 抽屉要比弹窗（63 起）更高：生成记录改成了弹窗，点某一单时抽屉必须压在
     列表弹窗之上，否则会被弹窗盖住、看得见摸不着。仍低于登录浮层（70）。 */
.sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 66; }
.sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--panel-w);
  background: var(--card);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 12px 18px calc(20px + env(safe-area-inset-bottom));
  z-index: 67;
}
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.info-line { color: var(--text-2); font-size: 13px; margin-bottom: 6px; }
.info-line b { color: var(--text); font-weight: 600; }

.progress-area { text-align: center; padding: 16px 0 4px; }
.progress-text { font-size: 15px; font-weight: 600; margin: 10px 0 6px; }
.progress-sub { color: var(--text-3); font-size: 12px; }

/* ---- 队列位置胶囊：前面还有几单 / 还要等多久 ---- */
.queue-line {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 5px 12px 5px 10px;
  background: rgba(25, 184, 255, .10);
  border: 1px solid rgba(25, 184, 255, .26);
  border-radius: 999px;
  font-size: 12px; color: var(--text-2);
  line-height: 1.5;
}
.queue-line b { color: var(--accent-2); font-weight: 700; font-size: 13px; }
.queue-line .queue-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); flex: 0 0 auto;
  animation: queue-pulse 1.4s ease-in-out infinite;
}
@keyframes queue-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
.progress-bar {
  height: 8px; border-radius: 4px; background: var(--card-2);
  overflow: hidden; margin: 10px 20px;
}
.progress-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .4s; }
.result-area { text-align: center; }   /* 成品图居中（保存按钮已挪进底部动作行） */
.result-area img {
  display: block;   /* ★ 图片独占一行：否则行内元素会让后续内容挤到图片右侧同一行 */
  max-width: 100%; max-height: 46vh; border-radius: 14px;
  border: 1px solid var(--line); margin: 8px auto 12px;
  cursor: zoom-in;   /* 可点击放大（见 customer.js 里 resultThumb → openZoom） */
}

.mini-spinner, .spinner {
  width: 30px; height: 30px; margin: 0 auto;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sheet-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ==================== 占位页 / 空态 / 提示 ==================== */
.placeholder { text-align: center; padding: 110px 30px; }
.ph-icon { font-size: 52px; margin-bottom: 16px; }
.ph-title { font-size: 18px; font-weight: 700; }
.ph-sub { color: var(--text-3); font-size: 13px; margin-top: 8px; }

.empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 22px 10px; }

/* 积分流水分页条 */
.wallet-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-2);
}
.wallet-pager button {
  background: none; border: 1px solid var(--line); color: var(--text-2);
  border-radius: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.wallet-pager button:active:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wallet-pager button:disabled { opacity: .35; cursor: default; }

.msg {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  max-width: 86vw;
  z-index: 99;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  display: none;
  word-break: break-all;
}
.msg.err { background: #3a1a1e; color: #ffb3b8; border: 1px solid #6b2f36; }
.msg.ok { background: #10322a; color: #7ff0cd; border: 1px solid #1f5c4a; }
.msg.warn { background: #38301a; color: #ffd98a; border: 1px solid #6b5a2f; }

.tip {
  background: rgba(46, 230, 168, .1);
  border: 1px solid rgba(46, 230, 168, .3);
  color: var(--accent);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}

/* ==================== 窄屏适配 ==================== */
@media (max-width: 360px) {
  .card { margin-left: 10px; margin-right: 10px; }
  .action-row { margin-left: 10px; margin-right: 10px; }
  .style-strip { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .style-item { height: 118px; }
}

/* ---------------------------------------------------------------------------
   文生图：示例提示词快捷条
   自由输入最大的门槛是「不知道写什么」。示例做成可点的小胶囊，点一下追加到
   描述词末尾（追加而非覆盖 —— 顾客常把示例当开头，后面还要补充）。
   ------------------------------------------------------------------------- */
.prompt-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.prompt-sample {
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  /* 长示例最多两行，超出省略，避免把卡片撑得很高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-sample:hover { border-color: var(--accent); color: var(--text); }

/* 参数字段说明（后台 param_schema 的 hint）—— 视频这类「选了要等很久」的参数靠它提前说明代价 */
.adv-panel .field-hint { color: var(--text-3, #8a8f98); font-size: 12px; margin: -2px 0 8px; line-height: 1.5; }

/* ==================== 积分充值 ==================== */
/* 套餐网格：两列，整元金额 + 总积分 + 赠送角标。
   比价是顾客唯一要做的事，所以金额字号最大、赠送单独高亮。 */
.pkg-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pkg-item {
  position: relative;
  background: var(--card-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  color: var(--text);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pkg-item.active {
  border-color: var(--accent);
  background: rgba(46, 230, 168, .10);
}
.pkg-amount { font-size: 24px; font-weight: 700; letter-spacing: .5px; }
.pkg-points { font-size: 13px; color: var(--text-2); }
.pkg-gift { font-size: 12px; color: var(--accent); }
.pkg-tag {
  position: absolute; top: -8px; right: 6px;
  background: var(--grad); color: #06251b;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 9px;
}

.pay-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.pay-icon { font-size: 20px; }
.pay-row .pay-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.pay-hint { color: var(--text-3); font-size: 12px; margin-top: 10px; line-height: 1.6; }
.rc-foot { color: var(--text-3); font-size: 12px; margin: 14px 14px 0; line-height: 1.7; }

/* ==================== 联系客服 ==================== */
.svc-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.svc-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.svc-qr img {
  width: 180px; height: 180px; object-fit: contain;
  background: #fff; border-radius: 12px; padding: 8px;
}
.svc-qr-tip { font-size: 12px; color: var(--text-3); }
.svc-wx { width: 100%; text-align: center; }
.svc-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.svc-val-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.svc-val-row b { font-size: 18px; letter-spacing: .5px; }
.svc-hours {
  width: 100%; text-align: center; font-size: 13px; color: var(--text-2);
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* 常见问题：默认折叠，点问号行展开 */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; color: var(--text);
  font-size: 14px; text-align: left; padding: 13px 2px; cursor: pointer;
}
.faq-q i { font-style: normal; color: var(--text-2); font-size: 18px; transition: transform .18s; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a {
  display: none; font-size: 13px; color: var(--text-2);
  line-height: 1.75; padding: 0 2px 14px;
}
.faq-item.open .faq-a { display: block; }

/* ==================== 广场（阶段 9）==================== */

/* 顶栏（参考 App 首页式样）：左边品牌，右边四个小图标+文字入口
   ★ 这条顶栏会被注入到每一个页面（见 injectTopBars），所以要做成 sticky：
     页面往下滚时品牌与功能入口仍在视野里，任何时候都能跳走。
     背景必须不透明 —— 否则滚动时会和内容叠在一起糊成一片。 */
.plaza-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 10px 12px 8px;
  background: rgba(11, 10, 19, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.pt-brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pt-logo {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, #ff5c7a, #2e7bff);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(46, 123, 255, .28);
}
/* ★ 品牌名较长（8 个字），字号要留给右侧四个入口：
   402px 屏上「品牌 + 四入口」必须能塞进一行，这里的数值是实测出来的。 */
.pt-name { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; }

/* 右侧入口：图标与文字并排（AI 生成的极简线性图标） */
.plaza-entry { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.pe-item {
  display: flex; flex-direction: row; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 3px 1px;
}
.pe-icon { width: 13px; height: 13px; display: block; object-fit: contain; }
.pe-text { font-size: 9.5px; color: var(--text-2); white-space: nowrap; line-height: 1; }
.pe-item:active .pe-icon { opacity: .7; }

/* 窄屏（≤380px）：整体再收一档，保证四项仍在一行不溢出 */
@media (max-width: 380px) {
  .pt-logo { width: 24px; height: 24px; font-size: 10px; border-radius: 8px; }
  .pt-name { font-size: 11.5px; }
  .pe-icon { width: 11px; height: 11px; }
  .pe-text { font-size: 8.5px; }
  .pe-item { gap: 2px; padding: 3px 0; }
}

/* 四个生成入口：插画卡片（参考稿式样）—— 一排两个，
   AI 生成的 3D 角色插画铺满卡片（角色在右），左侧留白放深蓝标题 */
.plaza-quick {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 0 12px 14px;   /* 上方间距由 .banner-dots 的下边距给出 */
}
.pq-item {
  position: relative; overflow: hidden;
  height: 86px; border: none; border-radius: 16px; cursor: pointer;
  padding: 0; text-align: left; background: #cfe6ff;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pq-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; display: block;
}
/* 左侧一道白色柔光，保证标题在任何插画上都读得清 */
.pq-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 58%);
}
.pq-name {
  position: absolute; left: 16px; top: 19px; z-index: 1;
  font-size: 17px; font-weight: 800; letter-spacing: 1px;
  color: #17406f; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.pq-sub {
  position: absolute; left: 16px; bottom: 15px; z-index: 1;
  font-size: 11px; color: #4a6b93; white-space: nowrap;
}
.pq-item:active {
  transform: scale(.975);
  box-shadow: 0 6px 18px rgba(20, 60, 120, .35);
}
@media (max-width: 360px) {
  .plaza-quick { gap: 8px; margin: 0 10px 12px; }
  .pq-item { height: 76px; border-radius: 14px; }
  .pq-name { font-size: 15px; left: 13px; top: 16px; }
  .pq-sub { font-size: 10px; left: 13px; bottom: 12px; }
}

/* Banner 轮播：外层裁圆角，内部横向滑动。
   图片没配时用渐变兜底 —— 运营还没做图也不至于开天窗。 */
.plaza-banner {
  /* 顶部留白：顶栏是 sticky 的，banner 贴着它会显得压抑 */
  margin: 14px 14px 10px; border-radius: var(--radius);
  /* ★ 宽度必须显式钉死（父内容宽 - 左右 margin）。
     若留 width:auto，一旦 max-height 夹住高度，浏览器会反过来按 aspect-ratio
     把「宽度」也缩掉（实测 1564 → 1312），banner 就铺不满整行。 */
  width: calc(100% - 28px);
  /* ★ 高度按宽度自适应，不再写死 height。
     原因：容器高度写死、宽度随屏幕变宽时，宽高比会一路变大（1920 屏约 7:1），
     图片是 3:1 就必然被 object-fit:cover 裁掉上下 —— 手机端窄条反而完整。
     现在容器比例 = --banner-ar（JS 拿到图片真实比例后写入）→ 任何宽度都不裁。 */
  aspect-ratio: var(--banner-ar, 2.7 / 1);
  /* 兜底：极端比例的图不把首屏撑爆 / 压成一条线。
     460 是按 1920 屏实测定的：内容行宽约 1564px，3.45:1 的图完整显示需 453px，
     刚好装得下。运营出图建议 4:1 ~ 6:1（如 1600×400、1500×300），高度 260~390 更协调。 */
  min-height: 90px; max-height: 460px;
  overflow: hidden; position: relative; background: var(--card-2);
}
.banner-track { display: flex; height: 100%; transition: transform .45s ease; }
.banner-slide {
  flex: 0 0 100%; height: 100%; position: relative;
  display: flex; align-items: center; padding: 0 20px; text-decoration: none; color: #fff;
}
.banner-slide.has-img { padding: 0; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-ph {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, #1f6f5c 0%, #2e6fa8 60%, #3a4a8a 100%);
}
.banner-title {
  position: relative; font-size: 17px; font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.banner-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; }
.banner-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block;
}
.banner-dots i.on { background: var(--accent); width: 16px; border-radius: 3px; }

/* =============================================================
   活动广告条（banner 下方横条活动位）
   结构：左「🔥主标题(白粗) + 副标题(黄高亮)」右「高亮按钮」。
   内容全来自后台「活动广告条」配置；按钮/副标题没配就不渲染。
   ============================================================= */
.promo-bar {
  display: flex; align-items: center; gap: 16px;
  margin: 0 14px 16px; padding: 12px 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 200% at 100% 0%, rgba(168, 85, 247, .18), transparent 55%),
    radial-gradient(120% 220% at 0% 100%, rgba(217, 70, 239, .12), transparent 60%),
    var(--card-2);
  border: 1px solid var(--line);
  cursor: default;
}
/* 配了跳转地址才像可点的：hover 微亮 + 小手 */
.promo-bar.pb-clickable { cursor: pointer; }
.promo-bar.pb-clickable:hover { border-color: rgba(250, 219, 43, .45); }
.promo-bar.pb-clickable .pb-btn { box-shadow: 0 0 0 transparent; }
/* author 样式的 display:flex 会压过 UA 的 [hidden]{display:none}，
   必须显式补一条，否则 JS 渲染前会闪出一块空条 */
.promo-bar[hidden] { display: none; }

.pb-main { flex: 1 1 auto; min-width: 0; }
.pb-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-fire { flex: none; font-size: 16px; }
.pb-sub {
  margin-top: 4px; font-size: 12.5px; font-weight: 600;
  color: #fadb2b;   /* 参考图的高亮黄 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-btn {
  flex: none; border: 0; cursor: pointer;
  background: #fadb2b; color: #221a02;
  font-weight: 800; font-size: 13px;
  padding: 9px 18px; border-radius: 8px;
  transition: transform .15s, box-shadow .15s;
}
.pb-btn:active { transform: scale(.96); }
@media (hover: hover) {
  .pb-btn:hover { box-shadow: 0 2px 14px rgba(250, 219, 43, .35); }
}
/* 手机端：两条文案允许各自省略，按钮收窄 */
@media (max-width: 480px) {
  .promo-bar { padding: 10px 12px; gap: 10px; }
  .pb-title { font-size: 13.5px; }
  .pb-sub { font-size: 11.5px; }
  .pb-btn { padding: 8px 12px; font-size: 12px; }
}

/* 作品栏目 Tab */
.plaza-tabs {
  display: flex; gap: 8px; margin: 0 14px 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.ptab {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line);
  color: var(--text-2); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; cursor: pointer;
}
.ptab.active { background: var(--grad); color: #06231c; border-color: transparent; font-weight: 700; }

/* 作品二级分类（子目录）：小号文字 Tab，选中亮绿；随主栏目由 JS 渲染/显隐 */
.plaza-cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 14px 12px;
}
/* 搜索状态条：顶栏搜索后显示在二级目录下方 */
.plaza-search-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 14px 12px;
  padding: 8px 14px;
  border: 1px solid rgba(139, 92, 246, .35);
  background: rgba(139, 92, 246, .08);
  border-radius: 12px;
  color: #c4b5fd;
  font-size: 13px;
}
.plaza-search-bar .psb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plaza-search-bar .psb-clear {
  flex: none;
  padding: 4px 12px;
  border: 1px solid rgba(139, 92, 246, .45);
  background: none; border-radius: 999px;
  color: #c4b5fd; font-size: 12px; cursor: pointer;
}
.plaza-search-bar .psb-clear:hover { background: rgba(139, 92, 246, .15); }
.pcat {
  font-size: 12.5px; color: var(--text-2);
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.pcat:hover { color: var(--text); }
.pcat.active {
  color: var(--accent); font-weight: 600;
  background: rgba(46, 230, 168, .10);
  border-color: rgba(46, 230, 168, .38);
}

/* 作品瀑布流：CSS 多列布局 —— 卡片各自独立高度、按列紧凑排列，
   不像行式网格那样把整行拉到最高的那张，短卡下面不再留大片空白 */
.plaza-list { columns: 2; column-gap: 10px; margin: 0 14px; }
.plaza-list .empty { column-span: all; }
.pw-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  break-inside: avoid;          /* 瀑布流关键：单张卡片不许被拆到两列 */
  margin-bottom: 10px;          /* 列布局没有 row-gap，用下边距做行距 */
}
/* ★ 封面框强制 3:4 的「锁死」规则只在桌面端生效，见 desktop.css 的 .plaza-list .pw-cover：
   手机端瀑布流（columns:2）保留封面按原图比例伸展的错落感，不做裁切；
   桌面端是定宽多列（columns:250px），封面不锁死就会出现「一节高一节低」。
   本文件这一条保持基础写法（无 min-height:0 / overflow:hidden），手机端即原样。 */
.pw-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--card-2); }
.pw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none;
}
/* 悬停自动播放的预览视频：盖在封面上、与封面同框（见 customer.js buildWorkCard） */
.pw-hover-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.pw-body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; }
.pw-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-prompt {
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 卡片第二行：普通作品放风格名（灵感卡放描述词，用 .pw-prompt）。
   ★ 默认隐藏 —— 只在桌面端显示（见 desktop.css），手机端保持原样 */
.pw-meta {
  display: none;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 「全部」混排时，灵感卡片的识别角标 */
.pw-badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(168, 85, 247, .92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

.pw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 点赞+收藏一组靠左，脚注右侧留给「做同款」/日期；没有分组的话
   space-between 会把三个子项撑散成「赞 · 藏 · 做同款」三等分 */
.pw-acts { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pw-like {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2); background: none; border: none;
  cursor: pointer; padding: 2px 0;
}
.pw-like.on { color: var(--accent); }
/* 收藏按钮：与点赞同款字号；on 态用琥珀金（与点赞的 accent 区分语义） */
.pw-fav {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2); background: none; border: none;
  cursor: pointer; padding: 2px 0;
}
.pw-fav.on { color: #d97706; }
.pw-do {
  font-size: 12px; color: #06231c; background: var(--grad);
  border: none; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-weight: 600;
}
/* 我的作品「删除」按钮：脚注右侧，与日期同行；弱化为次要文字色，悬停转警示红 */
.pw-del {
  font-size: 12px; color: var(--text-2); background: none;
  border: none; cursor: pointer; padding: 2px 0; flex: none;
}
.pw-del:hover { color: #ef4444; }
.plaza-foot { display: flex; justify-content: center; margin: 16px 14px 8px; }

/* 「我的」页分区 Tab：复用广场胶囊样式（.plaza-tabs/.ptab）。5 个 Tab 在 360-402px
   窄屏放不下一行 —— 允许横向滑动（隐藏滚动条），桌面端宽度富余则一排放得下 */
.mine-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mine-tabs::-webkit-scrollbar { display: none; }
.mine-tabs .ptab { white-space: nowrap; }

/* 我的作品 / 我的收藏面板：列表/加载更多直接用 .plaza-list / .plaza-foot 的页面级边距（0 14px），
   不再像以前嵌在 .card 里需要归零补丁。
   ★ 列表必须自带下边距：.plaza-list 是 margin:0 14px（无下边距），而「我的」页里面板
   下面紧跟退出登录卡（.card 自带 14px 下边距，但只对 .card 生效）——「加载更多」脚注
   隐藏时列表底部会直接贴住退出登录，这里补齐与其他 .card 面板一致的 14px 呼吸空隙 */
.my-works-list { margin-top: 2px; margin-bottom: 14px; }
.my-works-foot { margin-top: 4px; margin-bottom: 14px; }
/* 卡片脚注：成品创作日期（左），字号口径与 .pw-like 一致 */
.pw-date { font-size: 12px; color: var(--text-3); }

/* 回到顶部悬浮按钮：滚过一屏出现，点击平滑回顶（手机端在底栏上方；桌面位置见 desktop.css） */
.back-top {
  position: fixed; right: 16px; bottom: 90px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #3a4653;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; z-index: 45;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:active { transform: scale(.92); }
.back-top svg { width: 21px; height: 21px; display: block; }

/* 作品预览浮层 */
.preview-mask {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.86);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.preview-box {
  position: relative; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; max-height: 90vh; overflow: auto;
}
.preview-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.45); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer;
}
.preview-media { border-radius: 12px; overflow: hidden; background: #000; }
.preview-media img, .preview-media video { width: 100%; display: block; max-height: 62vh; object-fit: contain; }
/* 图片可再点放大；视频保持原有 controls 交互 */
.preview-media img { cursor: zoom-in; }

/* 图片全屏放大层：点预览图进入，点任意处关闭 */
.zoom-mask {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; cursor: zoom-out;
}
.zoom-mask img {
  max-width: 100%; max-height: 100vh;
  width: auto; height: auto; display: block;
  border-radius: 6px; object-fit: contain;
}
.preview-info { padding: 12px 2px 8px; display: flex; flex-direction: column; gap: 4px; }
.preview-info b { font-size: 15px; }
.preview-info span { font-size: 12px; color: var(--text-2); }
.preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.preview-actions .btn { flex: 1 1 auto; }

/* 邀请有礼 */
.invite-card { text-align: center; }
.invite-code {
  font-size: 30px; font-weight: 800; letter-spacing: 5px; color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.invite-tip { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.invite-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.invite-actions .btn { flex: 1 1 auto; }
.invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.istat { text-align: center; }
.istat b { display: block; font-size: 20px; color: var(--accent); }
.istat span { font-size: 12px; color: var(--text-2); }
/* 「还有 N 位好友未完成首张作品」——解释奖励为什么还没到账，避免顾客以为漏发 */
.invite-pending {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.6; color: var(--text-2);
  background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .28);
}
.rule-text { font-size: 13px; color: var(--text-2); line-height: 1.8; white-space: pre-wrap; }

/* 积分超市 */
.mall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mall-item {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left;
  cursor: pointer; color: var(--text);
}
.mall-item.active { border-color: var(--accent); }
.mall-cover {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; background: #0f151c;
}
.mall-name { font-size: 13px; font-weight: 600; }
.mall-points { font-size: 15px; font-weight: 700; color: var(--accent); }
.mall-meta { font-size: 11px; color: var(--text-3); }
.mall-out { color: var(--text-3); }

/* 会员中心 */
.level-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.level-badge {
  font-size: 15px; font-weight: 700; color: #06231c;
  background: linear-gradient(90deg, #ffd45c, #ffb02e);
  padding: 3px 12px; border-radius: 999px;
}
.level-next { font-size: 12px; color: var(--text-2); }
.level-bar { height: 6px; background: var(--card-2); border-radius: 999px; margin: 10px 0 8px; overflow: hidden; }
.level-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width .3s; }
.level-hint { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.stat { text-align: center; }
.stat b { display: block; font-size: 17px; }
.stat span { font-size: 12px; color: var(--text-2); }

/* 商品没配封面时的图标占位：比一大块空白好，也不会出现裂图 */
.mall-cover.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  background: linear-gradient(135deg, #1a2735, #243a4d);
}
.mall-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }

/* ============================================================================
   自适应：手机 / 平板 / 桌面
   ---------------------------------------------------------------------------
   · 手机  (< 768px) ：原 H5 骨架，全宽 + 底部四 Tab，列表双列。
   · 平板  (768~   ) ：内容区加宽到 760px 居中，列表多列，抽屉改居中弹窗。
   · 桌面  (1024~  ) ：底部 Tab 换成左侧竖栏导航 + 右侧内容区，整体居中。
   · 大屏  (1440~  ) ：再放宽一档，作品流四列。
   ★ 这边只调「宽度变量 / 栅格列数 / 导航形态」，组件本身的样式一行不改 ——
     免得为了适配反过来把已经验证过的手机版修崩。
   ========================================================================== */

/* ------------------------------------------------------------- 平板 768+ */
@media (min-width: 768px) {
  :root {
    --shell-w: 760px;
    --panel-w: 720px;
    --login-w: 460px;
  }

  /* 两侧不再是一片纯黑：顶部一道极淡的光晕，让居中容器有「浮起来」的层次 */
  body {
    background:
      radial-gradient(1000px 560px at 50% -12%, #121e2b 0%, rgba(11, 15, 20, 0) 62%) no-repeat,
      var(--bg);
    background-attachment: fixed;
  }

  /* 容器左右各一条边线，界定「画布」边界 */
  .app,
  .tabbar { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

  /* 栅格多列：作品三列、生成入口一行四个、积分超市三列 */
  .plaza-list { columns: 3; }
  .plaza-quick { grid-template-columns: repeat(4, 1fr); }
  .mall-grid { grid-template-columns: repeat(3, 1fr); }

  /* 「开始创作」引导：宽屏三步一行，标题放大 */
  .plaza-cta { padding: 34px 36px 30px; }
  .cta-title { font-size: 26px; }
  .cta-sub { font-size: 14px; }
  .cta-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* 顶栏不再受挤：品牌与入口字号回到舒适值（手机档是实测压过的最小值） */
  .plaza-top { padding: 12px 16px 10px; }
  .pt-logo { width: 32px; height: 32px; font-size: 13px; }
  .pt-name { font-size: 15px; }
  .plaza-entry { gap: 4px; }
  .pe-item { gap: 4px; padding: 3px 5px; }
  .pe-icon { width: 15px; height: 15px; }
  .pe-text { font-size: 11px; }

  /* Banner 在宽屏下要更高，否则像一条压扁的横幅（比例用法见基础档注释） */
  .plaza-banner { --banner-ar: 5.2; margin-top: 18px; }

  /* 订单进度抽屉：贴底的抽屉在宽屏上很突兀 → 改成屏幕居中的弹窗 */
  .sheet {
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    max-width: min(520px, calc(100% - 40px));
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
  }

  .preview-box { max-width: 640px; }
}