:root{
  --indigo:#16233B;          /* 磁青书衣 */
  --indigo-deep:#101A2C;
  --paper:#F7F2E6;           /* 内页纸色 */
  --paper-soft:#FCF8EE;
  --paper-edge:#E7DEC9;
  --ink:#23241F;
  --ink-soft:#6B675B;
  --seal:#AF3A2A;            /* 朱砂印色 */
  --seal-deep:#8F2C20;
  --hairline:rgba(35,36,31,.22);
  /* 字体分三档（用户要求）：
     · --serif / --sans：正文与「其他地方」——一律本地字体、不联网下载（拉取太慢）。
       苹果设备（macOS/iOS）命中系统自带的 Songti SC，其余设备回退本地系统字体。
     · --serif-hero：仅首屏诗句 + 版权句——苹果仍命中本地 Songti SC；只有非苹果设备
       才从 cdn.jsdelivr.net 网络加载 Noto Serif SC（可变字重包声明的族名带 " Variable"）。
     Songti SC 是 Apple 私有系统字体，无 CDN 可分发，苹果端全靠本地命中、永不联网。 */
  --serif:"Songti SC","STSong","Source Han Serif SC","SimSun",serif;
  --sans:"Songti SC","STSong","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --serif-hero:"Songti SC","STSong","Noto Serif SC Variable","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  color:var(--ink);
  font-family:var(--serif);   /* 正文与「其他地方」：本地字体、不联网；苹果→Songti SC */
  font-size:15px;
  line-height:1.7;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 20px 48px;
}
a{color:inherit}

/* ── 顶栏 ─────────────────────────── */
.topbar{
  width:100%;max-width:860px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 4px 34px;color:var(--paper);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.sealpair{display:flex;align-items:center;gap:7px;font-family:var(--serif)}
.sealpair .stamp{
  width:34px;height:34px;display:grid;place-items:center;
  font-size:19px;font-weight:700;line-height:1;border-radius:3px;
}
.stamp.fan{background:var(--seal);color:#FBF3E4;box-shadow:inset 0 0 0 1.5px rgba(251,243,228,.55)}
.stamp.jian{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(247,242,230,.75)}
.sealpair .arrow{color:rgba(247,242,230,.55);font-size:13px}
.wordmark{font-family:var(--serif);font-size:21px;letter-spacing:.14em;font-weight:600}
.topnote{font-size:12.5px;letter-spacing:.06em;color:rgba(247,242,230,.62);text-align:right}

/* ── 纸页面板 ─────────────────────── */
.sheet-wrap{position:relative;width:100%;max-width:760px;margin-top:60px}
.slip{
  position:absolute;left:-64px;top:34px;width:46px;
  writing-mode:vertical-rl;
  background:var(--paper);
  border:1px solid rgba(35,36,31,.4);
  border-top:4px solid var(--seal);
  padding:20px 0 16px;
  font-family:var(--serif);font-size:14.5px;letter-spacing:.42em;color:var(--ink);
  text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.slip small{display:block;font-size:10.5px;letter-spacing:.34em;color:var(--ink-soft);margin-top:10px}
.sheet{
  position:relative;
  background:var(--paper);
  border-radius:4px;
  padding:44px 48px 40px;
  box-shadow:0 2px 0 var(--paper-edge), 0 5px 0 rgba(231,222,201,.55), 0 24px 60px rgba(0,0,0,.45);
  animation:rise .45s ease-out both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}

/* 首屏第一句：一句诗，大字细体。走 --serif-hero 两段式：
   ① 本地优先——Apple 设备（macOS/iOS）用系统自带的 Songti SC / STSong，
      这正是离线 standalone 版首屏那副「大字字体」，苹果端不联网也一模一样；
   ② 本地没有（安卓/Windows）——落到 --serif-hero 里从 cdn.jsdelivr.net
      网络加载的 Noto Serif SC。
   Songti SC 是 Apple 私有系统字体，任何 CDN 都无法分发，故只能靠本地命中；
   苹果端因此永远命中①、根本不碰网络字体。细体重点在 font-weight，
   可变字重包能取到真正的 300。 */
/* 视觉隐藏：从画面移除，但保留在 DOM 供搜索引擎/读屏软件读取（勿用 display:none） */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.poem{
  font-family:var(--serif-hero);
  font-weight:300;
  font-size:clamp(27px,4.9vw,45px);
  letter-spacing:.12em;
  line-height:1.75;
  color:var(--ink);
  white-space:pre-line;   /* 保留 heroTitle 里的换行符，让诗句断成两行 */
}
.lede{margin-top:20px;color:var(--ink-soft);font-size:14.5px;line-height:1.85;max-width:58ch}
.lede b{color:var(--ink);font-weight:600}

/* ── 转换方案 / 输出格式 / 日语标音 ─────────────────────── */
.controls{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.scheme{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scheme label{font-family:var(--serif);font-weight:600;letter-spacing:.08em;font-size:14.5px}
.scheme select{
  font-family:var(--serif);font-weight:500;font-size:14px;color:var(--ink);
  background:var(--paper-soft);
  border:1px solid var(--hairline);border-radius:3px;
  padding:8px 34px 8px 12px;line-height:1.4;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B675B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;max-width:100%;
}
.scheme select:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

/* 输出格式的即时提示（integration_ui_04：COPY.outputFormatNotice）。
 * 空字符串时（非 mobi/pdf）靠 :empty 折叠掉占位，不留一条空白线。 */
.output-notice{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.output-notice:empty{display:none}

/* ── 功能选项（繁简转换 / 日文标音，横排二选一） ─── */
.modes{
  margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--hairline);
}
.mode{
  flex:1 1 180px;min-width:150px;
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:none;border:none;cursor:pointer;
  padding:12px 14px 14px;margin-bottom:-1px;
  border-bottom:2.5px solid transparent;color:var(--ink-soft);
  transition:color .15s, border-color .15s;
}
.mode:hover{color:var(--ink)}
.mode[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--seal)}
.mode:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:3px}
.mode .mode-name{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.08em}
.mode .mode-desc{font-size:12.5px;color:var(--ink-soft)}

/* 按当前功能显示/隐藏对应选项字段（#sheet[data-active-mode] 由 app.js 切换） */
.controls [data-mode]{display:none}
#sheet[data-active-mode="ts"] .controls [data-mode="ts"]{display:flex}
#sheet[data-active-mode="furigana"] .controls [data-mode="furigana"]{display:flex}
/* 繁简的「转换方向」+「地区用词」并排成一组，一起换行、不被拆散 */
.scheme-pair{gap:22px;flex-wrap:wrap;align-items:center}

/* ── 拖放区 ──────────────────────── */
.drop{
  margin-top:18px;display:block;cursor:pointer;
  border:1.5px dashed rgba(35,36,31,.42);border-radius:4px;
  padding:44px 24px;text-align:center;
  transition:border-color .15s, background-color .15s;
}
.drop:hover,.drop.drag{border-color:var(--seal);background:rgba(175,58,42,.045)}
.drop:focus-within{outline:2px solid var(--seal);outline-offset:3px}
.drop.disabled{opacity:.45;cursor:wait;pointer-events:none}
.drop .main{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.04em}
.drop .sub{margin-top:8px;font-size:13px;color:var(--ink-soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

.engine{margin-top:12px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;min-height:20px}
.engine .dot{width:7px;height:7px;border-radius:50%;background:#B99A3F;flex:none}
.engine.ready .dot{background:#4A7A46}
.engine.error .dot{background:var(--seal)}
.engine button{
  font-family:var(--sans);font-size:12.5px;color:var(--seal);background:none;border:none;
  text-decoration:underline;cursor:pointer;padding:0;
}

/* ── 待转换列表 + 开始按钮 ──────────── */
.pending{margin-top:20px}
.pending-head{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;letter-spacing:.04em}
.pending-list{display:flex;flex-direction:column;gap:8px}
.chip{
  display:flex;align-items:center;gap:12px;
  background:var(--paper-soft);border:1px solid rgba(35,36,31,.16);border-radius:3px;
  padding:9px 12px;
}
.chip .cname{font-family:var(--serif);font-size:14px;word-break:break-all}
.chip .csize{font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex:none;margin-left:auto}
.chip .cx{
  flex:none;background:none;border:none;cursor:pointer;color:var(--ink-soft);
  font-size:17px;line-height:1;padding:2px 7px;border-radius:3px;
}
.chip .cx:hover{color:var(--seal);background:rgba(175,58,42,.08)}
.chip .cx:focus-visible{outline:2px solid var(--seal);outline-offset:1px}

.actions{margin-top:22px}
.start{
  font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.12em;
  background:var(--seal);color:#FBF3E4;border:none;border-radius:4px;
  padding:13px 32px;cursor:pointer;transition:background .15s;
}
.start:hover{background:var(--seal-deep)}
.start:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.start:disabled{background:rgba(35,36,31,.2);color:rgba(247,242,230,.8);cursor:not-allowed}

/* ── 文件列表 ─────────────────────── */
.files{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.card{
  background:var(--paper-soft);
  border:1px solid rgba(35,36,31,.16);border-radius:3px;
  padding:14px 16px 12px;
}
.card .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.card .name{font-family:var(--serif);font-weight:600;font-size:15px;word-break:break-all}
.card .size{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);flex:none}
.bar{margin-top:10px;height:2px;background:rgba(35,36,31,.12);border-radius:1px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--seal);transition:width .2s}
.card .status{margin-top:8px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card.err .status{color:var(--seal-deep)}
.card.err .bar i{background:rgba(175,58,42,.35);width:100%}
.dl{
  font-family:var(--sans);font-size:13px;letter-spacing:.05em;
  background:var(--seal);color:#FBF3E4;border:none;border-radius:3px;
  padding:7px 16px;cursor:pointer;text-decoration:none;display:inline-block;
}
.dl:hover{background:var(--seal-deep)}
.dl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── 页脚 ────────────────────────── */
.foot{
  width:100%;max-width:760px;margin-top:30px;
  font-family:var(--serif-hero);   /* 版权句与首屏诗句同档：苹果 Songti，非苹果走 cdn.jsdelivr.net 的 Noto */
  color:rgba(247,242,230,.55);font-size:12.5px;letter-spacing:.04em;
  text-align:center;line-height:2;
}
.foot a{color:rgba(247,242,230,.78);text-underline-offset:3px}

@media (max-width:880px){
  .sheet{padding:32px 24px 30px}
  .sheet-wrap{margin-top:34px}
}