.blog-main { padding-block: 38px 70px; min-height: calc(100vh - 220px); }
.blog-main h1 { font-size: clamp(28px,4vw,44px); line-height: 1.2; margin: 18px 0; overflow-wrap: anywhere; }
.blog-breadcrumbs { color: #a99e8f; font-size: 13px; overflow-wrap: anywhere; }
.blog-breadcrumbs a, .blog-main a { color: #e4c48c; }
.blog-summary { color: #b9ac9a; max-width: 850px; white-space: pre-wrap; }
.blog-date { color: #a99e8f; font-size: 12px; }
.blog-content { margin: 30px 0; min-width: 0; overflow-wrap: anywhere; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-block: 24px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #51402c; border-radius: 14px; background: linear-gradient(145deg,#211c18,#151312); color: #f5eee4 !important; text-decoration: none; min-width: 0; }
.blog-card:hover { border-color: #c5a36b; background: #30261d; }
.blog-card>img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card-icon { display: grid; place-items: center; height: 96px; font-size: 48px; color: #d7b679; background: #231c14; }
.blog-card-content { padding: 20px; }
.blog-card h2 { font-size: 19px; line-height: 1.4; margin: 0 0 10px; overflow-wrap: anywhere; }
.blog-card p { font-size: 14px; color: #b9ac9a; white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-card-content>span { font-size: 12px; color: #d7b679; }
.blog-block { width: var(--block-width,100%); max-width: 100%; min-width: 0; margin: 20px 0; overflow-wrap: anywhere; text-align: left; }
.blog-block.align-center { margin-inline: auto; text-align: center; }
.blog-block.align-right { margin-left: auto; text-align: right; }
.blog-block.tone-gold { color: #e8c68b; }
.blog-block.tone-muted { color: #a99e8f; }
.blog-block.tone-panel { padding: 20px; border: 1px solid #51402c; border-radius: 12px; background: #251e16; }
.blog-block.size-small { font-size: 14px; }
.blog-block.size-large { font-size: 20px; }
.blog-block h2 { font-size: 1.6em; line-height: 1.3; margin-block: 0 12px; }
.blog-block h3 { font-size: 1.25em; line-height: 1.4; margin-block: 0 10px; }
.blog-block p:first-child { margin-top: 0; }
.blog-block p:last-child { margin-bottom: 0; }
.blog-block img { display: block; width: 100%; height: auto; border-radius: 10px; }
.blog-block figcaption { color: #b9ac9a; font-size: 13px; margin-top: 8px; white-space: pre-wrap; }
.blog-label { white-space: pre-wrap; }
.blog-block pre { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; background: #0e0d0b; padding: 18px; border: 1px solid #40362a; border-radius: 10px; text-align: left; font-size: 14px; tab-size: 4; }
.blog-block :not(pre)>code { background: #30261d; padding: 2px 5px; border-radius: 4px; }
.blog-block blockquote { border-left: 3px solid #d7b679; padding-left: 18px; margin-inline: 0; color: #c4b49e; }
.blog-block hr { border: 0; border-top: 1px solid #65513b; }
.blog-columns { display: grid; grid-template-columns: repeat(var(--columns,2),minmax(0,1fr)); gap: 24px; text-align: left; }
.blog-column { min-width: 0; }
.blog-column>.blog-block:first-child { margin-top: 0; }
.blog-column>.blog-block:last-child { margin-bottom: 0; }
.blog-error { color: #edcc90; white-space: pre-wrap; }
.blog-editor-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 26px; align-items: start; }
.blog-tree-panel { position: sticky; top: 18px; border: 1px solid #51402c; padding: 16px; border-radius: 12px; background: #1b1713; max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; }
.blog-tree-panel h2 { font-size: 17px; margin: 0 0 12px; }
.blog-tree { margin-top: 16px; }
.blog-tree details { margin-left: 12px; }
.blog-tree>details { margin-left: 0; }
.blog-tree summary { cursor: pointer; color: #d7b679; }
.blog-tree button { padding: 6px 8px; background: transparent; color: #ead9ba; border: 0; font-size: 13px; text-align: left; justify-content: flex-start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.blog-tree button:hover,.blog-tree button.is-selected { background: #3b2e20; }
.blog-tree .tree-draft { color: #a99e8f; font-size: 11px; }
.blog-editor-panel { min-width: 0; }
.blog-editor-panel label { display: block; font-size: 13px; color: #cfbda4; margin: 12px 0; }
.blog-editor-panel input,.blog-editor-panel textarea,.blog-editor-panel select,.blog-insert select { width: 100%; background: #241f1a; color: #fff2dc; border: 1px solid #5a4730; border-radius: 8px; padding: 10px; font: inherit; margin-top: 6px; }
.blog-editor-panel textarea { resize: vertical; min-height: 90px; }
.blog-editor-panel input[type=file] { font-size: 13px; }
.blog-editor-panel .editor-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.blog-save-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; align-items: center; }
.blog-save-bar button { font-size: 14px; padding: 10px 16px; }
.blog-save-status { color: #a99e8f; font-size: 13px; }
.blog-help { color: #b9ac9a; font-size: 13px; }
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.blog-toolbar button { font-size: 12px; padding: 6px 10px; }
.blog-edit-block { padding: 16px; border: 1px solid #51402c; border-radius: 10px; margin: 14px 0; background: #1b1713; min-width: 0; }
.blog-edit-block.is-dragging { opacity: .45; }
.blog-block-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.blog-block-header strong { margin-right: auto; font-size: 13px; color: #d7b679; }
.blog-block-header button { font-size: 12px; padding: 4px 9px; }
.blog-block-header [draggable] { cursor: grab; touch-action: auto; }
.blog-block-settings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.blog-block-settings label { margin: 4px 0 12px; }
.blog-richtext { min-height: 140px; padding: 16px; background: #241f1a; border: 1px solid #65513b; border-radius: 8px; overflow-wrap: anywhere; }
.blog-richtext:focus { outline: 2px solid #d7b679; outline-offset: 2px; }
.blog-edit-columns { display: grid; grid-template-columns: repeat(var(--columns,2),minmax(0,1fr)); gap: 14px; }
.blog-edit-column { min-width: 0; border-left: 1px solid #65513b; padding-left: 12px; }
.blog-edit-column .blog-block-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
.blog-insert { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.blog-insert select { margin: 0; min-width: 0; flex: 1; }
.blog-insert button { flex-shrink: 0; padding: 9px 12px; font-size: 13px; }
.blog-insert.is-drop-target { outline: 2px dashed #d7b679; }
.blog-edit-image { display: block; width: auto; max-width: 100%; max-height: 240px; border-radius: 8px; margin-block: 10px; }
.blog-cover-preview { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; }
.blog-preview { width: min(1100px,calc(100% - 28px)); max-height: 90dvh; overflow: auto; overscroll-behavior: contain; border: 1px solid #65513b; border-radius: 14px; background: #171411; color: #f5eee4; padding: 24px; }
.blog-preview::backdrop { background: #000b; }
.blog-preview .preview-close { float: right; }
.blog-preview .preview-content { clear: both; padding-top: 20px; }
@media(max-width:1000px) { .blog-editor-layout { grid-template-columns: 220px minmax(0,1fr); gap: 16px; } .blog-block-settings { grid-template-columns: repeat(2,minmax(0,1fr)); } .blog-edit-columns { grid-template-columns: 1fr; } }
@media(max-width:760px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .blog-columns { grid-template-columns: 1fr; } .blog-column .blog-block { width: 100%; } .blog-editor-layout { grid-template-columns: 1fr; } .blog-tree-panel { position: static; max-height: 300px; } }
@media(max-width:500px) { .blog-grid { grid-template-columns: 1fr; } .blog-block { width: 100%; } .blog-editor-panel .editor-row { grid-template-columns: 1fr; gap: 0; } .blog-edit-block { padding: 12px; } }