.preface-editor { container: preface-editor / inline-size; display:flex; flex-direction:column; height:100%; min-height:0; color:var(--color-text, #263445); background:var(--color-bg, #f5f7fa); font-family:"Noto Sans SC", sans-serif; font-size:14px; }
.preface-editor * { box-sizing:border-box; }
.pe-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--color-border, #dce3eb); }
.pe-header h2 { margin:0 0 5px; font-size:19px; }
.pe-header p,.pe-help { margin:0; font-size:12px; color:var(--color-text-secondary, #64748b); line-height:1.7; }
.pe-workspace { display:grid; grid-template-columns:minmax(300px, 1fr) minmax(320px, 1fr); flex:1; min-height:0; overflow:hidden; }
.pe-form { min-width:0; overflow:auto; padding:16px; }
.pe-fields { border:0; padding:0; margin:0; min-width:0; }
.pe-fields details { margin-bottom:12px; border:1px solid var(--color-border, #dce3eb); border-radius:10px; background:var(--color-surface, #fff); overflow:hidden; }
.pe-fields summary { cursor:pointer; padding:15px; font-weight:600; }
.pe-section-body { display:flex; flex-direction:column; gap:15px; padding:0 15px 16px; }
.pe-label { display:flex; flex-direction:column; gap:7px; font-size:13px; }
.preface-editor input:not([type=checkbox]),.preface-editor textarea { width:100%; border:1px solid var(--color-border, #cdd7e3); border-radius:6px; padding:9px 10px; background:var(--color-bg, #fff); color:inherit; font:inherit; line-height:1.65; }
.preface-editor textarea { resize:vertical; min-height:64px; }
.preface-editor input:focus,.preface-editor textarea:focus { outline:2px solid #668dcd; outline-offset:1px; }
.pe-list-heading { display:flex; justify-content:space-between; font-weight:600; font-size:13px; margin-bottom:10px; }
.pe-list-heading span { font-weight:400; color:var(--color-text-secondary, #64748b); }
.pe-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:6px; margin-bottom:13px; }
.pe-row-number { padding-top:10px; font-size:12px; color:var(--color-text-secondary, #64748b); }
.pe-row-actions { grid-column:2; display:flex; gap:6px; justify-content:flex-end; }
.preface-editor button { border:1px solid var(--color-border, #ccd7e4); background:var(--color-surface, #fff); color:inherit; border-radius:6px; padding:8px 12px; cursor:pointer; font:inherit; white-space:nowrap; }
.preface-editor button:hover:not(:disabled) { border-color:#7397c8; background:var(--color-bg, #eef4fc); }
.preface-editor button:disabled { opacity:.45; cursor:default; }
.pe-row-actions button { font-size:12px; padding:4px 10px; }
.pe-batch { margin-top:16px; padding-top:12px; border-top:1px dashed var(--color-border, #dce3eb); }
.pe-batch button { margin-top:8px; }
.pe-check { display:flex; gap:8px; align-items:flex-start; line-height:1.65; }
.pe-check input { margin-top:5px; }
.pe-preview { display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--color-border, #dce3eb); background:var(--color-surface, #fff); }
.pe-preview-label { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--color-border, #dce3eb); }
.pe-preview-label span { float:right; font-size:12px; color:var(--color-text-secondary, #64748b); }
.pe-preview iframe { border:0; width:100%; flex:1; min-height:0; }
.pe-footer { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--color-border, #dce3eb); background:var(--color-surface, #fff); }
.pe-status { flex:1; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.preface-editor .pe-primary { background:#245ca6; color:#fff; border-color:#245ca6; }
.preface-editor .pe-primary:hover:not(:disabled) { background:#1c4c8c; }
.pe-view-toggle { display:none; }
.preface-editor-error { margin:24px; padding:20px; border:1px solid #d89b45; border-radius:8px; }
@container preface-editor (max-width: 760px) {
  .pe-workspace { display:flex; }
  .pe-form { width:100%; }
  .pe-preview { display:none; width:100%; border-left:0; }
  .pe-view-toggle { display:block; }
  .pe-show-preview .pe-form { display:none; }
  .pe-show-preview .pe-preview { display:flex; }
  .pe-header { padding:14px; }
  .pe-footer { padding:10px 14px; flex-wrap:wrap; }
  .pe-status { flex-basis:100%; }
}
.preface-edit-entry { border:1px solid #c7d7ec; border-radius:6px; background:var(--color-surface, #fff); color:var(--color-text, #245ca6); padding:5px 9px; cursor:pointer; font:inherit; white-space:nowrap; }