:root{
  --header-h:56px;
  --rail-w:56px;
  --panel-w:290px;
  --status-h:30px;
  --bg:#f5f5f2;
  --panel:#ffffff;
  --canvas:#e8e8e4;
  --canvas-deep:#dededa;
  --line:#e8e8e3;
  --line-2:#dcdcd6;
  --ink:#232321;
  --text:#353533;
  --muted:#77756f;
  --faint:#9b9993;
  --ui-accent:#3c574c;
  --danger:#a43e34;
  --font-ui:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",Arial,sans-serif;
  --font-serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif;
  --shadow-pop:0 14px 40px -18px rgba(28,28,26,.35),0 2px 8px rgba(28,28,26,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:13px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
[hidden]{display:none!important}
::selection{background:rgba(60,87,76,.18)}
:focus-visible{outline:2px solid rgba(60,87,76,.55);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.app{height:100%;display:flex;flex-direction:column;min-height:0}

/* ============ Top bar ============ */
.topbar{
  flex:0 0 var(--header-h);height:var(--header-h);display:flex;align-items:center;gap:20px;
  padding:0 16px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:30;
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:150px}
.brand-mark{
  width:29px;height:29px;display:grid;place-items:center;border-radius:6px;
  background:var(--ink);color:#fff;font-family:var(--font-serif);font-size:16px;font-weight:600;line-height:1;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:14px;font-weight:600;letter-spacing:.03em}
.brand-text small{margin-top:2px;font-size:10px;color:var(--faint);letter-spacing:.12em}
.doc-title{flex:1 1 auto;min-width:0;max-width:420px;display:flex}
.doc-title input{
  width:100%;height:30px;border:1px solid transparent;background:transparent;border-radius:4px;
  padding:0 7px;font-size:13px;color:var(--text);min-width:0;
}
.doc-title input:hover{border-color:var(--line-2)}
.doc-title input:focus{background:#fff;border-color:#bdbdb5;outline:none}
.save-state{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--line);
  border-radius:999px;font-size:11px;color:var(--muted);white-space:nowrap;background:#fbfbf9;flex:0 0 auto;
}
.save-state .dot{width:5px;height:5px;border-radius:50%;background:#5f8a70;transition:background .2s}
.save-state.is-saving .dot{background:#c19a4f;animation:pulse 1s ease infinite}
.save-state.is-error{color:var(--danger);border-color:#e6cfcb;background:#fdf7f6}
.save-state.is-error .dot{background:var(--danger);animation:none}
@keyframes pulse{50%{opacity:.25}}
.page-badge{padding-left:7px;margin-left:2px;border-left:1px solid var(--line-2);color:var(--muted);font-variant-numeric:tabular-nums}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:5px;background:#fff;font-size:12px;color:var(--text);
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.btn:hover{background:#f7f7f3;border-color:#c9c9c1}
.btn-ghost{background:#fff}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:#3a3a36;border-color:#3a3a36}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#8e342b;border-color:#8e342b}
.btn svg{width:14px;height:14px}
.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 7px);width:178px;padding:5px;background:#fff;
  border:1px solid var(--line-2);border-radius:7px;box-shadow:var(--shadow-pop);z-index:60;
}
.menu button{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 9px;border-radius:4px;font-size:12px;text-align:left}
.menu button:hover{background:#f4f4f0}
.menu button svg{width:14px;height:14px;color:var(--muted)}
.menu button.danger{color:var(--danger)}
.menu button.danger svg{color:var(--danger)}
.menu-sep{display:block;height:1px;background:var(--line);margin:4px 2px}

/* ============ Workbench ============ */
.workbench{
  flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:var(--rail-w) var(--panel-w) minmax(0,1fr);
}
.rail{
  min-height:0;padding:10px 5px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;gap:3px;z-index:4;
}
.rail-btn{
  height:54px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#78766f;font-size:10px;letter-spacing:.03em;transition:background .15s,color .15s;position:relative;
}
.rail-btn svg{width:18px;height:18px;stroke-width:1.55}
.rail-btn:hover{background:#f5f5f1;color:#333}
.rail-btn.is-active{background:#f1f1ec;color:var(--ink);font-weight:500}
.rail-btn.is-active::before{content:"";position:absolute;left:-5px;top:15px;bottom:15px;width:2px;background:var(--ink);border-radius:0 2px 2px 0}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-spacer{flex:1 1 auto}
.rail-undo{height:46px}

.content-panel{
  min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff;
  border-right:1px solid var(--line);z-index:3;
}
.panel-head{padding:18px 16px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:0 0 auto}
.panel-head h1{margin:0;font-size:14px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.panel-head h1 em{
  font-style:normal;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:10px;
  background:#f0f0eb;color:var(--muted);font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;
}
.panel-head p{margin:5px 0 0;font-size:10.5px;color:var(--faint);letter-spacing:.01em}
.panel-close{display:none;width:30px;height:30px;border-radius:4px;font-size:19px;line-height:1;color:var(--muted)}
.panel-close:hover{background:#f3f3ef}
.module-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:#d8d8d1 transparent}
.module-list::-webkit-scrollbar{width:8px}
.module-list::-webkit-scrollbar-thumb{background:#deded7;border:2px solid #fff;border-radius:6px}
.module-row{
  width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;
  padding:8px 7px;border:1px solid transparent;border-radius:5px;text-align:left;cursor:pointer;position:relative;
}
.module-row:hover{background:#f7f7f3}
.module-row.is-current{background:#f2f2ed;border-color:#e7e7e0}
.module-row.is-hidden .m-icon,.module-row.is-hidden .m-text{opacity:.46}
.m-icon{width:22px;height:22px;display:grid;place-items:center;color:#7a786f}
.m-icon svg{width:15px;height:15px;stroke-width:1.5}
.m-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.m-title{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}
.m-sum{font-size:10.5px;line-height:1.3;color:#76736b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-row.is-current .m-title{font-weight:500}
.m-actions{display:flex;align-items:center;gap:1px;opacity:0;transition:opacity .12s}
.module-row:hover .m-actions,.module-row:focus-within .m-actions{opacity:1}
.m-actions.is-visible{opacity:1}
.m-act{
  width:23px;height:23px;display:grid;place-items:center;border-radius:3px;color:#8e8b83;
}
.m-act:hover{background:#e9e9e2;color:#333}
.m-act svg{width:13px;height:13px}
.m-act.is-eye{opacity:.75}
.panel-foot{flex:0 0 auto;padding:10px 12px 12px;border-top:1px solid var(--line);background:#fff}
.add-module{
  width:100%;height:34px;border:1px dashed #cfcfc7;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:#6f6d66;background:#fff;
}
.add-module:hover{border-color:#9c9a92;background:#fafaf7;color:#333}
.add-module svg{width:13px;height:13px}
.panel-foot p{margin:8px 0 0;text-align:center;font-size:9.5px;letter-spacing:.03em;color:#8a877f}

/* ============ Stage ============ */
.stage{min-width:0;min-height:0;position:relative;background:var(--canvas);overflow:hidden}
.canvas-toolbar{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:10;
  display:flex;align-items:center;gap:2px;padding:3px;background:rgba(255,255,255,.97);
  border:1px solid #d9d9d3;border-radius:8px;box-shadow:0 3px 12px rgba(35,35,32,.08);max-width:calc(100% - 20px);
}
.tb-group{display:flex;align-items:center;gap:1px}
.tb-icon{
  width:29px;height:28px;display:grid;place-items:center;border-radius:4px;color:#55534d;
}
.tb-icon:hover:not(:disabled){background:#f1f1ec;color:#222}
.tb-icon:disabled{opacity:.3;cursor:default}
.tb-icon svg{width:15px;height:15px}
.tb-divider{width:1px;height:16px;background:#e5e5df;margin:0 4px;flex:0 0 auto}
.mode-switch{display:flex;background:#f3f3ee;border-radius:4px;padding:2px;gap:1px}
.mode-switch button{height:24px;padding:0 9px;border-radius:3px;font-size:11px;color:#77746d;white-space:nowrap}
.mode-switch button[aria-pressed="true"]{background:#fff;color:#262624;box-shadow:0 1px 2px rgba(0,0,0,.1);font-weight:500}
.zoom-group{gap:0}
.zoom-label{height:26px;min-width:40px;padding:0 3px;font-size:10.5px;color:#55534d;font-variant-numeric:tabular-nums;border-radius:3px}
.zoom-label:hover{background:#f1f1ec}
.tb-text{
  height:28px;display:flex;align-items:center;gap:5px;padding:0 8px;border-radius:4px;font-size:11px;color:#55534d;white-space:nowrap;
}
.tb-text:hover{background:#f1f1ec;color:#222}
.tb-text svg{width:14px;height:14px}
.tb-text.is-on{background:#eeeee8;color:#222}
.canvas-scroll{
  position:absolute;inset:0;overflow:auto;padding:56px 30px 0;
  scrollbar-width:thin;scrollbar-color:#cfcfc8 transparent;
}
.canvas-scroll::-webkit-scrollbar{width:10px;height:10px}
.canvas-scroll::-webkit-scrollbar-thumb{background:#d2d2ca;border:3px solid var(--canvas);border-radius:6px}
.canvas-note{
  display:flex;align-items:center;justify-content:center;gap:7px;color:#7d7a72;font-size:10px;
  letter-spacing:.03em;margin:0 auto 12px;white-space:nowrap;user-select:none;
}
.canvas-note i{width:2px;height:2px;border-radius:50%;background:#b5b2a9}
.canvas-note span:first-child{color:#6d6a63}
.paper-shell{margin:0 auto;position:relative;transition:width .15s ease,height .15s ease}
.paper{
  transform-origin:top left;position:relative;overflow:visible;
  box-shadow:0 1px 2px rgba(30,30,27,.12),0 18px 48px -22px rgba(30,30,27,.38);
}
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(to bottom,transparent 0 1122px,rgba(40,40,36,.12) 1122px 1123px);
}
.paper.is-thumb{box-shadow:none;transform:none}
.paper.is-thumb::before{display:none}
.canvas-bottom-space{height:80px}

/* ============ Status bar ============ */
.statusbar{
  flex:0 0 var(--status-h);height:var(--status-h);background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 14px;font-size:10px;color:#7d7a72;
}
.status-local{display:flex;align-items:center;gap:6px;white-space:nowrap}
.status-local i{width:5px;height:5px;border-radius:50%;background:#6d927b}
.status-note{flex:1 1 auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.status-link{font-size:10px;color:#7d7a72;border-bottom:1px solid #dcdcd5;padding-bottom:1px}
.status-link:hover{color:#222;border-color:#999}

/* ============ Dialogs & forms ============ */
.app-dialog{
  border:1px solid #d7d7cf;border-radius:10px;padding:0;background:#fff;color:var(--text);
  box-shadow:0 26px 80px -24px rgba(22,22,20,.5);max-width:calc(100vw - 40px);max-height:88vh;
}
.app-dialog::backdrop{background:rgba(32,32,29,.38)}
.dialog-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--line);
}
.dialog-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em}
.dialog-head p{margin:4px 0 0;font-size:10.5px;color:var(--faint)}
.dialog-close{width:30px;height:30px;display:grid;place-items:center;font-size:20px;line-height:1;color:#88857d;border-radius:4px;margin-top:-3px}
.dialog-close:hover{background:#f3f3ee;color:#222}
.dialog-body{overflow-y:auto;padding:18px 20px;scrollbar-width:thin;scrollbar-color:#d8d8d1 transparent}
.dialog-body::-webkit-scrollbar{width:9px}
.dialog-body::-webkit-scrollbar-thumb{background:#deded7;border:2px solid #fff;border-radius:6px}
.dialog-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fcfcfa;
  border-radius:0 0 10px 10px;
}
.dialog-hint{flex:1 1 auto;font-size:10px;color:#85827a;min-width:0}
.template-dialog{width:1000px;height:auto}
.template-filters{display:flex;gap:4px;padding:12px 20px 0;flex-wrap:wrap}
.template-filters button{
  height:28px;padding:0 11px;border-radius:999px;font-size:11px;color:#6f6c65;border:1px solid transparent;
}
.template-filters button span{color:#8a877f;margin-left:2px;font-size:10px}
.template-filters button:hover{background:#f4f4ef}
.template-filters button[aria-pressed="true"]{background:#efefe9;color:#282826;font-weight:500}
.template-filters button[aria-pressed="true"] span{color:#77746d}
.template-body{padding-top:14px}
.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.tpl-card{display:flex;flex-direction:column;gap:7px;text-align:left;border-radius:6px;position:relative}
.tpl-thumb{
  width:100%;aspect-ratio:210/297;overflow:hidden;background:#f0f0eb;border:1px solid #deded7;border-radius:4px;
  position:relative;transition:border-color .15s,box-shadow .15s;
}
.tpl-card:hover .tpl-thumb{border-color:#aaa79f;box-shadow:0 5px 16px -8px rgba(0,0,0,.28)}
.tpl-card[aria-pressed="true"] .tpl-thumb{border-color:#3a3a35;box-shadow:0 0 0 1px #3a3a35}
.tpl-card[aria-pressed="true"] .tpl-thumb::after{
  content:"当前";position:absolute;right:5px;top:5px;z-index:5;background:#232321;color:#fff;font-size:9px;
  padding:2px 5px;border-radius:2px;letter-spacing:.05em;
}
.tpl-thumb{display:block}
.tpl-thumb-inner{display:block;transform-origin:top left;pointer-events:none}
.tpl-meta{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:0 1px}
.tpl-meta b{font-size:12px;font-weight:500}
.tpl-meta span{font-size:9.5px;color:#7f7c74}
.style-dialog{width:460px}
.style-body{padding:0 20px 4px}
.style-block{padding:16px 0;border-bottom:1px solid var(--line)}
.style-block:last-child{border-bottom:0}
.style-block h3{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.02em}
.style-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.style-block-head h3{margin:0}
.text-btn{font-size:10px;color:#88857d;border-bottom:1px solid #dddcd5;padding-bottom:1px}
.text-btn:hover{color:#222;border-color:#999}
.font-preview{
  border:1px solid var(--line);border-radius:5px;padding:12px 13px;background:#fbfbf8;display:flex;flex-direction:column;gap:3px;
}
.font-preview b{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:.04em}
.font-preview span{font-size:10.5px;color:#77756f;letter-spacing:.03em}
.field-label{font-size:10px;color:#77756f;margin:12px 0 6px}
.font-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.font-option{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#fff;text-align:left;
}
.font-option:hover{border-color:#bbb8af}
.font-option[aria-pressed="true"]{border-color:#54524b;background:#f7f7f2;box-shadow:inset 0 0 0 1px #54524b}
.font-option i{font-style:normal;font-size:15px;line-height:1;width:22px;text-align:center;flex:0 0 auto}
.font-option span{display:flex;flex-direction:column;min-width:0;gap:1px}
.font-option b{font-size:10.5px;font-weight:500}
.font-option small{font-size:8.5px;color:#8a877f;white-space:nowrap}
.field-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.field-row>label,.field-row>span{font-size:10.5px;color:#6f6c65;flex:0 0 auto}
.field-row select{
  flex:1 1 auto;height:30px;border:1px solid var(--line-2);border-radius:4px;background:#fff;font-size:11px;padding:0 7px;min-width:0;
}
.field-row input[type="text"]{
  flex:1 1 160px;height:31px;border:1px solid var(--line-2);border-radius:4px;padding:0 8px;font-size:11px;min-width:0;
}
.field-row input[type="text"]:focus,.field-row select:focus{border-color:#9d9a91;outline:none}
.custom-font-row{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px}
.custom-font-row small{grid-column:1/-1;font-size:9px;color:#8a877f;line-height:1.5}
.color-value{font-size:9.5px;color:#77756f;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:23px;height:23px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dddcd4;position:relative}
.swatch:hover{box-shadow:0 0 0 1px #8f8c84}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 1px #333,0 0 0 3px #fff inset}
.color-row{margin-top:12px}
.color-row input[type="color"]{width:30px;height:28px;border:1px solid var(--line-2);border-radius:4px;background:#fff;padding:2px;cursor:pointer}
.range-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:10px;margin-top:9px}
.range-row>span{font-size:10.5px;color:#6f6c65}
.range-row output{font-size:10px;color:#6f6c64;text-align:right;font-variant-numeric:tabular-nums}
input[type="range"]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;margin:0;min-width:0}
input[type="range"]::-webkit-slider-runnable-track{height:2px;background:#dcdbd4;border-radius:2px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid #5c5a53;margin-top:-5px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
input[type="range"]::-moz-range-track{height:2px;background:#dcdbd4}
input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid #5c5a53}
.current-template{display:flex;align-items:center;justify-content:space-between;gap:12px}
.current-template h3{margin:0 0 3px}
.current-template p{margin:0;font-size:10px;color:#7d7a72}
.add-dialog{width:500px}
.add-block{padding:2px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.add-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:2px}
.add-block h3{margin:0 0 5px;font-size:12px;font-weight:600}
.add-block>p{margin:0 0 10px;font-size:10.5px;line-height:1.6}
.add-form{display:flex;gap:7px}
.add-form input{flex:1 1 auto;height:32px;border:1px solid var(--line-2);border-radius:4px;padding:0 9px;font-size:11.5px;min-width:0}
.add-form input:focus{border-color:#9d9a91;outline:none}
.optional-list,.trash-list{display:flex;flex-direction:column;gap:4px}
.opt-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:4px;font-size:11px;background:#fff}
.opt-row .m-icon{width:18px;height:18px}
.opt-row .m-icon svg{width:13px;height:13px}
.opt-row em{font-style:normal;color:#8a877f;font-size:9.5px;margin-left:auto}
.opt-row button{margin-left:auto}
.opt-row .btn{height:24px;font-size:10px;padding:0 9px}
.empty-note{padding:8px 0;font-size:10.5px;color:#7f7c74}
.confirm-dialog{width:420px}
.confirm-dialog .dialog-body p{margin:0;font-size:12px;line-height:1.8;color:#55534d}
.help-dialog{width:520px}
.shortcut-list{margin:0;display:flex;flex-direction:column;gap:0}
.shortcut-list>div{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.shortcut-list>div:last-child{border-bottom:0}
.shortcut-list dt{font-size:10.5px;color:#333;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}
.shortcut-list dd{margin:0;font-size:10.5px;color:#7c7971;line-height:1.5}

/* export */
.export-dialog{width:480px}
.export-summary{display:flex;align-items:baseline;gap:8px;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.export-summary b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.export-summary span{font-size:10px;color:#77756f}
.check-list{list-style:none;margin:0;padding:6px 0}
.check-list li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:11px;line-height:1.55}
.check-list .c-icon{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.check-list .c-icon svg{width:10px;height:10px;stroke-width:2}
.check-list .ok .c-icon{background:#edf3ee;color:#4d745c}
.check-list .warn .c-icon{background:#faf3e6;color:#9a7227}
.check-list .bad .c-icon{background:#fbeeec;color:#a43e34}
.check-list li b{font-weight:500;color:#3c3a35}
.check-list li span{color:#77756f}
.export-note{margin:10px 0 0;padding:10px 11px;background:#f7f7f2;border-radius:4px;font-size:9.8px;line-height:1.75;color:#6f6c64}
.export-foot{justify-content:flex-start}
.export-spacer{flex:1 1 auto}

/* toast */
.toast-region{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:12px;min-height:36px;max-width:min(460px,calc(100vw - 32px));padding:8px 13px;
  background:#262624;color:#f3f2ee;border-radius:5px;box-shadow:0 8px 28px -8px rgba(0,0,0,.45);font-size:11px;line-height:1.5;
  pointer-events:auto;animation:toastIn .18s ease both;
}
.toast.is-error{background:#7e332b}
.toast.is-info{background:#3a3a36}
.toast button{color:#fff;text-decoration:underline;text-underline-offset:2px;font-size:11px;white-space:nowrap}
.toast .toast-close{text-decoration:none;opacity:.6;font-size:14px;line-height:1;padding:0 1px}
.toast.is-out{animation:toastOut .16s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(4px)}}

/* drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(28,28,25,.34);z-index:110}
body.drawer-shown .content-panel{
  position:fixed;left:0;top:0;bottom:0;width:min(86vw,340px);z-index:120;background:#fff;
  border-right:1px solid #d8d8d0;box-shadow:16px 0 46px -24px rgba(0,0,0,.35);
}

/* preview mode */
body.is-preview .content-panel{display:none}
body.is-preview .workbench{grid-template-columns:var(--rail-w) minmax(0,1fr)}
body.is-preview .edit-only{display:none!important}
body.is-preview [contenteditable]{cursor:default}
body.is-preview .paper [contenteditable]:hover,body.is-preview .paper [contenteditable]:focus{background:transparent;outline:none}
body.is-preview .mode-switch button[aria-pressed="false"]:hover{background:#fff}
body.is-preview .rail-btn[data-rail="content"]{opacity:.45}
body.is-preview .canvas-note{color:#7c7971}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============ Responsive ============ */
@media (max-width:1180px){
  :root{--panel-w:268px}
  .brand{min-width:132px}
  .template-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
}
@media (max-width:980px){
  :root{--panel-w:0px}
  .workbench{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .content-panel{display:none}
  body.drawer-shown .content-panel{display:flex}
  .panel-close{display:grid}
  body.drawer-shown{overflow:hidden}
  .brand{min-width:0}
  .brand-text small{display:none}
  .doc-title{max-width:none}
  .canvas-toolbar{top:8px}
  .template-dialog{width:calc(100vw - 28px)}
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toast-region{bottom:38px}
}
@media (max-width:720px){
  :root{--header-h:52px;--rail-w:52px;--status-h:28px}
  .topbar{gap:8px;padding:0 10px}
  .brand{gap:7px}
  .brand-mark{width:27px;height:27px;font-size:15px}
  .brand-text{display:none}
  .doc-title input{font-size:12.5px;padding:0 4px}
  .save-state{height:24px;padding:0 7px;font-size:10px}
  .page-badge{display:none}
  .top-actions{gap:5px}
  .btn{height:30px;padding:0 10px;font-size:11.5px}
  .menu{width:168px}
  .rail{padding:8px 3px}
  .rail-btn{height:50px;font-size:9.5px}
  .rail-btn svg{width:17px;height:17px}
  .rail-btn.is-active::before{left:-3px;top:12px;bottom:12px}
  .rail-undo{height:42px}
  .canvas-scroll{padding:54px 12px 0}
  .canvas-toolbar{top:7px;max-width:calc(100% - 12px);flex-wrap:wrap;justify-content:center;gap:1px;padding:3px 4px;border-radius:7px}
  .tb-divider{margin:0 2px}
  .tb-text{padding:0 6px;font-size:10.5px}
  .mode-switch button{padding:0 7px;font-size:10.5px}
  .tb-icon{width:27px;height:27px}
  .zoom-label{min-width:34px;font-size:10px}
  .statusbar{padding:0 10px;gap:8px;font-size:9px}
  .status-note{display:none}
  .status-link{margin-left:auto}
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .template-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
  .template-dialog .dialog-foot{border-radius:0}
  .template-filters{padding:10px 14px 0;gap:2px}
  .template-filters button{padding:0 9px}
  .dialog-head{padding:14px 14px 11px}
  .dialog-body{padding:14px}
  .dialog-foot{padding:10px 14px}
  .style-dialog,.add-dialog,.export-dialog,.confirm-dialog,.help-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
  .app-dialog{max-height:100dvh}
  .style-dialog .dialog-body{flex:1 1 auto}
  .style-dialog{display:none;flex-direction:column}
  .style-dialog[open]{display:flex}
  .style-dialog .dialog-body{overflow-y:auto;padding:0 14px}
  .style-dialog .dialog-foot{border-radius:0}
  .font-grid{grid-template-columns:repeat(2,1fr)}
  .shortcut-list>div{grid-template-columns:1fr;gap:2px}
  .toast-region{bottom:36px}
  .export-foot{flex-wrap:wrap;gap:6px}
  .export-spacer{display:none}
  .export-foot .btn-dark{flex:1 1 100%;order:3}
}
@media (max-width:430px){
  .doc-title{max-width:120px}
  .top-actions .btn-ghost{font-size:0;width:32px;padding:0}
  .top-actions .btn-ghost::after{content:"⋯";font-size:16px;line-height:1}
  .canvas-note{display:none}
  .canvas-scroll{padding-top:52px}
  .toolbar .tb-text svg{display:none}
  .brand-mark{width:26px;height:26px;font-size:14px}
  .style-body .font-option small{display:none}
}
@media (max-height:620px) and (min-width:721px){
  .rail-btn{height:44px}
  .rail-btn span{display:none}
  .rail-undo{height:40px}
  .panel-head{padding:12px 14px 8px}
  .panel-head p{display:none}
  .canvas-scroll{padding-top:50px}
  .canvas-toolbar{top:6px}
}
@media (orientation:landscape) and (max-height:500px){
  .statusbar{display:none}
  .topbar{--header-h:46px;height:46px}
  .rail-btn{height:40px}
  .canvas-scroll{padding-top:50px}
  .canvas-toolbar{transform:translateX(-50%) scale(.94);transform-origin:top center}
}

/* ============ Print ============ */
.print-root{display:none}
@media print{
  @page{size:A4;margin:8mm 0}
  html,body{width:210mm;height:auto;overflow:visible;background:#fff}
  body.printing .app,
  body.printing .app-dialog,
  body.printing .toast-region,
  body.printing .drawer-backdrop,
  body.printing .print-root[aria-hidden="true"]{display:none!important}
  body.printing .print-root{display:block!important}
  body.printing{background:#fff}
  .print-root .paper{
    width:222mm!important;min-height:297mm;box-shadow:none!important;margin:0!important;
    border-radius:0!important;transform:none!important;zoom:.946;
  }
  .print-root .paper::before{display:none!important}
  .print-root .edit-only{display:none!important}
  .print-root .p-item,.print-root .p-sec{break-inside:avoid-page}
  .print-root .p-sec-head{break-after:avoid-page}
  .print-root [contenteditable]{outline:none!important}
  .print-root a{text-decoration:none;color:inherit}
}

/* paper shell absolute scaling */
.paper-shell>.paper{position:absolute;top:0;left:0}
.paper.is-thumb .edit-only{display:none!important}
.paper.is-thumb [data-edit]{outline:none!important}
.paper.is-thumb .p-photo{cursor:default}
.tpl-thumb-inner .paper{position:static;transform:none!important}
@media (hover:none){
  .m-actions{opacity:1}
  .p-actions,.p-tag-del,.p-row-del{opacity:1!important}
  .p-tag-del{display:grid}
}

/* module list hit area */
.module-row{display:flex;align-items:center;gap:1px;padding:2px 3px}
.m-hit{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;padding:6px 4px;border-radius:4px;text-align:left}
.m-hit:hover{background:transparent}
.m-actions{flex:0 0 auto;display:flex;align-items:center;gap:0}
.m-act:disabled{opacity:.18;cursor:default}
.m-act:disabled:hover{background:transparent}
body.is-measuring .paper .edit-only{display:none!important}

/* 可见焦点：输入控件同样保留清晰的焦点环 */
.field-row input:focus-visible,
.field-row select:focus-visible,
.add-form input:focus-visible,
.doc-title input:focus-visible,
.range-row input:focus-visible{
  outline:2px solid rgba(60,87,76,.55)!important;outline-offset:1px;
}
.doc-title input:focus-visible{border-color:transparent}

/* 窄屏触控尺寸 */
@media (max-width:980px){
  .m-act{width:34px;height:34px}
  .m-act svg{width:15px;height:15px}
  .m-hit{padding:8px 4px}
  .panel-close{width:34px;height:34px}
}
@media (max-width:720px){
  .rail-btn{height:54px}
  .tb-icon{width:32px;height:32px}
  .mode-switch button{height:30px}
  .zoom-label{height:30px;min-width:38px}
  .tb-text{height:30px}
}

/* 对话框统一为可收缩的纵向布局：内容滚动，头尾固定 */
.app-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.app-dialog>.dialog-head,.app-dialog>.dialog-foot{flex:0 0 auto}
.app-dialog>.dialog-body,.app-dialog>.template-body{flex:1 1 auto;min-height:0;overflow-y:auto}