
.blog-shell{max-width:1120px;margin:auto;padding:72px 12px;color:#cbd5e1}.blog-shell *{box-sizing:border-box}.blog-heading{text-align:center;margin:0 auto 44px;max-width:850px}.blog-heading h1{margin:18px 0 24px;outline:none}.blog-heading p{font-size:18px;line-height:1.7;color:#94a3b8}.blog-eyebrow{font-size:12px;letter-spacing:.15em;color:#a5b4fc}.blog-meta{font-size:12px;color:#94a3b8;line-height:1.6}.blog-filters{display:flex;align-items:end;gap:16px;margin-bottom:32px}.blog-shell label{display:block;color:#cbd5e1;font-size:13px;margin-bottom:16px}.blog-filters label{flex:1;margin:0}.blog-shell input,.blog-shell textarea,.blog-shell select{display:block;width:100%;background:#0b1220;border:1px solid #334155;color:#e2e8f0;border-radius:8px;padding:11px 12px;margin-top:7px;font:inherit;user-select:text;cursor:text!important}.blog-shell input[type=checkbox]{appearance:none;width:20px;height:20px;flex:0 0 20px;padding:0;margin:0;border:1px solid #475569;border-radius:5px;background:#0b1220;cursor:pointer!important;user-select:none;box-shadow:none}
.blog-shell input[type=checkbox]:checked{border-color:#818cf8;background-color:#6366f1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.blog-shell .blog-check{cursor:pointer!important}
@media(forced-colors:active){.blog-shell input[type=checkbox]{appearance:auto}}.blog-shell input[type=file]{font-size:12px}.blog-shell select{cursor:pointer!important}.blog-shell textarea{line-height:1.6;resize:vertical}.blog-shell :is(input,textarea,select,button,a):focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}.blog-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#6366f1,#4f46e5);border:1px solid #818cf84d;border-radius:9px;color:#fff;padding:11px 18px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer!important}.blog-button.secondary{background:#1e293b;color:#cbd5e1;border-color:#334155}.blog-shell button:disabled{opacity:.45;cursor:not-allowed!important}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-card{border:1px solid #33415580;background:#111827;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.blog-card-body{padding:24px}.blog-card h2{font:600 22px/1.3 Nacelle,sans-serif;margin:18px 0 12px;color:#e0e7ff;overflow-wrap:anywhere}.blog-card p{font-size:14px;color:#94a3b8;line-height:1.7;margin:0 0 20px}.blog-badge{display:inline-flex;font-size:11px;padding:4px 9px;border:1px solid #6366f14d;background:#6366f117;color:#c7d2fe;border-radius:99px}.blog-badge.published{background:#064e3b;color:#a7f3d0;border-color:#065f46}.blog-read{display:inline-block;color:#a5b4fc;margin-top:20px;font-size:14px}.blog-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin:30px 0;font-size:13px}.blog-empty{padding:60px;text-align:center;border:1px dashed #334155;border-radius:16px}.blog-empty h2{font-size:22px;color:#e0e7ff;margin-bottom:14px}.blog-article{max-width:880px}.blog-cover{width:100%;max-height:520px;object-fit:cover;border-radius:16px;margin-bottom:32px}.blog-prose{font-size:16px;line-height:1.85;overflow-wrap:anywhere;color:#cbd5e1}.blog-prose h2{font:600 28px/1.3 Nacelle,sans-serif;color:#e0e7ff;margin:32px 0 16px}.blog-prose h3{font-size:21px;font-weight:600;margin:24px 0 12px}.blog-prose p,.blog-prose ul,.blog-prose ol{margin:0 0 20px}.blog-prose ul{list-style:disc;padding-left:24px}.blog-prose ol{list-style:decimal;padding-left:24px}.blog-prose a{color:#a5b4fc;text-decoration:underline}.blog-prose blockquote{border-left:3px solid #818cf8;padding-left:20px;color:#94a3b8}.blog-prose pre{overflow:auto;background:#030712;padding:16px;border-radius:8px}.blog-prose table{display:block;overflow:auto;border-collapse:collapse}.blog-prose th,.blog-prose td{border:1px solid #334155;padding:8px}.blog-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.blog-tags a{border:1px solid #334155;border-radius:20px;padding:6px 12px;font-size:12px;color:#a5b4fc}.blog-studio-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}.blog-panel{background:#111827;border:1px solid #334155;border-radius:14px;padding:24px;margin-bottom:24px}.blog-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.blog-panel h2{font-size:19px;font-weight:600;color:#e0e7ff}.blog-panel summary{font-weight:600;cursor:pointer!important;margin:0}.blog-panel[open] summary{margin-bottom:24px}.blog-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.blog-actions a{color:#a5b4fc;font-size:12px}.blog-list-item{padding:18px 0;border-bottom:1px solid #334155}.blog-list-title{display:block;width:100%;text-align:left;font-weight:600;color:#e0e7ff;margin-bottom:10px;cursor:pointer!important}.blog-list-item .blog-meta{margin:10px 0}.blog-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.blog-check{display:flex!important;gap:10px;align-items:center}.blog-editor-cover{max-height:200px;max-width:100%;border-radius:10px;margin-bottom:18px}.blog-preview{margin-top:28px;padding-top:24px;border-top:1px solid #475569}.blog-alert{border:1px solid #6366f166;border-radius:10px;padding:16px;background:#312e8133;margin-bottom:22px;color:#c7d2fe}.blog-alert.error,.blog-shell .validation-errors{color:#fda4af}.blog-shell fieldset{border:0;padding:0;margin:0;min-width:0}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-studio-grid{grid-template-columns:1fr}.blog-filters{flex-wrap:wrap}.blog-filters label{min-width:200px}}
@media(max-width:600px){.blog-shell{padding:44px 0}.blog-grid{grid-template-columns:1fr}.blog-fields{grid-template-columns:1fr;gap:0}.blog-panel{padding:18px}.blog-heading p{font-size:16px}.blog-filters{display:block}.blog-filters label{margin-bottom:12px}}

/* Shared editorial typography: published articles and studio previews. */
.blog-shell .blog-prose {
    max-width: 72ch;
    margin-inline: auto;
    font-family: var(--font-nacelle, Nacelle, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #cbd5e1;
}
.blog-shell .blog-prose :is(h1,h2,h3,h4,h5,h6) {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #e2e8f0;
    text-wrap: pretty;
}
.blog-shell .blog-prose h1 { font-size: 30px; margin: 40px 0 16px; }
.blog-shell .blog-prose h2 { font-size: 26px; margin: 40px 0 16px; }
.blog-shell .blog-prose h3 { font-size: 22px; margin: 32px 0 12px; }
.blog-shell .blog-prose h4 { font-size: 19px; margin: 24px 0 12px; }
.blog-shell .blog-prose :is(h5,h6) { font-size: 17px; margin: 24px 0 12px; }
.blog-shell .blog-prose > :first-child { margin-top: 0; }
.blog-shell .blog-prose > :last-child { margin-bottom: 0; }
.blog-shell .blog-prose :is(p,ul,ol,blockquote,pre,table) { margin-block: 0 24px; }
.blog-shell .blog-prose :is(h1,h2,h3,h4,h5,h6) + :is(h2,h3,h4,h5,h6) { margin-top: 20px; }
.blog-shell .blog-prose li { margin-block: 8px; padding-left: 4px; }
.blog-shell .blog-prose li > :is(ul,ol) { margin-block: 8px 0; }
.blog-shell .blog-prose li > p { margin-bottom: 8px; }
.blog-shell .blog-prose :is(strong,b) { font-weight: 700; color: #f1f5f9; }
.blog-shell .blog-prose blockquote { padding: 16px 20px; background: #818cf80a; border-left: 3px solid #818cf8; border-radius: 0 8px 8px 0; }
.blog-shell .blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-shell .blog-prose hr { border: 0; border-top: 1px solid #334155; margin: 40px 0; }
.blog-shell .blog-prose a { text-underline-offset: 3px; }
.blog-shell .blog-prose th { font-weight: 600; background: #1e293b; }
.blog-shell .blog-prose :is(th,td) { padding: 12px 16px; font-size: 14px; line-height: 1.6; }
.blog-shell .blog-prose code { font-family: 'JetBrains Mono', monospace; font-size: .875em; }
.blog-shell .blog-prose :not(pre) > code { background: #1e293b; padding: 2px 5px; border-radius: 4px; }
.blog-shell .blog-preview { margin-top: 40px; padding-top: 32px; }
.blog-shell .blog-article-intro { margin-bottom: 32px; }
.blog-shell .blog-preview-title { font: 600 clamp(26px, 2.5vw, 36px)/1.25 var(--font-nacelle, Nacelle, sans-serif); letter-spacing: -.025em; color: #e2e8f0; margin: 0 0 16px; }
.blog-shell .blog-standfirst { font-size: 18px; line-height: 1.65; color: #94a3b8; margin: 0; }
.blog-article .blog-heading { text-align: left; margin: 32px 0 40px; }
#website-layout .blog-article .blog-heading .website-page-title { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.2; margin: 16px 0 20px; }
.blog-article .blog-heading > p { font-size: 18px; line-height: 1.65; margin: 0 0 24px; }
.blog-article .blog-meta { font-size: 13px; }
@media(max-width:600px) {
    .blog-shell .blog-prose h1 { font-size: 26px; }
    .blog-shell .blog-prose h2 { font-size: 23px; margin-top: 32px; }
    .blog-shell .blog-prose h3 { font-size: 20px; margin-top: 24px; }
    .blog-shell .blog-prose h4 { font-size: 18px; }
    .blog-shell .blog-standfirst, .blog-article .blog-heading > p { font-size: 17px; }
    .blog-article .blog-heading { margin-block: 24px 32px; }
}
.blog-panel .blog-articles-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}.blog-articles-title .blog-badge{min-width:24px;justify-content:center;line-height:1.4;letter-spacing:normal}

.blog-ai > .blog-actions{margin-top:20px}

.blog-seo-preview{margin-top:24px;padding-top:24px;border-top:1px solid #334155}.blog-seo-preview h3{font-size:20px;line-height:1.4;color:#a5b4fc;margin:16px 0 8px}.blog-seo-preview p{font-size:14px;line-height:1.7}.blog-seo-preview .blog-tags{margin-top:16px}

.seo-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.seo-comparison p{overflow-wrap:anywhere;white-space:pre-wrap}.seo-comparison strong{font-size:.8rem;color:#94a3b8}@media(max-width:640px){.seo-comparison{grid-template-columns:1fr;gap:8px}}

/* SEO Studio: consistent actions and responsive panels. */
.seo-studio .blog-actions { gap:16px; margin-block:20px; align-items:center; }
.seo-studio .blog-button { box-sizing:border-box; width:240px; max-width:100%; min-height:48px; padding:10px 16px; flex:0 0 auto; text-align:center; line-height:1.4; white-space:normal; }
.seo-studio .seo-resource-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; width:180px; flex:0 0 180px; }
.seo-studio .blog-studio-grid > *, .seo-studio .seo-comparison > * { min-width:0; }
.seo-studio .blog-panel { overflow-wrap:anywhere; }
.seo-studio .blog-panel-title { flex-wrap:wrap; }
.seo-studio .blog-check { align-items:flex-start; line-height:1.6; }
.seo-studio .blog-check input { margin-top:1px; }
@media(max-width:960px) {
    .seo-studio .blog-studio-grid { grid-template-columns:minmax(0,1fr); }
    .seo-studio .seo-resource-links { width:100%; flex-basis:100%; }
}
@media(max-width:600px) {
    .seo-studio { padding-block:40px; }
    .seo-studio .blog-panel { padding:20px 16px; }
    .seo-studio .blog-actions { flex-direction:column; align-items:stretch; gap:16px; }
    .seo-studio .blog-button { width:100%; }
    .seo-studio .seo-resource-links { flex-basis:auto; }
    .seo-studio .blog-heading h1 { font-size:clamp(30px,8vw,42px); }
}

.seo-loading-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.seo-skeleton-heading{display:flex;flex-direction:column;align-items:center;gap:20px}
.seo-skeleton-lines{display:flex;flex-direction:column;gap:20px}
.seo-loading .e-skeleton{max-width:100%;flex-shrink:0;border-radius:8px;background-color:#1e293b}
.seo-loading .blog-actions{margin-block:0}
@media(max-width:600px){.seo-loading .blog-actions .e-skeleton{width:100%!important}}
@media(prefers-reduced-motion:reduce){.seo-loading .e-skeleton::after,.seo-loading .e-skeleton::before{animation:none!important}}

/* Operation feedback stays visible without dimming the page or blocking Cancel. */
.seo-studio .seo-operation-loading {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
    pointer-events: none;
}
.seo-studio .seo-operation-spinner {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 4px solid rgba(165, 180, 252, .25);
    border-top-color: #a5b4fc;
    border-right-color: #818cf8;
    border-radius: 50%;
    animation: seo-operation-spin .8s linear infinite;
}
.seo-studio .seo-operation-label {
    color: #e0e7ff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 4px #080c17;
}
@keyframes seo-operation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .seo-studio .seo-operation-spinner { animation: none; }
}

.seo-studio .seo-cancel-actions { margin:0; padding:0 25px 15px; }
@media(max-width:600px) { .seo-studio .seo-cancel-actions { padding-inline:17px; } }
