.mkt-tabs.blog-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-composer { padding: var(--space-5); display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.blog-editor-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.blog-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.blog-toolbar .c-button--icon { flex: 0 0 auto; color: var(--muted); }
.blog-toolbar .ui-icon { width: var(--nav-icon-size); height: var(--nav-icon-size); }
.blog-photo-settings:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.blog-photo-settings label { display: flex; flex: 1 1 180px; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--type-body); }
.blog-photo-settings input { flex: 1 1 120px; min-width: 0; max-width: 100%; min-height: var(--control-height); accent-color: var(--brand-primary); }
.blog-photo-settings output { min-width: 4ch; font-size: var(--type-body); font-variant-numeric: tabular-nums; }
.blog-photo-status { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--type-caption); color: var(--muted); border-bottom: 1px solid var(--line); }
.blog-prose { color: var(--ink); font-size: var(--type-body); line-height: 1.8; overflow-wrap: anywhere; min-width: 0; }
.blog-prose h1 { font-size: var(--type-page); line-height: 1.3; font-weight: var(--weight-heading); }
.blog-prose h2 { font-size: var(--type-section); font-weight: var(--weight-heading); }
.blog-prose h3 { font-size: var(--type-card); font-weight: var(--weight-heading); }
.blog-prose p { margin: 0 0 var(--space-4); }
.blog-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); margin: var(--space-4) 0; }
.blog-prose blockquote { border-left: 3px solid var(--brand-primary); margin: var(--space-4) 0; padding: var(--space-2) var(--space-4); background: var(--surface-2); }
.blog-prose a, .blog-title-link, .blog-page .c-breadcrumbs__link, .blog-read-link { color: var(--brand-primary); text-decoration: none; }
.blog-prose a:hover, .blog-title-link:hover, .blog-page .c-breadcrumbs__link:hover, .blog-read-link:hover { text-decoration: underline; }
.blog-editor { min-height: 320px; padding: var(--space-4); background: var(--card-surface); }
.blog-editor img { cursor: pointer; }
.blog-editor img.is-selected { outline: var(--focus-ring-width) solid var(--brand-primary); outline-offset: 2px; }
.blog-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.blog-hint, .blog-meta { color: var(--muted); font-size: var(--type-body); }
.blog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.blog-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.blog-empty { padding: var(--space-5); }
.blog-page { margin: 0; background: var(--surface); color: var(--ink); }
.blog-page-main { width: min(860px, 100%); box-sizing: border-box; padding: var(--space-5); margin: 0 auto; }
.blog-page-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.blog-page .c-breadcrumbs { flex-wrap: wrap; }
.blog-article { padding: var(--space-5); }
.blog-article h1 { margin-top: 0; }
@media (max-width: 600px) {
  .blog-composer, .blog-article, .blog-page-main { padding: var(--space-3); }
  .blog-editor { min-height: 300px; }
}

.blog-link-panel:not([hidden]) { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--line); }
.blog-link-panel .c-field { flex: 1 1 200px; }

.blog-composer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.blog-composer-head h2, .blog-draft h3 { margin: 0; font-size: var(--type-card); font-weight: var(--weight-heading); }
.blog-composer [data-status] { margin: 0; font-size: var(--type-caption); color: var(--muted); overflow-wrap: anywhere; }
.blog-toolbar .c-button[aria-pressed="true"] { background: var(--surface-2); color: var(--brand-primary); border-color: var(--line-strong); }
.blog-draft { padding: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.blog-draft > div { min-width: 0; overflow-wrap: anywhere; }
.blog-draft p { margin: var(--space-2) 0; color: var(--muted); font-size: var(--type-body); }
.blog-preview { width: min(var(--blog-preview-width, 1000px), calc(100vw - var(--space-5) * 2)); max-width: none; }
.blog-preview .c-modal__body { background: var(--surface); }
.blog-preview-switch { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.blog-preview-switch [aria-selected="true"] { color: var(--brand-primary); background: var(--surface-2); }
.blog-preview .blog-article { margin: 0; }
@media (max-width: 600px) {
  .blog-draft { padding: var(--space-3); align-items: stretch; flex-direction: column; }
  .blog-preview { width: calc(100vw - var(--space-3) * 2); }
  .blog-tabs .mkt-tab { padding-inline: var(--space-2); }
}