@charset "UTF-8";
/* ==========================================================================
   幻镜 · Liquid Glass 皮肤 v2（colensme 插件：创意自拍室 /me、样片库 /insp）

   原则
   - 功能、文案、流程全部保留：只用 CSS 重新布局和上色；skin.js 只加纯装饰元素。
   - 所有规则挂在 html.lg 下（head 里一行脚本加上这个类）；去掉类即回到原样。
   - 珍珠白 / 墨色 + 样片虚化色场；选中态用中性的墨色胶囊或白色液滴，品牌粉只给主操作。
   - 大面板用“静态磨砂”（半透明底色压在已虚化的色场上，不做实时模糊）；
     真实模糊与折射只给小控件——手机也能流畅。
   - 伪元素里的状态文案（当前 / ✓ 已完成 / 进行中…）不改 content，只改外观。
   - 颜色一律静态值（站主平板 Chrome 114 的 color-mix 变量有 bug）。
   - 主题“FPS 加速”（body.fps-accelerat）会全站 unset backdrop-filter；这两个页面由
     skin.js 的分级与帧率守门负责降级，所以控件上的模糊都带 !important。
   ========================================================================== */

/* 液滴滑块的位置与形变（注册后才能被 animate() 平滑插值） */
@property --lg-tx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lg-ty { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lg-tw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lg-th { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lg-tsx { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --lg-tsy { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --lg-to { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- 0. 设计变量 ---------- */
html.lg {
  --lg-rose: #f0448f;
  --lg-rose-rgb: 240, 68, 143;
  --lg-mint: #14a974;
  --lg-fav: #e2466b;
  --lg-font: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --lg-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, var(--lg-font);

  --lg-spring: linear(0, 0.057, 0.194, 0.367, 0.544, 0.706, 0.839, 0.941, 1.012, 1.056, 1.078, 1.084, 1.078, 1.066, 1.052, 1.037, 1.024, 1.013, 1.004, 0.999, 0.995, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
  --lg-settle: linear(0, 0.037, 0.128, 0.246, 0.372, 0.496, 0.609, 0.707, 0.79, 0.856, 0.908, 0.947, 0.976, 0.995, 1.008, 1.015, 1.019, 1.02, 1.019, 1.017, 1.015, 1.012, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1);
  --lg-ease: cubic-bezier(.2, .8, .2, 1);

  /* 同心圆角：36 → 24 → 16 → 10 */
  --lg-r-xl: 36px;
  --lg-r-l: 24px;
  --lg-r-m: 16px;
  --lg-r-s: 10px;
}
/* 日间：暖燕麦灰底（比纯白暗一档、偏暖，长时间看不刺眼），面板是半透明暖白玻璃，
   面板里的控件底座是“下凹的井”（比面板深一点），选中项是浮起的白色液滴——层次靠明暗拉开，不再白叠白。
   玻璃件外圈加一道极细的暖灰描边，浅色背景上也能看出轮廓。 */
html.lg body {
  --lg-bg: #e7e2da;
  --lg-ink: #221f1c;
  --lg-ink-2: rgba(34, 31, 28, .72);
  --lg-ink-3: rgba(34, 31, 28, .54);
  --lg-line: rgba(70, 52, 34, .1);
  --lg-divider: rgba(70, 52, 34, .17);
  --lg-rose-ink: #c41d68;
  --lg-mint-ink: #0e7f57;
  --lg-glass: rgba(255, 252, 247, .4);
  --lg-glass-clear: rgba(255, 252, 247, .14);
  --lg-glass-regular: rgba(252, 249, 244, .56);
  --lg-glass-thick: rgba(251, 248, 243, .86);
  --lg-inset: rgba(80, 60, 40, .06);
  --lg-inset-2: rgba(80, 60, 40, .1);
  --lg-glow: rgba(255, 255, 255, .8);
  --lg-veil: rgba(231, 226, 218, .6);
  --lg-sel: #221f1c;               /* 实心元素（搜索按钮、用途角标） */
  --lg-sel-ink: #ffffff;
  --lg-thumb: rgba(255, 255, 255, .94);
  --lg-thumb-ink: #221f1c;
  --lg-hairline: 0 0 0 .5px rgba(70, 52, 34, .14);
  --lg-shadow-soft: 0 10px 30px -16px rgba(56, 40, 24, .34), 0 0 0 .5px rgba(70, 52, 34, .12);
  --lg-shadow-float: 0 18px 40px -18px rgba(56, 40, 24, .42), 0 3px 10px -4px rgba(56, 40, 24, .16), 0 0 0 .5px rgba(70, 52, 34, .12);
  --lg-shadow-deep: 0 40px 80px -40px rgba(56, 40, 24, .58), 0 0 0 .5px rgba(70, 52, 34, .12);
  --lg-scrim: rgba(40, 32, 24, .3);
  --lg-mint-tint: rgba(20, 169, 116, .14);
  --lg-rose-tint: rgba(240, 68, 143, .12);
  --lg-well: rgba(90, 68, 46, .075);
  --lg-well-edge: inset 0 1px 2px rgba(56, 40, 24, .12), inset 0 -1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(70, 52, 34, .08);
  /* 选中液滴 / 次要按钮：半透明玻璃，上半截亮、下半截透出背后的颜色（--lg-tint 由 skin.js 从色场取平均色，
     默认暖米色）。边缘的光由 skin.js 按形状和光源方向烘焙成图叠上去（见 skin.js 4b），
     这里不再画一圈均匀的白色内描边，只留外阴影、极细的轮廓和内光晕 */
  --lg-tint: 238, 226, 211;
  --lg-drop: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(var(--lg-tint), .36));
  --lg-drop-shadow: 0 6px 14px -6px rgba(56, 40, 24, .34), 0 0 0 .5px rgba(70, 52, 34, .16), inset 0 0 16px -4px rgba(255, 255, 255, .6);
  --lg-glass-btn: linear-gradient(180deg, rgba(255, 253, 249, .6), rgba(var(--lg-tint), .3));
  --lg-drop-ink: #221f1c;
  --lg-switch-off: rgba(80, 60, 40, .2);
  --lg-switch-ring: rgba(70, 52, 34, .1);
  --lg-focus-ring: 0 0 0 3px rgba(70, 52, 34, .14);
  --lg-edge: inset 0 1px .5px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .3), inset 0 0 20px -8px rgba(255, 255, 255, .85);
  color-scheme: light;
}
html.lg body.dark-theme {
  --lg-bg: #121319;
  --lg-ink: #f3f3f7;
  --lg-ink-2: rgba(243, 243, 247, .74);
  --lg-ink-3: rgba(243, 243, 247, .56);
  --lg-line: rgba(255, 255, 255, .09);
  --lg-divider: rgba(255, 255, 255, .18);
  --lg-rose-ink: #ff86be;
  --lg-mint-ink: #4fe0a8;
  --lg-glass: rgba(60, 60, 76, .32);
  --lg-glass-clear: rgba(255, 255, 255, .07);
  --lg-glass-regular: rgba(36, 36, 46, .58);
  --lg-glass-thick: rgba(30, 30, 38, .84);
  --lg-inset: rgba(255, 255, 255, .06);
  --lg-inset-2: rgba(255, 255, 255, .1);
  --lg-glow: rgba(255, 255, 255, .15);
  --lg-veil: rgba(18, 19, 25, .56);
  --lg-sel: #f3f3f7;
  --lg-sel-ink: #16161d;
  --lg-thumb: rgba(84, 84, 100, .72);
  --lg-thumb-ink: #ffffff;
  --lg-shadow-soft: 0 10px 30px -14px rgba(0, 0, 0, .62);
  --lg-shadow-float: 0 18px 44px -16px rgba(0, 0, 0, .72), 0 3px 10px -4px rgba(0, 0, 0, .4);
  --lg-shadow-deep: 0 40px 90px -36px rgba(0, 0, 0, .85);
  --lg-scrim: rgba(6, 6, 10, .5);
  --lg-mint-tint: rgba(79, 224, 168, .14);
  --lg-rose-tint: rgba(255, 134, 190, .14);
  --lg-well: rgba(255, 255, 255, .06);
  --lg-well-edge: inset 0 1px .5px rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -8px 16px -12px rgba(0, 0, 0, .5);
  --lg-tint-d: 92, 84, 110;
  --lg-drop: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(var(--lg-tint-d), .16));
  --lg-drop-shadow: 0 6px 18px -6px rgba(0, 0, 0, .65), inset 0 0 16px -4px rgba(255, 255, 255, .3);
  --lg-glass-btn: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(var(--lg-tint-d), .12));
  --lg-drop-ink: #ffffff;
  --lg-switch-off: rgba(255, 255, 255, .2);
  --lg-switch-ring: rgba(255, 255, 255, .12);
  --lg-hairline: 0 0 0 .5px rgba(255, 255, 255, .06);
  --lg-focus-ring: 0 0 0 3px rgba(255, 255, 255, .16);
  --lg-edge: inset 0 1px .5px var(--lg-glow), inset 0 -1px 1px rgba(255, 255, 255, .1), inset 0 0 22px -8px var(--lg-glow);
  color-scheme: dark;
}
/* 材质配方 */
html.lg body {
  --lg-glass-shadow: var(--lg-shadow-soft), var(--lg-edge);
  --lg-float-shadow: var(--lg-shadow-float), var(--lg-edge);
  --lg-blur: blur(16px) saturate(1.9);
}

/* ---------- 1. 页面底：样片虚化色场 ---------- */
/* 作者主页（html.lg-author）只给样片块和弹窗换皮：页面底色、色场、顶栏底栏、容器宽度都保持主题原样，
   否则作者页的文章 / 评论等其他 tab 也会被改 */
html.lg:not(.lg-author) body { --body-bg-color: var(--lg-bg); background-color: var(--lg-bg); color: var(--lg-ink); }
html.lg .lg-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 10% -4%, rgba(240, 68, 143, .16), transparent 70%),
    radial-gradient(52vmax 40vmax at 96% 6%, rgba(120, 110, 255, .16), transparent 70%),
    radial-gradient(56vmax 46vmax at 80% 96%, rgba(80, 170, 255, .12), transparent 72%),
    var(--lg-bg);
}
/* 照片由 skin.js 画在几十像素的小画布上（已虚化），这里只负责拉伸铺满：没有 CSS filter，
   滑动时不用每帧重算模糊（主题灯箱的 .imgbox-show * { filter: unset } 也就影响不到它了） */
html.lg .lg-ambient canvas {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--lg-ease);
}
html.lg .lg-ambient canvas.on { opacity: .9; }
/* 日间：色场只留一点照片的颜色倾向（降饱和、降浓度），换到大红 / 大绿的精选图时整页也不会被染色 */
html.lg body:not(.dark-theme) .lg-ambient canvas.on { opacity: .62; }
html.lg .lg-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 0%, var(--lg-veil) 70%), var(--lg-veil);
}
/* 主题“文章卡片”透明化，让插件直接浮在色场上 */
html.lg .page-article:has(.smgpt-tool),
html.lg:not(.lg-author) .page-article:has(.colensme-sample-library) {
  overflow: visible;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}
html.lg:not(.lg-author) main.container:has(.colensme-sample-library) { max-width: min(1720px, 100%); }
/* 桌面右侧是主题的浮动工具条：两边各留出它的位置，卡片不会被压住 */
@media (min-width: 1100px) {
  html.lg:not(.lg-author) main.container:has(.colensme-sample-library) { max-width: min(1720px, calc(100vw - 180px)); }
  html.lg .colensme-sample-library:not(.colensme-author-samples) { padding-inline: 12px; }
}
html.lg main.container:has(.smgpt-tool) { max-width: 1320px; }

/* 主题顶栏 / 手机底栏：在这两个页面上换成通透玻璃（结构不动） */
html.lg:not(.lg-author) body .header,
html.lg:not(.lg-author) body .footer-tabbar {
  background: var(--lg-glass-regular) !important;
  box-shadow: 0 1px 0 var(--lg-line), 0 10px 30px -20px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) !important;
  backdrop-filter: blur(22px) saturate(1.9) !important;
}
html.lg:not(.lg-author) body .header .navbar-top { background: transparent !important; }
/* 主题页脚：只换底色（半透明玻璃压在色场上），日间不再是一整块纯白 */
html.lg:not(.lg-author) body footer.footer { background: var(--lg-glass) !important; box-shadow: 0 -1px 0 var(--lg-line); }

/* ---------- 2. 字体与断行 ---------- */
html.lg :is(.colensme-sample-library, .colensme-sample-portal, .colensme-sample-favorite-notice, .smgpt-tool, .smgpt-status-notice, .smgpt-gallery-favorite-overlay, .smgpt-theme-lightbox-actions) {
  font-family: var(--lg-font);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
/* 用 text-wrap-style（只管断行算法），不能用 text-wrap 简写：它会把 white-space: nowrap 重置成可换行 */
html.lg :is(.smgpt-tool, .colensme-sample-library, .colensme-sample-portal) :is(h1, h2, h3, h4) { text-wrap-style: balance; }
html.lg :is(.smgpt-tool, .colensme-sample-library, .colensme-sample-portal) :is(p, small) { text-wrap-style: pretty; }

/* ---------- 3. 通用玻璃件 ---------- */

/* ==========================================================================
   样片库 /insp
   ========================================================================== */
html.lg .colensme-sample-library,
html.lg .colensme-sample-portal {
  --colensme-sample-ink: var(--lg-ink);
  --colensme-sample-muted: var(--lg-ink-2);
  --colensme-sample-line: var(--lg-line);
  --colensme-sample-soft: var(--lg-inset);
  --colensme-sample-surface: var(--lg-glass-thick);
  --colensme-sample-card: transparent;
  color: var(--lg-ink);
}
html.lg .colensme-sample-library:not(.colensme-author-samples) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 1680px);
  margin-top: 8px;
  padding: 0 24px 72px;
}

/* --- 页头：超大标题 --- */
html.lg .colensme-sample-header {
  align-items: flex-end;
  gap: 24px;
  padding: 56px 0 30px;
  border: 0;
}
html.lg .colensme-sample-header p {
  color: var(--lg-ink-3);
  font-weight: 600;
  /* ★ 0.9.863 站长 10-14：那行小字「创意自拍室」要**稍微大点**，且左右两端和下面「样」字对齐。
     真机几何：标题 96px 时「样」的**墨迹**宽正好 = 96px（= 1em，中日韩字形就是这个宽度）；
     旧样式（15px + .08em）墨迹只有 81px ⇒ 右边短 15px。
     ⇒ 字号取标题的 17/96 ≈ .177 倍、字距 .13em：5 个字 ×(1+.13) ≈ 1em 标题字号 ⇒ **两端精确对齐**。
     两项都用比例（标题是 clamp(56px,7.4vw,96px)）⇒ 任何屏宽都成立，小屏也不会散架。 */
  font-size: clamp(8.85px, 1.31vw, 17px);   /* 下限 = 50px 标题时的等比値（原来 10px 会超 6.5px） */
  letter-spacing: .13em;
}
html.lg .colensme-sample-header h1 {
  margin-top: 10px;
  color: var(--lg-ink);
  font-size: clamp(56px, 7.4vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  /* ★ 0.9.862 站长 10-14（看样片库页头）："样片库这三个字字距太近"，
     要求**以「片」对齐下面「慢」的左边缘**为准。
     真机几何：标题 96px、副标题 20px，「样」=121.5、「慢」左=241.5 ⇒ 需要的每字步进 = 120px
     ⇒ 字距 = 120 − 96 = **24px = .25em**（实测改完「片左−慢左 = 0」✓，标题总宽 276→360，
     刚好和副标题那行宽度相当）。用 em 不用 px：标题字号是 clamp(56…96)，小屏按比例缩才不畸形。 */
  letter-spacing: .25em;
}
/* ★ 0.9.864 副标题改成**按标题等比**（站长 10-14 定的两处对齐要"任何宽度都成立"）。
   比例取 **1.25/6**：标题字距 .25em ⇒ 「片」在 1.25 个标题字宽处；副标题第 7 个字「慢」在 6 个副标题字宽处
   ⇒ 只要副标题字号 = 标题字号 × 1.25/6，两处**恒等**（96px→20px、56px→11.67px、50px→10.42px）。
   基础这里用 clamp 跟住 7.4vw 那段；两个断点里标题被写死 56/50，所以副标题也在那儿跟着写死（见下面）。 */
html.lg .colensme-sample-header span { margin-top: 14px; color: var(--lg-ink-2); font-size: clamp(10.42px, 1.542vw, 20px); line-height: 1.55; }
html.lg .colensme-sample-header-actions { display: flex; gap: 10px; }

/* 胶囊按钮：返回 = 中性玻璃，投稿 = 品牌粉玻璃 */
html.lg :is(.colensme-sample-return, .colensme-sample-return:link, .colensme-sample-return:visited, .colensme-sample-submit-open) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  filter: none;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  transition: transform .5s var(--lg-spring), box-shadow .3s var(--lg-ease), background-color .3s var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
html.lg :is(.colensme-sample-return, .colensme-sample-return:link, .colensme-sample-return:visited) {
  color: var(--lg-ink) !important;
  -webkit-text-fill-color: var(--lg-ink) !important;
  background: var(--lg-glass-btn);
  box-shadow: var(--lg-glass-shadow);
}
html.lg .colensme-sample-submit-open {
  color: #fff;
  background: rgba(240, 68, 143, .84);
  box-shadow: 0 14px 30px -14px rgba(200, 30, 100, .8), inset 0 1px .5px rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(255, 255, 255, .2), inset 0 0 22px -6px rgba(255, 255, 255, .55);
}
html.lg :is(.colensme-sample-return, .colensme-sample-submit-open):hover,
html.lg :is(.colensme-sample-return, .colensme-sample-submit-open):focus-visible { transform: translateY(-2px); outline: none; filter: none; }
html.lg :is(.colensme-sample-return, .colensme-sample-submit-open):active { transform: scale(.955); transition-duration: .12s; }

/* --- 搜索 + 分类：同一行两枚玻璃胶囊，桌面吸顶 --- */
html.lg .colensme-sample-searchbar { width: 100%; margin: 0 0 14px; }
html.lg .colensme-sample-search-control {
  border-radius: 999px;
  background: var(--lg-glass-regular);
  box-shadow: var(--lg-float-shadow);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
}
html.lg .colensme-sample-search-control::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--lg-ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
html.lg .colensme-sample-searchbar input {
  min-height: 58px;
  padding: 0 104px 0 50px;
  color: var(--lg-ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 16px;
}
html.lg .colensme-sample-searchbar input::placeholder { color: var(--lg-ink-3); opacity: 1; }
html.lg .colensme-sample-searchbar input:focus { outline: none; border: 0; }
html.lg .colensme-sample-search-control:focus-within { border-radius: 999px; background: var(--lg-glass-thick); box-shadow: var(--lg-float-shadow), var(--lg-focus-ring); }
html.lg .colensme-sample-searchbar button {
  top: 7px;
  right: 7px;
  bottom: 7px;
  min-width: 80px;
  padding: 0 20px;
  color: var(--lg-sel-ink);
  background: var(--lg-sel);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
  font-size: 15px;
  font-weight: 600;
  filter: none;
  transition: transform .45s var(--lg-spring);
}
html.lg .colensme-sample-searchbar button:hover,
html.lg .colensme-sample-searchbar button:focus-visible { color: var(--lg-sel-ink); background: var(--lg-sel); border: 0; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5); filter: none; }
html.lg .colensme-sample-searchbar button:active:not(:disabled) { transform: scale(.94); }

/* 顶部对齐：分类展开变高时，右边的“展开 / 我的收藏 / 我的投稿”留在原位，不跟着往下移（插件默认垂直居中） */
html.lg .colensme-sample-discovery-row { gap: 10px; margin: 0 0 14px; align-items: start; }
html.lg .colensme-sample-category-strip { gap: 10px; }
html.lg .colensme-sample-category-strip .colensme-sample-filters {
  gap: 2px;
  min-height: 58px;
  max-height: 58px;
  padding: 6px;
  border-radius: 29px;
  background: var(--lg-glass-regular);
  box-shadow: var(--lg-float-shadow);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
}
html.lg .colensme-sample-category-strip[data-expanded="true"] .colensme-sample-filters { max-height: 720px; }
/* 选中的分类：一滴玻璃液滴（和分段控件同一种，画在轨道自己的 ::before 上，位置由 skin.js 写入变量） */
html.lg .colensme-sample-filters::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--lg-tw, 0px);
  height: var(--lg-th, 0px);
  transform: translate(var(--lg-tx, 0px), var(--lg-ty, 0px)) scale(var(--lg-tsx, 1), var(--lg-tsy, 1));
  border-radius: 999px;
  background: var(--lg-drop);
  box-shadow: var(--lg-drop-shadow);
  -webkit-backdrop-filter: blur(6px) saturate(1.6) !important;
  backdrop-filter: blur(6px) saturate(1.6) !important;
  opacity: var(--lg-to, 0);
  pointer-events: none;
}
html.lg .colensme-sample-filters button,
html.lg .colensme-sample-filters button:hover,
html.lg .colensme-sample-filters button:focus-visible,
html.lg .colensme-sample-filters button[aria-pressed="true"] {
  position: relative;
  z-index: 1;
  height: 46px;
  min-height: 46px;
  padding: 0 17px;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  filter: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .35s var(--lg-ease), background-color .25s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .colensme-sample-filters button:hover,
html.lg .colensme-sample-filters button:focus-visible { color: var(--lg-ink); background: var(--lg-inset); }
html.lg .colensme-sample-filters button[aria-pressed="true"] { color: var(--lg-drop-ink); font-weight: 600; background: transparent; }
html.lg .colensme-sample-filters:not([data-lg-thumb]) button[aria-pressed="true"] { background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
/* 桌面收起状态：鼠标按住拖动横向浏览（skin.js），光标提示可以拖 */
@media (hover: hover) and (pointer: fine) {
  html.lg .colensme-sample-category-strip:not([data-expanded="true"]) .colensme-sample-filters { cursor: grab; }
  html.lg .colensme-sample-filters.lg-grabbing,
  html.lg .colensme-sample-filters.lg-grabbing button { cursor: grabbing; user-select: none; }
}
html.lg .colensme-sample-filters button:active:not(:disabled) { transform: scale(.95); box-shadow: none; filter: none; }
html.lg .colensme-sample-filters button:disabled { opacity: .5; }

html.lg :is(.colensme-sample-category-toggle, .colensme-sample-account-toggle) {
  position: relative;
  height: 58px;
  min-height: 58px;
  margin-top: 0;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-float-shadow);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  font-size: 15px;
  font-weight: 500;
  filter: none;
  transition: color .3s var(--lg-ease), background-color .3s var(--lg-ease), transform .5s var(--lg-spring);
}
html.lg .colensme-sample-category-toggle { min-width: 118px; padding: 0 40px 0 22px; }
html.lg .colensme-sample-category-toggle::after { right: 20px; }
html.lg .colensme-sample-account-toggle { padding: 0 22px; gap: 8px; }
html.lg :is(.colensme-sample-category-toggle, .colensme-sample-account-toggle):is(:hover, :focus-visible),
html.lg .colensme-sample-category-toggle[aria-expanded="true"] {
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  box-shadow: var(--lg-float-shadow);
  transform: translateY(-1px);
}
html.lg .colensme-sample-account-toggle[aria-pressed="true"] { color: var(--lg-drop-ink); background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .colensme-sample-favorites-toggle:not([aria-pressed="true"])::before,
html.lg .colensme-sample-favorites-toggle:is(:hover, :focus-visible):not([aria-pressed="true"])::before { background: var(--lg-fav); }
html.lg .colensme-sample-submissions-toggle:not([aria-pressed="true"])::before,
html.lg .colensme-sample-submissions-toggle:is(:hover, :focus-visible):not([aria-pressed="true"])::before { background: var(--lg-ink-2); }
html.lg :is(.colensme-sample-category-toggle, .colensme-sample-account-toggle):active { transform: scale(.955); transition-duration: .12s; }
@media (hover: none), (pointer: coarse) {
  html.lg .colensme-sample-account-toggle[aria-pressed="false"] { color: var(--lg-ink); background: var(--lg-glass-regular); box-shadow: var(--lg-float-shadow); }
}

/* 宽屏：搜索与分类并成一行，一起吸顶；照片从玻璃下面滑过 */
@media (min-width: 1100px) {
  html.lg .colensme-sample-library:not(.colensme-author-samples) { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: 12px; }
  html.lg .colensme-sample-library:not(.colensme-author-samples) > * { grid-column: 1 / -1; }
  html.lg .colensme-sample-library:not(.colensme-author-samples) > .colensme-sample-searchbar { grid-column: 1; margin: 0; }
  html.lg .colensme-sample-library:not(.colensme-author-samples) > .colensme-sample-discovery { grid-column: 2; }
  html.lg .colensme-sample-library:not(.colensme-author-samples) > :is(.colensme-sample-searchbar, .colensme-sample-discovery) {
    position: sticky;
    top: 12px;
    z-index: 950;                  /* 0.9.978：必须低于主题顶栏（999）——1002 会盖住主题的用户下拉菜单（§数 .sub-menu 只有 99） */
    align-self: start;
    transition: top .45s var(--lg-settle);
  }
  html.lg body.nav-fixed:not(.scroll-down) .colensme-sample-library > :is(.colensme-sample-searchbar, .colensme-sample-discovery) { top: 80px; }
  html.lg .colensme-sample-discovery-row { margin: 0; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  html.lg .colensme-sample-discovery { position: sticky; top: 12px; z-index: 950; }
  html.lg body.nav-fixed:not(.scroll-down) .colensme-sample-discovery { top: 80px; }
}

/* --- 状态行 / 空状态 / 加载更多 --- */
html.lg .colensme-sample-status { margin: 18px 6px 16px; color: var(--lg-ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
html.lg .colensme-sample-empty { color: var(--lg-ink-2); font-size: 16px; padding: 64px 0; }
html.lg .colensme-sample-more-wrap { padding: 28px 0 6px; }
html.lg .colensme-sample-more-wrap button {
  position: relative;
  min-height: 50px;
  padding: 0 30px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  font-size: 15px;
  font-weight: 600;
}
html.lg .colensme-sample-more-wrap button:hover,
html.lg .colensme-sample-more-wrap button:focus-visible { color: var(--lg-ink); border: 0; background: var(--lg-glass-thick); }

/* --- 样片卡：大圆角照片，角上浮着玻璃角标；悬停浮起，底部浮出作者和“一键使用” --- */
/* 列数仍由插件计算（按“期望列宽 + 间距”自适应，最少 2 列、最多 7 列），这里只把期望列宽从 210 调到 220：
   1280 屏 4 列、1440 屏 5 列、1920 屏 7 列、平板 3 列、手机 2 列 */
html.lg .colensme-sample-grid { --colensme-sample-preferred-width: 220px; gap: 8px; }
@media (max-width: 1099px) { html.lg .colensme-sample-grid { --colensme-sample-preferred-width: 210px; gap: 6px; } }
html.lg .colensme-sample-card,
html.lg .colensme-sample-media,
html.lg .colensme-sample-preview { border-radius: var(--lg-r-l); }
html.lg .colensme-sample-card {
  background: transparent;
  border: 0;
  box-shadow: 0 22px 44px -26px rgba(56, 40, 24, .55);
}
html.lg body.dark-theme .colensme-sample-card { box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .85); }
html.lg .colensme-sample-media { background: var(--lg-inset); }
html.lg .colensme-sample-grid[data-masonry-ready="true"] > .colensme-sample-card { transition: box-shadow .4s var(--lg-ease), transform .55s var(--lg-spring); }
html.lg .colensme-sample-card:hover,
html.lg .colensme-sample-card:focus-within:not([data-lg-idle]),
html.lg .colensme-sample-card.is-touch-focused {
  border: 0;
  box-shadow: 0 34px 60px -28px rgba(56, 40, 24, .65);
  transform: translateY(-5px);
}
html.lg body.dark-theme .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) { box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95); }
@media (hover: none), (pointer: coarse) {
  html.lg .colensme-sample-card:active,
  html.lg .colensme-sample-card:focus-within:not([data-lg-idle]) { border: 0; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); transform: translateY(-3px); }
}
html.lg .colensme-sample-preview img { transition: transform .8s var(--lg-settle); }
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-preview img { transform: scale(1.04); }

/* 旧卡片（焦点还留在里面、但指针已经去了别的卡片，见 skin.js 5g）：收起按钮组和作者胶囊。
   插件自己的规则是“卡内有焦点就显示”，这里对旧卡片压回隐藏 */
html.lg .colensme-sample-card[data-lg-idle]:not(:hover, .is-touch-focused) :is(.colensme-sample-cover-actions, .colensme-sample-card-author) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s;
}
html.lg .smgpt-gallery-card[data-lg-idle]:not(:hover, [data-actions-visible="true"]) > .smgpt-gallery-card-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s;
}

/* 「词」角标：原设计常驻（含可复制提示词的唯一提示），换成绿色玻璃小圆 */
html.lg .colensme-sample-prompt-badge {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  background: rgba(20, 169, 116, .8);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), 0 4px 12px -4px rgba(0, 0, 0, .5);
}
/* 作者：聚焦时从照片底部浮起的玻璃小胶囊。
   不用透明度渐显——backdrop-filter 放在渐显的父层里会“晚一帧才模糊”，看起来像闪一下；
   改成可见性切换 + 位移，渐变底衬单独在 ::before 上淡入。 */
html.lg .colensme-sample-card .colensme-sample-card-author {
  height: 90px;
  padding: 0 10px 10px;
  background: none;
  border-radius: 0 0 var(--lg-r-l) var(--lg-r-l);
  opacity: 1;
  transition: visibility 0s linear .2s;
}
html.lg .colensme-sample-card .colensme-sample-card-author::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, transparent, rgba(8, 10, 13, .42));
  opacity: 0;
  transition: opacity .2s var(--lg-ease);
  pointer-events: none;
}
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-card-author { opacity: 1; transition-delay: 0s; }
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-card-author::before { opacity: 1; }
html.lg .colensme-sample-card-author-identity {
  position: relative;
  gap: 7px;
  max-width: 100%;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 0 12px -4px rgba(255, 255, 255, .45), 0 4px 12px -6px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transform: translateY(8px);
  transition: transform .5s var(--lg-spring);
}
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-card-author-identity { transform: none; }
html.lg .colensme-sample-card-author img { flex-basis: 26px; width: 26px; height: 26px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }

/* 收藏 / 一键使用：保持原设计——挂在卡片下方外侧、不占瀑布流高度，做成浮起的玻璃胶囊 */
html.lg .colensme-sample-card .colensme-sample-cover-actions {
  top: calc(100% + 8px);
  left: 4px;
  right: 4px;
  height: 52px;
  gap: 6px;
  padding: 6px;
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
  backdrop-filter: blur(26px) saturate(1.8) !important;
  opacity: 1;
  transform: translateY(-8px) scale(.94);
  transform-origin: 50% 0;
  transition: transform .5s var(--lg-spring), visibility 0s linear .2s;
}
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-cover-actions { transform: none; transition-delay: 0s; }
/* 卡片与操作条之间留了 8px：搭一座看不见的桥，指针移过去时不会断开 */
html.lg .colensme-sample-card .colensme-sample-cover-actions::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
html.lg .colensme-sample-card :is(.colensme-sample-use-cover, .colensme-sample-favorite-cover) {
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transform: none;
}
html.lg .colensme-sample-card .colensme-sample-favorite-cover {
  position: relative;
  gap: 6px;
  color: var(--lg-ink);
  background: var(--lg-well);
  box-shadow: var(--lg-well-edge);
  transition: color .25s var(--lg-ease), background-color .25s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .colensme-sample-card .colensme-sample-favorite-cover:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-glass-regular); border: 0; box-shadow: var(--lg-well-edge); }
html.lg .colensme-sample-card .colensme-sample-favorite-cover:is(:hover, :focus-visible):not([aria-pressed="true"]) .colensme-sample-favorite-icon path { stroke: var(--lg-fav) !important; }
html.lg .colensme-sample-card .colensme-sample-favorite-cover[aria-pressed="true"] {
  color: #fff;
  background: rgba(226, 70, 107, .88);
  border: 0;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), 0 8px 18px -8px rgba(226, 70, 107, .8);
}
html.lg .colensme-sample-card :is(.colensme-sample-use-cover, .colensme-sample-favorite-cover):active { transform: scale(.94); }
/* 品牌粉玻璃：一键使用 / 详情里的一键使用 */
html.lg .colensme-sample-use {
  position: relative;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: rgba(240, 68, 143, .84);
  box-shadow: 0 12px 26px -12px rgba(200, 30, 100, .85), inset 0 1px .5px rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(255, 255, 255, .2), inset 0 0 20px -6px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  font-size: 14px;
  font-weight: 600;
}
html.lg .colensme-sample-use:hover,
html.lg .colensme-sample-use:focus-visible { color: #fff; filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(200, 30, 100, .9), inset 0 1px .5px rgba(255, 255, 255, .75); transform: translateY(-1px); }
html.lg .colensme-sample-use:active:not(:disabled) { transform: scale(.955); filter: none; box-shadow: 0 8px 18px -10px rgba(200, 30, 100, .8), inset 0 1px .5px rgba(255, 255, 255, .6); }

/* --- 弹窗：遮罩与主题灯箱同色同模糊（切换时不跳） --- */
html.lg .colensme-sample-work-dialog,
html.lg .colensme-sample-use-dialog,
html.lg .colensme-sample-prompt-dialog {
  background: var(--lg-scrim);
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
}
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .imgbox-bg {
  background: var(--lg-scrim) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
}
/* 从大图返回详情（skin.js 5f）：详情弹窗不做 200ms 淡入，带着自己的模糊直接出现；
   正在淡出的灯箱底板也保持同样的遮罩和模糊，背后的页面全程不会露出清晰状态 */
html.lg .colensme-sample-work-dialog[data-lg-return] { transition: none !important; }
html.lg.lg-lb-closing body .mini-imgbox .imgbox-bg {
  background: var(--lg-scrim) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
}
html.lg :is(.colensme-sample-work-shell, .colensme-sample-use-dialog form, .colensme-sample-prompt-dialog form) {
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: var(--lg-r-xl);
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
}
html.lg .colensme-sample-work-shell { width: min(960px, calc(100vw - 28px)); padding: 18px 22px 16px; scrollbar-width: none; transition: transform .6s var(--lg-settle); }
html.lg .colensme-sample-work-shell::-webkit-scrollbar { display: none; }
/* 0.9.667：打开时只从下往上滑入，不再缩放——缩放会让照片左右边缘外扩，主线程一卡就像照片往左跳了一下 */
html.lg .colensme-sample-work-dialog[data-opening="true"] .colensme-sample-work-shell { transform: translateY(24px); }
html.lg .colensme-sample-work-shell > header { margin-bottom: 10px; align-items: flex-start; }
html.lg .colensme-sample-work-shell > header h2 { font-family: var(--lg-num); font-size: 26px; font-weight: 750; letter-spacing: .02em; }
html.lg .colensme-sample-work-tags { gap: 6px; margin-top: 10px; }
html.lg :is(.colensme-sample-work-usage-badge, .colensme-sample-work-categories button) {
  /* 行高定死、内边距上下相等：主题给按钮的默认行高让字偏上 1.6px */
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
html.lg .colensme-sample-work-usage-badge { color: var(--lg-drop-ink); font-weight: 650; background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .colensme-sample-work-categories button,
html.lg body.dark-theme .colensme-sample-work-categories button {
  color: var(--lg-ink);
  background: var(--lg-inset-2);
  border: 0;
  transition: background-color .25s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .colensme-sample-work-categories button:is(:hover, :focus-visible) { background: var(--lg-glass-regular); box-shadow: var(--lg-glass-shadow); transform: translateY(-1px); }
/* 关闭：中性玻璃圆钮 */
html.lg :is(.colensme-sample-work-shell > header > button, .colensme-sample-dialog-close) {
  color: var(--lg-ink);
  background: var(--lg-inset-2);
  border: 0;
  box-shadow: inset 0 1px .5px var(--lg-glow);
  transition: transform .5s var(--lg-spring), background-color .25s var(--lg-ease);
}
html.lg .colensme-sample-work-shell > header > button { width: 46px; height: 46px; flex-basis: 46px; }
html.lg :is(.colensme-sample-work-shell > header > button, .colensme-sample-dialog-close):is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-glass-regular); outline: none; filter: none; transform: rotate(90deg); }
html.lg .colensme-sample-work-notice { gap: 10px; margin-bottom: 10px; color: var(--lg-ink-2); line-height: 1.6; }
html.lg .colensme-sample-work-notice strong,
html.lg body.dark-theme .colensme-sample-work-notice strong { padding: 3px 11px; color: var(--lg-ink); background: var(--lg-inset-2); border-radius: 999px; font-size: 13px; font-weight: 600; }
html.lg .colensme-sample-work-stage { border-radius: var(--lg-r-l); background: var(--lg-inset); }
html.lg :is(.colensme-sample-work-image, .colensme-sample-work-image img) { background: transparent; }
html.lg .colensme-sample-work-nav {
  /* 按钮里还留着文字字符“‹ ›”（字号已设 0）：grid 会给它和 ::before 各排一行（实测 35px + 15px），
     矢量箭头落在上面那行，看起来偏上。改成普通块并把箭头绝对定位到正中，不受文字行影响 */
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #fff;
  background: rgba(20, 20, 28, .2);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 0 14px -4px rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
  font-size: 0;
  line-height: 0;
  transition: transform .5s var(--lg-spring), background-color .25s var(--lg-ease);
}
/* 字符“‹ ›”受字体基线影响总是偏上，换成矢量箭头，绝对定位到按钮正中 */
html.lg .colensme-sample-work-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 5-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 5-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.lg .colensme-sample-work-nav::before { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
html.lg .colensme-sample-work-nav[data-direction="next"]::before { transform: scaleX(-1); }
html.lg .colensme-sample-work-nav[data-direction="previous"] { left: 16px; }
html.lg .colensme-sample-work-nav[data-direction="next"] { right: 16px; }
html.lg .colensme-sample-work-nav:hover { background: rgba(20, 20, 28, .34); transform: translateY(-50%) scale(1.06); }
html.lg .colensme-sample-work-nav:active { transform: translateY(-50%) scale(.92); }
html.lg .colensme-sample-work-stage.is-loading::after { right: 16px; bottom: 16px; width: 24px; height: 24px; background: rgba(20, 20, 28, .35); box-shadow: 0 0 0 6px rgba(20, 20, 28, .3); }
html.lg .colensme-sample-work-meta { gap: 14px; margin-top: 4px; }
html.lg .colensme-sample-work-author-profile img { width: 36px; height: 36px; flex-basis: 36px; border: 0; box-shadow: 0 0 0 2px var(--lg-glass-thick), 0 4px 10px -4px rgba(0, 0, 0, .4); }
html.lg .colensme-sample-work-author-profile span { font-size: 15px; font-weight: 600; }
html.lg :is(.colensme-sample-work-author-profile, .colensme-sample-work-author-profile:link, .colensme-sample-work-author-profile:visited) { color: var(--lg-ink) !important; }
html.lg .colensme-sample-work-author-profile:is(:hover, :focus-visible) { color: var(--lg-rose-ink) !important; }
html.lg .colensme-sample-follow { min-height: 30px; padding: 4px 12px; color: var(--lg-ink); background: var(--lg-inset-2); border: 0; border-radius: 999px; font-size: 13px; }
html.lg .colensme-sample-follow:is(:hover, :focus-visible) { color: var(--lg-sel-ink); background: var(--lg-sel); }
html.lg .colensme-sample-follow.actived { color: var(--lg-ink-3); background: var(--lg-inset); }
html.lg .colensme-sample-work-identity > span { padding: 3px 11px; color: var(--lg-ink-2); background: var(--lg-inset-2); border-radius: 999px; font-family: var(--lg-num); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
html.lg .colensme-sample-work-meta > .colensme-sample-work-actions { gap: 10px; min-width: min(320px, 100%); }
html.lg .colensme-sample-work-meta :is(.colensme-sample-favorite, .colensme-sample-use) { min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600; }
html.lg .colensme-sample-favorite {
  position: relative;
  color: var(--lg-ink);
  background: var(--lg-glass-regular);
  border: 0;
  box-shadow: var(--lg-glass-shadow);
  transition: color .25s var(--lg-ease), background-color .25s var(--lg-ease), transform .5s var(--lg-spring);
}
html.lg .colensme-sample-favorite:is(:hover, :focus-visible),
html.lg body.dark-theme .colensme-sample-favorite:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-glass-thick); border: 0; box-shadow: var(--lg-float-shadow); }
html.lg .colensme-sample-favorite[aria-pressed="true"],
html.lg body.dark-theme .colensme-sample-favorite[aria-pressed="true"] { color: #fff; background: rgba(226, 70, 107, .85); border: 0; box-shadow: 0 12px 26px -12px rgba(226, 70, 107, .85), inset 0 1px .5px rgba(255, 255, 255, .6); }
html.lg .colensme-sample-favorite:is(:hover, :focus-visible):not([aria-pressed="true"]) .colensme-sample-favorite-icon path { stroke: var(--lg-fav) !important; }
html.lg .colensme-sample-favorite:active { transform: scale(.955); }
/* 选中框画在外侧 4px，给滚动容器留出同样的内边距，第一张的左边和每张的底边都不会被裁 */
html.lg .colensme-sample-work-thumbs { gap: 10px; margin: 4px -6px 0; padding: 6px; scroll-padding-inline: 6px; }
html.lg .colensme-sample-work-thumbs button {
  flex-basis: 66px;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: var(--lg-r-m);
  opacity: .6;
  transition: opacity .25s var(--lg-ease), transform .5s var(--lg-spring), box-shadow .25s var(--lg-ease);
}
html.lg .colensme-sample-work-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
html.lg .colensme-sample-work-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--lg-glass-thick), 0 0 0 4px var(--lg-sel); }
/* 提示词面板 */
html.lg .colensme-sample-prompt-panel { gap: 10px; padding: 16px 18px 18px; background: var(--lg-mint-tint); border: 0; border-radius: var(--lg-r-l); }
html.lg .colensme-sample-prompt-panel > header span { color: var(--lg-mint-ink); font-size: 15px; font-weight: 700; }
html.lg .colensme-sample-prompt-panel > header strong { color: var(--lg-ink-2); font-size: 13px; font-weight: 500; }
html.lg .colensme-sample-prompt-panel > header button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
html.lg .colensme-sample-prompt-text { padding: 12px 14px; background: var(--lg-glass-regular); border: 0; border-radius: var(--lg-r-m); }
/* 一键使用 / 提示词去向 */
html.lg :is(.colensme-sample-use-dialog form, .colensme-sample-prompt-dialog form) { padding: 32px 30px 30px; }
html.lg :is(.colensme-sample-use-dialog h2, .colensme-sample-prompt-dialog h2) { font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
html.lg :is(.colensme-sample-use-dialog p, .colensme-sample-prompt-dialog p) { color: var(--lg-ink-2); font-size: 15px; line-height: 1.7; }
html.lg .colensme-sample-dialog-close { top: 20px; right: 20px; }
html.lg .colensme-sample-use-dialog form > div { gap: 12px; margin-top: 26px; }
html.lg :is(.colensme-sample-use-dialog form > div button, .colensme-sample-prompt-dialog-actions button) {
  min-height: 58px;
  color: var(--lg-ink);
  background: var(--lg-inset-2);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px var(--lg-glow);
  font-size: 17px;
  font-weight: 600;
  transition: color .25s var(--lg-ease), background-color .25s var(--lg-ease), transform .5s var(--lg-spring);
}
html.lg .colensme-sample-use-dialog form > div button:is(:hover, :focus-visible, [aria-pressed="true"]) {
  color: var(--lg-sel-ink);
  background: var(--lg-sel);
  border: 0;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55);
  transform: translateY(-2px);
}
html.lg .colensme-sample-use-dialog form > div button:active { transform: scale(.96); }
html.lg .colensme-sample-prompt-dialog-actions button:first-child { color: #fff; background: rgba(20, 169, 116, .9); box-shadow: 0 12px 24px -12px rgba(20, 169, 116, .9), inset 0 1px .5px rgba(255, 255, 255, .6); }
html.lg .colensme-sample-prompt-dialog-kicker { color: var(--lg-mint-ink); font-size: 13px; font-weight: 700; }
/* 收藏提示：厚玻璃浮层（不再是整块粉色） */
html.lg .colensme-sample-favorite-notice {
  padding: 14px 22px;
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--lg-float-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
  backdrop-filter: blur(30px) saturate(1.8) !important;
  font-size: 15px;
  font-weight: 600;
  animation: lg-notice-in .6s var(--lg-spring) both;
}
html.lg .colensme-sample-favorite-notice[data-type="error"] { color: #d0342c; }
@keyframes lg-notice-in {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --- 样片库 手机与平板 --- */
@media (max-width: 900px) {
  html.lg .colensme-sample-discovery-actions { gap: 10px; }
  html.lg .colensme-sample-account-toggle { height: 52px; min-height: 52px; }
  html.lg .colensme-sample-category-strip .colensme-sample-filters { min-height: 56px; max-height: 56px; }
  html.lg .colensme-sample-category-toggle { height: 56px; min-height: 56px; }
}
@media (max-width: 700px) {
  html.lg .colensme-sample-library:not(.colensme-author-samples) { padding: 0 14px 56px; }
  html.lg .colensme-sample-header { gap: 20px; padding: 26px 0 22px; }
  html.lg .colensme-sample-header h1 { font-size: 56px; }
  /* ★ 0.9.864 与标题同比例：56 × 1.25/6 = 11.67（原来 17 会让「片」和「慢」差 49px） */
  html.lg .colensme-sample-header span { font-size: 11.67px; }

  html.lg .colensme-sample-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.lg .colensme-sample-grid { gap: 6px; }
  html.lg .colensme-sample-card,
  html.lg .colensme-sample-media,
  html.lg .colensme-sample-preview { border-radius: 18px; }
  html.lg .colensme-sample-prompt-badge { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 12px; }
  html.lg .colensme-sample-card .colensme-sample-cover-actions { left: 2px; right: 2px; height: 48px; gap: 4px; padding: 5px; }
  html.lg .colensme-sample-card :is(.colensme-sample-use-cover, .colensme-sample-favorite-cover) { height: 38px; min-height: 38px; padding: 0 6px; font-size: 13px; }
  html.lg .colensme-sample-card .colensme-sample-card-author { height: 70px; padding: 0 8px 8px; }
  html.lg .colensme-sample-card-author-identity { height: 30px; padding-right: 10px; font-size: 12px; }
  html.lg .colensme-sample-card-author img { width: 22px; height: 22px; flex-basis: 22px; }
  html.lg .colensme-sample-work-shell { padding: 14px; border-radius: 28px; }
  html.lg .colensme-sample-work-stage { border-radius: 20px; }
  html.lg .colensme-sample-work-identity { padding-block: 14px 12px; }
}
/* ★ 0.9.864 品牌那行的"中段补丁"只在 431~700 生效：这一段标题被写死 56px、而品牌还在按 vw 走
   ⇒ 56 × 17/96 = 9.91px。⚠️ 不能写进上面的 ≤700 块里 —— 那会连带把 ≤430 也改成 9.91，
   而那里标题是 50px、该是 8.85px（实测超 6px）。 */
@media (min-width: 431px) and (max-width: 700px) {
  html.lg .colensme-sample-header p { font-size: 9.91px; }
}
@media (max-width: 430px) {
  html.lg .colensme-sample-header h1 { font-size: 50px; }
  /* ★ 0.9.864 50 × 1.25/6 = 10.42 */
  html.lg .colensme-sample-header span { font-size: 10.42px; }
  html.lg .colensme-sample-category-toggle { min-width: 100px; padding: 0 32px 0 16px; font-size: 14px; }
  html.lg .colensme-sample-category-toggle::after { right: 14px; }
  html.lg .colensme-sample-account-toggle span { max-width: none; }
}

/* ==========================================================================
   创意自拍室 /me
   ========================================================================== */
html.lg .smgpt-tool,
html.lg body.dark-theme .smgpt-tool {
  --smgpt-ink: var(--lg-ink);
  --smgpt-muted: var(--lg-ink-2);
  --smgpt-muted-2: var(--lg-ink-3);
  --smgpt-line: var(--lg-line);
  --smgpt-line-strong: var(--lg-inset-2);
  --smgpt-surface: var(--lg-glass-regular);
  --smgpt-soft: var(--lg-inset);
  --smgpt-soft-strong: var(--lg-inset-2);
  --smgpt-success: var(--lg-mint-ink);
  color: var(--lg-ink);
}
html.lg .smgpt-tool,
html.lg body:not(.dark-theme) .smgpt-tool {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 0 24px 80px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- 首屏：左侧标题 + 模式 + 三步进度，右侧样片精选大图（skin.js 加的装饰）--- */
@media (min-width: 1000px) {
  html.lg .smgpt-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 56px;
    align-items: start;
  }
  html.lg .smgpt-tool > * { grid-column: 1 / -1; }
  html.lg .smgpt-tool > .smgpt-header { grid-column: 1; grid-row: 1; }
  html.lg .smgpt-tool > .smgpt-experience-tabs { grid-column: 1; grid-row: 2; }
  html.lg .smgpt-tool > .smgpt-workflow-overview { grid-column: 1; grid-row: 3; }
  html.lg .smgpt-tool > .smgpt-top-resources { grid-column: 1; grid-row: 4; }
  html.lg .smgpt-tool > .lg-hero { grid-column: 2; grid-row: 1 / span 5; margin-top: 56px; }
}

html.lg .smgpt-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding-top: 70px;
}
html.lg .smgpt-header h2 {
  font-size: clamp(52px, 7.4vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
}
html.lg .smgpt-header p { max-width: 30em; margin-top: 18px; color: var(--lg-ink-2); font-size: 20px; line-height: 1.55; }
/* 常见问题 / 反馈：标题下方的小玻璃胶囊 */
html.lg .smgpt-support-header .smgpt-header-tool-buttons {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  margin: 22px 0 0;
}
html.lg .smgpt-support-toggle,
html.lg .smgpt-header-tool-buttons .smgpt-support-toggle {
  position: relative;
  display: inline-flex;
  width: auto;
  min-height: 42px;
  gap: 8px;
  align-items: center;
  padding: 0 16px 0 6px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  transition: transform .5s var(--lg-spring), background-color .3s var(--lg-ease);
}
html.lg .smgpt-support-toggle:is(:hover, [aria-expanded="true"]),
html.lg .smgpt-support[data-recommended="true"] .smgpt-support-toggle { background: var(--lg-glass-regular); transform: translateY(-1px); }
html.lg .smgpt-support-toggle:active { transform: scale(.955); }
html.lg .smgpt-support-toggle-icon { width: 30px; height: 30px; font-size: 14px; line-height: 1; }
html.lg .smgpt-support-toggle-icon > i { display: block; line-height: 1; transform: translateY(.5px); }
html.lg .smgpt-faq-toggle > .smgpt-support-toggle-icon { background: var(--lg-mint); }
html.lg .smgpt-support-toggle:not(.smgpt-faq-toggle) > .smgpt-support-toggle-icon { background: var(--lg-rose); }
html.lg .smgpt-support-toggle-copy { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
html.lg .smgpt-support-toggle-copy > strong { font-size: 14px; font-weight: 600; }
html.lg .smgpt-support-toggle-copy > small { color: var(--lg-ink-3); font-size: 12px; font-weight: 500; }
html.lg .smgpt-support-toggle[aria-expanded="true"] .smgpt-support-toggle-copy > small { color: var(--lg-rose-ink); }
html.lg .smgpt-support-panel {
  margin-top: 16px;
  padding: 24px 26px;
  background: var(--lg-glass-regular);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--lg-float-shadow);
}
html.lg .smgpt-support-head h4 { font-size: 20px; font-weight: 700; }
html.lg .smgpt-support-head p { color: var(--lg-ink-2); font-size: 14px; }
html.lg .smgpt-faq-list p { padding: 14px 16px; margin: 0 0 8px; border-radius: var(--lg-r-m); background: var(--lg-inset); font-size: 14px; line-height: 1.75; color: var(--lg-ink-2); }
html.lg .smgpt-faq-list strong { color: var(--lg-ink); }

/* 自拍 / 壁纸：玻璃分段控件（液滴由 skin.js 驱动） */
html.lg .smgpt-experience-tabs {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: start;
  gap: 0;
  width: min(100%, 460px);
  margin: 30px 0 0;
  padding: 5px;
  background: var(--lg-well);
  border-radius: 999px;
  box-shadow: var(--lg-well-edge);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
}
html.lg .smgpt-experience-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--lg-tw, 0px);
  height: var(--lg-th, 0px);
  transform: translate(var(--lg-tx, 0px), var(--lg-ty, 0px)) scale(var(--lg-tsx, 1), var(--lg-tsy, 1));
  border-radius: 999px;
  background: var(--lg-drop);
  box-shadow: var(--lg-drop-shadow);
  opacity: var(--lg-to, 0);
  pointer-events: none;
}
html.lg .smgpt-experience-tabs > button,
html.lg .smgpt-experience-tabs > button:is(:hover, :focus-visible, [aria-selected="true"]) {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: 60px;
  padding: 8px 14px;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-align: center;
  transform: none;
  transition: color .35s var(--lg-ease);
}
html.lg .smgpt-experience-tabs > button[aria-selected="true"] { color: var(--lg-drop-ink); }
html.lg .smgpt-experience-tabs:not([data-lg-thumb]) > button[aria-selected="true"] { background: var(--lg-drop); }
html.lg .smgpt-experience-tabs .smgpt-experience-icon,
html.lg .smgpt-experience-tabs .smgpt-current-mode { display: none !important; }
html.lg .smgpt-experience-tabs strong { margin: 0; color: inherit; font-size: 16px; font-weight: 650; }
html.lg .smgpt-experience-tabs small { margin-top: 1px; color: var(--lg-ink-3); font-size: 12px; line-height: 1.35; }
/* 按钮里的标题 / 小字：插件给标题 32px 行高（字只有 16px），字下面空出一大截，看起来整组字偏上、液滴偏下。
   行高收紧到接近字号，标题和小字整组在液滴里上下居中（自拍 / 壁纸、创作方式两组分段都一样） */
html.lg :is(.smgpt-experience-tabs, .smgpt-mode-tabs) button { align-content: center; }
html.lg :is(.smgpt-experience-tabs, .smgpt-mode-tabs) button > span { display: grid; justify-items: center; gap: 3px; line-height: 1.25; }
html.lg :is(.smgpt-experience-tabs, .smgpt-mode-tabs) button strong { line-height: 1.25; }
html.lg :is(.smgpt-experience-tabs, .smgpt-mode-tabs) button small { margin: 0; line-height: 1.35; }

/* 三步进度：一张玻璃列表卡 */
html.lg .smgpt-workflow-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 22px 0 0;
  padding: 8px;
  overflow: visible;
  background: var(--lg-glass-regular);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--lg-float-shadow);
}
html.lg .smgpt-workflow-overview > i { display: none; }
html.lg .smgpt-workflow-overview > button,
html.lg .smgpt-workflow-overview > button:is(:hover, :focus-visible, [data-step-state]) {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px 12px 12px;
  color: var(--lg-ink);
  background: transparent;
  border: 0;
  border-radius: 22px;
  box-shadow: none;
  transform: none;
  animation: none;
  transition: background-color .25s var(--lg-ease);
}
html.lg .smgpt-workflow-overview > button:is(:hover, :focus-visible) { background: var(--lg-inset); }
html.lg .smgpt-workflow-overview > button > span,
html.lg .smgpt-workflow-overview > button[data-step-state] > span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  color: var(--lg-ink-3);
  background: var(--lg-inset);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
}
html.lg .smgpt-workflow-overview > button[data-step-state="current"] > span { color: #fff; background: var(--lg-rose); box-shadow: 0 6px 14px -6px rgba(200, 30, 100, .7); }
html.lg .smgpt-workflow-overview > button[data-step-state="complete"] > span { color: #fff; background: var(--lg-mint); }
html.lg .smgpt-workflow-overview strong { grid-column: 2; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--lg-ink); }
html.lg .smgpt-workflow-overview small { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--lg-ink-3); }
html.lg .smgpt-workflow-overview > button::after,
html.lg .smgpt-workflow-overview > button[data-step-state]::after {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  min-height: 0;
  margin: 0;
  padding: 4px 11px;
  color: var(--lg-ink-3);
  background: var(--lg-inset);
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
html.lg .smgpt-workflow-overview > button[data-step-state="current"]::after { color: var(--lg-rose-ink); background: var(--lg-rose-tint); }
html.lg .smgpt-workflow-overview > button[data-step-state="complete"]::after { color: var(--lg-mint-ink); background: var(--lg-mint-tint); }

/* 样片库 / 小红书：还原插件原来的“两个按钮各占一半、铺满整行”，做成玻璃。
   平时是玻璃底 + 对应颜色的文字和淡描边；悬停 / 键盘聚焦时变成对应颜色的彩色玻璃并带同色辉光：
   样片库 = 主题粉 #ef3d95，小红书 = 小红书红 #e4374f（与插件原配色一致）。

   0.9.681：站长反馈这对按钮“太细条、字也小”，要求高度和字号跟生成 / 分析主按钮
   （重新分析 58px / 17px、点击开拍 60px / 17px）看齐 —— 原来只有 52px / 15px（手机 48px / 14px）。
   样式本身（玻璃底、圆角、悬停彩色）完全不变，只放大尺寸。
   同时 margin-top 18px → 22px：跟「自拍模式 / 壁纸模式」标签到步骤指引那一段的
   22px 对齐（站长要求，也顺带缓解底部那对离上方预览太近、容易误触）。 */
html.lg .smgpt-sample-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
/* 0.9.682：底部那对（在模式面板里，紧贴在样片预览 / 分析区下方）再往下 4px。
   站长看过 0.9.681 后反馈「还有点贴的近」。
   只加底部这一组：它挂在 .smgpt-mode-panel 里面；
   顶部那组是 .smgpt-tool 的直接子元素（带 smgpt-top-resources 类），保持 22px 不动。 */
html.lg .smgpt-mode-panel > .smgpt-sample-resources { margin-top: 26px; }
html.lg .smgpt-sample-resource,
html.lg .smgpt-sample-resource[data-kind="xiaohongshu"] {
  --lg-res: 239, 61, 149;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 0 18px;
  color: rgb(var(--lg-res));
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  transition: transform .5s var(--lg-spring), background-color .3s var(--lg-ease), color .3s var(--lg-ease), box-shadow .3s var(--lg-ease);
}
html.lg .smgpt-sample-resource[data-kind="xiaohongshu"] { --lg-res: 228, 55, 79; }
html.lg .smgpt-sample-resource:is(:hover, :focus-visible),
html.lg .smgpt-sample-resource[data-kind="xiaohongshu"]:is(:hover, :focus-visible) {
  color: #fff;
  background: rgba(var(--lg-res), .8);
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 0 18px -6px rgba(255, 255, 255, .45), 0 12px 30px -10px rgba(var(--lg-res), .75);
  text-decoration: none;
  transform: translateY(-1px);
}
html.lg .smgpt-sample-resource:active { transform: scale(.97); }
/* 顶部那一对带图标和箭头：图标靠左、箭头靠右 */
html.lg .smgpt-top-resource,
html.lg .smgpt-top-resource[data-kind="xiaohongshu"] { justify-content: flex-start; padding: 0 18px 0 8px; }
html.lg .smgpt-top-resource-mark,
html.lg .smgpt-top-resource[data-kind="xiaohongshu"] .smgpt-top-resource-mark,
html.lg .smgpt-top-resource:is(:hover, :focus-visible) .smgpt-top-resource-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: #fff;
  background: rgb(var(--lg-res));
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  transition: background-color .3s var(--lg-ease);
}
html.lg .smgpt-top-resource:is(:hover, :focus-visible) .smgpt-top-resource-mark { background: rgba(255, 255, 255, .22); }
html.lg .smgpt-top-resource strong { font-size: 17px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
/* 右侧箭头：字符“›”基线偏，换成矢量箭头 */
html.lg .smgpt-top-resource > i { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; font-size: 0; background: currentColor; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 右侧：样片精选大图 + 幻镜（skin.js 生成，纯装饰；按钮只是前往样片库 / 换一张） */
html.lg .lg-hero {
  position: relative;
  margin: 0;
  border-radius: var(--lg-r-xl);
  overflow: visible;
  aspect-ratio: 3 / 4.2;
}
/* 镭射小卡：外层给透视，内层由 skin.js 写 3D 变换；两面各自裁切、背面预先转 180° */
html.lg .lg-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  perspective: 1400px;
  opacity: 0;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
html.lg .lg-card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  will-change: transform;
}
html.lg .lg-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--lg-inset);
  box-shadow: var(--lg-shadow-deep);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(.1px);
}
html.lg .lg-face-back { transform: rotateY(180deg) translateZ(.1px); }
html.lg .lg-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 镭射彩虹细边：随倾斜角度流转，亮色 / 暗色照片上都看得见 */
html.lg .lg-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--ha, 0deg), #ff8fb8, #ffd98a, #a6ffd0, #8ee6ff, #a9a4ff, #f29dff, #ff8fb8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.4 + var(--glow, .4) * .5);
}
/* 卡边：一圈细亮边 + 顶部高光，像覆膜的小卡 */
html.lg .lg-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1.5px 1px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(255, 255, 255, .12);
}
/* 镭射：彩虹箔 + 细闪粉，随倾斜流动；只在高光附近明显，不会整片盖住人脸 */
html.lg .lg-foil,
html.lg .lg-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
html.lg .lg-foil {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 14 -10.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(118deg, #ff7aa8 0%, #ffd36e 6%, #9dffb0 12%, #7fe8ff 18%, #8f9bff 24%, #e58bff 30%, #ff7aa8 36%);
  background-size: 160px 160px, 320% 320%;
  background-position: calc(var(--fx, 50%) * .6) calc(var(--fy, 50%) * .6), var(--fx, 50%) var(--fy, 50%);
  mix-blend-mode: color-dodge;
  opacity: calc(.08 + var(--glow, .4) * .3);
  filter: brightness(.85) saturate(1.2);
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 40%), #000 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .12) 75%);
  mask-image: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 40%), #000 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .12) 75%);
}
html.lg .lg-glare {
  background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .18) 24%, rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: overlay;
  opacity: calc(.2 + var(--glow, .4) * .55);
}
/* 点击层：盖在卡面上，触发主题单图灯箱；卡片整体不出右键 / 长按菜单、不能拖拽或选中 */
html.lg .lg-card-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  cursor: zoom-in;
}
html.lg .lg-card.is-dragging .lg-card-hit { cursor: grabbing; }
html.lg .lg-card,
html.lg .lg-card * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
html.lg .lg-face img { pointer-events: none; }
/* 按钮行：左下上一张、中间前往样片库、右下下一张。--lg-safe-r 是手机上为主题浮动工具条让出的宽度（skin.js 量） */
html.lg .lg-hero-actions {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: calc(16px + var(--lg-safe-r, 0px));
  bottom: 16px;
  gap: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html.lg :is(.lg-hero-nav, .lg-hero-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
  transition: transform .5s var(--lg-spring), filter .25s var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
html.lg .lg-hero-nav {
  flex: 0 0 auto;
  width: 54px;
  padding: 0;
  background: rgba(20, 20, 28, .2);
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 0 16px -4px rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(0, 0, 0, .6);
}
/* 矢量箭头：几何居中（字符“›”的字形偏下偏左），白色描边加一点投影，任何底图上都看得清 */
html.lg .lg-hero-nav svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
html.lg .lg-hero-cta { min-width: 0; white-space: nowrap; }
html.lg .lg-hero-cta {
  gap: 8px;
  padding: 0 24px;
  background: rgba(20, 20, 28, .2);
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 0 22px -6px rgba(255, 255, 255, .5), 0 10px 24px -10px rgba(0, 0, 0, .6);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
html.lg .lg-hero-cta:hover,
html.lg .lg-hero-cta:focus { color: #fff; text-decoration: none; }
html.lg :is(.lg-hero-nav, .lg-hero-cta):hover { transform: translateY(-2px); }
html.lg :is(.lg-hero-nav, .lg-hero-cta):active { transform: scale(.94); transition-duration: .12s; }

/* --- 步骤标题：不再是一整条面板，改成大号标题 + 状态胶囊 --- */
html.lg .smgpt-step-heading,
html.lg .smgpt-face-builder[data-step-state] > .smgpt-step-heading,
html.lg .smgpt-step-heading.smgpt-workflow-step[data-step-state],
html.lg .smgpt-tool[data-smgpt-experience] :is(.smgpt-final-step, .smgpt-sample-step) {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 16px;
  margin: 88px 0 20px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
html.lg .smgpt-face-builder > .smgpt-step-heading { margin-top: 96px; }
html.lg .smgpt-step-heading::before { display: none; }
html.lg .smgpt-step-heading > span,
html.lg :is(.smgpt-face-builder[data-step-state] > .smgpt-step-heading, .smgpt-step-heading.smgpt-workflow-step[data-step-state]) > .smgpt-step-index {
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--lg-ink-3);
  background: var(--lg-glass-regular);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 22px;
}
html.lg .smgpt-step-heading > span > :not(:first-child) { display: none; }
html.lg :is(.smgpt-face-builder[data-step-state="current"] > .smgpt-step-heading, .smgpt-step-heading.smgpt-workflow-step[data-step-state="current"]) > span { color: #fff; background: var(--lg-rose); box-shadow: 0 8px 18px -8px rgba(200, 30, 100, .7); }
html.lg :is(.smgpt-face-builder[data-step-state="complete"] > .smgpt-step-heading, .smgpt-step-heading.smgpt-workflow-step[data-step-state="complete"]) > span { color: #fff; background: var(--lg-mint); }
html.lg .smgpt-step-heading h3 { font-size: 28px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
html.lg .smgpt-step-heading p { margin-top: 4px; color: var(--lg-ink-2); font-size: 15px; }
html.lg .smgpt-face-builder[data-step-state] > .smgpt-step-heading::after,
html.lg .smgpt-step-heading.smgpt-workflow-step[data-step-state]::after {
  min-height: 0;
  padding: 5px 13px;
  color: var(--lg-ink-3);
  background: var(--lg-inset);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
html.lg :is(.smgpt-face-builder[data-step-state="current"] > .smgpt-step-heading, .smgpt-step-heading.smgpt-workflow-step[data-step-state="current"])::after { color: var(--lg-rose-ink); background: var(--lg-rose-tint); }
html.lg :is(.smgpt-face-builder[data-step-state="complete"] > .smgpt-step-heading, .smgpt-step-heading.smgpt-workflow-step[data-step-state="complete"])::after { color: var(--lg-mint-ink); background: var(--lg-mint-tint); }

/* --- 大面板：乳白 / 墨色“静态磨砂”（色场已虚化，不需要实时模糊） --- */
html.lg :is(.smgpt-face-library, .smgpt-face-create-workspace, .smgpt-mode-panel, .smgpt-generation-panel, .smgpt-output, .smgpt-postprocess, .smgpt-gallery-set-task, .smgpt-result),
html.lg .smgpt-tool[data-smgpt-experience] :is(.smgpt-generation-panel, .smgpt-selfie-sample-panel) {
  margin-top: 0;
  margin-bottom: 0;
  padding: 28px;
  background: var(--lg-glass-regular);
  border: 0;
  border-radius: var(--lg-r-xl);
  box-shadow: var(--lg-float-shadow);
}
html.lg .smgpt-face-create-workspace { margin-bottom: 16px; }
html.lg .smgpt-face-library { scroll-margin-top: 92px; }
html.lg .smgpt-face-library-title h4 { font-size: 20px; font-weight: 700; }
html.lg .smgpt-face-library-title p { font-size: 14px; color: var(--lg-ink-2); }
html.lg .smgpt-face-privacy-toggle {
  position: relative;
  min-height: 44px;
  padding: 0 20px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 15px;
  font-weight: 600;
  transition: transform .5s var(--lg-spring);
}
html.lg .smgpt-face-privacy-toggle:is(:hover, :focus-visible) { background: var(--lg-drop); transform: translateY(-1px); }
html.lg .smgpt-face-privacy-toggle:active { transform: scale(.955); }
html.lg .smgpt-face-privacy-curtain {
  min-height: 150px;
  gap: 18px;
  padding: 28px;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background: var(--lg-well);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-well-edge);
}
html.lg .smgpt-face-privacy-curtain > span { color: var(--lg-ink-3); font-size: 14px; letter-spacing: .3em; }
html.lg .smgpt-face-privacy-curtain strong { font-size: 18px; font-weight: 700; }
html.lg .smgpt-face-privacy-curtain p { margin-inline: auto; font-size: 14px; color: var(--lg-ink-2); }
html.lg .smgpt-face-profile-group { padding-top: 22px; border: 0; }
html.lg .smgpt-face-library-head h5 { font-size: 16px; font-weight: 650; }
html.lg .smgpt-face-library-head p { font-size: 13.5px; color: var(--lg-ink-3); }
html.lg .smgpt-library-summary > span { font-size: 14px; color: var(--lg-ink-3); font-variant-numeric: tabular-nums; }

/* 面部档案卡：照片 + 小玻璃角标 */
html.lg .smgpt-face-profile-grid { grid-template-columns: repeat(auto-fill, minmax(min(170px, calc(50% - 7px)), 1fr)); gap: 14px; }
html.lg .smgpt-face-profile-card {
  container-type: inline-size;
  padding: 6px;
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-shadow-soft);
  transition: box-shadow .35s var(--lg-ease), transform .55s var(--lg-spring);
}
html.lg .smgpt-face-profile-card:is(:hover, :focus-within) { border: 0; box-shadow: var(--lg-shadow-float); transform: translateY(-4px); }
html.lg .smgpt-face-profile-card[data-selected="true"] { background: var(--lg-drop); box-shadow: var(--lg-drop-shadow), var(--lg-shadow-float); }
html.lg .smgpt-face-profile-select > img { border-radius: 19px; }
html.lg .smgpt-face-profile-overlay { top: 6px; left: 6px; right: 6px; border-radius: 19px; }
html.lg .smgpt-face-profile-copy { padding: 10px 8px 6px; }
html.lg .smgpt-face-profile-copy strong { font-size: 14px; font-weight: 600; line-height: 1.45; word-break: normal; overflow-wrap: anywhere; }
html.lg .smgpt-face-profile-copy small { font-size: 12px; color: var(--lg-ink-3); }
html.lg :is(.smgpt-face-profile-badge, .smgpt-cloud-saved-badge) {
  min-height: 24px;
  padding: 2px 9px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), 0 4px 12px -4px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  font-size: 11.5px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html.lg .smgpt-face-profile-card .smgpt-face-profile-badges,
html.lg .smgpt-face-profile-card[data-selected="true"] .smgpt-face-profile-badges {
  top: calc(100cqw - 40px);   /* 照片是 1:1，贴着照片底边 */
  right: 52px;                /* 右下角留给删除按钮 */
  left: 12px;
  max-width: none;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  gap: 4px;
}
html.lg .smgpt-face-profile-badge { white-space: nowrap; }
html.lg .smgpt-face-profile-check { top: 14px; left: 14px; width: 28px; height: 28px; border: 0; background: var(--lg-rose); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
html.lg .smgpt-face-profile-selected-label { top: 15px; left: 48px; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--lg-rose); font-size: 12px; }
html.lg .smgpt-face-profile-actions { gap: 6px; padding: 0 4px 4px; }
html.lg .smgpt-face-profile-actions .smgpt-face-icon { width: 36px; height: 36px; color: var(--lg-ink-2); background: var(--lg-inset); border: 0; border-radius: 999px; }
html.lg .smgpt-face-profile-actions .smgpt-face-icon:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-inset-2); }
html.lg .smgpt-face-profile-actions .smgpt-face-primary { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--lg-rose); font-size: 13px; font-weight: 600; }

/* 创作方式：玻璃分段控件 */
html.lg .smgpt-mode-tabs {
  position: relative;
  gap: 0;
  width: min(100%, 560px);
  margin: 0 0 14px;
  padding: 5px;
  background: var(--lg-well);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-well-edge);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
}
html.lg .smgpt-mode-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--lg-tw, 0px);
  height: var(--lg-th, 0px);
  transform: translate(var(--lg-tx, 0px), var(--lg-ty, 0px)) scale(var(--lg-tsx, 1), var(--lg-tsy, 1));
  border-radius: 999px;
  background: var(--lg-drop);
  box-shadow: var(--lg-drop-shadow);
  opacity: var(--lg-to, 0);
  pointer-events: none;
}
html.lg .smgpt-mode-tabs button,
html.lg .smgpt-mode-tabs button:is(:hover, [aria-selected="true"]) {
  position: relative;
  z-index: 1;
  align-items: center;
  min-height: 58px;
  padding: 6px 16px;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-align: center;
  transform: none;
  transition: color .35s var(--lg-ease);
}
html.lg .smgpt-mode-tabs button[aria-selected="true"] { color: var(--lg-drop-ink); }
html.lg .smgpt-mode-tabs:not([data-lg-thumb]) button[aria-selected="true"] { background: var(--lg-drop); }
html.lg .smgpt-mode-tabs button strong { font-size: 16px; font-weight: 650; }
html.lg .smgpt-mode-tabs button small,
html.lg .smgpt-mode-tabs button[aria-selected="true"] small { margin-top: 1px; color: var(--lg-ink-3); font-size: 12px; }
html.lg .smgpt-mode-tabs button[aria-selected="true"] strong::after { display: none; }

/* 第 2 步面板：桌面左右分栏——左边上传区，右边授权、选项、分析 */
@media (min-width: 900px) {
  html.lg [data-smgpt-mode-panel="reverse"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  html.lg [data-smgpt-mode-panel="reverse"] > * { grid-column: 1 / -1; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-upload { grid-column: 1; grid-row: 1 / span 3; min-height: 360px; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-preview { grid-column: 1; grid-row: 1 / span 3; margin-top: 0; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-consent { grid-column: 2; grid-row: 1; margin-top: 0; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-analysis-scheme-grid { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); margin: 16px 0 0; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-actions { grid-column: 2; grid-row: 3; }
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-sample-resources { grid-row: 5; }
}
html.lg .smgpt-mode-panel[hidden] { display: none !important; }

/* 上传区：一口浅浅的“井”，图标 + 标题 + 按钮居中 */
html.lg :is(.smgpt-upload, .smgpt-face-upload) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 30px 24px;
  text-align: center;
  background: var(--lg-well);
  border: 0;
  border-radius: 28px;
  box-shadow: var(--lg-well-edge);
  transition: background-color .3s var(--lg-ease), box-shadow .3s var(--lg-ease), transform .5s var(--lg-spring);
}
html.lg :is(.smgpt-upload, .smgpt-face-upload)::before {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0448f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / 26px no-repeat,
    var(--lg-glass-thick);
  box-shadow: var(--lg-glass-shadow);
}
html.lg .smgpt-tool :is(.smgpt-upload, .smgpt-face-upload):hover {
  background: var(--lg-inset-2);
  box-shadow: var(--lg-well-edge) !important;
  transform: none;
}
html.lg .smgpt-tool :is(.smgpt-upload, .smgpt-face-upload)[data-dragging="true"] {
  background: var(--lg-rose-tint);
  box-shadow: var(--lg-well-edge), inset 0 0 0 2px rgba(240, 68, 143, .4) !important;
  transform: none;
}
html.lg .smgpt-upload-copy { align-items: center; }
html.lg :is(.smgpt-upload-copy strong, .smgpt-file-label, .smgpt-face-upload strong) { font-size: 18px; font-weight: 650; color: var(--lg-ink); }
html.lg .smgpt-upload-copy [data-smgpt-filename] { font-size: 14px; color: var(--lg-ink-3); }
html.lg .smgpt-upload[data-state="selected"] .smgpt-file-label { color: var(--lg-mint-ink); }
html.lg .smgpt-file-button {
  position: relative;
  min-height: 46px;
  padding: 0 24px;
  color: var(--lg-ink) !important;
  background: var(--lg-glass-btn) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--lg-glass-shadow) !important;
  font-size: 15px;
  font-weight: 600;
}
html.lg .smgpt-preview { border-radius: 28px; overflow: hidden; }
/* ★ 0.9.784：这条是给**大预览那张图**的，得写成直接子元素 ——
   多张样片的卡片排是放在 `.smgpt-preview` **里面**的（0.9.780 起），
   用后代选择器会把卡片里的小图也一起圆角（站长 2026-10-13 报的"卡片里面为啥有圆角"）。 */
html.lg .smgpt-preview > img { border-radius: 28px; }
/* 选好图片后：照片直接显示在上传区的位置（上传区先收起来），右上角 × 移除后，上传区重新露出来。
   插件原来是上传区留着、照片另起一块排在下面，占地方。样片（第 2 步）和 MJ 风格 / 全能参考图都一样 */
html.lg :is([data-smgpt-mode-panel="reverse"], [data-smgpt-mj-field]) .smgpt-upload:has(~ .smgpt-preview:not([hidden])) { display: none !important; }
html.lg :is([data-smgpt-mode-panel="reverse"], [data-smgpt-mj-field]) > .smgpt-preview:not([hidden]) {
  display: grid;
  place-items: center;
  margin-top: 0;
  min-height: 220px;
  background: var(--lg-well);
  box-shadow: var(--lg-well-edge);
}
html.lg :is([data-smgpt-mode-panel="reverse"], [data-smgpt-mj-field]) > .smgpt-preview img {
  width: 100%;
  min-height: 0;
  max-height: min(560px, 70vh);
  object-fit: contain;
  background: transparent;
}
@media (min-width: 900px) {
  html.lg [data-smgpt-mode-panel="reverse"] > .smgpt-preview:not([hidden]) { min-height: 360px; }
}
/* 手机 / 平板单列：照片排在上传区原来的位置（DOM 里照片在“样片库 / 小红书”按钮后面） */
@media (max-width: 899px) {
  html.lg [data-smgpt-mode-panel="reverse"]:has(> .smgpt-preview:not([hidden])) { display: flex; flex-direction: column; }
  html.lg [data-smgpt-mode-panel="reverse"]:has(> .smgpt-preview:not([hidden])) > .smgpt-preview { order: -1; }
}
/* 右上角 ×：中性玻璃圆钮。
   插件是 display: grid + 文字“×”：字号设 0 后 grid 仍给文字和 ::before 各排一行，叉号被挤到上半截（实测偏上 5px）。
   改成普通块，叉号绝对定位到正中（和样片详情翻页按钮同一种处理） */
html.lg .smgpt-tool .smgpt-remove-image {
  display: block;
  padding: 0;
  line-height: 0;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  color: #fff;
  background: rgba(20, 20, 28, .32);
  border: 0;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 0 12px -4px rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  font-size: 0;
}
html.lg .smgpt-tool .smgpt-remove-image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.lg .smgpt-tool .smgpt-remove-image:is(:hover, :focus-visible) { background: rgba(20, 20, 28, .5); outline: 0; transform: scale(1.06); }
html.lg .smgpt-tool .smgpt-remove-image:active { transform: scale(.92); }

/* 授权：iOS 开关 */
html.lg .smgpt-consent {
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  color: var(--lg-ink);
  background: var(--lg-well);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--lg-well-edge);
  font-size: 15px;
  line-height: 1.55;
}
html.lg .smgpt-consent:is(:hover, :focus-within) { outline: 0; box-shadow: var(--lg-well-edge); background: var(--lg-inset-2); }
html.lg .smgpt-consent:has(:focus-visible) { box-shadow: var(--lg-well-edge), var(--lg-focus-ring); }
/* 开关圆钮贴满轨道（上下和贴靠一侧不留缝，站主 2026-09-27 定）。
   主题给所有勾选框加了“打勾”伪元素（未勾选时 scale(0) 且透明）、1px 边框和悬停半透明，这里全部重置 */
html.lg .smgpt-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 51px;
  width: 51px;
  min-width: 51px;
  height: 31px;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 999px;
  background: var(--lg-switch-off);
  box-shadow: inset 0 0 0 1px var(--lg-switch-ring);
  line-height: 0;
  opacity: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .35s var(--lg-ease), box-shadow .35s var(--lg-ease);
}
html.lg .smgpt-consent input[type="checkbox"]:hover { opacity: 1; }
html.lg .smgpt-consent input[type="checkbox"]::before,
html.lg .smgpt-consent input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 31px;
  height: 31px;
  margin: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16), 0 1px 1px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  opacity: 1;
  transform: none;
  transition: transform .45s var(--lg-spring), width .3s var(--lg-spring);
}
html.lg .smgpt-consent input[type="checkbox"]::after { content: none; display: none; }
html.lg .smgpt-consent input[type="checkbox"]:active::before { width: 37px; }
html.lg .smgpt-consent input[type="checkbox"]:checked { background: #34c759; box-shadow: none; }
html.lg .smgpt-consent input[type="checkbox"]:checked::before { transform: translateX(20px); }
html.lg .smgpt-consent input[type="checkbox"]:checked:active::before { transform: translateX(14px); }

/* 画面理解方式 / 原创度 / 随机灵感：标签 + 玻璃选择框（不再是粉色强调框） */
html.lg :is([data-smgpt-analysis-choice-wrap], [data-smgpt-image-choice-wrap], [data-smgpt-reverse-choice-wrap], [data-smgpt-random-inspiration-choice-wrap]).smgpt-scheme-field,
html.lg .smgpt-tool[data-smgpt-pointer="coarse"] :is([data-smgpt-analysis-choice-wrap], [data-smgpt-reverse-choice-wrap], [data-smgpt-image-choice-wrap], [data-smgpt-random-inspiration-choice-wrap]).smgpt-scheme-field {
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
}
html.lg [data-smgpt-random-inspiration-choice-wrap].smgpt-scheme-field { margin: 18px 0; }
/* 插件桌面端把“随机灵感”按钮固定为 148px，皮肤字号加大后“随机灵感（50积分）”放不下：改为按文字撑开（手机上本来就是整行宽） */
@media (min-width: 641px) {
  html.lg .smgpt-random-inspiration-tools > .smgpt-prompt-action { width: auto; min-width: 148px; max-width: none; flex: 0 0 auto; }
}
html.lg .smgpt-analysis-scheme-grid { gap: 16px; }
html.lg .smgpt-scheme-field { color: var(--lg-ink-2); font-size: 14px; font-weight: 600; }
html.lg .smgpt-scheme-field select,
html.lg :is([data-smgpt-analysis-choice-wrap], [data-smgpt-image-choice-wrap], [data-smgpt-reverse-choice-wrap], [data-smgpt-random-inspiration-choice-wrap]).smgpt-scheme-field select {
  min-height: 56px;
  padding: 10px 44px 10px 18px;
  color: var(--lg-ink);
  background-color: var(--lg-well);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--lg-well-edge);
  font-size: 16px;
  font-weight: 600;
}
html.lg .smgpt-scheme-field select:hover:not(:disabled),
html.lg :is([data-smgpt-analysis-choice-wrap], [data-smgpt-image-choice-wrap], [data-smgpt-reverse-choice-wrap], [data-smgpt-random-inspiration-choice-wrap]).smgpt-scheme-field select:hover:not(:disabled) { background-color: var(--lg-glass-regular); border: 0; }
html.lg .smgpt-scheme-field select:focus-visible { box-shadow: var(--lg-well-edge), var(--lg-focus-ring); }
html.lg .smgpt-scheme-description { font-size: 13px; font-weight: 500; color: var(--lg-ink-3); }
/* Chrome 135+ 的可自定义下拉：弹出玻璃菜单；其他浏览器由 skin.js（5i）弹出同样的玻璃菜单（html.lg-jsselect） */
@supports (appearance: base-select) {
  /* 可自定义下拉里，选中文字和右侧箭头默认贴顶排（主题给了 32px 行高，文字一行放得下时就明显偏上）：
     改成上下居中，行高收紧；文字长到换行时两行也整体居中 */
  html.lg:not(.lg-jsselect) :is(.smgpt-tool, .colensme-submission-center-shell) select { appearance: base-select; display: flex; align-items: center; line-height: 1.35; }
  html.lg:not(.lg-jsselect) :is(.smgpt-tool, .colensme-submission-center-shell) select > button { display: contents; }
  /* 箭头：系统的“▾”字符在字框里偏上，换成和脚本菜单模式同一个矢量三角 */
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select::picker-icon {
    content: "";
    align-self: center;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 3.8h7.6L6 8.6z' fill='%23908a84'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    transition: rotate .4s var(--lg-spring);
  }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select:open::picker-icon { rotate: 180deg; }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select::picker(select) {
    appearance: base-select;
    margin-top: 8px;
    padding: 6px;
    color: var(--lg-ink);
    background: var(--lg-glass-thick);
    border: 0;
    border-radius: 22px;
    box-shadow: var(--lg-shadow-deep), var(--lg-edge);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    backdrop-filter: blur(30px) saturate(1.8);
    transform-origin: 50% 0;
    opacity: 0;
    transform: scale(.96) translateY(-4px);
    transition: opacity .12s ease-out, transform .12s ease-out, overlay .12s allow-discrete, display .12s allow-discrete;
  }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select::picker(select):popover-open {
    opacity: 1;
    transform: none;
    transition: opacity .18s var(--lg-ease), transform .45s var(--lg-spring), overlay .45s allow-discrete, display .45s allow-discrete;
  }
  @starting-style {
    html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select::picker(select):popover-open { opacity: 0; transform: scale(.92) translateY(-6px); }
  }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select option { min-height: 46px; padding: 10px 14px; border-radius: 16px; font-size: 15px; }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select option:is(:hover, :focus-visible) { background: var(--lg-inset); outline: 0; }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select option:checked { background: var(--lg-inset-2); font-weight: 650; }
  html.lg :is(.smgpt-tool, .colensme-submission-center-shell) select option::checkmark { color: var(--lg-rose); }
}
/* 脚本菜单模式：下拉框只当按钮用（不接收点击，系统列表不会弹出），右侧小三角和 base-select 一样，展开时朝上 */
html.lg.lg-jsselect :is(.smgpt-tool, .colensme-submission-center-shell) select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 3.8h7.6L6 8.6z' fill='%23908a84'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
html.lg.lg-jsselect :is(.smgpt-tool, .colensme-submission-center-shell) select[data-lg-open] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 8.2h7.6L6 3.4z' fill='%23908a84'/%3E%3C/svg%3E");
  box-shadow: var(--lg-well-edge), var(--lg-focus-ring);
}
html.lg .lg-select-menu {
  position: fixed;
  z-index: 100000;
  box-sizing: border-box;
  max-height: min(420px, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  border-radius: 22px;
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
  backdrop-filter: blur(30px) saturate(1.8) !important;
  font-family: var(--lg-font);
  opacity: 0;
  transform: scale(.96) translateY(-4px);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
html.lg .lg-select-menu.is-open { opacity: 1; transform: none; transition: opacity .18s var(--lg-ease), transform .45s var(--lg-spring); }
html.lg .lg-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 16px;
  outline: 0;
  box-shadow: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.lg .lg-select-option::before { content: ""; flex: 0 0 16px; height: 16px; }
html.lg .lg-select-option:is(:hover, :focus-visible) { background: var(--lg-inset); }
html.lg .lg-select-option[aria-selected="true"] { background: var(--lg-inset-2); font-weight: 650; }
html.lg .lg-select-option[aria-selected="true"]::before {
  background: var(--lg-rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.lg .lg-select-option:disabled { opacity: .45; cursor: default; }
html.lg .lg-select-group { padding: 10px 14px 4px 40px; color: var(--lg-ink-3); font-size: 12px; font-weight: 650; }

/* 按钮：主 = 品牌粉实心（照 RunningHub playground「运行」按钮的手感），次 = 透明玻璃
   主按钮的手感（2026-10-01 第 28 轮，站长选定「胶囊纯实心」）：
   - 静止：实心 #f0448f + 外发光 20px / .38；悬停变亮 #f25a9c + 外发光 28px / .52；
   - 按下：轻微下沉（scale .972 + 弹性曲线），松手弹回。0.9.686 加的 —— 站长说原来
     「按下完全不动」有点死板。值取 demo 里胶囊那版的 .972，缓动用 --lg-spring（和次要按钮一致）。
   - 点击后弹出一圈光环（和下沉互不干扰：一个走 transform，一个走 outline）。
   - 光环用 outline 画（原版是一圈 box-shadow，outline 同样是贴着边缘往外 6px 的一圈）：
     ①按钮是 overflow:hidden，子元素和伪元素都会被裁掉，画不出去；
     ②::after 本来被插件 frontend.css 拿去做扫光，但那道扫光已在 0.9.680 关掉（见下），
       不过仍不占用它，免得以后插件那边再给 ::after 加东西时打架；
     ③主题有一条 `*, ::after, ::before { outline: 0 !important }` 全局重置，
       所以要给光环的 outline 加 !important —— 同为 !important 时比特异性，我们的选择器更高，能压过 *。
       选 outline 而不是 box-shadow 还因为：外发光要留在 box-shadow 上单独动，
       而 outline 的「宽度」和「颜色」可以分别设时长，正好对应原版的扩散 .4s + 淡出 2s。
   - 0.9.680：站长觉得插件原本那道扫光（::after 的白色斜条，hover 时从左扫到右）
     压在实心粉上像塑料，去掉了。只关主按钮这一处，插件本体的 frontend.css 不动，
     想恢复删掉下面那条规则即可。 */
html.lg :is(.smgpt-primary, .smgpt-secondary) { border-radius: 999px; min-height: 52px; padding: 0 26px; font-size: 16px; font-weight: 600; }
html.lg .smgpt-primary {
  color: #fff;
  background: #f0448f;
  border: 0;
  box-shadow: 0 0 20px rgba(240, 68, 143, .38);
  /* 光环的起点：0 宽、20% 不透明的粉（照原版 box-shadow 0 0 0 0 currentColor + opacity .2）。
     这里必须显式写颜色：主题那条 * 重置把 outline-color 留成了 currentColor（白），
     不写的话光环会从白色开始闪一下。 */
  outline: 0 solid rgba(240, 68, 143, .2) !important;
  outline-offset: 0 !important;
  /* transform 也放进过渡，按下 / 松手的下沉与回弹才是动画而不是瞬跳 */
  transition: background-color .2s var(--lg-ease), box-shadow .2s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .smgpt-primary:is(:hover, :focus-visible) { color: #fff; background: #f25a9c; box-shadow: 0 0 28px rgba(240, 68, 143, .52); transform: none; }
/* 按下：轻微下沉。插件 frontend.css 自己也有一条 :active（translateY(1px) scale(.99)），
   我们这条特异性更高，会盖过它，所以下沉幅度以这里为准。 */
html.lg .smgpt-primary:active:not(:disabled) { transform: scale(.972); box-shadow: 0 0 20px rgba(240, 68, 143, .38); }
/* 关掉插件那道扫光（白色斜条）。插件 frontend.css 里是 .smgpt-primary::after 的
   linear-gradient 白带 + hover 时 translateX(-180% → 620%)；这里用 display:none 让它彻底不参与渲染
   （比把 transform 冻住干净：不留一个还在跑 520ms 过渡的图层）。
   一并覆盖 :hover / :focus-visible 两个触发态，免得插件那条更靠后的规则又把它打开。 */
html.lg .smgpt-primary::after,
html.lg .smgpt-primary:is(:hover, :focus-visible)::after { display: none !important; content: none !important; }
/* 点击后的一圈光环：时序照 antd wave —— 宽度扩散 .4s、颜色淡出 2s，同一条 cubic-bezier(.08,.82,.17,1)。
   只有「光环态」写 transition，所以 2.2 秒后摘掉属性时是瞬间回静止，不会倒着再放一遍。
   ★ transform 必须一起写上：光环是 click 时加的（在 mouseup 之后），那时松手的回弹动画正在跑，
     这条 transition 一覆盖，如果列表里没有 transform，回弹就会被掐断、变成瞬间跳回。 */
html.lg .smgpt-primary[data-lg-ring] {
  outline-width: 6px !important;
  outline-color: rgba(240, 68, 143, 0) !important;
  transition: outline-width .4s cubic-bezier(.08, .82, .17, 1), outline-color 2s cubic-bezier(.08, .82, .17, 1), background-color .2s var(--lg-ease), box-shadow .2s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .smgpt-primary:disabled { filter: saturate(.4); opacity: .55; }
html.lg .smgpt-tool[data-smgpt-pointer="coarse"] .smgpt-primary { border: 0 !important; box-shadow: 0 0 20px rgba(240, 68, 143, .38) !important; }
html.lg .smgpt-actions .smgpt-primary { width: 100%; min-height: 58px; font-size: 17px; margin-top: 16px; }
html.lg .smgpt-secondary {
  position: relative;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  box-shadow: var(--lg-glass-shadow);
  transition: transform .5s var(--lg-spring), background-color .3s var(--lg-ease);
}
html.lg .smgpt-secondary:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-drop); border: 0; box-shadow: var(--lg-float-shadow); transform: translateY(-1px); }
html.lg .smgpt-secondary:active:not(:disabled) { transform: scale(.955); }
html.lg .smgpt-secondary.smgpt-prompt-action[data-state="clear"] { color: #d0342c; }
html.lg .smgpt-secondary.smgpt-prompt-action[data-state="undo"] { color: var(--lg-mint-ink); background: var(--lg-mint-tint); }
html.lg .smgpt-secondary.smgpt-prompt-action[data-state="example"] { color: var(--lg-rose-ink); }

html.lg .smgpt-privacy-note { margin: 18px 6px 0; font-size: 13px; line-height: 1.75; color: var(--lg-ink-3); text-align: center; }
/* 按钮旁的动态说明（smgpt-status）：原来是按钮旁边一口圆角槽——高度和按钮对不齐，字一多就挤成好几行缩在槽里。
   改成按钮下方的一整行说明文字：没有底色槽，前面一个小圆点表示状态（进行中粉、完成绿、出错红），
   字多时占满整行自然换行。各处容器的排法见文件末尾“按钮下方的说明文字” */
html.lg .smgpt-tool .smgpt-status:not(:empty) {
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  color: var(--lg-ink-2);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
html.lg .smgpt-tool .smgpt-status:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--lg-ink-3);
  vertical-align: .1em;
}
html.lg .smgpt-tool .smgpt-status[data-type="success"] { color: var(--lg-mint-ink); background: none; }
html.lg .smgpt-tool .smgpt-status[data-type="success"]::before { background: var(--lg-mint); }
html.lg .smgpt-tool .smgpt-status[data-type="working"] { color: var(--lg-rose-ink); background: none; }
html.lg .smgpt-tool .smgpt-status[data-type="working"]::before { background: var(--lg-rose); animation: lg-status-pulse 1.4s ease-in-out infinite; }
html.lg .smgpt-tool .smgpt-status[data-type="error"] { color: #d0342c; background: none; }
html.lg .smgpt-tool .smgpt-status[data-type="error"]::before { background: #e5484d; }
html.lg body.dark-theme .smgpt-tool .smgpt-status[data-type="error"] { color: #ff8a80; }
@keyframes lg-status-pulse { 50% { opacity: .35; transform: scale(.8); } }

/* 文本输入框（档案名称、MJ 的 P 值 / 种子 / 负面提示词等）：玻璃井 */
html.lg .smgpt-tool :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea):not(.smgpt-direct-prompt) {
  min-height: 50px;
  padding: 0 16px;
  color: var(--lg-ink);
  background: var(--lg-well);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--lg-well-edge);
  font-size: 16px;
  transition: background-color .25s var(--lg-ease), box-shadow .25s var(--lg-ease);
}
html.lg .smgpt-tool textarea:not(.smgpt-direct-prompt) { padding: 14px 16px; line-height: 1.7; }
html.lg .smgpt-tool :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea):not(.smgpt-direct-prompt):focus {
  outline: 0;
  background: var(--lg-glass-regular);
  box-shadow: var(--lg-well-edge), var(--lg-focus-ring);
}
html.lg .smgpt-tool :is(input, textarea)::placeholder { color: var(--lg-ink-3); opacity: 1; }

/* 自定义灵感 */
html.lg .smgpt-direct-prompt {
  padding: 20px 22px;
  color: var(--lg-ink);
  background: var(--lg-well);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-well-edge);
  font-size: 16px;
  line-height: 1.8;
}
html.lg .smgpt-direct-prompt:focus { outline: 0; background: var(--lg-glass-regular); box-shadow: var(--lg-well-edge), var(--lg-focus-ring); }
html.lg .smgpt-direct-prompt::placeholder { color: var(--lg-ink-3); }
html.lg .smgpt-mode-note { color: var(--lg-ink-2); font-size: 14px; line-height: 1.7; }

/* --- 出片设置 --- */
html.lg .smgpt-generation-panel h4 { font-size: 20px; font-weight: 700; }
html.lg :is(.smgpt-engine-option, .smgpt-mj-model) {
  color: var(--lg-ink-2);
  background: var(--lg-well);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-well-edge);
  transition: background-color .3s var(--lg-ease), box-shadow .3s var(--lg-ease), transform .5s var(--lg-spring);
}
html.lg :is(.smgpt-engine-option, .smgpt-mj-model):hover { color: var(--lg-ink); border: 0; background: var(--lg-glass-regular); box-shadow: var(--lg-well-edge); transform: translateY(-1px); }
html.lg :is(.smgpt-engine-option, .smgpt-mj-model)[aria-checked="true"] { color: var(--lg-ink); background: var(--lg-drop); border: 0; box-shadow: var(--lg-drop-shadow); }
html.lg :is(.smgpt-engine-option, .smgpt-mj-model) small { color: var(--lg-ink-3); opacity: 1; }
html.lg :is(.smgpt-segments, .smgpt-ratio-grid) {
  position: relative;
  gap: 2px;
  padding: 5px;
  background: var(--lg-well);
  border-radius: 999px;
  box-shadow: var(--lg-well-edge);
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
}
html.lg .smgpt-ratio-grid { border-radius: 28px; }
html.lg :is(.smgpt-segments, .smgpt-ratio-grid)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--lg-tw, 0px);
  height: var(--lg-th, 0px);
  transform: translate(var(--lg-tx, 0px), var(--lg-ty, 0px)) scale(var(--lg-tsx, 1), var(--lg-tsy, 1));
  border-radius: 999px;
  background: var(--lg-drop);
  box-shadow: var(--lg-drop-shadow);
  opacity: var(--lg-to, 0);
  pointer-events: none;
}
html.lg .smgpt-ratio-grid::before { border-radius: 22px; }
html.lg :is(.smgpt-segments button, .smgpt-ratio-option),
html.lg .smgpt-tool[data-smgpt-pointer="coarse"] :is(.smgpt-segments button, .smgpt-ratio-option)[aria-checked="true"] {
  position: relative;
  z-index: 1;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 500;
  transition: color .35s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .smgpt-ratio-option { border-radius: 22px; }
html.lg .smgpt-segments button { min-height: 46px; }
html.lg :is(.smgpt-segments button, .smgpt-ratio-option):hover { color: var(--lg-ink); background: transparent; box-shadow: none; transform: none; }
html.lg :is(.smgpt-segments button, .smgpt-ratio-option)[aria-checked="true"],
html.lg .smgpt-tool[data-smgpt-pointer="coarse"] :is(.smgpt-segments button, .smgpt-ratio-option)[aria-checked="true"]:is(*) { color: var(--lg-drop-ink); font-weight: 650; background: transparent; box-shadow: none; }
html.lg :is(.smgpt-segments, .smgpt-ratio-grid):not([data-lg-thumb]) > [aria-checked="true"] { background: var(--lg-drop); }
html.lg :is(.smgpt-segments button, .smgpt-ratio-option):active:not(:disabled) { transform: scale(.95); }
html.lg .smgpt-ratio-option { height: 84px; font-size: 13px; }
html.lg .smgpt-ratio-option small { font-size: 11.5px; }
/* 比例网格：插件是 7 列且“跟随原图”占 2 格，MJ 面板（1+7）会排成 6+2、通用面板（1+15）排成 7+7+3。
   两处按钮数都是 8 的倍数：“跟随原图”只占 1 格，桌面一行 8 格、手机一行 4 格，每行都排满。 */
html.lg .smgpt-ratio-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
html.lg .smgpt-ratio-auto { grid-column: auto; }
html.lg .smgpt-ratio-option > span:not(.smgpt-ratio-shape) { white-space: nowrap; }
/* 图形高矮不一，放进固定 24px 的一行，文字才能对齐 */
html.lg .smgpt-ratio-option { display: grid; grid-template-rows: 24px auto; align-content: center; justify-items: center; align-items: center; row-gap: 5px; }
html.lg .smgpt-ratio-option small { margin-top: -3px; }
@media (max-width: 640px) {
  html.lg .smgpt-ratio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.lg .smgpt-ratio-option { height: 76px; }
}
html.lg .smgpt-mj-hint { border: 0; border-radius: var(--lg-r-m); background: var(--lg-inset); font-size: 14px; }
html.lg .smgpt-mj-advanced > summary { min-height: 64px; background: var(--lg-inset); border: 0; border-radius: var(--lg-r-l); }
html.lg .smgpt-mj-advanced > summary:hover { background: var(--lg-inset-2); border: 0; }
html.lg .smgpt-mj-advanced .smgpt-adv-caret { background: var(--lg-sel); color: var(--lg-sel-ink); }
html.lg .smgpt-generate-actions .smgpt-primary { min-width: 220px; min-height: 60px; font-size: 17px; }

/* 进度（保留流光、✦ 闪烁、当前点脉冲） */
html.lg .smgpt-progress { margin-top: 16px; padding: 18px 20px; background: var(--lg-well); border: 0; border-radius: var(--lg-r-l); box-shadow: var(--lg-well-edge); }
html.lg .smgpt-progress-head { font-size: 14px; color: var(--lg-ink-2); }
html.lg :is(.smgpt-card-progress, .smgpt-progress-track, .smgpt-upload-progress > [role="progressbar"]) { height: 8px; border-radius: 999px; background: var(--lg-inset-2); }
html.lg :is(.smgpt-card-progress > span, .smgpt-progress-track > span, .smgpt-upload-progress > [role="progressbar"] > span) { background-color: var(--lg-rose); }
html.lg .smgpt-progress-steps li { font-size: 12.5px; }
html.lg .smgpt-progress-steps li[data-state="complete"] { color: var(--lg-mint-ink); }
html.lg .smgpt-progress-steps li[data-state="complete"]::before { background: var(--lg-mint); }

/* 本次成片 */
html.lg .smgpt-output-card { border: 0; border-radius: var(--lg-r-l); background: var(--lg-glass-thick); box-shadow: var(--lg-shadow-soft); overflow: hidden; }
/* 成片下方“存到云端 / 下载”：插件是 132px 宽的方角小块（勾选框那个还是灰底方块），
   改成和下面“替换 / 高清修复”一样的两列等宽玻璃胶囊；勾选框换成圆角小框 + 矢量对勾 */
html.lg .smgpt-output-delivery-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
html.lg .smgpt-output-delivery-actions > :is(.smgpt-cloud-choice, .smgpt-secondary),
html.lg .smgpt-output-grid[data-mj-batch="true"] .smgpt-output-delivery-actions > :is(.smgpt-cloud-choice, .smgpt-secondary) {
  display: inline-flex;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}
html.lg .smgpt-output-delivery-actions > .smgpt-cloud-choice:has(input:checked) { background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .smgpt-output-delivery-actions > .smgpt-cloud-choice:has(input:disabled) { color: var(--lg-ink-3); }
html.lg .smgpt-output-delivery-actions > [hidden] { display: none !important; }
/* 「替换 / 高清修复」：0.9.771 补。上面那条当初就是把这一行当参照、把「存到云端 / 下载」
   压成 46px 玻璃胶囊的，但这一行本身漏了 —— 它只吃到下面那条全局按钮规则
   （html.lg :is(.smgpt-primary, .smgpt-secondary) 的 min-height:52px / padding:0 26px
   / font-size:16px），于是整行比上一行高 6px、字也大一号，两行对不齐。
   这里只补盒子尺寸（配色/阴影/圆角本来就由那条全局规则给到，不用重复写）。
   站长 2026-10-09 从截图上看出来的。 */
html.lg .smgpt-output-postprocess-actions > :is(.smgpt-secondary, .smgpt-postprocess-entry) {
  min-height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

/* --- 相册 --- */
html.lg .smgpt-local-gallery { margin-top: 96px; padding: 0; }
html.lg .smgpt-local-gallery::before { display: none; }
html.lg .smgpt-local-gallery.smgpt-cloud-gallery { margin-top: 64px; }
html.lg .smgpt-gallery-head { padding: 0 6px; }
html.lg .smgpt-gallery-head h4 { font-size: 28px; font-weight: 750; letter-spacing: -.01em; }
html.lg .smgpt-gallery-head p { font-size: 15px; line-height: 1.7; color: var(--lg-ink-2); }
html.lg :is(.smgpt-library-toggle, .smgpt-library-more, .smgpt-library-batch button) {
  position: relative;
  min-height: 42px;
  padding: 0 18px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 14px;
  font-weight: 600;
  transition: transform .5s var(--lg-spring);
}
html.lg :is(.smgpt-library-toggle, .smgpt-library-more, .smgpt-library-batch button):is(:hover, :focus-visible):not(:disabled) {
  color: var(--lg-ink);
  background: var(--lg-drop);
  border: 0;
  box-shadow: var(--lg-float-shadow);
  transform: translateY(-1px);
}
/* 0.9.967：相册「展开全部/加载更多」与普通 .smgpt-secondary 按钮用同一套聚焦效果：
 * 只把玻璃提亮，不画粉环、不画外侧光环。 */
html.lg :is(.smgpt-library-toggle, .smgpt-library-filter-toggle, .smgpt-library-more, .smgpt-library-batch button):focus-visible:not(:disabled) {
  color: var(--lg-ink) !important;
  background: var(--lg-drop) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: var(--lg-float-shadow) !important;
  transform: translateY(-1px);
}
html.lg .smgpt-library-batch [data-smgpt-library-delete-selected]:not(:disabled) { color: #d0342c; }
html.lg .smgpt-library-batch [data-smgpt-library-multi-select][aria-pressed="true"] { color: var(--lg-drop-ink); background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .smgpt-library-tools { gap: 12px; padding: 16px; background: var(--lg-glass-regular); border: 0; border-radius: 28px; box-shadow: var(--lg-float-shadow); }
html.lg .smgpt-library-tools label { gap: 6px; color: var(--lg-ink-3); font-size: 13px; font-weight: 600; }
html.lg .smgpt-library-tools :is(input, select) { min-height: 46px; padding: 0 14px; color: var(--lg-ink); background-color: var(--lg-well); border: 0; border-radius: 16px; box-shadow: var(--lg-well-edge); font-size: 15px; }
html.lg [data-smgpt-library-section] > .smgpt-library-filter-toggle { min-height: 52px; padding: 0 20px; background: var(--lg-glass-regular); border: 0; border-radius: 999px; box-shadow: var(--lg-glass-shadow); }
html.lg [data-smgpt-library-section] > .smgpt-library-filter-toggle > span { font-size: 15px; font-weight: 600; }
html.lg [data-smgpt-library-section] > .smgpt-library-filter-toggle > small { font-size: 13px; }
html.lg :is(.smgpt-face-library, .smgpt-local-gallery) [class*="empty"] { border: 0; border-radius: var(--lg-r-l); background: var(--lg-well); box-shadow: var(--lg-well-edge); font-size: 14px; color: var(--lg-ink-2); }
html.lg .smgpt-gallery-grid { --smgpt-gallery-gap: 8px; margin-top: 18px; }
@media (max-width: 700px) { html.lg .smgpt-gallery-grid { --smgpt-gallery-gap: 6px; } }
/* ↑ 瀑布流间距收回接近插件原来的 5px（原 10–14px），卡片稍大一点 */
/* 性能（相册可能展开上千张）：
   ① 插件的骨架“微光”（gallery-performance.css 的 media::before）是无限循环动画，图片加载完后仍在图片下面跑，
      每张卡一个合成层，还会把图片、卡片连带提升（实测 474 张时 1440 个图层）。图片加载完（skin.js 标 data-lg-loaded）就停掉。
   ② 插件给卡片加了 backface-visibility: hidden，Chrome 会把每张卡单独成层；卡片没有 3D 翻转，不需要。 */
html.lg .smgpt-gallery-card-media[data-lg-loaded]::before { content: none; animation: none; }
html.lg :is(.smgpt-gallery-card, .smgpt-face-profile-card) { -webkit-backface-visibility: visible; backface-visibility: visible; }
html.lg .smgpt-gallery-card,
html.lg .smgpt-gallery-card-media { border-radius: 20px; }
html.lg .smgpt-gallery-card-media { background: var(--lg-inset); border: 0; box-shadow: 0 20px 40px -26px rgba(56, 40, 24, .6); }
html.lg .smgpt-gallery-card::after { border: 0; box-shadow: none; }
html.lg .smgpt-gallery-card:is(:focus-within:not([data-lg-idle]), :hover, [data-actions-visible="true"]) .smgpt-gallery-card-media { border: 0; box-shadow: 0 30px 56px -26px rgba(56, 40, 24, .7); }
html.lg .smgpt-gallery-card:is(:focus-within:not([data-lg-idle]), :hover) { box-shadow: none; transform: translateY(-4px); }
html.lg .smgpt-gallery-meta { padding: 40px 12px 12px; background: linear-gradient(180deg, transparent, rgba(12, 13, 16, .5)); }
html.lg .smgpt-gallery-meta time { font-size: 12px; color: #fff; font-variant-numeric: tabular-nums; }
html.lg .smgpt-gallery-card > .smgpt-gallery-card-actions {
  top: calc(100% + 8px);
  gap: 6px;
  padding: 6px;
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  /* 相册可能展开上千张：操作栏不做实时背景模糊（每张卡都有一个，悬停 / 滚动时开销很大），用同色的厚玻璃底 */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.lg .smgpt-gallery-card > .smgpt-gallery-card-actions::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
html.lg .smgpt-gallery-card-actions :is(.smgpt-gallery-delete, .smgpt-secondary) {
  min-height: 40px;
  padding: 6px;
  color: var(--lg-ink);
  background: var(--lg-inset);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
}
html.lg .smgpt-gallery-card-actions .smgpt-secondary::after { display: none; }
html.lg .smgpt-gallery-card-actions .smgpt-secondary:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-inset-2); border: 0; }
html.lg .smgpt-gallery-card-actions .smgpt-gallery-delete:is(:hover, :focus-visible) { color: #fff; background: #d0342c; border: 0; }

/* 相册卡 / 灯箱操作条里的按钮：统一成玻璃按钮，只用文字颜色区分
   （插件用 !important 把“做同款 / 拍一套 / 替换 / 高清修复 / 下载”填成实心粉、“已存云端”填成实心绿，一排看起来很乱） */
html.lg .smgpt-gallery-card-actions :is(.smgpt-secondary, .smgpt-gallery-delete) {
  color: var(--lg-ink) !important;
  background: var(--lg-well) !important;
  border: 0 !important;
  box-shadow: var(--lg-well-edge) !important;
  font-weight: 600 !important;
  animation: none;
}
html.lg .smgpt-gallery-card-actions :is(.smgpt-reuse-button, .smgpt-postprocess-entry, .smgpt-gallery-download-button) { color: var(--lg-rose-ink) !important; }
html.lg .smgpt-gallery-card-actions .smgpt-secondary[aria-pressed="true"] { color: var(--lg-mint-ink) !important; background: var(--lg-mint-tint) !important; }
html.lg .smgpt-gallery-card-actions .smgpt-gallery-delete { color: #d0342c !important; }
html.lg .smgpt-gallery-card-actions :is(.smgpt-secondary, .smgpt-gallery-delete):is(:hover, :focus-visible):not(:disabled) { background: var(--lg-glass-regular) !important; transform: translateY(-1px); }
html.lg .smgpt-gallery-card-actions .smgpt-gallery-delete:is(:hover, :focus-visible) { color: #fff !important; background: #d0342c !important; }
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions :is(.smgpt-secondary, .smgpt-gallery-delete) {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 0 !important;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .3) !important;
}
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions :is(.smgpt-reuse-button, .smgpt-postprocess-entry, .smgpt-gallery-download-button) { color: #ff6fb5 !important; }
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions .smgpt-secondary[aria-pressed="true"] { color: #6ff0bb !important; background: rgba(79, 224, 168, .16) !important; }
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions .smgpt-gallery-delete { color: #ff5b4d !important; }
/* ★ 0.9.917 灯箱这一排按钮的 **hover 反馈整排补齐** ✓（含删除 ✓）。
   经过（值得记 ✓）：
   ① 站长 10-16 先发现「别的按钮聚焦时有小幅上移，就删除没有」⇒ 真因是那条上移规则只写了
      `.smgpt-secondary`（见 2013 行 ✓），而删除的 class 是 `.smgpt-gallery-delete` ✗ ⇒ 漏了 ✓；
   ② 我 0.9.916 只给**删除**补了一条带 `!important` 的 hover ✗ ⇒ 站长立刻发现
      「删除键是加了个聚焦高亮？我看其他按钮都没有」✗ —— **是我造出来的不一致** ✗✗；
   ③ 实测（CDP 逐个悬停读计算样式）才看清**真正的地基**：灯箱这排的基座规则（2314 行，带 `!important`）
      **压住了皮肤里那条 `.smgpt-secondary:hover`**（2013 行）✗ ⇒ 灯箱里**整排**按钮其实
      **都没有 hover 底色/阴影** ✗（只有 `transform` 漏了过来 ✓ 因为基座没写 transform ✓）。
   ⇒ 所以正确的修法是**整排一起给**（而不是只给某一个 ✗）：玻璃底 + 浮动阴影 + 上移 1px，
     用与基座同级的 `!important` 才能赢过它 ✓。**加这一类"族内某个成员的特例"之前，先确认整族的地基长什么样** ✓。
   字色仍是那一档更实的红（0.9.915 ✓）。 */
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions :is(.smgpt-secondary, .smgpt-gallery-delete):is(:hover, :focus-visible):not(:disabled) {
  background: var(--lg-drop) !important;
  box-shadow: var(--lg-float-shadow) !important;
  transform: translateY(-1px);
}

/* --- 右下角状态通知 / 收藏弹窗 / 灯箱操作条 --- */
html.lg .smgpt-status-notice {
  gap: 12px;
  padding: 12px 12px 12px 14px;
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: 26px;
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
  backdrop-filter: blur(30px) saturate(1.8) !important;
  animation: lg-rise .6s var(--lg-spring) both;
}
html.lg .smgpt-status-notice-copy strong { font-size: 15px; font-weight: 650; }
html.lg .smgpt-status-notice-copy span { font-size: 14px; color: var(--lg-ink-2); }
html.lg :is(.smgpt-status-notice-locate, .smgpt-status-notice-close) { min-height: 38px; border-radius: 999px; }
html.lg .smgpt-status-notice-locate { padding: 0 14px; background: var(--lg-inset); font-size: 13px; }
html.lg .smgpt-status-notice-close { width: 38px; }
html.lg .smgpt-status-notice[data-type="success"] .smgpt-status-notice-mark { background: var(--lg-mint); }
@keyframes lg-rise {
  from { opacity: 0; transform: translateY(18px) scale(.92); }
  to { opacity: 1; transform: none; }
}
html.lg .smgpt-gallery-favorite-overlay { background: var(--lg-scrim); -webkit-backdrop-filter: blur(24px) saturate(1.4) !important; backdrop-filter: blur(24px) saturate(1.4) !important; }
html.lg .smgpt-gallery-favorite-dialog { color: var(--lg-ink); background: var(--lg-glass-thick); border: 0; border-radius: var(--lg-r-xl); box-shadow: var(--lg-shadow-deep), var(--lg-edge); -webkit-backdrop-filter: blur(40px) saturate(1.8) !important; backdrop-filter: blur(40px) saturate(1.8) !important; }
html.lg .smgpt-gallery-favorite-toast { color: var(--lg-ink); background: var(--lg-glass-thick); border-radius: 999px; box-shadow: var(--lg-float-shadow); -webkit-backdrop-filter: blur(30px) !important; backdrop-filter: blur(30px) !important; }
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions {
  background: rgba(30, 30, 38, .42) !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .4), inset 0 0 22px -8px rgba(255, 255, 255, .3), 0 30px 60px -24px rgba(0, 0, 0, .8) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
  backdrop-filter: blur(26px) saturate(1.8) !important;
}
html.lg :is(.mini-imgbox, [id="colensme-lightbox-layer"]) .smgpt-theme-lightbox-actions :is(.smgpt-gallery-delete, .smgpt-secondary) { background-color: rgba(255, 255, 255, .12) !important; border: 0 !important; border-radius: 14px; box-shadow: none; }

/* --- 自拍室 手机与平板 --- */
@media (max-width: 999px) {
  html.lg .smgpt-tool { display: flex; flex-direction: column; }
  html.lg .smgpt-tool > .smgpt-header { order: 1; }
  html.lg .smgpt-tool > .lg-hero { order: 2; width: 100%; max-width: 520px; margin: 26px auto 0; aspect-ratio: 4 / 4.6; }
  html.lg .smgpt-tool > .smgpt-experience-tabs { order: 3; align-self: flex-start; }
  html.lg .smgpt-tool > .smgpt-workflow-overview { order: 4; }
  html.lg .smgpt-tool > .smgpt-top-resources { order: 5; }
  html.lg .smgpt-tool > :not(.smgpt-header, .lg-hero, .smgpt-experience-tabs, .smgpt-workflow-overview, .smgpt-top-resources) { order: 6; }
}
@media (max-width: 640px) {
  html.lg .smgpt-tool,
  html.lg body:not(.dark-theme) .smgpt-tool { padding: 0 14px 64px; }
  html.lg .smgpt-header { padding-top: 34px; }
  html.lg .smgpt-header h2 { font-size: 52px; }
  html.lg .smgpt-header p { font-size: 17px; }
  html.lg .smgpt-tool > .lg-hero { aspect-ratio: 4 / 5; margin-top: 22px; }
  html.lg .lg-hero-cta { height: 48px; padding: 0 18px; font-size: 15px; }
  html.lg .lg-hero-nav { width: 48px; height: 48px; }
  html.lg .lg-hero-actions { left: 12px; right: calc(12px + var(--lg-safe-r, 0px)); bottom: 12px; gap: 8px; }
  html.lg .smgpt-experience-tabs { width: 100%; margin-top: 22px; }
  html.lg .smgpt-experience-tabs small { font-size: 11.5px; }
  html.lg .smgpt-workflow-overview > button,
  html.lg .smgpt-workflow-overview > button:is(:hover, :focus-visible, [data-step-state]) { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  html.lg .smgpt-workflow-overview > button > span { width: 34px; height: 34px; }
  html.lg .smgpt-workflow-overview > button::after,
  html.lg .smgpt-workflow-overview > button[data-step-state]::after { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 6px; }
  html.lg .smgpt-step-heading,
  html.lg .smgpt-face-builder[data-step-state] > .smgpt-step-heading,
  html.lg .smgpt-step-heading.smgpt-workflow-step[data-step-state],
  html.lg .smgpt-tool[data-smgpt-experience] :is(.smgpt-final-step, .smgpt-sample-step) { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; margin-top: 64px; }
  html.lg .smgpt-step-heading > span { width: 44px; height: 44px; font-size: 19px; }
  html.lg .smgpt-step-heading h3 { font-size: 23px; }
  html.lg .smgpt-step-heading::after { grid-column: 2; justify-self: start; }
  /* 手机：常见问题 / 反馈并排成两个等宽按钮（右边不再空一块）；“点击展开”小字放不下，隐藏 */
  html.lg .smgpt-support-header .smgpt-header-tool-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  html.lg .smgpt-header-tool-buttons .smgpt-support-toggle { width: 100%; min-width: 0; gap: 7px; padding: 0 10px 0 6px; }
  html.lg .smgpt-header-tool-buttons .smgpt-support-toggle-icon { flex: 0 0 26px; width: 26px; height: 26px; font-size: 12px; }
  html.lg .smgpt-header-tool-buttons .smgpt-support-toggle-copy { min-width: 0; }
  html.lg .smgpt-header-tool-buttons .smgpt-support-toggle-copy > small { display: none; }
  html.lg .smgpt-header-tool-buttons .smgpt-support-toggle-copy > strong { overflow: hidden; font-size: min(13.5px, 3.45vw); white-space: nowrap; text-overflow: ellipsis; }
  /* 手机：一半宽度放不下“图标 + 文字 + 箭头”，去掉箭头、缩小图标，文字完整显示。
     0.9.681：高度和字号跟生成 / 分析主按钮看齐（58px / 17px），原来只有 48px / 14px。 */
  html.lg .smgpt-sample-resources { gap: 8px; }
  html.lg .smgpt-sample-resource,
  html.lg .smgpt-sample-resource[data-kind="xiaohongshu"] { min-height: 58px; padding: 0 10px; font-size: 17px; }
  html.lg .smgpt-top-resource,
  html.lg .smgpt-top-resource[data-kind="xiaohongshu"] { gap: 6px; padding: 0 8px 0 6px; }
  html.lg .smgpt-top-resource-mark,
  html.lg .smgpt-top-resource[data-kind="xiaohongshu"] .smgpt-top-resource-mark,
  html.lg .smgpt-top-resource:is(:hover, :focus-visible) .smgpt-top-resource-mark { width: 30px; height: 30px; font-size: 12px; }
  html.lg .smgpt-top-resource strong { font-size: 17px; }
  html.lg .smgpt-top-resource > i { display: none; }
  html.lg :is(.smgpt-face-library, .smgpt-face-create-workspace, .smgpt-mode-panel, .smgpt-generation-panel, .smgpt-output, .smgpt-postprocess, .smgpt-gallery-set-task, .smgpt-result),
  html.lg .smgpt-tool[data-smgpt-experience="selfie"] .smgpt-generation-panel { padding: 18px; border-radius: 30px; }
  html.lg .smgpt-mode-tabs { width: 100%; }
  html.lg :is(.smgpt-upload, .smgpt-face-upload) { min-height: 200px; }
  html.lg .smgpt-segments { border-radius: 26px; }
  html.lg .smgpt-status-notice { border-radius: 24px; }
  html.lg .smgpt-local-gallery { margin-top: 72px; }
  html.lg .smgpt-gallery-head h4 { font-size: 24px; }
}
@media (max-width: 390px) {
  html.lg .smgpt-header h2 { font-size: 46px; }
  html.lg .smgpt-gallery-meta time { font-size: 11px; }
  html.lg .smgpt-gallery-card-actions :is(.smgpt-gallery-delete, .smgpt-secondary) { font-size: 11.5px; padding: 6px 3px; }
}

/* ==========================================================================
   主题灯箱（只在从这两个插件打开时换外观，站内文章的灯箱不受影响）
   ========================================================================== */
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .imgbox-an { top: max(14px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; }
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .imgbox-an > a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 !important;
  color: #fff;
  background: rgba(255, 255, 255, .14) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .6), inset 0 0 16px -4px rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  transition: transform .5s var(--lg-spring), background-color .25s var(--lg-ease);
}
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .imgbox-an > a:hover { background: rgba(255, 255, 255, .24) !important; transform: scale(1.06); }
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .imgbox-an > a:active { transform: scale(.9); }
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .counter {
  margin: max(16px, env(safe-area-inset-top)) 16px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .14) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  font-family: var(--lg-num);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox :is(.swiper-button-prev, .swiper-button-next) {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
}
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox :is(.swiper-button-prev, .swiper-button-next)::after { font-size: 18px; font-weight: 700; }
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .swiper-slide img { border-radius: 18px; }
html.lg body:is(.colensme-sample-theme-lightbox, .smgpt-colensme-theme-lightbox) .mini-imgbox .swiper-thumbsbox {
  background: rgba(30, 30, 38, .4);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
}

/* 插件在二级面板里（拍一套、替换、高清修复、收藏分类、面部档案表单等）还有一批“悬停 / 聚焦时套粉色描边”的规则，
   统一改成中性：输入框聚焦 = 中性聚焦环，按钮悬停不换描边色，键盘聚焦用中性的细外框 */
html.lg :is(.smgpt-gallery-favorite-dialog .smgpt-gallery-category-picker select, .smgpt-gallery-set-fields select, .smgpt-search input, .smgpt-face-builder-form input[type="text"], .smgpt-num-input):is(:focus, :focus-visible) {
  border-color: transparent;
  outline: 0;
  box-shadow: var(--lg-well-edge), var(--lg-focus-ring);
}
html.lg :is(.smgpt-face-swap-tabs button, .smgpt-gallery-extract-choices button, .smgpt-postprocess-switcher .smgpt-postprocess-switcher-button, .smgpt-gallery-set-remove, .smgpt-gallery-set-result-actions .smgpt-postprocess-entry):is(:hover, :focus-visible) {
  border-color: var(--lg-divider);
  outline: 0;
  box-shadow: none;
}
html.lg :is(.smgpt-tool, .smgpt-gallery-favorite-dialog, .colensme-sample-library, .colensme-sample-portal, .colensme-submission-center-shell) :is(button, a, summary, [role="button"]):focus-visible,
html.lg .smgpt-output-preview-action:focus-visible {
  outline: 2px solid var(--lg-ink-3);
  outline-offset: 2px;
}

/* ==========================================================================
   投稿中心（样片库“投稿样片”弹窗：提交样片 / 投稿记录；管理员另有 待审核 / 发布样片 / 分类管理）
   和详情弹窗同一套材质：厚玻璃面板、左侧页签用玻璃液滴表示当前页、输入框是下凹的井、
   次要按钮是中性玻璃，只有“提交投稿”用品牌粉。原来的粉色虚线框、粉色描边按钮、实心粉页签都去掉。
   ========================================================================== */
html.lg .colensme-sample-submit-dialog {
  background: var(--lg-scrim);
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
}
html.lg .colensme-submission-center-shell {
  color: var(--lg-ink);
  background: var(--lg-glass-thick);
  border: 0;
  border-radius: var(--lg-r-xl);
  box-shadow: var(--lg-shadow-deep), var(--lg-edge);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  overflow: hidden;
  font-family: var(--lg-font);
}
html.lg .colensme-submission-center-header { padding: 22px 24px 18px 28px; background: transparent; border: 0; box-shadow: inset 0 -1px 0 var(--lg-line); }
html.lg .colensme-submission-center-header p { color: var(--lg-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
html.lg .colensme-submission-center-header h2 { margin-top: 4px; color: var(--lg-ink); font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
html.lg .colensme-submission-center-header span { color: var(--lg-ink-2); font-size: 13px; }
html.lg .colensme-submission-center-header .colensme-sample-dialog-close,
html.lg .colensme-submission-center-header .colensme-sample-dialog-close:is(:hover, :focus-visible, :active) {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  color: var(--lg-ink);
  background: var(--lg-inset-2);
  border: 0;
  border-radius: 999px;
  outline: 0;
  box-shadow: inset 0 1px .5px var(--lg-glow);
  transition: transform .5s var(--lg-spring), background-color .25s var(--lg-ease);
}
html.lg .colensme-submission-center-header .colensme-sample-dialog-close:is(:hover, :focus-visible) { background: var(--lg-glass-regular); transform: rotate(90deg); }
html.lg .colensme-submission-center-header .colensme-sample-dialog-close:active { transform: scale(.92); }

/* 左侧页签：一列玻璃按钮，当前页是一滴玻璃液滴 */
html.lg .colensme-submission-center-workspace { grid-template-columns: 200px minmax(0, 1fr); }
html.lg .colensme-submission-center-tabs { gap: 4px; padding: 16px 10px 16px 16px; background: transparent; border: 0; }
html.lg .colensme-submission-center-tabs button,
html.lg .colensme-submission-center-tabs button:is(:hover, :focus-visible, [aria-selected="true"], :active) {
  min-height: 46px;
  padding: 0 16px;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  outline: 0;
  box-shadow: none;
  filter: none;
  font-size: 15px;
  font-weight: 550;
  transition: color .25s var(--lg-ease), background-color .25s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .colensme-submission-center-tabs button:is(:hover, :focus-visible) { color: var(--lg-ink); background: var(--lg-inset); }
html.lg .colensme-submission-center-tabs button[aria-selected="true"] { color: var(--lg-drop-ink); background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); font-weight: 650; }
html.lg .colensme-submission-center-tabs button:active { transform: scale(.96); }
html.lg .colensme-submission-center-tab-separator { margin: 8px 12px; background: var(--lg-line); }
html.lg .colensme-submission-center-content { padding: 22px 26px 26px 12px; scrollbar-width: thin; scrollbar-color: var(--lg-inset-2) transparent; }

/* 标题 / 字段 */
html.lg .colensme-submission-panel-heading { margin-bottom: 20px; }
html.lg :is(.colensme-submission-panel-heading p, .colensme-sample-submit-kicker, .colensme-my-submissions header p) { color: var(--lg-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
html.lg .colensme-submission-panel-heading h3 { margin-top: 4px; color: var(--lg-ink); font-size: 22px; font-weight: 750; }
html.lg .colensme-submission-panel-heading span { color: var(--lg-ink-2); font-size: 13.5px; line-height: 1.65; }
html.lg .colensme-sample-submit-form { gap: 16px; }
html.lg .colensme-sample-submit-form > label { gap: 8px; color: var(--lg-ink-3); font-size: 13px; font-weight: 600; }
html.lg .colensme-sample-submit-form > label > span { color: var(--lg-ink); font-size: 15px; font-weight: 650; }
html.lg .colensme-sample-submit-form > label > small,
html.lg :is(.colensme-sample-submit-category-body > small, .colensme-sample-submit-summary, .colensme-sample-submit-status) { color: var(--lg-ink-3); font-size: 12.5px; font-weight: 500; }
html.lg .colensme-submission-center-shell :is(h3, h4, strong, legend) { color: var(--lg-ink); }
html.lg .colensme-submission-center-shell :is(p, small, .description) { color: var(--lg-ink-2); }

/* 输入框 / 下拉 / 多行：下凹的玻璃井，聚焦时变亮 + 中性聚焦环 */
html.lg .colensme-submission-center-shell :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input:not([type]), select, textarea) {
  min-height: 48px;
  padding: 10px 16px;
  color: var(--lg-ink);
  background-color: var(--lg-well);
  border: 0;
  border-radius: 16px;
  outline: 0;
  box-shadow: var(--lg-well-edge);
  font-size: 15px;
  transition: background-color .25s var(--lg-ease), box-shadow .25s var(--lg-ease);
}
html.lg .colensme-submission-center-shell select { padding-right: 40px; }
/* ★ 0.9.695：手机端输入控件必须 ≥16px，否则 iOS Safari 一点输入框就自动放大整页，
   填完还要手动缩回去。这条必须写在皮肤里 —— 上面那条
   `html.lg .colensme-submission-center-shell :is(input, select, textarea)` 优先级是
   (0,3,2)，而 sample-library-submit.css 里的单类选择器 (0,1,1) 压不过它（实测踩到）。 */
@media (max-width: 600px) {
  html.lg .colensme-submission-center-shell :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input:not([type]), select, textarea) { font-size: 16px; }
  /* 吸顶的「批量设置适用范围」在手机上必须够矮，否则会盖住第一行卡片的图片。
     上面的 48px min-height 让整条栏高到 85px，这里单独收紧到 36px。 */
  html.lg .colensme-submission-center-shell .colensme-sample-submit-bulk-usage :is(select, button),
  html.lg .colensme-submission-center-shell .colensme-sample-upload-bulk-usage :is(select, button) { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
  html.lg .colensme-submission-center-shell :is(.colensme-sample-submit-bulk-usage, .colensme-sample-upload-bulk-usage) { padding-top: 6px; padding-bottom: 6px; }
}
html.lg .colensme-submission-center-shell :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input:not([type]), select, textarea):is(:hover, :focus, :focus-visible) {
  background-color: var(--lg-glass-regular);
  border: 0;
  outline: 0;
  box-shadow: var(--lg-well-edge);
}
html.lg .colensme-submission-center-shell :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input:not([type]), select, textarea):focus { box-shadow: var(--lg-well-edge), var(--lg-focus-ring); }
html.lg .colensme-submission-center-shell :is(input, textarea)::placeholder { color: var(--lg-ink-3); opacity: 1; }

/* 选择图片：一口带虚线的浅井（不再是粉色虚线框） */
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker),
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker):is(:hover, :focus-within) {
  padding: 22px;
  color: var(--lg-ink-2);
  background: var(--lg-well);
  border: 1.5px dashed var(--lg-divider);
  border-radius: var(--lg-r-l);
  box-shadow: none;
  outline: 0;
}
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker):is(:hover, :focus-within) { background: var(--lg-inset-2); }
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker) input[type="file"] {
  min-height: 0;
  padding: 0;
  color: var(--lg-ink-2);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 14px;
}
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker) input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: 14px;
  padding: 0 22px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 14px;
  font-weight: 650;
  transition: transform .45s var(--lg-spring);
}
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker) input[type="file"]::file-selector-button:hover { filter: none; box-shadow: var(--lg-float-shadow); transform: translateY(-1px); }
html.lg :is(.colensme-sample-submit-picker, .colensme-sample-upload-picker) :is(span, strong, small, p) { color: var(--lg-ink-2); }

/* 主题分类：可折叠的一块，展开后是一排玻璃胶囊 */
html.lg .colensme-sample-submit-categories {
  background: var(--lg-inset);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: none;
}
html.lg .colensme-sample-submit-categories > summary,
html.lg .colensme-sample-submit-categories[open] > summary,
html.lg .colensme-sample-submit-categories > summary:is(:hover, :focus-visible) {
  min-height: 56px;
  padding: 0 20px;
  color: var(--lg-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
  font-weight: 650;
}
html.lg .colensme-sample-submit-categories > summary:is(:hover, :focus-visible) { background: var(--lg-inset); }
html.lg .colensme-sample-submit-categories[open] > summary { box-shadow: inset 0 -1px 0 var(--lg-line); }
html.lg .colensme-sample-submit-categories > summary::after { color: var(--lg-ink-3); }
html.lg .colensme-sample-submit-categories > summary em,
html.lg .colensme-sample-submit-categories > summary em[data-empty="true"] {
  padding: 4px 12px;
  color: var(--lg-drop-ink);
  background: var(--lg-drop);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-drop-shadow);
  font-size: 12.5px;
  font-weight: 650;
}
html.lg .colensme-sample-submit-categories > summary em[data-empty="true"] { color: var(--lg-ink-3); background: var(--lg-inset-2); box-shadow: none; }
html.lg .colensme-sample-submit-category-body { gap: 14px; padding: 16px 18px 18px; }

/* 多选胶囊（投稿分类、审核改分类、发布样片的分类）：
   未选 = 下凹的井 + 空心小框；选中 = 浮起的玻璃液滴 + 品牌粉实心小框和白色对勾（矢量图，和主题的字体图标无关） */
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) { gap: 8px; }
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label,
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label:is(:hover, :focus-within, :has(input:checked)) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 11px;
  color: var(--lg-ink-2);
  background: var(--lg-well);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--lg-well-edge);
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  transition: color .25s var(--lg-ease), background-color .25s var(--lg-ease), box-shadow .25s var(--lg-ease), transform .45s var(--lg-spring);
  -webkit-tap-highlight-color: transparent;
}
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label:hover { color: var(--lg-ink); background: var(--lg-inset-2); }
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label:has(input:checked) {
  color: var(--lg-drop-ink);
  background: var(--lg-drop);
  box-shadow: var(--lg-drop-shadow);
  font-weight: 650;
}
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label:has(:focus-visible) { box-shadow: var(--lg-well-edge), var(--lg-focus-ring); }
html.lg :is(.colensme-sample-submit-category-options, .colensme-submission-term-picker, .colensme-classification-term-picker, .colensme-sample-admin-terms) > label:active { transform: scale(.95); }

/* 勾选框本身（投稿中心里所有的，含胶囊里的）：20px 圆角小框。
   主题给所有 checkbox 加了 FontAwesome 打勾伪元素（未选时缩成 0，选中时放大），会叠在方框里，全部去掉；
   对勾改用背景里的矢量图 */
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"],
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]:is(:checked, :hover, :focus-visible, :active) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent none center / 14px 14px no-repeat;
  border: 0;
  border-radius: 6px;
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--lg-ink-3);
  opacity: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .2s var(--lg-ease), box-shadow .2s var(--lg-ease), transform .35s var(--lg-spring);
}
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]::before,
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]::after { content: none !important; display: none !important; }
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]:checked {
  background-color: var(--lg-rose);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: 0 3px 8px -3px rgba(200, 30, 100, .7), inset 0 1px .5px rgba(255, 255, 255, .45);
}
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]:active { transform: scale(.88); }
html.lg :is(.colensme-submission-center-shell, .smgpt-cloud-choice, .smgpt-cloud-save-bar) input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
/* 单选（发布方式）：圆形，选中是粉色圆环 + 白心 */
html.lg .colensme-submission-center-shell input[type="radio"],
html.lg .colensme-submission-center-shell input[type="radio"]:is(:checked, :hover, :focus-visible) {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--lg-ink-3);
  cursor: pointer;
  transition: box-shadow .25s var(--lg-ease);
}
html.lg .colensme-submission-center-shell input[type="radio"]::before,
html.lg .colensme-submission-center-shell input[type="radio"]::after { content: none !important; display: none !important; }
html.lg .colensme-submission-center-shell input[type="radio"]:checked { background: #fff; box-shadow: inset 0 0 0 6px var(--lg-rose), 0 3px 8px -3px rgba(200, 30, 100, .7); }
/* 发布方式的两张选项卡：和出片引擎一样，未选是井，选中是液滴 */
html.lg .colensme-sample-upload-mode > div > label,
html.lg .colensme-sample-upload-mode > div > label:has(input:checked) {
  padding: 16px 18px;
  background: var(--lg-well);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-well-edge);
}
html.lg .colensme-sample-upload-mode > div > label:has(input:checked) { background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .colensme-sample-upload-mode strong { font-size: 14.5px; }
html.lg .colensme-sample-upload-mode small { color: var(--lg-ink-3); font-size: 12.5px; }

/* 分组块（批量操作条、审核卡、投稿记录、分类管理、批量用途）：浅浅的一块，不描边 */
html.lg :is(.colensme-submission-bulk-controls, .colensme-submission-review-form fieldset, .colensme-classification-review, .colensme-sample-category-order, .colensme-sample-submit-bulk-usage, .colensme-sample-upload-bulk-usage),
html.lg .colensme-submission-center-panel .colensme-my-submissions {
  padding: 16px;
  color: var(--lg-ink);
  background: var(--lg-inset);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: none;
}
html.lg .colensme-submission-bulk-controls label,
html.lg .colensme-submission-select { color: var(--lg-ink); background: transparent; border: 0; box-shadow: none; }
html.lg :is(.colensme-submission-review-card, .colensme-my-submission) { border-top-color: var(--lg-line); }
html.lg :is(.colensme-submission-review-image, .colensme-my-submission-thumb) { border-radius: var(--lg-r-m); background: var(--lg-inset); }
html.lg .colensme-classification-review-empty { color: var(--lg-ink-3); background: var(--lg-inset); border-radius: var(--lg-r-m); }
html.lg .colensme-submission-review-count { background: var(--lg-rose); }
html.lg .colensme-my-submission a { color: var(--lg-rose-ink); }

/* ★ 0.9.716：站长反馈"提交投稿的按钮样式有 bug，弄成和自拍室那边生成按钮一样的吧"。
   ⚠️ 关键是"自拍室那边看到的" = **皮肤里的 `.smgpt-primary`**（不是插件 frontend.css 里那条）：
      药丸 999px、实心 #f0448f、**border: 0**、柔和外发光 `0 0 20px rgba(240,68,143,.38)`、
      悬停 #f25a9c + 更大发光且**不上浮**、按下 scale(.972)、禁用 saturate(.4)+opacity .55。
      而且 **0.9.680 驿站长要求把那道白色扫光去掉了**（"压在实心粉上像塑料"），
      所以这里绝对不能加扫光 —— 我第一版误加了 `background-image` 扫光，已删除。
   原来提交投稿用的是"玻璃药丸"：inset 高光 + 硬投影 + 悬停上浮 2px，和主按钮明显不同。 */
/* ⚠️ 选择器必须**带上 :is(:hover, :focus-visible) 一起写**（照抄旧规则的写法）。
   旧规则是 `.colensme-sample-submit-action, .colensme-sample-submit-action:is(:hover, :focus-visible)`
   这样的**列表**，而选择器列表按其中**优先级最高**的那个算 —— 按钮一进 hover/focus 就是 (0,3,1)。
   我第一版只写基础选择器 (0,2,1)，结果 min-height / font-size / font-weight 全被旧规则压住，
   只有同样 (0,3,1) 的 hover 规则生效（background 对了、尺寸和字重没对）。真机实测踩到。 */
html.lg .colensme-sample-submit-action,
html.lg .colensme-sample-submit-action:is(:hover, :focus-visible) {
  /* 尺寸对齐自拍室**满宽主按钮**那一档（皮肤里 `.smgpt-actions .smgpt-primary`
     是 min-height 58px / font-size 17px；桌面 CDP 读到的「点击开拍（196积分）」是 60px / 17px）。 */
  min-height: 58px;
  color: #fff;
  background: #f0448f;
  border: 0;
  border-radius: 999px;
  outline: 0;
  box-shadow: 0 0 20px rgba(240, 68, 143, .38);
  filter: none;
  font-size: 17px;
  font-weight: 600;
  transition: background-color .2s var(--lg-ease), box-shadow .2s var(--lg-ease), transform .45s var(--lg-spring);
}
html.lg .colensme-sample-submit-action:is(:hover, :focus-visible) { color: #fff; background: #f25a9c; box-shadow: 0 0 28px rgba(240, 68, 143, .52); transform: none; }
html.lg .colensme-sample-submit-action:active:not(:disabled) { transform: scale(.972); box-shadow: 0 0 20px rgba(240, 68, 143, .38); }
html.lg .colensme-sample-submit-action:disabled { cursor: wait; filter: saturate(.4); opacity: .55; }
/* 扫光保持关闭（和主按钮一致，见上面的注释） */
html.lg .colensme-sample-submit-action::after { display: none !important; content: none !important; }
html.lg .colensme-sample-submit-action[data-state="success"] { background: #14a974; box-shadow: 0 0 20px rgba(20, 169, 116, .38); }
html.lg .colensme-sample-submit-success-actions { gap: 10px; }
html.lg :is(.colensme-sample-submit-success-actions button, .colensme-my-submissions header button, .colensme-submission-bulk-controls button, .colensme-submission-review-actions button, .colensme-submission-reject-form button, .colensme-sample-submit-bulk-usage button, .colensme-sample-upload-bulk-usage button),
html.lg .colensme-sample-admin :is(.colensme-sample-admin-primary, .colensme-sample-upload-actions button, .colensme-sample-category-order button, .colensme-classification-review form button) {
  min-height: 44px;
  padding: 0 18px;
  color: var(--lg-ink) !important;
  background: var(--lg-glass-btn) !important;
  border: 0 !important;
  border-radius: 999px;
  outline: 0;
  box-shadow: var(--lg-glass-shadow) !important;
  filter: none;
  font-size: 14px;
  font-weight: 650;
  transition: transform .45s var(--lg-spring), box-shadow .25s var(--lg-ease);
}
html.lg .colensme-sample-submit-success-actions button { min-height: 50px; font-size: 15px; }
html.lg :is(.colensme-sample-submit-success-actions button, .colensme-my-submissions header button, .colensme-submission-bulk-controls button, .colensme-submission-review-actions button, .colensme-submission-reject-form button, .colensme-sample-submit-bulk-usage button, .colensme-sample-upload-bulk-usage button):is(:hover, :focus-visible):not(:disabled),
html.lg .colensme-sample-admin :is(.colensme-sample-admin-primary, .colensme-sample-upload-actions button, .colensme-sample-category-order button, .colensme-classification-review form button):is(:hover, :focus-visible):not(:disabled) {
  color: var(--lg-ink) !important;
  background: var(--lg-glass-thick) !important;
  box-shadow: var(--lg-float-shadow) !important;
  transform: translateY(-1px);
}
html.lg .colensme-sample-admin .colensme-sample-category-order button { min-width: 44px; padding: 0 12px; }

/* 预览卡（选好的图片） */
html.lg .colensme-sample-submit-preview figure {
  padding: 8px;
  background: var(--lg-glass-regular);
  border: 0;
  border-radius: var(--lg-r-l);
  box-shadow: var(--lg-shadow-soft);
}
html.lg :is(.colensme-submit-preview-open, .colensme-sample-submit-preview img) { border-radius: var(--lg-r-m); }
/* ★ 0.9.708：落点用**内嵌环**，和被拖那张的**外环 + 光晕 + 放大**区分开 ——
   两者都用同样的实线外框时，真机上分不清"手里拿的"和"将要放到的位置"（看截图才发现）。
   注意：一开始用的是 `outline: 2px dashed`（想做成虚线），但真机上 outline 计算值仍是 none
   （原因没查清，而同一规则里的 box-shadow 是生效的）—— 所以改用已验证可用的 box-shadow 内嵌环。 */
html.lg .colensme-sample-submit-preview figure:is(.is-selected, .is-drop-target) { box-shadow: inset 0 0 0 2px var(--lg-rose), var(--lg-shadow-float); }
/* ★ 0.9.708：**必须在这里写 is-dragging**。上面 `html.lg .colensme-sample-submit-preview figure`
   的优先级是 (0,2,2)，而插件 CSS 里 `.colensme-sample-submit-preview figure.is-dragging` 只有 (0,2,1)
   —— 于是 `border: 0` 和 `box-shadow` 把主题色边框和光晕全压掉了，
   站长在「提交样片」里拖动时**看不到任何反馈**（只有 is-drop-target 的白边落在别的卡上）。
   管理端（发布样片）没有皮肤覆盖，所以一直是正常的。 */
html.lg .colensme-sample-submit-preview figure.is-dragging {
  z-index: 5;
  opacity: .96;
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--lg-rose), 0 14px 30px rgba(240, 68, 143, .38);
}
/* ★ 0.9.714：关掉**浏览器滚动锚定（scroll anchoring）**。
   拖动时我们用 insertBefore 把卡片在 DOM 里搬来搬去，Chrome 的滚动锚定为了
   "保持可见内容不动"会大幅调整 scrollTop —— 真机实测（拖动时往上移）**一次跳 365px**，
   正是站长反馈的"拖动下面到上面的时候页面滚动瞬移到第一排"。
   关掉后自动滚动完全按设计走（18px/60ms ≈ 300px/s，实测最大跳变降到 19px、平滑）。
   提交区和发布区都在这个 shell 里，所以一条规则覆盖两边。 */
html.lg .colensme-submission-center-shell,
html.lg .colensme-submission-center-shell * { overflow-anchor: none; }
html.lg .colensme-submit-preview-cover { color: var(--lg-ink-2); background: var(--lg-inset-2); border: 0; border-radius: 999px; }
html.lg .colensme-submit-preview-prompt { background: var(--lg-inset); border: 0; border-radius: var(--lg-r-m); }
html.lg .colensme-sample-submit-progress { height: 8px; background: var(--lg-inset-2); }
html.lg .colensme-sample-submit-progress span { background: var(--lg-rose); }
html.lg .colensme-submit-selection-box { background: rgba(120, 120, 128, .14); border-color: var(--lg-ink-3); }

/* ★ 0.9.751：站长要求「提交样片」和「发布样片」两个入口的移除按钮都统一成
   自拍室那颗 ×。自拍室的皮肤在 liquid-glass.css 的
   `html.lg .smgpt-tool .smgpt-remove-image`（中性毛玻璃圆钮 + mask 画的叉号）。
   提交/发布两边都改用**同一条链**（.colensme-submission-center-shell 下的两颗按钮），
   只是壳层不是 .smgpt-tool，所以选择器要另写一遍 —— 声明逐项对齐，观感才一致。
   注意：这两颗按钮原本是「文字 ×」，字号设 0 后必须靠 ::before 的 mask 画叉号
   （同 0.9.725 踩过的坑：只改尺寸不给 mask，currentColor 会显成一个白色实心方块）。 */
/* ★ 0.9.751：**不要在这里写 `outline: 0`**。
   自拍室那颗按钮虽然在自己的 `:is(:hover, :focus-visible)` 里写了 `outline: 0`，
   但真正生效的是本文件更靠后的那条**无障碍聚焦环**：
     `html.lg :is(.smgpt-tool, …) :is(button, …):focus-visible { outline: 2px solid var(--lg-ink-3) }`
   —— 两条优先级都是 (0,4,1)（`:is([role="button"])` 是类级），**同权重下后者胜**
   ⇒ 自拍室实际是「毛玻璃底 + 放大 1.06 + 2px 聚焦环」。
   真机实测（真 Tab 键走到按钮上）：自拍室 outline = 2px solid rgba(34,31,28,.54)。
   我这块规则排在文件更后面，如果写了 `outline: 0` 就会把聚焦环压掉
   （第一版就是这么写的，实测两颗按钮 outline 变成 0px none ⇒ 键盘用户看不到焦点在哪）。
   所以：只做视觉皮肤，**聚焦环交给上面那条通用规则**，和自拍室完全一致。 */
html.lg .colensme-submission-center-shell :is(.colensme-submit-preview-remove, .colensme-sample-upload-remove) {
  position: absolute;
  display: block;
  top: 7px;
  right: 7px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(20, 20, 28, .32);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 0 12px -4px rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  font-size: 0;
  line-height: 0;
  transition: transform .45s var(--lg-spring), background-color .25s var(--lg-ease);
}
html.lg .colensme-submission-center-shell :is(.colensme-submit-preview-remove, .colensme-sample-upload-remove)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ★ 0.9.751：这一条里**同样不能写 `outline: 0`**（理由见上面那段长注释）。
   自拍室那颗在自己的 hover/focus 规则里也写了 `outline: 0`，但它和文件前面那条
   通用聚焦环规则**同权重 (0,4,1)**，而通用规则排在更后面 ⇒ 后者胜，实际是 2px 环。
   我这条排在通用规则**之后**，一旦写 `outline: 0` 就会反超、把环压掉
   （第一版实测：两颗按钮 outline = 0px none，键盘用户完全看不到焦点在哪）。
   所以这里只改底色和缩放，**不碰 outline**。 */
html.lg .colensme-submission-center-shell :is(.colensme-submit-preview-remove, .colensme-sample-upload-remove):is(:hover, :focus-visible) { background: rgba(20, 20, 28, .5); transform: scale(1.06); }
html.lg .colensme-submission-center-shell :is(.colensme-submit-preview-remove, .colensme-sample-upload-remove):active { transform: scale(.92); }
html.lg .colensme-submission-center-shell :is(.colensme-submit-preview-remove, .colensme-sample-upload-remove):disabled { cursor: wait; opacity: .55; }
/* 发布样片的缩略图按钮：和「提交样片」的 .colensme-submit-preview-open 同一观感 */
html.lg .colensme-sample-admin .colensme-sample-upload-thumb .colensme-sample-upload-open { border-radius: var(--lg-r-m); }

@media (max-width: 600px) {
  html.lg .colensme-submission-center-shell { border-radius: 28px; }
  html.lg .colensme-submission-center-header { padding: 16px 16px 14px 20px; }
  html.lg .colensme-submission-center-header h2 { font-size: 20px; }
  html.lg .colensme-submission-center-workspace { grid-template-columns: minmax(0, 1fr); }
  /* 手机：页签变成两列的分段控件（井 + 液滴） */
  html.lg .colensme-submission-center-tabs { gap: 2px; margin: 12px 14px 0; padding: 5px; background: var(--lg-well); border-radius: 26px; box-shadow: var(--lg-well-edge); }
  html.lg .colensme-submission-center-tabs button,
  html.lg .colensme-submission-center-tabs button:is(:hover, :focus-visible, [aria-selected="true"], :active) { min-height: 42px; padding: 0 8px; font-size: 14px; }
  html.lg .colensme-submission-center-content { padding: 16px 16px 20px; }
}

/* ==========================================================================
   性能分级：低端设备不做实时模糊，改用更实的底色（观感仍是“玻璃色”）
   ========================================================================== */
html.lg.lg-solid body { --lg-glass: var(--lg-glass-regular); }
html.lg.lg-solid :is(.colensme-sample-search-control, .colensme-sample-category-strip .colensme-sample-filters, .colensme-sample-category-toggle, .colensme-sample-account-toggle) { background: var(--lg-glass-thick); }
html.lg.lg-solid :is(.colensme-sample-library, .colensme-sample-portal, .smgpt-tool, .smgpt-status-notice) *,
html.lg.lg-solid.lg-lb-closing body .mini-imgbox .imgbox-bg,
html.lg.lg-solid :is(.colensme-sample-work-dialog, .colensme-sample-use-dialog, .colensme-sample-prompt-dialog, .smgpt-gallery-favorite-overlay, .colensme-sample-submit-dialog, .colensme-submission-center-shell),
html.lg.lg-solid:not(.lg-author) body :is(.header, .footer-tabbar),
html.lg.lg-solid body :is(.mini-imgbox .imgbox-bg, .mini-imgbox .imgbox-an > a, .mini-imgbox .counter) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   自拍室分段节奏（站主要求：对称）
   第 1、2、3 步（壁纸模式同样）和本地相册、云端相册都算“一段”：每段上方一条两端渐隐的分割线，
   线上方和线下方的留白完全相等（桌面 48px，手机 32px）。为此把这些段落自带的、会叠加进来的外边距清零，
   步骤标题和下面内容之间的 20px 改由内容自己的上边距承担——第 3 步收起时，
   标题后面直接是本地相册，间距仍然和其他段落一致。
   放在文件末尾、选择器带 [data-smgpt-experience]，才能压过前面通用的步骤标题 / 相册间距规则。
   ========================================================================== */
html.lg .smgpt-tool[data-smgpt-experience] { --lg-section: 48px; }
/* 编号圆圈与标题顶部对齐（原来在多行标题旁垂直居中，会让分割线下方的留白比上方多） */
html.lg .smgpt-tool[data-smgpt-experience] .smgpt-step-heading > :is(span, .smgpt-step-index) { align-self: start; }
html.lg .smgpt-tool[data-smgpt-experience] > :is(.smgpt-face-builder, .smgpt-step-heading.smgpt-workflow-step, .smgpt-local-gallery) {
  margin-top: var(--lg-section);
  margin-bottom: 0;
  padding-top: var(--lg-section);
  border-top: 1px solid transparent;
  /* 与插件原版壁纸步骤之间的分割线同一配色：两侧淡粉、中间中性色，两端渐隐 */
  border-image: linear-gradient(90deg, transparent, rgba(239, 61, 149, .32) 18%, var(--lg-divider) 50%, rgba(239, 61, 149, .32) 82%, transparent) 1;
}
/* 插件用 margin-block-start: 72px / 30px !important 定死了壁纸第 1 步的上边距 */
html.lg .smgpt-tool[data-smgpt-experience="wallpaper"] > .smgpt-wallpaper-step-one.smgpt-step-heading { margin-block-start: var(--lg-section) !important; }
html.lg .smgpt-tool[data-smgpt-experience] > .smgpt-face-builder > .smgpt-step-heading.smgpt-workflow-step,
html.lg .smgpt-tool[data-smgpt-experience] > .smgpt-face-builder > .smgpt-step-heading { margin-top: 0; }
/* 标题和下面内容之间的间距由内容自己承担（标题后面常隔着另一模式的隐藏元素，不能用 + 选择器） */
html.lg .smgpt-tool[data-smgpt-experience] > .smgpt-mode-tabs { margin-top: 20px; margin-bottom: 0; }
html.lg .smgpt-tool[data-smgpt-experience="selfie"] > .smgpt-mode-panel { margin-top: 14px; }
html.lg .smgpt-tool[data-smgpt-experience="wallpaper"] > .smgpt-mode-panel,
html.lg .smgpt-tool[data-smgpt-experience] > .smgpt-generation-panel { margin-top: 20px; }
@media (max-width: 640px) {
  html.lg .smgpt-tool[data-smgpt-experience] { --lg-section: 32px; }
}
/* 第 3 步里“出片设置”面板和它下面出现的“本次成片”、后期处理、组图任务面板之间留同样的 20px
   （大面板统一 margin-top: 0，出片后面板直接贴在上一块下面） */
html.lg .smgpt-tool[data-smgpt-experience] > :is(.smgpt-output, .smgpt-postprocess-switcher, .smgpt-postprocess, .smgpt-gallery-set-task, .smgpt-result) { margin-top: 20px; }

/* ==========================================================================
   触屏设备（html.lg-touch，skin.js 按 pointer: coarse 加）：页面里跟着滚动的控件不做实时模糊。
   这些控件底下垫的是已经虚化好的色场，再模糊一次肉眼几乎看不出，但滚动时每一帧都要在手机 GPU 上重算
   （控件在动、色场是固定的，背后的内容每帧都在变）。顶栏、底栏、弹窗、灯箱（压在清晰照片 / 页面上）保留模糊；
   样片卡上的操作条压在照片上，也保留。
   ========================================================================== */
html.lg.lg-touch :is(.smgpt-tool, .colensme-sample-library) :is(button, a, [role="tab"], [role="radiogroup"], div, span, label, nav):not(.colensme-sample-cover-actions, .colensme-sample-cover-actions *, .colensme-sample-card-author, .colensme-sample-card-author *, .smgpt-gallery-card-actions, .smgpt-gallery-card-actions *) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* iOS Safari 只给“可点击”的元素派发 click：下拉框不接收点击后，点击落在它的父元素上，给父元素标成可点 */
html.lg.lg-jsselect .smgpt-tool :has(> select:not([multiple], :disabled)) { cursor: pointer; }

/* 液滴（容器 ::before）的边缘高光：skin.js 按液滴尺寸烘焙，写在容器的 --lg-tspec 上 */
html.lg [data-lg-thumb]::before {
  border-image-source: var(--lg-tspec);
  border-image-slice: 0 var(--lg-tslice, 0) fill;
  border-image-width: 0 var(--lg-tcap, 0px);
  border-image-outset: 0;
  border-image-repeat: stretch;
}
/* 折射档 / 冰霜档之外（纯色档）不叠高光图，保留一道简单的上沿亮线 */
html.lg.lg-solid body { --lg-drop-shadow: 0 6px 14px -6px rgba(56, 40, 24, .3), 0 0 0 .5px rgba(70, 52, 34, .16), inset 0 1px 0 rgba(255, 255, 255, .9); }
html.lg.lg-solid body.dark-theme { --lg-drop-shadow: 0 6px 18px -6px rgba(0, 0, 0, .65), inset 0 1px .5px rgba(255, 255, 255, .5); }

/* 主按钮还不能点（插件禁用，或 skin.js 判断还缺样片 / 照片 / 授权 → data-lg-wait）：
   换成一口凹下去的浅井 + 灰字，不再是半透明的粉色（看着还像能点）；不扫光、不上浮。
   （扫光那条 ::after 已在上面按 0.9.680 全局关掉，这里不用再单独关一次。） */
html.lg body .smgpt-tool .smgpt-primary:is(:disabled, [data-lg-wait]),
html.lg body .smgpt-tool .smgpt-primary:is(:disabled, [data-lg-wait]):is(:hover, :focus-visible, :active) {
  color: var(--lg-ink-3) !important;
  background: var(--lg-well) !important;
  box-shadow: var(--lg-well-edge) !important;
  filter: none;
  opacity: 1;
  transform: none !important;
  cursor: default;
}
/* “随机灵感 / 一键填写示例”：插件给 1.35 行高，中文字形整体偏上 1.6px；行高收成 1，和其他按钮一致
   （随机灵感的字包在 span 里，一键填写示例是按钮里直接的文字，两处都收） */
html.lg .smgpt-prompt-action,
html.lg .smgpt-prompt-action > span { line-height: 1; }

/* ==========================================================================
   圆形图标里的符号：原来用文字字符（◇ ✦ i ?）当图标，字形位置跟着字体和字号走——
   桌面正好居中，手机 / 平板上偏下 1–3.4px。换成矢量图，绝对定位到圆心，各端一致。
   文字本身留在 DOM 里（读屏 / 插件不受影响），只是不显示。
   ========================================================================== */
html.lg :is(.smgpt-top-resource-mark, .smgpt-support-toggle-icon) { position: relative; font-size: 0 !important; line-height: 0; }
html.lg .smgpt-support-toggle-icon > i { visibility: hidden; }
html.lg :is(.smgpt-top-resource-mark, .smgpt-support-toggle-icon)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: 56%;
  transform: translate(-50%, -50%);
  background: #fff;
  -webkit-mask: var(--lg-glyph) center / contain no-repeat;
  mask: var(--lg-glyph) center / contain no-repeat;
}
html.lg .smgpt-top-resource[data-kind="library"] .smgpt-top-resource-mark { --lg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 20.4 12 12 20.4 3.6 12Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.lg .smgpt-top-resource[data-kind="xiaohongshu"] .smgpt-top-resource-mark { --lg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.7 5 4.5 8.8 9.5 9.5-5 .7-8.8 4.5-9.5 9.5-.7-5-4.5-8.8-9.5-9.5 5-.7 8.8-4.5 9.5-9.5Z'/%3E%3C/svg%3E"); }
html.lg .smgpt-top-resource-mark::before { width: 50%; height: 50%; }
html.lg .smgpt-faq-toggle > .smgpt-support-toggle-icon { --lg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.6' r='2.1'/%3E%3Cpath d='M12 10.2v8.6' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
html.lg .smgpt-support-toggle:not(.smgpt-faq-toggle) > .smgpt-support-toggle-icon { --lg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 8.6a3.7 3.7 0 1 1 5.5 3.2c-1.2.7-1.9 1.4-1.9 2.7v.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19.4' r='1.9'/%3E%3C/svg%3E"); }
/* 样片卡“词”徽标：是汉字不是符号，保留文字；行高定成 1、网格居中，去掉插件的 2px 边框（皮肤已设 0）带来的偏移 */
html.lg .colensme-sample-prompt-badge { display: grid; place-items: center; padding: 0 0 1px; line-height: 1; }
/* ↑ 中文字形在字框里本身略偏下（实测约 1px），底部补 1px 抵消 */

/* ==========================================================================
   按钮下方的说明文字 & 云相册保存条
   ========================================================================== */
/* 分析样片：按钮在上、说明在下 */
html.lg .smgpt-tool .smgpt-actions { flex-direction: column; align-items: stretch; gap: 12px; }
/* 创建面部档案：说明占满整行，排在按钮下面 */
html.lg .smgpt-tool .smgpt-face-builder-form > .smgpt-status { grid-column: 1 / -1; margin-top: -8px; }
/* 点击开拍：桌面按钮靠右，说明排到按钮下方、右对齐；窄屏按钮占满，说明居中 */
html.lg .smgpt-tool .smgpt-generate-actions { flex-wrap: wrap; row-gap: 12px; }
html.lg .smgpt-tool .smgpt-generate-actions > .smgpt-status { order: 10; flex: 1 0 100%; text-align: right; }
@media (max-width: 640px) {
  html.lg .smgpt-tool .smgpt-generate-actions > .smgpt-status { text-align: center; }
}
/* 提示词字数行里的说明：左对齐的小字 */
html.lg .smgpt-tool .smgpt-prompt-meta > .smgpt-status:not(:empty) { font-size: 13px; text-align: left; }

/* 云相册保存条（只在 MJ 一次出多张时出现）：原来是 13px 的小勾选框 + 小按钮，贴着上面的分割线。
   改成和“存到云端 / 下载”同一套玻璃胶囊：左边“全选”胶囊 + 已选张数，右边标准尺寸的保存按钮，和分割线拉开距离 */
html.lg .smgpt-tool .smgpt-cloud-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--lg-line);
}
html.lg .smgpt-tool .smgpt-cloud-save-bar[hidden] { display: none; }
html.lg .smgpt-tool .smgpt-cloud-save-bar > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 0 20px 0 16px;
  color: var(--lg-ink);
  background: var(--lg-glass-btn);
  border-radius: 999px;
  box-shadow: var(--lg-glass-shadow);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}
html.lg .smgpt-tool .smgpt-cloud-save-bar > label:has(input:checked) { background: var(--lg-drop); box-shadow: var(--lg-drop-shadow); }
html.lg .smgpt-tool .smgpt-cloud-save-bar > [data-smgpt-cloud-selection] { color: var(--lg-ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
html.lg .smgpt-tool .smgpt-cloud-save-bar > .smgpt-primary { width: auto; min-height: 46px; margin: 0 0 0 auto; padding: 0 26px; font-size: 15px; }
html.lg .smgpt-tool .smgpt-cloud-save-bar > .smgpt-status { flex: 1 0 100%; text-align: right; }
@media (max-width: 640px) {
  html.lg .smgpt-tool .smgpt-cloud-save-bar { flex-direction: row; align-items: center; }
  html.lg .smgpt-tool .smgpt-cloud-save-bar > .smgpt-primary { flex: 1 0 100%; margin: 0; }
  html.lg .smgpt-tool .smgpt-cloud-save-bar > .smgpt-status { text-align: center; }
}

/* ==========================================================================
   自拍室照片背景（html.lg-photo，由插件头部脚本加；纯色档不用）
   背景图由 skin.js 预先虚化好（见 skin.js 1a），这里只负责铺满：固定在屏幕上、不跟着滚动、没有任何 CSS 滤镜。
   玻璃控件改成很薄的半透明层 + 预烘焙的边缘高光，透出背后照片的明暗和颜色；
   页面里的控件不再做实时模糊（背后本来就是虚化好的照片，再模糊一次看不出来，只会白白耗性能）。
   ========================================================================== */
html.lg.lg-photo .lg-ambient { z-index: -2; }
html.lg.lg-photo body::before,
html.lg.lg-photo body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;          /* 手机地址栏收起 / 展开时背景不跟着缩放 */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--lg-ease);
}
html.lg.lg-photo body::before { background: var(--lg-photo, none) center 30% / cover no-repeat; }
/* 一层纱：日间暖米、夜间深色，保证文字清楚 */
html.lg.lg-photo body::after { background: rgba(238, 232, 224, .52); }
html.lg.lg-photo body.dark-theme::after { background: rgba(16, 16, 22, .64); }
html.lg.lg-photo.lg-photo-on body::before,
html.lg.lg-photo.lg-photo-on body::after { opacity: 1; }

html.lg.lg-photo body {
  --lg-glass-regular: rgba(255, 255, 255, .2);
  --lg-glass: rgba(255, 255, 255, .22);
  --lg-glass-btn: rgba(255, 255, 255, .16);
  --lg-drop: rgba(255, 255, 255, .4);
  --lg-well: rgba(255, 255, 255, .12);
  --lg-well-edge: inset 0 0 0 .5px rgba(255, 255, 255, .42), inset 0 1px 3px rgba(40, 20, 10, .1);
  --lg-float-shadow: 0 14px 34px -22px rgba(40, 20, 10, .45), inset 0 0 0 .5px rgba(255, 255, 255, .45);
  --lg-glass-shadow: 0 10px 24px -16px rgba(40, 20, 10, .45), inset 0 0 0 .5px rgba(255, 255, 255, .5);
  --lg-drop-shadow: 0 8px 18px -10px rgba(40, 20, 10, .4), inset 0 0 0 .5px rgba(255, 255, 255, .6);
}
html.lg.lg-photo body.dark-theme {
  --lg-glass-regular: rgba(20, 20, 28, .24);
  --lg-glass: rgba(20, 20, 28, .3);
  --lg-glass-btn: rgba(255, 255, 255, .08);
  --lg-drop: rgba(255, 255, 255, .16);
  --lg-well: rgba(0, 0, 0, .16);
  --lg-well-edge: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 1px 3px rgba(0, 0, 0, .25);
  --lg-float-shadow: 0 14px 34px -22px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  --lg-glass-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .16);
  --lg-drop-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(255, 255, 255, .22);
}
/* 页面里的控件、面板不做实时模糊；压在清晰照片上的（首屏精选卡、样片预览的 ×、相册卡片上的按钮、照片角标）保留 */
html.lg.lg-photo .smgpt-tool :is(div, section, nav, button, a, span, label, fieldset, [role="tab"], [role="radiogroup"]):not(.lg-hero, .lg-hero *, .smgpt-preview *, .smgpt-gallery-card-actions, .smgpt-gallery-card-actions *, .smgpt-face-profile-badge, .smgpt-cloud-saved-badge),
html.lg.lg-photo .smgpt-tool :is(div, nav, [role="tab"], [role="radiogroup"])::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 胶囊文字按钮的视觉居中：按钮下沿有投影，文字几何居中时看起来偏下；
   实测（站长手机截图 + Chrome）这几类文字中心比中线低 0.4–1px，下边多留 1–2px 往上抵 */
html.lg .smgpt-tool .smgpt-library-toggle { padding-bottom: 2px; }
html.lg .smgpt-tool .smgpt-face-privacy-toggle { padding-bottom: 1px; }
html.lg .smgpt-tool .smgpt-secondary.smgpt-prompt-action { padding-bottom: 2px; }
html.lg .colensme-sample-library :is(.colensme-sample-return, .colensme-sample-submit-open) { padding-bottom: 2px !important; }

/* ==========================================================================
   样片卡聚焦（样片库 / 作者主页样片）
   ========================================================================== */
/* 底部作者浮层的圆角跟着卡片走：手机上卡片是 18px 圆角，浮层原来沿用桌面的 24px，
   两个下角各露出一小块封面 */
@media (max-width: 700px) {
  html.lg .colensme-sample-card .colensme-sample-card-author { border-radius: 0 0 18px 18px; }
}
/* 手机上按下、松开、按钮拿到焦点时卡片原来分别抬起 3 / 5 / 3px，来回跳一下：统一成 3px */
@media (hover: none), (pointer: coarse) {
  html.lg .colensme-sample-card:is(:hover, :active, .is-touch-focused, :focus-within:not([data-lg-idle])) {
    border: 0;
    box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7);
    transform: translateY(-3px);
  }
}
/* 收藏 / 一键使用按钮组：
   - 不做实时模糊：它压在下一张卡片上，模糊层出现的头几帧边缘会闪一圈白；改成接近不透明的玻璃底色，
     观感几乎一样，还省掉每张卡一个模糊层；
   - 出现时只淡入 + 轻微上移，不放大、不回弹（原来的回弹让按钮看起来“移了一下”） */
html.lg .colensme-sample-card .colensme-sample-cover-actions {
  background: rgba(252, 249, 245, .9);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--lg-ease), transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
html.lg body.dark-theme .colensme-sample-card .colensme-sample-cover-actions { background: rgba(38, 36, 42, .9); }
html.lg .colensme-sample-card:is(:hover, :focus-within:not([data-lg-idle]), .is-touch-focused) .colensme-sample-cover-actions {
  opacity: 1;
  transform: none;
  transition: opacity .18s var(--lg-ease), transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
/* 作者胶囊同样不回弹 */
html.lg .colensme-sample-card-author-identity { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

/* ==========================================================================
   样片库流体渐变背景（作者主页不用；自拍室是照片背景）
   纯 CSS 画的几团柔和色块：不下载、不处理图片、不需要缓存，第一帧就有；固定在屏幕上，滑动零开销。
   玻璃控件和自拍室一样调薄，透出背后的颜色。页面判断用 :has()，不等脚本。
   ========================================================================== */
/* 渐变背景把色场层完全盖住：色场不再绘制 */
html.lg:not(.lg-author):not(.lg-photo):has(.colensme-sample-library) .lg-ambient { display: none; }
html.lg:not(.lg-author):not(.lg-photo) body:has(.colensme-sample-library)::before,
html.lg:not(.lg-author):not(.lg-photo) body:has(.colensme-sample-library)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}
html.lg:not(.lg-author):not(.lg-photo) body:has(.colensme-sample-library)::before { background: radial-gradient(38% 34% at 18% 22%, #f7a8c8 0, transparent 70%), radial-gradient(36% 40% at 82% 18%, #ffd3a8 0, transparent 70%), radial-gradient(44% 38% at 70% 70%, #c9b6f2 0, transparent 70%), radial-gradient(40% 36% at 20% 80%, #a8e0d0 0, transparent 70%), linear-gradient(135deg, #f3ebe2, #eee4ef); }
html.lg:not(.lg-author):not(.lg-photo) body.dark-theme:has(.colensme-sample-library)::before { background: radial-gradient(38% 34% at 18% 22%, #6a2a55 0, transparent 70%), radial-gradient(36% 40% at 82% 18%, #6a4630 0, transparent 70%), radial-gradient(44% 38% at 70% 70%, #3e3270 0, transparent 70%), radial-gradient(40% 36% at 20% 80%, #1f5248 0, transparent 70%), linear-gradient(135deg, #16141c, #1c1624); }
html.lg:not(.lg-author):not(.lg-photo) body:has(.colensme-sample-library)::after { background: rgba(255, 255, 255, .12); }
html.lg:not(.lg-author):not(.lg-photo) body.dark-theme:has(.colensme-sample-library)::after { background: rgba(0, 0, 0, .18); }
html.lg:not(.lg-author):not(.lg-photo) body:has(.colensme-sample-library) {
  --lg-glass-regular: rgba(255, 255, 255, .2);
  --lg-glass: rgba(255, 255, 255, .22);
  --lg-glass-btn: rgba(255, 255, 255, .16);
  --lg-drop: rgba(255, 255, 255, .4);
  --lg-well: rgba(255, 255, 255, .12);
  --lg-well-edge: inset 0 0 0 .5px rgba(255, 255, 255, .42), inset 0 1px 3px rgba(40, 20, 10, .1);
  --lg-float-shadow: 0 14px 34px -22px rgba(40, 20, 10, .45), inset 0 0 0 .5px rgba(255, 255, 255, .45);
  --lg-glass-shadow: 0 10px 24px -16px rgba(40, 20, 10, .45), inset 0 0 0 .5px rgba(255, 255, 255, .5);
  --lg-drop-shadow: 0 8px 18px -10px rgba(40, 20, 10, .4), inset 0 0 0 .5px rgba(255, 255, 255, .6);
}
html.lg:not(.lg-author):not(.lg-photo) body.dark-theme:has(.colensme-sample-library) {
  --lg-glass-regular: rgba(20, 20, 28, .24);
  --lg-glass: rgba(20, 20, 28, .3);
  --lg-glass-btn: rgba(255, 255, 255, .08);
  --lg-drop: rgba(255, 255, 255, .16);
  --lg-well: rgba(0, 0, 0, .16);
  --lg-well-edge: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 1px 3px rgba(0, 0, 0, .25);
  --lg-float-shadow: 0 14px 34px -22px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  --lg-glass-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .16);
  --lg-drop-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(255, 255, 255, .22);
}

/* ==========================================================================
   卡片上的按钮组（相册卡 / 样片卡）：底板 + 独立的按钮块
   原来底板和按钮都是半透明玻璃，压在照片上融成一片，按钮之间也分不出来。
   改成：接近不透明的底板（细边 + 更清楚的投影），按钮是比底板更亮（夜间更浅）的小块，靠明暗分开，不加分割线。
   底板不透明，也就不需要实时模糊。
   ========================================================================== */
html.lg body {
  --lg-sheet: rgba(236, 230, 222, .99);
  --lg-sheet-edge: 0 0 0 .5px rgba(70, 52, 34, .2), inset 0 1px 0 rgba(255, 255, 255, .75);
  --lg-sheet-shadow: 0 18px 36px -16px rgba(40, 24, 12, .55);
  --lg-cell: rgba(255, 255, 255, .95);
  --lg-cell-edge: 0 1px 2px rgba(56, 40, 24, .14), 0 0 0 .5px rgba(70, 52, 34, .08);
  --lg-cell-hover: #fff;
}
html.lg body.dark-theme {
  --lg-sheet: rgba(30, 29, 35, .99);
  --lg-sheet-edge: 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
  --lg-sheet-shadow: 0 18px 38px -14px rgba(0, 0, 0, .85);
  --lg-cell: rgba(255, 255, 255, .11);
  --lg-cell-edge: inset 0 0 0 .5px rgba(255, 255, 255, .1);
  --lg-cell-hover: rgba(255, 255, 255, .18);
}
html.lg .smgpt-gallery-card > .smgpt-gallery-card-actions,
html.lg .colensme-sample-card .colensme-sample-cover-actions {
  background: var(--lg-sheet) !important;
  border: 0;
  box-shadow: var(--lg-sheet-shadow), var(--lg-sheet-edge) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.lg .smgpt-gallery-card-actions :is(.smgpt-secondary, .smgpt-gallery-delete),
html.lg .colensme-sample-card .colensme-sample-favorite-cover:not([aria-pressed="true"]) {
  background: var(--lg-cell) !important;
  box-shadow: var(--lg-cell-edge) !important;
}
html.lg .smgpt-gallery-card-actions :is(.smgpt-secondary, .smgpt-gallery-delete):is(:hover, :focus-visible):not(:disabled),
html.lg .colensme-sample-card .colensme-sample-favorite-cover:not([aria-pressed="true"]):is(:hover, :focus-visible) { background: var(--lg-cell-hover) !important; }
html.lg .smgpt-gallery-card-actions .smgpt-secondary[aria-pressed="true"] { background: var(--lg-mint-tint) !important; }
html.lg .smgpt-gallery-card-actions .smgpt-gallery-delete:is(:hover, :focus-visible) { color: #fff !important; background: #d0342c !important; }

/* ==========================================================================
   触屏：按钮组只跟着“当前点的那张卡”
   手机浏览器会把最后点过的元素一直当作“悬停”，焦点也留在点过的按钮上，旧卡片的按钮组因此收不回去。
   触屏上只认插件的触摸状态（样片卡 is-touch-focused、相册卡 data-actions-visible），
   不再认悬停 / 卡内焦点；外接键盘用 Tab 聚焦进去时（:focus-visible）照常显示。
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  html.lg .colensme-sample-card:not(.is-touch-focused):not(:has(:focus-visible)) :is(.colensme-sample-cover-actions, .colensme-sample-card-author),
  html.lg .smgpt-gallery-card:not([data-actions-visible="true"]):not([data-lg-touch]):not(:has(:focus-visible)) > .smgpt-gallery-card-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .12s var(--lg-ease), visibility 0s linear .12s !important;
  }
  html.lg .colensme-sample-card:not(.is-touch-focused):not(:has(:focus-visible)) .colensme-sample-card-author::before { opacity: 0; }
  html.lg .colensme-sample-card:not(.is-touch-focused):not(:active):not(:has(:focus-visible)) {
    transform: none;
    box-shadow: 0 22px 44px -26px rgba(56, 40, 24, .55);
  }
  html.lg body.dark-theme .colensme-sample-card:not(.is-touch-focused):not(:active):not(:has(:focus-visible)) { box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .85); }
  html.lg .colensme-sample-card:not(.is-touch-focused) .colensme-sample-preview img { transform: none; }
  html.lg .smgpt-gallery-card:not([data-actions-visible="true"]):not([data-lg-touch]):not(:has(:focus-visible)) { transform: none; }
  html.lg .smgpt-gallery-card:not([data-actions-visible="true"]):not([data-lg-touch]):not(:has(:focus-visible)) .smgpt-gallery-card-media { box-shadow: 0 20px 40px -26px rgba(56, 40, 24, .6); }
  /* 插件 3.2 秒后收起时，手指还没碰别的卡：照样显示（pointer-events 不加 !important，插件按下时临时写的 none 仍然有效） */
  html.lg .smgpt-gallery-card[data-lg-touch] > .smgpt-gallery-card-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  html.lg .smgpt-gallery-card[data-lg-touch] { transform: translateY(-4px); }
}
html.lg body.dark-theme .smgpt-gallery-card-actions .smgpt-gallery-delete:not(:hover, :focus-visible) { color: #ff7a72 !important; }

/* 照片背景已铺上时，下面那层色场完全被盖住，不再绘制 */
html.lg.lg-photo.lg-photo-on .lg-ambient { display: none; }

/* 0.9.666：五档 / 六档画质一行排完（布局在 frontend.css），手机上收紧字号和内边距，四个字的档位名也放得下 */
@media (max-width: 640px) {
  html.lg .smgpt-segments:is([data-smgpt-count="5"], [data-smgpt-count="6"]) button { padding-left: 2px; padding-right: 2px; font-size: 14px; }
}
@media (max-width: 380px) {
  html.lg .smgpt-segments:is([data-smgpt-count="5"], [data-smgpt-count="6"]) button { font-size: 13px; }
}

/* 0.9.684：出片设置里的“严格还原样片姿势”开关（复用授权开关的玻璃样式）：说明文字减一档，和标题区分开 */
html.lg .smgpt-pose-strict { margin-top: 20px; }
html.lg .smgpt-pose-strict strong { font-weight: 700; }
html.lg .smgpt-pose-strict small { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--lg-ink-2); }

/* 0.9.688：壁纸“自定义灵感”里的参考图上传（复用面部档案多图上传的样式），预览左上角标“图1、图2…” */
html.lg .smgpt-ref-section { display: grid; gap: 14px; margin-top: 20px; }
html.lg .smgpt-ref-section[hidden] { display: none; }
html.lg .smgpt-ref-upload { min-height: 150px; }
html.lg .smgpt-ref-card { position: relative; }
html.lg .smgpt-ref-thumb { position: absolute; inset: 0; z-index: 1; display: block; cursor: zoom-in; }
html.lg .smgpt-ref-thumb:focus-visible { outline: 0; box-shadow: var(--lg-focus-ring); }
html.lg .smgpt-ref-index {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: rgba(16, 16, 22, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  pointer-events: none;
}
html.lg .smgpt-ref-section > .smgpt-status:empty { display: none; }

/* 0.9.691：参考图卡片的移除按钮（样片预览同款玻璃圆钮），排在点开大图触发层上面 */
/* ★ 0.9.693：按钮尺寸跟着卡片走。窄屏（360/320）上参考图卡片只有约 95/81px 宽，
   固定的 38px 按钮会盖住卡片正中心 —— 既拖不动（中心按下落在按钮上），也容易误删。
   改成 min(38px, 40%)：小卡片上自动缩小，但始终不小于 24px 的可点范围。 */
html.lg .smgpt-ref-card .smgpt-ref-remove {
  top: min(10px, 5%);
  right: min(10px, 5%);
  width: min(38px, 32%);
  height: min(38px, 32%);
  min-width: 24px;
  min-height: 24px;
  z-index: 3;
}
/* ★ 0.9.725：站长反馈"移动端的移除照片按钮的胶囊里还套了一层"——
   截图里每个 × 按钮里有个**白色实心方块**。
   根因：叉号是靠 `.smgpt-tool .smgpt-remove-image::before` 的
   `background: currentColor` + `-webkit-mask: url(内联 SVG 叉号)` 画出来的；
   而下面这条"小按钮里叉号缩一档"的规则**只覆盖了 width/height/margin，没有一起给 mask**。
   参考图卡片的按钮在 lg 下命中的是更靠后的这条，于是 mask 丢了 ⇒ currentColor 的白块直接显出来。
   这里**把 mask 一起补上**（并且把选择器写成和上面同一条链，保证同优先级下后者生效）。 */
html.lg .smgpt-tool .smgpt-ref-card .smgpt-ref-remove::before {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 0.9.692：参考图可以拖着换顺序（鼠标直接拖，手机按住 0.25 秒再拖） */
/* 0.9.693：被拖的那张改成“主题色边框 + 临时放大”，松手立刻消失（原来只是缩小变淡，交互感不明显） */
html.lg .smgpt-ref-card {
  cursor: grab;
  transition: transform .16s var(--lg-ease), box-shadow .16s var(--lg-ease), opacity .16s var(--lg-ease);
  /* ★ 0.9.723：参考图排序改成"跟手移位"式（桌面 + 移动同一套指针拖拽）。
     卡片上必须 touch-action:none —— 否则触屏从卡片起手会被浏览器判成滚动手势、拖不动。
     拖动期间压住文字选中与光标（原来走原生 HTML5 拖拽，这两件事是浏览器管的）。
     注意 `translate` 不在 transition 列表里 ⇒ 跟手是即时的（只有放大有 .16s 动效）。 */
  touch-action: none;
}
html.lg .smgpt-ref-card.is-dragging,
html.lg .smgpt-ref-card.is-dragging * { user-select: none; -webkit-user-select: none; }
html.lg body.smgpt-ref-dragging,
html.lg body.smgpt-ref-dragging * { cursor: grabbing !important; user-select: none !important; }
html.lg .smgpt-ref-card.is-dragging {
  cursor: grabbing;
  z-index: 5;
  opacity: .96;
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--lg-rose), 0 12px 26px rgba(240, 68, 143, .32);
  /* ★ 0.9.723：跟手移位是靠独立 `translate` 属性，提前提示浏览器把它放到合成层，
     拖动时就不必每帧重绘卡片本身（自拍室玻璃层多，真机实测中位帧 16.5ms、有 10 帧超 33ms）。 */
  will-change: transform, translate;
}
html.lg .smgpt-ref-card.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--lg-rose), 0 6px 18px rgba(240, 68, 143, .22);
}
html.lg .smgpt-ref-card.is-drop-target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: var(--lg-rose-tint);
  pointer-events: none;
}
/* 手机上按住拖拽时不要弹出“存储图片 / 在新标签打开”这类系统菜单 */
/* ★ 0.9.702：缩略图完整显示（原来共用 4:3 + cover 会裁掉竖图），留深色黑边 */
html.lg .smgpt-ref-card img { object-fit: contain; background: rgba(12, 14, 18, .82); -webkit-touch-callout: none; user-select: none; }
html.lg .smgpt-ref-thumb { touch-action: pan-y; }

/* ★ 0.9.780：壁纸「爆款复刻」多张样片的卡片排 —— 就放在左列那一格（.smgpt-preview）**里面**。
   1 张时这一块不显示、还是原来那张大预览；2 张及以上才顶上来。
   **张数不写死**：auto-fill 网格，张数变多自动换行 / 缩小（后台上限可到 16）。 */
html.lg .smgpt-rev-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
html.lg .smgpt-rev-cards[hidden] { display: none !important; }

/* ★ 0.9.803 随机灵感 v2：**待选区**（占住提示词输入框的位置） */
/* ★ 0.9.821 站长 10-14 的三点：①外层那圈"盒子"没必要 ⇒ 去掉底色/内边距/圆角；
   ②卡片太大（原来 2 列、一张 546x765，"一半就够"，本来就支持点开看大图）⇒ 改成更小的多列；
   ③「移除全部」原来在最右边、容易被忽略 ⇒ 挪到卡片下面那行（见 .smgpt-ri-foot）。 */
html.lg .smgpt-ri-picker {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0 0 12px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
html.lg .smgpt-ri-picker[hidden] { display: none !important; }
html.lg .smgpt-ri-head { display: flex; align-items: center; gap: 12px; }
/* 卡片下面那行：提示文案在左、「移除全部」在右 */
html.lg .smgpt-ri-foot { display: flex; align-items: center; gap: 12px; }
html.lg .smgpt-ri-foot .smgpt-ri-hint { flex: 1 1 auto; min-width: 0; }
/* ⚠️ 按钮从标题行挪到这一行之后，必须**再**声明一次 width:auto ——
   基础皮肤那条 `.smgpt-primary,.smgpt-secondary{width:100%}` 是按类名生效的，
   原来那条 width:auto 是写在 `.smgpt-ri-head .smgpt-ri-clear` 上的，管不到这里
   （实测：手机上「移除全部」被撑成整行 366x52）。 */
html.lg .smgpt-ri-foot .smgpt-ri-clear { flex: none; width: auto; }
/* ★ 0.9.824 卡片行 + 右侧「本次出图」信息面板（站长选的方案：拿它填掉右边那片空）
   手机上改成上下堆叠（见 ≤600px 那条）。 */
/* ★ 0.9.825 站长 10-14："现在空白的还是比较多"。原来卡片撑满整行、面板被顶到最右端，
   中间空一大片（他截图圈了两块）。改成：**卡片行贴着内容宽**（两张卡就宽 454，一张就 222），
   面板紧挨着它、并**拉成与卡片同高**（原来面板只有 154 高，右边下面还空一块）。
   剩下的空白归还给页面背景，不再像版式里挖了个洞。
   `width: max-content` + `auto-fit`：列数跟着**实际卡片数**走，空轨道收掉 ⇒ 1 张时也不会留空槽。 */
/* ★ 0.9.836 信息面板整个去掉（站长：「有没有都无所谓，包括换一批」）——
   卡片直接放回待选区里，列数跟着容器宽度走（不再有 .smgpt-ri-main 那层三栏）。 */
/* ★ 0.9.807 各端实测：手机上标题行会被挤爆 —— 标题是 flex 子项、被压到 min-content
   （实测 430/390/360 行高 90px、图片位只剩 42~65px 宽 ⇒ 一字一行），
   「移除全部」又被某条全局规则撑到 172px（430）。
   改：标题不许折行、按钮不许伸缩、整行允许换行（放不下就把按钮挪到第二行）。 */
html.lg .smgpt-ri-head { flex-wrap: wrap; }
html.lg .smgpt-ri-head .smgpt-ri-title { flex: 0 1 auto; white-space: nowrap; }
html.lg .smgpt-ri-head .smgpt-ri-clear { flex: none; }
/* 类别为空时（现在的抽样可能跨类别，服务端不再回类别名）别占一个 12px 的 gap */
html.lg .smgpt-ri-head .smgpt-ri-term:empty { display: none; }
html.lg .smgpt-ri-head .smgpt-ri-title { color: var(--lg-ink); font-size: 15px; font-weight: 650; }
/* 「人像专用」小标：站长 10-14 定 —— 随机灵感只出人像，前台得讲明白 */
html.lg .smgpt-ri-head .smgpt-ri-badge {
  flex: none;
  padding: 2px 8px;
  color: var(--lg-rose, #f0448f);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  background: rgba(240, 68, 143, .12);
  border-radius: 999px;
}
html.lg .smgpt-ri-head .smgpt-ri-term { color: var(--lg-ink-3); font-size: 13px; }
/* ⚠️ 皮肤里有一条全局 `min-height: 52px`（见 README 0.9.592~），
   卡片里这三个小按钮必须**显式压小**，否则会比卡片还高。
   ★ 0.9.807：皮肤里还有一条 `.smgpt-primary, .smgpt-secondary { width: 100% }` ——
   所有 `smgpt-secondary` 按钮默认**整行宽**。这三个小按钮也是 `smgpt-secondary`，
   于是被撑成"占满剩余宽度再互相挤"：手机实测「移除全部」172px（文字才 52px），
   卡片上的按钮被挤到 32px、两个字竖着排。必须显式 `width: auto` 收回内容宽。
   （定位办法：CDP 的 `CSS.getMatchedStylesForNode` 直接问渲染器，比在 JS 里读
   `document.styleSheets` 靠谱 —— 跨域样式表读不到 cssRules。） */
html.lg .smgpt-tool .smgpt-ri-head .smgpt-ri-clear,
html.lg .smgpt-tool .smgpt-ri-card .smgpt-ri-btn {
  width: auto;
  min-height: 30px;
  padding: 0 12px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
}
/* ★ 0.9.823 站长 10-14：按钮"和卡片底部等宽"、"大点，现在太小了，视力不好都看不清、还容易误触"。
   原来每颗只有 44x30、右边留一大片空 ⇒ 改成**等宽三等分**撑满整行，字号 13。
   ★ 0.9.848 站长："这三个按钮高度能不能稍微高点，现在太扁了" ⇒ 最小高度 **36 → 44**。
   ⚠️ 高度**必须在这里改**：这条选择器 `html.lg .smgpt-tool .smgpt-ri-card .smgpt-ri-btn` 的
   优先级高于 frontend.css 里那条基础规则，只在那边改成 44 是没用的（本地实测仍量到 36 —— 踩过）。 */
html.lg .smgpt-tool .smgpt-ri-card .smgpt-ri-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin-left: 0;
  padding: 0 6px;
  font-size: 13px;
}
html.lg .smgpt-ri-cards {
  display: grid;
  /* ⚠️ 必须 `!important`：这个容器同时挂着参考图那套的 `smgpt-ref-previews` 类，
     基础皮肤里那条 2 列的网格规则在真实页面上会盖过这里（实测：本规则写 auto-fill 却仍是 2 列）。
     站长 10-14：卡片太大，"一半就够" ⇒ 190px 起、装多少列随宽度（桌面约 5 列，一张 ~208px）。 */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 10px;
}
html.lg .smgpt-ri-cards[hidden] { display: none !important; }
html.lg .smgpt-ri-card { display: grid; gap: 8px; }
/* ★ 0.9.804：**待选区的卡不能用"固定比例 + overflow:hidden"那套** ——
   那是给参考图卡用的，实测会把图片下面那排按钮整排裁掉（按钮在 DOM 里、就是看不见）。
   改成：图片自己撑高度，按钮排在它下面。 */
html.lg .smgpt-ri-card {
  aspect-ratio: auto !important;
  overflow: visible;
  /* ★ 0.9.823 站长："卡片这不是还在半透明盒子里呢吗" —— 基础皮肤给了卡片
     `border:1px solid rgba(255,255,255,.09)` + `border-radius:7px`（实测：背景本来就是透明的），
     卡片角上就是一个突兀的圆角描边，图2 那个角就是它。要的就是"图片 + 下面一排按钮"，不给卡画框。 */
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.lg .smgpt-ri-card > img {
  display: block;
  width: 100%;
  height: auto;
  /* ★ 0.9.823 固定 2:3（前台不再按样片覆盖这个变量）—— 站长实测"移除一张后卡片比例会跳变"，
     根因是之前"跟随锁定那张/第一张"。样片比例不一致时留黑边（站长已确认可接受）。 */
  aspect-ratio: var(--smgpt-ri-ratio, 2 / 3);
  object-fit: contain;
  background: rgba(12, 14, 18, .82);
  border-radius: 18px;
}
html.lg .smgpt-ri-card .smgpt-ref-thumb { border-radius: 18px; }
/* ★ 0.9.805：卡片是网格，内容比格子矮时按钮会被 `stretch` 拉成长条（实测 44x106）⇒ 顶到上边、按自身高度 */
html.lg .smgpt-ri-card { align-content: start; align-items: start; }
html.lg .smgpt-ri-card .smgpt-ri-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  align-self: start;
  gap: 6px;
}
/* 抽到图时输入框虽然禁用了，但**要看得出来**（否则用户以为还能写、也不知道出图用不用他写的字） */
html.lg .smgpt-direct-prompt:disabled {
  opacity: .45;
  cursor: not-allowed;
}
/* ★ 0.9.817：`disabled` 只挡输入、**不挡滚动** —— 框里字多时滚轮还能滚它；手机上手指落在上面
   会把页面滚动"吃掉"（站长实测反馈，移动端尤其难受）。待选区接管时断掉滚动，并让触摸穿透给页面。 */
html.lg .smgpt-tool .smgpt-direct-prompt.smgpt-ri-prompt-locked {
  overflow: hidden;
  resize: none;
  pointer-events: none;
}
/* 参考图区置灰：皮肤里有些规则优先级更高，这里加 !important 才压得住 */
html.lg .smgpt-ref-section.smgpt-ri-ref-locked {
  opacity: .4 !important;
  filter: grayscale(.5);
  pointer-events: none !important;
}
html.lg .smgpt-ri-card .smgpt-ri-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--lg-rose);
  box-shadow: 0 6px 16px rgba(240, 68, 143, .3);
}
html.lg .smgpt-ri-hint { margin: 0; }
/* 抽到图时参考图上传区禁用（视觉上也要看得出来，别让人以为还能点） */
html.lg .smgpt-ref-section.smgpt-ri-ref-locked { opacity: .45; pointer-events: none; }
/* ★ 0.9.790：手机上固定**两列**（和「我要原创」参考图那套一致）。多端实测发现：
   `minmax(140px, 1fr)` 在 390/360/320 这几种宽度下容器只有 278/248/208px，
   正好放不下两列（2×140=280）⇒ 掉成 1 列、每张卡占满整行（390 时一张 278x371，
   两张吃掉 751px 竖高，手机上要滚很久）。 */
@media (max-width: 600px) {
  html.lg .smgpt-rev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* ★ 0.9.821 手机上待选区也固定两列（190px 起在 390 宽下只会掉成 1 列、一张占满整行） */
  html.lg .smgpt-ri-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  /* 窄卡上三个按钮挤不下 ⇒ 压小字号/内边距；万一还挤就让它换行，别溢出 */
  /* 手机上卡片只有 ~160px，三等分后每颗约 49px：字号保 13、高度保 36（看得清、好点）；
     极窄（≤380）才降到 12，否则两个字会挤。 */
  html.lg .smgpt-tool .smgpt-ri-card .smgpt-ri-btn { padding: 0 4px; font-size: 13px; }
  /* 卡片下面那行放不下就换行，按钮别挤成一条；换行后靠右，看起来才像个控件而不是接着文案 */
  html.lg .smgpt-ri-foot { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  html.lg .smgpt-tool .smgpt-ri-card .smgpt-ri-btn { font-size: 12px; }
}
/* ★ 0.9.784：卡片**里面**的图不要圆角（站长 2026-10-13）。角统一由卡片自己收（7px），
   免得图片自带一个更大的圆角、被卡片裁得看着像"角被切了一刀"。 */
html.lg .smgpt-rev-cards .smgpt-ref-card img,
html.lg .smgpt-rev-cards .smgpt-ref-card .smgpt-ref-thumb { border-radius: 0; }
/* 统一用类名收起来：皮肤里 `.smgpt-remove-image{display:block}` 这类规则会盖掉 [hidden] */
html.lg .smgpt-tool .is-rev-hidden { display: none !important; }
/* 卡片排顶上来时，那一格不再是大预览的"井"：高度跟着卡片走，四周留内边距 */
html.lg :is([data-smgpt-mode-panel="reverse"], [data-smgpt-mj-field]) > .smgpt-preview[data-smgpt-rev-multi="1"] {
  display: block;
  padding: 14px;
  min-height: 0;
}
/* 「再加一张」：和右上角那个 × 同一种中性玻璃圆钮，摆在它**左边**。
   ★ 0.9.788 试过改成上下叠放，站长 2026-10-13 又改回横排了，只要**间距再宽 3px**
   （原来 8px → 现在 11px：right = 12(× 的右边距) + 38(× 的宽) + 11(间距) = 61）。 */
html.lg .smgpt-tool .smgpt-rev-add {
  position: absolute;
  display: block;
  padding: 0;
  line-height: 0;
  top: 12px;
  right: 61px;
  width: 38px;
  height: 38px;
  color: #fff;
  background: rgba(20, 20, 28, .32);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 0 12px -4px rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  font-size: 0;
  cursor: pointer;
  z-index: 3;
}
html.lg .smgpt-tool .smgpt-rev-add::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.lg .smgpt-tool .smgpt-rev-add:is(:hover, :focus-visible) { background: rgba(20, 20, 28, .5); outline: 0; transform: scale(1.06); }
html.lg .smgpt-tool .smgpt-rev-add:active { transform: scale(.92); }
/* 块状（卡片排末尾那块）：回到网格里，尺寸跟着卡片走 */
html.lg .smgpt-tool .smgpt-rev-add.is-tile {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: var(--smgpt-ref-display-ratio, 4 / 3);
  color: var(--lg-ink-3);
  background: var(--lg-well);
  border-radius: 18px;
  box-shadow: var(--lg-well-edge);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.lg .smgpt-tool .smgpt-rev-add.is-tile:is(:hover, :focus-visible) { background: var(--lg-inset-2); transform: none; }
html.lg .smgpt-tool .smgpt-rev-add.is-tile::before { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* 0.9.691：上传了参考图时 Midjourney 不可选——按钮置灰，原因写在下面 */
html.lg .smgpt-engine-option[aria-disabled="true"],
html.lg .smgpt-engine-option[aria-disabled="true"]:hover {
  opacity: .38;
  filter: grayscale(1);
  cursor: not-allowed;
  background: var(--lg-well);
  box-shadow: var(--lg-well-edge);
  transform: none;
}
html.lg .smgpt-engine-note {
  margin: 10px 2px 0;
  padding-left: 22px;
  position: relative;
  color: var(--lg-ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
html.lg .smgpt-engine-note::before {
  content: "!";
  position: absolute;
  left: 2px;
  top: .2em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e8a33a;
  color: #1a1408;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
html.lg .smgpt-engine-note.is-flash { animation: lg-engine-note-flash .9s ease; }
@keyframes lg-engine-note-flash {
  0%, 100% { color: var(--lg-ink-2); }
  25%, 65% { color: #e8a33a; }
}


/* ★ 0.9.838 站长 10-14：①**卡片不能吞掉触摸滚动** —— 待选区的卡复用了参考图那套类，
   而它带着 `touch-action: none`（那是给拖拽排序用的），手机上从卡片起手就滚不动页面。
   ②使用随机灵感时把提示词框/参考图区整块收起（不然用户还得往下滑）。
   ③「随机范围」入口：抽到样片后才露出来，一排分类胶囊、选中态用主题色。 */
html.lg .smgpt-ri-card { touch-action: pan-y !important; }
html.lg .smgpt-ri-hide { display: none !important; }
/* ★ 0.9.838/844 「随机范围」：占满整行的下拉（原生 select），形态复用站内「原创度选择」
   （`label.smgpt-scheme-field` + `select` + `.smgpt-scheme-description` 的 lg 皮肤在文件上半部分已有）。
   0.9.839 那套自绘的 trigger/menu 整套拆掉（站长：太丑、要全宽的点击下拉）。 */
html.lg .smgpt-ri-scope-field { margin: 14px 0 0; }
html.lg .smgpt-ri-scope-field[hidden] { display: none !important; }
/* 站内那几处 scheme-field 的 select 是 56 高，随机灵感这里不用那么高 —— 但它仍是全宽、照样玻璃质感 */
html.lg .smgpt-ri-scope-field select { min-height: 50px; }

/* ★ 0.9.847 待选区三栏 **卡 ｜ 说明块 ｜ 卡**（说明块由前台插在两张卡之间）。
   列宽写在这里而不是 JS 里：三栏网格铺满整行 ⇒ 左右自然与「原创灵感 / 清空当前灵感」贴齐，
   四条缝（含面板内边距那两条）实测都是 28px。⚠️ 选择器要多一级 `html.lg .smgpt-tool`
   —— 皮肤里那条 `html.lg .smgpt-ri-cards{repeat(2,…)}` 也是 !important，同级会被它压回去。 */
html.lg .smgpt-tool .smgpt-ri-cards {
  grid-template-columns: minmax(0, 460px) minmax(230px, 300px) minmax(0, 460px) !important;
  gap: 28px;
  justify-content: space-between;
}
html.lg .smgpt-ri-guide {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 22px;
  color: var(--lg-ink-2);
  text-align: center;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 18px;
}
html.lg .smgpt-ri-guide[hidden] { display: none !important; }
html.lg .smgpt-ri-guide-title { display: block; margin-bottom: 12px; color: var(--lg-ink); font-size: 16px; font-weight: 700; }
html.lg .smgpt-ri-guide-list { margin: 0; padding: 0; list-style: none; }
html.lg .smgpt-ri-guide-list li { margin: 9px 0; font-size: 16px; line-height: 1.6; }
/* ★ 0.9.882 说明块"第 5 条"：弱化 + 细分隔线（站长 10-14 挑的 C 方案）—— */
/*   它性质是"声明/免责"而不是"怎么用"，单独渲染在列表外面（前台用 <p class="smgpt-ri-guide-note">）。 */

/* ★ 0.9.883 「使用面部档案」开关（待选区里那一行：勾选框 + 名字 + 说明）—— 复用 .smgpt-scheme-field 的外形，只把里面那行做成"勾选框 + 文字"。 */
.smgpt-ri-face-wrap[hidden] { display: none !important; }
.smgpt-ri-face-wrap .smgpt-ri-face-switch { margin-top: 0; }
.smgpt-ri-face-wrap .smgpt-scheme-description { display: block; margin-top: 8px; }

html.lg .smgpt-ri-guide-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--lg-line); font-size: 13px; line-height: 1.55; color: rgba(243, 243, 247, .58); }

@media (max-width: 900px) {
  html.lg .smgpt-tool .smgpt-ri-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  html.lg .smgpt-ri-guide { order: 9; grid-column: 1 / -1; align-self: auto; margin-top: 8px; }
}

/* ★ 0.9.849 那一行（徽章 + 标题 / 或普通状态下的说明句 + 右侧按钮）：
   字号统一 16px 与按钮文字一致、同一行垂直居中。
   ⚠️ 深色皮肤里 `html.lg .smgpt-ri-head .smgpt-ri-title`(15px) 与 `.smgpt-ri-badge`(11px)
   那两条优先级更高，所以这几条必须也写在 lg 里（写在基础皮肤里没用）。 */
html.lg .smgpt-prompt-heading { justify-content: flex-start; }
html.lg .smgpt-prompt-heading .smgpt-prompt-tools { margin-left: auto; }
html.lg .smgpt-prompt-heading .smgpt-prompt-note-inline { margin: 0; font-size: 16px; font-weight: 600; }
html.lg .smgpt-prompt-heading .smgpt-prompt-label[hidden] { display: none !important; }
html.lg .smgpt-ri-head[hidden] { display: none !important; }
html.lg .smgpt-ri-head .smgpt-ri-title { font-size: 16px; font-weight: 700; }
html.lg .smgpt-ri-head .smgpt-ri-badge { padding: 5px 12px; font-size: 16px; border-radius: 999px; }

/* ★ 0.9.850 头行上下留白相等（两个值都 16，见 frontend.css 里同名注释）。
   ⚠️ 面板那条必须写在这里：`html.lg :is(…, .smgpt-mode-panel, …){padding:28px}` 优先级 (0,2,1)，
   只改基础皮肤那条 `.smgpt-mode-panel` 没用（这个坑这个功能里踩过三次了）。 */
html.lg .smgpt-tool [data-smgpt-mode-panel="direct"] { padding-top: 16px; }
html.lg .smgpt-tool .smgpt-prompt-heading { margin-bottom: 16px; }
/* ★ 0.9.851 待选区激活那一档：24/24（深色皮肤里面板内边距那条优先级更高，所以必须写这里） */
html.lg .smgpt-tool [data-smgpt-mode-panel="direct"].smgpt-ri-active { padding-top: 24px; }
html.lg .smgpt-tool .smgpt-ri-active .smgpt-prompt-heading { margin-bottom: 24px; }
/* ⚠️ 样片容器自带的 margin-top:10px 会和头行下边距叠加 ⇒ 视觉上下面比上面多 10px（站长看出来了）。归零。 */
html.lg .smgpt-tool .smgpt-ri-cards { margin-top: 0; }