/* 天工匣 · 生成器页共用样式（品牌风格唯一来源）
   用法：<link rel="stylesheet" href="/static/lib/tool.css">
   页面专属样式写在各自 index.html 的小段 <style> 里，颜色一律用下面的变量。
   变量与 6 个首批生成器的内联样式保持一致，改品牌色只改这里。 */
:root {
  --accent: #ff6a3d;
  --accent-hover: #ff8f66;
  --bg: #faf7f3;
  --text: #2b2320;
  --muted: #756a63; /* 浅底次要文字 ≥4.5:1（WCAG AA），旧值 #8a7f78 仅 3.7:1 */
  --line: #eee4dc;
  --viewer-bg: #f2ede7;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

/* 页头 */
header { position: sticky; top: 0; z-index: 20; background: rgba(250, 247, 243, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-inner .back { color: var(--muted); font-size: 14px; }
.header-inner h1 { font-size: 18px; margin: 0; flex: 1; }
.lang-switch a { color: var(--muted); font-size: 14px; }
.lang-switch a.on { color: var(--accent); font-weight: 700; }

/* 布局：左参数栏 + 右预览 */
main { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

/* 面板与表单 */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.panel h3 { margin: 0 0 10px; font-size: 15px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field select, .field input[type=number] { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.field .val { float: right; color: var(--accent); font-weight: 700; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.check input[type=checkbox] { accent-color: var(--accent); }

/* 按钮 */
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; font-weight: 600; font-family: inherit; }
.btn:hover { background: var(--accent-hover); }
.btn.ghost { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 上传区 / 预览容器 / 导出行 */
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 20px 10px; text-align: center; color: var(--muted); font-size: 14px; cursor: pointer; transition: .15s; }
.drop.dragover { border-color: var(--accent); color: var(--accent); background: #fff6f2; }
.drop img { max-width: 100%; max-height: 110px; border-radius: 8px; margin-top: 8px; }
#viewer { height: 430px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--viewer-bg); }
.export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
#sizeInfo { color: var(--text); }

/* 无障碍：键盘焦点可见 + 动效降级（与主站 style.css 同款） */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}