:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#243348;background:#f5f6f8;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}.topbar{height:84px;background:#fff;border-bottom:1px solid #e4e8ee;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#233e60;color:#fff;font-size:18px;font-weight:700}h1{font-size:21px;letter-spacing:-.5px;margin:0}.brand p{margin:3px 0 0;font-size:12px;color:#758197}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}.primary{border:0;background:#233e60;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;display:flex;gap:22px;align-items:center}.primary:hover:not(:disabled){background:#34577f}main{max-width:1800px;margin:auto;padding:22px 32px 16px}.toolbar{display:flex;gap:15px;flex-wrap:wrap;align-items:end;padding:17px 20px;margin-bottom:18px;background:#fff;border:1px solid #e1e6ed;border-radius:10px}.toolbar label,.toolbar-field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:110px;color:#677389;font-size:12px}select,input{width:100%;height:36px;background:#fff;border:1px solid #d9e0e9;border-radius:6px;padding:0 9px;color:#26394f;font-size:13px}input:focus,select:focus,button:focus-visible,textarea:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}.workspace{display:grid;grid-template-columns:minmax(300px,1fr) minmax(380px,1.2fr);gap:20px;height:calc(100vh - 280px);min-height:440px}.editor-panel,.preview-panel{border:1px solid #dfe5ed;border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-width:0}.panel-heading{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e7ebf0}.panel-heading h2{font-size:13px;margin:0;font-weight:600}.panel-heading span{color:#8290a2;font-size:11px}textarea{resize:none;width:100%;flex:1;min-height:0;border:0;padding:21px 22px;line-height:1.8;color:#35445a;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;font-size:13px;tab-size:2}textarea:focus-visible{outline-offset:-2px}.editor-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0f4;padding:9px 18px;font-size:11px;color:#8b96a7}.text-button{border:0;background:transparent;color:#42648b;font-size:12px;padding:3px}.preview-surface{position:relative;flex:1;min-height:0;background:#e9edf2}iframe{width:100%;height:100%;border:0;display:block;background:#e9edf2}#empty-preview{position:absolute;inset:0;display:grid;place-items:center;color:#8895a5;font-size:13px;padding:25px;text-align:center;pointer-events:none}#empty-preview[hidden]{display:none}.preview-footer{display:flex;align-items:center;gap:12px;border-top:1px solid #edf0f4;padding:9px 18px;font-size:11px;color:#8b96a7}.preview-footer>span{flex:0 0 auto}.preview-footer #status{margin:0 0 0 auto;color:#49627d;font-size:12px;text-align:right;min-width:0}.preview-footer #status[data-error="true"]{color:#b13d3d}.privacy{font-size:11px;line-height:1.6;margin:8px 0 0;color:#8994a5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:900px){.topbar{padding:0 20px}main{padding:18px 20px}.toolbar{gap:12px}.workspace{grid-template-columns:1fr;height:auto;min-height:0}.editor-panel{height:420px}.preview-panel{height:650px}.preview-footer{align-items:flex-start;flex-direction:column;gap:5px}.toolbar label{flex-basis:25%}}
@media(max-width:480px){.topbar{height:74px;padding:0 14px}.brand p{font-size:10px}.primary{padding:11px 13px;gap:10px}main{padding:14px}.toolbar{padding:13px;gap:11px}.toolbar label,.toolbar-field{flex-basis:40%;min-width:100px}.workspace{gap:14px}.editor-panel{height:370px}.preview-panel{height:570px}}


.brand-icon{text-decoration:none}
.brand-icon:hover{background:#34577f}
.brand-icon:focus-visible{outline:2px solid #6f93bc;outline-offset:3px}

/* ---------- 选项策略：隐藏不可用控件 ---------- */
.toolbar label[hidden]{display:none!important}
.topbar-actions{display:flex;align-items:center;gap:11.2px}
.ghost-link{color:#42648b;font-size:13px;font-weight:600;text-decoration:none;padding:8px 10px;border-radius:8px}
.ghost-link:hover{background:#eef2f8;color:#233e60}
.ghost-link:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
a.text-button{text-decoration:none;color:#42648b;font-size:12px;padding:3px;border-radius:4px}
a.text-button:hover{color:#233e60;text-decoration:underline}
a.text-button:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
@media(max-width:600px){.topbar-actions{gap:5.6px}.ghost-link{padding:8px 6px}}


/* ---------- 顶栏 / 页脚链接按钮外观（示例库） ---------- */
.button-link{display:inline-flex;align-items:center;gap:6px;color:#33465e;font-size:13px;font-weight:600;text-decoration:none;padding:9px 14px;border:1px solid #d9e0e9;border-radius:8px;background:#fff}
.button-link:hover{background:#eef2f8;border-color:#b7c6da;color:#233e60}
.button-link:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
.button-link--small{padding:4px 10px;font-size:12px;font-weight:500}

/* ---------- 面板标题栏动作区（全屏 / 下载） ---------- */
.panel-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.panel-heading .panel-actions>span{color:#8290a2;font-size:11px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid #dbe2ec;border-radius:7px;background:#fff;color:#42648b;line-height:0}
.icon-button:hover:not(:disabled){background:#eef2f8;border-color:#b7c6da;color:#233e60}
.icon-button:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
.btn-icon{width:16px;height:16px;display:block}

/* 下载：与全屏按钮一致的描边图标按钮（30px）；加载态只动状态属性，不破坏图标 */
.panel-download{position:relative}
.panel-download .btn-icon{width:16px;height:16px}
.panel-download[data-state="loading"] .btn-icon{visibility:hidden}
.panel-download[data-state="loading"]::after{content:"";position:absolute;left:calc(50% - 7.5px);top:50%;width:15px;height:15px;margin-top:-7.5px;border:2px solid rgba(66,100,139,.3);border-top-color:#42648b;border-radius:50%;animation:md-download-spin .8s linear infinite}
@keyframes md-download-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.panel-download[data-state="loading"]::after{animation-duration:2s}}
@media(max-width:600px){.panel-heading{padding:0 12px}.icon-button{width:28px;height:28px}}


.draft-warning { margin: 10px 0; padding: 10px 14px; border: 1px solid #d6a640; border-radius: 8px; background: #fff8e6; color: #694700; font-size: 13px; }

/* ---------- 范围控件（字号 / 边距 / 行距）：紧凑按钮 + 调整浮层 ----------
 * 触发器与主题 / 目录下拉框同高同宽；浮层绝对定位（不撑高工具条），
 * 窄屏改右对齐并限制宽度，保证不横向溢出。浮层样式只由本块控制。 */
.toolbar-field[hidden]{display:none!important}
.range-pop{position:relative;width:100%}
.range-trigger{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:36px;padding:0 9px;background:#fff;border:1px solid #d9e0e9;border-radius:6px;color:#26394f;font-size:13px;list-style:none;cursor:pointer}
.range-trigger::-webkit-details-marker{display:none}
.range-trigger::after{content:"▾";color:#8290a2;font-size:11px;line-height:1}
.range-trigger:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
.range-popover{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:max(260px,100%);max-width:calc(100vw - 24px);box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px;background:#fff;border:1px solid #d9e0e9;border-radius:10px;box-shadow:0 10px 30px rgba(36,51,72,.16)}
/* 直尺滑块（.ruler-control / .ruler-slider / .ruler-scale 为共享类，可供面板缩放等复用）：
 * 圆角灰轨道，保留 min/max 文字；thumb 中性灰且不填充进度。 */
.ruler-control{display:flex;align-items:center;gap:8px;width:100%}
.ruler-slider{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;width:auto;height:20px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;cursor:pointer}
.ruler-slider::-webkit-slider-runnable-track{height:2.8px;border-radius:1.4px;background:#cdd4de}
.ruler-slider::-moz-range-track{height:2.8px;border-radius:1.4px;background:#cdd4de}
.ruler-slider::-moz-range-progress{height:2.8px;border-radius:1.4px;background:#cdd4de}
.ruler-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:5.6px;height:16px;margin-top:-6.6px;border:0;border-radius:2.8px;background:#8a94a3}
.ruler-slider::-moz-range-thumb{width:5.6px;height:16px;border:0;border-radius:2.8px;background:#8a94a3}
.ruler-slider:focus{outline:none}
.ruler-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px #6f93bc}
.ruler-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px #6f93bc}
.ruler-scale{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:0;width:100%;height:10px;padding:0 4px;color:#9aa5b3;font-size:10px;line-height:1}
.ruler-label{position:absolute;bottom:0;font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.ruler-label--min{left:4px}
.ruler-label--max{left:calc(100% - 4px)}
.range-default{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:#8290a2;line-height:0;cursor:pointer}
.range-default:hover{background:#eef2f8;color:#42648b}
.range-default:focus-visible{outline:2px solid #6f93bc;outline-offset:2px}
.range-default-icon{width:15px;height:15px;display:block}
@media(max-width:600px){.range-popover{left:auto;right:0;width:min(300px,calc(100vw - 24px))}}

/* 标语独立居中；窄屏放在第二行，避让品牌和导航。 */
.topbar{position:relative}
.topbar-tagline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;color:#9aa5b3;font-size:11px;font-weight:400;letter-spacing:1px;white-space:nowrap;pointer-events:none}
@media(max-width:700px){.topbar{height:94px;padding-bottom:22px}.topbar-tagline{top:auto;bottom:8px;transform:translateX(-50%);font-size:10px;letter-spacing:.8px}}

.range-popover > .ruler-scale{width:calc(100% - 34px);margin-top:-12.5px}

/* 使用浏览器可定制的选择器，避免系统菜单的深色选中背景。 */
.toolbar select{color-scheme:light}
.toolbar select option{background:#fff;color:#26394f}
@supports (appearance:base-select){
  .toolbar select,.toolbar select::picker(select){appearance:base-select}
  .toolbar select{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .toolbar select::picker(select){margin-top:6px;padding:5px;background:#fff;color:#26394f;border:1px solid #d9e0e9;border-radius:10px;box-shadow:0 10px 30px rgba(36,51,72,.16)}
  .toolbar select option{min-height:32px;padding:7px 9px;border-radius:5px;font-size:13px}
  .toolbar select option:checked{background:#eef2f8;color:#26394f}
  .toolbar select option:hover,.toolbar select option:focus{background:#f2f6fb;color:#26394f;outline:none}
  .toolbar select option::checkmark{color:#6f93bc}
  .toolbar select::picker-icon{color:#8290a2}
}

.topbar-actions .button-link{width:76px;height:38px;justify-content:center;padding:0 10px}
.editor-footer,.preview-footer{font-size:11px;height:36px;min-height:36px;padding:3px 18px;gap:4px;flex-shrink:0;flex-direction:row;align-items:center}
.editor-footer math,.preview-footer math,.preview-footer #status{font-size:11px}
.editor-footer>span:not(#count),.preview-footer>span{min-width:0;overflow-x:auto}
#count{white-space:nowrap;flex-shrink:0}

/* 配置错误提示条：位于预览 iframe 之外、正文上方，不覆盖正文；每条错误带行号跳转按钮。 */
.config-errors{flex-shrink:0;max-height:38%;overflow:auto;background:#fdecec;border-bottom:1px solid #f3c6c6;color:#8f2f2f;padding:10px 18px}
.config-errors[hidden]{display:none}
.config-errors-title{margin:0 0 6px;font-size:12px;font-weight:600;color:#b13d3d}
.config-errors-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.config-errors-list li{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.5}
.config-error-jump{flex-shrink:0;border:1px solid #e0a3a3;background:#fff;color:#a83b3b;border-radius:5px;padding:1px 7px;font-size:11px;line-height:1.5}
.config-error-jump:hover{background:#fbe0e0}
.config-error-message{min-width:0;word-break:break-word}

.privacy button{border:0;background:none;padding:0;color:inherit;font:inherit;line-height:inherit;text-decoration:none}

.template-confirm{width:min(420px,calc(100vw - 40px));padding:24px;border:1px solid #dfe5ed;border-radius:12px;color:#26394f;background:#fff;box-shadow:0 18px 60px #233e6033}.template-confirm::backdrop{background:#233e6055}.template-confirm h2{margin:0 0 12px;font-size:16px}.template-confirm p{margin:0;font-size:14px;line-height:1.7;color:#677389}.template-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.template-confirm-actions button{padding:9px 16px;border-radius:7px;font-size:13px}.template-confirm-cancel{border:1px solid #d9e0e9;background:#fff;color:#42648b}.template-confirm-cancel:hover{background:#f3f6fa}

/* Preview actions wrap independently, like Markdown actions. */
.workspace{height:calc(100vh - 154px)}
.preview-toolbar{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 10px;margin:0;border:0;border-bottom:1px solid #e7ebf0;border-radius:0;background:#fbfcfe;overflow:visible;z-index:31}
.preview-toolbar .toolbar-field{flex:0 0 auto;min-width:0;display:block}
.preview-toolbar .range-pop{width:auto}
.preview-toolbar .range-trigger{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #dbe2ec;border-radius:6px;background:#fff;color:#33465e}
.preview-toolbar .range-trigger::after{display:none}
.preview-toolbar .range-trigger:hover:not(:disabled),.preview-toolbar .range-trigger:active:not(:disabled){border-color:#b7c6da;background:#f2f6fb}
.preview-option-icon{width:16px;height:16px;display:block}
.preview-toolbar .range-popover{left:0;right:auto;width:260px;gap:10px;padding:15px 12px 12px}
.preview-toolbar .option-label{display:flex;flex-direction:column;gap:8px;min-width:0;color:#677389;font-size:12px}
.preview-toolbar .ruler-control{position:relative}
.range-value{position:absolute;top:auto;bottom:calc(50% + 11px);line-height:1.1;transform:translateX(-50%);padding:1px 5px;border-radius:4px;background:#edf2f8;color:#42648b;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0}
.range-adjusting .range-value{opacity:1}
@media(max-width:900px){.workspace{height:auto}}

@media(max-width:600px){.preview-toolbar .range-trigger{width:28px;height:28px}}

.preview-toolbar .option-popover{width:max-content;min-width:0;max-width:calc(100vw - 24px);padding:5px;gap:2px}
.option-choice{position:relative;display:flex;align-items:center;box-sizing:border-box;width:100%;padding:3.5px 8px 3.5px calc(var(--panel-button, 28px)/2 - 11.5px);border:0;border-radius:5px;background:transparent;color:#33465e;font-size:12px;line-height:1.5;text-align:left;white-space:nowrap}
.option-choice:hover,.option-choice:focus-visible{background:#f2f6fb;outline:none}
.option-choice[aria-checked="true"]{background:#eef2f8;color:#233e60}
.option-choice::before{content:"✓";display:block;flex:0 0 11px;width:11px;margin-right:6px;visibility:hidden;color:#6f93bc;text-align:center}
.option-choice[aria-checked="true"]::before{visibility:visible}

.preview-toolbar select[hidden]{display:none!important}

.topbar-actions a.nav-square{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;min-width:42px;padding:0;border:0;border-radius:12px;background:#233e60;color:#fff;text-decoration:none;box-sizing:border-box}
.topbar-actions a.nav-square:hover{background:#34577f;color:#fff}
.topbar-actions a.nav-square:focus-visible{outline:2px solid #6f93bc;outline-offset:3px}
.nav-square svg{display:block;width:23px;height:23px}

.app-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px 16px;margin-top:8px;min-height:28px;font-size:11px;line-height:1.6;color:#8994a5}.app-bottom .privacy{margin:0;min-width:0}#app-version{justify-self:end;white-space:nowrap;font:inherit;color:inherit}#app-resource-status{min-height:28px;display:flex;align-items:center;justify-content:center}#app-resource-status button,#app-resource-status>span{display:inline-flex;align-items:center;gap:5px;font:inherit;line-height:inherit}#app-resource-status button{border:0;background:none;color:#42648b;padding:4px 6px;min-height:28px}#app-resource-status button:hover:not(:disabled){text-decoration:underline}.resource-icon{display:inline-grid;place-items:center;width:12px;flex:0 0 12px}#app-resource-status button:disabled{cursor:wait}
@media(max-width:700px){.app-bottom{grid-template-columns:minmax(0,1fr) auto;gap:0 12px}.app-bottom .privacy{grid-column:1/-1}#app-resource-status{grid-column:1;justify-content:flex-start}#app-version{grid-column:2}}