:root { --gap: 16px; --border: #e5e7eb; --bg:#fafafa; }
* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin:0; background: var(--bg); color:#111; }

.site-header { max-width: 900px; margin: 0 auto; padding: 24px 16px; display:flex; align-items:center; justify-content: space-between; }
.posts { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }

.post { margin: 32px 0; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.post .img-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; }
.post img { width: 100%; height: 100%; object-fit: cover; display:block; }
.post h2 { font-size: clamp(24px, 4vw, 36px); margin: 12px 0 8px; }
.post p { font-size: 18px; line-height: 1.6; white-space: pre-wrap; }

/* Admin layout */
body.admin { display:flex; height: 100vh; }
#sidebar { width: 34%; border-right: 1px solid var(--border); padding: 16px; overflow:auto; background:#fff; }
#editor { flex:1; position:relative; overflow:auto; }
.toolbar { position: sticky; top:0; background:#fff; border-bottom:1px solid var(--border); padding: 10px; display:flex; justify-content:space-between; gap:8px; z-index:10; }
.toolbar button { padding: 8px 12px; }
.sidebar-top { position: sticky; top:0; background:#fff; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.post-item { padding: 10px; border:1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor:pointer; background:#fff; }
.post-item .title { font-weight:600; }
.post-item .meta { font-size: 12px; color:#555; display:flex; gap:6px; align-items:center; }
.badge { font-size: 11px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); }
.badge.published { background:#ecfdf5; }
.badge.draft { background:#f1f5f9; }
.badge.hidden { background:#fef2f2; }
.field { padding: 16px; border-bottom:1px solid var(--border); }
.field label { display:block; font-weight:600; margin-bottom:6px; }
.field input, .field textarea { width: 100%; padding: 10px; border:1px solid var(--border); border-radius: 8px; background:#fff; }
.preview { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; display:block; }