/**
 * SEO Foundation Validator Styles
 */

:root {
    --seo-surface: #ffffff;
    --seo-surface-muted: #f5f5f5;
    --seo-surface-subtle: #f8f9fa;
    --seo-surface-soft: #f8fafc;
    --seo-border: #e0e0e0;
    --seo-border-strong: #d0d0d0;
    --seo-divider: #e5e7eb;
    --seo-field-surface: #ffffff;
    --seo-field-surface-filled: #f5f5f5;
    --seo-text-primary: #333333;
    --seo-text-secondary: #666666;
    --seo-text-muted: #9ca3af;
    --seo-text-inverse: #ffffff;
    --seo-link: #2563eb;
    --seo-success-bg: #f4fff7;
    --seo-success-item-bg: #ecfdf3;
    --seo-success-border: #bbf7d0;
    --seo-success-text: #16a34a;
    --seo-success-badge: #86efac;
    --seo-success-heading: #15803d;
    --seo-success-heading-bg: #dcfce7;
    --seo-warning-bg: #fffaf0;
    --seo-warning-item-bg: #fff4e5;
    --seo-warning-border: #fed7aa;
    --seo-warning-text: #d97706;
    --seo-warning-badge: #fcd34d;
    --seo-warning-heading: #b45309;
    --seo-warning-heading-bg: #ffedd5;
    --seo-error-bg: #fef2f2;
    --seo-error-item-bg: #fee8e8;
    --seo-error-border: #fca5a5;
    --seo-error-text: #dc2626;
    --seo-error-heading: #b91c1c;
    --seo-error-heading-bg: #fee2e2;
    --seo-info-bg: #f0f9ff;
    --seo-info-item-bg: #e6f4ff;
    --seo-info-border: #bae6fd;
    --seo-info-text: #0284c7;
    --seo-info-badge: #7dd3fc;
    --seo-info-heading: #0369a1;
    --seo-info-heading-bg: #e0f2fe;
    --seo-suggestion-bg: #faf5ff;
    --seo-suggestion-item-bg: #f5edff;
    --seo-suggestion-border: #c084fc;
    --seo-suggestion-text: #7c3aed;
    --seo-suggestion-badge: #d8b4fe;
    --seo-suggestion-heading: #6d28d9;
    --seo-suggestion-heading-bg: #f3e8ff;
}

html[data-theme="dark"],
html.w-theme-dark,
body.w-theme-dark {
    --seo-surface: #222222;
    --seo-surface-muted: #1b1b1b;
    --seo-surface-subtle: #1b1b1b;
    --seo-surface-soft: #0f141b;
    --seo-border: #4b5560;
    --seo-border-strong: #4b5560;
    --seo-divider: #222222;
    --seo-field-surface: #222222;
    --seo-field-surface-filled: #222222;
    --seo-text-primary: #f0f6fc;
    --seo-text-secondary: #8b949e;
    --seo-text-muted: #8b949e;
    --seo-link: #7dd3fc;
    --seo-success-bg: linear-gradient(135deg, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0.05) 100%);
    --seo-success-item-bg: linear-gradient(135deg, rgba(22, 163, 74, 0.22) 0%, rgba(22, 163, 74, 0.08) 100%);
    --seo-success-border: rgba(34, 197, 94, 0.28);;
    --seo-success-text: #4ade80;
    --seo-success-badge: #22c55e;
    --seo-success-heading: #86efac;
    --seo-success-heading-bg: rgba(34, 197, 94, 0.12);
    --seo-warning-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.16) 0%, rgba(217, 119, 6, 0.05) 100%);
    --seo-warning-item-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.22) 0%, rgba(217, 119, 6, 0.08) 100%);
    --seo-warning-border: rgba(251, 191, 36, 0.28);
    --seo-warning-text: #fbbf24;
    --seo-warning-badge: #f59e0b;
    --seo-warning-heading: #fde68a;
    --seo-warning-heading-bg: rgba(251, 191, 36, 0.12);
    --seo-error-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.16) 0%, rgba(220, 38, 38, 0.05) 100%);
    --seo-error-item-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.22) 0%, rgba(220, 38, 38, 0.08) 100%);
    --seo-error-border: rgba(248, 113, 113, 0.28);
    --seo-error-text: #f87171;
    --seo-error-heading: #fca5a5;
    --seo-error-heading-bg: rgba(248, 113, 113, 0.12);
    --seo-info-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.16) 0%, rgba(2, 132, 199, 0.05) 100%);
    --seo-info-item-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.22) 0%, rgba(2, 132, 199, 0.08) 100%);
    --seo-info-border: rgba(56, 189, 248, 0.28);
    --seo-info-text: #38bdf8;
    --seo-info-badge: #7dd3fc;
    --seo-info-heading: #bae6fd;
    --seo-info-heading-bg: rgba(56, 189, 248, 0.12);
    --seo-suggestion-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.05) 100%);
    --seo-suggestion-item-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.08) 100%);
    --seo-suggestion-border: rgba(167, 139, 250, 0.26);
    --seo-suggestion-text: #c4b5fd;
    --seo-suggestion-badge: #a78bfa;
    --seo-suggestion-heading: #ddd6fe;
    --seo-suggestion-heading-bg: rgba(167, 139, 250, 0.12);
}

html[data-theme="dark"] .seo-summary-passed,
html.w-theme-dark .seo-summary-passed,
body.w-theme-dark .seo-summary-passed {
    border-color: rgba(34, 197, 94, 0.28);;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"],
    html.w-theme-system,
    body.w-theme-system {
        --seo-surface: #0d1116;
        --seo-surface-muted: #222222;
        --seo-surface-subtle: #1d1d1d;
        --seo-surface-soft: #0f141b;
        --seo-border: #3d444d;
        --seo-border-strong: #4b5560;
        --seo-divider: #30363d;
        --seo-field-surface: #1d1d1d;
        --seo-field-surface-filled: #222222;
        --seo-text-primary: #f0f6fc;
        --seo-text-secondary: #8b949e;
        --seo-text-muted: #8b949e;
        --seo-link: #7dd3fc;
        --seo-success-bg: linear-gradient(135deg, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0.05) 100%);
        --seo-success-item-bg: linear-gradient(135deg, rgba(22, 163, 74, 0.22) 0%, rgba(22, 163, 74, 0.08) 100%);
        --seo-success-border: rgba(34, 197, 94, 0.28);
        --seo-success-text: #4ade80;
        --seo-success-badge: #22c55e;
        --seo-success-heading: #86efac;
        --seo-success-heading-bg: rgba(34, 197, 94, 0.12);
        --seo-warning-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.16) 0%, rgba(217, 119, 6, 0.05) 100%);
        --seo-warning-item-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.22) 0%, rgba(217, 119, 6, 0.08) 100%);
        --seo-warning-border: rgba(251, 191, 36, 0.28);
        --seo-warning-text: #fbbf24;
        --seo-warning-badge: #f59e0b;
        --seo-warning-heading: #fde68a;
        --seo-warning-heading-bg: rgba(251, 191, 36, 0.12);
        --seo-error-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.16) 0%, rgba(220, 38, 38, 0.05) 100%);
        --seo-error-item-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.22) 0%, rgba(220, 38, 38, 0.08) 100%);
        --seo-error-border: rgba(248, 113, 113, 0.28);
        --seo-error-text: #f87171;
        --seo-error-heading: #fca5a5;
        --seo-error-heading-bg: rgba(248, 113, 113, 0.12);
        --seo-info-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.16) 0%, rgba(2, 132, 199, 0.05) 100%);
        --seo-info-item-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.22) 0%, rgba(2, 132, 199, 0.08) 100%);
        --seo-info-border: rgba(56, 189, 248, 0.28);
        --seo-info-text: #38bdf8;
        --seo-info-badge: #7dd3fc;
        --seo-info-heading: #bae6fd;
        --seo-info-heading-bg: rgba(56, 189, 248, 0.12);
        --seo-suggestion-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.05) 100%);
        --seo-suggestion-item-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.08) 100%);
        --seo-suggestion-border: rgba(167, 139, 250, 0.26);
        --seo-suggestion-text: #c4b5fd;
        --seo-suggestion-badge: #a78bfa;
        --seo-suggestion-heading: #ddd6fe;
        --seo-suggestion-heading-bg: rgba(167, 139, 250, 0.12);
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .seo-summary-passed,
    html.w-theme-system .seo-summary-passed,
    body.w-theme-system .seo-summary-passed {
        border-color: #bbf7d0;
    }
}

.page-container {
    --seo-surface: #ffffff;
    --seo-surface-muted: #f5f5f5;
    --seo-surface-subtle: #f8f9fa;
    --seo-surface-soft: #ffffff;
    --seo-border: #e0e0e0;
    --seo-border-strong: #d0d0d0;
    --seo-divider: #e5e7eb;
    --seo-field-surface: #ffffff;
    --seo-field-surface-filled: #f5f5f5;
    --seo-text-primary: #333333;
    --seo-text-secondary: #666666;
    --seo-text-muted: #9ca3af;
    --seo-link: #2563eb;
    --seo-success-bg: #f4fff7;
    --seo-success-item-bg: #ecfdf3;
    --seo-success-border: #bbf7d0;
    --seo-success-text: #16a34a;
    --seo-success-badge: #86efac;
    --seo-success-heading: #15803d;
    --seo-success-heading-bg: #dcfce7;
    --seo-warning-bg: #fffaf0;
    --seo-warning-item-bg: #fff4e5;
    --seo-warning-border: #fed7aa;
    --seo-warning-text: #d97706;
    --seo-warning-badge: #fcd34d;
    --seo-warning-heading: #b45309;
    --seo-warning-heading-bg: #ffedd5;
    --seo-error-bg: #fef2f2;
    --seo-error-item-bg: #fee8e8;
    --seo-error-border: #fca5a5;
    --seo-error-text: #dc2626;
    --seo-error-heading: #b91c1c;
    --seo-error-heading-bg: #fee2e2;
    --seo-info-bg: #f0f9ff;
    --seo-info-item-bg: #e6f4ff;
    --seo-info-border: #bae6fd;
    --seo-info-text: #0284c7;
    --seo-info-badge: #7dd3fc;
    --seo-info-heading: #0369a1;
    --seo-info-heading-bg: #e0f2fe;
    --seo-suggestion-bg: #faf5ff;
    --seo-suggestion-item-bg: #f5edff;
    --seo-suggestion-border: #c084fc;
    --seo-suggestion-text: #7c3aed;
    --seo-suggestion-badge: #d8b4fe;
    --seo-suggestion-heading: #6d28d9;
    --seo-suggestion-heading-bg: #f3e8ff;
}

.w-panel:has(.seo-additional-fields),
.w-panel:has(.seo-validation-panel),
.w-panel:has(.seo-additional-fields) .w-panel__content,
.w-panel:has(.seo-validation-panel) .w-panel__content {
    max-width: none !important;
    width: 100% !important;
}

.seo-validation-panel {
    width: 100%;
    box-sizing: border-box;
    background: var(--seo-surface);
    border: 1px solid var(--seo-border);
    border-radius: 8px;
    margin: 24px 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--seo-text-primary);
}

.seo-validation-panel-wrapper {
    width: 100%;
    margin-bottom: 0;
}

.seo-validation-panel-field,
.seo-validation-panel-input {
    width: 100%;
}

.w-panel__content .seo-validation-panel,
#tab-promote .seo-validation-panel {
    margin-top: 32px;
    margin-bottom: 0;
}

#tab-promote > .seo-validation-panel ~ * {
    margin-top: 24px;
}

.seo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--seo-border);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to bottom, var(--seo-surface-subtle), var(--seo-surface-muted));
}

.seo-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--seo-text-primary);
}

.seo-panel-header h3 svg {
    stroke-width: 2;
    color: #43b1b0;
}

.seo-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(4, 120, 87, 0.12);
    border-radius: 6px;
    background: #10b981;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.12);
    color: var(--seo-text-inverse);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, background 120ms ease;
}

.seo-refresh-btn:hover {
    background: #0e8f62;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
}

.seo-refresh-btn:active {
    background: #0c7a54;
    transform: translateY(0);
    box-shadow: 0 0 2px rgba(16, 185, 129, 0.08);
}

.seo-refresh-btn:disabled,
.seo-refresh-btn.seo-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.seo-btn-icon,
.seo-btn-icon img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seo-btn-icon img {
    width: 16px;
    height: 16px;
}

.seo-theme-icon--button {
    filter: none;
}

.seo-btn-text {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.seo-panel-body {
    padding: 20px;
}

.seo-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.seo-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border: 3px solid var(--seo-surface-muted);
    border-top-color: #43b1b0;
    border-radius: 50%;
    animation: seo-spin 0.8s linear infinite;
}

@keyframes seo-spin {
    to { transform: rotate(360deg); }
}

.seo-loading p {
    min-height: 120px;
    margin: 0;
    color: var(--seo-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.seo-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--seo-divider);
}

.seo-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--seo-surface-soft);
    color: var(--seo-text-primary);
}

.seo-count {
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.seo-label {
    color: var(--seo-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seo-charcount {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.2;
}

.seo-charcount--empty { color: var(--seo-text-muted); }
.seo-charcount--ok { color: var(--seo-success-text); }
.seo-charcount--warning { color: var(--seo-warning-text); }
.seo-charcount--over { color: var(--seo-error-text); }

.seo-checks-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seo-category h4 {
    margin: 0 0 10px;
    color: var(--seo-text-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seo-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 3px 0 4px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
}

.seo-check-content {
    flex: 1;
    width: 100%;
}

.seo-check-message {
    flex: 1;
}

.seo-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 2.5;
}

.seo-summary-passed,
.seo-publish-guard--ready {
    background: var(--seo-success-bg);
    border-color: #22c55e;
    color: var(--seo-success-text);
}

.seo-summary-passed .seo-count,
.seo-icon-success,
.seo-images-list .ok-badge {
    color: var(--seo-success-text);
}

.seo-summary-suggestions {
    background: var(--seo-info-bg);
    border-color: var(--seo-info-border);
    color: var(--seo-info-text);
}

.seo-summary-suggestions .seo-count,
.seo-icon-suggestion {
    color: var(--seo-info-text);
}

.seo-summary-warnings,
.seo-category--warnings {
    background: var(--seo-warning-bg);
    border-color: var(--seo-warning-border);
    color: var(--seo-warning-text);
}

.seo-summary-warnings .seo-count,
.seo-icon-warning {
    color: var(--seo-warning-text);
}

.seo-summary-errors,
.seo-category--errors,
.seo-publish-guard--blocked {
    background: var(--seo-error-bg);
    border-color: var(--seo-error-border);
    color: var(--seo-error-text);
}

.seo-summary-errors .seo-count,
.seo-icon-error,
.seo-blocked-toast__icon {
    color: var(--seo-error-text);
}

.seo-icon-info { color: var(--seo-info-text); }

.seo-check-success {
    background: var(--seo-success-item-bg);
    color: var(--seo-success-text);
}

.seo-check-warning {
    background: var(--seo-warning-item-bg);
    color: var(--seo-warning-text);
}

.seo-check-error {
    background: var(--seo-error-item-bg);
    color: var(--seo-error-text);
}

.seo-check-info {
    background: var(--seo-info-item-bg);
    color: var(--seo-info-text);
}

.seo-check-suggestion {
    background: var(--seo-suggestion-item-bg);
    border-color: var(--seo-suggestion-border);
    color: var(--seo-suggestion-text);
}

@media (max-width: 768px) {
    .seo-summary {
        flex-direction: column;
    }

    .seo-summary-item {
        flex-direction: row;
        justify-content: space-between;
    }

    .seo-count {
        font-size: 20px;
    }
}

.seo-additional-fields {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.seo-additional-fields .w-field__wrapper {
    margin-bottom: 24px;
}

.seo-additional-fields .w-field__label {
    display: block;
    margin-bottom: 6px;
    color: var(--seo-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.seo-additional-fields .help:not(.seo-charcount),
.seo-images-list .alt-text,
.seo-links-list .link-text {
    margin: 4px 0 8px;
    color: var(--seo-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.seo-additional-fields .seo-charcount {
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.4;
}

.seo-additional-fields select,
.seo-additional-fields input[type="url"],
.seo-additional-fields input[type="text"],
.seo-additional-fields textarea,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]) {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--seo-border-strong) !important;
    border-radius: 4px;
    background-color: var(--seo-field-surface) !important;
    background-image: none !important;
    color: var(--seo-text-primary) !important;
    caret-color: var(--seo-text-primary) !important;
    -webkit-text-fill-color: var(--seo-text-primary) !important;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: border-color 0.2s, background-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.seo-additional-fields textarea {
    min-height: 80px;
    resize: vertical;
}

/* ── Inline field tooltips (info icon at input right edge) ─────────────── */
.seo-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.seo-input-with-info {
    position: relative;
}

/* Reserve space for the info icon so text doesn't overlap */
.seo-input-with-info :is(input, textarea, select) {
    padding-right: 44px !important;
}

.seo-tooltip--input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.seo-tooltip--textarea {
    top: 10px;
    transform: none;
}

.seo-info-btn {
    appearance: none;
    width: 25px;
    height: 25px;
    border: 0.2px solid #a8c4ff2b;
    background: transparent;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seo-info-btn:hover,
.seo-info-btn:focus {
    opacity: 1;
    outline: none;
    filter: brightness(1.05);
}


.seo-tooltip-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10000;
    width: min(340px, 80vw);
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--seo-surface-soft);
    color: var(--seo-text-secondary);
    border: 1.5px solid var(--seo-divider);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.seo-tooltip-content::before {
    content: '';
    position: absolute;
    right: 10px;
    top: -6px;
    width: 10px;
    height: 10px;
    background: var(--seo-surface-soft);
    border-left: 1.5px solid var(--seo-divider);
    border-top: 1.5px solid var(--seo-divider);
    transform: rotate(45deg);
}

.seo-tooltip:hover .seo-tooltip-content,
.seo-tooltip:focus-within .seo-tooltip-content,
.seo-tooltip[data-open="1"] .seo-tooltip-content {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .seo-tooltip-content { transition: none; }
}

.seo-additional-fields :is(input[type="url"], input[type="text"], textarea)::placeholder,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])::placeholder {
    color: var(--seo-text-muted) !important;
    opacity: 1;
}

.seo-additional-fields :is(select, input[type="url"], input[type="text"], textarea):not(:placeholder-shown),
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):not(:placeholder-shown) {
    background-color: var(--seo-field-surface-filled) !important;
}

.seo-additional-fields :is(select, input[type="url"], input[type="text"], textarea):focus,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):focus {
    outline: none;
    border-color: var(--seo-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(67, 177, 176, 0.1) !important;
    background-color: var(--seo-field-surface) !important;
}

.seo-additional-fields :is(input[type="url"], input[type="text"], textarea):focus:not(:placeholder-shown),
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):focus:not(:placeholder-shown) {
    background-color: var(--seo-field-surface-filled) !important;
}

.seo-additional-fields :is(input[type="url"], input[type="text"]):-webkit-autofill,
.seo-additional-fields :is(input[type="url"], input[type="text"]):-webkit-autofill:hover,
.seo-additional-fields :is(input[type="url"], input[type="text"]):-webkit-autofill:focus,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):-webkit-autofill,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):-webkit-autofill:hover,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"]):-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--seo-field-surface-filled) inset !important;
    box-shadow: 0 0 0 30px var(--seo-field-surface-filled) inset !important;
    -webkit-text-fill-color: var(--seo-text-primary) !important;
}

#tab-promote .w-field:has(:is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])),
#tab-promote .w-field__wrapper:has(:is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])),
#tab-promote .w-field__input:has(:is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])) {
    background: transparent !important;
    background-image: none !important;
}

.seo-additional-fields .button {
    padding: 6px 12px;
    border: 1px solid var(--seo-border-strong);
    border-radius: 4px;
    background: var(--seo-surface);
    color: var(--seo-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.seo-additional-fields .button:hover {
    background: var(--seo-surface-muted);
    border-color: var(--seo-text-secondary);
}

.seo-additional-fields .button-secondary {
    background: var(--seo-surface-muted);
    color: var(--seo-text-secondary);
}

.seo-additional-fields .button-secondary:hover {
    background: var(--seo-surface-soft);
}

#seo-og-image-preview,
.seo-images-list,
.seo-links-list {
    padding: 8px;
    border: 1px solid var(--seo-border);
    border-radius: 4px;
    background: var(--seo-surface-soft);
}

.seo-check-content,
.seo-images-dropdown,
.seo-links-dropdown {
    width: 100%;
}

.seo-images-dropdown,
.seo-links-dropdown {
    margin-top: 8px;
    padding: 8px 0;
}

.seo-images-dropdown summary,
.seo-links-dropdown summary {
    padding: 4px 0;
    color: var(--seo-link);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.seo-images-dropdown summary:hover,
.seo-links-dropdown summary:hover {
    text-decoration: underline;
}

html[data-theme="dark"] .seo-theme-icon--header,
html[data-theme="dark"] .seo-theme-icon--initial,
html.w-theme-dark .seo-theme-icon--header,
html.w-theme-dark .seo-theme-icon--initial,
body.w-theme-dark .seo-theme-icon--header,
body.w-theme-dark .seo-theme-icon--initial {
    filter: none;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .seo-theme-icon--header,
    html[data-theme="auto"] .seo-theme-icon--initial,
    html.w-theme-system .seo-theme-icon--header,
    html.w-theme-system .seo-theme-icon--initial,
    body.w-theme-system .seo-theme-icon--header,
    body.w-theme-system .seo-theme-icon--initial {
        filter: none;
    }
}

.seo-images-list,
.seo-links-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px;
}

.seo-images-list li,
.seo-links-list li {
    margin: 4px 0;
    padding: 8px;
    border: 1px solid var(--seo-border);
    border-radius: 3px;
    background: var(--seo-surface);
    font-size: 12px;
    line-height: 1.5;
}

.seo-images-list li.has-alt { border-left: 3px solid var(--seo-success-text); }
.seo-images-list li.no-alt {
    border-left: 3px solid var(--seo-error-text);
    background: var(--seo-error-bg);
}

.seo-images-list .missing-badge {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--seo-error-bg);
    color: var(--seo-error-text);
    font-size: 11px;
    font-weight: 600;
}

.seo-links-list li.internal-link { border-left: 3px solid var(--seo-info-text); }
.seo-links-list li.external-link { border-left: 3px solid var(--seo-suggestion-text); }

.seo-links-list .link-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.seo-links-list .link-block-label {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--seo-info-bg);
    color: var(--seo-info-text);
    font-size: 11px;
    font-weight: 500;
}

.seo-links-list .link-url {
    display: block;
    margin-top: 4px;
    color: var(--seo-link);
    font-family: monospace;
    word-break: break-all;
}

.seo-required-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--seo-error-bg);
    color: var(--seo-error-text);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.seo-publish-guard {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.seo-publish-guard--blocked svg { color: var(--seo-error-text); margin-top: 1px; }
.seo-publish-guard--ready svg { color: var(--seo-success-text); margin-top: 1px; }
/* Breadcrumb / step badges for publish modal */
.seo-steps {
    display:block;
}
.seo-steps-list {
    display:flex;
    gap:10px;
    align-items:center;
    list-style:none;
    padding:0;
    margin:0;
}
.seo-step {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--seo-text-secondary);
}
.seo-step-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:28px;
    border-radius:14px;
    font-weight:700;
    font-size:13px;
    background:var(--seo-surface);
    color:var(--seo-text-primary);
    border:1px solid var(--seo-border);
    padding:0 6px;
}
.seo-step--done .seo-step-badge {
    background:var(--seo-success-bg);
    color:var(--seo-success-text);
    border-color:var(--seo-success-border);
}
.seo-step--active .seo-step-badge {
    background:var(--seo-info-bg);
    color:var(--seo-info-text);
    border-color:var(--seo-info-border);
}
.seo-step-label { font-weight:600; color:var(--seo-text-primary); }

button.seo-publish-blocked,
[name="action-publish"].seo-publish-blocked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.seo-blocked-toast {
    position: relative;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 12px 24px;
    padding: 14px 16px;
    border-left: 4px solid var(--seo-error-text);
    border-radius: 6px;
    background: var(--seo-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    color: var(--seo-text-primary);
    font-size: 13px;
    line-height: 1.5;
    animation: seoToastSlideIn 0.3s ease-out both;
}

.seo-blocked-toast--hiding {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes seoToastSlideIn {
    from { transform: translateY(-24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.seo-blocked-toast__body { flex: 1; }
.seo-blocked-toast__body strong {
    display: block;
    margin-bottom: 4px;
    color: var(--seo-text-primary);
    font-size: 14px;
}

.seo-blocked-toast__body p {
    margin: 0 0 8px;
    color: var(--seo-text-secondary);
    font-size: 12px;
}

.seo-blocked-toast__body ul {
    margin: 0;
    padding-left: 16px;
    color: #fca5a5;
    font-size: 12px;
}

.seo-blocked-toast__body ul li { margin-bottom: 3px; }

.seo-blocked-toast__close {
    flex-shrink: 0;
    padding: 2px;
    border: none;
    background: none;
    color: #9ca3af;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.seo-blocked-toast__close:hover { color: var(--seo-text-primary); }

@keyframes seoAttentionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    30% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.35); }
    60% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.1); }
}

.seo-panel--attention {
    animation: seoAttentionPulse 1.8s ease-out;
}

@keyframes seoFieldAttention {
    0%, 100% { border-color: inherit; background: inherit; }
    20% { border-color: #ef4444 !important; background: #fff5f5 !important; }
    50% { border-color: #f87171 !important; background: #fff0f0 !important; }
    80% { border-color: #ef4444 !important; background: #fff5f5 !important; }
}

.seo-field--attention {
    outline: 2px solid #ef4444 !important;
    outline-offset: 1px;
    animation: seoFieldAttention 2.5s ease-out !important;
}

/* ── SEO modal shell ────────────────────────────────────────────────────── */
.seo-modal {
    max-width: 1000px;
}

.seo-modal-header {
    padding: 20px 24px;
}

.seo-modal-header-inner {
    display: flex;
    align-items: center;
}

.seo-modal-steps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.seo-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8b949e;
    font-size: 15px;
    font-weight: 500;
}

.seo-step--done {
    color: #f0f6fc;
}

.seo-step--active {
    color: #f0f6fc;
    font-weight: 600;
}

.seo-step-sep {
    color: #8b949e;
    font-size: 18px;
    line-height: 1;
}

.seo-modal-body {
    padding: 24px 24px 0 !important;
}

.seo-modal-state {
    width: 100%;
}

.seo-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 24px 24px;
}

.seo-modal .url-check-btn {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.seo-modal .url-check-btn-primary {
    background: #FF5A00;
}

.seo-modal .url-check-btn-primary:hover {
    background: #fb7025;
    transform: none;
}

.seo-modal .url-check-btn-secondary {
    border-color: #3d444d;
    background: transparent;
    color: #8b949e;
}

.seo-modal .url-check-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f0f6fc;
}

/* ── Not-run state ──────────────────────────────────────────────────────── */
.seo-modal-notrun {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 20px;
    background: #0d1117;
}

.seo-modal-notrun h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #e6edf3;
}

.seo-modal-notrun p {
    max-width: 420px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.55;
    color: #8b949e;
}

.seo-notrun-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
}

.seo-notrun-icon img {
    width: 58px;
    height: 58px;
}

@media (max-width: 900px) {
    .seo-modal {
        width: 95%;
    }
}

@media (max-width: 640px) {
    .seo-modal-body {
        padding: 24px 24px 0 !important;
    }

    .seo-step {
        font-size: 14px;
    }

    .seo-modal-actions {
        flex-direction: column;
        padding: 0 24px 24px;
    }

    .seo-modal .url-check-btn {
        width: 100%;
    }
}

/* ── Running state ──────────────────────────────────────────────────────── */
.seo-modal-running { background: #0d1117; min-height: 200px; }

.seo-running-rings {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seo-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #FF5A00;
    animation: seo-spin-ring linear infinite;
}
.seo-ring-1 { width: 86px; height: 86px; animation-duration: 1.1s; }
.seo-ring-2 { width: 66px; height: 66px; border-top-color: rgba(255,90,0,0.5); animation-duration: 0.8s; animation-direction: reverse; }
.seo-ring-3 { width: 46px; height: 46px; border-top-color: rgba(255,90,0,0.25); animation-duration: 1.4s; }
.seo-running-icon { position: relative; z-index: 1; }

@keyframes seo-spin-ring { to { transform: rotate(360deg); } }

.seo-running-title { font-size: 14px; font-weight: 600; color: #e6edf3; margin: 0 0 14px; }
.seo-running-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.seo-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,90,0,0.1);
    color: #FF7A30;
    border: 1px solid rgba(255,90,0,0.2);
    animation: seo-pill-pulse 2s ease-in-out infinite;
}
.seo-pill:nth-child(2) { animation-delay: .3s; }
.seo-pill:nth-child(3) { animation-delay: .6s; }
.seo-pill:nth-child(4) { animation-delay: .9s; }
.seo-pill:nth-child(5) { animation-delay: 1.2s; }

@keyframes seo-pill-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ── Pass state ─────────────────────────────────────────────────────────── */
.seo-modal-pass { background: linear-gradient(180deg, #0d1117 0%, #0f1a0f 100%); }

.seo-score-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
}
.seo-score-svg {
    width: 110px;
    height: 110px;
    display: block;
    margin: 0 auto;
}
.seo-score-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.seo-score-num {
    font-size: 30px;
    font-weight: 800;
    color: #3fb950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.seo-score-pct {
    font-size: 12px;
    color: #8b949e;
    font-weight: 600;
    line-height: 1;
}

.seo-pass-title { font-size: 18px; font-weight: 700; color: #3fb950; margin: 0 0 6px; }
.seo-pass-sub   { font-size: 13px; color: #8b949e; margin: 0 auto 12px; max-width: 360px; line-height: 1.5; }

/* Warning chips in pass state */
.seo-warn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; max-width: 420px; margin-left: auto; margin-right: auto; }
.seo-warn-chip {
    display: inline-block;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.25);
    text-align: left;
    line-height: 1.4;
    max-width: 340px;
    word-break: break-word;
}
.seo-warn-chip--more {
    background: rgba(139,148,158,0.1);
    color: #8b949e;
    border-color: rgba(139,148,158,0.2);
}

/* ── Fail state ─────────────────────────────────────────────────────────── */
.seo-modal-fail { background: #0d1117; text-align: left; }

.seo-fail-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px 14px;
    background: rgba(248,81,73,0.06);
    border-bottom: 1px solid rgba(248,81,73,0.15);
}
.seo-fail-icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248,81,73,0.1);
    border-radius: 50%;
}
.seo-fail-header h3 { font-size: 16px; font-weight: 700; color: #f85149; margin: 0 0 4px; }
.seo-fail-summary   { font-size: 12px; color: #8b949e; margin: 0; line-height: 1.4; }

.seo-fail-list {
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}
.seo-fail-list::-webkit-scrollbar { width: 4px; }
.seo-fail-list::-webkit-scrollbar-track { background: transparent; }
.seo-fail-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

.seo-fail-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(248,81,73,0.06);
    border: 1px solid rgba(248,81,73,0.15);
    border-left: 3px solid #f85149;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
}
.seo-fail-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(248,81,73,0.18);
    color: #f85149;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.seo-fail-msg { color: #cdd9e5; flex: 1; }

/* Locked button row */
.seo-locked-row { text-align: center; padding: 8px 20px 0; }
.seo-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #161b22;
    color: #484f58;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.seo-modal-fail .seo-modal-actions { padding: 10px 20px 20px; justify-content: flex-start; }

/* ── Publish buttons ────────────────────────────────────────────────────── */
.seo-btn-run, .seo-btn-publish {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Force placeholder tone across native and custom SEO inputs */
.seo-meta-field::placeholder,
.seo-meta-field::-webkit-input-placeholder,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])::placeholder,
#tab-promote :is(#id_title, #id_slug, #id_seo_title, #id_search_description, [name="title"], [name="slug"], [name="seo_title"], [name="search_description"])::-webkit-input-placeholder {
    color: var(--seo-text-muted) !important;
    -webkit-text-fill-color: var(--seo-text-muted) !important;
    opacity: 1 !important;
}

/* ── Button State Controller ─────────────────────────────────────────────── */
.seo-refresh-btn.seo-btn-active { background: #10b981; color: #fff; cursor: pointer; opacity: 1; }
.seo-refresh-btn.seo-btn-active:hover { background: #0e8f62; transform: translateY(-1px); }
.seo-refresh-btn.seo-btn-disabled { background: #9ca3af; color: #fff; cursor: not-allowed; opacity: 0.7; }
.seo-refresh-btn.seo-btn-disabled:hover { background: #9ca3af; transform: none; }