/* Noto Serif SC 分包字体由 index.html 以 <link> 并行加载（原来用 @import 会串行阻塞） */
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-display-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
/* ===== 跟随主页主题：CSS 变量（RGB 通道，和主页 globals.css 一致） ===== */
:root{
  --font-display:"Playfair Display","Noto Serif SC",Georgia,serif;
  --font-serif:"Noto Serif SC","Source Serif Pro",Georgia,serif;
  --font-sans:"Inter","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --c-ink:38 35 30; --c-ink-soft:78 74 64; --c-ink-muted:125 116 98;
  --c-paper:233 220 186; --c-paper-warm:239 228 198; --c-paper-deep:224 208 166;
  --c-accent:169 58 42;
  --c-line:38 35 30;
}
html.dark{
  --c-ink:240 231 209; --c-ink-soft:210 200 178; --c-ink-muted:152 142 120;
  --c-paper:21 29 52; --c-paper-warm:29 39 66; --c-paper-deep:37 48 79;
  --c-line:240 231 209;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:rgb(var(--c-paper));
  color:rgb(var(--c-ink));
  background-image:
    radial-gradient(circle at 20% 10%,rgba(169,58,42,.05) 0,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(var(--c-line),.018) 0,transparent 45%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
html.dark body{
  background-image:
    radial-gradient(circle at 20% 10%,rgba(169,58,42,.07) 0,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(244,241,234,.03) 0,transparent 45%);
}
::selection{background:rgb(var(--c-accent));color:rgb(var(--c-paper))}

.wrap{max-width:1100px;margin:0 auto;padding:24px 20px 48px}

/* ===== 报头 masthead ===== */
.masthead{border-bottom:1px solid rgb(var(--c-line)/.2);padding-bottom:14px;margin-bottom:28px}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:rgb(var(--c-ink-muted))}
.masthead h1{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;font-size:30px;line-height:1.05;margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.masthead .sub{font-family:var(--font-serif);color:rgb(var(--c-ink-muted));font-size:14px;margin-top:4px}
.stamp{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--c-accent));border:1px solid rgb(var(--c-accent)/.4);padding:3px 8px;transform:rotate(-2deg)}

/* ===== 按钮 ===== */
.btn{
  display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border-radius:4px;cursor:pointer;border:1px solid rgb(var(--c-line)/.3);
  background:transparent;color:rgb(var(--c-ink));transition:all .2s;text-align:center;
}
.btn:hover{background:rgb(var(--c-ink));color:rgb(var(--c-paper))}
.btn-primary{background:rgb(var(--c-accent));border-color:rgb(var(--c-accent));color:#fff}
.btn-primary:hover{background:rgb(var(--c-ink));border-color:rgb(var(--c-ink));color:rgb(var(--c-paper))}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:6px 12px;font-size:11px;letter-spacing:.08em}
.lock-active{background:rgb(var(--c-accent));border-color:rgb(var(--c-accent));color:#fff}
.lock-active:hover{background:rgb(var(--c-ink));border-color:rgb(var(--c-ink))}

/* ===== 上传区 ===== */
.upload-zone{border:2px dashed rgb(var(--c-line)/.25);border-radius:8px;padding:60px 20px;text-align:center;transition:all .2s}
.upload-zone.dragover{border-color:rgb(var(--c-accent));background:rgb(var(--c-accent)/.05)}
.upload-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.upload-icon{font-size:48px}
.upload-title{font-family:var(--font-serif);font-size:18px;color:rgb(var(--c-ink))}
.upload-hint{font-family:var(--font-mono);font-size:11px;color:rgb(var(--c-ink-muted));letter-spacing:.05em}

/* ===== Tab 栏 ===== */
.tabs{display:flex;gap:4px;border-bottom:1px solid rgb(var(--c-line)/.2);margin-bottom:20px;flex-wrap:wrap;align-items:center}
.tab{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:rgb(var(--c-ink-muted));cursor:pointer;transition:all .2s}
.tab:hover{color:rgb(var(--c-ink))}
.tab.active{color:rgb(var(--c-accent));border-bottom-color:rgb(var(--c-accent))}
.tab-action{margin-left:auto;color:rgb(var(--c-ink-muted));font-size:11px}

/* ===== 布局 ===== */
.layout{display:grid;grid-template-columns:1fr 280px;gap:24px}
@media(max-width:760px){.layout{grid-template-columns:1fr}}

/* ===== 画布区 ===== */
.canvas-area{background:rgb(var(--c-paper)/.4);border:1px solid rgb(var(--c-line)/.12);border-radius:6px;padding:0;min-height:300px;display:flex;flex-direction:column}
.canvas-toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid rgb(var(--c-line)/.1);background:rgb(var(--c-paper-warm)/.3)}
.zoom-btn{width:28px;height:28px;border:1px solid rgb(var(--c-line)/.2);background:rgb(var(--c-paper));color:rgb(var(--c-ink));border-radius:4px;cursor:pointer;font-size:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.zoom-btn:hover{background:rgb(var(--c-accent));color:#fff;border-color:rgb(var(--c-accent))}
.zoom-level{font-family:var(--font-mono);font-size:11px;color:rgb(var(--c-ink-muted));min-width:48px;text-align:center}
.canvas-scroll{flex:1;overflow:auto;padding:16px;display:flex;align-items:flex-start;justify-content:center}
.canvas-wrap{position:relative;line-height:0;flex-shrink:0}
.canvas-wrap canvas{display:block;height:auto}
/* overlay 必须和 base 同尺寸：width/height 由 app.js 设，两者用 % 填满 wrap 保证对齐 */
#baseCanvas{width:100%;display:block}
#overlayCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;display:block}

/* ===== 控制面板 ===== */
.panel-area{background:rgb(var(--c-paper-warm)/.5);border:1px solid rgb(var(--c-line)/.12);border-radius:6px;padding:18px}
.panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--c-ink-muted));margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgb(var(--c-line)/.12)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--c-ink-muted))}
.field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
input[type=number],input[type=text],select{
  width:100%;padding:8px 10px;font-family:var(--font-sans);font-size:13px;
  background:rgb(var(--c-paper));color:rgb(var(--c-ink));
  border:1px solid rgb(var(--c-line)/.2);border-radius:4px;outline:none;
}
input:focus,select:focus{border-color:rgb(var(--c-accent))}
input[type=color]{width:42px;height:34px;padding:2px;cursor:pointer;background:rgb(var(--c-paper));border:1px solid rgb(var(--c-line)/.2);border-radius:4px}
input[type=range]{width:100%;accent-color:rgb(var(--c-accent))}
.suffix{font-family:var(--font-mono);font-size:11px;color:rgb(var(--c-ink-muted));min-width:28px}

/* ===== 切割预览（面板内） ===== */
.slice-preview{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;min-height:10px}
.slice-preview .thumb{position:relative;cursor:pointer;border:2px solid transparent;border-radius:4px;transition:all .15s;overflow:hidden;background:rgb(var(--c-paper))}
.slice-preview .thumb:hover{border-color:rgb(var(--c-accent));transform:scale(1.05)}
.slice-preview .thumb img{max-width:88px;display:block}
.slice-preview .thumb .dl-btn{display:block;width:100%;border:none;background:rgb(var(--c-accent));color:#fff;font-family:var(--font-mono);font-size:10px;padding:3px 0;cursor:pointer;line-height:1}

/* ===== 比例预设按钮组 ===== */
.ratio-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ratio-btn{font-family:var(--font-mono);font-size:10px;padding:8px 6px;border:1px solid rgb(var(--c-line)/.25);background:rgb(var(--c-paper));color:rgb(var(--c-ink-soft));border-radius:4px;cursor:pointer;text-align:center;transition:all .15s}
.ratio-btn:hover{border-color:rgb(var(--c-accent))}
.ratio-btn.active{background:rgb(var(--c-accent));color:#fff;border-color:rgb(var(--c-accent))}

/* ===== 输出区 ===== */
.output{margin-top:20px;padding-top:16px;border-top:1px solid rgb(var(--c-line)/.15)}
.output-preview{min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.output-preview img{max-height:120px;border:1px solid rgb(var(--c-line)/.15);border-radius:4px}
.output-preview .thumb{position:relative}
.output-preview .thumb .dl{position:absolute;bottom:2px;right:2px;background:rgb(var(--c-accent));color:#fff;border:none;border-radius:3px;padding:2px 7px;font-size:11px;cursor:pointer}
.output-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.status{font-family:var(--font-mono);font-size:11px;text-align:center;margin-top:10px;min-height:16px;color:rgb(var(--c-ink-muted))}
.status.success{color:#16a34a}.status.error{color:rgb(var(--c-accent))}