/* =========================================================================

 * 365Lab 背景图生�?- 主样�? * 现代 · 创意 · 玻璃拟�?· 响应�? * ========================================================================= */



:root {

  --bg: #0b0f1a;

  --bg-soft: #121829;

  --bg-card: rgba(255, 255, 255, 0.04);

  --bg-card-hover: rgba(255, 255, 255, 0.07);

  --border: rgba(255, 255, 255, 0.10);

  --border-strong: rgba(255, 255, 255, 0.18);

  --text: #eef1f7;

  --text-soft: #a9b2c7;

  --text-dim: #949cb0;

  /* --brand 当文字/描边用（深色主题下 #7c5cff 对 #0b0f1a 只有 4.40:1，差 0.1）

     --brand-solid 当填充底色配白字用（白字压 #7c5cff 只有 4.35:1）

     两者混用必然有一边不达标，故拆成两个令牌。 */

  --brand: #8f74ff;

  --brand-solid: #6d45f5;

  --brand-2: #22d3ee;

  --brand-3: #ff5c8a;

  --accent-grad: linear-gradient(135deg, #7c5cff 0%, #22d3ee 55%, #ff5c8a 120%);

  /* 渐变按「上面有没有文字」拆成三条，原来三者共用 --accent-grad：

       白字压在青色段只有 1.81:1（按钮「随机生成」几乎读不出来）

       浅色主题下渐变文字的青色段只有 1.69:1（logo 有一半是隐形的）

     --accent-grad        纯装饰：描边、小色块、渐变边框。要鲜艳，不承载文字

     --accent-grad-solid  上面要压白字：按钮 / 标签 / 序号，深到白字 ≥4.5:1

     --brand-text-grad    background-clip:text 的渐变文字，随主题反转明暗

     实测（白字）：#6d45f5 5.50 / #0e7490 5.36 / #d81b60 4.95 —— 全部过 AA */

  --accent-grad-solid: linear-gradient(135deg, #6d45f5 0%, #0e7490 55%, #d81b60 120%);

  --brand-text-grad: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #67e8f9 100%);

  --accent-grad-2: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);

  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);

  --radius: 18px;

  --radius-sm: 12px;

  --radius-lg: 28px;

  --maxw: 1320px;

  --accent: var(--brand);

  --card: var(--bg-card);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* 大标题渐变文字：深色主题用白系，浅色主题必须换深色系，否则白字落白底不可读 */

  --title-grad: linear-gradient(135deg, #ffffff 30%, #c9b9ff);

  /* 弹层遮罩：浅色主题用浅 scrim，深色主题用深 scrim */

  --mask: rgba(5, 8, 16, 0.6);

}



[data-theme="light"] {

  --bg: #f6f7fb;

  --bg-soft: #ffffff;

  --bg-card: rgba(20, 24, 41, 0.03);

  --bg-card-hover: rgba(20, 24, 41, 0.06);

  --border: rgba(20, 24, 41, 0.12);

  --border-strong: rgba(20, 24, 41, 0.18);

  --text: #171b2b;

  --text-soft: #4a5268;

  --text-dim: #5f6779;

  --shadow: 0 10px 40px rgba(20, 24, 41, 0.10);

  --shadow-lg: 0 24px 70px rgba(20, 24, 41, 0.15);

  --title-grad: linear-gradient(135deg, #171b2b 25%, #6d4fd8 85%);

  /* 浅色主题：渐变文字必须换成深色调，沿用 --accent-grad 的话青色段只有 1.69:1 */

  --brand-text-grad: linear-gradient(135deg, #171b2b 0%, #5f3ae0 50%, #0e7490 100%);

  /* 浅色主题下 --brand 当链接/强调文字用，#7c5cff 对 #f6f7fb 只有 4.06:1 */

  --brand: #6d4fd8;

  /* --brand-2 在浅色主题被大量用作正文/链接色（页脚邮箱、返回首页、参数值）。

     #22d3ee 落在 #f6f7fb 上只有 1.69:1，实测读不清；#0e7490 是 5.00:1。

     深色主题下 #22d3ee 对 #0b0f1a 有 10.59:1，无需改动。 */

  --brand-2: #0e7490;

  --mask: rgba(20, 24, 41, 0.35);

}



* { box-sizing: border-box; margin: 0; padding: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

[id] { scroll-margin-top: 84px; }



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



body {

  font-family: var(--font);

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  min-height: 100vh;

  overflow-x: hidden;

  transition: background .4s ease, color .4s ease;

  -webkit-font-smoothing: antialiased;

}



/* 背景装饰光斑 */

body::before,

body::after {

  content: "";

  position: fixed;

  z-index: 0;

  border-radius: 50%;

  filter: blur(90px);

  opacity: .5;

  pointer-events: none;

}

body::before {

  width: 55vw; height: 55vw;

  top: -18vw; right: -12vw;

  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.55), transparent 65%);

}

body::after {

  width: 45vw; height: 45vw;

  bottom: -12vw; left: -10vw;

  background: radial-gradient(circle at 60% 60%, rgba(34,211,238,.4), transparent 65%);

}

[data-theme="light"] body::before { opacity: .35; }

[data-theme="light"] body::after { opacity: .3; }



a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }



.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* 编辑器页：全屏宽度三栏 */

.container-wide { max-width: 1920px; }



/* ---------------- 头部导航 ---------------- */

.site-header {

  position: -webkit-sticky; position: sticky; top: 0; z-index: 100;

  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);

  background: color-mix(in srgb, var(--bg) 72%, transparent);

  border-bottom: 1px solid var(--border);

}

/* height 改 min-height：固定 height 会在内容意外变高时把文字裁掉，

   min-height 只会长不会裁。正常字号下高度仍是 66px，布局零变化。

   （试过再加 .nav-links{flex-wrap:wrap} 解决 200% 字号下的页头溢出，

   但那样 .nav-links 的 min-content 变小、会被 .nav 压窄，

   结果 721~800px 正常字号下就折成两行、页头涨到 78px —— 得不偿失，已撤回。

   页头在 200% 文字下仍会横向溢出，见文件末尾的已知限制说明。） */

.nav {

  display: flex; align-items: center; justify-content: space-between;

  min-height: 66px; gap: 14px;

}

/* 编辑器页（generator.html）顶部导航全屏款：不限制 max-width，左右留呼吸 */

.nav-full { max-width: none; padding: 0 24px; }

/* min-width:0 让品牌区可压缩（flex/grid 子项默认 min-width:auto = min-content，压不动）；

   两行文字都单行 + 省略号，避免副标题折行把 .brand-stack 撑到 80px 溢出 66px 的页头。

   实测：英文副标题 "Free Online Background Generator" 自然宽 191px，

   在 1024px 下预算只剩 ~189px，会被折成 4 行（stack 高 83px / 页头 66px）。 */

.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.16rem; letter-spacing: .2px; min-width: 0; }

.brand .logo {

  width: 38px; height: 38px; border-radius: 11px;

  background: var(--accent-grad);

  display: grid; place-items: center;

  box-shadow: 0 6px 18px rgba(124,92,255,.45);

  flex: none;

}

.brand .logo svg { width: 22px; height: 22px; }

.brand-name { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* logo 旁两行文字：主标题 + 副标题 */

.brand-stack { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; min-width: 0; }

.brand-sub { font-size: .72rem; color: var(--text-soft); font-weight: 500; letter-spacing: .3px; background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .78; }

.brand-name, .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



/* R170 页头导航间距 6→14px：用户反馈顶部元素贴在一起 */

.nav-links { display: flex; align-items: center; gap: 14px; }

.nav-links a {

  padding: 8px 14px; border-radius: 10px; color: var(--text-soft);

  font-size: .94rem; font-weight: 500; transition: .2s;

}

.nav-links a:hover { color: var(--text); background: var(--bg-card-hover); }

/* 顶部菜单链接靠右贴 actions（brand 仍左对齐） */

.nav .nav-links { margin-left: auto; }



.nav-actions { display: flex; align-items: center; gap: 8px; }

/* width 用 min-width：语言按钮里是文字（EN / 中），字号放大到 200% 时

   40px 装不下会被裁掉 9px（WCAG 1.4.4）。图标按钮内容小、仍保持 40px 不变。 */

.icon-btn {

  min-width: 40px; height: 40px; padding: 0 9px; border-radius: 11px;

  border: 1px solid var(--border); background: var(--bg-card);

  color: var(--text); cursor: pointer; display: grid; place-items: center;

  transition: .2s; font-size: .9rem; font-weight: 700;

}

.icon-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-1px); }

.icon-btn svg { width: 19px; height: 19px; }



/* 详情页页头的「返回生成器」。此前这个类完全没有规则：实测计算样式与裸 <a> 13/13 相同

   （零内边距、零底色、非 flex），而图标 svg 因为没有尺寸约束被撑到 80x80

   （同页其它图标 19x19），整块高度到 113px。285 个详情页全部命中。

   这里对齐 .icon-btn 的视觉语言，但宽度自适应（图标 + 文字）。 */

.back-link {

  height: 40px; padding: 0 14px; border-radius: 11px;

  border: 1px solid var(--border); background: var(--bg-card);

  color: var(--text); display: inline-flex; align-items: center; gap: 7px;

  font-size: .9rem; font-weight: 600; text-decoration: none;

  white-space: nowrap; transition: .2s;

}

.back-link:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-1px); }

.back-link svg { width: 19px; height: 19px; flex: none; }

.back-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,92,255,.5); }



/* 详情页「返回生成器」在中等宽度下挤爆页头（实测 Chromium，body 有 overflow-x:hidden

   所以溢出部分是被**裁掉**的，scrollX 恒为 0，用户根本滚不到）：

   .back-link 带文字时宽 128px(ZH)/187px(EN)，而 EN 详情页页头自然需要 ~1005px——

     EN：421px 裁 69px / 721px 裁 193px / 768px 裁 146px / 860px 裁 54px

         / 900px 裁 14px / 901px 裁 104px / 1000px 裁 5px；1024px 才刚好放下。

   于是 ≤1010px 只留箭头图标，文字转 visually-hidden（可访问名不丢）。

   配合上面 .brand/.brand-stack 的 min-width:0，20 个宽度 × 中英 × 4 个页面 = 160 例全部通过。 */

@media (max-width: 1010px) {

  .back-link { position: relative; width: 40px; padding: 0; justify-content: center; }

  .back-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; }

}



/* ≤420px 的页头挤压（实测 320px 视口，Chromium）：

   1) 品牌区：320px 下给品牌区的预算只有 122px，而副标题自然宽 ZH 118px / EN 191px，

      会被折成 4 行把 .brand-stack 撑到 76px(ZH 62px)，超出 66px 的页头溢出显示。

      窄屏直接隐藏副标题（装饰性标语，正文/标题里另有完整表述），stack 高度 76→35px。

      注意驱动者是副标题不是主名，缩主名字号只能省 3px。

   2) 编辑器页的页头是 .nav-full（padding 0 24px，不是 .container.nav），

      同样要收到 16px，否则 EN 下右侧操作区仍会顶出视口 27px。 */

@media (max-width: 420px) {

  .container.nav { padding-left: 16px; padding-right: 16px; }

  .nav-full { padding-left: 16px; padding-right: 16px; }

  .brand-name { font-size: .95rem; }

  .brand-sub { display: none; }

}



.menu-toggle { display: none; }



/* ---------------- Hero ---------------- */

.hero { padding: 74px 0 44px; text-align: center; position: relative; }

.hero::before {

  content: ""; position: absolute; left: 50%; top: -40px; transform: translateX(-50%);

  /* 固定 420px 在 375px 视口下居中会左右各溢出 ~24px（body overflow-x:hidden 裁切）。

     改用 min() 让桌面保持 420px、窄屏自适应不溢出 */

  /* 除以 1.06 是给下面 heroGlow 呼吸动画留的余量：放大到 1.06 倍时仍不超出 100%，

     否则窄屏下这圈光晕会把 scrollWidth 顶大 ~10px（320px 视口实测，随动画在 0~10px 间摆动）。 */

  width: min(420px, calc(100% / 1.06)); height: 220px; border-radius: 50%;

  background: radial-gradient(circle, rgba(124,92,255,.28), transparent 70%);

  filter: blur(40px); pointer-events: none; z-index: -1;

}

.hero h1 {

  font-size: clamp(2rem, 5.4vw, 3.5rem);

  font-weight: 850; line-height: 1.12; letter-spacing: -0.5px;

  margin-bottom: 20px;

}

.hero h1 .grad { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.hero p.subtitle {

  font-size: clamp(1rem, 2.2vw, 1.22rem);

  color: var(--text-soft); max-width: 720px; margin: 0 auto 30px;

}

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }

.badge {

  display: inline-flex; align-items: center; gap: 7px;

  padding: 7px 15px; border-radius: 999px;

  background: var(--bg-card); border: 1px solid var(--border);

  font-size: .84rem; color: var(--text-soft); font-weight: 500;

}

.badge svg { width: 15px; height: 15px; color: var(--brand-2); }



.btn-primary {

  display: inline-flex; align-items: center; gap: 9px;

  padding: 14px 30px; border-radius: 14px; border: none; cursor: pointer;

  background: var(--accent-grad-solid); color: #fff; font-size: 1.02rem; font-weight: 700;

  box-shadow: 0 12px 34px rgba(124,92,255,.45);

  transition: transform .2s, box-shadow .2s;

  font-family: var(--font);

}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(124,92,255,.55); }

.btn-primary svg { width: 20px; height: 20px; }



/* 英雄区实时预览拼图：两行 5 列对齐，卡片摆正不倾斜 */

.hero-showcase {

  margin: 40px auto 0; display: grid; gap: 12px;

  grid-template-columns: repeat(5, 1fr);

  max-width: 1180px;

}

.hero-showcase .show-link {

  display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);

  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;

  border: 1px solid var(--border); opacity: .96;

}

.hero-showcase .show-link:hover { transform: translateY(-8px) scale(1.03); box-shadow: var(--shadow-lg); opacity: 1; z-index: 2; }

.hero-showcase .show-card { width: 100%; height: auto; display: block; }

.hero-showcase .show-link { animation: floatY 6s ease-in-out infinite; }

.hero-showcase .show-link:hover { animation-play-state: paused; }

.hero-showcase .show-link:nth-child(2n) { animation-delay: 1.1s; }

.hero-showcase .show-link:nth-child(3n) { animation-delay: 2.2s; }

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 920px) { .hero-showcase { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 560px) { .hero-showcase { grid-template-columns: repeat(2, 1fr); } }

.search-box {

  display: flex; align-items: center; gap: 10px; padding: 0 14px;

  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft);

}

.search-box svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }

.search-box input { flex: 1; border: none; background: transparent; outline: none; padding: 12px 0; color: var(--text); font-size: .95rem; font-family: var(--font); }

/* 列表页搜索栏：285 个生成器只靠分类翻页太难找。

   搜索框与分类栏同一行右对齐计数，窄屏时堆叠。 */

.gens-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.gens-search {

  position: relative; display: flex; align-items: center; gap: 9px; flex: 1 1 260px; min-width: 0;

  padding: 0 12px; border-radius: 999px;

  border: 1px solid var(--border); background: var(--bg-card);

  transition: border-color .2s, box-shadow .2s;

}

.gens-search:focus-within { border-color: var(--border-strong); }

/* 故意不再给搜索框加 box-shadow 描边：R44 加的那圈 3px 紫色光晕在视觉上太抢，

   用户的截图反馈是"圆角外框像控件套了个壳"，跟整页风格也不统一。

   浏览器对 input[type=search] 自带的聚焦轮廓仍然存在，无障碍可达性没丢。 */

.gens-search svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }

.gens-search input {

  flex: 1; min-width: 0; border: none; background: transparent; outline: none;

  padding: 11px 0; color: var(--text); font-size: .95rem; font-family: var(--font);

}

/* 清掉 WebKit 给 input[type=search] 自带的装饰和原生清除按钮，只留我们自己那个 */

.gens-search input::-webkit-search-decoration,

.gens-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.gens-search-x {

  /* 32px：26px 虽然够 WCAG 2.5.8 的 24px 下限，但手指点起来偏小，

     站内图标按钮普遍是 40px，这里取折中，窄屏也不会把输入框挤没。 */

  flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;

  background: var(--bg-soft); color: var(--text-soft); font-size: .8rem; line-height: 1;

  display: grid; place-items: center; transition: .2s;

}

.gens-search-x:hover { background: var(--bg-card-hover); color: var(--text); }

.gens-search-x[hidden] { display: none; }

.gens-count { font-size: .84rem; color: var(--text-dim); font-weight: 600; white-space: nowrap; }

.gens-count[hidden] { display: none; }

/* 搜索无结果：给图标 + 解释 + 一键恢复，别只丢一行灰字 */

.gens-empty {

  text-align: center; padding: 52px 20px 56px; margin: 8px 0 4px;

  border: 1px dashed var(--border-strong); border-radius: var(--radius);

  background: var(--bg-card);

}

.gens-empty[hidden] { display: none; }

.gens-empty > svg { width: 44px; height: 44px; color: var(--text-dim); opacity: .7; margin-bottom: 12px; }

.gens-empty-t { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }

.gens-empty-h { font-size: .88rem; color: var(--text-dim); margin: 0 0 18px; }

@media (max-width: 560px) {

  .gens-toolbar { gap: 8px; }

  .gens-count { width: 100%; }

}



.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cat-chip {

  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 600;

  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-soft); font-family: var(--font); transition: .2s;

}

.cat-chip:hover { border-color: var(--border-strong); color: var(--text); }

.cat-chip.active { background: var(--accent-grad-solid); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(124,92,255,.4); }

.tool-empty { color: var(--text-dim); text-align: center; padding: 40px 0; grid-column: 1 / -1; }



/* ---------------- 生成器网�?---------------- */

.section { padding: 48px 0; }

.section-head { text-align: center; margin-bottom: 38px; }

@media (max-width: 720px) {

}

.section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; margin-bottom: 10px; letter-spacing: -0.3px; }

.section-head p { color: var(--text-soft); max-width: 620px; margin: 0 auto; }

.more-link { color: var(--brand); font-weight: 600; transition: color .18s; white-space: nowrap; }

.more-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }



.gen-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));

  gap: 20px;

}

.gen-card { animation: cardIn .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.gen-card:nth-child(2n) { animation-delay: .04s; }

.gen-card:nth-child(3n) { animation-delay: .08s; }

.gen-card {

  position: relative; overflow: hidden;

  border-radius: var(--radius);

  border: 1px solid var(--border);

  background: var(--bg-card);

  cursor: pointer; transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;

  display: flex; flex-direction: column;

  text-align: left;

}

.gen-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }

.gen-card .gen-thumb { height: 140px; position: relative; overflow: hidden; }

.gen-thumb { position: relative; overflow: hidden; }

.gen-thumb canvas { transition: transform .3s; }

.gen-card:hover .gen-thumb canvas { transform: scale(1.07); }

.gen-cat {

  position: absolute; left: 12px; bottom: 12px; z-index: 2;

  padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700;

  color: #fff; background: rgba(11,15,26,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,.18); letter-spacing: .3px;

}

.gen-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); opacity: 0; transition: .3s; pointer-events: none; }

.gen-card:hover .gen-thumb::after { opacity: 1; }

.gen-card-body { padding: 16px 18px 18px; }

.gen-card-body h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }

.gen-card-body p { font-size: .87rem; color: var(--text-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.gen-card .go {

  position: absolute; top: 12px; right: 12px;

  width: 32px; height: 32px; border-radius: 9px;

  background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);

  display: grid; place-items: center; color: #fff;

  opacity: 0; transform: translateY(-4px); transition: .25s;

}

.gen-card:hover .go { opacity: 1; transform: translateY(0); }

.gen-card .go svg { width: 17px; height: 17px; }



/* ---------------- 特性区 ---------------- */

.features-grid {

  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;

}

@media (max-width: 720px) {

  .features-grid { grid-template-columns: 1fr; }

}

.feature {

  padding: 26px 24px; border-radius: var(--radius);

  background: var(--bg-card); border: 1px solid var(--border);

  transition: .25s;

  display: grid;

  grid-template-columns: auto 1fr;

  column-gap: 14px;

  row-gap: 12px;

  align-items: center;

}

.feature .ficon { grid-column: 1; grid-row: 1; }

.feature h3 { grid-column: 2; grid-row: 1; margin: 0; }

.feature p { grid-column: 1 / -1; grid-row: 2; margin: 0; }

.feature:hover { background: var(--bg-card-hover); transform: translateY(-3px); }

.feature { position: relative; }

.feature::before {

  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;

  background: var(--accent-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor; mask-composite: exclude;

  opacity: 0; transition: opacity .25s; pointer-events: none;

}

.feature:hover::before { opacity: .9; }

.feature .ficon {

  width: 50px; height: 50px; border-radius: 13px; margin-bottom: 0;

  display: grid; place-items: center; background: var(--accent-grad);

  box-shadow: 0 8px 22px rgba(124,92,255,.35);

}

.feature .ficon svg { width: 25px; height: 25px; color: #fff; }

.feature h3 { font-size: 1.14rem; font-weight: 700; }

.feature p { color: var(--text-soft); font-size: .93rem; line-height: 1.6; }

.feature p { color: var(--text-soft); font-size: .93rem; }



/* ---------------- FAQ ---------------- */

.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); overflow: hidden; }

.faq-q {

  width: 100%; text-align: left; padding: 18px 22px; cursor: pointer;

  background: transparent; border: none; color: var(--text);

  font-size: 1.02rem; font-weight: 600; font-family: var(--font);

  display: flex; align-items: center; justify-content: space-between; gap: 12px;

}

.faq-q .chev { flex: none; transition: transform .3s; color: var(--brand-2); }

.faq-item.open .faq-q .chev { transform: rotate(180deg); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }

.faq-a-inner { padding: 0 22px 18px; color: var(--text-soft); font-size: .95rem; }



/* ---------------- 关于 ---------------- */

.about-box {

  max-width: 820px; margin: 0 auto; text-align: left;

  padding: 38px 32px; border-radius: var(--radius-lg);

  background: var(--bg-card); border: 1px solid var(--border);

}

.about-box h2 { font-size: 1.7rem; margin-bottom: 16px; }

.about-box p { color: var(--text-soft); font-size: 1.02rem; }



/* ---------------- 页脚 ---------------- */

.scroll-top {

  position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 46px; height: 46px;

  border-radius: 13px; border: 1px solid var(--border); background: var(--bg-soft);

  color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow);

  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: .3s;

}

.scroll-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.scroll-top:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-3px); }

.scroll-top svg { width: 20px; height: 20px; }

.site-footer {

  margin-top: 24px; padding: 56px 0 30px; position: relative;

  background:

    radial-gradient(ellipse 800px 300px at 50% 0%, rgba(124,92,255,.08), transparent 70%),

    linear-gradient(180deg, transparent, var(--bg-soft) 60%);

}

.footer-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; margin-bottom: 14px; }

.footer-brand .brand-name { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.footer-about {

  color: var(--text-dim); font-size: .92rem; line-height: 1.7; max-width: 520px;

}

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }

.footer-col h2, .footer-col h4 {

  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;

  color: var(--text); margin-bottom: 18px; padding-left: 12px; position: relative;

}

.footer-col h2::before, .footer-col h4::before {

  content: ""; position: absolute; left: 0; top: 4px;

  width: 4px; height: 14px; background: var(--accent-grad); border-radius: 2px;

}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.footer-col a {

  display: inline-flex; align-items: center; gap: 6px;

  color: var(--text-soft); font-size: .94rem;

  transition: color .2s, transform .2s, padding-left .2s;

}

.footer-col a:hover { color: var(--brand); transform: translateX(3px); }

.footer-col a::before {

  content: "›"; font-size: 1rem; opacity: 0; color: var(--brand);

  transition: opacity .2s, margin-right .2s; margin-right: -10px;

}

.footer-col a:hover::before { opacity: 1; margin-right: 0; }

.footer-email {

  color: var(--brand-2) !important; font-weight: 600;

  transition: color .2s, transform .2s;

}

.footer-bottom {

  padding-top: 22px; border-top: 1px solid var(--border);

  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;

  color: var(--text-dim); font-size: .86rem;

}



/* 编辑器页（generator.html）：底部精简 —— 一行版权，去掉大半径渐变与上方留白 */

body.editor-page .site-footer {

  margin-top: 14px; padding: 14px 0 18px;

  background: var(--bg-soft);

  border-top: 1px solid var(--border);

}

body.editor-page .site-footer::before { display: none; }

body.editor-page .footer-bottom { padding-top: 0; border-top: 0; font-size: .82rem; }



/* ---------------- Toast（主题化卡片，不再黑底） ---------------- */

.toast {

  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);

  display: flex; align-items: center; gap: 9px;

  background: var(--bg-soft); color: var(--text); padding: 12px 22px 12px 16px; border-radius: 12px;

  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);

  font-size: .93rem; font-weight: 500; opacity: 0; pointer-events: none;

  transition: .3s; z-index: 2000;

}

.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(124, 92, 255, .55); flex: none; }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }



/* ========================================================================

 * 生成器详情页 (generator.html)

 * ======================================================================== */

.editor {

  display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px;

  grid-template-areas: "gal mid rp";

  gap: 20px; align-items: start;

  padding-bottom: 20px;

}

.gen-gallery { grid-area: gal; }

.preview-wrap { grid-area: mid; }

/* R157 两栏限高 + 各自内部滚动条：左图库、右面板内容超过视口高度时

   在栏内滚动（栏头标题/搜索/tabs 固定），不再把整页撑到一万多像素。

   保持非 sticky：页面若有滚动（如页脚），所有模块仍整体一起动。 */

.right-col { grid-area: rp; display: flex; flex-direction: column; gap: 0; position: relative; max-height: calc(100vh - 88px); overflow: hidden; }

/* flex-wrap:wrap：文字放大到 200% 时「参数 / 样式 / 导出」三个 tab 一行放不下，

   会把右侧面板撑出 90px（.right-col 是 overflow:hidden，等于被裁掉）。 */

.panel-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); flex: none; }

.ptab { flex: 1 1 0; padding: 9px 6px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-soft); cursor: pointer; font-weight: 600; font-size: .86rem; font-family: var(--font); transition: .18s; }

.ptab:hover { color: var(--text); background: var(--bg-card-hover); }

.ptab.active { background: var(--accent-grad-solid); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(124,92,255,.35); }

.panel-panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }

/* R158 撤 scrollbar-width/scrollbar-color：Chromium 121+ 只要读到标准属性

   就会顶掉下面的 ::-webkit-scrollbar 细样式，回退成带上下大箭头的经典滚动条

   （见文件末 @supports 处的注释）。细样式统一只走 ::-webkit-scrollbar。 */

.panel-panes::-webkit-scrollbar { width: 8px; }

.panel-panes::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.panel-panes .panel { display: none; position: static; max-height: none; overflow: visible; animation: panelIn .35s cubic-bezier(.2,.7,.3,1) both; }

.panel-panes .panel.active { display: block; }

@media (max-width: 1620px) { .editor { grid-template-columns: 280px minmax(0, 1fr) 280px; } }

@media (max-width: 1400px) { .editor { grid-template-columns: 260px minmax(0, 1fr) 260px; } }

/* 中屏：左侧图库占满高，右侧上方画布、下方参数/样式/导出并排 */

@media (max-width: 1180px) {

  .editor { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "gal mid" "gal rp"; }

  .right-col { position: static; max-height: none; overflow: visible; }

  .panel-tabs { margin-bottom: 10px; }

  .panel-panes { max-height: none; overflow: visible; }

  .panel-panes .panel { display: none; }

  .panel-panes .panel.active { display: block; }

}

.panel {

  background: var(--bg-card); border: 1px solid var(--border);

  border-radius: var(--radius); padding: 20px; position: -webkit-sticky; position: sticky; top: 82px;

}

.panel h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }

.panel h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.panel { animation: panelIn .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.panel h2 svg { width: 18px; height: 18px; color: var(--brand-2); }



.ctrl { margin-bottom: 18px; }

.ctrl label { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }

.ctrl label .val { color: var(--brand-2); font-variant-numeric: tabular-nums; font-weight: 700; }

/* 滑块行：「文字 / 滑块 / 数值」排一行。

   .ctrl-row 由 editor.js 加在含 input[type=range] 的行容器上——参数面板是 .ctrl，

   样式面板「滤镜微调」是 .ctrl-sub，叠加层不透明度是 .overlay-item 里的 .ov-op-row，

   三类都要排一行，所以这里写成通用类而不是 .ctrl.ctrl-row。

   刻意不用 :has()，免得老版 Firefox（<121）直接退回两行。 */

.ctrl-row { display: flex; align-items: center; gap: 10px; }

.ctrl-row > label { margin-bottom: 0; flex: 0 0 auto; }

.ctrl-row > input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto; }

/* R91 数值输入框统一规范（R90 + 用户「要箭头可用」补回）：

   通用 select/input 规则是 width:100% + padding 10px 12px + radius 10px，

   放进「文字 / 滑块 / 数值」一行会把滑块挤没，看着也像一整个大输入框。

   这里改成「刚好放得下最长取值 + 原生上下箭头」的窄框：

     滑块值 4 位（含负号 5 字符）→ 5ch   ｜ 宽高 4 位（3840）→ 6ch

     随机种子 6 位（999999）    → 7ch   ｜ 色码 #RRGGBB 7 字符 → 7.5ch

   用 content-box + ch：宽度跟着字号自适应，padding 与边框另算，

   不会被 width:100% 撑开；右内边距 18px 预留给箭头（箭头画在 padding 里、不挤数字）；

   不再写 -moz-appearance:textfield —— Firefox 也保留原生步进钮；边框常显提示"可直接输入"。 */

/* R160 直接子 → 后代：R109 把输入包进 .num-stepper 后 > 选择器全部失配，

   这些框一直按通用样式（100% 宽、42px 高）渲染，设计的紧凑样式从未生效 */

.ctrl-row .val,

.frame-row .val,

.collage-row .collage-num {

  box-sizing: content-box;

  flex: 0 0 auto; width: 5ch; min-width: 0; max-width: none;

  padding: 3px 18px 3px 6px; margin: 0;

  font: inherit; font-size: .88rem; line-height: 1.35;

  font-variant-numeric: tabular-nums; font-weight: 700;

  color: var(--brand-2); text-align: right;

  border: 1.5px solid var(--border); border-radius: 6px;

  background: var(--bg-card); outline: none;

  transition: border-color .15s, background .15s, box-shadow .15s;

}

.ctrl-row .val:hover,

.frame-row .val:hover,

.collage-row .collage-num:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }

.ctrl-row .val:focus,

.frame-row .val:focus,

.collage-row .collage-num:focus {

  border-color: var(--brand-2); background: var(--bg-card-hover);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 25%, transparent);

}

/* 随机种子 0-999999：6 位比普通滑块值宽两档（实测 7ch 在加粗等宽字体下差 7px，8ch 富余） */

.ctrl-row .val.seed-num { width: 8ch; }

/* 宽高 #cw / #ch：最多 4 位（1920 / 3840），比滑块值宽一档 */

#cw, #ch {

  box-sizing: content-box;

  flex: 0 0 auto; width: 6ch; min-width: 0; max-width: none;

  padding: 4px 18px 4px 6px; margin: 0;

  font: inherit; font-size: .9rem; line-height: 1.35;

  font-variant-numeric: tabular-nums; font-weight: 700;

  color: var(--brand-2); text-align: right;

  border: 1.5px solid var(--border); border-radius: 6px;

  background: var(--bg-card); outline: none;

  align-self: center;

  transition: border-color .15s, background .15s, box-shadow .15s;

}

#cw:hover, #ch:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }

#cw:focus, #ch:focus {

  border-color: var(--brand-2); background: var(--bg-card-hover);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 25%, transparent);

}

/* R91 把 R90 藏掉的箭头找回来：用户要 ▲▼ 能直接点，且 step 由 input 属性决定。

   inner-spin-button：箭头画在 padding 内（不改变输入框总宽）；

   外层箭头 inner-spin-button 不够时再叠 outer-spin-button 兜底。 */

/* R113 修角度框的双箭头 + 输入框变宽两个问题：

   1) R111 改了 .bg-angle .bg-angle-val 的直接子选择器 → 后代选择器，

      但下面这一坨"藏原生 spin"用的还是 .bg-angle > .bg-angle-val 直接子选择器——R109 wrap 后不再匹配，

      角度框的原生 spin 跑出来变成双箭头。改成 descendant 选择器。

   2) 收窄 padding-right（18→16）+ 角度 width（4ch→3.5ch）+ 减少 min-width，

      既然原生 spin 已藏，不需要给它留位。 */

/* R160 原来按选择器分组隐藏，尺寸下拉的 W/H 框（无类名）漏网露出原生大箭头。

   R162 收敛为全局：enhanceSteppers 已给所有 number 输入配了自定义小▲▼，

   原生 spin 一律隐藏（webkit 伪元素；Firefox 不认，行为不变）。 */

input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

  /* R109 用自定义 3 按钮（.num-stepper）后，原生 spin 应该全藏。

     多重保险：appearance:none + display:none + opacity:0 + width:0 + pointer-events:none。

     浏览器对伪元素的 display:none 支持不一致，必须叠加才能保证彻底藏。 */

  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;

  display: none !important;

  opacity: 0 !important;

  width: 0 !important; height: 0 !important; margin: 0 !important;

  pointer-events: none !important;

}

/* hover / focus 把不透明度推到 1、底色推深，让箭头明显 */

.ctrl-row > .val:hover::-webkit-inner-spin-button,

.frame-row > .val:hover::-webkit-inner-spin-button,

.collage-row .collage-num:hover::-webkit-inner-spin-button,

.bg-angle > .bg-angle-val:hover::-webkit-inner-spin-button,

#cw:hover::-webkit-inner-spin-button, #ch:hover::-webkit-inner-spin-button,

.ctrl-row > .val:focus::-webkit-inner-spin-button,

.frame-row > .val:focus::-webkit-inner-spin-button,

.collage-row .collage-num:focus::-webkit-inner-spin-button,

.bg-angle > .bg-angle-val:focus::-webkit-inner-spin-button,

#cw:focus::-webkit-inner-spin-button, #ch:focus::-webkit-inner-spin-button {

  opacity: 1;

  background: var(--bg-card-hover);

}

/* R113 上面的 :hover/:focus spin 规则也已失效（原生 spin 已彻底藏住），

   但保留不影响——属于"无效但无害"的代码，留着方便回滚 R113 时能立即生效。

   它们也用 .bg-angle > .bg-angle-val 直接子选择器——已经无效了但无害。

   真正生效的 spin 隐藏规则在上面（R113 重写），已用 descendant 选择器覆盖所有 .val。 */

.val-unit { flex: 0 0 auto; color: var(--brand-2); font-variant-numeric: tabular-nums; font-weight: 700; font-size: .88rem; margin-left: -2px; }



/* R109 自定义 ▲▼ 箭头按钮：绝对定位在 number 输入框右侧，100% 可见跨浏览器。

     R113 收窄 padding-right：原生 spin 已彻底藏住，不需要再给它留位。 */

input[type="number"].has-stepper { padding-right: 18px; }

.num-stepper { position: relative; flex: 0 0 auto; min-width: 0; }

.num-stepper > input[type="number"].has-stepper { -webkit-appearance: none; -moz-appearance: textfield; }

/* R115 用户反馈 ▲▼ 永久占位太丑——改成 focus / hover 时滑出，

     默认隐藏。动画用 width + opacity 平滑过渡（0.15s）。

     hover 也触发是因为鼠标可能从 input 移到按钮上但还没 focus；focus-within 是更稳的触发。

     R116 补：默认 visibility:hidden —— 否则 width:0 但 display:flex 仍占 tab 顺序，

     Tab 键会穿过不可见的按钮到下一个控件，体验很怪。

     transition 把 visibility 延迟到动画结束再切换（默认延迟 .15s，focus 时 0s 立即可见）。 */

.num-step-btns {

  position: absolute; right: 1px; top: 1px; bottom: 1px;

  /* R164 恢复 R115/116 原版行为（用户明确要求：默认不显示箭头，鼠标移入才显示）。

     R142 的常显版本把右对齐的数字盖在不透明按钮底下了（"连数字都看不到"）。

     默认 width:0 + visibility:hidden；.num-stepper:hover / :focus-within 滑出，

     同时 input 的 padding-right 由 6px 展开到 26px 给按钮让位（数字左移不被盖）。 */

  width: 0; display: flex; flex-direction: column;

  opacity: 0; overflow: hidden;

  visibility: hidden;

  pointer-events: none;

  transition: width .15s, opacity .15s, visibility 0s .15s;

}

.num-stepper:hover .num-step-btns,

.num-stepper:focus-within .num-step-btns {

  width: 18px; opacity: 1; visibility: visible; pointer-events: auto;

  transition: width .15s, opacity .15s, visibility 0s;

}

.num-stepper:hover input[type="number"].has-stepper {

  padding-right: 26px;

}

.num-step-btn {

  flex: 1 1 0; min-height: 0;

  border: 0; background: var(--bg-soft); cursor: pointer;

  font-size: 9px; line-height: 1; color: var(--text-soft);

  display: grid; place-items: center; padding: 0;

  transition: background .15s, color .15s;

}

.num-step-btn.num-up { border-radius: 0 7px 0 0; border-bottom: 1px solid var(--border); }

.num-step-btn.num-down { border-radius: 0 0 7px 0; }

.num-step-btn:hover { background: var(--brand); color: #fff; }

.num-step-btn:active { transform: scale(.92); }

/* R115 input 在没 focus 时不要预留按钮空间——padding-right 改成 6px 跟普通 input 一致；

   focus 时通过 outline 不需要额外空间。 */

input[type="number"].has-stepper { padding-right: 6px; }

input[type="number"].has-stepper:focus { padding-right: 26px; }

/* R90 图库空状态：窄侧栏里的大卡片会挤，做成轻量虚线提示块 */

.gallery-empty {

  text-align: center; padding: 26px 16px 22px; margin-top: 10px;

  border: 1px dashed var(--border-strong); border-radius: 12px;

  background: var(--bg-card);

}

.gallery-empty[hidden] { display: none; }

.gallery-empty-icon {

  width: 44px; height: 44px; margin: 0 auto 12px;

  display: flex; align-items: center; justify-content: center;

  border-radius: 50%; background: var(--bg-soft); color: var(--brand-2);

}

.gallery-empty-icon svg { width: 22px; height: 22px; }

.gallery-empty-title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }

.gallery-empty-desc { font-size: .84rem; line-height: 1.6; color: var(--text-soft); margin: 0; }

.gallery-empty-cta {

  margin-top: 14px; padding: 7px 14px; font-size: .84rem; font-weight: 600;

  font-family: var(--font); color: var(--text); cursor: pointer;

  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card-hover);

  transition: border-color .15s, color .15s;

}

.gallery-empty-cta:hover { border-color: var(--brand-2); color: var(--brand-2); }

.gallery-empty-cta[hidden] { display: none; }

.gallery-empty-tip {

  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);

  font-size: .78rem; line-height: 1.5; color: var(--text-dim);

}

.gallery-empty-tip[hidden] { display: none; }

/* 内置预设尺寸：下拉式 + 分类（默认展开、可折叠）+ 用户收藏

   需求：国内外常用尺寸都收进来，按类目分，方便查找；分类头点击可折叠；

   每项右侧星标点一下加入/移出收藏（localStorage 持久化）。 */

/* R94 画布底色：纯色 / 渐变模式切换 + 渐变两端色 + 4 个方向按钮 */

.bg-mode { margin-bottom: 8px; }

.bg-grad-chips { display: flex; gap: 8px; margin-bottom: 8px; }

.bg-grad-chips .color-chip { flex: 1 1 0; min-width: 0; height: 40px; }

/* R99 渐变角度：滑条 + 实时角度显示（替换原来的 4 个固定方向按钮）

   R107 在前面补一个「角度」标签，后面数字从 span 改成可编辑 number 输入框，

   用户可以直接键入 0–360 任意角度（Enter / blur 生效），保留与滑条的双向同步。 */

.bg-angle { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }

.bg-angle-label { flex: 0 0 auto; font-size: .88rem; font-weight: 600; color: var(--text-soft); }

/* R111 flex-basis: 0 强制滑条吃满剩余空间（之前 auto 时浏览器按 content size 算，

   slider 内容只有 55px，flex 没能继续扩展——典型 flex-basis:auto 配合 min-width:0 的坑）。 */

.bg-angle-input { flex: 1 1 0; min-width: 0; }

/* R111 改用 descendant 选择器（不带 >）：

   R109 把 val 包进 .num-stepper 后，.bg-angle-val 是孙元素，

   `.bg-angle > .bg-angle-val` 直接子选择器**根本不再匹配**——所以之前的 width:4ch / padding / box-sizing 全没生效。 */

.bg-angle .bg-angle-val {

  /* R113 进一步收窄：3.5ch + min-width:36px，配合 padding-right:18px，

     与 .ctrl-row .val(5.5ch 默认) 视觉上协调，不再"角度框特别宽"。 */

  flex: 0 0 auto; min-width: 36px; width: 3.5ch; text-align: right;

  padding: 4px 18px 4px 6px; box-sizing: content-box;

  border: 1px solid var(--border); border-radius: 8px;

  background: var(--bg-card); color: var(--text); font: inherit;

  font-variant-numeric: tabular-nums; font-weight: 600;

}

.bg-angle .bg-angle-val:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }

.bg-angle-input { flex: 1 1 0; min-width: 0; }

.size-dd { position: relative; margin-bottom: 8px; }

/* R92 按钮行：下拉按钮 + 收藏星并排（HTML 不允许 button 套 button，所以星标是兄弟元素） */

/* R95 配色 tab 里的精选配色：现在独占一个 tab，去掉 <details> 折叠，整页铺开 */

#panel-palette .palette-accordion > details { display: block; }

#panel-palette .palette-accordion > details > summary {

  list-style: none; cursor: default;

}

#panel-palette .palette-accordion > details > summary::-webkit-details-marker { display: none; }

#panel-palette .palette-accordion > details > summary .pal-acc-chev { display: none; }

#panel-palette .palette-accordion > details > summary .pal-acc-hint { display: none; }

#panel-palette .palette-grid { margin-top: 10px; }

.size-dd-row { display: flex; align-items: center; gap: 6px; }

.size-dd-row .size-dd-btn { flex: 1 1 auto; width: auto; }

.size-dd-row .size-dd-fav-onbtn {

  flex: 0 0 auto;

  width: 38px; height: 38px;

  display: flex; align-items: center; justify-content: center;

  border: 1px solid var(--border); border-radius: 10px;

  background: var(--bg-card); color: var(--text-dim);

  font-size: 1.05rem; cursor: pointer; padding: 0;

  transition: border-color .15s, background .15s, color .15s;

}

.size-dd-row .size-dd-fav-onbtn:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-card-hover); }

.size-dd-row .size-dd-fav-onbtn.is-fav { color: #fbbf24; border-color: #fbbf24; }

.size-dd-btn {

  width: 100%; display: flex; align-items: center; justify-content: space-between;

  padding: 10px 12px;

  border: 1px solid var(--border); border-radius: 10px;

  background: var(--bg-card); color: var(--text);

  cursor: pointer; font: inherit;

  transition: border-color .15s;

}

.size-dd-btn:hover { border-color: var(--border-strong); }

.size-dd-btn .size-dd-current { font-weight: 600; }

.size-dd-btn .size-dd-current b { color: var(--brand); font-variant-numeric: tabular-nums; margin: 0 4px; }

.size-dd-btn .size-dd-chev { transition: transform .2s; color: var(--text-soft); font-size: .85rem; }

.size-dd.open .size-dd-chev { transform: rotate(180deg); }

/* R66 / R75 下拉显示异常修复：

   ① z-index 从 30 提到 1500（params 面板里有 color-picker / .bg 控件用 z-index 2000/2，下拉

     被它们盖住 → 用户看到"画布底色"穿透到下拉右边的视口里）

   ② max-height 从 360 提到 480：5 个分类全展开时约 970px，仍有滚动条但能少滚一半

   ③ 因为父 .panel-panes 是 overflow-y:auto 的滚动容器，下拉始终只占自己父的可见

     区域——这条 CSS 解决不了物理裁剪，但能盖住兄弟控件的穿透

   ④ 背景用 --bg（实色）而不是 --bg-card（rgba 3-4% 半透明）：

     --bg-card 设计上是叠在底色上的半透明卡片，当下拉菜单背景就是"看见下面"——下拉

     浮在 cw/ch/颜色 控件上时，控件全部透出来。改实色后下拉能完全遮住下方。 */

.size-dd-menu {

  position: absolute; left: 0; right: 0; top: calc(100% + 4px);

  max-height: 480px; overflow-y: auto;

  background: var(--bg);

  border: 1px solid var(--border); border-radius: 12px;

  box-shadow: 0 12px 36px rgba(20, 24, 41, .18);

  z-index: 1500; padding: 4px 0;

}

.size-dd-cat + .size-dd-cat { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* R106 下拉菜单底部的「自定义」分类：W/H 输入框 + 应用按钮 */

.size-dd-diy-body {

  display: flex; align-items: center; gap: 6px;

  padding: 6px 10px 10px;

}

.size-dd-diy-body input[type="number"] {

  /* 跟 R90 数值框宽度规范一致 */

  flex: 0 0 5.5ch; min-width: 0;

  /* R162 字号对齐面板数值框(.88rem)：高度 34→27px，与 .val 一致。

     注意 font-size 必须写在 font:inherit 简写之后，否则被简写重置。 */

  width: 5.5ch; padding: 3px 6px; box-sizing: content-box;

  border: 1px solid var(--border); border-radius: 8px;

  background: var(--bg-card); color: var(--text); font: inherit;

  font-size: .88rem; line-height: 1.35;

  font-variant-numeric: tabular-nums;

}

.size-dd-diy-body input[type="number"]:focus {

  outline: 2px solid var(--brand); outline-offset: -1px;

  border-color: transparent;

}

.size-dd-diy-body .size-dd-diy-apply {

  flex: 1 1 auto; min-width: 0;

  padding: 6px 10px; border: 0; border-radius: 8px;

  background: var(--brand); color: #fff; font: inherit; font-weight: 600;

  cursor: pointer;

}

.size-dd-diy-body .size-dd-diy-apply:hover { filter: brightness(1.08); }

.size-dd-cat-h {

  display: flex; align-items: center; justify-content: space-between;

  padding: 8px 12px; cursor: pointer; -webkit-user-select: none; user-select: none;

  font-size: .74rem; font-weight: 700; color: var(--text-soft);

  text-transform: uppercase; letter-spacing: .5px;

}

.size-dd-cat-h:hover { color: var(--text); }

.size-dd-cat-h .size-dd-fold { transition: transform .2s; font-size: .72rem; }

.size-dd-cat.collapsed .size-dd-fold { transform: rotate(-90deg); }

.size-dd-cat.collapsed .size-dd-items { display: none; }

.size-dd-items { padding: 0 6px 8px; }

.size-dd-item {

  display: flex; align-items: center; gap: 10px;

  padding: 7px 10px; border-radius: 8px; cursor: pointer;

  font-size: .88rem; color: var(--text);

}

.size-dd-item:hover { background: var(--bg-card-hover); }

.size-dd-item.active { background: var(--brand-solid); color: #fff; }

/* R84 简化：每行只有"尺寸×尺寸  ☆"（之前 b/l/fav 三块看着碎） */

.size-dd-item-b { font-weight: 700; flex: 1; font-variant-numeric: tabular-nums; }

.size-dd-item-b { font-weight: 700; min-width: 92px; font-variant-numeric: tabular-nums; }

.size-dd-fav {

  border: none; background: none; cursor: pointer;

  color: var(--text-soft); font-size: 1.05rem; padding: 0 4px; line-height: 1;

}

.size-dd-fav:hover { color: var(--text); }

.size-dd-fav.is-fav { color: #fbbf24; }

.size-dd-item.active .size-dd-fav { color: rgba(255,255,255,.85); }

/* R84 自定义分类：W × H 输入 + 设为当前 + 收藏 横向一行 */

.size-dd-cat-diy { padding: 4px 6px 8px; }

/* R103 删掉 .size-dd-items-diy：R92 移除「自定义」尺寸分类后这条规则就没人引用了（grep 全站 0 处） */

.size-dd-empty { padding: 10px 12px; color: var(--text-dim); font-size: .82rem; font-style: italic; }

input[type="range"] {

  -webkit-appearance: none; appearance: none; width: 100%;

  /* 命中带留到 24px：原先 6px 高的元素意味着只有 6px 的拖拽命中区，

     鼠标勉强能中、手指几乎必然落空。轨道视觉仍是 6px —— 用居中的背景条绘制，

     元素本身撑高但只画中间一条，布局与观感都不变。 */

  height: 24px; border-radius: 999px; outline: none; cursor: pointer;

  background-color: transparent;

  background-image: linear-gradient(var(--border-strong), var(--border-strong));

  background-repeat: no-repeat;

  background-position: center center;

  background-size: 100% 6px;

}

input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;

  background: var(--brand); cursor: pointer; box-shadow: 0 2px 8px rgba(124,92,255,.6); border: 2px solid #fff;

}

input[type="range"]::-moz-range-thumb {

  width: 18px; height: 18px; border-radius: 50%; background: var(--brand); cursor: pointer; border: 2px solid #fff;

}

:where(select, input[type="text"], input[type="number"]) {

  /* R111 用 :where() 把这条通用规则特异性降为 0，

     这样后续的 .bg-angle > .bg-angle-val 等具体规则就能赢过它（之前 100% 宽度把角度 val 撑满 234px）。 */

  width: 100%; padding: 10px 12px; border-radius: 10px;

  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);

  font-size: .92rem; font-family: var(--font); outline: none; transition: .2s;

}

:where(select, input[type="text"], input[type="number"]):focus { border-color: var(--brand); }

/* R163 全站下拉统一小箭头：原生箭头过大且主题下突兀；自带定制的下拉（.ov-select）

   在自身规则里已处理。注意必须在上一条 background 简写之后声明才会生效。 */

:where(select) {

  appearance: none; -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a90a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 10px center;

  padding-right: 28px;

}

/* R124 .row2 改 minmax(0, 1fr) 让列宽能压到 0（input[type=range] 的滑块占位 ~150px 会撑列，1fr 默认是 minmax(min-content, 1fr) = 撑到 150px）。 */

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* R80 整图边框：每行 label + 控件 + 数字框，3 列对齐 */

.frame-row {

  display: grid;

  grid-template-columns: minmax(40px, auto) 1fr auto;

  align-items: center; gap: 10px;

  margin-bottom: 8px;

}

.frame-row > label { color: var(--text-soft); font-size: .86rem; font-weight: 600; }

.frame-row > input[type="range"] { width: 100%; }

.frame-row > input.fr-color { cursor: pointer; }

.frame-row > input.fr-color-hex { box-sizing: content-box; width: 7.5ch; min-width: 0; text-align: center; color: var(--text); font-weight: 600; }



.seg { display: flex; flex-wrap: wrap; gap: 6px; }

.seg button {

  flex: 1 1 auto; min-width: 56px; padding: 8px 10px; border-radius: 9px; cursor: pointer;

  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-soft);

  font-size: .84rem; font-weight: 600; font-family: var(--font); transition: .18s;

}

.seg button.active { background: var(--accent-grad-solid); color: #fff; border-color: transparent; }

/* R79 用户自由输入拼贴数：input + 提示 + 一键不拼贴按钮 */

.collage-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.collage-row .collage-hint { color: var(--text-dim); font-size: .8rem; }

.collage-row .collage-none { padding: 4px 10px; font-size: .82rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); cursor: pointer; }

.collage-row .collage-none:hover { border-color: var(--border-strong); color: var(--text); }

.seg button:hover:not(.active) { border-color: var(--border-strong); color: var(--text); }



.colors-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.color-chip { position: relative; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border-strong); cursor: pointer; }

.color-chip input[type="color"] { position: absolute; inset: -6px; width: 200%; height: 200%; border: none; cursor: pointer; padding: 0; }

.color-chip .rm { position: absolute; top: 1px; right: 2px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px #000; opacity: 0; transition: .2s; }

.color-chip:hover .rm { opacity: 1; }

/* .rm 是「删除该颜色」的唯一入口：role=button + tabindex=0 + click/keydown 俱全，

   但默认 opacity:0，只在 :hover 时出现——触屏没有 hover，手机上这个控件永远不可见

   也点不到（点色块本身是打开取色器）。用 (hover: none) 只在无悬停设备常显，

   桌面行为完全不变；顺带加半透明底，避免落在浅色块上时白字看不清。 */

@media (hover: none) {

  .color-chip .rm { opacity: 1; padding: 3px 6px; border-radius: 8px; background: rgba(0, 0, 0, .5); text-shadow: none; line-height: 1; }

}

.add-color {

  width: 40px; height: 40px; border-radius: 10px; border: 2px dashed var(--border-strong);

  background: transparent; color: var(--text-soft); cursor: pointer; font-size: 20px; display: grid; place-items: center; transition: .2s;

}

.add-color:hover { border-color: var(--border-strong); color: var(--brand); }



.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }

/* R63 一行一个：原 grid 2 列（1fr 1fr）导致 1 个按钮只占半宽、2 个并排；

   改为单列 1fr 让每个按钮独立占满一行，按阅读顺序上下排。 */

/* R146 .btn-row 通用基础规则：此前 加文字/加图片 按钮行完全没有间距（0px 贴死）；

   .actions/.gen-hero 各自有更具体的覆盖，不受影响 */

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.actions .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* R123 导出按钮文字不换行（"下载 PNG" 在窄列里会拆成 2 行）；

   字体略缩 0.86rem 留出余量。 + 1px 边距和 ellipsis 兜底。 */

.actions .btn-row .btn { white-space: nowrap; font-size: .86rem; padding: 12px 10px; gap: 6px; }

.actions .btn-row .btn { min-width: 0; }

.actions .btn-row .btn span { overflow: hidden; text-overflow: ellipsis; }

.btn {

  padding: 12px 16px; border-radius: 11px; cursor: pointer; font-size: .92rem; font-weight: 700;

  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-family: var(--font);

  transition: .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px;

}

.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.btn svg { width: 17px; height: 17px; }

.btn.accent { background: var(--accent-grad-solid); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(124,92,255,.35); }

.btn.wide { width: 100%; }



/* R137 试过让预览列撑满网格行高（align-self:stretch + stage flex:1）：截图后发现

   画布会浮在一个 694px 高的空卡片中间，比【顶部对齐 + 下方页面底色】更难看，已撤回。

   根因：16:9 画布在 800px 宽的列里是【宽度受限】的，纵向再高也只会留白，强行撑满没有意义。 */

.preview-wrap { position: relative; }

.preview-stage::before {

  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1.5px; pointer-events: none;

  background: var(--accent-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .35; transition: opacity .3s;

}

.preview-stage:hover::before { opacity: .8; }

.preview-stage {

  position: relative;

  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);

  box-shadow: 0 10px 30px rgba(20, 24, 41, .06), 0 2px 6px rgba(20, 24, 41, .04);

  /* R125 去掉 22×22px 棋盘格：原意是画布透明时显示棋盘格，

     但实际渲染时画布永远有内容，棋盘格只在 stage 的 padding 漏出 4 角时可见——

     canvas 撑满后 4 角已被画布完全覆盖。改纯色更干净。 */

  display: flex; align-items: center; justify-content: center;

  min-height: 360px;

  /* R132 画布最大高度（视口百分比）：canvas 超过时按比例缩小，不裁切 */

  --stage-maxh: 62vh;

}

/* R156b 撤 width/height auto !important：它让显示尺寸跟随位图固有尺寸，

   两段式渲染（低清→高清）时可见"由小变大闪一下"。显示尺寸改由 editor.js

   applyPreviewSize() 的 inline style 决定（与位图分辨率解耦，恒定不变）；

   max-* 保留为溢出保护（replaced element 固有比例在 max 约束下仍不变形）。 */

.preview-stage canvas, .preview-stage svg {

  position: static !important;

  max-width: 100% !important;

  max-height: var(--stage-maxh, 62vh) !important;

  display: block; box-sizing: border-box;

  /* R137 圆角与容器对齐：stage 是 var(--radius)=18px、canvas 内缩 1px 边框，

     原来写死 10px 导致四角露出 8px 的浅色月牙（放大看是明显的双层圆角）。 */

  border-radius: calc(var(--radius) - 1px);

  box-shadow: 0 12px 40px rgba(20, 24, 41, .12);

}

/* R137 画布 hover：阴影微升，强化"可操作画布"的质感（只改阴影，不动尺寸避免重排） */

.preview-stage canvas, .preview-stage svg { transition: box-shadow .25s ease; }

.preview-stage:hover canvas, .preview-stage:hover svg { box-shadow: 0 18px 52px rgba(20, 24, 41, .17); }

/* R81 画布上方横条：左侧 "预览" 标签 + 右侧 4 个带文字按钮

   整体在画布上方（不在画布内），flex 横排，正常态始终可见（不像之前 absolute

   那种几乎融入画布的形式），按钮带文字便于用户理解。

   hover 时按钮浅底色高亮。 */

.preview-fab-bar {

  display: flex; align-items: center; gap: 10px;

  margin-bottom: 8px; padding: 6px 10px;

  background: var(--bg-card); border: 1px solid var(--border);

  border-radius: 10px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);

}

.preview-fab-label {

  font-size: .82rem; font-weight: 600;

  color: var(--text-soft); letter-spacing: .3px;

  padding-right: 10px; margin-right: 2px;

  border-right: 1px solid var(--border);

}

.preview-fab-buttons { display: flex; gap: 12px; flex: 1; justify-content: flex-end; }

/* R137 工具栏分组：撤销/重做（历史）与 全屏/分享/收藏（输出）之间加细分隔，提升扫读性 */

.preview-fab-buttons .fab-btn:nth-child(2) { margin-right: 9px; position: relative; }

.preview-fab-buttons .fab-btn:nth-child(2)::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: var(--border-strong, var(--border)); }

.preview-fab-buttons .fab-btn {

  display: inline-flex; align-items: center; gap: 5px;

  padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px;

  background: var(--bg); color: var(--text);

  font-size: .82rem; font-weight: 500; line-height: 1;

  cursor: pointer; transition: background .12s, border-color .12s;

}

.preview-fab-buttons .fab-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }

/* R96 工具栏收藏：active 时星星实心 + 边框换成品牌色 */

.preview-fab-buttons .fab-fav.active { border-color: var(--brand); background: var(--bg-card-hover); }

.preview-fab-buttons .fab-fav.active svg { stroke: var(--brand); }

.preview-fab-buttons .fab-fav svg { transition: fill .15s, stroke .15s; }

.preview-fab-buttons .fab-fav:hover svg { fill: var(--brand); }

.preview-fab-buttons .fab-fav.active:hover svg { fill: var(--brand); }

.preview-fab-buttons .fab-btn svg { width: 14px; height: 14px; }

.preview-fab-buttons .fab-btn span { white-space: nowrap; }



/* 预览下方信息条：尺寸徽章 + 实时状态灯 + 说明信息卡 */

/* R119 preview-meta 只剩尺寸 + 实时预览（当前生成器名已挪到顶部 chip） */

.preview-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }

.pm-chip {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 4px 12px; border-radius: 999px;

  background: var(--bg-card); border: 1px solid var(--border);

  color: var(--text-soft); font-size: .8rem; font-weight: 600;

  font-variant-numeric: tabular-nums; letter-spacing: .2px;

}

/* R130 顶部 chip：从画布内部挪到上方工具栏右侧，画布不再被遮挡。

   保留深色药丸 + 渐变光点，在浅色工具栏上仍清晰。

   文字动态跟随生成器（editor.js: pmGen.textContent = I18n.t("gen." + state.id)）。 */

.preview-stage-title {

  display: inline-flex; align-items: center; gap: 7px;

  padding: 5px 12px 5px 10px; border-radius: 999px;

  background: rgba(20, 24, 41, 0.78); color: #fff;

  font-size: .78rem; font-weight: 600; letter-spacing: .2px;

  box-shadow: 0 4px 14px rgba(20, 24, 41, .25);

  flex-shrink: 0;

}

.preview-stage-title::before {

  content: ""; width: 8px; height: 8px; border-radius: 50%;

  background: linear-gradient(135deg, #7c5cff, #22d3ee);

  box-shadow: 0 0 6px rgba(124, 92, 255, 0.7);

}



.pm-live { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: .8rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent); animation: pmPulse 2.2s ease-out infinite; }

@keyframes pmPulse {

  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }

  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }

  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }

}

@media (prefers-reduced-motion: reduce) { .pm-dot { animation: none; } }



/* ---------------- 响应�?---------------- */

@media (max-width: 920px) {

  /* minmax(0,1fr) 而非 1fr：1fr 的最小值是 auto(=min-content)，

     英文模式下参数面板里「Curated Palettes / Click to apply…」这行

     min-content 达 300px，会把整列顶到 348px，320px 视口下横向溢出 48px。

     写成 minmax(0,1fr) 后列可以被压到视口宽，那行按原设计走省略号截断。 */

  .editor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mid" "gal" "rp"; }

  .right-col { position: static; max-height: none; overflow: visible; }

  .panel-tabs { margin-bottom: 10px; }

  .panel-panes { max-height: none; overflow: visible; }

  .panel { position: static; }

  .gen-gallery { position: static; max-height: none; overflow: visible; }

  .preview-wrap { order: 1; }

  .gen-gallery { order: 2; }

  .right-col { order: 3; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .footer-col.brand-col { grid-column: 1 / -1; }

}



@media (max-width: 720px) {

  .nav-links {

    position: fixed; top: 66px; left: 0; right: 0;

    flex-direction: column; align-items: stretch; gap: 4px;

    background: var(--bg-soft); border-bottom: 1px solid var(--border);

    padding: 12px 20px; transform: translateY(-140%); transition: transform .3s; z-index: 90;

  }

  .nav-links.open { transform: translateY(0); }

  .nav-links a { padding: 12px 14px; }

  .menu-toggle { display: grid; }

  .hero { padding: 50px 0 30px; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .footer-col.brand-col { grid-column: auto; }

  .gen-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  .gen-card .gen-thumb { height: 110px; }

  .section { padding: 36px 0; }

  .about-box { padding: 28px 20px; }

}



/* 721~900px 是导航的「断点空隙」：≤720px 已切换成汉堡菜单，

   但 721~790px 仍是整排放导航项，此时总宽会超过视口 ——

   Firefox(Gecko) 字体度量更宽，实测 768px 下右侧溢出 20px（Chromium 刚好卡住不溢出）。

   这里在汉堡菜单生效之前先把链接区收紧，让整行放得下。 */

@media (min-width: 721px) and (max-width: 900px) {

  .nav { gap: 10px; }

  .nav-links { gap: 4px; }

  .nav-links a { padding: 7px 10px; font-size: .9rem; }

  .brand { font-size: 1.08rem; }

  .nav-actions { gap: 6px; }

}



/* 200% 字号（WCAG 1.4.4）叠加最大字间距时，详情页 EN 页头会被撑爆 201px，

   而且品牌区被挤成 0 宽（"365Lab Backgrounds" 整个消失）。

   根因：.nav-links 是 flex 且不换行，它的 min-content = 6 个链接的 min-content 之和

   （实测 934px），links+actions 就要 1446px > 1280px，谁都压不动。

   放开换行即可解：min-content 降到"单个最宽链接"，.nav 能压窄它、链接自动折行。

   但纯 CSS 做不到"只在装不下时才换行"——flex 的换行判定用假设尺寸(max-content)之和、

   发生在压缩之前，所以只要总宽略超容器就会折行。实测写成无断点规则或

   @media(min-width:1011px) 都会在 1024/1100px 正常字号下把页头从 67px 顶到 87px，

   且阈值随引擎字体度量漂移（Chromium 1120px 才安全，Gecko 更宽）。

   因此改由 JS 在"确认已经溢出"时才加 .nav-overflow（见 theme-init.js）：

   正常状态下这个类不存在，不可能影响常规布局。 */

.nav.nav-overflow { flex-wrap: wrap; row-gap: 6px; }

.nav.nav-overflow .nav-links { flex-wrap: wrap; }



@media (max-width: 420px) {

  .gen-grid { grid-template-columns: 1fr 1fr; }

  .gen-card-body { padding: 12px 13px 14px; }

  .gen-card-body h3 { font-size: .98rem; }

  .gen-card-body p { font-size: .78rem; }

}



/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {

  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

}







.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }



/* ---------------- 上传素材 / 叠加层（增强功能�?---------------- */

.upload-btn {

  display: flex; align-items: center; justify-content: center; gap: 8px;

  padding: 12px 14px; border-radius: 11px; cursor: pointer; font-size: .9rem; font-weight: 700;

  border: 1.5px dashed var(--brand); color: var(--brand); background: var(--bg-soft);

  transition: .2s; text-align: center;

}

.upload-btn:hover { background: rgba(124,92,255,.08); border-style: solid; }

.upload-btn svg { width: 18px; height: 18px; }



.overlay-empty {

  font-size: .82rem; color: var(--text-dim); border: 1px dashed var(--border);

  border-radius: 10px; padding: 10px 12px; text-align: center; line-height: 1.5;

}

.preset-wrap { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; }

.overlay-title {

  font-size: .92rem; font-weight: 700; color: var(--brand-2);

  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px;

}



/* R124 deco 装饰区：每个 .row2 单列排（密集滑条 + 数值框适合单列，比强行 2 列更清晰）

   字号/水平/旋转等滑条对不再硬挤 99+99 列；视觉上每行只有一个控件。

   select 那一行 (font+align) 也跟着变 1 列，但 select 本身较宽，单列更舒服。 */

.overlay-item .row2 { grid-template-columns: 1fr; gap: 12px; }

.overlay-item .row2 .mini { max-width: 100%; min-width: 0; }

.overlay-item {

  border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg-soft);

}

.overlay-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }

.ov-blend { width: 100%; padding: 7px 10px; border-radius: 8px; }

.ov-remove {

  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;

  border: 1px solid var(--border); background: transparent; color: var(--text-soft); font-size: 15px; transition: .2s;

}

.ov-remove:hover { border-color: #ff5c8a; color: #ff5c8a; }

.ov-add { margin-top: 4px; border: 1.5px dashed var(--brand); background: transparent; color: var(--brand); }

.ov-add:hover { background: rgba(124,92,255,.08); border-style: solid; transform: translateY(-1px); }

/* R131 叠层卡片：左右箭头切换其他生成器样式（不重选） + 折叠展开编辑内层参数 */

.overlay-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }

/* R146 头部按钮（⟳▲✕）之间 4px 太挤：整体提到 6px，操作组与名称组之间再隔 5px */

.overlay-head .ov-shuffle { margin-left: 5px; }

.overlay-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }

.ov-arrow { width: 26px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0; transition: .15s; flex: 0 0 auto; }

.ov-arrow:hover { border-color: var(--brand); color: var(--brand); background: rgba(124,92,255,.06); }

.ov-toggle, .ov-shuffle, .seed-refresh { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; font-size: 11px; line-height: 1; padding: 0; transition: .15s; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.ov-toggle:hover, .ov-shuffle:hover, .seed-refresh:hover { border-color: var(--brand); color: var(--brand); }

.ov-shuffle svg, .seed-refresh svg { width: 13px; height: 13px; }

.ov-toggle.open { background: rgba(124,92,255,.08); border-color: var(--brand); color: var(--brand); }

.ov-controls { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); display: none; }

.ov-controls.open { display: block; }

.ov-controls .ctrl { margin-bottom: 8px; }

.ov-controls .ctrl:last-child { margin-bottom: 0; }



/* R122 叠加层添加：下拉选生成器（按类别分组），不用按钮 + 随机 */

.ov-select {

  /* R163 高度 45→32px、虚线→实线（与其他输入框一致）、原生大箭头→小 chevron */

  width: 100%; padding: 6px 30px 6px 12px; border-radius: 10px;

  border: 1px solid var(--border); background: var(--bg-soft);

  color: var(--text); font: inherit; font-weight: 500; font-size: .88rem;

  appearance: none; -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a90a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat; background-position: right 10px center;

  cursor: pointer; transition: border-color .18s, background .18s;

}

.ov-select:hover { border-color: var(--brand-2); background: var(--bg-card); }

.ov-select:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }

.ov-select optgroup { font-weight: 700; color: var(--text-soft); }

.ov-select option { font-weight: 400; color: var(--text); }





/* 精选配色 */

/* 配色卡（精选配色）：让色块成为视觉主体，而不是一条窄窄的色带

   旧版 3 列 + 52px 色块区，在窄面板里每个色只剩 15×52px，几乎看不出是配色。

   改为 2 列 + 68px 色块区，色块变成 30×68 的大方块，bg 色调成更柔的背景底，

   hover 时轻微上浮并描边变亮。 */

.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }

.palette-chip { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); color: var(--text); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; text-align: left; }

.palette-chip:hover { transform: translateY(-3px); border-color: var(--brand-2); box-shadow: 0 6px 20px rgba(0,0,0,.14); }

.palette-chip.active { border-color: var(--brand-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 35%, transparent); }

.palette-chip.fit-cat { border-color: color-mix(in srgb, var(--brand-2) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 35%, transparent); }

.pal-fit-mark { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 2px rgba(255,255,255,.85); pointer-events: none; z-index: 2; }

/* R69 配色卡高度减半（68→32），整体卡片高 ~50px（原 101px），色块不再"挤"在窄长条里 */

.pal-swatches { display: flex; height: 32px; position: relative; }

.pal-swatches::before { content: ''; position: absolute; inset: 4px; border-radius: 6px; background: var(--pal-bg, transparent); opacity: .15; z-index: 0; pointer-events: none; }

.pal-swatches i { flex: 1; transition: flex .25s ease; position: relative; z-index: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

.palette-chip:hover .pal-swatches i:nth-child(1) { flex: 1.15; }

.palette-chip:hover .pal-swatches i:nth-child(3) { flex: 1.15; }

/* R69 配色名内边距同步收紧，配合 .pal-swatches 高度减半，整张卡 ~50px（原 101） */

.pal-name { display: block; padding: 3px 10px 4px; font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ctrl-hint { font-size: .76rem; color: var(--text-dim); margin: 4px 0 0; line-height: 1.4; }



/* R121 配色 tab：去 details 折叠，改普通 div 默认展开；

   不再加外层边框（#panel-palette 容器本身已带边框 = 一个外框）。

   配色网格从每行 220px+ 改 90px+ 紧密排版（之前一屏 6 张嫌空）。 */

.palette-accordion { margin-top: 4px; }

.palette-accordion-title {

  margin: 0 0 4px; font-size: .88rem; font-weight: 600; color: var(--text);

  letter-spacing: .2px;

}

.palette-accordion-hint {

  margin: 0 0 12px; color: var(--text-soft); font-size: .76rem; font-weight: 500;

}

.palette-accordion .palette-grid {

  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));

  gap: 10px; padding: 0; animation: panelIn .25s ease both;

}



/* 通用「随机生成」按钮（参数面板末尾，所有生成器都有） */

/* R117 撤掉 sticky bottom：用户反馈"不要跟随滑动，和其他一样固定"——

     random-section 现在按正常文档流排在面板最末，不 sticky 跟随滚动。 */

.random-section {

  background: var(--bg-card);

  padding: 10px 12px 12px;

  border-top: 1px solid var(--border);

  border-radius: 12px;

  display: flex; flex-direction: column; gap: 10px;

  margin-top: 10px;

}

.random-section .random-seed-row { width: 100%; }

.random-section .random-seed-row > label { font-weight: 600; color: var(--text-soft); }

.random-section .btn.wide.accent { width: 100%; }

/* R134 「随机排列」+「随机生成」并排；无种子的生成器只显示随机生成（flex:1 自动占满） */

.random-btn-row { display: flex; gap: 8px; }

.random-btn-row .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }

.random-btn-row .btn span { white-space: nowrap; }

/* R136 已上传素材缩略图列表（material 生成器） */

.mat-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; }

.mat-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); flex: 0 0 auto; }

.mat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mat-thumb-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(20,24,41,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }

.mat-thumb-del:hover { background: #ff5c8a; }

/* R150 叠加卡 ✕ 移到右上角圆角框：白底圆角描边、hover 变红（原在底部行左侧） */

.overlay-item .deco-del { position: absolute; top: 10px; right: 10px; }

/* R144 「收藏设计稿」按钮：已收藏态（描边+底色+图标填充），与工具栏 ⭐ 同语言 */

.btn.fav-on { border-color: var(--brand); color: var(--brand); background: rgba(124,92,255,.08); }

.btn.fav-on svg { fill: var(--brand); stroke: var(--brand); }

.btn.fav-on:hover { background: rgba(124,92,255,.14); }

/* R139 叠加元素滑条行：统一为 文字+滑块+数字框(▲▼)，与主面板 ctrl-row 同款 */

.overlay-item .deco-row { margin-bottom: 10px; }

.overlay-item .deco-row:last-child { margin-bottom: 0; }

.overlay-item .deco-lb { flex: 0 0 auto; width: 60px; font-size: .85rem; font-weight: 600; color: var(--text-soft); }

.overlay-item .deco-row input[type="range"] { flex: 1 1 auto; min-width: 0; }

/* 旧 .ctrl-random 类保留兼容（如果别处还在用），新结构用 .random-section */

.ctrl-random { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }



/* 文字 / 图片叠加 */

.deco-text { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); padding: 8px 10px; font-size: .88rem; font-family: var(--font); outline: none; }

.deco-text:focus { border-color: var(--brand); }

label.mini { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--text-dim); flex: 1; }

label.mini.chk { flex-direction: row; align-items: center; gap: 6px; }

/* R124 修 .row2 撑成单列的根因：input[type=range] 在 .mini 里 width:100% 但 range 自身有 ~150px 最小占位，

   撑出 1fr 列宽 → grid 自动 wrap 到下一行。改 min-width:0 + box-sizing:border-box 让 range 服从 grid 列宽。 */

/* R124 input[type=range] 在 .mini (flex column) 里 width:100% 不够，加 flex:1 1 auto 真正拉伸占满列宽。 */

label.mini input[type=range] { width: 100%; min-width: 0; flex: 1 1 auto; box-sizing: border-box; }

/* 同理：.mini select 也不应该超过 .row2 列宽 */

label.mini select { min-width: 0; }

label.mini select { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); padding: 6px 8px; font-size: .8rem; font-family: var(--font); }

.chk-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-soft); margin-top: 10px; cursor: pointer; }

.chk-row input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }

.chk-row { flex-wrap: wrap; }

/* 不支持透明的生成器：整行置灰 + 说明文字独占一行，避免 flex 挤压换行错乱 */

.chk-row.is-disabled { cursor: default; opacity: .58; }

.chk-row.is-disabled input { cursor: not-allowed; }

.chk-note { flex: 1 1 100%; margin: 0; }



/* 安全区参考线 */

.preview-stage.show-guide::after {

  content: ""; position: absolute; inset: 0; pointer-events: none;

  border: 18px solid transparent; outline: 2px dashed rgba(255,80,80,.55); outline-offset: -18px;

}

.btn.active { background: var(--accent-grad-solid); color: #fff; border-color: transparent; }







/* 生成器卡片缩略图轻微圆角统一 */

.gen-grid .gen-thumb canvas { width: 100%; height: 100%; display: block; }





/* 场景方案 */

.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 920px) { .scene-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 720px) { .scene-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 460px) { .scene-grid { grid-template-columns: 1fr; } }

.scene-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: .25s; animation: cardIn .5s cubic-bezier(.2,.7,.3,1) both; text-decoration: none; color: var(--text); }

.scene-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }

.scene-thumb { width: 100%; height: 150px; object-fit: cover; display: block; }

.scene-body { padding: 12px 14px 16px; }

.scene-body h3 { font-size: 1rem; color: var(--text); margin-bottom: 3px; }

.scene-body p { font-size: .82rem; color: var(--text-dim); }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }



/* R96 收藏页本地存储提醒：始终可见（在 hero 下方） */

.fav-local-note {

  display: flex; flex-direction: column; gap: 6px;

  margin: 0 0 14px;

  padding: 12px 16px;

  border: 1px solid var(--border);

  border-left: 3px solid #fbbf24;

  border-radius: 10px;

  background: var(--bg-card);

}

.fav-local-note strong { color: var(--text); font-size: .9rem; }

.fav-local-note p { color: var(--text-soft); font-size: .84rem; line-height: 1.55; margin: 0; }



/* R96 收藏页 tabs：设计稿 / 收藏的生成器 */

.fav-tabs {

  display: flex; gap: 4px;

  border-bottom: 1px solid var(--border);

  margin: 18px 0 14px;

}

.fav-tabs[hidden] { display: none; }

.fav-tab {

  background: none; border: 0; padding: 8px 14px;

  font: inherit; font-size: .92rem; font-weight: 600;

  color: var(--text-soft); cursor: pointer;

  border-bottom: 2px solid transparent;

  margin-bottom: -1px; /* 盖住底边线 */

  transition: color .15s, border-color .15s;

}

.fav-tab:hover { color: var(--text); }

.fav-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.fav-pane[hidden] { display: none; }



/* 收藏的生成器网格：复用画廊的 160×90 缩略图 + 名称 */

.fav-gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }

.fav-gen-grid .fav-gen-card {

  display: flex; flex-direction: column; align-items: stretch;

  text-decoration: none; color: var(--text);

  border: 1px solid var(--border); border-radius: 12px;

  background: var(--bg-card); overflow: hidden;

  padding: 8px;

  transition: border-color .15s, transform .15s;

}

.fav-gen-grid .fav-gen-card:hover { border-color: var(--brand-2); transform: translateY(-1px); }

.fav-gen-grid .gt-cv { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--bg-soft); }

.fav-gen-grid .gt-label {

  text-align: center; font-size: .84rem; color: var(--text-soft);

  padding: 6px 4px 2px; font-weight: 600;

}

.fav-gen-empty { padding: 40px 16px; text-align: center; color: var(--text-dim); font-size: .9rem; }

.fav-gen-empty[hidden] { display: none; }



/* 收藏页顶条：数量 + 「去制作」直达按钮 */

.fav-bar {

  display: flex; align-items: center; justify-content: space-between;

  margin: 14px 0 12px; gap: 12px;

}

.fav-count { font-size: .9rem; color: var(--text-soft); font-weight: 600; }

.fav-count b { color: var(--brand); font-variant-numeric: tabular-nums; margin: 0 2px; }

.fav-bar[hidden] { display: none; }

.fav-actions {

  display: flex; flex-wrap: wrap; gap: 10px;

  margin: 22px 0 8px; padding: 14px 16px;

  border: 1px solid var(--border); border-radius: var(--radius);

  background: var(--bg-card);

}

.fav-actions[hidden] { display: none; }

/* 「删除」单卡按钮：绝对定位右上角，平常半透明，hover 卡片时亮起 */

.scene-card { position: relative; }

/* R158 收藏页卡片身份徽标：设计稿卡与生成器卡同名同缩略图，加徽标一眼区分 */

.fav-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px;

  font-size: .68rem; font-weight: 700; font-style: normal; letter-spacing: .3px; color: #fff;

  box-shadow: 0 2px 8px rgba(20, 24, 41, .25); pointer-events: none; }

.fav-badge.bd-design { background: linear-gradient(135deg, #0ea5b7, #22d3ee); }

.fav-badge.bd-gen { background: linear-gradient(135deg, #7c5cff, #5b8cff); }

.fav-del {

  position: absolute; top: 6px; right: 6px;

  width: 28px; height: 28px; padding: 0; margin: 0;

  display: grid; place-items: center;

  border: 1px solid var(--border); border-radius: 50%;

  background: rgba(0, 0, 0, .45); color: #fff;

  font-size: 14px; line-height: 1; cursor: pointer;

  opacity: 0; transition: opacity .18s, background .18s, border-color .18s, transform .18s;

  z-index: 2;

}

.scene-card:hover .fav-del { opacity: 1; }

.fav-del:hover { background: #ef4444; border-color: #ef4444; transform: scale(1.08); }

.fav-del:focus-visible { opacity: 1; outline: 2px solid var(--brand-2); outline-offset: 2px; }

.fav-danger { color: #ef4444; border-color: color-mix(in srgb, #ef4444 35%, var(--border)); }

.fav-danger:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* R83 友好空状态：之前只是"小星星 + 一行灰字 + 一个按钮"，看起来像空白。

   升级为居中大卡片：大图标 + 标题 + 详细描述 + 双 CTA + 小提示。 */

.fav-empty {

  text-align: center; padding: 56px 24px 60px; margin: 8px 0 4px;

  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);

  background: linear-gradient(180deg, var(--bg-card) 0%, transparent 100%);

}

.fav-empty[hidden] { display: none; }

.fav-empty-icon {

  width: 88px; height: 88px; margin: 0 auto 18px;

  display: grid; place-items: center;

  border-radius: 50%;

  background: var(--bg-soft);

  border: 1.5px dashed var(--border-strong);

  color: var(--text-soft); opacity: .9;

}

.fav-empty-icon svg { width: 44px; height: 44px; }

.fav-empty h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; color: var(--text); }

.fav-empty p.fav-empty-desc { color: var(--text-soft); font-size: .92rem; line-height: 1.6; margin: 0 0 22px; max-width: 480px; margin-left: auto; margin-right: auto; }

.fav-empty-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }

.fav-empty .fav-empty-tip { color: var(--text-dim); font-size: .82rem; line-height: 1.5; margin: 0; padding-top: 14px; border-top: 1px dashed var(--border); }

#favorites[hidden] { display: none; }

.ex-prefix { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); padding: 7px 10px; font-size: .82rem; font-family: var(--font); }



/* 滤镜微调 / 拼贴 / 收藏 面板 */

.ctrl-sub { margin-top: 8px; }

.ctrl-sub .seg { display: flex; gap: 6px; flex-wrap: wrap; }

.ctrl-sub .seg button { flex: 1; padding: 6px 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; cursor: pointer; font-size: .8rem; }

.ctrl-sub .seg button.active { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }

#btnFav { margin-top: 6px; }



/* 全局焦点可见性（键盘可达性） */

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }



/* 自定义滚动条 */

.panel { max-height: calc(100vh - 110px); overflow-y: auto; }

.panel::-webkit-scrollbar { width: 8px; }

.panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.panel::-webkit-scrollbar-track { background: transparent; }



/* 卡片缩略图渐显（避免首屏闪烁�?*/

.gen-thumb canvas, .show-card { animation: fadeIn .4s ease both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



/* 区块标题左侧装饰�?*/

.section-head h2 { position: relative; }

.section-head h2::after {

  content: ""; display: block; width: 56px; height: 4px; margin: 12px auto 0;

  border-radius: 999px; background: var(--accent-grad);

}





/* ---------- ��ݼ��������� ---------- */

.modal-mask { position: fixed; inset: 0; background: var(--mask); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; }

.modal-mask[hidden] { display: none; }

.modal { width: min(420px, 100%); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); animation: popIn .18s ease; }

@keyframes popIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.modal-head h3 { font-size: 1.1rem; font-weight: 700; }

.modal-x { background: none; border: none; color: var(--text-soft); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }

.modal-x:hover { color: var(--text); }

.kbd-list { list-style: none; padding: 0; margin: 0 0 14px; }

.kbd-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); }

.kbd-list li:last-child { border-bottom: none; }

.kbd-list kbd { min-width: 84px; text-align: center; font-family: 'Inter', monospace; font-size: .82rem; background: var(--bg-soft); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 8px; padding: 4px 8px; color: var(--text); }

.kbd-list span { color: var(--text-soft); font-size: .92rem; }

.preview-stage canvas.dragging { cursor: grabbing; }

/* ---------- 编辑历史面板 ---------- */

.modal-wide { width: min(720px, 100%); max-height: 80vh; overflow: auto; }

.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 6px; }

.hist-cell { position: relative; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }

.hist-cell:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.hist-cell.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,92,255,.35); cursor: default; }

.hist-thumb { width: 100%; height: auto; border-radius: 8px; background: #0b0f1a; display: block; }

.hist-i { position: absolute; top: 12px; left: 12px; font-size: .72rem; color: var(--text-soft); background: rgba(5,8,16,.6); border-radius: 6px; padding: 1px 6px; }

.hist-cur { align-self: flex-start; font-size: .7rem; color: #fff; background: var(--brand-solid); border-radius: 6px; padding: 1px 6px; }

/* （R151 我的预设库已下线：与收藏设计稿重叠）*/

.pre-save { white-space: nowrap; }

/* ---------- 参数面板折叠 ---------- */

.editor.panel-hidden { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "gal mid"; }

.editor.panel-hidden .right-col { display: none; }

.icon-btn.active { color: var(--brand-2); border-color: var(--brand-2); }

@media (max-width: 1620px) { .editor.panel-hidden { grid-template-columns: 280px minmax(0, 1fr); } }

@media (max-width: 1400px) { .editor.panel-hidden { grid-template-columns: 260px minmax(0, 1fr); } }

@media (max-width: 1180px) { .editor.panel-hidden { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "gal mid"; } }

@media (max-width: 920px) { .editor.panel-hidden { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mid" "gal"; } .editor.panel-hidden .preview-wrap { order: 1; } .editor.panel-hidden .gen-gallery { order: 2; } }



/* 键盘快捷键帮助面板按钮仍在 header 不存在，保留可访问性：P 键仍可折叠右栏（initPanelToggle 监听 document） */

/* ---------- 独立生成器落地页 ---------- */

.gen-hero { text-align: center; padding: 40px 0 22px; animation: cardIn .5s ease both; }

.gen-hero .gen-cat { display: inline-block; font-size: .8rem; padding: 4px 14px; border-radius: 999px; background: var(--accent-grad-solid); color: #fff; margin-bottom: 16px; font-weight: 600; }

.gen-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 12px; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.gen-hero p { color: var(--text-soft); max-width: 760px; margin: 0 auto 22px; line-height: 1.7; }

.gen-hero .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.gen-sample { max-width: 1100px; margin: 0 auto 18px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--bg-soft); position: relative; animation: cardIn .6s .08s ease both; transition: transform .3s, box-shadow .3s; }

.gen-sample::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(120% 80% at 50% 0%, rgba(124,92,255,.18), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }

.gen-sample:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.gen-sample:hover::after { opacity: 1; }

.gen-sample svg, .gen-sample img { width: 100%; height: 100%; display: block; object-fit: cover; }

.swatch-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto 26px; }

.swatch { height: 84px; border-radius: 14px; border: 1px solid var(--border); cursor: pointer; transition: transform .18s, box-shadow .18s; }

.swatch:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.feat-list { max-width: 1100px; margin: 0 auto 26px; display: grid; gap: 10px; }

.feat-list li { list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; color: var(--text-soft); font-size: .92rem; position: relative; padding-left: 38px; }

.feat-list li::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 4px; background: var(--accent-grad); }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }

.rel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 10px; text-align: center; color: var(--text); text-decoration: none; transition: .18s; overflow: hidden; }

.rel-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow); }

.rel-thumb { display: block; height: 64px; border-radius: 10px; margin-bottom: 9px; transition: transform .25s; }

.rel-card:hover .rel-thumb { transform: scale(1.05); }

/* 单个长单词（Sunburst / Rhodochrosite）在定宽卡片里放不下又不换行，

   字间距拉满时会溢出 5px。允许在任意处断行，避免撑破卡片。 */

.rel-name { display: block; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }

/* 显式锁定字号/行高：这些区块标题已从 <p> 升级为 <h2>（详情页大纲需要真实标题），

   若不写死，<h2> 的 UA 默认 1.5em 会把标题撑大、破坏原排版。1rem/1.6 即升级前的实测值。 */

.section-sub { text-align: center; color: var(--text-soft); margin: 6px 0 14px; font-weight: 600; letter-spacing: .5px; font-size: 1rem; line-height: 1.6; }

/* ---------- 内容页（FAQ/关于/隐私/条款/教程/生成器/模板） ---------- */

.page-hero { text-align: center; padding: 46px 0 10px; }

.page-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 10px; }

.page-hero p { color: var(--text-soft); max-width: 680px; margin: 0 auto; line-height: 1.7; }

.content-section { max-width: 860px; margin: 0 auto 14px; }

.content-section h2 { font-size: 1.3rem; margin: 30px 0 10px; display: flex; align-items: center; gap: 10px; }

.content-section h2::before { content: ''; width: 6px; height: 22px; border-radius: 3px; background: var(--accent-grad); }

.content-section p { color: var(--text-soft); line-height: 1.85; margin-bottom: 10px; }

.back-link-row { text-align: center; margin: 26px 0 10px; }

.back-link-row a { color: var(--brand-2); text-decoration: none; font-weight: 600; }

/* FAQ 列表（内容页） */

.faq-list2 { max-width: 860px; margin: 18px auto 0; display: grid; gap: 10px; }

.faq-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }

.faq-card h2, .faq-card h3 { font-size: 1.02rem; margin-bottom: 6px; color: var(--text); }

.faq-card p { color: var(--text-soft); line-height: 1.8; margin: 0; }

/* 教程步骤 */

.steps { max-width: 860px; margin: 18px auto 0; display: grid; gap: 14px; }

.step { display: flex; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; align-items: flex-start; }

.step .num { flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--accent-grad-solid); color: #fff; display: grid; place-items: center; font-weight: 800; }

.step h2, .step h3 { font-size: 1.05rem; margin-bottom: 4px; }

.step p { color: var(--text-soft); margin: 0; line-height: 1.7; }

.tip-box { max-width: 860px; margin: 18px auto; background: rgba(124,92,255,.1); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px; padding: 14px 16px; color: var(--text-soft); }

/* 团队 */

.team-grid { max-width: 920px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }

.team-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-align: center; transition: .18s; }

.team-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

/* 4.5rem = 72px @16px。用 rem 是为了让圆圈随字号一起放大：

   固定 72px 时字号 ×2 的「LM」首字母会撑出 13px 被圆角裁掉。 */

.team-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 0 auto 12px; background: var(--accent-grad-solid); display: grid; place-items: center; color: #fff; font-size: 1.5rem; font-weight: 800; }

.team-card h2, .team-card h3 { margin-bottom: 4px; }

.team-card span { color: var(--text-soft); font-size: .9rem; }

.site-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-2); text-decoration: none; font-weight: 600; }

.gens-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }

.gen-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text); transition: .18s; display: flex; flex-direction: column; }

/* R64 hover 反馈：去掉 brand 色描边（浅色主题下会在两侧出现刺眼的亮竖线），

   改用略深灰边 + 柔和阴影承担"提升感"，整体克制不跳眼。 */

.gen-tile:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 12px 32px rgba(20, 24, 41, .1); }

.gen-tile .thumb { aspect-ratio: 16/10; background: var(--bg-soft); display: grid; place-items: center; }

.gen-tile .thumb svg, .gen-tile .thumb img { width: 100%; height: 100%; object-fit: cover; }

.gen-tile .meta { padding: 12px 14px; }

/* 名称与分类徽标并排，flex 子项默认不能换行，字间距拉满时会被卡片裁掉 28px。

   允许换行（徽标掉到下一行）比裁掉好。 */

.gen-tile .meta h2, .gen-tile .meta h3 { font-size: .98rem; margin-bottom: 2px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; }

.gen-tile .meta .cat { font-size: .74rem; color: #fff; background: var(--brand-solid); padding: 2px 9px; border-radius: 999px; }

.gen-tile .meta p { color: var(--text-soft); font-size: .82rem; margin: 0; }

/* 广告位 */

.ad-slot { max-width: 1040px; margin: 26px auto; text-align: center; }

.ad-label { font-size: .72rem; color: var(--text-soft); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }

.ad-box { min-height: 100px; border: 1px dashed var(--border); border-radius: 12px; display: grid; place-items: center; color: var(--text-soft); background: var(--bg-soft); font-size: .9rem; padding: 14px; }

.adsbygoogle { display: block; }

@media (max-width: 720px) { .gens-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .team-grid { grid-template-columns: repeat(2, 1fr); } }



/* 编辑面板：叠加/文字项分组卡片 + 配色/边框取色器 + 控件分隔 */

.ctrl.overlay-item { position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 14px; background: var(--bg-soft); margin-bottom: 12px; }

.ctrl.overlay-item .overlay-row { margin-bottom: 4px; }

.deco-color, .fr-color { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); cursor: pointer; }

.ctrl + .ctrl { border-top: 1px solid var(--border); padding-top: 16px; }





/* 内容页美化（关于/教程/FAQ/聚合/模板） */

.page-hero { animation: cardIn .5s ease both; }

.page-hero h1 { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.team-card { box-shadow: var(--shadow); position: relative; }

.team-card::after { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px; background: var(--accent-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; }

.team-card:hover::after { opacity: .6; }

.team-avatar { box-shadow: 0 0 0 3px rgba(124,92,255,.25); }

.val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 8px; }

.val-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }

.val-card h2, .val-card h3 { font-size: 1rem; margin-bottom: 5px; }

.val-card p { color: var(--text-soft); font-size: .86rem; line-height: 1.6; margin: 0; }

.search-box { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 18px auto 4px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-soft); }

.search-box svg { width: 18px; height: 18px; flex: 0 0 auto; }

.search-box input { flex: 1; border: none; background: transparent; color: var(--text); font-size: .92rem; font-family: var(--font); outline: none; }

.search-box input::placeholder { color: var(--text-dim); }

.faq-card { transition: .18s; }

.faq-card h2, .faq-card h3 { position: relative; padding-left: 22px; }

.faq-card h2::before, .faq-card h3::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px 4px 4px 0; background: var(--accent-grad); opacity: .85; }

.step { transition: .18s; }

.step:hover { border-color: var(--brand); transform: translateX(4px); }

.step .num { transition: transform .2s; }

.step:hover .num { transform: scale(1.08); }

.more-play { display: block; max-width: 860px; margin: 18px auto; text-align: center; padding: 14px; border: 1px dashed var(--brand); border-radius: 12px; color: var(--brand); text-decoration: none; font-weight: 600; transition: .18s; }

.more-play:hover { background: rgba(124,92,255,.1); }

.gen-tile .thumb { overflow: hidden; }

.gen-tile .thumb svg { transition: transform .3s; }

.gen-tile:hover .thumb svg { transform: scale(1.06); }

/* 之前在 line 1215-1216 有个重复的 .gen-tile 块给所有卡静态加 box-shadow: var(--shadow)、

   hover 换 var(--shadow-lg) —— 在浅色背景上阴影本身就发亮，再加 4px translateY

   把阴影边缘露出来，看起来就是"两侧亮竖线"。R64 已把 hover 改成更克制的

   border-color: var(--border-strong) + 0 12px 32px 阴影（见上面 line 1164），

   这个重复块删掉。 */



/* 生成器落地页：常用尺寸快捷选择 */

/* 轨道最小宽用 rem 而非 px：108px 的坑位在字号 ×2 时放不下「1920×1080 / Full HD」，

   每个 chip 会被裁掉约 20px。写成 6.75rem 后坑位随文字一起放大（列数相应减少）。 */

.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: 10px; max-width: 1100px; margin: 0 auto 26px; }

.size-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); text-decoration: none; font-size: .82rem; transition: .18s; }

.size-chip b { font-size: .92rem; font-weight: 700; }

.size-chip span { color: var(--text-soft); font-size: .76rem; }

.size-chip:hover { border-color: var(--brand); background: var(--bg-card-hover); transform: translateY(-2px); box-shadow: var(--shadow); }



/* ---------- 生成器图库（R34：合并所有生成器选择入口到工作台；R38：移到左侧边栏） ---------- */

/* R157 两栏限高 + 各自内部滚动条（同 .right-col）：栏头固定，仅网格滚动 */

.gen-gallery { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); animation: fadeIn .4s ease both; display: flex; flex-direction: column; position: relative; max-height: calc(100vh - 88px); overflow: hidden; }

.gen-gallery.collapsed { display: none; }

.gen-gallery .gallery-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* R158 撤 scrollbar-width/scrollbar-color（同 .panel-panes 处的注释）：

   Chromium 121+ 读到标准属性就顶掉 ::-webkit-scrollbar 细样式、回大箭头经典滚动条 */

.gen-gallery .gallery-grid::-webkit-scrollbar { width: 8px; }

.gen-gallery .gallery-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.gallery-head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }

/* 侧栏是固定 300px 宽，字号 ×2 时「Generator Gallery / 生成器图库」一行放不下，

   会把 .gen-gallery 撑出 141px。允许换行 + 给文字 min-width:0（否则 flex 子项

   压不到 min-content 以下，永远不换行）。 */

.gallery-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.05rem; font-weight: 800; }

.gallery-title span { min-width: 0; }

.gallery-title svg { width: 20px; height: 20px; color: var(--brand-2); }

.gallery-title span { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.gallery-search { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); color: var(--text-soft); min-width: 0; width: 100%; }

.gallery-search svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* min-width:0 必须有：<input> 的固有宽度按 size 属性算（约 20 字符），

   flex 子项默认 min-width:auto 压不下去。字号 ×2 时它会涨到 342px，

   而侧栏只有 220px，把 .gallery-head 撑出 159px。 */

.gallery-search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: .92rem; font-family: var(--font); outline: none; }

.gallery-search input::placeholder { color: var(--text-dim); }

.gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.gallery-tabs .gtab { padding: 6px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-soft); cursor: pointer; font-size: .9rem; transition: .15s; }

/* R168 右侧面板「收藏」tab：设计稿/生成器切换 + 卡片网格 */

.panel-fav-tabs { display: flex; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-soft); }

.panel-fav-tabs .pfav-tab { flex: 1 1 0; border: 0; padding: 7px 0; background: transparent; color: var(--text-soft); cursor: pointer; font-size: .84rem; font-weight: 600; font-family: var(--font); transition: .15s; }

.panel-fav-tabs .pfav-tab + .pfav-tab { border-left: 1px solid var(--border); }

.panel-fav-tabs .pfav-tab.active { background: var(--accent-grad-solid); color: #fff; }

.panel-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }

.panel-fav-grid .fav-design-card { position: relative; }

/* 设计卡标签两行换行（继承的单行省略号会截断"名称 · 尺寸"） */

.gen-thumb.fav-design-card .gt-label { white-space: normal; overflow: hidden; text-overflow: clip;

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

  word-break: break-all; line-height: 1.35; padding: 5px 6px; }

.fav-design-del { position: absolute; top: 4px; right: 6px; z-index: 3; width: 18px; height: 18px;

  display: grid; place-items: center; border-radius: 50%; font-size: 13px; line-height: 1;

  background: rgba(20, 24, 41, .62); color: #fff; cursor: pointer; opacity: .55; transition: .15s; }

.fav-design-card:hover .fav-design-del { opacity: 1; }


.gallery-fav-design .fav-design-del { position: absolute; top: 4px; right: 6px; z-index: 3; width: 18px; height: 18px;

  display: grid; place-items: center; border-radius: 50%; font-size: 13px; line-height: 1;

  background: rgba(20, 24, 41, .62); color: #fff; cursor: pointer; opacity: .55; transition: .15s; }

.gallery-fav-design .fav-design-card:hover .fav-design-del { opacity: 1; }

.gallery-fav-design-empty { grid-column: 1 / -1; font-size: .8rem; color: var(--text-dim);

  border: 1px dashed var(--border); border-radius: 10px; padding: 12px; text-align: center; }

.gallery-tabs .gtab:hover { color: var(--text); border-color: var(--border-strong); }

.gallery-tabs .gtab.active { color: #fff; border-color: var(--brand-solid); background: var(--brand-solid); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; max-height: none; overflow: visible; padding: 4px; }

.gallery-grid::-webkit-scrollbar { width: 8px; }

.gallery-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.gen-thumb { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-soft); cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; text-align: left; color: var(--text); flex-shrink: 0; min-height: 96px; }

.gen-thumb:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }

.gen-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,92,255,.4); }

.gen-thumb .gt-cv { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; object-fit: cover; background: #0b0f1a; flex-shrink: 0; }

/* 长名（Rhodochrosite / Aurora Night 等）此前是硬裁：名字是单个长词无法换行，

   被 .gen-thumb 的 overflow:hidden 直接切掉尾巴，且没有任何省略提示。

   改成单行省略号，同时让所有图库卡片高度一致（不再因换行而高低不齐）。 */

.gen-thumb .gt-label { display: block; padding: 7px 10px; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 收藏星标 */

.gen-thumb .gt-fav {

  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;

  display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%;

  background: rgba(11, 15, 26, .55); color: #fff; cursor: pointer;

  opacity: 0; transition: opacity .18s, transform .18s, background .18s, color .18s;

  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);

  -webkit-user-select: none; user-select: none;

  z-index: 2; pointer-events: auto;   /* 盖在 ::after 遮罩之上，确保可点击 */

}

.gen-thumb:hover .gt-fav { opacity: 1; }

.gen-thumb .gt-fav svg { width: 14px; height: 14px; color: rgba(255,255,255,.85); transition: color .18s, transform .18s; pointer-events: none; }

.gen-thumb .gt-fav:hover { background: rgba(124, 92, 255, .9); transform: scale(1.08); }

.gen-thumb .gt-fav.is-fav { opacity: 1; color: #ffb02e; }

.gen-thumb .gt-fav.is-fav svg { color: #ffb02e; transform: scale(1.05); }

.gen-thumb .gt-fav.is-fav:hover { background: rgba(255, 176, 46, .95); }

.gen-thumb .gt-fav.is-fav:hover svg { color: #fff; }

.gen-thumb .gt-fav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,92,255,.45); }



/* 特性卡片内容左对齐 */

.feature { text-align: left; }

.feature .ficon { margin-left: 0; margin-right: 0; }



/* FAQ 区块左对齐 */

.faq-list2 { text-align: left; }

.faq-card { text-align: left; }



/* 生成器聚合页分页 */

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 28px auto 8px; }

.page-btn { min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: .95rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: .18s; }

.page-btn:hover { border-color: var(--brand); transform: translateY(-2px); }

.page-btn.active { background: var(--accent-grad-solid); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(124,92,255,.35); }



/* 生成器总览页：tab 分类栏（复用 .cat-chips 胶囊样式） */

#genTabs { justify-content: center; margin: 14px 0 22px; }

@media (max-width: 720px) { #genTabs { margin: 10px 0 16px; } }

@media (max-width: 720px) {

}



/* 特性卡片化：更现代、统一的视觉观感 */

.features-grid .feature { padding: 26px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); text-align: left; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }

.features-grid .feature:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }

.features-grid .feature .ficon { width: 52px; height: 52px; margin: 0; border-radius: 14px; display: grid; place-items: center; background: var(--accent-grad-solid); color: #fff; box-shadow: 0 8px 22px rgba(124,92,255,.35); grid-column: 1; grid-row: 1; }

.features-grid .feature .ficon svg { width: 26px; height: 26px; }

.features-grid .feature h3 { grid-column: 2; grid-row: 1; margin: 0; }



/* 键盘焦点品牌色光环（可达性） */

.btn:focus-visible, .icon-btn:focus-visible, .cat-chip:focus-visible, .gen-card:focus-visible, .page-btn:focus-visible, .show-link:focus-visible {

  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px;

}



/* 移动端：参数面板取消限高内部滚动，跟随页面自然滚动 */

@media (max-width: 920px) { .panel { max-height: none !important; overflow: visible; } }



/* 生成器卡片描述截断，避免长文案撑破布局 */

.gen-card-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }









/* ===== 观感细节：滚动条 / 选中色 / 首屏光晕 ===== */

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }

::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* 根节点的滚动条配色已移到文件末尾的 Firefox 专属块 */



::selection { background: rgba(124, 92, 255, .35); color: var(--text); }



/* 首屏光晕呼吸（注意保留原有的 translateX(-50%) 居中） */

@keyframes heroGlow {

  0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }

  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }

}

.hero::before { animation: heroGlow 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }



/* ---------------- 代码预览面板（SVG / CSS 源码查看 / 复制 / 下载） ---------------- */

.code-modal { position: fixed; inset: 0; background: rgba(8, 10, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 1500; padding: 24px; }

.code-modal.show { display: flex; animation: cmFade .2s ease-out; }

@keyframes cmFade { from { opacity: 0 } to { opacity: 1 } }

/* 固定高度（而非 max-height）：这样 textarea 的 flex:1 才能真正撑开代码区 */

.code-panel { width: min(880px, 100%); height: min(74vh, 620px); background: var(--bg-soft, #1a1d2e); color: var(--text, #e9e9f1); border: 1px solid var(--border-strong, rgba(255,255,255,.12)); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }

.code-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); gap: 12px; min-height: 0; }

.code-title { font-weight: 600; font-size: .96rem; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }

.code-title > svg { width: 18px; height: 18px; flex: none; }

.code-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.code-title .badge { font-size: .68rem; background: var(--brand, #7c5cff); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 500; opacity: .85; flex: none; white-space: nowrap; }

.code-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.12)); background: transparent; color: var(--text, #e9e9f1); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; flex: none; }

.code-close:hover { background: rgba(255,255,255,.08); }

.code-tabs { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(0,0,0,.12); }

.code-tab { padding: 10px 16px; font-size: .9rem; font-weight: 500; color: var(--text-mute, #a0a4b8); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.code-tab:hover { color: var(--text, #e9e9f1); }

.code-tab.active { color: var(--text, #e9e9f1); border-bottom-color: var(--brand, #7c5cff); }

.code-tab .size { font-size: .72rem; opacity: .65; font-weight: 400; padding: 1px 7px; background: rgba(255,255,255,.06); border-radius: 999px; }

.code-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.code-pane { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }

.code-pane.active { display: flex; }

.code-pane textarea { flex: 1; min-height: 0; width: 100%; border: 0; outline: 0; padding: 14px 18px; background: transparent; color: var(--text, #e9e9f1); font: 12.5px/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; resize: none; tab-size: 2; overflow: auto; }

.code-pane textarea::selection { background: rgba(124,92,255,.35); }

.code-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(0,0,0,.12); }

.code-foot .btn { padding: 7px 14px; font-size: .85rem; }

.code-foot .btn svg { width: 15px; height: 15px; }



/* ================= 触屏适配（无 hover / 粗指针设备） =================

   站内有一批交互元素写在 :hover 里才显现：

     .gen-thumb .gt-fav     生成器画廊的收藏星标（JS 绑定了点击）

     .color-chip .rm        调色盘里删除某个颜色的 ✕（JS 绑定了点击）

     .gen-card .go          卡片右上角的进入箭头（纯装饰，卡片本身是 <a>）

   触屏设备根本不产生 hover，前两者会永远停在 opacity:0 ——

   手机上「无法收藏生成器」「无法删除已添加的颜色」是功能缺失，不是观感问题。

   这里统一改为常显；第三项虽是装饰，但它承担「可进入」的视觉提示，一并常显。

   同时把几处小于 24px 的命中热区补到可点尺寸（WCAG 2.5.8 AA 下限 24×24）。 */

@media (hover: none), (pointer: coarse) {

  .gen-thumb .gt-fav { opacity: 1; width: 32px; height: 32px; top: 4px; right: 4px; }

  .gen-thumb .gt-fav svg { width: 16px; height: 16px; }

  /* 色卡：40px 太小，✕ 只有约 12×14。触屏下把整块放大到 48px，

     ✕ 放到 22×22 并加半透明底，让「改色」和「删色」两块热区拉开距离，

     避免想开取色器却点中删除。 */

  .color-chip, .add-color { width: 48px; height: 48px; }

  .color-chip .rm {

    opacity: 1; width: 22px; height: 22px; top: 0; right: 0;

    display: grid; place-items: center;

    background: rgba(0, 0, 0, .42); border-radius: 0 9px 0 9px;

  }

  .gen-card .go { opacity: 1; transform: none; }

  /* 滑块拖拽把手放大到 24px，命中带同步到 30px */

  input[type="range"] { height: 30px; }

  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }

  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }

  /* 分类标签 33px → 38px */

  .gallery-tabs .gtab { min-height: 38px; display: inline-flex; align-items: center; }

  /* 这两处文字链接原本只有 21px 高，低于 24px 的 AA 下限 */

  .more-link, .footer-email { display: inline-block; padding: 6px 0; }

  .back-link-row a { display: inline-block; padding: 6px 0; }

  /* 页脚链接 26px → 32px；同时把列间距 11px 收到 5px，列表总高不变 */

  .footer-col ul { gap: 5px; }

  .footer-col a { min-height: 32px; }

  /* 搜索框：外层胶囊 32px，但 input 本身只有 20px 高，

     点到胶囊的上下留白不会聚焦。让 input 自己撑满整个胶囊。 */

  .gallery-search { padding-top: 4px; padding-bottom: 4px; }

  .gallery-search input { padding: 6px 0; }

}



/* =========================================================================

 * 键盘焦点可见性（无障碍）

 * 前面若干基础样式为了视觉统一写了无条件的 outline: none ——

 * 滑块(input[type=range])、数字输入(.num / #cw / #ch)、搜索框(.search-box input /

 * .gallery-search input)。这些规则把键盘焦点环一并抹掉了：

 * 实测 Tab 到滑块、宽高输入框、画廊搜索框时 outline=none 且无 box-shadow，

 * 键盘用户完全看不出焦点在哪。

 * 这里放在文件末尾（同特异性后置优先），用 :focus-visible 单独补回焦点环，

 * 只在键盘操作时出现，鼠标点击不受影响。

 * ========================================================================= */

input:focus-visible, select:focus-visible, textarea:focus-visible {

  outline: 2px solid var(--brand);

  outline-offset: 2px;

  border-radius: 8px;

}

input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 999px; }

input[type="color"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }



/* =========================================================================

 * 滚动条配色：只在「不支持 ::-webkit-scrollbar」的内核（Firefox）启用

 * Firefox 完全不认 ::-webkit-scrollbar，深色主题下会露出系统默认浅灰滚动条，

 * 必须用标准属性 scrollbar-color / scrollbar-width 补。

 * 但 scrollbar-color 在 Chromium 121+ 也支持，且一旦生效会**顶掉**

 * ::-webkit-scrollbar 那套自定义样式（实测 Chromium 读到具体颜色而不是 auto，

 * 于是丢掉了 thumb 的 2px 描边和 hover 变品牌色的效果）。

 * 所以这里用 @supports not selector(...) 把它圈在 Firefox 里。

 * scrollbar-color 只吃纯色（不支持渐变），取主题色近似即可。

 * ========================================================================= */

@supports not selector(::-webkit-scrollbar) {

  html { scrollbar-color: var(--border-strong) var(--bg); scrollbar-width: thin; }

  .panel, .panel-panes, .gallery-grid {

    scrollbar-width: thin;

    scrollbar-color: var(--border-strong) var(--bg);

  }

}



/* =========================================================================

 * 已知限制（R40 实测，暂不修，改之前先读这段）

 *

 * 1) 200% 文字放大 + 最大字间距 的页头溢出 —— R41 已修，不再是不修的限制。

 *    修法不是纯 CSS，而是 theme-init.js 的「页头溢出守卫」：确认 .nav 真的溢出

 *    时才加 .nav-overflow 放开换行（正常状态永不加，所以不影响常规布局）。

 *    纯 CSS 做不到：@media 断点会在 Chromium 1024~1100px 正常字号下提前折行

 *    （页头 67→87px），且阈值随引擎字体度量漂移。详见上面 .nav-overflow 处的注释。

 *    代价：那种极端情况下页头会长到 ~205px（内容全部保留、不裁切）。

 *

 * 2) 画布宽高数字输入框（#cw / #ch）在最大字间距下，数值会被裁掉约 17px。

 *    <input> 的左右 padding 是固定 px、字号却是 rem，文字放大后内容区不够。

 *    影响很小：数值可编辑、聚焦后可横向滚动，且 WCAG 1.4.12 针对的是文本块。

 * ========================================================================= */



/* R147 单色控件统一样式 → R148 精修：

   1) appearance:none + swatch 伪元素清零 —— 干掉浏览器原生色块的灰底/白内框，

      让色块就是一块干净的圆角颜色（Chromium/Firefox 双覆盖）；

   2) 行内三元素（标签/色块/hex）统一 30px 高、flex 居中，消除 3~5px 的高度错位。 */

.color-swatch, .fr-color, .deco-color {

  -webkit-appearance: none; appearance: none;

  width: 40px; height: 30px; padding: 0;

  border: 1px solid var(--border); border-radius: 8px;

  background: var(--bg-soft); cursor: pointer; flex: 0 0 auto;

  transition: border-color .15s, box-shadow .15s;

}

.color-swatch::-webkit-color-swatch-wrapper,

.fr-color::-webkit-color-swatch-wrapper,

.deco-color::-webkit-color-swatch-wrapper { padding: 0; border: none; }

.color-swatch::-webkit-color-swatch,

.fr-color::-webkit-color-swatch,

.deco-color::-webkit-color-swatch { border: none; border-radius: 7px; }

.color-swatch::-moz-color-swatch,

.fr-color::-moz-color-swatch,

.deco-color::-moz-color-swatch { border: none; border-radius: 7px; }

.color-swatch:hover, .fr-color:hover, .deco-color:hover { border-color: var(--brand); }

.color-swatch:focus-visible, .fr-color:focus-visible, .deco-color:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ctrl-row > .val.color-hex,

.frame-row > .val.fr-color-hex,

.deco-row > .val.color-hex {

  width: 7.5ch; height: 30px; box-sizing: border-box; padding: 0 8px;

  text-align: center;

}



/* R152 修配色卡色块显示：

   ① .pal-swatches i（类+元素，特异性更高）把 .pal-fit-mark 的 position:absolute 覆盖成

      relative，适配圆点变成一支实心品牌色色块挤进色块条——卡片多出一格颜色；

   ② ::before 的 15% pal-bg 叠加让色块显示的不是纯配色色值。两处一并修正。 */

.pal-swatches i.pal-fit-mark {

  position: absolute; top: 5px; right: 5px;

  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;

}

.pal-swatches::before { display: none; }



/* R153 落地页美化：配色灵感色块 hover 显示色码 + 微抬升；功能列表 hover 反馈 */

.swatch { position: relative; }

.swatch::after {

  content: attr(title); position: absolute; left: 8px; bottom: 8px;

  font-size: .74rem; font-weight: 600; color: #fff;

  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);

  opacity: 0; transition: opacity .15s; pointer-events: none;

}

.swatch:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); }

.swatch:hover::after { opacity: 1; }

.feat-list li { transition: border-color .15s, transform .15s; }

.feat-list li:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* ==== 0923 恢复合并：截断版 style.css 中晚于恢复快照的 4 条微调，保留为覆盖块 ==== */
.preview-wrap { margin-bottom: 26px; }
.right-col { margin-top: 18px; }
.code-modal { position: fixed; inset: 0; background: var(--mask); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 1500; padding: 24px; }
.ctrl-row > .val.color-hex,
.frame-row > .val.fr-color-hex,
.deco-row > .val.color-hex {
  width: 9.5ch; height: 30px; box-sizing: border-box; padding: 0 10px;
  text-align: center;
}

/* ==== R141 教程页步骤演示（step-demo 系列此前无任何规则，演示图溢出卡片） ==== */
.step-demo { margin-left: auto; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: flex-end; max-width: 380px; }
.step-demo-item { display: flex; flex-direction: column; gap: 4px; width: 150px; }
.step-demo-item canvas { width: 150px; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow); background: #0b0f1a; }
.step-demo-cap { font-size: .72rem; font-weight: 600; color: var(--text-dim); text-align: center; line-height: 1.3; }
.step-demo-slider { display: flex; align-items: center; height: 8px; border-radius: 99px; background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; margin-top: 2px; }
.step-demo-slider i { display: block; height: 100%; border-radius: 99px; background: var(--accent-grad-solid); }
@media (max-width: 720px) { .step-demo { margin-left: 0; width: 100%; max-width: none; justify-content: flex-start; } }

/* ==== R142 美化增强层（末尾追加，双主题自适应，全部走变量） ==== */
/* 1) 画廊卡悬停：品牌色辉光 + 顶部渐变金线扫出 */
.gen-tile { position: relative; }
.gen-tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-grad-solid); opacity: 0; transform: scaleX(.3); transform-origin: left; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.3,1); pointer-events: none; z-index: 1; }
.gen-tile:hover::after, .gen-tile:focus-visible::after { opacity: 1; transform: scaleX(1); }
.gen-tile:hover { box-shadow: 0 14px 38px rgba(109, 69, 245, .18), 0 6px 16px rgba(34, 211, 238, .12); }
/* 2) 内容页页头氛围光：紫青双色径向晕染，替代平铺纯色 */
.page-hero { position: relative; }
.page-hero::before { content: ""; position: absolute; left: 50%; top: -40px; width: 100vw; height: 260px; transform: translateX(-50%); background: radial-gradient(ellipse 55% 90% at 32% 40%, rgba(143, 116, 255, .16), transparent 70%), radial-gradient(ellipse 55% 90% at 70% 55%, rgba(34, 211, 238, .12), transparent 70%); pointer-events: none; z-index: -1; }
/* 3) 搜索框聚焦：品牌光环 */
.gens-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
/* 4) 页脚顶部金线 */
.site-footer::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 116, 255, .5), rgba(34, 211, 238, .5), transparent); }
/* 5) 分类胶囊激活态微浮起 */
.cat-chip.active:hover { transform: translateY(-1px); }
/* 6) 收藏面板计数与操作行间距（R142 补零头） */
.panel-fav-count { font-size: .78rem; font-weight: 600; color: var(--text-dim); margin: 2px 0 8px; }
.panel-fav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .gen-tile::after { transition: none; } }
/* ==== R144 统一确认弹窗（UI365）==== */
.ui-dialog-box { width: min(440px, 100%); }
.ui-dialog-msg { font-size: .95rem; line-height: 1.75; color: var(--text); margin: 0 0 20px; }
.ui-dialog-btns { display: flex; gap: 10px; justify-content: flex-end; }
.ui-dialog-btns .btn { min-width: 92px; justify-content: center; }

/* ==== R146 编辑器顶部间距 ==== */
.editor { margin-top: 18px; }

/* ==== R146 新组件：hero 双按钮 / 关于页联系卡 ==== */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-bottom: 34px; }
.btn-secondary { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; white-space: nowrap; border-radius: 14px; border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); font-size: 1.02rem; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; font-family: var(--font); }
.btn-secondary svg { width: 20px; height: 20px; flex: none; }
.btn-secondary:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--brand) 16%, transparent); box-shadow: 0 10px 26px rgba(143, 116, 255, .22); }
.about-contact-card { max-width: 640px; margin: 26px auto 14px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; padding: 18px 26px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.about-sep { width: 1px; height: 22px; background: var(--border-strong); }
.about-mail { color: var(--text-soft); font-size: .95rem; }
.footer-email { cursor: pointer; }
@media (max-width: 560px) { .about-sep { display: none; } }
/* ==== R148 移动端画布工具条：7 个胶囊按钮在 375px 下不换行，右侧 分享/收藏 溢出被裁（实测 right=717px） ==== */
@media (max-width: 640px) {
  .preview-fab-bar { flex-wrap: wrap; gap: 8px 10px; }
  .preview-fab-buttons { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .preview-fab-buttons .fab-btn { padding: 6px 10px; font-size: .78rem; }
}
/* ==== R150 画布四周留白 ==== */
/* fitPreviewSize 的 pad=20 本意就是配 .preview-stage 左右各 10px padding（注释可考），
   后来 padding 被删、画布顶死边框。恢复 10px：JS 扣减恰好匹配，无拉伸风险；
   全屏模式 stage 变 fixed inset:0，padding 同样成立。 */
.preview-stage { padding: 10px; }

/* ==== R152 历史面板美化：信息行 + 缩略图质感 ==== */
.hist-meta { display: block; font-size: .68rem; color: var(--text-dim); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-thumb { border-radius: 8px; box-shadow: 0 3px 10px rgba(20, 24, 41, .12); }
.hist-cell { padding: 7px 7px 8px; }
@media (max-width: 640px) { .hist-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; } }
/* ==== R153 未设圆角时预览保持直角 ==== */
/* square-corners 类自 R182 起由 editor.js 按 frame.radius 切换，但 CSS 从无对应规则（空开关）。 */
.preview-stage.square-corners { border-radius: 0; }
.preview-stage.square-corners::before { border-radius: 0; }
.preview-stage.square-corners canvas, .preview-stage.square-corners svg { border-radius: 0; }


/* ==== R155 三栏顶边对齐 ==== */
/* 宽屏三栏并排时右栏不应比左/中栏低 18px（旧微调只在堆叠布局当间距用）。
   媒体查询不加特异性：这里在追加层内用 min-width 显式重declare。 */
@media (min-width: 1101px) { .right-col { margin-top: 0; } }


/* ==== R160 页脚构建戳 ==== */

/* ===== R164 导出设置：倍数+质量合并一行 ===== */
.ctrl-sub.ex-settings .ex-scale-q { flex-wrap: wrap; gap: 5px; }
.ctrl-sub.ex-settings .ex-scale-q > label { font-size: .8rem; }
.ctrl-sub.ex-settings .ex-scale-q select { flex: 0 0 auto; width: auto; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); padding: 4px 4px; font-size: .75rem; font-family: var(--font); }
.ctrl-sub.ex-settings .ex-scale-q .ex-q { flex: 1 1 36px; min-width: 36px; }
.ctrl-sub.ex-settings .ex-scale-q .val { width: 4ch; padding: 3px 15px 3px 5px; font-size: .82rem; }
.ctrl-sub.ex-settings .ex-scale-q .val-unit { font-size: .78rem; margin-left: 0; }

/* ===== R165 配色卡类名上色（由 _r165_palsw.cjs 从 editor.js PALETTES 生成，勿手改）BEGIN ===== */
.sw-00d9f5 { background: #00d9f5; }
.sw-00f5a0 { background: #00f5a0; }
.sw-0ba360 { background: #0ba360; }
.sw-0c4a6e { background: #0c4a6e; }
.sw-0ea5e9 { background: #0ea5e9; }
.sw-0f2027 { background: #0f2027; }
.sw-1e3a8a { background: #1e3a8a; }
.sw-203a43 { background: #203a43; }
.sw-22d3ee { background: #22d3ee; }
.sw-2575fc { background: #2575fc; }
.sw-2c5364 { background: #2c5364; }
.sw-38f9d7 { background: #38f9d7; }
.sw-3a1c71 { background: #3a1c71; }
.sw-434343 { background: #434343; }
.sw-43e97b { background: #43e97b; }
.sw-5b6c8c { background: #5b6c8c; }
.sw-6a11cb { background: #6a11cb; }
.sw-6c5ce7 { background: #6c5ce7; }
.sw-747474 { background: #747474; }
.sw-7a9b6e { background: #7a9b6e; }
.sw-7b2ff7 { background: #7b2ff7; }
.sw-7f7fd5 { background: #7f7fd5; }
.sw-86a8e7 { background: #86a8e7; }
.sw-88d8a3 { background: #88d8a3; }
.sw-8a5a44 { background: #8a5a44; }
.sw-8a9bb4 { background: #8a9bb4; }
.sw-8e44ad { background: #8e44ad; }
.sw-8ec5fc { background: #8ec5fc; }
.sw-91eae4 { background: #91eae4; }
.sw-9b59b6 { background: #9b59b6; }
.sw-a1c4fd { background: #a1c4fd; }
.sw-a855f7 { background: #a855f7; }
.sw-a85d2c { background: #a85d2c; }
.sw-a8c0a0 { background: #a8c0a0; }
.sw-a8e6cf { background: #a8e6cf; }
.sw-a8edea { background: #a8edea; }
.sw-bdbdbd { background: #bdbdbd; }
.sw-c2e9fb { background: #c2e9fb; }
.sw-c79081 { background: #c79081; }
.sw-c9b27e { background: #c9b27e; }
.sw-cdb4db { background: #cdb4db; }
.sw-cfd9df { background: #cfd9df; }
.sw-d1913c { background: #d1913c; }
.sw-d4fc79 { background: #d4fc79; }
.sw-d6e4c1 { background: #d6e4c1; }
.sw-dcedc1 { background: #dcedc1; }
.sw-dfa579 { background: #dfa579; }
.sw-e0c3fc { background: #e0c3fc; }
.sw-e8d5b7 { background: #e8d5b7; }
.sw-f093fb { background: #f093fb; }
.sw-f12711 { background: #f12711; }
.sw-f5576c { background: #f5576c; }
.sw-f5af19 { background: #f5af19; }
.sw-f7971e { background: #f7971e; }
.sw-f7e7ce { background: #f7e7ce; }
.sw-fad0c4 { background: #fad0c4; }
.sw-fbc2eb { background: #fbc2eb; }
.sw-fcb69f { background: #fcb69f; }
.sw-fed6e3 { background: #fed6e3; }
.sw-ff5c8a { background: #ff5c8a; }
.sw-ff5f6d { background: #ff5f6d; }
.sw-ff6a00 { background: #ff6a00; }
.sw-ff6a88 { background: #ff6a88; }
.sw-ff8177 { background: #ff8177; }
.sw-ff99ac { background: #ff99ac; }
.sw-ff9a9e { background: #ff9a9e; }
.sw-ffd166 { background: #ffd166; }
.sw-ffd194 { background: #ffd194; }
.sw-ffd1ff { background: #ffd1ff; }
.sw-ffd200 { background: #ffd200; }
.sw-ffecd2 { background: #ffecd2; }
.pb-040a10 { --pal-bg: #040a10; }
.pb-04121f { --pal-bg: #04121f; }
.pb-04122b { --pal-bg: #04122b; }
.pb-06231a { --pal-bg: #06231a; }
.pb-07061a { --pal-bg: #07061a; }
.pb-0a0118 { --pal-bg: #0a0118; }
.pb-0d0d0d { --pal-bg: #0d0d0d; }
.pb-0d1422 { --pal-bg: #0d1422; }
.pb-0e1d2c { --pal-bg: #0e1d2c; }
.pb-0f1d12 { --pal-bg: #0f1d12; }
.pb-160a23 { --pal-bg: #160a23; }
.pb-1a0a02 { --pal-bg: #1a0a02; }
.pb-1a0a14 { --pal-bg: #1a0a14; }
.pb-1a0f06 { --pal-bg: #1a0f06; }
.pb-1b2316 { --pal-bg: #1b2316; }
.pb-1c130f { --pal-bg: #1c130f; }
.pb-1c1610 { --pal-bg: #1c1610; }
.pb-1f1402 { --pal-bg: #1f1402; }
.pb-2a0f1a { --pal-bg: #2a0f1a; }
.pb-eef6fc { --pal-bg: #eef6fc; }
.pb-f3fffb { --pal-bg: #f3fffb; }
.pb-f4f8ff { --pal-bg: #f4f8ff; }
.pb-fff5f5 { --pal-bg: #fff5f5; }
.pb-fff7f0 { --pal-bg: #fff7f0; }
.pal-swatches i { min-width: 0; }
/* ===== R165 END ===== */

/* ==== R191 页内预览弹窗（取代 R179 独立窗口，preview.html 已下线） ==== */
.pv2 { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: rgba(8, 10, 20, .84); backdrop-filter: blur(6px); }
.pv2[hidden] { display: none; }
.pv2-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: none; }
.pv2-title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #eef1f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-pct { flex: none; min-width: 52px; text-align: right; font-size: 12.5px; font-weight: 700; color: #b9a8ff; font-variant-numeric: tabular-nums; }
.pv2-tools { display: flex; gap: 6px; flex: none; }
.pv2-btn { border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; background: rgba(255, 255, 255, .08); color: #eef1f7; font-size: 12.5px; padding: 6px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.pv2-btn:hover { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .32); }
.pv2-btn:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }
.pv2-x { font-size: 14px; padding: 6px 13px; }
.pv2-stage { flex: 1 1 auto; position: relative; overflow: hidden; display: grid; place-items: center; cursor: grab; touch-action: none; }
.pv2-stage.pv2-grabbing { cursor: grabbing; }
.pv2-stage img { max-width: none; max-height: none; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); background-image: repeating-conic-gradient(#3a3f4e 0% 25%, #262b38 0% 50%); background-size: 16px 16px; }
.pv2-hint { flex: none; text-align: center; font-size: 12px; letter-spacing: .02em; color: rgba(238, 241, 247, .62); padding: 10px 12px 14px; }
body.pv2-open { overflow: hidden; }
/* ===== R188 画布下方广告位：纯文字双卡（删推广/立即访问），品牌色渐变晕染底 + 大标题，明暗主题共用 token ===== */
.ad-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ad-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ad-bgrdh { background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 14%, var(--bg-card)) 0%, var(--bg-card) 52%, color-mix(in srgb, #22d3ee 12%, var(--bg-card)) 100%); }
.ad-365lab { background: linear-gradient(135deg, color-mix(in srgb, #22d3ee 14%, var(--bg-card)) 0%, var(--bg-card) 52%, color-mix(in srgb, #ff5c8a 12%, var(--bg-card)) 100%); }
.ad-card:hover, .ad-card:focus-visible { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.ad-name { font-size: 17px; font-weight: 800; letter-spacing: .3px; color: var(--text); }
.ad-card:hover .ad-name, .ad-card:focus-visible .ad-name { color: var(--brand); }
.ad-desc { font-size: 13px; line-height: 1.65; color: var(--text-soft); }
@media (max-width: 720px) { .ad-slots { grid-template-columns: 1fr; } }
/* ===== R187 文字卡：输入框与字体下拉行之间补 12px（与 .overlay-item .row2 的 gap 同档），此前两控件零间距贴死 ===== */
.overlay-item .deco-text { margin-bottom: 12px; }
.overlay-item .row2 { margin-bottom: 12px; }
/* ===== R192 右侧面板卡片化：圆角/描边/底色挪到滚动容器 .panel-panes 本体（与左侧 .gen-gallery 同构），
   内层 .panel 去壳——此前卡片在滚动容器里被裁底，底部两角永远是平的 ===== */
.panel-panes { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 12px 16px 16px; box-shadow: var(--shadow); }
.panel-panes .panel { background: transparent; border: none; border-radius: 0; padding: 2px 4px; }
/* ===== R193 编辑历史排版：卡片加宽、信息行拆两行（名称 / 尺寸·时间），「当前」改右上角角标不再挤行 ===== */
.hist-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 14px; }
.hist-cur { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 1px 7px; box-shadow: 0 2px 8px rgba(20, 24, 41, .25); }
.hist-meta { display: flex; flex-direction: column; gap: 2px; white-space: normal; overflow: visible; text-overflow: clip; }
.hist-name { font-size: .74rem; font-weight: 600; color: var(--text-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-sub { font-size: .68rem; color: var(--text-dim); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ===== R194 尺寸下拉行恢复名称：左「常用名」右「尺寸数字」，选中态两截都反白 ===== */
.size-dd-item-n { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-dd-item-b { flex: 0 0 auto; min-width: 0; font-weight: 600; color: var(--text-soft); }
.size-dd-item.active .size-dd-item-n, .size-dd-item.active .size-dd-item-b { color: #fff; }
/* ===== R195 画布舞台底色改「透明棋盘格」：此前舞台透明，画布四周漏出页面装饰渐变（用户点名要改掉），
   改成图像编辑器经典的透明指示格，明暗主题各一组浓度很低的格子色 ===== */
:root { --stage-ck1: #161d33; --stage-ck2: #1d2540; }
[data-theme="light"] { --stage-ck1: #edeff6; --stage-ck2: #f8f9fd; }
.preview-stage { background-image: repeating-conic-gradient(var(--stage-ck1) 0% 25%, var(--stage-ck2) 0% 50%); background-size: 20px 20px; }
/* ===== R197 素材平铺增强：清空钮 + 计数徽标；mixlab 创意工坊无需专属样式（复用 .ctrl 面板件） ===== */
.mat-clear { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-dim); font-size: .72rem; font-family: var(--font); padding: 2px 9px; cursor: pointer; margin-left: auto; transition: color .15s ease, border-color .15s ease; }
.mat-clear:hover { color: var(--brand-2); border-color: var(--brand-2); }
/* ===== R214 教程页 step-demo 移动端溢出修复：flex-basis:auto 取 max-content 撑破 390 视口 ===== */
@media (max-width: 720px) {
  .step { flex-wrap: wrap; }
  .step-demo { flex: 1 1 100%; min-width: 0; max-width: 100%; }
}
/* ===== R215 404 页（中英静态双语，不依赖词典 JS，错误页要尽量皮实） ===== */
.e404-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.e404-card { max-width: 560px; width: 100%; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 48px 36px 36px; box-shadow: var(--shadow); }
.e404-code { font-size: 6rem; font-weight: 900; line-height: 1; letter-spacing: .04em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e404-t1 { margin: 14px 0 6px; font-size: 1.5rem; color: var(--text); }
.e404-t2 { margin: 0; color: var(--text-dim); font-size: .95rem; }
.e404-en { margin: 4px 0 26px; color: var(--text-dim); font-size: .85rem; opacity: .8; }
.e404-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.e404-tip { margin: 26px 0 0; font-size: .8rem; color: var(--text-dim); line-height: 1.7; }
/* ===== R223 color-mix() 老引擎兼容兜底（Chrome<111 / Safari<16.2 / Firefox<113 整条声明无效）：
   同选择器后置双规则——老引擎丢弃第二条保 rgba 近似，新引擎按层叠取 color-mix，视觉零差异 ===== */
.site-header { background: rgba(11, 15, 26, .72); }
.site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); }
[data-theme="light"] .site-header { background: rgba(246, 247, 251, .72); }
[data-theme="light"] .site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.collage-row .collage-num:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.collage-row .collage-num:focus { box-shadow: color-mix(in srgb, var(--brand-2) 25%, transparent); }
[data-theme="light"] .collage-row .collage-num:focus { box-shadow: 0 0 0 3px rgba(14, 116, 144, .25); }
[data-theme="light"] .collage-row .collage-num:focus { box-shadow: color-mix(in srgb, var(--brand-2) 25%, transparent); }
#cw:focus, #ch:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
#cw:focus, #ch:focus { box-shadow: color-mix(in srgb, var(--brand-2) 25%, transparent); }
[data-theme="light"] #cw:focus, [data-theme="light"] #ch:focus { box-shadow: 0 0 0 3px rgba(14, 116, 144, .25); }
[data-theme="light"] #cw:focus, [data-theme="light"] #ch:focus { box-shadow: color-mix(in srgb, var(--brand-2) 25%, transparent); }
.pm-dot { box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.pm-dot { box-shadow: color-mix(in srgb, #34d399 25%, transparent); }
.palette-chip.active { box-shadow: 0 0 0 2px rgba(34, 211, 238, .35); }
.palette-chip.active { box-shadow: color-mix(in srgb, var(--brand-2) 35%, transparent); }
[data-theme="light"] .palette-chip.active { box-shadow: 0 0 0 2px rgba(14, 116, 144, .35); }
[data-theme="light"] .palette-chip.active { box-shadow: color-mix(in srgb, var(--brand-2) 35%, transparent); }
.palette-chip.fit-cat { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 0 1px rgba(34, 211, 238, .35); }
.palette-chip.fit-cat { border-color: color-mix(in srgb, var(--brand-2) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 35%, transparent); }
[data-theme="light"] .palette-chip.fit-cat { border-color: rgba(14, 116, 144, .55); box-shadow: 0 0 0 1px rgba(14, 116, 144, .35); }
[data-theme="light"] .palette-chip.fit-cat { border-color: color-mix(in srgb, var(--brand-2) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 35%, transparent); }
.fav-danger { border-color: rgba(239, 68, 68, .5); }
.fav-danger { border-color: color-mix(in srgb, #ef4444 35%, var(--border)); }
.gens-search:focus-within { box-shadow: 0 0 0 3px rgba(143, 116, 255, .22); }
.gens-search:focus-within { box-shadow: color-mix(in srgb, var(--brand) 22%, transparent); }
[data-theme="light"] .gens-search:focus-within { box-shadow: 0 0 0 3px rgba(109, 79, 216, .22); }
[data-theme="light"] .gens-search:focus-within { box-shadow: color-mix(in srgb, var(--brand) 22%, transparent); }
.btn-secondary { background: rgba(143, 116, 255, .08); }
.btn-secondary { background: color-mix(in srgb, var(--brand) 8%, transparent); }
[data-theme="light"] .btn-secondary { background: rgba(109, 79, 216, .08); }
[data-theme="light"] .btn-secondary { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.btn-secondary:hover { background: rgba(143, 116, 255, .16); }
.btn-secondary:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
[data-theme="light"] .btn-secondary:hover { background: rgba(109, 79, 216, .16); }
[data-theme="light"] .btn-secondary:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.ad-bgrdh { background: linear-gradient(135deg, rgba(124, 92, 255, .14) 0%, rgba(124, 92, 255, 0) 52%, rgba(34, 211, 238, .12) 100%), var(--bg-card); }
.ad-bgrdh { background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 14%, var(--bg-card)) 0%, var(--bg-card) 52%, color-mix(in srgb, #22d3ee 12%, var(--bg-card)) 100%); }
.ad-365lab { background: linear-gradient(135deg, rgba(34, 211, 238, .14) 0%, rgba(34, 211, 238, 0) 52%, rgba(255, 92, 138, .12) 100%), var(--bg-card); }
.ad-365lab { background: linear-gradient(135deg, color-mix(in srgb, #22d3ee 14%, var(--bg-card)) 0%, var(--bg-card) 52%, color-mix(in srgb, #ff5c8a 12%, var(--bg-card)) 100%); }
.pv2 { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }