.seo-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #10b981; --p-text: #0f172a; width: 100%; max-width: 900px; margin: 0 auto; background: var(--p-bg); border-radius: 24px; padding: 32px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); border: 1px solid var(--p-border); }
.seo-header { font-size: 1.5rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.seo-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 16px; border-bottom: 1px solid var(--p-border); margin-bottom: 24px; text-align: center; }

.seo-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.seo-input-group { margin-bottom: 20px; }
.seo-label { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.seo-input, .seo-textarea { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; outline: none; font-family: inherit; font-size: 1rem; color: var(--p-text); background: var(--p-bg); transition: 0.2s; }
.seo-input:focus, .seo-textarea:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.seo-textarea { resize: vertical; min-height: 80px; }
.seo-indicator { font-size: 0.85rem; font-weight: bold; }
.status-good { color: #10b981; }
.status-warn { color: #f59e0b; }
.status-err { color: #ef4444; }

/* 谷歌 SERP 逼真预览 */
.serp-preview-box { background: #f8fafc; border: 1px solid var(--p-border); border-radius: 16px; padding: 24px; }
.serp-title-bar { font-size: 0.9rem; font-weight: 600; color: #64748b; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.google-result { font-family: arial, sans-serif; max-width: 600px; background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.g-url { font-size: 14px; color: #202124; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.g-url span { color: #4d5156; }
.g-title { font-size: 20px; color: #1a0dab; text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.3; cursor: pointer; word-wrap: break-word; }
.g-title:hover { text-decoration: underline; }
.g-desc { font-size: 14px; color: #4d5156; line-height: 1.58; word-wrap: break-word; }

[data-theme="dark"] .seo-tool-wrapper { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .seo-input, [data-theme="dark"] .seo-textarea { background: #0f172a; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .serp-preview-box { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .google-result { background: #1e293b; }
[data-theme="dark"] .g-url { color: #e8eaed; }
[data-theme="dark"] .g-url span { color: #bdc1c6; }
[data-theme="dark"] .g-title { color: #8ab4f8; }
[data-theme="dark"] .g-desc { color: #bdc1c6; }