.seo-hero { padding-bottom: 72px; }
.seo-hero-points { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.seo-hero-points span { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:9px 15px; font-size:13px; color:#e9edf4; }
.seo-app { background:#f5f5f2; padding:82px max(24px, calc((100vw - 1200px)/2)) 88px; }
.seo-app-heading { display:flex; justify-content:space-between; align-items:end; gap:36px; margin-bottom:30px; }
.seo-app-heading h2 { color:#0b1119; font-size:clamp(32px,4vw,54px); margin:12px 0 0; line-height:1.08; }
.seo-app-heading > p { color:#515c68; max-width:440px; line-height:1.6; margin:0; }
.seo-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.seo-input-panel,.seo-results-panel { background:#fff; border:1px solid #dfe3e8; box-shadow:0 16px 40px rgba(4,16,30,.06); padding:28px; min-width:0; }
.seo-panel-top { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #e3e6ea; padding-bottom:17px; margin-bottom:24px; color:#151c26; }
.seo-panel-top span { font-size:11px; font-weight:800; letter-spacing:.15em; color:#5267e5; }
.seo-panel-top strong { font-size:13px; text-align:right; }
.seo-input-panel label { display:block; color:#18232f; font-size:14px; font-weight:700; margin:18px 0 8px; }
.seo-input-panel label:first-of-type { margin-top:0; }
.seo-input-panel .optional { color:#6d7780; font-weight:400; }
.seo-input-panel input[type=url],.seo-input-panel textarea { width:100%; border:1px solid #b8c1cd; border-radius:5px; color:#101821; background:#fff; font:16px/1.5 'DM Sans',sans-serif; padding:13px 14px; box-sizing:border-box; }
.seo-input-panel input[type=url]:focus,.seo-input-panel textarea:focus,.seo-input-panel button:focus-visible,.seo-input-panel input[type=file]:focus-visible { outline:3px solid #5367ef; outline-offset:2px; }
.seo-input-panel textarea { min-height:210px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.seo-helper,.seo-limit { color:#5f6973; font-size:13px; line-height:1.6; }
.seo-helper { margin:10px 0 20px; }
.seo-actions { display:flex; gap:10px; flex-wrap:wrap; }
.seo-actions button { border:1px solid #0a1018; border-radius:4px; background:#0a1018; color:white; padding:14px 20px; font:700 14px 'DM Sans',sans-serif; min-height:48px; cursor:pointer; }
.seo-actions .seo-secondary { background:#fff; color:#0a1018; }
.seo-file-label { margin-top:22px!important; }
.seo-input-panel input[type=file] { max-width:100%; font-size:13px; }
.seo-error { color:#a52828; font-weight:700; font-size:13px; line-height:1.5; }
.seo-empty { padding:60px 18px; text-align:center; color:#53606c; }
.seo-empty-icon { width:76px; height:76px; line-height:69px; font-size:56px; border-radius:20px; margin:0 auto 25px; color:#5267e5; background:#eef0ff; }
.seo-empty h3 { color:#15212e; font-size:23px; margin-bottom:10px; }
.seo-empty p { max-width:350px; line-height:1.6; margin:0 auto; }
.seo-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.seo-summary span { display:inline-flex; align-items:center; padding:8px 11px; border-radius:4px; background:#f0f3f6; font-size:12px; font-weight:800; color:#263442; }
.seo-summary .review { background:#fff0db; color:#8d5100; }
.seo-summary .pass { background:#e6f6ed; color:#17623c; }
.seo-preview { padding:19px; border:1px solid #d9dee7; background:#fafbfc; margin-bottom:21px; overflow-wrap:anywhere; }
.seo-preview p { font-size:10px; font-weight:800; letter-spacing:.15em; color:#6b7684; margin:0 0 13px; }
.seo-preview strong { display:block; color:#2454bc; font-size:18px; font-weight:600; line-height:1.3; }
.seo-preview span { display:block; color:#31744b; font-size:12px; margin:5px 0; }
.seo-preview small { display:block; color:#4e5965; line-height:1.5; font-size:13px; }
.seo-check-list { display:grid; gap:8px; }
.seo-check { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; background:#f7f8fa; border-left:3px solid #a3aeba; }
.seo-check[data-status=pass] { border-color:#37a46a; }
.seo-check[data-status=review] { border-color:#e6a32d; }
.seo-check .seo-check-icon { width:20px; font-weight:800; color:#55687b; }
.seo-check[data-status=pass] .seo-check-icon { color:#1b8150; }
.seo-check[data-status=review] .seo-check-icon { color:#9b610b; }
.seo-check strong { display:block; font-size:13px; color:#18232d; }
.seo-check p { color:#586572; line-height:1.45; font-size:12px; margin:4px 0 0; }
.seo-limit { max-width:840px; margin:26px 0 0; }
@media(max-width:860px) { .seo-workspace { grid-template-columns:1fr; } .seo-app-heading { display:block; } .seo-app-heading > p { margin-top:18px; } }
@media(max-width:480px) { .seo-app { padding:55px 18px 65px; } .seo-input-panel,.seo-results-panel { padding:21px; } .seo-hero { padding-bottom:54px; } .seo-actions button { width:100%; } }