:root{--compose-bg:#f5efe4;--compose-panel:#fffdf8;--compose-ink:#13231e;--compose-soft:#e9dfcf}
body{background:radial-gradient(circle at 15% 0,#fff9ee 0,#f5efe4 36%,#eee6d9 100%);color:var(--compose-ink)}
.compose-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:330px minmax(280px,640px) auto;gap:24px;align-items:center;padding:16px 34px;border-bottom:1px solid #ded4c4;background:rgba(248,243,234,.92);backdrop-filter:blur(18px)}
.compose-brand img{display:block;width:280px;max-width:100%;height:auto}.compose-search{margin:0;width:100%;max-width:none}.compose-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.compose-header-actions span{font-size:12px;color:var(--muted);white-space:nowrap}
.compose-shell{width:min(1320px,calc(100% - 52px));margin:0 auto;padding:44px 0 80px}.compose-hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:end;margin-bottom:26px}.compose-hero h1{font-family:"Playfair Display","Noto Sans SC";font-size:64px;line-height:1;margin:10px 0 12px}.compose-hero p{max-width:720px;color:#66726d;font-size:18px;line-height:1.8}.compose-hero-card{padding:24px;border-radius:24px;background:#103b2d;color:#f6fff9;box-shadow:0 28px 70px rgba(16,59,45,.18)}.compose-hero-card b,.compose-hero-card span{display:block}.compose-hero-card span{margin-top:9px;color:#bdd8cc;font-size:13px;line-height:1.75}
.compose-workbench{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.compose-main-card,.side-card{background:rgba(255,253,248,.9);border:1px solid #ddd2c2;border-radius:30px;box-shadow:0 24px 70px rgba(53,45,30,.08)}.compose-main-card{padding:28px}.compose-card-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:22px}.compose-card-head h2,.side-card h3{font-size:30px;margin:6px 0 0}.draft-state{border-radius:999px;padding:8px 13px;background:#e4f3ed;color:#12523e;font-size:11px;font-weight:800}
.compose-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.compose-grid .full{grid-column:1/-1}.compose-grid label{display:grid;gap:7px;color:#60716a;font-size:12px;font-weight:800}.compose-grid input,.compose-grid select,.compose-grid textarea{width:100%;border:1px solid #ddd2c2;border-radius:16px;background:#fffaf2;color:#13231e;padding:13px 15px;font:inherit;font-size:14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.compose-grid textarea{min-height:84px;resize:vertical}.compose-grid input:focus,.compose-grid select:focus,.compose-grid textarea:focus{border-color:#83b7a1;box-shadow:0 0 0 4px rgba(114,226,178,.15)}
.editor-toolbar{position:sticky;top:92px;z-index:10;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0;padding:12px;border:1px solid #dcd1c1;border-radius:18px 18px 0 0;background:#f4ecdf}.editor-toolbar button,.image-tool,.format-tool{border:1px solid #d5c8b6;background:#fffaf2;color:#24463b;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer}.editor-toolbar button:hover,.image-tool:hover,.format-tool:hover{border-color:#95b9a8;background:#e7f4ed}.format-tool{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px}.format-tool select{border:0;background:transparent;color:#143e31;font:inherit;font-weight:800;outline:none;cursor:pointer}.toolbar-divider{width:1px;height:26px;background:#d5c8b6;margin:0 2px}
.editor-wrap{border:1px solid #dcd1c1;border-top:0;border-radius:0 0 24px 24px;background:white;overflow:hidden}.rich-editor{min-height:620px;padding:34px 40px;outline:none;font-size:17px;line-height:1.9;color:#243c34}.rich-editor:empty:before{content:attr(data-placeholder);display:block;color:#9aa69f}.rich-editor h2{font-size:30px;line-height:1.35;margin:34px 0 12px}.rich-editor h3{font-size:23px;line-height:1.35;margin:28px 0 10px}.rich-editor p{margin:0 0 18px}.rich-editor blockquote,.rich-editor .rich-callout{margin:20px 0;padding:18px 22px;border-left:4px solid #6ce0ad;border-radius:0 16px 16px 0;background:#e7f4ed}.rich-editor img{max-width:100%;height:auto;border-radius:18px;border:1px solid #e1d7c8;box-shadow:0 18px 44px rgba(32,48,41,.12)}.rich-editor figure{margin:24px 0}.rich-editor figcaption{margin-top:8px;text-align:center;color:#7d8b84;font-size:12px}.rich-editor table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #ddd2c2;border-radius:16px;overflow:hidden}.rich-editor th,.rich-editor td{border-bottom:1px solid #ddd2c2;padding:10px 12px}.rich-editor th{background:#e7f4ed;text-align:left}.rich-editor pre{white-space:pre-wrap;padding:16px;border-radius:14px;background:#103b2d;color:#e9fff6}
.compose-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}.compose-side{display:grid;gap:16px;position:sticky;top:98px}.side-card{padding:22px}.side-card.compact p{margin:8px 0 0;color:#69766f;font-size:12px;line-height:1.7}.preview-card{margin-top:14px;border:1px solid #ded4c4;border-radius:20px;background:#fffaf2;padding:18px;max-height:420px;overflow:auto}.preview-card small{display:block;color:#0f6048;font-weight:800;font-size:10px;letter-spacing:1.4px}.preview-card h4{font-size:20px;line-height:1.35;margin:8px 0}.preview-body{display:grid;gap:12px;font-size:13px;line-height:1.75;color:#52645d}.preview-body img{max-width:100%;border-radius:12px}.quality-list{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none}.quality-list li{display:flex;gap:9px;align-items:flex-start;padding:11px;border-radius:14px;background:#f6f0e7;color:#66736d;font-size:12px;line-height:1.55}.quality-list li.ok{background:#e6f4ed;color:#0f6048}.quality-list li i{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#d7cbbb;color:#fff;font-style:normal;font-size:11px}.quality-list li.ok i{background:#12523e}.writing-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.writing-stats div{padding:13px;border:1px solid #ded4c4;border-radius:16px;background:#fffaf2}.writing-stats small,.writing-stats b{display:block}.writing-stats small{font-size:10px;color:#69766f}.writing-stats b{margin-top:3px;font-size:18px;color:#123d2f}.outline-box{margin-top:16px;border-top:1px solid #ded4c4;padding-top:14px}.outline-box>b{display:block;font-size:13px;margin-bottom:9px}.outline-box p{margin:0;color:#69766f;font-size:12px;line-height:1.7}.outline-box button{display:block;width:100%;border:0;background:transparent;text-align:left;color:#31453d;font-size:12px;line-height:1.45;padding:7px 8px;border-radius:10px;cursor:pointer}.outline-box button:hover{background:#e8f2ed;color:#0f6048}.outline-box button.h3{padding-left:22px;color:#64746d}
body.dark{background:#081c15}.dark .compose-header{background:rgba(10,30,23,.92);border-color:#244239}.dark .compose-main-card,.dark .side-card{background:#10271f;border-color:#284537}.dark .compose-grid input,.dark .compose-grid select,.dark .compose-grid textarea,.dark .editor-wrap,.dark .rich-editor,.dark .preview-card{background:#0b1e17;color:#d8e9e1;border-color:#284537}.dark .editor-toolbar{background:#132b22;border-color:#284537}.dark .editor-toolbar button,.dark .image-tool,.dark .format-tool{background:#0b1e17;border-color:#315a49;color:#d8e9e1}.dark .format-tool select{color:#d8e9e1}.dark .toolbar-divider{background:#315a49}.dark .compose-hero p,.dark .side-card.compact p{color:#a5b9b0}.dark .quality-list li{background:#172d24}.dark .quality-list li.ok{background:#173a2d}.dark .writing-stats div{background:#0b1e17;border-color:#284537}.dark .writing-stats b{color:#d8e9e1}.dark .outline-box{border-color:#284537}.dark .outline-box button{color:#bfd0c8}.dark .outline-box button:hover{background:#173a2d;color:#d9f8e8}
@media(max-width:1080px){.compose-header{grid-template-columns:1fr;gap:12px}.compose-brand img{width:245px}.compose-header-actions{justify-content:space-between}.compose-workbench,.compose-hero{grid-template-columns:1fr}.compose-side{position:static}.editor-toolbar{top:0}}
@media(max-width:680px){.compose-header{padding:14px 18px}.compose-shell{width:calc(100% - 28px);padding-top:28px}.compose-hero h1{font-size:44px}.compose-grid{grid-template-columns:1fr}.compose-main-card{padding:18px;border-radius:22px}.rich-editor{min-height:520px;padding:24px 20px}.compose-actions{justify-content:stretch}.compose-actions .button{width:100%}}

.compose-fieldset{border:1px solid #ddd2c2;border-radius:18px;padding:13px 15px;display:flex;flex-wrap:wrap;gap:10px;background:#fffaf2}.compose-fieldset legend{padding:0 8px;color:#60716a;font-size:12px;font-weight:800}.compose-fieldset label{display:inline-flex!important;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#f3eadc;color:#27463b;font-size:12px}.compose-fieldset input{width:auto!important}.preview-summary{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.preview-summary span{padding:4px 8px;border-radius:999px;background:#e4f3ed;color:#10513d;font-size:11px;font-weight:800}.preview-thesis{display:grid;gap:7px;margin:12px 0;padding:12px;border-radius:14px;background:#f3eadc}.preview-thesis dt{font-size:10px;color:#0f6048;font-weight:900;letter-spacing:1px}.preview-thesis dd{margin:0;color:#52645d;font-size:12px;line-height:1.65}.dark .compose-fieldset,.dark .preview-thesis{background:#0b1e17;border-color:#284537}.dark .compose-fieldset label,.dark .preview-summary span{background:#173a2d;color:#d9f8e8}.dark .preview-thesis dd{color:#b6c8bf}