/* ═══════════════════════════════════════════════════════════════════
   场景页组件库(2026-08-22)
   ───────────────────────────────────────────────────────────────────
   Owner:「除了 Avatar,其它页面看着像技术 demo」「参考 Avatar 的设计
   风格,简约且重点突出,配色大气」「过多的说明文字干扰视线」

   ## Avatar 好在哪(逐条比对 /avatar 与 /remake /image 的真实渲染)

   不是那个蓝色 —— 是这五件事:

     1. **没有 emoji 当图标**。Avatar 用单字徽章(人/声/景/知),
        其它页用 🎨🛍🔍📱🏠🎵📺 —— emoji 在不同系统字重色彩全不一样,
        排在一起必然花,而且它是"随手做的"的最强信号。
     2. **有分区**。kicker(小号主色) + h2 把一屏切成几块;
        其它页是十几个同级 <label> 竖着堆。
     3. **选项是卡片,不是下拉框**。三选一用三张卡摊开,
        用户一眼看完;<select> 要点开才知道有什么。
     4. **说明收在右栏**,正文里几乎没有行内 hint;
        其它页每个控件下面挂一行灰字,累加起来喧宾夺主。
     5. **字号小、留白大**。其它页 base 15px,行行顶格,显得挤而廉价。

   ## 为什么不直接抄 Avatar 的配色

   Avatar 那套(#8b7cf0 + 暖灰)是**写死的**,写在 `.app-main` 作用域里,
   所以它**没有夜间模式** —— 实测把 /avatar 切到 dark,面板还是白底、
   文字还是深色,和站点其余部分割裂。

   照抄过来等于把夜间模式从 25 个场景页上一起删掉。所以这里只搬
   **结构、密度和克制**,颜色全部走站点 `--ed-*` token,
   明暗两套都成立。观感上"大气"靠的是主色收深(brand-deep 而不是
   大面积淡紫)+ 去饱和填充,不是换色相。

   ## 用法

   加一行 <link> 就生效的部分:`.ed-scene-head` / `.ed-settle` 等
   已有类会被这里重新定义(更紧、更克制),25 个页面零改动即受益。
   新组件(.ed-sec / .ed-pick / .ed-seg / .ed-tips)要页面自己用。

   ⚠️ 必须排在 redesign.css **之后** —— 它靠源码顺序覆盖同名类。
   ═══════════════════════════════════════════════════════════════════ */


/* ── 页壳:收窄 + 收紧 ────────────────────────────────────────────── */

.ed-scene { max-width: 1180px; padding: 26px 26px 80px; }

/* 头部行。原来 glyph 是 34px 淡紫块 + 18px 粗标题,和正文拉不开距离。
   改成:小一号的 glyph、标题加大到 20px、副标题压成 11.5px 弱色。 */
.ed-scene-head { gap: 10px; margin-bottom: 22px; }
.ed-scene-head .glyph {
  width: 30px; height: 30px; border-radius: 9px; font-size: 14px;
  background: var(--ed-brand-bg); color: var(--ed-brand-deep);
}
.ed-scene-head .h-title { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.ed-scene-head .h-desc { font-size: 12.5px; color: var(--ed-w2); margin-top: 2px; }
.ed-scene-head .freeze { font-size: 11.5px; color: var(--ed-w2); }

.ed-scene-grid { gap: 18px; }
.ed-scene-form { border-radius: 18px; padding: 22px 24px 24px; box-shadow: var(--ed-shadow-card); }


/* ── 分区标题:kicker + h2 ────────────────────────────────────────
   Avatar 的 `.section-kicker` + `<h2>`。一屏里有 3-4 个这样的分区,
   用户的眼睛才有落点;没有分区时十几个控件是一片糊的。 */

.ed-sec { margin-top: 26px; }
.ed-sec:first-child { margin-top: 0; }
.ed-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.ed-kicker {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: var(--ed-brand-deep); text-transform: uppercase;
}
.ed-sec h2, .ed-sec-t { margin: 5px 0 0; font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--ed-text); }
/* 分区级说明。**一个分区最多一条**,写在标题下面而不是每个控件下面。 */
.ed-sec-d { margin: 5px 0 0; font-size: 12.5px; color: var(--ed-w1); line-height: 1.6; }
.ed-sec-tag {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--ed-green-text); background: var(--ed-green-bg);
}
.ed-sec-tag.brand { color: var(--ed-brand-deep); background: var(--ed-brand-bg); }


/* ── 卡片选择器:三选一摊开,不塞进下拉框 ─────────────────────────
   Owner 08-22 报的那个体验 bug 就是这条:爆款复刻的三种模式藏在弹窗里,
   而数字人的标准版/高级版是一进页面就摊开的。

   摊开的价值不只是少点一次 —— 它让用户在**决定之前**就看见有几条路,
   以及每条路适合谁。下拉框把这层信息藏起来了。 */

.ed-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ed-pick.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-pick.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .ed-pick, .ed-pick.two, .ed-pick.three { grid-template-columns: 1fr; } }

.ed-pick > button, .ed-pick > .pk {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--ed-border); background: var(--ed-card);
  border-radius: 13px; padding: 13px 14px;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: start;
  transition: border-color .14s, background .14s;
}
.ed-pick > button:hover, .ed-pick > .pk:hover { border-color: var(--ed-brand-line); }
.ed-pick .pk-g {
  grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: var(--ed-brand-deep); background: var(--ed-brand-bg);
}
.ed-pick strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ed-text); }
.ed-pick small  { display: block; font-size: 12px; color: var(--ed-w1); margin-top: 3px; line-height: 1.55; }
/* 选中态。同时认 .on 和 .active —— 站内两种写法都有,
   统一成一种要动十几个页面的 JS,不值当;这里两边都接住。 */
.ed-pick > .on, .ed-pick > .active {
  border-color: var(--ed-brand); background: var(--ed-brand-bg);
}
.ed-pick > .on .pk-g, .ed-pick > .active .pk-g { color: #fff; background: var(--ed-brand); }
.ed-pick > .on::after, .ed-pick > .active::after {
  content: "✓"; position: absolute; top: 9px; right: 9px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; background: var(--ed-brand);
}
/* 不可用:看得见、说得清原因,但明显不是现在能选的。
   直接隐藏的话用户会以为功能没了,跑去别处找。 */
.ed-pick > .locked, .ed-pick > [disabled] {
  opacity: .45; cursor: not-allowed; border-style: dashed;
}
.ed-pick > .locked:hover, .ed-pick > [disabled]:hover { border-color: var(--ed-border); }


/* ── 分段控件:2-4 个短选项 ───────────────────────────────────────── */

/* ⚠️ 容器底色本来用 --ed-s2(#F3F5F9),而页面底是 #F8F9FC —— 差 5 个色阶,
   实测渲染出来**看不见容器**,三组分段控件糊成一长排松散的 chip,
   分不清哪几个是一组。加一道描边解决,不动色值(改色值会牵连别处)。 */
.ed-seg { display: inline-flex; background: var(--ed-s2); border: 1px solid var(--ed-border-lt);
          border-radius: 10px; padding: 3px; gap: 2px; }
.ed-seg.wide { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.ed-seg > * {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ed-t3); white-space: nowrap; text-align: center;
  transition: background .14s, color .14s;
}
.ed-seg > *:hover { color: var(--ed-text); }
.ed-seg > .on, .ed-seg > .active {
  background: var(--ed-card); color: var(--ed-brand-deep); font-weight: 700;
  box-shadow: var(--ed-shadow-card);
}


/* ── 选项格:比卡片轻、比 chip 重(画幅/时长/清晰度这类) ──────────── */

.ed-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }

/* ⚠️ 自动增强出来的那批(.ed-opts-auto)用**流式**排,不用等分网格。
   原因是它们落在页面既有的布局里,而那些格子是照 <select> 的宽度设计的 ——
   实测 oneclick 的「清晰度」在一个约 100px 宽的两栏格子里,
   等分网格只能排一列,于是 720P / 1080P 被拉成两条整行的大条,
   比原来的下拉框还占地方。

   流式排(按内容宽度 + 允许换行)在任何宽度下都退化得体面:
   宽了并排、窄了折行,但每个都只有文字那么宽。 */
.ed-opts-auto { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-opts-auto > .ed-opt {
  flex: 0 1 auto; min-width: 0; min-height: 34px; padding: 6px 12px;
  flex-direction: row; align-items: baseline; gap: 5px;
}
.ed-opts-auto > .ed-opt small { font-size: 11px; }
.ed-opt {
  border: 1px solid var(--ed-border); background: var(--ed-card); border-radius: 10px;
  min-height: 38px; padding: 7px 10px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 600; color: var(--ed-t2);
  transition: border-color .14s, background .14s, color .14s;
}
.ed-opt:hover { border-color: var(--ed-brand-line); }
.ed-opt small { font-size: 11px; font-weight: 400; color: var(--ed-w2); }
.ed-opt.on, .ed-opt.active {
  border-color: var(--ed-brand); background: var(--ed-brand-bg); color: var(--ed-brand-deep); font-weight: 700;
}
.ed-opt.on small, .ed-opt.active small { color: var(--ed-brand-deep); opacity: .8; }
.ed-opt[disabled], .ed-opt.locked { opacity: .42; cursor: not-allowed; }


/* ── 字段:label 收成小号,输入框统一 ──────────────────────────────── */

.ed-field { display: block; margin-top: 16px; }
.ed-field > .lb {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13px; font-weight: 650; color: var(--ed-text); margin-bottom: 7px;
}
.ed-field > .lb em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ed-w2); }
.ed-field > .lb .req { color: var(--ed-danger); font-size: 12px; font-weight: 600; }
.ed-in, .ed-scene-form input.ed-in, .ed-scene-form select.ed-in, .ed-scene-form textarea.ed-in {
  width: 100%; border: 1px solid var(--ed-border); background: var(--ed-s1);
  border-radius: 10px; padding: 10px 12px; font-size: 14.5px; font-family: inherit;
  color: var(--ed-text); outline: none; transition: border-color .14s, box-shadow .14s;
}
.ed-in:focus { border-color: var(--ed-brand); box-shadow: 0 0 0 3px var(--ed-brand-bg); }
textarea.ed-in { resize: vertical; min-height: 84px; line-height: 1.7; }
.ed-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ed-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .ed-row, .ed-row.three { grid-template-columns: 1fr; } }
.ed-row > .ed-field { margin-top: 16px; }

/* 拖放区 */
.ed-drop {
  border: 1.5px dashed var(--ed-dash); border-radius: 12px; padding: 18px 14px;
  text-align: center; font-size: 14px; color: var(--ed-t3); cursor: pointer;
  transition: border-color .14s, color .14s;
}
.ed-drop:hover { border-color: var(--ed-brand-line); color: var(--ed-brand-deep); }
.ed-drop.has { border-color: var(--ed-brand); color: var(--ed-brand-deep); background: var(--ed-brand-bg); }


/* ── 右栏提示面板:说明文字的去处 ──────────────────────────────────
   正文里删掉的 hint 不是丢掉,是**搬到这里**。区别在于:
   行内 hint 是每读一个控件都被打断一次;右栏是想看才看。 */

.ed-tips { background: var(--ed-card); border: 1px solid var(--ed-border); border-radius: 18px; padding: 20px; align-self: start; }
.ed-tips .tip-icon {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 15.5px; font-weight: 800;
  color: var(--ed-brand-deep); background: var(--ed-brand-bg);
}
.ed-tips .tip-icon.teal  { color: var(--ed-teal-text); background: var(--ed-teal-bg); }
.ed-tips .tip-icon.coral { color: var(--ed-coral-text); background: var(--ed-coral-bg); }
.ed-tips h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ed-text); }
.ed-tips p  { margin: 10px 0 0; font-size: 12.5px; color: var(--ed-t3); line-height: 1.75; }
.ed-tips ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ed-tips li { display: flex; gap: 7px; font-size: 12.5px; color: var(--ed-t3); line-height: 1.6; }
.ed-tips li::before { content: "✓"; flex: none; color: var(--ed-green-text); font-weight: 700; }
.ed-tips .tip-note {
  margin-top: 16px; padding: 11px 12px; border-radius: 10px;
  background: var(--ed-s1); font-size: 12px; color: var(--ed-t3); line-height: 1.7;
}
.ed-tips .tip-note strong { display: block; color: var(--ed-text); font-size: 12.5px; margin-bottom: 3px; }


/* ── 结算条:价格与主按钮同一条 ────────────────────────────────────
   原来价格在一个居中的浅紫框里、按钮在下面一整条 —— 两个视觉重心。
   合成一条之后,"多少钱"和"开始"在同一次注视里完成。

   ⚠️ 这里**迁就已有标记**,不要求 24 个页面改 HTML。站内实际长这样:

       <div class="ed-settle">
         <span><span class="est-label">预估消耗</span>
               <span class="est"><span id="cost-hint">—</span> 积分</span></span>
         <span class="est-note">生成前冻结 · 失败退还</span>
         <div style="flex:1"></div>
         <button class="submit-btn">…</button>
       </div>

   第一版按我自己设计的 `.est-wrap` + `.ed-cta` 写,结果 upscale 页
   渲染成「预估消耗 / 积分(21px 大字,数字还没填)」+ 按钮飘在右边 ——
   样式和标记对不上,而**页面照样 200、照样渲染**,只有看截图才发现。
   为一个组件库去改 24 个页面的 HTML 是本末倒置。 */

.ed-settle {
  margin: 24px -24px -24px; padding: 14px 24px 15px;
  border-top: 1px solid var(--ed-border-lt); background: var(--ed-s1);
  border-radius: 0 0 18px 18px;
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
}
/* 报价块:label 在上、数字在下。既认新写法(.est-wrap)也认旧写法
   (第一个裸 <span>)—— 站内两种都有,统一成一种要动 24 个页面。 */
.ed-settle > span:first-child, .ed-settle .est-wrap {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ed-settle .est-label { display: block; font-size: 11.5px; color: var(--ed-w1); }
.ed-settle .est {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--ed-t2); line-height: 1.3;
}
/* 数字本身才是大号 —— 整行套 21px 会变成一句大字标语,
   而这些标记里 .est 装的是「<b>120</b> 积分」这样的**一整句**。 */
.ed-settle .est > span, .ed-settle .est b {
  font-size: 23px; font-weight: 800; color: var(--ed-brand-deep); margin-right: 2px;
}
.ed-settle .est.line { font-size: 14.5px; font-weight: 600; color: var(--ed-t2); }
/* credits.js 给它写的 <b> 带行内 `color:#b45309`(琥珀硬编码,不认夜间模式)。
   行内样式只有 !important 压得住。根治要改 credits.js,但它被十几个页面
   共用,改色值等于同时改那十几个页面 —— 那是另一件事。 */
.ed-settle .est.line b { color: var(--ed-brand-deep) !important; }
/* 计费口径:跟在报价旁边,不占一整个 flex 位 */
.ed-settle .est-note { font-size: 11.5px; color: var(--ed-w2); align-self: center; }

/* 主按钮:站内叫 .submit-btn / .ed-cta / .genbtn,三种都接住。
   页面里那些 `width:auto;margin-top:0;padding:...` 的行内样式压不住,
   所以关键几条给 !important —— 否则 24 个页面各有各的按钮尺寸。 */
.ed-settle .ed-cta, .ed-settle .submit-btn, .ed-settle .genbtn {
  flex: none; margin-left: auto; border: 0; cursor: pointer; font-family: inherit;
  height: 44px !important; padding: 0 24px !important; width: auto !important;
  border-radius: 12px; margin-top: 0 !important;
  background: var(--ed-brand); color: #fff; font-size: 15.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 8px 20px rgba(99, 80, 218, .22);
  transition: filter .15s, transform .15s;
}
.ed-settle .ed-cta:hover, .ed-settle .submit-btn:hover:not(:disabled), .ed-settle .genbtn:hover {
  filter: brightness(1.06); transform: translateY(-1px);
}
.ed-settle .ed-cta:disabled, .ed-settle .submit-btn:disabled, .ed-settle .genbtn:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}
.ed-settle svg { width: 16px; height: 16px; flex: none; }


/* ── 收敛:去掉 emoji 图标带来的花感 ───────────────────────────────
   页面里已有的 emoji 不可能一次全换成图标,但可以让它们**不抢戏**:
   统一压到 12px、去掉彩色描边、和文字基线对齐。
   真正该做的是逐页换成 .pk-g 那种单字徽章 —— 这条只是过渡。 */
.ed-glyph-txt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  font-size: 12px; font-weight: 800; font-style: normal;
  color: var(--ed-brand-deep); background: var(--ed-brand-bg);
}


/* ── 空态 ─────────────────────────────────────────────────────────── */
.ed-empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px;
  color: var(--ed-w2); font-size: 14px; line-height: 1.9;
}
.ed-empty .em-g {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ed-w2); background: var(--ed-s2);
}
.ed-empty b { display: block; color: var(--ed-t3); font-size: 15px; font-weight: 700; margin-bottom: 4px; }


/* ── 移动端 ───────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .ed-scene { padding: 16px 14px 64px; }
  .ed-scene-form { padding: 18px 16px 20px; border-radius: 15px; }
  .ed-settle { margin: 20px -16px -20px; padding: 13px 16px 14px; border-radius: 0 0 15px 15px; }
  .ed-settle .ed-cta { width: 100%; justify-content: center; }
  .ed-scene-head .h-title { font-size: 19px; }
  .ed-sec h2, .ed-sec-t { font-size: 16.5px; }
}

/* ── 排版口径统一(2026-08-22)────────────────────────────────────────
   Owner:「其它页面的视觉风格都要参考 Avatar,简约且重点突出」。

   Avatar 和其它页在**排版尺度**上的差距,比配色大得多:

       Avatar        面板标题 18px/750 · 标签 9-11px · 正文 11-12px
       其它场景页    面板标题 18px/700 · 标签 12.5-14px · 正文 14-15px

   标签和正文大了 2-3px、行距更松,一屏塞不下几件事,于是所有东西看着
   一样重 —— 这就是"没有重点"的来源,不是某个颜色难看。

   ⚠️ 这里带 `body` 前缀是**故意**的。这些页面的排版写在页内 <style> 块里,
   而 <style> 排在 <link> 之后 —— 同特异性下页内必赢。要统一口径就得
   高它一档。代价是页面想局部破例会更费劲;但排版尺度本来就该全站一致,
   这正是"设计系统"该管的事。

   只管**尺度**(字号/字重/圆角/间距),不管颜色与布局 —— 后者各页有各页
   的道理,一刀切会改坏。 */

body .ed-scene-form h2, body .ed-scene .panel > h2, body .aud-panel h2 {
  font-size: 18.5px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 4px;
}
/* 面板标题下面那行副标题:压到 11.5px 弱色。它是"这一块是干嘛的"的补充,
   不该和标题抢。 */
body .ed-scene .panel-sub, body .aud-panel .sub, body .ed-scene-form .panel-sub {
  font-size: 12.5px; color: var(--ed-w1); line-height: 1.65; margin: 0 0 2px;
}
/* 字段标签 */
body .ed-scene label, body .aud-label, body .ed-scene .lb {
  font-size: 13px; font-weight: 650; color: var(--ed-text);
}
body .ed-scene label .hint, body .aud-label .hint, body .ed-scene label .muted {
  font-size: 12px; font-weight: 400; color: var(--ed-w2);
}
/* 输入控件:统一圆角与底色,焦点环走品牌色。
   原来各页 1.5px 描边 + 白底 + 各自的圆角(8/9/10/12 都有)。 */
body .ed-scene input[type="text"], body .ed-scene input[type="url"],
body .ed-scene input[type="number"], body .ed-scene input[type="search"],
body .ed-scene select, body .ed-scene textarea,
body .aud-panel input[type="text"], body .aud-panel select, body .aud-panel textarea {
  border: 1px solid var(--ed-border); background: var(--ed-s1); color: var(--ed-text);
  border-radius: 10px; font-size: 14.5px; font-family: inherit;
}
/* 内距与高度也要给 —— 只改边框和圆角的话,控件仍是浏览器默认尺寸。
   drama 的 `.select-wrap > select` 全站**从来没有样式**(那个类名在任何
   CSS 里都查不到),一直是裸控件;选项还没填时会塌成一条细线。
   这类"一直如此所以没人提"的地方,正是收敛设计系统时该顺手补齐的。 */
body .ed-scene input[type="text"], body .ed-scene input[type="url"],
body .ed-scene input[type="number"], body .ed-scene input[type="search"],
body .ed-scene select, body .ed-scene textarea,
body .aud-panel input[type="text"], body .aud-panel select, body .aud-panel textarea {
  padding: 9px 11px; min-height: 38px;
}
body .ed-scene .select-wrap { display: block; }
body .ed-scene .select-wrap > select { width: 100%; }
body .ed-scene textarea { min-height: 84px; line-height: 1.7; }

body .ed-scene input:focus, body .ed-scene select:focus, body .ed-scene textarea:focus,
body .aud-panel input:focus, body .aud-panel select:focus, body .aud-panel textarea:focus {
  outline: none; border-color: var(--ed-brand); box-shadow: 0 0 0 3px var(--ed-brand-bg);
}
/* chip 类:全站一个尺度 */
body .ed-scene .chip, body .ed-scene .ed-chip, body .aud-panel .chip {
  font-size: 13px; border-radius: 999px; padding: 6px 13px; font-weight: 600;
}
/* 面板本身:圆角与阴影跟 Avatar 的 .panel 对齐 */
body .ed-scene .panel, body .aud-panel {
  border-radius: 18px; box-shadow: var(--ed-shadow-card);
}