.blog-shell { max-width: 1240px; }
.blog-nav { display:flex; align-items:center; gap:20px; font-size:13px; }
.blog-nav>a { color:var(--muted); min-height:44px; display:inline-flex; align-items:center; }
.blog-nav>a:hover,.blog-read { color:var(--accent); }
.blog-shell .language-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:12px; }
.blog-shell .language-switch a { min-height:44px; min-width:44px; display:grid; place-items:center; padding:8px; font-size:12px; border-radius:9px; }
.blog-shell .language-switch [aria-current] { background:var(--accent); color:#fff; }
.blog-main { padding:34px 0 72px; }
.blog-intro { max-width:760px; margin:12px 0 30px; }
.blog-intro h1 { margin:12px 0 18px; font-size:clamp(32px,4.5vw,52px); line-height:1.15; letter-spacing:-1.6px; }
.blog-intro>p:last-child { max-width:65ch; color:var(--muted); line-height:1.75; font-size:16px; }
.blog-search { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 30px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.blog-search label { font-size:13px; font-weight:600; }
.blog-search input { flex:1; min-width:150px; height:48px; border:1px solid var(--line); border-radius:11px; padding:12px 14px; font:inherit; color:var(--fg); background:var(--surface-2); }
.blog-search .button { min-height:48px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.blog-card { display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--line); background:#fff; border-radius:18px; transition:border-color .15s,box-shadow .15s; }
.blog-card:hover { border-color:#b1ccc0; box-shadow:0 8px 28px #143c2410; }
.blog-card time,.article-meta { color:var(--muted); font-size:13px; }
.blog-card h2 { margin:14px 0 12px; font-size:23px; line-height:1.3; letter-spacing:-.4px; overflow-wrap:anywhere; }
.blog-card h2 a { display:block; min-height:44px; }
.blog-card p { color:var(--muted); font-size:14px; line-height:1.75; flex:1; overflow-wrap:anywhere; }
.blog-read { display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; margin-top:14px; gap:12px; font-size:13px; font-weight:600; }
.blog-pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; padding:28px 0 0; font-size:14px; }
.blog-pagination a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; background:#fff; border:1px solid var(--line); border-radius:11px; color:var(--accent); }
.blog-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:0 0 24px; overflow-wrap:anywhere; }
.blog-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:30px; align-items:start; }
.blog-article { min-width:0; padding:34px 40px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.article-heading h1 { font-size:clamp(29px,3.7vw,43px); line-height:1.2; letter-spacing:-1.1px; margin:16px 0; overflow-wrap:anywhere; }
.article-excerpt { color:var(--muted); font-size:17px; line-height:1.65; }
.article-meta { line-height:1.7; margin-top:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.article-body { color:var(--fg); font-size:17px; line-height:1.85; overflow-wrap:anywhere; }
.article-body h2 { font-size:27px; letter-spacing:-.5px; line-height:1.3; margin:36px 0 16px; scroll-margin-top:28px; }
.article-body h3 { font-size:21px; line-height:1.4; margin:28px 0 12px; scroll-margin-top:28px; }
.article-body p { margin:17px 0; }
.article-body ul,.article-body ol { padding-left:25px; margin:16px 0; }
.article-body li { margin:9px 0; padding-left:3px; }
.article-body blockquote { margin:24px 0; padding:12px 20px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 10px 10px 0; }
.article-body a,.article-sources a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.article-body pre { max-width:100%; overflow:auto; padding:16px; border-radius:12px; background:var(--surface-2); font-size:14px; }
.article-sources { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.article-sources h2 { font-size:18px; }
.article-sources ul { padding-left:20px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.article-sources li { margin:10px 0; }
.article-sources a { display:inline-block; padding:5px 0; }
.article-aside { position:sticky; top:24px; min-width:0; }
.article-toc { padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; margin-bottom:20px; }
.article-toc summary { cursor:pointer; min-height:44px; font-size:15px; font-weight:650; color:var(--fg); }
.article-toc-links { display:grid; gap:2px; padding-top:10px; max-height:360px; overflow:auto; }
.article-toc-links a { display:flex; align-items:center; min-height:44px; font-size:14px; line-height:1.5; padding:8px; border-radius:8px; color:var(--muted); overflow-wrap:anywhere; }
.article-toc-links a:hover { color:var(--accent); background:var(--accent-soft); }
.article-toc-links .toc-level-3 { padding-left:20px; font-size:13px; }
.blog-cta { padding:24px; border-radius:18px; background:var(--accent-soft); }
.blog-cta .brand-mark { display:block; width:42px; height:42px; }
.blog-cta h2 { margin:16px 0 10px; font-size:23px; line-height:1.3; }
.blog-cta p { color:var(--muted); font-size:14px; line-height:1.7; }
.blog-cta .button { min-height:48px; font-size:13px; width:100%; margin-top:18px; white-space:normal; text-align:center; }
.related-articles { padding:26px 4px 4px; }
.related-articles h2 { font-size:18px; }
.related-articles>a { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:10px; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.6; }
.related-articles>a span { color:var(--accent); }
.blog-footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.blog-footer-links a { display:inline-flex; min-height:44px; align-items:center; }
/* The protected editor shares the same visual language without affecting client reports. */
.admin-blog-panel { margin-top:20px; }
.admin-blog-panel .blog-heading-actions { display:flex; flex-wrap:wrap; gap:10px; }
.admin-blog-panel .admin-table-scroll { max-height:480px; overflow:auto; }
.admin-blog-panel .blog-post-table thead { position:sticky; top:0; background:#fff; z-index:1; }
.admin-blog-panel .blog-editor-form { scroll-margin-top:24px; }
.admin-blog-panel .blog-language-fields { grid-template-columns:minmax(0,1fr); }
.admin-blog-panel .blog-editor-languages { display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.admin-blog-panel .blog-editor-languages button { min-height:44px; padding:10px 16px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:14px; }
.admin-blog-panel .blog-editor-languages [aria-selected=true] { color:var(--accent); background:var(--accent-soft); font-weight:650; }
.admin-blog-panel .blog-toolbar select { min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface-2); }
.admin-blog-panel .blog-editor-form label { font-size:13px; }
.admin-blog-panel .blog-editor-form input,.admin-blog-panel .blog-editor-form textarea,.admin-blog-panel .blog-editor-form select { min-height:44px; font-size:14px; }
.admin-blog-panel .blog-editor-form .blog-markdown { font-size:14px; }
.admin-blog-panel .blog-editor-actions { gap:12px; }
.admin-blog-panel .blog-editor-preview { font-size:16px; line-height:1.8; }
.admin-blog-panel .admin-message:empty { display:none; }
@media(max-width:1000px) {
  .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:minmax(0,1fr);gap:24px; }
  .article-aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .article-toc { grid-column:1/-1; margin:0; }
  .related-articles { padding-top:12px; }
  .blog-nav { gap:12px; }
}
@media(max-width:600px) {
  .blog-grid { grid-template-columns:1fr; gap:16px; }
  .blog-card { padding:23px; }
  .blog-card h2 { font-size:23px; }
  .blog-nav>a:first-child { display:none; }
  .blog-nav { gap:8px; }
  .blog-main { padding-top:20px; }
  .blog-intro { margin-top:6px; }
  .blog-intro h1 { letter-spacing:-1px; }
  .blog-search { padding:14px; gap:10px; }
  .blog-search label { width:100%; }
  .blog-search input { min-width:0; width:100%; }
  .blog-article { padding:24px 20px; }
  .article-body { font-size:16px; }
  .article-body h2 { font-size:25px; }
  .article-excerpt { font-size:16px; }
  .article-aside { display:block; }
  .article-toc { margin-bottom:20px; }
  .article-heading h1 { letter-spacing:-.6px; }
  .blog-breadcrumb { font-size:12px; }
  .admin-blog-panel { padding:20px 16px; }
  .admin-blog-panel>.panel-header,.admin-blog-panel .blog-editor-heading { flex-direction:column; align-items:flex-start; }
  .admin-blog-panel .blog-toolbar { display:grid; grid-template-columns:1fr 1fr; }
  .admin-blog-panel .blog-toolbar .search { width:100%; min-width:0; grid-column:1/-1; }
  .admin-blog-panel .blog-toolbar select { grid-column:1/-1; width:100%; }
  .admin-blog-panel .blog-meta-fields { grid-template-columns:1fr; }
  .admin-blog-panel .blog-editor-languages button { flex:1; padding:9px; font-size:13px; }
  .admin-blog-panel .blog-editor-form fieldset { padding:16px 14px; }
  .admin-blog-panel .blog-editor-actions>* { flex:1; min-width:120px; }
}
@media(prefers-reduced-motion:reduce) { .blog-card { transition:none; } }
@media print {
  .blog-shell .bar,.article-aside,.blog-shell .footer,.blog-search,.blog-pagination,.admin-blog-panel { display:none!important; }
  .article-layout { display:block; }
  .blog-article { border:0; padding:0; }
  .article-body a { color:inherit; }
  .blog-main { padding:0; }
}