/* ================================================================
 * 颜江工坊 · 样式
 * 世界：「文房工坊」—— 温暖纸面工作台，墨水蓝是唯一 accent，
 *       一切装饰服务于"这是一张认真的书桌"。（Operate 模式：
 *       可扫读性 > 表达；品牌活在精确的细节里。）
 * 规则：4px 间距刻度 · 标题上方空间大于下方 · 阴影必带偏移与模糊 ·
 *       浏览器表面（选区/focus/滚动条/caret）一律主题化
 * ================================================================ */
:root {
  /* —— 色彩：语义角色（hex 保证 file:// 下老内核一致） —— */
  --bg: #e7e1d4;               /* 书桌木底 */
  --surface: #fffdf8;          /* 纸面 */
  --surface-2: #f6f1e6;        /* 次级纸面（按钮底） */
  --ink: #2b3350;              /* 正文 */
  --ink-soft: #5a6072;         /* 次要文字（纸面上 5.9:1） */
  --line: #e4ddcb;
  --accent: #2b3a8c;           /* 墨水蓝：只给主动作与选中 */
  --accent-hover: #33459e;
  --accent-tint: #eceffc;
  --danger: #b04a3a;

  /* —— 间距：4px 刻度 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* —— 字体角色 —— */
  --font-ui: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-display: 'YJWenKai', 'YJYozai', 'KaiTi', 'STKaiti', serif;  /* self-host 手写脸 */

  /* —— 动效 —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-state: 200ms;

  --radius: 12px;
}

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

html { scrollbar-color: #c9c2ae transparent; }

body {
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 480px at 72% -12%, rgba(43, 58, 140, .05), transparent),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* —— 浏览器表面：被建造，而非拼装 —— */
::selection { background: rgba(43, 58, 140, .18); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
textarea, input, select, button { caret-color: var(--accent); font-family: inherit; }

/* ================================================================
 * 图标
 * ================================================================ */
.icon {
  width: 17px; height: 17px; flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.sm { width: 14px; height: 14px; stroke-width: 1.6; }
.icon.lg { width: 26px; height: 26px; stroke-width: 1.6; }
.icon .fill { fill: currentColor; stroke: none; }

/* ================================================================
 * 顶栏
 * ================================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.logo {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--accent);
  color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(43, 58, 140, .28);   /* 有偏移有模糊的深度 */
}
.topbar h1 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.15;
}
.subtitle { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.font-status { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================================================================
 * 双栏布局
 * ================================================================ */
.layout {
  display: grid;
  grid-template-columns: 404px minmax(0, 1fr);
  gap: var(--sp-6);
  max-width: 1380px;
  margin: var(--sp-6) auto;
  padding: 0 var(--sp-6);
  align-items: start;
}

/* ================================================================
 * 控制台：一体面板，靠亲密性分节（不做同质卡片堆）
 * ================================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(70, 62, 38, .07), 0 10px 30px rgba(70, 62, 38, .09);
  overflow: hidden;
}
.sect { padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.sect + .sect { border-top: 1px solid rgba(228, 221, 203, .7); }
.sect-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);      /* 标题上方由 .sect 的 padding 提供，上下比 20:12 */
}
.sect-title .icon { color: #8b8570; }

/* —— 表单原语 —— */
textarea, input[type=text], select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 9px 11px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
textarea { line-height: 1.75; min-height: 150px; margin-top: var(--sp-2); }
textarea:focus, input[type=text]:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
select { cursor: pointer; }

.row { display: flex; align-items: center; }
.row.gap { gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.stat { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

/* —— 按钮：一个主层级，其余安静 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; cursor: pointer;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13.5px;
  line-height: 1.2;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-state) var(--ease-out),
    background-color var(--t-state) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 58, 140, .32);
}
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 4px 12px rgba(43, 58, 140, .4); }
.btn.primary:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.btn.ghost {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover { background: #efeadc; }
.btn.ghost:disabled { opacity: .45; cursor: default; transform: none; }
.btn .icon { width: 15px; height: 15px; }
.icon-btn { padding: 8px 9px; }

/* —— 字体上传 —— */
.upload {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  border: 1.5px dashed var(--line);
  border-radius: 9px;
  padding: 9px;
  font-size: 12.5px; color: var(--ink-soft);
  cursor: pointer; user-select: none;
  transition: border-color var(--t-state), color var(--t-state), background-color var(--t-state);
}
.upload:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-tint);
}
.upload .icon { width: 14px; height: 14px; }

/* —— 药丸选择组：选中 = 动作色，稀缺而有指向 —— */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill-row + .pill-row { margin-top: var(--sp-2); }
.pill-row label { position: relative; }
.pill-row input { position: absolute; opacity: 0; inset: 0; }
.pill-row span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; cursor: pointer;
  transition: all var(--t-state) var(--ease-out);
}
.pill-row span:hover { border-color: #cfc7ae; background: #f0ebde; }
.pill-row input:checked + span {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(43, 58, 140, .3);
}
.pill-row input:checked + span .icon.sm { color: #fff; }
.pill-row input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.dot {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 50%; margin-right: 2px;
}
.ink-blueblack { background: #2b3a8c; }
.ink-black { background: #26262c; }
.ink-blue { background: #1e46c8; }
.pill-row input:checked + span .dot { outline: 2px solid rgba(255,255,255,.65); }

/* —— 滑杆：组内紧凑，组间慷慨 —— */
.slider { margin-bottom: var(--sp-3); }
.slider label {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-soft); margin-bottom: var(--sp-1);
}
.slider b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] {
  width: 100%; accent-color: var(--accent);
  height: 24px;                    /* 触控目标 */
}

.checkline {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13.5px; margin-top: var(--sp-1); cursor: pointer;
}
.checkline input { accent-color: var(--accent); width: 15px; height: 15px; }
.hint {
  margin-top: var(--sp-3);
  font-size: 12px; line-height: 1.65;
  color: #6d6552;                                   /* 暖灰衍生自纸面，非通用冷灰 */
  background: #f4efe3;
  border-radius: 8px; padding: 8px 11px;
}

/* ================================================================
 * 预览区
 * ================================================================ */
.preview { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.paper-shadow canvas {
  display: block;
  width: 100%; max-width: 720px;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow:
    0 1px 3px rgba(50, 45, 25, .28),
    0 14px 36px rgba(50, 45, 25, .22);
  background: #fff;
}
.paper-shadow canvas.swap { animation: page-in var(--t-state) var(--ease-out); }
@keyframes page-in { from { opacity: .35; } to { opacity: 1; } }

.toolbar {
  max-width: 720px; width: 100%;
  margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px var(--sp-4);
  box-shadow: 0 1px 2px rgba(70, 62, 38, .06);
}
.pager { display: flex; align-items: center; gap: var(--sp-2); }
.page-label {
  font-size: 13.5px; min-width: 92px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.exports { margin-left: auto; display: flex; gap: var(--sp-2); }

/* 导出完成的一刻（Operate 模式里唯一放大的喜悦时刻） */
.btn.done { background: #2e7d4f; }
.btn.done:hover { background: #2e7d4f; }

/* ================================================================
 * toast / 页脚 / 致谢
 * ================================================================ */
.foot {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  flex-wrap: wrap;
  text-align: center; font-size: 12px; color: var(--ink-soft);
  padding: var(--sp-5) 0 var(--sp-6);
}
.credits-btn {
  min-height: 30px; padding: 5px 12px;
  font-size: 12px;
}

/* —— 致谢面板：原生 dialog，Esc 可关 —— */
.credits {
  width: min(600px, calc(100vw - 40px));
  max-height: min(76vh, 640px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 4px 14px rgba(40, 36, 20, .22), 0 24px 60px rgba(40, 36, 20, .28);
}
.credits::backdrop {
  background: rgba(43, 38, 26, .42);
}
.credits-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid rgba(228, 221, 203, .7);
}
.credits-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
}
.credits-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.credits-body h3 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--ink-soft);
  margin: var(--sp-4) 0 var(--sp-2);
}
.credits-body h3:first-child { margin-top: 0; }
.credits-list { list-style: none; }
.credits-list li {
  font-size: 13.5px; line-height: 1.75;
  color: var(--ink);
  padding-left: var(--sp-4);
  position: relative;
}
.credits-list li::before {
  content: "";
  position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}
.credits-list a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(43, 58, 140, .35);
  text-underline-offset: 3px;
}
.credits-list a:hover { text-decoration-color: var(--accent); }
.credits-note {
  margin-top: var(--sp-4);
  font-size: 12px; line-height: 1.8;
  color: #6d6552;
  background: #f4efe3;
  border-radius: 8px;
  padding: 10px 13px;
}

#yj-toast {
  position: fixed; right: 24px; bottom: 24px;
  display: flex; align-items: center; gap: var(--sp-2);
  background: #2f3648; color: #fff;
  padding: 11px 17px; border-radius: 10px;
  font-size: 13.5px;
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--t-state) var(--ease-out), transform var(--t-state) var(--ease-out);
  z-index: 99;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#yj-toast.show { opacity: 1; transform: translateY(0); }

/* ================================================================
 * 移动端
 * ================================================================ */
@media (max-width: 940px) {
  .layout { grid-template-columns: 1fr; gap: var(--sp-4); padding: 0 var(--sp-4); }
  .topbar { padding: 12px var(--sp-4); }
  .font-status { display: none; }
  .btn { min-height: 38px; }
  .exports { margin-left: 0; width: 100%; }
  .exports .btn { flex: 1; min-height: 44px; }     /* 触控目标 */
  .pager { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
}