/* 排版工具 · 杂志编辑风 */
:root{
  --bg:#f5f3ed;
  --surface:#fffdf8;
  --surface-2:#f0ede4;
  --line:#e5e0d3;
  --line-strong:#d5cfbf;
  --ink:#211f1a;
  --ink-2:#6f6a5e;
  --ink-3:#a49e8f;
  --accent:#b23b2e;
  --accent-hover:#962f24;
  --accent-soft:#f8ece8;
  --danger:#b23b2e;
  --radius:8px;
  --radius-sm:6px;
  --shadow-paper:0 1px 3px rgba(70,58,35,.08),0 14px 38px rgba(70,58,35,.12);
  --serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:disabled{opacity:.35;cursor:not-allowed}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
h2{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.04em}
h3{font-family:var(--serif);font-size:13px;font-weight:600;color:var(--ink-2);margin:22px 0 12px;letter-spacing:.14em;display:flex;align-items:center;gap:8px}
h3::before{content:"";width:5px;height:5px;background:var(--accent);flex-shrink:0}
.muted{color:var(--ink-3);font-size:12px;margin-top:10px;line-height:1.7}
.muted-sm{color:var(--ink-3);font-size:12px}

/* ── 顶栏 ── */
.topbar{
  height:56px;display:flex;align-items:center;gap:18px;
  padding:0 22px;background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative;z-index:30;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0}
.brand .mark{
  width:30px;height:30px;border-radius:6px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:16px;
}
.brand-text{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.1em;display:flex;flex-direction:column;line-height:1.3}
.brand-text small{font-family:var(--sans);font-weight:400;font-size:10px;color:var(--ink-3);letter-spacing:.18em}
.doc-info{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:12px;max-width:36vw}
.doc-info strong{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-info span{font-size:11px;color:var(--ink-3);white-space:nowrap;letter-spacing:.05em}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.saved-tag{font-size:11px;color:var(--ink-3);margin-right:4px;letter-spacing:.05em}

.primary{
  background:var(--accent);color:#fff;border-radius:var(--radius-sm);
  padding:8px 18px;font-weight:500;font-size:13px;letter-spacing:.08em;
  transition:background .15s;display:inline-flex;align-items:center;gap:6px;justify-content:center;
}
.primary:hover{background:var(--accent-hover)}
.primary.wide,.outline.wide{width:100%}
.outline{
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:8px 14px;font-size:13px;color:var(--ink);background:var(--surface);
  transition:background .15s,border-color .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
}
.outline:hover{border-color:var(--ink-3)}
.icon-btn{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  color:var(--ink-2);transition:background .15s;
}
.icon-btn:hover{background:var(--surface-2)}
.text-btn{color:var(--ink-2);font-size:13px;padding:6px 10px;border-radius:var(--radius-sm);letter-spacing:.04em}
.text-btn:hover{color:var(--ink)}
.mini-btn{
  font-size:12px;color:var(--accent);font-weight:500;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);transition:all .15s;
}
.mini-btn:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ── 三栏布局 ── */
.shell{display:flex;height:calc(100vh - 56px)}

/* 左：草稿栏 */
.drafts{width:236px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column}
.drafts-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px}
.panel-title{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.14em}
.draft-list{flex:1;overflow-y:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:2px}
.draft-item{
  border:1px solid transparent;border-left:2px solid transparent;border-radius:var(--radius-sm);
  padding:9px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .12s;
}
.draft-item:hover{background:var(--surface-2)}
.draft-item.active{background:var(--accent-soft);border-left-color:var(--accent)}
.draft-main{flex:1;min-width:0}
.draft-main strong{display:block;font-family:var(--serif);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draft-item.active .draft-main strong{color:var(--accent)}
.draft-main span{font-size:11px;color:var(--ink-3)}
.draft-ops{display:none;flex-shrink:0;gap:2px}
.draft-item:hover .draft-ops{display:flex}
.draft-ops button{width:24px;height:24px;border-radius:6px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.draft-ops button:hover{background:#e6e1d3;color:var(--ink)}
.draft-ops button.del:hover{color:var(--danger)}
.drafts-foot{padding:12px 16px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);line-height:1.7}
.draft-empty{padding:24px 10px;font-size:12px;color:var(--ink-3);text-align:center;line-height:2}

/* 中：预览区 */
.workspace{flex:1;min-width:0;display:flex;flex-direction:column}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 10px}
.segmented{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:3px}
.segmented button{padding:5px 18px;border-radius:4px;font-size:13px;color:var(--ink-2);transition:all .15s;letter-spacing:.04em}
.segmented button.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(70,58,35,.12)}
.paper-stage{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:26px 20px 44px}
#preview{background:#fff;box-shadow:var(--shadow-paper);border-radius:3px;max-width:min(500px,92vw);height:auto}
#empty{margin:auto;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px}
#empty p:first-child{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.1em}
#empty .primary{margin-top:12px}
.page-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:4px 0 2px}
.page-nav span{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:64px;text-align:center;letter-spacing:.1em}
.preview-hint{text-align:center;font-size:11px;color:var(--ink-3);padding:6px 0 14px;letter-spacing:.05em}

/* 右：设置面板 */
.settings{width:300px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column}
.settings-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;padding:9px 0;font-size:13px;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;letter-spacing:.1em;
}
.tabs button.active{color:var(--accent);font-weight:500;border-bottom-color:var(--accent)}
.panel{flex:1;overflow-y:auto;padding:14px 18px 22px}
.settings-footer{padding:11px 18px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line)}

/* 表单控件 */
.field{margin-bottom:16px}
.field>label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-2);margin-bottom:6px;letter-spacing:.05em}
.field output{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.field select,.field input[type=text]{
  width:100%;padding:8px 11px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);font-size:13px;
}
.field select:focus,.field input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=range]{width:100%;accent-color:var(--accent);height:22px}
.field input[type=color]{width:100%;height:36px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);padding:3px;cursor:pointer}
.check{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink);padding:9px 0;cursor:pointer}
.check input{accent-color:var(--accent);width:15px;height:15px}
.info-box{background:var(--surface-2);border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;color:var(--ink-2);line-height:1.8;margin:14px 0 10px}
.panel .outline.wide{margin-top:8px}

/* 模板网格 */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.theme{display:flex;flex-direction:column;gap:6px;border:1px solid transparent;border-radius:var(--radius);padding:6px;transition:all .12s;text-align:center}
.theme:hover{background:var(--surface-2)}
.theme.active{border-color:var(--accent);background:var(--accent-soft)}
.theme .swatch{height:64px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;line-height:1.3}
.theme .swatch strong{font-family:var(--serif);font-size:14px;font-weight:600}
.theme .swatch i{display:block;width:52%;height:1px;background:currentColor;opacity:.4}
.theme>span{font-size:12px;color:var(--ink-2)}
.theme.active>span{color:var(--accent);font-weight:500}

/* 自定义背景 */
.bg-tabs{display:flex;gap:6px;margin-bottom:12px}
.bg-tabs button{flex:1;padding:6px 0;font-size:12px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);color:var(--ink-2);background:var(--surface);letter-spacing:.05em}
.bg-tabs button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:500}
.file-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2);
  background:var(--surface);cursor:pointer;transition:all .15s;
}
.file-btn:hover{border-color:var(--accent);color:var(--accent)}
.bg-preview{margin-top:8px;height:64px;border-radius:var(--radius-sm);border:1px solid var(--line);background-size:cover;background-position:center}

/* 导出 */
.export-options{display:flex;flex-direction:column;gap:8px}
.export-options button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  text-align:left;transition:all .15s;
}
.export-options button:hover{border-color:var(--accent);background:var(--accent-soft)}
.export-options strong{font-size:13px;font-weight:500;color:var(--ink)}
.export-options button:hover strong{color:var(--accent)}
.export-options span{font-size:11px;color:var(--ink-3)}

/* 弹窗 */
dialog{border:none;border-radius:10px;padding:0;width:min(560px,92vw);max-height:84vh;background:var(--surface);box-shadow:0 24px 70px rgba(40,32,15,.28)}
dialog::backdrop{background:rgba(30,25,15,.42)}
dialog[open]{animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
dialog form,dialog>div{padding:22px 24px}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.eyebrow{font-size:11px;color:var(--accent);letter-spacing:.14em;font-weight:500}
dialog label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:12px;letter-spacing:.05em}
dialog input,dialog textarea{
  display:block;width:100%;margin-top:5px;padding:9px 12px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:#fff;font-size:14px;
}
dialog input:focus,dialog textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
dialog textarea{min-height:180px;resize:vertical;line-height:1.8}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#paragraph-text{
  max-height:180px;overflow-y:auto;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px;font-size:13px;line-height:1.9;margin-bottom:14px;color:var(--ink-2);
}
#result-dialog{width:min(640px,94vw)}
#results{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-height:56vh;overflow-y:auto;padding:4px 2px}
#results>div{display:flex;flex-direction:column;gap:6px}
#results img{width:100%;border-radius:4px;border:1px solid var(--line);background:#fff}
#results .outline{font-size:12px;padding:6px}
.dialog-list{margin-top:12px;max-height:50vh;overflow-y:auto}
#drafts-dialog .primary.wide{margin-bottom:4px}

/* Toast */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#f5f3ed;font-size:13px;letter-spacing:.04em;
  padding:10px 20px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:100;max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#sheet-backdrop{position:fixed;inset:0;background:rgba(30,25,15,.4);z-index:40}
.only-mobile{display:none!important}
.exporting{pointer-events:none}
.exporting::after{content:"";position:fixed;inset:0;background:rgba(255,253,248,.5);z-index:90}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d9d3c3;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#c6bfa9}
::-webkit-scrollbar-track{background:transparent}

/* ── 移动端 ── */
@media (max-width:900px){
  .only-mobile{display:inline-flex!important}
  .doc-info{display:none}
  .topbar{padding:0 14px}
  .shell{position:relative}
  .drafts{
    position:fixed;inset:56px 0 0 0;width:auto;z-index:50;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 20px 60px rgba(40,32,15,.25);
  }
  .drafts.open{transform:none}
  .settings{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:72vh;
    z-index:50;border-left:none;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;box-shadow:0 -12px 50px rgba(40,32,15,.2);
    transform:translateY(102%);transition:transform .22s ease;
  }
  .settings.open{transform:none}
  .sheet-close{display:inline-flex}
  .paper-stage{padding:14px 12px 30px}
}
@media (min-width:901px){.sheet-close{display:none}}
@media (max-width:560px){
  .brand-text small{display:none}
  .saved-tag{display:none}
  .primary{padding:8px 13px}
  #editor{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  #editor form{height:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
  #editor textarea{flex:1;min-height:0}
  #editor .body-label{flex:1;display:flex;flex-direction:column;min-height:0}
  #editor .muted{flex-shrink:0}
  #editor .dialog-actions{margin-top:auto;flex-shrink:0}
}

/* 印刷开本 */
.print-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.num-field output{font-size:12px;color:var(--ink-3)}
.num-field input{text-align:center}

#paragraph-edit{min-height:90px;font-size:14px}

.para-ops{display:flex;gap:10px;margin:12px 0 4px}
.para-ops .outline{flex:1;padding:9px 0;font-size:13px}
.outline.danger{color:#b3372a!important;border-color:#b3372a!important}

#paragraph-dialog{max-height:88dvh;overflow-y:auto}
#paragraph-dialog .segmented{display:flex;width:100%}
#paragraph-dialog .segmented button{flex:1;padding:8px 0;font-size:13px}
#paragraph-dialog .para-ops{margin:14px 0 2px}