/*
 * 00YM-AI切图系统
 * Author: 柒铖鸿 (QQ: 1003123026)
 * 建议/问题反馈：QQ群 668147536
 * 源码官方下载：www.00ym.com
 * License: 请仅用于合法合规用途
 *
 * v3 重构要点：
 *   - 统一品牌色变量（--brand/--brand2/--brand3），全站渐变保持一致
 *   - 暗色模式改用 CSS 变量覆盖，减少 !important 滥用
 *   - 合并零散的 @media 查询，集中管理响应式断点
 *   - 新增 <kbd>、分享卡、快捷键提示等新组件样式
 *   - 移动端适配增强（安全区、触摸滚动、紧凑布局）
 */

/* ============ 设计令牌（Design Tokens）============ */
:root {
  /* 品牌色：中性灰蓝 + 单一靛蓝(indigo)品牌色，观感更专业耐看 */
  --brand:  #6366f1;
  --brand2: #4f46e5;
  --brand3: #4338ca;
  
  /* 点缀色：与品牌同族的浅靛蓝（收敛，避免花哨） */
  --accent: #818cf8;
  --accent-light: #c7d2fe;
  --accent-bg: #eef2ff;

  /* 中性色 - 灰蓝(slate)系 */
  --bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #eef2ff 100%);
  --bg-solid: #f8fafc;
  --text: #334155;
  --muted: #64748b;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --border: rgba(99, 102, 241, .18);
  --ring: rgba(99, 102, 241, .12);

  /* 功能色 - 中性灰阴影 */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, .10);
  --shadow-soft: 0 4px 12px rgba(15, 23, 42, .06);
  --radius: 1rem;
  --radius-sm: .625rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;

  /* Tailwind v4 容器变量兜底：编译产物缺失 max-w-lg/xl/3xl/4xl/7xl 依赖的令牌，
     补齐后 .max-w-* 与 .mx-auto 在大屏下才能正常居中限宽 */
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-7xl: 80rem;

  /* 优化：确保按钮文字有足够的对比度 */
  --btn-text: #ffffff;
  --btn-hover: #4f46e5;

  /* 锚点滚动偏移（避免 sticky header 遮挡） */
  scroll-padding-top: 4rem;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

/* 进度条容器 */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* 进度条填充 */
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 1.5s infinite;
  background-size: 200% 100%;
}

/* 进度条「不确定态」：还没算出总数（如 GIF/3D 起切阶段）时来回滑动，
   比停在 0% 更像"正在处理"，避免用户以为卡死。拿到真实进度后由 JS 移除本类。 */
.progress-fill-indeterminate {
  width: 35% !important;
  animation: progress-slide 1.4s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill-indeterminate { animation: none; width: 100% !important; }
  .progress-fill::after { animation: none; }
}

/* 按钮加载状态 */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ============ 基础重置 ============ */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 4rem; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Quicksand", sans-serif;
  background: var(--bg-solid);
  background-image: 
    radial-gradient(at 0% 0%, rgba(148, 163, 184, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%);
  color: var(--text);
  overflow-x: clip;
}

/* 焦点可见：键盘导航时显示明显焦点环，鼠标点击不显示（无障碍） */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 跳转主内容（无障碍） */
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:8px 16px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* ============ 通用功能菜单（电脑/手机通用下拉） ============ */
/* 横向长方形面板：分类行式布局（每行 = 分类标题 + 入口横排流式），避免长长一竖排 */
.qt-navmenu {
  /* 宽度/高度/滚动等关键属性在下方 #navMenu ID 段定义（ID 优先级更高，此处写了也不生效），
     此处只放 ID 段未覆盖的低频属性，避免双头维护 */
  font-size: .875rem;
  z-index: 50;
}
/* 分类行：左侧窄分类标题 + 右侧入口等宽网格（列对齐，整体更整齐） */
.qt-navmenu .nav-cat { display: flex; align-items: stretch; gap: 0.375rem; padding: 0.375rem 0; }
/* 分类与分类之间的虚线分隔 */
.qt-navmenu .qt-cat-divider { border-top: 1px dashed #c7d2fe; margin: 0.125rem 0.25rem; }
/* 分类名现为 2 字，列宽收窄减少留白；右对齐贴近右侧入口，形似表格首列 */
.qt-navmenu .nav-cat-title {
  width: 2.25rem;
  flex-shrink: 0;
  padding-top: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #818cf8;
  line-height: 1.25;
  text-align: right;
}
/* 等宽网格替代 flex 流式：每列同宽、上下对齐，参差不齐感消失。
   固定 3 列（而非 auto-fill）：保证「一键抠图（AI人像）」这类长名也能完整显示不被截断 */
.qt-navmenu .nav-cat-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
}
.qt-navmenu .nav-cat-items > a { min-width: 0; overflow: hidden; }
.qt-navmenu .nav-cat-items > a > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 窄屏降为 2 列，并允许文字折行完整显示（不截断长功能名） */
@media (max-width: 480px) {
  .qt-navmenu .nav-cat-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qt-navmenu .nav-cat-items > a > span:last-child { white-space: normal; line-height: 1.15; }
}
/* 菜单项图标与文字在 hover/active 时柔和过渡 */
.qt-navmenu a { line-height: 1.2; }

/* ============ 通用过渡动画 ============ */
.transition-all { transition: all 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-colors { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.transition-shadow { transition: box-shadow 0.3s ease; }
.fade-in { animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 注：@keyframes slideDown 只保留「高级设置面板渐显」那一份（见文件后部），
   这里原本的副本已无人引用，重复定义会被后者覆盖，故删除。 */

/* 柔和的装饰背景 */

/* ============ 渐变与品牌色 ============ */
/* gradient-bg: 头部背景（柔和紫粉渐变，女性化设计） */
.gradient-bg { 
  /* 首段原为 #818cf8，白字对比度仅 ~3.3:1（低于 WCAG AA）→ 整体加深一档 */
  background: linear-gradient(135deg, #6366f1 0%, #6366f1 40%, #4f46e5 70%, #4338ca 100%);
  position: relative;
}
.gradient-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(226, 232, 240, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(129, 140, 248, 0.4) 0%, transparent 40%);
  pointer-events: none;
}
/* gradient-brand: 主按钮/进度条/活动状态（柔和粉紫渐变） */
.gradient-brand { 
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%); 
}

/* 玻璃拟态卡片 */

/* 章节标题装饰 */
.section-title {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--text);
}
.section-title::before {
  content: ''; width: 6px; height: 1.4rem;
  background: linear-gradient(180deg, #818cf8, #4f46e5);
  border-radius: 4px;
}
.section-title-center { display: flex; justify-content: center; }
.section-title-center::before { display: none; }
.section-title-center span {
  display: inline-block; padding-bottom: .25rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #818cf8, #4f46e5) 1;
}

/* ============ 卡片 ============ */
.card {
  background: var(--card);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card-vivid {
  background: linear-gradient(135deg, rgba(99, 102, 241, .04), rgba(99, 102, 241, .06));
  border: 1px solid rgba(99, 102, 241, .15);
}

/* ============ 功能卡片（首页工具入口） ============ */
.feature-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: .75rem;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  border: 1px solid rgba(99, 102, 241, .12);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.feature-card::after {
  /* 右上柔和粉紫光晕，让卡片有呼吸感 */
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(99, 102, 241, .12), transparent 60%),
              radial-gradient(circle at 30% 70%, rgba(99, 102, 241, .12), transparent 60%);
  pointer-events: none;
  transition: opacity .3s;
  opacity: .7;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(99, 102, 241, .15);
  border-color: rgba(99, 102, 241, .3);
}
.feature-card:hover::after { opacity: 1; }
.feature-card .icon-wrap {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.feature-card:hover .icon-wrap { transform: scale(1.08) rotate(-3deg); }

/* 卡片顶部：图标 + 标题块 */
.feature-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.feature-card .feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.feature-card:hover .feature-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 12px 28px rgba(99, 102, 241, .3);
}
.feature-card .feature-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  color: #ffffff;
  stroke: #ffffff;
}
.feature-title-block {
  flex: 1;
  min-width: 0;
}
.feature-name-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.feature-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.feature-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .1);
  color: #6d28d9;
  font-weight: 600;
  letter-spacing: .02em;
}
.feature-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 描述：自适应卡片高度 */
.feature-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  flex: 1;
  margin: 0;
}

/* 底部：使用指示 - 优化对比度 */
.feature-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #4f46e5;
  font-weight: 600;
  padding-top: .5rem;
  border-top: 1px dashed rgba(124, 58, 237, .18);
  transition: opacity .2s;
  opacity: .85;
}
.feature-foot svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}
.feature-card:hover .feature-foot { opacity: 1; }
.feature-card:hover .feature-foot svg { transform: translateX(2px); }

/* 移动端紧凑 */
@media (max-width: 640px) {
  .feature-card { padding: 1rem; gap: .6rem; }
  .feature-card .feature-icon { width: 2.5rem; height: 2.5rem; border-radius: .875rem; }
  .feature-card .feature-icon svg { width: 1.3rem; height: 1.3rem; }
  .feature-name { font-size: 15px; }
  .feature-desc { font-size: 12px; line-height: 1.5; }
}

/* ============ 上传区 ============ */
/* 上传 / 编辑区图片：禁止长按保存、文字选中与拖拽图片，
   避免系统菜单打断「拖动调整切割框 / 图片位置」的交互。
   注：不使用 pointer-events:none，保证拖拽调节仍然可用。 */
.drop-zone img,
.drop-zone canvas,
.slot img,
.slot canvas,
#dzImg,
#dzPreview img,
#dzPreview canvas,
#d3PreviewCanvas,
#bigggLive,
#bigggDrag,
.canvas-wrap img,
.canvas-wrap canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 全局兜底：工具区所有图片/canvas 一律禁止长按呼出系统菜单（iOS"存储到照片"、
   Android"下载图片"）与原生拖拽。此前只逐个列举 ID（#dzPreview/#d3PreviewCanvas…），
   新增预览图（gifImg、posterBgImg、bigggBgImg、wmLogoImg 等）容易漏掉，
   故改为覆盖 #app 内全部媒体元素，再排除成品预览区——
   成品切片是允许用户在手机上长按保存的（见切割页"也可以在手机上逐张长按保存"引导），
   若一并禁掉会与产品引导矛盾。 */
#app img,
#app canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* 成品预览区例外：恢复系统长按菜单，保证"长按保存切片/整图"可用 */
#app #previewGrid img,
#app #previewGrid canvas,
#app #previewMoments img,
#app #previewMoments canvas,
#app #combinedPreview img,
#app #combinedPreview canvas,
#app #sectionDownload img,
#app #sectionDownload canvas {
  -webkit-touch-callout: default;
  -webkit-user-drag: auto;
}

.drop-zone {
  border: 2px dashed rgba(99, 102, 241, .25);
  border-radius: 1rem;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
  /* 移动端：禁止浏览器把触摸手势解释为下拉刷新/双击缩放，保证拖拽上传流畅 */
  touch-action: manipulation;
}
.drop-zone:hover { 
  border-color: var(--brand); 
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
}
.drop-zone.dragover {
  border-color: var(--brand);
  background: linear-gradient(135deg, #f5d0fe 0%, #e9d5ff 100%);
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .15), 0 12px 32px rgba(99, 102, 241, .2);
  animation: dz-pulse 0.8s ease-in-out infinite alternate;
}
.drop-zone.dragover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(124, 58, 237, .08) 12px, rgba(124, 58, 237, .08) 24px);
  animation: dz-stripes 0.6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.drop-zone.dragover > * { position: relative; z-index: 1; }
@keyframes dz-pulse {
  from { box-shadow: 0 0 0 4px rgba(124, 58, 237, .12), 0 6px 20px rgba(124, 58, 237, .15); }
  to   { box-shadow: 0 0 0 6px rgba(124, 58, 237, .22), 0 12px 32px rgba(124, 58, 237, .25); }
}
@keyframes dz-stripes {
  from { background-position: 0 0; }
  to   { background-position: 24px 0; }
}

/* ============ 表单控件 ============ */
input[type="number"], input[type="text"], input[type="range"], select, textarea {
  font-family: inherit;
}
input[type="number"], input[type="text"], select, textarea {
  border: 1.5px solid rgba(99, 102, 241, .2);
  border-radius: 0.75rem;
  padding: .5rem .85rem;
  font-size: .875rem;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: all .2s ease;
  width: 100%;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus, textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, .15);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #818cf8, #6366f1);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid #818cf8;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .3); cursor: pointer;
  transition: transform .2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid #818cf8;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .3); cursor: pointer;
}
input[type=range] { accent-color: var(--brand); }
input[type=color] { border: none; padding: 0; background: transparent; }

/* ============ 槽位（拼图模式用） ============ */
.slot { 
  aspect-ratio: 1/1; 
  position: relative; 
  overflow: hidden; 
  border-radius: 0.875rem;
}
/* 关键：图片不接收指针事件 + 禁用长按呼出菜单，防止手机长按拖拽时触发浏览器"保存图片"弹窗 */
.slot, .slot * {
  -webkit-touch-callout: none;        /* iOS Safari 长按不弹系统菜单 */
  -webkit-user-select: none; user-select: none;
}
.slot img, .slot .slot-num { pointer-events: none; }  /* 触摸穿透到 .slot 本体，长按只会触发拖拽 */
.slot-empty {
  background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#e0e7ff 10px,#e0e7ff 20px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.slot-empty:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.slot[draggable="true"] { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.slot.slot-dragging {
  opacity: .35;
  transform: scale(.9) rotate(-2deg);
  transition: transform .15s, opacity .15s;
  box-shadow: 0 0 0 2px var(--brand), 0 12px 28px rgba(124, 58, 237, .3);
  z-index: 10;
}
.slot.slot-dragover {
  outline: 3px dashed #6d28d9;
  outline-offset: -3px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .15) 0%, rgba(109, 40, 217, .1) 100%);
  transform: scale(1.04);
  transition: all .18s;
  animation: slot-hover-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes slot-hover-pulse {
  from { box-shadow: 0 0 0 0 rgba(124, 58, 237, .35); }
  to   { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
}
/* 拖拽时跟随指针的浮动幽灵 */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,.28), 0 0 0 3px rgba(124, 58, 237, .5);
  transform: translate(-50%, -50%) scale(1.05);
  transition: transform .05s;
  animation: ghost-in .2s ease-out;
}
@keyframes ghost-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.slot-btn {
  position: absolute; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 9999px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; cursor: pointer; line-height: 1;
  -webkit-touch-callout: none;
}
.slot-btn.remove-slot { top: 2px; right: 2px; pointer-events: auto; }
.slot-btn.mc-del { top: 2px; right: 2px; }
.slot-btn:hover { background: rgba(124, 58, 237, .85); }
.slot-btn:active { transform: scale(.9); }

/* ============ 预览网格（0 缝隙） ============ */
.preview-grid-9 { display:grid; grid-template-columns: repeat(3,1fr); gap:0; position: relative; }
.preview-grid-4 { display:grid; grid-template-columns: repeat(2,1fr); gap:0; max-width:240px; margin:0 auto; position: relative; }
.preview-grid-6 { display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap:0; position: relative; max-width:360px; margin:0 auto; }
.preview-grid-n {
  display:flex; gap:0; overflow-x:auto; padding-bottom:4px; position: relative;
  -webkit-overflow-scrolling: touch;
}
.preview-grid-n::-webkit-scrollbar { height:4px; }
.preview-grid-n::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:2px; }

/* 宫格预览交互：悬停高亮 + 平滑过渡 */
.preview-grid-9 .piece-item,
.preview-grid-4 .piece-item,
.preview-grid-6 .piece-item,
.preview-grid-n .piece-item {
  transition: transform .2s, filter .2s;
  border-radius: 0 !important;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.preview-grid-9 .piece-item:hover,
.preview-grid-4 .piece-item:hover,
.preview-grid-6 .piece-item:hover {
  transform: scale(0.94);
  filter: brightness(1.05);
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.preview-grid-n .piece-item:hover {
  filter: brightness(1.05);
}

/* 长图横切预览：按真实比例竖向排列（每段是宽横幅）。
   刻意不复用 .preview-grid-9 —— 那套是 aspect-ratio:1/1 + object-fit:cover，
   会把 1080×360 的长图横幅裁成方块，用户从预览看不出真实切片比例。 */
.preview-long {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 300px;
  max-height: 420px;
  margin: 0 auto;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.preview-long::-webkit-scrollbar { width: 4px; }
.preview-long::-webkit-scrollbar-thumb { background: #f9a8d4; border-radius: 2px; }
.preview-long .piece-item {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
  transition: filter .2s;
}
.preview-long .piece-item:hover { filter: brightness(1.05); }

/* 预览辅助线：仅显示，不影响导出 */
.preview-grid-9.show-grid-line::after,
.preview-grid-4.show-grid-line::after,
.preview-grid-6.show-grid-line::after,
.preview-grid-n.show-grid-line::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0,0,0,.35) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: calc(100% / 3) 100%, 100% calc(100% / 3);
  mix-blend-mode: multiply;
  z-index: 10;
}
.preview-grid-4.show-grid-line::after {
  background-size: calc(100% / 2) 100%, 100% calc(100% / 2);
}
.preview-grid-6.show-grid-line::after {
  background-size: calc(100% / 3) 100%, 100% calc(100% / 2);
}
.preview-grid-n.show-grid-line::after {
  background-image: linear-gradient(to right, rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: calc(100% / var(--n, 9)) 100%;
}
/* 边框辅助线 */
.preview-grid-9.show-grid-line,
.preview-grid-4.show-grid-line,
.preview-grid-6.show-grid-line,
.preview-grid-n.show-grid-line {
  outline: 1px solid rgba(0,0,0,.35);
  outline-offset: -1px;
}

/* ============ 缩略图 ============ */
.thumb {
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
  cursor:pointer; transition: transform .15s, box-shadow .15s;
}
.thumb:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
/* 长图横切：单张段为矮画布，限制最大高度避免单张视图过高 */

/* ============ 朋友圈模拟卡片 ============ */
.moments-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.moments-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.moments-avatar {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(168,85,247,.3);
  background: linear-gradient(135deg, #4f46e5, #4f46e5);
}
.moments-avatar svg { display: block; width: 100%; height: 100%; }
.moments-info { display: flex; flex-direction: column; }
.moments-name { font-size: 14px; font-weight: 600; color: #c44569; }

.moments-time { font-size: 12px; color: #64748b; margin-top: 1px; }
.moments-text {
  font-size: 14px;
  color: #333;
  margin: 10px 0;
  line-height: 1.5;
  word-break: break-word;
}

.moments-grid { display: grid; gap: 2px; }
.moments-actions {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.moments-action {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  transition: color .15s;
}
.moments-action:hover { color: var(--brand); }

/* ============ 按钮 ============ */
.btn { 
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); 
  cursor: pointer; 
  border-radius: 0.875rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}
.btn:hover::before {
  width: 300%;
  height: 300%;
}
.btn:hover { 
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.btn:active { 
  transform: scale(.97) translateY(0); 
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #818cf8, #4f46e5);
  color: #fff;
}
.btn-primary:hover { 
  filter: brightness(1.08); 
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}

/* Hero CTA 按钮：首页「立即切九宫格」强制紫色，无视任何旧版缓存/Tailwind 冲突 */
a[href*="jiugongge"]:not(.btn-primary) {
  background-color: #ffffff !important;
  color: #4f46e5 !important;
  border-color: #818cf8 !important;
  border-width: 2px !important;
}

.btn-soft {
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(139, 92, 246, .1));
  color: var(--brand);
  border: 1px solid rgba(124, 58, 237, .15);
}

/* 次要按钮（压缩/转换/一寸照工具条）。此前 CSS 里完全没有定义，
   导致按钮背景透明、无边框，看起来像一段裸文字，与主按钮区分不开。 */
.btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.btn-secondary:active {
  background: #cbd5e1;
}
.btn-soft:hover { background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(139, 92, 246, .18)); }

/* ============ 开关 ============ */
.switch {
  position:relative; width:42px; height:24px;
  background:#cbd5e1; border-radius:999px;
  cursor:pointer; transition:.2s; flex-shrink:0;
}
.switch.on { background: var(--brand); }
.switch::after {
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; background:#fff;
  border-radius:50%; transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch.on::after { left:20px; }
/* 键盘可达：tabindex=0 时显示焦点环，空格/回车切换由 JS 处理 */
.switch:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ============ 一键滤镜预设（v4 新增） ============ */
.filter-presets { display:flex; align-items:center; gap:.75rem; margin-top:.5rem; }
.filter-presets-row { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.filter-preset-btn {
  padding:5px 12px; border-radius:8px; font-size:12px;
  color: var(--muted); cursor:pointer; transition:.15s; white-space:nowrap;
  background:#f1f5f9; border:1px solid transparent;
}
.filter-preset-btn:hover { background:#faf5ff; border-color:#e9d5ff; color:#4338ca; }
.filter-preset-btn.active {
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; border-color:transparent;
  box-shadow:0 1px 4px rgba(124, 58, 237, .25);
}
.filter-preset-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ============ 分段控件 ============ */
.seg { background:#f1f5f9; border-radius:10px; padding:3px; display:inline-flex; }
.seg[style*="flex-wrap"] { display:flex; }
.seg button {
  padding:6px 14px; border-radius:8px; font-size:13px;
  color: var(--muted); cursor:pointer; transition:.15s; white-space:nowrap;
}
.seg button.active {
  background:#fff; color: var(--brand);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ============ 创意布局选择器 ============ */
.layout-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.layout-pick {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:6px 4px; border-radius:10px;
  background:#f8fafc; border:1px solid transparent;
  cursor:pointer; transition: all .15s; color:#475569;
}
.layout-pick:hover { background:#faf5ff; border-color:#e9d5ff; color:#4338ca; }
/* 选中态：浅底配加深的靛蓝字（原 var(--brand) 对比度仅约 4.3:1，加深后约 5.6:1，更清晰） */
.layout-pick.active {
  background:linear-gradient(135deg,#eef2ff,#f8fafc);
  border-color: var(--brand2); color: var(--brand2);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .18);
}
.layout-pick-svg { display:inline-flex; }
.layout-pick-name { font-size:11px; font-weight:500; white-space:nowrap; }

/* 创意拼图：模板选择网格 */
.layout-template-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.layout-tpl-pick {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:6px 4px; border-radius:10px;
  background:#fff; border:1px solid #e2e8f0;
  cursor:pointer; transition: all .15s; color:#475569;
}
.layout-tpl-pick:hover { background:#eef2ff; border-color:#4f46e5; color:#6d28d9; }
.layout-tpl-pick.active {
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  border-color:#a21caf; color:#a21caf;
  box-shadow: 0 2px 8px rgba(168,85,247,.18);
}
.layout-tpl-svg { display:inline-flex; }
.layout-tpl-name { font-size:11px; font-weight:500; white-space:nowrap; }
.layout-tpl-count { font-size:10px; color:#64748b; }

/* ============ 动画 ============ */
.fade-in { animation: fade .25s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.pop-in { animation: pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }

/* 加载中 spinner */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(124, 58, 237, .25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-spin { animation: spin 0.7s linear infinite; }

/* ============ 模式 Tab ============ */
.mode-tabs-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.mode-tabs-scroll::-webkit-scrollbar { display: none; }
.mode-tabs-wrap { position: relative; }
.mode-tabs-fade-left,
.mode-tabs-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  z-index: 1;
  transition: opacity .2s ease;
}
.mode-tabs-fade-left { left: 0; background: linear-gradient(to right, #fff 0%, transparent 100%); }
.mode-tabs-fade-right { right: 0; background: linear-gradient(to left, #fff 0%, transparent 100%); }
.mode-tabs-hint {
  font-size: 11px;
  color: #6366f1;
  text-align: right;
  margin-top: 0.25rem;
  display: none;
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
@media (max-width: 640px) {
  .mode-tabs-hint { display: block; }
}
.mode-tab {
  transition: all .2s ease; 
  cursor: pointer; 
  white-space: nowrap;
  background: #fff;
  border-radius: 1rem;
  font-weight: 500;
}
.mode-tab:hover { 
  border-color: var(--brand); 
  color: var(--brand); 
  transform: translateY(-1px);
}
/* 选中态：紫底 + 白字。这里额外用 #modeTabs 提高特异性，
   避免被后加载的 tw-patch.css 单类规则（如 text-purple-600）覆盖，
   导致出现「紫色背景 + 紫色文字、看不见字」的情况。 */
#modeTabs .mode-tab.active,
.mode-tab.active {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, .30);
  font-weight: 600;
}
#modeTabs .mode-tab.active:hover,
#modeTabs .mode-tab.active:focus,
#modeTabs .mode-tab.active:active,
.mode-tab.active:hover,
.mode-tab.active:focus,
.mode-tab.active:active {
  color: #fff !important;
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}
/* 未选中的 tab：悬停时紫字，保证白底上清晰可读 */
#modeTabs .mode-tab:not(.active):hover {
  color: var(--brand2);
}
/* ============ 标签 ============ */
.tag {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:500;
}

/* ============ 首页功能卡片（主样式见文件上方 .feature-card，此处无重复定义） ============ */

/* 首页 Hero 区域 */
/* v4：Hero 高度与负边距兜底（tailwind.min.css 未编译 py-14/-mt-8/-mx-4，改用语义化类承接） */
.hero-band {
  margin-top: -2rem;
  width: 100vw;
  /* 突破 max-w 容器：margin 百分比相对 main 的 content box，50% - 50vw
     恰好同时抵消 main 的 px-4 padding 与居中偏移，与全宽 header 无缝对齐 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0 0 1.5rem 1.5rem;   /* 底部圆角收尾，避免紫色大块生硬出界 */
}
.hero-inner {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) {
  .hero-inner {
    padding-top: 3.75rem;
    padding-bottom: 4rem;
  }
}
.hero-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .75rem;
  color: #fff;
}
.hero-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #86efac; box-shadow: 0 0 8px #86efac;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(.85); }
}

/* 行数截断（Tailwind 未生成 line-clamp 时的兜底） */

/* 步骤圆环 */
.step-ring {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .35);
  margin: 0 auto .5rem;
}

/* ============ 顶部导航菜单 ============ */
#navMenu { transform-origin: top right; }
#navMenu:not(.hidden) { animation: navMenuIn .18s ease; }
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#navMenuBtn[aria-expanded="true"] #navMenuArrow { transform: rotate(180deg); }
/* v4 兜底：tailwind.min.css 未编译 bg-white/95、top-full、right-0、w-[320px]、p-2.5、py-2.5 等类，
   导致菜单背景透明（文字看不见）、贴按钮太近。此处用原生样式完整承接。 */
#navMenu {
  right: 0;
  top: calc(100% + 0.625rem);   /* 比按钮略低一点，避免贴边 */
  width: min(94vw, 680px);      /* 横向长方形面板（ID 优先级高于 .qt-navmenu，实际宽度以此为准） */
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);   /* iOS 地址栏展开时 vh 会算大，菜单会伸出屏幕 */
  overflow-y: auto;
  background: #fff;
  /* 原为 rgba(255,255,255,.97) + blur(20px)：97% 不透明底上模糊几乎看不出来，
     却让低端安卓每次展开菜单都全屏重合成，直接改纯白 */
  padding: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
#navMenu a { padding: 0.4rem 0.55rem; color: #334155; }
/* 菜单项左侧图标方块尺寸（w-6/h-6 = 24px，横向面板更紧凑） */
#navMenu a > span:first-child { width: 1.5rem; height: 1.5rem; }

/* ============ 键盘快捷键提示 <kbd> ============ */
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ============ Toast ============ */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff;
  font-size: 13px; padding: 10px 16px;
  border-radius: 10px; z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  max-width: 90vw; text-align: center;
}
/* 提示统一容器：多条提示纵向排列、互不重叠。
   说明：.toast 本身是 fixed 定位（同一坐标），多条同时出现会叠在一起；
   放进容器后改为静态定位，由容器负责排版（flex 纵向 + 间距）。 */
#qtToastWrap {
  position: fixed;
  z-index: 2147483000;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}
#qtToastWrap .toast {
  position: static;
  transform: none;
  max-width: 92vw;
  animation: toastIn .3s cubic-bezier(.4,0,.2,1);
}

/* ============ 广告解锁遮罩 ============ */
/* padding 必须与安全区叠加：纯 env() 在桌面/模拟器上为 0，会把 Tailwind p-4 的 16px 内边距也吃掉（弹窗全出血） */
#qtGateMask {
  height: 100vh;
  height: 100dvh;
  padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
           calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
  overflow-y: auto;
}
/* 手机端：面板从顶部开始、撑满可用空间（100dvh - 遮罩上下各 1rem 内边距） */
#qtGateMask.flex { display: flex; align-items: flex-start; justify-content: center; }
#qtGateBox img, #qtGateBox ins, #qtGateBox iframe { max-width: 100%; height: auto; }

/* ---- 广告弹窗进出场动画（电脑/手机同一套） ----
   打开：JS 加 .qt-gate-show → 遮罩淡入 + 面板从下方轻弹上滑；
   关闭：JS 先加 .qt-gate-leave 播退场（120ms）再切 hidden，退场干脆不拖沓。 */
#qtGateMask .qt-gate-panel {
  opacity: 0;
  transform: translateY(24px) scale(.97);
  /* 手机端撑满可用空间（原内联样式移入 CSS，避免压过下方桌面端 @media 规则） */
  height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
#qtGateMask.qt-gate-show .qt-gate-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: qtGatePanelIn .32s cubic-bezier(.34, 1.4, .64, 1) both;
}
#qtGateMask.qt-gate-show { animation: qtGateFadeIn .22s ease both; }
#qtGateMask.qt-gate-leave { animation: qtGateFadeOut .12s ease both; }
#qtGateMask.qt-gate-leave .qt-gate-panel { animation: none; }
@keyframes qtGateFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qtGateFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes qtGatePanelIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* banner 横幅广告入场（与弹窗同一套节奏） */
@keyframes qtGateSlideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes qtGateSlideUp   { from { opacity: 0; transform: translateY(100%);  } to { opacity: 1; transform: translateY(0); } }
/* 系统开了「减弱动态效果」时退化为纯淡入淡出（无障碍 + 省电） */
@media (prefers-reduced-motion: reduce) {
  #qtGateMask.qt-gate-show .qt-gate-panel { animation: none; opacity: 1; transform: none; }
  #qtGateMask.qt-gate-leave .qt-gate-panel { animation: none; }
}

/* ---- 桌面端（≥768px）：弹窗高度改为自适应内容 + 垂直居中 ----
   手机端保持内联样式撑满可用空间（近全屏）；桌面近全屏比例怪异，
   改为按内容自动收缩、最高 86vh，配合遮罩 items-center 垂直居中。 */
@media (min-width: 768px) {
  #qtGateMask.flex { align-items: center; }
  #qtGateMask .qt-gate-panel {
    height: auto;
    max-height: 86vh;
  }
  /* 自适应高度下广告区给足展示空间：内容少时面板收缩，内容多时最高 86vh 内部滚动 */
  #qtGateMask .qt-gate-panel #qtGateBox { min-height: 220px; }
}

/* ============ 安全区域 ============ */
@supports (padding: env(safe-area-inset-bottom)) {
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============ 页脚 ============ */
footer { background: #0f172a; color: #94a3b8; }
.footer-extra { margin-top: .5rem; font-size: 12px; opacity: .8; }

/* ============ 后台管理专用 ============ */

/* ============ 集中响应式断点 ============ */
/* 中等屏幕及以下（≤1024px） */
@media (max-width: 1024px) {
  /* 首页功能卡更紧凑 */
  .feature-card:hover { transform: none; }
}

/* 平板（≤768px） */
@media (max-width: 768px) {
  /* 卡片圆角略小，节省视觉空间 */
  .card { border-radius: .875rem; }
  /* 移动端优化：确保按钮有足够大的触摸目标 */
  .btn { min-height: 44px; min-width: 44px; }
  /* 移动端导航优化 */
  .qt-navmenu { max-height: 70vh; max-height: 70dvh; overflow-y: auto; }
}

/* 手机（≤640px） */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .card { border-radius: .875rem; }
  .preview-grid-4 { max-width: 200px; }
  .drop-zone { padding: 1rem; }
  /* 长图横切：移动端横向滚动优化 */
  .preview-grid-n { -webkit-overflow-scrolling: touch; }
  .preview-grid-n img { max-height: 140px; width: auto; }
}

/* 小屏手机（≤480px） */
@media (max-width: 480px) {
  .drop-zone { padding: 0.75rem; }
  #panelArea h2 { font-size: 1.05rem; }
  /* 按钮在小屏更紧凑 */
  .btn { padding-left: .75rem; padding-right: .75rem; }
}

/* ============ 响应式工具类兜底 ============ */
/* 顶部导航悬浮：预编译 tailwind.min.css 缺失 sticky/top-0/z-40 类，补齐使 header 吸顶生效 */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-40 { z-index: 40; }
/* v4：预编译 tailwind.min.css 缺失模板用到的全部 sm: / lg: 变体（含 dark: / hover:），
   导致首页功能卡、后台表单、导航栏等在桌面/移动端退化为单列、图标不切换。
   style.css 在 tailwind.min.css 之后加载，这里原生补齐，恢复响应式布局。 */

/* sm: ≥640px */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline { display: inline; }
  .sm\:hidden { display: none; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:mx-0 { margin-left: 0; margin-right: 0; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-right { text-align: right; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* lg: ≥1024px */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* hover: 变体兜底 */
.hover\:text-pink-600:hover { color: #4f46e5; }

/* v4 兜底：信任指标条等用到的工具类（tailwind.min.css 未编译） */
.inline-flex { display: inline-flex; }
.gap-y-2 { row-gap: .5rem; }
.gap-1\.5 { gap: .375rem; }
.w-3\.5 { width: .875rem; }
.h-3\.5 { height: .875rem; }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }

/* 首页 Hero 信任指标条 */
.hero-trust { max-width: 42rem; margin-left: auto; margin-right: auto; }
.hero-trust svg { flex-shrink: 0; }

/* ============ v4 兜底：渐变色板（tailwind.min.css 未编译的色值与工具类） ============
   首页功能卡片与顶部菜单的图标渐变背景因缺少这些类而显示空白，这里按
   Tailwind v4 官方默认色板补齐（style.css 在 tailwind.min.css 之后加载）。 */
:root {
  --color-orange-400: oklch(75% .183 55.934);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-lime-500: oklch(76.8% .233 130.85);
  --color-pink-400: oklch(74.2% .11 348.509);
  --color-fuchsia-500: oklch(66.7% .295 322.15);
  --color-cyan-500: oklch(71.5% .143 215.221);
}
.from-pink-50    { --tw-gradient-from: var(--color-pink-50);    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.from-fuchsia-500{ --tw-gradient-from: var(--color-fuchsia-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-pink-500   { --tw-gradient-to: var(--color-pink-500);   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-pink-50    { --tw-gradient-to: var(--color-pink-50);    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

.border-pink-100 { border-color: var(--color-pink-100); }

/* 次要渐变与边框类兜底（app.php 渐隐条 / index.php 时间轴连线 / cutter.js AI 推荐条 / wenan.js hover 等） */
:root {
  --color-sky-50: oklch(98.4% .014 240.841);
  --color-sky-100: oklch(95.1% .026 236.824);
  --color-violet-50: oklch(97% .014 308.299);
  --color-slate-200: oklch(92.9% .013 255.508);
}
.from-pink-100 { --tw-gradient-from: var(--color-pink-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.from-sky-50     { --tw-gradient-from: var(--color-sky-50);     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

.to-transparent  { --tw-gradient-to: transparent;               --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-pink-100   { --tw-gradient-to: var(--color-pink-100);   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-violet-50    { --tw-gradient-to: var(--color-violet-50);    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

.border-sky-100 { border-color: var(--color-sky-100); }

.hover\:from-pink-100:hover { --tw-gradient-from: var(--color-pink-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

/* ============ 配色统一：粉紫品牌色兜底（2026-08-27） ============
   按钮/激活态/信息条统一为粉紫品牌色，补齐 tailwind.min.css 未编译的 purple 工具类。 */
:root {
  --color-purple-50: oklch(97% .014 308.299);
  --color-purple-100: oklch(94.6% .028 294.588);
  --color-purple-200: oklch(89.4% .057 293.283);
  --color-purple-300: oklch(81.1% .111 293.571);
  --color-pink-300: oklch(82.3% .12 346.018);
}
.text-purple-500   { color: var(--color-purple-500); }
.hover\:border-pink-300:hover { border-color: var(--color-pink-300); }

.from-purple-50  { --tw-gradient-from: var(--color-purple-50);  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.from-purple-100 { --tw-gradient-from: var(--color-purple-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-purple-100   { --tw-gradient-to: var(--color-purple-100);   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.hover\:from-purple-100:hover { --tw-gradient-from: var(--color-purple-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.hover\:to-pink-100:hover     { --tw-gradient-to: var(--color-pink-100);    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

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

/* ============ v4 兜底：全站缺失工具类补全（2026-08-23） ============
   预编译 tailwind.min.css 未随页面类名同步更新，导致首页 H1 字号退化、
   功能卡网格塌陷、菜单/按钮间距缺失等错位。style.css 在
   tailwind.min.css 之后加载，此处按 Tailwind v4 默认值原生补齐。 */

/* —— 字号 / 字重 / 字距 —— */
.text-4xl        { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl        { font-size: 3.75rem; line-height: 1; }
.font-extrabold  { font-weight: 800; }
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wide   { letter-spacing: 0.025em; }
.leading-none    { line-height: 1; }
.break-all       { word-break: break-all; }
.text-\[11px\]   { font-size: 11px; }

@media (min-width: 640px) {
  .sm\:text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-6xl  { font-size: 3.75rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
}

/* —— 颜色（透明度 / 色板） —— */
.text-white\/85 { color: rgba(255,255,255,.85); }
.text-white\/90 { color: rgba(255,255,255,.9); }
.bg-white\/15   { background-color: rgba(255,255,255,.15); }
.bg-white\/20   { background-color: rgba(255,255,255,.2); }
.bg-white\/95   { background-color: rgba(255,255,255,.95); }
.bg-black\/70   { background-color: rgba(0,0,0,.7); }
.border-white\/40 { border-color: rgba(255,255,255,.4); }
.bg-amber-100   { background-color: #fef3c7; }
.bg-emerald-400 { background-color: #34d399; }
.text-amber-800 { color: #92400e; }
.text-rose-600  { color: #e11d48; }
.border-transparent { border-color: transparent; }
.border-2       { border-width: 2px; }

/* —— 背景模糊 / 渐变方向 —— */
.backdrop-blur {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.from-transparent {
  --tw-gradient-from: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.p-10     { padding: 2.5rem; }
.px-3\.5  { padding-left: .875rem; padding-right: .875rem; }
.px-8     { padding-left: 2rem; padding-right: 2rem; }
.py-1\.5  { padding-top: .375rem; padding-bottom: .375rem; }
.py-2\.5  { padding-top: .625rem; padding-bottom: .625rem; }
.mb-1\.5  { margin-bottom: .375rem; }
.mb-14    { margin-bottom: 3.5rem; }
.ml-2     { margin-left: .5rem; }
.gap-x-8  { column-gap: 2rem; }
.gap-y-3  { row-gap: .75rem; }
.gap-y-5  { row-gap: 1.25rem; }
.h-1\.5   { height: .375rem; }
.h-9      { height: 2.25rem; }
.h-px     { height: 1px; }
.w-1\.5   { width: .375rem; }
.min-h-10 { min-height: 2.5rem; }
.last\:mb-0:last-child { margin-bottom: 0; }

/* —— 尺寸 / 定位 —— */
.max-w-xs   { max-width: 20rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-full { max-width: 100%; }
.max-h-\[420px\] { max-height: 420px; }
.inset-3    { inset: .75rem; }
.right-0    { right: 0; }
.top-full   { top: 100%; }
.origin-top-right { transform-origin: top right; }
.pointer-events-none { pointer-events: none; }
.opacity-20 { opacity: .2; }

/* —— 环形描边（ring） —— */
.ring-1 { --tw-ring-color: rgba(0,0,0,.1); box-shadow: 0 0 0 1px var(--tw-ring-color); }
.ring-black\/5 { --tw-ring-color: rgba(0,0,0,.05); }

/* —— 滚动吸附（创意模板横滑） —— */
.snap-x     { scroll-snap-type: x proximity; }
.snap-start { scroll-snap-align: start; }

/* —— 过渡 —— */
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

/* —— hover / group-hover 变体 —— */
.hover\:bg-pink-50:hover    { background-color: #eef2ff; }
.hover\:bg-white\/25:hover    { background-color: rgba(255,255,255,.25); }
.hover\:bg-white\/30:hover    { background-color: rgba(255,255,255,.3); }
.hover\:border-pink-100:hover { border-color: #f1f5f9; }
.hover\:border-white\/60:hover { border-color: rgba(255,255,255,.6); }
.hover\:text-white:hover      { color: #fff; }
.hover\:text-pink-500:hover { color: #6366f1; }
.hover\:opacity-100:hover     { opacity: 1; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }
.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}
.group:hover .group-hover\:bg-white\/30 { background-color: rgba(255,255,255,.3); }
.group:hover .group-hover\:shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

/* ============ 返回顶部按钮 ============ */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 8.5rem;
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top svg { width: 1.25rem; height: 1.25rem; }
.back-to-top:hover { filter: brightness(1.05); }
.back-to-top:active { transform: translateY(0); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 640px) {
  .back-to-top { right: .875rem; bottom: calc(7.25rem + env(safe-area-inset-bottom)); width: 2.5rem; height: 2.5rem; }
}

/* ============ 手机右上角菜单图标样式 ============ */
#navMenu a > span:first-child svg {
  color: #ffffff;
  stroke: #ffffff;
  width: 1rem;
  height: 1rem;
}

/* ============ 一寸照裁剪 & 图片压缩 通用 ============ */
.yicun-app, .yasuo-app { max-width: 900px; margin: 0 auto; }

/* 一寸照 */
.yicun-header { display: flex; justify-content: center; margin-bottom: 1rem; }
.yicun-specs { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.yicun-spec-btn {
  padding: 0.4rem 0.8rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.yicun-spec-btn:hover { border-color: #4f46e5; color: #4f46e5; }
.yicun-spec-btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }

.yicun-workspace { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.yicun-canvas-wrap {
  position: relative;
  background: #f9fafb;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  transition: border-color 0.15s;
}
.yicun-canvas-wrap.drag-over { border-color: #4f46e5; background: #faf5ff; }
.yicun-canvas-wrap canvas { max-width: 100%; height: auto; cursor: move; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.yicun-empty {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7280;
  background: rgba(249, 250, 251, 0.92);
  border-radius: 8px;
  z-index: 2;
}
.yicun-empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.yicun-empty p { margin: 0.25rem 0; }

.yicun-preview {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 420px;
  padding-top: 1rem;
}
.yicun-preview-label { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }
.yicun-preview-box { display: inline-block; padding: 0.5rem; background: #f9fafb; border-radius: 8px; }

.yicun-controls {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.yicun-control-group { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.yicun-control-group label { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.yicun-control-group input[type=range] { width: 150px; }
.yicun-control-group span { font-size: 0.75rem; color: #374151; font-weight: 600; min-width: 50px; }
.yicun-control-group .btn { margin: 0; }

.yicun-tip { text-align: center; font-size: 0.75rem; color: #9ca3af; margin-top: 0.75rem; }
.yicun-controls { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; align-items: flex-end; }
.yicun-bg-group .yicun-bg-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.yicun-bg-btn {
  min-width: 34px; height: 30px; padding: 0 0.55rem;
  border: 1px solid #e5e7eb; border-radius: 7px; background: #fff;
  font-size: 0.78rem; cursor: pointer; color: #374151; transition: all .15s;
}
.yicun-bg-btn:hover { border-color: #4f46e5; }
.yicun-bg-btn.active { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(124,58,237,.18); }
.yicun-bg-custom { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); color: #fff !important; }
.yicun-bg-color { width: 38px; height: 30px; padding: 0; border: 1px solid #e5e7eb; border-radius: 7px; cursor: pointer; }
.yicun-custom-size { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.yicun-custom-size .yasuo-num { width: 78px; }
.yicun-custom-size .yicun-custom-unit { font-size: 0.75rem; color: #6b7280; }

/* 图片压缩 */
.yasuo-app .yasuo-controls-section {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
}
.yasuo-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.yasuo-row:last-child { margin-bottom: 0; }
.yasuo-control { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 180px; }
.yasuo-control label { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.yasuo-ctrl-note { color: #94a3b8; font-weight: 400; }
.yasuo-slider-row { display: flex; align-items: center; gap: 0.5rem; }
.yasuo-slider-row input[type=range] { flex: 1; }
.yasuo-slider-row span { font-size: 0.8rem; font-weight: 600; color: #374151; min-width: 45px; }
.yasuo-num {
  padding: 0.4rem 0.6rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100px;
}
.yasuo-num:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }

.yasuo-upload {
  background: #fff;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 1rem;
}
.yasuo-upload:hover, .yasuo-upload.drag-over { border-color: #4f46e5; background: #faf5ff; }
.yasuo-upload-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.yasuo-upload p { color: #6b7280; margin: 0.25rem 0; }
.yasuo-hint { font-size: 0.75rem; color: #9ca3af; }

.yasuo-results {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
}
.yasuo-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #374151;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.yasuo-summary .yasuo-reduction { color: #059669; font-weight: 600; }
.yasuo-summary .yasuo-increase { color: #dc2626; font-weight: 600; }

.yasuo-list { display: flex; flex-direction: column; gap: 0.5rem; }
.yasuo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 8px;
}
.yasuo-item-info { flex: 1; min-width: 0; }
.yasuo-item-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yasuo-reduction { color: #059669; font-weight: 600; }
.yasuo-increase { color: #dc2626; font-weight: 600; }
.yasuo-item-actions { display: flex; gap: 0.3rem; }

.yasuo-batch-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.yasuo-tip { text-align: center; font-size: 0.75rem; color: #9ca3af; }

/* 下载按钮 UI 优化（一寸照 / 图片压缩） */
.yicun-download-group { flex-basis: 100%; align-items: stretch !important; margin-top: 0.25rem; }
.yicun-download-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}
.yasuo-download-all {
  flex: 1 1 auto;
  min-width: 200px;
  padding: 0.7rem 1.25rem;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}
.yasuo-download-one { font-weight: 600; }
#yasuoQualityVal.updating { color: #4f46e5; }
@media (max-width: 480px) {
  .yasuo-batch-actions { flex-direction: column; }
  .yasuo-download-all { width: 100%; }
}
.yasuo-filter-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* 原来只写了 justify-content 没写 display:flex，居中与横向排布全部失效，
   手机上「开始压缩」和快捷预设会挤成一团、预设标签被裁切 */
.yasuo-compress-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .5rem; margin-top: 0.5rem;
}
.yasuo-preset-btns {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .35rem;
}
.yasuo-preset-btns .btn { flex: 0 1 auto; }

.yasuo-uncompressed { color: #9ca3af; font-style: italic; }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

/* ============ 一寸照 / 图片压缩 UI 美化 ============ */
/* 规格按钮：卡片化 + 尺寸副标题 + 粉紫选中态 */
.yicun-spec-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 74px; padding: .45rem .7rem;
  border: 1.5px solid #e9d5ff; border-radius: 12px; background: #fff;
  color: #4b5563; font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.yicun-spec-btn:hover { border-color: #c4b5fd; background: #faf5ff; transform: translateY(-1px); }
.yicun-spec-btn.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 16px rgba(139, 92, 246, .28);
}
.yicun-spec-size { font-size: .66rem; opacity: .8; font-weight: 400; }

/* 工作区 / 空状态 */
.yicun-canvas-wrap {
  border: 2px dashed #e5e7eb; border-radius: 16px;
  background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .04);
  transition: border-color .2s;
}
.yicun-canvas-wrap.drag-over { border-color: #a78bfa; background: #f5f3ff; }
.yicun-empty-icon { font-size: 2.75rem; margin-bottom: .5rem; filter: drop-shadow(0 4px 8px rgba(139, 92, 246, .18)); }
.yicun-empty p { color: #6b7280; margin-bottom: .75rem; font-size: .85rem; }
.yicun-preview-box { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); background: #fff; }

/* 控制区：分组卡片 + 滑块美化 */
.yicun-controls { gap: .75rem; }
.yicun-control-group {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 12px;
  padding: .55rem .75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  min-width: 150px; flex: 1 1 auto;
}
.yicun-control-group label { font-size: .72rem; color: #64748b; font-weight: 600; letter-spacing: .02em; }
.yicun-control-group input[type=range],
.yasuo-slider-row input[type=range] {
  flex: 1; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #c7d2fe, #6366f1);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.yicun-control-group input[type=range]::-webkit-slider-thumb,
.yasuo-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand);
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.yicun-control-group input[type=range]::-moz-range-thumb,
.yasuo-slider-row input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--brand);
  background: #fff;
}
.yicun-download-btn { border-radius: 12px; font-weight: 600; }
.yicun-tip, .yasuo-tip { line-height: 1.6; }

/* 图片压缩：上传区 / 结果卡片 */
.yasuo-upload {
  border-radius: 16px; border: 2px dashed #ddd6fe;
  background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.yasuo-upload:hover, .yasuo-upload.drag-over { border-color: #a78bfa; transform: translateY(-1px); }
.yasuo-upload-icon { filter: drop-shadow(0 4px 8px rgba(139, 92, 246, .18)); }
.yasuo-results, .yasuo-controls-section { border: 1px solid #f1f5f9; border-radius: 14px; }
.yasuo-item {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 12px;
  padding: .6rem .7rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow .18s, transform .18s;
}
.yasuo-download-all { border-radius: 12px; }

@media (max-width: 560px) {
  .yicun-specs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
  .yicun-control-group { min-width: 100%; }
  .yicun-control-group input[type=range] { width: 100%; }
}

/* 图片压缩：卡片化改造（①原照片预览 ②压缩设置 ③Logo ④去水印 各自独立） */
.yasuo-app .yasuo-card {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 14px;
  padding: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); margin-bottom: 1rem;
}
.yasuo-card-title {
  font-size: .82rem; font-weight: 600; color: #334155; margin-bottom: .2rem;
}

/* 大图预览区（压缩效果 / 转换结果，与原照片预览一致） */
.yasuo-big-preview {
  display: flex; flex-direction: column; align-items: center;
  background: #f8fafc; border-radius: 12px;
  padding: 1rem; margin-bottom: .6rem;
  width: 100%; box-sizing: border-box;
}
/* 【手机端错位修复】align-items:center 会让子项按 fit-content 计算宽度，
   而内部 .yasuo-info-row b 的 max-width:70% 在 fit-content 下解析异常，
   信息行被内容撑到 430px+，左右同时溢出卡片（left 变负数）。
   显式撑满宽度后，百分比约束才能正常生效。 */
.yasuo-big-preview .yasuo-source-imgbox {
  margin: 0 auto; width: 100%; max-width: 100%; box-sizing: border-box;
}
.yasuo-big-preview .yasuo-source-info { width: 100%; max-width: 100%; }
/* 【手机端错位修复】大图预览的画布逻辑宽最大 480px，窄屏必须靠 CSS 收缩，
   否则会被 .yasuo-source-imgbox 的 overflow:hidden 裁掉右半边（看起来就是错位） */
.yasuo-source-imgbox canvas {
  max-width: 100%; height: auto; min-width: 0; display: block;
}

/* 缩略图条（选中态） */
.yasuo-thumb.active {
  border-color: #4f46e5;
  background: #f5f3ff;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .2);
}

/* ① 原照片预览 */
.yasuo-source-imgbox {
  background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px;
  padding: .5rem; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.yasuo-source-imgbox img {
  max-width: 100%; max-height: 320px; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 4px 14px rgba(15, 23, 42, .1); display: block;
}
.yasuo-source-info { margin-top: .6rem; display: flex; flex-direction: column; gap: .25rem; }
.yasuo-info-row {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-size: .78rem; color: #64748b; padding: .3rem .55rem;
  background: #f8fafc; border-radius: 8px;
}
.yasuo-info-row b {
  color: #334155; font-weight: 600; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yasuo-source-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .7rem; }
.yasuo-source-actions .btn { margin: 0; }

/* 总体统计：数据胶囊化，更醒目（覆盖旧的纯文字横排） */
.yasuo-summary {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .8rem;
  background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
  border-radius: 10px;
  padding: .6rem .7rem;
  border-bottom: none;
  margin-bottom: .75rem;
}
.yasuo-summary > span {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: .25rem .55rem;
  color: #64748b;
}

/* 结果列表：紧凑横向布局（左小缩略图 + 中信息列 + 右下载按钮，批量浏览更高效） */
.yasuo-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.yasuo-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow .18s, transform .18s;
}
.yasuo-item:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.yasuo-item-imgbox {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.yasuo-item-imgbox canvas {
  width: auto; height: auto; max-width: 100%; max-height: 100%; display: block;
}
.yasuo-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.yasuo-item .yasuo-info-row {
  background: transparent; padding: .1rem 0; border-radius: 0;
  justify-content: flex-start; gap: .6rem;
}
.yasuo-item .yasuo-info-row span { flex: 0 0 2.4em; color: #94a3b8; }
/* min-width:0 必须显式写：flex 子项默认 min-width:auto 会被长文本顶开，
   320px 极窄屏下「体积 → 体积 -36%」会溢出信息列 */
.yasuo-item .yasuo-info-row b { flex: 1; min-width: 0; max-width: none; }
.yasuo-item-actions { flex: 0 0 auto; display: flex; gap: .3rem; }
.yasuo-item-actions .btn { margin: 0; }

/* ① 区缩略图墙：已传文件一目了然，可单独移除 */
.yasuo-card-badge {
  display: inline-block;
  margin-left: .45rem;
  padding: .08rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #e0e7ff;
  color: #4f46e5;
  font-size: .68rem;
  font-weight: 600;
  vertical-align: middle;
}
.yasuo-thumbs-view { margin-bottom: .25rem; }
.yasuo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .6rem;
}
.yasuo-thumb {
  position: relative;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: .3rem .3rem .25rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: box-shadow .18s, transform .18s;
}
.yasuo-thumb:hover { box-shadow: 0 4px 10px rgba(15, 23, 42, .1); transform: translateY(-1px); }
.yasuo-thumb-img {
  max-width: 100%; max-height: 88px; width: 100%;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.yasuo-thumb-img canvas {
  max-width: 100%; max-height: 84px; width: auto; height: auto; display: block;
}
.yasuo-thumb-name {
  max-width: 100%;
  font-size: .66rem; color: #475569; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.yasuo-thumb-meta {
  font-size: .58rem; color: #64748b; line-height: 1.2; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yasuo-thumb-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: #ef4444; color: #fff;
  font-size: 11px; line-height: 20px; text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .4);
  transition: transform .15s, background .15s;
}
.yasuo-thumb-remove:hover { background: #dc2626; transform: scale(1.12); }

@media (max-width: 560px) {
  .yasuo-item { flex-wrap: wrap; gap: .55rem; }
  /* 手机端：开始压缩占满一行，预设按钮居中换行，避免文字被裁 */
  .yasuo-compress-row { flex-direction: column; align-items: stretch; }
  .yasuo-compress-row .yasuo-download-all { width: 100%; min-width: 0; }
  .yasuo-preset-label { flex: 1 1 100%; text-align: center; }
  .yasuo-big-preview { padding: .65rem; }
  .yasuo-source-actions { flex-wrap: wrap; }
  .yasuo-item-imgbox { width: 64px; height: 64px; }
  .yasuo-item-actions { flex: 1 1 100%; }
  .yasuo-item-actions .btn { flex: 1; justify-content: center; }
  .yasuo-thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .45rem; }
}

/* 320px 这一档（iPhone SE 一代等）信息列只剩 ~196px，
   「234.5 KB → 120.9 KB -48%」会被 nowrap+ellipsis 从中间裁掉后半段，
   这里放开换行让体积与百分比完整显示 */
@media (max-width: 400px) {
  .yasuo-item .yasuo-info-row b {
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35;
  }
}

/* ============ 工具面板窄屏防溢出（320/360/390 档） ============ */
/* 根因：#panelArea 是 grid 子项，默认 min-width:auto → 其“最小宽度”由内容决定。
   <input type=range> 作为 flex 子项时的 min-content 恒为 129px（浏览器内置宽度），
   于是「标签 + 滑杆 + 数值」这一行最少要 257px，套上父级 p-3(24px)+边框(2px)
   变成 283px，再套 #panelArea 的 p-5(40px)+边框(2px) 就是 325px。
   而 320px 视口下卡片格子只有 288px —— 超出的 37px 被 html{overflow-x:clip}
   静默裁掉，表现为：下拉箭头、滑杆数值、虚线框右边“看着没错、实际被切”。
   修复思路：放开「不可收缩」的下限（min-width:0），并给替换元素限宽。
   注意：这里只加 min-width/max-width，不覆盖 width，避免影响
   .yicun-control-group input[type=range]{width:150px} 之类的既有尺寸。 */
#panelArea { min-width: 0; }
#panelArea input,
#panelArea select,
#panelArea textarea,
#panelArea canvas,
#panelArea img,
#panelArea video {
  min-width: 0;
  max-width: 100%;
}
/* flex/grid 容器同样默认 min-width:auto，长文本/固定宽子项会把行顶宽 */
#panelArea .flex,
#panelArea .grid { min-width: 0; }

/* 最窄档：卡片内边距 20px → 13.6px，为内容再让出 ~13px（仅窄屏生效） */
@media (max-width: 400px) {
  #panelArea.card { padding: .85rem; }
}

/* ============ 文字颜色可读性优化（保留动画与布局，仅提升对比度） ============ */
/* 说明：slate-400(#94a3b8) / gray-400(#9ca3af) 在白底上对比度仅约 2.5:1，长时间阅读吃力；
   统一提升到 slate-500(#64748b)，对比度约 4.8:1（达到 WCAG AA），
   同时仍弱于 slate-600/700，不破坏原有的信息层级。 */
.text-slate-400,
.yasuo-hint,
.yicun-tip,
/* 占位符/极弱提示：从 slate-300 提到 slate-400，保证能看清 */
.text-slate-300 { color: #94a3b8; }
/* 链接与强调文字：加深一档，更醒目也更易读 */
.text-violet-600 { color: #6d28d9; }
.text-purple-600 { color: #7e22ce; }

/* ============ 全局UI美化 ============ */

/* 按钮悬停微交互 */
.btn:not(:disabled) { transition: all .2s cubic-bezier(.4,0,.2,1); }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: scale(.97) translateY(0); }

/* 主按钮光泽效果 */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .5s ease;
}
.btn-primary:hover::after { left: 100%; }

/* 卡片悬停增强 */
.card-hover { transition: box-shadow .25s ease, transform .25s ease; }
.card-hover:hover { box-shadow: 0 12px 40px rgba(168,85,247,.12); transform: translateY(-2px); }

/* 模式Tab美化 */
.mode-tab {
  position: relative;
  transition: all .2s ease;
}

/* 输入框聚焦效果 */
input[type=text]:focus, input[type=number]:focus, input[type=url]:focus,
input[type=search]:focus, select:focus, textarea:focus {
  /* 不写 outline:none —— 它的特异性高于文件末尾的 input:focus-visible，
     会把键盘焦点环整个抹掉，Tab 用户看不到焦点落在哪 */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .28);
}

/* 滑块美化 */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(90deg, #c7d2fe, #6366f1);
  border-radius: 999px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  background: #fff;
  border: 3px solid var(--brand);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
  transition: transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  background: #fff;
  border: 3px solid var(--brand);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}

/* 渐变按钮通用类 */
.gradient-brand {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  transition: all .2s ease;
}
.gradient-brand:hover {
  filter: brightness(1.05);
}

/* 下载区卡片优化 */
#sectionDownload .card-hover:hover { box-shadow: 0 8px 30px rgba(168,85,247,.1); }

/* 预览卡片动画 */
#previewMoments, #previewGrid {
  transition: all .25s ease;
}
#previewMoments:hover { transform: scale(1.01); }

/* 步骤指示器连接线 */

/* 图片加载骨架屏 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Toast 通知增强 */
.toast {
  animation: toastIn .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 图标按钮统一 */

/* 功能卡片悬停效果 */
/* 只声明实际变化的属性，避免 transition:all 覆盖首定义并触发不必要的重排/重绘 */
.feature-card {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(-3deg);
}
.feature-icon {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

/* 移动端适配优化 */
@media (max-width: 640px) {
  .feature-card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .card-hover:hover { transform: none; }
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(168,85,247,.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.45); }

/* 选中文字颜色 */
::selection {
  background: rgba(168,85,247,.2);
  color: inherit;
}

/* 动画关键帧 */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
/* 首屏胶囊呼吸：.hero-pill 一直引用 gentlePulse，但它从未被定义过，动画自上线起就没跑 */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* 分割线美化 */
hr, .divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin: 1.5rem 0;
}

/* 徽章/tag：只定尺寸与圆角。背景 / 文字色交给 HTML 上的工具类
   （原处写了 background + color，未分层规则会压掉 text-white / bg-gradient-*，
    导致「AI」徽章底色与字色同为 #6366f1，肉眼完全看不见） */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* 高级设置面板渐显 */
details[open] summary ~ * {
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ 公告弹窗样式 ============ */
.announcement-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.announcement-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.announcement-modal-box {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 400px;
  animation: announcementModalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes announcementModalIn {
  from { opacity: 0; transform: scale(0.9) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============ v 体验增强层（女性向 UI 美化 / 交互优化）============ */
/* 全站平滑滚动（reduced-motion 已在前面统一降级） */
html { scroll-behavior: smooth; }

/* 返回顶部：更柔和的悬浮微光 + 键盘焦点环 */
.back-to-top {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);
  box-shadow: 0 8px 22px rgba(99, 102, 241, .35);
}
.back-to-top.show { box-shadow: 0 12px 30px rgba(99, 102, 241, .52); }
.back-to-top:hover { filter: brightness(1.06); }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 分享链接悬浮按钮（与返回顶部组成右侧操作栈） */
.qt-share-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(99, 102, 241, .25);
  color: #6366f1;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .22);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.qt-share-fab svg { width: 1.25rem; height: 1.25rem; }
.qt-share-fab:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 12px 28px rgba(99, 102, 241, .32); }
.qt-share-fab:active { transform: scale(.94); }
.qt-share-fab:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
@media (max-width: 640px) {
  .qt-share-fab { right: .875rem; bottom: calc(4.25rem + env(safe-area-inset-bottom)); width: 2.5rem; height: 2.5rem; }
}

/* 创建到桌面悬浮按钮（位于分享按钮上方，电脑版 / 手机版通用） */
.qt-addhome-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(99, 102, 241, .25);
  color: #6366f1;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .22);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.qt-addhome-fab svg { width: 1.25rem; height: 1.25rem; }
.qt-addhome-fab:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 12px 28px rgba(99, 102, 241, .32); }
.qt-addhome-fab:active { transform: scale(.94); }
.qt-addhome-fab:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
/* 浏览器支持直接安装时，给一个更醒目的提示态 */
.qt-addhome-fab.available {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);
  color: #fff;
  border-color: transparent;
}
@media (max-width: 640px) {
  .qt-addhome-fab { right: .875rem; bottom: calc(.875rem + env(safe-area-inset-bottom)); width: 2.5rem; height: 2.5rem; }
}

/* ============================================================
   广告解锁弹窗 · 手机端重叠错位修复（根因修复）
   ------------------------------------------------------------
   根因：右下角悬浮按钮 .qt-share-fab / .qt-addhome-fab 是 z-index:60，
   而广告解锁弹窗 #qtGateMask 只有 z-50（60 > 50）。
   于是手机上这两个按钮会压在广告弹窗"之上"，而它们又固定在视口底部，
   视觉上就是「广告弹窗和 footer 重叠、严重错位」。
   之前只调弹窗内部尺寸（max-height / overflow）无效，因为问题在层级。
   修复：把广告弹窗提到 z-index:70（高于悬浮按钮 60，低于创建到桌面引导 80/1000）。
   ============================================================ */
#qtGateMask {
  z-index: 70;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(17, 24, 39, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* 广告弹窗打开时：隐藏右下角悬浮按钮与分享/引导弹窗（.qt-modal-mask 是 z-index:80，
   高于广告弹窗 70，不隐藏就会盖在广告之上，导致广告被挡住无法解锁） */
body.qt-gate-open .qt-share-fab,
body.qt-gate-open .qt-addhome-fab,
body.qt-gate-open .back-to-top,
body.qt-gate-open .qt-modal-mask {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 成品图保护：禁止拖拽另存、禁止选中、iOS 长按不弹「存储图像」菜单。
   纯 CSS 实现，无定时器 / 无 MutationObserver，零性能开销。
   桌面端右键菜单由 common.js 的 initResultImageGuard() 处理（只在右键时触发一次）。 */
#previewGrid img, #previewGrid canvas,
#previewMoments img, #previewMoments canvas,
#combinedPreview img, #combinedPreview canvas,
#dzImg, #dzPreview img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 广告弹窗期间冻结整页：禁止背景滚动，禁止操作任何功能/设置。
   说明：JS 会同时给这些区域加 inert（真正禁掉点击/输入/聚焦）；这里是老浏览器
   不支持 inert 时的兜底，并用 user-select 进一步避免误选背景内容。 */
body.qt-gate-open { overflow: hidden; }
body.qt-gate-open header,
body.qt-gate-open #main,
body.qt-gate-open footer,
body.qt-gate-open .mode-tabs-wrap {
  pointer-events: none;
  user-select: none;
}

/* 手机端：给 footer 留出底部空间，避免悬浮按钮长期压住页脚内容 */
@media (max-width: 640px) {
  /* 与上方 @supports 的 env(safe-area-inset-bottom) 叠加，避免这条媒体查询把它覆盖掉 */
  footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* 创建到桌面：引导弹窗 */
.qt-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.qt-modal-mask[hidden] { display: none; }
.qt-modal {
  width: min(92vw, 22rem);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  padding: 1.25rem 1.25rem 1.5rem;
  animation: qtPop .2s ease;
}
@keyframes qtPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.qt-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.qt-modal-title { font-size: 1rem; font-weight: 700; color: #1e293b; }
.qt-modal-close { width: 2rem; height: 2rem; border: none; border-radius: .6rem; background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 1rem; }
.qt-modal-close:hover { background: #e2e8f0; }
.qt-modal-sub { font-size: .82rem; color: #64748b; margin-bottom: .9rem; }
.qt-modal-steps { list-style: decimal; padding-left: 1.2rem; margin: 0; }
.qt-modal-steps li { font-size: .85rem; color: #334155; line-height: 1.5; margin-bottom: .5rem; }
.qt-modal-tip { font-size: .72rem; color: #64748b; margin-top: .9rem; border-top: 1px solid #f1f5f9; padding-top: .7rem; }

/* 备用分享面板：分享目标宫格（浏览器不支持系统分享时展示） */
.qt-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-bottom: .25rem; }
.qt-share-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .45rem 0; font-size: .72rem; color: #475569; text-decoration: none; background: transparent; border: none; border-radius: .6rem; cursor: pointer; font-family: inherit; }
.qt-share-item:hover { background: #f8fafc; }

/* 分享文案区：可切换文案 + 一键复制「文案+网址」 */
.qt-share-copy { background: #faf5ff; border: 1px solid #f3e8ff; border-radius: .75rem; padding: .6rem .65rem .7rem; margin-bottom: .9rem; }
.qt-share-copy-label { font-size: .72rem; color: #7c3aed; font-weight: 600; margin-bottom: .4rem; }
.qt-share-presets { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.qt-share-preset { font-size: .7rem; color: #6d28d9; background: #fff; border: 1px solid #e9d5ff; border-radius: 999px; padding: .18rem .55rem; cursor: pointer; font-family: inherit; }
.qt-share-preset:hover { background: #f5f3ff; }
.qt-share-preset.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.qt-share-textarea {
  width: 100%; font-size: .76rem; line-height: 1.55; color: #334155;
  border: 1px solid #e9d5ff; border-radius: .55rem; padding: .45rem .5rem;
  background: #fff; resize: vertical; font-family: inherit; box-sizing: border-box;
}
.qt-share-copy-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.qt-share-copy-btn {
  flex: 1; font-size: .76rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none; border-radius: .55rem; padding: .45rem .5rem; cursor: pointer; font-family: inherit;
}
.qt-share-copy-btn:hover { filter: brightness(1.06); }
.qt-share-copy-btn:active { transform: scale(.97); }
.qt-share-copy-btn.ghost { color: #7c3aed; background: #fff; border: 1px solid #e9d5ff; }
.qt-share-badge { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .02em; }

/* 功能卡片：悬浮渐变顶边 + 柔光 + 键盘焦点环 */
.feature-card { border: 1px solid rgba(99, 102, 241, .14); }
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c7d2fe, #818cf8, #6366f1);
  opacity: 0;
  transition: opacity .3s ease;
}
.feature-card:hover { border-color: rgba(99, 102, 241, .35); box-shadow: 0 14px 38px rgba(99, 102, 241, .2); }
.feature-card:hover::before,
.feature-card:focus-visible::before { opacity: 1; }
.feature-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .35), 0 14px 38px rgba(99, 102, 241, .2); }

/* 步骤环：轻微缩放呼吸，强调“进行中”的引导感 */
.step-ring { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover .step-ring { transform: scale(1.06); }

/* 首屏胶囊轻微呼吸，引导视线 */
.hero-pill { animation: gentlePulse 3.2s ease-in-out infinite; }

/* 统一键盘焦点可见性（无障碍） */
a:focus-visible,
button:focus-visible,
.mode-tab:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 图片懒加载占位：淡入，减少移动端长页面的跳动感 */
img[loading="lazy"] { transition: opacity .3s ease; }

/* ============================================================
   以下由 includes/header.php 的页面内联 <style> 迁移而来（2026-08-28）。
   原因：当前 tailwind.min.css 构建缺失下列渐变工具类（共 19 个），
   原本以页面内联方式补足。现统一放外部样式表，既保留视觉、又去掉每页 HTML 里的重复 CSS 体积。
   若日后重建 tailwind 构建并包含这些类，此段可整体删除。
   ============================================================ */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-pink-500 { --tw-gradient-from: #6366f1; --tw-gradient-to: rgba(99, 102, 241, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-fuchsia-500 { --tw-gradient-from: var(--color-fuchsia-500); --tw-gradient-to: rgba(99, 102, 241, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-to: rgba(99, 102, 241, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-pink-500 { --tw-gradient-to: #6366f1; }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }

/* ============ 补漏：首页功能卡片 + 右上角菜单图标渐变（导致图标"空白"的元凶） ============
   原因：tailwind.min.css 是 v4 构建，但 style.css 里早期那批补丁写的是 v4 语法
   var(--color-pink-400) 等令牌 —— 而这些 --color-* 变量在本构建里根本不存在，
   渐变解析为无效值 → 背景透明 → 白色描边 SVG 在白底上完全看不见，表现为"图标空白"。
   这里用不依赖任何变量的十六进制写法（与上方生效的补丁同款），放在最后以覆盖失效的旧定义。 */
.from-purple-400  { --tw-gradient-from: #a78bfa; --tw-gradient-to: rgba(167, 139, 250, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-purple-400    { --tw-gradient-to: #a78bfa; }
.to-purple-500    { --tw-gradient-to: #6366f1; }

/* 兜底底色：即便将来再有渐变类缺失/失效，图标底色仍是品牌紫，白色 SVG 不会"消失" */
.feature-card .feature-icon { background-color: #6366f1; }
#navMenu a > span:first-child { background-color: #6366f1; }

/* 效果示意数字格子（首页/玩法示例用） */
.demo-cell {
  position: relative;
  border-radius: 6px;
  background-color: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -4px 9px rgba(0,0,0,.14);
  overflow: hidden;
}
.demo-cell > span { position: relative; z-index: 1; }
.demo-cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}
.demo-cell.circle { border-radius: 50%; }

/* === 全局禁用图片/画布长按菜单（防止 iOS/Android 弹"保存图片"干扰拖拽操作）===
   覆盖范围：#app 内所有 img/canvas/draggable 元素。
   排除范围：成品预览区（#previewGrid/#previewMoments/#combinedPreview/#sectionDownload）允许长按保存。 */
#app img:not(#previewGrid img):not(#previewMoments img):not(#combinedPreview img),
#app canvas:not(#previewGrid canvas):not(#previewMoments canvas):not(#combinedPreview canvas),
#app [draggable="true"] {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
/* 触屏长按 250ms 不触发系统菜单（部分安卓浏览器需要） */
#app img:not(#previewGrid img):not(#previewMoments img):not(#combinedPreview img),
#app canvas:not(#previewGrid canvas):not(#previewMoments canvas):not(#combinedPreview canvas) {
  touch-action: manipulation;
}

/* ============================================================
   全站审计收尾（2026-09-17）
   ============================================================ */
/* 219 行 *{-webkit-tap-highlight-color:transparent} 抹掉了安卓点按高亮，
   而这些元素又没有 :active 态 → 点按零反馈，这里补回来 */
#navMenu a:active,
footer a:active,
.feature-card:active { background-color: #eef2ff; }

/* 尊重系统「减弱动态效果」偏好（前庭敏感用户 / 省电模式） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 手机端触摸目标 ≥44px：小圆点保持视觉尺寸，用伪元素把热区扩到约 44px */
@media (max-width: 640px) {
  .seg button,
  .mode-tab,
  .filter-preset-btn,
  .yicun-bg-btn,
  .yicun-spec-btn { min-height: 44px; }
  .qt-modal-close { width: 44px; height: 44px; }
  .slot-btn,
  .yasuo-thumb-remove { width: 26px; height: 26px; font-size: 12px; }
  .slot-btn::after,
  .yasuo-thumb-remove::after { content: ''; position: absolute; inset: -9px; }
}