.document-editor-host { min-height: 100%; background: #f6f7f8; }
.document-editor-toolbar { position: sticky; z-index: 3; top: 0; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #e3e6e8; padding: 9px 12px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.document-editor-toolbar button,.document-editor-toolbar select { min-height: 32px; border: 1px solid #dde1e4; border-radius: 8px; padding: 5px 9px; color: #30343a; background: #fff; font: inherit; cursor: pointer; }
.document-editor-toolbar button:hover,.document-editor-toolbar select:hover { border-color: #b9c0c6; background: #f8f9fa; }
.document-editor-canvas { width: min(860px, calc(100% - 40px)); min-height: calc(100vh - 210px); margin: 20px auto 56px; border: 1px solid #e0e3e5; border-radius: 5px; padding: 52px 60px 72px; outline: none; color: #24272b; background: #fff; box-shadow: 0 12px 38px rgba(32,39,45,.08); }
.document-editor-canvas:focus { border-color: #b7bec4; box-shadow: 0 14px 42px rgba(32,39,45,.11); }
@media (max-width:720px) { .document-editor-canvas { width: calc(100% - 16px); margin-top: 8px; padding: 28px 22px 48px; } }