/*
 * app.css —— 制作器的布局与书桌场景
 * 整体是一张阅读书桌：暖色台面、纸色面板、柔和阴影；制作区保持安静、少装饰。
 * 书本、翻页、译文的样式在 js/book-css.js 里（导出时内联同一份）。
 */

/* ---------- 全局颜色与字体 ---------- */
:root {
  --paper: #fbf7ee;          /* 纸色：面板底色 */
  --paper-2: #f3ecdd;        /* 稍深的纸色：卡片、输入框底 */
  --line: #e1d5bf;           /* 分隔线 */
  --ink: #3b2f25;            /* 正文颜色 */
  --ink-2: #7c6a55;          /* 次要文字 */
  --accent: #b4532e;         /* 强调色（赤陶色） */
  --accent-2: #8f3f20;
  --ok: #3f7a4a;
  --danger: #b23b3b;
  --desk: #8a5c3a;           /* 书桌台面 */
  --radius: 10px;
  --shadow: 0 6px 22px rgba(60, 40, 20, .14);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--desk); overflow: hidden; font-size: 14px; }
h1, h2, h3 { font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; margin: 0; font-weight: 700; }
[hidden] { display: none !important; }

/* ---------- 左右两栏 ---------- */
.app { display: flex; height: 100vh; }
.side {
  flex: 0 0 360px; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 14px 28px; overflow-y: auto;
  background: var(--paper);
  box-shadow: 4px 0 18px rgba(0, 0, 0, .18);
  z-index: 2;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* 可滚动的竖向面板里，子元素保持自身高度，不被压缩重叠 */
.side > *, .lib-panel > *, .ed-props > *, .card > * { flex-shrink: 0; }

/* 顶部标题和文件操作 */
/* 标题行：左边小国旗，右边制作器名字 */
.brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brand h1 { font-size: 20px; letter-spacing: .04em; margin: 0; line-height: 1.2; }
/* 名字后面的超小字声明 */
.brand-note { display: block; font-size: 9px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); opacity: .75; margin-top: 2px; }
/* 语言切换：四面小国旗竖着排成两列 */
.lang-switch { display: grid; grid-template-columns: repeat(2, 22px); gap: 3px; flex: none; }
.lang-switch .flag {
  width: 22px; height: 15px; padding: 0; border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px;
  overflow: hidden; cursor: pointer; background: #fff; opacity: .5; filter: saturate(.6);
  transition: opacity .15s, filter .15s, transform .15s, box-shadow .15s;
}
.lang-switch .flag svg { display: block; width: 100%; height: 100%; }
.lang-switch .flag:hover { opacity: .85; filter: none; }
/* 当前使用的语言：不透明、带一圈强调色描边 */
.lang-switch .flag[aria-pressed="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--accent); }
.lang-switch .flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.file-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.status { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); min-height: 1em; }
.status.dirty { color: var(--accent); }

/* ---------- 卡片、表单 ---------- */
.card { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > span, .fld .card-head > span { font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
.fld.inline { flex-direction: row; align-items: center; justify-content: space-between; }
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.muted { color: var(--ink-2); margin: 0; }
.small { font-size: 12px; line-height: 1.5; }
.warn { color: var(--danger); font-size: 12px; margin: 0; min-height: 1em; line-height: 1.5; }
.note { font-size: 12px; color: var(--ink-2); background: var(--paper-2); padding: 8px 10px; border-radius: 8px; line-height: 1.6; margin: 0; }

input[type=text], input[type=number], select, textarea {
  font: inherit; color: var(--ink); background: #fffaf0;
  border: 1px solid #d8c9ae; border-radius: 7px; padding: 6px 8px; min-width: 0;
}
textarea { resize: vertical; line-height: 1.45; }
input[type=number] { width: 80px; }
input[type=color] { width: 44px; height: 28px; padding: 0 2px; border: 1px solid #d8c9ae; border-radius: 6px; background: #fff; cursor: pointer; }
input[type=range] { accent-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; }
.custom-size input { width: 72px; }

/* 按钮 */
.btn {
  appearance: none; font: inherit; font-size: 13px; line-height: 1.2;
  padding: 7px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid #cdbb9f; background: #fffaf0; color: var(--ink);
}
.btn:hover { background: #fff; border-color: #b39b78; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { padding: 4px 8px; font-size: 12px; }
.btn.primary { background: #4f6b4a; border-color: #4f6b4a; color: #fff; }
.btn.primary:hover { background: #435d3f; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-2); }
.btn.danger { color: var(--danger); border-color: #e2b8b0; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }

/* 分段选择按钮（横排/竖排、对齐、阅读方向） */
.seg { display: inline-flex; border: 1px solid #cdbb9f; border-radius: 8px; overflow: hidden; }
.seg button { appearance: none; font: inherit; font-size: 12px; padding: 6px 10px; border: 0; background: #fffaf0; cursor: pointer; color: var(--ink); }
.seg button + button { border-left: 1px solid #e3d6bf; }
.seg button[aria-pressed=true] { background: var(--ink); color: #fff; }

/* ---------- 书库列表 ---------- */
.book-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.book-list li { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.book-list li:hover { background: var(--paper-2); }
.book-list li.on { background: #f4e6d6; border-color: #e0c3a5; }
.book-list .mini { width: 30px; height: 42px; border-radius: 2px 4px 4px 2px; background: #888 center/cover; flex: none; box-shadow: 1px 2px 4px rgba(0, 0, 0, .25); }
.book-list .meta { flex: 1; min-width: 0; }
.book-list .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.book-list .meta span { font-size: 12px; color: var(--ink-2); }
.book-list .ops { display: flex; gap: 2px; }
.icon-btn { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--ink-2); font-size: 13px; }
.icon-btn:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.icon-btn.del:hover { color: var(--danger); }
.empty-hint { color: var(--ink-2); font-size: 13px; padding: 4px; }

/* 封面 / 音乐素材框 */
.asset-box { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--paper-2); border-radius: 8px; }
.asset-box .thumb { width: 56px; height: 78px; flex: none; border-radius: 3px; background: #ccc center/cover; box-shadow: 1px 2px 5px rgba(0, 0, 0, .2); }
.asset-box .info { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.asset-box .info b { color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.asset-box .acts { display: flex; flex-direction: column; gap: 4px; }

/* ---------- 页面列表 ---------- */
.page-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.page-item { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf3; cursor: pointer; }
.page-item:hover { border-color: #cdb48f; }
.page-item.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.page-item.drag-over-top { box-shadow: 0 -3px 0 var(--accent); }
.page-item.drag-over-bottom { box-shadow: 0 3px 0 var(--accent); }
.page-item .pthumb { width: 40px; height: 52px; flex: none; background: #eee center/contain no-repeat; border-radius: 3px; border: 1px solid #e5dccb; }
.page-item .pthumb.wide { width: 64px; }
.page-item .pthumb.blank { background: repeating-linear-gradient(45deg, #fbf7ee 0 6px, #f2ead8 6px 12px); }
.page-item .pinfo { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.page-item .pinfo b { color: var(--ink); font-size: 13px; }
.page-item .pinfo .fname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-item .pops { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.page-item .pops .row { gap: 0; }
.page-item .seg button { padding: 3px 6px; font-size: 11px; }
.page-auto { font-size: 12px; color: #8a6a3e; padding: 6px 10px; border: 1px dashed #d8b98d; border-radius: 8px; background: #fff6e6; }
.drag-handle { cursor: grab; color: #b9a585; padding: 0 2px; user-select: none; }

/* 草稿提示条 */
.draft-banner { background: #fff3dc; border: 1px solid #ecd2a2; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.draft-banner .row { margin-top: 8px; }

/* ---------- 主区标签页 ---------- */
.tabs { display: flex; gap: 4px; padding: 10px 14px 0; background: linear-gradient(#7a5134, #8a5c3a); }
.tabs button {
  appearance: none; font: inherit; font-size: 14px; padding: 9px 22px; cursor: pointer;
  border: 0; border-radius: 10px 10px 0 0; background: rgba(255, 248, 235, .25); color: #fff6e8;
}
.tabs button:hover { background: rgba(255, 248, 235, .38); }
.tabs button[aria-selected=true] { background: var(--paper); color: var(--ink); font-weight: 700; }
.view { flex: 1; min-height: 0; display: none; position: relative; background: var(--paper); }
.view.on { display: flex; }

/* ---------- 书库视图 ---------- */
/* 宽屏时三维场景铺满整个视图，设置面板以卡片形式悬浮在右侧（和预览视图占同样大小，开书过渡才对得齐） */
.lib-host { position: absolute; inset: 0; }
.lib-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 290px; z-index: 2; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(251, 247, 238, .96); box-shadow: 0 10px 30px rgba(60, 40, 20, .16); }
.lib-panel { transition: opacity .3s ease, transform .3s ease; }
/* 开书/合书过程中，设置面板淡出让位，不挡住书 */
#view-library.flowing .lib-panel { opacity: 0; transform: translateX(16px); pointer-events: none; }
/* 开书/合书过渡时，预览视图透明地叠在书库视图上面 */
.view.flow-over { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: transparent; }
.lib-panel h3 { font-size: 15px; }
.shelf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.shelf-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 7px; background: var(--paper-2); }
.shelf-list li .swatch { flex: 1; height: 10px; border-radius: 5px; }
/* 书库背景：渐变 / 图片的设置区 */
.bg-opts { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--paper-2); }
.bg-opts .row { display: flex; gap: 10px; }
.bg-opts .row .fld { flex: 1; }
.bg-opts .asset-box { background: #fffaf0; }
.bg-opts .asset-box .thumb { width: 78px; height: 52px; }   /* 背景图多半是横图，缩略图也横着放 */
.lib-panel .seg { display: flex; }
.lib-panel .seg button { flex: 1; }
/* 现成渐变的小色块，点一下套用 */
.grad-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.grad-chip { height: 26px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 6px; cursor: pointer; padding: 0; }
.grad-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.grad-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.deco-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.deco-add .fld:first-child { grid-column: 1 / -1; }
.deco-sel { border: 1px solid #e0c3a5; background: #fff7ec; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.deco-sel h4 { margin: 0; font-size: 14px; }
.deco-sel .row .btn { flex: 1; }

/* ---------- 编排视图 ---------- */
.ed { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ed-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fffaf2; }
.ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ed-pageinfo { font-size: 13px; min-width: 110px; text-align: center; }
.ed-zoom { font-size: 12px; min-width: 42px; text-align: center; color: var(--ink-2); }
.ed-tip { font-size: 12px; color: var(--ink-2); margin-left: auto; }
.ed-lang { font-size: 12px; padding: 4px 6px; }
.ed-main { flex: 1; min-height: 0; display: flex; }
.ed-canvas {
  flex: 1; min-width: 0; overflow: auto; position: relative; display: grid; place-items: center; padding: 24px;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .03) 0 2px, transparent 2px 9px), #8a5c3a;
}
.ed-canvas.empty::after { content: attr(data-msg); position: absolute; inset: 0; display: grid; place-items: center; color: #f6e9d6; font-size: 15px; }
/* 画布本身是一个尺寸容器：框里的字号用 cqh（图片高度的百分比），和导出页一致 */
.ed-stage { position: relative; container-type: size; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); user-select: none; touch-action: none; cursor: crosshair; }
.ed-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ed-layer { position: absolute; inset: 0; }
.ed-box { cursor: move; outline: 1.5px dashed rgba(180, 83, 46, .85); outline-offset: 0; }
.ed-box.empty { opacity: .45; }
.ed-box.over { outline: 2px solid #d02f2f; }
.ed-box.over::after { content: "溢出"; position: absolute; right: 0; top: 0; background: #d02f2f; color: #fff; font-size: 10px; padding: 1px 4px; font-weight: 400; writing-mode: horizontal-tb; }
.ed-box.sel { outline: 2px solid var(--accent); }
.ed-selframe { position: absolute; pointer-events: none; }
.ed-h { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid var(--accent); border-radius: 2px; pointer-events: auto; transform: translate(-50%, -50%); }
.ed-h.nw { left: 0; top: 0; cursor: nwse-resize; } .ed-h.n { left: 50%; top: 0; cursor: ns-resize; }
.ed-h.ne { left: 100%; top: 0; cursor: nesw-resize; } .ed-h.e { left: 100%; top: 50%; cursor: ew-resize; }
.ed-h.se { left: 100%; top: 100%; cursor: nwse-resize; } .ed-h.s { left: 50%; top: 100%; cursor: ns-resize; }
.ed-h.sw { left: 0; top: 100%; cursor: nesw-resize; } .ed-h.w { left: 0; top: 50%; cursor: ew-resize; }
.ed-ghost { position: absolute; border: 2px dashed var(--accent); background: rgba(180, 83, 46, .12); pointer-events: none; }
.ed-props { flex: 0 0 300px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); background: var(--paper); }
.ed-props h3 { font-size: 15px; margin-top: 4px; }
.ed-props textarea { min-height: 52px; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-grid .fld:has(.pair) { grid-column: 1 / -1; }
.pair { display: flex; align-items: center; gap: 6px; }
.pair input[type=range] { flex: 1; }
.pair input[type=number] { width: 64px; }
.ed-ops { display: flex; flex-wrap: wrap; gap: 5px; }
.ed-boxlist { display: flex; flex-direction: column; gap: 4px; }
.ed-boxitem { appearance: none; text-align: left; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fffaf3; cursor: pointer; }
.ed-boxitem:hover { border-color: var(--accent); }

/* ---------- 预览视图 ---------- */
.preview-host { flex: 1; min-width: 0; position: relative; }
.preview-host > .empty-hint { position: absolute; inset: 0; display: grid; place-items: center; background: var(--desk); color: #f6e9d6; font-size: 15px; }

/* ---------- 对话框 ---------- */
.dlg { border: 0; border-radius: 14px; padding: 20px 22px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); max-width: min(92vw, 440px); }
.dlg.wide { max-width: min(94vw, 640px); width: 640px; }
.dlg::backdrop { background: rgba(40, 25, 12, .45); }
.dlg form { display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { font-size: 18px; }
.dlg p { margin: 0; line-height: 1.6; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; margin: 0; }
.fs legend { padding: 0 4px; }
.estimate { font-size: 13px; background: #fffdf8; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.estimate.big { border-color: #e7b07c; background: #fff3e2; }
.progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.progress .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* 提示条 */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 10px); max-width: 80vw; background: rgba(45, 32, 20, .92); color: #fff; padding: 9px 16px; border-radius: 9px; font-size: 13px; line-height: 1.5; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 窄屏：左右两栏改成上下 ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { flex-direction: column; height: auto; min-height: 100vh; }
  .side { flex: none; max-height: none; box-shadow: none; }
  .main { min-height: 90vh; }
  .view.on { flex-direction: column; }
  .lib-host { position: relative; inset: auto; min-height: 60vh; }
  .lib-panel { position: static; width: auto; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: var(--paper); }
  .lib-panel, .ed-props { flex: none; border-left: 0; border-top: 1px solid var(--line); }
  .ed-main { flex-direction: column; }
  .ed-canvas { min-height: 60vh; }
  .preview-host { min-height: 80vh; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .progress .bar i { transition: none; }
}