/* ============ 网站字体（按需加载，选中字体时才下载） ============ */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('../fonts/HarmonyOS-Sans-SC.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'PingFang SC';
  src: url('../fonts/PingFang-SC.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Bahnschrift';
  src: url('../fonts/Bahnschrift.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'SF Compact Text';
  src: url('../fonts/SFCompactText.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'WeChat Sans Std';
  src: url('../fonts/WeChatSansStd-Medium.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/RobotoMono.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Alipay Number';
  src: url('../fonts/AlipayNumber.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'MiSans';
  src: url('../fonts/MiSans-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'OPPOSans';
  src: url('../fonts/OPPOSans-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --green: #20a53a;
  --green-dark: #17882e;
  --ink: #22302a;
  --gray: #6b7a72;
  --line: #e3eae5;
  --bg: #f4f7f5;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(31, 60, 43, .08);
}

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

[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--green); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============ 头部 ============ */
.site-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(227, 234, 229, .9);
  box-shadow: 0 2px 14px rgba(31, 60, 43, .06);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); }
.logo-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #2ecb52, var(--green));
  color: #fff; display: grid; place-items: center; font-size: 21px;
  box-shadow: 0 4px 12px rgba(32, 165, 58, .35);
}
.logo-text {
  background: linear-gradient(90deg, var(--green-dark), #2ecb52);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.main-nav a {
  color: var(--gray); padding: 7px 14px; border-radius: 999px; font-size: 14px;
  font-weight: 500; transition: background .15s, color .15s;
}
.main-nav a:hover { color: var(--green-dark); background: #eef7f0; }
.nav-hot {
  background: linear-gradient(120deg, #20a53a, #2ecb52);
  color: #fff !important; font-weight: 700;
  box-shadow: 0 4px 12px rgba(32, 165, 58, .3);
}
.nav-hot:hover { color: #fff !important; background: linear-gradient(120deg, #17882e, #20a53a); }

/* ============ 主体 ============ */
#app { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 32px 20px 60px; }

.view { display: none; }
.view.is-active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-title { font-size: 28px; margin-bottom: 8px; }
.view-desc { color: var(--gray); margin-bottom: 22px; }

/* ============ 首页 ============ */
.hero { text-align: center; padding: 28px 10px 22px; }
.hero h1 { font-size: 40px; letter-spacing: 1px; }
.hero-sub { color: var(--gray); font-size: 17px; max-width: 640px; margin: 14px auto 0; }
.hero-badge {
  display: inline-block; margin-top: 18px; padding: 8px 18px;
  background: #eef7f0; color: var(--green-dark); border-radius: 999px; font-size: 14px;
}

/* 编辑器入口大按钮 */
.hero-cta { margin-top: 22px; display: flex; justify-content: center; }
.hero-edit-btn {
  display: inline-flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, #20a53a, #2ecb52);
  color: #fff; padding: 24px 52px; border-radius: 20px;
  box-shadow: 0 12px 32px rgba(32, 165, 58, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero-edit-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(32, 165, 58, .48); color: #fff; }
.he-icon { font-size: 42px; }
.he-text { display: flex; flex-direction: column; text-align: left; font-size: 24px; font-weight: 700; line-height: 1.3; }
.he-text small { font-size: 14px; font-weight: 400; opacity: .92; }
.he-arrow { font-size: 28px; }

/* ===== 服务引导区 ===== */
.svc-hero {
  margin-top: 24px;
  background: linear-gradient(120deg, #0e2416 0%, #173d22 55%, #1d5130 100%);
  border-radius: 20px;
  color: #fff;
  padding: 38px 42px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 30px;
  align-items: center;
  box-shadow: 0 14px 40px rgba(12, 40, 22, .3);
  position: relative;
  overflow: hidden;
}
.svc-hero::after {
  content: '';
  position: absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,203,82,.25), transparent 70%);
}
.svc-tag {
  display: inline-block; background: rgba(46, 203, 82, .18);
  border: 1px solid rgba(46, 203, 82, .5);
  color: #7fe39a; font-size: 13px; padding: 4px 14px; border-radius: 999px; margin-bottom: 14px;
}
.svc-text h2 { font-size: 32px; line-height: 1.3; }
.svc-text .hl { color: #ffd66b; }
.svc-desc { color: #cfe6d6; font-size: 15px; margin-top: 10px; }
.svc-points { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.svc-points li { color: #e8f5ec; font-size: 14.5px; }
.svc-cta { margin-top: 18px; font-size: 15px; color: #ffd66b; font-weight: 600; }

.svc-qrs { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.svc-qrs figure {
  background: #fff; border-radius: 16px; padding: 14px 14px 12px;
  text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.svc-qrs figure:hover { transform: translateY(-4px); }
.svc-qrs img { width: 170px; height: 170px; object-fit: contain; border-radius: 8px; }
/* 微信二维码整块可点：不给链接任何可见样式（无下划线/文字/颜色变化），
   图片外观与不加链接时一模一样 */
.qr-link { display: block; line-height: 0; text-decoration: none; color: inherit; cursor: pointer; }
.qr-link img { display: block; }
.svc-qrs figcaption {
  margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.qr-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qr-wechat { background: #20a53a; }
.qr-qq { background: #12b7f5; }

.grid-title { font-size: 22px; margin: 34px 0 4px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 14px;
}
.tool-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 18px; display: block; color: var(--ink); position: relative;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(31, 60, 43, .14); border-color: #bfe6c9; }
.tool-card .tc-icon { font-size: 34px; }
.tool-card .tc-name { font-size: 17px; font-weight: 600; margin-top: 10px; }
.tool-card .tc-desc { font-size: 13px; color: var(--gray); margin-top: 4px; }
/* 编辑器卡片特殊样式（推荐） */
.tool-card.editor-card {
  background: linear-gradient(135deg, #0e2416 0%, #1d5130 100%);
  border-color: #2ecb52; color: #fff;
}
.tool-card.editor-card .tc-name { color: #fff; font-size: 19px; }
.tool-card.editor-card .tc-desc { color: #cfe6d6; }
.card-badge {
  position: absolute; top: 12px; right: 12px;
  background: #ffd66b; color: #3c2f07; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

.why-us { margin-top: 54px; }
.why-us h2 { text-align: center; font-size: 24px; margin-bottom: 22px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.why-item { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.why-icon { font-size: 30px; }
.why-item h3 { margin: 8px 0 4px; font-size: 16px; }
.why-item p { color: var(--gray); font-size: 13.5px; }

/* ============ 工具页：双栏布局 ============ */
.tool-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.drop-zone {
  grid-column: 1 / -1;
  border: 2px dashed #b8d8c0; border-radius: var(--radius);
  background: #fff; padding: 52px 20px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--green); background: #f2fbf4; }
.dz-icon { font-size: 44px; }
.dz-text { font-size: 17px; font-weight: 600; margin-top: 8px; }
.dz-hint { color: var(--gray); font-size: 13px; margin-top: 6px; }

.options {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow);
  position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto;
}
.opt-group {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; background: #fbfdfb;
}
.opt-group h3 { font-size: 13px; color: var(--green-dark); }
.opt-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.opt-row > span { color: var(--gray); font-size: 12.5px; }
.opt-row > span b { color: var(--ink); font-weight: 600; }
.opt-row input[type="text"], .opt-row input[type="number"], .opt-row select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  width: 100%; background: #fff; color: var(--ink); outline: none;
}
.opt-row input[type="text"]:focus, .opt-row input[type="number"]:focus, .opt-row select:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(32,165,58,.12);
}
.opt-row input[type="range"] { width: 100%; accent-color: var(--green); }
.opt-row input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: #fff; }
/* 编辑器：当前颜色大色块 + 取色按钮状态 */
.cur-chip {
  width: 34px; height: 34px; border-radius: 10px; display: inline-block;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
/* 吸管取色按钮：经典滴管图标 + 小字标签，一眼可辨 */
.picker-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 5px 9px; border-radius: 10px; font-size: 10.5px; line-height: 1.2;
  color: var(--green-dark); border: 1px solid #bfe6c9; background: #f2fbf4;
  cursor: pointer; user-select: none;
}
.picker-btn svg { display: block; }
.picker-btn:hover { background: #e6f7ea; }
.pick-on {
  background: #eaf6ee !important; border-color: var(--green) !important;
  color: var(--green-dark) !important; font-weight: 700;
  animation: pickPulse 1.2s ease infinite;
}
@keyframes pickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(32, 165, 58, .45); }
  50% { box-shadow: 0 0 0 6px rgba(32, 165, 58, 0); }
}
.opt-row input[type="file"] { font-size: 12.5px; color: var(--gray); }
.opt-inline { flex-direction: row; align-items: center; gap: 10px; }
.opt-inline > span { min-width: 130px; }
.inline-wrap { display: flex; align-items: center; gap: 8px; }

/* 按钮组：文字一律不折行，宽度按内容走；一行放不下就整块换行（而不是把字挤成两排） */
.mode-btns, .layout-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mode-btns .btn, .layout-btns .btn {
  flex: 0 1 auto; white-space: nowrap; text-align: center; padding: 8px 12px; font-size: 13.5px;
}
.mode-btn.is-on { background: #eaf6ee; border-color: var(--green); color: var(--green-dark); font-weight: 600; }
.preset-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }

.opt-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 10px 20px; border-radius: 10px; font-size: 14.5px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { border-color: var(--green); color: var(--green); }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-lg { padding: 12px 30px; font-size: 15.5px; margin-top: 4px; }

.orig-info { color: var(--gray); font-size: 13px; }
.edit-hint { color: var(--gray); font-size: 12.5px; line-height: 1.7; }
.slice-tip { color: var(--gray); font-size: 13px; text-align: center; }
.slice-actions { width: 100%; display: flex; justify-content: center; }
.slice-status { font-size: 13px; color: var(--gray); text-align: center; }

/* 批量：加水印/去水印的定位预览（只显示第 1 张） */
.batch-pv { width: 100%; }
.batch-pv-wrap {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  /* 棋盘格：加了水印也看得清透明区域 */
  background-image: linear-gradient(45deg, #eef1f3 25%, transparent 25%, transparent 75%, #eef1f3 75%),
    linear-gradient(45deg, #eef1f3 25%, transparent 25%, transparent 75%, #eef1f3 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; background-color: #fff;
  touch-action: none;
}
.batch-pv-wrap canvas { display: block; width: 100%; height: auto; }
.batch-pv .edit-hint { margin-top: 6px; }
.crop-size { color: var(--gray); font-size: 13px; text-align: center; }

/* ===== 预览区 ===== */
.result {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  min-height: 380px;
}
.preview-box {
  width: 100%; background: #f2f5f3; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; min-height: 260px;
}
.preview-box img { max-width: 100%; max-height: 440px; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.preview-cell .preview-box { min-height: 200px; }
.preview-cell p { text-align: center; font-size: 13px; color: var(--gray); margin-top: 8px; }
.saved { color: var(--green); font-weight: 700; }

.idphoto-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.idphoto-wrap .ph-box { text-align: center; }
.idphoto-wrap .ph-box canvas { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 3px 14px rgba(0,0,0,.1); background: #fff; }
.idphoto-wrap .ph-box p { font-size: 12.5px; color: var(--gray); margin-top: 6px; }

/* 裁剪 */
.crop-stage { width: 100%; max-width: 900px; position: relative; user-select: none; }
.crop-stage canvas { display: block; margin: 0 auto; max-width: 100%; touch-action: none; border-radius: 6px; }
.crop-hint { text-align: center; color: var(--gray); font-size: 12.5px; margin-top: 10px; }

/* 九宫格 */
.slice-orig { width: 100%; max-width: 420px; text-align: center; }
.slice-orig .preview-box { min-height: 120px; }
.slice-orig p { font-size: 12.5px; color: var(--gray); margin-top: 6px; }
.slice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; width: 100%; }
.slice-grid figure { text-align: center; }
.slice-grid img { border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.12); transition: transform .15s; }
.slice-grid img:hover { transform: scale(1.04); }
.slice-grid figcaption { font-size: 12.5px; color: var(--gray); margin-top: 6px; }

/* 图片加字/马赛克 */
.edit-canvas {
  max-width: 100%; border-radius: 8px; cursor: crosshair;
  box-shadow: 0 4px 18px rgba(0,0,0,.12); touch-action: none; background: #fff;
}

/* Base64 */
.b64-area {
  width: 100%; min-height: 300px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: Consolas, Menlo, monospace; font-size: 12px; resize: vertical; background: #fbfdfb;
}
.result-inline { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fbfdfb; }
.result-inline img { max-height: 260px; margin: 0 auto; }

/* 取色器 */
.picker-canvas { max-width: 100%; border-radius: 8px; cursor: crosshair; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.picker-out { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.color-chip { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.color-vals { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.color-vals span { color: var(--gray); display: block; font-size: 12px; }
.color-vals b { font-size: 15.5px; }
.color-history { width: 100%; text-align: left; }
.color-history h3 { font-size: 14px; color: var(--gray); margin-bottom: 8px; }
.history-row { display: flex; gap: 10px; flex-wrap: wrap; }
.history-row .swatch {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  cursor: pointer; transition: transform .15s;
}
.history-row .swatch:hover { transform: scale(1.12); }

/* 图片放大灯箱 */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 18, 13, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; cursor: zoom-out; animation: fadeIn .18s ease;
}
.lightbox img {
  max-width: 92vw; max-height: 86vh;
  border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.lb-tip { color: #cfe6d6; font-size: 13px; }

/* 提示条 */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(20, 40, 28, .92); color: #fff; padding: 10px 22px; border-radius: 999px;
  font-size: 14px; z-index: 999; animation: fadeIn .2s ease;
}

/* 工具页引流横幅 */
.promo-banner {
  margin-top: 26px;
  background: linear-gradient(120deg, #0e2416, #1d5130);
  border-radius: 14px; color: #fff; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.promo-banner .pb-text { font-size: 15px; }
.promo-banner .pb-text strong { color: #ffd66b; }
.promo-banner a {
  background: #ffd66b; color: #3c2f07; font-weight: 700; padding: 9px 20px;
  border-radius: 999px; font-size: 14px; transition: transform .15s;
}
.promo-banner a:hover { transform: scale(1.05); }

/* ============ P图编辑器 ============ */
body.editor-mode .site-header,
body.editor-mode .site-footer,
body.editor-mode .promo-banner { display: none !important; }
body.editor-mode { overflow: hidden; overscroll-behavior: none; }
body.editor-mode #app { padding: 0; max-width: 100%; }
body.editor-mode .view.is-active { display: block; }

.editor-shell {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: #e9edea;
  touch-action: none;
  -webkit-touch-callout: none;
}
/* 顶栏尽量精简：只占一排（窄屏横向可滑，不折成两三排），高度也更矮，给画布让位置 */
.editor-top {
  display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
  padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.editor-top::-webkit-scrollbar { height: 0; }
.editor-top .btn, .editor-top .editor-fmt { flex: 0 0 auto; white-space: nowrap; }
.editor-title { font-weight: 700; font-size: 15px; }
.editor-ver {
  font-size: 11px; color: #8a938d; background: #f0f3f1;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 6px; font-weight: 600; line-height: 1.4;
}
.editor-spacer { flex: 1; }
.editor-fmt {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}

.editor-stage {
  flex: 1; overflow: auto; display: block; padding: 16px;
  background-color: #e4e9e6;
  background-image: linear-gradient(45deg, #d8deda 25%, transparent 25%, transparent 75%, #d8deda 75%),
    linear-gradient(45deg, #d8deda 25%, transparent 25%, transparent 75%, #d8deda 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  text-align: center;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.editor-canvas {
  background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.28);
  touch-action: none; display: block;
  margin: 0 auto;
  user-select: none; -webkit-user-select: none;
}
/* 编辑器：画布空白时的现场诊断条（正常看图时不出现） */
.editor-diag {
  margin: 10px auto 0; max-width: 620px; text-align: left;
  background: #fff6e5; border: 1px solid #f0cfa0; color: #7a5410;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7;
  word-break: break-all;
}
.editor-diag b { color: #b06f00; }

.editor-empty { text-align: center; color: var(--ink); }
.ez-icon { font-size: 64px; }
.ez-title { font-size: 22px; font-weight: 700; margin-top: 10px; }
.ez-sub { color: var(--gray); font-size: 14px; margin: 8px 0 22px; }
.btn-xl { font-size: 17px; padding: 14px 36px; border-radius: 12px; }
label.btn { cursor: pointer; user-select: none; }

/* 打开图片按钮：文件框直接铺满按钮，点击落点即文件框（100% 原生） */
.editor-open-btn { position: relative; overflow: hidden; cursor: pointer; display: inline-block; }
.editor-open-btn input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 100px;
}

.editor-tools {
  display: flex; gap: 2px; background: #fff; border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tool-btn {
  flex: 1 0 62px; min-width: 62px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; border: none; background: none; padding: 7px 4px; border-radius: 10px;
  font-size: 12px; color: var(--gray); cursor: pointer;
}
.tool-btn .ti { font-size: 22px; }
.tool-btn.is-on { background: #eaf6ee; color: var(--green-dark); font-weight: 600; }
/* 工具栏里的"动作"按钮（加图层/一键抠图/删除图片）：和工具之间加一条分隔线 */
.tool-sep { flex: 0 0 auto; align-self: stretch; width: 1px; background: var(--line); margin: 3px 2px; }
.tool-act { color: #4a5b52; }

/* 窄屏（手机 / 小窗口）：顶栏只保留必需的文字，其余按钮只显示图标，一排就放得下；
   「返回首页」和「导出图片」两端吸住，横向滑动时也不会被划走 */
@media (max-width: 979px) {
  .editor-title, .editor-ver { display: none; }
  .editor-top { padding: 5px 8px; gap: 4px; }
  .editor-top .btn-sm { padding: 5px 8px; font-size: 12.5px; }
  .editor-top .btxt { display: none; }
  .editor-top [data-back] .btxt,
  .editor-top .editor-open-btn .btxt,
  .editor-top .btn-primary .btxt { display: inline; }
  .editor-top [data-back] { position: sticky; left: 0; z-index: 2; background: #fff; }
  .editor-top .btn-primary { position: sticky; right: 0; z-index: 2; }
}

.editor-options {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: #fff; border-top: 1px solid var(--line); padding: 10px 12px;
  max-height: 180px; overflow-y: auto;
}
.editor-options .opt-row { flex-direction: row; gap: 8px; align-items: center; flex-wrap: nowrap; }
.editor-options .opt-row > span { min-width: 0; white-space: nowrap; flex: 0 0 auto; }
/* 单行文字框：够用就好，别横着占满一整行 */
.editor-options input[type="text"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px;
  min-width: 0; width: 132px; max-width: 46vw; flex: 0 1 auto;
}
.editor-options input[type="range"] { width: 110px; accent-color: var(--green); }
.editor-options select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px;
}
.editor-options .color-presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.color-presets .cp {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.color-presets .cp.is-on {
  box-shadow: 0 0 0 2px var(--green), 0 0 0 4px #fff;
  transform: scale(1.18);
}
.color-presets .cp.cur-preset { position: relative; }
.color-presets .cp.cur-preset::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.editor-options .opt-tip { font-size: 12.5px; color: var(--gray); width: 100%; }
/* 编辑器参数面板底部不显示说明性文字（界面更干净；需要恢复时删掉下面这行即可） */
.editor-options .opt-tip { display: none; }

.editor-zoom-row { display: flex; gap: 6px; align-items: center; }

/* 局部放大镜（画笔/马赛克模式）：外圈 114px（含 3px 边框），内容区 108px = 9 格 × 12px，圆心与中心格完全重合 */
.editor-loupe {
  position: fixed; width: 114px; height: 114px; border-radius: 50%;
  border: 3px solid #20a53a; overflow: hidden; z-index: 300;
  pointer-events: none; background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  display: block;
}
.editor-loupe canvas { width: 108px; height: 108px; display: block; }

/* 选中元素浮动的 编辑/删除 按钮 */
.el-actions { position: fixed; z-index: 320; display: flex; gap: 6px; }
.el-act-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.28); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.el-act-btn:active { transform: scale(.9); }
.el-act-del { background: #ff4d4f; color: #fff; }

/* 图层面板（右下角悬浮窗）：宽度只有原来的一半左右，尽量不挡画布 */
.layers-panel {
  position: fixed; z-index: 400; right: 12px; bottom: 172px; width: 118px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 8px;
  max-height: 42vh; overflow-y: auto;
  backdrop-filter: blur(4px);
}
.layers-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 13px; margin-bottom: 6px;
  position: sticky; top: -8px; background: #fff; z-index: 1; padding: 3px 0;
}
.layers-close { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--gray); }
.layer-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 5px 6px;
  border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.layer-row:hover { background: #f2f7f4; }
.layer-row.is-sel { background: #eaf6ee; }
.layer-eye { cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.layer-eye.is-off { opacity: .3; }
.layer-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 操作按钮单独占一行，只出现在选中的那一层（面板窄，放不下就别挤图层名） */
.layer-btns { display: flex; gap: 3px; flex: 1 0 100%; justify-content: flex-end; margin-top: 2px; }
.layer-btns button {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  width: 20px; height: 20px; font-size: 10px; cursor: pointer; line-height: 1; padding: 0;
}
.layer-bg { color: var(--gray); cursor: default; }
.layer-rename-input {
  flex: 1; min-width: 0; border: 1px solid var(--green); border-radius: 6px;
  padding: 3px 6px; font-size: 12.5px; outline: none;
}
.layers-actions { margin-top: 8px; }
.layers-actions .btn { width: 100%; text-align: center; padding: 7px; font-size: 13px; }

/* 贴纸网格 */
.emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-btn {
  width: 40px; height: 40px; font-size: 22px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer;
}
.emoji-btn.is-on { border-color: var(--green); background: #eaf6ee; transform: scale(1.1); }

@media (max-width: 900px) {
  /* 手机端：图层面板收窄到一半左右，尽量不挡画布 */
  .layers-panel { left: auto; right: 8px; width: 96px; bottom: 238px; max-height: 34vh; padding: 7px; }
  .layer-row { padding: 4px 5px; font-size: 12px; gap: 3px; }
  /* 窄面板放不下 4 个按钮 + 名字：只在选中那一层显示，并单独占一行 */
  .layer-row:not(.is-sel) .layer-btns { display: none; }
  .layer-btns { flex: 1 0 100%; margin-top: 2px; gap: 3px; }
  .layer-btns button { width: 19px; height: 19px; font-size: 9px; }
  .layer-op-row > input[type="range"] { flex: 1 0 100%; }
  .layers-head { font-size: 12px; }
}

@media (min-width: 900px) {
  .editor-tools { justify-content: center; }
  .tool-btn { flex: 0 0 84px; }
}

/* ============ 页脚 ============ */
.site-footer { border-top: 1px solid var(--line); background: #fff; margin-top: 40px; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 22px 20px; text-align: center; color: var(--gray); font-size: 13.5px; }

/* 取色器与 Base64 占满整行 */
#view-picker .result,
#view-base64 .options { grid-column: 1 / -1; }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .tool-layout { grid-template-columns: 1fr; }
  .options { position: static; max-height: none; }
  .hero { display: flex; flex-direction: column; }
  /* 手机端：打开编辑器大按钮移到标题上方 */
  .hero-cta { order: -1; margin: 0 0 20px; }
  .hero h1 { font-size: 28px; }
  .compare { grid-template-columns: 1fr; }
  .svc-hero { grid-template-columns: 1fr; padding: 28px 18px; }
  /* 二维码手机端保持横排 */
  .svc-qrs { flex-wrap: nowrap; gap: 10px; }
  .svc-qrs figure { padding: 10px 10px 8px; }
  .svc-qrs img { width: 118px; height: 118px; }
  .svc-qrs figcaption { font-size: 12.5px; }
  /* 功能卡片手机端双列 */
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tool-card { padding: 18px 14px; }
}
@media (max-width: 720px) {
  .main-nav { gap: 0; }
  .main-nav a { padding: 6px 10px; font-size: 13px; }
  .hero-edit-btn { padding: 14px 20px; }
  .he-text { font-size: 16px; }
}

/* ============ 电脑端 PS 式编辑器布局（≥980px，手机端不受影响） ============ */
@media (min-width: 980px) {
  .editor-shell { position: relative; }

  /* 顶部 = PS 深色菜单栏 */
  .editor-top {
    background: #3a3f44; border-bottom: none; z-index: 210;
    position: relative;
  }
  .editor-top .btn {
    color: #e8eaed; border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
  }
  .editor-top .btn:hover { background: rgba(255,255,255,.16); }
  .editor-top .btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
  .editor-top .btn-primary:hover { background: var(--green-dark); }
  .editor-title { color: #fff; }
  .editor-ver { color: #b9c0c7; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
  .editor-fmt { color: #e8eaed; background: #2f3438; border-color: rgba(255,255,255,.2); }

  /* 画布区 = PS 深灰工作台，左右给工具栏/面板留位（电脑端保持原样） */
  .editor-stage {
    margin: 0 262px 0 68px;
    background-color: #2e3237;
    background-image: linear-gradient(45deg, #272b2f 25%, transparent 25%, transparent 75%, #272b2f 75%),
      linear-gradient(45deg, #272b2f 25%, transparent 25%, transparent 75%, #272b2f 75%);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
  }
  .editor-empty { color: #d7dadd; }
  .editor-empty .ez-title { color: #fff; }
  .editor-empty .ez-sub { color: #aeb4b9; }

  /* 左侧 = PS 竖排工具栏（图标 + 小字标签） */
  .editor-tools {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 4px; width: 54px; padding: 8px 6px;
    background: #3a3f44; border: 1px solid rgba(255,255,255,.08);
    border-top: none; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    max-height: calc(100vh - 130px); overflow-y: auto;
    z-index: 260;
  }
  .editor-tools .tool-btn {
    flex: none; min-width: 0; width: 100%; padding: 5px 2px; gap: 1px;
    font-size: 9px; color: #c8cdd2; border-radius: 8px;
  }
  .editor-tools .tool-btn .ti { font-size: 19px; }
  .editor-tools .tool-btn:hover { background: rgba(255,255,255,.13); }
  .editor-tools .tool-btn.is-on { background: var(--green); color: #fff; }

  /* 右侧上方 = 参数面板（PS 面板式：标签在上、控件在下）
     面板收窄到 198px，标签一律不折行（字号略小），把宽度让给中间画布 */
  .editor-options {
    position: absolute; right: 10px; top: 56px; width: 198px;
    max-height: calc(100vh - 322px); overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px;
    background: #fff; border: 1px solid var(--line); border-top: none;
    border-radius: 12px; padding: 10px 10px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22); z-index: 240;
  }
  .editor-options .opt-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .editor-options .opt-row > span { white-space: nowrap; }
  .editor-options .opt-row > span:first-child {
    font-size: 11.5px; color: var(--gray); font-weight: 600;
  }
  /* 说明性长文字（<b> 里的那段）才允许换行 */
  .editor-options .opt-row > b { white-space: normal; }
  .editor-options input[type="text"] { width: 100%; min-width: 0; }
  .editor-options input[type="range"] { width: 100%; }
  .editor-options select { width: 100%; }
  .editor-options .inline-wrap { width: 100%; }
  .editor-zoom-row { flex-direction: row !important; align-items: center; margin-top: auto; position: sticky; bottom: -10px; background: #fff; border-top: 1px solid var(--line); padding-top: 8px; }
  .editor-zoom-row > span { display: none; }

  /* 右侧下方 = 图层面板：电脑端保持原来的宽度（宽一点不挡操作），
     收窄的只有手机端 */
  .layers-panel {
    right: 10px; bottom: 44px; width: 246px; max-height: 232px;
    backdrop-filter: none; padding: 10px;
  }
  /* 电脑端面板够宽：图层操作按钮恢复成跟图层名同一行（和以前一致） */
  .layer-row { flex-wrap: nowrap; padding: 6px 8px; font-size: 13px; gap: 6px; }
  .layer-btns { flex: 0 0 auto; gap: 2px; margin-top: 0; }
  .layer-row:not(.is-sel) .layer-btns { display: flex; }
  .layer-btns button { width: 22px; height: 22px; }
  .layer-op-row { flex-wrap: nowrap; }
  .layer-op-row > input[type="range"] { flex: 1 1 auto; min-width: 60px; }
  /* 左栏竖排工具栏：动作按钮在这里继续竖直排列 */
  .tool-sep { width: 100%; height: 1px; align-self: auto; margin: 3px 0; }

  /* 深色工作台上，选中元素的浮动按钮更醒目 */
  .el-act-btn { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
}

/* ============ 电脑端右键菜单（PS 式） ============ */
.ctx-menu {
  position: fixed; z-index: 520; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); padding: 6px;
  display: flex; flex-direction: column; min-width: 152px;
}
.ctx-menu button {
  border: none; background: none; text-align: left; padding: 8px 12px;
  font-size: 13.5px; border-radius: 7px; cursor: pointer; color: var(--ink);
  white-space: nowrap;
}
.ctx-menu button:hover { background: #eef4f0; }

/* ============ 一键抠图 ============ */
.mat-canvas-wrap {
  background-image: linear-gradient(45deg, #e3e7e4 25%, transparent 25%, transparent 75%, #e3e7e4 75%),
    linear-gradient(45deg, #e3e7e4 25%, transparent 25%, transparent 75%, #e3e7e4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; text-align: center; overflow: auto;
}
.mat-canvas { max-width: 100%; max-height: 66vh; display: inline-block; vertical-align: top; }
.mat-chip {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.mat-progress { font-size: 13px; color: var(--gray); margin-top: 8px; }

/* 抠图页：进度条（紧跟在三个按钮下面，点完立刻能看到） */
.mat-progress-wrap { margin-top: 10px; }
.mat-bar {
  height: 8px; background: #e6ece8; border-radius: 5px; overflow: hidden;
}
.mat-bar > span {
  display: block; height: 100%; width: 3%; border-radius: 5px;
  background: var(--green); transition: width .25s ease;
}
.mat-bar > span.is-indet {
  background-image: linear-gradient(90deg, var(--green) 0%, #7fd39a 50%, var(--green) 100%);
  background-size: 220% 100%;
  animation: matIndet 1.1s linear infinite;
}
@keyframes matIndet {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}
.mat-progress-wrap .mat-progress { margin-top: 6px; font-size: 12.5px; }

/* 抠图页：可勾选选项做成醒目卡片（原来的灰色小字太不显眼） */
.mat-toggle {
  background: #eef7f1; border: 1px solid #cbe6d5; border-radius: 10px;
  padding: 10px 12px; align-items: center; gap: 10px; cursor: pointer;
}
.mat-toggle:hover { background: #e3f2e9; border-color: #a9d8bb; }
.mat-toggle > span {
  color: #16261c !important; font-size: 13.5px !important;
  font-weight: 700; line-height: 1.45; min-width: 0 !important; flex: 1;
}
.mat-toggle input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; accent-color: var(--green); cursor: pointer;
}

/* 抠图页：说明文字做成高对比提示条 */
.mat-note {
  background: #fff7e3; border-left: 4px solid #f0a500; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.65; color: #7a5410; margin-top: 2px;
}
.mat-note strong { color: #b06f00; }

/* 抠图页：智能判断提示条（纯色 / 非纯色） */
.mat-notice {
  border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6;
  margin-top: 2px; border-left: 4px solid #f0a500; background: #fff7e3; color: #7a5410;
}
.mat-notice.is-warn { border-left-color: #e04b4b; background: #fff1f1; color: #8a2a2a; }
.mat-notice.is-warn strong { color: #c23232; }
.mat-notice.is-ok { border-left-color: var(--green); background: #eef7f1; color: #1c5c31; }
.mat-notice.is-ok strong { color: var(--green-dark); }

/* 抠图页：结果体检读数（主体占比 / 连通块 / 半透明边） */
.mat-stats {
  font-size: 13px; line-height: 1.7; color: #4a5568; background: #f5f7fa;
  border-radius: 8px; padding: 9px 12px; margin: 8px 0 0;
}
.mat-stats b { color: #1a202c; }
.mat-stats .is-warn { display: block; color: #c23232; margin-top: 3px; }
.opt-actions .btn.is-on { background: var(--green); border-color: var(--green); color: #fff; }

/* 抠图页：两个"快速开始"大按钮 */
.mat-start { display: flex; flex-direction: column; gap: 10px; }
.mat-start-btn {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 14px 16px; border-radius: 12px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; border: 2px solid transparent; line-height: 1.35;
  font-family: inherit; color: var(--ink);
}
.mat-start-btn .ms-head { display: flex; align-items: center; gap: 7px; }
.mat-start-btn .ms-ico { font-size: 19px; line-height: 1; }
.mat-start-btn .ms-name em {
  font-style: normal; font-size: 11px; font-weight: 600; margin-left: 6px;
  padding: 1px 6px; border-radius: 20px; background: rgba(255,255,255,.28);
  vertical-align: 1px;
}
.mat-start-solid .ms-name em, .mat-start-ai .ms-name em { background: #eaf6ee; color: var(--green-dark); }
.mat-start-btn small { font-size: 12.5px; font-weight: 500; line-height: 1.55; display: block; }
.mat-start-solid { background: #fff; border-color: var(--green); color: var(--green-dark); }
.mat-start-solid small { color: var(--gray); }
.mat-start-solid:hover { background: #eef7f1; }
.mat-start-ai { background: #fff; border-color: #cfe3d6; color: var(--green-dark); }
.mat-start-ai small { color: var(--gray); }
.mat-start-ai:hover { background: #f2fbf4; }
.mat-start-smart {
  background: var(--green); border-color: var(--green); color: #fff;
  box-shadow: 0 8px 22px rgba(32,165,58,.32); font-size: 16.5px;
}
.mat-start-smart small { color: rgba(255,255,255,.92); }
.mat-start-smart:hover { background: var(--green-dark); }
.mat-start-btn:disabled, .mat-start-btn.is-busy { opacity: .55; cursor: progress; }

/* 抠图页：高级微调折叠区 */
.mat-advanced { border: 1px solid var(--line); border-radius: 10px; background: #fafbfa; padding: 0 12px; }
.mat-advanced > summary {
  cursor: pointer; list-style: none; padding: 12px 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.mat-advanced > summary::-webkit-details-marker { display: none; }
.mat-advanced > summary::before { content: '▸ '; color: var(--green); font-weight: 700; }
.mat-advanced[open] > summary::before { content: '▾ '; }
.mat-advanced > .opt-group { padding-bottom: 12px; }

/* ============ 手机端界面精简（≤900px）：图片在上，功能区在下 ============ */
@media (max-width: 900px) {
  /* 顺序：选图区 → 图片/结果 → 操作区 */
  .tool-layout { display: flex; flex-direction: column; gap: 14px; }
  .tool-layout > .drop-zone { order: 0; grid-column: auto; }
  .tool-layout > .result { order: 1; }
  .tool-layout > .options { order: 2; }

  /* 去掉与操作无关的装饰性文字，界面更整洁 */
  .view-desc { display: none; }
  .dz-hint { display: none; }
  #view-matting .mat-note:not([data-ai-mobile-note]) { display: none; }
  #view-matting .opt-group > h3 { font-size: 12.5px; }

  /* 各区块收紧，减少留白 */
  .result { min-height: 0; padding: 12px; gap: 12px; }
  .options { padding: 12px; gap: 10px; }
  .opt-group { padding: 10px 12px; gap: 8px; }
  .drop-zone { padding: 34px 16px; }
  .dz-icon { font-size: 36px; }
  .dz-text { font-size: 15.5px; }

  /* 抠图页：结果图不撑破屏幕，按钮更好点 */
  #view-matting .mat-canvas { max-height: 46vh; }
  #view-matting .mat-canvas-wrap { padding: 8px; }
  #view-matting .mat-advanced > summary { padding: 10px 0; font-size: 13px; }

  /* 三个抠图按钮：手机端横排一排（图标在上、名称在下，紧凑卡片） */
  #view-matting .mat-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #view-matting .mat-start-btn {
    padding: 12px 6px; font-size: 13px; text-align: center; gap: 5px;
    align-items: center; justify-content: space-between; min-height: 92px; border-radius: 10px;
  }
  #view-matting .mat-start-btn .ms-head { flex-direction: column; gap: 4px; align-items: center; }
  #view-matting .mat-start-btn .ms-ico { font-size: 25px; }
  #view-matting .mat-start-btn .ms-name { line-height: 1.25; }
  #view-matting .mat-start-btn .ms-name em { display: block; margin: 3px 0 0; font-size: 10px; }
  #view-matting .mat-start-btn small { display: none; }

  /* 结果区按钮排布：一行两个，方便手指点击 */
  .result .opt-actions { width: 100%; justify-content: stretch; }
  .result .opt-actions > .btn {
    flex: 1 1 46%; min-width: 132px; text-align: center; padding: 11px 10px; font-size: 14px;
  }
  .result .tool-del-row > .btn { flex: 1 1 100%; min-width: 0; }
}

/* 结果区「删除图片」按钮（所有工具页通用） */
.tool-del-row { width: 100%; justify-content: center; margin-top: 4px; }
.btn-del-img {
  color: #c93a3a; border-color: #f1c9c9; background: #fff5f5;
}
.btn-del-img:hover { background: #ffe9e9; border-color: #e3a8a8; }

/* 操作栏（下载/在编辑器打开/撤销/删除图片）：手机端会被搬到页面最底部 */
.action-tray { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.action-tray:empty { display: none; }
.action-tray .opt-actions { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .action-tray { order: 3; }
  .action-tray .opt-actions { justify-content: stretch; }
  .action-tray .opt-actions > .btn {
    flex: 1 1 46%; min-width: 132px; text-align: center; padding: 11px 10px; font-size: 14px;
  }
  .action-tray .tool-del-row > .btn { flex: 1 1 100%; min-width: 0; }
}

/* 尺寸调整：内容识别扩展的处理状态（只在识别中显示，完成后自动隐藏） */
.ca-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 12px; font-size: 13px; color: #16261c;
  background: #eef7f1; border: 1px solid #cbe6d5; border-radius: 10px;
}
.ca-status b { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.ca-spin {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid #bfe0cb; border-top-color: var(--green);
  animation: caSpin .8s linear infinite;
}
@keyframes caSpin { to { transform: rotate(360deg); } }

/* 证件照规范检查：一行一个结论，通过是绿色，需要处理是琥珀色 */
.idp-check { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.idp-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: #16261c; background: #eef7f1;
  border: 1px solid #cbe6d5; border-radius: 8px; padding: 7px 10px;
}
.idp-row.is-warn { background: #fff7ec; border-color: #f0d5ac; color: #6b4a12; }
.idp-dot {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--green);
}
.idp-row.is-warn .idp-dot { background: #e0912b; }
.idp-row b { font-variant-numeric: tabular-nums; }
.idp-row em { font-style: normal; font-size: 11.5px; color: #6b7a70; margin-left: auto; }
.idp-row.is-warn em { color: #96702e; }

/* 编辑器·智能改字：识别结果回显（告诉用户它认出了什么） */
.opt-row.retext-info {
  background: #eef7f1; border: 1px solid #cbe6d5; border-radius: 8px;
  padding: 7px 10px; align-items: center;
}
.opt-row.retext-info b { font-weight: 600; color: #16261c; font-variant-numeric: tabular-nums; }
.opt-row.retext-info em { font-style: normal; color: var(--green-dark); font-weight: 700; }
.retext-fonts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.retext-fonts .btn { flex: 0 1 auto; }
.retext-fonts .btn.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.opt-row.retext-actions { align-items: center; }

/* 图层面板里的透明度滑块（改当前选中图层，不用先滚到选项面板找） */
.layer-op-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px;
  background: #f4f8f5; border: 1px solid #dbe9e0; border-radius: 8px; margin: 4px 0 6px;
}
.layer-op-row > span { font-size: 12px; color: #4a5b52; flex: 0 0 auto; }
.layer-op-row > input[type="range"] { flex: 1 1 auto; min-width: 60px; margin: 0; }
.layer-op-row > b { flex: 0 0 auto; font-size: 12px; color: var(--green-dark); font-variant-numeric: tabular-nums; margin-left: auto; }

/* ============ 「一键改字」专注模式（首页独立入口 #/retext）============
   内核就是编辑器，这里只是把和改字无关的工具按钮收起来，界面更聚焦。 */
body.retext-mode .editor-tools [data-mode]:not([data-mode="pan"]):not([data-mode="move"]):not([data-mode="retext"]) {
  display: none;
}
body.retext-mode .editor-tools [data-editor-cutout] { display: none; }   /* 抠图和改字无关 */
/* 手机端的高度见下面媒体查询（46vh 会把画布挤没，已撤掉） */

/* 首页：一键改字卡片 + hero 上的第二个入口 */
.tool-card.retext-card { border-color: #cbe6d5; }
.tool-card.retext-card .tc-icon { filter: none; }
.hero-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.hero-retext-btn {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: #fff; border: 2px solid var(--green); border-radius: 14px;
  color: var(--green-dark); text-decoration: none; font-weight: 700;
  box-shadow: 0 4px 18px rgba(31,60,43,.10);
}
.hero-retext-btn:hover { background: #f2fbf4; }
.hero-retext-btn .he-icon { font-size: 24px; }
.hero-retext-btn .he-text { display: flex; flex-direction: column; line-height: 1.35; font-size: 15.5px; }
.hero-retext-btn .he-text small { font-weight: 400; font-size: 12px; color: var(--gray); }
.hero-retext-btn .he-arrow { margin-left: auto; font-size: 18px; }
@media (max-width: 900px) {
  .hero-retext-btn { padding: 10px 14px; }
  .hero-retext-btn .he-text { font-size: 14.5px; }
  .hero-retext-btn .he-text small { display: none; }
}
   面板越紧凑，中间画布就越大；这里把参数面板里出现的每一种控件（文字框、数字框、
   取色块、色板圆点、下拉、滑块、形状按钮、贴纸、缩放行、改字面板）都收一遍，
   免得漏掉某一个还是"大块头"。 */
/* 改字：最上面那个「改成」输入框吸住（sticky），
   手机点它时键盘/面板滚动都不会把它和画布一起顶走，实时效果一直看得见 */
.opt-row.text-content-row {
  position: sticky; top: -10px; z-index: 3;
  background: #fff; padding: 4px 0 6px; margin: -2px 0 0;
  border-bottom: 1px solid var(--line);
}
.opt-row.text-content-row > span { font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.opt-row.text-content-row input[type="text"] {
  flex: 1 1 auto; width: auto; min-width: 0; font-weight: 700; color: var(--green-dark);
}

/* ============ 画布上的「改字悬浮条」 ============
   两行窄条：第一行「改成」输入框 + 收起；第二行一组操作（开关带状态点）。
   浮在选中图层（要改的那个字）上方；上面放不下会自动翻到图层下方。
   一键收起变成小胶囊，不挡画布。条上的控件与选项面板共用同一套动作。 */
.retext-bar {
  position: fixed; left: 0; top: 0; z-index: 330; display: none;
  flex-direction: column; gap: 6px;
  width: min(92vw, 322px); max-width: calc(100vw - 12px);
  padding: 8px 9px; border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #dbe9e0;
  box-shadow: 0 10px 26px rgba(16, 32, 24, .18), 0 1px 3px rgba(16, 32, 24, .10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  touch-action: manipulation;
}
.retext-bar.is-show { display: flex; }
/* 双保险：不在编辑器/改字页时，无论如何都不显示（条子挂在 body 上，
   切到首页时如果只靠 JS 同步，一次漏同步就会"跟着回主页"） */
body:not(.editor-mode) .retext-bar { display: none !important; }
.retext-bar.is-collapsed { width: auto; padding: 4px; }
.retext-bar.is-below { box-shadow: 0 -10px 26px rgba(16, 32, 24, .16), 0 -1px 3px rgba(16, 32, 24, .08); }
.retext-bar-row { display: flex; align-items: center; gap: 6px; }
/* 第二行"最多一行"：强制不换行（要换行就变三行了），按钮按需收缩，
   所以标签字号/内边距都压到最小，留足余量给窄屏 */
.retext-bar-acts {
  flex-wrap: nowrap; justify-content: space-between;
  gap: 5px; padding-top: 7px; border-top: 1px solid #edf3ef;
}
.retext-bar-tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #5b6b62; }
.retext-bar-input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 32px; padding: 2px 10px;
  border: 1px solid #dbe9e0; border-radius: 9px; background: #fbfdfb;
  font-size: 14px; font-weight: 700; color: var(--green-dark);
}
.retext-bar-input:focus {
  outline: none; border-color: var(--green); background: #fff;
  box-shadow: 0 0 0 3px rgba(32, 165, 58, .14);
}
.retext-bar-input::placeholder { font-weight: 400; color: #9aa8a0; }
.retext-bar-toggle {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dbe9e0; border-radius: 9px; background: #f4f8f5;
  color: var(--green-dark); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
}
.retext-bar-toggle.is-collapsed { width: auto; height: 30px; padding: 0 10px; font-size: 12px; }
.retext-bar-btn {
  flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #e2ece6; border-radius: 8px; background: #fff; color: #33443a;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.retext-bar-btn.is-primary {
  flex: 0 1 auto; background: var(--green); border-color: var(--green); color: #fff; font-weight: 700;
}
.retext-bar-btn.is-on { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); font-weight: 700; }
.retext-bar-btn[disabled] { opacity: .6; }
/* 开关状态点：灰=关，绿=开 */
.retext-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #c9d6cf; }
.retext-dot.is-on { background: var(--green); box-shadow: 0 0 0 2px rgba(32, 165, 58, .18); }

/* 面板里可手输的数值框（代替原来的只读读数）：小而居中，敲数字立刻生效 */
.num-v {
  width: 58px; padding: 3px 6px; text-align: center; display: inline-block;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.num-v:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(32,165,58,.12); outline: none; }
/* 数字框右侧的小箭头在小尺寸下会挤到字，隐藏掉更干净（仍可用键盘上下键微调） */
.num-v::-webkit-outer-spin-button, .num-v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-v { -moz-appearance: textfield; appearance: textfield; }
@media (max-width: 900px) {
  /* 手机上字号 16px（防整页放大），框相应放宽一点 */
  .num-v { width: 64px; font-size: 16px !important; padding: 2px 6px; height: 30px; }
}

/* ============ 参数面板的收起/展开手柄（手机端才有）============
   改字这类参数多，面板一高就把画布挤没了；给个随时能收起的手柄，
   收起后画布占满，再点一下展开继续调参数。手柄固定在最上面，不随内容滚走。 */
.editor-opts-wrap { display: contents; }
.opts-head { display: none; }
@media (max-width: 979px) {
  .editor-opts-wrap { display: flex; flex-direction: column; flex: 0 0 auto; background: #fff; border-top: 1px solid var(--line); }
  .opts-head {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 6px 12px; border: none; background: #f6f9f7;
    font-size: 12.5px; font-weight: 700; color: #3d5147; cursor: pointer; text-align: left;
  }
  .opts-head .oh-arrow { font-size: 12px; transition: transform .15s; }
  .opts-head .oh-hint { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--gray); }
  .editor-opts-wrap.is-collapsed .opts-head .oh-arrow { transform: rotate(-90deg); }
  .editor-opts-wrap.is-collapsed .opts-head .oh-hint { color: var(--green-dark); }
  .editor-opts-wrap.is-collapsed .editor-options { display: none !important; }
  /* 手机端参数面板别太高：默认给画布留出大部分高度 */
  /* 手机上还会弹键盘，面板越高画布越看不见：压到 1/4 屏左右，内容在里面滚动 */
  .editor-options { max-height: 26vh; }
  body.retext-mode .editor-options { max-height: 30vh; }
}

/* ============ 手机端：输入框字号必须 ≥16px（否则打字时整页被放大）============
   iOS Safari（含手机自带浏览器、百度 App 等）聚焦 font-size < 16px 的输入框时，
   会把**整个页面**放大 —— 表现就是"点进输入框/一打字，整个屏幕跟着变大"，放大后布局还错位。
   所以手机端把所有能输入的控件字号统一提到 16px；
   想把盒子做小请用内边距/高度去压，不要再靠缩小字号。 */
@media (max-width: 900px) {
  input[type="text"], input[type="number"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="url"], input[type="password"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
  textarea, select {
    font-size: 16px !important;
  }
  /* 字号上去了，用更紧的内边距把高度压回来，看起来仍然紧凑 */
  .editor-options input[type="text"],
  .editor-options input[type="number"],
  .editor-options select { padding: 2px 8px; height: 30px; }
  .opt-row input[type="text"],
  .opt-row input[type="number"],
  .opt-row select { padding: 6px 10px; }
  .b64-area { font-size: 16px !important; }
}
.editor-options .opt-row { gap: 4px 8px; }
.editor-options .inline-wrap { gap: 6px; flex-wrap: wrap; }
.editor-options input[type="text"] { padding: 5px 8px; font-size: 13px; }
.editor-options input[type="number"] { padding: 5px 8px; font-size: 13px; width: 76px; }
.editor-options input[type="range"] { width: 96px; height: 18px; }
.editor-options input[type="color"] { width: 32px; height: 24px; border-radius: 7px; padding: 1px; }
.editor-options select { padding: 5px 8px; font-size: 12.5px; border-radius: 7px; }
/* 面板里的按钮统一收小（.btn-sm 的规则在后面，会更具体地覆盖） */
.editor-options .btn { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }
.editor-options .btn-sm { padding: 5px 9px; font-size: 12px; border-radius: 7px; }
/* 形状 / 变换 这类按钮组：按内容宽度、文字不折行，一行放不下整组换行 */
.editor-options .mode-btns { gap: 6px; }
.editor-options .mode-btns .btn { padding: 6px 10px; font-size: 12.5px; }
/* 当前颜色块 + 吸管取色按钮 */
.editor-options .cur-chip { width: 24px; height: 24px; border-radius: 7px; }
.editor-options .picker-btn { padding: 3px 7px; font-size: 10px; border-radius: 8px; gap: 0; }
.editor-options .picker-btn svg { width: 14px; height: 14px; }
/* 色板圆点 */
.editor-options .color-presets { gap: 5px; }
.editor-options .color-presets .cp { width: 20px; height: 20px; }
.editor-options .color-presets .cp.is-on { transform: scale(1.1); }
.editor-options .color-presets .cp.cur-preset::after { font-size: 10px; }
/* 贴纸 */
.editor-options .emoji-grid { gap: 4px; }
.editor-options .emoji-btn { width: 30px; height: 30px; font-size: 17px; border-radius: 8px; }
/* 缩放 / 适应 行 */
.editor-zoom-row { gap: 4px; }
.editor-zoom-row > span { display: none; }
.editor-zoom-row .btn-sm { padding: 4px 8px; min-width: 28px; }
.editor-zoom-row > b { font-size: 12px; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
/* 改字面板 */
.editor-options .opt-row.retext-info { padding: 5px 8px; }
.editor-options .opt-row.retext-info > span:first-child { font-size: 11px; }
.editor-options .retext-fonts { gap: 4px; margin: 2px 0 4px; }
.editor-options .retext-fonts .btn { padding: 4px 8px; font-size: 12px; }
.editor-options .retext-sf { font-size: 11px; padding: 2px 5px 2px 8px; gap: 4px; }
.editor-options .retext-sf button { width: 16px; height: 16px; font-size: 10px; }
.editor-options .opt-row.retext-diag > input { padding: 4px 6px; font-size: 11px; }
/* 形状按钮（矩形/圆形/直线/箭头 等）与其它按钮组：同样按内容宽度、不折行 */
.editor-options .sh-btn { padding: 5px 9px; font-size: 12px; }
.editor-options .preset-btns { gap: 5px; }
.editor-options .retext-ufcount { font-size: 11px; }
.editor-options .retext-local { font-size: 10.5px; padding: 0 4px; }

/* 编辑器空状态里的一行改字用法提示 */
.ez-tip {
  margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: #5b6b62;
  background: #f4f8f5; border: 1px solid #dbe9e0; border-radius: 8px; padding: 8px 12px; max-width: 340px;
}
.ez-tip b { color: var(--green-dark); }

/* 改字诊断数据行（可长按复制，方便把识别结果发给客服核对） */
.opt-row.retext-diag { align-items: center; gap: 6px; }
.opt-row.retext-diag > span { flex: 0 0 auto; }
.opt-row.retext-diag > input {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: #4a5b52;
  background: #f4f8f5; border: 1px solid #dbe9e0; border-radius: 6px; padding: 5px 7px;
}
.opt-row.retext-diag > button { flex: 0 0 auto; }

/* 改字：字库里没有原字体时的提醒（琥珀色） */
.opt-row.retext-info.is-warn { background: #fff7ec; border-color: #f0d5ac; }
.opt-row.retext-info.is-warn b { color: #6b4a12; }
.retext-addfont { position: relative; overflow: hidden; cursor: pointer; }
.retext-ufcount { font-style: normal; font-size: 11.5px; color: #6b7a70; margin-left: 2px; align-self: center; }

/* 改字：服务器字体库面板 */
.opt-row.retext-key { align-items: center; gap: 6px; }
.opt-row.retext-key > input {
  flex: 1 1 auto; min-width: 0; font-size: 12px; border: 1px solid #dbe9e0;
  border-radius: 6px; padding: 4px 6px; background: #fff;
}
.opt-row.retext-hint { padding: 0 10px 6px; }
.opt-row.retext-hint b { font-weight: 400; font-size: 11.5px; color: #6b7a70; line-height: 1.6; }
.retext-serverlist { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.retext-sf {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: #f4f8f5; border: 1px solid #dbe9e0; border-radius: 20px; padding: 3px 6px 3px 10px;
}
.retext-sf em { font-style: normal; color: #16261c; }
.retext-sf small { color: #8a978f; font-size: 10.5px; }
.retext-sf button {
  border: 0; background: #e7efe9; color: #7a8a80; border-radius: 50%;
  width: 18px; height: 18px; line-height: 1; cursor: pointer; font-size: 11px;
}
.retext-sf button:hover { background: #f6d7d7; color: #c0392b; }

/* ============ 批量处理 ============ */
.batch-list {
  max-height: 460px; overflow-y: auto; border: 1px solid #e2ebe6; border-radius: 10px;
  background: #fbfdfc; margin-bottom: 12px;
}
.batch-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-bottom: 1px solid #eef4f0; font-size: 12.5px; color: #33443b;
}
.batch-row:last-child { border-bottom: 0; }
.batch-row.is-done { background: #f3faf5; }
.batch-row.is-error { background: #fff6f6; }
.batch-row.is-work { background: #fffbf0; }
.batch-st { flex: 0 0 auto; width: 16px; text-align: center; }
.batch-th {
  flex: 0 0 auto; width: 38px; height: 38px; object-fit: cover;
  border-radius: 6px; background: #eef4f0; border: 1px solid #e2ebe6;
}
.batch-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-meta {
  flex: 0 0 auto; font-size: 11.5px; color: #7d8b83; font-variant-numeric: tabular-nums;
}
.batch-row.is-error .batch-meta { color: #c0392b; }
@media (max-width: 900px) {
  .batch-meta { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .batch-list { max-height: 300px; }
}

/* 改字：认出来自本机字体的标记 */
.retext-local {
  font-style: normal; font-size: 11px; color: #2b7ab8;
  background: #eaf4fb; border: 1px solid #c9e2f4; border-radius: 5px; padding: 1px 5px; margin-left: 4px;
}

/* ==========================================================================
   【电脑端专用区】DESKTOP-ONLY-START
   --------------------------------------------------------------------------
   ⚠️ 手机端布局已锁死：本标记以上的内容（基础规则 + 所有 max-width 断点）
      一律不许改，改了 mobilelock.js 会直接报错。
      电脑端的所有调整都写在下面这段里，且只允许 @media (min-width: 980px)，
      靠"写在后面 + 同选择器"覆盖上面的规则，绝不影响手机端。
   ========================================================================== */
/* ===== DESKTOP-ONLY-START ===== */
@media (min-width: 980px) {

  /* ① 首屏两个入口并排（原来被一条通用规则改成了上下堆叠、还拉满整宽，电脑上很空） */
  .hero-cta {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 16px;
  }
  .hero-retext-btn { flex: 0 0 auto; padding: 18px 30px; }
  .hero-retext-btn .he-text { font-size: 18px; }
  .hero-retext-btn .he-text small { font-size: 13px; }
  .hero-edit-btn { padding: 20px 40px; }
  .he-text { font-size: 22px; }
  .he-icon { font-size: 36px; }

  /* ② 顶部导航在中等宽屏（1024/1280）不再挤成两行 */
  .header-inner { gap: 16px; }
  .main-nav a { padding: 7px 10px; font-size: 13.5px; }

  /* ③ 首页工具卡：固定 5 列（15 个工具正好 3 行），卡片更饱满、悬停有绿色强调 */
  .tool-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
  .tool-card { display: flex; flex-direction: column; padding: 22px 18px 20px; min-height: 152px; }
  .tool-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(31, 60, 43, .16); border-color: #9fd3b2; }
  .tool-card .tc-icon { font-size: 32px; line-height: 1; }
  .tool-card .tc-name { font-size: 16.5px; margin-top: 12px; }
  .tool-card .tc-desc { font-size: 12.5px; line-height: 1.55; margin-top: 6px; }

  /* ④ 工具页：参数栏默认仍是 340px（控制项多，不收窄），结果区吃掉剩余宽度；
        取色器 / Base64 是"看结果为主"的页面，参数栏收窄给结果让位 */
  #view-picker .tool-layout,
  #view-base64 .tool-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .tool-layout { gap: 24px; }

  /* ⑤ 编辑器左侧工具栏：图标在前、文字在后，横排一行
        —— 每个按钮从"图标压文字"的 ~50px 高降到 30px，整条矮一大截；
           图标固定 18px 宽，文字左对齐，一排读起来整齐
        —— 并且做成**通顶通底的整条竖栏**（桌面软件那种），不再是悬浮小窗口：
           贴左边缘、贴着顶栏下方、一直到底边，方角、无阴影、不需要滚动。
           顶栏高度由 JS 量出来写进 --tools-top（字体/内边距变了也不会错位）。 */
  .editor-tools {
    position: absolute; left: 0; top: var(--tools-top, 48px); bottom: 0; transform: none;
    width: 144px; padding: 10px 10px 0; gap: 3px;
    background: #33383d; border: none; border-right: 1px solid rgba(255, 255, 255, .10);
    border-radius: 0; box-shadow: none;
    max-height: none; overflow-y: auto; overscroll-behavior: contain;
  }
  .editor-tools::-webkit-scrollbar { width: 6px; }
  .editor-tools::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
  .editor-tools::-webkit-scrollbar-track { background: transparent; }
  /* 按钮顺序以 HTML 为准（电脑端竖栏与手机端底部横条同一套顺序）：
     抓手 · 移动 · 文字 · 框选删除 · 改字 · 画笔 · 仿制 · 填充 · 马赛克 · 形状 ·
     贴纸 · 裁剪 · 调整 · 滤镜 ｜ 加图层 · 一键抠图 · 删除图片 */
  .editor-tools .tool-btn {
    flex: none; width: 100%; min-width: 0;
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 8px; height: 30px; padding: 5px 8px; border-radius: 8px;
    font-size: 11.5px; color: #d5dade; white-space: nowrap;
  }
  .editor-tools .tool-btn .ti { flex: 0 0 18px; width: 18px; font-size: 16px; line-height: 1; text-align: center; }
  .editor-tools .tool-btn:hover { background: rgba(255, 255, 255, .13); }
  .editor-tools .tool-btn.is-on { background: var(--green); color: #fff; }
  .editor-tools .tool-sep { width: 100%; height: 1px; align-self: auto; margin: 2px 0; background: rgba(255, 255, 255, .12); }
  .editor-tools .tool-act { color: #d5dade; }

  /* ⑥ 画布区留白：左边紧贴工具栏（144px = 栏里 10px 内边距 + 124px 内容）；右边与面板间距一致 */
  .editor-stage { margin: 0 264px 0 144px; padding: 18px; }

  /* ⑦ 右侧两个面板按屏幕高度分配，拼满整列
        （原来参数面板吃满高度、图层面板只有 232px，大屏上很浪费）
        clamp 保证图层面板**永远不会比原来的 232px 更矮**，大屏最多长到 400px
        ⚠️ 图层面板**宽度仍是 246px 不变**，只调高度上限 */
  .editor-options { width: 246px; max-height: calc(100vh - 116px - clamp(232px, 32vh, 400px)); }
  .layers-panel { max-height: clamp(232px, 32vh, 400px); }

  /* ⑧ 编辑器顶部的深色菜单栏：按钮间距放宽，更像桌面软件 */
  .editor-top .btn { padding: 7px 12px; }

  /* ⑨ 「属性 · 历史」面板（参考 PS 右侧栏；DOM 只在电脑端生成）
        位置：参数面板下面、图层面板上面，432..+psH 之间，三条拼满右侧整列
        --ps-panel-h 由 JS 控制（收起时变成 34px 的标题条），参数面板高度也跟着让位 */
  :root { --ps-panel-h: 176px; }
  .ps-panel {
    position: absolute; right: 10px; z-index: 245;
    bottom: calc(44px + clamp(232px, 32vh, 400px) + 10px);
    width: 246px; height: var(--ps-panel-h, 176px);
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); overflow: hidden;
  }
  .ps-panel[hidden] { display: none; }
  .ps-tabs {
    flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-bottom: 1px solid var(--line); background: #f6f9f7;
  }
  .ps-tab {
    border: none; background: none; font-size: 12px; font-weight: 700; color: var(--gray);
    padding: 4px 9px; border-radius: 7px; cursor: pointer;
  }
  .ps-tab.is-on { background: var(--green); color: #fff; }
  .ps-collapse {
    margin-left: auto; width: 22px; height: 22px; padding: 0;
    border: 1px solid var(--line); background: #fff; border-radius: 6px;
    cursor: pointer; font-size: 11px; color: var(--gray); line-height: 1;
  }
  .ps-body { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
  .ps-empty { font-size: 12px; color: var(--gray); line-height: 1.7; padding: 4px 2px; }
  .ps-blend { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 11px; color: var(--gray); }
  .ps-blend select {
    flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 3px 6px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  }
  .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .ps-num { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--gray); }
  .ps-num input {
    width: 100%; min-width: 0; font-size: 12.5px; padding: 3px 6px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  }
  .ps-num input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(32, 165, 58, .14); }
  .ps-order { display: flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 11.5px; color: var(--gray); }
  .ps-order button {
    width: 25px; height: 25px; padding: 0; border: 1px solid var(--line);
    background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; color: #3c4a41;
  }
  .ps-order button:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-pos { margin-left: auto; font-size: 11px; color: #93a29a; }
  /* 导航器（左下角，宽度与左侧工具栏一致，视觉上对齐成一列） */
  :root { --ps-nav-h: 186px; }
  .ps-nav {
    position: absolute; left: 10px; bottom: 48px; z-index: 258;
    width: 124px; display: flex; flex-direction: column;
    background: #3a3f44; border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    overflow: hidden;
  }
  .ps-nav[hidden] { display: none; }
  .ps-nav-head {
    display: flex; align-items: center; gap: 4px; padding: 5px 7px;
    font-size: 10.5px; color: #c8cdd2; background: rgba(255, 255, 255, .05);
  }
  .ps-nav-head > b { margin-left: auto; font-size: 10.5px; color: #fff; font-variant-numeric: tabular-nums; }
  .ps-nav-head > button {
    width: 18px; height: 18px; padding: 0; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07); color: #e8eaed; border-radius: 5px; cursor: pointer;
    font-size: 10px; line-height: 1;
  }
  .ps-nav-body { display: flex; flex-direction: column; gap: 6px; padding: 7px; }
  .ps-nav-thumb {
    position: relative; width: 110px; height: 110px; margin: 0 auto;
    background: rgba(0, 0, 0, .35); border-radius: 6px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none;
  }
  .ps-nav-thumb:active { cursor: grabbing; }
  .ps-nav-thumb canvas { display: block; max-width: 100%; max-height: 100%; }
  .ps-nav-view {
    position: absolute; border: 1.5px solid var(--green); background: rgba(32, 165, 58, .16);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset; pointer-events: none;
  }
  /* 亮框上有东西可抓时给个"抓手"光标（框本身不拦事件，命中判断在 JS 里做） */
  .ps-nav-thumb.ps-nav-canpan { cursor: grab; }
  .ps-nav-thumb.ps-nav-canpan:active { cursor: grabbing; }
  .ps-nav-zoom { display: flex; align-items: center; gap: 4px; }
  .ps-nav-zoom > button {
    flex: 0 0 auto; height: 22px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07); color: #e8eaed; border-radius: 6px; cursor: pointer; font-size: 11px;
  }
  .ps-nav-zoom > button:hover { background: rgba(255, 255, 255, .16); }
  .ps-nav-zoom > input[type="range"] { flex: 1 1 auto; min-width: 0; height: 16px; }
  /* 导航器现在是"工具栏竖栏里的最后一块"：跟着栏一起排（有富余就贴底），栏要滚动时一起滚，
     不用再给工具栏留高度，也不会打架。放进栏里就不该再像个悬浮卡片——去掉阴影、收小圆角 */
  .editor-tools .ps-nav {
    position: static; left: auto; bottom: auto; width: 124px; margin: auto 0 10px;
    border-radius: 10px; box-shadow: none; border-color: rgba(255, 255, 255, .10);
  }

  /* ---- 视图：标尺 / 参考线 / 网格（PS 的「视图」）----
     都挂在 body 上用 position:fixed，每帧按 stage 的真实矩形摆位，
     不改动 .editor-stage 的定位上下文，也不影响任何既有元素。
     整段只在电脑端区里（手机端连类名都不会出现）。 */
  /* 开标尺时给画布让出留白（标尺 20px + 18px 间距 = 38px，标尺压不到图上） */
  body.ps-ruler-on .editor-stage { padding: 38px 18px 18px 38px; }
  /* 标尺铺满整个窗口，竖标尺贴在左侧工具栏的**右边**（跟 PS 一样：工具栏在最左，
     角标落在工具栏右上角，横条从角标往右铺到窗口最右，竖条从角标往下铺到底）。
     所以"开标尺"时只需要把画布区往右下让开 20px（左让：竖栏 144 + 竖标尺 20 = 164；上让：横标尺 20px）；
     左侧工具栏本身一动不动（它就在最左边，标尺在它右边，谁也不压谁）。 */
  body.ps-ruler-on .editor-stage { margin: 20px 264px 0 164px; }
  body.ps-ruler-on .editor-options {
    top: 76px;
    max-height: calc(100vh - 136px - clamp(232px, 32vh, 400px) - var(--ps-panel-h, 176px) - 10px);
  }
  .ps-ruler-h, .ps-ruler-v, .ps-ruler-corner {
    /* z-index 提到 900：标尺要铺满整个窗口、就不能被任何桌面元素压在下面
       （左侧竖栏 260 / 图层面板 400 / 浮动按钮 320 / 右键菜单 520 都在它下面；
        只有全屏弹层 1000 还在它上面，这是对的）。 */
    position: fixed; z-index: 900; background: #33383d; color: #aab2b8;
    border: 1px solid rgba(255, 255, 255, .08); box-sizing: border-box;
  }
  .ps-ruler-h { display: block; border-top: none; border-left: none; cursor: ns-resize; }
  .ps-ruler-v { display: block; border-top: none; border-left: none; cursor: ew-resize; }
  /* ⚠️ 两条标尺必须 content-box：border-box 会把 20px 高的位图塞进 19px 的内容盒，
     整条位图被重新缩放 95%，刻度和数字都发虚、大刻度看着像被截短。 */
  .ps-ruler-h, .ps-ruler-v { box-sizing: content-box; }
  .ps-ruler-corner {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; line-height: 1; cursor: default; border-top: none; border-left: none;
  }
  .ps-grid-layer { position: fixed; z-index: 252; pointer-events: none; overflow: hidden; display: block; }
  .ps-guide-layer { position: fixed; z-index: 256; pointer-events: none; overflow: hidden; }
  .ps-guide { position: absolute; pointer-events: auto; }
  .ps-guide-v {
    width: 7px; margin-left: -3px; cursor: col-resize;
    background: linear-gradient(90deg, rgba(32,165,58,0) 3px, #20a53a 3px, #20a53a 4px, rgba(32,165,58,0) 4px);
  }
  .ps-guide-h {
    height: 7px; margin-top: -3px; cursor: row-resize;
    background: linear-gradient(180deg, rgba(32,165,58,0) 3px, #20a53a 3px, #20a53a 4px, rgba(32,165,58,0) 4px);
  }
  .ps-guide.is-dead.ps-guide-v {
    background: linear-gradient(90deg, rgba(224,82,82,0) 3px, #e05252 3px, #e05252 4px, rgba(224,82,82,0) 4px);
  }
  .ps-guide.is-dead.ps-guide-h {
    background: linear-gradient(180deg, rgba(224,82,82,0) 3px, #e05252 3px, #e05252 4px, rgba(224,82,82,0) 4px);
  }
  .ps-guide > b {
    display: none; position: absolute; padding: 1px 4px; border-radius: 4px;
    background: #20a53a; color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ps-guide.is-drag > b { display: block; }
  .ps-guide-v > b { left: 9px; top: 2px; }
  .ps-guide-h > b { left: 2px; top: 9px; }
  .ps-guide.is-dead > b { background: #e05252; }
  /* 视图标签页 */
  .ps-view { display: flex; flex-direction: column; gap: 6px; }
  .ps-sw-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .ps-sw {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 6px; font-size: 11px; border: 1px solid var(--line); background: #fff;
    border-radius: 6px; cursor: pointer; color: #3c4a41; white-space: nowrap;
  }
  .ps-sw > b { font-size: 10px; font-weight: 600; color: #93a29a; }
  .ps-sw.is-on { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); }
  .ps-sw.is-on > b { color: var(--green); }
  .ps-view .ps-num > input { width: 62px; }

  /* ---- 颜色面板：前景 / 背景色 + 色板库（PS 的色板）---- */
  .ps-tab { padding: 4px 6px; font-size: 11.5px; }   /* 标签变 5 个了，收一点宽度 */
  .ps-color { display: flex; flex-direction: column; gap: 6px; }
  .ps-fgbg { display: flex; align-items: flex-start; gap: 10px; }
  .ps-fgbg-sq { position: relative; flex: 0 0 62px; width: 62px; height: 62px; }
  .ps-fgbox, .ps-bgbox {
    position: absolute; width: 42px; height: 42px; border-radius: 7px;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #c2ccc6, 0 1px 3px rgba(0, 0, 0, .12);
  }
  .ps-fgbox { left: 0; top: 0; z-index: 2; }
  .ps-bgbox { right: 0; bottom: 0; z-index: 1; }
  .ps-fgbox > input, .ps-bgbox > input {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    opacity: 0; border: none; padding: 0; cursor: pointer;
  }
  .ps-fgbg-btns { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
  .ps-fgbg-btns button {
    padding: 3px 6px; font-size: 11px; border: 1px solid var(--line); background: #fff;
    border-radius: 6px; cursor: pointer; color: #3c4a41; white-space: nowrap;
  }
  .ps-fgbg-btns button:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-hex-row { display: flex; gap: 6px; font-size: 10.5px; color: var(--gray); }
  .ps-hex-row > label { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
  .ps-hex-row input {
    width: 100%; min-width: 0; padding: 3px 4px; font-size: 11px; border: 1px solid var(--line);
    border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase;
  }
  .ps-sw-title { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray); margin-top: 2px; }
  .ps-mini {
    margin-left: auto; padding: 1px 6px; font-size: 10.5px; border: 1px solid var(--line);
    background: #fff; border-radius: 5px; cursor: pointer; color: #3c4a41;
  }
  .ps-mini + .ps-mini { margin-left: 2px; }
  .ps-mini:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-sw-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .ps-sws {
    width: 100%; height: 22px; padding: 0; border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 4px; cursor: pointer;
  }
  .ps-sws:hover { transform: scale(1.06); }
  .ps-sws.is-fg { box-shadow: 0 0 0 2px var(--green); border-color: #fff; }
  .ps-sws.is-bg { box-shadow: 0 0 0 2px #7b8a81; border-color: #fff; }
  .ps-sws.is-fg.is-bg { box-shadow: 0 0 0 2px var(--green), 0 0 0 4px #7b8a81; }

  /* ---- 字符面板（文字图层的对齐 / 加粗 / 斜体 / 行距 / 字距）---- */
  .ps-char {
    margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line);
    display: flex; flex-direction: column; gap: 6px;
  }
  .ps-char-row { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray); }
  .ps-char-row > span { flex: 0 0 30px; white-space: nowrap; }
  .ps-tbtn {
    flex: 0 0 auto; width: 26px; height: 22px; padding: 0; font-size: 11px; line-height: 1;
    border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: #3c4a41;
  }
  .ps-tbtn:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-tbtn.is-on { background: var(--green); border-color: var(--green); color: #fff; }
  .ps-tbold { font-weight: 800; }
  .ps-tital { font-style: italic; font-family: Georgia, "Times New Roman", serif; }

  /* ---- 图像大小 / 画布大小 ---- */
  .ps-imgops {
    margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line);
    display: flex; flex-direction: column; gap: 6px;
  }
  .ps-imgops .ps-merge { margin-top: 0; }
  .ps-dims { display: flex; align-items: center; gap: 6px; }
  .ps-dim { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 11px; color: var(--gray); }
  .ps-dim > span { flex: 0 0 auto; }
  .ps-dim > input {
    width: 100%; min-width: 0; padding: 3px 5px; font-size: 11.5px;
    border: 1px solid var(--line); border-radius: 5px; font-variant-numeric: tabular-nums;
  }
  /* 图层样式里的颜色格（投影色/发光色/描边色） */
  .ps-dim > input[type="color"] {
    height: 22px; padding: 0 2px; background: #fff; cursor: pointer;
  }
  .ps-anchor {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
    width: 78px; margin: 0 auto;
  }  .ps-anc {
    height: 20px; padding: 0; font-size: 11px; line-height: 1;
    border: 1px solid var(--line); background: #fff; border-radius: 5px; cursor: pointer; color: #3c4a41;
  }
  .ps-anc:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-anc.is-on { background: var(--green); border-color: var(--green); color: #fff; }
  .ps-fills { display: flex; gap: 4px; }
  .ps-fill {
    flex: 1 1 auto; padding: 3px 4px; font-size: 11px; white-space: nowrap;
    border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: #3c4a41;
  }
  .ps-fill:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-fill.is-on { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); font-weight: 700; }

  /* ---- 选区面板 ---- */
  .ps-merge button[disabled] { opacity: .45; cursor: default; }
  .ps-merge button[disabled]:hover { background: #fff; border-color: var(--line); }
  .ps-merge button > em { font-style: normal; font-weight: 800; }
  .ps-sw[disabled] { opacity: .45; cursor: default; }

  /* 调整面板（色相/饱和度、色阶、阈值、色调分离…） */
  .ps-adj { display: flex; flex-direction: column; gap: 6px; }
  .ps-adj-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray); }
  .ps-adj-row > span { flex: 0 0 56px; white-space: nowrap; }
  .ps-adj-row input[type="range"] { flex: 1 1 auto; min-width: 0; height: 18px; }
  .ps-adj-row > b {
    flex: 0 0 42px; text-align: right; font-size: 11.5px; color: var(--ink);
    font-variant-numeric: tabular-nums; font-weight: 600;
  }
  .ps-adj-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .ps-adj-btns button {
    flex: 1 1 auto; padding: 4px 6px; font-size: 11px; border: 1px solid var(--line);
    background: #fff; border-radius: 6px; cursor: pointer; color: #3c4a41; white-space: nowrap;
  }
  .ps-adj-btns button:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-adj-tip { font-size: 10.5px; color: #93a29a; line-height: 1.6; margin-top: 2px; }
  .ps-merge { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .ps-merge button {
    flex: 1 1 auto; padding: 4px 6px; font-size: 11px; border: 1px solid var(--line);
    background: #fff; border-radius: 6px; cursor: pointer; color: #3c4a41; white-space: nowrap;
  }
  .ps-merge button:hover { background: #f2f8f4; border-color: #9fd3b2; }
  .ps-hist-btns { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .ps-hist-btns button {
    flex: 0 0 auto; padding: 4px 9px; font-size: 12px; border: 1px solid var(--line);
    background: #fff; border-radius: 7px; cursor: pointer; color: #3c4a41;
  }
  .ps-hist-btns button[disabled] { opacity: .45; cursor: default; }
  .ps-hist-list { display: flex; flex-direction: column; gap: 2px; }
  .ps-hist-row { font-size: 12px; color: #3c4a41; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
  .ps-hist-row:hover { background: #f2f8f4; }
  .ps-hist-row.is-cur { background: #eef7f1; font-weight: 700; color: var(--green-dark); cursor: default; }
  .ps-hist-row.is-redo { color: #7b8a81; }
  .ps-info {
    flex: 0 0 auto; border-top: 1px solid var(--line); padding: 5px 8px;
    font-size: 11px; color: var(--gray); background: #fafcfb;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 参数面板高度要把新面板也让出来（否则会压在一起） */
  .editor-options { max-height: calc(100vh - 116px - clamp(232px, 32vh, 400px) - var(--ps-panel-h, 176px) - 10px); }
}

/* ⑨ 宽屏档：内容原来封顶 1280px，1920 屏两边空太多 */
@media (min-width: 1440px) {
  #app { max-width: 1440px; }
  .header-inner { max-width: 1440px; }
  .tool-grid { gap: 18px; }
  .tool-card { min-height: 160px; }
  /* 参数栏也放宽一点，滑杆与标签更从容 */
  .tool-layout { grid-template-columns: 380px minmax(0, 1fr); }
}
@media (min-width: 1800px) {
  #app { max-width: 1600px; }
  .header-inner { max-width: 1600px; }
}

/* ㉜ 电脑端字号与排版整体美化
   ------------------------------------------------------------------
   桌面端原来偏小：面板里 10.5~12.5px、左侧工具栏 11.5px、网站导航 13.5px。
   这一块把电脑端字号整体上调 2~3px，并把排版做细：
   ① 字体栈：Windows 上优先用更清晰的「微软雅黑 UI」，其次雅黑 / 苹方 / 系统 UI 字体；
   ② 数字统一等宽（tabular-nums）：坐标、数值、尺寸不会因字宽跳动；
   ③ 小标签统一 .2~.3px 字距，中文小字不糊成一团；
   ④ 灰字压深（#6b7a72 → #5d6d64、#93a29a → #64746b），白底上对比更高；
   ⑤ 输入框 / 按钮内边距跟着加大，字变大之后不显得挤。
   宽度吃紧的三处（网站导航 / 编辑器顶栏 / 面板标签）同时收内边距或间距，总宽不变 ——
   不会把导航挤成两行、也不会撑破 246px 的面板。
   整块只在 min-width: 980px 里，手机端（锁定区）一个字节都没动。 */
@media (min-width: 980px) {
  /* ---- ① 字体栈 + 渲染 ---- */
  body, .editor-shell, .ps-panel, .editor-options, .layers-panel, .retext-bar, .ctx-menu {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", -apple-system,
      BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* ---- ④ 灰字压深（白底上更清楚）---- */
  :root { --gray: #5d6d64; }
  .ps-pos, .ps-adj-tip, .ps-info, .ps-mini { color: #64746b; }

  /* ---- 网站外壳：导航 / 首屏 / 工具卡 / 各工具页 ---- */
  .main-nav a { padding: 6px 8px; font-size: 15px; letter-spacing: .2px; }
  .he-text { font-size: 28px; letter-spacing: .5px; }
  .hero-retext-btn .he-text { font-size: 22px; }
  .hero-retext-btn .he-text small { font-size: 15px; }
  .hero-sub { font-size: 19.5px; line-height: 1.7; }
  .he-icon { font-size: 40px; }
  .tool-card .tc-icon { font-size: 36px; }
  .tool-card .tc-name { font-size: 19.5px; letter-spacing: .3px; }
  .tool-card .tc-desc { font-size: 14.5px; line-height: 1.65; }
  .view-title { font-size: 32px; letter-spacing: .5px; }
  .btn { font-size: 16.5px; }
  .btn-sm { font-size: 14.5px; }
  .btn-lg { font-size: 18px; }
  .opt-row { font-size: 14.5px; }
  .opt-row > span { font-size: 14px; letter-spacing: .2px; }
  .opt-row input[type="text"], .opt-row input[type="number"], .opt-row select { font-size: 15.5px; }
  .orig-info, .slice-tip, .slice-status, .mat-progress { font-size: 14.5px; }
  .dz-text { font-size: 19px; }
  .dz-hint { font-size: 14.5px; }

  /* ---- 编辑器顶栏（字号加大 + 内边距微调，宽度基本不变） ---- */
  .editor-top .btn { padding: 6px 11px; font-size: 15px; letter-spacing: .2px; }
  .editor-top .editor-fmt { font-size: 15px; }
  .editor-title { font-size: 17px; letter-spacing: .3px; }
  .editor-ver { font-size: 12.5px; }

  /* ---- 左侧工具栏按钮 ---- */
  .editor-tools .tool-btn { font-size: 14.5px; font-weight: 500; letter-spacing: .2px; }
  .editor-tools .tool-btn .ti { font-size: 18px; }

  /* ---- 右侧参数面板 ---- */
  .editor-options .opt-row > span:first-child { font-size: 14px; letter-spacing: .2px; }
  .editor-options input[type="text"], .editor-options input[type="number"],
  .editor-options select { font-size: 15px; padding: 6px 9px; }
  .editor-options .btn { font-size: 15px; }
  .editor-options .btn-sm { font-size: 14.5px; }
  .editor-options .btn-lg { font-size: 16px; }
  .editor-options .mode-btns .btn { font-size: 15px; }
  .editor-options .opt-tip { font-size: 14px; line-height: 1.7; }
  .editor-options .editor-zoom-row > b { font-size: 14px; }
  .editor-options .picker-btn { font-size: 12.5px; }
  .editor-options .color-presets .cp.cur-preset::after { font-size: 12px; }
  .editor-options .retext-fonts .btn, .editor-options .sh-btn { font-size: 14px; }
  .editor-options .retext-sf, .editor-options .retext-ufcount, .editor-options .retext-local { font-size: 13.5px; }
  .editor-options .opt-row.retext-info > span:first-child { font-size: 13.5px; }
  .editor-options .opt-row.retext-diag > input { font-size: 13.5px; }

  /* ---- 图层面板 ---- */
  .layers-head { font-size: 15.5px; letter-spacing: .3px; }
  .layer-row { font-size: 15.5px; padding: 7px 9px; }
  .layer-op-row > span, .layer-op-row > b { font-size: 14px; }
  .layers-actions .btn { font-size: 15px; font-weight: 600; }

  /* ---- 「属性·调整·颜色·视图·历史」面板（ps-*）----
       标签字号加到 13.5px：同时把标签间距收成 2px、面板内边距收成 5px 6px、
       收起按钮收到 20px，5 个标签 + 收起按钮仍排在 246px 内（自查里按公式硬算）。 */
  .ps-tabs { gap: 2px; padding: 5px 6px; }
  .ps-tab { padding: 4px 5px; font-size: 13.5px; letter-spacing: .2px; }
  .ps-collapse { width: 20px; height: 20px; font-size: 12.5px; }
  .ps-empty { font-size: 14.5px; line-height: 1.8; }
  .ps-blend { font-size: 13.5px; }
  .ps-blend select { font-size: 14.5px; padding: 4px 7px; }
  .ps-num { font-size: 13.5px; letter-spacing: .2px; }
  .ps-num input { font-size: 15px; padding: 4px 7px; }
  .ps-order { font-size: 14px; }
  .ps-order button { font-size: 14px; }
  .ps-pos { font-size: 13px; }
  .ps-sw { font-size: 13.5px; }
  .ps-sw > b { font-size: 12px; }
  .ps-sw-title { font-size: 13.5px; }
  .ps-mini { font-size: 13px; }
  .ps-fgbg-btns button { font-size: 13.5px; }
  .ps-hex-row { font-size: 13px; }
  .ps-hex-row input { font-size: 13.5px; padding: 4px 6px; }
  .ps-char-row { font-size: 13.5px; }
  .ps-tbtn { font-size: 13px; }
  .ps-dim { font-size: 13.5px; }
  .ps-dim > input { font-size: 14px; padding: 4px 6px; }
  .ps-anchor, .ps-fill { font-size: 13.5px; }
  .ps-adj-row { font-size: 13.5px; letter-spacing: .2px; }
  .ps-adj-row > b { font-size: 13.5px; }
  .ps-adj-btns button, .ps-merge button { font-size: 13.5px; border-radius: 8px; }
  .ps-adj-tip { font-size: 13px; line-height: 1.75; }
  .ps-hist-btns button { font-size: 14px; border-radius: 8px; }
  .ps-hist-row { font-size: 14px; padding: 5px 9px; }
  .ps-info { font-size: 13px; }

  /* ---- 导航器 / 标尺角标 / 参考线标签 ---- */
  .ps-nav-head, .ps-nav-head > b { font-size: 13px; }
  .ps-nav-head > button, .ps-nav-zoom > button { font-size: 12.5px; }
  .ps-ruler-corner { font-size: 11px; }
  .ps-guide > b { font-size: 12.5px; }

  /* ---- ② 数字等宽 + ③ 小标签字距：读数不跳、中文不糊 ---- */
  .ps-num input, .ps-dim > input, .ps-adj-row > b, .ps-hist-row, .ps-nav-head > b,
  .editor-zoom-row > b, .layer-op-row > b, .ps-blend select, .ps-hex-row input {
    font-variant-numeric: tabular-nums;
  }
}

/* 宽屏（≥1280）导航再放大一档（窄屏那档保持 15px，免得挤成两行） */
@media (min-width: 1280px) {
  .main-nav a { padding: 6px 10px; font-size: 16px; }
}

/* ㉝ 右侧栏 = PS 式面板堆叠（可拖高 / 可收放 / 高度记住）
   ------------------------------------------------------------------
   三块面板（参数 / 属性·调整·颜色·视图·历史 / 图层）叠成一列，位置与高度由 JS 统一分配
   （psStackApply）：
   ① 两块之间的分隔条 .ps-split：拖动 = 改上下两块的分配，双击 = 复位，悬停/拖动时变绿；
   ② 参数面板的壳 .editor-opts-wrap 变成真卡片（标题条用现成的 .opts-head，收起走 .is-collapsed，
      收起后只剩标题条 34px）；图层收起是 .layers-panel.is-folded（只留 .layers-head）；
      属性面板收起沿用原来的 ▾（--ps-panel-h 变 34px，正文干脆不渲染）；
   ③ 三块各自内部滚动，标题条吸顶 —— 跟 PS 面板一个手感。
   整块只在 min-width: 980px 里；手机端 .editor-opts-wrap 仍是 display: contents，一个字节没动。 */
@media (min-width: 980px) {
  body.ps-stack .editor-opts-wrap {
    display: flex; flex-direction: column; position: absolute; right: 10px;
    width: 246px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); overflow: hidden;
  }
  body.ps-stack .editor-opts-wrap > .opts-head { display: flex; }
  body.ps-stack .editor-opts-wrap > .opts-head .oh-hint { display: none; }
  /* 控件区变成"卡片里的滚动区"，边和阴影交给卡片本身 */
  body.ps-stack .editor-options {
    position: static; right: auto; left: auto; top: auto; width: auto;
    flex: 1 1 auto; min-height: 0; max-height: none;
    border: none; border-radius: 0; box-shadow: none;
  }
  /* PS 式面板标题条：浅底 + 一条细下边 */
  body.ps-stack .editor-opts-wrap > .opts-head,
  body.ps-stack .ps-panel > .ps-tabs {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; background: #f6f9f7; border-bottom: 1px solid var(--line);
    font-size: 13.5px; font-weight: 600; color: #3c4a41; letter-spacing: .2px;
  }
  /* ---- 标题条上方留一条"专用抓手区"（约 12px 空白 + 一个 ⠿ 把手）----
     原来属性面板的标题条被 5 个标签页填满、参数面板标题又是个按钮，按下去要么点到标签、
     要么误触收起，很难拖。现在三块面板标题条顶部都空出一条纯拖动区：
     按在那一带上 = 拖面板（不会点到任何按钮），悬停时把手变绿提示可拖。 */
  body.ps-stack .editor-opts-wrap > .opts-head,
  body.ps-stack .ps-panel > .ps-tabs,
  body.ps-stack .layers-panel > .layers-head {
    position: relative; padding-top: 12px;
  }
  body.ps-stack .editor-opts-wrap > .opts-head::before,
  body.ps-stack .ps-panel > .ps-tabs::before,
  body.ps-stack .layers-panel > .layers-head::before {
    content: '⠿'; position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
    font-size: 10px; line-height: 1; letter-spacing: 2px; color: #b9c6bd;
    pointer-events: none; transition: color .12s;
  }
  body.ps-stack .editor-opts-wrap > .opts-head:hover::before,
  body.ps-stack .ps-panel > .ps-tabs:hover::before,
  body.ps-stack .layers-panel > .layers-head:hover::before { color: var(--green); }
  body.ps-dragging .ps-tabs::before,
  body.ps-dragging .opts-head::before,
  body.ps-dragging .layers-head::before { color: var(--green); }
  body.ps-stack .layers-panel > .layers-head {
    position: sticky; top: -10px; z-index: 2;
    margin: -10px -10px 6px; padding: 12px 10px 7px;   /* 顶部 12px = 专用抓手区 */
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line);
  }
  body.ps-stack .layers-panel.is-folded > *:not(.layers-head) { display: none; }
  body.ps-stack .layers-panel > .layers-head > .layers-fold {
    margin-left: auto; width: 22px; height: 22px; padding: 0; line-height: 1;
    border: 1px solid var(--line); background: #fff; border-radius: 6px;
    cursor: pointer; font-size: 11px; color: var(--gray);
  }
  body.ps-stack .layers-panel > .layers-head > .layers-close { margin-left: 4px; }

  /* 分隔条：8px 高的热区，中间一条 2px 的细线 */
  .ps-split {
    position: absolute; right: 10px; width: 246px; height: 8px;
    z-index: 250; cursor: row-resize; touch-action: none;
  }
  /* ---- 右列顶部【▾ 面板】菜单条 + 下拉菜单 ----
     下拉里能看三块面板的状态（展开中 / 已收起 / 浮动中），
     点名字 = 收起/展开，点 ⇱/⇲ = 浮出成窗口 / 停靠回来，底部还有全部展开·全部收起·复位。 */
  .ps-bar {
    position: absolute; right: 10px; width: 246px; height: 26px;
    display: flex; align-items: center; gap: 6px; padding: 0 8px; z-index: 247;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .10); box-sizing: border-box;
  }
  .ps-bar-btn {
    flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 7px;
    background: #f6f9f7; color: #3c4a41; font-size: 12.5px; font-weight: 600;
    letter-spacing: .2px; cursor: pointer;
  }
  .ps-bar-btn:hover { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); }
  .ps-bar-n { margin-left: auto; font-size: 11.5px; color: #64746b; font-variant-numeric: tabular-nums; }
  .ps-menu {
    position: absolute; right: 10px; width: 246px; z-index: 660;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18); padding: 6px; box-sizing: border-box;
  }
  .ps-menu-row { display: flex; align-items: center; gap: 4px; }
  .ps-menu-row + .ps-menu-row { margin-top: 2px; }
  .ps-menu-main {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; border: none; background: none; border-radius: 7px;
    font-size: 12.5px; color: #3c4a41; cursor: pointer; text-align: left;
  }
  .ps-menu-main:hover { background: #f2f8f4; }
  .ps-menu-main.is-off { color: #a8b3ad; }
  .ps-menu-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-menu-main > b { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #93a29a; }
  .ps-menu-ico {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
    background: #fff; border-radius: 7px; cursor: pointer; font-size: 13px; color: #5d6d64;
  }
  .ps-menu-ico:hover { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); }
  .ps-menu-foot {
    display: flex; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  }
  .ps-menu-foot button {
    flex: 1 1 auto; padding: 4px 6px; border: 1px solid var(--line); background: #fff;
    border-radius: 7px; cursor: pointer; font-size: 12px; color: #3c4a41;
  }
  .ps-menu-foot button:hover { background: #eef7f1; border-color: #9fd3b2; color: var(--green-dark); }

  /* ---- 每块面板标题条右上角的 ▾ 面板菜单（PS 面板菜单那个位置）---- */
  .ps-pmenu-btn {
    position: absolute; z-index: 410; width: 22px; height: 12px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: #93a29a; cursor: pointer;
    font-size: 9px; line-height: 1; letter-spacing: 0;
  }
  .ps-pmenu-btn:hover { color: var(--green); }
  .ps-pmenu {
    position: absolute; right: 10px; width: 236px; z-index: 662; padding: 5px;
  }
  .ps-menu-item {
    display: block; width: 100%; text-align: left; padding: 6px 9px; border: none;
    background: none; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: #3c4a41;
  }
  .ps-menu-item:hover { background: #f2f8f4; }
  .ps-menu-item.is-off { color: #b3bdb8; cursor: default; }
  .ps-menu-item.is-off:hover { background: none; }
  .ps-menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }
  .ps-split::after {
    content: ''; position: absolute; left: 12px; right: 12px; top: 3px; height: 2px;
    border-radius: 2px; background: rgba(34, 48, 42, .13); transition: background .12s;
  }
  .ps-split:hover::after, .ps-split.is-drag::after { background: var(--green); }

  /* ---- 拖标题条：幽灵条 / 吸附指示条 / 浮动小窗 / 右下角拉伸角（都在电脑端区）---- */
  body.ps-dragging, body.ps-dragging * { cursor: grabbing !important; user-select: none !important; }
  body.ps-stack .editor-opts-wrap > .opts-head,
  body.ps-stack .ps-panel > .ps-tabs,
  body.ps-stack .layers-panel > .layers-head { cursor: grab; }
  body.ps-stack .editor-opts-wrap > .opts-head *,
  body.ps-stack .ps-panel > .ps-tabs *,
  body.ps-stack .layers-panel > .layers-head * { cursor: auto; }
  body.ps-stack .editor-opts-wrap > .opts-head > .oh-arrow { cursor: grab; }
  .ps-ghost {
    position: fixed; z-index: 700; pointer-events: none;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(32, 165, 58, .92); color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  }
  /* 吸附指示条：拖到右列时会出现在"要插进去的位置" */
  .ps-drop {
    position: fixed; z-index: 690; height: 4px; border-radius: 3px;
    background: var(--green); box-shadow: 0 0 0 2px rgba(32, 165, 58, .22);
    pointer-events: none;
  }
  /* 拖到别的面板标题上 = 并成标签组：把那一行标题整块高亮 */
  .ps-merge-hint {
    position: fixed; z-index: 688; pointer-events: none;
    border: 2px solid var(--green); border-radius: 10px;
    background: rgba(32, 165, 58, .10);
    box-shadow: 0 0 0 2px rgba(32, 165, 58, .10);
  }
  /* 标签组的标签条（自己画的，压在组的最上面；点标签切换，按住可拖出去） */
  .ps-gtabs {
    position: absolute; z-index: 246; display: flex; align-items: stretch;
    height: 30px; padding: 0 4px; gap: 2px; overflow: hidden;
    background: #f6f9f7; border: 1px solid var(--line); border-bottom: none;
    border-radius: 12px 12px 0 0; box-sizing: border-box;
  }
  .ps-gtab {
    flex: 0 1 auto; min-width: 0; padding: 0 10px; border: none; background: none;
    font-size: 13px; font-weight: 600; color: #6b7a72; cursor: grab;
    border-radius: 8px 8px 0 0; letter-spacing: .2px; white-space: nowrap;
  }
  .ps-gtab:hover { background: rgba(32, 165, 58, .08); color: var(--green-dark); }
  .ps-gtab.is-on { background: #fff; color: var(--green-dark); box-shadow: 0 -1px 0 var(--line) inset; }
  /* 浮动小窗：脱离右列、想放哪放哪（宽度也可以拉） */
  body.ps-stack .ps-floating {
    position: fixed !important; z-index: 640;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .16);
  }
  /* 浮动窗的两种拉伸：① 底部整条边（ns-resize，只改高）；② 右下角小三角（nwse-resize，同时改宽高） */
  .ps-resize-b {
    position: fixed; z-index: 645; height: 10px;
    cursor: ns-resize; touch-action: none;
  }
  .ps-resize-b::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px;
    border-radius: 2px; background: transparent; transition: background .12s;
  }
  .ps-resize-b:hover::after, .ps-resize-b.is-drag::after { background: var(--green); }
  .ps-grip {
    position: fixed; z-index: 645; width: 14px; height: 14px;
    cursor: nwse-resize; touch-action: none;
    background:
      linear-gradient(135deg, transparent 0 45%, rgba(34, 48, 42, .35) 45% 55%, transparent 55% 70%, rgba(34, 48, 42, .35) 70% 80%, transparent 80%);
  }
}

/* ㊳ 右侧栏深色化（跟左侧工具栏、画布工作台一个调子；PS 的面板也是深色）
   ------------------------------------------------------------------
   只换颜色，不动尺寸和位置：面板底 / 标题条 / 输入框 / 按钮 / 下拉菜单 / 图层行 /
   滚动条全部换成深色系，文字提亮（正文 #e4e9ec、次要 #a7b0b6、辅助 #8b959b），
   强调色仍然是主题绿。整块只在 min-width: 980px 里 → 手机端（锁定区）一个字节没动。 */
@media (min-width: 980px) {
  body.ps-stack {
    --psk-bg: #33383d;        /* 面板底（与左侧竖栏同色） */
    --psk-bg2: #3a3f44;       /* 标题条 / 次一级底色 */
    --psk-bg3: #2b2f33;       /* 输入框 / 凹槽 */
    --psk-fg: #e4e9ec;
    --psk-fg2: #a7b0b6;
    --psk-fg3: #8b959b;
    --psk-line: rgba(255, 255, 255, .12);
  }
  /* ---- 卡片本体 / 菜单条 / 下拉 ---- */
  body.ps-stack .editor-opts-wrap,
  body.ps-stack .ps-panel,
  body.ps-stack .layers-panel,
  body.ps-stack .ps-bar,
  body.ps-stack .ps-menu {
    background: var(--psk-bg); border-color: var(--psk-line); color: var(--psk-fg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  }
  /* ---- 标题条 ---- */
  body.ps-stack .editor-opts-wrap > .opts-head,
  body.ps-stack .ps-panel > .ps-tabs,
  body.ps-stack .layers-panel > .layers-head,
  body.ps-stack .ps-gtabs {
    background: var(--psk-bg2); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .editor-opts-wrap > .opts-head { color: var(--psk-fg); }
  body.ps-stack .layers-panel > .layers-head {
    background: var(--psk-bg2); border-bottom-color: var(--psk-line);
  }
  body.ps-stack .editor-opts-wrap > .opts-head::before,
  body.ps-stack .ps-panel > .ps-tabs::before,
  body.ps-stack .layers-panel > .layers-head::before { color: #6f7a80; }
  /* 标签组标签 */
  body.ps-stack .ps-gtab { color: var(--psk-fg2); }
  body.ps-stack .ps-gtab:hover { background: rgba(255, 255, 255, .10); color: #fff; }
  body.ps-stack .ps-gtab.is-on { background: var(--psk-bg); color: #fff; box-shadow: none; }
  /* 面板标签（属性·调整·颜色·视图·历史） */
  body.ps-stack .ps-tab { color: var(--psk-fg2); }
  body.ps-stack .ps-tab:hover { background: rgba(255, 255, 255, .10); color: #fff; }
  body.ps-stack .ps-tab.is-on { background: var(--green); color: #fff; }
  body.ps-stack .ps-collapse,
  body.ps-stack .layers-close,
  body.ps-stack .layers-fold {
    background: rgba(255, 255, 255, .07); border-color: var(--psk-line); color: var(--psk-fg2);
  }
  body.ps-stack .ps-collapse:hover, body.ps-stack .layers-close:hover, body.ps-stack .layers-fold:hover {
    background: rgba(255, 255, 255, .14); color: #fff;
  }
  /* ---- 控件区底色 / 正文 ---- */
  body.ps-stack .editor-options { background: none; color: var(--psk-fg); }
  body.ps-stack .editor-options .opt-row > span:first-child,
  body.ps-stack .editor-options .opt-row > span,
  body.ps-stack .editor-options .opt-tip,
  body.ps-stack .editor-options .editor-zoom-row > b { color: var(--psk-fg2); }
  body.ps-stack .editor-options .opt-row > b { color: var(--psk-fg); }
  body.ps-stack .editor-options input[type="text"],
  body.ps-stack .editor-options input[type="number"],
  body.ps-stack .editor-options select,
  body.ps-stack .editor-options textarea {
    background: var(--psk-bg3); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .editor-options input::placeholder { color: var(--psk-fg3); }
  body.ps-stack .editor-options .btn,
  body.ps-stack .editor-options .mode-btns .btn,
  body.ps-stack .editor-options .sh-btn,
  body.ps-stack .editor-options .retext-fonts .btn,
  body.ps-stack .editor-options .retext-sf {
    background: rgba(255, 255, 255, .08); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .editor-options .btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
  body.ps-stack .editor-options .btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
  body.ps-stack .editor-options .editor-zoom-row { background: var(--psk-bg); border-top-color: var(--psk-line); }
  body.ps-stack .editor-options .opt-row.retext-info,
  body.ps-stack .editor-options .opt-row.retext-diag > input,
  body.ps-stack .editor-options .opt-row.retext-key > input {
    background: var(--psk-bg3); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .editor-options .retext-info > span:first-child,
  body.ps-stack .editor-options .retext-hint b,
  body.ps-stack .editor-options .retext-ufcount,
  body.ps-stack .editor-options .retext-local { color: var(--psk-fg2); }
  /* 输入类控件统一绿色强调（滑杆 / 勾选） */
  body.ps-stack .editor-options input[type="range"],
  body.ps-stack .ps-panel input[type="range"],
  body.ps-stack .layers-panel input[type="range"],
  body.ps-stack .editor-options input[type="checkbox"],
  body.ps-stack .layers-panel input[type="checkbox"] { accent-color: var(--green); }
  /* 深色底上还带白底的零碎控件：贴纸格子 / 取色块 / 改字的小胶囊 */
  body.ps-stack .editor-options .emoji-btn {
    background: rgba(255, 255, 255, .08); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .editor-options .emoji-btn:hover { background: rgba(255, 255, 255, .18); }
  body.ps-stack .editor-options .emoji-btn.is-on { background: rgba(32, 165, 58, .30); border-color: #4b9c66; }
  body.ps-stack .editor-options .cur-chip { border-color: var(--psk-bg2); box-shadow: 0 0 0 1px var(--psk-line); }
  body.ps-stack .editor-options .retext-sf { background: var(--psk-bg3); border-color: var(--psk-line); color: var(--psk-fg); }
  body.ps-stack .editor-options .retext-sf em { color: var(--psk-fg); }
  body.ps-stack .editor-options .retext-sf small { color: var(--psk-fg3); }
  body.ps-stack .editor-options .retext-sf button {
    background: rgba(255, 255, 255, .12); color: var(--psk-fg2); border: none;
  }
  body.ps-stack .editor-options .opt-row.retext-hint b { color: var(--psk-fg2); }
  /* ---- ps-* 面板内部 ---- */
  body.ps-stack .ps-body { color: var(--psk-fg); }
  body.ps-stack .ps-empty { color: var(--psk-fg2); }
  body.ps-stack .ps-blend,
  body.ps-stack .ps-num,
  body.ps-stack .ps-order,
  body.ps-stack .ps-char-row,
  body.ps-stack .ps-dim,
  body.ps-stack .ps-sw-title,
  body.ps-stack .ps-hex-row,
  body.ps-stack .ps-adj-row,
  body.ps-stack .ps-pos,
  body.ps-stack .ps-adj-tip,
  body.ps-stack .ps-sw { color: var(--psk-fg2); }
  body.ps-stack .ps-menu-name, body.ps-stack .ps-menu-main { color: var(--psk-fg); }
  body.ps-stack .ps-menu-main > b { color: var(--psk-fg3); }
  body.ps-stack .ps-menu-main:hover { background: rgba(255, 255, 255, .10); }
  body.ps-stack .ps-menu-main.is-off { color: #6b757b; }
  body.ps-stack .ps-menu-item { color: var(--psk-fg); }
  body.ps-stack .ps-menu-item:hover { background: rgba(32, 165, 58, .22); }
  body.ps-stack .ps-menu-item.is-off { color: #6b757b; }
  body.ps-stack .ps-menu-sep { background: var(--psk-line); }
  body.ps-stack .ps-menu-ico,
  body.ps-stack .ps-menu-foot button,
  body.ps-stack .ps-bar-btn {
    background: rgba(255, 255, 255, .08); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .ps-menu-ico:hover,
  body.ps-stack .ps-menu-foot button:hover,
  body.ps-stack .ps-bar-btn:hover { background: rgba(32, 165, 58, .25); color: #fff; border-color: #4b9c66; }
  body.ps-stack .ps-bar-n { color: var(--psk-fg3); }
  body.ps-stack .ps-blend select,
  body.ps-stack .ps-num input,
  body.ps-stack .ps-hex-row input,
  body.ps-stack .ps-dim > input,
  body.ps-stack .ps-order button,
  body.ps-stack .ps-fgbg-btns button,
  body.ps-stack .ps-tbtn,
  body.ps-stack .ps-anchor,
  body.ps-stack .ps-fill,
  body.ps-stack .ps-mini,
  body.ps-stack .ps-adj-btns button,
  body.ps-stack .ps-merge button,
  body.ps-stack .ps-hist-btns button,
  body.ps-stack .ps-sw {
    background: var(--psk-bg3); border-color: var(--psk-line); color: var(--psk-fg);
  }
  body.ps-stack .ps-order button:hover,
  body.ps-stack .ps-fgbg-btns button:hover,
  body.ps-stack .ps-tbtn:hover,
  body.ps-stack .ps-anchor:hover,
  body.ps-stack .ps-fill:hover,
  body.ps-stack .ps-mini:hover,
  body.ps-stack .ps-adj-btns button:hover,
  body.ps-stack .ps-merge button:hover,
  body.ps-stack .ps-hist-btns button:hover,
  body.ps-stack .ps-sw:hover {
    background: rgba(255, 255, 255, .14); color: #fff; border-color: #4b9c66;
  }
  body.ps-stack .ps-sw.is-on { background: rgba(32, 165, 58, .28); border-color: #4b9c66; color: #fff; }
  body.ps-stack .ps-sw.is-on > b { color: #8fe0a4; }
  body.ps-stack .ps-adj-row > b,
  body.ps-stack .ps-info { color: var(--psk-fg); }
  body.ps-stack .ps-info { background: rgba(255, 255, 255, .05); border-top-color: var(--psk-line); }
  body.ps-stack .ps-hist-row { color: var(--psk-fg); }
  body.ps-stack .ps-hist-row:hover { background: rgba(255, 255, 255, .10); }
  body.ps-stack .ps-hist-row.is-cur { background: rgba(32, 165, 58, .26); color: #fff; }
  body.ps-stack .ps-hist-row.is-redo { color: var(--psk-fg3); }
  body.ps-stack .ps-sws { border-color: rgba(0, 0, 0, .35); }
  body.ps-stack .ps-fgbox, body.ps-stack .ps-bgbox { border-color: var(--psk-bg2); }
  body.ps-stack .ps-fgbg-sq { filter: none; }
  /* ---- 图层面板内部 ---- */
  body.ps-stack .layers-panel .layer-row { color: var(--psk-fg); }
  body.ps-stack .layers-panel .layer-row:hover { background: rgba(255, 255, 255, .08); }
  body.ps-stack .layers-panel .layer-row.is-sel { background: rgba(32, 165, 58, .26); color: #fff; }
  body.ps-stack .layers-panel .layer-bg { color: var(--psk-fg2); }
  body.ps-stack .layers-panel .layer-op-row > span,
  body.ps-stack .layers-panel .layer-op-row > b { color: var(--psk-fg2); }
  body.ps-stack .layers-panel .layer-btns button,
  body.ps-stack .layers-panel .layers-actions .btn {
    background: rgba(255, 255, 255, .08); border-color: var(--psk-line); color: var(--psk-fg2);
  }
  body.ps-stack .layers-panel .layer-btns button:hover,
  body.ps-stack .layers-panel .layers-actions .btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
  body.ps-stack .layers-panel .layer-rename-input {
    background: var(--psk-bg3); border-color: var(--psk-line, var(--psk-line)); color: var(--psk-fg);
  }
  /* ---- 图层面板：PS 式拖动排序（没有上下箭头，按住行上下拖，绿线是落点）---- */
  .layers-panel .layer-row[data-layer-idx] {
    cursor: grab;
    -webkit-user-select: none; user-select: none;
    transition: background .12s ease;
  }
  .layers-panel .layer-row[data-layer-idx]:active { cursor: grabbing; }
  .layers-panel .layer-row.is-dragging {
    opacity: .45; cursor: grabbing;
    outline: 1px dashed rgba(32, 165, 58, .7); outline-offset: -1px;
  }
  .ps-ldrop {
    height: 3px; margin: 3px 6px; border-radius: 2px;
    background: var(--green, #20a53a);
    box-shadow: 0 0 6px rgba(32, 165, 58, .55);
  }
  .ps-ldrop[hidden] { display: none; }
  /* 拖行的时候别顺手把别处的文字也选中了 */
  body.ps-ldragging, body.ps-ldragging * { -webkit-user-select: none; user-select: none; }
  /* ---- 「框选」子菜单（点左侧「框选」弹出：矩形 / 圆形 / 圆角矩形 + 圆角半径）---- */
  .ps-submenu {
    position: fixed; z-index: 940; min-width: 168px;
    padding: 6px; border-radius: 12px;
    background: rgba(43, 47, 51, .98); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .48);
    color: var(--psk-fg, #e4e9ec); font-size: 13.5px;
  }
  .ps-submenu[hidden] { display: none; }
  .ps-sub-h { font-size: 12px; color: #8b959b; padding: 2px 6px 6px; letter-spacing: .04em; }
  .ps-sub-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 8px; margin: 1px 0; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #e4e9ec; font-size: 13.5px; cursor: pointer; text-align: left;
  }
  .ps-sub-item > i { font-style: normal; font-size: 15px; width: 18px; text-align: center; color: #a7b0b6; }
  .ps-sub-item > span { flex: 1 1 auto; }
  .ps-sub-item > em { font-style: normal; font-size: 11.5px; color: #7f8a90; }
  .ps-sub-item:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); }
  .ps-sub-item.is-on { background: rgba(32, 165, 58, .26); border-color: #4b9c66; color: #fff; }
  .ps-sub-item.is-on > i { color: #8fe0a4; }
  .ps-sub-radrows { padding: 6px 6px 2px; border-top: 1px solid rgba(255, 255, 255, .10); margin-top: 4px; }
  .ps-sub-radrows[hidden] { display: none; }
  .ps-sub-radl { font-size: 12px; color: #a7b0b6; margin-bottom: 4px; }
  .ps-sub-radl > b { color: #8fe0a4; font-variant-numeric: tabular-nums; }
  .ps-submenu input[type="range"] { width: 100%; accent-color: var(--green, #20a53a); }
  /* ---- 滚动条：细、深色 ---- */
  body.ps-stack .editor-options::-webkit-scrollbar,
  body.ps-stack .ps-body::-webkit-scrollbar,
  body.ps-stack .layers-panel::-webkit-scrollbar { width: 8px; height: 8px; }
  body.ps-stack .editor-options::-webkit-scrollbar-thumb,
  body.ps-stack .ps-body::-webkit-scrollbar-thumb,
  body.ps-stack .layers-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18); border-radius: 4px;
  }
  body.ps-stack .editor-options::-webkit-scrollbar-track,
  body.ps-stack .ps-body::-webkit-scrollbar-track,
  body.ps-stack .layers-panel::-webkit-scrollbar-track { background: transparent; }
  /* ---- 分隔条 / 抓手在深色底上更清楚 ---- */
  body.ps-stack .ps-split::after { background: rgba(255, 255, 255, .22); }
  body.ps-stack .ps-split:hover::after, body.ps-stack .ps-split.is-drag::after { background: var(--green); }

  /* ---- 编辑器里其它还发白的浮层，一并换深色（统一深色，不留白框）---- */
  /* 右键菜单 */
  .ctx-menu { background: var(--psk-bg, #33383d); border-color: rgba(255, 255, 255, .12); }
  /* 选区右键菜单（PS 式）比原来长，加宽一点 + 分组细线 */
  .ctx-menu { min-width: 208px; max-height: 82vh; overflow-y: auto; }
  .ctx-menu .ctx-sep { height: 1px; margin: 4px 8px; background: rgba(255, 255, 255, .14); }
  .ctx-menu .ctx-tip { padding: 6px 12px; font-size: 12px; color: var(--psk-fg3, #8b959b); }
  .ctx-menu button { color: #e4e9ec; }
  .ctx-menu button:hover { background: rgba(32, 165, 58, .22); }
  /* 选中图层时浮出来的 编辑/删除 圆钮 */
  .el-act-btn { background: #3a3f44; color: #e4e9ec; }
  .el-act-del { background: #c8443f; color: #fff; }
  /* 画布上的「改字」悬浮条 + 里面的输入框/按钮/小胶囊 */
  .retext-bar { background: rgba(51, 56, 61, .98); border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
  .retext-bar.is-below { box-shadow: 0 -10px 26px rgba(0, 0, 0, .45); }
  .retext-bar-tag { color: #a7b0b6; }
  .retext-bar-input { background: #2b2f33; border-color: rgba(255, 255, 255, .14); color: #e4e9ec; }
  .retext-bar-input:focus { background: #2b2f33; border-color: var(--green); }
  .retext-bar-input::placeholder { color: #7d878d; }
  .retext-bar-toggle, .retext-bar-btn {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #e4e9ec;
  }
  .retext-bar-toggle:hover, .retext-bar-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
  .retext-bar-btn.is-on { background: rgba(32, 165, 58, .30); border-color: #4b9c66; color: #cdf3d6; }
  .retext-bar-btn.is-primary { background: var(--green); border-color: var(--green); color: #fff; }
  .num-v { background: #2b2f33; border-color: rgba(255, 255, 255, .14); color: #e4e9ec; }
  /* 参数面板里"文字内容"那一行 */
  .editor-options .opt-row.text-content-row { background: none; }
  .editor-options .opt-row.text-content-row > span { color: #a7b0b6; }
  .editor-options .opt-row.text-content-row input[type="text"] {
    background: #2b2f33; border-color: rgba(255, 255, 255, .14); color: #e4e9ec;
  }
  /* 白边框的小色块（当前色 / 内置色点 / 抠图色块）换成深色描边，深底上不再像"白框" */
  .editor-options .cur-chip, .color-presets .cp, .mat-chip { border-color: #3a3f44; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
  .editor-options input[type="color"] { background: #2b2f33; border-color: rgba(255, 255, 255, .14); }
  /* 这两条优先级比前面高（那条 #fff 白底规则有 3 个类），必须按同样的路径覆盖掉 */
  body.ps-stack .layers-panel > .layers-head > .layers-fold,
  body.ps-stack .layers-panel > .layers-head > .layers-close {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #a7b0b6;
  }
  body.ps-stack .layers-panel > .layers-head > .layers-fold:hover,
  body.ps-stack .layers-panel > .layers-head > .layers-close:hover { background: rgba(255, 255, 255, .18); color: #fff; }
  body.ps-stack .ps-merge button[disabled]:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
  /* 画布大小里的 9 宫格定位按钮（类名是 .ps-anc）+ 填充色的取色器 */
  body.ps-stack .ps-anc { background: var(--psk-bg3); border-color: var(--psk-line); color: var(--psk-fg); }
  body.ps-stack .ps-anc:hover { background: rgba(255, 255, 255, .16); color: #fff; }
  body.ps-stack .ps-anc.is-on { background: var(--green); border-color: var(--green); color: #fff; }
  body.ps-stack .ps-dim > input[type="color"] { background: var(--psk-bg3); border-color: var(--psk-line); }

  /* ---- 编辑器外壳 / 放大镜 / 诊断条 / 裁剪提示：统一深色，不留浅色底和浅色缝 ---- */
  /* 外壳的底色会从"画布区留白"和面板之间的缝里露出来（原来是 #e9edea 浅灰）→ 换成工作台的深灰 */
  .editor-shell { background: #2e3237; }
  /* 局部放大镜：原来是白底 */
  .editor-loupe { background: #2b2f33; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  /* 画布空白时的诊断条：改成深琥珀色（还是警示色，但跟深色界面统一） */
  .editor-diag {
    background: #3a3323; border-color: #6b5a2a; color: #e8cf9a;
  }
  .editor-diag b { color: #f0c060; }

  /* ---- 选区浮动工具条（框出选区后出现在画布上方；深色、紧凑、一眼可点）---- */
  .ps-mqbar {
    position: absolute; z-index: 262; display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-radius: 10px;
    background: rgba(43, 47, 51, .97); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
    font-size: 12.5px; color: #d5dade; white-space: nowrap;
  }
  .ps-mqb-label {
    font-size: 11.5px; font-weight: 700; color: #8fe0a4; padding: 0 2px;
    font-variant-numeric: tabular-nums;
  }
  .ps-mqb {
    padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
    background: rgba(255, 255, 255, .08); color: #e4e9ec; font-size: 12.5px;
    cursor: pointer; line-height: 1.2;
  }
  .ps-mqb:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: #4b9c66; }
  .ps-mqb.is-on { background: rgba(32, 165, 58, .30); border-color: #4b9c66; color: #fff; }
  .ps-mqb.is-primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
  .ps-mqb.is-primary:hover { background: var(--green-dark); }
  .ps-mqb-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .16); margin: 0 2px; }
  .ps-mqb-f { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #a7b0b6; }
  .ps-mqb-f > input {
    width: 46px; padding: 3px 5px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .14); background: #2b2f33; color: #e4e9ec;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
  }
  /* 裁剪工具下方的尺寸/提示文字（深底上原来是灰字，看不清） */
  .crop-size, .crop-hint { color: #a7b0b6; }
  /* 改字信息行里的粗体、开关上的状态字、面板菜单的 ▾ 按钮 */
  .editor-options .opt-row.retext-info b { color: #e4e9ec; }
  body.ps-stack .ps-sw > b { color: #a7b0b6; }
  body.ps-stack .ps-pmenu-btn { color: #a7b0b6; }
  body.ps-stack .ps-pmenu-btn:hover { color: var(--green); }
}

/* ===== 图层缩略图 · 图层分组（只在电脑端生成 DOM，所以样式也只放电脑端区）===== */
@media (min-width: 980px) {
  .layers-head { gap: 4px; }
  /* 「＋组」按钮：跟收起/关闭同一排，小一号不抢地方 */
  .layers-panel > .layers-head > .layers-grp {
    margin-left: auto; border: 1px solid var(--psk-line, rgba(255, 255, 255, .16));
    background: rgba(255, 255, 255, .08); color: var(--psk-fg2, #cfd6da);
    border-radius: 7px; padding: 2px 7px; font-size: 11.5px; line-height: 1.5; cursor: pointer;
  }
  .layers-panel > .layers-head > .layers-grp:hover { background: rgba(255, 255, 255, .18); color: #fff; }
  /* 图层缩略图：等比缩放到 30×22，深底 + 细边框，选中时描绿边 */
  .layers-panel .layer-thumb {
    flex: 0 0 auto; width: 30px; height: 22px; border-radius: 3px;
    background: #16191b; border: 1px solid rgba(255, 255, 255, .14);
    image-rendering: auto;
  }
  .layers-panel .layer-row.is-sel .layer-thumb { border-color: rgba(32, 165, 58, .8); }
  /* 组内图层缩进一级，一眼看出归属 */
  .layers-panel .layer-row.is-grp { padding-left: 20px; }
  /* 组行（文件夹） */
  .layers-panel .layer-row.layer-grp {
    background: rgba(255, 255, 255, .07);
    border-left: 3px solid var(--green); border-radius: 6px;
  }
  .layers-panel .layer-row.layer-grp:hover { background: rgba(255, 255, 255, .13); }
  .layers-panel .layer-fol {
    flex: 0 0 auto; width: 14px; text-align: center; cursor: pointer;
    color: var(--psk-fg2, #b9c2c7); font-size: 11px;
  }
  .layers-panel .layer-fol:hover { color: #fff; }
  .layers-panel .layer-gcnt {
    font-style: normal; font-size: 11px; color: var(--psk-fg2, #93a0a7);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: 0 4px; margin-left: 4px;
  }
  /* 缩略图上看不出来的两项：图层样式 / 蒙版，各给一个小角标 */
  .layers-panel .lc-fx, .layers-panel .lc-msk {
    font-style: normal; font-size: 10px; line-height: 14px; padding: 0 3px; border-radius: 3px;
    color: #8fe0a4; border: 1px solid rgba(32, 165, 58, .5);
  }
  .layers-panel .lc-msk { color: #ffd479; border-color: rgba(255, 212, 121, .45); }
}

/* ===== DESKTOP-ONLY-END ===== */

/* ===== MOBILE-EXTRA-START =====
   手机端补充区（用户明确要求把「图层缩略图 / 图层分组」也放到手机端）。
   规矩：DESKTOP-ONLY-START 之前的手机端原规则一个字节都不动，
   这里只做"新增"，并且全部包在 max-width 断点里，电脑端一点也吃不到。 */
@media (max-width: 979.98px) {
  /* 图层面板整体上移（用户反馈原来贴在参数面板上方、"有点靠下"）：
     离底 300px，仍然稳稳压在参数面板上方（参数面板最高 26vh + 标题条约 249px），两边不会互相盖住 */
  .layers-panel { bottom: 300px; }
  /* 图层面板只有 96px 宽：缩略图塞进原来那个图标的位置（点它仍然是显示/隐藏） */
  .layers-panel .layer-eye > .layer-thumb {
    width: 22px; height: 17px; display: block;
    border-radius: 3px; border: 1px solid var(--line); background: #f4f7f5;
  }
  .layers-panel .layer-row.is-sel .layer-eye > .layer-thumb { border-color: var(--green); }
  /* 组内图层缩进一级，一眼看出归属 */
  .layers-panel .layer-row.is-grp { padding-left: 14px; }
  /* 组行（文件夹） */
  .layers-panel .layer-row.layer-grp {
    background: #eef6f1; border-left: 3px solid var(--green); border-radius: 8px;
  }
  .layers-panel .layer-fol {
    flex: 0 0 auto; width: 13px; text-align: center;
    color: var(--gray); font-size: 11px; cursor: pointer;
  }
  .layers-panel .layer-gcnt {
    font-style: normal; font-size: 10.5px; color: var(--gray); margin-left: 2px;
  }
  /* 组行那排按钮在手机上也要能点到（面板窄，只有选中行才显示按钮的规则不适用于组行） */
  .layers-panel .layer-row.layer-grp .layer-btns { display: flex; }
  /* 缩略图上看不出来的两项：图层样式 / 蒙版 */
  .layers-panel .lc-fx, .layers-panel .lc-msk {
    font-style: normal; font-size: 9px; line-height: 13px; padding: 0 3px; border-radius: 3px;
    color: var(--green-dark); border: 1px solid rgba(32, 165, 58, .45);
  }
  .layers-panel .lc-msk { color: #b8860b; border-color: rgba(184, 134, 11, .45); }
  /* 标题条上的「＋组」：跟 ✕ 挤一行，小一号 */
  .layers-panel > .layers-head > .layers-grp {
    margin-left: auto; border: 1px solid var(--line); background: #fff;
    border-radius: 6px; padding: 1px 5px; font-size: 11px; line-height: 1.5;
    color: var(--green-dark); cursor: pointer;
  }
  .layers-panel > .layers-head > .layers-grp:active { background: #eaf6ee; }
}
/* ===== MOBILE-EXTRA-END ===== */